:root {
  --bg:#f4f7fb; --panel:#ffffff; --line:#e6ebf2; --text:#172033; --muted:#6b768a;
  --brand:#315efb; --brand-soft:#eef3ff; --sidebar:#0f172a; --sidebar-text:#c5cedd;
  --sidebar-active:#ffffff; --topbar:#ffffff; --success:#0f766e; --success-bg:#ccfbf1;
  --warning:#b45309; --warning-bg:#fef3c7; --info:#4338ca; --info-bg:#e0e7ff;
  --history:#334155; --history-bg:#e2e8f0; --shadow:0 12px 28px rgba(15,23,42,.06);
  --radius:18px; --footer:#f8fafc;
}
body.theme-dark {
  --bg:#0b1220; --panel:#121b2b; --line:#223048; --text:#e5edf9; --muted:#9badc6;
  --brand:#7aa2ff; --brand-soft:#1a2640; --sidebar:#081120; --sidebar-text:#bdcce2;
  --sidebar-active:#ffffff; --topbar:#0f1726; --success:#6ee7b7; --success-bg:#123b31;
  --warning:#fbbf24; --warning-bg:#4a3410; --info:#a5b4fc; --info-bg:#2a2f66;
  --history:#d7e2f2; --history-bg:#243246; --shadow:none; --footer:#0f1726;
}
* { box-sizing:border-box; }
body { margin:0; font-family: Arial, sans-serif; background:var(--bg); color:var(--text); }
.layout { min-height:100vh; display:grid; grid-template-columns:clamp(232px, 18vw, 272px) minmax(0, 1fr); align-items:start; position:relative; }
.sidebar-toggle-state { position:absolute; opacity:0; pointer-events:none; }
.sidebar-overlay { display:none; }
.sidebar { position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto; scrollbar-gutter:stable; background:var(--sidebar); color:var(--sidebar-text); padding:22px 12px; display:flex; flex-direction:column; gap:18px; z-index:40; }
.sidebar-mobile-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.sidebar-close-btn, .sidebar-toggle-btn { display:none; }
.sidebar-close-btn { color:#fff; font-size:30px; line-height:1; cursor:pointer; padding:4px 10px; border-radius:12px; }
.sidebar-close-btn:hover, .sidebar-toggle-btn:hover { background:rgba(255,255,255,.08); }
.brand { color:#fff; font-size:18px; font-weight:700; }
.brand-sub { font-size:13px; color:#8ea0bd; line-height:1.4; }
.nav-title { font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:#7b8ca8; margin:14px 10px 4px; font-weight:700; }
.nav a { display:flex; align-items:center; gap:12px; color:var(--sidebar-text); text-decoration:none; padding:12px 14px; border-radius:14px; margin-bottom:6px; font-size:14px; font-weight:700; line-height:1.2; }
.nav-icon { width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; color:#e2e8f0; flex:0 0 20px; }
.nav-icon svg { width:20px; height:20px; display:block; }
.nav a span:last-child { flex:1 1 auto; min-width:0; }
.nav a.active .nav-icon, .nav a:hover .nav-icon { color:#e2e8f0; }
.nav a.active, .nav a:hover { background:rgba(255,255,255,.08); color:var(--sidebar-active); }
.content { display:flex; flex-direction:column; min-width:0; min-height:100vh; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 24px; background:var(--topbar); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; }
.topbar-left { display:flex; align-items:center; gap:12px; min-width:0; }
.workspace-pill { display:inline-flex; gap:8px; align-items:center; background:var(--brand-soft); color:var(--brand); border-radius:999px; padding:8px 12px; font-size:13px; font-weight:700; }
.topbar-right { display:flex; align-items:center; gap:10px; }
.switcher { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.switcher select { border:none; background:transparent; color:var(--text); font-size:13px; }
.switcher button { border:none; background:transparent; color:var(--brand); font-weight:700; cursor:pointer; }
.userbox { display:flex; align-items:center; gap:12px; }
.user-meta { text-align:right; }
.user-meta strong { display:block; font-size:14px; }
.user-meta span { color:var(--muted); font-size:12px; }
.logout { border:none; background:#111827; color:#fff; padding:10px 14px; border-radius:10px; cursor:pointer; }
.main { padding:24px; flex:1; min-width:0; }
.page-head { margin-bottom:20px; display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.page-head h1 { margin:0 0 6px; font-size:30px; }
.muted { color:var(--muted); font-size:14px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.stat { font-size:34px; font-weight:700; margin-top:8px; }
.stat-sm { font-size:20px; font-weight:700; }
table { width:100%; border-collapse:collapse; }
th, td { padding:14px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
tr:last-child td { border-bottom:none; }
.badge { display:inline-block; padding:5px 10px; border-radius:999px; font-size:12px; font-weight:700; }
.badge.current { background:var(--success-bg); color:var(--success); }
.badge.history { background:var(--history-bg); color:var(--history); }
.badge.planned { background:var(--warning-bg); color:var(--warning); }
.badge.info { background:var(--info-bg); color:var(--info); }
.badge.beta { background:#ede9fe; color:#6d28d9; }
.ticket-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; font-size:12px; font-weight:700; border:1px solid var(--line); background:var(--panel); }
.ticket-priority-critical { color:#b91c1c; border-color:#fecaca; background:#fef2f2; }
.ticket-priority-high { color:#9a3412; border-color:#fdba74; background:#fff7ed; }
.ticket-priority-low { color:#1d4ed8; border-color:#bfdbfe; background:#eff6ff; }
.ticket-priority-normal { color:#111827; border-color:#d1d5db; background:#ffffff; }
.ticket-status-in-progress { color:#15803d; border-color:#bbf7d0; background:#f0fdf4; }
.ticket-status-open { color:#b91c1c; border-color:#fecaca; background:#fef2f2; }
.ticket-status-closed { color:#111827; border-color:#cbd5e1; background:#e2e8f0; }
.ticket-status-neutral { color:var(--text); border-color:var(--line); background:var(--panel); }
.ticket-blocked-yes { color:#b91c1c; border-color:#fecaca; background:#fef2f2; }
.ticket-blocked-no { color:#111827; border-color:#d1d5db; background:#ffffff; }
.alert-card { border-color:#fecaca; background:#fff1f2; color:#9f1239; font-weight:700; }
.audit-detail { padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--bg); }
body.theme-dark .ticket-priority-critical, body.theme-dark .ticket-status-open, body.theme-dark .ticket-blocked-yes { background:#3f1116; border-color:#7f1d1d; color:#fecaca; }
body.theme-dark .ticket-priority-high { background:#402510; border-color:#9a3412; color:#fdba74; }
body.theme-dark .ticket-priority-low { background:#13254d; border-color:#1d4ed8; color:#bfdbfe; }
body.theme-dark .ticket-priority-normal, body.theme-dark .ticket-blocked-no, body.theme-dark .ticket-status-closed { background:#1f2937; border-color:#334155; color:#e5e7eb; }
body.theme-dark .ticket-status-in-progress { background:#123b31; border-color:#166534; color:#bbf7d0; }
body.theme-dark .ticket-status-neutral, body.theme-dark .audit-detail { background:#162235; border-color:#223048; }
body.theme-dark .alert-card { background:#3f1116; border-color:#7f1d1d; color:#fecaca; }
.actions { display:flex; gap:10px; flex-wrap:wrap; }
.secondary, .primary, .ghost { padding:10px 14px; border-radius:10px; text-decoration:none; font-weight:700; }
.secondary { background:#fff; color:#111827; border:1px solid var(--line); }
.primary { background:linear-gradient(135deg,#37456c,#a54a83); color:#fff; border:none; box-shadow:0 10px 22px rgba(55,69,108,.18); }
.ghost { background:var(--brand-soft); color:var(--brand); border:none; }
.hero { display:grid; grid-template-columns:1.4fr .8fr; gap:16px; }
.list { display:grid; gap:12px; }
.list-item { padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:color-mix(in srgb, var(--panel) 80%, transparent); }
.footer { display:flex; justify-content:space-between; gap:16px; padding:14px 24px; border-top:1px solid var(--line); background:var(--footer); color:var(--muted); font-size:13px; }
.toolbar-note { font-size:12px; color:var(--muted); }
@media (max-width: 1180px) {
  .layout { grid-template-columns:clamp(232px, 22vw, 272px) minmax(0,1fr); }
  .topbar, .footer { gap:12px; }
}
@media (max-width: 1100px) {
  .layout { grid-template-columns:1fr; }
  .sidebar-toggle-btn { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; background:#111827; color:#fff; cursor:pointer; font-size:22px; box-shadow:var(--shadow); }
  .sidebar-close-btn { display:inline-flex; align-items:center; justify-content:center; }
  .sidebar { position:fixed; left:0; top:0; bottom:0; width:min(320px, 86vw); height:100dvh; transform:translateX(-108%); transition:transform .24s ease; box-shadow:0 18px 46px rgba(0,0,0,.28); }
  .sidebar-overlay { display:block; position:fixed; inset:0; background:rgba(15,23,42,.46); opacity:0; pointer-events:none; transition:opacity .24s ease; z-index:35; }
  .sidebar-toggle-state:checked ~ .layout .sidebar { transform:translateX(0); }
  .sidebar-toggle-state:checked ~ .layout .sidebar-overlay { opacity:1; pointer-events:auto; }
  .content { min-width:0; }
  .hero { grid-template-columns:1fr; }
}
@media (max-width: 900px) {
  .topbar, .footer { flex-direction:column; align-items:flex-start; }
}
@media (max-width: 640px) {
  .main { padding:18px 14px; }
  .topbar { padding:14px; }
  .userbox { width:100%; justify-content:space-between; }
  .topbar-right { width:100%; flex-wrap:wrap; }
}
.list-pagination { display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; margin:16px 0 0; }
@media (max-width: 980px) { .list-pagination { grid-template-columns:1fr; } }


/* Login experience */
.login-page {
  min-height: 100vh;
  margin: 0;
  background: linear-gradient(135deg, #2a3549 0%, #37456c 42%, #a54a83 100%);
  color: #2a3549;
}
.login-stage {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(320px, 520px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(12px, 3vw, 40px);
  padding: clamp(18px, 2vw, 28px);
  background:
    radial-gradient(circle at 16% 16%, rgba(209,209,209,0.16), transparent 20%),
    radial-gradient(circle at 72% 24%, rgba(165,74,131,0.26), transparent 18%),
    linear-gradient(135deg, #2a3549 0%, #37456c 52%, #a54a83 100%);
}
.login-showcase-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(42,53,73,0.10), rgba(42,53,73,0.03));
}
.login-panel,
.login-scene {
  position: relative;
  z-index: 3;
}
.login-panel {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding-left: clamp(4px, 1.5vw, 18px);
}
.login-card {
  width: 100%;
  max-width: 460px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(209,209,209,0.58);
  border-radius: 28px;
  box-shadow: 0 28px 75px rgba(42,53,73,0.28);
  padding: 34px 32px 30px;
  backdrop-filter: blur(10px);
}
.login-brand-row { display:flex; align-items:center; gap:16px; margin-bottom: 28px; }
.login-brand-mark { width:68px; height:68px; flex:0 0 68px; }
.login-brand-title { font-size: 38px; line-height: 1; font-weight: 800; color: #2a3549; letter-spacing: -0.03em; }
.login-brand-subtitle { margin-top: 7px; color: #6b7280; font-size: 14px; }
.login-copy h1 { margin:0 0 10px; font-size: 32px; color:#37456c; }
.login-copy p { margin:0 0 22px; color:#5e6472; font-size:15px; line-height:1.55; }
.login-form label { display:block; margin:16px 0 8px; font-size:14px; font-weight:700; color:#2a3549; }
.login-form input { width:100%; padding:14px 16px; border:1px solid #d1d1d1; border-radius:14px; background:#fff; color:#2a3549; font-size:16px; }
.login-form input:focus { outline:none; border-color:#a54a83; box-shadow:0 0 0 4px rgba(165,74,131,0.12); }
.login-form button { width:100%; margin-top:24px; border:none; border-radius:14px; padding:14px 18px; background:#37456c; color:#fff; font-size:16px; font-weight:800; cursor:pointer; box-shadow:0 14px 28px rgba(55,69,108,0.28); }
.login-form button:hover { background:#2a3549; }
.login-error { margin-bottom:16px; padding:12px 14px; border-radius:14px; border:1px solid rgba(165,74,131,0.25); background:rgba(165,74,131,0.10); color:#7f1d1d; font-size:14px; }
.login-scene {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
}
.login-illustration {
  width: min(1240px, 76vw);
  max-height: 88vh;
  object-fit: contain;
  filter: drop-shadow(0 28px 48px rgba(42,53,73,0.24));
}
.login-diamond { position:absolute; width:28px; height:28px; transform:rotate(45deg); opacity:.95; border-radius:2px; z-index:2; }
.login-diamond-a { top:16%; left:14%; background:#37456c; }
.login-diamond-b { top:24%; left:60%; background:#d1d1d1; }
.login-diamond-c { top:58%; right:10%; background:#37456c; }
.login-diamond-d { bottom:18%; left:20%; background:#bababa; }



.login-theme-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.login-theme-admin-card {
  position: relative;
  display: block;
  border: 1px solid rgba(55,69,108,0.14);
  border-radius: 20px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(42,53,73,0.08);
}
.login-theme-admin-card.active {
  border-color: rgba(165,74,131,0.5);
  box-shadow: 0 18px 38px rgba(165,74,131,0.14);
}
.login-theme-admin-card.inactive {
  opacity: 0.96;
}
.login-theme-admin-preview {
  position: relative;
  height: 172px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid rgba(42,53,73,0.08);
}
.login-theme-admin-preview::before {
  content: '';
  position: absolute;
  inset: 0;
}
.login-theme-admin-preview-band-shell,
.login-theme-admin-preview-veil-shell,
.login-theme-admin-preview-card,
.login-theme-admin-preview-scene,
.login-theme-admin-preview-accent {
  position: absolute;
  display: block;
}
.login-theme-admin-preview-band-shell,
.login-theme-admin-preview-veil-shell {
  inset: 0;
}
.login-theme-admin-preview-card {
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(209,209,209,0.68);
  box-shadow: 0 12px 24px rgba(42,53,73,0.18);
  border-radius: 18px;
  z-index: 2;
}
.login-theme-admin-preview-scene {
  background: linear-gradient(135deg, rgba(55,69,108,0.24), rgba(165,74,131,0.28));
  z-index: 2;
}
.login-theme-admin-preview-accent {
  border-radius: 18px;
  z-index: 1;
}
.login-theme-admin-preview-band::before {
  background: linear-gradient(135deg, #2a3549 0%, #37456c 54%, #a54a83 100%);
}
.login-theme-admin-preview-band .login-theme-admin-preview-band-shell {
  inset: 0 auto 0 0;
  width: 34%;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.07));
  border-right: 1px solid rgba(209,209,209,0.18);
}
.login-theme-admin-preview-band .login-theme-admin-preview-veil-shell {
  display: none;
}
.login-theme-admin-preview-band .login-theme-admin-preview-card {
  width: 27%;
  height: 62%;
  left: 5%;
  top: 19%;
}
.login-theme-admin-preview-band .login-theme-admin-preview-scene {
  width: 36%;
  height: 58%;
  right: 9%;
  bottom: 8%;
  border-radius: 0;
  clip-path: polygon(0 100%, 18% 54%, 76% 54%, 86% 100%);
}
.login-theme-admin-preview-band .login-theme-admin-preview-accent {
  left: 36%;
  right: 0;
  top: 0;
  bottom: 0;
  background: radial-gradient(circle at 72% 32%, rgba(165,74,131,0.26), transparent 24%);
  border-radius: 0;
}
.login-theme-admin-preview-veil::before {
  background: linear-gradient(135deg, #2a3549 0%, #37456c 50%, #a54a83 100%);
}
.login-theme-admin-preview-veil .login-theme-admin-preview-band-shell {
  display: none;
}
.login-theme-admin-preview-veil .login-theme-admin-preview-veil-shell {
  left: 6%;
  top: 14%;
  width: 44%;
  height: 70%;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05));
  border: 1px solid rgba(209,209,209,0.16);
  backdrop-filter: blur(8px);
}
.login-theme-admin-preview-veil .login-theme-admin-preview-card {
  width: 30%;
  height: 54%;
  left: 10%;
  top: 22%;
}
.login-theme-admin-preview-veil .login-theme-admin-preview-scene {
  width: 36%;
  height: 54%;
  right: 10%;
  bottom: 10%;
  border-radius: 0;
  clip-path: polygon(0 100%, 18% 54%, 76% 54%, 86% 100%);
}
.login-theme-admin-preview-veil .login-theme-admin-preview-accent {
  right: 4%;
  top: 8%;
  width: 52%;
  height: 74%;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}
.login-theme-admin-title-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.login-theme-admin-state {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:84px;
  padding:7px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
}
.login-theme-admin-state.on {
  background: rgba(16,185,129,0.12);
  color: #047857;
  border: 1px solid rgba(16,185,129,0.22);
}
.login-theme-admin-state.off {
  background: rgba(148,163,184,0.14);
  color: #475569;
  border: 1px solid rgba(148,163,184,0.18);
}
.login-theme-admin-form {
  margin-top: 14px;
}
.login-theme-admin-toggle {
  width: 100%;
  min-height: 44px;
  border-radius: 14px;
  border: none;
  font-weight: 800;
  cursor: pointer;
}
.login-theme-admin-toggle.on {
  background: #dbeafe;
  color: #1d4ed8;
  cursor: default;
}
.login-theme-admin-toggle.off {
  background: #111827;
  color: #fff;
}
.login-theme-admin-toggle.off:hover {
  background: #1f2937;
}
.login-theme-admin-toggle:disabled {
  opacity: 1;
}
@media (max-width: 1180px) {
  .login-brand-title { font-size:32px; }
  .login-copy h1 { font-size:28px; }
}
@media (max-width: 960px) {
  .login-stage {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 14px;
    padding: 16px;
  }
  .login-panel {
    padding-left: 0 !important;
    order: 2;
    min-height: auto !important;
  }
  .login-scene {
    order: 1;
    min-height: 250px;
    justify-content: center !important;
    align-items: center !important;
    padding: 12px 8px 0 !important;
  }
  .login-illustration {
    width: min(760px, 96%);
    max-height: 360px;
  }
  .login-diamond-a { top: 10%; left: 10%; }
  .login-diamond-b { top: 14%; right: 14%; left: auto; }
  .login-diamond-c { bottom: 18%; right: 10%; top: auto; }
  .login-diamond-d { bottom: 10%; left: 12%; }
  .login-theme-admin-grid { grid-template-columns: 1fr; }
  .login-theme-switch-header { flex-direction: column; }
}
@media (max-width: 560px) {
  .login-card { border-radius: 22px; padding: 24px 20px; }
  .login-brand-mark { width:56px; height:56px; flex-basis:56px; }
  .login-brand-title { font-size:28px; }
  .login-copy h1 { font-size:24px; }
  .login-stage { padding: 12px; }
  .login-scene { min-height: 210px; }
  .login-theme-admin-preview { height: 148px; }
  .login-theme-admin-state { min-width:72px; }
}

body.theme-dark .primary { background:linear-gradient(135deg,#7aa2ff,#a54a83); color:#fff; }
body.theme-dark input, body.theme-dark select, body.theme-dark textarea { color:var(--text); }

.kb-layout {
  align-items: start;
}
.kb-tree-card {
  position: sticky;
  top: 88px;
}
.kb-tree {
  display: grid;
  gap: 10px;
}
.kb-tree-group,
.kb-tree-subgroup {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-2);
  overflow: hidden;
}
.kb-tree-group summary,
.kb-tree-subgroup summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 700;
}
.kb-tree-group summary::-webkit-details-marker,
.kb-tree-subgroup summary::-webkit-details-marker {
  display: none;
}
.kb-tree-subgroup {
  margin: 10px;
  border-radius: 14px;
}
.kb-tree-subgroup summary {
  font-size: 14px;
  font-weight: 600;
}
.kb-tree-articles {
  display: grid;
  gap: 8px;
  padding: 0 10px 10px;
}
.kb-tree-link {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  background: var(--panel);
}
.kb-tree-link small {
  color: var(--muted);
}
.kb-tree-link:hover,
.kb-tree-link.current {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(165,74,131,0.18);
}
.kb-list-item strong a,
.kb-public-card h2 a {
  color: inherit;
  text-decoration: none;
}
.kb-list-item strong a:hover,
.kb-public-card h2 a:hover {
  text-decoration: underline;
}
.kb-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}
.kb-editor-card {
  position: sticky;
  top: 88px;
}
.kb-editor-wrapper {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--panel);
}
.kb-suneditor {
  width: 100%;
  min-height: 220px;
}
.kb-rendered-content {
  display: grid;
  gap: 10px;
  line-height: 1.65;
}
.kb-rendered-content h1,
.kb-rendered-content h2,
.kb-rendered-content h3 {
  margin: 6px 0 4px;
}
.kb-rendered-content p,
.kb-rendered-content ul,
.kb-rendered-content ol {
  margin: 0;
}
.kb-public-page {
  background: linear-gradient(180deg, rgba(55,69,108,0.08), rgba(165,74,131,0.05));
}
.kb-public-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 20px 48px;
}
.kb-public-shell-narrow {
  max-width: 860px;
}
.kb-public-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}
.kb-public-hero h1 {
  margin: 8px 0 10px;
  font-size: 34px;
}
.kb-public-hero p {
  margin: 0;
  color: var(--muted);
  max-width: 680px;
}
.kb-public-card h2 {
  margin: 12px 0 10px;
  font-size: 22px;
}
body.theme-dark .kb-public-page,
body.theme-dark.kb-public-page {
  background: linear-gradient(180deg, rgba(23,32,57,0.95), rgba(12,18,30,1));
}
body.theme-dark .kb-editor-wrapper {
  background: #0f172a;
}
@media (max-width: 960px) {
  .kb-layout,
  .kb-public-hero {
    grid-template-columns: 1fr !important;
    display: grid;
    align-items: start;
  }
  .kb-editor-card,
  .kb-tree-card {
    position: static;
  }
}