/* ── SKIP LINK ────────────────────────────────────────────────────────────── */
.skip-link {
  position: fixed;
  top: -48px; left: 50%; transform: translateX(-50%);
  padding: 8px 20px;
  background: oklch(56% 0.15 74); color: #fff;
  font-size: 13px; font-weight: 600; font-family: 'DM Sans', sans-serif;
  white-space: nowrap; text-decoration: none;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 2px 10px oklch(56% 0.15 74 / 0.35);
  z-index: 9999; transition: top 0.15s;
}
.skip-link:focus { top: 0; outline: none; }
html.dark .skip-link { background: oklch(72% 0.15 76); color: oklch(22% 0.010 60); box-shadow: 0 2px 10px oklch(72% 0.15 76 / 0.4); }

/* ── SITE HEADER ─────────────────────────────────────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(18px);
  background: oklch(99% 0.006 76 / 0.92);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.header-inner {
  max-width: 680px; margin: 0 auto; padding: 0 20px; height: 58px;
  display: flex; align-items: center; justify-content: center;
}
.site-logo {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; color: var(--text);
  text-decoration: none; border-radius: 50%; padding: 6px;
}
.site-logo::before {
  content: ''; position: absolute; inset: 1px; border-radius: 50%;
  border: 2px solid transparent; transition: border-color 0.15s; pointer-events: none;
}
.site-logo svg > circle { transition: fill 0.15s; }
.site-logo svg > g { transition: color 0.15s; }
.site-logo:hover::before, .site-logo:focus-visible::before { border-color: oklch(56% 0.15 74); }
html.dark .site-logo:hover::before, html.dark .site-logo:focus-visible::before { border-color: oklch(72% 0.15 76); }
.site-logo:hover svg > circle, .site-logo:focus-visible svg > circle { fill: oklch(56% 0.15 74); }
.site-logo:hover svg > g, .site-logo:focus-visible svg > g { color: oklch(99% 0.006 76); }
html.dark .site-logo:hover svg > circle, html.dark .site-logo:focus-visible svg > circle { fill: oklch(72% 0.15 76); }
.logo-stack { position: relative; display: inline-flex; width: 28px; height: 28px; }
.logo-search-icon {
  position: absolute; bottom: -3px; right: -5px;
  width: 13px; height: 13px; color: var(--accent); stroke-width: 2.5;
}
.header-title {
  font-family: 'Playfair Display', serif; font-style: italic;
  font-size: 21px; font-weight: 600; line-height: 1; color: var(--text);
  text-decoration: none; display: inline-flex; align-items: center;
}
.header-title:hover { color: var(--accent); }
.nav-buttons { position: absolute; right: 16px; display: flex; align-items: center; gap: 2px; }
.nav-btn {
  min-width: 36px; height: 36px; border: none; background: none; cursor: pointer;
  border-radius: 8px; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; gap: 4px;
  transition: background 0.15s, color 0.15s; text-decoration: none;
  font-size: 13px; font-weight: 500; padding: 0 8px; font-family: 'DM Sans', sans-serif;
}
.nav-btn i, .nav-btn svg, .nav-btn [data-lucide] { width: 16px; height: 16px; flex-shrink: 0; }
.nav-btn-text { display: none; }
.nav-btn:hover { background: var(--surface-alt); color: var(--text); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible { outline: 2px solid oklch(56% 0.15 74); outline-offset: 3px; border-radius: 3px; }
.nav-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px oklch(56% 0.15 74); border-radius: 8px; }
.site-logo:focus-visible { outline: none; box-shadow: none; }
.header-title:focus-visible { outline: 2px solid oklch(56% 0.15 74); outline-offset: 8px; border-radius: 3px; box-shadow: none; }
.cookie-actions button:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px oklch(56% 0.15 74); border-radius: 8px; }
#cookie-decline:focus-visible { outline: none; box-shadow: 0 0 0 1px oklch(56% 0.15 74); border-color: oklch(56% 0.15 74); border-radius: 8px; }
#bsc-theme-btn { border-radius: 4px; }
#bsc-theme-btn:focus-visible { outline: 2px solid oklch(56% 0.15 74); outline-offset: 3px; }
@media (min-width: 480px) {
  .nav-btn { min-width: auto; }
  .nav-btn-text { display: inline; }
}
@media (max-width: 525px) {
  .header-inner { justify-content: flex-start; padding-left: 80px; }
}
@media (max-width: 360px) {
  .header-inner { padding: 0 12px 0 72px; height: 52px; }
}

/* ── PAGE / PANEL WRAPPER ────────────────────────────────────────────────── */
.page, .panel { max-width: 680px; margin: 0 auto; padding: 36px 20px 28px; }
@media (max-width: 480px) { .page, .panel { padding: 20px 16px 20px; } }
/* ── CHAPTER HEADER ──────────────────────────────────────────────────────── */
chapter-header {
  display: block;
  margin-bottom: 16px;
}
.guide-heading {
  font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 700; font-style: italic;
  margin-bottom: 4px;
}
chapter-header h1,
chapter-header .guide-heading {
  margin-bottom: 0;
  text-align: center;
}
.chapter-sub {
  font-size: 14px;
  color: oklch(36% 0.022 62);
  margin-top: 14px;
  margin-bottom: 0;
  text-align: center;
}
.chapter-sub-hint { color: oklch(36% 0.022 62); }
chapter-rule { display: flex; align-items: center; gap: 14px; }
.chapter-rule--top { margin-bottom: 20px; }
.chapter-rule--bottom { margin-top: 16px; }
.chapter-rule--guide      { margin: 18px 0 16px; }
.chapter-rule--guide-foot { margin: 24px 0 16px; }
.chapter-rule-line { flex: 1; height: 1px; background: oklch(56% 0.15 74); }
.chapter-rule-dots {
  flex-shrink: 0; color: oklch(56% 0.15 74);
  display: inline-flex; align-items: center; gap: 6px;
}
.crd-pip {
  display: inline-block; width: 4px; height: 4px; min-width: 4px; min-height: 4px;
  border-radius: 50%; background-color: oklch(56% 0.15 74); flex-shrink: 0;
}
.crd-gem { display: block; flex-shrink: 0; width: 12px; height: 12px; }
.crd-gem-dark { display: none; flex-shrink: 0; width: 14px; height: 14px; }
.dm-only { display: none; }

