@import url('https://fonts.bunny.net/css?family=public-sans:400,500,600,700|dm-mono:400,500&display=swap');

:root {
  --ink: #141b2d;
  --text: #2b3142;
  --muted: #5b6273;
  --faint: #858b98;
  --line: #e3e6eb;
  --line-strong: #d1d6de;
  --surface: #ffffff;
  --surface-subtle: #f7f8fa;
  --surface-hover: #f1f3f6;
  --panel: var(--surface);
  --soft: var(--surface-subtle);
  --brand: #696bfe; /* Acun UI ana rengi (brand-600); logo ve bütün vurgular */
  --brand-soft: color-mix(in srgb, var(--brand) 7%, white);
  --brand-text: var(--brand);
  --blue: #3267e3;
  --blue-soft: #eef3ff;
  --green: #1c9b69;
  --success: #147a52;
  --success-soft: #eaf8f1;
  --danger: #c23c38;
  --code-bg: #141414;
  --code-line: #2e2e2e;
  --code-text: #e5e5e5;
  --shadow-sm: 0 1px 2px rgba(20, 27, 45, .06), 0 4px 14px rgba(20, 27, 45, .04);
  --shadow-lg: 0 24px 70px rgba(20, 27, 45, .16), 0 4px 18px rgba(20, 27, 45, .08);
  --radius: 6px;
  --topbar: 72px;
  color-scheme: light;
}

html[data-theme="dark"] {
  --ink: #f5f5f5;
  --text: #d4d4d4;
  --muted: #b4b4b4;
  --faint: #8c8c8c;
  --line: #262626;
  --line-strong: #3a3a3a;
  --surface: #0a0a0a;
  --surface-subtle: #141414;
  --surface-hover: #1f1f1f;
  --brand-soft: color-mix(in srgb, var(--brand) 18%, var(--surface));
  --brand-text: color-mix(in srgb, var(--brand) 66%, white);
  --blue-soft: #17284d;
  --success: #56c997;
  --success-soft: #17382d;
  --danger: #ff7771;
  --code-bg: #141414;
  --code-line: #2e2e2e;
  --code-text: #e5e5e5;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.2), 0 4px 14px rgba(0,0,0,.12);
  --shadow-lg: 0 24px 70px rgba(0,0,0,.44), 0 4px 18px rgba(0,0,0,.26);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar) + 32px); }
body { margin: 0; background: var(--surface); color: var(--text); font-family: 'Public Sans', ui-sans-serif, system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.55; }
/* Smoothed (thinner) strokes only on the dark theme; on the light theme macOS draws fuller text. */
html[data-theme="dark"] body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
button, a, input { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--blue) 36%, transparent); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--surface); padding: 10px 16px; border-radius: 5px; transition: top .2s; }
.skip-link:focus { top: 10px; }

.topbar { height: var(--topbar); position: sticky; top: 0; z-index: 40; display: grid; grid-template-columns: minmax(250px, 1fr) auto minmax(250px, 1fr); align-items: center; gap: 24px; padding: 0 32px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; width: max-content; color: var(--ink); }
.brand-logo { display: block; width: auto; height: 30px; }
.brand-logo .logo-ana { fill: var(--brand); }
.topnav { display: flex; align-self: stretch; gap: 30px; }
.topnav a { position: relative; display: grid; place-items: center; color: var(--text); font-size: 14px; font-weight: 500; }
.topnav a:hover { color: var(--ink); }
.topnav a.active { color: var(--ink); font-weight: 600; }
.topnav a.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--brand); }
.top-actions { justify-self: end; display: flex; align-items: center; gap: 10px; }
.icon-button, .mobile-menu { border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.icon-button { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 5px; }
.icon-button:hover { color: var(--ink); background: var(--surface-hover); }
.icon-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.moon { display: none; }
html[data-theme="dark"] .sun { display: none; } html[data-theme="dark"] .moon { display: block; }
.search-trigger { min-width: 205px; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: var(--surface-subtle); cursor: pointer; text-align: left; transition: border-color .18s, box-shadow .18s, background .18s; }
.search-trigger:hover { border-color: var(--line-strong); background: var(--surface); box-shadow: var(--shadow-sm); }
.search-trigger svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.search-trigger span { flex: 1; font-size: 13px; }
kbd { padding: 2px 5px; border: 1px solid var(--line); border-bottom-color: var(--line-strong); border-radius: 4px; background: var(--surface); color: var(--muted); font: 500 11px/1.3 'DM Mono', monospace; box-shadow: 0 1px 0 var(--line); }
.top-cta { padding: 9px 14px; border: 1px solid var(--line-strong); border-radius: 5px; color: var(--ink); background: var(--surface); font-size: 13px; font-weight: 600; box-shadow: var(--shadow-sm); transition: transform .18s, border-color .18s; }
.top-cta:hover { transform: translateY(-1px); border-color: var(--ink); }
.mobile-menu { display: none; }

.docs-shell { display: grid; grid-template-columns: 252px minmax(0, 840px) 210px; justify-content: center; gap: 56px; max-width: 1536px; margin: 0 auto; padding: 0 36px; }
.sidebar, .toc { position: sticky; top: var(--topbar); height: calc(100vh - var(--topbar)); align-self: start; overflow: auto; scrollbar-width: none; }
.sidebar { display: flex; flex-direction: column; padding: 38px 16px 22px 0; border-right: 1px solid var(--line); }
.nav-group { margin-bottom: 26px; padding-right: 22px; }
.nav-group p, .toc > p { margin: 0 0 9px; color: var(--muted); font: 500 11px/1.4 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.nav-group a { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 36px; padding: 7px 9px; border-radius: 4px; color: var(--text); font-size: 14px; transition: color .15s, background .15s; }
.nav-group a:hover { color: var(--ink); background: var(--surface-subtle); }
.nav-group a.current { color: var(--ink); background: var(--surface-hover); font-weight: 600; }
.nav-group a.current::before { content: ''; position: absolute; left: -17px; top: 8px; bottom: 8px; width: 2px; border-radius: 4px; background: var(--brand); }
.nav-group a em { color: var(--faint); font: normal 11px 'DM Mono', monospace; }
.muted-nav > span { display: flex; justify-content: space-between; padding: 8px 9px; color: var(--faint); font-size: 13px; }
.muted-nav > span em { font: normal 9px 'DM Mono', monospace; text-transform: uppercase; }
.sidebar-foot { margin-top: auto; display: flex; align-items: flex-start; gap: 10px; padding: 15px 22px 0 9px; border-top: 1px solid var(--line); }
.status-dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 13%, transparent); }
.sidebar-foot strong, .sidebar-foot small { display: block; }
.sidebar-foot strong { color: var(--ink); font-size: 12px; }
.sidebar-foot small { margin-top: 2px; color: var(--muted); font-size: 11px; }

.content { min-width: 0; padding: 72px 0 60px; }
.eyebrow { display: flex; align-items: center; gap: 12px; max-width: 390px; color: var(--faint); font: 500 11px/1 'DM Mono', monospace; letter-spacing: .1em; }
.eyebrow > span:first-child { color: var(--brand-text); }
.eyebrow .line { flex: 1; height: 1px; background: var(--line); }
h1 { max-width: 650px; margin: 24px 0 18px; color: var(--ink); font-size: clamp(38px, 4.2vw, 62px); line-height: .98; letter-spacing: -.055em; }
.lead { max-width: 680px; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.65; }
.meta-row { display: flex; gap: 24px; margin-top: 28px; padding-bottom: 42px; border-bottom: 1px solid var(--line); color: var(--faint); font: 400 12px/1.4 'DM Mono', monospace; }
.meta-row > span { display: inline-flex; align-items: center; gap: 8px; }
.pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 12%, transparent); }
.principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0 78px; }
.principle-card { position: relative; min-height: 255px; padding: 24px 22px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: transform .2s, border-color .2s, box-shadow .2s; }
.principle-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.principle-card.featured { background: var(--ink); border-color: var(--ink); color: color-mix(in srgb, var(--surface) 72%, transparent); }
.principle-card .index { position: absolute; right: 20px; top: 18px; color: var(--faint); font: 500 11px 'DM Mono', monospace; }
.principle-card.featured .index { color: color-mix(in srgb, var(--surface) 38%, transparent); }
.principle-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 42px; border-radius: 5px; background: var(--surface-subtle); color: var(--ink); }
.principle-card.featured .principle-icon { background: var(--brand); color: white; }
.principle-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.principle-card h3 { margin: 0 0 9px; color: var(--ink); font-size: 16px; letter-spacing: -.02em; }
.principle-card.featured h3 { color: var(--surface); }
.principle-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.principle-card.featured p { color: color-mix(in srgb, var(--surface) 58%, transparent); }

