:root {
  --bg: #0f1117;
  --panel: #151925;
  --ink: #e7ecf5;
  --muted: #a5afc2;
  --accent: #8bb9ff;
  --accent-2: #6ea3ff;
  --border: #242b37;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

::selection { background: rgba(111, 154, 255, 0.35); }

body { background: var(--bg); color: var(--ink); }
.topbar {
  background: #111827;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.topbar nav a { color: #cfd7e6; }
.topbar nav a:hover { color: var(--accent); }
.brand, .brand a { color: #e7ecf5; }
main { color: var(--ink); }
.panel,
.hero,
.account-card { background: var(--panel); border-color: var(--border); box-shadow: var(--shadow); }
a { color: var(--accent); }
a:hover { color: var(--accent-2); }
input,
select {
  background: #0f131c;
  border-color: #2c3442;
  color: var(--ink);
}
button { box-shadow: 0 8px 22px rgba(93, 156, 255, 0.25); }
.theme-toggle {
  border-color: #2c3442;
  background: #121724;
  color: #cfd7e6;
  box-shadow: none;
}

.doc-shell { background: var(--panel); border-color: var(--border); box-shadow: var(--shadow); }
.toc { background: #121724; border-color: var(--border); }
.toc-list a { color: #d8e0ee; }
.toc-list a:hover { background: #1c2230; }
.folder-toggle { background: #1b2130; border-color: #2c3442; color: #cfd7e6; }
.folder-toggle:hover { background: #222a3a; border-color: #384356; }
.folder-row .count { background: #232c3a; color: #cfd7e6; }

.doc-content { background: var(--panel); }
.doc-toolbar { background: var(--panel); border-color: var(--border); }
.search-bar { background: #121724; border-color: #232c3a; }
.search-bar input[type="search"],
.search-bar select { background: #0f131c; border-color: #2c3442; color: var(--ink); }
.doc-note { background: #161c27; border-color: #232c3a; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25); }
.doc-note-meta { color: #9aa5bb; }
.doc-body { background: #0f131c; border-color: #273144; color: var(--ink); }
.doc-note h1 { color: #f1f4fb; }
.doc-body.html-body h1,
.doc-body.html-body h2,
.doc-body.html-body h3,
.doc-body.html-body h4,
.doc-body.html-body h5,
.doc-body.html-body h6 { color: #f1f4fb; }
.doc-body.html-body blockquote { background: #171f2b; border-left-color: #3a4557; color: #c7cfde; }
.doc-body.html-body pre { background: #161e2c; border-color: #273144; }
.doc-body pre.plain-body { color: #cfd7e6; }
.embed-trigger { color: var(--accent); }
.embed-modal .embed-overlay { background: rgba(0, 0, 0, 0.7); }
.embed-modal .embed-dialog { background: #0f131c; border-color: #273144; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }
.embed-modal .embed-bar { background: rgba(255, 255, 255, 0.02); border-bottom-color: rgba(255, 255, 255, 0.08); }
.embed-modal .embed-btn { background: rgba(0, 0, 0, 0.75); color: #e7ecf5; border-color: rgba(255, 255, 255, 0.12); }
mark.search-hit {
  background: #514300;
  color: #fff5c2;
  padding: 0 2px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px #8c6f00 inset;
}
.doc-note.is-focused { box-shadow: 0 8px 24px rgba(93, 156, 255, 0.25); }
.empty { background: #121724; border-color: #2c3442; color: #9aa5bb; }
.folder-link { color: #e7ecf5; }
.search-bar input::placeholder { color: #9aa5bb; }

@media (max-width: 720px) {
  .doc-shell { border: none; box-shadow: none; background: transparent; }
  .doc-content { padding: 12px 0 18px; background: transparent; }
  .doc-toolbar { border: none; background: transparent; box-shadow: none; }
  .search-bar { background: transparent; border: none; }
  .search-bar input[type="search"],
  .search-bar select {
    background: #0f131c;
    border: 1px solid #2c3442;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  }
  .doc-note {
    border: none;
    background: #151925;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);
  }
  .doc-body { background: transparent; border: none; }
  .toc-toggle {
    background: var(--accent);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    color: #0b1021;
  }
  .toc-toggle:hover { background: var(--accent-2); }
}