*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }:root, [data-theme="dark"] {
      --bg: #030712;
      --header-border: #1f2937;
      --card-bg: #111827;
      --card-border: #1f2937;
      --card-border-hover: #374151;
      --card-shadow: 0 1px 3px rgba(0,0,0,.4);
      --card-shadow-hover: 0 4px 12px rgba(0,0,0,.5);
      --text-primary: #f9fafb;
      --text-secondary: #9ca3af;
      --btn-bg: #111827;
      --btn-border: #374151;
      --btn-text: #d1d5db;
      --btn-active-bg: #ffffff;
      --btn-active-text: #111827;
      --toggle-bg: #1f2937;
      --toggle-color: #d1d5db;
      --toggle-hover: #374151;
    }

    [data-theme="light"] {
      --bg: #f3f4f6;
      --header-border: #e5e7eb;
      --card-bg: #ffffff;
      --card-border: #e5e7eb;
      --card-border-hover: #d1d5db;
      --card-shadow: 0 1px 3px rgba(0,0,0,.08);
      --card-shadow-hover: 0 4px 12px rgba(0,0,0,.12);
      --text-primary: #111827;
      --text-secondary: #6b7280;
      --btn-bg: #ffffff;
      --btn-border: #e5e7eb;
      --btn-text: #374151;
      --btn-active-bg: #111827;
      --btn-active-text: #ffffff;
      --toggle-bg: #e5e7eb;
      --toggle-color: #4b5563;
      --toggle-hover: #d1d5db;
    }

    body {
      min-height: 100vh;
      background: var(--bg);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      -webkit-font-smoothing: antialiased;
      transition: background 0.3s;
    }

    /* ?????? Header ?????? */
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px;
      border-bottom: 1px solid var(--header-border);
    }

    header h1 {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--text-primary);
      letter-spacing: -0.01em;
      margin-right: auto;
    }

    .admin-login-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 40px;
      padding: 0 14px;
      margin-left: auto;
      margin-right: 10px;
      border: 1px solid var(--btn-border);
      border-radius: 999px;
      background: color-mix(in srgb, var(--btn-bg) 82%, transparent);
      color: var(--btn-text);
      font-size: 0.86rem;
      font-weight: 700;
      line-height: 1;
      text-decoration: none;
      transition: background 0.2s, border-color 0.2s, transform 0.2s;
    }

    .admin-login-link:hover {
      background: var(--toggle-bg);
      border-color: var(--card-border-hover);
      transform: translateY(-1px);
    }

    #theme-toggle {
      width: 40px; height: 40px;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      background: var(--toggle-bg);
      color: var(--toggle-color);
      transition: background 0.2s;
    }
    #theme-toggle:hover { background: var(--toggle-hover); }
    #theme-toggle svg { width: 20px; height: 20px; }

    /* ?????? Main ?????? */
    main {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 96px;
      padding-inline: 16px;
      padding-bottom: 110px;
    }

    /* ?????? Hover zone ?????? */
    #hover-zone {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
      width: 100%;
      max-width: 672px;
    }

    .section-tabs {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    /* ?????? Section buttons ?????? */
    .section-tab {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 32px;
      border-radius: 9999px;
      border: 1px solid var(--btn-border);
      background: var(--btn-bg);
      color: var(--btn-text);
      font-size: 0.875rem;
      font-weight: 600;
      letter-spacing: 0.025em;
      cursor: default;
      transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s;
      box-shadow: var(--card-shadow);
    }
    .section-tab.open {
      background: var(--btn-active-bg);
      color: var(--btn-active-text);
      border-color: var(--btn-active-bg);
      box-shadow: 0 4px 16px rgba(0,0,0,.15);
      transform: scale(1.05);
    }

    .tab-chevron {
      transition: transform 0.3s;
      width: 16px; height: 16px;
    }
    .section-tab.open .tab-chevron { transform: rotate(180deg); }

    /* ?????? Service list wrapper ?????? */
    #services-wrapper,
    #gameservers-wrapper,
    #valheim-wrapper {
      width: 100%;
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      transition: max-height 0.5s ease-in-out, opacity 0.4s ease;
    }
    #services-wrapper.open,
    #gameservers-wrapper.open,
    #valheim-wrapper.open {
      max-height: 1280px;
      opacity: 1;
    }

    #gameservers-wrapper.open {
      max-height: none;
      overflow: visible;
    }

    #services-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    #services-list > .service-card {
      grid-column: 1 / -1;
    }

    #services-list > .service-card:nth-of-type(1),
    #services-list > .service-card:nth-of-type(2) {
      grid-column: auto;
    }

    #services-list > .service-card:nth-of-type(1),
    #services-list > .service-card:nth-of-type(2) {
      padding-inline: 16px;
    }

    .gameserver-card {
      display: grid;
      gap: 16px;
      padding: 18px;
      border: 1px solid var(--card-border);
      border-radius: 12px;
      background: var(--card-bg);
      box-shadow: var(--card-shadow);
    }

    .gameserver-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
    }

    .gameserver-kicker {
      color: var(--text-secondary);
      font-size: 0.76rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .gameserver-head h2 {
      margin-top: 4px;
      color: var(--text-primary);
      font-size: 1.35rem;
      line-height: 1.15;
    }

    .cs2-admin-rcon-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 34px;
      padding: 7px 12px;
      border: 1px solid rgba(56, 189, 248, .42);
      border-radius: 8px;
      color: #dff6ff;
      background: rgba(14, 116, 144, .2);
      font-size: .78rem;
      font-weight: 900;
      text-decoration: none;
      white-space: nowrap;
      transition: border-color .16s ease, background .16s ease, transform .16s ease;
    }

    .cs2-admin-rcon-link:hover,
    .cs2-admin-rcon-link:focus-visible {
      border-color: rgba(125, 211, 252, .82);
      color: #fff;
      background: rgba(14, 116, 144, .38);
      transform: translateY(-1px);
    }

    .server-status {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 6px 10px;
      border: 1px solid rgba(34, 197, 94, .28);
      border-radius: 999px;
      background: rgba(34, 197, 94, .12);
      color: #16a34a;
      font-size: 0.76rem;
      font-weight: 800;
      text-transform: uppercase;
    }

    .server-status::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #22c55e;
      box-shadow: 0 0 0 4px rgba(34, 197, 94, .14);
    }

    .cs2-public-overview {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .cs2-public-tile {
      display: grid;
      gap: 8px;
      min-width: 0;
      min-height: 118px;
      padding: 18px 20px;
      border: 1px solid rgba(148, 163, 184, .18);
      border-radius: 14px;
      background: rgba(15, 23, 42, .24);
    }

    .cs2-public-tile > span {
      color: var(--text-secondary);
      font-size: .84rem;
      font-weight: 950;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .cs2-public-tile strong {
      color: var(--text-primary);
      font-size: clamp(1.45rem, 3vw, 2rem);
      line-height: 1.05;
    }

    .cs2-public-tile small {
      color: var(--text-secondary);
      font-size: .9rem;
      line-height: 1.35;
    }

    .cs2-public-tile.online strong,
    .cs2-public-tile .online {
      color: #f9fafb;
    }

    .cs2-public-tile.blocked small,
    .cs2-public-tile .blocked {
      color: #fde68a;
    }

    .cs2-public-tile.broken small,
    .cs2-public-tile.offline strong,
    .cs2-public-tile .broken,
    .cs2-public-tile .offline {
      color: #fecaca;
    }

    .cs2-public-tile.unknown small,
    .cs2-public-tile.unknown strong,
    .cs2-public-tile .unknown {
      color: #cbd5e1;
    }

    .server-status.offline,
    .server-status.broken {
      border-color: rgba(248, 113, 113, .38);
      background: rgba(248, 113, 113, .16);
      color: #fecaca;
    }

    .server-status.offline::before,
    .server-status.broken::before {
      background: #ef4444;
      box-shadow: 0 0 0 4px rgba(239, 68, 68, .14);
    }

    .server-status.blocked,
    .server-status.warning {
      border-color: rgba(251, 191, 36, .36);
      background: rgba(251, 191, 36, .14);
      color: #fde68a;
    }

    .server-status.blocked::before,
    .server-status.warning::before {
      background: #f59e0b;
      box-shadow: 0 0 0 4px rgba(245, 158, 11, .14);
    }

    .server-status.checking,
    .server-status.unknown {
      border-color: rgba(148, 163, 184, .32);
      background: rgba(148, 163, 184, .16);
      color: #cbd5e1;
    }

    .server-status.checking::before,
    .server-status.unknown::before {
      background: #94a3b8;
      box-shadow: 0 0 0 4px rgba(148, 163, 184, .14);
    }

    .connect-box {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 16px;
      border: 1px solid rgba(56, 189, 248, .26);
      border-radius: 12px;
      overflow: hidden;
      background:
        radial-gradient(circle at 88% 12%, rgba(34, 197, 94, .14), transparent 32%),
        linear-gradient(135deg, rgba(2, 6, 23, .94), rgba(15, 23, 42, .88));
      box-shadow: 0 16px 44px rgba(2, 6, 23, .26), inset 0 1px 0 rgba(255, 255, 255, .06);
    }

    .connect-box::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .42;
      background-image:
        linear-gradient(rgba(56, 189, 248, .14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56, 189, 248, .10) 1px, transparent 1px),
        repeating-linear-gradient(90deg, transparent 0 18px, rgba(34, 197, 94, .12) 18px 19px, transparent 19px 34px);
      background-size: 26px 26px, 26px 26px, 100% 100%;
      mask-image: linear-gradient(90deg, rgba(0,0,0,.86), rgba(0,0,0,.2));
    }

    .connect-box::after {
      content: "$";
      position: absolute;
      right: 16px;
      top: 10px;
      color: rgba(34, 197, 94, .42);
      font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
      font-size: 1.6rem;
      font-weight: 900;
      pointer-events: none;
    }

    .connect-box > * {
      position: relative;
      z-index: 1;
    }

    .connect-label {
      display: block;
      margin-bottom: 7px;
      color: rgba(186, 230, 253, .86);
      font-size: 0.78rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .connect-box code,
    .command-list code {
      font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
      color: var(--text-primary);
      background: color-mix(in srgb, var(--card-bg) 82%, transparent);
      border: 1px solid var(--card-border);
      border-radius: 8px;
    }

    .connect-box code {
      display: block;
      padding: 10px 11px;
      overflow-x: auto;
      white-space: nowrap;
      font-size: 0.88rem;
      color: #d1fae5;
      background: rgba(2, 6, 23, .72);
      border-color: rgba(56, 189, 248, .22);
      box-shadow: inset 3px 0 0 rgba(34, 197, 94, .72), 0 0 26px rgba(34, 197, 94, .08);
    }

    .connect-actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: stretch;
      justify-content: center;
      min-width: 116px;
    }

    .copy-connect-btn,
    .steam-connect-btn {
      min-height: 42px;
      padding: 0 16px;
      border: 1px solid rgba(34, 197, 94, .62);
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, rgba(34, 197, 94, .96), rgba(20, 184, 166, .9));
      color: #021312;
      font-weight: 800;
      font-size: .92rem;
      line-height: 1;
      text-decoration: none;
      box-shadow: 0 10px 28px rgba(20, 184, 166, .22);
      transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s;
    }

    .steam-connect-btn {
      border-color: rgba(59, 130, 246, .66);
      background: linear-gradient(135deg, rgba(59, 130, 246, .96), rgba(37, 99, 235, .9));
      color: #eff6ff;
      box-shadow: 0 10px 28px rgba(37, 99, 235, .22);
    }

    .copy-connect-btn:hover,
    .steam-connect-btn:hover {
      transform: translateY(-1px);
    }

    .copy-connect-btn.copied {
      opacity: 0.78;
    }

    .valheim-card {
      border-color: color-mix(in srgb, #14b8a6 34%, var(--card-border));
    }

    .valheim-title {
      margin: 0;
      font-size: clamp(1.35rem, 1.2rem + .45vw, 1.85rem);
      line-height: 1.1;
    }

    .valheim-status-group {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 8px;
    }

    .valheim-connect-box {
      grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) auto;
      border-color: rgba(20, 184, 166, .30);
      background:
        radial-gradient(circle at 88% 12%, rgba(245, 158, 11, .16), transparent 32%),
        linear-gradient(135deg, rgba(6, 78, 59, .94), rgba(15, 23, 42, .9));
    }

    .valheim-meta-grid {
      align-items: stretch;
    }

    .server-info-tile {
      display: grid;
      gap: 8px;
      min-width: 0;
      padding: 14px;
      border: 1px solid var(--card-border);
      border-radius: 10px;
      background: color-mix(in srgb, var(--card-bg) 76%, transparent);
    }

    .server-info-tile > span {
      color: var(--text-secondary);
      font-size: 0.76rem;
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .server-info-tile strong {
      color: var(--text-primary);
      font-size: 1.08rem;
      line-height: 1.15;
    }

    .server-info-tile small {
      color: var(--text-secondary);
      font-size: 0.78rem;
      line-height: 1.35;
    }

    .server-info-tile code {
      padding: 9px 10px;
      overflow-x: auto;
      border: 1px solid rgba(20, 184, 166, .26);
      border-radius: 8px;
      background: color-mix(in srgb, var(--bg) 62%, transparent);
      color: var(--text-primary);
      font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
      font-size: 0.88rem;
      white-space: nowrap;
    }

    .compact-copy {
      min-height: 36px;
      justify-self: start;
      padding-inline: 14px;
      font-size: 0.82rem;
    }

    .valheim-status-pill {
      min-width: 6.2rem;
      text-align: center;
    }

    .valheim-update-pill {
      min-width: 6.8rem;
      text-align: center;
    }

    .valheim-status-pill.offline,
    .valheim-status-pill.stale {
      border-color: rgba(248, 113, 113, .38);
      background: rgba(248, 113, 113, .16);
      color: #fecaca;
    }

    .valheim-status-pill.checking,
    .valheim-status-pill.unknown,
    .valheim-update-pill.unknown {
      border-color: rgba(148, 163, 184, .32);
      background: rgba(148, 163, 184, .16);
      color: #cbd5e1;
    }

    .valheim-status-pill.online,
    .valheim-update-pill.current,
    .valheim-status-tile.current strong {
      color: #bbf7d0;
    }

    .valheim-update-pill.current {
      border-color: rgba(34, 197, 94, .34);
      background: rgba(34, 197, 94, .14);
    }

    .valheim-update-pill.updating,
    .valheim-update-pill.outdated {
      border-color: rgba(251, 191, 36, .36);
      background: rgba(251, 191, 36, .14);
      color: #fed7aa;
    }

    .valheim-status-tile.outdated strong {
      color: #fed7aa;
    }

    .valheim-status-tile.offline strong,
    .valheim-status-tile.stale strong {
      color: #fecaca;
    }

    .valheim-mods-box {
      display: grid;
      gap: 12px;
      padding: 14px;
      border: 1px solid rgba(20, 184, 166, .24);
      border-radius: 10px;
      background: color-mix(in srgb, var(--card-bg) 80%, transparent);
    }

    .valheim-mods-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .valheim-mods-head h3 {
      margin: 0;
      color: var(--text-primary);
      font-size: 1rem;
      line-height: 1.15;
    }

    .valheim-mods-head p {
      margin: 4px 0 0;
      color: var(--text-secondary);
      font-size: 0.82rem;
    }

    .mod-manager-link {
      flex: 0 0 auto;
      padding: 8px 10px;
      border: 1px solid rgba(20, 184, 166, .36);
      border-radius: 8px;
      background: rgba(20, 184, 166, .12);
      color: var(--text-primary);
      font-size: 0.8rem;
      font-weight: 800;
      text-decoration: none;
    }

    .client-install-note {
      padding: 10px 12px;
      border: 1px solid rgba(251, 191, 36, .28);
      border-radius: 8px;
      background: rgba(251, 191, 36, .10);
      color: var(--text-secondary);
      font-size: 0.84rem;
      line-height: 1.45;
    }

    .client-install-note strong {
      color: #fde68a;
    }

    .modded-launch-img {
      display: inline-block;
      width: 96px;
      height: auto;
      margin: 0 4px;
      border-radius: 6px;
      vertical-align: middle;
    }

    .valheim-mods-warning {
      display: none;
      padding: 10px 12px;
      border: 1px solid rgba(248, 113, 113, .42);
      border-radius: 8px;
      background: rgba(127, 29, 29, .18);
      color: #fecaca;
      font-size: 0.92rem;
      font-weight: 900;
      letter-spacing: 0.04em;
      line-height: 1.35;
      text-align: center;
      text-transform: uppercase;
    }

    .valheim-mods-preview .valheim-mods-warning {
      display: block;
      animation: valheim-warning-pulse 1.8s ease-in-out infinite;
    }

    .valheim-mods-preview .valheim-mods-box.mods-complete .valheim-mods-warning {
      display: none;
    }

    @keyframes valheim-warning-pulse {
      0%, 100% {
        border-color: rgba(248, 113, 113, .38);
        box-shadow: 0 0 0 rgba(248, 113, 113, 0);
        color: #fecaca;
      }
      50% {
        border-color: rgba(248, 113, 113, .78);
        box-shadow: 0 0 18px rgba(248, 113, 113, .14);
        color: #fee2e2;
      }
    }

    .valheim-mod-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .valheim-mod-list a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
      padding: 10px 12px;
      border: 1px solid var(--card-border);
      border-radius: 8px;
      background: color-mix(in srgb, var(--bg) 52%, transparent);
      color: var(--text-primary);
      text-decoration: none;
      transition: border-color .2s, transform .2s, background .2s;
    }

    .valheim-mod-list a:hover {
      border-color: rgba(20, 184, 166, .44);
      background: rgba(20, 184, 166, .10);
      transform: translateY(-1px);
    }

    .valheim-mod-list span {
      min-width: 0;
      overflow: hidden;
      font-size: 0.88rem;
      font-weight: 800;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .valheim-mod-list em {
      flex: 0 0 auto;
      padding: 4px 7px;
      border-radius: 999px;
      background: rgba(148, 163, 184, .14);
      color: var(--text-secondary);
      font-size: 0.68rem;
      font-style: normal;
      font-weight: 800;
      text-transform: uppercase;
    }

    .valheim-mods-preview .valheim-mod-list a.mod-clicked {
      border-color: rgba(34, 197, 94, .38);
      background: rgba(34, 197, 94, .10);
    }

    .valheim-mods-preview .valheim-mod-list a.mod-clicked em {
      background: rgba(34, 197, 94, .18);
      color: #bbf7d0;
    }

    .valheim-mods-preview .valheim-mods-box.mods-complete {
      border-color: rgba(34, 197, 94, .32);
    }

    .valheim-note {
      padding: 12px 14px;
      border: 1px solid color-mix(in srgb, #f59e0b 30%, var(--card-border));
      border-radius: 10px;
      background: color-mix(in srgb, #f59e0b 10%, var(--card-bg));
      color: var(--text-secondary);
      font-size: 0.86rem;
      line-height: 1.45;
    }

    .server-meta-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .server-action-link {
      position: relative;
      display: grid;
      place-items: center;
      min-width: 0;
      min-height: 74px;
      padding: 18px;
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 14px 38px rgba(0, 0, 0, .22);
      color: var(--text-primary);
      text-decoration: none;
      transition: border-color .2s, box-shadow .2s, transform .2s;
    }

    .server-action-link::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .82;
      transition: opacity .2s, transform .2s;
    }

    .server-action-link::after {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: 9px;
      background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.2), transparent 42%);
      pointer-events: none;
    }

    .skin-action::before {
      background:
        linear-gradient(120deg, rgba(136, 71, 255, .74), rgba(235, 75, 75, .64), rgba(211, 44, 230, .58), rgba(75, 105, 255, .72)),
        repeating-linear-gradient(135deg, rgba(255,255,255,.13) 0 1px, transparent 1px 9px);
    }

    .demo-action::before {
      background:
        linear-gradient(135deg, rgba(15, 23, 42, .88), rgba(37, 99, 235, .42), rgba(20, 184, 166, .44)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 5px, transparent 5px 17px);
    }

    .server-action-link:hover {
      border-color: rgba(255, 255, 255, .34);
      box-shadow: 0 18px 48px rgba(20, 184, 166, .2);
      transform: translateY(-1px);
    }

    .server-action-link:hover::before {
      opacity: 1;
      transform: scale(1.04);
    }

    .server-action-link span {
      position: relative;
      z-index: 1;
      color: white;
      font-size: clamp(1.05rem, 2vw, 1.35rem);
      font-weight: 950;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      text-shadow: 0 2px 16px rgba(0, 0, 0, .55);
    }

    .command-panel {
      display: grid;
      gap: 10px;
    }

    .cs2-admin-health {
      display: grid;
      gap: 14px;
      margin-bottom: 28px;
      padding: 16px;
      border: 1px solid rgba(248, 113, 113, .32);
      border-radius: 16px;
      background:
        linear-gradient(135deg, rgba(127, 29, 29, .25), transparent 42%),
        radial-gradient(circle at 86% 8%, rgba(248, 113, 113, .18), transparent 34%),
        color-mix(in srgb, var(--card-bg) 90%, #111827);
      box-shadow: 0 18px 50px rgba(15, 23, 42, .16);
    }

    .cs2-admin-health-fixed {
      position: fixed;
      right: 18px;
      top: 92px;
      z-index: 20;
      width: min(420px, calc(100vw - 36px));
      max-height: calc(100vh - 132px);
      margin-bottom: 0;
      overflow: auto;
      backdrop-filter: blur(14px);
    }

    .cs2-admin-health-fixed .cs2-status-summary,
    .cs2-admin-health-fixed .cs2-live-status-list,
    .cs2-admin-health-fixed .cs2-update-list {
      grid-template-columns: 1fr;
    }

    .cs2-admin-health-fixed .cs2-status-summary {
      gap: 8px;
    }

    .cs2-admin-health-fixed .cs2-status-row,
    .cs2-admin-health-fixed .cs2-update-row {
      padding: 9px 10px;
    }

    .cs2-admin-health-fixed .cs2-status-row span {
      font-size: .74rem;
    }

    .cs2-admin-health-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .cs2-admin-kicker,
    .cs2-health-card > span,
    .cs2-admin-callout > span {
      display: block;
      color: var(--text-secondary);
      font-size: .72rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .cs2-admin-health h3 {
      margin: 4px 0 0;
      color: var(--text-primary);
      font-size: 1.05rem;
      line-height: 1.2;
    }

    .cs2-admin-state {
      flex: 0 0 auto;
      border-radius: 999px;
      padding: 7px 10px;
      border: 1px solid rgba(248, 113, 113, .34);
      font-size: .72rem;
      font-weight: 900;
      text-transform: uppercase;
    }

    .cs2-admin-state-warn {
      color: #fecaca;
      background: rgba(127, 29, 29, .55);
      box-shadow: 0 0 24px rgba(248, 113, 113, .18);
    }

    .cs2-admin-state-loading,
    .cs2-admin-state-unknown {
      color: #dbeafe;
      background: rgba(30, 64, 175, .38);
      border-color: rgba(96, 165, 250, .32);
    }

    .cs2-admin-state-ok {
      color: #bbf7d0;
      background: rgba(22, 101, 52, .42);
      border-color: rgba(34, 197, 94, .34);
    }

    .cs2-admin-state-broken {
      color: #fecaca;
      background: rgba(127, 29, 29, .58);
      border-color: rgba(248, 113, 113, .38);
    }

    .cs2-admin-state-warning {
      color: #fde68a;
      background: rgba(120, 53, 15, .48);
      border-color: rgba(251, 191, 36, .34);
    }

    .cs2-status-summary {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .cs2-status-summary > div {
      display: grid;
      gap: 6px;
      min-width: 0;
      padding: 11px 12px;
      border: 1px solid rgba(148, 163, 184, .18);
      border-radius: 12px;
      background: rgba(15, 23, 42, .28);
    }

    .cs2-status-summary span {
      color: var(--text-secondary);
      font-size: .72rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .cs2-status-summary strong,
    .cs2-status-summary code {
      min-width: 0;
      overflow: hidden;
      color: var(--text-primary);
      font-size: .86rem;
      font-weight: 900;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .cs2-status-summary small {
      color: var(--text-secondary);
      font-size: .72rem;
      font-weight: 800;
    }

    .cs2-run-check-btn {
      width: 100%;
      min-height: 36px;
      border: 1px solid rgba(168, 85, 247, .42);
      border-radius: 10px;
      color: #f5f3ff;
      background:
        linear-gradient(135deg, rgba(126, 34, 206, .86), rgba(37, 99, 235, .76));
      box-shadow: 0 10px 24px rgba(88, 28, 135, .22);
      cursor: pointer;
      font-size: .78rem;
      font-weight: 950;
      letter-spacing: .05em;
      text-transform: uppercase;
      transition: transform .16s ease, filter .16s ease, opacity .16s ease;
    }

    .cs2-run-check-btn:hover {
      filter: brightness(1.08);
      transform: translateY(-1px);
    }

    .cs2-run-check-btn:disabled {
      cursor: wait;
      opacity: .68;
      transform: none;
    }

    .cs2-live-status-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
    }

    .cs2-status-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 11px 12px;
      border: 1px solid rgba(148, 163, 184, .18);
      border-left-width: 4px;
      border-radius: 12px;
      background: rgba(15, 23, 42, .26);
    }

    .cs2-status-row strong {
      display: block;
      color: var(--text-primary);
      font-size: .9rem;
      line-height: 1.2;
    }

    .cs2-status-row span {
      display: block;
      margin-top: 3px;
      color: var(--text-secondary);
      font-size: .78rem;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .cs2-status-row em {
      justify-self: end;
      min-width: 78px;
      padding: 7px 9px;
      border-radius: 999px;
      font-size: .72rem;
      font-style: normal;
      font-weight: 950;
      text-align: center;
      text-transform: uppercase;
    }

    .cs2-status-ok {
      border-left-color: #22c55e;
    }

    .cs2-status-ok em {
      color: #bbf7d0;
      background: rgba(22, 101, 52, .40);
    }

    .cs2-status-broken,
    .cs2-status-missing {
      border-left-color: #ef4444;
    }

    .cs2-status-broken em,
    .cs2-status-missing em {
      color: #fecaca;
      background: rgba(127, 29, 29, .52);
    }

    .cs2-status-blocked,
    .cs2-status-warning {
      border-left-color: #f59e0b;
    }

    .cs2-status-blocked em,
    .cs2-status-warning em {
      color: #fde68a;
      background: rgba(120, 53, 15, .48);
    }

    .cs2-status-unknown {
      border-left-color: #60a5fa;
    }

    .cs2-status-unknown em {
      color: #dbeafe;
      background: rgba(30, 64, 175, .38);
    }

    .cs2-status-empty {
      grid-column: 1 / -1;
      padding: 13px;
      border: 1px dashed rgba(148, 163, 184, .30);
      border-radius: 12px;
      color: var(--text-secondary);
      background: rgba(15, 23, 42, .18);
      font-size: .86rem;
      font-weight: 800;
    }

    .cs2-update-tracker {
      display: grid;
      gap: 10px;
      padding: 12px;
      border: 1px solid rgba(96, 165, 250, .22);
      border-radius: 14px;
      background:
        linear-gradient(135deg, rgba(30, 64, 175, .20), transparent 56%),
        rgba(15, 23, 42, .24);
    }

    .cs2-update-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .cs2-update-head span {
      color: var(--text-primary);
      font-size: .9rem;
      font-weight: 950;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .cs2-update-head small {
      color: var(--text-secondary);
      font-size: .76rem;
      font-weight: 800;
      white-space: nowrap;
    }

    .cs2-update-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .cs2-update-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      min-width: 0;
      padding: 10px 11px;
      border: 1px solid rgba(148, 163, 184, .16);
      border-radius: 11px;
      background: rgba(2, 6, 23, .22);
    }

    .cs2-update-row strong {
      min-width: 0;
      overflow: hidden;
      color: var(--text-primary);
      font-size: .86rem;
      font-weight: 900;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .cs2-update-row em {
      padding: 6px 8px;
      border-radius: 999px;
      font-size: .68rem;
      font-style: normal;
      font-weight: 950;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .cs2-update-up_to_date em {
      color: #bbf7d0;
      background: rgba(22, 101, 52, .42);
    }

    .cs2-update-update_available em {
      color: #fde68a;
      background: rgba(120, 53, 15, .54);
    }

    .cs2-update-incompatible em {
      color: #fecaca;
      background: rgba(127, 29, 29, .58);
    }

    .cs2-update-blocked em {
      color: #fde68a;
      background: rgba(120, 53, 15, .54);
    }

    .cs2-update-check_failed em {
      color: #fecaca;
      background: rgba(127, 29, 29, .54);
    }

    .cs2-update-local_custom em,
    .cs2-update-runtime_unknown em,
    .cs2-update-unknown em {
      color: #dbeafe;
      background: rgba(30, 64, 175, .42);
    }

    @media (max-width: 700px) {
      .cs2-live-status-list,
      .cs2-update-list {
        grid-template-columns: 1fr;
      }
    }

    .cs2-admin-callout {
      display: grid;
      gap: 8px;
      padding: 12px;
      border: 1px solid rgba(168, 85, 247, .36);
      border-radius: 12px;
      background:
        repeating-linear-gradient(135deg, rgba(168, 85, 247, .12) 0 8px, transparent 8px 16px),
        rgba(15, 23, 42, .48);
    }

    .cs2-admin-callout code,
    .cs2-health-card code {
      display: block;
      width: 100%;
      overflow-x: auto;
      padding: 9px 10px;
      border: 1px solid rgba(148, 163, 184, .22);
      border-radius: 9px;
      color: #e9d5ff;
      background: rgba(15, 23, 42, .62);
      font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
      font-size: .82rem;
      white-space: nowrap;
    }

    .cs2-health-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .cs2-health-card {
      display: grid;
      gap: 9px;
      min-width: 0;
      padding: 13px;
      border: 1px solid rgba(148, 163, 184, .18);
      border-radius: 12px;
      background: rgba(15, 23, 42, .28);
    }

    .cs2-health-card-wide {
      grid-column: 1 / -1;
    }

    .cs2-health-card strong {
      color: var(--text-primary);
      font-size: .98rem;
      line-height: 1.25;
    }

    .cs2-health-card p,
    .cs2-health-card small,
    .cs2-health-card li {
      color: var(--text-secondary);
      font-size: .82rem;
      line-height: 1.45;
    }

    .cs2-health-card ul,
    .cs2-health-card ol {
      margin: 0;
      padding-left: 18px;
    }

    .cs2-check-list {
      columns: 2;
      column-gap: 22px;
    }

    .cs2-report-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .cs2-report-grid em {
      min-width: 0;
      padding: 8px 9px;
      border: 1px solid rgba(34, 197, 94, .22);
      border-radius: 999px;
      color: #bbf7d0;
      background: rgba(22, 101, 52, .20);
      font-size: .76rem;
      font-style: normal;
      font-weight: 900;
      text-align: center;
      white-space: nowrap;
    }

    .command-panel-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 12px;
    }

    .command-panel h3 {
      color: var(--text-primary);
      font-size: 1rem;
      line-height: 1.2;
    }

    .command-panel-head > span,
    .command-group-label {
      color: var(--text-secondary);
      font-size: 0.76rem;
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .command-tabs {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      padding: 7px;
      border: 1px solid rgba(59, 130, 246, .42);
      border-radius: 14px;
      background:
        linear-gradient(135deg, rgba(37, 99, 235, .18), rgba(20, 184, 166, .14)),
        color-mix(in srgb, var(--card-bg) 68%, transparent);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 24px rgba(37, 99, 235, .10);
    }

    .command-tab {
      min-height: 40px;
      border: 1px solid color-mix(in srgb, var(--card-border) 72%, transparent);
      border-radius: 10px;
      background: color-mix(in srgb, var(--btn-bg) 72%, transparent);
      color: var(--text-primary);
      font-size: 0.84rem;
      font-weight: 800;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s, border-color 0.2s, transform 0.2s;
    }

    .command-tab:hover {
      border-color: rgba(59, 130, 246, .55);
      transform: translateY(-1px);
    }

    .command-tab.active {
      border-color: rgba(94, 234, 212, .75);
      background: linear-gradient(135deg, #2563eb, #14b8a6);
      color: #ffffff;
      box-shadow: 0 8px 22px rgba(20, 184, 166, .24);
    }

    .command-tab-panel {
      display: none;
      gap: 10px;
    }

    .command-tab-panel.active {
      display: grid;
    }

    .command-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      list-style: none;
    }

    .command-list li {
      position: relative;
      display: grid;
      grid-template-columns: 88px minmax(0, 1fr);
      gap: 9px;
      align-items: center;
      min-height: 44px;
      padding: 8px;
      border: 1px solid var(--card-border);
      border-radius: 10px;
      background: color-mix(in srgb, var(--card-bg) 76%, transparent);
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    }

    .command-list li:hover {
      border-color: rgba(94, 234, 212, .62);
      box-shadow: 0 10px 28px rgba(20, 184, 166, .16);
      transform: translateY(-1px);
    }

    .command-list code {
      padding: 7px 8px;
      text-align: center;
      font-size: 0.82rem;
      font-weight: 800;
    }

    .command-list span {
      color: var(--text-secondary);
      font-size: 0.83rem;
      line-height: 1.25;
    }

    @media (max-width: 560px) {
      #services-list {
        grid-template-columns: 1fr;
      }

      #services-list > .service-card:nth-of-type(1),
      #services-list > .service-card:nth-of-type(2) {
        grid-column: 1 / -1;
      }

      .section-tab {
        flex: 1 1 150px;
        justify-content: center;
        padding-inline: 18px;
      }

      .connect-box,
      .server-meta-grid,
      .valheim-mod-list,
      .command-tabs,
      .command-list,
      .cs2-health-grid,
      .cs2-report-grid,
      .cs2-status-summary,
      .cs2-status-row {
        grid-template-columns: 1fr;
      }

      .cs2-check-list {
        columns: 1;
      }

      .cs2-admin-health-head {
        flex-direction: column;
      }

      .cs2-status-row em {
        justify-self: start;
      }

      .cs2-public-overview {
        grid-template-columns: 1fr;
      }

      .valheim-mods-head {
        align-items: flex-start;
        flex-direction: column;
      }

      .mod-manager-link {
        width: 100%;
        text-align: center;
      }

      .connect-actions {
        justify-content: stretch;
        min-width: 0;
      }

      .command-list li {
        grid-template-columns: 82px minmax(0, 1fr);
      }
    }

    /* ?????? Service card ?????? */
    .service-card {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px 20px;
      border-radius: 12px;
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      text-decoration: none;
      box-shadow: var(--card-shadow);
      transition: border-color 0.2s, box-shadow 0.2s, opacity 0.3s, transform 0.3s;
      opacity: 0;
      transform: translateY(8px);
    }
    #services-wrapper.open .service-card {
      opacity: 1;
      transform: translateY(0);
    }
    .service-card:hover {
      border-color: var(--card-border-hover);
      box-shadow: var(--card-shadow-hover);
    }

    .accent-bar {
      width: 4px;
      height: 40px;
      border-radius: 9999px;
      flex-shrink: 0;
    }

    .card-inner { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }

    .card-icon { font-size: 1.5rem; user-select: none; }

    .card-text { min-width: 0; }
    .card-name {
      font-weight: 600;
      font-size: 1rem;
      color: var(--text-primary);
      line-height: 1.25;
    }
    .card-desc {
      font-size: 0.875rem;
      color: var(--text-secondary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .card-arrow { flex-shrink: 0; width: 20px; height: 20px; color: var(--text-secondary); transition: color 0.2s; }
    .service-card:hover .card-arrow { color: var(--text-primary); }

    .admin-section {
      margin-top: 18px;
      padding-top: 14px;
      border-top: 1px solid var(--card-border);
    }

    .admin-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      min-height: 42px;
      padding: 0 12px;
      margin-bottom: 10px;
      border: 1px solid var(--card-border);
      border-radius: 999px;
      background: color-mix(in srgb, var(--card-bg) 78%, transparent);
      color: var(--text-secondary);
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }

    .admin-section-header:hover,
    .admin-section-header.open {
      background: var(--toggle-bg);
      border-color: var(--card-border-hover);
      color: var(--text-primary);
    }

    .admin-section-header::after {
      content: "private";
      margin-left: auto;
      margin-right: 10px;
      padding: 4px 8px;
      border: 1px solid var(--card-border);
      border-radius: 999px;
      color: var(--text-secondary);
      font-size: 0.68rem;
      letter-spacing: 0;
      text-transform: none;
    }

    .admin-toggle-icon {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      transition: transform 0.2s;
    }

    .admin-section-header.open .admin-toggle-icon {
      transform: rotate(180deg);
    }

    .admin-panel {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height 0.35s ease, opacity 0.25s ease;
    }

    .admin-panel.open {
      max-height: 920px;
      opacity: 1;
    }

    .admin-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      padding-top: 2px;
    }

    .admin-card {
      min-height: 82px;
      padding: 13px 16px;
    }

    .admin-card .card-name {
      font-size: 0.98rem;
    }

    .admin-card .card-desc {
      font-size: 0.82rem;
    }

    .admin-icon {
      color: #e2e8f0;
      background: linear-gradient(135deg, #334155, #0f766e);
    }

    .cloudflare-icon {
      color: #fff7ed;
      background: linear-gradient(135deg, #f97316, #facc15);
    }

    @media (max-width: 700px) {
      .admin-grid {
        grid-template-columns: 1fr;
      }
    }
.service-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 34px;
  background: color-mix(in srgb, currentColor 13%, transparent);
}
.service-icon svg {
  width: 22px;
  height: 22px;
  display: block;
  fill: currentColor;
}
.plex-icon { color: #e5a00d; }
.request-icon { color: #3b82f6; }
.radarr-icon { color: #f59e0b; }
.sonarr-icon { color: #38bdf8; }
.deluge-icon { color: #22c55e; }

/* Force visible service icons over the imported placeholder styling. */
.service-card .card-inner {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}
.service-card .service-icon {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  flex: 0 0 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  line-height: 1 !important;
}
.service-card .service-icon svg {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  display: block !important;
  fill: currentColor !important;
  stroke: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.dont-click-me {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 9999;
  min-height: 42px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(17, 24, 39, 0.86);
  color: #f9fafb;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(12px);
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.dont-click-me:hover {
  transform: translateX(-50%) translateY(-2px);
  background: rgba(249, 115, 22, 0.92);
  border-color: rgba(255, 255, 255, 0.24);
}
@media (max-width: 560px) {
  .dont-click-me {
    bottom: 14px;
    min-height: 40px;
    padding-inline: 16px;
  }
}
/* Animated game/code/car themed background. */
body {
  position: relative;
  overflow-x: hidden;
}
header,
main,
.dont-click-me {
  position: relative;
  z-index: 2;
}
.ambient-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 18%, rgba(249, 115, 22, 0.16), transparent 28%),
    radial-gradient(circle at 82% 28%, rgba(59, 130, 246, 0.14), transparent 30%),
    linear-gradient(135deg, rgba(3, 7, 18, 0.02), rgba(3, 7, 18, 0.16));
}
.ambient-grid {
  position: absolute;
  inset: -20%;
  opacity: 0.34;
  background-image:
    linear-gradient(rgba(96, 165, 250, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(249, 115, 22, 0.12) 1px, transparent 1px);
  background-size: 42px 42px;
  transform: perspective(620px) rotateX(58deg) translateY(10%);
  animation: grid-drive 16s linear infinite;
}
.ambient-road {
  position: absolute;
  left: 50%;
  bottom: -26vh;
  width: min(82vw, 900px);
  height: 58vh;
  transform: translateX(-50%) perspective(520px) rotateX(62deg);
  opacity: 0.24;
  background:
    linear-gradient(90deg, transparent 0 47%, rgba(249, 250, 251, 0.42) 47% 53%, transparent 53% 100%),
    repeating-linear-gradient(0deg, transparent 0 44px, rgba(249, 115, 22, 0.42) 44px 78px, transparent 78px 128px);
  clip-path: polygon(39% 0, 61% 0, 100% 100%, 0 100%);
  animation: road-pulse 2.8s linear infinite;
}
.ambient-stream {
  position: absolute;
  left: 0;
  width: 220vw;
  display: flex;
  gap: 5.2rem;
  color: rgba(148, 163, 184, 0.20);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: clamp(0.85rem, 2vw, 1.35rem);
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
  text-transform: uppercase;
}
.ambient-stream span {
  min-width: 72px;
  text-align: center;
  text-shadow: 0 0 20px rgba(96, 165, 250, 0.24);
}
.stream-a {
  top: 22%;
  animation: stream-left 34s linear infinite;
}
.stream-b {
  bottom: 18%;
  color: rgba(249, 115, 22, 0.18);
  animation: stream-right 42s linear infinite;
}
@keyframes grid-drive {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 168px, 168px 0; }
}
@keyframes road-pulse {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 0, 0 128px; }
}
@keyframes stream-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes stream-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-grid,
  .ambient-road,
  .ambient-stream {
    animation: none !important;
  }
}
/* Fix button after ambient layer and add denser background clutter. */
.dont-click-me,
a.dont-click-me {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 18px !important;
  transform: translateX(-50%) !important;
  z-index: 10000 !important;
}
a.dont-click-me:hover {
  transform: translateX(-50%) translateY(-2px) !important;
}
.ambient-bg::before,
.ambient-bg::after {
  content: "";
  position: absolute;
  inset: -30%;
  opacity: 0.22;
  background:
    repeating-linear-gradient(115deg, transparent 0 28px, rgba(34, 197, 94, 0.12) 28px 30px, transparent 30px 76px),
    repeating-linear-gradient(25deg, transparent 0 38px, rgba(59, 130, 246, 0.10) 38px 40px, transparent 40px 92px);
  animation: neon-sweep 28s linear infinite;
}
.ambient-bg::after {
  opacity: 0.16;
  filter: blur(1px);
  animation-duration: 41s;
  animation-direction: reverse;
}
.stream-c {
  top: 46%;
  color: rgba(34, 197, 94, 0.17);
  transform: rotate(-3deg);
  animation: stream-left 29s linear infinite;
}
.stream-d {
  top: 63%;
  color: rgba(236, 72, 153, 0.15);
  transform: rotate(2deg);
  animation: stream-right 37s linear infinite;
}
.ambient-sprites {
  position: absolute;
  inset: 0;
}
.ambient-sprites span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  min-width: 62px;
  padding: 7px 10px;
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.18);
  color: rgba(226, 232, 240, 0.18);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 0 24px rgba(59, 130, 246, 0.10);
  animation: sprite-float 7s ease-in-out infinite;
  animation-delay: var(--d);
}
@keyframes neon-sweep {
  from { transform: translate3d(-3%, -2%, 0) rotate(0deg); }
  to { transform: translate3d(3%, 2%, 0) rotate(1turn); }
}
@keyframes sprite-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); opacity: 0.42; }
  50% { transform: translate3d(12px, -18px, 0) rotate(3deg); opacity: 0.78; }
}
@media (max-width: 560px) {
  .dont-click-me,
  a.dont-click-me {
    bottom: 14px !important;
  }
  .ambient-sprites span {
    font-size: 0.68rem;
    padding: 6px 8px;
  }
}
/* Flaming warning treatment for the bottom button. */
a.dont-click-me {
  background: linear-gradient(135deg, rgba(127, 29, 29, 0.94), rgba(249, 115, 22, 0.92), rgba(251, 191, 36, 0.88)) !important;
  border-color: rgba(254, 240, 138, 0.72) !important;
  color: #fff7ed !important;
  text-shadow: 0 1px 8px rgba(127, 29, 29, 0.75) !important;
  box-shadow: 0 0 0 2px rgba(127, 29, 29, 0.38), 0 0 18px rgba(249, 115, 22, 0.80), 0 0 42px rgba(239, 68, 68, 0.48), 0 18px 46px rgba(0, 0, 0, 0.35) !important;
  animation: danger-button-pulse 1.35s ease-in-out infinite !important;
}
a.dont-click-me::before,
a.dont-click-me::after {
  content: "";
  position: absolute;
  inset: -10px -18px;
  z-index: -1;
  border-radius: 999px;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 85%, rgba(239, 68, 68, 0.92) 0 8px, transparent 9px),
    radial-gradient(circle at 32% 10%, rgba(251, 191, 36, 0.90) 0 7px, transparent 8px),
    radial-gradient(circle at 55% 95%, rgba(249, 115, 22, 0.85) 0 10px, transparent 11px),
    radial-gradient(circle at 78% 8%, rgba(239, 68, 68, 0.88) 0 8px, transparent 9px),
    radial-gradient(circle at 95% 82%, rgba(251, 146, 60, 0.80) 0 7px, transparent 8px);
  filter: blur(1px);
  animation: flame-flicker 0.74s ease-in-out infinite alternate;
}
a.dont-click-me::after {
  inset: -18px -28px;
  opacity: 0.55;
  filter: blur(9px);
  animation-duration: 1.05s;
  animation-direction: alternate-reverse;
}
a.dont-click-me:hover {
  background: linear-gradient(135deg, rgba(185, 28, 28, 0.96), rgba(249, 115, 22, 0.96), rgba(253, 224, 71, 0.94)) !important;
}
@keyframes danger-button-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(127, 29, 29, 0.38), 0 0 16px rgba(249, 115, 22, 0.72), 0 0 38px rgba(239, 68, 68, 0.44), 0 18px 46px rgba(0, 0, 0, 0.35); }
  50% { box-shadow: 0 0 0 4px rgba(254, 240, 138, 0.24), 0 0 28px rgba(249, 115, 22, 0.95), 0 0 62px rgba(239, 68, 68, 0.66), 0 18px 46px rgba(0, 0, 0, 0.35); }
}
@keyframes flame-flicker {
  from { transform: translate3d(-2px, 2px, 0) scale(0.96); opacity: 0.62; }
  to { transform: translate3d(3px, -3px, 0) scale(1.08); opacity: 0.95; }
}
/* Full flame ring around the dont click me button. */
a.dont-click-me {
  isolation: isolate !important;
}
a.dont-click-me::before {
  content: "" !important;
  position: absolute !important;
  inset: -22px -34px !important;
  z-index: -2 !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse at 8% 55%, rgba(239, 68, 68, .95) 0 7px, rgba(249, 115, 22, .70) 8px 14px, transparent 15px),
    radial-gradient(ellipse at 18% 18%, rgba(253, 224, 71, .95) 0 6px, rgba(249, 115, 22, .75) 7px 15px, transparent 16px),
    radial-gradient(ellipse at 30% 0%, rgba(239, 68, 68, .95) 0 8px, rgba(249, 115, 22, .70) 9px 18px, transparent 19px),
    radial-gradient(ellipse at 45% 10%, rgba(253, 224, 71, .92) 0 6px, rgba(239, 68, 68, .72) 7px 16px, transparent 17px),
    radial-gradient(ellipse at 60% 0%, rgba(249, 115, 22, .95) 0 8px, rgba(239, 68, 68, .72) 9px 18px, transparent 19px),
    radial-gradient(ellipse at 76% 18%, rgba(253, 224, 71, .95) 0 6px, rgba(249, 115, 22, .75) 7px 15px, transparent 16px),
    radial-gradient(ellipse at 92% 55%, rgba(239, 68, 68, .95) 0 7px, rgba(249, 115, 22, .70) 8px 14px, transparent 15px),
    radial-gradient(ellipse at 28% 102%, rgba(249, 115, 22, .78) 0 8px, transparent 18px),
    radial-gradient(ellipse at 72% 102%, rgba(239, 68, 68, .72) 0 8px, transparent 18px) !important;
  filter: blur(.4px) saturate(1.25) !important;
  opacity: .95 !important;
  animation: flame-ring-flicker .52s infinite alternate ease-in-out !important;
}
a.dont-click-me::after {
  content: "" !important;
  position: absolute !important;
  inset: -30px -48px !important;
  z-index: -3 !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(249, 115, 22, .52), transparent 62%),
    conic-gradient(from 12deg, transparent, rgba(239, 68, 68, .45), rgba(253, 224, 71, .38), transparent, rgba(249, 115, 22, .42), transparent) !important;
  filter: blur(14px) !important;
  opacity: .82 !important;
  animation: flame-aura-spin 2.8s linear infinite !important;
}
@keyframes flame-ring-flicker {
  0% { transform: translate3d(-1px, 2px, 0) scaleX(.98) scaleY(.94); opacity: .72; }
  45% { transform: translate3d(2px, -3px, 0) scaleX(1.02) scaleY(1.10); opacity: 1; }
  100% { transform: translate3d(-2px, -1px, 0) scaleX(1.03) scaleY(1.02); opacity: .88; }
}
@keyframes flame-aura-spin {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(360deg) scale(1.04); }
}
/* Floating GIF clutter in the animated background. */
.ambient-gifs {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.float-gif {
  position: absolute;
  width: clamp(86px, 12vw, 170px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
  opacity: 0.24;
  filter: saturate(1.15) contrast(1.05) drop-shadow(0 0 22px rgba(96, 165, 250, 0.18));
  mix-blend-mode: screen;
  transform-origin: center;
}
.gif-one {
  left: 7%;
  top: 28%;
  animation: gif-drift-a 18s ease-in-out infinite;
}
.gif-two {
  right: 8%;
  top: 16%;
  width: clamp(96px, 14vw, 190px);
  animation: gif-drift-b 22s ease-in-out infinite;
}
.gif-three {
  left: 18%;
  bottom: 10%;
  width: clamp(72px, 10vw, 140px);
  opacity: 0.18;
  animation: gif-drift-c 26s ease-in-out infinite;
}
.gif-four {
  right: 18%;
  bottom: 18%;
  width: clamp(78px, 11vw, 150px);
  opacity: 0.16;
  animation: gif-drift-d 31s ease-in-out infinite;
}
@keyframes gif-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-8deg) scale(.96); }
  50% { transform: translate3d(44px, -34px, 0) rotate(7deg) scale(1.06); }
}
@keyframes gif-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(8deg) scale(1); }
  50% { transform: translate3d(-52px, 38px, 0) rotate(-7deg) scale(.94); }
}
@keyframes gif-drift-c {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(4deg) scale(.92); }
  50% { transform: translate3d(36px, -52px, 0) rotate(-10deg) scale(1.04); }
}
@keyframes gif-drift-d {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-5deg) scale(.95); }
  50% { transform: translate3d(-42px, -28px, 0) rotate(11deg) scale(1.08); }
}
@media (max-width: 560px) {
  .float-gif {
    opacity: 0.16;
    width: 82px;
  }
  .gif-three,
  .gif-four {
    display: none;
  }
}
/* Replace circular flame dots with sharper flame plumes. */
a.dont-click-me::before {
  inset: -34px -44px -16px -44px !important;
  border-radius: 50% 50% 38% 38% / 64% 64% 36% 36% !important;
  background:
    conic-gradient(from 210deg at 50% 78%, transparent 0 10deg, rgba(127, 29, 29, 0.72) 16deg 24deg, rgba(249, 115, 22, 0.90) 28deg 38deg, rgba(253, 224, 71, 0.92) 43deg 49deg, rgba(249, 115, 22, 0.82) 55deg 64deg, transparent 72deg 112deg, rgba(239, 68, 68, 0.74) 122deg 132deg, rgba(251, 191, 36, 0.88) 138deg 146deg, rgba(249, 115, 22, 0.78) 152deg 164deg, transparent 174deg 360deg),
    linear-gradient(to top, rgba(249, 115, 22, 0.58), rgba(239, 68, 68, 0.30) 42%, transparent 76%) !important;
  clip-path: polygon(0 100%, 7% 72%, 15% 100%, 23% 42%, 32% 100%, 42% 24%, 50% 96%, 61% 14%, 69% 100%, 79% 36%, 87% 100%, 95% 68%, 100% 100%) !important;
  filter: blur(2px) saturate(1.35) !important;
  opacity: 0.88 !important;
  animation: flame-tongues 0.58s infinite alternate ease-in-out !important;
}
a.dont-click-me::after {
  inset: -30px -52px -20px -52px !important;
  border-radius: 999px !important;
  background:
    radial-gradient(ellipse at 50% 82%, rgba(249, 115, 22, 0.72), transparent 58%),
    linear-gradient(to top, rgba(127, 29, 29, 0.46), rgba(249, 115, 22, 0.34), transparent 72%) !important;
  filter: blur(16px) !important;
  opacity: 0.82 !important;
  animation: flame-aura-breathe 1.6s ease-in-out infinite alternate !important;
}
@keyframes flame-tongues {
  from { transform: translate3d(-2px, 3px, 0) scaleX(0.98) scaleY(0.88); }
  to { transform: translate3d(2px, -5px, 0) scaleX(1.04) scaleY(1.14); }
}
@keyframes flame-aura-breathe {
  from { transform: scaleX(0.92) scaleY(0.86); opacity: 0.58; }
  to { transform: scaleX(1.08) scaleY(1.08); opacity: 0.88; }
}
/* Keep flames outside the button instead of clipping through the pill. */
a.dont-click-me {
  overflow: visible !important;
  z-index: 10000 !important;
  box-shadow:
    0 0 0 1px rgba(254, 240, 138, 0.64),
    0 0 18px rgba(249, 115, 22, 0.72),
    0 16px 40px rgba(0, 0, 0, 0.42) !important;
}
a.dont-click-me::before {
  inset: -30px -38px !important;
  z-index: -2 !important;
  border-radius: 999px !important;
  clip-path: none !important;
  background:
    radial-gradient(ellipse 16px 30px at 12% 50%, rgba(249, 115, 22, .92) 0 45%, rgba(239, 68, 68, .72) 54%, transparent 72%),
    radial-gradient(ellipse 18px 38px at 24% 10%, rgba(253, 224, 71, .96) 0 34%, rgba(249, 115, 22, .88) 48%, rgba(239, 68, 68, .55) 62%, transparent 78%),
    radial-gradient(ellipse 20px 46px at 40% 2%, rgba(253, 224, 71, .92) 0 30%, rgba(249, 115, 22, .90) 46%, rgba(185, 28, 28, .56) 65%, transparent 82%),
    radial-gradient(ellipse 19px 44px at 58% 2%, rgba(253, 224, 71, .90) 0 30%, rgba(249, 115, 22, .90) 46%, rgba(185, 28, 28, .56) 65%, transparent 82%),
    radial-gradient(ellipse 18px 38px at 76% 10%, rgba(253, 224, 71, .96) 0 34%, rgba(249, 115, 22, .88) 48%, rgba(239, 68, 68, .55) 62%, transparent 78%),
    radial-gradient(ellipse 16px 30px at 88% 50%, rgba(249, 115, 22, .92) 0 45%, rgba(239, 68, 68, .72) 54%, transparent 72%),
    radial-gradient(ellipse 22px 24px at 25% 92%, rgba(239, 68, 68, .62) 0 38%, transparent 72%),
    radial-gradient(ellipse 22px 24px at 75% 92%, rgba(249, 115, 22, .58) 0 38%, transparent 72%) !important;
  -webkit-mask: radial-gradient(ellipse at center, transparent 0 43%, #000 45% 100%) !important;
  mask: radial-gradient(ellipse at center, transparent 0 43%, #000 45% 100%) !important;
  filter: blur(1.2px) saturate(1.4) !important;
  opacity: 0.96 !important;
  animation: outside-flames-flicker .62s ease-in-out infinite alternate !important;
}
a.dont-click-me::after {
  inset: -42px -56px !important;
  z-index: -3 !important;
  border-radius: 999px !important;
  background:
    radial-gradient(ellipse at center, transparent 0 36%, rgba(249, 115, 22, .52) 43%, rgba(239, 68, 68, .32) 58%, transparent 74%) !important;
  -webkit-mask: radial-gradient(ellipse at center, transparent 0 40%, #000 43% 100%) !important;
  mask: radial-gradient(ellipse at center, transparent 0 40%, #000 43% 100%) !important;
  filter: blur(14px) !important;
  opacity: .86 !important;
  animation: outside-flame-glow 1.4s ease-in-out infinite alternate !important;
}
@keyframes outside-flames-flicker {
  from { transform: translate3d(-1px, 2px, 0) scaleX(.98) scaleY(.94); }
  to { transform: translate3d(1px, -3px, 0) scaleX(1.03) scaleY(1.08); }
}
@keyframes outside-flame-glow {
  from { transform: scale(.96); opacity: .58; }
  to { transform: scale(1.06); opacity: .92; }
}
/* Replace generated flame effects with the uploaded flame image button. */
a.dont-click-me,
a.dont-click-me:hover {
  position: fixed !important;
  left: auto !important;
  right: max(18px, env(safe-area-inset-right)) !important;
  top: auto !important;
  bottom: 18px !important;
  transform: none !important;
  z-index: 10000 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  min-width: 148px !important;
  min-height: 54px !important;
  padding: 0 22px !important;
  border: 1px solid rgba(254, 240, 138, 0.58) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(rgba(15, 23, 42, 0.42), rgba(15, 23, 42, 0.42)),
    url('/wp-content/themes/mikael-replit-import/assets/button-flame.gif') center 58% / 118px auto no-repeat,
    linear-gradient(135deg, rgba(127, 29, 29, 0.96), rgba(249, 115, 22, 0.90)) !important;
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.92), 0 0 12px rgba(0, 0, 0, 0.72) !important;
  box-shadow: 0 0 20px rgba(249, 115, 22, 0.62), 0 16px 42px rgba(0, 0, 0, 0.42) !important;
  animation: flame-image-button 1.4s ease-in-out infinite alternate !important;
}
a.dont-click-me:hover {
  transform: translateY(-2px) !important;
}
a.dont-click-me::before,
a.dont-click-me::after {
  content: none !important;
  display: none !important;
  background: none !important;
  animation: none !important;
}
@keyframes flame-image-button {
  from { background-size: 112px auto, 112px auto, auto; box-shadow: 0 0 16px rgba(249, 115, 22, 0.52), 0 16px 42px rgba(0, 0, 0, 0.42); }
  to { background-size: 112px auto, 124px auto, auto; box-shadow: 0 0 30px rgba(249, 115, 22, 0.78), 0 16px 42px rgba(0, 0, 0, 0.42); }
}
@media (max-width: 560px) {
  a.dont-click-me,
  a.dont-click-me:hover {
    bottom: 14px !important;
    right: 14px !important;
    min-width: 142px !important;
    min-height: 50px !important;
    background-size: 108px auto, 108px auto, auto !important;
  }
}
/* Make floating GIF motion easier to see. */
.float-gif {
  opacity: 0.38 !important;
  mix-blend-mode: normal !important;
  background: rgba(15, 23, 42, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}
.gif-two,
.gif-four {
  opacity: 0.52 !important;
  filter: saturate(1.25) contrast(1.08) drop-shadow(0 0 28px rgba(249, 115, 22, 0.22)) !important;
}

/* Tune button for the animated Giphy fire sticker. */
a.dont-click-me,
a.dont-click-me:hover {
  background:
    linear-gradient(rgba(15, 23, 42, 0.46), rgba(15, 23, 42, 0.46)),
    url('/wp-content/themes/mikael-replit-import/assets/button-flame.gif') center 56% / 118px auto no-repeat,
    linear-gradient(135deg, rgba(127, 29, 29, 0.96), rgba(249, 115, 22, 0.90)) !important;
}






.temp-overview {
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--card-bg) 84%, transparent);
  box-shadow: var(--card-shadow);
}

.temp-overview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.temp-kicker {
  color: var(--text-secondary);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.temp-title {
  color: var(--text-primary);
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.2;
}

.temp-freshness {
  flex-shrink: 0;
  padding: 4px 8px;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.temp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.temp-tile {
  min-height: 70px;
  padding: 10px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 52%, transparent);
}

.temp-label {
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temp-value {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin-top: 5px;
  color: var(--text-primary);
  font-size: 1.2rem;
  font-weight: 850;
  line-height: 1;
}

.temp-unit {
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 700;
}

.temp-state {
  width: 8px;
  height: 8px;
  margin-top: 9px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
}

.temp-tile.warm .temp-state {
  background: #f59e0b;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.55);
}

.temp-tile.hot .temp-state,
.temp-tile.stale .temp-state {
  background: #ef4444;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.55);
}

.temp-empty {
  grid-column: 1 / -1;
  color: var(--text-secondary);
  font-size: 0.86rem;
  padding: 8px 2px;
}

@media (max-width: 560px) {
  .temp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


.temp-overview-fixed {
  position: fixed;
  left: 18px;
  top: 92px;
  z-index: 20;
  width: min(286px, calc(100vw - 36px));
  max-height: calc(100vh - 132px);
  overflow: auto;
  backdrop-filter: blur(14px);
}

.temp-overview-fixed .temp-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1180px) {
  body.admin-bar .temp-overview-fixed {
    top: 124px;
  }

  body.admin-bar .cs2-admin-health-fixed {
    top: 124px;
  }
}

@media (max-width: 1180px) {
  .temp-overview-fixed,
  .cs2-admin-health-fixed {
    position: static;
    width: min(672px, calc(100% - 32px));
    margin: 18px auto 0;
    max-height: none;
  }
}


.vm-overview {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--card-border);
}

.vm-overview-title {
  margin-bottom: 8px;
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vm-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vm-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 9px 10px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 52%, transparent);
}

.vm-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #ef4444;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.52);
}

.vm-row.running .vm-dot {
  background: #22c55e;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.52);
}

.vm-name {
  color: var(--text-primary);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.1;
}

.vm-meta {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 650;
}

.vm-status {
  padding: 4px 8px;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.vm-row.running .vm-status {
  color: #22c55e;
}

.vm-row.stopped .vm-status,
.vm-row.unknown .vm-status {
  color: #ef4444;
}


.disk-overview {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--card-border);
}

.disk-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.disk-row {
  padding: 10px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 52%, transparent);
}

