:root {
  --brand: #FF6B2C;
  --primary: #C2410C;
  --primary-hover: #9A3412;
  --primary-soft: #FFF0E8;
  --primary-button: #C2410C;
  --primary-button-hover: #9A3412;
  --primary-button-text: #FFFFFF;
  --background: #FFFFFF;
  --surface: #F8FAFC;
  --surface-raised: #FFFFFF;
  --text: #0F172A;
  --muted: #64748B;
  --border: #E2E8F0;
  --success: #16A34A;
  --warning: #F59E0B;
  --danger: #DC2626;
  --code-bg: #0B1120;
  --shadow: 0 18px 48px rgba(255, 107, 44, .09);
  --radius-card: 16px;
  --radius-control: 10px;
  --nav-height: 68px;
}

[data-theme="dark"] {
  --brand: #FF7A3D;
  --primary: #FB923C;
  --primary-hover: #FDBA74;
  --primary-soft: #35170B;
  --primary-button: #C2410C;
  --primary-button-hover: #9A3412;
  --primary-button-text: #FFFFFF;
  --background: #020617;
  --surface: #0B1220;
  --surface-raised: #0F172A;
  --text: #E5EDF8;
  --muted: #94A3B8;
  --border: #1E293B;
  --success: #4ADE80;
  --warning: #FBBF24;
  --danger: #F87171;
  --code-bg: #060B16;
  --shadow: 0 18px 48px rgba(2, 6, 23, .36);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-height: 100dvh;
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: "Plus Jakarta Sans", ui-sans-serif, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }
img { max-width: 100%; }
::selection { background: var(--primary-soft); color: var(--text); }

