:root {
      color-scheme: dark;
      --bg: #0b1120;
      --panel: #121b2e;
      --panel2: #17233a;
      --border: #293852;
      --text: #e8eef8;
      --muted: #9aabc4;
      --primary: #4385ff;
      --success: #22c55e;
      --danger: #ef4444;
      --warning: #f59e0b;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
      background: var(--bg);
      color: var(--text);
    }

    button, input { font: inherit; }

    button {
      border: 1px solid var(--border);
      background: var(--panel2);
      color: var(--text);
      border-radius: 9px;
      padding: 10px 15px;
      cursor: pointer;
      transition: background .15s ease, filter .15s ease;
    }

    button:hover:not(:disabled) { filter: brightness(1.15); }

    button:disabled {
      opacity: .45;
      cursor: not-allowed;
    }

    button.primary {
      background: var(--primary);
      border-color: var(--primary);
      color: white;
      font-weight: 700;
    }

    button.toggle-active {
      background: #7f1d1d;
      border-color: #ef4444;
      color: #fff;
    }

    button.toggle-pending {
      background: #78350f;
      border-color: #f59e0b;
      color: #fff;
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 17px 24px;
      border-bottom: 1px solid var(--border);
      background: #0e1728;
      flex-wrap: wrap;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .brand-icon {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      background: #1e3a70;
      font-size: 23px;
    }

    .brand h1 { margin: 0; font-size: 19px; }

    .brand p {
      margin: 3px 0 0;
      color: var(--muted);
      font-size: 12px;
    }

    .server-area {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 7px 12px;
      color: var(--muted);
      font-size: 12px;
      background: #101a2b;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #64748b;
      flex-shrink: 0;
    }

    .dot.online { background: var(--success); }
    .dot.connecting { background: var(--warning); }
    .dot.offline { background: var(--danger); }

    main {
      max-width: 1440px;
      margin: 0 auto;
      padding: 24px;
    }

    .page-heading { margin-bottom: 22px; }

    .page-heading h2 {
      margin: 0 0 6px;
      font-size: 25px;
    }

    .page-heading p {
      color: var(--muted);
      margin: 0;
      font-size: 14px;
    }

    .layout {
      display: grid;
      grid-template-columns: 330px minmax(0, 1fr);
      gap: 20px;
      align-items: start;
    }

    .panel {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 15px;
      overflow: hidden;
      min-width: 0;
    }

    .panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 16px 18px;
      border-bottom: 1px solid var(--border);
    }

    .panel-header h3 { margin: 0; font-size: 15px; }

    .panel-body { padding: 18px; }

    .field-label {
      display: block;
      font-size: 13px;
      color: #c8d4e6;
      margin-bottom: 8px;
    }

    .remote-input {
      width: 100%;
      padding: 15px;
      background: #0b1424;
      color: white;
      border: 1px solid #354967;
      border-radius: 10px;
      outline: none;
      font-size: 23px;
      font-weight: 700;
      letter-spacing: 5px;
      text-align: center;
    }

    .remote-input:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px #4385ff24;
    }

    .remote-input::placeholder {
      color: #56657d;
      letter-spacing: 3px;
    }

    .connect-main {
      width: 100%;
      margin-top: 12px;
      min-height: 47px;
      font-weight: 750;
    }

    .reconnect-main {
      width: 100%;
      margin-top: 8px;
      min-height: 43px;
      font-weight: 650;
    }

    .help-text {
      min-height: 36px;
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.6;
    }

    .workspace { min-width: 0; }

    .session-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding: 14px 17px;
      flex-wrap: wrap;
    }

    .session-title { font-size: 14px; font-weight: 650; }

    .session-subtitle {
      color: var(--muted);
      font-size: 12px;
      margin-top: 4px;
    }

    .session-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .screen {
      position: relative;
      width: 100%;
      min-height: 300px;
      aspect-ratio: 16 / 9;
      background: #05080e;
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    #remoteVideo {
      display: block;
      width: 100%;
      height: 100%;
      max-height: 72vh;
      object-fit: contain;
      background: #05080e;
    }

    .screen-placeholder {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 10px;
      padding: 24px;
      text-align: center;
      color: var(--muted);
      pointer-events: none;
    }

    .screen-placeholder.hidden { display: none; }
    .screen-icon { font-size: 42px; }

    .screen-placeholder strong {
      color: #dbe6f7;
      font-size: 15px;
    }

    .screen-placeholder span {
      font-size: 12px;
      line-height: 1.7;
    }

    #screen:fullscreen {
      width: 100vw;
      height: 100vh;
      min-height: 0;
      max-height: none;
      aspect-ratio: auto;
      border: 0;
      border-radius: 0;
      background: #000;
      overflow: hidden;
    }

    #screen:fullscreen #remoteVideo {
      width: 100%;
      height: 100%;
      max-height: none;
      object-fit: contain;
    }

    #screen:fullscreen .screen-placeholder {
      background: #05080e;
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      padding: 14px;
      border-top: 1px solid var(--border);
    }

    .stat {
      background: #0d1728;
      border: 1px solid var(--border);
      border-radius: 9px;
      padding: 11px;
      min-width: 0;
    }

    .stat-label { font-size: 11px; color: var(--muted); }

    .stat-value {
      margin-top: 5px;
      font-size: 13px;
      font-weight: 650;
      overflow-wrap: anywhere;
    }

    .debug-panel { margin-top: 20px; min-width: 0; }
    .debug-panel .panel-header { flex-wrap: wrap; }

    .debug-panel .panel-header h3 {
      flex: 1 1 auto;
      min-width: 100px;
    }

    .debug-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
      flex: 0 0 auto;
    }

    #copyDebugBtn, #clearLogBtn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 38px;
      padding: 9px 12px;
      font-size: 12px;
      line-height: 1.4;
      white-space: nowrap;
    }

    #copyDebugBtn {
      color: #fff;
      background: #2563eb;
      border: 1px solid #4385ff;
      font-weight: 750;
      box-shadow: 0 2px 8px #0003;
    }

    #copyDebugBtn:hover:not(:disabled) { background: #1d4ed8; }

    #copyDebugBtn.copied {
      background: #166534;
      border-color: #22c55e;
    }

    #clearLogBtn {
      background: #17233a;
      border-color: var(--border);
    }

    .debug-log {
      background: #070c15;
      color: #b9c9df;
      padding: 13px 16px;
      height: 200px;
      overflow-y: auto;
      font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
      font-size: 11px;
      line-height: 1.7;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      user-select: text;
      -webkit-user-select: text;
    }

    .log-error { color: #fca5a5; }
    .log-success { color: #86efac; }
    .log-warn { color: #fcd34d; }

    .footer {
      margin-top: 20px;
      color: #64748b;
      font-size: 11px;
      text-align: center;
    }

    @media (max-width: 900px) {
      main { padding: 15px; }
      .layout { grid-template-columns: 1fr; }
      .screen { min-height: 220px; }
    }

    @media (max-width: 520px) {
      .topbar { padding: 14px; }
      .brand h1 { font-size: 16px; }
      .page-heading h2 { font-size: 21px; }
      .stats { grid-template-columns: 1fr; }
      .session-bar { align-items: flex-start; }

      .debug-panel .panel-header {
        align-items: flex-start;
        gap: 12px;
        padding: 13px;
      }

      .debug-panel .panel-header h3 { flex: 1 1 100%; }
      .debug-actions { width: 100%; gap: 8px; }

      #copyDebugBtn, #clearLogBtn {
        flex: 1 1 0;
        min-width: 0;
        padding: 10px 6px;
        font-size: 12px;
      }

      .debug-log {
        height: 200px;
        padding: 12px;
        font-size: 11px;
      }

      .session-actions { width: 100%; }
      .session-actions button { flex: 1; }
    }