* { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { height: 100%; background: #1c1c1e; overflow: hidden;
               font-family: system-ui, sans-serif; user-select: none; }

  /* the window's top rim — drag region + the one true set of controls */
  .shellbar { height: 28px; display: flex; align-items: center;
              position: relative; z-index: 3001;   /* stay above the account gate so min/max/close work */
              margin: 6px 10px -6px;   /* negative bottom pulls the content row up under the titlebar's dead space */
              -webkit-app-region: drag; }
  .wc { -webkit-app-region: no-drag; width: 34px; height: 24px; display: grid; place-items: center;
        border: none; border-radius: 7px; background: transparent; color: #9d9e9a;
        margin-right: 4px; cursor: pointer; transition: background 0.14s, color 0.14s; }
  .wc:hover { background: rgba(255, 255, 255, 0.08); color: #e2e3df; }
  /* app name, dead-center of the titlebar (absolute → the buttons on either side can't shift it) */
  .sb-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
              font: 600 12px 'Hanken Grotesk', system-ui, sans-serif; letter-spacing: 0.02em;
              color: #9d9e9a; pointer-events: none; user-select: none; }
  .sb-ver { font: 500 10px 'Hanken Grotesk', system-ui, sans-serif; color: #6f706b; margin-left: 3px; letter-spacing: 0.03em; }
  .wc-close:hover { background: rgba(201, 123, 132, 0.28); color: #fff; }
  #sbToggle { margin-left: 8px; width: 30px; }
  .sb-spring { flex: 1; }

  /* one sidebar for the whole system — panes live to its right */
  /* .shellbar is 28px tall plus 6px top and -6px bottom margins = 28px in
     normal flow. Subtract its full footprint or this row extends below
     the viewport and clips away the panes' carefully reserved bottom inset. */
  #row { display: flex; height: calc(100% - 28px); overflow: hidden; }
  #sideb {
    flex: 0 0 288px; min-width: 0; overflow: hidden;
    display: flex; flex-direction: column;
    margin: 2px 0 11px 12px; padding: 12px 12px 6px;   /* 12px left breathing room from the window edge; the bled dividers span the full sidebar box (this margin), content padded 12px */
    background: transparent;   /* NO container — the sidebar is just content on the app background (Codex/Claude Code style) */
    border: none; border-radius: 0;
    transition: flex-basis 0.26s cubic-bezier(0.22, 1, 0.36, 1), margin 0.26s cubic-bezier(0.22, 1, 0.36, 1),
                padding 0.26s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, border-color 0.26s;
  }
  body.sb-closed #sideb { flex-basis: 0; margin-left: 0; padding-left: 0; padding-right: 0; opacity: 0; border-color: transparent; }
  /* New Session — the prompt bar's own pill recipe (neutral-gray raised: top-lit
     gradient over the .combo base color, inset highlight, soft drop) */
  .sb-new {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    flex-shrink: 0; width: 100%; padding: 8px 12px; margin-bottom: 4px;
    font: 600 12.5px 'Hanken Grotesk', system-ui, sans-serif; color: #e2e3df;
    border-radius: 11px; border: 1px solid #3a3a3a;
    background-color: rgba(44, 44, 46, 0.75);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(0, 0, 0, 0.08));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 2px 6px -2px rgba(0, 0, 0, 0.55);
    cursor: pointer; transition: background-color 0.2s, border-color 0.2s; white-space: nowrap;
  }
  .sb-new:hover { background-color: rgba(52, 52, 54, 0.82); }

  /* OUTDENTED — the provider toggle + New Session sit flush on the sidebar surface (same plane as the
     session list below), not sunk into a recessed well */
  .sb-newbox {
    flex-shrink: 0;
    padding: 0;
    background: transparent;
    border: none;
  }
  .sb-newbox .sb-new { margin-bottom: 0; }
  .sb-seg {
    position: relative; overflow: hidden;
    display: flex; gap: 2px;
    padding: 3px; margin-bottom: 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.3);                       /* a softer track now that it sits flush on the surface, not inside the old dark box */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.42);
  }
  /* the sliding pill — JS sizes it to the active label and glides it across; raised so it reads as the lifted selection */
  .sb-seg .seg-thumb {
    position: absolute; top: 3px; bottom: 3px; left: 0; width: 0;
    border-radius: 999px; pointer-events: none;
    background: rgba(255, 255, 255, 0.11);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.4);
    transition: transform 0.34s cubic-bezier(0.34, 1.25, 0.64, 1),
                width 0.34s cubic-bezier(0.34, 1.25, 0.64, 1);
  }
  .sb-seg button {
    position: relative; z-index: 1;
    flex: 1; padding: 5px 0;
    border: none; border-radius: 999px;
    font: 450 11.5px 'Hanken Grotesk', system-ui, sans-serif; color: #9d9e9a;   /* light-medium, matching the date headers */
    background: transparent; cursor: pointer;
    transition: color 0.2s ease;
  }
  .sb-seg button.active { color: #fff; }
  .sb-seg button:disabled { opacity: 0.4; cursor: default; }
  .sb-sec { flex-shrink: 0; display: flex; align-items: center; gap: 6px; margin: 13px 4px 6px; font: 600 10.5px 'Hanken Grotesk', system-ui, sans-serif; letter-spacing: 0.09em; text-transform: uppercase; color: #eef0ec; }
  /* collapsible date groups (Today / Yesterday / …) — click the header to fold, like Gemini.
     Sentence case + a size up from the micro-label look; the fold ANIMATES via the
     grid 1fr→0fr trick (height glides shut, rows fade) instead of snapping. */
  .sb-sec.grp { cursor: pointer; border-radius: 6px; padding: 2px 4px; margin: 11px 0 4px; user-select: none; transition: color 0.12s; text-transform: none; letter-spacing: 0.01em; font: 450 13px 'Hanken Grotesk', system-ui, sans-serif; }
  .sb-sec.grp:hover { color: #ffffff; }
  .sb-sec.grp .g-chev { margin-left: auto; color: #8a8b86; transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
  .sb-sec.grp.closed .g-chev { transform: rotate(-90deg); }
  .sb-grp { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows 0.24s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease; }
  .sb-grp.closed { grid-template-rows: 0fr; opacity: 0; }
  .sb-grp-in { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 4px; }
  /* folder subsection inside a date group (only when sessions span >1 folder): a COLLAPSIBLE header the
     same size as the date headers — folder glyph LEFT, name, chevron RIGHT — tinted a uniform pastel per
     folder (inline color:). Its sessions live in a nested foldable .sb-fgrp (same 1fr→0fr height trick). */
  .sb-fold.grp { cursor: pointer; display: flex; align-items: center; gap: 7px; border-radius: 6px; padding: 3px 4px; margin: 6px 0 3px;
    user-select: none; font: 450 13px 'Hanken Grotesk', system-ui, sans-serif; transition: filter 0.12s; }
  .sb-fold.grp:hover { filter: brightness(1.14); }
  .sb-fold.grp .ff-ico { flex: none; }
  .sb-fold.grp .ff-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sb-fold.grp .g-chev { flex: none; margin-left: auto; opacity: 0.75; transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
  .sb-fold.grp.closed .g-chev { transform: rotate(-90deg); }
  .sb-fgrp { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows 0.24s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease; }
  .sb-fgrp.closed { grid-template-rows: 0fr; opacity: 0; }
  .sb-fgrp-in { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 4px; padding-left: 2px; }
  /* enter / leave animation for rows + folder headers being added/removed (not instant) */
  @keyframes sbIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
  .sb-row.sb-in, .sb-fold.sb-in { animation: sbIn 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
  .sb-leave { transition: max-height 0.2s ease, opacity 0.16s ease, margin 0.2s ease !important; opacity: 1; pointer-events: none; }
  /* search — quiet, borderless, sits in the list's own visual language (no boxy outline) */
  .sb-search {
    flex-shrink: 0; display: flex; align-items: center; gap: 8px;
    margin-top: 6px; padding: 6px 10px;
    border: 0; border-radius: 8px;
    background: transparent;
    transition: background 0.13s;
  }
  .sb-search:hover { background: rgba(255, 255, 255, 0.035); }
  .sb-search:focus-within { background: rgba(255, 255, 255, 0.05); }
  .sb-search svg { flex: 0 0 auto; color: #6f706a; }
  .sb-search input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
    font: 500 13px 'Hanken Grotesk', system-ui, sans-serif; color: #d6d7d3;
  }
  .sb-search input::placeholder { color: #6f706a; }
  .sb-sclear {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; margin: -2px 0; padding: 0; border: 0; border-radius: 6px;
    background: transparent; color: #6f706a; cursor: pointer;
    transition: background 0.12s, color 0.12s;
  }
  .sb-sclear[hidden] { display: none; }   /* the display:inline-flex above would beat the hidden attribute — pin it */
  .sb-sclear:hover { background: rgba(255, 255, 255, 0.09); color: #e6e7e3; }
  .sb-listwrap { flex: 1; min-height: 0; position: relative; display: flex; }
  #sbList { flex: 1; min-width: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding-bottom: 6px; }
  #sbList::-webkit-scrollbar { width: 0; }
  /* scroll scrim — a black fade above the splitter, shown only while MORE chats hide below;
     it fades away at the bottom of the list and back in as you scroll up */
  .sb-fade {
    position: absolute; left: 0; right: 0; bottom: 0; height: 46px;
    background: linear-gradient(180deg, rgba(28, 28, 30, 0), #1c1c1e);
    pointer-events: none; opacity: 0; transition: opacity 0.25s ease;
  }
  .sb-fade.show { opacity: 1; }
  .sb-row {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
    width: 100%; text-align: left; padding: 6px 10px;
    border: 0; border-radius: 8px; background: transparent;
    cursor: pointer; transition: background 0.12s;
  }
  .sb-row:hover { background: rgba(255, 255, 255, 0.045); }
  /* plain rows — an open chat is just a quiet highlight, no dot, no badge */
  .sb-row.open { background: rgba(255, 255, 255, 0.06); }
  .sb-row.open:hover { background: rgba(255, 255, 255, 0.08); }
  .sb-row.open span { color: #e6e7e3; font-weight: 600; }
  .sb-row.temp { cursor: default; }
  .sb-row.temp span { font-style: italic; font-weight: 500; color: #c4c5c1; }   /* unsaved draft */
  /* search hit INSIDE the conversation — a quiet snippet line under the title, keyword lit */
  .sb-row.has-snip { flex-direction: column; align-items: flex-start; gap: 2px; }
  .sb-row .sb-snip { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 11px 'Hanken Grotesk', system-ui, sans-serif; color: #83847e; }
  .sb-row .sb-snip .sb-hl { color: #9ec2f5; font-weight: 600; font-style: normal; }
  .sb-row span {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 500 13px 'Hanken Grotesk', system-ui, sans-serif; color: #a4a5a0;
  }
  .sb-row:hover span { color: #e2e3df; }
  /* last-activity relative time, pinned to the row's right edge (a <time>, so .sb-row span rules don't touch it) */
  .sb-empty { padding: 20px 10px; text-align: center; font: 400 12px 'Hanken Grotesk', system-ui, sans-serif; color: #626360; }

  /* flat popover menu — kept for future popovers (unused by the minimal sidebar) */
  .sb-menu {
    position: fixed; z-index: 340; min-width: 208px; max-width: 300px; max-height: 60vh; overflow-y: auto;
    padding: 5px; border-radius: 11px;
    background: #212225; border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.7);
    opacity: 0; transform: translateY(-4px); pointer-events: none;
    transition: opacity 0.13s ease, transform 0.13s ease;
  }
  .sb-menu::-webkit-scrollbar { width: 0; }
  .sb-menu.show { opacity: 1; transform: none; pointer-events: auto; }
  .sb-menu .m-row {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    padding: 6px 9px; border: 0; border-radius: 7px; background: transparent; cursor: pointer;
    font: 500 12.5px 'Hanken Grotesk', system-ui, sans-serif; color: #b9bab5;
    transition: background 0.1s, color 0.1s;
  }
  .sb-menu .m-row:hover { background: rgba(255, 255, 255, 0.06); color: #e6e7e3; }
  .sb-menu .m-row.on { color: #e6e7e3; background: rgba(143, 174, 150, 0.1); }
  .sb-menu .m-check { flex: 0 0 auto; display: none; color: #8fae96; }
  .sb-menu .m-row.on .m-check { display: inline-flex; }
  .sb-menu .m-row.on:hover .m-check { display: none; }   /* yields to the hover actions */
  .sb-menu .m-row svg { flex: 0 0 auto; color: #8a8b86; }
  .sb-menu .m-row.on svg, .sb-menu .m-row:hover svg { color: #8fae96; }
  .sb-menu .m-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sb-menu .m-name input {
    width: 100%; padding: 1px 4px; border: 1px solid rgba(143, 174, 150, 0.5); outline: 0; border-radius: 5px;
    background: rgba(0, 0, 0, 0.4); color: #e6e7e3; font: 500 12.5px 'Hanken Grotesk', system-ui, sans-serif;
  }
  .sb-menu .m-count { flex: 0 0 auto; font: 600 10px 'Hanken Grotesk', system-ui, sans-serif; color: #6c6d68; }
  .sb-menu .m-act { flex: 0 0 auto; display: none; gap: 1px; }
  .sb-menu .m-row:hover .m-act { display: inline-flex; }
  .sb-menu .m-act [role="button"] { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; color: #73746f; cursor: pointer; }
  .sb-menu .m-act [role="button"]:hover { background: rgba(255, 255, 255, 0.1); color: #e6e7e3; }
  /* hide the count while the hover actions are showing (they share the row's right edge) */
  .sb-menu .m-row:hover .m-count { display: none; }
  .sb-menu .m-div { height: 1px; margin: 4px 6px; background: rgba(255, 255, 255, 0.07); }
  .sb-menu .m-row.quiet { color: #8a8b86; font-size: 12px; }


  /* ── notification strip — quiet gray, in the sidebar's own chrome (no green) ── */
  #sbNotes { flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; }
  #sbNotes:not(:empty) { padding: 8px 0 0; margin: 0 -11px; }   /* 8px before the widget stack; no trailing padding so every card-to-card gap stays equal */
  .sb-note {
    /* icon | text column | chevron — icon and chevron center against the WHOLE card.
       Flat and quiet, matching the git push card exactly: transparent fill with a
       whisper of an outline — no gradient, no inset highlight, no drop shadows. */
    display: flex; align-items: center; gap: 12px;
    width: 100%; text-align: left;
    min-height: 58px; padding: 11px 14px 11px 16px; border-radius: 13px; cursor: pointer;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.075);
    transition: background 0.12s, border-color 0.12s;
  }
  .sb-note:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); }
  .sb-note .nt-ico { flex: 0 0 auto; display: grid; place-items: center; color: #cfd0cc; }
  .sb-note:hover .nt-ico { color: #e2e3df; }
  .sb-note .nt-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .sb-note .nt-txt, .sb-note .nt-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sb-note .nt-txt { font: 600 12.5px 'Hanken Grotesk', system-ui, sans-serif; color: #e8e9e5; }
  .sb-note .nt-sub { font: 500 11px 'Hanken Grotesk', system-ui, sans-serif; color: #8a8b86; }
  .sb-note .nt-sub b { font-weight: 600; color: #e2e3df; }
  .sb-note .nt-go { flex: 0 0 auto; color: #6f706b; transition: color 0.12s, transform 0.12s; }
  .sb-note:hover .nt-go { color: #b9bab5; transform: translateX(1px); }
  /* silent auto-update states: a thin download bar, and a green "ready to restart" accent */
  .sb-note .nt-prog { display: block; height: 3px; margin-top: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
  .sb-note .nt-prog i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #3d95ff, #1f86f7); transition: width 0.3s ease; }
  .sb-note.ph-ready { border-color: rgba(78, 203, 125, 0.4); }
  .sb-note.ph-ready .nt-ico, .sb-note.ph-ready .nt-sub b { color: #4ecb7d; }

  /* sidebar footer — the account row, CHROMELESS (no container): pfp, name, plans, settings */
  /* the WHOLE account row is one hover target that opens the dashboard on click —
     transparent at rest, a soft gray pill on hover (the settings gear no longer
     carries its own hover box; it just brightens with the row) */
  .sb-foot {
    flex-shrink: 0; display: flex; align-items: center; gap: 11px;
    margin: 8px -12px 0; padding: 8px;   /* bleed through #sideb's gutters, equal breathing room on every side */
    white-space: nowrap; overflow: hidden;
    background: rgba(255, 255, 255, 0.06); border: none; border-radius: 13px;   /* the row reads as a seated control at REST, not only under the cursor */
    cursor: pointer; transition: background 0.14s ease;
  }
  /* .12 keeps the hover pop at ~13 luminance levels over the resting .06 —
     the same lift the row had back when it went transparent → .06 */
  .sb-foot:hover { background: rgba(255, 255, 255, 0.12); }
  /* avatar height === the stacked name+plan block (18 + 2 gap + 13 = 33) so they line up */
  .sb-ava {
    flex-shrink: 0; width: 33px; height: 33px; border-radius: 50%;
    display: grid; place-items: center;
    font: 700 14px 'Hanken Grotesk', system-ui, sans-serif; color: #1c1c1e;
    background: radial-gradient(circle at 35% 30%, #e8b685, #d97757 70%);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35);
  }
  .sb-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .sb-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 600 13.5px/18px 'Hanken Grotesk', system-ui, sans-serif; color: #e9eae6; }
  .sb-plans { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 500 11px/13px 'Hanken Grotesk', system-ui, sans-serif; color: #8f908a; }
  .sb-plans:empty { display: none; }
  .sb-gear {
    flex-shrink: 0; width: 32px; height: 32px; display: grid; place-items: center;
    border: none; background: transparent; color: #7c7d77;
    cursor: pointer; transition: color 0.14s;   /* no own container — the row is the hover target */
  }
  .sb-gear svg { width: 18px; height: 18px; }
  .sb-foot:hover .sb-gear { color: #cfd0cb; }   /* the gear brightens WITH the whole-row hover */

  /* settings — a centered modal floating over a dark, blurred backdrop (not a full page) */
  #setPage {
    position: fixed; top: 28px; left: 0; right: 0; bottom: 0; z-index: 9000;   /* start BELOW the .shellbar so the window controls (min/close) stay live */
    display: grid; place-items: center; padding: 32px 40px 40px;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
    animation: setFade 0.17s ease;
  }
  #setPage[hidden] { display: none; }
  @keyframes setFade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes setPop { from { opacity: 0; transform: translateY(9px) scale(0.985); } to { opacity: 1; transform: none; } }
  /* closing — fade the backdrop + sink the modal before it's removed (JS toggles .closing then hides) */
  #setPage.closing { animation: setFadeOut 0.16s ease forwards; }
  #setPage.closing .set-modal { animation: setPopOut 0.17s cubic-bezier(0.4, 0, 0.7, 0.25) forwards; }
  @keyframes setFadeOut { to { opacity: 0; } }
  @keyframes setPopOut { to { opacity: 0; transform: translateY(8px) scale(0.982); } }
  /* a two-column workspace: a nav rail + a content pane — same top-lit glass
     panel recipe as the raised session sidebar (#sideb) */
  .set-modal {
    display: flex; overflow: hidden;
    width: min(772px, 95vw); height: min(584px, calc(100vh - 118px));   /* fits under the 34px bar + the overlay's vertical padding */
    font-family: 'Hanken Grotesk', system-ui, sans-serif;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.028)),
      rgba(26, 26, 28, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px;
    box-shadow:
      0 36px 92px -22px rgba(0, 0, 0, 0.86),
      0 4px 14px -6px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
    animation: setPop 0.2s cubic-bezier(0.25, 0.9, 0.3, 1.05);
  }
  /* left rail — a recessed darker column, like the app's own session sidebar */
  .set-nav {
    flex-shrink: 0; width: 192px;
    display: flex; flex-direction: column; gap: 3px;
    padding: 15px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25);
  }
  .set-nav-head {
    display: flex; align-items: center; gap: 9px;
    padding: 4px 7px 13px; margin-bottom: 4px;
    font: 650 14.5px 'Hanken Grotesk', system-ui, sans-serif; color: #fff; letter-spacing: 0.2px;
  }
  .set-nav-logo {                                    /* just the gear, no container */
    flex-shrink: 0; display: inline-flex; color: #e8e9e5;
  }
  .set-nav-logo svg { width: 17px; height: 17px; }
  .set-nav-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 8px 11px; text-align: left;
    font: 600 12.5px 'Hanken Grotesk', system-ui, sans-serif; color: #9d9e9a;
    border: 1px solid transparent; border-radius: 10px; background: transparent;
    cursor: pointer; transition: background 0.14s, color 0.14s, border-color 0.14s;
  }
  .set-nav-item svg { width: 16px; height: 16px; opacity: 0.7; flex-shrink: 0; }
  .set-nav-item:hover { background: rgba(255, 255, 255, 0.04); color: #e2e3df; }
  .set-nav-item.active {                             /* raised tile, like an open session row */
    color: #fff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.042));
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 6px -3px rgba(0, 0, 0, 0.5);
  }
  .set-nav-item.active svg { opacity: 1; color: #e8a079; }
  .set-nav-spacer { flex: 1; }
  .set-nav-foot { padding: 9px 8px 2px; font: 500 10.5px 'Hanken Grotesk', system-ui, sans-serif; color: #56564f; border-top: 1px solid rgba(255, 255, 255, 0.05); }

  /* right column — fixed topbar + scrolling content */
  .set-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .set-topbar {
    flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 15px 16px 13px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .set-topbar h1 { font: 650 17px 'Hanken Grotesk', system-ui, sans-serif; color: #fff; margin: 0; letter-spacing: 0.2px; }
  .set-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px 22px; }
  .set-scroll::-webkit-scrollbar { width: 10px; }
  .set-scroll::-webkit-scrollbar-track { background: transparent; }
  .set-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.13); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }
  .set-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.24); background-clip: padding-box; }
  .set-pane { animation: setPaneIn 0.22s ease; }
  .set-pane[hidden] { display: none; }
  .set-pane > .sp-sec-title:first-child { margin-top: 2px; }
  @keyframes setPaneIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

  .sp-close {
    flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center;
    border-radius: 9px; color: #9d9e9a;
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 7px -3px rgba(0, 0, 0, 0.5);   /* raised, like .sb-new */
    cursor: pointer; transition: color 0.14s, background 0.14s, border-color 0.14s, transform 0.1s;
  }
  .sp-close:hover { color: #fff; background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.18); }
  .sp-close:active { transform: scale(0.94); }
  /* while settings is up, webviews go click-through so a backdrop click reliably closes it */
  body.set-open webview { pointer-events: none; }
  .sp-sec-title {
    display: flex; align-items: center; justify-content: space-between;
    font: 600 11px 'Hanken Grotesk', system-ui, sans-serif; color: #9d9e9a;
    letter-spacing: 0.8px; text-transform: uppercase;
    margin: 26px 2px 10px;
  }
  .set-acct {
    display: flex; align-items: center; gap: 13px;
    padding: 15px 17px;
    /* raised tile — top-lit, lifted off the panel like an open session row */
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.032)),
      rgba(255, 255, 255, 0.012);
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 3px 10px -4px rgba(0, 0, 0, 0.55);
  }
  .set-ava { width: 40px; height: 40px; font-size: 17px; }
  .set-who { flex: 1; min-width: 0; }
  .set-who div:first-child { font: 600 14px 'Hanken Grotesk', system-ui, sans-serif; color: #e2e3df; }
  .set-mail { font: 400 11.5px 'Hanken Grotesk', system-ui, sans-serif; color: #626360; margin-top: 1px; }

  /* Overview: Clodex subscription card */
  .ov-plan {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px;
    padding: 15px 17px; border-radius: 14px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.03)),
      rgba(255, 255, 255, 0.012);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 3px 10px -4px rgba(0, 0, 0, 0.55);
  }
  .ov-plan-info { min-width: 0; }
  .ov-plan-eyebrow { font: 600 10px 'Hanken Grotesk', system-ui, sans-serif; letter-spacing: 0.8px; text-transform: uppercase; color: #8a8b87; }
  .ov-plan-row { display: flex; align-items: center; gap: 9px; margin: 4px 0 3px; }
  .ov-plan-row b { font: 700 18px 'Hanken Grotesk', system-ui, sans-serif; color: #f0f1ed; letter-spacing: 0.2px; }
  .ov-badge { flex: none; font: 700 9.5px 'Hanken Grotesk', system-ui, sans-serif; letter-spacing: 0.4px; text-transform: uppercase; padding: 0.34em 0.62em; border-radius: 6px; }
  .ov-badge.is-active { color: #8fe0a8; background: rgba(60, 180, 110, 0.16); }
  .ov-badge.is-free { color: #c9cac6; background: rgba(255, 255, 255, 0.09); }
  .ov-badge.is-warn { color: #e8c07a; background: rgba(210, 160, 70, 0.16); }
  .ov-plan-sub { font: 400 11.5px 'Hanken Grotesk', system-ui, sans-serif; color: #8a8b87; line-height: 1.4; max-width: 34ch; }
  .set-btn {
    flex: none; cursor: pointer; white-space: nowrap;
    font: 600 12px 'Hanken Grotesk', system-ui, sans-serif; color: #e8e9e5;
    padding: 0.62em 1.05em; border-radius: 9px;
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: background 0.14s, border-color 0.14s, color 0.14s;
  }
  .set-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.2); color: #fff; }

  /* Sign-out nav item — a quiet red at the bottom of the rail */
  .set-signout { color: #cf8e8e; }
  .set-signout svg { color: #cf8e8e; opacity: 0.85; }
  .set-signout:hover { background: rgba(201, 90, 90, 0.12); color: #f0a8a8; border-color: rgba(201, 90, 90, 0.22); }
  .set-signout:hover svg { color: #f0a8a8; }

  /* a column of plan pills — one per connected provider */
  .set-plans { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 210px; }
  .sp-plan {
    flex-shrink: 0; padding: 4px 12px; border-radius: 999px; white-space: nowrap;
    font: 600 11px 'Hanken Grotesk', system-ui, sans-serif; color: #e2965f;
    background: linear-gradient(180deg, rgba(217, 119, 87, 0.18), rgba(217, 119, 87, 0.09));
    border: 1px solid rgba(217, 119, 87, 0.32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 3px -1px rgba(0, 0, 0, 0.4);
  }
  .sp-plan.codex  { color: #7fd2bb; background: linear-gradient(180deg, rgba(45, 158, 117, 0.2), rgba(45, 158, 117, 0.1)); border-color: rgba(45, 158, 117, 0.34); }
  .sp-plan.muted  { color: #9d9e9a; background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
  .set-refresh { width: 22px; height: 22px; display: grid; place-items: center; border: none; border-radius: 6px; background: transparent; color: #626360; cursor: pointer; }
  .set-refresh:hover { color: #e2e3df; background: rgba(255, 255, 255, 0.07); }
  .set-note { font: 400 11px 'Hanken Grotesk', system-ui, sans-serif; color: #626360; margin: 0 2px 10px; }
  .prov-loading { padding: 14px; text-align: center; font: 400 12px 'Hanken Grotesk', system-ui, sans-serif; color: #626360; }
  .prov-row {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px; margin-bottom: 8px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.026)),
      rgba(255, 255, 255, 0.008);
    border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 13px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 2px 6px -3px rgba(0, 0, 0, 0.45);
  }
  /* per-provider mark — bare brand logo, no container (slot kept for alignment) */
  .prov-logo {
    flex-shrink: 0; width: 34px; height: 36px;
    display: grid; place-items: center;
    font: 800 15px 'Hanken Grotesk', system-ui, sans-serif; color: #e2e3df;
  }
  .prov-logo.claude { color: #efa985; }
  .prov-logo.codex  { color: #e8e9e5; }
  .prov-logo .prov-mark-svg { width: 27px; height: 27px; }
  .prov-body { flex: 1; min-width: 0; }
  .prov-name { font: 600 13px 'Hanken Grotesk', system-ui, sans-serif; color: #e2e3df; }
  .prov-name small { font: 500 10.5px 'Hanken Grotesk', system-ui, sans-serif; color: #626360; margin-left: 7px; }
  .prov-hint { font: 400 11px 'Hanken Grotesk', system-ui, sans-serif; color: #626360; margin-top: 1px; }
  /* status line under the name — a colored dot + word */
  .prov-status { display: flex; align-items: center; gap: 6px; margin-top: 3px; font: 500 11px 'Hanken Grotesk', system-ui, sans-serif; color: #7a7b76; }
  .prov-status.on { color: #9ec9a5; }
  .prov-status.off { color: #e0b774; }
  .prov-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
  .prov-dot.on  { background: radial-gradient(circle at 35% 30%, #c8e8cf, #8fae96 60%); box-shadow: 0 0 6px rgba(143, 174, 150, 0.5); }
  .prov-dot.off { background: #e8c37a; box-shadow: 0 0 5px rgba(232, 195, 122, 0.4); }
  .prov-dot.none { background: #56564f; }
  /* connect / disconnect actions */
  .prov-act {
    flex-shrink: 0; padding: 7px 15px; border-radius: 9px;
    font: 600 11.5px 'Hanken Grotesk', system-ui, sans-serif;
    cursor: pointer; transition: background 0.14s, color 0.14s, border-color 0.14s, transform 0.1s;
  }
  .prov-act:active { transform: scale(0.96); }
  /* connect / disconnect — skeuomorphic: top-lit gradient + a crisp 1px bevel + border
     (no soft/drop shadows); fills to a solid gradient on hover */
  .prov-act.connect {
    color: #83d3a4;
    background: linear-gradient(180deg, rgba(62, 169, 106, 0.2), rgba(62, 169, 106, 0.1));
    border: 1px solid rgba(62, 169, 106, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .prov-act.connect:hover { color: #fff; background: linear-gradient(180deg, #3ea96a, #319058); border-color: #4cb87a; }
  .prov-act.disconnect {
    color: #f0997b;
    background: linear-gradient(180deg, rgba(201, 90, 72, 0.2), rgba(201, 90, 72, 0.1));
    border: 1px solid rgba(201, 90, 72, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .prov-act.disconnect:hover { color: #fff; background: linear-gradient(180deg, #cf4d44, #b03b34); border-color: #db5e54; }
  /* linked services (GitHub / Stripe) — reuse .prov-row/.prov-act; add the token-entry UI */
  .prov-logo.svc-github { color: #e9eaee; }
  .prov-logo.svc-stripe { color: #6d64ff; }
  .prov-logo.svc-cloudflare { color: #f6821f; }
  .prov-logo.svc-resend { color: #e6e7ea; }
  .svc-alt { margin-left: 8px; font: 500 11px 'Hanken Grotesk', system-ui, sans-serif; color: #7f8ea3; cursor: pointer; }
  .svc-alt:hover { color: #a9c0dc; text-decoration: underline; }
  .svc-code { display: flex; align-items: center; gap: 9px; margin-top: 9px; flex-wrap: wrap; }
  .svc-code-txt { font: 500 11px 'Hanken Grotesk', system-ui, sans-serif; color: #9a9b95; }
  .svc-code-val { padding: 5px 11px; background: rgba(0, 0, 0, 0.32); border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 8px; color: #f0ede4; font: 700 15px 'Geist Mono', ui-monospace, monospace; letter-spacing: 0.14em; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); }
  .svc-code-copy { padding: 5px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: #cfd0cb; font: 600 11px 'Hanken Grotesk', system-ui, sans-serif; cursor: pointer; }
  .svc-code-copy:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
  .svc-entry { display: flex; align-items: center; gap: 7px; margin-top: 9px; }
  .svc-input {
    flex: 1; min-width: 0; padding: 7px 10px;
    background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 9px;
    color: #e7e7e5; font: 500 12px 'Geist Mono', ui-monospace, monospace;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  }
  .svc-input::placeholder { color: #6a6b66; }
  .svc-input:focus { outline: none; border-color: #4f8fe6; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 2px rgba(79, 143, 230, 0.18); }
  .svc-cancel { flex-shrink: 0; padding: 7px 11px; border-radius: 9px; background: transparent; border: 1px solid transparent; color: #8a8b85; font: 600 11.5px 'Hanken Grotesk', system-ui, sans-serif; cursor: pointer; }
  .svc-cancel:hover { color: #cfd0cb; }
  .svc-meta { display: flex; gap: 10px; align-items: baseline; margin-top: 7px; }
  .svc-help { font: 500 11px 'Hanken Grotesk', system-ui, sans-serif; color: #7f8ea3; cursor: pointer; }
  .svc-help:hover { color: #a9c0dc; text-decoration: underline; }
  .svc-err { font: 500 11px 'Hanken Grotesk', system-ui, sans-serif; color: #e79086; }
  .prov-act.install {
    color: #cdd9ea;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.055));
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .prov-act.install:hover { color: #fff; background: linear-gradient(180deg, rgba(55, 138, 221, 0.32), rgba(55, 138, 221, 0.18)); border-color: rgba(55, 138, 221, 0.45); }
  .prov-act:disabled { opacity: 0.4; cursor: default; transform: none; box-shadow: none; }
  /* mid-action: a neutral "Cancel" button with a spinner (connect/install in progress) */
  .prov-act.cancelable { color: #9d9e9a; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: none; }
  .prov-act.cancelable:hover { color: #e2e3df; background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.16); }
  .prov-spin { display: inline-block; width: 11px; height: 11px; margin-right: 7px; vertical-align: -1px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.22); border-top-color: currentColor; animation: signinSpin 0.7s linear infinite; }
  /* inline disconnect confirm — a small "Disconnect? Yes No" in place of the button */
  .prov-confirm { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; font: 600 11.5px 'Hanken Grotesk', system-ui, sans-serif; color: #c4c5c1; white-space: nowrap; }
  .prov-mini { padding: 6px 12px; border-radius: 8px; font: 600 11px 'Hanken Grotesk', system-ui, sans-serif; cursor: pointer; border: 1px solid transparent; transition: background 0.14s, color 0.14s, border-color 0.14s; }
  .prov-mini.yes { color: #f0997b; background: rgba(201, 90, 72, 0.14); border-color: rgba(201, 90, 72, 0.34); }
  .prov-mini.yes:hover { color: #fff; background: #bb423a; border-color: #bb423a; }
  .prov-mini.no { color: #9d9e9a; background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); }
  .prov-mini.no:hover { color: #e2e3df; background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.16); }
  /* features — a labelled row with an iOS-style switch on the right */
  .set-feat {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.026)),
      rgba(255, 255, 255, 0.008);
    border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 2px 6px -3px rgba(0, 0, 0, 0.45);
  }
  .set-feat + .set-feat { margin-top: 10px; }   /* breathing room between feature cards */
  .set-switch {
    flex-shrink: 0; width: 40px; height: 23px; padding: 0; position: relative;
    border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(0, 0, 0, 0.3); cursor: pointer;                              /* recessed track, like the provider seg */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
    transition: background 0.16s, border-color 0.16s, box-shadow 0.16s;
  }
  .set-switch .ss-knob {
    position: absolute; top: 2px; left: 2px; width: 17px; height: 17px;
    border-radius: 50%; background: #cfd0cc;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.45);   /* raised knob, like the seg-thumb */
    transition: transform 0.18s cubic-bezier(0.34, 1.25, 0.64, 1), background 0.16s;
  }
  .set-switch[aria-checked="true"] { background: rgba(143, 174, 150, 0.5); border-color: rgba(143, 174, 150, 0.55); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28); }
  .set-switch[aria-checked="true"] .ss-knob { transform: translateX(17px); background: #e9f3eb; }
  .set-switch:disabled { opacity: 0.4; cursor: not-allowed; }

  /* ── sign-in flow (Connections pane) — a focused OAuth hand-off ───────── */
  .signin-view { animation: setPaneIn 0.2s ease; }
  .signin-back {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px 6px 8px; margin-bottom: 16px; border-radius: 9px;
    font: 600 11.5px 'Hanken Grotesk', system-ui, sans-serif; color: #9d9e9a;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); cursor: pointer;
    transition: color 0.14s, background 0.14s, border-color 0.14s;
  }
  .signin-back:hover { color: #e2e3df; background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.14); }
  .signin-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 0 2px; }
  .signin-badge {
    position: relative; width: 62px; height: 62px; border-radius: 17px; margin-bottom: 15px;
    display: grid; place-items: center;
    font: 800 25px 'Hanken Grotesk', system-ui, sans-serif; color: #e2e3df;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.045));
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .signin-badge.claude { color: #efa985; background: linear-gradient(180deg, rgba(217, 119, 87, 0.3), rgba(217, 119, 87, 0.14)); border-color: rgba(217, 119, 87, 0.34); }
  .signin-badge.codex  { color: #e8e9e5; background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06)); border-color: rgba(255, 255, 255, 0.16); }
  .signin-badge .prov-mark-svg { width: 30px; height: 30px; }
  .signin-badge.waiting::after {                     /* a soft pulse while we wait on the browser */
    content: ''; position: absolute; inset: -2px; border-radius: 18px;
    border: 2px solid currentColor; opacity: 0; animation: signinPulse 1.7s ease-out infinite;
  }
  @keyframes signinPulse { 0% { opacity: 0.55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.22); } }
  .signin-title { font: 650 17px 'Hanken Grotesk', system-ui, sans-serif; color: #fff; margin: 0 0 5px; }
  .signin-sub { font: 400 12.5px 'Hanken Grotesk', system-ui, sans-serif; color: #9d9e9a; max-width: 330px; line-height: 1.5; margin: 0 0 16px; }
  .signin-state {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; max-width: 380px; padding: 11px 14px; margin: 0 auto 15px; border-radius: 11px;
    font: 500 12px 'Hanken Grotesk', system-ui, sans-serif; color: #c4c5c1;
    background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
  }
  .signin-state.ok  { color: #9ec9a5; background: rgba(143, 174, 150, 0.1); border-color: rgba(143, 174, 150, 0.28); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); }
  .signin-state.err { color: #f0997b; background: rgba(201, 90, 72, 0.1); border-color: rgba(201, 90, 72, 0.3); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); }
  .signin-spinner {
    width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.18); border-top-color: #e8a079;
    animation: signinSpin 0.8s linear infinite;
  }
  @keyframes signinSpin { to { transform: rotate(360deg); } }
  .signin-actions { display: flex; justify-content: center; gap: 10px; }
  .signin-btn {
    padding: 9px 18px; border-radius: 10px;
    font: 600 12.5px 'Hanken Grotesk', system-ui, sans-serif; cursor: pointer;
    transition: background 0.14s, color 0.14s, border-color 0.14s, transform 0.1s;
  }
  .signin-btn:active { transform: scale(0.97); }
  .signin-btn.primary {
    color: #fff;
    background: linear-gradient(180deg, #d8825f, #c46844);
    border: 1px solid rgba(217, 119, 87, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  .signin-btn.primary:hover { background: linear-gradient(180deg, #e08c68, #cc6f4b); }
  .signin-btn.ghost {
    color: #c4c5c1; background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
  .signin-btn.ghost:hover { color: #fff; background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.16); }
  .signin-btn.danger {
    color: #fff;
    background: linear-gradient(180deg, #c25a48, #a8473a);
    border: 1px solid rgba(201, 90, 72, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }
  .signin-btn.danger:hover { background: linear-gradient(180deg, #ce6451, #b44e40); }
  .signin-log-toggle {
    display: block; margin: 16px auto 0; padding: 4px 8px;
    font: 500 11px 'Hanken Grotesk', system-ui, sans-serif; color: #6a6b66;
    background: none; border: none; cursor: pointer; transition: color 0.14s;
  }
  .signin-log-toggle:hover { color: #9d9e9a; }
  .signin-log {
    margin-top: 11px; max-height: 156px; overflow-y: auto;
    padding: 11px 13px; border-radius: 11px;
    font: 400 10.5px ui-monospace, 'Cascadia Code', Menlo, monospace; color: #8a8b86;
    background: rgba(0, 0, 0, 0.32); border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
    white-space: pre-wrap; word-break: break-word;
  }
  .signin-log::-webkit-scrollbar { width: 8px; }
  .signin-log::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 7px; border: 2px solid transparent; background-clip: padding-box; }

  /* ── About pane ──────────────────────────────────────────────────────── */
  .about-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
  .about-mark {
    width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px;
    display: grid; place-items: center; color: #1c1c1e;
    font: 800 22px 'Hanken Grotesk', system-ui, sans-serif;
    background: radial-gradient(circle at 35% 30%, #e8b685, #d97757 70%);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), 0 6px 18px -6px rgba(217, 119, 87, 0.55);
  }
  .about-name { font: 700 18px 'Hanken Grotesk', system-ui, sans-serif; color: #fff; }
  .about-ver { font: 500 12px 'Hanken Grotesk', system-ui, sans-serif; color: #7a7b76; margin-top: 2px; }
  .about-blurb {
    padding: 14px 16px; border-radius: 13px;
    font: 400 12.5px 'Hanken Grotesk', system-ui, sans-serif; color: #9d9e9a; line-height: 1.6;
    background: rgba(0, 0, 0, 0.18); border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
  }

  /* session panes — a split tree rendered onto ABSOLUTE rects: webviews
     never re-parent (a DOM move reloads the guest and wipes its session) */
  #panes { position: relative; flex: 1; min-width: 0; overflow: auto; }   /* scrolls when the grid can't shrink further without crushing panes */
  /* thin, dark, theme-matching scrollbars instead of the chunky OS default */
  #panes::-webkit-scrollbar { width: 10px; height: 10px; }
  #panes::-webkit-scrollbar-track { background: transparent; }
  #panes::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.13); border-radius: 8px;
    border: 3px solid transparent; background-clip: padding-box;   /* inset → a slim 4px thumb */
  }
  #panes::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.24); background-clip: padding-box; }
  #panes::-webkit-scrollbar-corner { background: transparent; }
  .pane {
    position: absolute; background: #1c1c1e;
    transition: left 0.2s cubic-bezier(0.25, 0.9, 0.3, 1), top 0.2s cubic-bezier(0.25, 0.9, 0.3, 1),
                width 0.2s cubic-bezier(0.25, 0.9, 0.3, 1), height 0.2s cubic-bezier(0.25, 0.9, 0.3, 1),
                padding-left 0.2s cubic-bezier(0.25, 0.9, 0.3, 1), opacity 0.15s ease;   /* padding-left animates the Edit rail collapse/expand */
  }
  body.no-anim .pane { transition: opacity 0.15s ease; }
  /* the ACTIVE chat pane — the one a Box/Select capture will attach to — wears a light ring that
     traces the ROUNDED chat card inside the pane. Embedded cards now fill the pane on every side,
     so the ring sits exactly on its edge. Drawn as an INSET overlay, never outside the pane →
     nothing can clip or occlude it. Shown only when several chat panes exist (that's when the
     attach target is ambiguous). */
  .pane.active-target::after {
    content: ''; position: absolute; inset: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24); border-radius: 16px;   /* INSET ring — the 1px line renders just inside the card edge, following its radius (light white — the blue was tried and rejected) */
    pointer-events: none; z-index: 40;
  }
  .pane webview { width: 100%; height: 100%; }
  /* while dragging the preview, let pointer events pass THROUGH every webview to the shell,
     otherwise a webview swallows the move/up and the drag hangs ghosted */
  body.pv-dragging webview { pointer-events: none; }
  /* detached while dragging — an invisible hole holds the slot, Windows-style.
     opacity (not visibility) so the guest keeps receiving the pointer stream */
  .ghosted { opacity: 0 !important; }

  /* seam between siblings — invisible at rest, a full-length grip line on
     hover; an invisible ::before widens the grab zone past the 8px seam */
  .divider { position: absolute; z-index: 5; -webkit-app-region: no-drag; background: #1c1c1e; }
  .divider.v { cursor: col-resize; }
  .divider.h { cursor: row-resize; }
  .divider::before { content: ''; position: absolute; }
  .divider.v::before { inset: 0 -5px; }
  .divider.h::before { inset: -5px 0; }
  .divider::after {
    content: ''; position: absolute; border-radius: 2px;
    background: rgba(255, 255, 255, 0.18);
    opacity: 0; transition: opacity 0.15s ease;
  }
  .divider.v::after { left: 50%; top: 10px; bottom: 10px; width: 2px; transform: translateX(-50%); }
  .divider.h::after { top: 50%; left: 10px; right: 10px; height: 2px; transform: translateY(-50%); }
  .divider:hover::after, .divider.active::after { opacity: 1; }
  /* corner handle — where a vertical & horizontal divider cross; drags BOTH at once */
  .divider.corner { z-index: 6; }
  .divider.corner.nwse { cursor: nwse-resize; }
  .divider.corner.nesw { cursor: nesw-resize; }
  .divider.corner::before { content: ''; position: absolute; inset: -5px; }   /* bigger grab target */
  .divider.corner::after { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 5px; height: 5px; border-radius: 50%; }
  body.dragging webview { pointer-events: none; }   /* guests must not eat the drag */

  /* pane drag — the pane's own header is the handle; ghost + drop-zone hint.
     NOTE: the dragging guest streams the gesture, so its webview must stay
     interactive: no pointer-events:none, no visibility:hidden anywhere. */
  body.dragging-pane { cursor: grabbing; }

  .drag-ghost {
    position: fixed; z-index: 30; pointer-events: none;
    display: flex; align-items: center; gap: 9px;
    padding: 10px 16px; border-radius: 13px;
    font-size: 12px; font-weight: 600; color: #e2e3df;
    background: linear-gradient(180deg, rgba(62, 62, 66, 0.97), rgba(40, 40, 42, 0.97));
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transform: rotate(2.5deg);
    animation: ghostIn 0.15s ease-out;
  }
  .drag-ghost .dg-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #e98b8b, #b34040);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3);
  }
  @keyframes ghostIn { from { opacity: 0; transform: rotate(0deg) scale(0.85); } }

  .drop-hint {
    position: fixed; z-index: 25; pointer-events: none;
    opacity: 0;
    background: rgba(125, 150, 171, 0.14);
    border: 1.5px solid rgba(125, 150, 171, 0.55);
    border-radius: 12px;
    box-shadow: inset 0 0 36px rgba(125, 150, 171, 0.12);
    transition: left 0.16s cubic-bezier(0.3, 0.9, 0.3, 1), top 0.16s cubic-bezier(0.3, 0.9, 0.3, 1),
                width 0.16s cubic-bezier(0.3, 0.9, 0.3, 1), height 0.16s cubic-bezier(0.3, 0.9, 0.3, 1),
                opacity 0.12s ease;
  }
  .drop-hint.show { opacity: 1; }
  .drop-hint::after {
    content: attr(data-label);
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    padding: 4px 12px; border-radius: 999px; white-space: nowrap;
    font-size: 11px; font-weight: 600; color: #cfd2cd;
    background: rgba(20, 20, 22, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.12);
  }
  .drop-hint.swap {   /* same blue as a split — only the dashed outline marks it as a swap */
    background: rgba(125, 150, 171, 0.14);
    border-color: rgba(125, 150, 171, 0.55); border-style: dashed;
    box-shadow: inset 0 0 36px rgba(125, 150, 171, 0.12);
  }

  /* ── site preview pane ──────────────────────────────────────────────── */
  .pv-toggle { opacity: 0.6; }                              /* always present; muted until a live site is up */
  .pv-toggle.live, .pv-toggle.active { opacity: 1; color: #5a97e8; }   /* dev server detected, or preview open — house blue */
  /* a raised card that pops OUTWARD — same recipe as the session sidebar:
     light border + top-lit sheen + a big soft drop shadow floating it off the bg */
  /* the gray outline stays; the drop shadow is gone for good (user compared both and picked this) */
  .pane.preview { display: flex; flex-direction: column; background: #222224; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 15px; overflow: hidden; }
  /* a Chrome-style toolbar: nav cluster · omnibox · actions */
  .pv-bar { flex-shrink: 0; height: 40px; display: flex; align-items: center; gap: 3px; padding: 0 8px; position: relative; z-index: 6;
    background: #2b2b2e; border-bottom: 1px solid rgba(0, 0, 0, 0.32);
    -webkit-app-region: no-drag; }   /* same colour as the active tab so they merge */
  /* the bookmark star — gold when the current page is saved */
  .pv-star.on { color: #e8c37a; }
  .pv-star.on svg { fill: #e8c37a; }
  /* ── PUSH TO PRODUCTION card — sidebar strip. LAYERED: the front card is the summary
     (whole header = toggle); pressing it slides a DETAILS PANEL up from behind it
     (grid-rows 0fr→1fr animation, same trick as the sidebar date groups). ── */
  /* ── background-tasks card — same design language as the git push card below ── */
  #sbTasks { flex-shrink: 0; display: flex; flex-direction: column; }
  #sbTasks.has { padding: 6px 12px 0; margin: 2px -12px 0; }   /* 2px margin + 6px padding = the same 8px vertical gap used by notices and Git */
  .bgt-card {
    display: flex; flex-direction: column;
    padding: 7px; margin: 0 -11px; background: transparent;   /* bleed nearly to the sidebar's edge — max usable width (matches .git-card) */
    border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 13px;
    opacity: 0; transform: translateY(5px); transition: opacity 0.22s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .bgt-card.on { opacity: 1; transform: none; }
  .bgt-card[hidden] { display: none; }
  .bgt-top { display: flex; align-items: center; gap: 10px; padding: 6px 7px 5px; cursor: pointer; border-radius: 10px; transition: background 0.12s; }
  .bgt-top:hover { background: rgba(255, 255, 255, 0.04); }
  .bgt-top:hover .bgt-chev { color: #e2e3df; }
  .bgt-ico { flex: none; color: #7ec98f; display: grid; place-items: center; }   /* green — the sidebar's "live/success" accent */
  /* the Material indeterminate ring: the whole svg rotates while the arc's dash grows and chases
     its own tail — the standard clean spinner (r=9 → circumference ≈56.5, all values scaled to it) */
  .bgt-ico svg { animation: bgt-rot 1.8s linear infinite; }
  .bgt-ico circle { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; animation: bgt-dash 1.4s ease-in-out infinite; }
  @keyframes bgt-rot { 100% { transform: rotate(360deg); } }
  @keyframes bgt-dash {
    0%   { stroke-dasharray: 1, 56.5;  stroke-dashoffset: 0; }
    50%  { stroke-dasharray: 42, 56.5; stroke-dashoffset: -16; }
    100% { stroke-dasharray: 42, 56.5; stroke-dashoffset: -55.5; }
  }
  .bgt-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .bgt-title { font: 600 12.5px 'Hanken Grotesk', system-ui, sans-serif; color: #e8e9e5; }
  .bgt-sub { font: 500 11px 'Hanken Grotesk', system-ui, sans-serif; color: #8a8b86; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bgt-chev { flex: none; width: 22px; height: 22px; display: grid; place-items: center; color: #86877f; }
  .bgt-chev svg { transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1); }
  .bgt-card.open .bgt-chev svg { transform: rotate(180deg); }
  .bgt-details { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.34s cubic-bezier(0.25, 0.9, 0.3, 1); }
  .bgt-card.open .bgt-details { grid-template-rows: 1fr; }
  .bgt-details-in { overflow: hidden; min-height: 0; }
  .bgt-panel { margin: 2px 0 3px; opacity: 0; transform: translateY(6px); transition: opacity 0.26s ease 0.05s, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1) 0.03s; }
  .bgt-card.open .bgt-panel { opacity: 1; transform: none; }
  .bgt-hr { height: 1px; flex: none; background: rgba(255, 255, 255, 0.07); margin: 0 2px 7px; }
  .bgt-list { max-height: min(34vh, 420px); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 5px; padding-right: 5px; }
  .bgt-list::-webkit-scrollbar { width: 3px; }
  .bgt-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 2px; }
  .bgt-list::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.22); }
  .bgt-list::-webkit-scrollbar-track { background: transparent; }
  /* task rows: outline-only containers, matching .gc-file */
  .bgt-row { display: flex; align-items: center; gap: 9px; padding: 7px 6px 7px 9px; border-radius: 9px;
    background: transparent; border: 1px solid rgba(255, 255, 255, 0.09); transition: border-color 0.12s, opacity 0.2s ease, transform 0.2s ease; }
  .bgt-row:hover { border-color: rgba(255, 255, 255, 0.16); }
  .bgt-row.out { opacity: 0; transform: translateY(-4px) scale(0.98); pointer-events: none; }   /* finished/cancelled → the row zips away, no lingering state tag */
  .bgt-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.5px; }
  .bgt-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 12px 'Hanken Grotesk', system-ui, sans-serif; color: #e6e7e3; }
  .bgt-name i { font-style: normal; font-weight: 500; font-size: 10.5px; color: #75766f; margin-left: 6px; }   /* elapsed timer rides beside the name; the command lives in the row's hover tooltip */
  .bgt-x { flex: none; width: 22px; height: 22px; border: 0; border-radius: 7px; background: transparent; color: #86877f; cursor: pointer; font-size: 11px; display: grid; place-items: center; }
  .bgt-x:hover { background: rgba(255, 255, 255, 0.09); color: #d9868c; }

  #sbGit { flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; }
  /* .has is toggled by JS when the card is actually SHOWING (the element itself always exists,
     so :not(:empty) can't tell) — it brings in only the push card's spacing. */
  #sbGit.has { padding: 6px 12px 10px; margin: 2px -12px 0; }
  /* Permanent boundary between transient sidebar widgets and the account row. It is deliberately
     independent of #sbGit.has so the profile section stays divided even when there is nothing to push. */
  .sb-foot-divider {
    flex: 0 0 1px; height: 1px; margin: 0 -12px 6px;
    background: rgba(255, 255, 255, 0.07); pointer-events: none;
  }
  /* NO background container — the widget is bare content on the sidebar (its rows carry the
     design), and it BLEEDS 6px past the strip on each side to sit closer to the borders */
  .git-card {
    display: flex; flex-direction: column;
    padding: 7px; margin: 0 -11px; background: transparent;   /* bleed nearly to the sidebar's edge — max usable width */
    border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 13px;   /* a whisper of an outline around the WHOLE widget (header, list, button) — background stays transparent */
    opacity: 0; transform: translateY(5px); transition: opacity 0.22s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .git-card.on { opacity: 1; transform: none; }
  .git-card[hidden] { display: none; }
  /* folder switched (active pane changed / project opened) → the card's content refreshes
     with a quick fade-down instead of snapping to the new repo's state */
  @keyframes gcSwap { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
  .git-card.gc-swap > * { animation: gcSwap 0.26s cubic-bezier(0.22, 1, 0.36, 1); }
  /* CLOSED: header on top of the (collapsed) details. OPEN: the header — with the
     expand/close controls — JUMPS TO THE TOP of the widget, the list unfolds below it.
     The .gc-hr splitter (order 2) always sits directly under the header block. */
  .gc-top { order: 1; display: flex; align-items: center; gap: 10px; padding: 6px 7px 5px; cursor: pointer; border-radius: 10px; transition: background 0.12s; }   /* icon + text centered against each other */
  .gc-hr { order: 2; height: 1px; flex: none; background: rgba(255, 255, 255, 0.07); margin: 5px 2px 7px; }
  .gc-details { order: 3; }
  .gc-push { order: 6; }   /* commit-msg input (4) and the dest line (5) sit ABOVE the button */
  .git-card.open .gc-top { order: 0; }
  /* publish variant (folder not on GitHub yet): a simple two-line card — nothing to expand */
  .git-card.pub .gc-chev, .git-card.pub .gc-details { display: none; }
  .gc-top:hover { background: rgba(255, 255, 255, 0.04); }
  .gc-top:hover .gc-chev { color: #e2e3df; }
  .gc-ico { flex: none; color: #cfd0cc; display: grid; place-items: center; }
  .gc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .gc-title { font: 600 12.5px 'Hanken Grotesk', system-ui, sans-serif; color: #e8e9e5; }
  .gc-sub { font: 500 11px 'Hanken Grotesk', system-ui, sans-serif; color: #8a8b86; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gc-sub .add { font-weight: 650; color: #7ec98f; }
  .gc-sub .del { font-weight: 650; color: #d9868c; }
  .gc-sub .beh { font-weight: 650; color: #d9b986; }   /* remote is ahead — the push flow pulls (rebase) first */
  .gc-chev { flex: none; width: 22px; height: 22px; display: grid; place-items: center; color: #86877f; }
  .gc-chev svg { transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1); }   /* ^ collapsed (details rise above) → v open */
  .git-card.open .gc-chev svg { transform: rotate(180deg); }
  .gc-x { flex: none; width: 22px; height: 22px; border: 0; border-radius: 7px; background: transparent; color: #86877f; cursor: pointer; font-size: 11px; display: grid; place-items: center; }
  .gc-x:hover { background: rgba(255, 255, 255, 0.09); color: #e2e3df; }
  /* the BACK card: animated upward expansion (0fr→1fr), visually a separate darker panel */
  .gc-details { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.34s cubic-bezier(0.25, 0.9, 0.3, 1); }
  .git-card.open .gc-details { grid-template-rows: 1fr; }
  .gc-details-in { overflow: hidden; min-height: 0; }
  .gc-panel { margin: 2px 0 9px; padding: 0;   /* bare — no panel chrome, the rows ARE the design */
    opacity: 0; transform: translateY(6px); transition: opacity 0.26s ease 0.05s, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1) 0.03s; }
  .git-card.open .gc-panel { opacity: 1; transform: none; }
  .gc-list { max-height: min(54vh, 700px); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 5px; padding-right: 5px; }   /* use the room — over half the window before scrolling kicks in */
  /* slim, quiet scrollbar — a 3px hairline that brightens slightly under the cursor */
  .gc-list::-webkit-scrollbar { width: 3px; }
  .gc-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 2px; }
  .gc-list::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.22); }
  .gc-list::-webkit-scrollbar-track { background: transparent; }
  /* file rows: OUTLINE-ONLY containers (transparent fill), text centered.
     Click = exclude from this push → outline hides, text grays out. */
  .gc-file { position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 8px 9px; border-radius: 9px; cursor: pointer;
    background: transparent; border: 1px solid rgba(255, 255, 255, 0.09); text-align: center;
    transition: background 0.12s, border-color 0.12s; }
  .gc-file:hover { border-color: rgba(255, 255, 255, 0.16); }
  .gc-file.off { border-color: transparent; }
  .gc-file.off .gcf-name, .gc-file.off .gcf-name i, .gc-file.off .gcf-desc,
  .gc-file.off .gcf-desc .add, .gc-file.off .gcf-desc .del { color: #63645f; }
  /* secrets/junk tag: amber while safely held back; RED if the user re-includes one */
  .gcf-hold { font: 600 9px 'Hanken Grotesk', system-ui, sans-serif; letter-spacing: 0.4px; text-transform: uppercase; color: #b3936a; margin-top: 0.5px; }
  .gcf-hold.live { color: #d9868c; }
  .gc-file.off .gcf-hold { color: #b3936a; }   /* stays readable on a grayed row — it explains WHY the row is off */
  /* under the list: held-back count + the .gitignore offer */
  .gc-note { margin: 7px 2px 0; text-align: center; font: 500 10.5px 'Hanken Grotesk', system-ui, sans-serif; color: #6f706b; }
  .gc-note[hidden] { display: none; }
  .gc-igadd { color: #7ea7dd; cursor: pointer; }
  .gc-igadd:hover { text-decoration: underline; }
  .gcf-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1.5px; }
  .gcf-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 600 12px 'Hanken Grotesk', system-ui, sans-serif; color: #e6e7e3; }
  .gcf-name i { font-style: normal; font-weight: 500; font-size: 10.5px; color: #75766f; margin-left: 6px; }
  .gcf-desc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 500 10.5px 'Hanken Grotesk', system-ui, sans-serif; color: #8a8b86; }
  .gcf-desc .add { font-weight: 650; color: #7ec98f; }
  .gcf-desc .del { font-weight: 650; color: #d9868c; margin-left: 5px; }
  .gc-push {
    width: 100%; margin-top: 21px; height: 32px; border: 0; border-radius: 9px; cursor: pointer;   /* 21 - dest's -3 = 18px above, matching the 18px below the button to the splitter */
    display: flex; align-items: center; justify-content: center; gap: 7px;
    font: 600 12px 'Hanken Grotesk', system-ui, sans-serif; color: #fff;
    background: #3b82f6;   /* FLAT — no gradient, no glow, no inset bevel */
    transition: background 0.14s;
  }
  .gc-push:hover { background: #4a8bf0; }
  .gc-push:disabled { background: #33415e; color: #9fb0cc; cursor: default; }
  /* working/done states stay blue (the animation says "busy", gray would say "broken") */
  .gc-push.pushing:disabled, .gc-push.done:disabled { background: #3b82f6; color: #fff; }
  /* the little arrow riding through the button — a masked 15px window it loops across */
  .gcp-ico { width: 15px; height: 15px; overflow: hidden; display: grid; place-items: center; }
  .gcp-ico svg { display: block; animation: gcp-rise 0.85s cubic-bezier(0.45, 0, 0.45, 1) infinite; }
  .gcp-ico.down { transform: rotate(180deg); }   /* pull stage — same ride, visually downward */
  .gcp-ico.fly svg { animation: gcp-fly 1.05s cubic-bezier(0.3, 0, 0.35, 1) both; }   /* success: one final fly-out */
  @keyframes gcp-rise { 0% { transform: translateY(9px); opacity: 0; } 45% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-9px); opacity: 0; } }
  @keyframes gcp-fly { 0% { transform: translateY(10px); opacity: 0; } 30% { transform: translateY(0); opacity: 1; } 55% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-12px); opacity: 0; } }
  /* commit message — optional; the placeholder text is what ships when left empty */
  .gc-msgw { order: 4; position: relative; display: block; margin: 0 0 8px; }
  .gc-msgw[hidden] { display: none; }
  .gc-msg { width: 100%; height: 29px; box-sizing: border-box; padding: 0 30px 0 10px; text-align: center;
    background: transparent; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 9px; outline: none;
    color: #c9cac5; font: 500 11px 'Hanken Grotesk', system-ui, sans-serif; transition: border-color 0.12s; }
  .gc-msg::placeholder { color: #63645f; }
  .gc-msg:focus { border-color: rgba(255, 255, 255, 0.2); }
  .gc-ai { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 21px; height: 21px; display: grid; place-items: center;
    background: transparent; border: 0; border-radius: 6px; color: #86877f; cursor: pointer; padding: 0; }
  .gc-ai:hover { color: #e2e3df; background: rgba(255, 255, 255, 0.06); }
  .gc-ai.busy { color: #7ea7dd; animation: gcai-pulse 0.9s ease-in-out infinite; }
  @keyframes gcai-pulse { 50% { opacity: 0.3; } }
  /* destination line — exactly where the push lands (repo · branch), ABOVE the button */
  .gc-dest { order: 5; margin: 0 0 -3px; text-align: center; font: 500 10.5px 'Hanken Grotesk', system-ui, sans-serif; color: #6f706b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* 8px to the input above (its margin), 8px to the button below — dead center */
  .gc-dest b { font-weight: 600; color: #9d9e9a; }
  .gc-dest[hidden] { display: none; }
  .gc-status { order: 7; margin-top: 8px; font: 500 11px 'Hanken Grotesk', system-ui, sans-serif; }   /* errors only — success is the button's fly-out animation */
  .gc-status.err { color: #d9868c; overflow-wrap: anywhere; }
  .gc-status[hidden] { display: none; }

  /* pending-changes count on the refresh button — finished tasks landed edits; refresh when ready */
  .pv-reload { position: relative; }
  .pv-chg { position: absolute; top: -3px; right: -4px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px;
    display: grid; place-items: center; background: #d99a3d; color: #1c1c1e;
    font: 700 9.5px 'Hanken Grotesk', system-ui, sans-serif; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); pointer-events: none; }
  .pv-chg[hidden] { display: none; }
  /* bookmarks bar (Chrome-style): a row of draggable PILLS. Shares the toolbar's colour so it reads as
     one continuous bar (no separator); slides DOWN into view the first time a bookmark exists. */
  .pv-bmbar { flex-shrink: 0; display: flex; align-items: center; gap: 3px; padding: 0 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    background: #2b2b2e; border-bottom: 1px solid rgba(0, 0, 0, 0.32); -webkit-app-region: no-drag;
    max-height: 0; opacity: 0;
    transition: max-height 0.24s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, padding 0.24s cubic-bezier(0.22, 1, 0.36, 1); }
  .pv-bmbar.show { max-height: 40px; padding-top: 4px; padding-bottom: 4px; opacity: 1; }
  .pv-bmbar::-webkit-scrollbar { height: 0; }
  .pv-bmbar[hidden] { display: none; }
  /* connected look: kill the line between the toolbar and the bookmark bar while the bar is showing */
  .pane.preview:has(.pv-bmbar.show) .pv-bar { border-bottom-color: transparent; }
  .pv-bm { position: relative; display: inline-flex; align-items: center; gap: 7px; flex: none; max-width: 190px; height: 27px; padding: 0 11px;
    border: 0; border-radius: 999px; background: transparent; color: #a7a8a2; cursor: pointer; white-space: nowrap; box-sizing: border-box;
    font: 550 11.5px 'Hanken Grotesk', system-ui, sans-serif;
    transition: background 0.13s, color 0.13s, transform 0.18s cubic-bezier(0.2, 0, 0, 1),
      max-width 0.19s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.16s ease, padding 0.19s cubic-bezier(0.4, 0, 0.2, 1); }
  .pv-bm:hover { background: rgba(255, 255, 255, 0.08); color: #e8e9e5; }
  .pv-bm.pv-bm-enter, .pv-bm.pv-bm-leave { max-width: 0; opacity: 0; padding-left: 0; padding-right: 0; gap: 0; }   /* grow-in / collapse-out */
  .pv-bm.pv-bm-leave { pointer-events: none; }
  .pv-bm.dragging { z-index: 5; background: #333336; color: #ecede9; cursor: grabbing; transition: none;
    box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.5), 0 2px 6px -2px rgba(0, 0, 0, 0.4); }   /* lift; no transform transition so it tracks the pointer 1:1 */
  .pv-bm.settling { z-index: 5; }
  .pv-bm-fav { flex: none; width: 15px; height: 15px; display: grid; place-items: center; overflow: hidden; }
  .pv-bm-fav img { max-width: 15px; max-height: 15px; border-radius: 3px; }
  .pv-bm-globe { color: #83847e; }
  .pv-bm-globe svg { width: 15px; height: 15px; }
  .pv-bm-lab { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* right-click menu (bookmarks) — frosted dark glass, matches the app's popovers */
  .pv-ctx { position: fixed; z-index: 2147483000; min-width: 168px; padding: 5px; border-radius: 11px;
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03)), rgba(24,24,26,0.96);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 16px 40px -14px rgba(0,0,0,0.7), 0 3px 10px -4px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
    opacity: 0; transform: translateY(-4px) scale(0.98); transform-origin: top left;
    transition: opacity 0.12s ease, transform 0.13s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; }
  .pv-ctx.show { opacity: 1; transform: none; pointer-events: auto; }
  .pv-ctx-item { display: block; width: 100%; text-align: left; padding: 7px 11px; border: 0; border-radius: 7px;
    background: transparent; color: #dcdcd7; cursor: pointer; font: 500 12.5px 'Hanken Grotesk', system-ui, sans-serif; }
  .pv-ctx-item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
  .pv-ctx-item.danger:hover { background: rgba(201, 123, 132, 0.2); color: #ffd7dc; }
  .pv-ctx-sep { height: 1px; margin: 4px 6px; background: rgba(255, 255, 255, 0.09); }
  body.dragging-pane .pv-tabs { cursor: grabbing; }
  .pv-btn { flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center; border: none; border-radius: 999px; background: transparent; color: #b6b7b2; cursor: pointer; transition: background 0.13s, color 0.13s; }
  .pv-btn svg { width: 15px; height: 15px; }
  .pv-btn:hover { background: rgba(255, 255, 255, 0.09); color: #e8e9e5; }
  .pv-btn.off { color: #54554e; pointer-events: none; }   /* nothing in history that way */
  .pv-close svg { width: 14px; height: 14px; }
  .pv-close:hover { background: rgba(201, 123, 132, 0.28); color: #fff; }
  /* ports menu — every open localhost port; click one to preview it */
  .pv-ports-wrap { position: relative; flex-shrink: 0; }
  .pv-ports.on { background: rgba(255, 255, 255, 0.09); color: #e8e9e5; }
  .pv-ports-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; min-width: 168px; max-width: 300px;
    background: #2b2b2e; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; padding: 4px;
    box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.7), 0 2px 6px -3px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; gap: 2px; }
  .pv-ports-menu[hidden] { display: none; }
  .pv-port { display: flex; align-items: center; width: 100%; text-align: left; padding: 7px 10px; border: none; border-radius: 7px;
    background: transparent; color: #cdcec9; font: 500 12.5px 'Hanken Grotesk', system-ui, sans-serif; cursor: pointer; white-space: nowrap; transition: background 0.12s, color 0.12s; }
  .pv-port::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #8fae96; margin-right: 9px; flex-shrink: 0; box-shadow: 0 0 4px rgba(143, 174, 150, 0.5); }
  .pv-port:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
  .pv-port.active { background: rgba(143, 174, 150, 0.16); color: #fff; }
  .pv-port-empty { padding: 9px 11px; color: #75766f; font: 500 12px 'Hanken Grotesk', system-ui, sans-serif; text-align: center; white-space: nowrap; }   /* shown when no sites yet */
  /* remembered-sites rows: liveness dot + label + forget × (replaces the always-green ::before) */
  .pv-site::before { display: none; }
  .pv-site-dot { width: 6px; height: 6px; border-radius: 50%; background: #56574f; margin-right: 9px; flex-shrink: 0; }
  .pv-site-dot.live { background: #8fae96; box-shadow: 0 0 4px rgba(143, 174, 150, 0.5); }
  .pv-site-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .pv-site-x { flex-shrink: 0; margin-left: 8px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 4px; color: #75766f; font-size: 14px; line-height: 1; opacity: 0; transition: opacity 0.12s, background 0.12s, color 0.12s; }
  .pv-site:hover .pv-site-x { opacity: 1; }
  .pv-site-x:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
  /* the omnibox — a rounded address pill recessed into the toolbar (Chrome dark) */
  .pv-omni { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 30px; margin: 0 6px; padding: 0 13px; border-radius: 999px; background: rgba(0, 0, 0, 0.24); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.32); transition: background 0.14s, box-shadow 0.14s; cursor: text; }
  .pv-omni:hover { background: rgba(0, 0, 0, 0.3); }
  .pv-omni:focus-within { background: rgba(0, 0, 0, 0.34); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(143, 174, 150, 0.45); }
  .pv-omni-icon { flex-shrink: 0; width: 13px; height: 13px; color: #84857f; }
  .pv-url { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: 500 13px 'Hanken Grotesk', system-ui, sans-serif; color: #cdcec9; cursor: inherit; }
  .pv-url::placeholder { color: #75766f; }
  .pv-body { position: relative; flex: 1; min-height: 0; }
  .pv-views { position: absolute; inset: 0; }
  .pv-web { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #222224; }
  /* ── desktop-app tab (attach mode): the app runs as its own real window; the pane holds this status card.
        Card v2: one big hero SVG + FLAT clean controls inside the card (no topbar app buttons). The only
        semi-skeuomorphic element allowed is the command input (chat-prompt-bar style inset). ── */
  .pv-app-status { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #222224; padding: 28px; text-align: center; }
  .pv-app-tile { flex: none; display: grid; place-items: center; color: #8a8b85; margin-bottom: 2px; }
  .pv-app-tile svg { width: 46px; height: 46px; }
  .pv-app-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; max-width: 92%; }
  .pv-app-act { padding: 8px 16px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.10); background: rgba(255, 255, 255, 0.04); color: #c2c3be; font: 600 12px 'Hanken Grotesk', system-ui, sans-serif; cursor: pointer; transition: background 0.12s, color 0.12s; }
  .pv-app-act:hover { background: rgba(255, 255, 255, 0.085); color: #eceded; }
  .pv-app-hint { max-width: 360px; font: 500 11.5px 'Hanken Grotesk', system-ui, sans-serif; color: #75766f; line-height: 1.45; }
  .pv-app-spin { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, 0.12); border-top-color: #9a9b96; animation: pvspin 0.7s linear infinite; }
  .pv-app-msg { font: 600 14px 'Hanken Grotesk', system-ui, sans-serif; color: #cfd0cb; max-width: 85%; }
  .pv-app-log { font: 500 10.5px 'JetBrains Mono', Consolas, monospace; color: #75766f; max-width: 92%; min-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pv-app-cmd { width: min(460px, 84%); padding: 9px 13px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.09); background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 1.5px 3px rgba(0, 0, 0, 0.35); color: #cfd0cb; font: 500 11.5px 'JetBrains Mono', Consolas, monospace; outline: none; }
  .pv-app-cmd:focus { border-color: rgba(158, 195, 255, 0.35); }
  .pv-app-go { padding: 8px 20px; border-radius: 10px; border: 1px solid rgba(21, 81, 166, 0.6); background: #3b82f6; color: #fff; font: 700 12.5px 'Hanken Grotesk', system-ui, sans-serif; cursor: pointer; transition: background 0.12s; }
  .pv-app-go:hover { background: #4c8ff7; }
  .pv-app-go:active { background: #2f74e8; transform: translateY(1px); }
  /* crossfade reload: a frozen snapshot held over the webview while it reloads, then faded out */
  /* the reload "dip": the preview fades to a flat gray while the page reloads beneath,
     then fades back to reveal the new page (asymmetric: quick dip in, softer fade back) */
  .pv-freeze { position: absolute; inset: 0; z-index: 9; background-color: #222224; opacity: 0; pointer-events: none; transition: opacity 0.16s ease; }
  .pv-freeze.show { opacity: 1; }
  .pv-freeze.fade { opacity: 0; transition: opacity 0.42s ease; }
  /* reload button spins while a reload is in flight — visible confirmation even if the page is identical */
  @keyframes pv-spin { to { transform: rotate(360deg); } }
  .pv-reload.spinning svg { animation: pv-spin 0.6s linear infinite; transform-origin: 50% 50%; }
  /* preview tabs — Chrome style: the active tab is the SAME colour as the toolbar
     below it and flows into it (rounded top + flared bottom corners) */
  .pv-tabs { flex-shrink: 0; display: flex; align-items: flex-end; padding: 6px 6px 0; background: #1b1b1d; cursor: grab; }   /* the tab strip is the pane's drag handle (tabs/+/close override to pointer) */
  .pv-tablist { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 2px; overflow-x: auto; }
  .pv-tablist::-webkit-scrollbar { height: 0; }
  .pv-tabs .pv-close { flex-shrink: 0; align-self: center; margin: 0 0 4px 6px; }   /* pane close, pinned top-right (Chrome-style) */
  .pv-close:hover { background: rgba(201, 123, 132, 0.3); color: #fff; }
  .pv-tab {
    position: relative; display: flex; align-items: center; gap: 7px; flex-shrink: 0; max-width: 184px; height: 30px;
    padding: 0 7px 0 9px; border-radius: 9px 9px 0 0; cursor: pointer; white-space: nowrap; box-sizing: border-box;
    background: transparent; color: #86877f;
    font: 500 11.5px 'Hanken Grotesk', system-ui, sans-serif;
    transition: max-width 0.19s cubic-bezier(0.4, 0, 0.2, 1), padding 0.19s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.16s ease, background 0.13s, color 0.13s;
  }
  .pv-tab.pv-tab-enter { max-width: 0; opacity: 0; padding-left: 0; padding-right: 0; }   /* grows in from collapsed */
  /* mid-reorder LIFT: raised above its neighbours, no transform transition so it tracks the pointer 1:1 */
  .pv-tab.dragging { z-index: 5; cursor: grabbing; background: #303033; color: #ecede9;
    box-shadow: 0 8px 20px -6px rgba(0,0,0,0.55), 0 2px 6px -2px rgba(0,0,0,0.4); transition: none; }
  .pv-tab.settling { z-index: 5; }   /* stays on top while it FLIP-settles into its slot */
  .pv-tab:hover { background: rgba(255, 255, 255, 0.055); color: #c2c3be; }
  .pv-tab.active { background: #2b2b2e; color: #ecede9; }
  /* the two outward corner flares that merge the active tab into the toolbar */
  .pv-tab.active::before, .pv-tab.active::after { content: ""; position: absolute; bottom: 0; width: 8px; height: 8px; }
  .pv-tab.active::before { left: -8px; background: radial-gradient(circle at top left, transparent 8px, #2b2b2e 8px); }
  .pv-tab.active::after { right: -8px; background: radial-gradient(circle at top right, transparent 8px, #2b2b2e 8px); }
  .pvt-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; max-width: 128px; }
  /* favicon slot — 16px; shows the favicon, or a gray globe fallback (browser-style) when the site has none */
  .pvt-icon { flex-shrink: 0; width: 16px; height: 16px; display: grid; place-items: center; }
  .pvt-icon img { max-width: 16px; max-height: 16px; border-radius: 3px; }
  .pvt-globe { display: grid; place-items: center; color: #83847e; }
  .pvt-globe svg { width: 14px; height: 14px; }
  .pvt-x { flex-shrink: 0; width: 17px; height: 17px; display: grid; place-items: center; border: 0; border-radius: 5px; background: transparent; color: inherit; opacity: 0.5; cursor: pointer; font-size: 10px; line-height: 1; }
  .pvt-x:hover { background: rgba(255, 255, 255, 0.16); opacity: 1; }
  .pv-tab-add { flex-shrink: 0; width: 26px; height: 26px; margin-bottom: 2px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: #86877f; cursor: pointer; font-size: 17px; line-height: 1; }
  .pv-tab-add:hover { background: rgba(255, 255, 255, 0.08); color: #e8e9e5; }
  /* the flat surface behind a site; carries the empty state when nothing's connected */
  .pv-loading { position: absolute; inset: 0; background: #222224; transition: opacity 0.35s ease; display: grid; place-items: center; }
  .pv-loading.done { opacity: 0; pointer-events: none; }
  /* spinner shows while a real page is loading; hidden once nothing's there (empty) or it's revealed (done) */
  .pv-spinner { width: 28px; height: 28px; border-radius: 50%;
                border: 2.5px solid rgba(255, 255, 255, 0.12); border-top-color: #9a9b96;
                animation: pvspin 0.7s linear infinite; }
  .pv-loading.empty .pv-spinner, .pv-loading.done .pv-spinner { display: none; }
  @keyframes pvspin { to { transform: rotate(360deg); } }
  .pv-empty { display: none; flex-direction: column; align-items: center; text-align: center; gap: 16px; max-width: 300px; padding: 28px; }
  .pv-loading.empty .pv-empty { display: flex; }   /* only when nothing's loaded */
  .pv-empty-icon { display: grid; place-items: center; color: #6c6d67; }
  .pv-empty-icon svg { width: 40px; height: 40px; }
  .pv-empty-title { font: 600 14.5px 'Hanken Grotesk', system-ui, sans-serif; color: #b4b5b0; }

  /* ── design mode: annotate the live site, then hand the marked-up shots + prompts to Claude ── */
  /* the Design toggle is a raised skeuomorphic button so it stands apart from the flat preview-bar icons */
  .pv-design { color: #d3d4cf;
    background: linear-gradient(180deg, #4d4f54, #393b40);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 0 0 1px rgba(0, 0, 0, 0.3), inset 0 -1.5px 1.5px -1px rgba(0, 0, 0, 0.3), 0 1px 1.5px -0.5px rgba(0, 0, 0, 0.5); }
  .pv-design svg { filter: drop-shadow(0 1px 0.4px rgba(0, 0, 0, 0.38)); }
  .pv-design:hover { filter: brightness(1.14); background: linear-gradient(180deg, #4d4f54, #393b40); color: #f0f1ed; }
  .pv-design:active { transform: scale(0.93); }
  .pv-design.on { color: #fff;
    background: linear-gradient(180deg, #9ec3a8, #5d9d70);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 0 0 1px rgba(26, 86, 48, 0.6), inset 0 -1.5px 2px -1px rgba(0, 40, 16, 0.35), 0 1px 1.5px -0.5px rgba(0, 0, 0, 0.5); }
  .pv-design.on:hover { filter: brightness(1.07); background: linear-gradient(180deg, #9ec3a8, #5d9d70); color: #fff; }
  .dz-overlay { position: absolute; inset: 0; z-index: 8; display: none; cursor: crosshair; }
  .pane.designing .dz-overlay { display: block; }
  .dz-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .dz-svg .dz-shape { fill: none; stroke: #ffd633; stroke-width: 2.5; }
  .dz-svg .dz-shape.box { fill: rgba(255, 214, 51, 0.07); }
  .dz-svg .dz-hi { stroke: #ffe98a; stroke-width: 3.5; }
  /* "Attach transforms" — floating pill over the preview while the Move tool is active; collects every
     element the user repositioned/resized/rotated and sends the exact changes to chat. */
  .dz-attach { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 12; display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px 8px 12px; border: 0; border-radius: 999px; background: #1f6feb; color: #fff; font: 600 12.5px 'Hanken Grotesk', system-ui, sans-serif; letter-spacing: .2px; cursor: pointer; box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08) inset; transition: filter .13s, transform .12s, background .2s; }
  .dz-attach[hidden] { display: none; }
  .dz-attach svg { width: 16px; height: 16px; }
  .dz-attach:hover { filter: brightness(1.08); }
  .dz-attach:active { transform: translateX(-50%) scale(.96); }
  .dz-attach.empty { background: #555c66; }
  .dz-attach.empty span::after { content: ' — move something first'; opacity: .8; }
  /* the design tools row — a flat icon toolbar at the TOP of the Edit rail (.de-panel); active = blue.
     Undo/redo (.de-ib) sit on the right after a flex spacer. */
  .de-tools { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex-shrink: 0; padding: 8px; }   /* DEFAULT (collapsed): vertical stack. LEFT-aligned (not centered) so each tool's x is independent of the rail width — lets the FLIP measure final positions mid-transition */
  .pane.preview.de-editing .de-tools { flex-direction: row; align-items: center; gap: 3px; padding: 7px 8px; }   /* EXPANDED: horizontal row */
  .de-tools-sp { flex: 1; display: none; }
  .pane.preview.de-editing .de-tools-sp { display: block; }
  /* splitter between the tools and undo/redo: horizontal hairline in the vertical rail, vertical in the row */
  .de-tools-div { flex: none; width: 18px; height: 1px; background: rgba(255, 255, 255, 0.12); margin: 3px 0 3px 6px; }
  .pane.preview.de-editing .de-tools-div { width: 1px; height: 16px; margin: 0 3px; }
  .de-tools .de-ib { display: grid; width: 30px; }   /* undo/redo live in the rail too (match the tool column width) */
  .pane.preview.de-editing .de-tools .de-ib { width: 26px; animation: deFadeIn 0.3s 0.06s backwards; }
  @keyframes deFadeIn { from { opacity: 0; } }
  .dz-tool { width: 30px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 7px; cursor: pointer; background: transparent; color: #b9bab3; transition: background 0.12s, color 0.12s; }
  .dz-tool svg { width: 16px; height: 16px; }
  .dz-tool:hover { background: rgba(255, 255, 255, 0.08); color: #e8e9e5; }
  .dz-tool.active { background: #3b82f6; color: #fff; }
  @keyframes dzBarIn { from { opacity: 0; transform: translateY(-8px); } }
  .dz-sep { width: 26px; height: 1px; background: rgba(255, 255, 255, 0.1); margin: 4px 0; }
  .dz-submit { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 13px;
    background: linear-gradient(180deg, #a9c6af, #82a78a); color: #10231a; cursor: pointer;
    box-shadow: 0 4px 14px -4px rgba(132, 169, 140, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(0, 0, 0, 0.13);
    transition: filter 0.14s, transform 0.1s, box-shadow 0.16s; }
  .dz-submit svg { width: 17px; height: 17px; }
  .dz-submit:hover { filter: brightness(1.07); transform: translateY(-1px);
    box-shadow: 0 8px 20px -5px rgba(132, 169, 140, 0.85), 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
  .dz-submit:active { transform: translateY(0) scale(0.93); filter: brightness(0.98); }
  .dz-submit:disabled { background: rgba(255, 255, 255, 0.05); color: #74756f; cursor: default; filter: none; transform: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
  .dz-submit .dz-count { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4.5px;
    border-radius: 999px; background: #d97757; color: #fff; font: 800 10px 'Hanken Grotesk', system-ui, sans-serif; box-shadow: 0 0 0 2px #333537; }
  .dz-submit:disabled .dz-count { display: none; }
  .dz-x { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 11px; background: transparent;
    color: #86877f; cursor: pointer; font-size: 14px; transition: background 0.14s, color 0.14s; }
  .dz-x:hover { background: rgba(201, 123, 132, 0.22); color: #fff; }

  /* ── visual property editor: a full-height LEFT rail docked onto the preview pane. The pane's
        padding-left shifts the tabs/toolbar/webview right by --de-w, so the editor takes real space
        and reads as a continuation of the preview chrome (top-bar colour, flush, no own bevel — the
        pane's overflow:hidden + radius wraps its top/bottom corners). FIXED width — the rail is not resizable. */
  /* the rail's near-black over the near-black app bg washed the 1px border out on this side —
     an inset hairline doubles it up so the left edge reads as crisply as the other three */
  .pane.preview.de-docked { padding-left: var(--de-w, 320px); --de-w: 46px; box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.09); }   /* DEFAULT: a thin vertical tool rail */
  .pane.preview.de-docked.de-editing { --de-w: 320px; }   /* EXPANDED: full editor while an element is selected (animates via the width/padding-left transitions) */
  .de-panel { position: absolute; z-index: 7; top: 0; bottom: 0; left: 0; width: var(--de-w, 320px); display: none; flex-direction: column; overflow: hidden;
    background: #1b1b1d;   /* exact match to the .pv-tabs drag strip */
    font: 500 12px 'Hanken Grotesk', system-ui, sans-serif; color: #d6d7d3; animation: deIn 0.18s cubic-bezier(0.22, 1, 0.36, 1); transition: width 0.2s cubic-bezier(0.25, 0.9, 0.3, 1); }
  .de-panel.show { display: flex; }
  /* Short stacked previews still need every collapsed-rail action. Condense the rail at the
     layout level and keep a scrollbar-free fallback for the absolute 240px pane minimum. */
  .pane.preview.de-short:not(.de-editing) .de-panel { overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
  .pane.preview.de-short:not(.de-editing) .de-panel::-webkit-scrollbar { width: 0; height: 0; }
  .pane.preview.de-short:not(.de-editing) .de-tools { gap: 2px; padding: 4px 8px; }
  .pane.preview.de-short:not(.de-editing) .dz-tool { height: 22px; }
  .pane.preview.de-short:not(.de-editing) .dz-tool svg { width: 14px; height: 14px; }
  .pane.preview.de-short:not(.de-editing) .de-tools-div { margin: 1px 0 1px 6px; }
  .pane.preview.de-short:not(.de-editing) .de-tools .de-ib { height: 22px; }
  .pane.preview.de-short:not(.de-editing) .de-send { padding: 5px 0 6px; }
  .pane.preview.de-short:not(.de-editing) .de-sendbtn { width: 28px; height: 28px; border-radius: 8px; }
  @keyframes deIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
  .de-head { display: flex; align-items: center; gap: 6px; padding: 9px 9px 9px 12px; flex-shrink: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
  .de-sel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 11.5px 'Hanken Grotesk', system-ui, sans-serif; color: #cdcec9; }
  /* empty "pick an element" state — shown while the rail is open but nothing is selected */
  .de-title { flex: 1; font: 600 12px 'Hanken Grotesk', system-ui, sans-serif; color: #cdcec9; letter-spacing: 0.2px; }
  .de-empty { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 9px; padding: 22px; }
  .de-empty-ic { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #8fb6ff; background: rgba(76, 154, 255, 0.12); border: 1px solid rgba(76, 154, 255, 0.22); margin-bottom: 2px; }
  .de-empty-ic svg { width: 21px; height: 21px; }
  .de-empty-t { font: 600 13px 'Hanken Grotesk', system-ui, sans-serif; color: #e8e9e5; }
  .de-empty-s { font: 500 11.5px 'Hanken Grotesk', system-ui, sans-serif; color: #8a8b84; line-height: 1.45; max-width: 215px; }
  .de-pick { margin-top: 6px; height: 34px; padding: 0 15px; border: 0; border-radius: 9px; display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(180deg, #5b9bf7, #3b82f6); color: #fff; font: 600 12px 'Hanken Grotesk', system-ui, sans-serif; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); transition: filter 0.13s, transform 0.07s; }
  .de-pick:hover { filter: brightness(1.07); }
  .de-pick:active { transform: scale(0.98); }
  .de-ib { width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: #9a9b94; cursor: pointer; }
  .de-ib:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); color: #e8e9e5; }
  .de-ib:disabled { opacity: 0.3; cursor: default; }
  .de-ib svg { width: 15px; height: 15px; }
  .de-body { flex: 1; min-height: 0; overflow-y: auto; padding: 11px 12px 14px; }
  .de-body::-webkit-scrollbar { width: 0; }
  .de-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px 14px; display: none; }   /* the controls only exist in the EXPANDED (editing) state */
  .pane.preview.de-editing .de-scroll { display: block; animation: deFadeIn 0.28s 0.08s backwards; }   /* controls fade in as the rail finishes expanding */
  .de-scroll::-webkit-scrollbar { width: 0; }
  .de-foot:empty { display: none; }
  /* the selected element's tag + selector, shown at the top of the controls with a deselect ✕ */
  .de-bread { display: flex; align-items: center; gap: 6px; margin-bottom: 11px; }
  .de-sec { font: 600 10px 'Hanken Grotesk', system-ui, sans-serif; letter-spacing: 0.5px; text-transform: uppercase; color: #75766f; margin: 16px 0 7px; }
  .de-sec:first-child { margin-top: 0; }
  .de-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px; margin-bottom: 7px; }
  .de-row > * { min-width: 0; }   /* let each cell shrink to its track so a wide value (e.g. padding string) can't push the column past the panel and get clipped */
  /* fields are recessed wells, matching the composer's .input-shell (dark inset + soft inset shadow) */
  .de-f { display: flex; align-items: center; gap: 8px; min-width: 0; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 11px; padding: 0 11px; height: 34px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22); transition: background 0.12s, border-color 0.12s; }
  .de-f:hover { background: rgba(0, 0, 0, 0.3); border-color: rgba(255, 255, 255, 0.11); }
  .de-f .lab { color: #8a8b84; flex-shrink: 0; }
  .de-f input, .de-f select { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #e8e9e5; font: 500 12px 'Hanken Grotesk', system-ui, sans-serif; text-align: right; }
  .de-f select { text-align-last: right; cursor: pointer; }
  .de-f select option { background: #26262a; color: #e8e9e5; }
  .de-f input[type=number]::-webkit-inner-spin-button { display: none; }
  .de-text { width: 100%; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 11px; padding: 8px 11px; color: #e8e9e5; font: 500 12px 'Hanken Grotesk', system-ui, sans-serif; outline: 0; resize: vertical; min-height: 50px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22); }
  .de-text:focus, .de-f:focus-within { border-color: rgba(76, 154, 255, 0.6); }
  .de-sw { width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, 0.2); flex-shrink: 0; cursor: pointer; position: relative; overflow: hidden; }
  .de-sw input { position: absolute; inset: -6px; width: 220%; height: 220%; padding: 0; border: 0; cursor: pointer; }
  .de-seg { display: flex; gap: 2px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 11px; padding: 3px; height: 34px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22); }
  .de-seg button { flex: 1; border: 0; border-radius: 6px; background: transparent; color: #8a8b84; cursor: pointer; display: grid; place-items: center; }
  .de-seg button svg { width: 15px; height: 15px; }
  .de-seg button.on { background: rgba(59, 130, 246, 0.95); color: #fff; }
  .de-foot { flex-shrink: 0; padding: 10px 12px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
  /* universal SEND — icon-only (Lucide send), sits at the strip's bottom; BLUE when there's something to send */
  .de-send { flex-shrink: 0; margin-top: auto; padding: 9px 0 6px; border-top: 1px solid rgba(255, 255, 255, 0.07); display: flex; justify-content: center; }   /* margin-top:auto pins it to the sidebar's ACTUAL bottom */
  .de-sendbtn { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: #3b82f6; color: #fff; cursor: pointer; transition: background 0.13s; }   /* FLAT — no gradient/inset/shadow */
  .de-sendbtn:hover { background: #4c8ff7; }
  .de-sendbtn[disabled] { background: rgba(255, 255, 255, 0.07); color: #62635f; cursor: default; }
  .de-sendbtn svg { width: 16px; height: 16px; display: block; }
  .de-apply { width: 100%; height: 36px; border: 0; border-radius: 10px; background: linear-gradient(180deg, #5b9bf7, #3b82f6); color: #fff; font: 600 12.5px 'Hanken Grotesk', system-ui, sans-serif; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); transition: filter 0.13s, transform 0.07s; }
  .de-apply:hover { filter: brightness(1.07); }
  .de-apply:active { transform: scale(0.985); }
  /* header tag chip */
  .de-tag { flex-shrink: 0; font: 600 9.5px 'Hanken Grotesk', system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.4px; color: #7db4ff; background: rgba(76, 154, 255, 0.14); border: 1px solid rgba(76, 154, 255, 0.32); padding: 2px 6px; border-radius: 6px; }
  /* full-width fields (Font / Fill / Border / Shadow / Transform / Filter) — labels left, values left-aligned so long values read naturally */
  .de-f.de-wide { width: 100%; margin-bottom: 7px; }   /* full-width fields (Font, Fill, Opacity, Border, Shadow…) need the same gap the grid rows have */
  .de-f.de-wide .lab { min-width: 52px; }
  .de-f.de-wide input { text-align: left; }
  /* opacity slider */
  .de-opacity { gap: 10px; }
  .de-f .de-range { flex: 1; min-width: 0; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.16); outline: 0; }
  .de-f .de-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #4c9aff; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
  .de-opv { flex-shrink: 0; min-width: 32px; text-align: right; color: #cdcec9; font-variant-numeric: tabular-nums; }
  /* Size / Leading / Spacing / Radius: label + drag slider + editable number (+ unit) */
  .de-numslider .de-numwrap { flex: 0 0 auto; display: flex; align-items: baseline; }   /* keeps the number + unit snug: "14px", not "14      px" */
  .de-numslider .de-numv { flex: 0 0 auto; width: 3ch; field-sizing: content; min-width: 1ch; max-width: 5ch; text-align: right; color: #cdcec9; font-variant-numeric: tabular-nums; }   /* auto-sizes to its digits so the unit hugs it */
  .de-numslider .de-unit { flex: 0 0 auto; margin-left: 1px; color: #85867e; font-size: 11px; }
  .de-align { margin-bottom: 7px; }   /* standalone text-align seg needs the bottom gap a .de-row would give */
  /* ── Simple / Advanced sliding toggle (top of the controls) ── */
  .de-mode { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 13px; padding: 3px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 999px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22); }
  .de-mode-thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; right: 50%; border-radius: 999px; background: rgba(255, 255, 255, 0.09); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06); transition: left 0.24s cubic-bezier(0.4, 0, 0.2, 1), right 0.24s cubic-bezier(0.4, 0, 0.2, 1); }
  .de-mode.adv .de-mode-thumb { left: 50%; right: 3px; }
  .de-mode button { position: relative; z-index: 1; border: 0; background: transparent; color: #8d8e86; font: 600 11.5px 'Hanken Grotesk', system-ui, sans-serif; padding: 5px 0; cursor: pointer; transition: color 0.18s; }
  .de-mode:not(.adv) button:first-of-type, .de-mode.adv button:last-of-type { color: #f0f1ed; }
  /* ── custom inline colour picker: HSV square + hue + alpha (checkerboard shows transparency) ── */
  .de-cp { margin-bottom: 11px; --de-checker: linear-gradient(45deg, #b9b9b9 25%, transparent 25%, transparent 75%, #b9b9b9 75%), linear-gradient(45deg, #b9b9b9 25%, transparent 25%, transparent 75%, #b9b9b9 75%); }
  .de-cp-head { display: flex; align-items: center; gap: 9px; cursor: pointer; }
  .de-cp-ca { width: 13px; height: 13px; flex-shrink: 0; color: #85867e; transition: transform 0.22s; }
  .de-cp.open .de-cp-ca { transform: rotate(180deg); }
  .de-cp-body { max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; transition: max-height 0.26s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s, margin-top 0.22s; }   /* collapsed by default — slides open on header click */
  .de-cp.open .de-cp-body { max-height: 175px; opacity: 1; margin-top: 9px; }
  .de-cp-head .lab { color: #8a8b84; flex-shrink: 0; min-width: 40px; }
  .de-cp-sw { width: 22px; height: 22px; flex-shrink: 0; border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); background-color: #f3f3f3; background-image: var(--de-checker); background-size: 8px 8px; background-position: 0 0, 4px 4px; }
  .de-cp-sw i { display: block; width: 100%; height: 100%; }
  .de-cp-hex { flex: 1; min-width: 0; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 9px; padding: 6px 10px; color: #e8e9e5; font: 500 12px 'Hanken Grotesk', system-ui, sans-serif; outline: 0; cursor: text; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22); }
  .de-cp-hex:focus { border-color: rgba(76, 154, 255, 0.6); }
  .de-cp-sv { position: relative; height: 104px; border-radius: 10px; margin-bottom: 9px; cursor: crosshair; touch-action: none; user-select: none; background-image: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); }
  .de-cp-svh { position: absolute; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.5); transform: translate(-50%, -50%); pointer-events: none; }
  .de-cp-hue, .de-cp-alpha { position: relative; height: 12px; border-radius: 7px; margin-bottom: 8px; cursor: pointer; touch-action: none; user-select: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); }
  .de-cp-hue { background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
  .de-cp-alpha { background-color: #f3f3f3; background-image: var(--de-checker); background-size: 8px 8px; background-position: 0 0, 4px 4px; }
  .de-cp-abg { position: absolute; inset: 0; border-radius: 7px; pointer-events: none; }
  .de-cp-hh, .de-cp-ah { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.5); transform: translate(-50%, -50%); pointer-events: none; }
  /* ── custom dropdown: field-styled trigger + our own dark popup (body-level, position:fixed) ── */
  .de-dd { cursor: pointer; }
  .de-dd-cur { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 4px; background: none; border: 0; outline: 0; color: #e8e9e5; font: 500 12px 'Hanken Grotesk', system-ui, sans-serif; cursor: pointer; padding: 0; }
  .de-dd-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .de-dd-ca { width: 13px; height: 13px; flex-shrink: 0; color: #85867e; }
  .de-dd-pop { position: fixed; z-index: 200; background: #242427; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 11px; padding: 5px; box-shadow: 0 14px 38px -10px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05); max-height: 260px; overflow-y: auto; animation: deDdIn 0.13s ease; }
  @keyframes deDdIn { from { opacity: 0; transform: translateY(-4px); } }
  .de-dd-pop button { display: block; width: 100%; text-align: left; border: 0; background: none; color: #d6d7d3; font: 500 12.5px 'Hanken Grotesk', system-ui, sans-serif; padding: 7px 11px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
  .de-dd-pop button:hover { background: rgba(255, 255, 255, 0.08); }
  .de-dd-pop button.on { background: rgba(59, 130, 246, 0.9); color: #fff; }
  /* collapsible Advanced section */
  .de-adv-toggle { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 4px; }
  .de-adv-toggle:hover { color: #aeafa7; }
  .de-caret { width: 13px; height: 13px; flex-shrink: 0; transition: transform 0.15s ease; }
  .de-caret.open { transform: rotate(90deg); }
  .de-adv[hidden] { display: none; }
  .de-rawlab { font: 600 10px 'Hanken Grotesk', system-ui, sans-serif; letter-spacing: 0.5px; text-transform: uppercase; color: #75766f; margin: 11px 0 6px; }
  .de-raw { font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 11.5px; min-height: 58px; }
  /* per-annotation number badge + prompt popover, positioned over the overlay */
  .dz-badge { position: absolute; z-index: 9; width: 21px; height: 21px; border-radius: 999px; display: grid; place-items: center;
    background: #ffd633; color: #1c1c1e; font: 800 11px 'Hanken Grotesk', system-ui, sans-serif; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.5);
    pointer-events: auto; cursor: pointer; transform: translate(-50%, -50%); }
  /* the per-area prompt bar is styled to match the main chat composer (.composer + .input-shell) */
  .dz-pop { position: absolute; z-index: 10; width: 300px; pointer-events: auto; box-sizing: border-box;
    display: flex; flex-direction: column; padding: 7px 7px 8px;
    background: linear-gradient(180deg, rgba(41, 42, 44, 0.97), rgba(34, 35, 37, 0.97));
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 18px;
    box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.8), 0 2px 8px -4px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    animation: dzPopIn 0.16s ease; }
  .dz-pop.collapsed { display: none; }
  @keyframes dzPopIn { from { opacity: 0; transform: translateY(5px); } }
  .dz-pop-head { display: flex; align-items: center; gap: 7px; margin: 1px 3px 7px; }
  .dz-pop-n { width: 18px; height: 18px; flex-shrink: 0; border-radius: 999px; display: grid; place-items: center; background: #ffd633; color: #1c1c1e; font: 800 10px 'Hanken Grotesk', system-ui, sans-serif; }
  .dz-pop-kind { flex: 1; min-width: 0; font: 600 11px 'Hanken Grotesk', system-ui, sans-serif; color: #9d9e9a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dz-pop-del { border: 0; background: transparent; color: #8a8b87; cursor: pointer; font-size: 13px; padding: 2px 5px; border-radius: 6px; flex-shrink: 0; }
  .dz-pop-del:hover { background: rgba(201, 123, 132, 0.22); color: #fff; }
  /* input pill — mirrors .input-shell from the composer */
  .dz-pp-shell { display: flex; align-items: flex-end; gap: 8px; padding: 7px 7px 7px 11px;
    background: rgba(0, 0, 0, 0.24); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 12px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25); }
  .dz-pp-attach { flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px; color: #626360;
    border: 0; border-radius: 50%; background: transparent; cursor: pointer; transition: color 0.14s, background 0.14s; }
  .dz-pp-attach:hover { color: #e2e3df; background: rgba(255, 255, 255, 0.07); }
  .dz-pp-shell textarea { flex: 1; min-width: 0; resize: none; border: 0; outline: 0; background: none; color: #e2e3df;
    font: 400 14px/1.5 'Hanken Grotesk', system-ui, sans-serif; max-height: 120px; min-height: 21px; padding: 4px 0; overflow-y: auto; }
  .dz-pp-shell textarea::placeholder { color: #626360; }
  .dz-pp-send { flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px; color: #e2e3df;
    border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 50%; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    cursor: pointer; transition: transform 0.16s, background 0.16s, color 0.16s, border-color 0.16s, opacity 0.16s; }
  .dz-pp-send:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255, 255, 255, 0.22); transform: scale(1.06); }
  .dz-pp-send:active:not(:disabled) { transform: scale(0.92); }
  .dz-pp-send:disabled { opacity: 0.35; cursor: default; color: #626360; }

  /* ── image lightbox: a full-app overlay, dark backdrop, X to close ──────── */
  .lightbox { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 54px;
    background: rgba(0, 0, 0, 0.82); animation: lbIn 0.16s ease; }
  .lightbox[hidden] { display: none; }
  .lb-img { max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; object-fit: contain; border-radius: 8px;
    cursor: zoom-in; transform-origin: center; transition: transform 0.18s cubic-bezier(0.3, 0.9, 0.3, 1); will-change: transform; }
  .lb-img.zoomed { cursor: zoom-out; border-radius: 0; box-shadow: none; }
  .lb-close, .lb-dl { -webkit-app-region: no-drag;   /* the titlebar drag region survives under overlays — carve these out */
    position: fixed; top: 44px; z-index: 3; width: 38px; height: 38px; display: grid; place-items: center;
    border: none; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: #e8e9e5; cursor: pointer; transition: background 0.14s; }
  .lb-close { right: 18px; }
  .lb-dl { right: 62px; }
  .lb-close:hover, .lb-dl:hover { background: rgba(255, 255, 255, 0.2); }
  /* generation-history side panel: shows the gpt-image-2 original + the gpt-image-1.5 transparent edit */
  .lb-history { position: fixed; left: 18px; top: 50%; transform: translateY(-50%); z-index: 3;
    display: flex; flex-direction: column; gap: 10px; max-height: 86vh; overflow-y: auto;
    padding: 12px; border-radius: 14px; background: rgba(20, 20, 22, 0.74); backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 18px 50px -14px rgba(0, 0, 0, 0.7); }
  .lb-history[hidden] { display: none; }
  .lbh-title { font: 600 11px 'Hanken Grotesk', system-ui, sans-serif; color: #9d9e9a; letter-spacing: 0.3px; padding: 0 2px 1px; }
  .lbh-box { display: flex; flex-direction: column; gap: 5px; width: 120px; padding: 6px; border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px; background: rgba(255, 255, 255, 0.03); cursor: pointer; transition: border-color 0.14s, background 0.14s; }
  .lbh-box:hover { background: rgba(255, 255, 255, 0.07); }
  .lbh-box.active { border-color: #5b9bf7; background: rgba(91, 155, 247, 0.13); }
  /* checkerboard so a transparent edit reads AS transparent in the thumbnail */
  .lbh-box img { width: 100%; height: 84px; object-fit: contain; border-radius: 6px;
    background-color: #2a2c30;
    background-image: linear-gradient(45deg, #3a3c40 25%, transparent 25%), linear-gradient(-45deg, #3a3c40 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #3a3c40 75%), linear-gradient(-45deg, transparent 75%, #3a3c40 75%);
    background-size: 14px 14px; background-position: 0 0, 0 7px, 7px -7px, -7px 0; }
  .lbh-box span { font: 600 10.5px 'Hanken Grotesk', system-ui, sans-serif; color: #c4c5c1; text-align: center; line-height: 1.25; white-space: pre-line; }
  @keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
  /* while the lightbox is up, webviews go click-through so the overlay reliably gets the
     close-click (and any click closes it, so it can never trap you) */
  body.lightbox-open webview { pointer-events: none; }

  /* ── image annotator — the lightbox's sibling overlay. Controls float in a top-center
     PILL (Apple Markup / Snipping Tool style); the image gets the whole backdrop. ── */
  .imged { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.86); animation: lbIn 0.15s ease; }
  .imged[hidden] { display: none; }
  body.imged-open webview { pointer-events: none; }   /* same guard as the lightbox — webviews must not eat the overlay's clicks */
  .ie-pill {
    /* the shell titlebar's DRAG REGION (top 34px) stays active even under a z-9999 overlay
       (Electron computes drag regions globally) — no-drag carves the pill out of it, and the
       pill also sits below the bar so its full height is reliably clickable */
    -webkit-app-region: no-drag;
    position: absolute; top: 44px; left: 50%; transform: translateX(-50%); z-index: 3;
    display: inline-flex; align-items: center; gap: 4px;
    max-width: calc(100vw - 140px); overflow-x: auto; scrollbar-width: none;
    padding: 7px; border-radius: 999px;   /* uniform inset — first chip sits as far from the left edge as from top/bottom */
    background: rgba(30, 30, 33, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 14px 44px -12px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .ie-pill::-webkit-scrollbar { display: none; }
  .ie-pill.view .ie-edit-only { display: none; }   /* file:// taint fallback → view-only zoom pill */
  .ie-group { display: inline-flex; align-items: center; gap: 4px; flex: none; }
  .ie-b {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none;
    width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;   /* circular chips */
    background: transparent; color: #b9bab5; cursor: pointer;
    font: 600 12.5px 'Hanken Grotesk', system-ui, sans-serif;
    transition: background 0.12s, color 0.12s;
  }
  .ie-b:hover { background: rgba(255, 255, 255, 0.09); color: #eceded; }
  .ie-b:disabled { opacity: 0.3; cursor: default; }
  .ie-b:disabled:hover { background: transparent; color: #b9bab5; }
  /* active tool = FLAT blue circle, white glyph — no glow, no bevel */
  .ie-b.ie-tool.on { background: #4f8fe6; color: #fff; }
  .ie-b.ie-tool.on:hover { background: #5a97e8; color: #fff; }
  .ie-pct { min-width: 44px; height: 34px; padding: 0 4px; border: 0; border-radius: 999px; background: transparent; text-align: center; font: 600 12px 'Hanken Grotesk', system-ui, sans-serif; color: #9d9e9a; user-select: none; flex: none; cursor: pointer; transition: background 0.12s, color 0.12s; }
  .ie-pct:hover { background: rgba(255, 255, 255, 0.09); color: #eceded; }
  .ie-div { width: 1px; height: 20px; background: rgba(255, 255, 255, 0.13); margin: 0 5px; flex: none; }
  /* stroke color = round swatch button → CUSTOM picker popover (same design language as the
     preview Color widget: SV field + hue strip + dotted hex box — not the Chrome native dialog) */
  .ie-color-btn { width: 34px; height: 34px; }
  .ie-csw { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.75); background: #ff4d4d; pointer-events: none; }
  .ie-cpop {
    -webkit-app-region: no-drag;
    position: absolute; top: 96px; left: 50%; transform: translateX(-50%); z-index: 4;
    width: 208px; padding: 12px; border-radius: 14px;
    background: rgba(30, 30, 33, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 48px -14px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .ie-cpop[hidden] { display: none; }
  .ie-cp-sv { position: relative; height: 124px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); cursor: crosshair; }
  .ie-cp-dot { position: absolute; box-sizing: border-box; width: 15px; height: 15px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.35); transform: translate(-50%, -50%); pointer-events: none; }
  .ie-cp-hue { position: relative; height: 14px; border-radius: 7px; margin-top: 12px; cursor: ew-resize; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
  .ie-cp-nub { position: absolute; box-sizing: border-box; top: 50%; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.3); transform: translate(-50%, -50%); pointer-events: none; }
  .ie-cp-hexbox { margin-top: 12px; display: flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); border: 1.5px dotted rgba(255, 255, 255, 0.3); }
  .ie-cp-hex { flex: 1; height: 100%; min-width: 0; border: none; background: transparent; color: #f2f3ef; text-align: center; text-transform: uppercase; font: 600 12px 'JetBrains Mono', Consolas, monospace; letter-spacing: 1px; outline: none; padding: 0; }
  /* close floats top-right on the backdrop, round, exactly like the lightbox's —
     below the titlebar and carved out of its drag region, like the pill */
  .ie-close {
    -webkit-app-region: no-drag;
    position: absolute; top: 44px; right: 18px; z-index: 3;
    width: 38px; height: 38px; display: grid; place-items: center;
    border: none; border-radius: 999px;
    background: rgba(255, 255, 255, 0.1); color: #e8e9e5; cursor: pointer; transition: background 0.14s;
  }
  .ie-close:hover { background: rgba(255, 255, 255, 0.2); }
  /* FREE-PAN canvas: the stage is absolutely positioned (left/top driven by JS), overflow
     hidden — no Chrome scrollbars at deep zoom; grabbing IS the navigation, and the image
     may hang off-screen while you work an edge. */
  .ie-body { position: absolute; inset: 0; overflow: hidden; }
  .ie-stage { position: absolute; left: 0; top: 0; }
  .ie-stage img { display: block; width: 100%; height: 100%; user-select: none; pointer-events: none; border-radius: 4px; }
  /* the canvas is ALWAYS live (no Edit mode): cursor tool pans, marker tools draw.
     Only the view-only fallback (tainted file:// image) turns interaction off. */
  .ie-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: auto; cursor: crosshair; }
  .imged[data-tool="cursor"] .ie-stage canvas { cursor: grab; }
  .imged[data-tool="cursor"].ie-panning .ie-stage canvas { cursor: grabbing; }
  .imged.view .ie-stage canvas { pointer-events: none; }

  .feat-exp { margin-left: 7px; font: 700 8.5px 'Hanken Grotesk', system-ui, sans-serif; letter-spacing: 1px;
    color: #d9b96e; background: rgba(217, 185, 110, 0.12); border: 1px solid rgba(217, 185, 110, 0.3);
    padding: 1.5px 6px; border-radius: 999px; vertical-align: 2px; }

  /* ── Clodex account gate — mirrors the website sign-in (clean glass card) ──
     Covers the whole window; the 34px shellbar sits ABOVE it (z-index below)
     so the min/max/close controls stay live over the light background. */
  .acct-gate { position: fixed; inset: 0; z-index: 3000; display: none; overflow: hidden;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    background: linear-gradient(180deg,#5b86f0 0,#8fb1f6 9%,#d3e2fb 25%,#fff 52%,#f6f8fb 78%,#edeff3 100%);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.4,0,0.2,1), filter 0.55s ease; }
  .acct-gate.show { display: flex; align-items: center; justify-content: center; }
  /* the "you're in" reveal — the whole gate lifts, blurs and fades to hand off to the IDE (not an instant swap) */
  .acct-gate.leaving { opacity: 0; transform: scale(1.045); filter: blur(7px); pointer-events: none; }
  /* …and the IDE ANIMATES OPEN beneath it (only after a sign-in reveal, never on a plain boot): the workspace
     fades up while the sidebar slides in from the left, so it reads as the app opening FOR you, not a snap-swap */
  body.app-opening #row { animation: appFade 0.6s ease both; }
  body.app-opening #sideb { animation: appRise 0.62s 0.06s cubic-bezier(0.22,1,0.36,1) both; }
  body.app-opening #panes { animation: appRise 0.62s 0.12s cubic-bezier(0.22,1,0.36,1) both; }
  @keyframes appFade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes appRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { body.app-opening #row, body.app-opening #sideb, body.app-opening #panes { animation-duration: 0.01s; } }
  /* success celebration shown in the card the moment sign-in lands — minimal, light,
     matched to the website login/dashboard: a white chip + a subtle on-brand confetti burst */
  .ag-cel { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 0 2px; }
  .ag-chip-wrap { position: relative; width: 76px; height: 76px; margin: 0 auto 24px; }
  .ag-chip { position: relative; z-index: 2; width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; background: #fff;
    box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 10px 26px -8px rgba(24,44,96,0.28), 0 3px 8px rgba(24,44,96,0.12);
    animation: agPop 0.66s cubic-bezier(0.34,1.62,0.5,1) both; }
  .ag-chip svg { width: 40px; height: 40px; fill: none; stroke: #1f86f7; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .ag-chip svg path { stroke-dasharray: 34; stroke-dashoffset: 34; animation: agDraw 0.46s 0.34s cubic-bezier(0.65,0,0.35,1) forwards; }
  /* confetti: particles radiate from the chip centre, then fade */
  .ag-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 3; }
  .ag-conf { position: absolute; left: 0; top: 0; opacity: 0; animation: agConf 0.9s cubic-bezier(.2,.7,.3,1) forwards; }
  .ag-conf.sq { border-radius: 2px; }
  .ag-conf.ci { border-radius: 50%; }
  .ag-conf.ring { background: transparent !important; border-radius: 50%; }
  .ag-cel h1 { animation: agFade 0.5s 0.42s both; }
  .ag-cel .ag-sub { margin-bottom: 4px; animation: agFade 0.5s 0.52s both; }
  @keyframes agPop { 0% { transform: scale(0) translateY(6px); } 62% { transform: scale(1.08); } 100% { transform: scale(1); } }
  @keyframes agDraw { to { stroke-dashoffset: 0; } }
  @keyframes agFade { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
  @keyframes agConf { 0% { opacity: 0; transform: translate(0,0) scale(.2) rotate(0deg); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx),var(--dy)) scale(1) rotate(var(--rot)); } }
  @media (prefers-reduced-motion: reduce) { .ag-chip, .ag-chip svg path, .ag-cel h1, .ag-cel .ag-sub { animation-duration: 0.01s; } .ag-conf { display: none; } .acct-gate { transition-duration: 0.2s; } }
  .ag-scene { position: absolute; top: 0; left: 0; width: 100%; height: min(100%,1150px);
    object-fit: cover; object-position: center top; pointer-events: none; -webkit-user-drag: none;
    -webkit-mask-image: linear-gradient(180deg,#000 68%,transparent 98%); mask-image: linear-gradient(180deg,#000 68%,transparent 98%); }
  .acct-gate-card { -webkit-app-region: no-drag; position: relative; z-index: 1; width: 400px; max-width: 88vw; box-sizing: border-box;
    padding: 34px 32px 30px; border-radius: 26px; text-align: center;
    background: rgba(255,255,255,0.72); border: 1px solid rgba(255,255,255,0.7);
    box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 24px 60px -20px rgba(24,44,96,0.28), 0 8px 24px -12px rgba(24,44,96,0.18);
    -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
    transition: width 0.5s cubic-bezier(0.22,1,0.36,1), padding 0.5s cubic-bezier(0.22,1,0.36,1), border-radius 0.5s cubic-bezier(0.22,1,0.36,1), box-shadow 0.5s ease; }
  .acct-gate h1 { font-weight: 800; font-size: 1.5rem; letter-spacing: -0.015em; color: #181b23; margin: 0 0 7px; }
  .ag-sub { font-size: 0.92rem; line-height: 1.45; color: #4c5364; margin: 0 auto 22px; max-width: 23em; }
  .acct-gate form { display: flex; flex-direction: column; gap: 15px; text-align: left; }
  .ag-group { display: flex; flex-direction: column; gap: 7px; }
  .ag-label { font-weight: 700; font-size: 0.86rem; letter-spacing: -0.005em; color: #181b23; }
  .ag-field { display: flex; align-items: center; gap: 11px; padding: 0 14px; height: 50px; border-radius: 12px;
    background: rgba(24,34,66,0.04); border: 1px solid rgba(24,34,66,0.11);
    box-shadow: inset 0 1px 2px rgba(24,44,96,0.05); transition: border-color 0.18s, background 0.18s; }
  .ag-field:focus-within { border-color: rgba(24,34,66,0.3); background: rgba(24,34,66,0.05); }
  .ag-field input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 0.95rem; color: #181b23; }
  .ag-field input::placeholder { color: #8a92a6; }
  .ag-eye { flex: none; border: 0; background: transparent; cursor: pointer; width: 34px; height: 34px; margin-right: -6px;
    color: #8a92a6; display: flex; align-items: center; justify-content: center; border-radius: 9px; transition: color 0.18s, background 0.18s; }
  .ag-eye:hover { color: #181b23; background: rgba(24,34,66,0.06); }
  .ag-eye svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .ag-btn { width: 100%; height: 48px; margin-top: 3px; border: 0; border-radius: 13px; cursor: pointer;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 700; font-size: 0.98rem; color: #fff;
    background: linear-gradient(180deg,#287ded 0,#3b8fff 60%,#519efa 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 0 0 1px rgba(22,88,185,0.4), inset 0 -5px 10px rgba(15,66,150,0.3), 0 1px 1px rgba(10,28,66,0.4), 0 4px 10px rgba(10,32,80,0.38), 0 14px 28px -10px rgba(14,44,100,0.45);
    text-shadow: 0 1px 1px rgba(18,70,150,0.3); transition: transform 0.18s, box-shadow 0.18s, filter 0.18s; }
  .ag-btn:hover { transform: translateY(-2px); }
  .ag-btn:active { transform: translateY(1px) scale(0.985); }
  .ag-btn:disabled { opacity: 0.65; cursor: default; transform: none; }
  .ag-btn.secondary { color: #1f86f7; background: #fff; border: 1px solid rgba(147,147,147,0.24); box-shadow: 0 2px 6px rgba(20,22,30,0.06); text-shadow: none; }
  .ag-err { min-height: 14px; font-size: 0.84rem; color: #e5484d; text-align: center; margin-top: -3px; }
  .ag-or { display: flex; align-items: center; gap: 14px; margin: 20px 0 14px; font-size: 0.84rem; font-weight: 500; color: #8a92a6; }
  .ag-or::before, .ag-or::after { content: ""; flex: 1; height: 1px; background: rgba(24,34,66,0.12); }
  .ag-socials { display: flex; flex-direction: column; gap: 10px; }
  .ag-social { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 48px; padding: 0 16px;
    background: #fff; border: 1px solid rgba(147,147,147,0.2); border-radius: 9px; cursor: pointer;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 600; font-size: 0.92rem; color: #000;
    transition: background 0.16s, border-color 0.16s, transform 0.16s, box-shadow 0.16s; }
  .ag-social:hover { background: #f7f7f8; border-color: rgba(147,147,147,0.42); box-shadow: 0 2px 6px rgba(20,22,30,0.08); transform: translateY(-1px); }
  .ag-social svg { width: 19px; height: 19px; flex: none; }
  .ag-fine { margin-top: 20px; text-align: center; font-size: 0.82rem; color: #8a92a6; }
  .ag-link { color: #1f86f7; cursor: pointer; text-decoration: none; font-weight: 600; }
  .ag-link:hover { text-decoration: underline; }
  .ag-spin { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid rgba(24,44,96,0.15);
    border-top-color: #3b8fff; animation: agspin 0.8s linear infinite; margin: 10px auto; }
  @keyframes agspin { to { transform: rotate(360deg); } }

  /* ── first-run onboarding: connect Claude / Codex, rendered inside the gate card ── */
  .acct-gate.onboarding .acct-gate-card { width: 1040px; max-width: 94vw; padding: 25px; border-radius: 32px; text-align: center; overflow: hidden;
    background: rgba(255,255,255,0.76); border: 1px solid rgba(255,255,255,0.72);
    box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset, 0 34px 80px -28px rgba(24,44,96,0.32), 0 10px 30px -14px rgba(24,44,96,0.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); }
  .acct-gate.onboarding .acct-gate-card h1 { font-size: 1.85rem; letter-spacing: -0.022em; margin: 0 0 3px; }
  /* content starts hidden; JS adds .in AFTER the card has grown to full width, so it fades in
     over a settled layout instead of reflowing mid-fade (that mid-grow reflow read as "sudden") */
  .ob2-body { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.22,1,0.36,1); }
  .ob2-body.in { opacity: 1; transform: none; }
  @keyframes ob2Soft { from { opacity: 0; } to { opacity: 1; } }   /* soft fade for a button/state that just changed (row updates in place) */
  .ob2-sub { font-size: 1.02rem; line-height: 1.55; color: #6d7076; margin: 0 auto 26px; max-width: 34em; }
  .ob2-sub b { color: #6d7076; font-weight: 700; }
  .ob2-provs { display: flex; flex-direction: column; gap: 14px; text-align: left; }
  .ob2-prov { position: relative; display: flex; align-items: center; gap: 24px; padding: 20px 26px; border-radius: 18px;
    background: rgba(255,255,255,0.62); border: 1px solid rgba(24,34,66,0.1);
    box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 10px 26px -14px rgba(24,44,96,0.22); transition: border-color .22s, box-shadow .22s; }
  .ob2-prov.on { border-color: rgba(42,157,92,0.45); box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 12px 30px -14px rgba(42,157,92,0.32); }
  .ob2-main { flex: 1; min-width: 0; }
  .ob2-top { display: flex; align-items: center; gap: 14px; margin-bottom: 11px; }
  .ob2-logo { position: relative; flex: none; width: 58px; height: 58px; border-radius: 17px; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(24,44,96,0.1); }
  .ob2-logo svg { width: 31px; height: 31px; fill: #fff; }
  .ob2-prov[data-prov="claude"] .ob2-logo { background: #d97757; }
  .ob2-prov[data-prov="codex"] .ob2-logo { background: #0d0d0d; }
  .ob2-logo .tick { position: absolute; right: -6px; bottom: -6px; width: 23px; height: 23px; border-radius: 50%; background: #2a9d5c; border: 2.5px solid #fff; display: grid; place-items: center; opacity: 0; transform: scale(0.4); transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1); }
  .ob2-prov.on .ob2-logo .tick { opacity: 1; transform: scale(1); }
  .ob2-logo .tick svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  .ob2-name b { display: block; font-size: 1.18rem; font-weight: 800; letter-spacing: -0.012em; color: #181b23; line-height: 1.2; }
  .ob2-name span { font-size: 0.9rem; color: #8a92a6; font-weight: 600; }
  .ob2-desc { font-size: 0.92rem; line-height: 1.5; color: #4c5364; margin: 0; max-width: 40em; }
  .ob2-side { flex: none; display: flex; flex-direction: column; align-items: center; gap: 11px; min-width: 160px; }
  .ob2-state { font-size: 0.82rem; font-weight: 600; color: #8a92a6; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
  .ob2-state::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #b8bfcb; flex: none; }
  .ob2-prov.on .ob2-state { color: #2a9d5c; }
  .ob2-prov.on .ob2-state::before { background: #2a9d5c; }
  .ob2-actwrap { display: flex; }
  .ob2-act { width: auto; min-width: 162px; height: 44px; padding: 0 22px; border: 0; border-radius: 12px; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 0.94rem;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px; transition: transform .15s, background .15s; animation: ob2Soft 0.2s ease both; }
  .ob2-act.primary { color: #fff; background: #287ded; box-shadow: 0 4px 12px -4px rgba(14,44,100,0.4); text-shadow: 0 1px 1px rgba(18,70,150,0.3); }
  .ob2-act.primary:hover { transform: translateY(-1px); }
  .ob2-act.ghost { color: #1f86f7; background: #fff; border: 1px solid rgba(24,34,66,0.16); box-shadow: 0 2px 6px rgba(20,22,30,0.07); }
  .ob2-act.ghost:hover { background: #f7f9fc; }
  .ob2-act.done { color: #2a9d5c; background: rgba(42,157,92,0.1); cursor: default; }
  .ob2-act[disabled] { cursor: default; }
  .ob2-act .sp { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; animation: agspin 0.8s linear infinite; }
  .ob2-act.ghost .sp { border-color: rgba(24,34,66,0.2); border-top-color: #1f86f7; }
  .ob2-done-ck { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .ob2-foot { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 24px 0 15px; }
  .ob2-enter { min-width: 280px; height: 54px; padding: 0 48px; border: 0; border-radius: 14px; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 1.05rem; color: #fff;
    background: #287ded; box-shadow: 0 8px 18px -4px rgba(14,44,100,0.42); text-shadow: 0 1px 1px rgba(18,70,150,0.3); transition: transform .15s; }
  .ob2-enter:hover { transform: translateY(-2px); }
  .ob2-hint { text-align: center; font-size: 0.9rem; line-height: 1.45; color: #8a92a6; font-weight: 500; }
  .ob2-hint b { color: #4c5364; font-weight: 700; }
  .ob2-hint.warn { color: #e4ab2e; } .ob2-hint.warn b { color: #e4ab2e; }
  .ob2-divider { height: 1px; background: rgba(24,34,66,0.12); margin: 2px -72px 0; }
  .ob2-later { margin-top: 20px; text-align: center; font-size: 0.84rem; color: #8a92a6; }
  .ob2-later span { color: #1f86f7; font-weight: 600; }
  /* install progress bar pinned to the card's bottom edge */
  .ob2-install { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 15px 30px 17px; text-align: left;
    background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.86)); border-top: 1px solid rgba(24,34,66,0.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 -8px 24px -14px rgba(24,44,96,0.28); border-radius: 0 0 32px 32px;
    transform: translateY(100%); opacity: 0; transition: transform .4s cubic-bezier(.22,1,.36,1), opacity .3s ease; pointer-events: none; }
  .ob2-install.on { transform: none; opacity: 1; }
  .ob2-install-row { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
  .ob2-install-ico { flex: none; width: 18px; height: 18px; display: grid; place-items: center; }
  .ob2-install-ico .sp { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(40,125,237,0.25); border-top-color: #287ded; animation: agspin 0.8s linear infinite; }
  .ob2-install-ico .ck { display: none; width: 16px; height: 16px; fill: none; stroke: #2a9d5c; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  .ob2-install-label { flex: 1; min-width: 0; font-size: 0.92rem; font-weight: 700; color: #181b23; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ob2-install-pct { flex: none; font-size: 0.86rem; font-weight: 700; color: #287ded; font-variant-numeric: tabular-nums; }
  .ob2-install-track { height: 7px; border-radius: 6px; background: rgba(24,34,66,0.1); overflow: hidden; box-shadow: inset 0 1px 2px rgba(24,44,96,0.14); }
  .ob2-install-fill { height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, #3d95ff, #287ded); transition: width .25s ease; }
  .ob2-install.done .ob2-install-ico .sp { display: none; }
  .ob2-install.done .ob2-install-ico .ck { display: block; }
  .ob2-install.done .ob2-install-pct { color: #2a9d5c; }
  .ob2-install.done .ob2-install-fill { background: linear-gradient(90deg, #37c374, #2a9d5c); }

  /* ── in-app pricing wall (signed in, no active paid plan) — the Pro/Team tiers, redirecting to the site ── */
  .acct-gate.pricing .acct-gate-card { width: 720px; max-width: 94vw; padding: 30px 30px 24px; text-align: center; }
  .pl-sub { font-size: 0.95rem; line-height: 1.5; color: #4c5364; margin: 0 auto 22px; max-width: 40em; }
  .pl-sub b { color: #181b23; font-weight: 700; }
  .pl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; }
  .pl-card { position: relative; border-radius: 18px; padding: 20px 20px 22px; display: flex; flex-direction: column;
    background: rgba(255,255,255,0.62); border: 1px solid rgba(24,34,66,0.12);
    box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 8px 22px -14px rgba(24,44,96,0.2); }
  .pl-card.pop { border-color: rgba(40,125,237,0.5); box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 14px 32px -16px rgba(40,125,237,0.4); }
  .pl-badge { position: absolute; top: -10px; right: 16px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: #287ded; padding: 4px 9px; border-radius: 7px; box-shadow: 0 4px 10px -4px rgba(40,125,237,0.5); }
  .pl-name { font-size: 1.15rem; font-weight: 800; color: #181b23; letter-spacing: -0.01em; }
  .pl-desc { font-size: 0.82rem; color: #8a92a6; margin: 2px 0 12px; line-height: 1.4; }
  .pl-price { display: flex; align-items: baseline; gap: 6px; }
  .pl-price b { font-size: 1.9rem; font-weight: 800; color: #181b23; letter-spacing: -0.02em; }
  .pl-price span { font-size: 0.86rem; color: #6d7076; font-weight: 600; }
  .pl-note { font-size: 0.72rem; color: #9aa1b0; margin: 3px 0 14px; }
  .pl-feats { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 7px; flex: 1; }
  .pl-feats li { position: relative; padding-left: 22px; font-size: 0.85rem; line-height: 1.4; color: #4c5364; }
  .pl-feats li::before { content: ''; position: absolute; left: 3px; top: 3px; width: 11px; height: 6px; border-left: 2px solid #2a9d5c; border-bottom: 2px solid #2a9d5c; transform: rotate(-45deg); }
  .pl-cta { width: 100%; height: 44px; border: 0; border-radius: 11px; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 0.92rem; display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: transform .15s, background .15s; }
  .pl-cta.primary { color: #fff; background: #287ded; box-shadow: 0 5px 14px -4px rgba(14,44,100,0.42); text-shadow: 0 1px 1px rgba(18,70,150,0.3); }
  .pl-cta.primary:hover { transform: translateY(-1px); background: #3283f0; }
  .pl-cta.ghost { color: #1f86f7; background: #fff; border: 1px solid rgba(24,34,66,0.16); box-shadow: 0 2px 6px rgba(20,22,30,0.07); }
  .pl-cta.ghost:hover { background: #f7f9fc; }
  .pl-trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 18px; font-size: 0.78rem; color: #8a92a6; }
  .pl-trust span { display: inline-flex; align-items: center; gap: 6px; }
  .pl-trust svg { width: 13px; height: 13px; }
  .pl-foot { margin-top: 14px; text-align: center; font-size: 0.84rem; color: #8a92a6; }
  @media (max-width: 640px) { .pl-grid { grid-template-columns: 1fr; } }