.site-nav {
  min-height: var(--nav-height);
  background: color-mix(in srgb, var(--background) 92%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.public-nav-container { max-width: 1440px; margin: 0 auto; padding: 0 24px; }
.public-search { width: min(300px, 100%); }
.public-search .input-group-text { border-color: var(--border); color: var(--muted); }
.navbar-brand { color: var(--text); font-weight: 750; letter-spacing: -.03em; }
.navbar-brand:hover { color: var(--text); }
.brand-mark {
  position: relative;
  width: 158px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  overflow: hidden;
  background: transparent;
}
.brand-mark img { position: absolute; width: 100%; height: auto; display: block; top: 50%; left: 0; transform: translateY(-50%); }
.nav-link { color: var(--muted); font-weight: 600; white-space: nowrap; }
.nav-link:hover, .nav-link.active { color: var(--text); }
.navbar-toggler { width: 44px; height: 44px; display: inline-grid; place-items: center; padding: 0; border-radius: var(--radius-control); background: var(--surface); }
.mobile-menu-button { display: inline-grid; place-items: center; }
.mobile-menu-glyph { position: relative; display: block; width: 26px; height: 15px; }
.mobile-menu-glyph::before, .mobile-menu-glyph::after { content: ""; position: absolute; left: 0; height: 2px; border-radius: 999px; background: var(--text); }
.mobile-menu-glyph::before { top: 3px; width: 26px; }
.mobile-menu-glyph::after { top: 10px; width: 17px; }
.navbar-toggler[aria-expanded="true"] .mobile-menu-glyph::before { top: 7px; width: 24px; transform: rotate(45deg); }
.navbar-toggler[aria-expanded="true"] .mobile-menu-glyph::after { top: 7px; width: 24px; transform: rotate(-45deg); }
.mobile-menu-glyph::before, .mobile-menu-glyph::after { transition: top .18s ease, width .18s ease, transform .18s ease; }
.mobile-nav-close { width: 40px; height: 40px; display: grid; place-items: center; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-control); font-size: 1.2rem; }
.mobile-nav-caption { color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 2px 10px 10px; }

.btn {
  border-radius: var(--radius-control);
  font-weight: 650;
  padding: .63rem .95rem;
  white-space: nowrap;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { --bs-btn-bg: var(--primary-button); --bs-btn-border-color: var(--primary-button); --bs-btn-hover-bg: var(--primary-button-hover); --bs-btn-hover-border-color: var(--primary-button-hover); color: var(--primary-button-text); }
.btn-primary:hover { color: var(--primary-button-text); }
.btn-outline-secondary { --bs-btn-color: var(--text); --bs-btn-border-color: var(--border); --bs-btn-hover-bg: var(--surface); --bs-btn-hover-color: var(--text); --bs-btn-hover-border-color: var(--border); }
.btn-light { --bs-btn-bg: var(--surface-raised); --bs-btn-border-color: var(--border); --bs-btn-color: var(--text); }
.icon-button { width: 42px; height: 42px; padding: 0; display: inline-grid; place-items: center; }

.app-main, .public-main { min-height: calc(100dvh - var(--nav-height)); }
.public-footer { border-top: 1px solid var(--border); background: var(--surface); }
.public-footer-inner { max-width: 1200px; margin: 0 auto; padding: 34px 24px; display: grid; grid-template-columns: auto 1fr auto; gap: 36px; align-items: center; }
.public-footer p { color: var(--muted); margin: 0; }
.public-footer a:not(.navbar-brand) { color: var(--muted); font-size: .86rem; font-weight: 620; }
.public-footer .footer-credit { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; color: var(--text); }
.public-footer .footer-credit:hover { color: var(--primary); }
.public-footer a:hover { color: var(--text); }

.dashboard-body { background: var(--surface); }
.dashboard-shell { min-height: 100dvh; display: grid; grid-template-columns: 258px minmax(0, 1fr); }
.dashboard-sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  min-width: 0;
  flex-direction: column;
  padding: 20px 16px 14px;
  background: var(--surface-raised);
  border-right: 1px solid var(--border);
  z-index: 1020;
}
.dashboard-brand { display: flex; align-items: center; gap: 11px; color: var(--text); padding: 0 8px 22px; }
.dashboard-brand:hover { color: var(--text); }
.dashboard-brand > span:last-child { display: flex; flex-direction: column; line-height: 1.15; }
.dashboard-brand strong { font-size: 1rem; letter-spacing: -.025em; }
.dashboard-brand small { color: var(--muted); font-size: .68rem; font-weight: 620; margin-top: 3px; }
.dashboard-nav { display: flex; flex-direction: column; gap: 3px; }
.dashboard-nav-label { color: var(--muted); font-size: .67rem; font-weight: 760; letter-spacing: .09em; text-transform: uppercase; padding: 0 10px 6px; }
.dashboard-nav-link { display: flex; align-items: center; gap: 11px; min-height: 42px; padding: 8px 10px; border-radius: 10px; color: var(--muted); font-size: .87rem; font-weight: 650; }
.dashboard-nav-link i { font-size: 1.15rem; }
.dashboard-nav-link:hover { color: var(--text); background: var(--surface); }
.dashboard-nav-link.active { color: var(--primary); background: var(--primary-soft); }
.dashboard-sidebar-footer { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 6px; align-items: center; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); }
.dashboard-user { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 6px; border-radius: 10px; color: var(--text); }
.dashboard-user:hover { color: var(--text); background: var(--surface); }
.dashboard-user > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.dashboard-user strong, .dashboard-user small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-user strong { font-size: .79rem; }
.dashboard-user small { color: var(--muted); font-size: .68rem; }
.dashboard-avatar { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 10px; color: var(--primary); background: var(--primary-soft); font-size: .78rem; font-weight: 760; }
.dashboard-logout { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; color: var(--muted); background: transparent; border: 0; border-radius: 9px; }
.dashboard-logout:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, transparent); }
.dashboard-workspace { min-width: 0; }
.dashboard-topbar { position: sticky; top: 0; z-index: 1010; min-height: 68px; padding: 10px 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; background: color-mix(in srgb, var(--surface-raised) 94%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: blur(14px); }
.dashboard-search { width: min(390px, 42vw); height: 42px; display: flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); }
.dashboard-search i { color: var(--muted); }
.dashboard-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; }
.dashboard-search input::placeholder { color: var(--muted); }
.dashboard-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--primary) 14%, transparent); }
.dashboard-topbar-actions { display: flex; align-items: center; gap: 8px; }
.dashboard-main { min-height: calc(100dvh - 68px); min-width: 0; overflow: clip; }
.dashboard-main .page-shell { margin: 0 auto; }
.dashboard-mobile-sidebar { width: min(300px, 88vw); }
.dashboard-mobile-sidebar .offcanvas-header { border-bottom: 1px solid var(--border); }
.dashboard-mobile-sidebar .dashboard-brand { padding: 0; }
.page-shell { max-width: 1440px; margin: 0 auto; padding: 34px 24px 64px; }
.page-heading { margin-bottom: 28px; }
.page-heading h1 { font-size: clamp(1.8rem, 3vw, 2.55rem); line-height: 1.12; letter-spacing: -.045em; font-weight: 760; margin-bottom: .5rem; }
.page-heading p { color: var(--muted); max-width: 65ch; margin: 0; }
.text-muted { color: var(--muted) !important; }
.text-body { color: var(--text) !important; }

