:root {
  /* light: warm, low-glare paper tones; no pure white, no pure black */
  --bg: #f1eee8;
  --panel: #f7f5f0;
  --side: #e9e5dd;
  --hover: #e6e2d9;
  --active: #ddd8cd;
  --line: #dcd7cc;
  --line-2: #cbc5b8;
  --ink: #2a2721;
  --ink-2: #4b473f;
  --muted: #7a7468;
  --faint: #a59e90;
  --primary: #2f2b25;
  --primary-ink: #f7f5f0;
  --focus: #3a62b0;

  --s-neutral: #948d80; --s-neutral-bg: #e8e4dc;
  --s-warn: #a4640c;    --s-warn-bg: #f3e6cd;
  --s-info: #3c5fa8;    --s-info-bg: #e0e5ef;
  --s-ok: #2f7550;      --s-ok-bg: #dde9df;
  --s-bad: #ad4436;     --s-bad-bg: #f1dfd9;
  --s-review: #7a569e;  --s-review-bg: #e9e1ee;

  --shadow-pop: 0 1px 2px rgba(60,45,25,.07), 0 8px 24px rgba(60,45,25,.12);
  --shade: rgba(45,35,20,.20);
  --radius: 6px;
  --slide: 16px;
  --side-off: -100%;
}
:root[dir="rtl"] { --slide: -16px; --side-off: 100%; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121211; --panel: #171716; --side: #141413; --hover: #1e1e1c; --active: #262624;
    --line: #262624; --line-2: #34342f; --ink: #ededea; --ink-2: #c6c5be; --muted: #8e8d86; --faint: #5e5d57;
    --primary: #ededea; --primary-ink: #121211; --focus: #86a9ff;
    --s-neutral: #85847d; --s-neutral-bg: #232321;
    --s-warn: #e8a53a;    --s-warn-bg: #2e2412;
    --s-info: #7fa2ff;    --s-info-bg: #1a2340;
    --s-ok: #4fc58a;      --s-ok-bg: #132a1f;
    --s-bad: #f07a6f;     --s-bad-bg: #361815;
    --s-review: #b99be6;  --s-review-bg: #2a2138;
    --shadow-pop: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.5);
    --shade: rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121211; --panel: #171716; --side: #141413; --hover: #1e1e1c; --active: #262624;
  --line: #262624; --line-2: #34342f; --ink: #ededea; --ink-2: #c6c5be; --muted: #8e8d86; --faint: #5e5d57;
  --primary: #ededea; --primary-ink: #121211; --focus: #86a9ff;
  --s-neutral: #85847d; --s-neutral-bg: #232321;
  --s-warn: #e8a53a;    --s-warn-bg: #2e2412;
  --s-info: #7fa2ff;    --s-info-bg: #1a2340;
  --s-ok: #4fc58a;      --s-ok-bg: #132a1f;
  --s-bad: #f07a6f;     --s-bad-bg: #361815;
  --s-review: #b99be6;  --s-review-bg: #2a2138;
  --shadow-pop: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.5);
  --shade: rgba(0,0,0,.45);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }

/* ───── per-language typography ───── */
:root[lang="ar"] body {
  font: 400 13.5px/1.6 "IBM Plex Sans Arabic", "IBM Plex Sans", "Segoe UI", Tahoma, sans-serif;
}
:root[lang="en"] body {
  font: 400 13px/1.45 "IBM Plex Sans", "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
}
/* tracking only in Latin script: letter-spacing breaks Arabic joining */
:root[lang="en"] .ph h1, :root[lang="en"] .kpi b, :root[lang="en"] .p-title, :root[lang="en"] .ws b { letter-spacing: -0.012em; }
:root[lang="en"] .grp-label { text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; }
:root[lang="en"] th { text-transform: uppercase; letter-spacing: .03em; font-size: 11px; }
:root[lang="ar"] .script { font-size: 15.5px; line-height: 2.05; }
:root[lang="en"] .script { font-size: 14.5px; line-height: 1.75; }
/* icons that point along the reading direction */
:root[dir="rtl"] .dirflip { transform: scaleX(-1); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-radius: 4px; }
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12.5px; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
svg.i { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
svg.i.sm { width: 14px; height: 14px; }
kbd {
  font: 500 11px "IBM Plex Mono", monospace; color: var(--muted); border: 1px solid var(--line-2);
  border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; background: var(--panel); line-height: 16px;
}

/* ───── shell ───── */
/* sidebar: a 56px icon rail that opens over the content on hover, or stays open when pinned */
.shell { display: grid; grid-template-columns: 56px minmax(0, 1fr); height: 100%; }
:root.pinned .shell { grid-template-columns: 252px minmax(0, 1fr); }
.side { position: relative; z-index: 25; min-height: 0; }
.side-in {
  position: absolute; inset-block: 0; inset-inline-start: 0; width: 56px; overflow: hidden;
  background: var(--side); border-inline-end: 1px solid var(--line);
  display: flex; flex-direction: column; transition: width .18s ease, box-shadow .18s ease;
}
.side-in > * { min-width: 252px; }
.side:hover .side-in, .side:focus-within .side-in, :root.pinned .side-in { width: 252px; }
:root:not(.pinned) .side:hover .side-in { box-shadow: var(--shadow-pop); transition-delay: .12s; }
.fade { opacity: 0; transition: opacity .12s ease; }
.side:hover .fade, .side:focus-within .fade, :root.pinned .fade { opacity: 1; }
:root:not(.pinned) .side:hover .fade { transition-delay: .16s; }
.nav-i { transition: width .18s ease; }
:root:not(.pinned) .side:not(:hover):not(:focus-within) .nav-i { width: 40px; }
.lead { width: 20px; height: 20px; display: grid; place-items: center; flex: none; }
.side .lead svg.i { width: 20px; height: 20px; stroke-width: 1.6; }
.side .nav-i { min-height: 38px; padding-inline: 10px; }
.side .nav-i .sq { width: 13px; height: 13px; border-radius: 4px; }
.side .ws-mark { width: 32px; height: 32px; border-radius: 8px; }
.side .ws-mark svg { width: 20px; height: 20px; }
.side .av { width: 30px; height: 30px; font-size: 12px; }
.pin { margin-inline-start: auto; }
:root.pinned .pin { color: var(--ink); }
.ws { display: flex; align-items: center; gap: 10px; padding: 12px 10px 10px 12px; }
:root[dir="rtl"] .ws { padding: 12px 12px 10px 10px; }
.ws-mark {
  width: 28px; height: 28px; border-radius: 7px; background: var(--primary); color: var(--primary-ink);
  display: grid; place-items: center; flex: none;
}
.ws-mark svg { width: 18px; height: 18px; }
.ws b { font-weight: 600; font-size: 14px; display: block; line-height: 1.25; }
.ws small { color: var(--muted); font-size: 11.5px; display: block; line-height: 1.3; }
.side-scroll { flex: 1; overflow-y: auto; padding: 4px 8px 12px; display: grid; gap: 18px; align-content: start; }
.grp-label { font-size: 11.5px; color: var(--muted); padding: 0 8px 4px; font-weight: 500; }
.nav-i {
  width: 100%; display: flex; align-items: center; gap: 12px; border: 0; background: none;
  padding: 6px 12px; border-radius: var(--radius); color: var(--ink-2); text-align: start; min-height: 32px;
}
.nav-i:hover { background: var(--hover); color: var(--ink); }
.nav-i[aria-current="page"] { background: var(--active); color: var(--ink); font-weight: 500; }
.nav-i .sq { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.nav-i .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-i .trail { margin-inline-start: auto; color: var(--muted); font-size: 12px; }
.side-foot { border-top: 1px solid var(--line); padding: 8px; }
.acct {
  width: 236px; display: flex; align-items: center; gap: 10px; border: 0; background: none; text-align: start;
  padding: 6px 5px; border-radius: var(--radius); color: var(--ink);
}
.acct:hover, .acct[aria-expanded="true"] { background: var(--hover); }
.acct .av { position: relative; }
.av-dot { position: absolute; top: -1px; inset-inline-end: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--s-warn); box-shadow: 0 0 0 2px var(--side); }
.acct-chev { margin-inline-start: auto; color: var(--muted); display: grid; }
/* keep the sidebar open while its account menu is showing */
:root.side-hold .side-in { width: 252px; }
:root.side-hold:not(.pinned) .side-in { box-shadow: var(--shadow-pop); }
:root.side-hold .fade { opacity: 1; }
:root.side-hold .nav-i { width: 100% !important; }
.av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
/* profile & password */
.form-card { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 20px; display: grid; gap: 18px; }
.pf-photo { display: flex; align-items: center; gap: 16px; }
.av.lg { width: 64px; height: 64px; font-size: 22px; font-weight: 600; }
.pf-photo .btns { display: flex; gap: 6px; margin-bottom: 6px; }
.pf-photo small { color: var(--muted); font-size: 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fld { display: grid; gap: 6px; }
.fld > span { font-size: 12.5px; color: var(--ink-2); font-weight: 500; }
.input { height: 34px; width: 100%; border: 1px solid var(--line-2); background: var(--bg); border-radius: var(--radius); padding-inline: 10px; outline: none; }
.input:focus { border-color: var(--focus); background: var(--panel); }
.input[aria-invalid="true"] { border-color: var(--s-bad); }
:root[dir="rtl"] .input[dir="ltr"] { text-align: right; }
.fld .err, .form-err { color: var(--s-bad); font-size: 12px; }
.form-foot { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 2px; }
.form-foot .end { margin-inline-start: auto; display: flex; gap: 6px; }
.note { border-radius: 6px; padding: 10px 12px; font-size: 12.5px; display: flex; gap: 10px; align-items: flex-start; line-height: 1.6; }
.note.info { background: var(--s-info-bg); color: var(--ink-2); }
.note.info svg { color: var(--s-info); margin-top: 2px; }
.note.warn { background: var(--s-warn-bg); color: var(--ink-2); }
.note.warn svg { color: var(--s-warn); margin-top: 2px; }
.note .end { margin-inline-start: auto; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--focus); font-size: 12.5px; }
.linkbtn:hover { text-decoration: underline; text-underline-offset: 3px; }
.linkbtn:disabled { color: var(--muted); text-decoration: none; cursor: default; }
.pw-row { display: flex; align-items: center; gap: 12px; }
.pw-row .dots { letter-spacing: .2em; color: var(--ink-2); }
.pw-row small { color: var(--muted); display: block; font-size: 12px; }
.pw-row .end { margin-inline-start: auto; }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-inline-end: 38px; }
.pw-eye { position: absolute; inset-inline-end: 3px; top: 3px; width: 28px; height: 28px; }
.strength { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.strength .bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; flex: 1; max-width: 160px; }
.strength .bars span { height: 3px; border-radius: 2px; background: var(--line-2); }
/* account menu */
.acct-menu { width: 248px; }
.acct-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; }
.acct-head .av { width: 32px; height: 32px; font-size: 12px; }
.acct-head b { display: block; font-weight: 600; line-height: 1.3; }
.acct-head small { display: block; color: var(--muted); font-size: 12px; }
.pop-row { display: flex; align-items: center; gap: 9px; height: 36px; padding-inline: 8px; color: var(--ink-2); white-space: nowrap; }
.pop-row .seg { margin-inline-start: auto; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; height: 26px; }
.seg button { border: 0; background: none; padding: 0 9px; font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--active); color: var(--ink); font-weight: 600; }
.seg .ar { font-family: "IBM Plex Sans Arabic", sans-serif; }
.seg .en { font-family: "IBM Plex Sans", sans-serif; }
.grp-label { white-space: nowrap; }
.av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 11px; font-weight: 600; color: #fff; }
.side-foot .who { min-width: 0; flex: 1; line-height: 1.25; }
.side-foot .who b { font-weight: 500; font-size: 13px; display: block; }
.side-foot .who small { color: var(--muted); font-size: 11.5px; }
.icon-btn { width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); border-radius: var(--radius); }
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.lang { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; height: 26px; }
.lang button { border: 0; background: none; padding: 0 8px; font-size: 12px; color: var(--muted); }
.lang button[aria-pressed="true"] { background: var(--active); color: var(--ink); font-weight: 600; }
.lang button:first-child { font-family: "IBM Plex Sans Arabic", sans-serif; }
.lang button:last-child { font-family: "IBM Plex Sans", sans-serif; }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar { height: 52px; flex: none; display: flex; align-items: center; gap: 12px; padding-inline: 20px; border-bottom: 1px solid var(--line); background: var(--bg); }
.crumbs { display: flex; align-items: center; gap: 6px; color: var(--muted); min-width: 0; white-space: nowrap; }
.crumbs b { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.crumbs svg { color: var(--faint); }
.top-end { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.menu-btn { display: none; }
.content { flex: 1; overflow: auto; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 24px 24px 64px; display: grid; gap: 20px; align-content: start; }
.wrap > * { min-width: 0; }

.month { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); height: 30px; }
.month button { border: 0; background: none; height: 100%; width: 28px; display: grid; place-items: center; color: var(--muted); }
.month button:hover { color: var(--ink); background: var(--hover); }
.month .lbl { padding-inline: 10px; min-width: 124px; text-align: center; font-weight: 500; border-inline: 1px solid var(--line); height: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.month .now-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--s-ok); }
.today-link { border: 0; background: none; color: var(--muted); font-size: 12.5px; padding: 4px 6px; border-radius: 4px; white-space: nowrap; }
.today-link:hover { color: var(--ink); background: var(--hover); }