.doc-section { margin: 0 0 86px; }
.section-heading { display: grid; grid-template-columns: 36px 1fr; gap: 14px; margin-bottom: 24px; }
.section-heading > span { padding-top: 6px; color: var(--brand-text); font: 500 11px 'DM Mono', monospace; }
.section-heading h2 { margin: 0; color: var(--ink); font-size: 25px; line-height: 1.25; letter-spacing: -.035em; }
.section-heading p { margin: 7px 0 0; color: var(--muted); font-size: 15px; }
.card-surface { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.type-specimen { display: grid; grid-template-columns: 160px 1fr 1fr; min-height: 190px; overflow: hidden; }
.type-display { display: grid; place-items: center; background: var(--ink); color: var(--surface); font-size: 72px; font-weight: 600; letter-spacing: -.08em; }
.type-info, .type-scale { display: flex; flex-direction: column; justify-content: center; gap: 11px; padding: 28px; }
.type-info { border-right: 1px solid var(--line); }
.type-info strong { margin-bottom: 7px; color: var(--ink); font-size: 14px; }
.type-info span { color: var(--muted); font-size: 13px; }
.type-scale span { display: flex; align-items: baseline; gap: 10px; color: var(--muted); font-size: 13px; }
.type-scale b { min-width: 28px; color: var(--ink); font: 500 14px 'DM Mono', monospace; }
.spacing-scale { display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; min-height: 165px; padding: 28px; }
.spacing-scale > div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 16px; height: 100px; border-right: 1px solid var(--line); }
.spacing-scale > div:last-child { border: 0; }
.spacing-scale i { display: block; width: var(--size); height: var(--size); max-width: 48px; max-height: 48px; background: var(--brand); border-radius: 2px; }
.spacing-scale span { display: flex; flex-direction: column; text-align: center; color: var(--faint); font: 11px 'DM Mono', monospace; }
.spacing-scale b { color: var(--ink); font-size: 13px; }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.swatches article { padding: 10px; border: 1px solid var(--line); border-radius: 6px; }
.swatches article > span { display: block; aspect-ratio: 1.8; margin-bottom: 12px; border: 1px solid color-mix(in srgb, var(--line) 55%, transparent); border-radius: 4px; background: var(--swatch); }
.swatches strong, .swatches code { display: block; padding: 0 3px; }
.swatches strong { color: var(--ink); font-size: 13px; }
.swatches code { margin-top: 2px; color: var(--faint); font: 11px 'DM Mono', monospace; }
.component-demo { overflow: hidden; }
.demo-toolbar { display: flex; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.demo-label { color: var(--faint); font: 500 10px 'DM Mono', monospace; letter-spacing: .08em; }
.sample-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 45px 30px; background: var(--surface-subtle); }
.sample-logo { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 13px; font-weight: 700; }
.sample-logo span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 4px; background: var(--ink); color: var(--surface); font-size: 12px; }
.sample-nav > div { display: flex; align-items: center; gap: 5px; padding: 4px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
.sample-nav > div a { padding: 7px 11px; border-radius: 4px; color: var(--muted); font-size: 12px; }
.sample-nav > div a:hover { color: var(--ink); background: var(--surface-hover); }
.sample-nav > div a.selected { color: var(--ink); background: var(--surface-hover); font-weight: 600; }
.sample-nav > button { justify-self: end; padding: 8px 10px; border: 0; border-radius: 4px; background: var(--ink); color: var(--surface); font-size: 11px; font-weight: 600; cursor: pointer; }
.sample-nav > button kbd { margin-left: 5px; border-color: color-mix(in srgb, var(--surface) 22%, transparent); background: color-mix(in srgb, var(--surface) 10%, transparent); color: color-mix(in srgb, var(--surface) 70%, transparent); box-shadow: none; }
.sample-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.metric-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .18s, box-shadow .18s, transform .18s; }
.metric-card:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.metric-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 6px; font-size: 18px; }
.metric-icon.blue { color: var(--blue); background: var(--blue-soft); }
.metric-icon.coral { color: var(--brand-text); background: var(--brand-soft); }
.metric-card small, .metric-card strong { display: block; }
.metric-card small { margin-bottom: 2px; color: var(--muted); font-size: 12px; }
.metric-card strong { color: var(--ink); font-size: 23px; letter-spacing: -.04em; }
.metric-card em { align-self: start; padding: 4px 7px; border-radius: 4px; background: color-mix(in srgb, var(--green) 10%, transparent); color: var(--green); font: normal 11px 'DM Mono', monospace; }
.state-row { display: flex; align-items: end; gap: 14px; padding: 28px; }
.btn { min-height: 40px; padding: 0 16px; border-radius: 5px; font-size: 13px; font-weight: 600; cursor: pointer; transition: transform .15s, background .15s, box-shadow .15s, border-color .15s; }
.btn:hover { transform: translateY(-1px); }
.btn.primary { border: 1px solid var(--ink); background: var(--ink); color: var(--surface); box-shadow: 0 2px 6px color-mix(in srgb, var(--ink) 16%, transparent); }
.btn.primary:hover { background: color-mix(in srgb, var(--ink) 90%, var(--surface)); }
.btn.secondary { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); }
.btn.secondary:hover { border-color: var(--ink); background: var(--surface-subtle); }
.field { flex: 1; min-width: 180px; }
.field span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.field input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); color: var(--ink); font-size: 13px; transition: border-color .18s, box-shadow .18s; }
.field input:hover { border-color: var(--muted); }
.field input:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent); }
.focus-note { color: var(--faint); font: 10px 'DM Mono', monospace; }
.code-example { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.code-tabs { display: flex; align-items: center; gap: 4px; height: 48px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.code-tabs button { align-self: stretch; position: relative; padding: 0 12px; border: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 500; cursor: pointer; }
.code-tabs button:hover { color: var(--ink); }
.code-tabs button.active { color: var(--ink); font-weight: 600; }
.code-tabs button.active::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--brand); }
.code-tabs > span { margin-left: auto; color: var(--faint); font: 10px 'DM Mono', monospace; }
.preview-pane { display: none; min-height: 270px; place-items: center; background-image: radial-gradient(var(--line) .8px, transparent .8px); background-size: 17px 17px; }
.preview-pane.active { display: grid; }
.btn.large { display: inline-flex; align-items: center; gap: 24px; min-height: 48px; padding: 0 18px; }
.btn.large span { color: var(--brand-text); font-size: 18px; }
.code-pane { position: relative; display: none; min-height: 270px; padding: 30px; background: #111827; }
.code-pane.active { display: block; }
.copy-button { position: absolute; right: 16px; top: 16px; padding: 7px 10px; border: 1px solid #354057; border-radius: 4px; background: #1b2435; color: #aeb7c7; font-size: 11px; cursor: pointer; }
.copy-button:hover { color: white; border-color: #56627a; }
pre { margin: 0; overflow: auto; color: #d6deeb; font: 13px/1.8 'DM Mono', monospace; }
.tag { color: #82aaff; } .attr { color: #f78c6c; } .value { color: #c3e88d; }
footer { display: flex; justify-content: space-between; margin-top: 100px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--faint); font: 11px 'DM Mono', monospace; }

/* Component catalog */
.component-content h1 { max-width: 760px; }
.component-meta { gap: 28px; }
.component-doc { margin: 0 0 110px; scroll-margin-top: 100px; }
.component-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; margin-bottom: 24px; }
.component-heading h2 { margin: 7px 0 8px; color: var(--ink); font-size: 32px; line-height: 1.15; letter-spacing: -.045em; }
.component-heading p { max-width: 650px; margin: 0; color: var(--muted); font-size: 15px; }
.component-kicker { color: var(--brand-text); font: 500 10px 'DM Mono', monospace; letter-spacing: .1em; }
.stability-tag { flex: 0 0 auto; margin-top: 3px; padding: 5px 7px; border: 1px solid color-mix(in srgb, var(--green) 28%, var(--line)); border-radius: 4px; background: color-mix(in srgb, var(--green) 8%, var(--surface)); color: var(--green); font: 500 9px 'DM Mono', monospace; letter-spacing: .08em; }
.stability-tag.beta { border-color: color-mix(in srgb, #c48214 30%, var(--line)); background: color-mix(in srgb, #c48214 8%, var(--surface)); color: #b67308; }
.anatomy-strip { display: flex; gap: 24px; margin-bottom: 14px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-subtle); color: var(--muted); font-size: 11px; }
.anatomy-strip b { margin-right: 5px; color: var(--brand-text); font: 500 10px 'DM Mono', monospace; }
.component-example { overflow: hidden; margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.example-tabs { display: flex; align-items: center; height: 48px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.example-tabs button { align-self: stretch; position: relative; padding: 0 12px; border: 0; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; }
.example-tabs button:hover, .example-tabs button.active { color: var(--ink); }
.example-tabs button.active { font-weight: 600; }
.example-tabs button.active::after { content: ''; position: absolute; left: 9px; right: 9px; bottom: -1px; height: 2px; background: var(--brand); }
/* Tabs fill the bar and the example box clips what overflows: the focus ring sits inside the tab. */
.code-tabs button:focus-visible, .example-tabs button:focus-visible { outline-offset: -6px; border-radius: 8px; }
.example-tabs > span { margin-left: auto; color: var(--faint); font: 500 10px 'DM Mono', monospace; letter-spacing: .07em; }
.example-tabs > strong { color: var(--ink); font-size: 12px; }
.example-preview { display: none; min-height: 240px; place-items: center; padding: 15px; background-image: radial-gradient(var(--line) .75px, transparent .75px); background-size: 17px 17px; }
.example-preview.active { display: grid; }
.example-preview.no-grid { background: var(--surface-subtle); }
.example-code { position: relative; display: none; min-height: 240px; padding: 30px; background: #111827; }
.example-code.active { display: block; }
.generated-code { max-height: 440px; overflow: auto; }
.generated-code pre { min-width: max-content; padding-right: 58px; }
.demo-stack { display: flex; flex-direction: column; gap: 18px; align-items: center; }
.demo-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }
.demo-caption { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; color: var(--faint); font: 10px 'DM Mono', monospace; text-align: center; }
.ac-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: 4px; font-size: 13px; font-weight: 600; cursor: pointer; transition: color .15s, background .15s, border-color .15s, box-shadow .15s, filter .15s; }
.ac-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 25%, transparent); }
.ac-btn-primary { border-color: var(--blue); background: var(--blue); color: #fff; }
.ac-btn-secondary { border-color: #8995a8; background: #8995a8; color: #fff; }
.ac-btn-success { border-color: #32bd68; background: #32bd68; color: #fff; }
.ac-btn-danger { border-color: var(--brand); background: var(--brand); color: #fff; }
.ac-btn-warning { border-color: #f2a60d; background: #f2a60d; color: #281a00; }
.ac-btn-info { border-color: #10b7d5; background: #10b7d5; color: #fff; }
.ac-btn-dark { border-color: #2d3347; background: #2d3347; color: #fff; }
.ac-btn-primary:hover:not(:disabled), .ac-btn-secondary:hover:not(:disabled), .ac-btn-success:hover:not(:disabled), .ac-btn-danger:hover:not(:disabled), .ac-btn-warning:hover:not(:disabled), .ac-btn-info:hover:not(:disabled), .ac-btn-dark:hover:not(:disabled) { filter: brightness(.94); }
.ac-btn-ghost { background: transparent; color: var(--ink); }
.ac-btn-ghost:hover:not(:disabled) { background: var(--surface-hover); }
.ac-btn:disabled { cursor: not-allowed; opacity: .42; }
.ac-btn-sm { min-height: 32px; padding: 0 12px; font-size: 12px; }
.ac-btn-lg { min-height: 48px; padding: 0 20px; font-size: 14px; }
.ac-btn-icon { width: 40px; padding: 0; }
.ac-btn-ink { border-color: #30384a; background: #30384a; color: #fff; }
.ac-btn-xs { min-height: 27px; padding: 0 9px; border-radius: 4px; font-size: 10px; }
.ac-btn-rounded { border-radius: 999px; }
.ac-btn-soft { border-color: transparent; }
.ac-btn-primary.ac-btn-soft { background: var(--blue-soft); color: var(--blue); }
.ac-btn-secondary.ac-btn-soft { background: var(--surface-hover); color: var(--muted); }
.ac-btn-success.ac-btn-soft { background: var(--success-soft); color: var(--success); }
.ac-btn-danger.ac-btn-soft { background: var(--brand-soft); color: var(--danger); }
.ac-btn-warning.ac-btn-soft { background: #fff2d4; color: #8a5908; }
.ac-btn-info.ac-btn-soft { background: #dff7fb; color: #078ba5; }
.ac-btn-dark.ac-btn-soft { background: #e7e8ed; color: #2d3347; }
.ac-btn-soft:hover:not(:disabled) { filter: saturate(1.15); }
.ac-btn-outline { background: transparent; }
.ac-btn-primary.ac-btn-outline { border-color: var(--blue); color: var(--blue); }
.ac-btn-secondary.ac-btn-outline { border-color: var(--line-strong); color: var(--muted); }
.ac-btn-success.ac-btn-outline { border-color: var(--success); color: var(--success); }
.ac-btn-danger.ac-btn-outline { border-color: var(--danger); color: var(--danger); }
.ac-btn-warning.ac-btn-outline { border-color: #c7810f; color: #9a6208; }
.ac-btn-info.ac-btn-outline { border-color: #10b7d5; color: #078ba5; }
.ac-btn-dark.ac-btn-outline { border-color: #2d3347; color: #2d3347; }
.ac-btn-primary.ac-btn-outline:hover:not(:disabled) { background: var(--blue); color: #fff; }
.ac-btn-secondary.ac-btn-outline:hover:not(:disabled) { border-color: #8995a8; background: #8995a8; color: #fff; }
.ac-btn-success.ac-btn-outline:hover:not(:disabled) { background: #32bd68; color: #fff; }
.ac-btn-danger.ac-btn-outline:hover:not(:disabled) { background: var(--brand); color: #fff; }
.ac-btn-warning.ac-btn-outline:hover:not(:disabled) { background: #f2a60d; color: #281a00; }
.ac-btn-info.ac-btn-outline:hover:not(:disabled) { background: #10b7d5; color: #fff; }
.ac-btn-dark.ac-btn-outline:hover:not(:disabled) { background: #2d3347; color: #fff; }
.ac-btn-text { min-height: 36px; padding: 0 10px; border-color: transparent; background: transparent; box-shadow: none; }
.ac-btn-primary.ac-btn-text { color: var(--blue); }
.ac-btn-secondary.ac-btn-text { color: var(--muted); }
.ac-btn-success.ac-btn-text { color: var(--success); }
.ac-btn-danger.ac-btn-text { color: var(--danger); }
.ac-btn-warning.ac-btn-text { color: #9a6208; }
.ac-btn-info.ac-btn-text { color: #078ba5; }
.ac-btn-dark.ac-btn-text { color: #2d3347; }
.ac-btn-text:hover:not(:disabled) { background: var(--surface-hover); }
.ac-btn.is-active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,.18); }
.ac-btn-social { border-color: var(--line); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.ac-btn-social > span { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 4px; font-size: 10px; font-weight: 700; }
.ac-btn-social.google > span { background: #fff0ef; color: #d83b35; }
.ac-btn-social.apple { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.ac-btn-social.microsoft > span { background: var(--blue-soft); color: var(--blue); }
.ac-btn-social.github > span { background: #30384a; color: #fff; }
.button-svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.spinner { width: 13px; height: 13px; border: 2px solid color-mix(in srgb, var(--surface) 35%, transparent); border-top-color: var(--surface); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.spec-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin: 14px 0 28px; border: 1px solid var(--line); border-radius: 5px; }
.spec-grid div { padding: 14px 16px; border-right: 1px solid var(--line); }
.spec-grid div:last-child { border: 0; }
.spec-grid span, .spec-grid strong { display: block; }
.spec-grid span { margin-bottom: 3px; color: var(--faint); font: 10px 'DM Mono', monospace; }
.spec-grid strong { color: var(--ink); font-size: 12px; }
.compact-example { margin-top: 0; }
.state-matrix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 18px; width: 100%; }
.state-matrix > div { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.state-matrix small { color: var(--faint); font: 10px 'DM Mono', monospace; }
.form-preview { min-height: 430px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: min(100%, 680px); padding: 28px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-sm); }
.ac-field > span, .ac-field > small { display: block; }
.ac-field > span { margin-bottom: 7px; color: var(--ink); font-size: 12px; font-weight: 600; }
.ac-field input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); color: var(--ink); font-size: 13px; transition: border-color .15s, box-shadow .15s; }
.ac-field input::placeholder { color: var(--faint); }
.ac-field input:hover:not(:read-only) { border-color: var(--muted); }
.ac-field input:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 15%, transparent); }
.ac-field input:read-only { background: var(--surface-subtle); color: var(--muted); }
.ac-field > small { margin-top: 6px; color: var(--faint); font-size: 11px; }
.ac-field.has-error input { border-color: #d83b35; }
.ac-field.has-error input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, #d83b35 15%, transparent); }
.ac-field.has-error > small { color: #c53530; }
.input-affix { display: flex; align-items: center; height: 42px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); }
.input-affix:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 15%, transparent); }
.input-affix i { padding: 0 10px; color: var(--faint); font-style: normal; }
.input-affix input { flex: 1; height: 40px; padding-left: 0; border: 0; box-shadow: none !important; }
.badge-showcase { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }
.ac-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 25px; padding: 0 9px; border: 1px solid transparent; border-radius: 999px; font-size: 11px; font-weight: 600; }
.ac-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ac-badge.neutral { border-color: var(--line-strong); background: var(--surface); color: var(--muted); }
.ac-badge.success { border-color: color-mix(in srgb, var(--green) 28%, transparent); background: color-mix(in srgb, var(--green) 10%, var(--surface)); color: var(--green); }
.ac-badge.warning { border-color: color-mix(in srgb, #c48214 30%, transparent); background: color-mix(in srgb, #c48214 10%, var(--surface)); color: #ad6d08; }
.ac-badge.danger { border-color: color-mix(in srgb, #d83b35 28%, transparent); background: color-mix(in srgb, #d83b35 9%, var(--surface)); color: #c53530; }
.ac-badge.info { border-color: color-mix(in srgb, var(--blue) 25%, transparent); background: var(--blue-soft); color: var(--blue); }
.usage-note { display: flex; gap: 11px; margin-top: 14px; padding: 14px 16px; border-left: 2px solid var(--blue); background: var(--blue-soft); }
.usage-note > span { display: grid; place-items: center; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--blue); color: white; font: 600 11px serif; }
.usage-note p { margin: 0; color: var(--muted); font-size: 12px; }
.usage-note strong { color: var(--ink); }
.alert-stack { display: grid; gap: 12px; }
.ac-alert { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 12px; padding: 15px 16px; border: 1px solid var(--line); border-left-width: 3px; border-radius: 5px; background: var(--surface); }
.ac-alert.info { border-left-color: var(--blue); }
.ac-alert.success { border-left-color: var(--green); }
.ac-alert.warning { border-left-color: #c48214; }
.ac-alert.danger { border-left-color: #d83b35; }
.alert-icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-subtle); color: var(--ink); font-size: 11px; font-weight: 700; }
.ac-alert strong { display: block; color: var(--ink); font-size: 13px; }
.ac-alert p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.ac-alert > button:not(.alert-action) { padding: 0 4px; border: 0; background: transparent; color: var(--faint); font-size: 18px; cursor: pointer; }
.ac-alert > a, .alert-action { align-self: center; color: var(--ink); font-size: 11px; font-weight: 600; white-space: nowrap; }
.alert-action { padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface); cursor: pointer; }
.next-section { display: grid; gap: 8px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-subtle); }
.next-section > span { color: var(--faint); font: 10px 'DM Mono', monospace; letter-spacing: .1em; }
.next-section a { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.next-section strong { color: var(--ink); font-size: 19px; }
.next-section small { color: var(--muted); font-size: 12px; }

/* Selection controls */
.selection-panel, .settings-list { width: min(100%, 610px); overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-sm); }
.selection-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 18px; border-bottom: 1px solid var(--line); }
.selection-panel-head strong, .selection-panel-head small, .choice-row strong, .choice-row small, .switch-row strong, .switch-row small { display: block; }
.selection-panel-head strong { color: var(--ink); font-size: 13px; }
.selection-panel-head small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.selection-panel-head > span { color: var(--faint); font: 10px 'DM Mono', monospace; }
.choice-row { display: grid; grid-template-columns: 20px 1fr; align-items: start; gap: 11px; padding: 13px 18px; border-bottom: 1px solid var(--line); cursor: pointer; }
.choice-row:last-child { border: 0; }
.choice-row:hover:not(.is-disabled) { background: var(--surface-subtle); }
.choice-row strong { color: var(--ink); font-size: 12px; }
.choice-row small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.is-disabled { cursor: not-allowed; opacity: .48; }
.ac-checkbox, .ac-radio { appearance: none; display: grid; place-content: center; flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; }
.ac-checkbox { border-radius: 4px; }
.ac-checkbox::before { content: ''; width: 8px; height: 4px; border: solid var(--surface); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform .12s; }
.ac-checkbox:checked { border-color: var(--ink); background: var(--ink); }
.ac-checkbox:checked::before { transform: translateY(-1px) rotate(-45deg) scale(1); }
.ac-checkbox:focus-visible, .ac-radio:focus-visible, .ac-switch:focus-visible { outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent); }
.radio-group { display: grid; gap: 10px; width: min(100%, 640px); padding: 0; border: 0; }
.radio-group legend { margin-bottom: 12px; color: var(--ink); font-size: 13px; font-weight: 600; }
.radio-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-height: 68px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.radio-card:hover:not(.is-disabled) { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.radio-card:has(.ac-radio:checked) { border-color: var(--ink); background: color-mix(in srgb, var(--surface-subtle) 65%, var(--surface)); box-shadow: 0 0 0 1px var(--ink); }
.ac-radio { border-radius: 50%; }
.ac-radio::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--surface); transform: scale(0); transition: transform .12s; }
.ac-radio:checked { border-color: var(--ink); background: var(--ink); }
.ac-radio:checked::before { transform: scale(1); }
.radio-card strong, .radio-card small { display: block; }
.radio-card strong { color: var(--ink); font-size: 12px; }
.radio-card small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.radio-card em { color: var(--muted); font: normal 11px 'DM Mono', monospace; }
.switch-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; min-height: 70px; padding: 14px 18px; border-bottom: 1px solid var(--line); cursor: pointer; }
.switch-row:last-child { border: 0; }
.switch-row:hover:not(.is-disabled) { background: var(--surface-subtle); }
.switch-row strong { color: var(--ink); font-size: 12px; }
.switch-row small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.ac-switch { appearance: none; position: relative; width: 38px; height: 22px; margin: 0; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-hover); cursor: pointer; transition: background .18s, border-color .18s, box-shadow .18s; }
.ac-switch::after { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(20,27,45,.25); transition: transform .18s; }
.ac-switch:checked { border-color: var(--ink); background: var(--ink); }
.ac-switch:checked::after { transform: translateX(16px); }
.do-dont { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.do-dont > div { padding: 15px 16px; border: 1px solid var(--line); border-radius: 5px; }
.do-dont span { font: 500 9px 'DM Mono', monospace; letter-spacing: .08em; }
.do-dont .do span { color: var(--green); }
.do-dont .dont span { color: #c53530; }
.do-dont p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.select-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 23px; width: min(100%, 680px); padding: 28px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-sm); }
.ac-select-field > span, .ac-select-field > small { display: block; }
.ac-select-field > span { margin-bottom: 7px; color: var(--ink); font-size: 12px; font-weight: 600; }
.ac-select-field > small { margin-top: 6px; color: var(--faint); font-size: 11px; }
.ac-select { appearance: none; width: 100%; height: 42px; padding: 0 38px 0 12px; border: 1px solid var(--line-strong); border-radius: 5px; background-color: var(--surface); background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 16px) 17px, calc(100% - 11px) 17px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; color: var(--ink); font-size: 13px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.ac-select:hover:not(:disabled) { border-color: var(--muted); }
.ac-select:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 15%, transparent); }
.ac-select:disabled { background-color: var(--surface-subtle); color: var(--faint); cursor: not-allowed; }
.ac-select-field.has-error .ac-select { border-color: #d83b35; }
.ac-select-field.has-error > small { color: #c53530; }
.select-size-stack, .select-affix-stack { display: grid; gap: 16px; width: min(100%, 680px); padding: 24px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.ac-select.select-lg { height: 50px; background-position: calc(100% - 16px) 21px, calc(100% - 11px) 21px; font-size: 14px; }
.ac-select.select-sm { height: 34px; background-position: calc(100% - 16px) 13px, calc(100% - 11px) 13px; font-size: 11px; }
.ac-select.select-pill { border-radius: 999px; padding-left: 16px; }
.ac-select.select-multiple { height: auto; min-height: 148px; padding: 6px; background-image: none; }
.ac-select.select-multiple option { padding: 9px 10px; border-radius: 4px; }
.select-affix { display: flex; align-items: stretch; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.select-affix:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 15%, transparent); }
.select-affix > i { display: grid; place-items: center; flex: 0 0 auto; padding: 0 13px; background: var(--surface-subtle); color: var(--muted); font-size: 11px; font-style: normal; font-weight: 650; }
.select-affix > i:first-child { border-right: 1px solid var(--line); }
.select-affix > i:last-child { border-left: 1px solid var(--line); }
.select-affix .ac-select { border: 0; border-radius: 0; box-shadow: none; }

/* Layers and data */
.layer-launch { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px; width: min(100%, 610px); padding: 18px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-sm); }
.layer-glyph { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 5px; background: var(--surface-subtle); color: var(--brand-text); font-size: 18px; }
.layer-launch strong, .layer-launch small { display: block; }
.layer-launch strong { color: var(--ink); font-size: 13px; }
.layer-launch small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.layer-overlay[hidden] { display: none; }
.layer-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
.layer-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(9, 14, 25, .56); backdrop-filter: blur(4px); cursor: default; }
.ac-modal, .ac-drawer { position: relative; overflow: hidden; border: 1px solid var(--line-strong); background: var(--surface); box-shadow: var(--shadow-lg); }
.ac-modal { width: min(480px, 100%); border-radius: 6px; animation: modal-in .18s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.layer-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 18px; border-bottom: 1px solid var(--line); }
.layer-head > div { display: flex; align-items: center; gap: 11px; }
.layer-head strong, .layer-head small { display: block; }
.layer-head strong { color: var(--ink); font-size: 13px; }
.layer-head small { margin-top: 1px; color: var(--muted); font-size: 10px; }
.layer-head > button { width: 30px; height: 30px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 19px; cursor: pointer; }
.layer-head > button:hover { background: var(--surface-hover); color: var(--ink); }
.layer-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 5px; background: var(--brand-soft); color: var(--brand-text); font-size: 12px; font-weight: 700; }
.layer-mark.blue { background: var(--blue-soft); color: var(--blue); }
.layer-body { padding: 19px 20px; }
.layer-body > p { margin: 0 0 16px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.inline-choice { margin: 0 -3px; padding: 11px 3px; border: 0; }
.layer-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 14px 18px; border-top: 1px solid var(--line); background: var(--surface-subtle); }
.drawer-overlay { place-items: stretch end; padding: 0; }
.ac-drawer { display: flex; flex-direction: column; width: min(440px, 92vw); height: 100%; border-width: 0 0 0 1px; animation: drawer-in .22s ease-out; }
@keyframes drawer-in { from { transform: translateX(100%); } }
.drawer-body { display: grid; align-content: start; gap: 18px; flex: 1; overflow: auto; padding: 20px; }
.drawer-body textarea { width: 100%; min-height: 110px; resize: vertical; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); color: var(--ink); font: 13px/1.5 inherit; }
.drawer-body textarea:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 15%, transparent); }
.drawer-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.drawer-status > span:last-child { color: var(--faint); font-size: 10px; }
.table-preview { display: block !important; padding: 28px; }
.data-table-wrap { overflow: hidden; width: 100%; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-sm); }
.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 17px; border-bottom: 1px solid var(--line); }
.table-toolbar strong, .table-toolbar small { display: block; }
.table-toolbar strong { color: var(--ink); font-size: 13px; }
.table-toolbar small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.table-scroll { overflow-x: auto; }
.ac-table { width: 100%; border-collapse: collapse; min-width: 610px; }
.ac-table th, .ac-table td { padding: 12px 13px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.ac-table th { background: var(--surface-subtle); color: var(--faint); font: 500 10px 'DM Mono', monospace; letter-spacing: .04em; text-transform: uppercase; }
.ac-table td { color: var(--muted); font-size: 11px; }
.ac-table tbody tr:last-child td { border-bottom: 0; }
.ac-table tbody tr:hover { background: var(--surface-subtle); }
.ac-table .align-right { text-align: right; }
.project-cell { display: flex; align-items: center; gap: 9px; }
.project-cell > b { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 4px; background: var(--ink); color: var(--surface); font-size: 10px; }
.project-cell strong, .project-cell small { display: block; }
.project-cell strong { color: var(--ink); font-size: 11px; }
.project-cell small { color: var(--faint); font: 9px 'DM Mono', monospace; }
.pagination-demo { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(100%, 650px); padding: 17px 18px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-sm); }
.pagination-demo p { margin: 0; }
.pagination-demo p strong, .pagination-demo p span { display: block; }
.pagination-demo p strong { color: var(--ink); font-size: 12px; }
.pagination-demo p span { margin-top: 2px; color: var(--faint); font-size: 10px; }
.ac-pagination { display: flex; align-items: center; gap: 4px; }
.ac-pagination button { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 7px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; }
.ac-pagination button:hover:not(:disabled) { border-color: var(--line); background: var(--surface-subtle); color: var(--ink); }
.ac-pagination button[aria-current="page"] { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.ac-pagination button:disabled { opacity: .35; cursor: not-allowed; }
.ac-pagination > span { padding: 0 4px; color: var(--faint); }

/* Discovery and feedback */
.tabs-card { width: min(100%, 690px); overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-sm); }
.ac-tabs { display: flex; gap: 4px; padding: 7px 9px 0; border-bottom: 1px solid var(--line); }
.ac-tabs button { position: relative; min-height: 41px; padding: 0 11px; border: 0; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; }
.ac-tabs button:hover { color: var(--ink); }
.ac-tabs button[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.ac-tabs button[aria-selected="true"]::after { content: ''; position: absolute; left: 9px; right: 9px; bottom: -1px; height: 2px; background: var(--brand); }
.ac-tabs button span { margin-left: 4px; padding: 2px 5px; border-radius: 999px; background: var(--surface-hover); color: var(--faint); font: 9px 'DM Mono', monospace; }
.tab-panel { display: grid; grid-template-columns: repeat(3, 1fr); min-height: 135px; padding: 24px; }
.tab-panel[hidden] { display: none; }
.tab-metric { padding: 0 20px; border-right: 1px solid var(--line); }
.tab-metric:first-child { padding-left: 0; }
.tab-metric:last-child { padding-right: 0; border: 0; }
.tab-metric small, .tab-metric strong, .tab-metric em { display: block; }
.tab-metric small { color: var(--faint); font-size: 10px; }
.tab-metric strong { margin-top: 5px; color: var(--ink); font-size: 24px; letter-spacing: -.04em; }
.tab-metric em { margin-top: 5px; color: var(--muted); font: normal 10px 'DM Mono', monospace; }
.tab-metric > i { display: block; height: 4px; margin-top: 12px; overflow: hidden; border-radius: 4px; background: var(--surface-hover); }
.tab-metric > i span { display: block; height: 100%; background: var(--brand); }
.tab-message { grid-column: 1 / -1; align-self: center; margin: 0; text-align: center; }
.tab-message strong, .tab-message span { display: block; }
.tab-message strong { color: var(--ink); font-size: 14px; }
.tab-message span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.tooltip-stage { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 38px; min-height: 120px; width: 100%; }
.tooltip-wrap { position: relative; display: inline-flex; }
.ac-tooltip { position: absolute; z-index: 4; width: max-content; max-width: 180px; padding: 7px 9px; border-radius: 4px; background: var(--ink); color: var(--surface); font-size: 10px; line-height: 1.3; box-shadow: var(--shadow-sm); opacity: 0; pointer-events: none; transform: scale(.96); transition: opacity .15s, transform .15s; }
.tooltip-wrap:hover .ac-tooltip, .tooltip-wrap:focus-within .ac-tooltip { opacity: 1; transform: scale(1); }
.position-top .ac-tooltip { left: 50%; bottom: calc(100% + 9px); transform-origin: bottom center; transform: translateX(-50%) scale(.96); }
.position-top:hover .ac-tooltip, .position-top:focus-within .ac-tooltip { transform: translateX(-50%) scale(1); }
.position-right .ac-tooltip { left: calc(100% + 9px); top: 50%; transform-origin: left center; transform: translateY(-50%) scale(.96); }
.position-right:hover .ac-tooltip, .position-right:focus-within .ac-tooltip { transform: translateY(-50%) scale(1); }
.position-bottom .ac-tooltip { left: 50%; top: calc(100% + 9px); transform-origin: top center; transform: translateX(-50%) scale(.96); }
.position-bottom:hover .ac-tooltip, .position-bottom:focus-within .ac-tooltip { transform: translateX(-50%) scale(1); }
.position-left .ac-tooltip { right: calc(100% + 9px); top: 50%; transform-origin: right center; transform: translateY(-50%) scale(.96); }
.position-left:hover .ac-tooltip, .position-left:focus-within .ac-tooltip { transform: translateY(-50%) scale(1); }
.toast-buttons { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; }
.toast-viewport { position: fixed; right: 20px; bottom: 20px; z-index: 120; display: grid; gap: 9px; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.ac-toast { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 11px; padding: 13px 14px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-lg); pointer-events: auto; animation: toast-in .2s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.ac-toast.removing { opacity: 0; transform: translateY(5px); transition: opacity .16s, transform .16s; }
.toast-symbol { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: var(--surface-subtle); color: var(--ink); font-size: 10px; font-weight: 700; }
.ac-toast.success .toast-symbol { background: color-mix(in srgb, var(--green) 12%, var(--surface)); color: var(--green); }
.ac-toast.info .toast-symbol { background: var(--blue-soft); color: var(--blue); }
.ac-toast.warning .toast-symbol { background: color-mix(in srgb, #c48214 12%, var(--surface)); color: #ad6d08; }
.ac-toast.danger .toast-symbol { background: color-mix(in srgb, #d83b35 11%, var(--surface)); color: #c53530; }
.ac-toast strong, .ac-toast span { display: block; }
.ac-toast strong { color: var(--ink); font-size: 12px; }
.ac-toast span { margin-top: 2px; color: var(--muted); font-size: 10px; }
.ac-toast > button { padding: 0 3px; border: 0; background: transparent; color: var(--faint); font-size: 16px; cursor: pointer; }
.empty-card { display: grid; justify-items: center; width: min(100%, 610px); padding: 48px 28px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); text-align: center; box-shadow: var(--shadow-sm); }
.empty-icon { position: relative; display: block; width: 62px; height: 52px; margin-bottom: 18px; }
.empty-icon i, .empty-icon b { position: absolute; border: 1px solid var(--line-strong); background: var(--surface-subtle); }
.empty-icon i { left: 8px; bottom: 4px; width: 45px; height: 32px; border-radius: 4px; transform: rotate(-5deg); }
.empty-icon b { right: 4px; top: 3px; width: 35px; height: 27px; border-radius: 4px; transform: rotate(8deg); }
.empty-icon em { position: absolute; left: 25px; top: 18px; width: 13px; height: 13px; border: 2px solid var(--brand); border-radius: 50%; box-shadow: 0 0 0 4px var(--surface); }
.empty-card h3 { margin: 0; color: var(--ink); font-size: 16px; }
.empty-card p { max-width: 420px; margin: 8px 0 20px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.empty-card > div { display: flex; gap: 8px; }

.combobox-demo { position: relative; width: min(100%, 440px); padding-bottom: 28px; }
.combobox-demo > label { display: block; margin-bottom: 7px; color: var(--ink); font-size: 11px; font-weight: 600; }
.combobox-control { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; height: 42px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); box-shadow: var(--shadow-sm); }
.combobox-control:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.combobox-control > span { color: var(--muted); font-size: 19px; line-height: 1; }
.combobox-control input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 12px; }
.combobox-control kbd { border: 0; background: transparent; color: var(--faint); box-shadow: none; font-size: 9px; }
.combobox-popover { position: absolute; left: 0; right: 0; top: 71px; z-index: 8; padding: 6px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-lg); }
.combobox-popover[hidden] { display: none; }
.combobox-popover button { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 4px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.combobox-popover button:hover, .combobox-popover button.focused, .combobox-popover button[aria-selected="true"] { background: var(--surface-hover); }
.combobox-popover button > span:nth-child(2) { min-width: 0; }
.combobox-popover strong, .combobox-popover small { display: block; }
.combobox-popover strong { font-size: 11px; }
.combobox-popover small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.combobox-popover em { color: var(--faint); font: normal 9px 'DM Mono', monospace; }
.combobox-popover > p { margin: 8px; color: var(--muted); font-size: 11px; text-align: center; }
.person-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 5px; font: 600 9px 'DM Mono', monospace; }
.person-avatar.coral { background: var(--brand-soft); color: var(--brand-text); }
.person-avatar.blue { background: var(--blue-soft); color: var(--blue); }
.person-avatar.green { background: color-mix(in srgb, var(--green) 13%, var(--surface)); color: var(--green); }
.field-help { display: block; margin-top: 7px; color: var(--faint); font-size: 9px; }

.menu-stage { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(100%, 610px); min-height: 92px; padding: 18px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-sm); }
.project-summary { display: flex; align-items: center; gap: 11px; min-width: 0; }
.project-mark { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 5px; background: var(--ink); color: var(--surface); font: 600 12px 'DM Mono', monospace; }
.project-summary p, .breadcrumb-card p { min-width: 0; margin: 0; }
.project-summary strong, .project-summary small, .breadcrumb-card p strong, .breadcrumb-card p small { display: block; }
.project-summary strong { color: var(--ink); font-size: 12px; }
.project-summary small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.menu-trigger span { margin-left: 7px; color: var(--faint); }
.ac-menu { position: absolute; right: 17px; top: 64px; z-index: 9; width: 244px; padding: 6px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-lg); }
.ac-menu[hidden] { display: none; }
.ac-menu > p { margin: 5px 8px 6px; color: var(--faint); font: 500 8px 'DM Mono', monospace; letter-spacing: .1em; }
.ac-menu button { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 7px; width: 100%; min-height: 35px; padding: 0 8px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); text-align: left; cursor: pointer; }
.ac-menu button:hover, .ac-menu button:focus { outline: 0; background: var(--surface-hover); color: var(--ink); }
.ac-menu button strong { font-size: 10px; font-weight: 500; }
.ac-menu button > span { color: var(--faint); font-size: 13px; }
.ac-menu button kbd { border: 0; background: transparent; color: var(--faint); box-shadow: none; font-size: 8px; }
.ac-menu hr { height: 1px; margin: 5px -6px; border: 0; background: var(--line); }
.ac-menu button.danger { color: #c53530; }

.breadcrumb-preview { padding: 36px; }
.breadcrumb-card { width: min(100%, 660px); overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-sm); }
.ac-breadcrumb { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; }
.ac-breadcrumb a, .ac-breadcrumb button, .ac-breadcrumb strong, .ac-breadcrumb > span { flex: 0 0 auto; font-size: 10px; }
.ac-breadcrumb a { color: var(--muted); }
.ac-breadcrumb a:hover { color: var(--ink); }
.ac-breadcrumb button { padding: 2px 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-subtle); color: var(--muted); cursor: pointer; }
.ac-breadcrumb strong { color: var(--ink); font-weight: 600; }
.ac-breadcrumb > span { color: var(--line-strong); }
.breadcrumb-card > div { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 22px 18px; }
.breadcrumb-card p small { margin-bottom: 4px; color: var(--faint); font: 8px 'DM Mono', monospace; letter-spacing: .08em; }
.breadcrumb-card p strong { color: var(--ink); font-size: 14px; }

.skeleton-card { width: min(100%, 570px); padding: 18px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-sm); }
.skeleton { display: block; overflow: hidden; border-radius: 4px; background: linear-gradient(100deg, var(--surface-subtle) 30%, var(--surface-hover) 50%, var(--surface-subtle) 70%); background-size: 240% 100%; animation: skeleton-wave 1.7s ease-in-out infinite; }
@keyframes skeleton-wave { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.skeleton-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.skeleton-head p { display: grid; gap: 7px; margin: 0; }
.skeleton.avatar { width: 34px; height: 34px; border-radius: 5px; }
.skeleton.line { width: 100%; height: 8px; }
.skeleton.line.title { width: 118px; height: 10px; }
.skeleton.line.short { width: 76px; }
.skeleton.line.medium { width: 68%; }
.skeleton.chip { width: 55px; height: 22px; border-radius: 999px; }
.skeleton.media { height: 150px; margin: 17px 0; border-radius: 5px; }
.skeleton-copy { display: grid; gap: 8px; }

.progress-demo { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 22px; width: min(100%, 650px); }
.progress-row { min-width: 0; }
.progress-row > div:first-child { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.progress-row > div:first-child span { color: var(--ink); font-size: 11px; font-weight: 600; }
.progress-row > div:first-child strong { color: var(--brand-text); font: 500 11px 'DM Mono', monospace; }
.progress-row > small { display: block; margin-top: 8px; color: var(--muted); font-size: 9px; }
.ac-progress { height: 7px; overflow: hidden; border-radius: 999px; background: var(--surface-hover); }
.ac-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 66%, var(--blue))); transition: width .28s ease; }
.progress-compact { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.progress-ring { --size: 45px; display: grid; place-items: center; width: var(--size); height: var(--size); border-radius: 50%; background: conic-gradient(var(--blue) calc(var(--progress) * 1%), var(--surface-hover) 0); }
.progress-ring::before { content: ''; grid-area: 1 / 1; width: 35px; height: 35px; border-radius: 50%; background: var(--surface); }
.progress-ring b { grid-area: 1 / 1; z-index: 1; color: var(--ink); font: 500 9px 'DM Mono', monospace; }
.progress-compact p { margin: 0; }
.progress-compact strong, .progress-compact small { display: block; }
.progress-compact strong { color: var(--ink); font-size: 11px; }
.progress-compact small { margin-top: 3px; color: var(--muted); font-size: 9px; }

.ac-accordion { width: min(100%, 660px); overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-sm); }
.ac-accordion article + article { border-top: 1px solid var(--line); }
.ac-accordion h3 { margin: 0; }
.ac-accordion h3 button { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; width: 100%; padding: 16px 18px; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.ac-accordion h3 button:hover { background: var(--surface-subtle); }
.ac-accordion h3 button:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--blue); outline-offset: -2px; }
.ac-accordion h3 button strong, .ac-accordion h3 button small { display: block; }
.ac-accordion h3 button strong { font-size: 11px; }
.ac-accordion h3 button small { margin-top: 4px; color: var(--muted); font-size: 9px; font-weight: 400; }
.ac-accordion h3 button i { color: var(--faint); font-style: normal; font-size: 15px; }
.ac-accordion article > div { padding: 0 18px 17px; }
.ac-accordion article > div[hidden] { display: none; }
.ac-accordion article > div p { margin: 0 0 9px; color: var(--muted); font-size: 10px; line-height: 1.65; }
.ac-accordion article > div a { color: var(--blue); font-size: 10px; font-weight: 600; }

.date-picker-demo { width: min(100%, 340px); }
.date-picker-demo > label { display: block; margin-bottom: 7px; color: var(--ink); font-size: 11px; font-weight: 600; }
.date-field { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); color: var(--muted); text-align: left; box-shadow: var(--shadow-sm); cursor: pointer; }
.date-field:hover, .date-field:focus { border-color: var(--blue); outline: 0; box-shadow: 0 0 0 3px var(--blue-soft); }
.date-field strong { color: var(--ink); font-size: 11px; font-weight: 500; }
.date-field i { font-style: normal; }
.calendar-popover { margin-top: 8px; padding: 12px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-lg); }
.calendar-head { display: grid; grid-template-columns: 30px 1fr 30px; align-items: center; margin-bottom: 12px; }
.calendar-head strong { color: var(--ink); font-size: 11px; text-align: center; }
.calendar-head button { width: 30px; height: 30px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer; }
.calendar-head button:hover { background: var(--surface-hover); color: var(--ink); }
.calendar-week, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.calendar-week { margin-bottom: 4px; }
.calendar-week span { color: var(--faint); font: 8px 'DM Mono', monospace; text-align: center; }
.calendar-grid button { aspect-ratio: 1; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font: 10px 'DM Mono', monospace; cursor: pointer; }
.calendar-grid button:hover { background: var(--surface-hover); color: var(--ink); }
.calendar-grid button.outside { color: var(--faint); opacity: .55; }
.calendar-grid button.today { box-shadow: inset 0 0 0 1px var(--line-strong); }
.calendar-grid button[aria-selected="true"] { background: var(--ink); color: var(--surface); box-shadow: none; }
.calendar-grid button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.calendar-foot { display: flex; align-items: center; justify-content: space-between; margin: 10px -12px -12px; padding: 10px 12px; border-top: 1px solid var(--line); }
.calendar-foot button { border: 0; background: transparent; color: var(--blue); font-size: 9px; font-weight: 600; cursor: pointer; }
.calendar-foot span { color: var(--faint); font: 8px 'DM Mono', monospace; }

.command-launch { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; width: min(100%, 650px); padding: 20px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-sm); }
.command-glyph { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 6px; background: var(--ink); color: var(--surface); font: 500 15px 'DM Mono', monospace; }
.command-launch > div strong, .command-launch > div small { display: block; }
.command-launch > div strong { color: var(--ink); font-size: 12px; }
.command-launch > div small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.command-launch .ac-btn kbd { margin-left: 8px; border-color: color-mix(in srgb, var(--surface) 25%, transparent); background: color-mix(in srgb, var(--surface) 12%, transparent); color: color-mix(in srgb, var(--surface) 75%, transparent); box-shadow: none; }
.command-overlay[hidden] { display: none; }
.command-overlay { position: fixed; inset: 0; z-index: 130; display: grid; place-items: start center; padding-top: min(15vh, 130px); }
.command-backdrop { position: absolute; inset: 0; border: 0; background: rgba(11, 16, 27, .57); backdrop-filter: blur(6px); }
.command-dialog { position: relative; width: min(590px, calc(100vw - 32px)); overflow: hidden; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-lg); animation: dialog-in .18s ease-out; }
.command-search { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; min-height: 55px; padding: 0 15px; border-bottom: 1px solid var(--line); }
.command-search > span { color: var(--muted); font-size: 19px; }
.command-search input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 14px; }
.command-results { max-height: 340px; overflow-y: auto; padding: 8px; }
.command-results > p { margin: 7px 9px 5px; color: var(--faint); font: 8px 'DM Mono', monospace; letter-spacing: .09em; }
.command-results button { display: grid; grid-template-columns: 29px 1fr auto; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 5px 8px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); text-align: left; cursor: pointer; }
.command-results button:hover, .command-results button.focused { background: var(--surface-hover); color: var(--ink); }
.command-results button > span { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid var(--line); border-radius: 4px; color: var(--brand-text); font: 500 10px 'DM Mono', monospace; }
.command-results button strong { font-size: 11px; font-weight: 500; }
.command-results button small { color: var(--faint); font-size: 9px; }
.command-results button kbd { border: 0; background: transparent; color: var(--faint); box-shadow: none; font-size: 8px; }
.command-empty { padding: 25px 12px; color: var(--muted); font-size: 11px; text-align: center; }
.command-footer { display: flex; gap: 15px; min-height: 38px; align-items: center; padding: 0 14px; border-top: 1px solid var(--line); background: var(--surface-subtle); }
.command-footer span { color: var(--faint); font-size: 8px; }
.command-footer kbd { margin-right: 3px; }

