/* ══════════════════════════════════════════════════════════
   BASE — CSS custom properties + reset + scrollbars + fonts
   ══════════════════════════════════════════════════════════ */

/* ── Dark theme (default) ─────────────────────────────── */
:root {
  --bg:          #0a0a0a;
  --surface:     #111111;
  --card:        #1a1a1a;
  --border:      #2a2a2a;
  --accent:      #00ff88;
  --accent-dim:  #00cc6a;
  --text:        #f0f0f0;
  --text-muted:  #888888;
  --error:       #ff4444;
  --warning:     #ffaa00;
  --info:        #6bc5ff;

  --ed-bg:       #0d0d0d;
  --gut-bg:      #0c0c0c;
  --gut-border:  #222222;
  --gut-color:   #404040;

  --tl-red:    #ff5f57;
  --tl-yellow: #ffbd2e;
  --tl-green:  #28c840;

  --radius:    10px;
  --radius-lg: 14px;
  --trans:     0.15s ease;

  /* layout sizes */
  --th:   46px;   /* title bar height  */
  --sh:   26px;   /* status bar height */
  --sw:  220px;   /* sidebar width     */
  --ch:  200px;   /* console height    */
  --pw:  380px;   /* preview width     */

  color-scheme: dark;
}

/* ── Light theme ──────────────────────────────────────── */
[data-theme="light"] {
  --bg:         #f5f5f7;
  --surface:    #ffffff;
  --card:       #eeeeee;
  --border:     #d4d4d4;
  --accent:     #00a855;
  --accent-dim: #008844;
  --text:       #1a1a1a;
  --text-muted: #666666;
  --error:      #cc2222;
  --warning:    #b36a00;
  --info:       #0066cc;

  --ed-bg:      #ffffff;
  --gut-bg:     #f5f5f7;
  --gut-border: #e0e0e0;
  --gut-color:  #aaaaaa;

  color-scheme: light;
}

/* ── Reset ────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  transition: background var(--trans), color var(--trans);
}

/* ── Thin scrollbars ──────────────────────────────────── */
::-webkit-scrollbar           { width: 4px; height: 4px; }
::-webkit-scrollbar-track     { background: transparent; }
::-webkit-scrollbar-thumb     { background: var(--border); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { opacity: 0.7; }

/* ── Mobile ───────────────────────────────────────────── */
@media (max-width: 768px) {
  #sidebar, #rsz-sb, #preview-pane, #rsz-pv { display: none !important; }
  .app-title { font-size: 12px; }
  #run-btn .kbd { display: none; }
}
@media (max-width: 480px) {
  #lang-select { max-width: 90px; font-size: 11px; }
  .tb-btn { padding: 4px 7px; font-size: 10px; }
}