.disk-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.disk-name {
  color: var(--text-primary);
  font-size: 0.84rem;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.disk-free {
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 750;
  white-space: nowrap;
}

.disk-bar {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card-border) 70%, transparent);
}

.disk-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #14b8a6);
  transition: width 0.4s ease;
}

.disk-row.warm .disk-fill {
  background: linear-gradient(90deg, #f59e0b, #f97316);
}

.disk-row.hot .disk-fill,
.disk-row.stale .disk-fill {
  background: linear-gradient(90deg, #ef4444, #f97316);
}

.disk-meta {
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 650;
}

.request-access-icon { color: #14b8a6; }

.plex-notification-centre {
  position: fixed;
  top: 86px;
  right: 18px;
  z-index: 30;
  width: min(360px, calc(100vw - 36px));
}

.plex-notification-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 13px 14px;
  border: 1px solid rgba(20, 184, 166, 0.36);
  border-radius: 12px;
  background: color-mix(in srgb, var(--card-bg) 88%, rgba(20, 184, 166, 0.14));
  color: var(--text-primary);
  text-decoration: none;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(14px);
}

.plex-notification-card:hover {
  border-color: rgba(20, 184, 166, 0.72);
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.22);
  transform: translateY(-1px);
}

.plex-notification-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #14b8a6;
  box-shadow: 0 0 0 6px rgba(20, 184, 166, 0.14), 0 0 18px rgba(20, 184, 166, 0.68);
  flex: 0 0 12px;
}

