:root {
  --bg: #eef5ff;
  --panel: rgba(255, 255, 255, 0.88);
  --sidebar: #0a2452;
  --sidebar-muted: #9bb4dd;
  --text: #10294f;
  --muted: #5d7396;
  --line: #d8e3f5;
  --accent: #0468de;
  --accent-soft: #dceaff;
  --warning: #9b5b14;
  --warning-soft: #fff4e8;
  --info-soft: #edf5ff;
  --shadow: rgba(9, 37, 84, 0.08);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(4, 104, 222, 0.18) 0%, transparent 34%),
    radial-gradient(circle at top right, rgba(64, 146, 255, 0.14) 0%, transparent 24%),
    linear-gradient(180deg, #f8fbff 0%, var(--bg) 100%);
  font-family: Avenir, "Avenir Next", Montserrat, "Segoe UI", sans-serif;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre, input {
  font-family: "Fira Code", "SFMono-Regular", monospace;
}
pre {
  padding: 16px;
  overflow: auto;
  background: #f8f3ea;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.docs-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
}
.docs-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
  padding: 24px 18px 40px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 16%),
    linear-gradient(180deg, #0d2d63 0%, var(--sidebar) 100%);
  color: white;
}
.docs-sidebar a { color: white; }
.sidebar-header {
  margin-bottom: 24px;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.sidebar-group { margin-bottom: 24px; }
.sidebar-group h2 {
  margin: 0 0 8px;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sidebar-muted);
}
.sidebar-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-group li {
  border-left: 2px solid transparent;
  padding: 4px 0 4px 10px;
}
.sidebar-group li.active {
  border-left-color: #f7c87a;
  background: rgba(255, 255, 255, 0.08);
}
.docs-content {
  padding: 32px;
}
.hero {
  padding: 32px;
  background:
    linear-gradient(135deg, rgba(4, 104, 222, 0.08) 0%, rgba(4, 104, 222, 0) 45%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 249, 255, 0.94) 100%);
  border-bottom: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 24px 60px var(--shadow);
  backdrop-filter: blur(10px);
}
.hero-title {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.hero h1 {
  margin: 8px 0 0;
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.lede {
  max-width: 820px;
  color: #38527b;
  font-size: 1.05rem;
  line-height: 1.6;
}
.breadcrumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.95rem;
}
.badge-row, .pill-row, .hero-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.badge, .pill, .button-link {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.85rem;
}
.badge {
  background: #143d7a;
  color: white;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.badge-owner {
  background: #e3efff;
  color: #1754a5;
}
.badge-warning {
  background: #ffe2bf;
  color: var(--warning);
}
.badge-required {
  background: #143d7a;
  color: white;
}
.badge-optional {
  background: #edf4ff;
  color: #4f678e;
}
.pill {
  background: var(--accent-soft);
  color: #1754a5;
}
.pill.required {
  background: #e2eeff;
  color: #1754a5;
}
.button-link {
  background: linear-gradient(135deg, #0468de 0%, #2b86ff 100%);
  color: white;
  box-shadow: 0 10px 24px rgba(4, 104, 222, 0.2);
}
.panel {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--panel);
  box-shadow: 0 18px 48px var(--shadow);
  backdrop-filter: blur(10px);
}
.summary-grid, .stats-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.stats-grid article {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  box-shadow: 0 16px 40px var(--shadow);
}
.stats-grid h2 {
  margin: 0;
  font-size: 2rem;
  letter-spacing: -0.03em;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
  flex-wrap: wrap;
}
.section-heading h2 {
  margin: 0;
}
.section-heading p, .muted {
  color: var(--muted);
}
.meta-grid {
  margin: 0;
  display: grid;
  gap: 12px;
}
.meta-grid div {
  display: grid;
  gap: 4px;
}
.meta-grid dt {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.meta-grid dd {
  margin: 0;
}
.properties-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
}
.properties-table th, .properties-table td {
  padding: 12px;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.properties-table th {
  color: var(--muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.prop-name {
  margin-bottom: 8px;
}
.reference-list, .editor-grid, .card-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.reference-card, .editor-card, .catalog-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 36px rgba(16, 53, 60, 0.06);
}
.reference-card h3, .editor-card h3 {
  margin-top: 0;
}
.catalog-card-top, .catalog-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.catalog-card p {
  color: #425466;
}
.catalog-card.is-hidden {
  display: none;
}
.callout {
  margin-top: 24px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
}
.callout.warning {
  background: var(--warning-soft);
  color: var(--warning);
}
.callout.info {
  background: var(--info-soft);
}
.warning-text {
  color: var(--warning);
  font-style: italic;
}
.search-panel {
  margin-top: 20px;
  max-width: 680px;
}
.search-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: var(--muted);
}
input[type="search"] {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
  color: var(--text);
  box-shadow: inset 0 1px 2px rgba(15, 47, 54, 0.04);
}
@media (max-width: 900px) {
  .docs-layout {
    grid-template-columns: 1fr;
  }
  .docs-sidebar {
    position: static;
    height: auto;
  }
  .docs-content {
    padding: 20px;
  }
  .hero {
    padding: 24px;
  }
  .hero h1 {
    font-size: 2rem;
  }
}

/* ============================================================
   Three-pane API-docs theme. Appended last so it overrides the
   legacy styles above (which target now-unused class names).
   ============================================================ */
:root{
  --bg:#ffffff; --canvas:#f7f8fa;
  --text:#1f2933; --muted:#6b7280;
  --line:#e5e7eb; --line-soft:#eef0f3;
  --accent:#2563eb;
  --code-bg:#0f172a; --code-text:#e2e8f0;
  --pres:#2563eb; --pres-bg:#eff6ff;
  --act:#ec4899;  --act-bg:#fce7f3;
  --api:#16a34a;  --api-bg:#dcfce7;
  --shared:#0891b2; --shared-bg:#e0f2fe;
  --other:#64748b; --other-bg:#f1f5f9;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--bg); color:var(--text);
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
code{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; font-size:0.86em;}

.layout{display:grid; grid-template-columns:280px minmax(0,1fr); min-height:100vh;}
.layout--3{grid-template-columns:280px minmax(0,1fr) 380px;}

.sidebar{border-right:1px solid #2a2f3a; background:#1b1f29; color:#c2c9d6;}
.sidebar-inner{position:sticky; top:0; height:100vh; overflow:auto; padding:14px 12px 30px;}
.side-top{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 6px 14px;}
.brand{display:flex; align-items:center; gap:8px; font-weight:700; color:#fff; font-size:1.02rem;}
.brand:hover{text-decoration:none;}
.brand-pill{display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; background:#16a34a; color:#fff; font-size:0.62rem; font-weight:700; letter-spacing:0.03em; text-transform:lowercase;}
.brand-mark{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg,#2563eb,#06b6d4); color:#fff; font-family:ui-monospace,monospace; font-size:12px; font-weight:700;}
.side-toggle{display:grid; place-items:center; width:30px; height:30px; border-radius:7px; background:transparent; border:1px solid #2f3543; color:#9aa3b2; cursor:pointer; flex:0 0 auto;}
.side-toggle:hover{background:#262b36; color:#fff;}
.nav-group{margin-bottom:2px;}
.nav-label{display:flex; align-items:center; gap:7px; list-style:none; cursor:pointer; font-size:11px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:#7f899b; padding:8px 8px 6px; user-select:none;}
.nav-label::-webkit-details-marker{display:none;}
.nav-label:hover{color:#aeb6c4;}
.nav-label .chev{transition:transform .15s ease; flex:0 0 auto;}
.nav-group[open] > .nav-label .chev{transform:rotate(90deg);}
.nav-label-text{flex:1 1 auto;}
.nav-count{font-size:10px; font-weight:700; color:#7f899b; background:#262b36; border-radius:999px; padding:1px 7px;}
.nav-list{list-style:none; margin:0 0 8px; padding:0;}
.nav-item{display:flex; align-items:center; gap:10px; padding:6px 9px; border-radius:8px; color:#c2c9d6; font-size:0.9rem;}
.nav-item:hover{background:#262b36; color:#fff; text-decoration:none;}
.nav-item.is-active{background:rgba(37,99,235,0.20); color:#fff; font-weight:600; box-shadow:inset 2px 0 0 var(--accent);}
.nav-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ico{display:inline-grid; place-items:center; width:20px; height:20px; flex:0 0 auto; color:var(--other);}
.ico svg{display:block;}
.ico-pres{color:var(--pres);} .ico-act{color:var(--act);} .ico-api{color:var(--api);} .ico-shared{color:var(--shared);} .ico-other{color:var(--other);}
.sidebar .ico-pres{color:#60a5fa;} .sidebar .ico-act{color:#f472b6;} .sidebar .ico-api{color:#34d399;} .sidebar .ico-shared{color:#22d3ee;} .sidebar .ico-other{color:#9aa3b2;}
.nav-collapsed.layout{grid-template-columns:66px minmax(0,1fr);}
.nav-collapsed.layout--3{grid-template-columns:66px minmax(0,1fr) 380px;}
.nav-collapsed .brand-text, .nav-collapsed .brand-pill, .nav-collapsed .nav-label, .nav-collapsed .nav-name, .nav-collapsed .nav-count{display:none;}
.nav-collapsed .side-top{flex-direction:column; align-items:center; gap:10px;}
.nav-collapsed .nav-item{justify-content:center; padding:9px 0;}
.nav-collapsed .ico{width:22px; height:22px;}

.content{padding:40px 48px; max-width:880px; width:100%;}
.breadcrumbs{display:flex; gap:8px; align-items:center; color:var(--muted); font-size:0.82rem; margin-bottom:14px;}
.breadcrumbs a{color:var(--muted);}
.breadcrumbs span{color:#cbd2db;}
.page-title{font-size:2.1rem; font-weight:800; letter-spacing:-0.02em; margin:0 0 12px;}
.chip-row{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px;}
.chip{display:inline-flex; align-items:center; padding:3px 9px; border-radius:6px; font-size:0.72rem; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; background:var(--other-bg); color:var(--other);}
.chip-sm{font-size:0.68rem; padding:2px 7px; text-transform:none; letter-spacing:0;}
.chip-pres{background:var(--pres-bg); color:var(--pres);}
.chip-act{background:var(--act-bg); color:var(--act);}
.chip-api{background:var(--api-bg); color:var(--api);}
.chip-shared{background:var(--shared-bg); color:var(--shared);}
.chip-owner{background:#f1f5f9; color:#64748b;}
.lede{color:var(--muted); font-size:1.02rem; margin:0 0 28px; max-width:62ch;}

.callout{padding:12px 14px; border-radius:9px; font-size:0.9rem; margin:0 0 18px; border:1px solid var(--line);}
.callout-warn{background:#fff7ed; border-color:#fed7aa; color:#9a3412;}
.callout-info{background:#eff6ff; border-color:#bfdbfe; color:#1e40af;}

.block{padding:24px 0; border-top:1px solid var(--line);}
.block-title{font-size:1.15rem; font-weight:700; margin:0 0 14px;}
.block-head{display:flex; align-items:center; gap:10px;}
.block-head .block-title{margin-bottom:0;}
.block-note{color:var(--muted); font-size:0.88rem; margin:-8px 0 14px;}
.count{font-size:0.75rem; color:var(--muted); background:var(--canvas); border:1px solid var(--line); border-radius:999px; padding:1px 8px;}

.pill-row{display:flex; flex-wrap:wrap; gap:6px;}
.pill{display:inline-flex; padding:2px 8px; border-radius:6px; background:var(--canvas); border:1px solid var(--line); font-size:0.78rem; font-family:ui-monospace,monospace;}
.pill-req{background:#fef2f2; border-color:#fecaca; color:#b91c1c;}
.muted{color:var(--muted);}

.params{display:flex; flex-direction:column;}
.param{padding:16px 0; border-bottom:1px solid var(--line-soft);}
.param:last-child{border-bottom:none;}
.param-head{display:flex; align-items:center; flex-wrap:wrap; gap:8px;}
.param-name{font-size:0.95rem; font-weight:700; color:var(--text);}
.param-type{color:var(--muted); font-family:ui-monospace,monospace; font-size:0.82rem;}
.tag{font-size:0.66rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; padding:2px 6px; border-radius:5px;}
.tag-req{background:#fef2f2; color:#b91c1c;}
.tag-opt{background:#f1f5f9; color:#64748b;}
.tag-warn{background:#fff7ed; color:#9a3412;}
.param-desc{color:#374151; font-size:0.92rem; margin-top:6px;}
.param-desc .missing{color:#9a3412; font-style:italic;}
.param-anno{margin-top:8px; font-size:0.82rem; color:var(--muted); display:flex; flex-wrap:wrap; align-items:center; gap:6px;}
.anno-key{text-transform:uppercase; letter-spacing:0.04em; font-size:0.68rem; font-weight:700; color:#94a3b8;}

.ref-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
.ref-list li{display:flex; gap:10px; align-items:center;}
.raw-link{font-size:0.76rem; color:var(--muted);}

.editor-grid{display:grid; gap:12px;}
.editor-card{border:1px solid var(--line); border-radius:10px; overflow:hidden;}
.editor-card-title{padding:8px 12px; background:var(--canvas); border-bottom:1px solid var(--line); font-size:0.85rem;}
.editor-card pre{padding:12px; overflow:auto; background:#fff; border:none; border-radius:0; font-size:0.8rem; color:#334155;}

.search-wrap{margin:0 0 24px;}
#schema-search{width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:10px; font-size:0.95rem; background:#fff; color:var(--text); box-shadow:none;}
#schema-search:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,0.14);}
.stats{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:28px;}
.stat{flex:1 1 120px; border:1px solid var(--line); border-radius:12px; padding:14px 16px; color:var(--text);}
.stat:hover{border-color:var(--accent); text-decoration:none;}
.stat-num{font-size:1.6rem; font-weight:800;}
.stat-label{color:var(--muted); font-size:0.85rem;}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px;}
.card{border:1px solid var(--line); border-radius:12px; padding:14px 16px; color:var(--text); display:flex; flex-direction:column; gap:8px; transition:border-color .12s, box-shadow .12s;}
.card:hover{border-color:var(--accent); box-shadow:0 4px 16px rgba(15,23,42,0.06); text-decoration:none;}
.card-top{display:flex; align-items:center; gap:8px;}
.card-name{font-weight:700; flex:1 1 auto;}
.card-desc{color:var(--muted); font-size:0.86rem; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.card-foot{display:flex; gap:6px; align-items:center;}
.is-hidden{display:none !important;}

.rail{border-left:1px solid var(--line); background:var(--canvas);}
.rail-panel{margin:24px 20px;}
.rail-panel:first-child{margin-top:40px;}
.rail-head{display:flex; align-items:center; justify-content:space-between; background:#1e293b; color:#cbd5e1; padding:8px 12px; border-radius:10px 10px 0 0; font-size:0.78rem; font-weight:600; letter-spacing:0.03em;}
.copy-btn{background:rgba(255,255,255,0.1); color:#cbd5e1; border:none; border-radius:6px; padding:3px 9px; font-size:0.72rem; cursor:pointer;}
.copy-btn:hover{background:rgba(255,255,255,0.2);}
.code{background:var(--code-bg); color:var(--code-text); padding:14px; border-radius:0 0 10px 10px; overflow:auto; font-size:0.78rem; line-height:1.55; max-height:72vh; border:none;}
.code code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:inherit; font-size:1em;}

/* Mobile top bar + off-canvas drawer (hidden on desktop) */
.topbar{display:none;}
.scrim{display:none;}

@media (max-width:1100px){
  .layout, .layout--3{grid-template-columns:240px minmax(0,1fr);}
  .rail{grid-column:1 / -1; border-left:none; border-top:1px solid var(--line);}
  .rail-panel:first-child{margin-top:24px;}
}
@media (max-width:860px){
  .topbar{display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:60; background:#1b1f29; color:#fff; padding:10px 14px; border-bottom:1px solid #2a2f3a;}
  .nav-toggle{display:grid; place-items:center; width:38px; height:38px; border-radius:9px; background:transparent; border:1px solid #2f3543; color:#cbd2dd; cursor:pointer;}
  .topbar-brand{display:flex; align-items:center; gap:9px; color:#fff; font-weight:700; font-size:1rem;}
  .layout, .layout--3, .nav-collapsed.layout, .nav-collapsed.layout--3{grid-template-columns:1fr;}
  .sidebar{position:fixed; top:0; left:0; height:100vh; width:284px; max-width:84vw; z-index:80; transform:translateX(-100%); transition:transform .22s ease;}
  body.nav-open .sidebar{transform:none; box-shadow:0 0 50px rgba(0,0,0,0.45);}
  .sidebar-inner{position:static; height:100%;}
  .side-toggle{display:none;}
  /* a desktop-collapsed state must not hide labels inside the mobile drawer */
  .nav-collapsed .brand-text{display:inline;}
  .nav-collapsed .nav-label{display:flex;}
  .nav-collapsed .nav-name, .nav-collapsed .nav-count{display:inline;}
  .nav-collapsed .nav-item{justify-content:flex-start; padding:6px 9px;}
  .scrim{display:block; position:fixed; inset:0; background:rgba(15,23,42,0.5); z-index:70; opacity:0; pointer-events:none; transition:opacity .2s;}
  body.nav-open .scrim{opacity:1; pointer-events:auto;}
  .content{padding:22px 18px;}
  .rail{grid-column:auto; border-left:none; border-top:1px solid var(--line);}
  .rail-panel{margin:18px;}
}
@media (max-width:560px){
  .stats{flex-direction:column;}
  .cards{grid-template-columns:1fr;}
  .page-title{font-size:1.6rem;}
  .content{padding:18px 14px;}
}

/* Family-tinted content accents */
.content{--fam:var(--accent);}
.content[data-fam=pres]{--fam:var(--pres);}
.content[data-fam=act]{--fam:var(--act);}
.content[data-fam=api]{--fam:var(--api);}
.content[data-fam=shared]{--fam:var(--shared);}
.content[data-fam=other]{--fam:var(--other);}
.page-title{display:flex; align-items:center; gap:12px;}
.title-ico{display:inline-grid; place-items:center; width:36px; height:36px; border-radius:10px; background:#f1f5f9; color:var(--fam); flex:0 0 auto;}
.title-ico svg{width:20px; height:20px;}
.block-title{position:relative; padding-left:13px;}
.block-title::before{content:''; position:absolute; left:0; top:0.18em; height:0.9em; width:3px; border-radius:2px; background:var(--fam);}
.card{border-top:3px solid var(--line);}
.card--pres{border-top-color:var(--pres);} .card--act{border-top-color:var(--act);} .card--api{border-top-color:var(--api);} .card--shared{border-top-color:var(--shared);} .card--other{border-top-color:var(--other);}
.stat{display:flex; align-items:center; gap:12px;}
.stat .ico{width:36px; height:36px; border-radius:10px;}
.stat--pres .ico{background:var(--pres-bg);} .stat--act .ico{background:var(--act-bg);} .stat--api .ico{background:var(--api-bg);} .stat--shared .ico{background:var(--shared-bg);} .stat--other .ico{background:var(--other-bg);}
.stat .ico svg{width:18px; height:18px;}
.stat-meta{display:flex; flex-direction:column; line-height:1.15;}

/* Stat tiles act as buttons that open an explainer modal */
.stat{appearance:none; font:inherit; text-align:left; cursor:pointer; background:#fff; position:relative;}
.stat:hover{border-color:var(--accent); box-shadow:0 4px 16px rgba(15,23,42,0.06);}
.stat-hint{position:absolute; right:12px; top:12px; font-size:0.7rem; color:var(--muted); opacity:0; transition:opacity .12s;}
.stat:hover .stat-hint{opacity:1;}

/* Family explainer modal */
.fam-modal{border:none; padding:0; border-radius:16px; max-width:620px; width:calc(100% - 32px); background:transparent; box-shadow:0 24px 70px rgba(15,23,42,0.3);}
.fam-modal::backdrop{background:rgba(15,23,42,0.55);}
.fam-modal-card{--fam:var(--accent); background:#fff; border-radius:16px; overflow:hidden;}
.fam-modal-card[data-fam=pres]{--fam:var(--pres);} .fam-modal-card[data-fam=act]{--fam:var(--act);} .fam-modal-card[data-fam=api]{--fam:var(--api);} .fam-modal-card[data-fam=shared]{--fam:var(--shared);}
.fam-modal-head{display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--line); background:#f8fafc;}
.fam-modal-card[data-fam=pres] .fam-modal-head{background:var(--pres-bg);} .fam-modal-card[data-fam=act] .fam-modal-head{background:var(--act-bg);} .fam-modal-card[data-fam=api] .fam-modal-head{background:var(--api-bg);} .fam-modal-card[data-fam=shared] .fam-modal-head{background:var(--shared-bg);}
.fam-modal-head .ico{width:34px; height:34px; border-radius:9px; background:rgba(255,255,255,0.7); color:var(--fam);}
.fam-modal-head h2{margin:0; font-size:1.3rem; flex:1 1 auto;}
.modal-close{appearance:none; border:none; background:transparent; font-size:1.6rem; line-height:1; color:var(--muted); cursor:pointer; padding:0 4px;}
.modal-close:hover{color:var(--text);}
.fam-modal-body{padding:18px 20px 22px; max-height:72vh; overflow:auto;}
.fam-modal-body h3{font-size:0.76rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); margin:18px 0 8px;}
.fam-modal-body p{line-height:1.6; margin:0;}
.m-what{font-size:0.98rem; color:#374151;}
.m-examples{display:flex; flex-direction:column; gap:12px;}
.m-example-title{font-size:0.82rem; font-weight:600; color:var(--text); margin-bottom:6px;}
.m-example .code{border-radius:10px; max-height:none;}