.upload-demo { width: min(100%, 610px); }
.upload-dropzone { display: grid; justify-items: center; padding: 31px 22px; border: 1px dashed var(--line-strong); border-radius: 6px; background: var(--surface-subtle); text-align: center; cursor: pointer; transition: border-color .18s, background .18s, transform .18s; }
.upload-dropzone:hover, .upload-dropzone.dragging { border-color: var(--blue); background: var(--blue-soft); transform: translateY(-1px); }
.upload-icon { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 12px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--brand-text); font-size: 18px; box-shadow: var(--shadow-sm); }
.upload-dropzone strong { color: var(--ink); font-size: 12px; }
.upload-dropzone p { margin: 5px 0 11px; color: var(--muted); font-size: 10px; }
.upload-dropzone u { color: var(--blue); font-weight: 600; text-underline-offset: 2px; }
.upload-dropzone small { color: var(--faint); font-size: 9px; }
.upload-list { display: grid; gap: 7px; margin-top: 9px; }
.upload-file { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; min-height: 56px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
.file-mark { display: grid; place-items: center; width: 33px; height: 36px; border-radius: 4px; background: var(--brand-soft); color: var(--brand-text); font: 600 8px 'DM Mono', monospace; }
.upload-file.invalid .file-mark { background: color-mix(in srgb, #d83b35 11%, var(--surface)); color: #c53530; }
.upload-file.invalid small { color: #c53530; }
.upload-file p { min-width: 0; margin: 0; }
.upload-file strong, .upload-file small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-file strong { color: var(--ink); font-size: 10px; }
.upload-file small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.upload-file > button { width: 27px; height: 27px; border: 0; border-radius: 4px; background: transparent; color: var(--faint); cursor: pointer; }
.upload-file > button:hover { background: var(--surface-hover); color: var(--ink); }

.slider-card { width: min(100%, 600px); padding: 22px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-sm); }
.slider-label { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 15px; }
.slider-label strong, .slider-label small { display: block; }
.slider-label strong { color: var(--ink); font-size: 12px; }
.slider-label small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.slider-label output { min-width: 46px; padding: 6px 8px; border-radius: 4px; background: var(--surface-subtle); color: var(--ink); font: 500 11px 'DM Mono', monospace; text-align: center; }
.slider-card input[type="range"] { --range-value: 72%; width: 100%; height: 22px; margin: 22px 0 1px; appearance: none; background: transparent; cursor: pointer; }
.slider-card input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--brand) var(--range-value), var(--surface-hover) var(--range-value)); }
.slider-card input[type="range"]::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -6px; appearance: none; border: 3px solid var(--surface); border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow-sm); }
.slider-card input[type="range"]:focus-visible { outline: 0; }
.slider-card input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--brand), 0 0 0 4px var(--brand-soft); }
.slider-scale { display: flex; justify-content: space-between; color: var(--faint); font-size: 8px; }
.slider-presets { display: flex; gap: 7px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.slider-presets button { padding: 6px 9px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--muted); font-size: 9px; cursor: pointer; }
.slider-presets button:hover, .slider-presets button.active { border-color: var(--line-strong); background: var(--surface-hover); color: var(--ink); }