.plex-notification-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.plex-notification-copy strong {
  color: var(--text-primary);
  font-size: 0.94rem;
  line-height: 1.2;
}

.plex-notification-copy span {
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 700;
}

.plex-notification-arrow {
  width: 19px;
  height: 19px;
  color: var(--text-secondary);
  flex: 0 0 19px;
}

@media (max-width: 1180px) {
  .plex-notification-centre {
    position: static;
    width: min(672px, calc(100% - 32px));
    margin: 18px auto 0;
  }
}



/* Layout guard for the admin-only Plex pending notification. */
aside.plex-notification-centre {
  position: fixed !important;
  top: 86px !important;
  right: 18px !important;
  left: auto !important;
  z-index: 30 !important;
  width: min(360px, calc(100vw - 36px)) !important;
  max-width: 360px !important;
}

aside.plex-notification-centre > a.plex-notification-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 68px !important;
  padding: 13px 14px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
}

@media (max-width: 1180px) {
  aside.plex-notification-centre {
    position: static !important;
    width: min(672px, calc(100% - 32px)) !important;
    max-width: none !important;
    margin: 18px auto 0 !important;
  }
}

/* Stylish, low-cost ambient background refresh. */
:root {
  --ambient-base: #eef2f7;
  --ambient-ink: rgba(15, 23, 42, 0.08);
  --ambient-line: rgba(37, 99, 235, 0.12);
  --ambient-line-alt: rgba(20, 184, 166, 0.10);
  --ambient-warm: rgba(249, 115, 22, 0.16);
  --ambient-cool: rgba(37, 99, 235, 0.14);
  --ambient-mint: rgba(20, 184, 166, 0.13);
  --ambient-beam: rgba(37, 99, 235, 0.18);
  --ambient-beam-alt: rgba(249, 115, 22, 0.16);
}

[data-theme="dark"] {
  --ambient-base: #030712;
  --ambient-ink: rgba(226, 232, 240, 0.07);
  --ambient-line: rgba(96, 165, 250, 0.14);
  --ambient-line-alt: rgba(45, 212, 191, 0.10);
  --ambient-warm: rgba(249, 115, 22, 0.18);
  --ambient-cool: rgba(59, 130, 246, 0.20);
  --ambient-mint: rgba(20, 184, 166, 0.16);
  --ambient-beam: rgba(96, 165, 250, 0.22);
  --ambient-beam-alt: rgba(249, 115, 22, 0.18);
}

body {
  background: var(--ambient-base);
}

/* Keep the Vanta canvas behind the dashboard instead of washing over the UI. */
.ambient-vanta {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #23153c;
}
.ambient-vanta canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
header,
main,
.dont-click-me {
  position: relative;
  z-index: 2;
}

.ambient-bg {
  isolation: isolate;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ambient-base) 88%, white), var(--ambient-base) 54%, color-mix(in srgb, var(--ambient-base) 94%, black));
}

.ambient-bg::before,
.ambient-bg::after,
.ambient-road,
.ambient-stream,
.ambient-sprites,
.ambient-gifs {
  display: none !important;
}

.ambient-mesh,
.ambient-grid,
.ambient-beam,
.ambient-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ambient-mesh {
  background:
    radial-gradient(ellipse at 18% 14%, var(--ambient-warm), transparent 42%),
    radial-gradient(ellipse at 86% 20%, var(--ambient-cool), transparent 46%),
    radial-gradient(ellipse at 58% 92%, var(--ambient-mint), transparent 48%),
    linear-gradient(135deg, transparent 0 45%, var(--ambient-ink) 45% 46%, transparent 46% 100%);
}

