:root{
    --bg: #0e141b; --panel: #161f29; --panel-2: #1d2833; --line: #263140;
    --text: #e7ecf2; --muted: #8ea0b3;
    --good: #37d99b; --good-dim: #1d3a30;
    --bad: #ff6e61; --bad-dim: #402323;
    --warn: #ffb454; --warn-dim: #3d3320;
    --info: #6ea8fe; --info-dim: #202c40;
    --radius: 14px;
  }
  *{ box-sizing: border-box; }
  html,body{ height:100%; }
  body{ margin:0; background: var(--bg); color: var(--text); font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing: antialiased; }
  h1,h2,h3{ font-family:'Sora',system-ui,sans-serif; }

  .wrap{ max-width: 1320px; margin: 0 auto; padding: 26px 22px 56px; }

  header.top{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
  header.top .brand{ display:flex; align-items:center; gap:12px; }
  .brand-mark{ width:40px; height:40px; border-radius:11px; background:linear-gradient(155deg,var(--info),#2f5fc7); position:relative; flex-shrink:0; }
  .brand-mark::after{ content:""; position:absolute; inset:9px; border:2px solid #06111f; border-radius:6px; opacity:.35; }
  header.top h1{ font-size:22px; font-weight:700; margin:0; }
  header.top p{ margin:2px 0 0; color:var(--muted); font-size:13.5px; max-width: 480px; }

  button, .btn{
    font-family:'Inter',sans-serif; font-size:13.5px; font-weight:600; padding:9px 15px;
    border-radius:10px; border:1px solid var(--line); background:var(--panel-2); color:var(--text);
    cursor:pointer; transition: transform .12s ease, background .15s ease, border-color .15s ease;
  }
  button:hover{ border-color:#3a4a5c; }
  button:active{ transform: scale(.97); }
  button:disabled{ opacity:.45; cursor:default; transform:none; }
  .btn-primary{ background: var(--info); border-color: var(--info); color:#071427; }
  .btn-primary:hover{ background:#82b6ff; }
  .btn-danger{ background: var(--bad-dim); border-color:#5a2e2a; color:#ffb2a8; }
  .btn-good{ background: var(--good); border-color: var(--good); color:#06231a; }

  .grid{ display:grid; grid-template-columns: minmax(0,1.5fr) minmax(320px,1fr); gap:20px; align-items:start; }
  @media (max-width:900px){ .grid{ grid-template-columns: 1fr; } }

  .card{ background: var(--panel); border:1px solid var(--line); border-radius: var(--radius); padding:18px; }
  .card h2{ margin:0 0 14px; font-size:12.5px; font-weight:600; color:var(--muted); letter-spacing:.2px; }
  .side{ display:flex; flex-direction:column; gap:16px; }

  /* Slide viewer */
  .stage{ position:relative; width:100%; aspect-ratio:16/9; background:#060a0e; border-radius:10px; overflow:hidden; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; }
  .stage img{ max-width:100%; max-height:100%; object-fit:contain; }
  .stage .placeholder{ color:var(--muted); text-align:center; padding:24px; font-size:14px; line-height:1.6; }
  .nav-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; }
  .counter{ font-family:'Sora',sans-serif; font-weight:700; font-size:15px; }
  .upload-row{ margin-top:14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  input[type="file"]{ color: var(--muted); font-size:13px; }

  /* Camera panel */
  .cam-stage{ position:relative; width:100%; aspect-ratio:4/3; background:#060a0e; border-radius:10px; overflow:hidden; border:1px solid var(--line); }
  .cam-stage video, .cam-stage canvas{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform: scaleX(-1); }
  .cam-stage video{ visibility:hidden; }
  .cam-placeholder{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:12.5px; text-align:center; padding:16px; }

  .row-gap{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
  .pill{ display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px; font-size:12px; font-weight:700; background:var(--panel-2); }
  .pill .dot{ width:8px; height:8px; border-radius:50%; background:var(--muted); }

  textarea, .transcript-box{
    width:100%; background:var(--panel-2); border:1px solid var(--line); border-radius:10px; color:var(--text);
    font-family:'Inter',sans-serif; font-size:12.5px; padding:10px; resize:none;
  }

  .status-box{ font-size:13.5px; font-weight:600; padding:10px 12px; border-radius:10px; background:var(--panel-2); }
  .log{ display:flex; flex-direction:column; gap:6px; max-height:180px; overflow-y:auto; font-size:12px; color:var(--muted); }
  .log div{ padding:6px 8px; background:var(--panel-2); border-radius:7px; }

  .manual-cmd{ display:flex; gap:8px; margin-top:10px; }
  .manual-cmd input[type="text"]{
    flex:1; background:var(--panel-2); border:1px solid var(--line); border-radius:10px; color:var(--text);
    padding:9px 12px; font-family:'Inter',sans-serif; font-size:13px;
  }

  footer.note{ margin-top:22px; color:var(--muted); font-size:12px; line-height:1.6; border-top:1px solid var(--line); padding-top:16px; }
  .tag{ display:inline-block; font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:6px; background:var(--info-dim); color:var(--info); margin-left:6px; vertical-align:1px; }