/* THE STUDIO — THE CHROME LAW (CEO 2026-11-01): the EDITOR chrome is Wix-exact —
   icon toolbar, light panels, Wix blue, cards with subtle shadows, layer rows
   with icons — from study/wix/ + study/blender-proper/ (the doctrine:
   docs/studio-ui-study.md). The COMPOSED SITES keep their own design: this
   skin styles the editor only, never the preview bytes.
   Proportions stay Blender's: the canvas is king, panels are thin edges. */
:root {
  color-scheme: light;
  --bg: #eef1f6;             /* the canvas backdrop — Wix's cool gray stage */
  --panel: #ffffff;          /* the chrome panels — Wix white */
  --panel-2: #f5f6f8;        /* inputs, quiet fills */
  --ink: #1f2430;            /* near-black text */
  --soft: #5f6673;
  --faint: #98a0ac;
  --line: rgba(16,24,40,.08);
  --line-2: rgba(16,24,40,.14);
  --accent: #116dff;         /* Wix blue */
  --accent-soft: rgba(17,109,255,.1);
  --red: #e03e52;
  --green: #2ba45e;
  --shadow-1: 0 1px 2px rgba(16,24,40,.06), 0 2px 8px rgba(16,24,40,.08);   /* Wix card */
  --shadow-2: 0 4px 12px rgba(16,24,40,.1), 0 2px 4px rgba(16,24,40,.06);   /* hover/popover */
  --shadow-3: 0 12px 40px rgba(16,24,40,.16), 0 2px 8px rgba(16,24,40,.08); /* the floating page */
  --paper: #fbfaf8;          /* the page sheet's paper (light as designed) */
}