.ambient-grid {
  inset: auto -18% -32vh -18%;
  height: 72vh;
  opacity: 0.58;
  background-image:
    linear-gradient(var(--ambient-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ambient-line-alt) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: perspective(760px) rotateX(64deg) translate3d(0, 4vh, 0);
  transform-origin: 50% 100%;
  animation: none !important;
  -webkit-mask-image: linear-gradient(to top, black, transparent 78%);
  mask-image: linear-gradient(to top, black, transparent 78%);
}

.ambient-beam {
  --beam-angle: -11deg;
  top: 8%;
  left: -26%;
  width: 152vw;
  height: 24vh;
  opacity: 0.42;
  background: linear-gradient(90deg, transparent, var(--ambient-beam), transparent);
  transform: translate3d(-8%, 0, 0) rotate(var(--beam-angle));
  will-change: transform;
  animation: ambient-beam-drift 26s ease-in-out infinite alternate;
}

.ambient-beam-b {
  --beam-angle: 13deg;
  top: 56%;
  opacity: 0.34;
  background: linear-gradient(90deg, transparent, var(--ambient-beam-alt), transparent);
  transform: translate3d(8%, 0, 0) rotate(var(--beam-angle));
  animation-duration: 34s;
  animation-direction: alternate-reverse;
}

.ambient-grain {
  opacity: 0.22;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(255, 255, 255, 0.035) 2px 3px),
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(15, 23, 42, 0.026) 3px 4px);
}

