/* ============================================================
   Silvea Builder — builder UI styles
   Cyan = library blocks and selection. Violet = custom code.
   ============================================================ */
:root{
  --chrome:#ffffff; --panel:#f6f7f9; --panel-2:#eceef2; --line:#dde0e6; --text:#1a1d24; --muted:#5f6677;
  --ice:#0a8fa3; --on-ice:#ffffff; --violet:#7c3aed; --canvas:#e6e8ec; --dot:#cdd1d8; --danger:#c93434; --ok:#15803d; --warn:#b45309;
  --code-bg:#1e1e1e; --code-side:#252526; --code-tab:#2d2d2d; --code-line:#3c3c3c; --code-text:#d4d4d4; --code-muted:#9d9d9d; --code-accent:#007acc;
  --brand-plate:#14151a;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --hl-blue:#1a62b3; --hl-cyan:#06707f; --hl-pink:#a8386a; --hl-mauve:#6a5796; --hl-purple:#7c3aed; --hl-green:#27733a;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  padding-left:env(safe-area-inset-left,0px); /* a phone on its side: clear of the notch */
  padding-right:env(safe-area-inset-right,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --chrome:#14151a; --panel:#1b1d24; --panel-2:#252831; --line:#2f333e; --text:#e7e9f0; --muted:#969cae;
    --ice:#22e0ee; --on-ice:#04282b; --violet:#b07cff; --canvas:#0e0f13; --dot:#252932; --danger:#ff7676; --ok:#4ade80; --warn:#fbbf24;
    --hl-blue:#8cc4ff; --hl-cyan:#22e0ee; --hl-pink:#e9a8c1; --hl-mauve:#b3a0d8; --hl-purple:#b58aff; --hl-green:#a6e3a9;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --chrome:#14151a; --panel:#1b1d24; --panel-2:#252831; --line:#2f333e; --text:#e7e9f0; --muted:#969cae;
  --ice:#22e0ee; --on-ice:#04282b; --violet:#b07cff; --canvas:#0e0f13; --dot:#252932; --danger:#ff7676; --ok:#4ade80; --warn:#fbbf24;
  --hl-blue:#8cc4ff; --hl-cyan:#22e0ee; --hl-pink:#e9a8c1; --hl-mauve:#b3a0d8; --hl-purple:#b58aff; --hl-green:#a6e3a9;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px);touch-action:pan-x pan-y} /* the builder never pinch or double-tap zooms on phones; its layout is already sized for them */
body{margin:0;height:100%;background:var(--chrome);color:var(--text);font:14px/1.45 "Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}
/* a text cursor only where something can be typed: browsers with caret browsing or some accessibility settings draw one on any tapped text */
:where(html){caret-color:transparent}
:where(input,textarea,[contenteditable]:not([contenteditable=false])){caret-color:auto}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
[hidden]{display:none!important}
kbd{font-family:var(--mono);font-size:11px;padding:1px 5px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;background:var(--chrome)}

/* ---------- app frame ---------- */
.app{display:grid;grid-template-rows:auto 1fr auto;height:100%}
.top{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--chrome);border-bottom:1px solid var(--line);min-height:52px;min-width:0}
.mark{display:flex;align-items:center;gap:7px;font-size:15px;white-space:nowrap;padding-right:4px}
.mark strong{font-weight:700;letter-spacing:-.01em}
.mark span{color:var(--muted);font-weight:500}
/* Silvea Technologies marks: shown at their true proportions and colors, never stretched or tinted.
   The wordmark is light, so on the light builder theme it sits on its own dark plate. */
.brand{display:inline-flex;align-items:center;gap:8px;flex:none}
.brand img{display:block;flex:none}
.brand-logo{width:26px;height:26px;object-fit:contain}
.brand-text{height:20px;width:auto}
.brand-plate{display:inline-flex;align-items:center;padding:4px var(--brand-pad,8px);border-radius:6px;background:var(--brand-plate,#14151a)}
.proj-btn{display:flex;align-items:center;gap:6px;max-width:420px;border:1px solid transparent;background:none;padding:6px 8px;border-radius:8px;cursor:pointer;color:var(--muted);font-weight:500}
.proj-btn:hover{background:var(--panel-2);color:var(--text)}
.proj-btn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-btn [data-icon]{flex:none;overflow:visible;display:inline-flex}
.proj-btn #projName{min-width:0;flex:0 1 auto}
.proj-btn .kindtag{font-size:11px;padding:1px 6px;border-radius:5px;background:var(--panel-2);color:var(--muted);flex:none}
.spacer{flex:1;min-width:8px}
/* The top bar in three parts: the project on the left, Undo, screen sizes and Preview centered, getting it out on the right.
   Both sides take equal room so the middle sits in the center; a side that needs more pushes it over instead of
   cutting the project name short, and Layout.fitTop steps everything down when the whole bar runs out of room. */
.top-l,.top-mid,.top-r{display:flex;align-items:center;gap:inherit;min-width:max-content}
.top-l,.top-r{flex:1 1 0}
.top-r{justify-content:flex-end}
.top-mid,.top-mid>*,.top-r>*{flex:none}
.grp{display:flex;gap:2px;align-items:center}
.sep{width:1px;height:22px;background:var(--line);margin:0 4px;flex:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--panel-2);padding:7px 12px;border-radius:8px;cursor:pointer;font-weight:500;white-space:nowrap;text-decoration:none;color:var(--text)}
.btn:hover{border-color:var(--muted)}
.btn:disabled{opacity:.45;cursor:default}
.btn.primary{background:var(--ice);border-color:var(--ice);color:var(--on-ice);font-weight:600}
.btn.primary:hover{filter:brightness(1.08)}
.btn.violet{background:var(--violet);border-color:var(--violet);color:#fff;font-weight:600}
.btn.danger{color:var(--danger)}
.btn.small{padding:5px 9px;font-size:12.5px}
.btn.block{width:100%}
.icon-btn{width:34px;height:34px;display:inline-grid;place-items:center;border:1px solid transparent;background:none;border-radius:8px;cursor:pointer;color:var(--text);padding:0;flex:none}
.icon-btn:hover{background:var(--panel-2)}
.icon-btn:disabled{opacity:.3;cursor:default;background:none}
.icon-btn.sm{width:26px;height:26px;border-radius:6px}
.icon-btn.active{background:var(--panel-2);color:var(--ice)}
.seg{display:inline-flex;background:var(--panel-2);border-radius:9px;padding:3px;gap:3px 2px;flex-wrap:wrap}
.seg button{border:0;background:none;padding:5px 10px;border-radius:7px;cursor:pointer;color:var(--muted);font-weight:500;font-size:13px;white-space:nowrap}
.seg button:hover{color:var(--text)}
.seg button[aria-pressed="true"]{background:var(--chrome);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.18)}
.seg.modes button[aria-pressed="true"]{color:var(--ice)}
.seg.full{display:flex}
.seg.full button{flex:1 1 auto;white-space:normal;line-height:1.2} /* a long label wraps inside its button before the row wraps */

.main{display:grid;grid-template-columns:var(--lw,var(--lw-d,284px)) minmax(0,1fr) var(--rw,var(--rw-d,332px));min-height:0}
.panel{background:var(--panel);display:flex;flex-direction:column;min-height:0;min-width:0}
.left{border-right:1px solid var(--line)}
.right{border-left:1px solid var(--line)}
.tabs{display:flex;align-items:flex-end;gap:0;padding:6px 6px 0;border-bottom:1px solid var(--line);flex:none;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button[role="tab"]{flex:1 0 auto;border:0;background:none;padding:8px 5px;cursor:pointer;color:var(--muted);font-size:13px;font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button[role="tab"]:hover{color:var(--text)}
.tabs button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--ice)}
.tabs .close{margin-left:auto;margin-bottom:4px}
.panel-body{overflow:auto;padding:12px;flex:1;min-height:0}

/* ---------- center: canvas + code dock ---------- */
.center{display:flex;flex-direction:column;min-height:0;min-width:0}
.canvas{position:relative;flex:1;min-height:0;background-color:var(--canvas);background-image:radial-gradient(var(--dot) 1px,transparent 1px);background-size:18px 18px;display:flex;flex-direction:column;align-items:center;padding:14px;gap:8px}
.frame-wrap{position:relative;flex:1;min-height:0;width:100%;transition:width .3s ease;overflow:hidden;border-radius:8px}
.frame-wrap[data-device="tablet"]{width:min(820px,100%)}
.frame-wrap[data-device="phone"]{width:414px;max-width:100%;border:12px solid #0b0c0f;border-radius:38px;box-shadow:0 16px 50px rgba(0,0,0,.3)}
#frame{width:100%;height:100%;margin-inline:auto;transform-origin:0 0;border:0;border-radius:8px;background:#fff;box-shadow:0 0 0 1px var(--line),0 14px 40px rgba(0,0,0,.16);display:block}
.frame-wrap[data-device="phone"] #frame{border-radius:26px;box-shadow:none}
.canvas-hint{margin:0;color:var(--muted);font-size:12px;text-align:center}
.canvas-empty{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;gap:8px;padding:24px;background:var(--chrome);border-radius:8px;border:1px dashed var(--line)}
.canvas-empty b{font-size:16px}
.bp-flag{flex:none;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--violet);color:#fff}

.dock{flex:none;height:42%;min-height:160px;display:flex;flex-direction:column;background:var(--code-bg);color:var(--code-text);border-top:1px solid #000}
.dock.max{height:calc(100% - 40px)}
.dock-resize{height:6px;margin-top:-3px;cursor:row-resize;flex:none;position:relative;z-index:2}
.dock-bar{display:flex;align-items:stretch;background:var(--code-side);border-bottom:1px solid #000;min-height:35px;flex:none}
.dock-title{display:flex;align-items:center;gap:8px;padding:0 12px;font-size:11px;letter-spacing:.04em;color:var(--code-muted);font-weight:600;white-space:nowrap}
.dock-tabs{display:flex;overflow-x:auto;flex:1;min-width:0}
.dock-tab{display:flex;align-items:center;gap:6px;padding:0 6px 0 12px;background:var(--code-tab);border:0;border-right:1px solid #1a1a1a;color:var(--code-muted);font:12.5px var(--mono);cursor:pointer;white-space:nowrap;height:35px}
.dock-tab.on{background:var(--code-bg);color:#fff;box-shadow:inset 0 1px 0 var(--code-accent)}
.dock-tab .x{width:20px;height:20px;display:grid;place-items:center;border-radius:4px;opacity:.6}
.dock-tab .x:hover{background:#ffffff1a;opacity:1}
.dock-tab .dot{width:7px;height:7px;border-radius:50%;background:var(--code-accent)}
.dock-acts{display:flex;align-items:center;gap:2px;padding:0 6px}
.dock-acts .icon-btn{color:var(--code-muted)}
.dock-acts .icon-btn:hover{background:#ffffff14;color:#fff}
.dock-body{flex:1;display:grid;grid-template-columns:210px minmax(0,1fr);min-height:0}
.explorer{background:var(--code-side);overflow:auto;border-right:1px solid #000;padding:6px 0;font-size:12.5px}
.explorer h4{margin:8px 12px 4px;font-size:11px;letter-spacing:.06em;color:var(--code-muted);font-weight:700}
.explorer button{display:flex;align-items:center;gap:7px;width:100%;border:0;background:none;color:var(--code-text);text-align:left;padding:3px 12px 3px 18px;cursor:pointer;font:12.5px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.explorer button:hover{background:#2a2d2e}
.explorer button.on{background:#37373d;color:#fff}
.explorer button svg{flex:none;color:var(--code-muted)}
.explorer .ro{opacity:.7}
.explorer .none{color:var(--code-muted);padding:3px 18px;font-style:italic}
.editor-host{position:relative;min-width:0;min-height:0}
.editor-host .monaco{position:absolute;inset:0}
.editor-host textarea.fallback{position:absolute;inset:0;width:100%;height:100%;border:0;resize:none;background:var(--code-bg);color:var(--code-text);font:13px/1.55 var(--mono);padding:10px 14px;tab-size:2;outline:none;white-space:pre}
.editor-empty{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:var(--code-muted);gap:6px;padding:20px}
.dock-status{display:flex;align-items:center;gap:14px;padding:0 10px;height:22px;background:var(--code-accent);color:#fff;font-size:11.5px;flex:none}
.dock-status .grow{flex:1}

/* ---------- status bar ---------- */
.status{display:flex;align-items:center;gap:16px;padding:0 12px;height:26px;border-top:1px solid var(--line);background:var(--chrome);color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden}
.status .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.status .pill{display:inline-flex;align-items:center;gap:6px}
.status .dot{width:7px;height:7px;border-radius:50%;background:var(--muted)}
.status .dot.ok{background:var(--ok)}
.st-fb{display:inline-flex;align-items:center;gap:5px;border:0;background:none;color:var(--muted);font:inherit;padding:0 2px;cursor:pointer}
.st-fb:hover{color:var(--ice)}
.st-fb[hidden]{display:none}
/* Send feedback */
.fb .seg{margin-bottom:12px}
.fb-mine{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.fb-mine .h{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.fb-mine ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fb-mine li{display:grid;gap:2px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;font-size:13px}
.fb-mine li small{color:var(--muted);font-size:11.5px}
.fb-mine li.s-planned small,.fb-mine li.s-done small{color:var(--ok)}
.fb-thanks{display:grid;justify-items:center;gap:6px;text-align:center;padding:10px 0 4px}
.fb-thanks svg{color:var(--ok)}
.fb-thanks p{margin:0;color:var(--muted);font-size:13.5px;max-width:420px}
.status .dot.off{background:var(--line)}
.status .bp{color:var(--violet);font-weight:600}

/* ---------- panels: shared bits ---------- */
.h{font-size:12px;color:var(--muted);font-weight:600;margin:18px 2px 8px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.panel-body>.h:first-child,.panel-body>:first-child>.h:first-child{margin-top:2px}
.note{color:var(--muted);font-size:12px;line-height:1.45;margin:0}
.search{position:relative;margin-bottom:10px}
.search input[type=search]{padding-left:30px}
.search svg{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}
.chip-btn{border:1px solid var(--line);background:var(--chrome);padding:3px 9px;border-radius:999px;font-size:12px;cursor:pointer;color:var(--muted)}
.chip-btn[aria-pressed="true"]{background:var(--ice);border-color:var(--ice);color:var(--on-ice)}
.lib{display:grid;gap:5px}
.lib-item{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;text-align:left;padding:7px 8px;border:1px solid var(--line);background:var(--chrome);border-radius:9px;cursor:grab;width:100%}
.lib-item:hover{border-color:var(--ice)}
.lib-item:active{cursor:grabbing}
.lib-item.code:hover{border-color:var(--violet)}
.lib-item .gl{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;background:var(--panel-2);color:var(--ice);font-weight:700;font-size:13px}
.lib-item.code .gl{color:var(--violet);font-family:var(--mono);font-size:11px}
.lib-item b{display:block;font-weight:600;font-size:13px}
.lib-item small{color:var(--muted);font-size:11.5px;line-height:1.35;display:block}
.lib-item .src{font-size:10.5px;padding:1px 6px;border-radius:5px;background:var(--panel-2);color:var(--muted)}
.lib-item{position:relative}
/* Premium during a trial: previewed, locked (SB.Account.premiumLocked) */
.lib-item.locked{cursor:pointer}
.lib-item.locked:hover{border-color:var(--violet)}
.lock-badge{position:absolute;top:9px;left:9px;z-index:2;display:inline-flex;align-items:center;gap:4px;padding:2px 7px 2px 6px;border-radius:999px;background:color-mix(in srgb,var(--violet) 88%,#000);color:#fff;font-size:10.5px;font-weight:650;letter-spacing:.02em;line-height:1.4;box-shadow:0 2px 6px rgba(0,0,0,.25);pointer-events:none}
.lib:not(.cards) .lock-badge{top:5px;left:5px;padding:3px;font-size:0;gap:0}
.lib-group{margin-bottom:6px}
.chip{font-size:11.5px;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--ice) 16%,transparent);color:var(--ice);font-weight:600;white-space:nowrap}
.chip.code{background:color-mix(in srgb,var(--violet) 18%,transparent);color:var(--violet)}
.empty-state{padding:24px 8px;text-align:center}
.empty-state b{display:block;font-size:14px;margin-bottom:4px}

/* layers tree */
.tree{list-style:none;margin:0;padding:0}
.tree ul{list-style:none;margin:0;padding:0 0 0 14px;border-left:1px solid var(--line);margin-left:9px}
.trow{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:6px;cursor:pointer;border:1px solid transparent;min-height:30px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.trow:hover{background:var(--panel-2)}
.trow.sel{background:color-mix(in srgb,var(--ice) 14%,transparent);border-color:color-mix(in srgb,var(--ice) 50%,transparent)}
.trow.code.sel{background:color-mix(in srgb,var(--violet) 14%,transparent);border-color:color-mix(in srgb,var(--violet) 50%,transparent)}
.trow .gl{width:20px;text-align:center;color:var(--ice);font-weight:700;font-size:12px;flex:none}
.trow.code .gl{color:var(--violet);font-family:var(--mono);font-size:10px}
.trow .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trow .tw{width:16px;height:16px;display:grid;place-items:center;border:0;background:none;padding:0;cursor:pointer;color:var(--muted);flex:none}
.trow .tw.none{visibility:hidden}
.trow .hid{color:var(--muted);flex:none}
.trow.drop-before{box-shadow:0 -2px 0 var(--ice)}
.trow.drop-after{box-shadow:0 2px 0 var(--ice)}
.trow.drop-in{background:color-mix(in srgb,var(--ice) 20%,transparent)}
.trow.dragging{opacity:.4}

/* screens */
.screen-row{display:flex;align-items:center;gap:6px;padding:7px 8px;border:1px solid var(--line);background:var(--chrome);border-radius:9px;margin-bottom:5px;cursor:pointer}
.screen-row.on{border-color:var(--ice);box-shadow:inset 3px 0 0 var(--ice)}
.screen-row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.screen-row code{font:11px var(--mono);color:var(--muted);display:block;overflow:hidden;text-overflow:ellipsis}

/* inspector */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:2px;margin-bottom:10px;font-size:12px}
.crumbs button{border:0;background:none;color:var(--muted);padding:2px 4px;border-radius:4px;cursor:pointer}
.crumbs button:hover{background:var(--panel-2);color:var(--text)}
.crumbs button:last-child{color:var(--text);font-weight:600}
.crumbs span{color:var(--line)}
.insp-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.insp-head input{font-weight:600}
.bp-bar{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;background:color-mix(in srgb,var(--violet) 12%,transparent);color:var(--violet);font-size:12px;font-weight:600;margin-bottom:10px}
.bp-bar.d{background:var(--panel-2);color:var(--muted);font-weight:500}
.group{border-top:1px solid var(--line);padding:10px 0 2px}
.group>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;color:var(--text);padding:2px 0 8px}
.group>summary::-webkit-details-marker{display:none}
/* What it does: the interactions of buttons, photos, cards, forms and widgets, right after Content */
.group.fx-lead{border:1px solid color-mix(in srgb,var(--ice) 35%,var(--line));border-radius:12px;margin:6px 0 10px;padding:10px 12px 4px;background:color-mix(in srgb,var(--ice) 5%,transparent)}
.group>summary::after{content:"";width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-right:4px;transition:transform .15s}
.group:not([open])>summary::after{transform:rotate(-45deg)}
.fld{display:grid;gap:5px;margin-bottom:10px;border-radius:8px;min-width:0;align-content:start}
.fld>span,.fld>label>span{font-size:12px;color:var(--muted);font-weight:500;display:flex;justify-content:space-between;align-items:center;gap:8px}
.fld .ovr{display:inline-flex;align-items:center;gap:4px;color:var(--violet);font-size:11px;font-weight:600}
.fld .ovr button{border:0;background:none;color:var(--violet);cursor:pointer;padding:0 2px;font-size:13px;line-height:1}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
input[type=text],input[type=number],input[type=url],input[type=search],input[type=password],input[type=email],input[type=tel],textarea,select{width:100%;background:var(--chrome);border:1px solid var(--line);border-radius:7px;padding:6px 8px;color:var(--text);font:inherit;min-width:0}
textarea{resize:vertical;min-height:56px;line-height:1.45}
textarea.mono,input.mono{font-family:var(--mono);font-size:12.5px}
input:focus,textarea:focus,select:focus{border-color:var(--ice);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--ice) 22%,transparent)}
input[type=range]{width:100%;accent-color:var(--ice)}
.unit{position:relative}
.unit input{padding-right:30px}
.unit em{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--muted);font-size:11.5px;pointer-events:none}
.flash{animation:flash 1.4s ease}
@keyframes flash{0%,35%{background:color-mix(in srgb,var(--ice) 20%,transparent);box-shadow:0 0 0 6px color-mix(in srgb,var(--ice) 20%,transparent)}100%{background:transparent;box-shadow:0 0 0 6px transparent}}
.switch{display:flex;align-items:center;gap:10px;cursor:pointer;margin-bottom:10px}
.switch input{appearance:none;-webkit-appearance:none;width:34px;height:20px;border-radius:999px;background:var(--line);position:relative;cursor:pointer;flex:none;margin:0}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .15s}
.switch input:checked{background:var(--ice)}
.switch input:checked::after{transform:translateX(14px)}
.swatches{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.sw{width:24px;height:24px;border-radius:6px;border:1px solid var(--line);cursor:pointer;padding:0;position:relative}
.sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--chrome),0 0 0 4px var(--ice)}
.sw.none{background:linear-gradient(135deg,transparent 45%,var(--danger) 45%,var(--danger) 55%,transparent 55%),var(--chrome)}
.colorpick{display:grid;grid-template-columns:34px 34px minmax(0,1fr) 34px;gap:6px;margin-top:6px}
button.cpick{padding:0;font:inherit}
button.cpick svg{margin:0}
button.cpick:disabled{opacity:.45;cursor:default;border-color:var(--line);color:var(--text)}
.cfav.on{color:var(--ice);border-color:var(--ice)}
.cfav.on svg{fill:currentColor}
.swatches.favs:not(:empty){margin-top:6px}
.fav-h{font-size:11px;color:var(--muted);margin-right:2px}
.cpick{position:relative;display:grid;place-items:center;width:34px;height:30px;border:1px solid var(--line);border-radius:7px;background:var(--chrome);color:var(--text);cursor:pointer;overflow:hidden;transition:border-color .15s,background .15s}
.cpick:hover{border-color:var(--ice);color:var(--ice)}
.cpick:focus-within{outline:2px solid var(--ice);outline-offset:1px}
.cpick svg{margin-bottom:4px}
.cpick i{position:absolute;left:5px;right:5px;bottom:4px;height:4px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.cpick i.none{background:linear-gradient(90deg,var(--line) 50%,transparent 50%) 0 0/6px 4px!important}
.cpick input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.img-row{display:grid;grid-template-columns:52px 1fr auto;gap:6px;align-items:center}
.img-row img{width:52px;height:38px;object-fit:cover;border-radius:6px;background:var(--panel-2);border:1px solid var(--line)}
.items{border:1px solid var(--line);border-radius:9px;padding:6px;display:grid;gap:6px}
.item{border:1px solid var(--line);border-radius:8px;padding:6px 8px 2px;background:var(--chrome)}
.item-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;font-size:11.5px;color:var(--muted)}
.item-top>span:last-child{display:flex;gap:2px}
.item-top>.item-grip+span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .fld{margin-bottom:6px}
.actions{display:flex;flex-wrap:wrap;gap:6px}
.divider{border:0;border-top:1px solid var(--line);margin:14px 0}
.card-box{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:10px;background:var(--chrome)}
.card-box h3{font-size:13px;margin:0 0 3px}
.card-box>p{margin:0 0 8px;color:var(--muted);font-size:12px}

/* theme panel */
.color-row{display:grid;grid-template-columns:32px 1fr 86px;gap:8px;align-items:center;margin-bottom:8px}
.color-row b{font-weight:600;display:block;font-size:13px}
.color-row small{color:var(--muted);font-size:11.5px}
.color-row input[type=color]{width:32px;height:32px;padding:0;border:1px solid var(--line);border-radius:8px;background:none;cursor:pointer}
.color-row input[type=text]{font-family:var(--mono);font-size:12px}
.found{display:flex;flex-wrap:wrap;gap:8px}
.found button{width:46px;display:grid;gap:3px;justify-items:center;border:0;background:none;cursor:pointer;padding:0;font-size:10px;color:var(--muted)}
.found i{width:36px;height:36px;border-radius:8px;border:1px solid var(--line);display:block}
.found button.linked i{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--ice)}
.found button.linked{color:var(--text);font-weight:600}

/* directions + templates */
.dir{display:grid;gap:6px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--chrome);cursor:pointer;text-align:left;width:100%;margin-bottom:6px}
.dir:hover{border-color:var(--ice)}
.dir.on{border-color:var(--ice);box-shadow:inset 3px 0 0 var(--ice)}
.dir-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dir b{font-size:13px}
.dir small{color:var(--muted);font-size:11.5px}
.dir-sw{display:flex;gap:3px}
.dir-sw i{width:16px;height:16px;border-radius:4px;border:1px solid rgba(0,0,0,.08)}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.tpl{display:grid;gap:6px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--chrome);cursor:pointer;text-align:left}
.tpl:hover{border-color:var(--ice)}
.tpl .tpl-sw{display:flex;height:34px;border-radius:7px;overflow:hidden}
.tpl .tpl-sw i{flex:1}
.tpl b{font-size:14px}
.tpl small{color:var(--muted);font-size:12px;line-height:1.4}
.tpl .tags{display:flex;gap:5px;flex-wrap:wrap}
.tpl .tags span{font-size:10.5px;padding:1px 6px;border-radius:5px;background:var(--panel-2);color:var(--muted)}

/* checks */
.issue{display:grid;grid-template-columns:18px 1fr;gap:8px;align-items:start;padding:8px 9px;border:1px solid var(--line);border-radius:8px;background:var(--chrome);margin-bottom:5px;cursor:pointer;text-align:left;width:100%}
.issue:hover{border-color:var(--ice)}
.issue svg{margin-top:1px}
.issue.error svg{color:var(--danger)}
.issue.warn svg{color:var(--warn)}
.issue.info svg{color:var(--muted)}
.issue b{display:block;font-size:12.5px;font-weight:600}
.issue small{display:block;color:var(--muted);font-size:11.5px;line-height:1.4}
.score{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;background:var(--chrome);border:1px solid var(--line);margin-bottom:10px}
.score b{font-size:22px}

/* AI */

/* modals */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(6,7,11,.55);padding:16px}
.launch ~ .modal{z-index:310} /* a dialog opened from the launcher or the sign-in screen shows over it */
.sheet{background:var(--panel);border:1px solid var(--line);border-radius:14px;width:min(920px,100%);max-height:calc(100% - 8px);display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.sheet.sm{width:min(460px,100%)}
.sheet-head{display:flex;align-items:center;gap:10px;padding:12px 14px 12px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.sheet-head h2{margin:0;font-size:16px;flex:1}
.sheet-body{padding:16px 18px;overflow:auto;display:grid;gap:12px;min-height:0}
.sheet-foot{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;align-items:center}
.sheet-foot .note{margin-right:auto}
.proj-list{display:grid;gap:6px}
.proj-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--chrome)}
.proj-row.on{border-color:var(--ice)}
.proj-row .grow{flex:1;min-width:0}
.proj-row b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-row small{color:var(--muted);font-size:12px}
.file-list{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-family:var(--mono);font-size:12.5px}
.file-list li{display:flex;align-items:center;gap:10px;padding:6px 8px;background:var(--chrome);border:1px solid var(--line);border-radius:7px;overflow:hidden;white-space:nowrap;min-width:0}
.file-list li>span:not(.up){flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis} /* a long name ends in … instead of scrolling the row */
.file-list li>button{flex:none}
.file-list img{width:38px;height:26px;object-fit:cover;border-radius:4px;flex:none}
.file-list .up{color:var(--ok);font-family:var(--sv-body,ui-sans-serif,system-ui,sans-serif);font-size:11px;margin-left:auto;flex:none}
textarea.code-out{min-height:min(48vh,440px);font-family:var(--mono);font-size:12.5px;white-space:pre;background:var(--chrome)}

/* preview overlay */
.preview{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;background:var(--canvas)}
.preview-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--chrome);border-bottom:1px solid var(--line);flex-wrap:wrap}
.preview-bar b{margin-right:auto}
.preview-stage{flex:1;display:flex;justify-content:center;padding:14px;min-height:0}
.preview-stage .frame-wrap{height:100%}
.preview-stage iframe{width:100%;height:100%;border:0;border-radius:8px;background:#fff;box-shadow:0 14px 40px rgba(0,0,0,.2)}

.toast{position:fixed;left:50%;bottom:calc(40px + env(safe-area-inset-bottom,0px));transform:translate(-50%,16px);opacity:0;pointer-events:none;background:var(--text);color:var(--chrome);padding:10px 16px;border-radius:10px;font-weight:500;z-index:300;transition:opacity .2s,transform .2s;max-width:min(560px,calc(100% - 32px));text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.menu-pop{position:fixed;z-index:120;min-width:260px;max-width:340px;max-height:60vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 16px 40px rgba(0,0,0,.28);padding:6px}
.menu-pop button{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;text-align:left;padding:7px 9px;border-radius:6px;cursor:pointer;font-size:13px}
.menu-pop button:hover{background:var(--panel-2)}
.menu-pop button.cur{color:var(--ice);font-weight:600}
.menu-pop button.future{color:var(--muted)}
.menu-pop small{margin-left:auto;color:var(--muted);font-size:11px}
.menu-pop h5{margin:6px 9px 4px;font-size:11px;color:var(--muted);font-weight:600}

.scrim{display:none;position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.45)}
.only-sm{display:none!important}
@media (max-width:1180px){
  .hide-md{display:none!important}
}
@media (max-width:1180px){
  .only-sm{display:inline-grid!important}
  .hide-sm{display:none!important}
  .main{grid-template-columns:minmax(0,1fr)}
  .panel{position:fixed;top:0;bottom:0;z-index:60;width:min(370px,90vw);transition:transform .25s ease;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
  .left{left:0;transform:translateX(-104%)}
  .right{right:0;transform:translateX(104%)}
  .panel.open{transform:none;box-shadow:0 0 60px rgba(0,0,0,.4)}
  .scrim.show{display:block}
  .canvas{padding:8px}
  .frame-wrap,.frame-wrap[data-device]{width:100%;border:0;border-radius:0;box-shadow:none}
  /* tablets and portrait screens with room to spare keep the phone outline, centered */
  .frame-wrap[data-device="phone"]{width:414px;max-width:100%;border:12px solid #0b0c0f;border-radius:38px;box-shadow:0 16px 50px rgba(0,0,0,.3)}
  .canvas-hint{display:none}
  .dock-body{grid-template-columns:1fr}
  .explorer{display:none}
  .top{gap:4px;padding:6px}
  .proj-btn{max-width:130px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* ============================================================
   Color-coded labels ("syntax highlighting" for the builder)
   light blue = structure / panel headings   cyan = layout + active
   light green = text content and values     pink = media
   matte purple = interactive + field labels purple = code / AI
   Turn off in Project > Builder (removes .hl from <html>).
   ============================================================ */
.k-struct{--k:var(--hl-blue)} .k-layout{--k:var(--hl-cyan)} .k-text{--k:var(--hl-green)}
.k-media{--k:var(--hl-pink)} .k-ui{--k:var(--hl-mauve)} .k-code{--k:var(--hl-purple)}
.hl .h,.hl .group>summary,.hl .card-box h3,.hl .sheet-head h2,.hl .phead b{color:var(--hl-blue)}
.hl .fld>span,.hl .fld>label>span,.hl .switch span{color:var(--hl-mauve)}
.hl .h>span,.hl .h .note{color:var(--muted)}
.hl code,.hl .screen-row code,.hl .file-list span:not(.up),.hl input.mono,.hl textarea.mono,.hl .chip:not(.code){color:var(--hl-green)}
.hl .trow .nm,.hl .lib-item b,.hl .fx-row .src,.hl .fx-row .tgt{color:var(--k,inherit)}
.hl .trow .gl,.hl .lib-item .gl{color:var(--k,var(--ice))}
.hl .trow.k-struct .nm{font-weight:600}
.hl .crumbs button:last-child{color:var(--k,var(--text))}
.hl .issue.warn b{color:var(--hl-pink)}
.hl .issue.info b{color:var(--hl-mauve)}
.hl .issue.sec b{color:var(--hl-purple)}
.hl .dir b,.hl .tpl b{color:var(--hl-blue)}
.hl .kbd-hint b{color:var(--hl-cyan)}
.hl .fld .ovr,.hl .fld .ovr button{color:var(--hl-pink)}
.legend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11.5px;font-weight:600}
.legend span{color:var(--k)}
.legend span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--k);margin-right:5px;vertical-align:0}

/* ============================================================
   Panels: minimize to a rail, pop out and move, resize width
   ============================================================ */
.phead{display:flex;align-items:center;gap:6px;padding:5px 6px 3px 8px;flex:none;min-height:32px;cursor:grab;user-select:none;touch-action:none}
.phead:active{cursor:grabbing}
.phead .grip{color:var(--muted);display:grid;place-items:center}
.phead b{font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.phead .grow{flex:1}
.phead .icon-btn{cursor:pointer}
@media (min-width:1181px){.panel{position:relative}}
.pedge{position:absolute;top:0;bottom:0;width:7px;z-index:5;cursor:col-resize}
.left .pedge{right:-4px}
.right .pedge{left:-4px}
.pedge:hover,.pedge.on{background:linear-gradient(90deg,transparent 2px,var(--ice) 2px,var(--ice) 4px,transparent 4px)}
.rail{display:none;flex-direction:column;align-items:center;gap:4px;padding:6px 0;overflow:auto;flex:1}
.rail button{writing-mode:vertical-rl;transform:rotate(180deg);border:0;background:none;color:var(--muted);padding:10px 4px;border-radius:7px;cursor:pointer;font-weight:600;font-size:12px}
.right .rail button{transform:none}
.rail button:hover,.rail button.on{background:var(--panel-2);color:var(--ice)}
@media (min-width:1181px){
  .panel.min .tabs,.panel.min .panel-body,.panel.min .pedge,.panel.min .phead b,.panel.min .phead .grip,.panel.min [data-pl=float]{display:none}
  .panel.min .rail{display:flex}
  .panel.min .phead{justify-content:center;padding:6px 0;cursor:default}
  .panel.min .phead .grow{display:none}
  .panel.float{position:fixed;z-index:70;border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.35);resize:both;overflow:hidden;min-width:240px;min-height:220px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px)}
  .panel.float .pedge{display:none}
  .panel.float.min{resize:none;min-height:0;height:auto!important;width:auto!important;min-width:0}
  .panel.float.min .rail{flex-direction:row;padding:4px}
  .panel.float.min .rail button{writing-mode:horizontal-tb;transform:none;padding:4px 8px}
  .panel.dragging{opacity:.92;transition:none}
}
@media (max-width:1180px){.phead,.pedge,.rail{display:none!important}}
.dock-hint{position:fixed;top:60px;bottom:30px;width:10px;z-index:69;background:color-mix(in srgb,var(--ice) 35%,transparent);border-radius:6px;display:none;pointer-events:none}
.dock-hint.show{display:block}

/* ============================================================
   Library: previews, favorites, categories, keyboard
   ============================================================ */
.lib-tools{display:flex;align-items:flex-start;gap:6px;margin-bottom:6px}
.lib-tools .chips{flex:1;min-width:0}
.lib-tools .grow{flex:1}
.cat-jump{position:relative;display:block;margin:2px 0 6px}
.cat-jump select{width:100%;min-width:0;appearance:none;-webkit-appearance:none;padding:6px 30px 6px 10px;font-size:12.5px;font-weight:600;color:var(--muted);background:var(--panel-2);border:1px solid transparent;border-radius:8px;cursor:pointer;text-overflow:ellipsis}
.cat-jump select:hover,.cat-jump select:focus{color:var(--text);border-color:var(--line)}
.cat-jump svg{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.cat-jump .dd{min-height:0;padding:6px 10px;font-size:12.5px;font-weight:600;color:var(--muted);background:var(--panel-2);border-color:transparent;border-radius:8px}
.cat-jump .dd:hover,.cat-jump .dd[aria-expanded="true"]{color:var(--text);border-color:var(--line)}
.cat-jump>svg:has(+ .dd-native){display:none}
.cat-jump .dd svg{position:static;transform:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
details.lib-group>summary{list-style:none;cursor:pointer}
details.lib-group>summary::-webkit-details-marker{display:none}
details.lib-group>summary.h::before{content:"";width:6px;height:6px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-right:2px;transition:transform .15s;flex:none}
details.lib-group:not([open])>summary.h::before{transform:rotate(-45deg)}
details.lib-group>summary.h{justify-content:flex-start}
details.lib-group>summary.h>span{margin-left:auto}
.cat-pin{display:inline-grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:6px;background:none;color:var(--muted);cursor:pointer;opacity:0;transition:opacity .15s}
details.lib-group>summary:hover .cat-pin,.cat-pin:focus-visible,.cat-pin.on{opacity:1}
.cat-pin:hover{background:var(--panel-2);color:var(--text)}
.cat-pin.on{color:var(--ice)}
@media (hover:none){.cat-pin{opacity:1}}
.lib.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.lib.cards .lib-item{grid-template-columns:1fr auto;grid-template-rows:auto auto;padding:5px;gap:4px 6px;align-items:start}
.lib.cards .lib-item .gl{display:none}
.lib.cards .lib-item .thumb{grid-column:1/-1}
.lib.cards .lib-item.sect{grid-column:1/-1}
.lib.cards .lib-item small{display:none}
.lib.cards .lib-item.sect small{display:block}
.lib-item .star{border:0;background:none;padding:2px;cursor:pointer;color:var(--line);display:grid;place-items:center;border-radius:5px}
.lib-item .star:hover{color:var(--muted)}
.lib-item .star.on{color:var(--hl-pink)}
.lib-item .star.on svg{fill:currentColor}
.lib-item:focus-visible{outline:2px solid var(--ice);outline-offset:1px}
.lib-item .acts{display:flex;align-items:center;gap:2px}
.thumb{position:relative;display:block;height:64px;border-radius:6px;overflow:hidden;background:#fff;border:1px solid var(--line);pointer-events:none;transition:height .25s ease}
.lib-item.sect .thumb{height:72px}
.thumb-pop{position:fixed;z-index:130;width:440px;padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.35);pointer-events:none}
.thumb-pop .thumb{height:auto;max-height:330px;border:0}
.thumb-pop b{display:block;font-size:12.5px;margin:6px 2px 0}
.thumb-pop small{display:block;color:var(--muted);font-size:11.5px;margin:0 2px}
.layer-tools{display:flex;gap:6px;margin-bottom:8px}
.layer-hit{display:block;width:100%;text-align:left;border:1px solid transparent;background:none;border-radius:7px;padding:5px 7px;cursor:pointer}
.layer-hit:hover{background:var(--panel-2)}
.layer-hit small{display:block;color:var(--muted);font-size:11px}

/* ============================================================
   Finder (Ctrl+K)
   ============================================================ */
.finder{position:fixed;inset:0;z-index:140;background:rgba(6,7,11,.45);display:flex;justify-content:center;align-items:flex-start;padding:10vh 16px 16px}
.finder-box{width:min(640px,100%);max-height:70vh;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden}
.finder-in{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.finder-in input{border:0!important;box-shadow:none!important;background:none;font-size:16px;padding:4px 0}
.finder-list{overflow:auto;padding:6px}
.finder-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;width:100%;border:0;background:none;text-align:left;padding:7px 9px;border-radius:8px;cursor:pointer;color:var(--text)}
.finder-row.on{background:var(--panel-2);box-shadow:inset 3px 0 0 var(--ice)}
.finder-row .gl{width:24px;text-align:center;font-weight:700;color:var(--k,var(--muted))}
.finder-row b{font-weight:600;color:var(--k,inherit)}
.finder-row small{color:var(--muted);font-size:11.5px;display:block}
.finder-row .tag{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:5px;background:var(--panel-2);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.finder-row .tag.go{color:var(--hl-blue)} .finder-row .tag.add{color:var(--hl-green)} .finder-row .tag.do{color:var(--hl-purple)}
.finder-foot{display:flex;gap:14px;padding:7px 12px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted)}
.find-btn{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:8px;padding:5px 9px;cursor:pointer;font-size:12.5px;white-space:nowrap}
.find-btn:hover{color:var(--text);border-color:var(--muted)}
.find-btn kbd{font-size:10.5px}

/* ============================================================
   Interactions (Functions) + Fix / Restyle (Polish)
   ============================================================ */
.fx-form{display:grid;gap:8px}
.fx-form .row2{align-items:end}
.fx-row{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center;padding:8px 9px;border:1px solid var(--line);border-radius:8px;background:var(--chrome);margin-bottom:5px;font-size:12.5px;line-height:1.5}
.fx-row .on{color:var(--hl-cyan);font-weight:700}
.fx-row .do{color:var(--hl-purple);font-weight:700}
.fx-row .val{font-family:var(--mono);color:var(--hl-green)}
.fx-row .src,.fx-row .tgt{font-weight:600}
.fx-row .bad{color:var(--danger)}
.issue{grid-template-columns:18px 1fr auto}
.issue .fix{align-self:center}
.issue.sec svg{color:var(--hl-purple)}
.fix-bar{display:grid;gap:6px;margin-top:10px}
.progress-note{font-size:12px;color:var(--hl-purple);font-weight:600;min-height:1em}
.fix-log{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:3px;font-size:12px}
.fix-log li::before{content:"✓ ";color:var(--ok);font-weight:700}
.chk{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0}
.chk label{display:flex;align-items:center;gap:6px;font-size:12.5px;cursor:pointer}
@media (max-width:480px){
  .mark strong{display:none}
  .top{gap:2px}
  .top .btn.primary{padding:7px 10px}
  .proj-btn{max-width:110px}
}

/* drag to discard (left panel) */
.discard{position:absolute;inset:6px;z-index:30;display:grid;place-items:center;text-align:center;padding:12px;border:2px dashed var(--danger);border-radius:12px;background:color-mix(in srgb,var(--danger) 10%,var(--panel));color:var(--danger);transition:background .12s}
.discard.strip{inset:auto 6px 6px 6px;height:76px}
.discard.over{background:color-mix(in srgb,var(--danger) 24%,var(--panel))}
.discard>div{display:grid;justify-items:center;gap:4px;pointer-events:none}
.discard b{font-size:14px}
.discard small{color:var(--muted);font-size:12px;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.discard.strip>div{grid-template-columns:auto auto;align-items:center;gap:2px 10px}
.discard.strip svg{grid-row:span 2}
.discard.strip b,.discard.strip small{justify-self:start}

/* margin + padding box model (Inspector) */
.bm{display:grid;gap:8px;margin-bottom:6px}
.bm-m,.bm-p{display:grid;grid-template-columns:50px minmax(0,1fr) 50px;grid-template-areas:"lbl lbl lbl" ". t ." "l mid r" ". b .";gap:4px;align-items:center;justify-items:center;padding:6px;border-radius:9px;border:1px dashed}
.bm-m{border-color:color-mix(in srgb,var(--hl-pink) 55%,transparent);background:color-mix(in srgb,var(--hl-pink) 8%,transparent)}
.bm-p{grid-area:mid;width:100%;border-color:color-mix(in srgb,var(--hl-green) 55%,transparent);background:color-mix(in srgb,var(--hl-green) 8%,var(--panel))}
.bm-lbl{grid-area:lbl;justify-self:stretch;display:flex;align-items:center;justify-content:space-between;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.bm-m>.bm-lbl{color:var(--hl-pink)}
.bm-p>.bm-lbl{color:var(--hl-green)}
.bm-link{border:1px solid transparent;background:none;color:var(--muted);border-radius:5px;width:20px;height:20px;display:grid;place-items:center;cursor:pointer;padding:0}
.bm-link:hover{border-color:var(--line)}
.bm-link.on{background:var(--ice);color:var(--on-ice)}
.bm-in{width:48px!important;padding:3px 2px!important;text-align:center;font:12px var(--mono)!important;-moz-appearance:textfield}
.bm-in::-webkit-inner-spin-button{display:none}
.bm-in.t{grid-area:t}.bm-in.b{grid-area:b}.bm-in.l{grid-area:l}.bm-in.r{grid-area:r}
.bm-in::placeholder{color:var(--muted);opacity:.8}
.bm-in.own{border-color:var(--ice);color:var(--text);font-weight:600!important}
.bm-in.inh::placeholder{color:var(--violet);opacity:1}
.bm-c{grid-area:mid;width:100%;min-height:30px;display:grid;place-items:center;border-radius:6px;background:var(--panel-2);color:var(--muted);font-size:11.5px;font-weight:600;padding:4px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bm-foot{display:flex;align-items:center;gap:8px}
.bm-foot .note{flex:1;font-size:11px}

/* top bar: segmented controls never wrap; tighten as the window narrows */
.top .seg{flex-wrap:nowrap}
/* ...and it never overflows: Layout.fitTop steps it down (fit1…fit6) until everything fits */
.top.fit1 .find-btn kbd{display:none}
.top.fit1 #previewBtn .lbl,.top.fit1 #ghBtn .lbl{display:none}
.top.fit6 #publishBtn .lbl{display:none} /* the main action keeps its word until the very last step */
.top.fit6 #publishBtn{padding:7px 10px}
.top.fit1 #previewBtn,.top.fit1 #ghBtn{padding:7px 10px}
.top.fit2 .find-btn .lbl,.top.fit2 #historyBtn{display:none}
.top.fit3 #dashBtn .lbl{display:none}
.top.fit3 #dashBtn{padding:7px 10px}
.top.fit2 .find-btn{padding:6px 8px}
.top.fit2 .seg button{padding:5px 8px}
.top.fit2 .sep{margin:0 1px}
.top.fit3 .acct-btn .lbl{display:none}
.top.fit3 .acct-btn{padding:3px}
.top.fit4 .brand-plate,.top.fit4 .proj-btn .kindtag{display:none}
.top.fit5 .find-btn,.top.fit5 #codeBtn,.top.fit5 .sep{display:none}
.top.fit6 .seg button{padding:5px 6px;font-size:12.5px}
/* the smallest phones: Export (or Publish) becomes its icon, then Redo steps aside (Undo stays), so the project name keeps room */
.top.fit7 #exportBtn .lbl,.top.fit7 #publishBtn .lbl{display:none}
.top.fit7 #exportBtn,.top.fit7 #publishBtn{padding:7px 10px}
.top.fit8 #redo,.top.fit8 .mark{display:none} /* the project button opens Projects too */
/* desktop: the project name shows whole until the last step; only then does it shorten to fit */
.top.fit8 .top-l,.top.fit8 .proj-btn{min-width:0}
@media (max-width:1180px){.proj-btn{max-width:150px}}
@media (max-width:1100px){
  .mark strong{display:none}
  .proj-btn{max-width:120px}
  .top{gap:6px}
}
@media (max-width:1060px){.top .seg button{padding:5px 6px}}
@media (max-width:1010px){.proj-btn{max-width:96px}}

/* ---------- Theme › Looks ---------- */
.looks{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.look{display:grid;gap:2px;padding:6px 6px 8px;border:1px solid var(--line);border-radius:10px;background:var(--chrome);cursor:pointer;text-align:left;color:var(--text);transition:border-color .15s,transform .15s}
.look:hover{border-color:var(--ice);transform:translateY(-1px)}
.look.on{border-color:var(--ice);box-shadow:0 0 0 1px var(--ice)}
.look b{font-size:12px;margin-top:4px}
.look small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.look-pv{position:relative;display:block;height:54px;border-radius:6px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.look-pv i{position:absolute;display:block}
.lp-bar{left:0;right:0;top:0;height:11px}
.lp-h{left:8px;top:18px;width:52%;height:6px;border-radius:2px}
.lp-t{left:8px;top:28px;width:36%;height:3px;border-radius:2px;opacity:.45}
.lp-b{left:8px;bottom:7px;width:30px;height:9px}
.lp-a{right:8px;bottom:7px;width:9px;height:9px;border-radius:50%}
/* ---------- Behaviors ---------- */
.beh{padding:9px 0;border-bottom:1px solid var(--line)}
.beh:last-child{border-bottom:0}
.beh-top{display:flex;align-items:flex-start;gap:10px;justify-content:space-between}
.beh-top b{display:block;font-size:13px}
.beh-top small{display:block;color:var(--muted);font-size:12px;line-height:1.4;margin-top:2px}
.beh-top .switch{margin:2px 0 0}
.beh-top .switch span:empty{display:none}
.beh .fld{margin-top:8px}

/* ---------- Design › Pages ---------- */
.pg-mode{margin-bottom:6px}
.pg-mode .note{margin:8px 0 0}
.pg-list{display:grid;gap:4px;margin-bottom:10px}
.pg-row{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:9px;background:var(--chrome);padding:2px 4px 2px 2px;transition:border-color .15s}
.pg-row:hover{border-color:color-mix(in srgb,var(--ice) 45%,var(--line))}
.pg-row.on{border-color:var(--ice);box-shadow:inset 3px 0 0 var(--ice)}
.pg-main{flex:1;min-width:0;display:flex;align-items:center;gap:9px;border:0;background:none;padding:7px 8px;cursor:pointer;text-align:left;color:var(--text)}
.pg-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:var(--panel-2);color:var(--muted);flex:none}
.pg-row.on .pg-ic{background:color-mix(in srgb,var(--ice) 18%,transparent);color:var(--ice)}
.pg-nm{min-width:0;display:grid}
.pg-nm b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-nm small{font-family:var(--mono);font-size:11px;color:var(--muted)}
.pg-menu{opacity:.45}
.pg-menu.on{opacity:1;color:var(--ice)}
.pg-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px}
.pg-preset{display:grid;gap:2px;text-align:left;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--chrome);cursor:pointer;color:var(--text);transition:border-color .15s,transform .15s}
.pg-preset:hover{border-color:var(--ice);transform:translateY(-1px)}
.pg-preset b{font-size:12.5px}
.pg-preset small{font-size:11px;color:var(--muted);line-height:1.35}
.pg-add{border-radius:10px;transition:box-shadow .3s}
.pg-add.flash{box-shadow:0 0 0 2px var(--ice)}
.pg-secs{display:grid;gap:3px}
.pg-sec{display:flex;align-items:center;gap:8px;justify-content:space-between;border:1px solid transparent;border-radius:7px;background:none;padding:6px 8px;cursor:pointer;text-align:left;color:var(--text);font-size:12.5px}
.pg-sec:hover{background:var(--panel-2)}
.pg-sec.on{border-color:var(--ice)}
.pg-sec span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-sec code,.pg-sec em{font-size:11px;color:var(--muted);font-style:normal;flex:none}
.menu-pop button.danger{color:var(--danger)}

/* ============================================================
   Launcher (new project)
   ============================================================ */
html.ln-open body{overflow:hidden}
html.ln-open .modal{z-index:320} /* plans and other dialogs opened from the launcher show above it */
.launch{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:clamp(12px,3vw,32px);background:rgba(8,10,14,.58);backdrop-filter:blur(4px);color:var(--text);opacity:0;transition:opacity .22s ease}
/* the new-project pop-up */
.ln-sheet{position:relative;display:flex;flex-direction:column;width:min(1120px,100%);height:min(900px,100%);background:var(--chrome);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 40px 90px -20px rgba(0,0,0,.55);transform:translateY(10px) scale(.985);transition:transform .25s ease}
.launch.in .ln-sheet{transform:none}
/* sign-in stays a full screen of its own */
.acct-gate{display:flex;flex-direction:column;place-items:initial;padding:0;background:var(--chrome);backdrop-filter:none}
.launch.in{opacity:1}
.launch.out{opacity:0;pointer-events:none}
.ln-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(900px 480px at 12% -8%,color-mix(in srgb,var(--ice) 16%,transparent),transparent 70%),radial-gradient(780px 460px at 100% 0%,color-mix(in srgb,var(--violet) 13%,transparent),transparent 70%)}
.ln-top{position:relative;display:flex;align-items:center;gap:10px;padding:16px clamp(16px,4vw,40px);flex:none}
.ln-top .mark{font-size:16px}
.ln-top .grow{flex:1}
.ln-x{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer;transition:border-color .15s,transform .15s}
.ln-x:hover{border-color:var(--muted);transform:rotate(90deg)}
.ln-stage{position:relative;flex:1;overflow:auto;padding:0 clamp(16px,4vw,40px) 56px;scroll-behavior:smooth}
.ln-step{max-width:1120px;margin:0 auto;padding-top:clamp(8px,4vh,48px);transition:opacity .26s ease,transform .26s ease}
.ln-step.enter{opacity:0;transform:translateY(10px)}
.ln-eyebrow{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ice)}
.ln-step h1{margin:0;font-size:clamp(30px,4.6vw,50px);line-height:1.05;letter-spacing:-.03em;font-weight:650;text-wrap:balance}
.ln-lead{margin:14px 0 0;max-width:620px;font-size:clamp(15px,1.6vw,17px);line-height:1.55;color:var(--muted)}
.ln-sub{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:40px 0 14px}
.ln-sub h2{margin:0;font-size:15px;font-weight:600;letter-spacing:-.01em}
.ln-count{font-size:12px;color:var(--muted);font-family:var(--mono)}
.ln-link{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:4px 0;color:var(--ice);font-weight:500;cursor:pointer;font-size:13px}
.ln-link:hover{text-decoration:underline;text-underline-offset:3px}
.ln-foot{margin:28px 0 0;text-align:center}

/* step 1: type cards */
.ln-types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,22px);margin-top:clamp(24px,4vh,40px)}
.ln-card{position:relative;display:flex;flex-direction:column;text-align:left;padding:0;border:1px solid var(--line);border-radius:20px;background:var(--panel);color:var(--text);cursor:pointer;overflow:hidden;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.ln-card:hover,.ln-card:focus-visible{transform:translateY(-3px);border-color:color-mix(in srgb,var(--ice) 70%,var(--line));box-shadow:0 22px 50px -18px rgba(0,0,0,.35),0 0 0 1px color-mix(in srgb,var(--ice) 35%,transparent)}
.ln-card:focus-visible{outline:none}
.ln-card.locked{border-style:dashed}
.ln-card.locked .ln-art{opacity:.6}
.ln-card.locked .ln-kicker{flex-wrap:wrap;row-gap:4px}
.ln-lock{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 8px;border-radius:99px;background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn);font-style:normal;font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none}
.ln-card-body{display:grid;gap:8px;padding:20px 22px 22px}
.ln-kicker{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ice)}
.ln-card b{font-size:clamp(18px,2vw,21px);font-weight:600;letter-spacing:-.015em}
.ln-card small{font-size:14px;line-height:1.55;color:var(--muted);max-width:46ch}
.ln-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.ln-chips span{font-size:11.5px;font-weight:500;padding:4px 9px;border-radius:999px;background:var(--panel-2);color:var(--muted)}
.ln-go{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:13.5px;font-weight:600;color:var(--ice)}
.ln-go svg{transition:transform .2s}
.ln-card:hover .ln-go svg{transform:translateX(3px)}

/* drawings */
.ln-art{position:relative;height:clamp(170px,22vw,230px);background:linear-gradient(160deg,color-mix(in srgb,var(--ice) 12%,var(--panel-2)),var(--panel-2) 60%);overflow:hidden;border-bottom:1px solid var(--line)}
.ln-art.app{background:linear-gradient(160deg,color-mix(in srgb,var(--violet) 14%,var(--panel-2)),var(--panel-2) 60%)}
.ln-art .la-win{position:absolute;left:9%;right:18%;top:18%;bottom:-12%;border-radius:10px 10px 0 0;background:var(--chrome);box-shadow:0 18px 40px -12px rgba(0,0,0,.35);padding:22px 14px 0;transition:transform .35s ease}
.ln-card:hover .ln-art .la-win{transform:translateY(-4px)}
.ln-art .la-dots{position:absolute;left:10px;top:8px;width:6px;height:6px;border-radius:50%;background:#ff6b5f;box-shadow:10px 0 #ffbd2e,20px 0 #28c840}
.ln-art s,.ln-art b,.ln-art em,.ln-art u{display:block;text-decoration:none;border-radius:3px}
.ln-art .la-nav{display:flex;align-items:center;gap:6px;margin-bottom:12px}
.ln-art .la-nav b{width:34px;height:7px;background:var(--text);opacity:.8;margin-right:auto}
.ln-art .la-nav s{width:18px;height:4px;background:var(--muted);opacity:.5}
.ln-art .la-nav em{width:24px;height:9px;background:var(--ice);border-radius:4px}
.ln-art .la-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:10px;align-items:center;margin-bottom:10px}
.ln-art .la-hero s{height:6px;background:var(--text);opacity:.75;margin-bottom:5px}
.ln-art .la-hero .la-l1{width:90%}.ln-art .la-hero .la-l2{width:70%}.ln-art .la-hero .la-l3{width:55%;height:4px;opacity:.35}
.ln-art .la-hero em{width:36px;height:10px;background:var(--ice);margin-top:8px;border-radius:4px}
.ln-art .la-hero u{height:56px;background:color-mix(in srgb,var(--ice) 22%,var(--panel-2))}
.ln-art .la-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.ln-art .la-cards u{height:30px;background:var(--panel-2)}
.ln-art .la-win.la-phone{left:auto;right:6%;width:21%;top:30%;bottom:-10%;padding:10px 7px;border-radius:12px 12px 0 0;border:3px solid var(--chrome);background:var(--chrome)}
.ln-art .la-phone .la-nav{margin-bottom:10px}
.ln-art .la-phone .la-nav b{width:22px;height:5px}
.ln-art .la-burger{width:10px;height:7px;border-top:2px solid var(--text);border-bottom:2px solid var(--text);position:relative;opacity:.7}
.ln-art .la-phone .la-l1{height:5px;width:90%;background:var(--text);opacity:.7;margin-bottom:4px}
.ln-art .la-phone .la-l2{height:5px;width:65%;background:var(--text);opacity:.7}
.ln-art .la-phone em{width:60%;height:8px;background:var(--ice);margin:8px 0;border-radius:3px}
.ln-art .la-phone u{height:34px;background:color-mix(in srgb,var(--ice) 22%,var(--panel-2))}
.ln-art.app .la-win{right:9%;padding:22px 0 0}
.ln-art .la-appw{display:grid;grid-template-columns:24%;grid-template-columns:24% 1fr;height:100%}
.ln-art .la-side{border-right:1px solid var(--line);padding:4px 10px;display:grid;align-content:start;gap:9px}
.ln-art .la-side b{width:60%;height:7px;background:var(--text);opacity:.8;margin-bottom:6px}
.ln-art .la-side s{height:6px;background:var(--muted);opacity:.35}
.ln-art .la-side s.la-on{background:var(--violet);opacity:.9}
.ln-art .la-main{padding:4px 14px}
.ln-art .la-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.ln-art .la-bar s{width:40%;height:8px;background:var(--text);opacity:.75}
.ln-art .la-bar em{width:30px;height:10px;background:var(--violet);border-radius:4px}
.ln-art .la-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:12px}
.ln-art .la-tiles u{height:32px;background:var(--panel-2)}
.ln-art .la-tiles u:first-child{background:color-mix(in srgb,var(--violet) 20%,var(--panel-2))}
.ln-art .la-rows{display:grid;gap:7px}
.ln-art .la-rows s{height:9px;background:var(--panel-2)}

/* recent projects */
.ln-rec-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.ln-rec{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);text-align:left;cursor:pointer;min-width:0;transition:border-color .15s,transform .15s}
.ln-rec:hover,.ln-rec:focus-visible{border-color:color-mix(in srgb,var(--ice) 60%,var(--line));transform:translateY(-1px);outline:none}
.ln-rec-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--panel-2);color:var(--muted);flex:none}
.ln-rec span:last-child{display:grid;min-width:0}
.ln-rec b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ln-rec small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* step 2 */
.ln-back{display:inline-flex;align-items:center;gap:6px;margin:0 0 18px -6px;padding:6px 10px 6px 6px;border:0;border-radius:999px;background:none;color:var(--muted);font-weight:500;cursor:pointer;font-size:13px;transition:background .15s,color .15s}
.ln-back:hover{background:var(--panel-2);color:var(--text)}
.ln-name{display:grid;gap:8px;max-width:560px;margin-top:28px}
.ln-name span{font-size:13px;font-weight:600}
.ln-name input{font:inherit;font-size:18px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--panel);color:var(--text);transition:border-color .15s,box-shadow .15s}
.ln-name input:focus{outline:none;border-color:var(--ice);box-shadow:0 0 0 4px color-mix(in srgb,var(--ice) 18%,transparent)}
.ln-name small{font-size:12.5px;color:var(--muted)}
.ln-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:clamp(12px,1.6vw,18px)}
.ln-grid.blanks{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.ln-tpl.blank .ln-pv{aspect-ratio:16/7}
.ln-tpl{position:relative;display:flex;flex-direction:column;padding:0;text-align:left;border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--text);cursor:pointer;overflow:hidden;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.ln-tpl:hover,.ln-tpl:focus-visible{transform:translateY(-3px);border-color:color-mix(in srgb,var(--ice) 70%,var(--line));box-shadow:0 20px 44px -18px rgba(0,0,0,.35);outline:none}
.ln-tpl.busy{pointer-events:none;opacity:.7}
.ln-tpl.busy::after{content:"";position:absolute;right:14px;top:14px;width:18px;height:18px;border-radius:50%;border:2px solid var(--ice);border-right-color:transparent;animation:ln-spin .7s linear infinite}
@keyframes ln-spin{to{transform:rotate(360deg)}}
.ln-pv{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--panel-2);border-bottom:1px solid var(--line)}
.ln-pv iframe{position:absolute;left:0;top:0;width:1280px;height:800px;border:0;transform-origin:0 0;pointer-events:none;opacity:0;transition:opacity .35s ease}
.ln-pv.ready iframe{opacity:1}
.ln-pv-load{position:absolute;inset:0;opacity:.6}
.ln-pv-load::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);background-size:200% 100%;animation:ln-shine 1.3s linear infinite}
.ln-pv.ready .ln-pv-load{display:none}
@keyframes ln-shine{from{background-position:120% 0}to{background-position:-80% 0}}
.ln-tpl-body{display:grid;gap:6px;padding:14px 16px 16px}
.ln-tpl b{font-size:15px;font-weight:600;letter-spacing:-.01em}
.ln-tpl small{font-size:13px;line-height:1.5;color:var(--muted)}
.ln-meta{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:12px;color:var(--muted)}
.ln-sw{display:flex}
.ln-sw i{width:14px;height:14px;border-radius:50%;border:2px solid var(--panel);margin-right:-5px}
.ln-sw i:last-child{margin-right:4px}
.ln-use{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--ice);color:var(--on-ice);font-size:12.5px;font-weight:600;opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.ln-tpl:hover .ln-use,.ln-tpl:focus-visible .ln-use{opacity:1;transform:none}
.ln-pv-blank{display:grid;place-items:center;background:repeating-linear-gradient(0deg,transparent,transparent 19px,color-mix(in srgb,var(--line) 70%,transparent) 19px,color-mix(in srgb,var(--line) 70%,transparent) 20px),repeating-linear-gradient(90deg,transparent,transparent 19px,color-mix(in srgb,var(--line) 70%,transparent) 19px,color-mix(in srgb,var(--line) 70%,transparent) 20px),var(--panel-2)}
.ln-pv-blank span{display:flex;gap:10px}
.ln-pv-blank i{display:block;width:62px;height:84px;border-radius:8px;background:var(--chrome);border:1.5px dashed color-mix(in srgb,var(--ice) 60%,var(--line));box-shadow:0 10px 24px -10px rgba(0,0,0,.3);position:relative}
.ln-pv-blank i::before{content:"+";position:absolute;inset:0;display:grid;place-items:center;color:var(--ice);font-size:22px;font-weight:300}
.ba-one i{width:84px;height:110px}
.ba-multi i{width:46px;height:64px}
.ba-multi i+i::before,.ba-app i+i::before{content:""}
.ln-empty{grid-column:1/-1;color:var(--muted)}
@media (max-width:720px){.ln-types{grid-template-columns:1fr}.ln-art{height:160px}.ln-sub{margin-top:30px}}
/* step 3: set it up */
.ln-setup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);margin-top:8px}
.ln-setup .ln-name{margin-top:20px;max-width:none}
.ln-setup .ln-brief{max-width:none}
.ln-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;margin-top:16px}
.ln-fields .fld:first-child{grid-column:1/-1}
.ln-fields input{padding:9px 11px;border-radius:9px}
.ln-sub.tight{margin:20px 0 10px}
.ln-looks{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.ln-look{display:grid;gap:6px;padding:9px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);cursor:pointer;text-align:left;font-size:12.5px}
.ln-look b{font-weight:600}
.ln-look[aria-checked="true"]{border-color:var(--ice);box-shadow:0 0 0 1px var(--ice)}
.ln-look-sw{display:flex;height:22px;border-radius:6px;overflow:hidden}
.ln-look-sw i{flex:1}
.ln-look-own{align-items:center;justify-content:center;background:var(--panel-2);color:var(--ice)}
.ln-pages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ln-page{display:flex;gap:9px;align-items:flex-start;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--panel);cursor:pointer}
.ln-page input{margin-top:3px;accent-color:var(--ice)}
.ln-page span{display:grid;gap:2px;min-width:0}
.ln-page b{font-size:13px;font-weight:600}
.ln-page small{font-size:12px;color:var(--muted);line-height:1.4}
.ln-page:has(input:checked){border-color:var(--ice)}
.ln-actions{position:sticky;bottom:0;display:flex;align-items:center;justify-content:flex-end;gap:12px;margin:28px calc(-1 * clamp(16px,4vw,40px)) 0;padding:14px clamp(16px,4vw,40px) calc(14px + env(safe-area-inset-bottom,0px));background:var(--chrome);border-top:1px solid var(--line);box-shadow:0 -10px 24px -18px rgba(0,0,0,.5);z-index:2} /* a solid footer pinned to the bottom, so the page list never shows behind Create */
.ln-err{flex:1;color:var(--warn);font-size:13px}
.ln-create{padding:11px 20px;font-size:15px;border-radius:11px}
.ln-create.busy{opacity:.7;pointer-events:none}
@media (max-width:820px){.ln-setup,.ln-pages{grid-template-columns:1fr}}
@media (max-width:600px){
  .launch:not(.acct-gate){padding:0}
  .ln-sheet{width:100%;height:100%;border-radius:0;border:0}
  .ln-fields{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.launch,.ln-step,.ln-card,.ln-tpl,.ln-art .win,.ln-pv iframe{transition:none}.ln-pv-load::after,.ln-tpl.busy::after{animation:none}}

/* Projects dialog: new project button */
.new-proj{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;margin-bottom:16px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(120deg,color-mix(in srgb,var(--ice) 12%,var(--panel)),var(--panel));color:var(--text);text-align:left;cursor:pointer;transition:border-color .15s,transform .15s}
.new-proj:hover{border-color:var(--ice);transform:translateY(-1px)}
.new-proj>span:nth-child(2){display:grid;flex:1}
.new-proj b{font-size:15px}
.new-proj small{color:var(--muted);font-size:12.5px}
.np-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--ice);color:var(--on-ice);flex:none}

