/* ============================================================================
   Knownbase design tokens — "Phosphor Vault" (retro-terminal / synthwave)
   Dark-first. Light variant shares the identical token contract below.

   Mapping (old theme -> Knownbase retro):
     --bg          #f5f7f7  -> #070b16  base surface (near-black navy)
     --panel       #ffffff  -> #0c1224  raised surface
     --panel-soft  #f7fbfa  -> #111a30  overlay / soft surface
     --line        #d8e3e1  -> #22314f  hairline borders
     --text        #172220  -> #e8eefb  body text (>= 15:1 on bg)
     --muted       #63716f  -> #8fa1c0  secondary text (>= 6.5:1 on panel)
     --accent      #0f766e  -> #3ee6ff  Knownbase neon (structure only)
     --accent-dark #0b5953  -> #8be9ff  text-safe accent
     --gold        #b7791f  -> #ffc857  todo / warning
     --danger      #a83b3b  -> #ff7b7b  error / blocked
     (new)                  -> #c473e6  muted magenta secondary
     (new)                  -> #5eeaa0  success / done

   Rollback: this file is a token-layer swap. Revert this commit (or restore
   the previous :root block + component color literals) to return to the
   original teal theme. No markup or logic depends on the new values.
   ========================================================================== */

:root {
  color-scheme: dark;
  --bg: #070b16;
  --panel: #0c1224;
  --panel-soft: #111a30;
  --line: #22314f;
  --text: #e8eefb;
  --muted: #8fa1c0;
  --accent: #3ee6ff;
  --accent-dark: #8be9ff;
  --accent-ink: #051018;
  --accent-soft: rgba(62, 230, 255, 0.09);
  --magenta: #c473e6;
  --gold: #ffc857;
  --danger: #ff7b7b;
  --ok: #5eeaa0;
  --chrome: rgba(7, 11, 22, 0.82);
  --code-bg: #060a14;
  --code-text: #c9e8ff;
  --scanline: rgba(255, 255, 255, 0.045);
  --tint-a: rgba(196, 115, 230, 0.07);
  --tint-b: rgba(62, 230, 255, 0.05);
  --glow: 0 0 14px rgba(62, 230, 255, 0.28);
  --glow-strong: 0 0 0 1px rgba(62, 230, 255, 0.55), 0 0 18px rgba(62, 230, 255, 0.3);
  --glow-soft: rgba(62, 230, 255, 0.5);
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  --radius: 2px;
  --vline-gradient: linear-gradient(90deg, transparent, var(--accent) 30%, var(--magenta) 72%, transparent);
  --font-display: ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas, "JetBrains Mono", Menlo, "Liberation Mono", monospace;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--font-body);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef1f8;
  --panel: #ffffff;
  --panel-soft: #f4f7fd;
  --line: #c9d5e8;
  --text: #111a2c;
  --muted: #51617e;
  --accent: #0b7ea6;
  --accent-dark: #085d7d;
  --accent-ink: #ffffff;
  --accent-soft: rgba(11, 126, 166, 0.1);
  --magenta: #8f3fae;
  --gold: #8a5b00;
  --danger: #b03038;
  --ok: #14713f;
  --chrome: rgba(238, 241, 248, 0.86);
  --scanline: rgba(17, 26, 44, 0.05);
  --tint-a: rgba(143, 63, 174, 0.05);
  --tint-b: rgba(11, 126, 166, 0.05);
  --glow: 0 0 10px rgba(11, 126, 166, 0.18);
  --glow-strong: 0 0 0 1px rgba(11, 126, 166, 0.45), 0 0 12px rgba(11, 126, 166, 0.22);
  --glow-soft: rgba(11, 126, 166, 0.32);
  --shadow: 0 18px 44px rgba(17, 26, 44, 0.14);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(1100px 560px at 82% -8%, var(--tint-a), transparent 60%),
    radial-gradient(900px 520px at -8% 108%, var(--tint-b), transparent 55%),
    var(--bg);
}
h1, h2, h3, h4 { font-family: var(--font-display); }
button, input, textarea, select { font: inherit; }
button, .button-link { font-family: var(--font-display); font-size: 14px; border: 1px solid var(--line); background: var(--panel-soft); color: var(--text); border-radius: var(--radius); padding: 9px 13px; cursor: pointer; text-decoration: none; transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease, transform 140ms ease, filter 140ms ease; }
button:hover, .button-link:hover { border-color: var(--accent); }
button:focus-visible, .button-link:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--glow-strong); }
.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
/* Light theme's --accent is too light for white .primary text to clear 4.5:1 comfortably
   (measured 4.62:1, barely AA). --accent-dark ("text-safe accent") fixes it to 7.3:1 (AAA)
   without touching dark theme, where --accent already gives 12.8:1 against the near-black
   accent-ink text. Hover keeps border-color: var(--accent) — the lighter shade reads as an
   intentional brightening highlight on hover. */
:root[data-theme="light"] .primary { background: var(--accent-dark); border-color: var(--accent-dark); }
/* .nav-actions a { color: var(--muted) } (below) has higher specificity (0,1,1) than the
   base .primary rule above (0,1,0), so it was winning for the header's "Start free" link on
   every page except the homepage (whose header uses a real <button>, not <a>, so that type
   selector never matched it there) — the CTA read in muted gray instead of accent-ink in both
   themes. This re-asserts it at (0,2,0), which beats .nav-actions a regardless of source
   order or theme, without touching the shared .nav-actions a rule the plain text links rely on. */