@keyframes ambient-beam-drift {
  from { transform: translate3d(-8%, -1vh, 0) rotate(var(--beam-angle)); }
  to { transform: translate3d(8%, 1vh, 0) rotate(var(--beam-angle)); }
}

@media (max-width: 700px) {
  .ambient-grid {
    height: 58vh;
    background-size: 44px 44px;
  }

  .ambient-beam {
    height: 20vh;
    opacity: 0.30;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-beam {
    animation: none !important;
  }
}

body.rcon-page {
  min-height: 100vh;
  margin: 0;
  color: #eef6ff;
  background: #050912;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

.rcon-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 18% 12%, rgba(56, 189, 248, 0.22), transparent 30%),
    radial-gradient(circle at 84% 18%, rgba(244, 63, 94, 0.20), transparent 32%),
    linear-gradient(135deg, rgba(14, 165, 233, 0.10), transparent 38%),
    #050912;
}

.rcon-background::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.36;
  background-image:
    linear-gradient(rgba(125, 211, 252, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 211, 252, 0.08) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
}

.rcon-shell {
  width: min(1720px, calc(100% - 18px));
  margin: 0 auto;
  padding: 34px 0 54px;
}

.rcon-hero,
.rcon-panel {
  border: 1px solid rgba(125, 211, 252, 0.18);
  background: rgba(10, 17, 31, 0.86);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(18px);
}

.rcon-hero {
  display: block;
  padding: 24px 30px;
  border-radius: 18px;
}

.rcon-kicker,
.rcon-panel-head span {
  color: #93c5fd;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rcon-hero h1 {
  margin: 8px 0 8px;
  font-size: clamp(2.2rem, 5vw, 4.6rem);
  line-height: 0.95;
}

.rcon-hero p {
  max-width: 680px;
  margin: 0;
  color: #b8c5d6;
  font-size: 1rem;
}

.rcon-live-cards,
.rcon-layout {
  display: grid;
  gap: 14px;
}

.rcon-dashboard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
  width: 100%;
  margin-top: 16px;
}

.rcon-dashboard > .rcon-panel {
  min-width: 0;
  height: 100%;
  margin-top: 0;
}

.rcon-dashboard > .rcon-command-deck,
.rcon-dashboard > .rcon-map-panel,
.rcon-dashboard > .rcon-dashboard-console {
  width: 100%;
}

.rcon-dashboard .rcon-map-panel,
.rcon-dashboard .rcon-dashboard-console {
  display: flex;
  flex-direction: column;
}

.rcon-dashboard .rcon-map-list {
  align-content: flex-start;
  max-height: none;
  overflow: visible;
}

.rcon-dashboard .rcon-dashboard-console pre {
  flex: 1;
  min-height: 420px;
  max-height: none;
}

.rcon-live-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rcon-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
  padding: 8px;
  border: 1px solid rgba(125, 211, 252, 0.16);
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.42);
}

.rcon-tab {
  border: 1px solid rgba(125, 211, 252, 0.18);
  border-radius: 999px;
  padding: 9px 14px;
  color: #c7d2fe;
  background: rgba(15, 23, 42, 0.82);
  font-weight: 950;
  cursor: pointer;
}

.rcon-tab:hover,
.rcon-tab.is-active {
  color: #02111f;
  border-color: rgba(34, 211, 238, 0.72);
  background: linear-gradient(135deg, #22d3ee, #60a5fa);
}

.rcon-view {
  display: none;
}

.rcon-view.is-active {
  display: block;
}

.rcon-action-status {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(125, 211, 252, 0.18);
  border-radius: 12px;
  color: #bfdbfe;
  background: rgba(15, 23, 42, 0.74);
  font-size: 0.88rem;
  font-weight: 800;
}

.rcon-action-status[data-status="running"] {
  border-color: rgba(245, 158, 11, 0.42);
  color: #fde68a;
  background: rgba(69, 26, 3, 0.28);
}

.rcon-action-status[data-status="ok"] {
  border-color: rgba(34, 197, 94, 0.42);
  color: #bbf7d0;
  background: rgba(6, 78, 59, 0.24);
}

.rcon-action-status[data-status="error"] {
  border-color: rgba(248, 113, 113, 0.54);
  color: #fecaca;
  background: rgba(127, 29, 29, 0.26);
}

.rcon-live-cards article,
.rcon-setting-tile {
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.92), rgba(8, 13, 25, 0.92));
}

.rcon-live-cards span,
.rcon-setting-tile span,
.rcon-live-cards small,
.rcon-panel-head small {
  display: block;
  color: #9ca8ba;
}

.rcon-live-cards strong,
.rcon-setting-tile strong {
  display: block;
  margin: 8px 0 4px;
  color: #f8fafc;
  font-size: 1.3rem;
}

.rcon-layout {
  grid-template-columns: minmax(188px, 210px) minmax(0, 1fr);
  margin-top: 16px;
}

.rcon-command-deck .rcon-command-section {
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.22);
}

.rcon-command-deck .rcon-command-section + .rcon-command-section {
  margin-top: 12px;
}

.rcon-layout > .rcon-panel:first-child {
  padding: 12px;
}

.rcon-panel {
  padding: 20px;
  border-radius: 16px;
  margin-top: 16px;
}

.rcon-layout .rcon-panel {
  margin-top: 0;
}

.rcon-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.rcon-control-rail {
  align-self: start;
}

.rcon-control-rail .rcon-panel-head {
  gap: 8px;
  margin-bottom: 10px;
}

.rcon-control-rail .rcon-panel-head span {
  font-size: 0.72rem;
  line-height: 1.15;
}

.rcon-mini-btn {
  padding: 7px 9px;
  border-radius: 10px;
  font-size: 0.78rem;
}

.rcon-panel-note {
  margin: -4px 0 14px;
  color: #aab8cc;
}

.rcon-soft-btn,
.rcon-primary-btn,
.rcon-command-btn,
.rcon-map-btn {
  border: 1px solid rgba(125, 211, 252, 0.26);
  border-radius: 12px;
  color: #e5f2ff;
  background: rgba(15, 23, 42, 0.92);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.rcon-soft-btn,
.rcon-primary-btn {
  padding: 10px 14px;
  font-weight: 900;
}

.rcon-primary-btn {
  color: #02111f;
  border-color: rgba(34, 211, 238, 0.7);
  background: linear-gradient(135deg, #22d3ee, #38bdf8);
}

.rcon-command-btn,
.rcon-map-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-height: 54px;
  padding: 9px 11px;
  text-align: left;
}

.rcon-command-btn strong {
  font-size: 0.88rem;
  line-height: 1.12;
}

.rcon-command-on {
  border-color: rgba(34, 197, 94, 0.72) !important;
  background: linear-gradient(145deg, rgba(5, 90, 55, 0.94), rgba(8, 47, 73, 0.94)) !important;
}

.rcon-command-off {
  border-color: rgba(248, 113, 113, 0.76) !important;
  background: linear-gradient(145deg, rgba(127, 29, 29, 0.94), rgba(55, 18, 35, 0.94)) !important;
}

.rcon-command-btn.is-current,
.rcon-rail-btn.is-current {
  position: relative;
  z-index: 1;
  outline: 3px solid rgba(248, 250, 252, 0.96);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(56, 189, 248, 0.2), 0 0 22px rgba(125, 211, 252, 0.5);
}

.rcon-command-btn.is-current::after,
.rcon-rail-btn.is-current::after {
  content: "ACTIVE";
  position: absolute;
  top: 5px;
  right: 6px;
  padding: 2px 5px;
  border-radius: 999px;
  color: #07111f;
  background: #f8fafc;
  font-size: 0.55rem;
  font-weight: 950;
  letter-spacing: 0.06em;
}

.rcon-command-primary {
  border-color: rgba(56, 189, 248, 0.82) !important;
  background: linear-gradient(145deg, rgba(3, 105, 161, 0.96), rgba(30, 64, 175, 0.94)) !important;
}

.rcon-command-pause {
  border-color: rgba(251, 191, 36, 0.8) !important;
  background: linear-gradient(145deg, rgba(146, 64, 14, 0.94), rgba(69, 26, 3, 0.94)) !important;
}

.rcon-command-btn small {
  font-size: 0.68rem;
}

.rcon-map-btn {
  min-height: 0;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding: 5px 9px;
  border-color: rgba(34, 197, 94, 0.38);
  border-radius: 999px;
  background:
    linear-gradient(145deg, rgba(6, 78, 59, 0.82), rgba(12, 35, 55, 0.92)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 12px);
  text-align: center;
}

.rcon-map-btn strong {
  font-size: 0.78rem;
  line-height: 1.1;
}

.rcon-map-btn small {
  color: #bbf7d0;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rcon-map-btn:hover {
  border-color: rgba(74, 222, 128, 0.82);
  background:
    linear-gradient(145deg, rgba(6, 95, 70, 0.95), rgba(8, 47, 73, 0.96)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 12px);
}

.rcon-command-btn:hover,
.rcon-map-btn:hover,
.rcon-soft-btn:hover,
.rcon-primary-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(56, 189, 248, 0.74);
  background: rgba(12, 35, 55, 0.96);
}