/* ---------- Saved to the account (js/ui/cloud.js) ---------- */
.cloud-ask p,.cloud-offer p{margin:0 0 10px;line-height:1.5}
.cloud-offer ul{margin:0 0 12px;padding-left:20px;line-height:1.6}
.cloud-pick{display:grid;gap:10px}
.cloud-opt{display:grid;gap:3px;width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);text-align:left;cursor:pointer;font:inherit;transition:border-color .15s}
.cloud-opt:hover,.cloud-opt:focus-visible{border-color:var(--ice)}
.cloud-opt b{display:flex;align-items:center;gap:8px;font-size:14px}
.cloud-opt small{color:var(--muted);font-size:12.5px}

/* ---------- Polish › Publish check ---------- */
.pc-head{display:flex;align-items:center;gap:14px;padding:4px 0 12px}
.pc-head b{display:block;font-size:17px;font-weight:650;letter-spacing:-.01em}
.pc-head small{display:block;color:var(--muted);font-size:12px;line-height:1.45;margin-top:2px}
.pc-head.ready b{color:var(--ok)}
.pc-head.almost b{color:var(--warn)}
.pc-head.not b{color:var(--danger)}
.pc-ring{flex:none;color:var(--text)}
.pc-wait{display:block;width:56px;height:56px;margin:4px;border-radius:50%;border:6px solid var(--line);border-top-color:var(--ice);animation:ln-spin .9s linear infinite}
.fix-done{margin-top:8px;font-size:12.5px}
.fix-done summary{cursor:pointer;color:var(--ok);font-weight:600;display:flex;align-items:center;gap:6px;list-style:none}
.fix-done summary::-webkit-details-marker{display:none}
.pc-list{list-style:none;margin:6px 0 12px;padding:10px;display:grid;gap:2px;border:1px solid var(--line);border-radius:10px;background:var(--chrome)}
.pc-list li{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:6px;font-size:12.5px}
.pc-list li svg{flex:none}
.pc-list li span{flex:1}
.pc-list li.ok{color:var(--muted)}
.pc-list li.ok svg{color:var(--ok)}
.pc-list li.bad svg{color:var(--danger)}
.pc-list li.meh svg{color:var(--warn)}
.pc-list li:not(.ok){cursor:pointer;font-weight:500}
.pc-list li:not(.ok):hover{background:var(--panel-2)}
.pc-list em{font-style:normal;font-size:11px;font-weight:700;min-width:20px;padding:1px 6px;border-radius:999px;text-align:center;background:var(--panel-2)}
.pc-list li.bad em{background:color-mix(in srgb,var(--danger) 16%,transparent);color:var(--danger)}
.pc-ready{display:grid;gap:8px;justify-items:start;padding:12px;margin-bottom:12px;border-radius:10px;border:1px solid color-mix(in srgb,var(--ok) 40%,var(--line));background:color-mix(in srgb,var(--ok) 8%,var(--chrome))}
.pc-ready b{display:flex;align-items:center;gap:6px;color:var(--ok)}
.pc-ready span{font-size:12.5px;color:var(--muted)}
.pc-cat>summary span:first-child{display:inline-flex;align-items:center;gap:7px}
.pc-counts{display:inline-flex;gap:4px;margin-left:auto;margin-right:8px}
.pc-counts i{font-style:normal;font-size:10.5px;font-weight:700;min-width:18px;padding:1px 5px;border-radius:999px;text-align:center}
.pc-counts .e{background:color-mix(in srgb,var(--danger) 18%,transparent);color:var(--danger)}
.pc-counts .w{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.pc-counts .n{background:var(--panel-2);color:var(--muted)}
.issue.flash{box-shadow:0 0 0 2px var(--ice)}

/* ---------- left panel: sticky search, back to top ---------- */
.panel-body>.stick{position:sticky;top:-12px;z-index:5;margin:-12px -12px 6px;padding:12px 12px 4px;background:var(--panel);border-bottom:1px solid transparent;transition:border-color .15s,box-shadow .15s}
.panel-body>.stick.stuck{border-bottom-color:var(--line);box-shadow:0 6px 12px -8px rgba(0,0,0,.25)}
.panel-body>.layer-tools.stick{padding-bottom:8px;margin-bottom:8px}
.to-top{position:absolute;right:14px;bottom:14px;z-index:6;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--chrome);color:var(--text);box-shadow:0 6px 18px rgba(0,0,0,.25);cursor:pointer;animation:to-top-in .18s ease}
.to-top:hover{border-color:var(--ice);color:var(--ice)}
@keyframes to-top-in{from{opacity:0;transform:translateY(6px)}}
.panel.min .to-top{display:none}
@media (prefers-reduced-motion:reduce){.to-top{animation:none}}