.textarea-demo { display: block; width: min(100%, 590px); }
.textarea-demo > span:first-child { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.textarea-demo > span strong { color: var(--ink); font-size: 11px; }
.textarea-demo > span em { color: var(--faint); font-size: 9px; font-style: normal; }
.textarea-demo textarea { display: block; width: 100%; min-height: 132px; resize: vertical; padding: 12px 13px; border: 1px solid var(--line-strong); border-radius: 5px; outline: 0; background: var(--surface); color: var(--ink); font: inherit; font-size: 11px; line-height: 1.65; box-shadow: var(--shadow-sm); }
.textarea-demo textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.textarea-demo textarea.limit-near { border-color: #c48214; box-shadow: 0 0 0 3px color-mix(in srgb, #c48214 12%, transparent); }
.textarea-meta { display: flex; justify-content: space-between; gap: 15px; margin-top: 7px; }
.textarea-meta small { color: var(--muted); font-size: 9px; }
.textarea-meta output { color: var(--faint); font: 9px 'DM Mono', monospace; }
.textarea-meta output.limit-near { color: #ad6d08; }

.otp-card { display: grid; justify-items: center; width: min(100%, 520px); padding: 33px 26px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-sm); text-align: center; }
.otp-symbol { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 14px; border-radius: 6px; background: var(--ink); color: var(--surface); font-size: 15px; }
.otp-card h3 { margin: 0; color: var(--ink); font-size: 15px; }
.otp-card > p { max-width: 350px; margin: 7px 0 20px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.otp-card > p strong { color: var(--ink); }
.otp-fields { display: flex; align-items: center; justify-content: center; gap: 7px; }
.otp-fields input { width: 42px; height: 46px; border: 1px solid var(--line-strong); border-radius: 5px; outline: 0; background: var(--surface); color: var(--ink); font: 600 17px 'DM Mono', monospace; text-align: center; box-shadow: var(--shadow-sm); }
.otp-fields input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.otp-fields input.filled { background: var(--surface-subtle); }
.otp-fields > span { margin: 0 1px; color: var(--faint); }
.otp-status { min-height: 17px; margin: 11px 0 10px; color: var(--muted); font-size: 9px; }
.otp-status.success { color: var(--green); }
.otp-card > .ac-btn { min-width: 150px; }
.otp-resend { margin-top: 12px; border: 0; background: transparent; color: var(--muted); font-size: 9px; cursor: pointer; }
.otp-resend span { color: var(--faint); font-family: 'DM Mono', monospace; }

.avatar-showcase { width: min(100%, 620px); padding: 23px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-sm); }
.avatar-sizes { display: flex; align-items: center; gap: 15px; min-height: 64px; }
.ac-avatar { position: relative; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: var(--ink); font-family: 'DM Mono', monospace; font-weight: 600; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 13%, transparent); }
.ac-avatar.xs { width: 24px; height: 24px; font-size: 7px; }
.ac-avatar.sm { width: 32px; height: 32px; font-size: 8px; }
.ac-avatar.md { width: 40px; height: 40px; font-size: 10px; }
.ac-avatar.lg { width: 48px; height: 48px; font-size: 11px; }
.ac-avatar.xl { width: 56px; height: 56px; font-size: 16px; }
.ac-avatar.coral { background: var(--brand-soft); color: var(--brand-text); }
.ac-avatar.blue { background: var(--blue-soft); color: var(--blue); }
.ac-avatar.green { background: color-mix(in srgb, var(--green) 13%, var(--surface)); color: var(--green); }
.ac-avatar.ink { background: var(--ink); color: var(--surface); }
.ac-avatar.outline { background: var(--surface); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-strong); }
.presence { position: absolute; right: -1px; bottom: 0; width: 10px; height: 10px; border: 2px solid var(--surface); border-radius: 50%; }
.presence.online { background: var(--green); }
.presence.busy { background: #d83b35; }
.presence.away { background: #c48214; }
.avatar-group-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 19px; padding-top: 17px; border-top: 1px solid var(--line); }
.avatar-group-row > div:first-child strong, .avatar-group-row > div:first-child small { display: block; }
.avatar-group-row > div:first-child strong { color: var(--ink); font-size: 11px; }
.avatar-group-row > div:first-child small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.avatar-group { display: flex; flex-direction: row-reverse; justify-content: flex-end; }
.avatar-group > * { margin-left: -8px; border: 2px solid var(--surface); }
.avatar-group button { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-hover); color: var(--muted); font: 500 8px 'DM Mono', monospace; cursor: pointer; }

.status-panel { width: min(100%, 620px); overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-sm); }
.status-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 17px; border-bottom: 1px solid var(--line); }
.status-head strong, .status-head small { display: block; }
.status-head strong { color: var(--ink); font-size: 12px; }
.status-head small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.system-health { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 9px; font-weight: 600; }
.system-health i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 12%, transparent); }
.status-list > div { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; padding: 13px 17px; border-bottom: 1px solid var(--line); }
.status-dot-ui { width: 9px; height: 9px; border: 2px solid var(--surface); border-radius: 50%; box-shadow: 0 0 0 1px var(--line-strong); }
.status-dot-ui.online { background: var(--green); }
.status-dot-ui.warning { background: #c48214; }
.status-dot-ui.neutral { background: var(--faint); }
.status-list p { margin: 0; }
.status-list strong, .status-list small { display: block; }
.status-list strong { color: var(--ink); font-size: 10px; }
.status-list small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.status-list em { color: var(--muted); font-size: 9px; font-style: normal; }
.status-panel > .ac-btn { margin: 13px 17px; }
.status-panel.refreshing .status-dot-ui { animation: status-pulse .55s ease-in-out 2; }
@keyframes status-pulse { 50% { transform: scale(1.35); opacity: .65; } }

.timeline-card { width: min(100%, 640px); overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-sm); }
.timeline-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 17px; border-bottom: 1px solid var(--line); }
.timeline-toolbar strong, .timeline-toolbar small { display: block; }
.timeline-toolbar strong { color: var(--ink); font-size: 12px; }
.timeline-toolbar small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.ac-timeline { margin: 0; padding: 17px 20px 18px; list-style: none; }
.ac-timeline li { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 12px; min-height: 66px; }
.ac-timeline li:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 28px; bottom: 0; width: 1px; background: var(--line); }
.timeline-node { position: relative; z-index: 1; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; font-size: 9px; }
.timeline-node.success { background: color-mix(in srgb, var(--green) 13%, var(--surface)); color: var(--green); }
.timeline-node.coral { background: var(--brand-soft); color: var(--brand-text); }
.timeline-node.blue { background: var(--blue-soft); color: var(--blue); }
.timeline-node.neutral { background: var(--surface-hover); color: var(--faint); }
.ac-timeline li p { margin: 2px 0 4px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.ac-timeline li p strong { color: var(--ink); }
.ac-timeline li small { display: block; color: var(--faint); font-size: 8px; }
.ac-timeline li code { display: inline-block; margin-top: 6px; padding: 3px 6px; border-radius: 4px; background: var(--surface-subtle); color: var(--blue); font: 8px 'DM Mono', monospace; }

.stepper-card { width: min(100%, 700px); overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-sm); }
.ac-stepper { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 17px 17px 15px; border-bottom: 1px solid var(--line); list-style: none; }
.ac-stepper li { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; }
.ac-stepper li:not(:last-child)::after { content: ''; position: absolute; left: 29px; right: 8px; top: 12px; z-index: 0; height: 1px; background: var(--line-strong); }
.ac-stepper li > span { position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 auto; width: 25px; height: 25px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--faint); font: 500 9px 'DM Mono', monospace; }
.ac-stepper li p { position: relative; z-index: 1; min-width: 0; margin: 0; padding-right: 6px; background: var(--surface); }
.ac-stepper li strong, .ac-stepper li small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-stepper li strong { color: var(--muted); font-size: 9px; }
.ac-stepper li small { margin-top: 2px; color: var(--faint); font-size: 7px; }
.ac-stepper li[data-step-state="complete"] > span { border-color: var(--green); background: var(--green); color: white; }
.ac-stepper li[data-step-state="complete"]::after { background: var(--green); }
.ac-stepper li[data-step-state="current"] > span { border-color: var(--brand); background: var(--brand); color: white; box-shadow: 0 0 0 3px var(--brand-soft); }
.ac-stepper li[data-step-state="current"] strong { color: var(--ink); }
.step-content { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 15px; min-height: 142px; padding: 23px; }
.step-illustration { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 6px; background: var(--ink); color: var(--surface); font: 500 16px 'DM Mono', monospace; }
.step-content small { color: var(--brand-text); font: 8px 'DM Mono', monospace; letter-spacing: .08em; }
.step-content h3 { margin: 5px 0 6px; color: var(--ink); font-size: 14px; }
.step-content p { max-width: 470px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.step-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 13px 17px; border-top: 1px solid var(--line); background: var(--surface-subtle); }

