/* =====================================================================
   Respar Cartoons — content editor styles
   Calm, light working surface with the brand's night/sun/coral accents.
   ===================================================================== */
@font-face { font-family: "Unbounded"; src: url("../assets/fonts/Unbounded.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../assets/fonts/PlusJakartaSans.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --night: #0d0820; --night-2: #160d33; --night-3: #22164a;
  --ink: #1b1035; --ink-2: #4a3f66; --ink-3: #7a7193;
  --bg: #f6f3fb; --surface: #fff; --line: #e6e0f0; --line-2: #d6cde6;
  --sun: #ffd666; --coral: #ff5c8a; --tangerine: #ff8a3d; --lilac: #c084fc; --violet: #8b5cf6; --mint: #5eeab4; --sky: #38bdf8;
  --ok: #0f9d6b; --ok-bg: #e3f8ef; --warn: #b45309; --warn-bg: #fff4dc; --err: #d0284f; --err-bg: #ffe8ee; --info: #5b3fd6; --info-bg: #efeaff;
  --grad: linear-gradient(120deg, #ffd666, #ff8a3d 35%, #ff5c8a 65%, #c084fc);
  --r: 12px; --r-sm: 8px; --r-lg: 18px;
  --top: 60px; --nav-w: 252px;
  --shadow: 0 1px 2px rgba(27, 16, 53, .05), 0 6px 20px -8px rgba(27, 16, 53, .12);
  --shadow-lg: 0 24px 60px -18px rgba(13, 8, 32, .45);
  --display: "Unbounded", system-ui, sans-serif;
  --body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 14.5px/1.5 var(--body); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--info); }
code { font: 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #f1edf8; padding: .1em .4em; border-radius: 5px; word-break: break-all; }
mark { background: #ffe9a8; color: inherit; padding: 0 .2em; border-radius: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--sun); color: var(--ink); padding: 10px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; transition: top .2s; }
.skip:focus { top: 10px; }
.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg:not(.i) { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.muted { color: var(--ink-3); }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
h1:focus { outline: none; }

/* ---------------- Top bar ---------------- */
.ad-top { position: relative; z-index: 30; height: var(--top); display: flex; align-items: center; gap: 14px; padding: 0 16px 0 14px; background: var(--night); color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ad-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--grad); opacity: .9; }
.ad-burger { display: none; }
.ad-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; min-width: 0; }
.ad-logo { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--grad); color: var(--ink); font: 900 14px/1 var(--display); letter-spacing: -.02em; box-shadow: 0 4px 14px -4px rgba(255, 92, 138, .6); }
.ad-brand-t { display: grid; line-height: 1.15; }
.ad-brand-t b { font: 700 14px/1.2 var(--display); letter-spacing: -.01em; }
.ad-brand-t small { color: rgba(255, 255, 255, .6); font-size: 12px; }
.ad-proto { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 214, 102, .14); color: var(--sun); border: 1px solid rgba(255, 214, 102, .35); font-size: 12px; font-weight: 700; white-space: nowrap; }
.ad-proto svg { width: 14px; height: 14px; }
.ad-proto.is-live { background: rgba(192, 132, 252, .16); color: #e2c8ff; border-color: rgba(192, 132, 252, .45); }
.ad-top-r { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
.ad-status { display: flex; gap: 6px; cursor: pointer; }
.st { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .07); white-space: nowrap; }
.st svg { width: 14px; height: 14px; }
.st-ok svg { color: var(--mint); }
.st-warn { color: var(--sun); background: rgba(255, 214, 102, .12); }
.st-err { color: #ffb3c6; background: rgba(255, 92, 138, .16); }
.st-busy svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ad-role { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255, 255, 255, .65); }
.ad-role select { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: #fff; border-radius: 9px; padding: 6px 28px 6px 10px; font-weight: 600; font-size: 13px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; }
.ad-role select option { color: var(--ink); }
.ad-top .ab-ghost { color: #fff; border-color: rgba(255, 255, 255, .2); background: transparent; }
.ad-top .ab-ghost:hover, .ad-top .ab-ghost[aria-pressed="true"] { background: rgba(255, 255, 255, .1); }
.ad-top .ab-ghost[aria-pressed="true"] { border-color: var(--sun); color: var(--sun); }
.ab.pulse { box-shadow: 0 0 0 0 rgba(255, 214, 102, .7); animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 214, 102, .55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(255, 214, 102, 0); } }

/* ---------------- Buttons ---------------- */
.ab { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-weight: 650; font-size: 13.5px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, transform .1s, box-shadow .15s; }
.ab:hover { border-color: var(--ink-3); background: #faf8fd; }
.ab:active { transform: translateY(1px); }
.ab svg { width: 16px; height: 16px; }
.ab-sm { min-height: 32px; padding: 0 11px; font-size: 13px; border-radius: 9px; }
.ab-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.ab-primary:hover { background: var(--night-3); border-color: var(--night-3); }
.ad-top .ab-primary { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.ad-top .ab-primary:hover { background: #ffe08a; }
.ab-ghost { background: transparent; }
.ab-danger { background: var(--err); border-color: var(--err); color: #fff; }
.ab-danger:hover { background: #b51f42; border-color: #b51f42; }
.ab-dash { border-style: dashed; background: transparent; color: var(--ink-2); width: 100%; }
.ab-dash:hover { border-color: var(--violet); color: var(--violet); background: var(--info-bg); }
.ib { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s, border-color .15s; text-decoration: none; }
.ib:hover:not(:disabled) { background: #f4f0fa; color: var(--ink); border-color: var(--ink-3); }
.ib:disabled { opacity: .35; cursor: not-allowed; }
.ib.danger:hover:not(:disabled) { color: var(--err); border-color: var(--err); background: var(--err-bg); }
.ib-sm { width: 30px; height: 30px; border-radius: 8px; }
.ib-sm svg { width: 15px; height: 15px; }
.ib.ghost { border-color: transparent; background: transparent; color: var(--ink-3); cursor: help; }
.row-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ---------------- Shell ---------------- */
.ad-shell { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); height: calc(100vh - var(--top)); height: calc(100dvh - var(--top)); }
body.pv-on .ad-shell { grid-template-columns: var(--nav-w) minmax(0, 1fr) minmax(400px, 40vw); }
.ad-nav { background: var(--night-2); color: rgba(255, 255, 255, .78); display: flex; flex-direction: column; min-height: 0; border-right: 1px solid rgba(255, 255, 255, .06); }
.nav-scroll { flex: 1; overflow-y: auto; padding: 14px 10px 18px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.nav-g { margin: 18px 10px 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .42); }
.nav-i { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 1px 0; border-radius: 9px; color: inherit; text-decoration: none; font-weight: 600; font-size: 13.5px; transition: background .15s, color .15s; }
.nav-i:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav-i.on { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 3px 0 0 var(--sun); }
.nav-i.on svg { color: var(--sun); }
.nav-i > span:not(.nb) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-i.locked { opacity: .45; }
.nav-i .lk { width: 14px; height: 14px; }
.nb { flex: none; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: 11.5px; text-align: center; font-weight: 700; }
.nb-warn { background: var(--sun); color: var(--ink); }
.nav-foot { padding: 12px 18px 14px; border-top: 1px solid rgba(255, 255, 255, .08); display: grid; gap: 4px; font-size: 12px; }
.nav-foot a { color: #fff; display: inline-flex; gap: 6px; align-items: center; text-decoration: none; font-weight: 600; }
.nav-foot a:hover { color: var(--sun); }
.nav-foot svg { width: 14px; height: 14px; }
.nav-foot span { color: rgba(255, 255, 255, .4); }

.ad-main { overflow-y: auto; min-width: 0; padding: 26px clamp(16px, 3vw, 36px) 80px; scroll-behavior: smooth; }
.panel { max-width: 1180px; margin: 0 auto; animation: fadeIn .25s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.p-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.p-head h1 { margin: 0 0 4px; font: 700 clamp(20px, 2.2vw, 26px)/1.15 var(--display); letter-spacing: -.02em; }
.p-head p { margin: 0; color: var(--ink-2); max-width: 70ch; }
.p-act { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------- Cards & form grid ---------------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: 14px; box-shadow: var(--shadow); }
.card > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 15px 18px; cursor: pointer; border-radius: var(--r-lg); }
.card > summary::-webkit-details-marker { display: none; }
.card > summary:hover { background: #fbfaff; }
.card-t { display: flex; align-items: center; gap: 8px; font: 700 14.5px/1.3 var(--display); letter-spacing: -.01em; flex: 1; }
.card-m { display: flex; gap: 6px; }
.card .chev { transition: transform .2s; color: var(--ink-3); }
.card[open] > summary .chev { transform: rotate(180deg); }
.card[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.card-b { padding: 18px; }
.card-d { margin: 0 0 14px; color: var(--ink-2); }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.fgrid > .full, .fgrid > .fw { grid-column: 1 / -1; }
.fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lbl { font-weight: 700; font-size: 13px; color: var(--ink); }
.req { color: var(--coral); font-style: normal; }
.help, .md-hint { color: var(--ink-3); font-size: 12.25px; line-height: 1.45; }
.help b { color: var(--ink-2); }
.md-hint { font-size: 11.5px; }
.ferr { color: var(--err); font-size: 12.5px; font-weight: 600; }
.fld input[type="text"], .fld input[type="email"], .fld input[type="number"], .fld input[type="date"], .fld input[type="datetime-local"], .fld input[type="search"], .fld select, .fld textarea,
.full-in, .row-in input, .mc-b input {
  width: 100%; min-height: 40px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.fld textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
.fld select { appearance: none; padding-right: 34px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237a7193' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center; }
.fld input:hover, .fld select:hover, .fld textarea:hover { border-color: var(--ink-3); }
.fld input:focus, .fld select:focus, .fld textarea:focus, .full-in:focus, .row-in input:focus, .mc-b input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(139, 92, 246, .18); }
.fld input[readonly] { background: #f7f5fb; color: var(--ink-2); }
.fld.has-err input, .fld.has-err textarea, .fld.has-err select { border-color: var(--err); box-shadow: 0 0 0 3px rgba(208, 40, 79, .1); }
.cnt { align-self: flex-end; font-size: 11.5px; color: var(--ink-3); margin-top: -2px; }
.cnt.over { color: var(--warn); font-weight: 700; }
.f-h { margin: 6px 0 -4px; font: 700 13px/1.2 var(--display); }
.fs-note { margin: 0; color: var(--ink-3); }
.color-row { display: flex; gap: 8px; align-items: center; }
.color-row input[type="color"] { width: 44px; height: 40px; padding: 3px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; cursor: pointer; flex: none; }
.color-row input[type="text"] { font-family: ui-monospace, Menlo, monospace; }

/* toggle */
.tgl-fld { justify-content: center; }
.tgl { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 650; font-size: 13.5px; min-height: 40px; }
.tgl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tgl-ui { position: relative; width: 40px; height: 23px; border-radius: 999px; background: #d9d2e6; transition: background .2s; flex: none; }
.tgl-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s cubic-bezier(.3, 1.4, .5, 1); }
.tgl input:checked + .tgl-ui { background: var(--ok); }
.tgl input:checked + .tgl-ui::after { transform: translateX(17px); }
.tgl input:focus-visible + .tgl-ui { outline: 3px solid var(--violet); outline-offset: 2px; }

/* grouped fields */
.grp { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 14px 16px; margin: 0; background: #fcfbfe; min-width: 0; }
.grp > legend { padding: 0 6px; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.grp > .help { display: block; margin: -2px 0 10px; }
.grp .grp { background: #fff; }

/* image field */
.img-field { display: flex; gap: 12px; align-items: flex-start; }
.thumb { flex: none; width: 64px; height: 64px; border-radius: 10px; background: repeating-conic-gradient(#f0ecf6 0 25%, #fff 0 50%) 0 0 / 14px 14px; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; color: var(--ink-3); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.broken img { display: none; }
.thumb.broken::after { content: "Missing"; font-size: 10px; font-weight: 700; color: var(--err); }
.img-field .thumb { width: 84px; height: 84px; }
.img-ctl { flex: 1; min-width: 0; display: grid; gap: 8px; }
.img-btns { display: flex; gap: 6px; flex-wrap: wrap; }

/* id chips */
.ids { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-c { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; cursor: pointer; font-size: 12.75px; font-weight: 600; color: var(--ink-2); transition: all .15s; max-width: 100%; }
.chip-c span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-c input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-c::before { content: ""; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--line-2); flex: none; transition: all .15s; }
.chip-c.on { background: var(--info-bg); border-color: var(--violet); color: var(--ink); }
.chip-c.on::before { background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 10px no-repeat; border-color: var(--violet); }
.chip-c:focus-within { outline: 3px solid var(--violet); outline-offset: 1px; }

/* repeater */
.rep { display: grid; gap: 8px; }
.rep-h { display: grid; gap: 2px; }
.rep-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rep-i > details { border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.rep-i > details > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 12px; cursor: pointer; border-radius: var(--r); }
.rep-i > details > summary::-webkit-details-marker { display: none; }
.rep-i > details > summary:hover { background: #fbfaff; }
.rep-i > details[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--r) var(--r) 0 0; background: #fbfaff; }
.rep-i > details > .fgrid { padding: 14px; }
.rep-n { flex: none; width: 22px; height: 22px; border-radius: 6px; background: #f1edf8; color: var(--ink-2); font-size: 11.5px; font-weight: 800; display: grid; place-items: center; }
.rep-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.rep-a { display: flex; gap: 4px; flex: none; }

/* callouts & pills */
.callout { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r); background: var(--info-bg); color: var(--ink); border: 1px solid #ddd3ff; font-size: 13.5px; margin-bottom: 14px; }
.callout > svg { color: var(--info); margin-top: 1px; }
.callout.warn { background: var(--warn-bg); border-color: #fbe0a4; }
.callout.warn > svg { color: var(--warn); }
.callout.big { padding: 14px 16px; font-size: 14px; }
.fld .callout { margin: 0; }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: #f1edf8; color: var(--ink-2); white-space: nowrap; }
.pill svg { width: 12px; height: 12px; }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.info { background: var(--info-bg); color: var(--info); }
.pill.mute { background: #eeeaf3; color: var(--ink-3); }
.pill.sale { background: var(--err-bg); color: var(--err); }

/* empty */
.empty { text-align: center; padding: 48px 20px; color: var(--ink-2); display: grid; justify-items: center; gap: 6px; }
.empty > svg { width: 34px; height: 34px; color: var(--lilac); }
.empty h2, .empty h3 { margin: 4px 0 0; font: 700 17px/1.3 var(--display); color: var(--ink); }
.empty p { margin: 0 0 8px; }
.empty.sm { padding: 26px 12px; }
.empty.sm svg { width: 24px; height: 24px; }
.empty.locked { background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--r-lg); }

/* ---------------- Overview ---------------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 18px 0; }
.tile { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s, border-color .15s; }
.tile:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: 0 14px 30px -14px rgba(27, 16, 53, .25); }
.tile > svg { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--info-bg); color: var(--violet); }
.tile:nth-child(2) > svg { background: #ffeef3; color: var(--coral); }
.tile:nth-child(3) > svg { background: #e4f9f1; color: var(--ok); }
.tile:nth-child(4) > svg { background: #fff3dc; color: var(--warn); }
.tile:nth-child(5) > svg { background: #e2f4fd; color: #0284c7; }
.tile span { display: grid; min-width: 0; }
.tile small { color: var(--ink-3); font-weight: 650; font-size: 12px; }
.tile b { font: 700 24px/1.15 var(--display); letter-spacing: -.02em; }
.tile em { font-style: normal; color: var(--ink-2); font-size: 12px; }
.ov-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.ov-side { display: grid; gap: 14px; }
.panel-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow); }
.panel-box h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 700 15px/1.3 var(--display); letter-spacing: -.01em; }
.panel-box h2 small { margin-left: auto; font: 700 12px var(--body); background: #f1edf8; padding: 2px 9px; border-radius: 999px; color: var(--ink-2); }
.panel-box p { margin: 0 0 6px; color: var(--ink-2); }
.audit { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.audit li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 4px; border-bottom: 1px solid #f1edf8; font-size: 13.5px; }
.audit li:last-child { border-bottom: 0; }
.audit .dot { flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; background: var(--info); }
.audit .lv-warn .dot { background: #f59e0b; }
.audit .lv-error .dot { background: var(--err); }
.audit li span:nth-child(2) { flex: 1; }
.audit a { flex: none; font-weight: 700; font-size: 12.5px; text-decoration: none; padding: 2px 9px; border-radius: 7px; background: var(--info-bg); }
.audit a:hover { background: #e2d9ff; }
.steps { margin: 0; padding-left: 20px; display: grid; gap: 7px; color: var(--ink-2); font-size: 13.5px; }
.steps b { color: var(--ink); }
.mini-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mini-list li { display: grid; }
.mini-list a { font-weight: 700; text-decoration: none; color: var(--ink); }
.mini-list small { color: var(--ink-3); }

/* ---------------- Collections ---------------- */
.coll { display: grid; grid-template-columns: minmax(270px, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.coll-list { position: sticky; top: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); display: flex; flex-direction: column; max-height: calc(100dvh - var(--top) - 40px); min-height: 280px; }
.coll-tools { display: grid; gap: 8px; padding: 12px; border-bottom: 1px solid var(--line); }
.coll-tools select { width: 100%; min-height: 36px; padding: 6px 30px 6px 10px; border-radius: 9px; border: 1px solid var(--line-2); appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237a7193' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; font-size: 13px; font-weight: 600; }
.search-in { position: relative; display: block; }
.search-in > svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-3); pointer-events: none; }
.search-in input { width: 100%; min-height: 36px; padding: 7px 10px 7px 34px; border-radius: 9px; border: 1px solid var(--line-2); background: #faf8fd; }
.search-in input:focus { outline: none; border-color: var(--violet); background: #fff; box-shadow: 0 0 0 3px rgba(139, 92, 246, .15); }
.li-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; }
.li > a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; color: var(--ink); text-decoration: none; transition: background .12s; }
.li > a:hover { background: #f7f4fc; }
.li.on > a { background: var(--info-bg); box-shadow: inset 3px 0 0 var(--violet); }
.li .thumb { width: 42px; height: 42px; border-radius: 8px; }
.li-t { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.li-t b { font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li-t small { color: var(--ink-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li-t small s { color: var(--ink-3); opacity: .7; }
.grip { color: #b9b0cc; cursor: grab; display: grid; place-items: center; flex: none; }
.grip svg { width: 14px; height: 14px; fill: currentColor; stroke-width: 2.6; }
.li[draggable="true"] > a { cursor: grab; }
.dragging { opacity: .45; }
.drop-before { box-shadow: 0 -3px 0 var(--violet); }
.drop-after { box-shadow: 0 3px 0 var(--violet); }
.coll-foot { margin: 0; padding: 9px 14px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12px; }
.coll-edit { min-width: 0; }
.ed-head { position: sticky; top: -26px; z-index: 5; background: linear-gradient(var(--bg) 82%, rgba(246, 243, 251, 0)); padding: 4px 0 14px; margin-bottom: 4px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ed-title { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 220px; }
.ed-title .thumb { width: 52px; height: 52px; border-radius: 12px; }
.ed-title h2 { margin: 0 0 4px; font: 700 18px/1.2 var(--display); letter-spacing: -.015em; overflow-wrap: anywhere; }
.ed-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.ed-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.back-m { display: none; }
.rot-l { transform: rotate(-90deg); }

/* ---------------- Sections builder ---------------- */
.sec-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.sec-row > details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.sec-row > details > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; border-radius: var(--r-lg); }
.sec-row > details > summary::-webkit-details-marker { display: none; }
.sec-row > details[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0; background: #fbfaff; }
.sec-row.is-hidden > details > summary .sec-t { opacity: .5; }
.sec-n { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.sec-row.is-hidden .sec-n { background: #cfc6df; }
.sec-t { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.sec-t b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-t small { color: var(--ink-3); font-size: 12px; }
.sec-a { display: flex; align-items: center; gap: 4px; flex: none; }
.sec-a .ab[aria-pressed="true"] { color: var(--ok); border-color: #b7e8d4; background: var(--ok-bg); }
.sec-a .ab[aria-pressed="false"] { color: var(--ink-3); }
.sec-body { padding: 16px; }
.comp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 10px; }
.comp { text-align: left; display: grid; gap: 3px; padding: 14px; border-radius: var(--r); border: 1px dashed var(--line-2); background: #fcfbfe; cursor: pointer; transition: all .15s; }
.comp:hover { border-style: solid; border-color: var(--violet); background: var(--info-bg); transform: translateY(-1px); }
.comp b { font-weight: 750; }
.comp small { color: var(--ink-3); }

/* ---------------- SEO preview ---------------- */
.serp { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; margin-bottom: 14px; box-shadow: var(--shadow); font-family: Arial, sans-serif; }
.serp small { color: #4d5156; font-size: 12.5px; }
.serp b { display: block; color: #1a0dab; font-size: 19px; font-weight: 400; margin: 3px 0; }
.serp p { margin: 0; color: #4d5156; font-size: 13.5px; }

/* ---------------- Media ---------------- */
.media-tools { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.media-tools .search-in { flex: 1; max-width: 360px; }
.media-grid { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.media-c { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.mc-img { position: relative; }
.mc-img .thumb { width: 100%; height: 140px; border-radius: 0; border: 0; border-bottom: 1px solid var(--line); }
.mc-img .thumb img { object-fit: contain; }
.mc-img .pill { position: absolute; top: 8px; right: 8px; }
.mc-b { padding: 10px; display: grid; gap: 6px; }
.mc-b input { min-height: 32px; padding: 5px 9px; font-size: 13px; border-radius: 8px; }
.mc-b code { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; word-break: normal; }
.mc-a { display: flex; justify-content: space-between; align-items: center; }
.chips { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------------- Roles table ---------------- */
.tbl-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); margin-bottom: 14px; }
.perm-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 560px; }
.perm-tbl th, .perm-tbl td { padding: 9px 14px; border-bottom: 1px solid #f1edf8; text-align: center; }
.perm-tbl thead th { position: sticky; top: 0; background: #fbfaff; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.perm-tbl th[scope="row"] { text-align: left; font-weight: 650; }
.perm-tbl tr:last-child > * { border-bottom: 0; }
.perm { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #f1edf8; color: var(--ink-3); }
.perm svg { width: 14px; height: 14px; }
.perm.on { background: var(--ok-bg); color: var(--ok); }
.perm-c input { width: 18px; height: 18px; accent-color: var(--ok); cursor: pointer; }

/* ---------------- Data ---------------- */
.data-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.danger-box { border-color: #f6cbd6; }

/* ---------------- Preview pane ---------------- */
.ad-preview { display: flex; flex-direction: column; min-width: 0; background: #e9e4f2; border-left: 1px solid var(--line-2); min-height: 0; }
.ad-preview[hidden] { display: none; }
.pv-tools { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface); border-bottom: 1px solid var(--line); }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 10px; padding: 2px; background: #f7f5fb; }
.seg button { width: 34px; height: 30px; border: 0; background: transparent; border-radius: 8px; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; }
.seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(27, 16, 53, .15); }
.pv-url { flex: 1; min-width: 0; font: 12px ui-monospace, Menlo, monospace; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 10px; border-radius: 8px; background: #f7f5fb; }
.pv-tools .ib { width: 32px; height: 32px; }
.pv-frame-wrap { flex: 1; min-height: 0; overflow: hidden; position: relative; display: flex; justify-content: center; padding: 0; }
.pv-frame-wrap iframe { border: 0; background: var(--night); transform-origin: top center; flex: none; display: block; }
.pv-frame-wrap[data-dev="mobile"] iframe, .pv-frame-wrap[data-dev="tablet"] iframe { box-shadow: 0 0 0 1px rgba(27, 16, 53, .15), 0 18px 40px -16px rgba(27, 16, 53, .4); }
.pv-frame-wrap iframe { transform-origin: top center; }
.pv-note { margin: 0; display: flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 12px; color: var(--ink-2); background: var(--surface); border-top: 1px solid var(--line); }
.pv-note svg { width: 14px; height: 14px; color: var(--info); }

/* ---------------- Modal ---------------- */
.ad-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; }
.ad-modal[hidden] { display: none; }
.ad-modal-bg { position: absolute; inset: 0; background: rgba(13, 8, 32, .55); backdrop-filter: blur(3px); animation: fadeIn .2s both; }
.ad-modal-card { position: relative; width: min(560px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-lg); animation: pop .22s cubic-bezier(.2, 1.2, .4, 1) both; }
.ad-modal.sm .ad-modal-card { width: min(460px, 100%); }
.ad-modal.wide .ad-modal-card { width: min(920px, 100%); }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.ad-modal-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; }
.ad-modal-card h2 { margin: 0; font: 700 17px/1.3 var(--display); letter-spacing: -.01em; }
.ad-modal-body { padding: 0 18px 16px; overflow-y: auto; }
.ad-modal-body p { margin: 0 0 10px; color: var(--ink-2); }
.ad-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--line); }
.ad-modal-foot[hidden] { display: none; }
.pick-tools { display: flex; gap: 8px; margin-bottom: 12px; position: sticky; top: 0; background: #fff; padding-bottom: 6px; z-index: 1; }
.pick-tools .search-in { flex: 1; }
.pick-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.pick-i { width: 100%; display: grid; gap: 6px; padding: 6px; border-radius: 12px; border: 2px solid transparent; background: #f7f5fb; cursor: pointer; text-align: left; transition: border-color .15s, background .15s; }
.pick-i:hover { border-color: var(--line-2); background: #fff; }
.pick-i.on { border-color: var(--violet); background: var(--info-bg); }
.pick-i .thumb { width: 100%; height: 96px; border: 0; }
.pick-i .thumb img { object-fit: contain; }
.pick-i small { font-size: 11.5px; font-weight: 600; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-url { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.row-in { display: flex; gap: 8px; }

/* ---------------- Toasts ---------------- */
.ad-toasts { position: fixed; z-index: 80; right: 16px; bottom: 16px; display: grid; gap: 8px; width: min(400px, calc(100vw - 32px)); }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 12px 14px; border-radius: 14px; background: var(--ink); color: #fff; box-shadow: var(--shadow-lg); font-size: 13.5px; animation: pop .25s both; }
.toast > svg { color: var(--sky); margin-top: 1px; }
.toast.t-ok > svg { color: var(--mint); }
.toast.t-warn > svg { color: var(--sun); }
.toast.t-error { background: #5d1028; }
.toast.t-error > svg { color: #ffb3c6; }
.toast span { flex: 1; }
.toast a { color: var(--sun); font-weight: 700; white-space: nowrap; }
.toast button { background: none; border: 0; color: rgba(255, 255, 255, .6); cursor: pointer; padding: 0; display: grid; }
.toast button:hover { color: #fff; }
.toast.out { opacity: 0; transform: translateY(6px); transition: all .25s; }

/* ---------------- Responsive ---------------- */
@media (max-width: 1360px) {
  body.pv-on .ad-shell { grid-template-columns: var(--nav-w) minmax(0, 1fr); }
  .ad-preview:not([hidden]) { position: fixed; z-index: 40; top: var(--top); right: 0; bottom: 0; width: min(560px, 100vw); box-shadow: var(--shadow-lg); animation: slideIn .25s ease both; }
  @keyframes slideIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media (max-width: 1180px) {
  .ad-role > span { display: none; }
  .ov-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1040px) {
  .ad-proto { font-size: 0; padding: 6px; gap: 0; }
  .ad-proto svg { width: 15px; height: 15px; }
  .coll { grid-template-columns: minmax(240px, 290px) minmax(0, 1fr); }
}
@media (max-width: 900px) {
  :root { --top: 56px; }
  .ad-burger { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .18); background: transparent; color: #fff; cursor: pointer; }
  .ad-brand-t small { display: none; }
  .ad-shell, body.pv-on .ad-shell { grid-template-columns: minmax(0, 1fr); }
  .ad-nav { position: fixed; z-index: 45; top: var(--top); left: 0; bottom: 0; width: min(300px, 86vw); transform: translateX(-102%); transition: transform .25s ease; box-shadow: var(--shadow-lg); }
  .ad-nav.open { transform: none; }
  body.nav-open::after { content: ""; position: fixed; inset: var(--top) 0 0 0; background: rgba(13, 8, 32, .45); z-index: 44; }
  .st:not(.st-warn):not(.st-err) { display: none; }
  .ab span { display: none; }
  .ad-top .ab { padding: 0 10px; }
  .ad-top-r { gap: 6px; }
  .coll { grid-template-columns: 1fr; }
  .coll-list { position: static; max-height: none; }
  .coll.has-sel .coll-list { display: none; }
  .coll:not(.has-sel) .coll-edit { display: none; }
  .back-m { display: inline-flex; width: 100%; justify-content: flex-start; }
  .back-m span { display: inline; }
  .ed-head { top: -26px; }
  .ad-preview:not([hidden]) { width: 100vw; }
}
@media (max-width: 640px) {
  body { font-size: 14px; }
  .ad-main { padding: 18px 14px 80px; }
  .fgrid { grid-template-columns: 1fr; }
  .fgrid > * { grid-column: 1 / -1; }
  .ad-role select { max-width: 120px; }
  .ad-brand-t { display: none; }
  .sec-a .ab span { display: none; }
  .sec-row > details > summary { flex-wrap: wrap; }
  .sec-t { flex-basis: calc(100% - 80px); }
  .sec-a { width: 100%; justify-content: flex-end; }
  .img-field { flex-direction: column; }
  .ed-actions { width: 100%; }
  .ed-actions .ab span { display: inline; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { flex-direction: column; gap: 8px; padding: 14px; }
  .rep-a .ib-sm[data-rep-dup] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------------- Container-aware layout (e.g. when the preview is docked) ---------------- */
.ad-main { container-type: inline-size; container-name: main; }
@container main (max-width: 860px) {
  .coll { grid-template-columns: minmax(0, 1fr); }
  .coll-list { position: static; max-height: 300px; min-height: 0; }
  .coll-tools { grid-template-columns: minmax(0, 1fr) auto; }
  .coll-tools .search-in { grid-column: 1 / -1; }
  .ed-head { position: static; }
}
@container main (max-width: 600px) {
  .fgrid { grid-template-columns: minmax(0, 1fr); }
  .fgrid > * { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .coll-list { max-height: none; }
}
.ed-title { flex: 1 1 320px; }
.ed-title > div { min-width: 0; }
.ed-pills .pill { white-space: normal; text-align: left; }

/* =====================================================================
   v4 — staff gate, signed-in chip, undo/redo, operations panels
   ===================================================================== */
body.gated .ad-shell, body.gated .ad-top-r { display: none !important; }
.ad-gate { position: fixed; inset: var(--top) 0 0 0; overflow: auto; display: grid; place-items: start center; padding: clamp(20px, 5vw, 60px) 16px; background: radial-gradient(1200px 600px at 50% -10%, #2a1a5c, var(--night)); z-index: 5; }
.gate-card { width: min(640px, 100%); background: var(--surface); border-radius: 24px; padding: clamp(22px, 4vw, 36px); box-shadow: var(--shadow-lg); display: grid; gap: 14px; }
.gate-card h1 { margin: 0; font-family: var(--display); font-size: clamp(22px, 4vw, 30px); }
.gate-lead { margin: 0; color: var(--ink-2); }
.gate-logo { width: 54px; height: 54px; font-size: 18px; border-radius: 16px; }
.gate-list { display: grid; gap: 8px; }
.gate-p { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; text-align: left; font: inherit; color: var(--ink); cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s; }
.gate-p:hover { border-color: var(--violet); transform: translateY(-1px); box-shadow: var(--shadow); }
.gate-p.off { opacity: .6; }
.gate-p svg { width: 16px; height: 16px; color: var(--ink-3); }
.gp-t { display: grid; gap: 1px; min-width: 0; }
.gp-t b { font-size: 14px; } .gp-t small { color: var(--violet); font-weight: 700; font-size: 12px; } .gp-t em { font-style: normal; color: var(--ink-3); font-size: 12px; }
.gate-foot { margin: 4px 0 0; font-size: 13px; } .gate-foot a { color: var(--violet); font-weight: 700; }
.who-av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--grad); color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 12px; flex: none; }
.ad-who { display: flex; align-items: center; gap: 8px; padding: 3px 4px 3px 3px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); }
.ad-who .who-av { width: 30px; height: 30px; font-size: 11px; }
.who-t { display: grid; line-height: 1.15; min-width: 0; }
.who-t b { color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.who-t small { color: var(--sun); font-size: 11px; font-weight: 700; white-space: nowrap; }
.ad-who .ib, .ad-undo .ib { color: #fff; background: transparent; border-color: transparent; }
.ad-who .ib:hover, .ad-undo .ib:hover:not(:disabled) { background: rgba(255, 255, 255, .12); }
.ad-undo { display: inline-flex; gap: 2px; }
.ad-undo .ib:disabled { opacity: .35; cursor: default; }
@media (max-width: 900px) { .who-t { display: none; } .ad-undo { display: none; } }

/* status pills shared with the website (records.js) */
.st-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; background: #efeaf7; color: #4b3f66; vertical-align: middle; }
.st-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.st-pill.tone-ok { background: #dcfce7; color: #166534; } .st-pill.tone-warn { background: #fff1c2; color: #8a5a00; } .st-pill.tone-info { background: #e0f2fe; color: #075985; }
.st-pill.tone-bad { background: #ffe1ea; color: #b4123f; } .st-pill.tone-done { background: #ede9fe; color: #5b21b6; } .st-pill.tone-muted { background: #f1eef6; color: #6b6280; }

.ops-loading { display: flex; align-items: center; gap: 10px; padding: 40px 0; color: var(--ink-3); }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--line-2); border-top-color: var(--violet); animation: opsSpin .8s linear infinite; }
@keyframes opsSpin { to { transform: rotate(360deg); } }
.ops-back { display: inline-block; margin-bottom: 10px; color: var(--violet); font-weight: 700; font-size: 13px; text-decoration: none; }
.ops-h2 { display: flex; align-items: center; gap: 8px; font-size: 15px; margin: 26px 0 12px; }
.ops-h2 svg { width: 18px; height: 18px; }
.ops-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.ops-filters select, .ops-search { height: 38px; border-radius: 10px; border: 1px solid var(--line-2); background: #fff; font: inherit; font-size: 13px; padding: 0 10px; color: var(--ink); }
.ops-search { display: flex; align-items: center; gap: 8px; flex: 1 1 240px; }
.ops-search svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.ops-search input { border: 0; outline: 0; font: inherit; flex: 1; min-width: 0; background: none; }
.ops-tw { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.ops-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ops-table th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); background: #faf8fd; padding: 10px 12px; white-space: nowrap; }
.ops-table td { padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: top; }
.ops-table td small { display: block; color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.ops-table a { color: var(--ink); text-decoration: none; } .ops-table a:hover b, .ops-table a:hover { color: var(--violet); }
.ops-table select { border: 1px solid var(--line-2); border-radius: 8px; padding: 5px 8px; font: inherit; font-size: 12.5px; }
.ops-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 16px; text-align: center; color: var(--ink-3); border: 1.5px dashed var(--line-2); border-radius: var(--r); }
.ops-empty svg { width: 20px; height: 20px; } .ops-empty b { color: var(--ink-2); }
.ops-demo { display: flex; gap: 6px; align-items: flex-start; margin: 10px 0 0; font-size: 12px; color: var(--warn); }
.ops-demo svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.ops-cols { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 1100px) { .ops-cols { grid-template-columns: 1fr 1fr; align-items: start; } .ops-cols.wide-left { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); } }
.ops-cols > div { display: grid; gap: 16px; align-content: start; min-width: 0; }
.ops-box { margin: 0; }
.ops-box h2 { display: flex; align-items: center; gap: 8px; }
.ops-box-x { margin-left: auto; }
.ops-kv { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 8px 14px; margin: 0 0 12px; font-size: 13px; }
.ops-kv dt { color: var(--ink-3); font-weight: 700; } .ops-kv dd { margin: 0; overflow-wrap: anywhere; } .ops-kv dd small { display: block; color: var(--ink-3); }
.ops-kv a { color: var(--violet); font-weight: 700; }
.ops-total { display: flex; justify-content: space-between; margin: 10px 2px 0; font-size: 14px; }
.ops-thread { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.ops-thread li { padding: 10px 12px; border-radius: 12px; background: #f6f2fc; max-width: 92%; }
.ops-thread li.staff { background: #ecfdf5; justify-self: end; }
.ops-thread li.note { background: #fff7db; border: 1px dashed #f3c94d; justify-self: stretch; max-width: none; }
.ops-thread p { margin: 4px 0 0; font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ot-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; }
.ot-meta time { margin-left: auto; color: var(--ink-3); }
.tag-int, .tag-st { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: #fde68a; color: #7c4a03; }
.tag-st { background: #bbf7d0; color: #14532d; }
.ops-compose { display: grid; gap: 8px; }
.ops-compose textarea, .ops-form input, .ops-form select, .ops-form textarea, .ops-inline input, .ops-inline select, .ops-verify textarea, [data-prop] input, [data-prop] textarea, .ops-box select { width: 100%; border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 11px; font: inherit; font-size: 13.5px; background: #fff; color: var(--ink); }
.ops-compose textarea:focus, .ops-form :is(input, select, textarea):focus, .ops-inline :is(input, select):focus, [data-prop] :is(input, textarea):focus { outline: 2px solid rgba(139, 92, 246, .35); border-color: var(--violet); }
.ops-form { display: grid; gap: 10px; }
.ops-form .lbl, [data-prop] .lbl { display: grid; gap: 5px; }
.ops-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 10px; }
.ops-inline label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.ops-inline label.grow, .ops-ms .grow { flex: 1 1 200px; }
.ops-inline label small { font-weight: 500; color: var(--ink-3); }
.ops-assignee { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; font-weight: 700; }
.q-tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 800; }
.q-tag.brand { background: #ede9fe; color: #5b21b6; } .q-tag.cust { background: #e0f2fe; color: #075985; }
.ops-pipe { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 14px; }
.pipe-s { display: grid; gap: 2px; padding: 12px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; font: inherit; text-align: left; cursor: pointer; color: var(--ink); }
.pipe-s b { font-family: var(--display); font-size: 20px; } .pipe-s span { font-size: 12px; color: var(--ink-3); font-weight: 700; }
.pipe-s.on { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(139, 92, 246, .15); }
.ops-stepper { display: flex; gap: 4px; overflow-x: auto; margin: 4px 0 14px; padding-bottom: 2px; }
.ops-stepper span { flex: 1 0 auto; padding: 7px 10px; border-radius: 8px; background: #f1edf8; color: var(--ink-3); font-size: 12px; font-weight: 700; text-align: center; white-space: nowrap; }
.ops-stepper span.done { background: #ede9fe; color: #5b21b6; } .ops-stepper span.now { background: var(--violet); color: #fff; } .ops-stepper span.rej { background: #ffe1ea; color: #b4123f; }
.ops-prop { padding: 12px 0; border-top: 1px solid var(--line); } .ops-prop:first-of-type { border-top: 0; padding-top: 0; }
.op-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ops-prop .pre, .ops-box .pre { white-space: pre-wrap; margin: 6px 0; font-size: 13.5px; }
.ops-ticks { margin: 6px 0; padding-left: 18px; font-size: 13px; }
.ops-new { margin-top: 12px; border: 1.5px dashed var(--line-2); border-radius: 12px; padding: 10px 12px; }
.ops-new summary { cursor: pointer; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.ops-new summary svg { width: 16px; height: 16px; }
.ops-new form { display: grid; gap: 10px; margin-top: 10px; }
.ops-ms { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ops-ms li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.ops-ms li:first-child { border-top: 0; }
.ops-ms .grow { display: grid; } .ops-ms small { color: var(--ink-3); font-size: 12px; }
.ops-ms select { width: auto; }
.ops-verify { display: grid; gap: 8px; }
.role-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-bottom: 10px; }
.role-card { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fcfbfe; }
.role-card p { margin: 4px 0 8px; font-size: 12.5px; color: var(--ink-2); }
.perm-chips { display: flex; flex-wrap: wrap; gap: 4px; } .perm-chips code { font-size: 11px; padding: 2px 6px; border-radius: 6px; background: #efeaf7; }
.ops-mine { margin-top: 16px; }
.ver-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.ver-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #f8f5fd; }
.ver-list li > span:first-child { display: grid; } .ver-list small { color: var(--ink-3); font-size: 12px; }
.small { font-size: 12px; }
.ad-gate[hidden] { display: none !important; }
/* operations tables become stacked cards on phones */
@media (max-width: 640px) {
  .ops-tw { border: 0; background: none; overflow: visible; }
  .ops-table, .ops-table tbody { display: block; }
  .ops-table thead { display: none; }
  .ops-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 14px; margin-bottom: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
  .ops-table td { border: 0; padding: 0; }
  .ops-table td:first-child { flex: 1 0 100%; }
  .ops-table td:empty { display: none; }
}

/* v4.2: cart recommendation preview (Shop & checkout) */
.recs-pv { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; margin: 8px 0; }
.recs-pv ol { margin: 6px 0 0; padding-left: 20px; }
.recs-pv li { margin: 3px 0; }
.recs-pv select { display: block; margin: 4px 0 8px; max-width: 100%; font: inherit; padding: 4px 6px; border-radius: 8px; border: 1px solid #d9d0ee; }
@media (max-width: 760px) { .recs-pv { grid-template-columns: 1fr; } }

/* ---------- v4.4 memberships ---------- */
.mem-prev-wrap, [data-mem-preview] .tbl-wrap { overflow-x: auto; }
.mini-tbl { width: 100%; border-collapse: collapse; font-size: .84rem; min-width: 520px; }
.mini-tbl th, .mini-tbl td { padding: 8px 10px; text-align: left; border-bottom: 1px solid rgba(127, 127, 160, .2); vertical-align: top; }
.mini-tbl thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; opacity: .75; }
.mini-tbl td small { display: block; opacity: .7; font-size: .74rem; }
.mini-tbl td small.muted { display: inline; }
.pv-warn { display: flex; gap: 6px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(255, 170, 0, .14); font-size: .84rem; margin: 0 0 10px; }
.mem-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.mem-chips .ab b { margin-left: 4px; opacity: .75; }
.mem-chips .ab.on { background: #8b5cf6; border-color: #8b5cf6; color: #fff; }
.ops-demo.warn { background: rgba(255, 170, 0, .14); }
.mem-use { margin: 0 0 10px; font-size: .95rem; }
.mem-sub { font-size: .86rem; margin: 14px 0 6px; }
.mem-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; max-height: 360px; overflow: auto; }
.mem-hist li { display: grid; gap: 2px; padding-left: 12px; border-left: 3px solid rgba(139, 92, 246, .35); font-size: .84rem; }
.mem-hist time { font-size: .72rem; font-weight: 700; opacity: .7; }
.mem-act select, .mem-act input { min-width: 0; }
.mem-act [hidden] { display: none !important; }

/* ---------- v4.5 · Member Exclusives: asset fields + text-area designer ---------- */
.ex-asset .thumb { width: 72px; height: 90px; }
.ex-asset .thumb img { object-fit: contain; background: #1b1035; }
.ex-asset .img-ctl { flex: 1; min-width: 0; display: grid; gap: 6px; }
.xd { display: grid; gap: 12px; padding: 12px; border-radius: 14px; background: #120a2c; color: #fff; }
.xd-stage { display: grid; justify-items: center; }
.xd-stage .muted { color: rgba(255, 255, 255, .7); }
.xd-wrap { position: relative; width: min(100%, 460px); border-radius: 8px; overflow: hidden; box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .9); touch-action: none; user-select: none; }
.xd-wrap canvas { display: block; width: 100%; height: 100%; }
.xd-boxes { position: absolute; inset: 0; }
.xd-box { position: absolute; border: 2px dashed #ffd666; border-radius: 4px; background: rgba(255, 214, 102, .08); cursor: move; outline: none; transition: background .15s; }
.xd-box:hover, .xd-box.on, .xd-box:focus-visible { background: rgba(255, 214, 102, .18); border-style: solid; }
.xd-box:focus-visible { box-shadow: 0 0 0 3px #8b5cf6; }
.xd-tag { position: absolute; left: -2px; bottom: 100%; margin-bottom: 2px; padding: 1px 6px; border-radius: 5px 5px 5px 0; font-size: 10px; font-weight: 800; white-space: nowrap; color: #1b1035; background: #ffd666; pointer-events: none; }
.xd-h { position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; border-radius: 4px; background: #ffd666; border: 2px solid #1b1035; cursor: nwse-resize; }
.xd-meta { margin: 6px 0 0; font-size: .72rem; color: rgba(255, 255, 255, .65); text-align: center; }
.xd-tools { display: grid; gap: 4px; }
.xd-tools .lbl { color: #fff; }
.xd-tools input { width: 100%; }
.xd-tools .help { color: rgba(255, 255, 255, .65); }
.callout ul { margin: 4px 0 6px 18px; padding: 0; }

/* Stage 1 · inactivity warning (live console) — reuses the gate card */
.idle-ov { z-index: 90; background: rgba(13, 8, 32, .62); backdrop-filter: blur(2px); }
.idle-card { width: min(460px, 100%); }
.idle-card h2 { margin: 0; font-family: var(--display); font-size: clamp(20px, 3.4vw, 24px); }
.idle-card [data-idle-left] { font-variant-numeric: tabular-nums; }
.idle-card .ab, [data-gate-unavailable] [data-unavail-retry] { min-height: 44px; padding-inline: 20px; }