.surface-card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: none;
}
.surface-card.elevated { box-shadow: var(--shadow); }
.card-body-roomy { padding: 24px; }
.section-title { color: var(--text); font-size: 1.08rem; font-weight: 730; letter-spacing: -.02em; }
.eyebrow { color: var(--primary); font-size: .75rem; font-weight: 760; letter-spacing: .12em; text-transform: uppercase; }

.hero {
  max-width: 1440px;
  margin: 0 auto;
  padding: 42px 24px 52px;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
  gap: 48px;
  align-items: center;
  min-height: calc(100dvh - var(--nav-height));
}
.hero h1 { font-size: clamp(2.8rem, 4.7vw, 4.7rem); line-height: 1.04; letter-spacing: -.042em; word-spacing: .08em; font-weight: 780; max-width: none; margin: 0 0 22px; }
.hero h1 span { display: block; white-space: nowrap; }
.hero-copy { color: var(--muted); font-size: 1.12rem; max-width: 51ch; margin-bottom: 30px; }
.hero-visual { position: relative; }
.hero-visual img { width: 100%; max-height: 540px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-card); border: 1px solid var(--border); box-shadow: var(--shadow); }
.hero-note { position: absolute; right: 18px; bottom: 18px; max-width: 230px; padding: 15px 17px; border-radius: 12px; background: color-mix(in srgb, var(--surface-raised) 92%, transparent); border: 1px solid var(--border); backdrop-filter: blur(12px); color: var(--text); font-size: .84rem; }
.landing-section { max-width: 1200px; margin: 0 auto; padding: 72px 24px; }
.landing-section + .landing-section { border-top: 1px solid var(--border); }
.section-copy { max-width: 640px; margin-bottom: 32px; }
.section-copy h2 { font-size: clamp(1.85rem, 4vw, 3.2rem); letter-spacing: -.05em; line-height: 1.04; font-weight: 760; }
.section-copy p { color: var(--muted); max-width: 58ch; }
.feature-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 20px; }
.feature-cell { min-height: 215px; padding: 28px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-raised); }
.feature-cell.tint { background: var(--primary-soft); }
.feature-cell h3 { font-size: 1.3rem; font-weight: 730; letter-spacing: -.03em; }
.feature-cell p { color: var(--muted); max-width: 48ch; }
.feature-cell i { color: var(--primary); font-size: 1.65rem; }
.doc-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.doc-card { padding: 24px; min-height: 205px; display: flex; flex-direction: column; }
.doc-card h3 { font-size: 1.14rem; font-weight: 720; letter-spacing: -.025em; }
.public-doc-cover { width: calc(100% + 40px); height: 170px; margin: -20px -20px 20px; object-fit: cover; border-bottom: 1px solid var(--border); }
.public-category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.public-category-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 20px; min-height: 118px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-raised); }
.public-category-card img, .public-category-fallback { width: 150px; height: 90px; border-radius: 10px; object-fit: cover; }
.public-category-fallback { display: grid; place-items: center; color: var(--category-color); background: color-mix(in srgb, var(--category-color) 12%, var(--surface)); font-size: 1.8rem; }
.public-category-card h3 { font-size: 1rem; margin: 0 0 5px; }
.public-category-card p { color: var(--muted); font-size: .82rem; margin: 0; }
.doc-card p { color: var(--muted); }

.stats-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; background: var(--surface-raised); }
.stat-item { padding: 22px; min-width: 0; display: flex; align-items: center; gap: 14px; }
.stat-item + .stat-item { border-left: 1px solid var(--border); }
.stat-icon { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); border-radius: 11px; font-size: 1.15rem; }
.stat-label { color: var(--muted); font-size: .8rem; font-weight: 650; }
.stat-value { font-size: 1.75rem; font-weight: 760; letter-spacing: -.045em; line-height: 1.2; margin-top: 6px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .7fr); gap: 20px; }

.table { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--border); margin: 0; }
.table > :not(caption) > * > * { padding: 15px 16px; vertical-align: middle; }
.table thead th { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 720; border-bottom-width: 1px; }
.table tbody tr:last-child td { border-bottom: 0; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--surface); color: var(--text); }
.doc-title-link { color: var(--text); font-weight: 680; }
.doc-title-link:hover { color: var(--primary); }
.pinned-row > * { background: color-mix(in srgb, var(--primary-soft) 42%, var(--surface-raised)) !important; }
.pin-mark { color: var(--primary); font-size: .86rem; }