/* ---------- Scripts mode ---------- */
.sc-intro{padding:12px;margin-bottom:6px;border-radius:10px;border:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb,var(--violet) 10%,var(--chrome)),var(--chrome))}
.sc-intro b{font-size:13.5px}
.sc-intro p{margin:4px 0 0;color:var(--muted);font-size:12.5px;line-height:1.5}
.sc-files{margin-bottom:6px}
.sc-steps{margin:0 0 8px;padding-left:18px;display:grid;gap:6px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.sc-steps b,.sc-steps kbd{color:var(--text)}
.sc-recipes{display:grid;gap:6px;margin-bottom:6px}
.sc-recipe{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--chrome)}
.sc-recipe>div{display:grid;gap:2px;min-width:0}
.sc-recipe b{font-size:12.5px}
.sc-recipe small{font-size:11.5px;color:var(--muted);line-height:1.4}
.sc-recipe em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--violet)}
.sc-recipe .btn{flex:none}
/* Inspector › Interactions */
.fx>.note{margin:0 0 8px}
.fx-list{margin-bottom:8px}
.fx-row b{font-weight:600;color:var(--text)}
.fx-row code{font-size:11px}
.fx-acts{display:flex}
.fx-form{padding:10px;border:1px solid var(--line);border-radius:9px;background:var(--chrome)}
.fx-form .actions{justify-content:flex-end;margin:2px 0 0}
.fx-pick{flex:none}
.fx-card{border:1px solid var(--line);border-radius:9px;background:var(--chrome);margin-bottom:6px;min-width:0}
.fx-card.open{border-color:color-mix(in srgb,var(--ice) 45%,var(--line))}
.fx-sum{display:flex;width:100%;gap:8px;align-items:flex-start;justify-content:space-between;text-align:left;border:0;background:none;color:var(--muted);font:inherit;font-size:12.5px;line-height:1.5;padding:9px 10px;cursor:pointer}
.fx-sum>span{min-width:0;overflow-wrap:anywhere}
.fx-sum svg{flex:none;margin-top:3px}
.fx-sum b{color:var(--text);font-weight:600}
.fx-sum .on{color:var(--hl-cyan,var(--ice));font-weight:700}
.fx-sum .fx-if{color:var(--violet,var(--muted))}
.fx-sum code{font-size:11px}
.fx-body{display:grid;gap:12px;padding:2px 10px 10px;border-top:1px solid var(--line)}
.fx-sec{display:grid;gap:6px;min-width:0}
.fx-sec>.btn{justify-self:start}
.fx-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:8px}
.fx-h small{text-transform:none;letter-spacing:0;font-family:inherit}
.fx-row2{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.fx-row2:has(.fx-f:nth-child(2)){grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.fx-f{min-width:0}
.fx-f select,.fx-f input,.fx-f textarea{width:100%;min-width:0}
.fx-steps{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fx-step{border:1px solid var(--line);border-radius:8px;background:var(--panel,var(--bg));padding:7px;display:grid;gap:6px;min-width:0}
.fx-step-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px;align-items:center}
.fx-step-h select{min-width:0;width:100%;grid-column:1/-1;grid-row:2}
.fx-step-acts{grid-column:3}
.fx-n{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,var(--ice) 18%,transparent);color:var(--text);font:600 11px var(--mono)}
.fx-step-acts{display:flex}
.fx-step-b{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.fx-step-b:empty{display:none}
.fx-step-b .wide,.fx-step-b .fx-hint{grid-column:1/-1}
.fx-step-b .fx-f:only-child{grid-column:1/-1}
.fx-hint{margin:0;font-size:11.5px}
.fx-pickrow{display:flex;gap:4px;min-width:0}
.fx-pickrow select{flex:1;min-width:0}
.fx-addstep{justify-self:start}
.fx-cond{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.fx-cond select,.fx-cond input{flex:1 1 100px;min-width:0}
.fx-f .dd,.fx-cond .dd{font-size:13px}
/* the builder's own dropdowns (U.dropdown in util.js, every select in the builder and dashboard): the select stays
   underneath, hidden; where a select had a look or size of its own, `that select + .dd` gets it too */
.dd-native{display:none!important}
.dd{display:flex;align-items:center;gap:8px;width:100%;min-width:0;min-height:32px;padding:6px 9px 6px 10px;background:var(--chrome);border:1px solid var(--line);border-radius:7px;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.dd[hidden]{display:none!important}
.dd:hover{border-color:color-mix(in srgb,var(--ice) 55%,var(--line))}
.dd:focus-visible,.dd[aria-expanded="true"]{border-color:var(--ice);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--ice) 22%,transparent)}
.dd:disabled{opacity:.55;cursor:default}
.dd-v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-v.dd-ph{color:var(--muted)}
.dd svg{flex:none;color:var(--muted);transition:transform .15s}
.dd[aria-expanded="true"] svg{transform:rotate(180deg);color:var(--ice)}
.fx-f .dd{width:100%}
.fx-step-h .dd{grid-column:1/-1;grid-row:2}
.fx-pickrow .dd{flex:1}
.fx-cond .dd{flex:1 1 100px;width:auto}
.menu-pop.dd-pop{z-index:500;min-width:0;max-width:none;padding:5px;display:flex;flex-direction:column;overflow:hidden}
.dd-pop .dd-list{overflow:auto;min-height:0;flex:1;overscroll-behavior:contain}
.dd-pop .dd-find{flex:none;margin:0 0 5px}
.dd-pop .dd-list button{justify-content:space-between;padding:7px 9px;font-size:13px}
.dd-pop .dd-list button>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-pop .dd-list button.on{background:var(--panel-2)}
.dd-pop .dd-list button.dd-ph{color:var(--muted)}
.dd-pop .dd-list button svg{flex:none;color:var(--ice)}
.dd-pop h5{margin:8px 9px 3px}
.dd-pop h5:first-child{margin-top:3px}
.dd-empty{margin:8px 9px;color:var(--muted);font-size:12.5px}
@media (prefers-reduced-motion:reduce){.dd,.dd svg{transition:none}}
.fx-foot{justify-content:flex-end;flex-wrap:wrap;margin:0}
.fx-new{display:grid;gap:8px}
.fx-new>.btn{justify-self:start}
.fx-recipes summary{cursor:pointer;font-size:12px;color:var(--muted)}
.fx-recipes .chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.fx-vars,.fx-all{display:grid;gap:6px}
.fx-vars>.btn{justify-self:start}
.fx-var{display:grid;grid-template-columns:minmax(60px,auto) minmax(0,1fr) auto auto;gap:6px;align-items:center}
.fx-var code{font-size:12px;overflow-wrap:anywhere}
.fx-var .fld{margin:0}
.fx-all .fx-row{width:100%;text-align:left;cursor:pointer;color:var(--muted);font:inherit;font-size:12px}
.fx-all .fx-row small{color:var(--muted);font-family:var(--mono);font-size:10px;white-space:nowrap}
@media (max-width:600px){.fx-step-b{grid-template-columns:minmax(0,1fr)}.fx-var{grid-template-columns:minmax(0,1fr) auto auto}.fx-var code{grid-column:1/-1}}

/* Add tab: category jump + previews switch */
.lib-row2{display:flex;gap:6px;align-items:stretch;margin:2px 0 6px}
.lib-row2 .cat-jump{flex:1;min-width:0;margin:0}
.pv-tog{flex:none;display:inline-flex;align-items:center;gap:5px;padding:0 10px;border-radius:8px;border:1px solid var(--line);background:none;color:var(--muted);font-size:12px;font-weight:600;cursor:pointer}
.pv-tog:hover{color:var(--text);border-color:var(--muted)}
.pv-tog.on{color:var(--ice);border-color:color-mix(in srgb,var(--ice) 45%,var(--line));background:color-mix(in srgb,var(--ice) 10%,transparent)}
.lib-row2 .cat-jump[hidden]+.pv-tog{margin-left:auto}
.pv-off{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:8px 10px;margin-bottom:8px;border-radius:8px;border:1px dashed var(--line);color:var(--muted);font-size:12px}
.pv-off .ln-link{font-size:12px;padding:0}

/* ============================================================
   Phones, tablets and narrow windows (1180px and below, SB.U.COMPACT)
   ============================================================ */
.mbar{display:none}
#rightTabs [data-tab="layers"]{display:none} /* wide screens keep Layers in the left panel */
@media (max-width:1180px){
  #rightTabs [data-tab="layers"]{display:block}
  :root{--mbar-h:calc(58px + env(safe-area-inset-bottom,0px))}
  .status{display:none}
  #openLeft,#openRight{display:none!important}
  .mbar{display:flex;position:relative;z-index:65;height:var(--mbar-h);padding:0 4px env(safe-area-inset-bottom,0px);background:var(--chrome);border-top:1px solid var(--line)}
  .mbar button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:none;color:var(--muted);font-size:11px;font-weight:600;cursor:pointer;min-width:0;border-radius:10px;margin:5px 2px;-webkit-tap-highlight-color:transparent}
  .mbar button[aria-pressed="true"]{color:var(--ice);background:color-mix(in srgb,var(--ice) 12%,transparent)}
  .mbar button:active{transform:scale(.96)}
  /* Add, Layers, Edit and Publish open as bottom sheets above the bar, like More, and scroll inside */
  .panel{top:auto;left:0;right:0;bottom:var(--mbar-h);width:auto;height:min(72vh,calc(100% - var(--mbar-h) - 56px));height:min(72dvh,calc(100dvh - var(--mbar-h) - 56px));padding:0;border:1px solid var(--line);border-bottom:0;border-radius:18px 18px 0 0;overflow:hidden;transform:translateY(calc(100% + var(--mbar-h) + 20px));transition:transform .26s cubic-bezier(.2,.8,.2,1)}
  .left,.right{transform:translateY(calc(100% + var(--mbar-h) + 20px))}
  .panel.open{transform:none;box-shadow:0 -20px 50px rgba(0,0,0,.3)}
  /* The Edit sheet opens half height (Panels.drawer adds .peek) and the canvas shrinks to the space above it */
  :root{--peek-h:min(46vh,calc(100vh - var(--mbar-h) - 56px))}
  @supports (height:1dvh){:root{--peek-h:min(46dvh,calc(100dvh - var(--mbar-h) - 56px))}}
  .right.open{transition:transform .26s cubic-bezier(.2,.8,.2,1),height .26s cubic-bezier(.2,.8,.2,1)}
  .right.peek{height:var(--peek-h)}
  .panel.tall{height:calc(100vh - var(--mbar-h) - 12px);height:calc(100dvh - var(--mbar-h) - 12px)}
  .left.open{transition:transform .26s cubic-bezier(.2,.8,.2,1),height .26s cubic-bezier(.2,.8,.2,1)}
  html.edit-peek .canvas{padding-bottom:calc(var(--peek-h) + 8px)}
  html.edit-peek .canvas-hint{display:none}
  /* The on-screen keyboard is up (Layout sets html.kb, --kb its height, --vvh the space left): sheets,
     the More sheet, dialogs and toasts sit on top of it instead of behind it */
  html.kb .panel.open{bottom:var(--kb);max-height:calc(var(--vvh) - 12px)}
  html.kb .ms-body{margin-bottom:var(--kb);max-height:calc(var(--vvh) - 24px)}
  html.kb .ms-scrim{bottom:0}
  html.kb .modal{padding-bottom:calc(var(--kb) + 10px)}
  html.kb .modal .sheet{max-height:calc(var(--vvh) - 20px)}
  html.kb .toast{bottom:calc(var(--kb) + 12px)}
  /* lists with a height of their own: the space above the keyboard, not the whole screen */
  html.kb .finder{padding-top:12px}
  html.kb .finder-box{max-height:calc(var(--vvh) - 24px)}
  html.kb .app-scroll{max-height:calc(var(--vvh) * .5)}
  html.kb .menu-pop{max-height:calc(var(--vvh) - 24px)}
  /* the Test mode ribbon steps up to a small tag at the top edge while something is open over the builder */
  html.kb .sb-test-pill,body:has(.modal,.finder,.launch,.ms-body) .sb-test-pill{top:2px;padding:1px 9px;font-size:10px;box-shadow:none;pointer-events:none}
  html.kb .sb-test-pill svg,body:has(.modal,.finder,.launch,.ms-body) .sb-test-pill svg{display:none}
  html.kb .sb-test-pill span,body:has(.modal,.finder,.launch,.ms-body) .sb-test-pill span{font-size:0}
  html.kb .sb-test-pill b,body:has(.modal,.finder,.launch,.ms-body) .sb-test-pill b{font-size:10px}
  .panel>.sheet-grab{display:block}
  .panel>.tabs{flex:none;overflow-x:auto;scrollbar-width:none;touch-action:pan-x}
  .panel>.panel-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:16px}
  .scrim{bottom:var(--mbar-h)}
  .top{min-height:52px}
  /* the name takes the room the bar has (the fit steps' caps are for wide screens), shortened only when it runs out */
  .proj-btn,.top[class*="fit"] .proj-btn{flex:0 1 auto;max-width:none;min-width:0}
  .proj-btn #projName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .top-l{flex:1 1 auto;min-width:0}
  .top-r{flex:none}
  #previewBtn{padding:7px 10px}
  #previewBtn .lbl{display:none}
  .toast{bottom:calc(var(--mbar-h) + 14px);max-width:calc(100vw - 32px)}
  .dock{position:fixed;left:0;right:0;bottom:var(--mbar-h);height:62%;z-index:58}
  .dock.max{height:calc(100% - var(--mbar-h) - 52px)}
  .preview-bar{gap:6px;padding:8px}
  .preview-bar b{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .preview-bar .seg{flex:0 1 auto}
  .preview-stage{padding:8px}
  .sheet-body{padding:14px}
  .sheet-foot{padding:10px 14px}
  .modal{padding:10px;align-items:end}
  .sheet{max-height:calc(100% - 20px);border-radius:16px}
  .menu-pop{max-width:calc(100vw - 16px)}
  .tabs button[role="tab"]{padding:10px 6px}
  .icon-btn.sm{min-width:30px;min-height:30px}
}
/* Wide tablets and portrait screens: sheets, the More sheet and dialogs keep a comfortable reading width
   instead of stretching edge to edge */
@media (min-width:721px) and (max-width:1180px){
  .panel{max-width:680px;margin-inline:auto}
  .ms-body{width:100%;max-width:680px;margin-inline:auto;box-sizing:border-box}
  .modal{align-items:center;padding:24px}
  .modal .sheet{max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px)}
}
@media (max-width:600px){
  /* the phone itself: the canvas fills the screen */
  .frame-wrap[data-device="phone"]{width:100%;border:0;border-radius:0;box-shadow:none;flex:1;height:auto}
  /* on a phone the preview already is phone-sized: the title and Back to editing, then the page picker */
  #pvDevices,#pvTab,.preview-bar .pv-w{display:none}
  .preview-bar select,.preview-bar .dd{flex:1 1 100%;order:3}
  #pvClose{flex:none;white-space:nowrap}
}
@media (max-width:480px){
  .top{padding:6px 8px;gap:4px}
  #undo,#redo{width:34px}
  .proj-btn .kindtag{display:none}
}