.button-link.primary { color: var(--accent-ink); }
.primary:hover, .button-link.primary:hover { filter: brightness(1.08); box-shadow: var(--glow); border-color: var(--accent); }
.secondary { color: var(--accent-dark); }
.ghost { border: 0; background: transparent; }
.ghost:hover { background: var(--accent-soft); border-color: transparent; }
.danger { color: var(--danger); }
.hidden { display: none !important; }
/* The inline SVG <symbol> sprite at the top of <body> is width/height 0 but still an inline
   element, so it created a phantom line box (~21.6px at the body line-height) that pushed
   every page down — and pushed the 100vh app grid past the viewport bottom, clipping the
   sidebar's trash button. Taking it out of flow removes the phantom line on every page. */
body > svg[width="0"][height="0"] { position: absolute; }
/* Checkboxes and radios are excluded from the full-bleed field styling: `width: 100%` on a
   checkbox makes it claim its whole flex line (the bulk-select checkbox measured 347px of a
   375px row, crushing the note body to 0px). Text fields still stretch as before. */
input:not([type="checkbox"]):not([type="radio"]), textarea, select { width: 100%; border: 1px solid var(--line); background: var(--panel-soft); color: var(--text); border-radius: var(--radius); padding: 10px 11px; outline: none; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); cursor: pointer; }
.key-row input { min-width: 0; } .key-row select { flex: 0 0 110px; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: var(--glow-strong); }
::placeholder { color: var(--muted); opacity: 0.75; }