.data-grid-preview { padding: 24px; }
.data-grid-card { width: min(100%, 750px); overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-sm); }
.grid-toolbar { display: grid; grid-template-columns: 1fr minmax(180px, 250px) auto; align-items: center; gap: 10px; padding: 13px 14px; border-bottom: 1px solid var(--line); }
.grid-toolbar > div strong, .grid-toolbar > div small { display: block; }
.grid-toolbar > div strong { color: var(--ink); font-size: 11px; }
.grid-toolbar > div small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.grid-toolbar label { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 7px; min-height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; color: var(--faint); }
.grid-toolbar label:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.grid-toolbar input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 9px; }
.grid-scroll { overflow-x: auto; }
.advanced-grid { width: 100%; min-width: 650px; border-collapse: collapse; }
.advanced-grid th, .advanced-grid td { height: 45px; padding: 0 11px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.advanced-grid th { background: var(--surface-subtle); color: var(--faint); font: 500 8px 'DM Mono', monospace; letter-spacing: .04em; }
.advanced-grid th button { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.advanced-grid td { color: var(--muted); font-size: 9px; }
.advanced-grid td strong, .advanced-grid td small { display: block; }
.advanced-grid td strong { color: var(--ink); font-size: 10px; }
.advanced-grid td small { margin-top: 2px; color: var(--faint); font-size: 8px; }
.advanced-grid td:last-child button { border: 0; background: transparent; color: var(--faint); cursor: pointer; }
.advanced-grid tr.selected { background: var(--blue-soft); }
.grid-status { display: inline-flex; align-items: center; padding: 3px 6px; border-radius: 999px; font-size: 8px; }
.grid-status.active { background: color-mix(in srgb, var(--green) 12%, var(--surface)); color: var(--green); }
.grid-status.review { background: var(--blue-soft); color: var(--blue); }
.grid-status.paused { background: var(--surface-hover); color: var(--muted); }
.grid-footer { display: flex; justify-content: space-between; padding: 10px 14px; color: var(--faint); font-size: 8px; }

.tree-card { width: min(100%, 480px); overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-sm); }
.tree-head { display: flex; justify-content: space-between; padding: 13px 14px; border-bottom: 1px solid var(--line); }
.tree-head strong { color: var(--ink); font-size: 11px; }
.tree-head span { padding: 3px 6px; border-radius: 4px; background: var(--surface-hover); color: var(--muted); font: 8px 'DM Mono', monospace; }
.ac-tree, .ac-tree ul { margin: 0; padding: 7px; list-style: none; }
.ac-tree ul { padding: 0 0 0 21px; }
.ac-tree li[hidden], .ac-tree ul[hidden] { display: none; }
.ac-tree button { display: grid; grid-template-columns: 13px 18px 1fr auto; align-items: center; gap: 5px; width: 100%; min-height: 33px; padding: 0 8px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); text-align: left; cursor: pointer; }
.ac-tree button:hover, .ac-tree button:focus, .ac-tree button.selected { outline: 0; background: var(--surface-hover); color: var(--ink); }
.ac-tree button i { color: var(--faint); font-style: normal; font-size: 13px; }
.ac-tree button > span { color: var(--brand-text); }
.ac-tree button strong { font-size: 10px; font-weight: 500; }
.ac-tree button em { color: var(--faint); font: normal 8px 'DM Mono', monospace; }
.ac-tree button em.modified { color: #c48214; }

.tag-demo { display: block; width: min(100%, 590px); }
.tag-demo > span { display: block; margin-bottom: 7px; color: var(--ink); font-size: 11px; font-weight: 600; }
.tag-control { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 46px; padding: 7px 8px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); box-shadow: var(--shadow-sm); }
.tag-control:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.tag-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 27px; padding: 0 5px 0 8px; border-radius: 4px; background: var(--brand-soft); color: var(--brand-text); font-size: 9px; font-weight: 600; }
.tag-chip.blue { background: var(--blue-soft); color: var(--blue); }
.tag-chip button { width: 18px; height: 18px; border: 0; border-radius: 4px; background: transparent; color: currentColor; cursor: pointer; }
.tag-chip button:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.tag-control input { flex: 1; min-width: 120px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 10px; }
.tag-demo > small { display: block; margin-top: 7px; color: var(--faint); font-size: 9px; }

.rating-card { display: grid; grid-template-columns: auto 1fr; gap: 15px; width: min(100%, 590px); padding: 24px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-sm); }
.rating-symbol { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 6px; background: var(--ink); color: var(--surface); }
.rating-card h3 { margin: 0; color: var(--ink); font-size: 14px; }
.rating-card p { margin: 5px 0 13px; color: var(--muted); font-size: 9px; }
.rating-stars { display: flex; gap: 4px; }
.rating-stars button { padding: 0 2px; border: 0; background: transparent; color: var(--line-strong); font-size: 25px; line-height: 1; cursor: pointer; transition: color .15s, transform .15s; }
.rating-stars button:hover, .rating-stars button.active { color: #e2a21b; transform: translateY(-1px); }
.rating-stars button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 3px; }
.rating-card output { display: block; margin-top: 9px; color: var(--muted); font-size: 9px; }

.carousel-card { width: min(100%, 660px); overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-sm); }
.carousel-window { overflow: hidden; }
.carousel-track { display: flex; transition: transform .3s ease; }
.carousel-slide { flex: 0 0 100%; min-height: 230px; padding: 30px; }
.carousel-slide.coral { background: linear-gradient(135deg, var(--brand-soft), var(--surface)); }
.carousel-slide.blue { background: linear-gradient(135deg, var(--blue-soft), var(--surface)); }
.carousel-slide.ink { background: var(--ink); color: var(--surface); }
.carousel-slide > span { color: var(--brand-text); font: 8px 'DM Mono', monospace; letter-spacing: .1em; }
.carousel-slide.ink > span { color: color-mix(in srgb, var(--surface) 65%, transparent); }
.carousel-slide h3 { max-width: 420px; margin: 25px 0 8px; color: var(--ink); font-size: 25px; letter-spacing: -.04em; }
.carousel-slide.ink h3 { color: var(--surface); }
.carousel-slide p { max-width: 480px; margin: 0 0 20px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.carousel-slide.ink p { color: color-mix(in srgb, var(--surface) 70%, transparent); }
.carousel-slide a { color: var(--blue); font-size: 10px; font-weight: 600; }
.carousel-slide.ink a { color: var(--surface); }
.carousel-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 12px 14px; border-top: 1px solid var(--line); }
.carousel-controls > div:first-child { display: flex; gap: 6px; }
.carousel-controls > div:first-child button { width: 31px; height: 31px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--muted); cursor: pointer; }
.carousel-controls > div:first-child button:hover { border-color: var(--ink); color: var(--ink); }
.carousel-dots { display: flex; gap: 5px; }
.carousel-dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: var(--line-strong); cursor: pointer; transition: width .2s, background .2s; }
.carousel-dots button.active { width: 18px; background: var(--brand); }
.carousel-controls > span { justify-self: end; color: var(--faint); font: 8px 'DM Mono', monospace; }

.media-list { width: min(100%, 620px); overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-sm); }
.media-object { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 12px; padding: 16px; }
.media-object + .media-object { border-top: 1px solid var(--line); }
.media-thumb { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 6px; font: 600 9px 'DM Mono', monospace; }
.media-thumb.coral { background: var(--brand-soft); color: var(--brand-text); }
.media-thumb.blue { background: var(--blue-soft); color: var(--blue); }
.media-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.media-title strong { color: var(--ink); font-size: 10px; }
.media-title time { color: var(--faint); font-size: 8px; }
.media-object p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.media-object p a { color: var(--blue); font-weight: 600; }
.media-object > button { border: 0; background: transparent; color: var(--faint); cursor: pointer; }
.media-attachment { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px; margin-top: 10px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-subtle); }
.media-attachment span { color: var(--brand-text); }
.media-attachment strong { color: var(--ink); font-size: 8px; }
.media-attachment small { color: var(--faint); font-size: 8px; }

.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; width: min(100%, 680px); }
.stat-card { min-height: 155px; padding: 17px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-sm); }
.stat-card.featured { grid-row: span 2; min-height: 320px; }
.stat-card > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stat-card > div:first-child span { color: var(--muted); font-size: 9px; }
.stat-card em { font: normal 8px 'DM Mono', monospace; }
.stat-card em.up { color: var(--green); }
.stat-card em.down { color: var(--blue); }
.stat-card > strong { display: block; margin-top: 17px; color: var(--ink); font-size: 25px; letter-spacing: -.04em; }
.stat-card.featured > strong { margin-top: 28px; font-size: 34px; }
.stat-card > small { display: block; margin-top: 4px; color: var(--faint); font-size: 8px; }
.sparkline { display: flex; align-items: end; gap: 5px; height: 100px; margin-top: 42px; }
.sparkline b { flex: 1; min-height: 8px; border-radius: 4px 4px 2px 2px; background: linear-gradient(var(--brand), color-mix(in srgb, var(--brand) 55%, var(--blue))); }
.mini-progress { height: 5px; margin-top: 24px; overflow: hidden; border-radius: 999px; background: var(--surface-hover); }
.mini-progress i { display: block; height: 100%; border-radius: inherit; background: var(--blue); }
.stat-foot { display: flex; align-items: center; gap: 6px; margin-top: 20px; color: var(--muted); font-size: 8px; }

.description-card { width: min(100%, 650px); overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-sm); }
.description-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.description-head > div { display: flex; align-items: center; gap: 11px; }
.description-head p { margin: 0; }
.description-head strong, .description-head small { display: block; }
.description-head strong { color: var(--ink); font-size: 12px; }
.description-head small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.description-list { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; }
.description-list > div { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.description-list > div:nth-child(odd) { border-right: 1px solid var(--line); }
.description-list dt { color: var(--faint); font: 8px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .06em; }
.description-list dd { display: flex; align-items: center; gap: 7px; min-height: 27px; margin: 5px 0 0; color: var(--ink); font-size: 10px; }
.description-list .tag-chip { min-height: 23px; font-size: 8px; }

/* Layout utilities */
.divider-showcase { width: min(100%, 620px); }
.divider-card { padding: 25px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-sm); }
.divider-card p { margin: 0; }
.divider-card p strong, .divider-card p small { display: block; }
.divider-card p strong { color: var(--ink); font-size: 12px; }
.divider-card p small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.ac-divider { height: 1px; margin: 20px 0; border: 0; background: var(--line); }
.ac-divider.labelled { display: flex; align-items: center; gap: 12px; height: auto; margin: 22px 0; background: transparent; }
.ac-divider.labelled::before, .ac-divider.labelled::after { content: ''; height: 1px; flex: 1; background: var(--line); }
.ac-divider.labelled span { color: var(--faint); font: 8px 'DM Mono', monospace; letter-spacing: .12em; }
.divider-actions { display: flex; align-items: center; justify-content: center; gap: 14px; }
.ac-divider.vertical { display: block; flex: 0 0 1px; align-self: stretch; width: 1px; height: auto; min-height: 34px; margin: 0; }

.scroll-card { position: relative; width: min(100%, 570px); overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-sm); }
.scroll-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 17px; border-bottom: 1px solid var(--line); }
.scroll-head strong, .scroll-head small { display: block; }
.scroll-head strong { color: var(--ink); font-size: 11px; }
.scroll-head small { margin-top: 3px; color: var(--faint); font-size: 9px; }
.scroll-head button { border: 0; background: transparent; color: var(--blue); font-size: 9px; font-weight: 600; cursor: pointer; }
.scroll-head button:hover { color: var(--ink); }
.scroll-viewport { max-height: 255px; overflow-y: auto; scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
.scroll-viewport:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.scroll-day { position: sticky; top: 0; z-index: 1; padding: 8px 17px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--faint); font: 8px 'DM Mono', monospace; letter-spacing: .09em; backdrop-filter: blur(8px); }
.scroll-item { display: flex; align-items: center; gap: 10px; padding: 13px 17px; border-bottom: 1px solid var(--line); }
.scroll-item p { margin: 0; color: var(--muted); font-size: 10px; }
.scroll-item p strong { color: var(--ink); }
.scroll-item small { display: block; margin-top: 3px; color: var(--faint); font-size: 8px; }
.scroll-shadow { pointer-events: none; position: absolute; right: 0; bottom: 0; left: 0; height: 28px; background: linear-gradient(transparent, color-mix(in srgb, var(--surface) 92%, transparent)); }

.ratio-demo { width: min(100%, 690px); }
.ratio-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 13px; }
.ratio-toolbar strong, .ratio-toolbar small { display: block; }
.ratio-toolbar strong { color: var(--ink); font-size: 11px; }
.ratio-toolbar small { margin-top: 3px; color: var(--faint); font-size: 9px; }
.ratio-toolbar > div:last-child { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
.ratio-toolbar button { padding: 7px 10px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font: 9px 'DM Mono', monospace; cursor: pointer; }
.ratio-toolbar button:hover { color: var(--ink); }
.ratio-toolbar button.active { background: var(--ink); color: var(--surface); }
.ratio-stage { display: grid; place-items: center; min-height: 335px; padding: 22px; border: 1px solid var(--line); border-radius: 6px; background-color: var(--surface-subtle); background-image: linear-gradient(45deg, var(--line) 25%, transparent 25%), linear-gradient(-45deg, var(--line) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--line) 75%), linear-gradient(-45deg, transparent 75%, var(--line) 75%); background-position: 0 0, 0 5px, 5px -5px, -5px 0; background-size: 10px 10px; }
.ratio-frame { position: relative; display: flex; flex-direction: column; justify-content: space-between; width: min(100%, 470px); max-height: 300px; aspect-ratio: 16 / 9; overflow: hidden; padding: 19px; border-radius: 5px; background: radial-gradient(circle at 85% 15%, rgba(255,255,255,.2), transparent 30%), linear-gradient(135deg, #18223b, #2e5dbb); color: #fff; box-shadow: 0 20px 55px rgba(20,27,45,.2); transition: width .25s, aspect-ratio .25s; }
.ratio-frame > span { font-size: 10px; font-weight: 700; letter-spacing: -.03em; }
.ratio-frame div small { display: block; margin-bottom: 7px; color: rgba(255,255,255,.65); font: 7px 'DM Mono', monospace; letter-spacing: .11em; }
.ratio-frame div strong { font-size: clamp(17px, 3vw, 27px); line-height: 1.05; letter-spacing: -.045em; }
.ratio-frame em { position: absolute; right: 13px; bottom: 11px; color: rgba(255,255,255,.55); font: 8px 'DM Mono', monospace; font-style: normal; }

.resizable-preview { overflow-x: auto; }
.resizable-shell { --left: 34%; display: flex; width: 100%; min-width: 560px; min-height: 320px; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-sm); }
.resize-pane { min-width: 0; }
.tree-pane { flex: 0 0 var(--left); background: var(--surface-subtle); }
.code-pane-demo { flex: 1 1 auto; }
.resize-handle { position: relative; flex: 0 0 11px; padding: 0; border: 0; border-right: 1px solid var(--line); border-left: 1px solid var(--line); background: var(--surface); cursor: col-resize; touch-action: none; }
.resize-handle:hover, .resize-handle:focus-visible { background: var(--blue-soft); outline: 0; }
.resize-handle i { position: absolute; top: 50%; left: 50%; width: 3px; height: 30px; border-right: 1px solid var(--faint); border-left: 1px solid var(--faint); transform: translate(-50%, -50%); }
.pane-head { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.pane-head strong { color: var(--ink); font-size: 10px; }
.pane-head span { color: var(--faint); font-size: 8px; }
.pane-head button { border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.tree-pane ul { margin: 8px; padding: 0; list-style: none; }
.tree-pane li { display: flex; gap: 7px; padding: 8px 9px; border-radius: 4px; color: var(--muted); font-size: 9px; }
.tree-pane li.selected { background: var(--blue-soft); color: var(--blue); font-weight: 600; }
.code-pane-demo pre { min-height: 275px; margin: 0; padding: 25px; background: var(--surface); color: var(--muted); font-size: 10px; line-height: 1.75; }

/* Feedback and status */
.banner-stage { display: grid; gap: 14px; width: min(100%, 720px); }
.ac-banner { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 13px; min-height: 76px; padding: 14px 15px; border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line)); border-radius: 6px; background: var(--blue-soft); }
.banner-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--blue); color: #fff; font: 600 12px 'DM Mono', monospace; }
.ac-banner p { margin: 0; }
.ac-banner strong, .ac-banner small { display: block; }
.ac-banner strong { color: var(--ink); font-size: 11px; }
.ac-banner small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.ac-banner a { color: var(--blue); font-size: 9px; font-weight: 650; white-space: nowrap; }
.ac-banner > button { display: grid; place-items: center; width: 27px; height: 27px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; }
.ac-banner > button:hover { background: color-mix(in srgb, var(--blue) 10%, transparent); color: var(--ink); }
.banner-restore { justify-self: center; }