/* More sheet */
.msheet{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;justify-content:flex-end;pointer-events:none}
.ms-scrim{position:absolute;inset:0 0 var(--mbar-h,0) 0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .2s;pointer-events:auto}
.ms-body{position:relative;margin-bottom:var(--mbar-h,0);max-height:calc(100% - var(--mbar-h,0) - 40px);overflow:auto;background:var(--panel);border-radius:18px 18px 0 0;border:1px solid var(--line);border-bottom:0;padding:8px 16px 16px;transform:translateY(24px);opacity:0;transition:transform .22s ease,opacity .22s;pointer-events:auto;box-shadow:0 -20px 50px rgba(0,0,0,.3)}
.msheet.in .ms-scrim{opacity:1}
.msheet.in .ms-body{transform:none;opacity:1}
/* The handle on top of a bottom sheet: tap it (or swipe down) to close the sheet */
.sheet-grab{display:none;flex:none;width:120px;height:18px;margin:0 auto;padding:0;border:0;border-radius:9px;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sheet-grab::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:var(--line);margin:7px auto;transition:background .15s,width .15s}
.sheet-grab:hover::before,.sheet-grab:focus-visible::before{background:var(--muted);width:48px}
.sheet-grab:focus-visible{outline:2px solid var(--ice);outline-offset:-2px}
.ms-body>.sheet-grab{display:block;margin:-6px auto 0}
.ms-body h5{margin:12px 0 6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ms-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ms-grid.ms-one{grid-template-columns:minmax(0,1fr);margin-top:10px}
@media (min-width:560px){.ms-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:300px){.ms-grid{grid-template-columns:minmax(0,1fr)}}
.ms-item{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--chrome);color:var(--text);text-align:left;cursor:pointer;min-width:0}
.ms-item svg{flex:none;color:var(--ice)}
.ms-item span{display:grid;min-width:0}
.ms-item b{font-size:13px}
.ms-item small{font-size:11px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* two lines, so "Any layer, block or command" is read whole */
@media (prefers-reduced-motion:reduce){.ms-body,.ms-scrim{transition:none}}

.ln-top .mark strong{display:inline!important}

/* ============================================================
   Motion: small, quick, and off for reduced motion (see the
   global prefers-reduced-motion rule near the top)
   ============================================================ */
:root{--ease:cubic-bezier(.2,.7,.2,1)}
.btn,.icon-btn,.chip-btn,.seg button,.tabs button[role="tab"],.lib-item,.pg-row,.issue,.trow{transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .15s var(--ease),box-shadow .15s ease}
.btn:active:not(:disabled),.icon-btn:active:not(:disabled),.chip-btn:active,.seg button:active{transform:scale(.97)}
.lib-item:hover{transform:translateY(-1px)}
.lib.cards .lib-item:hover{box-shadow:0 10px 24px -14px rgba(0,0,0,.45)}
.tabs button[role="tab"]{position:relative}
.modal{animation:m-fade .18s ease}
.modal .sheet{animation:m-rise .26s var(--ease)}
.menu-pop{animation:m-pop .16s var(--ease);transform-origin:top center}
.toast{transition:opacity .22s ease,transform .26s var(--ease)}
@keyframes m-fade{from{opacity:0}}
@keyframes m-rise{from{opacity:0;transform:translateY(14px) scale(.985)}}
@keyframes m-pop{from{opacity:0;transform:translateY(-4px) scale(.97)}}
.pc-ring circle:nth-of-type(2){animation:ring-in .9s var(--ease)}
@keyframes ring-in{from{stroke-dasharray:0 999}}
.issue{animation:m-fade .25s ease both}
.look-pv{transition:transform .2s var(--ease)}
.look:hover .look-pv{transform:scale(1.03)}
.swatches.grads{margin-top:5px}
.sw.grad{width:40px}

.trow .lnk{display:inline-grid;place-items:center;color:var(--ice);margin-left:4px}
.pg-sec em svg{vertical-align:-1px}

/* Reorder list items in the Inspector by dragging */
.item-grip{display:inline-grid;place-items:center;width:18px;height:22px;margin:0 2px 0 -4px;color:var(--muted);cursor:grab;border-radius:5px;flex:none}
.item-grip:hover{color:var(--text);background:var(--panel-2)}
.item.dragging{opacity:.4}
.item.drop-before{box-shadow:0 -3px 0 var(--ice)}
.item.drop-after{box-shadow:0 3px 0 var(--ice)}

/* GitHub */
.gh .fld select{width:100%}
.gh-repo{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);margin-bottom:10px}
/* Web apps: Site › App users and data, and the rows dialog (js/ui/apps.js) */
.app-admin{display:grid;gap:10px;min-width:0}
.app-list{display:grid;gap:8px;min-width:0}
.app-li{display:grid;gap:6px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);min-width:0}
.app-li>b{overflow-wrap:anywhere}
.app-li>small{color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.app-scroll{overflow:auto;max-height:min(60dvh,520px);border:1px solid var(--line);border-radius:10px}
.app-table{width:100%;border-collapse:collapse;font-size:13px}
.app-table th,.app-table td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.app-table th{position:sticky;top:0;background:var(--panel-2);color:var(--muted);font-weight:600;text-transform:capitalize}
.app-rows{display:grid;gap:10px;min-width:0}
/* Visitor stats (U.statsHtml): totals, visits a day as bars, top pages and sources */
.st{display:grid;gap:12px;min-width:0}
.st-tops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.st-tops>div{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2)}
.st-tops b{font-size:22px;line-height:1.1;color:var(--text)}
.st-tops span{font-size:12px;color:var(--muted)}
.st-ch{font-size:11px;color:var(--ok)}.st-ch.down{color:var(--muted)}
.st-chart{position:relative;display:flex;align-items:flex-end;gap:2px;height:96px;padding-top:4px;border-bottom:1px solid var(--line)}
.st-bar{flex:1 1 0;min-width:0;height:max(var(--h),2px);background:var(--ice);border-radius:4px 4px 0 0;opacity:.9;position:relative;outline:none}
.st-bar:hover,.st-bar:focus-visible{opacity:1;box-shadow:0 0 0 2px var(--panel)}
.st-bar:hover::after,.st-bar:focus-visible::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);white-space:nowrap;padding:5px 8px;border-radius:6px;background:var(--text);color:var(--panel);font-size:12px;z-index:5;pointer-events:none}
.st-bar:first-child:hover::after,.st-bar:first-child:focus-visible::after{left:0;transform:none}
.st-bar:last-child:hover::after,.st-bar:last-child:focus-visible::after{left:auto;right:0;transform:none}
.st-axis{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:-8px}
.st-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px}
.st-cols h4{margin:0 0 6px;font-size:12px;color:var(--muted);font-weight:600}
.st-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.st-list li{display:flex;justify-content:space-between;gap:10px;font-size:13px;min-width:0}
.st-list li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.st-dev{margin:0}
.gh-repo>svg{color:var(--ice);flex:none}
.gh-repo>span{flex:1;min-width:0}
.gh-repo b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gh-repo small{color:var(--muted);font-size:12px}
.gh-acts,.gh .group>div>.btn{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.gh .ai-status{margin-top:8px}

/* Lorem ipsum */
.lorem-out{width:100%;margin-top:8px;font-size:13px;line-height:1.55;resize:vertical}
.lorem .actions{margin-top:10px}

/* AI writing */
.ai-actions{display:flex;gap:8px;margin:12px 0 8px}
.ai-actions .ai-go{flex:1;justify-content:center}
.ai-status{font-size:12.5px;line-height:1.45;padding:9px 11px;border-radius:9px;background:var(--panel-2);color:var(--text);margin-bottom:8px}
.ai-status.busy{color:var(--ice)}
.ai-status.busy::before{content:"";display:inline-block;width:10px;height:10px;margin-right:7px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-1px;animation:ai-spin .8s linear infinite}
.ai-status.ok{color:var(--ok)}
.ai-status.warn{color:var(--warn)}
@keyframes ai-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ai-status.busy::before{animation:none}}

