/* Figit workspace: Betterdata design system (white canvas, white raised surfaces, one blue).
   Tokens first; components below. */
:root {
  --bg: #FFFFFF;          /* app shell: top bar, panels */
  --surface: #FFFFFF;     /* raised cards, menus, dialogs */
  --surface-2: #F1F2F4;   /* inset chips, inputs, icon backgrounds */
  --ink: #111111;
  --ink-2: #4B5563;
  --ink-3: #666666;       /* secondary text: 5.27:1 on cream, 5.04:1 on --surface-2 (WCAG 1.4.3); the doc's #737373 is 4.35:1 */
  --line: #E5E7EB;
  --line-strong: rgba(23, 23, 23, 0.14);
  /* Brand blue #3A83F7 only gives white text 3.64:1, so text-bearing fills use a deeper step of it (4.72:1)
     and blue text uses #1F5FCC (5.40:1 on cream). #3A83F7 stays for focus rings and outlines (3.34:1, non-text). */
  --accent: #2A6FE0;
  --accent-hover: #2460C4;
  --accent-text: #1F5FCC;
  --accent-ring: #3A83F7;
  --accent-ink: #FFFFFF;
  --accent-soft: #DCEAFF;
  --danger: #c4314b;
  --success: #237a39;     /* 5.4:1 on white for 11px chip text */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px;
  /* Shadows for elevation, borders for structure (better-ui): the design system's own levels. */
  /* On the cream canvas the doc's 0.5px rings nearly vanish, so every level carries a full 1px hairline,
     and floating layers add the doc's 0 8px 24px drop. 1 = cards, 2 = frames/toolbars, 3 = menus/dialogs. */
  --shadow-1: 0 0 0 1px rgba(23, 23, 23, 0.07), 0 1px 2px rgba(23, 23, 23, 0.05);
  --shadow-2: 0 0 0 1px rgba(23, 23, 23, 0.08), 0 2px 6px rgba(23, 23, 23, 0.04), 0 8px 24px rgba(23, 23, 23, 0.08);
  --shadow-3: 0 0 0 1px rgba(23, 23, 23, 0.09), 0 4px 12px rgba(23, 23, 23, 0.06), 0 16px 40px rgba(23, 23, 23, 0.12);
  --shadow-filled: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.12);
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --font: Inter, ui-sans-serif, system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  color-scheme: light;
  --ui-hover: #E7E9EC;
  --ui-canvas: #F7F8FA;
  --ui-grid: rgba(23, 23, 23, 0.055);
  --ui-scrollbar: #D1D5DB;
  --ui-backdrop: rgba(17, 17, 17, 0.24);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 14px/1.45 var(--font); letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  display: flex; flex-direction: column; overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Buttons: press scales to 0.96 over 150ms; never when disabled (better-ui) */
.btn, .send, .icon-btn, .tool, .seg-btn, .starter, .recent {
  transition-property: scale, background-color, color, box-shadow, opacity;
  transition-duration: 150ms; transition-timing-function: ease-out;
}
/* Press scale only when motion is welcome (better-ui / WCAG 2.3.3) */
@media (prefers-reduced-motion: no-preference) {
  .btn:not(:disabled):active, .send:not(:disabled):active, .icon-btn:not(:disabled):active,
  .tool:not(:disabled):active, .starter:active, .recent:active { scale: 0.96; }
}
.btn { height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid transparent; font-weight: 500; white-space: nowrap; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--ink); color: #FFFFFF; }
.btn-quiet { background: var(--surface); border-color: var(--line) !important; }
@media (hover: hover) {
  .btn-primary:not(:disabled):hover { background: #2B2B2B; }
  .btn-quiet:not(:disabled):hover { background: var(--surface-2); }
  .icon-btn:hover, .tool:not(:disabled):hover { background: var(--surface-2); color: var(--ink); }
  .starter:hover, .recent:hover { box-shadow: var(--shadow-2); }
  .menu button:not(:disabled):hover { background: var(--surface-2); }
  .crumb:hover { color: var(--ink); }
  .crumb-input:hover { border-color: var(--line); }
}

/* Shadow-only surfaces keep an edge in forced-colors mode (better-ui) */
.composer, .starter, .recent, .chip, .menu, .zoombar, .msg.user, .toast, .seg-btn[aria-selected="true"], .btn-quiet { border: 1px solid transparent; }
.frame-body { outline: 1px solid transparent; outline-offset: -1px; }

/* Top bar */
.topbar { height: 58px; flex: none; display: flex; align-items: center; gap: 16px; padding: 0 16px; background: var(--bg); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 4px; font-weight: 500; font-size: 16px; letter-spacing: -0.2px; }
.brand-mark { width: 18px; height: 18px; border-radius: 5px; background: url(/mascot.png) center / contain no-repeat; } /* the mascot logo (app/mascot.png, also the favicon) */
.crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink-3); }
.crumb { border: 0; background: none; color: var(--ink-3); padding: 4px 6px; border-radius: 6px; }
.crumb-input { border: 1px solid transparent; background: none; color: var(--ink); font-weight: 500; padding: 4px 6px; border-radius: 6px; min-width: 80px; width: 22ch; text-overflow: ellipsis; }
.crumb-input:focus { border-color: var(--line-strong); background: var(--surface); }
.topbar-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
body.on-home .crumbs, body.on-home .topbar-actions { display: none; }

/* Menus */
.menu-wrap { position: relative; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 250px; padding: 6px; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-3); display: flex; flex-direction: column; }
.menu button { text-align: left; border: 0; background: none; padding: 0 10px; min-height: 32px; font-size: 13px; border-radius: 6px; transition: background-color 150ms ease-out; }
.menu button:disabled { color: var(--ink-3); cursor: not-allowed; }

/* Home: sidebar + workspace shell. Sizes are measured from the 1850×832 reference. */
body.on-home .topbar { display: none; }
.home {
  --h-ink: #111111; --h-ink-2: #6B7280; --h-icon: #374151; --h-line: #E5E7EB; --h-active: #F1F2F4; --h-link: #3A83F7;
  flex: 1; min-height: 0; display: flex; position: relative; overflow: hidden;
  background: var(--bg); color: var(--h-ink); font: 400 15px/1.4 Inter, var(--font); letter-spacing: -0.005em;
}
.home-inner { max-width: 962px; width: 100%; margin: 0 auto; padding: 8px 24px 64px; }
.starters[hidden] { display: none; }

