:root {
    /* ── Main App CSS Variables (ported from web/src/) ── */
    /* Ink palette (dark greys) */
    --color-ink-900: 10 10 10;
    --color-ink-800: 30 30 30;      /* main card bg */
    --color-ink-700: 50 50 50;      /* nested card bg */
    --color-ink-600: 80 80 80;
    --color-ink-500: 110 110 110;
    --color-ink-400: 140 140 140;
    --color-ink-300: 180 180 180;
    --color-ink-200: 210 210 210;
    --color-ink-100: 240 240 240;

    /* Brand palette (orange default) */
    --color-brand-50: 255 224 191;
    --color-brand-100: 255 194 128;
    --color-brand-400: 224 147 64;
    --color-brand-500: 160 80 0;
    --color-brand-600: 128 64 0;
    --color-brand-700: 96 48 0;

    /* Accent, button, border */
    --color-accent: #16b364;
    --color-button-bg: 80 80 80;
    --color-secondary: 80 80 80;
    --color-button-danger: #dc2626;
    --color-button-success: #059669;
    --color-button-warning: #d97706;
    --color-button-neutral: #4b5563;

    /* Card & border opacity */
    --card-opacity: 1;
    --border-opacity: 0.4;
    --nested-card-bg: var(--color-ink-700);
    --main-card-bg: var(--color-ink-800);

    /* Border color */
    --theme-border-color: 100 100 100;

    /* Walkthrough background */
    --walkthrough-bg: none;

    /* ── Legacy aliases (map old names to new variables) ── */
    --brand: rgb(var(--color-brand-500));
    --brand-dim: rgba(160,80,0,0.5);
    --accent: var(--color-accent);
    --accent-dim: rgba(22,179,100,0.5);
    --app-border: color-mix(in srgb, var(--theme-border-color) calc(var(--border-opacity) * 100%), transparent);
    --card-bg: rgb(var(--color-ink-800) / var(--card-opacity, 1));
    --button-bg: rgb(var(--color-button-bg));
    --button-danger: var(--color-button-danger);
    --button-success: var(--color-button-success);
    --button-warning: var(--color-button-warning);
    --button-neutral: var(--color-button-neutral);
  }
  body {
    overflow-x: hidden;
    padding-top: 62px;
  }

  /* App-style shadows */
  .wt-card-shell, .wt-step-card, .wt-game-card, .nav-cta, .nav-discord {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  }
  .nav-cta, .nav-discord, .wt-btn {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  }
  .nav-cta:hover, .nav-discord:hover, .wt-btn:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  }
  h1, h2, h3, .wt-step-title, .wt-game-name, .nav-logo span, .nav-cta {
    font-weight: 700;
  }

  /* Global shadows for all buttons, cards, and text in simulator & dashboard */
  .wt-btn, .wt-app-sidebar-btn, .wt-app-sysdash-btn, .wt-app-sidebar-footer-btn,
  .wt-dash-tab, .wt-dash-ctrl-btn, .wt-dash-cmd-send,
  .wt-props-save-btn, .wt-props-restart-btn, .wt-props-toggle,
  .wt-players-save-btn, .wt-players-add-btn, .wt-players-trash,
  .wt-bak-create-btn, .wt-bak-restore-btn, .wt-bak-delete-btn, .wt-bak-file-input,
  .wt-files-subtab, .wt-files-action-btn, .wt-files-refresh-btn, .wt-files-more-btn,
  .wt-set-cpu-core, .wt-launch-btn, .wt-field-btn,
  .wt-dash-addr-btn, .wt-dash-status-pill,
  .wt-app-server-item, .wt-sys-badge, .wt-sys-ip-badge,
  .wt-props-motd-input, .wt-props-input, .wt-props-select,
  .wt-players-add-input, .wt-bak-retention-select, .wt-bak-name-input,
  .wt-dash-cmd-input {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  }
  .wt-btn:hover, .wt-app-sidebar-btn:hover, .wt-app-sysdash-btn:hover, .wt-app-sidebar-footer-btn:hover,
  .wt-dash-tab:hover, .wt-files-subtab:hover, .wt-files-action-btn:hover,
  .wt-props-save-btn:hover, .wt-props-restart-btn:hover, .wt-launch-btn:hover,
  .wt-players-save-btn:hover, .wt-bak-create-btn:hover, .wt-bak-restore-btn:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  }
  .wt-card, .wt-hw-card, .wt-set-card, .wt-props-section, .wt-props-motd-card,
  .wt-props-savebar, .wt-props-custom-card, .wt-props-add-card,
  .wt-bak-card, .wt-bak-upload-card, .wt-bak-retention-card, .wt-bak-auto-card,
  .wt-files-card, .wt-players-card,
  .wt-dash-players, .wt-dash-console, .wt-applog,
  .wt-sysdash-perf-card, .wt-sysdash-card,
  .wt-players-list, .wt-bak-list-item {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  }
  .wt-dash-server-name, .wt-dash-server-type, .wt-step-title, .wt-game-name,
  .wt-props-section-header h3, .wt-props-motd-title, .wt-bak-card-title,
  .wt-set-card-title, .wt-files-subtab, .wt-dash-tab,
  .wt-app-sidebar-brand, .wt-dash-players-label,
  .wt-players-card-title, .wt-sysdash-section-title, .wt-sysdash-card-title,
  .wt-props-custom-header h3, .wt-props-custom-label,
  .wt-dash-mon-value, .wt-dash-mon-label, .wt-sys-badge,
  .wt-app-server-item-name, .wt-props-field-label, .wt-props-savebar-hint,
  .wt-props-motd-hint, .wt-bak-retention-row label, .wt-files-name,
  .wt-dash-server-type, .wt-dash-addr-btn {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  }

  /* Full-screen background */
  .wt-bg {
    position: fixed; inset: 0; z-index: 0;
    background-image: var(--walkthrough-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.75;
    background-color: rgb(var(--color-ink-900));
    transition: background-image 0.6s ease, opacity 0.3s ease;
  }

  /* Hide top nav on walkthrough page */
  .wt-back-link {
    position: fixed; top: 1rem; left: 1rem; z-index: 100;
    color: rgba(255,255,255,0.5); font-size: 0.75rem; text-decoration: none;
    display: flex; align-items: center; gap: 0.3rem; transition: color 0.2s;
  }
  .wt-back-link:hover { color: #fff; }

  /* ── Nav (shared with index.html) ── */
  .nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    height: 62px; padding: 0 2rem; line-height: 1;
    background: #0d1117;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .nav { display: none !important; }
  .footer-bar { display: none !important; }
  .nav-logo { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
  .nav-logo img { height: 48px; width: auto; }
  .nav-logo span { font-family: 'Bungee', monospace; font-size: 2.4rem; color: rgb(var(--color-brand-500)); letter-spacing: 0.02em; }
  .nav-links { display: flex; gap: 0.5rem; align-items: center; }
  .nav-logo span, .nav-links a { text-shadow: 0 2px 4px rgba(0,0,0,0.8), 0 1px 2px rgba(0,0,0,0.6); }
  .nav-links .nav-cta { text-shadow: none; }
  .nav-links a:not(.nav-cta):not(.nav-discord):not(.nav-youtube) { color: #c9d1d9; text-decoration: none; font-size: 0.88rem; font-weight: 600; padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid rgba(255,255,255,0.04); background: #161b22; transition: all 0.15s; }
  .nav-links a:not(.nav-cta):not(.nav-discord):not(.nav-youtube):hover { color: #e8ecf1; background: #21262d; border-color: rgba(255,255,255,0.2); }
    .nav-links a:not(.nav-cta):not(.nav-discord):not(.nav-youtube).active { color: #fff; font-weight: 700; border-color: rgba(160,80,0,1); background: rgba(160,80,0,0.45); }
    .nav-links a:not(.nav-cta):not(.nav-discord):not(.nav-youtube).active:hover { color: #fff; background: rgba(160,80,0,0.45); border-color: rgba(160,80,0,1); }
  .nav-coming-soon {
    font-size: 0.72rem; font-weight: 500; color: #6e7f8d;
    display: flex; align-items: center; gap: 0.4rem;
  }
  .nav-coming-soon::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: rgb(var(--color-brand-500)); box-shadow: 0 0 6px rgb(var(--color-brand-500));
    animation: pulse 1.8s ease-in-out infinite;
  }
  @keyframes pulse { 0%,100% { opacity: 1; box-shadow: 0 0 8px rgb(var(--color-brand-500)); } 50% { opacity: 0.5; box-shadow: 0 0 2px rgb(var(--color-brand-500)); } }
  .nav-links .nav-cta {
    background: rgb(var(--color-brand-500)); color: #fff !important; text-shadow: none;
    font-weight: 700; font-size: 0.88rem;
    padding: 0.5rem 1.2rem; border-radius: 8px;
    text-decoration: none; transition: transform 0.15s, box-shadow 0.2s, color 0.2s;
  }
  .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(160,80,0,0.3); color: #fff !important; }
  .nav-discord {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 8px;
    background: #5865F2; transition: background 0.2s;
  }
  .nav-discord:hover { background: #4752C4; }
    .nav-youtube {
      display: flex; align-items: center; justify-content: center;
      width: 38px; height: 38px; border-radius: 8px;
      background: #FF0000; transition: background 0.2s;
    }
    .nav-youtube:hover { background: #CC0000; }
  .footer-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 0.6rem 1.5rem; text-align: center;
    font-size: 0.72rem; color: #6e7f8d;
    background: #0d1117;
  }
  @media (max-width: 768px) {
    .nav { height: 62px; padding: 0 1rem; }
    .nav-links { gap: 0.8rem; }
    .nav-links .nav-hide-mobile { display: none; }
  }

  /* Main card container */
  .wt-overlay {
    position: fixed; top: 65px; left: 0; right: 0; bottom: 0; z-index: 10;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem 1rem;
  }
  .wt-overlay.fullscreen { padding: 1rem; bottom: 38px; }
  .wt-card-shell {
    width: 100%; max-width: 1100px;
    max-height: 92vh; overflow: hidden;
    border-radius: 16px;
    background-color: rgb(var(--color-ink-800) / var(--card-opacity, 0.7));
    border: 2px solid var(--app-border);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.03), 0 24px 80px rgba(0,0,0,0.7);
    display: flex; flex-direction: column;
    animation: wtFadeIn 0.4s ease;
  }
  .wt-card-shell.fullscreen {
    max-width: 100%; max-height: calc(100vh - 65px - 38px - 2rem);
    height: calc(100vh - 65px - 38px - 2rem); border-radius: 16px;
    border: 2px solid var(--app-border);
  }
  @keyframes wtFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

  /* Header */
  .wt-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.5rem 1.5rem 1rem; border-bottom: 1px solid var(--app-border);
    flex-shrink: 0;
  }

  /* Sim disclaimer bar */
  .wt-sim-disclaimer {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.4rem 1rem; background: rgba(168,85,247,0.12);
    border-bottom: 1px solid rgba(168,85,247,0.25);
    color: rgb(var(--color-brand-400)); font-size: 0.78rem; font-weight: 500;
    flex-shrink: 0; position: relative;
  }

  /* Theme slot active state */
  .wt-theme-slot.active {
    border-color: transparent !important;
    background: rgb(var(--color-brand-500)) !important;
    color: #fff !important;
  }

  .wt-sim-disclaimer-close {
    position: absolute; right: 0.8rem; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: rgb(var(--color-brand-400)); font-size: 1.1rem;
    cursor: pointer; padding: 0 0.3rem; line-height: 1; opacity: 0.7;
  }
  .wt-sim-disclaimer-close:hover { opacity: 1; }
  .wt-header-left { display: flex; align-items: center; gap: 0.7rem; }
  .wt-header-logo { width: 28px; height: 28px; border-radius: 6px; }
  .wt-header-title { font-size: 1.15rem; font-weight: 600; color: #d0d0d0; }
  .wt-sim-badge {
    font-size: 0.7rem; font-weight: 800; letter-spacing: 0.15em; color: #fff;
    background: rgb(168,85,247); padding: 0.25rem 0.8rem; border-radius: 6px;
    text-transform: uppercase; animation: wtPulse 2s ease-in-out infinite;
  }
  .wt-timer { display: flex; align-items: center; gap: 0.45rem; font-size: 1.05rem; font-family: monospace; color: rgb(var(--color-accent)); font-weight: 600; }
  .wt-timer svg { width: 15px; height: 15px; }
  .wt-close-btn {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 8px;
    font-size: 1.4rem; font-weight: 700; line-height: 1;
    color: #8b98a8; text-decoration: none;
    transition: background 0.2s, color 0.2s;
  }
  .wt-close-btn:hover { background: rgba(255,255,255,0.08); color: #e8ecf1; }

  /* Body */
  .wt-body { padding: 1.25rem 1.5rem; flex: 1; overflow-y: auto; display: flex; flex-direction: column; }

  /* Footer */
  .wt-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.5rem; border-top: 1px solid var(--app-border);
    flex-shrink: 0;
  }
  .wt-btn {
    border: 1px solid var(--app-border); background: rgb(var(--color-ink-800)); color: rgb(var(--color-ink-200));
    font-size: 0.875rem; font-weight: 500; padding: 0.5rem 1rem;
    border-radius: 8px; cursor: pointer; transition: all 0.2s;
    display: flex; align-items: center; justify-content: center; gap: 0.25rem;
    width: 96px; white-space: nowrap;
  }
  .wt-btn:hover { background: rgb(var(--color-ink-700)); color: #fff; }
  .wt-btn-next { background: rgb(var(--color-brand-600)); border: none; color: #fff; font-weight: 500; width: 128px; }
  .wt-btn-next:hover { background: rgb(var(--color-brand-500)); color: #fff; }
  .wt-dots { display: flex; gap: 0.375rem; align-items: center; }
  .wt-dot { width: 6px; height: 6px; border-radius: 9999px; background: rgb(var(--color-ink-600)); transition: all 0.2s; cursor: pointer; }
  .wt-dot.active { width: 24px; background: rgb(var(--color-brand-500)); }
  .wt-dot.done { background: rgb(var(--color-brand-500) / 0.5); }

  /* ── Step 0: Game Selection ── */
  .wt-gt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  @media (max-width: 700px) { .wt-gt-grid { grid-template-columns: 1fr; } }
  .wt-gt-left { display: flex; flex-direction: column; gap: 0.75rem; }
  .wt-gt-card {
    position: relative; min-height: 150px; flex: 1; border-radius: 16px; overflow: hidden;
    cursor: pointer; border: 1px solid rgba(255,255,255,0.08); transition: border-color 0.2s, transform 0.15s;
  }
  .wt-gt-card:hover { transform: scale(1.02); }
  .wt-gt-card.selected.palworld { border: 4px solid #38bdf8; }
  .wt-gt-card.selected.minecraft { border: 4px solid #34d399; }
  .wt-gt-card.palworld { border-color: rgba(56,189,248,0.4); }
  .wt-gt-card.palworld:hover { border-color: #38bdf8; }
  .wt-gt-card.minecraft { border-color: rgba(52,211,153,0.4); }
  .wt-gt-card.minecraft:hover { border-color: #34d399; }
  .wt-gt-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .wt-gt-card-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,0.9), transparent 60%); }
  .wt-gt-card-content { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding: 1.25rem; }
  .wt-gt-card-name { font-size: 1.5rem; font-weight: 700; color: #fff; text-shadow: 0 0 3px #000, 0 0 5px #000, 1px 1px 2px #000; }
  .wt-gt-card-name.minecraft { font-size: 1.25rem; }
  .wt-gt-card-desc { font-size: 0.875rem; color: rgba(255,255,255,0.7); margin-top: 0.25rem; text-shadow: 0 0 3px #000, 0 0 5px #000; }
  .wt-gt-featured-tag {
    position: absolute; top: 0; left: 0; z-index: 2;
    background: rgba(56,189,248,0.9); padding: 0.375rem 0.75rem;
    border-bottom-right-radius: 12px;
    color: #fff; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8), 0 1px 2px rgba(0,0,0,0.6);
  }
  .wt-gt-steam-wrap { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: rgb(var(--nested-card-bg, var(--color-ink-800))); }
  .wt-gt-steam-grid {
    padding: 0.75rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
    max-height: 513px; overflow-y: auto;
  }
  .wt-gt-steam-grid::-webkit-scrollbar { width: 4px; }
  .wt-gt-steam-grid::-webkit-scrollbar-thumb { background: #21262d; border-radius: 2px; }
  .wt-gt-tile {
    position: relative; height: 96px; border-radius: 8px; overflow: hidden;
    cursor: pointer; border: 0; transition: transform 0.15s;
  }
  .wt-gt-tile:hover { transform: scale(1.03); }
  .wt-gt-tile.selected { border: 4px solid #38bdf8; }
  .wt-gt-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
  .wt-gt-tile-name {
    position: absolute; bottom: 0; left: 0; right: 0; padding: 0.3rem 0.5rem; font-size: 0.72rem; font-weight: 500; color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  }
  .wt-gt-scroll-hint { text-align: right; font-size: 0.68rem; color: rgb(var(--color-ink-500)); padding: 0.3rem 0.6rem; background: rgb(var(--nested-card-bg, var(--color-ink-800))); }

  /* ── Step 1: Minecraft Type Selection ── */
  .wt-mc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
  .wt-mc-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
  .wt-modpack-row:hover { background: rgba(255,255,255,0.04); }
  .wt-modpack-row.selected:hover { background: inherit; }
  @media (max-width: 600px) { .wt-mc-grid { grid-template-columns: 1fr; } .wt-mc-grid-3 { grid-template-columns: 1fr; } }
  .wt-mc-card {
    position: relative; height: 176px; border-radius: 16px; overflow: hidden;
    cursor: pointer; border: 0; transition: transform 0.15s;
  }
  .wt-mc-card:hover { transform: scale(1.02); }
  .wt-mc-card.selected { border: 4px solid #34d399; }
  .wt-mc-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .wt-mc-card-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,0.9), transparent 60%); }
  .wt-mc-card-content { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding: 1rem; }
  .wt-mc-card-name { font-size: 1.1rem; font-weight: 700; color: #fff; text-shadow: 0 0 3px #000, 0 0 5px #000, 1px 1px 2px #000; }
  .wt-mc-card-tag {
    display: inline-block; font-size: 0.62rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; color: #34d399; background: rgba(52,211,153,0.25);
    padding: 0.15rem 0.5rem; border-radius: 20px; margin-left: 0.4rem;
    border: 1px solid rgba(52,211,153,0.4); text-shadow: 0 0 2px #000;
  }
  .wt-mc-card-desc { font-size: 0.78rem; color: rgba(255,255,255,0.7); margin-top: 0.15rem; text-shadow: 0 0 3px #000, 0 0 5px #000; }

  /* ── Step content cards ── */
  .wt-card {
    background: rgb(var(--color-ink-800) / var(--card-nested-opacity, 0.7));
    border: none; border-radius: 12px; padding: 1rem; position: relative;
  }
  .wt-card + .wt-card { margin-top: 1rem; }
  .wt-card-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--color-ink-500)); margin-bottom: 0.75rem; }
  .wt-card-check {
    position: absolute; top: 0.5rem; right: 0.5rem;
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(16,185,129,0.2); box-shadow: 0 0 0 1px rgba(16,185,129,0.4);
    display: flex; align-items: center; justify-content: center;
    color: #34d399; font-size: 0.6rem;
  }
  .wt-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: stretch; }
  .wt-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }

  /* ── Intro step boxes & theme picker ── */
  .wt-intro-step { background: rgb(var(--nested-card-bg, var(--color-ink-800))); border: 2px solid var(--app-border); border-radius: 12px; padding: 1.2rem 0.8rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
  .wt-intro-step-icon { width: 40px; height: 40px; border-radius: 10px; background: rgb(var(--color-ink-700)); display: flex; align-items: center; justify-content: center; margin-bottom: 0.3rem; }
  .wt-intro-step-title { font-size: 0.88rem; font-weight: 600; color: rgb(var(--color-ink-100)); }
  .wt-intro-step-desc { font-size: 0.78rem; color: rgb(var(--color-ink-400)); line-height: 1.5; }
  .wt-theme-pick:hover { filter: brightness(1.15); }
  @media (max-width: 600px) { .wt-grid-2, .wt-grid-3 { grid-template-columns: 1fr; } }

  /* Network step cards */
  .wt-net-section-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; font-weight: 600; color: rgb(var(--color-ink-200)); margin-bottom: 0.6rem; }
  .wt-net-port-card { background: rgb(var(--color-ink-800) / var(--card-nested-opacity, 0.7)); border: none; border-radius: 12px; padding: 1rem; position: relative; }
  .wt-net-port-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: rgb(var(--color-ink-500)); margin-bottom: 0.5rem; }
  .wt-net-port-input { width: 100%; background: rgb(var(--color-ink-900)); border: 1px solid rgb(var(--color-ink-600)); border-radius: 8px; padding: 0.5rem 0.75rem; color: rgb(var(--color-ink-100)); font-size: 0.875rem; font-family: 'Cascadia Code','Consolas',monospace; outline: none; }
  .wt-net-port-input:focus { border-color: rgb(var(--color-brand-500)); }
  .wt-net-port-hint { font-size: 0.75rem; color: rgb(var(--color-ink-300)); line-height: 1.625; margin-top: 0.25rem; }
  .wt-net-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
  @media (max-width: 600px) { .wt-net-grid2 { grid-template-columns: 1fr; } }
  .wt-net-card { background: rgb(var(--color-ink-800) / var(--card-nested-opacity, 0.7)); border: none; border-radius: 12px; padding: 1rem; position: relative; }
  .wt-net-card-title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: rgb(var(--color-ink-500)); margin-bottom: 0.6rem; }
  .wt-net-iface-label { font-size: 0.75rem; font-weight: 500; color: rgb(var(--color-ink-100)); margin-bottom: 0.25rem; }
  .wt-net-select { width: 100%; background: rgb(var(--color-ink-900)); border: 1px solid rgb(var(--color-ink-600)); border-radius: 8px; padding: 0.5rem 0.75rem; color: rgb(var(--color-ink-100)); font-size: 0.875rem; outline: none; }
  .wt-net-select:focus { border-color: rgb(var(--color-brand-500)); }
  .wt-net-iface-hint { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.4rem; padding: 0.4rem 0.6rem; border: 1px solid rgba(22,179,100,0.3); border-radius: 8px; background: rgba(22,179,100,0.08); font-size: 0.72rem; color: #4ade80; }
  .wt-net-ext-desc { font-size: 0.82rem; color: rgb(var(--color-ink-300)); line-height: 1.5; margin-bottom: 0.7rem; }
  .wt-net-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .wt-net-choice { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgb(var(--color-ink-600)); border-radius: 12px; padding: 0.8rem; cursor: pointer; transition: all 0.15s; background: rgb(var(--color-ink-900)); }
  .wt-net-choice:hover { border-color: rgb(var(--color-ink-500)); }
  .wt-net-choice.selected-no { border-color: rgba(156,163,175,0.5); background: rgba(107,114,128,0.15); }
  .wt-net-choice.selected-yes { border-color: rgba(22,179,100,0.5); background: rgba(22,179,100,0.1); }
  .wt-net-choice-title { font-size: 0.88rem; font-weight: 600; color: rgb(var(--color-ink-200)); }
  .wt-net-choice.selected-yes .wt-net-choice-title { color: #4ade80; }
  .wt-net-choice-sub { font-size: 0.7rem; color: rgb(var(--color-ink-500)); margin-top: 0.15rem; }

  /* World step */
  .wt-world-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; }
  @media (max-width: 700px) { .wt-world-grid { grid-template-columns: 1fr; } }
  .wt-world-seed-card { background: rgb(var(--color-ink-800) / var(--card-opacity, 0.7)); border: 1px solid var(--app-border); border-radius: 12px; padding: 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
  .wt-world-seed-label { font-size: 0.88rem; font-weight: 600; color: rgb(var(--color-ink-200)); margin-bottom: 0.6rem; }
  .wt-world-seed-input { width: 100%; background: rgb(var(--nested-card-bg, var(--color-ink-800))); border: 1px solid var(--app-border); border-radius: 8px; padding: 0.5rem 0.8rem; color: rgb(var(--color-ink-200)); font-size: 0.88rem; outline: none; box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
  .wt-world-seed-input:focus { border-color: rgb(var(--color-brand-500)); }
  .wt-world-seed-input::placeholder { color: rgb(var(--color-ink-500)); }
  .wt-world-seed-btn { width: 100%; margin-top: 0.5rem; padding: 0.5rem; border-radius: 8px; border: 1px solid var(--app-border); background: rgb(var(--nested-card-bg, var(--color-ink-800))); color: rgb(var(--color-ink-300)); font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all 0.15s; box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
  .wt-world-seed-btn:hover { background: rgb(var(--color-ink-600)); color: rgb(var(--color-ink-200)); }
  .wt-world-types-label { font-size: 0.88rem; font-weight: 600; color: rgb(var(--color-ink-200)); margin-bottom: 0.6rem; }
  .wt-world-types-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .wt-world-type-card { position: relative; border-radius: 10px; overflow: hidden; cursor: pointer; transition: all 0.2s; border: 3px solid transparent; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
  .wt-world-type-card:hover { transform: scale(1.02); }
  .wt-world-type-card.selected { border-color: rgb(var(--color-brand-500)); }
  .wt-world-type-img { width: 100%; height: 120px; object-fit: cover; transform: scale(1.2); transition: transform 0.5s; }
  .wt-world-type-card:hover .wt-world-type-img { transform: scale(1.3); }
  .wt-world-type-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.2) 50%, transparent); }
  .wt-world-type-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 0.6rem; }
  .wt-world-type-name { display: flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
  .wt-world-type-badge { font-size: 0.6rem; font-weight: 600; padding: 0.1rem 0.4rem; border-radius: 99px; background: rgb(var(--color-brand-500) / 0.4); color: rgb(var(--color-brand-400)); }
  .wt-world-type-desc { font-size: 0.7rem; color: rgb(var(--color-ink-300)); margin-top: 0.15rem; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }

  /* Gameplay step */
  .wt-gp-card { background: rgb(var(--color-ink-800) / var(--card-opacity, 0.7)); border: 1px solid var(--app-border); border-radius: 12px; padding: 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.5); margin-bottom: 0.8rem; }
  .wt-gp-card:last-child { margin-bottom: 0; }
  .wt-gp-label { font-size: 0.88rem; font-weight: 600; color: rgb(var(--color-ink-200)); margin-bottom: 0.3rem; }
  .wt-gp-desc { font-size: 0.82rem; color: rgb(var(--color-ink-300)); margin-bottom: 0.7rem; }
  .wt-gp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .wt-gp-grid4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 0.6rem; }
  @media (max-width: 600px) { .wt-gp-grid4 { grid-template-columns: 1fr 1fr; } }
  .wt-gp-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 10px; padding: 0.7rem; cursor: pointer; transition: all 0.15s; border: 1px solid var(--app-border); background: rgb(var(--nested-card-bg, var(--color-ink-800))); text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
  .wt-gp-btn:hover { border-color: rgb(var(--color-ink-500)); }
  .wt-gp-btn.selected { border-color: rgba(22,179,100,0.6); background: rgba(22,179,100,0.1); }
  .wt-gp-btn-title { font-size: 0.88rem; font-weight: 600; color: rgb(var(--color-ink-200)); }
  .wt-gp-btn.selected .wt-gp-btn-title { color: #4ade80; }
  .wt-gp-btn-sub { font-size: 0.7rem; color: rgb(var(--color-ink-500)); margin-top: 0.15rem; }

  /* DeployCat Connect tab */
  .wt-connect-wrap { flex: 1 1 0; min-width: 0; overflow-y: auto; padding: 1rem; }
  .wt-connect-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; align-items: stretch; }
  @media (max-width: 1000px) { .wt-connect-grid { grid-template-columns: 1fr; } }
  .wt-connect-card { background: rgb(var(--nested-card-bg, var(--color-ink-800))); border: 1px solid var(--app-border); border-radius: 12px; padding: 1rem; display: flex; flex-direction: column; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
  .wt-connect-card-title { display: flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; font-weight: 600; color: rgb(var(--color-ink-200)); margin-bottom: 0.7rem; }
  .wt-connect-card-title svg { color: rgb(var(--color-brand-400)); }
  .wt-connect-info-text { font-size: 0.82rem; color: rgb(var(--color-ink-300)); line-height: 1.6; }
  .wt-connect-info-text p { margin-bottom: 0.6rem; }
  .wt-connect-howto { background: rgb(var(--color-ink-900) / 0.5); border-radius: 10px; padding: 0.7rem; font-size: 0.72rem; color: rgb(var(--color-ink-400)); line-height: 1.7; margin-top: 0.5rem; }
  .wt-connect-howto-title { font-size: 0.75rem; font-weight: 600; color: rgb(var(--color-ink-300)); margin-bottom: 0.3rem; }
  .wt-connect-code-box { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin: 0.8rem auto; padding: 0.8rem 1.2rem; border: 2px solid rgb(var(--color-brand-500) / 0.4); border-radius: 14px; background: rgb(var(--nested-card-bg, var(--color-ink-800))); cursor: pointer; transition: all 0.15s; }
  .wt-connect-code-box:hover { border-color: rgb(var(--color-brand-500) / 0.6); background: rgb(var(--color-ink-600)); }
  .wt-connect-code { font-family: 'Cascadia Code','Consolas',monospace; font-size: 1.4rem; font-weight: 700; letter-spacing: 0.15em; color: #fff; }
  .wt-connect-code-hint { font-size: 0.68rem; color: rgb(var(--color-ink-500)); text-align: center; margin-top: 0.3rem; }
  .wt-connect-btn-row { display: flex; gap: 0.5rem; margin-top: auto; padding-top: 0.8rem; }
  .wt-connect-btn { flex: 1; padding: 0.5rem; border-radius: 8px; border: 1px solid var(--app-border); background: rgb(var(--nested-card-bg, var(--color-ink-800))); color: rgb(var(--color-ink-300)); font-size: 0.78rem; font-weight: 500; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center; gap: 0.3rem; }
  .wt-connect-btn:hover { background: rgb(var(--color-ink-600)); color: rgb(var(--color-ink-200)); }
  .wt-connect-btn.danger { color: #f87171; border-color: rgba(248,113,113,0.3); }
  .wt-connect-btn.danger:hover { background: rgba(248,113,113,0.1); }
  .wt-connect-download-btn { display: flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; margin-top: 0.5rem; padding: 0.6rem; border-radius: 8px; background: rgb(var(--color-brand-500)); color: #fff; font-size: 0.82rem; font-weight: 600; cursor: pointer; border: none; transition: all 0.15s; box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
  .wt-connect-download-btn:hover { filter: brightness(1.15); }
  .wt-connect-waiting { display: flex; align-items: center; justify-content: center; gap: 0.4rem; font-size: 0.82rem; color: #fbbf24; padding: 0.5rem; }
  .wt-connect-client { display: flex; align-items: center; justify-content: space-between; border-radius: 8px; padding: 0.5rem 0.7rem; border: 1px solid var(--app-border); background: rgb(var(--color-ink-900) / 0.5); margin-bottom: 0.4rem; }
  .wt-connect-client-info { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
  .wt-connect-client-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; flex-shrink: 0; }
  .wt-connect-client-ip { font-family: 'Cascadia Code','Consolas',monospace; font-size: 0.82rem; color: rgb(var(--color-ink-200)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wt-connect-client-time { font-size: 0.7rem; color: rgb(var(--color-ink-500)); flex-shrink: 0; }
  .wt-connect-client-disc { border-radius: 6px; padding: 0.25rem; border: none; background: none; color: #f87171; cursor: pointer; font-size: 0.75rem; }
  .wt-connect-client-disc:hover { background: rgba(248,113,113,0.1); }
  .wt-connect-empty { display: flex; flex: 1; align-items: center; justify-content: center; padding: 1.5rem; font-size: 0.82rem; color: rgb(var(--color-ink-500)); text-align: center; }
  .wt-connect-badge { margin-left: auto; font-size: 0.65rem; font-weight: 600; padding: 0.1rem 0.4rem; border-radius: 99px; background: rgb(var(--color-brand-500) / 0.2); color: rgb(var(--color-brand-400)); }

  /* Tasks tab */
  .wt-tasks-wrap { flex: 1 1 0; min-width: 0; overflow-y: auto; padding: 1rem; }
  .wt-tasks-card { background: rgb(var(--nested-card-bg, var(--color-ink-800))); border: 1px solid var(--app-border); border-radius: 12px; padding: 1.2rem; display: flex; flex-direction: column; gap: 0.8rem; box-shadow: 0 4px 12px rgba(0,0,0,0.5); height: 100%; }
  .wt-tasks-header { display: flex; align-items: center; justify-content: space-between; }
  .wt-tasks-title { display: flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; font-weight: 600; color: rgb(var(--color-ink-200)); }
  .wt-tasks-title svg { color: rgb(var(--color-brand-400)); }
  .wt-tasks-add-row { display: flex; gap: 0.4rem; }
  .wt-tasks-add-btn { display: flex; align-items: center; gap: 0.25rem; border: 1px solid var(--app-border); border-radius: 8px; padding: 0.3rem 0.6rem; font-size: 0.72rem; font-weight: 500; color: rgb(var(--color-ink-300)); background: rgb(var(--nested-card-bg, var(--color-ink-800))); cursor: pointer; transition: all 0.15s; }
  .wt-tasks-add-btn:hover { background: rgb(var(--color-ink-600)); color: rgb(var(--color-ink-200)); }
  .wt-tasks-add-btn svg { width: 12px; height: 12px; }
  .wt-tasks-desc { font-size: 0.72rem; color: rgb(var(--color-ink-500)); line-height: 1.5; }
  .wt-tasks-list { flex: 1; overflow-y: auto; border: 1px solid var(--app-border); border-radius: 10px; padding: 0.6rem; background: rgb(var(--color-ink-900) / 0.5); }
  .wt-task-row { border: 1px solid var(--app-border); border-radius: 10px; padding: 0.8rem; background: rgb(var(--nested-card-bg, var(--color-ink-800))); margin-bottom: 0.5rem; }
  .wt-task-row:last-child { margin-bottom: 0; }
  .wt-task-row-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
  .wt-task-row-label { display: flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; font-weight: 500; color: rgb(var(--color-ink-200)); }
  .wt-task-row-label svg { width: 14px; height: 14px; }
  .wt-task-row-actions { display: flex; align-items: center; gap: 0.5rem; }
  .wt-task-enabled { display: flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; color: rgb(var(--color-ink-300)); cursor: pointer; }
  .wt-task-enabled input { width: 14px; height: 14px; accent-color: rgb(var(--color-brand-500)); }
  .wt-task-del { border: none; background: none; color: rgb(var(--color-ink-500)); cursor: pointer; padding: 0.2rem; border-radius: 4px; }
  .wt-task-del:hover { color: #f87171; background: rgba(248,113,113,0.1); }
  .wt-task-del svg { width: 14px; height: 14px; }
  .wt-task-field { margin-bottom: 0.4rem; }
  .wt-task-field-label { font-size: 0.68rem; color: rgb(var(--color-ink-500)); margin-bottom: 0.2rem; }
  .wt-task-select { width: 100%; background: rgb(var(--nested-card-bg, var(--color-ink-800))); border: 1px solid var(--app-border); border-radius: 8px; padding: 0.35rem 0.5rem; color: rgb(var(--color-ink-200)); font-size: 0.78rem; outline: none; }
  .wt-task-select:focus { border-color: rgb(var(--color-brand-500)); }
  .wt-task-input { width: 100%; background: rgb(var(--nested-card-bg, var(--color-ink-800))); border: 1px solid var(--app-border); border-radius: 8px; padding: 0.4rem 0.6rem; color: rgb(var(--color-ink-200)); font-size: 0.78rem; outline: none; }
  .wt-task-input:focus { border-color: rgb(var(--color-brand-500)); }
  .wt-task-input::placeholder { color: rgb(var(--color-ink-500)); }
  .wt-task-sched-desc { font-size: 0.68rem; color: rgb(var(--color-ink-500)); display: flex; align-items: center; gap: 0.2rem; }
  .wt-task-sched-desc svg { width: 11px; height: 11px; }
  .wt-task-msg-hint { font-size: 0.68rem; color: rgb(var(--color-ink-500)); margin-top: 0.2rem; }
  .wt-tasks-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--app-border); padding-top: 0.6rem; }
  .wt-tasks-save-btn { display: flex; align-items: center; gap: 0.3rem; background: rgb(var(--color-brand-500)); color: #fff; border: none; border-radius: 8px; padding: 0.4rem 0.8rem; font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: all 0.15s; }
  .wt-tasks-save-btn:hover { filter: brightness(1.15); }
  .wt-tasks-save-btn svg { width: 14px; height: 14px; }
  .wt-tasks-msg { font-size: 0.72rem; color: rgb(var(--color-brand-400)); display: flex; align-items: center; gap: 0.3rem; }

  .wt-overview-item {
    display: flex; align-items: center; gap: 0.7rem;
    background: rgb(var(--color-ink-800) / var(--card-opacity, 0.7)); border: 1px solid var(--app-border);
    border-radius: 10px; padding: 0.6rem 0.8rem; margin-bottom: 0.5rem;
  }
  .wt-overview-num {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
    background: rgb(var(--color-brand-500) / 0.15); color: rgb(var(--color-brand-400));
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; font-weight: 700;
  }
  .wt-overview-text { font-size: 0.95rem; color: rgb(var(--color-ink-300)); }

  .wt-hw-card { background: rgb(var(--color-ink-800) / var(--card-nested-opacity, 0.7)); border: none; border-radius: 12px; padding: 1rem; position: relative; }
  .wt-hw-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--color-ink-500)); margin-bottom: 0.5rem; }
  .wt-hw-value { font-size: 0.875rem; color: rgb(var(--color-ink-200)); }
  .wt-hw-status { font-size: 0.75rem; font-weight: 600; color: #34d399; margin-top: 0.25rem; }

  /* Config fields */
  .wt-field { margin-bottom: 0.75rem; }
  .wt-field:last-child { margin-bottom: 0; }
  .wt-field-label { font-size: 0.75rem; font-weight: 500; color: rgb(var(--color-ink-100)); margin-bottom: 0.25rem; display: block; }
  .wt-input {
    width: 100%; background: rgb(var(--color-ink-900)); border: 1px solid rgb(var(--color-ink-600));
    border-radius: 8px; padding: 0.5rem 0.75rem; color: rgb(var(--color-ink-100));
    font-size: 0.875rem; font-family: inherit; outline: none;
  }
  .wt-input:focus { border-color: rgb(var(--color-brand-500)); }
  select.wt-input { cursor: pointer; }
  .wt-range {
    width: 100%; accent-color: rgb(var(--color-brand-500)); cursor: pointer;
  }
  .wt-range-val { font-size: 0.82rem; font-weight: 700; color: rgb(var(--color-accent)); min-width: 2.5rem; text-align: right; font-family: monospace; }
  .wt-range-row { display: flex; justify-content: space-between; font-size: 0.75rem; color: rgb(var(--color-ink-500)); margin-top: 0.25rem; }

  .wt-progress-bar {
    height: 8px; background: rgb(var(--color-ink-600)); border-radius: 4px; overflow: hidden; margin-bottom: 0.6rem; width: 100%;
  }
  .wt-progress-fill {
    height: 100%; background: linear-gradient(90deg, rgb(var(--color-brand-400)), rgb(var(--color-brand-600))); border-radius: 4px; min-width: 0;
    transition: width 0.25s linear;
  }
  .wt-progress-fill.inst {
    background: linear-gradient(90deg, #60a5fa, #3b82f6);
  }
  .wt-progress-info { display: flex; justify-content: space-between; font-size: 0.82rem; color: rgb(var(--color-ink-400)); margin-bottom: 0.8rem; }
  .wt-log {
    background: #151515; border-radius: 8px; padding: 0.7rem 0.9rem;
    font-family: monospace; font-size: 0.8rem; color: rgb(var(--color-ink-300));
    max-height: 140px; overflow-y: auto; line-height: 1.7;
  }
  .wt-log-line { white-space: pre-wrap; }
  .wt-log-cursor { color: rgb(var(--color-brand-400)); animation: wtBlink 1s infinite; }
  @keyframes wtBlink { 50% { opacity: 0; } }

  /* Summary */
  .wt-summary-row { display: flex; justify-content: space-between; padding: 0.45rem 0; border-top: 1px solid var(--app-border); font-size: 0.9rem; }
  .wt-summary-row:first-child { border-top: none; }
  .wt-summary-label { color: rgb(var(--color-ink-400)); }
  .wt-summary-value { color: rgb(var(--color-ink-200)); font-weight: 600; }
  .wt-complete-badge {
    display: flex; align-items: center; gap: 0.5rem;
    background: rgba(22,179,100,0.08); border: 1px solid rgba(22,179,100,0.25);
    border-radius: 10px; padding: 0.6rem 0.9rem; margin-top: 0.8rem;
  }
  .wt-complete-icon {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(22,179,100,0.15); border: 1px solid rgba(22,179,100,0.3);
    display: flex; align-items: center; justify-content: center;
    color: rgb(var(--color-accent)); font-size: 0.8rem;
  }
  .wt-complete-text { font-size: 0.95rem; font-weight: 600; color: rgb(var(--color-accent)); }
  .wt-complete-sub { font-size: 0.75rem; color: rgba(22,179,100,0.6); }

  .wt-launch-btn {
    width: 100%; padding: 2rem 1.5rem; font-size: 1.15rem; font-weight: 700;
    background: rgb(var(--color-brand-500)); border: 2px solid rgb(var(--color-brand-500));
    color: #fff; border-radius: 10px; cursor: pointer;
    transition: all 0.2s; margin-top: auto;
  }
  .wt-launch-btn:hover { filter: brightness(1.15); }

  .wt-banner {
    width: 100%; height: 203px; position: relative; overflow: hidden;
    background: linear-gradient(135deg, rgb(50,50,50), rgb(30,30,30));
  }
  .wt-banner img { width: 100%; height: 100%; object-fit: cover; }
  .wt-banner-overlay {
    position: absolute; top: 0; left: 0; right: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent);
    padding: 0.5rem 1rem; font-size: 0.75rem; color: #fff; font-weight: 500;
  }
  .wt-dash-header-connect {
    position: relative; z-index: 2;
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  }
  .wt-dash-header-connect-title {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 1rem; font-weight: 700; color: #fff;
    text-transform: uppercase; letter-spacing: 0.08em;
  }
  .wt-dash-header-connect-row {
    display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center;
  }
  .wt-dash-connect-ip {
    display: flex; align-items: center; gap: 0.6rem;
    background: #1a1a1a; border: 1px solid rgba(160,80,0,0.3);
    border-radius: 8px; padding: 0.4rem 1rem; cursor: pointer; transition: border-color 0.2s;
  }
  .wt-dash-connect-ip:hover { border-color: rgba(160,80,0,0.6); }
  .wt-dash-connect-ip.at-home { border-color: rgba(100,100,100,0.4); }
  .wt-dash-connect-ip.at-home:hover { border-color: rgba(150,150,150,0.6); }
  .wt-dash-connect-ip-label {
    font-size: 0.65rem; font-weight: 600; color: #fff;
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .wt-dash-connect-ip-addr {
    font-size: 1.4rem; font-weight: 700; font-family: 'Cascadia Code', 'Consolas', monospace;
    color: #fff;
  }
  .wt-dash-connect-ip.at-home .wt-dash-connect-ip-addr { color: #fff; }
  .wt-dash-connect-ip-copy {
    font-size: 0.65rem; color: #fff; display: flex; align-items: center; gap: 0.2rem;
  }
  .wt-dash-connect-ip:hover .wt-dash-connect-ip-copy { color: #fff; }
  .wt-disclaimer {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 0.3rem 1rem; font-size: 0.62rem; color: rgba(255,255,255,0.5);
    text-align: center; line-height: 1.3;
    background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
    pointer-events: none;
  }

  /* ── Server Dashboard (app-like layout) ── */
  .wt-app-layout { display: flex; flex: 1; overflow: hidden; }

  /* Sidebar (matches main App.jsx sidebar — 399px wide) */
  .wt-app-sidebar {
    width: 399px; flex-shrink: 0; display: flex; flex-direction: column;
    border-right: 2px solid var(--app-border);
    background-color: rgb(var(--color-ink-800));
  }
  .wt-app-sidebar-header {
    display: flex; align-items: center; gap: 0.25rem; padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--app-border);
  }
  .wt-app-sidebar-logo { width: 40px; height: 40px; border-radius: 8px; object-fit: contain; cursor: pointer; }
  .wt-app-sidebar-brand { font-family: 'Bungee', monospace; font-size: 2.5rem; line-height: 1.1; font-weight: 700; letter-spacing: 0.02em; text-shadow: 2px 2px 0 rgba(0,0,0,0.5); }
  .wt-app-sidebar-brand .deploy { color: rgb(var(--color-brand-500)); }
  .wt-app-sidebar-brand .cat { color: rgb(200,200,200); }
  .wt-app-sidebar-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.5rem 0.875rem; border-radius: 8px; font-size: 0.875rem; font-weight: 500;
    cursor: pointer; border: none; transition: all 0.15s; text-decoration: none;
  }
  .wt-app-sidebar-btn.primary { background: rgb(var(--color-brand-500)); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.5); width: 100%; padding: 0.5rem 0.875rem; }
  .wt-app-sidebar-btn.primary:hover { filter: brightness(1.15); }
  .wt-app-sidebar-btn.secondary { background: rgb(var(--color-button-bg, var(--color-ink-700))); color: rgb(var(--color-ink-200)); border: 1px solid rgb(var(--color-ink-600)); box-shadow: 0 2px 8px rgba(0,0,0,0.5); }
  .wt-app-sidebar-btn.secondary:hover { filter: brightness(1.2); }
  .wt-app-sidebar-section { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: rgb(var(--color-ink-500)); text-align: center; padding: 0.25rem 0.25rem; }
  .wt-app-server-list { flex: 1; overflow-y: auto; padding: 0 0.75rem; }
  .wt-app-server-item {
    display: flex; align-items: center; gap: 0.5rem; padding: 24px 0.75rem; border-radius: 8px;
    margin-bottom: 0.5rem; cursor: pointer; transition: all 0.15s;
    border: 1px solid transparent; position: relative; overflow: hidden;
    background-color: rgb(var(--nested-card-bg, var(--color-ink-800)));
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  }
  .wt-app-server-item:hover { filter: brightness(1.1); }
  .wt-app-server-item.selected { background-color: rgb(var(--color-secondary, var(--color-ink-700))); border-color: transparent; }
  .wt-app-server-item.selected .wt-app-server-item-name { text-shadow: 1px 1px 3px rgba(0,0,0,0.8); }
  .wt-app-server-item-thumb { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: rgb(var(--nested-card-bg, var(--color-ink-800))); }
  .wt-app-server-item-info { flex: 1; overflow: hidden; min-width: 0; }
  .wt-app-server-item-name { font-size: 0.75rem; font-weight: 700; color: rgb(var(--color-ink-200)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wt-app-server-item-game { font-size: 0.6rem; color: rgb(var(--color-ink-500)); margin-top: 0.1rem; }
  .wt-app-server-item-actions { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
  /* Status badge bubble (matches main app StatusBadge) */
  .wt-status-badge { display: inline-flex; align-items: center; gap: 0.3rem; border-radius: 99px; padding: 0.1rem 0.45rem; font-size: 0.6rem; font-weight: 500; text-transform: capitalize; border: 1px solid; white-space: nowrap; }
  .wt-status-badge.running { background: rgba(34,197,94,0.5); color: #fff; border-color: rgba(34,197,94,0.6); }
  .wt-status-badge.starting { background: rgba(245,158,11,0.5); color: #fff; border-color: rgba(245,158,11,0.6); }
  .wt-status-badge.stopping { background: rgba(245,158,11,0.5); color: #fff; border-color: rgba(245,158,11,0.6); }
  .wt-status-badge.stopped { background: rgba(55,65,81,0.5); color: #fff; border-color: rgba(107,114,128,0.6); }
  .wt-status-badge.crashed { background: rgba(239,68,68,0.5); color: #fff; border-color: rgba(239,68,68,0.6); }
  .wt-status-badge-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
  .wt-status-badge-dot.running { background: #bbf7d0; }
  .wt-status-badge-dot.starting { background: #fbbf24; animation: wtPulse 1.5s ease-in-out infinite; }
  .wt-status-badge-dot.stopping { background: #fbbf24; animation: wtPulse 1.5s ease-in-out infinite; }
  .wt-status-badge-dot.stopped { background: #6b7280; }
  .wt-status-badge-dot.crashed { background: #f87171; }
  .wt-app-server-start-btn { width: 24px; height: 24px; border-radius: 5px; border: none; background: #059669; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.5); transition: all 0.15s; padding: 1.5px; }
  .wt-app-server-start-btn:hover { background: #10b981; }
  .wt-app-server-start-btn svg { width: 12px; height: 12px; }
  .wt-app-server-stop-btn { width: 24px; height: 24px; border-radius: 5px; border: none; background: #dc2626; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.5); transition: all 0.15s; padding: 1.5px; }
  .wt-app-server-stop-btn:hover { background: #ef4444; }
  .wt-app-server-stop-btn svg { width: 10px; height: 10px; }
  .wt-app-server-stop-btn.disabled { opacity: 0.4; pointer-events: none; }
  .wt-app-server-start-btn.disabled { opacity: 0.4; pointer-events: none; }
  .wt-app-sidebar-footer { padding: 0.5rem 0.75rem; border-top: 1px solid var(--app-border); display: flex; gap: 0.5rem; }
  .wt-app-sidebar-footer-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.3rem;
    border-radius: 8px; font-size: 0.75rem; color: rgb(var(--color-ink-300)); cursor: pointer;
    border: 1px solid rgb(var(--color-ink-600)); background: rgb(var(--color-button-bg, var(--color-ink-700)));
    box-shadow: 0 2px 8px rgba(0,0,0,0.5); transition: all 0.15s;
  }
  .wt-app-sidebar-footer-btn:hover { filter: brightness(1.2); color: rgb(var(--color-ink-100)); }
  .wt-app-sidebar-footer-btn svg { width: 13px; height: 13px; }

  /* User account card (matches main app) */
  .wt-app-user-card {
    padding: 0.75rem; border-radius: 12px; margin: 0 0.75rem 0.5rem;
    background-color: rgb(var(--nested-card-bg, var(--color-ink-800)));
    border: 1px solid var(--app-border);
  }
  .wt-app-user-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
  .wt-app-user-info { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: rgb(var(--color-ink-300)); min-width: 0; }
  .wt-app-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wt-app-user-badge { display: inline-flex; align-items: center; gap: 0.25rem; border-radius: 99px; padding: 0.125rem 0.5rem; font-size: 0.625rem; font-weight: 600; flex-shrink: 0; }
  .wt-app-user-badge.trial { background: rgba(245,158,11,0.2); color: #fbbf24; border: 1px solid rgba(245,158,11,0.4); }
  .wt-app-user-badge.pro { background: rgba(34,197,94,0.2); color: #4ade80; border: 1px solid rgba(34,197,94,0.4); }
  .wt-app-user-badge.expired { background: rgba(239,68,68,0.2); color: #f87171; border: 1px solid rgba(239,68,68,0.4); }
  .wt-app-user-badge-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
  .wt-app-user-badge.trial .wt-app-user-badge-dot { background: #fbbf24; }
  .wt-app-user-badge.pro .wt-app-user-badge-dot { background: #4ade80; }
  .wt-app-user-badge.expired .wt-app-user-badge-dot { background: #f87171; }
  .wt-app-user-trial-row { display: flex; align-items: center; gap: 0.25rem; margin-top: 0.375rem; padding-top: 0.375rem; border-top: 1px solid rgba(255,255,255,0.06); }
  .wt-app-user-trial-text { font-size: 0.75rem; color: #fbbf24; }
  .wt-app-user-upgrade-btn {
    margin-top: 0.5rem; width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.375rem;
    padding: 0.375rem 0.5rem; border-radius: 6px; border: none; cursor: pointer;
    background: linear-gradient(to right, #f59e0b, #f97316); color: #fff;
    font-size: 0.75rem; font-weight: 500; transition: all 0.15s;
  }
  .wt-app-user-upgrade-btn:hover { background: linear-gradient(to right, #fbbf24, #fb923c); }
  .wt-app-user-settings-btn {
    margin-top: 0.5rem; width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.375rem;
    padding: 0.375rem 0.5rem; border-radius: 6px; cursor: pointer;
    border: 1px solid rgb(var(--color-ink-600)); background: rgba(255,255,255,0.03);
    color: rgb(var(--color-ink-300)); font-size: 0.75rem; font-weight: 500; transition: all 0.15s;
  }
  .wt-app-user-settings-btn:hover { background: rgba(255,255,255,0.06); color: rgb(var(--color-ink-100)); }

  /* Discord + System Dashboard row (matches main app) */
  .wt-app-sysdash-row { display: flex; gap: 0.5rem; }
  .wt-app-discord-btn {
    display: flex; align-items: center; justify-content: center;
    width: 80px; height: 48px; flex-shrink: 0; border-radius: 8px;
    background: #5865F2; transition: all 0.2s; cursor: pointer; border: none;
  }
  .wt-app-discord-btn:hover { background: #4752C4; }
  .wt-app-sysdash-btn {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 24px 0.75rem; border-radius: 8px; font-size: 0.875rem; font-weight: 500;
    cursor: pointer; border: none; transition: all 0.15s; flex: 1;
    background: rgb(var(--color-secondary, var(--color-ink-700))); color: rgb(var(--color-ink-100));
    box-shadow: 0 2px 8px rgba(0,0,0,0.5); overflow: hidden;
  }
  .wt-app-sysdash-btn:hover { filter: brightness(1.15); }
  .wt-app-sysdash-btn.active { filter: brightness(1.25); }
  .wt-app-sidebar-divider { height: 1px; margin: 0.625rem 0.25rem; background: rgb(var(--nested-card-bg, var(--color-ink-800))); }

  /* System Dashboard view (matches SystemDashboard.jsx) */
  .wt-sysdash-body { flex: 1; overflow-y: auto; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
  .wt-sysdash-section-title { font-size: 0.875rem; font-weight: 600; color: rgb(var(--color-ink-200)); display: flex; align-items: center; gap: 0.5rem; }
  .wt-sysdash-section-title svg { color: rgb(var(--color-brand-400)); flex-shrink: 0; }
  .wt-sys-pill { font-size: 0.75rem; font-weight: 700; padding: 0.125rem 0.5rem; border-radius: 99px; }
  .wt-sys-pill.green { background: rgba(34,197,94,0.15); color: #22c55e; }
  .wt-sys-pill.blue { background: rgba(96,165,250,0.15); color: #60a5fa; }
  .wt-sys-badge { font-size: 0.875rem; padding: 0.125rem 0.5rem; border-radius: 6px; background: rgba(30,30,30,0.5); color: #fff; }
  .wt-sys-badge.green { background: rgba(22,163,74,0.5); color: #fff; box-shadow: 0 0 0 1px rgba(34,197,94,0.6); }
  .wt-sys-badge.poll { background: rgba(30,30,30,0.5); color: rgb(var(--color-ink-200)); display: inline-flex; align-items: center; gap: 0.25rem; cursor: pointer; }
  .wt-sys-badge.poll:hover { color: rgb(var(--color-brand-400)); background: rgba(40,40,40,0.5); }
  .wt-sys-ip-badge { font-family: monospace; font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.625rem; border-radius: 8px; display: inline-flex; align-items: center; gap: 0.375rem; cursor: pointer; transition: all 0.15s; }
  .wt-sys-ip-badge.internal { background: rgba(8,47,73,0.5); color: #fff; }
  .wt-sys-ip-badge.internal.available { box-shadow: 0 0 0 1px rgba(56,189,248,0.6); }
  .wt-sys-ip-badge.ext { background: rgba(22,163,74,0.5); color: #fff; }
  .wt-sys-ip-badge.ext.available { box-shadow: 0 0 0 1px rgba(34,197,94,0.6); }
  .wt-sys-status-badge { font-size: 0.62rem; padding: 0.1rem 0.35rem; border-radius: 4px; font-weight: 600; }
  .wt-sys-status-badge.running { background: rgba(34,197,94,0.2); color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }

  .wt-sysdash-grid-4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; }
  .wt-sysdash-perf-card { background: rgb(var(--nested-card-bg, var(--color-ink-900))); border-radius: 8px; padding: 1rem; cursor: pointer; transition: transform 0.15s; }
  .wt-sysdash-perf-card:hover { transform: scale(1.01); }

  .wt-sysdash-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  @media (max-width: 900px) {
    .wt-sysdash-2col { grid-template-columns: 1fr; }
    .wt-sysdash-3grid { grid-template-columns: 1fr 1fr; }
  }
  .wt-sysdash-col { display: flex; flex-direction: column; gap: 0.75rem; }
  .wt-sysdash-card { background: rgb(var(--nested-card-bg, var(--color-ink-900))); border-radius: 8px; padding: 1rem; display: flex; flex-direction: column; gap: 0.625rem; }
  .wt-sysdash-card-title { font-size: 0.875rem; font-weight: 600; color: rgb(var(--color-ink-200)); display: flex; align-items: center; gap: 0.5rem; }
  .wt-sysdash-card-title svg { color: rgb(var(--color-brand-400)); flex-shrink: 0; }
  .wt-sysdash-3grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; }
  .wt-sysdash-2grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .wt-sysdash-stat-box { background: rgb(var(--color-ink-800) / var(--card-opacity, 0.7)); border-radius: 8px; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.375rem; }
  .wt-sysdash-stat-label { font-size: 0.75rem; font-weight: 600; color: rgb(var(--color-ink-200)); display: flex; align-items: center; gap: 0.375rem; }
  .wt-sysdash-stat-label svg { flex-shrink: 0; }
  .wt-sysdash-stat-value { font-size: 0.875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
  .wt-sysdash-stat-sub { font-size: 0.6875rem; color: rgb(var(--color-ink-500)); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wt-sysdash-bar { height: 6px; border-radius: 3px; background: rgb(var(--color-ink-900)); overflow: hidden; }
  .wt-sysdash-bar-fill { height: 100%; border-radius: 3px; transition: width 0.5s; }
  .wt-sysdash-bar-sm { height: 4px; border-radius: 2px; background: rgb(var(--color-ink-900)); overflow: hidden; }
  .wt-sysdash-bar-sm-fill { height: 100%; border-radius: 2px; transition: width 0.5s; }

  /* App Log viewer (matches AppLogViewer in SystemDashboard.jsx) */
  .wt-sysdash-log-viewer { flex-shrink: 0; border: 2px solid var(--app-border); border-radius: 12px; background: rgb(var(--color-ink-800) / var(--card-opacity, 0.7)); box-shadow: 0 4px 12px rgba(0,0,0,0.5); display: flex; flex-direction: column; overflow: hidden; }
  .wt-sysdash-log-header { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; border-bottom: 1px solid var(--app-border); }
  .wt-sysdash-log-title { font-size: 0.75rem; font-weight: 600; color: rgb(var(--color-ink-200)); display: flex; align-items: center; gap: 0.5rem; }
  .wt-sysdash-log-title svg { color: rgb(var(--color-brand-400)); }
  .wt-sysdash-log-controls { display: flex; align-items: center; gap: 0.5rem; }
  .wt-sysdash-log-legend { display: flex; align-items: center; gap: 0.5rem; font-size: 0.625rem; }
  .wt-sysdash-log-body { overflow-y: auto; padding: 0.5rem 1rem; font-family: monospace; font-size: 0.6875rem; line-height: 1.5; flex: 1; max-height: 360px; min-height: 1.5rem; }
  .wt-sysdash-log-line { padding: 0.125rem 0.5rem; border-left: 2px solid; white-space: pre-wrap; word-break: break-all; }
  .wt-sysdash-log-line.info { border-color: rgb(var(--color-ink-500)); color: rgb(var(--color-ink-200)); }
  .wt-sysdash-log-line.error { border-color: #ef4444; background: rgba(239,68,68,0.05); color: #f87171; }
  .wt-sysdash-log-line.warn { border-color: #eab308; background: rgba(234,179,8,0.05); color: #fde047; }
  .wt-sysdash-log-line.setup { border-color: #10b981; background: rgba(16,185,129,0.05); color: #6ee7b7; }
  .wt-sysdash-log-line.deploycat { border-color: #0ea5e9; background: rgba(14,165,233,0.05); color: #bae6fd; }
  .wt-sysdash-log-line.debug { border-color: #a855f7; background: rgba(168,85,247,0.05); color: #d8b4fe; }
  .wt-sysdash-log-line.frontend { border-color: #ec4899; background: rgba(236,72,153,0.05); color: #f9a8d4; }
  .wt-sysdash-log-ts { color: rgb(var(--color-ink-500)); }
  .wt-sysdash-log-level { font-weight: 600; }

  /* Main content */
  .wt-app-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

  /* Header card wrapping banner + monitor (matches Card component) */
  .wt-dash-header-card { margin: 0.5rem; border: 2px solid var(--app-border); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.5); flex-shrink: 0; background: rgb(var(--color-ink-800) / var(--card-opacity, 0.7)); }

  /* Server header banner */
  .wt-dash-header {
    position: relative; overflow: hidden; flex-shrink: 0; min-height: 160px;
  }
  .wt-dash-header-bg { position: absolute; inset: 0; }
  .wt-dash-header-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.85) saturate(1.12); }
  .wt-dash-header-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,0.9) 0%, transparent 40%); }
  .wt-dash-header-content { position: relative; z-index: 2; padding: 1.25rem 1.25rem 1.5rem; display: flex; align-items: center; justify-content: space-between; min-height: 120px; }
  .wt-dash-header-disclaimer { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; padding: 0.3rem 1rem; font-size: 0.62rem; color: rgba(255,255,255,0.5); text-align: center; line-height: 1.3; background: linear-gradient(to top, rgba(0,0,0,0.85), transparent); pointer-events: none; }
  .wt-dash-server-name { font-size: 1.875rem; font-weight: 700; color: #fff; text-shadow: 2px 2px 4px rgba(0,0,0,0.8); }
  .wt-dash-server-type { font-size: 0.95rem; color: rgba(255,255,255,0.6); margin-top: 0.15rem; }
  .wt-dash-addr-btn {
    display: inline-flex; align-items: center; gap: 0.3rem; font-family: monospace; font-size: 0.9rem; font-weight: 700;
    background: rgba(0,0,0,0.5); color: #fff; padding: 0.25rem 0.6rem; border-radius: 6px; margin-top: 0.3rem;
    border: 1px solid rgba(22,179,100,0.3);
  }
  .wt-dash-addr-btn .dot { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--color-accent)); }
  /* Status badge pill in tab bar (matches main app ServerView) */
  .wt-dash-tab-status {
    display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.375rem 1rem; border-radius: 99px;
    font-size: 0.875rem; font-weight: 500; text-transform: capitalize; border: 1px solid;
  }
  .wt-dash-tab-status.running { background: rgba(34,197,94,0.5); border-color: rgba(34,197,94,0.6); color: #fff; }
  .wt-dash-tab-status.stopped { background: rgba(55,65,81,0.5); border-color: rgb(var(--color-ink-600)); color: rgb(var(--color-ink-200)); }
  .wt-dash-tab-status.starting { background: rgba(245,158,11,0.5); border-color: rgba(245,158,11,0.6); color: #fff; }
  .wt-dash-tab-status.stopping { background: rgba(245,158,11,0.5); border-color: rgba(245,158,11,0.6); color: #fff; }
  .wt-dash-tab-status.crashed { background: rgba(239,68,68,0.5); border-color: rgba(239,68,68,0.6); color: #fff; }
  .wt-dash-tab-status .dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
  .wt-dash-tab-status.running .dot { background: #bbf7d0; animation: wtPulse 1.5s ease-in-out infinite; }
  .wt-dash-tab-status.stopped .dot { background: rgb(var(--color-ink-400)); }
  .wt-dash-tab-status.starting .dot { background: #fbbf24; animation: wtPulse 1s ease-in-out infinite; }
  .wt-dash-tab-status.stopping .dot { background: #fbbf24; animation: wtPulse 1s ease-in-out infinite; }
  .wt-dash-tab-status.crashed .dot { background: #f87171; }
  .wt-dash-tab-divider { width: 1px; height: 20px; background: rgb(var(--color-ink-600) / 0.6); flex-shrink: 0; }
  /* Legacy header status pill (kept for backward compat) */
  .wt-dash-status-pill {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 1rem; border-radius: 20px;
    font-size: 0.9rem; font-weight: 600; text-transform: capitalize;
  }
  .wt-dash-status-pill.running { background: rgba(22,179,100,0.5); border: 1px solid rgba(22,179,100,0.6); color: #fff; }
  .wt-dash-status-pill.stopped { background: rgba(107,114,128,0.4); border: 1px solid rgba(107,114,128,0.5); color: #d1d5db; }
  .wt-dash-status-pill.starting { background: rgba(245,158,11,0.5); border: 1px solid rgba(245,158,11,0.6); color: #fff; }
  .wt-dash-status-pill.stopping { background: rgba(245,158,11,0.5); border: 1px solid rgba(245,158,11,0.6); color: #fff; }
  .wt-dash-status-pill .dot { width: 8px; height: 8px; border-radius: 50%; }
  .wt-dash-status-pill.running .dot { background: rgb(var(--color-accent)); animation: wtPulse 1.5s ease-in-out infinite; }
  .wt-dash-status-pill.stopped .dot { background: #6b7280; }
  .wt-dash-status-pill.starting .dot { background: #fbbf24; animation: wtPulse 1s ease-in-out infinite; }
  .wt-dash-status-pill.stopping .dot { background: #fbbf24; animation: wtPulse 1s ease-in-out infinite; }
  @keyframes wtPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
  @keyframes wtSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

  /* Monitor bar */
  .wt-dash-monitor {
    display: flex; align-items: stretch; border-top: 1px solid var(--app-border);
    background: rgb(var(--color-ink-800) / 1); flex-shrink: 0; overflow: hidden;
  }
  .wt-dash-mon-divider { width: 1px; background: var(--app-border); flex-shrink: 0; }
  .wt-dash-mon-item { padding: 0.4rem 0.6rem; display: flex; flex-direction: column; gap: 0.15rem; flex-shrink: 0; }
  .wt-dash-mon-label { font-size: 0.62rem; color: rgb(var(--color-ink-500)); text-transform: uppercase; letter-spacing: 0.05em; }
  .wt-dash-mon-value { font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
  .wt-dash-mon-bar { height: 3px; border-radius: 2px; background: rgb(var(--color-ink-900)); overflow: hidden; }
  .wt-dash-mon-bar-fill { height: 100%; border-radius: 2px; transition: width 0.5s; }
  .wt-dash-mon-spark { padding: 0.4rem 0.6rem; display: flex; flex-direction: column; gap: 0.1rem; min-width: 100px; flex: 1 1 0; overflow: hidden; }
  .wt-dash-mon-spark svg { width: 100%; height: 24px; }

  /* Tabs (matches ServerView tab bar) */
  .wt-dash-tabs { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem 0.5rem; border-bottom: 1px solid var(--app-border); background: rgb(var(--color-ink-800) / 1); flex-shrink: 0; overflow-x: auto; }
  .wt-dash-tab { font-size: 0.875rem; font-weight: 500; padding: 0.5rem 1.25rem; border-radius: 8px; color: rgb(var(--color-ink-200)); cursor: pointer; transition: all 0.15s; border: 1px solid rgb(var(--color-ink-600)); background: rgb(var(--color-button-bg, var(--color-ink-700))); white-space: nowrap; min-width: 96px; text-align: center; }
  .wt-dash-tab:hover { filter: brightness(1.2); }
  .wt-dash-tab.active { background: rgb(var(--color-brand-500)); color: #fff; border-color: transparent; }
  .wt-dash-tab-controls { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
  .wt-dash-ctrl-btn { width: 36px; height: 36px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; border: none; padding: 0; transition: all 0.15s; }
  .wt-dash-ctrl-btn:hover { filter: brightness(1.15); }
  .wt-dash-ctrl-btn.start { background: #059669; }
  .wt-dash-ctrl-btn.start:hover { background: #10b981; }
  .wt-dash-ctrl-btn.start svg { width: 16px; height: 16px; }
  .wt-dash-ctrl-btn.stop { background: #dc2626; }
  .wt-dash-ctrl-btn.stop:hover { background: #ef4444; }
  .wt-dash-ctrl-btn.stop svg { width: 14px; height: 14px; }
  .wt-dash-ctrl-btn.restart { background: #d97706; }
  .wt-dash-ctrl-btn.restart:hover { background: #f59e0b; }
  .wt-dash-ctrl-btn.restart svg { width: 16px; height: 16px; }
  .wt-dash-ctrl-btn.disabled { opacity: 0.3; pointer-events: none; }

  /* Content area — wrapped in Card-like container matching main app */
  .wt-dash-content { flex: 1; display: flex; overflow: hidden; padding: 0.5rem; background: transparent; gap: 0; }
  .wt-dash-content-inner { flex: 1; display: flex; overflow: hidden; border: 2px solid var(--app-border); border-radius: 12px; background: rgb(var(--color-ink-800) / 1); box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
  .wt-dash-content-inner > * { padding: 1.25rem; }
  .wt-dash-content-inner > .wt-dash-console-wrap { flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 1.25rem; }
  .wt-dash-content-inner > .wt-dash-console-wrap + .wt-dash-players { width: 220px; flex-shrink: 0; padding: 1.25rem 1.25rem 1.25rem 0; }
  .wt-dash-content-inner > .wt-props-wrap { flex: 1 1 0; min-width: 0; overflow-y: auto; }
  .wt-dash-content-inner > .wt-players-wrap { flex: 1 1 0; min-width: 0; overflow-y: auto; }
  .wt-dash-content-inner > .wt-bak-wrap { flex: 1 1 0; min-width: 0; overflow-y: auto; }
  .wt-dash-content-inner > .wt-files-wrap { flex: 1 1 0; min-width: 0; overflow-y: auto; }
  .wt-dash-content-inner > .wt-settings-scroll { flex: 1 1 0; min-width: 0; overflow-y: auto; }
  @media (max-width: 700px) { .wt-dash-content-inner { flex-direction: column; } .wt-dash-content-inner > .wt-dash-console-wrap + .wt-dash-players { width: 100%; } }

  /* Settings page */
  .wt-settings-scroll { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 1.25rem; }
  .wt-settings-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.25rem; align-items: stretch; }
  @media (max-width: 1100px) { .wt-settings-grid3 { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 700px) { .wt-settings-grid3 { grid-template-columns: 1fr; } }
  .wt-set-card { background: rgb(var(--nested-card-bg, var(--color-ink-800))); border-radius: 12px; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.5); border: 2px solid var(--app-border); }
  .wt-set-card-title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; color: rgb(var(--color-ink-200)); margin-bottom: 0.5rem; }
  .wt-set-card-title svg { color: rgb(var(--color-brand-400)); }
  .wt-set-field { display: flex; flex-direction: column; gap: 0.25rem; }
  .wt-set-field-label { font-size: 0.75rem; color: rgb(var(--color-ink-300)); }
  .wt-set-input { width: 100%; border-radius: 8px; border: 1px solid rgb(var(--color-ink-600)); background: rgb(var(--color-ink-900)); padding: 0.5rem 0.75rem; font-size: 0.875rem; color: rgb(var(--color-ink-200)); outline: none; }
  .wt-set-input:focus { border-color: rgb(var(--color-brand-500)); }
  .wt-set-input:disabled { opacity: 0.4; }
  .wt-set-row { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0; }
  .wt-set-checkbox { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: rgb(var(--color-ink-200)); }
  .wt-set-checkbox input { width: 16px; height: 16px; accent-color: rgb(var(--color-brand-500)); }
  .wt-set-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 8px; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; border: none; transition: all 0.15s; background: rgb(var(--color-brand-500)); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.5); }
  .wt-set-btn:hover { filter: brightness(1.15); }
  .wt-set-btn:disabled { opacity: 0.4; cursor: not-allowed; }
  .wt-set-btn.secondary { background: rgb(var(--color-ink-600)); color: rgb(var(--color-ink-200)); }
  .wt-set-btn.danger { background: rgba(220,38,38,0.1); border: 1px solid rgba(220,38,38,0.4); color: #f87171; box-shadow: none; }
  .wt-set-btn.danger:hover { background: rgba(220,38,38,0.2); }
  .wt-set-info-tip { display: inline-flex; align-items: center; cursor: help; color: rgb(var(--color-ink-500)); }
  .wt-set-toggle { position: relative; display: inline-flex; height: 20px; width: 36px; align-items: center; border-radius: 9999px; transition: background 0.15s; background: rgb(var(--color-ink-600)); cursor: pointer; border: none; }
  .wt-set-toggle.on { background: #10b981; }
  .wt-set-toggle span { position: absolute; left: 2px; height: 14px; width: 14px; border-radius: 9999px; background: #fff; transition: transform 0.15s; }
  .wt-set-toggle.on span { transform: translateX(16px); }
  .wt-set-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .wt-set-cpu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-bottom: 0.5rem; }
  .wt-set-cpu-core { border-radius: 4px; border: 1px solid rgb(var(--color-ink-600)); background: rgba(80,80,80,0.5); color: rgb(var(--color-ink-200)); font-size: 0.75rem; font-weight: 500; padding: 4px 2px; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center; }
  .wt-set-cpu-core.on { border-color: rgb(var(--color-brand-500)); background: rgb(var(--color-brand-500) / 0.1); color: rgb(var(--color-brand-400)); }
  .wt-set-cpu-core:hover { background: rgba(80,80,80,0.8); }
  .wt-set-cpu-all { border-radius: 4px; border: 1px solid rgb(var(--color-ink-600)); background: rgba(80,80,80,0.5); color: rgb(var(--color-ink-200)); font-size: 0.625rem; font-weight: 500; padding: 2px 8px; cursor: pointer; transition: all 0.15s; }
  .wt-set-cpu-all.on { border-color: rgb(var(--color-brand-500)); background: rgb(var(--color-brand-500) / 0.1); color: rgb(var(--color-brand-400)); }
  .wt-set-mode-btn { flex: 1; border-radius: 8px; border: 1px solid rgb(var(--color-ink-600)); background: rgba(80,80,80,0.5); color: rgb(var(--color-ink-200)); font-size: 0.75rem; font-weight: 500; padding: 6px 8px; cursor: pointer; transition: all 0.15s; }
  .wt-set-mode-btn.on { border-color: rgb(var(--color-brand-500)); background: rgb(var(--color-brand-500) / 0.1); color: rgb(var(--color-brand-400)); }
  .wt-set-mode-btn:hover { background: rgba(80,80,80,0.8); }
  .wt-set-upnp-row { display: flex; align-items: center; gap: 0.5rem; border-radius: 8px; padding: 0.5rem 0.75rem; background: rgb(var(--color-ink-900)); }
  .wt-set-upnp-label { font-size: 0.75rem; font-weight: 500; color: rgb(var(--color-ink-200)); }
  .wt-set-upnp-hint { font-size: 0.625rem; color: rgb(var(--color-ink-500)); }
  .wt-set-delete-zone { border-top: 1px solid var(--app-border); padding-top: 1rem; margin-top: 1rem; display: flex; align-items: center; justify-content: space-between; }
  .wt-set-delete-title { font-size: 0.875rem; font-weight: 500; color: #f87171; display: flex; align-items: center; gap: 0.5rem; }
  .wt-set-delete-desc { font-size: 0.75rem; color: rgb(var(--color-ink-500)); margin-top: 0.25rem; }
  .wt-set-banner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.5rem; }
  .wt-set-banner-label { font-size: 0.625rem; font-weight: 500; color: rgb(var(--color-ink-200)); }
  .wt-set-banner-sub { font-size: 0.563rem; color: rgb(var(--color-ink-500)); }
  .wt-set-banner-upload { display: flex; width: 100%; align-items: center; justify-content: center; gap: 0.25rem; border-radius: 6px; border: 1px dashed rgb(var(--color-ink-600)); padding: 0.625rem 0.5rem; font-size: 0.625rem; color: rgb(var(--color-ink-500)); cursor: pointer; transition: all 0.15s; }
  .wt-set-banner-upload:hover { border-color: rgb(var(--color-ink-400)); color: rgb(var(--color-ink-200)); }

  /* ── Player Management Tab ── */
  .wt-pm-wrap { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 1.25rem; }
  .wt-pm-header { display: flex; align-items: center; justify-content: space-between; }
  .wt-pm-title { font-size: 1.125rem; font-weight: 600; color: rgb(var(--color-ink-100)); margin: 0; }
  .wt-pm-refresh-btn { display: flex; align-items: center; gap: 0.5rem; border-radius: 8px; border: 1px solid rgb(var(--color-ink-600)); background: rgb(var(--color-ink-600)); color: rgb(var(--color-ink-100)); font-size: 0.875rem; font-weight: 500; padding: 0.5rem 0.875rem; cursor: pointer; }
  .wt-pm-refresh-btn:hover { background: rgb(var(--color-ink-500)); }
  .wt-pm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  @media (max-width: 900px) { .wt-pm-grid { grid-template-columns: 1fr; } }
  .wt-pm-card { border: 2px solid var(--app-border); border-radius: 12px; background: rgb(var(--nested-card-bg, var(--color-ink-800))); padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
  .wt-pm-card-title { display: flex; align-items: center; gap: 0.5rem; }
  .wt-pm-card-title h3 { font-size: 0.875rem; font-weight: 500; color: rgb(var(--color-ink-100)); margin: 0; }
  .wt-pm-count { margin-left: auto; font-size: 0.75rem; color: rgb(var(--color-ink-400)); }
  .wt-pm-empty { font-size: 0.875rem; color: rgb(var(--color-ink-400)); margin: 0; }
  .wt-pm-toggle-row { display: flex; gap: 0.5rem; }
  .wt-pm-toggle-btn { flex: 1; border-radius: 8px; border: 1px solid rgb(var(--color-ink-600)); background: rgb(30, 30, 30); color: rgb(var(--color-ink-400)); font-size: 0.75rem; font-weight: 500; padding: 0.5rem 0.75rem; cursor: pointer; transition: all 0.15s; }
  .wt-pm-toggle-btn:hover { background: rgb(var(--color-ink-700)); }
  .wt-pm-toggle-btn.on { border-color: rgba(52,211,153,0.4); background: rgba(52,211,153,0.1); color: #34d399; }
  .wt-pm-list { max-height: 160px; overflow-y: auto; border: 1px solid var(--app-border); border-radius: 10px; background: rgb(30, 30, 30); }
  .wt-pm-row { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--app-border); }
  .wt-pm-row:last-child { border-bottom: none; }
  .wt-pm-row:hover { background: rgba(255,255,255,0.03); }
  .wt-pm-row-name { font-size: 0.875rem; color: rgb(var(--color-ink-100)); display: flex; align-items: center; gap: 0.5rem; }
  .wt-pm-row-sub { font-size: 0.75rem; color: rgb(var(--color-ink-500)); }
  .wt-pm-row-action { color: rgb(var(--color-ink-400)); background: none; border: none; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0.25rem; border-radius: 4px; }
  .wt-pm-row-action:hover { color: #f87171; }
  .wt-pm-row-action.unban { color: #34d399; }
  .wt-pm-row-action.unban:hover { color: #6ee7b7; }
  .wt-pm-dot { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--color-ink-500)); display: inline-block; }
  .wt-pm-tag { font-size: 0.7rem; font-weight: 600; }
  .wt-pm-tag.wl { color: rgb(var(--color-brand-400)); }
  .wt-pm-tag.op { color: #fbbf24; }
  .wt-pm-tag.banned { color: #f87171; }
  .wt-pm-add-row { display: flex; gap: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--app-border); }
  .wt-pm-add-input { flex: 1; border-radius: 8px; border: 1px solid rgb(var(--color-ink-600)); background: rgb(30, 30, 30); padding: 0.4rem 0.6rem; font-size: 0.875rem; color: rgb(var(--color-ink-200)); outline: none; }
  .wt-pm-add-input:focus { border-color: rgb(var(--color-brand-500)); }
  .wt-pm-add-btn { border-radius: 8px; border: 1px solid rgb(var(--color-ink-600)); background: rgb(var(--color-ink-600)); color: rgb(var(--color-ink-100)); font-size: 0.875rem; font-weight: 500; padding: 0.4rem 0.75rem; cursor: pointer; display: flex; align-items: center; gap: 0.25rem; }
  .wt-pm-add-btn:hover { background: rgb(var(--color-ink-500)); }

  /* ── Players Tab (legacy, used by Properties custom-add row) ── */
  .wt-players-wrap { flex: 1; overflow-y: auto; padding: 0.6rem; display: flex; flex-direction: column; gap: 0.75rem; }
  .wt-players-subtabs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .wt-players-subtab { border-radius: 8px; padding: 0.375rem 0.75rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; border: none; transition: all 0.15s; background: rgb(var(--color-ink-700)); color: rgb(var(--color-ink-300)); }
  .wt-players-subtab.active { background: rgb(var(--color-brand-500)); color: #fff; }
  .wt-players-subtab:hover:not(.active) { background: rgb(var(--color-ink-600)); color: rgb(var(--color-ink-200)); }
  .wt-players-add-row { display: flex; gap: 0.5rem; }
  .wt-players-add-input { flex: 1; border-radius: 8px; border: 1px solid rgb(var(--color-ink-600)); background: rgb(var(--color-ink-900)); padding: 0.4rem 0.6rem; font-size: 0.875rem; color: rgb(var(--color-ink-200)); outline: none; }
  .wt-players-add-input:focus { border-color: rgb(var(--color-brand-500)); }
  .wt-players-add-btn { border-radius: 8px; border: 1px solid rgb(var(--color-ink-600)); background: rgb(var(--color-ink-600)); color: rgb(var(--color-ink-200)); font-size: 0.875rem; font-weight: 500; padding: 0.4rem 0.75rem; cursor: pointer; display: flex; align-items: center; gap: 0.25rem; }
  .wt-players-add-btn:hover { background: rgb(var(--color-ink-500)); }
  .wt-players-running-hint { font-size: 0.75rem; color: #38bdf8; display: flex; align-items: center; gap: 0.3rem; }
  .wt-players-list { border: 2px solid var(--app-border); border-radius: 12px; background: rgb(var(--color-ink-800) / 0.7); overflow: hidden; }
  .wt-players-list-item { display: flex; align-items: center; justify-content: space-between; padding: 0.625rem 1rem; border-bottom: 1px solid rgb(var(--color-ink-700)); }
  .wt-players-list-item:last-child { border-bottom: none; }
  .wt-players-list-name { font-family: 'Cascadia Code', 'Consolas', monospace; font-size: 0.875rem; color: rgb(var(--color-ink-100)); }
  .wt-players-list-empty { padding: 0.75rem 1rem; font-size: 0.875rem; color: rgb(var(--color-ink-300)); }
  .wt-players-trash { color: rgb(var(--color-ink-400)); cursor: pointer; background: none; border: none; padding: 0.25rem; border-radius: 4px; }
  .wt-players-trash:hover { color: #f87171; background: rgba(248,113,113,0.1); }
  .wt-players-footer { display: flex; align-items: center; justify-content: space-between; }
  .wt-players-msg { font-size: 0.875rem; color: rgb(var(--color-brand-400)); }
  .wt-players-save-btn { border-radius: 8px; border: none; background: rgb(var(--color-brand-500)); color: #fff; font-size: 0.875rem; font-weight: 600; padding: 0.4rem 0.75rem; cursor: pointer; display: flex; align-items: center; gap: 0.25rem; }
  .wt-players-save-btn:hover { filter: brightness(1.15); }

  /* ── Properties Tab ── */
  .wt-props-wrap { flex: 1 1 0; min-width: 0; overflow-y: auto; padding: 0.6rem; display: flex; flex-direction: column; gap: 0.75rem; }
  .wt-props-top-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  @media (max-width: 700px) { .wt-props-top-grid { grid-template-columns: 1fr; } }
  .wt-props-motd-card { border: 2px solid var(--app-border); border-radius: 10px; background: rgb(var(--nested-card-bg, var(--color-ink-800))); padding: 0.75rem; display: flex; flex-direction: column; gap: 0.4rem; }
  .wt-props-motd-title { font-size: 0.875rem; font-weight: 600; color: rgb(var(--color-ink-200)); display: flex; align-items: center; gap: 0.4rem; }
  .wt-props-motd-title svg { color: rgb(var(--color-brand-400)); }
  .wt-props-motd-input { border-radius: 8px; border: 1px solid rgb(var(--color-ink-600)); background: rgb(var(--color-ink-900)); padding: 0.4rem 0.6rem; font-size: 0.875rem; color: rgb(var(--color-ink-200)); outline: none; }
  .wt-props-motd-input:focus { border-color: rgb(var(--color-brand-500)); }
  .wt-props-motd-hint { font-size: 0.875rem; color: rgb(var(--color-ink-500)); }
  .wt-props-savebar { border: 2px solid var(--app-border); border-radius: 10px; background: rgb(var(--nested-card-bg, var(--color-ink-800))); padding: 0.6rem 0.75rem; display: flex; flex-direction: column; gap: 0.4rem; box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
  .wt-props-savebar-hint { font-size: 0.875rem; color: rgb(var(--color-ink-500)); }
  .wt-props-savebar-hint code { color: rgb(var(--color-ink-200)); font-family: monospace; }
  .wt-props-savebar-row { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; }
  .wt-props-savebar-msg { font-size: 0.875rem; color: rgb(var(--color-brand-400)); margin-right: auto; }
  .wt-props-restart-btn { border-radius: 6px; border: none; background: #d97706; color: #fff; font-size: 0.875rem; font-weight: 500; padding: 0.375rem 0.625rem; cursor: pointer; display: flex; align-items: center; gap: 0.25rem; }
  .wt-props-restart-btn:hover { background: #f59e0b; }
  .wt-props-save-btn { border-radius: 8px; border: none; background: rgb(var(--color-brand-500)); color: #fff; font-size: 0.875rem; font-weight: 600; padding: 0.375rem 0.625rem; cursor: pointer; display: flex; align-items: center; gap: 0.25rem; }
  .wt-props-save-btn:hover { filter: brightness(1.15); }
  .wt-props-section { border: 2px solid var(--app-border); border-radius: 10px; background: rgb(var(--nested-card-bg, var(--color-ink-800))); overflow: visible; }
  .wt-props-section-header { display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--app-border); background: rgba(0,0,0,0.25); }
  .wt-props-section-header svg { color: rgb(var(--color-brand-400)); }
  .wt-props-section-header h3 { font-size: 0.875rem; font-weight: 600; color: rgb(var(--color-ink-200)); }
  .wt-props-field-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; min-width: 0; }
  .wt-props-field { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--app-border); border-right: 1px solid var(--app-border); min-width: 0; }
  .wt-props-field:nth-child(3n) { border-right: none; }
  .wt-props-field:last-child { border-bottom: none; }
  .wt-props-field-label { font-size: 0.75rem; color: rgb(var(--color-ink-200)); flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .wt-props-field-control { width: 100%; }
  .wt-props-input { width: 100%; max-width: 120px; border-radius: 6px; border: 1px solid rgb(var(--color-ink-600)); background: rgb(var(--color-ink-900)); padding: 0.25rem 0.4rem; font-size: 0.75rem; color: rgb(var(--color-ink-200)); outline: none; }
  .wt-props-input:focus { border-color: rgb(var(--color-brand-500)); }
  .wt-props-select { width: 100%; max-width: 120px; border-radius: 6px; border: 1px solid rgb(var(--color-ink-600)); background: rgb(var(--color-ink-900)); padding: 0.25rem 0.4rem; font-size: 0.75rem; color: rgb(var(--color-ink-200)); outline: none; }
  .wt-props-select:focus { border-color: rgb(var(--color-brand-500)); }
  .wt-props-toggle { position: relative; display: inline-flex; height: 20px; width: 36px; align-items: center; border-radius: 999px; border: none; cursor: pointer; transition: background 0.15s; flex-shrink: 0; }
  .wt-props-toggle.on { background: #10b981; }
  .wt-props-toggle.off { background: rgb(var(--color-ink-600)); }
  .wt-props-toggle-knob { display: inline-block; height: 14px; width: 14px; border-radius: 999px; background: #fff; transition: transform 0.15s; }
  .wt-props-toggle.on .wt-props-toggle-knob { transform: translateX(18px); }
  .wt-props-toggle.off .wt-props-toggle-knob { transform: translateX(2px); }
  .wt-props-custom-card { border: 2px solid var(--app-border); border-radius: 10px; background: rgb(var(--nested-card-bg, var(--color-ink-800))); overflow: hidden; }
  .wt-props-custom-header { display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--app-border); background: rgba(0,0,0,0.25); }
  .wt-props-custom-header svg { color: #fbbf24; }
  .wt-props-custom-header h3 { font-size: 0.875rem; font-weight: 600; color: rgb(var(--color-ink-200)); }
  .wt-props-custom-tag { font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #fbbf24; background: rgba(217,119,6,0.2); border-radius: 4px; padding: 0.125rem 0.375rem; flex-shrink: 0; }
  .wt-props-custom-label { font-family: 'Cascadia Code', 'Consolas', monospace; font-size: 0.875rem; color: rgb(var(--color-ink-400)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wt-props-add-card { border: 2px solid var(--app-border); border-radius: 10px; background: rgb(var(--nested-card-bg, var(--color-ink-800))); padding: 0.75rem; }
  .wt-props-add-label { font-size: 0.875rem; color: rgb(var(--color-ink-500)); margin-bottom: 0.4rem; }

  /* ── Backups Tab ── */
  .wt-bak-wrap { flex: 1; overflow-y: auto; padding: 0.6rem; display: flex; flex-direction: column; gap: 0.75rem; }
  .wt-bak-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  @media (max-width: 700px) { .wt-bak-grid { grid-template-columns: 1fr; } }
  .wt-bak-left { display: flex; flex-direction: column; gap: 0.75rem; }
  .wt-bak-card { border: 2px solid var(--app-border); border-radius: 12px; background: rgb(var(--nested-card-bg, var(--color-ink-800))); padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
  .wt-bak-card-title { font-size: 0.875rem; font-weight: 600; color: rgb(var(--color-ink-200)); display: flex; align-items: center; gap: 0.4rem; }
  .wt-bak-card-title svg { color: rgb(var(--color-brand-400)); }
  .wt-bak-card-title .info-tip { color: rgb(var(--color-ink-500)); cursor: help; font-size: 0.7rem; }
  .wt-bak-divider { border-top: 1px solid var(--app-border); margin: 0; }
  .wt-bak-backup-btn { width: 100%; border-radius: 8px; border: none; background: rgb(var(--color-brand-500)); color: #fff; font-size: 0.875rem; font-weight: 600; padding: 0.5rem 0.75rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.3rem; }
  .wt-bak-backup-btn:hover { filter: brightness(1.15); }
  .wt-bak-dir-input { width: 100%; border-radius: 8px; border: 1px solid rgb(var(--color-ink-600)); background: rgb(var(--color-ink-900)); padding: 0.4rem 0.6rem; font-family: 'Cascadia Code', 'Consolas', monospace; font-size: 0.75rem; color: rgb(var(--color-ink-200)); outline: none; }
  .wt-bak-dir-input:focus { border-color: rgb(var(--color-brand-500)); }
  .wt-bak-save-btn { border-radius: 8px; border: none; background: rgb(var(--color-brand-500)); color: #fff; font-size: 0.75rem; font-weight: 500; padding: 0.375rem 0.625rem; cursor: pointer; display: flex; align-items: center; gap: 0.25rem; }
  .wt-bak-save-btn:hover { filter: brightness(1.15); }
  .wt-bak-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }
  .wt-bak-retention-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .wt-bak-retention-card { border: 2px solid var(--app-border); border-radius: 10px; background: rgb(var(--nested-card-bg, var(--color-ink-800))); padding: 0.75rem; display: flex; flex-direction: column; gap: 0.4rem; }
  .wt-bak-retention-card .wt-bak-card-title svg { color: #34d399; }
  .wt-bak-retention-card.auto .wt-bak-card-title svg { color: #c084fc; }
  .wt-bak-retention-row { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
  .wt-bak-retention-select { border-radius: 8px; border: 1px solid rgb(var(--color-ink-600)); background: rgb(var(--color-ink-900)); padding: 0.25rem 0.4rem; font-size: 0.75rem; color: rgb(var(--color-ink-200)); outline: none; flex-shrink: 0; }
  .wt-bak-retention-text { font-size: 0.75rem; color: rgb(var(--color-ink-500)); flex-shrink: 0; }
  .wt-bak-upload-card { border: 2px solid var(--app-border); border-radius: 12px; background: rgb(var(--nested-card-bg, var(--color-ink-800))); padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
  .wt-bak-file-input { width: 100%; font-size: 0.875rem; color: rgb(var(--color-ink-400)); cursor: pointer; }
  .wt-bak-file-input::-webkit-file-upload-button { margin-right: 0.75rem; padding: 0.375rem 0.625rem; border-radius: 8px; border: none; background: rgb(var(--color-brand-500)); color: #fff; font-size: 0.875rem; font-weight: 500; cursor: pointer; }
  .wt-bak-file-input::-webkit-file-upload-button:hover { filter: brightness(1.15); }
  .wt-bak-upload-hint { font-size: 0.75rem; color: rgb(var(--color-ink-500)); }
  .wt-bak-right { border: 2px solid var(--app-border); border-radius: 12px; background: rgb(var(--nested-card-bg, var(--color-ink-800))); padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
  .wt-bak-right-header { display: flex; align-items: center; justify-content: space-between; }
  .wt-bak-right-title { font-size: 0.875rem; font-weight: 600; color: rgb(var(--color-ink-200)); display: flex; align-items: center; gap: 0.4rem; }
  .wt-bak-right-title svg { color: rgb(var(--color-brand-400)); }
  .wt-bak-right-actions { display: flex; align-items: center; gap: 0.4rem; }
  .wt-bak-action-btn { border-radius: 6px; border: 1px solid rgb(var(--color-ink-600)); background: transparent; color: rgb(var(--color-ink-400)); font-size: 0.75rem; padding: 0.25rem 0.5rem; cursor: pointer; display: flex; align-items: center; gap: 0.25rem; }
  .wt-bak-action-btn:hover { background: rgb(var(--color-ink-600)); color: rgb(var(--color-ink-200)); }
  .wt-bak-list { max-height: 600px; overflow-y: auto; border: 1px solid var(--app-border); border-radius: 10px; background: rgb(30, 30, 30); }
  .wt-bak-list-item { display: flex; align-items: center; justify-content: space-between; padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--app-border); background: rgb(30, 30, 30); }
  .wt-bak-list-item:last-child { border-bottom: none; }
  .wt-bak-list-item:hover { background: rgba(255,255,255,0.03); }
  .wt-bak-list-name { font-size: 0.875rem; font-weight: 500; color: rgb(var(--color-ink-200)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; }
  .wt-bak-list-meta { font-size: 0.75rem; color: rgb(var(--color-ink-500)); }
  .wt-bak-list-actions { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
  .wt-bak-restore-btn { border-radius: 6px; border: 1px solid rgb(var(--color-ink-600)); background: transparent; color: rgb(var(--color-ink-200)); font-size: 0.75rem; padding: 0.25rem 0.5rem; cursor: pointer; display: flex; align-items: center; gap: 0.25rem; }
  .wt-bak-restore-btn:hover { background: rgb(var(--color-ink-600)); }
  .wt-bak-delete-btn { border-radius: 6px; border: none; background: none; color: rgb(var(--color-ink-500)); padding: 0.25rem; cursor: pointer; }
  .wt-bak-delete-btn:hover { color: #f87171; background: rgba(248,113,113,0.1); }
  .wt-bak-empty { font-size: 0.875rem; color: rgb(var(--color-ink-500)); padding: 1rem 0; }

  /* ── Files Tab ── */
  .wt-files-wrap { flex: 1 1 0; min-width: 0; overflow-y: auto; padding: 0.6rem; display: flex; flex-direction: column; gap: 0.6rem; }
  .wt-files-subtabs { display: flex; gap: 0.4rem; }
  .wt-files-subtab { display: flex; align-items: center; gap: 0.3rem; border-radius: 8px; padding: 0.3rem 0.6rem; font-size: 0.75rem; font-weight: 500; cursor: pointer; border: 1px solid rgb(var(--color-ink-600)); background: rgb(var(--color-button-bg, var(--color-ink-700))); color: rgb(var(--color-ink-200)); transition: all 0.15s; }
  .wt-files-subtab.active { background: rgb(var(--color-brand-500)); color: #fff; border-color: transparent; }
  .wt-files-subtab:hover:not(.active) { filter: brightness(1.2); }
  .wt-files-card { border: 2px solid var(--app-border); border-radius: 10px; background: rgb(var(--color-ink-900)); overflow: hidden; display: flex; flex-direction: column; flex: 1; }
  .wt-files-pathbar { display: flex; align-items: center; gap: 0.4rem; border-bottom: 1px solid var(--app-border); padding: 0.4rem 0.6rem; }
  .wt-files-crumbs { display: flex; align-items: center; gap: 0.2rem; font-size: 0.75rem; overflow-x: auto; white-space: nowrap; }
  .wt-files-crumb { color: rgb(var(--color-brand-400)); cursor: pointer; text-decoration: none; flex-shrink: 0; }
  .wt-files-crumb:hover { text-decoration: underline; }
  .wt-files-crumb-sep { color: rgb(var(--color-ink-500)); flex-shrink: 0; }
  .wt-files-pathbar-actions { margin-left: auto; display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
  .wt-files-action-btn { border-radius: 6px; border: 1px solid rgb(var(--color-ink-600)); background: transparent; color: rgb(var(--color-ink-400)); font-size: 0.7rem; padding: 0.2rem 0.5rem; cursor: pointer; display: flex; align-items: center; gap: 0.25rem; }
  .wt-files-action-btn:hover { background: rgb(var(--color-ink-600)); color: rgb(var(--color-ink-200)); }
  .wt-files-refresh-btn { border-radius: 4px; border: none; background: none; color: rgb(var(--color-ink-500)); padding: 0.25rem; cursor: pointer; display: flex; align-items: center; }
  .wt-files-refresh-btn:hover { color: rgb(var(--color-ink-200)); background: rgb(var(--color-ink-600)); }
  .wt-files-table { width: 100%; font-size: 0.8rem; border-collapse: collapse; }
  .wt-files-table thead { position: sticky; top: 0; background: rgb(var(--color-ink-900)); z-index: 1; }
  .wt-files-table th { padding: 0.4rem 0.6rem; text-align: left; font-size: 0.7rem; font-weight: 500; color: rgb(var(--color-ink-500)); border-bottom: 1px solid var(--app-border); text-transform: uppercase; letter-spacing: 0.03em; }
  .wt-files-table td { padding: 0.4rem 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.03); }
  .wt-files-table tr { cursor: pointer; }
  .wt-files-table tr:hover { background: rgba(255,255,255,0.03); }
  .wt-files-name-cell { display: flex; align-items: center; gap: 0.4rem; }
  .wt-files-name-cell svg { flex-shrink: 0; }
  .wt-files-name { font-weight: 500; color: rgb(var(--color-ink-200)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wt-files-type { color: rgb(var(--color-ink-500)); font-size: 0.75rem; }
  .wt-files-size { color: rgb(var(--color-ink-500)); font-size: 0.75rem; white-space: nowrap; }
  .wt-files-modified { color: rgb(var(--color-ink-500)); font-size: 0.75rem; white-space: nowrap; }
  .wt-files-more-btn { border-radius: 4px; border: none; background: none; color: rgb(var(--color-ink-500)); padding: 0.2rem; cursor: pointer; opacity: 0.5; }
  .wt-files-table tr:hover .wt-files-more-btn { opacity: 1; }
  .wt-files-more-btn:hover { color: rgb(var(--color-ink-200)); background: rgb(var(--color-ink-600)); }
  .wt-files-empty { padding: 2rem; text-align: center; font-size: 0.85rem; color: rgb(var(--color-ink-500)); }
  .wt-dash-cmd-bar {
    display: flex; align-items: center; gap: 0.4rem; margin-top: 0.35rem;
    background: rgb(var(--color-ink-900)); border: 2px solid var(--app-border); border-radius: 10px;
    padding: 0.35rem 0.6rem; box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  }
  .wt-dash-cmd-prompt { color: rgb(var(--color-brand-400)); font-family: 'Cascadia Code', 'Consolas', monospace; font-size: 0.85rem; font-weight: 700; flex-shrink: 0; }
  .wt-dash-cmd-input {
    flex: 1; background: transparent; border: none; outline: none;
    color: rgb(var(--color-ink-300)); font-family: 'Cascadia Code', 'Consolas', monospace; font-size: 0.85rem;
  }
  .wt-dash-cmd-input::placeholder { color: rgb(var(--color-ink-500)); }
  .wt-dash-cmd-send {
    background: rgb(var(--color-brand-500) / 0.15); border: 1px solid rgb(var(--color-brand-500) / 0.3); color: rgb(var(--color-brand-400));
    border-radius: 4px; padding: 0.25rem 0.7rem; font-size: 0.8rem; font-weight: 600; cursor: pointer;
  }
  .wt-dash-cmd-send:hover { background: rgb(var(--color-brand-500) / 0.25); }

  .wt-dash-console-label { font-size: 0.85rem; font-weight: 600; color: rgb(var(--color-ink-300)); display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.3rem; }
  .wt-dash-console-label .dot { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--color-accent)); animation: wtPulse 1.5s ease-in-out infinite; }

  /* DeployCat App Console (above server console) */
  .wt-applog { background: rgb(var(--nested-card-bg, var(--color-ink-800))); border: 2px solid var(--app-border); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; margin-bottom: 0.5rem; flex-shrink: 0; max-height: 220px; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
  .wt-applog-header { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0.75rem; border-bottom: 1px solid var(--app-border); flex-shrink: 0; }
  .wt-applog-title { font-size: 0.75rem; font-weight: 600; color: rgb(var(--color-ink-200)); display: flex; align-items: center; gap: 0.4rem; }
  .wt-applog-title svg { color: rgb(var(--color-brand-400)); }
  .wt-applog-count { font-size: 0.625rem; color: rgb(var(--color-ink-500)); }
  .wt-applog-legend { display: flex; align-items: center; gap: 0.5rem; font-size: 0.563rem; }
  .wt-applog-legend span { display: flex; align-items: center; gap: 0.15rem; }
  .wt-applog-legend .dot-sm { width: 6px; height: 6px; border-radius: 2px; flex-shrink: 0; }
  .wt-applog-body { overflow-y: auto; padding: 0.4rem 0.6rem; font-family: 'Cascadia Code', 'Consolas', monospace; font-size: 0.688rem; line-height: 1.6; flex: 1; }
  .wt-applog-body::-webkit-scrollbar { width: 4px; }
  .wt-applog-body::-webkit-scrollbar-thumb { background: rgb(var(--color-ink-600)); border-radius: 2px; }
  .wt-applog-line { padding: 1px 0 1px 0.5rem; border-left: 2px solid transparent; white-space: pre-wrap; word-break: break-all; }
  .wt-applog-line .ts { color: rgb(var(--color-ink-500)); }
  .wt-applog-line .tag { font-weight: 600; }
  .wt-applog-line.setup { border-left-color: #10b981; background: rgba(16,185,129,0.05); }
  .wt-applog-line.setup .tag { color: #34d399; }
  .wt-applog-line.setup .msg { color: #6ee7b7; }
  .wt-applog-line.warn { border-left-color: #eab308; background: rgba(234,179,8,0.05); }
  .wt-applog-line.warn .tag { color: #facc15; }
  .wt-applog-line.warn .msg { color: #fde047; }
  .wt-applog-line.error { border-left-color: #ef4444; background: rgba(239,68,68,0.05); }
  .wt-applog-line.error .tag { color: #f87171; }
  .wt-applog-line.error .msg { color: #fca5a5; }
  .wt-applog-line.done { border-left-color: #a855f7; background: rgba(168,85,247,0.05); }
  .wt-applog-line.done .tag { color: #c084fc; }
  .wt-applog-line.done .msg { color: #d8b4fe; }
  .wt-applog-line.progress { border-left-color: #0ea5e9; background: rgba(14,165,233,0.05); }
  .wt-applog-line.progress .tag { color: #38bdf8; }
  .wt-applog-line.progress .msg { color: #7dd3fc; }
  .wt-applog-line.deploycat { border-left-color: #0ea5e9; background: rgba(14,165,233,0.05); }
  .wt-applog-line.deploycat .tag { color: #7dd3fc; }
  .wt-applog-line.deploycat .msg { color: #bae6fd; }
  .wt-applog-line.frontend { border-left-color: #ec4899; background: rgba(236,72,153,0.05); }
  .wt-applog-line.frontend .tag { color: #f472b6; }
  .wt-applog-line.frontend .msg { color: #f9a8d4; }
  .wt-applog-line.info { border-left-color: #6b7280; }
  .wt-applog-line.info .tag { color: #9ca3af; }
  .wt-applog-line.info .msg { color: rgb(var(--color-ink-200)); }
  .wt-applog-line.status { border-left-color: #eab308; background: rgba(234,179,8,0.05); }
  .wt-applog-line.status .tag { color: #fde047; }
  .wt-applog-line.status .msg { color: #fef08a; }
  .wt-applog-cursor { color: rgb(var(--color-brand-400)); animation: wtBlink 1s step-end infinite; }
  .wt-dash-console {
    background: rgb(var(--color-ink-900)); border: 2px solid var(--app-border); border-radius: 12px;
    padding: 0.7rem; font-family: 'Cascadia Code', 'Consolas', monospace; font-size: 0.85rem; line-height: 1.7;
    flex: 1; overflow-y: auto; min-height: 0; color: rgb(var(--color-ink-300));
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  }
  .wt-dash-console .log-line { padding: 1px 0; }
  .wt-dash-console .log-line.info { color: rgb(var(--color-ink-300)); }
  .wt-dash-console .log-line.warn { color: #fbbf24; }
  .wt-dash-console .log-line.error { color: #f87171; }
  .wt-dash-console .log-line.success { color: rgb(var(--color-accent)); }
  .wt-dash-console .log-line.DeployCat { color: #38bdf8; }
  .wt-dash-console .log-line .ts { color: rgb(var(--color-ink-500)); }
  .wt-dash-cursor { color: rgb(var(--color-brand-400)); animation: wtBlink 1s step-end infinite; }

  .wt-dash-players { display: flex; flex-direction: column; gap: 0.3rem; border: 2px solid var(--app-border); border-radius: 12px; background: rgb(var(--color-ink-800) / var(--card-opacity, 0.7)); padding: 0.6rem; overflow-y: auto; box-shadow: 0 4px 12px rgba(0,0,0,0.5); align-items: center; }
  .wt-dash-players-label { font-size: 0.85rem; font-weight: 600; color: rgb(var(--color-ink-300)); margin-bottom: 0.15rem; text-align: center; width: 100%; }
  .wt-dash-player {
    display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.5rem; border-radius: 6px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.04);
  }
  .wt-dash-player-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, rgb(var(--color-ink-600)), rgb(var(--color-ink-800))); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: rgb(var(--color-ink-300)); flex-shrink: 0; }
  .wt-dash-player-name { font-size: 0.85rem; color: rgb(var(--color-ink-200)); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wt-dash-player-ping { font-size: 0.75rem; color: rgb(var(--color-ink-500)); font-variant-numeric: tabular-nums; margin-left: auto; flex-shrink: 0; }
  .wt-dash-player-status { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--color-accent)); flex-shrink: 0; }

  @media (max-width: 768px) {
    .wt-app-sidebar { display: none; }
  }

  /* Game pills (sidebar game switcher) */
  .wt-pills { display: flex; gap: 0.3rem; flex-wrap: wrap; }
  .wt-pill { font-size: 0.6rem; padding: 0.2rem 0.5rem; border-radius: 6px; background: rgba(255,255,255,0.05); color: rgb(var(--color-ink-300)); cursor: pointer; transition: all 0.15s; border: 1px solid transparent; }
  .wt-pill.active { background: rgb(var(--color-brand-500) / 0.12); color: rgb(var(--color-brand-400)); border-color: rgb(var(--color-brand-500) / 0.3); }