.btn { height: 30px; display: inline-flex; align-items: center; gap: 6px; padding-inline: 10px; white-space: nowrap; border: 1px solid var(--line-2); background: var(--panel); border-radius: var(--radius); font-weight: 500; font-size: 13px; }
.btn:hover:not(:disabled) { background: var(--hover); }
.btn:disabled { color: var(--faint); cursor: not-allowed; }
.icon-btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.btn-primary:hover:not(:disabled) { background: var(--primary); opacity: .88; }
.btn-primary:disabled { background: var(--hover); border-color: var(--line); color: var(--faint); }
.btn-ghost { border-color: transparent; background: none; }
.btn-danger { color: var(--s-bad); }
.btn-sm { height: 26px; font-size: 12.5px; padding-inline: 8px; }

.ph { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.ph h1 { margin: 0; font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 10px; text-wrap: balance; }
.ph h1 .sq { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.ph p { margin: 4px 0 0; color: var(--muted); }
.meter { display: flex; align-items: center; gap: 10px; }
.meter-track { width: 160px; height: 6px; border-radius: 99px; background: var(--hover); overflow: hidden; display: flex; }
.meter-track span { height: 100%; }
.meter-txt { color: var(--muted); white-space: nowrap; }
.meter-txt b { color: var(--ink); font-weight: 600; }

.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin-bottom: -1px; }
.tab { border: 0; background: none; padding: 8px 10px; color: var(--muted); display: flex; align-items: center; gap: 6px; border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.tab .c { font-size: 11.5px; color: var(--muted); background: var(--hover); border-radius: 4px; padding: 0 5px; min-width: 18px; text-align: center; }
.toolbar .end { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; padding-bottom: 8px; }
.search { position: relative; }
.search svg { position: absolute; inset-inline-start: 8px; top: 8px; color: var(--faint); }
.search input { height: 30px; width: 220px; border: 1px solid var(--line-2); background: var(--panel); border-radius: var(--radius); padding-inline: 30px 34px; outline: none; }
.search input:focus { border-color: var(--focus); }
.search kbd { position: absolute; inset-inline-end: 7px; top: 6px; }

.tbl-wrap { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 1000px; }
th { position: sticky; top: 0; background: var(--panel); z-index: 1; text-align: start; font-weight: 500; font-size: 12px; color: var(--muted); padding: 0 6px; height: 36px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { height: 46px; padding: 0 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.row:hover td { background: var(--hover); }
tbody tr.row.sel td { background: var(--active); }
tbody tr.row.over td { box-shadow: inset 0 2px 0 var(--focus); }
td.n { width: 36px; color: var(--faint); text-align: center; }
td.n .grip { display: none; color: var(--muted); cursor: grab; }
tr.row:hover td.n .idx { display: none; }
tr.row:hover td.n .grip { display: inline-flex; }
.t-title { font-weight: 500; color: var(--ink); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.t-title.untitled { color: var(--faint); font-weight: 400; }

.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding-inline: 8px; border-radius: 5px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); max-width: 124px; text-decoration: none; }
.chip:hover { border-color: var(--line-2); color: var(--ink); background: var(--hover); }
.chip .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.cell-link { display: flex; align-items: center; gap: 4px; }
.chip.watch { cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--ink); }
.chip.watch .i { color: var(--s-ok); }
.p-final-dd { gap: 8px; }
.p-final-dd .btn { flex: none; }

/* "save your changes?" — above the panel and the viewer */
#ask .scrim { z-index: 50; }
.ask { position: fixed; z-index: 51; inset: 0; margin: auto; width: min(420px, calc(100vw - 32px)); height: fit-content;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow-pop); padding: 20px 20px 16px; animation: pop .12s ease-out; }
.ask h2 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.ask p { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.ask .acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ask .acts .end { margin-inline-start: auto; display: flex; gap: 8px; }

/* video viewer — above the panel */
#viewer .scrim { z-index: 40; }
.viewer { position: fixed; z-index: 41; inset: 24px; margin: auto; width: min(1360px, calc(100vw - 48px)); height: min(820px, calc(100vh - 48px));
  display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); overflow: hidden; animation: fade .15s ease-out; }
.vw-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 340px; }
.vw-stage { min-height: 0; display: flex; flex-direction: column; background: #000; }
.vw-side { min-height: 0; display: flex; flex-direction: column; border-inline-start: 1px solid var(--line); }
.vw-nh { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.vw-nh h3 { margin: 0; font-size: 13px; font-weight: 600; }
.vw-list { flex: 1; overflow-y: auto; }
.vw-list .rn:first-child { border-top: 0; }
.vw-n .tc { border: 0; cursor: pointer; }
.vw-n button.tc:hover { filter: brightness(1.15); text-decoration: underline; }
.vw-empty { margin: 0; padding: 18px 16px; color: var(--muted); font-size: 12.5px; line-height: 1.7; }
.vw-add { display: grid; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); background: var(--bg); }
.vw-add-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vw-add-row .end { margin-inline-start: auto; display: flex; gap: 6px; }
.vw-add-row small { font-size: 11px; }
.vw-add .t { width: 76px; height: 30px; font-family: "IBM Plex Mono", monospace; text-align: center; color: var(--s-review); }
.vw-add textarea.input { height: auto; min-height: 64px; padding: 8px 10px; resize: vertical; line-height: 1.6; font: inherit; }
.vw-review { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 14px; border-top: 1px solid var(--line); font-size: 12.5px; }
.vw-review .end { margin-inline-start: auto; }
.vw-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--line); }
[dir="rtl"] .vw-head { padding: 10px 18px 10px 12px; }
.vw-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.vw-head a.btn { text-decoration: none; }
.vw-head a.btn:not(.btn-primary) { color: var(--ink-2); }
.vw-t b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vw-t > span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.vw-t .sq { width: 8px; height: 8px; border-radius: 2px; }
.vw-frame { position: relative; flex: 1; min-height: 0; background: #000; }
.vw-frame iframe, .vw-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; }
.vw-hint { margin: 0; padding: 9px 16px; display: flex; gap: 8px; align-items: center; font-size: 12px; line-height: 1.6; color: var(--muted); background: var(--panel); border-top: 1px solid var(--line); }
@media (max-width: 860px) {
  .viewer { inset: 0; width: 100vw; height: 100vh; border-radius: 0; }
  .vw-main { grid-template-columns: 1fr; grid-template-rows: minmax(200px, 45vh) minmax(0, 1fr); }
  .vw-side { border-inline-start: 0; border-top: 1px solid var(--line); }
  .vw-head .btn .t-hide { display: none; }
}
.cell-link .edit { opacity: 0; width: 26px; height: 26px; }
tr.row:hover .cell-link .edit { opacity: 1; }
.add-link { white-space: nowrap; border: 1px dashed transparent; background: none; color: var(--faint); height: 26px; padding-inline: 8px; border-radius: 5px; display: inline-flex; align-items: center; gap: 6px; }
tr.row:hover .add-link { border-color: var(--line-2); color: var(--muted); }
.add-link:hover { color: var(--ink) !important; }
.script-cell { white-space: nowrap; border: 0; background: none; padding: 4px 6px; margin-inline-start: -6px; border-radius: 5px; display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.script-cell:hover { background: var(--active); color: var(--ink); }
.script-cell .sub { color: var(--muted); }

.status-btn.static { cursor: default; }
.status-btn.static:hover { background: none; }
.pop-i.role-i { height: auto; padding-block: 7px; align-items: flex-start; }
.pop-i.role-i > span:first-child { display: grid; gap: 1px; white-space: normal; max-width: 250px; }
.pop-i.role-i b { font-weight: 500; color: var(--ink); }
.pop-i.role-i small { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.pop-i.role-i.danger b { color: var(--s-bad); }
.status-btn { border: 0; background: none; display: inline-flex; align-items: center; gap: 7px; padding: 4px 8px; margin-inline-start: -8px; border-radius: 5px; color: var(--ink-2); white-space: nowrap; }
.status-btn:hover { background: var(--active); color: var(--ink); }
.sdot { width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px var(--dot-ring, transparent); }
.st-not_started .sdot { background: transparent; border: 1.5px solid var(--s-neutral); width: 9px; height: 9px; }
.st-editing .sdot { background: var(--s-warn); --dot-ring: var(--s-warn-bg); }
.st-edited .sdot { background: var(--s-info); --dot-ring: var(--s-info-bg); }
.st-published .sdot { background: var(--s-ok); --dot-ring: var(--s-ok-bg); }
.st-failed .sdot { background: var(--s-bad); --dot-ring: var(--s-bad-bg); }
.st-review .sdot { background: var(--s-review); --dot-ring: var(--s-review-bg); }
.st-approved .sdot { background: var(--s-ok-bg); border: 2px solid var(--s-ok); width: 10px; height: 10px; }
.pop-i:disabled { color: var(--faint); cursor: not-allowed; background: none; }
.pop-i .why { font-size: 11px; color: var(--faint); }

/* queue + cancel */
.mt-q { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.mt-cancel { width: 24px; height: 24px; flex: none; }
.mt-changes { display: inline-flex; align-items: center; gap: 6px; color: var(--s-warn); font-size: 12.5px; white-space: nowrap; }

/* needs attention */
.att { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.att-i { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); cursor: pointer; }
.att-i:first-child { border-top: 0; }
.att-i:hover { background: var(--hover); }
.att-i .d { width: 8px; height: 8px; border-radius: 50%; }
.att-i .nm { min-width: 0; }
.att-i .nm b { font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-i .nm small { color: var(--muted); display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; }
.att-i .nm small .sq { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.att-i time { color: var(--faint); font-size: 12px; white-space: nowrap; }
.att-none { padding: 18px 14px; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.att-none svg { color: var(--s-ok); }

/* undo toast */
.toast { position: relative; overflow: hidden; }
.toast.warn svg { color: var(--s-warn); }
.toast-undo { margin-inline-start: auto; border: 0; background: none; color: var(--focus); font-weight: 600; padding: 2px 4px; border-radius: 4px; }
.toast-undo:hover { background: var(--hover); }
.toast-bar { position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--focus); opacity: .5; transform-origin: left; animation: drain 5s linear forwards; }
:root[dir="rtl"] .toast-bar { transform-origin: right; }
@keyframes drain { to { transform: scaleX(0); } }

/* youtube hover card */
.thumb { position: fixed; z-index: 45; width: 256px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 8px; box-shadow: var(--shadow-pop); overflow: hidden; animation: pop .12s ease-out; pointer-events: none; }
.thumb .img { aspect-ratio: 16 / 9; background: var(--hover); display: grid; place-items: center; color: var(--faint); font-size: 12px; }
.thumb .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .img.none img { display: none; }
.thumb .img:not(.none) span { display: none; }
.thumb .meta { display: flex; align-items: center; gap: 6px; padding: 8px 10px; font-size: 12px; color: var(--muted); }

/* multi-select */
td.n { width: 52px; }
td.n .hov { display: none; align-items: center; gap: 2px; }
tr.row:hover td.n .hov, table.selecting td.n .hov { display: inline-flex; }
tr.row:hover td.n .idx, table.selecting td.n .idx { display: none; }
table.selecting tr.row:not(:hover) td.n .grip { visibility: hidden; }
.cb { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; margin: 0; }
th.n-h { width: 52px; text-align: center; }
th.n-h .cb { visibility: hidden; }
thead:hover th.n-h .cb, table.selecting th.n-h .cb { visibility: visible; }
tbody tr.row.picked td { background: var(--s-info-bg); }
.selbar {
  position: fixed; z-index: 28; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); inset-inline: 0; margin: 0 auto; width: fit-content;
  display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 14px; background: var(--primary); color: var(--primary-ink);
  border-radius: 10px; box-shadow: var(--shadow-pop); animation: pop .15s ease-out; white-space: nowrap;
}
:root[dir="rtl"] .selbar { padding: 6px 14px 6px 6px; }
.selbar .btn { background: transparent; color: inherit; border-color: color-mix(in srgb, var(--primary-ink) 25%, transparent); }
.selbar .btn:hover:not(:disabled) { background: color-mix(in srgb, var(--primary-ink) 12%, transparent); }
.selbar .icon-btn { color: inherit; opacity: .75; }
.selbar .icon-btn:hover { background: color-mix(in srgb, var(--primary-ink) 12%, transparent); opacity: 1; }
.selbar b { font-weight: 600; margin-inline-end: 6px; }

/* review in the detail panel */
.rv { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.rv-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; flex-wrap: wrap; }
.rv-head .end { margin-inline-start: auto; display: flex; gap: 6px; }
.rv-list { border-top: 1px solid var(--line); }
.rn { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 13px; }
.rn:first-child { border-top: 0; }
.rn .tc { font: 500 12px "IBM Plex Mono", monospace; color: var(--s-review); background: var(--s-review-bg); border-radius: 4px; padding: 2px 6px; text-align: center; }
.rn .tx { color: var(--ink); line-height: 1.6; }
.rn .tx small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.rn.done .tx { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }
.rv-add { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); background: var(--bg); }
.rv-add .input { height: 32px; }
.rv-add .t { font-family: "IBM Plex Mono", monospace; text-align: center; }
.rv-err { grid-column: 1 / -1; color: var(--s-bad); font-size: 12px; }
.rv-foot { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); }
.rv-foot .end { margin-inline-start: auto; display: flex; gap: 6px; }
.btn-ok { background: var(--s-ok); border-color: var(--s-ok); color: #fff; }
.btn-ok:hover:not(:disabled) { background: var(--s-ok); opacity: .9; }

/* phone cards (the table becomes a list) */
.vcards { display: none; gap: 8px; }
.vcard { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 12px 14px; display: grid; gap: 8px; cursor: pointer; }
.vcard.picked { border-color: var(--focus); }
.vcard .top { display: flex; align-items: center; gap: 8px; }
.vcard .top .ago { margin-inline-start: auto; }
.vcard .ttl { font-weight: 600; font-size: 14.5px; line-height: 1.45; }
.vcard .ttl.untitled { color: var(--faint); font-weight: 400; }
.vcard .row2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vcard .status-btn { margin-inline-start: 0; padding-inline: 0; }
.vcard .mt-run { width: 100%; }

/* loading */
.sk { border-radius: 4px; height: 12px; background: linear-gradient(90deg, var(--hover) 25%, var(--active) 45%, var(--hover) 65%); background-size: 300% 100%; animation: sk 1.3s ease-in-out infinite; }
@keyframes sk { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .sk, .toast-bar { animation: none; } }
.sk-row { display: grid; grid-template-columns: 24px 2.2fr 1.2fr 1fr 1.2fr 1fr 1.3fr .8fr; gap: 16px; align-items: center; padding: 17px 14px; border-top: 1px solid var(--line); }
.sk-row:first-child { border-top: 0; }

/* connection */
.netbar { display: none; align-items: center; gap: 10px; padding: 8px 20px; font-size: 12.5px; background: var(--s-warn-bg); color: var(--ink-2); border-bottom: 1px solid var(--line); }
.netbar.on { display: flex; }
.netbar svg { color: var(--s-warn); }

.mt { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.mt-run { display: grid; gap: 4px; width: 140px; }
.mt-run .top > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }
.mt-run .top { display: flex; align-items: center; gap: 7px; color: var(--s-warn); font-weight: 500; font-size: 12.5px; white-space: nowrap; }
.mt-run .top .mono { color: var(--ink-2); margin-inline-start: auto; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.steps span { height: 3px; border-radius: 2px; background: var(--line-2); }
.steps span.done { background: var(--s-warn); }
.steps span.cur { background: linear-gradient(to right, var(--s-warn) 50%, var(--line-2) 50%); background-size: 200% 100%; animation: fill 1.6s linear infinite; }
:root[dir="rtl"] .steps span.cur { background-image: linear-gradient(to left, var(--s-warn) 50%, var(--line-2) 50%); animation-name: fill-rtl; }
@keyframes fill { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes fill-rtl { from { background-position: 0 0; } to { background-position: 100% 0; } }
.spin { animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.mt-done { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; }
.mt-done svg { color: var(--s-ok); }
.mt-fail { color: var(--s-bad); display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; max-width: 136px; }
.mt-fail span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ago { color: var(--muted); white-space: nowrap; font-size: 12.5px; }
.row-more { opacity: 0; }
tr.row:hover .row-more, .row-more[aria-expanded="true"] { opacity: 1; }

tr.ghost td { height: 40px; }
.ghost-btn { width: 100%; display: flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--faint); padding: 0 4px; height: 32px; border-radius: 5px; text-align: start; }
.ghost-btn:hover { color: var(--ink-2); background: var(--hover); }
.empty-state { padding: 48px 16px; text-align: center; color: var(--muted); }
.empty-state b { display: block; color: var(--ink); font-weight: 500; margin-bottom: 4px; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.kpi { padding: 14px 16px; border-inline-start: 1px solid var(--line); display: grid; gap: 2px; }
.kpi:first-child { border-inline-start: 0; }
.kpi small { color: var(--muted); font-size: 12px; }
.kpi b { font-size: 22px; font-weight: 600; }
.kpi b .mono { font-size: 20px; font-weight: 500; }
.kpi b .of { color: var(--faint); font-weight: 400; font-size: 15px; }
.kpi .hint { font-size: 12px; color: var(--muted); }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sec-h h2 { margin: 0; font-size: 14px; font-weight: 600; }
.sec-h span { color: var(--muted); font-size: 12.5px; }
table.ov { min-width: 760px; }
table.ov td { height: 52px; }
.ov-name { display: flex; align-items: center; gap: 10px; font-weight: 500; border: 0; background: none; padding: 0; color: var(--ink); text-align: start; }
.ov-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.ov-name .sq { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.prog { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.prog .meter-track { width: 180px; }
td.c, th.c { text-align: center; }
.zero { color: var(--faint); }
.warn-n { color: var(--s-warn); font-weight: 600; }
.live-list { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.live-i { display: grid; grid-template-columns: minmax(0, 1fr) 200px auto; gap: 16px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); }
.live-i:first-child { border-top: 0; }
.live-i .nm { min-width: 0; }
.live-i .nm b { font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-i .nm small { color: var(--muted); display: flex; align-items: center; gap: 6px; }
.live-i .nm small .sq { width: 8px; height: 8px; border-radius: 2px; }

.scrim { position: fixed; inset: 0; background: var(--shade); z-index: 30; animation: fade .15s ease-out; }
.panel { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: min(560px, 100%); z-index: 31; background: var(--panel); border-inline-start: 1px solid var(--line); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; animation: slide .18s ease-out; padding-bottom: env(safe-area-inset-bottom, 0px); }
@keyframes fade { from { opacity: 0; } }
@keyframes slide { from { transform: translateX(var(--slide)); opacity: 0; } }
.p-head { height: 52px; flex: none; display: flex; align-items: center; gap: 8px; padding-inline: 16px 12px; border-bottom: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.p-head .end { margin-inline-start: auto; display: flex; gap: 2px; align-items: center; }
.p-foot { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--panel); }
.p-foot #p-discard { margin-inline-start: auto; }
.p-foot #p-save { margin-inline-start: auto; }
.p-foot #p-discard:not([hidden]) + #p-save { margin-inline-start: 0; }
.p-foot #p-save kbd { margin-inline-start: 4px; background: transparent; color: inherit; border-color: currentColor; opacity: .55; }
.p-dirty { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.p-dirty.on::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--s-warn); }
.p-body { flex: 1; overflow-y: auto; padding: 20px 24px 32px; display: grid; gap: 22px; align-content: start; }
.p-title { width: 100%; border: 0; background: none; outline: none; font-size: 20px; font-weight: 600; padding: 0; }
.p-title::placeholder { color: var(--faint); }
.props { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 4px 12px; align-items: center; }
.props dt { color: var(--muted); font-size: 12.5px; min-height: 32px; display: flex; align-items: center; gap: 8px; }
.props dd { margin: 0; min-height: 32px; display: flex; align-items: center; min-width: 0; }
.p-input { width: 100%; height: 30px; border: 1px solid transparent; background: none; border-radius: 5px; padding-inline: 8px; margin-inline-start: -8px; outline: none; font: 12.5px "IBM Plex Mono", monospace; color: var(--ink-2); }
:root[dir="rtl"] .p-input { text-align: right; }
.p-input:hover { background: var(--hover); }
.p-input:focus { border-color: var(--focus); background: var(--panel); }
.p-input::placeholder { color: var(--faint); font-family: inherit; }
:root[lang="ar"] .p-input::placeholder { font-family: "IBM Plex Sans Arabic", sans-serif; font-size: 13px; }
:root[lang="en"] .p-input::placeholder { font-family: "IBM Plex Sans", sans-serif; font-size: 13px; }
.p-sec { display: grid; gap: 8px; }
.p-sec-h { display: flex; align-items: center; gap: 8px; }
.p-sec-h h3 { margin: 0; font-size: 13px; font-weight: 600; }
.p-sec-h .meta { margin-inline-start: auto; color: var(--muted); font-size: 12px; display: flex; gap: 12px; }
.script { width: 100%; min-height: 280px; resize: vertical; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); padding: 14px 16px; outline: none; color: var(--ink); }
.script:focus { border-color: var(--focus); background: var(--panel); }
.script.notes { min-height: 72px; font-size: 13.5px; line-height: 1.7; }
.saved { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; margin-inline-end: 6px; }
.mt-box { border: 1px solid var(--line); border-radius: 8px; padding: 14px; display: grid; gap: 12px; }
.mt-box .row1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mt-box .row1 .end { margin-inline-start: auto; }
.mt-steps { display: grid; gap: 8px; }
.mt-step { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.mt-step .b { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; flex: none; }
.mt-step.done { color: var(--ink-2); }
.mt-step.done .b { background: var(--s-ok); border-color: var(--s-ok); color: #fff; }
.mt-step.cur { color: var(--ink); font-weight: 500; }
.mt-step.cur .b { border-color: var(--s-warn); color: var(--s-warn); }
.log-i { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 6px 0; font-size: 12.5px; color: var(--ink-2); }
.log-i .d { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); margin: 7px auto 0; }
.log-i time { color: var(--faint); white-space: nowrap; }
.log-empty { margin: 4px 0; font-size: 12.5px; }
.log-i b { font-weight: 500; color: var(--ink); }

.pop { position: fixed; z-index: 40; background: var(--panel); border: 1px solid var(--line-2); border-radius: 8px; box-shadow: var(--shadow-pop); padding: 4px; min-width: 210px; animation: pop .1s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .spin, .steps span.cur, .scrim, .panel, .pop, .toast { animation: none; } }
.pop-i { width: 100%; display: flex; align-items: center; gap: 9px; border: 0; background: none; height: 32px; padding-inline: 8px; border-radius: 5px; text-align: start; color: var(--ink-2); white-space: nowrap; text-decoration: none; }
.pop-i:hover, .pop-i:focus-visible { background: var(--hover); color: var(--ink); outline: none; }
.pop-i .end { margin-inline-start: auto; color: var(--faint); display: flex; align-items: center; gap: 6px; }
.pop-i.danger { color: var(--s-bad); }
.pop hr { border: 0; border-top: 1px solid var(--line); margin: 4px -4px; }
.pop-h { padding: 6px 8px 4px; font-size: 11.5px; color: var(--muted); }
.pop-form { padding: 8px; display: grid; gap: 8px; width: 320px; max-width: calc(100vw - 32px); }
.pop-form label { font-size: 12px; color: var(--muted); }
.pop-form input { height: 32px; border: 1px solid var(--line-2); border-radius: 5px; padding-inline: 8px; outline: none; background: var(--bg); font: 12.5px "IBM Plex Mono", monospace; width: 100%; }
.pop-form input:focus { border-color: var(--focus); }
.pop-form .acts { display: flex; gap: 6px; align-items: center; }
.pop-form .err { color: var(--s-bad); font-size: 12px; }
.pop-confirm { padding: 10px; width: 270px; display: grid; gap: 10px; font-size: 13px; }
.pop-confirm .acts { display: flex; justify-content: flex-end; gap: 6px; }

.set-sec { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; padding-block: 24px; border-top: 1px solid var(--line); }
.set-sec:first-of-type { border-top: 0; padding-top: 4px; }
.set-sec h2 { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.set-sec p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.7; }
table.set { min-width: 620px; }
table.set td { height: 52px; }
.in { height: 30px; border: 1px solid transparent; background: none; border-radius: 5px; padding-inline: 8px; outline: none; width: 100%; }
.in:hover { border-color: var(--line-2); }
.in:focus { border-color: var(--focus); background: var(--panel); }
.in.n { width: 64px; text-align: center; font-variant-numeric: tabular-nums; }
.swatch { width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--line-2); padding: 0; background: none; cursor: pointer; }
.swatch::-webkit-color-swatch-wrapper { padding: 0; }
.swatch::-webkit-color-swatch { border: 0; border-radius: 4px; }
.tag { font-size: 11.5px; border-radius: 4px; padding: 1px 6px; background: var(--hover); color: var(--muted); white-space: nowrap; font-weight: 500; }
.tag.warn { background: var(--s-warn-bg); color: var(--s-warn); }
.person { display: flex; align-items: center; gap: 10px; }
.person b { font-weight: 500; display: block; line-height: 1.3; }
.person small { color: var(--muted); font-size: 12px; display: block; }
.ovr { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ovr .tag { display: inline-flex; align-items: center; gap: 4px; padding-inline-end: 2px; }
.ovr .tag button { border: 0; background: none; color: inherit; padding: 0 3px; display: grid; }
.card { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 16px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.card .ws-mark { width: 40px; height: 40px; border-radius: 9px; }
.card .ws-mark svg { width: 24px; height: 24px; }
.card dl { margin: 0; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 12px; font-size: 13px; }
.card dt { color: var(--muted); }
.card dd { margin: 0; }

.toasts { position: fixed; inset-inline-end: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 50; display: grid; gap: 8px; }
.toast { background: var(--panel); border: 1px solid var(--line-2); box-shadow: var(--shadow-pop); border-radius: 8px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; min-width: 260px; max-width: 380px; animation: pop .15s ease-out; }
.toast svg { color: var(--s-ok); }

@media (max-width: 900px) {
  .shell, :root.pinned .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; inset-block: 0; inset-inline-start: 0; width: 268px; z-index: 35; transform: translateX(var(--side-off)); transition: transform .2s; }
  .side.open { transform: none; box-shadow: var(--shadow-pop); }
  .side-in, .side:hover .side-in { position: static; width: 100%; height: 100%; box-shadow: none; }
  .side-in > * { min-width: 0; }
  .fade { opacity: 1; }
  .pin { display: none; }
  .menu-btn { display: grid; }
  .topbar { padding-inline: 12px; }
  .wrap { padding: 16px 16px 48px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:nth-child(3) { border-inline-start: 0; }
  .kpi:nth-child(n+3) { border-top: 1px solid var(--line); }
  .set-sec { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .live-i { grid-template-columns: minmax(0, 1fr) auto; }
  .live-i .steps-col { display: none; }
  .toolbar .end { width: 100%; }
  .toolbar .end .search, .search input { flex: 1; width: 100%; }
  .meter-track { width: 110px; }
  .top-end .btn-primary .t { display: none; }
}
@media (max-width: 700px) {
  .tbl-wrap.vt { display: none; }
  .vcards { display: grid; }
  .ph .meter { width: 100%; }
  .ph .meter-track { flex: 1; }
  .att-i { grid-template-columns: 10px minmax(0, 1fr) auto; }
  .att-i time { display: none; }
  .rn { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .selbar { inset-inline: 12px; width: auto; }
}

/* ───── app shell vs sign-in screens ───── */
[hidden] { display: none !important; }
#app { height: 100%; }
/* the sign-in screens scale with the window: --u is one "unit", 16px on a laptop, up to ~20px on a big monitor */
.auth {
  --u: clamp(15px, 0.55vw + 8px, 20px);
  min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 1.4);
  padding: 32px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  font-size: var(--u);
}
.auth-card {
  width: 100%; max-width: calc(var(--u) * 28); background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: calc(var(--u) * 2.2); display: grid; gap: calc(var(--u) * 1.1); box-shadow: 0 2px 6px rgba(60,45,25,.06), 0 18px 48px rgba(60,45,25,.08);
}
.auth-brand { display: flex; align-items: center; gap: calc(var(--u) * .75); margin-bottom: calc(var(--u) * .6); }
.auth-brand .ws-mark { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); border-radius: calc(var(--u) * .65); }
.auth-brand .ws-mark svg { width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.6); }
.auth-brand b { display: block; font-weight: 600; font-size: calc(var(--u) * 1.15); line-height: 1.25; }
.auth-brand small { color: var(--muted); font-size: calc(var(--u) * .85); }
.auth-card h1 { margin: 0; font-size: calc(var(--u) * 1.6); font-weight: 600; }
.auth-card > p { margin: calc(var(--u) * -.4) 0 0; color: var(--muted); font-size: calc(var(--u) * .95); line-height: 1.7; }
.auth-card form { display: grid; gap: calc(var(--u) * 1.1); }
.auth-card .fld > span { font-size: calc(var(--u) * .9); }
.auth-card .input { height: calc(var(--u) * 3); font-size: var(--u); padding-inline: calc(var(--u) * .8); border-radius: 8px; }
.auth-card .pw-wrap .input { padding-inline-end: calc(var(--u) * 3); }
.auth-card .pw-eye { top: 50%; transform: translateY(-50%); inset-inline-end: calc(var(--u) * .3); width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); }
.auth-card .linkbtn { font-size: calc(var(--u) * .9); }
.auth-card .note { font-size: calc(var(--u) * .9); }
.auth-card .alt { margin: 0; text-align: center; color: var(--muted); font-size: calc(var(--u) * .92); }
.auth-card .btn.wide { height: calc(var(--u) * 3); font-size: var(--u); border-radius: 8px; }
.btn.wide { width: 100%; justify-content: center; height: 36px; }
.remember { display: flex; align-items: center; gap: calc(var(--u) * .55); font-size: calc(var(--u) * .92); color: var(--ink-2); cursor: pointer; user-select: none; }
.remember input { width: calc(var(--u) * 1.1); height: calc(var(--u) * 1.1); accent-color: var(--primary); margin: 0; cursor: pointer; }
.auth-foot { display: flex; align-items: center; gap: 14px; color: var(--faint); font-size: calc(var(--u) * .8); }
.auth-foot .seg { height: calc(var(--u) * 1.9); }
.auth-foot .seg button { font-size: calc(var(--u) * .8); padding-inline: calc(var(--u) * .7); }