/* ── SITE FOOTER ─────────────────────────────────────────────────────────── */
.bsc-footer {
  text-align: center;
  padding: 16px 20px;
  font-size: 12px;
  color: oklch(72% 0.012 270);
  margin-top: 8px;
}
.bsc-footer a, .bsc-footer button { color: oklch(56% 0.15 74); text-decoration: underline; }
.bsc-footer a:hover, .bsc-footer button:hover { color: oklch(50% 0.17 74); }

/* ── PAPER BOX ──────────────────────────────────────────────────────────── */
.paper-box {
  background: oklch(98.5% 0.010 55);
  border: 1px solid oklch(90% 0.014 58);
  border-radius: 12px;
  box-shadow:
    0 1px 2px oklch(55% 0.08 74 / 0.07),
    0 3px 12px oklch(55% 0.08 74 / 0.08),
    inset 0 1px 0 oklch(100% 0 0 / 0.55);
}
.paper-box--compact { border-radius: 10px; }
.paper-box--interactive {
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.paper-box--interactive:hover {
  border-color: oklch(56% 0.15 74);
  box-shadow:
    0 4px 24px oklch(58% 0.05 280 / 0.14),
    inset 0 1px 0 oklch(100% 0 0 / 0.55);
  transform: translateY(-2px);
}
.paper-box__title {
  font-family: 'Playfair Display', serif; font-style: italic;
  font-size: 17px; font-weight: 600; line-height: 1.3;
  text-align: center; margin-bottom: 10px;
}
.paper-box__divider { height: 1px; background: oklch(90% 0.014 58); margin: 14px 0; }

/* ── COOKIE BANNER ───────────────────────────────────────────────────────── */
#cookie-banner {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: oklch(99% 0.006 76);
  border-top: 1px solid oklch(88% 0.024 280);
  box-shadow: 0 -2px 12px oklch(58% 0.05 280 / 0.12);
  padding: 14px 24px;
  gap: 16px; flex-wrap: wrap;
  align-items: center; justify-content: center;
  font-size: 14px; color: oklch(52% 0.018 62);
}
#cookie-banner.visible { display: flex; }
.cookie-actions { display: flex; gap: 8px; flex-shrink: 0; }
.cookie-actions button {
  padding: 8px 18px; border-radius: 8px; font-size: 14px;
  font-family: 'DM Sans', sans-serif; cursor: pointer;
  border: 1px solid oklch(88% 0.024 280);
}
#cookie-accept { background: oklch(56% 0.15 74); color: #fff; border-color: oklch(56% 0.15 74); }
#cookie-accept:hover { background: oklch(50% 0.17 74); }
#cookie-decline { background: transparent; color: oklch(52% 0.018 62); }
#cookie-decline:hover { background: oklch(96% 0.016 288); }
#cookie-banner p { text-align: center; }
#cookie-banner a { color: oklch(56% 0.15 74); text-decoration: underline; white-space: nowrap; }

/* ── DARK MODE ─ Cozy Night Sky ─────────────────────────────────────────── */
html.dark {
  color-scheme: dark;
  --surface:      oklch(22% 0.06 290 / 0.42);
  --surface-alt:  oklch(26% 0.05 285 / 0.42);
  --border:       oklch(88% 0.04 88 / 0.30);
  --text:         oklch(94% 0.022 85);
  --text-muted:   oklch(80% 0.010 84);
  --text-faint:   oklch(68% 0.010 82);
  --accent:       oklch(72% 0.15 76);
  --accent-hover: oklch(79% 0.16 76);
  --shadow-sm: 0 1px 6px  oklch(0% 0 0 / 0.35);
  --shadow:    0 3px 18px oklch(0% 0 0 / 0.40);
  --shadow-lg: 0 8px 48px oklch(0% 0 0 / 0.50);
}