/* Client brief */
.brief .brief-in{width:100%;font:13px/1.5 var(--mono);resize:vertical}
.brief-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 14px}
.ln-brief{max-width:560px;margin-top:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:0 14px}
.ln-brief summary{display:flex;align-items:center;gap:8px;padding:12px 0;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ice);list-style:none}
.ln-brief summary::-webkit-details-marker{display:none}
.ln-brief textarea{width:100%;font:13px/1.5 var(--mono);border-radius:10px;border:1px solid var(--line);background:var(--chrome);color:var(--text);padding:10px 12px;resize:vertical}
.ln-brief small{display:block;padding:8px 0 12px;font-size:12.5px;color:var(--muted)}

/* Versions */
.v-list{display:grid;gap:6px}
.v-row{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--chrome)}
.v-row>span{flex:1;min-width:0;display:grid;grid-template-columns:18px 1fr;column-gap:6px;align-items:center}
.v-row>span svg{grid-row:span 2;color:var(--ice)}
.v-row.auto>span svg{color:var(--muted)}
.v-row b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-row small{font-size:11.5px;color:var(--muted)}
.menu-pop .pop-foot{border-top:1px solid var(--line);border-radius:0 0 6px 6px;margin-top:4px;color:var(--ice)}

/* Focus point picker */
.focus-pick{display:grid;grid-template-columns:repeat(3,32px);gap:4px}
.focus-pick button{height:28px;border:1px solid var(--line);border-radius:6px;background:var(--chrome);color:var(--muted);cursor:pointer;font-size:14px;line-height:1}
.focus-pick button[aria-pressed="true"]{background:var(--ice);border-color:var(--ice);color:var(--on-ice)}