.callout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: min(100%, 720px); }
.ac-callout { display: flex; gap: 12px; min-height: 115px; padding: 18px; border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: 5px; background: var(--surface); }
.ac-callout > span { display: grid; place-items: center; flex: 0 0 25px; height: 25px; border-radius: 4px; background: var(--surface-subtle); color: var(--muted); font-size: 11px; }
.ac-callout strong { color: var(--ink); font-size: 11px; }
.ac-callout p { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.ac-callout a { display: inline-block; margin-top: 8px; color: var(--blue); font-size: 9px; font-weight: 600; }
.ac-callout.tip { border-left-color: var(--blue); background: color-mix(in srgb, var(--blue-soft) 55%, var(--surface)); }
.ac-callout.tip > span { background: var(--blue-soft); color: var(--blue); }
.ac-callout.warning { border-left-color: #d99016; background: color-mix(in srgb, #fff5dc 55%, var(--surface)); }
.ac-callout.warning > span { background: #fff1ca; color: #97620b; font-weight: 700; }
.ac-callout.success { border-left-color: var(--success); background: color-mix(in srgb, var(--success-soft) 55%, var(--surface)); }
.ac-callout.success > span { background: var(--success-soft); color: var(--success); }

.loading-demo { width: min(100%, 660px); }
.loading-card { position: relative; min-height: 245px; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-sm); }
.loading-card-head { display: flex; align-items: center; justify-content: space-between; padding: 17px 19px; border-bottom: 1px solid var(--line); }
.loading-card-head strong, .loading-card-head small { display: block; }
.loading-card-head strong { color: var(--ink); font-size: 11px; }
.loading-card-head small { margin-top: 3px; color: var(--faint); font-size: 9px; }
.loading-metrics { display: grid; grid-template-columns: repeat(3, 1fr); padding: 30px 18px; }
.loading-metrics p { margin: 0; padding: 12px 18px; border-right: 1px solid var(--line); }
.loading-metrics p:last-child { border-right: 0; }
.loading-metrics span, .loading-metrics strong { display: block; }
.loading-metrics span { color: var(--faint); font-size: 9px; }
.loading-metrics strong { margin-top: 8px; color: var(--ink); font-size: 22px; letter-spacing: -.04em; }
.loading-layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 24px; background: color-mix(in srgb, var(--surface) 88%, transparent); text-align: center; backdrop-filter: blur(5px); }
.loading-layer[hidden] { display: none; }
.loading-spinner { width: 32px; height: 32px; margin-bottom: 14px; border: 3px solid var(--line); border-top-color: var(--blue); border-radius: 50%; animation: ac-spin .8s linear infinite; }
.loading-layer strong { color: var(--ink); font-size: 12px; }
.loading-layer small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.loading-layer button { margin-top: 16px; border: 0; background: transparent; color: var(--blue); font-size: 9px; font-weight: 600; cursor: pointer; }
@keyframes ac-spin { to { transform: rotate(360deg); } }

.result-demo { width: min(100%, 640px); }
.result-switch { display: flex; justify-content: center; gap: 4px; margin-bottom: 12px; }
.result-switch button { padding: 7px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--muted); font-size: 9px; cursor: pointer; }
.result-switch button:hover { border-color: var(--line-strong); color: var(--ink); }
.result-switch button.active { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.result-card { display: flex; align-items: center; flex-direction: column; min-height: 340px; padding: 42px 28px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); text-align: center; box-shadow: var(--shadow-sm); }
.result-card > span { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 50%; background: var(--success-soft); color: var(--success); font-size: 21px; font-weight: 700; }
.result-card.warning > span { background: #fff1ca; color: #97620b; }
.result-card.error > span { background: var(--brand-soft); color: var(--danger); }
.result-card.empty > span { background: var(--surface-subtle); color: var(--muted); }
.result-card > small { color: var(--faint); font: 8px 'DM Mono', monospace; letter-spacing: .11em; }
.result-card h3 { margin: 9px 0 0; color: var(--ink); font-size: 21px; letter-spacing: -.04em; }
.result-card p { max-width: 430px; margin: 9px 0 22px; color: var(--muted); font-size: 10px; line-height: 1.65; }
.result-card > div { display: flex; gap: 8px; }

/* Communication and preview tools */
.chat-demo { width: min(100%, 580px); overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-sm); }
.chat-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.chat-head > div { display: flex; align-items: center; gap: 9px; }
.chat-head p { margin: 0; }
.chat-head strong, .chat-head small { display: block; }
.chat-head strong { color: var(--ink); font-size: 10px; }
.chat-head small { margin-top: 2px; color: var(--faint); font-size: 8px; }
.chat-head small i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.chat-head > button { border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.chat-thread { display: flex; flex-direction: column; gap: 13px; min-height: 300px; padding: 20px 16px; background: var(--surface-subtle); }
.chat-row { display: flex; align-items: flex-end; gap: 8px; }
.chat-row.own { justify-content: flex-end; }
.chat-bubble { max-width: 72%; padding: 10px 12px 7px; border: 1px solid var(--line); border-radius: 6px 6px 6px 3px; background: var(--surface); }
.chat-bubble.outgoing { border-color: var(--blue); border-radius: 6px 6px 3px 6px; background: var(--blue); color: #fff; }
.chat-bubble p { margin: 0; font-size: 10px; line-height: 1.55; }
.chat-bubble small { display: block; margin-top: 4px; color: var(--faint); font-size: 7px; text-align: right; }
.chat-bubble.outgoing small { color: rgba(255,255,255,.65); }
.chat-composer { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 11px 13px; border-top: 1px solid var(--line); }
.chat-composer input { min-width: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--ink); font-size: 10px; }
.chat-composer button { width: 34px; height: 34px; border: 0; border-radius: 5px; background: var(--ink); color: var(--surface); cursor: pointer; }

.browser-demo { width: min(100%, 760px); }
.browser-size-switch { display: flex; justify-content: center; gap: 4px; margin-bottom: 12px; }
.browser-size-switch button { padding: 7px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--muted); font-size: 9px; cursor: pointer; }
.browser-size-switch button.active { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.browser-frame { width: 100%; margin: 0 auto; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); box-shadow: 0 18px 50px rgba(20,27,45,.13); transition: width .25s ease; }
.browser-frame.tablet { width: 72%; }
.browser-frame.mobile { width: 42%; min-width: 285px; }
.browser-chrome { display: grid; grid-template-columns: 70px 1fr 24px; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--surface-subtle); }
.browser-chrome > span { display: flex; gap: 5px; }
.browser-chrome > span i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.browser-chrome > span i:first-child { background: var(--brand); }
.browser-chrome > div { overflow: hidden; padding: 5px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--faint); font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }
.browser-chrome b { color: var(--muted); }
.browser-chrome button { border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.browser-page { display: grid; grid-template-columns: 58px 1fr; min-height: 320px; }
.browser-page aside { display: flex; align-items: center; flex-direction: column; gap: 15px; padding: 16px 0; border-right: 1px solid var(--line); background: var(--ink); }
.browser-page aside strong { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 4px; background: var(--brand); color: #fff; font-size: 10px; }
.browser-page aside i { width: 20px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.2); }
.browser-page main { min-width: 0; padding: 24px; }
.browser-page main > small { color: var(--faint); font: 7px 'DM Mono', monospace; letter-spacing: .1em; }
.browser-page h3 { margin: 5px 0 18px; color: var(--ink); font-size: 18px; letter-spacing: -.04em; }
.browser-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.browser-stat-row span { padding: 11px; border: 1px solid var(--line); border-radius: 4px; }
.browser-stat-row b, .browser-stat-row em { display: block; }
.browser-stat-row b { color: var(--ink); font-size: 12px; }
.browser-stat-row em { margin-top: 3px; color: var(--faint); font-size: 7px; font-style: normal; }
.browser-chart { display: flex; align-items: end; gap: 8px; height: 115px; margin-top: 15px; padding: 15px; border: 1px solid var(--line); border-radius: 4px; }
.browser-chart i { flex: 1; min-width: 5px; border-radius: 3px 3px 0 0; background: var(--blue); opacity: .75; }
.browser-frame.mobile .browser-page { grid-template-columns: 1fr; }
.browser-frame.mobile .browser-page aside { display: none; }
.browser-frame.mobile .browser-stat-row { grid-template-columns: 1fr; }
.browser-frame.mobile .browser-stat-row span:nth-child(n+2) { display: none; }

.diff-demo { width: min(100%, 720px); overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--code-bg); box-shadow: var(--shadow-sm); }
.diff-toolbar { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 13px; border-bottom: 1px solid var(--code-line); }
.diff-toolbar strong, .diff-toolbar small { display: block; }
.diff-toolbar strong { color: var(--code-text); font-size: 10px; }
.diff-toolbar small { margin-top: 2px; color: var(--faint); font-size: 8px; }
.diff-toolbar > div:last-child { display: flex; gap: 3px; }
.diff-toolbar button { padding: 6px 8px; border: 0; border-radius: 4px; background: transparent; color: var(--faint); font-size: 8px; cursor: pointer; }
.diff-toolbar button.active { background: var(--code-line); color: var(--code-text); }
.diff-view.unified { padding: 12px 0; }
.diff-line { display: grid; grid-template-columns: 34px 34px 1fr; min-height: 31px; }
.diff-line > span { padding: 7px 8px; border-right: 1px solid var(--code-line); color: #667085; font: 8px 'DM Mono', monospace; text-align: right; }
.diff-line code { padding: 6px 12px; color: var(--code-text); font: 9px/1.7 'DM Mono', monospace; }
.diff-line.removed { background: rgba(255,93,87,.12); box-shadow: inset 3px 0 var(--brand); }
.diff-line.added { background: rgba(28,155,105,.14); box-shadow: inset 3px 0 var(--green); }
.diff-view.split { display: grid; grid-template-columns: 1fr 1fr; }
.diff-view.split[hidden] { display: none; }
.diff-pane + .diff-pane { border-left: 1px solid var(--code-line); }
.diff-pane > strong { display: block; padding: 9px 13px; border-bottom: 1px solid var(--code-line); color: var(--faint); font: 8px 'DM Mono', monospace; }
.diff-pane pre { min-height: 150px; margin: 0; padding: 16px; color: var(--code-text); font: 9px/1.8 'DM Mono', monospace; }

.wizard-demo { width: min(100%, 700px); overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-sm); }
.wizard-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 17px 18px; border-bottom: 1px solid var(--line); background: var(--surface-subtle); list-style: none; }
.wizard-steps li { position: relative; display: flex; align-items: center; gap: 8px; }
.wizard-steps li:not(:last-child)::after { content: ''; position: absolute; right: 9px; left: 36px; top: 13px; height: 1px; background: var(--line); }
.wizard-steps li > span { z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--faint); font: 8px 'DM Mono', monospace; }
.wizard-steps li.active > span, .wizard-steps li.complete > span { border-color: var(--blue); background: var(--blue); color: #fff; }
.wizard-steps p { z-index: 1; margin: 0; padding-right: 9px; background: var(--surface-subtle); }
.wizard-steps strong, .wizard-steps small { display: block; }
.wizard-steps strong { color: var(--ink); font-size: 9px; }
.wizard-steps small { margin-top: 2px; color: var(--faint); font-size: 7px; }
.wizard-panel { min-height: 235px; padding: 26px; }
.wizard-panel[hidden] { display: none; }
.wizard-panel > small { color: var(--blue); font: 8px 'DM Mono', monospace; letter-spacing: .09em; }
.wizard-panel h3 { margin: 7px 0 20px; color: var(--ink); font-size: 18px; letter-spacing: -.035em; }
.wizard-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wizard-member { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.wizard-member p { margin: 0; }
.wizard-member strong, .wizard-member small { display: block; }
.wizard-member strong { color: var(--ink); font-size: 10px; }
.wizard-member small { color: var(--faint); font-size: 8px; }
.wizard-summary { margin: 0; border: 1px solid var(--line); border-radius: 5px; }
.wizard-summary div { display: grid; grid-template-columns: 120px 1fr; padding: 11px 13px; border-bottom: 1px solid var(--line); }
.wizard-summary div:last-child { border-bottom: 0; }
.wizard-summary dt { color: var(--faint); font-size: 9px; }
.wizard-summary dd { margin: 0; color: var(--ink); font-size: 10px; font-weight: 600; }
.wizard-actions { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 13px 18px; border-top: 1px solid var(--line); }
.wizard-actions > span { color: var(--faint); font: 8px 'DM Mono', monospace; }
.wizard-actions button:first-child { justify-self: start; }
.wizard-actions button:last-child { justify-self: end; }

.toc { padding: 42px 0 30px; }
.toc > a { position: relative; display: block; padding: 6px 0 6px 15px; border-left: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.5; }
.toc > a:hover { color: var(--ink); }
.toc > a.active { color: var(--ink); font-weight: 600; }
.toc > a.active::before { content: ''; position: absolute; left: -1px; top: 4px; bottom: 4px; width: 2px; background: var(--brand); }
.toc-note { display: flex; gap: 10px; margin-top: 30px; padding: 14px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-subtle); }
.toc-note > span { display: grid; place-items: center; flex: 0 0 auto; width: 23px; height: 23px; border-radius: 50%; background: var(--ink); color: var(--surface); font-size: 11px; }
.toc-note p { margin: 0; }
.toc-note strong, .toc-note small { display: block; }
.toc-note strong { color: var(--ink); font-size: 11px; }
.toc-note small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.45; }