/* ---- THE DARK EDITOR — DORMANT (retired 2026-11-12, Wix parity). The
   chrome is PINNED LIGHT by the boot script: Wix Studio's editor never
   follows the site or the OS (a white bar over a gray stage; the site's own
   theme lives inside the canvas). This block is kept only as the palette a
   future opt-in dark chrome would reuse — nothing sets data-theme="dark"
   on the chrome today. ---- */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #14161a;
  --panel: #1b1e24;
  --panel-2: #242830;
  --ink: #e8eaf0;
  --soft: #9aa1ad;
  --faint: #6b7280;
  --line: rgba(255,255,255,.09);
  --line-2: rgba(255,255,255,.16);
  --accent-soft: rgba(17,109,255,.22);
  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
  --shadow-2: 0 4px 14px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.3);
  --shadow-3: 0 12px 44px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
  --paper: #23262c; /* the sheet dims with the editor; the site's own design is inside the iframe */
}
html[data-theme="dark"] *::-webkit-scrollbar-thumb { background: #3a3f4a; }
html[data-theme="dark"] .top button.primary:hover { background: #3d8aff; }

* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: #c9cdd6 transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: #c9cdd6; border-radius: 3px; }
*::-webkit-scrollbar-track { background: transparent; }
/* THE NO-CROP LAW (2026-11-10): the chrome is a full-height flex column —
   the top bar takes its OWN natural height and the editor fills what's
   left. No `calc(100vh - 49px)` anywhere: the old arithmetic hardcoded the
   header at 49px, so a wrapped bar / zoom / different font metrics made the
   page taller than the viewport and cropped it. The browser now does the
   math. */
body { margin: 0; background: var(--bg); color: var(--ink); font: 13px/1.5 system-ui, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
::selection { background: rgba(17,109,255,.18); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button { background: none; border: none; color: var(--ink); font: inherit; cursor: pointer; padding: 0; text-align: left; }

/* ---- topbar: the slim Wix icon toolbar (three-zone grid — the device
   toggles sit geometrically centered, undo/redo + Save at the right) ---- */
header.top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 48px; padding: 0 14px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.top-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.top .brand { font-weight: 700; font-size: 13px; letter-spacing: .01em; color: var(--ink); }
.top .model { color: var(--soft); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-right { display: flex; align-items: center; gap: 8px; justify-self: end; min-width: 0; }
.top .device { display: flex; gap: 2px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 2px; }
.top .device button {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  padding: 3px 12px; border-radius: 6px; color: var(--faint); text-align: center;
}
.top .device button svg { width: 15px; height: 15px; display: block; }
.top .device .dev-label { font-size: 9px; letter-spacing: .04em; font-weight: 500; }
.top .device button:hover { color: var(--ink); }
.top .device button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.top .ibtn, .top button.ghost {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 7px; color: var(--soft);
  border: 1px solid transparent;
}
.top .ibtn svg, .top button.ghost svg { width: 15px; height: 15px; display: block; }
.top .ibtn:hover, .top button.ghost:hover { background: var(--panel-2); color: var(--ink); border-color: var(--line); }
.top-sep { width: 1px; height: 18px; background: var(--line); margin: 0 2px; }
.top select { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; font: inherit; font-size: 12px; }
.top .laws { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--soft); white-space: nowrap; }
.top .laws::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.top .laws.bad { color: var(--red); }
.top .laws.bad::before { background: var(--red); }
.top button.primary { background: var(--accent); color: #fff; font-weight: 600; border-radius: 7px; padding: 6px 16px; font-size: 12.5px; box-shadow: var(--shadow-1); }
.top button.primary:hover { background: #0d5cda; }

/* ---- the frame ---- */
main.studio { display: grid; grid-template-columns: 248px minmax(0, 1fr) 272px; grid-template-rows: minmax(0, 1fr); flex: 1 1 auto; min-height: 0; }
main.studio.no-right { grid-template-columns: 248px minmax(0, 1fr); }
.panel { background: var(--panel); overflow: auto; }
.panel#left { border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.panel#right { border-left: 1px solid var(--line); padding: 14px; }
.panel h3 { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); margin: 14px 0 8px; }
.panel h3:first-child { margin-top: 0; }

/* left shelf: Wix-style icon tiles over the panel */
.tabs { display: flex; gap: 6px; padding: 10px 10px 4px; }
.tabs button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 9px 0 7px; border-radius: 9px; text-align: center; color: var(--soft);
  border: 1px solid transparent;
}
.tabs button svg { width: 16px; height: 16px; display: block; }
.tabs button span { font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.tabs button:hover { color: var(--ink); background: var(--panel-2); }
.tabs button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.tab-body { flex: 1; overflow: auto; padding: 10px; }

/* library: the visual grid — Wix cards with subtle shadows */
#lib-search { width: 100%; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; font: inherit; font-size: 12.5px; margin-bottom: 10px; }
#lib-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.lib-item { margin-bottom: 16px; cursor: grab; }
.lib-item .thumb { aspect-ratio: 16 / 10; border-radius: 9px; overflow: hidden; border: 1px solid var(--line); background: var(--paper); position: relative; transition: border-color .15s, box-shadow .15s, transform .15s; box-shadow: var(--shadow-1); }
.lib-item:hover .thumb { border-color: var(--accent); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.lib-item .thumb iframe { width: 480px; height: 300px; border: none; transform-origin: 0 0; pointer-events: none; position: absolute; inset: 0; }
.cat-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.cat-tabs button { border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; font-size: 10.5px; color: var(--soft); background: var(--panel); }
.cat-tabs button:hover { color: var(--ink); border-color: var(--line-2); }
.cat-tabs button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.lib-cat { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); margin: 14px 0 8px; }
.lib-cat:first-child { margin-top: 0; }
.lib-item .vars { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.lib-item .vars .vcard { border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: var(--panel); cursor: pointer; box-shadow: var(--shadow-1); transition: box-shadow .15s, border-color .15s; }
.lib-item .vars .vcard:hover { border-color: var(--accent); box-shadow: var(--shadow-2); }
.lib-item .vars .vcard[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-1); }
.lib-item .vars .vthumb { aspect-ratio: 16/10; position: relative; overflow: hidden; background: var(--paper); }
.lib-item .vars .vthumb iframe { width: 480px; height: 300px; border: none; transform-origin: 0 0; pointer-events: none; position: absolute; inset: 0; }
.lib-item .vars .vlabel { font-size: 10px; color: var(--soft); padding: 3px 6px; text-align: center; }
.lib-item .vars .vcard[aria-pressed="true"] .vlabel { color: var(--accent); font-weight: 600; }
.lib-item .cap { display: flex; align-items: baseline; justify-content: space-between; margin-top: 6px; }
.lib-item .cap .kind { font-weight: 600; font-size: 12.5px; }
.lib-item .cap .variants { color: var(--faint); font-size: 10.5px; }
.lib-item.selected .thumb { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-1); }
.lib-item.selected .cap .kind { color: var(--accent); }

/* layers: Wix rows with icons — the glyph rides ::before as an SVG mask
   (layers.js builds rows without icon nodes; the chrome dresses them) */
.layer-group { margin-bottom: 16px; }
.layer-group .slot-name { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); margin-bottom: 6px; }
.layer-group .slot-name::before {
  content: ""; width: 12px; height: 12px; flex: none;
  background-color: var(--faint);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.2 11 3.8 6 6.4 1 3.8Z' fill='none' stroke='black' stroke-width='1' stroke-linejoin='round'/%3E%3Cpath d='m1 7.6 5 2.6 5-2.6' fill='none' stroke='black' stroke-width='1' stroke-linejoin='round'/%3E%3Cpath d='m1 10 5 2.6 5-2.6' fill='none' stroke='black' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.2 11 3.8 6 6.4 1 3.8Z' fill='none' stroke='black' stroke-width='1' stroke-linejoin='round'/%3E%3Cpath d='m1 7.6 5 2.6 5-2.6' fill='none' stroke='black' stroke-width='1' stroke-linejoin='round'/%3E%3Cpath d='m1 10 5 2.6 5-2.6' fill='none' stroke='black' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.layer-row { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border-radius: 7px; font-size: 12.5px; }
.layer-row:hover { background: var(--panel-2); }
.layer-row .name { flex: 1; display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.layer-row .name::before {
  content: ""; width: 12px; height: 12px; flex: none;
  background-color: var(--faint);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='1.5' y='1.5' width='9' height='9' rx='1.6' fill='none' stroke='black' stroke-width='1.1'/%3E%3Cpath d='M3.6 4.4h4.8M3.6 6.9h3' fill='none' stroke='black' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='1.5' y='1.5' width='9' height='9' rx='1.6' fill='none' stroke='black' stroke-width='1.1'/%3E%3Cpath d='M3.6 4.4h4.8M3.6 6.9h3' fill='none' stroke='black' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.layer-row .name:hover::before { background-color: var(--accent); }
.layer-row button { color: var(--faint); font-size: 11px; padding: 2px 4px; border-radius: 4px; }
.layer-row button:hover { color: var(--accent); background: var(--accent-soft); }
.layer-row button:nth-child(3):hover, .layer-row button:last-child:hover { color: var(--red); background: rgba(224,62,82,.08); }
.layer-empty { color: var(--faint); font-size: 11.5px; font-style: italic; padding: 4px 6px; }

/* center: the canvas is king — the page floats on the cool gray stage */
.center { display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--bg); position: relative; } /* NO-CROP LAW: flex column, not grid rows — the domain strip toggles display:none, which under grid-template-rows shifted every row and collapsed the canvas */
.canvas-scroll { overflow: auto; padding: 24px 26px; min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; } /* PKG-035 canvas: vertical 26→24 — the full-height fill must clear the ≥780 gate on a 900px viewport (781px). NO-CROP LAW: flex column so the frame can fill the row instead of a calc(). */
/* G9 author-facing half: the domain strip — the site's live URL inline
   above the canvas (their pixels: the *.wixstudio.io URL + Connect Domain).
   Typography-only: hairline under, soft ink, one text-button. */
.domain-strip { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 14px; font-size: 11.5px; color: var(--soft); background: var(--panel); border-bottom: 1px solid var(--line); }
.domain-strip.hidden { display: none; }
.domain-strip .ds-hint { letter-spacing: .05em; text-transform: uppercase; font-size: 10px; }
.domain-strip .ds-url { color: var(--ink); text-decoration: none; }
.domain-strip .ds-url:hover { color: var(--accent); }
.domain-strip .ds-copy { border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; padding: 0 2px; }
.domain-strip .ds-copy:hover { text-decoration: underline; }
.canvas-frame { max-width: 1160px; width: 100%; margin: 0 auto; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-3); transition: max-width .25s; background: var(--paper); position: relative; padding: 22px 0 0 22px; box-sizing: border-box; } /* PKG-035 canvas: position:relative anchors the blank invitation over the iframe; ISSUE-42: the 22px gutters carry the rulers. NO-CROP LAW: flex column so #preview fills below the 22px ruler gutter. */
.nn-ruler-x { position: absolute; top: 0; left: 22px; right: 0; height: 22px; width: calc(100% - 22px); background: var(--panel); border-bottom: 1px solid var(--line); }
.nn-ruler-y { position: absolute; top: 22px; left: 0; bottom: 0; height: calc(100% - 22px); width: 22px; background: var(--panel); border-right: 1px solid var(--line); }
.nn-ruler-corner { position: absolute; top: 0; left: 0; width: 22px; height: 22px; background: var(--panel); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.nn-ruler-chip { position: absolute; bottom: 8px; left: 30px; z-index: 20; font-size: 10.5px; font-family: var(--label, system-ui); color: var(--soft); background: color-mix(in srgb, var(--panel) 88%, transparent); border: 1px solid var(--line); border-radius: 5px; padding: 2px 7px; pointer-events: none; }
#btn-grid[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); }
/* G1/G2/G3: the Wix Studio parity set — the floating toolbar, the autosaved word, the bp W/H */
#nn-elem-toolbar { position: absolute; z-index: 300; display: flex; gap: 2px; background: var(--ink, #111); border-radius: 8px; padding: 4px 6px; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
#nn-elem-toolbar button { all: unset; cursor: pointer; color: #fff; font-size: 13px; padding: 3px 7px; border-radius: 5px; line-height: 1.2; }
#nn-elem-toolbar button:hover { background: rgba(255,255,255,.16); }
.autosaved { font-size: 11.5px; color: var(--soft); margin-right: 10px; white-space: nowrap; }
.bp-wh { font-size: 11.5px; color: var(--soft); margin-left: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* G4: the page switcher in the top bar */
.page-switch { position: relative; margin-left: 12px; }
.page-switch button { all: unset; cursor: pointer; font-size: 12.5px; color: var(--ink); padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); }
.page-switch button:hover { border-color: var(--accent); }
.page-switch-list { position: absolute; top: calc(100% + 4px); left: 0; z-index: 200; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-3); min-width: 160px; max-height: 260px; overflow: auto; }
.page-switch-row { all: unset; cursor: pointer; display: block; width: 100%; box-sizing: border-box; padding: 7px 12px; font-size: 12.5px; color: var(--ink); }
.page-switch-row:hover { background: var(--accent-soft); }
.view-live { font-size: 11.5px; color: var(--accent); text-decoration: none; margin-left: 12px; white-space: nowrap; }
.view-live.hidden { display: none; }
/* G8-v1: the comments panel */
.comments-list { display: grid; gap: 6px; margin-bottom: 8px; }
.comment-row { position: relative; border: 1px solid var(--line); border-radius: 8px; padding: 8px 22px 8px 10px; background: var(--panel-2); }
.comment-where { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; }
.comment-text { font-size: 12px; color: var(--ink); white-space: pre-wrap; }
.comment-add-row { display: grid; gap: 4px; }
.comment-where-in, .comment-add-text { width: 100%; box-sizing: border-box; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 12px; }
.comment-add-btn { all: unset; cursor: pointer; text-align: center; padding: 6px; border-radius: 6px; border: 1px solid var(--line); color: var(--soft); font-size: 12px; }
.comment-add-btn:hover { border-color: var(--accent); color: var(--ink); }
.comment-row.from-client { border-left: 3px solid var(--accent); }
/* ISSUE-40/G6-interaction: the breakpoint drag ladder */
.bp-drag-handle { position: absolute; top: 22px; bottom: 0; right: -3px; width: 9px; cursor: ew-resize; z-index: 30; background: linear-gradient(90deg, transparent, var(--accent-soft)); border-radius: 0 4px 4px 0; }
.bp-drag-handle:hover { background: var(--accent-soft); }
.bp-drag-label { position: fixed; z-index: 400; top: 60px; right: 30px; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--ink); background: var(--panel); border: 1px solid var(--accent); border-radius: 6px; padding: 3px 8px; pointer-events: none; }
/* G5: the saved assets shelf */
.assets-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.asset-tile { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.asset-tile:hover { border-color: var(--accent); }
.asset-kind { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.asset-name { font-size: 12px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-lib-name { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); margin: 8px 0 4px; }
/* ISSUE-45: the kiln's shelves + the media library tab */
.kiln-folders { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.kiln-folder { all: unset; cursor: pointer; font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--soft); }
.kiln-folder.on { background: var(--accent); color: #fff; border-color: var(--accent); }
#media-host .kiln-grid { max-height: none; }
/* ISSUE-47/ISSUE-custom: the author's own code snippets (Wix Custom Code) */
.custom-code { display: grid; gap: 4px; margin-bottom: 8px; }
.custom-label { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.custom-ta { width: 100%; box-sizing: border-box; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; font: 11.5px/1.5 ui-monospace, monospace; resize: vertical; }
/* the Wix add-dialog as a typography-only list — hairline rows, no cards */
.custom-row { border-bottom: 1px solid var(--line); }
.custom-row-head { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; cursor: pointer; }
.custom-row-name { font-size: 12.5px; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.custom-row-meta { margin-left: auto; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); white-space: normal; text-align: right; }
.custom-form, .custom-add-wrap { display: grid; gap: 8px; padding: 4px 0 12px; }
.custom-form[hidden], .custom-add-wrap[hidden] { display: none; }
.custom-field { margin-bottom: 0; }
.custom-select, .custom-name { width: 100%; box-sizing: border-box; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; font: inherit; font-size: 12.5px; }
.custom-apply, .custom-cancel, .custom-add { all: unset; cursor: pointer; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 7px 12px; border-radius: 7px; text-align: center; }
.custom-apply { background: var(--accent); color: #fff; }
.custom-cancel { border: 1px solid var(--line); color: var(--soft); margin-left: 6px; }
.custom-add { border: 1px solid var(--line); color: var(--soft); margin-top: 6px; }
.custom-add:hover, .custom-cancel:hover { color: var(--ink); border-color: var(--line-2); }
/* Wix's "Choose specific pages" picker — a typography-only checklist */
.custom-field[hidden] { display: none; }
.custom-pages { display: grid; gap: 3px; padding: 2px 0; }
.custom-page { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--soft); cursor: pointer; }
.custom-page input { accent-color: var(--accent); margin: 0; }
.custom-page:hover { color: var(--ink); }
.coll-record { display: flex; gap: 4px; align-items: center; }
.coll-record input { flex: 1; min-width: 0; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; font-size: 11.5px; }
.list-bind { align-items: center; }
.list-bind select { max-width: 200px; }
/* ISSUE-45/crop: the crop editor */
.crop-pop { position: fixed; inset: 0; z-index: 400; background: color-mix(in srgb, #000 55%, transparent); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.crop-title { color: #fff; font: 14px var(--label, system-ui); letter-spacing: .06em; text-transform: uppercase; }
.crop-canvas { background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; cursor: grab; touch-action: none; max-width: 92vw; }
.crop-aspects { background: var(--panel); padding: 4px; border-radius: 8px; }
.crop-actions { display: flex; gap: 8px; }
.crop-apply { all: unset; cursor: pointer; padding: 8px 18px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 13px; }
.crop-cancel { all: unset; cursor: pointer; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line); color: var(--soft); font-size: 13px; background: var(--panel); }
.canvas-frame.mobile { max-width: 390px; }
.canvas-frame.tablet { max-width: 768px; }
iframe#preview { border: none; width: 100%; height: auto; flex: 1 1 auto; min-height: 0; display: block; background: var(--paper); } /* NO-CROP LAW: the frame fills its row by flex, not by subtracting the header's height. Width stays free, so the mobile/tablet frames keep working (width changes, height fills) */
.status { display: flex; align-items: center; height: 28px; flex: 0 0 auto; padding: 0 12px; background: var(--panel); border-top: 1px solid var(--line); font-size: 11px; color: var(--soft); }
.status .hint { flex: 1; }
.status .saved { color: var(--green); }

/* inspector: titled Wix panels on white */
#right .sel-name { font-weight: 650; font-size: 15.5px; margin-bottom: 2px; }
#right .sel-kind { color: var(--faint); font-size: 11px; margin-bottom: 14px; }
#right .none { color: var(--soft); font-size: 12.5px; }
.prop { margin-bottom: 11px; position: relative; }
.prop label { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); margin-bottom: 4px; }
.prop input, .prop select { width: 100%; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; font: inherit; font-size: 12.5px; }
.prop input:focus, .prop select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.prop label .law-hint { margin-left: 6px; color: var(--faint); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 10px; }
.prop.tier-advanced label { color: var(--ink); }
.prop.tier-advanced label::after { content: "advanced"; color: var(--faint); text-transform: lowercase; letter-spacing: 0; font-weight: 400; margin-left: 6px; }
.prop.tier-berserk { background: rgba(224,62,82,.06); border: 1px solid rgba(224,62,82,.3); border-radius: 7px; padding: 8px; }
.prop.tier-berserk label { color: var(--red); }
.prop.tier-berserk label::after { content: "⚠ berserk — reconsider"; color: var(--red); text-transform: none; letter-spacing: 0; font-weight: 600; margin-left: 6px; }
.prop.law-broken { border-color: var(--red); }
.tierbox { border: 1px solid var(--line); border-radius: 9px; margin-bottom: 10px; background: var(--panel); box-shadow: var(--shadow-1); }
.tierbox summary { cursor: pointer; padding: 8px 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); border-radius: 9px; }
.tierbox[open] summary { border-bottom: 1px solid var(--line); }
.tierbox .tier-body { padding: 10px; }
.tierbox[data-broken="true"] { border-color: rgba(224,62,82,.4); }
.tierbox[data-broken="true"] summary { color: var(--red); }
.insp-sec { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); margin: 18px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--line); }
.var-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.var-card { border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: var(--panel); cursor: pointer; box-shadow: var(--shadow-1); transition: box-shadow .15s, border-color .15s; }
.var-card:hover { border-color: var(--accent); box-shadow: var(--shadow-2); }
.var-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-1); }
.var-card .vthumb { aspect-ratio: 16/10; position: relative; overflow: hidden; background: var(--paper); }
.var-card .vthumb iframe { width: 480px; height: 300px; border: none; transform-origin: 0 0; pointer-events: none; position: absolute; inset: 0; }
.var-card .vlabel { font-size: 10.5px; color: var(--soft); padding: 4px 6px; text-align: center; }
.var-card[aria-pressed="true"] .vlabel { color: var(--accent); font-weight: 600; }
#right button.revert { display: block; width: 100%; text-align: center; background: none; border: 1px solid var(--line); color: var(--soft); border-radius: 7px; padding: 7px 0; cursor: pointer; font-size: 12px; margin-top: 4px; }
#right button.revert:hover { color: var(--ink); border-color: var(--line-2); background: var(--panel-2); }

/* color widget (PKG-017): swatch button → popover (role grid, then hex+apply) */
.color-swatch { display: block; width: 100%; height: 26px; border: 1px solid var(--line-2); border-radius: 7px; cursor: pointer; padding: 0; }
.color-swatch:hover { border-color: var(--accent); }
.color-pop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; background: var(--panel); border: 1px solid var(--line-2); border-radius: 9px; padding: 10px; box-shadow: var(--shadow-2); }
.color-pop .role-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding-bottom: 9px; margin-bottom: 9px; border-bottom: 1px solid var(--line); }
.color-pop .role-chip { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px 4px; border: 1px solid transparent; border-radius: 7px; cursor: pointer; color: var(--soft); font-size: 9.5px; }
.color-pop .role-chip:hover { border-color: var(--line); color: var(--ink); background: var(--panel-2); }
.color-pop .role-chip i { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--line-2); display: block; }
.color-pop .hex-row { display: flex; gap: 6px; }
.color-pop .hex-input { flex: 1; min-width: 0; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 5px 9px; font: inherit; font-size: 12px; }
.color-pop .hex-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.color-pop .hex-input.bad { border-color: var(--red); }
.color-pop .hex-apply { background: none; border: 1px solid var(--line); border-radius: 7px; padding: 5px 12px; font-size: 11.5px; color: var(--soft); cursor: pointer; }
.color-pop .hex-apply:hover { color: var(--ink); border-color: var(--accent); }

