/* BuildableOS — generated by scripts/build-os.mjs from design/BuildableOS/bits. Edit the bits, not this file. Scoped to body.ws. */
@keyframes vs-label-enter { 0% { opacity: 0; transform-origin: 0; filter: blur(.5px); transform: translate(4px) scale(.96); } to { opacity: 1; transform-origin: 0; filter: blur(0); transform: translate(0) scale(1); } }
@keyframes vs-label-exit  { 0% { opacity: 1; transform-origin: 0; filter: blur(0); transform: translate(0) scale(1); } to { opacity: 0; transform-origin: 0; filter: blur(4px); transform: translate(-8px) scale(.64); } }
@keyframes vs-option-enter { 0% { opacity: 0; filter: blur(.5px); transform: scale(.96); } to { opacity: 1; filter: blur(0); transform: scale(1); } }
@keyframes urlbar-label-enter { 0% { opacity: 0; filter: blur(4px); transform: translateY(6px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }
@keyframes urlbar-label-exit  { 0% { opacity: 1; filter: blur(0); transform: translateY(0); } to { opacity: 0; filter: blur(4px); transform: translateY(-6px); } }
@keyframes urlbar-icon-enter  { 0% { opacity: 0; filter: blur(4px); transform: scale(0); } to { opacity: 1; filter: blur(0); transform: scale(1); } }
@keyframes enter { from { opacity: var(--enter-opacity, 1); transform: translate3d(var(--enter-x, 0), var(--enter-y, 0), 0) scale3d(var(--enter-scale, 1), var(--enter-scale, 1), 1); } }
@keyframes exit { to { opacity: var(--exit-opacity, 1); transform: translate3d(var(--exit-x, 0), var(--exit-y, 0), 0) scale3d(var(--exit-scale, 1), var(--exit-scale, 1), 1); } }
@keyframes pulse { 50% { opacity: .5; } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes checkbox-draw-check { 0% { stroke-dashoffset: 12px; } to { stroke-dashoffset: 0; } }
@keyframes checkbox-draw-minus { 0% { stroke-dashoffset: 7px; } to { stroke-dashoffset: 0; } }
@keyframes heartbeat { 0% { transform: scale(1); } 10% { transform: scale(1.07); } 20% { transform: scale(1.02); } 40% { transform: scale(1.02); } 50% { transform: scale(1.06); } 60% { transform: scale(1); } }
@keyframes badge-pop { 0% { transform: scale(1); } 20% { transform: scale(.82); } 60% { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes status-dot-ping { 0% { opacity: 1; transform: scale(1); } 75%, to { opacity: 0; transform: scale(2.667); } }
@keyframes fan-rise { 0% { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@keyframes chip-rise { 0% { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
body.ws {
/* ══ 00-tokens.css ══ */
/* ═══════════════════════════════════════════════════════════════════════════
   BuildableOS · bits/00-tokens.css — THE VALUES
   Provenance: measured 1:1 from Lovable's compiled stylesheet (.dark block) on 2026-09-03
   (BuildableOS-Workspace-Vector-Design/measurements/globals-*.css). Neutral ramp = one hue (107, warm),
   lightness steps make hierarchy. Accent = OUR cobalt (Lovable's is oklch(52.43% .2396 264.41)).
   Font: Lovable ships "Camera Plain Variable" (proprietary) → we use Inter; medium weight = 480 there, 500 here.
   ═══════════════════════════════════════════════════════════════════════════ */
& {
  --hue: 107;                      /* warm neutral (Lovable). data-tone="cool" flips to 262. */
  --chroma: .002;
  /* backgrounds — 6 steps, exact */
  --bg-depth:      oklch(20.42% var(--chroma) var(--hue));   /* deepest well (inputs on cards) */
  --bg-base:       oklch(23%    var(--chroma) var(--hue));   /* page */
  --bg-primary:    oklch(24.74% var(--chroma) var(--hue));   /* sidebar / chat column */
  --bg-secondary:  oklch(27.2%  var(--chroma) var(--hue));   /* CARD */
  --bg-tertiary:   oklch(30%    var(--chroma) var(--hue));   /* raised on card */
  --bg-quaternary: oklch(32.8%  var(--chroma) var(--hue));
  --bg-translucent: oklch(56.74% .009 106.68 / .16);         /* the neutral BUTTON fill (Share) */
  --bg-muted:       oklch(56.74% .009 106.68 / .08);         /* hover wash / iframe bg */
  --bg-inverse:     oklch(100% 0 0 / .96);                    /* send button */
  --bg-scrim:       oklch(0% 0 0 / .8);
  /* foregrounds — exact */
  --fg-primary:    oklch(100% 0 0);
  --fg-secondary:  oklch(90.95% var(--chroma) var(--hue));   /* idle nav text, row values */
  --fg-tertiary:   oklch(72.34% var(--chroma) var(--hue));   /* group headers, subtitles, "Thought for 3s" */
  --fg-quaternary: oklch(56.74% var(--chroma) var(--hue));
  --fg-inverse:    oklch(23.85% .004 106.68);
  /* semantic (Lovable exact) */
  --bg-accent-lv:  oklch(52.43% .2396 264.41);  --fg-accent-lv: oklch(70.62% .1391 264.41);
  --bg-special:    oklch(58.99% .2523 294.88);  --fg-special:   oklch(76.61% .1614 294.88);   /* Upgrade purple */
  --bg-destructive: oklch(58.53% .2203 26.56);  --fg-destructive: oklch(76.15% .1564 26.56);
  --bg-positive:   oklch(54.42% .1689 138.23);  --fg-positive:  oklch(72.92% .155 138.23);
  --bg-attention:  oklch(58.01% .1819 40.04);   --fg-attention: oklch(75.82% .1594 40.04);
  --bg-highlight:  oklch(59.06% .2244 359.16);  --fg-highlight: oklch(76.84% .1539 359.16);   /* project icon pink */
  /* OUR accent: cobalt #5271FF */
  --accent:        oklch(58% .21 268);
  --accent-hover:  oklch(62% .21 268);
  --accent-tr:     oklch(58% .21 268 / .20);
  --accent-ring:   oklch(58% .21 268 / .40);
  --fg-accent:     oklch(72% .14 268);
  /* borders — translucent, never a solid 1px */
  --border-default: .5px;                                    /* THE hairline */
  --border-translucent: oklch(55% var(--chroma) var(--hue) / .16);
  --row-divider:        oklch(55% var(--chroma) var(--hue) / .40);   /* settings-row separator */
  --border-focus:       var(--accent-ring);
  /* glow = hover/pressed washes */
  --glow-neutral-hover:   oklch(100% 0 0 / .04);
  --glow-neutral-pressed: oklch(100% 0 0 / .08);
  --glow-on-accent-hover: oklch(100% 0 0 / .08);
  --glow-on-accent-pressed: oklch(100% 0 0 / .16);
  --glow-on-inverse-hover: oklch(100% 0 0 / .4);
  /* shadow stacks — exact (ring + base ring + 1px + drops at 8%) */
  --ring-alpha: .32;
  --ring-rgb: 119, 119, 113;
  --surface-base: var(--bg-primary);
  --shadow-surface-xxs: 0 0 0 var(--border-default) rgba(var(--ring-rgb), var(--ring-alpha)), 0 0 0 var(--border-default) var(--surface-base), 0 0 0 calc(var(--border-default) * 2) #00000029, 0 1px 0 0 #00000014;
  --shadow-surface-xs:  0 0 0 var(--border-default) rgba(var(--ring-rgb), var(--ring-alpha)), 0 0 0 var(--border-default) var(--surface-base), 0 0 0 calc(var(--border-default) * 2) #00000029, 0 1.5px 0 0 #00000014, 0 1.5px 1px -.5px #00000014;
  --shadow-surface-sm:  var(--shadow-surface-xs), 0 3.5px 3px -1.5px #00000014;
  --shadow-surface-md:  var(--shadow-surface-sm), 0 6.5px 6px -3px #00000014;
  --shadow-surface-lg:  var(--shadow-surface-md), 0 12.5px 12px -6px #00000014;
  --shadow-surface-xl:  var(--shadow-surface-lg), 0 24.5px 24px -12px #00000014;
  --shadow-floating-sm: 0 0 0 var(--border-default) rgba(var(--ring-rgb), var(--ring-alpha)), 0 0 0 var(--border-default) var(--surface-base), 0 0 0 calc(var(--border-default) * 2) #0000003d, 0 1.5px 0 0 #0000001f, 0 1.5px 1px -.5px #0000001f, 0 3.5px 3px -1.5px #0000001f, 0 6.5px 6px -3px #0000001f, 0 12.5px 12px -6px #0000001f, 0 24.5px 24px -12px #0000001f;
  --shadow-floating-md: 0 0 0 var(--border-default) rgba(var(--ring-rgb), calc(var(--ring-alpha) * 1.125)), 0 0 0 var(--border-default) var(--surface-base), 0 0 0 calc(var(--border-default) * 2) #00000047, 0 1.5px 0 0 #0000001f, 0 1.5px 1px -.5px #0000001f, 0 3.5px 3px -1.5px #0000001f, 0 6.5px 6px -3px #0000001f, 0 12.5px 12px -6px #0000001f, 0 24.5px 24px -12px #0000001f, 0 48.5px 48px -24px #0000001f;
  --shadow-button-neutral: inset 0 var(--border-default) 0 0 #ffffff29, inset 0 calc(-1 * var(--border-default)) 0 0 #ffffff0a, inset 0 0 0 var(--border-default) #ffffff29, 0 2px 2px -1px #0000001f, 0 4px 4px -2px #0000001f;
  --shadow-button-accent:  inset 0 var(--border-default) 0 0 #ffffff29, inset 0 calc(-1 * var(--border-default)) 0 0 #ffffff14, inset 0 0 0 var(--border-default) #ffffff52, 0 2px 2px -1px #091a483d, 0 4px 4px -2px #091a483d;
  --shadow-button-special: inset 0 var(--border-default) 0 0 #ffffff29, inset 0 calc(-1 * var(--border-default)) 0 0 #ffffff14, inset 0 0 0 var(--border-default) #ffffff52, 0 2px 2px -1px #2b164d3d, 0 4px 4px -2px #2b164d3d;
  --shadow-button-destructive: inset 0 var(--border-default) 0 0 #ffffff29, inset 0 calc(-1 * var(--border-default)) 0 0 #ffffff14, inset 0 0 0 var(--border-default) #ffffff52, 0 2px 2px -1px #440b0c3d, 0 4px 4px -2px #440b0c3d;
  --shadow-button-inverse: inset 0 var(--border-default) 0 0 #ffffff29, inset 0 calc(-1 * var(--border-default)) 0 0 #ffffff0a, inset 0 0 0 var(--border-default) #fff, 0 2px 2px -1px #0000001f, 0 4px 4px -2px #0000001f;
  --shadow-button-pressed-neutral:  inset 0 0 0 var(--border-default) #7777718f;
  --shadow-button-pressed-semantic: inset 0 0 0 var(--border-default) #ffffff52;
  --shadow-input-base: inset 0 var(--border-default) 0 0 #ffffff14, inset 0 2px 2px -1px #00000014, inset 0 4px 4px -2px #00000014, 0 var(--border-default) 0 0 #0000001f;
  --shadow-input-ring: inset 0 0 0 var(--border-default) oklch(55% .002 107 / .4);   /* the search field's hairline */
  --shadow-switch-track: inset 0 2px 2px -1px #00000014, inset 0 4px 4px -2px #00000014, inset 0 0 0 var(--border-default) #ffffff29;
  --shadow-switch-thumb: inset 0 var(--border-default) 0 0 #fff, inset 0 calc(-1 * var(--border-default)) 0 0 #fffc, inset 0 0 0 1px #fff, 0 2px 2px -1px #0000001f, 0 4px 4px -2px #0000001f, 0 0 0 var(--border-default) #0000001f;
  /* radii — exact */
  --r-pill: 2147483647px;   /* Lovable literally uses this */
  --r-nav: 8px;             /* sidebar item, go-back, inputs, secondary buttons (View usage) */
  --r-input: 8px;
  --r-icon-box: 12px;       /* 40px project icon */
  --r-card: 16px;           /* settings card */
  --r-surface: 20px;        /* composer / big panels */
  --r-thumb: 10px;          /* 20px switch */
  /* sizes — exact */
  --control-h: 28px;        /* pill buttons in chrome + composer (Share, Build, send) */
  --control-h-md: 32px;     /* sidebar items, go back, search, "View usage" */
  --control-pad-x: 9px;     /* pill button side padding */
  --icon: 16px;             /* button icon (size-4) */
  --icon-nav: 20px;         /* sidebar icon (size-5) */
  --sidebar-w: 273px;
  --sidebar-pad: 12px;
  --content-x: 320px;       /* content column starts here (sidebar 273 + 47) */
  --content-max: 840px;
  /* type — exact */
  --font: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --fs-1: 16px;  --lh-1: 24px;    /* h2 "Project details", body copy */
  --fs-2: 14px;  --lh-2: 21px;    /* EVERYTHING in the chrome: buttons, nav, rows, labels */
  --fs-3: 12px;  --lh-3: 16px;    /* badges */
  --fs-h: 20px;  --lh-h: 30px;    /* page title */
  --fw: 400; --fw-medium: 500;    /* Lovable 480 */
  /* motion — exact */
  --t-fast: .15s;                                   /* default transition duration */
  --ease-default: cubic-bezier(.4, 0, .2, 1);       /* default timing */
  --ease-out: cubic-bezier(0, 0, .2, 1);            /* select/nav color transitions */
  --ease-out-quart: cubic-bezier(.165, .84, .44, 1);
  --ease-out-expo: cubic-bezier(.19, 1, .22, 1);
  --ease-overshoot: cubic-bezier(.34, 1.4, .64, 1); /* badge pop */
  --ease-layout: cubic-bezier(.32, .72, 0, 1); --t-layout: 340ms;   /* ours, kept for size/position changes */
}
&[data-tone="cool"] { --hue: 262; --chroma: .006; }


/* ══ 01-button.css ══ */
/* BuildableOS · bits/01-button.css — BUTTONS
   Measured (Share / Upgrade / Publish / Build / send / chips / View usage / Go back):
   pill: h 28, padding 4px 9px, radius full, 14px/21px weight 400, gap 6, icon 16.
   neutral fill = page bg + linear-gradient(--bg-translucent) overlay → FLAT, no shadow at rest.
   :active → opacity .8 (btn-chassis). :disabled → opacity .5. Hit-slop: ::after inset -6px.
   secondary (View usage): h 32, padding 6px 10px, radius 8, transparent, hairline via shadow.
   hover = + glow wash (white 4%), pressed = white 8%. Colour transitions 150ms ease-out. */
.btn { position: relative; isolation: isolate; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--control-h); padding: 4px var(--control-pad-x); border: 0; border-radius: var(--r-pill);
  font: var(--fw) var(--fs-2)/var(--lh-2) var(--font); color: var(--fg-primary); white-space: nowrap; user-select: none; cursor: pointer;
  background-color: var(--bg-base); background-image: linear-gradient(var(--bg-translucent), var(--bg-translucent));
  outline: 2px solid transparent; outline-offset: 2px;
  transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); }
.btn::after { content: ""; position: absolute; inset: -6px; }               /* hit slop */
.btn:hover { background-image: linear-gradient(var(--glow-neutral-hover), var(--glow-neutral-hover)), linear-gradient(var(--bg-translucent), var(--bg-translucent)); }
.btn:active { opacity: .8; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn:focus-visible { outline-color: var(--border-focus); }
.btn svg { width: var(--icon); height: var(--icon); flex: none; pointer-events: none; }
.btn.icon { width: var(--control-h); padding: 0; aspect-ratio: 1; }
/* ── CALL TO ACTION variants ── */
.btn.accent   { background: var(--accent); }                       .btn.accent:hover   { background-image: linear-gradient(var(--glow-on-accent-hover), var(--glow-on-accent-hover)); }
.btn.special  { background: var(--bg-special); }                   .btn.special:hover  { background-image: linear-gradient(var(--glow-on-accent-hover), var(--glow-on-accent-hover)); }
.btn.inverse  { background: var(--bg-inverse); color: var(--fg-inverse); }  .btn.inverse:hover { background: #fff; }
.btn.danger   { background-color: transparent; background-image: none; color: var(--fg-destructive); }
.btn.danger:hover { background-image: none; background-color: oklch(58.53% .2203 26.56 / .16); color: #fff; }
.btn.destructive { background: var(--bg-destructive); }
.btn.ghost    { background: transparent; }                         .btn.ghost:hover { background: var(--glow-neutral-hover); }
/* raised version (BuildableOS physical) — use sparingly: primary CTAs on surfaces, not in the chrome */
.btn.raised { box-shadow: var(--shadow-button-neutral); }  .btn.raised.accent { box-shadow: var(--shadow-button-accent); }
.btn.raised.special { box-shadow: var(--shadow-button-special); } .btn.raised.inverse { box-shadow: var(--shadow-button-inverse); }
.btn.raised:active { box-shadow: var(--shadow-button-pressed-neutral); opacity: 1; }
/* ── secondary / settings button (View usage): 32px, radius 8, hairline ── */
.btn.md { height: var(--control-h-md); padding: 6px 10px; border-radius: var(--r-nav); background: transparent; box-shadow: var(--shadow-input-ring); }
.btn.md:hover { background: var(--glow-neutral-hover); }
/* ── go back (sidebar): 32px, radius 8, no fill, icon 20 ── */
.btn.plain { height: var(--control-h-md); padding: 6px 10px; border-radius: var(--r-nav); background: transparent; }
.btn.plain svg { width: var(--icon-nav); height: var(--icon-nav); }
.btn.plain:hover { background: var(--glow-neutral-hover); }
/* ── chip / suggestion (Build a real app): the neutral pill, in a 6px-gap row ── */
.chiprow { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 8px; }
.chiprow::-webkit-scrollbar { display: none; }
/* ── icon-only pill 24px (message actions) ── */
.btn.xs { height: 24px; width: 24px; padding: 0; border-radius: 4px; background: transparent; color: var(--fg-tertiary); }
.btn.xs:hover { color: var(--fg-secondary); background: var(--glow-neutral-hover); }
.btn.xs svg { width: 20px; height: 20px; }


/* ══ 02-input.css ══ */
/* BuildableOS · bits/02-input.css — INPUTS
   Measured (Search settings): h 32, radius 8, transparent bg, 14px, icon 16 at left, gap 6,
   shadow = --shadow-input-base + hairline ring oklch(55% .002 107/.4) inset. Composer textarea: 16px/24px, no chrome.
   Select (Homepage): h 28 pill, padding 0 4px, 14px, chevron right, transition-colors 150ms ease-out. */
.field { display: flex; align-items: center; gap: 6px; height: var(--control-h-md); padding: 0 10px; border-radius: var(--r-input);
  background: transparent; box-shadow: var(--shadow-input-base), var(--shadow-input-ring); color: var(--fg-primary);
  transition: box-shadow var(--t-fast) var(--ease-out); }
.field:focus-within { box-shadow: var(--shadow-input-base), 0 0 0 1px var(--accent-ring), 0 0 0 3px var(--accent-tr); }
.field svg { width: var(--icon); height: var(--icon); color: var(--fg-tertiary); flex: none; }
.field input, .input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--fg-primary); font: var(--fw) var(--fs-2)/var(--lh-2) var(--font); outline: none; }
.field input::placeholder, .input::placeholder, textarea::placeholder { color: var(--fg-tertiary); }
/* stand-alone input / textarea */
input.input, textarea.input, select.input { display: block; width: 100%; height: var(--control-h-md); padding: 0 10px; border-radius: var(--r-input); border: 0;
  background: var(--bg-depth); color: var(--fg-primary); box-shadow: var(--shadow-input-base); font: var(--fw) var(--fs-2)/var(--lh-2) var(--font);
  transition: box-shadow var(--t-fast) var(--ease-out); }
textarea.input { height: auto; min-height: 72px; padding: 8px 10px; resize: vertical; line-height: var(--lh-2); }
input.input:focus, textarea.input:focus, select.input:focus { outline: none; box-shadow: var(--shadow-input-base), 0 0 0 1px var(--accent-ring), 0 0 0 3px var(--accent-tr); }
input.input.mono, textarea.input.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
/* select: native element, our chrome (chevron = Lovable's 24-grid path) */
select.input { appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b8b8b4'%3E%3Cpath d='M11.5263 15.582C11.8209 15.8223 12.2556 15.8049 12.5302 15.5303L17.5302 10.5303C17.8231 10.2374 17.8231 9.76256 17.5302 9.46967C17.2373 9.17678 16.7624 9.17678 16.4695 9.46967L11.9999 13.9393L7.53022 9.46967C7.23733 9.17678 6.76245 9.17678 6.46956 9.46967C6.17667 9.76256 6.17667 10.2374 6.46956 10.5303L11.4696 15.5303L11.5263 15.582Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 16px 16px; }
select.input option { background: var(--bg-secondary); color: var(--fg-primary); }
select.input.pill { height: var(--control-h); border-radius: var(--r-pill); background-color: var(--bg-base); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M11.5263 15.582C11.8209 15.8223 12.2556 15.8049 12.5302 15.5303L17.5302 10.5303C17.8231 10.2374 17.8231 9.76256 17.5302 9.46967C17.2373 9.17678 16.7624 9.17678 16.4695 9.46967L11.9999 13.9393L7.53022 9.46967C7.23733 9.17678 6.76245 9.17678 6.46956 9.46967C6.17667 9.76256 6.17667 10.2374 6.46956 10.5303L11.4696 15.5303L11.5263 15.582Z'/%3E%3C/svg%3E"), linear-gradient(var(--bg-translucent), var(--bg-translucent)); box-shadow: none; text-align: center; }


/* ══ 03-switch.css ══ */
/* BuildableOS · bits/03-switch.css — SWITCH / CHECKBOX
   Measured (Project monitoring toggle, off): track 32×20, radius 10, bg --bg-translucent,
   shadow: inset 0 2px 2px -1px #00000014, inset 0 4px 4px -2px #00000014, inset 0 0 0 .5px #ffffff29.
   Thumb: white, --shadow-switch-thumb. On: track = accent. Travel 12px, 150ms default ease. */
.switch { position: relative; display: inline-block; width: 32px; height: 20px; flex: none; cursor: pointer; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch .track { position: absolute; inset: 0; border-radius: var(--r-thumb); background: var(--bg-translucent); box-shadow: var(--shadow-switch-track);
  transition: background-color var(--t-fast) var(--ease-default), box-shadow var(--t-fast) var(--ease-default); }
.switch .thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-switch-thumb);
  transition: transform var(--t-fast) var(--ease-default); }
.switch input:checked ~ .track { background: var(--accent); box-shadow: inset 0 0 0 var(--border-default) #ffffff52; }
.switch input:checked ~ .thumb { transform: translateX(12px); }
.switch input:focus-visible ~ .track { box-shadow: var(--shadow-switch-track), 0 0 0 3px var(--accent-tr); }
.switch input:disabled ~ * { opacity: .5; cursor: not-allowed; }
/* checkbox: 16px, radius 4, same input well; checked = accent + white check (draw-in 150ms) */
.check { display: inline-flex; align-items: center; gap: 8px; font: var(--fw) var(--fs-2)/var(--lh-2) var(--font); color: var(--fg-secondary); cursor: pointer; user-select: none; }
.check input { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0; border-radius: 4px; background: var(--bg-depth); box-shadow: var(--shadow-input-base), var(--shadow-input-ring); cursor: pointer; display: grid; place-items: center;
  transition: background-color var(--t-fast) var(--ease-default), box-shadow var(--t-fast) var(--ease-default); }
.check input::before { content: ""; width: 10px; height: 10px; background: #fff; clip-path: polygon(14% 44%, 0 62%, 40% 100%, 100% 20%, 86% 6%, 40% 70%); transform: scale(0); transition: transform var(--t-fast) var(--ease-overshoot); }
.check input:checked { background: var(--accent); box-shadow: inset 0 0 0 var(--border-default) #ffffff52; }
.check input:checked::before { transform: scale(1); }
.check input:focus-visible { box-shadow: var(--shadow-input-base), 0 0 0 3px var(--accent-tr); }


/* ══ 04-nav.css ══ */
/* BuildableOS · bits/04-nav.css — SIDEBAR NAVIGATION (settings shell)
   Measured: sidebar 273 wide, padding 4px 12px 0, transparent on the page bg. Go back at (8,16) 32 tall.
   Search 32 tall, full width. Group header: 32 tall, padding 0 8px, 14px --fg-tertiary; groups 16px apart.
   Item: 32 tall, radius 8, padding 4px 4px 4px 6px, gap 8, icon 20, 14px; idle --fg-secondary;
   active bg oklch(100% 0 0 / .08) + --fg-primary; no glider, no shadow. Badge after label: 12px/480 --fg-special. */
.sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); padding: 16px var(--sidebar-pad) 12px 8px; display: flex; flex-direction: column; gap: 0;
  background: var(--bg-base); overflow-y: auto; scrollbar-width: none; z-index: 40; }
.sidebar::-webkit-scrollbar { display: none; }
.sidebar .sb-top { display: flex; flex-direction: column; gap: 16px; padding-left: 4px; }
.sidebar .sb-nav { display: flex; flex-direction: column; gap: 16px; padding: 12px 0 0 4px; }
.sb-group { display: flex; flex-direction: column; gap: 0; }
.sb-group > .sb-h { height: 32px; display: flex; align-items: center; padding: 0 8px; font: var(--fw) var(--fs-2)/var(--lh-2) var(--font); color: var(--fg-tertiary); }
.sb-item { display: flex; align-items: center; gap: 8px; height: 32px; padding: 4px 4px 4px 6px; border-radius: var(--r-nav); border: 0; width: 100%; text-align: left;
  background: transparent; color: var(--fg-secondary); font: var(--fw) var(--fs-2)/var(--lh-2) var(--font); cursor: pointer; text-decoration: none;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
.sb-item svg { width: var(--icon-nav); height: var(--icon-nav); flex: none; }
.sb-item:hover { background: var(--glow-neutral-hover); color: var(--fg-primary); }
.sb-item.active { background: oklch(100% 0 0 / .08); color: var(--fg-primary); }
.sb-item .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-item .badge { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px; border-radius: 4px; font: var(--fw-medium) var(--fs-3)/16px var(--font);
  color: var(--fg-special); background: oklch(58.99% .2523 294.88 / .2); }
.sb-item .badge.neutral { color: var(--fg-tertiary); background: var(--bg-muted); }
.sb-item .badge.accent { color: var(--fg-accent); background: var(--accent-tr); }
.sb-item[hidden] { display: none; }
.sb-group.empty { display: none; }
.sidebar .sb-foot { margin-top: auto; padding: 12px 0 0 4px; display: flex; flex-direction: column; gap: 2px; }
/* the "identity" item (server / workspace): 20px round icon in place of the glyph */
.sb-item .ava { width: 20px; height: 20px; border-radius: 6px; object-fit: cover; flex: none; display: grid; place-items: center; font-size: 11px; font-weight: 500; background: var(--bg-tertiary); color: var(--fg-primary); overflow: hidden; }
.sb-item .ava img { width: 100%; height: 100%; object-fit: cover; }


/* ══ 05-card.css ══ */
/* BuildableOS · bits/05-card.css — SETTINGS CARD + ROWS + PAGE HEADER
   Measured: content starts x=320 (max 840). Title row: 40px icon box (radius 12, tinted bg /.2, glyph 20),
   title 20px/30px weight 480 --fg-primary, subtitle 14px --fg-tertiary. Section h2 16px/24px 480, 16px above card.
   Card: bg --bg-secondary (27.2%), radius 16, padding 20px 24px, shadow --shadow-surface-xs (measured ring alpha .4).
   Row: label 14px --fg-primary left, value 14px --fg-secondary right; padding 20px 0 (first 0 top, last 0 bottom);
   divider .5px solid oklch(55% .002 107 / .4). Description under a row title: 16px/24px? no — 14px --fg-tertiary. */
.page { padding: 32px 24px 64px var(--content-x); max-width: calc(var(--content-x) + var(--content-max) + 24px); }
.page-head { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.page-head .icon-box { width: 40px; height: 40px; border-radius: var(--r-icon-box); display: grid; place-items: center; background: var(--accent-tr); color: var(--fg-accent); overflow: hidden; flex: none; }
.page-head .icon-box svg { width: 20px; height: 20px; } .page-head .icon-box img { width: 100%; height: 100%; object-fit: cover; }
.page-head h1 { margin: 0; font: var(--fw-medium) var(--fs-h)/var(--lh-h) var(--font); color: var(--fg-primary); letter-spacing: 0; }
.page-head .sub { font: var(--fw) var(--fs-2)/var(--lh-2) var(--font); color: var(--fg-tertiary); }
.sec-h2 { margin: 0 0 16px; font: var(--fw-medium) var(--fs-1)/var(--lh-1) var(--font); color: var(--fg-primary); display: flex; align-items: center; gap: 8px; }
.sec-h2 + .sec-sub { margin: -10px 0 16px; font: var(--fw) var(--fs-2)/var(--lh-2) var(--font); color: var(--fg-tertiary); }
.card { background: var(--bg-secondary); border-radius: var(--r-card); padding: 20px 24px; box-shadow: var(--shadow-surface-xs); margin-bottom: 40px; --surface-base: var(--bg-primary); }
.card.sm { padding: 16px 20px; margin-bottom: 24px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; border-bottom: var(--border-default) solid var(--row-divider); }
.row:first-child { padding-top: 0; } .row:last-child { padding-bottom: 0; border-bottom: 0; }
.row .k { font: var(--fw) var(--fs-2)/var(--lh-2) var(--font); color: var(--fg-primary); flex: 1; min-width: 0; }
.row .k .d { margin-top: 2px; font: var(--fw) var(--fs-2)/var(--lh-2) var(--font); color: var(--fg-tertiary); }
.row .v { font: var(--fw) var(--fs-2)/var(--lh-2) var(--font); color: var(--fg-secondary); text-align: right; flex: none; display: flex; align-items: center; gap: 8px; max-width: 60%; }
.row .v .input, .row .v select.input { width: 280px; }
.row .v a { color: var(--fg-primary); text-decoration: underline; text-underline-offset: 3px; }
.row .v svg.act { width: 20px; height: 20px; color: var(--fg-secondary); }
/* nested well inside a card (the "Payment setup path" box): radius 12, --bg-primary, hairline */
.well { background: var(--bg-primary); border-radius: 12px; padding: 12px 16px; box-shadow: 0 0 0 var(--border-default) var(--row-divider); }
/* two-column grid of rows collapses to single rows on the card */
.grid2 { display: contents; }


/* ══ 06-chip.css ══ */
/* BuildableOS · bits/06-chip.css — BADGES / TAGS / KBD
   Measured: plan tag "Business" 18px tall, 12px weight 480, --fg-special on /.2 special bg, radius 4, icon 12.
   "Beta" tag: neutral, hairline. Message-count "APP"-style tags use the same recipe. */
.tag { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px; border-radius: 4px; font: var(--fw-medium) var(--fs-3)/16px var(--font); white-space: nowrap; }
.tag svg { width: 12px; height: 12px; }
.tag.special { color: var(--fg-special); background: oklch(58.99% .2523 294.88 / .2); }
.tag.accent  { color: var(--fg-accent);  background: var(--accent-tr); }
.tag.positive { color: var(--fg-positive); background: oklch(54.42% .1689 138.23 / .2); }
.tag.attention { color: var(--fg-attention); background: oklch(58.01% .1819 40.04 / .2); }
.tag.destructive { color: var(--fg-destructive); background: oklch(58.53% .2203 26.56 / .2); }
.tag.neutral { color: var(--fg-tertiary); background: transparent; box-shadow: inset 0 0 0 var(--border-default) var(--row-divider); }
.kbd { display: inline-flex; align-items: center; height: 18px; padding: 0 5px; border-radius: 4px; font: 11px/16px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--fg-secondary); background: var(--bg-depth); box-shadow: var(--shadow-input-ring); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-quaternary); display: inline-block; }
.dot.on { background: var(--fg-positive); } .dot.off { background: var(--fg-quaternary); } .dot.bad { background: var(--fg-destructive); }


/* ══ 07-toast.css ══ */
/* BuildableOS · bits/07-toast.css — TOAST / NOTICE
   Floating pill, bottom-centre: bg --bg-secondary, radius full, 36px tall, 13px, --shadow-floating-md.
   Enter: fade + 8px rise, 150ms ease-out; exit: fade + 4px drop. Dot = state. */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 8px); z-index: 90; display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px 0 12px; border-radius: var(--r-pill); background: var(--bg-secondary); color: var(--fg-primary);
  font: var(--fw) 13px/16px var(--font); box-shadow: var(--shadow-floating-md); opacity: 0; pointer-events: none;
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); }
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast .dot { width: 8px; height: 8px; }
/* inline notice on a card (attached above a composer / under a row) */
.notice { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg-primary); box-shadow: 0 0 0 var(--border-default) var(--row-divider); color: var(--fg-secondary); font: var(--fw) var(--fs-2)/var(--lh-2) var(--font); }
.notice.err { color: var(--fg-destructive); } .notice.ok { color: var(--fg-positive); }


/* ══ 08-composer.css ══ */
/* BuildableOS · bits/08-composer.css — THE PROMPT BAR
   Measured: 24px inset from the column edge? no — panel x=8 → 346 wide; radius 20 surface on --bg-secondary,
   textarea 16px/24px placeholder --fg-tertiary ("Ask Lovable…"), padding 16px 16px 12px.
   Bottom row: + (28px pill, neutral, icon 20) left; right cluster: Build ▾ (pill, padding 4px 6px 4px 9px), mic (28 icon pill), send (28 inverse, opacity .5 until text). */
.composer { display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 12px; border-radius: var(--r-surface); background: var(--bg-secondary); box-shadow: var(--shadow-surface-sm); --surface-base: var(--bg-base); }
.composer textarea { width: 100%; min-height: 24px; max-height: 240px; resize: none; border: 0; background: transparent; color: var(--fg-primary); font: var(--fw) 16px/24px var(--font); outline: none; padding: 0; }
.composer .bar { display: flex; align-items: center; gap: 6px; }
.composer .bar .grow { flex: 1; }
.composer .btn.send { width: 28px; height: 28px; padding: 0; background: var(--bg-inverse); color: var(--fg-inverse); opacity: .5; }
.composer .btn.send.ready { opacity: 1; }
.composer .btn.send svg { width: 20px; height: 20px; }
.composer .btn.plus, .composer .btn.mic { width: 28px; padding: 0; }
.composer .btn.plus svg, .composer .btn.mic svg { width: 20px; height: 20px; }
.composer .btn.mode { padding: 4px 6px 4px 9px; }


/* ══ 09-topbar.css ══ */
/* BuildableOS · bits/09-topbar.css — 48px WORKSPACE BAR · VIEW SWITCHER · PILL SELECT · PANEL
   Measured 1:1 (Lovable workspace, 2026-09-03):
   bar 48 tall, flush, transparent on --bg-base; controls sit y=10..38 (28px), gap 6.
   Brand: logo 24 + title 14px/21 weight 400 + branch "main ▾" in --fg-tertiary. Right: Share (neutral) · Upgrade (special) · Publish (accent).
   VIEW SWITCHER (.view-switcher-track): h 28, radius full, bg --bg-depth, inset track shadow, WIDTH animates .34s cubic-bezier(.32,.72,0,1)
   as the active option grows a label (icon-only when inactive). Pill: gradient white 8%→0 over accent 32%, accent hairline inset.
   Labels enter 0.4s (.32,.72,0,1) +80ms delay: blur(.5px) → 0, translate 4px→0, scale .96→1; exit: blur(4px), translate -8px, scale .64.
   Route select: 202 wide pill, centred label, chevron. Panel: radius 16, white or --bg-muted, 8px inset from the bar. Floating toolbar 44 tall radius 14. */
.topbar { height: 48px; display: flex; align-items: center; gap: 6px; padding: 0 8px 0 16px; }
.topbar .grow { flex: 1; }
.topbar .brand { display: flex; align-items: center; gap: 8px; font: var(--fw) var(--fs-2)/var(--lh-2) var(--font); color: var(--fg-primary); }
.topbar .brand img, .topbar .brand svg { width: 24px; height: 24px; }
.topbar .branch { color: var(--fg-tertiary); display: inline-flex; align-items: center; gap: 2px; }
/* ── view switcher ── */
& {
  --switcher-track-shadow: 0 0 0 var(--border-default) var(--border-translucent) inset, 0 2px 2px -1px #0000000a inset, 0 4px 4px -2px #0000000a inset, 0 calc(-1 * var(--border-default)) 0 0 #ffffff14 inset;
  --switcher-pill-bg: linear-gradient(180deg, #ffffff14 0%, #fff0 100%), oklch(58% .21 268 / .32);
  --switcher-pill-shadow: 0 var(--border-default) 0 0 #ffffff52 inset, 0 calc(-1 * var(--border-default)) 0 0 #ffffff29 inset, 0 0 0 var(--border-default) var(--accent) inset, 0 1px 1px 0 #ffffff29 inset, 0 -1px 1px 0 #0000003d inset, 0 2px 2px -1px oklch(58% .21 268 / .16), 0 4px 4px -2px oklch(58% .21 268 / .16);
}
.switcher { position: relative; display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 2px; border-radius: var(--r-pill); background: var(--bg-depth); box-shadow: var(--switcher-track-shadow);
  transition: width var(--t-layout) var(--ease-layout), box-shadow var(--t-fast); overflow: hidden; }
.switcher:has(:focus-visible) { box-shadow: inset 0 0 0 var(--border-default) var(--border-focus), var(--switcher-track-shadow); transition: none; }
.switcher .opt { position: relative; height: 24px; min-width: 24px; padding: 0 6px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--fg-secondary); display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
  font: 450 var(--fs-2)/var(--lh-2) var(--font); transition: color var(--t-fast) var(--ease-out); }
.switcher .opt svg { width: 16px; height: 16px; flex: none; animation: vs-option-enter .4s var(--ease-layout) both; }
.switcher .opt .lbl { display: none; white-space: nowrap; }
.switcher .opt:hover { color: var(--fg-primary); }
.switcher .opt.active { padding: 0 9px 0 6px; color: var(--fg-primary); background: var(--switcher-pill-bg); box-shadow: var(--switcher-pill-shadow); }
.switcher .opt.active .lbl { display: inline-block; animation: vs-label-enter .4s var(--ease-layout) .08s both; }
.switcher .opt .lbl.leaving { display: inline-block; animation: vs-label-exit .4s var(--ease-layout) both; }
.switcher .sep { width: .5px; height: 14px; background: var(--row-divider); margin: 0 2px; flex: none; }



/* url-bar label swap (route select): 6px vertical + blur(4px) */



/* ── panels ── */
.panel { border-radius: 16px; background: #fff; overflow: hidden; box-shadow: var(--shadow-surface-xs); }
.panel.dark { background: var(--bg-muted); }
.panel .panel-title { height: 48px; display: flex; align-items: center; justify-content: center; font: var(--fw-medium) var(--fs-2)/var(--lh-2) var(--font); color: var(--fg-primary); }
.floatbar { display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 8px; border-radius: 14px; background: var(--bg-secondary); box-shadow: var(--shadow-floating-sm); }
/* panel switching (Preview ⇄ Files ⇄ More): panels are stacked absolute inset-0; the active one gets z-10 + opacity 1,
   the rest -z-10 + opacity 0 — a class swap, no long crossfade; the switcher's label motion carries the feel. */
.panel-stack { position: relative; }
.panel-stack > .panel-view { position: absolute; inset: 0; opacity: 0; z-index: -10; }
.panel-stack > .panel-view.active { opacity: 1; z-index: 10; }
.panel-stack > .panel-view.active > * { animation: vs-option-enter var(--t-fast) var(--ease-out) both; }


/* ══ 10-motion.css ══ */
/* BuildableOS · bits/10-motion.css — MOTION
   Measured: default transition .15s cubic-bezier(.4,0,.2,1); colour/state changes use ease-out (0,0,.2,1).
   Enter/exit = Tailwind-animate: opacity/scale/translate vars, 150ms. zoom-in-95 = scale .95; slide-in-from-top-2 = -8px.
   Chevron rotates 180° in 150ms when its menu opens. Overshoot (.34,1.4,.64,1) only for badge pops.
   Layout size/position changes (BuildableOS rule) ride --ease-layout 340ms. Reduced motion: none of the above. */


.animate-in { animation: enter var(--t-fast) var(--ease-out) both; }
.animate-out { animation: exit var(--t-fast) var(--ease-default) both; }
.fade-in { --enter-opacity: 0; } .fade-out { --exit-opacity: 0; }
.zoom-in-95 { --enter-scale: .95; } .zoom-out-95 { --exit-scale: .95; }
.slide-in-from-top-2 { --enter-y: -8px; } .slide-in-from-bottom-1 { --enter-y: 4px; } .slide-in-from-right-2 { --enter-x: 8px; } .slide-in-from-left-2 { --enter-x: -8px; }
.duration-150 { animation-duration: .15s; } .duration-200 { animation-duration: .2s; } .duration-300 { animation-duration: .3s; }
.rot-open { transition: transform var(--t-fast) var(--ease-default); } [aria-expanded="true"] .rot-open, .open > .rot-open { transform: rotate(180deg); }
.layout { transition: width var(--t-layout) var(--ease-layout), height var(--t-layout) var(--ease-layout), transform var(--t-layout) var(--ease-layout), grid-template-rows var(--t-layout) var(--ease-layout); }
 .pulse { animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }

.skeleton { border-radius: 8px; background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-quaternary) 50%, var(--bg-tertiary) 75%); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .animate-in, .animate-out, .pulse, .skeleton { animation: none !important; } .layout, .rot-open { transition: none !important; } }
/* exact from Lovable app-lazy-shared: checkbox check draws in via stroke-dashoffset 12→0; url-bar labels swap with blur(4px) ±6px */




.badge-pop { animation: badge-pop .5s var(--ease-overshoot) both; }

.dot.ping::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: status-dot-ping 1.4s var(--ease-out) 3 forwards; }


/* ══ 11-subnav.css ══ */
/* BuildableOS · bits/11-subnav.css — IN-PANEL SUB NAVIGATION (the "More" tab) + PANEL CARDS
   Measured 1:1: list column 232 wide, padding 24px 0 24px 24px, gap 16 between blocks, no bg.
   Item: min-h 33 (padding 6px 8px), radius 8, gap 8, icon 20, 14px/21 weight 400; idle --fg-secondary;
   hover: background-image glow-neutral-hover; active: bg oklch(100% 0 0/.08) + --fg-primary. NO glider.
   Nested children (Cloud › Overview/Emails/…): indented list with a hairline left rail; active child = same 8% wash.
   Content column: max-w 448 (md) centred, or full rows. Row cards (Logs / Secrets): --bg-secondary, radius 16, padding 20px 24px,
   title 16px/24 480 + sub 14px --fg-tertiary + chevron right. Feature card: --bg-tertiary (30%), radius 12, shadow-surface-xxs,
   art on top, body padding 24, h2 24px/36 weight 480, p 16px/24 --fg-tertiary, inverse CTA h 32 radius 8 full width, margin 24. */
.subnav { width: 232px; max-width: 232px; padding: 24px 0 24px 24px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; flex: none; }
.subnav .grp { display: flex; flex-direction: column; gap: 0; }
.subnav .grp > .h { height: 32px; display: flex; align-items: center; padding: 0 8px; font: var(--fw) var(--fs-2)/var(--lh-2) var(--font); color: var(--fg-tertiary); }
.subnav .it { display: flex; align-items: center; gap: 8px; min-height: 33px; padding: 6px 8px; border-radius: var(--r-nav); border: 0; width: 100%; text-align: left;
  background: transparent; color: var(--fg-secondary); font: var(--fw) var(--fs-2)/var(--lh-2) var(--font); cursor: pointer; text-decoration: none;
  transition: color var(--t-fast) var(--ease-out); }
.subnav .it svg { width: var(--icon-nav); height: var(--icon-nav); flex: none; }
.subnav .it:hover { background-image: linear-gradient(var(--glow-neutral-hover), var(--glow-neutral-hover)); color: var(--fg-primary); }
.subnav .it.active { background: oklch(100% 0 0 / .08); color: var(--fg-primary); }
.subnav .it .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subnav .kids { display: flex; flex-direction: column; margin-left: 16px; padding-left: 12px; box-shadow: inset var(--border-default) 0 0 0 var(--row-divider); }
.subnav .kids .it { min-height: 33px; }
.panel-body { display: flex; min-height: 0; flex: 1; gap: 8px; }
.panel-content { flex: 1; min-width: 0; padding: 24px 24px 24px 0; overflow-y: auto; }
.panel-content .narrow { max-width: 448px; margin: 0 auto; }
/* row card (Logs / Secrets) */
.rowcard { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border-radius: var(--r-card); background: var(--bg-secondary); box-shadow: var(--shadow-surface-xs); color: var(--fg-primary); text-decoration: none; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out); }
.rowcard:hover { background: var(--bg-tertiary); }
.rowcard .t { font: var(--fw-medium) var(--fs-1)/var(--lh-1) var(--font); }
.rowcard .s { font: var(--fw) var(--fs-2)/var(--lh-2) var(--font); color: var(--fg-tertiary); margin-top: 2px; }
.rowcard .body { flex: 1; min-width: 0; }
.rowcard > svg { width: 20px; height: 20px; color: var(--fg-tertiary); flex: none; }
/* feature card (Enable agent integrations / Enable more features) */
.featcard { display: flex; flex-direction: column; border-radius: 12px; background: var(--bg-tertiary); box-shadow: var(--shadow-surface-xxs); --surface-base: var(--bg-tertiary); overflow: hidden; }
.featcard .art { position: relative; height: 320px; overflow: hidden; background: oklch(20% .006 var(--hue)); }
.featcard .body { padding: 24px 24px 0; display: flex; flex-direction: column; gap: 2px; }
.featcard h2 { margin: 0; font: var(--fw-medium) 24px/36px var(--font); color: var(--fg-primary); text-wrap: balance; }
.featcard p { margin: 0; font: var(--fw) 16px/24px var(--font); color: var(--fg-tertiary); text-wrap: pretty; }
.featcard .cta { margin: 24px; height: 32px; padding: 6px 10px; border-radius: 8px; border: 0; background: var(--bg-inverse); color: var(--fg-inverse); font: var(--fw) var(--fs-2)/var(--lh-2) var(--font); cursor: pointer; }
.featcard .cta:hover { background: #fff; }
/* the V light fan (Lovable's "mcp" art): 5 stacked gradient bars rising 1.15s ease-out, staggered 180ms; floating chips rise .72s */
.featcard .fan { position: absolute; inset: 0; clip-path: polygon(50% 100%, 0 0, 100% 0); background: linear-gradient(180deg, oklch(78% .12 300) 0%, oklch(70% .19 320) 22%, oklch(62% .2 350) 58%, oklch(78% .17 55) 100%); transform-origin: 50% 100%; animation: fan-rise 1.15s ease-out both; }
.featcard .fan::after { content: ""; position: absolute; inset: 0; background: repeating-conic-gradient(from 180deg at 50% 100%, rgba(255,255,255,.18) 0 1.6deg, transparent 1.6deg 6.4deg); mix-blend-mode: soft-light; }
.featcard .chip { position: absolute; padding: 12px 16px; border-radius: 16px; background: oklch(23% .002 107 / .8); color: var(--fg-primary); font: var(--fw) 16px/24px var(--font); box-shadow: var(--shadow-surface-md); backdrop-filter: blur(6px); animation: chip-rise .72s ease-out .52s both; }
.featcard .chip.logo { padding: 10px 12px; animation-delay: .36s; }


/* stat tile strip (Analytics): tiles in a hairline card, active tile raised */
.stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; padding: 8px; border-radius: 12px; box-shadow: var(--shadow-input-ring); }
.stats .tile { padding: 12px 16px; border-radius: 8px; color: var(--fg-tertiary); }
.stats .tile .k { font: var(--fw) var(--fs-1)/var(--lh-1) var(--font); }
.stats .tile .v { font: var(--fw) 20px/30px var(--font); margin-top: 4px; }
.stats .tile.active { background: var(--bg-primary); box-shadow: var(--shadow-surface-xxs); color: var(--fg-primary); }
/* empty state */
.emptystate { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 64px 24px; }
.emptystate .ic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-tertiary); color: var(--fg-secondary); margin-bottom: 8px; }
.emptystate .ic svg { width: 20px; height: 20px; }
.emptystate h3 { margin: 0; font: var(--fw-medium) 16px/24px var(--font); color: var(--fg-primary); }
.emptystate p { margin: 0; font: var(--fw) 14px/21px var(--font); color: var(--fg-tertiary); max-width: 44ch; }

}