/* Component detail pages */
.component-detail-content { padding-top: 30px; }
.component-detail-toc > p { color: var(--ink); font-family: 'Public Sans', ui-sans-serif, system-ui, sans-serif; font-size: 12px; font-weight: 650; letter-spacing: -.01em; text-transform: none; }
.button-detail-toc > a { padding-top: 5px; padding-bottom: 5px; font-size: 11px; }
.button-doc-section { margin-top: 54px; }
.button-overview-heading { margin: 34px 0 15px; }
.button-doc-section .detail-heading { margin-bottom: 15px; }
.button-detail-example { margin-top: 0; }
.button-example-surface { display: grid; place-items: center; width: 100%; min-height: 180px; padding: 32px; }
.button-showcase-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }
.seven-tone-row .ac-btn { min-width: 88px; }
.rounded-button-stack { display: grid; gap: 15px; width: 100%; }
.icon-reference-row .ac-btn { min-width: 132px; }
.icon-only-reference-row .ac-btn { flex: 0 0 44px; width: 44px; min-height: 44px; padding: 0; }
.button-icon-groups { display: grid; gap: 26px; width: 100%; }
.button-icon-groups > div > small { display: block; margin-bottom: 11px; color: var(--faint); font: 8px 'DM Mono', monospace; letter-spacing: .09em; text-align: center; }
.social-row { max-width: 660px; }
.button-size-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; }
.button-block-demo { display: grid; gap: 9px; width: min(100%, 460px); }
.button-state-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; }
.button-state-grid > div { display: grid; place-items: center; gap: 11px; min-height: 120px; padding: 15px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
.button-state-grid small { color: var(--faint); font: 8px 'DM Mono', monospace; letter-spacing: .08em; }
.segmented-demo { display: grid; place-items: center; width: 100%; min-height: 130px; }
.ac-segmented { display: inline-flex; overflow: hidden; border: 1px solid var(--blue); border-radius: 4px; background: var(--surface); box-shadow: var(--shadow-xs); }
.ac-segmented button { min-width: 122px; min-height: 48px; padding: 0 22px; border: 0; border-right: 1px solid var(--blue); background: transparent; color: var(--blue); font: 650 13px 'Public Sans', ui-sans-serif, system-ui, sans-serif; cursor: pointer; transition: background-color .16s ease, color .16s ease; }
.ac-segmented button:last-child { border-right: 0; }
.ac-segmented button:hover { background: var(--blue-soft); }
.ac-segmented button:focus-visible { position: relative; z-index: 1; outline: 3px solid color-mix(in srgb, var(--blue) 28%, transparent); outline-offset: -3px; }
.ac-segmented button.active { background: var(--blue); color: #fff; }
.ac-segmented.vertical { display: inline-flex; flex-direction: column; }
.ac-segmented.vertical button { min-width: 170px; border-right: 0; border-bottom: 1px solid var(--blue); }
.ac-segmented.vertical button:last-child { border-bottom: 0; }
.segmented-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.segmented-pair > div { display: grid; justify-items: center; gap: 12px; }
.segmented-pair small { color: var(--faint); font: 8px 'DM Mono', monospace; letter-spacing: .1em; }
.component-scenario-section { margin-top: 54px; }
.component-scenario-section .detail-heading { margin-bottom: 15px; }
.scenario-example { margin-top: 0; }
.component-variant-demo { display: grid; place-items: center; width: 100%; min-height: 220px; padding: 28px; border-radius: 6px; }
.component-variant-demo > * { width: min(100%, 760px); }
.component-variant-demo.variant-standard { background: var(--surface); }
.component-variant-demo.variant-compact { min-height: 190px; padding: 18px; background: var(--surface-subtle); }
.component-variant-demo.variant-compact > * { width: min(100%, 620px); }
.component-variant-demo.variant-compact .ac-btn { min-height: 34px; padding-block: 7px; }
.component-variant-demo.variant-surface { padding: 32px; border: 1px solid var(--line); background: linear-gradient(145deg, var(--surface-subtle), var(--surface)); box-shadow: inset 0 0 0 7px color-mix(in srgb, var(--surface) 55%, transparent); }
.component-variant-demo.variant-surface > * { filter: saturate(.92); }
.scenario-form-grid, .scenario-select-grid { width: min(100%, 680px); }
.scenario-form-grid.single-column { grid-template-columns: 1fr; width: min(100%, 560px); }
.floating-field { position: relative; display: block; }
.floating-field input { width: 100%; height: 54px; padding: 19px 12px 5px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); color: var(--ink); font-size: 13px; transition: border-color .15s, box-shadow .15s; }
.floating-field > span { position: absolute; left: 12px; top: 18px; color: var(--muted); font-size: 13px; pointer-events: none; transition: transform .15s ease, color .15s ease, font-size .15s ease; transform-origin: left top; }
.floating-field input:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 15%, transparent); }
.floating-field input:focus + span, .floating-field input:not(:placeholder-shown) + span { color: var(--blue); font-size: 10px; transform: translateY(-11px); }
.floating-field small { display: block; margin-top: 6px; color: var(--faint); font-size: 11px; }
.input-size-stack { display: grid; gap: 15px; width: min(100%, 580px); padding: 24px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.ac-field input.input-lg { height: 50px; font-size: 15px; }
.ac-field input.input-sm { height: 34px; font-size: 11px; }
.ac-field input.input-pill { border-radius: 999px; padding-inline: 17px; }
.readonly-field-list { display: grid; gap: 18px; width: min(100%, 620px); padding: 24px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.plaintext-field > span, .plaintext-field > strong, .plaintext-field > small { display: block; }
.plaintext-field > span { margin-bottom: 7px; color: var(--ink); font-size: 12px; font-weight: 600; }
.plaintext-field > strong { min-height: 42px; padding: 11px 2px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 13px; font-weight: 500; }
.plaintext-field > small { margin-top: 6px; color: var(--faint); font-size: 11px; }
.native-input-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; width: min(100%, 720px); padding: 24px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.ac-field input.color-input { padding: 5px 8px; cursor: pointer; }
.input-group-stack { display: grid; gap: 16px; width: min(100%, 680px); }
.grouped-field { display: grid; gap: 7px; color: var(--ink); font-size: 12px; font-weight: 600; }
.ac-input-group { display: flex; align-items: stretch; min-height: 42px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.ac-input-group:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 15%, transparent); }
.ac-input-group > i { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0 11px; border-right: 1px solid var(--line); background: var(--surface-subtle); color: var(--muted); font-size: 11px; font-style: normal; font-weight: 500; white-space: nowrap; }
.ac-input-group > input, .ac-input-group > textarea, .ac-input-group > select { flex: 1 1 auto; min-width: 0; padding: 0 12px; border: 0; outline: 0; background: transparent; color: var(--ink); font: 13px inherit; }
.ac-input-group > textarea { min-height: 82px; padding-block: 10px; resize: vertical; }
.ac-input-group > input + i, .ac-input-group > select + i { border-right: 0; border-left: 1px solid var(--line); }
.ac-input-group > button { flex: 0 0 auto; min-width: 42px; padding: 0 13px; border: 0; border-right: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 11px; font-weight: 650; cursor: pointer; }
.ac-input-group > input + button, .ac-input-group > select + button { border-right: 0; border-left: 1px solid var(--line); }
.ac-input-group > button:hover { background: var(--surface-hover); }
.ac-input-group.merged > i, .ac-input-group.merged > button { border-color: transparent; background: transparent; }
.ac-input-group.group-lg { min-height: 50px; }
.ac-input-group.group-lg input { font-size: 15px; }
.ac-input-group.group-sm { min-height: 34px; }
.ac-input-group.group-sm input, .ac-input-group.group-sm i { font-size: 10px; }
.ac-input-group.group-pill { border-radius: 999px; }
.ac-input-group .choice-addon { padding-inline: 12px; }
.ac-input-group .choice-addon input { flex: 0 0 auto; }
.ac-input-group.multi-input > input + input { border-left: 1px solid var(--line); }
.ac-input-group.multi-input > i { border-right: 1px solid var(--line); border-left: 1px solid var(--line); }
.ac-input-group.action-group > button { color: var(--blue); }
.ac-input-group.select-group > select { appearance: none; min-height: 40px; cursor: pointer; }
.ac-field.has-success input { border-color: var(--success); }
.ac-field.has-success input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 16%, transparent); }
.ac-field.has-success > small { color: var(--success); }
.ac-field input:disabled { background: var(--surface-subtle); color: var(--faint); cursor: not-allowed; }
.choice-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(100%, 720px); }
.choice-card { display: grid; grid-template-columns: 20px 1fr; align-items: start; gap: 11px; min-height: 120px; padding: 18px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.choice-card:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.choice-card:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 12%, transparent); }
.choice-card strong, .choice-card small { display: block; }
.choice-card strong { color: var(--ink); font-size: 12px; }
.choice-card small { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.custom-option-fieldset { width: min(100%, 820px); margin: 0; padding: 0; border: 0; }
.custom-option-fieldset > legend { margin-bottom: 14px; color: var(--ink); font-size: 12px; font-weight: 720; letter-spacing: -.01em; }
.custom-option-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.custom-option-stack { display: grid; gap: 10px; }
.ac-option-card { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 12px; min-height: 138px; padding: 18px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease; }
.ac-option-card:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.ac-option-card:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--blue) 22%, transparent); outline-offset: 2px; }
.ac-option-card:has(input:checked) { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 3%, var(--surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 11%, transparent); }
.ac-option-card.is-disabled, .ac-option-card:has(input:disabled) { cursor: not-allowed; opacity: .5; transform: none; }
.ac-option-card input { margin-top: 2px; }
.option-card-body { min-width: 0; }
.option-card-body > strong, .option-card-body > small, .option-card-meta { display: block; }
.option-card-body strong { color: var(--ink); font-size: 12px; line-height: 1.35; }
.option-card-body small { margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.option-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.option-card-head em { flex: 0 0 auto; color: var(--ink); font-size: 10px; font-style: normal; font-weight: 700; }
.option-card-head .ac-badge { font-size: 8px; }
.option-card-meta { margin-top: 14px; color: var(--blue); font-size: 9px; font-weight: 720; letter-spacing: .02em; }
.icon-option-grid .ac-option-card { grid-template-columns: 18px 34px minmax(0, 1fr); }
.option-card-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 5px; background: var(--surface-2); color: var(--ink); font-size: 13px; font-weight: 760; }
.ac-option-card:has(input:checked) .option-card-icon { background: color-mix(in srgb, var(--blue) 12%, var(--surface)); color: var(--blue); }
.ac-option-card.horizontal { grid-template-columns: 18px 38px minmax(0, 1fr); min-height: 0; align-items: center; padding: 15px 17px; }
.ac-option-card.horizontal .option-card-icon { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; }
.visual-option-grid .ac-option-card { display: flex; flex-direction: column; min-height: 0; }
.visual-option .ac-radio { position: absolute; top: 14px; right: 14px; z-index: 1; }
.theme-option-preview { display: grid; grid-template-columns: 32% 1fr 1fr; grid-template-rows: 18px 34px; gap: 6px; width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 5px; background: #f8fafc; }
.theme-option-preview i { grid-row: 1 / 3; border-radius: 4px; background: #d9e2ee; }
.theme-option-preview b { display: block; border-radius: 4px; background: #e8edf4; }
.theme-option-preview b:last-child { grid-column: 2 / 4; }
.theme-option-preview.midnight { border-color: #30384b; background: #171c27; }
.theme-option-preview.midnight i { background: #293247; }
.theme-option-preview.midnight b { background: #39445c; }
.theme-option-preview.signal { background: #fffaf5; }
.theme-option-preview.signal i { background: #16181d; }
.theme-option-preview.signal b { background: #ffb7a8; }
.compact-fieldset { width: min(100%, 620px); }
.compact-option-row { display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); }
.compact-option { cursor: pointer; }
.compact-option input { position: absolute; opacity: 0; pointer-events: none; }
.compact-option span { display: block; padding: 9px 16px; border-radius: 4px; color: var(--muted); font-size: 10px; font-weight: 680; transition: background .16s ease, color .16s ease, box-shadow .16s ease; }
.compact-option:hover span { color: var(--ink); }
.compact-option input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--blue) 22%, transparent); outline-offset: 2px; }
.compact-option input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 1px 4px rgba(15, 23, 42, .1); }
.compact-radio-group { width: min(100%, 580px); }
.inline-switch-grid { display: flex; flex-wrap: wrap; gap: 10px; width: min(100%, 700px); }
.inline-switch-grid label { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--ink); font-size: 11px; font-weight: 600; }
.scenario-badge-row { min-height: 90px; }
.badge-context-list { width: min(100%, 520px); overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.badge-context-list > div { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 52px; padding: 0 16px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 12px; }
.badge-context-list > div:last-child { border-bottom: 0; }
.ac-tag-badge { display: inline-flex; align-items: center; gap: 7px; min-height: 31px; padding: 0 5px 0 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 11px; font-weight: 600; }
.ac-tag-badge button { display: grid; place-items: center; width: 21px; height: 21px; border: 0; border-radius: 50%; background: var(--surface-hover); color: var(--muted); cursor: pointer; }
.compact-alert-list { display: grid; gap: 8px; width: min(100%, 640px); }
.compact-alert-list .ac-alert { align-items: center; padding-block: 11px; }
.layer-stage, .drawer-stage { display: grid; place-items: center; width: 100%; min-height: 390px; padding: 24px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 5%, var(--surface-subtle)); }
.layer-stage .static-layer { position: relative; animation: none; }
.layer-head p { margin: 0; }
.modal-form-body { display: grid; gap: 15px; }
.danger-layer .layer-mark { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); }
.drawer-stage { place-items: stretch end; min-height: 500px; overflow: hidden; padding: 18px 18px 0; }
.drawer-stage .static-drawer { position: relative; width: min(410px, 100%); height: 480px; border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 6px 6px 0 0; animation: none; }
.drawer-stage .compact-drawer { height: 440px; }
.drawer-detail-list { display: grid; gap: 0; margin: 0; }
.drawer-detail-list > div { display: grid; grid-template-columns: 90px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.drawer-detail-list dt { color: var(--muted); font-size: 11px; }
.drawer-detail-list dd { margin: 0; color: var(--ink); font-size: 11px; font-weight: 600; }
.simple-tab-panel { display: block; min-height: 130px; }
.compact-tabs-card { width: min(100%, 480px); overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-sm); }
.compact-tabs { justify-content: center; padding: 7px; }
.compact-tabs button { flex: 1; min-height: 34px; border-radius: 4px; }
.compact-tabs button[aria-selected="true"] { background: var(--surface-hover); }
.compact-tabs button[aria-selected="true"]::after { display: none; }
.mini-chart-panel { min-height: 130px; padding: 22px; color: var(--ink); font-size: 12px; }
.mini-chart-panel[hidden] { display: none; }
.mini-chart-panel i { display: block; position: relative; height: 54px; margin-top: 17px; overflow: hidden; border-bottom: 1px solid var(--line); }
.mini-chart-panel i::before { content: ''; position: absolute; inset: 17px 0 0; background: linear-gradient(155deg, transparent 0 12%, var(--blue) 13% 15%, transparent 16% 27%, var(--blue) 28% 30%, transparent 31% 44%, var(--blue) 45% 47%, transparent 48% 60%, var(--blue) 61% 63%, transparent 64% 73%, var(--blue) 74% 76%, transparent 77%); opacity: .7; }
.detail-breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 34px; color: var(--faint); font-size: 10px; }
.detail-breadcrumb a { color: var(--blue); }
.detail-breadcrumb strong { color: var(--muted); font-weight: 500; }
.component-detail-content > .component-doc { margin-top: 0; scroll-margin-top: 96px; }
.component-detail-content > .component-doc .component-heading h2 { font-size: clamp(34px, 5vw, 52px); }
.detail-section { margin-top: 70px; scroll-margin-top: 96px; }
.detail-heading { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.detail-heading > span { display: grid; place-items: center; flex: 0 0 27px; height: 27px; border: 1px solid var(--line); border-radius: 4px; color: var(--brand-text); font: 8px 'DM Mono', monospace; }
.detail-heading h2 { margin: 0; color: var(--ink); font-size: 22px; letter-spacing: -.035em; }
.detail-heading p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.guidance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.guidance-card { min-height: 145px; padding: 22px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.guidance-card > span { font: 8px 'DM Mono', monospace; letter-spacing: .08em; }
.guidance-card.do > span { color: var(--success); }
.guidance-card.dont > span { color: var(--danger); }
.guidance-card p { margin: 18px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.anatomy-card { display: grid; grid-template-columns: 1.15fr .85fr; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.anatomy-card ol { margin: 0; padding: 0; list-style: none; }
.anatomy-card li { display: flex; align-items: center; gap: 13px; min-height: 70px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.anatomy-card li:last-child { border-bottom: 0; }
.anatomy-card li > span { color: var(--brand-text); font: 9px 'DM Mono', monospace; }
.anatomy-card li strong, .anatomy-card li small { display: block; }
.anatomy-card li strong { color: var(--ink); font-size: 11px; }
.anatomy-card li small { margin-top: 3px; color: var(--faint); font-size: 9px; }
.variant-panel { padding: 24px; border-left: 1px solid var(--line); background: var(--surface-subtle); }
.variant-panel > span { color: var(--faint); font: 8px 'DM Mono', monospace; letter-spacing: .08em; }
.variant-panel > strong { display: block; margin-top: 20px; color: var(--ink); font-size: 20px; letter-spacing: -.035em; }
.variant-panel > p { color: var(--muted); font-size: 10px; line-height: 1.65; }
.variant-panel > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
.variant-panel i { padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--muted); font-size: 8px; font-style: normal; }
.a11y-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; list-style: none; }
.a11y-list li { display: flex; gap: 10px; min-height: 84px; padding: 20px; border-bottom: 1px solid var(--line); background: var(--surface); }
.a11y-list li:nth-child(odd) { border-right: 1px solid var(--line); }
.a11y-list li:nth-last-child(-n+2) { border-bottom: 0; }
.a11y-list li > span { display: grid; place-items: center; flex: 0 0 21px; height: 21px; border-radius: 50%; background: var(--success-soft); color: var(--success); font-size: 10px; }
.a11y-list p { margin: 1px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.implementation-card { overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--code-bg); }
.implementation-card > div { display: flex; align-items: center; justify-content: space-between; min-height: 45px; padding: 0 14px; border-bottom: 1px solid var(--code-line); }
.implementation-card > div span { color: var(--faint); font: 8px 'DM Mono', monospace; letter-spacing: .08em; }
.implementation-card pre { min-height: 180px; margin: 0; padding: 24px; color: var(--code-text); font-size: 11px; line-height: 1.7; }
.implementation-note { display: grid; grid-template-columns: 140px 1fr; gap: 18px; margin-top: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-subtle); }
.implementation-note strong { color: var(--ink); font-size: 10px; }
.implementation-note p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.component-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 72px; }
.component-pager a { display: flex; flex-direction: column; gap: 7px; padding: 19px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.component-pager a:last-child { align-items: flex-end; text-align: right; }
.component-pager a:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.component-pager span { color: var(--faint); font: 8px 'DM Mono', monospace; letter-spacing: .08em; }
.component-pager strong { color: var(--ink); font-size: 12px; }

.search-dialog[hidden] { display: none; }
.search-dialog { position: fixed; inset: 0; z-index: 80; display: grid; place-items: start center; padding-top: min(18vh, 160px); }
.search-backdrop { position: absolute; inset: 0; background: rgba(11, 16, 27, .5); backdrop-filter: blur(5px); }
.search-box { position: relative; width: min(600px, calc(100vw - 32px)); overflow: hidden; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-lg); animation: dialog-in .18s ease-out; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } }
.search-input-wrap { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.search-input-wrap svg { width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 1.8; }
.search-input-wrap input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 15px; }
.search-results { padding: 10px; }
.search-results > p { margin: 7px 9px 8px; color: var(--faint); font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }
.search-results a { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 11px; padding: 10px; border-radius: 5px; }
.search-results a:hover, .search-results a:focus { background: var(--surface-hover); outline: 0; }
.search-results a > span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 4px; color: var(--brand-text); font: 500 12px 'DM Mono', monospace; }
.search-results strong, .search-results small { display: block; }
.search-results strong { color: var(--ink); font-size: 13px; }
.search-results small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.search-results em { color: var(--faint); font: normal 12px 'DM Mono', monospace; }

@media (max-width: 1200px) {
  .docs-shell { grid-template-columns: 230px minmax(0, 800px); gap: 42px; }
  .toc { display: none; }
  .topbar { grid-template-columns: 220px 1fr auto; padding: 0 24px; }
  .topnav { justify-self: center; }
  .top-cta { display: none; }
}

@media (max-width: 900px) {
  :root { --topbar: 64px; }
  .topbar { grid-template-columns: 1fr auto; padding: 0 18px; }
  .topnav { display: none; }
  .search-trigger { min-width: 0; width: 40px; justify-content: center; padding: 9px; }
  .search-trigger span, .search-trigger kbd { display: none; }
  .mobile-menu { display: grid; width: 38px; height: 38px; place-content: center; gap: 4px; border-radius: 5px; }
  .mobile-menu:hover { background: var(--surface-hover); }
  .mobile-menu span { width: 18px; height: 1.5px; background: currentColor; transition: transform .2s, opacity .2s; }
  .mobile-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .mobile-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .mobile-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
  .docs-shell { display: block; padding: 0 24px; }
  .sidebar { position: fixed; left: 0; top: var(--topbar); z-index: 35; width: min(310px, 86vw); height: calc(100vh - var(--topbar)); padding: 28px 20px; border-right: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-lg); transform: translateX(-105%); transition: transform .24s ease; }
  .sidebar.open { transform: translateX(0); }
  .content { max-width: 800px; margin: auto; padding-top: 54px; }
}