/* first-run wizard modal — editor chrome, same skin */
#wizard-overlay { position: fixed; inset: 0; background: rgba(31,36,48,.45); display: grid; place-items: center; z-index: 50; }
#wizard-overlay.hidden { display: none; }
#wizard-overlay .sheet { width: 620px; max-height: 86vh; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 26px 28px; box-shadow: var(--shadow-3); }
#wizard-overlay h1 { font-weight: 650; font-size: 22px; margin: 0 0 6px; }
#wizard-overlay .sub { color: var(--soft); font-size: 13px; margin: 0 0 18px; }
#wizard-overlay .step { margin-bottom: 18px; }
#wizard-overlay .step h3 { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); margin: 0 0 8px; }
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.swatch { border: 1px solid var(--line); border-radius: 9px; padding: 10px; cursor: pointer; background: var(--panel); box-shadow: var(--shadow-1); }
.swatch:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); }
.swatch[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.swatch .dot { display: flex; gap: 4px; margin-bottom: 6px; }
.swatch .dot i { width: 14px; height: 14px; border-radius: 50%; display: block; border: 1px solid rgba(16,24,40,.1); }
.swatch .nm { font-size: 12.5px; color: var(--ink); }
.wiz-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.wiz-actions .opt { border: 1px solid var(--line-2); border-radius: 11px; padding: 16px; cursor: pointer; text-align: center; background: var(--panel); box-shadow: var(--shadow-1); }
.wiz-actions .opt:hover { border-color: var(--accent); box-shadow: var(--shadow-2); }
.wiz-actions .opt b { display: block; font-size: 13.5px; margin-bottom: 4px; }
.wiz-actions .opt span { color: var(--soft); font-size: 12px; }
.hidden { display: none !important; }

/* PKG-018 range */
.range-row { display: flex; align-items: center; gap: 8px; }
.range-row input[type="range"] { flex: 1; min-width: 0; width: auto; height: 22px; margin: 0; padding: 0; background: none; border: none; accent-color: var(--accent); cursor: ew-resize; }
.range-row input[type="range"]:focus { outline: none; }
.range-row .range-chip { flex: 0 0 auto; min-width: 62px; text-align: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; padding: 4px 8px; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--ink); cursor: ew-resize; user-select: none; touch-action: none; }
.range-row .range-chip:hover { border-color: var(--accent); }
.range-row .range-edit { flex: 0 0 auto; width: 72px; text-align: center; background: var(--panel-2); color: var(--ink); border: 1px solid var(--accent); border-radius: 7px; padding: 4px 8px; font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; }
.range-row .range-edit:focus { outline: none; }

/* PKG-035 canvas — the blank invitation: studio chrome positioned over the
   preview iframe while model.slots.main is empty (compose.js renders/hides it;
   the composed bytes stay pure — the invitation never crosses into the srcdoc). */
.blank-invite {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center; text-align: center;
  padding: 0 44px;
  background: var(--paper); /* the world's paper — the same sheet the preview shows */
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px; line-height: 1.6;
  color: #211f1c;
}

/* ---- PKG-019 list ---- */
.list-ctl { display: flex; flex-direction: column; gap: 6px; }
.list-rows { display: flex; flex-direction: column; }
.list-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; min-width: 0; }
.list-row + .list-row { border-top: 1px solid var(--line); }
.list-row .list-main { flex: 1.3; min-width: 0; width: auto; }
.list-row .list-href { flex: 1; min-width: 0; width: auto; color: var(--soft); }
.list-ops { display: flex; gap: 2px; flex: none; }
.list-ops button { color: var(--faint); font-size: 12px; padding: 2px 4px; line-height: 1; }
.list-ops button:hover { color: var(--ink); }
.list-ops button:disabled { opacity: .3; cursor: default; }
.list-ops .list-del:hover { color: var(--red); }
.list-addbar { margin-top: 2px; }
.list-add { display: block; width: 100%; color: var(--soft); font-size: 12px; padding: 4px 0; }
.list-add:hover { color: var(--ink); }

/* PKG-021 longtext — the growing textarea: same dressing as the text input,
   prose leading, no resize handle (the box grows itself) */
.prop textarea.longtext {
  width: 100%; background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px;
  font: inherit; font-size: 12.5px; line-height: 1.55;
  resize: none; overflow: hidden; display: block;
}
.prop textarea.longtext:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* PKG-022 tooltips — the ? affordance on every prop label (hover/focus speaks
   the spec's description) + the per-value ⟲ (WX-014's blue-Reset-per-field law) */
.prop label { padding-right: 30px; }
.prop-help {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; margin-left: 6px; padding: 0; vertical-align: 1px;
  border: 1px solid var(--line); border-radius: 50%; background: var(--panel-2);
  color: var(--faint); font-size: 9px; line-height: 1; cursor: help;
}
.prop-help:hover, .prop-help:focus { border-color: var(--accent); color: var(--accent); outline: none; }
.prop-help .q { display: block; }
.prop-help .tip {
  position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 230px; padding: 6px 9px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 7px;
  color: var(--ink); font-size: 11.5px; font-weight: 400; letter-spacing: 0;
  text-transform: none; line-height: 1.5; text-align: left;
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 30;
  box-shadow: var(--shadow-2);
}
.prop-help:hover .tip, .prop-help:focus .tip { opacity: 1; visibility: visible; }
/* ISSUE-64: the tooltip opens INSIDE the panel — anchored to the prop, not
   the icon, so the right panel's boundary never clips it */
.prop-help { position: static; }
.prop-help .tip { left: 10px; top: 20px; transform: none; }
.prop-reset {
  position: absolute; top: 0; right: 0; padding: 0 2px; line-height: 1.4;
  color: var(--faint); font-size: 12px;
}
.prop-reset:hover { color: var(--accent); }
.prop-reset[hidden] { display: none; }

/* PKG-031/032 — the dirty marker on the status bar: the one accent dot, no
   chrome (the .hidden utility carries the toggle; the draft flash reuses .saved) */
.status .dirty { color: var(--accent); margin-right: 12px; letter-spacing: .04em; }

/* ---- PKG-029 page — the no-selection Mirror edits the page itself ---- */
/* the identity rows reuse .prop dressing; only the hint is new — a door to
   the Shelf, not a dead prompt */
#right .page-hint {
  display: block; width: 100%; text-align: center;
  color: var(--soft); font-size: 12px; line-height: 1.5;
  border: 1px dashed var(--line-2); border-radius: 7px;
  padding: 9px 0; margin-top: 12px; cursor: pointer;
}
#right .page-hint:hover { color: var(--accent); border-color: var(--accent); }

/* ---- PKG-030 roles — the Role editor beneath the Page section ---- */
/* one row per world role: swatch + name, hairline separators; the popover
   reuses the PKG-017 .color-pop dressing (the row is its anchor) */
.role-list { display: flex; flex-direction: column; }
.role-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; position: relative; }
.role-row + .role-row { border-top: 1px solid var(--line); }
.role-row .role-swatch { width: 22px; height: 22px; flex: none; border: 1px solid var(--line-2); border-radius: 6px; cursor: pointer; padding: 0; }
.role-row .role-swatch:hover { border-color: var(--accent); }
.role-row .role-name { font-size: 12.5px; color: var(--ink); }
#right button.palette-reset {
  display: block; width: 100%; text-align: center;
  background: none; border: 1px dashed var(--line-2); color: var(--soft);
  border-radius: 7px; padding: 6px 0; cursor: pointer; font-size: 12px;
  margin-top: 8px;
}
#right button.palette-reset:hover { color: var(--ink); border-color: var(--line-2); }