.badge-soft { display: inline-flex; align-items: center; padding: .35rem .58rem; border-radius: 8px; font-size: .72rem; font-weight: 720; border: 1px solid transparent; }
.badge-draft, .badge-internal { color: #9A6700; background: #FFF7D6; border-color: #FDE68A; }
.badge-published, .badge-public { color: #087B3E; background: #EAFBF0; border-color: #BBF7D0; }
.badge-archived, .badge-private { color: #9F1239; background: #FFF1F2; border-color: #FECDD3; }
.badge-unlisted { color: #C2410C; background: #FFF0E8; border-color: #FED7AA; }
[data-theme="dark"] .badge-draft, [data-theme="dark"] .badge-internal { color: #FCD34D; background: #352B08; border-color: #5A4709; }
[data-theme="dark"] .badge-published, [data-theme="dark"] .badge-public { color: #86EFAC; background: #082B1A; border-color: #14532D; }
[data-theme="dark"] .badge-archived, [data-theme="dark"] .badge-private { color: #FDA4AF; background: #3A0B19; border-color: #881337; }
[data-theme="dark"] .badge-unlisted { color: #FDBA74; background: #3B190B; border-color: #7C2D12; }

.form-label { color: var(--text); font-weight: 670; margin-bottom: .43rem; }
.form-text { color: var(--muted); }
.form-control, .form-select {
  color: var(--text);
  background-color: var(--surface-raised);
  border-color: var(--border);
  border-radius: var(--radius-control);
  padding: .7rem .82rem;
}
.form-control::placeholder { color: color-mix(in srgb, var(--muted) 78%, transparent); }
.form-control:focus, .form-select:focus { color: var(--text); background: var(--surface-raised); border-color: var(--primary); box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--primary) 18%, transparent); }
.form-check-input { background-color: var(--surface-raised); border-color: var(--border); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-error { color: var(--danger); font-size: .83rem; margin-top: .35rem; }

.filter-bar { display: grid; grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(130px, .7fr)) auto; gap: 10px; }
.empty-state { padding: 60px 24px; text-align: center; }
.empty-state i { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: var(--primary-soft); color: var(--primary); font-size: 1.7rem; }
.empty-state h2 { margin-top: 18px; font-size: 1.25rem; }
.empty-state p { color: var(--muted); max-width: 48ch; margin: 0 auto 20px; }

.editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.editor-pane { overflow: hidden; }
.editor-toolbar { min-height: 54px; padding: 10px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.markdown-editor { border: 0; border-radius: 0; resize: vertical; min-height: 590px; padding: 22px; font: 14px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; }
.markdown-editor:focus { box-shadow: none; }
.preview-pane { position: sticky; top: calc(var(--nav-height) + 18px); min-height: 646px; }
.preview-content { padding: 28px; min-height: 590px; max-height: calc(100dvh - 170px); overflow: auto; }
.document-password-settings { padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.password-setting-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 10px; color: var(--primary); background: var(--primary-soft); font-size: 1.1rem; }

.reader-page .public-footer { display: none; }
.reader-page .public-nav { box-shadow: none; }
.doc-layout { width: 100%; max-width: none; margin: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr) 260px; gap: 30px; padding: 0 32px; }
.doc-layout.reader-sidebar-collapsed { grid-template-columns: minmax(0, 1fr) 260px; max-width: none; }
.reader-sidebar-collapsed .doc-sidebar { display: none; }
.doc-sidebar, .doc-aside { position: sticky; top: var(--nav-height); height: calc(100dvh - var(--nav-height)); padding: 28px 0; }
.doc-sidebar { overflow-y: auto; }
.doc-sidebar { border-right: 1px solid var(--border); padding-right: 22px; }
.doc-aside { border-left: 1px solid var(--border); padding-left: 22px; padding-bottom: 48px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.doc-aside::-webkit-scrollbar { display: none; }
.doc-sidebar-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 18px; color: var(--text); font-size: .87rem; font-weight: 720; }
.doc-sidebar-heading small { color: var(--muted); font-size: .68rem; font-weight: 600; }
.reader-main { width: 100%; max-width: 1040px; min-width: 0; justify-self: center; padding: 32px 0 90px; }
.reader-sidebar-collapsed .reader-main { max-width: 1180px; justify-self: start; }
.reader-controls { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 38px; }
.reader-sidebar-toggle { align-items: center; gap: 7px; }
.reader-secondary-actions { display: none; align-items: center; gap: 6px; }
.reader-secondary-actions .btn { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; }
.reader-kicker { color: var(--primary); font-size: .76rem; font-weight: 720; }
.reader-title { font-size: clamp(2.15rem, 4.4vw, 3.55rem); line-height: 1.04; letter-spacing: -.052em; font-weight: 760; margin: 10px 0 16px; }
.reader-excerpt { font-size: 1.08rem; line-height: 1.7; color: var(--muted); max-width: 62ch; }
.reader-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; color: var(--muted); font-size: .8rem; padding: 16px 0 34px; }
.reader-cover { width: 100%; max-height: 430px; object-fit: cover; border-radius: var(--radius-card); border: 1px solid var(--border); margin: 0 0 34px; }
.reader-cover-leading { aspect-ratio: 16 / 7; margin-bottom: 30px; }
.doc-search { position: relative; margin-bottom: 22px; }
.doc-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.doc-search input { padding-left: 36px; font-size: .86rem; }
.sidebar-label { color: var(--muted); font-size: .72rem; font-weight: 730; text-transform: uppercase; letter-spacing: .08em; margin: 18px 0 7px; }
.sidebar-doc { display: flex; align-items: center; justify-content: space-between; gap: 9px; color: var(--muted); padding: 7px 10px; margin-left: -10px; border-radius: 8px; font-size: .84rem; line-height: 1.4; }
.sidebar-doc span { min-width: 0; }
.sidebar-doc > i { flex: 0 0 auto; font-size: .78rem; }
.sidebar-doc:hover, .sidebar-doc.active { color: var(--text); background: var(--surface); }
.toc-title { color: var(--text); font-weight: 710; font-size: .88rem; margin-bottom: 10px; }
.toc { overflow: visible; padding-right: 10px; }
.toc ul { list-style: none; padding: 0; margin: 0; }
.toc ul ul { padding-left: 13px; }
.toc a { display: block; color: var(--muted); font-size: .79rem; line-height: 1.4; padding: 6px 10px; border-left: 2px solid transparent; transition: color .18s ease, border-color .18s ease, background .18s ease; }
.toc a:hover { color: var(--text); }
.toc a.active { color: var(--primary); border-left-color: var(--primary); background: color-mix(in srgb, var(--primary-soft) 62%, transparent); font-weight: 650; }
.aside-action { width: 100%; justify-content: flex-start; display: flex; align-items: center; gap: 9px; margin-top: 8px; }
.reader-aside-divider { height: 1px; background: var(--border); margin: 20px 0; }
.reader-side-stats { display: grid; gap: 12px; }
.reader-side-stats div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.reader-side-stats strong { color: var(--text); font-size: .78rem; }
.reader-side-stats span { color: var(--muted); font-size: .72rem; }
.reader-management { padding-top: 24px; border-top: 1px solid var(--border); }
.reader-reactions { margin-top: 56px; padding: 24px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.reader-reactions h2 { font-size: 1rem; font-weight: 700; margin: 0 0 4px; }
.reaction-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.reaction-button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 13px; color: var(--muted); background: transparent; border: 1px solid var(--border); border-radius: var(--radius-control); font: inherit; font-size: .82rem; font-weight: 600; }
.reaction-button:hover, .reaction-button.active { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); background: var(--primary-soft); }
.reaction-button:active { transform: translateY(1px); }
.reaction-button:disabled { cursor: wait; opacity: .62; }
.reaction-count { color: inherit; font-variant-numeric: tabular-nums; }

.document-lock-wrap { min-height: calc(100dvh - var(--nav-height)); display: grid; place-items: center; padding: 48px 20px; }
.dashboard-main .document-lock-wrap { min-height: calc(100dvh - 68px); }
.document-lock-card { width: min(420px, 100%); }
.document-lock-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: var(--primary); background: var(--primary-soft); font-size: 1.35rem; margin-bottom: 24px; }
.document-lock-label { color: var(--primary); font-size: .75rem; font-weight: 730; margin-bottom: 8px; }
.document-lock-card h1 { color: var(--text); font-size: clamp(1.8rem, 5vw, 2.5rem); line-height: 1.08; letter-spacing: -.045em; font-weight: 750; margin-bottom: 12px; }
.document-lock-card > p:not(.document-lock-label) { color: var(--muted); margin-bottom: 26px; }
.password-input-group .input-group-text { color: var(--muted); background: var(--surface); border-color: var(--border); border-radius: var(--radius-control) 0 0 var(--radius-control); }
.password-input-group .form-control { border-radius: 0 var(--radius-control) var(--radius-control) 0; }
.password-input-group .form-control { border-radius: 0; }
.password-toggle { border-radius: 0 var(--radius-control) var(--radius-control) 0 !important; }
.category-password-menu { position: relative; }
.category-password-menu > summary { list-style: none; }
.category-password-menu > summary::-webkit-details-marker { display: none; }
.category-password-popover { position: absolute; z-index: 20; right: 0; top: calc(100% + 8px); width: 280px; padding: 16px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow); }
.category-cover-thumb, .category-cover-placeholder { width: 58px; height: 42px; flex: 0 0 58px; border-radius: 8px; border: 1px solid var(--border); }
.category-cover-thumb { display: block; object-fit: cover; }
.category-cover-placeholder { display: grid; place-items: center; color: var(--category-color); background: color-mix(in srgb, var(--category-color) 12%, var(--surface)); font-size: 1.1rem; }
.category-edit-shell { max-width: 820px; }
.category-edit-form { max-width: 680px; }
.category-cover-preview { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-card); border: 1px solid var(--border); margin-bottom: 24px; }
.document-lock-back { display: inline-flex; align-items: center; margin-top: 24px; color: var(--muted); font-size: .82rem; font-weight: 620; }
.document-lock-back:hover { color: var(--text); }

.markdown-body { color: var(--text); font-size: 1rem; line-height: 1.78; overflow-wrap: anywhere; }
.markdown-body > *:first-child { margin-top: 0; }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 { color: var(--text); font-weight: 730; letter-spacing: -.035em; scroll-margin-top: 95px; }
.markdown-body h1 { font-size: 2.1rem; margin: 2.5rem 0 1rem; }
.markdown-body h2 { font-size: 1.6rem; margin: 2.75rem 0 .9rem; padding-top: .25rem; }
.markdown-body h3 { font-size: 1.25rem; margin: 2rem 0 .75rem; }
.markdown-body p { margin: 0 0 1.2rem; }
.markdown-body a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--primary) 35%, transparent); text-underline-offset: 3px; }
.markdown-body blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 3px solid var(--primary); background: var(--surface); border-radius: 0 12px 12px 0; color: var(--muted); }
.markdown-body code:not(pre code) { color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: .13em .36em; font-size: .88em; }
.markdown-body pre { position: relative; background: var(--code-bg); border: 1px solid color-mix(in srgb, var(--border) 78%, transparent); border-radius: var(--radius-card); padding: 22px; overflow: auto; margin: 1.5rem 0; }
.markdown-body pre code { color: #E2E8F0; font: 13.5px/1.72 ui-monospace, SFMono-Regular, Consolas, monospace; text-shadow: none; }
.copy-code { position: absolute; top: 10px; right: 10px; z-index: 2; color: #CBD5E1; background: #182238; border: 1px solid #334155; border-radius: 8px; padding: 5px 9px; font-size: .73rem; }
.copy-code:hover { color: #FFFFFF; background: #24324D; }
.markdown-body table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; display: block; overflow-x: auto; }
.markdown-body th, .markdown-body td { padding: .75rem .9rem; border-bottom: 1px solid var(--border); text-align: left; min-width: 130px; }
.markdown-body th { background: var(--surface); font-weight: 700; }
.markdown-body img { border-radius: 12px; border: 1px solid var(--border); }
.mermaid { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 18px; margin: 1.5rem 0; overflow-x: auto; text-align: center; }

.auth-wrap { min-height: calc(100dvh - var(--nav-height)); display: grid; grid-template-columns: 1fr 1fr; }
.auth-intro { background: var(--surface); padding: 8vw; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--border); }
.auth-intro h1 { font-size: clamp(2.4rem, 5vw, 4.7rem); max-width: 9ch; line-height: 1; letter-spacing: -.06em; font-weight: 770; }
.auth-intro p { color: var(--muted); max-width: 44ch; }
.auth-panel { display: grid; place-items: center; padding: 30px; }
.auth-card { width: min(420px, 100%); }
.auth-card h2 { font-size: 1.8rem; font-weight: 750; letter-spacing: -.04em; }
.error-page { min-height: calc(100dvh - var(--nav-height)); display: grid; place-content: center; justify-items: center; padding: 24px; text-align: center; }
.error-visual { width: min(680px, 92vw); height: clamp(360px, 66dvh, 650px); overflow: hidden; }
.error-visual img { width: 100%; height: auto; transform: translateY(-17%); }
.error-copy { position: relative; z-index: 1; margin-top: -82px; }
.error-copy > p { color: var(--muted); margin-bottom: 18px; }
.error-credit { display: inline-flex; align-items: center; gap: 4px; margin-top: 24px; color: var(--muted); font-size: .78rem; font-weight: 650; }
.error-credit:hover { color: var(--primary); }

.list-group-item { color: var(--text); background: transparent; border-color: var(--border); }
.alert { border-radius: 12px; border-width: 1px; }
.toast-container { z-index: 1090; width: min(390px, 100%); margin-top: 74px; }
.app-toast { position: relative; overflow: hidden; width: 100%; color: #fff; background: #2563EB; border: 0; border-radius: 14px; box-shadow: 0 16px 40px rgb(15 23 42 / .18); }
.app-toast.toast-success { background: #15803D; }
.app-toast.toast-error { background: #C62828; }
.app-toast.toast-warning { background: #C2410C; }
.app-toast .toast-body { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 13px 14px; font-weight: 650; line-height: 1.45; }
.toast-status { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: rgb(255 255 255 / .16); font-size: 1.15rem; }
.toast-progress { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: rgb(255 255 255 / .45); transform-origin: left; animation: toast-progress 3.5s linear forwards; }
@keyframes toast-progress { to { transform: scaleX(0); } }
.delete-modal-icon { width: 42px; height: 42px; display: grid; place-items: center; color: var(--danger); background: color-mix(in srgb, var(--danger) 11%, transparent); border-radius: 12px; font-size: 1.15rem; }
.logout-modal-icon { width: 42px; height: 42px; display: grid; place-items: center; color: var(--danger); background: color-mix(in srgb, var(--danger) 11%, transparent); border-radius: 12px; font-size: 1.15rem; }
.btn-danger { color: #fff; background: var(--danger); border-color: var(--danger); }
.dropdown-menu { color: var(--text); background: var(--surface-raised); border-color: var(--border); border-radius: 12px; box-shadow: var(--shadow); }
.dropdown-item { color: var(--text); }
.dropdown-item:hover { color: var(--text); background: var(--surface); }
.modal-content, .offcanvas { color: var(--text); background: var(--surface-raised); border-color: var(--border); }

@media (max-width: 1199.98px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .stat-item:nth-child(4) { border-left: 0; border-top: 1px solid var(--border); }
  .stat-item:nth-child(5), .stat-item:nth-child(6) { border-top: 1px solid var(--border); }
  .doc-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 26px; }
  .doc-layout.reader-sidebar-collapsed { grid-template-columns: minmax(0, 1fr); max-width: none; }
  .doc-aside { display: none; }
  .reader-secondary-actions { display: flex; }
  .filter-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1799.98px) and (min-width: 992px) {
  .dashboard-main .doc-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 28px; max-width: none; }
  .dashboard-main .doc-aside { display: none; }
  .dashboard-main .doc-layout.reader-sidebar-collapsed { grid-template-columns: minmax(0, 1fr); max-width: none; }
  .dashboard-main .reader-secondary-actions { display: flex; }
}

@media (max-width: 991.98px) {
  .public-nav .navbar-collapse { margin: 10px -16px 0; padding: 12px 16px 18px; background: var(--surface-raised); border-top: 1px solid var(--border); box-shadow: 0 18px 30px color-mix(in srgb, var(--text) 7%, transparent); }
  .public-nav .navbar-nav { align-items: stretch !important; margin: 0 0 12px !important; gap: 4px; }
  .public-nav .nav-link { min-height: 46px; display: flex; align-items: center; padding: 10px 12px; border-radius: var(--radius-control); color: var(--text); }
  .mobile-nav-actions { width: 100%; padding-top: 12px; border-top: 1px solid var(--border); }
  .mobile-nav-actions > a { flex: 1; justify-content: center; min-height: 46px; }
  .dashboard-shell { grid-template-columns: minmax(0, 1fr); }
  .hero { min-height: auto; grid-template-columns: 1fr; padding-top: 46px; gap: 38px; }
  .hero h1 { max-width: 13ch; }
  .hero-visual { max-width: 820px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .doc-layout { display: block; padding: 0 20px; }
  .doc-sidebar { display: none; }
  .reader-main { max-width: 760px; margin: 0 auto; }
  .reader-controls { margin-bottom: 30px; }
  .editor-layout { grid-template-columns: 1fr; }
  .preview-pane { position: static; min-height: 400px; }
  .preview-content { min-height: 350px; max-height: none; }
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-intro { display: none; }
  .feature-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
  .public-nav-container { padding: 0 16px; }
  .public-nav { min-height: 64px; }
  .public-nav .navbar-brand .brand-mark { width: 132px; height: 38px; }
  .public-nav .navbar-collapse { margin: 10px -16px 0; padding: 12px 16px 18px; background: var(--surface-raised); border-top: 1px solid var(--border); box-shadow: 0 18px 30px color-mix(in srgb, var(--text) 7%, transparent); }
  .public-nav .navbar-nav { align-items: stretch !important; margin: 0 0 12px !important; gap: 4px; }
  .public-nav .nav-link { min-height: 46px; display: flex; align-items: center; padding: 10px 12px; border-radius: var(--radius-control); color: var(--text); }
  .public-nav .nav-link:hover, .public-nav .nav-link:active { background: var(--surface); color: var(--primary); }
  .public-search { width: 100%; }
  .public-search .input-group { min-height: 46px; }
  .mobile-nav-actions { width: 100%; padding-top: 12px; border-top: 1px solid var(--border); }
  .mobile-nav-actions > a { flex: 1; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; }
  .mobile-nav-actions > [data-theme-toggle] { width: 46px; height: 46px; flex: 0 0 46px; }
  .dashboard-mobile-sidebar { width: min(340px, 88vw); border-right: 1px solid var(--border); }
  .dashboard-mobile-sidebar .offcanvas-header { min-height: 72px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
  .dashboard-mobile-sidebar .offcanvas-body { padding: 18px 14px; }
  .dashboard-mobile-sidebar .dashboard-nav-link { min-height: 48px; padding: 10px 12px; }
  .dashboard-mobile-sidebar .dashboard-brand .brand-mark { width: 145px; height: 40px; }
  .public-footer-inner { grid-template-columns: 1fr; gap: 16px; padding: 28px 16px; }
  .dashboard-topbar { padding: 9px 12px; }
  .dashboard-search { width: min(210px, 50vw); }
  .dashboard-search input::placeholder { color: transparent; }
  .dashboard-topbar-actions .btn-primary { width: 42px; padding-left: 0; padding-right: 0; font-size: 0; }
  .dashboard-topbar-actions .btn-primary i { font-size: 1rem; margin: 0 !important; }
  .page-shell { padding: 26px 16px 48px; }
  .hero { padding: 38px 16px 44px; }
  .hero h1 { font-size: clamp(2.65rem, 14vw, 4.1rem); }
  .hero h1 span { white-space: normal; }
  .hero-note { position: static; max-width: none; margin-top: 10px; }
  .landing-section { padding: 52px 16px; }
  .doc-card-grid { grid-template-columns: 1fr; }
  .public-category-grid { grid-template-columns: 1fr; }
  .public-category-card { grid-template-columns: 105px minmax(0, 1fr); }
  .public-category-card img, .public-category-fallback { width: 105px; height: 72px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(n) { border-top: 1px solid var(--border); border-left: 0; }
  .stat-item:nth-child(1), .stat-item:nth-child(2) { border-top: 0; }
  .stat-item:nth-child(even) { border-left: 1px solid var(--border); }
  .filter-bar { grid-template-columns: 1fr; }
  .reader-main { padding-top: 34px; }
  .reader-title { font-size: 2.35rem; }
  .auth-panel { padding: 32px 16px; place-items: start center; }
  .error-page { padding: 16px; }
  .error-visual { width: min(520px, 100vw); height: 420px; }
  .error-copy { margin-top: -64px; }
  .table-responsive .table { min-width: 780px; }
  .card-body-roomy { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media (min-width: 992px) and (max-height: 760px) {
  .hero { align-items: center; padding-top: 30px; min-height: calc(100dvh - var(--nav-height)); }
  .hero h1 { font-size: clamp(2.65rem, 4.2vw, 4rem); }
  .hero-visual img { max-height: 470px; }
}

@media print {
  .site-nav, .doc-sidebar, .doc-aside, .copy-code, .no-print { display: none !important; }
  .doc-layout { display: block; max-width: 850px; padding: 0; }
  .reader-main { padding: 0; }
  body { background: #FFFFFF; color: #0F172A; }
}