/* --- Knownbase line motif + retro effects ------------------------------- */
.vline { height: 1px; border: 0; margin: 0; background: var(--vline-gradient); box-shadow: var(--glow); }
.logo-glyph { width: 32px; height: 32px; flex: 0 0 auto; color: var(--accent); filter: drop-shadow(0 0 6px var(--glow-soft)); }
.logo-glyph.large { width: 58px; height: 58px; }
.vline-notch { display: block; width: 240px; max-width: 100%; height: 16px; color: var(--accent); filter: drop-shadow(0 0 5px var(--glow-soft)); }
.wordmark { font-family: var(--font-display); font-weight: 600; letter-spacing: 0; white-space: nowrap; }
.wordmark.large { display: block; font-size: 28px; margin: 10px 0 0; text-align: center; }
.wordmark.small { font-size: 15px; }
.wordmark .wm-known, .wordmark .wm-base { display: inline; font-size: 1em; margin-top: 0; }
.wordmark .wm-known { color: var(--text); }
.wordmark .wm-base { color: var(--accent); text-shadow: 0 0 10px var(--glow-soft); }
@supports (-webkit-text-stroke: 1px black) {
  .wordmark .wm-known { color: transparent; -webkit-text-stroke: 1.3px var(--text); }
}
.wordmark .wm-divider { display: inline-block; margin: 0 6px; width: 3px; height: 0.7em; background: var(--accent); box-shadow: 0 0 8px var(--glow-soft); border-radius: 1px; vertical-align: -0.05em; }
.wordmark.small .wm-divider { width: 2px; margin: 0 3px; }
.scanlines { position: relative; }
.scanlines::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: repeating-linear-gradient(0deg, var(--scanline) 0 1px, transparent 1px 3px); }
@media (prefers-reduced-motion: reduce) {
  .scanlines::after { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .auth-card { animation: crt-on 240ms cubic-bezier(0.2, 0.9, 0.25, 1.15); transform-origin: center; }
  .primary:hover, .button-link.primary:hover { transform: translateY(-1px); }
  button:not(.ghost):active { transform: translateY(1px); }
  .primary.large { animation: glow-pulse 2.8s ease-in-out infinite; }
}
@keyframes crt-on { 0% { transform: scaleY(0.02); filter: brightness(2.4); } 60% { transform: scaleY(1.02); } 100% { transform: scaleY(1); filter: brightness(1); } }
@keyframes glow-pulse { 0%, 100% { box-shadow: var(--glow); } 50% { box-shadow: var(--glow-strong); } }

.marketing { min-height: 100vh; }
.topbar { height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 36px; border-bottom: 0; background: var(--chrome); position: sticky; top: 0; z-index: 5; backdrop-filter: blur(12px); }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--vline-gradient); box-shadow: var(--glow); }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.logo .wordmark { font-size: 19px; }
.logo-lockup { display: block; height: 34px; width: auto; border-radius: var(--radius); }
.logo-lockup-light { display: none; }
:root[data-theme="light"] .logo-lockup-dark { display: none; }
:root[data-theme="light"] .logo-lockup-light { display: block; }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-actions a { color: var(--muted); text-decoration: none; font-family: var(--font-display); font-size: 14px; }
.nav-actions a:hover { color: var(--accent-dark); }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 520px); gap: 42px; align-items: center; padding: 70px 44px 48px; max-width: 1220px; margin: 0 auto; }
.hero-copy h1 { margin: 8px 0 0; font-size: clamp(38px, 6.4vw, 70px); line-height: 1.02; letter-spacing: -0.01em; max-width: 780px; }
.hero-copy .vline-notch { margin: 20px 0 18px; }
.hero-copy p { max-width: 690px; color: var(--muted); font-size: 18px; line-height: 1.6; }
.eyebrow { color: var(--accent-dark); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-family: var(--font-display); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.large { font-size: 16px; padding: 12px 16px; }
.hero-panel { background: var(--code-bg); color: var(--code-text); border: 1px solid var(--accent); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow), var(--glow); min-height: 420px; }
.panel-head { display: flex; gap: 6px; margin-bottom: 16px; }
.panel-head span { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); opacity: 0.85; }
.panel-head span:nth-child(2) { background: var(--magenta); }
.panel-head span:nth-child(3) { background: var(--gold); }
.memory-card { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin-bottom: 10px; font-family: var(--font-display); }
.memory-card.active { border-color: var(--accent); box-shadow: var(--glow); } .memory-card.blocked { border-color: var(--danger); }
.memory-card b, .memory-card small { display: block; } .memory-card small { color: var(--muted); margin-top: 4px; }
.hero-panel pre { margin: 18px 0 0; background: rgba(0, 0, 0, 0.4); color: var(--code-text); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; overflow: auto; }
.feature-band, .pricing, .faq { max-width: 1220px; margin: 0 auto; padding: 34px 44px; }
.feature-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feature-band article, .price-card, .auth-card, .settings-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.feature-band b { font-family: var(--font-display); }
.feature-band b, .feature-band span { display: block; } .feature-band span { color: var(--muted); margin-top: 8px; line-height: 1.45; }
.section-head h2 { max-width: 760px; margin: 4px 0 18px; font-size: 34px; letter-spacing: -0.01em; }
.how { max-width: 1220px; margin: 0 auto; padding: 34px 44px; }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.how-step { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; position: relative; }
.how-step .how-num { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--accent); color: var(--accent-dark); font-family: var(--font-display); box-shadow: var(--glow); margin-bottom: 10px; }
.how-step b { font-family: var(--font-display); display: block; margin-bottom: 6px; }
.how-step p { color: var(--muted); line-height: 1.5; margin: 0; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 0; margin: 0 0 10px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.faq summary { cursor: pointer; padding: 14px 16px; font-family: var(--font-display); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--accent-dark); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0; padding: 0 16px 14px; }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.price-card { display: flex; flex-direction: column; gap: 10px; }
.price-card.featured { border-color: var(--magenta); box-shadow: 0 0 0 1px var(--magenta), 0 0 18px rgba(196, 115, 230, 0.25); }
.price-card h3 { margin: 0; } .price-card strong { font-size: 30px; font-family: var(--font-display); } .price-card strong span { color: var(--muted); font-size: 14px; } .price-card p, .faq p { color: var(--muted); line-height: 1.5; }
.price-card ul { padding-left: 18px; margin: 0 0 10px; color: var(--muted); }
.trial-badge { align-self: flex-start; font-family: var(--font-display); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-dark); background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius); padding: 2px 8px; }
.section-sub { color: var(--muted); margin: -8px 0 0; line-height: 1.5; }
.hint { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 8px 0 0; }
.checkout-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: var(--bg); }
.checkout-card { width: min(420px, 100%); background: var(--panel); border: 1px solid var(--accent); border-radius: var(--radius); box-shadow: var(--shadow), var(--glow); padding: 32px 28px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.checkout-card .brand-icon { width: 56px; height: 56px; }
.checkout-card .message { min-height: 0; }
.checkout-card .button-link { margin-top: 4px; }
.auth { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(2, 5, 12, 0.7); z-index: 20; padding: 20px; }
.auth-card { width: min(460px, 100%); box-shadow: var(--shadow), var(--glow); border-color: var(--accent); position: relative; }
.auth-brand { display: grid; justify-items: center; padding-top: 6px; text-decoration: none; }
.auth-brand .logo-lockup { height: 38px; }
.auth-card h2 { text-align: center; margin: 10px 0 12px; letter-spacing: 0.06em; }
.auth-card .vline-notch.auth-line { margin: 0 auto 14px; }
.auth-card form { display: grid; gap: 10px; margin: 14px 0; }
.confirm-overlay { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(2, 5, 12, 0.7); z-index: 25; padding: 20px; }
.confirm-card { width: min(380px, 100%); background: var(--panel); border: 1px solid var(--accent); border-radius: var(--radius); box-shadow: var(--shadow), var(--glow); padding: 20px; }
.confirm-card p { margin: 0 0 18px; line-height: 1.5; }
.confirm-actions { justify-content: flex-end; }
.close { position: absolute; top: 10px; right: 10px; }
.message { color: var(--muted); min-height: 20px; }
.message.error { color: var(--danger); }
.message.ok { color: var(--ok); }

/* --- Password field with show/hide toggle --------------------------------- */
.field { position: relative; display: block; }
.field input { width: 100%; }
.field .toggle-pw { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); border: 0; background: transparent; color: var(--muted); padding: 4px 8px; font-size: 12px; }
.field .toggle-pw:hover { color: var(--accent-dark); background: transparent; }
.consent { color: var(--muted); font-size: 12px; text-align: center; margin: 2px 0 0; line-height: 1.5; }
.consent a { color: var(--accent-dark); }
.cf-turnstile { display: flex; justify-content: center; min-height: 65px; }
button[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* --- Site footer (marketing + standalone pages) --------------------------- */
.site-footer { border-top: 1px solid var(--line); background: var(--panel); margin-top: 26px; position: relative; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--vline-gradient); box-shadow: var(--glow); }
.footer-inner { max-width: 1220px; margin: 0 auto; padding: 40px 44px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px; }
.footer-brand .logo-lockup { height: 30px; margin: 0 0 12px; }
.footer-brand p { color: var(--muted); margin: 0 0 8px; line-height: 1.5; font-size: 14px; }
.footer-brand .footer-fine { font-size: 12px; opacity: 0.8; }
.footer-brand .footer-fine a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-brand .footer-fine a:hover { color: var(--accent-dark); }
.footer-col h4 { font-family: var(--font-display); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 12px; }
.footer-col a { display: block; color: var(--text); text-decoration: none; font-size: 14px; padding: 4px 0; }
.footer-col a:hover { color: var(--accent-dark); }

/* --- Standalone content pages (legal, features, about, contact) ----------- */
.page { min-height: 100vh; display: flex; flex-direction: column; }
.page-main { flex: 1 0 auto; max-width: 900px; width: 100%; margin: 0 auto; padding: 48px 24px 40px; }
.page-main.wide { max-width: 1220px; }
.page-main h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.05; margin: 0 0 6px; letter-spacing: -0.01em; }
.page-main .eyebrow { margin-bottom: 8px; }
.page-main h2 { font-size: 24px; margin: 30px 0 10px; }
.page-main h3 { font-size: 18px; margin: 22px 0 8px; }
.page-main p, .page-main li { color: var(--muted); line-height: 1.7; }
.page-main a:not(.button-link) { color: var(--accent-dark); }
.page-main ul, .page-main ol { padding-left: 20px; }
.page-main li { margin: 6px 0; }
.legal-meta { color: var(--muted); font-size: 13px; margin: 0 0 24px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 22px 0; }
.info-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.info-card h3 { margin: 0 0 8px; font-size: 17px; color: var(--text); }
.info-card p { margin: 0; font-size: 14px; }
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.contact-form { display: grid; gap: 12px; }
.contact-form textarea { min-height: 150px; resize: vertical; }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form .actions { justify-content: space-between; }
.mt-md { margin-top: 16px; }
.mt-lg { margin-top: 24px; }
.page-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.how.flush { padding-left: 0; padding-right: 0; }

/* ---- Blog: index listing + post article ---- */
.blog-list { display: grid; gap: 16px; margin: 26px 0 8px; }
a.post-card { display: block; text-decoration: none; transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease; }
a.post-card:hover { border-color: var(--accent); box-shadow: var(--glow); transform: translateY(-1px); }
.post-card .post-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 8px; }
.post-card h2 { margin: 0 0 8px; font-size: 21px; color: var(--text); letter-spacing: -0.01em; }
.post-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.post-card .read-more { display: inline-block; margin-top: 12px; color: var(--accent-dark); font-family: var(--font-display); font-size: 14px; }
.post-tag { display: inline-block; font-family: var(--font-display); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-dark); border: 1px solid var(--line); border-radius: var(--radius); padding: 2px 8px; }
.post-date { color: var(--muted); font-size: 13px; font-family: var(--font-display); }

.post { max-width: 760px; }
.post-header { margin-bottom: 8px; }
.post-header .post-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 6px 0 14px; }
.post-lead { font-size: 19px; line-height: 1.6; color: var(--muted); margin: 0 0 8px; }
.post-body { margin-top: 8px; }
.post-body h2 { font-size: 25px; margin: 34px 0 12px; letter-spacing: -0.01em; }
.post-body h3 { font-size: 19px; margin: 26px 0 8px; }
.post-body p, .post-body li { font-size: 17px; line-height: 1.75; }
.post-body ul, .post-body ol { padding-left: 22px; }
.post-body li { margin: 8px 0; }
.post-body a { color: var(--accent-dark); }
.post-body strong { color: var(--text); }
.post-body pre { background: var(--code-bg); color: var(--code-text); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; overflow: auto; margin: 18px 0; font-size: 14px; line-height: 1.55; }
.post-body code { font-family: var(--font-mono, monospace); font-size: 0.92em; }
.post-body p code, .post-body li code { background: var(--panel-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 1px 5px; }
.post-body blockquote { margin: 20px 0; padding: 4px 18px; border-left: 2px solid var(--accent); color: var(--muted); font-style: italic; }
.post-body hr { border: none; border-top: 1px solid var(--line); margin: 34px 0; }
.post-cta { margin-top: 40px; padding: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.post-cta h3 { margin: 0 0 6px; font-size: 20px; color: var(--text); }
.post-cta p { margin: 0 0 14px; }
.post-back { display: inline-block; margin-bottom: 18px; color: var(--accent-dark); font-family: var(--font-display); font-size: 14px; }

/* App chrome: a slim full-width top bar (brand, usage, utilities, Settings, Logout) over
   the three panes, so the sidebar is purely navigation/creation instead of also carrying
   the brand block and utility buttons. Row 2 is the verify banner — display:none when
   hidden, so its auto row collapses to 0 and the panes (pinned to row 3) take the rest. */
.workspace { display: grid; grid-template-columns: 290px minmax(300px, 390px) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); height: 100vh; min-height: 0; overflow: hidden; }
.app-topbar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 6px 16px; background: var(--chrome); position: relative; z-index: 4; }
.app-topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--vline-gradient); box-shadow: var(--glow); }
.app-topbar .brand-lockup { flex-direction: row; padding-bottom: 0; }
.app-topbar .brand-lockup::after { display: none; }
.app-topbar-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.app-topbar-actions button { padding: 7px 12px; white-space: nowrap; }
.app-topbar .usage-strip { background: transparent; border: 0; padding: 0 10px 0 0; gap: 10px; }
#app .verify-banner { grid-column: 1 / -1; border-radius: 0; border-left: 0; border-right: 0; border-top: 0; }
.sidebar, .list-pane, .detail { grid-row: 3; min-height: 0; border-right: 1px solid var(--line); background: var(--panel); }
.sidebar { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.brand, .pane-head, .actions, .meta-row, .head-actions, .settings-head, .key-row { display: flex; align-items: center; gap: 10px; }
.brand, .settings-head { justify-content: space-between; }
.brand strong { display: block; }
.brand-lockup { display: flex; flex-direction: column; align-items: center; gap: 9px; position: relative; padding-bottom: 6px; }
.brand-lockup::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--vline-gradient); }
.brand-icon { display: block; width: 28px; height: 28px; border-radius: var(--radius); flex: 0 0 auto; box-shadow: 0 0 0 1px var(--line); }
.brand-icon-light { display: none; }
:root[data-theme="light"] .brand-icon-dark { display: none; }
:root[data-theme="light"] .brand-icon-light { display: block; }
.brand span, .brand-lockup span, .pane-head span, .project small, .note small, .api-key small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.brand-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.brand-actions button { padding: 7px 9px; }
/* Compact single-line usage summary — replaces the old metric-grid + usage-card pair, which
   showed the same notes/projects counts twice across two separate bordered boxes. */
.usage-strip { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; background: var(--panel-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 12px; }
.usage-strip b { font-family: var(--font-display); font-size: 13px; white-space: nowrap; }
.usage-strip span { color: var(--muted); font-size: 12px; text-align: right; }
.verify-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--accent-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 8px 8px 12px; }
.verify-banner span { color: var(--text); font-size: 12px; }
.sidebar-actions { display: flex; gap: 8px; }
.sidebar-actions .primary { flex: 1 1 auto; }
.filters { display: flex; gap: 8px; }
.filters input { flex: 1 1 auto; width: auto; min-width: 0; }
.filters select { flex: 0 0 116px; width: auto; }
.filters button { flex: 0 0 auto; padding: 9px 11px; }
.filters button.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); box-shadow: var(--glow); }

/* Unified control sizing for the logged-in app only (#app scope — marketing pages and the
   pre-login auth modal are untouched). Inputs, selects, and buttons sharing a form row
   previously computed three different heights (43.2 / 44.8 / 35.6px), and rows without
   align-items stretched whichever control was tallest to 51.6px. One shared 38px height,
   a matching 14px control font (inputs inherited the 16px body font, buttons didn't), and
   centered rows make every mixed row line up. Compact utility buttons (pills, bulk bar,
   view tabs) keep their own deliberate sizing — this targets form rows only. */
#app input:not([type="checkbox"]):not([type="radio"]), #app select { height: 38px; padding-top: 0; padding-bottom: 0; font-size: 14px; }
#app textarea { font-size: 14px; }
#app .key-row button, #app .sidebar-actions button, #app .filters button, #app .actions button, #app .settings-head button, #app .comment-form button { min-height: 38px; white-space: nowrap; }
#app .sidebar-actions, #app .filters { align-items: center; }
#app .sidebar-actions select { flex: 1 1 auto; width: auto; min-width: 0; }
#app .key-row { flex-wrap: wrap; }
.project-filter { font-size: 13px; padding: 6px 10px; }
.saved-searches { display: flex; flex-wrap: wrap; gap: 6px; }
.saved-search-chip { display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; font-size: 12px; border-radius: 999px; }
.saved-search-chip b { font-weight: 400; color: var(--muted); padding: 0 4px; border-radius: 50%; }
.saved-search-chip b:hover { color: var(--danger); background: var(--panel-soft); }
.projects { display: flex; flex: 1 1 auto; min-height: 140px; flex-direction: column; gap: 4px; overflow: auto; overscroll-behavior: contain; padding-right: 2px; }
.project { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 0; border-radius: var(--radius); background: transparent; text-align: left; padding: 10px; font-family: var(--font-body); }
.project span { min-width: 0; } .project strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .project b { color: var(--muted); font-size: 13px; font-family: var(--font-display); }
/* .project/.note use border:0 (a flat list, not a grid of buttons), which makes the global
   button:hover/:focus-visible rules above invisible (they only change border-color) — these
   rows had no hover or keyboard-focus feedback at all until now. */
.project:hover:not(.active) { background: var(--panel-soft); }
.project:focus-visible { outline: none; box-shadow: inset 2px 0 0 var(--accent), var(--glow-strong); }
.project.active { background: var(--accent-soft); color: var(--accent-dark); box-shadow: inset 2px 0 0 var(--accent); }
.sidebar-foot { flex: 0 0 auto; text-align: left; }
.sidebar-foot.active { background: var(--accent-soft); color: var(--accent-dark); }
.trash-note { display: block; }
.trash-actions { display: flex; gap: 8px; margin-top: 8px; }
.trash-actions button { padding: 5px 10px; font-size: 12px; }
.list-pane { display: flex; min-height: 0; flex-direction: column; }
.pane-head { min-height: 62px; padding: 0 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pane-head strong { font-family: var(--font-display); }
/* The toggle never shrinks, so the title block must be allowed to — without min-width:0 a long
   project name overflows the pane instead of ellipsing. */
.pane-head > div:first-child { min-width: 0; flex: 1 1 auto; }
.pane-head > div:first-child strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Segmented control: one outline shared across the three buttons instead of three separate
   bordered boxes with doubled adjacent borders. */
.list-view-toggle { display: flex; flex: 0 0 auto; }
.list-view-toggle button { padding: 6px 12px; font-size: 12px; border-radius: 0; margin-left: -1px; }
.list-view-toggle button:first-child { border-radius: var(--radius) 0 0 var(--radius); margin-left: 0; }
.list-view-toggle button:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.list-view-toggle button.active, .list-view-toggle button:hover, .list-view-toggle button:focus-visible { position: relative; z-index: 1; }

/* Sits inside the ~300-390px list pane, so every control is allowed to shrink and share rows;
   at flex 0 1 150px the eight controls stacked into a tall bar that pushed the note list down. */
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--accent-soft); }
.bulk-bar span { font-family: var(--font-display); font-size: 12px; color: var(--accent-dark); flex: 1 0 100%; margin: 0; }
.bulk-bar input, .bulk-bar select { width: auto; flex: 1 1 88px; min-width: 0; font-size: 12px; padding: 5px 8px; }
.bulk-bar button { flex: 0 0 auto; padding: 5px 9px; font-size: 12px; }
/* Scoped to bulk-mode rows only (checkbox + .note-body side by side) — this used to be a bare
   .note rule, which made every plain note button a flex ROW with no direction set. With no
   .note-body wrapper in the non-bulk render path, the title/meta/snippet became flex ITEMS
   competing for width on one line instead of stacking, squeezing each into an unreadable
   sliver. Plain rows and trash rows now get ordinary block flow (children stack top to bottom)
   since nothing below sets display on bare .note. */
.note.bulk-row { display: flex; align-items: flex-start; gap: 10px; }
/* Explicit box so the checkbox never depends on the generic field width, and a small top
   offset that optically centres it against the title's first line rather than the old
   margin-top:14px magic number (tuned for earlier row padding, now misaligned). */
.note-select { flex: 0 0 auto; width: 16px; height: 16px; margin: 2px 0 0; padding: 0; }
.note-body { min-width: 0; flex: 1 1 auto; }
/* .note rows share .project's border:0 problem (see above) — plain buttons and bulk-mode divs
   both need an explicit hover/focus treatment since the global button rules rely on a visible
   border. Excludes trash rows: the row itself isn't clickable there (only its Restore/Delete
   buttons are), so a hover tint would misleadingly suggest the whole row responds to a click. */