/* Sidebar */
.sb { width: 277px; flex: none; display: flex; flex-direction: column; background: #FFFFFF; border-right: 1px solid #ECECEE; }
.sb-head { padding: 12px 15px 12px 14.5px; flex: none; }
.sb-brand { display: flex; align-items: center; height: 34px; }
.sb-team { display: flex; align-items: center; gap: 11px; height: 34px; padding: 0 6px 0 6.5px; border: 0; border-radius: 8px; background: none; font: 500 16px/1 Inter, var(--font); color: var(--h-ink); }
.sb-team .brand-mark { width: 21px; height: 21px; }
.sb-team svg { width: 14px; height: 14px; color: var(--h-ink-2); margin-left: -1px; }
.sb-icon { width: 28px; height: 28px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: none; color: #4B5563; }
.sb-icon svg { width: 16px; height: 16px; stroke-width: 1.6; }
.sb-brand .sb-icon { margin: 0 4px 0 auto; }
.sb-search { margin-top: 13px; height: 33px; display: flex; align-items: center; gap: 11px; padding: 0 9px 0 10px; border: 1px solid var(--h-line); border-radius: 8px; background: #FFFFFF; cursor: text; }
.sb-search:focus-within { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.sb-search svg { width: 15px; height: 15px; color: var(--h-ink-2); }
.sb-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; padding: 0; font: 400 15px/1 Inter, var(--font); }
.sb-search input::placeholder { color: var(--h-ink-2); }
.sb-search kbd { width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid var(--h-line); border-radius: 4px; font: 400 11px/1 Inter, var(--font); color: var(--h-ink-2); }
.sb-search kbd + kbd { margin-left: -5px; }
.sb-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #D1D5DB transparent; padding: 2px 15px 12px 14.5px; }
.sb-group { display: flex; flex-direction: column; gap: 9.4px; }
.sb-item { width: 100%; height: 34px; flex: none; display: flex; align-items: center; gap: 11px; padding: 0 10px; border: 0; border-radius: 8px; background: none; font: 400 15px/1 Inter, var(--font); color: var(--h-ink); text-align: left; white-space: nowrap; }
.sb-item svg { width: 16px; height: 16px; color: var(--h-icon); stroke-width: 1.6; }
.sb-item[aria-current] { background: var(--h-active); }
.sb-scroll hr { border: 0; border-top: 1px solid var(--h-line); margin: 14px 0 15px; }
.sb-connect { flex: none; height: 151px; padding: 18px 16px 0 14.5px; border-top: 1px solid #EEF0F3; background: linear-gradient(200deg, #FFFFFF 0%, #F4F7FC 45%, #EAF1FB 100%); }
.sb-connect-head { height: 22px; display: flex; align-items: center; justify-content: space-between; }
.sb-connect h2 { margin: 0; font: 500 16px/22px Inter, var(--font); color: var(--h-ink); }
.sb-plus { width: 27px; height: 27px; display: grid; place-items: center; padding: 0; border: 1px solid var(--h-line); border-radius: 7px; background: #FFFFFF; color: var(--h-icon); box-shadow: 0 1px 2px rgba(17, 17, 17, 0.06); }
.sb-plus svg { width: 14px; height: 14px; }
.sb-connect p { margin: 4px 0 0; max-width: 172px; font-size: 14px; line-height: 24px; color: #4B5563; }
.sb-apps { margin-top: 21px; display: flex; }
.sb-apps > * { width: 26px; height: 26px; flex: none; display: grid; place-items: center; padding: 4px; border: 1px solid var(--h-line); border-radius: 7px; background: #FFFFFF; }
.sb-apps > * + * { margin-left: -2px; }
.sb-apps .brand-mark { width: 15px; height: 15px; border-radius: 4px; }
.sb-scrim { display: none; }
@media (min-width: 1024px) { .home.sb-closed .sb { display: none; } }
@media (hover: hover) {
  .sb-item:not([aria-current]):hover, .sb-team:hover, .sb-icon:hover { background: #F6F7F8; }
  .sb-plus:hover, .hattach:hover, .hhist:hover { background: #F9FAFB; }
  .hnew:hover { background: #ECEEF0; color: var(--h-ink); }
  .hnotice a:hover, .hrec button:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* Workspace */
.hmain { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #D1D5DB transparent; }
.hhead { position: sticky; top: 0; z-index: 5; height: 58px; flex: none; display: flex; align-items: center; gap: 11.5px; padding: 0 15px 0 17px; background: #FFFFFF; }
.hhead .grow, .hbar .grow { flex: 1; }
.hhead .sb-open { display: none; margin-left: -6px; }
.home.sb-closed .hhead .sb-open { display: grid; }
.hhead-title { margin: 0; display: flex; align-items: center; gap: 8px; font: 500 16px/1 Inter, var(--font); color: var(--h-ink); }
.hhead-title svg { width: 14px; height: 14px; stroke-width: 1.75; }
.hnew { height: 27px; display: inline-flex; align-items: center; gap: 10px; padding: 0 9.5px 0 8px; border: 0; border-radius: 7px; background: #F4F5F6; color: var(--h-ink-2); font: 400 15px/1 Inter, var(--font); }
.hnew svg { width: 13px; height: 13px; }
.hhist { width: 27px; height: 27px; display: grid; place-items: center; padding: 0; border: 1px solid var(--h-line); border-radius: 50%; background: #FFFFFF; color: var(--h-ink); }
.hhist svg { width: 15px; height: 15px; stroke-width: 1.75; }
.hhead .account { margin-left: 0; }

/* Hero: mascot, heading, composer, suggestions */
.hero { flex: none; padding: clamp(24px, calc(50dvh - 272px), 320px) 24px 48px; }
.hero-inner { max-width: 914px; margin: 0 auto; }
/* Focused on arrival so screen readers start here; it isn't a control, so no ring. */
#homeTitle:focus { outline: none; }
/* Two-tone heading, like the landing hero: the second half in the muted ink. Credits link never splits. */
#homeTitle .h1-soft { color: var(--h-ink-2); }
.hnotice a { white-space: nowrap; }
/* The mascot peeks over the top edge of the credits strip, or of the composer when the strip is hidden. */
.peek { position: absolute; right: 44px; bottom: calc(100% - 12px); width: 92px; height: auto; z-index: 2; pointer-events: none; user-select: none; filter: drop-shadow(0 1px 1.5px rgba(17, 17, 17, 0.18)); }
/* Focus ring around the mascot, as on the landing hero: mascot-peek-line.png is its outline (2px clear gap,
   1.5px blue line), cut off where it meets the composer's outline. Only when the mascot sits on the composer. */
.peek-ring { position: absolute; right: 31px; bottom: calc(100% - 12px); width: 118px; height: auto; z-index: 2; opacity: 0; clip-path: inset(0 0 14px 0); pointer-events: none; user-select: none; }
.hcomp:has(#usageNotice[hidden]):has(.hbox:focus-within) .peek-ring { opacity: 1; }
/* The mascot's silhouette (plus its 2px gap) in the page colour, so the composer's border and focus line don't
   show through between its paws. Stops at the border's bottom edge, above the box's own fill. */
.peek-fill { position: absolute; right: 31px; bottom: calc(100% - 12px); width: 118px; aspect-ratio: 514 / 263; z-index: 1; background: var(--bg); -webkit-mask: url(/mascot-peek-ring.png) 0 0 / 100% 100% no-repeat; mask: url(/mascot-peek-ring.png) 0 0 / 100% 100% no-repeat; clip-path: inset(0 0 11px 0); pointer-events: none; }
.hcomp:has(.hnotice:not([hidden])) .peek-fill { display: none; }
/* Paws stay planted on the edge: the mascot only breathes (no lift or tilt, which floated it off the box). */
.peek, .peek-ring, .peek-fill { transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .peek { animation: peek-up 700ms cubic-bezier(.34,1.56,.64,1) 200ms both, peek-bob 4s ease-in-out 1.2s infinite; }
  .peek-ring { animation: peek-bob 4s ease-in-out 1.2s infinite; }
  .peek-fill { animation: peek-up 700ms cubic-bezier(.34,1.56,.64,1) 200ms both, peek-bob 4s ease-in-out 1.2s infinite; }
}
@keyframes peek-up { from { transform: translateY(70%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes peek-bob { 0%, 100% { transform: none; } 50% { transform: scaleY(1.035); } }
.home .hero h1 { margin: 16px 0 0; font: 500 24px/32px Inter, var(--font); letter-spacing: -0.012em; color: var(--h-ink); text-align: left; }
.hcomp { position: relative; margin-top: 56px; }
.hnotice { height: 62px; margin-bottom: -14px; display: flex; align-items: center; gap: 10px; padding: 0 12px 14px 16px; border-radius: 14px 14px 0 0; background: #F7F8FA; }
.hnotice > svg { width: 14px; height: 14px; color: #4B5563; }
.hnotice p { flex: 1; min-width: 0; margin: 0; font-size: 15px; line-height: 20px; }
.hnotice a { color: var(--h-link); text-decoration: none; }
.hnotice button { width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: none; color: #4B5563; }
.hnotice button svg { width: 13px; height: 13px; }
.home .hbox { position: relative; padding: 0; gap: 0; border: 1px solid var(--h-line); border-radius: 14px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 2px 8px rgba(17, 17, 17, 0.03); }
.home .hbox.drop { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* Same ring as the landing hero (and the mascot's outline): 2px gap, 1.5px blue line. */
/* Only this line: the generic .composer focus ring (box-shadow) would draw a second one inside it. */
.home .hbox:focus-within { outline: 1.5px solid #2E74E6; outline-offset: 2px; box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 2px 8px rgba(17, 17, 17, 0.03); }
.home .hbox textarea { height: 62.5px; min-height: 0; padding: 13px 14px 0; font: 400 15px/22px Inter, var(--font); color: var(--h-ink); }
.home .hbox textarea::placeholder { color: var(--h-ink-2); }
.home .hbox .attach { margin: 0 14px 8px; }
.hbar { display: flex; flex-wrap: wrap; row-gap: 8px; align-items: center; padding: 0 14px 14.5px; }
.hattach { width: 29px; height: 29px; display: grid; place-items: center; padding: 0; border: 1px solid var(--h-line); border-radius: 8px; background: #FFFFFF; color: var(--h-ink); }
.hattach svg { width: 14px; height: 14px; }
/* Preference chips (home and chat composers): compact, one row */
.hbar, #chatForm .composer-bar { gap: 6px; }
/* Each chip sizes to its chosen option (field-sizing; other browsers keep the widest option). */
.hbar .chip-select, #chatForm .chip-select { field-sizing: content; min-width: 0; height: 29px; padding: 0 28px 0 27px; background-size: 13px, 12px; background-position: left 8px center, right 7px center; font-size: 13px; color: #374151; }
#chatForm .composer-bar { gap: 4px; padding: 0 8px 8px; }
#chatForm .chip-select { min-width: auto; padding: 0 23px 0 24px; font-size: 12.5px; background-size: 12px, 11px; background-position: left 7px center, right 7px center; }
.hbar .hattach { margin-right: 4px; }
.home .hsend { width: 29px; height: 29px; border-radius: 8px; background: var(--h-active); color: #9CA3AF; box-shadow: none; }
.home .hsend svg { width: 15px; height: 15px; stroke-width: 2; }
.home .hbox:has(textarea:not(:placeholder-shown)) .hsend { background: var(--h-ink); color: #FFFFFF; }
.hrec-label { margin: 21px 0 0; height: 33.7px; display: flex; align-items: center; font-size: 15px; color: var(--h-ink-2); }
.hrec { list-style: none; margin: 0; padding: 0; }
.hrec button { min-height: 33.7px; display: flex; flex-wrap: wrap; align-items: center; padding: 0; border: 0; background: none; font: 400 15px/20px Inter, var(--font); color: var(--h-ink); text-align: left; }
.hrec button > svg { width: 16px; height: 16px; margin: 0 12.5px 0 0.5px; color: var(--h-icon); stroke-width: 1.6; }
.hrec .apps { height: 19px; margin: 0 6px; display: inline-flex; align-items: center; gap: 2px; padding: 0 3px; border: 1px solid var(--h-line); border-radius: 5px; background: #FFFFFF; }
.hrec .apps img { width: 12px; height: 12px; }

/* Views: Chat shows the hero; Projects and Templates show their lists */
.home[data-view="chat"] .home-inner, .home:not([data-view="chat"]) .hero,
.home:not([data-view="projects"]) [data-view-of="projects"], .home:not([data-view="templates"]) [data-view-of="templates"],
.home:not([data-view="integrations"]) [data-view-of="integrations"], .home:not([data-view="billing"]) [data-view-of="billing"] { display: none; }
.home-inner [data-view-of="templates"] { padding-top: 24px; }
.home-inner .recents-head { margin-top: 24px; }

/* Narrower than the reference: the sidebar becomes a drawer behind the header toggle */
@media (max-width: 1023px) {
  .sb { display: none; position: fixed; inset: 0 auto 0 0; z-index: 40; box-shadow: var(--shadow-3); }
  .home.sb-open .sb { display: flex; }
  .home.sb-open .sb-scrim { display: block; position: fixed; inset: 0; z-index: 39; border: 0; background: rgba(17, 17, 17, 0.2); }
  .hhead .sb-open { display: grid; }
}
@media (max-width: 600px) {
  .hhead { padding: 0 12px 0 16px; }
  .hero { padding-inline: 16px; }
  .home-inner { padding-inline: 16px; }
}
@media (max-width: 860px) { .home .hbox textarea { font-size: 16px; } }
.home h1 { font-size: 36px; line-height: 40px; letter-spacing: -0.7px; font-weight: 500; margin: 0 0 12px; text-align: center; }
.home-sub { color: var(--ink-2); font-size: 16px; text-align: center; margin: 0 auto 32px; max-width: 54ch; }
.home-h2 { font-size: 14px; font-weight: 500; color: var(--ink-2); margin: 48px 0 12px; letter-spacing: -0.01em; }
.starters { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.starter { text-align: left; border: 0; background: var(--surface); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 6px; }
.starter b { font-weight: 500; }
.starter span { color: var(--ink-2); font-size: 13px; }
.starter em { font-style: normal; font-size: 12px; color: var(--accent-text); margin-top: 4px; }
.recents { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.recent { width: 100%; position: relative; text-align: left; border: 0; background: var(--surface); border-radius: var(--r-lg); padding: 8px 8px 12px; box-shadow: var(--shadow-1); }
.recent .thumb { height: 140px; border-radius: var(--r-sm); background: var(--surface-2); overflow: hidden; position: relative; }
.recent .thumb-gallery { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px; background: #f5f5f4; }
.recent .thumb-screen { position: relative; flex: none; overflow: hidden; border-radius: 4px; background: #fff; box-shadow: 0 1px 3px rgba(20,20,20,.12); }
.recent .thumb-screen iframe { left: 0; top: 0; }
.recent .thumb-more { position: absolute; right: 7px; bottom: 7px; padding: 2px 5px; border-radius: 5px; background: rgba(255,255,255,.92); color: var(--ink-2); font-size: 10px; font-weight: 600; }
.recent .thumb iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; pointer-events: none; opacity: 0; transition: opacity 300ms var(--ease-out); }
.recent .thumb iframe.loaded { opacity: 1; }
.recent b { display: block; margin: 10px 4px 2px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent small { margin: 0 4px; color: var(--ink-3); font-size: 12px; }
.recent-wrap { position: relative; }
.recent-wrap .del { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 8px; border: 0; background: rgba(255,255,255,.92); box-shadow: var(--shadow-1); display: grid; place-items: center; opacity: 0; transition: opacity 150ms ease-out; }
.recent-wrap .del svg { width: 14px; height: 14px; }
.recent-wrap:hover .del, .recent-wrap:focus-within .del { opacity: 1; }
@media (hover: none) { .recent-wrap .del { opacity: 1; } }
.recents-empty { color: var(--ink-3); }

/* Composer (home + chat). Outer radius = inner radius + padding (better-ui): 10px inner + 10px pad = 20px */
.composer { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-1); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.composer-hero { box-shadow: var(--shadow-2); }
/* The textarea has no ring of its own; the whole composer shows focus (WCAG 2.4.7). */
.composer:focus-within, .composer.drop { box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft), var(--shadow-1); }
.composer:focus-within { outline: 2px solid transparent; } /* forced-colors: box-shadow is dropped, the outline shows */
.composer textarea { border: 0; resize: none; background: none; padding: 6px 8px; outline: none; min-height: 52px; }
.composer textarea::placeholder { color: var(--ink-3); }
.composer-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.grow { flex: 1; }
.icon-btn { width: 34px; height: 34px; border-radius: 10px; border: 0; background: none; color: var(--ink-2); display: grid; place-items: center; }
/* One select style everywhere: no OS chrome, our own chevron, same height and padding. */
.chip-select, .t-sec select, .insp-field select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23898B87' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 14px; background-position: right 10px center;
  transition-property: background-color, box-shadow; transition-duration: 150ms; transition-timing-function: ease-out;
}
.chip-select { height: 32px; border: 1px solid transparent; border-radius: 8px; background-color: var(--surface-2); padding: 0 30px 0 12px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
/* Leading icon on every pref chip (Lucide; device and art follow the chosen value). */
.chip-select[data-bind] { padding-left: 32px; background-size: 14px, 14px; background-position: left 12px center, right 10px center; }
.chip-select[data-bind="style"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23898B87%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M12%2022a1%201%200%200%201%200-20a10%209%200%200%201%2010%209a5%205%200%200%201-5%205h-2.25a1.75%201.75%200%200%200-1.4%202.8l.3.4a1.75%201.75%200%200%201-1.4%202.8z%22%2F%3E%3Ccircle%20cx%3D%2213.5%22%20cy%3D%226.5%22%20r%3D%22.5%22%20fill%3D%22%23898B87%22%2F%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2210.5%22%20r%3D%22.5%22%20fill%3D%22%23898B87%22%2F%3E%3Ccircle%20cx%3D%226.5%22%20cy%3D%2212.5%22%20r%3D%22.5%22%20fill%3D%22%23898B87%22%2F%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%227.5%22%20r%3D%22.5%22%20fill%3D%22%23898B87%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23898B87' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.chip-select[data-bind="device"][data-value="mobile"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23898B87%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%3Crect%20width%3D%2214%22%20height%3D%2220%22%20x%3D%225%22%20y%3D%222%22%20rx%3D%222%22%20ry%3D%222%22%2F%3E%3Cpath%20d%3D%22M12%2018h.01%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23898B87' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.chip-select[data-bind="device"][data-value="tablet"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23898B87%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%3Crect%20width%3D%2218%22%20height%3D%2220%22%20x%3D%223%22%20y%3D%222%22%20rx%3D%222%22%20ry%3D%222%22%2F%3E%3Cpath%20d%3D%22M12%2018h.01%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23898B87' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.chip-select[data-bind="device"][data-value="desktop"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23898B87%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%3Crect%20width%3D%2220%22%20height%3D%2214%22%20x%3D%222%22%20y%3D%223%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%2021h8m-4-4v4%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23898B87' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.chip-select[data-bind="art"][data-value="draw"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23898B87%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22m18%2013l-.654-4.736a4%204%200%200%200-2.756-3.266l-9.163-2.9a2%202%200%200%200-2.017.493l-.82.819a2%202%200%200%200-.492%202.017l2.9%209.163a4%204%200%200%200%203.266%202.756L13%2018%22%2F%3E%3Cpath%20d%3D%22M18.648%2012.352a1.205%201.205%200%200%201%201.704%200l1.296%201.296a1.205%201.205%200%200%201%200%201.704l-6.296%206.296a1.205%201.205%200%200%201-1.704%200l-1.296-1.296a1.205%201.205%200%200%201%200-1.704zM3%203l6.586%206.586%22%2F%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23898B87' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.chip-select[data-bind="art"][data-value="crop"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23898B87%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M6%202v14a2%202%200%200%200%202%202h14%22%2F%3E%3Cpath%20d%3D%22M18%2022V8a2%202%200%200%200-2-2H2%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23898B87' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.chip-select[data-bind="effort"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23898B87%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m12%2014l4-4M3.34%2019a10%2010%200%201%201%2017.32%200%22%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23898B87' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
/* Model chip: the Claude logo (Anthropic brand asset), then the shared chevron. */
.chip-select[data-bind="model"] { padding-left: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 256 257%27%3E%3Cpath fill=%27%23d97757%27 d=%27m50.228 170.321l50.357-28.257l.843-2.463l-.843-1.361h-2.462l-8.426-.518l-28.775-.778l-24.952-1.037l-24.175-1.296l-6.092-1.297L0 125.796l.583-3.759l5.12-3.434l7.324.648l16.202 1.101l24.304 1.685l17.629 1.037l26.118 2.722h4.148l.583-1.685l-1.426-1.037l-1.101-1.037l-25.147-17.045l-27.22-18.017l-14.258-10.37l-7.713-5.25l-3.888-4.925l-1.685-10.758l7-7.713l9.397.649l2.398.648l9.527 7.323l20.35 15.75L94.817 91.9l3.889 3.24l1.555-1.102l.195-.777l-1.75-2.917l-14.453-26.118l-15.425-26.572l-6.87-11.018l-1.814-6.61c-.648-2.723-1.102-4.991-1.102-7.778l7.972-10.823L71.42 0l10.63 1.426l4.472 3.888l6.61 15.101l10.694 23.786l16.591 32.34l4.861 9.592l2.592 8.879l.973 2.722h1.685v-1.556l1.36-18.211l2.528-22.36l2.463-28.776l.843-8.1l4.018-9.722l7.971-5.25l6.222 2.981l5.12 7.324l-.713 4.73l-3.046 19.768l-5.962 30.98l-3.889 20.739h2.268l2.593-2.593l10.499-13.934l17.628-22.036l7.778-8.749l9.073-9.657l5.833-4.601h11.018l8.1 12.055l-3.628 12.443l-11.342 14.388l-9.398 12.184l-13.48 18.147l-8.426 14.518l.778 1.166l2.01-.194l30.46-6.481l16.462-2.982l19.637-3.37l8.88 4.148l.971 4.213l-3.5 8.62l-20.998 5.184l-24.628 4.926l-36.682 8.685l-.454.324l.519.648l16.526 1.555l7.065.389h17.304l32.21 2.398l8.426 5.574l5.055 6.805l-.843 5.184l-12.962 6.611l-17.498-4.148l-40.83-9.721l-14-3.5h-1.944v1.167l11.666 11.406l21.387 19.314l26.767 24.887l1.36 6.157l-3.434 4.86l-3.63-.518l-23.526-17.693l-9.073-7.972l-20.545-17.304h-1.36v1.814l4.73 6.935l25.017 37.59l1.296 11.536l-1.814 3.76l-6.481 2.268l-7.13-1.297l-14.647-20.544l-15.1-23.138l-12.185-20.739l-1.49.843l-7.194 77.448l-3.37 3.953l-7.778 2.981l-6.48-4.925l-3.436-7.972l3.435-15.749l4.148-20.544l3.37-16.333l3.046-20.285l1.815-6.74l-.13-.454l-1.49.194l-15.295 20.999l-23.267 31.433l-18.406 19.702l-4.407 1.75l-7.648-3.954l.713-7.064l4.277-6.286l25.47-32.405l15.36-20.092l9.917-11.6l-.065-1.686h-.583L44.07 198.125l-12.055 1.555l-5.185-4.86l.648-7.972l2.463-2.593l20.35-13.999z%27/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23898B87%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m6 9 6 6 6-6%27/%3E%3C/svg%3E"); background-size: 14px, 14px; background-position: left 12px center, right 10px center; }
@media (hover: hover) { .chip-select:hover, .t-sec select:hover, .insp-field select:hover { background-color: #E7E9EC; } }
.send { width: 34px; height: 34px; border-radius: 10px; border: 0; background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-filled); display: grid; place-items: center; }
.send:disabled { opacity: .45; cursor: not-allowed; }
.attach { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: var(--r-md); background: var(--surface-2); }
.attach img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; outline: 1px solid rgba(0,0,0,.1); outline-offset: -1px; }
.attach span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-size: 13px; }
.attach button { width: 26px; height: 26px; border-radius: 8px; border: 0; background: var(--surface); display: grid; place-items: center; }
.attach button svg { width: 14px; height: 14px; }
.editing { display: flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 6px 4px 10px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-text); font-size: 12px; font-weight: 500; }
.editing button { width: 20px; height: 20px; border: 0; border-radius: 6px; background: none; color: inherit; display: grid; place-items: center; }
.editing svg { width: 12px; height: 12px; }

/* Editor layout */
.editor { flex: 1; display: grid; grid-template-columns: 416px 1fr; min-height: 0; }
.panel { display: flex; flex-direction: column; min-height: 0; background: var(--bg); border-right: 1px solid var(--line); padding: 12px; gap: 12px; }
#chatForm { padding: 0; gap: 0; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 2px 8px rgba(17, 17, 17, 0.03); }
#chatForm:focus-within, #chatForm.drop { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#chatForm textarea { padding: 12px 14px 4px; font-size: 14px; line-height: 21px; }
#chatForm .editing { margin: 10px 12px 0; }
#chatForm .attach { margin: 0 12px 8px; }
#chatForm .composer-bar { row-gap: 6px; }
#chatForm .icon-btn, #chatForm .send { width: 29px; height: 29px; border-radius: 8px; flex: none; }
#chatForm .icon-btn svg, #chatForm .send svg { width: 15px; height: 15px; }
#chatForm .send { background: var(--ink); box-shadow: none; }
.seg { display: flex; gap: 2px; padding: 3px; background: var(--surface-2); border-radius: 10px; align-self: flex-start; }
.seg-btn { border: 0; background: none; padding: 5px 14px; border-radius: 7px; color: var(--ink-2); font-weight: 500; }
.seg-btn[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.pane { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.log { flex: 1; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding: 2px; }
.msg { max-width: 92%; padding: 10px 12px; border-radius: var(--r-lg); white-space: pre-wrap; word-break: break-word; }
.msg.user { align-self: flex-end; background: var(--surface-2); }
.msg.user img { display: block; max-width: 180px; border-radius: 8px; margin-top: 8px; outline: 1px solid rgba(0,0,0,.1); outline-offset: -1px; }
.msg.bot { align-self: flex-start; color: var(--ink-2); padding-left: 2px; padding-right: 2px; }
.msg.err { color: var(--danger); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; background: var(--surface); border-color: var(--line); font: 500 12px/1 var(--font); color: var(--ink-2); }
.chip::before { content: ''; width: 10px; height: 10px; border-radius: 999px; border: 1.5px solid var(--line-strong); flex: none; box-sizing: border-box; }
.chip.active { color: var(--ink); }
.chip.active::before { border-color: var(--accent-ring); border-right-color: transparent; animation: spin .7s linear infinite; }
.chip.done { color: var(--success); }
.chip.done::before { border: 0; background: var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/8px no-repeat; }
.meta { font: 12px/1.4 var(--font); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.meta.cost { display: inline-block; margin-top: 6px; padding: 3px 8px; background: var(--surface-2); border-radius: 6px; cursor: help; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Theme pane */
.theme-pane { overflow: auto; overscroll-behavior: contain; gap: 0; }
.t-sec { display: flex; flex-direction: column; gap: 8px; padding: 14px 2px; border-bottom: 1px solid var(--line); }
.t-sec h3 { margin: 0; font-size: 13px; font-weight: 500; }
.t-sec label { display: flex; flex-direction: column; gap: 4px; color: var(--ink-2); font-size: 13px; }
.t-sec select { height: 36px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background-color: var(--surface); padding: 0 32px 0 10px; color: var(--ink); }
.t-sec input[type=range] { accent-color: var(--accent); }
#siteUrl { flex: 1; min-width: 0; height: 36px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); padding: 0 10px; color: var(--ink); font: inherit; font-size: 13px; }
.switch-row { flex-direction: row !important; align-items: center; gap: 8px !important; color: var(--ink) !important; font-weight: 500; }
.swatch { flex-direction: row !important; align-items: center; gap: 10px !important; color: var(--ink) !important; padding: 3px 0; }
.swatch input { width: 26px; height: 26px; padding: 0; border: 1px solid var(--line-strong); border-radius: 999px; background: none; cursor: pointer; }
.swatch input::-webkit-color-swatch-wrapper { padding: 0; } .swatch input::-webkit-color-swatch { border: 0; border-radius: 999px; }
.swatch code { margin-left: auto; font: 11px var(--mono); color: var(--ink-3); }
.row { display: flex; gap: 8px; }
.hint { margin: 0; color: var(--ink-3); font-size: 12px; }
.theme-pane > .hint { padding: 14px 2px; }

/* Canvas */
.canvas:focus, .canvas:focus-visible { outline: none; }
.canvas { position: relative; overflow: hidden; background-color: #F7F8FA; background-image: linear-gradient(rgba(23, 23, 23, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(23, 23, 23, 0.055) 1px, transparent 1px); background-size: 16px 16px; touch-action: none; }
.canvas.hand { cursor: grab; }
.canvas.panning { cursor: grabbing; }
.canvas.hand .frame-hit, .canvas.panning .frame-hit { cursor: inherit; }
.world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.canvas-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); pointer-events: none; }
.frame { position: absolute; }
.frame:has(.menu:not([hidden])) { z-index: 10; }
.frame-head { position: absolute; z-index: 3; left: 0; bottom: 100%; display: flex; align-items: center; gap: 4px; padding-bottom: 10px; transform-origin: 0 100%; white-space: nowrap; }
.frame-title { font-weight: 500; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.frame-head .ver, .frame-head .menu-wrap { flex: none; }
/* Too narrow at this zoom: keep the title only (full name in its tooltip; actions return on zoom-in and live in Export) */
.frame-head.compact .ver, .frame-head.compact .menu-wrap { display: none; }
.frame.selected .frame-title { color: var(--accent-text); }
.ver { display: flex; align-items: center; gap: 2px; color: var(--ink-3); font: 12px var(--font); margin-left: 4px; }
.ver button, .frame-menu-btn { width: 24px; height: 24px; border: 0; border-radius: 6px; background: none; color: var(--ink-3); display: grid; place-items: center; }
.ver button:disabled { opacity: .35; cursor: default; }
.ver svg, .frame-menu-btn svg { width: 14px; height: 14px; }
@media (hover: hover) { .ver button:not(:disabled):hover, .frame-menu-btn:hover { background: var(--surface-2); color: var(--ink); } }
/* Screen corners: the device's radius, but never under 14px on screen (--inv = 1/zoom), so zoomed-out
   desktop pages still read as rounded. ⋯ → Square corners turns it off per screen (.square). */
.frame-body { --frame-r: 28px; position: relative; background: var(--surface); border-radius: max(var(--frame-r), calc(14px * var(--inv, 1))); overflow: hidden; box-shadow: var(--shadow-2); }
.frame.desktop .frame-body { --frame-r: 12px; }
.frame.tablet .frame-body { --frame-r: 18px; }
.frame.square:not([data-mock]) .frame-body { border-radius: 0; }
.frame.selected .frame-body { box-shadow: 0 0 0 3px var(--accent), var(--shadow-2); }
.frame-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.frame-body iframe.next { visibility: hidden; }
.frame-hit { position: absolute; inset: 0; cursor: pointer; }
.frame-head .menu { top: 100%; left: auto; right: auto; }
.zoombar { position: absolute; left: 50%; bottom: 16px; translate: -50% 0; display: flex; align-items: center; gap: 2px; padding: 4px; background: var(--surface); border-radius: 12px; border-color: var(--line); box-shadow: 0 4px 16px rgba(17, 17, 17, 0.06); }
/* Share dialog: compact, white surface, hairlines; one select style, global focus ring */
.share-dialog { width: min(460px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-3); }
.share-dialog::backdrop { background: rgba(17, 17, 17, 0.24); }
.share-body { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; }
.share-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-right: -6px; }
.share-head h2 { margin: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.share-head .icon-btn, .share-person .icon-btn { width: 28px; height: 28px; border-radius: 7px; }
.share-head .icon-btn svg, .share-person .icon-btn svg { width: 15px; height: 15px; }
.share-invite, .share-link { display: flex; gap: 6px; }
.share-invite input, .share-link input { flex: 1; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.share-link input { background: var(--surface-2); color: var(--ink-2); text-overflow: ellipsis; }
.share-invite .chip-select { height: 32px; }
.share-hint { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.share-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 232px; overflow-y: auto; scrollbar-width: thin; }
.share-person { display: flex; align-items: center; gap: 10px; min-height: 42px; }
.share-avatar { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); font-size: 12px; font-weight: 600; text-transform: uppercase; }
.share-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.share-who small { display: block; font-weight: 400; font-size: 12px; color: var(--ink-3); }
.share-controls { display: flex; align-items: center; gap: 2px; }
.share-controls .chip-select { height: 28px; }
.share-owner { font-size: 13px; color: var(--ink-3); padding-right: 6px; }
.share-sep { border: 0; border-top: 1px solid var(--line); margin: 0; }
.share-label { margin: 0; font-size: 12px; font-weight: 500; color: var(--ink-2); }
.share-access { display: flex; align-items: flex-start; gap: 10px; }
.share-access-icon { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); }
.share-access-icon.on { background: var(--accent-soft); color: var(--accent-text); }
.share-access-icon svg { width: 15px; height: 15px; }
.share-access-text { min-width: 0; }
.share-access .share-hint { margin-top: 4px; }
.share-error { margin: 0; color: var(--danger); font-size: 13px; }
.recent.shared { display: block; padding: 14px; text-decoration: none; color: inherit; }
.recent.shared b { margin: 0 0 2px; }
.recent.shared small { margin: 0; }

/* Save / Discard for pending visual edits: floats at the top of the canvas */
.draft-bar { position: absolute; z-index: 15; top: 16px; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 4px 16px rgba(17, 17, 17, 0.08); white-space: nowrap; }
.draft-bar span { font-weight: 500; color: var(--ink-2); margin-right: 4px; }
@media (prefers-reduced-motion: no-preference) { .draft-bar:not([hidden]) { animation: enter 200ms ease-out both; } }
.tool { width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); display: grid; place-items: center; }
.tool[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); }
.zoom-val { min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 500; }
.zoom-sep { width: 1px; height: 18px; background: var(--line-strong); margin: 0 4px; }

/* Toast + preview */
.toast:not(.show) { position: fixed; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.toast.show { display: flex; align-items: center; gap: 10px; }
.toast { position: fixed; left: 50%; bottom: 80px; translate: -50% 0; z-index: 50; padding: 10px 16px; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 500; box-shadow: var(--shadow-2); max-width: min(90vw, 560px); }
.toast.err { background: var(--danger); }
.preview-dialog { border: 0; padding: 0; border-radius: var(--r-xl); box-shadow: var(--shadow-3); background: var(--surface); max-width: 96vw; max-height: 94vh; }
.preview-dialog::backdrop { background: rgba(24,24,27,.4); }
.preview-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 10px 10px 18px; }
.preview-body { padding: 0 16px 16px; overflow: auto; overscroll-behavior: contain; max-height: calc(94vh - 60px); }
.preview-body iframe { display: block; border: 0; border-radius: 24px; box-shadow: var(--shadow-1); background: #fff; }

/* Staged entrance for infrequent moments, gated by reduced motion (better-ui) */
@media (prefers-reduced-motion: no-preference) {
  .enter { animation: enter 300ms ease-out both; }
  .home-inner > * { animation: enter 300ms ease-out both; }
  .home-inner > :nth-child(2) { animation-delay: 100ms; }
  .home-inner > :nth-child(3) { animation-delay: 200ms; }
  @keyframes enter { from { opacity: 0; filter: blur(4px); transform: translateY(12px); } }
}
@media (prefers-reduced-motion: reduce) {
  .enter, .home-inner > * { animation: fade 200ms ease-out both; }
  @keyframes fade { from { opacity: 0; } }
  .chip.active::before { animation: none; border-right-color: var(--accent); }
}

/* Topbar wraps instead of clipping at narrow widths (WCAG 1.4.10) */
@media (max-width: 520px) {
  .topbar { flex-wrap: wrap; height: auto; min-height: 56px; padding-block: 8px; row-gap: 8px; }
  .topbar-actions { margin-left: 0; width: 100%; flex-wrap: wrap; }
}
@media (max-width: 860px) {
  /* iOS zooms the page when an input is under 16px (better-typography) */
  .composer textarea, .crumb-input, .t-sec select, .chip-select { font-size: 16px; }
  #chatForm .composer-bar { flex-wrap: wrap; row-gap: 8px; }
  .editor { grid-template-columns: 1fr; grid-template-rows: 46dvh 1fr; }
  .panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .topbar { gap: 8px; } .crumbs { display: none; }
  .home h1 { font-size: 30px; }
  .btn, .send, .icon-btn, .tool { min-height: 44px; min-width: 44px; }
}

/* Menu separators, home projects header */
.menu-sep { border: 0; border-top: 1px solid var(--line); margin: 4px 6px; }
.recents-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 48px 0 12px; }
.recents-head .home-h2 { margin: 0; }

/* Stop generating: the chat send button while Claude works */
.send.stop { background: var(--ink); }

/* Project search and duplicate */
.recents-tools { display: flex; align-items: center; gap: 8px; }
.search { height: 34px; width: 220px; max-width: 46vw; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.search::placeholder { color: var(--ink-3); }
.recent-wrap .dup { right: 48px; }

/* Visual editing: clicks go to the screen's own editor script, not the frame's select overlay */
.frame.vediting .frame-hit { pointer-events: none; }
.frame.vediting .frame-body { box-shadow: 0 0 0 3px var(--accent), var(--shadow-2); }
.inspector { display: flex; flex-direction: column; gap: 12px; padding: 16px; overflow: auto; flex: 1; min-height: 0; }
.insp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.insp-head strong { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insp-actions, .insp-row { display: flex; flex-wrap: wrap; gap: 6px; }
.btn-sm { height: 30px; padding: 0 12px; font-size: 13px; }
.btn.danger { color: var(--danger); }
.insp-target { margin: 0; color: var(--ink-2); }
.insp-target code { font: 500 12px var(--mono); background: var(--surface-2); padding: 2px 6px; border-radius: 6px; color: var(--ink); }
.insp-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-2); }
.insp-field textarea, .insp-field input[type="number"] { font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.insp-field textarea { resize: vertical; }
.insp-field input[type="color"] { width: 100%; height: 32px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.insp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Loading: a project thumbnail shimmers (neutral, no color) until its preview has rendered, then fades in.
   Motion only when welcome; under reduced motion the thumbnail just fades in. */
@media (prefers-reduced-motion: no-preference) {
  .recent .thumb:has(iframe:not(.loaded))::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
    translate: -100% 0; animation: shimmer 1.4s var(--ease-out) infinite;
  }
  @keyframes shimmer { to { translate: 100% 0; } }
}

/* Destructive menu items read differently from safe ones */
.menu button.danger { color: var(--danger); }

/* Layers panel (visual edit): one row per element, indented by depth */
.insp-layers { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 12px; }
.insp-label { margin: 0; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.layers { display: flex; flex-direction: column; gap: 1px; }
.layer { text-align: left; border: 0; background: none; height: 28px; padding-right: 8px; border-radius: 6px; font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color 120ms ease-out; }
.layer[aria-current="true"] { background: var(--accent-soft); color: var(--accent-text); font-weight: 500; }
.layer.drop { box-shadow: inset 0 2px 0 var(--accent-ring); }
@media (hover: hover) { .layer:not([aria-current="true"]):hover { background: var(--surface-2); color: var(--ink); } }

/* Version compare (in the preview dialog) */
.cmp { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.cmp-pane { display: flex; flex-direction: column; gap: 10px; }
.cmp-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cmp-frame { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); border: 1px solid transparent; }
.cmp-frame iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; pointer-events: none; }

.insp-shared { font-size: 13px; }

/* Model advice next to an attachment (Haiku + image) */

/* Inspector sections (visual edit) */
.insp-sec { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.insp-field select { height: 32px; border: 1px solid var(--line); border-radius: 8px; background-color: var(--surface); padding: 0 28px 0 8px; font: inherit; font-size: 14px; color: var(--ink); }
.insp-field input[type="number"] { height: 32px; font-variant-numeric: tabular-nums; }

/* Canvas toolbar: screen size group, device frame menu (opens upward), preview mode */
.tool-group { display: flex; gap: 2px; }
.zoombar .menu { top: auto; bottom: calc(100% + 10px); right: auto; left: 50%; translate: -50% 0; min-width: 200px; }
.menu button[aria-checked="true"] { color: var(--accent-text); font-weight: 500; }
.menu button[aria-checked="true"]::after { content: "✓"; float: right; }
.canvas.previewing .frame-hit { pointer-events: none; }
.canvas.previewing .frame-head .ver, .canvas.previewing .frame-head .menu-wrap { display: none; }
.frame-title { cursor: grab; }
.canvas.moving, .canvas.moving .frame-hit, .canvas.moving .frame-title { cursor: grabbing; }

/* Floating toolbar next to the selected element */
.ctxbar { position: absolute; z-index: 15; display: flex; align-items: center; gap: 2px; padding: 4px; background: var(--surface); border-radius: 10px; box-shadow: var(--shadow-3); }
.ctx-name { font: 500 11px var(--mono); color: var(--ink-2); padding: 0 8px 0 6px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-btn { width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--ink-2); display: grid; place-items: center; }
.ctx-btn svg { width: 16px; height: 16px; }
.ctx-btn:disabled { opacity: .35; cursor: default; }
.ctx-swatch { position: relative; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; cursor: pointer; }
.ctx-swatch span { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(23, 23, 23, .18); }
.ctx-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ctx-swatch:focus-within { outline: 2px solid var(--accent-ring); outline-offset: 0; }
.ctx-sep { width: 1px; height: 16px; background: var(--line-strong); margin: 0 3px; }
@media (hover: hover) { .ctx-btn:not(:disabled):hover, .ctx-swatch:hover { background: var(--surface-2); color: var(--ink); } }
@media (prefers-reduced-motion: no-preference) {
  .ctxbar:not([hidden]) { animation: ctx-in 140ms ease-out; }
  @keyframes ctx-in { from { opacity: 0; transform: translateY(4px); } }
}

/* Device mockups: drawn around the live screen on the canvas only (exports never include them).
   The bezel is the frame's ::before, behind the screen; ::after adds the side buttons, the MacBook
   base or the display stand. --bz is the bezel's top thickness (the title sits above it). */
.frame[data-mock] .frame-head { bottom: calc(100% + var(--bz)); }
.frame[data-mock] .frame-body { box-shadow: none; }
.frame[data-mock].selected .frame-body, .frame[data-mock].vediting .frame-body { box-shadow: 0 0 0 3px var(--accent-ring); }
.frame[data-mock]::before, .frame[data-mock]::after { content: ""; position: absolute; pointer-events: none; }
.frame[data-mock]::before { z-index: -1; inset: calc(-1 * var(--bz)); }

.frame[data-mock="iphone"] { --bz: 13px; }
.frame[data-mock="iphone"] .frame-body { border-radius: 52px; }
.frame[data-mock="iphone"]::before {
  border-radius: 65px;
  background: linear-gradient(135deg, #222226 0%, #0b0b0d 32%, #0b0b0d 68%, #1c1c20 100%);
  box-shadow: 0 0 0 1.5px #3c3b39, 0 0 0 3px #9a9993, 0 0 0 3.5px #6f6e69, 0 40px 70px -18px rgba(23, 23, 23, .38), 0 12px 24px rgba(23, 23, 23, .1);
}
.frame[data-mock="iphone"]::after { /* volume buttons left, side button right */
  left: calc(-1 * var(--bz) - 7px); top: 190px; width: 4px; height: 58px; border-radius: 2px 0 0 2px; background: #6f6e69;
  box-shadow: 0 74px 0 #6f6e69, calc(390px + 2 * var(--bz) + 10px) 30px 0 #6f6e69;
}
.frame[data-mock="iphone"] .frame-body::before { /* Dynamic Island */
  content: ""; position: absolute; z-index: 4; top: 11px; left: 50%; width: 122px; height: 35px; margin-left: -61px; border-radius: 18px; background: #000; pointer-events: none;
}

.frame[data-mock="ipad"] { --bz: 24px; }
.frame[data-mock="ipad"] .frame-body { border-radius: 20px; }
.frame[data-mock="ipad"]::before {
  border-radius: 44px;
  background: radial-gradient(circle at 50% 12px, #24324a 0 3px, #0c0c0e 3.6px, transparent 4px), linear-gradient(135deg, #1f1f23 0%, #0c0c0e 34%, #0c0c0e 66%, #1a1a1e 100%);
  box-shadow: 0 0 0 2px #cfd0d3, 0 0 0 3px #9fa1a5, 0 40px 80px -20px rgba(23, 23, 23, .32), 0 12px 24px rgba(23, 23, 23, .08);
}

.frame[data-mock="macbook"] { --bz: 28px; }
.frame[data-mock="macbook"] .frame-body { border-radius: 10px 10px 0 0; }
.frame[data-mock="macbook"]::before {
  inset: -28px -18px -30px; border-radius: 24px 24px 6px 6px;
  background: radial-gradient(circle at 50% 14px, #26324a 0 2.6px, #050506 3.2px, transparent 3.6px), linear-gradient(180deg, #17171a, #0a0a0b);
  box-shadow: 0 0 0 1.5px #b8babd, 0 0 0 2.5px #8d8f93;
}
.frame[data-mock="macbook"]::after { /* base, with the finger notch */
  z-index: -1; top: calc(100% + 30px); left: -120px; right: -120px; height: 24px;
  border-radius: 3px 3px 16px 16px / 3px 3px 12px 12px;
  background: radial-gradient(ellipse 110px 8px at 50% 0, #a3a5a9 0 92%, transparent 100%), linear-gradient(180deg, #e4e5e7 0%, #cdcfd2 40%, #a2a4a8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 24px 34px -10px rgba(23, 23, 23, .35);
}

.frame[data-mock="display"] { --bz: 24px; }
.frame[data-mock="display"] .frame-body { border-radius: 2px; }
.frame[data-mock="display"]::before {
  border-radius: 18px;
  background: linear-gradient(135deg, #1d1d20 0%, #0b0b0c 34%, #0b0b0c 66%, #18181b 100%);
  box-shadow: 0 0 0 3px #d6d7da, 0 0 0 4px #a6a8ac, 0 40px 80px -24px rgba(23, 23, 23, .3);
}
.frame[data-mock="display"]::after { /* stand and foot */
  z-index: -2; top: calc(100% + 24px); left: 50%; width: 480px; margin-left: -240px; height: 224px;
  background:
    linear-gradient(90deg, #b2b4b7, #e5e6e8 42%, #d4d5d8 60%, #aeb0b3) center top / 230px 208px no-repeat,
    linear-gradient(180deg, #e6e7e9, #b6b8bb) center bottom / 480px 16px no-repeat;
  filter: drop-shadow(0 14px 16px rgba(23, 23, 23, .2));
}
@media (max-width: 860px) { .zoombar { width: max-content; max-width: calc(100% - 24px); flex-wrap: wrap; justify-content: center; } }

/* Undo/redo in the canvas toolbar; this project's running Claude usage under the chat */
.tool:disabled { opacity: .35; cursor: default; }
.usage-total { margin: 0; padding: 0 16px 8px; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.toast .btn { color: var(--ink); }

/* Right sidebar while editing visually */
.editor.with-rpanel { grid-template-columns: 416px 1fr 300px; }
.rpanel { display: flex; flex-direction: column; min-height: 0; background: var(--surface); border-left: 1px solid var(--line); }
.rp-head { display: flex; align-items: center; gap: 2px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--line); }
.rp-head strong { flex: 1; font-weight: 500; }
.rp-btn { width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); display: grid; place-items: center; }
.rp-btn svg { width: 17px; height: 17px; }
@media (hover: hover) { .rp-btn:hover { background: var(--surface-2); color: var(--ink); } }
.rp-search { margin: 10px 12px 0; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); font: inherit; font-size: 13px; color: var(--ink); }
.rp-open { position: absolute; top: 12px; right: 12px; z-index: 16; background: var(--surface); box-shadow: var(--shadow-2); }
.rpanel .inspector { padding: 14px 16px; }

@media (max-width: 860px) { .editor.with-rpanel { grid-template-columns: 1fr; } .rpanel { border-left: 0; border-top: 1px solid var(--line); max-height: 45dvh; } }
@media (max-width: 1280px) { .editor.with-rpanel { grid-template-columns: 300px 1fr 280px; } }
.editor.with-rpanel .zoombar { width: max-content; max-width: calc(100% - 24px); flex-wrap: wrap; justify-content: center; }

/* Rich menus (Export): small group labels, an icon per row, compact rows, trailing hint */
.menu-rich { min-width: 260px; padding: 6px; gap: 1px; }
.menu-label { margin: 0; padding: 8px 10px 4px; font-size: 11px; font-weight: 500; color: var(--ink-3); letter-spacing: .02em; }
.menu .mi { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; font-size: 13px; color: var(--ink); }
.mi svg { width: 16px; height: 16px; color: var(--ink-2); }
.mi span { flex: 1; white-space: nowrap; }
.mi kbd { font: 11px var(--mono); color: var(--ink-3); }
.mi:disabled svg { opacity: .5; }
.menu-rich .menu-sep { margin: 5px 4px; }
.menu-label:has(+ .mi:disabled) { opacity: .7; }
.mi.danger svg { color: var(--danger); }

/* Layer rows: eye (hide) and lock toggles show on hover, and stay visible while active */
.layer-row { display: flex; align-items: center; border-radius: 6px; }
.layer-row .layer { flex: 1; min-width: 0; }
.layer-tog { width: 24px; height: 24px; flex: none; border: 0; border-radius: 5px; background: none; color: var(--ink-3); display: grid; place-items: center; opacity: 0; }
.layer-tog svg { width: 14px; height: 14px; }
.layer-row:hover .layer-tog, .layer-tog.on, .layer-tog:focus-visible { opacity: 1; }
@media (hover: hover) { .layer-tog:hover { background: var(--surface-2); color: var(--ink); } }
.layer-row.is-hidden .layer { color: var(--ink-3); text-decoration: line-through; text-decoration-color: rgba(23,23,23,.25); }

/* Account (GitHub sign-in) */
.account { margin-left: 8px; }
body.on-home .account { margin-left: auto; }
.account-btn { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; }
.account-btn:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.avatar { border-radius: 50%; display: block; box-shadow: 0 0 0 1px rgba(23, 23, 23, .08); }
.account-menu { min-width: 248px; }
.account-card { display: flex; align-items: center; gap: 12px; padding: 10px 10px 8px; }
.account-card div { display: flex; flex-direction: column; min-width: 0; }
.account-card strong { font-weight: 500; font-size: 14px; }
.account-card span { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-card small { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.menu a.mi { text-decoration: none; border-radius: 6px; }
.mi > svg:last-child:not(:first-child) { margin-left: auto; width: 14px; height: 14px; color: var(--ink-3); }
.account-menu form { display: contents; }
.account-menu form .mi { width: 100%; }
@media (hover: hover) { .menu a.mi:hover { background: var(--surface-2); } }

/* Sign-in page */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; background-color: var(--bg); background-image: radial-gradient(rgba(23, 23, 23, 0.16) 1.2px, transparent 1.4px); background-size: 20px 20px; }
.login-card { width: min(380px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 36px 32px 28px; background: var(--surface); border-radius: var(--r-xl, 16px); box-shadow: var(--shadow-3); }
.login-mark { width: 36px; height: 36px; border-radius: 10px; margin-bottom: 6px; }
.login-card h1 { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }
.login-card p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; text-wrap: pretty; }
.login-card small { color: var(--ink-3); font-size: 12px; }
.login-github { width: 100%; height: 42px; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 10px; background: #181717; color: #fff; text-decoration: none; box-shadow: var(--shadow-filled); }
.login-github svg { width: 18px; height: 18px; }
@media (hover: hover) { .login-github:hover { background: #2b2a2a; } }
.login-error { width: 100%; padding: 8px 12px; border-radius: 8px; background: #FDECEC; color: var(--danger) !important; font-size: 13px !important; }

/* Per-size editing note in the inspector */
.bp-note { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-text); font-size: 12px; line-height: 1.45; }
.bp-note strong { font-weight: 600; }

/* Which element or screen the next chat message edits */
.msg-ctx { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 500; color: var(--accent-text); }
.editing.el { background: var(--accent); color: var(--accent-ink); }
.log, .inspector, .theme-pane { scrollbar-width: thin; scrollbar-color: #D1D5DB transparent; }


/* Live generation: the screen being written gets a soft accent ring and glow, a pale gradient behind
   its content until the design paints its own background, and a "Generating…" pill underneath.
   --inv (1 / canvas zoom) keeps the ring and pill the same size on screen at any zoom. */
.frame .gen-pill { display: none; }
.frame.generating .frame-body { background: #FFFFFF; box-shadow: 0 0 0 calc(2px * var(--inv, 1)) var(--accent-ring), 0 0 0 calc(6px * var(--inv, 1)) rgba(58, 131, 247, .14); }
.frame.generating .frame-body iframe { background: transparent; }
.frame.generating .gen-pill { display: inline-flex; align-items: center; gap: 8px; position: absolute; top: calc(100% + 16px * var(--inv, 1)); left: 50%; transform: translateX(-50%) scale(var(--inv, 1)); transform-origin: top center; padding: 6px 14px 6px 10px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; box-shadow: 0 4px 12px rgba(17, 17, 17, .16); }
.gen-spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .frame.generating .frame-body { animation: gen-glow 2.4s ease-in-out infinite; }
  @keyframes gen-glow { 50% { box-shadow: 0 0 0 calc(2px * var(--inv, 1)) var(--accent-ring), 0 0 0 calc(10px * var(--inv, 1)) rgba(58, 131, 247, .08); } }
  .gen-spin { animation: gen-spin 800ms linear infinite; }
  @keyframes gen-spin { to { transform: rotate(360deg); } }
}

/* Projects pager */
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 20px; }
.pager span { color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }

/* Integrations: MCP setup cards (home view) */
.integ { display: flex; flex-direction: column; gap: 16px; padding-top: 24px; }
.integ code { font: 500 0.88em var(--mono); background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }
.integ-intro h2 { margin: 0 0 6px; font: 500 20px/28px Inter, var(--font); letter-spacing: -0.01em; }
.integ-intro p { margin: 0; color: var(--ink-2); max-width: 64ch; }
.integ-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px !important; padding: 5px 12px 5px 10px; border-radius: 999px; background: var(--surface-2); font-size: 13px; color: var(--ink) !important; }
.integ-status .dot { width: 8px; height: 8px; border-radius: 50%; background: #9CA3AF; }
.integ-status[data-state="ok"] .dot { background: var(--success); }
.integ-status[data-state="err"] .dot { background: var(--danger); }
.integ-card { display: flex; flex-direction: column; gap: 16px; padding: 20px; border: 1px solid var(--h-line); border-radius: var(--r-lg); background: #FFFFFF; }
.integ-head { display: flex; align-items: flex-start; gap: 14px; }
.integ-head h3 { margin: 0 0 2px; font: 500 16px/22px Inter, var(--font); }
.integ-head p { margin: 0; color: var(--ink-2); font-size: 14px; }
.integ-logos { display: flex; flex: none; }
.integ-logos img { width: 36px; height: 36px; padding: 7px; border: 1px solid var(--h-line); border-radius: 10px; background: #FFFFFF; }
.integ-logos img + img { margin-left: -10px; }
.integ .seg { flex-wrap: wrap; }
.integ-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 14px; }
.integ-steps li { counter-increment: step; position: relative; padding-left: 32px; min-width: 0; }
.integ-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); font: 500 12px/1 Inter, var(--font); color: var(--ink-2); }
.integ-steps p { margin: 1px 0 0; font-size: 14px; }
.integ-code { position: relative; margin-top: 8px; }
.integ-code pre { margin: 0; padding: 12px 88px 12px 14px; overflow-x: auto; border-radius: 10px; background: #F7F7F8; border: 1px solid var(--h-line); }
.integ-code pre code { background: none; padding: 0; font: 400 12.5px/1.6 var(--mono); white-space: pre; }
.integ-copy { position: absolute; top: 7px; right: 7px; display: inline-flex; align-items: center; gap: 6px; }
.integ-copy svg { width: 14px; height: 14px; }
.integ-warn { display: flex; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; background: #FFF7E6; color: #7A4A00; font-size: 13px; }
.integ-warn svg { width: 16px; height: 16px; margin-top: 1px; }
.integ-tool { margin: 0; }
.integ-tool dt { margin-bottom: 4px; }
.integ-tool dd { margin: 0; color: var(--ink-2); font-size: 14px; max-width: 70ch; }
.integ-note { margin: 0; color: var(--ink-2); font-size: 13px; }
@media (max-width: 600px) { .integ-card { padding: 16px; } .integ-head { flex-direction: column; } }

/* Workspace appearance. Screen previews keep the colors of their own designs. */
.ui-theme-switch {
  display: inline-flex; align-items: center; gap: 2px; flex: none;
  height: 32px; padding: 3px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--surface-2);
}
.ui-theme-switch button {
  width: 26px; height: 24px; display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 999px; background: none; color: var(--ink-2);
}
.ui-theme-switch button svg { width: 15px; height: 15px; }
.ui-theme-switch button[aria-pressed="true"] {
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1);
}
.ui-theme-switch button:hover:not([aria-pressed="true"]) { color: var(--ink); background: var(--ui-hover); }
.hhead .ui-theme-switch { border-color: var(--h-line); }
/* Phones: the appearance switch moves from the top bar into the account menu. */
.account-menu .account-theme { display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 8px 4px 10px; font-size: 13px; color: var(--ink); }
@media (max-width: 520px) {
  .topbar { position: relative; }
  .topbar > .ui-theme-switch { position: absolute; top: 11px; right: 12px; }
  .topbar:has(.account:not([hidden])) > .ui-theme-switch { right: 53px; }
}
@media (prefers-reduced-motion: no-preference) {
  .ui-theme-switch button,
  body, .home, .hhead, .topbar, .panel, .canvas, .sb,
  .composer, .recent, .starter, .menu, .zoombar, .share-dialog, .preview-dialog, .bill-card {
    transition: background-color 220ms var(--ease-out), color 220ms var(--ease-out),
      border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
  }
}
.holo-pointer { overflow: visible; }
#toolSelect .holo-halo {
  fill: none; stroke: #67B2FF; stroke-width: 3.3;
  stroke-linejoin: round; opacity: .75; filter: blur(1.1px);
}
#toolSelect .holo-core {
  fill: #172331; stroke: #EEF8FF; stroke-width: 1.55; stroke-linejoin: round;
}
#toolSelect svg { width: 20px; height: 20px; filter: drop-shadow(0 0 2px rgba(91, 169, 255, .48)); }
.canvas:not(.hand):not(.panning):not(.moving),
.canvas:not(.hand):not(.panning):not(.moving) .frame-hit {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M4 3 14 29l4-11 10-4Z' fill='%23172331' stroke='%2367B2FF' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M4 3 14 29l4-11 10-4Z' fill='%23172331' stroke='%23EEF8FF' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3, default;
}

:root[data-ui-theme="dark"] {
  /* Near-black neutral (cool, not warm grey): page < sidebar < cards, separated by hairlines. */
  color-scheme: dark;
  --bg: #0E0F11;
  --surface: #17181B;
  --surface-2: #1B1C20;
  --surface-hover: #24262B;
  --ink: #EDEEF0;
  --ink-muted: #8E919A;
  --ink-2: #B5B8BF;
  --ink-3: #9C9FA7;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --accent: #3A83F7;
  --accent-hover: #3375DD;
  --accent-text: #8DB7FF;
  --accent-ring: #3A83F7;
  --accent-ink: #FFFFFF;
  --accent-soft: rgba(58, 131, 247, 0.16);
  --danger: #FF8596;
  --success: #8ADDA2;
  --shadow-1: 0 0 0 1px var(--line), 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 0 0 1px var(--line), 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 0 0 1px var(--line), 0 16px 40px rgba(0, 0, 0, 0.26);
  --shadow-filled: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 4px 12px rgba(0, 0, 0, 0.18);
  --ui-hover: #24262B;
  --ui-canvas: #0E0F11;
  --ui-grid: rgba(255, 255, 255, 0.035);
  --ui-scrollbar: #3A3C42;
  --ui-backdrop: rgba(0, 0, 0, 0.6);
  --ui-sidebar-top: #141518;
  --ui-sidebar-bottom: #111215;
  --ui-sidebar-light: #17181B;
  --ui-sidebar-mid: #131417;
  --ui-composer-light: #1F2024;
  --ui-warning-bg: #33291B;
  --ui-warning-ink: #F9D39A;
  --ui-error-bg: #3A1D24;
}
:root[data-ui-theme="dark"] .ui-theme-switch { background: var(--surface-2); }
:root[data-ui-theme="dark"] .home {
  --h-ink: var(--ink); --h-ink-2: var(--ink-2); --h-icon: var(--ink-2);
  --h-line: var(--line); --h-active: var(--surface-hover); --h-link: var(--accent-text);
  background: radial-gradient(ellipse 100% 75% at 52% -18%, rgba(255,255,255,.035), transparent 70%), var(--bg);
}
:root[data-ui-theme="dark"] .sb {
  background: linear-gradient(155deg, var(--ui-sidebar-top) 0%, var(--surface-2) 48%, var(--ui-sidebar-bottom) 100%);
  border-right-color: var(--line);
}
:root[data-ui-theme="dark"] .sb-icon { color: var(--h-icon); }
:root[data-ui-theme="dark"] .sb-search,
:root[data-ui-theme="dark"] .sb-plus,
:root[data-ui-theme="dark"] .sb-apps > *,
:root[data-ui-theme="dark"] .hhist,
:root[data-ui-theme="dark"] .hattach,
:root[data-ui-theme="dark"] .hrec .apps {
  background: var(--surface); color: var(--ink); border-color: var(--line);
}
:root[data-ui-theme="dark"] .sb-scroll,
:root[data-ui-theme="dark"] .hmain,
:root[data-ui-theme="dark"] .log,
:root[data-ui-theme="dark"] .inspector,
:root[data-ui-theme="dark"] .theme-pane { scrollbar-color: var(--ui-scrollbar) transparent; }
:root[data-ui-theme="dark"] .sb-connect {
  border-top-color: var(--line);
  background: linear-gradient(165deg, var(--ui-sidebar-light), var(--ui-sidebar-mid) 75%, var(--ui-sidebar-bottom));
}
:root[data-ui-theme="dark"] .sb-connect p,
:root[data-ui-theme="dark"] .hnotice > svg,
:root[data-ui-theme="dark"] .hnotice button { color: var(--ink-2); }
:root[data-ui-theme="dark"] .hhead { background: var(--bg); border-bottom: 1px solid var(--line); }
:root[data-ui-theme="dark"] .hnew,
:root[data-ui-theme="dark"] .hnotice { background: var(--surface-2); color: var(--ink-2); }
:root[data-ui-theme="dark"] .home .hbox {
  background: linear-gradient(150deg, var(--ui-composer-light), var(--surface) 72%);
  border-color: var(--line); box-shadow: var(--shadow-2);
}
:root[data-ui-theme="dark"] .home .hbox.drop,
:root[data-ui-theme="dark"] #chatForm:focus-within,
:root[data-ui-theme="dark"] #chatForm.drop {
  border-color: var(--accent-ring); box-shadow: 0 0 0 3px var(--accent-soft);
}
:root[data-ui-theme="dark"] .hbar .chip-select,
:root[data-ui-theme="dark"] #chatForm .chip-select,
:root[data-ui-theme="dark"] .chip-select {
  background-color: var(--surface-2); color: var(--ink);
  border-color: var(--line);
}
:root[data-ui-theme="dark"] .home .hsend { color: var(--ink-2); }
:root[data-ui-theme="dark"] .home .hbox:has(textarea:not(:placeholder-shown)) .hsend,
:root[data-ui-theme="dark"] #chatForm .send,
:root[data-ui-theme="dark"] .btn-primary { background: var(--accent); color: #101C31; }
:root[data-ui-theme="dark"] .btn-primary:not(:disabled):hover { background: var(--accent-hover); }
:root[data-ui-theme="dark"] .recent .thumb-gallery { background: var(--surface-2); }
:root[data-ui-theme="dark"] .recent .thumb-more,
:root[data-ui-theme="dark"] .recent-wrap .del { background: var(--surface); color: var(--ink); }
:root[data-ui-theme="dark"] .canvas {
  background-color: var(--ui-canvas);
  background-image: linear-gradient(var(--ui-grid) 1px, transparent 1px), linear-gradient(90deg, var(--ui-grid) 1px, transparent 1px);
}
:root[data-ui-theme="dark"] .chip-select:hover,
:root[data-ui-theme="dark"] .t-sec select:hover,
:root[data-ui-theme="dark"] .insp-field select:hover { background-color: var(--surface-hover); }
:root[data-ui-theme="dark"] .zoombar,
:root[data-ui-theme="dark"] .draft-bar,
:root[data-ui-theme="dark"] .ctxbar { box-shadow: var(--shadow-2); }
:root[data-ui-theme="dark"] .share-dialog::backdrop,
:root[data-ui-theme="dark"] .preview-dialog::backdrop { background: var(--ui-backdrop); }
:root[data-ui-theme="dark"] .toast { background: var(--surface-hover); color: var(--ink); }
:root[data-ui-theme="dark"] .frame.generating .frame-body { background: var(--surface-2); }
:root[data-ui-theme="dark"] .frame.generating .gen-pill { background: var(--surface-hover); color: var(--ink); }
:root[data-ui-theme="dark"] .integ-card,
:root[data-ui-theme="dark"] .integ-logos img { background: var(--surface); }
:root[data-ui-theme="dark"] .integ-code pre { background: var(--surface-2); }
:root[data-ui-theme="dark"] .integ-warn { background: var(--ui-warning-bg); color: var(--ui-warning-ink); }
:root[data-ui-theme="dark"] .login-error { background: var(--ui-error-bg); }
:root[data-ui-theme="dark"] .sb-item:not([aria-current]):hover,
:root[data-ui-theme="dark"] .sb-team:hover,
:root[data-ui-theme="dark"] .sb-icon:hover,
:root[data-ui-theme="dark"] .sb-plus:hover,
:root[data-ui-theme="dark"] .hattach:hover,
:root[data-ui-theme="dark"] .hhist:hover,
:root[data-ui-theme="dark"] .hnew:hover { background: var(--surface-hover); color: var(--ink); }
:root[data-ui-theme="dark"] .home.sb-open .sb-scrim { background: var(--ui-backdrop); }
:root[data-ui-theme="dark"] .login { background-image: radial-gradient(var(--ui-grid) 1.2px, transparent 1.4px); }
:root[data-ui-theme="dark"] .recent .thumb:has(iframe:not(.loaded))::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
}

/* Billing & Usage (home view, FIGIT_BILLING): cards on the white canvas, tokens only (light and dark). */
.bill { display: flex; flex-direction: column; gap: 16px; padding-top: 24px; }
.bill-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bill-card h2 { margin: 0; font: 600 15px/22px var(--font); }
.bill-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.bill-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bill-head h2 { flex: 1; }
.bill-kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.bill-kv span { color: var(--ink-2); }
.bill-kv strong { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.bill-big { margin: 0; font: 600 32px/1.1 var(--font); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bill-big span { font: 400 14px var(--font); color: var(--ink-2); letter-spacing: 0; }
.bill-lots, .bill-costs { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bill-lots li, .bill-costs li { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.bill-lots li > span, .bill-costs li > span { flex: 1; color: var(--ink-2); }
.bill-lots small { color: var(--ink-3); font-size: 12px; min-width: 110px; text-align: right; }
.bill-costs { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: 24px; }
.bill-muted { margin: 0; color: var(--ink-3); font-size: 13px; }
.bill-err { margin: 0; color: var(--danger); font-size: 13px; }
.bill-err:empty { display: none; }
.bill-note { margin: 0; padding: 8px 10px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--ink); font-size: 13px; }
.bill-alert { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 14px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--ink); }
.bill-alert.bad { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); }
.bill-alert ul { margin: 0; padding-left: 18px; flex: 1; }
.bill-alert a { color: var(--accent-text); }
.bill-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bill-actions:has(> .btn-primary:last-child) { justify-content: flex-end; }
.bill-inline { display: flex; gap: 8px; }
.bill-inline .input { flex: 1; }
.bill-seg .seg-btn[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.bill-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.bill-plan { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--line); }
.bill-plan.current { box-shadow: 0 0 0 2px var(--accent-ring); }
.bill-plan h3 { margin: 0; font: 600 15px var(--font); }
.bill-plan ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 13px; flex: 1; }
.bill-price { margin: 0; font: 600 22px var(--font); font-variant-numeric: tabular-nums; }
.bill-price span { font: 400 13px var(--font); color: var(--ink-3); }
.bill-table { overflow-x: auto; }
.bill-table table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.bill-table th, .bill-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); }
.bill-table th { color: var(--ink-3); font-weight: 500; }
.bill-table td.neg { color: var(--ink-2); text-align: right; }
.bill-table td.pos { color: var(--success); text-align: right; }
.bill-table a, .bill-legal a { color: var(--accent-text); }
.bill-legal { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); }
.bill-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.bill-form > .bill-muted, .bill-form > .bill-err, .bill-form > .bill-actions, .bill-form > .input { grid-column: 1 / -1; }
.bill-field { display: grid; gap: 4px; font-size: 13px; }
.bill-field[hidden] { display: none; }
.bill-field > span { color: var(--ink-2); font-weight: 500; }
.bill .input, .bill-dlg .input { width: 100%; min-height: 36px; padding: 6px 10px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.bill .input:focus-visible, .bill-dlg .input:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 0; }
.bill-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--ink-2); }
.bill-check input { margin-top: 3px; }
.bill-check a { color: var(--accent-text); }
.btn-danger { background: var(--surface); color: var(--danger); border-color: var(--line) !important; }
.bill a.btn { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
.linklike { border: 0; background: none; padding: 0; color: var(--accent-text); text-align: left; flex: 1; text-decoration: underline; text-underline-offset: 2px; }
.bill-dlg { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; border: 0; border-radius: var(--r-lg); padding: 20px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-3); }
.bill-dlg::backdrop { background: var(--ui-backdrop, rgba(17, 17, 17, 0.32)); }
.bill-dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.bill-dlg-head h2 { margin: 0; font: 600 17px var(--font); }
.bill-dlg form, .bill-sum { display: flex; flex-direction: column; gap: 10px; }
.bill-thread { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.bill-msg { padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); }
.bill-msg.mine { background: var(--accent-soft); }
.bill-msg p { margin: 4px 0 0; white-space: pre-wrap; }
.bill-msg small { color: var(--ink-3); }
@media (max-width: 600px) { .bill-card { padding: 16px; } .bill-kv { flex-direction: column; gap: 2px; } .bill-kv strong { text-align: left; } }

/* File selection sheet. The browser's final system picker remains platform-owned. */
.upload-dialog {
  width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  padding: 22px; border: 1px solid var(--line); border-radius: 20px;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-3);
}
.upload-dialog::backdrop { background: var(--ui-backdrop); }
.upload-head { display: flex; align-items: flex-start; justify-content: space-between; }
.upload-mark {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 13px; background: var(--accent-soft); color: var(--accent-text);
}
.upload-mark svg { width: 21px; height: 21px; }
.upload-close { width: 28px; height: 28px; border-radius: 8px; margin: -4px -4px 0 0; }
.upload-close svg { width: 16px; height: 16px; }
.upload-dialog h2 { margin: 18px 0 4px; font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -.02em; }
.upload-dialog p { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.upload-drop {
  min-height: 176px; margin: 20px 0 16px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px; padding: 20px;
  border: 1.5px dashed var(--line-strong); border-radius: 14px;
  background: var(--surface-2); text-align: center;
}
.upload-drop.dragging {
  border-color: var(--accent-ring);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-ring);
}
.upload-drop-icon {
  width: 40px; height: 40px; display: grid; place-items: center;
  margin-bottom: 8px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink-2);
}
.upload-drop-icon svg { width: 20px; height: 20px; }
.upload-drop strong { font-size: 13px; font-weight: 600; }
.upload-drop > span:last-child { color: var(--ink-2); font-size: 12px; }
.upload-dialog .upload-error { margin: -6px 0 14px; color: var(--danger); }
.upload-actions { display: flex; justify-content: flex-end; gap: 8px; }
.upload-actions .btn { height: 34px; }
:root[data-ui-theme="dark"] .upload-actions .btn-primary { background: var(--accent); color: #101C31; }
@media (max-width: 520px) {
  .upload-dialog { padding: 18px; }
  .upload-actions .btn { min-height: 42px; }
}
@media (prefers-reduced-motion: no-preference) {
  .upload-dialog[open] { animation: upload-in 180ms var(--ease-out) both; }
  .upload-dialog[open]::backdrop { animation: upload-fade 180ms ease-out both; }
  @keyframes upload-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
  @keyframes upload-fade { from { opacity: 0; } }
}

/* Copy to Figma button: Figma logo, spinner while converting */
#copyFigmaBtn { display: inline-flex; align-items: center; gap: 8px; }
#copyFigmaBtn .figma-logo { width: 10px; height: 15px; flex: none; }
.btn-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: currentColor; flex: none; }
@media (prefers-reduced-motion: no-preference) { .btn-spin { animation: spin 800ms linear infinite; } }

.composer { position: relative; }

/* Headings and the brand name use the landing hero's font. ponytail: !important beats the per-component font shorthands; scope it if a heading ever needs another face. */
:is(h1, h2, h3, .brand, .site-brand, .sb-team) { font-family: "National Park", Inter, ui-sans-serif, system-ui, sans-serif !important; font-weight: 500 !important; letter-spacing: -0.02em; }

/* The wordmark: "outclass" in ink, ".design" in gray, the hero's thin National Park (same as /welcome). */
.wm { font-family: "National Park", Inter, ui-sans-serif, system-ui, sans-serif; font-weight: 400; letter-spacing: -0.02em; }
.wm-d { color: #8a8a91; }
/* Sidebar: the mascot peeks over the wordmark, paws on its top edge. */
.sb-team { flex-direction: column; align-items: flex-start; gap: 0; height: auto; padding: 4px 6px 2px; font-size: 19px; line-height: 1.1; }
.sb-peek { display: block; width: 64px; height: auto; margin: 0 0 -6px 4px; position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) { .sb-team:hover .sb-peek { animation: peek-bob 1.2s ease-in-out; } }
.sb-brand { height: auto; align-items: flex-end; }
.sb-peek { width: 34px; margin: 0 0 -2px 6px; }
@media (max-width: 640px) { .hnew-long { display: none; } }

/* Send buttons: thin brushed-metal ring with a light beam running around it (same as the landing Log in), in light and dark mode alike. */
@property --beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.home .hsend,
.home .hbox:has(textarea:not(:placeholder-shown)) .hsend,
#chatForm .send {
  border: 1px solid transparent !important;
  color: #0a0a0a !important;
  background:
    linear-gradient(180deg, #ffffff, #eef0f3) padding-box,
    conic-gradient(from var(--beam), #c9ccd2, #f7f8fa 8%, #8d929b 14%, #c9ccd2 22%, #c9ccd2 50%, #ffffff 58%, #7d828b 64%, #c9ccd2 72%) border-box !important;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0, 0, 0, 0.08) !important;
  animation: beam 3.5s linear infinite;
}
@keyframes beam { to { --beam: 360deg; } }
@media (prefers-reduced-motion: reduce) { #chatForm .send, .home .hsend { animation: none; } }

/* Billing on: the model is fixed on the server and never shown. */
.paid [data-bind="model"] { display: none; }

/* Top bar (editor): breadcrumb centred on the page, actions as one connected group on the far right, a little shorter. */
@media (min-width: 861px) {
  .topbar { height: 50px; position: relative; gap: 10px; }
  .topbar .crumbs { position: absolute; left: 50%; transform: translateX(-50%); max-width: 36vw; gap: 2px; font-size: 13px; }
  .topbar .crumb { color: var(--ink-3); }
  .topbar .crumb:hover { color: var(--ink); }
  .topbar .crumb-input { width: auto; field-sizing: content; max-width: 30vw; font-size: 13px; }
  .crumb-sep svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .topbar-actions { gap: 0; padding: 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
  .topbar-actions .btn { height: 28px; padding: 0 10px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; border-radius: 7px; }
  .topbar-actions .btn-quiet { background: transparent; border-color: transparent !important; }
  .topbar-actions .btn-quiet:not(:disabled):hover { background: var(--surface-2); }
  .topbar-actions .btn > svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .topbar-actions .btn-primary { margin-left: 2px; }
}
/* Bigger wordmark and mascot in the editor top bar. */
.topbar .brand { font-size: 20px; gap: 10px; letter-spacing: -0.4px; }
.topbar .brand-mark { width: 32px; height: 24px; border-radius: 0; }
/* Sidebar brand matches the editor top bar: mascot beside the wordmark, same sizes. */
.sb-brand { align-items: center; }
.sb-team { flex-direction: row; align-items: center; gap: 10px; height: 34px; padding: 0 6px; font-size: 20px; line-height: 1; letter-spacing: -0.4px; }
.sb-peek { width: 32px; height: 24px; margin: 0; object-fit: contain; object-position: center bottom; }

/* Home header a little shorter (matches the 50px editor bar); the sidebar's brand row keeps lining up with it. */
.hhead { height: 50px; }
.sb-head { padding-top: 8px; padding-bottom: 8px; }

/* Dark mode: the send buttons become graphite metal (dark brushed face, light arrow, a dimmer beam) instead of a bright white block. */
:root[data-ui-theme="dark"] .home .hsend,
:root[data-ui-theme="dark"] .home .hbox:has(textarea:not(:placeholder-shown)) .hsend,
:root[data-ui-theme="dark"] #chatForm .send {
  color: #f2f3f5 !important;
  background:
    linear-gradient(180deg, #3a3d43, #26282c) padding-box,
    conic-gradient(from var(--beam), #4a4e55, #9aa0a8 8%, #33363b 14%, #4a4e55 22%, #4a4e55 50%, #c4c8ce 58%, #2c2f33 64%, #4a4e55 72%) border-box !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

/* Home composer polish: one gap in "New chat", a slimmer credits tab, quieter option chips, a cleaner dark surface. */
.hnew { gap: 6px; padding: 0 10px 0 8px; font-size: 14px; border: 1px solid var(--h-line); background: transparent; }
.hnew:hover { background: #F4F5F6; }
.hnotice { height: 50px; margin-bottom: -12px; padding: 0 10px 12px 14px; gap: 8px; }
.hnotice p { font-size: 13px; color: var(--h-ink-2); }
.hbar .chip-select { border: 1px solid var(--h-line); background-color: transparent; font-weight: 450; }
.hbar .chip-select:hover { background-color: #F4F5F6; }
:root[data-ui-theme="dark"] .hnew { border-color: var(--line); color: var(--ink-2); }
:root[data-ui-theme="dark"] .hnew:hover { background: var(--surface-hover); color: var(--ink); }
:root[data-ui-theme="dark"] .hnotice { background: var(--surface-2); }
:root[data-ui-theme="dark"] .hnotice p { color: var(--ink-2); }
:root[data-ui-theme="dark"] .home .hbox { background: var(--surface); border-color: var(--line); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.25); }
:root[data-ui-theme="dark"] .hbar .chip-select { background-color: transparent; border-color: var(--line); color: var(--ink-2); font-weight: 450; }
:root[data-ui-theme="dark"] .hbar .chip-select:hover { background-color: var(--surface-hover); color: var(--ink); }

/* The editor's top bar belongs to the editor: hidden whenever the editor is, straight from the markup,
   so a refresh on home never flashes two top bars before workspace.js adds body.on-home. */
body:has(#editor[hidden]) .topbar { display: none; }

/* Sidebar search sits at the bottom, above "Connect more apps"; no shortcut keys. */
.sb-search-wrap { flex: none; padding: 0 15px 12px 14.5px; }
.sb-search-wrap .sb-search { margin-top: 0; }
/* Sidebar tabs sit at the bottom too, just above the search box. */
.sb-scroll { display: flex; flex-direction: column; justify-content: flex-end; }
/* No "Chat" title in the header on the chat view. */
.home[data-view="chat"] .hhead-title { display: none; }

/* Only the Style chip is a choice now: effort, device and art are fixed (low, mobile, draw). */
.chip-select:is([data-bind="effort"], [data-bind="device"], [data-bind="art"]) { display: none; }

/* Credits pill in the home header (replaces the clock button). */
.hcredits { display: inline-flex; align-items: center; gap: 6px; height: 29px; padding: 0 11px 0 9px; border: 1px solid var(--h-line); border-radius: 999px; background: transparent; color: var(--h-ink); font: 500 13px/1 Inter, var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hcredits[hidden] { display: none; }
.hcredits svg { width: 13px; height: 13px; fill: #f5b301; stroke: none; }
.hcredits:hover { background: var(--h-active); }

/* Home heading a little bigger. */
.home .hero h1 { font-size: 32px; line-height: 40px; letter-spacing: -0.02em; }
/* The model is fixed on the server (Haiku, low): never show its chip, not even before the script runs. */
.chip-select[data-bind="model"] { display: none !important; }
/* Style chip shows only its palette icon; the select still names itself ("Visual style") for screen readers. */
.chip-select[data-bind="style"] { field-sizing: fixed !important; width: 46px; padding-right: 0 !important; color: transparent !important; background-position: left 10px center, right 7px center !important; }
.chip-select[data-bind="style"] option { color: var(--ink); background: var(--surface); }

/* Skeletons: grey bars in the shape of what's coming, with a soft shimmer, so loading never looks broken. */
.skel { display: block; height: 12px; margin: 10px 0; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2) 0%, var(--h-active, #eef0f3) 50%, var(--surface-2) 100%) 0 0 / 200% 100%; }
.skel-big { height: 28px; }
.skel-card { min-height: 96px; }
/* Micro-interactions, kept small: views fade in, buttons give a soft press, hovers ease. */
@media (prefers-reduced-motion: no-preference) {
  .skel { animation: skel 1.2s ease-in-out infinite; }
  @keyframes skel { to { background-position: -200% 0; } }
  .home [data-view-of] { animation: view-in 160ms ease-out; }
  @keyframes view-in { from { opacity: 0; transform: translateY(4px); } }
  .sb-item, .hnew, .hcredits, .chip-select, .btn, .bill-card button { transition: background-color 120ms ease, color 120ms ease, transform 120ms ease; }
  .sb-item:active, .hnew:active, .hcredits:active { transform: scale(0.97); }
}

/* Style chip: palette icon in the attach button's ink (not the lighter grey), and room between it and the arrow. */
.home .hbar .chip-select[data-bind="style"], #chatForm .chip-select[data-bind="style"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23111111%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M12%2022a1%201%200%200%201%200-20a10%209%200%200%201%2010%209a5%205%200%200%201-5%205h-2.25a1.75%201.75%200%200%200-1.4%202.8l.3.4a1.75%201.75%200%200%201-1.4%202.8z%22%2F%3E%3Ccircle%20cx%3D%2213.5%22%20cy%3D%226.5%22%20r%3D%22.5%22%20fill%3D%22%23111111%22%2F%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2210.5%22%20r%3D%22.5%22%20fill%3D%22%23111111%22%2F%3E%3Ccircle%20cx%3D%226.5%22%20cy%3D%2212.5%22%20r%3D%22.5%22%20fill%3D%22%23111111%22%2F%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%227.5%22%20r%3D%22.5%22%20fill%3D%22%23111111%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23898B87' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
:root[data-ui-theme="dark"] .home .hbar .chip-select[data-bind="style"], :root[data-ui-theme="dark"] #chatForm .chip-select[data-bind="style"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23EDEEF0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M12%2022a1%201%200%200%201%200-20a10%209%200%200%201%2010%209a5%205%200%200%201-5%205h-2.25a1.75%201.75%200%200%200-1.4%202.8l.3.4a1.75%201.75%200%200%201-1.4%202.8z%22%2F%3E%3Ccircle%20cx%3D%2213.5%22%20cy%3D%226.5%22%20r%3D%22.5%22%20fill%3D%22%23EDEEF0%22%2F%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2210.5%22%20r%3D%22.5%22%20fill%3D%22%23EDEEF0%22%2F%3E%3Ccircle%20cx%3D%226.5%22%20cy%3D%2212.5%22%20r%3D%22.5%22%20fill%3D%22%23EDEEF0%22%2F%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%227.5%22%20r%3D%22.5%22%20fill%3D%22%23EDEEF0%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23898B87' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.chip-select[data-bind="style"] { width: 58px; background-size: 15px, 12px !important; background-position: left 11px center, right 10px center !important; }
/* A picked style (not Auto) tints its chip in that style's color, the same swatch its menu row shows, so the
   composer says what kind of design is coming. */
[data-value="Clean white"] { --sty: #a1a1aa; } [data-value="Dark pro"] { --sty: #52525b; } [data-value="Bold brand"] { --sty: #f97316; }
[data-value="Dense tool"] { --sty: #0ea5e9; } [data-value="Playful"] { --sty: #ec4899; } [data-value="Minimal"] { --sty: #84cc16; }
[data-value="Editorial"] { --sty: #b45309; } [data-value="Swiss"] { --sty: #ef4444; } [data-value="Neo-brutalism"] { --sty: #eab308; }
.chip-select[data-bind="style"]:not([data-value="Auto"]), .home .hbar .chip-select[data-bind="style"]:not([data-value="Auto"]), #chatForm .chip-select[data-bind="style"]:not([data-value="Auto"]) { background-color: color-mix(in srgb, var(--sty) 22%, var(--surface-2)) !important; box-shadow: inset 0 0 0 1.5px var(--sty); }
.style-menu li[role="option"]:not([data-value="Auto"])::before { content: ""; flex: none; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--sty); }

/* Style menu (our popover in place of the native list). */
.style-menu { position: fixed; z-index: 1000; min-width: 196px; max-height: min(360px, 60vh); overflow-y: auto; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #fff); box-shadow: 0 1px 2px rgba(17, 17, 17, 0.06), 0 12px 32px rgba(17, 17, 17, 0.12); font: 400 13.5px/1 Inter, var(--font); color: var(--ink); outline: none; }
.style-menu-label { padding: 8px 10px 6px; font-size: 11.5px; font-weight: 500; color: var(--ink-3); letter-spacing: 0.01em; }
.style-menu li[role="option"] { position: relative; display: flex; align-items: center; height: 32px; padding: 0 30px 0 10px; border-radius: 7px; cursor: pointer; }
.style-menu li.active { background: var(--surface-2); }
.style-menu li[aria-selected="true"] { font-weight: 500; }
.style-menu li[aria-selected="true"]::after { content: ""; position: absolute; right: 10px; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (prefers-reduced-motion: no-preference) { .style-menu { animation: menu-in 120ms ease-out; transform-origin: top left; } @keyframes menu-in { from { opacity: 0; transform: translateY(-3px) scale(0.98); } } }
:root[data-ui-theme="dark"] .style-menu { box-shadow: 0 0 0 1px var(--line), 0 12px 32px rgba(0, 0, 0, 0.5); }

/* Sign-in page: product on the left, one clean card on the right. */
.auth { min-height: 100svh; display: grid; grid-template-columns: 1.1fr 1fr; background: #fff; font-family: Inter, var(--font); color: #0a0a0a; }
.auth-art { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 32px 40px; overflow: hidden;
  background: radial-gradient(60% 50% at 30% 20%, #eef3ff, transparent 70%), radial-gradient(50% 45% at 80% 85%, #fdf0f7, transparent 70%), #f7f8fb; border-right: 1px solid #eceef2; }
.auth-brand { display: flex; align-items: center; gap: 8px; margin: 0; font: 400 19px/1 "National Park", Inter, sans-serif; letter-spacing: -0.02em; }
.auth-brand img { width: 30px; height: auto; }
.auth-d { color: #8a8a91; }
.auth-pitch h2 { margin: 0 0 28px; font: 400 clamp(30px, 3.4vw, 46px)/1.08 "National Park", Inter, sans-serif; letter-spacing: -0.03em; }
.auth-pitch h2 span { display: block; color: #8a8a91; }
.auth-keys { display: block; width: 100%; height: auto; }
.auth-foot { margin: 0; font-size: 13px; color: #6b6b72; }
.auth-panel { display: grid; place-items: center; padding: 32px 20px; }
.auth-card { width: min(380px, 100%); text-align: center; }
.auth-mascot { display: block; width: 64px; height: auto; margin: 0 auto 18px; }
.auth-card h1 { margin: 0; font: 500 28px/1.2 "National Park", Inter, sans-serif; letter-spacing: -0.02em; }
.auth-sub { margin: 10px 0 28px; font-size: 15px; line-height: 1.5; color: #5f5f66; }
.auth-error { margin: -12px 0 18px; padding: 10px 12px; border-radius: 10px; background: #fff1f2; color: #b42318; font-size: 13.5px; text-align: left; }
.auth-github { display: flex; align-items: center; justify-content: center; gap: 10px; height: 46px; border-radius: 12px; background: #0a0a0a; color: #fff; font-size: 15px; font-weight: 500; text-decoration: none; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.auth-github svg { width: 18px; height: 18px; }
.auth-github:hover { background: #262626; }
.auth-google { margin-top: 10px; background: #fff; color: #1f1f1f; box-shadow: inset 0 0 0 1px #d4d4d4; }
.auth-google:hover { background: #f5f5f5; }
.auth-github:focus-visible { outline: 2px solid #2e74e6; outline-offset: 3px; }
.auth-legal { margin: 18px 0 0; font-size: 12.5px; line-height: 1.55; color: #6b6b72; }
.auth-legal a { color: #0a0a0a; text-decoration: underline; text-underline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .auth-github { transition: background-color 120ms ease, transform 120ms ease; } .auth-github:active { transform: scale(0.98); } .auth-card { animation: view-in 220ms ease-out; } }
@media (max-width: 860px) { .auth { grid-template-columns: 1fr; } .auth-art { display: none; } }

/* Preview: step through every screen. */
.preview-nav { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; margin-right: 8px; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.preview-nav .btn { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; }
.preview-nav .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Phones: the editor in one tidy column. One-row top bar with icon buttons, the design on top, the chat below,
   and a one-row canvas toolbar that scrolls sideways instead of wrapping. */
@media (max-width: 640px) {
  .topbar { flex-wrap: nowrap; height: 52px; min-height: 0; padding: 0 10px; gap: 6px; }
  .topbar .brand .wm, .topbar .crumbs, .topbar > .ui-theme-switch { display: none; }
  .topbar .brand-mark { width: 30px; height: 22px; }
  .topbar-actions { width: auto; margin-left: auto; flex-wrap: nowrap; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
  .topbar-actions .btn { font-size: 0; gap: 0; min-width: 38px; min-height: 38px; height: 38px; padding: 0; display: inline-grid; place-items: center; border-radius: 8px; }
  .topbar-actions .btn-quiet { background: transparent; border-color: transparent !important; }
  .topbar-actions .btn > svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  #copyFigmaBtn .figma-logo { width: 11px; height: 17px; }
  .topbar .account { margin-left: 2px; }
  .editor { grid-template-rows: minmax(0, 58dvh) minmax(0, 1fr); }
  .editor > .canvas { order: 1; }
  .editor > .panel { order: 2; border-bottom: 0; border-top: 1px solid var(--line); padding: 10px; gap: 8px; }
  .zoombar { bottom: 10px; flex-wrap: nowrap; max-width: calc(100% - 20px); overflow-x: auto; scrollbar-width: none; gap: 0; padding: 3px; }
  .zoombar::-webkit-scrollbar { display: none; }
  .zoombar > * { flex: none; }
  .zoombar .tool, .zoombar .icon-btn, .zoombar button { min-width: 36px; min-height: 36px; }
}
@media (max-width: 640px) { #copyFigmaBtn { justify-content: center; width: 38px; } }

/* Phones: Chat | Design switch at the top of the editor; one pane at a time, full height. */
.m-tabs { display: none; }
@media (max-width: 640px) {
  .editor { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .m-tabs { display: flex; gap: 2px; margin: 8px 10px 0; padding: 3px; border-radius: 11px; background: var(--surface-2); }
  .m-tabs button { flex: 1; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: 500 14px/1 Inter, var(--font); }
  .m-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(17, 17, 17, 0.08); }
  .m-tabs button:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
  .editor > .panel { order: 2; border-top: 0; }
  .editor > .canvas { order: 2; }
  .editor[data-mtab="chat"] > .canvas, .editor[data-mtab="design"] > .panel { display: none; }
  /* Top bar icons: centred in their buttons. */
  .topbar-actions .btn { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
  .topbar-actions .menu-wrap { display: flex; }
  /* Home on phones: nothing wider than the screen. */
  .home, .hmain { min-width: 0; max-width: 100vw; overflow-x: hidden; }
  .hhead { gap: 6px; padding: 0 10px; }
  .hhead .ui-theme-switch { display: none; }
  .account-menu .account-theme, .hhead .account-menu .ui-theme-switch { display: flex; }
  .hhead-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .hcredits { padding: 0 9px 0 8px; }
  .home [data-view-of="projects"] > :first-child { flex-wrap: wrap; }
}
/* Phones: Copy to Figma sits in the icon group like the others; the full-colour logo marks it as the main action. */
@media (max-width: 640px) {
  .topbar-actions #copyFigmaBtn { background: transparent; border: 0; box-shadow: none; }
  .topbar-actions #copyFigmaBtn:not(:disabled):hover { background: var(--surface-2); }
  .topbar-actions #copyFigmaBtn .figma-logo { width: 13px; height: 19px; }
}
/* Phones: the Export menu is pinned under the top bar, full width with a margin, so it never runs off-screen. */
@media (max-width: 640px) {
  .topbar #exportMenu { position: fixed; top: 58px; left: 10px; right: 10px; width: auto; min-width: 0; max-height: calc(100dvh - 80px); overflow-y: auto; translate: none; }
}