.multi-list{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:3px;font-size:12.5px}
.multi-list li{padding:6px 9px;border-radius:7px;background:var(--chrome);border:1px solid var(--line);color:var(--k,var(--text));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* dark builder theme: the wordmark sits straight on the chrome, no plate */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--brand-plate:transparent;--brand-pad:0}}
:root[data-theme="dark"]{--brand-plate:transparent;--brand-pad:0}
.ln-top .brand-logo{width:32px;height:32px}
.ln-top .brand-text{height:24px}
.ln-legal{margin:14px auto 0;max-width:620px;text-align:center;font-size:11.5px;color:var(--muted)}
@media (max-width:1000px){.top .brand-plate{display:none}}
.brand-about{display:flex;gap:10px;align-items:flex-start;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.brand-about img{flex:none}
.brand-about .note{margin:0}
/* service mark beside the wordmark (never drawn on the mark itself) */
.brand-plate .sm{align-self:flex-start;margin:-1px 0 0 2px;font-size:7px;font-weight:700;letter-spacing:.02em;line-height:1;color:#c9d2e3}
.ln-top .brand-plate .sm{font-size:8px}
.ln-legal sup,.brand-about sup{font-size:.62em;line-height:0}

/* Icon picker */
/* the icon picker folds away under its header (the icon in use, Hide icons / Show icons) */
.ip-head{display:flex;align-items:center;gap:8px;width:100%;min-height:34px;padding:5px 8px;margin:0 0 6px;border:1px solid var(--line);border-radius:7px;background:var(--chrome);color:var(--text);font:inherit;font-size:13px;cursor:pointer;text-align:left}
.ip-head:hover{border-color:color-mix(in srgb,var(--ice) 55%,var(--line))}
.ip-cur{width:22px;height:22px;display:grid;place-items:center;border-radius:5px;background:var(--panel-2);flex:none}
.ip-cur:empty{background:repeating-linear-gradient(45deg,transparent 0 4px,color-mix(in srgb,var(--text) 10%,transparent) 4px 5px)}
.ip-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ip-tog{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--muted);flex:none}
.icon-pick.shut .ip-body{display:none}
.icon-pick.shut .ip-head{margin:0}
/* Text color while words are highlighted on the canvas: only those words take it */
.words-pick{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:7px 9px;margin:0 0 6px;border:1px solid color-mix(in srgb,var(--ice) 45%,var(--line));border-radius:8px;background:color-mix(in srgb,var(--ice) 8%,transparent);font-size:12.5px;color:var(--text)}
.words-pick svg{color:var(--ice);flex:none}
.words-pick span{flex:1 1 140px;min-width:0;overflow-wrap:anywhere}
.words-pick .ln-link{margin-left:auto}
.hed.para .hed-in{min-height:64px}
.ip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:4px;max-height:176px;overflow:auto;padding:2px}
.ip-grid button{height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:7px;background:var(--chrome);color:var(--text);cursor:pointer}
.ip-grid button:hover{border-color:var(--ice)}
.ip-grid button.on{background:var(--ice);border-color:var(--ice);color:var(--on-ice)}
.ip-grid .ip-none{grid-column:span 2;font-size:11.5px;color:var(--muted)}
/* Section quick styles */
.qstyles{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.qstyles button{display:flex;align-items:center;gap:6px;padding:6px 7px;border:1px solid var(--line);border-radius:8px;background:var(--chrome);color:var(--text);font-size:12px;cursor:pointer}
.qstyles button i{width:16px;height:16px;border-radius:4px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.qstyles button[aria-pressed="true"]{border-color:var(--ice);box-shadow:0 0 0 1px var(--ice)}

/* Lists of items (js/ui/repeat.js) */
.rp-layouts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.rp-layouts button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px 6px;border:1px solid var(--line);border-radius:9px;background:var(--chrome);color:var(--muted);cursor:pointer;min-width:0}
.rp-layouts button small{font-size:11.5px;line-height:1.2;text-align:center}
.rp-layouts button:hover{color:var(--text);border-color:var(--muted)}
.rp-layouts button[aria-pressed="true"]{border-color:var(--ice);box-shadow:0 0 0 1px var(--ice);color:var(--ice)}
.rp-items .item-top{margin-bottom:0}
.rp-items .item{padding:6px 8px}
.rp-pick{flex:1;min-width:0;border:0;background:none;padding:2px 4px;text-align:left;cursor:pointer;color:var(--text);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:5px}
.rp-pick:hover{background:var(--panel-2)}
.rp-pick small{display:block;color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis}
.rp-own{font-style:normal;font-size:10.5px;padding:1px 6px;border-radius:5px;background:color-mix(in srgb,var(--violet) 16%,transparent);color:var(--violet)}
.rp-parts{display:grid;gap:4px}
.rp-part{display:flex;align-items:center;gap:6px;padding:4px 4px 4px 2px;border:1px solid var(--line);border-radius:8px;background:var(--chrome)}
.rp-part>span{display:flex;align-items:center;gap:4px;flex:none}
.rp-part .switch{margin:0}
.rp-addparts{display:flex;flex-wrap:wrap;gap:5px}
.rp-addparts .btn{margin:0}
.rp-box{margin:0 0 10px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--ice) 45%,var(--line));border-radius:10px;background:color-mix(in srgb,var(--ice) 7%,var(--panel))}
.rp-box>p{display:flex;gap:8px;align-items:flex-start;margin:0 0 8px;font-size:12.5px;line-height:1.45}
.rp-box>p svg{flex:none;margin-top:2px;color:var(--ice)}
.rp-box .actions{margin:0}
.rp-box .fld{margin:10px 0 0}
.tok-chips{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:6px}
.tok-chips>span{font-size:11px;color:var(--muted);margin-right:2px}
.tok-chips .chip-btn{padding:2px 8px;font-size:11.5px}
.tok-chips .chip-btn:hover{color:var(--text);border-color:var(--muted)}
/* Write the page (SB.Words.write) */
.write{display:grid;gap:14px}
.write-find{width:100%;font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--chrome);color:var(--text)}
.write-sec{display:grid;gap:8px;padding-top:6px;border-top:1px solid var(--line)}
.write-sec>h4{margin:6px 0 2px;font-size:12px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.write-sec>h4 small{text-transform:none;letter-spacing:0;font-weight:400}
.write-group{display:grid;gap:8px;padding:8px 10px;border-left:3px solid color-mix(in srgb,var(--ice) 45%,var(--line));border-radius:0 8px 8px 0;background:var(--panel-2)}
.write-item{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;align-items:start}
.write-k{border:0;background:none;padding:7px 0 0;text-align:left;font-size:11.5px;color:var(--muted);cursor:pointer;overflow-wrap:anywhere}
.write-k:hover{color:var(--ice)}
.write-item input,.write-item textarea{width:100%;font:inherit;font-size:14px;padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:var(--chrome);color:var(--text);resize:vertical}
.write-item.is-head input,.write-item.is-head textarea{font-weight:700;font-size:15px}
.write-item textarea.mono{font-family:var(--mono);font-size:12.5px}
@media (max-width:600px){.write-item{grid-template-columns:minmax(0,1fr);gap:2px}.write-k{padding:0}}

/* Collections */
.coll{display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px;min-height:360px}
.coll-side{display:grid;align-content:start;gap:6px}
.coll-c{display:grid;text-align:left;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--chrome);color:var(--text);cursor:pointer}
.coll-c.on{border-color:var(--ice);box-shadow:inset 3px 0 0 var(--ice)}
.coll-c small{font-size:11px;color:var(--muted);font-family:var(--mono)}
.coll-add{display:flex;flex-wrap:wrap;gap:5px}
.coll-head{display:grid;gap:4px;margin-bottom:10px}
.coll-items{display:grid;gap:6px}
.coll-item{border:1px solid var(--line);border-radius:10px;background:var(--chrome);overflow:hidden}
.coll-item.open{border-color:var(--ice)}
.ci-top{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;background:none;color:var(--text);text-align:left;cursor:pointer}
.ci-top img{width:52px;height:36px;object-fit:cover;border-radius:5px;flex:none}
.ci-top span{flex:1;display:grid;min-width:0}
.ci-top small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-edit{padding:4px 12px 12px;border-top:1px solid var(--line)}
.ci-bar{display:flex;gap:3px;margin-bottom:4px}
.ci-bar button{min-width:30px;height:28px;border:1px solid var(--line);border-radius:6px;background:var(--panel-2);color:var(--text);font-weight:700;cursor:pointer}
.ci-body{min-height:160px;max-height:320px;overflow:auto;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);line-height:1.6}
.ci-body:focus{outline:2px solid var(--ice);outline-offset:1px}
.ci-body h3{margin:.8em 0 .3em;font-size:1.05rem}
.pg-cols{margin:6px 0 4px}
.pg-cols .btn{margin-top:6px}
@media (max-width:700px){.coll{grid-template-columns:1fr}}
.ts-h{margin:12px 0 6px;font-size:12px;font-weight:700;color:var(--text);border-top:1px solid var(--line);padding-top:10px}
.group .ts-h:nth-of-type(1){border-top:0;padding-top:0}

/* Photos and files */
.as-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.as-stats{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.as-stats b{color:var(--text)}
.as-list{display:grid;gap:6px}
.as-row{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--chrome)}
.as-row.unused{opacity:.75;border-style:dashed}
.as-thumb{width:56px;height:42px;border-radius:6px;overflow:hidden;background:var(--panel-2);display:grid;place-items:center;color:var(--muted)}
.as-thumb img{width:100%;height:100%;object-fit:cover}
.as-info{display:grid;min-width:0}
.as-info b{font-family:var(--mono);font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.as-info small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.as-info em{font-style:normal;color:var(--warn)}
.as-acts{display:flex;gap:4px;align-items:center}
@media (max-width:600px){.as-row{grid-template-columns:44px minmax(0,1fr)}.as-thumb{width:44px;height:33px}.as-acts{grid-column:1/-1;justify-content:flex-end}}
/* compact page presets */
.pg-preset{padding:7px 9px;gap:1px}
.pg-preset small{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- accounts and plans (js/ui/account.js) ---------- */
.acct-btn{padding:3px 12px 3px 3px;border-radius:999px;gap:8px}
.acct-btn>svg{display:none}
.acct-btn .av{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ice);color:var(--on-ice);font-weight:700;font-size:13px;flex:none;text-transform:uppercase}
.acct-btn .lbl{display:grid;line-height:1.15;text-align:left}
.acct-btn .lbl small{font-size:11px;color:var(--muted);font-weight:500}
.acct-btn.trial .av{background:var(--panel);color:var(--ice);box-shadow:inset 0 0 0 2px var(--ice)}
.acct-gate{z-index:320}
.acct-box{max-width:440px;margin:0 auto;padding-top:clamp(8px,6vh,72px)}
/* the trial-ended screen holds every plan: room for three cards in a row */
.acct-box.wide{max-width:min(1020px,100%)}
.acct-box.wide>h1,.acct-box.wide>.ln-lead{max-width:640px}
.acct-hosted-go{margin:-8px 0 22px}
.acct-box h1{margin:0;font-size:clamp(28px,4vw,40px);line-height:1.08;letter-spacing:-.03em;font-weight:650;text-wrap:balance}
.acct-box .ln-lead{margin-bottom:24px}
.acct-form{display:grid;gap:4px}
.acct-form .fld input{padding:10px 12px;font-size:15px;border-radius:9px}
.acct-go{margin-top:8px;padding:11px 16px;font-size:15px;border-radius:10px}
.acct-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:16px}
.acct-points{list-style:none;margin:28px 0 0;padding:18px 0 0;border-top:1px solid var(--line);display:grid;gap:8px;color:var(--muted);font-size:13.5px}
.acct-points li{display:flex;gap:8px;align-items:flex-start}
.acct-points svg{color:var(--ice);flex:none;margin-top:3px}
.acct-box .acct-plans{margin-top:4px}
.acct-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:14px 12px;margin:12px 0}
/* Every card has the same five parts (head, what it is for, list, foot, buttons) on the parent's rows (subgrid), so prices,
   lists, notes and buttons line up across the cards however long each one's words are; short lists leave their space
   under the list, never between the button and the card's edge */
.acct-plan{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:12px;align-content:start;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
@supports not (grid-template-rows:subgrid){.acct-plan{display:flex;flex-direction:column;gap:12px}.acct-plan .acct-foot{margin-top:auto}}
.acct-plan-head{display:flex;flex-direction:column;gap:6px}
.acct-plan p,.acct-plan li,.acct-plan .acct-bill{text-wrap:pretty}
.acct-plan-act{display:flex;flex-direction:column;gap:8px;align-self:start}
.acct-plan-act>.btn{width:100%}
.acct-plan .acct-foot{align-self:start;margin:0;padding-top:10px;border-top:1px dashed var(--line)}
.acct-plan .acct-foot:empty{border:0;padding:0}
.acct-plan.best{border-color:color-mix(in srgb,var(--ice) 55%,var(--line))}
.acct-plan.on{box-shadow:0 0 0 2px var(--ice)}
.acct-plan p{margin:0;color:var(--muted);font-size:13px}
.acct-plan ul{list-style:none;margin:0;padding:0;display:grid;align-content:start;gap:7px;font-size:12.5px}
.acct-plan li{display:flex;gap:6px;align-items:flex-start}
.acct-plan li svg{color:var(--ice);flex:none;margin-top:2px}
.acct-plan-act>.btn{padding:8px 12px;font-size:13.5px;white-space:normal;line-height:1.25;text-wrap:balance;max-width:100%}
.acct-set-h{margin:14px 0 0;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.acct-plan-sets>.acct-set-h:first-child{margin-top:4px}
.acct-plan.host{border-color:color-mix(in srgb,var(--ice) 35%,var(--line))}
/* the welcome page's three plans: a Recommended tag, the same plan with hosting as a second button, the switch to the other kind */
.acct-plan{position:relative}
.acct-plan.best{border-color:transparent;background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--sv-grad,linear-gradient(120deg,var(--ice),var(--ice))) border-box}
.acct-tag{position:absolute;top:-10px;left:14px;padding:1px 9px;border-radius:99px;font:700 10.5px/1.7 var(--mono,ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;color:#04070d;background:var(--sv-grad,var(--ice))}
.acct-plan-act>.btn.acct-alt{background:transparent}
.acct-plan-more{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.acct-plan-more .ln-link{font-size:12.5px;padding:0;margin-right:4px}
.pg-facts{list-style:none;margin:0;padding:0;display:grid;gap:5px;font-size:13px}
.pg-facts li{display:flex;gap:7px;align-items:flex-start}
.pg-facts svg{flex:none;margin-top:3px;color:var(--ok)}
.acct-sites{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.acct-sites li{display:flex;align-items:center;gap:8px;font-size:13px}
.acct-sites li svg{color:var(--ice);flex:none}
.acct-sites li small{margin-left:auto;color:var(--muted)}
.acct-dom{display:grid;gap:8px;min-width:0}
.acct-dom>.btn{justify-self:start}
.acct-bill{color:var(--muted);font-size:12px;line-height:1.4}
.acct-kicker{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ice)}
.acct-price{font-size:26px;font-weight:650;letter-spacing:-.02em;line-height:1.1}
.acct-price span,.acct-price small{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0}
.acct-host-tease{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px dashed var(--line);border-radius:12px;margin-top:4px}
.acct-host-tease>svg{color:var(--ice);flex:none}
.acct-host-tease>span{flex:1;min-width:0;display:grid;gap:2px}
.acct-host-tease small{color:var(--muted);font-size:12.5px}
.acct-host-tease.exp-host{margin:0 0 12px}
.acct-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:4px 0 12px}
.acct-tier{display:grid;gap:3px;text-align:left;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);cursor:pointer}
.acct-tier .acct-price{font-size:20px}
.acct-tier small{color:var(--muted);font-size:12px;line-height:1.4}
.acct-tier[aria-checked="true"]{border-color:var(--ice);box-shadow:0 0 0 1px var(--ice)}
.acct-pick{display:grid;gap:8px;margin:4px 0 12px}
.acct-pick .acct-tier{cursor:default}
.acct-why summary{cursor:pointer;color:var(--muted);font-size:12.5px;font-weight:600}
.acct-why ul{margin:8px 0 6px;padding-left:18px;display:grid;gap:4px;font-size:12.5px;color:var(--muted)}
.acct-why li.on{color:var(--text)}
.acct-up{display:grid;gap:8px;margin:8px 0}
.acct-agree{display:flex;gap:10px;align-items:flex-start;margin:6px 0 4px;font-size:13px;line-height:1.5;color:var(--muted);cursor:pointer}
.acct-agree input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--ice)}
.acct-agree a,.acct-policies a{color:var(--ice)}
/* Who owns a domain we register (U.registrantForm): the client's own details for the registrar and WHOIS */
.reg-form{border:1px solid var(--line);border-radius:10px;padding:10px 12px 12px;margin:10px 0;min-width:0}
.reg-form legend{padding:0 6px;font-weight:600;font-size:13px}
.reg-form .note{margin:0 0 8px}
.reg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px;margin-bottom:6px}
.reg-grid .fld{margin:0;min-width:0}
.reg-grid .fld input,.reg-grid .fld select{width:100%;box-sizing:border-box}
.reg-grid .reg-wide{grid-column:1/-1}
.reg-grid [hidden]{display:none}
@media (max-width:600px){.reg-grid{grid-template-columns:minmax(0,1fr)}}
.acct-policies{margin:8px 0 0;font-size:12.5px;color:var(--muted);line-height:1.6}
.plans-guide{display:grid;gap:12px;margin-bottom:14px}
.plans-guide p{margin:0;line-height:1.5}
.pg-lead{font-size:14.5px}
.pg-kinds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pg-kinds>div{display:grid;gap:3px;padding:10px 12px;border-radius:10px;background:var(--panel-2)}
.pg-kinds span{color:var(--muted);font-size:13px;line-height:1.45}
.pg-kinds em{font-style:normal;color:var(--text);font-weight:600}
.pg-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:10px}
.pg-col{padding:12px 14px;border:1px solid var(--line);border-radius:12px;min-width:0}
.pg-col>b{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.pg-col>b svg{color:var(--ice);flex:none}
.pg-col ul{margin:0;padding-left:18px;display:grid;gap:4px;font-size:13px;color:var(--muted);line-height:1.45}
.pg-small{font-size:12.5px;color:var(--muted)}
.acct-pause{display:flex;gap:9px;align-items:flex-start;margin:10px 0 4px;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--ok) 12%,transparent);border:1px solid color-mix(in srgb,var(--ok) 35%,transparent);font-size:13px;line-height:1.45}
.acct-pause svg{flex:none;color:var(--ok);margin-top:2px}
@media (max-width:600px){.pg-kinds{grid-template-columns:minmax(0,1fr)}}
.acct-due{display:grid;gap:8px;margin:4px 0 12px;padding:12px;border:1px solid var(--warn);border-radius:10px}
.acct-due .note{margin:0}
.acct-due .note b{color:var(--warn)}
.acct-host>.btn{margin:4px 0 10px}
@media (max-width:600px){
  .acct-plans,.acct-tiers{grid-template-columns:1fr}
  .acct-host-tease{flex-wrap:wrap}
}

/* ---------- ways in: Import existing website, GitHub ---------- */
.imp-ways{display:grid;gap:8px;margin:10px 0}
.imp-way{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.imp-way:hover,.imp-way[aria-expanded="true"]{border-color:color-mix(in srgb,var(--ice) 60%,var(--line))}
.imp-way>span:not(.imp-ic){flex:1;min-width:0;display:grid;gap:2px}
.imp-way b{font-weight:600}
.imp-way small{color:var(--muted);font-size:12.5px;line-height:1.4}
.imp-way>svg{color:var(--muted);flex:none;transition:transform .15s}
.imp-way[aria-expanded="true"]>svg{transform:rotate(180deg)}
.imp-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:color-mix(in srgb,var(--ice) 14%,var(--panel-2));color:var(--ice);flex:none}
.imp-way.on{border-color:var(--ice);background:color-mix(in srgb,var(--ice) 8%,var(--panel))}
.imp-way.on>svg{color:var(--ice)}