/* ---- MEERA kiln (issues #4-#7) — append-only below this line ---- */
/* the entry law's marker: a required prop names itself in red beside its label */
.prop label .req { color: var(--red); font-size: 10px; letter-spacing: .04em; margin-left: 4px; }
/* the media control (issue #5): path input + preview chip + the Manage media door */
.media-ctl { display: flex; align-items: center; gap: 6px; position: relative; flex-wrap: wrap; }
.media-ctl .media-note { flex-basis: 100%; font-size: 11.5px; line-height: 1.45; margin-top: 2px; }
.media-ctl .media-path { flex: 1; min-width: 0; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 5px 9px; font: inherit; font-size: 12px; }
.media-ctl .media-path:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.media-ctl .media-thumb { width: 26px; height: 26px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line-2); flex: none; background: var(--panel-2); }
.media-ctl .media-manage { flex: none; border: 1px solid var(--line); border-radius: 7px; padding: 5px 9px; font-size: 11.5px; color: var(--soft); background: var(--panel); }
.media-ctl .media-manage:hover { color: var(--ink); border-color: var(--accent); }
/* the Kiln panel — the PKG-017 popover dressing, wider for the grid */
.kiln-pop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; background: var(--panel); border: 1px solid var(--line-2); border-radius: 9px; padding: 10px; box-shadow: var(--shadow-2); }
.kiln-tabs { display: flex; align-items: center; gap: 2px; margin-bottom: 8px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.kiln-tabs .kiln-tab { font-size: 11.5px; color: var(--soft); padding: 3px 8px; border-radius: 6px; }
.kiln-tabs .kiln-tab.on { color: var(--accent); background: var(--accent-soft); }
.kiln-tabs .kiln-close { margin-inline-start: auto; color: var(--faint); font-size: 12px; padding: 2px 6px; }
.kiln-tabs .kiln-close:hover { color: var(--ink); }
.kiln-upload { display: flex; margin-bottom: 8px; }
.kiln-upbtn { flex: 1; text-align: center; border: 1px dashed var(--line-2); border-radius: 7px; padding: 6px 0; color: var(--soft); font-size: 12px; }
.kiln-upbtn:hover { color: var(--ink); border-color: var(--accent); }
.kiln-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-height: 240px; overflow: auto; }
.kiln-tile { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: var(--panel); box-shadow: var(--shadow-1); }
.kiln-tile:hover { border-color: var(--accent); }
.kiln-tile img, .kiln-tile video { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; background: #000; }
.kiln-tile .kiln-name { font-size: 9.5px; color: var(--soft); padding: 0 5px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kiln-empty { grid-column: 1 / -1; color: var(--faint); font-size: 11.5px; line-height: 1.5; padding: 8px 2px; }
.kiln-err { color: var(--red); font-size: 11px; margin-bottom: 6px; }
/* the Instagram tab (issue #6): profile head + the harvest grid */
.kiln-ig-head { display: flex; align-items: center; gap: 8px; padding: 2px 0 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.kiln-ig-head img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-2); }
.kiln-ig-head .kiln-ig-id { display: flex; flex-direction: column; min-width: 0; }
.kiln-ig-head strong { font-size: 12px; font-weight: 600; }
.kiln-ig-head .kiln-ig-id span { font-size: 10.5px; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kiln-tile.is-reel { opacity: .45; cursor: not-allowed; }
.kiln-tile.is-reel img::after { content: ""; }
.kiln-reel-glyph { flex: 1; display: flex; align-items: center; justify-content: center; aspect-ratio: 1/1; color: var(--faint); font-size: 18px; background: var(--bg); }

/* RHEA hover — the .nn-hover outline lives INSIDE the preview's injected style
   (public/studio/js/compose.js, NN_PREVIEW_STYLE): the preview is a srcdoc
   iframe and studio.css cannot reach into it. The studio chrome carries no
   hover state of its own. */
/* RHEA inplace — the status strip's in-place-edit hint (compose.js posts the
   session open/close); accent ink like the unsaved mark, quiet enough to ignore. */
#status-edit-hint { color: var(--accent); margin-right: 12px; letter-spacing: .04em; }

/* ISSUE-9: the layers row drag */
.layer-insert{height:2px;background:var(--accent,#116dff);margin:1px 0;pointer-events:none}
.layer-row.nn-drag-src{opacity:.35}

/* ISSUE-10: the layers context menu */
.layer-menu{position:fixed;z-index:9999;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow-2,0 4px 14px rgba(0,0,0,.12));padding:4px;display:flex;flex-direction:column;min-width:150px}
.layer-menu button{all:unset;cursor:pointer;font:inherit;font-size:12.5px;color:var(--ink);padding:7px 10px;border-radius:6px;text-align:left}
.layer-menu button:hover{background:#f2f6ff;color:var(--accent,#116dff)}

/* ISSUE-8: hidden rows gray out; the eye/lock toggles */
.layer-row.nn-hidden-row .name{opacity:.4;text-decoration:line-through}
.layer-row .row-eye,.layer-row .row-lock{all:unset;cursor:pointer;font-size:11px;color:var(--soft,#8a8a8a);padding:0 2px}
.layer-row .row-eye:hover,.layer-row .row-lock:hover{color:var(--accent,#116dff)}

/* ISSUE-7: the gallery card — layout thumbs (three across, choose-by-eye) and
   the carousel's playback toggles on the card itself */
.lib-item .gally{margin-top:6px}
.lib-item .gally .gally-thumbs{grid-template-columns:repeat(3,1fr)}
.lib-item .gplay{display:flex;gap:6px;margin-top:6px}
.lib-item .gplay .gtoggle{all:unset;flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;font:inherit;font-size:10px;color:var(--soft,#8a8a8a);background:var(--panel,#fff);border:1px solid var(--line,rgba(0,0,0,.12));border-radius:7px;padding:4px 6px;cursor:pointer;box-shadow:var(--shadow-1,0 1px 2px rgba(0,0,0,.05));transition:box-shadow .15s,border-color .15s,color .15s}
.lib-item .gplay .gtoggle:hover{border-color:var(--accent,#116dff)}
.lib-item .gplay .gtoggle[aria-pressed="true"]{border-color:var(--accent,#116dff);color:var(--accent,#116dff);font-weight:600;box-shadow:0 0 0 2px var(--accent-soft,rgba(17,109,255,.15)),var(--shadow-1,0 1px 2px rgba(0,0,0,.05))}
.lib-item .gplay .gtoggle .dot{width:6px;height:6px;border-radius:50%;background:var(--line,rgba(0,0,0,.12));transition:background .15s}
.lib-item .gplay .gtoggle[aria-pressed="true"] .dot{background:var(--accent,#116dff)}

/* ISSUE-6: the Instagram picker */
.ig-profiles{display:grid;grid-template-columns:1fr;gap:6px}
.ig-profile{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel);box-shadow:var(--shadow-1);transition:border-color .15s, box-shadow .15s}
.ig-profile:hover{border-color:var(--accent,#116dff);box-shadow:var(--shadow-2)}
.ig-profile .ig-handle{font-weight:600;font-size:12px;color:var(--ink)}
.ig-profile .ig-meta{font-size:11px;color:var(--soft,#666)}
.ig-profile .ig-count{font-size:10.5px;color:var(--accent,#116dff)}

/* ISSUE-24 — the wizard spine: the 4-dot progress spine, the accordion step
   panels (Back/Next per step, answers preserved in state), the chips dressed
   once, and the live draft showing blurred behind the sheet. The backdrop is
   the real preview (compose.js's one writer feeds it); the overlay only
   dims + blurs — the composed bytes are never touched. UI law: hairlines,
   one accent, no new boxes. */
#wizard-overlay{background:rgba(31,36,48,.5);backdrop-filter:blur(7px) saturate(.9);-webkit-backdrop-filter:blur(7px) saturate(.9)}
.wiz-spine{display:flex;align-items:flex-start;margin:4px 0 18px}
.wiz-dot{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:0;color:var(--faint);position:relative;cursor:pointer}
.wiz-dot .wiz-pin{width:10px;height:10px;border-radius:50%;border:2px solid var(--line-2);background:var(--panel);transition:border-color .15s,background .15s,box-shadow .15s}
.wiz-dot .wiz-lab{font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.wiz-dot:not(:first-child)::before{content:"";position:absolute;top:5px;right:calc(50% + 14px);left:calc(-50% + 14px);height:1px;background:var(--line-2)}
.wiz-dot:hover{color:var(--ink)}
.wiz-dot:hover .wiz-pin{border-color:var(--soft)}
.wiz-dot.wiz-done{color:var(--soft)}
.wiz-dot.wiz-done .wiz-pin{background:var(--accent);border-color:var(--accent)}
.wiz-dot[aria-current="step"]{color:var(--accent)}
.wiz-dot[aria-current="step"] .wiz-pin{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.wiz-panel + .wiz-panel{border-top:1px solid var(--line)}
.wiz-head{display:flex;align-items:baseline;gap:8px;width:100%;padding:12px 2px}
.wiz-panel:first-of-type .wiz-head{padding-top:0}
.wiz-head h3{margin:0}
.wiz-head:hover .wiz-sum{color:var(--soft)}
.wiz-sum{margin-left:auto;color:var(--faint);font-size:11.5px;transition:color .15s}
.wiz-body.wiz-fold{display:none}
.wiz-body{padding-bottom:14px}
.wiz-panel:last-of-type .wiz-body{padding-bottom:0}
.wiz-chips{display:flex;flex-wrap:wrap;gap:8px}
.wiz-chip{border:1px solid var(--line);border-radius:6px;padding:5px 10px;font-size:12.5px;color:var(--ink);background:var(--panel-2);transition:border-color .15s,color .15s,background .15s}
.wiz-chip:hover{border-color:var(--line-2);color:var(--ink)}
.wiz-chip[aria-pressed="true"]{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);font-weight:600}
.wiz-nav{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.wiz-back,.wiz-next{border:1px solid var(--line);border-radius:7px;padding:6px 14px;font-size:12.5px;color:var(--soft);background:var(--panel);transition:border-color .15s,color .15s}
.wiz-back:hover{color:var(--ink);border-color:var(--line-2)}
.wiz-next{color:var(--accent);border-color:var(--accent);font-weight:600}
.wiz-next:hover{background:var(--accent-soft)}

/* ISSUE-25: the welcome gallery */
.welcome-gallery{position:fixed;inset:0;z-index:9000;background:rgba(12,14,16,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px}
.welcome-gallery>button.wg-close{position:absolute;top:14px;right:18px;all:unset;cursor:pointer;color:#fff;font-size:18px}
.welcome-gallery{flex-direction:column}
.wg-head{display:flex;align-items:center;justify-content:space-between;width:min(720px,92vw);margin-bottom:10px}
.wg-title{font-size:17px;font-weight:600;color:#fff}
.wg-cat{width:min(720px,92vw);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--soft,#cfd6dd);margin:10px 0 6px}
.wg-grid{width:min(720px,92vw);display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wg-made,.wg-recent{all:unset;cursor:pointer;background:var(--panel);border-radius:10px;box-shadow:var(--shadow-2,0 6px 18px rgba(0,0,0,.18));padding:10px 12px;display:flex;flex-direction:column;gap:3px;border:1px solid transparent;transition:border-color .15s}
.wg-made:hover,.wg-recent:hover{border-color:var(--accent,#116dff)}
.wg-name{font-weight:600;font-size:12.5px;color:var(--ink)}
.wg-status{font-size:10.5px;color:var(--accent,#116dff)}
.wg-recents{width:min(720px,92vw);display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.wg-empty{width:min(720px,92vw);font-size:12px;color:var(--soft,#cfd6dd);padding:8px 2px}

/* ISSUE-30: the ⌘K command palette */
.cmdk{position:fixed;inset:0;z-index:9500;background:rgba(12,14,16,.45);display:flex;align-items:flex-start;justify-content:center;padding-top:12vh}
.cmdk-box{width:min(560px,92vw);background:var(--panel);border-radius:12px;box-shadow:var(--shadow-2,0 12px 40px rgba(0,0,0,.28));overflow:hidden}
.cmdk-input{all:unset;display:block;width:100%;box-sizing:border-box;padding:14px 16px;font:inherit;font-size:14px;color:var(--ink);border-bottom:1px solid var(--line,#e8e6e2)}
.cmdk-list{max-height:46vh;overflow:auto;padding:6px}
.cmdk-item{all:unset;display:block;width:100%;box-sizing:border-box;cursor:pointer;font-size:13px;color:var(--ink);padding:9px 12px;border-radius:8px}
.cmdk-item[aria-selected="true"]{background:#f2f6ff;color:var(--accent,#116dff)}

/* ISSUE-48: the DESIGN group */
.design-group{display:flex;flex-direction:column;gap:6px}
.style-row{display:flex;align-items:center;gap:6px}
.style-label{font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--soft,#8a8a8a);width:86px;flex:none}
.style-row input{all:unset;width:74px;background:var(--panel-2,#fff);border:1px solid var(--line,#e8e6e2);border-radius:6px;padding:4px 6px;font:inherit;font-size:12px;color:inherit}
.style-row input[type="text"]{flex:1;width:auto;min-width:0}
.style-row input.bp-inherited{color:var(--faint,#999);font-style:italic} /* inherited from desktop — the truth, dimmed */
/* ISSUE-41: the design tokens — the site's named styles and swatches */
.token-row .role-row{cursor:pointer}
.token-dot{width:26px;height:26px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:var(--soft);flex:none}
.token-sum{margin-left:auto;color:var(--faint);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}
.token-form{display:grid;gap:4px;padding:6px;border-top:1px solid var(--line)}
.token-form .style-row input{width:100%}
/* ISSUE-43: the box-model visual — margin outside, padding inside, to scale */
.box-vis{margin:4px 0 8px;cursor:pointer}
.box-vis-band.box-vis-margin{background:color-mix(in srgb,var(--accent,#116dff) 8%,transparent);border:1px dashed var(--line,#e8e6e2);border-radius:6px}
.box-vis-border{border:1px solid var(--accent,#116dff);border-radius:4px;background:var(--panel-2,#fff)}
.box-vis-pad{background:color-mix(in srgb,var(--green,#2ba45e) 10%,transparent);border-radius:3px;transition:padding .15s}
.box-vis-core{background:var(--accent-soft,#eef4ff);border-radius:3px;text-align:center;font-size:10px;color:var(--soft);padding:6px 0;letter-spacing:.08em;text-transform:uppercase}
.box-sides{gap:4px}
.box-sides input{width:42px!important;padding:4px 3px!important;text-align:center}
.style-unit{font-size:10px;color:var(--soft,#8a8a8a)}
.style-seg{display:flex;gap:3px;flex-wrap:wrap;min-width:0}
.style-row{flex-wrap:wrap} /* a three-button seg breathes instead of clipping */
.style-seg button{all:unset;cursor:pointer;font-size:11px;padding:4px 9px;border-radius:6px;border:1px solid var(--line,#e8e6e2);color:inherit}
.style-seg button[aria-pressed="true"]{background:var(--accent,#116dff);color:#fff;border-color:var(--accent,#116dff)}

/* INSP-1/3/4/5/6: the Wix-grade property surface — the colour swatch +
   popover, the px/% unit pickers, the per-side quads, the 2-D align grid,
   and the shadow group. Typography-only: hairlines, one accent. */
.style-swatch{all:unset;width:22px;height:22px;flex:none;border-radius:6px;border:1px solid var(--line-2,#d8d5d0);cursor:pointer;background-clip:padding-box}
.style-swatch:hover{border-color:var(--accent,#116dff)}
.style-color-row{gap:6px}
.style-color-input{flex:1;min-width:0}
.style-unit-sel{background:var(--panel-2,#fff);color:inherit;border:1px solid var(--line,#e8e6e2);border-radius:6px;font:inherit;font-size:10.5px;padding:3px 4px;cursor:pointer}
.style-unit-sel:focus{outline:none;border-color:var(--accent,#116dff)}
.align2d{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;width:80px}
.align2d button{all:unset;width:24px;height:20px;border-radius:4px;border:1px solid var(--line,#e8e6e2);cursor:pointer;position:relative}
.align2d button::after{content:"";position:absolute;inset:6px 8px;border-radius:1px}
.align2d button:hover{border-color:var(--accent,#116dff)}
.align2d button[aria-pressed="true"]{border-color:var(--accent,#116dff);background:var(--accent-soft,#eef4ff)}
.align2d button[aria-pressed="true"]::after{background:var(--accent,#116dff)}
.cp-swatch{width:20px;height:20px;flex:none;border-radius:5px;border:1px solid var(--line-2,#d8d5d0);display:block}
.cp-eye{all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;border:1px solid var(--line,#e8e6e2);color:var(--soft,#8a8a8a)}
.cp-eye:hover{color:var(--ink);border-color:var(--accent,#116dff)}
.cp-lab{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint,#a5a09a);width:54px;flex:none}
.cp-alpha,.cp-grad{display:flex;align-items:center;gap:6px;margin-top:8px}
.cp-alpha-range{flex:1;accent-color:var(--accent,#116dff);height:14px}
.cp-alpha-val{font-size:10.5px;color:var(--soft,#8a8a8a);width:32px;text-align:right}
.cp-deg{width:44px!important}
.cp-color-in{flex:1;min-width:0;background:var(--panel-2,#fff);color:var(--ink);border:1px solid var(--line,#e8e6e2);border-radius:6px;padding:4px 6px;font:inherit;font-size:11.5px}
.cp-dash{color:var(--faint,#a5a09a);font-size:11px}
.cp-recents{display:flex;gap:4px;align-items:center;margin-top:8px;flex-wrap:wrap}
.cp-recent{all:unset;width:18px;height:18px;border-radius:4px;border:1px solid var(--line-2,#d8d5d0);cursor:pointer}
.cp-recent:hover{border-color:var(--accent,#116dff)}

/* ISSUE-39: the pages list */
.pages-list{display:flex;flex-direction:column;gap:4px}
.page-row{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:space-between;background:var(--panel);border:1px solid var(--line,#e8e6e2);border-radius:8px;padding:7px 10px}
.page-row:hover{border-color:var(--accent,#116dff)}
.page-del{cursor:pointer;color:var(--soft,#8a8a8a);padding:0 4px}
.page-del:hover{color:#d33}
.page-more{cursor:pointer;color:var(--soft,#8a8a8a);padding:0 4px;letter-spacing:1px}
.page-more:hover{color:var(--accent,#116dff)}
.page-add{all:unset;cursor:pointer;font-size:11.5px;color:var(--accent,#116dff);padding:4px 2px}
.page-add-row{display:flex;align-items:center;gap:6px;margin-top:2px}
.page-add-input{all:unset;flex:1;min-width:0;font:inherit;font-size:11.5px;color:inherit;border-bottom:1px solid var(--line,#e8e6e2);padding:3px 2px}
.page-add-input::placeholder{color:var(--soft,#8a8a8a)}

/* ISSUE-40: the breakpoint context chip */
.bp-chip{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--accent,#116dff);border-radius:4px;padding:3px 7px;margin-left:8px}


/* ---- SHELL v2 — the Wix rail skeleton (ISSUE-48 premium pass) ---- */
main.studio { grid-template-columns: 48px 232px minmax(0, 1fr) 276px; }
main.studio.no-right { grid-template-columns: 48px 232px minmax(0, 1fr); }
nav.rail {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 0; background: var(--panel); border-right: 1px solid var(--line);
}
nav.rail button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 9px; color: var(--faint);
  border: 1px solid transparent; transition: color .12s, background .12s;
}
nav.rail button svg { width: 18px; height: 18px; display: block; }
nav.rail button:hover { color: var(--ink); background: var(--panel-2); }
nav.rail button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.panel#left { padding: 10px; }
.top .device button { padding: 5px 10px; }
.top .device button svg { width: 16px; height: 16px; }
.top button.primary { border-radius: 15px; padding: 6px 20px; }


/* ---- SHELL v3 — the shelf density: element tiles 2-across, quiet IG rows ---- */
#lib-host { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 8px; align-content: start; }
#lib-host .lib-cat { grid-column: 1 / -1; margin: 6px 0 2px; }
#lib-host .lib-item { margin: 0; }
#lib-host .lib-item .thumb { aspect-ratio: 1 / 1; border-radius: 7px; }
#lib-host .lib-item .thumb iframe { width: 300px; height: 300px; }
#lib-host .lib-item .cap { margin-top: 4px; }
#lib-host .lib-item .cap .kind { font-size: 11px; }
#lib-host .lib-item .gally,
#lib-host .lib-item .vars { grid-column: 1 / -1; } /* wide controls span both tiles */
.lib-item .gally .gally-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.lib-item .gally .gally-thumbs .vcard { border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: var(--panel); cursor: pointer; }
.lib-item .gally .gally-thumbs .vcard[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
/* the IG picker: quiet rows under the elements */
.ig-profiles { display: flex; flex-direction: column; gap: 5px; }
.ig-profile { padding: 6px 8px; border-radius: 7px; display: grid; grid-template-columns: 1fr auto; gap: 0 8px; align-items: baseline; }
.ig-profile .ig-handle { font-size: 10.5px; font-weight: 600; }
.ig-profile .ig-meta { font-size: 9.5px; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-profile .ig-count { font-size: 9px; text-align: right; }
/* the tiles grid leaves the add-flow full width where needed */


/* ---- SHELL v3b: the uniform tile law (ISSUE-64 UUI fixes) ----
   Every shelf tile: the same width, the same thumb box, the same label.
   No clipped picker thumbs, no giant orphans. */
#lib-host .lib-item .thumb { aspect-ratio: 4 / 3; height: auto; }
#lib-host .lib-item .cap { justify-content: center; }
#lib-host .lib-item .cap .kind { font-size: 11.5px; }
#lib-host .lib-item .thumb svg { max-height: 100%; }
/* the gallery tile shows its current layout's thumb, uniform like the rest */
/* the inspector's LAYOUT thumbs for the placed gallery */
#inspector .gally { margin-top: 8px; }
#inspector .gally-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
#inspector .gally-thumbs .vcard { border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: var(--panel); cursor: pointer; box-shadow: var(--shadow-1); }
#inspector .gally-thumbs .vcard:hover { border-color: var(--accent); box-shadow: var(--shadow-2); }
#inspector .gally-thumbs .vcard[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-1); }
#inspector .gally-thumbs .vthumb { aspect-ratio: 4/3; position: relative; overflow: hidden; background: var(--paper); }
#inspector .gally-thumbs .vthumb iframe { width: 480px; height: 360px; border: none; transform-origin: 0 0; pointer-events: none; position: absolute; inset: 0; }
#inspector .gally-thumbs .vlabel { font-size: 10px; color: var(--soft); padding: 3px 5px; text-align: center; }
#inspector .gplay { display: flex; gap: 6px; margin-top: 8px; }
#inspector .gplay .gtoggle { all: unset; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 10.5px; color: var(--soft); background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; padding: 5px 6px; cursor: pointer; }
#inspector .gplay .gtoggle[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); font-weight: 600; }


/* ISSUE-64: the smart link rows (nav items) */
.list-linkwrap { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.link-kind { display: flex; gap: 2px; }
.link-kind-chip { all: unset; cursor: pointer; font-size: 9px; font-weight: 600; letter-spacing: .06em; padding: 2px 6px; border-radius: 4px; color: var(--faint, #98a0ac); border: 1px solid transparent; }
.link-kind-chip:hover { color: var(--ink); }
.link-kind-chip[aria-pressed="true"] { color: var(--accent, #116dff); background: var(--accent-soft, rgba(17,109,255,.1)); }
.list-linkwrap .list-href { width: 100%; font-size: 11px; color: var(--soft); }


/* ISSUE-64: the DESIGN group's sub-sections — Wix's grouping grammar */
.style-sub-head { font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--soft, #8a8a8a); margin: 12px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line, rgba(0,0,0,.08)); }
.design-group .style-row:first-of-type { margin-top: 0; }
.style-sub-head + .style-row { margin-top: 0; }


/* ═══ THE CHROME PASS v2 — the Product-Design-Lead composition (2026-11-10) ═══
   The top bar recomposed to the Wix grammar: ONE row, three zones —
   [ logo · page ⌄ · Autosaved · site ]   [ device toggles ]   [ undo redo ⋯ · Publish ].
   The noisy site settings (palette · slug · status · reset) fold into the "⋯"
   overflow; the eye lands on the one blue primary. Later rules win the cascade. */
header.top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 14px; height: 48px; flex: 0 0 auto; padding: 0 12px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.top-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.top .logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: var(--accent); color: #fff;
}
.top .logo svg { width: 15px; height: 15px; display: block; }
.top .model { color: var(--faint); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.autosaved { font-size: 12px; color: var(--faint); white-space: nowrap; margin: 0; }
.top-right { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.top .device { display: flex; gap: 2px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; padding: 3px; justify-self: center; }
.top .device button { display: inline-flex; align-items: center; justify-content: center; padding: 5px 13px; border-radius: 6px; color: var(--faint); }
.top .device button svg { width: 15px; height: 15px; display: block; }
.top .device button:hover { color: var(--ink); }
.top .device button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(16,24,40,.12); }
.top .ibtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: var(--soft); border: 1px solid transparent; }
.top .ibtn svg { width: 16px; height: 16px; display: block; }
.top .ibtn:hover { background: var(--panel-2); color: var(--ink); }
.top button.primary { background: var(--accent); color: #fff; font-weight: 600; border-radius: 8px; padding: 8px 20px; font-size: 13px; box-shadow: var(--shadow-1); }
.top button.primary:hover { background: #0d5cda; }
.top .bp-wh { font-size: 11.5px; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; margin: 0 4px 0 2px; }

/* the page switcher — Wix's in-bar page menu */
.page-switch { position: relative; margin-left: 2px; }
.page-switch button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 500; color: var(--ink); padding: 5px 9px; border-radius: 7px; }
.page-switch button:hover { background: var(--panel-2); }
.page-switch .chev { width: 13px; height: 13px; color: var(--faint); }
.page-switch-list { position: absolute; top: calc(100% + 6px); left: 0; z-index: 200; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-3); min-width: 180px; max-height: 300px; overflow: auto; padding: 4px; }
.page-switch-row { all: unset; cursor: pointer; display: block; width: 100%; box-sizing: border-box; padding: 8px 12px; border-radius: 7px; font-size: 13px; color: var(--ink); }
.page-switch-row:hover { background: var(--accent-soft); }

/* the "⋯" overflow — palette · slug · status · reset, the quiet shelf */
.top-more { position: relative; }
.top-more > summary { list-style: none; cursor: pointer; }
.top-more > summary::-webkit-details-marker { display: none; }
.top-more[open] > summary { background: var(--panel-2); color: var(--ink); }
.top-more-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 220; width: 252px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-3); padding: 12px; display: grid; gap: 11px; }
.top-more-panel .tm-field { display: grid; gap: 4px; }
.top-more-panel .tm-field > span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.top-more-panel .tm-field select, .top-more-panel .tm-field input { width: 100%; box-sizing: border-box; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; font: inherit; font-size: 12.5px; }
.top-more-panel .tm-field select:focus, .top-more-panel .tm-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.top-more-panel .tm-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.top-more-panel .ghost { font-size: 12px; color: var(--soft); border: 1px solid var(--line); border-radius: 7px; padding: 5px 10px; }
.top-more-panel .ghost:hover { color: var(--ink); border-color: var(--line-2); }
.top-more-panel .view-live { font-size: 12px; color: var(--accent); text-decoration: none; justify-self: start; }
.top-more-panel .view-live.hidden { display: none; }
/* the W/H readout rides WITH the device toggles (Wix's breakpoint bar) */
header.top .device .bp-wh { padding: 0 6px 0 11px; margin-left: 5px; border-left: 1px solid var(--line); font-size: 11.5px; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; align-self: center; }

/* ═══ CHROME PASS v3 — the top bar completed (2026-11-10) ═══
   Wix Studio's header carries presence avatars, a comments bell with an
   unread count, and a Preview action beside Publish. The grammar: avatars
   overlap by ~7px in a tight cluster; the bell is a plain .ibtn with a
   small blue count badge; Preview is a quiet outlined button, NEVER the
   blue — the one blue primary stays Publish. */
header.top .presence { display: flex; align-items: center; flex: none; margin-right: 2px; }
header.top .presence-av {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 650; color: #fff; letter-spacing: .02em;
  background: var(--accent); border: 2px solid var(--panel);
  margin-left: -7px; box-shadow: 0 0 0 1px var(--line); cursor: default;
}
header.top .presence-av:first-child { margin-left: 0; }
header.top .presence-av:nth-child(2) { background: #7a5cff; }
header.top .presence-av:nth-child(3) { background: #2ba45e; }
header.top .presence-av:hover { z-index: 2; }
header.top .ibtn.bell { position: relative; }
header.top .bell-badge {
  position: absolute; top: 1px; right: 1px; min-width: 14px; height: 14px;
  padding: 0 3px; border-radius: 999px; box-sizing: border-box;
  background: var(--accent); color: #fff; font-size: 9px; font-weight: 700;
  line-height: 14px; text-align: center; box-shadow: 0 0 0 1.5px var(--panel);
}
header.top .bell-badge.hidden { display: none; }
header.top button.preview {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 12.5px; font-weight: 500; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 13px;
}
header.top button.preview:hover { border-color: var(--line-2); background: var(--panel-2); }
header.top button.preview svg { width: 15px; height: 15px; display: block; }

/* ═══ PACKAGE 2 — the Add panel's category grammar (2026-11-10) ═══
   Wix Studio's Add panel labels each category with its own glyph. Ours draws
   the glyph as a mask (--ci, set per button by library.js) so it inherits the
   label's colour — quiet when idle, blue when active. Never a blank chip. */
.cat-tabs button {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
}
.cat-tabs button::before {
  content: ""; width: 14px; height: 14px; flex: none;
  background-color: currentColor;
  -webkit-mask: var(--ci, none) center / contain no-repeat;
  mask: var(--ci, none) center / contain no-repeat;
}
.cat-tabs button[aria-pressed="true"]::before { background-color: var(--accent); }

/* ═══ PACKAGE 3 — the Comments panel, Wix thread grammar (2026-11-10) ═══
   The feedback is a set of THREADS: each with an avatar, author, relative
   time, a Resolve toggle and replies. The filter (Open / Resolved / All) sits
   over the list. The chrome dressing below; the row body reuses the existing
   .comment-row and .comment-text. */
.comment-filter { display: flex; gap: 4px; margin-bottom: 10px; }
.cf-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 6px; padding: 4px 9px; font-size: 11px; color: var(--soft); background: var(--panel); }
.cf-chip:hover { color: var(--ink); border-color: var(--line-2); }
.cf-chip[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.cf-n { font-variant-numeric: tabular-nums; font-size: 10px; color: var(--faint); }
.cf-chip[aria-pressed="true"] .cf-n { color: var(--accent); }
.comment-row { padding: 9px 10px; }
.comment-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.comment-av { width: 24px; height: 24px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 650; color: #fff; background: var(--accent); }
.comment-av.client { background: #7a5cff; }
.comment-av.small { width: 20px; height: 20px; font-size: 9.5px; }
.comment-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.comment-author { font-size: 12px; font-weight: 600; color: var(--ink); }
.comment-time { font-size: 10px; color: var(--faint); }
.comment-resolve, .comment-del { all: unset; cursor: pointer; width: 22px; height: 22px; border-radius: 6px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--faint); font-size: 13px; }
.comment-resolve:hover { color: var(--green); background: rgba(43,164,94,.1); }
.comment-resolve[aria-pressed="true"] { color: var(--green); }
.comment-del:hover { color: var(--red); background: rgba(224,62,82,.08); }
.comment-row.is-resolved { opacity: .6; }
.comment-row.is-resolved .comment-text { text-decoration: line-through; text-decoration-color: var(--line-2); }
.comment-replies { margin: 8px 0 2px 32px; display: flex; flex-direction: column; gap: 8px; border-left: 1px solid var(--line); padding-left: 10px; }
.comment-reply { display: flex; gap: 7px; }
.comment-reply-body { display: flex; flex-direction: column; min-width: 0; }
.comment-reply-body .comment-text { margin-top: 2px; font-size: 12px; }
.comment-reply-add { display: flex; gap: 6px; margin: 8px 0 0 32px; }
.comment-reply-in { flex: 1; min-width: 0; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 12px; }
.comment-reply-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.comment-reply-btn { flex: none; border: 1px solid var(--line); border-radius: 6px; padding: 5px 10px; font-size: 11.5px; color: var(--soft); background: var(--panel); }
.comment-reply-btn:hover { color: var(--ink); border-color: var(--accent); }

/* ═══ PACKAGE 4 — the inspector section header, Wix disclosure grammar ═══
   Content / Appearance are now real <details> disclosures: the summary keeps
   the .insp-sec dressing and gains a caret; the body is the same .prop rows.
   Every other .insp-sec (page editor, comments, media) is an unchanged div. */
.insp-sec-block { margin: 0; }
details.insp-sec-block > summary.insp-sec {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 6px; user-select: none;
}
details.insp-sec-block > summary.insp-sec::-webkit-details-marker { display: none; }
details.insp-sec-block > summary.insp-sec::before {
  content: ""; width: 0; height: 0; flex: none;
  border-inline-start: 5px solid currentColor;
  border-block: 4px solid transparent;
  opacity: .65; transition: transform .15s; transform: rotate(90deg);
}
details.insp-sec-block:not([open]) > summary.insp-sec::before { transform: rotate(0); }
details.insp-sec-block > summary.insp-sec:hover { color: var(--ink); }

/* ═══ STEER A — the presence facepile + logo, to Wix spec (2026-11-10) ═══
   Aditya's review: the cluster read as bare overlapping letters and the
   logo mark vanished. The Wix facepile: three SOLID 24px circles in distinct
   brand colours, WHITE 11px initials, −8px overlap, a 2px panel-coloured ring
   on each, hover lifts z-index + raises. The logo mark is forced to a solid
   white stroke so it can never disappear against the blue tile. */
header.top .presence { display: flex; align-items: center; gap: 0; flex: none; }
header.top .presence-av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: none; box-sizing: border-box;
  border-radius: 50%; overflow: hidden;
  font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0;
  color: #fff; text-transform: uppercase;
  background: var(--accent);
  border: 2px solid var(--panel);
  box-shadow: 0 1px 2px rgba(16,24,40,.18);
  margin-left: -8px; z-index: 1; cursor: default; position: relative;
  transition: transform .12s ease, z-index .12s ease, box-shadow .12s ease;
}
header.top .presence-av:first-child { margin-left: 0; }
header.top .presence-av:nth-child(1) { background: #116dff; }
header.top .presence-av:nth-child(2) { background: #7a5cff; }
header.top .presence-av:nth-child(3) { background: #2ba45e; }
header.top .presence-av:hover { z-index: 5; transform: translateY(-1px); box-shadow: 0 3px 7px rgba(16,24,40,.28); }
/* G8: the live-presence facepile — your own avatar wears the accent ring */
header.top .presence-av.is-self { box-shadow: 0 0 0 2px var(--panel,#fff), 0 0 0 3.5px var(--accent,#116dff); }
/* the logo: a solid blue tile with a FORCED white mark (presentation attr
   stroke="currentColor" is overridden by this rule), never invisible */
header.top .logo { flex: none; }
header.top .logo svg { width: 16px; height: 16px; display: block; stroke: #fff; }

/* ═══ STEER B — the page panel, Wix-grade (2026-11-10) ═══
   The no-selection panel now reads as Wix's Page settings: a glyph + titled
   header, tight 13px rows, and the author's own bytes behind an Advanced
   disclosure as a labelled mono field (~120px), never a giant raw textarea. */
#right .panel-head { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
#right .panel-head .ph-icon { width: 30px; height: 30px; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); }
#right .panel-head .ph-icon svg { width: 17px; height: 17px; display: block; }
#right .panel-head .ph-text { min-width: 0; }
#right .panel-head .sel-name { font-weight: 650; font-size: 15px; line-height: 1.2; margin: 0 0 2px; }
#right .panel-head .sel-kind { color: var(--faint); font-size: 11px; margin: 0; }
.prop.page-row { margin-bottom: 10px; }
.prop.page-row input, .prop.page-row textarea.longtext { font-size: 13px; }
.page-advanced .tier-body { padding: 10px; }
.page-advanced .custom-code { gap: 8px; margin: 0; }
.page-advanced .custom-ta { min-height: 120px; font: 12px/1.5 ui-monospace, "SFMono-Regular", Menlo, monospace; }
.page-advanced .custom-label { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.page-advanced .code-note { font-size: 11px; line-height: 1.55; color: var(--faint); }

/* ═══ STEER C — the ⋯ overflow menu grammar + the shortcuts sheet ═══
   The overflow folds into Wix menu groups: a section label, hairline
   separators, full-width action rows. Every row is wired (comments.js). */
.top-more-panel .tm-head { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 0 0 4px; }
.top-more-panel .tm-sep { height: 1px; background: var(--line); margin: 3px 0; }
.top-more-panel .tm-item { all: unset; display: block; width: 100%; box-sizing: border-box; cursor: pointer; padding: 8px 9px; border-radius: 7px; font-size: 12.5px; color: var(--ink); }
.top-more-panel .tm-item:hover { background: var(--accent-soft); color: var(--accent); }
.top-more-panel a.tm-item { color: var(--accent); }
.shortcuts { position: fixed; inset: 0; z-index: 9600; background: rgba(12,14,16,.45); display: flex; align-items: center; justify-content: center; padding: 24px; }
.shortcuts .sc-sheet { width: min(420px, 92vw); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-3); padding: 16px 18px; }
.shortcuts .sc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.shortcuts .sc-title { font-size: 14px; font-weight: 650; color: var(--ink); }
.shortcuts .sc-close { all: unset; cursor: pointer; color: var(--faint); font-size: 14px; padding: 2px 6px; border-radius: 6px; }
.shortcuts .sc-close:hover { color: var(--ink); background: var(--panel-2); }
.shortcuts .sc-list { display: flex; flex-direction: column; }
.shortcuts .sc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); }
.shortcuts .sc-row:first-child { border-top: 0; }
.shortcuts .sc-label { font-size: 12.5px; color: var(--ink); }
.shortcuts .sc-keys { display: inline-flex; gap: 4px; }
.shortcuts kbd { font: 11px/1 ui-monospace, monospace; color: var(--soft); background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px; min-width: 12px; text-align: center; }

/* ═══ PACKAGE D — the layers filter field (the Wix affordance the panel lacked) ═══ */
.layers-search { width: 100%; box-sizing: border-box; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; font: inherit; font-size: 12.5px; margin-bottom: 10px; }
.layers-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* ═══ PACKAGE E — the page-switcher rows carry Wix's page glyph ═══
   Every page row gets the page mark; it tints quiet → blue on hover. */
.page-switch-row { display: flex; align-items: center; gap: 8px; }
.page-switch-row::before {
  content: ""; width: 13px; height: 13px; flex: none; background-color: var(--faint);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='2' y='1' width='8' height='10' rx='1.4' fill='none' stroke='black' stroke-width='1.1'/%3E%3Cpath d='M4 4h4M4 6h4M4 8h2.4' fill='none' stroke='black' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='2' y='1' width='8' height='10' rx='1.4' fill='none' stroke='black' stroke-width='1.1'/%3E%3Cpath d='M4 4h4M4 6h4M4 8h2.4' fill='none' stroke='black' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.page-switch-row:hover::before { background-color: var(--accent); }

/* ═══ PACKAGE 1 — the center toggles (Wix parity gate) ═══
   The grid overlay is NOT a device toggle: it now sits in its own control
   beside the .device group, so `.top .device button[data-w]` is exactly the
   three device buttons and the engine's width-mapping is never fed a 4th
   button. Icon-only, no leaked text. */
header.top .center-toggles { display: flex; align-items: center; gap: 8px; justify-self: center; }
header.top .grid-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px; color: var(--faint);
  border: 1px solid transparent; flex: none;
}
header.top .grid-toggle svg { width: 16px; height: 16px; display: block; }
header.top .grid-toggle:hover { background: var(--panel-2); color: var(--ink); }
header.top .grid-toggle[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); }

/* ═══ PACKAGE 4 — the domain strip's Connect-domain CTA (honest) ═══
   The right-aligned CTA opens a popover that names the site's live URL and
   offers a real action (a prefilled mail to the studio) — no dead link. */
.domain-strip { position: relative; }
.domain-strip .ds-connect { margin-left: auto; border: 1px solid var(--accent); border-radius: 6px; background: var(--panel); color: var(--accent); font: inherit; font-size: 11px; padding: 3px 10px; cursor: pointer; }
.domain-strip .ds-connect:hover { background: var(--accent-soft); }
.domain-strip .ds-pop { position: absolute; top: calc(100% + 6px); right: 14px; z-index: 220; width: 300px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: var(--shadow-3); padding: 12px; display: grid; gap: 8px; text-align: left; }
.domain-strip .ds-pop-title { font-size: 12.5px; font-weight: 650; color: var(--ink); }
.domain-strip .ds-pop-note { font-size: 11.5px; line-height: 1.5; color: var(--soft); }
.domain-strip .ds-pop-mail { font-size: 12px; color: var(--accent); text-decoration: none; justify-self: start; }
.domain-strip .ds-pop-mail:hover { text-decoration: underline; }

/* SEO panel — the Wix 'SEO basics' / 'Advanced SEO' / 'Social share' rows.
   Typography only: the same .prop dressing, plus the tag rows and the red
   guidance count (the manual's 60/160/80/300 character guidance, never a
   block: Wix warns, it does not refuse). */
.prop label.seo-over { color: var(--red); }
.prop .seo-err { font-size: 10.5px; line-height: 1.4; color: var(--red); margin-top: 3px; }
.prop.seo-toggle { margin-bottom: 11px; }
.seo-check-label { display: flex !important; align-items: center; gap: 7px; text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; color: var(--ink); cursor: pointer; padding-right: 0 !important; }
.seo-check { width: auto !important; accent-color: var(--accent); margin: 0; }
.seo-tags { display: grid; gap: 6px; margin-bottom: 7px; }
.seo-tag-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 5px; align-items: start; }
.seo-tag-row .seo-err { grid-column: 1 / -1; }
.seo-tag-row input, .seo-tag-row select { width: 100%; min-width: 0; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 5px 7px; font: inherit; font-size: 12px; }
.seo-json-row { grid-template-columns: minmax(0, 1fr) auto; }
.seo-json { width: 100%; min-height: 92px; font: 11.5px/1.5 ui-monospace, monospace; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 7px; resize: vertical; }

/* ---- SUBMISSIONS (G9): the form's own table — Inbox / Spam / Trash,
   the Wix tabs, each a hairline table with no card chrome. The panel is a
   reading surface: thin rules, quiet labels, one accent on the active tab. */
.subs-tabs { flex-wrap: wrap; }
.subs-bar { display: flex; gap: 6px; align-items: center; margin: 0 0 10px; }
.subs-field { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 5px 7px; font: inherit; font-size: 12px; }
.subs-filter { flex: 1; min-width: 0; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; font: inherit; font-size: 12px; }
.subs-export { margin-left: auto; }
.subs-actions { gap: 4px; flex-wrap: wrap; }
.subs-count { color: var(--faint); font-size: 11px; margin-right: auto; }
.subs-tablewrap { overflow-x: auto; }
.subs-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.subs-table th { text-align: start; font-weight: 600; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); padding: 6px 6px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.subs-table td { padding: 6px 6px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: top; overflow-wrap: anywhere; }
.subs-row:hover td { background: var(--panel-2); }
.subs-when { color: var(--soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.subs-email { color: var(--soft); }
.subs-msg { max-width: 22ch; }
.subs-check { accent-color: var(--accent); }
.subs-link { color: var(--accent); font-size: 11px; white-space: nowrap; }
.subs-link:hover { text-decoration: underline; }
.subs-empty { color: var(--faint); font-size: 11.5px; padding: 14px 6px; }
.subs-detail { display: grid; gap: 7px; padding: 8px 2px 4px; }
.subs-detail-field { display: grid; gap: 3px; }
.subs-detail-field > span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.subs-detail-field input, .subs-detail-field textarea { width: 100%; min-width: 0; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; font: inherit; font-size: 12px; resize: vertical; }
.subs-detail .btn.solid { justify-self: start; }

/* ---- WIX-BP: the Customize Breakpoints panel + the additional-bp toggle ---- */
.top .device .dev-label { font-variant-numeric: tabular-nums; }
.bp-more > summary { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; }
.bp-panel { width: 268px; }
.bp-list { display: grid; gap: 2px; }
.bp-row { display: flex; align-items: center; gap: 4px; }
.bp-row-pick { all: unset; flex: 1 1 auto; box-sizing: border-box; cursor: pointer; padding: 7px 9px; border-radius: 7px; font-size: 12.5px; color: var(--ink); }
.bp-row-pick:hover { background: var(--panel-2); }
.bp-row-pick[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.bp-del { all: unset; cursor: pointer; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--faint); font-size: 11px; }
.bp-del:hover { background: var(--panel-2); color: var(--red, #d64545); }
.bp-add-row { display: flex; align-items: end; gap: 6px; }
.bp-add-field { flex: 1 1 auto; display: grid; gap: 4px; }
.bp-add-field > span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.bp-add-field input { width: 100%; box-sizing: border-box; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; font: inherit; font-size: 12.5px; }
.bp-add-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.bp-note { font-size: 10.5px; color: var(--faint); line-height: 1.45; }
.bp-count { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.top-more-panel .ghost[disabled] { opacity: .45; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════════════════════
   WIX STUDIO 3-COLUMN ADD ELEMENTS FLYOUT DRAWER (CEO 2026-11-15)
   Matches the 8 Wix Studio reference panels:
   - Header bar: "Add Elements" left, "🔍 Search... | ? | ✕" right
   - Column 1 (#cat-tabs): Vertical category rail (~138px) with soft blue pill
     selection (#dce9ff / #116dff)
   - Column 2 (#subcat-tabs): Grouped subcategory list (~158px) with uppercase
     section headers (TEXT, SELECTION, ADVANCED, LAYOUT TOOLS, MENUS...)
   - Column 3 (#lib-host): Rich visual specimen & preset gallery (Switches 2x4,
     Signature Input, Text & Icon Buttons, Popular Embeds, Themed Text H1-H6,
     Popups browser frames, Flexboxes blueprint schematics, Vertical Menus,
     Wireframes, and live-composed citizen cards)
   ═══════════════════════════════════════════════════════════════════════════ */
main.studio {
  grid-template-columns: 48px 640px minmax(0, 1fr) 276px;
}
main.studio:has(.panel#left.wx-collapsed) {
  grid-template-columns: 48px minmax(0, 1fr) 276px;
}
main.studio:has(.panel#left.wx-collapsed) .panel#left {
  display: none;
}
main.studio:has(#tab-add.hidden) {
  grid-template-columns: 48px 268px minmax(0, 1fr) 276px;
}
/* Clean Wix Studio blank canvas invitation */
.blank-invite {
  background: #ffffff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.wx-canvas-empty {
  max-width: 480px;
  padding: 40px 36px;
  border: 1.5px dashed rgba(17, 109, 255, .32);
  border-radius: 12px;
  background: rgba(17, 109, 255, .02);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.wx-ce-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--accent);
  background: #dce9ff;
  padding: 3px 10px;
  border-radius: 999px;
}
.wx-ce-title {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 650;
  color: var(--ink);
}
.wx-ce-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--soft);
}
.wx-ce-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}
.wx-ce-btn {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: #fff;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 500;
}
.wx-ce-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.wx-ce-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.panel#left {
  padding: 0;
  overflow: hidden;
  box-shadow: 4px 0 20px rgba(16, 24, 40, .06);
  z-index: 15;
}
.panel#left > .tab-body:not(#tab-add) {
  padding: 12px;
}
#tab-add {
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.wx-add-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 52px;
  padding: 0 14px 0 18px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  flex: 0 0 auto;
}
.wx-add-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.wx-add-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.wx-search-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 4px 10px;
  width: 190px;
}
.wx-search-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.wx-search-ic {
  width: 14px;
  height: 14px;
  color: var(--soft);
  flex: none;
}
.wx-search-wrap #lib-search {
  border: 0 !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 2px 0 !important;
  font-size: 12.5px !important;
  box-shadow: none !important;
  width: 100%;
}
.wx-head-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--soft);
  font-size: 13.5px;
  font-weight: 600;
}
.wx-head-btn:hover {
  background: var(--panel-2);
  color: var(--ink);
}
.wx-add-columns {
  display: grid;
  grid-template-columns: 138px 156px minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
/* Column 1: Category Rail */
#cat-tabs.wx-col-cats {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 2px;
  margin: 0;
  padding: 10px 8px;
  border-right: 1px solid var(--line);
  overflow-y: auto;
  background: var(--panel);
}
#cat-tabs.wx-col-cats button {
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 450;
  color: var(--ink);
  background: transparent;
  display: flex;
  align-items: center;
  gap: 7px;
  text-align: left;
}
#cat-tabs.wx-col-cats button::before {
  display: none;
}
#cat-tabs.wx-col-cats button .cat-glyph {
  width: 13px;
  height: 13px;
  flex: none;
  background-color: currentColor;
  opacity: .65;
  -webkit-mask: var(--ci, none) center / contain no-repeat;
  mask: var(--ci, none) center / contain no-repeat;
}
#cat-tabs.wx-col-cats button:hover {
  background: var(--panel-2);
  color: var(--accent);
}
#cat-tabs.wx-col-cats button[aria-pressed="true"] {
  background: #dce9ff;
  color: var(--accent);
  font-weight: 600;
}
#cat-tabs.wx-col-cats button[data-cat="Assets"] {
  margin-bottom: 6px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
}

/* Column 2: Subcategory List */
.wx-col-subcats {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 10px;
  border-right: 1px solid var(--line);
  overflow-y: auto;
  background: var(--panel);
}
.wx-subcat-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 10px 8px 4px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
}
.wx-subcat-head:first-child {
  margin-top: 0;
  padding-top: 2px;
  border-top: 0;
}
.wx-subcat-btn {
  width: 100%;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink);
  text-align: left;
  background: transparent;
}
.wx-subcat-btn:hover {
  background: var(--panel-2);
  color: var(--accent);
}
.wx-subcat-btn[aria-pressed="true"] {
  background: #dce9ff;
  color: var(--accent);
  font-weight: 600;
}

/* Column 3: Visual Specimen & Preset Pane */
#lib-host.wx-col-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 16px 28px;
  overflow-y: auto;
  background: var(--panel);
}
.wx-spec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  margin-top: 4px;
}
.wx-spec-title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--soft);
}
.wx-spec-info {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--faint);
  color: var(--faint);
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
}

/* Switch 2x4 Grid (Screenshot #1) */
.wx-switch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 10px;
  padding: 6px 2px;
}
.wx-sw-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  border-radius: 8px;
  border: 1px solid transparent;
}
.wx-sw-item:hover {
  background: var(--panel-2);
  border-color: var(--line);
}
.wx-sw-track {
  width: 44px;
  height: 24px;
  border-radius: 999px;
  position: relative;
  display: inline-block;
  background: #118df0;
}
.wx-sw-thumb {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  display: block;
}
.sw-line-knob .wx-sw-track { height: 3px; background: #111; border-radius: 2px; }
.sw-line-knob .wx-sw-thumb { width: 20px; height: 20px; top: -8.5px; right: 0; background: #000; }
.sw-outline-purple .wx-sw-track { background: #fff; border: 1.5px solid #8c7ae6; box-sizing: border-box; }
.sw-outline-purple .wx-sw-thumb { width: 15px; height: 15px; top: 3px; right: 3px; background: #8c7ae6; }
.sw-square-check .wx-sw-track { border-radius: 3px; background: #fff; border: 1.5px solid #4cd137; box-sizing: border-box; }
.sw-square-check .wx-sw-thumb { width: 20px; height: 21px; top: 0; right: 0; border-radius: 1px; background: #4cd137; }
.sw-square-check .wx-sw-thumb::after { content: "✓"; color: #fff; font-size: 11px; font-style: normal; display: grid; place-items: center; height: 100%; }
.sw-dark-pill .wx-sw-track { background: #4b4d52; }
.sw-dark-pill .wx-sw-track::before { content: ""; position: absolute; left: 8px; right: 16px; top: 11px; height: 2px; background: #fff; }
.sw-coral-pill .wx-sw-track { background: #fab1a0; }
.sw-coral-pill .wx-sw-thumb { background: transparent; border: 2px solid #fff; box-sizing: border-box; }
.sw-square-mono .wx-sw-track { border-radius: 4px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.1); }
.sw-square-mono .wx-sw-thumb { border-radius: 3px; background: #000; width: 16px; height: 18px; top: 3px; right: 3px; }
.sw-line-ring .wx-sw-track { height: 3px; background: #38ada9; }
.sw-line-ring .wx-sw-thumb { width: 22px; height: 22px; top: -9.5px; right: 0; border: 2px solid #38ada9; background: #fff; box-sizing: border-box; }

/* Signature Input (Screenshot #1) */
.wx-sig-list { display: flex; flex-direction: column; gap: 12px; }
.wx-sig-card { cursor: pointer; padding: 6px; border-radius: 8px; border: 1px solid transparent; }
.wx-sig-card:hover { border-color: var(--accent); background: var(--panel-2); }
.wx-sig-label { font-size: 12px; color: var(--soft); margin-bottom: 6px; }
.wx-sig-box { height: 74px; border: 1.5px solid #636e72; background: #fff; display: flex; align-items: flex-end; padding: 14px 20px; }
.wx-sig-line { width: 100%; height: 1px; background: #2d3436; }
.wx-sig-clear { text-align: right; font-size: 10.5px; color: var(--faint); margin-top: 3px; }
.sig-teal .wx-sig-label { font-family: Georgia, serif; font-style: italic; font-weight: 700; color: #48b8b8; }
.sig-teal .wx-sig-box { border-color: #48b8b8; }
.sig-teal .wx-sig-line { background: #a8e0e0; }

/* Buttons Specimen (Screenshot #2) */
.wx-btn-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; align-items: center; }
.wx-btn-specimen { text-align: center; padding: 10px 12px; font-size: 12.5px; cursor: pointer; transition: transform .12s; }
.wx-btn-specimen:hover { transform: translateY(-1px); }
.wxb-dark { background: #202020; color: #fff; }
.wxb-plain { background: transparent; color: #202020; font-size: 13.5px; }
.wxb-framed { background: #14345c; color: #fff; font-family: Georgia, serif; outline: 1px solid rgba(255,255,255,.7); outline-offset: -4px; }
.wxb-shop { background: #3b6e52; color: #fff; border-radius: 999px; letter-spacing: .08em; }
.wxb-caps { background: transparent; color: #19194d; letter-spacing: .16em; font-size: 11.5px; font-weight: 600; }
.wxb-teal { background: #0c3c4c; color: #fff; letter-spacing: .12em; font-size: 11px; }
.wxb-join { background: #e8edfa; color: #116dff; border-radius: 999px; font-family: Georgia, serif; }
.wxb-letsgo { background: #fff; color: #0e4da4; border: 2px solid #99b3ff; font-weight: 700; }
.wxb-botanical { background: linear-gradient(135deg, #6d9aa6, #527e8a); color: #fff; font-weight: 700; letter-spacing: .1em; }
.wx-btn-icons-row { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; }
.wx-icon-circle { width: 38px; height: 38px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }

/* Embeds Specimen (Screenshot #3) */
.wx-embed-list { display: flex; flex-direction: column; gap: 14px; }
.wx-embed-row { display: flex; align-items: center; gap: 12px; padding: 6px; border-radius: 10px; cursor: pointer; }
.wx-embed-row:hover { background: var(--panel-2); }
.wx-embed-circle { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex: none; background: #fff; box-shadow: var(--shadow-1); }
.wx-embed-copy { flex: 1; min-width: 0; }
.wx-embed-name { font-weight: 600; font-size: 13px; color: var(--ink); margin-bottom: 2px; }
.wx-embed-desc { font-size: 11.5px; color: var(--soft); line-height: 1.35; }
.wx-embed-plus { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex: none; }
.wx-video-specimen { cursor: pointer; }
.wx-video-stage { height: 128px; border-radius: 8px; background: linear-gradient(160deg, #8ec5fc 0%, #e0c3fc 100%); display: grid; place-items: center; }
.wx-video-play { width: 38px; height: 38px; border-radius: 50%; border: 2px solid #fff; color: #fff; display: grid; place-items: center; background: rgba(0,0,0,.22); }
.wx-video-cap { text-align: center; font-size: 11.5px; color: var(--soft); margin-top: 6px; }
.wx-lottie-row { display: flex; gap: 6px; flex-wrap: wrap; }
.wx-lottie-chip { padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line-2); font-size: 12px; background: var(--panel-2); }
.wx-lottie-chip:hover { border-color: var(--accent); color: var(--accent); }

/* Text Specimen (Screenshot #4) */
.wx-text-stack { display: flex; flex-direction: column; gap: 8px; }
.wx-text-heading, .wx-text-para, .wx-big-title, .wx-caps-title, .wx-fx-card {
  width: 100%;
  padding: 5px 6px;
  border-radius: 6px;
  color: var(--ink);
  line-height: 1.25;
  text-align: left;
}
.wx-text-heading:hover, .wx-text-para:hover, .wx-big-title:hover, .wx-caps-title:hover, .wx-fx-card:hover {
  background: var(--panel-2);
  color: var(--accent);
}
.wx-text-para { color: var(--soft); line-height: 1.45; }
.wx-big-title { font-size: 26px; font-weight: 800; }
.wx-caps-title { font-size: 15px; font-weight: 700; letter-spacing: .18em; }
.wx-fx-card { border: 1px solid var(--line); padding: 8px 10px; font-size: 12px; background: var(--panel-2); }
.wx-fx-mask { background: linear-gradient(90deg, #eef4ff, #f6f0ff); font-weight: 600; }

/* Popups & Flexboxes Blueprints (Screenshots #5 & #6) */
.wx-popup-list { display: flex; flex-direction: column; gap: 12px; }
.wx-pop-frame { border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; background: #dcdde1; cursor: pointer; }
.wx-pop-frame:hover { border-color: var(--accent); }
.wx-pop-dots { height: 12px; background: #b2bec3; color: #fff; font-size: 9px; line-height: 12px; padding: 0 6px; letter-spacing: 2px; }
.wx-pop-stage { height: 112px; display: grid; place-items: center; padding: 12px; position: relative; }
.wx-pop-modal { background: #fff; padding: 12px 16px; border-radius: 3px; text-align: center; position: relative; display: flex; flex-direction: column; gap: 6px; align-items: center; max-width: 85%; box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.wx-pop-modal strong { font-size: 11px; color: #1f2430; }
.wx-pop-cta { font-size: 9px; background: #111; color: #fff; padding: 3px 10px; border-radius: 999px; }
.wx-pop-x { position: absolute; top: 3px; right: 5px; font-size: 10px; color: #888; }
.pop-banner .wx-pop-stage { align-items: start; padding: 0; }
.pop-banner .wx-pop-modal { max-width: 100%; width: 100%; background: #fad3c4; border-radius: 0; }
.pop-promo .wx-pop-modal { background: #e8b4f8; }

.wx-flex-blueprints { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wx-fb-card { height: 86px; border: 1px solid var(--line-2); border-radius: 7px; background: #f5f6f8; padding: 0; overflow: hidden; display: grid; cursor: pointer; }
.wx-fb-card:hover { border-color: var(--accent); background: #eef4ff; }
.wx-fb-card i { border: 0.5px solid #9ab8f7; display: block; }
.fb-rows { grid-template-rows: 1fr 1fr 1fr; }
.fb-rows i:nth-child(4) { display: none; }
.fb-2col { grid-template-columns: 2fr 1fr; }
.fb-2col i:nth-child(n+3) { display: none; }
.fb-3col { grid-template-columns: 1fr 2fr 1fr; }
.fb-3col i:nth-child(4) { display: none; }
.fb-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

/* Menus Specimen (Screenshot #7) */
.wx-menu-horiz { display: flex; justify-content: space-between; border: 1px solid #f3d5c8; padding: 6px; border-radius: 4px; cursor: pointer; font-size: 11.5px; }
.wx-menu-horiz span { padding: 4px 10px; }
.wx-menu-horiz span.on { background: #a55c3c; color: #fff; }
.wx-menu-vgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wx-vmenu-card { display: flex; flex-direction: column; gap: 5px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; font-size: 11.5px; text-align: center; }
.wx-vmenu-card:hover { border-color: var(--accent); }
.wx-vmenu-card span { padding: 5px 8px; }
.vm-minimal span.on { color: #5f6caf; font-weight: 600; }
.vm-pills span { background: #e8f4f5; border-radius: 999px; }
.vm-pills span.on { background: #426a79; color: #fff; }
.vm-orange span { border: 1px solid #f9690e; font-weight: 600; }
.vm-orange span.on { background: #f9690e; color: #fff; }
.vm-royal span { background: #e6ecff; letter-spacing: .08em; font-size: 10.5px; }
.vm-royal span.on { background: #1e56c5; color: #fff; }
.vm-dark span.on { background: #222428; color: #fff; font-family: Georgia, serif; font-style: italic; }
.vm-yellow { border-color: #222; }
.vm-yellow span.on { background: #f6e563; font-weight: 700; }

/* Wireframes Specimen (Screenshot #8) */
.wx-wf-list { display: flex; flex-direction: column; gap: 12px; }
.wx-wf-card { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, #dce5ff 0%, #f5f5f0 100%); padding: 20px 16px; cursor: pointer; }
.wx-wf-card:hover { border-color: var(--accent); }
.wf-center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wx-wf-h { font-weight: 700; font-size: 13.5px; color: #111; white-space: pre-line; line-height: 1.25; }
.wx-wf-p { font-size: 10.5px; color: #555; line-height: 1.4; }
.wx-wf-btns { display: flex; gap: 6px; }
.wx-wf-btns span, .wx-wf-copy span.ghost { font-size: 9.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid #222; }
.wx-wf-btns span.solid { background: #111; color: #fff; }
.wf-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 12px; padding: 0; background: #fff; }
.wx-wf-art { background: linear-gradient(145deg, #dce5ff, #f3f4ed); min-height: 120px; }
.wx-wf-copy { padding: 16px 12px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; }

/* Live citizen grid inside Column 3 */
.wx-live-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 8px;
}
#lib-host.wx-col-content .lib-cat {
  margin: 8px 0 2px;
}