:root {
  --c-bg: #020617; --c-surface: #0f172a; --c-card: #1e293b; --c-card-h: #243447;
  --c-border: #334155; --c-border-l: #475569; --c-focus: #60a5fa;
  --c-text: #e2e8f0; --c-text-s: #94a3b8; --c-text-m: #64748b; --c-white: #fff;
  --c-primary: #2563eb; --c-primary-h: #1d4ed8; --c-primary-l: #1e3a8a;
  --c-success: #22c55e; --c-warn: #f59e0b; --c-danger: #ef4444; --c-info: #60a5fa;
  --sp-xs: 4px; --sp-sm: 8px; --sp-md: 12px; --sp-lg: 16px; --sp-xl: 20px; --sp-2xl: 24px;
  --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 12px;
  --f-sm: 12px; --f-md: 13px; --f-lg: 14px; --f-xl: 15px; --f-2xl: 16px; --f-3xl: 18px;
}
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #0f172a;
      color: #e2e8f0;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    .header {
      background: #1e293b;
      padding: 16px 24px;
      border-bottom: 1px solid #334155;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
    }
    .header h1 { font-size: 18px; font-weight: 600; color: #fff; }
    .header .brand { color: #60a5fa; font-weight: 700; }
    .device-bar {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .device-combo {
      display: inline-flex;
      align-items: center;
      background: #0f172a;
      border: 1px solid #475569;
      border-radius: 8px;
      overflow: hidden;
    }
    .device-combo select {
      min-width: 130px;
      padding: 6px 8px 6px 10px;
      background: #0f172a;
      color: #e2e8f0;
      border: none;
      border-radius: 0;
    }
    .device-combo button {
      background: transparent;
      border: none;
      border-left: 1px solid #334155;
      border-radius: 0;
      padding: 6px 10px;
      font-size: 13px;
      color: #94a3b8;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }
    .device-combo button:hover {
      background: rgba(71,85,105,0.35);
      color: #e2e8f0;
    }
    select {
      background: #0f172a;
      color: #e2e8f0;
      border: 1px solid #475569;
      border-radius: 8px;
      padding: 6px 10px;
      font-size: 13px;
      min-width: 140px;
      outline: none;
      cursor: pointer;
    }
    select option {
      background: #0f172a !important;
      color: #e2e8f0 !important;
      padding: 6px 10px;
    }
    select optgroup {
      background: #1e293b !important;
      color: #94a3b8 !important;
      font-weight: 600;
    }
    #cmdTemplate {
      background: #0f172a !important;
      color: #e2e8f0 !important;
      border: 1px solid #475569;
      border-radius: 8px;
    }
    #cmdTemplate option {
      background: #0f172a !important;
      color: #e2e8f0 !important;
    }
    #cmdTemplate optgroup {
      background: #1e293b !important;
      color: #94a3b8 !important;
    }
    #actionModalOs {
      background: #0f172a !important;
      color: #e2e8f0 !important;
      border: 1px solid #475569;
      border-radius: 6px;
      padding: 6px 10px;
    }
    #actionModalOs option {
      background: #0f172a !important;
      color: #e2e8f0 !important;
    }
    #resolutionSelect {
      background: #0f172a !important;
      color: #e2e8f0 !important;
      border: 1px solid #475569;
      border-radius: 6px;
      padding: 4px 8px;
    }
    #resolutionSelect option {
      background: #0f172a !important;
      color: #e2e8f0 !important;
    }
    .status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      padding: 6px 10px;
      border-radius: 8px;
      background: #0f172a;
      border: 1px solid #475569;
      color: #94a3b8;
    }
    .status::before {
      content: '';
      width: 8px; height: 8px;
      border-radius: 50%;
      background: #94a3b8;
    }
    .status.online::before { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
    .status.offline::before { background: #ef4444; }

    .device-tabs {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .device-tab {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 13px;
      background: #0f172a;
      border: 1px solid #475569;
      color: #e2e8f0;
      cursor: pointer;
      transition: all 0.15s;
    }
    .device-tab:hover { border-color: #60a5fa; }
    .device-tab.active { background: #1e3a8a; border-color: #2563eb; color: #fff; }
    .device-tab .dot { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; }
    .device-tab .dot.online { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
    .device-tab .dot.online.weak { background: #eab308; box-shadow: 0 0 6px #eab308; }
    .device-tab .dot.offline { background: #ef4444; }
    .device-tab .add { font-size: 14px; padding: 0 2px; }
    .device-tab .blink-btn { cursor: pointer; font-size: 12px; padding: 0 2px; margin-left: 2px; opacity: 0.7; transition: opacity 0.15s; }
    .device-tab .blink-btn:hover { opacity: 1; }

    .grid-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
    .grid-label {
      position: absolute; font-size: 9px; color: rgba(96, 165, 250, 0.55);
      transform: translate(-50%, -50%); pointer-events: auto; cursor: pointer;
    }
    .grid-label:hover { color: rgba(96, 165, 250, 0.9); background: rgba(15, 23, 42, 0.5); border-radius: 2px; }

    .memory-points { display: flex; gap: 8px; flex-wrap: wrap;  }
    .memory-points button { padding: 8px 10px; font-size: 12px; background: #0f172a; border: 1px solid #475569; }
    .memory-points button:hover { border-color: #60a5fa; }

    .cmd-templates { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    .history-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
    .history-chip {
      background: #0f172a; border: 1px solid #334155; color: #94a3b8;
       padding: 4px 10px; font-size: 12px; cursor: pointer;
      max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .history-chip:hover { border-color: #60a5fa; color: #e2e8f0; }

    .status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .status-item { background: #0f172a; border: 1px solid #334155; border-radius: 8px; padding: 10px; text-align: center; }
    .status-label { font-size: 11px; color: #94a3b8; margin-bottom: 4px; }
    .status-value { font-size: 15px; font-weight: 600; color: #e2e8f0; }
    .status-value.low { color: #f87171; }
    .device-actions { display: flex; gap: 8px; flex-wrap: wrap;  }
    .device-actions button { font-size: 12px; padding: 6px 10px; }

    .btn {
      background: #2563eb; color: #fff; border: none; border-radius: 8px;
      padding: 10px 14px; font-size: 14px; font-weight: 600; cursor: pointer;
    }
    .btn:hover { background: #1d4ed8; }
    .btn:disabled { background: #475569; cursor: not-allowed; }

    .main {
  position: relative;
      flex: 1;
      padding: 24px;
      max-width: 720px;
      width: 100%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
@media (min-width: 900px) {
  /* ============================================================
   * Grid 布局重构 - 保证四栏严格对齐
   * ============================================================
   * 列：左区(3fr) | 分隔条(6px) | 右区(2fr) | 边栏(44px)
   * 行：上部(1fr自适应) | 下部(240px固定)
   */
  .main {
    position: relative;
    max-width: none;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 3fr 6px 2fr 44px;
    grid-template-rows: 1fr;
    padding: 12px;
    gap: 0;
  }
  /* 左区：占满第1列，第1-2行 */
  .cam-col {
    grid-column: 1;
    grid-row: 1;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 12px 0 0;  /* 右侧留gap给splitter */
  }
  /* 分隔条：第2列，第1-2行 */
  .col-splitter {
    grid-column: 2;
    grid-row: 1;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    position: relative;
  }
  .col-splitter::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 40%;
    bottom: 40%;
    width: 2px;
    background: #475569;
    border-radius: 1px;
  }
  .col-splitter:hover::after {
    background: #2563eb;
  }
  /* 右区：占满第3列，第1-2行 */
  .ctrl-col {
    grid-column: 3;
    grid-row: 1;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 12px 0 12px;
  }
  /* 边栏：第4列，第1-2行 */
  .right-dock {
    grid-column: 4;
    grid-row: 1;
    position: relative;
    width: 44px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 0;
    background: rgba(15,23,42,0.6);
    border-left: 1px solid rgba(51,65,85,0.5);
    z-index: 10;
    backdrop-filter: blur(4px);
  }
}

.card {
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 8px;
      overflow: hidden;
      padding: 20px;
    }
    .card h2 {
      font-size: 15px;
      font-weight: 600;
      color: #94a3b8;
      margin-bottom: 14px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .text-input-row {
      display: flex;
      gap: 12px;
    padding: 0;
    }
    input[type="text"] {
      flex: 1;
      background: #0f172a;
      border: 1px solid #475569;
      border-radius: 8px;
      padding: 12px 14px;
      color: #f1f5f9;
      font-size: 15px;
    }
    input[type="text"]::placeholder { color: #64748b; }
    button {
      background: #2563eb;
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 10px 18px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.2s;
    }
    button:hover { background: #1d4ed8; }
    button:active { background: #1e40af; }
    button.secondary { background: #334155; }
    button.secondary:hover { background: #475569; }
    button.danger { background: #dc2626; }
    button.danger:hover { background: #b91c1c; }

    .hotkeys {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      gap: 12px;
    padding: 0;
    }
    .hotkeys button {
      padding: 14px 10px;
      font-size: 13px;
      background: #0f172a;
      border: 1px solid #475569;
    }
    .hotkeys button:hover { background: #1e293b; border-color: #60a5fa; }

    .mouse-pad {
      aspect-ratio: 1 / 1;
      background: #0f172a;
      border: 1px dashed #475569;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #64748b;
      font-size: 14px;
      user-select: none;
      cursor: crosshair;
      position: relative;
      overflow: hidden;
    }
    .mouse-pad.active {
      border-color: #60a5fa;
      color: #93c5fd;
    }
    .local-cursor {
      position: absolute;
      width: 12px;
      height: 12px;
      background: #ef4444;
      border: 2px solid #fff;
      border-radius: 50%;
      pointer-events: none;
      transform: translate(-50%, -50%);
      z-index: 10;
      box-shadow: 0 0 8px rgba(239, 68, 68, 0.9);
      display: none;
    }
    .mouse-pad::before, .mouse-pad::after {
      content: '';
      position: absolute;
      pointer-events: none;
      opacity: 0.25;
    }
    .mouse-pad::before {
      width: 1px; height: 100%; left: 50%; top: 0; background: #64748b;
    }
    .mouse-pad::after {
      width: 100%; height: 1px; top: 50%; left: 0; background: #64748b;
    }
    .virtual-screen {
      position: absolute;
      border: 2px solid rgba(96, 165, 250, 0.6);
      background: rgba(96, 165, 250, 0.08);
      border-radius: 6px;
      pointer-events: none;
      display: none;
      z-index: 1;
    }

    .mouse-buttons {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 12px;
    padding: 0;
      margin-top: 12px;
    }
    .mouse-buttons button { padding: 14px; font-size: 13px; }
    .mouse-extras {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 12px;
    padding: 0;

    }
    .mouse-extras button { padding: 12px; font-size: 13px; background: #0f172a; border: 1px solid #475569; }

    .hint {
      font-size: 12px;
      color: #64748b;
      margin-top: 8px;
      line-height: 1.5;
    }

    .log {
      background: #0b1220;
      border: 1px solid #1e293b;
      border-radius: 8px;
      padding: 0;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 12px;
      color: #94a3b8;
      max-height: 100px;
      overflow-y: auto;
      white-space: pre-wrap;
    }

    footer {
      text-align: center;
      padding: 16px;
      font-size: 12px;
      color: #475569;
    }
    .hotkey-item {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .hotkey-edit {
      position: absolute;
      top: -4px;
      right: -4px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #334155;
      color: #e2e8f0;
      font-size: 10px;
      line-height: 18px;
      text-align: center;
      cursor: pointer;
      border: 1px solid #475569;
      opacity: 0.8;
    }
    .hotkey-edit:hover { background: #2563eb; }
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.6);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }
    .modal-overlay.active { display: flex; }
    .modal {
      background: #0f172a;
      border: 1px solid #334155;
      border-radius: 10px;
      padding: 20px;
      width: min(90vw, 320px);
      color: #e2e8f0;
    }
    .modal h3 { margin: 0 0 12px 0; font-size: 16px; }
    .modal label { display: block; font-size: 12px; color: #94a3b8; margin: 10px 0 4px; }
    .modal input {
      width: 100%;
      box-sizing: border-box;
      padding: 12px;
      border-radius: 6px;
      border: 1px solid #475569;
      background: #0b1220;
      color: #e2e8f0;
      font-size: 14px;
    }
    .modal-actions {
      display: flex;
      gap: 8px;
      margin-top: 14px;
    }
    .modal-actions button { flex: 1; padding: 8px; font-size: 13px; border-radius: 6px; border: 1px solid #475569; cursor: pointer; }
    .modal-actions .save { background: #2563eb; color: #fff; border-color: #2563eb; }
    .modal-actions .delete { background: #7f1d1d; color: #fff; border-color: #7f1d1d; }
    .drag-toggle {
      font-size: 12px;
      padding: 12px;
      border-radius: 6px;
      border: 1px solid #475569;
      background: #334155;
      color: #e2e8f0;
      cursor: pointer;
    }
    .drag-toggle.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #fff;
    }
    .dpad-overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 5;
    }
    .dpad-btn {
      position: absolute;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(30, 41, 59, 0.55);
      border: 1px solid rgba(148, 163, 184, 0.25);
      color: #e2e8f0;
      font-size: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      pointer-events: auto;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
      transition: background 0.15s;
    }
    .dpad-btn:active { background: rgba(37, 99, 235, 0.7); border-color: rgba(96, 165, 250, 0.5); }
    .dpad-btn.hold {
      background: #2563eb !important;
      border-color: #60a5fa !important;
      color: #fff !important;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
      transform: scale(0.96);
    }
    .dpad-tl.hold { transform: scale(0.96); }
    .dpad-tc.hold { transform: translateX(-50%) scale(0.96); }
    .dpad-tr.hold { transform: scale(0.96); }
    .dpad-ml.hold { transform: translateY(-50%) scale(0.96); }
    .dpad-mr.hold { transform: translateY(-50%) scale(0.96); }
    .dpad-bl.hold { transform: scale(0.96); }
    .dpad-bc.hold { transform: translateX(-50%) scale(0.96); }
    .dpad-br.hold { transform: scale(0.96); }
    .dpad-tl { top: 14px; left: 14px; }
    .dpad-tc { top: 14px; left: 50%; transform: translateX(-50%); }
    .dpad-tr { top: 14px; right: 14px; }
    .dpad-ml { top: 50%; left: 14px; transform: translateY(-50%); }
    .dpad-mr { top: 50%; right: 14px; transform: translateY(-50%); }
    .dpad-bl { bottom: 14px; left: 14px; }
    .dpad-bc { bottom: 14px; left: 50%; transform: translateX(-50%); }
    .dpad-br { bottom: 14px; right: 14px; }

    .card.compact { padding: 14px; }
    .card.compact h2 { margin-bottom: 10px; font-size: 14px; }
    .input-bar { display: flex; gap: 8px; }
    .input-bar input[type="text"] { flex: 1; padding: 10px 12px; font-size: 14px; }
    .template-row { margin-top: 8px; }
    .template-row select { width: 100%; padding: 8px 10px; font-size: 13px; background: #0f172a; color: #e2e8f0; border: 1px solid #475569; border-radius: 8px; }
    .chips-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
    .muted-label { font-size: 12px; color: #94a3b8; white-space: nowrap; }
    .btn-small { padding: 5px 10px; font-size: 12px; border-radius: 6px; }
    .action-bar { display: flex; gap: 8px;  }
    .mouse-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
    .mouse-toolbar.sub { margin-bottom: 8px; margin-top: -4px; }
    .mt-group { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 180px; }
    .mt-group input[type=range] { flex: 1; min-width: 80px; }
    .small-check { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #e2e8f0; cursor: pointer; }
    .memory-row { display: flex; align-items: center; gap: 8px;  flex-wrap: wrap; }
    .log-card .log-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
    .log-card .log-header h2 { margin-bottom: 0; }
    .log-card .log-header span { font-size: 12px; color: #94a3b8; }
    #directKeyboard { width: 100%; min-height: 60px; background: #0f172a; color: #e2e8f0; border: 1px solid #334155; border-radius: 8px; padding: 10px; resize: vertical; font-size: 14px;  }

html, body { height: 100%; overflow: hidden; }
.video-card { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0; }
.video-header { display: flex; align-items: center; justify-content: space-between; padding: 5px 12px; }
.video-header h2 { margin: 0; font-size: 14px; }
.video-box {
  position: relative;
  flex: 1;
  min-height: 0;
  /* 高度由 flex 布局自动分配 */
  background: #020617;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.video-placeholder { display: none;
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #94a3b8; font-size: 14px; text-align: center; padding: 20px;
}
.video-overlay {
  position: absolute; inset: 0;
  background: rgba(2,6,23,0.95);
  display: none; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px; z-index: 5;
}
.chat-panel {
  flex: 0 0 240px;  /* 固定高度 240px */
  height: 240px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.chat-panel h2 { margin: 0; padding: 0; font-size: 14px; }
.chat-messages {
  flex: 1;
  overflow-y: auto;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 12px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.chat-messages::-webkit-scrollbar { display: none; }
.chat-messages .chat-bubble { max-width: 90%; }
.chat-bubble.me { align-self: flex-end; }
.chat-bubble.remote { align-self: flex-start; }
.chat-bubble .chat-meta { font-size: 11px; color: #64748b; margin-bottom: 2px; }
.chat-bubble.me .chat-meta { text-align: right; }
.chat-bubble .chat-content {
  background: #1e293b; border: 1px solid #334155; border-radius: 8px;
  padding: 6px 10px; color: #e2e8f0; font-size: 13px; word-break: break-word;
}
.chat-bubble.me .chat-content { background: #1e3a8a; border-color: #2563eb; }
.chat-input-row {
  display: flex; gap: 8px; padding: 10px; background: #0f172a;
      border-radius: 0 0 8px 8px;
}
.chat-input-row input {
  flex: 1; background: #1e293b; border: 1px solid #334155; border-radius: 6px;
  padding: 8px 12px; color: #e2e8f0; font-size: 13px; outline: none;
}
.chat-input-row input::placeholder { color: #64748b; }
.chat-input-row button { padding: 8px 14px; font-size: 12px; font-weight: 500; }
footer { display: none; }

/* === Right column layout === */

/* Top input strip */
.input-strip {
  display: flex;
  gap: 8px;
  align-items: center;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 12px;
}
#textInput {
  flex: 1;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 8px 12px;
  color: #e2e8f0;
  font-size: 13px;
  outline: none;
}
#textInput::placeholder { color: #64748b; }
.input-strip button { padding: 8px 12px; font-size: 13px; }

/* Mouse pad area */
/* mouse-pad-wrap card look */
.mouse-pad-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
    padding: 0;

}
#mousePad {
  width: 100%;
  flex: 1;
  min-height: 0;
  aspect-ratio: 1 / 1;
  max-height: 100%;
  background: #020617;
  border: 1px solid #334155;

  position: relative;
  cursor: crosshair;
  touch-action: none;
  overflow: hidden;
}
#mousePad.active { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,0.25); }
.mouse-bar {
  display: flex;
  gap: 12px;
    padding: 0;
  justify-content: center;
}
.mouse-bar button {
  min-width: 90px;
  padding: 10px 14px;
  font-size: 14px;
}

/* Right dock */
.right-dock {
  position: absolute;
  right: 0;
  top: 12px;  /* 与 .main padding 对齐 */
  bottom: 12px;  /* 与 .main padding 对齐 */
  width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
  background: rgba(15,23,42,0.6);
  border-left: 1px solid rgba(51,65,85,0.5);
  z-index: 10;
  backdrop-filter: blur(4px);
}
.dock-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  background: rgba(51,65,85,0.5);
  border: 1px solid rgba(71,85,105,0.5);
  transition: background 0.15s, transform 0.1s;
  user-select: none;
}
.dock-icon:hover { background: rgba(71,85,105,0.85); transform: scale(1.05); }
.dock-icon.active { background: #1e3a8a; border-color: #2563eb; }
.dock-spacer { flex: 1; }
#dockLog { margin-top: auto; }
.dock-log { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; font-size: 12px; color: #94a3b8; cursor: pointer; border-top: 1px solid rgba(51,65,85,0.5); margin-top: auto; }
.dock-log .dot { width: 8px; height: 8px; background: #22c55e; border-radius: 50%; }

/* Dock sliding panels */
.dock-panel {
  position: absolute;
  right: 44px;
  top: 0;
  bottom: 0;
  width: 280px;
  background: rgba(15,23,42,0.98);
  border-left: 1px solid #334155;
  transform: translateX(100%);
  transition: transform 0.2s ease, visibility 0.2s;
  z-index: 9;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  visibility: hidden;
}
.dock-panel.open { transform: translateX(0); visibility: visible; }
.dock-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid #334155;
  font-size: 14px;
  font-weight: 600;
  color: #e2e8f0;
}
.dock-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.dock-panel-body::-webkit-scrollbar { display: none; }
/* Log capsule */
.log-capsule {
  position: fixed;
  right: 60px;
  bottom: 14px;
  max-width: min(50vw, 520px);
  z-index: 20;
}
.log-cap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
    padding: 0;
  background: rgba(15,23,42,0.95);
  border: 1px solid #334155;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  color: #94a3b8;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.log-cap-header:hover { border-color: #475569; }
.log-cap-header .dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
.log-cap-body { height: 100%; overflow-y: auto; background: rgba(15,23,42,0.95); border: 1px solid #334155; border-top: none; border-radius: 0 0 12px 12px; padding: 10px; font-size: 12px; color: #94a3b8; white-space: pre-wrap; word-break: break-all; }
/* Compact panel styles for hotkeys/actions inside dock */
.panel-section { margin-bottom: 14px; }
.panel-section h4 { margin: 0 0 8px 0; font-size: 12px; color: #94a3b8; font-weight: 500; }
.panel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.panel-grid button { padding: 8px; font-size: 12px; }
.panel-row { display: flex; gap: 8px; flex-wrap: wrap; }
.panel-row button { padding: 8px 10px; font-size: 12px; }

/* Sensitivity and precision compact */
.sens-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sens-row input[type="range"] { flex: 1; }
.precision-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 6px; font-size: 12px;
  background: #334155; color: #e2e8f0; cursor: pointer;
}
.precision-toggle.active { background: #1e3a8a; }

/* Memory points in dock */
.memory-row-dock { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.memory-row-dock button { padding: 6px 8px; font-size: 12px; background: #0f172a; border: 1px solid #475569; }

/* Keyboard direct control zone */
.keyboard-zone {
  background: #0f172a;
  border: 1px solid #334155;

  padding: 0;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.keyboard-zone.active {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.25);
}
.keyboard-zone h3 {
  font-size: 13px;
  color: #94a3b8;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.key-capture {
  min-height: 72px;
  background: #020617;
  border: 1px dashed #475569;
  border-radius: 10px;
  padding: 12px;
  outline: none;
  cursor: text;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: flex-start;
}
.key-capture:focus {
  border-color: #2563eb;
  background: #020d1f;
}
.key-chip {
  background: #1e3a8a;
  border: 1px solid #2563eb;
  color: #fff;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  animation: fadeIn 0.15s ease;
}
.key-chip.combo { background: #334155; border-color: #475569; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.key-hint {
  font-size: 14px;
  color: #64748b;
  margin-top: 6px;
}

/* Paste strip under keyboard */
.paste-strip {
  display: flex;
  gap: 8px;
  align-items: center;

  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 12px;
}
.paste-strip input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 6px;
  color: #f1f5f9;
  font-size: 14px;
  outline: none;
}
.paste-strip input::placeholder { color: #64748b; }
.paste-strip button { padding: 7px 12px; font-size: 12px; }

/* Unified right column */
.unified-ctrl {
  display: flex;
  flex-direction: column;
  gap: 12px;

  height: 100%;
}
.ops-scroll {
  height: 100px;
  min-height: 80px;
  background: #020617;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 12px;
  overflow-y: auto;
  font-size: 12px;
  color: #94a3b8;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ops-scroll::-webkit-scrollbar { display: none; }
.ops-scroll:empty::before { content: "键鼠操作将在此实时显示…"; color: #475569; }
.ops-item { display: flex; gap: 8px; margin-bottom: 4px; animation: fadeIn 0.15s ease; }
.ops-time { color: #64748b; font-size: 11px; min-width: 44px; }
.ops-tag { color: #e2e8f0; }
.ops-tag.key { color: #60a5fa; }
.ops-tag.mouse { color: #34d399; }
.ops-tag.combo { color: #f59e0b; }

.paste-micro {
  display: flex;
  gap: 8px;
  align-items: center;
}
.paste-micro input {
  flex: 1;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 12px;
  color: #f1f5f9;
  font-size: 13px;
  outline: none;
}
.paste-micro input::placeholder { color: #64748b; }
.paste-micro button { padding: 8px 12px; font-size: 12px; }

/* mouse-pad-wrap card look */
.mouse-pad-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
    padding: 0;
}
#mousePad.active, #mousePad:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.25);
}
.mouse-bar {
  display: flex;
  gap: 12px;
    padding: 0;
  justify-content: center;
}
.mouse-bar button { min-width: 90px; padding: 10px 14px; font-size: 14px; }

.right-dock {
  position: absolute;
  right: 0;
  top: 12px;  /* 与 .main padding 对齐 */
  bottom: 12px;  /* 与 .main padding 对齐 */
  width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
  background: rgba(15,23,42,0.6);
  border-left: 1px solid rgba(51,65,85,0.5);
  z-index: 10;
  backdrop-filter: blur(4px);
}
.dock-icon {
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; cursor: pointer;
  background: rgba(51,65,85,0.5); border: 1px solid rgba(71,85,105,0.5);
  transition: background 0.15s, transform 0.1s; user-select: none;
}
.dock-icon:hover { background: rgba(71,85,105,0.85); transform: scale(1.05); }
.dock-icon.active { background: #1e3a8a; border-color: #2563eb; }
.dock-spacer { flex: 1; }
#dockLog { margin-top: auto; }
.dock-log { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; font-size: 12px; color: #94a3b8; cursor: pointer; border-top: 1px solid rgba(51,65,85,0.5); margin-top: auto; }
.dock-log .dot { width: 8px; height: 8px; background: #22c55e; border-radius: 50%; }
.dock-panel {
  position: absolute; right: 44px; top: 0; bottom: 0; width: 280px;
  background: rgba(15,23,42,0.98); border-left: 1px solid #334155;
  transform: translateX(100%); transition: transform 0.2s ease, visibility 0.2s;
  z-index: 9; display: flex; flex-direction: column; overflow: hidden;
  visibility: hidden;
}
.dock-panel.open { transform: translateX(0); visibility: visible; }
.dock-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid #334155;
  font-size: 14px; font-weight: 600; color: #e2e8f0;
}
.dock-panel-body {
  flex: 1; overflow-y: auto; padding: 12px 14px; scrollbar-width: none;
  -ms-overflow-style: none;
}
.dock-panel-body::-webkit-scrollbar { display: none; }
.dock-panel-body .panel-section { margin-bottom: 14px; }
.panel-section h4 { margin: 0 0 8px 0; font-size: 12px; color: #94a3b8; font-weight: 500; }
.panel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.panel-grid button { padding: 8px; font-size: 12px; }
.panel-row { display: flex; gap: 8px; flex-wrap: wrap; }
.panel-row button { padding: 8px 10px; font-size: 12px; }
.sens-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sens-row input[type="range"] { flex: 1; }
.precision-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 6px; font-size: 12px; background: #334155; color: #e2e8f0; cursor: pointer; }
.precision-toggle.active { background: #1e3a8a; }
.memory-row-dock { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.memory-row-dock button { padding: 6px 8px; font-size: 12px; background: #0f172a; border: 1px solid #475569; }
.log-capsule { position: fixed; right: 60px; bottom: 14px; max-width: min(50vw, 520px); z-index: 20; }
.log-cap-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(15,23,42,0.95); border: 1px solid #334155; border-radius: 20px; padding: 4px 10px; font-size: 12px; color: #94a3b8; cursor: pointer; backdrop-filter: blur(4px); }
.log-cap-header:hover { border-color: #475569; }
.log-cap-header .dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
/* Unified card look to match left side */
.unified-ctrl {
  gap: 12px;
}
.ops-scroll {
  background: #0f172a;
  border: 1px solid #334155;

}
/* mouse-pad-wrap card look */
.mouse-pad-wrap {
  background: #1e293b;
  border: 1px solid #334155;

  padding: 12px;
  flex: 1;
  min-height: 0;
}
#mousePad {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  max-height: none;
  background: #020617;
  border-radius: 10px;
}
.paste-micro {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 12px;
}
.paste-micro input {
  background: transparent;
  border: none;
}

@media (hover: hover) and (pointer: fine) {
  .mouse-bar { display: none; }
}

/* Operations list box */
.ops-list-box {
  background: #1e293b;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 200px;
  border-radius: 8px;
}
.ops-list-header {
  display: grid;
  grid-template-columns: 50px 56px 1fr;
  gap: 8px;
  padding: 5px 12px;
  background: rgba(30,41,59,0.6);
  border-bottom: 1px solid #334155;
  font-size: 14px;
  color: #94a3b8;
  font-weight: 500;
}
.ops-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
  font-size: 12px;
  color: #e2e8f0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ops-scroll::-webkit-scrollbar { display: none; }
.ops-scroll:empty .ops-item {
  display: grid;
  grid-template-columns: 50px 56px 1fr;
  gap: 8px;
  align-items: center;
  padding: 5px 10px;
  border-bottom: 1px solid rgba(51,65,85,0.35);
  animation: fadeIn 0.12s ease;
}
.ops-item:last-child { border-bottom: none; }
.ops-item:hover { background: rgba(30,41,59,0.35); }
.ops-time { color: #64748b; font-size: 11px; }
.ops-type { font-size: 11px; color: #94a3b8; }
.ops-type.key { color: #60a5fa; }
.ops-type.combo { color: #f59e0b; }
.ops-type.mouse { color: #34d399; }
.ops-text { color: #e2e8f0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Responsive fallback */
@media (max-width: 899px) {
  .main {
  position: relative;
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    grid-template-rows: none;
    padding: 8px;
  }
  .cam-col, .ctrl-col {
    grid-column: auto;
    grid-row: auto;
    padding: 0;
    height: auto;
    min-height: 200px;
  }
  .col-splitter { display: none; }
  .right-dock {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100%;
    height: 48px;
    flex-direction: row;
    justify-content: center;
    border-left: none;
    border-top: 1px solid rgba(51,65,85,0.5);
  }
  .dock-spacer { display: none; }
  #dockLog { margin-top: 0; border-top: none; border-left: 1px solid rgba(51,65,85,0.5); padding: 0; }
  .dock-panel {
    right: 0;
    top: auto;
    bottom: 48px;
    width: 100%;
    border-left: none;
    border-top: 1px solid #334155;
  }
}

/* Inline styles extracted */
.u-style-1 { flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:0; }
.u-style-10 { font-size:14px;padding:12px 24px;margin-top:16px;width:100%;max-width:280px; }
.u-style-11 { margin-bottom:10px;font-weight:600; }
.u-style-12 { margin-bottom:10px; }
.u-style-13 { font-size:12px;color:#94a3b8;word-break:break-all;margin-bottom:10px; }
.u-style-14 { flex:0 0 240px;display:flex;flex-direction:column;padding:0;overflow:hidden;min-height:0; }
.u-style-15 { background:#1e293b;border:1px solid #334155;color:#94a3b8;padding:2px 8px;border-radius:6px;font-size:11px;cursor:pointer;display:flex;align-items:center;gap:4px; }
.u-style-16 { padding:8px 14px;background:#2563eb;border:none;border-radius:6px;color:#fff;font-size:12px;cursor:pointer;font-weight:500; }
.u-style-17 { font-size:12px;color:#64748b; }
.u-style-18 { flex:1;min-height:0;background:#0f172a;border-radius:10px;overflow:hidden;position:relative;display:flex;flex-direction:column; }
.u-style-19 { position:absolute;inset:0;border:2px dashed #334155;border-radius:10px;background:#0f172a;cursor:crosshair; }
.u-style-2 { font-size:12px;color:#94a3b8; }
.u-style-20 { display:none;width:12px;height:12px;background:#ef4444;border-radius:50%;position:absolute;pointer-events:none;z-index:10;transform:translate(-50%,-50%); }
.u-style-21 { position:absolute;display:none;border:1px dashed rgba(96,165,250,0.25);pointer-events:none;z-index:1; }
.u-style-22 { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:13px;color:#64748b;pointer-events:none;text-align:center; }
.u-style-23 { flex:1;overflow-y:auto; }
.u-style-24 { display:flex;gap:8px;padding:10px;background:#0f172a; }
.u-style-25 { flex:1;background:#1e293b;border:1px solid #334155;border-radius:6px;padding:8px 12px;color:#e2e8f0;font-size:13px; }
.u-style-26 { cursor:pointer;font-size:16px;color:#94a3b8; }
.u-style-27 { margin-top:10px; }
.u-style-28 { width:100%;font-size:13px;padding:8px; }
.u-style-29 { min-width:28px;font-size:12px; }
.u-style-3 { flex:1;min-height:0;background:#020617;border-radius:10px;overflow:hidden;position:relative; }
.u-style-30 { display:flex;align-items:center;gap:6px;font-size:12px;color:#e2e8f0;cursor:pointer;margin-bottom:8px; }
.u-style-31 { margin-top:8px;display:flex;gap:8px;align-items:center;color:#e2e8f0;font-size:12px; }
.u-style-32 { width:60px;background:#0f172a;border:1px solid #334155;border-radius:6px;padding:6px;color:#e2e8f0;display:none; }
.u-style-33 { display:none; }
.u-style-34 { width:100%;margin-top:10px; }
.u-style-35 { width:100%; }
.u-style-36 { margin-top:6px; }
.u-style-37 { width:100%;background:#0f172a;color:#e2e8f0;border:1px solid #334155;border-radius:6px;padding:8px;font-size:13px;resize:vertical; }
.u-style-4 { width:100%;height:100%;object-fit:contain;display:none;background:#020617;position:absolute;top:0;left:0; }
.u-style-5 { margin-bottom:12px;font-size:16px;font-weight:500; }
.u-style-6 { margin-bottom:16px;font-size:13px;color:#64748b;text-align:center;line-height:1.6; }
.u-style-7 { display:flex;flex-direction:column;gap:10px;align-items:center;width:100%;max-width:280px; }
.u-style-8 { display:flex;align-items:center;gap:8px;font-size:12px;color:#94a3b8;background:#0f172a;padding:8px 12px;border-radius:6px;width:100%; }
.u-style-9 { background:#2563eb;color:#fff;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px; }



/* 视频区黑屏按钮 */

/* Mini/Plus 模式标签 */




/* 视频区黑屏按钮 */

/* Mini/Plus 模式标签 */

/* 操作日志列表样式 */
.ops-log-list {
  max-height: 400px;
  overflow-y: auto;
  font-size: 12px;
}
.ops-log-item {
  display: flex;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid #334155;
  align-items: center;
}
.ops-log-item:hover {
  background: rgba(255,255,255,0.05);
}
.ops-log-time {
  color: #64748b;
  min-width: 60px;
  font-family: monospace;
}
.ops-log-type {
  color: #60a5fa;
  min-width: 50px;
  text-align: center;
  background: #1e293b;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
}
.ops-log-action {
  color: #e2e8f0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}