@media (max-width: 680px) {
  .version, .icon-button { display: none; }
  .docs-shell { padding: 0 17px; }
  .content { padding-top: 42px; }
  h1 { font-size: 40px; }
  .lead { font-size: 16px; }
  .meta-row { flex-direction: column; gap: 8px; }
  .principle-grid { grid-template-columns: 1fr; }
  .principle-card { min-height: 215px; }
  .principle-icon { margin-bottom: 28px; }
  .type-specimen { grid-template-columns: 120px 1fr; }
  .type-display { font-size: 54px; }
  .type-scale { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
  .type-info { border: 0; padding: 20px; }
  .spacing-scale { grid-template-columns: repeat(3, 1fr); gap: 22px 0; }
  .spacing-scale > div:nth-child(3) { border: 0; }
  .swatches { grid-template-columns: 1fr 1fr; }
  .sample-nav { grid-template-columns: 1fr auto; padding: 28px 18px; }
  .sample-nav > div { grid-row: 2; grid-column: 1 / -1; justify-content: center; }
  .sample-cards { grid-template-columns: 1fr; }
  .state-row { align-items: stretch; flex-direction: column; }
  .anatomy-strip { flex-wrap: wrap; gap: 8px 18px; }
  .spec-grid { grid-template-columns: 1fr 1fr; }
  .spec-grid div:nth-child(2) { border-right: 0; }
  .spec-grid div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .state-matrix { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; padding: 20px; }
  .component-heading h2 { font-size: 27px; }
  .next-section a { align-items: flex-start; flex-direction: column; gap: 2px; }
  .radio-card { grid-template-columns: auto 1fr; }
  .radio-card em { grid-column: 2; }
  .select-grid { grid-template-columns: 1fr; padding: 20px; }
  .do-dont { grid-template-columns: 1fr; }
  .layer-launch { grid-template-columns: auto 1fr; }
  .layer-launch .ac-btn { grid-column: 1 / -1; width: 100%; }
  .table-preview { padding: 16px; }
  .pagination-demo { align-items: flex-start; flex-direction: column; }
  .ac-pagination { width: 100%; justify-content: space-between; }
  .ac-tabs { overflow-x: auto; }
  .ac-tabs button { flex: 0 0 auto; }
  .tab-panel { grid-template-columns: 1fr; gap: 18px; }
  .tab-metric { padding: 0 0 18px; border-right: 0; border-bottom: 1px solid var(--line); }
  .tab-metric:last-child { padding-bottom: 0; border-bottom: 0; }
  .empty-card > div { align-items: stretch; flex-direction: column; width: 100%; }
  .menu-stage { align-items: flex-start; flex-direction: column; }
  .menu-trigger { width: 100%; justify-content: center; }
  .ac-menu { left: 17px; right: 17px; top: 110px; width: auto; }
  .breadcrumb-preview { padding: 18px; }
  .breadcrumb-card > div { grid-template-columns: auto 1fr; }
  .breadcrumb-card > div .ac-btn { grid-column: 1 / -1; width: 100%; }
  .ac-breadcrumb a:nth-of-type(2), .ac-breadcrumb span:nth-of-type(2) { display: none; }
  .progress-demo { grid-template-columns: 1fr; align-items: stretch; }
  .progress-demo > .ac-btn { width: 100%; }
  .progress-compact { grid-column: 1; }
  .command-launch { grid-template-columns: auto 1fr; }
  .command-launch .ac-btn { grid-column: 1 / -1; width: 100%; }
  .slider-presets { flex-wrap: wrap; }
  .otp-fields { gap: 5px; }
  .otp-fields input { width: 36px; height: 42px; }
  .status-head { align-items: flex-start; flex-direction: column; }
  .ac-stepper { grid-template-columns: 1fr; gap: 11px; }
  .ac-stepper li:not(:last-child)::after { left: 12px; right: auto; top: 25px; bottom: -11px; width: 1px; height: auto; }
  .ac-stepper li p { padding-right: 0; }
  .step-content { align-items: start; grid-template-columns: 1fr; }
  .data-grid-preview { padding: 14px; }
  .grid-toolbar { grid-template-columns: 1fr auto; }
  .grid-toolbar label { grid-column: 1 / -1; grid-row: 2; }
  .rating-card { grid-template-columns: 1fr; }
  .carousel-slide { padding: 24px; }
  .stat-grid, .description-list { grid-template-columns: 1fr; }
  .stat-card.featured { grid-row: auto; min-height: 260px; }
  .description-list > div:nth-child(odd) { border-right: 0; }
  .divider-actions { align-items: stretch; flex-direction: column; }
  .ac-divider.vertical { width: auto; height: 1px; min-height: 1px; }
  .ratio-toolbar { align-items: stretch; flex-direction: column; }
  .ratio-toolbar > div:last-child { justify-content: space-between; }
  .ratio-toolbar button { flex: 1; }
  .ratio-stage { min-height: 300px; padding: 14px; }
  .ac-banner { grid-template-columns: auto 1fr auto; }
  .ac-banner a { grid-column: 2; }
  .ac-banner > button { grid-column: 3; grid-row: 1 / span 2; }
  .callout-grid { grid-template-columns: 1fr; }
  .loading-metrics { grid-template-columns: 1fr; padding: 12px 18px; }
  .loading-metrics p { border-right: 0; border-bottom: 1px solid var(--line); }
  .loading-metrics p:last-child { border-bottom: 0; }
  .result-switch { overflow-x: auto; justify-content: flex-start; }
  .result-switch button { flex: 0 0 auto; }
  .result-card > div { align-items: stretch; flex-direction: column; width: 100%; }
  .browser-frame.tablet, .browser-frame.mobile { width: 100%; min-width: 0; }
  .browser-page { min-height: 280px; }
  .browser-page main { padding: 17px; }
  .diff-view.split { grid-template-columns: 1fr; }
  .diff-pane + .diff-pane { border-top: 1px solid var(--code-line); border-left: 0; }
  .wizard-steps { gap: 9px; }
  .wizard-steps li { align-items: flex-start; }
  .wizard-steps li:not(:last-child)::after { display: none; }
  .wizard-steps p { display: none; }
  .wizard-fields { grid-template-columns: 1fr; }
  .wizard-summary div { grid-template-columns: 90px 1fr; }
  .button-example-surface { min-height: 150px; padding: 20px 14px; }
  .button-showcase-row, .button-size-row { align-items: stretch; flex-direction: column; width: 100%; }
  .button-showcase-row .ac-btn, .button-size-row .ac-btn { width: 100%; }
  .button-icon-groups .button-showcase-row { flex-direction: row; }
  .button-icon-groups .button-showcase-row .ac-btn { width: auto; }
  .seven-tone-row .ac-btn, .icon-reference-row .ac-btn { min-width: 0; }
  .icon-reference-row { flex-direction: column; }
  .icon-reference-row .ac-btn { width: 100%; }
  .icon-only-reference-row { flex-direction: row; }
  .icon-only-reference-row .ac-btn { width: 44px; }
  .button-state-grid { grid-template-columns: 1fr 1fr; }
  .segmented-pair { grid-template-columns: 1fr; gap: 28px; }
  .ac-segmented { width: 100%; }
  .ac-segmented button { flex: 1; min-width: 0; padding-inline: 12px; }
  .ac-segmented.vertical { width: min(100%, 260px); }
  .ac-segmented.vertical button { width: 100%; min-width: 0; }
  .component-variant-demo { min-height: 180px; padding: 14px; }
  .choice-card-grid { grid-template-columns: 1fr; }
  .custom-option-grid { grid-template-columns: 1fr; }
  .ac-option-card { min-height: 0; }
  .compact-option-row { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .compact-option span { padding-inline: 10px; text-align: center; }
  .native-input-grid { grid-template-columns: 1fr; padding: 18px; }
  .input-size-stack, .readonly-field-list { padding: 18px; }
  .ac-input-group.multi-input { flex-wrap: wrap; }
  .ac-input-group.multi-input > input { flex-basis: 42%; min-height: 42px; }
  .ac-input-group.action-group > button { padding-inline: 10px; }
  .ac-input-group > i { max-width: 42%; overflow: hidden; text-overflow: ellipsis; }
  .inline-switch-grid { display: grid; width: 100%; }
  .inline-switch-grid label { width: 100%; }
  .layer-stage, .drawer-stage { min-height: 420px; padding: 10px; }
  .drawer-stage { padding-bottom: 0; }
  .drawer-stage .static-drawer { width: 100%; height: 410px; }
  .layer-actions { flex-wrap: wrap; }
  .layer-actions .ac-btn { flex: 1; }
  .guidance-grid, .anatomy-card, .a11y-list { grid-template-columns: 1fr; }
  .variant-panel { border-top: 1px solid var(--line); border-left: 0; }
  .a11y-list li, .a11y-list li:nth-child(odd), .a11y-list li:nth-last-child(-n+2) { border-right: 0; border-bottom: 1px solid var(--line); }
  .a11y-list li:last-child { border-bottom: 0; }
  .implementation-note { grid-template-columns: 1fr; gap: 7px; }
  .component-pager { grid-template-columns: 1fr; }
  .component-pager a:last-child { align-items: flex-start; text-align: left; }
  .focus-note { margin-top: 5px; }
  footer { flex-direction: column; gap: 8px; }
}

/* DataTable showcase */
.datatable-detail-example .example-preview { padding: 15px; }
.acun-datatable-demo { width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); box-shadow: var(--shadow-sm); color: var(--text); }
.dt-demo-head, .dt-demo-toolbar, .dt-bulk, .dt-demo-footer { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.dt-demo-head { justify-content: space-between; border-bottom: 1px solid var(--line); }
.dt-demo-head > div { display: grid; gap: 3px; }
.dt-demo-head strong { font-size: 16px; }
.dt-demo-head small { color: var(--muted); }
.dt-demo-toolbar { flex-wrap: wrap; background: var(--soft); border-bottom: 1px solid var(--line); }
.dt-demo-toolbar select, .dt-demo-toolbar summary, .dt-search { min-height: 38px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--text); }
.dt-demo-toolbar select { padding: 0 32px 0 10px; }
.dt-search { position: relative; display: flex; flex: 1 1 220px; align-items: center; max-width: 330px; }
.dt-search.wide { width: min(100%, 440px); max-width: none; }
.dt-search span { position: absolute; left: 11px; color: var(--muted); }
.dt-search input { width: 100%; min-height: 36px; padding: 7px 12px 7px 32px; border: 0; outline: 0; background: transparent; color: inherit; }
.dt-column-picker { position: relative; }
.dt-column-picker summary { display: flex; align-items: center; padding: 0 12px; cursor: pointer; list-style: none; }
.dt-column-picker > label { position: absolute; z-index: 5; right: 0; display: none; width: 180px; padding: 9px 12px; border: 1px solid var(--line); background: var(--panel); }
.dt-column-picker[open] > label { display: flex; gap: 8px; }
.dt-column-picker[open] > label:nth-of-type(1) { top: 44px; border-radius: 4px 4px 0 0; }
.dt-column-picker[open] > label:nth-of-type(2) { top: 79px; }
.dt-column-picker[open] > label:nth-of-type(3) { top: 114px; }
.dt-column-picker[open] > label:nth-of-type(4) { top: 149px; border-radius: 0 0 4px 4px; }
.dt-demo-scroll { position: relative; overflow: auto; min-height: 270px; }
.acun-datatable-demo table, .dt-mini-table table { width: 100%; border-collapse: collapse; text-align: left; }
.acun-datatable-demo th, .acun-datatable-demo td, .dt-mini-table th, .dt-mini-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 13px; white-space: nowrap; }
.acun-datatable-demo th, .dt-mini-table th { background: var(--soft); color: var(--muted); font-size: 12px; font-weight: 650; }
.acun-datatable-demo th button, .dt-mini-table th button { border: 0; padding: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.acun-datatable-demo tbody tr:hover { background: var(--soft); }
.dt-more { border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.dt-bulk { justify-content: space-between; background: color-mix(in srgb, var(--blue) 8%, var(--panel)); border-bottom: 1px solid var(--line); font-size: 13px; }
.dt-bulk button { border: 0; background: transparent; color: var(--blue); cursor: pointer; }
.dt-demo-footer { justify-content: space-between; color: var(--muted); font-size: 12px; }
.dt-demo-footer nav { display: flex; gap: 4px; }
.dt-demo-footer button { min-width: 30px; min-height: 30px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--muted); }
.dt-demo-footer button.active { border-color: var(--blue); background: var(--blue); color: white; }
.dt-demo-empty { display: grid; justify-items: center; gap: 5px; padding: 70px 16px; color: var(--muted); }
.dt-demo-empty strong { color: var(--text); }
.dt-demo-loading { position: absolute; inset: 0; display: flex; justify-content: center; gap: 8px; padding-top: 18px; background: color-mix(in srgb, var(--panel) 18%, transparent); color: var(--muted); font-size: 12px; pointer-events: none; }
.dt-demo-loading span, .dt-loading-label b { width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--blue); border-radius: 50%; animation: dt-spin .7s linear infinite; }
.dt-bulk[hidden], .dt-demo-empty[hidden], .dt-demo-loading[hidden] { display: none !important; }
.dt-feature-card, .dt-filter-panel, .dt-column-panel, .dt-action-preview, .dt-loading-preview { width: min(100%, 620px); margin: 0 auto; padding: 24px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.dt-feature-card { display: grid; gap: 18px; }
.dt-feature-card p { margin: 0; color: var(--muted); }
.dt-query-preview { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 4px; background: var(--soft); }
.dt-query-preview span { color: var(--brand-text); font-family: var(--mono); }
.dt-query-preview i { margin-left: auto; color: var(--muted); font-size: 12px; font-style: normal; }
.dt-mini-table { overflow: auto; width: 100%; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); }
.dt-filter-panel, .dt-column-panel { display: grid; gap: 14px; }
.dt-filter-panel header { display: flex; align-items: center; justify-content: space-between; }
.dt-filter-panel header button { border: 0; background: transparent; color: var(--muted); font-size: 22px; }
.dt-filter-panel label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.dt-filter-panel select, .dt-filter-panel input { min-height: 38px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--text); }
.dt-filter-panel label > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dt-column-panel label { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 4px; }
.dt-column-panel label:hover { background: var(--soft); }
.dt-action-preview { position: relative; display: flex; justify-content: flex-end; min-height: 230px; }
.dt-action-preview > div { position: absolute; top: 60px; right: 24px; display: grid; width: 190px; padding: 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); box-shadow: var(--shadow-lg); }
.dt-action-preview > div button { border: 0; padding: 9px 10px; border-radius: 4px; background: transparent; color: var(--text); text-align: left; }
.dt-action-preview > div button:hover { background: var(--soft); }
.dt-action-preview > div button.danger { color: var(--brand-text); }
.dt-loading-preview { position: relative; display: grid; gap: 14px; overflow: hidden; }
.dt-skeleton-row { display: grid; grid-template-columns: 20px 1fr 1.6fr 100px; gap: 16px; }
.dt-skeleton-row > * { height: 16px; border-radius: 4px; background: var(--soft); }
.dt-loading-label { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-start; gap: 8px; padding-top: 16px; background: color-mix(in srgb, var(--panel) 28%, transparent); color: var(--muted); font-size: 12px; }
.dt-empty-pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; width: 100%; }
.dt-empty-pair article { display: grid; justify-items: center; gap: 7px; min-height: 240px; align-content: center; padding: 24px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); text-align: center; }
.dt-empty-pair article > span { font-size: 24px; color: var(--blue); }
.dt-empty-pair p { margin: 0 0 8px; color: var(--muted); }
.dt-server-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 16px; width: 100%; padding: 24px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.dt-server-flow > span { display: grid; gap: 6px; padding: 18px; border-radius: 4px; background: var(--soft); font-weight: 650; }
.dt-server-flow small { color: var(--muted); font-family: var(--mono); font-weight: 400; }
.dt-server-flow i { color: var(--brand-text); font-size: 22px; font-style: normal; }
.dt-responsive-demo { display: grid; grid-template-columns: minmax(260px, .8fr) 1fr; gap: 18px; width: 100%; }
.dt-phone, .dt-sticky { border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.dt-phone { max-width: 340px; padding: 10px; border-width: 6px 2px; }
.dt-sticky { max-height: 210px; overflow: auto; }
.dt-sticky > strong { position: sticky; top: 0; display: block; padding: 12px; border-bottom: 1px solid var(--line); background: var(--soft); }
.dt-sticky tr { display: grid; grid-template-columns: 36px 90px 1fr 80px 100px 30px; align-items: center; padding: 10px; border-bottom: 1px solid var(--line); font-size: 12px; }
.dt-sticky td { padding: 0; border: 0; }

@media (max-width: 900px) {
  .dt-demo-head, .dt-demo-toolbar { align-items: stretch; flex-direction: column; }
  .dt-search { max-width: none; }
  .dt-empty-pair, .dt-responsive-demo { grid-template-columns: 1fr; }
  .dt-server-flow { grid-template-columns: 1fr; }
  .dt-server-flow i { transform: rotate(90deg); text-align: center; }
  .acun-datatable-demo [data-col="date"] { display: none; }
}

@media (max-width: 600px) {
  .acun-datatable-demo [data-col="status"] { display: none; }
  .dt-bulk { align-items: flex-start; flex-direction: column; }
}

@keyframes dt-spin { to { transform: rotate(360deg); } }

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