.rcon-command-btn:disabled,
.rcon-map-btn:disabled,
.rcon-soft-btn:disabled,
.rcon-primary-btn:disabled {
  cursor: wait;
  opacity: 0.58;
}

.rcon-command-btn small,
.rcon-map-btn small {
  color: #9fb0c4;
  line-height: 1.35;
  word-break: break-word;
}

.rcon-command-section {
  margin-top: 18px;
}

.rcon-command-section:first-child,
.rcon-console-section:first-child {
  margin-top: 0;
}

.rcon-command-section h2,
.rcon-console-section h2 {
  margin: 0 0 10px;
  color: #f8fafc;
  font-size: 1rem;
}

.rcon-command-grid,
.rcon-console-grid,
.rcon-settings-grid,
.rcon-presets,
.rcon-map-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.rcon-command-grid {
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 5px;
}

.rcon-command-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rcon-command-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rcon-chat-send {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 8px;
}

.rcon-team-name-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.rcon-team-name {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.5);
}

.rcon-team-name > span {
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rcon-team-name > div {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto;
  gap: 7px;
}

.rcon-team-name input {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 9px;
  padding: 9px 10px;
  color: #f8fafc;
  background: rgba(5, 10, 20, 0.86);
  font: inherit;
}

.rcon-team-name button {
  border: 1px solid currentColor;
  border-radius: 9px;
  padding: 8px 12px;
  color: #f8fafc;
  font-weight: 900;
  cursor: pointer;
}

.rcon-team-ct {
  border-color: rgba(96, 165, 250, 0.46);
}

.rcon-team-ct > span {
  color: #93c5fd;
}

.rcon-team-ct button {
  background: rgba(30, 64, 175, 0.88);
}

.rcon-team-t {
  border-color: rgba(251, 191, 36, 0.46);
}

.rcon-team-t > span {
  color: #facc15;
}

.rcon-team-t button {
  background: rgba(146, 64, 14, 0.9);
}

.rcon-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rcon-audit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.rcon-chat-head small {
  color: #4ade80;
  font-weight: 900;
}

.rcon-chat-feed,
.rcon-history-feed {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.72);
}

.rcon-history-feed {
  height: clamp(500px, 58vh, 540px);
  min-height: 500px;
  max-height: 540px;
}

.rcon-chat-feed {
  min-height: 320px;
  max-height: 560px;
}

