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

/* ── Design tokens ─────────────────────────────────────────────────────── */
:root {
  --bg:         #F5F4F0;
  --surface:    #FFFFFF;
  --border:     #E0DED8;
  --text:       #111110;
  --muted:      #88877F;
  --accent:        #111110;
  --accent-fg:     #FFFFFF;
  --accent-hover:  #333330;
  --hover-bg:      #EEEDEA;
  --r:          3px;
  --ui:         'Inter', system-ui, sans-serif;
  --mono:       'Space Mono', 'Courier New', monospace;
  --sidebar-w:  296px;
  --hdr-h:      50px;
}

[data-theme="dark"] {
  --bg:        #111110;
  --surface:   #1C1C1A;
  --border:    #2E2E2C;
  --text:      #F0EFE9;
  --muted:     #7A7971;
  --accent:       #F0EFE9;
  --accent-fg:    #111110;
  --accent-hover: #CECDC8;
  --hover-bg:     #2A2A28;
}

/* ── Base layout ────────────────────────────────────────────────────────── */
html, body { height: 100%; }

body {
  font-family: var(--ui);
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background .2s, color .2s;
}

@supports (height: 100dvh) {
  body { height: 100dvh; }
}

.main {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* ── Backdrop (mobile sidebar overlay) ─────────────────────────────────── */
.backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 99;
}
.backdrop.show { display: block; }

/* ── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }