/*
 * Figgy design system: index card and highlighter. See DESIGN.md.
 * Loaded after app.css and studio.css, so these tokens and primitives win.
 * Light: alabaster desk, white cards, 1px hairlines, one lime mark.
 * Dark: carbon desk, cards one luminance step up, a 7% white top edge, no shadows.
 * Creator pages (shared/render.js) keep their own themes and are not affected.
 */
:root {
  --ink: #0e0f0c;
  --ink-2: #2b2d29;
  --muted: #5b5f58;
  --paper: #f7f7f4;
  --card: #ffffff;
  --raised: #ffffff;
  --sunken: #f0f0ec;
  --line: rgba(14, 15, 12, .09);
  --line-strong: rgba(14, 15, 12, .16);
  --control: #8c8f88;
  --hover: rgba(14, 15, 12, .045);
  --press: rgba(14, 15, 12, .08);
  --lime: #c5f04a;
  --lime-ink: #172000;
  --accent-hover: #b4e03a;
  --accent-active: #a6d12a;
  --accent-strong: #3f6212;
  --selected: rgba(197, 240, 74, .34);
  --focus: #3f6212;
  --clay: var(--accent-strong);
  --forest: var(--ink);
  --ok: #1d7a34;
  --bad: #b42318;
  --ok-bg: #edf7ef;
  --bad-bg: #fdf0ee;
  --warn-bg: #fff6db;
  --warn-ink: #5a4100;
  --warn-line: #ebd9a0;
  --on-ink: #ffffff;
  --specular: transparent;
  --shadow-1: 0 1px 2px rgba(14, 15, 12, .04);
  --shadow-2: 0 1px 2px rgba(14, 15, 12, .04), 0 8px 24px -12px rgba(14, 15, 12, .12);
  --shadow-3: 0 1px 2px rgba(14, 15, 12, .05), 0 24px 64px -16px rgba(14, 15, 12, .28);
  --scrim: rgba(14, 15, 12, .42);
  --switch-off: #c4c7bf;
  --switch-on: var(--ink);
  --thumb: #ffffff;
  --thumb-on: #ffffff;
  --chart-bar: #dcded6;
  --chart-bar-hover: #c2c5bb;
  --logo-tile: #d4ff3f;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius: var(--radius-lg);
  --shadow: var(--shadow-1);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-move: cubic-bezier(.77, 0, .175, 1);
  --dur-press: 100ms;
  --dur-hover: 150ms;
  --dur-state: 200ms;
  --dur-move: 240ms;
  color-scheme: light;
}
:root[data-theme=dark] {
  --ink: #edeeea;
  --ink-2: #d2d4ce;
  --muted: #a1a49c;
  --paper: #0b0c0b;
  --card: #141514;
  --raised: #1c1e1c;
  --sunken: #101110;
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .14);
  --control: #686c65;
  --hover: rgba(255, 255, 255, .055);
  --press: rgba(255, 255, 255, .09);
  --accent-strong: #c5f04a;
  --selected: rgba(197, 240, 74, .16);
  --focus: #c5f04a;
  --ok: #7edc94;
  --bad: #ff8a80;
  --ok-bg: #13251a;
  --bad-bg: #2e1715;
  --warn-bg: #282211;
  --warn-ink: #f1df9e;
  --warn-line: #4a3f1c;
  --on-ink: #0b0c0b;
  --specular: rgba(255, 255, 255, .07);
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: none;
  --scrim: rgba(0, 0, 0, .62);
  --switch-off: #3a3d39;
  --switch-on: var(--ink);
  --thumb: #a1a49c;
  --thumb-on: #0b0c0b;
  --chart-bar: #33362f;
  --chart-bar-hover: #474b42;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --ink: #edeeea;
    --ink-2: #d2d4ce;
    --muted: #a1a49c;
    --paper: #0b0c0b;
    --card: #141514;
    --raised: #1c1e1c;
    --sunken: #101110;
    --line: rgba(255, 255, 255, .08);
    --line-strong: rgba(255, 255, 255, .14);
    --control: #686c65;
    --hover: rgba(255, 255, 255, .055);
    --press: rgba(255, 255, 255, .09);
    --accent-strong: #c5f04a;
    --selected: rgba(197, 240, 74, .16);
    --focus: #c5f04a;
    --ok: #7edc94;
    --bad: #ff8a80;
    --ok-bg: #13251a;
    --bad-bg: #2e1715;
    --warn-bg: #282211;
    --warn-ink: #f1df9e;
    --warn-line: #4a3f1c;
    --on-ink: #0b0c0b;
    --specular: rgba(255, 255, 255, .07);
    --shadow-1: none;
    --shadow-2: none;
    --shadow-3: none;
    --scrim: rgba(0, 0, 0, .62);
    --switch-off: #3a3d39;
    --switch-on: var(--ink);
    --thumb: #a1a49c;
    --thumb-on: #0b0c0b;
    --chart-bar: #33362f;
    --chart-bar-hover: #474b42;
    color-scheme: dark;
  }
}

/* Previews show the creator page exactly as visitors see it, whatever the editor theme. */
.phone-screen, #demo-screen {
  --ink: #0e0f0c;
  --ink-2: #2b2d29;
  --muted: #5b5f58;
  --paper: #f7f7f4;
  --card: #ffffff;
  --raised: #ffffff;
  --sunken: #f0f0ec;
  --line: rgba(14, 15, 12, .09);
  --line-strong: rgba(14, 15, 12, .16);
  --control: #8c8f88;
  --hover: rgba(14, 15, 12, .045);
  --press: rgba(14, 15, 12, .08);
  --lime: #c5f04a;
  --lime-ink: #172000;
  --accent-hover: #b4e03a;
  --accent-active: #a6d12a;
  --accent-strong: #3f6212;
  --selected: rgba(197, 240, 74, .34);
  --focus: #3f6212;
  --clay: var(--accent-strong);
  --forest: var(--ink);
  --ok: #1d7a34;
  --bad: #b42318;
  --ok-bg: #edf7ef;
  --bad-bg: #fdf0ee;
  --warn-bg: #fff6db;
  --warn-ink: #5a4100;
  --warn-line: #ebd9a0;
  --on-ink: #ffffff;
  --specular: transparent;
  --shadow-1: 0 1px 2px rgba(14, 15, 12, .04);
  --shadow-2: 0 1px 2px rgba(14, 15, 12, .04), 0 8px 24px -12px rgba(14, 15, 12, .12);
  --shadow-3: 0 1px 2px rgba(14, 15, 12, .05), 0 24px 64px -16px rgba(14, 15, 12, .28);
  --scrim: rgba(14, 15, 12, .42);
  --switch-off: #c4c7bf;
  --switch-on: var(--ink);
  --thumb: #ffffff;
  --thumb-on: #ffffff;
  --chart-bar: #dcded6;
  --chart-bar-hover: #c2c5bb;
  --logo-tile: #d4ff3f;
  color-scheme: light;
}

/* While the theme changes, nothing animates: the switch is instant. */
.no-motion, .no-motion *, .no-motion *::before, .no-motion *::after { transition: none !important; }

/* ------------------------------- base ------------------------------- */
html { background: var(--paper); }
body { color: var(--ink); background: var(--paper); font-size: 15px; line-height: 1.5; }
body, .is-land, .is-dash, .is-auth, .auth { background: var(--paper); }
:root { accent-color: var(--accent-strong); }
::selection { background: var(--selected); color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a { color: inherit; }
.muted, .hint, .counter { color: var(--muted); }
.small { font-size: 13px; }
.bad, .hint.bad { color: var(--bad); }
.hint.ok, .ok-text { color: var(--ok); }
/* The editor panel takes focus when a tab opens; it is not a control. */
.dash-main:focus, .dash-main:focus-visible, #panel:focus, #panel:focus-visible { outline: none; }
.kpi b, .plan-price b, .calc-out dd, .clicks, .counter, .bar-label b, .sub-list li > b, .block-stats b, .aud-top li b,
.share-url, .trend, .delta, .chart text, .save-state, code, .studio-fine, .msg-head small { font-variant-numeric: tabular-nums; }

/* ------------------------------- brand ------------------------------ */
.brand { color: var(--ink); font-weight: 800; font-stretch: 112%; letter-spacing: -.035em; }
.brand svg, .studio-nav .brand svg { color: var(--logo-tile); box-shadow: none; --logo-ink: #0e0f0c; border-radius: 9px; }
:root[data-theme=dark] .brand svg { box-shadow: none; }

/* ------------------------------ buttons ----------------------------- */
.btn {
  height: 40px; padding: 0 16px; border-radius: var(--radius-md); border: 1px solid var(--line-strong);
  background: var(--card); color: var(--ink); font-weight: 600; font-size: 14.5px; gap: 8px;
  box-shadow: var(--shadow-1);
  transition: background-color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.btn.sm { height: 34px; padding: 0 12px; font-size: 13.5px; border-radius: 8px; }
.btn.big { height: 52px; padding: 0 24px; font-size: 16px; }
.btn:active { transform: scale(.97); }
.btn:disabled, .btn[aria-disabled=true] { opacity: .5; cursor: not-allowed; transform: none; }
.btn svg { width: 16px; height: 16px; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { border-color: var(--control); background: var(--card); }
}
/* Primary: the one lime mark. */
.btn.ink, .btn.lime, .studio-nav .btn.ink, .studio-claim .btn.ink, .studio-invite .btn.ink, .undo-toast .btn {
  background: var(--lime); border-color: transparent; color: var(--lime-ink); box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn.ink:hover, .btn.lime:hover, .studio-nav .btn.ink:hover, .studio-claim .btn.ink:hover, .studio-invite .btn.ink:hover, .undo-toast .btn:hover { background: var(--accent-hover); border-color: transparent; filter: none; }
}
.btn.ink:active, .btn.lime:active, .studio-claim .btn.ink:active { background: var(--accent-active); }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .btn.ghost:hover { background: var(--hover); border-color: transparent; } }
.btn.danger { background: var(--bad); border-color: transparent; color: #fff; box-shadow: none; }
:root[data-theme=dark] .btn.danger { background: #b4342b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .btn.danger { background: #b4342b; } }
@media (hover: hover) and (pointer: fine) { .btn.danger:hover { background: #9a1f15; border-color: transparent; } }
.icon-btn, .li-tools button, .li-handle { transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out), transform var(--dur-press) var(--ease-out); }
.icon-btn:active, .li-tools button:active { transform: scale(.94); }
.icon-btn { color: var(--muted); border-radius: 8px; }
@media (hover: hover) and (pointer: fine) {
  .icon-btn:hover, .li-tools button:hover, .li-handle:hover, .chip:hover { background: var(--hover); color: var(--ink); }
  .icon-btn.danger:hover, .li-tools button.danger:hover { background: var(--bad-bg); color: var(--bad); }
}
.li-tools button { color: var(--muted); }
.li-tools button[aria-pressed=true], .li-tools button[aria-expanded=true], .li-tools button.is-on { background: var(--selected); color: var(--ink); }
.li-handle { color: var(--control); }

/* ------------------------------- forms ------------------------------ */
label { font-size: 14px; font-weight: 550; color: var(--ink); }
input:not([type=checkbox]):not([type=color]):not([type=range]):not([type=file]), textarea, select {
  min-height: 44px; padding: 10px 13px; border: 1px solid var(--control); border-radius: var(--radius-md);
  background: var(--card); color: var(--ink); font-size: 15px;
  transition: border-color var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
}
textarea { min-height: 72px; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .85; }
input:focus, textarea:focus, select:focus,
input:not([type=checkbox]):not([type=color]):not([type=range]):not([type=file]):focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--selected); }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
input[readonly] { background: var(--sunken); }
.input-prefix { border: 1px solid var(--control); border-radius: var(--radius-md); background: var(--card); transition: border-color var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out); }
.input-prefix:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px var(--selected); }
.input-prefix input, .input-prefix input:focus { background: transparent !important; outline: none !important; }
.input-prefix span { color: var(--muted); }
.form-error { background: var(--bad-bg); color: var(--bad); border-radius: var(--radius-md); }
.form-ok { background: var(--ok-bg); color: var(--ok); border-radius: var(--radius-md); }
.a11y, .cross-tab-warning, .pricing-note { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-line); border-radius: var(--radius-md); }

/* Switch: ink track when on (lime in dark), white thumb, no layout shift. */
.switch span { background: var(--switch-off); transition: background-color var(--dur-state) var(--ease-out); }
.switch span::after { background: var(--thumb); box-shadow: 0 1px 2px rgba(0, 0, 0, .18); transition: transform var(--dur-state) var(--ease-out), background-color var(--dur-state) var(--ease-out); }
.switch input:checked + span { background: var(--switch-on); }
.switch input:checked + span::after { background: var(--thumb-on); }
.switch input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch input:active + span::after { transform: scale(.92); }
.switch input:checked:active + span::after { transform: translateX(18px) scale(.92); }

/* Segmented control: a sunken well with a white raised selection. */
.seg { background: var(--sunken); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 3px; gap: 2px; }
.seg button { border-radius: 7px; color: var(--muted); font-size: 13.5px; font-weight: 550; min-height: 32px; transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .seg button:hover { color: var(--ink); } }
.seg button[aria-checked=true], .seg button[aria-pressed=true], .seg[role=group] button[aria-pressed=true] {
  background: var(--raised); color: var(--ink); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-1), inset 0 1px 0 var(--specular);
}

/* ------------------------------- cards ------------------------------ */
.card, .link-item, .plan, .auth-card, .feature-main, .feature-side, .aud-list > li, .template, .font-grid button, .calc-out > div, .demo-controls {
  background: var(--card); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--specular);
}
.card { border-radius: var(--radius-lg); padding: 24px; margin-bottom: 16px; }
.card h2 { font-size: 16px; font-weight: 650; letter-spacing: -.012em; }
.card h3 { font-size: 14px; font-weight: 650; }
.link-item { border-radius: 14px; transition: box-shadow var(--dur-hover) var(--ease-out), opacity var(--dur-hover) var(--ease-out); }
.link-item.dragging { opacity: .6; box-shadow: 0 0 0 2px var(--ink); }
.li-body input.li-title, .li-body input.li-url { background: transparent; min-height: 0; }
.li-body input.li-url { color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .li-body input.li-title:hover, .li-body input.li-url:hover { background: var(--hover); } }
.li-body input.li-title:focus, .li-body input.li-url:focus { border-color: var(--control) !important; background: var(--card); box-shadow: 0 0 0 3px var(--selected) !important; }
.li-body textarea.li-text { background: var(--card); border-color: var(--control) !important; }
.li-drawer { background: var(--sunken); border: 1px solid var(--line); border-radius: 12px; }
.li-meta { color: var(--muted); }
.badge { background: var(--sunken); color: var(--ink-2); border: 1px solid var(--line); font-weight: 600; font-size: 12px; padding: 0 8px; }
.badge.hl { background: var(--selected); color: var(--ink); border-color: transparent; }
.badge.sched { background: var(--sunken); color: var(--ink-2); }
.badge.off { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
.add-card, .templates, .share-bar { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: inset 0 1px 0 var(--specular); }
.add-blocks .btn { border: 1px dashed var(--control); background: transparent; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .add-blocks .btn:hover { border-style: solid; border-color: var(--ink); background: var(--hover); } }
.faq-row, .gal-item, .ev-row { border: 1px solid var(--line); background: var(--sunken); border-radius: 12px; }
.danger-zone { border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.pro-badge { background: var(--lime); color: var(--lime-ink) !important; }
.pro-card.is-pro { border-color: var(--line-strong); }
.social-ico { background: var(--sunken); color: var(--ink); }
.avatar-edit { background: var(--ink); color: var(--lime); }
.color { border-color: var(--line-strong); }
.font-grid button { border-radius: 12px; }
.font-grid button[aria-pressed=true] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.theme-swatch[aria-pressed=true] .sw { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.sw { transition: transform var(--dur-state) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .template:hover, .font-grid button:hover { border-color: var(--control); }
}
.template:active, .theme-swatch:active .sw { transform: scale(.97); }
.empty, .empty-state { color: var(--muted); }

/* --------------------------- data views ----------------------------- */
.kpis { gap: 12px; }
.kpi { background: var(--sunken); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.kpi span { color: var(--muted); font-weight: 550; font-size: 13px; }
.kpi b { font-size: 28px; font-weight: 700; font-stretch: 105%; letter-spacing: -.03em; color: var(--ink); }
.delta.up, .trend b.up { color: var(--ok); }
.delta.down, .trend b.down { color: var(--bad); }
.trend b { color: var(--ink); }
.chart text { fill: var(--muted); font-size: 11px; }
.chart .grid { stroke: var(--line); }
.chart .b-views, .lg.views::before { fill: var(--chart-bar); background: var(--chart-bar); }
.chart .b-views:hover { fill: var(--chart-bar-hover); }
.chart .l-clicks { stroke: var(--ink); }
.chart .d-clicks, .lg.clicks::before { fill: var(--ink); background: var(--ink); }
.bar { background: var(--sunken); }
.bar i { background: var(--ink); }
.spark polyline { color: var(--ink); }
.sub-list, .sub-list li, .block-stats li, .msg-list li, .audiences, .faq-list details, .studio-faq { border-color: var(--line); }
.msg-list li.is-new .msg-head b::before { background: var(--accent-strong); }
.save-state.ok::before { color: var(--ok); }
.save-state.bad { color: var(--bad); }

/* --------------------------- toast & modal -------------------------- */
.toast, .undo-toast { background: var(--ink); color: var(--on-ink); border-radius: 12px; box-shadow: var(--shadow-3); }
.toast { transition: opacity var(--dur-state) var(--ease-out), transform var(--dur-state) var(--ease-out); }
.toast.bad { background: var(--bad); color: #fff; }
:root[data-theme=dark] .toast.bad { color: #1a0605; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .toast.bad { color: #1a0605; } }
.modal { background: var(--raised); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-3), inset 0 1px 0 var(--specular); }
.modal::backdrop { background: var(--scrim); }
.modal[open] { animation: fg-modal-in 220ms var(--ease-out); }
.modal[open]::backdrop { animation: fg-fade-in 220ms var(--ease-out); }
@keyframes fg-modal-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fg-fade-in { from { opacity: 0; } to { opacity: 1; } }
.qr-box canvas { border-color: var(--line); background: #fff; }

/* ------------------------------ editor ------------------------------ */
.dash-top { background: var(--card); border-bottom: 1px solid var(--line); backdrop-filter: none; box-shadow: inset 0 -1px 0 transparent; height: 64px; gap: 40px; padding: 0 28px; }
.dash-top .brand { font-size: 22px; }
.dash-top .brand svg { width: 30px; height: 30px; }
.tabs { position: relative; gap: 4px; }
.tabs button { border: 0; padding: 0 12px; font-size: 14px; font-weight: 550; color: var(--muted); transition: color var(--dur-hover) var(--ease-out); }
.tabs button:hover, .tabs button[aria-selected=true] { color: var(--ink); }
.tabs button:focus-visible { outline-offset: -4px; border-radius: 10px; }
/* Highlighter: one bar slides under the selected tab. Label weight never changes. */
.tabs::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 1px; height: 4px; pointer-events: none;
  background: linear-gradient(var(--lime) 0 3px, var(--accent-strong) 3px 4px);
  transform: translateX(var(--ind-x, 0px)) scaleX(var(--ind-w, 0)); transform-origin: 0 0;
}
:root[data-theme=dark] .tabs::after { height: 3px; background: var(--lime); }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .tabs::after { height: 3px; background: var(--lime); } }
.tabs.ind-ready::after { transition: transform var(--dur-move) var(--ease-out); }
.save-state { color: var(--muted); }
.share-bar { max-width: 1160px; padding: 10px 10px 10px 18px; }
.share-url a { font-weight: 650; }
.dash-body { padding-top: 28px; }
.workspace-heading > p { font-size: 13px; font-weight: 550; text-transform: none; letter-spacing: 0; color: var(--muted); margin: 0 0 6px; }
.workspace-heading h1 { font-size: 34px; font-weight: 700; font-stretch: 112%; letter-spacing: -.035em; line-height: 1.05; }
.workspace-heading > span { color: var(--muted); font-size: 14px; }
/* The preview is the object on the desk: no frame around it, the card lies on the paper. */
.dash-preview { background: transparent; padding: 0; border-radius: 0; }
.dash-preview > p { color: var(--muted); font-size: 13px; }
.phone, .dash-preview .phone { background: var(--card); border: 1px solid var(--line); padding: 8px; border-radius: 36px; box-shadow: var(--shadow-2), inset 0 1px 0 var(--specular); }
.dash-preview .phone { background: var(--raised); }
.phone-screen, .dash-preview .phone-screen { border-radius: 28px; color-scheme: light; box-shadow: 0 0 0 1px var(--line); }
.phone-screen { transition: opacity 160ms var(--ease-out); }
.phone-screen.is-settling { opacity: .72; transition: none; }
.preview-toggle { box-shadow: var(--shadow-3); }

/* ------------------------------ landing ----------------------------- */
.studio-nav { border-bottom: 1px solid var(--line); }
.studio-nav a:not(.brand):not(.btn) { font-size: 14px; font-weight: 550; color: var(--ink); }
.nav-account .btn { font-size: 14px; gap: 8px; height: 40px; }
.studio-copy h1 { font-weight: 700; font-stretch: 112%; letter-spacing: -.045em; line-height: .95; color: var(--ink); }
.studio-lede { color: var(--ink-2); font-size: 18px; line-height: 1.55; }
.studio-claim .btn { height: 52px; gap: 8px; font-size: 15px; padding: 0 20px; }
.claim-field { background: var(--card); border: 1px solid var(--control); border-radius: var(--radius-md); min-height: 52px; transition: border-color var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out); }
.claim-field:focus-within { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--selected); }
.claim-field > span { font-size: 15px; color: var(--muted); }
.claim-field input { font-size: 15px !important; font-weight: 600 !important; color: var(--ink); min-height: 0 !important; }
.studio-fine { font-size: 13px; color: var(--muted); }
.text-link { font-size: 14px; gap: 8px; }
/* The stage is the desk; the demo page is the white card lying on it. */
.studio-stage { background: var(--sunken); border: 1px solid var(--line); border-radius: var(--radius-xl); }
.stage-top { color: var(--ink); }
.stage-top span:last-child { color: var(--muted); }
.sample-label { background: var(--card); color: var(--ink-2); font-size: 12px; border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; }
.sample-dot { background: var(--accent-strong); }
.demo-page { border: 6px solid #fff; border-radius: 18px; box-shadow: 0 0 0 1px var(--line), var(--shadow-2); }
.demo-controls { border-radius: var(--radius-lg); }
.stage-note { color: var(--muted); }
.layout-choices button { border: 1px solid var(--line-strong); color: var(--ink); border-radius: 8px; transition: background-color var(--dur-hover) var(--ease-out), transform var(--dur-press) var(--ease-out); }
.layout-choices button:active { transform: scale(.97); }
.layout-choices button[aria-pressed=true] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.studio-swatch { transition: transform var(--dur-press) var(--ease-out); }
.studio-swatch:active { transform: scale(.94); }
.studio-swatch span { border-color: var(--line-strong); }
.studio-swatch[aria-pressed=true] { border-color: var(--ink); }
.section-intro h2, .studio-faq h2, .studio-invite h2, .pricing-head h1 { font-weight: 700; font-stretch: 112%; letter-spacing: -.035em; color: inherit; }
.section-intro > p:last-child, .feature-text p, .feature-notes p, .faq-list p { color: var(--muted); font-size: 15px; line-height: 1.6; }
.feature-main, .feature-side { border-radius: var(--radius-lg); }
.feature-text h3 { font-weight: 650; letter-spacing: -.025em; }
.feature-notes article > svg, .plan li svg { color: var(--accent-strong); }
.feature-notes h3 { font-weight: 650; }
.faq-list summary { font-size: 15px; font-weight: 550; }
.studio-invite { background: var(--card); color: var(--ink); border-top: 1px solid var(--line); }
.studio-footer p, .studio-footer a:not(.brand), .studio-footer > span { font-size: 13px; color: var(--muted); }
.studio-kicker { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--muted); font-weight: 550; }
.studio-kicker > span { background: var(--lime); box-shadow: 0 0 0 1px var(--accent-strong); }
.skip-link { background: var(--ink); color: var(--on-ink); }

/* ------------------------------ pricing ----------------------------- */
.billing-toggle { background: var(--sunken); border: 1px solid var(--line); }
.billing-toggle button { color: var(--muted); font-weight: 600; font-size: 14px; transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out); }
.billing-toggle button[aria-pressed=true] { background: var(--raised); color: var(--ink); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-1), inset 0 1px 0 var(--specular); }
.billing-toggle button span, .billing-toggle button[aria-pressed=true] span { color: var(--accent-strong); font-size: 12px; font-weight: 600; }
.plan { border-radius: var(--radius-lg); }
.plan-pro { border: 1px solid var(--line-strong); box-shadow: var(--shadow-2), inset 0 1px 0 var(--specular); position: relative; }
.plan-pro::before { content: ''; position: absolute; left: 30px; right: 30px; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--lime); }
.plan-price b { font-weight: 700; font-stretch: 105%; letter-spacing: -.04em; color: var(--ink); }
.plan-sub, .plan-price span { color: var(--muted); }
.calc { background: var(--sunken); border: 1px solid var(--line); border-radius: var(--radius-xl); }
.calc .muted { color: var(--muted); font-size: 14px; }
.calc-field { background: var(--card); border: 1px solid var(--control); border-radius: var(--radius-md); }
.calc-field:focus-within { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--selected); }
.calc .calc-field input { color: var(--ink) !important; font-variant-numeric: tabular-nums; }
.calc-out > div { border-radius: 12px; }
.calc-out dt { color: var(--muted); font-size: 13px; }
.calc-out dd { color: var(--ink); }

/* ------------------------------- auth ------------------------------- */
.auth-card { border-radius: var(--radius-xl); padding: 40px; box-shadow: inset 0 1px 0 var(--specular); border-color: var(--line-strong); }
.auth-card h1 { font-weight: 700; font-stretch: 112%; font-size: 32px; letter-spacing: -.035em; }
.auth-switch, .auth-forgot { color: var(--muted); }
.auth-switch a, .auth-forgot a { color: var(--ink); font-weight: 600; }

/* --------------------------- responsive ----------------------------- */
@media (max-width: 980px) {
  .dash-top { height: auto; gap: 10px; padding: 10px 16px 0; }
  .tabs { height: 44px; }
  .tabs button { padding: 0 10px; }
}
@media (max-width: 640px) {
  .card { padding: 18px 16px; }
  .auth-card { padding: 28px 20px; }
  .kpi { padding: 12px; }
  .kpi b { font-size: 22px; }
  .tabs button { font-size: 13.5px; padding: 0 8px; }
  .workspace-heading h1 { font-size: 28px; }
}

/* ---------------------- review pass (oil-ui round 1) ------------------ */
/* Elevation only goes up: panels inside a card are raised, never recessed. */
.kpi, .li-drawer, .faq-row, .gal-item, .ev-row { background: var(--raised); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--specular); }
.kpi b { font-size: 32px; }
.studio-stage, .calc { background: var(--card); box-shadow: inset 0 1px 0 var(--specular); }
.avatar-edit { background: #0e0f0c; color: var(--lime); box-shadow: 0 0 0 1px var(--line-strong); }
/* On phones Preview lives in the header, so it never covers the editor. */
@media (max-width: 980px) {
  .preview-toggle { position: static; transform: none; box-shadow: var(--shadow-1); left: auto; bottom: auto; z-index: auto; }
  .preview-toggle:active { transform: scale(.97); }
  .preview-toggle[aria-pressed=true] { background: var(--ink); color: var(--on-ink); border-color: transparent; }
  .undo-toast { bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) { .preview-toggle:active { transform: none; } }
/* The hero preview is a real scrolling page; its first screen ends on media, not on text. */
.demo-page { background: #fff; }
/* Card heads with a control: centred on the title block, flush with the padding. */
.card-head.row { align-items: center; }
.card-head.row .seg { margin: 0; }
.card > .card-head:last-child { margin-bottom: 0; }
/* Add chips are quiet hairline pills, not drop zones. */
.add-blocks .btn { border: 1px solid var(--line-strong); background: var(--card); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .add-blocks .btn:hover { border-style: solid; border-color: var(--control); background: var(--card); } }
.chart .chart-empty { font-size: 13px; fill: var(--muted); }
/* Row editors: fields run to the panel padding; the remove button sits in the label row. */
.faq-row, .ev-row { position: relative; grid-template-columns: minmax(0, 1fr); padding: 12px; }
.faq-row .icon-btn, .ev-row .icon-btn { grid-column: auto; grid-row: auto; position: absolute; top: 9px; right: 8px; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; }

.add-more { color: var(--ink); gap: 6px; }
.add-more::before { content: '+'; font-size: 16px; line-height: 1; color: var(--muted); }
.add-more[aria-expanded=true]::before { content: '\2212'; }
.an-actions { gap: 12px; }
.an-actions .seg { margin: 0; }
.sw-label { font-size: 13px; line-height: 18px; height: 18px; font-weight: 600; }
#demo-screen .tp-btn.tp-hl { font-size: 16px; }
.dash-top #logout { margin-right: -12px; }
#demo-screen .tp-btn { font-size: 14px; }
/* One lime stroke above the fold: the hero CTA. The nav CTA is an outline button. */
.studio-nav .btn.ink { background: var(--card); border: 1px solid var(--line-strong); color: var(--ink); box-shadow: var(--shadow-1); }
@media (hover: hover) and (pointer: fine) { .studio-nav .btn.ink:hover { background: var(--card); border-color: var(--control); } }
.pro-badge.static { background: var(--ink); color: var(--on-ink) !important; }
.avatar-edit { color: #fff; }
/* The hero phone's bezel is one step up from the surface, not a white glow in dark mode. */
.demo-page { border-color: var(--raised); background: var(--raised); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-2); }
/* Block editors run the full card width: the toggle sits in the title row only. */
.link-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; align-items: start; }
.link-item > .li-handle { grid-area: 1 / 1; }
.link-item > .li-body { grid-area: 1 / 2 / 2 / 4; }
.link-item > .switch { grid-area: 1 / 3; position: relative; z-index: 1; }
.li-body > input.li-title:first-child, .li-body > textarea.li-title:first-child { width: calc(100% - 60px) !important; }
.plan-pro { box-shadow: inset 0 1px 0 var(--specular); border-color: var(--control); }
.studio-features { padding-top: 64px; }
.avatar-edit { box-shadow: 0 0 0 1px var(--control); }
/* Getting started: a quiet checklist; ink ticks, one thin progress rule. */
.setup .card-head { margin-bottom: 12px; }
.setup-bar { height: 4px; border-radius: 99px; background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; margin-bottom: 8px; }
.setup-bar i { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transition: transform var(--dur-move) var(--ease-out); }
.setup-list { list-style: none; margin: 0; padding: 0; }
.setup-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.setup-list li:first-child { border-top: 0; }
.setup-tick { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--control); display: grid; place-items: center; }
.setup-list li.is-done .setup-tick { background: var(--ink); box-shadow: none; color: var(--on-ink); }
.setup-tick svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.setup-text { display: flex; flex-direction: column; min-width: 0; }
.setup-text b { font-size: 14.5px; font-weight: 600; }
.setup-text small { font-size: 13px; }
.setup-list li.is-done .setup-text b { color: var(--muted); font-weight: 550; }
@media (max-width: 480px) { .setup-list li { grid-template-columns: 24px minmax(0, 1fr); } .setup-list li .btn { grid-column: 2; justify-self: start; } }
@media (prefers-reduced-motion: reduce) { .setup-bar i { transition: none; } }
/* Two-factor setup. */
.tfa-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tfa-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 14px; font-size: 14px; }
.tfa-qr { margin-top: 10px; width: 176px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.tfa-qr svg { display: block; width: 100%; height: auto; }
.tfa-secret, .tfa-codes code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 14px; letter-spacing: .04em; background: var(--sunken); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; overflow-wrap: anywhere; }
.tfa-codes { list-style: none; display: grid; grid-template-columns: repeat(2, max-content); gap: 8px 12px; margin: 12px 0 16px; padding: 0; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .tfa-codes { grid-template-columns: max-content; } }
.signout-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.signout-row p { margin: 0; }
/* Nothing below 12px. */
.add-form input { font-size: 14px !important; }
.stage-top { font-size: 13px; }
.share-url { font-size: 13px; }
@media (max-width: 640px) { .save-state, #retry-saves { font-size: 12px; } }
@media (max-width: 480px) { .nav-account .btn, .studio-nav .btn.ink { font-size: 13px; padding: 0 12px; } .stage-top { font-size: 12px; } }
/* The Pro plan's highlighter stroke runs edge to edge, clipped by the card. */
.plan-pro { overflow: hidden; }
.plan-pro::before { left: 0; right: 0; top: 0; height: 4px; border-radius: 0; }
/* One left edge for the landing: hero, features and questions line up. */
.studio-features { max-width: 1440px; }
.studio-faq { max-width: 1344px; }
.pricing .studio-faq { max-width: 872px; }
.chart text { font-size: 12px; }
@media (max-width: 980px) {
  .tabs { scrollbar-width: none; scroll-padding-inline: 16px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button:last-child { margin-right: var(--tail, 24px); }
  .tabs.more-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
  .tabs.more-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px); mask-image: linear-gradient(90deg, transparent, #000 12px); }
  .tabs.more-l.more-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 56px), transparent); }
}
/* The editor header sits on the same column as the content below it. */
@media (min-width: 981px) {
  .dash-top { padding-left: max(24px, calc((100% - 1208px) / 2 + 24px)); padding-right: max(24px, calc((100% - 1208px) / 2 + 24px)); gap: 32px; }
}
.bar { height: 6px; box-shadow: inset 0 0 0 1px var(--line); }
.lg.views::before { box-shadow: inset 0 0 0 1px var(--control); }
/* On a phone's first screen there is one lime action: the hero's. */
@media (max-width: 760px) {
  .studio-nav .btn.ink { background: var(--card); border: 1px solid var(--line-strong); color: var(--ink); box-shadow: var(--shadow-1); }
}

/* --------------------------- reduced motion ------------------------- */
@media (prefers-reduced-motion: reduce) {
  .btn:active, .icon-btn:active, .li-tools button:active, .template:active, .theme-swatch:active .sw,
  .layout-choices button:active, .studio-swatch:active { transform: none; }
  .tabs.ind-ready::after { transition: none; }
  .modal[open], .modal[open]::backdrop { animation: none; }
}