.rcon-history-line {
  display: grid;
  grid-template-columns: 122px 96px minmax(0, 1fr);
  gap: 6px 8px;
  align-items: center;
  min-height: 24px;
  padding: 3px 6px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.rcon-history-line time,
.rcon-history-line span,
.rcon-history-line code,
.rcon-history-line small {
  color: #7890aa;
  font-size: 0.68rem;
  white-space: nowrap;
}

.rcon-history-line span {
  font-weight: 900;
  font-size: 0.68rem;
}

.rcon-history-line strong {
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  color: #e5eefb;
  font-size: 0.76rem;
  white-space: nowrap;
}

.rcon-history-line code,
.rcon-history-line small {
  display: none;
}

.rcon-history-line.is-connected span {
  color: #4ade80;
}

.rcon-history-line.is-disconnected span {
  color: #f87171;
}

.rcon-chat-line {
  display: grid;
  grid-template-columns: minmax(130px, auto) minmax(54px, auto) minmax(0, 1fr);
  gap: 6px 12px;
  align-items: baseline;
  padding: 11px 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.rcon-chat-command {
  background: rgba(168, 85, 247, 0.08);
}

.rcon-chat-command p {
  color: #d8b4fe;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.rcon-chat-line time,
.rcon-chat-line span {
  color: #7890aa;
  font-size: 0.8rem;
  font-weight: 900;
}

.rcon-chat-line strong {
  color: #93c5fd;
  font-size: 0.94rem;
}

.rcon-chat-line p {
  grid-column: 1 / -1;
  margin: 0;
  padding: 2px 0 3px;
  color: #e5eefb;
  font-size: 0.95rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: normal;
  min-width: 0;
}

.rcon-chat-admin strong,
.rcon-chat-admin span {
  color: #f87171;
}

.rcon-chat-team span {
  color: #facc15;
}

.rcon-chat-empty {
  padding: 18px;
  color: #7890aa;
  text-align: center;
}

.rcon-chat-send input {
  width: 100%;
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 10px;
  padding: 10px 12px;
  color: #f8fafc;
  background: rgba(5, 10, 20, 0.82);
  font: inherit;
}

.rcon-settings-grid {
  display: block;
}

.rcon-mode-stack {
  display: grid;
  gap: 7px;
  margin-bottom: 10px;
}

.rcon-control-rail .rcon-setting-tile {
  padding: 9px 10px;
  border-radius: 10px;
}

.rcon-control-rail .rcon-setting-tile span {
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rcon-control-rail .rcon-setting-tile strong {
  margin: 4px 0 0;
  font-size: 0.92rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.rcon-setting-primary {
  border-color: rgba(34, 211, 238, 0.34);
  background: linear-gradient(145deg, rgba(14, 116, 144, 0.32), rgba(15, 23, 42, 0.92));
}

.rcon-rail-group {
  margin-top: 10px;
}

.rcon-rail-group h3 {
  margin: 0 0 6px;
  color: #bfdbfe;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rcon-rail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rcon-rail-btn {
  min-height: 0;
  border: 1px solid rgba(125, 211, 252, 0.22);
  border-radius: 999px;
  padding: 6px 8px;
  color: #e5f2ff;
  background: rgba(15, 23, 42, 0.88);
  font-size: 0.72rem;
  font-weight: 900;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.rcon-rail-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(34, 211, 238, 0.72);
  background: rgba(12, 35, 55, 0.96);
}

.rcon-rail-btn:disabled {
  cursor: wait;
  opacity: 0.58;
}

.rcon-read-values {
  width: 100%;
  margin-bottom: 7px;
  border-color: rgba(168, 85, 247, 0.38);
  background: linear-gradient(145deg, rgba(49, 46, 129, 0.58), rgba(15, 23, 42, 0.88));
}

.rcon-rail-values {
  display: grid;
  gap: 6px;
}

.rcon-rail-hint {
  padding: 8px;
  border: 1px dashed rgba(148, 163, 184, 0.24);
  border-radius: 10px;
  color: #9fb0c4;
  font-size: 0.74rem;
  line-height: 1.35;
}

.rcon-console-actions {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}

.rcon-console-section {
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.34);
}

.rcon-console-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.rcon-compact-btn {
  min-height: 62px;
  padding: 11px;
}

.rcon-compact-btn small {
  display: none;
}

.rcon-manual-run {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 10px;
  margin: 12px 0 16px;
  padding: 12px;
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 14px;
  background: rgba(69, 26, 3, 0.18);
}

.rcon-console-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 0 0 10px;
}

.rcon-console-quick-actions button {
  min-width: 0;
  padding: 8px 6px;
  border: 1px solid rgba(125, 211, 252, 0.24);
  border-radius: 8px;
  color: #e5eefb;
  background: rgba(15, 23, 42, 0.9);
  font-size: 0.7rem;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.rcon-console-quick-actions button:hover {
  filter: brightness(1.14);
}

@media (max-width: 520px) {
  .rcon-console-quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rcon-manual-run input {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 12px;
  color: #e5eefb;
  background: rgba(5, 10, 20, 0.78);
  padding: 12px 14px;
  font: inherit;
}

.rcon-command-composer {
  position: relative;
  min-width: 0;
}

.rcon-command-suggestions {
  position: absolute;
  z-index: 40;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  max-height: 340px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 12px;
  background: rgba(5, 10, 20, 0.98);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.5);
}

.rcon-command-suggestions[hidden] {
  display: none;
}

.rcon-command-suggestions button {
  display: grid;
  width: 100%;
  gap: 3px;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  color: #dbeafe;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.rcon-command-suggestions button:hover,
.rcon-command-suggestions button.is-active {
  background: rgba(14, 165, 233, 0.18);
}

.rcon-command-suggestions strong {
  color: #7dd3fc;
}

.rcon-command-suggestions code {
  color: #fbbf24;
  font-size: 0.82em;
}

.rcon-command-suggestions small {
  color: #94a3b8;
  line-height: 1.3;
}

.rcon-player-panel {
  margin-top: 12px;
}

.rcon-player-head,
.rcon-player-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rcon-player-head {
  justify-content: space-between;
  margin-bottom: 9px;
}

.rcon-player-head h2 {
  margin: 0;
}

.rcon-player-head small {
  color: #94a3b8;
}

.rcon-player-list {
  min-width: 0;
}

.rcon-team-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.rcon-team-column {
  min-width: 0;
  min-height: 190px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  background: rgba(8, 15, 29, 0.62);
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.rcon-team-column > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
  padding: 2px 3px 9px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.rcon-team-column > header strong {
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.rcon-team-column > header span {
  min-width: 24px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.13);
  font-size: 0.7rem;
  font-weight: 900;
  text-align: center;
}

.rcon-team-column-ct {
  border-color: rgba(59, 130, 246, 0.3);
  background: linear-gradient(180deg, rgba(30, 64, 175, 0.13), rgba(8, 15, 29, 0.7));
}

.rcon-team-column-ct > header strong { color: #93c5fd; }

.rcon-team-column-spec {
  border-color: rgba(148, 163, 184, 0.24);
  background: linear-gradient(180deg, rgba(71, 85, 105, 0.13), rgba(8, 15, 29, 0.7));
}

.rcon-team-column-spec > header strong { color: #cbd5e1; }

.rcon-team-column-t {
  border-color: rgba(239, 68, 68, 0.28);
  background: linear-gradient(180deg, rgba(153, 27, 27, 0.13), rgba(8, 15, 29, 0.7));
}

.rcon-team-column-t > header strong { color: #fca5a5; }

.rcon-team-column.is-drag-over {
  border-color: #22d3ee;
  background: rgba(8, 145, 178, 0.18);
  transform: translateY(-2px);
}

.rcon-team-column.is-moving {
  cursor: wait;
  opacity: 0.72;
}

.rcon-team-roster {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 125px;
}

.rcon-team-empty {
  display: grid;
  min-height: 116px;
  place-items: center;
  border: 1px dashed rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 700;
}

.rcon-player-row {
  position: relative;
  min-width: 0;
  padding: 8px 8px 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 9px;
  background: rgba(8, 15, 29, 0.66);
}

.rcon-player-card {
  cursor: grab;
  user-select: none;
}

.rcon-player-card:active {
  cursor: grabbing;
}

.rcon-player-card.is-dragging {
  opacity: 0.38;
}

.rcon-player-identity {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  margin-right: auto;
}

.rcon-player-identity strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #e5eefb;
  font-size: 0.86rem;
}

.rcon-player-team,
.rcon-player-voice {
  padding: 4px 7px;
  border-radius: 999px;
  color: #bae6fd;
  background: rgba(14, 165, 233, 0.14);
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}

.rcon-team-t { color: #fca5a5; background: rgba(239, 68, 68, 0.15); }
.rcon-team-ct { color: #93c5fd; background: rgba(59, 130, 246, 0.16); }
.rcon-team-spec { color: #cbd5e1; background: rgba(100, 116, 139, 0.18); }
.rcon-player-voice.is-muted { color: #fca5a5; background: rgba(239, 68, 68, 0.14); }

.rcon-player-menu {
  position: relative;
}

.rcon-player-menu summary {
  display: grid;
  width: 32px;
  height: 30px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(125, 211, 252, 0.28);
  border-radius: 8px;
  color: #dbeafe;
  cursor: pointer;
  list-style: none;
}

.rcon-player-menu summary::-webkit-details-marker { display: none; }

.rcon-menu-icon {
  display: grid;
  width: 14px;
  gap: 3px;
}

.rcon-menu-icon i {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.rcon-player-menu > div {
  position: absolute;
  z-index: 50;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  width: 190px;
  gap: 5px;
  padding: 8px;
  border: 1px solid rgba(125, 211, 252, 0.28);
  border-radius: 10px;
  background: #080f1d;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.48);
}

.rcon-player-menu-id {
  overflow: hidden;
  padding: 0 5px 4px;
  color: #64748b;
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rcon-player-menu > div > strong {
  padding: 5px 5px 2px;
  color: #64748b;
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rcon-player-menu button {
  padding: 7px 8px;
  border: 1px solid rgba(125, 211, 252, 0.18);
  border-radius: 7px;
  color: #dbeafe;
  background: rgba(30, 41, 59, 0.8);
  text-align: left;
  cursor: pointer;
}

.rcon-player-menu button:hover { background: rgba(14, 165, 233, 0.2); }
.rcon-player-menu button.is-danger { color: #fecaca; border-color: rgba(239, 68, 68, 0.25); }
.rcon-player-menu button.is-danger:hover { background: rgba(127, 29, 29, 0.45); }

@media (max-width: 980px) {
  .rcon-team-board {
    grid-template-columns: 1fr;
  }

  .rcon-team-column {
    min-height: 130px;
  }

  .rcon-team-roster {
    min-height: 70px;
  }

  .rcon-team-empty {
    min-height: 62px;
  }
}

.rcon-preset-btn {
  border-color: rgba(168, 85, 247, 0.42);
  background: linear-gradient(145deg, rgba(44, 24, 75, 0.92), rgba(15, 23, 42, 0.92));
}

.rcon-exec-builder {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(260px, 1fr);
  gap: 12px;
  align-items: stretch;
  margin-bottom: 14px;
}

.rcon-exec-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.rcon-exec-field > span {
  color: #a9b8cc;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rcon-exec-builder input,
.rcon-exec-builder textarea,
.rcon-panel-head input {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 12px;
  color: #e5eefb;
  background: rgba(5, 10, 20, 0.78);
  padding: 12px 14px;
  font: inherit;
}

.rcon-exec-builder textarea {
  resize: vertical;
}

.rcon-save-exec-btn {
  grid-column: 1 / -1;
  min-height: 48px;
  color: #fff;
  border-color: rgba(168, 85, 247, 0.72);
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  box-shadow: 0 10px 28px rgba(124, 58, 237, 0.22);
}

.rcon-save-exec-btn:hover {
  border-color: rgba(196, 181, 253, 0.95);
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
}

.rcon-map-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-height: 190px;
  overflow: auto;
  padding-right: 4px;
}

.rcon-console-panel pre {
  min-height: 280px;
  max-height: 520px;
  overflow: auto;
  margin: 0;
  padding: 16px;
  border: 1px solid rgba(34, 211, 238, 0.18);
  border-radius: 14px;
  color: #d9f99d;
  background:
    linear-gradient(rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.92)),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(34, 211, 238, 0.08) 23px 24px);
  white-space: pre-wrap;
}

.rcon-empty {
  grid-column: 1 / -1;
  padding: 14px;
  border: 1px dashed rgba(148, 163, 184, 0.26);
  border-radius: 12px;
  color: #9fb0c4;
}

@media (max-width: 1280px) {
  .rcon-dashboard {
    grid-template-columns: 1fr;
  }

  .rcon-dashboard .rcon-dashboard-console pre {
    min-height: 280px;
  }
}

@media (max-width: 980px) {
  .rcon-hero,
  .rcon-layout,
  .rcon-exec-builder,
  .rcon-manual-run {
    grid-template-columns: 1fr;
  }

  .rcon-live-cards,
  .rcon-command-grid,
  .rcon-console-grid,
  .rcon-settings-grid,
  .rcon-presets {
    grid-template-columns: 1fr;
  }

  .rcon-chat-line {
    grid-template-columns: 42px 48px 1fr;
  }

  .rcon-chat-line p {
    grid-column: 1 / -1;
    padding-left: 4px;
  }

  .rcon-chat-send {
    grid-template-columns: 1fr;
  }

  .rcon-team-name-grid,
  .rcon-team-name > div {
    grid-template-columns: 1fr;
  }
}
/* Admin media activity */
.media-admin-stats-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 12px;
  margin: 2px 0 12px;
}

.plex-dashboard,
.deluge-mini-widget {
  min-width: 0;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}

.plex-dashboard {
  display: grid;
  gap: 12px;
  padding: 14px;
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(20, 184, 166, 0.08)),
    var(--card-bg);
}

.plex-dashboard-head,
.plex-dashboard-foot,
.plex-session-row,
.deluge-mini-head,
.deluge-mini-controls,
.deluge-mini-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.plex-dashboard-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--text-secondary);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.plex-dashboard h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1rem;
}

.plex-dashboard-count {
  min-width: 92px;
  padding: 9px 11px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  text-align: right;
  background: color-mix(in srgb, var(--card-bg) 82%, transparent);
}

.plex-dashboard-count strong {
  display: block;
  color: #f59e0b;
  font-size: 1.45rem;
  line-height: 1;
}

.plex-dashboard-count span,
.plex-dashboard-foot,
.plex-session-meta span,
.plex-session-meta small,
.plex-session-subtitle {
  color: var(--text-secondary);
  font-size: 0.76rem;
  font-weight: 700;
}

.plex-dashboard-list {
  display: grid;
  gap: 8px;
}

.plex-dashboard-empty {
  padding: 13px;
  border: 1px dashed var(--card-border);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 0.84rem;
  font-weight: 700;
  text-align: center;
}

.plex-session-row {
  align-items: stretch;
  padding: 11px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--card-bg) 88%, transparent);
}

.plex-session-main,
.plex-session-meta {
  display: grid;
  gap: 5px;
}

.plex-session-main {
  min-width: 0;
  flex: 1;
}

.plex-session-title {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 0.92rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plex-session-meta {
  min-width: 98px;
  justify-items: end;
  text-align: right;
}

.plex-session-progress {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.2);
}

.plex-session-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f59e0b, #14b8a6);
}

.plex-dashboard-foot a,
.deluge-mini-title {
  color: #14b8a6;
  font-weight: 900;
  text-decoration: none;
}

.deluge-mini-widget {
  align-self: start;
  position: relative;
  overflow: visible;
  z-index: 8;
}

.deluge-mini-main {
  display: grid;
  gap: 9px;
  padding: 13px;
}

.deluge-mini-title {
  color: var(--text-primary);
  font-size: 0.92rem;
}

.deluge-calendar-toggle,
.deluge-calendar-head button {
  border: 1px solid var(--card-border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--card-bg) 86%, transparent);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  cursor: pointer;
}

.deluge-calendar-toggle {
  padding: 5px 8px;
}

.deluge-calendar-toggle[aria-expanded="true"] {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.45);
}

.deluge-mini-stat {
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 800;
}

.deluge-mini-stat strong {
  color: var(--text-primary);
  font-size: 0.9rem;
}

.deluge-mini-up strong {
  color: #22c55e;
}

.deluge-mini-down strong {
  color: #3b82f6;
}

.deluge-calendar-panel {
  position: fixed;
  top: 72px;
  left: 18px;
  right: auto;
  bottom: auto;
  z-index: 10000;
  width: min(720px, calc(100vw - 36px));
  max-height: calc(100vh - 96px);
  overflow: auto;
  transform: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
  gap: 9px;
  padding: 13px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.08), rgba(15, 23, 42, 0.12)),
    var(--card-bg);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
}

.deluge-calendar-panel[hidden] {
  display: none;
}

.deluge-calendar-head {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px 28px;
  align-items: center;
  gap: 7px;
}

.deluge-calendar-head strong {
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 900;
  text-align: center;
}

.deluge-calendar-head button {
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 1rem;
}

.deluge-calendar-grid {
  grid-column: 1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.deluge-calendar-weekday {
  color: var(--text-secondary);
  font-size: 0.62rem;
  font-weight: 900;
  text-align: center;
}

.deluge-calendar-day {
  position: relative;
  min-width: 0;
  min-height: 48px;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr 1fr;
  padding: 0;
  border: 1px solid var(--card-border);
  border-radius: 7px;
  background: var(--card-bg);
  color: var(--text-primary);
  cursor: pointer;
}

.deluge-calendar-day.is-empty {
  visibility: hidden;
}

.deluge-calendar-day.no-data {
  opacity: 0.48;
}

.deluge-calendar-day[aria-pressed="true"] {
  outline: 2px solid rgba(20, 184, 166, 0.72);
  outline-offset: 1px;
}

.deluge-day-number {
  position: absolute;
  top: 3px;
  left: 5px;
  z-index: 1;
  color: var(--text-primary);
  font-size: 0.58rem;
  font-weight: 950;
  line-height: 1;
  opacity: 0.92;
}

.deluge-calendar-week-total {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid rgba(52, 211, 153, 0.18);
  border-radius: 7px;
  background:
    linear-gradient(90deg, rgba(16, 185, 129, 0.13), rgba(14, 165, 233, 0.08)),
    rgba(148, 163, 184, 0.05);
  color: var(--text-secondary);
  font-size: 0.66rem;
  font-weight: 800;
}

.deluge-calendar-week-total strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deluge-calendar-week-total span {
  white-space: nowrap;
}

.deluge-day-half {
  min-width: 0;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: 3px 3px 2px 12px;
  color: var(--text-primary);
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.deluge-day-half span {
  max-width: 100%;
  color: var(--text-primary);
  line-height: 1;
}

.deluge-day-half strong {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.58rem;
  font-weight: 950;
}

.deluge-day-half em {
  display: inline;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 950;
  line-height: 0;
  opacity: 0.95;
}

.deluge-day-up.upload-soft {
  background: rgba(34, 197, 94, 0.16);
}

.deluge-day-up.upload-good {
  background: rgba(34, 197, 94, 0.46);
}

.deluge-day-up.upload-great {
  background:
    radial-gradient(circle at 82% 36%, rgba(110, 231, 183, 0.62), transparent 34%),
    linear-gradient(135deg, rgba(16, 185, 129, 0.78), rgba(52, 211, 153, 0.62));
  box-shadow: inset 0 0 16px rgba(110, 231, 183, 0.28);
}

.deluge-day-down.download-cool {
  background: rgba(14, 165, 233, 0.18);
}

.deluge-day-down.download-warn {
  background: rgba(245, 158, 11, 0.42);
}

.deluge-day-down.download-high {
  background:
    radial-gradient(circle at 78% 42%, rgba(248, 113, 113, 0.44), transparent 34%),
    linear-gradient(135deg, rgba(220, 38, 38, 0.74), rgba(153, 27, 27, 0.7));
  box-shadow: inset 0 0 14px rgba(248, 113, 113, 0.22);
}

.deluge-calendar-detail {
  grid-column: 2;
  align-self: start;
  display: grid;
  gap: 7px;
  max-height: calc(100vh - 150px);
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.18);
}

@media (max-height: 760px) {
  .deluge-calendar-panel {
    max-height: calc(100vh - 36px);
  }
}

@media (max-width: 760px) {
  .deluge-calendar-panel {
    grid-template-columns: 1fr;
  }

  .deluge-calendar-grid,
  .deluge-calendar-detail {
    grid-column: 1;
  }

  .deluge-calendar-detail {
    max-height: 220px;
  }
}

.deluge-calendar-summary,
.deluge-week-detail,
.deluge-torrent-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  align-items: start;
}

.deluge-calendar-summary,
.deluge-week-detail {
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 800;
}

.deluge-calendar-summary strong,
.deluge-week-detail strong {
  color: var(--text-primary);
  font-size: 0.78rem;
  font-weight: 900;
}

.deluge-calendar-summary span,
.deluge-week-detail span {
  grid-column: auto;
  text-align: left;
}

.deluge-week-detail {
  padding: 6px 0;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.deluge-torrent-list {
  display: grid;
  gap: 5px;
}

.deluge-torrent-row {
  padding-top: 5px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  color: var(--text-secondary);
  font-size: 0.68rem;
  font-weight: 800;
}

.deluge-torrent-name {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deluge-torrent-amount {
  text-align: right;
  white-space: nowrap;
}

.deluge-torrent-up {
  color: #34d399;
}

.deluge-torrent-down {
  color: #38bdf8;
}

.deluge-calendar-empty {
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 800;
}

.deluge-mini-updated {
  display: block;
  padding: 7px 13px;
  border-top: 1px solid var(--card-border);
  color: var(--text-secondary);
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(148, 163, 184, 0.08);
}

@media (max-width: 700px) {
  .rcon-audit-grid {
    grid-template-columns: 1fr;
  }

  .rcon-history-line,
  .rcon-chat-line {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .rcon-history-line code,
  .rcon-history-line small {
    grid-column: 1;
  }

  .media-admin-stats-row {
    grid-template-columns: 1fr;
  }

  .plex-dashboard-head,
  .plex-dashboard-foot,
  .plex-session-row {
    align-items: stretch;
    flex-direction: column;
  }

  .plex-dashboard-count,
  .plex-session-meta {
    width: 100%;
    justify-items: start;
    text-align: left;
  }
}