.note:not(.trash-note):hover:not(.active) { background: var(--panel-soft); }
.note:focus-visible { outline: none; box-shadow: inset 2px 0 0 var(--accent), var(--glow-strong); }
.notes { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.board { flex: 1 1 auto; min-height: 0; display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 12px; }
.board-column { flex: 0 0 220px; display: flex; flex-direction: column; min-height: 0; background: var(--panel-soft); border: 1px solid var(--line); border-radius: var(--radius); }
.board-column.drag-over { border-color: var(--accent); box-shadow: var(--glow); }
.board-column-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--line); font-family: var(--font-display); }
.board-column-head span { color: var(--muted); font-size: 12px; }
.board-column-body { flex: 1 1 auto; min-height: 40px; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.board-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; cursor: grab; }
.board-card:hover { border-color: var(--accent); }
.board-card strong { display: block; font-size: 13px; }
.board-card span { display: block; color: var(--muted); font-size: 12px; margin: 3px 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-card-status { width: 100%; font-size: 11px; padding: 4px 6px; }
.note { width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 13px 14px; text-align: left; background: transparent; font-family: var(--font-body); }
.note.active { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
/* Clamped to 2 lines instead of the old single nowrap+ellipsis line — a long title (common for
   decision/debugging notes) used to just wrap under the flex-row bug above; now that rows stack
   correctly, cap it so one outlier title can't blow out every row's height. */
.note strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Project name + tags used to be one hand-joined, forced-nowrap string ("project / tag, tag,
   tag") that silently clipped everything past the row width with no ellipsis on the tag list.
   Tags now render as individual chips that wrap onto a second line instead of disappearing. */
.note-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 4px; min-width: 0; }
.note-project { color: var(--muted); font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-tag { flex: 0 0 auto; background: var(--panel-soft); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; font-size: 11px; font-family: var(--font-display); color: var(--muted); line-height: 1.6; }
/* Was max-height:38px + overflow:hidden with no ellipsis, which crops mid-glyph on the cut
   line. -webkit-line-clamp gives the same 2-line cap with a clean ellipsis at the true edge. */
.note em { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-size: 13px; margin-top: 4px; font-style: normal; line-height: 1.4; }
.note mark { background: rgba(255, 200, 87, 0.25); color: inherit; padding: 0 2px; }
.status-dot { display: inline-block; margin-right: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; font-family: var(--font-display); letter-spacing: 0.06em; }
.status-dot.active, .status-chip.active { color: var(--accent-dark); } .status-dot.todo, .status-chip.todo { color: var(--gold); } .status-dot.done, .status-chip.done { color: var(--ok); } .status-dot.blocked, .status-chip.blocked { color: var(--danger); } .status-dot.archived, .status-chip.archived { color: var(--muted); }
.empty-list { color: var(--muted); padding: 18px 14px; line-height: 1.6; }
.detail { border-right: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; overflow: hidden; }
/* Wrapping header: on wide panes the tab group sits beside the title; when the pane is
   narrow (the common 3-column layout) the group drops below the title instead of squeezing
   it into a 140px column that wrapped every real title onto 2-3 lines. */
.detail-head { min-height: 96px; padding: 16px 18px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 16px; align-items: flex-start; }
.detail-head > div:first-child { min-width: 0; flex: 1 1 300px; }
.detail-head h2 { margin: 3px 0 8px; font-size: 20px; letter-spacing: 0; overflow-wrap: anywhere; }
.detail-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.status-chip, .tag-row span { background: var(--panel-soft); color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius); padding: 3px 7px; font-size: 12px; font-family: var(--font-display); }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.note-link { color: var(--accent-dark); text-decoration: none; border-bottom: 1px dotted var(--accent); cursor: pointer; }
.note-link:hover { border-bottom-style: solid; }
.note-link.unresolved { color: var(--muted); cursor: default; border-bottom-color: var(--muted); }
.metafields { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.metafield { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; font-size: 12px; font-family: var(--font-display); background: var(--panel-soft); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); }
.metafield b { color: var(--accent-dark); font-weight: 600; }
.backlinks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.backlinks small { color: var(--muted); font-family: var(--font-display); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.backlinks button { padding: 3px 8px; font-size: 12px; border-radius: 999px; }
.share-panel { display: flex; gap: 6px; margin-top: 8px; max-width: 420px; }
.share-panel input { flex: 1 1 auto; min-width: 0; font-size: 12px; font-family: var(--font-display); color: var(--accent-dark); }
.share-panel button { padding: 5px 10px; font-size: 12px; }
/* Compact 12px tabs (matching the list pane's Select/List/Board toggle) so the six view
   buttons fit beside the title instead of stretching the header to 165px with both the
   title column and the button group wrapping. */
.head-actions { flex-wrap: wrap; justify-content: flex-end; gap: 4px; flex: 0 1 auto; margin-left: auto; }
.head-actions .tab { padding: 6px 10px; font-size: 12px; }
.tab.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); box-shadow: inset 0 -2px 0 var(--accent); }
.preview, .raw, .editor, .history, .comments-panel { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 18px; }
.comment { border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 10px; overflow: hidden; }
.comment-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--panel-soft); border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: 13px; }
.comment-head small { color: var(--muted); margin-right: auto; }
.comment-head button { padding: 3px 9px; font-size: 12px; }
.comment-body { padding: 10px 12px; white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
.comment-form { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; max-width: 640px; }
.comment-form textarea { resize: vertical; font-family: var(--font-body); }
.comment-form button { align-self: flex-end; }
.revision { border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 12px; overflow: hidden; }
.revision-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--panel-soft); border-bottom: 1px solid var(--line); font-family: var(--font-display); }
.revision-head small { color: var(--muted); margin-right: auto; }
.revision-head button { padding: 4px 10px; font-size: 12px; }
.revision pre { margin: 0; padding: 12px; max-height: 240px; overflow: auto; background: var(--code-bg); color: var(--code-text); white-space: pre-wrap; word-break: break-word; }
.scope-badge { font-family: var(--font-display); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-dark); border: 1px solid var(--line); border-radius: var(--radius); padding: 1px 5px; font-weight: 600; }
.preview { max-width: 920px; line-height: 1.6; } .preview.empty { color: var(--muted); }
.preview h1, .preview h2, .preview h3, .preview h4 { letter-spacing: 0; line-height: 1.25; margin: 18px 0 10px; } .preview h1:first-child, .preview h2:first-child, .preview h3:first-child { margin-top: 0; } .preview p { margin: 0 0 12px; } .preview ul, .preview ol { margin: 0 0 14px 22px; padding: 0; }
.preview a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.preview blockquote { margin: 0 0 14px; padding: 8px 14px; border-left: 2px solid var(--accent); background: var(--accent-soft); color: var(--muted); }
.preview hr { border: 0; height: 1px; margin: 18px 0; background: var(--vline-gradient); box-shadow: var(--glow); }
.preview table { border-collapse: collapse; margin: 0 0 14px; width: 100%; max-width: 720px; }
.preview th { font-family: var(--font-display); text-align: left; color: var(--accent-dark); border-bottom: 1px solid var(--accent); padding: 7px 10px; }
.preview td { border-bottom: 1px solid var(--line); padding: 7px 10px; }
.preview code, .raw, #body { font-family: var(--font-display); }
.preview code { background: var(--panel-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 1px 4px; }
.preview pre, .raw, .settings-card pre { background: var(--code-bg); color: var(--code-text); border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; }
.preview pre, .settings-card pre { padding: 12px; } .preview pre code { background: transparent; border: 0; padding: 0; } .raw { margin: 18px; white-space: pre-wrap; }
/* Five children (two meta rows, #meta, #body, actions) — the row list must match, or the
   minmax(0,1fr) squeeze row lands on the wrong child (it crushed the #meta input to 21px
   when it was written for four children). */
.editor { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; gap: 10px; }
#title { font-weight: 700; } #body { resize: none; min-height: 420px; line-height: 1.55; font-size: 15px; background: var(--code-bg); color: var(--code-text); } .actions { justify-content: flex-end; } #save-status { margin-right: auto; color: var(--muted); font-size: 13px; }
.settings { position: fixed; inset: 0; background: var(--bg); box-shadow: var(--shadow), var(--glow); z-index: 15; overflow: auto; }
.settings-head { position: sticky; top: 0; z-index: 1; padding: 18px clamp(18px, 4vw, 48px); background: var(--panel); border-bottom: 1px solid var(--accent); }
.settings-head h2 { font-size: 20px; margin: 0; }
/* Cards vary wildly in height (a one-line Audit log notice next to a multi-row MCP keys
   form) — a row-based grid left ragged gaps under every short card. A balanced multi-column
   layout packs cards by height instead, like masonry, with no JS. */
#settings-content { columns: 360px 3; column-gap: 16px; max-width: 1400px; margin: 0 auto; padding: 20px clamp(18px, 4vw, 48px) 48px; }
.settings-card { margin-bottom: 16px; break-inside: avoid; }
.settings-card h3 { position: relative; margin: 0 0 14px; padding-bottom: 8px; font-size: 15px; }
.settings-card h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--vline-gradient); }
#settings-content .settings-card:first-of-type { display: flex; flex-wrap: wrap; column-span: all; }
#settings-content .settings-card:first-of-type > * { flex: 0 0 100%; }
.totp-qr { display: flex; justify-content: center; margin: 12px 0; }
.totp-qr svg { background: #fff; padding: 12px; border-radius: var(--radius); max-width: 220px; height: auto; }
.mini-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mini-plans button { text-align: left; } .mini-plans button span { display: block; color: var(--muted); font-size: 12px; } .mini-plans button.active { background: var(--accent-soft); border-color: var(--accent); box-shadow: var(--glow); }
.api-key { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding: 9px 0; }

.admin-nav.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); box-shadow: inset 0 -2px 0 var(--accent); }
.admin-view { margin-top: 20px; }
.admin-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding: 10px 0; cursor: pointer; }
.admin-row:hover { background: var(--accent-soft); }
.admin-row-main b { display: block; }
.admin-row-main small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.admin-row-actions { display: flex; gap: 8px; align-items: center; }
.admin-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.admin-detail-actions button, .admin-detail-actions select { font-size: 13px; padding: 6px 10px; }
.metric-section { margin-top: 26px; }
.metric-section > h3 { margin: 0 0 4px; font-size: 16px; }
.metric-section > p.hint { margin: 0 0 12px; }
.metric-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.metric-table th, .metric-table td { text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.metric-table th:first-child, .metric-table td:first-child { text-align: left; }
.metric-table thead th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.metric-table-wrap { overflow-x: auto; }
.metric-bar { height: 6px; border-radius: 3px; background: var(--accent-soft); overflow: hidden; margin-top: 8px; }
.metric-bar span { display: block; height: 100%; background: var(--accent); }
.metric-delta.up { color: var(--ok, #2f9e6b); }
.metric-delta.down { color: var(--danger, #c0483c); }

@media (max-width: 1120px) { .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero { grid-template-columns: minmax(0, 1fr); } .workspace { grid-template-columns: 250px minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) minmax(0, 60vh); } .detail { grid-row: 4; grid-column: 1 / -1; border-top: 1px solid var(--line); } .verify-banner { flex-direction: column; align-items: stretch; } }
@media (max-width: 720px) { body { overflow: auto; } .topbar, .nav-actions, .hero-actions, .meta-row, .detail-head { flex-direction: column; align-items: stretch; } .detail-head > div:first-child { flex-basis: auto; } .head-actions { margin-left: 0; } .topbar { height: auto; padding: 14px; } .hero, .feature-band, .pricing, .faq, .how { padding: 28px 18px; } .feature-band, .pricing-grid, .how-grid { grid-template-columns: 1fr; } .workspace { display: block; height: auto; overflow: visible; } .sidebar, .list-pane, .detail { height: auto; min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); } .projects, .notes { max-height: 42vh; } .app-topbar { position: sticky; top: 0; flex-wrap: wrap; } .app-topbar .usage-strip { display: none; } .head-actions { justify-content: flex-start; } .logo-lockup { margin: 0 auto; } .nav-actions a { text-align: center; } .footer-inner { grid-template-columns: 1fr 1fr; gap: 20px; padding: 30px 18px; } .footer-brand { grid-column: 1 / -1; } .contact-layout { grid-template-columns: 1fr; } .page-main { padding: 32px 18px; } }