/* ---------- links: the destination in words, and the picker (Inspector › Link) ---------- */
.lp-cur{display:flex;align-items:center;gap:9px;width:100%;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);color:var(--text);font:inherit;text-align:left;cursor:pointer}
.lp-cur:hover{border-color:color-mix(in srgb,var(--ice) 60%,var(--line))}
.lp-cur>i{display:grid;place-items:center;color:var(--ice);flex:none}
.lp-cur>b{flex:1;min-width:0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-cur>em{font-style:normal;font-size:12px;color:var(--ice);flex:none}
.lp-cur.empty>b{color:var(--muted)}
.lp-cur.empty>em{padding:3px 8px;border-radius:999px;background:var(--ice);color:var(--on-ice);font-weight:600}
.lp-cur.warn{border-color:color-mix(in srgb,var(--warn) 60%,var(--line))}
.lp-cur.warn>i{color:var(--warn)}
.lp-dlg>.h:first-child{margin-top:0}
.lp-lab{display:flex;align-items:center;gap:6px;margin:12px 0 6px;font-size:12.5px;color:var(--muted)}
.lp-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.lp-row input{min-width:0}
.lp-more{margin:12px 0 4px}
.lp-more>summary{cursor:pointer;color:var(--ice);font-size:13px;padding:4px 0}
.lp-more>.lp-row{margin-top:6px}
.gh-panel{padding:4px 4px 12px 54px}
.gh-panel>.btn{margin:4px 0 8px}
@media (max-width:600px){.gh-panel{padding-left:4px}}

/* ============================================================
   Spacing and touch polish
   Stacked controls never touch, lists never push past their panel,
   and on touch screens every control is big enough for a finger
   and nothing hides behind a hover that fingers can't do.
   ============================================================ */
/* list editors (links, FAQs, photos, form fields): rows fit the panel instead of their widest text */
.items{grid-template-columns:minmax(0,1fr)}
.item{min-width:0}
.item .fld input,.item .fld textarea{min-width:0}
/* a button or list placed straight into a panel, group, card or dialog gets room around it */
:is(.panel-body,.group,.card-box,.sheet-body,.gh-panel,.acct-host,.text-runs)>.btn{margin:4px 6px 10px 0}
:is(.panel-body,.group,.card-box,.sheet-body)>:is(.file-list,.img-row,.items){margin-bottom:10px}
/* a hint under a field leaves space before the next field or heading */
:is(.panel-body,.group,.card-box,.sheet-body,.fld)>.note+:is(.fld,.row2,.seg,.switch,.text-runs,label){margin-top:10px}
.fld>.note{margin-bottom:2px}
/* words then a button under them, wherever they sit in a panel or dialog (rows like .sheet-foot stay side by side) */
:is(.panel-body,.group,.card-box,.sheet-body,.gh-panel,.acct-host,.text-runs,.modal) :not(.sheet-foot,.actions,.gh-acts,.aib-acts,.acct-plan-act)>.note+:is(.btn,.actions),
:is(.panel-body,.group,.card-box,.sheet-body,.gh-panel,.acct-host,.text-runs,.modal)>.note+:is(.btn,.actions){margin-top:10px}
.aib-gpt-panel{margin:8px 0 10px}
.card-box{margin-bottom:10px}

@media (hover:none),(pointer:coarse),(max-width:1180px){
  /* finger-sized targets */
  .group>summary{min-height:40px;padding:8px 0}
  details.lib-group>summary.h{min-height:36px}
  .btn.small{min-height:34px;padding:6px 11px}
  .icon-btn.sm{min-width:34px;min-height:34px}
  .chip-btn{padding:6px 12px;min-height:32px}
  .crumbs{gap:4px}
  .crumbs button{padding:6px 7px;min-height:30px}
  .sw{width:30px;height:30px}
  .bm-link{width:28px;height:28px}
  .switch{min-height:32px}
  .ln-page input{width:18px;height:18px}
  .lib-item .star{padding:6px}
  .layers .tw,.trow .tw{min-width:28px;min-height:28px}
  .item-grip{width:28px;height:30px}
  /* no hover on touch: what hover would reveal is always there */
  .cat-pin{opacity:.7;width:30px;height:30px}
  .dock-tab .x{opacity:1;width:28px;height:28px}
  .ln-use{opacity:1;transform:none}
}
/* dialogs: never taller than the screen (a % max-height has nothing to resolve against inside the
   centering grid), contents never wider than the dialog, footer buttons always in view */
.sheet{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px)}
.sheet-body{grid-template-columns:minmax(0,1fr)}
.sheet-body>*{min-width:0}
.file-list .up{white-space:normal;text-align:right}
@media (max-width:1180px){
  .sheet{max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px)}
  .file-list li{flex-wrap:wrap;white-space:normal;overflow-wrap:anywhere}
  .proj-row{flex-wrap:wrap}
  .proj-row .grow{flex:1 1 100%}
  .sheet-foot{gap:6px}
  .sheet-foot .btn{flex:1 1 auto}
}

/* Touch: dragging a block in from the Add panel */
.lib-item[data-id]{-webkit-touch-callout:none}
@media (hover:none){.lib-item[data-id]{-webkit-user-select:none;user-select:none}}
.lib-item.lifting{outline:2px solid var(--ice);outline-offset:1px}
.lib-ghost{position:fixed;z-index:9999;pointer-events:none;transform:translate(-50%,-130%);display:flex;align-items:center;gap:6px;max-width:70vw;padding:8px 12px;border-radius:10px;background:var(--chrome);color:var(--text);border:1px solid var(--ice);box-shadow:0 12px 30px rgba(0,0,0,.3);font-size:13px;font-weight:600;opacity:.92}
.lib-ghost span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lib-ghost svg{color:var(--ice);flex:none}
.lib-ghost.over{background:var(--ice);color:#04252b}
.lib-ghost.over svg{color:inherit}
.lib-touch{display:none;align-items:center;gap:6px;margin:0 0 8px;font-size:12px;color:var(--muted)}
@media (hover:none) and (pointer:coarse){.lib-touch{display:flex}}
.pick-bar{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:9000;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:6px 6px 6px 12px;border-radius:12px;background:var(--chrome);color:var(--text);border:1px solid var(--ice);box-shadow:0 10px 28px rgba(0,0,0,.28);font-size:13px}
.pick-bar>svg{color:var(--ice);flex:none}
.pick-bar span{min-width:0}
.pick-bar .btn{flex:none}
/* The same project open in another tab (app.js tabNote): below the top bar, wraps on phones */
.tab-bar{top:62px;z-index:80;border-color:var(--warn);flex-wrap:wrap;width:max-content;max-width:min(560px,calc(100vw - 32px))}
.tab-bar>svg{flex:none;stroke:var(--warn)}
.tab-bar span{flex:1 1 220px}

/* ---------- Photo field: upload and stock buttons side by side ---------- */
.img-row{grid-template-columns:52px minmax(0,1fr) auto auto}

/* ---------- Stock photos (js/ui/stock.js) ---------- */
.stock{display:grid;gap:12px}
.stock-q{display:grid;gap:8px}
.stock-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(130px,calc(50% - 4px)),1fr));grid-auto-rows:max-content;gap:8px;align-items:start;max-height:min(56vh,560px);overflow:auto;padding:2px}
/* max-content rows: a tile clips its photo (overflow:hidden), which lets an auto row shrink below it, so rows
   squeezed into the scroll box and the photos piled on top of each other */
@media (max-width:1180px){
  /* one scroll, the dialog's: the search stays on top while the photos scroll under it, keyboard up or not */
  .stock-grid{max-height:none;overflow:visible}
  .stock-q{position:sticky;top:-14px;z-index:2;margin:-14px -14px 0;padding:14px 14px 10px;background:var(--panel);border-bottom:1px solid var(--line)}
}
.stock-ph{position:relative;display:block;width:100%;aspect-ratio:4/3;padding:0;border:0;border-radius:8px;overflow:hidden;cursor:pointer;background:var(--panel-2)}
.stock-ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s}
.stock-ph:hover img,.stock-ph:focus-visible img{transform:scale(1.04)}
.stock-ph:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.stock-ph small{position:absolute;left:6px;bottom:6px;max-width:calc(100% - 12px);padding:1px 6px;border-radius:5px;background:rgba(0,0,0,.6);color:#fff;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .2s}
.stock-ph:hover small,.stock-ph:focus-visible small{opacity:1}
.stock-ph.getting{opacity:.55;cursor:wait}
.stock-more:empty{display:none}

/* ---------- Lead inbox (js/ui/leads.js) ---------- */
.leads{display:grid;gap:12px}
.leads-top{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
.leads-list{display:grid;gap:6px}
.lead{border:1px solid var(--line);border-radius:10px;background:var(--chrome);overflow:hidden}
.lead.new{border-color:color-mix(in srgb,var(--ice) 55%,var(--line))}
.lead-head{display:flex;gap:10px;align-items:center;width:100%;padding:10px 12px;border:0;background:none;color:var(--text);text-align:left;cursor:pointer;font:inherit}
.lead-dot{width:8px;height:8px;border-radius:50%;flex:none;background:transparent}
.lead.new .lead-dot{background:var(--ice)}
.lead-sum{display:grid;min-width:0}
.lead-sum b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lead.new .lead-sum b{font-weight:700}
.lead-sum small{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lead-body{padding:0 12px 12px 30px;display:grid;gap:10px}
.lead-body dl{display:grid;grid-template-columns:minmax(80px,max-content) minmax(0,1fr);gap:6px 12px;margin:0}
.lead-body dt{color:var(--muted);font-size:12.5px}
.lead-body dd{margin:0;overflow-wrap:anywhere}
.leads-foot{display:flex;flex-wrap:wrap;gap:8px}
.leads-foot:empty{display:none}
@media (max-width:600px){.lead-body{padding-left:12px}.lead-body dl{grid-template-columns:minmax(0,1fr)}.lead-body dt{margin-top:4px}}
/* a dot on the account button when new leads came in */
#acctBtn.has-leads .av{position:relative}
#acctBtn.has-leads .av::after{content:"";position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 2px var(--chrome)}

/* ---------- Two-step sign-in and plans ---------- */
.twofa{display:grid;gap:12px}
.twofa-steps{margin:0;padding-left:20px;display:grid;gap:14px}
.twofa-steps li{display:grid;gap:8px}
.twofa-qr{width:192px;height:192px;padding:8px;background:#fff;border-radius:10px}
.twofa-qr img,.twofa-qr canvas{display:block}
.twofa-key{font-family:var(--mono);font-size:12.5px;overflow-wrap:anywhere}
.twofa-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;max-width:320px}
.twofa-form input{font-family:var(--mono);letter-spacing:.2em}
.twofa-codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.twofa-codes code{display:block;padding:6px 8px;border-radius:6px;background:var(--panel-2);font-family:var(--mono);text-align:center}
.acct-bill-tog{display:flex;justify-content:center;margin-bottom:4px}
.acct-bill-tog em{font-style:normal;font-size:11px;font-weight:700;color:var(--ok);margin-left:4px}
.acct-plan .acct-bill{display:block}

/* ---------- Domains and hosting on Hostinger (account.js: domainPicker, hxStatus) ---------- */
.dom-pick{display:grid;gap:10px}
.dom-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.dom-search input{font-family:var(--mono)}
.dom-results{display:grid;gap:6px}
.dom-results:empty{display:none}
.dom-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--chrome)}
.dom-row b{font-family:var(--mono);font-weight:600;overflow-wrap:anywhere}
.dom-row.on{border-color:var(--ice)}
.dom-row.taken{opacity:.6}
.dom-row.taken{grid-template-columns:minmax(0,1fr) auto}
.dom-price{text-align:right;font-weight:700;line-height:1.2}
.dom-price small{display:block;font-weight:400;color:var(--muted);font-size:11.5px}
.dom-taken{color:var(--muted);font-size:12.5px}
.dom-chosen{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:9px;background:color-mix(in srgb,var(--ok) 12%,var(--panel));line-height:1.45}
.dom-chosen[hidden]{display:none}
@media (max-width:600px){.dom-row{grid-template-columns:minmax(0,1fr) auto}.dom-row .btn{grid-column:1/-1}.dom-price{text-align:left}}
.hx-status{display:grid;gap:10px;margin-bottom:10px}
.hx-line{display:flex;gap:10px;align-items:flex-start;line-height:1.45}
.hx-dot{width:10px;height:10px;border-radius:50%;margin-top:5px;flex:none;background:var(--ok)}
.hx-line.busy .hx-dot{background:var(--warn);animation:hx-pulse 1.2s ease-in-out infinite}
.hx-line.bad .hx-dot{background:var(--danger)}
@keyframes hx-pulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.hx-line.busy .hx-dot{animation:none}}
.hx-dns{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--chrome)}
.hx-dns p{margin:0;line-height:1.45}
.hx-rec{width:100%;border-collapse:collapse;font-size:12.5px}
.hx-rec th,.hx-rec td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.hx-rec code{font-family:var(--mono);overflow-wrap:anywhere;user-select:all}
.acct-team{display:grid;gap:8px;margin-bottom:12px;padding:12px;border:1px dashed var(--line);border-radius:10px}

/* ---------- Publish in the top bar (Account.publishNow) ---------- */
#publishBtn{border-color:color-mix(in srgb,var(--ice) 55%,var(--line));color:var(--ice)}
#publishBtn:hover{background:color-mix(in srgb,var(--ice) 12%,transparent)}
#publishBtn.live{position:relative}
#publishBtn.live::after{content:"";position:absolute;top:4px;right:4px;width:7px;height:7px;border-radius:50%;background:var(--ok)}
#publishBtn.busy{opacity:.6;pointer-events:none}
#publishBtn[hidden]{display:none}
/* Saved / saving / not saved, by Undo on phones and tablets (A.saveState); tap it for the words */
.save-dot{width:26px;min-width:26px;padding:0}
.save-dot span{display:block;width:8px;height:8px;margin:auto;border-radius:50%;background:var(--ok);transition:background .2s}
.save-dot[data-state="busy"] span{background:var(--muted);animation:hx-pulse 1s ease-in-out infinite}
.save-dot[data-state="bad"] span{background:var(--danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 30%,transparent)}
@media (prefers-reduced-motion:reduce){.save-dot[data-state="busy"] span{animation:none}}

/* Phones and tablets: Publish is the one bright button in the top bar, and Export steps back to a quiet icon */
@media (max-width:1180px){
  #publishBtn:not([hidden]),#publishBtn:not([hidden]):hover{background:var(--sv-grad,var(--ice)) border-box;border-color:transparent;color:#04070d;font-weight:700;box-shadow:0 0 16px color-mix(in srgb,var(--ice) 30%,transparent)}
  #publishBtn:not([hidden]) svg{stroke:#04070d}
  #publishBtn.live::after{box-shadow:0 0 0 2px var(--chrome)}
  #publishBtn:not([hidden])+#exportBtn{background:none;border-color:var(--line);color:var(--text);font-weight:600;padding:7px 10px;box-shadow:none}
  #publishBtn:not([hidden])+#exportBtn>svg{display:inline-block;stroke:currentColor}
  #publishBtn:not([hidden])+#exportBtn .lbl{display:none}
}

/* After Update: where the site is live (Account.publishNow) */
.pub-done{display:flex;gap:12px;align-items:flex-start}
.pub-done p{margin:0;line-height:1.5}
.pub-done-ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
.pub-check{display:grid;gap:10px}
/* the card layout row at the top of Inspect: copy, paste, make the others match */
.lay-bar{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0 0 10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2)}
.lay-bar>span{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted)}
.lay-acts{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.pub-live{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);color:var(--text);text-decoration:none;min-width:0}
.pub-live:hover,.pub-live:focus-visible{border-color:var(--ice)}
.pub-live>span:nth-child(2){display:grid;gap:2px;min-width:0;flex:1}
.pub-live b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pub-live small{color:var(--muted);font-size:12px}
.pub-live>svg{flex:none;color:var(--ice)}
.pub-live-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 22%,transparent)}
.pub-check p{margin:0;line-height:1.5}
.pub-check-out ul{margin:6px 0 0;padding-left:18px;display:grid;gap:3px;color:var(--muted);font-size:13px}
.pub-check-ok{display:flex;gap:8px;align-items:center;color:var(--ok);font-weight:600}
.pub-check-err{color:var(--danger)}
.pub-check-skip{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted);cursor:pointer}

/* Simple editing (project.simple): text, photos and links only, so the layout tools step aside */
html.simple .seg.modes [data-mode="functions"],html.simple #codeBtn,html.simple #rightTabs [data-tab="theme"],html.simple #rightTabs [data-tab="behaviors"],
html.simple .pg-add,html.simple .mbar [data-m="add"],html.simple #rightTabs [data-tab="layers"],
html.simple .msheet [data-mode="functions"],html.simple .msheet [data-go="theme"],html.simple .msheet [data-go="behaviors"],html.simple .msheet [data-go="code"],html.simple .msheet [data-go="brief"],html.simple .msheet [data-go="lorem"]{display:none!important}