html.dark body {
  background: linear-gradient(145deg,
    oklch(23% 0.11 310)  0%,
    oklch(22% 0.095 300) 20%,
    oklch(22% 0.08 230)  52%,
    oklch(15% 0.065 260) 100%);
  color: var(--text);
}

html.dark .header { background: oklch(17% 0.06 290 / 0.55); border-bottom: none; }
html.dark .site-logo:hover svg > g, html.dark .site-logo:focus-visible svg > g { color: oklch(18% 0.08 295); }
html.dark .nav-btn { color: oklch(86% 0.012 82); transition: filter 0.2s, color 0.15s; }
html.dark .nav-btn:hover { background: oklch(72% 0.15 76 / 0.12); color: oklch(82% 0.15 76); filter: none; }
html.dark a:focus-visible, html.dark button:focus-visible, html.dark input:focus-visible,
html.dark select:focus-visible, html.dark textarea:focus-visible { outline: 2px solid oklch(72% 0.15 76); outline-offset: 3px; border-radius: 3px; }
html.dark .nav-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px oklch(72% 0.15 76), 0 0 12px oklch(72% 0.15 76 / 0.45); border-radius: 8px; filter: none; }
html.dark .site-logo:focus-visible { outline: none; box-shadow: none; filter: none; }
html.dark .header-title:focus-visible { outline: 2px solid oklch(72% 0.15 76); outline-offset: 8px; border-radius: 3px; box-shadow: none; }
html.dark .cookie-actions button:focus-visible { outline: none; box-shadow: 0 0 0 2px oklch(22% 0.06 290), 0 0 0 4px oklch(72% 0.15 76); border-radius: 8px; }
html.dark #cookie-decline:focus-visible { outline: none; box-shadow: 0 0 0 1px oklch(72% 0.15 76); border-color: oklch(72% 0.15 76); border-radius: 8px; }
html.dark #bsc-theme-btn:focus-visible { outline-color: oklch(72% 0.15 76); }

html.dark .chapter-rule-line { background: var(--accent); }
html.dark .chapter-rule-dots { color: var(--accent); }
html.dark .crd-pip { background-color: var(--accent); }
html.dark .crd-gem { display: none; }
html.dark .crd-gem-dark { display: block; }
html.dark .dm-hidden { display: none; }
html.dark .dm-only { display: inline-block; }

html.dark .paper-box {
  background: var(--surface);
  backdrop-filter: blur(12px);
  border-color: oklch(88% 0.04 88 / 0.55);
  box-shadow:
    0 1px 2px oklch(0% 0 0 / .35),
    0 8px 24px oklch(0% 0 0 / .45),
    inset 0 1px 0 oklch(100% 0 0 / .05);
}
html.dark .paper-box--interactive:hover {
  border-color: var(--accent);
  box-shadow:
    0 12px 28px oklch(0% 0 0 / .45),
    0 0 0 1px oklch(from var(--accent) l c h / .28),
    inset 0 1px 0 oklch(100% 0 0 / .05);
}
html.dark .paper-box__divider { background: oklch(88% 0.04 88 / 0.35); }

html.dark .chapter-sub { color: oklch(93% 0.028 84); }
html.dark .chapter-sub-hint { color: oklch(93% 0.028 84); }

html.dark .bsc-footer { color: oklch(78% 0.018 78); font-size: 13px; margin-top: 0; }
html.dark .bsc-footer p { color: var(--text-muted); }
html.dark .bsc-footer a, html.dark .bsc-footer button { color: oklch(72% 0.018 62); }
html.dark .bsc-footer a:hover, html.dark .bsc-footer button:hover { color: oklch(84% 0.018 62); }

html.dark #cookie-banner {
  background: oklch(22% 0.06 290 / 0.48);
  backdrop-filter: blur(16px);
  border-top-color: transparent;
  color: var(--text-muted);
}
html.dark #cookie-banner a { color: var(--accent); }
html.dark #cookie-accept { background: var(--accent); color: oklch(22% 0.010 60); border-color: var(--accent); }
html.dark #cookie-accept:hover { background: var(--accent-hover); }
html.dark #cookie-decline { color: var(--text-muted); }
html.dark #cookie-decline:hover { background: var(--surface-alt); color: var(--text); }
html.dark .cookie-actions button { border-color: var(--border); }

/* ── THEME TOGGLE BUTTON ─────────────────────────────────────────────────── */
.theme-toggle .icon-sun { display: none; }
html.dark .theme-toggle .icon-sun { display: block; }
html.dark .theme-toggle .icon-moon { display: none; }

.theme-toggle--fixed {
  position: fixed; top: 14px; right: 14px; z-index: 200;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  box-shadow: 0 1px 4px oklch(0% 0 0 / 0.10);
  padding: 0;
}
.theme-toggle--fixed:hover { color: var(--accent); border-color: var(--accent); }