/*!
 * app/lib/builder-overlay-v4.css
 *
 * [2026-05-10] Phase 14 — Builder UI v4 styles.
 * Extracted from Claude-Design's "Builder UI (1).html" + adapted to match
 * MetropolitanHost Studio's live shell behavior (edge-chevron pills + grid-reflow on
 * collapse).
 *
 * Loaded by app/index.php when SIGMA_BUILDER_UI === 'v4'.
 */

/* ============================================================================
 * SECTION 1 — Verbatim copy of the design <style> block
 * (Builder UI (1).html lines 8-806).
 * Tokens (--ink-*, --glass-*, --stroke-*, --grad-primary, --shadow-glow-blue,
 * --f-sans, --f-mono, --r-md, --r-lg, --r-pill, --bg-1, --cyan, --blue,
 * --blue-bright, --violet, --success, --warning, --error) live in
 * app/sections/assets/tokens.css and are already loaded by the parent shell.
 * ==========================================================================*/

  html, body { height: 100%; overflow: hidden; }
  body { display: flex; flex-direction: column; }

  /* ==== Layout ==== */
  :root { --sb-w: 248px; --mid-w: 300px; --right-w: 360px; --tpl-w: 300px; }
  .app {
    display: grid;
    grid-template-columns: var(--sb-w) 1fr;
    grid-template-rows: 56px 1fr;
    grid-template-areas: "sidebar topbar" "sidebar main";
    height: 100vh; position: relative; z-index: 1;
    transition: grid-template-columns .18s cubic-bezier(.4,.0,.2,1);
  }
  .app.sb-collapsed { --sb-w: 0px; }
  .app.mid-collapsed { --mid-w: 0px; }
  .app.right-collapsed { --right-w: 0px; }
  .sidebar { transition: padding .18s cubic-bezier(.4,.0,.2,1), opacity .12s; }
  .app.sb-collapsed .sidebar { padding-left: 0; padding-right: 0; opacity: 0; pointer-events: none; }

  /* ==== Panel collapse — chevron pills + edge hover-strips ==== */
  .col-handle {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 18px; height: 56px; border-radius: 9px;
    background: rgba(8, 11, 24, 0.85); border: 1px solid var(--stroke-2);
    backdrop-filter: blur(12px); display: grid; place-items: center;
    color: var(--ink-1); cursor: pointer; z-index: 30;
    transition: background .15s, border-color .15s, opacity .18s;
    box-shadow: 0 6px 20px -4px rgba(0,0,0,0.4);
  }
  .col-handle:hover { background: var(--glass-3); border-color: oklch(0.7 0.19 256 / 0.5); color: var(--ink-0); }
  .col-handle .ic { width: 12px; height: 12px; }
  /* Sidebar handle: lives on right edge of the sidebar */
  .col-handle.sb-h { right: -9px; }
  /* Mid handle: right edge of middle panel */
  .col-handle.mid-h { right: -9px; }
  /* Right handle: left edge of right panel */
  .col-handle.right-h { left: -9px; }
  /* hover strip when collapsed */
  .edge-strip {
    position: absolute; top: 0; bottom: 0; width: 12px; z-index: 25; cursor: pointer;
    background: transparent; opacity: 0; transition: opacity .18s, background .18s;
  }
  .edge-strip:hover { opacity: 1; background: linear-gradient(90deg, oklch(0.7 0.19 256 / 0.18), transparent); }
  .edge-strip.right-strip { background: linear-gradient(270deg, oklch(0.7 0.19 256 / 0.18), transparent); }
  .edge-strip-sb { left: 0; top: 56px; }
  .edge-strip-mid { }
  .edge-strip-right { right: 0; }
  /* collapsed panels go invisible and contribute 0 width */
  .main > .panel { transition: opacity .15s; min-width: 0; }
  .app.mid-collapsed .main > .panel:nth-child(1) { opacity: 0; pointer-events: none; visibility: hidden; }
  .app.right-collapsed .main > .panel:nth-child(3) { opacity: 0; pointer-events: none; visibility: hidden; }
  /* Topbar collapse buttons */
  .tb-collapse-group { display: flex; gap: 2px; padding: 3px; background: var(--glass-2); border: 1px solid var(--stroke-1); border-radius: 8px; margin-right: 4px; }
  .tb-collapse-group .tb-cb {
    width: 26px; height: 24px; border-radius: 5px; display: grid; place-items: center;
    background: transparent; border: 0; color: var(--ink-2); cursor: pointer;
  }
  .tb-collapse-group .tb-cb:hover { background: var(--glass-3); color: var(--ink-0); }
  .tb-collapse-group .tb-cb.off { color: var(--cyan); background: oklch(0.7 0.19 256 / 0.15); }
  .tb-collapse-group .tb-cb .ic { width: 14px; height: 14px; }

  /* ==== Download formats strip ==== */
  .dl-formats { margin-top: 10px; }
  .dl-formats .lbl-row {
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 6px;
  }
  .dl-formats .lbl-row .info { font-family: var(--f-sans); font-size: 10.5px; color: var(--ink-3); text-transform: none; letter-spacing: 0; }
  .fmt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .fmt-card {
    aspect-ratio: 1; min-height: 56px; padding: 6px 4px; border-radius: 10px;
    background: var(--glass-2); border: 1px solid var(--stroke-1);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    cursor: pointer; transition: transform .15s, border-color .15s, background .15s;
    position: relative; overflow: hidden;
  }
  .fmt-card:hover { transform: translateY(-2px); border-color: var(--stroke-2); background: var(--glass-3); }
  .fmt-card.active {
    background: linear-gradient(180deg, oklch(0.7 0.19 256 / 0.18), oklch(0.66 0.21 295 / 0.06));
    box-shadow: 0 0 0 1.5px oklch(0.7 0.19 256 / 0.55), inset 0 1px 0 oklch(0.7 0.19 256 / 0.15);
    border-color: transparent;
  }
  .fmt-card.soon-card {
    opacity: 0.45; cursor: not-allowed;
  }
  .fmt-card.soon-card::after {
    content: "SOON"; position: absolute; top: 2px; right: 3px;
    padding: 0 4px; border-radius: 3px;
    background: oklch(0.82 0.16 80 / 0.2); border: 1px solid oklch(0.82 0.16 80 / 0.5);
    color: var(--warning); font-family: var(--f-mono); font-size: 7px; letter-spacing: 0.08em;
  }
  .fmt-card .gly { width: 24px; height: 24px; display: grid; place-items: center; }
  .fmt-card .nm { font-family: var(--f-mono); font-size: 9.5px; color: var(--ink-1); letter-spacing: 0.04em; line-height: 1; }
  .fmt-card.active .nm { color: var(--ink-0); }
  /* Tech-icon glyph backgrounds */
  .gly.html5 { background: linear-gradient(135deg, #e34c26, #f06529); color: white; border-radius: 5px; font-family: var(--f-mono); font-weight: 800; font-size: 10px; }
  .gly.wp { background: #21759b; color: white; border-radius: 50%; font-family: 'Georgia', serif; font-weight: 700; font-size: 14px; font-style: italic; }
  .gly.react { color: #61dafb; }
  .gly.vue { color: #4fc08d; font-family: var(--f-mono); font-weight: 800; font-size: 18px; line-height: 1; }
  .gly.angular { background: linear-gradient(180deg, #dd0031, #c3002f); color: white; clip-path: polygon(50% 0, 100% 25%, 85% 95%, 50% 100%, 15% 95%, 0 25%); font-family: var(--f-mono); font-weight: 700; font-size: 13px; padding-top: 2px; }
  .gly.php { background: #777bb3; border-radius: 50%; color: white; font-family: var(--f-mono); font-weight: 700; font-size: 9px; letter-spacing: -0.02em; }
  .gly.nextjs { background: #000; border-radius: 50%; color: white; display: grid; place-items: center; font-family: var(--f-mono); font-weight: 700; font-size: 11px; border: 1px solid rgba(255,255,255,0.1); }

  /* Search input (Industry filter) */
  .field-search {
    width: 100%; padding: 7px 11px 7px 30px; background: var(--glass-2);
    border: 1px solid var(--stroke-1); border-radius: 8px; color: var(--ink-0);
    font: inherit; font-size: 12px; outline: 0; margin-bottom: 8px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%237a829e' stroke-width='1.8' stroke-linecap='round' viewBox='0 0 24 24'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>");
    background-repeat: no-repeat; background-position: 10px center;
  }
  .field-search::placeholder { color: var(--ink-3); }

  /* ==== Sidebar (identical to Application UI) ==== */
  .sidebar {
    grid-area: sidebar;
    background: rgba(8, 11, 24, 0.6);
    border-right: 1px solid var(--stroke-1);
    backdrop-filter: blur(24px);
    display: flex; flex-direction: column;
    padding: 14px 12px 12px;
    overflow-y: auto;
  }
  .sb-brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 14px; }
  .sb-brand .name { font-weight: 600; font-size: 14px; letter-spacing: -0.02em; }
  .sb-brand small { color: var(--ink-2); font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; }
  .sb-workspace {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 10px; background: var(--glass-2); border: 1px solid var(--stroke-1);
    border-radius: var(--r-md); margin-bottom: 16px; cursor: pointer; transition: background .2s;
  }
  .sb-workspace:hover { background: var(--glass-3); }
  .sb-workspace .ws-info { display: flex; gap: 10px; align-items: center; min-width: 0; }
  .sb-workspace .ws-avatar {
    width: 28px; height: 28px; border-radius: 7px;
    background: linear-gradient(135deg, oklch(0.78 0.16 168), oklch(0.65 0.18 196));
    display: grid; place-items: center; font-weight: 700; font-size: 12px; color: white; flex-shrink: 0;
  }
  .sb-workspace .ws-text { min-width: 0; }
  .sb-workspace .ws-text .t { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sb-workspace .ws-text .s { font-size: 11px; color: var(--ink-2); }
  .sb-workspace svg { color: var(--ink-2); flex-shrink: 0; }

  .sb-section { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
  .sb-section + .sb-section { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--stroke-1); }
  .sb-label { padding: 6px 10px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
  .sb-link {
    display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px;
    color: var(--ink-1); text-decoration: none; font-size: 13.5px; cursor: pointer;
    border: 1px solid transparent; position: relative;
  }
  .sb-link:hover { background: var(--glass-2); color: var(--ink-0); }
  .sb-link.active {
    background: linear-gradient(180deg, oklch(0.7 0.19 256 / 0.18), oklch(0.66 0.21 295 / 0.1));
    color: var(--ink-0); border-color: oklch(0.7 0.19 256 / 0.25);
  }
  .sb-link.active::before {
    content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 2px;
    background: var(--grad-primary); border-radius: 2px;
  }
  .sb-link .ic { width: 16px; height: 16px; color: var(--ink-2); }
  .sb-link.active .ic { color: var(--cyan); }
  .sb-link .badge {
    margin-left: auto; padding: 2px 7px; font-size: 10px; font-family: var(--f-mono);
    background: var(--glass-3); border: 1px solid var(--stroke-2); border-radius: 999px; color: var(--ink-2);
  }
  .sb-link .badge.new { background: oklch(0.78 0.17 158 / 0.18); color: var(--success); border-color: oklch(0.78 0.17 158 / 0.4); }
  .sb-bottom { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--stroke-1); display: flex; flex-direction: column; gap: 6px; }
  .sb-credit { padding: 12px 12px; background: var(--glass-1); border: 1px solid var(--stroke-1); border-radius: var(--r-md); }
  .sb-credit .row1 { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-2); margin-bottom: 8px; font-family: var(--f-mono); }
  .sb-credit .bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.06); overflow: hidden; }
  .sb-credit .bar > span { display: block; height: 100%; width: 62%; background: var(--grad-primary); border-radius: 2px; }
  .sb-credit .row2 { display: flex; justify-content: space-between; font-size: 11.5px; margin-top: 8px; color: var(--ink-1); }
  .sb-credit .row2 a { color: var(--blue-bright); text-decoration: none; font-weight: 500; }
  .sb-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
  .sb-user:hover { background: var(--glass-2); }
  .sb-user .av { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--violet)); display: grid; place-items: center; font-size: 11px; font-weight: 600; }
  .sb-user .info .n { font-size: 13px; font-weight: 500; }
  .sb-user .info .e { font-size: 11px; color: var(--ink-2); }

  /* ==== Topbar ==== */
  .topbar {
    grid-area: topbar; display: flex; align-items: center; gap: 12px;
    padding: 0 18px; border-bottom: 1px solid var(--stroke-1);
    background: rgba(8, 11, 24, 0.5); backdrop-filter: blur(20px);
  }
  .crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
  .crumbs a { color: var(--ink-2); text-decoration: none; }
  .crumbs .sep { opacity: 0.4; }
  .crumbs .current { color: var(--ink-0); font-weight: 500; }
  .save-pill {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
    background: oklch(0.78 0.17 158 / 0.12); border: 1px solid oklch(0.78 0.17 158 / 0.3);
    color: var(--success); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.04em;
    border-radius: 999px; margin-left: 8px;
  }
  .save-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 6px currentColor; }
  .topbar-grow { flex: 1; }
  .tb-actions { display: flex; align-items: center; gap: 6px; }
  .tb-icon-btn {
    width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center;
    background: transparent; border: 1px solid transparent; color: var(--ink-1); cursor: pointer;
  }
  .tb-icon-btn:hover { background: var(--glass-2); border-color: var(--stroke-1); color: var(--ink-0); }
  .tb-icon-btn .ic { width: 16px; height: 16px; }
  .tb-divider { width: 1px; height: 22px; background: var(--stroke-1); margin: 0 4px; }
  .tb-share {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
    background: var(--glass-2); border: 1px solid var(--stroke-1); color: var(--ink-0);
    border-radius: var(--r-pill); font-size: 13px; cursor: pointer; font-weight: 500;
  }
  .tb-publish {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px;
    background: var(--grad-primary); border: 0; border-radius: var(--r-pill);
    box-shadow: var(--shadow-glow-blue); color: white; font-weight: 600; font-size: 13px; cursor: pointer;
  }
  .tb-avatars { display: flex; margin-left: 4px; }
  .tb-avatars .av {
    width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--bg-1);
    margin-left: -8px; display: grid; place-items: center; font-size: 10px; font-weight: 600; color: white;
  }
  .tb-avatars .av:first-child { margin-left: 0; }

  /* ==== Main 3-col ==== */
  .main {
    grid-area: main;
    display: grid;
    grid-template-columns: var(--mid-w) 1fr var(--right-w);
    gap: 14px;
    padding: 14px;
    overflow: hidden;
    transition: grid-template-columns .18s cubic-bezier(.4,.0,.2,1);
    position: relative;
  }
  .app.mid-collapsed .main { gap: 0; grid-template-columns: 0 1fr var(--right-w); }
  .app.right-collapsed .main { grid-template-columns: var(--mid-w) 1fr 0; gap: 0; }
  .app.mid-collapsed.right-collapsed .main { grid-template-columns: 0 1fr 0; gap: 0; padding-left: 6px; padding-right: 6px; }
  .panel {
    background: rgba(10, 14, 31, 0.5);
    border: 1px solid var(--stroke-1);
    border-radius: var(--r-lg);
    backdrop-filter: blur(20px);
    display: flex; flex-direction: column;
    overflow: hidden;
  }
  .panel-head {
    padding: 12px 14px; border-bottom: 1px solid var(--stroke-1);
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    flex-shrink: 0;
  }
  .panel-head .ph-title { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
  .panel-head .ph-title .pill {
    font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.08em;
    padding: 2px 7px; background: var(--glass-2); border: 1px solid var(--stroke-1); border-radius: 999px; color: var(--ink-2);
  }
  .panel-body { padding: 14px; flex: 1; overflow-y: auto; }

  /* ==== Soon (planned) treatment ==== */
  .soon {
    position: relative;
    opacity: 0.45;
    cursor: not-allowed !important;
  }
  .soon * { cursor: not-allowed !important; }
  .soon::after {
    content: attr(data-soon);
    position: absolute; top: 4px; right: 4px;
    padding: 1px 5px; border-radius: 999px;
    background: oklch(0.82 0.16 80 / 0.18); border: 1px solid oklch(0.82 0.16 80 / 0.5);
    color: var(--warning); font-family: var(--f-mono); font-size: 8px;
    letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85;
    pointer-events: none; line-height: 1.4;
  }
  /* group-level soon stamp (used on prop-group h4) */
  .soon-pill {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 6px; border-radius: 999px;
    background: oklch(0.82 0.16 80 / 0.18); border: 1px solid oklch(0.82 0.16 80 / 0.5);
    color: var(--warning); font-family: var(--f-mono); font-size: 8.5px;
    letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85;
  }
  .prop-group.soon { padding-top: 18px; }
  .prop-group.soon h4 .soon-pill { opacity: 1; }

  /* ==== MIDDLE — AI command ==== */
  .cmd-prompt {
    background: rgba(0,0,0,0.35); border: 1px solid var(--stroke-2);
    border-radius: var(--r-md); padding: 12px;
    font-size: 13px; line-height: 1.55; color: var(--ink-0);
    min-height: 96px; position: relative;
  }
  .cmd-prompt:focus-within { border-color: oklch(0.7 0.19 256 / 0.6); box-shadow: 0 0 0 4px oklch(0.7 0.19 256 / 0.1); }
  .cmd-prompt textarea {
    width: 100%; background: transparent; border: 0; outline: 0;
    color: var(--ink-0); font-family: var(--f-sans); font-size: 13px; line-height: 1.55;
    resize: none; min-height: 64px;
  }
  .cmd-prompt-foot {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 8px; margin-top: 8px; border-top: 1px solid var(--stroke-1);
    font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-2);
  }
  .cmd-prompt-foot .right { display: flex; align-items: center; gap: 8px; }
  .cmd-prompt-foot .key { padding: 1px 6px; background: var(--glass-2); border: 1px solid var(--stroke-1); border-radius: 4px; }

  .mid-label {
    font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-2); margin-top: 14px; margin-bottom: 6px;
  }
  .mode-tiles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .mode-tile {
    padding: 10px 8px; border-radius: 10px; cursor: pointer;
    background: var(--glass-2); border: 1px solid var(--stroke-1);
    display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  }
  .mode-tile.on {
    background: linear-gradient(180deg, oklch(0.7 0.19 256 / 0.2), oklch(0.66 0.21 295 / 0.08));
    border-color: oklch(0.7 0.19 256 / 0.45);
  }
  .mode-tile .ic { width: 16px; height: 16px; color: var(--cyan); }
  .mode-tile .n { font-size: 12px; font-weight: 500; color: var(--ink-0); }
  .mode-tile .s { font-size: 10px; color: var(--ink-3); font-family: var(--f-mono); letter-spacing: 0.04em; }

  .sel-select {
    padding: 9px 12px; font-size: 13px; border-radius: 10px;
    background: var(--glass-2); border: 1px solid var(--stroke-1);
    color: var(--ink-0); cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
  }
  .sel-select .l { display: flex; align-items: center; gap: 10px; }
  .sel-select .icon-circle { width: 22px; height: 22px; border-radius: 6px; background: var(--grad-primary); display: grid; place-items: center; font-size: 10px; font-weight: 700; color: white; }

  .gen-btn {
    margin-top: 14px; width: 100%; padding: 13px;
    background: var(--grad-primary); border: 0; border-radius: 12px;
    color: white; font-weight: 600; font-size: 14px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    cursor: pointer; box-shadow: var(--shadow-glow-blue);
  }
  .gen-btn .key { font-family: var(--f-mono); font-size: 11px; padding: 1px 6px; background: rgba(255,255,255,0.18); border-radius: 4px; }
  .dl-btn {
    margin-top: 8px; width: 100%; padding: 11px;
    background: var(--glass-2); border: 1px solid var(--stroke-1); border-radius: 12px;
    color: var(--ink-0); font-weight: 500; font-size: 13px;
    display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer;
  }
  .dl-btn:hover { background: var(--glass-3); border-color: var(--stroke-2); }

  /* [2026-05-15] Busy state — generation in flight. Dim + cursor:wait so
     the user understands the button isn't actionable yet. .is-busy takes
     precedence over .is-ready so even if both end up briefly on (shouldn't
     happen, but defence in depth), the busy state wins. */
  .dl-btn.is-busy,
  .dl-btn.is-busy.is-ready {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--stroke-1) !important;
    color: var(--ink-2) !important;
    cursor: wait !important;
    pointer-events: none;
    opacity: 0.62;
    box-shadow: none !important;
    animation: none !important;
  }
  .dl-btn[disabled],
  .dl-btn[aria-disabled="true"] { pointer-events: none; }

  /* [2026-05-15] Ready-to-download state — generation just succeeded.
     main.js adds .is-ready to #studio-download-v4 inside _afterNavRewrite. */
  .dl-btn.is-ready {
    background: linear-gradient(135deg, oklch(0.78 0.17 158), oklch(0.7 0.18 168));
    border-color: oklch(0.78 0.17 158 / 0.55);
    color: #062814;
    font-weight: 600;
    box-shadow:
      0 0 0 1px oklch(0.78 0.17 158 / 0.4),
      0 10px 28px -10px oklch(0.7 0.2 158 / 0.6);
    animation: dl-pulse 1.6s ease-in-out 2;
  }
  .dl-btn.is-ready:hover {
    background: linear-gradient(135deg, oklch(0.82 0.18 158), oklch(0.74 0.19 168));
    border-color: oklch(0.82 0.18 158 / 0.7);
  }
  @keyframes dl-pulse {
    0%, 100% { box-shadow: 0 0 0 1px oklch(0.78 0.17 158 / 0.4), 0 10px 28px -10px oklch(0.7 0.2 158 / 0.55); }
    50%      { box-shadow: 0 0 0 3px oklch(0.78 0.17 158 / 0.55), 0 14px 34px -10px oklch(0.7 0.2 158 / 0.85); }
  }

  .suggested { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--stroke-1); }
  .suggested .head {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;
    font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
  }
  .suggested .head a { font-family: var(--f-sans); font-size: 11px; color: var(--blue-bright); text-decoration: none; text-transform: none; letter-spacing: 0; }
  .sg-list { display: flex; flex-direction: column; gap: 5px; }
  .sg-item {
    padding: 8px 10px; background: var(--glass-2); border: 1px solid var(--stroke-1);
    border-radius: 9px; font-size: 12px; color: var(--ink-1); cursor: pointer; display: flex; gap: 9px; align-items: flex-start;
  }
  .sg-item:hover { background: var(--glass-3); color: var(--ink-0); }
  .sg-item .icb { width: 20px; height: 20px; border-radius: 5px; background: var(--glass-3); border: 1px solid var(--stroke-2); display: grid; place-items: center; flex-shrink: 0; color: var(--cyan); }

  /* ==== CENTER — preview ==== */
  .preview-toolbar {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    border-bottom: 1px solid var(--stroke-1); flex-shrink: 0;
  }
  .pt-segment { display: flex; gap: 2px; padding: 3px; background: var(--glass-2); border: 1px solid var(--stroke-1); border-radius: 10px; }
  .pt-segment button {
    padding: 5px 10px; background: transparent; color: var(--ink-2); border: 0; border-radius: 7px;
    font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 5px;
  }
  .pt-segment button.on { background: var(--glass-3); color: var(--ink-0); }
  .pt-url {
    flex: 1; padding: 6px 12px; background: rgba(0,0,0,0.3); border: 1px solid var(--stroke-1);
    border-radius: 999px; font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-1);
    display: flex; align-items: center; gap: 8px;
  }
  .pt-url .lock { color: var(--success); }
  .pt-url .live {
    margin-left: auto; padding: 1px 7px; background: oklch(0.78 0.17 158 / 0.15); color: var(--success);
    border-radius: 999px; font-size: 10px; letter-spacing: 0.06em; border: 1px solid oklch(0.78 0.17 158 / 0.4);
  }
  .preview-stage {
    flex: 1; padding: 18px; overflow: auto; position: relative;
    background:
      radial-gradient(circle at 30% 20%, oklch(0.4 0.18 256 / 0.15), transparent 60%),
      radial-gradient(circle at 70% 80%, oklch(0.4 0.21 295 / 0.12), transparent 60%);
  }
  .ws-canvas {
    width: 100%; max-width: 880px; margin: 0 auto;
    background: #0c1130; border: 1px solid var(--stroke-2); border-radius: 14px;
    overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.5); position: relative;
  }
  .ws-nav {
    display: flex; align-items: center; padding: 18px 28px; gap: 24px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .ws-nav .logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; letter-spacing: -0.02em; }
  .ws-nav .logo .lm { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, oklch(0.78 0.16 168), oklch(0.65 0.18 196)); }
  .ws-nav .links { display: flex; gap: 22px; margin-left: 12px; font-size: 13px; color: rgba(255,255,255,0.7); }
  .ws-nav .nav-cta { margin-left: auto; padding: 7px 14px; background: white; color: #0a1020; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
  .ws-hero { padding: 60px 28px 40px; display: grid; grid-template-columns: 1fr 0.85fr; gap: 32px; align-items: center; }
  .ws-hero .h { font-size: 42px; font-weight: 700; line-height: 1.02; letter-spacing: -0.035em; margin-bottom: 14px; }
  .ws-hero .h em { font-style: normal; background: linear-gradient(135deg, oklch(0.78 0.16 168), oklch(0.78 0.13 205)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .ws-hero .sub { color: rgba(255,255,255,0.65); font-size: 14.5px; line-height: 1.55; margin-bottom: 22px; max-width: 95%; }
  .ws-hero .ctas { display: flex; gap: 8px; }
  .ws-hero .ctas .b { padding: 10px 16px; background: white; color: #0a1020; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
  .ws-hero .ctas .b.alt { background: rgba(255,255,255,0.1); color: white; border: 1px solid rgba(255,255,255,0.18); }
  .ws-hero .img {
    aspect-ratio: 4/5; border-radius: 14px;
    background:
      radial-gradient(60% 80% at 70% 20%, oklch(0.78 0.16 168 / 0.5), transparent 60%),
      radial-gradient(60% 80% at 20% 80%, oklch(0.6 0.18 196 / 0.6), transparent 60%),
      linear-gradient(135deg, #1a2340, #0d1228);
    border: 1px solid rgba(255,255,255,0.06); position: relative;
  }
  .ws-hero .img::after { content: "PORTRAIT — TBD"; position: absolute; bottom: 12px; left: 14px; font-family: 'Geist Mono', monospace; font-size: 9.5px; letter-spacing: 0.15em; color: rgba(255,255,255,0.4); }
  .ws-section { padding: 36px 28px; border-top: 1px solid rgba(255,255,255,0.05); }
  .ws-section .label { font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.15em; color: rgba(255,255,255,0.45); text-transform: uppercase; margin-bottom: 14px; }
  .ws-section h2 { font-size: 24px; letter-spacing: -0.025em; margin-bottom: 18px; max-width: 70%; }
  .ws-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
  .ws-grid3 .card { padding: 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; }
  .ws-grid3 .card .ic { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, oklch(0.78 0.13 205 / 0.4), oklch(0.66 0.21 295 / 0.4)); margin-bottom: 10px; }
  .ws-grid3 .card .h { font-size: 14px; font-weight: 600; margin-bottom: 4px; letter-spacing: -0.015em; }
  .ws-grid3 .card .p { font-size: 11.5px; color: rgba(255,255,255,0.55); line-height: 1.45; }
  .selection-frame { position: absolute; pointer-events: none; border: 2px solid oklch(0.78 0.13 205); border-radius: 16px; }
  .selection-frame::before, .selection-frame::after,
  .selection-frame > i, .selection-frame > b {
    content: ""; position: absolute; width: 10px; height: 10px;
    background: white; border: 2px solid oklch(0.78 0.13 205); border-radius: 2px;
  }
  .selection-frame::before { top: -6px; left: -6px; }
  .selection-frame::after { top: -6px; right: -6px; }
  .selection-frame > i { bottom: -6px; left: -6px; display: block; }
  .selection-frame > b { bottom: -6px; right: -6px; display: block; }
  .sel-tag {
    position: absolute; top: -32px; left: 0;
    padding: 4px 8px; background: oklch(0.78 0.13 205); color: #0a1020;
    border-radius: 6px; font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  }
  .canvas-ai-fab {
    position: absolute; bottom: 28px; right: 28px;
    display: flex; align-items: center; gap: 8px; padding: 10px 14px;
    background: rgba(8, 11, 24, 0.85); border: 1px solid var(--stroke-2);
    border-radius: var(--r-pill); backdrop-filter: blur(20px);
    box-shadow: var(--shadow-glow-blue); font-size: 12.5px; cursor: pointer;
  }
  .canvas-ai-fab .icc { width: 22px; height: 22px; border-radius: 50%; background: var(--grad-primary); display: grid; place-items: center; }

  /* ==== RIGHT — tabbed properties ==== */
  .props-tabs {
    display: flex; gap: 2px; padding: 6px 6px 0;
    flex-shrink: 0; border-bottom: 1px solid var(--stroke-1);
  }
  .props-tab {
    padding: 8px 12px; font-size: 12px; color: var(--ink-2); cursor: pointer;
    border-radius: 8px 8px 0 0; border: 1px solid transparent; border-bottom: 0;
    white-space: nowrap; flex: 1; text-align: center;
  }
  .props-tab.on { color: var(--ink-0); background: var(--glass-2); border-color: var(--stroke-1); margin-bottom: -1px; }

  .tab-pane { display: none; padding: 12px 14px 24px; }
  .tab-pane.on { display: block; }

  .prop-group { padding: 12px 0; border-bottom: 1px solid var(--stroke-1); position: relative; }
  .prop-group:first-child { padding-top: 4px; }
  .prop-group:last-child { border-bottom: 0; }
  .prop-group > h4 {
    font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-2); margin: 0 0 10px; display: flex; justify-content: space-between; align-items: center; gap: 6px;
  }
  .prop-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
  .prop-row .lbl { font-size: 11.5px; color: var(--ink-2); width: 56px; flex-shrink: 0; }
  .prop-input {
    flex: 1; padding: 6px 10px; background: var(--glass-2); border: 1px solid var(--stroke-1);
    border-radius: 8px; font-family: var(--f-mono); font-size: 12px; color: var(--ink-0);
    display: flex; align-items: center; gap: 6px; min-width: 0;
  }
  .prop-input input { background: transparent; border: 0; outline: 0; color: inherit; font: inherit; flex: 1; min-width: 0; }
  .prop-input .unit { color: var(--ink-3); font-size: 10.5px; }

  /* shared pill grid */
  .pillrow { display: flex; gap: 5px; flex-wrap: wrap; }
  .pill-opt {
    padding: 5px 10px; font-size: 11.5px; border-radius: var(--r-pill);
    background: var(--glass-2); border: 1px solid var(--stroke-1); color: var(--ink-1); cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  }
  .pill-opt.on {
    background: linear-gradient(180deg, oklch(0.7 0.19 256 / 0.2), oklch(0.66 0.21 295 / 0.08));
    border-color: oklch(0.7 0.19 256 / 0.45); color: var(--ink-0);
  }
  .pill-opt .d { width: 6px; height: 6px; border-radius: 50%; }

  /* theme dark/light switch */
  .theme-switch {
    display: flex; gap: 0; padding: 3px; background: var(--glass-2); border: 1px solid var(--stroke-1); border-radius: 999px;
  }
  .theme-switch button {
    flex: 1; padding: 6px 10px; border: 0; background: transparent; color: var(--ink-2);
    border-radius: 999px; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
  }
  .theme-switch button.on { background: linear-gradient(180deg, oklch(0.7 0.19 256 / 0.3), oklch(0.66 0.21 295 / 0.15)); color: var(--ink-0); }

  .swatches { display: flex; gap: 6px; flex-wrap: wrap; }
  .swatch { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--stroke-2); cursor: pointer; }
  .swatch.on { box-shadow: 0 0 0 2px var(--ink-0); }

  /* Stylesheet swatch grid */
  .style-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .style-tile {
    aspect-ratio: 1; border-radius: 9px; cursor: pointer; position: relative;
    border: 1px solid var(--stroke-1); overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 4px 5px;
  }
  .style-tile.on { box-shadow: 0 0 0 2px oklch(0.7 0.19 256 / 0.7); border-color: oklch(0.7 0.19 256 / 0.6); }
  .style-tile .label {
    font-family: var(--f-mono); font-size: 8px; letter-spacing: 0.04em;
    color: var(--ink-0); text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    z-index: 2; position: relative; line-height: 1.1; text-transform: lowercase;
  }
  .style-tile.brutalist { background: #f5f1e6; color: #111; }
  .style-tile.brutalist .label { color: #111; text-shadow: none; }
  .style-tile.dark-pro { background: linear-gradient(135deg, #0a0e1f, #1a2240); }
  .style-tile.dark { background: #0d1126; }
  .style-tile.flat { background: oklch(0.65 0.18 196); }
  .style-tile.glass { background: linear-gradient(135deg, oklch(0.7 0.18 256 / 0.5), oklch(0.66 0.21 295 / 0.3)); backdrop-filter: blur(8px); }
  .style-tile.gradient { background: linear-gradient(135deg, oklch(0.78 0.16 168), oklch(0.66 0.21 295), oklch(0.7 0.19 22)); }
  .style-tile.material { background: linear-gradient(180deg, #1565c0, #0d47a1); }
  .style-tile.minimal { background: #fafafa; }
  .style-tile.minimal .label { color: #222; text-shadow: none; }
  .style-tile.neumorphic { background: #2a3050; box-shadow: inset 4px 4px 8px rgba(0,0,0,0.3), inset -4px -4px 8px rgba(255,255,255,0.05); }
  .style-tile.organic { background: linear-gradient(135deg, oklch(0.7 0.12 130), oklch(0.55 0.14 100)); }
  .style-tile.retro { background: linear-gradient(135deg, oklch(0.82 0.16 80), oklch(0.7 0.19 22)); }
  .style-tile.rtl { background: linear-gradient(135deg, #3a2540, #5a2a4a); }
  .style-tile.default { background: linear-gradient(135deg, oklch(0.7 0.19 256), oklch(0.66 0.21 295)); }

  /* font pack swatches */
  .font-pack { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .font-tile {
    padding: 10px 6px; border-radius: 9px; background: var(--glass-2);
    border: 1px solid var(--stroke-1); cursor: pointer; text-align: center;
    display: flex; flex-direction: column; gap: 2px;
  }
  .font-tile.on { background: linear-gradient(180deg, oklch(0.7 0.19 256 / 0.18), oklch(0.66 0.21 295 / 0.08)); border-color: oklch(0.7 0.19 256 / 0.45); }
  .font-tile .aa { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-0); line-height: 1; }
  .font-tile .nm { font-family: var(--f-mono); font-size: 8.5px; color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase; }
  .font-tile.default .aa { font-family: 'Geist', sans-serif; }
  .font-tile.elegant .aa { font-family: 'Times New Roman', serif; font-style: italic; }
  .font-tile.modern .aa { font-family: 'Helvetica', sans-serif; font-weight: 800; }
  .font-tile.classic .aa { font-family: Georgia, serif; }
  .font-tile.friendly .aa { font-family: 'Comic Sans MS', cursive; }
  .font-tile.sharp .aa { font-family: 'Impact', sans-serif; letter-spacing: 0.02em; }
  .font-tile.rtl .aa { font-family: 'Arial', sans-serif; }

  /* Personality grid — legacy 3-col layout; preserved for revert. The active
     picker is .persona-list below (single-column scrollable rows). */
  .persona-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .persona {
    padding: 7px 8px; border-radius: 9px; background: var(--glass-2);
    border: 1px solid var(--stroke-1); cursor: pointer;
    display: flex; flex-direction: column; gap: 2px; font-size: 11px;
  }
  .persona.on { background: linear-gradient(180deg, oklch(0.7 0.19 256 / 0.2), oklch(0.66 0.21 295 / 0.08)); border-color: oklch(0.7 0.19 256 / 0.45); }
  .persona .n { color: var(--ink-0); font-weight: 500; font-size: 11px; line-height: 1.2; letter-spacing: -0.005em; }
  .persona .s { font-family: var(--f-mono); font-size: 8.5px; color: var(--ink-3); letter-spacing: 0.04em; }

  /* [2026-05-13] Simplified template-size + variant tiles.
     Removes the page-count badge + sub-label rows from the tile face; only
     the rebranded label remains. Used by .template-card.template-card--simple. */
  .template-card.template-card--simple {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    text-align: center;
  }
  .template-card.template-card--simple .n {
    font: 600 13px/1.25 var(--f-sans);
    color: var(--ink-0);
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* [2026-05-13] Personality LIST — single-column scrollable picker.
     Each row reflects the personality's live engine signature (primary
     colour, display font, card radius) so the chip is a truthful mini-
     preview of the generated site. The container scrolls just like the
     industries panel above. */
  .persona-list {
    display: flex; flex-direction: column; gap: 4px;
    max-height: 380px; overflow-y: auto; overflow-x: hidden;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--stroke-2) transparent;
  }
  .persona-list::-webkit-scrollbar { width: 6px; }
  .persona-list::-webkit-scrollbar-thumb { background: var(--stroke-2); border-radius: 3px; }
  .persona-row {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 7px 9px 7px 7px;
    border-radius: 9px;
    background: var(--glass-2, rgba(255,255,255,0.02));
    border: 1px solid var(--stroke-1, rgba(255,255,255,0.06));
    cursor: pointer;
    text-align: left;
    transition: border-color .15s ease, transform .15s ease;
  }
  .persona-row:hover {
    border-color: color-mix(in oklab, var(--p-color, #888) 60%, var(--stroke-2));
    transform: translateX(1px);
  }
  .persona-row.on {
    border-color: var(--p-color, #888);
    box-shadow: 0 0 0 1px var(--p-color, #888),
                0 6px 16px -8px color-mix(in oklab, var(--p-color, #888) 50%, transparent);
    background: color-mix(in oklab, var(--p-color, #888) 6%, var(--glass-2, rgba(255,255,255,0.02)));
  }
  .persona-row .p-mark {
    width: 38px; height: 38px;
    border-radius: var(--p-radius, 6px);
    background: var(--p-color, #888);
    color: var(--p-text, #fff);
    display: grid; place-items: center;
    font-family: var(--p-font, system-ui, sans-serif);
    font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
    line-height: 1;
    flex-shrink: 0;
  }
  .persona-row .p-body {
    min-width: 0;
    display: flex; flex-direction: column; gap: 1px;
  }
  .persona-row .p-name {
    font: 600 12.5px/1.2 var(--f-sans);
    color: var(--ink-0);
    letter-spacing: -0.005em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .persona-row .p-vibe {
    font: 400 10.5px/1.3 var(--f-sans);
    color: var(--ink-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .persona-row .p-preview {
    display: flex; align-items: center; gap: 5px;
    flex-shrink: 0;
  }
  .persona-row .p-btn {
    font-family: var(--p-font, system-ui, sans-serif);
    font-size: 11px; font-weight: 600;
    line-height: 1;
    padding: 4px 8px;
    border-radius: var(--p-radius, 4px);
    background: var(--p-color, #888);
    color: var(--p-text, #fff);
  }
  .persona-row .p-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--p-accent, var(--p-color, #888));
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--p-accent, #888) 30%, transparent);
  }
  /* Smart-mode lock falls back gracefully — gates the whole prop-group not just
     the rows, so nothing to override here. */

  /* Button shape micro tiles — 5 shapes including Skewed and Mixed (restored
     [2026-05-12]). Preview swatches now use --shape-preview-color which can
     be overridden by personality CSS, falling back to ink-0 when no persona
     is set. So switching personality also restyles the preview chips. */
  .shape-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
  .shape-tile {
    padding: 10px 6px; background: var(--glass-2); border: 1px solid var(--stroke-1);
    border-radius: 9px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px;
    font-family: inherit;
    transition: background .15s, border-color .15s;
  }
  .shape-tile:hover { background: var(--glass-3); }
  .shape-tile.on {
    background: linear-gradient(180deg, oklch(0.7 0.19 256 / 0.2), oklch(0.66 0.21 295 / 0.08));
    border-color: oklch(0.7 0.19 256 / 0.45);
  }
  .shape-tile .ex {
    width: 38px; height: 14px;
    /* Use personality colour if available (--thm-base set on :root by the
       inline personality <style> block), otherwise fall back to ink-0. */
    background: var(--shape-preview-color, var(--thm-base, var(--ink-0)));
    transition: background .25s, border-radius .15s, transform .15s;
  }
  .shape-tile.rounded .ex { border-radius: 5px; }
  .shape-tile.square  .ex { border-radius: 0; }
  .shape-tile.pill    .ex { border-radius: 999px; }
  /* [2026-05-12] Skewed — single 12° skew, sharp corners */
  .shape-tile.skewed  .ex { border-radius: 0; transform: skewX(-12deg); }
  /* [2026-05-12] Mixed — asymmetric corners visually communicate "some
     buttons rounded, others square" without complex masking. */
  .shape-tile.mixed   .ex { border-radius: 999px 2px 2px 999px; }
  .shape-tile .nm { font-size: 10.5px; color: var(--ink-1); }

  /* sidebar style strip preview — brand-aware ([2026-05-12]).
     Each tile is a miniature page layout: left column = sidebar, right
     column = main content. The .accent variant now uses the active
     personality's primary colour via --thm-base so picking a different
     personality also restyles all the sidebar previews. The visual variants
     (dark / accent / minimal / floating) are assigned cyclically to the
     10 sidebar styles in builder-shell-v4.php. */
  .sidebar-style-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
  }
  .sidebar-tile {
    aspect-ratio: 1.1; border-radius: 8px; cursor: pointer;
    background: var(--glass-2); border: 1px solid var(--stroke-1);
    position: relative; overflow: hidden; padding: 4px;
    display: flex; gap: 3px; align-items: stretch;
    transition: background .15s, border-color .15s;
  }
  .sidebar-tile:hover { background: var(--glass-3); }
  .sidebar-tile.on {
    box-shadow: 0 0 0 2px oklch(0.7 0.19 256 / 0.6);
    border-color: oklch(0.7 0.19 256 / 0.6);
  }
  .sidebar-tile .col-l {
    flex: 0 0 30%; background: rgba(255,255,255,0.1); border-radius: 3px;
    transition: background .25s;
  }
  /* Variants — first 4 use named styles, then cycle. Personality drives accent. */
  .sidebar-tile.dark     .col-l { background: rgba(0,0,0,0.65); }
  .sidebar-tile.accent   .col-l {
    background: linear-gradient(180deg,
      var(--thm-base, oklch(0.7 0.19 256)) 0%,
      var(--thm-secondary, oklch(0.66 0.21 295)) 100%);
  }
  .sidebar-tile.minimal  .col-l { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); }
  .sidebar-tile.floating .col-l {
    background: var(--thm-base, rgba(255,255,255,0.12));
    margin: 3px 2px;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
  }
  .sidebar-tile .col-r {
    flex: 1; background: rgba(255,255,255,0.04); border-radius: 3px;
  }
  .sidebar-tile.dark .col-r,
  .sidebar-tile.accent .col-r {
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  }
  .sidebar-tile .nm {
    position: absolute; bottom: 2px; left: 4px; right: 4px;
    font-family: var(--f-mono); font-size: 7.5px;
    color: var(--ink-2); letter-spacing: 0.02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-align: center;
  }

  /* slider */
  .slider { display: flex; align-items: center; gap: 8px; }
  .slider .track { flex: 1; height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; position: relative; min-width: 60px; }
  .slider .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--grad-primary); border-radius: 2px; }
  .slider .knob { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; border-radius: 50%; background: white; box-shadow: var(--shadow-glow-blue); }
  .slider .v { font-family: var(--f-mono); font-size: 11px; color: var(--ink-1); min-width: 40px; text-align: right; }

  .toggle { width: 32px; height: 18px; background: rgba(255,255,255,0.1); border-radius: 999px; position: relative; cursor: pointer; transition: background .2s; flex-shrink: 0; }
  /* [2026-05-10] reset button-element defaults so the thumb sits inside the
     pill (browser default padding/border was pushing it off). */
  button.toggle { border: 0; padding: 0; box-sizing: border-box; outline: none; appearance: none; }
  .toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: white; border-radius: 50%; transition: transform .2s; box-sizing: border-box; }
  .toggle.on { background: var(--grad-primary); }
  .toggle.on::after { transform: translateX(14px); }

  .adv-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; }
  .adv-row + .adv-row { border-top: 1px solid var(--stroke-1); }
  .adv-row .label { font-size: 12.5px; color: var(--ink-1); display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .adv-row .label .h { font-weight: 500; color: var(--ink-0); font-size: 12.5px; }
  .adv-row .label .s { color: var(--ink-3); font-size: 10.5px; font-family: var(--f-mono); letter-spacing: 0.02em; }

  .type-stack { display: flex; flex-direction: column; gap: 6px; }
  .type-row { padding: 9px 11px; background: var(--glass-2); border: 1px solid var(--stroke-1); border-radius: 10px; display: flex; justify-content: space-between; align-items: center; }
  .type-row .name { font-size: 13px; font-weight: 500; }
  .type-row .meta { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-2); margin-top: 2px; }

  .ai-link { font-family: var(--f-sans); font-size: 10.5px; color: var(--blue-bright); text-decoration: none; text-transform: none; letter-spacing: 0; }

  /* Template size cards (settings panel)
     [2026-05-11] enlarged: 14px/12px padding + 14/11px type + 6px row gap so the
     panel doesn't feel "squeezed to the top". Cards were 10×11 padding with
     12.5/9.5px type which felt cramped against the surrounding controls. */
  .template-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .template-card {
    padding: 14px 12px; border-radius: 12px; cursor: pointer;
    background: var(--glass-2); border: 1px solid var(--stroke-1);
    display: flex; flex-direction: column; gap: 6px;
    transition: background .15s, border-color .15s, transform .12s;
  }
  .template-card:hover { background: var(--glass-3); border-color: var(--stroke-2); }
  .template-card.on { background: linear-gradient(180deg, oklch(0.7 0.19 256 / 0.22), oklch(0.66 0.21 295 / 0.1)); border-color: oklch(0.7 0.19 256 / 0.5); }
  .template-card .row1 { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
  .template-card .n { font-size: 14px; font-weight: 600; color: var(--ink-0); letter-spacing: -0.005em; }
  .template-card .b { padding: 3px 8px; font-family: var(--f-mono); font-size: 10.5px; background: var(--glass-3); border: 1px solid var(--stroke-2); border-radius: 999px; color: var(--ink-1); letter-spacing: 0.04em; }
  .template-card .m { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; }

  /* ═══════════════════════════════════════════════════════════════════
     Templates panel [2026-05-16]
     Swaps with #studio-cmd-panel when body.studio-templates-active is set.
     ═════════════════════════════════════════════════════════════════ */
  /* [2026-05-16 — REV 3] One left panel with Settings/Templates tabs.
     The old `body.studio-templates-active` swap pattern is gone — both
     Settings + Templates are panes inside `#studio-cmd-panel`, toggled
     via `.studio-cmd-tab.on` + matching `[data-pane]`. */

  /* Tab strip below the panel head */
  .studio-cmd-tabs {
    display: flex;
    gap: 4px;
    padding: 0 14px;
    border-bottom: 1px solid var(--stroke-1, rgba(255,255,255,0.06));
    flex: 0 0 auto;
  }
  .studio-cmd-tab {
    background: transparent;
    border: 0;
    color: var(--ink-2, #94a3b8);
    font-size: 12px;
    font-weight: 600;
    padding: 10px 12px 12px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.14s, border-color 0.14s;
  }
  .studio-cmd-tab .ic-sm { width: 14px; height: 14px; }
  .studio-cmd-tab:hover { color: var(--ink-1, #cbd5e1); }
  .studio-cmd-tab.on {
    color: var(--ink-0, #f1f5f9);
    border-bottom-color: var(--blue-bright, #60a5fa);
  }
  .studio-cmd-tab-count {
    font-family: var(--f-mono, monospace);
    font-size: 10px;
    padding: 1px 6px;
    background: var(--glass-1, rgba(255,255,255,0.05));
    border-radius: 10px;
    color: var(--ink-3, #94a3b8);
  }
  .studio-cmd-tab.on .studio-cmd-tab-count {
    background: oklch(0.7 0.19 256 / 0.18);
    color: var(--blue-bright, #60a5fa);
  }

  /* Hide Smart-AUTO toggle (in the panel head) when Templates pane is shown
     — that toggle only applies to Settings. */
  body.studio-cmd-templates .studio-panel-cmd .studio-head-toggle {
    visibility: hidden;
  }

  /* Pane visibility — driven by the `hidden` attribute set by JS. */
  .studio-cmd-pane[hidden] { display: none !important; }
  .studio-cmd-pane         { display: block; }
  /* Templates pane has its own internal scrolling. */
  .studio-cmd-pane--templates {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
  }

  /* ────────────────────────────────────────────────────────────────────
     [2026-05-16] Panel-level actions footer.
     Hosts Generate template + Download project + collapsible export grid.
     Pinned at the bottom of #studio-cmd-panel so the primary actions stay
     reachable regardless of which pane (Settings / Templates) is active.
     ──────────────────────────────────────────────────────────────────── */
  .studio-cmd-actions {
    flex: 0 0 auto;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--stroke-1, rgba(255,255,255,0.06));
    background: linear-gradient(180deg, rgba(10,14,31,0.0) 0%, rgba(10,14,31,0.45) 60%);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  /* Reset the original .gen-btn margin-top: 14px since the footer's
     own gap (8px) now handles spacing. */
  .studio-cmd-actions .gen-btn { margin-top: 0; }
  .studio-cmd-actions .dl-btn  { margin-top: 0; }
  /* [2026-05-16] Hide Generate template button on the Templates tab —
     generating a fresh template only makes sense in the Settings flow.
     The Download project + format-export controls stay visible. */
  body.studio-cmd-templates .studio-cmd-actions #studio-generate-v4 {
    display: none;
  }

  /* [REV 3] In-pane Templates header — sits at top of templates pane. */
  .studio-tpl-header {
    padding: 12px 14px 8px;
    border-bottom: 1px solid var(--stroke-1, rgba(255,255,255,0.05));
  }
  .studio-tpl-summary {
    font-family: var(--f-mono, monospace);
    font-size: 10.5px;
    color: var(--ink-3, #94a3b8);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .studio-tpl-count {
    font-family: var(--f-mono, monospace);
    font-size: 10.5px;
    color: var(--ink-3, #94a3b8);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  /* Inner sub-tabs (Landing pages | Website templates) */
  .studio-tpl-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 14px 0;
    border-bottom: 1px solid var(--stroke-1, rgba(255,255,255,0.06));
  }
  .studio-tpl-tab {
    background: transparent;
    border: 0;
    color: var(--ink-2, #94a3b8);
    font-size: 12px;
    font-weight: 600;
    padding: 8px 12px 10px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.14s, border-color 0.14s;
  }
  .studio-tpl-tab:hover { color: var(--ink-1, #cbd5e1); }
  .studio-tpl-tab.on {
    color: var(--ink-0, #f1f5f9);
    border-bottom-color: var(--blue-bright, #60a5fa);
  }
  .studio-tpl-tab-count {
    font-family: var(--f-mono, monospace);
    font-size: 10px;
    padding: 1px 6px;
    background: var(--glass-1, rgba(255,255,255,0.05));
    border-radius: 10px;
    color: var(--ink-3, #94a3b8);
  }
  .studio-tpl-tab.on .studio-tpl-tab-count {
    background: oklch(0.7 0.19 256 / 0.18);
    color: var(--blue-bright, #60a5fa);
  }

  /* Card grid — vertical, padded inside the pane (which scrolls). */
  .studio-tpl-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
  }
  .studio-tpl-grid[hidden] { display: none; }
  .studio-tpl-empty {
    color: var(--ink-3, #94a3b8);
    font-size: 12px;
    text-align: center;
    padding: 32px 0;
  }

  /* Card */
  .studio-tpl-card {
    display: flex;
    flex-direction: column;
    background: var(--glass-1, rgba(255,255,255,0.03));
    border: 1px solid var(--stroke-1, rgba(255,255,255,0.08));
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.16s, border-color 0.16s, box-shadow 0.16s, background 0.16s;
  }
  .studio-tpl-card:hover {
    transform: translateY(-2px);
    border-color: var(--blue-bright, #60a5fa);
    background: var(--glass-3, rgba(255,255,255,0.05));
  }
  .studio-tpl-card.on {
    border-color: var(--blue-bright, #60a5fa);
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.32);
    background: linear-gradient(180deg, oklch(0.7 0.19 256 / 0.18), oklch(0.66 0.21 295 / 0.06));
  }

  .studio-tpl-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;     /* matches the 720×450 capture aspect */
    background: var(--glass-2, rgba(255,255,255,0.04));
    overflow: hidden;
  }
  .studio-tpl-thumb-empty {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(96,165,250,0.08), rgba(167,139,250,0.08));
  }

  /* ────────────────────────────────────────────────────────────────────
     [2026-05-16] ATF preview as the card visual.
     The whole point of the card is to show what the template looks like.
     The hero (above-the-fold capture) fills the thumb edge-to-edge so the
     client can read it at a glance. No blurred bg, no overlay tint — the
     extra layers were hiding the very thing we wanted to show.
     ──────────────────────────────────────────────────────────────────── */
  .studio-tpl-hero {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: transform;
  }
  /* Hover: gentle zoom-in to give the card weight without distorting
     the preview. */
  .studio-tpl-card:hover .studio-tpl-hero {
    transform: scale(1.035);
  }
  /* Fallback (no capture yet) — still fills the thumb but flagged so it
     doesn't get the same hover treatment, since old home-1 images can be
     huge and the zoom looks janky. */
  .studio-tpl-hero--fallback {
    object-position: center center;
    filter: saturate(0.95);
  }
  .studio-tpl-card:hover .studio-tpl-hero--fallback { transform: none; }
  .studio-tpl-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-family: var(--f-mono, monospace);
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.04em;
    backdrop-filter: blur(8px);
  }

  /* [2026-05-16] Per-card Download icon (top-left). Mirrors the badge on
     the right for visual symmetry. Stays inert visually until the card is
     hovered/focused; on touch it remains tappable because we don't gate on
     hover for click — only on the brightness pass. */
  .studio-tpl-dl {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(0,0,0,0.55);
    color: #fff;
    border-radius: 999px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    opacity: 0.78;
    transition: opacity 0.16s, background 0.16s, border-color 0.16s, transform 0.16s;
  }
  .studio-tpl-card:hover .studio-tpl-dl { opacity: 1; }
  .studio-tpl-dl:hover,
  .studio-tpl-dl:focus-visible {
    opacity: 1;
    background: var(--blue-bright, #60a5fa);
    border-color: var(--blue-bright, #60a5fa);
    color: #0b1220;
    transform: scale(1.06);
    outline: none;
  }
  .studio-tpl-dl .ic { width: 14px; height: 14px; pointer-events: none; }
  .studio-tpl-dl.is-busy {
    opacity: 0.6;
    cursor: progress;
    transform: none;
  }
  .studio-tpl-dl[aria-disabled="true"] { pointer-events: none; }

  .studio-tpl-meta {
    padding: 10px 12px 12px;
  }
  .studio-tpl-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-0, #f1f5f9);
    letter-spacing: -0.005em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* End Templates panel ──────────────────────────────────────────── */

  /* [2026-05-11] Settings panel swap based on One-page mode toggle.
     Body class .studio-one-page is toggled by builder-shell-v4.js when the
     One-page button (data-target="is_one_page") flips, and via the legacy
     #one-page checkbox mirror.
     Default state (multi-page):
       .studio-multipage-only → visible
       .studio-onepage-only   → hidden
     With body.studio-one-page (one-page mode on):
       .studio-multipage-only → hidden
       .studio-onepage-only   → visible
     All selectors below use !important so they win over higher-specificity
     rules that target the grid elements by id elsewhere in this file. */
  .studio-multipage-only { display: block !important; }
  .studio-onepage-only   { display: none !important; }
  .template-grid.studio-multipage-only { display: grid !important; }

  body.studio-one-page .studio-multipage-only { display: none !important; }
  body.studio-one-page .studio-onepage-only   { display: block !important; }
  body.studio-one-page .template-grid.studio-onepage-only { display: grid !important; }

  /* industry chips dense grid */
  .chip-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
    max-height: 220px; overflow-y: auto;
  }
  .chip-grid .chip {
    padding: 5px 8px; font-size: 11px; border-radius: 7px; cursor: pointer;
    background: var(--glass-2); border: 1px solid var(--stroke-1); color: var(--ink-1);
    text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .chip-grid .chip.on {
    background: linear-gradient(180deg, oklch(0.7 0.19 256 / 0.25), oklch(0.66 0.21 295 / 0.1));
    border-color: oklch(0.7 0.19 256 / 0.5); color: var(--ink-0);
  }

  /* Page list */
  .page-list { display: flex; flex-direction: column; gap: 4px; }
  .page-item {
    display: flex; align-items: center; gap: 8px; padding: 7px 9px;
    background: var(--glass-2); border: 1px solid var(--stroke-1); border-radius: 9px;
    cursor: pointer;
  }
  .page-item:hover { background: var(--glass-3); }
  .page-item.active { background: linear-gradient(180deg, oklch(0.7 0.19 256 / 0.18), oklch(0.66 0.21 295 / 0.08)); border-color: oklch(0.7 0.19 256 / 0.4); }
  .page-item .drag { color: var(--ink-3); cursor: grab; }
  .page-item .pic { width: 22px; height: 22px; border-radius: 6px; background: var(--glass-3); border: 1px solid var(--stroke-2); display: grid; place-items: center; color: var(--cyan); flex-shrink: 0; }
  .page-item .pname { font-size: 12px; font-weight: 500; color: var(--ink-0); }
  .page-item .pmeta { font-family: var(--f-mono); font-size: 9.5px; color: var(--ink-3); margin-top: 1px; }
  .page-item .text { min-width: 0; flex: 1; }
  .page-item .b-count { padding: 1px 5px; font-family: var(--f-mono); font-size: 9px; background: var(--glass-3); border: 1px solid var(--stroke-2); border-radius: 999px; color: var(--ink-2); }
  .page-item .more { color: var(--ink-3); }

  .row-action { display: flex; gap: 5px; margin-top: 8px; }
  .row-action button {
    flex: 1; padding: 7px 9px; border-radius: 8px; font-size: 11.5px; cursor: pointer;
    background: var(--glass-2); border: 1px solid var(--stroke-1); color: var(--ink-1);
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  }
  .row-action button.danger { color: var(--error); border-color: oklch(0.72 0.19 22 / 0.3); }

  /* Section browser */
  .section-cat-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
  .section-cat-tab {
    padding: 3px 8px; font-size: 10.5px; border-radius: 999px; cursor: pointer;
    background: var(--glass-2); border: 1px solid var(--stroke-1); color: var(--ink-2);
    font-family: var(--f-mono); letter-spacing: 0.04em;
  }
  .section-cat-tab.on { background: var(--ink-0); color: #0a1020; border-color: var(--ink-0); }
  .section-thumb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .section-thumb {
    aspect-ratio: 1.6; background: var(--glass-2); border: 1px solid var(--stroke-1);
    border-radius: 8px; padding: 6px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; position: relative;
  }
  .section-thumb:hover { background: var(--glass-3); border-color: var(--stroke-2); }
  .section-thumb .skel { flex: 1; background: rgba(255,255,255,0.05); border-radius: 4px; position: relative; overflow: hidden; }
  .section-thumb .skel::before, .section-thumb .skel::after { content: ""; position: absolute; left: 8%; right: 8%; height: 2px; background: rgba(255,255,255,0.18); border-radius: 1px; }
  .section-thumb .skel::before { top: 28%; right: 40%; }
  .section-thumb .skel::after { top: 44%; right: 60%; }
  .section-thumb .nm { font-size: 10px; color: var(--ink-2); font-family: var(--f-mono); letter-spacing: 0.04em; text-align: center; }
  .section-thumb.added { border-color: oklch(0.78 0.17 158 / 0.5); background: oklch(0.78 0.17 158 / 0.08); }
  .section-thumb.added::after { content: "\2713"; position: absolute; top: 4px; right: 5px; color: var(--success); font-size: 11px; }

  /* Upload box */
  .upload {
    padding: 14px 12px; border: 1px dashed var(--stroke-2); border-radius: 10px;
    background: var(--glass-1); display: flex; flex-direction: column; align-items: center; gap: 4px;
    color: var(--ink-2); font-size: 11px; text-align: center;
  }
  .upload .icb { width: 28px; height: 28px; border-radius: 7px; background: var(--glass-3); display: grid; place-items: center; color: var(--cyan); margin-bottom: 2px; }
  .upload .nm { color: var(--ink-0); font-size: 12px; font-weight: 500; }
  .upload .sz { font-family: var(--f-mono); font-size: 9.5px; color: var(--ink-3); letter-spacing: 0.04em; }
  .upload-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

  /* SEO scores */
  .scores { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .score { padding: 10px; background: var(--glass-2); border: 1px solid var(--stroke-1); border-radius: var(--r-md); display: flex; flex-direction: column; gap: 4px; }
  .score .head { display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; color: var(--ink-2); font-family: var(--f-mono); letter-spacing: 0.04em; }
  .score .v { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
  .score .v em { font-style: normal; }
  .score .v.good em { color: var(--success); }
  .score .v.warn em { color: var(--warning); }
  .score .v .of { color: var(--ink-3); font-size: 12px; font-weight: 400; }
  .score .meter { height: 4px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
  .score .meter > span { display: block; height: 100%; border-radius: 3px; }

  .seo-meta { padding: 12px; background: var(--glass-2); border: 1px solid var(--stroke-1); border-radius: var(--r-md); }
  .seo-meta .url { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-3); margin-bottom: 4px; }
  .seo-meta .title { font-size: 13.5px; color: oklch(0.78 0.13 205); margin-bottom: 4px; }
  .seo-meta .desc { font-size: 11.5px; color: var(--ink-1); line-height: 1.45; }

  .field-textarea {
    width: 100%; padding: 8px 10px; background: var(--glass-2); border: 1px solid var(--stroke-1);
    border-radius: 8px; color: var(--ink-0); font: inherit; font-size: 12px; resize: vertical;
    min-height: 60px; outline: 0; font-family: var(--f-sans); line-height: 1.5;
  }
  .char-counter { font-family: var(--f-mono); font-size: 9.5px; color: var(--ink-3); margin-top: 4px; text-align: right; letter-spacing: 0.04em; }

  /* Schema tab */
  .schema-select {
    display: flex; align-items: center; gap: 8px; padding: 8px 11px;
    background: var(--glass-2); border: 1px solid var(--stroke-1); border-radius: 10px;
    font-size: 12.5px; cursor: pointer; justify-content: space-between;
  }
  .schema-select .l { display: flex; align-items: center; gap: 8px; color: var(--ink-0); }
  .schema-select .ic-circle { width: 20px; height: 20px; border-radius: 5px; background: linear-gradient(135deg, var(--cyan), var(--blue-bright)); display: grid; place-items: center; font-family: var(--f-mono); font-size: 9px; color: #04130b; font-weight: 700; }
  .code-block {
    background: rgba(0,0,0,0.5); border: 1px solid var(--stroke-1); border-radius: 10px;
    padding: 12px; font-family: var(--f-mono); font-size: 10.5px; line-height: 1.55;
    color: var(--ink-1); position: relative; overflow: auto; max-height: 280px; white-space: pre;
  }
  .code-block .copy {
    position: absolute; top: 8px; right: 8px;
    padding: 4px 9px; background: var(--glass-3); border: 1px solid var(--stroke-2);
    border-radius: 6px; font-size: 10px; color: var(--ink-1); cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-sans);
  }
  .code-block .k { color: oklch(0.78 0.13 205); }
  .code-block .s { color: oklch(0.78 0.16 130); }
  .code-block .c { color: var(--ink-3); font-style: italic; }
  .validate-row {
    display: flex; align-items: center; gap: 8px; padding: 9px 11px;
    background: oklch(0.78 0.17 158 / 0.08); border: 1px solid oklch(0.78 0.17 158 / 0.3);
    border-radius: 9px; font-size: 12px; color: var(--ink-0);
  }
  .validate-row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 6px currentColor; flex-shrink: 0; color: var(--success); }
  .validate-row .l { color: var(--blue-bright); font-size: 11px; margin-left: auto; cursor: pointer; }

  /* ==== Bottom dock ==== */
  .bottom-dock {
    position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    background: rgba(8, 11, 24, 0.85);
    border: 1px solid var(--stroke-2);
    border-radius: var(--r-pill);
    backdrop-filter: blur(24px);
    box-shadow: 0 18px 40px -10px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
    z-index: 40;
  }
  .bottom-dock .stage {
    display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill);
    font-size: 12px; color: var(--ink-1); position: relative;
  }
  .bottom-dock .stage .num {
    width: 18px; height: 18px; border-radius: 50%; background: var(--glass-2); border: 1px solid var(--stroke-1);
    display: grid; place-items: center; font-family: var(--f-mono); font-size: 9px; color: var(--ink-3);
  }
  .bottom-dock .stage.done .num { background: oklch(0.78 0.17 158 / 0.2); color: var(--success); border-color: oklch(0.78 0.17 158 / 0.5); }
  .bottom-dock .stage.done { color: var(--ink-0); }
  .bottom-dock .stage.active .num { background: oklch(0.7 0.19 256 / 0.25); color: var(--blue-bright); border-color: oklch(0.7 0.19 256 / 0.6); }
  .bottom-dock .stage.active { color: var(--ink-0); }
  .bottom-dock .stage + .stage::before { content: ""; position: absolute; left: -10px; top: 50%; width: 8px; height: 1px; background: var(--stroke-2); }
  .bottom-dock .ctrl-btn {
    width: 32px; height: 32px; border-radius: 50%; background: var(--grad-primary);
    border: 0; display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-glow-blue);
  }

  .ic { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .ic-sm { width: 12px; height: 12px; }

/* ============================================================================
 * SECTION 2 — studio-* shell aliases.
 * [2026-05-10] phase-14: the live PHP shell (app/lib/builder-shell-v4.php)
 * prefixes its top-level shell elements with `studio-` (e.g. .studio-app,
 * .studio-sb, .studio-tb, .studio-main, .studio-panel, .studio-bottom-dock,
 * .studio-stage, etc.) while keeping inner content classes unprefixed
 * (cmd-prompt / mode-tile / pillrow / prop-group / etc.). These aliases route
 * the prefixed shell selectors back to the design rules above so the verbatim
 * Claude-Design CSS still applies without renaming the source.
 * ==========================================================================*/

  /* Outer grid container */
  /* [2026-05-14] UI/UX audit fix #2 — wrap each track in minmax(0, …) so the
   * collapsed value of 0px is actually honored. Previously a plain
   * `grid-template-columns: var(--sb-w) 1fr` would, when --sb-w resolved to
   * 0px, still leave the sidebar column at ~248px because CSS grid auto-
   * expands explicit zero-sized tracks to their item's min-content size
   * (here the sidebar's 14+12=26px padding + brand mark + nav links). The
   * `minmax(0, var(--sb-w))` form caps the auto-expansion at the explicit
   * value, so cb-sb / cb-mid / cb-right finally collapse the column to 0.
   *
   * Old (commented out for revert trail):
   *   grid-template-columns: var(--sb-w) 1fr;
   */
  .studio-app, .studio-app-v4 {
    display: grid;
    grid-template-columns: minmax(0, var(--sb-w)) minmax(0, 1fr); /* [2026-05-14] was: var(--sb-w) 1fr */
    grid-template-rows: 56px 1fr;
    grid-template-areas: "sidebar topbar" "sidebar main";
    height: 100vh; position: relative; z-index: 1;
    transition: grid-template-columns .18s cubic-bezier(.4,.0,.2,1);
  }
  .studio-app.sb-collapsed,    .studio-app-v4.sb-collapsed    { --sb-w: 0px; }
  .studio-app.mid-collapsed,   .studio-app-v4.mid-collapsed   { --mid-w: 0px; }
  .studio-app.right-collapsed, .studio-app-v4.right-collapsed { --right-w: 0px; }

  /* Sidebar */
  .studio-sb, .studio-sb-v4 {
    grid-area: sidebar;
    background: rgba(8, 11, 24, 0.6);
    border-right: 1px solid var(--stroke-1);
    backdrop-filter: blur(24px);
    display: flex; flex-direction: column;
    padding: 14px 12px 12px;
    overflow-y: auto;
    transition: padding .18s cubic-bezier(.4,.0,.2,1), opacity .12s;
  }
  .studio-app.sb-collapsed .studio-sb,
  .studio-app-v4.sb-collapsed .studio-sb-v4 { padding-left: 0; padding-right: 0; opacity: 0; pointer-events: none; }

  /* Brand mark inside sidebar */
  .studio-sb-brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 14px; text-decoration: none; color: inherit; }
  .studio-sb-brand .name { font-weight: 600; font-size: 14px; letter-spacing: -0.02em; }
  .studio-sb-brand small { color: var(--ink-2); font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; }
  .studio-brand-mark {
    width: 28px; height: 28px; border-radius: 7px;
    background: linear-gradient(135deg, oklch(0.78 0.16 168), oklch(0.65 0.18 196));
    flex-shrink: 0;
  }

  /* Workspace switcher */
  .studio-sb-workspace {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 10px; background: var(--glass-2); border: 1px solid var(--stroke-1);
    border-radius: var(--r-md); margin-bottom: 16px; cursor: pointer; transition: background .2s;
  }
  .studio-sb-workspace:hover { background: var(--glass-3); }

  /* Sections */
  .studio-sb-section { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
  .studio-sb-section + .studio-sb-section { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--stroke-1); }
  .studio-sb-label { padding: 6px 10px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }

  /* Nav links */
  .studio-sb-link {
    display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px;
    color: var(--ink-1); text-decoration: none; font-size: 13.5px; cursor: pointer;
    border: 1px solid transparent; position: relative;
  }
  .studio-sb-link:hover { background: var(--glass-2); color: var(--ink-0); }
  .studio-sb-link.active {
    background: linear-gradient(180deg, oklch(0.7 0.19 256 / 0.18), oklch(0.66 0.21 295 / 0.1));
    color: var(--ink-0); border-color: oklch(0.7 0.19 256 / 0.25);
  }
  .studio-sb-link.active::before {
    content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 2px;
    background: var(--grad-primary); border-radius: 2px;
  }
  .studio-sb-link .ic { width: 16px; height: 16px; color: var(--ink-2); }
  .studio-sb-link.active .ic { color: var(--cyan); }
  .studio-sb-link .lbl { flex: 1; }
  .studio-sb-badge {
    margin-left: auto; padding: 2px 7px; font-size: 10px; font-family: var(--f-mono);
    background: var(--glass-3); border: 1px solid var(--stroke-2); border-radius: 999px; color: var(--ink-2);
  }
  .studio-sb-badge.new { background: oklch(0.78 0.17 158 / 0.18); color: var(--success); border-color: oklch(0.78 0.17 158 / 0.4); }

  /* Bottom credit + user pill */
  .studio-sb-bottom { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--stroke-1); display: flex; flex-direction: column; gap: 6px; }
  .studio-credit { padding: 12px 12px; background: var(--glass-1); border: 1px solid var(--stroke-1); border-radius: var(--r-md); }
  .studio-credit .row1 { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-2); margin-bottom: 8px; font-family: var(--f-mono); }
  .studio-credit .bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.06); overflow: hidden; }
  .studio-credit .bar > span { display: block; height: 100%; width: 62%; background: var(--grad-primary); border-radius: 2px; }
  .studio-credit .row2 { display: flex; justify-content: space-between; font-size: 11.5px; margin-top: 8px; color: var(--ink-1); }
  .studio-credit .row2 a { color: var(--blue-bright); text-decoration: none; font-weight: 500; }
  .studio-sb-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
  .studio-sb-user:hover { background: var(--glass-2); }
  .studio-sb-user .av { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--violet)); display: grid; place-items: center; font-size: 11px; font-weight: 600; }
  .studio-sb-user .info .n { font-size: 13px; font-weight: 500; }
  .studio-sb-user .info .e { font-size: 11px; color: var(--ink-2); }

  /* Topbar */
  .studio-tb, .studio-tb-v4 {
    grid-area: topbar; display: flex; align-items: center; gap: 12px;
    padding: 0 18px; border-bottom: 1px solid var(--stroke-1);
    background: rgba(8, 11, 24, 0.5); backdrop-filter: blur(20px);
  }
  .studio-crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
  .studio-crumbs a { color: var(--ink-2); text-decoration: none; }
  .studio-crumbs .sep { opacity: 0.4; }
  .studio-crumbs .current { color: var(--ink-0); font-weight: 500; }
  .studio-save-pill {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
    background: oklch(0.78 0.17 158 / 0.12); border: 1px solid oklch(0.78 0.17 158 / 0.3);
    color: var(--success); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.04em;
    border-radius: 999px; margin-left: 8px;
  }
  .studio-save-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 6px currentColor; }
  .studio-tb-grow { flex: 1; }
  .studio-tb-actions { display: flex; align-items: center; gap: 6px; }
  .studio-tb-icon-btn {
    width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center;
    background: transparent; border: 1px solid transparent; color: var(--ink-1); cursor: pointer;
  }
  .studio-tb-icon-btn:hover { background: var(--glass-2); border-color: var(--stroke-1); color: var(--ink-0); }
  .studio-tb-icon-btn .ic { width: 16px; height: 16px; }
  .studio-tb-divider { width: 1px; height: 22px; background: var(--stroke-1); margin: 0 4px; }
  .studio-tb-share {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
    background: var(--glass-2); border: 1px solid var(--stroke-1); color: var(--ink-0);
    border-radius: var(--r-pill); font-size: 13px; cursor: pointer; font-weight: 500;
  }
  .studio-tb-publish {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px;
    background: var(--grad-primary); border: 0; border-radius: var(--r-pill);
    box-shadow: var(--shadow-glow-blue); color: white; font-weight: 600; font-size: 13px; cursor: pointer;
  }
  /* [2026-05-11] Sign-in CTA pill — anonymous users only. Inserted by builder-shell.js
     wireTopbarAuth() between Share and Publish. Without this rule it falls back to
     the browser-default button look (white box, outset border) which clashes with the
     dark topbar. */
  .studio-tb-signin {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
    background: var(--glass-2); border: 1px solid var(--stroke-1); color: var(--ink-0);
    border-radius: var(--r-pill); font-size: 13px; cursor: pointer; font-weight: 500;
    line-height: 1; font-family: inherit;
  }
  .studio-tb-signin:hover { background: var(--glass-3); border-color: var(--stroke-2); color: var(--ink-0); }
  .studio-tb-signin .ic { width: 16px; height: 16px; }

  /* [2026-05-11] Icon-only topbar buttons are 32x32. The kbd shortcut pill
     that builder-shell.js#wireKeyboardShortcuts appends to #studio-preview-btn
     overflows the button and renders as a stuck "CtrlP" badge below the eye
     icon. Suppress the inline kbd here — the shortcut is still discoverable
     via the button's title attribute on hover. */
  .studio-tb-icon-btn .studio-kbd { display: none; }

  /* Topbar collapse button group */
  .studio-tb-collapse-group {
    display: flex; gap: 2px; padding: 3px; background: var(--glass-2);
    border: 1px solid var(--stroke-1); border-radius: 8px; margin-right: 4px;
  }
  .studio-tb-cb {
    width: 26px; height: 24px; border-radius: 5px; display: grid; place-items: center;
    background: transparent; border: 0; color: var(--ink-2); cursor: pointer;
  }
  .studio-tb-cb:hover { background: var(--glass-3); color: var(--ink-0); }
  .studio-tb-cb.off { color: var(--cyan); background: oklch(0.7 0.19 256 / 0.15); }
  .studio-tb-cb .ic { width: 14px; height: 14px; }

  /* Main 3-col grid */
  /* [2026-05-14] UI/UX audit fix #2 — minmax(0, …) wrap so collapsed tracks
   * actually reach 0 instead of expanding to the inner panels' min-content
   * (~300px for cmd, ~360px for props).
   *
   * Old (commented out for revert trail):
   *   grid-template-columns: var(--mid-w) 1fr var(--right-w);
   */
  .studio-main, .studio-main-v4 {
    grid-area: main;
    display: grid;
    grid-template-columns: minmax(0, var(--mid-w)) minmax(0, 1fr) minmax(0, var(--right-w)); /* [2026-05-14] was: var(--mid-w) 1fr var(--right-w) */
    gap: 14px;
    padding: 14px;
    overflow: hidden;
    transition: grid-template-columns .18s cubic-bezier(.4,.0,.2,1);
    position: relative;
  }

  /* Panels */
  .studio-panel {
    background: rgba(10, 14, 31, 0.5);
    border: 1px solid var(--stroke-1);
    border-radius: var(--r-lg);
    backdrop-filter: blur(20px);
    display: flex; flex-direction: column;
    overflow: hidden;
    min-width: 0;
    transition: opacity .15s;
  }
  .studio-panel-head {
    padding: 12px 14px; border-bottom: 1px solid var(--stroke-1);
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    flex-shrink: 0;
  }
  .studio-panel-head .ph-title { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
  .studio-panel-head .ph-title .pill {
    font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.08em;
    padding: 2px 7px; background: var(--glass-2); border: 1px solid var(--stroke-1); border-radius: 999px; color: var(--ink-2);
  }
  .studio-panel-body { padding: 14px; flex: 1; overflow-y: auto; }

  /* Preview toolbar (renamed copy) */
  .studio-preview-toolbar {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    border-bottom: 1px solid var(--stroke-1); flex-shrink: 0;
  }
  .studio-preview-stage {
    flex: 1; padding: 18px; overflow: auto; position: relative;
    background:
      radial-gradient(circle at 30% 20%, oklch(0.4 0.18 256 / 0.15), transparent 60%),
      radial-gradient(circle at 70% 80%, oklch(0.4 0.21 295 / 0.12), transparent 60%);
  }

  /* Bottom dock — sigmav2 prefix; reuses .stage when nested */
  .studio-bottom-dock {
    position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    background: rgba(8, 11, 24, 0.85);
    border: 1px solid var(--stroke-2);
    border-radius: var(--r-pill);
    backdrop-filter: blur(24px);
    box-shadow: 0 18px 40px -10px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
    z-index: 40;
  }
  .studio-stage {
    display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill);
    font-size: 12px; color: var(--ink-1); position: relative;
  }
  .studio-stage .num {
    width: 18px; height: 18px; border-radius: 50%; background: var(--glass-2); border: 1px solid var(--stroke-1);
    display: grid; place-items: center; font-family: var(--f-mono); font-size: 9px; color: var(--ink-3);
  }
  .studio-stage.done .num { background: oklch(0.78 0.17 158 / 0.2); color: var(--success); border-color: oklch(0.78 0.17 158 / 0.5); }
  .studio-stage.done { color: var(--ink-0); }
  .studio-stage.active .num { background: oklch(0.7 0.19 256 / 0.25); color: var(--blue-bright); border-color: oklch(0.7 0.19 256 / 0.6); }
  .studio-stage.active { color: var(--ink-0); }
  .studio-stage + .studio-stage::before { content: ""; position: absolute; left: -10px; top: 50%; width: 8px; height: 1px; background: var(--stroke-2); }
  .studio-dock-ctrl {
    width: 32px; height: 32px; border-radius: 50%; background: var(--grad-primary);
    border: 0; display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-glow-blue);
  }
  .studio-dock-divider { width: 1px; height: 18px; background: var(--stroke-1); margin: 0 4px; }
  .studio-dock-meta { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-2); letter-spacing: 0.04em; }

/* ============================================================================
 * SECTION 3 — .is-soon (planned / unwired feature marker)
 * [2026-05-10] phase-14: the v4 PHP shell sprinkles .is-soon on 57+
 * elements to mark planned/unwired controls. Dim + non-interactive +
 * a small "soon" chip in the top-right.
 * ==========================================================================*/

  .is-soon {
    opacity: 0.45 !important;
    pointer-events: none !important;
    position: relative;
  }
  .is-soon::after {
    content: 'soon';
    position: absolute;
    top: 4px;
    right: 4px;
    font: 700 8px/1 ui-monospace, 'JetBrains Mono', monospace;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted, #94a3b8);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    pointer-events: none;
  }
  /* Don't double-tag nested is-soon (avoids "soon soon soon" chip-grids) */
  .is-soon .is-soon::after { display: none; }
  .is-soon .is-soon { opacity: 1 !important; }

/* ============================================================================
 * SECTION 4 — Edge-chevron collapse pills.
 * [2026-05-10] phase-14: mirrors the legacy .studio-collapse* pattern at
 * app/lib/builder-overlay.css:1196-1221, adapted for the v4 shell's
 * 3-handle layout (left / rail / right). These pills sit absolutely over
 * the .studio-main grid so they remain visible in every collapse state.
 * ==========================================================================*/

  .studio-collapse {
    position: absolute;
    /* [2026-05-10] LEFT and RAIL pills stagger vertically (33% / 67%) so when
       both panels are collapsed they don't stack on top of each other at left:14.
       RIGHT pill stays centred (50%) — it's on the opposite edge, no overlap. */
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 96px;
    padding: 6px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--stroke-1, rgba(255,255,255,0.08));
    background: var(--ink-0, #0f172a);
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    z-index: 50;
    transition: left .25s ease, right .25s ease, top .25s ease, background .15s, color .15s, border-color .15s;
  }
  .studio-collapse:hover {
    background: var(--blue-bright, #3b82f6);
    color: white;
    border-color: var(--blue-bright, #3b82f6);
  }
  .studio-collapse .ar {
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    flex-shrink: 0;
  }
  .studio-collapse .lbl {
    flex: 1;
    min-height: 0;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: var(--f-mono, ui-monospace, 'JetBrains Mono', monospace);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    user-select: none;
  }
  /* Default position (1500px+): align with mid-w/right-w in the .studio-main grid,
     plus the 14px gutter and 14px gap that bracket each column.
     LEFT sits at 33% and RAIL at 67% so they cleanly separate when both collapse to left:14. */
  .studio-collapse-left  { left: 14px;  top: 33%; border-radius: 0 9px 9px 0; border-left: 0; }   /* sidebar lives in the outer grid, so the left pill parks against the canvas */
  .studio-collapse-rail  { left: 314px; top: 67%; border-radius: 0 9px 9px 0; border-left: 0; }   /* 300 mid-w + 14 padding */
  .studio-collapse-right { right: 374px; top: 50%; border-radius: 9px 0 0 9px; border-right: 0; } /* 360 right-w + 14 padding */
  @media (max-width: 1400px) {
    .studio-collapse-rail  { left: 294px; }
    .studio-collapse-right { right: 354px; }
  }
  @media (max-width: 1100px) {
    .studio-collapse-rail  { left: 264px; }
    .studio-collapse-right { right: 314px; }
  }
  body.studio-left-collapsed  .studio-collapse-left  { left: 14px; }
  body.studio-rail-collapsed  .studio-collapse-rail  { left: 14px; }
  body.studio-right-collapsed .studio-collapse-right { right: 14px; }

  /* Flip the chevron glyph when collapsed */
  body.studio-left-collapsed  .studio-collapse-left  .ar::before { content: '\203A'; }
  body.studio-left-collapsed  .studio-collapse-left  .ar         { color: transparent; }
  body.studio-rail-collapsed  .studio-collapse-rail  .ar::before { content: '\203A'; }
  body.studio-rail-collapsed  .studio-collapse-rail  .ar         { color: transparent; }
  body.studio-right-collapsed .studio-collapse-right .ar::before { content: '\2039'; }
  body.studio-right-collapsed .studio-collapse-right .ar         { color: transparent; }

/* ============================================================================
 * SECTION 5 — Grid-reflow on collapse.
 * [2026-05-10] phase-14: THE bug fix the user explicitly called out.
 * When <body> has a studio-*-collapsed class, the corresponding column
 * in BOTH the outer .studio-app grid (sidebar | canvas-region) AND the
 * inner .studio-main grid (mid | canvas | right) shrinks to 0; the canvas
 * (1fr) absorbs the freed space. The bottom dock follows because it lives
 * inside the canvas column.
 *
 * The PHP shell uses a 2-row outer grid (.studio-app: sidebar+topbar /
 * sidebar+main) and a 3-col inner grid (.studio-main). So the left
 * collapse trims the outer grid; the rail+right collapses trim the inner.
 * ==========================================================================*/

  .studio-app, .studio-app-v4,
  .studio-main, .studio-main-v4 {
    transition: grid-template-columns .25s ease;
  }

  /* [2026-05-14] UI/UX audit fix #2 — all collapse-state overrides now wrap
   * their tracks in minmax(0, …) so the explicit zero size is respected.
   * Without the wrap, a track sized 0 still expanded to its grid item's
   * min-content (see fix block above). The previous plain values stayed
   * intact in spirit (just upgraded with the minmax wrap); the visible state
   * is now "fully collapsed" instead of "stuck at ~25-300px residue". */

  /* ── Outer grid (sidebar | canvas-region) ─────────────────────────────── */
  body.studio-left-collapsed .studio-app,
  body.studio-left-collapsed .studio-app-v4 {
    grid-template-columns: 0 minmax(0, 1fr); /* [2026-05-14] was: 0 1fr */
  }

  /* ── Inner 3-col grid (mid | canvas 1fr | right) ──────────────────────── */
  body.studio-rail-collapsed .studio-main,
  body.studio-rail-collapsed .studio-main-v4 {
    grid-template-columns: 0 minmax(0, 1fr) minmax(0, var(--right-w)); /* [2026-05-14] was: 0 1fr var(--right-w) */
    gap: 0;
  }
  body.studio-right-collapsed .studio-main,
  body.studio-right-collapsed .studio-main-v4 {
    grid-template-columns: minmax(0, var(--mid-w)) minmax(0, 1fr) 0; /* [2026-05-14] was: var(--mid-w) 1fr 0 */
    gap: 0;
  }
  body.studio-rail-collapsed.studio-right-collapsed .studio-main,
  body.studio-rail-collapsed.studio-right-collapsed .studio-main-v4 {
    grid-template-columns: 0 minmax(0, 1fr) 0; /* [2026-05-14] was: 0 1fr 0 */
    gap: 0;
    padding-left: 6px;
    padding-right: 6px;
  }

  /* Two-class combos involving the outer grid */
  body.studio-left-collapsed.studio-rail-collapsed .studio-app,
  body.studio-left-collapsed.studio-rail-collapsed .studio-app-v4 {
    grid-template-columns: 0 minmax(0, 1fr); /* [2026-05-14] was: 0 1fr */
  }
  body.studio-left-collapsed.studio-right-collapsed .studio-app,
  body.studio-left-collapsed.studio-right-collapsed .studio-app-v4 {
    grid-template-columns: 0 minmax(0, 1fr); /* [2026-05-14] was: 0 1fr */
  }

  /* All three collapsed: canvas fills viewport minus the parked pills */
  body.studio-left-collapsed.studio-rail-collapsed.studio-right-collapsed .studio-app,
  body.studio-left-collapsed.studio-rail-collapsed.studio-right-collapsed .studio-app-v4 {
    grid-template-columns: 0 minmax(0, 1fr); /* [2026-05-14] was: 0 1fr */
  }
  body.studio-left-collapsed.studio-rail-collapsed.studio-right-collapsed .studio-main,
  body.studio-left-collapsed.studio-rail-collapsed.studio-right-collapsed .studio-main-v4 {
    grid-template-columns: 0 minmax(0, 1fr) 0; /* [2026-05-14] was: 0 1fr 0 */
    gap: 0;
    padding-left: 6px;
    padding-right: 6px;
  }

  /* Fade + slide the panel content while it collapses */
  .studio-sb, .studio-sb-v4,
  .studio-panel-cmd, .studio-panel-props {
    transition: opacity .18s ease, transform .25s ease;
  }
  /* [2026-05-14] UI/UX audit fix #3 — also zero out padding, min-width and
   * overflow when the panel collapses. The earlier rules only faded the
   * content out (opacity / visibility) but the container kept its 14px
   * padding + scrollbars + min-content, leaving a visible "ghost gap" between
   * the topbar and canvas. Combined with the minmax(0, …) grid fix above,
   * collapsed panels now truly reach 0. */
  body.studio-left-collapsed  .studio-sb,
  body.studio-left-collapsed  .studio-sb-v4    { opacity: 0; transform: translateX(-12px); pointer-events: none; visibility: hidden; padding: 0; min-width: 0; overflow: hidden; }
  body.studio-rail-collapsed  .studio-panel-cmd { opacity: 0; transform: translateX(-12px); pointer-events: none; visibility: hidden; padding: 0; min-width: 0; overflow: hidden; border: 0; }
  body.studio-right-collapsed .studio-panel-props { opacity: 0; transform: translateX(12px); pointer-events: none; visibility: hidden; padding: 0; min-width: 0; overflow: hidden; border: 0; }

/* ============================================================================
 * SECTION 6 — Bottom dock spans canvas.
 * [2026-05-10] phase-14: the dock must grow with the canvas as panels
 * collapse. It lives inside the canvas .studio-panel so width: 100% +
 * a transition handles the rest.
 * ==========================================================================*/

  .canvas .bottom-dock,
  .canvas-area .bottom-dock,
  .studio-panel-canvas .studio-bottom-dock,
  #studio-bottom-dock,
  #studio-bottom-dock-v4 {
    width: 100%;
    transition: width .25s ease;
  }
  /* When all three side panels are collapsed, the dock takes the full
     viewport width inside the canvas column. */
  body.studio-left-collapsed.studio-rail-collapsed.studio-right-collapsed #studio-bottom-dock-v4 {
    left: 50%;
    transform: translateX(-50%);
  }

/* ============================================================================
 * SECTION 7 — Empty-state placeholders.
 * [2026-05-10] phase-14: the PHP shell renders empty containers for
 * #studio-pages-list-v4 and #studio-section-browser-v4. Show a dashed
 * placeholder until JS hydrates them so the user knows where content
 * will land.
 * ==========================================================================*/

  #studio-pages-list-v4:empty::before {
    content: 'No pages yet — click Generate to start.';
    display: block;
    padding: 16px;
    font-size: 12.5px;
    color: var(--ink-2, #94a3b8);
    border: 1px dashed var(--stroke-1, rgba(255,255,255,0.08));
    border-radius: 8px;
  }
  #studio-section-browser-v4:empty::before {
    content: 'Section browser appears here once a page is selected.';
    display: block;
    padding: 16px;
    font-size: 12.5px;
    color: var(--ink-2, #94a3b8);
    border: 1px dashed var(--stroke-1, rgba(255,255,255,0.08));
    border-radius: 8px;
  }

/* ============================================================================
 * SECTION 8 — Canvas preview stretch + pages filmstrip dock.
 * [2026-05-10] phase-14 fix: the legacy `.studio-main-area .studio_canvas-preview`
 * flex-stretch cascade does NOT apply inside v4 because the wrapper is
 * `.studio-preview-stage` instead. Without these rules the placeholder card
 * sits at natural height at the top of the stage, leaving a large empty band
 * below — "squeezed to the top". Re-apply the same flex chain here so the
 * canvas-preview / placeholder / frame-wrap / iframe-area / iframe all fill
 * the available height.
 *
 * Also pulls the pages-filmstrip out of the iframe wrap (see builder-shell-v4.php
 * comment-out) and parks it at the bottom of the canvas panel, above the
 * fixed bottom-dock. flex-shrink: 0 keeps it from collapsing.
 * ==========================================================================*/

  .studio-preview-stage {
    display: flex;
    flex-direction: column;
  }
  .studio-preview-stage > #canvas-preview,
  .studio-preview-stage > .studio_canvas-preview {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .studio-preview-stage #preview-placeholder,
  .studio-preview-stage .studio_preview-placeholder {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .studio-preview-stage #preview-frame-wrap,
  .studio-preview-stage .studio_preview-frame-wrap {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 !important;
  }
  .studio-preview-stage .studio_iframe-area {
    flex: 1 1 0%;
    min-height: 0;
    position: relative;
  }
  .studio-preview-stage .studio_iframe-area > #page-preview-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }

  /* ──────────────────────────────────────────────────────────────────
   * [2026-05-12] Device-aware preview sizing.
   * The device segment (Desktop / Tablet / Mobile) writes two CSS
   * vars on .studio-panel-canvas:
   *   --studio-device-w  → target viewport width  (100% / 768px / 375px)
   *   --studio-device-h  → target viewport height (100% / 1024px / 812px)
   * Plus sets [data-device="desktop|tablet|mobile"] for state-aware rules.
   *
   * For tablet / mobile we constrain ONLY the iframe-area (the live
   * site) — not the frame-bar/toolbar — so the device frame is centred
   * inside a darker letterbox stage. Desktop is the default 100%/100%.
   * ────────────────────────────────────────────────────────────────── */
  .studio-panel-canvas:not([data-device="desktop"]) .studio_iframe-area {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: auto;
    background:
      radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.025), transparent 70%),
      var(--bg-1, #0a0d1a);
    padding: 20px 16px 28px;
    box-sizing: border-box;
  }
  .studio-panel-canvas:not([data-device="desktop"]) .studio_iframe-area > #page-preview-frame {
    width:  var(--studio-device-w, 100%);
    height: var(--studio-device-h, 100%);
    max-width: 100%;
    max-height: 100%;
    flex: 0 0 auto;
    border-radius: 18px;
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.06),
      0 30px 60px -20px rgba(0,0,0,0.55),
      0 12px 24px -8px rgba(0,0,0,0.35);
    background: #fff;
  }
  .studio-panel-canvas[data-device="mobile"] .studio_iframe-area > #page-preview-frame {
    border-radius: 28px;
  }
  /* Subtle "device" badge in the corner so the user knows the iframe
     is a simulated viewport rather than the natural full canvas. */
  .studio-panel-canvas[data-device="tablet"] .studio_iframe-area::after,
  .studio-panel-canvas[data-device="mobile"] .studio_iframe-area::after {
    position: absolute;
    top: 8px;
    right: 12px;
    font: 700 9px/1 ui-monospace, 'JetBrains Mono', monospace;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    color: var(--ink-2, #94a3b8);
    pointer-events: none;
    z-index: 2;
  }
  .studio-panel-canvas[data-device="tablet"] .studio_iframe-area::after { content: 'Tablet · 768×1024'; }
  .studio-panel-canvas[data-device="mobile"] .studio_iframe-area::after { content: 'Mobile · 375×812'; }

  /* Pages filmstrip — overlay at the bottom of the canvas panel.
     [2026-05-10] phase-14 fix #2: position: absolute so the strip floats
     over the preview stage instead of pushing it up. The template panel
     keeps its full height; the filmstrip rides above the fixed bottom dock.
     z-index 41 keeps it stacked above .studio-bottom-dock (z-index 40).
     The toggle handle (.studio-filmstrip-handle) is a sibling of the strip,
     anchored at the same bottom offset as the strip TOP — when the strip
     is collapsed out of view, the handle remains at that same position so
     the user can re-open it. */
  .studio-panel-canvas {
    position: relative; /* anchor for the absolute filmstrip + handle */
  }
  .studio-panel-canvas > #pages-filmstrip.studio-filmstrip-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 72px; /* clears the 50px-tall bottom-dock + 14px viewport gutter + 8px gap */
    z-index: 41;
    height: 114px;
    border-top: 1px solid var(--stroke-1);
    background: rgba(8, 11, 24, 0.85);
    backdrop-filter: blur(12px);
    transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .15s;
  }
  /* Collapsed state — slide the strip out of view below its position. The
     handle stays where it was so the user can click to bring it back. */
  .studio-panel-canvas > #pages-filmstrip.studio-filmstrip-overlay.is-collapsed {
    transform: translateY(calc(100% + 80px));
    opacity: 0;
    pointer-events: none;
  }
  /* Handle — fixed-position pill that always rides at the bottom of the
     canvas panel (just above the bottom dock). Matches the existing
     .studio-collapse edge-chevron aesthetic but rendered horizontally. */
  .studio-panel-canvas > .studio-filmstrip-handle {
    position: absolute;
    bottom: 192px; /* 72 (strip bottom) + 114 (strip height) + 6 gap = 192 — sits above strip top edge */
    right: 16px;
    z-index: 42;
    width: auto;
    min-width: 96px;
    height: 24px;
    padding: 0 12px;
    border: 1px solid var(--stroke-1, rgba(255,255,255,0.08));
    border-bottom: 0;
    background: var(--ink-0, #0f172a);
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 9px 9px 0 0;
    font-family: var(--f-mono);
    font-size: 10.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: background .15s, color .15s, border-color .15s, bottom .25s cubic-bezier(.4,0,.2,1);
  }
  .studio-panel-canvas > .studio-filmstrip-handle:hover {
    background: var(--blue-bright, #3b82f6);
    color: white;
    border-color: var(--blue-bright, #3b82f6);
  }
  .studio-panel-canvas > .studio-filmstrip-handle .ic { transition: transform .25s ease; }
  /* When the strip is collapsed, drop the handle down to the canvas bottom
     (just above the dock) so it's the only visible pages control. */
  .studio-panel-canvas > .studio-filmstrip-handle.is-collapsed {
    bottom: 72px;
  }
  .studio-panel-canvas > .studio-filmstrip-handle.is-collapsed .ic {
    transform: rotate(180deg);
  }

/* ============================================================================
 * SECTION 9 — Rail-collapse outer-grid override.
 * [2026-05-10] phase-14 fix #3: the legacy stylesheet at
 * builder-overlay.css:1732 set `body.studio-rail-collapsed .studio-app
 * { grid-template-columns: 0 1fr }` because in v3 "rail" meant the brand
 * sidebar. In v4 we re-use the rail class for the inner middle column
 * (AI Command panel) — but the legacy rule still hijacks the outer grid
 * and hides the brand sidebar at the same time.
 *
 * Pin the outer grid back to its --sb-w default unless the LEFT class is
 * also set. .studio-app-v4 specificity matches the legacy selector but
 * loads later, so it wins on tie-break.
 * ==========================================================================*/

  /* [2026-05-14] UI/UX audit fix #2 — minmax wrap (same rationale as the
   * earlier collapse overrides). */
  body.studio-rail-collapsed:not(.studio-left-collapsed) .studio-app-v4 {
    grid-template-columns: minmax(0, var(--sb-w)) minmax(0, 1fr); /* [2026-05-14] was: var(--sb-w) 1fr */
  }
  body.studio-rail-collapsed.studio-right-collapsed:not(.studio-left-collapsed) .studio-app-v4 {
    grid-template-columns: minmax(0, var(--sb-w)) minmax(0, 1fr); /* [2026-05-14] was: var(--sb-w) 1fr */
  }

/* ============================================================================
 * SECTION 10 — Brand sidebar must stay visible when only the rail (AI Command)
 * is collapsed. The legacy stylesheet at builder-overlay.css:1735-1739 sets
 * `body.studio-rail-collapsed .studio-sb { opacity: 0; ... }` because v3
 * mapped rail → brand sidebar. In v4 the brand sidebar is governed by
 * `studio-left-collapsed` instead. Override the opacity/transform/pointer
 * lock so clicking cb-mid (or its edge-chevron) leaves the brand sidebar
 * fully visible and interactive.
 * ==========================================================================*/

  body.studio-rail-collapsed:not(.studio-left-collapsed) .studio-sb,
  body.studio-rail-collapsed:not(.studio-left-collapsed) .studio-sb-v4 {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    visibility: visible;
  }

/* ============================================================================
 * SECTION 11 — Rail collapse pill must stick to the settings (AI Command)
 * panel's right edge.
 * [2026-05-10] phase-14 fix #4: legacy builder-shell.js appends a
 * `.studio-collapse-rail` pill directly to <body> (line 1161). The legacy
 * CSS pins it at `left: 314px` assuming the v3 layout where the brand rail
 * was 300px. In v4 that's wrong: when the brand sidebar is visible the AI
 * Command panel actually starts at `var(--sb-w) + 14px`, so its right edge
 * is `var(--sb-w) + 14px + var(--mid-w)`. Recompute `left` using the same
 * CSS variables the grid uses, and mirror the collapse state onto body so
 * the variables resolve to 0 when a panel is hidden.
 * ==========================================================================*/

  body.studio-left-collapsed  { --sb-w: 0px; }
  body.studio-rail-collapsed  { --mid-w: 0px; }
  body.studio-right-collapsed { --right-w: 0px; }

  body > .studio-collapse-rail {
    left: calc(var(--sb-w, 248px) + 14px + var(--mid-w, 300px)) !important;
    transition: left .25s ease, background .15s, color .15s, border-color .15s;
  }

  /* Slim canvas toolbar — refresh moved into the URL strip; padding tightened. */
  .studio-preview-toolbar.studio-preview-toolbar--slim {
    padding: 6px 12px;
    min-height: 0;
  }
  .studio-preview-toolbar.studio-preview-toolbar--slim .pt-segment button {
    padding: 4px 10px;
  }
  /* Refresh button parked at the right edge of the URL strip. */
  .pt-url {
    position: relative;
    padding-right: 38px; /* room for the refresh button */
  }
  .pt-url-refresh {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: transparent;
    border: 0;
    color: var(--ink-2);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: color .15s, background .15s;
  }
  .pt-url-refresh:hover {
    color: var(--ink-0);
    background: rgba(255, 255, 255, 0.06);
  }

/* ============================================================================
 * SECTION 12 — Smart-AUTO panel-head toggle + Advanced build modes accordion.
 * [2026-05-10] Settings panel restructured:
 *   - Smart-AUTO toggle moved into .studio-panel-head (next to the title pill).
 *     ON = Smart-AUTO; OFF = Manual.
 *   - One-page / RTL / DNA / DNA-archetype tucked into a <details> accordion
 *     under Template size so the Generate button stays close to the top.
 * ==========================================================================*/

  /* Panel-head right-side toggle cluster */
  .studio-panel-head .studio-head-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: var(--f-mono, ui-monospace, 'JetBrains Mono', monospace);
    font-size: 9.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2, #94a3b8);
    user-select: none;
  }
  .studio-panel-head .studio-head-toggle .lbl {
    transition: color .2s;
  }
  /* When the toggle is OFF, swap label text to "MANUAL" and dim it slightly so
     the user knows Smart-AUTO is no longer active. JS flips aria-pressed; CSS
     drives the visual + label. */
  .studio-panel-head .studio-head-toggle .toggle:not(.on) ~ .lbl,
  .studio-panel-head .studio-head-toggle:has(.toggle:not(.on)) .lbl {
    color: var(--ink-3, #64748b);
  }

  /* <details> accordion */
  .studio-acc {
    margin-top: 14px;
    border: 1px solid var(--stroke-1, rgba(255,255,255,0.08));
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
  }
  .studio-acc summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ink-1, #cbd5e1);
    transition: background .15s, color .15s;
  }
  .studio-acc summary::-webkit-details-marker { display: none; }
  .studio-acc summary::marker { content: ''; }
  .studio-acc summary:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink-0, #e2e8f0);
  }
  .studio-acc .acc-h {
    font-family: var(--f-sans);
    letter-spacing: -0.005em;
  }
  .studio-acc .acc-chev {
    width: 14px;
    height: 14px;
    transition: transform .2s ease;
  }
  .studio-acc[open] .acc-chev { transform: rotate(180deg); }
  .studio-acc .acc-body {
    padding: 4px 12px 10px;
    border-top: 1px solid var(--stroke-1, rgba(255,255,255,0.06));
  }
  .studio-acc .adv-row + .adv-row { margin-top: 8px; }

/* ============================================================================
 * SECTION 13 — Mode-aware lock (.studio-mode-locked)
 * [2026-05-10] When the Smart-AUTO toggle is ON, controls that the AI picks
 * (Stylesheet, Typography, Buttons, Sidebar, Layout) are locked. When it's
 * OFF (Manual), Industry + Tone & Voice are locked because the user picks
 * design directly. The CSS dims + blurs + blocks interaction and surfaces a
 * small badge so the user knows WHY the section is inactive.
 * ==========================================================================*/

  .studio-mode-locked {
    opacity: 0.45;
    pointer-events: none;
    filter: blur(0.4px);
    position: relative;
    transition: opacity .2s, filter .2s;
  }
  /* Badge sits at the top-right of the locked prop-group. Uses ::before so
     it does not collide with .is-soon's ::after badge. */
  .studio-mode-locked::before {
    content: attr(data-mode-lock-msg);
    position: absolute;
    top: 4px;
    right: 4px;
    font: 700 8px/1 ui-monospace, 'JetBrains Mono', monospace;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(59, 130, 246, 0.18);
    color: var(--blue-bright, #3b82f6);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    pointer-events: none;
    white-space: nowrap;
    z-index: 1;
  }
  /* Avoid double-badging when an element is both is-soon AND mode-locked
     (in that case the feature is already 'soon' — drop the mode badge). */
  .is-soon.studio-mode-locked::before { content: ''; display: none; }

/* ============================================================================
 * [2026-05-14] UI/UX audit fix #4 — sticky page-actions footer.
 *
 * The page-action triplet (New page / Clear / Delete) is relocated by
 * promotePageActions() in builder-shell-v4.js out of the Content tab
 * into this always-visible footer that sits at the bottom of
 * #studio-props-panel. Styled to feel anchored without competing for
 * attention with the canvas. The .row-action child keeps its existing
 * pillrow styling; we only frame the footer container.
 * ==========================================================================*/
  .studio-props-actions-footer {
    position: sticky;
    bottom: 0;
    margin: 0 -14px -14px;          /* extend to the panel's inner edges */
    padding: 12px 14px;
    background: linear-gradient(180deg, transparent 0, rgba(8, 11, 24, 0.55) 16%, rgba(8, 11, 24, 0.85) 100%);
    border-top: 1px solid var(--stroke-1, rgba(255,255,255,0.06));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 3;
  }
  .studio-props-actions-footer .row-action {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .studio-props-actions-footer .row-action button {
    flex: 1 1 auto;
    min-width: 0;
  }

/* ============================================================================
 * [2026-05-14] Palette intelligence chrome — chroma.js-powered.
 *
 * 1. WCAG grade badge in the top-right corner of every swatch in
 *    #studio-palette-swatches. The badge color encodes the grade
 *    (AAA green, AA blue, AA-large warm, fail red). The actual letter
 *    text is omitted on the swatch (kept in title for tooltip) so it
 *    doesn't crowd the 28×28 px chip; the colored dot is enough at
 *    swatch scale and the user gets the full ratio on hover.
 *
 * 2. .studio-palette-harmonics — the 5-dot harmonic preview row that
 *    wirePaletteIntelligence() injects under the swatches when the
 *    user has picked a primary. Each dot is the same scale as the
 *    swatches but circular to distinguish from canon choices.
 * ==========================================================================*/
  #studio-palette-swatches .swatch { position: relative; }
  #studio-palette-swatches .swatch[data-grade]::after {
    content: '';
    position: absolute;
    top: -3px; right: -3px;
    width: 8px; height: 8px;
    border-radius: 50%;
    border: 1.5px solid var(--bg-1, #0f111a);
    pointer-events: none;
  }
  #studio-palette-swatches .swatch[data-grade="AAA"]::after      { background: oklch(0.78 0.17 158); }
  #studio-palette-swatches .swatch[data-grade="AA"]::after       { background: oklch(0.74 0.16 240); }
  #studio-palette-swatches .swatch[data-grade="AA-large"]::after { background: oklch(0.82 0.15 80); }
  #studio-palette-swatches .swatch[data-grade="fail"]::after     { background: oklch(0.68 0.22 22); }

  .studio-harmonic-dot {
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .studio-harmonic-dot:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 10px -2px rgba(0,0,0,0.5);
  }

  /* ═════════════════════════════════════════════════════════════════
     [2026-05-15] Generator busy-state gate.
     Driven by body.studio-busy added/removed by builder-shell-v4.js
     wireGenStateMachine(). Locks BOTH side panels (#studio-cmd-panel
     left + #studio-props-panel right) so every chip / pill / toggle /
     select / dropdown / shortcut inside is read-only during a
     generation. Earlier per-ID list missed the niche-shortcuts row,
     the one-page / blog / RTL / DNA toggles, the build-modes accordion
     and the DNA archetype select — locking at the panel level catches
     all current + future controls without name drift.
     Exceptions punch back to pointer-events:auto for:
       • the Generate button itself (stays visible with spinner + label)
       • the right-panel tab list (so the user can keep browsing
         General / Design / Content / SEO while waiting)
     ═════════════════════════════════════════════════════════════════ */
  body.studio-busy #studio-cmd-panel,
  body.studio-busy #studio-cmd-panel *,
  body.studio-busy #studio-props-panel,
  body.studio-busy #studio-props-panel *,
  body.studio-busy #studio-page-new-v4,
  body.studio-busy #studio-page-clear-v4,
  body.studio-busy #studio-page-delete-v4,
  body.studio-busy #studio-filmstrip-handle,
  body.studio-busy #studio-bottom-dock-v4,
  body.studio-busy #studio-bottom-dock-v4 *,
  /* [2026-05-15] M7 — Top-bar action buttons that could publish, share
     or capture a half-built template if clicked mid-generation. Sign-in
     and the canvas device/preview/refresh/newtab/fullscreen controls
     are intentionally OUT of this list per prior product call. */
  body.studio-busy #studio-publish-btn,
  body.studio-busy #studio-preview-btn,
  body.studio-busy #studio-save-pill {
    pointer-events: none !important;
    cursor: wait !important;
    user-select: none !important;
  }
  body.studio-busy #studio-cmd-panel > *,
  body.studio-busy #studio-props-panel > * {
    opacity: 0.55;
  }
  /* Exceptions — these stay interactive during generation. The
     !important here matches the lock's !important so the cascade
     resolves in favour of the more-specific selector below. */
  body.studio-busy #studio-generate-v4,
  body.studio-busy #studio-generate-v4 *,
  body.studio-busy #studio-cancel-gen-v4,
  body.studio-busy #studio-cancel-gen-v4 *,
  body.studio-busy .studio-tab-list,
  body.studio-busy .studio-tab-list *,
  body.studio-busy [data-studio-tab],
  body.studio-busy [role="tab"] {
    pointer-events: auto !important;
    opacity: 1 !important;
  }
  /* The Generate button hosts a non-disabled visual state — its own
     `.is-busy` class handles cursor/opacity (see below). */
  body.studio-busy #studio-generate-v4 {
    cursor: wait !important;
  }

  /* Spinner inside the Generate button while busy. */
  .gen-btn .studio-gen-spinner,
  #studio-generate-v4 .studio-gen-spinner {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 8px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: studio-gen-spin 0.7s linear infinite;
    vertical-align: -2px;
  }
  .gen-btn.is-busy,
  #studio-generate-v4.is-busy {
    opacity: 0.85;
    cursor: wait;
  }
  @keyframes studio-gen-spin {
    to { transform: rotate(360deg); }
  }

  /* Canvas curtain — covers the preview surface during the regen
     transition so the user doesn't see the "Pick a starter" empty
     state flash between project-delete and the new render. */
  #canvas-preview,
  .studio_canvas-preview {
    position: relative;
  }
  #studio-gen-curtain {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    background: linear-gradient(135deg, rgba(10, 13, 20, 0.92), rgba(16, 22, 35, 0.92));
    backdrop-filter: blur(10px) saturate(140%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease, visibility 0s linear 180ms;
  }
  #studio-gen-curtain.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 180ms ease, visibility 0s linear 0s;
  }
  #studio-gen-curtain .studio-gen-curtain-inner {
    text-align: center;
    color: #e6e8ec;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
    padding: 24px 32px;
    max-width: 360px;
  }
  #studio-gen-curtain .studio-gen-curtain-spinner {
    width: 42px;
    height: 42px;
    margin: 0 auto 18px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: oklch(0.72 0.18 256);
    border-radius: 50%;
    animation: studio-gen-spin 0.85s linear infinite;
  }
  #studio-gen-curtain .studio-gen-curtain-label {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
  }
  #studio-gen-curtain .studio-gen-curtain-sub {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.6);
  }

  /* [2026-05-15] M9 — Cancel button inside the gen curtain. The
     body.studio-busy lock above already exempts #studio-cancel-gen-v4
     so this button stays interactive while the rest of the page is
     pointer-events:none. */
  #studio-gen-curtain .studio-gen-cancel-btn {
    margin-top: 22px;
    padding: 8px 18px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.82);
    font: 500 12.5px/1 -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
  }
  #studio-gen-curtain .studio-gen-cancel-btn:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fff;
  }

  /* ═════════════════════════════════════════════════════════════════
     [2026-05-15] M1+M2+M3+M4 — Dirty-state UI.
     Driven by body.studio-dirty added/removed by builder-shell-v4.js
     wireDirtyStateMachine(). Three surfaces:
       1) Generate button — pulse animation + "Regenerate" affordance
          so the user's eye is drawn to the apply action.
       2) Download button — visibly stale (dimmed, cursor:not-allowed,
          green "is-ready" glow suppressed). Tooltip explains why.
       3) Tiny corner STALE pill (the legacy 32×17 in the URL bar) is
          AMPLIFIED to a 60–80px chip with an icon so it's actually
          readable. Kept in-place rather than introducing a new banner
          so the existing component takes the visual responsibility.
     The dirty state only matters when there IS a generated project,
     so we scope the visible affordances to body.studio-dirty AND the
     post-gen condition (filmstrip non-empty → existing project) — the
     CSS uses :has() to detect it where supported, and falls back to
     unconditional dirty styling otherwise (still better than no signal).
     ═════════════════════════════════════════════════════════════════ */

  /* Generate button pulse — only when dirty and idle (not while busy). */
  body.studio-dirty:not(.studio-busy) #studio-generate-v4 {
    animation: studio-gen-pulse 1.6s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.55);
  }
  @keyframes studio-gen-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(96, 165, 250, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(96, 165, 250, 0); }
    100% { box-shadow: 0 0 0 0   rgba(96, 165, 250, 0); }
  }

  /* [2026-05-15] Per product call: post-gen chip clicks are "discovery",
     not destructive edits. The user has a valid generated template and
     must be able to download it at any time. We removed:
       • The Download dim/stale styling (was suggesting Download was
         unavailable after chip changes — false; the previous gen's zip
         is still valid).
       • The amplified STALE pill (was confusing — implied the project
         was broken). The legacy small badge stays in its default size.
     The internal body.studio-dirty class is still set by the state
     machine so future automation (analytics, a non-visual hint) can
     read it, but it no longer drives any user-facing visual change.
     The Generate-button pulse below remains — it's a subtle positive
     "click here to apply" affordance, not a warning. */

  /* Hide the legacy STALE pill entirely — the Generate-button pulse is
     the only stale-state surface we want the user to see. The element
     is a <span class="lbl">STALE</span> inside .studio-preview-bar
     when the bar has the .is-stale state class. We hide that single
     pill without disabling the .is-stale parent (other styles on the
     parent may legitimately reflect the state for non-visual purposes
     like screen-reader labelling). */
  .studio-preview-bar.is-stale > .lbl,
  .studio-preview-bar.is-stale .lbl {
    display: none !important;
  }

  /* [2026-05-15] Pass 1 of PayPal integration — Download-gate modal.
     The modal itself reuses the .studio-modal-bg / .studio-modal /
     .kicker / .btn / .btn-primary classes already defined in
     builder-overlay.css for the F19 sign-in modal, so we only need
     the bullet-list styling and a couple of tier-list specific tweaks
     here. The narrower 480px max-width is applied inline by the JS so
     the same DOM can be reused for any future reason codes without
     bloating this stylesheet. */
  .studio-download-gate-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 4px;
    color: var(--ink-1);
    font-size: 13px;
    display: grid;
    gap: 10px;
  }
  .studio-download-gate-bullets li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--glass-1, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--stroke-1, rgba(255, 255, 255, 0.06));
  }
  .studio-download-gate-bullets li svg {
    flex: 0 0 auto;
  }
  /* Past-due variant gets a warning accent so the user understands the
     action is recovery, not upgrade. The kicker carries the variant via
     copy ("Payment issue" vs "One more step"); the warning border lifts
     the affordance without changing the rest of the modal chrome. */
  .studio-download-gate.is-past-due .studio-modal {
    border-color: var(--warning, #f59e0b);
    box-shadow: 0 40px 100px -20px rgba(245, 158, 11, 0.18);
  }

  /* [2026-05-15] Topbar credit pill — always-visible balance affordance.
     Sits between the icon-button cluster and the Share/Publish CTAs. Looks
     like an inline chip, not a button-button, so it doesn't compete with
     the main Publish action. Hover: subtle lift. Click: opens credit modal. */
  .studio-tb-credit-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.12), rgba(167, 139, 250, 0.12));
    border: 1px solid rgba(96, 165, 250, 0.28);
    color: var(--ink-0, #f1f5f9);
    font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    cursor: pointer;
    transition: transform .14s ease, background .14s ease, border-color .14s ease;
  }
  .studio-tb-credit-pill:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.20), rgba(167, 139, 250, 0.20));
    border-color: rgba(96, 165, 250, 0.5);
  }
  .studio-tb-credit-pill:active { transform: translateY(0); }
  .studio-tb-credit-pill .ic { width: 14px; height: 14px; color: var(--blue-bright, #60a5fa); }
  .studio-tb-credit-pill.is-anon { background: rgba(255, 255, 255, 0.04); border-color: var(--stroke-1, rgba(255, 255, 255, 0.08)); color: var(--ink-1, #cbd5e1); }
  .studio-tb-credit-pill.is-anon .ic { color: var(--ink-2, #94a3b8); }
  /* Subtle pulse when balance just incremented (after a successful purchase
     OR after generation that consumed credits; reset on next interaction). */
  .studio-tb-credit-pill.just-updated {
    animation: studio-credit-bump 600ms ease;
  }
  @keyframes studio-credit-bump {
    0%, 100% { transform: scale(1); }
    35% { transform: scale(1.08); background: linear-gradient(135deg, rgba(34, 197, 94, 0.30), rgba(96, 165, 250, 0.25)); }
  }

  /* [2026-05-15] Sidebar bottom credit widget — replaces the old
     "AI CREDITS — coming soon" stub. Live count, click-to-buy. */
  .studio-credit-live {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--stroke-1, rgba(255,255,255,0.08));
    border-radius: var(--r-md, 12px);
    background: var(--glass-1, rgba(255,255,255,0.03));
    color: var(--ink-1, #cbd5e1);
    text-align: left;
    cursor: pointer;
    transition: border-color .14s, background .14s;
    font: inherit;
  }
  .studio-credit-live:hover {
    background: var(--glass-2, rgba(255,255,255,0.06));
    border-color: rgba(96, 165, 250, 0.4);
  }
  .studio-credit-live .row1 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-2, #94a3b8);
  }
  .studio-credit-live .studio-credit-num {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink-0, #f1f5f9);
    letter-spacing: -0.02em;
  }
  .studio-credit-live .row2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: var(--ink-2, #94a3b8);
  }
  .studio-credit-live .studio-credit-cta {
    color: var(--blue-bright, #60a5fa);
    font-weight: 600;
  }

  /* [2026-05-15] In-app Credit Modal (Buy/History/Account tabs).
     720px wide card, tab strip + body. Buy tab shows 4 bundle cards in a
     2x2 grid that swap into an iframe-stage when clicked. History/Account
     tabs are plain content lists. */
  .studio-credit-modal .studio-credit-card {
    width: 720px;
    max-width: 92vw;
    max-height: 88vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .studio-credit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--stroke-1, rgba(255,255,255,0.06));
    flex: 0 0 auto;
  }
  .studio-credit-tabs {
    display: flex;
    gap: 4px;
  }
  .studio-credit-tab {
    background: transparent;
    color: var(--ink-2, #94a3b8);
    border: none;
    padding: 8px 14px;
    border-radius: var(--r-md, 12px);
    font: 600 13px/1 inherit;
    cursor: pointer;
    transition: background .14s, color .14s;
  }
  .studio-credit-tab:hover { color: var(--ink-1, #cbd5e1); background: rgba(255,255,255,0.04); }
  .studio-credit-tab.is-active { color: var(--ink-0, #f1f5f9); background: rgba(96,165,250,0.16); }
  .studio-credit-body {
    /* [2026-05-17] Symmetric 22px — sits on the existing spacing
       ladder rung (4/8/12/14/16/18/22/28) and aligns with the 20px
       iframe main.container padding so the bundle grid + checkout
       iframe read as one continuous column rather than two with
       mismatched horizontal margins. Was 24px × 28px (asymmetric). */
    padding: 22px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 360px;
  }
  /* Buy tab */
  .studio-credit-buy-head h3 {
    font-size: 22px;
    margin: 0 0 6px;
    letter-spacing: -0.02em;
    color: var(--ink-0, #f1f5f9);
  }
  .studio-credit-buy-head p {
    color: var(--ink-1, #cbd5e1);
    font-size: 13px;
    margin: 0 0 22px;
  }
  .studio-credit-bundle-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 18px;
  }
  /* [2026-05-15 review fix] Stack to 1 column on phones so touch targets
     stay above the 44px minimum and bundle prices don't get squeezed into
     2 cramped columns at 375px viewport width. */
  @media (max-width: 540px) {
    .studio-credit-bundle-grid { grid-template-columns: 1fr; }
  }
  .studio-credit-bundle {
    position: relative;
    text-align: left;
    background: linear-gradient(180deg, rgba(20,25,50,0.6), rgba(8,11,24,0.6));
    border: 1px solid var(--stroke-1, rgba(255,255,255,0.08));
    border-radius: var(--r-lg, 18px);
    padding: 18px 18px 16px;
    cursor: pointer;
    color: inherit;
    transition: border-color .14s, transform .14s, box-shadow .14s;
    font: inherit;
  }
  .studio-credit-bundle:hover {
    border-color: rgba(96,165,250,0.45);
    transform: translateY(-1px);
    box-shadow: 0 14px 40px -14px rgba(96,165,250,0.18);
  }
  .studio-credit-bundle.is-popular {
    border-color: var(--blue-bright, #60a5fa);
    box-shadow: 0 0 0 1px var(--blue-bright, #60a5fa), 0 20px 60px -12px rgba(96,165,250,0.18);
  }
  .studio-credit-bundle-flag {
    position: absolute;
    top: -10px; left: 16px;
    background: linear-gradient(135deg, #60a5fa, #a78bfa);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: .06em;
  }
  .studio-credit-bundle-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2, #94a3b8);
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .studio-credit-bundle-price {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    margin-top: 6px;
    letter-spacing: -0.02em;
    color: var(--ink-0, #f1f5f9);
  }
  .studio-credit-bundle-period {
    font-size: 12px;
    color: var(--ink-2, #94a3b8);
    font-weight: 500;
    margin-left: 4px;
  }
  .studio-credit-bundle-credits {
    margin-top: 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-0, #f1f5f9);
  }
  .studio-credit-bundle-perpage {
    font-size: 12px;
    color: var(--ink-2, #94a3b8);
    margin-top: 2px;
  }
  .studio-credit-buy-foot {
    font-size: 12px;
    color: var(--ink-2, #94a3b8);
    text-align: center;
    padding-top: 6px;
  }

  /* ───────────────────────────────────────────────────────────────────
     [2026-05-17 V1 design pass] Refinements driven by the claude.ai/design
     spec generated for this project. All elements reuse existing tokens
     (--ink-*, --glass-*, --stroke-*, --grad-primary, --r-md/lg/pill,
     --f-sans). No new tokens, no new components.
     ─────────────────────────────────────────────────────────────────── */

  /* Buy-tab header: title + sub on the left, live balance pill on the right. */
  .studio-credit-buy-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
  }
  .studio-credit-buy-head-left { min-width: 0; flex: 1 1 auto; }
  .studio-credit-buy-balance {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 14px;
    background: var(--glass-2, rgba(255,255,255,0.06));
    border: 1px solid var(--stroke-1, rgba(255,255,255,0.08));
    border-radius: var(--r-pill, 999px);
    font-family: var(--f-mono, monospace);
    color: var(--ink-1, #cbd5e1);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .studio-credit-buy-balance-n {
    font-family: var(--f-sans, system-ui);
    font-size: 16px;
    font-weight: 700;
    color: var(--ink-0, #f1f5f9);
    letter-spacing: -0.01em;
    text-transform: none;
  }
  .studio-credit-buy-balance-lbl {
    font-size: 10px;
  }

  /* Bundle card head row: name + price aligned baseline. */
  .studio-credit-bundle-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }
  .studio-credit-bundle-head .studio-credit-bundle-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink-0, #f1f5f9);
    letter-spacing: -0.005em;
    text-transform: none;
  }
  .studio-credit-bundle-head .studio-credit-bundle-price {
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    margin: 0;
  }

  /* Green "+ N credits" pill. */
  .studio-credit-bundle-credits-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: oklch(0.78 0.17 158 / 0.16);
    border: 1px solid oklch(0.78 0.17 158 / 0.32);
    border-radius: var(--r-pill, 999px);
    color: oklch(0.78 0.17 158);
    font-family: var(--f-mono, monospace);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
  }

  /* Per-credit / page-downloads mono subtitle. */
  .studio-credit-bundle-meta {
    font-family: var(--f-mono, monospace);
    font-size: 11px;
    color: var(--ink-2, #94a3b8);
    letter-spacing: 0.02em;
    margin-bottom: 10px;
  }

  /* One-line bundle description. */
  .studio-credit-bundle-desc {
    font-size: 12.5px;
    color: var(--ink-1, #cbd5e1);
    line-height: 1.45;
    margin-bottom: 14px;
  }

  /* "Pick X →" CTA inside each card. Non-popular = ghost pill; popular =
     gradient primary. The whole card is still clickable; the CTA is the
     explicit visual affordance. */
  .studio-credit-bundle-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 11px 16px;
    background: var(--glass-2, rgba(255,255,255,0.06));
    border: 1px solid var(--stroke-1, rgba(255,255,255,0.10));
    border-radius: var(--r-pill, 999px);
    color: var(--ink-0, #f1f5f9);
    font-family: var(--f-sans, system-ui);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.005em;
    transition: background 0.16s, transform 0.16s, border-color 0.16s;
    margin-top: auto;
  }
  .studio-credit-bundle:hover .studio-credit-bundle-cta {
    background: var(--glass-3, rgba(255,255,255,0.08));
    border-color: var(--stroke-2, rgba(255,255,255,0.16));
  }
  .studio-credit-bundle-cta.is-popular {
    background: var(--grad-primary, linear-gradient(135deg, oklch(0.7 0.21 32), oklch(0.86 0.16 85)));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
  }
  .studio-credit-bundle:hover .studio-credit-bundle-cta.is-popular {
    transform: translateY(-1px);
    filter: brightness(1.04);
  }

  /* Card itself: stack contents top-to-bottom, push CTA to bottom edge. */
  .studio-credit-bundle {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Footer trust line. */
  .studio-credit-buy-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 0 0;
    border-top: 1px solid var(--stroke-1, rgba(255,255,255,0.06));
    margin-top: 6px;
  }
  .studio-credit-buy-foot-trust {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--f-mono, monospace);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    color: var(--ink-3, #94a3b8);
    text-transform: uppercase;
  }
  .studio-credit-buy-foot-trust .ic { width: 12px; height: 12px; }
  /* Iframe checkout stage. [2026-05-15] Removed the 480px min-height —
     the iframe now auto-resizes to fit its content via postMessage, so
     enforcing a min-height creates empty space below short checkouts.
     The spinner gets its own padding instead. */
  .studio-credit-iframe-wrap {
    display: flex;
    flex-direction: column;
  }
  .studio-credit-iframe-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
  }
  .studio-credit-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 1px solid var(--stroke-1, rgba(255,255,255,0.08));
    color: var(--ink-1, #cbd5e1);
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
  }
  .studio-credit-back:hover { background: rgba(255,255,255,0.05); }
  .studio-credit-iframe-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-1, #cbd5e1);
  }
  .studio-credit-iframe-stage {
    position: relative;
    /* [2026-05-15] Removed dark background — iframe blends seamlessly with
       the modal so any remaining content-padding doesn't look like wasted
       black-box space. min-height kept low for the loading spinner only. */
    border-radius: var(--r-md, 12px);
    overflow: hidden;
    min-height: 220px;
  }
  /* [2026-05-15 review fix] Visible focus ring on bundle cards for keyboard
     navigation — overrides the browser-default that's hard to see on dark
     glass surfaces. */
  .studio-credit-bundle:focus-visible {
    outline: 2px solid var(--blue-bright, #60a5fa);
    outline-offset: 2px;
  }
  .studio-credit-iframe-stage iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }
  .studio-credit-iframe-spinner {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-2, #94a3b8);
    font-size: 13px;
  }
  /* History tab */
  .studio-credit-history h4 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-2, #94a3b8);
    margin: 0 0 10px;
  }
  .studio-credit-history-balance {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    background: var(--glass-1, rgba(255,255,255,0.03));
    border: 1px solid var(--stroke-1, rgba(255,255,255,0.06));
    border-radius: var(--r-md, 12px);
    padding: 14px 18px;
    margin-bottom: 20px;
  }
  .studio-credit-history-balance .lbl {
    font-size: 12px;
    color: var(--ink-2, #94a3b8);
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .studio-credit-history-balance .num {
    font-size: 22px;
    font-weight: 700;
    color: var(--ink-0, #f1f5f9);
  }
  .studio-credit-list { display: flex; flex-direction: column; gap: 8px; }
  .studio-credit-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: var(--glass-1, rgba(255,255,255,0.03));
    border: 1px solid var(--stroke-1, rgba(255,255,255,0.06));
    border-radius: 10px;
  }
  .studio-credit-row-icon {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
  }
  .studio-credit-row-icon-buy {
    background: rgba(34,197,94,0.16);
    color: #22c55e;
  }
  .studio-credit-row-icon-dl {
    background: rgba(96,165,250,0.16);
    color: var(--blue-bright, #60a5fa);
  }
  .studio-credit-row-main {
    flex: 1 1 auto;
    min-width: 0;
  }
  .studio-credit-row-title {
    font-size: 13px;
    color: var(--ink-0, #f1f5f9);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .studio-credit-row-sub {
    font-size: 11px;
    color: var(--ink-2, #94a3b8);
    margin-top: 2px;
  }
  .studio-credit-row-status { text-transform: capitalize; }
  .studio-credit-row-link {
    flex: 0 0 auto;
    color: var(--blue-bright, #60a5fa);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
  }
  .studio-credit-empty-row {
    color: var(--ink-2, #94a3b8);
    font-size: 13px;
    padding: 14px 18px;
    text-align: center;
  }
  /* Account tab */
  .studio-credit-account h3 {
    font-size: 18px;
    margin: 0 0 16px;
    color: var(--ink-0, #f1f5f9);
  }
  .studio-credit-account-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--stroke-1, rgba(255,255,255,0.06));
    font-size: 13px;
  }
  .studio-credit-account-row:last-of-type { border-bottom: none; }
  .studio-credit-account-row .lbl { color: var(--ink-2, #94a3b8); }
  .studio-credit-account-row .val,
  .studio-credit-account-row a { color: var(--ink-0, #f1f5f9); text-decoration: none; }
  .studio-credit-account-row a { color: var(--blue-bright, #60a5fa); }
  .studio-credit-account-actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
  }
  /* Success state (after iframe postMessages 'studio:checkout-complete') */
  .studio-credit-success {
    text-align: center;
    padding: 32px 18px;
  }
  .studio-credit-success-icon {
    width: 64px; height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.18);
    color: #22c55e;
    display: grid; place-items: center;
  }
  .studio-credit-success-icon svg { width: 32px; height: 32px; }
  .studio-credit-success h3 {
    font-size: 22px;
    margin: 0 0 8px;
    color: var(--ink-0, #f1f5f9);
  }
  .studio-credit-success p {
    color: var(--ink-1, #cbd5e1);
    font-size: 14px;
    margin: 0 0 24px;
  }
  .studio-credit-success-actions {
    display: inline-flex;
    gap: 10px;
  }
  /* Local button replacement (avoids leaking the legacy WC .btn classes) */
  .studio-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 10px;
    border: 1px solid var(--stroke-1, rgba(255,255,255,0.1));
    background: var(--glass-2, rgba(255,255,255,0.05));
    color: var(--ink-0, #f1f5f9);
    font: 600 13px/1 inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background .14s, transform .14s;
  }
  .studio-btn:hover { background: rgba(255,255,255,0.08); }
  .studio-btn.studio-btn-primary {
    background: linear-gradient(135deg, #60a5fa, #a78bfa);
    border-color: transparent;
    color: #fff;
  }
  .studio-btn.studio-btn-primary:hover { filter: brightness(1.08); }
  .studio-credit-empty {
    text-align: center;
    padding: 24px 18px;
  }
  .studio-credit-empty h3 { color: var(--ink-0, #f1f5f9); margin: 0 0 8px; }
  .studio-credit-empty p { color: var(--ink-1, #cbd5e1); margin: 0 0 18px; font-size: 13px; }

  /* [2026-05-16] Unified auth-gate component used in the Buy / History /
     Account tab anon states. Mirrors the Auth Modal's typography and
     button stack so the visual transition from "Sign in to ..." panel
     to the actual Sign In form (when the user clicks) is seamless. */
  .studio-auth-gate {
    max-width: 360px;
    margin: 0 auto;
    padding: 12px 0 8px;
    text-align: left;
  }
  .studio-auth-gate-title {
    font-size: 22px;
    letter-spacing: -0.02em;
    color: var(--ink-0, #f1f5f9);
    margin: 0 0 6px;
    font-weight: 700;
  }
  .studio-auth-gate-sub {
    color: var(--ink-1, #cbd5e1);
    font-size: 13px;
    line-height: 1.55;
    margin: 0 0 22px;
  }
  .studio-auth-gate .studio-auth-google {
    /* inherits everything from the Auth Modal Google button; spacing the
       only override since the gate sits inside a different parent. */
    margin: 0 0 14px;
  }
  .studio-auth-gate .studio-auth-divider {
    margin: 2px 0 14px;
  }
  .studio-auth-gate-cta {
    width: 100%;
    padding: 11px 16px;
    font: 600 14px/1 inherit;
    margin: 0 0 16px;
  }
  .studio-auth-gate-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--ink-2, #94a3b8);
  }
  .studio-auth-gate-foot .studio-auth-link {
    font: 600 12.5px/1 inherit;
  }
  .studio-credit-loading {
    color: var(--ink-2, #94a3b8);
    padding: 30px;
    text-align: center;
    font-size: 13px;
  }

  /* [2026-05-15] Inline profile editor (Account tab). Lives inside the
     credit modal body and reuses the same dark-glass aesthetic as the
     bundle cards. Two-column grid for compact fields + full-width row
     for email + a dedicated password section. */
  .studio-profile-form h3 {
    margin: 0 0 4px;
    font-size: 20px;
    letter-spacing: -0.02em;
    color: var(--ink-0, #f1f5f9);
  }
  .studio-profile-sub {
    margin: 0 0 22px;
    color: var(--ink-2, #94a3b8);
    font-size: 13px;
  }
  .studio-profile-section {
    margin: 26px 0 12px;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-2, #94a3b8);
    font-weight: 600;
  }
  .studio-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  @media (max-width: 540px) { .studio-profile-grid { grid-template-columns: 1fr; } }
  .studio-profile-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .studio-profile-field-wide { grid-column: 1 / -1; }
  .studio-profile-field .lbl {
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-2, #94a3b8);
    font-weight: 600;
  }
  .studio-profile-field input {
    background: var(--glass-1, rgba(255,255,255,0.03));
    border: 1px solid var(--stroke-1, rgba(255,255,255,0.08));
    border-radius: 8px;
    padding: 9px 12px;
    color: var(--ink-0, #f1f5f9);
    font: 500 13px/1.3 inherit;
    transition: border-color .14s, background .14s;
    width: 100%;
  }
  .studio-profile-field input:focus {
    outline: none;
    border-color: var(--blue-bright, #60a5fa);
    background: rgba(255,255,255,0.05);
  }
  .studio-profile-field input:focus-visible {
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
  }
  .studio-profile-field-readonly input {
    color: var(--ink-2, #94a3b8);
    cursor: not-allowed;
  }
  .studio-profile-field .hint {
    font-size: 11px;
    color: var(--ink-2, #94a3b8);
  }
  .studio-profile-field.has-error input {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
  }
  .studio-profile-err {
    font-size: 11px;
    color: #ef4444;
    margin-top: 2px;
  }
  .studio-profile-feedback {
    margin-top: 18px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    min-height: 1px;
  }
  .studio-profile-feedback:empty { padding: 0; }
  .studio-profile-feedback.is-ok {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
  }
  .studio-profile-feedback.is-err {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.3);
  }
  .studio-profile-actions {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: space-between;
  }
  .studio-profile-actions-left {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .studio-btn-danger-ghost {
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #ef4444;
  }
  .studio-btn-danger-ghost:hover {
    background: rgba(239, 68, 68, 0.08);
  }

  /* ════════════════════════════════════════════════════════════════════
     [2026-05-15] Unified Auth Modal (Sign in / Create account / Forgot
     password). Replaces the F19 "Almost there" intermediate. Visual
     language matches the Credit Modal (same .studio-modal chrome) so
     the in-app auth feels like part of the builder, not a popup.
     ════════════════════════════════════════════════════════════════════ */
  .studio-auth-modal .studio-auth-card {
    width: 440px;
    max-width: 92vw;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .studio-auth-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--stroke-1, rgba(255,255,255,0.06));
  }
  .studio-auth-tabs { display: flex; gap: 4px; }
  .studio-auth-tab {
    background: transparent;
    color: var(--ink-2, #94a3b8);
    border: none;
    padding: 8px 14px;
    border-radius: var(--r-md, 12px);
    font: 600 13px/1 inherit;
    cursor: pointer;
    transition: background .14s, color .14s;
  }
  .studio-auth-tab:hover { color: var(--ink-1, #cbd5e1); background: rgba(255,255,255,0.04); }
  .studio-auth-tab.is-active { color: var(--ink-0, #f1f5f9); background: rgba(96,165,250,0.16); }

  .studio-auth-body { padding: 26px 28px 22px; }
  .studio-auth-form h2 {
    margin: 0 0 6px;
    font-size: 22px;
    letter-spacing: -0.02em;
    color: var(--ink-0, #f1f5f9);
  }
  .studio-auth-sub {
    margin: 0 0 22px;
    color: var(--ink-1, #cbd5e1);
    font-size: 13px;
    line-height: 1.5;
  }
  .studio-auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
  }
  .studio-auth-field .lbl {
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-2, #94a3b8);
    font-weight: 600;
  }
  .studio-auth-field .opt {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--ink-2, #94a3b8);
    margin-left: 4px;
  }
  .studio-auth-field input {
    background: var(--glass-1, rgba(255,255,255,0.03));
    border: 1px solid var(--stroke-1, rgba(255,255,255,0.08));
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--ink-0, #f1f5f9);
    font: 500 14px/1.3 inherit;
    transition: border-color .14s, background .14s, box-shadow .14s;
    width: 100%;
  }
  .studio-auth-field input:focus {
    outline: none;
    border-color: var(--blue-bright, #60a5fa);
    background: rgba(255,255,255,0.05);
  }
  .studio-auth-field input:focus-visible {
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
  }
  .studio-auth-field.has-error input {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
  }
  .studio-auth-err {
    font-size: 11px;
    color: #fca5a5;
    margin-top: 2px;
  }
  .studio-auth-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--ink-1, #cbd5e1);
    margin: 4px 0 12px;
    cursor: pointer;
    user-select: none;
  }
  .studio-auth-remember input[type=checkbox] {
    width: 14px; height: 14px;
    accent-color: var(--blue-bright, #60a5fa);
    cursor: pointer;
  }
  .studio-auth-feedback {
    margin-bottom: 12px;
    padding: 0;
    font-size: 12.5px;
    border-radius: 8px;
    min-height: 1px;
  }
  .studio-auth-feedback:empty { padding: 0; }
  .studio-auth-feedback.is-ok {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
    padding: 10px 14px;
  }
  .studio-auth-feedback.is-err {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 10px 14px;
  }
  .studio-auth-submit {
    width: 100%;
    padding: 11px 16px;
    font: 600 14px/1 inherit;
    margin-bottom: 16px;
  }
  .studio-auth-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    color: var(--ink-2, #94a3b8);
  }
  .studio-auth-foot-sep { color: var(--stroke-2, rgba(255,255,255,0.12)); }
  .studio-auth-link {
    background: transparent;
    border: none;
    color: var(--blue-bright, #60a5fa);
    font: 600 12px/1 inherit;
    cursor: pointer;
    padding: 2px 4px;
    text-decoration: none;
  }
  .studio-auth-link:hover { text-decoration: underline; }
  .studio-auth-link:focus-visible {
    outline: 2px solid var(--blue-bright, #60a5fa);
    outline-offset: 2px;
    border-radius: 4px;
  }
  @media (max-width: 480px) {
    .studio-auth-modal .studio-auth-card { width: 100%; max-width: 100%; }
    .studio-auth-body { padding: 20px 18px 16px; }
  }

  /* [2026-05-16] "Continue with Google" button + OR divider. The button
     mimics Google's branding guidelines: white surface, 18px G logo, 14px
     label. Hovers to a subtle lift. The OR divider below separates it
     from the email/password fields. */
  .studio-auth-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 11px 16px;
    margin: 0 0 16px;
    border-radius: 10px;
    border: 1px solid var(--stroke-2, rgba(255,255,255,0.14));
    background: #ffffff;
    color: #1f1f1f;
    font: 600 14px/1 inherit;
    text-decoration: none;
    cursor: pointer;
    transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
  }
  .studio-auth-google:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -6px rgba(0,0,0,0.4);
    background: #fafbff;
  }
  .studio-auth-google:focus-visible {
    outline: 2px solid var(--blue-bright, #60a5fa);
    outline-offset: 2px;
  }
  .studio-auth-google-ic { flex: 0 0 auto; }
  .studio-auth-divider {
    position: relative;
    text-align: center;
    margin: 4px 0 16px;
    font-size: 11px;
    color: var(--ink-2, #94a3b8);
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .studio-auth-divider::before,
  .studio-auth-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: calc(50% - 26px);
    height: 1px;
    background: var(--stroke-1, rgba(255,255,255,0.08));
  }
  .studio-auth-divider::before { left: 0; }
  .studio-auth-divider::after  { right: 0; }
  .studio-auth-divider span {
    background: transparent;
    padding: 0 8px;
  }
  .studio-profile-link {
    color: var(--ink-2, #94a3b8);
    text-decoration: none;
    font-size: 12px;
  }
  .studio-profile-link:hover { color: var(--blue-bright, #60a5fa); }

  /* [2026-05-15] Sidebar bottom user row: clickable user card + adjacent
     Sign Out icon. Reuses the existing .studio-sb-user styling but adds
     button affordance + a small logout icon button next to it. */
  .studio-sb-user-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
  }
  .studio-sb-user-row .studio-sb-user {
    /* [2026-05-15] min-width:0 is the critical bit — without it, a flex
       item won't shrink below its content's intrinsic min-width, so the
       email pushes the entire row wider than the sidebar (248px) and
       creates a horizontal scroll. With it, .info shrinks → .e wraps,
       row stays inside the sidebar, logout button stays put. */
    flex: 1 1 0;
    min-width: 0;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
    padding: 8px 10px;
    border-radius: 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    transition: background .14s, border-color .14s;
  }
  .studio-sb-user-row .studio-sb-user:hover {
    background: var(--glass-1, rgba(255,255,255,0.04));
    border-color: var(--stroke-1, rgba(255,255,255,0.08));
  }
  .studio-sb-user-row .studio-sb-user .av {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--grad-primary, linear-gradient(135deg,#60a5fa,#a78bfa));
    color: #fff;
    display: grid; place-items: center;
    font: 700 12px/1 inherit;
    flex: 0 0 auto;
  }
  .studio-sb-user-row .studio-sb-user .info {
    min-width: 0;
    flex: 1 1 0;
    overflow: hidden;
  }
  .studio-sb-user-row .studio-sb-user .n {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-0, #f1f5f9);
    /* Name stays single-line with ellipsis — usually short anyway. */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .studio-sb-user-row .studio-sb-user .e {
    font-size: 11px;
    color: var(--ink-2, #94a3b8);
    /* Email is allowed to WRAP to a second line (long addresses like
       e2e-walkthrough@studio.test break mid-word) so the row grows down,
       not sideways. Logout button stays aligned via align-items:flex-start
       on the parent row. */
    white-space: normal;
    word-break: break-all;
    overflow-wrap: anywhere;
    line-height: 1.35;
  }
  .studio-sb-signout {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 8px;
    border: 1px solid var(--stroke-1, rgba(255,255,255,0.08));
    color: var(--ink-2, #94a3b8);
    background: transparent;
    text-decoration: none;
    transition: background .14s, color .14s, border-color .14s;
  }
  .studio-sb-signout:hover {
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
  }
  .studio-sb-signout .ic { width: 14px; height: 14px; }
  .studio-sb-user-anon { width: 100%; }