/* Versions: the name field and Save version share one row at the same height (wraps on narrow phones) */
.versions .v-lbl{display:block;font-size:12px;font-weight:500;color:var(--muted);margin:0 0 6px}
.versions .v-add{display:flex;gap:8px;align-items:stretch;margin-bottom:14px}
.versions .v-add input{flex:1 1 180px;min-width:0}
.versions .v-add .btn{flex:none}
@media (max-width:380px){.versions .v-add{flex-wrap:wrap}.versions .v-add .btn{flex:1 1 100%}}
/* Add panel: blocks for the other kind of project, and the filter line */
.lib-other{display:inline-block;margin-left:6px;padding:0 6px;border-radius:999px;border:1px solid var(--line);font:500 10px var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);vertical-align:1px}
.lib-for{margin:6px 0 0;font-size:12px}
.lib-for:empty{display:none}
.lib-for .ln-link{padding:0;font-size:12px}
.pg-towns{display:grid;gap:4px;margin:10px 0}
.pg-towns .btn{justify-self:start}
.pg-towns .note{margin:0}
.towns-dlg{display:grid;gap:10px}
/* Inspector › Navbar style */
.nav-styles .note{margin:0 0 8px}
.nav-style-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.nav-style{display:grid;gap:2px;text-align:left;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--chrome);color:var(--text);font:inherit;cursor:pointer;min-width:0}
.nav-style b{font-size:12.5px;font-weight:600;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.nav-style small{font-size:11.5px;color:var(--muted);line-height:1.35}
.nav-style:hover{border-color:color-mix(in srgb,var(--ice) 50%,var(--line))}
.nav-style.on{border-color:var(--ice);box-shadow:0 0 0 1px var(--ice) inset}
.nav-style .lock-badge{position:static;font-style:normal}
@media (max-width:600px){.nav-style-grid{grid-template-columns:minmax(0,1fr)}}
/* Test mode (this account pays with Stripe test cards): a small pill over the builder */
.sb-test-pill{position:fixed;z-index:400;left:50%;top:calc(var(--top-b,52px) + 6px);transform:translateX(-50%);display:flex;align-items:center;gap:6px;max-width:calc(100vw - 24px);padding:5px 12px;border-radius:999px;background:#f5a524;color:#1f1400;font-size:12px;box-shadow:0 6px 18px rgba(0,0,0,.35);pointer-events:none}
.sb-test-pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-test-pill[hidden]{display:none}
body:has(#preview:not([hidden])) .sb-test-pill{display:none} /* the preview is the site as visitors see it: nothing over it */

/* ---------- Inspector extras: tip, find, heading formatting, gradients, focus photo ---------- */
.bp-bar.d span{flex:1}
.bp-bar .bp-x{border:0;background:none;color:inherit;cursor:pointer;font-size:15px;line-height:1;padding:0 2px;opacity:.7}
.bp-bar .bp-x:hover{opacity:1}
.fld .ovr.d{color:var(--muted);font-weight:500}
.fld .ovr.d button{color:var(--muted)}
.insp-mode{display:flex;margin-bottom:10px}
.insp-mode button{flex:1 1 0}
.insp-more{display:flex;width:auto;box-sizing:border-box;margin:6px 0 4px;justify-content:center;white-space:normal;text-align:center}
.insp-find{display:flex;gap:6px;align-items:center;margin-bottom:10px}
.insp-find input{flex:1;min-width:0}
.hed{border:1px solid var(--line);border-radius:8px;background:var(--chrome);overflow:hidden}
.hed-bar{display:flex;flex-wrap:wrap;gap:2px;padding:4px;border-bottom:1px solid var(--line);background:var(--panel-2)}
.hed-bar button{min-width:28px;height:26px;border:0;border-radius:5px;background:none;color:var(--text);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.hed-bar button:hover{background:color-mix(in srgb,var(--text) 10%,transparent)}
.hed-sw{width:14px;height:14px;border-radius:4px;display:block}
.hed-in{min-height:44px;padding:8px 10px;outline:none;font-size:14px;line-height:1.4;color:var(--text);overflow-wrap:anywhere}
.hed-in:focus{box-shadow:inset 0 0 0 2px var(--violet)}
.hed-in .hl{color:var(--hed-a)}.hed-in .hl-p{color:var(--hed-p)}.hed-in .hl-g{background:linear-gradient(90deg,var(--hed-p),var(--hed-a));-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-ed{display:flex;align-items:center;gap:5px;margin-top:6px;flex-wrap:wrap}
.grad-ed input[type=color]{width:30px;height:26px;padding:0;border:1px solid var(--line);border-radius:6px;background:none;cursor:pointer}
.grad-ed .unit{width:76px}
.grad-ed.on .btn{border-color:var(--ice)}
.focus-photo{display:block;position:relative;width:fit-content;max-width:100%;margin-top:8px;padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:crosshair;background:var(--panel-2)}
.focus-photo img{display:block;max-width:100%;max-height:160px;width:auto;height:auto}
.focus-photo i{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 2px rgba(0,0,0,.5),inset 0 0 0 2px rgba(0,0,0,.35);pointer-events:none}
.pv-w{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:12px}
.pv-w input{width:96px}
/* toasts: small, low on the screen and out of the way; a click closes one */
.toast{bottom:calc(34px + env(safe-area-inset-bottom,0px));font-size:13px;padding:8px 14px;max-width:min(440px,calc(100% - 32px));box-shadow:0 10px 30px rgba(0,0,0,.3)}
.toast.show{pointer-events:auto;cursor:pointer}
@media (max-width:1180px){.toast{bottom:calc(var(--mbar-h, 56px) + 12px)}}
/* the canvas's right-click menu */
.cv-menu{min-width:230px}
.menu-pop hr{border:0;border-top:1px solid var(--line);margin:4px 2px}
.menu-pop button{color:var(--text)}
.menu-pop button.danger{color:var(--danger,#e5484d)}
.menu-pop button svg{flex:none;opacity:.8}
/* the top bar's logo is a button home (the launcher): no button chrome */
.brand-home{background:none;border:0;padding:2px 4px;margin:-2px -4px;border-radius:8px;cursor:pointer;color:inherit;font:inherit}
.brand-home:hover{background:var(--panel-2)}
.brand-home:focus-visible{outline:2px solid var(--ice);outline-offset:2px}

/* ============================================================
   Any screen size: the edges past the everyday sizes
   ============================================================ */
/* Short screens (a phone on its side, a small laptop window): the top bar and the bottom bar slim down and the
   sheets take nearly all the height, since there is so little of it */
@media (max-width:1180px) and (max-height:500px){
  :root{--mbar-h:calc(44px + env(safe-area-inset-bottom,0px))}
  .top{min-height:44px;padding-block:4px}
  .mbar button{flex-direction:row;gap:7px;font-size:12px;margin:4px 2px}
  .mbar button svg{width:18px;height:18px}
  .panel{height:calc(100% - var(--mbar-h) - 10px);height:calc(100dvh - var(--mbar-h) - 10px)}
  :root{--peek-h:58vh}
  @supports (height:1dvh){:root{--peek-h:58dvh}}
  .modal{align-items:center;padding:8px}
  .modal .sheet{max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px)}
}
/* ...and wide enough to share it (a phone on its side): the sheets open from the sides at full height with the
   canvas live beside them, instead of covering it from below */
@media (max-width:1180px) and (max-height:500px) and (min-width:600px){
  .top{height:44px}
  .panel,.panel.peek,.right.peek{top:calc(44px + env(safe-area-inset-top,0px));bottom:var(--mbar-h);height:auto;max-width:none;margin:0;width:min(400px,52vw);border-radius:0;border:0;border-left:1px solid var(--line)}
  .right{left:auto;right:0;transform:translateX(calc(100% + 20px))}
  .left{left:0;right:auto;border-left:0;border-right:1px solid var(--line);transform:translateX(calc(-100% - 20px))}
  .panel>.sheet-grab{display:none}
  html.edit-peek .canvas{padding-bottom:0;padding-right:calc(min(400px,52vw) + 8px)}
}
/* Big screens: the side panels grow with the screen, so the settings stay easy to read beside a big canvas */
@media (min-width:1920px){:root{--lw-d:316px;--rw-d:368px}}
@media (min-width:2560px){:root{--lw-d:344px;--rw-d:404px}}

/* Continue with ChatGPT on the sign-in screens */
.acct-alt-sign{display:grid;gap:8px;margin-top:14px;text-align:center}
.acct-or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12.5px}
.acct-or::before,.acct-or::after{content:"";flex:1;border-top:1px solid var(--line)}
.acct-cg{justify-content:center;padding:11px 16px;font-size:15px;border-radius:10px}
.acct-alt-sign small{color:var(--muted);font-size:12px}

/* Build it with AI (js/ui/ai.js AI.buildDialog) and its launcher card */
.ln-ai{display:flex;align-items:center;gap:14px;width:100%;margin:6px 0 18px;padding:16px 18px;border-radius:14px;border:1px solid transparent;background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--sv-grad,linear-gradient(120deg,var(--ice),var(--ice))) border-box;color:var(--text);text-align:left;cursor:pointer;font:inherit}
.ln-ai>svg{flex:none;color:var(--ice)}
.ln-ai>span:first-of-type{flex:1;min-width:0;display:grid;gap:3px}
.ln-ai b{font-size:16px}
.ln-ai small{color:var(--muted);font-size:13px;line-height:1.45;text-wrap:pretty}
.ln-ai-go{flex:none;display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ice);font-size:13.5px}
@media (max-width:600px){.ln-ai-go{display:none}}
.aib{display:grid;gap:12px}
.aib-lead{margin:0;color:color-mix(in srgb,var(--text) 85%,var(--muted));text-wrap:pretty}
.aib-using{display:flex;align-items:center;gap:6px;margin:0;font-size:13px;color:var(--muted)}
.aib-using svg{color:var(--ok)}
.aib-step{display:grid;gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--chrome)}
.aib-step>b{font-size:14px}
.aib-step>p{margin:0;font-size:13px;color:var(--muted);text-wrap:pretty}
.aib-acts{display:flex;flex-wrap:wrap;gap:8px}
.aib-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:-4px}
.aib-chips .chip-btn:hover{color:var(--text);border-color:var(--muted)}
.aib-using .linkish{border:0;background:none;padding:0;color:var(--ice);font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.aib-gaps{padding:10px 12px;border:1px solid var(--line);border-left:3px solid var(--ice);border-radius:10px;font-size:13px;text-wrap:pretty}
.aib-gaps.warn{border-left-color:var(--warn)}.aib-gaps.ok{border-left-color:var(--ok)}.aib-gaps.ok svg{color:var(--ok);vertical-align:-2px}
.aib-gaps ul{margin:6px 0 0;padding-left:18px;display:grid;gap:4px;color:var(--muted)}
.aib-gaps li.need b{color:var(--warn)}
.aib-done{display:grid;gap:10px}.aib-done p{margin:0;text-wrap:pretty}
.aib-done-head{display:flex;align-items:center;gap:8px}.aib-done-head.ok svg{color:var(--ok)}.aib-done-head.warn svg{color:var(--warn)}
.aib-left{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.aib-left li{display:grid;gap:2px;padding:8px 10px;border:1px solid var(--line);border-left:3px solid var(--muted);border-radius:8px;font-size:13px}
.aib-left li.error{border-left-color:var(--danger)}.aib-left li.warn{border-left-color:var(--warn)}
.aib-left small{color:var(--muted)}
.aib-gpt-panel textarea{width:100%;box-sizing:border-box;font:12px/1.5 var(--mono);color:var(--muted);background:var(--chrome);border:1px solid var(--line);border-radius:8px;padding:8px;resize:vertical}

/* Find and replace (js/ui/words.js W.replaceDialog) */
.fr-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fr-opts{display:flex;flex-wrap:wrap;gap:6px 16px;margin:2px 0 6px}
.fr-opts .chk{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer}
.fr-list{display:grid;gap:4px;max-height:min(46vh,420px);overflow:auto}
.fr-hit{display:grid;gap:2px;text-align:left;border:1px solid var(--line);background:var(--panel-2);border-radius:8px;padding:7px 10px;cursor:pointer;color:var(--text);font:inherit}
.fr-hit:hover{border-color:var(--ice)}
.fr-hit small{color:var(--muted);font-size:11.5px}
.fr-hit span{font-size:13px;overflow-wrap:anywhere}
.fr-hit mark{background:color-mix(in srgb,var(--ice) 35%,transparent);color:inherit;border-radius:3px;padding:0 1px}
@media (max-width:600px){.fr-row{grid-template-columns:minmax(0,1fr)}}


/* ============================================================
   The + button (compact screens): add blocks, pages and use the AI,
   above the bottom bar on the right; it steps aside while a sheet,
   the keyboard or simple editing is on. Account and Dashboard sit at
   the bar's right end, with a dot for new leads.
   ============================================================ */
.mfab{display:none}
.mbar button{position:relative}
.mbar-dot{position:absolute;top:8px;left:calc(50% + 6px);width:8px;height:8px;border-radius:50%;background:var(--danger,#ff4d6d);box-shadow:0 0 0 2px var(--chrome)}
@media (max-width:1180px){
  .mfab{display:block;position:fixed;right:14px;bottom:calc(var(--mbar-h) + 14px);z-index:66}
  html.fab-off .mfab,html.kb .mfab,html.simple .mfab{display:none}
  .mfab-btn{display:grid;place-items:center;width:56px;height:56px;border:0;border-radius:50%;cursor:pointer;background:var(--ice);color:var(--on-ice,#001014);box-shadow:0 12px 28px -10px rgba(0,0,0,.65)}
  .mfab-btn svg{transition:transform .2s ease}
  .mfab.open .mfab-btn svg{transform:rotate(45deg)}
  .mfab-btn:focus-visible{outline:2px solid var(--text);outline-offset:3px}
  .mfab-btn:active{transform:scale(.95)}
  .mfab-menu{position:absolute;right:66px;bottom:0;display:grid;gap:6px;width:min(320px,calc(100vw - 94px));max-height:calc(var(--vvh,100dvh) - var(--mbar-h) - 90px);overflow-y:auto;padding:10px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 44px rgba(0,0,0,.45);animation:m-pop .16s ease both;transform-origin:bottom right} /* beside the + button, down to its foot: no empty strip under it */
  .mfab-menu[hidden]{display:none}
  .mfab-menu h5{margin:4px 4px 0;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .mfab-menu .ms-item{width:100%;min-height:52px}
  .mfab-menu .ms-item:is(:hover,:focus-visible){outline:none;border-color:var(--ice)}
}
@media (max-width:1180px) and (prefers-reduced-motion:reduce){.mfab-menu{animation:none}.mfab-btn svg{transition:none}}

/* ============================================================
   Simpler building
   ============================================================ */
/* a toast with an action (Undo after a delete) */
.toast.has-act{pointer-events:auto;display:flex;align-items:center;gap:12px}
.toast-act{border:0;background:none;color:var(--ice);font:inherit;font-weight:700;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;padding:6px 4px;min-height:36px}
:root[data-theme="light"] .toast-act{color:#0a7f8f}
@media (max-width:1180px){
  /* the Edit sheet: Inspect and Layers; Theme, Behaviors and Site settings open from More (their tab shows while open) */
  #rightTabs [data-tab="theme"],#rightTabs [data-tab="behaviors"],#rightTabs [data-tab="project"]{display:none}
  #rightTabs [data-tab][aria-selected="true"]{display:block}
  /* the selection toolbar, above the bottom bar */
  .selbar{position:fixed;left:0;right:0;bottom:var(--mbar-h);z-index:64;background:var(--panel);border-top:1px solid var(--line);box-shadow:0 -10px 24px -16px rgba(0,0,0,.6);animation:m-rise .18s ease both}
  .selbar[hidden]{display:none}
  .selbar-in{display:flex;align-items:stretch;gap:0;overflow-x:auto;scrollbar-width:none;padding:4px}
  .selbar-in::-webkit-scrollbar{display:none}
  .selbar-name{flex:none;align-self:center;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 8px 0 4px;font-size:12px;color:var(--muted);font-weight:600}
  .selbar button{flex:1 0 52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:52px;min-height:54px;padding:4px 2px;white-space:nowrap;border:0;border-radius:10px;background:none;color:var(--text);font:inherit;font-size:11px;font-weight:600;cursor:pointer}
  .selbar button svg{color:var(--ice)}
  .selbar button:active{background:var(--panel-2);transform:scale(.96)}
  .selbar button.danger,.selbar button.danger svg{color:var(--danger,#ff4d6d)}
  html.selbar-on .mfab{bottom:calc(var(--mbar-h) + 76px)}
  html.selbar-on .toast{bottom:calc(var(--mbar-h) + 76px)}
}
@media (max-width:1180px) and (prefers-reduced-motion:reduce){.selbar{animation:none}}
/* phones: Publish takes Export's place on the top bar (Export is in More › Finish and share) */
@media (max-width:600px){#publishBtn:not([hidden]) ~ #exportBtn{display:none}}
/* the Add panel: Suggested next for this page */
.lib-suggest{margin:4px 0 10px;padding:10px;border:1px solid color-mix(in srgb,var(--ice) 35%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--ice) 5%,transparent)}
.lib-suggest[hidden]{display:none}
.lib-suggest-h{display:flex;align-items:center;gap:6px;margin:0 0 8px;font-size:12px;font-weight:600;color:var(--muted)}
.lib-suggest-h svg{color:var(--ice)}
.lib-suggest-row{display:flex;flex-wrap:wrap;gap:6px}
.lib-sug{display:inline-flex;align-items:center;gap:5px;min-height:34px}
/* Go live › Ready to go live: five steps, each with the one button that does it */
.golive{margin:0 0 14px;padding:14px;border:1px solid color-mix(in srgb,var(--ice) 35%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--ice) 5%,var(--chrome))}
.golive-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.golive-h b{font-size:15px}
.golive-h span{font-size:12px;color:var(--muted)}
.golive-bar{height:6px;margin:8px 0 12px;border-radius:99px;background:var(--panel-2);overflow:hidden}
.golive-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--ok),var(--ice));transition:width .4s ease}
.golive-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.golive-list li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.golive-n{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--muted)}
.golive-list li.ok .golive-n{background:color-mix(in srgb,var(--ok) 18%,transparent);border-color:var(--ok);color:var(--ok)}
.golive-t{flex:1 1 140px;display:grid;min-width:0}
.golive-t b{font-size:13px}
.golive-list li.ok .golive-t b{color:var(--muted)}
.golive-t small{font-size:11.5px;color:var(--muted)}
.golive-list .btn{flex:none}
.golive-more{margin:12px 0 0;font-size:11.5px;color:var(--muted)}
/* Two ways to put it online (a builder plan without hosting): export it, or publish with Silvea */
.host-ways{display:grid;gap:10px;margin:0 0 14px}
.host-ways-h{margin:0;font-weight:600}
.host-way{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--chrome)}
.host-way.hi{border-color:color-mix(in srgb,var(--ice) 45%,var(--line));background:color-mix(in srgb,var(--ice) 5%,var(--chrome))}
.host-way-ic{grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--panel-2);color:var(--ice)}
.host-way>span:nth-child(2){display:grid;gap:4px;min-width:0}
.host-way small{color:var(--muted);font-size:12.5px;line-height:1.45}
.host-way .host-way-price{color:var(--text)}
.host-inc{font-style:normal;font-weight:600;color:var(--ok)}
.host-way-act{grid-column:2;display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.golive-acts{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.host-way .host-way-after{color:var(--muted);border-top:1px dashed var(--line);padding-top:6px;margin-top:2px}

/* ============================================================
   Drag and drop builder: Pro mode parts, the Inspector's header,
   Hide on, Each side, Finish your site, the Add panel's tabs
   ============================================================ */
/* Pro mode (A.pro: the team, Site › Builder) shows the code tools; everyone else never sees them */
html:not(.pro) .pro-only{display:none!important}
/* the Inspector's header: what it is, its own name (typed in place), and what can be done to it */
.insp-head{display:flex;align-items:center;gap:6px;margin-bottom:10px;min-width:0}
.insp-head .chip{flex:none}
.insp-head input.insp-name{flex:1 1 auto;min-width:0;border-color:transparent;background:transparent;padding:4px 6px;font-weight:600;font-size:14px;text-overflow:ellipsis}
.insp-head input.insp-name:hover{border-color:var(--line)}
.insp-head input.insp-name:focus{border-color:var(--ice);background:var(--chrome)}
.insp-head input.insp-name::placeholder{color:var(--text);opacity:.85}
.insp-acts{display:flex;gap:2px;flex:none}
.insp-acts .icon-btn{color:var(--muted)}
.insp-acts .icon-btn:hover,.insp-acts .icon-btn[aria-pressed="true"]{color:var(--text);background:var(--panel-2)}
.insp-acts .icon-btn.danger:hover{color:var(--danger,#e5484d)}
.insp-find[hidden]{display:none}
/* Hide on: three switches in a row, any of them on */
.hide-on .seg{display:flex}
.hide-on .seg button{flex:1 1 0}
.hide-on .seg button[aria-pressed="true"]{color:var(--warn,#d29200)}
/* Spacing › Each side in pixels: the box model, opened on request in Quick */
.sp-toggle{align-self:flex-start;margin:2px 0 8px}
.sp-toggle[aria-pressed="true"]{color:var(--ice)}
.sp-each[hidden]{display:none}
/* Finish your site (nothing selected) */
.finish{border:1px solid var(--line);border-radius:12px;background:var(--panel-2);padding:10px 12px;margin:4px 0 14px;display:grid;gap:8px}
.finish-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.finish-h b{font-size:14px}
.finish-h span{font-size:12px;color:var(--muted);white-space:nowrap}
.finish-bar{height:5px;border-radius:999px;background:color-mix(in srgb,var(--line) 70%,transparent);overflow:hidden}
.finish-bar i{display:block;height:100%;border-radius:inherit;background:var(--ice);transition:width .3s var(--ease)}
.finish-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px}
.finish-ic{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;flex:none}
.finish-row.done .finish-ic{background:var(--ok);border-color:var(--ok);color:#fff}
.finish-t{display:grid;gap:1px;min-width:0}
.finish-t b{font-size:13px;font-weight:600}
.finish-t small{font-size:11.5px;color:var(--muted);line-height:1.35}
.finish-row.done .finish-t b{color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 60%,transparent)}
.file-list .plain{font-family:var(--sv-body,ui-sans-serif,system-ui,sans-serif);font-size:13px}
/* the Add panel: Sections and Elements, then one Filter menu */
.lib-tabs{display:flex;margin:0 0 8px}
.lib-tabs button{flex:1 1 0;font-weight:600}
.lib-row2{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lib-row2 .cat-jump{flex:1 1 120px;margin:0}
.lib-fbtn{display:inline-flex;align-items:center;gap:5px;flex:none;border:1px solid var(--line);background:var(--chrome);color:var(--muted);border-radius:8px;padding:5px 9px;font-size:12.5px;font-weight:600;cursor:pointer;max-width:100%}
.lib-fbtn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lib-fbtn:hover{color:var(--text);border-color:var(--muted)}
.lib-fbtn.on{color:var(--ice);border-color:var(--ice)}
.lib-fmenu{min-width:220px}
.lib-fmenu button i{width:14px;flex:none}
.lib-fmenu button[aria-checked="true"]{color:var(--ice);font-weight:600}
/* More sheet: Pro mode for the team */
.ms-pro{display:flex;align-items:center;gap:10px;margin-top:8px}
.ms-pro>span{font-size:13px;color:var(--muted);flex:none}
.ms-pro .seg{flex:1}
#rightBody .insp-head input.insp-name{border-color:transparent;background:transparent;box-shadow:none}
#rightBody .insp-head input.insp-name:hover{border-color:var(--line)}
#rightBody .insp-head input.insp-name:focus{border-color:var(--ice);background:var(--chrome)}
.crumbs .in{color:var(--muted);margin-right:2px}
.tok-chips .tok-btn{display:inline-flex;align-items:center;gap:5px;border:0;background:none;color:var(--muted);font-size:12px;font-weight:600;padding:3px 2px;cursor:pointer}
.tok-chips .tok-btn:hover{color:var(--ice)}
.tok-menu small{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Keyboard shortcuts (A.shortcuts, press ?) */
.keys .h{margin:14px 0 6px}
.keys .h:first-child{margin-top:0}
.keys-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 14px;align-items:center;font-size:13px}
.keys-grid>span:first-child,.keys-grid>span:nth-child(odd){color:var(--muted);white-space:nowrap}