/* MindMap prototype styles — design tokens from CLAUDE.md, layout from plans/MM-01.md */

:root {
  --bg: #F5F6FA;
  --surface: #FFFFFF;
  --border: #E6E8EF;
  --border-soft: #EEF0F5;
  --text: #171B2D;
  --text-2: #3D4354;
  --muted: #6B7280;
  --muted-2: #8A90A2;

  --indigo: #3B5BFD;
  --indigo-hover: #2F4BE0;
  --indigo-bg: #EEF1FF;
  --indigo-bg-2: #F1F4FF;
  --green: #12B981;
  --green-bg: #E7F7F0;
  --green-text: #1F7A4F;
  --amber: #F59E0B;
  --amber-bg: #FDF3E3;
  --amber-text: #9A6B1F;
  --amber-line: #B45309;
  --red: #F0546A;
  --grey: #9CA3AF;
  --track: #E9ECF3;

  --area-sales: #F5A524;
  --area-marketing: #3B6CFF;
  --area-support: #F26A80;
  --area-development: #14B8A6;
  --area-finance: #F5A524;

  --sidebar-w: 232px;
  --topbar-h: 58px;
  --radius-card: 14px;
  --radius: 10px;
  --shadow-card: 0 1px 2px rgba(23, 27, 45, 0.04), 0 4px 16px rgba(23, 27, 45, 0.04);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-size: 15px;
  color: var(--text);
  background: var(--bg);
  min-width: 1200px;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
svg.i { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Shell ---------- */
.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.logo { display: flex; align-items: center; gap: 10px; padding: 18px 20px 14px; }
.logo svg { width: 46px; height: 46px; }
.logo-word { font-size: 27px; font-weight: 800; letter-spacing: -0.4px; color: var(--text); }

.ws-card {
  margin: 4px 14px 0; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; align-items: center; gap: 12px; width: calc(100% - 28px); text-align: left;
}
.ws-card:hover { background: #FAFBFD; }
.ws-avatar { width: 36px; height: 36px; border-radius: 8px; background: #3F4562; color: #fff; font-weight: 700; font-size: 17px; display: grid; place-items: center; }
.ws-name { font-weight: 700; font-size: 17px; line-height: 1.15; }
.ws-sub { font-size: 14px; color: var(--muted); }
.ws-card .i { margin-left: auto; font-size: 20px; color: var(--muted); }

.nav { margin-top: 18px; padding: 0 10px; display: flex; flex-direction: column; gap: 6px; }
.nav-item {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 12px; border-radius: var(--radius); white-space: nowrap;
  font-size: 16.5px; font-weight: 500; color: var(--text);
}
.nav-item .i { font-size: 23px; color: var(--text-2); }
.nav-item:hover { background: #F3F4F8; }
.nav-item.is-active { background: var(--indigo-bg); color: var(--indigo); font-weight: 600; }
.nav-item.is-active .i { color: var(--indigo); }

.sidebar-bottom { margin-top: auto; padding: 0 10px 14px; }
.user-card {
  display: flex; align-items: center; gap: 12px; padding: 10px 6px 4px; width: 100%; text-align: left;
}
.user-photo { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; }
.user-photo svg { width: 100%; height: 100%; display: block; }
.user-name { font-weight: 700; font-size: 17px; line-height: 1.15; }
.user-role { font-size: 14px; color: var(--muted); }
.user-card .i { margin-left: auto; font-size: 20px; color: var(--muted); }

/* ---------- Top bar ---------- */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: var(--topbar-h); background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 20px 0 22px; gap: 16px;
  position: sticky; top: 0; z-index: 20;
}
.crumbs { display: flex; align-items: center; gap: 10px; font-size: 17px; color: var(--muted); }
.crumbs .i { font-size: 22px; }
.crumbs .sep { color: var(--muted-2); }
.crumbs .current { color: var(--text); font-weight: 600; }
.search {
  margin-left: auto; width: 400px; height: 40px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  display: flex; align-items: center; gap: 10px; padding: 0 14px; color: var(--muted);
}
.search .i { font-size: 20px; }
.search input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--text); width: 100%; }
.search input::placeholder { color: var(--muted-2); }
.search:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.bell { position: relative; font-size: 26px; color: var(--text-2); width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; }
.bell:hover { background: #F3F4F8; }
.bell .badge {
  position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: #F03E3E; color: #fff; font-size: 11px; font-weight: 700;
  display: grid; place-items: center; border: 2px solid var(--surface);
}
.topbar .divider { width: 1px; height: 28px; background: var(--border); }
.avatar-btn { display: flex; align-items: center; gap: 8px; }
.avatar-btn .user-photo { width: 40px; height: 40px; }
.avatar-btn .i { font-size: 20px; color: var(--muted); }

/* ---------- Page header ---------- */
.content { padding: 12px 24px 10px; display: flex; flex-direction: column; gap: 12px; }
.page-head { display: grid; grid-template-columns: max-content 1fr max-content; align-items: center; gap: 16px; padding: 2px 0; }
.page-title { font-size: 32px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.1; margin: 0; white-space: nowrap; }
.page-sub { font-size: 19px; color: var(--muted); margin: 6px 0 0; white-space: nowrap; }
.kpis { display: flex; gap: 4px; align-items: center; justify-content: center; }
.kpi { display: flex; align-items: center; gap: 10px; padding-right: 8px; border-radius: 12px; white-space: nowrap; }
.kpi-text { display: flex; align-items: baseline; gap: 8px; }
.kpi:hover { background: #F0F1F6; }
.kpi-icon { width: 60px; height: 60px; border-radius: 14px; display: grid; place-items: center; font-size: 30px; }
.kpi-icon.orange { background: #FFF1E7; color: #F2661E; }
.kpi-icon.green { background: #E7F7F0; color: #15A36F; }
.kpi-icon.blue { background: #E9EEFF; color: #3B6CFF; }
.kpi-num { font-size: 28px; font-weight: 700; line-height: 1; }
.kpi-label { font-size: 17px; color: var(--muted); }
.kpi-icon.amber { background: #FFF1E7; color: #F2661E; }
.kpi-icon.red { background: #FDECEF; color: var(--red); }
.kpi-text.stack { flex-direction: column; align-items: flex-start; gap: 2px; }   /* MM-03: number over label */
.kpi-text.stack .kpi-label { line-height: 1.15; white-space: nowrap; }
.kpi-text.stack .kpi-num { line-height: 1.05; }
.page-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.btn-primary {
  height: 46px; padding: 0 24px; border-radius: var(--radius); background: var(--indigo); color: #fff;
  font-size: 20px; font-weight: 600; display: inline-flex; align-items: center; gap: 10px;
  box-shadow: 0 6px 14px rgba(59, 91, 253, 0.28);
}
.btn-primary:hover { background: var(--indigo-hover); }
.btn-primary .i { font-size: 22px; }
.meta { font-size: 15px; color: var(--muted); }
.meta .dot { margin: 0 6px; }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.card-head { display: flex; align-items: center; gap: 16px; padding: 13px 18px 11px 18px; }
.card-title { font-size: 26px; font-weight: 700; letter-spacing: -0.3px; margin: 0; display: flex; align-items: center; gap: 12px; }
.pill-count { min-width: 34px; height: 30px; padding: 0 10px; border-radius: 8px; background: var(--green-bg); color: var(--green-text); font-size: 18px; font-weight: 700; display: grid; place-items: center; }
.card-sub { font-size: 15px; color: var(--muted); }
.card-sub .dot { margin: 0 6px; }

.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); padding: 4px; margin-left: 40px; }
.seg-btn { height: 44px; padding: 0 18px; border-radius: 8px; display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; color: var(--text); position: relative; }
.seg-btn .i { font-size: 20px; }
.seg-btn + .seg-btn::before { content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 1px; background: var(--border); }
.seg-btn.is-active { background: var(--indigo); color: #fff; }
.seg-btn.is-active::before, .seg-btn.is-active + .seg-btn::before { display: none; }
.btn-outline {
  height: 44px; padding: 0 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600;
}
.btn-outline:hover { background: #FAFBFD; }
.btn-outline .i { font-size: 20px; }
.card-head .spacer { flex: 1; }

/* ---------- Matrix table ---------- */
.matrix { width: 100%; border-collapse: collapse; table-layout: fixed; }
.matrix th, .matrix td { border-top: 1px solid var(--border-soft); padding: 0 10px; vertical-align: middle; }
.matrix th { height: 54px; text-align: left; font-size: 16px; font-weight: 600; color: var(--text); white-space: nowrap; }
.matrix th .i { font-size: 22px; margin-right: 8px; vertical-align: -5px; color: var(--text-2); }
.matrix th.c-area, .matrix td.c-area, .matrix th.c-ready, .matrix td.c-ready { border-left: 1px solid var(--border-soft); text-align: center; }
.matrix th.c-area .lbl { display: inline-flex; align-items: center; }
.matrix th.c-area .lbl.two { text-align: left; line-height: 1.2; }
.matrix col.c-project { width: 352px; }
.matrix col.c-ready { width: 186px; }
.matrix tbody tr.row { height: 72px; }
.matrix tbody tr.row:hover td { background: #FAFBFD; }
.matrix tbody tr.row:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }

.pcell { display: flex; align-items: center; gap: 12px; }
.chev { width: 22px; height: 22px; display: grid; place-items: center; color: var(--muted); font-size: 20px; border-radius: 6px; transition: transform .15s; }
.chev:hover { background: #EEF0F5; color: var(--text); }
.row.is-open .chev { transform: rotate(90deg); }
.v-avatar { width: 42px; height: 42px; border-radius: 10px; color: #fff; font-weight: 700; font-size: 17px; display: grid; place-items: center; flex: none; }
.v-name { font-size: 16px; font-weight: 700; white-space: nowrap; }
.v-name:hover { color: var(--indigo); }
.v-line1 { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.v-line2 { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 13.5px; color: var(--amber-line); white-space: nowrap; }
.v-line2 .i { font-size: 17px; color: var(--amber); fill: var(--amber); stroke: #fff; }
.v-line2 a:hover { text-decoration: underline; }
.v-line2.ok { color: var(--green-text); }
.v-line2.ok .i { color: var(--green); fill: none; stroke: var(--green); }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 8px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.badge.lc-preparation, .badge.lc-incubation { background: var(--amber-bg); color: var(--amber-text); }
.badge.lc-launch_review { background: var(--indigo-bg); color: var(--indigo); }
.badge.lc-ready_to_launch { background: var(--green-bg); color: var(--green-text); }
.badge.lc-paused { background: #F0F1F5; color: var(--muted); }
.badge.live { background: var(--green-bg); color: var(--green-text); }
.badge .sdot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.acell { display: inline-flex; align-items: center; gap: 10px; }
.bar { width: 100px; height: 12px; border-radius: 6px; background: var(--track); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 6px; background: var(--grey); }
.bar.sales > span { background: var(--area-sales); }
.bar.marketing > span { background: var(--area-marketing); }
.bar.support > span { background: var(--area-support); }
.bar.development > span { background: var(--area-development); }
.bar.finance > span { background: var(--area-finance); }
.pct { font-size: 15px; font-weight: 600; min-width: 40px; text-align: right; }
.pct.na { color: var(--grey); font-weight: 500; }
.pct .flag { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.pct .flag.red { background: var(--red); }
.pct .flag.amber { background: var(--amber); }
td.c-area a { display: inline-flex; padding: 6px 8px; border-radius: 8px; }
td.c-area a:hover { background: var(--indigo-bg); }

.rcell { display: inline-flex; align-items: center; gap: 10px; text-align: left; }
.donut { width: 40px; height: 40px; flex: none; }
.donut .track { stroke: #E5E9F5; }
.donut .arc { stroke: var(--indigo); transition: stroke-dasharray .4s; }
.donut.green .arc { stroke: var(--green); }
.donut.grey .arc { stroke: var(--grey); }
.r-pct { font-size: 18px; font-weight: 700; line-height: 1.1; }
.r-sub { font-size: 12px; color: var(--muted); }
.tag { display: inline-block; padding: 1px 6px; border-radius: 6px; background: #F0F1F5; color: var(--muted); font-size: 11px; font-weight: 600; margin-left: 6px; vertical-align: 2px; }

/* expanded area sub-rows */
tr.sub td { background: #FAFBFD; border-top: 1px solid var(--border-soft); height: 52px; padding: 0 12px 0 46px; }
.sub-grid { display: grid; grid-template-columns: 220px 200px 170px 1fr 120px 170px; align-items: center; gap: 12px; font-size: 14px; }
.sub-area { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.sub-area .i { font-size: 20px; color: var(--text-2); }
.sub-area a:hover { color: var(--indigo); }
.sub-owner { display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.mini-avatar { width: 26px; height: 26px; border-radius: 50%; background: #DDE2F1; color: #3D4354; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.sub-muted { color: var(--muted); }
.sub-bar { display: flex; align-items: center; gap: 10px; }
.sub-bar .bar { width: 100%; max-width: 360px; height: 10px; }
.sub-blocked { color: var(--red); font-weight: 600; }
.sub-blocked.none { color: var(--muted); font-weight: 400; }
tr.sub.loading td { color: var(--muted); font-size: 14px; }
.skeleton { display: inline-block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #EEF0F5 25%, #F7F8FB 50%, #EEF0F5 75%); background-size: 200% 100%; animation: sk 1.2s infinite; }
@keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.hint { display: flex; align-items: center; gap: 10px; padding: 10px 20px; background: var(--indigo-bg-2); border-top: 1px solid var(--border-soft); border-radius: 0 0 var(--radius-card) var(--radius-card); font-size: 15px; color: #4B5563; }
.hint .i { font-size: 20px; color: var(--indigo); }

.view-panel { padding: 40px 20px; color: var(--muted); font-size: 15px; text-align: center; border-top: 1px solid var(--border-soft); }
.view-panel strong { color: var(--text); }
[hidden] { display: none !important; }

/* ---------- Businesses ---------- */
.ops { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ops td { border-top: 1px solid var(--border-soft); padding: 0 10px; vertical-align: middle; height: 76px; }
.ops col.c-company { width: 352px; }
.ops col.c-upd { width: 128px; }
.ops col.c-act { width: 196px; }
.ops td.c-status, .ops td.c-upd, .ops td.c-act { border-left: 1px solid var(--border-soft); }
.ops td.c-status { text-align: center; }
.ops tr.row.critical td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.st-label { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.st-val { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.st-dot { width: 16px; height: 16px; border-radius: 50%; }
.st-ok .st-dot { background: var(--green); } .st-ok { color: #1E9C6C; }
.st-needs_attention .st-dot { background: var(--amber); } .st-needs_attention { color: #C77D08; }
.st-critical .st-dot { background: var(--red); } .st-critical { color: var(--red); }
.st-no_recent_assessment .st-dot { background: var(--grey); } .st-no_recent_assessment { color: var(--muted); }
.upd { font-size: 14px; color: var(--muted); line-height: 1.35; }
.upd .i { color: var(--amber); font-size: 16px; vertical-align: -3px; margin-left: 4px; }
.btn-open { white-space: nowrap; height: 44px; padding: 0 16px; border: 1px solid #C9D2FF; border-radius: var(--radius); color: var(--indigo); font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; background: var(--surface); }
.btn-open:hover { background: var(--indigo-bg); }
.btn-open .i { font-size: 20px; }
.ops .v-line2.muted { color: var(--muted); }
.ops tr.sub td { padding-left: 46px; }

/* ---------- Footer save-state ---------- */
.save-state { display: flex; align-items: center; gap: 10px; padding: 4px 0 2px; font-size: 14px; color: var(--muted); }
.save-state .i { font-size: 22px; }
.save-state.saved .i { color: var(--green); }
.save-state.saving .i { color: var(--muted); animation: spin 1s linear infinite; }
.save-state.error { color: var(--red); } .save-state.error .i { color: var(--red); }
.save-state.offline { color: var(--amber-line); } .save-state.offline .i { color: var(--amber); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Tooltips (native title used in prototype) ---------- */
[data-tip] { cursor: default; }

/* ---------- Additions for the live app (not in the prototype) ---------- */
.hint .dismiss { margin-left: auto; color: var(--muted); font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.hint .dismiss:hover { background: #E3E8FF; color: var(--text); }
tr.row.flash td { animation: flash .9s ease-out; }
@keyframes flash { from { background: #EEF1FF; } to { background: transparent; } }
.sub-error { color: var(--red); font-size: 14px; }
.sub-error button { color: var(--indigo); font-weight: 600; margin-left: 8px; }
.empty { padding: 48px 20px; text-align: center; color: var(--muted); font-size: 15px; }
.empty strong { display: block; color: var(--text); font-size: 18px; margin-bottom: 6px; }
.empty .btn-primary { margin-top: 16px; height: 42px; font-size: 16px; }

/* auth */
.auth-body { min-width: 0; display: grid; place-items: center; min-height: 100vh; }
.auth-card { width: 420px; max-width: calc(100% - 32px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 32px; }
.auth-card .logo { padding: 0 0 18px; }
.auth-card h1 { font-size: 24px; margin: 0 0 4px; }
.auth-card p.lead { color: var(--muted); margin: 0 0 22px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 14px; font-weight: 600; }
.field input { height: 44px; border: 1px solid var(--border); border-radius: var(--radius); padding: 0 14px; font: inherit; font-size: 15px; }
.field input:focus { outline: 0; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.btn-block { width: 100%; justify-content: center; height: 46px; font-size: 17px; }
.error-page { padding: 80px 24px; text-align: center; }
.error-page h1 { font-size: 28px; margin: 0 0 8px; }
.error-page p { color: var(--muted); }

/* ---------- MM-02 · Incubator ---------- */
.chips { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: nowrap; }
.chip { height: 48px; padding: 0 16px 0 18px; border-radius: 10px; display: inline-flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; }
.chip .n { font-size: 20px; font-weight: 700; }
.chip.all { background: #E9EEFF; color: var(--indigo); }
.chip.preparation { background: #F0F1F5; color: var(--muted); } .chip.preparation .n { color: var(--text); }
.chip.incubation { background: #FDF3E3; color: #C77D08; }
.chip.launch_review { background: #EEF0F8; color: #5B6494; } .chip.launch_review .n { color: var(--text); }
.chip.ready_to_launch { background: #E7F7F0; color: var(--green-text); }
.chip.is-active { border-color: currentColor; box-shadow: 0 0 0 3px rgba(59,91,253,0.10); }
.chip:hover { filter: brightness(0.97); }

.toolbar { display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; }
.toolbar .seg { margin-left: 0; }
.toolbar .spacer { flex: 1; }
.menu-wrap { position: relative; }
.menu { position: absolute; right: 0; top: 50px; min-width: 240px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(23,27,45,0.12); padding: 6px; z-index: 10; }
.menu button, .menu a { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 8px; font-size: 14px; text-align: left; color: var(--text); }
.menu button:hover, .menu a:hover { background: #F3F4F8; }
.menu .is-active { color: var(--indigo); font-weight: 600; }
.menu .is-active::after { content: "✓"; margin-left: auto; }
.menu .sep { height: 1px; background: var(--border-soft); margin: 6px 4px; }
.menu .label { padding: 6px 12px 2px; font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }

.matrix col.c-blocker { width: 160px; }
.matrix th.c-blocker, .matrix td.c-blocker { border-left: 1px solid var(--border-soft); text-align: left; }
.matrix.incubator col.c-project { width: 335px; }
.matrix.incubator col.c-ready { width: 160px; }
.v-meta { display: flex; align-items: center; gap: 14px; margin-top: 4px; font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.v-meta span { display: inline-flex; align-items: center; gap: 6px; }
.v-meta .i { font-size: 16px; }
.v-meta a:hover { color: var(--indigo); }
.v-meta .none { font-style: italic; }
.rcell.big .donut { width: 48px; height: 48px; }
.rcell.big .r-pct { font-size: 22px; }
.blocker { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.25; color: var(--text-2); max-width: 150px; }
.blocker .i { font-size: 20px; color: var(--amber); flex: none; margin-top: -1px; }
.blocker.overdue .i { color: var(--red); }
.blocker.na .i { color: var(--grey); }
.blocker.none { color: var(--green-text); } .blocker.none .i { color: var(--green); }
.blocker a:hover { color: var(--indigo); }

.foot-cards { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; }
.foot-card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; text-decoration: none; }
.foot-card:hover { border-color: #C9D2FF; }
.fc-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; font-size: 24px; flex: none; }
.fc-title { font-size: 17px; font-weight: 700; }
.fc-title .dot { margin: 0 8px; color: var(--muted); font-weight: 400; }
.fc-sub { font-size: 14px; color: var(--muted); margin-top: 3px; }
.fc-sub.warn { color: var(--amber-line); }
.foot-card .chev-end { margin-left: auto; color: var(--muted); font-size: 22px; }
.fc-badge { display: inline-block; margin-left: 10px; padding: 2px 8px; border-radius: 8px; background: #FDECEF; color: #B42339; font-size: 12px; font-weight: 700; vertical-align: 2px; }
/* MM-02 matrix has 8 columns: tighter cells than the MM-01 matrix */
.matrix.incubator col.c-project { width: 322px; }
.matrix.incubator col.c-ready { width: 150px; }
.matrix.incubator col.c-blocker { width: 152px; }
.matrix.incubator th, .matrix.incubator td { padding: 0 8px; }
.matrix.incubator th { font-size: 14.5px; }
.matrix.incubator th .i { font-size: 20px; margin-right: 6px; }
.matrix.incubator .bar { width: 80px; }
.matrix.incubator .acell { gap: 8px; }
.matrix.incubator .pct { min-width: 36px; font-size: 14px; }
.matrix.incubator td.c-area a { padding: 6px 4px; }
.matrix.incubator .blocker { max-width: 136px; }
/* long project names: the badge wraps under the name instead of running over the column border */
.pcell > div { min-width: 0; }
.v-line1 { flex-wrap: wrap; row-gap: 4px; white-space: normal; }
.v-line1 .v-name { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ---------- Empty states (MM-42) ---------- */
.empty { padding: 56px 20px 48px; text-align: center; color: var(--muted); font-size: 15px; border-top: 1px solid var(--border-soft); }
.empty strong { display: block; color: var(--text); font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.empty .btn-primary, .empty .btn-outline { margin-top: 16px; height: 42px; font-size: 15px; }

.edit-date, .edit-owner { cursor: pointer; border-bottom: 1px dashed transparent; }
.edit-date:hover, .edit-owner:hover { border-bottom-color: var(--indigo); }
.inline-date { font: inherit; font-size: 13px; border: 1px solid var(--indigo); border-radius: 6px; padding: 2px 6px; }

/* ---------- MM-03 · Businesses ---------- */
.company { padding: 18px 20px 20px; }
.company.critical { box-shadow: inset 3px 0 0 var(--red), var(--shadow-card); }
.company-head { display: flex; align-items: flex-start; gap: 18px; }
.company-avatar { width: 84px; height: 84px; border-radius: 16px; color: #fff; font-size: 34px; font-weight: 700; display: grid; place-items: center; flex: none; }
.company-title { display: flex; align-items: center; gap: 12px; }
.company-name { font-size: 28px; font-weight: 700; letter-spacing: -0.4px; }
.company-name:hover { color: var(--indigo); }
.company-origin { font-size: 16px; color: var(--muted); margin-top: 2px; }
.company-owner { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 16px; color: var(--text-2); }
.company-owner .mini-avatar { width: 32px; height: 32px; font-size: 12px; }
.company-actions { margin-left: auto; display: flex; gap: 14px; align-items: center; }
.btn-outline.indigo { border-color: var(--indigo); color: var(--indigo); }
.btn-outline.indigo:hover { background: var(--indigo-bg); }
.btn-primary.md { height: 46px; font-size: 17px; padding: 0 22px; box-shadow: none; }
.area-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 22px; }
.area-tile { position: relative; border: 1px solid var(--border); border-radius: 12px; padding: 18px 18px 16px; background: var(--surface); display: block; }
.area-tile:hover { border-color: #C9D2FF; }
.tile-head { display: flex; align-items: center; gap: 16px; font-size: 17px; font-weight: 600; }
.tile-head .i { font-size: 30px; color: var(--text-2); }
.tile-status { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-left: 4px; font-size: 17px; font-weight: 500; }
.tile-status .st-dot { width: 16px; height: 16px; }
.tile-status.st-ok { color: #1E9C6C; } .tile-status.st-needs_attention { color: #C77D08; } .tile-status.st-critical { color: var(--red); } .tile-status.st-no_recent_assessment { color: var(--muted); }
.tile-clock { position: absolute; top: 12px; right: 12px; color: var(--amber); font-size: 18px; }

.pill-count.amber { background: #FFF1E7; color: #C2410C; }
.pill-count.red { background: #FDECEF; color: #B42339; }
.issues { width: 100%; border-collapse: collapse; table-layout: fixed; }
.issues th, .issues td { border-top: 1px solid var(--border-soft); padding: 0 16px; vertical-align: middle; text-align: left; }
.issues th { height: 50px; font-size: 15px; font-weight: 500; color: var(--text-2); background: #FAFBFD; }
.issues th + th, .issues td + td { border-left: 1px solid var(--border-soft); }
.issues td { height: 58px; font-size: 15px; }
.issues tr.row:hover td { background: #FAFBFD; }
.issues col.c-task { width: 365px; } .issues col.c-area { width: 215px; } .issues col.c-owner { width: 215px; } .issues col.c-due { width: 235px; } .issues col.c-status { width: 235px; } .issues col.c-act { width: 135px; }
.issues .task { font-weight: 500; color: var(--text); }
.issues .task:hover { color: var(--indigo); }
.issues .area { display: inline-flex; align-items: center; gap: 12px; }
.issues .area .i { font-size: 22px; color: var(--text-2); }
.issues .owner { display: inline-flex; align-items: center; gap: 12px; }
.issues .owner .mini-avatar { width: 30px; height: 30px; font-size: 12px; }
.issues .due.overdue { color: var(--red); font-weight: 600; }
.wpill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 10px; font-size: 14px; font-weight: 500; }
.wpill .sdot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.wpill.planned { background: #EEF0F5; color: var(--muted); }
.wpill.in_progress { background: #E9EEFF; color: var(--indigo); }
.wpill.in_review { background: #FDF3E3; color: #C77D08; }
.wpill.done { background: #E7F7F0; color: var(--green-text); }
.wpill.cancelled { background: #F0F1F5; color: var(--muted); text-decoration: line-through; }
.tag.blocked { background: #FDECEF; color: #B42339; }
.issues td.c-act { text-align: center; }
.dots { width: 36px; height: 32px; border-radius: 8px; display: inline-grid; place-items: center; font-size: 22px; color: var(--indigo); letter-spacing: 1px; }
.dots:hover { background: var(--indigo-bg); }
.row-menu { position: absolute; right: 24px; min-width: 200px; }
.info-strip { display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: var(--indigo-bg-2); border-top: 1px solid var(--border-soft); border-radius: 0 0 var(--radius-card) var(--radius-card); font-size: 14.5px; color: #4B5563; }
.info-strip .i { font-size: 20px; color: var(--indigo); }
.info-strip .muted { color: var(--muted); margin-left: 6px; }
.modal { width: 520px; max-width: calc(100% - 32px); background: var(--surface); border-radius: 14px; padding: 22px 24px; box-shadow: 0 24px 64px rgba(23,27,45,0.25); }
.modal h3 { margin: 0 0 6px; font-size: 20px; }
.modal p { color: var(--muted); margin: 0 0 16px; font-size: 14px; }
.modal .actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ---------- MM-04 · Startup project overview ---------- */
.proj-head { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: start; padding: 4px 0 2px; }
.proj-id { display: flex; gap: 22px; align-items: flex-start; }
.proj-avatar { width: 88px; height: 88px; border-radius: 16px; color: #fff; font-size: 34px; font-weight: 700; display: grid; place-items: center; flex: none; }
.proj-title { display: flex; align-items: center; gap: 14px; }
.proj-name { font-size: 34px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.1; }
.proj-launch { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 17px; font-weight: 600; color: #C77D08; }
.proj-launch .i { font-size: 22px; color: var(--amber); fill: var(--amber); stroke: #fff; }
.proj-launch.ok { color: var(--green-text); } .proj-launch.ok .i { fill: none; stroke: var(--green); color: var(--green); }
.proj-gap { margin-top: 6px; font-size: 16px; color: #8A5A16; }
.proj-gap a:hover { color: var(--indigo); }
.proj-meta { display: flex; gap: 48px; padding-top: 6px; }
.meta-block { display: flex; gap: 14px; align-items: flex-start; }
.meta-block > .i { font-size: 26px; color: var(--text-2); margin-top: 2px; }
.meta-cap { font-size: 15px; color: var(--muted); }
.meta-val { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 18px; font-weight: 600; }
.meta-val.date { font-size: 20px; }
.meta-val .mini-avatar { width: 32px; height: 32px; font-size: 12px; }
.meta-val a:hover { color: var(--indigo); }
.proj-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.proj-actions .row { display: flex; gap: 12px; align-items: center; }
.btn-square { width: 46px; height: 46px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); display: grid; place-items: center; font-size: 22px; color: var(--text-2); }
.btn-square:hover { background: #FAFBFD; }
.btn-primary.wide { min-width: 240px; justify-content: center; }
.btn-outline.wide { min-width: 240px; justify-content: center; height: 46px; border-color: #C9D2FF; color: var(--indigo); font-size: 17px; }
.btn-outline.wide:hover { background: var(--indigo-bg); }

.tabs { display: flex; gap: 8px; padding: 0 12px; }
.tab { display: inline-flex; align-items: center; gap: 12px; padding: 16px 18px 14px; font-size: 17px; font-weight: 600; color: var(--text); border-bottom: 2px solid transparent; }
.tab .i { font-size: 22px; color: var(--text-2); }
.tab:hover { color: var(--indigo); }
.tab.is-active { color: var(--indigo); border-bottom-color: var(--indigo); } .tab.is-active .i { color: var(--indigo); }

.grid-2 { display: grid; grid-template-columns: 355px 1fr; gap: 16px; }
.grid-2.even { grid-template-columns: 1fr 1fr; }
.card-body { padding: 14px 18px 18px; }
.card-title.sm { font-size: 20px; }
.overall { display: flex; align-items: center; gap: 22px; padding: 8px 8px 8px 6px; }
.donut-big { width: 110px; height: 110px; position: relative; flex: none; }
.donut-big .track { stroke: #E5E9F5; } .donut-big .arc { stroke: var(--indigo); transition: stroke-dasharray .4s; }
.donut-big.green .arc { stroke: var(--green); } .donut-big.grey .arc { stroke: var(--grey); }
.donut-big .val { position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; font-weight: 800; letter-spacing: -0.5px; }
.overall-sub { font-size: 15px; color: var(--muted); margin-top: 8px; line-height: 1.35; }
.area-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.area-card { border: 1px solid var(--border); border-radius: 12px; padding: 16px 16px 14px; display: block; }
.area-card:hover { border-color: #C9D2FF; }
.area-card .tile-head { font-size: 16px; line-height: 1.15; }
.area-card .tile-head .i { font-size: 30px; }
.area-card .acell { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.area-card .bar { width: 100%; height: 12px; }
.area-card .pct { min-width: 44px; font-size: 15px; }

.card-link { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--indigo); font-size: 15px; font-weight: 500; }
.card-link .i { font-size: 18px; }
.card-link:hover { text-decoration: underline; }
.mini { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mini th, .mini td { border-top: 1px solid var(--border-soft); padding: 0 18px; text-align: left; vertical-align: middle; }
.mini th { height: 40px; font-size: 14px; font-weight: 500; color: var(--text-2); background: #FAFBFD; }
.mini td { height: 53px; font-size: 15px; }
.mini tr.row:hover td { background: #FAFBFD; }
.mini .cond { display: inline-flex; align-items: center; gap: 12px; font-weight: 500; }
.mini .cond .i { font-size: 20px; color: var(--red); fill: var(--red); stroke: #fff; flex: none; }
.mini .cond a:hover { color: var(--indigo); }
.mini .owner { display: inline-flex; align-items: center; gap: 10px; }
.mini .owner .mini-avatar { width: 28px; height: 28px; font-size: 11px; }
.mini .date { font-weight: 600; }
.mini .ms { display: flex; align-items: center; gap: 12px; }
.mini .ms .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--indigo); flex: none; }
.mini .ms .i { font-size: 20px; color: var(--indigo); flex: none; }
.mini .ms .t { font-weight: 600; line-height: 1.2; } .mini .ms .c { font-size: 13px; color: var(--muted); }
.spill { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.spill.not_started { background: #FDECEF; color: #B42339; }
.spill.in_progress { background: #FDF3E3; color: #C77D08; }
.spill.in_review { background: #E9EEFF; color: var(--indigo); }
.spill.upcoming { background: #E9EEFF; color: var(--indigo); }
.spill.overdue { background: #FDECEF; color: #B42339; }
.spill.planned { background: #FDECEF; color: #B42339; }
.spill.grey { background: #EEF0F5; color: var(--muted); }
.spill.done { background: #E7F7F0; color: var(--green-text); }

.activity { list-style: none; margin: 0; padding: 0 18px; }
.activity li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--border-soft); }
.activity .mini-avatar { width: 40px; height: 40px; font-size: 14px; flex: none; }
.activity .what { font-size: 15px; } .activity .what b { font-weight: 700; }
.activity .ctx { font-size: 13.5px; color: var(--muted); margin-top: 3px; }
.activity .ctx .dot { margin: 0 6px; }
.activity .side { margin-left: auto; }
.activity .file { display: inline-flex; align-items: center; gap: 8px; color: var(--indigo); font-weight: 600; font-size: 14px; }
.activity .file .i { font-size: 20px; }
.activity .delta { background: #E7F7F0; color: var(--green-text); padding: 5px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; }
/* MM-04 compaction to fit the 941 px design height */
.grid-2 { grid-template-columns: 372px 1fr; }
.overall .proj-launch { white-space: nowrap; }
.proj-head { padding: 0; }
.tab { padding: 13px 18px 11px; }
.card-body { padding: 12px 18px 14px; }
.overall { padding: 4px 4px 0 2px; }
.area-card { padding: 14px 16px 12px; }
.area-card .acell { margin-top: 14px; }
.mini td { height: 50px; }
.activity li { padding: 10px 0; }
.card-head { padding: 12px 18px 10px; }
/* MM-04 header: clearer alignment (icon + caption on one line, value under the caption, blocks vertically centred) */
.proj-head { grid-template-columns: minmax(0, 560px) 1fr auto; align-items: center; column-gap: 32px; }
.proj-id { align-items: center; }
.proj-meta { display: flex; gap: 64px; align-items: center; padding-top: 0; }
.meta-block { display: flex; flex-direction: column; gap: 10px; }
.meta-block .cap-row { display: flex; align-items: center; gap: 10px; }
.meta-block .cap-row .i { font-size: 24px; color: var(--text-2); }
.meta-cap { font-size: 15px; color: var(--muted); }
.meta-val { margin: 0 0 0 34px; font-size: 18px; font-weight: 600; }
.meta-val.date { font-size: 20px; margin-top: 4px; }
.proj-launch { margin-top: 10px; }
.proj-gap { margin-top: 5px; }

/* ---------- MM-05 · Business overview ---------- */
.biz-avatar { width: 72px; height: 72px; border-radius: 14px; color: #fff; font-size: 30px; font-weight: 700; display: grid; place-items: center; flex: none; }
.biz-sub { font-size: 20px; color: var(--muted); margin-top: 4px; }
.proj-meta.ruled .meta-block + .meta-block { border-left: 1px solid var(--border); padding-left: 40px; }
.proj-meta.ruled { gap: 40px; }
.btn-primary.wide.pencil { min-width: 210px; }
.btn-outline.wide.plus { min-width: 160px; color: var(--indigo); }
.tile-chip { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 7px 12px; border-radius: 8px; background: var(--indigo-bg); color: var(--indigo); font-size: 14px; font-weight: 500; }
.tile-chip .i { font-size: 16px; }
.tile-chip:hover { background: #E1E7FF; }
.status-tile { min-height: 168px; display: flex; flex-direction: column; }
.status-tile .tile-updated { margin-top: auto; padding-top: 14px; font-size: 14px; color: var(--muted); }
.status-tile .tile-status { margin-top: 12px; }
.grid-main { display: grid; grid-template-columns: 1fr 360px; gap: 16px; margin-top: 16px; align-items: start; }
.tasks { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tasks th, .tasks td { border-top: 1px solid var(--border-soft); padding: 0 14px; text-align: left; vertical-align: middle; }
.tasks th { height: 46px; font-size: 14px; font-weight: 500; color: var(--text-2); background: #FAFBFD; }
.tasks th + th, .tasks td + td { border-left: 1px solid var(--border-soft); }
.tasks td { height: 64px; font-size: 15px; }
.tasks tr.row:hover td { background: #FAFBFD; }
.tasks tr.row.is-selected td { background: #F1F4FF; }
.tasks .task { font-weight: 600; color: var(--text); line-height: 1.25; }
.tasks .task:hover { color: var(--indigo); }
.tasks .owner { display: inline-flex; align-items: center; gap: 10px; }
.tasks .owner .mini-avatar { width: 32px; height: 32px; border-radius: 8px; font-size: 12px; background: #4B5573; color: #fff; }
.tasks .dep { color: var(--muted); }
.tasks .dep.open { color: #C77D08; font-weight: 600; }
.chk { width: 22px; height: 22px; border: 1.5px solid #C5CAD8; border-radius: 6px; background: var(--surface); display: inline-grid; place-items: center; cursor: pointer; }
.chk.is-on { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.chk .i { font-size: 14px; display: none; } .chk.is-on .i { display: block; }
.ppill { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 600; }
.ppill.critical { background: #FDECEF; color: #B42339; } .ppill.high { background: #FDECEF; color: #D63A4E; }
.ppill.normal { background: #FDF3E3; color: #C77D08; } .ppill.low { background: #EEF0F5; color: var(--muted); }
.side-card { padding: 18px 20px 20px; display: flex; gap: 14px; align-items: flex-start; }
.side-card .fc-icon { width: 40px; height: 40px; font-size: 22px; }
.side-card h3 { margin: 0; font-size: 20px; font-weight: 700; }
.side-card .big { font-size: 22px; font-weight: 700; margin-top: 6px; }
.side-card .who { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 16px; font-weight: 600; }
.side-card .who .i { font-size: 22px; color: var(--text-2); }
.side-card .note { color: var(--muted); font-size: 14.5px; margin-top: 8px; line-height: 1.4; }
.side-card .ok-line { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 17px; font-weight: 600; color: var(--green-text); }
.side-card .ok-line .i { font-size: 22px; color: var(--green); }
/* MM-05 layout fixes: header meta never wraps; task table columns keep single lines */
.proj-head.biz { grid-template-columns: auto 1fr auto; }
.proj-head.biz .proj-meta { justify-content: flex-start; margin-left: 24px; }
.meta-block { flex: none; }
.meta-val, .meta-val.date { white-space: nowrap; }
.tasks th, .tasks td { padding: 0 12px; }
.tasks col.c-chk { width: 50px; } .tasks col.c-task { width: 200px; } .tasks col.c-area { width: 148px; } .tasks col.c-owner { width: 150px; } .tasks col.c-prio { width: 96px; } .tasks col.c-due { width: 122px; } .tasks col.c-status { width: 138px; } .tasks col.c-dep { width: 100px; }
.tasks td.nowrap, .tasks .wpill, .tasks .ppill { white-space: nowrap; }
.tasks td { font-size: 14.5px; }

/* ---------- MM-06 · Area work view ---------- */
.pstrip { display: flex; align-items: center; gap: 22px; padding: 12px 18px; }
.pstrip .avatar { width: 60px; height: 60px; border-radius: 12px; color: #fff; font-size: 24px; font-weight: 700; display: grid; place-items: center; flex: none; }
.pstrip .pname { font-size: 30px; font-weight: 800; letter-spacing: -0.5px; display: flex; align-items: center; gap: 12px; }
.pstrip .pname a:hover { color: var(--indigo); }
.pstrip .psub { font-size: 17px; color: var(--muted); margin-top: 2px; }
.pstrip .kpi-block { display: flex; align-items: center; gap: 14px; padding-left: 26px; border-left: 1px solid var(--border); margin-left: 8px; }
.pstrip .kpi-block .kpi-icon { width: 60px; height: 60px; font-size: 28px; }
.pstrip .kv { font-size: 22px; font-weight: 700; line-height: 1.1; }
.pstrip .kl { font-size: 15px; color: var(--muted); margin-top: 3px; }
.pstrip .meta { margin-left: auto; align-self: flex-start; }
.area-head { display: flex; align-items: center; gap: 26px; padding: 16px 20px 8px; }
.area-head .aicon { font-size: 44px; color: var(--text-2); }
.area-head .aname { font-size: 34px; font-weight: 800; letter-spacing: -0.6px; }
.area-head .owner-block { display: flex; align-items: center; gap: 12px; margin-left: 40px; }
.area-head .owner-block .mini-avatar { width: 40px; height: 40px; font-size: 14px; }
.area-head .cap { font-size: 14px; color: var(--muted); }
.area-head .val { font-size: 18px; font-weight: 600; }
.area-head .ready { display: flex; align-items: center; gap: 12px; margin-left: 40px; }
.area-head .ready .donut { width: 44px; height: 44px; }
.area-head .ready .val { font-size: 22px; font-weight: 700; }
.area-head .btn-primary { margin-left: auto; }
.filter-bar { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.filter-bar .spacer { flex: 1; }
.tree { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tree th, .tree td { border-top: 1px solid var(--border-soft); padding: 0 16px; vertical-align: middle; text-align: left; }
.tree th { height: 46px; font-size: 15px; font-weight: 600; color: var(--text); background: #FAFBFD; }
.tree th + th, .tree td + td { border-left: 1px solid var(--border-soft); }
.tree td { height: 60px; font-size: 15px; }
.tree tr.row:hover td { background: #FAFBFD; }
.tree tr.row.is-dim td { opacity: .55; }
.tree col.c-owner { width: 180px; } .tree col.c-status { width: 205px; } .tree col.c-due { width: 165px; } .tree col.c-ready { width: 245px; } .tree col.c-menu { width: 60px; }
.tcell { display: flex; align-items: center; gap: 12px; position: relative; }
.tcell .chev { width: 24px; flex: none; }
.tcell .chev.none { visibility: hidden; }
.tcell .ibox { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; font-size: 20px; flex: none; }
.ibox.group { background: var(--indigo); color: #fff; }
.ibox.sub { background: #3B6CFF; color: #fff; }
.ibox.task { background: transparent; color: var(--indigo); }
.ibox.condition { background: #FDF3E3; color: #C77D08; }
.ibox.milestone { background: #E7F7F0; color: var(--green-text); }
.tcell .ttl { font-size: 16px; font-weight: 600; line-height: 1.2; }
.tcell .ttl a:hover { color: var(--indigo); }
.tcell .dsc { font-size: 13px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcell .txt { min-width: 0; }
.tree .owner { display: inline-flex; align-items: center; gap: 10px; }
.tree .owner .mini-avatar { width: 30px; height: 30px; font-size: 11px; }
.tree .due { color: var(--text); } .tree .due.none { color: var(--muted); } .tree .due.overdue { color: var(--red); font-weight: 600; }
.tree .rbar { display: inline-flex; align-items: center; gap: 12px; }
.tree .rbar .bar { width: 130px; height: 12px; } .tree .rbar .bar > span { background: var(--indigo); }
.tree .rbar.full .bar > span { background: var(--green); }
.tree .rbar .pct { font-size: 15px; font-weight: 600; }
.tree .excluded { color: var(--muted); font-size: 13px; }
.tree td.c-menu { text-align: center; }
.gate { display: flex; align-items: center; gap: 22px; padding: 16px 22px; }
.gate .flag { font-size: 26px; color: var(--text-2); }
.gate .glabel { font-size: 17px; font-weight: 600; width: 120px; }
.gate .gtitle { font-size: 17px; font-weight: 600; }
.gate .gsub { font-size: 14px; color: var(--muted); margin-top: 2px; }
.gate .gpill { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 10px; font-size: 15px; font-weight: 600; }
.gate .gpill.unmet { background: #FDECEF; color: #B42339; } .gate .gpill.met { background: #E7F7F0; color: var(--green-text); } .gate .gpill.review { background: #FDF3E3; color: #C77D08; }
.gate .gpill .i { font-size: 18px; }
.gate .btn-outline.indigo { min-width: 150px; justify-content: center; margin-left: 24px; }
.foot-bar { display: flex; align-items: center; gap: 12px; padding: 8px 18px; font-size: 15px; color: #4B5563; }
.foot-bar .i { font-size: 20px; color: var(--indigo); }
.foot-bar .view-sel { margin-left: auto; }
.foot-bar .view-sel .muted { color: var(--muted); margin-right: 6px; font-weight: 500; }
/* MM-06 nesting: no connector lines — an indented child block with tint + accent bars (.acc, positioned in the item cell), a summary chip on collapsed groups */
.tree td.c-item { position: relative; }
.tree tr[data-depth="1"] .tcell { padding-left: 36px; } .tree tr[data-depth="2"] .tcell { padding-left: 72px; } .tree tr[data-depth="3"] .tcell { padding-left: 108px; } .tree tr[data-depth="4"] .tcell { padding-left: 144px; }
.tree tr[data-depth="1"] td { background: #FAFBFE; } .tree tr[data-depth="2"] td { background: #F4F6FC; } .tree tr[data-depth="3"] td { background: #EEF1FA; }
.tree tr.row:hover td { filter: brightness(0.985); }
.tree .acc { position: absolute; top: -1px; bottom: -1px; width: 3px; border-radius: 2px; opacity: .55; z-index: 1; }
.tree tr[data-depth]:not([data-depth="0"]) .ibox.task { background: #EEF1FF; }
.tree .ttl { display: flex; align-items: center; gap: 10px; }
.tree .sum { font-size: 12px; font-weight: 600; color: var(--indigo); background: var(--indigo-bg); padding: 3px 8px; border-radius: 8px; white-space: nowrap; }

/* ---------- MM-07 · Nested item view ---------- */
.pstrip.slim { padding: 10px 18px; gap: 16px; }
.pstrip.slim .avatar { width: 44px; height: 44px; font-size: 18px; border-radius: 10px; }
.pstrip.slim .pname { font-size: 22px; }
.pstrip.slim .tabs { margin-left: 40px; padding: 0; }
.pstrip.slim .tab { padding: 10px 14px 8px; font-size: 15px; }
.pstrip.slim .tab .i { font-size: 18px; }
.item-head { padding: 18px 22px 20px; }
.item-top { display: flex; align-items: flex-start; gap: 16px; }
.btn-back { width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); display: grid; place-items: center; font-size: 20px; color: var(--text-2); flex: none; margin-top: 4px; }
.btn-back:hover { background: #FAFBFD; }
.item-title { font-size: 34px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.1; }
.item-desc { font-size: 18px; color: var(--muted); margin-top: 6px; }
.level-chip { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; background: var(--indigo-bg-2); color: var(--text-2); font-size: 14px; font-weight: 500; white-space: nowrap; }
.level-chip .i { font-size: 18px; color: var(--indigo); }
.level-chip b { color: var(--indigo); font-weight: 600; }
.level-chip .dot { color: var(--muted); }
.item-metrics { display: flex; align-items: center; gap: 22px; margin-top: 22px; padding-left: 56px; }
.metric { display: flex; align-items: center; gap: 12px; }
.metric + .metric { border-left: 1px solid var(--border); padding-left: 22px; }
.metric .donut { width: 52px; height: 52px; }
.metric .big { font-size: 20px; font-weight: 700; }
.metric .cap { font-size: 14px; color: var(--muted); margin-top: 2px; }
.metric .mini-avatar { width: 44px; height: 44px; font-size: 14px; }
.metric .cal { width: 44px; height: 44px; border-radius: 10px; background: var(--indigo-bg-2); color: var(--indigo); display: grid; place-items: center; font-size: 22px; }
.spill-big { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 12px; font-size: 16px; font-weight: 600; }
.spill-big .i { font-size: 20px; }
.spill-big.in_progress { background: #E9EEFF; color: var(--indigo); } .spill-big.planned { background: #EEF0F5; color: var(--muted); }
.spill-big.in_review { background: #FDF3E3; color: #C77D08; } .spill-big.done { background: #E7F7F0; color: var(--green-text); } .spill-big.cancelled { background: #F0F1F5; color: var(--muted); text-decoration: line-through; }
.item-metrics .actions { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.subs { width: 100%; border-collapse: collapse; table-layout: fixed; }
.subs th, .subs td { border-top: 1px solid var(--border-soft); padding: 0 14px; text-align: left; vertical-align: middle; }
.subs th { height: 44px; font-size: 14px; font-weight: 500; color: var(--text-2); background: #FAFBFD; }
.subs th + th, .subs td + td { border-left: 1px solid var(--border-soft); }
.subs td { height: 58px; font-size: 15px; }
.subs tr.row:hover td { background: #FAFBFD; }
.subs col.c-chev { width: 46px; } .subs col.c-chk { width: 44px; } .subs col.c-owner { width: 175px; } .subs col.c-ready { width: 180px; } .subs col.c-due { width: 205px; } .subs col.c-dep { width: 160px; } .subs col.c-status { width: 175px; } .subs col.c-act { width: 130px; }
.subs .name { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--indigo); }
.subs .name .i { font-size: 18px; color: var(--text-2); }
.subs .name a:hover { text-decoration: underline; }
.subs .owner { display: inline-flex; align-items: center; gap: 10px; }
.subs .owner .mini-avatar { width: 36px; height: 36px; border-radius: 50%; font-size: 12px; background: #4B5573; color: #fff; }
.subs .rbar { display: inline-flex; align-items: center; gap: 12px; } .subs .rbar .bar { width: 104px; height: 12px; } .subs .rbar .bar > span { background: var(--indigo); } .subs .rbar.full .bar > span { background: var(--green); } .subs .rbar .pct { font-weight: 600; }
.subs .due { display: inline-flex; align-items: center; gap: 10px; }
.subs .due .i { font-size: 20px; color: var(--text-2); }
.subs .dep-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 8px; background: var(--indigo-bg-2); color: var(--indigo); font-size: 13.5px; font-weight: 500; }
.subs .dep-chip.open { background: #FDF3E3; color: #C77D08; }
.subs td.c-act { white-space: nowrap; }
.btn-sq-sm { width: 40px; height: 36px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); display: inline-grid; place-items: center; color: var(--indigo); font-size: 18px; margin-left: 8px; vertical-align: middle; }
.btn-sq-sm:hover { background: var(--indigo-bg); }
/* backlog 5.1: nested subtask rows — the MM-06 nesting (indent per level, tinted child block, accent bar), no connector lines */
.subs tr.nested td { height: 52px; }
.subs tr[data-depth="1"] td { background: #FAFBFE; } .subs tr[data-depth="2"] td { background: #F4F6FC; } .subs tr[data-depth="3"] td, .subs tr[data-depth="4"] td, .subs tr[data-depth="5"] td { background: #EEF1FA; }
.subs tr.nested:hover td { filter: brightness(0.985); }
.subs tr.nested td:first-child { box-shadow: inset 3px 0 0 #C9D2FF; }
.subs tr[data-depth="1"] .name { padding-left: 30px; } .subs tr[data-depth="2"] .name { padding-left: 60px; } .subs tr[data-depth="3"] .name { padding-left: 90px; } .subs tr[data-depth="4"] .name, .subs tr[data-depth="5"] .name { padding-left: 120px; }
.subs tr.nested .name { font-size: 14.5px; }
.subs .name .sum { margin-left: 4px; font-size: 12px; font-weight: 600; color: var(--indigo); background: var(--indigo-bg); padding: 3px 8px; border-radius: 8px; white-space: nowrap; }
.subs .chev.none { visibility: hidden; }
.btn-dashed { display: inline-flex; align-items: center; gap: 8px; margin: 12px 18px 16px; padding: 0 16px; height: 42px; border: 1px dashed #C9D2FF; border-radius: 10px; color: var(--indigo); font-size: 15px; font-weight: 500; background: var(--surface); }
.btn-dashed:hover { background: var(--indigo-bg-2); }
.grid-2.rel { grid-template-columns: 1fr 1.05fr; }
.card-title .i.lead { font-size: 26px; color: var(--text-2); margin-right: 4px; }
.rel-row { display: flex; align-items: flex-start; gap: 14px; padding: 12px 20px 14px; border-top: 1px solid var(--border-soft); }
.rel-row .chev { margin-top: 2px; }
.rel-line { font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 10px; color: var(--indigo); }
.rel-line .i { font-size: 18px; color: var(--indigo); }
.rel-note { font-size: 14px; color: var(--muted); margin-top: 6px; }
.crit { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-top: 1px solid var(--border-soft); font-size: 15px; font-weight: 500; }
.crit .chk { flex: none; }
.crit.is-met .lbl { text-decoration: line-through; color: var(--muted); }
.crit .dots { margin-left: auto; color: var(--text-2); }
.details { display: flex; align-items: center; gap: 0; padding: 12px 20px 16px; }
.detail { display: flex; align-items: center; gap: 12px; padding: 0 28px; font-size: 15px; color: var(--text-2); }
.detail + .detail { border-left: 1px solid var(--border); }
.detail:first-child { padding-left: 0; }
.detail .mini-avatar { width: 32px; height: 32px; font-size: 12px; }
.detail b { color: var(--text); font-weight: 600; }
.ypill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 10px; font-size: 15px; font-weight: 600; }
.ypill.yes { background: #E7F7F0; color: var(--green-text); } .ypill.no { background: #EEF0F5; color: var(--muted); } .ypill.high { background: #FDECEF; color: #D63A4E; } .ypill.normal { background: #FDF3E3; color: #C77D08; } .ypill.critical { background: #FDECEF; color: #B42339; } .ypill.low { background: #EEF0F5; color: var(--muted); } .ypill.amber { background: #FDF3E3; color: #C77D08; }
.save-state .stamp { color: var(--muted); margin-left: 6px; }

.subs col.c-dep { width: 180px; } .subs col.c-due { width: 190px; }
.subs .dep-chip { white-space: nowrap; }


/* ---------- MM-08 · Item side panel ---------- */
.tree tr.row.is-selected td { background: #EEF3FF; }
.side-panel { position: fixed; top: var(--topbar-h); right: 0; bottom: 0; width: 712px; max-width: 100vw; background: var(--surface); border-left: 1px solid var(--border); box-shadow: 0 0 40px rgba(23,27,45,0.14); z-index: 30; display: flex; flex-direction: column; }
.side-panel[hidden] { display: none; }
.sp-head { display: flex; align-items: center; gap: 14px; padding: 22px 28px 0; }
.sp-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 30px; color: var(--indigo); }
.sp-title { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.3px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; outline: none; }
.sp-ghost { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; font-size: 24px; color: var(--text-2); background: transparent; }
.sp-ghost:hover { background: var(--bg); color: var(--text); }
.sp-crumbs { padding: 6px 28px 0; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; }
.sp-crumbs a { color: var(--muted); } .sp-crumbs a:hover { color: var(--indigo); } .sp-crumbs .current { color: var(--text-2); font-weight: 500; }
.sp-grid { margin: 16px 24px 0; border: 1px solid var(--border); border-radius: 12px; display: grid; grid-template-columns: 1fr 1fr 1fr; }
.sp-cell { padding: 16px 22px 18px; } .sp-cell:nth-child(3n+2) { border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.sp-cell:nth-child(n+4) { padding-top: 0; }
.sp-label { font-size: 14px; color: var(--muted); margin-bottom: 8px; } .sp-label.strong { font-size: 15px; font-weight: 600; color: var(--text); margin: 16px 0 8px; }
.sp-select { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 15px; font-weight: 500; color: var(--text); width: 100%; text-align: left; }
.sp-select:hover { background: #FAFBFD; } .sp-select .lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-select .chev { font-size: 18px; color: var(--muted); }
.sp-select .mini-avatar { width: 26px; height: 26px; } .sp-select .lead { font-size: 20px; color: var(--indigo); }
.sp-select .sdot { width: 12px; height: 12px; border-radius: 50%; }
.sdot.planned { background: var(--grey); } .sdot.in_progress { background: var(--indigo); } .sdot.in_review { background: var(--amber); } .sdot.done { background: var(--green); } .sdot.cancelled { background: var(--muted-2); }
.sp-menu { z-index: 40; }
.sp-menu button .sdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; }
.parrow { display: inline-grid; place-items: center; width: 22px; height: 22px; font-size: 18px; color: var(--muted); } .parrow.high, .parrow.critical { color: var(--red); } .parrow.normal { color: var(--amber); transform: rotate(90deg); } .parrow.low { color: var(--grey); transform: rotate(180deg); }
.sp-ready { display: flex; align-items: center; gap: 14px; height: 42px; width: 100%; background: transparent; cursor: pointer; }
.sp-ready .bar { flex: 1; height: 12px; border-radius: 6px; background: var(--track); overflow: hidden; } .sp-ready .bar > span { display: block; height: 100%; background: var(--indigo); border-radius: 6px; }
.sp-ready .pct { font-size: 17px; font-weight: 700; }
.sp-toggle-row { display: flex; align-items: center; gap: 12px; height: 42px; font-size: 15px; font-weight: 500; }
.toggle { width: 46px; height: 26px; border-radius: 13px; background: #C9CFDD; position: relative; transition: background .15s; }
.toggle .knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .15s; }
.toggle[aria-checked="true"] { background: #15A67E; } .toggle[aria-checked="true"] .knob { left: 23px; } .toggle:disabled { opacity: .5; cursor: default; }
.sp-tabs { display: flex; gap: 4px; margin: 16px 24px 0; border-bottom: 1px solid var(--border); }
.sp-tab { display: inline-flex; align-items: center; gap: 10px; padding: 10px 30px 12px; font-size: 16px; font-weight: 600; color: var(--text); background: transparent; border-bottom: 2px solid transparent; margin-bottom: -1px; flex: 1; justify-content: center; }
.sp-tab .i { font-size: 21px; color: var(--text-2); } .sp-tab.is-active { color: var(--indigo); border-bottom-color: var(--indigo); } .sp-tab.is-active .i { color: var(--indigo); }
.pill-count.sm { min-width: 26px; height: 24px; font-size: 14px; border-radius: 12px; background: var(--indigo-bg); color: var(--indigo); }
.sp-scroll { flex: 1; overflow: auto; padding: 0 24px 16px; }
.sp-box { border: 1px solid var(--border); border-radius: 10px; background: #F7F8FB; padding: 12px 14px; font-size: 15px; color: var(--text-2); min-height: 52px; cursor: text; }
.sp-box.static { cursor: default; min-height: 0; } .sp-box.is-empty { color: var(--muted); font-style: italic; }
.sp-box.empty { text-align: center; color: var(--muted); border-style: dashed; cursor: default; padding: 14px; min-height: 0; margin-top: 8px; }
.sp-box textarea { width: 100%; border: 0; background: transparent; font: inherit; color: inherit; resize: vertical; outline: none; }
.sp-row { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; } .sp-row .sp-label.strong { margin: 0; }
.sp-count { font-size: 14px; color: var(--muted); }
.sp-checklist { margin-top: 8px; }
.sp-check { display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: 15px; font-weight: 500; }
.btn-outline.sm { height: 38px; padding: 0 16px; font-size: 15px; gap: 8px; } .btn-outline.sm .i { font-size: 18px; }
.btn-outline.md { height: 46px; padding: 0 22px; font-size: 16px; font-weight: 600; }
.sp-act { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); font-size: 15px; } .sp-act .when { font-size: 13px; color: var(--muted); margin-top: 2px; }
.sp-foot { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--border); background: var(--surface); }
.sp-comment { flex: 1; height: 46px; border: 1px solid var(--border); border-radius: 10px; padding: 0 14px; font: inherit; font-size: 15px; } .sp-comment::placeholder { color: var(--muted-2); }
.sp-foot .btn-primary.md { min-width: 190px; justify-content: center; }
.sp-foot .btn-outline.md { min-width: 110px; justify-content: center; color: var(--indigo); border-color: #C9D2FF; } .sp-foot .btn-outline.md:disabled { color: var(--muted-2); border-color: var(--border); cursor: default; background: var(--surface); }
.sp-foot .btn-outline.md.is-dirty { background: var(--indigo-bg); }
.save-state.saving { color: var(--muted); }
@media (max-width: 1200px) { .side-panel { width: 100%; } .sp-grid { grid-template-columns: 1fr 1fr; } .sp-cell:nth-child(3n+2) { border: 0; } .sp-cell:nth-child(2n) { border-left: 1px solid var(--border); } .sp-cell:nth-child(n+3) { padding-top: 0; } }
@media (max-width: 640px) { .sp-grid { grid-template-columns: 1fr; } .sp-cell { border: 0 !important; padding-top: 0; } .sp-foot { flex-wrap: wrap; } .sp-foot .btn-primary.md { order: -1; width: 100%; } }
.sp-select.static, .sp-ready.static { cursor: default; } .sp-select.static:hover { background: var(--surface); }
.sp-select .excluded, .sp-ready .excluded { color: var(--muted); font-size: 14px; }
.sp-menu-data { display: none; }
.sp-subs { margin-top: 8px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.sp-row + .sp-box, .sp-row + #sp-checklist-host { margin-top: 8px; }
.sp-sub { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--border-soft); font-size: 15px; } .sp-sub:first-child { border-top: 0; }
.sp-sub .ibox { width: 30px; height: 30px; font-size: 18px; } .sp-sub .ttl { flex: 1; font-weight: 600; color: var(--indigo); } .sp-sub .pct { font-weight: 700; min-width: 48px; text-align: right; }
.btn-dashed.sm { height: 38px; font-size: 14px; margin-top: 8px; }
/* backlog 3.1: the blocked strip (MM-08 panel, MM-07 header) */
.blocked-strip { padding: 10px 12px 10px 14px; border-radius: 10px; background: #FDECEF; color: #B42339; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.blocked-strip > .i { font-size: 20px; flex: none; }
.blocked-strip .txt { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.blocked-strip .txt span { color: var(--text); overflow-wrap: anywhere; }
.blocked-strip .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.blocked-strip .btn-outline.sm { height: 34px; padding: 0 12px; font-size: 14px; background: var(--surface); }
.sp-blocked { margin: 14px 24px 0; }
.item-blocked { margin: 18px 0 0 56px; }
@media (max-width: 768px) { .item-blocked { margin: 12px 0 0; } }
.sp-notice { margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: var(--amber-bg); color: var(--amber-text); font-size: 14px; } .sp-notice .linklike { color: var(--indigo); text-decoration: underline; background: none; font: inherit; }
.sp-loading { padding: 28px; gap: 16px; } .sp-skel { height: 44px; border-radius: 10px; background: linear-gradient(90deg, #EEF0F5, #F7F8FB, #EEF0F5); background-size: 200% 100%; animation: sp-shimmer 1.1s infinite; }
@keyframes sp-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }


/* ---------- MM-09 · Timeline (Gantt) ---------- */
.pstrip.tl { align-items: center; }
.pstrip.tl .psub { font-size: 16px; color: var(--text-2); } .pstrip.tl .psub b { font-weight: 600; color: var(--text); } .pstrip.tl .psub .sep { margin: 0 12px; color: var(--border); }
.tl-head { display: flex; align-items: center; gap: 14px; padding: 22px 24px 18px; flex-wrap: wrap; }
.tl-head h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.4px; }
.tl-head .sub { font-size: 15px; color: var(--muted); margin-top: 4px; }
.tl-head .seg { margin-left: 8px; } .tl-head .seg-btn { height: 40px; font-size: 15px; padding: 0 12px; gap: 8px; }
.tl-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tl-tools .btn-outline { height: 44px; padding: 0 14px; font-size: 16px; gap: 8px; }
.tl-nav { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius); height: 44px; }
.tl-nav button { width: 42px; height: 42px; display: grid; place-items: center; font-size: 20px; color: var(--indigo); background: transparent; } .tl-nav button:hover { background: var(--bg); }
.tl-nav .lbl { min-width: 128px; text-align: center; font-size: 16px; font-weight: 600; }
.tl-deps { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 16px; font-weight: 500; }
.tl-deps .i { font-size: 20px; color: var(--indigo); } .tl-deps .toggle { width: 40px; height: 22px; } .tl-deps .toggle .knob { width: 16px; height: 16px; } .tl-deps .toggle[aria-checked="true"] { background: var(--indigo); } .tl-deps .toggle[aria-checked="true"] .knob { left: 21px; }
.gantt { display: grid; grid-template-columns: 690px 1fr; border-top: 1px solid var(--border); position: relative; }
.gleft { border-right: 1px solid var(--border); }
.ghead, .grow { display: grid; grid-template-columns: minmax(0, 1fr) 118px 96px 96px 104px; align-items: center; height: 40px; border-bottom: 1px solid var(--border-soft); font-size: 14px; }
.ghead { height: 58px; font-weight: 600; color: var(--text-2); font-size: 14px; padding-left: 12px; border-bottom: 1px solid var(--border); }
.grow { cursor: pointer; } .grow:hover { background: #FAFBFD; } .grow.is-selected { background: #EEF3FF; }
.grow.is-area, .grow.is-project { font-weight: 600; } .grow.is-area .gc-title a, .grow.is-project .gc-title a { color: var(--text); }
.gc-title { display: flex; align-items: center; gap: 8px; min-width: 0; padding-right: 8px; } .gc-title a { color: var(--indigo); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gc-title .tag { font-size: 11px; padding: 1px 6px; border-radius: 6px; background: var(--amber-bg); color: var(--amber-text); }
.gc-title .chev { width: 22px; height: 22px; display: grid; place-items: center; color: var(--text-2); background: transparent; flex: none; } .gc-title .chev .i { font-size: 16px; } .gc-title .chev.none { visibility: hidden; }
.gc-title .ibox { width: 26px; height: 26px; border-radius: 7px; font-size: 16px; flex: none; display: grid; place-items: center; line-height: 0; } .gc-title .ibox .i { display: block; } .gc-title .aicon { font-size: 22px; color: var(--indigo); flex: none; display: block; }
.gc-title .pav { width: 26px; height: 26px; border-radius: 7px; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: none; }
.gc-owner { display: flex; align-items: center; gap: 6px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 6px; } .gc-owner span:last-child { overflow: hidden; text-overflow: ellipsis; } .gc-owner .mini-avatar { width: 22px; height: 22px; font-size: 10px; flex: none; }
.gc-date { color: var(--text-2); white-space: nowrap; } .gc-status { display: flex; align-items: center; gap: 8px; padding-right: 10px; }
.gbar { width: 52px; height: 10px; border-radius: 5px; background: var(--track); overflow: hidden; flex: none; } .gbar > span { display: block; height: 100%; border-radius: 5px; background: var(--indigo); }
.gbar.green > span { background: var(--green); } .gbar.amber > span { background: #F5A524; } .gbar.red > span { background: var(--red); } .gbar.indigo > span { background: var(--indigo); }
.gpct { font-weight: 600; font-size: 14px; min-width: 38px; } .gc-status .excluded { color: var(--muted); font-size: 13px; }
.gright { overflow-x: auto; position: relative; }
.gsvg { display: block; font-family: inherit; } .gsvg .gday { font-size: 12px; fill: var(--text-2); } .gsvg .gday.wk { fill: var(--muted-2); } .gsvg .gmonth { font-size: 14px; font-weight: 600; fill: var(--text); }
.gsvg .gtoday { font-size: 11px; font-weight: 700; fill: #fff; } .gsvg .gpl { font-size: 12px; font-weight: 700; fill: var(--text-2); } .gsvg .gpl.on { fill: #fff; } .gsvg .gmsl { font-size: 11px; fill: var(--text-2); }
.gbarg.can-drag { cursor: grab; } .gbarg .ghandle { cursor: ew-resize; } .gbarg:hover rect:first-of-type { filter: brightness(0.96); } .gms { cursor: pointer; }
.gtip { position: absolute; background: #171B2D; color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 6px; pointer-events: none; white-space: nowrap; z-index: 5; }
.gright.is-drop { outline: 2px dashed var(--indigo); outline-offset: -2px; }
.gempty { position: absolute; inset: 58px 0 0; display: grid; place-content: center; text-align: center; color: var(--muted); font-size: 15px; } .gempty strong { display: block; color: var(--text); margin-bottom: 4px; }
.unsched { margin-top: 16px; }
.unsched .uhead { display: flex; align-items: center; gap: 12px; padding: 14px 20px; font-size: 16px; } .unsched .uhead .i { font-size: 22px; color: var(--indigo); } .unsched .uhead b { font-weight: 600; } .unsched .uhead .hint { color: var(--muted); font-size: 14px; } .unsched .uhead .chev { margin-left: auto; color: var(--indigo); font-size: 22px; background: transparent; }
.urow { display: grid; grid-template-columns: 36px 1fr 120px 60px 60px 140px 200px; align-items: center; height: 40px; padding: 0 20px; border-top: 1px solid var(--border-soft); font-size: 14px; color: var(--text-2); }
.urow .grip { color: var(--muted-2); font-size: 18px; cursor: grab; } .urow .ttl { display: flex; align-items: center; gap: 8px; } .urow .ttl a { color: var(--text); font-weight: 500; } .urow .ibox { width: 26px; height: 26px; border-radius: 7px; font-size: 16px; }
.urow .gbar > span { width: 0 !important; } .urow.is-dragging { opacity: .5; }
.utag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; background: #EEF0F5; color: var(--muted); }
.utag.warn { background: var(--amber-bg); color: var(--amber-line); } .utag.warn .i { font-size: 16px; } .utag.high { background: #FDECEF; color: #D63A4E; }
@media (max-width: 991px) { .gantt { grid-template-columns: 260px 1fr; } .ghead, .grow { grid-template-columns: 1fr; } .gc-owner, .gc-date, .gc-status { display: none; } .urow { grid-template-columns: 36px 1fr 120px; } .urow > :nth-child(n+4) { display: none; } }
.tl-head.compact { padding: 12px 20px; } .urow.empty { display: block; padding: 12px 0; color: var(--muted); }


/* ---------- MM-10 · Hierarchical work list ---------- */
.wl-head { display: flex; align-items: center; gap: 16px; padding: 0 0 16px; }
.wl-head .btn-back { width: 44px; height: 44px; }
.wl-head .wl-title { font-size: 30px; font-weight: 800; letter-spacing: -0.4px; display: flex; align-items: center; gap: 12px; }
.wl-head .wl-sub { font-size: 16px; color: var(--text-2); margin-top: 4px; } .wl-head .wl-sub b { font-weight: 600; color: var(--text); } .wl-head .wl-sub .sep { margin: 0 12px; color: var(--border); }
.wl-head .right { margin-left: auto; text-align: right; }
.wl-head .right .link { display: inline-flex; align-items: center; gap: 8px; color: var(--indigo); font-size: 16px; font-weight: 600; } .wl-head .right .link .i { font-size: 20px; }
.wl-head .right .meta { margin-top: 10px; font-size: 14px; color: var(--muted); } .wl-head .right .meta .dot { margin: 0 8px; }
.wl-card-head { display: flex; align-items: center; gap: 12px; padding: 22px 24px 18px; flex-wrap: wrap; }
.wl-card-head h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.4px; }
.wl-card-head .sub { font-size: 15px; color: var(--muted); margin-top: 4px; }
.wl-card-head .seg { margin-left: auto; } .wl-card-head .seg-btn { height: 40px; font-size: 16px; padding: 0 16px; }
.wl-card-head .btn-outline { height: 46px; padding: 0 16px; font-size: 16px; gap: 10px; } .wl-card-head .btn-outline .i { font-size: 20px; }
.wl-card-head .btn-primary { height: 46px; font-size: 17px; padding: 0 22px; box-shadow: none; }
.wl { width: 100%; border-collapse: collapse; border-top: 1px solid var(--border); }
.wl th { text-align: left; font-size: 15px; font-weight: 600; color: var(--text); padding: 12px 14px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border-soft); background: var(--surface); white-space: nowrap; }
.wl th:last-child, .wl td:last-child { border-right: 0; }
.wl td { padding: 0 14px; height: 46px; border-bottom: 1px solid var(--border-soft); border-right: 1px solid var(--border-soft); font-size: 15px; color: var(--text-2); vertical-align: middle; }
.wl .c-chk { width: 44px; text-align: center; } .wl .c-chk .chk { width: 20px; height: 20px; border-radius: 5px; margin: 0 auto; }
.wl .c-area { width: 176px; white-space: nowrap; } .wl .c-owner { width: 140px; } .wl .c-status { width: 170px; } .wl .c-due { width: 130px; } .wl .c-ready { width: 180px; } .wl .c-mand { width: 110px; }
.wl tr.row { cursor: pointer; position: relative; } .wl tr.row:hover td { background: #FAFBFD; } .wl tr.row.is-selected td { background: #EEF3FF; }
.wl tr.row.is-dim td { opacity: .6; }
.wl .tcell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wl .chev { width: 24px; height: 24px; display: grid; place-items: center; color: var(--text-2); background: transparent; flex: none; } .wl .chev .i { font-size: 18px; } .wl .chev.none { visibility: hidden; }
.wl .ibox { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; font-size: 17px; flex: none; }
.wl .aicon { font-size: 24px; color: var(--text); flex: none; margin: 0 2px; }
.wl .ttl { color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wl .ttl:hover { color: var(--indigo); }
.wl tr.is-area .ttl, .wl tr.is-group .ttl, .wl tr.is-project .ttl { font-weight: 700; } .wl .cnt { color: var(--muted); font-weight: 500; margin-left: 6px; }
.wl .health { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; } .wl .health .sdot { width: 14px; height: 14px; border-radius: 50%; }
.wl .health.ok { color: var(--green-text); } .wl .health.ok .sdot { background: var(--green); } .wl .health.done { color: var(--green-text); } .wl .health.done .sdot { background: var(--green); }
.wl .health.warn { color: #C77D08; } .wl .health.warn .sdot { background: var(--amber); } .wl .health.bad { color: #D63A4E; } .wl .health.bad .sdot { background: var(--red); }
.wl .due { white-space: nowrap; } .wl .due.overdue { color: #D63A4E; font-weight: 600; } .wl .none { color: var(--muted); }
.wl .rbar { display: flex; align-items: center; gap: 10px; } .wl .rbar .bar { width: 100px; height: 12px; border-radius: 6px; background: var(--track); overflow: hidden; } .wl .rbar .bar > span { display: block; height: 100%; border-radius: 6px; background: var(--indigo); }
.wl .rbar.green .bar > span { background: var(--green); } .wl .rbar.amber .bar > span { background: var(--amber); } .wl .rbar.red .bar > span { background: var(--red); } .wl .rbar .pct { font-weight: 600; color: var(--text); min-width: 42px; }
.wl .mand { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--text-2); } .wl .mand .i { font-size: 22px; color: var(--green); } .wl .mand.no { color: var(--muted); }
.wl .pencil { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); display: none; place-items: center; color: var(--text-2); box-shadow: 0 6px 16px rgba(23,27,45,.08); font-size: 18px; }
.wl tr.row:hover .pencil, .wl tr.row:focus-within .pencil { display: grid; } .wl td.c-mand { position: relative; }
.wl-foot { margin: 14px 24px 18px; height: 52px; border-radius: 10px; background: var(--indigo-bg-2); display: flex; align-items: center; gap: 12px; padding: 0 18px; color: var(--indigo); font-size: 17px; font-weight: 600; cursor: pointer; } .wl-foot .i { font-size: 22px; } .wl-foot:hover { background: var(--indigo-bg); }
.wl-count { margin: 10px 4px 0; font-size: 14px; color: var(--muted); }
.wl-pop { position: absolute; z-index: 30; min-width: 240px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(23,27,45,.12); padding: 10px; }
.wl-pop .label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); padding: 6px 8px; }
.wl-pop label.opt { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; font-size: 15px; cursor: pointer; } .wl-pop label.opt:hover { background: var(--bg); } .wl-pop label.opt input { width: 18px; height: 18px; accent-color: var(--indigo); }
.wl-pop .chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 8px 8px; } .wl-pop .chip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); font-size: 14px; background: var(--surface); } .wl-pop .chip.is-active { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.wl-pop .foot { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 8px 2px; } .wl-pop .foot button { font-size: 14px; color: var(--indigo); font-weight: 600; background: transparent; }
@media (max-width: 991px) { .wl .c-area, .wl .c-owner, .wl .c-mand { display: none; } .wl-card-head .seg { margin-left: 0; } }
.wl-card-head.compact { padding: 12px 20px; } .wl .c-work { width: 150px; } .wl .c-priority { width: 120px; } .wl .ypill.sm { padding: 4px 12px; font-size: 13px; }
.wl .pav { width: 28px; height: 28px; border-radius: 7px; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: none; background: var(--indigo); }


/* ---------- MM-11 · My tasks ---------- */
.mt-head { display: flex; align-items: flex-end; gap: 16px; padding: 4px 0 18px; }
.mt-head h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.5px; } .mt-head .sub { font-size: 18px; color: var(--text-2); margin-top: 4px; }
.mt-head .meta { margin-left: auto; font-size: 14px; color: var(--muted); padding-bottom: 6px; } .mt-head .meta .dot { margin: 0 8px; }
.mt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 20px; align-items: start; }
.mt-toolbar { display: flex; align-items: center; gap: 12px; padding: 0 0 14px; flex-wrap: wrap; }
.mt-tabs { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); padding: 4px; background: var(--surface); }
.mt-tab { height: 44px; padding: 0 20px; border-radius: 8px; display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; color: var(--text); background: transparent; }
.mt-tab .i { font-size: 22px; } .mt-tab.is-active { background: var(--indigo); color: #fff; } .mt-tab .pill-count { min-width: 26px; height: 26px; font-size: 14px; border-radius: 13px; background: var(--red); color: #fff; }
.mt-toolbar .lbl { margin-left: auto; font-size: 16px; color: var(--text-2); } .mt-toolbar .btn-outline { height: 46px; padding: 0 16px; font-size: 16px; gap: 10px; }
.mt { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mt th { text-align: left; font-size: 15px; font-weight: 600; color: var(--text); padding: 12px 14px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border-soft); background: var(--surface); white-space: nowrap; cursor: pointer; }
.mt th:last-child, .mt td:last-child { border-right: 0; } .mt th.is-sorted { color: var(--indigo); } .mt th .i { font-size: 16px; vertical-align: -3px; margin-left: 4px; }
.mt td { padding: 8px 14px; border-bottom: 1px solid var(--border-soft); border-right: 1px solid var(--border-soft); font-size: 15px; color: var(--text-2); vertical-align: middle; }
.mt .c-chk { width: 48px; text-align: center; } .mt .c-chk .chk { width: 22px; height: 22px; border-radius: 6px; margin: 0 auto; }
.mt .c-project { width: 172px; } .mt .c-status { width: 142px; } .mt .c-due { width: 122px; } .mt .c-prio { width: 118px; } .mt .c-menu { width: 48px; text-align: center; }
.mt tr.group td { padding: 8px 14px 6px; border-right: 0; border-bottom: 1px solid var(--border-soft); background: var(--surface); }
.mt .mt-ghead { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 700; color: var(--text); cursor: pointer; }
.mt .mt-ghead .chev { width: 24px; height: 24px; display: grid; place-items: center; color: var(--text-2); background: transparent; padding: 0; line-height: 0; } .mt .mt-ghead .chev .i { font-size: 18px; }
.mt .mt-ghead .pill-count { min-width: 30px; height: 28px; font-size: 15px; border-radius: 14px; } .mt .mt-ghead .pill-count.red { background: #FDECEF; color: #B42339; } .mt .mt-ghead .pill-count.indigo { background: var(--indigo-bg); color: var(--indigo); } .mt .mt-ghead .pill-count.grey { background: #EEF0F5; color: var(--muted); }
.mt tr.row { cursor: pointer; } .mt tr.row:hover td { background: #FAFBFD; } .mt tr.row.is-selected td { background: #EEF3FF; } .mt tr.row.is-done td { opacity: .45; transition: opacity .5s; }
.mt .task .ttl { font-size: 15px; font-weight: 600; color: var(--text); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mt .task .ttl:hover { color: var(--indigo); } .mt .task .ctx { font-size: 13px; color: var(--muted); margin-top: 2px; }
.mt .proj { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 500; font-size: 14px; white-space: nowrap; } .mt .wpill { white-space: nowrap; } .mt .proj .pav { width: 36px; height: 36px; border-radius: 9px; color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; flex: none; }
.mt .wpill.overdue { background: #FDECEF; color: #B42339; } .mt .wpill.overdue .i { font-size: 16px; }
.mt .due { white-space: nowrap; } .mt .due.overdue { color: #D63A4E; font-weight: 600; } .mt .none { color: var(--muted); }
.prio { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; } .prio .i { font-size: 20px; } .prio.high, .prio.critical { color: #D63A4E; } .prio.normal { color: #E08A0B; } .prio.low { color: var(--green-text); }
.mt .dots { width: 32px; height: 32px; display: grid; place-items: center; color: var(--text-2); background: transparent; border-radius: 8px; font-size: 20px; } .mt .dots:hover { background: var(--bg); }
.mt-count { margin: 10px 4px 0; font-size: 14px; color: var(--muted); }
.ap-card { padding: 20px 22px; }
.ap-card .head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .ap-card .head h2 { margin: 0; font-size: 20px; font-weight: 700; } .ap-card .head .pill-count { min-width: 30px; height: 28px; font-size: 15px; border-radius: 14px; background: #FDECEF; color: #B42339; }
.ap-card .head .all { margin-left: auto; color: var(--indigo); font-size: 15px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; } .ap-card .head .all .i { font-size: 18px; }
.ap { border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-top: 12px; display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: end; }
.ap .who { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--text); } .ap .who .pav { width: 36px; height: 36px; border-radius: 9px; color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.ap .ttl { grid-column: 1 / -1; font-size: 17px; font-weight: 700; color: var(--text); margin-top: -2px; } .ap .dsc { font-size: 14px; color: var(--muted); line-height: 1.4; }
.ap .file { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); margin-top: 6px; } .ap .file .i { font-size: 18px; color: var(--indigo); }
.ap .btn-primary { height: 42px; font-size: 16px; padding: 0 20px; box-shadow: none; align-self: end; }
.ap .foot { grid-column: 1 / -1; font-size: 14px; color: var(--muted); margin-top: 4px; } .ap .foot .dot { margin: 0 8px; }
.ap-table .who { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; color: var(--text); } .ap-table .btn-primary { height: 38px; font-size: 15px; padding: 0 16px; box-shadow: none; }
@media (max-width: 1200px) { .mt-grid { grid-template-columns: 1fr; } }
@media (max-width: 991px) { .mt .c-project, .mt .c-prio { display: none; } .mt-toolbar .lbl { margin-left: 0; } }
.ap .btn-primary { display: inline-flex; align-items: center; } .mt tr.row.is-gone { display: none; }


/* ---------- MM-12 · Milestones ---------- */
.ms-head { display: flex; align-items: center; gap: 22px; padding: 4px 0 18px; }
.ms-head h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.5px; } .ms-head .sub { font-size: 18px; color: var(--text-2); margin-top: 4px; }
.ms-kpis { display: flex; gap: 28px; margin-left: 30px; }
.ms-kpi { display: flex; align-items: center; gap: 14px; } .ms-kpi .box { width: 64px; height: 64px; border-radius: 14px; display: grid; place-items: center; font-size: 30px; }
.ms-kpi .box.indigo { background: #E9EEFF; color: var(--indigo); } .ms-kpi .box.green { background: var(--green-bg); color: var(--green-text); } .ms-kpi .box.grey { background: #EEF0F5; color: var(--text-2); } .ms-kpi .box.red { background: #FDECEF; color: #D63A4E; }
.ms-kpi .n { font-size: 30px; font-weight: 800; line-height: 1; } .ms-kpi .l { font-size: 15px; color: var(--muted); margin-top: 4px; }
.ms-head .right { margin-left: auto; text-align: right; } .ms-head .right .btn-primary { height: 50px; font-size: 18px; padding: 0 24px; box-shadow: none; }
.ms-head .right .meta { margin-top: 8px; font-size: 14px; color: var(--muted); } .ms-head .right .meta .dot { margin: 0 8px; }
.ms-next { display: flex; align-items: center; gap: 22px; padding: 18px 22px; margin-bottom: 16px; cursor: pointer; }
.ms-next .box { width: 76px; height: 76px; border-radius: 16px; background: var(--green-bg); color: var(--green-text); display: grid; place-items: center; font-size: 36px; }
.ms-next .cap { font-size: 14px; color: var(--muted); } .ms-next .date { font-size: 24px; font-weight: 800; letter-spacing: -0.3px; margin: 2px 0; } .ms-next .what { font-size: 16px; color: var(--text-2); } .ms-next .what .dot { margin: 0 8px; color: var(--muted); }
.ms-toolbar { display: flex; align-items: center; gap: 12px; padding: 0 0 14px; flex-wrap: wrap; }
.ms-toolbar .btn-outline { height: 46px; padding: 0 16px; font-size: 16px; gap: 10px; } .ms-toolbar .btn-outline .i { font-size: 20px; } .ms-toolbar .spacer { flex: 1; }
.ms { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ms th { text-align: left; font-size: 15px; font-weight: 600; color: var(--text); padding: 12px 14px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border-soft); background: var(--surface); white-space: nowrap; cursor: pointer; }
.ms th:last-child, .ms td:last-child { border-right: 0; } .ms th.is-sorted { color: var(--indigo); } .ms th:not(.is-sorted) .i { opacity: .35; } .ms th .i { font-size: 16px; vertical-align: -3px; margin-left: 4px; }
.ms td { padding: 10px 14px; border-bottom: 1px solid var(--border-soft); border-right: 1px solid var(--border-soft); font-size: 15px; color: var(--text-2); vertical-align: middle; }
.ms .c-date { width: 190px; } .ms .c-project { width: 220px; } .ms .c-owner { width: 190px; } .ms .c-status { width: 170px; } .ms .c-menu { width: 48px; text-align: center; }
.ms tr.row { cursor: pointer; } .ms tr.row:hover td { background: #FAFBFD; } .ms tr.row.is-selected td { background: #EEF3FF; }
.ms .dt { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; color: var(--text); white-space: nowrap; }
.ms .dia { width: 16px; height: 16px; transform: rotate(45deg); border-radius: 3px; background: var(--grey); flex: none; }
.ms .dia.in_progress { background: var(--indigo); } .ms .dia.planned { background: #B8BECD; } .ms .dia.blocked, .ms .dia.overdue { background: var(--red); } .ms .dia.done { background: var(--green); } .ms .dia.in_review { background: var(--amber); }
.ms .ttl { font-size: 15px; font-weight: 600; color: var(--text); display: block; } .ms .ttl:hover { color: var(--indigo); } .ms .ctx { font-size: 13px; color: var(--muted); margin-top: 2px; }
.ms .ttl .tag { font-size: 11px; padding: 1px 6px; border-radius: 6px; background: var(--amber-bg); color: var(--amber-text); margin-left: 8px; vertical-align: 2px; }
.ms .proj { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 500; font-size: 14px; white-space: nowrap; } .ms .proj .pav { width: 36px; height: 36px; border-radius: 9px; color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; flex: none; }
.ms .owner { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; } .ms .owner .mini-avatar { width: 32px; height: 32px; font-size: 12px; }
.ms .wpill { white-space: nowrap; } .ms .wpill.blocked { background: #FDECEF; color: #B42339; } .ms .wpill.overdue { background: #FDECEF; color: #B42339; } .ms .wpill.upcoming { background: var(--indigo-bg); color: var(--indigo); }
.ms .pre { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--text-2); } .ms .pre .i { font-size: 18px; color: var(--indigo); flex: none; margin-top: 1px; } .ms .pre b { font-weight: 600; color: var(--text); display: block; } .ms .pre .names { color: var(--muted); font-size: 13px; } .ms .pre .names .done { text-decoration: line-through; }
.ms .none { color: var(--muted); }
.ms .dots { width: 32px; height: 32px; display: grid; place-items: center; color: var(--text-2); background: transparent; border-radius: 8px; font-size: 20px; visibility: hidden; } .ms tr.row:hover .dots, .ms tr.row:focus-within .dots { visibility: visible; } .ms .dots:hover { background: var(--bg); }
.ms-count { margin: 10px 4px 0; font-size: 14px; color: var(--muted); }
@media (max-width: 1200px) { .ms-kpis { gap: 16px; } .ms-kpi .box { width: 52px; height: 52px; font-size: 24px; } }
@media (max-width: 991px) { .ms .c-owner, .ms .c-note { display: none; } .ms-head { flex-wrap: wrap; } .ms-kpis { margin-left: 0; flex-wrap: wrap; } }
a.ms-next { color: inherit; text-decoration: none; } .ms .pre .names a { color: var(--muted); } .ms .pre .names a:hover { color: var(--indigo); } .ms .pre .names a.done { text-decoration: line-through; } #filters-btn.is-on { border-color: var(--indigo); color: var(--indigo); }


/* ---------- MM-13 · Milestone detail ---------- */
.md-top { display: flex; align-items: center; justify-content: space-between; padding: 2px 0 14px; font-size: 15px; }
.md-top .back { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-weight: 500; } .md-top .back .i { font-size: 20px; } .md-top .back:hover { color: var(--indigo); }
.md-top .meta { color: var(--muted); font-size: 14px; } .md-top .meta .dot { margin: 0 8px; }
.md-head { display: flex; align-items: flex-start; gap: 20px; padding: 0 0 20px; }
.md-head .box { width: 76px; height: 76px; border-radius: 16px; background: #E9EEFF; color: var(--indigo); display: grid; place-items: center; font-size: 40px; flex: none; }
.md-head .ttl { display: flex; align-items: center; gap: 14px; font-size: 34px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.1; }
.md-head .badge { font-size: 14px; padding: 6px 14px; border-radius: 10px; }
.md-head .badge.planned, .md-kv .badge.planned { background: var(--amber-bg); color: var(--amber-text); } .md-kv .badge.in_progress, .md-head .badge.in_progress { background: var(--indigo-bg); color: var(--indigo); } .md-kv .badge.in_review, .md-head .badge.in_review { background: var(--amber-bg); color: #C77D08; } .md-kv .badge.blocked, .md-kv .badge.overdue, .md-head .badge.blocked, .md-head .badge.overdue { background: #FDECEF; color: #B42339; } .md-kv .badge.done, .md-head .badge.done { background: var(--green-bg); color: var(--green-text); }
.md-head .sub { font-size: 17px; color: var(--text-2); margin-top: 10px; } .md-head .sub a { color: var(--text-2); font-weight: 600; } .md-head .sub .dot { margin: 0 10px; color: var(--muted); }
.md-head .action { margin-left: auto; width: 410px; flex: none; }
.md-head .action .btn-primary { width: 100%; height: 52px; font-size: 18px; justify-content: center; box-shadow: none; } .md-head .action .btn-primary:disabled { background: #C9D4FF; color: #fff; cursor: not-allowed; }
.md-head .action .btn-outline.wide { width: 100%; margin-top: 8px; height: 46px; justify-content: center; }
.md-note { margin-top: 12px; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: var(--indigo-bg-2); color: var(--text-2); font-size: 14px; line-height: 1.45; } .md-note .i { font-size: 20px; color: var(--indigo); flex: none; }
.md-note.warn { background: var(--amber-bg); color: var(--amber-text); } .md-note.warn .i { color: var(--amber-line); }
.md-grid { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 20px; align-items: start; }
.md-card { padding: 20px 22px; }
.md-card h2 { margin: 0; font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 10px; } .md-card h2 .cnt { color: var(--muted); font-weight: 500; } .md-card h2 .i { font-size: 24px; color: var(--indigo); }
.md-card .sub { font-size: 14px; color: var(--muted); margin: 4px 0 14px; }
.md-card .head { display: flex; align-items: center; } .md-card .head .card-link { margin-left: auto; }
.md-pre { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; margin-top: 10px; cursor: pointer; } .md-pre:hover { background: #FAFBFD; }
.md-pre .st { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 22px; }
.md-pre .st.open { border: 4px solid #FDEBC8; border-top-color: var(--amber); color: transparent; } .md-pre .st.done { background: var(--green); color: #fff; }
.md-pre .txt { flex: 1; min-width: 0; } .md-pre .txt b { display: block; font-size: 16px; font-weight: 600; color: var(--text); } .md-pre .txt span { font-size: 14px; color: var(--muted); }
.md-pre .pct { font-size: 16px; font-weight: 600; color: var(--text); min-width: 48px; text-align: right; } .md-pre .chev { color: var(--muted); font-size: 20px; }
.md-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.md-check { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: 15px; font-weight: 500; } .md-check .chk { flex: none; }
.md-lbl { font-size: 16px; font-weight: 700; margin: 0 0 8px; } .md-desc { font-size: 15px; color: var(--text-2); line-height: 1.5; cursor: text; } .md-desc.is-empty { color: var(--muted); font-style: italic; }
.md-files { margin-top: 18px; border-top: 1px solid var(--border-soft); padding-top: 14px; }
.md-file { display: flex; align-items: center; gap: 12px; margin-top: 8px; } .md-file .ic { width: 40px; height: 40px; border-radius: 10px; background: #FDECEF; color: #D63A4E; display: grid; place-items: center; font-size: 20px; } .md-file b { display: block; font-size: 15px; font-weight: 600; } .md-file span { font-size: 13px; color: var(--muted); } .md-file .dl { margin-left: auto; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 8px; display: grid; place-items: center; color: var(--text-2); }
.md-kv { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px 14px; align-items: center; margin-top: 10px; font-size: 15px; } .md-kv .i { font-size: 22px; color: var(--indigo); } .md-kv .k { color: var(--text-2); } .md-kv .v { font-weight: 600; color: var(--text); text-align: right; } .md-kv .v a { color: var(--text); }
.md-kv .ypill { padding: 4px 12px; font-size: 13px; }
.md-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; } .md-btns .btn-outline { height: 46px; justify-content: center; font-size: 15px; gap: 10px; color: var(--indigo); border-color: #C9D2FF; } .md-btns .btn-outline .i { font-size: 20px; }
.md-rel { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border-soft); font-size: 15px; cursor: pointer; } .md-rel:first-of-type { border-top: 0; } .md-rel .i { font-size: 22px; color: var(--indigo); } .md-rel .k { color: var(--text-2); flex: 1; } .md-rel .v { font-weight: 600; } .md-rel .chev { color: var(--muted); font-size: 20px; transition: transform .15s; } .md-rel.is-open .chev { transform: rotate(90deg); }
.md-rel-list { padding: 0 0 10px 34px; font-size: 14px; } .md-rel-list a { display: block; padding: 4px 0; color: var(--indigo); }
.md-hist { margin-top: 16px; padding: 20px 22px; }
.md-hist h2 { margin: 0 0 12px; font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 10px; } .md-hist h2 .i { font-size: 24px; color: var(--indigo); }
.md-tl { position: relative; padding-left: 26px; } .md-tl::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: #DCE3FF; }
.md-ev { position: relative; display: flex; gap: 22px; padding: 8px 0; font-size: 15px; } .md-ev::before { content: ""; position: absolute; left: -24px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--indigo); box-shadow: 0 0 0 3px #fff; }
.md-ev .when { color: var(--text-2); white-space: nowrap; min-width: 190px; } .md-ev .what b { font-weight: 600; color: var(--text); }
@media (max-width: 1200px) { .md-grid { grid-template-columns: 1fr; } .md-head { flex-wrap: wrap; } .md-head .action { width: 100%; margin-left: 0; } }
@media (max-width: 991px) { .md-two { grid-template-columns: 1fr; } .md-pre .pct { display: none; } }


/* ---------- MM-14 · Launch check ---------- */
.lk-top { display: flex; align-items: center; justify-content: space-between; padding: 2px 0 14px; font-size: 15px; }
.lk-top .back { display: inline-flex; align-items: center; gap: 8px; color: var(--indigo); font-weight: 500; } .lk-top .back .i { font-size: 20px; }
.lk-top .meta { color: var(--muted); font-size: 14px; } .lk-top .meta .dot { margin: 0 8px; }
.lk-head { display: grid; grid-template-columns: minmax(300px, 1fr) auto minmax(0, 1fr); gap: 24px; align-items: center; padding: 0 0 22px; }
.lk-head .who { display: flex; align-items: center; gap: 16px; }
.lk-head .who .proj-avatar { width: 76px; height: 76px; font-size: 30px; }
.lk-head .who .name { font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 12px; }
.lk-head .who .owner { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 16px; color: var(--text-2); } .lk-head .who .owner .i { font-size: 20px; }
.lk-head .ttl { text-align: left; } .lk-head .ttl h1 { margin: 0; font-size: 36px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.1; } .lk-head .ttl .sub { font-size: 26px; font-weight: 500; color: #5A6280; margin-top: 2px; }
.lk-head .right { display: flex; align-items: center; gap: 22px; justify-content: flex-end; }
.lk-head .right .donut-big { width: 96px; height: 96px; } .lk-head .right .donut-big .val { font-size: 24px; }
.lk-state { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-radius: 12px; min-width: 300px; max-width: 450px; flex: 1; background: #FFF6E5; }
.lk-state .ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--amber); color: #fff; font-size: 22px; font-weight: 800; flex: none; }
.lk-state b { display: block; font-size: 19px; font-weight: 700; color: #7A4B00; } .lk-state span { display: block; font-size: 15px; color: #B45309; margin-top: 2px; }
.lk-state.ok { background: var(--green-bg); } .lk-state.ok .ic { background: var(--green); } .lk-state.ok b { color: #065F46; } .lk-state.ok span { color: var(--green-text); }
.lk-state.review { background: var(--indigo-bg); } .lk-state.review .ic { background: var(--indigo); } .lk-state.review b { color: #1E2F8F; } .lk-state.review span { color: var(--indigo); }
.lk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.lk-card { padding: 20px 22px; }
.lk-card .head { display: flex; align-items: center; gap: 22px; } .lk-card .head h2 { margin: 0; font-size: 24px; font-weight: 700; }
.lk-card .head .total { font-size: 16px; color: var(--text-2); } .lk-card .head .total b { color: var(--text); font-weight: 700; }
.lk-card .head .btn-outline { margin-left: auto; height: 40px; padding: 0 18px; gap: 8px; color: var(--indigo); font-weight: 600; }
.lk-card .info { display: flex; align-items: center; gap: 10px; margin: 12px 0 18px; font-size: 14px; color: var(--muted); } .lk-card .info .i { font-size: 22px; color: var(--indigo); }
/* backlog 5.2: a business area's launch record (Conditions tab) */
.bc-record { margin-top: 16px; }
.bc-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin: 14px 0 12px; font-size: 15px; color: var(--text-2); } .bc-sum b { color: var(--text); font-weight: 700; } .bc-sum .btn-outline { margin-left: auto; height: 40px; padding: 0 18px; color: var(--indigo); font-weight: 600; }
.bc-gates { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-soft); }
.bc-gates li { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--border-soft); font-size: 15px; } .bc-gates li span { flex: 1; min-width: 0; }
.bc-gates li .i { font-size: 20px; flex: none; } .bc-gates li.met .i { color: var(--green); } .bc-gates li.unmet .i { color: #F0546A; }
.bc-gates li em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--text-2); }
.bc-none { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
@media (max-width: 768px) { .bc-sum .btn-outline { margin-left: 0; } }
.lk-area { border: 1px solid var(--border); border-radius: 12px; margin-top: 10px; overflow: hidden; }
.lk-area .row { display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 20px; cursor: pointer; user-select: none; }
.lk-area .row:hover { background: #FAFBFF; } .lk-area .row:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
.lk-area .row .tri { font-size: 18px; color: var(--indigo); transition: transform .15s; } .lk-area.is-open .row .tri { transform: rotate(90deg); }
.lk-area .row .aic { font-size: 30px; width: 34px; text-align: center; }
.lk-area .row .aic.sales { color: var(--area-sales); } .lk-area .row .aic.marketing { color: #2F3A8F; } .lk-area .row .aic.support { color: #1E2F8F; } .lk-area .row .aic.development { color: #1E2F8F; } .lk-area .row .aic.finance { color: #1E2F8F; }
.lk-area .row .lbl { font-size: 18px; font-weight: 600; min-width: 250px; }
.lk-area .row .cnt { font-size: 16px; font-weight: 600; color: var(--text-2); min-width: 44px; text-align: center; }
.lk-area .row .bar { width: 100px; height: 8px; }
.lk-area .row .chev { margin-left: auto; font-size: 20px; color: var(--indigo); transition: transform .15s; } .lk-area.is-open .row .chev { transform: rotate(180deg); }
.lk-area .body { display: none; border-top: 1px solid var(--border); } .lk-area.is-open .body { display: block; }
.lk-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lk-table th { text-align: left; font-weight: 500; color: var(--text-2); background: #F7F8FC; padding: 10px 14px; border-right: 1px solid var(--border-soft); border-bottom: 1px solid var(--border); }
.lk-table td { padding: 14px; border-right: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.lk-table th:last-child, .lk-table td:last-child { border-right: 0; } .lk-table tr:last-child td { border-bottom: 0; }
.lk-table .cond b { display: block; font-size: 15px; font-weight: 600; color: var(--text); } .lk-table .cond span { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.lk-table .cond .tag { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 6px; background: var(--indigo-bg); color: var(--indigo); font-size: 11px; font-weight: 600; vertical-align: middle; }
.lk-table tr.is-hit td { background: #EEF1FF; animation: lk-flash 1.6s ease-out; } @keyframes lk-flash { 0% { background: #DCE3FF; } 100% { background: #EEF1FF; } }
.lk-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; } .lk-pill .i { font-size: 16px; }
.lk-pill.met { background: var(--green-bg); color: var(--green-text); } .lk-pill.review { background: var(--amber-bg); color: #C77D08; } .lk-pill.unmet { background: #FDECEF; color: #D63A4E; } .lk-pill.na { background: #EEF0F5; color: var(--muted); }
.lk-pill.unmet .i { background: #D63A4E; color: #fff; border-radius: 50%; } .lk-pill.review .i { color: #E8912B; }
.lk-table .owner { display: flex; align-items: center; gap: 10px; white-space: nowrap; } .lk-table .owner .mini-avatar { width: 30px; height: 30px; background: #DCE3FF; color: var(--indigo); font-size: 12px; }
.lk-table .ev { display: inline-flex; align-items: center; gap: 6px; color: var(--indigo); } .lk-table .ev .i { font-size: 16px; } .lk-table .ev.none { color: var(--muted); }
.lk-table .due { white-space: nowrap; } .lk-table .due.late { color: #D63A4E; font-weight: 600; }
.lk-table .btn-outline { height: 38px; padding: 0 16px; color: var(--indigo); font-weight: 600; }
.lk-table .empty { padding: 18px 14px; }
.lk-sum { padding: 22px 22px 20px; position: sticky; top: 16px; }
.lk-sum h2 { margin: 0 0 16px; font-size: 24px; font-weight: 700; }
.lk-sum .kv { display: grid; grid-template-columns: 30px 1fr; gap: 12px 16px; align-items: start; padding: 10px 0; } .lk-sum .kv .i { font-size: 28px; color: var(--indigo); margin-top: 2px; }
.lk-sum .kv .k { font-size: 14px; color: var(--text-2); } .lk-sum .kv .v { font-size: 17px; font-weight: 700; margin-top: 2px; } .lk-sum .kv .v.date { font-size: 18px; } .lk-sum .kv .t { font-size: 14px; color: var(--text-2); margin-top: 2px; line-height: 1.45; }
.lk-sum .acts { border-top: 1px solid var(--border-soft); margin-top: 8px; padding-top: 18px; display: grid; gap: 10px; }
.lk-sum .acts .btn-primary { height: 50px; font-size: 17px; justify-content: center; gap: 10px; box-shadow: none; } .lk-sum .acts .btn-primary:disabled { background: #C9D4FF; cursor: not-allowed; }
.lk-sum .acts .btn-go { height: 46px; border: 0; border-radius: 10px; background: #E5E8F0; color: #9CA3AF; font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: not-allowed; }
.lk-sum .acts .btn-go.on { background: var(--green); color: #fff; cursor: pointer; }
.lk-sum .note { font-size: 13px; color: var(--text-2); margin-top: 12px; line-height: 1.45; }
@media (max-width: 1200px) { .lk-grid { grid-template-columns: 1fr; } .lk-sum { position: static; } .lk-head { grid-template-columns: 1fr 1fr; } .lk-head .ttl { grid-column: 1 / -1; } }
@media (max-width: 991px) { .lk-table .c-ev, .lk-table .c-due { display: none; } .lk-area .row .bar { display: none; } }


/* ---------- MM-15 · Reports ---------- */
.rp-head { display: flex; align-items: flex-start; gap: 22px; padding: 4px 0 14px; }
.rp-head h1 { margin: 0; font-size: 36px; font-weight: 800; letter-spacing: -0.6px; } .rp-head .sub { font-size: 18px; color: var(--text-2); margin-top: 4px; }
.rp-kpis { display: flex; gap: 28px; margin-left: 40px; margin-top: 4px; }
.rp-kpi { display: flex; align-items: center; gap: 14px; } .rp-kpi .box { width: 64px; height: 64px; border-radius: 14px; display: grid; place-items: center; font-size: 30px; }
.rp-kpi .box.amber { background: #FFF1E7; color: #E8641B; } .rp-kpi .box.green { background: var(--green-bg); color: var(--green-text); } .rp-kpi .box.red { background: #FDECEF; color: #D63A4E; }
.rp-kpi .n { font-size: 30px; font-weight: 800; line-height: 1; } .rp-kpi .l { font-size: 16px; color: var(--muted); margin-top: 6px; }
.rp-right { margin-left: auto; text-align: right; }
.rp-month { display: inline-flex; align-items: center; height: 46px; border: 1px solid var(--border); border-radius: 10px; background: #fff; padding: 0 6px 0 14px; gap: 8px; font-size: 17px; font-weight: 600; }
.rp-month .i { font-size: 20px; color: var(--indigo); } .rp-month .lbl { min-width: 150px; text-align: center; }
.rp-month button { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); } .rp-month button:hover { background: var(--indigo-bg); color: var(--indigo); }
.rp-right .meta { font-size: 14px; color: var(--muted); margin-top: 10px; } .rp-right .meta .dot { margin: 0 8px; }
.rp-seg { display: inline-flex; gap: 12px; margin: 4px 0 16px; }
.rp-seg .seg-btn { border: 1px solid var(--border); background: #fff; height: 52px; padding: 0 30px; font-size: 18px; border-radius: 10px; }
.rp-seg .seg-btn.is-active { background: var(--indigo); border-color: var(--indigo); color: #fff; } .rp-seg .seg-btn + .seg-btn::before { display: none; }
.rp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 540px; gap: 16px; align-items: start; }
.rp-card { padding: 16px 20px 14px; } .rp-card .head { display: flex; align-items: flex-start; gap: 16px; }
.rp-card h2 { margin: 0; font-size: 24px; font-weight: 700; } .rp-card .sub { font-size: 15px; color: var(--text-2); margin-top: 4px; }
.rp-card .head .ctl { margin-left: auto; }
.rp-select { display: inline-flex; align-items: center; gap: 10px; height: 40px; border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; font-size: 15px; font-weight: 500; background: #fff; color: var(--text); }
.rp-select .i { font-size: 18px; color: var(--indigo); } .rp-select select { appearance: none; border: 0; background: transparent; font: inherit; color: inherit; padding-right: 22px; cursor: pointer; } .rp-select .chev { margin-left: -28px; pointer-events: none; color: var(--text-2); }
.rp-cap { display: flex; justify-content: flex-end; font-size: 13px; color: var(--muted); margin: 10px 24px 2px 0; }
.rp-list { border-top: 1px solid var(--border-soft); }
.rp-row { display: grid; grid-template-columns: 24px 40px 1fr 200px 56px 150px; gap: 12px; align-items: center; height: 52px; border-bottom: 1px solid var(--border-soft); font-size: 15px; }
.rp-row .chev { color: var(--indigo); font-size: 18px; cursor: pointer; transition: transform .15s; } .rp-row.is-open .chev { transform: rotate(90deg); }
.rp-row .v-avatar { width: 40px; height: 40px; border-radius: 10px; color: #fff; font-weight: 700; font-size: 15px; display: grid; place-items: center; }
.rp-row .nm { display: flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 600; white-space: nowrap; min-width: 0; } .rp-row .nm a { color: var(--text); } .rp-row .nm .badge { font-size: 12.5px; }
.rp-bar { height: 14px; border-radius: 7px; background: var(--track); overflow: hidden; } .rp-bar > span { display: block; height: 100%; border-radius: 7px; background: var(--amber); }
.rp-bar.red > span { background: #F0546A; } .rp-bar.green > span { background: var(--green); } .rp-bar.grey > span { background: var(--grey); }
.rp-row .pct { font-size: 16px; font-weight: 700; text-align: right; } .rp-row .date { font-size: 15px; color: var(--text-2); text-align: right; padding-right: 8px; white-space: nowrap; }
.rp-areas { display: none; padding: 6px 0 12px 76px; border-bottom: 1px solid var(--border-soft); } .rp-row.is-open + .rp-areas { display: block; }
.rp-areas .al { display: grid; grid-template-columns: 170px 200px 56px; gap: 14px; align-items: center; height: 30px; font-size: 14px; color: var(--text-2); } .rp-areas .al .bar { width: 200px; height: 10px; } .rp-areas .al b { text-align: right; color: var(--text); font-weight: 600; }
.rp-blk { display: grid; grid-template-columns: 220px 1fr 24px; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border-soft); }
.rp-blk .who { display: flex; align-items: center; gap: 14px; } .rp-blk .who .i { font-size: 34px; color: var(--indigo); width: 40px; text-align: center; }
.rp-blk .who b { display: block; font-size: 18px; font-weight: 600; } .rp-blk .who span { font-size: 14px; color: var(--muted); }
.rp-blk .chips { display: flex; flex-wrap: wrap; gap: 8px; border-left: 1px solid var(--border-soft); padding-left: 18px; min-height: 40px; align-items: center; }
.rp-chip { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 10px; background: #FDECEF; color: #B42339; font-size: 14px; font-weight: 500; } .rp-chip:hover { background: #FAD7DE; }
.rp-blk .chev { color: var(--indigo); font-size: 20px; cursor: pointer; transition: transform .15s; } .rp-blk.is-open .chev { transform: rotate(90deg); }
.rp-blk-det { display: none; padding: 4px 0 12px 74px; border-bottom: 1px solid var(--border-soft); font-size: 14px; } .rp-blk.is-open + .rp-blk-det { display: block; }
.rp-blk-det div { display: grid; grid-template-columns: 150px 1fr 60px; gap: 12px; height: 28px; align-items: center; color: var(--text-2); } .rp-blk-det div b { color: var(--text); font-weight: 600; } .rp-blk-det div span:last-child { text-align: right; }
.rp-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 15px; }
.rp-table th { text-align: left; font-weight: 500; color: var(--text-2); font-size: 14px; background: #F7F8FC; padding: 10px 12px; border-right: 1px solid var(--border-soft); border-bottom: 1px solid var(--border); }
.rp-table th .i { font-size: 14px; vertical-align: -2px; margin-left: 4px; cursor: pointer; } .rp-table th:last-child { border-right: 0; width: 44px; }
.rp-table td { padding: 9px 12px; white-space: nowrap; border-right: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); } .rp-table td:last-child { border-right: 0; text-align: center; }
.rp-table td .tag { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 6px; background: var(--indigo-bg); color: var(--indigo); font-size: 11px; font-weight: 600; vertical-align: middle; }
.rp-table td .chev { color: var(--indigo); font-size: 18px; } .rp-table tr:hover td { background: #FAFBFF; }
.rp-foot { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; color: var(--indigo); font-size: 15px; font-weight: 500; } .rp-foot .i { font-size: 20px; }
.rp-trend-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 56px 20px 40px; }
.rp-trend-empty .ic { font-size: 56px; color: #C9D4FF; margin-bottom: 18px; } .rp-trend-empty b { font-size: 18px; font-weight: 700; } .rp-trend-empty span { font-size: 14px; color: var(--muted); margin-top: 8px; }
.rp-trend svg { width: 100%; height: 220px; display: block; margin-top: 14px; } .rp-trend .gl { stroke: var(--border-soft); } .rp-trend .ln { fill: none; stroke: var(--indigo); stroke-width: 2.5; } .rp-trend .pt { fill: #fff; stroke: var(--indigo); stroke-width: 2.5; } .rp-trend text { font-size: 12px; fill: var(--muted); }
.rp-matrix { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 15px; } .rp-matrix th { text-align: left; font-weight: 500; color: var(--text-2); font-size: 14px; padding: 10px 12px; border-bottom: 1px solid var(--border); } .rp-matrix td { padding: 12px; border-bottom: 1px solid var(--border-soft); }
.rp-matrix .biz { display: flex; align-items: center; gap: 12px; font-weight: 600; } .rp-matrix .biz .v-avatar { width: 36px; height: 36px; border-radius: 9px; color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
@media (max-width: 1200px) { .rp-grid { grid-template-columns: 1fr; } .rp-head { flex-wrap: wrap; } .rp-kpis { margin-left: 0; } .rp-right { margin-left: 0; text-align: left; } }
@media (max-width: 991px) { .rp-row { grid-template-columns: 24px 40px 1fr 160px 56px; } .rp-row .date { display: none; } .rp-table .c-owner { display: none; } }


/* ---------- MM-16 · Global search ---------- */
.search .kbd { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.sr-backdrop { position: fixed; inset: 0; background: rgba(23,27,45,0.35); z-index: 60; display: flex; justify-content: center; align-items: flex-start; padding-top: 160px; }
.sr-palette { width: 840px; max-width: calc(100% - 32px); background: var(--surface); border-radius: 16px; box-shadow: 0 30px 80px rgba(23,27,45,0.35); padding: 20px 22px 14px; display: flex; flex-direction: column; max-height: calc(100vh - 200px); }
.sr-q { display: flex; align-items: center; gap: 12px; height: 56px; border: 1px solid var(--border); border-radius: 12px; padding: 0 14px 0 16px; }
.sr-q .i { font-size: 24px; color: var(--text); } .sr-q input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 20px; font-weight: 500; color: var(--text); }
.sr-q .clear { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); } .sr-q .clear:hover { background: var(--indigo-bg); color: var(--indigo); }
.sr-q:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.sr-tabs { display: flex; gap: 8px; margin: 14px 0 8px; border-bottom: 1px solid var(--border-soft); }
.sr-tab { padding: 10px 14px 12px; font-size: 16px; font-weight: 600; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; } .sr-tab:hover { color: var(--text); }
.sr-tab.is-active { color: var(--indigo); border-bottom-color: var(--indigo); } .sr-tab:disabled { color: var(--muted-2); cursor: default; }
.sr-list { overflow: auto; margin: 0 -6px; padding: 0 6px; } .sr-list.is-loading { opacity: .6; }
.sr-hit { display: grid; grid-template-columns: 44px minmax(0, 1fr) 190px 150px 20px; gap: 14px; align-items: center; padding: 12px 12px; border-radius: 12px; border-bottom: 1px solid var(--border-soft); cursor: pointer; }
.sr-hit.is-active, .sr-hit:hover { background: var(--indigo-bg-2); border-bottom-color: transparent; }
.sr-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 22px; background: var(--indigo-bg); color: var(--indigo); }
.sr-ic.milestone { background: #FDF3E3; color: #C77D08; } .sr-ic.launch_condition { background: #E7F7F0; color: var(--green-text); } .sr-ic.comment { background: #F0EBFF; color: #6D4DE8; } .sr-ic.project, .sr-ic.business { background: #E9EEFF; color: #2F3A8F; }
.sr-hit .ttl { font-size: 17px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sr-hit .ttl mark, .sr-table mark { background: #FDE9B5; color: inherit; border-radius: 3px; padding: 0 1px; }
.sr-hit .path { font-size: 13px; color: var(--text-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sr-hit .path .sep { margin: 0 6px; color: var(--muted); }
.sr-type { display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; background: var(--indigo-bg); color: var(--indigo); }
.sr-type.comment { background: #F0EBFF; color: #6D4DE8; } .sr-type.milestone { background: #FDF3E3; color: #C77D08; } .sr-type.launch_condition { background: #E7F7F0; color: var(--green-text); } .sr-type.project, .sr-type.business { background: #EEF0F5; color: var(--text-2); }
.sr-hit .prog { font-size: 13px; color: var(--text-2); } .sr-hit .prog .row { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--text); } .sr-hit .prog .bar { width: 110px; height: 12px; } .sr-hit .prog .bar > span { background: var(--indigo); }
.sr-hit .prog .due { display: block; margin-top: 4px; }
.sr-hit .who { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text); } .sr-hit .who .mini-avatar { width: 32px; height: 32px; font-size: 12px; background: #DCE3FF; color: var(--indigo); }
.sr-hit .chev { color: var(--text-2); font-size: 18px; }
.sr-foot { display: flex; align-items: center; gap: 10px; padding: 12px 6px 0; margin-top: 4px; border-top: 1px solid var(--border-soft); font-size: 14px; color: var(--text-2); }
.sr-foot kbd { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text); background: #fff; }
.sr-foot .gap { margin-left: 10px; } .sr-foot .all { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--indigo); font-weight: 600; font-size: 15px; } .sr-foot .all .i { font-size: 18px; }
.sr-empty { padding: 34px 10px; text-align: center; color: var(--text-2); font-size: 15px; } .sr-empty b { display: block; color: var(--text); font-size: 16px; margin-bottom: 4px; }
/* backlog 5.4: recent searches while the query is shorter than two characters */
.sr-recent-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px 8px; font-size: 13px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.sr-recent-head .linklike { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--indigo); cursor: pointer; }
.sr-hit.sr-recent { grid-template-columns: 40px minmax(0, 1fr) 36px; padding: 8px 12px; }
.sr-ic.recent { background: #F3F4F8; color: var(--text-2); font-size: 20px; }
.sr-recent-x { width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; display: grid; place-items: center; color: var(--muted); font-size: 16px; cursor: pointer; }
.sr-recent-x:hover { background: #E9ECF3; color: var(--text); }
.sr-empty.sr-hint { padding: 14px 10px 6px; font-size: 13px; }
/* results page */
.sr-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 4px 0 16px; }
.sr-head h1 { margin: 0; font-size: 36px; font-weight: 800; letter-spacing: -0.6px; } .sr-head .sub { font-size: 20px; color: var(--text-2); margin-top: 6px; }
.sr-head .meta { font-size: 14px; color: var(--muted); margin-top: 12px; } .sr-head .meta .dot { margin: 0 8px; }
.sr-filters { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.sr-filters .search { margin: 0; width: 220px; height: 48px; } .sr-filters .rp-select { height: 48px; font-size: 16px; padding: 0 16px; gap: 12px; } .sr-filters .rp-select .i { font-size: 22px; }
.sr-chip { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px 0 10px; border-radius: 10px; background: var(--indigo-bg-2); border: 1px solid #C9D4FF; font-size: 16px; font-weight: 600; }
.sr-chip .v-avatar { width: 28px; height: 28px; border-radius: 7px; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; } .sr-chip button { width: 24px; height: 24px; display: grid; place-items: center; color: var(--text-2); border-radius: 6px; } .sr-chip button:hover { background: #fff; color: var(--indigo); }
.sr-filters .clear-all { margin-left: auto; color: var(--indigo); font-size: 16px; font-weight: 500; }
.sr-table { width: 100%; border-collapse: collapse; }
.sr-table th { text-align: left; font-size: 15px; font-weight: 600; color: var(--text); padding: 14px 16px; border-bottom: 1px solid var(--border); }
.sr-table td { padding: 16px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; font-size: 15px; }
.sr-table tr.hit { cursor: pointer; } .sr-table tr.hit:hover td { background: #FAFBFF; } .sr-table tr.hit:focus-visible td { background: var(--indigo-bg-2); } .sr-table tr.hit:focus-visible td:first-child { box-shadow: inset 2px 0 0 var(--indigo); }
.sr-table tr.hit:focus-visible { outline: 0; }
.sr-table .res { display: flex; align-items: center; gap: 16px; } .sr-table .res .sr-ic { width: 44px; height: 44px; flex: none; }
.sr-table .res .ttl { display: block; font-size: 17px; font-weight: 600; } .sr-table .res .path { display: block; font-size: 14px; color: var(--text-2); margin-top: 3px; line-height: 1.45; } .sr-table .res .path .sep { margin: 0 6px; color: var(--muted); }
.sr-table .st .wpill { font-size: 14px; white-space: nowrap; } .sr-table .st .pct { display: block; margin: 6px 0 0 18px; font-size: 15px; font-weight: 600; }
.sr-table .who { display: flex; align-items: center; gap: 12px; } .sr-table .who .mini-avatar { width: 40px; height: 40px; flex: none; font-size: 13px; font-weight: 700; line-height: 1; background: #DCE3FF; color: var(--indigo); display: grid; place-items: center; } .sr-table .who .nm b { display: block; font-weight: 600; } .sr-table .who .nm span { display: block; font-size: 14px; color: var(--text-2); margin-top: 2px; }
.sr-table .snip { font-size: 16px; color: var(--text-2); line-height: 1.5; max-width: 340px; }
.sr-table .typ { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; color: var(--text); } .sr-table .typ .i { font-size: 24px; color: var(--indigo); }
.sr-table .open { width: 44px; height: 44px; border: 1px solid #C9D4FF; border-radius: 10px; display: inline-grid; place-items: center; color: var(--indigo); font-size: 20px; } .sr-table .open:hover { background: var(--indigo-bg); }
.sr-more { display: block; margin: 16px auto 4px; }
@media (max-width: 1200px) { .sr-hit { grid-template-columns: 44px minmax(0, 1fr) 20px; } .sr-hit .prog, .sr-hit .who { grid-column: 2; } }
@media (max-width: 991px) { .sr-table .c-snip, .sr-table .c-typ { display: none; } }

#sr-rows-host.is-loading { opacity: .6; }


/* ---------- MM-17 · Notification centre ---------- */
.nf-drawer { position: fixed; top: 60px; right: 0; bottom: 0; width: min(420px, 100%); background: var(--surface); box-shadow: -18px 0 48px rgba(23,27,45,0.14); border-left: 1px solid var(--border); z-index: 55; display: flex; flex-direction: column; }
.nf-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 22px 14px; } .nf-head h2 { margin: 0; font-size: 22px; font-weight: 700; }
.nf-head .close { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); font-size: 22px; } .nf-head .close:hover { background: #F3F4F8; }
.nf-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 22px; }
.nf-tab { height: 46px; border-radius: 10px; border: 1px solid var(--border); background: #F7F8FC; font-size: 16px; font-weight: 600; color: var(--text); display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.nf-tab.is-active { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.nf-tab .pill { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: #F0546A; color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; } .nf-tab .pill.zero { background: #E5E8F0; color: var(--text-2); }
.nf-actions { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px 10px; font-size: 14px; }
.nf-actions .mark { display: inline-flex; align-items: center; gap: 8px; color: var(--indigo); font-weight: 500; } .nf-actions .mark .i { font-size: 18px; }
.nf-actions .gear { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--indigo); font-size: 20px; } .nf-actions .gear:hover { background: var(--indigo-bg); }
.nf-list { flex: 1; overflow: auto; padding: 0 16px 12px; } .nf-list.is-loading { opacity: .6; }
.nf-card { position: relative; border: 1px solid var(--border); border-radius: 12px; padding: 14px 14px 12px 20px; margin-bottom: 10px; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px 14px; background: #fff; }
.nf-card .dot { position: absolute; left: 8px; top: 24px; width: 10px; height: 10px; border-radius: 50%; background: var(--indigo); }
.nf-card .ic { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; font-size: 22px; color: var(--indigo); background: #fff; }
.nf-card .ic.done { color: var(--green); } .nf-card .ic.due { color: var(--indigo); }
.nf-card .top { display: flex; align-items: flex-start; gap: 10px; } .nf-card .top b { flex: 1; font-size: 15px; font-weight: 700; line-height: 1.3; } .nf-card .top .ago { font-size: 13px; color: var(--muted); white-space: nowrap; margin-top: 2px; }
.nf-card .path { font-size: 13px; color: var(--text-2); margin-top: 3px; } .nf-card .path .sep { margin: 0 6px; color: var(--muted); }
.nf-card .body { font-size: 14px; color: var(--text); margin-top: 8px; line-height: 1.45; }
.nf-card .foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .nf-card .foot .mini-avatar { width: 30px; height: 30px; font-size: 11px; background: var(--indigo); color: #fff; }
.nf-card .foot .who { font-size: 14px; flex: 1; } .nf-card .foot .btn-outline { height: 36px; padding: 0 16px; color: var(--indigo); font-weight: 600; font-size: 14px; }
.nf-card.is-read { background: #FAFBFD; cursor: pointer; } .nf-card.is-read .ic { color: var(--muted); } .nf-card.is-read .top b { font-weight: 600; color: var(--text-2); font-size: 14.5px; } .nf-card.is-read .body { color: var(--text-2); }
.nf-card.is-read:hover { background: #F3F5FB; }
.nf-empty { text-align: center; padding: 60px 20px; color: var(--text-2); font-size: 15px; } .nf-empty b { display: block; color: var(--text); font-size: 17px; margin-bottom: 6px; }
.nf-foot { border-top: 1px solid var(--border-soft); padding: 14px 22px; display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--text); } .nf-foot .i { font-size: 22px; color: var(--indigo); } .nf-foot .chev { margin-left: auto; color: var(--indigo); }
@media (max-width: 991px) { .nf-card .foot { flex-wrap: wrap; } .nf-card .foot .btn-outline { width: 100%; justify-content: center; } }
.nf-actions .mark { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
/* backlog 5.3: mark one notification read without opening it (Undo in the toast) */
.nf-card .foot .nf-read { width: 36px; height: 36px; flex: none; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); display: grid; place-items: center; color: var(--indigo); font-size: 18px; cursor: pointer; }
.nf-card .foot .nf-read:hover { background: var(--indigo-bg); }


/* ---------- MM-18 · Project settings ---------- */
.st-head { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start; padding: 4px 0 14px; }
.st-head .proj-id { display: flex; gap: 18px; align-items: center; }
.st-head .back { height: 44px; padding: 0 20px; border: 1px solid #C9D4FF; border-radius: 10px; background: var(--indigo-bg-2); color: var(--indigo); font-weight: 600; font-size: 16px; display: inline-flex; align-items: center; gap: 10px; }
.st-head .meta { text-align: right; font-size: 14px; color: var(--muted); margin-top: 12px; } .st-head .meta .dot { margin: 0 8px; }
.st-card { padding: 0; overflow: hidden; }
.st-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.st-nav { border-right: 1px solid var(--border-soft); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.st-nav a { display: flex; align-items: center; gap: 14px; height: 48px; padding: 0 16px; border-radius: 10px; font-size: 16px; font-weight: 500; color: var(--text); position: relative; }
.st-nav a .i { font-size: 24px; color: var(--indigo); } .st-nav a:hover { background: #F7F8FC; }
.st-nav a.is-active { background: var(--indigo-bg-2); color: var(--indigo); } .st-nav a.is-active::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--indigo); }
.st-sec { padding: 18px 24px 16px; }
.st-sec h2 { margin: 0; font-size: 22px; font-weight: 700; } .st-sec .sub { font-size: 15px; color: var(--text-2); margin-top: 4px; }
.st-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin-top: 14px; }
.st-field { display: flex; flex-direction: column; gap: 8px; } .st-field.wide { grid-column: 1 / -1; }
.st-field label { font-size: 15px; font-weight: 600; } .st-field label .req { color: #D63A4E; margin-left: 4px; }
.st-input { height: 42px; border: 1px solid var(--border); border-radius: 10px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--text); background: #fff; display: flex; align-items: center; gap: 10px; width: 100%; }
.st-input:focus, .st-input:focus-within { outline: 0; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.st-input .i { font-size: 20px; color: var(--text-2); } .st-input input, .st-input select { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--text); min-width: 0; }
.st-input select { appearance: none; padding-right: 26px; } .st-input .chev { margin-left: -26px; pointer-events: none; color: var(--text-2); }
.st-input.ro { background: #F3F5FB; color: var(--text-2); border-color: transparent; }
.st-lc { display: flex; align-items: center; gap: 18px; } .st-lc .st-input { width: 300px; } .st-lc a { color: var(--indigo); font-size: 15px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.st-textarea { border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; font: inherit; font-size: 16px; color: var(--text); min-height: 56px; resize: vertical; width: 100%; } .st-textarea:focus { outline: 0; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.st-count { text-align: right; font-size: 13px; color: var(--muted); margin-top: -2px; }
.st-areas { margin-top: 18px; } .st-areas h3 { margin: 0; font-size: 20px; font-weight: 700; } .st-areas .sub { font-size: 15px; color: var(--text-2); margin-top: 4px; }
.st-table { width: 100%; border-collapse: collapse; margin-top: 14px; border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; }
.st-table th { text-align: left; font-size: 14px; font-weight: 600; color: var(--text); background: #F7F8FC; padding: 8px 14px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border-soft); } .st-table th:last-child { border-right: 0; text-align: center; }
.st-table td { padding: 3px 14px; border-bottom: 1px solid var(--border-soft); border-right: 1px solid var(--border-soft); font-size: 15px; } .st-table td:last-child { border-right: 0; text-align: center; } .st-table tr:last-child td { border-bottom: 0; }
.st-table .area { display: flex; align-items: center; gap: 16px; } .st-table .area .i { font-size: 26px; color: #1E2F8F; }
.st-table .st-input { height: 36px; } .st-input input[type=date]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .7; }
.st-w { display: inline-block; min-width: 120px; padding: 6px 0; border-radius: 8px; background: #EEF0F5; color: var(--text); font-weight: 600; font-size: 15px; }
.st-w input { width: 60px; border: 0; background: transparent; text-align: center; font: inherit; font-weight: 600; }
.st-foot { display: flex; align-items: center; gap: 22px; padding: 14px 24px; border-top: 1px solid var(--border-soft); }
.st-foot .btn-primary { height: 50px; padding: 0 26px; font-size: 17px; gap: 12px; } .st-foot .btn-primary:disabled { background: #C9D4FF; cursor: not-allowed; box-shadow: none; }
.st-foot .link { display: inline-flex; align-items: center; gap: 10px; color: var(--indigo); font-size: 15px; font-weight: 500; } .st-foot .link .i { font-size: 22px; }
.st-foot .right { margin-left: auto; display: flex; gap: 12px; padding-left: 22px; border-left: 1px solid var(--border-soft); }
.st-foot .btn-outline { height: 46px; padding: 0 18px; font-size: 15px; gap: 12px; color: var(--text); }
.st-err { color: #D63A4E; font-size: 13px; }
.st-steps { display: flex; gap: 8px; margin: 18px 0 20px; } .st-step { flex: 1; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); font-size: 14px; font-weight: 600; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.st-step.done { border-color: #BFE9D6; background: var(--green-bg); color: var(--green-text); } .st-step.cur { border-color: var(--indigo); background: var(--indigo-bg-2); color: var(--indigo); }
.st-rules { margin: 18px 0 0; padding: 0 0 0 18px; color: var(--text-2); font-size: 15px; line-height: 1.6; }
.st-total { font-size: 15px; font-weight: 600; margin-top: 12px; } .st-total.bad { color: #D63A4E; }
@media (max-width: 1200px) { .st-body { grid-template-columns: 1fr; } .st-nav { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--border-soft); overflow: auto; } .st-form { grid-template-columns: 1fr; } .st-foot { flex-wrap: wrap; } .st-foot .right { margin-left: 0; padding-left: 0; border-left: 0; } }
@media (max-width: 991px) { .st-table th:last-child, .st-table td:last-child { display: none; } }


/* ---------- MM-19 · Workspace settings ---------- */
.wst-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 4px 0 16px; }
.wst-head h1 { margin: 0; font-size: 36px; font-weight: 800; letter-spacing: -0.6px; } .wst-head .sub { font-size: 18px; color: var(--text-2); margin-top: 4px; }
.wst-head .meta { font-size: 14px; color: var(--muted); margin-top: 14px; } .wst-head .meta .dot { margin: 0 8px; }
.wst-tabs { display: inline-flex; border: 1px solid var(--border); border-radius: 12px; background: #fff; padding: 4px; margin-bottom: 16px; }
.wst-tabs a { display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 22px; border-radius: 9px; font-size: 17px; font-weight: 600; color: var(--text); position: relative; }
.wst-tabs a .i { font-size: 22px; color: var(--indigo); } .wst-tabs a + a::before { content: ""; position: absolute; left: -2px; top: 10px; bottom: 10px; width: 1px; background: var(--border); }
.wst-tabs a.is-active { background: var(--indigo-bg-2); color: var(--indigo); } .wst-tabs a.is-active + a::before, .wst-tabs a.is-active::before { display: none; }
.wst-grid { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 16px; align-items: start; }
.wst-card { padding: 20px 24px 16px; } .wst-card h2 { margin: 0; font-size: 24px; font-weight: 700; } .wst-card .sub { font-size: 16px; color: var(--text-2); margin-top: 4px; }
.wst-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: var(--indigo-bg-2); color: var(--text-2); font-size: 14px; margin-bottom: 14px; } .wst-note .i { font-size: 20px; color: var(--indigo); flex: none; }
.wst-form { margin-top: 12px; }
.wst-row { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 0 20px; align-items: start; padding: 9px 0; }
.wst-row > label, .wst-row > .lbl { font-size: 16px; font-weight: 600; padding-top: 10px; }
.wst-row .wst-hint { font-size: 13px; color: var(--muted); margin-top: 5px; }
.wst-row .err { font-size: 13px; color: #D63A4E; margin-top: 6px; }
.wst-input { height: 42px; border: 1px solid var(--border); border-radius: 10px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--text); background: #fff; display: flex; align-items: center; gap: 10px; width: 100%; }
.wst-input:focus, .wst-input:focus-within { outline: 0; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.wst-input select, .wst-input input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--text); min-width: 0; }
.wst-input select { appearance: none; padding-right: 26px; } .wst-input .chev { margin-left: -26px; pointer-events: none; color: var(--text-2); }
.wst-input.num { width: 140px; } .wst-input.num + span { margin-left: 10px; font-size: 15px; color: var(--text-2); }
.wst-input:disabled, .wst-input.is-disabled { background: #F3F5FB; color: var(--text-2); }
.wst-days { display: flex; gap: 8px; } .wst-day { flex: 1; height: 40px; border-radius: 9px; border: 1px solid var(--border); background: #F3F5FB; color: var(--text-2); font-size: 15px; font-weight: 600; }
.wst-day[aria-pressed="true"] { background: var(--indigo); border-color: var(--indigo); color: #fff; } .wst-day:disabled { cursor: default; opacity: .8; }
.wst-owner b { display: block; font-size: 16px; font-weight: 600; padding-top: 6px; } .wst-owner span { display: block; font-size: 13px; color: var(--text-2); margin-top: 3px; }
.wst-foot { display: flex; justify-content: flex-end; border-top: 1px solid var(--border-soft); padding-top: 16px; margin-top: 6px; }
.wst-foot .btn-primary { height: 48px; padding: 0 26px; font-size: 17px; gap: 12px; } .wst-foot .btn-primary:disabled { background: #C9D4FF; cursor: not-allowed; box-shadow: none; }
.wst-members .head { display: flex; align-items: flex-start; gap: 16px; } .wst-members .head h2 { font-size: 24px; } .wst-members .kpi { margin-left: auto; display: flex; align-items: center; gap: 12px; background: var(--green-bg); color: var(--green-text); border-radius: 12px; padding: 12px 16px; flex: none; }
.wst-members .kpi .i { font-size: 26px; } .wst-members .kpi b { font-size: 28px; font-weight: 800; line-height: 1; display: block; } .wst-members .kpi span { font-size: 13px; }
.wst-mlist { border-top: 1px solid var(--border-soft); margin-top: 16px; padding-top: 8px; }
.wst-m { display: flex; align-items: center; gap: 14px; padding: 8px 0; }
.wst-m .av { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 16px; flex: none; }
.wst-m b { display: block; font-size: 17px; font-weight: 700; } .wst-m span { display: block; font-size: 14px; color: var(--text-2); margin-top: 1px; }
.wst-m .you { margin-left: auto; padding: 5px 14px; border-radius: 10px; background: var(--green-bg); color: var(--green-text); font-size: 14px; font-weight: 600; }
.wst-manage { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 50px; margin-top: 16px; border: 1px solid #C9D4FF; border-radius: 10px; color: var(--indigo); font-size: 17px; font-weight: 600; background: #fff; } .wst-manage .i { font-size: 22px; }
.wst-table { width: 100%; border-collapse: collapse; margin-top: 16px; } .wst-table th { text-align: left; font-size: 14px; font-weight: 600; color: var(--text-2); padding: 10px 12px; border-bottom: 1px solid var(--border); } .wst-table td { padding: 12px; border-bottom: 1px solid var(--border-soft); font-size: 15px; }
.wst-table .btn-outline { height: 36px; padding: 0 14px; color: var(--indigo); font-weight: 600; font-size: 14px; }
.wst-empty { padding: 36px 20px; text-align: center; color: var(--text-2); font-size: 15px; } .wst-empty b { display: block; color: var(--text); font-size: 17px; margin-bottom: 4px; }
@media (max-width: 1200px) { .wst-grid { grid-template-columns: 1fr; } .wst-row { grid-template-columns: 1fr; gap: 6px; } .wst-row > label { padding-top: 0; } .wst-tabs { overflow: auto; max-width: 100%; } }


/* ---------- MM-20 · New project wizard ---------- */
.np-backdrop { position: fixed; inset: 0; background: rgba(23,27,45,0.45); z-index: 60; display: grid; place-items: center; padding: 16px; }
.np-modal { width: 700px; max-width: 100%; max-height: calc(100vh - 32px); background: var(--surface); border-radius: 16px; box-shadow: 0 30px 80px rgba(23,27,45,0.35); display: flex; flex-direction: column; }
.np-modal.wide { width: 1000px; }
.np-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 26px 30px 0; }
.np-head h2 { margin: 0; font-size: 28px; font-weight: 700; } .np-head .sub { font-size: 16px; color: var(--text-2); margin-top: 4px; }
.np-head .close { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); font-size: 22px; } .np-head .close:hover { background: #F3F4F8; }
.np-steps { display: flex; align-items: flex-start; padding: 22px 30px 14px; }
.np-step { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 90px; font-size: 15px; color: var(--muted); }
.np-step .n { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--border); display: grid; place-items: center; font-weight: 700; color: var(--text-2); background: #fff; font-size: 15px; }
.np-step.is-active { color: var(--indigo); font-weight: 600; } .np-step.is-active .n { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.np-step.is-done .n { background: var(--green); border-color: var(--green); color: #fff; } .np-step.is-done { color: var(--text); }
.np-step.is-done .n .i { font-size: 18px; }
.np-line { flex: 1; height: 2px; background: var(--border); margin: 15px 8px 0; } .np-line.done { background: #BFE9D6; }
.np-body { padding: 8px 30px 6px; overflow: auto; }
.np-field { margin-bottom: 16px; } .np-field > label:not(.np-input), .np-field > .lbl { display: block; font-size: 16px; font-weight: 600; margin-bottom: 8px; } .np-field .req { color: #D63A4E; margin-left: 4px; } .np-field .opt { color: var(--muted); font-weight: 400; }
.np-input { height: 46px; border: 1px solid var(--border); border-radius: 10px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--text); background: #fff; display: flex; align-items: center; gap: 10px; width: 100%; }
.np-input:focus, .np-input:focus-within { outline: 0; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.np-input select, .np-input input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--text); min-width: 0; }
.np-input select { appearance: none; padding-right: 26px; } .np-input .chev { margin-left: -26px; pointer-events: none; color: var(--text-2); } .np-input .i { font-size: 20px; color: var(--text-2); }
.np-input .av { width: 30px; height: 30px; border-radius: 50%; background: #DCE3FF; color: var(--indigo); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.np-textarea { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--text); min-height: 76px; resize: vertical; width: 100%; } .np-textarea:focus { outline: 0; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.np-count { text-align: right; font-size: 13px; color: var(--muted); margin-top: 4px; }
.np-err { font-size: 13px; color: #D63A4E; margin-top: 6px; }
.np-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.np-types { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.np-type { display: grid; grid-template-columns: 24px 40px 1fr; gap: 14px; align-items: start; padding: 18px 18px 20px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; text-align: left; background: #fff; }
.np-type .rad { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); margin-top: 2px; display: grid; place-items: center; } .np-type .rad::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: transparent; }
.np-type .i { font-size: 36px; color: var(--indigo); } .np-type b { display: block; font-size: 17px; font-weight: 700; } .np-type span { display: block; font-size: 14px; color: var(--text-2); margin-top: 4px; line-height: 1.45; }
.np-type.is-selected { border-color: var(--indigo); background: var(--indigo-bg-2); box-shadow: 0 0 0 1px var(--indigo) inset; } .np-type.is-selected .rad { border-color: var(--indigo); } .np-type.is-selected .rad::after { background: var(--indigo); }
.np-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 4px; border-radius: 10px; background: #F3F5FB; font-size: 15px; font-weight: 500; }
.np-chip .av { width: 28px; height: 28px; border-radius: 50%; background: var(--indigo); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.np-chip button { width: 22px; height: 22px; display: grid; place-items: center; color: var(--text-2); border-radius: 6px; } .np-chip button:hover { background: #fff; color: #D63A4E; }
.np-info { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--indigo-bg-2); color: var(--text-2); font-size: 14px; } .np-info .i { font-size: 20px; color: var(--indigo); flex: none; }
.np-foot { display: flex; justify-content: space-between; align-items: center; padding: 14px 30px 26px; }
.np-foot .btn-primary { height: 48px; padding: 0 30px; font-size: 17px; } .np-foot .btn-outline { height: 48px; padding: 0 30px; font-size: 17px; color: var(--indigo); } .np-foot .btn-primary:disabled { background: #C9D4FF; cursor: not-allowed; box-shadow: none; }
/* step 3 */
.np-s3 { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; }
.np-s3-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 14px; } .np-s3-head h3 { margin: 0; font-size: 26px; font-weight: 700; } .np-s3-head .sub { font-size: 16px; color: var(--text-2); margin-top: 4px; }
.np-s3-head .tpl { margin-left: auto; display: flex; align-items: flex-end; gap: 12px; } .np-s3-head .tpl .lbl { display: block; font-size: 14px; color: var(--text-2); margin-bottom: 6px; } .np-s3-head .tpl .np-input { width: 320px; }
.np-table { width: 100%; border-collapse: collapse; border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; }
.np-table th { text-align: left; font-size: 14px; font-weight: 600; color: var(--text); background: #F7F8FC; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.np-table td { padding: 8px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; font-size: 15px; }
.np-table .area { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; cursor: pointer; } .np-table .area .tri { font-size: 18px; color: var(--indigo); transition: transform .15s; } .np-table tr.is-open .area .tri { transform: rotate(90deg); } .np-table .area .aic { font-size: 26px; color: #1E2F8F; }
.np-table .np-input { height: 40px; } .np-table .np-input .av { width: 26px; height: 26px; font-size: 11px; }
.np-table .w { display: flex; align-items: center; gap: 12px; } .np-table .w .np-input { width: 80px; background: #F3F5FB; } .np-table .w .np-input input { text-align: center; } .np-table .w .lock { color: var(--text-2); font-size: 18px; cursor: pointer; }
.np-table tr.items td { padding: 0 12px 10px 44px; border-bottom: 1px solid var(--border-soft); } .np-table tr.items[hidden] { display: none; }
.np-table .item { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text-2); padding: 5px 0 5px 14px; border-left: 2px solid var(--border); } .np-table .item .i { font-size: 18px; color: var(--indigo); }
.np-total { font-size: 14px; font-weight: 600; margin-top: 10px; } .np-total.bad { color: #D63A4E; }
.np-tree { border: 1px solid var(--border-soft); border-radius: 12px; padding: 16px; } .np-tree h4 { margin: 0 0 12px; font-size: 18px; font-weight: 700; }
.np-tree .node { display: flex; align-items: center; gap: 10px; font-size: 15px; padding: 5px 0; } .np-tree .node .i { font-size: 20px; color: var(--indigo); } .np-tree .node .tri { font-size: 14px; color: var(--text-2); }
.np-tree .node.l1 { padding-left: 24px; } .np-tree .node.l2 { padding-left: 62px; color: var(--text-2); } .np-tree .node.l2 .i { font-size: 16px; }
.np-tree .np-info { margin-top: 12px; font-size: 13px; }
/* step 4 */
.np-review h3 { margin: 0; font-size: 30px; font-weight: 700; } .np-review .sub { font-size: 16px; color: var(--text-2); margin: 4px 0 14px; }
.np-card { border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; }
.np-card .h { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .np-card .h .i { font-size: 26px; color: var(--indigo); } .np-card .h b { font-size: 19px; font-weight: 700; } .np-card .h a { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--indigo); font-size: 15px; font-weight: 500; }
.np-kv { display: grid; grid-template-columns: 220px 1fr; gap: 6px 16px; padding-left: 38px; font-size: 15px; } .np-kv span { color: var(--text-2); }
.np-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 6px; } .np-tile { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.25; height: 48px; white-space: nowrap; } .np-tile .ic { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font-size: 24px; flex: none; } .np-tile b { display: block; font-size: 15px; margin-top: 2px; }
.np-tile.sales .ic { background: #E7F7F0; color: var(--green-text); } .np-tile.marketing .ic { background: #E9EEFF; color: var(--indigo); } .np-tile.support .ic { background: #FDECEF; color: #D63A4E; } .np-tile.development .ic { background: #E7F7F0; color: #0F766E; } .np-tile.finance .ic { background: #FDF3E3; color: #C77D08; }
.np-team { display: flex; gap: 22px; padding-left: 38px; } .np-team span { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; } .np-team .av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
@media (max-width: 1200px) { .np-s3 { grid-template-columns: 1fr; } .np-types, .np-two { grid-template-columns: 1fr; } .np-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .np-step span { display: none; } }
.np-wcol[hidden] { display: none; }

/* ---------- MM-21 · Launch templates (picker + editor) ---------- */
.tp-modal { width: 1115px; max-width: 100%; height: min(715px, calc(100vh - 32px)); background: var(--surface); border-radius: 16px; box-shadow: 0 30px 80px rgba(23,27,45,0.35); display: flex; flex-direction: column; }
.tp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 26px 26px 0 26px; }
.tp-head h2 { margin: 0; font-size: 28px; font-weight: 700; } .tp-head .sub { font-size: 16px; color: var(--text-2); margin-top: 6px; }
.tp-head .meta { display: flex; align-items: center; gap: 34px; margin-top: 50px; margin-right: 16px; font-size: 15px; color: var(--text); white-space: nowrap; }
.tp-head .meta span { display: inline-flex; align-items: center; gap: 12px; } .tp-head .meta .i { font-size: 24px; color: var(--indigo); }
.tp-head .close { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); font-size: 22px; flex: none; } .tp-head .close:hover { background: #F3F4F8; }
.tp-body { display: grid; grid-template-columns: 455px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); flex: 1; border: 1px solid var(--border-soft); border-radius: 12px; margin: 18px 26px 0; overflow: hidden; min-height: 0; }
.tp-list { padding: 12px 10px 12px 12px; border-right: 1px solid var(--border-soft); overflow: auto; }
.tp-search { display: flex; align-items: center; gap: 12px; height: 42px; border: 1px solid var(--border); border-radius: 10px; padding: 0 14px; background: #fff; margin-bottom: 14px; } .tp-search .i { font-size: 20px; color: var(--text-2); }
.tp-search input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 16px; color: var(--text); min-width: 0; } .tp-search input::placeholder { color: var(--muted); }
.tp-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; text-align: left; width: 100%; background: transparent; }
.tp-row + .tp-row { margin-top: 6px; } .tp-row:hover { background: #F7F8FC; } .tp-row.is-selected { background: var(--indigo-bg-2); border-color: #C9D4FF; }
.tp-row .ic { font-size: 30px; color: var(--indigo); } .tp-row b { display: block; font-size: 17px; font-weight: 700; } .tp-row span { display: block; font-size: 14px; color: var(--text-2); margin-top: 2px; }
.tp-row .chev { font-size: 18px; color: var(--text-2); }
.tp-sep { border-top: 1px solid var(--border-soft); margin: 14px 8px 4px; }
.tp-mine { display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; gap: 12px; align-items: center; padding: 12px 14px; width: 100%; background: transparent; text-align: left; cursor: pointer; border-radius: 10px; }
.tp-mine .ic { font-size: 30px; color: var(--indigo); } .tp-mine b { font-size: 17px; font-weight: 700; } .tp-mine .chev { font-size: 18px; color: var(--text-2); transition: transform .15s; } .tp-mine[aria-expanded="true"] .chev { transform: rotate(180deg); }
.tp-mine-body { padding: 0 0 6px; } .tp-mine-body .empty { font-size: 14px; color: var(--muted); padding: 4px 14px 8px; }
.tp-empty { padding: 30px 14px; text-align: center; color: var(--text-2); font-size: 15px; }
.tp-preview { padding: 18px 24px 8px; overflow: auto; }
.tp-preview .ph { display: flex; align-items: center; gap: 14px; } .tp-preview .ph h3 { margin: 0; font-size: 24px; font-weight: 700; }
.tp-badge { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 14px; background: var(--indigo-bg-2); color: var(--indigo); font-size: 14px; font-weight: 500; }
.tp-preview .desc { font-size: 15px; color: var(--text-2); margin: 8px 0 12px; line-height: 1.45; }
.tp-area { border-top: 1px solid var(--border-soft); } .tp-area:first-of-type { border-top: 0; }
.tp-area .ah { display: grid; grid-template-columns: 44px minmax(0, 1fr) 24px; gap: 22px; align-items: center; padding: 10px 0; width: 100%; background: transparent; text-align: left; cursor: pointer; }
.tp-area .ah .tile { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font-size: 26px; } .tp-area .ah b { font-size: 17px; font-weight: 700; } .tp-area .ah .chev { font-size: 20px; color: var(--indigo); transition: transform .15s; }
.tp-area.is-open .ah .chev { transform: rotate(180deg); }  /* i-chev-down → points up when open */ .tp-area.is-open .ah { padding-bottom: 6px; }
.tp-items { padding: 0 0 12px 66px; } .tp-items[hidden] { display: none; }
.tp-items div { display: flex; align-items: center; gap: 12px; font-size: 15px; padding: 5px 0; } .tp-items .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.tp-items .dot.launch_condition { background: var(--amber); } .tp-items .dot.task { background: var(--indigo); } .tp-items .dot.milestone { background: #7C4DFF; }
.tp-items .none { color: var(--muted); font-size: 14px; }
.tile.sales { background: #FDF3E3; color: #C77D08; } .tile.marketing { background: #E9EEFF; color: var(--indigo); } .tile.support { background: #FDECEF; color: #D63A4E; } .tile.development { background: #E7F7F0; color: #0F766E; } .tile.finance { background: #F1E9FF; color: #6D3BE0; }
.tp-foot { display: flex; justify-content: flex-end; gap: 16px; padding: 22px 26px 24px; }
.tp-foot .btn-primary, .tp-foot .btn-outline { height: 48px; padding: 0 30px; font-size: 17px; } .tp-foot .btn-outline { color: var(--text); } .tp-foot .btn-primary:disabled { background: #C9D4FF; cursor: not-allowed; box-shadow: none; }

/* editor (MM-21b) */
.te-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 10px; }
.te-back { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text-2); margin-bottom: 8px; } .te-back .i { font-size: 18px; }
.te-head h2 { margin: 0; font-size: 28px; font-weight: 700; display: flex; align-items: center; gap: 14px; }
.te-default { display: inline-flex; align-items: center; height: 28px; padding: 0 14px; border-radius: 14px; background: var(--green-bg); color: var(--green-text); font-size: 14px; font-weight: 500; }
.te-head .sub { font-size: 16px; color: var(--text-2); margin-top: 6px; }
.te-actions { display: flex; gap: 14px; margin-top: 4px; } .te-actions .btn-outline { height: 44px; padding: 0 22px; font-size: 16px; color: var(--indigo); font-weight: 600; gap: 12px; } .te-actions .btn-outline .i { font-size: 20px; }
.te-actions .btn-primary { height: 44px; padding: 0 22px; font-size: 16px; gap: 12px; } .te-actions .btn-primary .i { font-size: 20px; } .te-actions .btn-primary:disabled { background: #C9D4FF; cursor: not-allowed; box-shadow: none; }
.te-note { display: flex; align-items: center; gap: 14px; padding: 11px 18px; border: 1px solid #C9D4FF; border-radius: 12px; background: var(--indigo-bg-2); font-size: 15px; color: var(--text); margin-bottom: 16px; }
.te-note .i { font-size: 24px; color: var(--indigo); flex: none; } .te-note .x { margin-left: auto; width: 28px; height: 28px; display: grid; place-items: center; color: var(--text-2); border-radius: 6px; font-size: 20px; } .te-note .x:hover { background: #fff; }
.te-grid { display: grid; grid-template-columns: 532px minmax(0, 1fr); gap: 16px; align-items: start; }
.te-structure { padding: 14px 0 8px; } .te-structure .sh { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 12px; border-bottom: 1px solid var(--border-soft); }
.te-structure .sh h3 { margin: 0; font-size: 20px; font-weight: 700; } .te-structure .sh .btn-outline { height: 38px; padding: 0 16px; font-size: 15px; color: var(--text); gap: 10px; } .te-structure .sh .btn-outline .i { color: var(--indigo); }
.te-row { display: grid; grid-template-columns: 24px 40px minmax(0, 1fr) 20px; gap: 14px; align-items: center; padding: 8px 16px; min-height: 57px; cursor: pointer; }
.te-row:hover { background: #F7F8FC; } .te-row.is-selected { background: var(--indigo-bg-2); }
.te-row .tri { font-size: 18px; color: var(--indigo); transition: transform .15s; } .te-row.is-open .tri { transform: rotate(90deg); }
.te-tile { width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-size: 22px; flex: none; }
.te-tile.sales { background: #12B981; } .te-tile.marketing { background: #3B5BFD; } .te-tile.support { background: #F0546A; } .te-tile.development { background: #7C4DFF; } .te-tile.finance { background: #F59E0B; }
.te-row b { font-size: 17px; font-weight: 600; } .te-row .cnt { margin-left: 10px; font-size: 13px; color: var(--muted); font-weight: 500; } .te-row .arrow { font-size: 18px; color: var(--indigo); visibility: hidden; } .te-row.is-selected .arrow { visibility: visible; }
.te-sub { padding: 2px 16px 12px 108px; } .te-sub[hidden] { display: none; } .te-sub div { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); padding: 4px 0; } .te-sub div .i { font-size: 16px; flex: none; } .te-sub div .tag { margin: 0; } .te-sub .none { color: var(--muted); }
.te-area { padding: 18px 18px 16px; }
.te-area .ah { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; } .te-area .ah .te-tile { width: 48px; height: 48px; font-size: 26px; }
.te-area .ah div > b { display: block; font-size: 21px; font-weight: 700; } .te-area .ah div > span { display: block; font-size: 15px; color: var(--text-2); margin-top: 2px; }
.te-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-bottom: 14px; }
.te-field > label:not(.te-input), .te-field .lbl { display: block; font-size: 15px; font-weight: 600; margin-bottom: 8px; } .te-field .req { color: #D63A4E; margin-left: 3px; }
.te-input { height: 44px; border: 1px solid var(--border); border-radius: 10px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--text); background: #fff; display: flex; align-items: center; gap: 10px; width: 100%; }
.te-input:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); } .te-input input, .te-input select { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--text); min-width: 0; }
.te-input select { appearance: none; padding-right: 26px; } .te-input .chev { margin-left: -26px; pointer-events: none; color: var(--text-2); } .te-input.ro { background: #F7F8FC; color: var(--text-2); }
.te-num { display: inline-flex; } .te-num .te-input { width: 210px; border-radius: 10px 0 0 10px; } .te-num .unit { height: 44px; padding: 0 12px; border: 1px solid var(--border); border-left: 0; border-radius: 0 10px 10px 0; background: #F3F5FB; color: var(--text-2); display: grid; place-items: center; font-size: 15px; }
.te-field .te-hint { font-size: 13px; color: var(--muted); margin-top: 6px; } .te-field .err { font-size: 13px; color: #D63A4E; margin-top: 6px; }
.te-items-h h4 { margin: 0; font-size: 18px; font-weight: 700; } .te-items-h .sub { font-size: 14px; color: var(--text-2); margin: 3px 0 10px; }
.te-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 14px; align-items: center; height: 40px; padding: 0 12px; border: 1px solid var(--border-soft); border-radius: 8px; margin-bottom: 6px; font-size: 15px; background: #fff; }
.te-item .grip { color: var(--text-2); font-size: 18px; cursor: grab; } .te-item.is-dragging { opacity: .5; } .te-item .tag { margin: 0 0 0 10px; }
.te-item .ops { display: flex; gap: 6px; } .te-item .ops button { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; color: var(--indigo); font-size: 18px; } .te-item .ops button.del { color: #E0344E; } .te-item .ops button:hover { background: #F3F4F8; }
.te-item .tico { font-size: 16px; margin-right: 8px; vertical-align: -3px; }
.te-add { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 40px; border: 1px dashed var(--border); border-radius: 8px; background: #F7F8FC; color: var(--text); font-size: 15px; font-weight: 500; cursor: pointer; } .te-add .i { color: var(--indigo); font-size: 18px; }
.te-form { display: grid; grid-template-columns: minmax(0, 1fr) 190px auto auto auto; gap: 10px; align-items: center; padding: 8px; border: 1px solid #C9D4FF; border-radius: 8px; background: var(--indigo-bg-2); margin-bottom: 8px; }
.te-form .te-input { height: 38px; font-size: 15px; } .te-form label.chk { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; } .te-form .btn-primary { height: 38px; padding: 0 16px; font-size: 14px; } .te-form .btn-outline { height: 38px; padding: 0 14px; font-size: 14px; }
.te-empty { font-size: 14px; color: var(--muted); padding: 6px 0 10px; }
.wst-head .btn-primary { height: 50px; padding: 0 28px; font-size: 18px; gap: 12px; } .wst-head .btn-primary .i { font-size: 22px; }
@media (max-width: 1200px) { .tp-body { grid-template-columns: 1fr; } .tp-list { border-right: 0; border-bottom: 1px solid var(--border-soft); max-height: 40vh; } .te-grid { grid-template-columns: 1fr; } .te-fields { grid-template-columns: 1fr; } .tp-head .meta { display: none; } }

/* MM-21 additions for the live app: list table, full-width templates tab */
.wst-grid-full { grid-template-columns: minmax(0, 1fr); }
.te-list .te-list-name { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; color: var(--text); } .te-list .te-list-name .i { font-size: 22px; color: var(--indigo); }
.te-list .te-list-desc { font-size: 13px; color: var(--text-2); margin-top: 3px; } .te-list td { vertical-align: middle; }
.te-list-ops { white-space: nowrap; text-align: right; } .te-list-ops .btn-outline { height: 34px; padding: 0 12px; font-size: 14px; color: var(--indigo); font-weight: 600; margin-left: 6px; } .te-list-ops .btn-outline.danger { color: #D63A4E; }
.tp-w { margin-left: 10px; font-size: 13px; font-weight: 500; color: var(--muted); }
#tp-host .np-backdrop { z-index: 70; }

/* ---------- MM-22 · Create / edit item dialog ---------- */
.it-modal { width: 655px; max-width: 100%; max-height: calc(100vh - 32px); background: var(--surface); border-radius: 16px; box-shadow: 0 30px 80px rgba(23,27,45,0.35); display: flex; flex-direction: column; }
.it-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 26px 0; } .it-head h2 { margin: 0; font-size: 28px; font-weight: 700; }
.it-head .close { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); font-size: 22px; } .it-head .close:hover { background: #F3F4F8; }
.it-types { display: flex; gap: 6px; margin: 18px 26px 0; border: 1px solid var(--border); border-radius: 10px; padding: 4px; }
.it-type { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border-radius: 8px; font-size: 14px; white-space: nowrap; padding: 0 6px; font-weight: 600; color: var(--text); background: transparent; cursor: pointer; }
.it-type .i { font-size: 20px; color: var(--indigo); } .it-type:hover { background: #F3F5FB; } .it-type[aria-checked="true"] { background: var(--indigo); color: #fff; } .it-type[aria-checked="true"] .i { color: #fff; }
.it-type[hidden] { display: none; } .it-types.is-locked .it-type:not([aria-checked="true"]) { opacity: .45; cursor: default; }
.it-body { padding: 16px 26px 4px; overflow: auto; }
.it-field { margin-bottom: 14px; } .it-field > label:not(.it-input), .it-field > .lbl { display: block; font-size: 15px; font-weight: 600; margin-bottom: 7px; } .it-field .req { color: #D63A4E; margin-left: 3px; } .it-field .opt { color: var(--muted); font-weight: 400; }
.it-input { height: 44px; border: 1px solid var(--border); border-radius: 10px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--text); background: #fff; display: flex; align-items: center; gap: 10px; width: 100%; }
.it-input:focus, .it-input:focus-within { outline: 0; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.it-input select, .it-input input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--text); min-width: 0; }
.it-input select { appearance: none; padding-right: 26px; } .it-input .chev { margin-left: -26px; pointer-events: none; color: var(--text-2); } .it-input .i { font-size: 20px; color: var(--text-2); }
.it-input.is-locked { background: #F7F8FC; } .it-input.is-locked select { color: var(--text-2); }
.it-input .av { width: 30px; height: 30px; border-radius: 50%; background: var(--indigo); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; flex: none; }
.it-input .v-avatar { width: 30px; height: 30px; border-radius: 8px; font-size: 12px; }
.it-input .aic { font-size: 22px; color: #1E2F8F; }
.it-input .clear { width: 26px; height: 26px; display: grid; place-items: center; color: var(--text-2); border-radius: 6px; margin-left: auto; } .it-input .clear:hover { background: #F3F4F8; color: #D63A4E; }
.it-inh { margin-left: auto; margin-right: 30px; padding: 3px 10px; border-radius: 10px; background: #F3F5FB; color: var(--text-2); font-size: 13px; font-weight: 500; white-space: nowrap; }
.it-path { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .it-path > * { min-width: 0; }
.it-parent-row { margin-top: 10px; } .it-parent-row .it-sub { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 5px; }
.it-parent-row .it-input select { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .it-parent-row .it-input { position: relative; }
.it-pathtext { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; } .it-pathtext .sep { color: var(--muted); }
.it-textarea { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--text); min-height: 84px; resize: vertical; width: 100%; line-height: 1.5; } .it-textarea:focus { outline: 0; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.it-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.it-err { font-size: 13px; color: #D63A4E; margin-top: 6px; } .it-hint { font-size: 13px; color: var(--muted); margin-top: 6px; }
.it-flags { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 8px 20px; padding-top: 14px; border-top: 1px solid var(--border-soft); margin-bottom: 14px; align-items: start; }
.it-flag { display: flex; align-items: center; gap: 12px; height: 44px; font-size: 15px; font-weight: 600; white-space: nowrap; } .it-flag .info { color: var(--indigo); font-size: 18px; cursor: help; flex: none; } .it-flag .toggle { margin-left: auto; margin-right: 40px; flex: none; }
.it-flag.single { border-top: 1px solid var(--border-soft); margin-top: 2px; padding-top: 8px; height: auto; } .it-flag.single .toggle { margin-right: 0; }
.it-flag-hint { font-size: 13px; color: var(--text-2); margin: -6px 0 10px; }
.it-info { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--indigo-bg-2); color: var(--text-2); font-size: 14px; margin-bottom: 14px; } .it-info .i { font-size: 20px; color: var(--indigo); flex: none; }
.it-num { display: inline-flex; } .it-num .it-input { width: 124px; }
.it-chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 6px 0 12px; border-radius: 9px; background: var(--indigo-bg-2); color: var(--text); font-size: 14px; font-weight: 500; }
.it-chip button { width: 22px; height: 22px; display: grid; place-items: center; color: var(--text-2); border-radius: 6px; } .it-chip button:hover { background: #fff; color: #D63A4E; }
.it-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 26px 22px; border-top: 1px solid var(--border-soft); }
.it-foot .btn-primary { height: 46px; padding: 0 24px; font-size: 16px; } .it-foot .btn-outline { height: 46px; padding: 0 22px; font-size: 16px; color: var(--text); } .it-foot .btn-outline.indigo { color: var(--indigo); font-weight: 600; } .it-foot .right { display: flex; gap: 12px; } .it-foot .btn-primary:disabled { background: #C9D4FF; cursor: not-allowed; box-shadow: none; }
@media (max-width: 700px) { .it-two, .it-path, .it-flags { grid-template-columns: 1fr; } .it-type span { display: none; } }

/* MM-22 additions for the live app */
.it-pdot { width: 12px; height: 12px; border-radius: 50%; background: #F5A524; flex: none; }
#item-form-host .np-backdrop { z-index: 70; }

/* ---------- MM-23 · Quick add + row menu ---------- */
td.c-menu { position: relative; } .c-menu .cellops { display: inline-flex; align-items: center; justify-content: flex-end; }
.qa-btn { position: absolute; right: 48px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: #fff; color: var(--indigo); display: inline-grid; place-items: center; font-size: 18px; visibility: hidden; }
tr.row:hover .qa-btn, tr.row:focus-within .qa-btn, .qa-btn.is-open, tr.row.is-selected .qa-btn { visibility: visible; } .qa-btn:hover, .qa-btn.is-open { background: var(--indigo-bg-2); border-color: #C9D4FF; }
.qa-pop { position: absolute; width: 350px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 44px rgba(23,27,45,0.16); padding: 14px 10px 8px; z-index: 40; }
.qa-pop h4 { margin: 0 0 8px; padding: 0 10px; font-size: 17px; font-weight: 700; } .qa-pop h4 span { font-weight: 700; }
.qa-opt { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: center; width: 100%; padding: 10px; border-radius: 10px; text-align: left; background: transparent; cursor: pointer; }
.qa-opt:hover, .qa-opt:focus-visible { background: #F3F5FB; outline: 0; } .qa-opt .i { font-size: 28px; color: var(--indigo); } .qa-opt b { display: block; font-size: 16px; font-weight: 700; } .qa-opt span { display: block; font-size: 13px; color: var(--text-2); margin-top: 2px; }
.qa-opt[hidden] { display: none; }
.split { display: inline-flex; } .split .btn-primary { border-radius: 10px 0 0 10px; } .split .split-more { height: 46px; width: 44px; border-radius: 0 10px 10px 0; background: var(--indigo); color: #fff; display: grid; place-items: center; font-size: 20px; border-left: 1px solid rgba(255,255,255,.35); } .split .split-more:hover { background: var(--indigo-hover); }
.rm-menu { position: absolute; width: 250px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 40px rgba(23,27,45,0.16); padding: 6px; z-index: 40; }
.rm-item { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; height: 36px; padding: 0 10px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--text); text-align: left; background: transparent; cursor: pointer; }
.rm-item:hover, .rm-item:focus-visible, .rm-item.is-active { background: #F3F5FB; outline: 0; } .rm-item .i { font-size: 20px; color: var(--indigo); } .rm-item.danger, .rm-item.danger .i { color: #E0344E; }
.rm-item kbd { font: 500 12px/1 Inter, system-ui, sans-serif; color: var(--muted); letter-spacing: .5px; } .rm-item[hidden] { display: none; }
.rm-sep { height: 1px; background: var(--border-soft); margin: 6px 4px; }
.tree tr.row.is-selected td { background: #EEF3FF; }
@media (max-width: 700px) { .qa-btn { visibility: visible; } .qa-pop, .rm-menu { width: calc(100vw - 32px); } .rm-item kbd { display: none; } }

.rm-menu, .qa-pop { z-index: 45; }

/* ---------- MM-24 · Move item ---------- */
.mv-modal { width: 530px; max-width: 100%; max-height: calc(100vh - 32px); background: var(--surface); border-radius: 16px; box-shadow: 0 30px 80px rgba(23,27,45,0.35); display: flex; flex-direction: column; }
.mv-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 24px 0; } .mv-head h2 { margin: 0; font-size: 28px; font-weight: 700; }
.mv-head .sub { font-size: 16px; color: var(--text-2); margin-top: 6px; line-height: 1.4; } .mv-head .sub b { color: var(--text); font-weight: 600; }
.mv-head .close { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); font-size: 22px; flex: none; } .mv-head .close:hover { background: #F3F4F8; }
.mv-search { display: flex; align-items: center; gap: 12px; height: 42px; margin: 16px 24px 12px; border: 1px solid var(--border); border-radius: 10px; padding: 0 14px; } .mv-search .i { font-size: 20px; color: var(--text-2); }
.mv-search input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 16px; color: var(--text); min-width: 0; } .mv-search input::placeholder { color: var(--muted); }
.mv-tree { margin: 0 24px; border: 1px solid var(--border); border-radius: 12px; padding: 6px; max-height: 430px; overflow: auto; }
.mv-row { display: grid; grid-template-columns: 16px 26px minmax(0, 1fr) 24px; gap: 10px; align-items: center; height: 38px; padding: 0 10px; border-radius: 8px; font-size: 15px; color: var(--text); cursor: pointer; }
.mv-row:hover { background: #F7F8FC; } .mv-row.is-selected { background: var(--indigo-bg-2); } .mv-row.is-disabled { color: var(--muted); cursor: not-allowed; } .mv-row.is-disabled .ic { color: var(--muted); }
.mv-row[hidden] { display: none; }
.mv-row .tri { width: 16px; height: 16px; display: grid; place-items: center; color: var(--indigo); font-size: 16px; transition: transform .15s; } .mv-row.is-open .tri { transform: rotate(90deg); } .mv-row .tri.none { visibility: hidden; }
.mv-row .ic { font-size: 22px; color: var(--indigo); } .mv-row .ic.folder { color: var(--indigo); } .mv-row .ic.doc { color: var(--indigo); }
.mv-row.project { font-size: 17px; font-weight: 700; } .mv-row.project .v-avatar { width: 26px; height: 26px; border-radius: 7px; font-size: 11px; }
.mv-row.area { font-size: 16px; font-weight: 600; } .mv-row.area .ic.sales { color: var(--green-text); } .mv-row.area .ic.marketing { color: var(--indigo); } .mv-row.area .ic.support { color: #D63A4E; } .mv-row.area .ic.development { color: #0F766E; } .mv-row.area .ic.finance { color: #6D3BE0; }
.mv-row .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #C9CFDD; display: grid; place-items: center; justify-self: end; } .mv-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: transparent; }
.mv-row.is-selected .mv-radio { border-color: var(--indigo); } .mv-row.is-selected .mv-radio::after { background: var(--indigo); }
.mv-row .ban { font-size: 20px; color: var(--muted); justify-self: end; }
.mv-empty { padding: 26px 12px; text-align: center; font-size: 14px; color: var(--text-2); }
.mv-loc { display: flex; gap: 12px; align-items: flex-start; margin: 16px 24px 0; padding: 14px 16px; border-radius: 12px; background: #E7F7F0; border: 1px solid #BFE9D6; }
.mv-loc .i { font-size: 22px; color: var(--green-text); flex: none; margin-top: 1px; } .mv-loc b { font-size: 15px; font-weight: 600; } .mv-loc .path { font-size: 15px; font-weight: 600; color: var(--text); display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: 6px; }
.mv-loc .path .sep { color: var(--muted); font-weight: 400; } .mv-loc .note { font-size: 13px; color: var(--text-2); margin-top: 4px; }
.mv-loc.is-empty { background: #F7F8FC; border-color: var(--border-soft); } .mv-loc.is-empty .i { color: var(--text-2); }
.mv-foot { display: flex; justify-content: flex-end; gap: 14px; padding: 18px 24px 22px; }
.mv-foot .btn-primary, .mv-foot .btn-outline { height: 46px; padding: 0 24px; font-size: 16px; } .mv-foot .btn-outline { color: var(--text); } .mv-foot .btn-primary:disabled { background: #C9D4FF; cursor: not-allowed; box-shadow: none; }
@media (max-width: 700px) { .mv-tree { max-height: 50vh; } }

#move-host .np-backdrop { z-index: 70; }

/* ---------- MM-25 · Dependencies (panel Relationships tab) ---------- */
.dp-card { border: 1px solid var(--border); border-radius: 12px; padding: 16px 16px 12px; margin-top: 14px; }
.dp-head { display: flex; align-items: flex-start; gap: 10px; } .dp-head h3 { margin: 0; font-size: 20px; font-weight: 700; display: inline-flex; align-items: center; gap: 10px; }
.dp-head .info { font-size: 20px; color: var(--indigo); cursor: help; margin-top: 4px; } .dp-head .sub { font-size: 14px; color: var(--text-2); margin-top: 4px; }
.dp-head .btn-outline { margin-left: auto; height: 40px; padding: 0 14px; font-size: 15px; color: var(--indigo); font-weight: 600; gap: 8px; white-space: nowrap; flex: none; }
.dp-form { margin-top: 14px; border: 1px solid #C9D4FF; border-radius: 12px; padding: 14px 16px 16px; background: #fff; box-shadow: 0 8px 24px rgba(23,27,45,0.06); }
.dp-form .fh { display: flex; align-items: center; justify-content: space-between; } .dp-form .fh h4 { margin: 0; font-size: 17px; font-weight: 700; }
.dp-form .fh .close { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); font-size: 20px; } .dp-form .fh .close:hover { background: #F3F4F8; }
.dp-form label.lbl, .dp-form .lbl { display: block; font-size: 14px; font-weight: 600; margin: 12px 0 6px; }
.dp-search { display: flex; align-items: center; gap: 10px; height: 42px; border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; } .dp-search .i { font-size: 18px; color: var(--text-2); }
.dp-search input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 15px; color: var(--text); min-width: 0; } .dp-search .clear { width: 26px; height: 26px; display: grid; place-items: center; color: var(--text-2); border-radius: 6px; } .dp-search .clear:hover { background: #F3F4F8; }
.dp-search:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.dp-cands { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.dp-cand { display: grid; grid-template-columns: 28px minmax(0, 1fr) 52px auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; text-align: left; background: transparent; cursor: pointer; }
.dp-cand:hover { background: #F7F8FC; } .dp-cand.is-picked { background: var(--indigo-bg-2); }
.dp-cand b, .dp-row b { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dp-cand .path, .dp-row .path { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; color: var(--muted); margin-top: 2px; } .dp-cand .path .sep, .dp-row .path .sep { color: #C9CFDD; }
.dp-cand .pct, .dp-row .pct { font-size: 14px; font-weight: 600; text-align: right; } .dp-cand .who, .dp-row .who { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); white-space: nowrap; }
.dp-cand .who .mini-avatar, .dp-row .who .mini-avatar { width: 24px; height: 24px; font-size: 10px; }
.dp-ring { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #C9D4FF; border-top-color: var(--indigo); border-right-color: var(--indigo); box-sizing: border-box; }
.dp-ring.done { border-color: var(--green); background: var(--green); display: grid; place-items: center; color: #fff; font-size: 14px; } .dp-ring.planned { border-color: #C9CFDD; }
.dp-select { display: flex; align-items: center; height: 44px; border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; } .dp-select select { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: var(--text); appearance: none; } .dp-select .chev { color: var(--text-2); font-size: 18px; margin-left: -18px; pointer-events: none; }
.dp-input { height: 42px; border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 15px; color: var(--text); width: 100%; } .dp-input:focus { outline: 0; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.dp-form .ff { display: flex; justify-content: flex-end; gap: 12px; margin-top: 16px; } .dp-form .ff .btn-primary, .dp-form .ff .btn-outline { height: 44px; padding: 0 20px; font-size: 15px; } .dp-form .ff .btn-outline { color: var(--text); } .dp-form .ff .btn-primary:disabled { background: #C9D4FF; cursor: not-allowed; box-shadow: none; }
.dp-err { font-size: 13px; color: #D63A4E; margin-top: 8px; }
.dp-list { margin-top: 12px; border-top: 1px solid var(--border-soft); }
.dp-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 52px auto minmax(120px, 170px) 32px; gap: 12px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--border-soft); }
.dp-row .kind { font-size: 13px; color: var(--text-2); border-left: 1px solid var(--border-soft); padding-left: 12px; line-height: 1.35; } .dp-row .del { width: 32px; height: 32px; display: grid; place-items: center; color: #E0344E; border-radius: 8px; font-size: 18px; } .dp-row .del:hover { background: #FDECEF; }
.dp-row.related { grid-template-columns: 28px minmax(0, 1fr) 52px auto 32px; }
.dp-empty { font-size: 14px; color: var(--muted); padding: 12px 4px 4px; }
.dp-dependants { font-size: 13px; color: var(--text-2); margin-top: 10px; } .dp-dependants a { color: var(--indigo); font-weight: 500; }
@media (max-width: 640px) { .dp-row, .dp-row.related { grid-template-columns: 28px minmax(0, 1fr) 32px; } .dp-row .pct, .dp-row .who, .dp-row .kind { grid-column: 2; } .dp-form .ff { flex-direction: column; } }

/* MM-25 additions for the live app: remove buttons on the MM-07 / MM-13 cards, card-link as a button */
.dp-del { width: 32px; height: 32px; display: grid; place-items: center; color: #E0344E; border-radius: 8px; font-size: 18px; background: transparent; flex: none; } .dp-del:hover { background: #FDECEF; }
.rel-row .rel-del { margin-left: auto; } .rel-row > div { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; } .rel-row > div .rel-note { flex-basis: 100%; }
button.card-link { background: transparent; cursor: pointer; }
.dp-form-host:empty { display: none; } .dp-form-host { padding: 0 0 8px; }
.dp-note { color: var(--text-2); font-style: italic; }

/* ---------- MM-26 · Date editor (panel date sheet + calendar) ---------- */
.dt-top { display: flex; align-items: flex-start; gap: 12px; padding: 22px 20px 0 28px; }
.dt-top .sp-crumbs { padding: 0; flex: 1; min-width: 0; font-size: 13px; line-height: 20px; margin-top: 8px; }
.dt-top .sp-crumbs .sep { color: var(--muted-2); }
.sp-dates .sp-title { padding: 6px 28px 0; flex: none; }
.dt-meta { display: flex; align-items: center; gap: 12px; padding: 12px 28px 0; }
.dt-meta .donut { width: 32px; height: 32px; }
.dt-meta .pct { font-size: 16px; font-weight: 600; margin-right: 4px; }
.dt-meta .wpill { padding: 6px 14px; font-size: 14px; }
.dt-body { flex: 1; overflow: auto; padding: 20px 24px 16px; }
.dt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.dt-field.span { grid-column: 1 / -1; }
.dt-field label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.dt-static { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 16px; font-weight: 500; background: var(--surface); }
.dt-static .mini-avatar { width: 30px; height: 30px; font-size: 12px; }
.dt-date { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 47px; padding: 0 14px 0 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 16px; font-weight: 500; color: var(--text); text-align: left; }
.dt-date .i { font-size: 20px; color: var(--text-2); }
.dt-date:hover { background: #FAFBFD; }
.dt-date.is-active { border: 2px solid var(--indigo); padding: 0 13px 0 15px; box-shadow: 0 0 0 3px rgba(59,91,253,.10); }
.dt-date .lbl.none { color: var(--muted); }
.dt-cal-slot { display: flex; justify-content: flex-end; margin-top: 6px; }
.dt-cal-slot.start { justify-content: flex-start; }
.dt-cal { width: 400px; max-width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(23,27,45,.10); padding: 12px 14px 10px; }
.dt-nav { display: flex; align-items: center; justify-content: space-between; height: 36px; }
.dt-nav b { font-size: 17px; font-weight: 600; }
.dt-nav button { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; font-size: 20px; color: var(--text-2); background: transparent; }
.dt-nav button:hover { background: var(--bg); color: var(--text); }
.dt-wd { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 8px; }
.dt-wd span { text-align: center; font-size: 13px; font-weight: 500; color: var(--muted); height: 28px; line-height: 28px; }
.dt-days { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 6px; }
.dt-day { height: 36px; width: 36px; margin: 0 auto; border-radius: 8px; display: grid; place-items: center; font-size: 15px; font-weight: 500; color: var(--text); background: transparent; }
.dt-day:hover { background: var(--bg); }
.dt-day.out, .dt-day.off { color: var(--muted-2); font-weight: 400; }
.dt-day.today { box-shadow: inset 0 0 0 2px var(--indigo); color: var(--indigo); font-weight: 600; }
.dt-day.picked { background: var(--indigo); color: #fff; font-weight: 600; box-shadow: none; }
.dt-day:disabled { color: #D3D7E2; cursor: default; background: transparent; }
.dt-cfoot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 14px; }
.dt-cfoot button { background: transparent; font-size: 14px; color: var(--text-2); padding: 6px 2px; }
.dt-cfoot button:hover { color: var(--text); }
.dt-cfoot button.clear { color: var(--indigo); font-weight: 600; }
.dt-preview { margin-top: 12px; border: 1px solid var(--border); border-radius: 12px; background: #F7F8FB; padding: 14px 16px; }
.dt-preview .cap { font-size: 14px; color: var(--muted); }
.dt-preview .big { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.dt-preview .big .i { font-size: 22px; color: var(--text-2); }
.dt-preview .big b { font-size: 22px; font-weight: 700; }
.dt-preview .big .muted { font-size: 14px; color: var(--muted); }
.dt-impact { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 14px; }
.dt-impact .row { display: flex; justify-content: space-between; padding: 6px 0; font-weight: 500; }
.dt-impact .row .when { color: var(--muted); font-weight: 400; }
.dt-impact label.opt { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-weight: 500; cursor: pointer; }
.dt-impact .note { color: var(--muted); font-size: 13px; margin-top: 4px; }
.dt-err { color: var(--red); font-size: 13px; margin-top: 8px; }
.dt-foot { display: flex; gap: 18px; padding: 16px 24px; border-top: 1px solid var(--border); background: var(--surface); }
.dt-foot .btn-outline, .dt-foot .btn-primary { flex: 1; height: 47px; justify-content: center; font-size: 17px; font-weight: 600; border-radius: 10px; }
.dt-foot .btn-primary:disabled { opacity: .55; cursor: default; }
.dt-pop { z-index: 200; } .dt-pop .dt-cal { width: 320px; padding: 10px 12px 8px; } .dt-pop .dt-day { height: 34px; width: 34px; }
input[type="date"].dt-enhanced::-webkit-calendar-picker-indicator { display: none; }
@media (max-width: 640px) { .dt-grid { grid-template-columns: 1fr; } .dt-cal { width: 100%; } .dt-day { width: 40px; height: 40px; } .dt-foot { flex-direction: column-reverse; } }

/* ---------- MM-27 · Readiness and conditions (weights section + exception dialog) ---------- */
.rd-top { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; margin-top: 14px; }
.rd-card { border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface); padding: 16px 18px; }
.rd-card h2 { margin: 0; font-size: 22px; font-weight: 700; } .rd-card .sub { font-size: 15px; color: var(--text-2); margin-top: 4px; }
.rd-table { width: 100%; border-collapse: collapse; margin-top: 14px; border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; }
.rd-table th { text-align: left; font-size: 14px; font-weight: 600; background: #F7F8FC; padding: 9px 14px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border-soft); }
.rd-table td { padding: 6px 14px; border-bottom: 1px solid var(--border-soft); border-right: 1px solid var(--border-soft); font-size: 15px; height: 46px; }
.rd-table th:last-child, .rd-table td:last-child { border-right: 0; text-align: center; } .rd-table tr:last-child td { border-bottom: 0; }
.rd-table th:nth-child(3), .rd-table td:nth-child(3) { text-align: center; }
.rd-table .area { display: flex; align-items: center; gap: 14px; } .rd-table .area .i { font-size: 24px; color: #1E2F8F; }
.rd-table .rdg { display: flex; align-items: center; gap: 12px; } .rd-table .rdg .bar { width: 96px; } .rd-table .rdg b { font-weight: 600; min-width: 44px; text-align: right; }
.rd-table .na { color: var(--muted); font-style: italic; }
.rd-table .bar.t-green > span { background: var(--green); } .rd-table .bar.t-indigo > span { background: var(--indigo); } .rd-table .bar.t-amber > span { background: var(--amber); } .rd-table .bar.t-red > span { background: var(--red); }
#rd-area-table tbody tr[data-area] { cursor: pointer; } #rd-area-table tbody tr[data-area]:hover td { background: #FAFBFD; } #rd-area-table tbody tr.is-selected td { background: var(--indigo-bg-2); } #rd-area-table tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--indigo); }
.rd-w { display: inline-flex; align-items: center; gap: 8px; } .rd-w input { width: 74px; height: 34px; border: 1px solid var(--border); border-radius: 8px; text-align: center; font: inherit; font-size: 15px; font-weight: 600; color: var(--text); }
.rd-w input:focus { outline: 0; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); } .rd-w .unit { color: var(--text-2); font-size: 14px; }
.rd-table tr.total td { background: #F7F8FC; font-weight: 700; } .rd-table tr.total td.bad { color: #D63A4E; }
.rd-contrib { font-weight: 600; }
.rd-under { display: flex; align-items: center; gap: 18px; margin-top: 12px; font-size: 14px; } .rd-under button { background: none; border: 0; padding: 0; color: var(--indigo); font: inherit; font-size: 14px; cursor: pointer; }
.rd-side { text-align: center; padding: 22px 18px 18px; position: sticky; top: 16px; }
.rd-side h3 { margin: 0 0 16px; font-size: 22px; font-weight: 700; }
.rd-side .donut-big { width: 150px; height: 150px; margin: 0 auto; } .rd-side .donut-big .val { font-size: 34px; }
.rd-side .cap { margin-top: 12px; font-size: 16px; font-weight: 600; color: var(--text-2); } .rd-side .cap.preview { color: var(--amber); }
.rd-side .info { margin-top: 18px; display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 12px 14px; border: 1px solid #D6DEFF; border-radius: 10px; background: var(--indigo-bg-2); font-size: 14px; color: var(--text-2); line-height: 1.4; }
.rd-side .info .i { font-size: 20px; color: var(--indigo); flex: none; }
.rd-areas { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.rd-area { border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface); }
.rd-area .head { display: flex; align-items: center; gap: 14px; padding: 12px 18px; user-select: none; }
.rd-area .head .tri { font-size: 22px; color: var(--text-2); transition: transform .15s; } .rd-area.is-open .head .tri { transform: rotate(90deg); }
.rd-area .head .aic { font-size: 26px; color: #1E2F8F; } .rd-area .head .lbl { font-size: 20px; font-weight: 700; }
.rd-area .head .pill { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 8px; background: var(--indigo-bg); color: var(--indigo); font-size: 13px; font-weight: 600; }
.rd-area .head .right { margin-left: auto; font-size: 15px; color: var(--text-2); } .rd-area .head .right b { color: var(--text); font-weight: 700; }
.rd-area .body { display: none; padding: 0 18px 16px; } .rd-area.is-open .body { display: block; }
.rd-area .rd-table { margin-top: 4px; }
.rd-table .item { display: flex; align-items: center; gap: 8px; } .rd-table .item .chev { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; font-size: 18px; color: var(--text-2); background: transparent; }
.rd-table .item .chev:hover { background: var(--bg); } .rd-table tr.is-open .item .chev { transform: rotate(90deg); }
.rd-table .item .spacer { width: 22px; flex: none; } .rd-table tr[data-depth="1"] .item { padding-left: 26px; } .rd-table tr[data-depth="2"] .item { padding-left: 52px; } .rd-table tr[data-depth="3"] .item { padding-left: 78px; }
.rd-table tr.is-group .item b { font-weight: 600; }
.rd-table tr.excluded td, .rd-table tr.excluded .rdg b { color: var(--muted); } .rd-table .tag { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 6px; background: #F0F1F5; color: var(--muted); font-size: 12px; font-weight: 600; }
.rd-table tr[hidden] { display: none; }
.rd-empty { padding: 18px; text-align: center; color: var(--muted); border: 1px dashed var(--border); border-radius: 10px; margin-top: 8px; }
/* ---- exception dialog (27b) ---- */
.rd-backdrop { position: fixed; inset: 0; background: rgba(23,27,45,0.45); z-index: 60; display: grid; place-items: center; padding: 16px; }
.rd-modal { width: 565px; max-width: 100%; background: var(--surface); border-radius: 16px; box-shadow: 0 30px 80px rgba(23,27,45,0.35); padding: 24px 28px 26px; }
.rd-modal .hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .rd-modal h2 { margin: 0; font-size: 26px; font-weight: 700; } .rd-modal .sub { font-size: 14px; color: var(--text-2); margin-top: 4px; }
.rd-modal .close { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); font-size: 22px; background: transparent; } .rd-modal .close:hover { background: #F3F4F8; }
.rd-form { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 14px 6px; align-items: start; margin-top: 22px; }
.rd-form > label { font-size: 15px; font-weight: 500; padding-top: 11px; } .rd-form > label .req { color: #D63A4E; margin-left: 4px; }
.rd-ro { height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 10px; background: #F3F5FB; color: var(--text); font-size: 15px; font-weight: 500; }
.rd-ro .vav { width: 30px; height: 30px; border-radius: 8px; background: #2A3555; color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.rd-sel { height: 44px; border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; display: flex; align-items: center; gap: 10px; background: #fff; }
.rd-sel .i { font-size: 20px; color: var(--text-2); } .rd-sel select { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: var(--text); appearance: none; padding-right: 26px; } .rd-sel .chev { margin-left: -26px; pointer-events: none; }
.rd-sel:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.rd-ta { width: 100%; min-height: 96px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 15px; color: var(--text); resize: vertical; } .rd-ta:focus { outline: 0; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.rd-count { text-align: right; font-size: 13px; color: var(--muted); margin-top: 4px; }
.rd-note { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; padding: 10px 14px; border: 1px solid #D6DEFF; border-radius: 10px; background: var(--indigo-bg-2); font-size: 14px; color: var(--text-2); } .rd-note .i { font-size: 20px; color: var(--indigo); flex: none; }
.rd-err { grid-column: 2; color: #D63A4E; font-size: 13px; margin-top: -8px; }
.rd-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; } .rd-actions .btn-outline, .rd-actions .btn-primary { height: 46px; padding: 0 22px; font-size: 16px; font-weight: 600; border-radius: 10px; } .rd-actions .btn-primary:disabled { opacity: .55; cursor: default; }
/* ---- progress popover (§2.5) ---- */
.rd-progress { position: absolute; z-index: 60; width: 280px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(23,27,45,.12); padding: 14px 16px; }
.rd-progress .lbl { font-size: 14px; font-weight: 600; margin-bottom: 10px; } .rd-progress .row { display: flex; align-items: center; gap: 10px; } .rd-progress input[type=range] { flex: 1; accent-color: var(--indigo); }
.rd-progress input[type=number] { width: 64px; height: 34px; border: 1px solid var(--border); border-radius: 8px; text-align: center; font: inherit; font-weight: 600; }
.rd-progress .ft { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; } .rd-progress .ft button.linklike { color: var(--indigo); font-size: 13px; }
@media (max-width: 1200px) { .rd-top { grid-template-columns: 1fr; } .rd-side { position: static; } }
@media (max-width: 991px) { .rd-table th:last-child, .rd-table td:last-child { display: none; } }
@media (max-width: 640px) { .rd-form { grid-template-columns: 1fr; } .rd-form > label { padding-top: 0; } .rd-err { grid-column: 1; } .rd-actions { flex-direction: column-reverse; } }
.tag.exc { background: var(--amber-bg); color: #C77D08; }
.lk-table td.act { white-space: nowrap; } .lk-table .lk-exc { display: block; margin-top: 6px; color: var(--indigo); font-size: 13px; font-weight: 500; background: none; border: 0; padding: 0; cursor: pointer; }
.crit-add { display: flex; gap: 8px; align-items: center; padding: 8px 0; } .crit-add input { flex: 1; height: 38px; border: 1px solid var(--border); border-radius: 8px; padding: 0 12px; font: inherit; font-size: 15px; }
.crit-add input:focus { outline: 0; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); } .crit-add .btn-primary.sm, .crit-add .btn-outline.sm { height: 38px; padding: 0 14px; font-size: 14px; }
input.crit-edit { flex: 1; height: 34px; border: 1px solid var(--indigo); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 15px; box-shadow: 0 0 0 3px var(--indigo-bg); outline: 0; }
.crit-dots { margin-left: auto; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); background: transparent; opacity: 0; transition: opacity .1s; font-size: 18px; }
.sp-check:hover .crit-dots, .md-check:hover .crit-dots, .crit-dots:focus { opacity: 1; } .crit-dots:hover { background: var(--bg); color: var(--text); }
.crit-menu { min-width: 160px; z-index: 60; }
.rd-progress .btn-primary.sm { height: 34px; padding: 0 14px; font-size: 14px; }

/* ---------- MM-28 · Approval decision (approve / send back dialogs) ---------- */
.ap-backdrop { position: fixed; inset: 0; background: rgba(23,27,45,0.45); z-index: 60; display: grid; place-items: center; padding: 16px; }
.ap-modal { width: 660px; max-width: 100%; max-height: calc(100vh - 32px); overflow: auto; background: var(--surface); border-radius: 16px; box-shadow: 0 30px 80px rgba(23,27,45,0.35); padding: 26px 30px 28px; }
.ap-modal.sendback { width: 575px; }
.ap-modal .hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--border-soft); }
.ap-modal.sendback .hd { border-bottom: 0; padding-bottom: 6px; }
.ap-modal h2 { margin: 0; font-size: 27px; font-weight: 700; } .ap-modal .sub { font-size: 16px; color: var(--text-2); margin-top: 6px; line-height: 1.45; max-width: 520px; }
.ap-modal .close { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); font-size: 22px; background: transparent; flex: none; } .ap-modal .close:hover { background: #F3F4F8; }
.ap-lbl { font-size: 17px; font-weight: 700; margin: 20px 0 10px; } .ap-lbl .opt { font-weight: 400; color: var(--text-2); }
.ap-submitted { border: 1px solid var(--border); border-radius: 12px; padding: 4px 16px; }
.ap-req { display: flex; align-items: center; gap: 12px; padding: 12px 0; font-size: 15px; color: var(--text-2); } .ap-req .mini-avatar { width: 32px; height: 32px; font-size: 12px; } .ap-req b { color: var(--text); font-weight: 600; }
.ap-file { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--border-soft); }
.ap-file .ico { width: 56px; height: 56px; border-radius: 10px; background: #FDECEC; display: grid; place-items: center; flex: none; } .ap-file .ico span { display: inline-block; padding: 3px 5px; border-radius: 4px; background: #E5484D; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .5px; }
.ap-file .name { font-size: 17px; font-weight: 600; } .ap-file .meta { font-size: 14px; color: var(--text-2); margin-top: 3px; } .ap-file .meta .dot { margin: 0 8px; }
.ap-file .chev { margin-left: auto; font-size: 22px; color: var(--text-2); }
.ap-file.none { color: var(--muted); font-size: 14px; font-style: italic; }
.ap-points { display: flex; flex-direction: column; gap: 12px; }
.ap-point { display: flex; align-items: flex-start; gap: 14px; } .ap-point .box { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--green); color: #fff; font-size: 20px; }
.ap-point.open .box { background: transparent; border: 2px solid var(--border); color: transparent; } .ap-point .t { font-size: 17px; font-weight: 600; margin-top: 3px; } .ap-point .s { font-size: 14px; color: var(--text-2); margin-top: 2px; }
.ap-points .none { color: var(--muted); font-size: 14px; font-style: italic; }
.ap-warn { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border: 1px solid #F3D9A4; border-radius: 10px; background: var(--amber-bg); color: #8A5A00; font-size: 14px; margin-top: 12px; }
.ap-ta { width: 100%; min-height: 96px; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font: inherit; font-size: 15px; color: var(--text); resize: vertical; } .ap-ta:focus { outline: 0; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.ap-count { text-align: right; font-size: 13px; color: var(--muted); margin-top: 4px; }
.ap-note { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border: 1px solid #D6DEFF; border-radius: 10px; background: var(--indigo-bg-2); font-size: 15px; color: var(--text-2); margin-top: 10px; } .ap-note .i { font-size: 20px; color: var(--indigo); flex: none; }
.ap-status { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border: 1px solid #D6DEFF; border-radius: 12px; background: var(--indigo-bg-2); font-size: 16px; color: var(--text); margin-top: 14px; } .ap-status .i { font-size: 22px; color: var(--indigo); flex: none; } .ap-status .arrow { font-size: 20px; color: var(--indigo); }
.ap-status .wpill { font-size: 15px; padding: 5px 12px; }
.ap-form { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px 8px; align-items: start; margin-top: 18px; }
.ap-form > label { font-size: 16px; font-weight: 500; padding-top: 11px; } .ap-form > label .req { color: #D63A4E; margin-left: 4px; }
.ap-ro { height: 46px; display: flex; align-items: center; padding: 0 14px; border-radius: 10px; background: #F3F5FB; font-size: 16px; font-weight: 500; }
.ap-owner { display: flex; align-items: center; gap: 14px; padding: 2px 0; } .ap-owner .mini-avatar { width: 44px; height: 44px; font-size: 15px; } .ap-owner b { display: block; font-size: 17px; font-weight: 700; } .ap-owner span { font-size: 14px; color: var(--text-2); }
.ap-date { height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--border); border-radius: 10px; font-size: 16px; }
.ap-date input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 16px; color: var(--text); background: transparent; min-width: 0; } .ap-date .i { font-size: 20px; color: var(--text-2); }
.ap-date:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.ap-date input::-webkit-calendar-picker-indicator { display: none; }
.ap-err { grid-column: 2; color: #D63A4E; font-size: 13px; margin-top: -10px; } .ap-err.wide { grid-column: 1 / -1; }
.ap-actions { display: flex; justify-content: flex-end; gap: 14px; margin-top: 22px; } .ap-actions .btn-outline, .ap-actions .btn-primary { height: 48px; padding: 0 24px; font-size: 17px; font-weight: 600; border-radius: 10px; } .ap-actions .btn-primary:disabled { opacity: .55; cursor: default; }
.ap-actions .btn-outline { color: var(--indigo); border-color: #C9D2FF; }
.ap-note-box { border: 1px solid #F3D9A4; background: var(--amber-bg); color: #6B4A00; border-radius: 10px; padding: 10px 14px; font-size: 14px; }
@media (max-width: 640px) { .ap-form { grid-template-columns: 1fr; } .ap-form > label { padding-top: 0; } .ap-err { grid-column: 1; } .ap-actions { flex-direction: column-reverse; } }
.sp-wait { color: var(--muted); font-size: 14px; white-space: nowrap; }
.sp-sentback { border-color: #F3D9A4 !important; background: var(--amber-bg) !important; color: #6B4A00 !important; }
.acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .acts .btn-primary, .acts .btn-outline { height: 36px; padding: 0 12px; font-size: 14px; white-space: nowrap; }
.mt .acts { justify-content: flex-end; }
.ap .acts { grid-column: 1 / -1; margin-top: 4px; } .ap > div:has(> .dsc) { grid-column: 1 / -1; }   /* MM-28: the decision buttons take their own row */
.mt .proj { white-space: normal; }   /* MM-28: the actions column narrowed the table — project names may wrap */

/* ---------- MM-29 · Go-live wizard + launch snapshot ---------- */
.gl-backdrop { position: fixed; inset: 0; background: rgba(23,27,45,0.45); z-index: 60; display: grid; place-items: center; padding: 16px; }
.gl-modal { width: 605px; max-width: 100%; background: var(--surface); border-radius: 16px; box-shadow: 0 30px 80px rgba(23,27,45,0.35); padding: 26px 28px 26px; }
.gl-modal .hd { display: flex; align-items: center; gap: 18px; }
.gl-modal .badge-ico { width: 68px; height: 68px; border-radius: 50%; background: #FFF0E6; color: #F0722A; display: grid; place-items: center; font-size: 32px; flex: none; }
.gl-modal h2 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.3px; } .gl-modal .sub { font-size: 17px; color: var(--text-2); margin-top: 4px; }
.gl-modal .close { margin-left: auto; align-self: flex-start; width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); font-size: 22px; background: transparent; } .gl-modal .close:hover { background: #F3F4F8; }
.gl-checks { margin-top: 20px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.gl-check { display: flex; align-items: center; gap: 16px; padding: 12px 16px; min-height: 68px; border-top: 1px solid var(--border-soft); } .gl-check:first-child { border-top: 0; }
.gl-check .ico { width: 34px; height: 34px; display: grid; place-items: center; font-size: 30px; color: #1E2F8F; flex: none; }
.gl-check .t { font-size: 17px; font-weight: 700; } .gl-check .t b { font-weight: 800; } .gl-check .s { font-size: 14px; color: var(--text-2); margin-top: 2px; }
.gl-check .mark { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; font-size: 20px; flex: none; }
.gl-check.bad .mark { background: var(--red); }
.gl-check .donut { width: 34px; height: 34px; margin-left: auto; flex: none; }
.gl-cells { display: grid; grid-template-columns: 1fr 1fr; margin-top: 14px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.gl-cell { display: flex; align-items: center; gap: 14px; padding: 16px 18px; } .gl-cell + .gl-cell { border-left: 1px solid var(--border-soft); }
.gl-cell .i { font-size: 28px; color: #1E2F8F; flex: none; } .gl-cell .k { font-size: 16px; font-weight: 700; } .gl-cell .v { font-size: 16px; color: var(--text-2); margin-top: 2px; }
.gl-cell .v input { border: 0; outline: 0; font: inherit; font-size: 16px; color: var(--text-2); background: transparent; padding: 0; width: 150px; }
.gl-cell .v input::-webkit-calendar-picker-indicator { display: none; } .gl-cell .hint { font-size: 12px; color: var(--muted); }
.gl-confirm { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 16px; font-weight: 500; cursor: pointer; }
.gl-confirm input { width: 22px; height: 22px; accent-color: var(--indigo); }
.gl-note { margin-top: 12px; padding: 10px 14px; border: 1px solid #F6C6CC; border-radius: 10px; background: #FDECEE; color: #9B1C2E; font-size: 14px; }
.gl-actions { display: flex; justify-content: flex-end; gap: 14px; margin-top: 18px; } .gl-actions .btn-outline, .gl-actions .btn-primary { height: 46px; padding: 0 24px; font-size: 17px; font-weight: 600; border-radius: 10px; }
.gl-actions .btn-outline { color: var(--indigo); border-color: #C9D2FF; } .gl-actions .btn-primary:disabled { opacity: .5; cursor: default; }
/* ---- snapshot page ---- */
.gl-head { display: flex; align-items: flex-start; gap: 22px; padding: 6px 0 14px; }
.gl-head h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.5px; } .gl-head .sub { font-size: 17px; color: var(--text-2); margin-top: 6px; }
.gl-live { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border-radius: 10px; background: var(--green-bg); color: var(--green-text); font-size: 17px; font-weight: 700; margin-top: 4px; } .gl-live .i { font-size: 22px; }
.gl-meta { display: flex; gap: 22px; margin-top: 4px; } .gl-meta .kv { display: flex; align-items: center; gap: 10px; padding-left: 22px; border-left: 1px solid var(--border-soft); } .gl-meta .kv:first-child { border-left: 0; padding-left: 0; }
.gl-meta .kv .i { font-size: 26px; color: #1E2F8F; } .gl-meta .k { font-size: 13px; color: var(--muted); } .gl-meta .v { font-size: 16px; font-weight: 700; }
.gl-head .right { margin-left: auto; text-align: right; font-size: 14px; color: var(--muted); margin-top: 12px; }
.gl-info { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid #D6DEFF; border-radius: 10px; background: var(--indigo-bg-2); color: #2B3B9C; font-size: 15px; font-weight: 500; margin-bottom: 16px; } .gl-info .i { font-size: 22px; color: var(--indigo); }
.gl-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.gl-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; }
.gl-card h2 { margin: 0; font-size: 21px; font-weight: 800; display: flex; align-items: center; gap: 10px; } .gl-card .sub { font-size: 14px; color: var(--text-2); margin-top: 4px; }
.gl-card .head { display: flex; align-items: flex-start; gap: 12px; } .gl-card .head .total { margin-left: auto; text-align: right; font-size: 13px; color: var(--text-2); } .gl-card .head .total b { display: block; font-size: 22px; font-weight: 800; color: var(--text); }
.gl-table { width: 100%; border-collapse: collapse; margin-top: 14px; }
.gl-table th { text-align: left; font-size: 14px; font-weight: 600; color: var(--text-2); padding: 8px 12px; border-bottom: 1px solid var(--border); background: #F7F8FC; }
.gl-table td { padding: 12px; border-bottom: 1px solid var(--border-soft); font-size: 15px; vertical-align: middle; } .gl-table tr:last-child td { border-bottom: 0; }
.gl-table .area { display: flex; align-items: center; gap: 14px; font-weight: 600; } .gl-table .area .ib { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font-size: 24px; color: #1E2F8F; background: var(--indigo-bg-2); }
.gl-gates { display: flex; flex-direction: column; gap: 6px; } .gl-gate { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); } .gl-gate .i { font-size: 18px; color: var(--green); } .gl-gate.miss .i { color: var(--red); }
.gl-prog { display: flex; align-items: center; gap: 12px; } .gl-prog .bar { flex: 1; height: 12px; border-radius: 6px; background: var(--track); overflow: hidden; } .gl-prog .bar > span { display: block; height: 100%; background: var(--green); border-radius: 6px; } .gl-prog b { font-size: 16px; min-width: 44px; text-align: right; }
.gl-ready { display: flex; align-items: center; gap: 24px; margin-top: 12px; } .gl-ready .donut-big { width: 136px; height: 136px; } .gl-ready .donut-big .arc { stroke: var(--green); } .gl-ready .donut-big .val { font-size: 32px; }
.gl-ready .txt b { display: block; font-size: 18px; font-weight: 700; } .gl-ready .txt span { font-size: 15px; color: var(--text-2); line-height: 1.5; }
.gl-task { display: flex; align-items: center; gap: 12px; font-weight: 600; } .gl-task .i { font-size: 24px; color: #1E2F8F; }
.gl-log { margin-top: 16px; grid-column: 1 / -1; } .gl-log .head { align-items: center; } .gl-log .head .btn-primary { margin-left: auto; height: 46px; padding: 0 22px; font-size: 16px; }
.gl-log .row { display: grid; grid-template-columns: 40px 200px 1fr; gap: 0 12px; align-items: start; padding: 10px 0; position: relative; }
.gl-log .row .dot { width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-size: 16px; margin: 2px 0 0 4px; position: relative; z-index: 1; }
.gl-log .row + .row::before { content: ""; position: absolute; left: 16px; top: -18px; height: 32px; border-left: 2px solid #BFE9D6; }
.gl-log .row .when { font-size: 15px; color: var(--text-2); padding-top: 4px; } .gl-log .row .what b { display: block; font-size: 17px; font-weight: 700; } .gl-log .row .what span { font-size: 15px; color: var(--text-2); }
.gl-empty { padding: 18px; text-align: center; color: var(--muted); font-size: 14px; }
@media (max-width: 1200px) { .gl-grid { grid-template-columns: 1fr; } .gl-head { flex-wrap: wrap; } }
@media (max-width: 640px) { .gl-cells { grid-template-columns: 1fr; } .gl-cell + .gl-cell { border-left: 0; border-top: 1px solid var(--border-soft); } .gl-actions { flex-direction: column-reverse; } .gl-log .row { grid-template-columns: 40px 1fr; } .gl-log .row .what { grid-column: 2; } }
.lk-sum .acts .btn-go.on { border: 0; }

/* ---------- MM-30 · Operating status update (right drawer) ---------- */
.os-backdrop { position: fixed; inset: 0; background: rgba(23,27,45,0.42); z-index: 60; }
.os-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 525px; max-width: 100vw; background: var(--surface); box-shadow: -12px 0 40px rgba(23,27,45,0.18); display: flex; flex-direction: column; z-index: 61; }
.os-head { padding: 26px 28px 0; }
.os-head .row { display: flex; align-items: center; justify-content: space-between; } .os-head h2 { margin: 0; font-size: 26px; font-weight: 700; }
.os-head .close { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); font-size: 22px; background: transparent; } .os-head .close:hover { background: #F3F4F8; }
.os-scope { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 17px; font-weight: 600; } .os-scope .vav { width: 40px; height: 40px; border-radius: 10px; color: #fff; font-size: 14px; font-weight: 700; display: grid; place-items: center; }
.os-scope .area { color: var(--text-2); font-weight: 500; } .os-scope .dot { color: var(--muted); margin: 0 4px; }
.os-scope select { border: 0; background: transparent; font: inherit; font-size: 17px; font-weight: 600; color: var(--text); padding: 0; }
.os-current { margin-top: 6px; font-size: 13px; color: var(--muted); }
.os-body { flex: 1; overflow: auto; padding: 8px 28px 16px; }
.os-lbl { display: block; font-size: 15px; font-weight: 600; margin: 18px 0 8px; } .os-lbl .req { color: #D63A4E; margin-left: 4px; } .os-lbl .opt { font-weight: 400; color: var(--text-2); }
.os-radios { display: grid; grid-template-columns: 1fr 1.55fr 1fr; gap: 12px; }
.os-radio { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.os-radio input { width: 20px; height: 20px; accent-color: var(--indigo); margin: 0; flex: none; }
.os-radio .sd { width: 14px; height: 14px; border-radius: 50%; flex: none; } .os-radio .sd.ok { background: var(--green); } .os-radio .sd.needs_attention { background: var(--amber); } .os-radio .sd.critical { background: var(--red); }
.os-radio.is-on { border: 2px solid var(--indigo); background: var(--indigo-bg-2); color: var(--indigo); padding: 0 9px; }
.os-ta { position: relative; } .os-ta textarea { width: 100%; min-height: 96px; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px 26px; font: inherit; font-size: 15px; color: var(--text); resize: vertical; }
.os-ta textarea:focus, .os-input:focus-within, .os-input input:focus { outline: 0; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.os-ta .cnt, .os-input .cnt { position: absolute; right: 12px; bottom: 8px; font-size: 12px; color: var(--muted); }
.os-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .os-two .os-lbl { margin-top: 18px; }
.os-select, .os-input { position: relative; height: 46px; border: 1px solid var(--border); border-radius: 10px; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--surface); font-size: 15px; font-weight: 500; }
.os-select select { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: var(--text); appearance: none; padding-right: 24px; min-width: 0; } .os-select .chev { margin-left: -24px; pointer-events: none; color: var(--text-2); }
.os-select .mini-avatar { width: 30px; height: 30px; border-radius: 8px; background: #2A3555; color: #fff; font-size: 12px; }
.os-select .i.lead { font-size: 20px; color: var(--text-2); } .os-select input[type=date] { flex: 1; border: 0; outline: 0; font: inherit; font-size: 15px; color: var(--text); background: transparent; min-width: 0; }
.os-select input[type=date]::-webkit-calendar-picker-indicator { display: none; }
.os-input input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 15px; color: var(--text); background: transparent; min-width: 0; padding-right: 54px; }
.os-hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
.os-rule { border-top: 1px solid var(--border-soft); margin: 22px 0 16px; }
.os-check { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 500; cursor: pointer; } .os-check input { width: 22px; height: 22px; accent-color: var(--indigo); }
.os-err { color: #D63A4E; font-size: 13px; margin-top: 6px; }
.os-foot { padding: 16px 28px 0; border-top: 1px solid var(--border-soft); display: flex; justify-content: space-between; gap: 12px; background: var(--surface); }
.os-foot .btn-outline, .os-foot .btn-primary { height: 46px; padding: 0 22px; font-size: 16px; font-weight: 600; border-radius: 10px; } .os-foot .btn-primary:disabled { opacity: .55; cursor: default; }
.os-meta { padding: 14px 28px 18px; font-size: 13px; color: var(--muted); } .os-meta .dot { margin: 0 8px; }
@media (max-width: 640px) { .os-drawer { width: 100%; } .os-radios { grid-template-columns: 1fr; } .os-two { grid-template-columns: 1fr; } .os-foot { flex-direction: column-reverse; } }

/* ---------- MM-31 · Bulk actions (selection column + floating bar) ---------- */
.tree .c-chk { width: 52px; text-align: center; } .tree td.c-chk, .tree th.c-chk { padding-left: 16px; padding-right: 8px; }
.tree .c-chk .chk { width: 22px; height: 22px; border-radius: 6px; margin: 0 auto; }
.chk.is-mixed { background: var(--indigo); border-color: var(--indigo); } .chk.is-mixed::after { content: ""; width: 10px; height: 2px; background: #fff; border-radius: 1px; }
.tree tr.row.is-picked td, .wl tr.row.is-picked td, .subs tr.row.is-picked td, .tasks tr.row.is-picked td { background: #EEF1FF; } .tree tr.row.is-picked td.c-item .acc { opacity: .35; }
.bk-pop .search { padding: 0 8px 6px; } .bk-pop .search input { width: 100%; height: 36px; border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 14px; } .bk-pop .list { max-height: 320px; overflow: auto; } .bk-pop .opt.muted { color: var(--muted); }
body.has-bulk .content { padding-bottom: 130px; }
.bk-bar { position: fixed; left: calc(var(--sidebar-w, 232px) + 46px); right: 44px; bottom: 48px; max-width: 1350px; height: 68px; background: var(--indigo); color: #fff; border-radius: 14px; box-shadow: 0 18px 40px rgba(59,91,253,0.35), 0 2px 6px rgba(23,27,45,0.18); display: flex; align-items: center; gap: 14px; padding: 0 22px 0 24px; z-index: 55; }
.bk-bar .cnt { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; white-space: nowrap; } .bk-bar .cnt .i { font-size: 24px; }
.bk-bar .sep { width: 1px; height: 32px; background: rgba(255,255,255,0.35); margin: 0 6px; }
.bk-bar .acts { display: flex; align-items: center; gap: 14px; flex: 1; }
.bk-btn { height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.4); background: transparent; color: #fff; font: inherit; font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; white-space: nowrap; }
.bk-btn .i { font-size: 20px; } .bk-btn .chev { font-size: 16px; opacity: .9; } .bk-btn:hover, .bk-btn.is-open { background: rgba(255,255,255,0.14); } .bk-btn:disabled { opacity: .55; cursor: default; }
.bk-bar .clear { margin-left: auto; border: 0; padding: 0 4px 0 12px; font-size: 16px; } .bk-bar .clear .i { font-size: 20px; }
.bk-bar .err { font-size: 13px; color: #FFD7DC; margin-left: 6px; }
.bk-pop { position: fixed; bottom: 124px; width: 260px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 12px; box-shadow: 0 16px 40px rgba(23,27,45,0.18); padding: 8px; z-index: 56; color: var(--text); }
.bk-pop .title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 12px 6px; }
.bk-pop .opt { display: flex; align-items: center; gap: 12px; width: 100%; height: 44px; padding: 0 12px; border-radius: 8px; background: transparent; border: 0; font: inherit; font-size: 15px; font-weight: 500; color: var(--text); cursor: pointer; text-align: left; }
.bk-pop .opt:hover { background: var(--indigo-bg-2); color: var(--indigo); }
.bk-pop .opt .sdot { width: 12px; height: 12px; border-radius: 50%; background: var(--grey); flex: none; }
.bk-pop .opt .sdot.planned { background: #9CA3AF; } .bk-pop .opt .sdot.in_progress { background: var(--indigo); } .bk-pop .opt .sdot.in_review { background: var(--amber); } .bk-pop .opt .sdot.done { background: var(--green); } .bk-pop .opt .sdot.cancelled { background: #C5CAD8; }
.bk-pop .opt .mini-avatar { width: 30px; height: 30px; border-radius: 8px; font-size: 12px; }
.bk-pop .opt .mini-avatar.none { background: #E9ECF3; color: var(--muted); }
.bk-pop .note { display: flex; gap: 10px; align-items: flex-start; margin: 6px 4px 4px; padding: 10px 8px 6px; border-top: 1px solid var(--border-soft); font-size: 13px; color: var(--text-2); line-height: 1.4; } .bk-pop .note .i { color: var(--indigo); font-size: 18px; flex: none; margin-top: 1px; }
.bk-pop .date { display: flex; flex-direction: column; gap: 10px; padding: 4px 8px 8px; }
.bk-pop .date .field { height: 44px; border: 1px solid var(--border); border-radius: 10px; display: flex; align-items: center; gap: 10px; padding: 0 12px; } .bk-pop .date .field .i { font-size: 20px; color: var(--text-2); }
.bk-pop .date .field input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 15px; color: var(--text); background: transparent; min-width: 0; } .bk-pop .date .field input::-webkit-calendar-picker-indicator { display: none; }
.bk-pop .quick { display: flex; flex-wrap: wrap; gap: 6px; } .bk-pop .quick button { height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 13px; font-weight: 500; color: var(--text-2); cursor: pointer; } .bk-pop .quick button:hover { border-color: var(--indigo); color: var(--indigo); }
.bk-pop .date .btn-primary { height: 40px; font-size: 14px; justify-content: center; }
@media (max-width: 900px) { .bk-bar { left: 16px; right: 16px; bottom: 12px; padding: 0 12px; gap: 8px; } .bk-pop { bottom: 88px; } .bk-btn span.lbl, .bk-bar .clear span.lbl { display: none; } .bk-bar .cnt { font-size: 14px; } .bk-pop { width: calc(100vw - 32px); left: 16px !important; } }

/* ---------- MM-32 · Filter panel (right drawer, chip row, filtered tree) ---------- */
.fc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 24px 16px; }
.fc-chip { height: 40px; padding: 0 12px 0 16px; border-radius: 10px; background: #EEF1FF; color: var(--indigo); font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.fc-chip button { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: transparent; border: 0; color: var(--indigo); cursor: pointer; font: inherit; } .fc-chip button:hover { background: rgba(59,91,253,0.12); } .fc-chip .i { font-size: 16px; }
.fc-row .clear { margin-left: 6px; background: transparent; border: 0; color: var(--text-2); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; } .fc-row .clear:hover { color: var(--indigo); }
.btn-outline.is-on { border-color: var(--indigo); color: var(--indigo); background: #F7F8FF; }
.fp-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100vw; background: var(--surface); box-shadow: -12px 0 40px rgba(23,27,45,0.16); border-left: 1px solid var(--border-soft); display: flex; flex-direction: column; z-index: 58; }
.fp-head { display: flex; align-items: center; gap: 16px; padding: 30px 28px 6px; } .fp-head h2 { margin: 0; font-size: 26px; font-weight: 700; flex: 1; }
.fp-head .reset { background: transparent; border: 0; color: var(--indigo); font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; } .fp-head .reset:hover { text-decoration: underline; }
.fp-head .close { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); background: transparent; border: 0; cursor: pointer; } .fp-head .close .i { font-size: 22px; } .fp-head .close:hover { background: #F3F4F8; }
.fp-body { flex: 1; overflow: auto; padding: 4px 28px 16px; }
.fp-lbl { display: block; font-size: 15px; font-weight: 600; margin: 18px 0 8px; }
.fp-select { position: relative; height: 46px; border: 1px solid var(--border); border-radius: 10px; display: flex; align-items: center; gap: 12px; padding: 0 12px; background: var(--surface); font-size: 16px; font-weight: 500; }
.fp-select:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.fp-select .lead { width: 26px; display: grid; place-items: center; flex: none; color: var(--text); } .fp-select .lead .i { font-size: 24px; }
.fp-select .lead.av { width: 32px; height: 32px; border-radius: 8px; background: #2A3555; color: #fff; font-size: 12px; font-weight: 700; } .fp-select .lead.av.pr { background: #2F3A8F; border-radius: 9px; }
.fp-select .lead .sdot { width: 14px; height: 14px; border-radius: 50%; background: var(--indigo); } .fp-select .lead .sdot.planned { background: #9CA3AF; } .fp-select .lead .sdot.in_review { background: var(--amber); } .fp-select .lead .sdot.done { background: var(--green); } .fp-select .lead .sdot.cancelled { background: #C5CAD8; }
.fp-select .lead .ring { width: 20px; height: 20px; border-radius: 50%; border: 3px solid #C9D2FF; border-top-color: var(--indigo); }
.fp-select select { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; font-weight: 500; color: var(--text); appearance: none; padding-right: 28px; min-width: 0; cursor: pointer; }
.fp-select .chev { margin-left: -28px; pointer-events: none; color: var(--text-2); font-size: 18px; }
.fp-check { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 500; cursor: pointer; margin-top: 2px; } .fp-check input { width: 22px; height: 22px; accent-color: var(--indigo); margin: 0; }
.fp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 28px 22px; border-top: 1px solid var(--border-soft); background: var(--surface); }
.fp-foot .count { font-size: 15px; color: var(--text-2); } .fp-foot .btn-primary { height: 46px; padding: 0 22px; font-size: 16px; font-weight: 600; border-radius: 10px; box-shadow: none; }
/* "{n} items hidden" lines under filtered parents */
.wl tr.hidden-line td, .tree tr.hidden-line td { height: 40px; color: var(--muted); font-size: 14px; border-bottom: 1px solid var(--border-soft); border-right: 0; }
.wl tr.hidden-line .tcell, .tree tr.hidden-line .tcell { display: flex; align-items: center; gap: 8px; } tr.hidden-line .i { font-size: 16px; }
.fc-row { padding: 0 24px 14px; } .toolbar + .fc-row, .wl-card-head + .fc-row, .tl-head + .fc-row { margin-top: -6px; } .ms-toolbar + .fc-row { padding: 12px 0 0; }
@media (max-width: 640px) { .fp-drawer { width: 100%; } .fc-row { flex-wrap: nowrap; overflow-x: auto; } }

/* ---------- MM-33 · Saved views (dialog) + columns popover ---------- */
.svd-back { position: fixed; inset: 0; background: rgba(23,27,45,0.42); z-index: 70; display: grid; place-items: center; padding: 16px; }
.svd { width: 430px; max-width: 100%; background: var(--surface); border-radius: 16px; box-shadow: 0 24px 60px rgba(23,27,45,0.25); display: flex; flex-direction: column; }
.svd-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 26px 0; } .svd-head h2 { margin: 0; font-size: 26px; font-weight: 700; }
.svd-head .close { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); background: transparent; border: 0; cursor: pointer; } .svd-head .close .i { font-size: 22px; } .svd-head .close:hover { background: #F3F4F8; }
.svd-body { padding: 6px 26px 4px; }
.svd-lbl { display: block; font-size: 15px; font-weight: 600; margin: 16px 0 8px; } .svd-lbl .req { color: #D63A4E; margin-left: 4px; }
.svd-input { position: relative; } .svd-input input { width: 100%; height: 46px; border: 1px solid var(--border); border-radius: 10px; padding: 0 60px 0 14px; font: inherit; font-size: 16px; color: var(--text); }
.svd-input input:focus { outline: 0; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); } .svd-input .cnt { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--muted); }
.svd-err { color: #D63A4E; font-size: 13px; margin-top: 6px; }
.svd-radios { display: flex; gap: 28px; } .svd-radio { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; cursor: pointer; } .svd-radio input { width: 22px; height: 22px; accent-color: var(--indigo); margin: 0; }
.svd-radio.is-off { color: var(--muted); cursor: default; } .svd-hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
.svd-sum { margin-top: 18px; border: 1px solid #DDE3FF; background: #F7F8FF; border-radius: 12px; padding: 14px 16px 6px; }
.svd-sum .ttl { font-size: 16px; font-weight: 700; margin-bottom: 8px; } .svd-sum .row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; font-size: 15px; padding: 5px 0; } .svd-sum .row .k { color: var(--text-2); } .svd-sum .row .v { color: var(--text); font-weight: 500; }
.svd-sum .none { font-size: 14px; color: var(--muted); padding-bottom: 8px; }
.svd-check { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 500; margin-top: 18px; cursor: pointer; } .svd-check input { width: 22px; height: 22px; accent-color: var(--indigo); margin: 0; }
.svd-foot { display: flex; justify-content: flex-end; gap: 12px; padding: 18px 26px 22px; border-top: 1px solid var(--border-soft); margin-top: 18px; }
.svd-foot .btn-outline, .svd-foot .btn-primary { height: 46px; padding: 0 22px; font-size: 16px; font-weight: 600; border-radius: 10px; } .svd-foot .btn-primary:disabled { opacity: .55; cursor: default; box-shadow: none; }
.menu button .dot-mod { color: var(--indigo); margin-left: 4px; }
/* columns popover */
.cpo { position: absolute; z-index: 40; width: 320px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 40px rgba(23,27,45,0.16); padding: 14px 12px 12px; }
.cpo .ttl { font-size: 17px; font-weight: 700; padding: 2px 8px 10px; }
.cpo .row { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 8px; border-radius: 10px; font-size: 16px; font-weight: 500; position: relative; }
.cpo .row:hover { background: #F7F8FC; } .cpo .row.is-locked { color: var(--text-2); } .cpo .row.is-drag { opacity: .45; } .cpo .row.is-over::before { content: ""; position: absolute; left: 8px; right: 8px; top: -1px; height: 2px; background: var(--indigo); border-radius: 1px; }
.cpo .grip { width: 18px; color: #C5CAD8; cursor: grab; display: grid; place-items: center; flex: none; touch-action: none; } .cpo .grip .i { font-size: 18px; } .cpo .row.is-locked .grip { visibility: hidden; }
.cpo .row .chk { width: 22px; height: 22px; border-radius: 6px; flex: none; } .cpo .row.is-locked .chk { background: #C9D2FF; border-color: #C9D2FF; color: #fff; cursor: default; }
.cpo .row .lock { margin-left: auto; color: #C5CAD8; font-size: 18px; }
.cpo .foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 8px 0; margin-top: 6px; border-top: 1px solid var(--border-soft); }
.cpo .foot .reset { background: transparent; border: 0; color: var(--indigo); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; } .cpo .foot .btn-primary { height: 40px; padding: 0 18px; font-size: 15px; box-shadow: none; }
@media (max-width: 640px) { .svd-sum .row { grid-template-columns: 1fr; gap: 2px; } .cpo { position: fixed; left: 8px !important; right: 8px; width: auto; bottom: 8px; top: auto !important; } }
.wl .c-edit { width: 44px; } .wl td.c-edit { text-align: center; }
/* MM-33: the work-list card head carries the views selector too — keep everything on one row at 1672 px */
.wl-card-head { gap: 10px; } .wl-card-head > div:first-child { flex: 0 1 auto; min-width: 0; } .wl-card-head .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-card-head .btn-outline { padding: 0 13px; gap: 8px; } .wl-card-head .btn-primary { padding: 0 18px; }

/* ---------- MM-34 · Pickers (member / status / priority / multi) ---------- */
.pk-pop { position: absolute; z-index: 80; width: 300px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 40px rgba(23,27,45,0.16); padding: 10px; }
.pk-pop.multi { width: 340px; } .pk-pop.compact { width: 230px; padding: 6px; }
.pk-search { display: flex; align-items: center; gap: 10px; height: 44px; border: 1px solid var(--border); border-radius: 10px; padding: 0 10px 0 12px; margin-bottom: 8px; }
.pk-search:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); } .pk-search .i { font-size: 20px; color: var(--text-2); flex: none; }
.pk-search input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 15px; color: var(--text); background: transparent; min-width: 0; }
.pk-search .clear { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; background: transparent; border: 0; color: var(--text-2); cursor: pointer; } .pk-search .clear:hover { background: #F3F4F8; }
.pk-list { max-height: 320px; overflow: auto; }
.pk-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 6px 10px; border-radius: 10px; background: transparent; border: 0; font: inherit; font-size: 15px; font-weight: 500; color: var(--text); cursor: pointer; text-align: left; }
.pk-row:hover, .pk-row.is-focus { background: #F3F5FF; } .pk-row.is-on { background: #E9EEFF; }
.pk-row .av { width: 32px; height: 32px; border-radius: 50%; background: var(--indigo); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; flex: none; }
.pk-row .txt { flex: 1; min-width: 0; line-height: 1.25; } .pk-row .txt .name { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pk-row .txt .sub, .pk-row .txt .hint { display: block; font-size: 12px; color: var(--text-2); }
.pk-row .tick { color: var(--indigo); font-size: 18px; flex: none; } .pk-row .lead { width: 32px; display: grid; place-items: center; color: var(--indigo); flex: none; } .pk-row .lead .i { font-size: 22px; }
.pk-row .sdot { width: 12px; height: 12px; border-radius: 50%; flex: none; } .pk-row .sdot.planned { background: #9CA3AF; } .pk-row .sdot.in_progress { background: var(--indigo); } .pk-row .sdot.in_review { background: var(--amber); } .pk-row .sdot.done { background: var(--green); } .pk-row .sdot.cancelled { background: #C5CAD8; }
.pk-row .hint { font-size: 12px; color: var(--text-2); font-weight: 400; }
.pk-row .parrow { width: 22px; display: grid; place-items: center; } .pk-row .parrow .i { font-size: 18px; } .pk-row .parrow.critical, .pk-row .parrow.high { color: var(--red); } .pk-row .parrow.normal { color: var(--amber); } .pk-row .parrow.low { color: var(--green); }
.pk-row .chk { width: 22px; height: 22px; border-radius: 6px; flex: none; } .pk-row .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.pk-sep { border-top: 1px solid var(--border-soft); margin: 6px 4px; }
.pk-empty { padding: 14px 10px; font-size: 14px; color: var(--muted); }
.pk-foot { display: flex; align-items: center; gap: 10px; padding: 10px 10px 4px; border-top: 1px solid var(--border-soft); margin-top: 6px; font-size: 13px; color: var(--text-2); }
.pk-foot .new { display: flex; align-items: center; gap: 8px; background: transparent; border: 0; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; } .pk-foot .new .i { color: var(--indigo); font-size: 20px; } .pk-foot .new b { color: var(--indigo); font-weight: 600; }
/* chip field of the multi picker */
.pk-field { min-height: 46px; border: 1px solid var(--border); border-radius: 10px; padding: 5px 40px 5px 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: #fff; position: relative; cursor: pointer; }
.pk-field:focus-within, .pk-field.is-open { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.pk-field .chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 6px 0 6px; border-radius: 8px; background: #EEF1FF; color: var(--indigo); font-size: 14px; font-weight: 600; }
.pk-field .chip .av { width: 24px; height: 24px; border-radius: 50%; background: var(--indigo); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.pk-field .chip button { width: 22px; height: 22px; border-radius: 6px; background: transparent; border: 0; color: var(--indigo); cursor: pointer; display: grid; place-items: center; } .pk-field .chip button .i { font-size: 14px; }
.pk-field .ph { color: var(--muted); font-size: 15px; padding-left: 6px; } .pk-field .chev { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-2); font-size: 18px; }
.pk-anchor[aria-expanded="true"] { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
@media (max-width: 640px) { .pk-pop { position: fixed; left: 8px !important; right: 8px; bottom: 8px; top: auto !important; width: auto; max-height: 60vh; overflow: auto; } }
select.pk-anchor { cursor: pointer; }
.pk-field .chip.it-chip, .pk-field .chip.np-chip { padding-left: 10px; }
.pk-field .chip .av + * { margin-left: 0; }

/* ---------- MM-35 · Comments (cm-), file cards / lists (fl-), preview modal (pv-) ---------- */
.cm-head { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: var(--text); margin: 4px 0 10px; }
.cm-thread { display: flex; flex-direction: column; gap: 14px; }
.cm-item { display: flex; gap: 12px; position: relative; }
.cm-item > .mini-avatar { width: 40px; height: 40px; font-size: 13px; flex: none; background: #DCE3FF; color: var(--indigo); }
.cm-body { flex: 1; min-width: 0; }
.cm-meta { display: flex; align-items: center; gap: 12px; font-size: 15px; margin: 4px 0 6px; } .cm-meta b { font-weight: 600; } .cm-meta .when, .cm-meta .edited { font-size: 13px; color: var(--muted); }
.cm-meta .dots { margin-left: auto; width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; color: var(--text-2); opacity: 0; transition: opacity .12s; } .cm-item:hover .cm-meta .dots, .cm-meta .dots:focus-visible { opacity: 1; } .cm-meta .dots:hover { background: #F3F4F8; }
.cm-bubble { display: inline-block; max-width: 100%; background: #F3F5FB; border-radius: 12px; padding: 10px 14px; font-size: 15px; color: var(--text); line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.cm-bubble .cm-mention { color: var(--indigo); font-weight: 600; } .cm-bubble .fl-card { margin-top: 10px; }
.cm-bubble.is-flash { animation: cm-flash 1.6s ease-out; } @keyframes cm-flash { 0% { background: #E9EEFF; } 100% { background: #F3F5FB; } }
.cm-removed { font-style: italic; color: var(--muted); }
.cm-actions { display: flex; gap: 16px; margin-top: 8px; } .cm-actions button { font-size: 13px; font-weight: 600; color: var(--text-2); background: transparent; border: 0; cursor: pointer; padding: 0; } .cm-actions button:hover { color: var(--indigo); }
.cm-replies { margin-top: 10px; padding-left: 52px; position: relative; display: flex; flex-direction: column; gap: 14px; }
.cm-replies::before { content: ""; position: absolute; left: 19px; top: -10px; width: 22px; height: 34px; border-left: 1.5px solid var(--border); border-bottom: 1.5px solid var(--border); border-radius: 0 0 0 12px; }
.cm-empty { border: 1px dashed var(--border); border-radius: 10px; padding: 14px; text-align: center; color: var(--muted); font-size: 14px; }
.cm-history { margin-top: 22px; }
/* file card (inside a bubble, in lists, in the approve dialog) */
.fl-card { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 10px 10px 10px 12px; min-width: 320px; cursor: pointer; text-align: left; font: inherit; color: var(--text); }
.fl-card:hover { border-color: #C9D2FF; box-shadow: 0 2px 8px rgba(59,91,253,0.08); }
.fl-badge { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; flex: none; font-size: 10px; font-weight: 800; color: #fff; letter-spacing: .04em; }
.fl-badge.pdf { background: #E5484D; } .fl-badge.img { background: #12B981; } .fl-badge.doc { background: #3B5BFD; } .fl-badge.xls { background: #0F9D58; } .fl-badge.ppt { background: #F59E0B; } .fl-badge.zip { background: #6B7280; } .fl-badge.txt { background: #8A90A2; } .fl-badge.file { background: #9CA3AF; }
.fl-card .txt { flex: 1; min-width: 0; } .fl-card .name { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fl-card .meta { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.fl-card .dots { width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; color: var(--text-2); flex: none; } .fl-card .dots:hover { background: #F3F4F8; }
/* composer (panel footer expanded, MM-07 card, preview pane) */
.sp-foot.is-composing { flex-wrap: wrap; } .sp-foot.is-composing > .btn-square, .sp-foot.is-composing > .sp-comment { display: none; }
.cm-composer { flex: 1 1 100%; border: 1.5px solid var(--indigo); border-radius: 12px; padding: 12px 14px 10px; background: #fff; position: relative; box-shadow: 0 0 0 3px var(--indigo-bg); }
.cm-composer textarea { display: block; width: 100%; border: 0; outline: 0; resize: none; font: inherit; font-size: 15px; line-height: 1.45; min-height: 46px; max-height: 160px; color: var(--text); background: transparent; }
.cm-composer .replying { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); margin-bottom: 6px; } .cm-composer .replying b { color: var(--text); } .cm-composer .replying button { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 4px; color: var(--muted); } .cm-composer .replying button:hover { background: #F3F4F8; }
.cm-composer .row { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.cm-composer .row .btn-square { width: 40px; height: 40px; border-radius: 50%; }
.cm-composer .row .btn-primary { margin-left: auto; min-width: 96px; justify-content: center; height: 40px; }
.cm-composer .hint { font-size: 12px; color: var(--muted); background: transparent; border: 0; padding: 0; }
.cm-chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 6px 0 10px; border-radius: 8px; background: #EEF1FF; color: var(--indigo); font-size: 13px; font-weight: 600; max-width: 260px; } .cm-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-chip button { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 4px; color: var(--indigo); } .cm-chip button:hover { background: #fff; }
.cm-chip.is-uploading { color: var(--text-2); background: #F3F4F8; }
/* mention popover */
.cm-mentions { position: absolute; z-index: 80; width: 296px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 40px rgba(23,27,45,0.16); padding: 6px; }
.cm-mentions .row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border-radius: 8px; background: transparent; border: 0; font: inherit; text-align: left; cursor: pointer; }
.cm-mentions .row:hover, .cm-mentions .row.is-focus { background: #E9EEFF; }
.cm-mentions .mini-avatar { width: 36px; height: 36px; font-size: 12px; background: #DCE3FF; color: var(--indigo); }
.cm-mentions .name { display: block; font-size: 15px; font-weight: 600; } .cm-mentions .handle { display: block; font-size: 13px; color: var(--muted); }
.cm-mentions .empty { padding: 10px 12px; font-size: 14px; color: var(--muted); }
/* files tab / card / attached files */
.fl-head { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; } .fl-head h3 { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 10px; margin: 0; } .fl-head .btn-outline { margin-left: auto; }
.fl-list { display: flex; flex-direction: column; gap: 10px; } .fl-list .fl-card { min-width: 0; } .fl-list .note { font-size: 13px; color: var(--text-2); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-drop { margin-top: 12px; border: 1.5px dashed var(--border); border-radius: 10px; padding: 16px; text-align: center; color: var(--muted); font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; } .fl-drop .i { font-size: 20px; } .fl-drop.is-over { border-color: var(--indigo); background: var(--indigo-bg); color: var(--indigo); }
.fl-progress { height: 4px; border-radius: 2px; background: var(--track, #E9ECF3); margin-top: 6px; overflow: hidden; } .fl-progress span { display: block; height: 100%; background: var(--indigo); width: 0; transition: width .2s; }
/* preview modal */
.pv-backdrop { position: fixed; inset: 0; background: rgba(23,27,45,0.45); z-index: 60; display: grid; place-items: center; padding: 16px; }
.pv-modal { width: 1040px; max-width: 100%; height: 826px; max-height: 100%; background: #fff; border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 64px rgba(23,27,45,0.28); }
.pv-top { display: flex; align-items: center; gap: 16px; height: 76px; padding: 0 22px 0 24px; border-bottom: 1px solid var(--border); flex: none; }
.pv-top .back { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; color: var(--text); } .pv-top .back:hover { background: #F3F4F8; } .pv-top .back .i { font-size: 26px; }
.pv-top .name { font-size: 20px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pv-top .page { font-size: 16px; color: var(--text-2); margin-left: 14px; white-space: nowrap; }
.pv-zoom { margin-left: auto; display: flex; align-items: center; height: 46px; border: 1px solid var(--border); border-radius: 10px; }
.pv-zoom button { width: 46px; height: 44px; display: grid; place-items: center; color: var(--text); } .pv-zoom button:hover { background: #F3F4F8; } .pv-zoom button .i { font-size: 20px; } .pv-zoom .val { min-width: 60px; text-align: center; font-size: 16px; font-weight: 600; }
.pv-icon { width: 50px; height: 46px; border: 1px solid var(--border); border-radius: 10px; display: grid; place-items: center; color: var(--text); } .pv-icon:hover { background: #F3F4F8; } .pv-icon .i { font-size: 22px; }
.pv-top .close { width: 44px; height: 44px; display: grid; place-items: center; color: var(--text); margin-left: 18px; } .pv-top .close .i { font-size: 28px; }
.pv-main { flex: 1; display: flex; min-height: 0; }
.pv-stage { flex: 1; background: #F3F4F8; overflow: auto; padding: 26px 0; display: flex; justify-content: center; align-items: flex-start; }
.pv-stage iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.pv-stage img { max-width: 100%; box-shadow: 0 4px 24px rgba(23,27,45,0.12); background: #fff; }
.pv-none { margin: auto; text-align: center; color: var(--muted); font-size: 15px; display: flex; flex-direction: column; gap: 14px; align-items: center; } .pv-none .fl-badge { width: 64px; height: 64px; font-size: 14px; border-radius: 12px; }
.pv-side { width: 354px; flex: none; border-left: 1px solid var(--border); overflow: auto; display: flex; flex-direction: column; }
.pv-tabs { display: flex; gap: 6px; padding: 0 24px; border-bottom: 1px solid var(--border); flex: none; }
.pv-tab { display: inline-flex; align-items: center; gap: 10px; padding: 20px 8px 16px; font-size: 16px; font-weight: 600; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; }
.pv-tab .i { font-size: 22px; } .pv-tab.is-active { color: var(--indigo); border-bottom-color: var(--indigo); }
.pv-pane { padding: 6px 24px 24px; } .pv-lbl { font-size: 15px; color: var(--muted); margin: 20px 0 6px; } .pv-val { font-size: 17px; font-weight: 600; color: var(--text); }
.pv-user { display: flex; align-items: center; gap: 12px; } .pv-user .mini-avatar { width: 48px; height: 48px; font-size: 15px; background: #DCE3FF; color: var(--indigo); } .pv-user .when { font-size: 15px; color: var(--text-2); font-weight: 400; margin-top: 2px; }
.pv-crumb { display: flex; gap: 10px; font-size: 16px; line-height: 1.5; } .pv-crumb .i { font-size: 22px; color: var(--indigo); flex: none; margin-top: 2px; } .pv-crumb a { color: var(--indigo); font-weight: 600; } .pv-crumb .sep { color: var(--indigo); margin: 0 4px; }
.pv-note { border: 1px solid var(--border); border-radius: 10px; background: #F7F8FB; padding: 14px 16px; font-size: 15px; color: var(--text); cursor: text; } .pv-note.is-empty { color: var(--muted); font-style: italic; }
.pv-foot { height: 74px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: center; gap: 14px; flex: none; font-size: 16px; font-weight: 600; }
.pv-foot .pager { width: 52px; height: 48px; border: 1px solid var(--border); border-radius: 10px; display: grid; place-items: center; color: var(--text); } .pv-foot .pager:hover { background: #F3F4F8; } .pv-foot .pager:disabled { color: var(--muted-2); cursor: default; background: transparent; } .pv-foot .pager .i { font-size: 22px; }
@media (max-width: 640px) { .pv-modal { height: 100%; border-radius: 0; } .pv-main { flex-direction: column; } .pv-side { width: auto; border-left: 0; border-top: 1px solid var(--border); } .cm-mentions { position: fixed; left: 8px !important; right: 8px; bottom: 8px; top: auto !important; width: auto; } }
.cm-item.is-highlight > .cm-body > .cm-bubble { box-shadow: 0 0 0 2px var(--indigo); }
.cm-error { margin-top: 8px; font-size: 13px; color: #B42339; }
.cm-composer.cm-inline { margin-top: 16px; border-color: var(--border); box-shadow: none; } .cm-composer.cm-inline:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.fl-row .txt .note { display: block; } .fl-row.is-error .meta { color: #B42339; } .fl-row.is-uploading { cursor: default; }
.fl-list .fl-card .chev { display: none; } .fl-card .chev { margin-left: auto; font-size: 18px; color: var(--text-2); }
.pv-stage iframe { width: 100%; height: 100%; } .pv-stage:has(iframe) { padding: 0; }
.sr-hit .path.snip { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sr-hit .path.snip mark, .sr-table .snip mark { background: #FFF1B8; padding: 0 2px; border-radius: 3px; }
.ap .files, .mt .files { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); } .ap .files .i, .mt .files .i { font-size: 15px; }
.ap-file[type=button] { width: 100%; background: transparent; border: 0; border-top: 1px solid var(--border-soft); text-align: left; font: inherit; color: var(--text); cursor: pointer; } .ap-file[type=button]:hover .name { color: var(--indigo); }

/* ---------- MM-36 · Activity and change history (ac-) ---------- */
.ac-card { padding: 22px 26px 18px; }
.ac-head { display: flex; align-items: flex-start; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.ac-head h2 { font-size: 27px; font-weight: 800; letter-spacing: -.3px; margin: 0 0 6px; } .ac-head .sub { font-size: 17px; color: var(--muted); }
.ac-filters { margin-left: auto; display: flex; gap: 14px; flex: none; }
.ac-dd { display: inline-flex; align-items: center; gap: 12px; height: 46px; padding: 0 16px 0 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 16px; font-weight: 500; color: var(--text); min-width: 220px; }
.ac-dd .i { margin-left: auto; font-size: 20px; color: var(--text-2); } .ac-dd:hover { background: #FAFBFD; } .ac-dd.is-open { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.ac-dd .mini-avatar { width: 26px; height: 26px; font-size: 11px; }
.ac-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 12px; border-radius: 8px; background: var(--indigo-bg); color: var(--indigo); font-size: 14px; font-weight: 600; margin-top: 12px; }
.ac-chip button { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--indigo); } .ac-chip button:hover { background: #fff; }
.ac-live { display: none; margin: 14px 0 0; } .ac-live.is-on { display: inline-flex; } .ac-live button { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 18px; background: var(--indigo); color: #fff; font-weight: 600; font-size: 14px; }
.ac-day { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 22px 0 4px 62px; }
.ac-list { list-style: none; margin: 0; padding: 0; }
.ac-row { display: grid; grid-template-columns: 46px 118px 190px minmax(0, 1fr) auto; column-gap: 20px; align-items: start; padding: 22px 0; position: relative; border-bottom: 1px solid var(--border-soft); }
.ac-row:last-child { border-bottom: 0; }
.ac-row::before { content: ""; position: absolute; left: 22px; top: 0; bottom: 0; width: 2px; background: var(--border); }
.ac-list > .ac-row:first-child::before, .ac-day + .ac-row::before { top: 22px; } .ac-row.is-last::before { bottom: auto; height: 46px; }
.ac-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; position: relative; z-index: 1; box-shadow: 0 0 0 4px var(--surface); } .ac-ic .i { font-size: 22px; }
.ac-ic.indigo { background: var(--indigo); } .ac-ic.amber { background: var(--amber); } .ac-ic.violet { background: #7C3AED; } .ac-ic.green { background: var(--green); } .ac-ic.red { background: var(--red); } .ac-ic.grey { background: #8A90A2; } .ac-ic.rose { background: #E0577A; }
.ac-when { font-size: 16px; color: var(--text-2); line-height: 1.45; padding-top: 2px; } .ac-when b { display: block; font-weight: 500; color: var(--text); }
.ac-who { display: flex; align-items: center; gap: 12px; padding-top: 2px; font-size: 16px; font-weight: 700; } .ac-who .mini-avatar { width: 44px; height: 44px; font-size: 14px; flex: none; }
.ac-who .mini-avatar.aw { background: #FDE7EF; color: #B42339; } .ac-who .mini-avatar.dr { background: #E4F7EE; color: #0B7A4B; } .ac-who .mini-avatar.t { background: #DDE2F1; color: #3D4354; } .ac-who .mini-avatar.mf { background: #FFF1E7; color: #C2410C; }
.ac-what { min-width: 0; padding-top: 2px; } .ac-what .sentence { font-size: 17px; color: var(--text); line-height: 1.4; } .ac-what .path { margin-top: 6px; font-size: 15px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ac-what .path a { color: var(--indigo); font-weight: 500; } .ac-what .path a:hover { text-decoration: underline; } .ac-what .path .sep { color: var(--indigo); } .ac-what .path .plain { color: var(--text-2); }
.ac-change { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 520px; padding-top: 2px; }
.ac-diff { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; } .ac-diff .arr { color: var(--text-2); font-size: 20px; }
.ac-box { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 8px; font-size: 16px; font-weight: 600; background: #F3F4F8; color: var(--text); white-space: nowrap; }
.ac-box.old { color: var(--text-2); } .ac-box.green { background: #E7F7F0; color: var(--green-text); } .ac-box.indigo { background: #EEF1FF; color: var(--indigo); } .ac-box.amber { background: #FFF1DD; color: #B5620A; } .ac-box.red { background: #FDECEF; color: #B42339; } .ac-box.grey { background: #F3F4F8; color: var(--text-2); }
.ac-box.chip { font-weight: 600; } .ac-box .i { font-size: 18px; margin-right: 8px; }
.ac-box.file { background: #fff; border: 1px solid var(--border); color: var(--indigo); gap: 8px; cursor: pointer; } .ac-box.file:hover { border-color: #C9D2FF; }
.ac-box.quote { background: #F7F8FB; color: var(--text-2); font-weight: 400; font-style: italic; white-space: normal; height: auto; padding: 8px 14px; line-height: 1.4; max-width: 420px; cursor: pointer; }
.ac-note { font-size: 15px; color: var(--text-2); line-height: 1.45; } .ac-note b { font-weight: 600; color: var(--text-2); }
.ac-more { display: flex; justify-content: center; padding: 18px 0 4px; } .ac-end { text-align: center; font-size: 14px; color: var(--muted); padding: 18px 0 4px; }
.ac-foot { margin-top: 18px; display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 10px; background: #F3F5FB; color: var(--text-2); font-size: 15px; } .ac-foot .i { font-size: 22px; color: var(--indigo); flex: none; }
.ac-empty { text-align: center; padding: 40px 20px; color: var(--muted); font-size: 15px; } .ac-empty b { display: block; color: var(--text); font-size: 17px; margin-bottom: 6px; }
.ac-menu .menu-row { display: flex; align-items: center; gap: 10px; } .ac-menu .mini-avatar { width: 26px; height: 26px; font-size: 11px; }
@media (max-width: 980px) { .ac-row { grid-template-columns: 46px 1fr; row-gap: 8px; } .ac-who { grid-column: 2; } .ac-what, .ac-change { grid-column: 2; } .ac-filters { margin-left: 0; width: 100%; } .ac-head { flex-wrap: wrap; } }
.ac-list-frag.is-loading, #ac-list-host.is-loading { opacity: .5; pointer-events: none; }
.ac-day { list-style: none; } .ac-list > .ac-day + .ac-row::before { top: 22px; }
.ac-box.file.is-gone { color: var(--muted); text-decoration: line-through; cursor: default; } .ac-box.file .i { font-size: 18px; margin-right: 8px; }
.ac-box.pills .sdot, .ac-box .sdot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; margin-right: 8px; display: inline-block; }
.ac-box.chip .i { font-size: 16px; margin: 0 0 0 8px; }
.ac-menu { left: 0; right: auto; top: 52px; min-width: 100%; } .ac-menu button { white-space: nowrap; }

/* ---------- MM-37 · Members and access (mb-) ---------- */
.mb-head { display: flex; align-items: flex-start; gap: 16px; } .mb-head h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.3px; } .mb-head .sub { font-size: 16px; color: var(--text-2); margin-top: 4px; }
.mb-head .btn-primary { margin-left: auto; height: 46px; padding: 0 20px; font-size: 16px; }
.mb-card { padding: 20px 24px 10px; margin-top: 16px; } .mb-card h3 { margin: 0; font-size: 22px; font-weight: 700; display: flex; align-items: baseline; gap: 12px; } .mb-card h3 .sub { font-size: 15px; color: var(--muted); font-weight: 400; }
.mb-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.mb-table th { text-align: left; font-size: 15px; font-weight: 600; color: var(--text); padding: 12px 14px; border-bottom: 1px solid var(--border); background: #F9FAFC; white-space: nowrap; }
.mb-table th button { display: inline-flex; align-items: center; gap: 6px; font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; } .mb-table th .i { font-size: 16px; color: var(--text-2); }
.mb-table td { padding: 12px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; font-size: 15px; } .mb-table tr:last-child td { border-bottom: 0; }
.mb-table td + td, .mb-table th + th { border-left: 1px solid var(--border-soft); }
.mb-who { display: flex; align-items: center; gap: 12px; } .mb-who .av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700; color: #fff; background: var(--indigo); flex: none; }
.mb-who .av.owner { background: #2F3A8F; } .mb-who .av.admin { background: #3B5BFD; } .mb-who .av.project_owner { background: #5B4BD6; } .mb-who .av.contributor { background: #E0577A; } .mb-who .av.viewer { background: #8A90A2; }
.mb-who b { display: block; font-size: 16px; font-weight: 700; } .mb-who .mail { display: block; font-size: 14px; color: var(--muted); }
.mb-role { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 8px; font-size: 15px; font-weight: 600; white-space: nowrap; } .mb-role .i { font-size: 18px; }
.mb-role.owner { background: #EEE9FF; color: #5B3FBF; } .mb-role.admin { background: #E7ECFF; color: #2F3A8F; } .mb-role.project_owner { background: #E4F7EE; color: #0B7A4B; } .mb-role.contributor { background: #EEF1FF; color: #3B5BFD; } .mb-role.viewer { background: #F3F4F8; color: var(--text-2); }
.mb-chips { display: flex; flex-wrap: wrap; gap: 8px; } .mb-chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 6px; border-radius: 8px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.mb-chip .pav { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #fff; }
.mb-chip.all { background: #EEF1FF; color: var(--indigo); padding-left: 12px; } .mb-chip.sh { background: #FFF1E7; color: #C2410C; } .mb-chip.so { background: #FFF4DB; color: #B5620A; } .mb-chip.eq { background: #E7ECFF; color: #2F3A8F; } .mb-chip.vc { background: #EEE9FF; color: #5B3FBF; } .mb-chip.none { background: #F3F4F8; color: var(--muted); padding-left: 12px; }
.mb-status { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; } .mb-status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--green); } .mb-status.active { color: var(--green-text); }
.mb-status.pending { color: #B5620A; } .mb-status.pending::before { background: var(--amber); } .mb-status.expired { color: var(--muted); } .mb-status.expired::before { background: #C5CAD8; }
.mb-when { font-size: 15px; color: var(--text-2); white-space: nowrap; }
.mb-table .dots { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); } .mb-table .dots:hover { background: #F3F4F8; }
.mb-acts { display: flex; gap: 12px; } .mb-acts .btn-outline { height: 42px; gap: 8px; } .mb-acts .btn-outline.danger { color: #D63A4E; border-color: #F5C2CB; } .mb-acts .btn-outline.danger:hover { background: #FDECEF; }
/* dialogs */
.mb-modal { width: 580px; } .mb-modal.wide { width: 720px; }
.mb-modal .np-head { padding: 24px 28px 0; } .mb-modal .np-head h2 { display: flex; align-items: center; gap: 12px; font-size: 26px; } .mb-modal .np-head h2 .i { font-size: 30px; color: var(--indigo); }
.mb-body { padding: 18px 28px 6px; } .mb-body .np-field > label { font-size: 16px; }
.mb-body .np-field .hint { font-size: 13px; color: var(--muted); margin-top: 6px; background: transparent; padding: 0; border: 0; } .mb-body .counter { text-align: right; font-size: 13px; color: var(--muted); margin-top: 6px; }
.mb-body textarea.np-input { height: 92px; padding: 12px 14px; resize: vertical; align-items: flex-start; }
.mb-foot { display: flex; justify-content: flex-end; gap: 12px; padding: 12px 28px 24px; } .mb-foot .btn-outline, .mb-foot .btn-primary { height: 46px; padding: 0 22px; font-size: 16px; } .mb-foot .btn-primary.danger { background: #D63A4E; }
.mb-member { display: flex; align-items: center; gap: 14px; margin: 4px 0 18px; } .mb-member .av { width: 60px; height: 60px; border-radius: 50%; background: var(--indigo); color: #fff; font-size: 18px; font-weight: 700; display: grid; place-items: center; }
.mb-member b { display: block; font-size: 18px; } .mb-member .mail { font-size: 15px; color: var(--muted); }
.mb-roles { display: grid; grid-template-columns: 1fr 24px 1fr; gap: 14px; align-items: end; margin-bottom: 16px; } .mb-roles .arr { color: var(--text-2); font-size: 22px; text-align: center; padding-bottom: 12px; }
.mb-roles .np-input.ro { background: #F3F5FB; color: var(--text-2); border-color: transparent; }
.mb-warn { display: flex; gap: 12px; padding: 14px 16px; border-radius: 10px; background: #FFF5E8; border: 1px solid #FFD9AD; margin-bottom: 16px; } .mb-warn .ic { width: 30px; height: 30px; border-radius: 50%; background: var(--amber); color: #fff; display: grid; place-items: center; flex: none; } .mb-warn b { display: block; font-size: 16px; color: #8A4B08; } .mb-warn span { font-size: 14px; color: #8A4B08; }
.mb-list { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-top: 10px; }
.mb-task { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto auto; gap: 14px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--border-soft); } .mb-task:first-child { border-top: 0; }
.mb-task .chk { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--border); display: grid; place-items: center; color: #fff; cursor: pointer; } .mb-task .chk.is-on { background: var(--indigo); border-color: var(--indigo); } .mb-task .chk .i { font-size: 14px; }
.mb-task .ttl { font-size: 15px; font-weight: 600; } .mb-task .path { font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-task .pct { font-size: 14px; font-weight: 600; min-width: 36px; text-align: right; } .mb-task .due { font-size: 14px; color: var(--text-2); white-space: nowrap; }
.mb-info { display: flex; gap: 12px; padding: 14px 16px; border-radius: 10px; background: #EEF1FF; margin-top: 14px; font-size: 14px; color: var(--text-2); line-height: 1.45; } .mb-info .i { font-size: 22px; color: var(--indigo); flex: none; } .mb-info b { color: var(--text); }
.mb-link { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: #F7F8FB; font-size: 14px; color: var(--text-2); word-break: break-all; margin-top: 8px; } .mb-link .btn-outline { flex: none; height: 36px; }
.mb-sent { text-align: center; padding: 10px 0 6px; } .mb-sent .ic { width: 64px; height: 64px; border-radius: 50%; background: #E4F7EE; color: var(--green); display: grid; place-items: center; margin: 0 auto 14px; } .mb-sent .ic .i { font-size: 32px; } .mb-sent b { display: block; font-size: 20px; margin-bottom: 4px; }
/* project access section (MM-18 rebuilt) */
.mb-team .st-table td { vertical-align: middle; } .mb-team-head { display: flex; align-items: center; gap: 12px; margin-top: 16px; } .mb-team-head .btn-outline { height: 40px; } .mb-team-head .spacer { flex: 1; }
.mb-access { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 8px; font-size: 14px; font-weight: 600; background: #F3F4F8; color: var(--text-2); } .mb-access.full { background: #EEE9FF; color: #5B3FBF; } .mb-access.owner { background: #E4F7EE; color: #0B7A4B; } .mb-access.edit { background: #EEF1FF; color: var(--indigo); }
@media (max-width: 760px) { .mb-table thead { display: none; } .mb-table tr { display: block; padding: 10px 0; } .mb-table td { display: block; border: 0 !important; padding: 4px 0; } .mb-roles { grid-template-columns: 1fr; } .mb-roles .arr { display: none; } .mb-modal, .mb-modal.wide { width: 100%; } }
.mb-task input[hidden] { display: none; } label.mb-task { cursor: pointer; }
.mb-menu button.danger { color: #D63A4E; }
#members-host .np-backdrop { z-index: 65; }
.mb-body .np-field .i { font-size: 18px; color: var(--indigo); vertical-align: -3px; }
.mb-team h2 { display: flex; align-items: center; gap: 12px; }
.mb-body { overflow: auto; min-height: 0; }

/* ---------- MM-38 · Workspace switcher and user menu (sm-) ---------- */
.ws-card[aria-expanded="true"] { border-color: var(--indigo); background: #F7F8FF; } .ws-card[aria-expanded="true"] .i, .avatar-btn[aria-expanded="true"] .i { transform: rotate(180deg); color: var(--indigo); }
.sm-pop { position: fixed; z-index: 58; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 44px rgba(23,27,45,0.16); padding: 10px; }
.sm-pop[hidden] { display: none; } .sm-pop:focus { outline: 0; }
.sm-ws { width: 272px; }
.sm-search { display: flex; align-items: center; gap: 10px; height: 40px; border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; margin: 2px 2px 10px; }
.sm-search .i { font-size: 20px; color: var(--muted); flex: none; } .sm-search input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; min-width: 0; }
.sm-search:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-ring, rgba(59,91,253,0.18)); }
.sm-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow: auto; }
.sm-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 8px; border-radius: 10px; text-align: left; font-size: 15.5px; font-weight: 500; color: var(--text); min-height: 48px; }
.sm-row:hover, .sm-row.is-hl { background: #F3F4F8; } .sm-row.is-current { background: var(--indigo-bg); font-weight: 600; } .sm-row.is-current:hover { background: #E4E9FF; }
.sm-row .av { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; font-size: 15px; font-weight: 700; color: #fff; background: #3F4562; flex: none; }
.sm-row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-row .tick { font-size: 22px; color: var(--indigo); margin-left: auto; flex: none; }
.sm-empty { padding: 14px 10px; font-size: 14px; color: var(--muted); text-align: center; }
.sm-sep { height: 1px; background: var(--border-soft); margin: 8px 6px; }
.sm-create { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 10px; color: var(--indigo); font-size: 16px; font-weight: 500; text-align: left; }
.sm-create:hover { background: var(--indigo-bg); } .sm-create .i { font-size: 22px; }
.sm-user { width: 262px; padding: 12px 10px 10px; }
.sm-user .head { display: flex; align-items: center; gap: 14px; padding: 6px 8px 14px; }
.sm-user .head .user-photo { width: 56px; height: 56px; box-shadow: 0 0 0 3px #EEF1FF; }
.sm-user .head b { display: block; font-size: 17px; font-weight: 700; line-height: 1.2; } .sm-user .head span { font-size: 14px; color: var(--muted); }
.sm-item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 12px; border-radius: 10px; font-size: 16px; font-weight: 500; color: var(--text); text-align: left; min-height: 44px; }
.sm-item:hover, .sm-item.is-hl { background: #F3F4F8; } .sm-item .i { font-size: 22px; color: var(--text-2); }
.sm-lang { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 8px 12px 4px; font-size: 15px; color: var(--text-2); cursor: default; }
.sm-lang .i { font-size: 20px; } .sm-lang .chev { font-size: 18px; color: var(--muted); }
.sm-pop form { margin: 0; }
/* dialogs (np- frame) */
.sm-modal { width: 520px; } .sm-modal.profile { width: 560px; }
.sm-modal .np-head { padding: 24px 28px 0; } .sm-modal .np-head h2 { font-size: 26px; }
.sm-body { padding: 18px 28px 6px; overflow: auto; min-height: 0; } .sm-body .np-field > label { font-size: 16px; }
.sm-body .np-input.ro { background: #F7F8FA; color: var(--text-2); }
.sm-addr { display: flex; align-items: center; gap: 0; } .sm-addr .pre { height: 46px; display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--border); border-right: 0; border-radius: 10px 0 0 10px; background: #F7F8FA; color: var(--muted); font-size: 15px; white-space: nowrap; }
.sm-addr .np-input { flex: 1; border-radius: 0 10px 10px 0; }
.sm-body .hint { font-size: 13px; color: var(--muted); margin-top: 6px; }
.sm-body .ok { font-size: 13px; color: #0B8F5E; margin-top: 6px; }
.sm-pw-link { color: var(--indigo); font-weight: 600; font-size: 15px; background: none; padding: 0; }
.sm-pw { border-top: 1px solid var(--border-soft); margin-top: 8px; padding-top: 16px; }
.sm-pw h3 { margin: 0 0 12px; font-size: 17px; }
.sm-foot { display: flex; justify-content: flex-end; gap: 12px; padding: 12px 28px 24px; } .sm-foot .btn-outline, .sm-foot .btn-primary { height: 46px; padding: 0 22px; font-size: 16px; font-weight: 600; }
@media (max-width: 640px) { .sm-pop { left: 12px !important; right: 12px !important; width: auto; top: auto !important; bottom: 12px !important; } .sm-modal { width: 100%; } }
.avatar-btn { border-radius: 8px; padding: 2px 4px; } .avatar-btn:hover { background: #F3F4F8; }
.sm-body .np-err.hint, .sm-body .np-err.ok { color: inherit; }
.sm-body .np-field .hint { background: transparent; padding: 0; border: 0; color: var(--muted); }

/* ---------- MM-39 · Personal settings and digests (ps- / ns-) ---------- */
.ps-page .wst-head { padding: 0 0 10px; } .ps-page .wst-tabs { margin-bottom: 12px; }
.ps-tabs a.is-active { background: var(--indigo); color: #fff; } .ps-tabs a.is-active .i { color: #fff; }
.ps-grid { display: grid; grid-template-columns: 448px minmax(0, 1fr); gap: 16px; align-items: start; }
.ps-bottom { display: grid; grid-template-columns: minmax(0, 1fr) 312px; gap: 16px; align-items: end; margin-top: 10px; } .ps-page .wst-card { padding-bottom: 14px; } .ps-page .wst-card h2 { font-size: 23px; }
.ps-foot { display: flex; justify-content: flex-end; gap: 12px; padding-bottom: 4px; }
.ps-foot .btn-outline, .ps-foot .btn-primary { height: 50px; padding: 0 30px; font-size: 17px; font-weight: 600; } .ps-foot .btn-primary .i { font-size: 22px; }
.ps-avatar { display: flex; justify-content: center; margin: 10px 0 8px; } .ps-avatar .ring { position: relative; width: 96px; height: 96px; }
.ps-avatar .user-photo { display: block; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px #EEF1FF; } .ps-avatar .user-photo svg { width: 100%; height: 100%; }
.ps-avatar .cam { position: absolute; right: -2px; bottom: 2px; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(23,27,45,0.12); display: grid; place-items: center; color: var(--text-2); } .ps-avatar .cam .i { font-size: 20px; } .ps-avatar .cam:disabled { cursor: default; }
.ps-field { margin-bottom: 10px; } .ps-field > label:not(.wst-input), .ps-field > .lbl { display: block; font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.ps-field .wst-input { width: 100%; } .ps-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ps-field .wst-input.ro, .ps-field .wst-input:has(select:disabled) { background: #F7F8FA; color: var(--text-2); }
.ps-note { display: flex; gap: 12px; align-items: flex-start; padding: 10px 14px; border-radius: 10px; background: var(--indigo-bg-2); color: var(--text-2); font-size: 14px; margin-top: 4px; } .ps-note .i { font-size: 22px; color: var(--indigo); flex: none; }
.ns-table { width: 100%; border: 1px solid var(--border); border-radius: 10px; border-collapse: separate; border-spacing: 0; margin-top: 12px; overflow: hidden; }
.ns-table th { background: #FAFBFD; font-size: 15px; font-weight: 600; text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.ns-table th.c { text-align: center; width: 230px; } .ns-table th .i { font-size: 20px; color: var(--text-2); vertical-align: -5px; margin-right: 8px; }
.ns-table td { padding: 5px 16px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; } .ns-table tr:last-child td { border-bottom: 0; }
.ns-table td.c { text-align: center; } .ns-table td.c .toggle { display: inline-block; vertical-align: middle; }
.ns-table b { display: block; font-size: 16px; font-weight: 600; } .ns-table span.sub { font-size: 14px; color: var(--muted); }
.ns-toggle[aria-checked="true"] { background: var(--indigo); }
.ns-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px 8px 0; } .ns-row + .ns-row { padding-top: 12px; }
.ns-row b { display: block; font-size: 16px; font-weight: 600; } .ns-row .sub { font-size: 14px; color: var(--muted); }
.ns-row .wst-input { width: 340px; } .ns-row .ctl { display: flex; align-items: center; gap: 14px; }
.ns-row .time { width: 112px; font-size: 15px; } .ns-row .dash { color: var(--muted); } .ns-row .wst-input:has(select:disabled) { opacity: .55; }
.ps-follows table { width: 100%; border: 1px solid var(--border); border-radius: 10px; border-collapse: separate; border-spacing: 0; margin-top: 10px; overflow: hidden; }
.ps-follows td { padding: 5px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; font-size: 16px; } .ps-follows tr:last-child td { border-bottom: 0; }
.ps-follows .who { display: flex; align-items: center; gap: 14px; font-weight: 600; } .ps-follows .who .i { font-size: 22px; color: var(--text-2); }
.ps-follows .pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px; font-size: 13px; font-weight: 600; }
.ps-follows .pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ps-follows .pill.startup { background: #FFF3E0; color: #C77700; } .ps-follows .pill.business { background: #E6F7F1; color: #0B8F5E; }
.ps-follows td.act { text-align: right; } .ps-follows a.unfollow { color: var(--indigo); font-size: 14px; font-weight: 500; }
.ps-follows .empty { padding: 18px 14px; color: var(--muted); font-size: 14px; }
.ps-count { display: inline-grid; place-items: center; min-width: 34px; height: 30px; padding: 0 10px; border-radius: 8px; background: var(--green-bg); color: var(--green-text); font-size: 18px; font-weight: 700; margin-left: 10px; vertical-align: 2px; }
@media (max-width: 900px) { .ps-grid, .ps-bottom { grid-template-columns: minmax(0, 1fr); } .ns-table th.c { width: 90px; } .ns-row { flex-direction: column; align-items: flex-start; } .ns-row .wst-input { width: 100%; } }
.ps-follows .who a { color: inherit; } .ps-follows .who a:hover b { text-decoration: underline; }
.ps-page .np-err { font-size: 13px; color: #D63A4E; margin-top: 6px; }

/* ---------- MM-40 · Pause project (pz-) and Archived projects / Restore (ar-) ---------- */
.pz-modal { width: 640px; }
.pz-modal .np-head { padding: 24px 28px 0; align-items: flex-start; } .pz-modal .np-head .t { display: flex; gap: 14px; align-items: flex-start; }
.pz-modal .np-head .ic { width: 40px; height: 40px; border-radius: 50%; background: #FFF1E7; color: #E07A16; display: grid; place-items: center; flex: none; margin-top: 2px; } .pz-modal .np-head .ic .i { font-size: 22px; }
.pz-modal .np-head h2 { font-size: 26px; } .pz-modal .np-head .sub { max-width: 470px; }
.pz-body { padding: 18px 28px 6px; overflow: auto; min-height: 0; } .pz-body .np-field > label { font-size: 16px; } .pz-body .np-field .req { color: #D63A4E; margin-left: 4px; }
.pz-body textarea.np-input { height: 68px; padding: 10px 14px; resize: vertical; align-items: flex-start; } .pz-body .counter { text-align: right; font-size: 13px; color: var(--muted); margin-top: 4px; }
.pz-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .pz-body .np-input.ro { background: #F3F5FB; color: var(--text-2); }
.pz-body .np-field .hint, .pz-body .hint { font-size: 13px; color: var(--muted); margin-top: 6px; background: transparent; padding: 0; border: 0; }
.pz-date { display: flex; align-items: center; gap: 10px; } .pz-date .i.cal { font-size: 20px; color: var(--text-2); } .pz-date input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; min-width: 0; }
.pz-date button.clr { color: var(--muted); font-size: 18px; } .pz-date button.clr:hover { color: var(--text); }
.pz-info { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: var(--indigo-bg-2); color: var(--text-2); font-size: 14px; margin: 4px 0 16px; } .pz-info .i { font-size: 22px; color: var(--indigo); flex: none; }
.pz-body h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; }
.pz-list { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.pz-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) 190px 110px; gap: 12px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--border-soft); min-height: 54px; } .pz-row:last-child { border-bottom: 0; }
.pz-row .i.type { font-size: 22px; color: var(--text-2); } .pz-row b { display: block; font-size: 15px; font-weight: 600; } .pz-row .path { font-size: 13px; color: var(--muted); }
.pz-row .who { display: flex; align-items: center; gap: 8px; font-size: 14px; } .pz-row .who .av { width: 28px; height: 28px; border-radius: 50%; background: #3B5BFD; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.pz-row .due { text-align: right; font-size: 14px; color: var(--text-2); } .pz-row .due.over { color: #D63A4E; font-weight: 600; }
.pz-empty { padding: 14px; font-size: 14px; color: var(--muted); }
.pz-foot { display: flex; justify-content: flex-end; gap: 12px; padding: 14px 28px 24px; } .pz-foot .btn-outline, .pz-foot .btn-primary { height: 50px; padding: 0 26px; font-size: 17px; font-weight: 600; } .pz-foot .btn-primary .i { font-size: 20px; }
/* the archived projects page */
.ar-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.ar-table th { text-align: left; font-size: 15px; font-weight: 600; padding: 14px 16px; border-bottom: 1px solid var(--border); background: #FAFBFD; }
.ar-table th button { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 600; color: inherit; } .ar-table th button .i { font-size: 16px; color: var(--muted); }
.ar-table td { padding: 12px 16px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; font-size: 15px; } .ar-table tr:last-child td { border-bottom: 0; }
.ar-table tr.is-open td { background: var(--indigo-bg-2); }
.ar-table .who { display: flex; align-items: center; gap: 14px; font-weight: 600; font-size: 16px; } .ar-table .who .av { width: 40px; height: 40px; border-radius: 10px; color: #fff; font-size: 14px; font-weight: 700; display: grid; place-items: center; }
.ar-stage { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 14px; background: #ECEFF5; color: var(--text-2); font-size: 13px; font-weight: 600; }
.ar-table td.act { text-align: right; } .ar-table .btn-outline { height: 44px; padding: 0 18px; gap: 10px; border-color: var(--indigo); color: var(--indigo); font-weight: 600; } .ar-table .btn-outline .i { font-size: 20px; }
.ar-note { font-size: 14px; color: var(--muted); margin-top: 10px; }
/* the restore drawer */
.ar-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 445px; background: var(--surface); border-left: 1px solid var(--border); box-shadow: -12px 0 32px rgba(23,27,45,0.08); z-index: 55; display: flex; flex-direction: column; }
.ar-drawer[hidden] { display: none; }
.ar-drawer .head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px 12px; } .ar-drawer .head h2 { margin: 0; font-size: 24px; font-weight: 700; } .ar-drawer .head .close { color: var(--text-2); font-size: 26px; }
.ar-drawer .body { padding: 4px 24px 12px; overflow: auto; flex: 1; min-height: 0; }
.ar-card { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .ar-card .av { width: 54px; height: 54px; border-radius: 12px; color: #fff; font-size: 17px; font-weight: 700; display: grid; place-items: center; flex: none; }
.ar-card b { display: block; font-size: 18px; font-weight: 700; } .ar-card span { font-size: 14px; color: var(--muted); }
.ar-info { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: var(--indigo-bg-2); color: var(--text-2); font-size: 14px; margin-bottom: 18px; } .ar-info .i { font-size: 22px; color: var(--indigo); flex: none; }
.ar-drawer h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; }
.ar-state { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 18px; }
.ar-state .row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border-soft); font-size: 15px; } .ar-state .row:last-child { border-bottom: 0; }
.ar-state .row .i { font-size: 20px; color: var(--text-2); } .ar-state .row .k { color: var(--text-2); } .ar-state .row .v { font-weight: 600; }
.ar-keep { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 18px; }
.ar-keep .row { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--border-soft); font-size: 15px; } .ar-keep .row:last-child { border-bottom: 0; }
.ar-keep .row .ok { width: 24px; height: 24px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; flex: none; } .ar-keep .row .ok .i { font-size: 14px; }
.ar-warn { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: #FFF6E5; border: 1px solid #FFE1B0; margin-bottom: 8px; }
.ar-warn .ic { width: 24px; height: 24px; border-radius: 50%; background: #F59E0B; color: #fff; display: grid; place-items: center; flex: none; } .ar-warn .ic .i { font-size: 14px; }
.ar-warn b { display: block; font-size: 15px; color: #B45309; } .ar-warn span { font-size: 14px; color: #92400E; }
.ar-drawer .foot { display: flex; gap: 12px; padding: 14px 24px 24px; border-top: 1px solid var(--border-soft); } .ar-drawer .foot .btn-outline, .ar-drawer .foot .btn-primary { flex: 1; height: 52px; justify-content: center; font-size: 17px; font-weight: 600; gap: 10px; } .ar-drawer .foot .btn-primary .i { font-size: 22px; }
body.ar-drawer-open .content { margin-right: 445px; }
.ar-drawer .close:focus:not(:focus-visible) { outline: 0; }
@media (max-width: 900px) { .ar-drawer { width: 100%; } body.ar-drawer-open .content { margin-right: 0; } .pz-modal { width: 100%; } .pz-two { grid-template-columns: 1fr; } .pz-row { grid-template-columns: 26px minmax(0, 1fr); } .pz-row .who, .pz-row .due { grid-column: 2; text-align: left; } }
.ar-drawer:focus { outline: 0; }
#lifecycle-host .np-backdrop { z-index: 66; }
.ar-page .np-err { font-size: 13px; color: #D63A4E; }

/* ---------- MM-41 · Confirmation dialogs (dg-) ---------- */
.dg-backdrop { position: fixed; inset: 0; background: rgba(23,27,45,0.45); z-index: 90; display: grid; place-items: center; padding: 16px; }
.dg-backdrop[hidden] { display: none; }
.dg { width: 480px; max-width: 100%; background: var(--surface); border-radius: 20px; box-shadow: 0 30px 80px rgba(23,27,45,0.35); padding: 28px 32px 26px; position: relative; }
.dg:focus { outline: 0; }
.dg .close { position: absolute; top: 22px; right: 22px; width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); font-size: 24px; } .dg .close:hover { background: #F3F4F8; }
.dg .head { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.dg .ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; flex: none; } .dg .ic .i { font-size: 28px; }
.dg .ic.danger { background: #FDECEF; color: #D63A4E; } .dg .ic.warning { background: #FFF1E7; color: #E07A16; } .dg .ic.info { background: var(--indigo-bg); color: var(--indigo); }
.dg h2 { margin: 0; font-size: 26px; font-weight: 700; }
.dg .q { font-size: 16px; color: var(--text-2); margin: 0 0 10px; }
.dg .name { font-size: 17px; font-weight: 700; margin: 0 0 10px; }
.dg .impact { font-size: 16px; color: var(--text-2); margin: 0 0 14px; line-height: 1.45; }
.dg .strip { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: #FDECEF; color: #B42339; font-size: 15px; margin-bottom: 14px; }
.dg .strip .ic2 { width: 24px; height: 24px; border-radius: 50%; background: #D63A4E; color: #fff; display: grid; place-items: center; flex: none; } .dg .strip .ic2 .i { font-size: 14px; }
.dg .foot { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.dg .alt { display: inline-flex; align-items: center; gap: 8px; color: var(--indigo); font-size: 15px; font-weight: 500; margin-right: auto; } .dg .alt .i { font-size: 20px; } .dg .alt:hover { text-decoration: underline; }
.dg .foot .btn-outline, .dg .foot .btn-primary, .dg .btn-danger, .dg .btn-warn { height: 48px; padding: 0 22px; font-size: 16px; font-weight: 600; gap: 10px; }
.dg .btn-danger { background: #E5303F; color: #fff; border-radius: 10px; display: inline-flex; align-items: center; } .dg .btn-danger:hover { background: #C9202F; } .dg .btn-danger .i { font-size: 20px; }
.dg .btn-warn { border: 1px solid #E07A16; color: #C86A0B; background: #fff; border-radius: 10px; display: inline-flex; align-items: center; } .dg .btn-warn:hover { background: #FFF6E5; }
.dg .foot .btn-outline { border-color: var(--border); color: var(--text); }
/* the centred variant (unsaved changes) */
.dg.center { width: 470px; text-align: center; padding: 30px 32px 26px; }
.dg.center .ic { width: 64px; height: 64px; margin: 0 auto 16px; } .dg.center .ic .i { font-size: 32px; }
.dg.center h2 { font-size: 24px; margin-bottom: 8px; } .dg.center .q { margin: 0 auto 22px; max-width: 320px; line-height: 1.4; }
.dg.center .foot { justify-content: center; margin-top: 0; }
.dg.center .foot .btn-outline { border-color: var(--indigo); color: var(--indigo); } .dg.center .foot .btn-outline:hover { background: var(--indigo-bg); }
@media (max-width: 640px) { .dg .foot { flex-wrap: wrap; } .dg .alt { width: 100%; margin-bottom: 6px; } .dg .foot .btn-outline, .dg .foot .btn-primary, .dg .btn-danger, .dg .btn-warn { flex: 1 1 100%; justify-content: center; } }

/* ---------- MM-42 · Empty states (es-) ---------- */
.es { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 96px 24px 88px; }
.es .il { width: 160px; height: 160px; display: block; margin-bottom: 26px; }
.es h3, .es h2 { margin: 0 0 10px; font-size: 26px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
.es p { margin: 0; font-size: 17px; color: var(--muted); line-height: 1.45; max-width: 560px; }
.es .acts { display: flex; gap: 16px; margin-top: 28px; flex-wrap: wrap; justify-content: center; }
.es .acts .btn-primary, .es .acts .btn-outline { height: 52px; padding: 0 24px; font-size: 17px; font-weight: 600; }
.es .acts .btn-outline { border-color: var(--indigo); color: var(--indigo); }
.es .acts .i { font-size: 20px; }
/* hero (the overview of a blank workspace) */
.es.hero { padding: 40px 24px 48px; min-height: 720px; justify-content: center; }
.es.hero .il { width: 440px; height: 380px; margin-bottom: 28px; }
.es.hero h2 { font-size: 38px; margin-bottom: 12px; }
.es.hero p { font-size: 20px; max-width: 680px; }
.es.hero .acts { margin-top: 30px; }
.es.hero .acts .btn-primary { min-width: 250px; }
.es.hero .acts .btn-outline { min-width: 280px; }
/* compact (cards, panel boxes, drawers) */
.es.compact { flex-direction: row; text-align: left; align-items: flex-start; gap: 12px; padding: 22px 20px; }
.es.compact .il { width: 40px; height: 40px; margin: 0; flex: none; }
.es.compact h3 { font-size: 15px; font-weight: 700; margin: 0 0 2px; }
.es.compact p { font-size: 14px; }
.es.compact .acts { margin: 8px 0 0; justify-content: flex-start; }
/* the illustrations carry their colours as presentation attributes (document styles do not reach into <use> shadow trees) */
.il { overflow: visible; }
@media (max-width: 640px) {
  .es.hero { min-height: 0; } .es.hero .il { width: 280px; height: 242px; } .es.hero h2 { font-size: 28px; }
  .es .acts { flex-direction: column; width: 100%; } .es .acts .btn-primary, .es .acts .btn-outline { width: 100%; }
}

/* ---------- MM-43 · Loading and saving states (ld- / sv-) ---------- */
.ld-bar { display: inline-block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #E9ECF3 25%, #F4F6FB 50%, #E9ECF3 75%); background-size: 200% 100%; animation: sk 1.2s infinite; vertical-align: middle; }
.ld-block { display: inline-block; border-radius: 12px; background: #E9ECF3; animation: none; }
.ld-ring { display: inline-block; width: 44px; height: 44px; border-radius: 50%; border: 6px solid #E9ECF3; box-sizing: border-box; }
.ld-spin { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 3px solid #DCE3FF; border-top-color: var(--indigo); animation: spin 1s linear infinite; flex: none; }
/* skeleton matrix rows */
tr.ld-row td { height: 74px; border-bottom: 1px solid var(--border-soft); }
tr.ld-row .pcell { display: flex; align-items: center; gap: 12px; }
tr.ld-row .chev-ph { width: 22px; color: #C5CAD8; display: inline-flex; }
tr.ld-row .lines { display: flex; flex-direction: column; gap: 8px; }
tr.ld-row .lines .ld-bar:first-child { height: 14px; }
tr.ld-row td.c-area .ld-bar { width: 136px; }
tr.ld-row td.c-ready { text-align: center; }
/* list skeleton rows */
.ld-list-row { display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 20px; border-bottom: 1px solid var(--border-soft); }
.ld-list-row .ld-block { width: 20px; height: 20px; border-radius: 6px; }
/* card head status slot + hint */
.ld-status { display: inline-flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 700; color: var(--text); }
.ld-hint { display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: var(--indigo-bg-2); border-top: 1px solid var(--border-soft); border-radius: 0 0 var(--radius-card) var(--radius-card); font-size: 15px; color: #4B5563; }
.ld-hint .i { color: var(--indigo); font-size: 20px; }
[aria-busy="true"] .seg, [aria-busy="true"] .btn-outline, .ld-busy .toolbar .seg, .ld-busy .card-head .seg, .ld-busy .wl-card-head .seg, .ld-busy .toolbar .btn-outline, .ld-busy .card-head .btn-outline, .ld-busy .wl-card-head .btn-outline, .ld-busy .toolbar .menu-wrap { opacity: .5; pointer-events: none; }
/* pending buttons */
.is-pending { position: relative; pointer-events: none; }
.is-pending > .i { display: none; }
.is-pending::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .9s linear infinite; flex: none; }
.btn-outline.is-pending::before { border-color: #DCE3FF; border-top-color: var(--indigo); }
button:disabled.ld-locked { opacity: .5; }
/* the panel saving state */
.side-panel.is-saving .sp-grid, .side-panel.is-saving .sp-scroll { opacity: .55; pointer-events: none; }
.sv-box { display: flex; align-items: center; gap: 14px; margin: 0 24px 16px; padding: 14px 16px; border-radius: 12px; background: #F4F6FB; border: 1px solid #E4E7F0; }
.sv-box .ld-spin { width: 28px; height: 28px; border-width: 3.5px; }
.sv-box .txt { flex: 1; } .sv-box .t1 { font-size: 16px; font-weight: 700; } .sv-box .t2 { font-size: 14px; color: var(--muted); margin-top: 2px; }
.sv-box .last { text-align: right; } .sv-box .last .cap { font-size: 13px; color: var(--muted); } .sv-box .last .val { font-size: 15px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .ld-bar, .ld-spin, .is-pending::before, .skeleton, .save-state.saving .i { animation: none; } }

/* MM-43 extras (skeleton kinds used by the hosts) */
.ld-skeleton { display: block; } .ld-skeleton.ld-lines { display: flex; flex-direction: column; gap: 14px; padding: 22px 20px; }
.ld-card { padding: 20px 24px; margin-bottom: 16px; } .ld-card .pcell { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .ld-card .lines { display: flex; flex-direction: column; gap: 8px; }
.ld-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.ld-gantt { display: grid; grid-template-columns: 260px 1fr; gap: 0; padding: 16px 0; } .ld-gantt .l, .ld-gantt .r { display: flex; flex-direction: column; gap: 22px; padding: 8px 20px; }
.ld-list-row .chev-ph { width: 22px; color: #C5CAD8; display: inline-flex; }
.ld-status.ld-status { display: inline-flex; }
.wl-card-head .ld-status, .toolbar .ld-status { margin-right: 16px; }
.sp-grid.is-locked { opacity: .55; pointer-events: none; }
.is-pending.ld-static::before { animation: none; }

/* ---------- MM-44 · Error states (er-) ---------- */
/* field errors */
.it-input.is-invalid, .np-input.is-invalid, .is-invalid > .it-input { border-color: #F0546A !important; }
.it-input.is-invalid:focus, .it-input.is-invalid:focus-within, .np-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(240,84,106,.18) !important; border-color: #F0546A !important; }
.er-msg { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; color: #D63A4E; }
.er-msg .i { font-size: 16px; flex: none; }
.er-summary { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: #FDECEF; color: #D63A4E; font-size: 15px; font-weight: 600; }
.er-summary .i { font-size: 18px; }
.it-foot .btn-primary:disabled { opacity: .5; cursor: default; }
/* failed-save banner + footer status */
.er-banner { display: flex; align-items: center; gap: 12px; margin: 0 26px 6px; padding: 12px 14px; border-radius: 12px; background: #FDECEF; border: 1px solid #F9C5CE; color: #B3243A; font-size: 15px; }
.er-banner .i { font-size: 20px; color: #F0546A; flex: none; }
.er-banner .txt { flex: 1; }
.er-banner .btn-outline { height: 40px; padding: 0 16px; border-color: #D63A4E; color: #D63A4E; background: #fff; font-weight: 600; }
.er-status { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.er-status .i { font-size: 20px; color: #F0546A; margin-top: 1px; }
.er-status.warn .i { color: var(--amber); }
.er-status b { display: block; color: #D63A4E; font-weight: 600; }
.er-status.warn b { color: #B5620A; }
.er-status span { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
/* the in-shell error pages (403 / 404 / 500 / item) */
.er-page { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 120px 24px 110px; }
.er-page .il { width: 180px; height: 180px; margin-bottom: 26px; }
.er-page.item .il { width: 128px; height: 128px; }
.er-page h1, .er-page h2 { margin: 0 0 12px; font-size: 34px; font-weight: 800; letter-spacing: -0.01em; }
.er-page.item h2 { font-size: 30px; }
.er-page p { margin: 0; font-size: 20px; color: var(--muted); max-width: 720px; }
.er-page.item p { font-size: 18px; }
.er-page .acts { display: flex; gap: 16px; margin-top: 34px; flex-wrap: wrap; justify-content: center; }
.er-page .acts .btn-primary, .er-page .acts .btn-outline { height: 52px; padding: 0 28px; font-size: 17px; font-weight: 600; min-width: 250px; }
.er-page .acts .btn-outline { border-color: var(--indigo); color: var(--indigo); }
.er-page .ref { margin-top: 26px; font-size: 15px; color: var(--muted); }
.er-item-head { padding: 22px 26px 20px; border-bottom: 1px solid var(--border-soft); }
.er-item-head .back { display: inline-flex; align-items: center; gap: 8px; color: var(--indigo); font-size: 16px; font-weight: 600; }
.er-item-head .proj { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 16px; font-weight: 600; }
.er-item-head .proj .bar { width: 2px; height: 20px; background: var(--amber); }
.er-item-head h1 { margin: 6px 0 4px; font-size: 32px; font-weight: 800; }
.er-item-head .path { color: var(--muted); font-size: 16px; } .er-item-head .path .sep { margin: 0 8px; }
/* fragment error strips */
.er-inline { display: flex; align-items: center; gap: 10px; padding: 14px 20px; color: #B3243A; font-size: 14px; }
.er-inline .i { font-size: 18px; color: #F0546A; }
.er-inline .btn-outline { height: 34px; padding: 0 12px; font-size: 13px; border-color: #D63A4E; color: #D63A4E; margin-left: 4px; }
/* the conflict diff dialog (MM-41 frame, 790 px) */
.dg.er-conflict { width: 790px; max-width: calc(100vw - 32px); }
.dg.er-conflict .q b { color: var(--text); }
.er-versions { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0 20px; }
.er-ver { background: #F4F6FB; border: 1px solid #E4E7F0; border-radius: 12px; padding: 16px; }
.er-ver .who { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.er-ver .who .i { font-size: 22px; color: var(--indigo); margin-top: 2px; }
.er-ver .who b { display: block; font-size: 15px; } .er-ver .who span { display: block; font-size: 14px; color: var(--text-2); } .er-ver .who small { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
.er-ver .txt { background: #fff; border: 1px solid #E4E7F0; border-radius: 10px; padding: 14px 16px; font-size: 15px; line-height: 1.5; color: var(--text); }
.er-ver mark { border-radius: 4px; padding: 1px 2px; } .er-ver mark.del { background: #FDE2E5; color: #B3243A; } .er-ver mark.add { background: #DDF5EA; color: #0F7A55; }
.dg.er-conflict .foot { justify-content: flex-start; }
.dg.er-conflict .foot .btn-primary { margin-left: auto; }
.dg.er-conflict .note { text-align: center; font-size: 13px; color: var(--muted); margin-top: 14px; }
/* MM-44 extras */
.er-msg[hidden], .er-banner[hidden], .er-status[hidden], .er-summary[hidden] { display: none; }
.it-foot .er-summary, .np-foot .er-summary { margin-right: auto; }
.it-foot .right { display: flex; gap: 10px; margin-left: auto; }
.sp-scroll .er-banner { margin: 16px 24px 0; }
.st-root .er-banner, #wst-root .er-banner, .ps-page .er-banner { margin: 0 0 16px; }
.os-err { display: flex; align-items: center; gap: 6px; color: #D63A4E; font-size: 13px; }
.er-inline .btn-outline { height: 34px; }
.er-page.item { padding: 80px 24px 90px; }
.er-banner .txt .er-sub { display: block; font-size: 13px; color: #B3243A; opacity: .85; margin-top: 2px; }

/* ---------- MM-45 · Success feedback: toasts + the saved chip (ts-) ---------- */
#toast-host { position: fixed; left: calc(var(--sidebar-w, 232px) + 24px); bottom: 20px; z-index: 85; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.ts-toast { pointer-events: auto; display: flex; align-items: center; gap: 0; min-width: 510px; max-width: 680px; min-height: 70px; padding: 0 16px 0 22px; background: #F2FBF6; border: 1px solid #BFE7D3; border-radius: 12px; box-shadow: 0 12px 30px rgba(23,27,45,0.14); font-size: 17px; color: var(--text); animation: ts-in 160ms ease-out; }
.ts-toast.is-leaving { animation: ts-out 120ms ease-in forwards; }
.ts-toast .ts-icon { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: #fff; display: inline-grid; place-items: center; margin-right: 14px; }
.ts-toast .ts-icon .i { font-size: 18px; stroke-width: 2.6; }
.ts-toast .ts-text { flex: 1 1 auto; padding: 14px 0; line-height: 1.3; }
.ts-toast .ts-sep { flex: 0 0 1px; width: 1px; height: 32px; background: var(--border); margin: 0 18px; }
.ts-toast .ts-action { flex: 0 0 auto; background: transparent; border: 0; padding: 6px 4px; font: inherit; font-size: 17px; font-weight: 600; color: var(--indigo); cursor: pointer; border-radius: 6px; }
.ts-toast .ts-action:hover { text-decoration: underline; } .ts-toast .ts-action:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.ts-toast .ts-close { flex: 0 0 auto; margin-left: 30px; width: 34px; height: 34px; border-radius: 8px; background: transparent; border: 0; color: var(--muted); display: inline-grid; place-items: center; cursor: pointer; }
.ts-toast .ts-close .i { font-size: 22px; } .ts-toast .ts-close:hover { color: var(--text); background: rgba(23,27,45,0.05); }
.ts-toast.info { background: #EEF1FF; border-color: #C9D4FF; } .ts-toast.info .ts-icon { background: var(--indigo); }
.ts-toast.error { background: #FDECEF; border-color: #F9C5CE; } .ts-toast.error .ts-icon { background: var(--red); }
.ts-toast .ts-icon .i.txt { font-size: 15px; font-weight: 800; font-family: inherit; }
@keyframes ts-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ts-out { to { opacity: 0; } }
/* the saved chip over the breadcrumb */
.topbar { position: relative; }
.topbar .crumbs.is-swapped { opacity: 0; visibility: hidden; transition: opacity 160ms; }
.ts-saved { position: absolute; left: 22px; top: 0; height: 100%; display: flex; align-items: center; gap: 12px; font-size: 17px; color: var(--muted); animation: ts-fade 160ms ease-out; }
.ts-saved[hidden] { display: none; }
.ts-saved .ts-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: #fff; display: inline-grid; place-items: center; }
.ts-saved .ts-icon .i { font-size: 18px; stroke-width: 2.6; }
@keyframes ts-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ts-toast, .ts-toast.is-leaving, .ts-saved { animation: none; } .topbar .crumbs.is-swapped { transition: none; } }
@media (max-width: 640px) {
  #toast-host { left: 12px; right: 12px; bottom: 12px; }
  .ts-toast { min-width: 0; max-width: none; flex-wrap: wrap; padding: 10px 12px 10px 16px; }
  .ts-toast .ts-text { flex-basis: calc(100% - 42px - 48px); padding: 8px 0; }
  .ts-toast .ts-sep { display: none; } .ts-toast .ts-action { margin-left: 42px; } .ts-toast .ts-close { margin-left: auto; }
}

/* ---------- MM-46 · Dependency-aware scheduling: the impact dialog + the cycle preview (dx-) ---------- */
.dg.dx-impact { width: 720px; padding: 26px 28px 24px; }
.dg.dx-impact .head { align-items: flex-start; margin-bottom: 20px; }
.dg.dx-impact .ic.warning { background: #FFF4E0; color: var(--amber); width: 64px; height: 64px; } .dg.dx-impact .ic .i { font-size: 30px; }
.dg.dx-impact h2 { font-size: 28px; font-weight: 800; letter-spacing: -0.4px; margin-bottom: 6px; }
.dg.dx-impact .q { font-size: 16px; line-height: 1.45; margin: 0; }
.dx-table { width: 100%; border: 1px solid var(--border); border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: 15px; }
.dx-table th { background: #F7F8FB; text-align: left; font-weight: 600; padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text); }
.dx-table td { padding: 12px 16px; vertical-align: middle; border-bottom: 1px solid var(--border); height: 64px; }
.dx-table tr:last-child td { border-bottom: 0; }
.dx-table th + th, .dx-table td + td { border-left: 1px solid var(--border); }
.dx-table .task { display: flex; align-items: center; gap: 12px; }
.dx-table .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--indigo); flex: none; } .dx-table .dot.red { background: var(--red); }
.dx-table .task b { display: block; font-weight: 700; } .dx-table .task .sub { font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 6px; } .dx-table .task .sub .i { font-size: 15px; }
.dx-table .prop { font-size: 13px; color: var(--indigo); display: block; } .dx-table .new { font-weight: 700; color: var(--indigo); }
.dx-warn { display: flex; gap: 12px; padding: 14px 16px; background: #FFF8E6; border: 1px solid #FFE1A6; border-radius: 12px; margin: 16px 0 18px; }
.dx-warn .ic2 { width: 24px; height: 24px; border-radius: 50%; background: var(--amber); color: #fff; display: grid; place-items: center; flex: none; margin-top: 1px; } .dx-warn .ic2 .i { font-size: 14px; }
.dx-warn b { display: block; font-size: 15px; font-weight: 700; color: #B7791F; margin-bottom: 4px; } .dx-warn p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text); }
.dx-q { font-size: 19px; font-weight: 800; margin: 0 0 10px; }
.dx-choice { display: grid; grid-template-columns: 22px 1fr; column-gap: 14px; align-items: start; padding: 6px 0; cursor: pointer; }
.dx-choice input { appearance: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #C5CBDA; margin: 2px 0 0; display: grid; place-items: center; cursor: pointer; }
.dx-choice input:checked { border-color: var(--indigo); } .dx-choice input:checked::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--indigo); }
.dx-choice input:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.dx-choice b { font-size: 17px; font-weight: 700; display: block; } .dx-choice span { font-size: 15px; color: var(--muted); }
.dg.dx-impact .foot { justify-content: flex-end; margin-top: 16px; }
/* the relationship dialog */
.dg.dx-rel { width: 560px; padding: 26px 28px 24px; }
.dg.dx-rel h2 { font-size: 24px; font-weight: 800; margin-bottom: 6px; } .dg.dx-rel .q { margin-bottom: 18px; }
.dx-label { font-size: 15px; font-weight: 600; margin: 0 0 8px; } .dx-label .req { color: var(--red); margin-left: 3px; }
.dx-combo { position: relative; display: flex; align-items: center; height: 52px; border: 1px solid var(--border); border-radius: 12px; padding: 0 12px 0 14px; background: #fff; gap: 10px; }
.dx-combo:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.dx-combo .i.lead { font-size: 22px; color: var(--muted); } .dx-combo input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 17px; background: transparent; min-width: 0; }
.dx-combo .clear, .dx-combo .chev { width: 32px; height: 32px; display: grid; place-items: center; color: var(--muted); border-radius: 8px; } .dx-combo .clear:hover, .dx-combo .chev:hover { background: var(--bg); color: var(--text); }
.dx-combo .clear .i, .dx-combo .chev .i { font-size: 22px; }
.dx-combo .dp-cands { position: absolute; left: -1px; right: -1px; top: calc(100% + 6px); z-index: 5; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 40px rgba(23,27,45,0.16); max-height: 260px; overflow: auto; padding: 6px; margin: 0; }
.dx-combo .dp-cands[hidden] { display: none; }
.dx-cycle { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: #FDECEF; border: 1px solid #F9C5CE; color: #B42339; font-size: 15px; font-weight: 600; margin: 14px 0; }
.dx-cycle .ic2 { width: 24px; height: 24px; border-radius: 50%; background: #D63A4E; color: #fff; display: grid; place-items: center; flex: none; } .dx-cycle .ic2 .i { font-size: 14px; }
.dx-cycle[hidden] { display: none; }
.dx-chain { position: relative; background: #F3F5FF; border-radius: 12px; padding: 14px 16px 14px 140px; display: flex; flex-direction: column; }
.dx-chain[hidden] { display: none; }
.dx-chain::before { content: ""; position: absolute; left: 50px; top: 48px; bottom: 48px; width: 16px; border: 2.5px solid #E5303F; border-right: 0; border-radius: 12px 0 0 12px; }
.dx-chain::after { content: ""; position: absolute; left: 58px; top: 42px; width: 9px; height: 9px; border-top: 2.5px solid #E5303F; border-right: 2.5px solid #E5303F; transform: rotate(45deg); }
.dx-chain .node { display: flex; align-items: center; background: #fff; border-radius: 10px; padding: 12px 16px; position: relative; min-height: 68px; }
.dx-chain .node .ltr { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; font-weight: 800; background: var(--indigo); color: #fff; position: absolute; left: -60px; top: 50%; transform: translateY(-50%); }
.dx-chain .node .ltr.b { background: #8FA4FF; } .dx-chain .node .ltr.red { background: #E5303F; }
.dx-chain .node b { display: block; font-size: 16px; font-weight: 700; } .dx-chain .node span { font-size: 14px; color: var(--muted); }
.dx-chain .node.red b { color: #D63A4E; }
.dx-chain .arrow { height: 26px; display: grid; place-items: center; color: var(--text); font-size: 18px; margin-left: -60px; width: 42px; } .dx-chain .arrow.red { color: #E5303F; }
.dg.dx-rel .foot { justify-content: flex-end; }
.dg.dx-rel .foot .btn-primary:disabled { background: #C9CDD8; color: #fff; cursor: not-allowed; }
@media (max-width: 640px) {
  .dg.dx-impact, .dg.dx-rel { width: 100%; padding: 20px 16px; }
  .dx-table thead { display: none; } .dx-table tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--border); } .dx-table td { display: block; height: auto; border: 0 !important; padding: 4px 12px; }
  .dx-table td.old::before { content: "Old: "; color: var(--muted); } .dx-table td.new-cell::before { content: "New: "; color: var(--muted); }
}
.dp-form .dx-cycle { margin: 10px 0; } .dp-form .dx-chain { margin: 0 0 12px; }
.dp-row .del.chg { margin-right: 2px; }

/* ---------- MM-47 · First sign-in + invitation acceptance (ob-) ---------- */
/* the reduced shell: no workspace card, muted navigation, top bar without search / bell */
body.shell-bare .sidebar .ws-card { display: none; }
body.shell-bare .sidebar .nav-item, body.shell-bare .sidebar .nav-item .i { color: #A9B0C2; pointer-events: none; }
body.shell-bare .sidebar .nav-item.is-active { background: transparent; font-weight: 500; }
body.shell-bare .topbar .search, body.shell-bare .topbar .bell, body.shell-bare .topbar .crumbs { visibility: hidden; }
.ob-stage { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px 60px; overflow: hidden; min-height: calc(100vh - var(--topbar-h)); }
.ob-blob { position: absolute; border-radius: 50%; background: #EEF1FF; opacity: 0.75; pointer-events: none; }
.ob-blob.a { width: 900px; height: 560px; left: 18%; top: 22%; transform: rotate(-16deg); }
.ob-blob.b { width: 640px; height: 400px; right: 8%; top: 36%; transform: rotate(-8deg); }
.ob-card { position: relative; width: 640px; max-width: 100%; background: #fff; border-radius: 18px; box-shadow: 0 20px 60px rgba(23,27,45,0.08); padding: 40px 44px 36px; text-align: center; }
.ob-logo { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 34px; }
.ob-logo svg { width: 76px; height: 76px; } .ob-logo b { font-size: 40px; font-weight: 800; letter-spacing: -0.8px; }
.ob-card h1 { margin: 0 0 6px; font-size: 32px; font-weight: 800; letter-spacing: -0.5px; }
.ob-card .lead { margin: 0 0 30px; font-size: 20px; color: var(--muted); }
.ob-step { display: grid; grid-template-columns: 52px 1fr; column-gap: 18px; align-items: center; text-align: left; margin-bottom: 22px; }
.ob-step .n { width: 52px; height: 52px; border-radius: 50%; background: #EEF1FF; color: var(--indigo); display: grid; place-items: center; font-size: 26px; font-weight: 700; }
.ob-step b { display: block; font-size: 24px; font-weight: 700; line-height: 1.15; } .ob-step span { font-size: 17px; color: var(--muted); }
.ob-field { text-align: left; margin-bottom: 18px; }
.ob-field label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.ob-input, .ob-select { width: 100%; height: 48px; border: 1px solid var(--border); border-radius: 10px; padding: 0 16px; font: inherit; font-size: 17px; background: #fff; color: var(--text); }
.ob-input:focus, .ob-select:focus { outline: 0; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.ob-select-wrap { position: relative; } .ob-select { appearance: none; padding-right: 44px; } .ob-select-wrap .i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--muted); pointer-events: none; }
.ob-select:disabled { color: var(--muted); background: #FAFBFD; }
.ob-hint { font-size: 14px; color: var(--muted); margin-top: 6px; }
.ob-card .btn-primary.big { width: 100%; height: 56px; font-size: 18px; font-weight: 600; justify-content: center; border-radius: 10px; margin-top: 8px; }
.ob-link { display: inline-block; margin-top: 18px; font-size: 16px; font-weight: 600; color: var(--indigo); background: none; border: 0; cursor: pointer; }
.ob-note { margin-top: 16px; padding: 14px 16px; border-radius: 10px; background: #EEF1FF; font-size: 15px; text-align: left; line-height: 1.45; }
.ob-note[hidden] { display: none; }
.ob-note button { color: var(--indigo); font-weight: 600; background: none; border: 0; cursor: pointer; font: inherit; }
/* the invitation dialog */
.dg.ob-invite { width: 520px; padding: 22px 26px 26px; text-align: center; }
.dg.ob-invite .ob-top { display: flex; align-items: center; gap: 10px; text-align: left; margin-bottom: 8px; }
.dg.ob-invite .ob-top svg { width: 30px; height: 30px; } .dg.ob-invite .ob-top b { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; }
.dg.ob-invite .il { width: 122px; height: 122px; margin: 6px auto 12px; display: block; }
.dg.ob-invite h2 { margin: 0 0 8px; font-size: 28px; font-weight: 800; line-height: 1.15; letter-spacing: -0.4px; }
.dg.ob-invite .lead { margin: 0 0 18px; font-size: 16px; color: var(--muted); line-height: 1.45; }
.ob-facts { background: #F7F8FB; border: 1px solid var(--border); border-radius: 12px; padding: 4px 16px; text-align: left; }
.ob-facts .row { padding: 12px 0; border-bottom: 1px solid var(--border); } .ob-facts .row:last-child { border-bottom: 0; }
.ob-facts .lbl { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.ob-facts .val { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.ob-facts .val .i { font-size: 22px; color: var(--text); }
.ob-facts .who .av { width: 34px; height: 34px; border-radius: 9px; background: #2F3A8F; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.ob-facts .who b { display: block; font-size: 16px; } .ob-facts .who span { font-size: 13px; color: var(--muted); }
.ob-facts .info { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--indigo); color: var(--indigo); display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; margin-left: 4px; cursor: help; }
.ob-facts .proj { display: flex; align-items: center; gap: 12px; padding: 5px 0; }
.ob-facts .proj .ob-chip { flex: none; width: 34px; height: 34px; padding: 0; border-radius: 9px; color: #fff; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; letter-spacing: 0; line-height: 1; }
.ob-facts .proj b { font-size: 16px; font-weight: 600; }
.ob-strip { display: flex; align-items: center; gap: 10px; margin: 14px 0 16px; padding: 12px 14px; border-radius: 10px; background: #EEF1FF; color: var(--text); font-size: 15px; text-align: left; }
.ob-strip .i { font-size: 22px; color: var(--indigo); flex: none; }
.ob-strip.warn { background: #FFF8E6; } .ob-strip.warn .i { color: var(--amber); }
.ob-strip.bad { background: #FDECEF; color: #B42339; } .ob-strip.bad .i { color: #D63A4E; }
.dg.ob-invite .acts { display: flex; flex-direction: column; align-items: stretch; gap: 10px; } .dg.ob-invite .acts form { display: contents; } .dg.ob-invite .acts .btn-primary, .dg.ob-invite .acts .btn-outline { width: 100%; }
.shell-bare .dg-backdrop { overflow-y: auto; place-items: start center; } .shell-bare .dg.ob-invite { margin: 16px 0; }
.dg.ob-invite .acts .btn-primary, .dg.ob-invite .acts .btn-outline { height: 48px; justify-content: center; font-size: 16px; font-weight: 600; border-radius: 10px; }
.dg.ob-invite .acts .btn-outline { border-color: var(--indigo); color: var(--indigo); }
.dg.ob-invite .acts .btn-primary:disabled { background: #C9CDD8; cursor: not-allowed; }
.dg.ob-invite .close { top: 18px; right: 18px; }
@media (max-width: 640px) {
  .ob-blob { display: none; } .ob-card { padding: 28px 18px; } .ob-stage { padding: 16px; min-height: 0; }
  .dg.ob-invite { width: 100%; padding: 18px 16px; } .ob-facts .val { flex-wrap: wrap; }
}
/* the built pages: the bare shell's sign-out forms, the standalone invitation card, the auth forms inside it */
.shell-bare .user-card-form, .ob-topbar-user { display: contents; }
.shell-bare .user-card { width: 100%; } .shell-bare .user-card > span { min-width: 0; } .shell-bare .user-card .user-name, .shell-bare .user-card .user-role { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell-bare .crumbs { visibility: hidden; }
.auth-card .er-banner { margin-bottom: 16px; } .auth-card .ob-strip { margin: 0 0 16px; }
.dg.ob-invite.standalone { box-shadow: 0 20px 60px rgba(23,27,45,0.10); margin: 32px auto; }
.ob-auth { text-align: left; margin-top: 4px; } .ob-auth[hidden] { display: none; }
.ob-auth h3 { font-size: 18px; margin: 0 0 12px; } .ob-auth .field { margin-bottom: 12px; } .ob-auth .field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.ob-auth .field input { width: 100%; height: 46px; border: 1px solid var(--border); border-radius: 10px; padding: 0 14px; font: inherit; font-size: 16px; }
.ob-auth .field input[readonly] { background: #FAFBFD; color: var(--muted); }
.ob-auth .acts { margin-top: 14px; } .ob-auth .ob-link { margin-top: 12px; display: block; width: 100%; text-align: center; }
.ob-facts q { font-style: italic; color: var(--text); }

/* ---------- MM-48 · Mobile layouts (mo-) — everything below applies at ≤ 768 px; the mo-* markup is hidden above it ---------- */
.mo-menu, .mo-search, .mo-tabbar, .mo-backdrop, .mo-lbl, .mo-head, .mo-tabs, .mo-actionbar, .mo-close, .mo-row-link, .mo-only, .mo-brand, .mo-all, .mo-back, .mo-ready-lbl { display: none; }
@media (max-width: 768px) {
  /* ---- the shell ---- */
  html, body, .shell, .main, .content { min-width: 0 !important; width: auto; }
  html, body { overflow-x: hidden; }
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; top: 0; bottom: 0; left: -290px; width: 280px; z-index: 95; transition: left 200ms ease; box-shadow: none; overflow-y: auto; }
  body.mo-drawer .sidebar { left: 0; box-shadow: 0 20px 60px rgba(23,27,45,0.35); }
  .mo-backdrop { position: fixed; inset: 0; background: rgba(23,27,45,0.45); z-index: 94; }
  body.mo-drawer .mo-backdrop { display: block; }
  .mo-close { display: grid; place-items: center; position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 10px; color: var(--muted); }
  .sidebar .logo { margin-right: 48px; }
  .topbar { position: sticky; top: 0; z-index: 80; height: 56px; padding: 0 12px 0 8px; gap: 8px; }
  .topbar .crumbs, .topbar .search, .topbar .divider, .topbar .ts-saved { display: none; }
  .mo-menu, .mo-search { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; color: var(--text); background: none; border: 0; }
  .mo-menu .i, .mo-search .i { font-size: 28px; }
  .mo-brand { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; font-size: 24px; font-weight: 800; letter-spacing: -0.5px; color: var(--text); text-decoration: none; }
  .mo-brand svg { width: 34px; height: 34px; }
  .topbar .bell { width: 44px; height: 44px; } .topbar .avatar-btn .i { display: none; }
  .content { padding: 14px 16px 90px; gap: 14px; }
  .mo-tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: #fff; border-top: 1px solid var(--border); z-index: 85; }
  .mo-tabbar a, .mo-tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--muted); text-decoration: none; background: none; border: 0; }
  .mo-tabbar .i { font-size: 26px; } .mo-tabbar .is-active { color: var(--indigo); font-weight: 600; }
  body.mo-drawer .mo-tabbar, body.mo-no-tabbar .mo-tabbar { display: none; }
  #toast-host { left: 16px; right: 16px; bottom: 80px; } .ts-toast { min-width: 0; max-width: none; }
  /* ---- the page head ---- */
  .page-head { grid-template-columns: 1fr auto; gap: 12px; align-items: center; } .page-head > div:empty { display: none; }
  .page-title { font-size: 30px; white-space: normal; } .page-sub { font-size: 16px; }
  .page-head .btn-primary { height: 56px; padding: 0 18px; font-size: 17px; border-radius: 12px; white-space: nowrap; }
  .page-head .kpis, .page-actions .meta { display: none; } .page-actions { display: flex; align-items: center; }   /* the drawing: title + button only */
  /* ---- the overview matrix → cards ---- */
  .matrix { display: block; width: 100%; min-width: 0; } .matrix thead { display: none; } .matrix tbody { display: flex; flex-direction: column; gap: 14px; }
  .matrix tbody tr.row { height: auto; } .matrix tbody tr.row:hover td { background: transparent; }
  .matrix tr.row { display: grid; height: auto; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; }
  .matrix tr.row td { display: block; height: auto; padding: 0; border: 0; }
  .matrix tr.row td:first-child { grid-column: 1 / -1; padding: 12px 12px 12px 12px; position: relative; }
  .matrix tr.row .pcell { gap: 12px; align-items: flex-start; }
  .matrix tr.row .pcell .chev { display: none; }
  .matrix tr.row .v-avatar, .matrix tr.row .avatar { width: 56px; height: 56px; font-size: 22px; border-radius: 12px; }
  .matrix tr.row .v-name { font-size: 18px; font-weight: 700; } .matrix tr.row .v-line1 { gap: 10px; flex-wrap: wrap; } .matrix tr.row .v-line2 { font-size: 15px; margin-top: 4px; }
  .mo-row-link { display: grid; place-items: center; position: absolute; right: 8px; top: 20px; width: 40px; height: 40px; color: var(--indigo); } .mo-row-link .i { font-size: 24px; }
  .matrix tr.row td.c-area { border-top: 1px solid var(--border); border-left: 1px solid var(--border); padding: 12px 6px 12px; text-align: center; }
  .matrix tr.row td.c-area:nth-child(2) { border-left: 0; }
  .matrix tr.row td.c-area a { display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .mo-lbl { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 500; color: var(--text); line-height: 1.15; }
  .mo-lbl .i { font-size: 26px; color: var(--text); }
  .matrix tr.row .acell { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
  .matrix tr.row .acell .bar { width: 100%; height: 10px; } .matrix tr.row .acell .pct { font-size: 15px; font-weight: 600; }
  .matrix tr.row td.c-ready { grid-column: 1 / -1; border-top: 1px solid var(--border); background: #F3F5FF; padding: 12px 14px; }
  .matrix tr.row .rcell { display: flex; align-items: center; gap: 12px; }
  .matrix tr.row .rcell .donut { display: none; }
  .matrix tr.row .rcell .mo-ready-lbl { display: inline; font-size: 16px; font-weight: 600; } .matrix tr.row .rcell .r-sub { display: none; } .matrix tr.row .rcell .r-pct { font-size: 22px; font-weight: 800; } .matrix tr.row .rcell .big { font-size: 22px; font-weight: 800; }
  .matrix tr.row .rcell .mo-row-link { position: static; margin-left: auto; }
  .matrix tr.row-children { display: none; }
  .mo-all { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 14px 16px; border-radius: 12px; background: #F3F5FF; font-size: 17px; font-weight: 600; color: var(--text); text-decoration: none; }
  .mo-all .i { font-size: 22px; color: var(--indigo); }
  .matrix tr.row.mo-hide { display: none; } .view-panel, .card-head .seg, .card-head .card-sub { display: none; }
  /* businesses (table.ops) */
  .ops { display: block; width: 100%; min-width: 0; } .ops colgroup, .ops thead { display: none; } .ops tbody { display: flex; flex-direction: column; gap: 14px; }
  .ops tbody tr.row { display: grid; height: auto; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; }
  .ops tr.row td { display: block; height: auto; padding: 0; border: 0; } .ops tr.row td:first-child { grid-column: 1 / -1; padding: 12px; position: relative; }
  .ops tr.row .pcell { gap: 12px; } .ops tr.row .pcell .chev { display: none; } .ops tr.row .v-avatar { width: 56px; height: 56px; font-size: 22px; border-radius: 12px; } .ops tr.row .v-name { font-size: 18px; font-weight: 700; }
  .ops tr.row td.c-status { border-top: 1px solid var(--border); border-left: 1px solid var(--border); padding: 10px 4px; text-align: center; }
  .ops tr.row td.c-status:nth-child(2) { border-left: 0; }
  .ops tr.row td.c-status a { display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .ops tr.row .st-label { display: none; } .ops tr.row .st-val { font-size: 14px; font-weight: 600; text-align: center; line-height: 1.15; }
  .ops tr.row td.c-upd, .ops tr.row td.c-act { display: none; }
  /* ---- the item page ---- */
  body.mo-item .topbar { padding: 0 12px; } body.mo-item .mo-menu, body.mo-item .mo-search { display: none; }
  .mo-back { display: inline-flex; align-items: center; gap: 4px; margin-right: auto; font-size: 18px; font-weight: 600; color: var(--indigo); text-decoration: none; } .mo-back .i { font-size: 26px; }
  .topbar .bell, .topbar .avatar-btn { flex: none; } .mo-initials { width: 40px; height: 40px; font-size: 15px; }
  body.mo-item .card.item-head { padding: 16px 16px 18px; }
  body.mo-item .mo-brand { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }
  .item-top, .item-metrics, .pstrip, .item-crumbs, .subs, .grid-2.rel .card-link, .card .card-head + .subs { display: none; }
  .mo-only, .mo-only.mo-checklist { display: block; } .grid-2.rel { grid-template-columns: 1fr; gap: 14px; }
  #children-table-host .btn-dashed, #children-table-host .subs, #children-table-host .es { display: none; } .details { flex-direction: column; align-items: stretch; gap: 4px; padding: 4px 0 0; } .detail { border: 0 !important; padding: 8px 0; display: flex; align-items: center; gap: 10px; }
  .mo-card .card-head { padding: 0; margin-bottom: 8px; } .mo-card .card-title.sm { font-size: 22px; font-weight: 800; }
  .mo-checklist .head { display: flex; justify-content: flex-end; margin: -34px 0 6px; }
  .mo-head { display: block; }
  .mo-head h1 { margin: 0 0 8px; font-size: 28px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.1; }
  .mo-path { font-size: 16px; color: var(--muted); line-height: 1.35; margin-bottom: 12px; } .mo-path a { color: var(--muted); text-decoration: none; } .mo-path .sep { margin: 0 6px; }
  .mo-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
  .mo-chips .badge { font-size: 15px; height: 36px; padding: 0 16px; display: inline-flex; align-items: center; }
  .mo-chips .proj { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 18px; background: #F3F5FF; font-size: 15px; font-weight: 500; color: var(--text); text-decoration: none; } .mo-chips .proj .i { font-size: 20px; }
  .mo-fields { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); align-items: center; gap: 12px 6px; padding: 14px 12px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
  .mo-field { display: contents; font-size: 14px; color: var(--text-2); }
  .mo-field > span:first-child { font-size: 12.5px; color: var(--text-2); }
  .mo-field .ctl { display: inline-flex; align-items: center; gap: 4px; height: 48px; padding: 0 5px 0 7px; border: 1px solid var(--border); border-radius: 10px; background: #fff; font-size: 13.5px; letter-spacing: -0.1px; font-weight: 500; color: var(--text); min-width: 0; }
  .mo-field .ctl .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mo-field .ctl .i.chev { font-size: 14px; color: var(--muted); flex: none; } .mo-field .ctl .i.lead { font-size: 20px; color: var(--indigo); flex: none; }
  .mo-field .ctl .mini-avatar { width: 22px; height: 22px; font-size: 10px; flex: none; }
  .mo-field .ctl { overflow: hidden; } .mo-field .ctl .spill { padding: 3px 7px; border-radius: 8px; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .mo-field .prog { display: flex; align-items: center; gap: 10px; } .mo-field .prog .bar { flex: 1; height: 12px; border-radius: 6px; background: var(--track); overflow: hidden; } .mo-field .prog .bar span { display: block; height: 100%; background: var(--indigo); border-radius: 6px; } .mo-field .prog b { font-size: 16px; }
  .mo-tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin: 4px 0 0; border-bottom: 1px solid var(--border); }
  .mo-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; font-size: 17px; font-weight: 500; color: var(--text-2); background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; }
  .mo-tabs button .i { font-size: 24px; } .mo-tabs button.is-active { color: var(--indigo); font-weight: 600; border-bottom-color: var(--indigo); }
  [data-mo-tab] { display: none; } [data-mo-tab].is-shown { display: block; }
  .mo-card { border: 1px solid var(--border); border-radius: 14px; padding: 16px; background: #fff; }
  .mo-card .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .mo-card .head h2 { margin: 0; font-size: 22px; font-weight: 800; } .mo-card .head .cnt { font-size: 17px; font-weight: 600; color: var(--indigo); }
  .mo-card .head .pen { width: 40px; height: 40px; display: grid; place-items: center; color: var(--indigo); } .mo-card .head .pen .i { font-size: 24px; }
  .mo-card p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--text-2); }
  .mo-check { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--border); }
  .mo-check:first-of-type { border-top: 0; }
  .mo-check .box { width: 32px; height: 32px; border-radius: 8px; border: 2px solid #B5BCCF; display: grid; place-items: center; color: #fff; flex: none; }
  .mo-check.done .box { background: var(--green); border-color: var(--green); } .mo-check .box .i { font-size: 20px; }
  .mo-check .ttl { flex: 1; font-size: 17px; } .mo-check.done .ttl { text-decoration: line-through; color: var(--muted); }
  .mo-check .due { font-size: 15px; color: var(--muted); }
  .mo-add { display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; margin-top: 8px; border-radius: 10px; background: #F3F5FF; color: var(--indigo); font-size: 17px; font-weight: 600; border: 0; width: 100%; } .mo-add .i { font-size: 24px; }
  .mo-actionbar { display: flex; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--border); z-index: 85; }
  .mo-actionbar .btn-primary { flex: 1; height: 56px; font-size: 18px; font-weight: 600; justify-content: center; border-radius: 12px; gap: 12px; } .mo-actionbar .btn-primary .i { font-size: 24px; }
  .mo-actionbar .btn-outline.sq { width: 56px; height: 56px; border-radius: 12px; padding: 0; justify-content: center; color: var(--indigo); border-color: var(--indigo); } .mo-actionbar .sq .i { font-size: 26px; }
  body.mo-item .content { padding-bottom: 100px; } body.mo-item .mo-tabbar { display: none; }
  /* ---- generic ---- */
  .mo-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dg-backdrop { place-items: end center; padding: 0; } .dg { width: 100%; max-height: 92vh; overflow: auto; border-radius: 18px 18px 0 0; }
@media (max-width: 640px) { .content { padding-left: 12px; padding-right: 12px; } }
  /* the built pages */
  .mo-card .card-head .cnt { margin-left: auto; } .mo-card .card-head .pen { width: 40px; height: 40px; display: grid; place-items: center; color: var(--indigo); margin-left: auto; } .mo-card .card-head .pen .i { font-size: 22px; }
  .mo-card > p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text-2); }
  .mo-check .ttl { color: var(--text); text-decoration: none; }
  .content .card:not(.matrix-card):not(.mo-card):not(#startups-card):not([aria-labelledby="ops-title"]) { overflow-x: auto; }   /* tables scroll inside their card */
  #startups-card .card-head .seg, #startups-card [data-loading-hint], .card-head .card-sub { display: none; }
  .np-backdrop { place-items: end center; padding: 0; } .np-modal, .it-modal, .mb-modal { width: 100% !important; max-width: none; max-height: 92vh; border-radius: 18px 18px 0 0; }
  .side-panel { width: 100%; }
}
/* MM-48 · narrow phones (≤ 430 px): the five tiles share the width equally, labels truncate instead of widening the card, the status value wraps,
   the header button shrinks, and the content clears the fixed tab bar. */
@media (max-width: 768px) {
  .content { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .matrix tr.row, .ops tbody tr.row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .matrix tr.row td, .ops tr.row td { min-width: 0; }
  .mo-lbl > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ops tr.row .st-val { white-space: normal; flex-wrap: wrap; justify-content: center; gap: 4px 6px; font-size: 12.5px; }
  .page-head { grid-template-columns: minmax(0, 1fr) auto; } .page-head .page-title { white-space: normal; font-size: 28px; } .page-head .page-sub { white-space: normal; font-size: 16px; }
  .page-head .btn-primary { height: 48px; padding: 0 14px; font-size: 15px; }
}
@media (max-width: 430px) {
  .card-head { padding-left: 12px; padding-right: 12px; } .card-body { padding-left: 12px; padding-right: 12px; }
  .matrix tr.row td.c-area { padding: 10px 2px; } .ops tr.row td.c-status { padding: 10px 2px; }
  .mo-lbl { font-size: 10.5px; letter-spacing: -0.1px; } .mo-lbl .i { font-size: 24px; }
  .matrix tr.row .acell .pct { font-size: 14px; } .ops tr.row .st-val { font-size: 11.5px; }
  .page-head .btn-primary { font-size: 0; width: 48px; padding: 0; justify-content: center; } .page-head .btn-primary .i { font-size: 24px; }
}
@media (max-width: 768px) {
  .matrix tr.row td:first-child, .ops tr.row td:first-child { padding-right: 48px; }                       /* room for the row chevron */
  .mo-back { min-width: 0; max-width: 60%; } .mo-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 430px) {
  body.mo-item .mo-brand { display: none; }                                                                /* the back label wins over the wordmark */
  .mo-fields { grid-template-columns: max-content minmax(0, 1fr); gap: 10px 10px; }
  .mo-actionbar .btn-primary { font-size: 16px; white-space: nowrap; }
}

/* ---------- MM-49 · Integrations (ig-) — [B] extension, plan plans/MM-49.md ---------- */
.ig-head h1 { display: inline-flex; align-items: center; gap: 14px; }
.ig-ext { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 10px; background: var(--indigo-bg); color: var(--indigo); font-size: 15px; font-weight: 600; letter-spacing: 0; }
.ig-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.ig-cat { position: relative; display: flex; align-items: center; gap: 14px; height: 100px; padding: 0 18px; background: #fff; border: 1px solid var(--border); border-radius: 14px; text-decoration: none; color: var(--text); box-shadow: var(--shadow-card); }
.ig-cat:hover { border-color: #C9D2FF; }
.ig-cat[aria-current="true"] { border: 2px solid var(--indigo); background: #F8F9FF; padding: 0 17px; }
.ig-tile { width: 64px; height: 64px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.ig-tile .i { font-size: 32px; }
.ig-tile.sm { width: 48px; height: 48px; border-radius: 12px; } .ig-tile.sm .i { font-size: 24px; }
.ig-tile.crm { background: #E8F8F1; color: #12B981; } .ig-tile.accounting { background: #FFF4E5; color: #F59E0B; }
.ig-tile.support { background: #FDECEF; color: #F0546A; } .ig-tile.development { background: var(--indigo-bg); color: var(--indigo); }
.ig-cat > span:not(.ig-tile) { min-width: 0; padding-right: 30px; } .ig-cat b { display: block; font-size: 19px; font-weight: 700; white-space: nowrap; } .ig-cat span.sub { display: block; font-size: 14.5px; color: var(--muted); margin-top: 3px; }
.ig-cat .cnt { position: absolute; top: 16px; right: 16px; min-width: 32px; height: 30px; padding: 0 10px; border-radius: 8px; background: #F3F4F8; color: var(--text); font-size: 16px; font-weight: 700; display: grid; place-items: center; }
.ig-cat .cnt.ok { background: var(--indigo-bg); color: var(--indigo); } .ig-cat .cnt.err { background: #FDECEF; color: #D63A4E; }
.ig-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.ig-main { padding: 0; overflow: hidden; }
.ig-main .head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px 16px; }
.ig-main .head h2 { margin: 0; font-size: 24px; font-weight: 700; } .ig-main .head .sub { font-size: 16px; color: var(--text-2); margin-top: 4px; }
.ig-main .head .btn-primary { height: 50px; padding: 0 22px; font-size: 17px; gap: 10px; flex: none; } .ig-main .head .btn-primary .i { font-size: 22px; }
.ig-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ig-table th { background: #F8F9FB; font-size: 14px; font-weight: 600; color: var(--text-2); text-align: left; padding: 0 14px; height: 42px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ig-table th.c-name { width: 26%; } .ig-table th.c-status { width: 12%; } .ig-table th.c-when { width: 15%; } .ig-table th.c-owner { width: 16%; }
.ig-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 15px; }
.ig-table .conn { display: flex; align-items: center; gap: 12px; } .ig-table .conn b { display: block; font-size: 17px; font-weight: 600; } .ig-table .conn > div { min-width: 0; } .ig-table .conn > div > span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ig-table .conn .ig-tile { display: grid; margin-top: 0; }
.ig-status { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 12px; border-radius: 10px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.ig-status::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: currentColor; }
.ig-status.connected { background: #E8F8F1; color: #1E9C6C; } .ig-status.not_connected { background: #F3F4F8; color: var(--text-2); }
.ig-status.error { background: #FDECEF; color: #D63A4E; } .ig-status.syncing { background: var(--indigo-bg); color: var(--indigo); } .ig-status.paused { background: #FFF4E5; color: #B45309; }
.ig-status.syncing::before { border: 2px solid currentColor; border-right-color: transparent; background: transparent; width: 10px; height: 10px; animation: ig-spin .8s linear infinite; }
@keyframes ig-spin { to { transform: rotate(360deg); } }
.ig-table .when { color: var(--text-2); line-height: 1.4; white-space: nowrap; }
.ig-table .owner { display: flex; align-items: center; gap: 12px; } .ig-table .owner .av { width: 36px; height: 36px; border-radius: 50%; background: var(--indigo); color: #fff; font-size: 14px; font-weight: 700; display: grid; place-items: center; flex: none; }
.ig-table .owner b { display: block; font-size: 16px; font-weight: 600; white-space: nowrap; } .ig-table .owner span { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; }
.ig-table .acts { display: flex; gap: 10px; white-space: nowrap; }
.ig-table .acts .btn-outline, .ig-table .acts .btn-primary { height: 40px; padding: 0 14px; font-size: 15px; }
.ig-table .acts .btn-outline.danger { border-color: #F0546A; color: #D63A4E; } .ig-table .acts .btn-outline.danger:hover { background: #FDECEF; }
.ig-sec { padding: 18px 24px 0; }
.ig-sec .shead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.ig-sec .shead h3 { margin: 0; font-size: 20px; font-weight: 700; } .ig-sec .shead .sub { font-size: 15px; color: var(--text-2); margin-top: 2px; }
.ig-sec .shead .btn-outline { height: 44px; padding: 0 18px; font-size: 15px; gap: 8px; } .ig-sec .shead .btn-primary { height: 44px; padding: 0 18px; font-size: 15px; }
.ig-sec .shead .ig-ops { display: flex; gap: 10px; flex: none; } .ig-sec .shead > div:first-child { min-width: 0; flex: 1; }
.ig-map { width: 100%; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; border-collapse: separate; border-spacing: 0; }
.ig-map th { background: #F8F9FB; font-size: 14px; font-weight: 600; color: var(--text-2); text-align: left; padding: 0 14px; height: 38px; border-bottom: 1px solid var(--border); }
.ig-map td { padding: 0 14px; height: 39px; border-bottom: 1px solid var(--border); font-size: 15px; } .ig-map tr:last-child td { border-bottom: 0; }
.ig-map td + td, .ig-map th + th { border-left: 1px solid var(--border); }
.ig-map .dir { display: inline-flex; align-items: center; gap: 10px; } .ig-map .dir .i { font-size: 20px; color: var(--indigo); }
.ig-map .note { color: var(--text-2); }
.ig-map td .in { width: 100%; height: 32px; border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 14px; background: #fff; color: var(--text); }
.ig-map td .in:focus { outline: 0; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.ig-map td .in.is-invalid { border-color: #F0546A; }
.ig-map .rm { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); } .ig-map .rm:hover { background: #FDECEF; color: #D63A4E; }
.ig-map .rm .i { font-size: 18px; }
.ig-map th.x, .ig-map td.x { width: 44px; padding: 0 6px; text-align: center; border-left: 1px solid var(--border); }
.ig-add-row { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--indigo); font-size: 15px; font-weight: 600; } .ig-add-row .i { font-size: 18px; }
.ig-more { padding: 18px 24px 20px; }
.ig-more h3 { margin: 0 0 14px; font-size: 20px; font-weight: 700; }
.ig-more .row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 26px; align-items: end; }
.ig-more .lbl { display: block; font-size: 15px; color: var(--text-2); margin-bottom: 8px; }
.ig-select { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 14px 0 16px; border: 1px solid var(--border); border-radius: 10px; background: #fff; font-size: 16px; color: var(--text); width: 100%; text-align: left; }
.ig-select .i { font-size: 20px; color: var(--muted); }
.ig-select select { appearance: none; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--text); flex: 1; outline: 0; }
.ig-last { display: inline-flex; align-items: center; gap: 10px; height: 48px; font-size: 16px; font-weight: 500; }
.ig-last::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--green); } .ig-last.never::before { background: #C4C9D4; }
.ig-more .btn-outline { height: 50px; padding: 0 22px; font-size: 16px; gap: 10px; border-color: var(--indigo); color: var(--indigo); } .ig-more .btn-outline .i { font-size: 20px; }
.ig-more .hint { font-size: 13px; color: var(--muted); margin-top: 6px; }
.ig-side { padding: 20px 20px 8px; }
.ig-side h2 { margin: 0 0 6px; font-size: 22px; font-weight: 700; }
.ig-side-card { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 18px 0 20px; border-top: 1px solid var(--border); }
.ig-side-card:first-of-type { border-top: 0; }
.ig-side-card b { display: block; font-size: 17px; font-weight: 600; }
.ig-side-card .st { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; margin-top: 4px; color: var(--text-2); }
.ig-side-card .st::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #C4C9D4; }
.ig-side-card .st.connected { color: #1E9C6C; } .ig-side-card .st.connected::before { background: var(--green); }
.ig-side-card .st.error { color: #D63A4E; } .ig-side-card .st.error::before { background: #F0546A; }
.ig-side-card p { margin: 8px 0 14px; font-size: 14px; color: var(--muted); line-height: 1.45; }
.ig-side-card .btn-outline { height: 44px; padding: 0 20px; font-size: 15px; gap: 8px; border-color: var(--indigo); color: var(--indigo); } .ig-side-card .btn-outline .i { font-size: 18px; }
.ig-foot { display: flex; justify-content: flex-end; font-size: 14px; color: var(--muted); padding: 4px 0 0; } .ig-foot .dot { margin: 0 8px; }
.ig-main .es { padding: 56px 24px 48px; } .ig-main .es .il { width: 128px; height: 128px; }
/* dialogs (the np- frame) */
.ig-dialog { width: 560px; } .ig-dialog .np-head .t { display: flex; align-items: center; gap: 16px; }
.ig-dialog .np-body { padding-top: 16px; }
.ig-dialog .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ig-test { display: flex; align-items: center; gap: 14px; margin: -4px 0 18px; }
.ig-test .btn-outline { height: 42px; padding: 0 16px; font-size: 15px; gap: 8px; }
.ig-test .res { display: none; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; } .ig-test .res.ok { display: inline-flex; color: #1E9C6C; } .ig-test .res.err { display: inline-flex; color: #D63A4E; }
.ig-test .res .i { font-size: 18px; }
.ig-run { font-size: 15px; color: var(--text-2); margin-bottom: 12px; }
.ig-msg { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; line-height: 1.5; background: #FDECEF; color: #B42334; border-radius: 10px; padding: 14px 16px; max-height: 150px; overflow: auto; white-space: pre-wrap; margin-bottom: 18px; }
.ig-runs { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 8px; }
.ig-runs .r { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 10px 14px; font-size: 14px; border-top: 1px solid var(--border); }
.ig-runs .r:first-child { border-top: 0; } .ig-runs .r .st { font-weight: 600; } .ig-runs .r .st.ok { color: #1E9C6C; } .ig-runs .r .st.failed { color: #D63A4E; } .ig-runs .r .n { color: var(--muted); }
.np-foot .btn-outline.danger { border-color: #F0546A; color: #D63A4E; }
@media (max-width: 1400px) { .ig-grid { grid-template-columns: 1fr; } .ig-side { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 24px; } .ig-side h2 { grid-column: 1 / -1; } .ig-side-card { border-top: 0; } }
@media (max-width: 1200px) { .ig-cats { grid-template-columns: repeat(2, 1fr); } .ig-table .c-when, .ig-table th.c-when { display: none; } .ig-more .row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) { .ig-cat { height: auto; padding: 14px; gap: 12px; } .ig-cat .ig-tile { width: 48px; height: 48px; } .ig-cat .ig-tile .i { font-size: 24px; } .ig-side { grid-template-columns: 1fr; } .ig-more .row { grid-template-columns: 1fr; } .ig-dialog { width: 100%; } }
/* built-page extras (MM-49): the read-only note, the settings select and the mapping datalist column */
.ig-readonly { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: var(--indigo-bg); color: var(--indigo); font-size: 15px; font-weight: 500; }
.ig-readonly .i { font-size: 20px; }
.ig-muted { color: var(--muted); font-size: 14px; }
.ig-hint { font-size: 13px; color: var(--muted); margin-top: 6px; }
.ig-none .note { color: var(--muted); }
.ig-select select:disabled { color: var(--muted); }

/* ---------- MM-50 · Automations (au-) — [B] extension, plan plans/MM-50.md ---------- */
.au-card { padding: 0; overflow: hidden; }
.au-card .head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 18px; }
.au-card .head h2 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.3px; display: inline-flex; align-items: center; gap: 12px; }
.au-card .head .sub { font-size: 17px; color: var(--text-2); margin-top: 4px; }
.au-card .head .btn-primary { height: 50px; padding: 0 24px; font-size: 18px; gap: 12px; flex: none; } .au-card .head .btn-primary .i { font-size: 22px; }
.au-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.au-table th { background: #F8F9FB; font-size: 16px; font-weight: 600; color: var(--text); text-align: left; padding: 0 20px; height: 56px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.au-table th.c-rule { width: 24%; } .au-table th.c-event { width: 18%; } .au-table th.c-cond { width: 10%; } .au-table th.c-action { width: 16%; } .au-table th.c-last { width: 13%; } .au-table th.c-status { width: 11%; } .au-table th.c-sw { width: 6%; }
.au-table td { padding: 0 20px; height: 72px; border-bottom: 1px solid var(--border); font-size: 16.5px; color: var(--text); vertical-align: middle; }
.au-table tbody tr { cursor: pointer; } .au-table tbody tr:hover td { background: #FAFBFF; } .au-table tbody tr.is-selected td { background: #F3F5FF; }
.au-table .rule { display: flex; align-items: center; gap: 14px; font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.au-table .rule .i { font-size: 28px; color: var(--indigo); flex: none; }
.au-table td.c-last { color: var(--text-2); white-space: nowrap; }
.au-table td .cell { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-status { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 12px; border-radius: 10px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.au-status::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: currentColor; }
.au-status.active { background: #E8F8F1; color: #1E9C6C; } .au-status.paused { background: #FFF4E5; color: #B45309; } .au-status.error { background: #FDECEF; color: #D63A4E; }
.au-table .toggle { width: 52px; height: 30px; border-radius: 15px; display: block; } .au-table .toggle .knob { width: 24px; height: 24px; } .au-table .toggle[aria-checked="true"] { background: var(--indigo); } .au-table .toggle[aria-checked="true"] .knob { left: 25px; }
.au-detail { padding: 0; overflow: hidden; }
.au-detail .head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.au-detail .head h2 { margin: 0; font-size: 24px; font-weight: 700; display: inline-flex; align-items: center; gap: 14px; }
.au-detail .head a { display: inline-flex; align-items: center; gap: 10px; color: var(--indigo); font-size: 17px; font-weight: 600; text-decoration: none; } .au-detail .head a .i { font-size: 22px; }
.au-cols { display: grid; grid-template-columns: repeat(3, 1fr); padding: 18px 24px 24px; }
.au-col { padding: 0 24px 0 0; } .au-col + .au-col { border-left: 1px solid var(--border); padding-left: 28px; }
.au-col .lbl { display: block; font-size: 15px; font-weight: 600; color: var(--text-2); margin-bottom: 12px; }
.au-col .body { display: flex; gap: 18px; align-items: flex-start; } .au-col .body .i { font-size: 34px; color: var(--indigo); flex: none; margin-top: 2px; }
.au-col b { display: block; font-size: 17px; font-weight: 700; } .au-col p { margin: 6px 0 0; font-size: 15.5px; color: var(--text-2); line-height: 1.45; }
.au-empty .es { padding: 48px 24px 44px; } .au-empty .es .il { width: 120px; height: 120px; }
/* the drawer (MM-50b) */
.au-backdrop { position: fixed; inset: 0; background: rgba(23,27,45,0.42); z-index: 60; } .au-backdrop[hidden] { display: none; }
.au-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 540px; max-width: 100vw; background: var(--surface); box-shadow: -12px 0 40px rgba(23,27,45,0.18); display: flex; flex-direction: column; z-index: 61; }
.au-drawer[hidden] { display: none; }
.au-drawer .head { display: flex; align-items: flex-start; gap: 14px; padding: 22px 24px 0; }
.au-drawer .head .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; flex: none; } .au-drawer .head .ic .i { font-size: 26px; }
.au-drawer .head h2 { margin: 0; font-size: 26px; font-weight: 700; } .au-drawer .head .sub { font-size: 16px; color: var(--text-2); margin-top: 2px; }
.au-drawer .head .close { margin-left: auto; width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); font-size: 24px; } .au-drawer .head .close:hover { background: #F3F4F8; }
.au-drawer .body { flex: 1; overflow: auto; padding: 10px 24px 8px; }
.au-lbl { display: block; font-size: 15px; font-weight: 600; margin: 6px 0 8px; }
.au-input { display: flex; align-items: center; height: 46px; border: 1px solid var(--border); border-radius: 10px; padding: 0 14px; background: #fff; }
.au-input input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; font-weight: 500; color: var(--text); min-width: 0; }
.au-input:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); } .au-input.is-invalid { border-color: #F0546A; }
.au-step { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px 14px; margin-top: 10px; }
.au-step .top { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.au-step .num { width: 32px; height: 32px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); font-size: 16px; font-weight: 700; display: grid; place-items: center; flex: none; }
.au-step .top .i { font-size: 26px; color: var(--indigo); flex: none; }
.au-step .top div b { display: block; font-size: 18px; font-weight: 600; } .au-step .top div span { display: block; font-size: 14.5px; color: var(--text-2); margin-top: 1px; }
.au-step .ctl { display: flex; gap: 12px; padding-left: 46px; }
.au-select { position: relative; display: flex; align-items: center; height: 46px; border: 1px solid var(--border); border-radius: 10px; padding: 0 12px 0 14px; background: #fff; flex: 1; min-width: 0; }
.au-select select { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15.5px; color: var(--text); appearance: none; padding-right: 26px; min-width: 0; }
.au-select .i { position: absolute; right: 12px; font-size: 20px; color: var(--muted); pointer-events: none; }
.au-select:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.au-select.narrow { flex: 0 0 96px; } .au-select.narrow input { width: 100%; border: 0; outline: 0; font: inherit; font-size: 15.5px; color: var(--text); background: transparent; }
.au-scope { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: start; margin-top: 12px; padding-left: 15px; }
.au-scope > .i { font-size: 38px; color: var(--indigo); justify-self: center; margin-top: 2px; }
.au-scope > div { min-width: 0; } .au-scope .au-lbl { margin-top: 0; }
.au-preview { margin-top: 12px; background: #F3F5FF; border-radius: 12px; padding: 12px 14px 12px; }
.au-preview .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .au-preview .top b { font-size: 16px; font-weight: 700; } .au-preview .top span { font-size: 14px; color: var(--text-2); }
.au-preview .msg { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: start; } .au-preview .msg > .i { font-size: 28px; color: var(--indigo); justify-self: center; margin-top: 8px; }
.au-preview .box { flex: 1; background: #fff; border: 1px solid #DCE3FF; border-radius: 10px; padding: 12px 14px; font-size: 15px; line-height: 1.5; color: var(--text); min-height: 48px; outline: 0; }
.au-preview .box:focus { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.au-preview .cnt { text-align: right; font-size: 12.5px; color: var(--muted); margin-top: 6px; } .au-preview .cnt.over { color: #D63A4E; font-weight: 600; }
.au-result { display: flex; align-items: center; gap: 10px; margin: 0 24px 10px; padding: 10px 14px; border-radius: 10px; font-size: 14.5px; font-weight: 600; }
.au-result[hidden] { display: none; } .au-result .i { font-size: 20px; }
.au-result.ok { background: #E8F8F1; color: #1E9C6C; } .au-result.none { background: #F3F4F8; color: var(--text-2); } .au-result.err { background: #FDECEF; color: #D63A4E; }
.au-foot { display: flex; align-items: center; gap: 14px; padding: 16px 24px 18px; border-top: 1px solid var(--border-soft); }
.au-foot .toggle { flex: none; width: 52px; height: 30px; border-radius: 15px; } .au-foot .toggle .knob { width: 24px; height: 24px; } .au-foot .toggle[aria-checked="true"] { background: var(--indigo); } .au-foot .toggle[aria-checked="true"] .knob { left: 25px; }
.au-foot .lbl { flex: 1; min-width: 0; } .au-foot .lbl b { display: block; font-size: 14.5px; font-weight: 600; } .au-foot .lbl span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.au-foot .btn-outline, .au-foot .btn-primary { height: 46px; padding: 0 20px; font-size: 16px; font-weight: 600; border-radius: 10px; white-space: nowrap; }
.au-foot .btn-outline { border-color: var(--indigo); color: var(--indigo); }
.au-drawer .meta { padding: 0 24px 16px; text-align: right; font-size: 13px; color: var(--muted); } .au-drawer .meta .dot { margin: 0 8px; }
@media (max-width: 1200px) { .au-table th.c-last, .au-table td.c-last { display: none; } .au-cols { grid-template-columns: 1fr; gap: 18px; } .au-col + .au-col { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 18px; } }
@media (max-width: 768px) { .au-drawer { width: 100%; } .au-step .ctl { padding-left: 0; flex-wrap: wrap; } .au-foot { flex-wrap: wrap; } }
/* production additions (MM-50 build): row menu button, workspace tag, read-only note, error line, field errors, the run history page */
.au-table th.c-sw { width: 118px; } .au-table td.c-sw { padding-right: 16px; }
.au-sw { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.au-dots { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); visibility: hidden; flex: none; }
.au-dots .i { font-size: 20px; } .au-dots:hover, .au-dots[aria-expanded="true"] { background: #EEF0F6; color: var(--text); }
.au-table tbody tr:hover .au-dots, .au-table tbody tr:focus-within .au-dots, .au-table tbody tr.is-selected .au-dots { visibility: visible; }
.au-table .rule .nm { overflow: hidden; text-overflow: ellipsis; }
.au-ws { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: #EEF0F6; color: var(--text-2); font-size: 12px; font-weight: 600; flex: none; }
.au-detail .head h2 .au-ws { height: 26px; font-size: 13px; }
.au-table .sr-only, .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.au-last-sm { display: none; font-size: 13px; color: var(--muted); margin-top: 4px; }
.au-table td.c-status { white-space: nowrap; }
.au-note { display: flex; align-items: center; gap: 10px; margin: 0 24px 16px; padding: 10px 14px; border-radius: 10px; background: var(--indigo-bg); color: var(--indigo); font-size: 15px; font-weight: 500; }
.au-note .i { font-size: 20px; flex: none; }
.au-error { display: flex; align-items: center; gap: 10px; margin: 14px 24px 0; padding: 10px 14px; border-radius: 10px; background: #FDECEF; color: #D63A4E; font-size: 14.5px; font-weight: 600; }
.au-error .i { font-size: 20px; flex: none; }
.au-card + .au-detail, .au-detail + .au-detail { margin-top: 16px; }
.au-select.is-invalid { border-color: #F0546A; } .au-select[hidden] { display: none; }
.au-ferr { margin: 6px 0 0; font-size: 13.5px; font-weight: 600; color: #D63A4E; } .au-step .au-ferr { padding-left: 46px; }
.au-preview .wrap { min-width: 0; }
.au-preview .box.is-invalid { border-color: #F0546A; }
.au-result .samples { display: block; font-weight: 500; margin-top: 4px; color: var(--text-2); font-size: 13.5px; }
.au-runs-top { padding: 2px 0 14px; font-size: 15px; } .au-runs-top .back { display: inline-flex; align-items: center; gap: 8px; color: var(--indigo); font-weight: 500; } .au-runs-top .back .i { font-size: 20px; }
.au-runs { margin-top: 16px; } .au-runs .au-table tbody tr { cursor: default; } .au-runs .au-table tbody tr:hover td { background: transparent; }
.au-run-msg { display: block; font-size: 13px; color: var(--text-2); margin-top: 4px; white-space: normal; }
.au-runs-empty { display: flex; align-items: center; gap: 10px; padding: 18px 24px 24px; color: var(--text-2); font-size: 15px; } .au-runs-empty .i { font-size: 20px; }
/* change request 2 (2026-09-16): the run-history project filter, the Projects column and the fixed scope of the Settings drawer */
.au-runs-filter { display: flex; align-items: center; gap: 12px; } .au-runs-filter .lbl { font-size: 14px; font-weight: 600; color: var(--text-2); }
.au-runs-filter .au-select { min-width: 240px; } .au-runs .c-projects { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-scope-note { margin-top: 8px; font-size: 13px; color: var(--muted); line-height: 1.45; } .au-settings { margin-top: 4px; }
@media (max-width: 1400px) { .au-table td { font-size: 15.5px; } }
@media (max-width: 1200px) { .au-last-sm { display: block; } .au-table th.c-sw { width: 104px; } }
@media (max-width: 768px) {
  .au-card .head { flex-wrap: wrap; } .au-table thead { display: none; }
  .au-table, .au-table tbody, .au-table tr, .au-table td { display: block; width: 100%; }
  #au-rows tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "rule sw" "event event" "status status"; padding: 12px 16px; border-bottom: 1px solid var(--border); }
  #au-rows td { height: auto; padding: 2px 0; border: 0; }
  #au-rows td.c-rule { grid-area: rule; } #au-rows td.c-sw { grid-area: sw; padding: 0; } #au-rows td.c-event { grid-area: event; color: var(--text-2); font-size: 14px; }
  #au-rows td.c-cond, #au-rows td.c-action, #au-rows td.c-last { display: none; } #au-rows td.c-status { grid-area: status; }
  .au-dots { visibility: visible; }
}
.au-table th.c-rule { width: 22%; } .au-table th.c-event { width: 19%; } .au-table th.c-cond { width: 10%; } .au-table th.c-action { width: 17%; } .au-table th.c-last { width: 14%; } .au-table th.c-status { width: 10%; }
.au-table th, .au-table td { padding-left: 16px; padding-right: 16px; }
.au-table th.c-rule { width: 25%; } .au-table th.c-event { width: 18%; } .au-table th.c-cond { width: 9%; } .au-table th.c-action { width: 16%; } .au-table th.c-last { width: 13%; } .au-table th.c-status { width: 10%; }

/* ---------- MM-51 · Capacity and resource planning (cp-) — [B] extension, plan plans/MM-51.md ---------- */
.cp-head { display: flex; align-items: flex-start; gap: 20px; padding: 4px 0 16px; }
.cp-head h1 { margin: 0; font-size: 40px; font-weight: 800; letter-spacing: -0.8px; display: inline-flex; align-items: center; gap: 16px; }
.cp-head .sub { font-size: 19px; color: var(--text-2); margin-top: 6px; }
.cp-nav { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; padding-top: 6px; }
.cp-nav .arrow { width: 48px; height: 48px; border: 1px solid var(--border); border-radius: 10px; background: #fff; display: grid; place-items: center; color: var(--text); }
.cp-nav .arrow:hover { background: #FAFBFD; border-color: #C9D2FF; } .cp-nav .arrow .i { font-size: 22px; }
.cp-range { display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 20px; border: 1px solid var(--border); border-radius: 10px; background: #fff; font-size: 18px; font-weight: 600; white-space: nowrap; }
.cp-range .i { font-size: 22px; color: var(--text-2); }
.cp-span { position: relative; display: inline-flex; align-items: center; height: 48px; padding: 0 12px 0 18px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.cp-span select { border: 0; outline: 0; background: transparent; font: inherit; font-size: 17px; font-weight: 600; color: var(--text); appearance: none; padding-right: 26px; }
.cp-span .i { position: absolute; right: 12px; font-size: 20px; color: var(--muted); pointer-events: none; }
.cp-today { align-self: center; font-size: 16px; font-weight: 600; color: var(--indigo); text-decoration: none; }
.cp-tools { display: flex; align-items: center; gap: 12px; padding: 0 0 16px; flex-wrap: wrap; }
.cp-sel { position: relative; display: inline-flex; align-items: center; height: 48px; padding: 0 12px 0 18px; border: 1px solid var(--border); border-radius: 10px; background: #fff; min-width: 190px; }
.cp-sel select { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 17px; color: var(--text); appearance: none; padding-right: 26px; min-width: 0; }
.cp-sel .i { position: absolute; right: 12px; font-size: 20px; color: var(--muted); pointer-events: none; }
.cp-sel:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.cp-tools .spacer { flex: 1; } .cp-tools .btn-outline { height: 48px; padding: 0 20px; font-size: 17px; gap: 10px; } .cp-tools .btn-outline .i { font-size: 21px; }
.cp-tools .btn-primary { height: 50px; padding: 0 22px; font-size: 17px; gap: 12px; } .cp-tools .btn-primary .i { font-size: 22px; }
.cp-card { padding: 0; overflow: hidden; }
.cp-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cp-table th { background: #F8F9FB; font-size: 16px; font-weight: 600; color: var(--text); text-align: left; padding: 0 20px; height: 56px; border-bottom: 1px solid var(--border); }
.cp-table th.c-total, .cp-table th.c-cap { text-align: center; }
.cp-table col.c-member { width: 26%; } .cp-table col.c-total { width: 9%; } .cp-table col.c-cap { width: 9%; } .cp-table col.c-status { width: 15%; }
.cp-table td { padding: 0 20px; height: 92px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.cp-table tbody tr.member { cursor: pointer; } .cp-table tbody tr.member:hover td { background: #FAFBFF; }
.cp-table tbody tr.member.is-open td { background: #F8F9FF; }
.cp-who { display: flex; align-items: center; gap: 16px; }
.cp-who .chev { width: 28px; height: 28px; display: grid; place-items: center; color: var(--text-2); flex: none; transition: transform .15s; } .cp-who .chev .i { font-size: 22px; }
tr.member.is-open .cp-who .chev { transform: rotate(90deg); }
.cp-av { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; font-weight: 700; color: #fff; flex: none; overflow: hidden; }
.cp-av img, .cp-av svg { width: 100%; height: 100%; }
.cp-who b { font-size: 19px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-strip { display: grid; gap: 8px; }
.cp-day { text-align: center; min-width: 0; }
.cp-day .lbl { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; white-space: nowrap; }
.cp-day .v { display: block; height: 44px; border-radius: 8px; background: #F3F4F8; color: var(--muted); font-size: 16px; font-weight: 600; display: grid; place-items: center; }
.cp-day.has .v { background: #DCE3FF; color: var(--indigo); }
.cp-day.full .v { background: var(--indigo); color: #fff; }
.cp-day.off .v { background: repeating-linear-gradient(135deg, #F3F4F8, #F3F4F8 5px, #ECEEF4 5px, #ECEEF4 10px); }
.cp-total { text-align: center; font-size: 22px; font-weight: 700; } .cp-total .un { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.cp-cap { text-align: center; font-size: 19px; font-weight: 600; color: var(--text); }
.cp-st { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; white-space: nowrap; }
.cp-st::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: currentColor; flex: none; }
.cp-st.ok { color: #12A97B; } .cp-st.over { color: #E07A16; } .cp-st.free, .cp-st.none { color: var(--muted); }
.cp-st.over::before { background: var(--amber); }
/* the expanded member block */
.cp-open td { padding: 0 !important; height: auto !important; background: #F8F9FF; border-bottom: 1px solid var(--border); }
.cp-tasks { padding: 4px 20px 0; }
.cp-tasks .thead { display: grid; grid-template-columns: minmax(0, 1fr) 310px 170px 130px 160px 140px; align-items: center; gap: 12px; padding: 10px 0 12px; }
.cp-tasks .thead b { font-size: 19px; font-weight: 700; } .cp-tasks .thead span { font-size: 15px; color: var(--text-2); }
.cp-task { display: grid; grid-template-columns: minmax(0, 1fr) 310px 170px 130px 160px 140px; align-items: center; gap: 12px; height: 58px; border-top: 1px solid var(--border); background: #fff; padding: 0 14px; }
.cp-task:first-of-type { border-radius: 10px 10px 0 0; } .cp-task:last-of-type { border-radius: 0 0 10px 10px; border-bottom: 1px solid var(--border); }
.cp-task .t { display: flex; align-items: center; gap: 12px; min-width: 0; } .cp-task .t > .i { font-size: 22px; color: var(--muted); flex: none; }
.cp-task .t b { display: block; font-size: 16.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-task .t span { display: block; font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-task .proj { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; color: var(--text); text-decoration: none; min-width: 0; white-space: nowrap; }
.cp-task .proj .pav { width: 28px; height: 28px; border-radius: 7px; color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; flex: none; }
.cp-task .area { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; color: var(--text); } .cp-task .area .i { font-size: 22px; color: var(--indigo); }
.cp-task .hrs { font-size: 17px; font-weight: 700; text-align: right; padding-right: 18px; cursor: text; border-radius: 6px; }
.cp-task .hrs:hover { background: var(--indigo-bg); } .cp-task .hrs.none { color: var(--muted); font-weight: 500; }
.cp-task .hrs input { width: 74px; height: 32px; border: 1px solid var(--indigo); border-radius: 8px; padding: 0 8px; font: inherit; font-size: 16px; text-align: right; outline: 0; }
.cp-task .due { font-size: 16px; color: var(--text); } .cp-task .due.over { color: #D63A4E; font-weight: 600; }
.cp-banner { display: flex; align-items: center; gap: 16px; margin: 16px 0 18px; padding: 16px 18px; border: 1px solid #FAD9A6; border-radius: 12px; background: #FFF7EC; }
.cp-banner .ic { width: 40px; height: 40px; border-radius: 50%; background: var(--amber); color: #fff; display: grid; place-items: center; flex: none; } .cp-banner .ic .i { font-size: 24px; }
.cp-banner b { display: block; font-size: 17px; font-weight: 700; } .cp-banner p { margin: 3px 0 0; font-size: 16px; color: var(--text-2); }
.cp-banner .acts { margin-left: auto; display: flex; gap: 12px; flex: none; }
.cp-banner .btn-outline { height: 50px; padding: 0 20px; font-size: 16px; gap: 10px; border-color: var(--indigo); color: var(--indigo); background: #fff; } .cp-banner .btn-outline .i { font-size: 21px; }
.cp-banner.free { background: #F6F7FA; border-color: var(--border); } .cp-banner.free .ic { background: #C4C9D4; }
.cp-foot { display: flex; align-items: center; gap: 10px; padding: 14px 4px 0; font-size: 15px; color: var(--muted); }
.cp-foot .i { font-size: 20px; } .cp-foot .meta { margin-left: auto; font-size: 14px; } .cp-foot .meta .dot { margin: 0 8px; }
/* rebalance / reschedule dialog */
.cp-dialog { width: 620px; }
.cp-dialog .who { display: flex; align-items: center; gap: 14px; padding: 4px 0 14px; border-bottom: 1px solid var(--border-soft); margin-bottom: 14px; }
.cp-dialog .who .cp-av { width: 44px; height: 44px; } .cp-dialog .who div b { display: block; font-size: 18px; font-weight: 700; } .cp-dialog .who div span { display: block; font-size: 15px; color: var(--text-2); margin-top: 2px; }
.cp-pick { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.cp-pick label { display: grid; grid-template-columns: 24px 1fr auto auto; align-items: center; gap: 14px; padding: 12px 14px; border-top: 1px solid var(--border); cursor: pointer; }
.cp-pick label:first-child { border-top: 0; } .cp-pick label:hover { background: #FAFBFF; } .cp-pick label:has(input:checked) { background: var(--indigo-bg-2); }
.cp-pick input { width: 20px; height: 20px; accent-color: var(--indigo); margin: 0; }
.cp-pick b { display: block; font-size: 16px; font-weight: 600; } .cp-pick .ctx { display: block; font-size: 14px; color: var(--muted); }
.cp-pick .h { font-size: 16px; font-weight: 700; } .cp-pick .d { font-size: 15px; color: var(--text-2); }
.cp-res { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--indigo-bg); color: var(--indigo); font-size: 15px; font-weight: 600; }
.cp-res .i { font-size: 20px; }
/* settings drawer */
.cp-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 520px; max-width: 100vw; background: var(--surface); box-shadow: -12px 0 40px rgba(23,27,45,0.18); display: flex; flex-direction: column; z-index: 61; }
.cp-drawer[hidden] { display: none; }
.cp-drawer .head { display: flex; align-items: flex-start; gap: 14px; padding: 24px 26px 0; }
.cp-drawer .head .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; flex: none; } .cp-drawer .head .ic .i { font-size: 26px; }
.cp-drawer .head h2 { margin: 0; font-size: 26px; font-weight: 700; } .cp-drawer .head .sub { font-size: 16px; color: var(--text-2); margin-top: 2px; }
.cp-drawer .head .close { margin-left: auto; width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); font-size: 24px; } .cp-drawer .head .close:hover { background: #F3F4F8; }
.cp-drawer .body { flex: 1; overflow: auto; padding: 16px 26px 8px; }
.cp-info { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--indigo-bg); color: var(--indigo); font-size: 14.5px; font-weight: 500; margin-bottom: 16px; } .cp-info .i { font-size: 20px; flex: none; }
.cp-field { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .cp-field label { font-size: 15px; font-weight: 600; flex: 1; }
.cp-num { width: 96px; height: 44px; border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 16px; font-weight: 600; text-align: right; color: var(--text); background: #fff; }
.cp-num:focus { outline: 0; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); } .cp-num.is-invalid { border-color: #F0546A; }
.cp-mem { display: grid; grid-template-columns: 44px minmax(0, 1fr) 96px; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--border-soft); }
.cp-mem .cp-av { width: 44px; height: 44px; }
.cp-mem div b { display: block; font-size: 16px; font-weight: 600; } .cp-mem div span { display: block; font-size: 13.5px; color: var(--muted); }
.cp-mem .away { display: inline-block; margin-top: 4px; font-size: 13.5px; color: var(--indigo); font-weight: 600; text-decoration: none; } .cp-mem .away:hover { text-decoration: underline; }
.cp-drawer .foot { display: flex; justify-content: space-between; gap: 12px; padding: 16px 26px 20px; border-top: 1px solid var(--border-soft); }
.cp-drawer .foot .btn-outline, .cp-drawer .foot .btn-primary { height: 48px; padding: 0 24px; font-size: 16px; font-weight: 600; border-radius: 10px; }
@media (max-width: 1400px) { .cp-tasks .thead, .cp-task { grid-template-columns: minmax(0, 1fr) 280px 120px 150px 130px; } .cp-task .area, .cp-tasks .thead .area-h { display: none; } }
@media (max-width: 1200px) { .cp-table col.c-cap { width: 0; } .cp-table th.c-cap, .cp-table td.c-cap { display: none; } .cp-day .lbl { font-size: 11.5px; } }
@media (max-width: 768px) { .cp-nav { width: 100%; margin-left: 0; } .cp-drawer { width: 100%; } .cp-dialog { width: 100%; } }
/* production additions (MM-51 build): the hours button, filters reset, links, settings extras, dialog field spacing */
.cp-task .hrs { background: none; border: 0; font: inherit; font-size: 17px; font-weight: 700; color: var(--text); width: 100%; height: 40px; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.cp-task .hrs.static { cursor: default; } .cp-task .hrs.static:hover { background: none; }
.cp-task .hrs small { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.cp-task .hrs.editing { cursor: default; } .cp-task .hrs.editing:hover { background: none; }
.cp-task .t .tt { min-width: 0; } .cp-task .t .tt a { color: inherit; text-decoration: none; } .cp-task .t .tt a:hover b { color: var(--indigo); }
.cp-task .proj .pn { overflow: hidden; text-overflow: ellipsis; } .cp-task .proj .badge { flex: none; }
.cp-task.empty { grid-template-columns: 1fr; color: var(--muted); } .cp-task.empty b { font-weight: 500; }
.cp-tasks .thead .hrs-h { text-align: right; padding-right: 18px; }
.cp-open .cp-tasks { padding-bottom: 18px; }
.cp-open .cp-tasks > .cp-task:last-of-type, .cp-open .cp-tasks > .cp-task:last-child { border-bottom: 1px solid var(--border); border-radius: 0 0 10px 10px; }
.cp-clear { background: none; border: 0; color: var(--indigo); font-size: 15px; font-weight: 600; padding: 0 6px; }
.cp-cap-sm { display: none; font-size: 13px; color: var(--muted); margin-top: 4px; }
.cp-nocap { margin: 0 0 16px; }
.cp-banner .acts a.btn-outline { text-decoration: none; display: inline-flex; align-items: center; }
.cp-f { margin-top: 16px; }
.cp-pick .txt { min-width: 0; } .cp-pick .txt b, .cp-pick .txt .ctx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-ferr { font-size: 13px; font-weight: 600; color: #D63A4E; margin: -10px 0 12px; }
.cp-mem > .cp-ferr, .cp-mem > .cp-away, .cp-mem > .cp-alloc { grid-column: 1 / -1; margin: 0; }
/* change request 3 (2026-09-17): the per-project allocation editor and the share shown on the filtered page */
.cp-mem .away.alloc { margin-left: 14px; } .cp-mem .away.alloc span { display: inline; font-size: inherit; color: inherit; }
.cp-alloc { background: #F8F9FB; border: 1px solid var(--border-soft); border-radius: 10px; padding: 10px 12px; }
.cp-alloc .rows { display: flex; flex-direction: column; gap: 6px; }
.cp-alloc-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px 20px 28px; align-items: center; gap: 8px; }
.cp-alloc-row .nm { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-alloc-row .unit { font-size: 13.5px; color: var(--muted); }
.cp-alloc-row .cp-pct { height: 36px; width: 84px; border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 14px; text-align: right; }
.cp-alloc-row button { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); } .cp-alloc-row button:hover { background: #F3F4F8; }
.cp-alloc .sum { margin: 8px 0; font-size: 13.5px; color: var(--muted); }
.cp-alloc .add { display: flex; gap: 8px; align-items: center; } .cp-alloc .add .cp-sel { flex: 1; min-width: 0; } .cp-alloc .add select { width: 100%; }
.cp-share { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 6px; background: var(--indigo-bg-2); color: var(--indigo); font-size: 12px; font-weight: 600; vertical-align: middle; }
.cp-mem .note { display: inline-block; margin-left: 8px; font-size: 12.5px; color: var(--muted); }
.cp-mem .away { padding: 0; }
.cp-away { background: #F8F9FB; border: 1px solid var(--border-soft); border-radius: 10px; padding: 10px 12px; }
.cp-away .days { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cp-away .chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px 0 10px; border-radius: 14px; background: #fff; border: 1px solid var(--border); font-size: 13.5px; }
.cp-away .chip button { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); } .cp-away .chip button:hover { background: #F3F4F8; }
.cp-away .none { display: inline; font-size: 13.5px; color: var(--muted); }
.cp-away .add { display: flex; gap: 8px; align-items: center; } .cp-away .add input { height: 36px; border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 14px; }
@media (max-width: 1200px) { .cp-cap-sm { display: block; } }
@media (max-width: 768px) {
  .cp-head { flex-wrap: wrap; } .cp-head h1 { font-size: 30px; flex-wrap: wrap; } .cp-nav { flex-wrap: wrap; }
  .cp-tools .cp-sel { min-width: 0; flex: 1 1 140px; } .cp-tools .spacer { display: none; }
  .cp-card { overflow-x: auto; } .cp-table { min-width: 720px; }
  .cp-tasks .thead { display: none; } .cp-task { grid-template-columns: 1fr auto; height: auto; padding: 10px 12px; row-gap: 4px; }
  .cp-task .proj, .cp-task .area { display: none; }
  .cp-banner { flex-wrap: wrap; } .cp-banner .acts { margin-left: 0; }
}
.cp-task .t .tt { color: var(--text); font-size: inherit; } .cp-task .t .tt > span { color: var(--muted); font-size: 14px; }
/* MM-51 entry points: the My tasks link, the panel's Planned hours field, the form field */
.mt-cap-link { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border-radius: 10px; color: var(--indigo); font-size: 15.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.mt-cap-link:hover { background: var(--indigo-bg); } .mt-cap-link .i { font-size: 19px; } .mt-cap-link .i:last-child { font-size: 15px; }
.sp-hours-row { align-items: center; }
.sp-hours { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text-2); }
.sp-hours input { width: 96px; height: 38px; border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 15px; text-align: right; color: var(--text); background: #fff; }
.sp-hours input:focus { outline: 0; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.sp-hours.static { font-weight: 600; color: var(--text); }
.it-hours input[type=number] { width: 100%; }
.mt-head .mt-cap-link { align-self: flex-end; margin-bottom: -4px; } .mt-head .mt-cap-link + .meta { margin-left: 8px; }

/* ---------- MM-52 · Financial and operating metrics (fi-) — [B] extension, plan plans/MM-52.md ---------- */
.fi-head { display: flex; align-items: flex-start; gap: 20px; padding: 6px 0 18px; }
.fi-head h1 { margin: 0; font-size: 40px; font-weight: 800; letter-spacing: -0.8px; display: inline-flex; align-items: center; gap: 16px; }
.fi-head .sub { font-size: 19px; color: var(--text-2); margin-top: 6px; }
.fi-head .ig-ext { gap: 8px; } .fi-head .ig-ext .i { font-size: 18px; }
.fi-head .acts { margin-left: auto; display: flex; gap: 12px; flex: none; padding-top: 6px; }
.fi-head .btn-outline, .fi-head .btn-primary { height: 50px; padding: 0 22px; font-size: 17px; gap: 12px; } .fi-head .btn-outline .i, .fi-head .btn-primary .i { font-size: 22px; }
.fi-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.fi-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-card); padding: 18px 20px 20px; display: flex; flex-direction: column; }
.fi-card .top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; padding-right: 34px; }
.fi-tile { width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center; flex: none; }
.fi-tile .i { font-size: 26px; }
.fi-tile.cash { background: #E6F7F4; color: #0EA5A0; } .fi-tile.cost { background: var(--indigo-bg); color: var(--indigo); }
.fi-tile.reserve { background: #E8F8F1; color: #12B981; } .fi-tile.enquiries { background: #FFF4E5; color: #F59E0B; }
.fi-card .name { font-size: 17px; font-weight: 600; line-height: 1.25; min-width: 0; }
.fi-card .val { font-size: 34px; font-weight: 800; letter-spacing: -0.5px; display: flex; align-items: baseline; gap: 8px; cursor: text; border-radius: 8px; }
.fi-card .val .unit { font-size: 20px; font-weight: 600; color: var(--text-2); }
.fi-card.missed .val { color: #E07A16; }
.fi-card .val:hover { background: var(--indigo-bg); }
.fi-card .val input { width: 150px; height: 40px; border: 1px solid var(--indigo); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 24px; font-weight: 700; outline: 0; }
.fi-card .tgt { font-size: 15px; color: var(--muted); margin-top: 6px; }
.fi-bar { height: 10px; border-radius: 5px; background: #E9ECF3; overflow: hidden; margin: 12px 0 0; }
.fi-bar span { display: block; height: 100%; border-radius: 5px; background: var(--green); }
.fi-card.missed .fi-bar span { background: var(--amber); }
.fi-card .foot { margin-top: auto; padding-top: 14px; font-size: 14px; color: var(--muted); }
.fi-card .btn-outline { margin-top: 12px; height: 44px; width: 100%; justify-content: center; font-size: 15px; gap: 8px; border-color: var(--indigo); color: var(--indigo); }
.fi-card .dots { position: absolute; top: 14px; right: 12px; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); opacity: 0; }
.fi-card:hover .dots, .fi-card .dots:focus { opacity: 1; } .fi-card .dots:hover { background: #F3F4F8; color: var(--text); } .fi-card .dots .i { font-size: 20px; }
.fi-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.fi-plan { padding: 0; overflow: hidden; }
.fi-plan .head { display: flex; align-items: flex-start; gap: 16px; padding: 20px 24px 16px; }
.fi-plan .head h2 { margin: 0; font-size: 24px; font-weight: 700; } .fi-plan .head .sub { font-size: 16px; color: var(--text-2); margin-top: 4px; }
.fi-plan .head .step { margin-left: auto; display: flex; gap: 8px; flex: none; }
.fi-plan .head .step button { width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 10px; background: #fff; display: grid; place-items: center; color: var(--text); }
.fi-plan .head .step button:hover { background: #FAFBFD; border-color: #C9D2FF; } .fi-plan .head .step .i { font-size: 20px; }
.fi-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.fi-table th { background: #F8F9FB; font-size: 15px; font-weight: 600; color: var(--text-2); padding: 0 18px; height: 46px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: right; }
.fi-table th.c-cat { text-align: left; width: 34%; }
.fi-table td { padding: 0 18px; height: 46px; border-bottom: 1px solid var(--border); font-size: 16px; text-align: right; }
.fi-table td.c-cat { text-align: left; }
.fi-table td.amt { cursor: text; } .fi-table td.amt:hover { background: var(--indigo-bg); }
.fi-table td.amt input { width: 100%; height: 34px; border: 1px solid var(--indigo); border-radius: 8px; padding: 0 8px; font: inherit; font-size: 15px; text-align: right; outline: 0; }
.fi-table tr.total td { background: #F8F9FF; font-weight: 700; border-top: 1px solid var(--border); border-bottom: 0; }
.fi-plan .below { display: flex; align-items: center; gap: 16px; padding: 12px 24px 18px; }
.fi-plan .below .add { display: inline-flex; align-items: center; gap: 8px; color: var(--indigo); font-size: 15px; font-weight: 600; } .fi-plan .below .add .i { font-size: 18px; }
.fi-plan .below .hint { font-size: 14px; color: var(--muted); } .fi-plan .below .hint a { color: var(--indigo); font-weight: 600; text-decoration: none; margin-left: 6px; }
.fi-plan .below .newcat { display: flex; gap: 8px; } .fi-plan .below .newcat input { height: 36px; border: 1px solid var(--indigo); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 15px; outline: 0; }
.fi-source { padding: 20px 22px 22px; }
.fi-source h2 { margin: 0 0 16px; font-size: 22px; font-weight: 700; display: inline-flex; align-items: center; gap: 12px; } .fi-source h2 .i { font-size: 24px; color: var(--indigo); }
.fi-dl { display: grid; grid-template-columns: 140px minmax(0, 1fr); row-gap: 14px; column-gap: 12px; align-items: start; }
.fi-dl dt { font-size: 15px; color: var(--muted); margin: 0; } .fi-dl dd { margin: 0; font-size: 16px; color: var(--text); }
.fi-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 12px 14px; border-radius: 12px; background: var(--indigo-bg); color: var(--indigo); font-size: 14.5px; line-height: 1.45; }
.fi-note .i { font-size: 20px; flex: none; margin-top: 1px; }
.fi-source .btn-outline { margin-top: 16px; width: 100%; height: 46px; justify-content: center; font-size: 16px; gap: 10px; border-color: var(--indigo); color: var(--indigo); } .fi-source .btn-outline .i { font-size: 20px; }
/* dialogs */
.fi-dialog { width: 560px; }
.fi-dialog .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fi-dialog .np-body { padding-top: 16px; }
.fi-hist { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.fi-hist .r { display: grid; grid-template-columns: 130px 1fr auto; gap: 14px; align-items: center; padding: 11px 14px; border-top: 1px solid var(--border); font-size: 15px; }
.fi-hist .r:first-child { border-top: 0; } .fi-hist .r .d { color: var(--text-2); } .fi-hist .r .v { font-weight: 700; text-align: right; } .fi-hist .r .s { color: var(--muted); font-size: 13.5px; }
@media (max-width: 1400px) { .fi-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fi-grid { grid-template-columns: 1fr; } }
@media (max-width: 1200px) { .fi-card .val { font-size: 30px; } .fi-plan { overflow-x: auto; } }
@media (max-width: 768px) { .fi-cards { grid-template-columns: 1fr; } .fi-head { flex-wrap: wrap; } .fi-head .acts { margin-left: 0; width: 100%; } .fi-dialog { width: 100%; } }
/* production additions (MM-52 build): the value button, read-only note, dialog field errors, plan extras */
.fi-card button.val { background: none; border: 0; padding: 0 4px 0 0; margin-left: -4px; padding-left: 4px; font: inherit; font-size: 34px; font-weight: 800; color: inherit; text-align: left; width: fit-content; }
.fi-card.missed button.val { color: #E07A16; }
.fi-card .val.static { cursor: default; } .fi-card .val.static:hover { background: none; }
.fi-card .tgt.derived { margin-top: 4px; }
.fi-readonly { display: flex; align-items: center; gap: 10px; margin: -6px 0 16px; padding: 10px 14px; border-radius: 10px; background: var(--indigo-bg); color: var(--indigo); font-size: 15px; font-weight: 500; }
.fi-readonly .i { font-size: 20px; flex: none; }
.fi-empty { margin-bottom: 20px; } .fi-empty .es { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.fi-plan-empty { padding: 18px 24px; color: var(--muted); font-size: 15px; border-top: 1px solid var(--border); }
.fi-plan .below .newcat button { height: 36px; padding: 0 14px; font-size: 15px; }
.fi-plan .below .hint .linklike { margin-left: 6px; font-weight: 600; }
.fi-ferr { margin-top: 6px; font-size: 13.5px; font-weight: 600; color: #D63A4E; }
.fi-dialog .np-input .sfx { font-size: 14px; color: var(--muted); padding-left: 6px; white-space: nowrap; }
.fi-dialog .np-foot > span:empty { flex: 1; }
.fi-table td.amt:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }

/* ---------- MM-53 · AI planning suggestions (ai-) — [B] extension, plan plans/MM-53.md ---------- */
.ai-backdrop { position: fixed; inset: 0; background: rgba(23,27,45,0.42); z-index: 60; } .ai-backdrop[hidden] { display: none; }
.ai-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 700px; max-width: 100vw; background: var(--surface); box-shadow: -12px 0 40px rgba(23,27,45,0.18); display: flex; flex-direction: column; z-index: 61; }
.ai-drawer[hidden] { display: none; }
.ai-drawer .head { display: flex; align-items: center; gap: 14px; padding: 20px 26px; border-bottom: 1px solid var(--border); }
.ai-drawer .head > .i { font-size: 30px; color: var(--indigo); flex: none; }
.ai-drawer .head b { font-size: 21px; font-weight: 700; }
.ai-drawer .head .close { margin-left: auto; width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); font-size: 26px; } .ai-drawer .head .close:hover { background: #F3F4F8; }
.ai-drawer .body { flex: 1; overflow: auto; padding: 24px 26px 8px; }
.ai-drawer h2 { margin: 0 0 14px; font-size: 32px; font-weight: 800; letter-spacing: -0.6px; }
.ai-badge { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 16px 0 12px; border-radius: 10px; font-size: 15.5px; font-weight: 600; }
.ai-badge .i { font-size: 20px; }
.ai-badge.pending { background: #FFF4E5; color: #B45309; } .ai-badge.running { background: var(--indigo-bg); color: var(--indigo); } .ai-badge.none { background: #F3F4F8; color: var(--text-2); }
.ai-lead { font-size: 17px; line-height: 1.5; color: var(--text-2); margin: 14px 0 20px; }
.ai-desc-lbl { display: flex; align-items: baseline; gap: 12px; font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.ai-desc-lbl a { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--indigo); text-decoration: none; }
.ai-desc { background: #F8F9FB; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; font-size: 16px; line-height: 1.5; color: var(--text); max-height: 108px; overflow: auto; }
.ai-desc.empty { color: var(--muted); }
.ai-sec { font-size: 17px; font-weight: 700; margin: 22px 0 12px; }
.ai-list { display: flex; flex-direction: column; gap: 12px; }
.ai-card { display: grid; grid-template-columns: 28px 56px minmax(0, 1fr); gap: 14px; align-items: start; border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; background: #fff; cursor: pointer; }
.ai-card:hover { box-shadow: 0 4px 14px rgba(23,27,45,0.07); }
.ai-card.is-on { border: 2px solid var(--indigo); background: #F8F9FF; padding: 15px 17px; }
.ai-card input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--indigo); margin: 4px 0 0; }
.ai-tile { width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center; flex: none; } .ai-tile .i { font-size: 26px; }
.ai-tile.sales { background: #FFF4E5; color: #F59E0B; } .ai-tile.marketing { background: var(--indigo-bg); color: var(--indigo); }
.ai-tile.support { background: #FDECEF; color: #F0546A; } .ai-tile.development { background: #E8F8F1; color: #12B981; } .ai-tile.finance { background: #E6F7F4; color: #0EA5A0; }
.ai-card .t { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ai-card .t b { font-size: 19px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-card .t .badge { flex: none; }
.ai-card .t .badge { font-size: 13px; }
.ai-card .t .assume { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 8px; background: var(--indigo-bg); color: var(--indigo); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.ai-card .t .assume .i { font-size: 17px; }
.ai-card .t .dup { margin-left: auto; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 8px; background: #F3F4F8; color: var(--text-2); font-size: 13.5px; font-weight: 600; }
.ai-card p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--text-2); }
.ai-card .acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.ai-card .acts .btn-outline { height: 40px; padding: 0 18px; font-size: 15px; border-color: var(--indigo); color: var(--indigo); background: #fff; }
.ai-card .acts .btn-outline.danger { border-color: #F0546A; color: #D63A4E; } .ai-card .acts .btn-outline.danger:hover { background: #FDECEF; }
.ai-info { display: flex; align-items: center; gap: 12px; margin: 18px 0 8px; padding: 12px 16px; border-radius: 12px; background: var(--indigo-bg); color: var(--indigo); font-size: 15px; font-weight: 500; }
.ai-info .i { font-size: 20px; flex: none; }
.ai-err { display: flex; align-items: center; gap: 12px; margin: 18px 0 8px; padding: 12px 16px; border-radius: 12px; background: #FDECEF; color: #D63A4E; font-size: 15px; font-weight: 600; }
.ai-err .i { font-size: 20px; flex: none; } .ai-err button { margin-left: auto; color: var(--indigo); font-weight: 600; font-size: 15px; }
.ai-empty { text-align: center; padding: 40px 20px 28px; }
.ai-empty .il { width: 132px; height: 132px; display: block; margin: 0 auto 20px; }
.ai-empty h3 { margin: 0 0 8px; font-size: 24px; font-weight: 800; } .ai-empty p { margin: 0 0 20px; font-size: 16px; color: var(--muted); }
.ai-empty .hint { font-size: 14px; color: var(--amber-text); margin-bottom: 14px; }
.ai-empty .btn-primary { height: 50px; padding: 0 24px; font-size: 17px; gap: 10px; }
.ai-skel { display: flex; flex-direction: column; gap: 12px; }
.ai-skel .s { height: 116px; border-radius: 14px; background: linear-gradient(90deg, #F1F3F8 25%, #E7EAF2 37%, #F1F3F8 63%); background-size: 400% 100%; animation: sk 1.4s ease infinite; }
.ai-skel .hint { font-size: 14px; color: var(--muted); text-align: center; padding-top: 4px; }
.ai-drawer .foot { display: flex; align-items: center; gap: 14px; padding: 18px 26px 20px; border-top: 1px solid var(--border); }
.ai-drawer .foot .n { font-size: 16px; color: var(--text-2); }
.ai-drawer .foot .sp { flex: 1; }
.ai-drawer .foot .btn-outline, .ai-drawer .foot .btn-primary { height: 48px; padding: 0 24px; font-size: 16px; font-weight: 600; border-radius: 10px; }
.ai-drawer .foot .btn-primary:disabled { opacity: .5; cursor: default; }
.np-backdrop.ai-over { z-index: 80; }            /* the edit dialog sits above the 700 px drawer */
.ai-tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--indigo-bg); color: var(--indigo); font-size: 12px; font-weight: 700; }
.ai-tag .i { font-size: 13px; }
@media (max-width: 1200px) { .ai-drawer { width: 560px; } .ai-card .t .assume, .ai-card .t .dup { margin-left: 0; } }
@media (max-width: 768px) { .ai-drawer { width: 100%; } .ai-tile { width: 44px; height: 44px; } .ai-drawer .foot { flex-wrap: wrap; } .ai-drawer .foot .btn-outline, .ai-drawer .foot .btn-primary { flex: 1; justify-content: center; } }
/* production additions (MM-53 build): the area chips of a card, the edit dialog and the field error */
.ai-card .t .badge { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 8px; font-size: 13px; font-weight: 600; }
.ai-card .t .badge.area-sales { background: #FFF4E5; color: #B45309; } .ai-card .t .badge.area-marketing { background: var(--indigo-bg); color: var(--indigo); }
.ai-card .t .badge.area-support { background: #FDECEF; color: #D63A4E; } .ai-card .t .badge.area-development { background: #E8F8F1; color: #1E9C6C; }
.ai-card .t .badge.area-finance { background: #E6F7F4; color: #0E8F8A; }
.ai-edit-modal { width: 560px; }
.ai-edit-modal .np-input.tall { height: auto; padding: 10px 14px; }
.ai-edit-modal .np-input.tall textarea { width: 100%; border: 0; outline: 0; font: inherit; font-size: 16px; resize: vertical; background: transparent; color: var(--text); }
.ai-ferr { margin-top: 6px; font-size: 13.5px; font-weight: 600; color: #D63A4E; }
.ai-err a { margin-left: auto; color: var(--indigo); font-weight: 600; text-decoration: none; }
.ai-empty .hint { font-size: 14px; color: #B45309; margin-bottom: 14px; }
/* the AI settings section of MM-19 › General */
.ai-settings .ai-toggle-row { display: flex; align-items: center; gap: 12px; }
.ai-settings .ai-toggle-row .lbl { font-size: 15px; font-weight: 600; color: var(--text); }
.ai-settings .wst-hint .linklike { color: var(--indigo); font-weight: 600; text-decoration: underline; background: none; font: inherit; }
.ai-settings .err { margin-top: 6px; font-size: 13.5px; font-weight: 600; color: #D63A4E; }
.ai-settings .ai-note { display: flex; align-items: flex-start; gap: 10px; margin: 4px 24px 0; padding: 12px 16px; border-radius: 12px; background: var(--indigo-bg); color: var(--indigo); font-size: 14.5px; line-height: 1.5; }
.ai-settings .ai-note .i { font-size: 19px; flex: none; margin-top: 1px; }

/* ---------- MM-54 · Share report with external partners (sh-) — [B] extension, plan plans/MM-54.md ---------- */
/* the shares list behind the dialog */
.sh-head { display: flex; align-items: flex-start; gap: 20px; padding: 4px 0 18px; }
.sh-head h1 { margin: 0; font-size: 40px; font-weight: 800; letter-spacing: -0.8px; }
.sh-head .sub { font-size: 19px; color: var(--text-2); margin-top: 6px; }
.sh-head .btn-primary { margin-left: auto; height: 50px; padding: 0 24px; font-size: 18px; gap: 12px; flex: none; } .sh-head .btn-primary .i { font-size: 22px; }
.sh-card { padding: 0; overflow: hidden; }
.sh-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sh-table th { background: #F8F9FB; font-size: 15px; font-weight: 600; color: var(--text-2); text-align: left; padding: 0 20px; height: 50px; border-bottom: 1px solid var(--border); }
.sh-table th.c-name { width: 26%; } .sh-table th.c-aud { width: 18%; } .sh-table th.c-scope { width: 20%; } .sh-table th.c-exp { width: 13%; } .sh-table th.c-opens { width: 13%; }
.sh-table td { padding: 14px 20px; border-bottom: 1px solid var(--border); font-size: 15.5px; vertical-align: middle; }
.sh-table tbody tr:hover td { background: #FAFBFF; }
.sh-table .nm { display: flex; align-items: center; gap: 12px; min-width: 0; } .sh-table .nm .i { font-size: 22px; color: var(--muted); flex: none; }
.sh-table .nm b { display: block; font-size: 16.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-table .nm span { display: block; font-size: 13.5px; color: var(--muted); }
.sh-table .muted { color: var(--text-2); } .sh-table .warn { color: #D63A4E; font-weight: 600; }
.sh-table .acts { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.sh-table .acts .btn-outline { height: 38px; padding: 0 14px; font-size: 14.5px; gap: 8px; border-color: var(--indigo); color: var(--indigo); }
.sh-table .acts .btn-outline[disabled] { border-color: var(--border); color: var(--muted); cursor: default; }
.sh-table .acts .dots { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); } .sh-table .acts .dots:hover { background: #F3F4F8; color: var(--text); }
.sh-pill { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 7px; font-size: 13px; font-weight: 600; }
.sh-pill.expired { background: #FDECEF; color: #D63A4E; } .sh-pill.revoked { background: #F3F4F8; color: var(--text-2); } .sh-pill.link { background: var(--indigo-bg); color: var(--indigo); }
/* the dialog */
.sh-dialog { width: 1010px; max-height: calc(100vh - 28px); }
.sh-dialog .np-head { align-items: flex-start; }
.sh-dialog .np-head .t { display: flex; align-items: flex-start; gap: 16px; }
.sh-dialog .np-head .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; flex: none; } .sh-dialog .np-head .ic .i { font-size: 24px; }
.sh-dialog .np-head h2 { display: inline-flex; align-items: center; gap: 14px; }
.sh-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 18px; align-items: start; padding: 8px 30px 0; }
.sh-col { border: 1px solid var(--border); border-radius: 14px; background: #FCFCFE; padding: 14px 18px 14px; }
.sh-sec { font-size: 19px; font-weight: 700; margin: 14px 0 10px; } .sh-col > .sh-sec:first-child { margin-top: 0; }
.sh-lbl { display: block; font-size: 15px; font-weight: 600; margin-bottom: 8px; } .sh-lbl .hint { font-weight: 400; color: var(--muted); margin-left: 6px; }
.sh-sub { font-size: 15px; color: var(--text-2); margin: -6px 0 12px; }
.sh-input { display: flex; align-items: center; gap: 10px; height: 44px; border: 1px solid var(--border); border-radius: 10px; padding: 0 14px; background: #fff; }
.sh-input input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--text); min-width: 0; }
.sh-input:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); } .sh-input.is-invalid { border-color: #F0546A; }
.sh-input.ro { background: #F3F4F8; color: var(--muted); } .sh-input.ro input, .sh-input.ro select { color: var(--muted); }
.sh-input select { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--text); appearance: none; }
.sh-input .i { font-size: 20px; color: var(--muted); flex: none; }
.sh-scope { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.sh-check { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 500; cursor: pointer; }
.sh-check input { width: 22px; height: 22px; accent-color: var(--indigo); margin: 0; flex: none; }
.sh-warn { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #B45309; background: #FFF7EC; border-radius: 9px; padding: 8px 12px; margin-top: -2px; }
.sh-warn .i { font-size: 17px; flex: none; }
.sh-radio { display: flex; gap: 12px; align-items: flex-start; padding: 6px 0; cursor: pointer; }
.sh-radio input { width: 20px; height: 20px; accent-color: var(--indigo); margin: 2px 0 0; flex: none; }
.sh-radio b { display: block; font-size: 16px; font-weight: 600; } .sh-radio span { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
.sh-add { display: flex; gap: 10px; } .sh-add .btn-outline { height: 44px; padding: 0 18px; font-size: 15px; flex: none; border-color: var(--indigo); color: var(--indigo); }
.sh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sh-chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px 0 12px; border-radius: 9px; background: var(--indigo-bg); color: var(--indigo); font-size: 14px; font-weight: 600; }
.sh-chip button { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: inherit; } .sh-chip button:hover { background: #DCE3FF; } .sh-chip .i { font-size: 14px; }
.sh-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px !important; }
.sh-err { color: #D63A4E; font-size: 13.5px; margin-top: 6px; }
/* preview */
.sh-preview { background: #fff; border: 1px solid #E3E8FF; border-radius: 14px; padding: 14px 16px 16px; max-height: 348px; overflow: auto; }
.sh-preview .brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .sh-preview .brand .sh-logo { width: 30px; height: 30px; flex: none; } .sh-preview .brand b { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; }
.sh-preview h3 { margin: 0; font-size: 20px; font-weight: 700; } .sh-preview .date { font-size: 14px; color: var(--muted); margin-top: 4px; }
.sh-preview .rule { height: 1px; background: #EEF0F5; margin: 14px 0; }
.sh-preview .sec { font-size: 16px; font-weight: 700; margin: 0 0 12px; }
.sh-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 96px 46px; gap: 10px; align-items: center; margin-bottom: 8px; }
.sh-row .av { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; }
.sh-row .nm { font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-row .bar { height: 8px; border-radius: 4px; background: #E9ECF3; overflow: hidden; } .sh-row .bar span { display: block; height: 100%; border-radius: 4px; }
.sh-row .pct { font-size: 15px; font-weight: 700; text-align: right; }
.sh-preview .mile { display: flex; align-items: center; gap: 10px; font-size: 15px; margin-bottom: 8px; } .sh-preview .mile .i { font-size: 18px; color: var(--indigo); flex: none; }
.sh-preview .mile .d { margin-left: auto; color: var(--text-2); font-size: 14px; white-space: nowrap; }
.sh-preview .fin { display: flex; justify-content: space-between; font-size: 15px; margin-bottom: 8px; } .sh-preview .fin b { font-weight: 700; }
.sh-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--indigo-bg); color: var(--indigo); font-size: 14px; line-height: 1.45; }
.sh-note .i { font-size: 20px; flex: none; margin-top: 1px; }
.sh-skel { height: 220px; border-radius: 12px; background: linear-gradient(90deg, #F1F3F8 25%, #E7EAF2 37%, #F1F3F8 63%); background-size: 400% 100%; animation: sk 1.4s ease infinite; }
/* share link block + footer */
.sh-link { margin: 12px 30px 0; border: 1px solid var(--border); border-radius: 14px; padding: 10px 18px; display: grid; grid-template-columns: minmax(0, 1fr) 1fr; gap: 20px; align-items: center; }
.sh-link h3 { margin: 0 0 6px; font-size: 19px; font-weight: 700; } .sh-link p { margin: 0; font-size: 15px; color: var(--muted); }
.sh-placeholder { display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; border: 1px dashed var(--border); border-radius: 12px; background: #F8F9FB; color: var(--muted); font-size: 15px; }
.sh-placeholder .i { font-size: 19px; }
.sh-url { display: flex; gap: 10px; align-items: center; }
.sh-url .sh-input { flex: 1; } .sh-url .btn-outline { height: 46px; padding: 0 16px; font-size: 15px; flex: none; border-color: var(--indigo); color: var(--indigo); }
.sh-foot { display: flex; align-items: center; gap: 16px; padding: 12px 30px 16px; }
.sh-foot .note { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text-2); } .sh-foot .note .i { font-size: 20px; color: var(--muted); }
.sh-foot .sp { flex: 1; }
.sh-foot .btn-outline, .sh-foot .btn-primary { height: 48px; padding: 0 26px; font-size: 16px; font-weight: 600; border-radius: 10px; }
.sh-foot .btn-primary:disabled { opacity: .5; cursor: default; }
@media (max-width: 1200px) { .sh-dialog { width: 720px; } .sh-grid { grid-template-columns: 1fr; } .sh-link { grid-template-columns: 1fr; } .sh-table th.c-scope, .sh-table td.c-scope { display: none; } }
@media (max-width: 768px) { .sh-dialog { width: 100%; } .sh-scope { grid-template-columns: 1fr; } .sh-two { grid-template-columns: 1fr; } .sh-foot { flex-wrap: wrap; } }

/* production additions (MM-54 build): the row menu, the preview extras, the public page and the gate */
.sh-menu { position: fixed; z-index: 90; }
.sh-menu button.danger { color: #D63A4E; }
.sh-preview .mile .t, .sh-public-card .mile .t { display: flex; flex-direction: column; min-width: 0; } .sh-preview .mile .t small, .sh-public-card .mile .t small { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.sh-preview .fin > span, .sh-public-card .fin > span { display: flex; flex-direction: column; } .sh-preview .fin small, .sh-public-card .fin small { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.sh-empty { font-size: 14px; color: var(--muted); padding: 4px 0 8px; } .sh-none { color: var(--muted); font-weight: 500; }
.sh-row.sh-status { grid-template-columns: 34px minmax(0, 1fr) auto 0; } .sh-row .areas { display: flex; gap: 4px; }
.sh-st { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: #F3F4F8; color: var(--text-2); }
.sh-st.ok { background: #E8F8F1; color: #1E9C6C; } .sh-st.needs_attention { background: #FFF4E5; color: #B45309; } .sh-st.critical { background: #FDECEF; color: #D63A4E; }
.sh-dialog .er-banner { margin: 12px 30px 0; }
.sh-public-body { margin: 0; background: #F6F7FB; font-family: Inter, "Segoe UI", Arial, sans-serif; color: var(--text); }
.sh-public { max-width: 980px; margin: 0 auto; padding: 32px 24px 48px; }
.sh-public-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; } .sh-public-brand b { font-size: 24px; font-weight: 800; letter-spacing: -0.4px; }
.sh-public-report h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.7px; }
.sh-public-meta { font-size: 15px; color: var(--text-2); margin: 6px 0 22px; }
.sh-public-sections { display: flex; flex-direction: column; gap: 16px; }
.sh-public-card { background: #fff; border: 1px solid #E3E8FF; border-radius: 16px; padding: 20px 22px; }
.sh-public-card .sec { font-size: 18px; font-weight: 700; margin: 0 0 14px; }
.sh-public-card .sh-row { grid-template-columns: 38px minmax(0, 1fr) 200px 56px; margin-bottom: 10px; } .sh-public-card .sh-row.sh-status { grid-template-columns: 38px minmax(0, 1fr) auto 0; }
.sh-public-card .sh-row .av { width: 38px; height: 38px; font-size: 13px; } .sh-public-card .sh-row .nm { font-size: 16px; }
.sh-public-card .mile, .sh-public-card .fin { font-size: 16px; padding: 6px 0; border-bottom: 1px solid #F1F3F8; } .sh-public-card .mile:last-child, .sh-public-card .fin:last-child { border-bottom: 0; }
.sh-public-card .mile .i { font-size: 20px; color: var(--indigo); flex: none; } .sh-public-card .mile { display: flex; align-items: center; gap: 12px; } .sh-public-card .mile .d { margin-left: auto; color: var(--text-2); white-space: nowrap; }
.sh-public-card .fin { display: flex; justify-content: space-between; } .sh-public-card .fin b { font-weight: 700; }
.sh-public-expiry { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 12px 16px; border-radius: 12px; background: #FFF7EC; color: #B45309; font-size: 15px; } .sh-public-expiry .i { font-size: 20px; }
.sh-public-foot { margin-top: 22px; font-size: 14px; color: var(--muted); }
.sh-public-gate { max-width: 480px; margin: 40px auto 0; background: #fff; border: 1px solid #E3E8FF; border-radius: 18px; padding: 30px 30px 24px; text-align: center; }
.sh-public-gate .ic { width: 56px; height: 56px; border-radius: 16px; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; margin: 0 auto 16px; } .sh-public-gate .ic .i { font-size: 28px; }
.sh-public-gate h1 { margin: 0 0 8px; font-size: 26px; font-weight: 800; } .sh-public-gate p { margin: 0 0 18px; font-size: 15.5px; color: var(--text-2); }
.sh-gate-form { text-align: left; } .sh-gate-form .btn-primary { width: 100%; height: 48px; justify-content: center; margin-top: 16px; font-size: 16px; }
.sh-public-gone .il { width: 132px; height: 132px; display: block; margin: 0 auto 18px; }
@media (max-width: 768px) { .sh-public { padding: 20px 16px 32px; } .sh-public-card .sh-row { grid-template-columns: 34px minmax(0, 1fr) 90px 48px; } }
.rp-share { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.auth-card .auth-links { margin-top: 14px; text-align: center; font-size: 14.5px; } .auth-card .auth-links a { color: var(--indigo); font-weight: 600; text-decoration: none; }
.au-note { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--indigo-bg); color: var(--indigo); font-size: 13.5px; line-height: 1.45; } .au-note .i { font-size: 18px; flex: none; margin-top: 1px; }

/* ---------- C5 · lazy subtrees of large areas (MM-06 §3) ---------- */
.tree tr.lazy-row td { padding: 8px 12px; color: var(--muted); font-size: 14px; }
.tree tr.lazy-row .tcell { display: flex; align-items: center; gap: 10px; }
.tree tr.lazy-row .spin { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--indigo); border-radius: 50%; animation: mm-spin 0.8s linear infinite; }
.tree tr.lazy-row.is-error td { color: var(--red); } .tree tr.lazy-row.is-error .linklike { margin-left: 6px; color: var(--indigo); font-weight: 600; }
.tree-note { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13.5px; color: var(--muted); } .tree-note .i { font-size: 18px; }
@keyframes mm-spin { to { transform: rotate(360deg); } }

/* ---------- C6 · workspace address + danger zone (MM-19 › General) ---------- */
.wst-addr { display: flex; align-items: center; gap: 0; } .wst-addr .pre { height: 44px; display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--border); border-right: 0; border-radius: 10px 0 0 10px; background: #F8F9FB; color: var(--muted); font-size: 14px; white-space: nowrap; }
.wst-addr .wst-input { border-radius: 0 10px 10px 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
#wsettings[data-tab="general"] #wst-tab-host { display: flex; flex-direction: column; gap: 16px; }
#wsettings[data-tab="general"] #wst-tab-host > .wst-views, #wsettings[data-tab="general"] #wst-tab-host > .wst-danger { margin-top: 0; }
.wst-danger { margin-top: 20px; border-color: #F6C8CF; } .wst-danger h2 { color: var(--red); } .wst-danger .sub { margin: 4px 0 12px; }
.wst-danger .btn-outline.danger { color: var(--red); border-color: #F0A2AE; } .wst-danger .btn-outline.danger:hover { background: #FFF1F3; }

/* ---------- C7 · filter range, shared views card ---------- */
.fp-range { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 14px; } .fp-range label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.fp-range input { height: 40px; border: 1px solid var(--border); border-radius: 10px; padding: 0 10px; font: inherit; font-size: 14px; }
.wst-views { margin-top: 20px; } .wst-views .sub { margin-top: 4px; }
.wst-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14.5px; } .wst-table th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border-soft); }
.wst-table td { padding: 10px; border-bottom: 1px solid var(--border-soft); } .wst-table .c-act { text-align: right; white-space: nowrap; } .wst-table .c-act .linklike { margin-left: 14px; color: var(--indigo); font-weight: 600; } .wst-table .c-act .linklike.danger { color: var(--red); }
.wst-default { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--indigo-bg-2); color: var(--indigo); font-size: 12px; font-weight: 600; }
@media (max-width: 768px) {   /* C6 / C7 on a phone: the address wraps, the views table scrolls inside its card */
  .wst-addr { flex-wrap: wrap; } .wst-addr .pre { width: 100%; box-sizing: border-box; white-space: normal; word-break: break-all; border-right: 1px solid var(--border); border-bottom: 0; border-radius: 10px 10px 0 0; height: auto; padding: 8px 12px; }
  .wst-addr .wst-input { width: 100%; box-sizing: border-box; border-radius: 0 0 10px 10px; }
  .wst-views { overflow-x: auto; min-width: 0; } .wst-table { min-width: 0; } .wst-table td, .wst-table th { padding: 8px 6px; font-size: 13px; } .wst-table .c-act .linklike { margin-left: 8px; }
  .wst-grid > * { min-width: 0; }
}


/* C8 · e-mail address change on the Profile tab */
.ps-email-row { display: flex; gap: 8px; align-items: center; }
.ps-email-row .wst-input { flex: 1; min-width: 0; }
.ps-email-pending { display: flex; gap: 10px; margin-top: 10px; padding: 12px 14px; border: 1px solid #FCD9A0; background: #FFF8EC; border-radius: 10px; font-size: 13px; }
.ps-email-pending > .i { width: 18px; height: 18px; flex: none; color: #F59E0B; margin-top: 2px; }
.ps-email-pending b { font-weight: 600; }
.ps-email-pending .wst-hint { margin-top: 4px; }
.ps-email-acts { display: flex; gap: 8px; margin-top: 10px; }
.ps-email-acts .btn-outline { padding: 6px 12px; font-size: 13px; }
.mb-mail { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.mb-mail.failed { color: #F0546A; }
.mb-mail.sent { color: #12B981; }


/* ---------- MM-55 · the customer's own AI over MCP (mc-) — phase A: connection ---------- */
.mc-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--border); background: #F8F9FB; margin: 6px 0 14px; }
.mc-row > .i { width: 22px; height: 22px; color: var(--muted); flex: none; }
.mc-row b { font-size: 15px; font-weight: 600; }
.mc-row .meta { font-size: 14px; color: var(--muted); }
.mc-row .act { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.mc-row.is-on { background: #ECFDF3; border-color: #BDEBD3; box-shadow: inset 4px 0 0 #12B981; }
.mc-row.is-on > .i { color: #12B981; }
.mc-row.is-off { background: #F3F5FB; color: var(--text-2); }
.dg.mc-connect { width: 640px; padding: 26px 30px 24px; }
.dg.mc-connect .head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; padding-right: 44px; }
.dg.mc-connect .head .sp { width: 30px; height: 30px; color: var(--indigo); }
.dg.mc-connect h2 { font-size: 24px; margin: 0; }
.dg.mc-connect .lead { font-size: 15.5px; color: var(--text-2); margin: 0 0 18px; line-height: 1.45; }
.mc-lbl { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.mc-addr { display: flex; gap: 10px; margin-bottom: 18px; }
.mc-addr input { flex: 1; min-width: 0; height: 46px; border: 1px solid var(--border); border-radius: 10px; padding: 0 14px; font: inherit; font-size: 15px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #F8F9FB; color: var(--text); }
.mc-addr .btn-outline { height: 46px; gap: 8px; white-space: nowrap; }
.mc-steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 9px; }
.mc-steps li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: center; font-size: 15px; }
.mc-steps li .n { width: 28px; height: 28px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.mc-wait { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 16px; border-radius: 12px; background: #F8F9FB; border: 1px dashed var(--border); font-size: 15px; color: var(--text-2); }
.mc-wait .spin { width: 18px; height: 18px; border: 2px solid #C9CFDD; border-top-color: var(--indigo); border-radius: 50%; animation: mc-spin .9s linear infinite; flex: none; }
@keyframes mc-spin { to { transform: rotate(360deg); } }
.mc-wait.is-on { background: #ECFDF3; border: 1px solid #BDEBD3; color: #0B7A55; font-weight: 600; }
.mc-wait.is-on .i { width: 22px; height: 22px; color: #12B981; }
.mc-exp { margin-top: 16px; border-top: 1px solid var(--border-soft); padding-top: 12px; }
.mc-exp > button { display: flex; align-items: center; gap: 8px; background: none; border: 0; font: inherit; font-size: 15px; font-weight: 600; color: var(--text); cursor: pointer; padding: 4px 0; }
.mc-exp > button .i { width: 18px; height: 18px; transition: transform .15s; color: var(--text-2); }
.mc-exp.is-open > button .i { transform: rotate(90deg); }
.mc-exp .body { display: none; padding: 6px 0 0 26px; font-size: 14.5px; color: var(--text-2); line-height: 1.5; }
.mc-exp.is-open .body { display: block; }
.mc-exp .body .btn-outline { margin-top: 10px; height: 40px; gap: 8px; }
.dg.mc-connect .foot, .dg.mc-token .foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.dg.mc-token { width: 520px; padding: 26px 30px 24px; }
.dg.mc-token .head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-right: 44px; }
.dg.mc-token .head .sp { width: 26px; height: 26px; color: var(--indigo); }
.dg.mc-token h2 { font-size: 22px; margin: 0; }
.mc-field { margin-bottom: 14px; }
.mc-field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.mc-reveal { display: flex; gap: 10px; }
.mc-reveal input { flex: 1; min-width: 0; height: 46px; border: 1px solid var(--border); border-radius: 10px; padding: 0 14px; font-size: 14px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #F8F9FB; color: var(--text); }
.mc-reveal .btn-outline { height: 46px; gap: 8px; white-space: nowrap; }
.mc-note { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: #FFF4E5; color: #B45309; font-size: 14px; margin-top: 10px; }
.mc-note .i { width: 18px; height: 18px; flex: none; }
.mc-consent { text-align: left; }
.mc-consent h1 { text-align: left; }
.mc-facts { border: 1px solid var(--border); border-radius: 12px; padding: 4px 16px; margin: 14px 0 6px; }
.mc-facts .row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border-soft); font-size: 15px; }
.mc-facts .val { min-width: 0; }
.mc-facts .row:last-child { border-bottom: 0; }
.mc-facts .lbl { color: var(--muted); font-size: 13.5px; font-weight: 600; }
.mc-facts .val b { font-weight: 600; }
.mc-facts .val .sub { display: block; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.mc-consent .lbl2 { font-size: 15px; font-weight: 700; margin: 18px 0 0; }
.mc-scopes { list-style: none; padding: 0; margin: 10px 0 22px; display: grid; gap: 8px; }
.mc-scopes li { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.mc-scopes li .i { width: 20px; height: 20px; color: #12B981; flex: none; }
.mc-consent .acts { display: flex; gap: 12px; justify-content: flex-end; }
.mc-consent .acts .btn-outline, .mc-consent .acts .btn-primary { height: 46px; padding: 0 24px; font-size: 15px; font-weight: 600; }
.mc-consent .foot-note { font-size: 13.5px; color: var(--muted); margin-top: 18px; line-height: 1.45; }
.mc-consent.is-invalid .mc-facts, .mc-consent.is-invalid .lbl2, .mc-consent.is-invalid .mc-scopes, .mc-consent.is-invalid .foot-note { display: none; }
.mc-connections .head { display: flex; align-items: flex-start; gap: 12px; }
.mc-connections .head h2 { display: flex; align-items: center; gap: 12px; }
.mc-connections .head .btn-outline { margin-left: auto; height: 40px; gap: 8px; white-space: nowrap; }
.mc-connections table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 15px; }
.mc-connections th { text-align: left; font-size: 13px; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.mc-connections td { padding: 12px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.mc-connections .who { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.mc-connections .who .ic { width: 34px; height: 34px; border-radius: 9px; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; flex: none; }
.mc-connections .who .ic .i { width: 18px; height: 18px; }
.mc-connections .who .k { display: block; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.mc-scope { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; background: #F3F5FB; color: var(--text-2); font-size: 12.5px; font-weight: 600; margin: 2px 4px 2px 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.mc-connections .rev { color: #D63A4E; font-weight: 600; background: none; border: 0; cursor: pointer; font: inherit; }
.mc-connections .rev:hover { text-decoration: underline; }
.mc-connections .empty-line { display: flex; align-items: center; gap: 12px; padding: 18px 4px 6px; color: var(--text-2); font-size: 15px; }
.mc-connections .empty-line > .i { width: 22px; height: 22px; color: var(--muted); flex: none; }
.mc-connections .empty-line .btn-outline { height: 38px; margin-left: auto; white-space: nowrap; }
.mc-connections .foot2 { display: flex; justify-content: flex-end; padding-top: 14px; }
.mc-connections .foot2 .btn-outline { height: 40px; gap: 8px; }
.mc-sec { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-soft); }
.mc-sec .t { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.mc-sec .t > .i { width: 22px; height: 22px; color: var(--indigo); }
.mc-addr-ro { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mc-addr-ro code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; background: #F3F5FB; padding: 9px 12px; border-radius: 8px; word-break: break-all; }
.mc-addr-ro .btn-outline { height: 38px; padding: 0 12px; font-size: 14px; gap: 6px; }
@media (max-width: 768px) {
  .dg.mc-connect, .dg.mc-token { width: auto; }
  .mc-connections table { display: block; overflow-x: auto; }
  .mc-facts .row { grid-template-columns: 1fr; gap: 4px; }
}


/* ---------- MM-55 phase B · the intake: wizard idea mode, the proposals card, the review drawer, the brief ---------- */
.mc-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.mc-mode { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: #fff; text-align: left; cursor: pointer; position: relative; font: inherit; }
.mc-mode > .i { width: 30px; height: 30px; color: var(--indigo); }
.mc-mode b { display: block; font-size: 16px; font-weight: 700; padding-right: 84px; }
.mc-mode .d { display: block; font-size: 13.5px; color: var(--text-2); margin-top: 3px; line-height: 1.4; }
.mc-mode .ig-ext { position: absolute; right: 12px; top: 12px; }
.mc-mode.is-selected { border-color: var(--indigo); background: var(--indigo-bg-2); box-shadow: 0 0 0 1px var(--indigo) inset; }
.mc-modes.is-compact .mc-mode { padding: 10px 14px; align-items: center; }
.mc-modes.is-compact .mc-mode .d { display: none; }
.mc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mc-sent { text-align: center; padding: 8px 20px 6px; }
.mc-sent .il { width: 140px; height: 140px; margin: 0 auto 8px; display: block; }
.mc-sent h3 { font-size: 24px; font-weight: 800; margin: 0 0 8px; }
.mc-sent p { color: var(--text-2); font-size: 15px; line-height: 1.5; margin: 0 auto 18px; max-width: 520px; }
.mc-sent .acts { display: flex; justify-content: center; gap: 12px; }
.mc-prompt { margin: 16px auto 0; max-width: 560px; text-align: left; background: #F8F9FB; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 13px; color: var(--text-2); line-height: 1.5; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.mc-proposals { margin-bottom: 16px; padding: 18px 22px 8px; }
.mc-p-head h2 { display: flex; align-items: center; gap: 10px; font-size: 18px; margin: 0; }
.mc-p-head h2 > .i { width: 20px; height: 20px; color: var(--indigo); }
.mc-p-head .sub { color: var(--text-2); font-size: 14px; margin: 4px 0 8px; }
.mc-p-table { width: 100%; border-collapse: collapse; }
.mc-p-table td { padding: 10px 8px; border-top: 1px solid var(--border-soft); vertical-align: middle; font-size: 14.5px; }
.mc-p-table td.ttl { display: flex; align-items: center; gap: 10px; }
.mc-p-table td.ttl > .i { width: 18px; height: 18px; color: var(--indigo); flex: none; }
.mc-p-table .from { display: block; font-size: 12.5px; color: var(--muted); }
.mc-p-table td.since { color: var(--muted); white-space: nowrap; }
.mc-p-table td.acts { text-align: right; white-space: nowrap; }
.mc-p-table td.acts .btn-primary, .mc-p-table td.acts .btn-outline { height: 34px; padding: 0 14px; font-size: 13.5px; }
.mc-state { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px; font-size: 12.5px; font-weight: 600; background: #F3F5FB; color: var(--text-2); white-space: nowrap; }
.mc-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #9CA3AF; }
.mc-state.complete { background: #ECFDF3; color: #0B7A55; } .mc-state.complete::before { background: #12B981; }
.mc-state.partial, .mc-state.open { background: #FFF4E5; color: #B45309; } .mc-state.partial::before, .mc-state.open::before { background: #F59E0B; }
.ai-drawer.mc-drawer { width: 760px; }
.mc-d-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mc-d-title h2 { margin: 0; display: flex; align-items: center; gap: 8px; }
.mc-pencil { background: none; border: 0; cursor: pointer; color: var(--muted); padding: 2px; display: inline-flex; vertical-align: middle; }
.mc-pencil .i { width: 15px; height: 15px; } .mc-pencil:hover { color: var(--indigo); }
.mc-badge { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; font-size: 12.5px; font-weight: 600; margin-left: auto; }
.mc-badge.ok { background: #ECFDF3; color: #0B7A55; } .mc-badge.warn { background: #FFF4E5; color: #B45309; } .mc-badge.off { background: #F3F5FB; color: var(--text-2); }
.mc-d-source { font-size: 13px; color: var(--muted); margin: 4px 0 14px; }
.mc-d-warn, .mc-d-missing { display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #FFF4E5; color: #B45309; font-size: 13.5px; margin-bottom: 12px; }
.mc-d-warn .i { width: 18px; height: 18px; flex: none; }
.mc-d-missing { display: block; } .mc-d-missing ul { margin: 6px 0 0 18px; padding: 0; }
.mc-d-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mc-d-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; background: #fff; }
.mc-d-card h3 { font-size: 14px; margin: 0 0 8px; }
.mc-d-card dl { margin: 0; display: grid; grid-template-columns: 110px 1fr; gap: 6px 10px; font-size: 13.5px; }
.mc-d-card dt { color: var(--muted); } .mc-d-card dd { margin: 0; }
.mc-d-areas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.mc-d-areas .tile { border: 1px solid var(--border-soft); border-radius: 8px; padding: 6px; text-align: center; font-size: 12.5px; }
.mc-d-areas .tile .lbl { display: block; color: var(--muted); }
.mc-d-areas .tile .w { width: 44px; text-align: right; border: 1px solid var(--border); border-radius: 6px; padding: 2px 4px; font: inherit; }
.mc-d-areas .tile .own { display: block; font-size: 11.5px; color: var(--text-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-d-total { font-size: 12.5px; color: var(--muted); margin-top: 6px; text-align: right; }
.mc-d-total.bad { color: #F0546A; font-weight: 600; }
.mc-d-qa { grid-template-columns: 1fr !important; gap: 2px 0 !important; }
.mc-d-qa dt { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.mc-d-qa dd { font-size: 14px; display: flex; gap: 6px; align-items: flex-start; }
.mc-d-qa dd .txt { flex: 1; white-space: pre-wrap; } .mc-d-qa dd.is-empty .txt { color: #B45309; font-style: italic; }
.mc-d-assign { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; }
.mc-d-assign li { display: flex; gap: 10px; align-items: center; }
.mc-d-assign .who { font-weight: 600; min-width: 140px; } .mc-d-assign .n { color: var(--text-2); }
.mc-d-assign li.is-unassigned .who { color: #B45309; } .mc-d-assign .hint { font-size: 12px; color: var(--muted); }
.mc-d-h { font-size: 15px; margin: 14px 0 8px; }
.mc-d-area { margin-bottom: 12px; }
.mc-d-areahead { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 6px 8px; border-radius: 8px; background: #F8F9FB; margin-bottom: 4px; }
.mc-d-areahead span { color: var(--text-2); } .mc-d-areahead .i { width: 16px; height: 16px; color: #12B981; margin-left: auto; }
.mc-d-areahead.bad { background: #FFF1F2; } .mc-d-areahead .need { margin-left: auto; color: #D63A4E; font-weight: 600; }
.mc-row-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px 6px calc(8px + var(--depth, 0) * 22px); border-bottom: 1px solid var(--border-soft); font-size: 13.5px; }
.mc-row-item .ty { color: var(--indigo); width: 14px; flex: none; }
.mc-row-item .txt { flex: 1; min-width: 0; } .mc-row-item .txt b { font-weight: 600; }
.mc-row-item .txt .d { display: block; color: var(--text-2); font-size: 12.5px; }
.mc-row-item .txt .meta { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.mc-row-item .tag { display: inline-block; padding: 0 6px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.mc-row-item .tag.mand { background: #FFF1F2; color: #D63A4E; } .mc-row-item .tag.assume { background: #FFF4E5; color: #B45309; }
.mc-row-item.is-discarded { opacity: .45; text-decoration: line-through; }
.mc-owner { flex: none; max-width: 160px; font-size: 12px; padding: 3px 8px; border-radius: 12px; background: var(--indigo-bg); color: var(--indigo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-owner.is-role { background: transparent; border: 1px dashed var(--border); color: var(--text-2); }
.mc-d-foot { display: flex; align-items: center; gap: 10px; }
.mc-d-foot .count { margin-right: auto; color: var(--text-2); font-size: 13.5px; }
.mc-wait-note { color: var(--text-2); font-size: 13.5px; }
.mc-brief { margin-top: 16px; padding: 16px 20px; }
.mc-brief-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mc-brief-head h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; margin: 0; }
.mc-brief-head h3 > .i { width: 18px; height: 18px; color: var(--indigo); }
.mc-brief-head .src { font-size: 12.5px; color: var(--muted); margin-left: auto; }
.mc-brief-qa { margin: 8px 0 0; display: grid; gap: 2px; }
.mc-brief-qa dt { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.mc-brief-qa dd { margin: 0; font-size: 14.5px; white-space: pre-wrap; }
@media (max-width: 768px) {
  .mc-modes, .mc-two, .mc-d-grid { grid-template-columns: 1fr; }
  .ai-drawer.mc-drawer { width: 100vw; }
  .mc-d-areas { grid-template-columns: repeat(2, 1fr); }
  .mc-p-table td.since { display: none; }
}

/* MM-55 §3.9 · responsibilities */
.mc-resp { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.mc-resp-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; background: #F3F5FB; color: var(--text-2); font-size: 12px; font-weight: 600; }
.mc-resp-areas { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.mc-resp-area { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }

/* MM-55 §2.6 · the template editor's intake cards */
.te-intake .sh, .te-mins .sh { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.te-intake .sh h3, .te-mins .sh h3 { display: flex; align-items: center; gap: 10px; margin: 0; }
.te-intake .sub, .te-mins .sub { color: var(--text-2); font-size: 13.5px; margin: -4px 0 10px; }
.te-q-table, .te-m-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.te-q-table th, .te-m-table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 6px 6px; border-bottom: 1px solid var(--border); }
.te-q-table td, .te-m-table td { padding: 5px 6px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.te-q-in, .te-m-in { width: 100%; border: 1px solid var(--border); border-radius: 7px; padding: 6px 8px; font: inherit; font-size: 13.5px; background: #fff; }
.te-q-in.key { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; max-width: 170px; }
.te-m-in { width: 70px; text-align: right; }
.te-q-table td.acts { white-space: nowrap; text-align: right; }
.te-ib { width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 7px; background: #fff; cursor: pointer; font: inherit; margin-left: 4px; }
.te-ib[disabled] { opacity: .35; cursor: default; } .te-ib.danger { color: #D63A4E; }
.te-q-table td.empty { color: var(--muted); text-align: center; padding: 14px; }
.te-m-flags { display: grid; gap: 6px; margin-top: 10px; font-size: 13.5px; }
.te-m-flag { display: flex; align-items: center; gap: 8px; } .te-m-flag.is-locked { color: var(--muted); }

/* ---------- MM-55 phase C · running the project over MCP (mc-) ---------- */
.mc-via { display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #EEF1FF; color: var(--indigo); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.sp-act .mc-via { margin: 0 4px 0 0; }
.ac-actor { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; } .ac-who .mc-via { margin-left: 0; }
.mc-banner-list { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 0; }
.mc-banner { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid #DCE3FF; background: #F6F7FF; border-radius: 12px; }
.mc-banner > .i { color: var(--indigo); font-size: 20px; flex: none; }
.mc-banner .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mc-banner .txt b { font-size: 14px; font-weight: 600; color: var(--text); }
.mc-banner .txt .sub { font-size: 12.5px; color: var(--text-2); }
.mc-banner .acts { display: flex; align-items: center; gap: 8px; flex: none; }
.mc-banner.is-answered { border-color: #B7EBD2; background: #F1FBF6; } .mc-banner.is-answered > .i { color: var(--green); }
.mc-d-source .scope { font-weight: 600; color: var(--text); }
.mc-d-h .mc-d-hn { margin-left: 8px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.mc-d-preview { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin: 8px 0 12px; background: #fff; }
.mc-d-preview .gantt-host { min-height: 120px; }
.mc-d-sched .mc-row-item .meta .old { color: var(--muted); text-decoration: line-through; }
.mc-d-sched .mc-row-item.is-same { opacity: .6; }
.gghost { pointer-events: none; }
.gbarg.changed rect:first-of-type { stroke: var(--indigo); stroke-width: 1.5px; }
.wl-head.slim { justify-content: flex-end; padding-top: 12px; padding-bottom: 0; }
/* the settings pages: header, tab strip and card are direct flex children of .content, so they get the same 12 px gap as every other tab
   (founder 2026-09-25: the strip must not sit tighter than on the other tabs; the back row under it is gone) */
#st-header-host, #st-header { display: contents; }
#settings { display: flex; flex-direction: column; gap: 12px; }

/* ---------- MM-55 phase D · briefings, webhooks, agent accounts ---------- */
.mc-note { padding: 14px 18px 16px; margin-top: 16px; border-left: 4px solid var(--indigo); }
.mc-note-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.mc-note-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 700; } .mc-note-head h3 .i { color: var(--indigo); }
.mc-note-head .src { color: var(--text-2); font-size: 12.5px; margin-right: auto; }
.mc-note-sum { margin: 0 0 8px; font-size: 14.5px; }
.mc-note-list { margin: 0 0 8px; padding-left: 20px; font-size: 14px; } .mc-note-list li { margin: 3px 0; }
.mc-note-q { font-size: 13.5px; color: var(--text-2); } .mc-note-q b { color: var(--text); } .mc-note-q ul { margin: 4px 0 0; padding-left: 20px; }
.mc-note-est { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.sp-notes .mc-note { margin-top: 10px; padding: 12px 14px; }
.mc-hook { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: #E4F7EE; color: #0B7A4B; font-size: 11.5px; font-weight: 600; margin-right: 8px; white-space: nowrap; }
.mc-hook.paused { background: #FFF4DB; color: #B5620A; }
.mc-webhook .mc-lead { font-size: 13.5px; color: var(--text-2); margin: 0 0 10px; }
.mc-w-state { font-size: 13px; color: var(--text-2); margin-bottom: 12px; }
.mc-w-events { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-w-result { margin: 8px 0; font-size: 13px; color: #0B7A4B; } .mc-w-result.is-bad { color: #C2410C; }
.mc-agent-tag { background: #EEF1FF; color: var(--indigo); }
.mb-head-actions { display: flex; gap: 10px; align-items: center; }

/* ---------- §4 follow-ups (2026-09-25): restorable workspaces, the phone layout of the venture header ---------- */
.sm-deleted { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px; }
.sm-cap { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding: 4px 8px; }
.sm-del { display: flex; align-items: center; gap: 10px; padding: 6px 8px; font-size: 14px; color: var(--text-2); }
.sm-del .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 500; }
.sm-del .left { font-size: 12px; color: var(--muted); white-space: nowrap; }
.sm-del .linklike { color: var(--indigo); font-weight: 600; background: none; border: 0; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.sm-del .linklike:hover { background: var(--indigo-bg); } .sm-del .linklike:disabled { opacity: 0.5; cursor: default; }
.ob-deleted { margin: 18px 0 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: #FAFBFD; text-align: left; }
.ob-deleted .cap { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 6px; }
.ob-deleted .row { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.ob-deleted .row .name { flex: 1; font-weight: 600; } .ob-deleted .row .left { font-size: 13px; color: var(--muted); }
@media (max-width: 768px) {
  /* MM-48 gap: the MM-04 / MM-05 header stacks its three columns; the tab strip scrolls sideways */
  .proj-head, .proj-head.biz { grid-template-columns: 1fr; gap: 14px; align-items: start; padding: 0; }
  .proj-id { gap: 14px; align-items: flex-start; }
  .proj-title { flex-wrap: wrap; row-gap: 6px; } .proj-name { font-size: 24px; line-height: 1.15; }
  .proj-meta, .proj-head.biz .proj-meta { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-left: 0; padding-top: 0; }
  .proj-meta.ruled .meta-block + .meta-block { border-left: 0; padding-left: 0; }
  .proj-actions { align-items: stretch; gap: 10px; }
  .proj-actions .row { flex-wrap: wrap; } .proj-actions .row .btn-primary, .proj-actions .row .btn-outline { flex: 1 1 auto; }
  .proj-actions .btn-outline.wide { width: 100%; justify-content: center; }
  .proj-actions .meta { text-align: left; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; padding: 0 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .tabs::-webkit-scrollbar { display: none; }
  .tabs a, .tabs button { white-space: nowrap; flex: none; }
}

/* ---------- Content-01 · Create your brand (ct-) — the Content module's brand setup step 1, plan plans/Content-01.md ---------- */
.ct-head { display: flex; align-items: flex-start; gap: 20px; padding: 2px 8px 12px; }
.ct-head .eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.ct-head h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.8px; line-height: 1.15; }
.ct-head .sub { font-size: 17px; color: var(--text-2); margin-top: 2px; }
.ct-save { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--muted); margin-top: 24px; flex: none; }
.ct-save .i { font-size: 20px; color: var(--green); }
.ct-save.saving .i { color: var(--indigo); animation: ct-spin 0.9s linear infinite; }
.ct-save.failed .i { color: var(--amber); }
.ct-live { margin: 24px 0 0 12px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid #C9D2FF; background: var(--indigo-bg); color: var(--indigo); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
@keyframes ct-spin { to { transform: rotate(360deg); } }
.ct-note { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 10px 14px; border-radius: 12px; background: var(--indigo-bg); color: var(--indigo); font-size: 14.5px; } .ct-note .i { font-size: 20px; flex: none; }
.ct-steps { display: flex; align-items: center; height: 54px; padding: 0 30px; margin-bottom: 14px; }
.ct-step { display: flex; align-items: center; gap: 16px; font-size: 16px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.ct-step .n { width: 34px; height: 34px; border-radius: 50%; background: #EEF0F5; display: grid; place-items: center; font-size: 15px; font-weight: 700; color: var(--text-2); }
.ct-step.is-active { color: var(--indigo); font-weight: 600; } .ct-step.is-active .n { background: var(--indigo); color: #fff; }
.ct-step.is-done .n { background: var(--green); color: #fff; } .ct-step.is-done .n .i { font-size: 18px; }
.ct-steps .line { flex: 1; height: 1px; background: var(--border); margin: 0 24px; }
.ct-grid { display: grid; grid-template-columns: minmax(0, 1fr) 504px; gap: 18px; align-items: start; }
.ct-form { padding: 18px 22px 18px; }
.ct-title { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ct-title h2 { margin: 0; font-size: 22px; font-weight: 700; }
.ct-tile { width: 36px; height: 36px; border-radius: 10px; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; flex: none; } .ct-tile .i { font-size: 20px; }
.ct-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.ct-form .np-field { margin-bottom: 14px; }
.ct-form .np-field > label:not(.np-input) { font-size: 15px; margin-bottom: 7px; }
.ct-form .np-input { height: 40px; padding: 0 12px; font-size: 15px; } .ct-form .np-input input { font-size: 15px; } .ct-form .np-input .i { font-size: 18px; }
.ct-form .np-textarea { font-size: 15px; padding: 10px 12px; min-height: 76px; display: block; }
.ct-form .np-input.is-invalid, .ct-form .np-textarea.is-invalid { border-color: #D63A4E; box-shadow: 0 0 0 3px #FDECEF; }
.ct-form fieldset[disabled] .np-input, .ct-form fieldset[disabled] .np-textarea { background: #FAFBFD; color: var(--text-2); }
.ct-help { font-size: 13px; color: var(--muted); margin-top: 5px; }
.ct-opt { display: inline-block; margin-left: 10px; padding: 2px 9px; border-radius: 999px; background: #F3F4F8; color: var(--text-2); font-size: 12.5px; font-weight: 500; vertical-align: 2px; }
.ct-form .er-summary { display: inline-flex; margin-bottom: 14px; } .ct-form .er-summary[hidden] { display: none; }
.ct-form .er-banner { margin: 0 0 14px; }
.ct-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); padding-top: 14px; margin-top: 0; }
.ct-foot .btn-outline, .ct-foot .btn-primary { height: 40px; padding: 0 18px; font-size: 16px; gap: 10px; box-shadow: none; }
.ct-foot .btn-primary .i { font-size: 20px; } .ct-foot .btn-primary:disabled { background: #C9D4FF; cursor: not-allowed; box-shadow: none; }
.ct-auto { display: flex; align-items: center; gap: 8px; margin: 6px 4px 0; font-size: 14px; color: var(--muted); } .ct-auto .i { font-size: 18px; color: var(--green); }
.ct-auto.readonly .i { color: var(--muted); }
.ct-side { display: grid; gap: 18px; }
.ct-preview, .ct-next { padding: 18px 22px 18px; }
.ct-preview .ct-title h2, .ct-next .ct-title h2 { font-size: 20px; }
.ct-chip { margin-left: auto; padding: 5px 10px; border-radius: 999px; background: #F3F4F8; color: var(--text-2); font-size: 13px; font-weight: 500; white-space: nowrap; }
.ct-brand { display: flex; gap: 20px; align-items: flex-start; }
.ct-avatar { width: 62px; height: 62px; border-radius: 14px; background: var(--indigo); color: #fff; font-size: 21px; font-weight: 700; display: grid; place-items: center; flex: none; }
.ct-avatar.is-empty { background: #DCE3FF; color: var(--indigo); }
.ct-brand .who { min-width: 0; }
.ct-brand .name { font-size: 20px; font-weight: 700; margin-top: 6px; overflow-wrap: anywhere; }
.ct-brand .desc { font-size: 15px; color: var(--text-2); line-height: 1.45; margin-top: 12px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ct-brand .name.ph, .ct-brand .desc.ph { color: var(--muted-2); }
.ct-brand .site { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 15px; color: var(--indigo); font-weight: 500; text-decoration: none; } .ct-brand .site .i { font-size: 18px; } .ct-brand .site:hover { text-decoration: underline; }
.ct-next .rows { display: grid; gap: 10px; }
.ct-next .row { display: flex; align-items: center; gap: 14px; font-size: 15px; }
.ct-next .row .t { width: 34px; height: 34px; border-radius: 10px; background: #F3F4F8; color: var(--text-2); display: grid; place-items: center; flex: none; } .ct-next .row .t .i { font-size: 20px; }
.ct-next .foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); font-size: 13.5px; color: var(--muted); }
@media (max-width: 1400px) { .ct-grid { grid-template-columns: minmax(0, 1fr) 420px; } }
@media (max-width: 1200px) { .ct-grid { grid-template-columns: 1fr; } .ct-step { font-size: 15px; } .ct-steps .line { margin: 0 14px; } }
@media (max-width: 768px) { .ct-head { flex-wrap: wrap; } .ct-save { margin: 0; width: 100%; } .ct-steps { padding: 0 16px; } .ct-step:not(.is-active) span.l { display: none; } .ct-foot { flex-direction: column; gap: 10px; } .ct-foot .btn-outline, .ct-foot .btn-primary { width: 100%; justify-content: center; } }
.ct-link { color: var(--indigo); font-weight: 600; text-decoration: none; } .ct-link:hover { text-decoration: underline; }

/* ---------- Content-02 · Review website details (ci-) — the website-import panel over Content-01, plan plans/Content-02.md ---------- */
.ci-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 606px; max-width: 100vw; background: var(--surface); border-left: 1px solid var(--border); box-shadow: -12px 0 40px rgba(23,27,45,0.16); display: flex; flex-direction: column; z-index: 61; }
.ci-head { display: flex; align-items: flex-start; gap: 14px; padding: 18px 24px 12px; }
.ci-head .ct-tile { margin-top: 2px; }
.ci-head h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.3px; }
.ci-head .sub { font-size: 16px; color: var(--text-2); margin-top: 4px; }
.ci-head .close { margin-left: auto; width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); font-size: 22px; flex: none; } .ci-head .close:hover { background: #F3F4F8; }
.ci-body { flex: 1; overflow: auto; padding: 0 24px 16px; }
.ci-url { display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 16px; }
.ci-url > .i { font-size: 20px; color: var(--text-2); flex: none; }
.ci-url .addr { flex: 1; min-width: 0; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-url .refresh { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 8px; background: #fff; display: grid; place-items: center; color: var(--text-2); flex: none; } .ci-url .refresh:hover { border-color: #C9D2FF; color: var(--indigo); } .ci-url .refresh .i { font-size: 18px; } .ci-url .refresh:disabled { opacity: .5; cursor: default; }
.ci-url .refresh.spin .i { animation: ct-spin 0.9s linear infinite; }
.ci-state { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); white-space: nowrap; } .ci-state .i { font-size: 20px; color: var(--green); }
.ci-state.pending .i { color: var(--indigo); animation: ct-spin 0.9s linear infinite; } .ci-state.failed .i { color: var(--amber); }
.ci-note { font-size: 14px; color: var(--muted); margin: 8px 0 14px; }
.ci-sec { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.ci-sec h3 { margin: 0; font-size: 20px; font-weight: 700; } .ci-sec .count { font-size: 15px; color: var(--text-2); } .ci-sec .all { margin-left: auto; font-size: 15px; color: var(--indigo); font-weight: 500; background: none; border: 0; font-family: inherit; cursor: pointer; } .ci-sec .all:hover { text-decoration: underline; }
.ci-card { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px 14px; margin-bottom: 10px; background: var(--surface); }
.ci-card .row1 { display: flex; align-items: center; gap: 14px; }
.ci-card .row1 input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--indigo); margin: 0; flex: none; }
.ci-card .lbl { font-size: 16px; font-weight: 600; flex: 1; }
.ci-tag { font-size: 12.5px; font-weight: 500; padding: 3px 10px; border-radius: 999px; background: #F3F4F8; color: var(--text-2); white-space: nowrap; }
.ci-tag.new { background: var(--indigo-bg); color: var(--indigo); }
.ci-card .ctl { margin: 8px 0 0 36px; }
.ci-card:not(.is-on) .ctl { opacity: .55; }
.ci-card .np-input { height: 40px; padding: 0 12px; font-size: 15px; } .ci-card .np-input input { font-size: 15px; } .ci-card .np-input select { font-size: 15px; }
.ci-card .np-textarea { min-height: 56px; font-size: 15px; padding: 9px 12px; display: block; }
.ci-card.inline .row1 .ctl { margin: 0; width: 300px; } .ci-card.inline .row1 .lbl { flex: 1; }
.ci-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ci-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 12px; border-radius: 8px; background: #F3F4F8; font-size: 14px; color: var(--text); }
.ci-chip button { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: none; border: 0; cursor: pointer; font-size: 14px; } .ci-chip button:hover { background: #E4E7EF; color: var(--text); }
.ci-chip.add { background: none; border: 1px dashed #C9D2FF; color: var(--indigo); cursor: pointer; padding: 0 12px; font-weight: 500; } .ci-chip.add:hover { background: var(--indigo-bg); }
.ci-chips input { height: 32px; border: 1px solid var(--indigo); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 14px; outline: 0; width: 160px; }
.ci-strip { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; background: var(--indigo-bg); color: var(--indigo); font-size: 14.5px; margin-top: 4px; } .ci-strip .i { font-size: 20px; flex: none; }
.ci-foot { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px 18px; border-top: 1px solid var(--border); }
.ci-foot .btn-outline, .ci-foot .btn-primary { height: 46px; padding: 0 20px; font-size: 16px; gap: 10px; box-shadow: none; }
.ci-foot .btn-primary .i { font-size: 20px; } .ci-foot .btn-primary:disabled { background: #C9D4FF; cursor: not-allowed; }
.ci-skel { display: grid; gap: 12px; margin-bottom: 14px; }
.ci-skel div { height: 88px; border-radius: 14px; background: linear-gradient(90deg, #F3F4F8 25%, #E9ECF3 50%, #F3F4F8 75%); background-size: 200% 100%; animation: ci-shimmer 1.2s infinite; }
@keyframes ci-shimmer { to { background-position: -200% 0; } }
.ci-wait { font-size: 14.5px; color: var(--muted); }
.ci-box { border: 1px solid #F6D7A8; background: #FFF8EC; border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; }
.ci-box.grey { border-color: var(--border); background: #F8F9FB; }
.ci-box b { display: flex; align-items: center; gap: 10px; font-size: 16px; color: #B5620A; } .ci-box b .i { font-size: 20px; } .ci-box.grey b { color: var(--text); }
.ci-box p { margin: 6px 0 12px 30px; font-size: 14.5px; color: var(--text-2); }
.ci-box .acts { display: flex; gap: 10px; margin-left: 30px; } .ci-box .acts .btn-outline { height: 38px; padding: 0 14px; font-size: 14.5px; }
.ci-card .er-msg { margin-left: 36px; }
/* 2026-09-27 · the website's colours and logo (plans/Content-02.md "Website colours and logo") */
.ci-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.ci-sw { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px 0 5px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.ci-sw .blk { width: 28px; height: 28px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .12); flex: none; }
.ci-sw .tx { display: grid; line-height: 1.15; } .ci-sw .nm { font-size: 13px; font-weight: 600; } .ci-sw .hx { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ci-sw button { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: none; border: 0; cursor: pointer; font-size: 15px; } .ci-sw button:hover { background: #F3F4F8; color: var(--text); }
.ci-sub { font-size: 13px; color: var(--muted); margin-top: 6px; }
.ci-logo { display: flex; align-items: center; gap: 14px; }
.ci-logo .pv { width: 132px; height: 64px; border-radius: 10px; border: 1px solid var(--border); display: grid; place-items: center; padding: 8px; flex: none;
  background: repeating-conic-gradient(#EEF0F5 0% 25%, #fff 0% 50%) 50% / 14px 14px; }
.ci-logo .pv img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ci-logo .tx { display: grid; gap: 2px; min-width: 0; } .ci-logo .nm { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-logo .meta { font-size: 13px; color: var(--muted); }
/* Content-06 "Use website colours" and Content-04 "Import logo from website" */
.cg-sec-head .cg-act + .cg-act { margin-left: 8px; }
.cg-pop.webc { width: 360px; } .cg-pop.webc .sws { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 8px; }
.cg-pop.webc .sw { display: grid; gap: 4px; justify-items: center; font-size: 12px; color: var(--text-2); width: 72px; text-align: center; }
.cg-pop.webc .sw i { width: 44px; height: 44px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .12); display: block; }
.cg-pop.webc .sw b { font-weight: 600; color: var(--text); font-size: 12px; } .cg-pop.webc p { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.cg-pop.webc .row { display: flex; gap: 8px; justify-content: flex-end; } .cg-pop.webc .row button { height: 36px; padding: 0 14px; font-size: 14px; }
.ca-web-logo { margin-top: 12px; height: 38px; padding: 0 14px; font-size: 14.5px; gap: 8px; }
@media (max-width: 1400px) { .ci-drawer { width: 520px; } }
@media (max-width: 1200px) { .ci-drawer { width: 100%; } }
@media (max-width: 768px) { .ci-drawer { top: auto; height: 88vh; border-radius: 16px 16px 0 0; } .ci-foot { flex-direction: column; gap: 10px; } .ci-foot .btn-outline, .ci-foot .btn-primary { width: 100%; justify-content: center; } .ci-card.inline .row1 { flex-wrap: wrap; } .ci-card.inline .row1 .ctl { width: 100%; margin-top: 10px; } }
/* ---------- Content-03 · Refine your brand profile (cb-) — the brand-profile drawer over Content-01, plan plans/Content-03.md ---------- */
.cb-backdrop { position: fixed; inset: 0; background: rgba(23,27,45,0.42); z-index: 62; }
.cb-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 566px; max-width: 100vw; background: var(--surface); box-shadow: -12px 0 40px rgba(23,27,45,0.18); display: flex; flex-direction: column; z-index: 63; }
.cb-head { display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px 18px; }
.cb-head h2 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.15; }
.cb-head .sub { font-size: 16.5px; color: var(--text-2); margin-top: 6px; max-width: 420px; line-height: 1.4; }
.cb-head .close { margin-left: auto; width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); font-size: 24px; flex: none; background: none; border: 0; cursor: pointer; } .cb-head .close:hover { background: #F3F4F8; }
.cb-body { flex: 1; overflow: auto; padding: 0 24px 12px; }
.cb-brand { display: flex; gap: 20px; align-items: center; border: 1px solid var(--border); border-radius: 14px; padding: 18px; margin-bottom: 22px; }
.cb-brand .av { width: 64px; height: 64px; border-radius: 14px; background: var(--indigo); color: #fff; font-size: 26px; font-weight: 700; display: grid; place-items: center; flex: none; }
.cb-brand .nm { font-size: 22px; font-weight: 700; }
.cb-brand .ds { font-size: 15px; color: var(--text-2); line-height: 1.4; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cb-field { margin-bottom: 22px; }
.cb-field .lblrow { display: flex; align-items: baseline; gap: 10px; }
.cb-field label.lbl, .cb-field .lbl { font-size: 16.5px; font-weight: 700; } .cb-field .req { color: #D63A4E; margin-left: 4px; }
.cb-field .hint { display: block; background: none; border: 0; border-radius: 0; padding: 0; font-size: 14px; color: var(--muted); margin: 2px 0 9px; }
.cb-field .more { margin-left: auto; font: inherit; font-size: 14px; font-weight: 600; color: var(--indigo); background: none; border: 0; cursor: pointer; padding: 0; } .cb-field .more:hover { text-decoration: underline; }
.cb-field .np-textarea { min-height: 70px; height: 70px; font-size: 15.5px; padding: 10px 12px; display: block; }
.cb-field .np-input { height: 38px; padding: 0 12px; font-size: 15.5px; } .cb-field .np-input input, .cb-field .np-input select { font-size: 15.5px; }
.cb-field .np-input.lang { height: 44px; }
.cb-benefits { display: grid; gap: 9px; }
.cb-chips { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.cb-chip { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 6px 0 10px; border-radius: 8px; background: var(--indigo-bg); color: var(--indigo); font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.cb-chip button { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: none; border: 0; color: var(--indigo); cursor: pointer; font-size: 16px; padding: 0; } .cb-chip button:hover { background: rgba(59,91,253,0.14); } .cb-chip button .i { font-size: 16px; }
.cb-chip.add { background: #fff; border: 1px dashed #C5CAD8; color: var(--text); cursor: pointer; padding: 0 10px; gap: 5px; font-family: inherit; } .cb-chip.add:hover { border-color: var(--indigo); } .cb-chip.add .i { font-size: 18px; color: var(--indigo); }
.cb-chips input { height: 36px; border: 1px solid var(--indigo); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 15px; outline: 0; width: 170px; }
.cb-field[data-field=benefits] { margin-bottom: 30px; }
.cb-row { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 26px; align-items: start; }
.cb-tones { display: flex; flex-wrap: nowrap; gap: 5px; min-width: 0; overflow: hidden; }
.cb-tone { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 42px; padding: 0 6px; border-radius: 8px; border: 1px solid #E3E6EE; background: #FBFBFD; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.cb-tone .i { font-size: 15px; display: none; }
.cb-tone { flex: none; white-space: nowrap; }
.cb-tone.on { background: #E0E8FD; border-color: #C9D5FB; color: var(--indigo); } .cb-tone.on .i { display: inline-block; }

.cb-tone:hover { outline: 1px solid #C9D2FF; }
.cb-pop { position: fixed; z-index: 70; width: 280px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 40px rgba(23,27,45,0.16); padding: 8px; }
.cb-pop .cnt { font-size: 13px; color: var(--muted); padding: 6px 10px 8px; }
.cb-pop button { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 10px; border-radius: 8px; background: none; border: 0; font: inherit; font-size: 15px; color: var(--text); cursor: pointer; text-align: left; }
.cb-pop button:hover { background: var(--indigo-bg-2); } .cb-pop button .box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #C5CAD8; display: grid; place-items: center; flex: none; color: #fff; font-size: 13px; }
.cb-pop button.on .box { background: var(--indigo); border-color: var(--indigo); }
.cb-foot { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px 28px; border-top: 1px solid var(--border); }
.cb-foot .btn-outline, .cb-foot .btn-primary { height: 48px; padding: 0 22px; font-size: 16.5px; box-shadow: none; }
.cb-foot .btn-primary:disabled { background: #C9D4FF; cursor: not-allowed; }
.cb-field .er-msg { margin-top: 6px; }
.cb-field .np-input.is-invalid, .cb-field .np-textarea.is-invalid { border-color: #D63A4E; box-shadow: 0 0 0 3px #FDECEF; }
.cb-foot .cb-strip { margin: 0 12px; padding: 8px 12px; font-size: 14px; }
@media (max-width: 1400px) { .cb-drawer { width: 520px; } }
@media (max-width: 1200px) { .cb-drawer { width: 100%; } }
@media (max-width: 768px) { body:has(#cb-drawer) .mo-tabbar, body:has(#ci-drawer) .mo-tabbar { display: none; } .cb-drawer { top: auto; height: 92vh; border-radius: 16px 16px 0 0; } .cb-row { grid-template-columns: 1fr; } .cb-foot .btn-outline, .cb-foot .btn-primary { flex: 1; justify-content: center; } .cb-foot { gap: 10px; } }
.ct-auto .ct-refine { margin-left: auto; }
/* ---------- Content-04 · Upload your brand assets (ca-) — the Brand assets step, plan plans/Content-04.md ---------- */
/* the stepper's drawn done state (plan §2.2, §11.3): an indigo ring with a check, the step a link, an indigo connector into the active step */
.ct-step.is-done { color: var(--indigo); font-weight: 500; text-decoration: none; }
.ct-step.is-done .n { background: #fff; color: var(--indigo); box-shadow: inset 0 0 0 2px var(--indigo); } .ct-step.is-done .n .i { font-size: 18px; stroke-width: 2.4; }
a.ct-step.is-done:hover .l { text-decoration: underline; } a.ct-step.is-done:focus-visible { outline: 2px solid var(--indigo); outline-offset: 4px; border-radius: 8px; }
.ct-steps .line.is-done { height: 2px; background: var(--indigo); }
.ca-page .ct-head { padding-bottom: 8px; }
.ca-page .ct-head h1 { font-size: 33px; }
/* body */
.ca-grid { display: grid; grid-template-columns: minmax(0, 1fr) 516px; gap: 18px; align-items: stretch; }
.ca-upload, .ca-req-card { padding: 14px 18px 16px; display: flex; flex-direction: column; min-width: 0; }
.ca-title { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.ca-title h2 { margin: 0; font-size: 20px; font-weight: 700; }
.ca-tile { width: 34px; height: 34px; border-radius: 9px; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; flex: none; } .ca-tile .i { font-size: 20px; }
/* drop zone */
.ca-drop { position: relative; border: 1.5px dashed #8CA3F8; border-radius: 10px; background: #FBFCFF; padding: 12px 16px 12px; display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; transition: background .12s, border-color .12s; }
.ca-drop:hover { background: #F7F9FF; }
.ca-drop .big { font-size: 36px; color: var(--text-2); stroke-width: 1.6; }
.ca-drop .l1 { font-size: 15px; font-weight: 600; margin-top: 4px; }
.ca-drop .l2 { font-size: 13px; color: var(--muted); margin-top: 3px; }
.ca-drop .btn-primary { height: 32px; padding: 0 16px; font-size: 13.5px; font-weight: 600; margin-top: 10px; box-shadow: none; border-radius: 7px; }
.ca-drop .l3 { font-size: 13px; color: var(--muted); margin-top: 9px; }
.ca-drop.is-over { border: 2px solid var(--indigo); background: var(--indigo-bg); padding: 11.5px 15.5px 11.5px; }
.ca-drop.is-over .big { color: var(--indigo); }
.ca-note { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 10px; background: #FAFBFD; padding: 14px 16px; font-size: 14.5px; color: var(--text-2); }
.ca-note .i { font-size: 20px; color: var(--muted); }
/* file table */
.ca-table { margin-top: 12px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; flex: 1; }
.ca-row { display: grid; grid-template-columns: minmax(0, 1fr) 112px 104px 208px 64px; align-items: center; padding: 0 12px; }
.ca-thead { height: 30px; background: #F8F9FC; border-bottom: 1px solid var(--border); font-size: 13.5px; font-weight: 500; color: var(--text-2); flex: none; }
.ca-thead .ac { text-align: right; padding-right: 2px; }
.ca-tbody { overflow-y: auto; min-height: 0; flex: 1; max-height: 174px; }   /* the drawn three rows (50 + 50 + 56 px + rules); more rows scroll here, the page never grows (plan §2.3) */
.ca-tbody .ca-row { min-height: 50px; border-bottom: 1px solid var(--border-soft); font-size: 14px; cursor: pointer; }
.ca-tbody .ca-row:last-child { border-bottom: 0; }
.ca-tbody .ca-row.has-wide { min-height: 56px; }
.ca-tbody .ca-row:hover { background: #FAFBFE; } .ca-tbody .ca-row:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
.ca-tbody .ca-row.is-local { cursor: default; } .ca-tbody .ca-row.is-local:hover { background: transparent; }
.ca-tbody .ca-row.is-new { animation: ca-in .35s ease-out; }
@keyframes ca-in { from { background: var(--indigo-bg-2); } to { background: transparent; } }
.ca-fn { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ca-fn .nmw { display: flex; flex-direction: column; min-width: 0; }
.ca-fn .nm { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ca-fn .sub { display: none; font-size: 12.5px; color: var(--muted); }
.ca-thumb { width: 44px; height: 32px; border-radius: 4px; flex: none; overflow: hidden; display: grid; place-items: center; background: #F3F4F8; color: var(--text-2); }
.ca-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ca-thumb.is-wide { width: 88px; height: 44px; }
.ca-thumb.is-doc { background: #FDECEE; color: #E0344E; } .ca-thumb .i { font-size: 20px; }
.ca-ty { color: var(--text-2); } .ca-sz { color: var(--text-2); }
.ca-st { display: flex; align-items: center; gap: 9px; color: var(--text-2); font-size: 13.5px; min-width: 0; }
.ca-st > .i { font-size: 20px; flex: none; }
.ca-st.ok > .i { color: var(--green); }
.ca-st.q, .ca-st.q > .i { color: var(--muted); }
.ca-st .tx { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ca-st .tx .why { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-st.err .lab { color: #D63A4E; font-weight: 600; } .ca-st.err > .i { color: #D63A4E; }
.ca-retry { color: var(--indigo); font-weight: 600; font-size: 13.5px; margin-left: 8px; padding: 0; background: none; border: 0; cursor: pointer; } .ca-retry:hover { text-decoration: underline; }
.ca-ring { width: 22px; height: 22px; border-radius: 50%; flex: none; border: 2.5px solid #DCE3FF; border-top-color: var(--indigo); border-right-color: var(--indigo); animation: ca-spin .9s linear infinite; }
.ca-ring.is-idle { animation: none; border-color: #D5D9E3; }
@keyframes ca-spin { to { transform: rotate(360deg); } }
.ca-bar { display: block; width: 150px; height: 5px; border-radius: 3px; background: #E6E9F2; overflow: hidden; } .ca-bar i { display: block; height: 100%; background: var(--indigo); border-radius: 3px; transition: width .15s linear; }
.ca-ac { display: flex; justify-content: flex-end; }
.ca-dots { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--text); background: transparent; border: 0; cursor: pointer; } .ca-dots .i { font-size: 20px; }
.ca-dots:hover, .ca-dots[aria-expanded="true"] { background: #EEF0F5; }
.ca-empty { padding: 26px 16px; text-align: center; font-size: 14px; color: var(--muted); }
/* row menu (the MM-23 rm- styles) */
.ca-menu { position: fixed; width: 236px; }
.ca-menu .rm-label { padding: 8px 10px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.ca-menu .rm-item[aria-checked="false"] .i { visibility: hidden; }
.ca-menu .rm-item:disabled { color: var(--muted-2); cursor: not-allowed; background: transparent; }
/* required assets */
.ca-req-card .lead { font-size: 15px; color: var(--text-2); line-height: 1.45; margin: 0 0 12px; }
.ca-reqs { display: grid; gap: 10px; }
.ca-req { display: grid; grid-template-columns: 46px minmax(0, 1fr) 146px; gap: 14px; align-items: center; width: 100%; padding: 12px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); text-align: left; cursor: pointer; font: inherit; color: inherit; }
.ca-req:hover, .ca-req:focus-visible { border-color: #C9D5FB; background: #FBFCFF; outline: 0; }
.ca-req:disabled { cursor: default; } .ca-req:disabled:hover { border-color: var(--border); background: var(--surface); }
.ca-req .ico { width: 46px; height: 46px; border-radius: 9px; display: grid; place-items: center; background: #F3F4F8; color: var(--text-2); overflow: hidden; }
.ca-req .ico .i { font-size: 24px; } .ca-req .ico.is-doc { background: #FDECEE; color: #E0344E; }
.ca-req .ico img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ca-req .ico.has-img { background: #fff; }
.ca-req .t { display: block; font-size: 15.5px; font-weight: 700; }
.ca-req .h { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.ca-req .pr { display: flex; flex-direction: column; gap: 9px; }
.ca-req .pr .lab { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); white-space: nowrap; }
.ca-req .pr .lab .i { font-size: 20px; color: var(--green); }
.ca-req .pr .ca-ring { width: 20px; height: 20px; }
.ca-req .ca-bar { width: 146px; height: 6px; }
.ca-req.is-met .ca-bar i { background: var(--green); }
/* action bar */
.ca-actions { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 16px; border-top: 1px solid var(--border); background: var(--bg); padding: 12px 0 6px; margin-top: 2px; }
.ca-actions .btn-outline, .ca-actions .btn-primary { height: 42px; padding: 0 18px; font-size: 16px; gap: 10px; box-shadow: none; }
.ca-actions .btn-primary { margin-left: 0; } .ca-actions .btn-primary .i, .ca-actions .btn-outline .i { font-size: 20px; }
.ca-actions .btn-primary:disabled { background: #C9D4FF; border-color: #C9D4FF; cursor: not-allowed; box-shadow: none; }
.ca-hint { margin-left: auto; font-size: 14px; color: var(--muted); text-align: right; }
.ca-actions .ca-hint:empty + .btn-primary { margin-left: auto; }
.ca-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1400px) { .ca-grid { grid-template-columns: minmax(0, 1fr) 420px; } .ca-row { grid-template-columns: minmax(0, 1fr) 100px 90px 180px 52px; } .ca-bar { width: 130px; } .ca-req { grid-template-columns: 46px minmax(0, 1fr) 124px; } .ca-req .ca-bar { width: 124px; } }
@media (max-width: 1200px) { .ca-thead > .ca-ty { display: none; } .ca-grid { grid-template-columns: 1fr; } .ca-fn .sub { display: block; } .ca-req-card { order: -1; } .ca-row { grid-template-columns: minmax(0, 1fr) 90px 180px 52px; } .ca-row > .ca-ty { display: none; } }
@media (max-width: 768px) {
  .ca-drop .l1, .ca-drop .l2 { display: none; }
  .ca-thead { display: none; }
  .ca-tbody .ca-row { grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "fn ac" "st ac"; padding: 10px 12px; row-gap: 6px; }
  .ca-tbody .ca-row > .ca-fn { grid-area: fn; } .ca-tbody .ca-row > .ca-st-cell { grid-area: st; padding-left: 60px; } .ca-tbody .ca-row > .ca-ac { grid-area: ac; }
  .ca-tbody .ca-row > .ca-sz, .ca-tbody .ca-row > .ca-ty { display: none; }
  .ca-actions { flex-direction: column; align-items: stretch; gap: 10px; } .ca-hint { order: -1; margin: 0; text-align: left; } .ca-actions .btn-primary { order: 0; } .ca-actions .btn-outline { order: 1; } .ca-actions .btn-outline, .ca-actions .btn-primary { width: 100%; justify-content: center; }
}
.ca-row .ca-ac:empty { min-height: 32px; }
#content-assets.ca-page { display: flex; flex-direction: column; gap: 12px; }   /* the content column's gap (the prototype's sections are its children) */
/* ---------- Content-05 · Review uploaded asset (cr-) — the asset-review drawer over Content-04, plan plans/Content-05.md ---------- */
.cr-backdrop { position: fixed; inset: 0; background: rgba(23,27,45,0.42); z-index: 62; }
.cr-drawer:focus { outline: none; }
.cr-role:focus-visible, .cr-var:focus-visible, .cr-switch:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.cr-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 587px; max-width: 100vw; background: var(--surface); box-shadow: -12px 0 40px rgba(23,27,45,0.18); display: flex; flex-direction: column; z-index: 63; }
.cr-head { display: flex; align-items: center; gap: 16px; padding: 13px 24px 23px 26px; }
.cr-head h2 { margin: 0; font-size: 22.5px; font-weight: 800; letter-spacing: -0.3px; line-height: 27px; }
.cr-head .close { margin-left: auto; width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); flex: none; background: none; border: 0; cursor: pointer; } .cr-head .close .i { font-size: 22px; } .cr-head .close:hover { background: #F3F4F8; }
.cr-body { flex: 1; overflow: auto; padding: 0 24px 8px 26px; }
.cr-body fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
/* preview */
.cr-preview { position: relative; height: 240px; border-radius: 10px; border: 1px solid var(--border); overflow: hidden; display: grid; place-items: center;
  background-color: #FFFFFF; background-image: conic-gradient(#EEF0F4 25%, transparent 0 50%, #EEF0F4 0 75%, transparent 0); background-size: 26px 26px; transition: background-color .15s; }
.cr-preview.is-dark { background-color: #1B2233; background-image: conic-gradient(#232B3E 25%, transparent 0 50%, #232B3E 0 75%, transparent 0); border-color: #1B2233; }
.cr-preview.is-plain { background: #F6F7FA; }
.cr-preview img { position: absolute; inset: 24px; width: calc(100% - 48px); height: calc(100% - 48px); object-fit: contain; display: block; }   /* contained: a square SVG never grows the box (review) */
.cr-preview .cr-none { display: grid; justify-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.cr-preview .cr-none .tile { width: 56px; height: 56px; border-radius: 12px; background: #EEF0F4; display: grid; place-items: center; color: var(--text-2); } .cr-none .tile .i { font-size: 28px; }
.cr-preview .cr-up { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--indigo); transition: width .1s linear; }
.cr-file { display: flex; align-items: center; gap: 14px; margin-top: 11px; }
.cr-file .who { min-width: 0; flex: 1; }
.cr-file .nm { font-size: 15px; font-weight: 700; line-height: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-file .sz { font-size: 14px; line-height: 18px; color: var(--muted); margin-top: 3px; }
.cr-file .btn-outline { height: 36px; padding: 0 11px; font-size: 13.5px; gap: 7px; box-shadow: none; flex: none; white-space: nowrap; } .cr-file .btn-outline .i { font-size: 18px; }
.cr-file .btn-outline[aria-busy="true"] { color: var(--indigo); border-color: #C9D4FF; }
/* fields */
.cr-field { margin-top: 20px; }
.cr-field[data-field=name] { margin-top: 15px; } .cr-field[data-field=tags] { margin-top: 13px; }
.cr-field[data-field=name] .lbl, .cr-field[data-field=tags] .lbl { margin-bottom: 5px; }
.cr-field .lbl { display: block; font-size: 14.5px; font-weight: 700; line-height: 18px; margin-bottom: 8px; } .cr-field .req { color: #D63A4E; margin-left: 4px; }
.cr-field.first { margin-top: 23px; }
.cr-roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.cr-role { position: relative; height: 74px; border-radius: 10px; border: 1px solid #E3E6EE; background: #fff; font: inherit; color: var(--text); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 0; }
.cr-role .i { font-size: 22px; color: var(--text); }
.cr-role .l { font-size: 13.5px; font-weight: 500; white-space: nowrap; line-height: 16px; padding-right: 18px; }
.cr-role .rd, .cr-var .rd { position: absolute; right: 8px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #B9BFCC; background: #fff; display: grid; place-items: center; }
.cr-role .rd { bottom: 11px; }
.cr-role .rd .i { display: none; font-size: 20px; color: var(--indigo); margin: 0; }
.cr-role:hover:not(:disabled) { border-color: #C9D2FF; }
.cr-role.on { border: 1.5px solid var(--indigo); background: #F3F5FF; } .cr-role.on .i, .cr-role.on .l { color: var(--indigo); }
.cr-role.on .rd { border: 0; background: none; } .cr-role.on .rd .i { display: block; }
.cr-role:disabled { opacity: 0.45; cursor: not-allowed; }
.cr-vars { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.cr-var { position: relative; height: 45px; border-radius: 8px; border: 1px solid #E3E6EE; background: #fff; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 0 44px 0 16px; text-align: left; }
.cr-var > .i { font-size: 21px; flex: none; }
.cr-var .rd { top: 13px; right: 14px; }
.cr-var:hover { border-color: #C9D2FF; }
.cr-var.on { border: 1.5px solid var(--indigo); background: #F3F5FF; color: var(--indigo); }
.cr-var.on .rd { border: 5px solid var(--indigo); }
.cr-style-note { font-size: 14px; color: var(--text-2); line-height: 1.45; background: #F6F7FA; border-radius: 8px; padding: 11px 14px; }
.cr-field .np-input { height: 36px; padding: 0 12px; font-size: 14px; } .cr-field .np-input input { font-size: 14px; }
.cr-tags { min-height: 38px; border: 1px solid var(--border); border-radius: 8px; padding: 6px 7px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: #fff; cursor: text; }
.cr-tags:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.cr-tag { display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 3px 0 9px; border-radius: 6px; background: #EEF0F4; color: var(--text); font-size: 13.5px; white-space: nowrap; }
.cr-tag button { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: none; border: 0; color: var(--text-2); cursor: pointer; padding: 0; } .cr-tag button .i { font-size: 13px; } .cr-tag button:hover { background: #DDE1EA; }
.cr-tags input { flex: 1; min-width: 110px; border: 0; outline: 0; font: inherit; font-size: 14px; height: 24px; padding: 0 4px; background: none; color: var(--text); }
.cr-tags input::placeholder { color: var(--muted); }
.cr-facts { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 16px; }
.cr-fact { display: flex; align-items: center; gap: 22px; padding-left: 3px; }
.cr-fact > .i { font-size: 24px; color: var(--text-2); flex: none; }
.cr-fact .k { font-size: 13px; color: var(--muted); } .cr-fact .v { font-size: 14.5px; margin-top: 2px; }
.cr-facts .sep { width: 1px; height: 36px; background: var(--border); margin: 0 30px 0 0; }
.cr-switchrow { display: flex; align-items: flex-start; gap: 16px; margin-top: 24px; }
.cr-switchrow .t { font-size: 15px; font-weight: 700; line-height: 18px; } .cr-switchrow .s { font-size: 13.5px; color: var(--muted); margin-top: 3px; }
.cr-switchrow .lowres { font-size: 13.5px; color: #B26B00; margin-top: 6px; display: flex; gap: 6px; align-items: center; } .cr-switchrow .lowres .i { font-size: 16px; }
.cr-switch { margin-left: auto; flex: none; width: 44px; height: 26px; border-radius: 13px; border: 0; background: #D5D9E3; position: relative; cursor: pointer; padding: 0; transition: background .15s; }
.cr-switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(23,27,45,0.25); transition: left .15s; }
.cr-switch[aria-checked="true"] { background: var(--indigo); } .cr-switch[aria-checked="true"]::after { left: 21px; }
.cr-switch:disabled { opacity: 0.55; cursor: not-allowed; }
/* footer */
.cr-foot { display: flex; align-items: center; gap: 15px; padding: 18px 24px 20px 26px; border-top: 1px solid var(--border); }
.cr-foot .btn-outline, .cr-foot .btn-primary, .cr-foot .cr-remove { height: 44px; padding: 0 17px; font-size: 15px; box-shadow: none; }
.cr-foot .cr-remove { display: inline-flex; align-items: center; gap: 9px; border-radius: 8px; border: 1px solid #F6C9CF; background: #FFF5F6; color: #D63A4E; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; padding: 0 15px; gap: 8px; } .cr-remove .i { font-size: 20px; } .cr-remove:hover { background: #FDECEF; }
.cr-foot .sp { flex: 1; }
.cr-foot .btn-primary { padding: 0 18px; }
.cr-foot .btn-primary:disabled { background: #C9D4FF; cursor: not-allowed; }
.cr-foot { flex-wrap: wrap; row-gap: 12px; }
.cr-foot .cr-strip { order: -1; flex-basis: 100%; padding: 8px 12px; font-size: 14px; margin: 0; }
.cr-foot button { white-space: nowrap; }
.cr-field .er-msg { margin-top: 6px; }
.cr-field .np-input.is-invalid, .cr-tags.is-invalid { border-color: #D63A4E; box-shadow: 0 0 0 3px #FDECEF; }
.cr-drawer.is-readonly .cr-role, .cr-drawer.is-readonly .cr-var { cursor: default; }
@media (max-width: 1400px) { .cr-drawer { width: 540px; } .cr-role .l { font-size: 12.5px; } }
@media (max-width: 1200px) { .cr-drawer { width: 100%; } }
@media (max-width: 768px) { .cr-drawer { top: auto; height: 92vh; border-radius: 16px 16px 0 0; } .cr-roles { grid-template-columns: 1fr 1fr; } .cr-facts { grid-template-columns: 1fr; gap: 12px; } .cr-facts .sep { display: none; } .cr-foot { flex-wrap: wrap; } .cr-foot .sp { display: none; } .cr-foot .btn-outline, .cr-foot .btn-primary { flex: 1; justify-content: center; } }
/* a PDF is not rendered (Content-04 §3.2): the document sheet with the file name and "Open file" */
.cr-preview .cr-docsheet { width: 150px; height: 190px; background: #fff; border-radius: 4px; box-shadow: 0 6px 22px rgba(23,27,45,0.16); padding: 18px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.cr-docsheet .tile { width: 46px; height: 46px; border-radius: 9px; background: #FDECEE; color: #E0344E; display: grid; place-items: center; } .cr-docsheet .tile .i { font-size: 24px; }
.cr-docsheet .t { font-size: 12.5px; font-weight: 600; color: var(--text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.cr-docsheet .open { font-size: 13px; font-weight: 600; color: var(--indigo); text-decoration: none; } .cr-docsheet .open:hover { text-decoration: underline; }
/* read-only (plan §1): inert-looking controls */
fieldset:disabled .cr-var, fieldset:disabled .cr-switch { opacity: .45; cursor: default; }
fieldset:disabled .cr-tag button, fieldset:disabled #cr-tag-input { display: none; }

/* ---------- Content-06 · Brand guidelines (cg-; the shared Content inner navigation ct-subnav) — plans/Content-06.md, prototype/gen/content06.css ---------- */
.ct-subnav { display: flex; align-items: stretch; gap: 4px; height: 44px; padding: 0 12px; margin: 0 0 12px; overflow: hidden; }
.ct-subitem { display: inline-flex; align-items: center; gap: 9px; padding: 0 13px; font-size: 15.5px; font-weight: 500; color: var(--text-2); border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none; }
.ct-subitem .i { font-size: 19px; color: var(--muted); }
.ct-subitem:hover { color: var(--text); }
.ct-subitem.is-active { color: var(--indigo); font-weight: 600; border-bottom-color: var(--indigo); } .ct-subitem.is-active .i { color: var(--indigo); }
.ct-subitem.is-disabled { cursor: default; } .ct-subitem.is-disabled:hover { color: var(--text-2); }
#cg-root { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-mid: #193F94; --cg-tint: #EEF3FD; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter"; }
a.ct-step.is-active:hover .l { text-decoration: underline; } a.ct-step.is-active:focus-visible { outline: 2px solid var(--indigo); outline-offset: 4px; border-radius: 8px; }
/* two columns: the head and the form at the left, the preview card from the top at the right */
.cg-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
.cg-left { display: flex; flex-direction: column; min-width: 0; }
.cg-head { padding: 0 6px 10px; }
.cg-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; color: var(--text-2); text-decoration: none; } .cg-back .i { font-size: 17px; } .cg-back:hover { color: var(--indigo); }
.cg-head h1 { margin: 5px 0 0; font-size: 32px; font-weight: 800; letter-spacing: -0.7px; line-height: 1.15; }
.cg-head .sub { font-size: 17px; color: var(--text-2); margin-top: 3px; }
/* form card */
.cg-form { flex: 1; padding: 16px 18px 14px; min-width: 0; }
.cg-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.cg-sec + .cg-sec { border-top: 1px solid var(--border-soft); margin-top: 8px; padding-top: 8px; }
.cg-sec-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.cg-tile { width: 34px; height: 34px; border-radius: 10px; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; flex: none; } .cg-tile .i { font-size: 19px; }
.cg-sec-head .t, .cg-pv-head .t { min-width: 0; flex: 1; }
.cg-sec-head h2, .cg-pv-head h2 { margin: 0; font-size: 18px; font-weight: 700; line-height: 22px; }
.cg-sec-head .s, .cg-pv-head .s { font-size: 14px; color: var(--muted); line-height: 18px; margin-top: 1px; }
.cg-act { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; color: var(--indigo); padding: 5px 8px; border-radius: 8px; white-space: nowrap; flex: none; }
.cg-act:hover { background: var(--indigo-bg); } .cg-act .i { font-size: 16px; }
.cg-sec-err { font-size: 12.5px; color: #D63A4E; margin: -4px 0 8px 46px; }
/* colours */
.cg-swatches { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 16px; }
.cg-sw { min-width: 0; position: relative; }
.cg-sw .blk { display: block; width: 100%; height: 58px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(23, 27, 45, 0.09); cursor: pointer; position: relative; }
.cg-sw .blk:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.cg-sw .tag { position: absolute; left: 8px; bottom: 7px; padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--text); font-size: 11.5px; font-weight: 600; display: none; }
.cg-sw:hover .tag, .cg-sw:focus-within .tag { display: inline-block; }
.cg-sw .rm { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--text-2); box-shadow: 0 1px 4px rgba(23, 27, 45, 0.22); display: none; place-items: center; z-index: 2; }
.cg-sw .rm .i { font-size: 14px; } .cg-sw .rm:hover { color: #D63A4E; }
.cg-sw:hover .rm, .cg-sw:focus-within .rm { display: grid; }
.cg-sw .nm { display: block; width: calc(100% + 6px); border: 1px solid transparent; border-radius: 6px; background: transparent; font: inherit; font-size: 14.5px; font-weight: 500; color: var(--text); padding: 1px 5px; margin: 6px 0 5px -6px; }
.cg-sw .nm:hover { border-color: var(--border); } .cg-sw .nm:focus { outline: 0; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.cg-sw .picker { position: absolute; left: 0; top: 30px; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.cg-hex.np-input { height: 38px; padding: 0 5px 0 11px; font-size: 14.5px; gap: 4px; } .cg-hex input { font-size: 14.5px; font-variant-numeric: tabular-nums; text-transform: uppercase; letter-spacing: 0.2px; }
.cg-copy { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; color: var(--text-2); flex: none; } .cg-copy:hover { background: #F3F4F8; color: var(--indigo); } .cg-copy .i { font-size: 17px; }
.cg-sw.is-dragging { opacity: 0.45; }
.cg-sw.drop-before::before, .cg-sw.drop-after::after { content: ""; position: absolute; top: 0; height: 58px; width: 3px; border-radius: 2px; background: var(--indigo); }
.cg-sw.drop-before::before { left: -10px; } .cg-sw.drop-after::after { right: -10px; }
/* typography */
.cg-fonts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cg-fonts .np-field { margin: 0; } .cg-fonts .np-field > label:not(.np-input) { font-size: 14.5px; margin-bottom: 6px; }
.cg-fonts .np-input { height: 38px; padding: 0 12px; font-size: 15px; } .cg-fonts .np-input select { font-size: 15px; cursor: pointer; }
/* logo usage */
.cg-logo { height: 70px; border-radius: 10px; background: var(--cg-tint); display: flex; align-items: center; justify-content: center; gap: 14px; transition: background 0.2s; }
.cg-logo.on-dark { background: var(--cg-dark); }
.cg-mark { width: 48px; height: 48px; border-radius: 10px; background: var(--cg-primary); color: #fff; font-size: 21px; font-weight: 700; display: grid; place-items: center; flex: none; letter-spacing: -0.3px; overflow: hidden; }
.cg-mark.asset { background: #fff; padding: 4px; }
.cg-mark.asset.dark { background: var(--cg-dark); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }
.cg-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cg-logo .cg-mark.asset { background: transparent; padding: 0; box-shadow: none; }   /* the lockup panel is already the logo's own background */
.cg-logo .nm { font-family: var(--cg-hfont), var(--font); font-size: 26px; font-weight: 700; letter-spacing: -0.4px; color: var(--cg-dark); max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-logo.on-dark .nm { color: var(--cg-light); }
/* preview card */
.cg-preview { padding: 16px 16px 14px; display: flex; flex-direction: column; min-width: 0; }
.cg-pv-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.cg-disc { width: 36px; height: 36px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; flex: none; } .cg-disc .i { font-size: 20px; }
.cg-banner { position: relative; height: 236px; border-radius: 12px; overflow: hidden; flex: none; color: var(--cg-text);
  background: linear-gradient(118deg, var(--cg-primary) 0%, var(--cg-mid) 58%, var(--cg-dark) 100%); }
.cg-banner::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px); background-size: 44px 44px; pointer-events: none; }
.cg-bn-text { position: relative; z-index: 2; padding: 16px 20px; width: 60%; }
.cg-bn-lock { display: flex; align-items: center; gap: 10px; }
.cg-bn-lock .cg-mark { width: 42px; height: 42px; font-size: 18px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 6px 16px rgba(4, 12, 40, 0.28); }
.cg-bn-lock .nm { font-family: var(--cg-hfont), var(--font); font-size: 20px; font-weight: 700; letter-spacing: -0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-bn-h { font-family: var(--cg-hfont), var(--font); font-size: 34px; font-weight: 800; line-height: 1.04; letter-spacing: -0.9px; margin-top: 16px; max-width: 300px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cg-bn-p { font-family: var(--cg-bfont), var(--font); font-size: 13.5px; line-height: 1.42; opacity: 0.9; margin-top: 12px; max-width: 250px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cg-bn-pic { position: absolute; right: 0; top: 0; bottom: 0; width: 48%; z-index: 1; }
.cg-bn-pic svg { width: 100%; height: 100%; display: block; }
.cg-bn-pic img { width: 100%; height: 100%; display: block; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
.cg-bn-cta { position: absolute; right: 48px; bottom: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 9px; background: var(--cg-light); color: var(--cg-dark); font-family: var(--cg-bfont), var(--font); font-size: 13px; font-weight: 600; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); max-width: 44%; }
.cg-bn-cta .i { font-size: 15px; color: var(--cg-primary); fill: var(--cg-primary); }
.cg-bn-cta .txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-sample { border-radius: 6px; outline: 1px dashed transparent; outline-offset: 3px; cursor: text; }
.cg-sample:hover { outline-color: rgba(255, 255, 255, 0.5); }
.cg-bn-cta .cg-sample:hover { outline-color: rgba(23, 27, 45, 0.35); }
.cg-sample[contenteditable="true"] { outline: 1.5px solid rgba(255, 255, 255, 0.9); cursor: text; -webkit-line-clamp: unset; }
.cg-bn-cta .cg-sample[contenteditable="true"] { outline-color: var(--cg-primary); }
.cg-sample.is-ph { opacity: 0.55; }
.cg-sample.is-invalid { outline: 1.5px solid #F0546A; }
.cg-sample-hint { position: absolute; left: 20px; bottom: 10px; z-index: 3; font-size: 12px; font-weight: 500; padding: 3px 8px; border-radius: 6px; background: rgba(15, 20, 40, 0.55); color: #fff; opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.cg-banner:has(.cg-sample:hover) .cg-sample-hint { opacity: 1; }
/* preserve / avoid */
.cg-rules { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; flex: 1; align-items: stretch; }
.cg-rulecard { border: 1px solid var(--border); border-radius: 12px; padding: 12px 12px 8px; min-width: 0; }
.cg-rc-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.cg-rc-head .st { font-size: 25px; display: grid; flex: none; margin-top: -1px; } .cg-rc-head .st.keep { color: var(--green); } .cg-rc-head .st.avoid { color: #E5484D; } .cg-rc-head .st.avoid .i { stroke-width: 2.4; }
.cg-rc-head .t { min-width: 0; flex: 1; }
.cg-rc-head h3 { margin: 0; font-size: 17px; font-weight: 700; line-height: 22px; }
.cg-rc-head .s { font-size: 13px; color: var(--muted); line-height: 17px; }
.cg-plus { margin: -3px -4px 0 auto; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); flex: none; } .cg-plus:hover { background: #F3F4F8; color: var(--indigo); } .cg-plus .i { font-size: 18px; }
.cg-rule { display: flex; align-items: flex-start; gap: 12px; padding: 5px 4px; border-radius: 8px; position: relative; }
.cg-rule:hover { background: #FAFBFD; }
.cg-rule .ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; color: var(--text-2); background: #F3F5F9; } .cg-rule .ic .i { font-size: 19px; }
.cg-rule .tx { min-width: 0; padding-top: 1px; }
.cg-rule .tt { font-size: 14.5px; font-weight: 500; line-height: 19px; overflow-wrap: anywhere; }
.cg-rule .dd { font-size: 13px; color: var(--muted); line-height: 17px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cg-rule .acts { position: absolute; right: 4px; top: 4px; display: flex; gap: 2px; background: #FAFBFD; border-radius: 7px; opacity: 0; pointer-events: none; }   /* focusable while hidden: keyboard users land on the pencil */
.cg-rule:hover .acts, .cg-rule:focus-within .acts { opacity: 1; pointer-events: auto; }
.cg-rule .acts button { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: var(--text-2); } .cg-rule .acts button:hover { background: #EEF0F5; color: var(--indigo); } .cg-rule .acts button.rm:hover { color: #D63A4E; } .cg-rule .acts .i { font-size: 15px; }
.cg-empty { font-size: 13.5px; color: var(--muted); padding: 10px 4px; } .cg-empty button { color: var(--indigo); font-weight: 600; font-size: 13.5px; } .cg-empty button:hover { text-decoration: underline; }
.cg-rule-edit { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 7px 10px; padding: 8px; margin: 2px 0 4px; background: #FAFBFD; border: 1px solid var(--border); border-radius: 10px; }
.cg-rule-edit .icbtn { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 8px; display: grid; place-items: center; background: #fff; color: var(--text-2); position: relative; } .cg-rule-edit .icbtn .i { font-size: 19px; }
.cg-rule-edit .icbtn:hover, .cg-rule-edit .icbtn[aria-expanded="true"] { border-color: var(--indigo); color: var(--indigo); }
.cg-rule-edit .fields { display: grid; gap: 6px; min-width: 0; }
.cg-rule-edit input, .cg-rule-edit textarea { width: 100%; border: 1px solid var(--border); border-radius: 8px; background: #fff; font: inherit; font-size: 14px; color: var(--text); padding: 7px 10px; }
.cg-rule-edit input { height: 34px; } .cg-rule-edit textarea { height: 52px; resize: none; line-height: 1.35; font-size: 13.5px; }
.cg-rule-edit input:focus, .cg-rule-edit textarea:focus { outline: 0; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.cg-rule-edit .btns { grid-column: 2; display: flex; align-items: center; gap: 10px; }
.cg-rule-edit .done { height: 30px; padding: 0 14px; border-radius: 8px; background: var(--indigo); color: #fff; font-size: 13.5px; font-weight: 600; } .cg-rule-edit .done:hover { background: var(--indigo-hover); }
.cg-rule-edit .cancel { font-size: 13.5px; font-weight: 500; color: var(--text-2); } .cg-rule-edit .cancel:hover { color: var(--text); }
.cg-rule-edit .count { margin-left: auto; font-size: 12px; color: var(--muted); }
/* popovers (logo choice, rule icons) */
.cg-pop { position: fixed; z-index: 60; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(23, 27, 45, 0.16); padding: 8px; }
.cg-pop h4 { margin: 4px 8px 8px; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; }
.cg-icons { display: grid; grid-template-columns: repeat(5, 36px); gap: 6px; }
.cg-icons button { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-2); } .cg-icons button .i { font-size: 19px; }
.cg-icons button:hover, .cg-icons button:focus-visible { border-color: var(--indigo); color: var(--indigo); outline: 0; }
.cg-icons button.on { background: var(--indigo-bg); border-color: var(--indigo); color: var(--indigo); }
.cg-pop.logo-pick { width: 330px; padding: 8px 8px 6px; }
.cg-lrow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border-radius: 9px; text-align: left; }
.cg-lrow:hover, .cg-lrow:focus-visible { background: #F5F6FA; outline: 0; }
.cg-lrow .th { width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; flex: none; background: #F3F4F8; color: var(--text-2); overflow: hidden; } .cg-lrow .th.dark { background: #0E1B3D; }
.cg-lrow .th img { width: 30px; height: 30px; object-fit: contain; display: block; }
.cg-lrow .th .i { font-size: 20px; }
.cg-lrow .w { min-width: 0; flex: 1; } .cg-lrow .n { display: block; font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cg-lrow .v { display: block; font-size: 13px; color: var(--muted); }
.cg-lrow .ck { font-size: 18px; color: var(--indigo); visibility: hidden; } .cg-lrow[aria-checked="true"] .ck { visibility: visible; }
.cg-pop .foot { border-top: 1px solid var(--border-soft); margin-top: 6px; padding: 8px 8px 2px; } .cg-pop .foot a { font-size: 14px; font-weight: 600; color: var(--indigo); text-decoration: none; } .cg-pop .foot a:hover { text-decoration: underline; }
.cg-pop .cg-pop-load { padding: 10px 8px; font-size: 14px; color: var(--muted); }
/* footer bar */
.cg-failed-host .er-banner { margin: 12px 0 0; }   /* MM-44: the one failed-save UI, directly above the footer */
.cg-foot { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: 16px; height: 58px; padding: 0 12px 0 14px; margin-top: 12px; }
.cg-foot .btn-outline, .cg-foot .btn-primary { height: 42px; padding: 0 20px; font-size: 16px; box-shadow: none; gap: 10px; }
.cg-foot .btn-primary { margin-left: auto; } .cg-foot .btn-primary .i { font-size: 19px; }
.cg-foot .ct-live { margin: 0; }
.cg-strip { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 9px; background: #FDECEF; color: #B42336; font-size: 14px; font-weight: 600; }
.cg-strip .i { font-size: 17px; }
.cg-strip:not([hidden]) + .btn-primary { margin-left: 0; }
.cg-ro { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); } .cg-ro .i { font-size: 17px; color: var(--muted); }
.cg-foot .btn-primary.is-pending { opacity: 0.85; cursor: progress; }
/* errors (MM-44) */
.cg-form .np-input.is-invalid, .cg-rule-edit input.is-invalid, .cg-rule-edit textarea.is-invalid, .cg-sw .nm.is-invalid { border-color: #D63A4E; box-shadow: 0 0 0 3px #FDECEF; }
.cg-errmsg { font-size: 12.5px; color: #D63A4E; margin-top: 4px; line-height: 1.3; }
.cg-rule-edit .cg-errmsg { margin-top: 0; }
/* read-only */
#cg-root.is-readonly [data-edit], #cg-root.is-readonly .cg-sw .rm, #cg-root.is-readonly .cg-rule .acts { display: none !important; }
#cg-root.is-readonly .cg-sw .blk, #cg-root.is-readonly .cg-sample { cursor: default; }
#cg-root.is-readonly .cg-sample:hover { outline-color: transparent; }
#cg-root.is-readonly .cg-banner:has(.cg-sample:hover) .cg-sample-hint { opacity: 0; }
#cg-root.is-readonly .np-input { background: #FAFBFD; color: var(--text-2); }
@media (max-width: 1400px) { .cg-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cg-bn-h { font-size: 30px; } }
@media (max-width: 1200px) { .cg-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
  .ct-subnav { overflow-x: auto; } .cg-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cg-rules { grid-template-columns: 1fr; }
  .cg-banner { height: auto; aspect-ratio: 16 / 9; } .cg-bn-pic { display: none; } .cg-bn-text { width: 100%; }
  .cg-foot { flex-wrap: wrap; height: auto; padding: 10px; } .cg-foot .btn-outline, .cg-foot .btn-primary { flex: 1; justify-content: center; }
}
/* ---------- Content-07 / 08 · Connect image generation + Image connection ready (cx-) — Content module, plan plans/Content-07.md ---------- */
/* 2.1 the not-connected page: one card with the provider tiles */
.cx-card { padding: 22px 24px 24px; }
.cx-card-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.cx-tile-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; flex: none; } .cx-tile-ic .i { font-size: 21px; }
.cx-card-head h2 { margin: 0; font-size: 21px; font-weight: 700; line-height: 26px; }
.cx-card-head .s { font-size: 15.5px; color: var(--text-2); margin-top: 2px; }
.cx-providers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cx-prov { padding: 20px; border-radius: 12px; border: 1px solid var(--border); background: #fff; display: flex; flex-direction: column; min-width: 0; }
.cx-prov-top { display: flex; align-items: center; gap: 18px; }
.cx-logo { width: 62px; height: 62px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.cx-logo.openai { background: #111317; color: #fff; } .cx-logo.openai .i { font-size: 40px; stroke-width: 1.5; }
.cx-logo.stability { background: #fff; border: 1px solid var(--border); font-size: 42px; font-weight: 800; letter-spacing: -1px; color: #5B21B6; position: relative; line-height: 1; }
.cx-logo.stability .dot { position: absolute; right: 12px; bottom: 15px; width: 8px; height: 8px; border-radius: 50%; background: #E5484D; }
.cx-prov .nm { font-size: 18px; font-weight: 700; line-height: 22px; }
.cx-prov .ds { font-size: 15px; color: var(--text-2); line-height: 1.4; margin: 16px 0 18px; flex: 1; }
.cx-prov .btn-outline { width: 100%; height: 44px; justify-content: center; font-size: 15.5px; font-weight: 600; color: var(--indigo); border-color: var(--indigo); box-shadow: none; }
.cx-prov .btn-outline:disabled { color: var(--muted); border-color: var(--border); background: #FAFBFD; cursor: not-allowed; }
.cx-prov.is-soon { background: #FCFCFD; }
.cx-note { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: #F5F6FA; color: var(--text-2); font-size: 14.5px; } .cx-note .i { font-size: 18px; color: var(--muted); }
/* the state pills (tiles, drawer status) */
.cx-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 7px; font-size: 13.5px; font-weight: 500; white-space: nowrap; margin-top: 6px; background: #F0F1F5; color: var(--text-2); }
.cx-pill.ok { background: var(--green-bg); color: var(--green-text); } .cx-pill.fail { background: #FDECEF; color: #B42336; } .cx-pill.busy { background: var(--indigo-bg); color: var(--indigo); } .cx-pill.soon { background: var(--amber-bg); color: var(--amber-text); }
.cx-pill .spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(59, 91, 253, 0.3); border-top-color: var(--indigo); animation: cx-spin 0.8s linear infinite; }
@keyframes cx-spin { to { transform: rotate(360deg); } }
/* 2.2 the drawer (the Content-03 / 05 frame) */
.cx-backdrop { position: fixed; inset: 0; background: rgba(23, 27, 45, 0.42); z-index: 62; }
.cx-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 638px; max-width: 100vw; background: var(--surface); box-shadow: -12px 0 40px rgba(23, 27, 45, 0.18); display: flex; flex-direction: column; z-index: 63; }
.cx-drawer:focus { outline: none; }
.cx-head { display: flex; align-items: flex-start; gap: 16px; padding: 26px 26px 18px; }
.cx-head h2 { margin: 0; font-size: 23px; font-weight: 800; letter-spacing: -0.3px; line-height: 28px; }
.cx-head .sub { font-size: 16.5px; color: var(--text-2); line-height: 1.33; margin-top: 12px; max-width: 540px; }
.cx-head .close { margin-left: auto; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-2); flex: none; background: #fff; cursor: pointer; } .cx-head .close .i { font-size: 20px; } .cx-head .close:hover { background: #F3F4F8; }
.cx-body { flex: 1; overflow: auto; padding: 0 26px 12px; }
.cx-body fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.cx-pbox { display: flex; align-items: center; gap: 20px; height: 88px; padding: 0 20px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 22px; }
.cx-pbox .mk { font-size: 52px; color: #111317; display: grid; } .cx-pbox .mk .i { stroke-width: 1.4; }
.cx-pbox .nm { font-size: 19px; font-weight: 700; line-height: 23px; } .cx-pbox .ds { font-size: 14.5px; color: var(--text-2); margin-top: 3px; }
.cx-field { margin-bottom: 18px; }
.cx-field > .lbl { display: block; font-size: 16px; font-weight: 600; margin-bottom: 8px; } .cx-field .req { color: #D63A4E; margin-left: 4px; }
.cx-field .np-input { height: 44px; padding: 0 14px; font-size: 16px; } .cx-field .np-input select, .cx-field .np-input input { font-size: 16px; }
.cx-field .np-input select { cursor: pointer; }
.cx-field .np-input input[type="password"] { letter-spacing: 1.5px; }
.cx-field .np-input input::placeholder { color: #A3A8B6; letter-spacing: 0.5px; }
.cx-eye { width: 32px; height: 32px; margin-right: -6px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); flex: none; background: none; border: 0; cursor: pointer; } .cx-eye .i { font-size: 20px; }
.cx-eye:hover:not(:disabled) { background: #F3F4F8; color: var(--indigo); } .cx-eye:disabled { color: #C3C7D2; cursor: default; }
.cx-help { font-size: 13.5px; color: var(--muted); margin-top: 6px; line-height: 1.35; }
.cx-info { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 16px; border-radius: 10px; background: #EEF3FF; color: var(--indigo); font-size: 15px; margin: -4px 0 22px; } .cx-info .i { font-size: 19px; flex: none; }
.cx-manage { display: inline-flex; align-items: center; gap: 9px; font-size: 15.5px; font-weight: 500; color: var(--indigo); margin: 0 0 16px; } .cx-manage .i { font-size: 18px; }
.cx-manage[aria-disabled="true"] { cursor: default; opacity: 0.75; }
.cx-status { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: center; }
.cx-status .lbl { font-size: 16px; font-weight: 600; } .cx-status .cx-pill { margin: 0; justify-self: start; }
.cx-status .cx-help { grid-column: 2; margin-top: 5px; font-size: 14px; }
.cx-status .cx-help.fail { color: #B42336; }
.cx-foot { display: flex; align-items: center; gap: 14px; padding: 20px 26px; border-top: 1px solid var(--border); }
.cx-foot .btn-outline, .cx-foot .btn-primary { height: 44px; padding: 0 22px; font-size: 16px; box-shadow: none; }
.cx-foot .btn-primary { margin-left: auto; gap: 10px; }
.cx-foot .btn-primary.is-pending { opacity: 0.85; cursor: progress; }
.cx-foot .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; animation: cx-spin 0.8s linear infinite; }
.cx-foot .cx-ro { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); max-width: 360px; } .cx-foot .cx-ro .i { font-size: 17px; color: var(--muted); flex: none; }
.cx-field .np-input.is-invalid { border-color: #D63A4E; box-shadow: 0 0 0 3px #FDECEF; }
.cx-err { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: #D63A4E; margin-top: 6px; } .cx-err .i { font-size: 15px; }
.cx-body fieldset:disabled .np-input { background: #F7F8FA; color: var(--text-2); }
/* 2.3 the ready page (Content-08) */
.cx-ready-head .ct-save { margin-top: 18px; }
.cx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.64fr); gap: 16px; align-items: start; }
.cx-conn { padding: 24px 26px 23px; }
.cx-conn-top { display: flex; align-items: center; gap: 22px; }
.cx-conn-top .cx-logo { width: 72px; height: 72px; border-radius: 12px; background: #E3F5EC; color: #111317; } .cx-conn-top .cx-logo .i { font-size: 46px; stroke-width: 1.4; }
.cx-conn-top .t { min-width: 0; flex: 1; }
.cx-conn-top h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.4px; line-height: 31px; }
.cx-conn-top .s { font-size: 17px; color: var(--text-2); margin-top: 2px; }
.cx-verified { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 10px; background: var(--green-bg); color: var(--green-text); font-size: 15.5px; font-weight: 500; flex: none; } .cx-verified .i { font-size: 26px; color: var(--green); }
.cx-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 12px; padding: 22px 0; margin: 22px 0 30px; }
.cx-check { display: flex; align-items: flex-start; gap: 14px; padding: 0 18px; min-width: 0; }
.cx-check + .cx-check { border-left: 1px solid var(--border); }
.cx-check .d { font-size: 30px; color: var(--green); display: grid; flex: none; }
.cx-check.fail .d { color: #E5484D; } .cx-check.skip .d { color: #C3C7D2; }
.cx-check .tt { font-size: 16.5px; font-weight: 700; line-height: 22px; margin-top: 3px; }
.cx-check .tx { font-size: 15px; color: var(--text-2); line-height: 1.43; margin-top: 4px; }
.cx-kv { display: grid; grid-template-columns: 107px minmax(0, 1fr); align-items: center; row-gap: 20px; }
.cx-kv .k { font-size: 17px; font-weight: 600; }
.cx-chip { justify-self: start; display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 8px; background: #F3F4F7; border: 1px solid var(--border-soft); font-size: 16px; font-weight: 500; }
.cx-keybox { display: flex; align-items: center; height: 46px; padding: 0 12px 0 16px; border: 1px solid var(--border); border-radius: 10px; font-size: 16px; letter-spacing: 1.5px; color: var(--text); }
.cx-keybox .v { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.cx-actions { display: flex; align-items: center; gap: 16px; border-top: 1px solid var(--border); margin-top: 34px; padding-top: 18px; }
.cx-actions .btn-outline, .cx-actions .btn-primary { height: 46px; padding: 0 18px; font-size: 16.5px; box-shadow: none; }
.cx-actions .btn-primary { margin-left: auto; gap: 12px; } .cx-actions .btn-primary .i { font-size: 20px; }
.cx-next { padding: 18px 20px 20px; --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-mid: #193F94; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter"; }
.cx-next-head { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 16px; }
.cx-next-head .cx-tile-ic { width: 44px; height: 44px; } .cx-next-head .cx-tile-ic .i { font-size: 24px; }
.cx-next-head h2 { margin: 0; font-size: 20px; font-weight: 700; line-height: 25px; } .cx-next-head .s { font-size: 15px; color: var(--text-2); margin-top: 4px; }
.cx-next .cg-banner { height: 170px; border-radius: 8px; }
.cx-next .cg-bn-text { padding: 12px 18px; width: 62%; }
.cx-next .cg-bn-lock { gap: 8px; } .cx-next .cg-bn-lock .cg-mark { width: 26px; height: 26px; font-size: 11px; border-radius: 6px; } .cx-next .cg-bn-lock .nm { font-size: 14px; }
.cx-next .cg-bn-h { font-size: 28px; margin-top: 26px; max-width: 320px; letter-spacing: -0.6px; }
.cx-next .cg-bn-p { font-size: 14px; margin-top: 8px; }
.cx-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.cx-pt { position: relative; height: 130px; border-radius: 8px; overflow: hidden; color: #fff; padding: 10px 11px; }
.cx-pt.dark { background: radial-gradient(120% 90% at 70% 100%, #29478F 0%, var(--cg-dark) 60%); }
.cx-pt.primary { background: linear-gradient(150deg, var(--cg-mid) 0%, var(--cg-dark) 100%); }
.cx-pt.photo { background: linear-gradient(180deg, #D9DDE3 0%, #B9BFC8 100%); padding: 0; }
.cx-pt .lk { display: flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 700; position: relative; z-index: 2; } .cx-pt .lk .cg-mark { width: 17px; height: 17px; font-size: 7.5px; border-radius: 4px; }
.cx-pt .h { position: absolute; left: 11px; bottom: 44px; font-size: 13px; font-weight: 700; line-height: 1.2; max-width: 110px; z-index: 2; font-family: var(--cg-hfont), var(--font); }
.cx-pt svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cx-next .note { font-size: 15px; color: var(--text-2); line-height: 1.45; margin-top: 16px; }
/* responsive (plan §9) */
@media (max-width: 1200px) { .cx-grid { grid-template-columns: 1fr; } .cx-providers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) { .cx-drawer { width: 100vw; } .cx-providers { grid-template-columns: 1fr; } .cx-checks { grid-template-columns: 1fr; row-gap: 16px; } .cx-check + .cx-check { border-left: 0; } .cx-conn-top { flex-wrap: wrap; } .cx-actions { flex-direction: column; align-items: stretch; } .cx-actions .btn-primary { margin-left: 0; justify-content: center; } }

/* ---------- Content-09 · Plan your asset pack (cp-; the names differ from the MM-51 cp- block) — Content module, plan plans/Content-09.md ---------- */
#cp-root { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-mid: #193F94; --cg-tint: #F1F5F9; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter"; }
#cp-root fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.cp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 16px; align-items: start; }
/* the concept card */
.cp-pack { padding: 2px 20px 4px; min-width: 0; }
.cp-sec { padding: 12px 0 14px; }
.cp-sec + .cp-sec { border-top: 1px solid var(--border-soft); }
.cp-sec-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 11px; }
.cp-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; flex: none; }
.cp-ic .i { font-size: 19px; }
.cp-sec-head .t { flex: 1; min-width: 0; }
.cp-sec-head h2 { margin: 0; font-size: 17.5px; font-weight: 700; line-height: 21px; }
.cp-sec-head .s { font-size: 14px; color: var(--muted); line-height: 18px; margin-top: 1px; }
.cp-count { font-size: 14.5px; font-weight: 600; color: var(--text); white-space: nowrap; margin-top: 10px; font-variant-numeric: tabular-nums; }
.cp-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cp-tile { position: relative; height: 100px; border-radius: 8px; }
.cp-art { position: absolute; inset: 0; border-radius: 8px; overflow: hidden; cursor: pointer; color: #fff; font-family: var(--cg-hfont), var(--font); transition: opacity 0.15s, filter 0.15s; box-shadow: 0 1px 3px rgba(14, 27, 61, 0.14); }
.cp-art svg.bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cp-art.a-blue { background: linear-gradient(118deg, var(--cg-primary) 0%, var(--cg-mid) 62%, var(--cg-dark) 100%); }
.cp-art.a-dark { background: radial-gradient(120% 110% at 78% 95%, #1E3A8A 0%, var(--cg-dark) 62%); }
.cp-art.a-light { background: linear-gradient(160deg, var(--cg-light) 0%, var(--cg-tint) 48%, #D6E2FB 100%); box-shadow: inset 0 0 0 1px rgba(14, 27, 61, 0.06), 0 1px 3px rgba(14, 27, 61, 0.1); }
.cp-h { position: absolute; left: 13px; bottom: 13px; z-index: 2; font-weight: 700; line-height: 1.1; letter-spacing: -0.3px; }
.cp-h.lg { font-size: 18px; } .cp-h.md { font-size: 15.5px; bottom: 11px; } .cp-h.sm { font-size: 12.5px; bottom: 30px; left: 14px; letter-spacing: -0.1px; } .cp-h.xs { font-size: 12.5px; letter-spacing: -0.1px; }
.cp-h.dark { color: var(--cg-dark); }
.cp-h.right { left: auto; right: 12px; bottom: 12px; text-align: left; }
.cp-h em { font-style: normal; color: var(--cg-primary); }
.cp-lock { position: absolute; left: 38px; top: 9px; z-index: 2; }
.cp-lock .cg-mark { width: 20px; height: 20px; font-size: 8.5px; border-radius: 5px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6); }
/* checkbox, "…", caption, note badge */
.cp-check { position: absolute; left: 8px; top: 8px; z-index: 3; width: 22px; height: 22px; }
.cp-check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cp-check .bx { width: 22px; height: 22px; border-radius: 5px; background: var(--cg-primary); border: 2px solid #fff; display: grid; place-items: center; color: #fff; box-shadow: 0 1px 3px rgba(4, 12, 40, 0.35); pointer-events: none; }
.cp-check .bx .i { font-size: 14px; stroke-width: 3; }
.cp-check input:not(:checked) + .bx { background: #fff; border-color: #B9C0CE; }
.cp-check input:not(:checked) + .bx .i { visibility: hidden; }
.cp-check input:focus-visible + .bx { outline: 2px solid var(--indigo); outline-offset: 2px; }
.cp-more { position: absolute; right: 8px; top: 7px; z-index: 3; width: 26px; height: 26px; border: 0; padding: 0; border-radius: 50%; background: #fff; color: #1F2433; display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 3px rgba(4, 12, 40, 0.25); }
.cp-more .i { font-size: 17px; }
.cp-more:hover, .cp-more[aria-expanded="true"] { background: var(--indigo-bg); color: var(--indigo); }
.cp-more:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.cp-caption { position: absolute; left: 8px; bottom: 8px; z-index: 3; max-width: calc(100% - 44px); padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.96); color: var(--text); font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 4px rgba(4, 12, 40, 0.2); opacity: 0; transform: translateY(3px); transition: opacity 0.15s, transform 0.15s; pointer-events: none; }
.cp-tile:hover .cp-caption, .cp-tile:focus-within .cp-caption { opacity: 1; transform: none; }
.cp-noted { position: absolute; right: 8px; bottom: 8px; z-index: 3; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--indigo); display: grid; place-items: center; box-shadow: 0 1px 3px rgba(4, 12, 40, 0.25); }
.cp-noted[hidden] { display: none; }
.cp-noted .i { font-size: 12px; }
.cp-tile.is-off .cp-art { opacity: 0.45; filter: saturate(0.6); }
.cp-tile.is-invalid .cp-art { box-shadow: 0 0 0 2px #D63A4E; }
/* the tile menu */
.cp-menu { position: fixed; z-index: 70; width: 236px; padding: 6px; background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(23, 27, 45, 0.18), 0 0 0 1px rgba(23, 27, 45, 0.06); }
.cp-menu .hd { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; padding: 6px 10px 4px; }
.cp-menu button { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 14.5px; color: var(--text); text-align: left; cursor: pointer; }
.cp-menu button:hover, .cp-menu button:focus { background: #F3F5FA; outline: 0; }
.cp-menu .ck { font-size: 17px; color: var(--indigo); visibility: hidden; flex: none; }
.cp-menu [aria-checked="true"] { font-weight: 600; } .cp-menu [aria-checked="true"] .ck { visibility: visible; }
.cp-menu .ni { font-size: 16px; color: var(--text-2); flex: none; }
.cp-menu .sep { height: 1px; background: var(--border-soft); margin: 5px 4px; }
/* the inline note */
.cp-note-edit { margin-top: 12px; padding: 11px 14px 12px; border-radius: 10px; background: #F7F8FC; border: 1px solid var(--border-soft); }
.cp-note-edit .top { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.cp-note-edit .top .i { color: var(--indigo); font-size: 16px; }
.cp-note-edit .row { display: flex; gap: 10px; align-items: center; }
.cp-note-edit input { flex: 1; min-width: 0; height: 38px; border: 1px solid var(--border); border-radius: 8px; padding: 0 12px; font: inherit; font-size: 14.5px; color: var(--text); background: #fff; }
.cp-note-edit input:focus { outline: 0; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.cp-note-edit input.is-invalid { border-color: #D63A4E; box-shadow: 0 0 0 3px #FDECEF; }
.cp-note-edit .btn-outline { height: 38px; padding: 0 14px; font-size: 14.5px; box-shadow: none; }
.cp-link { border: 0; background: none; padding: 0 4px; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.cp-link:hover { color: #D63A4E; }
.cp-cnt { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-cnt.over { color: #D63A4E; font-weight: 600; }
.cp-err { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #D63A4E; margin-top: 6px; } .cp-err .i { font-size: 15px; }
/* the summary card */
.cp-sum { padding: 14px 18px 16px; min-width: 0; }
.cp-sum-head { display: flex; align-items: center; gap: 16px; margin: 2px 0 10px; }
.cp-sum-head h2 { margin: 0; font-size: 18px; font-weight: 700; }
.cp-row { display: flex; align-items: center; gap: 14px; min-height: 38px; font-size: 15.5px; color: var(--text); }
.cp-row > .i { width: 34px; font-size: 20px; color: var(--text-2); flex: none; }
.cp-row .v { margin-left: auto; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cp-chips { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 3px 0; }
.cp-chip { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; background: #EEF0F5; font-size: 14px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.cp-chip.none { background: none; color: var(--muted); padding: 0; }
.cp-sub { display: flex; align-items: center; gap: 16px; margin: 16px 0 10px; }
.cp-sub h3 { margin: 0; font-size: 16.5px; font-weight: 700; }
.cp-refs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cp-ref { margin: 0; }
.cp-ref .pic { height: 80px; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cp-ref .pic.logo { background: #fff; box-shadow: inset 0 0 0 1px var(--border-soft); }
.cp-ref .pic.logo .cg-mark { width: 70px; height: 70px; font-size: 30px; border-radius: 12px; }
.cp-ref .pic.board { position: relative; gap: 6px; background: linear-gradient(100deg, var(--cg-dark) 0%, #13265A 100%); }
.cp-ref .pic.board::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px); background-size: 18px 18px; }
.cp-ref .pic.board .sw { position: relative; width: 40px; height: 40px; border-radius: 3px; }
.cp-ref figcaption { font-size: 13px; color: var(--muted); text-align: center; margin-top: 6px; }
.cp-dir { padding-left: 50px !important; }
.cp-dir textarea { display: block; width: 100%; height: 70px; resize: vertical; border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; font: inherit; font-size: 15px; line-height: 1.35; color: var(--text); background: #fff; }
.cp-dir textarea:focus { outline: 0; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.cp-help { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--muted); margin-top: 5px; }
/* the footer bar */
.cp-bar { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: 16px; height: 58px; padding: 0 12px 0 14px; margin-top: 12px; }
.cp-bar .btn-outline, .cp-bar .btn-primary { height: 42px; padding: 0 20px; font-size: 16px; box-shadow: none; gap: 10px; text-decoration: none; }
.cp-bar .btn-outline .i { font-size: 18px; }
.cp-bar .btn-primary { margin-left: auto; } .cp-bar .btn-primary .i { font-size: 19px; }
.cp-bar .btn-primary:disabled { background: #C9D4FF; border-color: #C9D4FF; cursor: not-allowed; box-shadow: none; }
.cp-bar .btn-primary.is-pending { opacity: 0.85; cursor: progress; }
@keyframes cp-spin { to { transform: rotate(360deg); } }
.cp-alert { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 9px; background: #FDECEF; color: #B42336; font-size: 14px; font-weight: 600; }
.cp-alert[hidden] { display: none; }
.cp-alert .i { font-size: 17px; }
.cp-alert:not([hidden]) ~ .btn-primary { margin-left: 0; }
.cp-lockline { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); }
.cp-lockline[hidden] { display: none; }
.cp-lockline .i { font-size: 17px; color: var(--muted); }
/* read-only */
#cp-root.is-readonly .cp-more, #cp-root.is-readonly #cp-review { display: none; }
#cp-root.is-readonly .cp-art, #cp-root.is-readonly .cp-check input { cursor: default; }
#cp-root.is-readonly .cp-dir textarea { background: #FAFBFD; color: var(--text-2); }
@media (max-width: 1200px) { .cp-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
  .cp-pack { padding: 2px 14px 4px; } .cp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cp-sec-head { flex-wrap: wrap; } .cp-count { margin-top: 0; width: 100%; padding-left: 48px; }
  .cp-dir { padding-left: 0 !important; }
  .cp-bar { flex-wrap: wrap; height: auto; padding: 10px; } .cp-bar .btn-outline, .cp-bar .btn-primary { flex: 1; justify-content: center; }
  .cp-alert, .cp-lockline { order: -1; width: 100%; margin: 0; }
}
.cx-actions a.btn-primary { text-decoration: none; }   /* Content-08's Continue is a link to Content-09 */
#cp-root .cp-failed-host .er-banner { margin: 12px 0 0; }
.cp-bar .ct-live { margin: 0; }
.cp-ref .pic.logo img { max-width: 70px; max-height: 70px; object-fit: contain; display: block; }
.cp-ref .pic.logo.dark { background: var(--cg-dark); }
/* ---------- Content-10 / 11 · Generate brand assets + Creating your brand assets (cg2-; cg- is Content-06) — Content module, plan plans/Content-10.md ---------- */
.cg2-backdrop, .cg2-root { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-mid: #193F94; --cg-tint: #F1F5F9; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter"; }
/* the dialog (MM-41 frame) */
.cg2-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(23, 27, 45, 0.42); display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.cg2-backdrop[hidden] { display: none; }
.cg2-dialog { position: relative; width: 655px; max-width: 100%; padding: 26px 28px 20px; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(14, 27, 61, 0.28); outline: 0; animation: cg2-in 0.16s ease-out; }
@keyframes cg2-in { from { opacity: 0; transform: translateY(8px) scale(0.99); } }
.cg2-x { position: absolute; right: 18px; top: 16px; width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--text-2); display: grid; place-items: center; cursor: pointer; }
.cg2-x .i { font-size: 22px; } .cg2-x:hover { background: #F3F5FA; } .cg2-x:focus-visible { outline: 2px solid var(--indigo); }
.cg2-head { display: flex; align-items: center; gap: 20px; margin: 4px 36px 22px 4px; }
.cg2-disc { width: 66px; height: 66px; border-radius: 50%; background: var(--indigo-bg); color: #2563EB; display: grid; place-items: center; flex: none; }
.cg2-disc .i { font-size: 32px; }
.cg2-head h2 { margin: 0; font-size: 29px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.15; }
.cg2-head p { margin: 5px 0 0; font-size: 17px; line-height: 1.35; color: var(--text-2); }
.cg2-card { border: 1px solid var(--border); border-radius: 12px; }
.cg2-card h3 { margin: 0; font-size: 16.5px; font-weight: 700; }
.cg2-sum { padding: 13px 20px 16px; }
.cg2-facts { display: grid; grid-template-columns: 0.86fr 1.2fr 1.04fr 1.1fr; margin: 12px 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border-soft); }
.cg2-fact { display: flex; flex-direction: column; gap: 3px; padding: 0 10px 0 12px; min-width: 0; }
.cg2-fact:first-child { padding-left: 0; }
.cg2-fact + .cg2-fact { border-left: 1px solid var(--border-soft); }
.cg2-fact .t { width: 38px; height: 38px; border-radius: 9px; background: var(--indigo-bg); color: #2563EB; display: grid; place-items: center; margin-bottom: 10px; }
.cg2-fact .t .i { font-size: 21px; }
.cg2-fact b { font-size: 16px; font-weight: 700; line-height: 1.25; } .cg2-fact:not(:last-child) b { white-space: nowrap; }
.cg2-fact .s { font-size: 13px; line-height: 1.3; color: var(--muted); }
.cg2-src-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.cg2-src-meta { margin-left: auto; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cg2-src { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.cg2-src.is-collapsed .cg2-thumb:nth-child(n + 5) { display: none; }
.cg2-thumb { position: relative; height: 96px; border-radius: 8px; margin: 0; }
.cg2-thumb .cp-art { cursor: pointer; }
.cg2-thumb input { position: absolute; right: 8px; top: 8px; z-index: 4; width: 24px; height: 24px; margin: 0; opacity: 0; cursor: pointer; }
.cg2-thumb .ck { position: absolute; right: 8px; top: 8px; z-index: 3; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid #2563EB; color: #2563EB; display: grid; place-items: center; pointer-events: none; box-shadow: 0 1px 3px rgba(4, 12, 40, 0.3); }
.cg2-thumb .ck .i { font-size: 14px; stroke-width: 3; }
.cg2-thumb input:not(:checked) ~ .ck { border-color: #B9C0CE; }
.cg2-thumb input:not(:checked) ~ .ck .i { visibility: hidden; }
.cg2-thumb input:not(:checked) ~ .cp-art { opacity: 0.5; filter: saturate(0.5); }
.cg2-thumb input:focus-visible ~ .ck { outline: 2px solid var(--indigo); outline-offset: 2px; }
.cg2-thumb .nm { position: absolute; left: 8px; bottom: 7px; z-index: 3; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.95); font-size: 12px; font-weight: 600; color: var(--text); opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.cg2-thumb:hover .nm, .cg2-thumb:focus-within .nm { opacity: 1; }
.cg2-thumb.is-refused .cp-art { box-shadow: 0 0 0 2px #D63A4E; }
.cp-art.cg2-logo { background: #fff; box-shadow: inset 0 0 0 1px var(--border-soft); display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--cg-dark); }
.cp-art.cg2-logo .cg-mark { width: 52px; height: 52px; font-size: 22px; }
.cp-art.cg2-logo .w { font-size: 20px; font-weight: 800; letter-spacing: -0.4px; }
.cg2-src-err { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 13.5px; font-weight: 600; color: #B42336; }
.cg2-src-err[hidden] { display: none; } .cg2-src-err .i { font-size: 16px; }
.cg2-src-none { grid-column: 1 / -1; padding: 12px 14px; border-radius: 8px; background: #F7F8FC; font-size: 14px; color: var(--text-2); }
.cg2-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; border: 0; background: none; padding: 2px 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--indigo); cursor: pointer; }
.cg2-more .i { font-size: 16px; transition: transform 0.15s; } .cg2-more[aria-expanded="true"] .i { transform: rotate(180deg); }
.cg2-more:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 4px; }
.cg2-cost { display: flex; align-items: center; gap: 20px; padding: 14px 20px 13px; margin-top: 8px; }
.cg2-cost h3 { display: flex; align-items: center; gap: 8px; }
.cg2-tip { display: inline-grid; place-items: center; color: var(--muted); cursor: help; } .cg2-tip .i { font-size: 17px; }
.cg2-amt { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.cg2-amt #cg2-amount { font-size: 28px; font-weight: 800; letter-spacing: -0.4px; font-variant-numeric: tabular-nums; }
.cg2-pill { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 6px; background: var(--indigo-bg); color: #2563EB; font-size: 14px; font-weight: 600; }
.cg2-cost-note { margin: 0 0 0 auto; max-width: 236px; font-size: 13px; line-height: 1.4; color: var(--text-2); }
.cg2-ins { margin-top: 14px; }
.cg2-ins-t { display: flex; align-items: center; gap: 14px; width: 100%; height: 48px; padding: 0 18px; border: 0; background: none; font: inherit; font-size: 16px; font-weight: 600; color: var(--text); cursor: pointer; border-radius: 12px; }
.cg2-ins-t .i { font-size: 21px; color: var(--text-2); } .cg2-ins-t span { flex: 1; text-align: left; }
.cg2-ins-t .i:last-child { transition: transform 0.15s; } .cg2-ins-t[aria-expanded="true"] .i:last-child { transform: rotate(180deg); }
.cg2-ins-t:hover { background: #FAFBFD; } .cg2-ins-t:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
.cg2-ins-body { max-height: 230px; overflow-y: auto; padding: 2px 18px 14px; border-top: 1px solid var(--border-soft); font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.cg2-ins-body h4 { margin: 10px 0 4px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); }
.cg2-ins-body dl { display: grid; grid-template-columns: 110px 1fr; gap: 2px 10px; margin: 0; } .cg2-ins-body dt { font-weight: 600; color: var(--text); } .cg2-ins-body dd { margin: 0; }
.cg2-ins-body ol { margin: 0; padding-left: 20px; } .cg2-ins-body li { margin: 2px 0; } .cg2-ins-body li b { color: var(--text); font-weight: 600; }
.cg2-alert { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 12px; border-radius: 9px; background: #FDECEF; color: #B42336; font-size: 14px; font-weight: 600; }
.cg2-alert[hidden] { display: none; } .cg2-alert .i { font-size: 17px; }
.cg2-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; }
.cg2-foot .btn-outline { height: 46px; padding: 0 29px; font-size: 16.5px; font-weight: 600; text-decoration: none; color: var(--text); }
.cg2-foot .btn-primary { height: 46px; padding: 0 28px; font-size: 16.5px; box-shadow: none; background: #2563EB; gap: 14px; }
.cg2-foot .btn-primary .i { font-size: 21px; }
.cg2-foot .btn-primary:hover { background: #1D4ED8; }
.cg2-foot .btn-primary.is-pending { opacity: 0.85; cursor: progress; }
body.cg2-open { overflow: hidden; }
/* the progress page */
.cg2-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.cg2-assets { padding: 16px 20px 20px; min-width: 0; }
.cg2-assets-head { display: flex; align-items: center; gap: 14px; }
.cg2-assets-head h2 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.2px; }
.cg2-prog { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.cg2-prog .lbl { font-size: 18.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cg2-bar { flex: 1; height: 10px; border-radius: 999px; background: #E9ECF3; overflow: hidden; }
.cg2-bar span { display: block; height: 100%; border-radius: 999px; background: #2563EB; transition: width 0.45s ease; }
.cg2-root.is-finished .cg2-bar span { background: var(--green); }
.cg2-prog .pct { width: 48px; text-align: right; font-size: 17px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cg2-help { margin: 10px 0 16px; font-size: 14.5px; color: var(--text-2); }
.cg2-done { display: flex; align-items: center; gap: 14px; margin: 12px 0 16px; padding: 12px 14px; border-radius: 10px; background: #F2FBF6; border: 1px solid #BFE7D3; }
.cg2-done[hidden] { display: none; }
.cg2-done .disc { width: 36px; height: 36px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; flex: none; } .cg2-done .disc .i { font-size: 20px; stroke-width: 2.6; }
.cg2-done .t { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 14px; color: var(--text-2); }
.cg2-done .t strong { font-size: 16.5px; color: var(--text); }
.cg2-done .t .pending { font-size: 12.5px; color: var(--muted); }
.cg2-done .btn-outline, .cg2-done .btn-primary { height: 40px; padding: 0 16px; font-size: 15px; box-shadow: none; white-space: nowrap; }
.cg2-done .btn-outline[hidden] { display: none; } .cg2-done .btn-outline .i { font-size: 17px; }
.cg2-root.is-partial .cg2-done { background: #FFF8EB; border-color: #F6DDA8; } .cg2-root.is-partial .cg2-done .disc { background: #F59E0B; }
.cg2-tiles { display: grid; gap: 13px; }
.cg2-tiles:empty { display: none; }
.cg2-tiles.big { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px 13px; margin-bottom: 18px; }
.cg2-tiles.small { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 18px 11px; }
.cg2-tile { margin: 0; min-width: 0; }
.cg2-tile .pic { position: relative; border-radius: 8px; overflow: hidden; background: #EEF0F5; }
.cg2-tiles.big .pic { height: 151px; }
.cg2-tiles.small .pic { height: 125px; }
.cg2-tile .pic .cp-art { cursor: default; border-radius: 8px; }
.cg2-tile.is-completed .pic .cp-art { animation: cg2-fade 0.5s ease-out; }
@keyframes cg2-fade { from { opacity: 0; filter: blur(6px); } }
.cg2-tile .pic .cp-h.lg { font-size: 22px; } .cg2-tiles.big .cp-h.md { font-size: 19px; } .cg2-tiles.big .cp-h.sm { font-size: 15px; }
.cg2-tile figcaption { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 14px; color: var(--text-2); white-space: nowrap; }
.cg2-tile figcaption .i { font-size: 18px; flex: none; }
.cg2-ok { width: 18px; height: 18px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; flex: none; } .cg2-tile figcaption .cg2-ok .i { font-size: 12px; stroke-width: 3.2; }
.cg2-tile.is-rendering figcaption { color: #2563EB; font-weight: 500; }
.cg2-tile.is-queued figcaption { color: var(--muted); } .cg2-tile.is-queued figcaption .i { color: var(--muted); }
.cg2-tile.is-failed figcaption { color: #B42336; font-weight: 600; }
.cg2-tile .ph { position: absolute; inset: 0; display: grid; place-items: center; color: #9AA1B2; }
.cg2-tile .ph .i { font-size: 34px; stroke-width: 1.4; }
.cg2-tile.is-rendering .pic .cp-art { filter: brightness(0.62) saturate(0.85); }
.cg2-tile.is-rendering .pic .cp-h, .cg2-tile.is-rendering .pic .cg-mark, .cg2-tile.is-rendering .pic .cp-lock { opacity: 0; }
.cg2-ring { position: absolute; left: 50%; top: 50%; z-index: 4; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: cp-spin 0.9s linear infinite; }
.cg2-dots { width: 17px; height: 17px; border-radius: 50%; border: 2.5px dotted #2563EB; animation: cp-spin 1.6s linear infinite; flex: none; }
.cg2-tile.is-failed .pic { background: #FDECEF; box-shadow: inset 0 0 0 1px #F4C4CC; }
.cg2-tile.is-failed .ph { color: #D63A4E; }
.cg2-retry { position: absolute; left: 50%; bottom: 10px; z-index: 5; transform: translateX(-50%); height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: #fff; color: #B42336; font: inherit; font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 2px 8px rgba(23, 27, 45, 0.18); cursor: pointer; opacity: 0; transition: opacity 0.15s; }
.cg2-retry .i { font-size: 15px; }
.cg2-tile.is-failed:hover .cg2-retry, .cg2-retry:focus-visible { opacity: 1; } .cg2-retry:focus-visible { outline: 2px solid var(--indigo); }
.cg2-tile .err { display: block; margin-top: 2px; font-size: 12px; color: #B42336; white-space: normal; line-height: 1.3; }
/* the current-job card */
.cg2-job { padding: 16px 18px 18px; position: sticky; top: 12px; }
.cg2-job h2 { display: flex; align-items: center; gap: 14px; margin: 2px 0 12px 4px; font-size: 18.5px; font-weight: 700; }
.cg2-job h2 .i { font-size: 24px; color: #2563EB; }
.cg2-prev { position: relative; height: 142px; border-radius: 8px; overflow: hidden; background: #EEF0F5; }
.cg2-prev .cp-art { border-radius: 8px; cursor: default; }
.cg2-prev .cp-h.lg { font-size: 24px; }
.cg2-prev.is-empty { background: linear-gradient(90deg, #EEF0F5 0%, #F6F7FA 50%, #EEF0F5 100%); background-size: 200% 100%; animation: cg2-sheen 1.4s linear infinite; }
@keyframes cg2-sheen { to { background-position: -200% 0; } }
.cg2-job h3 { margin: 12px 0 3px; font-size: 16px; font-weight: 700; }
.cg2-job p { margin: 0 0 12px; font-size: 14px; line-height: 1.4; color: var(--text-2); min-height: 39px; }
.cg2-row { display: flex; align-items: center; gap: 9px; min-height: 23px; font-size: 13.5px; color: var(--text-2); }
.cg2-row .i { font-size: 16px; color: var(--muted); flex: none; }
.cg2-row b { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.cg2-refs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 8px 0 14px 22px; }
.cg2-refs .r { position: relative; height: 50px; border-radius: 5px; overflow: hidden; }
.cg2-refs .r .cp-art { border-radius: 5px; cursor: default; }
.cg2-refs .cp-h, .cg2-refs .cp-lock { display: none; }
.cg2-refs .cg2-logo .cg-mark { width: 26px; height: 26px; font-size: 11px; border-radius: 6px; } .cg2-refs .cg2-logo .w { display: none; }
.cg2-job .btn-primary, .cg2-job .btn-outline { width: 100%; justify-content: center; height: 44px; font-size: 15.5px; box-shadow: none; gap: 10px; }
.cg2-job .btn-primary { background: #2563EB; } .cg2-job .btn-primary:hover { background: #1D4ED8; }
.cg2-job .btn-outline { margin-top: 8px; font-weight: 600; }
.cg2-job .btn-primary .i, .cg2-job .btn-outline .i { font-size: 18px; }
.cg2-job .btn-outline:disabled { color: #A3A9B7; cursor: not-allowed; background: #FAFBFD; }
.cg2-job .btn-primary[hidden] { display: none; }
.cg2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .cg2-dialog, .cg2-tile.is-completed .pic .cp-art, .cg2-prev.is-empty { animation: none; } .cg2-bar span { transition: none; } }
@media (max-width: 1200px) { .cg2-grid { grid-template-columns: 1fr; } .cg2-job { position: static; } .cg2-tiles.big { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cg2-tiles.small { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .cg2-backdrop { place-items: end center; padding: 0; } .cg2-dialog { width: 100%; max-height: 92vh; overflow: auto; border-radius: 18px 18px 0 0; padding: 20px 16px 16px; }
  .cg2-head { gap: 14px; } .cg2-disc { width: 48px; height: 48px; } .cg2-head h2 { font-size: 22px; } .cg2-head p { font-size: 15px; }
  .cg2-facts { grid-template-columns: 1fr 1fr; gap: 12px 0; } .cg2-fact:nth-child(3) { border-left: 0; padding-left: 0; }
  .cg2-cost { flex-wrap: wrap; } .cg2-cost-note { margin: 0; max-width: none; }
  .cg2-foot { flex-direction: column-reverse; } .cg2-foot .btn-outline, .cg2-foot .btn-primary { width: 100%; justify-content: center; }
  .cg2-assets { padding: 14px; } .cg2-prog { flex-wrap: wrap; } .cg2-tiles.big, .cg2-tiles.small { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cg2-done { flex-wrap: wrap; }
}
/* Content-10 / 11 in the app: real thumbnails instead of the prototype's drawings */
.cp-art.cg2-img { background: #EEF0F5; }
.cp-art.cg2-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-art.cg2-img.cg2-logo { background: #fff; }
.cp-art.cg2-img.cg2-logo img { object-fit: contain; padding: 10px; }
.cp-art.cg2-img .ph, .cg2-thumb .ph { position: absolute; inset: 0; display: grid; place-items: center; color: #9AA1B2; }
.cg2-refs .cg2-logo img { padding: 4px; }
.cg2-refs-none { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.cg2-tile.is-rendering .pic { background: linear-gradient(118deg, var(--cg-primary) 0%, var(--cg-mid) 62%, var(--cg-dark) 100%); }
.cg2-tile.is-rendering .pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 100%); background-size: 200% 100%; animation: cg2-sheen 1.4s linear infinite; }
.cg2-ins-body .cg2-brief { margin: 0; }
.cg2-ro { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); } .cg2-ro .i { font-size: 16px; }
.cg2-conn { display: flex; align-items: center; gap: 7px; margin: 8px 0 0; font-size: 13.5px; font-weight: 600; color: #B45309; }
.cg2-conn[hidden] { display: none; } .cg2-conn .i { font-size: 16px; }
.cg2-root > .ct-note[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .cg2-tile.is-rendering .pic::after { animation: none; } }

/* ---------- Content-12 · Review your brand assets (rw-) — Content module, plan plans/Content-12.md, prototype/gen/content12.css ---------- */
.rw-root { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-mid: #193F94; --cg-tint: #F1F5F9; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter"; }
.rw-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 16px; align-items: start; }
.rw-main { padding: 14px 16px 16px; min-width: 0; }
/* the toolbar: chips at the left, the bulk controls at the right */
.rw-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.rw-chips { display: flex; gap: 4px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.rw-chip { height: 38px; padding: 0 8px 0 14px; border-radius: 999px; border: 1px solid transparent; background: #F3F4F8; color: var(--text-2); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; }
.rw-chip .n { min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: #E6E8EF; color: var(--text); font-size: 13px; font-weight: 600; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.rw-chip:hover { background: #ECEEF4; }
.rw-chip.is-active { background: var(--indigo-bg); border-color: var(--indigo); color: var(--indigo); font-weight: 600; }
.rw-chip.is-active .n { background: var(--indigo); color: #fff; }
.rw-chip:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.rw-bulk { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.rw-bulk[hidden] { display: none; }
.rw-all { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text); cursor: pointer; position: relative; white-space: nowrap; margin-right: 2px; }
.rw-all input, .rw-check input { position: absolute; width: 20px; height: 20px; margin: 0; opacity: 0; cursor: pointer; }
.rw-root .bx { width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid #B9C0CE; background: #fff; display: grid; place-items: center; color: #fff; pointer-events: none; flex: none; }
.rw-root .bx .i { font-size: 14px; stroke-width: 3; visibility: hidden; }
.rw-root input:checked + .bx { background: var(--indigo); border-color: var(--indigo); } .rw-root input:checked + .bx .i { visibility: visible; }
.rw-root input:indeterminate + .bx { background: var(--indigo); border-color: var(--indigo); }
.rw-root input:indeterminate + .bx::after { content: ""; width: 10px; height: 2px; border-radius: 1px; background: #fff; }
.rw-root input:focus-visible + .bx { outline: 2px solid var(--indigo); outline-offset: 2px; }
.rw-approve-sel, .rw-changes { height: 38px; padding: 0 13px; font-size: 14px; font-weight: 500; gap: 8px; box-shadow: none; white-space: nowrap; }
.rw-approve-sel .i, .rw-changes .i { font-size: 18px; }
.rw-approve-sel:disabled, .rw-changes:disabled { opacity: 0.5; cursor: not-allowed; }
.rw-approve-sel:disabled:hover { background: var(--indigo); }
.rw-ro-note { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.rw-ro-note[hidden] { display: none; } .rw-ro-note .i { font-size: 16px; }
/* the card grid */
.rw-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.rw-cards:empty { display: none; }
.rw-card { position: relative; border: 1px solid var(--border); border-radius: 12px; padding: 10px; background: var(--surface); min-width: 0; display: flex; flex-direction: column; transition: box-shadow 0.15s, border-color 0.15s; }
.rw-card:hover { box-shadow: 0 2px 10px rgba(23, 27, 45, 0.07); }
.rw-card.is-selected { border: 2px solid var(--indigo); padding: 9px; }
.rw-card.is-leaving { opacity: 0; transform: scale(0.97); transition: opacity 0.18s, transform 0.18s; }
.rw-pic { position: relative; display: block; flex: none; width: 100%; height: 150px; border: 0; padding: 0; border-radius: 8px; background: none; cursor: pointer; }
.rw-pic .cp-art { border-radius: 8px; }
.rw-pic:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.rw-pic .cp-h.lg { font-size: 22px; } .rw-pic .cp-h.md { font-size: 19px; } .rw-pic .cp-h.sm { font-size: 15px; }
.rw-check { position: absolute; left: 10px; top: 10px; z-index: 4; width: 34px; height: 34px; border-radius: 8px 0 10px 0; background: var(--surface); display: grid; place-items: center; }
.rw-card.is-selected .rw-check { left: 9px; top: 9px; }
.rw-check input { left: 7px; top: 7px; }
.rw-body { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; }
.rw-body .t { flex: 1; min-width: 0; }
.rw-body h3 { margin: 0; font-size: 15.5px; font-weight: 600; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-meta { font-size: 13px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-note { font-size: 12.5px; color: #B42339; margin-top: 4px; line-height: 16px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.rw-pill { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.rw-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rw-pill.pending { background: #FFF4E0; color: #B7700B; } .rw-pill.pending::before { background: #F59E0B; }
.rw-pill.approved { background: #E7F8F0; color: #0B8A5F; } .rw-pill.approved::before { background: var(--green); }
.rw-pill.needs_changes { background: #FDECEF; color: #C92F45; } .rw-pill.needs_changes::before { background: #F0546A; }
.rw-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: auto; padding-top: 12px; }
.rw-acts button { height: 36px; padding: 0 4px; font-size: 13.5px; font-weight: 500; gap: 5px; justify-content: center; box-shadow: none; min-width: 0; white-space: nowrap; }
.rw-acts .i { font-size: 15px; }
.rw-acts .btn-primary:disabled { background: #E7F8F0; color: #0B8A5F; cursor: default; opacity: 1; }
.rw-acts .rw-reject { border: 1px solid #F5C4CC; background: #fff; color: #D63A4E; border-radius: 8px; display: inline-flex; align-items: center; cursor: pointer; }
.rw-acts .rw-reject:hover { background: #FFF5F6; border-color: #EC97A5; }
.rw-root.is-readonly .rw-acts, .rw-root.is-readonly .rw-check { display: none; }
.rw-root.is-readonly .rw-pic { cursor: default; }
.rw-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 56px 16px; color: var(--muted); font-size: 15px; border: 1px dashed var(--border); border-radius: 12px; }
.rw-empty[hidden] { display: none; }
.rw-empty .i { font-size: 30px; color: #B9C0CE; }
.rw-none { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 16px; text-align: center; border: 1px dashed var(--border); border-radius: 12px; }
.rw-none[hidden] { display: none; } .rw-none > .i { font-size: 30px; color: var(--indigo); } .rw-none b { font-size: 17px; } .rw-none p { margin: 0; color: var(--text-2); font-size: 14.5px; max-width: 460px; }
.rw-none .acts { display: flex; gap: 10px; margin-top: 8px; } .rw-none .acts .btn-primary, .rw-none .acts .btn-outline { height: 40px; padding: 0 16px; gap: 8px; }
/* the review summary */
.rw-side { padding: 18px 18px 20px; position: sticky; top: 16px; }
.rw-side-head { display: flex; align-items: center; gap: 12px; }
.rw-ic { width: 32px; height: 32px; border-radius: 8px; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; flex: none; }
.rw-ic .i { font-size: 18px; }
.rw-side h2 { margin: 0; font-size: 17.5px; font-weight: 700; }
.rw-side-sub { margin: 12px 0 14px; font-size: 14px; line-height: 19px; color: var(--muted); }
.rw-rows { border-bottom: 1px solid var(--border-soft); padding-bottom: 12px; margin-bottom: 16px; }
.rw-row { display: flex; align-items: center; gap: 12px; height: 36px; font-size: 14.5px; }
.rw-row .ic { width: 26px; height: 26px; display: grid; place-items: center; color: var(--text-2); }
.rw-row .ic .i { font-size: 19px; }
.rw-row .l { flex: 1; color: var(--text); }
.rw-row b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rw-row.total b { font-size: 16px; }
.rw-row.approved .ic, .rw-row.approved b { color: var(--green); }
.rw-row.pending .ic, .rw-row.pending b { color: #F59E0B; }
.rw-row.needs_changes .ic, .rw-row.needs_changes b { color: #F0546A; }
.rw-info { display: flex; gap: 10px; padding: 14px 12px 14px 14px; border-radius: 10px; background: #EEF3FF; border: 1px solid #DCE4FB; margin-bottom: 22px; }
.rw-info .dot { width: 20px; height: 20px; border-radius: 50%; background: var(--indigo); color: #fff; font-size: 13px; font-weight: 700; font-family: Georgia, serif; display: grid; place-items: center; flex: none; margin-top: 1px; }
.rw-info strong { display: block; font-size: 13.5px; white-space: nowrap; font-weight: 600; margin-bottom: 4px; }
.rw-info span { display: block; font-size: 12.5px; line-height: 17px; color: var(--text-2); }
.rw-finish-btn { width: 100%; height: 46px; justify-content: center; gap: 10px; font-size: 16px; box-shadow: none; }
.rw-finish-btn .i { font-size: 18px; }
.rw-finish-btn:disabled { background: #E3E6ED; color: #fff; cursor: not-allowed; }
.rw-finish-btn:disabled:hover { background: #E3E6ED; }
.rw-finish-note { margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.rw-finish-note.is-ok { color: #0B8A5F; }
.rw-root.is-readonly .rw-finish { display: none; }
/* the short "Request changes" dialog (until Content-14) */
.dg.rw-dialog { width: 520px; }
.rw-dialog label { display: block; font-size: 15px; font-weight: 600; margin: 0 0 8px; }
.rw-dialog .who { font-size: 14.5px; color: var(--text-2); margin: -6px 0 16px; }
.rw-dialog textarea { width: 100%; min-height: 112px; resize: vertical; border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; font: inherit; font-size: 15px; color: var(--text); }
.rw-dialog textarea:focus { outline: 0; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.rw-dialog .row2 { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 13px; color: var(--muted); }
.rw-dialog .err { color: #C92F45; }
.rw-dialog .foot { justify-content: flex-end; }
.rw-dialog .foot .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .rw-card, .rw-card.is-leaving { transition: none; } }
@media (max-width: 1200px) { .rw-grid { grid-template-columns: 1fr; } .rw-side { position: static; } .rw-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .rw-main { padding: 12px; } .rw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rw-bulk { width: 100%; flex-wrap: wrap; } .rw-approve-sel, .rw-changes { flex: 1; justify-content: center; }
  .rw-pic { height: 120px; } .rw-body { flex-direction: column; } .rw-acts { grid-template-columns: 1fr; }
}

/* ---------- Content-16 · Your brand assets are ready (rd2-) — Content module, plan plans/Content-16.md ---------- */
.rd2-root { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-mid: #193F94; --cg-tint: #F1F5F9; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter"; }
/* the head: "Completed · Approved on {date}" at the right */
.rd2-done { margin-left: auto; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-top: 8px; }
.rd2-done .st { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 500; color: var(--text); }
.rd2-done .st .i { font-size: 24px; color: var(--green); }
.rd2-done .on { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* the stepper: every step done — indigo discs with the number, a green check after the label */
.rd2-root .ct-steps { height: 66px; padding: 0 130px 0 150px; margin-bottom: 18px; }
.rd2-root .ct-step { gap: 14px; }
.rd2-root .ct-step.is-done { color: var(--indigo); font-weight: 600; }
.rd2-root .ct-step.is-done .n { width: 40px; height: 40px; background: var(--indigo); color: #fff; box-shadow: none; font-size: 16px; }
.rd2-root .ct-steps .line { margin: 0 18px 0 22px; }
.rd2-tick { width: 18px; height: 18px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; flex: none; margin-left: -4px; }
.rd2-tick .i { font-size: 12px; stroke-width: 3.2; }
/* the two columns */
.rd2-grid { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 20px; align-items: start; }
.rd2-pack { padding: 24px 24px 26px; min-width: 0; }
.rd2-top { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 22px; }
.rd2-tile { width: 106px; height: 106px; border-radius: 12px; background: #EEF2FA; display: grid; place-items: center; flex: none; }
.rd2-tile .cg-mark { width: 66px; height: 66px; border-radius: 14px; font-size: 28px; background: #1D4FF2; }
.rd2-tile .cg-mark.asset { width: 82px; height: 82px; background: #fff; padding: 8px; }                /* the approved logo itself */
.rd2-tile .cg-mark.asset.dark { background: var(--cg-dark); box-shadow: none; }
.rd2-id { flex: 1; min-width: 0; padding-top: 8px; }
.rd2-eyebrow { font-size: 13px; font-weight: 500; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-2); }
.rd2-count { margin: 6px 0 12px; font-size: 30px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.rd2-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 15px; color: var(--text-2); }
.rd2-meta b { color: var(--text); font-weight: 600; }
.rd2-meta .sep { color: var(--muted); }
.rd2-conn { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 500; }
.rd2-conn::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.rd2-conn.is-off { color: var(--muted); } .rd2-conn.is-off::before { background: #9CA3AF; }
.rd2-acts { display: flex; flex-direction: column; gap: 12px; width: 240px; flex: none; padding-top: 6px; }
.rd2-acts button { height: 44px; justify-content: center; font-size: 15px; font-weight: 600; gap: 10px; }
.rd2-acts .btn-outline { color: var(--indigo); }
.rd2-acts .i { font-size: 19px; }
/* the gallery: four large tiles over eight small ones */
.rd2-large { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.rd2-small { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.rd2-img { position: relative; margin: 0; border-radius: 8px; min-width: 0; }
.rd2-large .rd2-img { height: 190px; } .rd2-small .rd2-img { height: 100px; }
.rd2-img .cp-art { cursor: default; border-radius: 8px; }
.rd2-large .cp-h.lg { font-size: 25px; } .rd2-large .cp-h.md { font-size: 22px; left: 18px; bottom: 18px; } .rd2-large .cp-h.sm { font-size: 17px; bottom: 22px; left: 18px; }
.rd2-large .cp-h.xs { font-size: 16px; }
.rd2-large .cp-lock { left: 18px; top: 16px; } .rd2-large .cp-lock .cg-mark { width: 32px; height: 32px; font-size: 13px; border-radius: 7px; }
.rd2-small .cp-h { font-size: 11px; left: 9px; bottom: 9px; } .rd2-small .cp-h.xs { display: none; }
.rd2-small .cp-lock { left: 8px; top: 7px; }
.rd2-more { position: absolute; inset: 0; z-index: 5; border-radius: 8px; background: rgba(14, 27, 61, 0.6); color: #fff; display: grid; place-items: center; font-size: 18px; font-weight: 700; }
.rd2-note { margin: 14px 0 0; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.rd2-note .i { font-size: 16px; flex: none; }
/* the right column */
.rd2-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.rd2-card { padding: 18px 18px 20px; }
.rd2-card-head { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.rd2-card-head .ic { width: 36px; height: 36px; border-radius: 9px; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; flex: none; }
.rd2-card-head .ic .i { font-size: 20px; }
.rd2-card-head h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.2px; }
.rd2-refs { list-style: none; margin: 0; padding: 0; }
.rd2-ref { display: flex; align-items: flex-start; gap: 22px; padding: 12px 10px 14px; }
.rd2-ref + .rd2-ref { border-top: 1px solid var(--border-soft, #EEF0F5); }
.rd2-ok { width: 36px; height: 36px; border-radius: 50%; background: #E7F8F0; display: grid; place-items: center; flex: none; margin-top: 4px; }
.rd2-ok .dot { width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; }
.rd2-ok .dot .i { font-size: 14px; stroke-width: 3.2; }
.rd2-ref.is-missing .rd2-ok { background: #FFF4E0; }
.rd2-ref.is-missing .rd2-ok .dot { background: var(--amber); font-size: 14px; font-weight: 800; }
.rd2-ref h3 { margin: 0; font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rd2-ref p { margin: 3px 0 0; font-size: 14.5px; line-height: 19px; color: var(--muted); }
.rd2-ref p a { color: var(--indigo); font-weight: 500; }
.rd2-miss { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: #FFF4E0; color: #B7700B; font-size: 12.5px; font-weight: 600; }
.rd2-inc { list-style: none; margin: 4px 0 0; padding: 0; }
.rd2-inc li { display: flex; align-items: center; gap: 18px; height: 41px; padding: 0 10px 0 12px; font-size: 15px; color: var(--text); }
.rd2-inc li .i { font-size: 20px; color: var(--text-2); flex: none; }
.rd2-inc li .l { flex: 1; }
.rd2-inc li b { font-weight: 400; color: var(--text-2); font-variant-numeric: tabular-nums; }
.rd2-inc li b strong { font-weight: 600; color: var(--text); }
@media (max-width: 1280px) { .rd2-grid { grid-template-columns: minmax(0, 1fr) 340px; } .rd2-root .ct-steps { padding: 0 30px; } .rd2-top { flex-wrap: wrap; } .rd2-acts { width: 100%; flex-direction: row; } .rd2-acts button { flex: 1; } }
@media (max-width: 1024px) { .rd2-grid { grid-template-columns: 1fr; } .rd2-small { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .rd2-done { margin: 0; align-items: flex-start; width: 100%; }
  .rd2-root .ct-steps { padding: 0 16px; } .rd2-root .ct-step .l { display: none; } .rd2-tick { display: none; }
  .rd2-large { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rd2-large .rd2-img { height: 150px; }
  .rd2-acts { flex-direction: column; } .rd2-acts button { flex: none; width: 100%; }
}

/* ---------- Content-13 / 14 / 15 · Review asset, Request asset changes, Compare asset versions (rv-) — Content module, plan plans/Content-13.md ---------- */
/* the drawn art at any size: the pack drawings (cp-art) scale with their frame (container units) */
.rv-frame { position: relative; container-type: inline-size; overflow: hidden; border-radius: 10px; text-align: left; --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-mid: #193F94; --cg-tint: #F1F5F9; --cg-hfont: "Inter"; }
.rv-frame .cp-art { border-radius: inherit; cursor: inherit; box-shadow: none; }
.rv-frame .cp-h.lg { font-size: 7.2cqw; left: 5cqw; bottom: 6cqw; letter-spacing: -0.03em; }
.rv-frame .cp-h.md { font-size: 6cqw; left: 5cqw; bottom: 5cqw; } .rv-frame .cp-h.sm, .rv-frame .cp-h.xs { font-size: 4.8cqw; left: 5cqw; bottom: 5cqw; }
.rv-frame .cp-h.rv-h2 { font-size: 8.6cqw; left: 5cqw; bottom: auto; top: 30%; line-height: 1.02; letter-spacing: -0.035em; }
.rv-h2 .s { display: block; margin-top: 2.2cqw; font-size: 2.7cqw; font-weight: 500; letter-spacing: 0; opacity: 0.88; }
.rv-lockup { position: absolute; left: 5cqw; top: 5.5cqw; z-index: 2; display: flex; align-items: center; gap: 1.6cqw; color: #fff; font-family: var(--cg-hfont), var(--font); }
.rv-lockup .m { width: 5.4cqw; height: 5.4cqw; border-radius: 1cqw; background: var(--cg-primary); display: grid; place-items: center; font-size: 2.5cqw; font-weight: 800; box-shadow: 0 0 0 1px rgba(255,255,255,0.18); }
.rv-lockup .w { font-size: 2.7cqw; font-weight: 700; letter-spacing: -0.02em; }
.rv-art { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.rv-art svg { width: 100%; height: 100%; display: block; }
.rv-logo-art { background: radial-gradient(120% 120% at 50% 40%, #16307A 0%, #0B1638 70%); display: grid; place-items: center; }
.rv-logo-art .m { width: 30cqw; height: 26cqw; max-width: 64px; max-height: 54px; border-radius: 8px; background: #2351FD; color: #fff; font-weight: 800; font-size: clamp(14px, 13cqw, 28px); letter-spacing: -0.5px; display: grid; place-items: center; box-shadow: 0 0 22px rgba(35, 81, 253, 0.55); }
.rv-logo-art.light { background: #fff; box-shadow: inset 0 0 0 1px var(--border-soft); }
.rv-logo-art.light .m { box-shadow: none; }

/* ---- the drawers (the Content-05 frame) ---- */
.rv-backdrop { position: fixed; inset: 0; background: rgba(23, 27, 45, 0.42); z-index: 62; }
.rv-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 646px; max-width: 100vw; background: var(--surface); box-shadow: -12px 0 40px rgba(23, 27, 45, 0.18); display: flex; flex-direction: column; z-index: 63; }
.rv-drawer.rv-change { width: 674px; }
.rv-drawer:focus { outline: none; }
.rv-head { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px 14px 24px; }
.rv-head h2 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.6px; line-height: 36px; }
.rv-change .rv-head h2 { font-size: 24px; line-height: 30px; letter-spacing: -0.4px; }
.rv-head .sub { margin: 6px 0 0; font-size: 16px; color: var(--text-2); line-height: 22px; }
.rv-head .close { margin-left: auto; width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); flex: none; background: none; border: 0; cursor: pointer; }
.rv-head .close .i { font-size: 22px; } .rv-head .close:hover { background: #F3F4F8; }
.rv-head .close:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.rv-name { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.rv-name .nm { font-size: 18px; color: var(--text-2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-pill { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.rv-pill .i { font-size: 15px; }
.rv-pill.pending { background: #FFF1CF; color: #8A5A00; } .rv-pill.pending .i { color: #D08A00; }
.rv-pill.approved { background: #E7F8F0; color: #0B8A5F; }
.rv-pill.needs_changes { background: #FDECEF; color: #C92F45; }
.rv-pill.new_version { background: var(--indigo-bg); color: var(--indigo); }
.rv-body { flex: 1; overflow: auto; padding: 0 20px 18px 24px; }
.rv-preview { display: block; width: 100%; height: 345px; padding: 0; border: 0; background: #0E1B3D; cursor: zoom-in; }
.rv-preview:focus-visible, .rv-src:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }
/* tabs (the MM tab language) */
.rv-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-top: 12px; }
.rv-tabs button { height: 48px; min-width: 118px; padding: 0 18px; border: 0; background: none; font: inherit; font-size: 16px; font-weight: 500; color: var(--text); cursor: pointer; position: relative; }
.rv-tabs button[aria-selected="true"] { color: var(--indigo); }
.rv-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--indigo); border-radius: 2px; }
.rv-tabs button:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; border-radius: 6px; }
.rv-panel { padding-top: 18px; }
.rv-panel[hidden] { display: none; }
.rv-panel h3 { margin: 0 0 10px; font-size: 16.5px; font-weight: 600; }
.rv-srcs { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.rv-src { width: 190px; }
.rv-src .rv-frame { height: 100px; border-radius: 8px; }
.rv-src .cap { display: block; font-size: 14px; color: var(--text-2); margin-top: 6px; }
.rv-none { font-size: 14px; color: var(--muted); margin: 0 0 20px; }
.rv-coll { border: 1px solid var(--border); border-radius: 10px; margin-top: 12px; }
.rv-coll > button { width: 100%; min-height: 50px; display: flex; align-items: center; gap: 16px; padding: 8px 20px 8px 22px; border: 0; background: none; font: inherit; color: var(--text); cursor: pointer; text-align: left; border-radius: 10px; }
.rv-coll > button:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
.rv-coll > button .ic .i { font-size: 22px; color: var(--text); }
.rv-coll .t { flex: 1; font-size: 15px; font-weight: 600; }
.rv-coll .t small { display: block; font-size: 14px; font-weight: 400; color: var(--text-2); margin-top: 3px; }
.rv-coll .chev { font-size: 20px; color: var(--text-2); transition: transform 0.15s; }
.rv-coll > button[aria-expanded="true"] .chev { transform: rotate(180deg); }
.rv-coll-body { padding: 0 20px 16px 60px; font-size: 14px; line-height: 21px; color: var(--text-2); }
.rv-coll-body[hidden] { display: none; }
.rv-prompt { margin: 0; padding: 12px 14px; background: #F6F7FA; border-radius: 8px; color: var(--text); white-space: pre-wrap; }
.rv-kv { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; margin: 10px 0 0; }
.rv-kv dt { color: var(--muted); } .rv-kv dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.rv-facts { display: grid; grid-template-columns: 170px 1fr; margin: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.rv-facts dt, .rv-facts dd { margin: 0; padding: 11px 16px; font-size: 14.5px; border-bottom: 1px solid var(--border-soft); }
.rv-facts dt { color: var(--muted); background: #FAFBFC; } .rv-facts dd { font-variant-numeric: tabular-nums; }
.rv-facts dt:nth-last-of-type(1), .rv-facts dd:nth-last-of-type(1) { border-bottom: 0; }
.rv-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; border: 0; background: none; padding: 0; color: var(--indigo); font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; }
.rv-link .i { font-size: 16px; } .rv-link:hover { text-decoration: underline; }
/* footers */
.rv-foot { display: flex; align-items: center; gap: 14px; padding: 16px 20px 22px 24px; border-top: 1px solid var(--border); }
.rv-foot .sp { flex: 1; }
.rv-foot button { height: 50px; font-size: 16px; box-shadow: none; white-space: nowrap; justify-content: center; gap: 10px; }
.rv-foot .i { font-size: 20px; }
.rv-detail .rv-foot button { flex: 1; } .rv-detail .rv-foot .rv-reject { flex: 0 0 160px; }
.rv-reject { display: inline-flex; align-items: center; border-radius: 8px; border: 1px solid #FBD5DA; background: #FDECEF; color: #D63A4E; font: inherit; font-weight: 500; cursor: pointer; }
.rv-reject:hover { background: #FBDDE2; }
.rv-foot .btn-primary:disabled { background: #E7F8F0; color: #0B8A5F; opacity: 1; cursor: default; }
.rv-change .rv-foot .btn-outline { padding: 0 20px; }
.rv-change .rv-foot .btn-primary { padding: 0 20px; }
.rv-change .rv-foot .btn-primary[aria-busy="true"] { opacity: 0.8; cursor: progress; }
.rv-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: rv-spin 0.8s linear infinite; flex: none; }
@keyframes rv-spin { to { transform: rotate(360deg); } }
/* the full image */
.rv-full { position: fixed; inset: 0; z-index: 80; background: rgba(10, 14, 28, 0.82); display: grid; place-items: center; }
.rv-full .rv-frame { width: min(86vw, 86vh); aspect-ratio: 1; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); }
.rv-full .close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 10px; border: 0; background: rgba(255,255,255,0.12); color: #fff; display: grid; place-items: center; cursor: pointer; }
.rv-full .close .i { font-size: 22px; }

/* ---- 14 · Request asset changes ---- */
.rv-cur { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px 16px; }
.rv-cur-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.rv-cur-h h3 { margin: 0; font-size: 16px; font-weight: 600; }
.rv-attached { height: 26px; padding: 0 10px; border-radius: 6px; background: #F1F3F7; color: var(--text-2); font-size: 13px; display: inline-flex; align-items: center; }
.rv-cur .rv-frame { height: 280px; border-radius: 8px; }
.rv-v { position: absolute; right: 12px; bottom: 12px; z-index: 3; height: 26px; min-width: 34px; padding: 0 9px; border-radius: 999px; background: rgba(9, 14, 30, 0.82); color: #fff; font-size: 13px; font-weight: 600; display: grid; place-items: center; }
.rv-field { margin-top: 22px; border: 0; padding: 0; min-width: 0; }
.rv-field > label, .rv-field > legend { display: block; padding: 0; font-size: 15px; font-weight: 500; margin: 0 0 10px; }
.rv-field .req { color: #D63A4E; }
.rv-field textarea { width: 100%; height: 90px; resize: vertical; border: 1px solid var(--border); border-radius: 8px; padding: 11px 13px; font: inherit; font-size: 15px; color: var(--text); display: block; }
.rv-field textarea::placeholder { color: var(--text-2); opacity: 0.85; }
.rv-field textarea:focus { outline: 0; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.rv-field textarea.is-invalid { border-color: #F0546A; }
.rv-row2 { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rv-row2 .over { color: #C92F45; }
.rv-row2 #rv-count { margin-left: auto; }
.rv-err { color: #C92F45; font-size: 13.5px; }
.rv-err:empty { display: none; }
.rv-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.rv-kc { position: relative; display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border); background: #fff; font-size: 14px; color: var(--text); cursor: pointer; }
.rv-kc input { position: absolute; left: 12px; width: 18px; height: 18px; margin: 0; opacity: 0; cursor: pointer; }
.rv-kc .bx { width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid #B9C0CE; background: #fff; display: grid; place-items: center; color: #fff; pointer-events: none; }
.rv-kc .bx .i { font-size: 13px; stroke-width: 3; visibility: hidden; }
.rv-kc:has(input:checked) { background: var(--indigo-bg); border-color: #C9D4FF; color: var(--indigo); }
.rv-kc input:checked + .bx { background: var(--indigo); border-color: var(--indigo); } .rv-kc input:checked + .bx .i { visibility: visible; }
.rv-kc input:focus-visible + .bx { outline: 2px solid var(--indigo); outline-offset: 2px; }
.rv-refs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 12px; }
.rv-ref { position: relative; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: var(--text); cursor: pointer; text-align: center; }
.rv-ref .rv-frame { height: 90px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--border); }
.rv-ref .rv-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--border); pointer-events: none; z-index: 4; }
.rv-ref.is-sel .rv-frame::after { box-shadow: inset 0 0 0 2px var(--indigo), inset 0 0 0 4px #fff; }
.rv-ref .cap { display: block; margin-top: 7px; font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-ref .tick { position: absolute; right: 7px; top: 7px; z-index: 5; width: 20px; height: 20px; border-radius: 50%; background: var(--indigo); color: #fff; display: none; place-items: center; }
.rv-ref .tick .i { font-size: 12px; stroke-width: 3; }
.rv-ref.is-sel .tick { display: grid; }
.rv-ref.is-locked { cursor: default; }
.rv-ref.is-locked .tick { background: #0E1B3D; }
.rv-ref:focus-visible { outline: none; } .rv-ref:focus-visible .rv-frame { outline: 2px solid var(--indigo); outline-offset: 2px; }
.rv-ref-w { position: relative; }
.rv-ref-w .rm { position: absolute; left: 6px; top: 6px; z-index: 5; width: 22px; height: 22px; border-radius: 6px; border: 0; background: rgba(9,14,30,0.7); color: #fff; display: grid; place-items: center; cursor: pointer; }
.rv-ref-w .rm .i { font-size: 13px; }
.rv-ref.add .box { height: 90px; border-radius: 8px; border: 1.5px dashed #C3C9D6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text); background: #fff; }
.rv-ref.add .box .i { font-size: 20px; color: var(--text-2); }
.rv-ref.add .box b { font-size: 12.5px; font-weight: 600; } .rv-ref.add .box small { font-size: 11.5px; color: var(--muted); }
.rv-ref.add:hover .box, .rv-ref.add[aria-expanded="true"] .box { border-color: var(--indigo); background: #F7F9FF; }
.rv-ref.add:focus-visible .box { outline: 2px solid var(--indigo); outline-offset: 2px; }
.rv-picker { margin-top: 10px; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(23, 27, 45, 0.12); padding: 8px; background: #fff; }
.rv-picker[hidden] { display: none; }
.rv-picker .h { font-size: 13px; color: var(--muted); padding: 4px 8px 8px; }
.rv-picker button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 6px 8px; border: 0; background: none; border-radius: 8px; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; text-align: left; }
.rv-picker button:hover, .rv-picker button:focus-visible { background: #F3F5FA; outline: none; }
.rv-picker button:disabled { opacity: 0.45; cursor: default; background: none; }
.rv-picker .rv-frame { width: 64px; height: 38px; border-radius: 6px; flex: none; }
.rv-picker .st { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.rv-strip { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; padding: 10px 14px; border-radius: 10px; background: #FDECEF; color: #B42339; font-size: 14px; }
.rv-strip .i { font-size: 18px; flex: none; }
.rv-strip[hidden] { display: none; }

/* ---- 15 · Compare asset versions ---- */
.rv-root .ct-head { padding-bottom: 10px; }
.rv-root .ct-head .sub { font-size: 17px; }
.rv-root .ct-steps { margin-bottom: 14px; }
.rv-sum { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto auto; align-items: center; column-gap: 18px; padding: 13px 22px; margin-bottom: 12px; }
.rv-sum-ic { width: 34px; height: 34px; border-radius: 8px; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; align-self: start; }
.rv-sum-ic .i { font-size: 19px; }
.rv-sum h2 { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.rv-sum p { margin: 0; font-size: 14px; color: var(--text-2); line-height: 19px; }
.rv-fact { padding: 2px 0 2px 20px; border-left: 1px solid var(--border); }
.rv-fact .k { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.rv-fact .v { font-size: 14.5px; color: var(--text); white-space: nowrap; }
.rv-state { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: 6px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.rv-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rv-state.ready { background: #E7F8F0; color: #0B8A5F; }
.rv-state.rendering { background: var(--indigo-bg); color: var(--indigo); }
.rv-state.rendering::before { width: 10px; height: 10px; background: none; border: 2px solid currentColor; border-right-color: transparent; animation: rv-spin 0.8s linear infinite; }
.rv-state.failed { background: #FDECEF; color: #C92F45; }
.rv-cmp { padding: 12px 22px 0; }
.rv-cmp-bar { display: flex; align-items: center; gap: 20px; margin-bottom: 12px; }
.rv-cmp-bar h2 { margin: 0 auto 0 0; font-size: 17px; font-weight: 700; }
.rv-zoom { display: inline-flex; align-items: stretch; height: 36px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.rv-zoom button { width: 42px; border: 0; background: #fff; color: var(--text); display: grid; place-items: center; cursor: pointer; }
.rv-zoom button:hover:not(:disabled) { background: #F3F5FA; } .rv-zoom button:disabled { color: #C3C9D6; cursor: not-allowed; }
.rv-zoom button:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
.rv-zoom .i { font-size: 18px; }
.rv-zoom output { width: 64px; display: grid; place-items: center; border-left: 1px solid var(--border); border-right: 1px solid var(--border); font-size: 14.5px; font-variant-numeric: tabular-nums; }
.rv-modes { display: inline-flex; gap: 10px; }
.rv-modes button { height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid transparent; background: #F3F4F8; font: inherit; font-size: 14.5px; color: var(--text-2); display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.rv-modes button .i { font-size: 20px; }
.rv-modes button[aria-checked="true"] { background: var(--indigo-bg); border-color: #BFCBFB; color: var(--indigo); }
.rv-modes button:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.rv-side-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.rv-side-grid[hidden], .rv-split[hidden] { display: none; }
.rv-ver { margin: 0; min-width: 0; }
.rv-view { position: relative; display: flex; overflow: auto; aspect-ratio: 2.62; border-radius: 6px; background: #EEF0F5; overscroll-behavior: contain; }
.rv-view:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.rv-canvas { position: relative; flex: none; margin: auto; width: 100%; aspect-ratio: 2.62; }
.rv-canvas > .rv-frame, .rv-layer, .rv-layer > .rv-frame { position: absolute; inset: 0; border-radius: 0; }
.rv-over { position: absolute; inset: 0; z-index: 6; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #EEF1F7; color: var(--text-2); font-size: 15px; text-align: center; padding: 16px; }
.rv-over.is-on { display: flex; }
.rv-over .big { width: 34px; height: 34px; border-width: 3px; color: var(--indigo); }
.rv-over.failed { background: #FFF6F7; color: #B42339; }
.rv-over.failed > .i { font-size: 30px; }
.rv-over .btn-outline .i { font-size: 17px; }
.rv-over .btn-outline { height: 38px; padding: 0 14px; font-size: 14.5px; gap: 8px; box-shadow: none; }
.rv-cap { display: flex; align-items: center; gap: 14px; margin-top: 11px; font-size: 14.5px; min-width: 0; }
.rv-cap b { font-weight: 600; white-space: nowrap; } .rv-cap .d { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-tag { height: 26px; padding: 0 11px; border-radius: 999px; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; white-space: nowrap; }
.rv-tag.old { background: var(--indigo-bg); color: var(--indigo); } .rv-tag.new { background: #E2F7EC; color: #0B8A5F; }
.rv-split .rv-view { aspect-ratio: 5.3; }            /* the same height and scale as one side-by-side view; the canvas is centred */
.rv-split .rv-canvas { aspect-ratio: 2.62; width: calc(50% - 9px); }
.rv-layer.new { clip-path: inset(0 0 0 50%); }
.rv-divider { position: absolute; top: 0; bottom: 0; left: 50%; z-index: 8; width: 24px; margin-left: -12px; cursor: ew-resize; touch-action: none; display: flex; justify-content: center; }
.rv-divider::before { content: ""; width: 3px; height: 100%; background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, 0.35); }
.rv-divider .knob { position: absolute; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; background: #fff; color: var(--indigo); display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
.rv-divider .knob .i { font-size: 20px; }
.rv-divider:focus { outline: none; }
.rv-divider:focus-visible .knob { outline: 2px solid var(--indigo); outline-offset: 2px; }
.rv-split-caps { display: flex; justify-content: space-between; gap: 18px; }
.rv-cmp-foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 11px 0 12px; border-top: 1px solid var(--border-soft); }
.rv-cmp-foot .sp { flex: 1; }
.rv-cmp-foot .btn-outline, .rv-cmp-foot .btn-primary { height: 42px; padding: 0 18px; font-size: 15px; box-shadow: none; white-space: nowrap; gap: 8px; }
.rv-cmp-foot .btn-primary:disabled { background: #C9D4FF; cursor: not-allowed; }
.rv-cmp-foot a.btn-outline { display: inline-flex; align-items: center; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .rv-spin, .rv-state.rendering::before { animation: none; } .rv-coll .chev { transition: none; } }
@media (max-width: 1200px) { .rv-side-grid { grid-template-columns: 1fr; } .rv-sum { grid-template-columns: 34px 1fr; row-gap: 12px; } .rv-fact { grid-column: 2; border-left: 0; padding-left: 0; } .rv-cmp-bar { flex-wrap: wrap; } }
@media (max-width: 768px) {
  .rv-drawer, .rv-drawer.rv-change { top: auto; height: 92vh; width: 100vw; border-radius: 16px 16px 0 0; }
  .rv-preview { height: 220px; } .rv-cur .rv-frame { height: 180px; }
  .rv-refs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rv-ref { width: auto; }
  .rv-foot { flex-wrap: wrap; } .rv-detail .rv-foot .rv-reject { flex: 1 1 100%; }
  .rv-cmp { padding: 12px 12px 0; } .rv-cmp-foot { flex-wrap: wrap; } .rv-cmp-foot .sp { display: none; } .rv-cmp-foot > * { flex: 1; justify-content: center; }
}
/* the build: stored images inside the drawn frames (the prototype painted SVG drawings) */
.rv-frame > .cp-art.cg2-img { cursor: inherit; box-shadow: none; }
.rv-frame > .cp-art.rv-contain img { object-fit: contain; }
.rv-preview { background: #EEF0F5; }
.rv-src .rv-frame > .cp-art.cg2-img.cg2-logo img, .rv-ref .rv-frame > .cp-art.cg2-img.cg2-logo img, .rv-picker .cp-art.cg2-img.cg2-logo img { padding: 6px; }
.rv-full .rv-full-img { display: block; max-width: 90vw; max-height: 86vh; border-radius: 12px; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); }
a.rv-pill { text-decoration: none; } a.rv-pill:hover { text-decoration: underline; }
a.rv-pill:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.rw-newv { align-self: flex-start; margin-top: 6px; height: 24px; font-size: 12.5px; padding: 0 10px; }
.rw-newv .i { font-size: 13px; }
/* compare: the canvas keeps the asset's own ratio, asset-compare.js sizes it (fit × zoom) and the split view's height */
.rv-cmp .rv-canvas { aspect-ratio: var(--rv-ar, 2.62); }
.rv-cmp .rv-canvas img { user-select: none; -webkit-user-drag: none; }
.rv-cmp .rv-canvas > .rv-frame > .cp-art, .rv-layer > .rv-frame > .cp-art { border-radius: 0; }
.rv-cmp .rv-view { aspect-ratio: var(--rv-view-ar, 2.62); }
.rv-cmp .rv-split .rv-view { aspect-ratio: auto; }
.rv-cmp-foot .rw-ro-note { margin: 0; font-size: 13.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.rv-state.none { background: #F1F3F7; color: var(--text-2); }

/* ---------- Content-17 · Content Studio (st2-) — Content module, plan plans/Content-17.md ---------- */
.st2-root { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-mid: #193F94; --cg-tint: #F1F5F9; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter"; }
/* the head: title block left, "Brand" + the select + the "Brand ready" pill right */
.st2-head { padding-bottom: 14px; }
.st2-brand { margin-left: auto; flex: none; display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.st2-brand .lbl { font-size: 14.5px; color: var(--text-2); }
.st2-select { width: 236px; height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 14px 0 8px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; box-shadow: 0 1px 2px rgba(23, 27, 45, 0.04); }
.st2-select:hover { border-color: #CBD2E1; } .st2-select:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.st2-select .cg-mark { width: 32px; height: 32px; border-radius: 7px; font-size: 13.5px; }
.st2-select .n { flex: 1; text-align: left; font-size: 17px; font-weight: 600; letter-spacing: -0.2px; }
.st2-select .i { font-size: 18px; color: var(--text-2); }
.st2-ready { display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 16px 0 13px; border-radius: 9px; background: var(--green-bg); color: var(--green-text); font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.st2-ready .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--green); }
.st2-ready.is-amber { background: var(--amber-bg); color: var(--amber-text); } .st2-ready.is-amber .dot { background: var(--amber); }
.st2-root .ct-subnav { margin-bottom: 18px; }
.st2-root .ct-subnav .ct-subitem { padding: 0 26px; } .st2-root .ct-subnav .ct-subitem:first-child { padding: 0 28px; }
/* two columns: the work at the left, activity and accounts at the right */
.st2-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
.st2-main, .st2-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* the launch row: two cards, text left, the pack preview right */
.st2-launch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.st2-card-go { position: relative; display: flex; gap: 16px; height: 200px; padding: 11px 14px 11px 16px; border-radius: 12px; border: 4px solid #fff; background: linear-gradient(115deg, #EEF3FF 0%, #F3F6FE 55%, #F6F8FD 100%); box-shadow: var(--shadow-card), 0 0 0 1px var(--border); min-width: 0; }
.st2-go-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.st2-go-ic { width: 40px; height: 40px; border-radius: 9px; background: #DFE7FB; color: var(--indigo); display: grid; place-items: center; flex: none; }
.st2-go-ic .i { font-size: 23px; stroke-width: 1.7; }
.st2-card-go h2 { margin: 11px 0 5px; font-size: 20px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.2; }
.st2-card-go p { margin: 0; font-size: 14px; line-height: 17px; color: var(--text-2); }
.st2-go { flex: none; margin-top: 15px; height: 38px; padding: 0 17px; font-size: 14.5px; font-weight: 500; gap: 10px; border-radius: 7px; }
.st2-go .i { font-size: 17px; }
.st2-prev { position: relative; margin: 0; width: 198px; height: 164px; flex: none; border-radius: 8px; align-self: center; }
.st2-prev .cp-art { cursor: default; border-radius: 8px; }
.st2-lock { left: 14px; top: 14px; } .st2-prev .st2-lock .cg-mark { width: 28px; height: 28px; font-size: 11.5px; border-radius: 6px; }
.cp-h.st2-hl { left: 18px; right: 12px; top: 58px; bottom: auto; font-size: 20.5px; line-height: 1.12; letter-spacing: -0.4px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; overflow-wrap: anywhere; }
.cp-h.st2-hl em { color: #8DB0FF; }
/* the counter strip: three equal cells split by 1 px rules */
.st2-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: 74px; padding: 0; overflow: hidden; }
.st2-count { display: flex; align-items: center; gap: 16px; padding: 0 22px 0 18px; border: 0; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; min-width: 0; }
.st2-count + .st2-count { border-left: 1px solid var(--border-soft); }
.st2-count:hover { background: #FAFBFE; } .st2-count:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
.st2-count .ic { width: 44px; height: 44px; border-radius: 50%; background: #EEF2FC; color: var(--indigo); display: grid; place-items: center; flex: none; }
.st2-count .ic .i { font-size: 21px; stroke-width: 1.7; }
.st2-count.amber .ic { background: #FEF4E2; color: var(--amber); }
.st2-count .t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.st2-count .t b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.st2-count .t span { font-size: 16px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st2-count > .i { font-size: 17px; color: var(--muted); }
/* card heads */
.st2-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.st2-card-head h2 { margin: 0; flex: 1; font-size: 16.5px; font-weight: 700; letter-spacing: -0.2px; }
.st2-card-head > .i { font-size: 21px; color: var(--text-2); }
.st2-all { font-size: 14px; font-weight: 500; color: var(--indigo); }
.st2-all:hover { text-decoration: underline; }
/* latest content: four cards */
.st2-latest { padding: 14px 16px 16px; }
.st2-latest .st2-card-head { margin: 0 0 12px 1px; }
.st2-items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.st2-item { position: relative; border: 1px solid var(--border); border-radius: 9px; padding: 2px; background: var(--surface); box-shadow: 0 1px 2px rgba(23, 27, 45, 0.04); min-width: 0; }
.st2-cover { position: relative; margin: 0; height: 108px; border-radius: 6px; }
.st2-cover .cp-art { cursor: default; border-radius: 6px; }
.st2-cover .cp-h.md { font-size: 17px; left: 16px; bottom: 14px; }
.st2-cover .cp-lock { left: 16px; top: 12px; } .st2-cover .cp-lock .cg-mark { width: 22px; height: 22px; font-size: 9px; }
.st2-item-meta { display: flex; align-items: center; gap: 8px; padding: 10px 8px 0 8px; }
.st2-fmt { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); white-space: nowrap; }
.st2-fmt .i { font-size: 16px; color: var(--text-2); }
.st2-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.st2-pill.is-draft { background: #F1F3F7; color: var(--text-2); }
.st2-pill.is-generating { background: var(--indigo-bg); color: var(--indigo); }
.st2-pill.is-pending-review { background: #FEF3D8; color: #B7700B; }
.st2-pill.is-approved { background: var(--green-bg); color: var(--green-text); }
.st2-spin { width: 11px; height: 11px; border-radius: 50%; border: 2px solid rgba(59, 91, 253, 0.25); border-top-color: var(--indigo); animation: st2-spin 0.9s linear infinite; }
@keyframes st2-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .st2-spin { animation: none; border-style: dotted; } }
.st2-item-foot { padding: 8px 4px 6px 8px; }
.st2-item-row { display: flex; align-items: center; gap: 6px; margin-top: 1px; }
.st2-item h3 { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st2-item .d { flex: 1; min-width: 0; font-size: 13px; color: var(--muted); }
.st2-dots { width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--text-2); display: grid; place-items: center; cursor: pointer; flex: none; }
.st2-dots:hover, .st2-dots[aria-expanded="true"] { background: #F1F3F8; color: var(--text); }
.st2-dots .i { font-size: 18px; }
.st2-menu { position: absolute; right: 6px; bottom: 38px; z-index: 20; min-width: 150px; padding: 5px; border-radius: 9px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 10px 28px rgba(23, 27, 45, 0.14); }
.st2-menu button { display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; text-align: left; }
.st2-menu button:hover, .st2-menu button:focus-visible { background: var(--indigo-bg-2); outline: none; }
.st2-menu button .i { font-size: 16px; color: var(--text-2); }
.st2-latest .es.compact { padding: 26px 8px 20px; }
/* the right column: current activity + connected accounts */
.st2-box { padding: 15px 17px 12px; }
.st2-box .st2-card-head { padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--border-soft); }
.st2-acts { list-style: none; margin: 0; padding: 0; }
.st2-act { position: relative; display: flex; gap: 20px; min-height: 64px; padding: 2px 0 0 4px; }
.st2-act .dot { position: relative; z-index: 1; width: 9px; height: 9px; border-radius: 50%; background: #9CA3AF; margin-top: 7px; flex: none; box-shadow: 0 0 0 3px var(--surface); }
.st2-act.is-indigo .dot { background: var(--indigo); } .st2-act.is-blue .dot { background: #3B82F6; }
.st2-act:not(:last-child)::before { content: ""; position: absolute; left: 8px; top: 12px; bottom: -6px; width: 1px; background: var(--border-soft); }
.st2-act .ev { font-size: 14px; font-weight: 500; color: var(--text); line-height: 18px; }
.st2-act .sj, .st2-act .ago { font-size: 13px; color: var(--muted); line-height: 17px; }
.st2-act-empty { padding: 10px 4px 8px; font-size: 14px; color: var(--muted); }
.st2-accs { list-style: none; margin: 0; padding: 0; }
.st2-acc { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 0 0 1px; }
.st2-pf { width: 28px; height: 28px; flex: none; display: block; }
.st2-acc .nm { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; color: var(--text); }
.st2-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.st2-state .dot { width: 7px; height: 7px; border-radius: 50%; background: #B8BDC9; }
.st2-connect { height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--indigo); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.st2-connect:hover { border-color: var(--indigo); background: var(--indigo-bg-2); }
/* read-only: no launch buttons, the cards keep their text and previews */
.st2-root.is-readonly .st2-go { display: none; }
.st2-ro { margin-top: 18px; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
.st2-ro .i { font-size: 15px; }
@media (max-width: 1200px) { .st2-grid { grid-template-columns: 1fr; } .st2-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .st2-prev { width: 150px; height: 140px; } .cp-h.st2-hl { font-size: 17px; top: 48px; } }
@media (max-width: 768px) {
  .st2-brand { margin: 0; width: 100%; flex-wrap: wrap; } .st2-select { flex: 1; min-width: 0; width: auto; }
  .st2-launch { grid-template-columns: 1fr; } .st2-card-go { height: auto; min-height: 190px; }
  .st2-counts { grid-template-columns: 1fr; height: auto; } .st2-count { height: 64px; } .st2-count + .st2-count { border-left: 0; border-top: 1px solid var(--border-soft); }
  .st2-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .st2-side { grid-template-columns: 1fr; }
  .st2-item-meta { flex-wrap: wrap; row-gap: 6px; } .st2-fmt { flex: 1 0 auto; }
}
/* production: a real pack image under the preview headline gets a scrim; the logo asset keeps its white / dark tile */
.st2-photo .st2-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(4, 12, 40, 0.18) 0%, rgba(4, 12, 40, 0.5) 55%, rgba(4, 12, 40, 0.72) 100%); }
.st2-photo .cp-h.st2-hl { color: #fff; text-shadow: 0 1px 8px rgba(4, 12, 40, 0.45); }
.st2-lock .cg-mark.asset, .st2-select .cg-mark.asset, .st2-cover .cp-lock .cg-mark.asset { padding: 3px; }
.st2-state.is-on { color: var(--green-text); } .st2-state.is-on .dot { background: var(--green); }
/* Content-16's "Open Content Studio" is a link to the Studio now: the same size as the pack buttons */
.rd2-acts a.btn-primary { height: 44px; justify-content: center; font-size: 15px; font-weight: 600; gap: 10px; text-decoration: none; }
@media (max-width: 1280px) { .rd2-acts a.btn-primary { flex: 1; } }
@media (max-width: 768px) { .rd2-acts a.btn-primary { flex: none; width: 100%; } }

/* ---------- Content-18 · Select a brand (bs-) — the brand-selector drawer over the Content Studio, plan plans/Content-18.md ---------- */
.bs-backdrop { position: fixed; inset: 0; background: rgba(23, 27, 45, 0.36); z-index: 62; }
.bs-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 521px; max-width: 100vw; background: var(--surface); box-shadow: -12px 0 40px rgba(23, 27, 45, 0.18); display: flex; flex-direction: column; z-index: 63; }
.bs-drawer:focus { outline: none; }
.bs-head { display: flex; align-items: flex-start; gap: 16px; padding: 30px 16px 0 32px; }
.bs-head h2 { margin: 0; font-size: 27px; font-weight: 800; letter-spacing: -0.4px; line-height: 32px; }
.bs-head p { margin: 5px 0 0; font-size: 16.5px; line-height: 22px; color: var(--text-2); }
.bs-head .close { margin-left: auto; margin-top: -9px; width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); flex: none; background: none; border: 0; cursor: pointer; }
.bs-head .close .i { font-size: 24px; } .bs-head .close:hover { background: #F3F4F8; }
.bs-head .close:focus-visible, .bs-card:focus-visible, .bs-add:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.bs-search { position: relative; margin: 29px 29px 0 32px; }
.bs-search .i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--muted); pointer-events: none; }
.bs-search input { width: 100%; height: 45px; padding: 0 14px 0 46px; border: 1px solid #DCE0E9; border-radius: 9px; font: inherit; font-size: 16px; color: var(--text); background: var(--surface); }
.bs-search input::placeholder { color: var(--muted); }
.bs-search input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.14); }
.bs-body { flex: 1; overflow: auto; padding: 22px 29px 24px 32px; }
.bs-list { display: flex; flex-direction: column; gap: 20px; }
.bs-card { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); column-gap: 16px; align-items: start; min-height: 147px; padding: 18px 18px 16px 17px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; text-align: left; box-shadow: 0 1px 2px rgba(23, 27, 45, 0.03); }
.bs-card:hover { border-color: #C9D0E0; }
.bs-card.is-on { border: 2px solid var(--indigo); background: #F5F7FF; padding: 17px 17px 15px 16px; }
.bs-tile { width: 58px; height: 58px; border-radius: 10px; display: grid; place-items: center; font-size: 25px; font-weight: 700; letter-spacing: -0.3px; }
.bs-main { min-width: 0; }
.bs-name { display: flex; align-items: center; gap: 12px; min-height: 30px; padding-right: 34px; }
.bs-name b { font-size: 19.5px; font-weight: 800; letter-spacing: -0.3px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-pill { flex: none; height: 24px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 7px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.bs-pill.is-ready { background: var(--green-bg); color: var(--green-text); }
.bs-pill.is-setup { background: #FDEFD8; color: #B26A0F; }
.bs-desc { margin: 8px 0 0; padding-right: 14px; font-size: 14px; line-height: 20px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bs-date { margin-top: 11px; display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--muted); }
.bs-date .i { font-size: 18px; margin-left: 1px; }
.bs-radio { position: absolute; right: 18px; top: 21px; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid #9EA5B5; background: var(--surface); display: grid; place-items: center; }
.bs-card.is-on .bs-radio { border: 0; background: none; color: var(--indigo); right: 17px; top: 20px; }
.bs-card.is-on .bs-radio .i { width: 24px; height: 24px; font-size: 24px; }
.bs-card .bs-radio .i { display: none; } .bs-card.is-on .bs-radio .i { display: block; }
.bs-card mark { background: #FFF1B8; color: inherit; border-radius: 2px; }
.bs-add { margin-top: 25px; width: 100%; min-height: 97px; display: flex; align-items: center; gap: 18px; padding: 0 20px; border: 1.5px dashed #C9CFDC; border-radius: 12px; background: var(--surface); font: inherit; text-align: left; cursor: pointer; }
.bs-add:hover { border-color: var(--indigo); background: #FAFBFF; }
.bs-add .plus { width: 54px; height: 54px; border-radius: 50%; background: #F1F4FD; color: var(--indigo); display: grid; place-items: center; flex: none; }
.bs-add .plus .i { font-size: 26px; stroke-width: 1.6; }
.bs-add b { display: block; font-size: 16px; font-weight: 600; color: var(--indigo); }
.bs-add span.s { display: block; margin-top: 3px; font-size: 13.5px; color: var(--muted); }
.bs-add[aria-disabled="true"] { cursor: not-allowed; opacity: .6; }
.bs-none { padding: 26px 8px; text-align: center; font-size: 15px; color: var(--muted); }
.bs-note { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px; padding: 11px 14px; border-radius: 9px; background: var(--indigo-bg-2); color: var(--text-2); font-size: 14px; line-height: 20px; }
.bs-note .i { font-size: 18px; color: var(--indigo); flex: none; margin-top: 1px; }
.bs-drawer.is-readonly .bs-card { cursor: default; } .bs-drawer.is-readonly .bs-name { padding-right: 0; }
.bs-drawer.is-readonly .bs-card:hover { border-color: var(--border); }
.bs-drawer.is-readonly .bs-card.is-on:hover { border-color: var(--indigo); }
.bs-cur { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--indigo-bg); color: var(--indigo); font-size: 12.5px; font-weight: 600; margin-left: auto; }
.bs-foot { display: flex; gap: 19px; padding: 16px 29px 35px 32px; border-top: 1px solid var(--border-soft); }
.bs-foot button { flex: 1; height: 48px; justify-content: center; font-size: 16px; font-weight: 600; box-shadow: none; border-radius: 8px; white-space: nowrap; }
.bs-foot .btn-outline { display: inline-flex; align-items: center; border: 1px solid #D5DAE4; }
.bs-foot .btn-primary { background: #1D4FF2; } .bs-foot .btn-primary:hover { background: #1843D6; }
.bs-foot .btn-primary:disabled { background: #C9D4FF; cursor: not-allowed; }
.bs-foot .btn-primary.is-pending:disabled { background: #1D4FF2; opacity: .85; cursor: progress; }
.bs-drawer.is-busy .bs-card, .bs-drawer.is-busy .bs-add { pointer-events: none; opacity: .7; }
.st2-select[aria-expanded="true"] { border-color: var(--indigo); }
@media (max-width: 1200px) { .bs-drawer { width: 480px; } }
@media (max-width: 768px) {
  .bs-drawer { top: auto; width: 100%; height: 92vh; border-radius: 16px 16px 0 0; }
  .bs-head { padding: 22px 16px 0 16px; } .bs-head h2 { font-size: 23px; } .bs-search { margin: 16px 16px 0; } .bs-body { padding: 18px 16px; }
  .bs-list { gap: 14px; } .bs-card { grid-template-columns: 46px minmax(0, 1fr); column-gap: 12px; min-height: 0; }
  .bs-tile { width: 46px; height: 46px; font-size: 19px; } .bs-name { flex-wrap: wrap; row-gap: 4px; gap: 8px; }
  .bs-foot { padding: 14px 16px 18px; gap: 12px; }
}
/* Content-18 production additions: the logo tile, the empty description, the loading skeleton */
.bs-tile.asset { background: #FFFFFF; border: 1px solid var(--border); padding: 6px; overflow: hidden; }
.bs-tile.asset.dark { background: color-mix(in srgb, var(--bs-primary, #16213B) 55%, #0B1020); border-color: transparent; }
.bs-tile img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bs-nodesc { color: var(--muted); }
.bs-skel { display: flex; flex-direction: column; gap: 20px; }
.bs-skel .bs-card { cursor: default; } .bs-skel .ld-block { width: 58px; height: 58px; border-radius: 10px; }
.bs-skel .lines { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }
.bs-body .er-inline { margin-bottom: 14px; }

/* ---------- Content-19 · Content library (lb-) — Content module, plan plans/Content-19.md ---------- */
.lb-root { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-mid: #193F94; --cg-tint: #F1F5F9; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter"; }
/* the head: title block left, "New content" right */
.lb-head { padding-bottom: 14px; }
.lb-new { margin-left: auto; flex: none; margin-top: 2px; height: 44px; padding: 0 22px 0 18px; font-size: 16px; font-weight: 500; gap: 12px; border-radius: 8px; }
.lb-new .i { font-size: 19px; }
/* the inner navigation with the view switch at its right end */
.lb-subnav { margin-bottom: 12px; height: 50px; padding: 0 8px 0 10px; }
.lb-subnav .ct-subitem { padding: 0 26px; }
.lb-views { margin-left: auto; align-self: center; display: flex; gap: 6px; }
.lb-view { width: 38px; height: 36px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--text-2); display: grid; place-items: center; cursor: pointer; }
.lb-view .i { font-size: 20px; }
.lb-view:hover { background: #F4F6FA; color: var(--text); }
.lb-view.is-on { border-color: #B9C6FF; background: var(--indigo-bg); color: var(--indigo); }
.lb-view:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
/* one card: the filter bar, the selection bar and the cards */
.lb-card { padding: 12px 12px 14px; }
.lb-filters { display: flex; align-items: center; gap: 12px; padding: 1px 0 12px; }
.lb-search { flex: 1 1 220px; min-width: 180px; max-width: 300px; height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.lb-search:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.14); }
.lb-search .i { font-size: 17px; color: var(--muted); flex: none; }
.lb-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; color: var(--text); }
.lb-search input::placeholder { color: var(--muted-2); }
.lb-fgroup { display: flex; align-items: center; gap: 8px; flex: none; }
.lb-fgroup + .lb-fgroup { padding-left: 12px; border-left: 1px solid var(--border-soft); }
.lb-type { margin-left: 4px; }
.lb-flbl { font-size: 14.5px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.lb-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: #F3F5F9; }
.lb-seg button { height: 32px; display: inline-flex; align-items: center; gap: 8px; padding: 0 10px 0 12px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 14px; font-weight: 500; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.lb-seg button:hover { color: var(--text); }
.lb-seg button[aria-checked="true"] { background: var(--indigo); color: #fff; box-shadow: 0 2px 6px rgba(59, 91, 253, 0.28); }
.lb-seg button:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.lb-seg .n { min-width: 24px; height: 20px; padding: 0 6px; border-radius: 999px; background: #E3E7EF; color: var(--text-2); font-size: 12px; font-weight: 600; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.lb-seg button[aria-checked="true"] .n { background: rgba(255, 255, 255, 0.22); color: #fff; }
.lb-sel { position: relative; display: inline-flex; }
.lb-sel select { appearance: none; -webkit-appearance: none; height: 36px; padding: 0 32px 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 13.5px; color: var(--text); cursor: pointer; max-width: 170px; box-sizing: border-box; }
.lb-sel select:hover { border-color: #CBD2E1; }
.lb-sel select:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.lb-sel select.is-set { border-color: #B9C6FF; background: var(--indigo-bg-2); color: var(--indigo); font-weight: 500; }
.lb-sel .i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 15px; color: var(--text-2); pointer-events: none; }
/* the selection bar */
.lb-selbar { display: flex; align-items: center; gap: 10px; height: 52px; padding: 6px 4px 6px 4px; border-top: 1px solid var(--border-soft); }
.lb-selall { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px 0 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14.5px; font-weight: 500; color: var(--text); cursor: pointer; white-space: nowrap; }
.lb-selall input, .lb-check input { position: absolute; z-index: 1; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.lb-selall input { left: 12px; top: 8px; }
.lb-selall .box, .lb-check .box { width: 22px; height: 22px; border-radius: 5px; border: 1.5px solid #B8C0D0; background: var(--surface); display: grid; place-items: center; color: #fff; flex: none; }
.lb-selall .box .i, .lb-check .box .i { font-size: 15px; stroke-width: 3; opacity: 0; }
.lb-selall input:checked + .box, .lb-check input:checked + .box { background: var(--indigo); border-color: var(--indigo); }
.lb-selall input:checked + .box .i, .lb-check input:checked + .box .i { opacity: 1; }
.lb-selall input:indeterminate + .box { background: var(--indigo); border-color: var(--indigo); }
.lb-selall input:indeterminate + .box::after { content: ""; width: 10px; height: 2px; border-radius: 1px; background: #fff; }
.lb-selall input:focus-visible + .box, .lb-check input:focus-visible + .box { outline: 2px solid var(--indigo); outline-offset: 2px; }
.lb-btn { height: 40px; display: inline-flex; align-items: center; gap: 9px; padding: 0 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 14.5px; font-weight: 500; color: var(--text); cursor: pointer; white-space: nowrap; }
.lb-btn:hover { background: #F8F9FC; border-color: #CBD2E1; }
.lb-btn .i { font-size: 17px; color: var(--text-2); }
.lb-clear { margin-left: auto; height: 36px; padding: 0 6px; border: 0; background: none; font: inherit; font-size: 14.5px; font-weight: 500; color: var(--indigo); cursor: pointer; }
.lb-clear:hover { text-decoration: underline; }
.lb-selbar[hidden] { display: none; }
.lb-selbar:not(.has-sel) .lb-btn, .lb-selbar:not(.has-sel) .lb-clear { display: none; }
.lb-selbar:not(.has-sel) .lb-selall { color: var(--text-2); }
/* the grid of cards */
.lb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 18px; padding: 2px 2px 0; }
.lb-item { position: relative; border: 1px solid var(--border); border-radius: 12px; padding: 4px; background: var(--surface); box-shadow: 0 1px 2px rgba(23, 27, 45, 0.04); min-width: 0; transition: border-color 0.12s, box-shadow 0.12s; }
.lb-item:hover { border-color: #CFD6E4; box-shadow: 0 4px 14px rgba(23, 27, 45, 0.07); }
.lb-item.is-sel { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo); }
.lb-item.is-archived .lb-cover .cp-art { filter: grayscale(0.7); opacity: 0.8; }
.lb-cover { position: relative; margin: 0; height: 120px; border-radius: 9px; }
.lb-cover .cp-art { cursor: default; border-radius: 9px; box-shadow: none; }
.lb-hl { position: absolute; z-index: 2; left: 7%; top: 50%; transform: translateY(-50%); font-size: 23px; font-weight: 700; line-height: 1.08; letter-spacing: -0.5px; color: #fff; text-shadow: 0 1px 8px rgba(4, 12, 40, 0.25); }
.lb-hl em { font-style: normal; color: #7FA8FF; }
.lb-hl.is-right { left: auto; right: 5%; }
.lb-hl.on-light { color: var(--cg-dark); text-shadow: none; } .lb-hl.on-light em { color: var(--cg-primary); }
.lb-brandlock { position: absolute; z-index: 2; inset: 0; display: grid; grid-template-columns: auto auto; justify-content: center; align-content: center; column-gap: 14px; row-gap: 8px; }
.lb-brandlock .cg-mark { width: 52px; height: 52px; border-radius: 10px; font-size: 23px; background: #2563EB; grid-row: span 1; }
.lb-brandlock .nm { align-self: center; font-size: 27px; font-weight: 700; letter-spacing: -0.5px; color: #fff; }
.lb-brandlock .tg { grid-column: 1 / -1; text-align: center; font-size: 11.5px; color: #DCE5FF; letter-spacing: 0.1px; }
.lb-dur { position: absolute; z-index: 3; right: 10px; bottom: 10px; height: 24px; padding: 0 8px; border-radius: 6px; background: rgba(9, 14, 30, 0.72); color: #fff; font-size: 12.5px; font-weight: 600; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.lb-tl { position: absolute; z-index: 3; left: 9px; top: 9px; display: flex; align-items: center; gap: 0; }
.lb-check { position: relative; display: inline-flex; width: 0; height: 28px; overflow: hidden; opacity: 0; transition: width 0.12s, opacity 0.12s, margin 0.12s; flex: none; }
.lb-check input { left: 3px; top: 3px; }
.lb-check .box { margin: 3px; border-color: #fff; background: rgba(255, 255, 255, 0.92); box-shadow: 0 1px 4px rgba(4, 12, 40, 0.25); }
.lb-item:hover .lb-check, .lb-item:focus-within .lb-check, .lb-item.is-sel .lb-check { width: 28px; opacity: 1; margin-right: 8px; }
.lb-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500; white-space: nowrap; box-shadow: 0 1px 3px rgba(4, 12, 40, 0.12); }
.lb-pill.is-draft { background: #fff; color: var(--text-2); }
.lb-pill.is-generating { background: var(--indigo-bg); color: var(--indigo); }
.lb-pill.is-pending-review { background: #FCE7A6; color: #7A5200; }
.lb-pill.is-approved { background: #DDF6EA; color: var(--green-text); }
.lb-pill.is-archived { background: #fff; color: var(--muted); box-shadow: inset 0 0 0 1px #C9CFDB; }
.lb-spin { width: 11px; height: 11px; border-radius: 50%; border: 2px solid rgba(59, 91, 253, 0.25); border-top-color: var(--indigo); animation: lb-spin 0.9s linear infinite; }
@keyframes lb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lb-spin { animation: none; border-style: dotted; } .lb-check { transition: none; } }
.lb-dots { position: absolute; z-index: 3; right: 8px; top: 8px; width: 30px; height: 30px; border: 0; border-radius: 7px; background: rgba(255, 255, 255, 0.94); color: var(--text); display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 4px rgba(4, 12, 40, 0.2); }
.lb-dots:hover, .lb-dots[aria-expanded="true"] { background: #fff; color: var(--indigo); }
.lb-dots:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.lb-dots .i { font-size: 18px; }
.lb-ibody { padding: 10px 10px 4px 10px; }
.lb-ibody h3 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -0.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-open { padding: 0; border: 0; background: none; font: inherit; color: var(--text); cursor: pointer; text-align: left; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.lb-open:hover { color: var(--indigo); } .lb-open:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 3px; }
.lb-ibody p { margin: 3px 0 0; font-size: 14px; line-height: 1.35; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-meta { display: flex; align-items: center; gap: 12px; height: 34px; margin-top: 3px; }
.lb-pf { width: 20px; height: 20px; flex: none; display: block; }
.lb-ratio { height: 24px; padding: 0 12px; border-radius: 7px; background: #F1F3F7; color: var(--text-2); font-size: 13px; font-weight: 500; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.lb-date { margin-left: auto; font-size: 14px; color: var(--muted); white-space: nowrap; }
/* the list view */
.lb-vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lb-tablewrap { position: relative; overflow-x: auto; margin: 0 -2px; }
.lb-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lb-table th { height: 40px; padding: 0 10px; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; border-bottom: 1px solid var(--border); background: #FAFBFD; }
.lb-table td { height: 62px; padding: 6px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; color: var(--text-2); white-space: nowrap; }
.lb-table tr:last-child td { border-bottom: 0; }
.lb-table tbody tr:hover td { background: #FAFBFE; }
.lb-table tr.is-sel td { background: var(--indigo-bg-2); }
.lb-table .c-box { width: 40px; padding-right: 0; }
.lb-table .c-box .lb-check { width: 28px; opacity: 1; }
.lb-table .c-box .lb-check .box { border-color: #B8C0D0; box-shadow: none; background: var(--surface); }
.lb-table .c-box .lb-check input:checked + .box { background: var(--indigo); border-color: var(--indigo); }
.lb-thumb { position: relative; width: 76px; height: 44px; border-radius: 6px; overflow: hidden; }
.lb-thumb .cp-art { border-radius: 6px; cursor: default; box-shadow: none; }
.lb-thumb .lb-brandlock .cg-mark { width: 20px; height: 20px; font-size: 9px; border-radius: 4px; } .lb-thumb .lb-brandlock .nm, .lb-thumb .lb-brandlock .tg { display: none; }
.lb-table .c-title { white-space: normal; min-width: 220px; }
.lb-table .c-title .lb-open { font-weight: 600; font-size: 14.5px; }
.lb-table .c-title .s { font-size: 13px; color: var(--muted); margin-top: 2px; }
.lb-table .lb-pill { box-shadow: none; }
.lb-table .lb-pill.is-draft { background: #F1F3F7; }
.lb-table .pfs { display: flex; gap: 6px; }
.lb-table .c-act { width: 44px; text-align: right; }
.lb-table .lb-dots { position: static; box-shadow: none; background: none; color: var(--text-2); }
.lb-table .lb-dots:hover, .lb-table .lb-dots[aria-expanded="true"] { background: #F1F3F8; }
/* the menus (card ⋮ and "New content"), fixed to their button */
.lb-menu { position: fixed; z-index: 60; min-width: 170px; padding: 5px; border-radius: 9px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 10px 28px rgba(23, 27, 45, 0.14); }
.lb-menu button { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; text-align: left; white-space: nowrap; }
.lb-menu button:hover, .lb-menu button:focus-visible { background: var(--indigo-bg-2); outline: none; }
.lb-menu button .i { font-size: 17px; color: var(--text-2); }
/* the footer: "Showing a–b of n" and the pager */
.lb-foot { display: flex; align-items: center; gap: 16px; padding: 16px 2px 8px; }
.lb-foot[hidden] { display: none; }
#lb-showing { font-size: 15px; color: var(--text-2); }
.lb-pager { margin-left: auto; display: flex; gap: 8px; }
.lb-pager button { min-width: 36px; height: 36px; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 14.5px; font-weight: 500; color: var(--text); cursor: pointer; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.lb-pager button:hover:not(:disabled) { border-color: #CBD2E1; background: #F8F9FC; }
.lb-pager button[aria-current="page"] { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.lb-pager button:disabled { color: #C2C7D3; cursor: default; }
.lb-pager button .i { font-size: 17px; }
.lb-pager button:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
/* empty library (Content-85) and no results (Content-86) */
.lb-card .es { padding: 60px 24px 64px; }
.lb-card .es .il { width: 132px; height: 132px; margin-bottom: 20px; }
.lb-card .es h3 { font-size: 22px; }
.lb-card .es p { font-size: 16px; }
.lb-card .es .acts .btn-primary, .lb-card .es .acts .btn-outline { height: 44px; font-size: 15.5px; padding: 0 20px; }
.lb-root.is-empty .lb-filters, .lb-root.is-empty .lb-selbar { display: none; }
/* read-only: no boxes, no bar, no New content */
.lb-root.is-readonly .lb-new, .lb-root.is-readonly .lb-selbar, .lb-root.is-readonly .lb-check, .lb-root.is-readonly .c-box { display: none; }
.lb-root.is-readonly .lb-selbar + .lb-body, .lb-root.is-empty .lb-body { padding-top: 2px; }
.lb-ro { margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--muted); }
.lb-ro .i { font-size: 16px; }
@media (max-width: 1399px) { .lb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lb-filters { flex-wrap: wrap; } .lb-search { flex-basis: 100%; max-width: none; } .lb-type { margin-left: 0; } }
@media (max-width: 899px) { .lb-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
  .lb-head { flex-wrap: wrap; } .lb-new { margin: 4px 0 0; }
  .lb-subnav { overflow-x: auto; height: 48px; } .lb-subnav .ct-subitem { padding: 0 12px; } .lb-views { padding-left: 8px; }
  .lb-filters { gap: 10px; } .lb-fgroup { flex-wrap: wrap; } .lb-fgroup + .lb-fgroup { padding-left: 0; border-left: 0; }
  .lb-type { width: 100%; } .lb-seg { flex: 1; } .lb-seg button { flex: 1; justify-content: center; padding: 0 6px; }
  .lb-filters > .lb-fgroup:not(.lb-type) { flex: 1 1 calc(50% - 10px); min-width: 0; flex-direction: column; align-items: stretch; gap: 4px; }
  .lb-sel, .lb-sel select { width: 100%; max-width: none; }
  .lb-selbar { flex-wrap: wrap; height: auto; } .lb-clear { margin-left: 0; }
  .lb-foot { flex-wrap: wrap; } .lb-pager { margin-left: 0; }
}
/* Content-19 build additions: the Studio counters are links now, the card skeleton while the fragment loads, the load-error strip */
a.st2-count { text-decoration: none; }
.lb-skel .lb-item { pointer-events: none; }
.lb-skel .lb-cover { background: #EEF1F6; }
.lb-skel .lb-ibody { display: flex; flex-direction: column; gap: 10px; padding: 14px 10px 12px; }
.lb-body > .er-inline { margin: 8px 2px; }
.lb-body.is-busy { min-height: 240px; }

/* ---------- Content-20 · Saved workflows (wf-) — Content module, plan plans/Content-20.md ---------- */
.wf-root { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-mid: #193F94; --cg-tint: #F1F5F9; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter"; }
/* the head: title block left, "New workflow" right */
.wf-head { padding-bottom: 20px; }
.wf-head .sub { margin-top: 4px; }
.wf-new { margin-left: auto; flex: none; margin-top: 12px; height: 46px; padding: 0 24px 0 20px; font-size: 17px; font-weight: 500; gap: 12px; border-radius: 8px; }
.wf-new .i { font-size: 20px; }
.wf-ro { margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--muted); }
.wf-ro .i { font-size: 16px; }
/* two columns: the table card and the summary card */
.wf-grid { display: grid; grid-template-columns: minmax(0, 1fr) 352px; gap: 19px; align-items: stretch; }
.wf-card { padding: 8px 22px 12px; min-width: 0; }
.wf-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.wf-table col.c-type { width: 102px; } .wf-table col.c-step { width: 166px; } .wf-table col.c-date { width: 126px; } .wf-table col.c-act { width: 142px; }
.wf-table th { height: 44px; padding: 0; text-align: left; font-size: 14px; font-weight: 500; color: var(--text-2); border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.wf-table td { height: 114px; padding: 0; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.wf-table tbody tr:last-child td { border-bottom: 0; }
.wf-table tbody tr { transition: background 0.12s; }
.wf-table tbody tr:hover td { background: #FBFCFE; }
.wf-content { display: flex; align-items: center; gap: 22px; min-width: 0; padding-right: 12px; }
.wf-cover { position: relative; flex: none; width: 190px; height: 90px; margin: 0; border-radius: 8px; }
.wf-cover .cp-art { border-radius: 8px; cursor: default; }
.wf-bigmark.cg-mark { position: absolute; z-index: 2; right: 26px; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; font-size: 22px; border-radius: 10px; background: #2563EB; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 8px 18px rgba(4, 12, 40, 0.3); }
.wf-txt { min-width: 0; }
.wf-txt h3 { margin: 0; font-size: 16.5px; font-weight: 700; line-height: 1.3; letter-spacing: -0.2px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-txt p { margin: 5px 0 0; font-size: 14px; line-height: 1.45; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wf-type { display: inline-flex; align-items: center; gap: 11px; font-size: 15px; font-weight: 500; color: var(--text); }
.wf-tile { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.wf-tile .i { font-size: 18px; }
.is-post .wf-tile, .wf-type.is-post .wf-tile { background: var(--indigo-bg); color: var(--indigo); }
.is-video .wf-tile, .wf-type.is-video .wf-tile { background: #FDECEF; color: #E5405A; }
.is-assets .wf-tile, .wf-type.is-assets .wf-tile { background: #E3F7EE; color: #12A06E; }
.wf-step { display: flex; flex-direction: column; gap: 3px; }
.wf-step .l { display: flex; align-items: center; gap: 11px; font-size: 14.5px; font-weight: 500; color: var(--text); white-space: nowrap; }
.wf-step .l .i { font-size: 17px; color: var(--text-2); flex: none; }
.wf-step .n { font-size: 14px; color: var(--text-2); }
.wf-bar { width: 128px; height: 5px; margin-top: 8px; border-radius: 3px; background: var(--track, #E9ECF3); overflow: hidden; }
.wf-bar span { display: block; height: 100%; border-radius: 3px; background: var(--indigo); }
.wf-date .d { font-size: 14.5px; font-weight: 500; color: var(--text); white-space: nowrap; }
.wf-date .a { margin-top: 4px; font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.wf-acts { display: flex; align-items: center; gap: 12px; }
.wf-go { height: 38px; padding: 0 13px; font-size: 15px; font-weight: 500; border-radius: 7px; }
.wf-dots { width: 38px; height: 38px; flex: none; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.wf-dots .i { font-size: 18px; }
.wf-dots:hover, .wf-dots[aria-expanded="true"] { border-color: #CBD2E1; background: #F6F8FC; color: var(--indigo); }
.wf-dots:focus-visible, .wf-go:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.wf-table tr.is-new td { animation: wf-in 0.9s ease-out; }
@keyframes wf-in { from { background: var(--indigo-bg-2); } to { background: transparent; } }
.wf-none td { height: 114px; text-align: center; font-size: 15px; color: var(--muted); }
/* the summary card */
.wf-sum { padding: 14px 20px 18px 16px; display: flex; flex-direction: column; min-width: 0; }
.wf-sum-h { display: flex; align-items: center; gap: 15px; }
.wf-sum-ic { width: 30px; height: 30px; border-radius: 7px; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; flex: none; }
.wf-sum-ic .i { font-size: 18px; stroke-width: 2.4; }
.wf-sum h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.1px; }
.wf-big { margin: 22px 0 0 8px; font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -0.5px; color: var(--text); font-variant-numeric: tabular-nums; }
.wf-big-l { margin: 8px 0 0 8px; font-size: 17px; color: var(--text-2); }
.wf-big-s { margin: 7px 0 0 8px; font-size: 14.5px; color: var(--text-2); padding-bottom: 22px; border-bottom: 1px solid var(--border-soft); }
.wf-flbl { margin: 22px 0 0 8px; font-size: 14.5px; font-weight: 500; color: var(--text); }
.wf-chips { display: flex; gap: 12px; margin: 14px 0 0 8px; flex-wrap: wrap; }
.wf-chip { height: 38px; padding: 0 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 14.5px; font-weight: 500; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.wf-chip:hover { border-color: #CBD2E1; color: var(--text); }
.wf-chip[aria-checked="true"] { border: 1.5px solid var(--indigo); background: var(--indigo-bg-2); color: var(--indigo); padding: 0 13.5px; }
.wf-chip:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.wf-counts { list-style: none; margin: 20px 0 0 8px; padding: 0; }
.wf-count { display: flex; align-items: center; gap: 20px; height: 60px; padding: 0 6px 0 10px; border-bottom: 1px solid var(--border-soft); }
.wf-count:last-child { border-bottom: 0; }
.wf-count .wf-tile { width: 34px; height: 34px; }
.wf-count .l { flex: 1; font-size: 15.5px; color: var(--text); }
.wf-count .n { font-size: 15.5px; color: var(--text); font-variant-numeric: tabular-nums; }
/* the menus ("New workflow" and the row ⋯), fixed to their button */
.wf-menu { position: fixed; z-index: 60; min-width: 176px; padding: 5px; border-radius: 9px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 10px 28px rgba(23, 27, 45, 0.14); }
.wf-menu button { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; text-align: left; white-space: nowrap; }
.wf-menu button:hover, .wf-menu button:focus-visible { background: var(--indigo-bg-2); outline: none; }
.wf-menu button .i { font-size: 17px; color: var(--text-2); }
.wf-menu button.is-danger { color: #D63A4E; } .wf-menu button.is-danger .i { color: #D63A4E; }
.wf-menu button.is-danger:hover, .wf-menu button.is-danger:focus-visible { background: #FDECEF; }
.wf-menu hr { margin: 4px 2px; border: 0; border-top: 1px solid var(--border-soft); }
/* the rename dialog (MM-41 frame with one field) */
/* empty (MM-42 card size) */
.wf-card .es { padding: 54px 24px 60px; }
.wf-card .es .il { width: 128px; height: 128px; margin-bottom: 20px; }
.wf-card .es h3 { font-size: 22px; }
.wf-card .es p { font-size: 16px; }
.wf-card .es .acts .btn-primary { height: 44px; font-size: 15.5px; padding: 0 20px; gap: 10px; }
/* read-only: no New workflow, no Continue / ⋯ (the Actions column is dropped by the script) */
.wf-root.is-readonly .wf-new { display: none; }
@media (max-width: 1399px) { .wf-grid { grid-template-columns: minmax(0, 1fr) 300px; } .wf-table col.c-type { width: 96px; } .wf-table col.c-step { width: 160px; } .wf-table col.c-date { width: 120px; } .wf-cover { width: 150px; height: 72px; } .wf-content { gap: 16px; } }
@media (max-width: 1199px) { .wf-grid { grid-template-columns: 1fr; } .wf-sum { order: -1; } .wf-counts { display: none; } .wf-big-s { padding-bottom: 14px; } }
@media (max-width: 899px) {
  .wf-card { padding: 4px 14px 8px; }
  .wf-table, .wf-table tbody { display: block; } .wf-table thead, .wf-table colgroup { display: none; }
  .wf-table tr { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "content content" "type date" "step step" "act act"; gap: 12px 14px; padding: 14px 0; border-bottom: 1px solid var(--border-soft); }
  .wf-table tbody tr:last-child { border-bottom: 0; }
  .wf-table td { display: block; height: auto; border: 0; }
  .wf-table td.c-content { grid-area: content; } .wf-table td.c-type { grid-area: type; } .wf-table td.c-date { grid-area: date; }
  .wf-table td.c-step { grid-area: step; } .wf-table td.c-act { grid-area: act; }
  .wf-date { text-align: right; } .wf-bar { width: 100%; }
  .wf-table tr:hover td { background: none; }
  .wf-content { padding-right: 0; gap: 14px; } .wf-cover { width: 120px; height: 58px; }
  .wf-bigmark.cg-mark { width: 32px; height: 32px; font-size: 14px; right: 12px; }
  .wf-txt h3 { white-space: normal; font-size: 16px; }
  .wf-acts .wf-go { flex: 1; height: 44px; } .wf-dots { width: 44px; height: 44px; }
  .wf-table tr.wf-none { display: block; } .wf-none td { height: auto; padding: 36px 8px; }
}
@media (max-width: 768px) {
  .wf-head { flex-wrap: wrap; } .wf-new { margin: 4px 0 0; }
  .wf-sum { padding: 14px 16px 16px; } .wf-chips { gap: 8px; margin-left: 0; } .wf-chip { flex: 1 1 auto; height: 44px; padding: 0 10px; }
  .wf-chip[aria-checked="true"] { padding: 0 9.5px; }
  .wf-big, .wf-big-l, .wf-big-s, .wf-flbl { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .wf-table tr.is-new td { animation: none; } }
/* Content-20 build additions: the Studio head's "Saved workflows ({n})" link, the row skeleton while the fragment loads, the load-error strip */
.wf-link { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 500; color: var(--indigo); text-decoration: none; white-space: nowrap; }
.wf-link .i { font-size: 16px; }
.wf-link:hover { text-decoration: underline; }
.wf-link:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; border-radius: 4px; }
.st2-brand .wf-link { margin-right: 10px; }
.wf-skel td { height: 114px; }
.wf-skel .wf-content { gap: 22px; }
.wf-skel .ld-block { width: 190px; height: 90px; border-radius: 8px; flex: none; }
.wf-skel .lines { display: flex; flex-direction: column; gap: 10px; }
.wf-body > .er-inline { margin: 14px 2px; }
.wf-body.is-busy { min-height: 240px; }
@media (max-width: 899px) { .wf-skel .ld-block { width: 120px; height: 58px; } }

/* ---------- Content-21 · Generation jobs (jb-) — Content module, plan plans/Content-21.md ---------- */
.jb-root { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-mid: #193F94; --cg-tint: #F1F5F9; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter"; }
.jb-head { padding-bottom: 18px; }
.jb-head .sub { margin-top: 4px; }
.jb-ro { margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--muted); }
.jb-ro .i { font-size: 16px; }
/* one card: the inner navigation, the KPI tiles, the filters and the table */
.jb-card { padding: 0 16px 16px; min-width: 0; }
.jb-subnav.ct-subnav { height: 52px; margin: 0 -16px; padding: 0 12px 0 18px; border-bottom: 1px solid var(--border-soft); gap: 0; }
.jb-subnav .ct-subitem { padding: 0 21px; }
.jb-subnav .ct-subitem.is-active { padding: 0 17px; }
/* the KPI tiles (plan §2: 84 px, radius 10, tinted, the 44 px disc, 24 px / 800 number, 16 px label) */
.jb-tiles { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.jb-tile { display: flex; align-items: center; gap: 22px; height: 78px; padding: 0 16px; border-radius: 10px; }
.jb-disc { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.jb-disc .i { font-size: 24px; }
.jb-tv { display: flex; flex-direction: column; min-width: 0; }
.jb-tv .n { font-size: 24px; font-weight: 800; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.jb-tv .l { margin-top: 3px; font-size: 16px; color: var(--text-2); }
.jb-tile.is-queued { background: #F1F3F7; } .jb-tile.is-queued .jb-disc { background: #E6E9EF; color: #6B7280; }
.jb-tile.is-queued .jb-disc .i { font-size: 28px; stroke-width: 1.7; }
.jb-tile.is-running { background: #EEF1FF; } .jb-tile.is-running .jb-disc { color: var(--indigo); }
.jb-tile.is-running .jb-disc .i { font-size: 34px; animation: jb-spin 1s steps(8) infinite; }
.jb-tile.is-completed { background: #EAF8F1; } .jb-tile.is-completed .jb-disc { background: #12B981; color: #fff; }
.jb-tile.is-completed .jb-disc .i { font-size: 22px; stroke-width: 3; }
.jb-tile.is-failed { background: #FDEEF0; } .jb-tile.is-failed .jb-disc { background: #EF3B4F; color: #fff; }
.jb-tile.is-failed .jb-disc .i { font-size: 24px; stroke-width: 3.2; }
.jb-root.is-idle .jb-tile.is-running .jb-disc .i { animation: none; opacity: 0.55; }
@keyframes jb-spin { to { transform: rotate(360deg); } }
/* the three selects */
.jb-filters { display: flex; gap: 12px; margin: 16px 0 16px; flex-wrap: wrap; }
.jb-sel { position: relative; display: inline-flex; width: 280px; }
.jb-sel select { appearance: none; -webkit-appearance: none; width: 100%; height: 42px; padding: 0 40px 0 13px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 15px; color: var(--text); cursor: pointer; box-sizing: border-box; }
.jb-sel.has-icon select { padding-left: 38px; }
.jb-sel select:hover { border-color: #CBD2E1; }
.jb-sel select:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.jb-sel select.is-set { border-color: #B9C6FF; background: var(--indigo-bg-2); color: var(--indigo); font-weight: 500; }
.jb-sel > .i { position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-2); }
.jb-sel > .i:last-child { right: 13px; font-size: 17px; }
.jb-sel > .i:first-child:not(:last-child) { left: 13px; font-size: 17px; }
/* the table */
.jb-tablewrap { border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; }
.jb-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.jb-table col.c-type { width: 116px; } .jb-table col.c-status { width: 168px; } .jb-table col.c-prog { width: 274px; }
.jb-table col.c-date { width: 136px; } .jb-table col.c-cost { width: 84px; } .jb-table col.c-act { width: 162px; }
.jb-table th { height: 44px; padding: 0 0 0 0; background: #F7F8FB; text-align: left; font-size: 14px; font-weight: 500; color: var(--text-2); border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.jb-table th:first-child { padding-left: 16px; }
.jb-table th .i { font-size: 15px; margin-left: 6px; vertical-align: -2px; }
.jb-table td { height: 61px; padding: 0; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.jb-table td:first-child { padding-left: 16px; }
.jb-table tbody tr:last-child td { border-bottom: 0; }
.jb-table tbody tr { transition: background 0.12s; }
.jb-table tbody tr:hover td { background: #FBFCFE; }
.jb-table tr.is-new td { animation: jb-in 0.9s ease-out; }
@keyframes jb-in { from { background: var(--indigo-bg-2); } to { background: transparent; } }
.jb-job { display: flex; align-items: center; gap: 18px; min-width: 0; padding-right: 12px; }
.jb-cover { position: relative; flex: none; width: 140px; height: 50px; margin: 0; border-radius: 6px; }
.jb-cover .cp-art { border-radius: 6px; cursor: default; }
.jb-hl { position: absolute; z-index: 2; left: 34px; top: 50%; transform: translateY(-50%); font-size: 10.5px; font-weight: 700; line-height: 1.12; color: #fff; text-shadow: 0 1px 6px rgba(4, 12, 40, 0.35); white-space: nowrap; }
.jb-lock { position: absolute; z-index: 2; left: 8px; top: 50%; transform: translateY(-50%); }
.jb-lock .cg-mark { width: 20px; height: 20px; font-size: 8.5px; border-radius: 4px; background: #2563EB; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45); }
.jb-bigmark.cg-mark { position: absolute; z-index: 2; right: 14px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; font-size: 13px; border-radius: 7px; background: #2563EB; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 6px 14px rgba(4, 12, 40, 0.3); }
.jb-txt { min-width: 0; }
.jb-txt h3 { margin: 0; font-size: 15.5px; font-weight: 500; line-height: 1.3; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jb-txt p { margin: 3px 0 0; font-size: 14px; color: var(--muted); white-space: nowrap; }
.jb-type { display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 13px; border: 1px solid var(--border); border-radius: 8px; font-size: 14.5px; color: var(--text-2); white-space: nowrap; }
.jb-type .i { font-size: 18px; color: var(--text-2); }
/* the status pill */
.jb-pill { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 13px 0 11px; border-radius: 8px; font-size: 14.5px; font-weight: 500; white-space: nowrap; }
.jb-pill .g { width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.jb-pill .g .i { font-size: 10px; stroke-width: 3.6; color: #fff; }
.jb-pill.is-running { background: #EEF1FF; color: var(--indigo); } .jb-pill.is-running .g { width: 11px; height: 11px; background: var(--indigo); margin: 0 1.5px; animation: jb-pulse 1.4s ease-in-out infinite; }
.jb-pill.is-queued { background: #F1F3F7; color: #4B5563; } .jb-pill.is-queued .g { width: 11px; height: 11px; background: #8A93A3; margin: 0 1.5px; }
.jb-pill.is-completed { background: #E9F8F0; color: #0C8C60; } .jb-pill.is-completed .g { background: #12B981; }
.jb-pill.is-partial { background: #FFF5E1; color: #A86207; } .jb-pill.is-partial .g { box-sizing: border-box; border: 2px solid #F59E0B; background: linear-gradient(90deg, #F59E0B 50%, #fff 50%); }
.jb-pill.is-failed { background: #FDECEF; color: #D1344A; } .jb-pill.is-failed .g { background: #EF3B4F; }
.jb-pill.is-cancelled { background: var(--surface); color: #6B7280; box-shadow: inset 0 0 0 1px #D5DAE3; } .jb-pill.is-cancelled .g .i { font-size: 14px; stroke-width: 2.2; color: #8A93A3; }
@keyframes jb-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(59, 91, 253, 0.45); } 50% { box-shadow: 0 0 0 4px rgba(59, 91, 253, 0); } }
/* the progress cell */
.jb-prog { padding-right: 14px; }
.jb-prog .t { font-size: 14px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jb-prog .t .sep { margin: 0 5px; color: var(--muted); }
.jb-bar { width: 256px; max-width: 100%; height: 8px; margin-top: 6px; border-radius: 4px; background: var(--track, #E9ECF3); overflow: hidden; }
.jb-bar span { display: block; height: 100%; border-radius: 4px; background: #B8BFCC; transition: width 0.4s ease; }
.jb-bar.is-running span { background: repeating-linear-gradient(-45deg, var(--indigo) 0 8px, #6E86FF 8px 13px); background-size: 18px 18px; animation: jb-stripes 0.9s linear infinite; }
.jb-bar.is-completed span { background: #12B981; }
.jb-bar.is-partial span { background: #F59E0B; }
@keyframes jb-stripes { to { background-position: 18px 0; } }
.jb-date { font-size: 15px; line-height: 1.3; color: var(--text-2); white-space: nowrap; }
.jb-cost { font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }
.jb-cost.is-none { color: var(--muted); }
.jb-cost .est { display: block; font-size: 12px; color: var(--muted); }
.jb-acts { display: flex; align-items: center; gap: 16px; }
.jb-act { width: 96px; height: 40px; flex: none; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 15px; font-weight: 500; color: var(--text); cursor: pointer; }
.jb-act:hover { border-color: #CBD2E1; background: #F6F8FC; }
.jb-dots { width: 40px; height: 40px; flex: none; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.jb-dots .i { font-size: 18px; }
.jb-dots:hover, .jb-dots[aria-expanded="true"] { border-color: #CBD2E1; background: #F6F8FC; color: var(--indigo); }
.jb-act:focus-visible, .jb-dots:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.jb-none td { height: auto; padding: 44px 16px 48px; text-align: center; }
.jb-none .m { font-size: 16px; color: var(--text-2); }
.jb-none .btn-outline { margin-top: 14px; height: 40px; padding: 0 16px; font-size: 14.5px; }
/* the row menu */
.jb-menu { position: fixed; z-index: 60; min-width: 176px; padding: 5px; border-radius: 9px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 10px 28px rgba(23, 27, 45, 0.14); }
.jb-menu button { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; text-align: left; white-space: nowrap; }
.jb-menu button:hover, .jb-menu button:focus-visible { background: var(--indigo-bg-2); outline: none; }
.jb-menu button .i { font-size: 17px; color: var(--text-2); }
.jb-menu button.is-danger { color: #D63A4E; } .jb-menu button.is-danger .i { color: #D63A4E; }
.jb-menu button.is-danger:hover, .jb-menu button.is-danger:focus-visible { background: #FDECEF; }
.jb-menu hr { margin: 4px 2px; border: 0; border-top: 1px solid var(--border-soft); }
/* empty (MM-42 card size) */
.jb-card .es { padding: 40px 24px 48px; }
.jb-card .es .il { width: 120px; height: 120px; margin-bottom: 18px; }
.jb-card .es h3 { font-size: 22px; }
.jb-card .es p { font-size: 16px; }
.jb-root.is-empty .jb-filters { display: none; }
@media (max-width: 1639px) {
  .jb-table col.c-status { width: 162px; } .jb-table col.c-prog { width: 262px; } .jb-prog { padding-right: 10px; } .jb-prog .t { font-size: 13.5px; } .jb-prog .t .sep { margin: 0 4px; } .jb-table col.c-date { width: 128px; } .jb-table col.c-cost { width: 80px; } .jb-table col.c-act { width: 156px; }
  .jb-bar { width: 222px; } .jb-cover { width: 112px; height: 44px; } .jb-hl { font-size: 9px; left: 30px; } .jb-lock .cg-mark { width: 17px; height: 17px; font-size: 7.5px; }
  .jb-job { gap: 14px; } .jb-acts { gap: 10px; } .jb-act { width: 88px; }
  .jb-pill { gap: 7px; padding: 0 10px 0 9px; font-size: 14px; }
}
@media (min-width: 1450px) and (max-width: 1639px) {       /* the Type column gives way (the meta line already says "Image") */
  .jb-table col.c-type { width: 0; } .jb-table th.c-type, .jb-table td.c-type { font-size: 0; } .jb-table td.c-type > * { display: none; }
}
@media (max-width: 1199px) {
  .jb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .jb-sel { width: auto; flex: 1 1 200px; }
}
@media (max-width: 1449px) {
  .jb-tablewrap { border: 0; border-radius: 0; overflow: visible; }
  .jb-table, .jb-table tbody { display: block; } .jb-table thead, .jb-table colgroup { display: none; }
  .jb-table tr { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "job job job" "status type cost" "prog prog prog" "date date date" "act act act"; align-items: center; gap: 10px 12px; padding: 14px 2px; border-bottom: 1px solid var(--border-soft); }
  .jb-table tbody tr:last-child { border-bottom: 0; }
  .jb-table td, .jb-table td:first-child { display: block; height: auto; padding: 0; border: 0; }
  .jb-table td.c-job { grid-area: job; } .jb-table td.c-type { grid-area: type; } .jb-table td.c-status { grid-area: status; }
  .jb-table td.c-prog { grid-area: prog; } .jb-table td.c-date { grid-area: date; } .jb-table td.c-cost { grid-area: cost; text-align: right; }
  .jb-table td.c-act { grid-area: act; }
  .jb-table tr:hover td { background: none; }
  .jb-prog { padding-right: 0; } .jb-bar { width: 100%; }
  .jb-date br { display: none; } .jb-date::before { content: "Started "; color: var(--muted); }
  .jb-job { padding-right: 0; } .jb-cover { width: 120px; height: 46px; } .jb-txt h3 { white-space: normal; }
  .jb-acts .jb-act { flex: 1; width: auto; height: 44px; } .jb-dots { width: 44px; height: 44px; }
  .jb-table tr.jb-none { display: block; }
}
@media (max-width: 768px) {
  .jb-card { padding: 0 14px 12px; }
  .jb-subnav.ct-subnav { margin: 0 -14px; overflow-x: auto; height: 48px; padding: 0 6px; } .jb-subnav .ct-subitem, .jb-subnav .ct-subitem.is-active { padding: 0 12px; }
  .jb-tile { height: 70px; gap: 12px; padding: 0 12px; } .jb-disc { width: 38px; height: 38px; } .jb-tv .l { font-size: 14.5px; }
  .jb-filters { flex-direction: column; } .jb-sel { flex: none; } .jb-sel, .jb-sel select { width: 100%; } .jb-sel select { height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .jb-tile.is-running .jb-disc .i, .jb-pill.is-running .g, .jb-bar.is-running span, .jb-table tr.is-new td { animation: none; }
}

/* ---------- Content-22 · Generation job details (jd-) — the job drawer over the jobs page, plan plans/Content-22.md ---------- */
.jd-backdrop { position: fixed; inset: 0; background: rgba(23, 27, 45, 0.36); z-index: 62; }
.jd-drawer { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-mid: #193F94; --cg-tint: #F1F5F9; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter";
  position: fixed; top: 0; right: 0; bottom: 0; width: 646px; max-width: 100vw; background: var(--surface); box-shadow: -12px 0 40px rgba(23, 27, 45, 0.18); display: flex; flex-direction: column; z-index: 63; }
.jd-drawer:focus { outline: none; }
.jd-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.jd-drawer :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
/* the head (plan §2: 72 px, the 44 px tile, 22 px / 800 title, 15 px subtitle) */
.jd-head { flex: none; display: flex; align-items: center; gap: 16px; height: 73px; padding: 0 16px 0 31px; border-bottom: 1px solid var(--border-soft); box-sizing: border-box; }
.jd-tile { width: 44px; height: 44px; border-radius: 10px; background: #EEF1FF; color: var(--indigo); display: grid; place-items: center; flex: none; box-shadow: inset 0 0 0 1px #DDE3FF; }
.jd-tile .i { font-size: 23px; }
.jd-head h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.3px; line-height: 27px; }
.jd-head p { margin: 1px 0 0; font-size: 15px; line-height: 19px; color: var(--text-2); }
.jd-head .close { margin-left: auto; width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); background: none; border: 0; cursor: pointer; flex: none; }
.jd-head .close .i { font-size: 24px; } .jd-head .close:hover { background: #F3F4F8; }
.jd-ro { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 7px; background: #F1F3F7; color: var(--text-2); font-size: 13px; font-weight: 500; white-space: nowrap; }
.jd-ro .i { font-size: 15px; }
.jd-body { flex: 1; overflow: auto; padding: 20px 24px 20px 29px; display: flex; flex-direction: column; gap: 16px; }
/* the summary (the cover 228 × 160, the 20 px title + the pill, three lines of description, the chips) */
.jd-sum { display: grid; grid-template-columns: 228px minmax(0, 1fr); column-gap: 17px; align-items: start; margin-bottom: 4px; }
.jd-cover { position: relative; width: 228px; height: 160px; margin: 0; border-radius: 10px; overflow: hidden; }
.jd-cover .cp-art { border-radius: 10px; cursor: default; box-shadow: none; }
.jd-cover .cp-h.lg { font-size: 22px; } .jd-cover .cp-h.md { font-size: 20px; } .jd-cover .cp-h.sm { font-size: 16px; } .jd-cover .cp-h.xs { font-size: 15px; }
.jd-cover .cp-lock { left: auto; right: 14px; top: 14px; } .jd-cover .cp-lock .cg-mark { width: 30px; height: 30px; font-size: 13px; border-radius: 7px; }
.jd-bigmark.cg-mark { width: 34px; height: 34px; font-size: 14px; border-radius: 8px; background: #2563EB; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45), 0 6px 14px rgba(4, 12, 40, 0.3); }
.jd-bigmark.cg-mark { position: absolute; z-index: 2; right: 22px; top: 50%; transform: translateY(-50%); width: 58px; height: 58px; font-size: 24px; border-radius: 12px; }
.jd-sum-main { min-width: 0; padding-top: 4px; }
.jd-sum-t { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; }
.jd-sum-t h3 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.3px; line-height: 26px; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.jd-sum-t .jb-pill { height: 28px; font-size: 14px; padding: 0 11px 0 9px; gap: 7px; border-radius: 7px; }
.jd-desc { margin: 10px 0 0; font-size: 15.5px; line-height: 21px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.jd-chips { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.jd-chips li { display: inline-flex; align-items: center; gap: 5px; height: 33px; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px; font-size: 13.5px; color: var(--text); white-space: nowrap; box-sizing: border-box; }
.jd-chips .i { font-size: 15px; color: var(--text-2); }
.jd-chips li.is-est { color: var(--text); } .jd-chips li.is-none { color: var(--muted); }
/* the cards (1 px border, radius 12, 16 px gap) */
.jd-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px 20px 16px 15px; background: var(--surface); }
.jd-ch { display: flex; align-items: center; gap: 16px; margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.2px; color: var(--text); }
.jd-ci { width: 31px; height: 31px; border-radius: 8px; background: #EEF1FF; color: var(--indigo); display: grid; place-items: center; flex: none; }
.jd-ci .i { font-size: 18px; }
.jd-ch .n { margin-left: auto; font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
/* the timeline (rows 58 px, a 2 px connector — green done, indigo active, grey pending) */
.jd-steps { list-style: none; margin: 14px 0 0; padding: 0 0 0 1px; }
.jd-step { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-rows: auto 1fr; column-gap: 19px; align-items: start; min-height: 58px; }
.jd-step:last-child { min-height: 0; padding-bottom: 6px; }
.jd-step:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 31px; bottom: 3px; width: 2px; border-radius: 1px; background: #E3E6ED; }
.jd-step.to-done::after { background: #12B981; } .jd-step.to-active::after { background: #B9C6FF; } .jd-step.to-failed::after { background: #F6B8C1; }
.jd-disc { grid-row: 1 / 3; width: 27px; height: 27px; margin: 1px auto 0; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 600; box-sizing: border-box; }
.jd-disc .i { font-size: 15px; stroke-width: 3; }
.jd-step.s-done .jd-disc { background: #12B981; color: #fff; }
.jd-step.s-active .jd-disc { border: 2px solid var(--indigo); background: #fff; box-shadow: 0 0 0 4px #E8ECFF; }
.jd-step.s-active .jd-disc::before { content: ""; width: 13px; height: 13px; border-radius: 50%; background: var(--indigo); animation: jd-pulse 1.6s ease-in-out infinite; }
.jd-step.s-pending .jd-disc { background: #F3F4F7; color: #6B7280; box-shadow: inset 0 0 0 1px #E1E4EB; }
.jd-step.s-failed .jd-disc { background: #EF3B4F; color: #fff; } .jd-step.s-failed .jd-disc .i { font-size: 17px; stroke-width: 3.2; }
.jd-step.s-stopped .jd-disc { background: #fff; color: #8A93A3; box-shadow: inset 0 0 0 1.5px #C9CFDB; } .jd-step.s-stopped .jd-disc .i { font-size: 16px; stroke-width: 2.2; }
@keyframes jd-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.82); } }
.jd-st { display: contents; }
.jd-st b { grid-column: 2; grid-row: 1; min-width: 0; padding-top: 1px; display: block; font-size: 16px; font-weight: 500; line-height: 21px; color: var(--text); }
.jd-st > span { grid-column: 2 / 4; grid-row: 2; display: block; margin-top: 1px; font-size: 14px; line-height: 20px; color: var(--muted); }
.jd-step.s-active .jd-st b { color: var(--indigo); font-weight: 600; }
.jd-step.s-failed .jd-st b { color: #C92E44; }
.jd-time { grid-column: 3; grid-row: 1; padding-top: 3px; padding-left: 12px; font-size: 14.5px; color: var(--text-2); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.jd-step.s-active .jd-time { color: var(--indigo); font-weight: 700; font-size: 15.5px; padding-top: 2px; }
.jd-time.is-dash { color: var(--muted); padding-right: 4px; }
/* the results (5 columns of 96 × 72 tiles) */
.jd-grid { list-style: none; margin: 16px 0 0; padding: 0 0 0 1px; display: grid; grid-template-columns: repeat(5, 96px); justify-content: space-between; row-gap: 14px; }
.jd-thumb { position: relative; min-width: 0; outline: none; }
.jd-thumb .pic { position: relative; width: 96px; height: 72px; border-radius: 7px; overflow: hidden; background: #F1F3F7; }
.jd-thumb .pic .cp-art { border-radius: 7px; cursor: default; box-shadow: inset 0 0 0 1px rgba(14, 27, 61, 0.06); }
.jd-thumb .cp-h, .jd-thumb .cp-lock { display: none; }
.jd-thumb.t-new .pic .cp-art { animation: jd-fade 0.6s ease-out; }
@keyframes jd-fade { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.jd-thumb.t-queued .pic { background: repeating-linear-gradient(135deg, #F4F5F8 0 8px, #EEF0F4 8px 16px); box-shadow: inset 0 0 0 1px #E6E9EF; }
.jd-thumb.t-rendering .pic { background: linear-gradient(100deg, #E9EDFB 20%, #F6F8FF 45%, #E9EDFB 70%); background-size: 220% 100%; animation: jd-shine 1.4s linear infinite; box-shadow: inset 0 0 0 1px #D5DDFB; display: grid; place-items: center; color: var(--indigo); }
.jd-thumb.t-rendering .pic .i { font-size: 22px; animation: jb-spin 1s steps(8) infinite; }
@keyframes jd-shine { from { background-position: 100% 0; } to { background-position: -120% 0; } }
.jd-thumb.t-failed .pic { background: #FDECEF; box-shadow: inset 0 0 0 1px #F6B8C1; display: grid; place-items: center; color: #D1344A; }
.jd-thumb.t-failed .pic .i { font-size: 22px; stroke-width: 3; }
.jd-thumb.t-cancelled .pic { background: #F6F7F9; box-shadow: inset 0 0 0 1px #E1E4EB; display: grid; place-items: center; color: #9AA1AE; }
.jd-thumb.t-cancelled .pic .i { font-size: 20px; }
.jd-thumb .cap { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; line-height: 16px; color: var(--text-2); min-width: 0; }
.jd-thumb .cap .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.jd-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: #B4BAC6; }
.jd-thumb.t-done .jd-dot { background: #12B981; } .jd-thumb.t-rendering .jd-dot { background: var(--indigo); animation: jb-pulse 1.4s ease-in-out infinite; }
.jd-thumb.t-failed .jd-dot { background: #EF3B4F; } .jd-thumb.t-failed .cap .t { color: #C92E44; }
.jd-retried { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.jd-thumb[data-err]::after { content: attr(data-err); position: absolute; z-index: 5; left: 50%; bottom: calc(100% - 64px); transform: translate(-50%, 100%); width: max-content; max-width: 200px; padding: 7px 10px; border-radius: 7px; background: #1F2540; color: #fff; font-size: 12.5px; line-height: 17px; box-shadow: 0 8px 22px rgba(23, 27, 45, 0.25); opacity: 0; pointer-events: none; transition: opacity 0.12s; }
.jd-thumb[data-err]:hover::after, .jd-thumb[data-err]:focus-visible::after { opacity: 1; }
.jd-thumb:focus-visible .pic { outline: 2px solid var(--indigo); outline-offset: 2px; }
.jd-fail { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; padding: 9px 12px; border-radius: 8px; background: #FDF0F2; color: #B02A3F; font-size: 14px; line-height: 19px; }
.jd-fail .i { font-size: 16px; flex: none; margin-top: 1px; stroke-width: 2.6; }
.jd-empty { margin: 14px 0 2px; font-size: 14.5px; color: var(--muted); }
/* the references (5 × 104 × 94, radius 8) and the collapsible prompt row */
.jd-refgrid { list-style: none; margin: 19px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.jd-ref { position: relative; height: 94px; border-radius: 8px; overflow: hidden; }
.jd-ref .cp-art { border-radius: 8px; cursor: default; box-shadow: inset 0 0 0 1px rgba(14, 27, 61, 0.06); }
.jd-ref .cp-h, .jd-ref .cp-lock { display: none; }
.jd-prompt { margin: 19px -20px -16px -15px; border-top: 1px solid var(--border-soft); }
.jd-prompt > button { width: 100%; display: grid; grid-template-columns: 32px minmax(0, 1fr) 24px; column-gap: 16px; align-items: center; min-height: 64px; padding: 8px 20px 8px 15px; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; border-radius: 0 0 12px 12px; }
.jd-prompt > button:hover { background: #FAFBFD; }
.jd-prompt .pi { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-2); }
.jd-prompt .pi .i { font-size: 18px; }
.jd-prompt b { display: block; font-size: 15.5px; font-weight: 500; color: var(--text); }
.jd-prompt .pv { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jd-prompt .chev { font-size: 20px; color: var(--text-2); transition: transform 0.15s; }
.jd-prompt > button[aria-expanded="true"] .chev { transform: rotate(180deg); }
.jd-prompt > button[aria-expanded="true"] .pv { visibility: hidden; }
.jd-brief { margin: 0; padding: 2px 20px 16px 63px; display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 7px 14px; font-size: 14px; line-height: 20px; }
.jd-brief dt { color: var(--muted); } .jd-brief dd { margin: 0; color: var(--text); }
.jd-brief dt.is-req, .jd-brief dd.is-req { font-weight: 600; }
.jd-refnone { margin: 14px 0 0; font-size: 14.5px; color: var(--muted); }
/* the footer (two 48 px buttons, the primary right) */
.jd-foot { flex: none; display: flex; justify-content: space-between; gap: 16px; padding: 19px 24px 24px 29px; border-top: 1px solid var(--border-soft); background: var(--surface); }
.jd-foot button { height: 47px; min-width: 204px; padding: 0 22px; justify-content: center; font-size: 16px; font-weight: 600; box-shadow: none; border-radius: 8px; white-space: nowrap; }
.jd-foot .btn-outline { display: inline-flex; align-items: center; border: 1px solid #D5DAE4; color: var(--text); }
.jd-foot .btn-outline.is-danger:hover { border-color: #F2B7C0; color: #C92E44; background: #FFF7F8; }
.jd-foot .btn-primary { min-width: 232px; background: #1D4FF2; } .jd-foot .btn-primary:hover { background: #1843D6; }
.jd-foot .btn-primary.is-solo, .jd-foot .btn-outline.is-solo { margin-left: auto; }
.jd-foot .i { font-size: 18px; margin-right: 8px; }
.jb-txt h3 .jd-open { display: inline; max-width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.jb-txt h3 .jd-open:hover { color: var(--indigo); text-decoration: underline; text-underline-offset: 2px; }
.jb-txt h3 .jd-open:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 3px; }
.jb-table tr.is-jd-open td { background: #F5F7FF; }
@media (max-width: 1200px) { .jd-drawer { width: 600px; } }
@media (max-width: 768px) {
  .jd-drawer { top: auto; width: 100%; height: 92vh; border-radius: 16px 16px 0 0; }
  .jd-head { height: 64px; padding: 0 10px 0 16px; gap: 12px; } .jd-tile { width: 38px; height: 38px; } .jd-head h2 { font-size: 19px; line-height: 23px; } .jd-head p { font-size: 14px; }
  .jd-ro { display: none; }
  .jd-body { padding: 16px; gap: 14px; }
  .jd-sum { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .jd-cover { width: 100%; height: auto; aspect-ratio: 2 / 1; }
  .jd-card { padding: 14px 14px 14px 12px; }
  .jd-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); column-gap: 10px; justify-content: stretch; }
  .jd-thumb .pic { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .jd-refgrid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; } .jd-ref { height: auto; aspect-ratio: 104 / 94; }
  .jd-step { grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; min-height: 0; padding-bottom: 14px; } .jd-step:not(:last-child)::after { left: 15px; }
  .jd-st > span { grid-column: 2; grid-row: 3; } .jd-time { grid-column: 2; grid-row: 2; text-align: left; padding: 1px 0 0; font-size: 13px; }
  .jd-disc { grid-row: 1 / 4; } .jd-time:empty, .jd-time.is-dash { display: none; }
  .jd-step.s-active .jd-time { padding-top: 2px; }
  .jd-prompt { margin: 16px -14px -14px -12px; } .jd-prompt > button { padding: 8px 14px 8px 12px; column-gap: 12px; }
  .jd-brief { grid-template-columns: minmax(0, 1fr); padding: 2px 14px 14px 14px; gap: 2px; } .jd-brief dd { margin-bottom: 8px; }
  .jd-foot { padding: 12px 16px 16px; gap: 12px; } .jd-foot button { flex: 1; min-width: 0; padding: 0 10px; font-size: 15px; } .jd-foot .i { display: none; }
}

/* ---------- Content-21 / 22 · production additions (jb- / jd-): the shared sub navigation inside the card, the cover thumbnails, "Show more",
   the loading / error states, and Content-11's cancelled state (cg2-) ---------- */
.jb-subnav.ct-subnav.card { border: 0; border-bottom: 1px solid var(--border-soft); border-radius: 0; box-shadow: none; background: none; }
.jb-cover > .cp-art.cg2-img, .jd-cover > .cp-art.cg2-img, .jd-thumb .pic > .cp-art.cg2-img, .jd-ref > .cp-art.cg2-img { box-shadow: none; }
.jb-cover > .cp-art.cg2-img { box-shadow: inset 0 0 0 1px rgba(14, 27, 61, 0.06); }
.jd-ref > .cp-art.cg2-img.cg2-logo img { padding: 8px; }
.jb-txt h3 .jd-open { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jb-more { display: flex; justify-content: center; padding: 14px 0 2px; }
.jb-more[hidden] { display: none; }
.jb-more .btn-outline { height: 40px; padding: 0 18px; font-size: 14.5px; }
.jb-foot { margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.jb-skel td { height: 61px; padding: 0 16px; }
.jb-skel .jb-job { gap: 18px; } .jb-skel .ld-block { width: 140px; height: 46px; border-radius: 6px; flex: none; } .jb-skel .lines { display: flex; flex-direction: column; gap: 8px; }
.jd-drawer .er-inline { margin: 24px; }
.jd-loading { padding: 24px 29px; display: flex; flex-direction: column; gap: 14px; }
.jd-brief dd { white-space: pre-line; overflow-wrap: anywhere; }
.cg2-tile.is-cancelled .pic { background: #F6F7F9; box-shadow: inset 0 0 0 1px #E1E4EB; }
.cg2-tile.is-cancelled .ph { color: #9AA1AE; }
.cg2-tile.is-cancelled figcaption { color: var(--muted); } .cg2-tile.is-cancelled figcaption .i { color: #9AA1AE; }
.cg2-root.is-cancelled .cg2-done { background: #F6F7F9; border-color: #E1E4EB; } .cg2-root.is-cancelled .cg2-done .disc { background: #8A93A3; }
.cg2-root.is-cancelled .cg2-bar span { background: #B8BFCC; }
/* ---------- Content-23 · Saved ideas (id-) — Content module, plan plans/Content-23.md ---------- */
.id-root { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-mid: #193F94; --cg-tint: #F1F5F9; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter"; }
.id-head { padding-bottom: 18px; }
.id-head .sub { margin-top: 4px; }
.id-ro { margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--muted); }
.id-ro .i { font-size: 16px; }
.id-subnav { height: 52px; margin-bottom: 16px; padding: 0 8px 0 18px; }
.id-subnav .ct-subitem { padding: 0 21px; }
/* the card: the toolbar and the idea grid */
.id-card { padding: 16px 16px 16px; min-width: 0; }
.id-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.id-segs { display: flex; gap: 8px; flex-wrap: wrap; }
.id-seg { height: 40px; padding: 0 12px 0 18px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); font: inherit; font-size: 15px; font-weight: 500; color: var(--text); display: inline-flex; align-items: center; gap: 12px; cursor: pointer; white-space: nowrap; }
.id-seg .n { min-width: 24px; height: 22px; padding: 0 7px; border-radius: 11px; background: #EEF0F4; color: var(--muted); font-size: 13px; font-weight: 500; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.id-seg:hover { border-color: #CBD2E1; }
.id-seg[aria-checked="true"] { background: #EEF0F4; border-color: #EEF0F4; }
.id-seg[aria-checked="true"] .n { background: #E1E5EC; color: var(--text-2); }
.id-seg:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.id-tools { margin-left: auto; display: flex; align-items: center; gap: 14px; min-width: 0; }
.id-search { position: relative; display: flex; align-items: center; width: 240px; height: 40px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 0 12px 0 42px; box-sizing: border-box; }
.id-search .i { position: absolute; left: 14px; font-size: 18px; color: var(--text-2); }
.id-search input { width: 100%; border: 0; outline: 0; background: none; font: inherit; font-size: 15px; color: var(--text); min-width: 0; }
.id-search input::placeholder { color: var(--muted); }
.id-search input::-webkit-search-cancel-button { cursor: pointer; }
.id-search:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.id-menu-btn { height: 40px; padding: 0 14px 0 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 15px; font-weight: 500; color: var(--text); display: inline-flex; align-items: center; gap: 10px; cursor: pointer; white-space: nowrap; }
.id-menu-btn .i { font-size: 18px; color: var(--text-2); }
.id-menu-btn .i:last-child { font-size: 16px; margin-left: 8px; }
.id-menu-btn:hover { border-color: #CBD2E1; }
.id-menu-btn[aria-expanded="true"] { border-color: var(--indigo); }
.id-menu-btn:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.id-fav.is-fav { border-color: #8EA2FB; background: var(--indigo-bg); color: var(--indigo); }
.id-fav.is-fav .i { color: var(--indigo); }
.id-fav.is-fav .i:first-child { fill: currentColor; }
.id-new { height: 40px; padding: 0 18px 0 16px; font-size: 15px; font-weight: 500; gap: 10px; border-radius: 8px; box-shadow: none; }
.id-new .i { font-size: 19px; }
/* the grid: three columns at ≥ 1400 px, two at ≥ 900 px, one below */
.id-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
.id-item { position: relative; display: flex; gap: 16px; min-height: 230px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-sizing: border-box; min-width: 0; transition: border-color 0.12s, box-shadow 0.12s; }
.id-item:hover { border-color: #D3D9E6; box-shadow: 0 4px 14px rgba(23, 27, 45, 0.06); }
.id-item.is-new { animation: id-in 1s ease-out; }
@keyframes id-in { from { background: var(--indigo-bg-2); border-color: var(--indigo); } to { background: var(--surface); } }
.id-item.is-unsaved .id-cover { filter: saturate(0.85); }
.id-cover { position: relative; flex: none; width: 168px; height: 196px; margin: 0; border-radius: 8px; overflow: hidden; }
.id-cover .cp-art { border-radius: 8px; cursor: default; box-shadow: none; }
.id-hl { position: absolute; z-index: 2; left: 14px; right: 12px; top: 18px; font-size: 16px; font-weight: 600; line-height: 1.13; letter-spacing: -0.2px; color: #fff; text-shadow: 0 1px 8px rgba(4, 12, 40, 0.35); }
.cp-art.a-light .id-hl { color: var(--cg-dark); text-shadow: none; }
.id-cmark.cg-mark { position: absolute; z-index: 2; left: 12px; bottom: 12px; width: 32px; height: 32px; font-size: 14px; border-radius: 7px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); }
.cp-art.id-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 0 14px; text-align: center; }
.id-tmark.cg-mark { position: relative; z-index: 2; width: 48px; height: 48px; font-size: 21px; border-radius: 10px; background: #2B63FF; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), 0 8px 18px rgba(4, 12, 40, 0.3); margin-top: -8px; }
.id-ttl { position: relative; z-index: 2; font-size: 17px; font-weight: 600; line-height: 1.2; letter-spacing: -0.2px; color: #fff; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.id-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.id-top { display: flex; align-items: center; gap: 8px; min-width: 0; height: 26px; }
.id-type { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 9px; border-radius: 6px; background: #F1F3F7; font-size: 14px; font-weight: 500; color: var(--text); flex: none; }
.id-type .i { font-size: 16px; color: var(--indigo); }
.id-src { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.id-mark { margin-left: auto; flex: none; width: 30px; height: 30px; margin: -2px -5px -2px auto; border: 0; border-radius: 6px; background: none; color: var(--indigo); display: grid; place-items: center; cursor: pointer; }
.id-mark .i { font-size: 22px; stroke-width: 1.8; }
.id-mark.is-on .i { fill: currentColor; }
.id-mark:not(.is-on) { color: var(--text-2); }
.id-mark:hover { background: var(--indigo-bg-2); color: var(--indigo); }
.id-mark:focus-visible, .id-dots:focus-visible, .id-edit:focus-visible, .id-gen:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
span.id-mark { cursor: default; } span.id-mark:hover { background: none; }
.id-main h3 { margin: 7px 0 0; font-size: 17.5px; font-weight: 800; line-height: 1.22; letter-spacing: -0.35px; color: var(--text); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.id-hook { margin: 5px 0 0; font-size: 15.5px; font-weight: 600; line-height: 18px; color: #262B3A; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.id-desc { margin: 7px 0 0; font-size: 14.5px; line-height: 17.5px; color: var(--text-2); opacity: 0.92; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.id-acts { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 9px; }
.id-edit { flex: 0 1 106px; height: 38px; padding: 0 12px; justify-content: center; font-size: 15px; font-weight: 500; gap: 10px; border-radius: 8px; }
.id-edit .i { font-size: 17px; }
.id-gen { flex: 1 1 130px; max-width: 150px; height: 38px; padding: 0 12px; justify-content: center; font-size: 15px; font-weight: 500; gap: 10px; border-radius: 8px; box-shadow: none; }
.id-gen .i { font-size: 17px; }
.id-dots { position: absolute; z-index: 3; top: 8px; right: 8px; width: 30px; height: 30px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.92); color: var(--text); display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 4px rgba(4, 12, 40, 0.25); opacity: 0.9; transition: opacity 0.12s; }
.id-dots .i { font-size: 18px; }
@media (hover: hover) and (pointer: fine) { .id-dots { opacity: 0; } .id-item:hover .id-dots, .id-item:focus-within .id-dots, .id-dots[aria-expanded="true"] { opacity: 1; } }
.id-cover:has(.id-dots) .id-hl { right: 44px; }
.id-dots:hover, .id-dots[aria-expanded="true"] { opacity: 1; background: #fff; color: var(--indigo); }
.id-none { grid-column: 1 / -1; }
/* the menus (Favorites, sort, the card ⋯), fixed to their button */
.id-menu { position: fixed; z-index: 60; min-width: 200px; padding: 5px; border-radius: 9px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 10px 28px rgba(23, 27, 45, 0.14); }
.id-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 6px 10px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; text-align: left; white-space: nowrap; }
.id-menu button:hover, .id-menu button:focus-visible { background: var(--indigo-bg-2); outline: none; }
.id-menu button .i { font-size: 17px; color: var(--text-2); }
.id-menu button .tick { margin-left: auto; color: var(--indigo); visibility: hidden; }
.id-menu button[aria-checked="true"] { font-weight: 600; }
.id-menu button[aria-checked="true"] .tick { visibility: visible; }
.id-menu button .d { display: block; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.id-menu button.is-danger { color: #D63A4E; } .id-menu button.is-danger .i { color: #D63A4E; }
.id-menu button.is-danger:hover, .id-menu button.is-danger:focus-visible { background: #FDECEF; }
.id-menu hr { margin: 4px 2px; border: 0; border-top: 1px solid var(--border-soft); }
/* the idea dialog (MM-41 frame at 560 px) */
.dg.id-form { width: 560px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 24px 28px 22px; box-sizing: border-box; }
.dg.id-form .head { margin-bottom: 16px; gap: 14px; }
.dg.id-form .ic { width: 44px; height: 44px; } .dg.id-form .ic .i { font-size: 22px; }
.dg.id-form h2 { font-size: 22px; }
.id-f { display: block; margin-top: 14px; }
.id-f:first-of-type { margin-top: 0; }
.id-f .lbl { display: block; font-size: 14.5px; font-weight: 600; color: var(--text); margin-bottom: 7px; }
.id-f .lbl .req { color: #D63A4E; margin-left: 2px; }
.id-f input[type=text], .id-f textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 15px; color: var(--text); background: var(--surface); }
.id-f input[type=text] { height: 44px; padding: 0 13px; }
.id-f textarea { padding: 10px 13px; resize: vertical; line-height: 1.4; min-height: 64px; }
.id-f textarea.tall { min-height: 88px; }
.id-f input:focus, .id-f textarea:focus { outline: 0; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.14); }
.id-f.is-invalid input { border-color: #E5303F; box-shadow: 0 0 0 3px rgba(229, 48, 63, 0.12); }
.id-f .meta { display: flex; gap: 12px; margin-top: 5px; font-size: 13px; color: var(--muted); }
.id-f .meta .err { color: #C9202F; font-weight: 500; }
.id-f .meta .cnt { margin-left: auto; font-variant-numeric: tabular-nums; }
.id-f .meta .cnt.is-near { color: #B45309; }
.id-kind { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; }
.id-kind button { height: 36px; padding: 0 16px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 14.5px; font-weight: 500; color: var(--text-2); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.id-kind button .i { font-size: 17px; }
.id-kind button[aria-checked="true"] { background: var(--indigo); color: #fff; }
.id-kind button:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.id-check { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 15px; color: var(--text); cursor: pointer; }
.id-check input { width: 18px; height: 18px; accent-color: var(--indigo); margin: 0; }
.dg.id-form .foot { justify-content: flex-end; margin-top: 20px; }
.dg.id-form .foot .btn-outline, .dg.id-form .foot .btn-primary { height: 44px; font-size: 15.5px; padding: 0 20px; }
/* empty (MM-42 card size) */
.id-body .es { padding: 54px 24px 60px; }
.id-body .es .il { width: 128px; height: 128px; margin-bottom: 20px; }
.id-body .es h3 { font-size: 22px; }
.id-body .es p { font-size: 16px; }
.id-body .es .acts { margin-top: 22px; }
.id-body .es .acts .btn-primary, .id-body .es .acts .btn-outline { height: 44px; font-size: 15.5px; padding: 0 20px; gap: 10px; }
/* read-only: no New idea, Edit, Generate or bookmark toggles */
.id-root.is-readonly .id-new { display: none; }
.id-root.is-readonly .id-item { min-height: 0; }
@media (max-width: 1399px) { .id-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1199px) { .id-tools { margin-left: 0; width: 100%; } .id-search { flex: 1; width: auto; } }
@media (max-width: 899px) { .id-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
  .id-subnav { overflow-x: auto; height: 48px; padding: 0 8px; } .id-subnav .ct-subitem { padding: 0 12px; }
  .id-card { padding: 12px; }
  .id-segs { width: 100%; gap: 6px; } .id-seg { flex: 1 1 auto; justify-content: center; height: 44px; padding: 0 10px 0 12px; gap: 8px; }
  .id-tools { flex-wrap: wrap; gap: 8px; } .id-search { flex: 1 1 100%; height: 44px; }
  .id-menu-btn { flex: 1 1 0; height: 44px; justify-content: center; padding: 0 10px; min-width: 0; } .id-menu-btn .l { overflow: hidden; text-overflow: ellipsis; }
  .id-new { flex: 1 1 100%; height: 44px; justify-content: center; }
  .id-item { gap: 12px; min-height: 0; }
  .id-cover { width: 108px; height: 150px; }
  .id-hl { font-size: 12.5px; left: 9px; top: 10px; } .id-ttl { font-size: 13px; } .id-tmark.cg-mark { width: 34px; height: 34px; font-size: 15px; }
  .id-cmark.cg-mark { width: 24px; height: 24px; font-size: 10px; left: 8px; bottom: 8px; }
  .id-main h3 { white-space: normal; font-size: 16.5px; margin-top: 8px; }
  .id-src { display: none; }
  .id-acts { gap: 8px; } .id-edit, .id-gen { height: 44px; flex: 1 1 0; max-width: none; padding: 0 8px; } .id-dots { width: 36px; height: 36px; top: 6px; right: 6px; }
  .id-mark { width: 44px; height: 44px; margin: -8px -8px -8px auto; }
  .dg.id-form { padding: 20px 18px 18px; }
  .dg.id-form .foot { flex-wrap: wrap; } .dg.id-form .foot .btn-outline, .dg.id-form .foot .btn-primary { flex: 1; justify-content: center; }
}
@media (max-width: 430px) { .id-item { flex-direction: column; } .id-cover { width: 100%; height: 170px; } .id-desc { -webkit-line-clamp: 3; } }
@media (prefers-reduced-motion: reduce) { .id-item.is-new { animation: none; } }

/* ---------- Content-24 · Brand assets (al-) — Content module, plan plans/Content-24.md ---------- */
.al-root { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-mid: #193F94; --cg-tint: #F1F5F9; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter"; }
.al-head { padding-bottom: 14px; }
.al-head .sub { margin-top: 4px; }
.al-ro { margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--muted); }
.al-ro .i { font-size: 16px; }
/* one card: the inner navigation with the two actions, the filters, the tabs, the grid and the footer */
.al-card { padding: 0 16px 4px; min-width: 0; }
.al-top { display: flex; align-items: center; gap: 12px; margin: 0 -16px; padding: 0 8px 0 10px; border-bottom: 1px solid var(--border-soft); }
.al-subnav.ct-subnav { flex: 1 1 auto; min-width: 0; height: 58px; margin: 0; padding: 0; gap: 0; }
.al-subnav .ct-subitem { padding: 0 20px; }
.al-acts { display: flex; align-items: center; gap: 12px; flex: none; }
.al-acts .btn-outline, .al-acts .btn-primary { height: 44px; padding: 0 20px 0 17px; font-size: 15.5px; font-weight: 500; gap: 11px; border-radius: 8px; white-space: nowrap; }
.al-acts .i { font-size: 19px; }
/* the filter row: search + three selects with small labels above (plan §2: 530 px search, 280 px selects, 40 px) */
.al-filters { display: flex; align-items: flex-end; gap: 12px; padding: 12px 0 0; }
.al-search { flex: 1 1 530px; min-width: 220px; max-width: 530px; height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-sizing: border-box; }
.al-search:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.14); }
.al-search .i { font-size: 17px; color: var(--muted); flex: none; }
.al-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: inherit; font-size: 14.5px; color: var(--text); }
.al-search input::placeholder { color: var(--muted-2); }
.al-fgroup { display: flex; flex-direction: column; gap: 3px; flex: 0 1 280px; min-width: 150px; }
.al-flbl { font-size: 11.5px; font-weight: 500; line-height: 1.2; color: var(--muted); padding-left: 1px; }
.al-sel { position: relative; display: flex; }
.al-sel select { appearance: none; -webkit-appearance: none; width: 100%; height: 40px; padding: 0 38px 0 13px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 14.5px; color: var(--text); cursor: pointer; box-sizing: border-box; }
.al-sel select:hover { border-color: #CBD2E1; }
.al-sel select:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.al-sel select.is-set { border-color: #B9C6FF; background: var(--indigo-bg-2); color: var(--indigo); font-weight: 500; }
.al-sel .i { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--text-2); pointer-events: none; }
/* the tabs: an underlined row with count chips */
.al-tabs { display: flex; gap: 6px; margin: 12px 0 0; border-bottom: 1px solid var(--border-soft); overflow-x: auto; scrollbar-width: none; }
.al-tab { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 15px; font-weight: 500; color: var(--text); cursor: pointer; white-space: nowrap; }
.al-tab:hover { color: var(--indigo); }
.al-tab[aria-selected="true"] { color: var(--indigo); font-weight: 600; border-bottom-color: var(--indigo); }
.al-tab:focus-visible { outline: 2px solid var(--indigo); outline-offset: -4px; border-radius: 6px 6px 0 0; }
.al-tab .n { min-width: 26px; height: 22px; padding: 0 7px; border-radius: 999px; background: #F1F3F7; color: var(--text-2); font-size: 12.5px; font-weight: 600; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; box-sizing: border-box; }
.al-tab[aria-selected="true"] .n { background: #E3E9FF; color: var(--indigo); }
/* the grid (plan §2: four columns ≥ 1400 px, three ≥ 1100, two ≥ 700, one below; 20 px gaps) */
.al-body { padding-top: 14px; }
.al-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.al-item { position: relative; border: 1px solid var(--border); border-radius: 10px; padding: 3px; background: var(--surface); min-width: 0; transition: border-color 0.12s, box-shadow 0.12s; }
.al-item:hover { border-color: #CFD6E4; box-shadow: 0 4px 14px rgba(23, 27, 45, 0.07); }
.al-item.is-new { animation: al-in 1.4s ease-out; }
@keyframes al-in { from { box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.35); border-color: var(--indigo); } to { box-shadow: none; } }
.al-item.is-archived .al-prev > * { filter: grayscale(0.75); opacity: 0.75; }
/* the preview, 105 px tall edge to edge with a 6 px inset radius */
.al-prev { position: relative; display: block; text-align: left; width: 100%; height: 105px; margin: 0; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: #F3F5F9; cursor: pointer; }
.al-prev:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.al-prev .cp-art { border-radius: 6px; box-shadow: none; cursor: pointer; }
.al-prev .cp-h { font-size: 17px; left: 16px; bottom: auto; top: 50%; transform: translateY(-38%); letter-spacing: -0.3px; }
.al-prev .cp-h.xs { font-size: 12.5px; left: auto; right: 14px; top: 50%; }
.al-hl { position: absolute; z-index: 2; left: 16px; top: 50%; transform: translateY(-34%); font-size: 20px; font-weight: 700; line-height: 1.04; letter-spacing: -0.5px; color: #fff; text-shadow: 0 1px 8px rgba(4, 12, 40, 0.3); max-width: 50%; }
.al-hl em { font-style: normal; color: #9DBBFF; }
.al-veil { position: absolute; z-index: 1; inset: 0; background: radial-gradient(60% 75% at 50% 58%, rgba(10, 20, 48, 0.82) 0%, rgba(10, 20, 48, 0.55) 55%, rgba(10, 20, 48, 0) 100%); }
.al-hl.is-center { left: 0; right: 0; max-width: none; text-align: center; font-size: 14px; line-height: 1.2; letter-spacing: -0.1px; transform: translateY(-30%); }
.cp-art.a-light .al-hl { color: var(--cg-dark); text-shadow: none; } .cp-art.a-light .al-hl em { color: var(--cg-primary); }
.al-lock { position: absolute; z-index: 2; left: 12px; top: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: #fff; letter-spacing: -0.1px; }
.al-lock .cg-mark { width: 17px; height: 17px; font-size: 7.5px; border-radius: 4px; background: #2563EB; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4); }
.al-hl.is-center ~ .al-lock, .al-lock:has(~ .al-hl.is-center) { left: 50%; transform: translateX(-50%); top: 12px; }
.cp-art.a-light .al-lock { color: var(--cg-dark); }
/* a drawing with a side headline: the picture moves to the right and fades into the background at its left edge */
.cp-art.al-side svg.bg { left: auto; right: 0; width: 60%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); }
/* uploads: the logo on a light card, the light logo on navy, the mark on a checkerboard, the palette, a PDF sheet, a picked image */
.al-logo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 14px; background: linear-gradient(160deg, #FFFFFF 0%, #F1F4F9 100%); }
.al-logo .cg-mark { width: 62px; height: 62px; font-size: 27px; border-radius: 12px; background: #2563EB; }
.al-logo .nm { font-size: 28px; font-weight: 700; letter-spacing: -0.7px; color: #0F172A; }
.al-logo.is-dark { background: radial-gradient(120% 120% at 80% 100%, #1E3A8A 0%, #0E1B3D 65%); }
.al-logo.is-dark .nm { color: #fff; }
.al-logo.is-dark .cg-mark { background: #fff; color: #1E40AF; }
.al-logo.is-mark { background-color: #fff; background-image: conic-gradient(#EEF1F6 25%, transparent 0 50%, #EEF1F6 0 75%, transparent 0); background-size: 16px 16px; }
.al-logo.is-mark .cg-mark { width: 66px; height: 66px; font-size: 28px; border-radius: 15px; box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28); }
.al-pal { position: absolute; inset: 0; background: #0F172A; }
.al-pal .al-lock { top: 12px; left: 14px; font-size: 12.5px; }
.al-pal .al-lock .cg-mark { width: 19px; height: 19px; font-size: 8.5px; }
.al-pal .sw { position: absolute; left: 14px; right: 14px; top: 41px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.al-pal .sw span { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 8.5px; font-weight: 500; letter-spacing: 0.2px; color: #CBD5E1; font-variant-numeric: tabular-nums; }
.al-pal .sw i { display: block; width: 100%; height: 33px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); }
.al-doc { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(160deg, #F6F7FA, #ECEFF5); }
.al-doc .pg { position: relative; z-index: 1; grid-area: 1 / 1; width: 64px; height: 84px; margin-top: 30px; padding: 11px 9px 0; box-sizing: border-box; border-radius: 4px; background: #fff; box-shadow: 0 6px 18px rgba(23, 27, 45, 0.14); display: flex; flex-direction: column; gap: 5px; }
.al-doc .pg.back { z-index: 0; transform: translate(8px, -6px) rotate(6deg); box-shadow: 0 2px 8px rgba(23, 27, 45, 0.08); }
.al-doc .tile { width: 22px; height: 22px; border-radius: 5px; background: #FDECEE; color: #E0344E; display: grid; place-items: center; margin-bottom: 3px; } .al-doc .tile .i { font-size: 13px; }
.al-doc .ln { height: 4px; border-radius: 2px; background: #E4E8EF; } .al-doc .ln.s { width: 60%; }
.al-file { position: absolute; inset: 0; display: grid; place-items: center; background: #fff; background-image: conic-gradient(#F1F3F7 25%, transparent 0 50%, #F1F3F7 0 75%, transparent 0); background-size: 16px 16px; }
.al-file img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.al-file.is-cover img { width: 100%; height: 100%; object-fit: cover; }
/* the pill row, the name with ⋯, the meta */
.al-pills { display: flex; align-items: center; gap: 7px; height: 32px; padding: 6px 7px 0; box-sizing: border-box; }
.al-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 5px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.al-pill .d { width: 8px; height: 8px; border-radius: 50%; flex: none; background: currentColor; }
.al-pill.st-approved { background: #E9F8F0; color: #0C8C60; } .al-pill.st-approved .d { background: #12B981; }
.al-pill.st-pending { background: #FFF4DE; color: #9A5B06; } .al-pill.st-pending .d { background: #F59E0B; }
.al-pill.st-needs-changes { background: #FDECEF; color: #C92F45; } .al-pill.st-needs-changes .d { background: #EF3B4F; }
.al-pill.st-archived { background: #F1F3F7; color: #6B7280; } .al-pill.st-archived .d { background: #9CA3AF; }
.al-pill.st-src { background: #F3F4F7; color: #4B5563; font-weight: 400; } .al-pill.st-src .i { font-size: 13px; color: #4B5563; }
.al-ver { height: 20px; padding: 0 7px; border-radius: 5px; border: 1px solid #C7D2FE; color: var(--indigo); font-size: 11.5px; font-weight: 600; display: inline-grid; place-items: center; }
.al-ibody { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 6px; padding: 5px 4px 7px 7px; }
.al-ibody h3 { margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.35; letter-spacing: -0.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-open { padding: 0; border: 0; background: none; font: inherit; color: var(--text); cursor: pointer; text-align: left; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.al-open:hover { color: var(--indigo); } .al-open:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 3px; }
.al-meta { grid-column: 1; margin-top: 2px; font-size: 13.5px; color: var(--text-3, var(--muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.al-meta .sep { margin: 0 6px; }
.al-dots { grid-column: 2; grid-row: 1; width: 32px; height: 30px; border: 0; border-radius: 7px; background: none; color: var(--text); display: grid; place-items: center; cursor: pointer; }
.al-dots:hover, .al-dots[aria-expanded="true"] { background: #F1F3F8; color: var(--indigo); }
.al-dots:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.al-dots .i { font-size: 19px; }
/* the card menu, fixed under its button */
.al-menu { position: fixed; z-index: 60; min-width: 196px; padding: 5px; border-radius: 9px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 10px 28px rgba(23, 27, 45, 0.14); }
.al-menu button { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; text-align: left; white-space: nowrap; }
.al-menu button:hover, .al-menu button:focus-visible { background: var(--indigo-bg-2); outline: none; }
.al-menu button .i { font-size: 17px; color: var(--text-2); }
/* the footer row: "Showing a–b of n" and the pager */
.al-foot { display: flex; align-items: center; gap: 16px; min-height: 48px; padding: 12px 0 10px; }
.al-foot[hidden] { display: none; }
#al-showing { font-size: 14.5px; color: var(--text-2); }
.al-pager { margin-left: auto; display: flex; gap: 8px; }
.al-pager button { min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); font: inherit; font-size: 14px; font-weight: 500; color: var(--text); cursor: pointer; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.al-pager button:hover:not(:disabled) { border-color: #CBD2E1; background: #F8F9FC; }
.al-pager button[aria-current="page"] { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.al-pager button.is-num:not([aria-current="page"]) { border-color: transparent; background: none; }
.al-pager button.is-num:not([aria-current="page"]):hover { background: #F1F3F8; }
.al-pager button:disabled { color: #C2C7D3; cursor: default; }
.al-pager button .i { font-size: 17px; }
.al-pager button:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
/* no results (MM-42 card size) */
.al-card .es { padding: 44px 24px 52px; }
.al-card .es .il { width: 120px; height: 120px; margin-bottom: 18px; }
.al-card .es h3 { font-size: 22px; }
.al-card .es p { font-size: 16px; }
.al-card .es .acts .btn-outline { height: 42px; font-size: 15px; padding: 0 20px; }
/* read-only: no Upload / Generate (the menus drop Archive) */
.al-root.is-readonly .al-acts { display: none; }
@media (max-width: 1399px) { .al-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1299px) {
  .al-top { flex-wrap: wrap; row-gap: 0; padding-bottom: 12px; } .al-subnav.ct-subnav { flex-basis: 100%; }
  .al-acts { margin-left: 8px; }
  .al-filters { flex-wrap: wrap; } .al-search { flex-basis: 100%; max-width: none; } .al-fgroup { flex: 1 1 180px; }
}
@media (max-width: 1099px) { .al-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .al-card { padding: 0 14px 4px; }
  .al-top { margin: 0 -14px; padding: 0 6px 12px; }
  .al-subnav.ct-subnav { overflow-x: auto; height: 48px; } .al-subnav .ct-subitem { padding: 0 12px; }
  .al-acts { width: 100%; margin: 0 8px; } .al-acts .btn-outline, .al-acts .btn-primary { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 10px; font-size: 14.5px; }
  .al-fgroup { flex: 1 1 calc(50% - 12px); min-width: 0; } .al-sel select { height: 44px; } .al-search { height: 44px; }
  .al-tab { padding: 0 10px; }
  .al-grid { gap: 14px; }
  .al-dots { width: 44px; height: 44px; }
  .al-foot { flex-wrap: wrap; } .al-pager { margin-left: 0; } .al-pager button { min-width: 44px; height: 44px; }
}
@media (max-width: 699px) { .al-grid { grid-template-columns: 1fr; } .al-prev { height: 120px; } }
@media (max-width: 430px) { .al-fgroup { flex-basis: 100%; } .al-acts .i { display: none; } .al-tabs { gap: 0; } .al-tab { padding: 0 7px; gap: 6px; font-size: 14px; } .al-tab .n { min-width: 22px; padding: 0 5px; } }
@media (prefers-reduced-motion: reduce) { .al-item.is-new { animation: none; } .al-item { transition: none; } }
/* Content-24 production additions: an opaque upload on a plain ground, the brand tile of an asset without a thumbnail */
.al-file.is-plain { background-image: none; background-color: #F3F5F9; }
.al-tile .lb-brandlock .cg-mark { width: 46px; height: 46px; font-size: 20px; }
/* the brand look (Content-19 / 20 / 23 / 24): the fallback tiles' marks follow the page root's --cg-* tokens (content/_look.html) */
.lb-brandlock .cg-mark:not(.asset), .wf-bigmark.cg-mark:not(.asset), .id-tmark.cg-mark:not(.asset) { background: var(--cg-primary); }
.lb-brandlock .cg-mark.asset, .wf-bigmark.cg-mark.asset, .id-tmark.cg-mark.asset { background: #fff; padding: 5px; }
.lb-brandlock .cg-mark.asset.dark, .wf-bigmark.cg-mark.asset.dark, .id-tmark.cg-mark.asset.dark { background: var(--cg-dark); }
.lb-brandlock .nm { color: var(--cg-text, #fff); }


/* ---------- Content-25 · New asset pack (apk-) — Content module, plan plans/Content-25.md ---------- */
.apk-root { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-mid: #193F94; --cg-tint: #F1F5F9; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter"; --surface-2: #F4F6FA; }
.apk-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 0 8px; margin: 2px 0 8px; font-size: 14px; color: var(--muted); }
.apk-crumbs a { color: var(--muted); } .apk-crumbs a:hover { color: var(--indigo); }
.apk-crumbs a:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 3px; }
.apk-crumbs .sep { color: var(--muted-2); } .apk-crumbs .current { color: var(--text); font-weight: 500; }
.apk-head { padding-bottom: 14px; }
.apk-head h1 { font-size: 33px; }
.apk-head .sub { font-size: 18px; margin-top: 4px; }
/* the two columns (plan §2: minmax(0, 1fr) 560 px, 20 px gap) */
.apk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 20px; align-items: start; margin: 0; }
.apk-card { padding: 20px 20px 18px; min-width: 0; }
.apk-chead { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.apk-chead h2 { margin: 1px 0 0; font-size: 18.5px; font-weight: 700; letter-spacing: -0.2px; line-height: 1.3; }
.apk-chead p { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.apk-chead > div { flex: 1; min-width: 0; }
.apk-cic { width: 36px; height: 36px; border-radius: 9px; background: var(--indigo-bg-2); color: var(--indigo); display: grid; place-items: center; flex: none; }
.apk-cic .i { font-size: 20px; }
.apk-cic.is-plain { background: none; width: 26px; justify-items: start; } .apk-cic.is-plain .i { font-size: 24px; }
/* the details rows: a 160 px label column + the field */
.apk-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); column-gap: 20px; align-items: start; margin-top: 14px; }
.apk-lbl { padding-top: 11px; font-size: 15px; font-weight: 500; color: var(--text); line-height: 1.3; }
.apk-lbl .req { color: #E0344E; margin-left: 2px; }
.apk-lsub { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--muted); line-height: 1.4; max-width: 140px; }
.apk-field { min-width: 0; }
.apk-input { width: 100%; box-sizing: border-box; height: 42px; padding: 0 13px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 15px; color: var(--text); }
.apk-input:hover { border-color: #CBD2E1; }
.apk-input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.14); }
.apk-input[aria-invalid="true"] { border-color: #E0344E; box-shadow: 0 0 0 3px rgba(224, 52, 78, 0.1); }
.apk-text { height: 84px; min-height: 84px; padding: 10px 13px; resize: vertical; line-height: 1.5; font-size: 14px; display: block; }
.apk-count { margin-top: 4px; text-align: right; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.apk-count.is-near { color: var(--amber-line); font-weight: 500; }
.apk-hint { margin: 10px 0 7px; font-size: 13.5px; color: var(--muted); }
.apk-err { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 13.5px; font-weight: 500; color: #C92F45; }
.apk-err[hidden] { display: none; }
.apk-err::before { content: "!"; width: 16px; height: 16px; border-radius: 50%; background: #E0344E; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: none; }
/* the checkboxes: 20 px, indigo */
.apk-cb { width: 19px; height: 19px; margin: 0; accent-color: var(--indigo); flex: none; cursor: pointer; }
.apk-cb:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
/* the category rows (46 px: the checkbox, the 66 × 36 thumbnail, the text, the stepper with 32 px buttons) */
.apk-cats { display: flex; flex-direction: column; gap: 6px; }
.apk-cats.is-invalid .apk-cat { border-color: #F2B8C1; }
.apk-cat { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 4px 10px 4px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); transition: border-color 0.12s, background 0.12s; }
.apk-cat:hover { border-color: #D3D9E6; }
.apk-cat-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; cursor: pointer; }
.apk-thumb { position: relative; width: 66px; height: 36px; border-radius: 4px; overflow: hidden; flex: none; background: #0E1B3D; }
.apk-thumb .cp-art { border-radius: 4px; box-shadow: none; cursor: inherit; }
.apk-thumb .cp-lock { transform: scale(0.55); transform-origin: top left; }
.apk-cat-t { min-width: 0; display: flex; flex-direction: column; }
.apk-cat-t b { font-size: 14px; font-weight: 600; line-height: 1.3; }
.apk-cat-t span { font-size: 12.5px; color: var(--muted); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apk-cat.is-off .apk-thumb { opacity: 0.45; filter: saturate(0.5); }
.apk-cat.is-off .apk-cat-t b { color: var(--text-2); }
.apk-step { display: flex; align-items: center; gap: 4px; flex: none; }
.apk-step[hidden] { display: none; }
.apk-stepb { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text-2); display: grid; place-items: center; cursor: pointer; padding: 0; }
.apk-stepb .i { font-size: 16px; }
.apk-stepb[data-step="1"] { color: var(--indigo); }
.apk-stepb:hover:not(:disabled) { border-color: #C7D0FF; background: var(--indigo-bg-2); }
.apk-stepb:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.apk-stepb:disabled { color: #C3C8D4; cursor: not-allowed; background: #FAFBFC; }
.apk-n { min-width: 30px; text-align: center; font-size: 14.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.apk-total { display: flex; align-items: center; justify-content: space-between; height: 40px; margin-top: 10px; padding: 0 16px; border-radius: 8px; background: var(--surface-2); font-size: 14px; font-weight: 600; }
.apk-total b { font-size: 14.5px; font-variant-numeric: tabular-nums; }
.apk-total.is-max b::after { content: " · maximum"; font-weight: 500; color: var(--muted); font-size: 13px; }
/* the ratio tiles: 64 px, three across, the checked tint */
.apk-ratios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.apk-ratio { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 8px 14px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); cursor: pointer; transition: border-color 0.12s, background 0.12s; }
.apk-ratio:hover { border-color: #C7D0FF; }
.apk-ratio.is-on { border-color: #7C93FF; background: #F1F4FF; }
.apk-ratio:has(:focus-visible) { box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.18); }
.apk-ratios.is-invalid .apk-ratio { border-color: #F2B8C1; }
.apk-ratio-t { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.apk-ratio-t b { font-size: 14px; font-weight: 600; }
.apk-ratio-t span { font-size: 12.5px; color: var(--muted); }
.apk-ratio.is-on .apk-ratio-t b, .apk-ratio.is-on .apk-ratio-t span { color: var(--indigo); }
/* the right column: the references and the model in one card */
.apk-side { padding: 22px 20px 20px; }
.apk-chead.is-flat { margin-bottom: 18px; }
.apk-h2row { display: flex; align-items: center; gap: 12px; min-height: 26px; } .apk-h2row h2 { flex: 1; min-width: 0; }
.apk-change { margin: -4px 0 -4px auto; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); font: inherit; font-size: 13.5px; font-weight: 500; color: var(--indigo); cursor: pointer; flex: none; }
.apk-change .i { font-size: 15px; }
.apk-change:hover { background: var(--indigo-bg-2); border-color: #C7D0FF; }
.apk-change:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.apk-refs { display: grid; gap: 12px; }
.apk-ref { min-width: 0; }
.apk-ref .pv { position: relative; height: 132px; border-radius: 6px; overflow: hidden; background: #0E1B3D; }
.apk-ref .pv .cp-art { border-radius: 6px; box-shadow: none; cursor: default; }
.apk-ref.t-light .pv { background: #fff; border: 1px solid var(--border); box-sizing: border-box; }
.apk-ref h3 { margin: 10px 0 0; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.apk-ref p { margin: 3px 0 0; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apk-refs-empty { padding: 18px; border: 1px dashed #D3D9E6; border-radius: 8px; font-size: 13.5px; color: var(--muted); text-align: center; }
.apk-ref .pv { container-type: size; }
.apk-model-sec { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border-soft); }
.apk-model-sec .apk-chead { margin-bottom: 18px; }
.apk-model { display: flex; align-items: center; gap: 12px; width: 100%; height: 48px; padding: 0 14px 0 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); font: inherit; color: var(--text); cursor: pointer; text-align: left; }
.apk-model:hover { border-color: #CBD2E1; }
.apk-model:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.apk-model > .i { margin-left: auto; font-size: 17px; color: var(--text-2); transition: transform 0.12s; }
.apk-model[aria-expanded="true"] > .i { transform: rotate(180deg); }
.apk-oai { width: 30px; height: 30px; border-radius: 50%; background: #10A37F; color: #fff; display: grid; place-items: center; flex: none; }
.apk-oai .i { font-size: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.apk-oai.is-off { background: #E9ECF3; color: #8A90A2; }
.apk-model .nm { font-size: 15.5px; font-weight: 600; }
.apk-conn { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 5px; background: #E9F8F0; color: #0C8C60; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.apk-conn .d { width: 7px; height: 7px; border-radius: 50%; background: #12B981; }
.apk-conn.is-off { background: #F1F3F7; color: #6B7280; } .apk-conn.is-off .d { background: #9CA3AF; }
.apk-model.is-off { cursor: default; }
.apk-connect { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 14px; font-weight: 600; color: var(--indigo); white-space: nowrap; }
.apk-connect:hover { text-decoration: underline; }
.apk-connect .i { font-size: 15px; }
.apk-strip { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 12px; padding: 8px 14px; box-sizing: border-box; border-radius: 8px; background: var(--surface-2); font-size: 13.5px; color: var(--text-2); }
.apk-strip .ok { width: 20px; height: 20px; border-radius: 50%; background: #12B981; color: #fff; display: grid; place-items: center; flex: none; }
.apk-strip .ok .i { font-size: 13px; stroke-width: 3; }
.apk-strip.is-warn { background: #FFF6E5; color: #8A5A0B; } .apk-strip.is-warn .ok { background: #F59E0B; }
.apk-strip a { margin-left: auto; font-weight: 600; color: var(--indigo); white-space: nowrap; }
/* the model menu, fixed under its button */
.apk-menu { position: fixed; z-index: 60; min-width: 260px; padding: 5px; border-radius: 9px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 10px 28px rgba(23, 27, 45, 0.14); }
.apk-menu [role="menuitem"], .apk-menu [role="menuitemradio"] { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 10px; box-sizing: border-box; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; text-align: left; }
.apk-menu [role="menuitem"]:hover, .apk-menu [role="menuitem"]:focus-visible, .apk-menu [role="menuitemradio"]:hover, .apk-menu [role="menuitemradio"]:focus-visible { background: var(--indigo-bg-2); outline: none; }
.apk-menu .i { font-size: 17px; color: var(--text-2); flex: none; }
.apk-menu .t { display: flex; flex-direction: column; } .apk-menu .t small { font-size: 12.5px; color: var(--muted); }
.apk-menu [aria-checked="true"] .i { color: var(--indigo); }
.apk-menu hr { border: 0; border-top: 1px solid var(--border-soft); margin: 4px 2px; }
/* the footer row outside the cards */
.apk-foot { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding-bottom: 4px; }
.apk-back.btn-outline { height: 48px; padding: 0 30px; font-size: 16px; font-weight: 600; }
.apk-review.btn-primary { height: 48px; margin-left: auto; padding: 0 22px; font-size: 16px; font-weight: 600; gap: 12px; box-shadow: none; }
.apk-review .i { font-size: 19px; }
.apk-review:disabled { background: #AEBBFD; cursor: not-allowed; }
.apk-note { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; font-size: 14px; font-weight: 500; color: #8A5A0B; }
.apk-note[hidden] { display: none; }
.apk-note .i { font-size: 17px; color: #E08A0B; }
.apk-note:not([hidden]) + .apk-review { margin-left: 0; }
/* the references picker: a small modal with the approved images, at most four */
/* narrower windows: a smaller right column, then one column; phones stack the label column and the ratio tiles */
@media (max-width: 1480px) { .apk-grid { grid-template-columns: minmax(0, 1fr) 440px; } .apk-ref .pv { height: 110px; } }
@media (max-width: 1200px) { .apk-grid { grid-template-columns: minmax(0, 1fr); } .apk-ref .pv { height: 132px; } }
@media (max-width: 768px) {
  .apk-head h1 { font-size: 26px; } .apk-head .sub { font-size: 15.5px; }
  .apk-row { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .apk-lbl { padding-top: 0; } .apk-lsub { max-width: none; }
  .apk-hint { margin-top: 0; }
  .apk-ratios { grid-template-columns: minmax(0, 1fr); gap: 8px; } .apk-ratio { min-height: 52px; }
  .apk-ratio-t { flex-direction: row; flex-wrap: wrap; column-gap: 8px; align-items: baseline; }
  .apk-refs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .apk-ref .pv { height: 96px; }
  .apk-card, .apk-side { padding: 16px 14px; }
  .apk-foot { flex-wrap: wrap; } .apk-note { order: 3; flex: 1 1 100%; margin: 0; }
  .apk-back.btn-outline { padding: 0 22px; }
}
@media (max-width: 480px) {
  .apk-cat { flex-wrap: wrap; padding: 8px 10px; row-gap: 6px; }
  .apk-thumb { width: 52px; height: 30px; }
  .apk-cat-main { gap: 10px; flex: 1 1 100%; }
  .apk-cat-t span { white-space: normal; }
  .apk-step { margin-left: 29px; }
  .apk-model .nm { font-size: 14.5px; } .apk-model { gap: 9px; }
}

/* ---------- Content-27 · Choose references (rp2-) — the shared reference picker modal, plan plans/Content-27.md ---------- */
.rp2-backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(23, 27, 45, 0.45); }
/* the MM-41 frame at 976 px (max-height 90 vh, radius 16) */
.rp2-modal { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-mid: #193F94; --cg-tint: #F1F5F9; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter";
  position: relative; width: 976px; max-width: 100%; max-height: 90vh; display: flex; flex-direction: column; padding: 24px 33px 24px; box-sizing: border-box;
  background: var(--surface); border-radius: 16px; box-shadow: 0 24px 64px rgba(14, 20, 45, 0.28); color: var(--text); }
.rp2-modal:focus { outline: none; }
.rp2-modal :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.rp2-x { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--text-2); cursor: pointer; }
.rp2-x .i { font-size: 22px; } .rp2-x:hover { background: #F3F4F8; }
/* the head: 30 px / 800 + the 17 px lead */
.rp2-head { flex: none; padding-right: 44px; }
.rp2-head h2 { margin: 0; font-size: 30px; font-weight: 800; line-height: 38px; letter-spacing: -0.5px; }
.rp2-head p { margin: 4px 0 0; font-size: 17px; line-height: 24px; color: var(--muted); }
/* the search: 44 px across */
.rp2-search { flex: none; position: relative; display: block; margin-top: 21px; }
.rp2-search .i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 19px; color: var(--text-2); pointer-events: none; }
.rp2-search input { width: 100%; height: 43px; box-sizing: border-box; padding: 0 14px 0 45px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  font: inherit; font-size: 15px; color: var(--text); }
.rp2-search input::placeholder { color: var(--muted); }
.rp2-search input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.rp2-search input::-webkit-search-cancel-button { cursor: pointer; }
/* the two-column body: the 210 px role list with a 1 px divider, the 3 × 218 × 145 grid scrolling inside */
.rp2-body { flex: 1 1 331px; min-height: 170px; height: 331px; display: grid; grid-template-columns: 209px minmax(0, 1fr); margin-top: 18px; }
.rp2-roles { display: flex; flex-direction: column; gap: 1px; padding-right: 14px; border-right: 1px solid var(--border-soft); min-height: 0; overflow: auto; }
.rp2-role { display: flex; align-items: center; gap: 13px; height: 44px; flex: none; padding: 0 12px 0 10px; border: 0; border-radius: 7px; background: none; font: inherit;
  font-size: 15px; color: var(--text); cursor: pointer; text-align: left; }
.rp2-role .i { font-size: 20px; color: var(--text-2); }
.rp2-role .lb { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp2-role .n { font-size: 14.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rp2-role:hover { background: #F5F6FA; }
.rp2-role.is-active { background: var(--indigo-bg); color: var(--indigo); font-weight: 500; }
.rp2-role.is-active .i, .rp2-role.is-active .n { color: var(--indigo); }
.rp2-role.is-zero .n { color: var(--muted-2); }
.rp2-gridwrap { min-height: 0; overflow: auto; padding: 0 2px 24px 15px; }
.rp2-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 15px; padding-top: 1px; }
.rp2-tile { position: relative; height: 145px; border-radius: 8px; overflow: hidden; cursor: pointer; background: #0E1B3D; outline-offset: 2px; }
.rp2-tile:focus-visible { outline: 2px solid var(--indigo); }
.rp2-tile.is-dis { cursor: not-allowed; }
.rp2-tile.is-dis .rp2-cb { opacity: 0.5; }
.rp2-pv { position: absolute; inset: 0; container-type: size; }
.rp2-pv > .cp-art { border-radius: 8px; box-shadow: none; cursor: inherit; }
.rp2-badge { position: absolute; left: 9px; bottom: 9px; z-index: 2; height: 22px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 6px; background: #fff;
  color: #1B2233; font-size: 12.5px; font-weight: 500; box-shadow: 0 1px 3px rgba(4, 12, 40, 0.16); }
.rp2-cb { position: absolute; top: 11px; right: 11px; z-index: 2; width: 22px; height: 22px; box-sizing: border-box; display: grid; place-items: center; border-radius: 5px;
  border: 2px solid #fff; background: rgba(8, 14, 36, 0.28); color: #fff; box-shadow: 0 1px 3px rgba(4, 12, 40, 0.25); }
.rp2-cb .i { font-size: 15px; stroke-width: 3; opacity: 0; }
.rp2-tile.t-light .rp2-cb { border-color: #8E97AB; background: #fff; box-shadow: none; }
.rp2-tile.is-on .rp2-cb { background: #2F5BF0; border-color: #fff; box-shadow: 0 0 0 1px rgba(47, 91, 240, 0.4); }
.rp2-tile.is-on .rp2-cb .i { opacity: 1; }
/* the asset name on hover / focus */
.rp2-name { position: absolute; left: 0; right: 0; top: 0; z-index: 1; padding: 10px 44px 18px 11px; font-size: 12.5px; font-weight: 600; color: #fff; line-height: 1.3;
  background: linear-gradient(180deg, rgba(8, 14, 36, 0.72), rgba(8, 14, 36, 0)); opacity: 0; transition: opacity 0.12s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.rp2-tile:hover .rp2-name, .rp2-tile:focus-visible .rp2-name { opacity: 1; }
/* the drawings (plan §1: the TH tile, the wordmark, the phone app, the blue wave, the light abstract; the laptop is Content-11's) */
.rp2-art { position: absolute; inset: 0; overflow: hidden; }
.rp2-art svg.bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rp2-art.a-th { background: linear-gradient(135deg, #3D6BFF 0%, #2150F0 55%, #1A3FD0 100%); display: grid; place-items: center; }
.rp2-art.a-word { background: radial-gradient(120% 120% at 80% 100%, #17275E 0%, #0B1330 62%); display: grid; place-items: center; }
.rp2-art.a-phone { background: radial-gradient(110% 110% at 70% 20%, #1C2C63 0%, #0A1022 70%); }
.rp2-art.a-wave { background: linear-gradient(160deg, #3F63FF 0%, #1D3FE0 45%, #0E23A8 100%); }
.rp2-art.a-light { background: linear-gradient(150deg, #E9F0FA 0%, #F6F9FD 50%, #D7E3F5 100%); }
/* the empty state and "No references match." */
.rp2-none { grid-column: 1 / -1; display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 290px; text-align: center; color: var(--muted); font-size: 14.5px; }
.rp2-none .ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--indigo-bg-2); color: var(--indigo); margin-bottom: 6px; }
.rp2-none .ic .i { font-size: 26px; }
.rp2-none b { color: var(--text); font-size: 16px; font-weight: 600; }
.rp2-none .act { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  font: inherit; font-size: 14px; font-weight: 500; color: var(--indigo); cursor: pointer; text-decoration: none; }
.rp2-none .act:hover { background: var(--indigo-bg-2); } .rp2-none .act .i { font-size: 16px; }
.rp2-body.is-empty { grid-template-columns: minmax(0, 1fr); }
.rp2-body.is-empty .rp2-roles { display: none; }
.rp2-body.is-empty .rp2-gridwrap { padding-left: 0; }
/* the selected strip under a 1 px rule: the chips 190 × 74 with a 62 × 62 thumbnail */
.rp2-sel { flex: none; margin: 0 -16px; padding: 18px 16px 0; border-top: 1px solid var(--border-soft); }
.rp2-sel-h { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.rp2-sel-h h3 { margin: 0; font-size: 16px; font-weight: 700; line-height: 22px; }
.rp2-sum { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
.rp2-sum .i { font-size: 18px; color: var(--green); }
.rp2-sum .dot { margin: 0 2px; }
.rp2-sum.is-warn .note { color: var(--amber-text); }
.rp2-sum.is-none .i { color: var(--muted-2); }
.rp2-chips { display: flex; gap: 10px; margin-top: 18px; min-height: 74px; }
.rp2-chip { position: relative; display: flex; gap: 20px; width: 190px; height: 74px; box-sizing: border-box; padding: 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); flex: none; }
.rp2-cpv { position: relative; width: 62px; height: 62px; border-radius: 4px; overflow: hidden; flex: none; background: #0E1B3D; container-type: size; }
.rp2-cpv > .cp-art { border-radius: 4px; box-shadow: none; cursor: default; }
.rp2-pill { align-self: flex-start; margin-top: 6px; height: 22px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 6px; background: var(--indigo-bg); color: var(--indigo);
  font-size: 13px; font-weight: 500; white-space: nowrap; }
.rp2-rm { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 6px; background: none; color: var(--text-2); cursor: pointer; }
.rp2-rm .i { font-size: 17px; } .rp2-rm:hover { background: #F3F4F8; color: var(--text); }
.rp2-chips-empty { display: flex; align-items: center; height: 74px; font-size: 14px; color: var(--muted); }
/* the footer: right-aligned, 44 px */
.rp2-foot { flex: none; display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 3px; }
.rp2-foot .btn-outline, .rp2-foot .btn-primary { height: 44px; padding: 0 21px; border-radius: 8px; font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; justify-content: center; }
.rp2-foot .btn-outline { color: var(--text); padding: 0 22px; }
.rp2-foot .btn-primary { border: 0; box-shadow: 0 4px 12px rgba(59, 91, 253, 0.22); }
.rp2-foot .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
/* ≤ 768 px: a bottom sheet, the role list as a chip row */
@media (max-width: 768px) {
  .rp2-backdrop { place-items: end center; padding: 0; }
  .rp2-modal { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; padding: 18px 16px 16px; }
  .rp2-x { top: 10px; right: 8px; }
  .rp2-head h2 { font-size: 22px; line-height: 28px; }
  .rp2-head p { font-size: 14.5px; line-height: 20px; }
  .rp2-search { margin-top: 14px; }
  .rp2-body { display: flex; flex-direction: column; height: auto; flex: 1 1 auto; min-height: 0; margin-top: 12px; }
  .rp2-roles { flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 0 0 10px; border-right: 0; overflow: visible; flex: none; }
  .rp2-role { height: 34px; gap: 6px; padding: 0 10px; border: 1px solid var(--border); border-radius: 17px; font-size: 13.5px; }
  .rp2-role .i { font-size: 16px; }
  .rp2-role .lb { flex: none; }
  .rp2-role.is-active { border-color: #C7D0FF; }
  .rp2-gridwrap { flex: 1 1 auto; padding: 2px 2px 12px; }
  .rp2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rp2-tile { height: auto; aspect-ratio: 218 / 145; }
  .rp2-name { display: none; }
  .rp2-none { min-height: 160px; }
  .rp2-sel { margin: 0 -16px; padding: 12px 16px 0; }
  .rp2-sel-h { gap: 4px 14px; }
  .rp2-chips { flex-wrap: wrap; gap: 8px; margin-top: 10px; min-height: 0; }
  .rp2-chip { width: auto; flex: 1 1 150px; min-width: 0; height: 58px; gap: 10px; padding: 5px; }
  .rp2-cpv { width: 46px; height: 46px; }
  .rp2-pill { margin-top: 3px; padding: 0 8px; font-size: 12.5px; }
  .rp2-chips-empty { height: 40px; }
  .rp2-foot { margin-top: 12px; }
  .rp2-foot .btn-outline, .rp2-foot .btn-primary { flex: 1; min-height: 44px; padding: 0 12px; }
}

/* ---------- Content-25 / 27 build additions (apk- / rp2-): real thumbnails in place of the prototype drawings ---------- */
.apk-thumb.is-icon { display: grid; place-items: center; background: linear-gradient(135deg, var(--cg-primary, #2563EB) 0%, var(--cg-dark, #0E1B3D) 100%); color: #fff; }
.apk-thumb.is-icon .i { font-size: 18px; }
.apk-ref .pv img, .rp2-pv img, .rp2-cpv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.apk-ref.t-light .pv img, .rp2-tile.t-light .rp2-pv img, .rp2-chip.t-light .rp2-cpv img { object-fit: contain; padding: 8%; box-sizing: border-box; }
.apk-ref .pv .ph, .rp2-pv .ph, .rp2-cpv .ph { position: absolute; inset: 0; display: grid; place-items: center; color: #9DB0E0; }
.apk-ref .pv .ph .i, .rp2-pv .ph .i { font-size: 28px; }
.rp2-tile.t-light, .rp2-chip.t-light .rp2-cpv { background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.rp2-tile[hidden] { display: none; }
.rp2-tile.is-skel { cursor: default; background: #EEF0F5; background: linear-gradient(90deg, #E9ECF3 25%, #F4F6FB 50%, #E9ECF3 75%); background-size: 200% 100%; animation: sk 1.2s infinite; }
.rp2-roles .ld-bar { margin: 12px 10px; }
.rp2-err { grid-column: 1 / -1; }
.apk-root .apk-err:empty { display: none; }
.rp2-none[hidden], .rp2-none .act[hidden] { display: none; }
.apk-model-wrap:empty { display: none; }

/* ---------- Content-26 · Asset details (as-) — the asset data sheet drawer over the brand asset library, plan plans/Content-26.md ---------- */
.as-backdrop { position: fixed; inset: 0; background: rgba(23, 27, 45, 0.36); z-index: 62; }
.as-drawer { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-mid: #193F94; --cg-tint: #F1F5F9; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter";
  position: fixed; top: 0; right: 0; bottom: 0; width: 596px; max-width: 100vw; background: var(--surface); box-shadow: -12px 0 40px rgba(23, 27, 45, 0.18); display: flex; flex-direction: column; z-index: 63; }
.as-drawer:focus { outline: none; }
.as-drawer :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
/* the head (plan §2: 64 px, 22 px / 800) */
.as-head { flex: none; display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 16px 0 22px; border-bottom: 1px solid var(--border-soft); box-sizing: border-box; }
.as-head h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.3px; line-height: 27px; }
.as-head .close { margin-left: auto; width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); background: none; border: 0; cursor: pointer; flex: none; }
.as-head .close .i { font-size: 22px; } .as-head .close:hover { background: #F3F4F8; }
.as-ro { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 7px; background: #F1F3F7; color: var(--text-2); font-size: 13px; font-weight: 500; white-space: nowrap; }
.as-ro .i { font-size: 15px; } .as-ro + .close { margin-left: 0; }
.as-body { flex: 1; overflow: auto; padding: 12px 22px 16px; }
/* the preview: edge to edge inside the padding, 296 px, radius 10, the pill 12 px from the top right */
.as-prev { position: relative; height: 296px; margin: 0; border-radius: 10px; overflow: hidden; background: #F3F5F9; }
.as-art { position: absolute; inset: 0; }
.as-art > .cp-art { border-radius: 10px; box-shadow: none; cursor: default; }
.as-pill { position: absolute; z-index: 3; top: 12px; right: 12px; }
.as-pill .al-pill { height: 26px; padding: 0 11px 0 10px; gap: 7px; border-radius: 13px; font-size: 13.5px; box-shadow: 0 1px 4px rgba(4, 12, 40, 0.12); }
.as-pill .al-pill .d { width: 9px; height: 9px; }
/* the library drawings at the drawer size (.as-big: the preview and the 552 × 296 layer of a version thumbnail; the card's lockup, headline
   and marks scaled up, a side drawing spread over the whole width and faded in behind the headline) */
.as-big .cp-art.al-side svg.bg { width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 46%); mask-image: linear-gradient(90deg, transparent 0, #000 46%); }
.as-big .al-lock { left: 26px; top: 24px; gap: 10px; font-size: 18px; }
.as-big .al-lock .cg-mark { width: 44px; height: 44px; font-size: 19px; border-radius: 9px; }
.as-big .al-hl { left: 28px; font-size: 38px; line-height: 1.08; letter-spacing: -0.8px; transform: translateY(-22%); max-width: 58%; }
.as-big .al-hl.is-center { left: 0; font-size: 30px; max-width: none; transform: translateY(-20%); }
.as-big .al-hl.is-center ~ .al-lock, .as-big .al-lock:has(~ .al-hl.is-center) { top: 30px; }
.as-big .cp-h { font-size: 36px; }
.as-big .cp-lock .cg-mark { width: 40px; height: 40px; font-size: 17px; border-radius: 9px; }
.as-big .al-logo { gap: 22px; } .as-big .al-logo .cg-mark { width: 104px; height: 104px; font-size: 46px; border-radius: 20px; } .as-big .al-logo .nm { font-size: 46px; letter-spacing: -1.2px; }
.as-big .al-logo.is-mark { background-size: 26px 26px; } .as-big .al-logo.is-mark .cg-mark { width: 118px; height: 118px; font-size: 50px; border-radius: 26px; }
.as-big .al-pal .al-lock { top: 22px; left: 26px; font-size: 18px; } .as-big .al-pal .al-lock .cg-mark { width: 30px; height: 30px; font-size: 13px; }
.as-big .al-pal .sw { left: 26px; right: 26px; top: 88px; gap: 14px; } .as-big .al-pal .sw i { height: 120px; border-radius: 8px; } .as-big .al-pal .sw span { gap: 10px; font-size: 13px; }
/* transparency: a checkerboard behind (light, or dark for a light-on-dark variant) */
.as-prev.is-clear { background-color: #fff; background-image: conic-gradient(#EEF0F4 25%, transparent 0 50%, #EEF0F4 0 75%, transparent 0); background-size: 26px 26px; box-shadow: inset 0 0 0 1px var(--border); }
.as-prev.is-clear .al-logo:not(.is-dark) { background: transparent; }
.as-prev.is-clear.is-dark { background-color: #1B2233; background-image: conic-gradient(#232B3E 25%, transparent 0 50%, #232B3E 0 75%, transparent 0); box-shadow: none; }
.as-prev.is-clear.is-dark .al-logo { background: transparent; }
/* a PDF: the document sheet with "Open file" */
.as-prev.is-doc .al-doc .pg { width: 118px; height: 156px; margin-top: 0; margin-bottom: 44px; padding: 20px 16px 0; gap: 9px; }
.as-prev.is-doc .al-doc .tile { width: 36px; height: 36px; border-radius: 8px; } .as-prev.is-doc .al-doc .tile .i { font-size: 20px; }
.as-prev.is-doc .al-doc .ln { height: 7px; }
.as-openfile { position: absolute; z-index: 3; left: 50%; bottom: 22px; transform: translateX(-50%); height: 38px; padding: 0 14px; gap: 8px; font-size: 14px; font-weight: 500; border-radius: 8px; background: #fff; white-space: nowrap; }
.as-openfile .i { font-size: 17px; }
/* the name, the description */
.as-name { margin: 16px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -0.3px; line-height: 27px; color: var(--text); overflow-wrap: anywhere; }
.as-desc { margin: 7px 0 0; font-size: 15.5px; line-height: 22px; color: var(--text-2); }
/* the facts: four columns split by 1 px rules (label 13.5 px, value 15 px with an 18 px icon) */
.as-facts { display: flex; justify-content: space-between; margin: 20px 0 0; }
.as-facts > div { flex: 0 1 auto; min-width: 0; padding: 0 10px 0 16px; border-left: 1px solid var(--border-soft); }
.as-facts > div:first-child { padding-left: 0; border-left: 0; }
.as-facts > div:last-child { padding-right: 0; }
.as-facts dt { font-size: 13.5px; line-height: 17px; color: var(--muted); }
.as-facts dd { margin: 7px 0 0; display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 20px; color: var(--text); }
.as-facts dd .i { font-size: 18px; flex: none; margin-top: 1px; color: var(--text-2); }
.as-facts dd > span { min-width: 0; white-space: nowrap; }
.as-facts .dt { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }
/* the tags (30 px chips on indigo-50) */
.as-tags { margin-top: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--border-soft); }
.as-tags h4 { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 18px; color: var(--text); }
.as-tags ul { list-style: none; margin: 9px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 12px; }
.as-tags li { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 15px; background: var(--indigo-bg-2, #EEF1FF); color: var(--indigo); font-size: 14px; font-weight: 500; }
.as-none { margin: 9px 0 0; font-size: 14.5px; color: var(--muted); }
/* the tabs (the MM tab language: underline, icon + label) */
.as-tabs { display: flex; gap: 8px; margin-top: 2px; border-bottom: 1px solid var(--border-soft); overflow-x: auto; scrollbar-width: none; }
.as-tab { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 14px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 15px; font-weight: 500; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.as-tab .i { font-size: 18px; }
.as-tab:hover { color: var(--indigo); }
.as-tab[aria-selected="true"] { color: var(--indigo); font-weight: 600; border-bottom-color: var(--indigo); }
.as-tab:focus-visible { outline-offset: -4px; border-radius: 6px 6px 0 0; }
.as-panel { padding-top: 14px; }
.as-panel:focus { outline: none; } .as-panel:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 6px; }
/* Details: a 115 px label column */
.as-dl { display: grid; grid-template-columns: 115px minmax(0, 1fr); gap: 5px 0; margin: 0; font-size: 14px; line-height: 20px; }
.as-dl dt { color: var(--muted); } .as-dl dd { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }
.as-link { padding: 0; border: 0; background: none; font: inherit; color: var(--indigo); font-weight: 500; cursor: pointer; }
.as-link:hover { text-decoration: underline; text-underline-offset: 2px; }
/* Versions: thumbnail · v{n} · pill · date · Current */
.as-vhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 14px; color: var(--muted); }
.as-compare { height: 34px; padding: 0 12px; gap: 7px; font-size: 13.5px; font-weight: 500; border-radius: 8px; white-space: nowrap; }
.as-compare .i { font-size: 16px; }
.as-vers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.as-ver { display: grid; grid-template-columns: 88px auto auto minmax(0, 1fr) auto; align-items: center; column-gap: 14px; padding: 7px 12px 7px 7px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; }
.as-ver.is-current { border-color: #C9D4FF; background: #F7F9FF; }
.as-ver b { font-size: 15px; font-weight: 700; color: var(--text); }
.as-ver .dt { color: var(--muted); white-space: nowrap; }
.as-vthumb { position: relative; width: 88px; height: 47px; border-radius: 6px; overflow: hidden; background: #F3F5F9; }
.as-vthumb .sc { position: absolute; left: 0; top: 0; width: 552px; height: 296px; transform: scale(0.1594); transform-origin: 0 0; }
.as-vthumb .cp-art { border-radius: 0; box-shadow: none; }
.as-cur { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 6px; background: #E3E9FF; color: var(--indigo); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.as-cur .i { font-size: 13px; stroke-width: 3; }
/* Usage: one button row per content item / job / idea */
.as-use { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.as-use button { width: 100%; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 18px; align-items: center; column-gap: 12px; min-height: 56px; padding: 8px 14px 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font: inherit; text-align: left; cursor: pointer; }
.as-use button:hover { border-color: #C9D4FF; background: #FAFBFF; }
.as-use .ti { width: 36px; height: 36px; border-radius: 8px; background: #EEF1FF; color: var(--indigo); display: grid; place-items: center; }
.as-use .ti .i { font-size: 18px; }
.as-use .tx { min-width: 0; }
.as-use .tx b { display: block; font-size: 15px; font-weight: 600; line-height: 20px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-use .tx span { display: block; font-size: 13.5px; line-height: 18px; color: var(--muted); }
.as-use .go { font-size: 17px; color: var(--muted); }
.as-cst { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; font-size: 12.5px; font-weight: 500; white-space: nowrap; background: #F1F3F7; color: var(--text-2); }
.as-cst.st-pending-review { background: #FFF4DE; color: #9A5B06; } .as-cst.st-approved { background: #E9F8F0; color: #0C8C60; } .as-cst.st-published { background: #EEF1FF; color: var(--indigo); }
.as-empty { margin-top: 2px; }
/* the footer: Download (48 px primary), the secondary outline, "More" at the right */
.as-foot.is-over { box-shadow: 0 -1px 0 var(--border-soft); }
.as-foot { position: relative; flex: none; display: flex; align-items: center; gap: 11px; padding: 14px 21px 26px 22px; background: var(--surface); }
.as-foot > button { height: 48px; padding: 0 20px; gap: 10px; font-size: 15.5px; font-weight: 500; border-radius: 8px; white-space: nowrap; box-shadow: none; }
.as-foot > button .i { font-size: 19px; }
.as-foot .btn-primary { padding: 0 22px 0 19px; background: #1D4FF2; } .as-foot .btn-primary:hover { background: #1843D6; }
.as-foot .btn-outline { border: 1px solid #D5DAE4; color: var(--text); }
.as-more { margin-left: auto; padding: 0 14px 0 16px !important; }
.as-more .chev { font-size: 17px !important; margin-left: 2px; transition: transform 0.15s; }
.as-more[aria-expanded="true"] .chev { transform: rotate(180deg); }
.as-menu { position: absolute; right: 21px; bottom: calc(100% - 6px); min-width: 238px; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 12px 32px rgba(23, 27, 45, 0.16); z-index: 2; }
.as-menu button { width: 100%; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 14.5px; color: var(--text); text-align: left; cursor: pointer; white-space: nowrap; }
.as-menu button .i { font-size: 17px; color: var(--text-2); }
.as-menu button:hover, .as-menu button:focus { background: #F3F5FA; outline: none; }
.as-menu button:focus-visible { box-shadow: inset 0 0 0 2px var(--indigo); }
/* the library behind: the open asset's card */
.al-item.is-as-open { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo); }
@media (max-width: 1200px) { .as-drawer { width: 560px; } }
@media (max-width: 768px) {
  .as-drawer { top: auto; width: 100%; height: 92vh; border-radius: 16px 16px 0 0; }
  .as-head { height: 58px; padding: 0 10px 0 16px; } .as-head h2 { font-size: 19px; }
  .as-ro { display: none; }
  .as-body { padding: 12px 16px 14px; }
  .as-prev { height: auto; aspect-ratio: 552 / 296; }
  .as-prev .al-hl { font-size: 24px; max-width: 60%; } .as-prev .al-lock { left: 16px; top: 14px; font-size: 13px; } .as-prev .al-lock .cg-mark { width: 28px; height: 28px; font-size: 12px; }
  .as-prev .al-hl.is-center { font-size: 18px; } .as-prev .cp-h { font-size: 24px; }
  .as-prev .al-logo .cg-mark { width: 64px; height: 64px; font-size: 28px; border-radius: 13px; } .as-prev .al-logo .nm { font-size: 28px; }
  .as-prev .al-logo.is-mark .cg-mark { width: 72px; height: 72px; font-size: 30px; }
  .as-prev .al-pal .sw { top: 56px; gap: 8px; } .as-prev .al-pal .sw i { height: 60px; } .as-prev .al-pal .sw span { font-size: 10px; }
  .as-prev.is-doc .al-doc .pg { width: 76px; height: 100px; padding: 12px 10px 0; gap: 6px; margin-bottom: 40px; }
  .as-name { font-size: 20px; line-height: 25px; }
  .as-facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 14px; }
  .as-facts dd > span { white-space: normal; overflow-wrap: anywhere; }
  .as-facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .as-dl { grid-template-columns: 100px minmax(0, 1fr); }
  .as-ver { grid-template-columns: 72px auto minmax(0, 1fr); row-gap: 4px; }
  .as-vthumb { width: 72px; height: 39px; grid-row: 1 / 3; } .as-vthumb .sc { transform: scale(0.1304); }
  .as-ver .dt { grid-column: 3; } .as-ver .as-cur { grid-column: 2 / 4; justify-self: start; }
  .as-vhead { flex-wrap: wrap; }
  .as-foot { padding: 12px 16px 16px; gap: 8px; } .as-foot > button { flex: 1 1 auto; min-width: 0; padding: 0 10px; font-size: 14.5px; justify-content: center; }
  .as-more { flex: 0 0 auto !important; }
  .as-menu { right: 16px; }
}
@media (max-width: 430px) { .as-foot > button .i:not(.chev) { display: none; } }

/* ---------- Content-28 · Asset version history (vh-) — the version history drawer over the brand asset library, plan plans/Content-28.md ---------- */
.vh-backdrop { position: fixed; inset: 0; background: rgba(23, 27, 45, 0.36); z-index: 62; }
.vh-drawer { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-mid: #193F94; --cg-tint: #F1F5F9; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter";
  position: fixed; top: 0; right: 0; bottom: 0; width: 604px; max-width: 100vw; background: var(--surface); box-shadow: -12px 0 40px rgba(23, 27, 45, 0.18); display: flex; flex-direction: column; z-index: 63; }
.vh-drawer:focus { outline: none; }
.vh-drawer :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
/* the head: 72 px, 22 px / 700 and the × */
.vh-head { flex: none; display: flex; align-items: center; gap: 14px; height: 72px; padding: 0 17px 0 29px; box-sizing: border-box; }
.vh-head h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.3px; line-height: 28px; color: var(--text); }
.vh-head .close { margin-left: auto; width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); background: none; border: 0; cursor: pointer; flex: none; }
.vh-head .close .i { font-size: 22px; } .vh-head .close:hover { background: var(--border-soft); }
.vh-body { flex: 1; overflow: auto; padding: 0 29px 16px; overscroll-behavior: contain; }
/* the preview of the selected version: 272 px, radius 10 */
.vh-prev { position: relative; height: 272px; margin: 0; border-radius: 10px; overflow: hidden; background: #F3F5F9; }
.vh-art { position: absolute; inset: 0; }
.vh-art > .cp-art { border-radius: 10px; box-shadow: none; cursor: default; }
/* the name + "{Type} • {w} × {h}", the rule under them */
.vh-title { padding: 10px 0 9px; border-bottom: 1px solid var(--border-soft); }
.vh-title h3 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.3px; line-height: 25px; color: var(--text); overflow-wrap: anywhere; }
.vh-title p { margin: 2px 0 0; font-size: 15px; line-height: 20px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vh-title .sep { margin: 0 6px; }
/* the version rows: cards with a 20 px radio, the 156 × 90 thumbnail, the text, "Compare" at the top right */
.vh-list { list-style: none; margin: 16px -12px 0 -11px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.vh-row { position: relative; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); transition: border-color 0.12s, background-color 0.12s; }
.vh-row:hover { border-color: #CFD6E4; }
.vh-row.is-sel { border-color: #7C93FA; background: var(--indigo-bg-2); box-shadow: 0 0 0 1px rgba(59, 91, 253, 0.12); }
.vh-row > label { display: grid; grid-template-columns: 20px 156px minmax(0, 1fr); column-gap: 11px; align-items: start; padding: 12px 12px 12px 8px; cursor: pointer; }
.vh-radio { appearance: none; -webkit-appearance: none; align-self: center; width: 20px; height: 20px; margin: 0; border: 1.5px solid #B7BECD; border-radius: 50%; background: var(--surface); display: grid; place-items: center; cursor: pointer; }
.vh-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--indigo); transform: scale(0); transition: transform 0.12s; }
.vh-radio:checked { border-color: var(--indigo); }
.vh-radio:checked::after { transform: scale(1); }
.vh-radio:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.vh-thumb { display: block; position: relative; width: 156px; height: 90px; border-radius: 8px; overflow: hidden; background: #F3F5F9; }
.vh-thumb .sc { position: absolute; left: 0; top: 0; width: 546px; height: 315px; transform: scale(0.28572); transform-origin: 0 0; }
.vh-thumb .cp-art { border-radius: 0; box-shadow: none; cursor: pointer; }
.vh-text { display: block; min-width: 0; padding-left: 5px; }
.vh-top, .vh-desc, .vh-date, .vh-note { display: block; }
.vh-top { padding-right: 112px; }
.vh-row.is-current .vh-top { padding-right: 0; }
.vh-vline { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 9px; min-height: 22px; }
.vh-vline b { font-size: 17px; font-weight: 800; line-height: 22px; letter-spacing: -0.2px; color: var(--text); }
.vh-state { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12.5px; font-weight: 500; white-space: nowrap; background: #EFF1F5; color: var(--text-2); }
.vh-state .d { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.vh-state.is-approved { background: var(--green-bg); color: var(--green-text); } .vh-state.is-approved .d { background: var(--green); }
.vh-state.is-pending { background: var(--amber-bg); color: var(--amber-text); } .vh-state.is-pending .d { background: var(--amber); }
.vh-state .mid { opacity: 0.55; }
.vh-date { margin-top: 3px; font-size: 14px; line-height: 19px; color: var(--muted); }
.vh-date .sep { margin: 0 6px; }
.vh-note { margin: 7px 0 0; font-size: 14.5px; line-height: 19px; color: var(--text-2); }
.vh-dec { display: flex; align-items: flex-start; gap: 7px; margin-top: 7px; font-size: 13px; line-height: 17px; color: var(--muted); }
.vh-dec .i { font-size: 15px; flex: none; margin-top: 1px; }
.vh-dec.is-approved .i { color: var(--green); } .vh-dec.is-changes .i { color: var(--amber); } .vh-dec.is-rejected .i { color: var(--red); } .vh-dec.is-pending .i { color: var(--muted-2); }
.vh-used { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 14px; line-height: 19px; color: var(--text-2); }
.vh-used .i { font-size: 18px; color: var(--text-2); }
.vh-compare { position: absolute; top: 13px; right: 12px; height: 38px; padding: 0 14px 0 13px; gap: 8px; font-size: 14px; font-weight: 500; border-radius: 8px; white-space: nowrap; color: var(--indigo); border: 1px solid #D5DAE4; background: var(--surface); }
.vh-compare .i { font-size: 17px; }
.vh-compare:hover { border-color: #B9C5F8; background: var(--indigo-bg-2); }
.vh-only { margin: 14px 0 0; display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--muted); }
.vh-only .i { font-size: 17px; }
/* the footer: Close (48 px outline) at the left, "View selected version →" at the right, a rule inset like the body */
.vh-foot { position: relative; flex: none; display: flex; align-items: center; gap: 12px; padding: 16px 29px 29px; background: var(--surface); }
.vh-foot::before { content: ""; position: absolute; left: 29px; right: 29px; top: 0; border-top: 1px solid var(--border); }
.vh-foot > button { height: 50px; padding: 0 20px; gap: 10px; font-size: 15.5px; font-weight: 500; border-radius: 8px; white-space: nowrap; box-shadow: none; }
.vh-foot .btn-outline { border: 1px solid #D5DAE4; color: var(--text); }
.vh-foot .btn-primary { margin-left: auto; padding: 0 17px 0 20px; background: #1D4FF2; } .vh-foot .btn-primary:hover { background: #1843D6; }
.vh-foot .btn-primary .i { font-size: 19px; }
/* the library behind: the "v{n}" chip on the cards with more than one version (Content-24's pill on the preview gives way to it here) */
body[data-vh] .al-pills .al-ver { display: none; }
.al-ibody:has(> .vh-chip) { grid-template-columns: minmax(0, 1fr) auto auto; }
.al-ibody:has(> .vh-chip) .al-dots { grid-column: 3; grid-row: 1 / span 2; }
.vh-chip { grid-column: 2; grid-row: 1 / span 2; align-self: center; height: 28px; min-width: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px; background: #F6F7FA; color: var(--text-2); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.vh-chip:hover { border-color: #C7D2FE; color: var(--indigo); background: var(--indigo-bg-2); }
.vh-chip:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.al-item.is-vh-open { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo); }
/* the earlier drawings: less headline space (v2), the model's lock at the bottom right (v1) */
@media (prefers-reduced-motion: reduce) { .vh-radio::after, .vh-row { transition: none; } }
@media (max-width: 768px) {
  .vh-drawer { top: auto; width: 100%; height: 92vh; border-radius: 16px 16px 0 0; }
  .vh-head { height: 58px; padding: 0 10px 0 16px; } .vh-head h2 { font-size: 19px; }
  .vh-body { padding: 0 16px 14px; }
  .vh-prev { height: auto; aspect-ratio: 546 / 272; }
  .vh-prev .al-hl { font-size: 24px; max-width: 60%; }
  .vh-prev .al-lock { left: 16px; top: 14px; font-size: 13px; } .vh-prev .al-lock .cg-mark { width: 28px; height: 28px; font-size: 12px; }
  .vh-prev .al-hl.is-center { font-size: 18px; } .vh-prev .cp-h { font-size: 24px; }
  .vh-prev .al-logo .cg-mark { width: 64px; height: 64px; font-size: 28px; border-radius: 13px; } .vh-prev .al-logo .nm { font-size: 28px; }
  .vh-title h3 { font-size: 18px; line-height: 23px; }
  .vh-list { margin: 14px 0 0; gap: 10px; }
  .vh-row > label { grid-template-columns: 20px 112px minmax(0, 1fr); column-gap: 10px; padding: 12px 12px 12px 10px; }
  .vh-radio { align-self: start; margin-top: 22px; }
  .vh-thumb { width: 112px; height: 65px; } .vh-thumb .sc { transform: scale(0.20513); }
  .vh-text { padding-left: 2px; }
  .vh-top { padding-right: 0; }
  .vh-note { font-size: 14px; }
  .vh-compare { position: static; margin: 10px 0 0 164px; height: 44px; display: inline-flex; }
  .vh-row > label + .vh-compare { margin-top: -2px; margin-bottom: 12px; }
  .vh-foot { padding: 12px 16px 16px; gap: 10px; } .vh-foot::before { left: 16px; right: 16px; }
  .vh-foot > button { height: 48px; flex: 1 1 auto; min-width: 0; justify-content: center; padding: 0 12px; font-size: 15px; }
  .vh-foot .btn-outline { flex: 0 0 auto; }
  .vh-chip { min-width: 44px; height: 44px; }
}
@media (max-width: 430px) { .vh-foot .btn-primary .i { display: none; } }

/* ---------- Content-29 · Archive an asset (aa-) — the archive / restore dialog over the brand asset library, plan plans/Content-29.md ---------- */
.aa-backdrop { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-mid: #193F94; --cg-tint: #F1F5F9; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter";
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(23, 27, 45, 0.45); overflow: auto; overscroll-behavior: contain; }
/* the MM-41 frame at 550 px: radius 16, the × at the top right */
.aa-dialog { position: relative; width: 550px; max-width: 100%; box-sizing: border-box; background: var(--surface); border-radius: 16px; box-shadow: 0 24px 60px rgba(23, 27, 45, 0.22); }
.aa-dialog:focus { outline: none; }
.aa-dialog :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.aa-close { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); background: none; border: 0; cursor: pointer; }
.aa-close .i { font-size: 22px; } .aa-close:hover { background: var(--border-soft); }
.aa-body { padding: 30px 34px 0; }
/* the head: the 64 px disc, the 24 px / 800 title and the centred lead */
.aa-head { text-align: center; }
.aa-disc { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: #FDF3E1; color: #E8890C; }
.aa-disc .i { font-size: 30px; stroke-width: 1.8; }
.aa-dialog.is-restore .aa-disc { background: var(--green-bg); color: var(--green); }
.aa-head h2 { margin: 13px 0 0; font-size: 24px; font-weight: 800; line-height: 30px; letter-spacing: -0.4px; color: var(--text); }
.aa-head p { margin: 7px auto 0; max-width: 440px; text-wrap: balance; font-size: 16px; line-height: 22px; color: var(--text-2); }
/* the asset card: the 276 × 122 thumbnail + the name, "{Type} • {w} × {h}", the status pill */
.aa-card { display: grid; grid-template-columns: 276px minmax(0, 1fr); column-gap: 20px; align-items: start; margin-top: 20px; }
.aa-thumb { position: relative; width: 276px; height: 122px; border-radius: 8px; overflow: hidden; background: #F3F5F9; }
.aa-thumb .sc { position: absolute; left: 0; top: 0; width: 552px; height: 244px; transform: scale(0.5); transform-origin: 0 0; }
.aa-thumb .cp-art { border-radius: 0; box-shadow: none; cursor: default; }
.aa-thumb.is-check { background-color: #fff; background-image: conic-gradient(#EEF1F6 25%, transparent 0 50%, #EEF1F6 0 75%, transparent 0); background-size: 16px 16px; }
.aa-thumb.is-archived .sc { filter: grayscale(0.75); opacity: 0.75; }
.aa-thumb .al-logo { position: absolute; inset: 0; }
.aa-text { min-width: 0; padding-top: 14px; }
.aa-text h3 { margin: 0; font-size: 19px; font-weight: 800; line-height: 24px; letter-spacing: -0.3px; color: var(--text); overflow-wrap: anywhere; }
.aa-text p { margin: 5px 0 0; font-size: 15px; line-height: 20px; color: var(--muted); font-variant-numeric: tabular-nums; }
.aa-text p .sep { margin: 0 6px; }
.aa-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; margin-top: 9px; padding: 0 9px 0 8px; border-radius: 6px; font-size: 13.5px; font-weight: 500; white-space: nowrap; background: #EFF1F5; color: var(--text-2); }
.aa-pill .i { font-size: 15px; }
.aa-pill.is-approved { background: var(--green-bg); color: var(--green-text); } .aa-pill.is-approved .i { color: var(--green); }
.aa-pill.is-pending { background: var(--amber-bg); color: var(--amber-text); } .aa-pill.is-pending .i { color: var(--amber); }
.aa-pill.is-changes { background: #FDECEE; color: #B4233A; } .aa-pill.is-changes .i { color: var(--red); }
.aa-pill.is-archived { background: #EFF1F5; color: var(--text-2); } .aa-pill.is-archived .i { color: var(--muted-2); }
/* the usage box on the soft surface: the link icon column, the head, the sub line, 30 px rows with the type at the right */
.aa-usage { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 18px; margin-top: 21px; padding: 14px 15px 10px 18px; border-radius: 10px; background: #F6F8FB; }
.aa-usage > .i { font-size: 18px; margin-top: 2px; color: var(--text-2); }
.aa-usage h4 { margin: 0; font-size: 16px; font-weight: 700; line-height: 22px; color: var(--text); }
.aa-usage .sub { margin: 1px 0 0; font-size: 13.5px; line-height: 18px; color: var(--text-2); }
.aa-rows { list-style: none; margin: 8px 0 0; padding: 0 0 0 4px; }
.aa-rows li { display: flex; align-items: center; gap: 12px; min-height: 30px; }
.aa-rows li > .i { font-size: 16px; flex: none; color: var(--muted); }
.aa-rows a { min-width: 0; flex: 1; font-size: 15px; line-height: 20px; color: var(--indigo); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aa-rows a:hover { text-decoration: underline; }
.aa-rows .ty { flex: none; font-size: 14.5px; color: var(--text-2); }
.aa-rows .more { padding-left: 28px; font-size: 14px; color: var(--muted); }
.aa-usage .ideas { margin: 6px 0 4px; font-size: 13.5px; line-height: 18px; color: var(--text-2); }
.aa-usage.is-none { align-items: center; padding: 14px 15px 14px 18px; }
.aa-usage.is-none > .i { margin-top: 0; color: var(--green); }
.aa-usage.is-none h4 { font-weight: 600; }
.aa-usage.is-none .ideas { margin: 2px 0 0; }
.aa-refs { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 0 2px; font-size: 13.5px; line-height: 18px; color: var(--muted); }
.aa-refs .i { font-size: 15px; flex: none; margin-top: 1px; }
/* the footer under a 1 px rule, right-aligned: Cancel (outline) and the amber "Archive asset" (the primary "Restore asset" in the restore mode) */
.aa-foot { display: flex; justify-content: flex-end; align-items: center; gap: 18px; margin-top: 18px; padding: 18px 34px 24px; border-top: 1px solid var(--border); }
.aa-foot > button { height: 42px; padding: 0 18px; gap: 9px; font-size: 16px; font-weight: 600; border-radius: 8px; white-space: nowrap; box-shadow: none; }
.aa-foot .btn-outline { min-width: 105px; justify-content: center; border: 1px solid #D5DAE4; color: var(--text); }
.aa-foot .aa-go { min-width: 162px; justify-content: center; display: inline-flex; align-items: center; border: 0; cursor: pointer; background: #E8890C; color: #fff; }
.aa-foot .aa-go:hover { background: #D27A06; }
.aa-foot .aa-go .i { font-size: 19px; }
.aa-foot .aa-go.is-restore { background: var(--indigo); } .aa-foot .aa-go.is-restore:hover { background: var(--indigo-hover); }
.aa-foot .aa-go[aria-disabled="true"] { opacity: 0.85; cursor: progress; }
.aa-foot .aa-go .aa-spin { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; animation: spin 0.8s linear infinite; flex: none; }
@media (prefers-reduced-motion: reduce) { .aa-foot .aa-go .aa-spin { animation: none; } }
/* the library behind: the card the dialog is about stays outlined */
.al-item.is-aa-open { outline: 2px solid #F3B55B; outline-offset: 2px; }
/* phones: a bottom sheet with the thumbnail over the text, no horizontal scroll */
@media (max-width: 768px) {
  .aa-backdrop { place-items: end stretch; padding: 0; }
  .aa-dialog { width: 100%; max-height: 92vh; overflow: auto; border-radius: 16px 16px 0 0; }
  .aa-body { padding: 26px 16px 0; }
  .aa-close { top: 8px; right: 8px; width: 44px; height: 44px; }
  .aa-disc { width: 56px; height: 56px; } .aa-disc .i { font-size: 26px; }
  .aa-head h2 { font-size: 21px; line-height: 27px; } .aa-head p { font-size: 15px; }
  .aa-card { grid-template-columns: minmax(0, 1fr); row-gap: 10px; margin-top: 18px; }
  .aa-thumb { width: 100%; height: auto; aspect-ratio: 276 / 122; }
  .aa-thumb .sc { width: 200%; height: 200%; }
  .aa-text { padding-top: 0; }
  .aa-usage { column-gap: 12px; padding: 14px 12px 10px; }
  .aa-rows { padding-left: 0; }
  .aa-rows li { min-height: 44px; }
  .aa-foot { padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); gap: 10px; }
  .aa-foot > button { flex: 1; height: 48px; min-width: 0; }
}

/* ---------- Content-26 / 28 / 29 build additions (as- / vh- / aa-): real images in place of the prototype drawings, the loading / error states ---------- */
.as-art > img, .vh-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.as-prev.is-clear .as-art > img, .vh-prev.is-clear .vh-art > img { object-fit: contain; padding: 6%; box-sizing: border-box; }
.as-prev.is-plain .as-art > img { object-fit: contain; }
.vh-prev.is-clear { background-color: #fff; background-image: conic-gradient(#EEF0F4 25%, transparent 0 50%, #EEF0F4 0 75%, transparent 0); background-size: 26px 26px; box-shadow: inset 0 0 0 1px var(--border); }
.as-vthumb img, .vh-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.as-vthumb .as-vdoc { position: absolute; inset: 0; display: grid; place-items: center; color: #E0344E; background: linear-gradient(160deg, #F6F7FA, #ECEFF5); }
.vh-thumb .al-doc .pg, .aa-thumb .al-doc .pg { margin-top: 0; }
.aa-thumb .sc { width: 100%; height: 100%; transform: none; }
.aa-thumb .sc > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.aa-thumb.is-check .sc > img { object-fit: contain; padding: 6%; box-sizing: border-box; }
.aa-thumb .al-doc { display: grid; }
.as-compare { display: inline-flex; align-items: center; text-decoration: none; }
.vh-compare { display: inline-flex; align-items: center; text-decoration: none; }
.as-hist { margin: 12px 0 0; }
.as-hist .as-link { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; }
.as-hist .as-link .i { font-size: 16px; }
.as-use .as-more-n { padding: 2px 0 0 12px; font-size: 13.5px; color: var(--muted); }
.as-skel .as-prev { background: linear-gradient(90deg, #E9ECF3 25%, #F4F6FB 50%, #E9ECF3 75%); background-size: 200% 100%; animation: sk 1.2s infinite; }
.as-skel .as-body > .ld-skeleton, .vh-skel .vh-body > .ld-skeleton { margin-top: 18px; }
.vh-skel .vh-prev { background: linear-gradient(90deg, #E9ECF3 25%, #F4F6FB 50%, #E9ECF3 75%); background-size: 200% 100%; animation: sk 1.2s infinite; }
.as-fail, .vh-fail { padding-top: 12px; }
.aa-skel .aa-body { padding-bottom: 24px; }
.aa-err { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: #FDECEF; color: #B4233A; font-size: 14px; }
.aa-err[hidden] { display: none; }
.al-item.is-as-open, .al-item.is-vh-open { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo); }
@media (prefers-reduced-motion: reduce) { .as-skel .as-prev, .vh-skel .vh-prev { animation: none; } }

/* ---------- Content-30 · Create a post (pw-) — Content module, plan plans/Content-30.md; pw-steps and pw-mock are shared by Content-30 … 41 ---------- */
.pw-root { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-mid: #193F94; --cg-tint: #F1F5F9; }
.pw-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0; }
.pw-head { padding: 4px 8px 16px; }
.pw-head h1 { font-size: 34px; }
.pw-head .sub { font-size: 18px; margin-top: 4px; }

/* the post stepper (shared): 40 px discs joined by 1 px lines; active indigo, done with a check and a link, later steps grey */
.pw-steps { height: 66px; margin-bottom: 16px; padding: 0 24px; }
.pw-steps ol { list-style: none; margin: 0 auto; padding: 0; height: 100%; max-width: 1040px; display: flex; align-items: center; }
.pw-step { display: flex; align-items: center; flex: 1; min-width: 0; color: var(--muted); }
.pw-step:last-child { flex: none; }
.pw-step:not(:last-child)::after { content: ""; flex: 1; height: 1px; background: #DCE0E8; margin: 0 18px; min-width: 16px; }
.pw-step > a { display: flex; align-items: center; color: inherit; border-radius: 22px; }
.pw-step > a:hover .pw-sl { text-decoration: underline; }
.pw-step > a:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }
.pw-disc { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #F3F4F7; border: 1px solid #E3E6ED; color: var(--text-2); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pw-sl { margin-left: 17px; font-size: 16px; font-weight: 500; white-space: nowrap; }
.pw-step.is-active .pw-disc { background: var(--indigo); border-color: var(--indigo); color: #fff; box-shadow: 0 4px 10px rgba(59, 91, 253, 0.25); }
.pw-step.is-active .pw-sl { color: var(--indigo); }
.pw-step.is-done { color: var(--text-2); }
.pw-step.is-done .pw-disc { background: var(--indigo-bg); border-color: #C9D3FF; color: var(--indigo); }
.pw-step.is-done .pw-disc .i { font-size: 18px; stroke-width: 2.6; }
.pw-step.is-done::after { background: #B9C6FF; }

/* the two columns (plan §2: minmax(0, 1fr) 530 px; the drawing's gap is 16 px) */
.pw-grid { display: grid; grid-template-columns: minmax(0, 1fr) 536px; gap: 16px; align-items: stretch; margin: 0; }
.pw-card { min-width: 0; }
.pw-left { padding: 18px 18px 8px 22px; display: flex; flex-direction: column; }
.pw-fs { border: 0; margin: 0; padding: 0; min-width: 0; }
.pw-h2 { padding: 0; font-size: 18.5px; font-weight: 700; letter-spacing: -0.2px; line-height: 1.3; color: var(--text); }
.pw-lead { margin: 2px 0 12px; font-size: 13.5px; color: var(--muted); }
.pw-row { margin-top: 12px; }
.pw-h3 { padding: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 8px; }
.pw-h3 > span:first-child { font-size: 15.5px; font-weight: 700; color: var(--text); }
.pw-hint { font-size: 13px; color: var(--muted); }

/* the check disc (radio look) shared by the three kinds of choices */
.pw-check { width: 22px; height: 22px; border-radius: 50%; border: 1.6px solid #C5CAD5; background: var(--surface); display: grid; place-items: center; flex: none; transition: background 0.12s, border-color 0.12s; }
.pw-check .i { font-size: 13px; stroke-width: 3.2; color: #fff; opacity: 0; }
.is-on > .pw-check { background: var(--indigo); border-color: var(--indigo); }
.is-on > .pw-check .i { opacity: 1; }

/* the post type cards (radius 12, the 36 px icon tile, the title 18 / 800, the 250 × 96 illustration) */
.pw-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pw-type { position: relative; display: flex; flex-direction: column; min-height: 252px; padding: 15px 16px 10px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s; }
.pw-type:hover { border-color: #CDD3E0; }
.pw-type.is-on { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo); }
.pw-type:has(input:focus-visible) { outline: 2px solid var(--indigo); outline-offset: 3px; }
.pw-type-ic { width: 36px; height: 36px; border-radius: 8px; background: #EFF2F8; color: #1E3A8A; display: grid; place-items: center; }
.pw-type-ic .i { font-size: 22px; stroke-width: 1.7; }
.pw-type > .pw-check { position: absolute; top: 14px; right: 18px; }
.pw-type-t { margin-top: 14px; font-size: 18px; font-weight: 700; letter-spacing: -0.2px; color: var(--text); }
.pw-type-d { margin-top: 5px; font-size: 14px; line-height: 1.3; color: var(--muted); max-width: 250px; }
.pw-ill { position: relative; display: block; margin-top: auto; padding-top: 8px; height: 106px; }
.pw-ill > * { position: absolute; left: 0; bottom: 0; }
.pw-type[data-type="image"] .pw-ill .pw-art { width: 252px; max-width: 100%; height: 98px; border-radius: 6px; }
.pw-type[data-type="carousel"] .pw-deck { left: 50%; transform: translateX(-58%); }
.pw-type[data-type="text"] .pw-tcard { left: 50%; transform: translateX(-50%); bottom: 10px; }

/* the hero composition: one markup for the card illustration and the preview media, sized in container units (data-shape) */
.pw-art { position: absolute; inset: 0; overflow: hidden; container-type: size; color: #fff; font-family: var(--font);
  background: radial-gradient(70% 60% at 82% 30%, rgba(78, 122, 255, 0.55) 0%, rgba(78, 122, 255, 0) 70%), linear-gradient(125deg, #1C3FB9 0%, #12307F 45%, #0A1433 100%); }
.pw-art-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px); background-size: 9cqmin 9cqmin; }
.pw-art-mark { position: absolute; left: 7.5cqw; top: 6cqh; width: 12.5cqmin; height: 12.5cqmin; border-radius: 2.4cqmin; background: var(--cg-primary); display: grid; place-items: center; font-size: 5.4cqmin; font-weight: 700; letter-spacing: -0.02em; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); z-index: 2; }
.pw-art-h { position: absolute; left: 7.5cqw; top: 29cqh; z-index: 2; font-size: 8.9cqmin; font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; }
.pw-art-sub { position: absolute; left: 7.5cqw; top: 50cqh; width: 47cqw; margin: 0; z-index: 2; font-size: 3.5cqmin; line-height: 1.45; color: rgba(255, 255, 255, 0.9); }
.pw-art[data-shape="wide"] .pw-art-mark { left: 6.5cqw; top: 10cqh; width: 20cqh; height: 20cqh; font-size: 8.5cqh; border-radius: 4cqh; }
.pw-art[data-shape="wide"] .pw-art-h { top: auto; bottom: 13cqh; left: 6.5cqw; font-size: 20cqh; }
.pw-art[data-shape="wide"] .pw-art-sub { display: none; }
.pw-art[data-shape="portrait"] .pw-art-h { top: 22cqh; font-size: 11.5cqw; }
.pw-art[data-shape="portrait"] .pw-art-sub { top: 42cqh; width: 64cqw; font-size: 4.2cqw; }
.pw-art[data-shape="vertical"] .pw-art-mark { top: 5cqh; width: 16cqw; height: 16cqw; font-size: 7cqw; border-radius: 3cqw; }
.pw-art[data-shape="vertical"] .pw-art-h { top: 15cqh; font-size: 12.5cqw; }
.pw-art[data-shape="vertical"] .pw-art-sub { top: 32cqh; width: 82cqw; font-size: 5.4cqw; }

/* the carousel deck and the text card illustrations */
.pw-deck { width: 164px; height: 106px; }
.pw-slide { position: absolute; bottom: 0; border-radius: 5px; overflow: hidden; container-type: size; background: linear-gradient(135deg, #1C3FB9 0%, #0E1B3D 100%); box-shadow: -4px 4px 10px rgba(14, 27, 61, 0.28); }
.pw-slide.s1 { left: 0; width: 94px; height: 106px; z-index: 3; }
.pw-slide.s2 { left: 42px; width: 90px; height: 98px; bottom: 3px; z-index: 2; background: linear-gradient(135deg, #173597 0%, #0A1433 100%); }
.pw-slide.s3 { left: 76px; width: 86px; height: 90px; bottom: 7px; z-index: 1; background: linear-gradient(135deg, #12307F 0%, #0A1433 100%); }
.pw-s-mark { position: absolute; left: 9px; top: 12px; width: 18px; height: 18px; border-radius: 4px; background: var(--cg-primary); color: #fff; font-size: 7.5px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }
.pw-s-h { position: absolute; left: 9px; bottom: 30px; right: 6px; color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1.2; letter-spacing: -0.1px; }
.pw-tcard { width: 180px; height: 96px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); box-shadow: 0 1px 3px rgba(14, 27, 61, 0.06); }
.pw-tcard .pw-s-mark { left: 14px; top: 12px; width: 25px; height: 25px; font-size: 10px; border-radius: 5px; }
.pw-tcard .ln { position: absolute; height: 5px; border-radius: 3px; background: #E4E7EE; }
.pw-tcard .l1 { left: 52px; top: 15px; width: 62px; } .pw-tcard .l2 { left: 52px; top: 28px; width: 112px; }
.pw-tcard .l3 { left: 14px; top: 52px; width: 150px; } .pw-tcard .l4 { left: 14px; top: 66px; width: 118px; }

/* the platform chips (44 px: the 28 px glyph, the name, the disc at the right; multi-select) */
.pw-plats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pw-plat { display: flex; align-items: center; gap: 13px; height: 47px; padding: 0 16px 0 18px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s; }
.pw-plat:hover { border-color: #CDD3E0; }
.pw-plat.is-on { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo); }
.pw-plat:has(input:focus-visible) { outline: 2px solid var(--indigo); outline-offset: 2px; }
.pw-pf { width: 28px; height: 28px; flex: none; }
.pw-plat-n { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-plat.is-on .pw-plat-n { color: var(--indigo); font-weight: 600; }
.pw-plats.is-invalid .pw-plat { border-color: #F2B8C1; }
.pw-err { display: flex; align-items: center; gap: 6px; margin: 7px 0 0; font-size: 13.5px; font-weight: 500; color: #C92F45; }
.pw-err[hidden] { display: none; }
.pw-err::before { content: "!"; width: 16px; height: 16px; border-radius: 50%; background: #E0344E; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: none; }

/* the format tiles (62 px: the outline shape of the ratio, the label + the pixel size) */
.pw-ratios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pw-ratio { display: flex; align-items: center; gap: 22px; height: 62px; padding: 0 16px 0 26px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s; }
.pw-ratio:hover { border-color: #CDD3E0; }
.pw-ratio.is-on { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo); }
.pw-ratio:has(input:focus-visible) { outline: 2px solid var(--indigo); outline-offset: 2px; }
.pw-shape { flex: none; border: 1.8px solid #3D4354; border-radius: 3px; }
.pw-shape.sq { width: 25px; height: 25px; } .pw-shape.pt { width: 22px; height: 28px; } .pw-shape.vt { width: 15px; height: 31px; }
.pw-ratio-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pw-ratio-t b { font-size: 14.5px; font-weight: 500; color: var(--text); line-height: 1.35; }
.pw-ratio-t span { font-size: 13px; color: var(--muted); }
.pw-ratio.is-on .pw-ratio-t b { color: var(--indigo); }
.pw-row[hidden], .pw-textnote[hidden] { display: none; }
.pw-textnote { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--indigo-bg-2); color: var(--text-2); font-size: 13.5px; }
.pw-textnote .i { font-size: 17px; color: var(--indigo); }

/* the preview card */
.pw-right { padding: 16px 18px 18px 20px; display: flex; flex-direction: column; }
.pw-prev-head { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 16px; align-items: start; }
.pw-prev-tt { display: contents; }
.pw-eye { grid-column: 1; grid-row: 1 / span 2; }
.pw-prev-tt h2 { grid-column: 2; grid-row: 1; align-self: center; }
.pw-prev-tt p { grid-column: 2 / -1; grid-row: 2; }
.pw-chip { grid-column: 3; grid-row: 1; }
.pw-eye { color: var(--indigo); padding-top: 5px; } .pw-eye .i { font-size: 27px; stroke-width: 1.8; }
.pw-prev-tt h2 { margin: 0; font-size: 18.5px; font-weight: 700; letter-spacing: -0.2px; }
.pw-prev-tt p { margin: 3px 0 0; font-size: 13px; color: var(--muted); }
.pw-chip { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px 0 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
.pw-chip .pw-pf { width: 22px; height: 22px; }
.pw-chip.is-empty { color: var(--muted); font-weight: 500; }
.pw-stage { flex: 1; display: flex; justify-content: center; align-items: flex-start; padding-top: 18px; }

/* the platform preview mock (shared): avatar + brand + platform + ⋯, the media in the ratio, the platform's action row */
.pw-mock { width: 400px; max-width: 100%; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 2px 10px rgba(14, 27, 61, 0.05); padding: 8px 13px 4px; transition: opacity 0.15s; }
.pw-mock.is-empty { opacity: 0.5; }
.pw-mock-head { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 2px; }
.pw-av { width: 44px; height: 44px; border-radius: 50%; background: var(--cg-primary); color: #fff; display: grid; place-items: center; font-size: 17px; font-weight: 700; letter-spacing: -0.3px; flex: none; }
.pw-mock[data-platform="linkedin"] .pw-av { border-radius: 8px; }
.pw-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.pw-who b { font-size: 14px; font-weight: 700; color: var(--text); }
.pw-who span { font-size: 12px; color: var(--muted); }
.pw-more { color: var(--text); padding-right: 12px; } .pw-more .i { font-size: 22px; }
.pw-cap { margin: 2px 2px 10px; font-size: 13.5px; line-height: 1.45; color: var(--text); }
.pw-cap b { display: block; font-weight: 700; }
.pw-cap .tags { color: var(--indigo); }
.pw-mock[data-format="text"]:not([data-platform="instagram"]) .pw-cap { font-size: 15px; margin-bottom: 8px; }
.pw-media { position: relative; width: 100%; height: 374px; border-radius: 6px; overflow: hidden; background: #EEF1F6; display: flex; justify-content: center; }
.pw-frame { position: relative; height: 100%; max-width: 100%; overflow: hidden; }
.pw-frame[data-ratio="1:1"] { aspect-ratio: 1 / 1; } .pw-frame[data-ratio="4:5"] { aspect-ratio: 4 / 5; } .pw-frame[data-ratio="9:16"] { aspect-ratio: 9 / 16; }
.pw-count { position: absolute; top: 10px; right: 10px; z-index: 3; height: 24px; padding: 0 9px; border-radius: 12px; background: rgba(10, 20, 51, 0.72); color: #fff; font-size: 12px; font-weight: 600; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.pw-dots { display: flex; justify-content: center; gap: 5px; padding-top: 9px; }
.pw-dots i { width: 6px; height: 6px; border-radius: 50%; background: #C9CED8; }
.pw-dots i:first-child { background: var(--indigo); }
.pw-tart { position: absolute; inset: 0; container-type: size; background: linear-gradient(150deg, var(--cg-primary) 0%, var(--cg-mid) 60%, var(--cg-dark) 100%); color: #fff; }
.pw-tart .pw-art-mark { left: 9cqw; top: 9cqh; }
.pw-tart .pw-art-h { left: 9cqw; top: 30cqh; font-size: 10cqmin; }
.pw-tart .pw-art-sub { left: 9cqw; top: 58cqh; width: 80cqw; font-size: 4.2cqmin; }
.pw-acts { display: flex; align-items: center; gap: 16px; height: 46px; padding: 0 2px; color: var(--text); }
.pw-acts .i { font-size: 24px; stroke-width: 1.8; }
.pw-acts .end { margin-left: auto; }
.pw-mock[data-platform="linkedin"] .pw-acts, .pw-mock[data-platform="facebook"] .pw-acts { justify-content: space-around; gap: 4px; margin-top: 8px; border-top: 1px solid var(--border-soft); color: var(--muted); }
.pw-acts .lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.pw-acts .lbl .i { font-size: 19px; }
.pw-mock[data-platform="x"] .pw-acts { justify-content: space-between; padding: 0 10px; color: var(--muted); }
.pw-mock[data-platform="x"] .pw-acts .i { font-size: 19px; }
.pw-mock[data-platform="x"] .pw-media { border-radius: 12px; }

/* the footer row: Back 44 px outline left, the primary right */
.pw-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding: 7px 7px 7px 8px; }
.pw-back { height: 44px; padding: 0 20px 0 16px; font-size: 15px; font-weight: 500; }
.pw-back .i { font-size: 19px; }
.pw-next { height: 42px; padding: 0 20px; font-size: 15px; font-weight: 600; border-radius: 8px; gap: 12px; }
.pw-next .i { font-size: 19px; }

@media (max-width: 1280px) {
  .pw-grid { grid-template-columns: minmax(0, 1fr) 440px; }
  .pw-plats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .pw-grid { grid-template-columns: minmax(0, 1fr); }
  .pw-plats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .pw-head h1 { font-size: 28px; } .pw-head .sub { font-size: 16px; }
  .pw-steps { height: 58px; padding: 0 12px; }
  .pw-disc { width: 32px; height: 32px; font-size: 14px; }
  .pw-step:not(.is-active) .pw-sl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pw-sl { margin-left: 10px; font-size: 15px; }
  .pw-step:not(:last-child)::after { margin: 0 8px; }
  .pw-left { padding: 16px 14px 14px; }
  .pw-types { grid-template-columns: minmax(0, 1fr); }
  .pw-type { min-height: 0; }
  .pw-ill { height: 110px; margin-top: 10px; }
  .pw-plats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pw-plat { height: 48px; padding: 0 12px; gap: 10px; }
  .pw-ratios { grid-template-columns: minmax(0, 1fr); }
  .pw-ratio { height: 56px; }
  .pw-right { padding: 14px 12px 14px; }
  .pw-prev-head { grid-template-columns: 26px minmax(0, 1fr); row-gap: 4px; }
  .pw-chip { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin-top: 8px; }
  .pw-mock { padding: 6px 10px 4px; }
  .pw-media { height: auto; aspect-ratio: 1 / 1; }
  .pw-foot > button { flex: 1; justify-content: center; min-width: 0; height: 48px; }
}

/* ---------- Content-31 · Post brief (pb-) — Content module, plan plans/Content-31.md; the stepper is Content-30's shared pw-steps ---------- */
.pb-root { --cg-light: #FFFFFF; --cg-hfont: "Inter"; }
.pb-head .eyebrow { font-size: 14px; font-weight: 500; letter-spacing: 0.4px; margin-bottom: 4px; }

/* the two columns (plan §2: minmax(0, 1fr) 590 px, 18 px gap) */
.pb-grid { display: grid; grid-template-columns: minmax(0, 1fr) 590px; gap: 18px; align-items: start; }
.pb-card { min-width: 0; }
.pb-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* the card head shared by the three cards: the 36 px tile, the title + the lead, an action at the right */
.pb-card-head { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 13px; align-items: start; }
.pb-tile { width: 36px; height: 36px; border-radius: 8px; background: #EFF2F8; color: #3D57C9; display: grid; place-items: center; }
.pb-tile .i { font-size: 21px; stroke-width: 1.7; }
.pb-tt { display: contents; }
.pb-tt h2 { grid-column: 2; grid-row: 1; align-self: center; }
.pb-tt p { grid-column: 2 / -1; grid-row: 2; }
.pb-card-head > .pb-tile { grid-row: 1 / span 2; }
.pb-all { grid-column: 3; grid-row: 1; }
.pb-pull { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.pb-form .pb-tt p { grid-column: 2; }
.pb-tt h2 { margin: 1px 0 0; font-size: 20px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.25; color: var(--text); }
.pb-tt p { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.pb-pull { display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 16px 0 14px; border: 1.5px solid #8FA2FE; border-radius: 8px; background: #F5F7FF; color: var(--indigo); font-size: 14.5px; font-weight: 500; white-space: nowrap; }
.pb-pull:hover { background: var(--indigo-bg); border-color: var(--indigo); }
.pb-pull:focus-visible, .pb-all:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.pb-pull .i { font-size: 19px; }

/* the brief form: the fields in a two-column grid (topic + goal; audience, key message, offer full; CTA + language + tone in three) */
.pb-form { padding: 18px 20px 12px 22px; display: flex; flex-direction: column; }
.pb-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px; row-gap: 17px; margin-top: 18px; }
.pb-f { min-width: 0; display: flex; flex-direction: column; }
.pb-f.full, .pb-three { grid-column: 1 / -1; }
.pb-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 22px; }
.pb-lbl { font-size: 15px; font-weight: 500; color: var(--text); margin-bottom: 7px; }
.pb-req { color: #E0344E; margin-left: 4px; }
.pb-opt { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--muted); }
.pb-in { width: 100%; height: 42px; padding: 0 12px; border: 1px solid #D9DDE6; border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; font-size: 15px; transition: border-color 0.12s, box-shadow 0.12s; }
.pb-in::placeholder { color: var(--muted-2); }
.pb-in:hover { border-color: #C5CAD5; }
.pb-in:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.14); }
.pb-ta { height: 60px; min-height: 60px; padding: 9px 12px; line-height: 1.4; resize: vertical; }
.pb-sel { position: relative; display: block; }
.pb-sel select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer; }
.pb-sel select:invalid, .pb-sel select.is-placeholder { color: var(--muted-2); }
.pb-sel select option, .pb-sel select optgroup { color: var(--text); }
.pb-sel > .i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--text-2); pointer-events: none; }
.pb-hint-row { display: flex; justify-content: space-between; gap: 10px; margin-top: 5px; }
.pb-hint { font-size: 13.5px; color: var(--muted); }
.pb-count { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pb-count.is-over { color: #C92F45; font-weight: 600; }
.pb-err { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 13.5px; font-weight: 500; color: #C92F45; }
.pb-err[hidden] { display: none; }
.pb-err::before { content: "!"; width: 16px; height: 16px; border-radius: 50%; background: #E0344E; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: none; }
.pb-f.is-invalid .pb-in { border-color: #E0344E; }
.pb-f.is-invalid .pb-in:focus { box-shadow: 0 0 0 3px rgba(224, 52, 78, 0.14); }
.pb-f.is-invalid .pb-hint-row { margin-top: 3px; }

/* the footer inside the card: Back 44 px outline left, the primary right */
.pb-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.pb-back { height: 40px; padding: 0 22px 0 18px; font-size: 15.5px; font-weight: 500; color: var(--text); gap: 12px; }
.pb-back .i { font-size: 19px; }
.pb-next { height: 40px; padding: 0 20px; font-size: 15px; font-weight: 600; border-radius: 8px; gap: 12px; box-shadow: none; }
.pb-next .i { font-size: 19px; }

/* the brief summary: 30 px rows, the 205 px label column, 1 px dividers */
.pb-sum { padding: 20px 18px 12px 20px; }
.pb-rows { margin: 14px 0 0; }
.pb-row { display: grid; grid-template-columns: 205px minmax(0, 1fr); column-gap: 4px; align-items: start; padding: 5px 0 5px; border-bottom: 1px solid var(--border-soft); font-size: 14.5px; line-height: 1.4; }
.pb-row:last-child { border-bottom: 0; }
.pb-row[hidden] { display: none; }
.pb-row dt { color: var(--muted); }
.pb-row dd { margin: 0; color: var(--text); overflow-wrap: anywhere; max-width: 290px; }
.pb-row dd.is-empty { color: var(--muted-2); }
.pb-row.is-flash dd { animation: pb-flash 0.9s ease-out; }
@keyframes pb-flash { from { background: var(--indigo-bg); } to { background: transparent; } }

/* your brand: the head with "View all assets", four 88 px thumbnails in a row */
.pb-brand { padding: 16px 16px 14px 14px; }
.pb-all { display: inline-flex; align-items: center; height: 34px; padding: 0 11px; border: 1px solid var(--border); border-radius: 7px; color: var(--indigo); font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.pb-all:hover { background: var(--indigo-bg-2); border-color: #C9D3FF; }
.pb-thumbs { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 88px 1.84fr 1.49fr 1.62fr; gap: 10px; }
.pb-th { position: relative; height: 88px; min-width: 0; border-radius: 8px; overflow: hidden; }
.pb-th .cp-art { cursor: default; border-radius: 8px; }
.pb-th-logo { position: absolute; inset: 0; display: grid; place-items: center; background: var(--cg-primary); color: #fff; font-size: 38px; font-weight: 700; letter-spacing: -1px; border-radius: 8px; }
.pb-th-word { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); z-index: 2; display: flex; flex-direction: column; line-height: 1.1; }
.pb-th-word b { font-size: 20px; font-weight: 700; letter-spacing: -0.5px; }
.pb-th-word span { font-size: 10px; color: rgba(255, 255, 255, 0.85); margin-top: 4px; white-space: nowrap; }
.pb-th-h { position: absolute; left: 12px; z-index: 2; font-size: 12px; font-weight: 700; line-height: 1.12; letter-spacing: -0.1px; }
.pb-th-h.top { top: 12px; }
.pb-th-h.mid { top: 50%; transform: translateY(-50%); }

@media (max-width: 1280px) {
  .pb-grid { grid-template-columns: minmax(0, 1fr) 440px; }
  .pb-row { grid-template-columns: 150px minmax(0, 1fr); }
  .pb-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .pb-grid { grid-template-columns: minmax(0, 1fr); }
  .pb-thumbs { grid-template-columns: 88px 1.84fr 1.49fr 1.62fr; }
}
@media (max-width: 768px) {
  .pb-form { padding: 16px 14px 14px; }
  .pb-card-head { grid-template-columns: 36px minmax(0, 1fr); row-gap: 10px; }
  .pb-pull, .pb-all { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin-top: 0; }
  .pb-tt p { grid-column: 2; }
  .pb-fields, .pb-three { grid-template-columns: minmax(0, 1fr); }
  .pb-three { row-gap: 17px; }
  .pb-in { height: 44px; font-size: 16px; }
  .pb-foot > * { justify-content: center; min-width: 0; height: 48px; }
  .pb-foot > .pb-next { flex: 1; }
  .pb-sum { padding: 16px 14px 10px; }
  .pb-row { grid-template-columns: minmax(0, 1fr); row-gap: 1px; padding: 7px 0; }
  .pb-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Content-32 · Post reference pack (pr-) — the reference drawer over the post brief, plan plans/Content-32.md ---------- */
.pr-backdrop { position: fixed; inset: 0; background: rgba(23, 27, 45, 0.36); z-index: 62; }
.pr-drawer { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-mid: #193F94; --cg-tint: #F1F5F9; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter";
  position: fixed; top: 0; right: 0; bottom: 0; width: 536px; max-width: 100vw; background: var(--surface); box-shadow: -12px 0 40px rgba(23, 27, 45, 0.18); display: flex; flex-direction: column; z-index: 63; }
.pr-drawer:focus { outline: none; }
.pr-drawer :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
/* the head: the title 22 px / 700, the 14 px lead (the drawn wrap), the × */
.pr-head { position: relative; flex: none; padding: 17px 30px 18px 29px; }
.pr-head h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.3px; line-height: 28px; color: var(--text); }
.pr-head p { margin: 5px 0 0; font-size: 14px; line-height: 21px; color: var(--muted); }
.pr-head .close { position: absolute; top: 12px; right: 16px; width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); background: none; border: 0; cursor: pointer; }
.pr-head .close .i { font-size: 22px; } .pr-head .close:hover { background: var(--border-soft); }
.pr-body { flex: 1; overflow: auto; padding: 0 21px 6px 29px; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 14px; }
/* the cards: 1 px border, radius 12 */
.pr-card { flex: none; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 15px 20px 15px; }
.pr-card-h { display: flex; align-items: center; gap: 12px; min-height: 24px; }
.pr-card-h h3 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.2px; line-height: 24px; color: var(--text); }
.pr-mini { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex: none; background: var(--indigo-bg); }
.pr-mini b { width: 16px; height: 16px; border-radius: 4px; background: var(--indigo); color: #fff; font-size: 7.5px; font-weight: 800; display: grid; place-items: center; letter-spacing: -0.2px; }
.pr-edit { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 6px; border: 0; border-radius: 7px; background: none; color: var(--indigo); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.pr-edit .i { font-size: 18px; } .pr-edit:hover { background: var(--indigo-bg-2); }
/* the brand card: the 66 px tile, the name 18 px / 700, the 15 px description */
.pr-brand { display: grid; grid-template-columns: 66px minmax(0, 1fr); column-gap: 20px; align-items: start; margin-top: 13px; }
.pr-tile { width: 66px; height: 66px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg, #3D6BFF 0%, #2150F0 55%, #1A3FD0 100%); color: #fff; font-size: 27px; font-weight: 700; letter-spacing: -0.5px; }
.pr-brand h4 { margin: 0; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: -0.2px; color: var(--text); }
.pr-brand p { margin: 2px 0 0; font-size: 15px; line-height: 21px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* the assets card: the title, the lead, the 114 px rows, the dashed add row */
.pr-assets { padding: 13px 20px 19px; }
.pr-assets-h { margin: 0; font-size: 18px; font-weight: 700; line-height: 24px; letter-spacing: -0.2px; color: var(--text); }
.pr-lead { margin: 0; font-size: 13.5px; line-height: 18px; color: var(--muted); }
.pr-list { list-style: none; margin: 13px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.pr-row { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 19px; align-items: start; border-radius: 10px; }
.pr-thumb { position: relative; width: 150px; height: 100px; border-radius: 8px; overflow: hidden; background: #0E1B3D; container-type: size; }
.pr-thumb > .cp-art, .pr-thumb > .rp2-art { border-radius: 8px; box-shadow: none; cursor: default; }
.pr-text { min-width: 0; padding: 6px 40px 0 0; }
.pr-role { display: block; font-size: 16.5px; font-weight: 700; line-height: 21px; color: var(--text); }
.pr-name { display: block; margin-top: 2px; font-size: 15px; line-height: 20px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-meta { display: flex; align-items: center; gap: 17px; margin-top: 12px; }
.pr-pill { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 8px; border-radius: 7px; background: var(--green-bg); color: var(--green-text); font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.pr-pill .ck { width: 17px; height: 17px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; flex: none; }
.pr-pill .ck .i { font-size: 11px; stroke-width: 3; }
.pr-ver { font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pr-rm { position: absolute; top: 2px; right: 0; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity 0.12s, background-color 0.12s; }
.pr-rm .i { font-size: 18px; }
.pr-row:hover .pr-rm, .pr-row:focus-within .pr-rm { opacity: 1; }
.pr-rm:hover { background: var(--border-soft); color: var(--red); }
@media (hover: none) { .pr-rm { opacity: 1; } }
/* no references: the note in the list's place */
.pr-none { margin: 13px 0 0; padding: 18px 16px; border-radius: 10px; background: var(--bg); display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: center; }
.pr-none .ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--indigo-bg); color: var(--indigo); }
.pr-none .ic .i { font-size: 21px; }
.pr-none b { display: block; font-size: 15px; font-weight: 600; line-height: 20px; color: var(--text); }
.pr-none span { display: block; font-size: 13.5px; line-height: 18px; color: var(--muted); }
/* the dashed add row: 64 px, the 36 px plus disc */
.pr-add { width: 100%; margin-top: 20px; box-sizing: border-box; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 17px; align-items: center; min-height: 64px; padding: 8px 16px; border: 1.5px dashed #CDD3DF; border-radius: 10px; background: var(--surface); text-align: left; font: inherit; color: inherit; text-decoration: none; cursor: pointer; transition: border-color 0.12s, background-color 0.12s; }
.pr-add:hover { border-color: #9DB0FB; background: var(--indigo-bg-2); }
.pr-add .disc { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--indigo-bg); color: var(--indigo); }
.pr-add .disc .i { font-size: 19px; }
.pr-add b { display: block; font-size: 15px; font-weight: 600; line-height: 20px; color: var(--indigo); }
.pr-add small { display: block; margin-top: 2px; font-size: 13px; line-height: 17px; color: var(--muted); }
.pr-add[aria-disabled="true"] { cursor: not-allowed; background: var(--bg); border-color: var(--border); }
.pr-add[aria-disabled="true"] .disc { background: var(--track); color: var(--muted-2); }
.pr-add[aria-disabled="true"] b { color: var(--muted); }
/* the generation context: a 56 px collapsible row, the read-only lines */
.pr-ctx { padding: 0; }
.pr-ctx-t { width: 100%; display: grid; grid-template-columns: 28px minmax(0, 1fr) 18px; grid-template-areas: "tile t chev" "tile s s"; column-gap: 12px; align-items: center; padding: 13px 14px 13px 18px; border: 0; border-radius: 12px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.pr-ctx-t:hover { background: var(--indigo-bg-2); }
.pr-ctx-t .tile { grid-area: tile; width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: var(--indigo-bg); color: var(--indigo); }
.pr-ctx-t .tile .i { font-size: 17px; }
.pr-ctx-t b { grid-area: t; display: block; font-size: 16.5px; font-weight: 700; line-height: 21px; color: var(--text); }
.pr-ctx-t small { grid-area: s; display: block; margin-top: 2px; font-size: 12.5px; line-height: 17px; color: var(--muted); }
.pr-ctx-t .chev { grid-area: chev; font-size: 19px; color: var(--text-2); transition: transform 0.15s; justify-self: end; }
.pr-ctx-t[aria-expanded="true"] .chev { transform: rotate(180deg); }
.pr-ctx-body { padding: 2px 20px 18px 18px; }
.pr-ctx-body h5 { margin: 12px 0 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); }
.pr-ctx-body h5:first-child { margin-top: 4px; }
.pr-dl { margin: 0; border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; }
.pr-dl > div { display: grid; grid-template-columns: 124px minmax(0, 1fr); column-gap: 12px; padding: 8px 12px; font-size: 13.5px; line-height: 19px; }
.pr-dl > div + div { border-top: 1px solid var(--border-soft); }
.pr-dl dt { color: var(--muted); } .pr-dl dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.pr-dl dd.is-empty { color: var(--muted-2); }
.pr-sw { display: inline-flex; flex-wrap: wrap; gap: 6px 10px; }
.pr-sw span { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.pr-sw i { width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(23, 27, 45, 0.14); display: inline-block; }
.pr-order { margin: 8px 0 0; font-size: 12.5px; line-height: 17px; color: var(--muted); }
/* the footer: Back (outline) at the left, "Use reference pack →" at the right, a full-width rule */
.pr-foot { flex: none; display: flex; align-items: center; gap: 12px; padding: 16px 21px 21px 29px; border-top: 1px solid var(--border); background: var(--surface); }
.pr-foot > button { height: 44px; padding: 0 22px; gap: 10px; font-size: 15.5px; font-weight: 500; border-radius: 8px; white-space: nowrap; box-shadow: none; }
.pr-foot .btn-outline { border: 1px solid #D5DAE4; color: var(--text); }
.pr-foot .btn-primary { margin-left: auto; height: 44px; padding: 0 18px 0 21px; background: #1D4FF2; } .pr-foot .btn-primary:hover { background: #1843D6; }
.pr-foot .btn-primary .i { font-size: 19px; }
/* the drawn style reference: the blue grid */
@media (prefers-reduced-motion: reduce) { .pr-rm, .pr-ctx-t .chev, .pr-add { transition: none; } }
@media (max-width: 768px) {
  .pr-drawer { top: auto; width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; }
  .pr-head { padding: 14px 56px 12px 16px; } .pr-head h2 { font-size: 19px; line-height: 25px; } .pr-head p { font-size: 14px; line-height: 19px; }
  .pr-head .close { top: 8px; right: 8px; width: 44px; height: 44px; }
  .pr-body { padding: 0 16px 8px; gap: 12px; }
  .pr-card { padding: 14px 14px 14px; } .pr-assets { padding: 12px 14px 14px; }
  .pr-brand { grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; margin-top: 12px; }
  .pr-tile { width: 52px; height: 52px; font-size: 21px; }
  .pr-brand p { font-size: 14px; line-height: 19px; }
  .pr-edit { height: 44px; padding: 0 8px; }
  .pr-list { gap: 12px; }
  .pr-row { grid-template-columns: 112px minmax(0, 1fr); column-gap: 12px; }
  .pr-thumb { width: 112px; height: 75px; }
  .pr-text { padding: 0 44px 0 0; }
  .pr-role { font-size: 15.5px; } .pr-name { font-size: 14px; } .pr-meta { gap: 10px; margin-top: 8px; flex-wrap: wrap; }
  .pr-rm { width: 44px; height: 44px; top: -4px; right: -6px; }
  .pr-add { margin-top: 14px; column-gap: 12px; }
  .pr-ctx-t { padding: 12px 14px; column-gap: 12px; min-height: 56px; }
  .pr-ctx-body { padding: 2px 14px 14px; }
  .pr-dl > div { grid-template-columns: 96px minmax(0, 1fr); }
  .pr-foot { padding: 12px 16px 16px; gap: 10px; }
  .pr-foot > button { height: 48px; flex: 1 1 auto; min-width: 0; justify-content: center; padding: 0 12px; font-size: 15px; }
  .pr-foot .btn-outline { flex: 0 0 auto; }
}
@media (max-width: 430px) { .pr-foot .btn-primary .i { display: none; } .pr-row { grid-template-columns: 96px minmax(0, 1fr); } .pr-thumb { width: 96px; height: 64px; } }

/* ---------- Content-30 / 31 / 32 build additions (pw- / pb- / pr-): the brand palette and real images in place of the prototype drawings ---------- */
.pw-art { background: radial-gradient(70% 60% at 82% 30%, color-mix(in srgb, var(--cg-primary) 55%, transparent) 0%, transparent 70%), linear-gradient(125deg, var(--cg-primary) 0%, var(--cg-mid) 45%, var(--cg-dark) 100%); }
.pw-art.is-photo { background: var(--cg-dark); }
.pw-art-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pw-art.is-photo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10, 20, 51, 0.35) 0%, rgba(10, 20, 51, 0) 32%, rgba(10, 20, 51, 0) 45%, rgba(10, 20, 51, 0.78) 100%); }
.pw-art-txt, .pw-tart .pw-art-txt { position: absolute; left: 7.5cqw; right: 10cqw; bottom: 8cqh; z-index: 2; display: flex; flex-direction: column; gap: 2.4cqh; }
.pw-art-txt .pw-art-h, .pw-art-txt .pw-art-sub { position: static; width: auto; max-width: 100%; }
.pw-art-txt .pw-art-h { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pw-art-txt .pw-art-sub { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pw-art[data-shape="wide"] .pw-art-txt { bottom: 12cqh; right: 8cqw; }
.pw-art[data-shape="wide"] .pw-art-h { -webkit-line-clamp: 2; }
.pw-tart .pw-art-txt { top: 30cqh; bottom: auto; right: 9cqw; left: 9cqw; }
.pw-art-mark.has-logo, .pw-s-mark.has-logo, .pw-av.has-logo { background: #fff; box-shadow: 0 0 0 1px rgba(14, 27, 61, 0.12); overflow: hidden; }
.pw-av.has-logo { position: relative; }
.pw-art-mark.has-logo.is-dark, .pw-s-mark.has-logo.is-dark { background: var(--cg-dark); }
.pw-av.has-logo.is-dark { background: var(--cg-dark); }
.pw-art-mark.has-logo img, .pw-s-mark.has-logo img, .pw-av.has-logo img { position: absolute; left: 14%; top: 14%; width: 72%; height: 72%; object-fit: contain; display: block; }
.pw-slide.s1 { background: linear-gradient(135deg, var(--cg-primary) 0%, var(--cg-dark) 100%); }
.pw-slide.s2 { background: linear-gradient(135deg, var(--cg-mid) 0%, var(--cg-dark) 100%); }
.pw-slide.s3 { background: linear-gradient(135deg, color-mix(in srgb, var(--cg-mid) 70%, var(--cg-dark)) 0%, var(--cg-dark) 100%); }
.pw-s-h { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pw-step > span.pw-disc + .pw-sl { cursor: default; }
.pw-next.is-pending, .pb-next.is-pending, .pr-foot .btn-primary.is-pending { opacity: 0.85; }
.pb-th .cp-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-th .cp-art { background: linear-gradient(135deg, var(--cg-primary) 0%, var(--cg-dark) 100%); }
.pb-th .cp-art .ph { position: absolute; inset: 0; display: grid; place-items: center; color: #9DB0E0; }
.pb-th.is-logo .cp-art { background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.pb-th.is-logo.is-dark .cp-art { background: var(--cg-dark); }
.pb-th.is-logo .cp-art img { object-fit: contain; padding: 14%; box-sizing: border-box; }
.pb-nothumbs { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.pr-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-thumb .ph { position: absolute; inset: 0; display: grid; place-items: center; color: #9DB0E0; }
.pr-thumb.t-light { background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.pr-thumb.t-light img { object-fit: contain; padding: 10%; box-sizing: border-box; }
.pr-tile { position: relative; background: linear-gradient(135deg, var(--cg-primary) 0%, var(--cg-mid) 55%, var(--cg-dark) 100%); overflow: hidden; }
.pr-tile.has-logo { background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.pr-tile.has-logo.is-dark { background: var(--cg-dark); }
.pr-tile.has-logo img { position: absolute; left: 12%; top: 12%; width: 76%; height: 76%; object-fit: contain; }
.pr-mini b { background: var(--cg-primary); }
.pr-edit { text-decoration: none; }
.pr-fail { padding: 16px 0; }
.pr-dl dd .is-empty { color: var(--muted-2); }
@media (max-width: 768px) { body:has(#pr-host .pr-drawer) .mo-tabbar { display: none; } }

/* ---------- Content-33 · Creating post ideas (pi-) — the generating state (33) and the idea board (34), plan plans/Content-33.md ---------- */
.pi-root { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-mid: #193F94; --pi-em: #8FB4FF; }
.pi-subnav.ct-subnav { height: 46px; margin: 0 0 14px; }
.pi-subnav .ct-subitem { padding: 0 26px; }
.pi-head { align-items: flex-start; justify-content: space-between; }
.pi-autosave { display: inline-flex; align-items: center; gap: 8px; margin: 14px 18px 0 auto; font-size: 15px; color: var(--text-2); white-space: nowrap; }
.pi-autosave .i { font-size: 20px; color: var(--green); }

/* 33 · the context card: the brand | the brief, split by a 1 px rule (plan §2) */
.pi-ctx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; padding: 18px 20px; margin-bottom: 14px; }
.pi-ctx-brand, .pi-ctx-brief { display: flex; align-items: center; gap: 18px; min-width: 0; }
.pi-ctx-brief { gap: 16px; padding-left: 28px; margin-left: 28px; border-left: 1px solid var(--border); min-height: 64px; }
.pi-tile { width: 64px; height: 64px; border-radius: 10px; background: var(--cg-primary); color: #fff; font-size: 26px; font-weight: 700; display: grid; place-items: center; flex: none; letter-spacing: -0.3px; }
.pi-doc { width: 40px; height: 40px; border-radius: 10px; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; flex: none; align-self: flex-start; }
.pi-doc .i { font-size: 21px; }
.pi-ctx-t { min-width: 0; flex: 1 1 auto; }
.pi-ctx-t h2 { margin: 0 0 3px; font-size: 18px; font-weight: 700; letter-spacing: -0.2px; }
.pi-ctx-t p { margin: 0; font-size: 15px; line-height: 1.4; color: var(--text-2); max-width: 470px; }
.pi-edit-brief { flex: none; height: 44px; font-size: 16px; padding: 0 20px; color: var(--text); }
.pi-edit-brief .i { font-size: 18px; }

/* 33 · the progress card: the three steps on a 2 px track, 28 px discs */
.pi-prog { padding: 20px 22px 18px; margin-bottom: 12px; }
.pi-prog h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.3px; }
.pi-prog-sub { margin: 4px 0 0; font-size: 15px; color: var(--text-2); }
.pi-steps-wrap { position: relative; margin-top: 16px; }
.pi-track { position: absolute; top: 13px; left: calc(100% / 6); right: calc(100% / 6); display: flex; pointer-events: none; }
.pi-seg { flex: 1 1 0; height: 2px; margin: 0 22px; background: #E3E6EE; border-radius: 1px; overflow: hidden; }
.pi-seg i { display: block; height: 100%; width: 0; background: var(--indigo); transition: width 0.6s ease; }
.pi-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pi-step { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; }
.pi-disc { position: relative; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #D5D9E3; background: var(--surface); display: grid; place-items: center; transition: background 0.25s, border-color 0.25s; }
.pi-disc .i { display: none; font-size: 16px; color: #fff; stroke-width: 2.6; }
.pi-sl { font-size: 14.5px; color: var(--muted); font-weight: 500; }
.pi-step.is-active .pi-disc { border-color: var(--indigo); }
.pi-step.is-active .pi-disc::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--indigo); }
.pi-step.is-active .pi-disc::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--indigo); opacity: 0; animation: pi-ring 1.4s ease-out infinite; }
.pi-step.is-active .pi-sl, .pi-step.is-done .pi-sl { color: var(--text); }
.pi-step.is-done .pi-disc { background: var(--indigo); border-color: var(--indigo); }
.pi-step.is-done .pi-disc .i:first-child { display: block; }
.pi-step.is-failed .pi-disc { background: #FDECEF; border-color: var(--red); }
.pi-step.is-failed .pi-disc .i:last-child { display: block; color: #D63A4E; }
.pi-step.is-failed .pi-sl { color: #B4233A; }
.pi-step.is-stopped .pi-disc { background: #F3F4F8; border-color: #C3C8D4; }
.pi-step.is-stopped .pi-disc::after { content: ""; width: 10px; height: 10px; border-radius: 2px; background: #9CA3AF; }
@keyframes pi-ring { 0% { transform: scale(0.8); opacity: 0.55; } 100% { transform: scale(1.25); opacity: 0; } }
.pi-fail { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 10px 12px 10px 14px; border-radius: 10px; background: #FDECEF; border: 1px solid #F7C6CF; color: #9F1D33; }
.pi-fail[hidden] { display: none; }
.pi-fail.is-info { background: var(--indigo-bg-2); border-color: #D7DEFF; color: var(--text-2); }
.pi-fail.is-info .pi-fail-ic { color: var(--indigo); }
.pi-fail-ic { display: grid; place-items: center; color: #D63A4E; flex: none; } .pi-fail-ic .i { font-size: 20px; }
.pi-fail p { margin: 0; flex: 1 1 auto; font-size: 15px; line-height: 1.35; }
.pi-retry { height: 38px; font-size: 15px; padding: 0 14px; flex: none; }
.pi-retry .i { font-size: 17px; }

/* 33 · the six idea cards: 262 px tall, the cover 140 px, skeletons while pending */
.pi-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.pi-mini { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-card); padding: 7px 7px 10px; height: 262px; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.pi-mini .pi-cover { height: 132px; flex: none; }
.pi-mini h3 { margin: 9px 6px 2px; font-size: 15px; font-weight: 700; letter-spacing: -0.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pi-mini .pi-cap { margin: 0 6px 6px; font-size: 13px; line-height: 1.26; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pi-tags { list-style: none; margin: auto 6px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; height: 24px; overflow: hidden; flex: none; }
.pi-tags li { height: 24px; padding: 0 9px; border-radius: 12px; background: #F2F4F8; color: var(--text-2); font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; white-space: nowrap; }
.pi-mini.is-in { animation: pi-in 0.45s ease both; }
@keyframes pi-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pi-mini.is-skel { background: #FCFCFE; }
.pi-sk { display: block; border-radius: 6px; background: #EDEFF4; }
.pi-sk.cover { height: 118px; border-radius: 8px; margin: 6px 6px 0; }
.pi-sk.t { height: 12px; width: 62%; margin: 16px 6px 0; }
.pi-sk.l { height: 10px; width: 88%; margin: 12px 6px 0; } .pi-sk.l.s { width: 76%; margin-top: 8px; }
.pi-sk-tags { display: flex; gap: 8px; margin: auto 6px 4px; } .pi-sk.c { height: 20px; width: 26%; border-radius: 10px; }
.pi-mini.is-skel.is-live .pi-sk { background: linear-gradient(90deg, #EDEFF4 0%, #F6F7FA 45%, #EDEFF4 90%); background-size: 240% 100%; animation: pi-shimmer 1.4s linear infinite; }
.pi-mini.is-skel.is-dim { opacity: 0.55; }
@keyframes pi-shimmer { from { background-position: 100% 0; } to { background-position: -140% 0; } }
.pi-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.pi-foot .btn-outline { height: 44px; min-width: 112px; justify-content: center; font-size: 16px; }
.pi-foot .btn-outline:disabled { color: var(--muted-2); cursor: default; background: var(--surface); }
.pi-continue { height: 44px; font-size: 16px; padding: 0 20px; gap: 10px; }
.pi-continue .i { font-size: 18px; }
.pi-continue:disabled { background: #C9D4FF; box-shadow: none; cursor: not-allowed; }

/* the covers: the TH mark + the two-tone headline over a pack drawing (portrait 178 × 254 on the board, wide on 33) */
.pi-cover { position: relative; margin: 0; overflow: hidden; border-radius: 8px; color: #fff; isolation: isolate; box-shadow: 0 1px 3px rgba(14, 27, 61, 0.14); }
.pi-cover.t-blue { background: linear-gradient(165deg, #2F6BFF 0%, var(--cg-primary) 30%, var(--cg-mid) 72%, var(--cg-dark) 100%); }
.pi-cover.t-dark { background: radial-gradient(130% 90% at 50% 100%, #1E3A8A 0%, var(--cg-dark) 64%); }
.pi-cover.t-light { background: linear-gradient(170deg, #FFFFFF 0%, #F1F5F9 52%, #D9E4FB 100%); color: var(--cg-dark); box-shadow: inset 0 0 0 1px rgba(14, 27, 61, 0.07), 0 1px 3px rgba(14, 27, 61, 0.1); }
.pi-cv-art { position: absolute; left: 0; right: 0; bottom: 0; height: 56%; z-index: 0; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%); }
.pi-cover.is-wide .pi-cv-art { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); }
.pi-cv-art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pi-cover.is-wide .pi-cv-art { top: 0; left: 30%; height: auto; }
.pi-cv-mark { position: absolute; left: 17px; top: 16px; z-index: 2; font-size: 18px; font-weight: 800; letter-spacing: -0.3px; line-height: 1; }
.pi-cv-h { position: absolute; left: 17px; right: 8px; top: 48px; z-index: 2; font-size: 20px; font-weight: 800; line-height: 1.1; letter-spacing: -0.5px; }
.pi-cv-h em { font-style: normal; color: var(--pi-em); }
.pi-cover.t-light .pi-cv-h em { color: var(--cg-primary); }
.pi-cover.t-light .pi-cv-mark { color: var(--cg-dark); }
.pi-cover.is-wide .pi-cv-mark { left: 10px; top: 10px; width: 22px; height: 22px; border-radius: 5px; background: var(--cg-primary); color: #fff; font-size: 9.5px; display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55); }
.pi-cover.is-wide .pi-cv-h { top: auto; bottom: 12px; left: 11px; right: 34%; font-size: 17.5px; line-height: 1.06; }
.pi-cover.is-wide.t-dark::after, .pi-cover.is-wide.t-blue::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10, 20, 51, 0.55) 0%, rgba(10, 20, 51, 0) 65%); }
.pi-cover.is-wide.t-light::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 62%); }
.pi-badge { position: absolute; top: 12px; right: 10px; z-index: 3; height: 24px; padding: 0 9px; border-radius: 12px; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; background: rgba(255, 255, 255, 0.94); color: var(--indigo); box-shadow: 0 1px 3px rgba(14, 27, 61, 0.2); }
.pi-badge .i { font-size: 13px; stroke-width: 2.6; }
.pi-badge.is-chosen { background: var(--indigo); color: #fff; }
.pi-badge[hidden] { display: none; }

/* 34 · the head: the primary at the right, the three 40 px filter menus under it */
.pi-head-board { padding-bottom: 14px; }
.pi-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex: none; }
.pi-more { height: 42px; font-size: 16px; padding: 0 20px; gap: 9px; box-shadow: 0 4px 12px rgba(59, 91, 253, 0.24); }
.pi-more .i { font-size: 18px; }
.pi-more:disabled { background: #7F95FF; cursor: progress; }
.pi-filters { display: flex; gap: 10px; }
.pi-menu { position: relative; }
.pi-mbtn { height: 40px; min-width: 118px; padding: 0 12px 0 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14.5px; font-weight: 500; color: var(--text); }
.pi-mbtn .i { font-size: 16px; color: var(--muted); transition: transform 0.15s; }
.pi-mbtn:hover { background: #FAFBFD; }
.pi-mbtn[aria-expanded="true"] { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.12); }
.pi-mbtn[aria-expanded="true"] .i { transform: rotate(180deg); }
.pi-mbtn.is-set { border-color: #BFCBFF; background: var(--indigo-bg-2); color: var(--indigo); font-weight: 600; }
.pi-mbtn.is-set .i { color: var(--indigo); }
.pi-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 210px; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(23, 27, 45, 0.14); }
.pi-pop[hidden] { display: none; }
.pi-pop button { width: 100%; height: 38px; padding: 0 10px; border-radius: 7px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14.5px; color: var(--text); text-align: left; }
.pi-pop button:hover, .pi-pop button:focus-visible { background: var(--indigo-bg-2); outline: none; }
.pi-pop button .i { font-size: 16px; color: var(--indigo); visibility: hidden; stroke-width: 2.4; }
.pi-pop button[aria-checked="true"] { font-weight: 600; color: var(--indigo); }
.pi-pop button[aria-checked="true"] .i { visibility: visible; }
.pi-pop .n { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.pi-pop .sep { height: 1px; background: var(--border-soft); margin: 4px 2px; }

/* 34 · the generating strip of "Generate more ideas" */
.pi-strip { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 12px 16px; border-radius: 12px; background: var(--indigo-bg-2); border: 1px solid #D7DEFF; color: var(--text-2); font-size: 15px; font-weight: 500; }
.pi-strip[hidden] { display: none; }
.pi-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #C7D1FF; border-top-color: var(--indigo); animation: pi-spin 0.8s linear infinite; flex: none; }
@keyframes pi-spin { to { transform: rotate(360deg); } }

/* 34 · the board: three columns of 460 × 284 cards (the 178 × 254 cover, the text column, the two 40 px buttons) */
.pi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pi-card { position: relative; display: grid; grid-template-columns: 178px minmax(0, 1fr); gap: 18px; min-height: 284px; padding: 14px; border-radius: 12px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; outline: none; }
.pi-card[hidden] { display: none; }
.pi-card:hover { border-color: #CDD5F5; }
.pi-card:focus-visible { box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.25); }
.pi-card.is-selected { border-color: var(--indigo); box-shadow: inset 0 0 0 1px var(--indigo), 0 4px 16px rgba(59, 91, 253, 0.1); }
.pi-card.is-selected:focus-visible { box-shadow: inset 0 0 0 1px var(--indigo), 0 0 0 3px rgba(59, 91, 253, 0.25); }
.pi-card.is-new { animation: pi-in 0.45s ease both; }
.pi-card .pi-cover { width: 178px; height: auto; min-height: 254px; }
.pi-body { display: flex; flex-direction: column; min-width: 0; padding-top: 2px; }
.pi-trow { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 7px; }
.pi-trow h3 { flex: 1 1 auto; min-width: 0; margin: 3px 0 0; font-size: 17px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.25; }
.pi-bm { width: 32px; height: 32px; margin: -3px -4px 0 0; border-radius: 8px; display: grid; place-items: center; color: var(--indigo); flex: none; }
.pi-bm:hover { background: var(--indigo-bg-2); }
.pi-bm .i { font-size: 22px; transition: fill 0.15s; }
.pi-bm[aria-pressed="true"] .i { fill: var(--indigo); }
.pi-blocks { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.pi-blocks dt { font-size: 13.5px; color: var(--muted); line-height: 1.2; }
.pi-blocks dd { margin: 1px 0 0; font-size: 14.5px; line-height: 1.26; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pi-acts { display: flex; gap: 12px; margin-top: auto; padding-top: 10px; }
.pi-acts > button { height: 40px; font-size: 15px; justify-content: center; flex: 1 1 0; min-width: 0; padding: 0 10px; gap: 8px; }
.pi-acts .i { font-size: 17px; }
.pi-acts .btn-outline { max-width: 122px; }
.pi-acts .btn-primary { box-shadow: none; }
.pi-acts .btn-primary.is-chosen { background: var(--green); cursor: default; }
.pi-none { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 44px 20px 40px; text-align: center; }
.pi-none[hidden] { display: none; }
.pi-none-ic { width: 52px; height: 52px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; margin-bottom: 6px; }
.pi-none-ic .i { font-size: 24px; }
.pi-none h2 { margin: 0; font-size: 19px; font-weight: 700; }
.pi-none p { margin: 0 0 10px; font-size: 15px; color: var(--muted); }
.pi-none .btn-outline { height: 40px; font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
  .pi-seg i, .pi-disc, .pi-mbtn .i { transition: none; }
  .pi-step.is-active .pi-disc::before, .pi-mini.is-skel.is-live .pi-sk, .pi-mini.is-in, .pi-card.is-new { animation: none; }
  .pi-spin { animation-duration: 2.4s; }
}
@media (max-width: 1480px) {
  .pi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1280px) {
  .pi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pi-ctx { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pi-ctx-brief { margin-left: 0; padding-left: 0; padding-top: 16px; border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 1024px) {
  .pi-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .pi-subnav.ct-subnav { overflow-x: auto; } .pi-subnav .ct-subitem { padding: 0 12px; }
  .pi-head { flex-wrap: wrap; gap: 8px; }
  .pi-autosave { margin: 0; }
  .pi-head-board { flex-direction: column; align-items: stretch; }
  .pi-tools { align-items: stretch; }
  .pi-more { justify-content: center; }
  .pi-filters { flex-wrap: wrap; }
  .pi-menu { flex: 1 1 0; min-width: 0; } .pi-mbtn { width: 100%; min-width: 0; }
  .pi-mlabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pi-menu:last-child .pi-pop, .pi-menu .pi-pop { right: auto; left: 0; }
  .pi-menu:last-child .pi-pop { left: auto; right: 0; }
  .pi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pi-ctx-brief { flex-wrap: wrap; }
  .pi-edit-brief { margin-left: 56px; }
  .pi-mini { height: auto; min-height: 262px; }
  .pi-mini .pi-cap { flex: none; }
  .pi-steps .pi-sl { font-size: 13px; }
  .pi-seg { margin: 0 18px; }
  .pi-fail { flex-wrap: wrap; }
  .pi-foot .btn-outline, .pi-continue { height: 48px; }
}
@media (max-width: 430px) {
  .pi-ctx-brand { gap: 12px; } .pi-tile { width: 48px; height: 48px; font-size: 20px; }
  .pi-card { grid-template-columns: 116px minmax(0, 1fr); gap: 12px; padding: 10px; min-height: 0; }
  .pi-card .pi-cover { width: 116px; height: auto; min-height: 166px; }
  .pi-card .pi-cv-mark { left: 10px; top: 10px; font-size: 13px; }
  .pi-card .pi-cv-h { left: 10px; right: 8px; top: 32px; font-size: 15px; }
  .pi-card .pi-badge { top: 8px; right: 6px; height: 20px; font-size: 10.5px; padding: 0 6px; }
  .pi-trow h3 { font-size: 16px; }
  .pi-blocks { gap: 6px; } .pi-blocks dt { font-size: 12.5px; } .pi-blocks dd { font-size: 13.5px; }
  .pi-acts { gap: 8px; }
  .pi-acts .btn-outline { max-width: none; }
  .pi-mini { height: auto; min-height: 240px; }
  .pi-mini .pi-cover { height: 118px; }
  .pi-cover.is-wide .pi-cv-h { font-size: 15px; right: 16%; }
  .pi-tags li:nth-child(n+3) { display: none; }
  .pi-steps .pi-sl { font-size: 12px; }
  .pi-seg { margin: 0 16px; }
}

/* ---------- Content-35 · Edit post idea (ie-) — the idea editor drawer over the idea board, plan plans/Content-35.md ---------- */
.ie-backdrop { position: fixed; inset: 0; background: rgba(23, 27, 45, 0.36); z-index: 62; }
.ie-drawer { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-mid: #193F94; --cg-tint: #F1F5F9; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter";
  position: fixed; top: 0; right: 0; bottom: 0; width: 504px; max-width: 100vw; background: var(--surface); box-shadow: -12px 0 40px rgba(23, 27, 45, 0.18); display: flex; flex-direction: column; z-index: 63; }
.ie-drawer:focus { outline: none; }
.ie-drawer :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
/* the head: 56 px, the title 22 px / 700, the × */
.ie-head { position: relative; flex: none; height: 56px; display: flex; align-items: center; padding: 0 56px 0 19px; }
.ie-head h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.3px; line-height: 28px; color: var(--text); }
.ie-head .close { position: absolute; top: 9px; right: 12px; width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); background: none; border: 0; cursor: pointer; }
.ie-head .close .i { font-size: 21px; } .ie-head .close:hover { background: var(--border-soft); }
.ie-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 18px 14px 18px; display: flex; flex-direction: column; gap: 13px; }
/* the preview: 468 × 176, radius 10 — the brand tile + the title over the selected reference */
.ie-cover { position: relative; flex: none; margin: 0; width: 100%; height: 176px; border-radius: 10px; overflow: hidden; isolation: isolate; color: #fff;
  background: linear-gradient(118deg, #0B1636 0%, #10245F 52%, #1D46C8 100%); box-shadow: 0 1px 3px rgba(14, 27, 61, 0.16); }
.ie-cover.t-blue { background: linear-gradient(118deg, #1D4FF2 0%, var(--cg-mid) 60%, var(--cg-dark) 100%); }
.ie-cover.t-light { background: linear-gradient(160deg, #FFFFFF 0%, #F1F5F9 50%, #D6E2FB 100%); color: var(--cg-dark); box-shadow: inset 0 0 0 1px rgba(14, 27, 61, 0.08); }
.ie-cv-art { position: absolute; top: 0; bottom: 0; right: 0; width: 64%; z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%); mask-image: linear-gradient(90deg, transparent 0, #000 26%); }
.ie-cv-art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ie-cover::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(8, 17, 45, 0.6) 0%, rgba(8, 17, 45, 0) 60%); }
.ie-cover.t-light::after { background: linear-gradient(90deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0) 60%); }
.ie-cv-brand { position: absolute; left: 26px; top: 18px; z-index: 2; display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; letter-spacing: -0.1px; }
.ie-cv-tile { width: 24px; height: 24px; border-radius: 5px; background: #2F5BFF; color: #fff; font-size: 9.5px; font-weight: 800; display: grid; place-items: center; letter-spacing: -0.2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); }
.ie-cv-h { position: absolute; left: 26px; right: 44%; top: 60px; z-index: 2; font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -0.7px; overflow-wrap: anywhere; }
.ie-cv-h.is-long { font-size: 22px; right: 40%; } .ie-cv-h.is-xlong { font-size: 17px; right: 36%; }
.ie-cv-h em { font-style: normal; color: #8FB0FF; }
.ie-cover.t-light .ie-cv-h em { color: var(--cg-primary); }
/* the fields: labels 15 px / 600 with the red asterisk, 40 px inputs */
.ie-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ie-lrow { display: flex; align-items: center; gap: 12px; min-height: 22px; }
.ie-lbl { font-size: 15px; font-weight: 600; line-height: 20px; color: var(--text); }
.ie-req { color: #E5484D; margin-left: 3px; }
.ie-count { margin-left: auto; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ie-count.is-over { color: var(--red); font-weight: 600; }
.ie-in { width: 100%; box-sizing: border-box; height: 40px; padding: 0 11px; border: 1px solid #D5DAE4; border-radius: 7px; background: var(--surface); font: inherit; font-size: 14.5px; color: var(--text); }
.ie-in:hover { border-color: #BFC7D6; }
.ie-in:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.14); }
textarea.ie-in { height: 54px; min-height: 54px; max-height: 120px; padding: 7px 11px; line-height: 20px; resize: vertical; display: block; }
.ie-in[aria-invalid="true"] { border-color: var(--red); } .ie-in[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(240, 84, 106, 0.16); }
.ie-hint { margin: 0; font-size: 13.5px; line-height: 18px; color: var(--text-3, var(--muted)); }
.ie-err { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13.5px; line-height: 18px; color: var(--red); font-weight: 500; }
.ie-err .i { font-size: 15px; flex: none; }
/* the "Exact text" switch at the right of the title label; the info note as a tinted 32 px strip */
.ie-swrap { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.ie-swrap label { font-size: 14px; color: var(--text-2); cursor: pointer; }
.ie-sw { position: relative; width: 38px; height: 22px; flex: none; padding: 0; border: 0; border-radius: 11px; background: #CBD2DE; cursor: pointer; transition: background-color 0.15s; }
.ie-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(14, 27, 61, 0.25); transition: transform 0.15s; }
.ie-sw[aria-checked="true"] { background: #1D4FF2; } .ie-sw[aria-checked="true"]::after { transform: translateX(16px); }
.ie-note { display: flex; align-items: center; gap: 9px; min-height: 32px; box-sizing: border-box; padding: 5px 12px; border-radius: 6px; background: #EDF1FA; font-size: 13px; line-height: 18px; color: var(--text-2); }
.ie-note .i { font-size: 16px; color: #3B5BFD; flex: none; }
.ie-note[hidden] { display: none; }
/* the visual direction combobox: the input + the chevron + the listbox (opens upward near the bottom) */
.ie-combo { position: relative; }
.ie-combo .ie-in { padding-right: 40px; text-overflow: ellipsis; }
.ie-chev { position: absolute; top: 1px; right: 1px; width: 38px; height: 38px; border: 0; border-radius: 0 6px 6px 0; background: none; color: var(--text-2); display: grid; place-items: center; cursor: pointer; }
.ie-chev .i { font-size: 17px; transition: transform 0.15s; } .ie-combo.is-open .ie-chev .i { transform: rotate(180deg); }
.ie-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; margin: 0; padding: 5px; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; box-shadow: 0 12px 32px rgba(23, 27, 45, 0.16); max-height: 232px; overflow: auto; }
.ie-combo.is-up .ie-list { top: auto; bottom: calc(100% + 4px); }
.ie-list li { display: grid; grid-template-columns: minmax(0, 1fr) 18px; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; font-size: 14px; line-height: 19px; color: var(--text); cursor: pointer; }
.ie-list li small { display: block; font-size: 12px; color: var(--muted); }
.ie-list li .i { font-size: 16px; color: var(--indigo); visibility: hidden; }
.ie-list li[aria-selected="true"] .i { visibility: visible; }
.ie-list li.is-active, .ie-list li:hover { background: var(--indigo-bg-2, #F3F5FF); }
/* the reference thumbnails: four 104 × 64 tiles, radius 6, the 2 px indigo border on the selected */
.ie-refs { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ie-tiles { display: grid; grid-template-columns: repeat(4, 104px); justify-content: space-between; }
.ie-tile { position: relative; width: 104px; height: 64px; padding: 2px; border: 2px solid transparent; border-radius: 8px; background: none; cursor: pointer; box-sizing: border-box; }
.ie-tile .ie-thumb { position: relative; display: block; width: 100%; height: 100%; border-radius: 5px; overflow: hidden; }
.ie-thumb > .cp-art { border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(14, 27, 61, 0.08); cursor: inherit; }
.ie-tile:hover { border-color: #C9D3FB; }
.ie-tile[aria-checked="true"] { border-color: var(--indigo); }
.ie-banner { display: grid; place-items: center; }
.ie-banner .ie-bn-t { position: relative; z-index: 1; text-align: center; font-size: 10.5px; font-weight: 700; line-height: 1.12; letter-spacing: -0.2px; color: #fff; }
.ie-banner .ie-bn-t em { font-style: normal; color: #8FB0FF; }
.ie-banner .ie-bn-mark { position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); z-index: 1; font-size: 5px; font-weight: 800; letter-spacing: 0.2px; color: rgba(255, 255, 255, 0.75); }
.ie-noref { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 9px; background: var(--bg); font-size: 14px; color: var(--muted); }
.ie-noref .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--indigo-bg); color: var(--indigo); flex: none; }
.ie-noref .ic .i { font-size: 18px; }
/* the sticky footer: Cancel 44 px outline left, Save 44 px primary right */
.ie-foot { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 18px 14px; border-top: 1px solid var(--border); background: var(--surface); }
.ie-foot > button { height: 44px; padding: 0 20px; font-size: 15.5px; font-weight: 500; border-radius: 8px; white-space: nowrap; box-shadow: none; }
.ie-foot .btn-outline { border: 1px solid #D5DAE4; color: var(--text); }
.ie-foot .btn-primary { margin-left: auto; min-width: 180px; justify-content: center; background: #1D4FF2; } .ie-foot .btn-primary:hover { background: #1843D6; }
.ie-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ie-sw, .ie-sw::after, .ie-chev .i { transition: none; } }
@media (max-width: 768px) {
  .ie-drawer { top: auto; width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; }
  .ie-head { height: 52px; padding: 0 56px 0 16px; } .ie-head h2 { font-size: 19px; }
  .ie-head .close { top: 4px; right: 6px; width: 44px; height: 44px; }
  .ie-body { padding: 0 16px 12px; gap: 12px; }
  .ie-cover { height: auto; aspect-ratio: 468 / 176; }
  .ie-cv-brand { left: 16px; top: 12px; font-size: 12px; } .ie-cv-tile { width: 20px; height: 20px; font-size: 8.5px; }
  .ie-cv-h { left: 16px; top: 42px; font-size: 22px; right: 40%; } .ie-cv-h.is-long { font-size: 17px; } .ie-cv-h.is-xlong { font-size: 14px; }
  .ie-in { height: 44px; font-size: 16px; } textarea.ie-in { height: 64px; min-height: 64px; }
  .ie-sw { width: 44px; height: 26px; border-radius: 13px; } .ie-sw::after { width: 20px; height: 20px; } .ie-sw[aria-checked="true"]::after { transform: translateX(18px); }
  .ie-chev { width: 44px; height: 42px; }
  .ie-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .ie-tile { width: 100%; height: auto; aspect-ratio: 104 / 64; min-height: 44px; }
  .ie-foot { padding: 10px 16px 14px; }
  .ie-foot > button { height: 48px; flex: 1 1 auto; min-width: 0; }
  .ie-foot .btn-primary { min-width: 0; } .ie-foot .btn-outline { flex: 0 0 auto; }
}
@media (max-width: 430px) { .ie-cv-h { font-size: 19px; top: 44px; } .ie-cv-h.is-long { font-size: 15px; } .ie-swrap label { font-size: 13.5px; } }

/* ---------- Content-33 / 34 / 35 build additions (pi- / ie-): real images in place of the prototype drawings, the brand logo tile, the stepper, the states ---------- */
.pi-root .pw-steps { height: 56px; margin-bottom: 14px; }
.pi-cv-art img, .ie-cv-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pi-card .pi-cv-h { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pi-cover.is-wide .pi-cv-h { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pi-tile { position: relative; overflow: hidden; }
.pi-tile.has-logo { background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.pi-tile.has-logo.is-dark { background: var(--cg-dark); }
.pi-tile.has-logo img { position: absolute; left: 14%; top: 14%; width: 72%; height: 72%; object-fit: contain; }
.pi-board-fail { margin: 0 0 12px; }
.pi-none [hidden] { display: none; }
.pi-acts .btn-primary.is-pending { opacity: 0.85; }
.ie-cv-tile { background: var(--cg-primary); }
.ie-thumb .cp-art { cursor: inherit; }
.ie-thumb .cp-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ie-thumb .cp-art.is-logo { background: #fff; }
.ie-thumb .cp-art.is-logo img { object-fit: contain; padding: 10%; box-sizing: border-box; }
.ie-fail { padding: 16px 0; }
.ie-foot .btn-primary.is-pending { opacity: 0.85; }
@media (max-width: 768px) { body:has(#ie-host .ie-drawer) .mo-tabbar { display: none; } }

/* ---------- Content-36 · Plan your post visuals (pv2-) — Content module, plan plans/Content-36.md; the stepper is Content-30's shared pw-steps ---------- */
.pv2-root { --cg-light: #FFFFFF; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter"; }
/* the head: the eyebrow, the title and the sub line at the left; the post stepper at step 4 at the right (plan §11.1) */
.pv2-head { align-items: center; padding: 0 0 14px 8px; }
.pv2-head-t { min-width: 0; }
.pv2-head .eyebrow { font-size: 13.5px; letter-spacing: 0.6px; margin-bottom: 8px; }
.pv2-head h1 { font-size: 34px; letter-spacing: -0.6px; }
.pv2-head .sub { font-size: 18px; margin-top: 6px; }
.pv2-head .pw-steps { flex: 0 1 600px; min-width: 0; margin: 0 0 0 auto; height: 62px; padding: 0 22px; }
.pv2-head .pw-steps .pw-disc { width: 34px; height: 34px; font-size: 15px; }
.pv2-head .pw-steps .pw-step.is-done .pw-disc .i { font-size: 16px; }
.pv2-head .pw-steps .pw-sl { margin-left: 11px; font-size: 15px; }
.pv2-head .pw-steps .pw-step:not(:last-child)::after { margin: 0 14px; }
.pv2-subnav.ct-subnav { height: 44px; margin: 0 0 16px; }
.pv2-subnav .ct-subitem { padding: 0 22px; }

/* three columns (the drawing: 342 · 1fr · 382, 16 px gaps), each a card */
.pv2-grid { display: grid; grid-template-columns: 342px minmax(0, 1fr) 382px; gap: 16px; align-items: stretch; }
.pv2-col { min-width: 0; }
.pv2-ch { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.pv2-ch h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.2px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv2-n, .pv2-pos { margin-left: auto; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* the slides column: numbered cards (the 32 px number chip, the 211 × 106 thumbnail, ⋯), the selected card with the indigo border */
.pv2-slides { padding: 16px 10px 18px; display: flex; flex-direction: column; }
.pv2-slides .pv2-ch { padding: 0 8px 0 8px; margin-bottom: 8px; }
.pv2-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pv2-card { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 8px; border: 1.5px solid transparent; border-radius: 10px; transition: border-color 0.12s, background-color 0.12s; }
.pv2-card:hover { background: #F8F9FC; }
.pv2-card.is-sel { border-color: #5B7BFF; background: var(--surface); box-shadow: 0 1px 4px rgba(59, 91, 253, 0.1); }
.pv2-card.is-invalid { border-color: var(--red); }
.pv2-card.is-flash { animation: pv2-flash 0.9s ease-out; }
@keyframes pv2-flash { from { background: #E8EDFF; } to { background: transparent; } }
.pv2-pick { display: grid; grid-template-columns: 32px 211px; align-items: start; gap: 12px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; border-radius: 8px; color: inherit; font: inherit; }
.pv2-pick:focus-visible, .pv2-dots:focus-visible, .pv2-add:focus-visible, .pv2-nav:focus-visible, .pv2-chipbtn:focus-visible, .pv2-lock:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.pv2-num { position: relative; width: 32px; height: 32px; border-radius: 7px; background: #F1F3F7; display: grid; place-items: center; font-size: 17px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; margin-top: 2px; }
.pv2-card.is-sel .pv2-num { background: #ECEFF8; }
.pv2-card.is-invalid .pv2-num::after { content: "!"; position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.pv2-thumb { position: relative; display: block; width: 211px; height: 106px; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 6px rgba(14, 27, 61, 0.16); }
.pv2-dots { margin-left: auto; width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--text-2); display: grid; place-items: center; cursor: pointer; flex: none; }
.pv2-dots .i { font-size: 20px; } .pv2-dots:hover, .pv2-dots[aria-expanded="true"] { background: var(--border-soft); color: var(--text); }
.pv2-menu { position: absolute; right: 6px; top: calc(50% + 22px); z-index: 30; min-width: 184px; margin: 0; padding: 5px; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(23, 27, 45, 0.16); }
.pv2-menu.is-up { top: auto; bottom: calc(50% + 22px); }
.pv2-menu button { width: 100%; height: 36px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 14.5px; color: var(--text); cursor: pointer; text-align: left; }
.pv2-menu button .i { font-size: 17px; color: var(--text-2); }
.pv2-menu button:hover:not([aria-disabled="true"]), .pv2-menu button:focus-visible { background: var(--indigo-bg-2, #F3F5FF); outline: none; }
.pv2-menu button.danger, .pv2-menu button.danger .i { color: var(--red); }
.pv2-menu button[aria-disabled="true"] { opacity: 0.42; cursor: default; }
.pv2-menu hr { border: 0; border-top: 1px solid var(--border-soft); margin: 4px 2px; }
.pv2-add { display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; margin: 14px 8px 0; border: 1px dashed #C6CEDD; border-radius: 8px; background: #FAFBFD; color: var(--indigo); font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer; }
.pv2-add .i { font-size: 20px; } .pv2-add:hover:not(:disabled) { background: #F2F5FF; border-color: #9FB2FF; }
.pv2-add:disabled { color: var(--muted); cursor: not-allowed; }
.pv2-minerr { display: flex; align-items: center; gap: 8px; margin: 0 8px 10px; padding: 8px 12px; border-radius: 8px; background: #FDECEE; color: var(--red); font-size: 13.5px; font-weight: 500; line-height: 18px; }
.pv2-minerr .i { font-size: 16px; flex: none; }
.pv2-minerr[hidden] { display: none; }

/* the preview column: the head with the counter and two 36 px arrows, the 654 × 328 stage (the real ratio inside a letterbox), the order strip */
.pv2-prev { padding: 14px 18px 16px; display: flex; flex-direction: column; }
.pv2-prev .pv2-ch { gap: 12px; }
.pv2-ch .pv2-pos { margin-right: 4px; }
.pv2-nav { width: 38px; height: 36px; flex: none; border: 1px solid #D9DEE8; border-radius: 8px; background: var(--surface); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.pv2-nav .i { font-size: 18px; } .pv2-nav:hover:not(:disabled) { background: #F5F7FB; } .pv2-nav:disabled { color: #C2C8D4; cursor: default; }
.pv2-stage { position: relative; margin-top: 12px; width: 100%; aspect-ratio: 654 / 328; border-radius: 8px; overflow: hidden; background: #0A1433; }
.pv2-order { margin-top: 14px; }
.pv2-order-t { margin: 0 0 8px; font-size: 14.5px; font-weight: 500; color: var(--text-2); }
.pv2-chips { list-style: none; margin: 0; padding: 0 0 2px; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: thin; }
.pv2-chip { flex: 1 1 0; min-width: 176px; display: flex; align-items: stretch; height: 62px; border: 1px solid #E3E7EF; border-radius: 9px; background: var(--surface); user-select: none; -webkit-user-select: none; }
.pv2-grip { flex: none; width: 34px; display: grid; place-items: center; color: var(--text-2); border-right: 1px solid #E9ECF2; cursor: grab; touch-action: none; }
.pv2-grip .i { font-size: 18px; }
.pv2-chipbtn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; margin: 2px; padding: 0 3px 0 5px; border: 2px solid transparent; border-radius: 7px; background: none; cursor: pointer; font: inherit; color: inherit; }
.pv2-chip.is-sel .pv2-chipbtn { border-color: #5B7BFF; }
.pv2-chipnum { align-self: flex-start; margin-top: 3px; width: 22px; height: 22px; flex: none; border-radius: 5px; background: #F1F3F7; display: grid; place-items: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pv2-mini { position: relative !important; inset: auto !important; flex: 1; min-width: 0; height: 50px; border-radius: 4px !important; display: flex; align-items: center; padding: 0 8px; box-sizing: border-box; cursor: inherit !important; }
.pv2-mini .pv2-art { width: 62%; left: auto; height: 100%; }
.pv2-mini-h { position: relative; z-index: 1; font-size: 12.5px; font-weight: 700; line-height: 1.2; letter-spacing: -0.1px; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 3px rgba(5, 11, 31, 0.5); }
.pv2-mini.a-light .pv2-mini-h { color: var(--cg-dark); text-shadow: none; }
.pv2-chip.is-drag { box-shadow: 0 10px 24px rgba(23, 27, 45, 0.2); border-color: #9FB2FF; transform: translateY(-2px); position: relative; z-index: 2; }
body.pv2-dragging, body.pv2-dragging * { cursor: grabbing !important; }

/* the composed slide (a client-side mock, plan §3): the letterbox shows the real ratio, sized in container units so one markup serves every size */
.pv2-frame { position: absolute; inset: 0; overflow: hidden; background: #0A1433; }
.pv2-lb { position: absolute; inset: -14px; filter: blur(9px) brightness(0.48) saturate(1.1); }
.pv2-lb > .cp-art { border-radius: 0; box-shadow: none; cursor: default; }
.pv2-sl { position: absolute; top: 0; left: 50%; height: 100%; aspect-ratio: 1 / 1; transform: translateX(-50%); container-type: inline-size; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 26px rgba(0, 0, 0, 0.35); }
.pv2-stage .pv2-sl { top: 14px; height: calc(100% - 28px); border-radius: 6px; }
.pv2-sl > .cp-art { border-radius: 0; box-shadow: none; cursor: default; }
.pv2-art { position: absolute; left: 0; right: 0; bottom: 0; height: 56%; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 34%); mask-image: linear-gradient(to bottom, transparent 0, #000 34%); }
.pv2-lb .pv2-art, .pv2-mini .pv2-art { top: 0; bottom: 0; height: auto; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%); mask-image: linear-gradient(90deg, transparent 0, #000 40%); }
.pv2-lb .pv2-art { -webkit-mask-image: none; mask-image: none; }
.pv2-mini .pv2-art { right: 0; }
.pv2-logo { position: absolute; z-index: 2; display: flex; align-items: center; gap: 2.4cqw; font-size: 4.3cqw; font-weight: 700; letter-spacing: -0.02em; color: #fff; white-space: nowrap; }
.pv2-tile { width: 9cqw; height: 9cqw; border-radius: 1.8cqw; background: #2F5BFF; color: #fff; font-size: 3.9cqw; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 0.3cqw rgba(255, 255, 255, 0.3); }
.pv2-sl[data-logo="top_left"] .pv2-logo { top: 6.5cqw; left: 7cqw; }
.pv2-sl[data-logo="top_right"] .pv2-logo { top: 6.5cqw; right: 7cqw; flex-direction: row-reverse; }
.pv2-sl[data-logo="bottom_left"] .pv2-logo { bottom: 6.5cqw; left: 7cqw; }
.pv2-sl[data-logo="bottom_right"] .pv2-logo { bottom: 6.5cqw; right: 7cqw; flex-direction: row-reverse; }
.pv2-sl[data-logo="none"] .pv2-logo { display: none; }
.pv2-txt { position: absolute; z-index: 1; left: 7cqw; right: 7cqw; top: 22cqw; color: #fff; }
.pv2-sl[data-logo^="bottom"] .pv2-txt, .pv2-sl[data-logo="none"] .pv2-txt { top: 9cqw; }
.pv2-h { margin: 0; font-size: 10.4cqw; font-weight: 800; line-height: 1.04; letter-spacing: -0.035em; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 0.4cqw 2cqw rgba(5, 11, 31, 0.35); }
.pv2-h.is-long { font-size: 8.2cqw; } .pv2-h.is-xlong { font-size: 6.4cqw; -webkit-line-clamp: 4; }
.pv2-h.is-empty { opacity: 0.4; }
.pv2-b { margin: 3.2cqw 0 0; max-width: 74cqw; font-size: 4.5cqw; line-height: 1.3; color: rgba(255, 255, 255, 0.9); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 0.3cqw 1.4cqw rgba(5, 11, 31, 0.4); }
.pv2-sl.t-light .pv2-txt, .pv2-sl.t-light .pv2-logo { color: var(--cg-dark); }
.pv2-sl.t-light .pv2-h, .pv2-sl.t-light .pv2-b { text-shadow: none; } .pv2-sl.t-light .pv2-b { color: rgba(14, 27, 61, 0.8); }
.pv2-ratio { position: absolute; right: 10px; bottom: 10px; z-index: 3; padding: 3px 8px; border-radius: 6px; background: rgba(8, 17, 45, 0.62); color: #fff; font-size: 12px; font-weight: 500; letter-spacing: 0.1px; }

/* the editor: labels 15 px, 40 px inputs, 74 px textareas, the counters at the right under the fields */
.pv2-edit { padding: 16px 20px 14px 18px; }
.pv2-fs { border: 0; margin: 0; padding: 0; min-width: 0; }
.pv2-edit h2 { margin: 0 0 12px; font-size: 18px; font-weight: 700; letter-spacing: -0.2px; line-height: 36px; }
.pv2-f { display: flex; flex-direction: column; min-width: 0; margin-bottom: 6px; }
.pv2-f-sel { margin-bottom: 14px; } .pv2-f-sel:last-child { margin-bottom: 4px; }
.pv2-lbl { display: flex; align-items: baseline; gap: 4px; margin-bottom: 7px; font-size: 15px; font-weight: 600; line-height: 20px; color: var(--text); }
.pv2-req { color: #E5484D; }
.pv2-opt { display: none; font-weight: 400; font-size: 13.5px; color: var(--muted); }
.pv2-root[data-kind="image"] [data-field="body"] .pv2-req { display: none; }
.pv2-root[data-kind="image"] [data-field="body"] .pv2-opt { display: inline; }
.pv2-in { width: 100%; box-sizing: border-box; height: 40px; padding: 0 13px; border: 1px solid #D9DEE8; border-radius: 7px; background: var(--surface); font: inherit; font-size: 14.5px; color: var(--text); }
.pv2-in:hover { border-color: #BFC7D6; }
.pv2-in:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.14); }
.pv2-in[aria-invalid="true"] { border-color: var(--red); } .pv2-in[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(240, 84, 106, 0.16); }
.pv2-in[readonly] { background: #F6F7FA; color: var(--text-2); }
textarea.pv2-in { height: 74px; min-height: 60px; max-height: 180px; padding: 8px 13px; line-height: 20px; resize: vertical; display: block; }
.pv2-inwrap { position: relative; display: block; }
.pv2-inwrap .pv2-in { padding-right: 44px; }
.pv2-lock { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border: 0; border-radius: 6px; background: none; color: var(--indigo); display: grid; place-items: center; cursor: pointer; }
.pv2-lock .i { font-size: 17px; } .pv2-lock:hover { background: var(--indigo-bg); }
.pv2-lock[hidden] { display: none; }
.pv2-lockhint { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 13px; color: var(--text-2); }
.pv2-lockhint .i { font-size: 14px; color: var(--indigo); flex: none; }
.pv2-lockhint[hidden] { display: none; }
.pv2-err { display: flex; align-items: center; gap: 6px; margin: 0; min-width: 0; font-size: 13.5px; line-height: 18px; color: var(--red); font-weight: 500; }
.pv2-err .i { font-size: 15px; flex: none; }
.pv2-err[hidden] { display: none; }
.pv2-under { display: flex; align-items: flex-start; gap: 10px; min-height: 18px; margin-top: 4px; }
.pv2-count { margin-left: auto; flex: none; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pv2-count.is-over { color: var(--red); font-weight: 600; }
.pv2-sel { position: relative; display: block; }
.pv2-sel select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; text-overflow: ellipsis; }
.pv2-sel .i { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); font-size: 17px; color: var(--text-2); pointer-events: none; }
.pv2-fs:disabled { opacity: 0.7; }

/* the text post: the info panel in place of the columns */
.pv2-text { display: flex; align-items: center; gap: 16px; padding: 22px 24px; }
.pv2-text[hidden] { display: none; }
.pv2-text-ic { width: 46px; height: 46px; flex: none; border-radius: 11px; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; }
.pv2-text-ic .i { font-size: 22px; }
.pv2-text-b { flex: 1; min-width: 0; }
.pv2-text-b h2 { margin: 0; font-size: 18px; font-weight: 700; }
.pv2-text-b p { margin: 4px 0 0; font-size: 15px; color: var(--text-2); }
.pv2-cont { height: 44px; padding: 0 20px; font-size: 15.5px; font-weight: 600; gap: 10px; border-radius: 8px; box-shadow: none; white-space: nowrap; }
.pv2-cont .i { font-size: 19px; }

/* the footer card: Back 44 px outline left; Preview 44 px outline + the primary right */
.pv2-foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 9px 18px 9px 18px; }
.pv2-foot-r { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.pv2-back { height: 44px; padding: 0 22px; font-size: 15.5px; font-weight: 500; display: inline-flex; align-items: center; border: 1px solid #D5DAE4; color: var(--text); text-decoration: none; }
.pv2-pre { height: 44px; padding: 0 20px 0 18px; gap: 10px; font-size: 15.5px; font-weight: 500; color: var(--indigo); border: 1px solid #C9D3FB; }
.pv2-pre .i { font-size: 21px; color: var(--indigo); }
.pv2-next { height: 44px; min-width: 186px; padding: 0 20px; gap: 12px; justify-content: center; font-size: 15.5px; font-weight: 600; border-radius: 8px; background: #1D4FF2; box-shadow: none; white-space: nowrap; }
.pv2-next:hover:not(:disabled) { background: #1843D6; }
.pv2-next .i { font-size: 19px; }
.pv2-next:disabled, .pv2-cont:disabled { opacity: 0.85; cursor: progress; }
.pv2-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; animation: pv2-spin 0.8s linear infinite; flex: none; }
@keyframes pv2-spin { to { transform: rotate(360deg); } }
.pv2-root[data-kind="text"] .pv2-grid, .pv2-root[data-kind="text"] .pv2-foot-r { display: none; }
.pv2-root[data-kind="image"] .pv2-add, .pv2-root[data-kind="image"] .pv2-order, .pv2-root[data-kind="image"] .pv2-pos,
.pv2-root[data-kind="image"] .pv2-nav, .pv2-root[data-kind="image"] .pv2-n, .pv2-root[data-kind="image"] .pv2-dots, .pv2-root[data-kind="image"] .pv2-num { display: none; }
.pv2-root[data-kind="image"] .pv2-pick { grid-template-columns: 211px; }
@media (prefers-reduced-motion: reduce) { .pv2-card, .pv2-card.is-flash, .pv2-spin { transition: none; animation: none; } }

@media (max-width: 1280px) {
  .pv2-grid { grid-template-columns: 300px minmax(0, 1fr) 340px; }
  .pv2-pick { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; } .pv2-thumb { width: 100%; height: auto; aspect-ratio: 211 / 106; }
  .pv2-card .pv2-pick { flex: 1; min-width: 0; }
}
@media (max-width: 1100px) {
  .pv2-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pv2-prev { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 768px) {
  .pv2-head { flex-direction: column; align-items: stretch; gap: 12px; padding: 0 0 12px; }
  .pv2-head h1 { font-size: 28px; } .pv2-head .sub { font-size: 16px; }
  .pv2-head .pw-steps { flex: none; width: 100%; margin: 0; height: 56px; padding: 0 12px; box-sizing: border-box; }
  .pv2-subnav.ct-subnav { overflow-x: auto; } .pv2-subnav .ct-subitem { padding: 0 12px; }
  .pv2-grid { grid-template-columns: minmax(0, 1fr); }
  .pv2-prev { grid-column: auto; order: 0; padding: 14px 14px 14px; }
  .pv2-slides { padding: 14px 6px 14px; }
  .pv2-nav, .pv2-dots { width: 44px; height: 44px; }
  .pv2-chip { flex: 0 0 176px; }
  .pv2-in { height: 44px; font-size: 16px; } textarea.pv2-in { font-size: 16px; }
  .pv2-sel select { height: 44px; }
  .pv2-lock { top: 6px; }
  .pv2-add { height: 48px; }
  .pv2-text { flex-wrap: wrap; } .pv2-cont { width: 100%; justify-content: center; height: 48px; }
  .pv2-foot { flex-wrap: wrap; padding: 10px 12px; }
  .pv2-foot-r { margin-left: 0; width: 100%; }
  .pv2-foot-r > button { flex: 1 1 0; min-width: 0; height: 48px; justify-content: center; padding: 0 10px; }
  .pv2-next { min-width: 0; }
  .pv2-back { height: 48px; }
  .pv2-menu button { height: 44px; }
}
@media (max-width: 430px) {
  .pv2-card { padding: 6px 4px; gap: 4px; }
  .pv2-pick { grid-template-columns: 26px minmax(0, 1fr); gap: 8px; } .pv2-num { width: 26px; height: 26px; font-size: 15px; }
  .pv2-foot-r { flex-direction: column; } .pv2-foot-r > button { width: 100%; flex: none; }
  .pv2-ratio { font-size: 11px; right: 6px; bottom: 6px; }
}

/* ---------- Content-37 · Generate this post? (pg-) — the post generation summary dialog over the visual plan, plan plans/Content-37.md ---------- */
html.pg-lock { overflow: hidden; }
.pg-backdrop { --cg-light: #FFFFFF; --cg-text: #FFFFFF; --cg-dark: #0E1B3D; --cg-hfont: "Inter"; --cg-bfont: "Inter";
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(23, 27, 45, 0.45); overscroll-behavior: contain; }
/* the MM-41 frame at 706 px: radius 16; the head, the scrolling body and the footer */
.pg-dialog { position: relative; width: 706px; max-width: 100%; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); box-sizing: border-box; display: flex; flex-direction: column;
  background: var(--surface); border-radius: 16px; box-shadow: 0 24px 60px rgba(23, 27, 45, 0.22); }
.pg-dialog:focus { outline: none; }
.pg-dialog :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
/* the head: the 44 px sparkle tile, the 26 px / 800 title, the 16 px lead, the × — a 1 px rule under it */
.pg-head { display: flex; align-items: flex-start; gap: 16px; padding: 19px 64px 17px 31px; border-bottom: 1px solid var(--border); flex: none; }
.pg-tile { width: 42px; height: 42px; flex: none; margin-top: 1px; border-radius: 10px; display: grid; place-items: center; background: var(--indigo-bg); color: var(--indigo); }
.pg-tile .i { font-size: 23px; }
.pg-head-t { min-width: 0; }
.pg-head h2 { margin: 1px 0 0; font-size: 26px; font-weight: 800; line-height: 32px; letter-spacing: -0.5px; color: var(--text); }
.pg-head p { margin: 3px 0 0; font-size: 15.5px; line-height: 22px; color: var(--text-2); }
.pg-close { position: absolute; top: 15px; right: 14px; width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); background: none; border: 0; cursor: pointer; }
.pg-close .i { font-size: 22px; } .pg-close:hover { background: var(--border-soft); }
.pg-body { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 15px 32px 0; }
.pg-lbl { margin: 0; padding: 0; font-size: 16px; font-weight: 600; line-height: 22px; color: var(--text); }
/* the strips: no connection (red, the Content-07 link) · a generation already running (amber) */
.pg-strip { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; font-size: 14.5px; line-height: 20px; }
.pg-strip .i { font-size: 18px; flex: none; margin-top: 1px; }
.pg-strip p { margin: 0; }
.pg-strip.is-error { background: #FDECEE; color: #9B1C31; } .pg-strip.is-error > .i { color: var(--red); }
.pg-strip.is-running { background: var(--amber-bg); color: var(--amber-text); } .pg-strip.is-running > .i { color: var(--amber); }
.pg-strip a { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; font-weight: 600; color: var(--indigo); text-decoration: none; white-space: nowrap; }
.pg-strip a .i { font-size: 15px; margin: 0; color: inherit; } .pg-strip a:hover { text-decoration: underline; }
/* the preview: "Post preview" + the platform line at the right, three 206 × 206 slides (their ratio kept otherwise) with the number disc */
.pg-prevh { display: flex; align-items: baseline; gap: 12px; }
.pg-meta { margin-left: auto; font-size: 14px; color: var(--muted); white-space: nowrap; }
.pg-slides { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pg-slide { position: relative; aspect-ratio: var(--pg-ratio, 1 / 1); border-radius: 6px; box-shadow: 0 2px 8px rgba(14, 27, 61, 0.18); }
.pg-sl-in { position: absolute; inset: 0; border-radius: 6px; overflow: hidden; background: #0A1433; }
.pg-slide .pv2-sl { left: 0; right: 0; width: auto; height: 100%; aspect-ratio: auto; transform: none; box-shadow: none; }
.pg-slide .pv2-sl > .cp-art { position: absolute; inset: 0; }
.pg-slide .pv2-h, .pg-slide .pv2-b { display: -webkit-box; }
.pg-num { position: absolute; z-index: 3; top: -7px; left: -7px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--text); font-size: 13px; font-weight: 700; box-shadow: 0 1px 4px rgba(14, 27, 61, 0.3); font-variant-numeric: tabular-nums; }
.pg-slides.is-portrait { grid-template-columns: repeat(3, minmax(0, 150px)); justify-content: center; }
/* a text post: the caption card in place of the slides */
.pg-textprev { margin-top: 12px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 10px; background: #FAFBFD; font-size: 15px; line-height: 22px; color: var(--text); }
.pg-tp-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pg-tp-tile.pv2-tile { width: 36px; height: 36px; border-radius: 8px; font-size: 14px; box-shadow: none; }
.pg-tp-h strong { display: block; font-size: 15px; line-height: 18px; } .pg-tp-h small { font-size: 13px; color: var(--muted); }
.pg-textprev p { margin: 0; } .pg-tp-cta { margin-top: 8px !important; font-weight: 600; } .pg-tp-tags { margin-top: 6px !important; color: var(--indigo); }
/* the output version: three radio cards (1 px border, radius 10) */
.pg-vers { margin: 22px 0 0; padding: 0; border: 0; min-width: 0; }
.pg-vgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 9px; }
.pg-v { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; align-content: start; min-height: 62px; padding: 11px 12px 10px 13px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; transition: border-color 0.12s, background-color 0.12s; }
.pg-v:hover { border-color: #C9D2EA; }
.pg-v.is-on { border-color: #D5DCF0; background: #F8F9FC; }
.pg-v input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--indigo); cursor: pointer; }
.pg-v-t { font-size: 15px; font-weight: 500; line-height: 20px; color: var(--text); }
.pg-v-s { grid-column: 1 / -1; margin-top: 3px; font-size: 13px; line-height: 17px; color: var(--muted); }
.pg-v:has(input:focus-visible) { outline: 2px solid var(--indigo); outline-offset: 2px; }
/* the cost: the 44 px coin tile, the label 16 / 700, the price 20 / 800, the note; the references at the right */
.pg-cost { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 13px; align-items: start; margin-top: 21px; }
.pg-tilei { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--indigo-bg); color: var(--indigo); }
.pg-tilei .i { font-size: 23px; }
.pg-cost-l { margin: 1px 0 0; font-size: 16px; font-weight: 600; line-height: 20px; color: var(--text); }
.pg-price { margin: 2px 0 0; font-size: 20px; font-weight: 800; line-height: 26px; letter-spacing: -0.2px; color: var(--text); font-variant-numeric: tabular-nums; }
.pg-note { margin: 2px 0 0; font-size: 14.5px; line-height: 20px; color: var(--text-2); }
.pg-cost-t { min-width: 0; }
.pg-refs { display: inline-flex; align-items: center; gap: 7px; align-self: end; margin: 0 0 1px; padding: 5px 10px; border-radius: 8px; background: #F3F5F9; font-size: 13.5px; line-height: 18px; color: var(--text-2); white-space: nowrap; }
.pg-refs .i { font-size: 16px; color: var(--muted); }
/* the collapsible "Final instructions" card (72 px closed); expanded: one editable prompt per slide */
.pg-ins { margin-top: 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.pg-ins-h { width: 100%; min-height: 70px; display: flex; align-items: center; gap: 17px; padding: 10px 18px 10px 18px; background: none; border: 0; border-radius: 10px; text-align: left; cursor: pointer; font: inherit; color: var(--text); }
.pg-ins-h > .i { font-size: 21px; flex: none; color: var(--text-2); }
.pg-ins-h:hover { background: #FAFBFD; }
.pg-ins-t { flex: 1; min-width: 0; }
.pg-ins-t strong { display: block; font-size: 16px; font-weight: 600; line-height: 22px; }
.pg-ins-t small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 18px; color: var(--text-2); }
.pg-chev { flex: none; display: grid; place-items: center; width: 28px; height: 28px; color: var(--text-2); transition: transform 0.15s; }
.pg-chev .i { font-size: 20px; }
.pg-ins.is-open .pg-chev { transform: rotate(180deg); }
.pg-ins-b { padding: 4px 18px 16px; border-top: 1px solid var(--border-soft); }
.pg-ins-b[hidden] { display: none; }
.pg-p { margin-top: 12px; }
.pg-p-h { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pg-p-h label { min-width: 0; flex: 1; display: flex; align-items: baseline; gap: 8px; font-size: 14.5px; line-height: 20px; }
.pg-p-n { flex: none; font-weight: 600; color: var(--text); }
.pg-p-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.pg-edited { flex: none; padding: 1px 8px; border-radius: 6px; background: var(--indigo-bg); color: var(--indigo); font-size: 12.5px; font-weight: 600; }
.pg-edited[hidden] { display: none; }
.pg-reset { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text-2); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; }
.pg-reset .i { font-size: 15px; } .pg-reset:hover:not(:disabled) { border-color: #C9D2EA; color: var(--text); }
.pg-reset:disabled { opacity: 0.45; cursor: default; }
.pg-ta { display: block; width: 100%; box-sizing: border-box; min-height: 140px; resize: vertical; padding: 10px 12px; border: 1px solid #D5DAE4; border-radius: 8px; background: var(--surface);
  font: 13.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text); }
.pg-ta:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.15); }
.pg-ta[aria-invalid="true"] { border-color: var(--red); }
.pg-p-u { display: flex; align-items: flex-start; gap: 12px; margin-top: 5px; min-height: 18px; }
.pg-err { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13.5px; line-height: 18px; color: #C0263D; }
.pg-err[hidden] { display: none; } .pg-err .i { font-size: 15px; flex: none; }
.pg-count { margin-left: auto; font-size: 12.5px; line-height: 18px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pg-count.is-over { color: #C0263D; font-weight: 600; }
/* the footer: "Back to plan" (outline, left) and "Generate post" (primary, right), 44 px */
.pg-foot { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 19px 31px 19px 31px; border-top: 1px solid transparent; }
.pg-foot.is-edge { border-top-color: var(--border); }
.pg-foot > button { height: 44px; padding: 0 20px; gap: 10px; font-size: 16px; font-weight: 500; border-radius: 8px; white-space: nowrap; box-shadow: none; }
.pg-foot .pg-back { border: 1px solid #D5DAE4; color: var(--text); }
.pg-foot .pg-go { display: inline-flex; align-items: center; justify-content: center; min-width: 166px; }
.pg-foot .pg-go .i { font-size: 19px; }
.pg-foot .pg-go:disabled { opacity: 0.5; cursor: not-allowed; }
.pg-foot .pg-go[aria-disabled="true"] { opacity: 0.85; cursor: progress; }
.pg-spin { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; animation: spin 0.8s linear infinite; flex: none; }
@media (prefers-reduced-motion: reduce) { .pg-spin { animation: none; } .pg-chev { transition: none; } }
/* phones: a bottom sheet, the versions stacked, no horizontal scroll */
@media (max-width: 768px) {
  .pg-backdrop { place-items: end stretch; padding: 0; }
  .pg-dialog { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 16px 16px 0 0; }
  .pg-head { gap: 12px; padding: 18px 56px 14px 16px; }
  .pg-tile { width: 38px; height: 38px; } .pg-tile .i { font-size: 20px; }
  .pg-head h2 { font-size: 21px; line-height: 27px; } .pg-head p { font-size: 14.5px; line-height: 20px; }
  .pg-close { top: 8px; right: 8px; width: 44px; height: 44px; }
  .pg-body { padding: 14px 16px 0; }
  .pg-prevh { flex-wrap: wrap; row-gap: 2px; } .pg-meta { margin-left: 0; width: 100%; font-size: 13px; white-space: normal; }
  .pg-slides { gap: 10px; margin-top: 12px; }
  .pg-num { top: -6px; left: -6px; width: 22px; height: 22px; font-size: 12px; }
  .pg-vgrid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pg-v { min-height: 52px; padding: 10px 12px; }
  .pg-cost { grid-template-columns: 44px minmax(0, 1fr); }
  .pg-refs { grid-column: 1 / -1; justify-self: start; margin-top: 10px; white-space: normal; }
  .pg-ins-h { gap: 12px; padding: 10px 12px; min-height: 64px; }
  .pg-ins-b { padding: 4px 12px 14px; }
  .pg-reset { height: 36px; }
  .pg-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); gap: 10px; }
  .pg-foot > button { flex: 1 1 0; min-width: 0; height: 48px; padding: 0 12px; }
  .pg-foot .pg-go { min-width: 0; }
}

/* ---------- Content-38 · Generating your post (pgn-) — the progress page of a post generation job, plan plans/Content-38.md; the slide images are Content-36's pv2-frame composition ---------- */
.pgn-root { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-mid: #193F94; --cg-tint: #F1F5F9; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter"; }

/* the head: eyebrow, title and lead at the left, the 44 px status chip at the right */
.pgn-head { align-items: center; padding: 0 0 18px 10px; }
.pgn-head-t { min-width: 0; flex: 1; }
.pgn-head .eyebrow { font-size: 13.5px; letter-spacing: 0.6px; margin-bottom: 8px; }
.pgn-head h1 { font-size: 34px; letter-spacing: -0.6px; }
.pgn-head .sub { font-size: 18px; margin-top: 6px; }
.pgn-chip { flex: none; align-self: flex-start; margin: 22px 2px 0 auto; height: 44px; padding: 0 20px 0 16px; display: inline-flex; align-items: center; gap: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 1px 2px rgba(23, 27, 45, 0.04); font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pgn-chip > .i { display: none; font-size: 20px; color: var(--green); }
.pgn-ring { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2.5px solid #D6DDFB; border-top-color: var(--indigo); border-right-color: var(--indigo); animation: pgn-spin 0.9s linear infinite; }
.pgn-chip.is-done .pgn-ring, .pgn-chip.is-failed .pgn-ring { display: none; }
.pgn-chip.is-done > .i { display: block; }
.pgn-chip.is-failed { border-color: #F7C3CB; }
.pgn-chip.is-failed::before { content: "!"; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--red); color: #fff; font-size: 13px; font-weight: 800; display: grid; place-items: center; }
.pgn-root[data-kind="text"] .pgn-chip { display: none; }
@keyframes pgn-spin { to { transform: rotate(360deg); } }

/* all failed: the red strip over the cards */
.pgn-allfail { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 10px 12px 10px 16px; border: 1px solid #F7C3CB; border-radius: 10px; background: #FDECEE; color: #B42339; font-size: 15px; font-weight: 600; }
.pgn-allfail > .i { font-size: 20px; flex: none; } .pgn-allfail > span { flex: 1; min-width: 0; }
.pgn-allfail[hidden] { display: none; }
.pgn-retry-all { height: 40px; font-size: 15px; gap: 8px; color: var(--text); } .pgn-retry-all .i { font-size: 18px; }

/* the slide cards: up to three per row, 44 px head row, the 236 px media (radius 12 cards) */
.pgn-slides { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pgn-slide { padding: 7px 12px 14px; border-radius: 12px; min-width: 0; }
.pgn-sh { display: flex; align-items: center; gap: 18px; height: 44px; padding: 0 8px 0 10px; margin-bottom: 6px; }
.pgn-disc { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; background: #EEF0F5; color: var(--text); }
.pgn-slide.is-ready .pgn-disc { background: var(--indigo); color: #fff; }
.pgn-slide.is-rendering .pgn-disc { background: #C9D3FF; color: #fff; }
.pgn-slide.is-failed .pgn-disc { background: #FDECEE; color: #C6283F; }
.pgn-sh h3 { margin: 0; flex: 1; min-width: 0; font-size: 15.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pgn-pill { flex: none; height: 30px; padding: 0 11px; display: inline-flex; align-items: center; gap: 8px; border-radius: 7px; font-size: 14.5px; font-weight: 500; white-space: nowrap; }
.pgn-pill .i { font-size: 18px; }
.pgn-pill.is-ready { background: var(--green-bg); color: var(--green-text); } .pgn-pill.is-ready .i { color: #fff; fill: var(--green); stroke: #fff; }
.pgn-pill.is-rendering { background: var(--indigo-bg); color: var(--indigo); }
.pgn-pill.is-rendering .i { animation: pgn-spin 1.6s linear infinite; }
.pgn-pill.is-queued { background: #F1F3F7; color: var(--text-2); } .pgn-pill.is-queued .i { color: var(--text-2); }
.pgn-pill.is-failed { background: #FDECEE; color: #C6283F; }
.pgn-pill.is-cancelled { background: #F1F3F7; color: var(--muted); }

.pgn-media { position: relative; display: block; width: 100%; height: 236px; border-radius: 8px; overflow: hidden; background: #F4F6FA; border: 0; padding: 0; font: inherit; color: inherit; text-align: center; }
button.pgn-media { cursor: pointer; }
button.pgn-media:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.pgn-captext:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
.pgn-media .pv2-sl { top: 12px; height: calc(100% - 24px); border-radius: 6px; }
.pgn-media.is-ready .pv2-frame { transition: transform 0.25s; } button.pgn-media.is-ready:hover .pv2-frame { transform: scale(1.012); }
.pgn-media.is-new .pv2-frame { animation: pgn-fade 0.5s ease-out; }
@keyframes pgn-fade { from { opacity: 0; } to { opacity: 1; } }
.pgn-veil { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 16px; }
.pgn-media.is-rendering .pgn-veil { background: rgba(245, 247, 252, 0.84); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); }
.pgn-veil .pgn-bigspin { font-size: 48px; color: var(--indigo); margin: 10px 0 8px; animation: pgn-spin 1.6s linear infinite; }
.pgn-veil .pgn-img { font-size: 64px; color: #BCC3D0; stroke-width: 1.4; margin: 6px 0 16px; }
.pgn-veil b { font-size: 17px; font-weight: 600; color: var(--text); line-height: 1.3; }
.pgn-media.is-queued .pgn-veil b { color: var(--text-2); }
.pgn-veil span { font-size: 14.5px; color: var(--muted); line-height: 1.35; }
.pgn-media.is-failed { background: #FDF4F5; }
.pgn-veil .pgn-err { width: 48px; height: 48px; border-radius: 50%; background: #FDECEE; color: #C6283F; display: grid; place-items: center; margin-bottom: 8px; }
.pgn-veil .pgn-err .i { font-size: 24px; }
.pgn-retry { margin-top: 12px; height: 40px; padding: 0 16px; font-size: 15px; gap: 8px; color: var(--text); } .pgn-retry .i { font-size: 18px; }
.pgn-media.is-cancelled .pgn-veil b { color: var(--muted); }

/* caption | job: minmax(0, 1fr) 720px */
.pgn-row { display: grid; grid-template-columns: minmax(0, 1fr) 720px; gap: 18px; align-items: stretch; }
.pgn-ch { display: flex; align-items: center; gap: 18px; min-height: 36px; }
.pgn-ch h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.2px; color: var(--text); white-space: nowrap; }
.pgn-tile { width: 36px; height: 36px; flex: none; border-radius: 8px; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; }
.pgn-tile .i { font-size: 20px; }
.pgn-cap { padding: 14px 16px 18px; display: flex; flex-direction: column; min-width: 0; }
.pgn-cap .pgn-ch { gap: 16px; } .pgn-cap .pgn-pill { margin-left: 4px; }
.pgn-capbox { margin-top: 14px; border: 1px solid #D9DEE8; border-radius: 8px; background: var(--surface); overflow: hidden; }
.pgn-captext { height: 92px; box-sizing: border-box; overflow-y: auto; padding: 12px 15px; border-radius: 8px; font-size: 16px; line-height: 23px; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.pgn-captext.is-more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); }
.pgn-cap-foot { display: flex; justify-content: flex-end; gap: 12px; margin-top: 12px; }
.pgn-copy { height: 44px; padding: 0 16px; gap: 12px; font-size: 15px; font-weight: 500; color: var(--text); border-color: #D5DAE4; } .pgn-copy .i { font-size: 19px; }
.pgn-job { padding: 14px 16px 14px 20px; display: flex; flex-direction: column; min-width: 0; }
.pgn-tile-job { background: none; width: 30px; } .pgn-tile-job .i { font-size: 24px; }
.pgn-elapsed { margin-left: auto; margin-right: 10px; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--muted); white-space: nowrap; }
.pgn-elapsed .i { font-size: 20px; color: var(--text-2); }
.pgn-elapsed b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.pgn-job-b { display: grid; grid-template-columns: 202px minmax(0, 1fr); margin-top: 12px; }
.pgn-job-b h3 { margin: 0 0 12px; font-size: 14px; font-weight: 500; color: var(--text-2); }
.pgn-model p { margin: 0; font-size: 16px; color: var(--text); }
.pgn-src { border-left: 1px solid var(--border); padding-left: 30px; min-width: 0; }
.pgn-thumbs { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; overflow-x: auto; scrollbar-width: thin; }
.pgn-thumbs li { position: relative; flex: none; width: 112px; height: 64px; }
.pgn-thumbs .cp-art { cursor: default; border-radius: 6px; }
.pgn-job-foot { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: auto; padding-top: 16px; }
.pgn-bg { height: 44px; padding: 0 18px 0 20px; gap: 14px; font-size: 15.5px; font-weight: 500; color: var(--indigo); border-color: #C9D3FB; text-decoration: none; } .pgn-bg .i { font-size: 19px; color: var(--indigo); }
.pgn-bg:hover { background: #F5F7FF; }
.pgn-view { height: 44px; padding: 0 20px; gap: 14px; font-size: 15.5px; font-weight: 500; border-radius: 8px; box-shadow: none; white-space: nowrap; background: #1D4FF2; }
.pgn-view:hover { background: #1843D6; } .pgn-view .i { font-size: 19px; }
.pgn-view[hidden] { display: none; }
.pgn-view:disabled { opacity: 0.5; cursor: default; }

/* a text post: the caption card full width with View post */
.pgn-root[data-kind="text"] .pgn-slides, .pgn-root[data-kind="text"] .pgn-job { display: none; }
.pgn-root[data-kind="text"] .pgn-row { grid-template-columns: minmax(0, 1fr); }
.pgn-root[data-kind="text"] .pgn-captext { height: auto; min-height: 92px; }
@media (prefers-reduced-motion: reduce) { .pgn-ring, .pgn-pill.is-rendering .i, .pgn-veil .pgn-bigspin, .pgn-media.is-new .pv2-frame { animation: none; } }

@media (max-width: 1280px) { .pgn-row { grid-template-columns: minmax(0, 1fr) 600px; } .pgn-job-b { grid-template-columns: 150px minmax(0, 1fr); } .pgn-src { padding-left: 20px; } }
@media (max-width: 1100px) {
  .pgn-slides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgn-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .pgn-head { flex-direction: column; align-items: stretch; gap: 12px; padding: 0 0 12px; }
  .pgn-head h1 { font-size: 28px; } .pgn-head .sub { font-size: 16px; }
  .pgn-chip { margin: 0; align-self: flex-start; }
  .pgn-slides { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
  .pgn-media { height: auto; aspect-ratio: 430 / 236; min-height: 200px; }
  .pgn-row { gap: 12px; }
  .pgn-job { padding: 14px 14px 14px; }
  .pgn-job-b { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pgn-src { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 14px; }
  .pgn-thumbs li { width: 96px; height: 56px; }
  .pgn-job-foot, .pgn-cap-foot { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .pgn-job-foot > *, .pgn-cap-foot > * { justify-content: center; height: 48px; }
  .pgn-retry, .pgn-retry-all { height: 44px; }
  .pgn-allfail { flex-wrap: wrap; }
}
@media (max-width: 430px) {
  .pgn-sh { gap: 12px; padding: 0 2px 0 4px; }
  .pgn-elapsed { margin-right: 0; font-size: 14px; } .pgn-ch { gap: 12px; }
  .pgn-captext { font-size: 15px; }
}

/* ---------- Content-39 · The generated post (pd-) — the post detail page, plan plans/Content-39.md; the slides are Content-36's pv2-frame composition ---------- */
.pd-root { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-mid: #193F94; --cg-tint: #F1F5F9; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter"; }

/* the head: eyebrow, the post title 34 px / 800, the lead 18 px; "Back to Library" at the right */
.pd-head { align-items: flex-start; padding: 0 0 14px 8px; }
.pd-head-t { min-width: 0; flex: 1; }
.pd-head .eyebrow { font-size: 13.5px; letter-spacing: 0.6px; margin-bottom: 8px; }
.pd-head h1 { font-size: 34px; letter-spacing: -0.6px; overflow-wrap: anywhere; }
.pd-head .sub { font-size: 18px; margin-top: 4px; }
.pd-back { flex: none; margin: 0 8px 0 auto; display: inline-flex; align-items: center; gap: 12px; height: 32px; padding: 0 2px; font-size: 14.5px; font-weight: 500; color: var(--text-2); text-decoration: none; border-radius: 6px; white-space: nowrap; }
.pd-back .i { font-size: 18px; color: var(--muted); }
.pd-back:hover { color: var(--indigo); } .pd-back:hover .i { color: var(--indigo); }

/* two columns: the viewer | the 780 px detail card */
.pd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 780px; gap: 18px; align-items: stretch; }

/* ---- the viewer: the 454 × 398 slide, the 102 × 100 thumbnails between 36 px round arrows, the counter */
.pd-viewer { padding: 12px 16px 12px; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.pd-stage { position: relative; width: 454px; max-width: 100%; height: 398px; border-radius: 4px; overflow: hidden; background: #0A1433; flex: none; }
.pd-stage .pv2-frame { border-radius: 4px; }
.pd-stage .pv2-sl { border-radius: 0; }
.pd-stage.is-swap .pv2-frame { animation: pd-fade 0.22s ease-out; }
@keyframes pd-fade { from { opacity: 0.35; } to { opacity: 1; } }

/* the drawn extras of a slide: the keyword list at the top right, the tagline and the address at the bottom */

/* a text post: the caption on the brand card */
.pd-tsl { background: linear-gradient(140deg, var(--cg-primary) 0%, var(--cg-mid) 58%, var(--cg-dark) 100%); }
.pd-tc { position: absolute; left: 7cqw; right: 7cqw; top: 21cqw; bottom: 7cqw; display: flex; flex-direction: column; gap: 3cqw; color: #fff; overflow: hidden; }
.pd-tc p { margin: 0; font-size: 4.3cqw; line-height: 1.38; color: rgba(255, 255, 255, 0.92); }
.pd-tc p:first-child { font-size: 8.4cqw; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; color: #fff; margin-bottom: 1cqw; }
.pd-tc .pd-tc-tags { margin-top: auto; font-size: 3.4cqw; font-weight: 600; color: #BFD2FF; }

.pd-strip { display: flex; align-items: center; gap: 22px; margin-top: 12px; max-width: 100%; }
.pd-arrow { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 2px rgba(23, 27, 45, 0.05); padding: 0; }
.pd-arrow .i { font-size: 18px; }
.pd-arrow:hover:not(:disabled) { border-color: #C9D3FB; color: var(--indigo); }
.pd-arrow:disabled { opacity: 0.45; cursor: default; }
.pd-arrow:focus-visible, .pd-th:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.pd-thumbs { list-style: none; margin: 0; padding: 3px; display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; max-width: calc(5 * 102px + 4 * 12px + 6px); scroll-behavior: smooth; }
.pd-thumbs::-webkit-scrollbar { display: none; }
.pd-thumbs li { flex: none; }
.pd-th { position: relative; display: block; width: 102px; height: 100px; padding: 0; border: 0; border-radius: 6px; overflow: hidden; cursor: pointer; background: #0A1433; box-shadow: 0 0 0 1px rgba(14, 27, 61, 0.08); }
.pd-th .pv2-sl { box-shadow: none; }
.pd-th .pv2-b { display: none; }
.pd-th[aria-current="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--indigo); }
.pd-th:not([aria-current="true"]):hover { box-shadow: 0 0 0 2px #C9D3FB; }
.pd-count { margin: 10px 0 0; font-size: 14.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pd-root[data-kind="image"] .pd-strip, .pd-root[data-kind="image"] .pd-count,
.pd-root[data-kind="text"] .pd-strip, .pd-root[data-kind="text"] .pd-count { display: none; }
.pd-root[data-kind="image"] .pd-viewer, .pd-root[data-kind="text"] .pd-viewer { justify-content: center; }

/* ---- the detail card */
.pd-detail { padding: 12px 15px 14px 16px; display: flex; flex-direction: column; min-width: 0; }
.pd-status { display: flex; align-items: center; gap: 10px; min-height: 34px; font-size: 14.5px; color: var(--muted); min-width: 0; }
.pd-pill { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 11px; border-radius: 7px; font-size: 14.5px; font-weight: 500; white-space: nowrap; }
.pd-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.pd-pill.is-draft { background: #F1F3F7; color: var(--text-2); } .pd-pill.is-draft .pd-dot { background: #9CA3AF; }
.pd-pill.is-pending_review { background: var(--amber-bg); color: var(--amber-text); } .pd-pill.is-pending_review .pd-dot { background: var(--amber); }
.pd-pill.is-approved { background: var(--green-bg); color: var(--green-text); } .pd-pill.is-approved .pd-dot { background: var(--green); }
.pd-pill.is-archived { background: var(--surface); color: var(--muted); box-shadow: inset 0 0 0 1px #D5DAE4; } .pd-pill.is-archived .pd-dot { background: #B7BDC9; }
.pd-ver-w { position: relative; }
.pd-ver { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 6px; margin-left: 2px; border: 0; background: none; border-radius: 6px; font: inherit; font-size: 14.5px; color: var(--muted); cursor: pointer; }
.pd-ver b { font-weight: 600; color: var(--text); }
.pd-ver .i { font-size: 15px; color: var(--muted); }
.pd-ver:hover { background: #F4F6FA; }
.pd-ver[aria-disabled="true"] { cursor: default; } .pd-ver[aria-disabled="true"]:hover { background: none; } .pd-ver[aria-disabled="true"] .i { display: none; }
.pd-sep { color: #9CA3AF; font-size: 12px; }
.pd-gen { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pd-hist { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 10px; height: 32px; padding: 0 4px 0 6px; border: 0; background: none; border-radius: 6px; font: inherit; font-size: 14.5px; font-weight: 500; color: var(--indigo); cursor: pointer; white-space: nowrap; }
.pd-hist .i { font-size: 20px; }
.pd-hist:hover { background: var(--indigo-bg); }

.pd-actions { display: grid; grid-template-columns: 148px 187px 184px minmax(0, 1fr); gap: 16px; margin-top: 10px; }
.pd-act, .pd-primary, .pd-exp-main, .pd-exp-more { height: 42px; font-size: 15px; font-weight: 500; border-radius: 7px; justify-content: center; white-space: nowrap; }
.pd-act { gap: 12px; padding: 0 14px; color: var(--indigo); border-color: #D5DAE4; } .pd-act .i { font-size: 20px; }
.pd-act:hover { background: #F5F7FF; }
.pd-primary { gap: 12px; padding: 0 16px; background: #1D4FF2; box-shadow: none; }
.pd-primary:hover:not(:disabled) { background: #1843D6; }
.pd-pi { display: inline-flex; } .pd-pi .i { font-size: 20px; }
.pd-primary:disabled { cursor: default; }
.pd-primary.is-busy { opacity: 0.85; }
.pd-primary.is-busy .pd-pi .i { animation: pd-spin 0.9s linear infinite; }
.pd-primary.is-done { background: var(--green-bg); color: var(--green-text); border: 1px solid #BFE7D3; opacity: 1; }
@keyframes pd-spin { to { transform: rotate(360deg); } }
.pd-export { position: relative; display: flex; min-width: 0; }
.pd-exp-main { flex: 1; min-width: 0; gap: 12px; color: var(--indigo); border-color: #D5DAE4; border-top-right-radius: 0; border-bottom-right-radius: 0; } .pd-exp-main .i { font-size: 20px; }
.pd-exp-more { width: 48px; flex: none; padding: 0; margin-left: -1px; color: var(--text-2); border-color: #D5DAE4; border-top-left-radius: 0; border-bottom-left-radius: 0; } .pd-exp-more .i { font-size: 18px; }
.pd-exp-main:hover, .pd-exp-more:hover { background: #F5F7FF; }

/* the shared menus (version, export) */
.pd-menu { position: absolute; z-index: 30; top: calc(100% + 6px); min-width: 200px; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 12px 32px rgba(23, 27, 45, 0.14); display: flex; flex-direction: column; gap: 2px; }
.pd-menu[hidden] { display: none; }
.pd-ver-menu { left: 0; min-width: 240px; }
.pd-exp-menu { right: 0; }
.pd-mitem { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 12px; border: 0; background: none; border-radius: 7px; font: inherit; font-size: 14.5px; color: var(--text); text-align: left; cursor: pointer; white-space: nowrap; }
.pd-mitem .i { font-size: 18px; color: var(--text-2); flex: none; }
.pd-mitem:hover, .pd-mitem:focus-visible { background: #F4F6FA; outline: none; }
.pd-mitem[data-act="archive"] { color: #C6283F; } .pd-mitem[data-act="archive"] .i { color: #C6283F; }
.pd-mitem[hidden] { display: none; }
.pd-mitem .pd-mcheck { margin-left: auto; color: var(--indigo); visibility: hidden; }
.pd-mitem[aria-checked="true"] .pd-mcheck { visibility: visible; }
.pd-mitem small { color: var(--muted); font-size: 13px; }

/* the caption card: Caption + Copy, the text box, CTA, hashtags */
.pd-body { margin-top: 12px; padding: 12px 16px 14px; border: 1px solid var(--border); border-radius: 10px; min-width: 0; }
.pd-caph { display: flex; align-items: center; gap: 14px; }
.pd-tile { width: 36px; height: 36px; flex: none; border-radius: 8px; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; }
.pd-tile .i { font-size: 19px; }
.pd-caph h2 { margin: 0; flex: 1; font-size: 16px; font-weight: 600; color: var(--text); }
.pd-copy { height: 36px; padding: 0 12px; gap: 10px; font-size: 14.5px; font-weight: 500; color: var(--text); border-color: #D5DAE4; border-radius: 7px; } .pd-copy .i { font-size: 18px; }
.pd-capbox { margin-top: 8px; max-height: 142px; min-height: 60px; overflow-y: auto; box-sizing: border-box; padding: 9px 12px 10px; border: 1px solid #D9DEE8; border-radius: 8px; font-size: 14.5px; line-height: 19.5px; color: var(--text); overflow-wrap: anywhere; scrollbar-width: thin; }
.pd-capbox p { margin: 0 0 8px; max-width: 590px; } .pd-capbox p:last-child { margin-bottom: 0; }
.pd-capbox:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
.pd-lbl { display: flex; align-items: center; gap: 8px; margin: 12px 0 7px; font-size: 14.5px; font-weight: 500; color: var(--text); }
.pd-tip { position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--muted); border-radius: 50%; cursor: help; }
.pd-tip .i { font-size: 16px; }
.pd-tip::after { content: attr(data-tip); position: absolute; z-index: 20; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); padding: 7px 10px; border-radius: 7px; background: #1F2433; color: #fff; font-size: 13px; font-weight: 400; line-height: 1.35; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.12s; }
.pd-tip:hover::after, .pd-tip:focus-visible::after { opacity: 1; }
.pd-tip:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.pd-field { height: 36px; display: flex; align-items: center; padding: 0 12px; border: 1px solid #D9DEE8; border-radius: 8px; background: var(--surface); font-size: 14.5px; color: var(--text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pd-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 12px; }
.pd-tags li { height: 27px; display: inline-flex; align-items: center; padding: 0 11px; border-radius: 6px; background: #F1F4F9; color: #3F4A63; font-size: 13.5px; }

/* the three meta tiles */
.pd-meta { list-style: none; margin: 14px -15px 0 -16px; padding: 14px 15px 0 16px; border-top: 1px solid var(--border); display: grid; grid-template-columns: 219fr 267fr 248fr; gap: 15px; }
.pd-meta li { display: flex; align-items: center; gap: 14px; height: 58px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; min-width: 0; }
.pd-meta li > div { display: flex; flex-direction: column; min-width: 0; }
.pd-meta span:not(.pd-mi) { font-size: 12.5px; color: var(--muted); line-height: 16px; }
.pd-meta b { font-size: 14.5px; font-weight: 600; color: var(--text); line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-mi { width: 34px; height: 34px; flex: none; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); }
.pd-mi .i { font-size: 21px; }
.pd-mi-pf { background: #FDF1F5; }
.pd-pf { width: 22px; height: 22px; display: block; }

/* read-only / archived: the actions hidden, Copy and Export › Download images stay */
.pd-root.is-readonly .pd-edit, .pd-root[data-status="archived"] .pd-edit { display: none; }
.pd-root.is-readonly .pd-actions, .pd-root[data-status="archived"] .pd-actions { grid-template-columns: 196px; }

@media (prefers-reduced-motion: reduce) { .pd-stage.is-swap .pv2-frame, .pd-primary.is-busy .pd-pi .i { animation: none; } .pd-thumbs { scroll-behavior: auto; } }

@media (max-width: 1400px) {
  .pd-grid { grid-template-columns: minmax(0, 1fr) 660px; }
  .pd-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-root.is-readonly .pd-actions, .pd-root[data-status="archived"] .pd-actions { grid-template-columns: minmax(0, 220px); }
}
@media (max-width: 1100px) {
  .pd-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .pd-head { flex-direction: column-reverse; align-items: stretch; gap: 8px; padding: 0 0 12px; }
  .pd-back { margin: 0; align-self: flex-start; }
  .pd-head h1 { font-size: 28px; } .pd-head .sub { font-size: 16px; }
  .pd-grid { gap: 12px; }
  .pd-viewer { padding: 10px 10px 12px; }
  .pd-stage { width: 100%; height: auto; aspect-ratio: 454 / 398; }
  .pd-strip { gap: 10px; width: 100%; justify-content: center; }
  .pd-th { width: 76px; height: 74px; }
  .pd-thumbs { max-width: calc(100% - 92px); }
  .pd-arrow { width: 44px; height: 44px; }
  .pd-detail { padding: 12px 12px 14px; }
  .pd-status { flex-wrap: wrap; row-gap: 4px; } .pd-sep { display: none; } .pd-gen { flex-basis: 100%; }
  .pd-capbox { max-height: none; }
  .pd-hist { margin-left: 0; padding: 0; height: 44px; }
  .pd-actions { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pd-root.is-readonly .pd-actions, .pd-root[data-status="archived"] .pd-actions { grid-template-columns: minmax(0, 1fr); }
  .pd-act, .pd-primary, .pd-exp-main, .pd-exp-more { height: 48px; }
  .pd-exp-more { width: 56px; }
  .pd-body { padding: 12px 12px 14px; }
  .pd-copy { height: 44px; }
  .pd-meta { grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 14px -12px 0; padding: 14px 12px 0; }
  .pd-tip::after { white-space: normal; width: 200px; left: auto; right: -80px; transform: none; }
}
@media (max-width: 430px) {
  .pd-status { gap: 10px; flex-wrap: wrap; }
  .pd-gen { white-space: normal; }
  .pd-th { width: 64px; height: 62px; }
  .pd-strip { gap: 8px; }
}

/* ---------- Content-36 … 39 build additions (pv2- / pg- / pgn- / pd-): the draft's reference images and the generated images in place of the prototype drawings, the brand logo tile, the ratios ---------- */
.pv2-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pv2-img.is-logo { object-fit: contain; padding: 16%; box-sizing: border-box; background: #fff; }
.pv2-sl.has-img > .cp-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 20, 51, 0.82) 0%, rgba(10, 20, 51, 0.5) 50%, rgba(10, 20, 51, 0.12) 100%); }
.pv2-sl[data-ratio="4:5"] { aspect-ratio: 4 / 5; }
.pv2-sl[data-ratio="9:16"] { aspect-ratio: 9 / 16; }
.pg-slide .pv2-sl[data-ratio] { aspect-ratio: auto; }
.pv2-mini.has-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 20, 51, 0.88) 0%, rgba(10, 20, 51, 0.35) 100%); }
.pv2-tile { position: relative; overflow: hidden; flex: none; }
.pv2-tile.has-logo { background: #fff; }
.pv2-tile.has-logo.is-dark { background: var(--cg-dark); }
.pv2-tile.has-logo img { position: absolute; left: 14%; top: 14%; width: 72%; height: 72%; object-fit: contain; }
.pv2-shot > .cp-art { border-radius: 0; box-shadow: none; cursor: default; }
.pv2-root .pw-steps { height: 62px; }
.pv2-foot .btn-outline[aria-disabled="true"] { pointer-events: none; opacity: 0.6; }
.pg-dialog .cp-art { cursor: default; }
a.pgn-media { cursor: pointer; text-decoration: none; }
a.pgn-media:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
a.pgn-media.is-ready:hover .pv2-frame { transform: scale(1.012); }
.pgn-view { display: inline-flex; align-items: center; text-decoration: none; }
.pgn-view[aria-disabled="true"] { opacity: 0.5; cursor: default; pointer-events: none; }
.pgn-view-text[hidden] { display: none; }
.pgn-nosrc { margin: 0; font-size: 14px; color: var(--muted); }
.pgn-cancelled { background: #F4F6FA; border-color: var(--border); color: var(--text-2); }
.pgn-cancelled a { display: inline-flex; align-items: center; text-decoration: none; }
.pgn-thumbs .cp-art { overflow: hidden; }
.pd-none { color: var(--muted); }
.pd-tags li.pd-none { background: none; padding: 0; }
.pd-stage .pv2-shot, .pd-th .pv2-shot { top: 0; height: 100%; }
.pd-th .pv2-lb { inset: -6px; filter: blur(4px) brightness(0.48); }
.pd-th .pv2-frame { inset: 0; }
.st2-item[data-kind="post"] .st2-cover .cp-art, .st2-item[data-kind="post"] h3 { cursor: pointer; }

/* ---------- Content-40 · Edit post (pe-) — the post edit page, plan plans/Content-40.md; the slides are Content-36's pv2-frame composition, the thumbnail strip is Content-39's ---------- */
.pe-root { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-mid: #193F94; --cg-tint: #F1F5F9; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter"; }
.pe-subnav.ct-subnav { height: 46px; margin: 0 0 14px; padding: 0 8px 0 10px; }
.pe-subnav .ct-subitem { padding: 0 20px; gap: 12px; }

/* two equal-height cards: the current post | the 816 px edit card */
.pe-grid { display: grid; grid-template-columns: minmax(0, 1fr) 816px; gap: 18px; align-items: stretch; }
.pe-tile { width: 32px; height: 32px; flex: none; border-radius: 8px; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; }
.pe-tile .i { font-size: 18px; }

/* ---- the current post: the 32 px tile + title 18 px / 800 + the lead, the square slide, Content-39's thumbnail strip */
.pe-cur { padding: 16px 18px 14px; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.pe-ch { align-self: stretch; display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.pe-ch h2 { margin: 0; font-size: 18px; font-weight: 800; line-height: 24px; letter-spacing: -0.2px; }
.pe-ch p { margin: 2px 0 0; font-size: 14px; color: var(--text-2); }
.pe-stage { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1 / 1; flex: none; border-radius: 10px; overflow: hidden; background: #0A1433; }
.pe-stage .pv2-frame { border-radius: 10px; }
.pe-stage .pv2-sl { border-radius: 0; box-shadow: none; }
.pe-stage.is-swap .pv2-frame { animation: pd-fade 0.22s ease-out; }
.pe-strip-nav.pd-strip { margin-top: 14px; gap: 16px; }
.pe-root .pd-th { width: 84px; height: 84px; }
.pe-root .pd-thumbs { max-width: calc(4 * 84px + 3 * 12px + 6px); }
.pe-count-l.pd-count { margin-top: 8px; }

/* ---- the edit card: the 56 px head, the 44 px tab strip, the panel, the footer */
.pe-edit { padding: 6px 20px 0; display: flex; flex-direction: column; min-width: 0; }
.pe-eh { display: flex; align-items: center; gap: 14px; height: 56px; }
.pe-eh h2 { flex: 1; margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.4px; }
.pe-x { width: 36px; height: 36px; flex: none; border: 0; border-radius: 8px; background: none; color: var(--text-2); display: grid; place-items: center; cursor: pointer; padding: 0; }
.pe-x .i { font-size: 21px; } .pe-x:hover { background: #F4F6FA; color: var(--text); }
.pe-tabs { display: grid; grid-template-columns: 1fr 1fr; height: 44px; margin-top: 6px; border-bottom: 1px solid var(--border); }
.pe-tab { position: relative; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 500; color: var(--text); cursor: pointer; border-radius: 6px 6px 0 0; }
.pe-tab:hover { background: #F7F8FC; }
.pe-tab[aria-selected="true"] { color: var(--indigo); }
.pe-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--indigo); border-radius: 2px; }
.pe-tab[aria-disabled="true"] { color: #A3AAB8; cursor: not-allowed; } .pe-tab[aria-disabled="true"]:hover { background: none; }
.pe-tab:focus-visible, .pe-x:focus-visible, .pe-add:focus-visible, .pe-switch:focus-visible, .pe-chip:focus-visible, .pe-rx:focus-visible, .pe-pick:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.pe-panel { flex: 1; display: flex; flex-direction: column; padding-top: 22px; min-width: 0; }

/* the Copy tab: two columns `1fr 1px 350px`; the Image changes tab: the request column full width */
.pe-cols { display: grid; grid-template-columns: minmax(0, 1fr) 1px 350px; gap: 0 20px; min-width: 0; }
.pe-rule { background: var(--border); margin-bottom: 14px; }
.pe-text, .pe-img { min-width: 0; }
.pe-root[data-tab="image"] .pe-cols { grid-template-columns: minmax(0, 1fr); }
.pe-root[data-tab="image"] .pe-text, .pe-root[data-tab="image"] .pe-rule { display: none; }

.pe-f { display: flex; flex-direction: column; min-width: 0; margin-bottom: 10px; }
.pe-lbl { display: flex; align-items: center; gap: 4px; margin: 0 0 8px; font-size: 15px; font-weight: 700; line-height: 20px; color: var(--text); }
.pe-req { color: #E5484D; }
.pe-in { width: 100%; box-sizing: border-box; height: 36px; padding: 0 11px; border: 1px solid #D9DEE8; border-radius: 7px; background: var(--surface); font: inherit; font-size: 14px; color: var(--text); }
.pe-in::placeholder { color: #9AA1AF; }
.pe-in:hover { border-color: #BFC7D6; }
.pe-in:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.14); }
.pe-in[aria-invalid="true"] { border-color: var(--red); } .pe-in[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(240, 84, 106, 0.16); }
.pe-in:disabled { background: #F6F7FA; color: var(--muted); cursor: not-allowed; }
textarea.pe-in { height: 120px; min-height: 76px; max-height: 320px; padding: 8px 11px; line-height: 20px; resize: vertical; display: block; }
.pe-under { display: flex; align-items: flex-start; gap: 10px; min-height: 18px; margin-top: 6px; }
.pe-err { display: flex; align-items: center; gap: 6px; margin: 0; min-width: 0; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--red); }
.pe-err .i { font-size: 15px; flex: none; }
.pe-err[hidden] { display: none; }
.pe-count { margin-left: auto; flex: none; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pe-count.is-over { color: var(--red); font-weight: 600; }

/* the Image changes tab: the slide chips, the "Current slide" 100 px thumbnail beside the request */
.pe-chips-row { display: none; align-items: center; gap: 14px; margin-bottom: 16px; }
.pe-chips-row .pe-lbl { margin: 0; }
.pe-root[data-tab="image"][data-kind="carousel"] .pe-chips-row { display: flex; }
.pe-chips { display: flex; gap: 8px; }
.pe-chip { min-width: 40px; height: 34px; padding: 0 12px; border: 1px solid #D5DAE4; border-radius: 8px; background: var(--surface); font: inherit; font-size: 14.5px; font-weight: 600; color: var(--text-2); cursor: pointer; font-variant-numeric: tabular-nums; }
.pe-chip:hover { border-color: #C9D3FB; color: var(--indigo); }
.pe-chip[aria-checked="true"] { border-color: var(--indigo); background: var(--indigo-bg); color: var(--indigo); }
.pe-req-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 18px; }
.pe-curslide { display: none; flex-direction: column; }
.pe-root[data-tab="image"] .pe-req-grid { grid-template-columns: 100px minmax(0, 1fr); }
.pe-root[data-tab="image"] .pe-curslide { display: flex; }

/* the reference tiles: 100 × 100, radius 8, a 12 px caption under, × on the removable ones; "+ Add" beside the label */
.pe-refh { position: relative; display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; }
.pe-refh .pe-lbl { margin: 0; }
.pe-tip { position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--muted); border-radius: 50%; cursor: help; }
.pe-tip .i { font-size: 16px; }
.pe-tip::after { content: attr(data-tip); position: absolute; z-index: 20; left: -12px; bottom: calc(100% + 8px); width: max-content; max-width: 260px; padding: 7px 10px; border-radius: 7px; background: #1F2433; color: #fff; font-size: 13px; font-weight: 400; line-height: 1.35; white-space: normal; pointer-events: none; opacity: 0; transition: opacity 0.12s; }
.pe-tip:hover::after, .pe-tip:focus-visible::after { opacity: 1; }
.pe-tip:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.pe-add { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 8px; border: 1px solid #D5DAE4; border-radius: 7px; background: var(--surface); font: inherit; font-size: 13.5px; font-weight: 600; color: var(--indigo); cursor: pointer; }
.pe-add .i { font-size: 15px; }
.pe-add:hover:not(:disabled) { background: #F5F7FF; border-color: #C9D3FB; }
.pe-add:disabled { color: #A3AAB8; cursor: not-allowed; }
.pe-refs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, 100px); gap: 12px 14px; }
.pe-ref { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.pe-rimg { position: relative; display: block; width: 100px; height: 100px; border-radius: 8px; overflow: hidden; background: var(--surface); box-shadow: 0 0 0 1px var(--border); flex: none; }
.pe-rimg .cp-art { border-radius: 0; box-shadow: none; cursor: default; }
.pe-rimg .pv2-sl { box-shadow: none; }
.pe-rimg .pv2-b { display: none; }
.pe-logo { position: absolute; inset: 0; display: grid; place-items: center; background: var(--surface); }
.pe-logo span { width: 58%; height: 58%; border-radius: 12%; background: #2F5BFF; color: #fff; display: grid; place-items: center; font-size: 26px; font-weight: 800; letter-spacing: -0.5px; }
.pe-rname { max-width: 100%; font-size: 12px; line-height: 16px; color: var(--text-2); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-rx { position: absolute; top: 5px; right: 5px; z-index: 3; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: rgba(14, 27, 61, 0.74); color: #fff; display: grid; place-items: center; cursor: pointer; }
.pe-rx .i { font-size: 13px; stroke-width: 2.4; } .pe-rx:hover { background: #0E1B3D; }
.pe-ref.is-new .pe-rimg { animation: pe-pop 0.25s ease-out; }
@keyframes pe-pop { from { transform: scale(0.9); opacity: 0.4; } to { transform: none; opacity: 1; } }

/* the reference picker: a small popover of the pack drawings under "+ Add" */
.pe-picker { position: absolute; z-index: 40; right: 0; top: calc(100% + 6px); width: 344px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 12px 32px rgba(23, 27, 45, 0.16); }
.pe-picker[hidden] { display: none; }
.pe-pick-h { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--text); display: flex; justify-content: space-between; }
.pe-pick-h span { font-weight: 500; font-size: 13px; color: var(--muted); }
.pe-pick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; max-height: 250px; overflow-y: auto; padding: 2px; }
.pe-pick { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; border: 0; background: none; font: inherit; font-size: 11.5px; line-height: 14px; color: var(--text-2); cursor: pointer; min-width: 0; border-radius: 8px; }
.pe-pick .pe-rimg { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.pe-pick .pe-logo span { font-size: 18px; }
.pe-pick span.pe-pn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-pick:hover .pe-rimg { box-shadow: 0 0 0 2px #C9D3FB; }

/* the MM-44 strip (no image connection) and the running strip */
.pe-strip-msg { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 11px 14px; border-radius: 10px; background: #FDECEE; color: #9B1C31; font-size: 14px; line-height: 20px; }
.pe-strip-msg[hidden] { display: none; }
.pe-strip-msg > .i { font-size: 18px; flex: none; margin-top: 1px; color: var(--red); }
.pe-strip-msg p { margin: 0; }
.pe-strip-msg a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--indigo); text-decoration: none; white-space: nowrap; }
.pe-strip-msg a .i { font-size: 15px; } .pe-strip-msg a:hover { text-decoration: underline; }
.pe-strip-msg.is-running { background: var(--amber-bg); color: var(--amber-text); } .pe-strip-msg.is-running > .i { color: var(--amber); }
.pe-root.is-noconn .pe-req-grid, .pe-root.is-noconn .pe-refs-w, .pe-root.is-running .pe-refs-w { display: none; }

/* the exact-wording row: 72 px, the 44 px tile, the 52 × 28 switch */
.pe-exact { display: flex; align-items: center; gap: 14px; min-height: 72px; margin-top: 12px; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.pe-xtile { width: 44px; height: 44px; flex: none; border-radius: 10px; background: #F1F4FB; color: var(--indigo); display: grid; place-items: center; }
.pe-xtile .i { font-size: 22px; }
.pe-xt { flex: 1; min-width: 0; }
.pe-xh { display: flex; align-items: center; gap: 8px; }
.pe-xh b { font-size: 15px; font-weight: 700; color: var(--text); }
.pe-xt p { margin: 3px 0 0; font-size: 13.5px; line-height: 18px; color: var(--text-2); }
.pe-switch { position: relative; width: 52px; height: 28px; flex: none; padding: 0; border: 0; border-radius: 14px; background: #D5DAE4; cursor: pointer; transition: background 0.15s; }
.pe-switch span { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(14, 27, 61, 0.25); transition: transform 0.15s; }
.pe-switch[aria-checked="true"] { background: #1D4FF2; }
.pe-switch[aria-checked="true"] span { transform: translateX(24px); }

/* the footer: 60 px, Cancel (outline 44 px) and the primary (44 px); the attention summary at the left */
.pe-foot { display: flex; align-items: center; justify-content: flex-end; gap: 14px; min-height: 60px; padding: 14px 0 16px; }
.pe-sum { margin: 0 auto 0 0; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--red); }
.pe-sum .i { font-size: 17px; flex: none; }
.pe-sum[hidden] { display: none; }
.pe-cancel { height: 44px; padding: 0 22px; font-size: 15px; font-weight: 500; border-radius: 8px; }
.pe-review { height: 44px; padding: 0 20px; gap: 10px; white-space: nowrap; font-size: 15px; font-weight: 500; border-radius: 8px; background: #1D4FF2; box-shadow: none; }
.pe-review .i { font-size: 18px; }
.pe-review:hover:not(:disabled) { background: #1843D6; }
.pe-review:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---- the review dialog */
.pe-backdrop { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px; background: rgba(15, 20, 35, 0.46); }
.pe-dlg { width: 640px; max-width: 100%; max-height: calc(100vh - 32px); box-sizing: border-box; display: flex; flex-direction: column; border-radius: 14px; background: var(--surface); box-shadow: 0 24px 60px rgba(14, 27, 61, 0.28); outline: none; }
.pe-dlg-h { display: flex; align-items: center; gap: 12px; padding: 18px 18px 12px 22px; }
.pe-dlg-h h2 { flex: 1; margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.3px; }
.pe-dlg-b { overflow-y: auto; padding: 2px 22px 12px; display: flex; flex-direction: column; gap: 14px; }
.pe-rb { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; min-width: 0; }
.pe-rb h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15.5px; font-weight: 700; color: var(--text); }
.pe-rb h3 .pe-tile { width: 30px; height: 30px; } .pe-rb h3 .pe-tile .i { font-size: 16px; }
.pe-rb-sub { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); }
.pe-diff { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: #F7F8FB; font-size: 14px; line-height: 21px; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; max-height: 180px; overflow-y: auto; }
.pe-diff del { background: #FDE3E7; color: #9B1C31; text-decoration: line-through; border-radius: 3px; padding: 0 2px; }
.pe-diff ins { background: #DDF4E8; color: #0B6B43; text-decoration: none; border-radius: 3px; padding: 0 2px; }
.pe-kv { margin: 10px 0 0; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 12px; font-size: 14px; }
.pe-kv dt { color: var(--muted); } .pe-kv dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.pe-kv s { color: var(--muted); }
.pe-rb-img { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 12px; }
.pe-rb-img .pe-rimg { width: 72px; height: 72px; }
.pe-quote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--indigo); border-radius: 0 8px 8px 0; background: #F5F7FF; font-size: 14px; line-height: 20px; color: var(--text); overflow-wrap: anywhere; }
.pe-mini { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 14px; }
.pe-mini li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.pe-mini .pe-rimg { width: 36px; height: 36px; border-radius: 6px; }
.pe-mini .pe-logo span { font-size: 11px; }
.pe-cost { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--border); font-size: 14px; color: var(--text-2); }
.pe-cost b { font-size: 16px; color: var(--text); }
.pe-vnote { margin: 6px 0 0; font-size: 13px; line-height: 18px; color: var(--muted); }
.pe-dlg-f { display: flex; justify-content: flex-end; gap: 12px; padding: 14px 22px 18px; border-top: 1px solid var(--border); }
.pe-dlg-f button { height: 42px; padding: 0 20px; font-size: 15px; font-weight: 500; border-radius: 8px; }
.pe-dlg-f .btn-primary { background: #1D4FF2; box-shadow: none; gap: 10px; }
.pe-dlg-f .btn-primary:disabled { opacity: 0.7; cursor: default; }

@media (prefers-reduced-motion: reduce) { .pe-stage.is-swap .pv2-frame, .pe-ref.is-new .pe-rimg { animation: none; } .pe-switch, .pe-switch span { transition: none; } }

@media (max-width: 1400px) {
  .pe-grid { grid-template-columns: minmax(0, 1fr) 700px; }
  .pe-cols { grid-template-columns: minmax(0, 1fr) 1px 300px; }
  .pe-refs { grid-template-columns: repeat(auto-fill, 88px); } .pe-refs .pe-rimg { width: 88px; height: 88px; }
}
@media (max-width: 1100px) {
  .pe-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .pe-subnav.ct-subnav { overflow-x: auto; height: 48px; margin-bottom: 12px; } .pe-subnav .ct-subitem { padding: 0 12px; }
  .pe-grid { gap: 12px; }
  .pe-cur { padding: 12px 10px 12px; }
  .pe-ch { padding: 0 2px; }
  .pe-stage { max-width: none; }
  .pe-strip-nav.pd-strip { gap: 8px; width: 100%; justify-content: center; }
  .pe-root .pd-th { width: 64px; height: 64px; }
  .pe-root .pd-thumbs { max-width: calc(100% - 104px); }
  .pe-root .pd-arrow { width: 44px; height: 44px; }
  .pe-edit { padding: 4px 12px 0; }
  .pe-eh h2 { font-size: 20px; }
  .pe-x { width: 44px; height: 44px; }
  .pe-cols { grid-template-columns: minmax(0, 1fr); }
  .pe-rule { height: 1px; margin: 4px 0 16px; }
  .pe-in { height: 44px; }
  .pe-refs { grid-template-columns: repeat(auto-fill, 88px); }
  .pe-root[data-tab="image"] .pe-req-grid { grid-template-columns: minmax(0, 1fr); }
  .pe-root[data-tab="image"] .pe-curslide { flex-direction: row; align-items: center; gap: 12px; margin-bottom: 12px; }
  .pe-root[data-tab="image"] .pe-curslide .pe-lbl { margin: 0; order: 2; }
  .pe-chip { min-width: 44px; height: 44px; }
  .pe-add { height: 40px; }
  .pe-picker { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; }
  .pe-tip::after { left: auto; right: -40px; max-width: 220px; }
  .pe-foot { flex-wrap: wrap; }
  .pe-sum { flex-basis: 100%; }
  .pe-cancel, .pe-review { flex: 1; height: 48px; justify-content: center; padding: 0 12px; }
  .pe-dlg { border-radius: 14px 14px 0 0; align-self: end; max-height: 90vh; }
  .pe-backdrop { padding: 0; }
  .pe-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; } .pe-kv dd { margin-bottom: 6px; }
  .pe-dlg-f button { flex: 1; height: 48px; }
}

/* ---------- Content-41 · Platform preview (pp-) — the platform preview page, plan plans/Content-41.md; the mock chrome is Content-30's shared pw-mock, the slides Content-36's pv2 composition ---------- */
.pp-root { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-mid: #193F94; --cg-tint: #F1F5F9; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter"; }

/* the head: the eyebrow 13 px caps, the title 34 px / 800, the lead 18 px */
.pp-head { padding: 0 0 16px 8px; }
.pp-head .eyebrow { font-size: 13.5px; letter-spacing: 0.6px; margin-bottom: 8px; }
.pp-head h1 { font-size: 34px; letter-spacing: -0.6px; }
.pp-head .sub { font-size: 18px; margin-top: 4px; }

/* three cards `460px 1fr 400px`, 14 px gap, 548 px tall */
.pp-grid { display: grid; grid-template-columns: 460px minmax(0, 1fr) 400px; gap: 14px; align-items: stretch; }
.pp-grid > .card { min-height: 548px; box-sizing: border-box; min-width: 0; }

/* ---- platforms + slides */
.pp-side { padding: 16px 16px 18px; }
.pp-tabs { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; }
.pp-tab { flex: 1; min-width: 0; height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 8px; border: 1px solid transparent; border-radius: 8px; background: none; font: inherit; font-size: 15px; font-weight: 500; color: var(--text); cursor: pointer; white-space: nowrap; }
.pp-tab:hover { background: #F6F7FB; }
.pp-tab[aria-selected="true"] { border-color: var(--indigo); color: var(--indigo); background: var(--surface); box-shadow: 0 1px 3px rgba(59, 91, 253, 0.12); }
.pp-tab:focus-visible, .pp-rsel:focus-visible, .pp-mv button:focus-visible, .pp-cbtn:focus-visible, .pp-switch:focus-visible, .pp-nav:focus-visible, .pp-more:focus-visible, .pp-mock-w:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.pp-pf { width: 24px; height: 24px; flex: none; display: block; }
.pp-tabs.is-4 .pp-tab { gap: 7px; font-size: 14px; padding: 0 4px; } .pp-tabs.is-4 .pp-pf { width: 20px; height: 20px; }
.pp-lh { margin: 26px 0 12px 2px; font-size: 18px; font-weight: 800; letter-spacing: -0.2px; }
.pp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pp-row { position: relative; display: flex; align-items: center; height: 110px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); transition: box-shadow 0.12s, background 0.12s; }
.pp-row:hover { border-color: #D2D8E6; }
.pp-row.is-sel { background: #EEF2FF; border-color: var(--indigo); }
.pp-rsel { flex: 1; min-width: 0; align-self: stretch; display: flex; align-items: center; gap: 16px; padding: 0 8px 0 14px; border: 0; background: none; border-radius: 10px; font: inherit; text-align: left; color: var(--text); cursor: pointer; }
.pp-th { position: relative; width: 100px; height: 92px; flex: none; border-radius: 6px; overflow: hidden; background: #0A1433; }
.pp-th .pv2-sl { box-shadow: none; } .pp-th .pv2-b { display: none; }
.pp-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pp-rt b { font-size: 16px; font-weight: 700; line-height: 21px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-rt span { font-size: 14px; color: var(--muted); }
.pp-mv { position: absolute; right: 34px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; padding: 4px; border-radius: 9px; background: inherit; opacity: 0; pointer-events: none; transition: opacity 0.12s; }
.pp-row.is-sel .pp-mv { background: #EEF2FF; }
.pp-row:hover .pp-mv, .pp-row:focus-within .pp-mv { opacity: 1; pointer-events: auto; }
.pp-mv button { width: 30px; height: 30px; padding: 0; border: 1px solid #D5DAE4; border-radius: 7px; background: var(--surface); color: var(--text-2); display: grid; place-items: center; cursor: pointer; }
.pp-mv button .i { font-size: 15px; } .pp-mv button:hover:not(:disabled) { color: var(--indigo); border-color: #C9D3FB; }
.pp-mv button:disabled { opacity: 0.4; cursor: default; }
.pp-grip { width: 30px; align-self: stretch; flex: none; display: grid; place-items: center; color: #A3AAB8; cursor: grab; border-radius: 0 10px 10px 0; }
.pp-grip .i { font-size: 18px; }
.pp-row:hover .pp-grip { color: var(--text-2); }
.pp-row.is-drag { opacity: 0.45; }
.pp-row.is-over-before { box-shadow: 0 -3px 0 0 var(--indigo); } .pp-row.is-over-after { box-shadow: 0 3px 0 0 var(--indigo); }
.pp-row.is-moved { animation: pp-flash 0.6s ease-out; }
@keyframes pp-flash { from { background: #DCE4FF; } }
.pp-root.is-readonly .pp-mv, .pp-root.is-readonly .pp-grip, .pp-root.is-readonly .pp-good { display: none; }

/* ---- the mock: Content-30's pw-mock chrome, the media edge to edge at the chosen crop */
.pp-stagecard { padding: 14px 16px; display: flex; justify-content: center; align-items: flex-start; }
.pp-mock-w { width: 100%; display: flex; justify-content: center; border-radius: 12px; }
.pp-mock.pw-mock { width: auto; max-width: 100%; padding: 0; overflow: hidden; box-sizing: border-box; }
.pp-mock .pw-mock-head { height: 60px; padding: 0 14px 0 16px; gap: 12px; }
.pp-mock .pw-av { width: 38px; height: 38px; font-size: 15px; background: #1D4FF2; }
.pp-mock .pw-who b { font-size: 15px; } .pp-mock .pw-who span { font-size: 12.5px; }
.pp-mock .pw-who > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-mock .pw-who .pp-when { display: inline-flex; align-items: center; gap: 4px; }
.pp-mock .pw-who .pp-when .i { font-size: 12px; }
.pp-mock .pw-more { padding-right: 0; }
.pp-mock[data-platform="x"] .pw-who { flex-direction: row; align-items: baseline; gap: 6px; }
.pp-media { position: relative; overflow: hidden; background: #0A1433; margin: 0 auto; }
.pp-mock[data-platform="x"] .pp-media { border-radius: 14px; margin: 0 14px; }
.pp-media .pv2-sl { box-shadow: none; }
.pp-media.is-wide .pv2-sl, .pp-th.is-wide .pv2-sl { top: 50%; left: 0; width: 100%; height: auto; transform: translateY(-50%); }
.pp-media.is-swap .pv2-sl { animation: pd-fade 0.22s ease-out; }
.pp-safe { position: absolute; z-index: 4; border: 1px dashed rgba(255, 255, 255, 0.6); border-radius: 2px; pointer-events: none; }
.pp-safe[hidden] { display: none; }
.pp-nav { position: absolute; top: 50%; z-index: 5; width: 30px; height: 30px; margin-top: -15px; padding: 0; border: 0; border-radius: 50%; background: rgba(10, 14, 28, 0.82); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); }
.pp-nav .i { font-size: 17px; stroke-width: 2.4; }
.pp-nav.prev { left: 10px; } .pp-nav.next { right: 10px; }
.pp-mock .pw-count { z-index: 5; }
.pp-mock .pw-acts { position: relative; height: 50px; padding: 0 16px; }
.pp-mock[data-platform="linkedin"] .pw-acts, .pp-mock[data-platform="facebook"] .pw-acts { margin: 8px 14px 0; padding: 0; }
.pp-mock[data-platform="x"] .pw-acts { padding: 0 26px; }
.pp-dots { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 5px; margin-top: -6px; }
.pp-dots i { width: 6px; height: 6px; border-radius: 50%; background: #C9CED8; }
.pp-dots i.is-on { background: #1D4FF2; }
.pp-cap.pw-cap { margin: 0; padding: 0 16px 14px; font-size: 14.5px; line-height: 21px; white-space: pre-line; overflow-wrap: anywhere; }
.pp-mock[data-platform="linkedin"] .pp-cap, .pp-mock[data-platform="facebook"] .pp-cap, .pp-mock[data-platform="x"] .pp-cap { padding: 0 16px 12px; }
.pp-cap b.pp-hn { display: inline; font-weight: 700; }
.pp-cap .tags { color: #2F5BFF; }
.pp-more { padding: 0; border: 0; background: none; font: inherit; color: var(--muted); cursor: pointer; }
.pp-more:hover { color: var(--text); text-decoration: underline; }
.pp-over { background: #FDE3E7; color: #B3243A; border-radius: 3px; }

/* ---- the settings: the 20 px eye + title, the 44 px select, the 52 × 28 switch, the 44 px carousel buttons */
.pp-set { padding: 18px 20px 20px; }
.pp-set h2 { display: flex; align-items: center; gap: 14px; margin: 2px 0 22px; font-size: 20px; font-weight: 800; letter-spacing: -0.3px; }
.pp-set h2 .i { font-size: 26px; color: var(--indigo); }
.pp-sec { padding: 0 0 20px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.pp-sec:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.pp-lbl { display: block; margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--text); }
.pp-sel { position: relative; display: block; }
.pp-sel select { width: 100%; height: 44px; box-sizing: border-box; padding: 0 40px 0 13px; border: 1px solid #D9DEE8; border-radius: 8px; background: var(--surface); font: inherit; font-size: 15px; color: var(--text); appearance: none; -webkit-appearance: none; cursor: pointer; }
.pp-sel select:hover { border-color: #BFC7D6; }
.pp-sel select:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.14); }
.pp-sel > .i { position: absolute; right: 14px; top: 50%; margin-top: -9px; font-size: 18px; color: var(--text-2); pointer-events: none; }
.pp-hint { margin: 8px 0 0; font-size: 13.5px; line-height: 19px; color: var(--muted); }
.pp-swrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pp-swrow .pp-lbl { margin: 0; }
.pp-switch { position: relative; width: 52px; height: 28px; flex: none; padding: 0; border: 0; border-radius: 14px; background: #D5DAE4; cursor: pointer; transition: background 0.15s; }
.pp-switch span { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(14, 27, 61, 0.25); transition: transform 0.15s; }
.pp-switch[aria-checked="true"] { background: #1D4FF2; } .pp-switch[aria-checked="true"] span { transform: translateX(24px); }
.pp-car { display: flex; align-items: center; justify-content: center; gap: 36px; margin-top: 18px; }
.pp-cbtn { width: 44px; height: 44px; padding: 0; border: 1px solid #D5DAE4; border-radius: 8px; background: var(--surface); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.pp-cbtn .i { font-size: 19px; } .pp-cbtn:hover:not(:disabled) { color: var(--indigo); border-color: #C9D3FB; }
.pp-cbtn:disabled { opacity: 0.4; cursor: default; }
.pp-cnt { min-width: 52px; text-align: center; font-size: 16px; color: var(--text); font-variant-numeric: tabular-nums; }
.pp-note { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; font-size: 13.5px; line-height: 19px; }
.pp-note[hidden] { display: none; }
.pp-note .i { font-size: 16px; flex: none; margin-top: 1px; }
.pp-note.is-warn { background: var(--amber-bg); color: var(--amber-text); } .pp-note.is-warn .i { color: var(--amber); }
.pp-note.is-error { background: #FDECEE; color: #9B1C31; } .pp-note.is-error .i { color: var(--red); }
.pp-root[data-kind="image"] #pp-car-sec .pp-lbl, .pp-root[data-kind="image"] .pp-car { display: none; }

/* ---- the footer: 52 px buttons */
.pp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.pp-back { height: 52px; padding: 0 22px 0 18px; gap: 12px; font-size: 16px; font-weight: 500; border-radius: 8px; text-decoration: none; display: inline-flex; align-items: center; }
.pp-back .i { font-size: 19px; }
.pp-good { height: 52px; padding: 0 22px; gap: 12px; font-size: 16px; font-weight: 500; border-radius: 8px; background: #1D4FF2; box-shadow: none; }
.pp-good .i { font-size: 19px; } .pp-good:hover:not(:disabled) { background: #1843D6; }
.pp-good[aria-busy="true"] { opacity: 0.8; }

@media (prefers-reduced-motion: reduce) { .pp-media.is-swap .pv2-sl, .pp-row.is-moved { animation: none; } .pp-switch, .pp-switch span { transition: none; } }

@media (max-width: 1500px) {
  .pp-grid { grid-template-columns: 400px minmax(0, 1fr) 340px; }
}
@media (max-width: 1250px) {
  .pp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pp-set { grid-column: 1 / -1; }
  .pp-grid > .pp-set { min-height: 0; }
}
@media (max-width: 900px) {
  .pp-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pp-grid > .card { min-height: 0; }
}
@media (max-width: 768px) {
  .pp-head { padding: 0 0 12px; } .pp-head h1 { font-size: 28px; } .pp-head .sub { font-size: 16px; }
  .pp-side { padding: 12px; }
  .pp-tab { gap: 6px; font-size: 14px; padding: 0 4px; } .pp-pf { width: 20px; height: 20px; }
  .pp-row { height: 96px; }
  .pp-rsel { gap: 12px; padding-left: 10px; }
  .pp-th { width: 84px; height: 76px; }
  .pp-rt b { font-size: 15px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .pp-mv { position: static; transform: none; opacity: 1; pointer-events: auto; background: none; padding: 0 4px 0 0; }
  .pp-mv button { width: 36px; height: 36px; }
  .pp-grip { display: none; }
  .pp-stagecard { padding: 10px; }
  .pp-set { padding: 14px 14px 16px; }
  .pp-foot { flex-direction: column-reverse; align-items: stretch; }
  .pp-back, .pp-good { justify-content: center; }
}
@media (max-width: 430px) {
  .pp-tab { flex-direction: column; gap: 2px; height: 52px; font-size: 12.5px; }
  .pp-tabs.is-4 .pp-tab { font-size: 12px; }
}

/* ---------- Content-42 / 43 · Connect video generation + Video connection ready (vc-) — Content module, plan plans/Content-42.md; the video twins of Content-07 / 08 (cx-) ---------- */
.vc-root { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-mid: #193F94; --cg-tint: #F1F5F9; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter"; }
.vc-head { padding-bottom: 14px; }
.vc-note { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: #F5F6FA; color: var(--text-2); font-size: 14.5px; } .vc-note .i { font-size: 18px; color: var(--muted); flex: none; }
.vc-grid { display: grid; gap: 18px; align-items: start; }
.vc-grid-42 { grid-template-columns: minmax(0, 1fr) 504px; }
.vc-grid-43 { grid-template-columns: minmax(0, 1fr) 526px; gap: 16px; }
/* the Google glyph (our own four-colour drawing) */
.vc-g { width: 48px; height: 48px; display: grid; place-items: center; flex: none; } .vc-g .i { font-size: 44px; }
.vc-g.lg { width: 64px; height: 64px; } .vc-g.lg .i { font-size: 62px; }
/* 42 · the form card */
.vc-form { padding: 22px 20px 20px; }
.vc-prov { display: flex; align-items: center; gap: 22px; margin: 0 0 22px 2px; }
.vc-prov h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.3px; line-height: 29px; }
.vc-prov p { margin: 2px 0 0; font-size: 17px; color: var(--text-2); line-height: 1.35; }
.vc-fields { border: 0; margin: 0; padding: 0; min-width: 0; }
.vc-f { margin-bottom: 16px; }
.vc-lbl { display: block; font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 7px; line-height: 19px; }
.vc-req { color: #D63A4E; margin-left: 3px; }
.vc-in { width: 100%; height: 40px; padding: 0 12px; border: 1px solid #D9DDE6; border-radius: 6px; background: #fff; font: inherit; font-size: 15.5px; color: var(--text); outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.vc-in:focus { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.vc-in::placeholder { color: #A3A8B6; }
.vc-sel { position: relative; display: block; }
.vc-sel select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.vc-sel .i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--text-2); pointer-events: none; }
.vc-key { display: flex; align-items: stretch; border: 1px solid #D9DDE6; border-radius: 6px; background: #fff; transition: border-color 0.15s, box-shadow 0.15s; }
.vc-key:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.vc-key .vc-in { border: 0; box-shadow: none; flex: 1; min-width: 0; height: 38px; }
.vc-key .vc-in[type="password"] { letter-spacing: 0.6px; font-size: 16px; }
.vc-key .vc-in[type="password"]::placeholder { letter-spacing: 0.2px; font-size: 15.5px; }
.vc-key .vc-eye { width: 46px; height: auto; margin: 0; border-left: 1px solid #D9DDE6; border-radius: 0 6px 6px 0; }
.vc-eye { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); flex: none; background: none; border: 0; cursor: pointer; } .vc-eye .i { font-size: 20px; }
.vc-eye:hover:not(:disabled) { background: #F3F4F8; color: var(--indigo); } .vc-eye:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; } .vc-eye:disabled { color: #C3C7D2; cursor: default; }
.vc-hint { margin: 7px 0 0; font-size: 13px; color: var(--muted); line-height: 1.35; }
.vc-err { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 13.5px; color: #D63A4E; line-height: 1.35; } .vc-err .i { font-size: 15px; flex: none; }
.vc-f.is-invalid .vc-in, .vc-f.is-invalid .vc-key { border-color: #D63A4E; box-shadow: 0 0 0 3px #FDECEF; }
.vc-f.is-invalid .vc-key .vc-in { box-shadow: none; }
.vc-f.is-invalid .vc-hint { display: none; }
.vc-fields:disabled .vc-in, .vc-fields:disabled .vc-key { background: #F7F8FA; color: var(--text-2); }
.vc-foot { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--border); margin-top: 24px; padding-top: 15px; }
.vc-foot .btn-outline, .vc-foot .btn-primary { height: 44px; padding: 0 20px; font-size: 16px; box-shadow: none; }
.vc-foot .btn-outline .i, .vc-foot .btn-primary .i { font-size: 19px; }
.vc-foot .btn-primary { margin-left: auto; gap: 10px; }
.vc-foot .btn-primary[aria-disabled="true"], .vc-foot .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.vc-foot .btn-primary.is-pending { opacity: 0.85; cursor: progress; }
.vc-sum { margin: 0 0 0 auto; font-size: 14px; color: #D63A4E; font-weight: 500; }
.vc-sum:not([hidden]) + .btn-primary { margin-left: 0; }
.vc-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; animation: vc-spin 0.8s linear infinite; flex: none; }
.vc-spin.dark { border-color: rgba(59, 91, 253, 0.25); border-top-color: var(--indigo); width: 22px; height: 22px; border-width: 2.5px; }
@keyframes vc-spin { to { transform: rotate(360deg); } }
/* 42 · the side card */
.vc-side { padding: 22px 20px 20px; }
.vc-st { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.2px; line-height: 25px; }
.vc-sl { margin: 5px 0 0; font-size: 15.5px; color: var(--text-2); }
.vc-can { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 24px; }
.vc-can li { display: flex; align-items: flex-start; gap: 24px; }
.vc-can-ic { width: 72px; height: 72px; border-radius: 12px; background: #F1F4FA; color: var(--indigo); display: grid; place-items: center; flex: none; } .vc-can-ic .i { font-size: 31px; stroke-width: 1.6; }
.vc-can b { display: block; font-size: 17px; font-weight: 600; line-height: 22px; margin-top: 4px; }
.vc-can p { margin: 4px 0 0; font-size: 15px; color: var(--text-2); line-height: 1.42; }
.vc-rule { height: 1px; background: var(--border); margin: 24px 0 20px; }
.vc-result { display: flex; align-items: center; gap: 16px; margin-top: 16px; min-height: 94px; padding: 16px 12px 16px 18px; border: 1px solid var(--border); border-radius: 10px; }
.vc-res-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #EEF0F4; color: var(--muted); } .vc-res-ic .i { font-size: 20px; stroke-width: 2.8; }
.vc-result.is-ok .vc-res-ic { background: var(--green); color: #fff; }
.vc-result.is-fail .vc-res-ic { background: #E5484D; color: #fff; }
.vc-result.is-testing .vc-res-ic { background: var(--indigo-bg); }
.vc-res-t { flex: 1; min-width: 0; }
.vc-res-t b { display: block; font-size: 16.5px; font-weight: 700; line-height: 21px; color: var(--text-2); }
.vc-result.is-ok .vc-res-t b { color: var(--green-text); } .vc-result.is-fail .vc-res-t b { color: #B42336; } .vc-result.is-testing .vc-res-t b { color: var(--indigo); }
.vc-res-t p { margin: 4px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; max-width: 290px; }
.vc-result.is-fail .vc-res-t p { color: #B42336; }
.vc-again { height: 36px !important; padding: 0 13px !important; font-size: 14.5px !important; flex: none; box-shadow: none; }
.vc-again[hidden] { display: none; }
/* 43 · the verified card */
.vc-ver { padding: 20px 22px 16px 20px; }
.vc-ver-top { display: flex; align-items: center; gap: 20px; margin-left: 2px; }
.vc-disc { width: 52px; height: 52px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 0 0 4px #E3F6EE; } .vc-disc .i { font-size: 28px; stroke-width: 2.8; }
.vc-ver-top h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.4px; line-height: 31px; }
.vc-ver-top p { margin: 2px 0 0; font-size: 17px; color: var(--text-2); }
.vc-facts { display: grid; grid-template-columns: 1.15fr 1fr 1fr; margin: 22px 0 14px 2px; border: 1px solid var(--border); border-radius: 10px; min-height: 120px; }
.vc-fact { display: flex; align-items: flex-start; gap: 30px; padding: 20px 20px 16px; min-width: 0; }
.vc-fact + .vc-fact { border-left: 1px solid var(--border); margin: 12px 0; padding-top: 8px; padding-bottom: 4px; }
.vc-fact-p { padding-left: 20px; align-items: center; }
.vc-fact .k { display: block; font-size: 14px; color: var(--muted); line-height: 18px; }
.vc-fact b { display: block; font-size: 17px; font-weight: 700; line-height: 22px; margin-top: 6px; }
.vc-fact .s { display: block; font-size: 14px; color: var(--muted); line-height: 1.3; margin-top: 5px; }
.vc-fk { width: 100%; }
.vc-kv { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.vc-kv .v { flex: 1; min-width: 0; font-size: 17px; letter-spacing: 3px; white-space: nowrap; overflow: hidden; color: var(--text); font-variant-numeric: tabular-nums; }
.vc-kv .v.is-shown { letter-spacing: 1.5px; }
.vc-checks { list-style: none; margin: 0 0 12px 2px; padding: 0; }
.vc-check { display: grid; grid-template-columns: 36px 300px minmax(0, 1fr); align-items: center; min-height: 45px; padding: 0 8px; border-bottom: 1px solid var(--border-soft); }
.vc-check:last-child { border-bottom: 0; }
.vc-check .d { font-size: 26px; color: var(--green); display: grid; } .vc-check.is-fail .d { color: #E5484D; } .vc-check.is-skip .d { color: #C3C7D2; }
.vc-check b { font-size: 16px; font-weight: 600; padding-left: 8px; }
.vc-check .tx { font-size: 14.5px; color: var(--text-2); }
.vc-caps { display: flex; gap: 20px; margin: 0 0 14px 2px; padding: 12px 18px 16px; border: 1px solid var(--border); border-radius: 10px; background: #F6F8FC; }
.vc-caps-ic { width: 44px; height: 44px; border-radius: 50%; background: #E9EEFA; color: var(--indigo); display: grid; place-items: center; flex: none; } .vc-caps-ic .i { font-size: 22px; }
.vc-caps-b { flex: 1; min-width: 0; }
.vc-caps h3 { margin: 4px 0 8px; font-size: 15px; font-weight: 700; }
.vc-caps-g { display: grid; grid-template-columns: 1fr 1fr; }
.vc-cap { display: flex; align-items: center; gap: 18px; padding: 2px 0 0; min-width: 0; }
.vc-cap + .vc-cap { border-left: 1px solid var(--border); padding-left: 48px; }
.vc-cap .c { width: 48px; height: 48px; border-radius: 50%; background: #E9EEFA; color: var(--indigo); display: grid; place-items: center; flex: none; } .vc-cap .c .i { font-size: 23px; }
.vc-cap .k { display: block; font-size: 13px; color: var(--muted); }
.vc-cap b { display: block; font-size: 16px; font-weight: 700; margin-top: 3px; }
.vc-cap .s { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.vc-foot-43 { border-top: 0; margin-top: 0; padding-top: 0; }
.vc-foot-43 .btn-outline, .vc-foot-43 .btn-primary { height: 42px; }
.vc-foot-43 .btn-primary { padding: 0 18px; }
/* 43 · the brand card */
.vc-brandcard { padding: 18px 18px 18px 20px; }
.vc-bh { display: flex; align-items: center; gap: 16px; margin: 0; font-size: 17px; font-weight: 700; } .vc-bh .i { font-size: 26px; color: var(--indigo); }
.vc-brand { display: flex; gap: 22px; margin-top: 22px; }
.vc-mono { width: 68px; height: 68px; border-radius: 8px; background: #2F5BFF; color: #fff; font-size: 28px; font-weight: 800; letter-spacing: -0.5px; display: grid; place-items: center; flex: none; }
.vc-bt { min-width: 0; }
.vc-bn { margin: 2px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -0.3px; line-height: 27px; }
.vc-bd { margin: 6px 0 0; font-size: 16px; color: var(--text-2); line-height: 1.45; }
.vc-web { display: inline-flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 16px; color: var(--indigo); font-weight: 500; } .vc-web .i { font-size: 22px; } .vc-web:hover { text-decoration: underline; }
.vc-brandcard .vc-rule { margin: 20px 0 14px; }
.vc-vh { margin: 0 0 9px; font-size: 14.5px; font-weight: 600; }
.vc-visuals { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vc-vis { position: relative; border-radius: 8px; overflow: hidden; color: #fff; }
.vc-vis .cp-art { cursor: default; }
.vc-vis.wide { grid-column: 1 / -1; aspect-ratio: 3 / 1; }
.vc-vis.sq { aspect-ratio: 1.54 / 1; }
.vc-vis-h { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); z-index: 2; font-size: 20px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.12; text-shadow: 0 1px 8px rgba(10, 20, 51, 0.35); }
.vc-vis.wide .vc-vis-h { font-size: 40px; font-weight: 800; letter-spacing: -1px; left: 34px; }
.vc-vis.wide .vc-vis-h small { display: block; font-size: 15.5px; font-weight: 500; letter-spacing: 0; margin-top: 8px; }
.vc-vis.sq .vc-vis-h { top: 22px; transform: none; left: 22px; font-size: 16px; }
.vc-vis.wide::after, .vc-vis.sq::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10, 20, 51, 0.45) 0%, rgba(10, 20, 51, 0) 65%); pointer-events: none; }
/* responsive (plan §2) */
@media (max-width: 1200px) { .vc-grid-42, .vc-grid-43 { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
  .vc-prov { gap: 14px; } .vc-prov p { font-size: 15px; }
  .vc-in { height: 44px; font-size: 16px; } .vc-key .vc-in { height: 42px; }
  .vc-foot { flex-wrap: wrap; } .vc-foot .btn-primary, .vc-foot .btn-outline { flex: 1 1 100%; justify-content: center; height: 48px; margin-left: 0; }
  .vc-sum { flex: 1 1 100%; margin: 0; order: -1; }
  .vc-can li { gap: 14px; } .vc-can-ic { width: 52px; height: 52px; } .vc-can-ic .i { font-size: 24px; }
  .vc-result { flex-wrap: wrap; } .vc-again { margin-left: 52px; height: 44px !important; }
  .vc-ver-top { align-items: flex-start; } .vc-ver-top h2 { font-size: 22px; line-height: 27px; }
  .vc-facts { grid-template-columns: 1fr; }
  .vc-fact + .vc-fact { border-left: 0; border-top: 1px solid var(--border); margin: 0 16px; padding: 14px 4px; }
  .vc-fact-p { gap: 18px; }
  .vc-check { grid-template-columns: 34px minmax(0, 1fr); padding: 8px 4px; } .vc-check .tx { grid-column: 2; padding-left: 8px; font-size: 14px; }
  .vc-caps { flex-direction: column; gap: 10px; } .vc-caps-g { grid-template-columns: 1fr; row-gap: 12px; } .vc-cap + .vc-cap { border-left: 0; padding-left: 0; }
  .vc-eye { width: 44px; height: 44px; }
  .vc-brand { gap: 14px; } .vc-mono { width: 56px; height: 56px; font-size: 22px; }
  .vc-vis.wide .vc-vis-h { font-size: 28px; left: 18px; } .vc-vis.wide .vc-vis-h small { font-size: 13px; }
  .vc-vis.sq .vc-vis-h { font-size: 13px; left: 12px; top: 12px; }
}

/* ---------- Content-44 · Video brief (vb-) — Content module, plan plans/Content-44.md; the steps reuse Content-30's pw-step, the frames Content-34's pi-cover ---------- */
.vb-root { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-mid: #193F94; --cg-tint: #F1F5F9; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter"; --pi-em: #8FB4FF; }
.vb-head { padding-bottom: 12px; }
.vb-subnav { margin-bottom: 16px; }
.vb-grid { display: grid; grid-template-columns: minmax(0, 1fr) 504px; gap: 18px; align-items: start; }
/* the brief card */
.vb-card { padding: 14px 20px 14px; }
.vb-steps { height: 56px; display: flex; align-items: center; }
.vb-steps ol { list-style: none; margin: 0 auto; padding: 0; width: 100%; max-width: 596px; display: flex; align-items: center; }
.vb-steps .pw-disc { width: 36px; height: 36px; font-size: 15.5px; }
.vb-steps .pw-sl { margin-left: 16px; font-size: 16px; font-weight: 500; white-space: nowrap; }
.vb-steps .pw-step.is-active .pw-sl { font-weight: 600; }
.vb-steps .pw-step:not(:last-child)::after { margin: 0 16px; }
.vb-ch { display: flex; align-items: center; gap: 16px; margin: 12px 0 0; }
.vb-tile { width: 34px; height: 34px; border-radius: 8px; background: #F1F4FA; color: var(--indigo); display: grid; place-items: center; flex: none; } .vb-tile .i { font-size: 19px; }
.vb-ch h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.3px; line-height: 27px; }
.vb-lead { margin: 12px 0 0; font-size: 15px; color: var(--text-2); line-height: 1.4; }
.vb-cols { display: grid; grid-template-columns: minmax(0, 1fr) 322px; gap: 24px; margin-top: 18px; }
.vb-col { min-width: 0; }
.vb-f { margin-bottom: 0; position: relative; }
.vb-f.is-invalid { margin-bottom: 6px; }
.vb-lbl { display: block; font-size: 15px; font-weight: 600; margin-bottom: 5px; line-height: 19px; }
.vb-req { color: #D63A4E; margin-left: 3px; }
.vb-opt { font-weight: 400; color: var(--muted); font-size: 13.5px; }
.vb-in { width: 100%; height: 34px; padding: 0 12px; border: 1px solid #D9DDE6; border-radius: 6px; background: #fff; font: inherit; font-size: 15px; color: var(--text); outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.vb-in:focus { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.vb-in::placeholder { color: #A3A8B6; }
.vb-ta { height: 64px; min-height: 64px; padding: 8px 12px; resize: vertical; line-height: 1.4; display: block; }
.vb-sel { position: relative; display: block; }
.vb-sel select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer; }
.vb-sel .i { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--text-2); pointer-events: none; }
.vb-sel select:disabled { background: #F7F8FA; color: var(--muted); cursor: not-allowed; }
.vb-under { display: flex; align-items: center; gap: 10px; min-height: 16px; margin-top: 2px; }
.vb-err { flex: 1; margin: 0; display: flex; align-items: center; gap: 5px; font-size: 13px; color: #D63A4E; line-height: 1.3; } .vb-err .i { font-size: 14px; flex: none; }
.vb-count { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vb-count.is-over { color: #D63A4E; font-weight: 600; }
.vb-f.is-invalid .vb-in { border-color: #D63A4E; box-shadow: 0 0 0 3px #FDECEF; }
/* the audience combobox */
.vb-combo { position: relative; }
.vb-combo .vb-in { padding-right: 40px; }
.vb-combo-btn { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 38px; display: grid; place-items: center; color: var(--text-2); background: none; border: 0; border-radius: 0 6px 6px 0; cursor: pointer; } .vb-combo-btn .i { font-size: 18px; transition: transform 0.15s; }
.vb-combo-btn[aria-expanded="true"] .i { transform: rotate(180deg); }
.vb-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 14px 34px rgba(23, 27, 45, 0.16); max-height: 260px; overflow: auto; }
.vb-list .g { padding: 8px 10px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); }
.vb-list [role="option"] { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: 7px; font-size: 14.5px; cursor: pointer; }
.vb-list [role="option"] .i { font-size: 16px; color: var(--indigo); margin-left: auto; visibility: hidden; }
.vb-list [role="option"][aria-selected="true"] .i { visibility: visible; }
.vb-list [role="option"].is-active, .vb-list [role="option"]:hover { background: var(--indigo-bg); }
.vb-list .use { color: var(--indigo); font-weight: 500; }
/* the offer */
.vb-under .vb-addoffer { margin-right: auto; }
.vb-addoffer { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 6px; margin-left: -6px; border-radius: 6px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 500; color: var(--indigo); cursor: pointer; }
.vb-addoffer .i { font-size: 16px; } .vb-addoffer:hover { background: var(--indigo-bg); }
.vb-addoffer[hidden] { display: none; }
.vb-offer { margin-top: 2px; }
/* the footer */
.vb-foot { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--border); margin-top: 8px; padding-top: 10px; }
.vb-foot .btn-outline, .vb-foot .btn-primary { height: 42px; padding: 0 18px; font-size: 16px; box-shadow: none; }
.vb-foot .btn-outline { padding: 0 24px; }
.vb-foot .btn-primary { margin-left: auto; gap: 10px; } .vb-foot .btn-primary .i { font-size: 19px; }
.vb-foot .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.vb-foot .btn-primary.is-pending { opacity: 0.85; cursor: progress; }
.vb-sum { margin: 0 0 0 auto; font-size: 14px; color: #D63A4E; font-weight: 500; }
.vb-sum:not([hidden]) + .btn-primary { margin-left: 0; }
.vb-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; animation: vb-spin 0.8s linear infinite; flex: none; }
@keyframes vb-spin { to { transform: rotate(360deg); } }
/* the side card */
.vb-side { padding: 14px 16px 16px; }
.vb-sh { display: flex; align-items: center; gap: 14px; margin: 0; font-size: 17px; font-weight: 700; line-height: 24px; } .vb-sh .i { font-size: 23px; color: var(--indigo); }
.vb-brand { display: flex; gap: 18px; margin-top: 14px; }
.vb-mono { width: 64px; height: 64px; border-radius: 8px; background: #2F5BFF; color: #fff; font-size: 26px; font-weight: 800; letter-spacing: -0.5px; display: grid; place-items: center; flex: none; }
.vb-bt { min-width: 0; }
.vb-bn { margin: 2px 0 0; font-size: 18px; font-weight: 700; line-height: 23px; }
.vb-bd { margin: 5px 0 0; font-size: 14.5px; color: var(--text-2); line-height: 1.4; }
.vb-web { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 14.5px; color: var(--indigo); font-weight: 500; } .vb-web .i { font-size: 18px; } .vb-web:hover { text-decoration: underline; }
.vb-rule { height: 1px; background: var(--border); margin: 12px 0 12px; }
.vb-sh-m { margin-bottom: 10px; }
.vb-model { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 8px 10px 8px 10px; border: 1px solid var(--border); border-radius: 8px; }
.vb-gem { width: 30px; height: 30px; display: grid; place-items: center; color: #3B6BFF; flex: none; } .vb-gem .i { font-size: 26px; }
.vb-mt { flex: 1; min-width: 0; }
.vb-mt .r { display: flex; align-items: center; gap: 10px; } .vb-mt .r .vb-pill { margin-left: auto; align-self: auto; }
.vb-mt b { display: block; font-size: 14.5px; font-weight: 500; }
.vb-mt p { margin: 1px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.vb-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--green-bg); color: var(--green-text); font-size: 12.5px; font-weight: 500; flex: none; white-space: nowrap; }
.vb-pill .sdot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.vb-pill.is-off { background: #F0F1F5; color: var(--text-2); } .vb-pill.is-off .sdot { background: var(--grey); }
.vb-strip { display: flex; align-items: center; gap: 14px; min-height: 48px; margin-top: 10px; padding: 8px 14px; border-radius: 8px; }
.vb-strip > .i { font-size: 22px; flex: none; }
.vb-strip b { display: block; font-size: 14px; font-weight: 600; }
.vb-mpick { margin-top: 12px; }                                                   /* backlog 1.12: the brief's model select (Duration / Aspect ratio follow it) */
.vb-strip p { margin: 1px 0 0; font-size: 12.5px; color: var(--text-2); }
.vb-strip.is-ok { background: #EAF7F1; } .vb-strip.is-ok > .i, .vb-strip.is-ok b { color: var(--green-text); }
.vb-strip.is-warn { background: var(--amber-bg); } .vb-strip.is-warn > .i, .vb-strip.is-warn b { color: var(--amber-text); }
.vb-strip > div { flex: 1; min-width: 0; }
.vb-connect { height: 34px !important; padding: 0 12px !important; font-size: 14px !important; flex: none; }
.vb-strip[hidden] { display: none; }
.vb-ph { margin: 14px 0 8px; font-size: 14.5px; font-weight: 600; }
.vb-frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vb-frame.pi-cover { aspect-ratio: 152 / 190; height: auto; }
.vb-frame .pi-cv-art { height: 62%; }
.vb-frame .pi-cv-mark { left: 12px; top: 12px; font-size: 13px; }
.vb-frame .pi-cv-h { left: 12px; top: 32px; font-size: 19px; line-height: 1.08; }
/* responsive */
@media (max-width: 1200px) { .vb-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .vb-cols { grid-template-columns: 1fr; gap: 0; } }
@media (max-width: 768px) {
  .vb-card { padding: 10px 14px 14px; }
  .vb-steps .pw-step:not(.is-active) .pw-sl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vb-steps .pw-step:not(:last-child)::after { margin: 0 8px; }
  .vb-in { height: 44px; font-size: 16px; } .vb-ta { height: 88px; }
  .vb-combo-btn { width: 44px; }
  .vb-addoffer { height: 44px; }
  .vb-foot { flex-wrap: wrap; } .vb-foot .btn-primary, .vb-foot .btn-outline { flex: 1 1 100%; justify-content: center; height: 48px; margin-left: 0; }
  .vb-sum { flex: 1 1 100%; margin: 0; order: -1; }
  .vb-brand { gap: 12px; } .vb-mono { width: 52px; height: 52px; font-size: 21px; }
  .vb-frame .pi-cv-h { font-size: 14px; top: 28px; left: 9px; } .vb-frame .pi-cv-mark { left: 9px; top: 9px; font-size: 11px; }
  .vb-connect { height: 44px !important; }
}

/* ---------- Content-45 · Video reference pack (vr-) — the reference drawer over the video brief, plan plans/Content-45.md; the Content-32 drawer frame at 712 px ---------- */
.vr-host { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-mid: #193F94; --cg-tint: #F1F5F9; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter"; }
.vr-host[hidden] { display: none; }
.vr-backdrop { position: fixed; inset: 0; background: rgba(23, 27, 45, 0.42); z-index: 62; }
.vr-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 712px; max-width: 100vw; background: var(--surface); box-shadow: -12px 0 40px rgba(23, 27, 45, 0.18); display: flex; flex-direction: column; z-index: 63; }
.vr-drawer:focus { outline: none; }
.vr-head { display: flex; align-items: flex-start; gap: 16px; padding: 20px 24px 0 29px; min-height: 76px; }
.vr-head > div { flex: 1; min-width: 0; }
.vr-head h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.4px; line-height: 32px; }
.vr-head p { margin: 6px 0 0; font-size: 15.5px; color: var(--text-2); line-height: 1.35; }
.vr-x { width: 36px; height: 36px; margin: -2px -6px 0 0; border-radius: 8px; border: 0; background: none; display: grid; place-items: center; color: var(--text-2); flex: none; cursor: pointer; } .vr-x .i { font-size: 22px; } .vr-x:hover { background: #F3F4F8; }
.vr-body { flex: 1; overflow: auto; padding: 16px 24px 12px 29px; }
/* the brand card */
.vr-brandcard { display: flex; align-items: center; gap: 20px; min-height: 108px; padding: 16px 22px 16px 20px; border: 1px solid var(--border); border-radius: 12px; }
.vr-mono { width: 64px; height: 64px; border-radius: 8px; background: #2F5BFF; color: #fff; font-size: 27px; font-weight: 800; letter-spacing: -0.5px; display: grid; place-items: center; flex: none; }
.vr-bt { flex: 1; min-width: 0; }
.vr-bt h3 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.3px; line-height: 27px; }
.vr-bt p { margin: 5px 0 0; font-size: 14.5px; color: var(--text-2); line-height: 1.4; }
.vr-bside { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; flex: none; align-self: flex-start; }
.vr-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 6px; background: #F0F1F5; font-size: 13.5px; font-weight: 500; color: var(--text-2); }
.vr-web { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--indigo); font-weight: 500; } .vr-web .i { font-size: 19px; } .vr-web:hover { text-decoration: underline; }
/* the sections */
.vr-sec { padding: 22px 0 20px; border-bottom: 1px solid var(--border); }
.vr-sec:last-child { border-bottom: 0; padding-bottom: 6px; }
.vr-h { margin: 0; font-size: 17.5px; font-weight: 700; letter-spacing: -0.2px; line-height: 22px; }
.vr-l { margin: 3px 0 0; font-size: 14px; color: var(--text-2); }
/* the reference cards */
.vr-cards { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vr-card { position: relative; padding: 5px 5px 8px; border: 1px solid var(--border); border-radius: 10px; background: #fff; min-width: 0; }
.vr-card.is-new { box-shadow: 0 0 0 2px var(--indigo); }
.vr-img { position: relative; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; container-type: size; background: #0E1B3D; }
.vr-img .cp-art { cursor: default; border-radius: 8px; }
.vr-badge { position: absolute; top: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px 0 6px; border-radius: 13px; font-size: 13px; font-weight: 500; }
.vr-badge.ok { left: 8px; background: #E4F8EE; color: var(--green-text); } .vr-badge.ok .i { font-size: 17px; color: var(--green); }
.vr-badge.up { left: 8px; background: #EEF1FF; color: var(--indigo); padding-left: 9px; }
.vr-badge.ver { right: 8px; background: rgba(255, 255, 255, 0.28); color: #fff; padding: 0 8px; border-radius: 6px; backdrop-filter: blur(2px); font-variant-numeric: tabular-nums; }
.vr-rm { position: absolute; right: 8px; bottom: 8px; z-index: 4; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(14, 27, 61, 0.78); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity 0.15s; } .vr-rm .i { font-size: 17px; stroke-width: 2.4; }
.vr-card:hover .vr-rm, .vr-rm:focus-visible { opacity: 1; } .vr-rm:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.vr-rm:hover { background: #D63A4E; }
.vr-card .rt { display: block; margin: 9px 4px 0; font-size: 15px; font-weight: 700; line-height: 19px; }
.vr-card .nm { display: block; margin: 3px 3px 0; font-size: 13px; letter-spacing: -0.1px; color: var(--muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vr-card .ty { font-size: 11.5px; font-weight: 600; color: var(--amber-text); margin-left: 4px; }
/* the empty state */
.vr-empty { display: flex; align-items: center; gap: 16px; margin-top: 14px; padding: 18px; border: 1px dashed #CDD3E0; border-radius: 10px; }
.vr-empty[hidden] { display: none; }
.vr-empty-ic { width: 48px; height: 48px; border-radius: 12px; background: #F1F4FA; color: var(--indigo); display: grid; place-items: center; flex: none; } .vr-empty-ic .i { font-size: 24px; }
.vr-empty b { display: block; font-size: 15.5px; } .vr-empty p { margin: 3px 0 0; font-size: 13.5px; color: var(--text-2); }
.vr-empty > div { flex: 1; min-width: 0; }
.vr-empty .btn-outline { height: 40px; font-size: 14.5px; padding: 0 14px; flex: none; }
/* the roles */
.vr-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 20px; margin-top: 16px; }
.vr-role { min-width: 0; }
.vr-role label { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 7px; }
.vr-role .vr-sel { position: relative; display: block; }
.vr-role select { width: 100%; height: 40px; padding: 0 36px 0 12px; appearance: none; -webkit-appearance: none; border: 1px solid #D9DDE6; border-radius: 6px; background: #fff; font: inherit; font-size: 14.5px; color: var(--text); cursor: pointer; outline: none; }
.vr-role select:focus { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.vr-role .vr-sel .i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 17px; color: var(--text-2); pointer-events: none; }
.vr-role.is-invalid select { border-color: #D63A4E; box-shadow: 0 0 0 3px #FDECEF; }
.vr-role .e { margin: 5px 0 0; font-size: 12.5px; color: #D63A4E; }
.vr-roles-empty { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--muted); }
/* the add row */
.vr-addrow { display: flex; align-items: center; gap: 20px; margin-top: 14px; }
.vr-add-w { position: relative; flex: none; }
.vr-add { height: 42px !important; padding: 0 30px !important; font-size: 15.5px !important; color: var(--indigo); box-shadow: none; } .vr-add .i { font-size: 19px; }
.vr-add:disabled { color: var(--muted); background: #FAFBFD; cursor: not-allowed; }
.vr-hint { font-size: 13.5px; color: var(--muted); }
.vr-compat { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--green-text); white-space: nowrap; } .vr-compat .i { font-size: 20px; color: var(--green); }
.vr-compat.is-warn { color: var(--amber-text); } .vr-compat.is-warn .i { color: var(--amber); }
.vr-err { margin: 10px 0 0; font-size: 13.5px; color: #D63A4E; font-weight: 500; }
/* the picker */
/* the footer */
.vr-foot { display: flex; align-items: center; gap: 14px; margin: 0 24px 0 29px; padding: 12px 0 13px; border-top: 1px solid var(--border); min-height: 70px; }
.vr-foot .btn-outline, .vr-foot .btn-primary { height: 44px; padding: 0 20px; font-size: 16px; box-shadow: none; }
.vr-foot .btn-outline { padding: 0 24px; }
.vr-foot .btn-primary { margin-left: auto; gap: 12px; } .vr-foot .btn-primary .i { font-size: 19px; }
.vr-foot .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.vr-foot .btn-primary.is-pending { opacity: 0.85; cursor: progress; }
@keyframes vr-spin { to { transform: rotate(360deg); } }
/* responsive: a full-width sheet on a phone */
@media (max-width: 768px) {
  .vr-backdrop { z-index: 81; }
  .vr-drawer { top: auto; width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; z-index: 82; }
  .vr-head { padding: 16px 12px 0 16px; } .vr-head h2 { font-size: 22px; line-height: 28px; }
  .vr-x { width: 44px; height: 44px; }
  .vr-body { padding: 14px 16px 10px; }
  .vr-brandcard { flex-wrap: wrap; gap: 14px; padding: 14px; } .vr-mono { width: 52px; height: 52px; font-size: 21px; }
  .vr-bside { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
  .vr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vr-rm { opacity: 1; width: 40px; height: 40px; }
  .vr-roles { grid-template-columns: 1fr; } .vr-role select { height: 44px; font-size: 16px; }
  .vr-addrow { flex-wrap: wrap; gap: 10px 14px; } .vr-add-w { flex: 1 1 100%; } .vr-add { width: 100%; justify-content: center; height: 48px !important; }
  .vr-compat { margin-left: 0; }
  .vr-foot { margin: 0 16px; } .vr-foot .btn-outline, .vr-foot .btn-primary { height: 48px; } .vr-foot .btn-primary { flex: 1; justify-content: center; }
}

/* ---------- Content-40 / 41 build additions (pe- / pp-) ---------- */
/* Content-40: the generated images in place of the prototype drawings, a text post (no image column), the brand tile */
.pe-stage .pv2-shot { top: 0; height: 100%; }
.pe-rimg .pv2-img { border-radius: 0; }
.pe-root.is-text .pe-cols { grid-template-columns: minmax(0, 1fr); }
.pe-root.is-text .pe-rule, .pe-root.is-text .pe-img, .pe-root.is-text .pe-exact { display: none; }
.pe-root.is-running .pe-req-grid .pe-in:disabled { background: #F6F7FA; }
.pe-mini .pe-rimg .pv2-img.is-logo { padding: 10%; }
.pe-dlg-f .btn-primary.is-pending { opacity: 0.8; }
/* Content-41: the stored image at the chosen crop (object-fit: cover), the brand avatar, a text post's single row */
.pp-media .pp-img { z-index: 1; }
.pp-media.is-swap .pp-img { animation: pd-fade 0.22s ease-out; }
.pp-th .pv2-img { border-radius: 0; }
.pp-th.pp-th-text { display: grid; place-items: center; background: linear-gradient(140deg, var(--cg-primary) 0%, var(--cg-dark) 100%); }
.pp-th.pp-th-text .pw-av { width: 44px; height: 44px; }
.pp-list .pp-row > span.pp-rsel { cursor: default; }
.pp-mock .pw-av { background: var(--cg-primary); }
.pp-mock .pw-av.has-logo { background: #fff; }
.pp-mock .pw-av.has-logo.is-dark { background: var(--cg-dark); }
.pp-mock[data-format="text"] .pp-cap { padding-top: 4px; }
.pp-root[data-kind="text"] .pp-sec-fmt, .pp-root[data-kind="text"] .pp-sec-sw,
.pp-root[data-kind="text"] #pp-car-sec .pp-lbl, .pp-root[data-kind="text"] .pp-car { display: none; }
.pp-root[data-kind="image"] #pp-car-sec, .pp-root[data-kind="text"] #pp-car-sec { border-bottom: 0; padding-bottom: 0; }
.pp-good.is-pending { opacity: 0.8; }
@media (prefers-reduced-motion: reduce) { .pp-media.is-swap .pp-img { animation: none; } }
/* Content-39: the "Preview" link on the platform tile */
.pd-pv { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 13px; font-weight: 600; color: var(--indigo); text-decoration: none; }
.pd-pv .i { font-size: 14px; }
.pd-pv:hover { text-decoration: underline; }
.pd-pv:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 4px; }

/* ---------- Content-42 … 45 build additions (vc- / vb- / vr-): the brand tile in the brand colour or with the effective logo, real images in place of the prototype drawings, the loading / error states ---------- */
.vc-mono, .vb-mono, .vr-mono { background: var(--cg-primary, #2F5BFF); overflow: hidden; }
.vc-mono.has-logo, .vb-mono.has-logo, .vr-mono.has-logo { background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.vc-mono.has-logo.is-dark, .vb-mono.has-logo.is-dark, .vr-mono.has-logo.is-dark { background: var(--cg-dark, #0E1B3D); box-shadow: none; }
.vc-mono img, .vb-mono img, .vr-mono img { width: 78%; height: 78%; object-fit: contain; display: block; }
.vc-vis.has-img { background: var(--cg-dark, #0E1B3D); }
.vc-vis.has-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-vis.has-img::after { background: none; }
.vc-vis .cp-art { position: absolute; inset: 0; }
.vr-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vr-img.is-logo { background: #F5F7FB; }
.vr-img.is-logo img { inset: 14%; width: 72%; height: 72%; object-fit: contain; }
.vr-img.is-logo .vr-badge.ver { background: rgba(14, 27, 61, 0.55); }
.vr-fail { padding: 16px 0; }
.vr-card.is-new .vr-rm { opacity: 1; }
.vr-add:disabled[title] { cursor: not-allowed; }
.vb-back { display: inline-flex; align-items: center; }
.vb-frame.t-blue .pi-cv-art { background: linear-gradient(165deg, var(--cg-mid, #193F94) 0%, var(--cg-dark, #0E1B3D) 100%); }

/* ---------- Content-46 · Audio and on-screen text (va-) — Content module, plan plans/Content-46.md; the frame follows Content-34's pi-cover tones ---------- */
.va-root { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-mid: #193F94; }
.va-subnav.ct-subnav { margin: 0 0 14px; }
.va-head { padding-bottom: 12px; }
.va-head .eyebrow { font-size: 13px; }
.va-head h1 { font-size: 32px; }
.va-head .sub { font-size: 18px; }
.va-grid { display: grid; grid-template-columns: 424px minmax(0, 1fr); gap: 16px; align-items: stretch; }
/* the preview card: the 280 × 446 9:16 frame, the ratio chip and the safe-area tile */
.va-prev { padding: 16px 16px 16px; display: flex; flex-direction: column; min-width: 0; }
.va-prev h2 { margin: 0 0 12px; font-size: 20px; font-weight: 800; letter-spacing: -0.3px; }
.va-frame { position: relative; margin: 0 auto; width: 280px; height: 446px; border-radius: 6px; overflow: hidden; isolation: isolate; color: #fff;
  background: radial-gradient(120% 70% at 50% 100%, #2B4FC4 0%, #142C74 38%, var(--cg-dark) 78%); box-shadow: 0 2px 8px rgba(14, 27, 61, 0.22); }
.va-art { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; z-index: 0; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%); mask-image: linear-gradient(180deg, transparent 0, #000 26%); }
.va-art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.va-safe { position: absolute; inset: 11px 34px; z-index: 2; border: 1px dashed rgba(255, 255, 255, 0.72); border-radius: 2px; pointer-events: none; transition: opacity 0.2s; }
.va-frame.no-safe .va-safe { opacity: 0; }
.va-fr-t { position: absolute; left: 40px; right: 40px; top: 34px; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; }
.va-fr-brand { font-size: 14px; font-weight: 600; letter-spacing: -0.1px; }
.va-fr-h { margin-top: 24px; font-size: 28px; font-weight: 800; line-height: 1.08; letter-spacing: -0.6px; overflow-wrap: anywhere; }
.va-fr-h.is-long { font-size: 22px; }
.va-fr-s { margin-top: 8px; font-size: 14px; font-weight: 500; opacity: 0.95; }
.va-cap { position: absolute; left: 44px; right: 44px; bottom: 62px; z-index: 3; text-align: center; font-size: 14px; font-weight: 700; line-height: 1.25; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
.va-cap[hidden] { display: none; }
.va-cap[data-style="Bold yellow"] { color: #FFD43B; font-size: 15px; font-weight: 800; }
.va-cap[data-style="Boxed"] { background: rgba(0, 0, 0, 0.72); padding: 5px 8px; border-radius: 4px; text-shadow: none; }
.va-cap[data-style="Brand colour"] { background: var(--cg-primary); padding: 5px 8px; border-radius: 4px; text-shadow: none; }
.va-chips { display: flex; gap: 14px; margin-top: 10px; }
.va-ratio { width: 156px; height: 54px; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 18px; border: 1px solid var(--indigo); border-radius: 6px; background: var(--indigo-bg-2); color: var(--indigo); font-size: 14.5px; font-weight: 500; cursor: default; }
.va-ratio .i { font-size: 24px; stroke-width: 1.6; }
.va-safe-t { flex: 1 1 auto; min-width: 0; height: 54px; display: flex; align-items: center; gap: 16px; padding: 0 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); text-align: left; cursor: pointer; transition: border-color 0.15s; }
.va-safe-t:hover { border-color: #C9D2EE; }
.va-safe-t:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.va-box { width: 26px; height: 26px; border: 1.5px solid #C3C8D4; border-radius: 4px; display: grid; place-items: center; flex: none; background: #fff; transition: background 0.15s, border-color 0.15s; }
.va-box .i { font-size: 16px; color: #fff; stroke-width: 2.8; opacity: 0; }
.va-safe-t[aria-pressed="true"] .va-box { background: var(--indigo); border-color: var(--indigo); }
.va-safe-t[aria-pressed="true"] .va-box .i { opacity: 1; }
.va-st { display: flex; flex-direction: column; min-width: 0; }
.va-st b { font-size: 14px; font-weight: 600; color: var(--text); }
.va-st small { font-size: 12.5px; color: var(--muted); }
/* the settings card: four sections split by 1 px rules */
.va-set { padding: 8px 16px 12px 20px; display: flex; flex-direction: column; min-width: 0; }
.va-strip { display: flex; align-items: center; gap: 14px; margin: 8px 0 4px; padding: 8px 12px; border-radius: 8px; background: var(--amber-bg); }
.va-strip[hidden] { display: none; }
.va-strip > .i { font-size: 22px; color: var(--amber-text); flex: none; }
.va-strip > div { flex: 1; min-width: 0; } .va-strip b { display: block; font-size: 14px; color: var(--amber-text); } .va-strip p { margin: 1px 0 0; font-size: 12.5px; color: var(--text-2); }
.va-connect { height: 36px; font-size: 14.5px; }
.va-sec { padding: 12px 0 14px; border-bottom: 1px solid var(--border); }
.va-sec:last-of-type { border-bottom: 0; }
.va-sh { display: flex; align-items: flex-start; gap: 14px; }
.va-tile { width: 38px; height: 38px; border-radius: 8px; background: #F1F4FA; color: var(--indigo); display: grid; place-items: center; flex: none; }
.va-tile .i { font-size: 21px; }
.va-stx { flex: 1 1 auto; min-width: 0; }
.va-stx h3 { margin: 1px 0 0; font-size: 16.5px; font-weight: 700; letter-spacing: -0.2px; line-height: 21px; }
.va-stx p { margin: 1px 0 0; font-size: 14px; color: var(--text-2); }
.va-swc { display: flex; align-items: center; gap: 10px; margin: 4px 14px 0 0; flex: none; }
.va-na { font-size: 12.5px; color: var(--muted); max-width: 190px; text-align: right; line-height: 1.25; }
.va-na[hidden] { display: none; }
/* the switch: 44 × 24 track, indigo when on */
.va-sw { position: relative; width: 44px; height: 26px; border-radius: 13px; border: 0; padding: 0; background: #E3E6ED; cursor: pointer; flex: none; transition: background 0.18s; }
.va-sw .va-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(14, 27, 61, 0.25); transition: transform 0.18s; }
.va-sw[aria-checked="true"] { background: var(--indigo); }
.va-sw[aria-checked="true"] .va-knob { transform: translateX(18px); }
.va-sw:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.va-sw:disabled { cursor: not-allowed; opacity: 0.55; }
/* the fields */
.va-body { margin: 10px 0 0 52px; }
.va-body-voice { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 316px; gap: 16px; align-items: start; margin-top: 8px; }
.va-body-voice .va-capbox { margin-top: -14px; min-height: 90px; }
.va-f { min-width: 0; position: relative; }
.va-lbl { display: block; font-size: 14.5px; font-weight: 500; margin-bottom: 6px; line-height: 18px; }
.va-in { width: 100%; height: 36px; padding: 0 12px; border: 1px solid #D9DDE6; border-radius: 6px; background: #fff; font: inherit; font-size: 14.5px; color: var(--text); outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.va-in:focus { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.va-sel { position: relative; display: block; }
.va-sel select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; }
.va-sel .i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 17px; color: var(--text-2); pointer-events: none; }
.va-sel select:disabled { background: #F7F8FA; color: #A3A8B6; cursor: not-allowed; border-color: #E6E9EF; }
.va-sel select:disabled + .i { color: #B7BCC8; }
.va-err { margin: 4px 0 0; display: flex; align-items: center; gap: 5px; font-size: 13px; color: #D63A4E; line-height: 1.3; }
.va-err[hidden] { display: none; }
.va-err .i { font-size: 14px; flex: none; }
.va-f.is-invalid .va-in { border-color: #D63A4E; box-shadow: 0 0 0 3px #FDECEF; }
.va-capbox { display: flex; gap: 12px; padding: 12px 14px; border-radius: 6px; background: #EEF1FF; min-height: 92px; transition: opacity 0.15s; }
.va-capbox > .i { font-size: 18px; color: var(--indigo); flex: none; margin-top: 1px; }
.va-capbox b { display: block; font-size: 14px; font-weight: 600; color: var(--indigo); line-height: 18px; }
.va-capbox p { margin: 3px 0 0; font-size: 13px; line-height: 1.4; color: var(--text-2); }
.va-sec.is-off .va-body { opacity: 0.55; }
.va-sec.is-off .va-capbox { opacity: 0.7; }
/* the music row: the mood select, the round ▶, the waveform and the time */
.va-body-music { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; align-items: end; }
.va-player { display: flex; align-items: center; gap: 22px; height: 38px; min-width: 0; }
.va-play { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #EEF1FF; color: var(--indigo); display: grid; place-items: center; flex: none; cursor: pointer; transition: background 0.15s; }
.va-play:hover { background: #E0E6FF; }
.va-play:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.va-play .i { font-size: 17px; grid-area: 1 / 1; }
.va-play .i:first-child { margin-left: 3px; }
.va-play .i:last-child, .va-play[aria-pressed="true"] .i:first-child { display: none; }
.va-play[aria-pressed="true"] .i:last-child { display: block; }
.va-play[aria-pressed="true"] { background: var(--indigo); color: #fff; }
.va-play:disabled { cursor: not-allowed; opacity: 0.5; }
.va-wave { flex: 1 1 auto; min-width: 0; height: 26px; display: flex; align-items: center; gap: 3px; overflow: hidden; position: relative; }
.va-wave::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #E3E6ED; z-index: -1; }
.va-wave i { flex: 1 1 0; min-width: 1px; max-width: 3px; border-radius: 1px; background: #C3CCEA; transition: background 0.12s; }
.va-wave i.is-past { background: var(--indigo); }
.va-wave i.is-flat { background: #E3E6ED; }
.va-time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
/* the on-screen text row: the textarea and the exact-wording switch block */
.va-body-text { display: grid; grid-template-columns: minmax(0, 1fr) 256px; gap: 26px; align-items: start; margin-top: 4px; }
.va-ta-w { position: relative; }
.va-ta { height: 56px; min-height: 56px; padding: 8px 12px 16px; resize: vertical; line-height: 1.35; display: block; }
.va-count { position: absolute; right: 22px; bottom: 5px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; pointer-events: none; }
.va-count.is-over { color: #D63A4E; font-weight: 600; }
.va-exact { display: flex; gap: 12px; margin-top: -22px; }
.va-exact .va-sw { margin-top: 1px; }
.va-exact b { display: block; font-size: 14px; font-weight: 600; line-height: 20px; }
.va-exact p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.35; color: var(--text-2); }
/* the captions row: the switch in the middle, the style field at the right */
.va-sec-cap .va-sh { align-items: flex-start; }
.va-swc-cap { margin: 6px 30px 0 0; flex-direction: column-reverse; align-items: flex-end; gap: 4px; }
.va-swc-cap .va-na { max-width: 170px; }
.va-f-cstyle { width: 380px; flex: none; display: grid; grid-template-columns: 90px minmax(0, 1fr); column-gap: 10px; align-items: center; margin-top: 0; }
.va-f-cstyle .va-lbl { margin: 0; font-size: 13.5px; }
.va-f-cstyle .va-in { height: 32px; font-size: 12.5px; }
.va-note { grid-column: 2; margin: 8px 0 0; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.va-note .i { font-size: 15px; flex: none; }
.va-note[hidden] { display: none; }
/* the footer */
.va-foot { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 6px; }
.va-foot .btn-outline, .va-foot .btn-primary { height: 40px; font-size: 15px; box-shadow: none; }
.va-back { padding: 0 22px; gap: 10px; } .va-back .i { font-size: 17px; }
.va-sum { margin: 0 0 0 auto; font-size: 13.5px; color: #D63A4E; font-weight: 500; }
.va-sum[hidden] { display: none; }
.va-len { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.va-sum:not([hidden]) + .va-len { margin-left: 0; }
.va-len .i { font-size: 17px; color: var(--muted); }
.va-save { padding: 0 16px; gap: 8px; } .va-save .i { font-size: 17px; }
.va-save:disabled { opacity: 0.5; cursor: not-allowed; }
.va-save.is-pending { opacity: 0.85; cursor: progress; }
.va-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; animation: va-spin 0.8s linear infinite; flex: none; }
@keyframes va-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .va-sw, .va-sw .va-knob, .va-safe, .va-wave i { transition: none; }
  .va-spin { animation-duration: 2.4s; }
}
@media (max-width: 1440px) {
  .va-body-voice { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .va-body-voice .va-capbox { grid-column: 1 / -1; min-height: 0; margin-top: 0; }
  .va-sec-cap .va-sh { flex-wrap: wrap; }
  .va-f-cstyle { width: auto; flex: 1 1 100%; margin-left: 52px; }
}
@media (max-width: 1180px) {
  .va-grid { grid-template-columns: minmax(0, 1fr); }
  .va-body-text { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .va-exact { margin-top: 0; }
}
@media (max-width: 768px) {
  .va-subnav.ct-subnav { overflow-x: auto; }
  .va-head h1 { font-size: 28px; } .va-head .sub { font-size: 16px; }
  .va-prev { padding: 14px; }
  .va-body { margin-left: 0; }
  .va-body-voice, .va-body-music { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .va-f-cstyle { margin-left: 0; grid-template-columns: minmax(0, 1fr); }
  .va-f-cstyle .va-lbl { margin-bottom: 6px; } .va-note { grid-column: 1; }
  .va-swc { margin-right: 0; }
  .va-in, .va-f-cstyle .va-in { height: 44px; }
  .va-sw { width: 48px; height: 28px; border-radius: 14px; } .va-sw .va-knob { width: 22px; height: 22px; } .va-sw[aria-checked="true"] .va-knob { transform: translateX(20px); }
  .va-play { width: 44px; height: 44px; }
  .va-foot { flex-wrap: wrap; }
  .va-len { order: -1; width: 100%; margin: 0; }
  .va-foot .btn-outline, .va-foot .btn-primary { height: 46px; }
  .va-save { margin-left: auto; }
}
@media (max-width: 430px) {
  .va-set { padding: 8px 14px 12px; }
  .va-frame { width: 240px; height: 382px; }
  .va-fr-h { font-size: 24px; margin-top: 18px; }
  .va-safe { inset: 10px 28px; }
  .va-chips { flex-direction: column; }
  .va-ratio { width: 100%; }
  .va-swc { margin-top: 2px; }
  .va-na { max-width: none; text-align: left; }
  .va-wave i:nth-child(2n) { display: none; }
  .va-foot .btn-outline, .va-foot .btn-primary { flex: 1 1 0; justify-content: center; padding: 0 10px; }
}

/* ---------- Content-47 / 48 · Video scripts (vs-) — the generating state (47) and the script board (48), plan plans/Content-47.md; the pictures reuse Content-34's pi-cover, the stepper Content-30's pw-step ---------- */
.vs-root { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-mid: #193F94; --pi-em: #8FB4FF; }
.vs-head { padding-bottom: 12px; }
.vs-head .eyebrow { font-size: 13px; }
.vs-head .sub { font-size: 18px; }
.vs-subnav.ct-subnav { margin: 0 0 16px; }
/* the stepper card (56 px on 47, 64 px on 48) */
.vs-steps { height: 56px; display: flex; align-items: center; padding: 0 24px; margin-bottom: 12px; }
.vs-steps ol { list-style: none; margin: 0 auto; padding: 0; width: 100%; max-width: 900px; display: flex; align-items: center; }
.vs-steps .pw-disc { width: 36px; height: 36px; font-size: 15.5px; }
.vs-steps .pw-sl { margin-left: 16px; font-size: 14.5px; }
.vs-steps .pw-step.is-active .pw-sl { font-weight: 600; }
.vs-steps .pw-step.is-active::after { background: var(--indigo); height: 2px; }
.vs-steps .pw-step.is-done .pw-disc { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.vs-board-root .vs-steps { height: 64px; margin-bottom: 14px; }
.vs-board-root .vs-steps .pw-step.is-active::after { background: #DCE0E8; height: 1px; }
.vs-board-root .vs-steps .pw-disc { width: 40px; height: 40px; }
.vs-board-root .vs-steps .pw-sl { font-size: 16px; }

/* 47 · two columns: the setup card | the stepper, progress and concepts */
.vs-cols { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
.vs-setup { padding: 16px 16px 16px; }
.vs-setup-h { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; font-size: 18px; font-weight: 700; letter-spacing: -0.2px; }
.vs-vtile { width: 30px; height: 30px; border-radius: 7px; background: #F1F4FA; color: var(--indigo); display: grid; place-items: center; flex: none; }
.vs-vtile .i { font-size: 18px; }
.vs-f { margin-bottom: 14px; }
.vs-lbl { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.vs-brand { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 6px; }
.vs-mono { width: 54px; height: 54px; border-radius: 6px; background: #2F5BFF; color: #fff; font-size: 21px; font-weight: 800; letter-spacing: -0.4px; display: grid; place-items: center; flex: none; }
.vs-brand b { display: block; font-size: 16px; font-weight: 600; }
.vs-brand p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.3; color: var(--text-2); }
.vs-sel { position: relative; display: block; }
.vs-in { width: 100%; height: 38px; padding: 0 36px 0 12px; border: 1px solid #D9DDE6; border-radius: 6px; background: #fff; font: inherit; font-size: 14px; color: var(--text); appearance: none; -webkit-appearance: none; opacity: 1; }
.vs-in:disabled { color: var(--text); background: #fff; cursor: default; }
.vs-sel .i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 17px; color: var(--text-2); pointer-events: none; }
.vs-editbrief { display: inline-flex; align-items: center; gap: 6px; margin: -4px 0 12px; font-size: 13.5px; font-weight: 500; color: var(--indigo); }
.vs-editbrief .i { font-size: 15px; } .vs-editbrief:hover { text-decoration: underline; }
.vs-note { display: flex; gap: 14px; padding: 16px 14px; border-radius: 8px; background: #F1F4FA; }
.vs-note > .i { font-size: 26px; color: var(--indigo); flex: none; margin-top: 2px; }
.vs-note b { display: block; font-size: 14.5px; font-weight: 600; }
.vs-note p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
.vs-main { min-width: 0; }

/* 47 · the progress card: three steps on a vertical 2 px track */
.vs-prog { padding: 12px 16px 12px; margin-bottom: 12px; }
.vs-ch { display: flex; align-items: center; gap: 14px; margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.2px; }
.vs-ic { width: 28px; height: 28px; display: grid; place-items: center; color: var(--indigo); flex: none; } .vs-ic .i { font-size: 22px; }
.vs-steplist { list-style: none; margin: 10px 0 0; padding: 0 0 0 16px; }
.vs-pstep { position: relative; display: flex; align-items: flex-start; gap: 22px; padding-bottom: 7px; }
.vs-pstep:not(:last-child)::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: 0; width: 2px; background: #E3E6EE; }
.vs-pstep.is-done:not(:last-child)::before { background: #BFE8D6; }
.vs-pd { position: relative; width: 24px; height: 24px; margin-top: 3px; border-radius: 50%; border: 2px solid #D5D9E3; background: var(--surface); display: grid; place-items: center; flex: none; font-size: 12px; font-weight: 700; color: var(--muted); transition: background 0.25s, border-color 0.25s; }
.vs-pd .i { display: none; font-size: 14px; color: #fff; stroke-width: 3; }
.vs-pstep b { display: block; font-size: 14px; font-weight: 600; color: var(--text-2); line-height: 18px; }
.vs-pstep p { margin: 1px 0 0; font-size: 12.5px; color: var(--muted); }
.vs-pstep.is-done .vs-pd { background: var(--green); border-color: var(--green); }
.vs-pstep.is-done .vs-pd .n { display: none; } .vs-pstep.is-done .vs-pd .i:nth-of-type(1) { display: block; }
.vs-pstep.is-done b { color: var(--text); }
.vs-pstep.is-active .vs-pd { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.vs-pstep.is-active .vs-pd::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--indigo); opacity: 0; animation: pi-ring 1.4s ease-out infinite; }
.vs-pstep.is-active b { color: var(--indigo); }
.vs-pstep.is-failed .vs-pd { background: #FDECEF; border-color: var(--red); }
.vs-pstep.is-failed .vs-pd .n { display: none; } .vs-pstep.is-failed .vs-pd .i:nth-of-type(2) { display: block; color: #D63A4E; }
.vs-pstep.is-failed b { color: #B4233A; }
.vs-fail { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 9px 12px 9px 14px; border-radius: 10px; background: #FDECEF; border: 1px solid #F7C6CF; color: #9F1D33; }
.vs-fail[hidden] { display: none; }
.vs-fail-ic { display: grid; place-items: center; color: #D63A4E; flex: none; } .vs-fail-ic .i { font-size: 20px; }
.vs-fail p { margin: 0; flex: 1 1 auto; font-size: 14.5px; line-height: 1.35; }
.vs-retry { height: 36px; font-size: 14.5px; padding: 0 14px; flex: none; } .vs-retry .i { font-size: 16px; }

/* 47 · the concepts card: six 172 × 188 cards in a row */
.vs-concepts { padding: 10px 12px 10px; }
.vs-concepts h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.2px; }
.vs-con-l { margin: 2px 0 8px; font-size: 13px; color: var(--text-2); }
.vs-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.vs-mini { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px 8px; height: 188px; display: flex; flex-direction: column; min-width: 0; cursor: pointer; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.vs-mini:hover { border-color: #CDD5F5; }
.vs-mini:focus-visible { box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.25); }
.vs-mini.is-selected { border-color: var(--indigo); box-shadow: inset 0 0 0 1px var(--indigo); }
.vs-mini.is-selected h3 { color: var(--indigo); }
.vs-mtop { display: flex; align-items: center; justify-content: space-between; height: 22px; margin-bottom: 5px; }
.vs-num { width: 22px; height: 22px; border-radius: 50%; background: #F1F2F6; color: var(--text-2); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.vs-mini.is-selected .vs-num { background: var(--indigo); color: #fff; }
.vs-dots { width: 26px; height: 26px; margin-right: -6px; border-radius: 6px; border: 0; background: none; display: grid; place-items: center; color: var(--text-2); cursor: pointer; }
.vs-dots:hover, .vs-dots[aria-expanded="true"] { background: #F1F2F6; }
.vs-dots .i { font-size: 18px; }
.vs-mini .pi-cover { height: 82px; flex: none; border-radius: 6px; }
.vs-mini .pi-cover.is-wide .pi-cv-mark { left: 7px; top: 7px; width: 18px; height: 18px; font-size: 8px; border-radius: 4px; }
.vs-mini .pi-cover.is-wide .pi-cv-h { bottom: 8px; left: 8px; font-size: 13px; }
.vs-mini h3 { margin: 8px 0 1px; font-size: 13.5px; font-weight: 700; line-height: 1.2; letter-spacing: -0.1px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vs-mini .vs-line { margin: 0; font-size: 12px; line-height: 1.25; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vs-mini .vs-saved-tag { position: absolute; top: 38px; right: 16px; z-index: 3; width: 22px; height: 22px; border-radius: 6px; background: rgba(255, 255, 255, 0.94); color: var(--indigo); display: grid; place-items: center; }
.vs-mini .vs-saved-tag .i { font-size: 14px; fill: var(--indigo); }
.vs-mini .vs-saved-tag[hidden] { display: none; }
.vs-mini.is-in { animation: pi-in 0.45s ease both; }
.vs-mini.is-skel { background: #FCFCFE; cursor: default; }
.vs-sk { display: block; border-radius: 5px; background: #EDEFF4; }
.vs-sk.num { width: 22px; height: 22px; border-radius: 50%; }
.vs-sk.pic { height: 82px; border-radius: 6px; margin-top: 5px; }
.vs-sk.t { height: 11px; width: 70%; margin-top: 12px; } .vs-sk.l { height: 9px; width: 92%; margin-top: 9px; } .vs-sk.l.s { width: 64%; margin-top: 7px; }
.vs-mini.is-skel.is-live .vs-sk { background: linear-gradient(90deg, #EDEFF4 0%, #F6F7FA 45%, #EDEFF4 90%); background-size: 240% 100%; animation: pi-shimmer 1.4s linear infinite; }
.vs-mini.is-skel.is-dim { opacity: 0.55; }
/* the ⋯ menu (47) */
.vs-cmenu { position: absolute; top: 32px; right: 6px; z-index: 30; min-width: 176px; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(23, 27, 45, 0.16); }
.vs-cmenu[hidden] { display: none; }
.vs-cmenu button { width: 100%; height: 36px; padding: 0 10px; border-radius: 7px; border: 0; background: none; display: flex; align-items: center; gap: 10px; font: inherit; font-size: 14px; color: var(--text); text-align: left; cursor: pointer; }
.vs-cmenu button .i { font-size: 16px; color: var(--text-2); }
.vs-cmenu button:hover, .vs-cmenu button:focus-visible { background: var(--indigo-bg-2); outline: none; }

/* 47 · the footer strip */
.vs-foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.vs-info { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 16px; min-height: 58px; padding: 8px 18px; border-radius: 8px; background: #EEF1FA; }
.vs-info > .i { font-size: 24px; color: var(--indigo); flex: none; }
.vs-info > div { flex: 1 1 auto; min-width: 0; }
.vs-info b { display: block; font-size: 14px; font-weight: 600; }
.vs-info p { margin: 2px 0 0; font-size: 13px; color: var(--text-2); }
.vs-info.is-ready { background: #EAF7F1; } .vs-info.is-ready > .i { color: var(--green); }
.vs-open { height: 36px; font-size: 14px; flex: none; gap: 8px; } .vs-open .i { font-size: 16px; } .vs-open[hidden] { display: none; }
.vs-foot .vs-exit, .vs-foot .vs-bg { height: 44px; font-size: 15.5px; flex: none; box-shadow: none; }
.vs-exit { padding: 0 18px; }
.vs-bg { padding: 0 18px; gap: 12px; } .vs-bg .i { font-size: 18px; }

/* 48 · the head: the style filter + the primary at the right */
.vs-head-board { justify-content: space-between; align-items: flex-start; }
.vs-tools { display: flex; align-items: center; gap: 18px; margin-top: 10px; flex: none; }
.vs-menu { position: relative; }
.vs-mbtn { height: 38px; width: 208px; padding: 0 14px 0 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); display: flex; align-items: center; gap: 10px; font: inherit; font-size: 15px; color: var(--text); cursor: pointer; }
.vs-mbtn .i { font-size: 16px; color: var(--text-2); }
.vs-mbtn .i:last-child { margin-left: auto; transition: transform 0.15s; }
.vs-mlabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-mbtn[aria-expanded="true"] { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.12); }
.vs-mbtn[aria-expanded="true"] .i:last-child { transform: rotate(180deg); }
.vs-mbtn.is-set { border-color: #BFCBFF; background: var(--indigo-bg-2); color: var(--indigo); font-weight: 600; }
.vs-mbtn.is-set .i { color: var(--indigo); }
.vs-pop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(23, 27, 45, 0.14); }
.vs-pop[hidden] { display: none; }
.vs-pop button { width: 100%; height: 36px; padding: 0 10px; border-radius: 7px; border: 0; background: none; display: flex; align-items: center; gap: 10px; font: inherit; font-size: 14px; color: var(--text); text-align: left; cursor: pointer; }
.vs-pop button:hover, .vs-pop button:focus-visible { background: var(--indigo-bg-2); outline: none; }
.vs-pop button .i { font-size: 15px; color: var(--indigo); visibility: hidden; stroke-width: 2.4; flex: none; }
.vs-pop button[aria-checked="true"] { font-weight: 600; color: var(--indigo); }
.vs-pop button[aria-checked="true"] .i { visibility: visible; }
.vs-pop .n { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.vs-pop button.is-zero { color: var(--muted); }
.vs-pop .sep { height: 1px; background: var(--border-soft); margin: 4px 2px; }
.vs-more { height: 44px; font-size: 15.5px; padding: 0 18px; gap: 10px; box-shadow: 0 4px 12px rgba(59, 91, 253, 0.2); }
.vs-more .i { font-size: 18px; }
.vs-more:disabled { background: #7F95FF; cursor: progress; }
.vs-strip { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 12px 16px; border-radius: 12px; background: var(--indigo-bg-2); border: 1px solid #D7DEFF; color: var(--text-2); font-size: 15px; font-weight: 500; }
.vs-strip[hidden] { display: none; }
.vs-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #C7D1FF; border-top-color: var(--indigo); animation: pi-spin 0.8s linear infinite; flex: none; }

/* 48 · the board: three columns of 452 × 220 cards */
.vs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vs-card { position: relative; display: grid; grid-template-columns: 158px minmax(0, 1fr); grid-template-rows: 158px auto; column-gap: 20px; row-gap: 12px; min-height: 220px; padding: 16px 16px 14px 16px; border-radius: 10px; transition: border-color 0.15s, box-shadow 0.15s; }
.vs-card[hidden] { display: none; }
.vs-card:hover { border-color: #CDD5F5; }
.vs-card.is-chosen { border-color: var(--indigo); box-shadow: inset 0 0 0 1px var(--indigo), 0 4px 16px rgba(59, 91, 253, 0.1); }
.vs-card.is-new { animation: pi-in 0.45s ease both; }
.vs-card .pi-cover { width: 158px; height: 158px; border-radius: 6px; grid-row: 1; grid-column: 1; }
.vs-card .pi-cover .pi-cv-mark { left: 13px; top: 12px; font-size: 14px; }
.vs-card .pi-cover .pi-cv-h { left: 13px; top: 34px; font-size: 17px; }
.vs-card .pi-cover .pi-cv-art { height: 60%; }
.vs-dur { grid-row: 2; grid-column: 1; align-self: center; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.vs-dur .i { font-size: 17px; color: var(--muted); }
.vs-body { grid-row: 1; grid-column: 2; min-width: 0; display: flex; flex-direction: column; }
.vs-trow { display: flex; align-items: flex-start; gap: 8px; }
.vs-trow h3 { flex: 1 1 auto; min-width: 0; margin: 3px 0 0; font-size: 18px; font-weight: 800; letter-spacing: -0.3px; line-height: 1.25; }
.vs-bm { width: 30px; height: 30px; margin: -2px -6px 0 0; border-radius: 7px; border: 0; background: none; display: grid; place-items: center; color: var(--indigo); flex: none; cursor: pointer; }
.vs-bm:hover { background: var(--indigo-bg-2); }
.vs-bm .i { font-size: 21px; transition: fill 0.15s; }
.vs-bm[aria-pressed="true"] .i { fill: var(--indigo); }
.vs-hook { margin: 9px 0 0; font-size: 15.5px; font-weight: 700; line-height: 1.3; }
.vs-story { margin: 12px 0 0; font-size: 15px; line-height: 1.4; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vs-acts { grid-row: 2; grid-column: 2; display: flex; gap: 8px; align-items: center; }
.vs-acts > button { height: 34px; font-size: 14.5px; padding: 0 12px; justify-content: center; box-shadow: none; gap: 8px; white-space: nowrap; }
.vs-acts .btn-outline { min-width: 104px; }
.vs-acts .btn-primary { min-width: 126px; }
.vs-acts .btn-primary .i { font-size: 16px; }
.vs-acts .btn-primary.is-chosen { background: var(--green); cursor: default; }
.vs-badge { position: absolute; top: 24px; left: 166px; transform: translateX(-100%); z-index: 3; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; background: rgba(255, 255, 255, 0.95); color: var(--indigo); box-shadow: 0 1px 3px rgba(14, 27, 61, 0.2); }
.vs-badge .i { font-size: 12px; stroke-width: 2.6; }
.vs-badge.is-chosen { background: var(--indigo); color: #fff; }
.vs-badge[hidden] { display: none; }
.vs-card.is-skel { background: #FCFCFE; }
.vs-card.is-skel .vs-sk.pic2 { width: 158px; height: 158px; border-radius: 6px; }
.vs-card.is-skel .vs-sk { background: linear-gradient(90deg, #EDEFF4 0%, #F6F7FA 45%, #EDEFF4 90%); background-size: 240% 100%; animation: pi-shimmer 1.4s linear infinite; }
.vs-card.is-skel .vs-sk.t { width: 60%; height: 14px; margin-top: 6px; } .vs-card.is-skel .vs-sk.h { width: 44%; height: 12px; margin-top: 14px; }
.vs-card.is-skel .vs-sk.l { width: 94%; height: 10px; margin-top: 14px; } .vs-card.is-skel .vs-sk.l.s { width: 70%; margin-top: 9px; }
.vs-none { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 44px 20px 40px; text-align: center; }
.vs-none[hidden] { display: none; }
.vs-none-ic { width: 52px; height: 52px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; margin-bottom: 6px; }
.vs-none-ic .i { font-size: 24px; }
.vs-none h2 { margin: 0; font-size: 19px; font-weight: 700; }
.vs-none p { margin: 0 0 10px; font-size: 15px; color: var(--muted); }
.vs-none .btn-outline { height: 40px; font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
  .vs-pd, .vs-mbtn .i, .vs-bm .i { transition: none; }
  .vs-pstep.is-active .vs-pd::before, .vs-mini.is-skel.is-live .vs-sk, .vs-mini.is-in, .vs-card.is-new, .vs-card.is-skel .vs-sk { animation: none; }
  .vs-spin { animation-duration: 2.4s; }
}
@media (max-width: 1500px) {
  .vs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .vs-cols { grid-template-columns: minmax(0, 1fr); }
  .vs-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .vs-subnav.ct-subnav { overflow-x: auto; }
  .vs-head .sub { font-size: 16px; }
  .vs-head-board { flex-direction: column; align-items: stretch; }
  .vs-tools { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 4px; }
  .vs-mbtn { width: 100%; height: 44px; } .vs-more { justify-content: center; height: 48px; }
  .vs-steps { padding: 0 12px; }
  .vs-steps .pw-step:not(.is-active) .pw-sl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vs-steps .pw-step:not(:last-child)::after { margin: 0 8px; }
  .vs-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs-mini { height: auto; min-height: 188px; }
  .vs-fail { flex-wrap: wrap; }
  .vs-foot { flex-wrap: wrap; }
  .vs-info { flex-basis: 100%; flex-wrap: wrap; }
  .vs-foot .vs-exit, .vs-foot .vs-bg { flex: 1 1 0; justify-content: center; height: 48px; }
  .vs-in { height: 44px; }
}
@media (max-width: 430px) {
  .vs-card { grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; padding: 12px; min-height: 0; }
  .vs-card .pi-cover { width: 112px; height: 112px; }
  .vs-card .pi-cover .pi-cv-mark { left: 9px; top: 9px; font-size: 11px; }
  .vs-card .pi-cover .pi-cv-h { left: 9px; top: 26px; font-size: 13px; }
  .vs-trow h3 { font-size: 16.5px; } .vs-hook { font-size: 14.5px; margin-top: 6px; } .vs-story { font-size: 14px; margin-top: 6px; }
  .vs-acts { grid-column: 1 / -1; grid-row: 3; }
  .vs-acts > button { flex: 1 1 0; height: 44px; min-width: 0; padding: 0 8px; }
  .vs-dur { grid-row: 2; }
  .vs-badge { top: 18px; left: 118px; }
  .vs-card.is-skel .vs-sk.pic2 { width: 112px; height: 112px; }
}

/* ---------- Content-49 · Video script sheet (vsh-) — the 936 px panel over the script board, plan plans/Content-49.md; .vsh-comp is the scene composition shared by Content-49 … 53 ---------- */
/* the scene composition: a brand pack drawing, the TH mark and the scene's on-screen text; sized by its own width (container units) */
.vsh-comp { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-mid: #193F94; position: relative; margin: 0; overflow: hidden; border-radius: 6px; container-type: inline-size;
  color: #fff; isolation: isolate; background: radial-gradient(120% 110% at 78% 95%, #1E3A8A 0%, #0E1B3D 62%); }
.vsh-comp.t-blue { background: linear-gradient(118deg, #2563EB 0%, #193F94 62%, #0E1B3D 100%); }
.vsh-comp.t-light { background: linear-gradient(160deg, #FFFFFF 0%, #F1F5F9 48%, #D6E2FB 100%); color: #0E1B3D; }
.vsh-comp.t-none { background: linear-gradient(135deg, #2F5BFF 0%, #173597 60%, #0E1B3D 100%); }
.vsh-comp-art { position: absolute; inset: 0; z-index: 0; }
.vsh-comp-art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vsh-comp::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(8, 17, 45, 0.72) 0%, rgba(8, 17, 45, 0.12) 52%, rgba(8, 17, 45, 0) 70%); pointer-events: none; }
.vsh-comp.t-light::after { background: linear-gradient(0deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 58%); }
.vsh-comp-mark { position: absolute; left: 5cqw; top: 5cqw; z-index: 2; width: 10cqw; height: 10cqw; border-radius: 2cqw; background: #2F5BFF; color: #fff; font-size: 4cqw; font-weight: 800;
  letter-spacing: -0.02em; display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); }
.vsh-comp-t { position: absolute; left: 5cqw; right: 6cqw; bottom: 4.5cqw; z-index: 2; font-size: 7.4cqw; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.vsh-comp.t-light .vsh-comp-t { text-shadow: none; }
/* the generated keyframe (Content-51): the text at the right, the mark at the bottom right, the "Keyframe" tag */
.vsh-comp.is-key::after { background: linear-gradient(270deg, rgba(8, 17, 45, 0.78) 0%, rgba(8, 17, 45, 0.2) 48%, rgba(8, 17, 45, 0) 64%); }
.vsh-comp.is-key .vsh-comp-t { left: 56%; right: 5cqw; top: 11cqw; bottom: auto; font-size: 8.6cqw; line-height: 1.08; -webkit-line-clamp: 3; }
.vsh-comp.is-key .vsh-comp-mark { left: auto; right: 5cqw; top: auto; bottom: 5cqw; width: auto; height: auto; padding: 0; background: none; box-shadow: none; font-size: 4.2cqw; opacity: 0.9; }
.vsh-comp.is-key .vsh-comp-art svg { transform: scale(1.12); transform-origin: 30% 60%; }
.vsh-comp.is-ref::after { display: none; }
.vsh-comp-tag { position: absolute; left: 4cqw; top: 4cqw; z-index: 3; padding: 0.8cqw 2.4cqw; border-radius: 99px; background: rgba(255, 255, 255, 0.92); color: #1E3A8A;
  font-size: max(9px, 3.4cqw); font-weight: 700; letter-spacing: 0.01em; }
.vsh-comp.is-key .vsh-comp-tag, .vsh-comp.is-ref .vsh-comp-tag { display: block; }
/* the brand end card */
.vsh-comp.vsh-end { background: linear-gradient(118deg, #1D4FF2 0%, #1737B8 55%, #0E1B3D 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.vsh-comp.vsh-end::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px); background-size: 14px 14px; }
.vsh-comp.vsh-end::after { display: none; }
.vsh-end-in { position: relative; z-index: 2; display: flex; align-items: center; gap: 3.4cqw; font-size: 7.4cqw; font-weight: 700; letter-spacing: -0.02em; }
.vsh-end-tile { width: 12cqw; height: 12cqw; border-radius: 2.4cqw; background: #2F5BFF; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4); display: grid; place-items: center; font-size: 5cqw; font-weight: 800; }
.vsh-end-cta { position: relative; z-index: 2; margin-top: 4cqw; font-size: 5.6cqw; font-weight: 600; }

/* the panel: the MM-41 frame at 936 px anchored right, centred vertically, the body scrolling */
html.vsh-lock { overflow: hidden; }
.vsh-backdrop { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: flex-end; padding: 16px 18px; background: rgba(23, 27, 45, 0.4); overscroll-behavior: contain; }
.vsh-panel { position: relative; width: 936px; max-width: 100%; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); box-sizing: border-box; display: flex; flex-direction: column;
  background: var(--surface); border-radius: 10px; box-shadow: 0 24px 60px rgba(23, 27, 45, 0.24); }
.vsh-panel:focus { outline: none; }
.vsh-panel :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.vsh-head { flex: none; height: 52px; display: flex; align-items: center; padding: 0 60px 0 24px; border-bottom: 1px solid var(--border-soft); }
.vsh-head h2 { margin: 0; font-size: 20px; font-weight: 800; line-height: 26px; letter-spacing: -0.3px; color: var(--text); }
.vsh-close { position: absolute; top: 7px; right: 12px; width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); background: none; border: 0; cursor: pointer; }
.vsh-close .i { font-size: 22px; } .vsh-close:hover { background: var(--border-soft); }
.vsh-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 24px; }
/* the scene rows: range + chip · picture · visual / camera · rule · spoken / on-screen */
.vsh-rows { list-style: none; margin: 0; padding: 0; }
.vsh-row { display: grid; grid-template-columns: 92px 246px minmax(0, 1fr) 1px minmax(0, 1fr); column-gap: 25px; align-items: stretch; min-height: 168px; padding: 14px 0 15px; border-bottom: 1px solid var(--border); box-sizing: border-box; }
.vsh-row:last-child { border-bottom-color: var(--border); }
.vsh-when { display: flex; flex-direction: column; align-items: flex-start; }
.vsh-range { font-size: 18px; font-weight: 800; line-height: 24px; letter-spacing: -0.2px; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vsh-chip { margin-top: 10px; height: 30px; padding: 0 15px; border-radius: 15px; background: #EEF0F5; color: var(--text-2); font-size: 13.5px; font-weight: 500; display: inline-flex; align-items: center; }
.vsh-chip.c-close { background: #EEF1FF; color: var(--indigo); }
.vsh-pic { width: 246px; height: 138px; align-self: start; }
.vsh-col { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; min-width: 0; padding-top: 1px; }
.vsh-rule { background: var(--border); margin: 2px 0; }
.vsh-col h3 { margin: 0; font-size: 14.5px; font-weight: 700; line-height: 19px; color: var(--text); }
.vsh-col p { margin: 2px 0 0; font-size: 14.5px; line-height: 19px; color: var(--text-2); overflow-wrap: anywhere; }
.vsh-col p.is-empty { color: var(--muted); }
/* the reference frames: one per scene + the brand end card */
.vsh-frames { padding: 16px 0 4px; }
.vsh-frames h3 { margin: 0 0 8px; font-size: 14.5px; font-weight: 700; color: var(--text); }
.vsh-frames ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.vsh-frames li .vsh-comp { height: 90px; }
.vsh-frames .vsh-comp-t { font-size: 8.4cqw; }
/* the footer: Cancel left; Edit script + Generate video right */
.vsh-foot { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 24px 14px; }
.vsh-foot > button { height: 44px; padding: 0 20px; gap: 10px; font-size: 16px; font-weight: 500; border-radius: 8px; white-space: nowrap; box-shadow: none; display: inline-flex; align-items: center; }
.vsh-foot .vsh-cancel { margin-right: auto; border: 1px solid #D5DAE4; color: var(--text); }
.vsh-foot .vsh-edit { border: 1px solid #D5DAE4; color: var(--indigo); min-width: 142px; justify-content: center; }
.vsh-foot .vsh-edit .i, .vsh-foot .vsh-go .i { font-size: 19px; }
.vsh-foot .vsh-go { min-width: 176px; justify-content: center; }
.vsh-foot .vsh-go[aria-disabled="true"] { opacity: 0.85; cursor: progress; }
/* phones: a bottom sheet, the rows stacked, the frames two by two */
@media (max-width: 768px) {
  .vsh-backdrop { align-items: flex-end; justify-content: stretch; padding: 0; }
  .vsh-panel { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 16px 16px 0 0; }
  .vsh-head { height: auto; min-height: 56px; padding: 12px 56px 12px 16px; }
  .vsh-head h2 { font-size: 18px; }
  .vsh-close { top: 6px; right: 6px; width: 44px; height: 44px; }
  .vsh-body { padding: 0 16px; }
  .vsh-row { grid-template-columns: minmax(0, 1fr); row-gap: 10px; padding: 14px 0; }
  .vsh-when { flex-direction: row; align-items: center; gap: 10px; }
  .vsh-chip { margin-top: 0; }
  .vsh-pic { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .vsh-rule { display: none; }
  .vsh-col { gap: 8px; }
  .vsh-frames ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .vsh-foot { flex-wrap: wrap; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); gap: 8px; }
  .vsh-foot > button { height: 48px; flex: 1 1 40%; min-width: 0; padding: 0 12px; }
  .vsh-foot .vsh-cancel { margin-right: 0; }
  .vsh-foot .vsh-go { flex-basis: 100%; order: -1; }
}

/* ---------- Content-50 · Edit video script (vse-) — the 604 px drawer over the script board, plan plans/Content-50.md; the pictures are Content-49's vsh-comp ---------- */
.vse-backdrop { position: fixed; inset: 0; z-index: 64; background: rgba(23, 27, 45, 0.36); }
.vse-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 65; width: 604px; max-width: 100vw; box-sizing: border-box; display: flex; flex-direction: column;
  background: var(--surface); box-shadow: -12px 0 40px rgba(23, 27, 45, 0.18); }
.vse-drawer:focus { outline: none; }
.vse-drawer :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.vse-drawer.is-busy { cursor: progress; }
/* the head: 60 px, the 26 px / 800 title, the ×, the rule inset like the drawing */
.vse-head { position: relative; flex: none; height: 60px; display: flex; align-items: center; margin: 0 24px; padding-right: 44px; border-bottom: 1px solid var(--border); }
.vse-head h2 { margin: 0; font-size: 26px; font-weight: 800; line-height: 32px; letter-spacing: -0.5px; color: var(--text); }
.vse-close { position: absolute; top: 11px; right: -8px; width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); background: none; border: 0; cursor: pointer; }
.vse-close .i { font-size: 22px; } .vse-close:hover { background: var(--border-soft); }
.vse-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 12px 24px 16px; }
/* the script card: the 164 × 88 picture, the inline title, the meta line, the story line */
.vse-card { display: grid; grid-template-columns: 164px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 0 0 12px; }
.vse-card .vsh-comp.vse-pic { width: 164px; height: 88px; }
.vse-title-in { display: block; width: 100%; box-sizing: border-box; height: 32px; margin: 4px 0 0 -7px; padding: 0 6px; border: 1px solid transparent; border-radius: 6px; background: none;
  font: inherit; font-size: 20px; font-weight: 800; letter-spacing: -0.3px; color: var(--text); }
.vse-title-in:hover { border-color: #E3E6ED; }
.vse-title-in:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.15); background: #fff; }
.vse-title-in[aria-invalid="true"] { border-color: var(--red); }
.vse-meta { margin: 4px 0 0; font-size: 14px; line-height: 18px; color: var(--muted); }
.vse-story { margin: 3px 0 0; font-size: 14px; line-height: 19px; color: var(--text-2); }
/* the scene accordion: 1 px cards, radius 10, the 36 px disc (indigo when open) */
.vse-scenes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.vse-sc { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.vse-sc-hh { margin: 0; font: inherit; }
.vse-sc-h { width: 100%; display: flex; align-items: center; gap: 16px; min-height: 66px; padding: 8px 16px 8px 14px; background: none; border: 0; border-radius: 10px; text-align: left; cursor: pointer; font: inherit; color: var(--text); }
.vse-sc-h:hover { background: #FAFBFD; }
.vse-disc { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #F1F3F7; border: 1px solid #E3E6ED; color: var(--text-2); font-size: 15.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vse-sc.is-open .vse-disc { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.vse-sc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vse-sc-l { display: flex; align-items: baseline; gap: 7px; font-size: 15px; line-height: 20px; color: var(--text); font-variant-numeric: tabular-nums; }
.vse-sc-l b { font-weight: 600; }
.vse-sc.is-open .vse-sc-l b { color: var(--indigo); }
.vse-dot { color: var(--muted); }
.vse-sc-t small { font-size: 13.5px; line-height: 18px; color: var(--muted); }
.vse-flag { color: #C0263D; } .vse-flag[hidden] { display: none; } .vse-flag .i { font-size: 18px; }
.vse-chev { width: 28px; height: 28px; display: grid; place-items: center; color: var(--text-2); transition: transform 0.15s; }
.vse-chev .i { font-size: 20px; }
.vse-sc.is-open .vse-chev { transform: rotate(180deg); color: var(--indigo); }
.vse-sc-b { padding: 0 16px 16px; }
.vse-sc-b[hidden] { display: none; }
/* the fields: labels 15 px / 700 with the red asterisk, the 68 px textareas, 40 px inputs, counters 12.5 px right-aligned */
.vse-f { display: flex; flex-direction: column; min-width: 0; margin-top: 6px; }
.vse-lrow { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-height: 26px; margin-bottom: 4px; }
.vse-lrow .vse-lbl { white-space: nowrap; }
.vse-lbl { padding: 0; font-size: 15px; font-weight: 700; line-height: 20px; color: var(--text); }
.vse-req { color: #E5484D; margin-left: 3px; }
.vse-in { display: block; width: 100%; box-sizing: border-box; height: 40px; padding: 0 12px; border: 1px solid #D5DAE4; border-radius: 7px; background: var(--surface); font: inherit; font-size: 14.5px; color: var(--text); }
.vse-ta { height: auto; min-height: 68px; padding: 10px 12px; line-height: 1.4; resize: vertical; }
.vse-in:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.15); }
.vse-in[aria-invalid="true"] { border-color: var(--red); }
.vse-in:disabled { background: #F7F8FB; color: var(--muted); }
.vse-f.is-rw .vse-in { border-color: #B9C6FF; background: #F7F9FF; }
.vse-u { display: flex; align-items: flex-start; gap: 12px; min-height: 18px; margin-top: 4px; }
.vse-count { margin-left: auto; font-size: 12.5px; line-height: 18px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vse-count.is-over { color: #C0263D; font-weight: 600; }
.vse-err { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13.5px; line-height: 18px; color: #C0263D; }
.vse-err[hidden] { display: none; } .vse-err .i { font-size: 15px; flex: none; }
.vse-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; }
/* the "Rewritten" chip and "Undo rewrite" */
.vse-rw { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 6px; background: var(--indigo-bg); color: var(--indigo); font-size: 12.5px; font-weight: 600; }
.vse-rw .i { font-size: 13px; } .vse-rw[hidden] { display: none; }
.vse-undo { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border: 0; border-radius: 6px; background: none; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.vse-undo .i { font-size: 14px; } .vse-undo:hover { background: var(--border-soft); color: var(--text); } .vse-undo[hidden] { display: none; }
/* the AI box: tinted indigo, radius 8 */
.vse-ai { margin-top: 12px; padding: 11px 12px 10px; border-radius: 8px; background: #F2F5FF; }
.vse-ai-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 15px; font-weight: 500; color: var(--indigo); }
.vse-ai-h .i { font-size: 18px; }
.vse-ai .vse-in { border-color: #D9DFF2; }
.vse-scope { margin: 12px 0 0; padding: 0; border: 0; min-width: 0; }
.vse-scope legend { margin-bottom: 8px; }
.vse-radios { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 20px; }
.vse-radio { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; align-items: center; cursor: pointer; }
.vse-radio input { width: 20px; height: 20px; margin: 0; accent-color: var(--indigo); cursor: pointer; }
.vse-r-t { font-size: 15px; font-weight: 500; line-height: 20px; color: var(--text); }
.vse-r-d { grid-column: 2; font-size: 13.5px; line-height: 18px; color: var(--muted); }
.vse-radio:has(input:focus-visible) { outline: 2px solid var(--indigo); outline-offset: 3px; border-radius: 6px; }
.vse-cta { margin-top: 14px; }
.vse-hint { margin: 5px 0 0; font-size: 13.5px; line-height: 18px; color: var(--muted); }
.vse-cta .vse-err { margin-top: 4px; }
/* the footer: Cancel left; the AI button + Save right */
.vse-foot { flex: none; display: flex; align-items: center; gap: 12px; min-height: 72px; box-sizing: border-box; padding: 12px 24px; border-top: 1px solid var(--border); background: var(--surface); }
.vse-foot > button { height: 44px; padding: 0 20px; gap: 10px; font-size: 16px; font-weight: 500; border-radius: 8px; white-space: nowrap; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; }
.vse-foot .vse-cancel { margin-right: auto; border: 1px solid #D5DAE4; color: var(--text); min-width: 88px; }
.vse-foot .vse-ai-btn { border: 1px solid #D5DAE4; color: var(--indigo); min-width: 158px; }
.vse-foot .vse-ai-btn.is-off, .vse-foot .vse-ai-btn[aria-disabled="true"] { color: #9AA6D6; cursor: not-allowed; }
.vse-foot .vse-save { min-width: 124px; }
.vse-foot .vse-save[aria-disabled="true"] { opacity: 0.85; cursor: progress; }
.vse-sum { margin: 0 4px 0 0; font-size: 13.5px; color: #C0263D; font-weight: 500; }
.vse-sum[hidden] { display: none; }
.vse-spin { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgba(59, 91, 253, 0.3); border-top-color: var(--indigo); animation: spin 0.8s linear infinite; flex: none; }
.vse-save .vse-spin { border-color: rgba(255, 255, 255, 0.45); border-top-color: #fff; }
@media (prefers-reduced-motion: reduce) { .vse-spin { animation: none; } .vse-chev { transition: none; } }
/* phones: the drawer takes the width, the footer wraps, 44 px targets */
@media (max-width: 768px) {
  .vse-drawer { width: 100vw; }
  .vse-head { margin: 0 16px; height: 56px; } .vse-head h2 { font-size: 21px; }
  .vse-close { width: 44px; height: 44px; top: 6px; right: -10px; }
  .vse-body { padding: 12px 16px 16px; }
  .vse-card { grid-template-columns: 112px minmax(0, 1fr); column-gap: 12px; }
  .vse-card .vsh-comp.vse-pic { width: 112px; height: 64px; }
  .vse-title-in { font-size: 17px; height: 36px; }
  .vse-sc-h { gap: 12px; padding: 8px 12px; }
  .vse-sc-b { padding: 0 12px 14px; }
  .vse-pair { grid-template-columns: minmax(0, 1fr); }
  .vse-in { height: 44px; font-size: 16px; } .vse-ta { height: auto; }
  .vse-radios { grid-template-columns: minmax(0, 1fr); }
  .vse-foot { flex-wrap: wrap; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); gap: 8px; }
  .vse-foot > button { height: 48px; flex: 1 1 30%; min-width: 0; padding: 0 10px; }
  .vse-foot .vse-cancel { margin-right: 0; }
  .vse-foot .vse-ai-btn { min-width: 0; }
  .vse-sum { flex-basis: 100%; order: -1; }
}

/* ---------- Content-46 … 50 production additions: real pack images inside the prototype's drawings' slots ---------- */
.va-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.va-f-cstyle .va-err { grid-column: 2; }
.va-foot .va-back { display: inline-flex; align-items: center; }
.vs-mono.has-logo { background: #fff; border: 1px solid var(--border); }
.vs-mono.has-logo.is-dark { background: var(--cg-dark); }
.vs-mono img { width: 78%; height: 78%; object-fit: contain; display: block; }
.vs-card { cursor: pointer; }
.vs-card:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.vs-fail.vs-board-fail { margin: 0 0 12px; }
.vs-fail.is-info { background: var(--indigo-bg-2); border-color: #D7DEFF; color: var(--text-2); }
.vs-fail.is-info .vs-fail-ic { color: var(--indigo); }
.vsh-comp-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vsh-skel { padding: 16px 0; }
.vsh-fail, .vse-fail { padding: 16px 0; }
.vse-card-pic .vsh-comp { width: 164px; height: 88px; }
.vse-ai-btn.is-pending::before { border-color: #DCE3FF; border-top-color: var(--indigo); }
@media (max-width: 768px) { .va-f-cstyle .va-err { grid-column: 1; } .vse-card-pic .vsh-comp { width: 112px; height: 64px; } }

/* ---------- Content-51 · Storyboard and references (vsb-) — Content module, plan plans/Content-51.md; the keyframes are Content-49's vsh-comp ---------- */
.vsb-root { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-mid: #193F94; }
/* the head: eyebrow, 32 px title, 18 px lead; "Generate keyframe" (44 px, outline primary) at the right */
.vsb-head { align-items: flex-start; padding-bottom: 14px; }
.vsb-head > div:first-child { flex: 1; min-width: 0; }
.vsb-head .eyebrow { font-size: 13px; }
.vsb-head h1 { font-size: 32px; }
.vsb-head .sub { font-size: 18px; }
.vsb-kf { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-top: 6px; }
.vsb-kbtn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 44px; min-width: 208px; padding: 0 22px; border: 1px solid #C9D3FF; border-radius: 8px;
  background: var(--surface); color: var(--indigo); font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; box-shadow: 0 1px 2px rgba(23, 27, 45, 0.05); }
.vsb-kbtn .i { font-size: 21px; }
.vsb-kbtn:hover:not(:disabled) { background: #F7F8FF; border-color: #AFC0FF; }
.vsb-kbtn:disabled { color: #9AA6D6; border-color: #E0E5F5; cursor: not-allowed; }
.vsb-kbtn[aria-busy="true"] { cursor: progress; }
.vsb-key-note { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13.5px; color: var(--amber-text, #8A5A00); }
.vsb-key-note[hidden] { display: none; }
.vsb-key-note .i { font-size: 15px; } .vsb-key-note a { color: var(--indigo); font-weight: 600; }
/* two columns: the subnav, the scene cards, the timeline and Back | the details panel and the primary */
.vsb-grid { display: grid; grid-template-columns: minmax(0, 1fr) 332px; column-gap: 16px; align-items: stretch; }
.vsb-main { min-width: 0; display: flex; flex-direction: column; }
.vsb-side { min-width: 0; display: flex; flex-direction: column; }
/* the scene cards: three in a row, radius 12 */
.vsb-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vsb-card { position: relative; display: flex; flex-direction: column; padding: 0 16px 14px; border-radius: 12px; border: 1px solid var(--border); cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s; }
.vsb-card:hover { border-color: #C9D2EA; }
.vsb-card.is-selected { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo); }
.vsb-card.is-invalid { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.vsb-ch { display: flex; align-items: center; gap: 12px; height: 46px; }
.vsb-ch h2 { margin: 0; font-size: 15.5px; font-weight: 600; color: var(--text); }
.vsb-sel { all: unset; cursor: pointer; border-radius: 6px; }
.vsb-sel:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.vsb-range { height: 26px; padding: 0 12px; border-radius: 6px; background: var(--indigo-bg); color: var(--indigo); font-size: 13.5px; font-weight: 500; display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; }
.vsb-dots { margin-left: auto; width: 32px; height: 32px; border-radius: 7px; border: 0; background: none; color: var(--text-2); display: grid; place-items: center; cursor: pointer; }
.vsb-dots .i { font-size: 20px; } .vsb-dots:hover, .vsb-dots[aria-expanded="true"] { background: var(--border-soft); }
.vsb-pic { position: relative; }
.vsb-pic .vsh-comp { width: 100%; aspect-ratio: 344 / 174; }
.vsb-desc { margin: 10px 0 0; min-height: 38px; font-size: 14px; line-height: 19px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.vsb-desc.is-empty { color: var(--muted); font-style: italic; }
.vsb-rl { margin: 12px 0 7px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.vsb-refs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vsb-ref { min-width: 0; }
.vsb-ref .vsh-comp, .vsb-ref .vsb-logo { width: 100%; aspect-ratio: 104 / 64; }
.vsb-ref span.vsb-rn { display: block; margin-top: 5px; font-size: 13px; line-height: 16px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the logo reference: the TH tile */
.vsb-logo { position: relative; display: grid; place-items: center; border-radius: 6px; background: linear-gradient(135deg, #2F5BFF 0%, #1D46E0 100%); color: #fff; font-weight: 800; letter-spacing: -0.02em; container-type: inline-size; }
.vsb-logo b { font-size: 26cqw; }
/* the keyframe states: generating (the spinner over the picture), failed (the red corner) */
.vsb-gen { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: 6px;
  background: rgba(10, 18, 45, 0.62); color: #fff; font-size: 14px; font-weight: 600; }
.vsb-spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: spin 0.8s linear infinite; }
.vsb-btn-spin { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgba(59, 91, 253, 0.3); border-top-color: var(--indigo); animation: spin 0.8s linear infinite; flex: none; }
/* the ⋯ menu */
.vsb-menu { position: absolute; z-index: 20; top: 42px; right: 12px; min-width: 232px; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 30px rgba(23, 27, 45, 0.16); }
.vsb-menu[hidden] { display: none; }
.vsb-menu button { width: 100%; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 14.5px; color: var(--text); text-align: left; cursor: pointer; }
.vsb-menu button .i { font-size: 17px; color: var(--text-2); }
.vsb-menu button:hover:not(:disabled), .vsb-menu button:focus-visible { background: var(--border-soft); outline: none; }
.vsb-menu button:disabled { color: var(--muted); cursor: default; } .vsb-menu button:disabled .i { color: #C2C7D3; }
/* the timeline card: coloured segments over the 0 – 8 s ruler */
.vsb-tl { margin-top: 14px; padding: 12px 14px 10px; }
.vsb-tl-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.vsb-tl-h h2 { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--text); }
.vsb-total { margin-left: auto; font-size: 13.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.vsb-track { display: flex; gap: 4px; }
.vsb-seg { min-width: 0; display: flex; align-items: center; gap: 10px; height: 44px; padding: 3px 12px 3px 4px; box-sizing: border-box; border: 1px solid transparent; border-radius: 6px;
  font: inherit; text-align: left; cursor: pointer; color: var(--text); }
.vsb-seg.t-indigo { background: #E3E9FF; } .vsb-seg.t-violet { background: #EDE5FF; } .vsb-seg.t-sky { background: #DDF0FC; }
.vsb-seg:hover { filter: brightness(0.98); }
.vsb-seg.is-selected { border-color: var(--indigo); box-shadow: inset 0 0 0 1px var(--indigo); }
.vsb-seg:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.vsb-seg .vsh-comp { flex: none; width: 80px; height: 36px; border-radius: 4px; }
.vsb-seg-t { min-width: 0; display: flex; flex-direction: column; font-size: 13px; line-height: 16px; }
.vsb-seg-t b { font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }
.vsb-seg-t span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vsb-ruler { position: relative; height: 26px; margin-top: 6px; border-top: 1px solid #D5DAE4; }
.vsb-ruler i { position: absolute; top: 0; width: 1px; height: 5px; background: #C9CFDB; }
.vsb-ruler i.is-major { height: 8px; background: #9AA2B5; }
.vsb-ruler span { position: absolute; top: 10px; font-size: 12px; color: var(--text-2); transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.vsb-ruler span.is-first { transform: none; } .vsb-ruler span.is-last { transform: translateX(-100%); }
.vsb-foot-l { margin-top: 12px; }
.vsb-back { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px; border: 1px solid #D5DAE4; border-radius: 8px; font-size: 16px; font-weight: 500; color: var(--text); background: var(--surface); }
.vsb-back .i { font-size: 19px; }
/* the details panel */
.vsb-panel { flex: 1; padding: 12px 14px 16px; }
.vsb-p-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.vsb-p-h h2 { margin: 0; font-size: 16.5px; font-weight: 700; color: var(--text); }
.vsb-p-x { margin-left: auto; width: 32px; height: 32px; border-radius: 7px; border: 0; background: none; color: var(--text-2); display: grid; place-items: center; cursor: pointer; }
.vsb-p-x .i { font-size: 19px; } .vsb-p-x:hover { background: var(--border-soft); }
.vsb-p-pic { position: relative; }
.vsb-p-pic .vsh-comp { width: 100%; aspect-ratio: 306 / 162; }
.vsb-p-rows { margin: 14px 0 0; display: grid; grid-template-columns: 100px minmax(0, 1fr); row-gap: 10px; align-items: center; }
.vsb-p-rows dt { font-size: 14px; font-weight: 500; color: var(--text); }
.vsb-p-rows dd { margin: 0; }
.vsb-chip { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 6px; background: #F1F3F7; color: var(--text-2); font-size: 13.5px; font-weight: 500; }
.vsb-chip.is-time { background: var(--indigo-bg); color: var(--indigo); font-variant-numeric: tabular-nums; }
.vsb-p-desc { margin-top: 12px; display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: start; }
.vsb-p-desc label { font-size: 14px; font-weight: 500; color: var(--text); padding-top: 8px; }
.vsb-ta-w { position: relative; }
.vsb-ta { display: block; width: 100%; box-sizing: border-box; height: 100px; resize: vertical; padding: 8px 10px 20px; border: 1px solid #D5DAE4; border-radius: 7px; background: var(--surface);
  font: inherit; font-size: 13.5px; line-height: 1.35; color: var(--text); }
.vsb-ta:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.15); }
.vsb-ta[aria-invalid="true"] { border-color: var(--red); }
.vsb-count { position: absolute; right: 10px; bottom: 5px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; pointer-events: none; }
.vsb-count.is-over { color: #C0263D; font-weight: 600; }
.vsb-err { display: flex; align-items: center; gap: 6px; margin: 5px 0 0; font-size: 13px; line-height: 17px; color: #C0263D; }
.vsb-err[hidden] { display: none; } .vsb-err .i { font-size: 14px; flex: none; }
.vsb-p-desc .vsb-err { grid-column: 2; }
.vsb-p-rlh { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; }
.vsb-p-rl { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.vsb-addl { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; border: 0; border-radius: 6px; background: none; color: var(--indigo); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.vsb-addl .i { font-size: 15px; } .vsb-addl:hover { background: var(--indigo-bg); }
.vsb-addl[aria-disabled="true"] { color: var(--muted); cursor: not-allowed; } .vsb-addl[aria-disabled="true"]:hover { background: none; }
.vsb-p-refs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vsb-p-refs li { position: relative; min-width: 0; }
.vsb-p-refs .vsh-comp, .vsb-p-refs .vsb-logo, .vsb-add { width: 100%; aspect-ratio: 94 / 62; }
.vsb-p-refs .vsb-rn { display: block; margin-top: 5px; font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vsb-rx { position: absolute; top: 4px; right: 4px; z-index: 5; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(14, 27, 61, 0.72); color: #fff; display: grid; place-items: center; cursor: pointer; }
.vsb-rx .i { font-size: 14px; } .vsb-rx:hover { background: #C0263D; }
.vsb-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; box-sizing: border-box; border: 1.5px dashed #C9D2EA; border-radius: 6px; background: #FAFBFD;
  color: var(--indigo); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; }
.vsb-add .i { font-size: 18px; }
.vsb-add:hover { border-color: var(--indigo); background: #F5F7FF; }
.vsb-add[aria-disabled="true"] { color: var(--muted); border-color: #E0E3EA; cursor: not-allowed; background: #FAFBFD; }
.vsb-p-empty { display: grid; place-items: center; gap: 8px; min-height: 280px; text-align: center; color: var(--muted); font-size: 14.5px; }
.vsb-p-empty .i { font-size: 28px; color: #B7BECC; }
/* the footer at the right: the summary and "Review video generation" */
.vsb-foot-r { margin-top: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.vsb-next { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 44px; min-width: 228px; padding: 0 20px; font-size: 16px; font-weight: 500; border-radius: 8px; }
.vsb-next .i { font-size: 19px; }
.vsb-next[aria-disabled="true"] { opacity: 0.85; cursor: progress; }
.vsb-next .vsb-btn-spin { border-color: rgba(255, 255, 255, 0.45); border-top-color: #fff; }
.vsb-sum { margin: 0; font-size: 13.5px; font-weight: 500; color: #C0263D; }
.vsb-sum[hidden] { display: none; }
/* the reference picker (Content-27's picker, reduced for the prototype) */
@media (prefers-reduced-motion: reduce) { .vsb-spin, .vsb-btn-spin { animation: none; } .vsb-card { transition: none; } }
/* narrower screens: the panel under the scenes; phones: one scene per row, 44 px targets, no horizontal scroll */
@media (max-width: 1200px) {
  .vsb-grid { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .vsb-foot-r { align-items: stretch; }
}
@media (max-width: 768px) {
  .vsb-head { flex-direction: column; gap: 10px; }
  .vsb-head h1 { font-size: 26px; } .vsb-head .sub { font-size: 15.5px; }
  .vsb-kf { align-items: stretch; width: 100%; margin-top: 0; }
  .vsb-kbtn { width: 100%; }
  .vsb-cards { grid-template-columns: minmax(0, 1fr); }
  .vsb-dots { width: 44px; height: 44px; }
  .vsb-seg { padding-right: 6px; gap: 6px; }
  .vsb-seg .vsh-comp { display: none; }
  .vsb-seg-t { font-size: 12px; }
  .vsb-back, .vsb-next { width: 100%; justify-content: center; height: 48px; }
  .vsb-rx { width: 32px; height: 32px; }
  .vsb-p-rows, .vsb-p-desc { grid-template-columns: 88px minmax(0, 1fr); }
}

/* ---------- Content-52 / 53 · Generate this video? (vg-) and Generating your video. (vgn-) — the dialog over the storyboard and the progress page, plan plans/Content-52.md; the frames are Content-49's vsh-comp ---------- */
/* the portrait cover (52: 208 × 398, 53: 298 × 380): the brand, the title, scene 1's picture */
.vg-cover { --cg-primary: #2563EB; --cg-dark: #0E1B3D; position: relative; margin: 0; overflow: hidden; border-radius: 8px; color: #fff; isolation: isolate; container-type: inline-size;
  background: radial-gradient(130% 80% at 60% 100%, #1E3A8A 0%, #0E1B3D 70%); box-shadow: 0 2px 10px rgba(14, 27, 61, 0.2); }
.vg-cv-art { position: absolute; left: 0; right: 0; bottom: 0; height: 80%; z-index: 0; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%); mask-image: linear-gradient(180deg, transparent 0, #000 26%); }
.vg-cv-art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vg-cover::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.vg-cv-brand { position: absolute; left: 8.5cqw; top: 9cqw; z-index: 2; display: flex; align-items: center; gap: 3.4cqw; font-size: 8cqw; font-weight: 600; letter-spacing: -0.01em; }
.vg-cv-tile { width: 13.5cqw; height: 13.5cqw; border-radius: 2.6cqw; background: #2F5BFF; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); display: grid; place-items: center; font-size: 5.8cqw; font-weight: 800; }
.vg-cv-h { position: absolute; left: 8.5cqw; right: 8cqw; z-index: 2; font-size: 13.6cqw; font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.vg-cover.is-bottom::after { background: linear-gradient(0deg, rgba(8, 17, 45, 0.9) 0%, rgba(8, 17, 45, 0.3) 34%, rgba(8, 17, 45, 0) 52%); }
.vg-cover.is-bottom .vg-cv-h { bottom: 15cqw; }
.vg-cover.is-bottom .vg-cv-bar { position: absolute; left: 8.5cqw; bottom: 9cqw; z-index: 2; width: 23cqw; height: 1.9cqw; border-radius: 2px; background: #3B5BFD; }
.vg-cover.is-top .vg-cv-art { height: 58%; }
.vg-cover.is-top .vg-cv-h { top: 25cqw; font-size: 10.6cqw; }
.vg-cover.is-top .vg-cv-sub { position: absolute; left: 8.5cqw; right: 8cqw; top: 51cqw; z-index: 2; font-size: 4.8cqw; line-height: 1.3; font-weight: 500; opacity: 0.92; }
.vg-cv-ready { position: absolute; left: 50%; top: 58%; z-index: 3; transform: translate(-50%, -50%); width: 20cqw; height: 20cqw; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.92); color: var(--indigo); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); }
.vg-cv-ready .i { font-size: 9cqw; margin-left: 1cqw; }
.vg-cv-ready[hidden] { display: none; }

/* 52 · the dialog: the MM-41 frame at 686 px (radius 16, padding 24 px) */
html.vg-lock { overflow: hidden; }
.vg-backdrop { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(23, 27, 45, 0.45); overscroll-behavior: contain; }
.vg-dialog { position: relative; width: 686px; max-width: 100%; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); box-sizing: border-box; display: flex; flex-direction: column;
  background: var(--surface); border-radius: 16px; box-shadow: 0 24px 60px rgba(23, 27, 45, 0.22); }
.vg-dialog:focus { outline: none; }
.vg-dialog :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.vg-head { flex: none; display: flex; align-items: flex-start; gap: 16px; padding: 22px 60px 14px 24px; }
.vg-tile { width: 44px; height: 44px; flex: none; margin-top: 2px; border-radius: 10px; display: grid; place-items: center; background: var(--indigo-bg); color: var(--indigo); }
.vg-tile .i { font-size: 23px; }
.vg-head h2 { margin: 0; font-size: 26px; font-weight: 800; line-height: 32px; letter-spacing: -0.5px; color: var(--text); }
.vg-head p { margin: 4px 0 0; font-size: 16px; line-height: 22px; color: var(--text-2); }
.vg-close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); background: none; border: 0; cursor: pointer; }
.vg-close .i { font-size: 22px; } .vg-close:hover { background: var(--border-soft); }
.vg-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 8px 24px 0; }
.vg-strip { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: #FDECEE; color: #9B1C31; font-size: 14.5px; line-height: 20px; }
.vg-strip > .i { font-size: 18px; flex: none; margin-top: 1px; color: var(--red); }
.vg-strip p { margin: 0; }
.vg-strip a { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; font-weight: 600; color: var(--indigo); white-space: nowrap; }
.vg-strip a .i { font-size: 15px; } .vg-strip a:hover { text-decoration: underline; }
.vg-main { display: grid; grid-template-columns: 208px minmax(0, 1fr); column-gap: 23px; align-items: start; }
.vg-main .vg-cover { width: 208px; height: 398px; }
.vg-facts { margin: 8px 0 0; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; row-gap: 16px; column-gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.vg-facts div { min-width: 0; }
.vg-facts dt { font-size: 13px; line-height: 18px; color: var(--muted); }
.vg-facts dd { margin: 4px 0 0; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; line-height: 20px; color: var(--text); white-space: nowrap; }
.vg-facts dd .i { font-size: 19px; color: var(--text-2); }
.vg-lbl { margin: 16px 0 8px; font-size: 15px; font-weight: 600; color: var(--text); }
.vg-frames { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 128px)); justify-content: space-between; gap: 12px; }
.vg-frame { position: relative; min-width: 0; }
.vg-frame .vsh-comp { width: 100%; aspect-ratio: 128 / 102; }
.vg-num { position: absolute; left: 6px; top: 6px; z-index: 5; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--indigo); color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); }
.vg-rng { position: absolute; right: 6px; top: 6px; z-index: 5; padding: 1px 6px; border-radius: 5px; background: rgba(10, 18, 45, 0.62); color: #fff; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vg-frame p { margin: 6px 0 0; font-size: 12.5px; font-weight: 500; line-height: 16px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-refs { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.vg-refs li { width: 112px; }
.vg-refs .vsh-comp, .vg-refs .vsb-logo { width: 112px; height: 56px; }
.vg-refs .vg-logo { display: grid; place-items: center; width: 112px; height: 56px; border-radius: 6px; background: linear-gradient(135deg, #2F5BFF 0%, #1D46E0 100%); color: #fff; font-size: 22px; font-weight: 800; }
/* the collapsible rows: 52 px, tinted, radius 8 */
.vg-rows { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.vg-col { border-radius: 8px; background: #F5F7FB; }
.vg-col-h { width: 100%; min-height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 16px 0 18px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 15px; font-weight: 500; color: var(--text); text-align: left; cursor: pointer; }
.vg-col-h > .i { font-size: 19px; color: var(--text-2); }
.vg-col-h:hover { background: #EEF1F7; }
.vg-col-h .vg-chev { margin-left: auto; display: grid; place-items: center; width: 26px; height: 26px; transition: transform 0.15s; }
.vg-col-h .vg-chev .i { font-size: 19px; color: var(--text-2); }
.vg-col.is-open .vg-chev { transform: rotate(180deg); }
.vg-edited { padding: 1px 8px; border-radius: 6px; background: var(--indigo-bg); color: var(--indigo); font-size: 12.5px; font-weight: 600; }
.vg-edited[hidden] { display: none; }
.vg-col-b { padding: 2px 16px 14px 18px; }
.vg-col-b[hidden] { display: none; }
.vg-script { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vg-script li { padding: 10px 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); }
.vg-script h4 { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.vg-script dl { margin: 0; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 3px 10px; font-size: 13.5px; line-height: 18px; }
.vg-script dt { color: var(--muted); } .vg-script dd { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }
.vg-p-h { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.vg-p-h label { font-size: 14px; color: var(--text-2); }
.vg-reset { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text-2); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; }
.vg-reset .i { font-size: 15px; } .vg-reset:disabled { opacity: 0.45; cursor: default; }
.vg-ta { display: block; width: 100%; box-sizing: border-box; min-height: 200px; resize: vertical; padding: 10px 12px; border: 1px solid #D5DAE4; border-radius: 8px; background: var(--surface);
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text); }
.vg-ta:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.15); }
.vg-ta[aria-invalid="true"] { border-color: var(--red); }
.vg-u { display: flex; align-items: flex-start; gap: 12px; margin-top: 5px; min-height: 18px; }
.vg-err { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13.5px; color: #C0263D; }
.vg-err[hidden] { display: none; } .vg-err .i { font-size: 15px; }
.vg-count { margin-left: auto; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vg-count.is-over { color: #C0263D; font-weight: 600; }
/* the footer: Back (outline) · the estimate chip · Generate video */
.vg-foot { flex: none; display: flex; align-items: center; gap: 16px; padding: 20px 24px 22px; }
.vg-foot .vg-back { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; margin-right: auto; border: 1px solid #D5DAE4; border-radius: 8px; font-size: 15px; font-weight: 500; color: var(--text); background: var(--surface); }
.vg-foot .vg-back .i { font-size: 18px; }
.vg-est { display: inline-flex; align-items: center; gap: 18px; height: 34px; padding: 0 12px; border-radius: 7px; background: #EEF3FF; color: var(--indigo); font-size: 14.5px; font-weight: 500; }
.vg-est b { font-weight: 600; font-variant-numeric: tabular-nums; }
.vg-go { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; min-width: 170px; padding: 0 20px; font-size: 16px; font-weight: 500; border-radius: 8px; }
.vg-go .i { font-size: 19px; }
.vg-go:disabled { opacity: 0.5; cursor: not-allowed; }
.vg-go[aria-disabled="true"] { opacity: 0.85; cursor: progress; }
.vg-spin { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; animation: spin 0.8s linear infinite; flex: none; }

/* 53 · the page: the back link, the stepper card, three cards */
.vgn-root { --cg-primary: #2563EB; --cg-dark: #0E1B3D; }
.vgn-head { padding-bottom: 12px; }
.vgn-backlink { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 15px; font-weight: 500; color: var(--text-2); }
.vgn-backlink .i { font-size: 17px; } .vgn-backlink:hover { color: var(--text); }
.vgn-head h1 { font-size: 34px; }
.vgn-head .sub { font-size: 18px; }
.vgn-steps { height: 64px; display: flex; align-items: center; padding: 0 24px; margin-bottom: 16px; }
.vgn-steps ol { list-style: none; margin: 0 auto; padding: 0; width: 100%; max-width: 1130px; display: flex; align-items: center; }
.vgn-steps .pw-disc { width: 38px; height: 38px; font-size: 15.5px; }
.vgn-steps .pw-sl { margin-left: 16px; font-size: 16px; }
.vgn-steps .pw-step.is-done .pw-disc { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.vgn-steps .pw-step.is-done .pw-sl { color: var(--indigo); font-weight: 500; }
.vgn-steps .pw-step.is-done::after { background: var(--indigo); height: 2px; }
.vgn-steps .pw-step.is-active .pw-sl { font-weight: 600; }
.vgn-cols { display: grid; grid-template-columns: minmax(0, 452fr) minmax(0, 476fr) minmax(0, 486fr); gap: 16px; align-items: stretch; }
.vgn-card { padding: 18px 18px 20px; min-width: 0; }
.vgn-ch { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.vgn-ch h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; color: var(--text); }
.vgn-tile { width: 36px; height: 36px; flex: none; border-radius: 8px; display: grid; place-items: center; background: #F1F4FA; color: var(--indigo); }
.vgn-tile .i { font-size: 20px; }
.vgn-tile-plain { background: none; }
.vgn-tile-plain .i { font-size: 24px; }
.vgn-cover-w { display: flex; justify-content: center; }
.vgn-cover-w .vg-cover { width: 298px; max-width: 100%; aspect-ratio: 298 / 380; height: auto; }
/* the progress rail: 32 px discs on a 2 px track */
.vgn-rail { list-style: none; margin: 0; padding: 0 0 0 6px; }
.vgn-step { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 24px; padding-bottom: 20px; }
.vgn-step:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 36px; bottom: 2px; width: 2px; border-radius: 1px; background: #DCE2EE; }
.vgn-step.is-done:not(:last-child)::before { background: #B9C6FF; }
.vgn-disc { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; box-sizing: border-box; border: 2px solid #D5DAE4; background: #EEF0F4; color: #fff; }
.vgn-disc .i { font-size: 17px; display: none; }
.vgn-step.is-done .vgn-disc { background: var(--indigo); border-color: var(--indigo); }
.vgn-step.is-done .vgn-disc .i-ok { display: block; stroke-width: 2.6; }
.vgn-step.is-active .vgn-disc { background: #fff; border-color: var(--indigo); color: var(--indigo); box-shadow: 0 0 0 4px rgba(59, 91, 253, 0.12); }
.vgn-step.is-active .vgn-disc .i-run { display: block; font-size: 18px; animation: vgn-turn 2.4s linear infinite; }
.vgn-step.is-failed .vgn-disc { background: #D63A4E; border-color: #D63A4E; }
.vgn-step.is-failed .vgn-disc .i-bad { display: block; stroke-width: 2.6; }
.vgn-step.is-todo .vgn-disc::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #C9CFDA; }
@keyframes vgn-turn { to { transform: rotate(360deg); } }
.vgn-st { min-width: 0; padding-top: 3px; }
.vgn-st b { display: block; font-size: 17px; font-weight: 700; line-height: 22px; color: var(--text); }
.vgn-step.is-active .vgn-st b { color: var(--indigo); }
.vgn-step.is-failed .vgn-st b { color: #B42339; }
.vgn-step.is-todo .vgn-st b { color: var(--text-2); }
.vgn-st p { margin: 4px 0 0; font-size: 14.5px; line-height: 20px; color: var(--text-2); }
.vgn-st time { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vgn-st time:empty { display: none; }
.vgn-fail { margin-top: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.vgn-fail[hidden] { display: none; }
.vgn-fail p { margin: 0; color: #9B1C31; }
.vgn-retry { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid #D5DAE4; border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; }
.vgn-retry .i { font-size: 16px; }
/* the summary */
.vgn-sum-top { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 20px; align-items: start; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.vgn-mono { width: 76px; height: 76px; border-radius: 8px; background: #2F5BFF; color: #fff; font-size: 28px; font-weight: 800; letter-spacing: -0.5px; display: grid; place-items: center; }
.vgn-sum-top h3 { margin: 8px 0 0; font-size: 17px; font-weight: 700; color: var(--text); }
.vgn-sum-top p { margin: 5px 0 0; font-size: 14.5px; line-height: 21px; color: var(--text-2); }
.vgn-facts { margin: 10px 0 0; }
.vgn-facts div { display: grid; grid-template-columns: 24px 102px minmax(0, 1fr); column-gap: 14px; align-items: center; min-height: 34px; }
.vgn-facts .i { font-size: 20px; color: var(--text-2); }
.vgn-facts dt { font-size: 14.5px; color: var(--text-2); }
.vgn-facts dd { margin: 0; font-size: 15px; font-weight: 500; color: var(--text); }
.vgn-acts { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.vgn-acts > * { height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px; font-weight: 500; border-radius: 8px; width: 100%; box-sizing: border-box; }
.vgn-acts [hidden] { display: none; }
.vgn-job { border: 1px solid #D5DAE4; color: var(--text); background: var(--surface); }
@media (prefers-reduced-motion: reduce) { .vg-spin { animation: none; } .vg-col-h .vg-chev { transition: none; } .vgn-step.is-active .vgn-disc .i-run { animation: none; } }
/* narrower screens: the cards stack */
@media (max-width: 1180px) {
  .vgn-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vgn-sum { grid-column: 1 / -1; }
}
/* phones: the dialog becomes a bottom sheet; the page cards stack; no horizontal scroll */
@media (max-width: 768px) {
  .vg-backdrop { place-items: end stretch; padding: 0; }
  .vg-dialog { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 16px 16px 0 0; }
  .vg-head { gap: 12px; padding: 18px 56px 10px 16px; }
  .vg-tile { width: 38px; height: 38px; }
  .vg-head h2 { font-size: 21px; line-height: 27px; } .vg-head p { font-size: 14.5px; }
  .vg-close { top: 8px; right: 8px; width: 44px; height: 44px; }
  .vg-body { padding: 8px 16px 0; }
  .vg-main { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .vg-main .vg-cover { width: 150px; height: 287px; margin: 0 auto; }
  .vg-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
  .vg-frames { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .vg-refs li, .vg-refs .vsh-comp, .vg-refs .vg-logo { width: 92px; }
  .vg-col-h { min-height: 52px; }
  .vg-script dl { grid-template-columns: minmax(0, 1fr); }
  .vg-foot { flex-wrap: wrap; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .vg-foot .vg-back { flex: 1 1 40%; justify-content: center; height: 48px; margin-right: 0; }
  .vg-est { flex: 1 1 40%; justify-content: center; height: 48px; box-sizing: border-box; }
  .vg-go { flex-basis: 100%; height: 48px; }
  .vgn-head h1 { font-size: 26px; } .vgn-head .sub { font-size: 15.5px; }
  .vgn-steps { padding: 0 12px; height: auto; min-height: 56px; }
  .vgn-steps .pw-sl { display: none; }
  .vgn-steps .pw-step.is-active .pw-sl { display: inline; margin-left: 10px; font-size: 14.5px; }
  .vgn-steps .pw-step:not(:last-child)::after { margin: 0 8px; }
  .vgn-cols { grid-template-columns: minmax(0, 1fr); }
  .vgn-card { padding: 16px; }
  .vgn-cover-w .vg-cover { width: 240px; }
  .vgn-facts div { grid-template-columns: 24px 90px minmax(0, 1fr); }
  .vgn-acts > * { height: 48px; }
}

/* ---------- Content-54 · The generated video (vd-) — the video detail page, plan plans/Content-54.md; vp- is the shared player of Content-54 / 55 (js/video-player.js), vd-poster / vd-portrait the covers used by Content-56 … 59; the scene pictures are Content-49's vsh-comp ---------- */
/* the head: the breadcrumb, the 34 px / 800 title with the status pill and the version chip, the 18 px lead; four 44 px actions at the right */
.vd-head { align-items: center; flex-wrap: wrap; padding: 0 0 14px 8px; gap: 0 24px; }
.vd-head-t { min-width: 0; flex: 1; }
.vd-crumbs { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--muted); margin-bottom: 6px; }
.vd-crumbs a { color: var(--muted); text-decoration: none; border-radius: 4px; }
.vd-crumbs a:hover { color: var(--indigo); }
.vd-title-row { display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; }
.vd-head h1 { font-size: 34px; letter-spacing: -0.6px; margin-right: auto; overflow-wrap: anywhere; min-width: 0; }
.vd-pill { flex: none; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 7px; font-size: 14.5px; font-weight: 500; white-space: nowrap; }
.vd-pill.is-draft { background: #F1F3F7; color: var(--text-2); }
.vd-pill.is-pending_review { background: var(--amber-bg); color: var(--amber-text); }
.vd-pill.is-approved { background: var(--green-bg); color: var(--green-text); }
.vd-pill.is-archived { background: var(--surface); color: var(--muted); box-shadow: inset 0 0 0 1px #D5DAE4; }
.vd-ver { flex: none; height: 30px; padding: 0 11px; border: 0; border-radius: 7px; background: var(--indigo-bg); color: var(--indigo); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.vd-ver:hover { background: #E2E8FF; }
.vd-lead { flex-basis: 100%; margin: 4px 0 0; font-size: 18px; line-height: 1.35; color: var(--text-2); }
.vd-actions { flex: none; display: flex; align-items: center; gap: 12px; }
.vd-act, .vd-primary { height: 44px; font-size: 16px; font-weight: 600; padding: 0 18px; gap: 10px; white-space: nowrap; cursor: pointer; }
.vd-act .i, .vd-primary .i { font-size: 20px; }
.vd-act:disabled { opacity: 0.5; cursor: default; }
.vd-primary { box-shadow: 0 4px 10px rgba(59, 91, 253, 0.22); padding: 0 22px; }
.vd-pi { display: inline-grid; place-items: center; width: 20px; height: 20px; }
.vd-primary.is-done, .vd-primary:disabled { background: var(--green-bg); color: var(--green-text); box-shadow: none; cursor: default; }
.vd-primary.is-busy { background: var(--indigo); color: #fff; opacity: 0.85; cursor: progress; }
.vd-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; animation: vd-rot 0.8s linear infinite; display: inline-block; }
@keyframes vd-rot { to { transform: rotate(360deg); } }
.vd-export { position: relative; }
.vd-caret { display: inline-grid; margin-left: -2px; } .vd-caret .i { font-size: 16px; color: var(--muted); }
.vd-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 220px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(23, 27, 45, 0.14); }
.vd-menu[hidden] { display: none; }
.vd-mitem { width: 100%; display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 15px; color: var(--text); cursor: pointer; text-align: left; }
.vd-mitem .i { font-size: 19px; color: var(--muted); }
.vd-mitem:hover, .vd-mitem:focus-visible { background: #F4F6FA; outline: none; }
.vd-mitem[hidden] { display: none; }
.vd-root.is-readonly .vd-edit { display: none; }
.vd-root :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

/* the card: the 620 × 562 player | the tab box and the footer facts */
.vd-card { display: grid; grid-template-columns: 620px minmax(0, 1fr); gap: 18px; padding: 16px; }
.vd-player { height: 562px; min-width: 0; }
.vd-side { display: flex; flex-direction: column; min-width: 0; height: 562px; }
.vd-box { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 8px; }
.vd-tabs { flex: none; display: flex; height: 54px; border-bottom: 1px solid var(--border); }
.vd-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 0; background: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  font: inherit; font-size: 18px; font-weight: 500; color: var(--text-2); cursor: pointer; }
.vd-tab .i { font-size: 23px; color: var(--muted); }
.vd-tab:hover { color: var(--text); }
.vd-tab[aria-selected="true"] { color: var(--indigo); border-bottom-color: var(--indigo); }
.vd-tab[aria-selected="true"] .i { color: var(--indigo); }
.vd-panel { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 22px 16px 4px; }
.vd-panel[hidden] { display: none; }
/* Script: scene rows 138 px apart (the 228 × 118 picture, the title row, the grey box) */
.vd-scenes { list-style: none; margin: 0; padding: 0; }
.vd-scenes li + li { margin-top: 10px; }
.vd-scene { width: 100%; display: grid; grid-template-columns: 228px minmax(0, 1fr); column-gap: 24px; align-items: start; padding: 0 0 10px; border: 0; border-bottom: 1px solid var(--border-soft);
  background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 0; }
.vd-scenes li:last-child .vd-scene { border-bottom: 0; }
.vd-thumb { position: relative; width: 228px; height: 118px; border-radius: 6px; overflow: hidden; display: block; }
.vd-thumb .vsh-comp { width: 100%; height: 100%; border-radius: 6px; }
.vd-range { position: absolute; left: 10px; bottom: 7px; z-index: 3; font-size: 14.5px; font-weight: 500; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55); font-variant-numeric: tabular-nums; }
.vd-scene:hover .vd-thumb { box-shadow: 0 0 0 2px #C9D3FB; }
.vd-scene.is-current .vd-thumb { box-shadow: 0 0 0 2px var(--indigo); }
.vd-sc-t { display: flex; flex-direction: column; min-width: 0; }
.vd-sc-h { display: flex; align-items: center; gap: 24px; height: 32px; margin-top: 2px; font-size: 15.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vd-sc-h b { font-weight: 600; color: var(--text); }
.vd-now { display: none; align-items: center; gap: 5px; margin-left: auto; height: 24px; padding: 0 9px; border-radius: 99px; background: var(--indigo-bg); color: var(--indigo); font-size: 12.5px; font-weight: 600; }
.vd-now .i { font-size: 11px; }
.vd-root.is-playing .vd-scene.is-current .vd-now { display: inline-flex; }
.vd-lines { display: block; margin-top: 8px; padding: 12px 18px; min-height: 70px; box-sizing: border-box; border-radius: 8px; background: #F4F6FA; font-size: 15.5px; line-height: 1.45; color: var(--text-2); }
.vd-spoken { display: block; }
.vd-os { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }
.vd-os em { font-style: normal; font-weight: 600; }
/* References and Details */
.vd-refs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.vd-ref { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: center; }
.vd-ref .vsh-comp, .vd-logo { width: 150px; height: 84px; border-radius: 6px; }
.vd-logo { display: grid; place-items: center; background: #2F5BFF; color: #fff; font-size: 30px; font-weight: 800; letter-spacing: -0.02em;
  background-image: linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px); background-size: 12px 12px; }
.vd-ref-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vd-ref-t b { font-size: 15.5px; font-weight: 600; }
.vd-ref-t span { font-size: 14px; color: var(--text-2); }
.vd-ref-t small { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.vd-details { margin: 0; display: flex; flex-direction: column; }
.vd-details > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
.vd-details > div:last-child { border-bottom: 0; }
.vd-details dt { font-size: 14px; color: var(--muted); }
.vd-details dd { margin: 0; font-size: 15px; color: var(--text); min-width: 0; }
.vd-dl-l { display: block; line-height: 1.5; }
.vd-dl-l em { font-style: normal; color: var(--muted); margin-right: 6px; }
.vd-joblink { display: inline-flex; align-items: center; gap: 6px; color: var(--indigo); text-decoration: none; font-weight: 600; }
.vd-joblink .i { font-size: 16px; }
/* the footer facts: five columns split by 1 px rules */
.vd-facts { flex: none; height: 70px; margin: 0; display: grid; grid-template-columns: 1.45fr 1.4fr 0.72fr 0.86fr 1.62fr; align-items: center; padding: 6px 0 0; }
.vd-facts > div { padding: 0 12px; border-left: 1px solid var(--border); min-width: 0; }
.vd-facts > div:first-child { border-left: 0; padding-left: 12px; }
.vd-facts dt { font-size: 14px; color: var(--muted); line-height: 20px; }
.vd-facts dd { margin: 2px 0 0; font-size: 14.5px; color: var(--text-2); line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-fh { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; }
.vd-fh > .i { grid-row: span 2; font-size: 22px; color: var(--muted); margin-top: 1px; }
.vd-hist { border: 0; background: none; padding: 0; font: inherit; font-size: 14.5px; white-space: nowrap; color: var(--indigo); cursor: pointer; }
.vd-hist:hover { text-decoration: underline; }

/* ---- the shared player (vp-): the black stage with the 9:16 frame, the 48 px controls bar */
html.vp-lock { overflow: hidden; }
.vp { position: relative; height: 100%; display: flex; flex-direction: column; background: #000; border-radius: 8px; overflow: hidden; color: #fff; }
.vp-stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; isolation: isolate; }
.vp-stage:focus { outline: none; }
.vp-stage:focus-visible { outline: 2px solid var(--indigo); outline-offset: -3px; }
.vp-frame { position: relative; z-index: 1; height: 100%; aspect-ratio: 9 / 16; max-width: 100%; overflow: hidden; background: #0A1433; }
.vp-scene { position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s ease; }
.vp-scene.is-on { opacity: 1; }
.vp-comp.vsh-comp { width: 100%; height: 100%; border-radius: 0; }
.vp-comp .vsh-comp-art svg { transform-origin: 50% 55%; will-change: transform; }
.vp-comp .vsh-comp-mark { width: 13cqw; height: 13cqw; font-size: 5.2cqw; }
.vp-comp .vsh-comp-t { bottom: 12cqw; left: 7cqw; right: 7cqw; font-size: 10cqw; -webkit-line-clamp: 3; }
.vp-bg { position: absolute; inset: 0; z-index: 0; }
.vp-bg-s { position: absolute; inset: -40px; opacity: 0; transition: opacity 0.35s ease; filter: blur(24px) brightness(0.5) saturate(1.2); background: #0E1B3D; }
.vp-bg-s.is-on { opacity: 1; }
.vp-bg-s svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vp-pin, .vp-pend { position: absolute; z-index: 5; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 700; pointer-events: none; }
.vp-pin { background: var(--indigo); color: #fff; box-shadow: 0 0 0 2px #fff, 0 4px 12px rgba(0, 0, 0, 0.35); }
.vp-pend { border: 2px dashed #fff; background: rgba(59, 91, 253, 0.35); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); }
.vp-pend::after { content: "+"; font-size: 20px; font-weight: 600; line-height: 1; }
.vp-pin[hidden], .vp-pend[hidden] { display: none; }
.vp-fail { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; background: rgba(5, 8, 20, 0.82); cursor: default; }
.vp-fail[hidden] { display: none; }
.vp-fail-i { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(240, 84, 106, 0.18); color: #FF8A9B; }
.vp-fail-i .i { font-size: 24px; }
.vp-fail p { margin: 0; max-width: 300px; font-size: 16px; line-height: 1.4; }
.vp-fail .btn-outline { height: 42px; font-size: 15px; color: var(--text); text-decoration: none; }
.vp-bar { flex: none; height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 16px 0 12px; background: #000; }
.vp-btn { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: #fff; cursor: pointer; padding: 0; }
.vp-btn .i { font-size: 24px; }
.vp-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); }
.vp-btn:disabled { opacity: 0.4; cursor: default; }
.vp-btn:focus-visible, .vp-scrub:focus-visible { outline: 2px solid #8FA3FF; outline-offset: 1px; }
.vp-i-pause, .vp-i-off, .vp-i-fsx { display: none; }
.vp[data-state="playing"] .vp-i-play { display: none; }
.vp[data-state="playing"] .vp-i-pause { display: block; }
.vp.is-muted .vp-i-on { display: none; } .vp.is-muted .vp-i-off { display: block; }
.vp-full[aria-pressed="true"] .vp-i-fs { display: none; } .vp-full[aria-pressed="true"] .vp-i-fsx { display: block; }
.vp-time { flex: none; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 98px; }
.vp-scrub { position: relative; flex: 1 1 auto; height: 28px; cursor: pointer; touch-action: none; border-radius: 6px; margin: 0 8px; }
.vp-track { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); overflow: hidden; }
.vp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--indigo); }
.vp-knob { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
.vp-scrub.is-drag .vp-knob, .vp-scrub:hover .vp-knob { transform: scale(1.15); }
.vp-dots { position: absolute; inset: 0; pointer-events: none; }
.vp-dot { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #9AA3B8; box-shadow: 0 0 0 2px #000; }
.vp-dot.is-on { background: #8FA3FF; }
.vp.is-failed .vp-bar { opacity: 0.5; }
.vp.is-pseudo-full, .vp:fullscreen { position: fixed; inset: 0; z-index: 95; height: 100vh; height: 100dvh; border-radius: 0; }
.vp:fullscreen { position: static; }

/* ---- the covers: the landscape poster (57 / 58 / 59) and the 9:16 portrait (56); sized by their host, text in container units */
.vd-poster { position: relative; margin: 0; overflow: hidden; border-radius: 8px; container-type: size; isolation: isolate; color: #fff;
  background: radial-gradient(120% 140% at 85% 60%, #1E3A8A 0%, #0E1B3D 58%, #070D22 100%); }
.vd-po-art { position: absolute; top: 0; bottom: 0; right: 0; width: 72%; z-index: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%); mask-image: linear-gradient(90deg, transparent 0, #000 34%); }
.vd-po-art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vd-poster::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(5, 10, 30, 0.55) 0%, rgba(5, 10, 30, 0) 42%); pointer-events: none; }
.vd-po-h { position: absolute; z-index: 2; left: 4.2cqw; top: 13cqh; max-width: 62cqw; font-size: min(19cqmin, 9cqw); font-weight: 800; line-height: 0.98; letter-spacing: -0.03em; overflow-wrap: anywhere; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); }
.vd-po-brand { position: absolute; z-index: 2; left: 4.2cqw; bottom: 8cqh; display: flex; align-items: center; gap: 2.6cqmin; font-size: 6.8cqmin; font-weight: 600; }
.vd-po-tile { width: 12cqmin; height: 12cqmin; border-radius: 2.4cqmin; display: grid; place-items: center; background: #2F5BFF; font-size: 5.2cqmin; font-weight: 800; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3); }
.vd-po-lock { position: absolute; z-index: 3; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; border-radius: 6px; background: var(--indigo); color: #fff; font-size: 13.5px; font-weight: 500; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }
.vd-po-lock .i { font-size: 15px; }
.vd-po-dur { position: absolute; z-index: 3; left: 10px; bottom: 10px; height: 28px; padding: 0 9px; display: inline-flex; align-items: center; border-radius: 6px; background: rgba(5, 10, 30, 0.72); font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vd-po-badge { position: absolute; z-index: 3; right: 20px; bottom: 16px; font-size: 16px; font-weight: 600; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }
.vd-portrait { position: relative; margin: 0; overflow: hidden; border-radius: 6px; container-type: inline-size; isolation: isolate; color: #fff; background: #0E1B3D; }
.vd-pt-art { position: absolute; inset: 0; z-index: 0; }
.vd-pt-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vd-portrait::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(8, 17, 45, 0.85) 0%, rgba(8, 17, 45, 0.1) 60%); }

@media (max-width: 1200px) {
  .vd-card { grid-template-columns: minmax(0, 1fr); }
  .vd-player { height: 520px; }
  .vd-side { height: auto; }
  .vd-panel { max-height: none; }
}
@media (max-width: 768px) {
  .vd-head { flex-direction: column; align-items: stretch; padding: 0 0 12px; gap: 14px; }
  .vd-head h1 { font-size: 26px; flex-basis: 100%; }
  .vd-lead { font-size: 15.5px; }
  .vd-actions { flex-wrap: wrap; gap: 8px; }
  .vd-actions > * { flex: 1 1 calc(50% - 8px); }
  .vd-act, .vd-primary { justify-content: center; height: 48px; padding: 0 12px; width: 100%; }
  .vd-export .vd-act { width: 100%; }
  .vd-menu { left: 0; right: 0; }
  .vd-card { padding: 10px; gap: 12px; }
  .vd-player { height: min(560px, 130vw); }
  .vd-tab { font-size: 15px; gap: 8px; } .vd-tab .i { font-size: 19px; }
  .vd-tabs { height: 48px; }
  .vd-panel { padding: 14px 12px 4px; }
  .vd-scene { grid-template-columns: 112px minmax(0, 1fr); column-gap: 12px; }
  .vd-thumb { width: 112px; height: 72px; }
  .vd-range { font-size: 11.5px; left: 6px; bottom: 4px; }
  .vd-sc-h { gap: 10px; font-size: 14px; height: 24px; }
  .vd-lines { padding: 8px 10px; font-size: 14px; min-height: 0; }
  .vd-ref { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
  .vd-ref .vsh-comp, .vd-logo { width: 96px; height: 60px; }
  .vd-facts { height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; padding: 12px 0 4px; }
  .vd-facts > div { border-left: 0; padding: 0 8px; }
  .vd-fh { grid-column: span 2; }
  .vp-bar { gap: 6px; padding: 0 8px; }
  .vp-btn { width: 44px; height: 44px; }
  .vp-time { min-width: 0; font-size: 13.5px; }
  .vp-scrub { margin: 0 4px; height: 44px; }
}

/* ---------- Content-55 · Review video issues (vr2-) — the review page, plan plans/Content-55.md; the player is Content-54's vp- (js/video-player.js) with the blurred backdrop, the scrubber dots and the numbered marker ---------- */
.vr2-head { padding: 0 0 14px 8px; }
.vr2-head .eyebrow { font-size: 13.5px; letter-spacing: 0.6px; margin-bottom: 8px; }
.vr2-head .sub { font-size: 18px; margin-top: 4px; }
.vr2-root :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.vr2-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; animation: vd-rot 0.8s linear infinite; display: inline-block; }

/* the card: the 848 × 482 player | the 544 px comments column split by a 1 px rule */
.vr2-card { display: grid; grid-template-columns: minmax(0, 1fr) 544px; padding: 16px 0 16px 16px; }
.vr2-pl { height: 482px; min-width: 0; }
.vr2-side { min-width: 0; margin-left: 18px; padding: 0 18px 0 22px; border-left: 1px solid var(--border); display: flex; flex-direction: column; }
.vr2-ch { display: flex; align-items: center; gap: 14px; height: 40px; }
.vr2-tile { width: 32px; height: 32px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--indigo-bg); color: var(--indigo); }
.vr2-tile .i { font-size: 18px; }
.vr2-ch h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.2px; }
.vr2-count { min-width: 26px; height: 24px; padding: 0 8px; box-sizing: border-box; border-radius: 99px; background: #F1F3F7; color: var(--text-2); font-size: 13px; font-weight: 600; display: grid; place-items: center; }
.vr2-list { list-style: none; margin: 14px 0 0; padding: 0 0 12px; display: flex; flex-direction: column; gap: 10px; max-height: 176px; overflow: auto; border-bottom: 1px solid var(--border); }
.vr2-list[hidden] { display: none; }
.vr2-empty { margin: 14px 0 0; padding: 16px 16px 18px; border: 1px dashed #D5DAE4; border-radius: 8px; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.vr2-empty[hidden] { display: none; }
.vr2-row { position: relative; flex: none; display: flex; align-items: center; min-height: 52px; border: 1px solid transparent; border-radius: 8px; }
.vr2-row.is-sel { background: #F1F4FF; border-color: #DCE3FF; }
.vr2-selbtn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 8px 0 10px; border: 0; background: none; border-radius: 8px; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.vr2-row:not(.is-sel) .vr2-selbtn:hover { background: #F7F8FB; }
.vr2-disc { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #EEF0F5; color: var(--text-2); font-size: 15px; font-weight: 600; }
.vr2-row.is-sel .vr2-disc { background: var(--indigo); color: #fff; }
.vr2-chip { flex: none; height: 34px; padding: 0 9px; border-radius: 6px; display: grid; place-items: center; background: #F1F3F7; color: var(--text-2); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.vr2-row.is-sel .vr2-chip { background: #E3E9FF; color: var(--indigo); }
.vr2-txt { flex: 1; min-width: 0; margin-left: 8px; font-size: 15.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vr2-fr { flex: none; color: var(--muted); display: grid; } .vr2-fr .i { font-size: 17px; }
.vr2-mw { position: relative; flex: none; margin-right: 8px; }
.vr2-more { width: 32px; height: 32px; border: 0; border-radius: 7px; background: none; color: var(--text-2); display: grid; place-items: center; cursor: pointer; }
.vr2-more .i { font-size: 20px; }
.vr2-more:hover, .vr2-more[aria-expanded="true"] { background: rgba(23, 27, 45, 0.06); }
.vr2-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 160px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(23, 27, 45, 0.14); display: block; }
.vr2-menu[hidden] { display: none; }
.vr2-mi { width: 100%; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 14.5px; color: var(--text); cursor: pointer; }
.vr2-mi .i { font-size: 17px; color: var(--muted); }
.vr2-mi:hover, .vr2-mi:focus-visible { background: #F4F6FA; outline: none; }
.vr2-mi.is-danger, .vr2-mi.is-danger .i { color: #C0263D; }
.vr2-row.is-edit { align-items: flex-start; gap: 12px; padding: 10px; background: #FAFBFD; border-color: var(--border); }
.vr2-row.is-edit .vr2-disc, .vr2-row.is-edit .vr2-chip { margin-top: 2px; }
.vr2-ed { flex: 1; min-width: 0; }
.vr2-ed textarea { width: 100%; box-sizing: border-box; min-height: 56px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 15px; resize: vertical; }
.vr2-ed textarea:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.15); }
.vr2-ed textarea[aria-invalid="true"] { border-color: var(--red); }
.vr2-ed-b { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.vr2-ed-b button { height: 34px; font-size: 14.5px; padding: 0 14px; box-shadow: none; }

/* the add form */
.vr2-add { margin-top: 12px; display: flex; flex-direction: column; }
.vr2-add h3 { margin: 6px 0 10px; font-size: 18px; font-weight: 700; }
.vr2-trow { display: flex; align-items: center; gap: 14px; }
.vr2-time { width: 124px; height: 40px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid #D9DDE6; border-radius: 8px; background: var(--surface); }
.vr2-time .i { font-size: 19px; color: var(--text-2); flex: none; }
.vr2-time input { width: 100%; min-width: 0; border: 0; background: none; padding: 0; font: inherit; font-size: 16px; color: var(--text); font-variant-numeric: tabular-nums; }
.vr2-time input:focus { outline: none; }
.vr2-time:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.15); }
.vr2-time.is-invalid { border-color: var(--red); }
.vr2-place { margin: 0; font-size: 13.5px; color: var(--muted); }
.vr2-add textarea { margin-top: 10px; width: 100%; height: 96px; box-sizing: border-box; padding: 11px 14px; border: 1px solid #D9DDE6; border-radius: 8px; font: inherit; font-size: 15.5px; line-height: 1.4; color: var(--text); resize: vertical; }
.vr2-add textarea:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.15); }
.vr2-add textarea.is-invalid, .vr2-add textarea[aria-invalid="true"] { border-color: var(--red); }
.vr2-u { display: flex; align-items: flex-start; gap: 10px; min-height: 18px; margin-top: 4px; }
.vr2-n { margin-left: auto; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vr2-n.is-over { color: #C0263D; font-weight: 600; }
.vr2-err { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: #C0263D; }
.vr2-err[hidden] { display: none; }
.vr2-err .i { font-size: 15px; flex: none; }
#vr2-t-err { margin-top: 6px; }
.vr2-att { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.vr2-cb { position: relative; display: inline-flex; align-items: center; gap: 12px; font-size: 15.5px; font-weight: 500; color: var(--text); cursor: pointer; }
.vr2-cb input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; }
.vr2-box { width: 20px; height: 20px; flex: none; border-radius: 5px; border: 1.5px solid #C5CBD8; display: grid; place-items: center; background: #fff; color: #fff; }
.vr2-box .i { font-size: 14px; opacity: 0; stroke-width: 3; }
.vr2-cb input:checked + .vr2-box { background: var(--indigo); border-color: var(--indigo); }
.vr2-cb input:checked + .vr2-box .i { opacity: 1; }
.vr2-cb input:focus-visible + .vr2-box { outline: 2px solid var(--indigo); outline-offset: 2px; }
.vr2-addbtn { margin-left: auto; height: 36px; padding: 0 14px; font-size: 14.5px; gap: 8px; cursor: pointer; }
.vr2-addbtn .i { font-size: 17px; }
.vr2-hint { margin: 2px 0 0 32px; font-size: 13.5px; color: var(--muted); }
.vr2-root.is-readonly .vr2-add, .vr2-root.is-readonly .vr2-req { display: none; }

/* the footer card */
.vr2-foot { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 12px 14px 18px; }
.vr2-back { height: 44px; font-size: 16px; font-weight: 500; text-decoration: none; color: var(--text); gap: 12px; padding: 0 18px; }
.vr2-back .i { font-size: 19px; }
.vr2-req { height: 44px; font-size: 16px; padding: 0 18px; gap: 12px; box-shadow: none; cursor: pointer; }
.vr2-req .i { font-size: 19px; }
.vr2-req:disabled { opacity: 0.45; cursor: default; }

@media (max-width: 1200px) {
  .vr2-card { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .vr2-side { margin: 16px 0 0; padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 768px) {
  .vr2-head { padding: 0 0 12px; }
  .vr2-head h1 { font-size: 26px; } .vr2-head .sub { font-size: 15.5px; }
  .vr2-card { padding: 10px; }
  .vr2-pl { height: min(480px, 120vw); }
  .vr2-selbtn { gap: 8px; }
  .vr2-trow { flex-wrap: wrap; gap: 6px 12px; }
  .vr2-time { height: 44px; }
  .vr2-att { flex-wrap: wrap; }
  .vr2-addbtn { margin-left: 0; width: 100%; justify-content: center; height: 44px; }
  .vr2-hint { margin-left: 0; }
  .vr2-foot { flex-direction: column-reverse; align-items: stretch; padding: 12px; }
  .vr2-back, .vr2-req { justify-content: center; height: 48px; }
}

/* ---------- Content-51 … 55 · the production additions (real pictures instead of the prototype's drawings, the keyframe failure corner, the
   extra timeline tints, the shared player's image / video layers, the requested note tag) ---------- */
.vsb-seg.t-teal { background: #D9F3EE; } .vsb-seg.t-amber { background: #FDF0D5; } .vsb-seg.t-rose { background: #FCE4E8; }
.vsb-logo.has-img { background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.vsb-logo img, .vg-logo img, .vd-logo img { max-width: 72%; max-height: 72%; object-fit: contain; display: block; }
.vsb-card.is-skel { min-height: 330px; }
.vsb-kfail { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: 6px;
  background: rgba(10, 18, 45, 0.7); color: #fff; font-size: 13.5px; font-weight: 600; text-align: center; box-shadow: inset 0 0 0 2px var(--red); }
.vsb-kfail-i { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; font-weight: 800; }
.vsb-kfail-r { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 7px; background: #fff; color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.vsb-kfail-r .i { font-size: 15px; }
.vsh-comp.is-key .vsh-comp-art img { transform: scale(1.06); transform-origin: 30% 60%; }
/* 52 / 53: the cover and the frames over real pictures */
.vg-cv-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vg-fpic { display: block; }
.vg-refs .vg-logo.has-img { background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.vg-norefs { margin: 0; font-size: 13.5px; color: var(--muted); }
.vg-strip[hidden] { display: none; }
.vg-strip a[hidden] { display: none; }
.vg-foot .vg-back { font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.vg-foot .vg-back:disabled { opacity: 0.5; cursor: default; }
a.vg-cv-ready { text-decoration: none; }
.vgn-cancel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; padding: 10px 12px; border-radius: 8px; background: #F4F6FA; color: var(--text-2); font-size: 14px; }
.vgn-cancel[hidden] { display: none; }
.vgn-cancel .i { font-size: 17px; }
.vgn-cancel .btn-outline { height: 36px; font-size: 14px; }
.vgn-acts a { text-decoration: none; }
/* 54 / 55: the shared player's layers (the first frame, the scene stills, the animated preview, the MP4) */
.vp-frame.is-wide { height: auto; width: 100%; aspect-ratio: 16 / 9; }
.vp-frame.is-square { aspect-ratio: 1 / 1; }
.vp-first, .vp-anim, .vp-media { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; display: block; background: #0A1433; }
.vp-media { object-fit: contain; background: #000; }
.vp-first[hidden], .vp-anim[hidden] { display: none; }
.vp-scene { z-index: 1; }
.vp-pin, .vp-pend { z-index: 6; }
.vp-bg-s img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vp.is-mp4 .vp-frame { background: #000; }
.vd-scene:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.vd-logo.has-img { background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.vd-empty { margin: 0; font-size: 14.5px; color: var(--muted); }
a.vd-act { display: inline-flex; align-items: center; text-decoration: none; color: var(--text); }
a.vd-act[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.vr2-row.is-requested .vr2-txt { color: var(--muted); }
.vr2-tag { flex: none; height: 22px; padding: 0 8px; border-radius: 99px; display: inline-flex; align-items: center; background: var(--amber-bg); color: var(--amber-text); font-size: 12px; font-weight: 600; }
.vr2-addbtn:disabled { opacity: 0.6; cursor: progress; }

/* ---------- Content-56 · Generate another version? (rg-) — the 522 px dialog over the video page, plan plans/Content-56.md; the cover is Content-54's vd-portrait ---------- */
html.rg-lock { overflow: hidden; }
.rg-backdrop { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(23, 27, 45, 0.45); overscroll-behavior: contain; }
.rg-dialog { position: relative; width: 522px; max-width: 100%; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); box-sizing: border-box; display: flex; flex-direction: column;
  background: var(--surface); border-radius: 16px; box-shadow: 0 24px 60px rgba(23, 27, 45, 0.22); }
.rg-dialog:focus { outline: none; }
.rg-dialog :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.rg-head { flex: none; display: flex; align-items: flex-start; gap: 12px; padding: 20px 56px 12px 24px; }
.rg-tile { width: 32px; height: 32px; flex: none; border-radius: 8px; display: grid; place-items: center; color: var(--indigo); background: var(--indigo-bg); margin-top: -1px; }
.rg-tile .i { font-size: 19px; }
.rg-head h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.2px; line-height: 28px; }
.rg-head p { margin: 2px 0 0; font-size: 14px; color: var(--text-2); }
.rg-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--text-2); display: grid; place-items: center; cursor: pointer; }
.rg-close .i { font-size: 20px; } .rg-close:hover { background: var(--border-soft); }
.rg-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 24px 4px; }
.rg-cur { display: grid; grid-template-columns: 70px minmax(0, 1fr); column-gap: 20px; align-items: center; padding: 10px 16px; border: 1px solid var(--border); border-radius: 8px; }
.rg-thumb.vd-portrait { width: 70px; height: 114px; }
.rg-cur h3 { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.rg-cur p { margin: 2px 0 0; font-size: 14px; color: var(--text-2); }
.rg-cur .rg-ct { color: var(--text-2); }
.rg-modes { margin: 18px 0 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 6px; }
.rg-modes legend { padding: 0; margin-bottom: 8px; font-size: 15px; font-weight: 600; color: var(--text); }
.rg-mode { position: relative; display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 6px 16px 6px 16px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.rg-mode:hover { border-color: #C9D3FB; }
.rg-mode input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rg-radio { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1.5px solid #A9B0C0; background: #fff; box-sizing: border-box; }
.rg-mode span:last-child { display: flex; flex-direction: column; min-width: 0; }
.rg-mode b { font-size: 14.5px; font-weight: 500; color: var(--text); }
.rg-mode small { font-size: 13.5px; color: var(--text-2); }
.rg-mode:has(input:checked) { border-color: var(--indigo); background: #F4F6FF; }
.rg-mode input:checked + .rg-radio { border: 5px solid var(--indigo); }
.rg-mode input:focus-visible + .rg-radio { outline: 2px solid var(--indigo); outline-offset: 2px; }
.rg-lbl { margin: 18px 0 8px; font-size: 15px; font-weight: 600; }
.rg-sum { list-style: none; margin: 0; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; }
.rg-row { display: flex; align-items: center; gap: 14px; height: 28px; font-size: 14.5px; color: var(--text-2); }
.rg-ri { font-size: 18px; color: var(--muted); flex: none; }
.rg-ok { margin-left: auto; display: grid; color: var(--green); } .rg-ok .i { font-size: 20px; }
.rg-row.is-bad { color: #C0263D; } .rg-row.is-bad .rg-ok { color: #E0405A; }
.rg-miss { margin: 8px 0 0; display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 8px; background: #FDEEF0; color: #B42338; font-size: 13.5px; line-height: 1.4; }
.rg-miss .i { font-size: 17px; flex: none; margin-top: 1px; }
.rg-miss a { color: #B42338; font-weight: 600; }
.rg-opts { display: flex; align-items: flex-end; gap: 36px; margin: 16px 0 0; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.rg-var { display: flex; align-items: center; gap: 22px; font-size: 14.5px; color: var(--text-2); }
.rg-sel { position: relative; display: inline-flex; }
.rg-sel select { width: 96px; height: 44px; padding: 0 30px 0 16px; border: 1px solid #D9DDE6; border-radius: 8px; background: #fff; font: inherit; font-size: 15px; color: var(--text); appearance: none; cursor: pointer; }
.rg-sel select:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.15); }
.rg-sel .i { position: absolute; right: 10px; top: 50%; margin-top: -8px; font-size: 16px; color: var(--text-2); pointer-events: none; }
.rg-cost { display: flex; flex-direction: column; gap: 2px; }
.rg-cl { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); }
.rg-tip { position: relative; display: inline-grid; color: var(--muted); border-radius: 50%; cursor: help; }
.rg-tip .i { font-size: 16px; }
.rg-tip:hover::after, .rg-tip:focus::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 5; width: 220px; padding: 8px 10px; border-radius: 8px;
  background: #1F2437; color: #fff; font-size: 12.5px; line-height: 1.35; font-weight: 400; }
.rg-cost b { font-size: 17px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.rg-foot { flex: none; display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 14px 24px 20px; }
.rg-cancel { height: 44px; font-size: 15.5px; padding: 0 18px; cursor: pointer; }
.rg-go { height: 44px; font-size: 15.5px; padding: 0 18px; box-shadow: none; gap: 10px; cursor: pointer; }
.rg-go:disabled { opacity: 0.45; cursor: default; }
.rg-go[aria-busy="true"] { opacity: 0.85; cursor: progress; }
.rg-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; animation: vd-rot 0.8s linear infinite; display: inline-block; }

@media (max-width: 768px) {
  .rg-backdrop { padding: 0; place-items: end stretch; }
  .rg-dialog { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 16px 16px 0 0; }
  .rg-head { padding: 16px 52px 10px 16px; }
  .rg-close { top: 8px; right: 8px; width: 44px; height: 44px; }
  .rg-body { padding: 0 16px 4px; }
  .rg-opts { flex-wrap: wrap; gap: 14px 24px; }
  .rg-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .rg-foot > * { flex: 1; justify-content: center; height: 48px; }
}

/* ---------- Content-57 / 58 / 59 · Request video changes (vcr- drawer), Review edit references (vcp- page) and Confirm video changes (vcc- dialog), plan plans/Content-57.md; the frames are Content-54's vd-poster and Content-49's vsh-comp ---------- */
.vcr-spin, .vcc-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; animation: vd-rot 0.8s linear infinite; display: inline-block; }
.vcp-logo { display: grid; place-items: center; background: #2F5BFF; color: #fff; font-weight: 800; letter-spacing: -0.02em; border-radius: 6px;
  background-image: linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px); background-size: 12px 12px; }

/* 57 · the 552 px drawer with backdrop */
html.vcr-lock { overflow: hidden; }
.vcr-backdrop { position: fixed; inset: 0; z-index: 64; background: rgba(23, 27, 45, 0.36); }
.vcr-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 65; width: 552px; max-width: 100vw; box-sizing: border-box; display: flex; flex-direction: column;
  background: var(--surface); box-shadow: -12px 0 40px rgba(23, 27, 45, 0.18); }
.vcr-drawer:focus { outline: none; }
.vcr-drawer :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.vcr-head { position: relative; flex: none; padding: 26px 64px 10px 28px; }
.vcr-head h2 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.5px; line-height: 34px; }
.vcr-head p { margin: 8px 0 0; font-size: 16px; line-height: 1.4; color: var(--text-2); }
.vcr-close { position: absolute; top: 22px; right: 20px; width: 40px; height: 40px; border: 0; border-radius: 8px; background: none; color: var(--text-2); display: grid; place-items: center; cursor: pointer; }
.vcr-close .i { font-size: 22px; } .vcr-close:hover { background: var(--border-soft); }
.vcr-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 10px 14px 12px 28px; }
.vcr-orig { padding: 12px 14px 12px; border: 1px solid var(--border-soft); border-radius: 10px; box-shadow: 0 1px 3px rgba(23, 27, 45, 0.05); }
.vcr-orig h3 { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.vcr-orig h3 span, .vcr-refs h3 span { font-weight: 400; color: var(--text-2); }
.vcr-po.vd-poster { width: 100%; height: 192px; }
.vcr-po .vd-po-brand { display: none; }
.vcr-on { margin: 10px 0 0; font-size: 16px; font-weight: 600; }
.vcr-note { margin: 2px 0 0; font-size: 13.5px; color: var(--text-2); }
.vcr-field { margin-top: 22px; }
.vcr-lrow { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.vcr-lrow label { font-size: 15px; font-weight: 600; }
.vcr-star { color: #E0405A; }
.vcr-mark { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--indigo); text-decoration: none; }
.vcr-mark .i { font-size: 15px; } .vcr-mark:hover { text-decoration: underline; }
.vcr-ta-w { position: relative; border: 1px solid #D9DDE6; border-radius: 8px; background: #fff; }
.vcr-ta-w:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.15); }
.vcr-ta-w.is-invalid { border-color: var(--red); }
.vcr-ta-w textarea { display: block; width: 100%; height: 88px; box-sizing: border-box; padding: 10px 14px 22px; border: 0; background: none; border-radius: 8px; font: inherit; font-size: 15px; line-height: 1.35; color: var(--text); resize: vertical; }
.vcr-ta-w textarea:focus { outline: none; }
.vcr-drawer .vcr-ta-w textarea:focus-visible { outline: none; }
.vcr-n { position: absolute; right: 10px; bottom: 6px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; pointer-events: none; }
.vcr-n.is-over { color: #C0263D; font-weight: 600; }
.vcr-from { margin: 6px 0 0; display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-2); }
.vcr-from .i { font-size: 15px; color: var(--indigo); }
.vcr-from[hidden] { display: none; }
.vcr-err { margin: 6px 0 0; display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: #C0263D; }
.vcr-err[hidden] { display: none; }
.vcr-err .i { font-size: 15px; flex: none; }
.vcr-keep { margin: 22px 0 0; padding: 0; border: 0; }
.vcr-keep legend { padding: 0; margin-bottom: 10px; font-size: 15px; font-weight: 600; }
.vcr-chips { display: flex; flex-wrap: wrap; gap: 8px 6px; }
.vcr-chip { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 11px 0 10px; border: 1px solid #E3E6ED; border-radius: 99px; background: #F4F6FA; font: inherit; font-size: 14.5px; color: var(--text); cursor: pointer; }
.vcr-chip .i { font-size: 18px; color: var(--text-2); }
.vcr-chip:hover { border-color: #C9D3FB; }
.vcr-chip[aria-pressed="false"] { background: #fff; border-style: dashed; border-color: #CDD2DC; color: var(--muted); }
.vcr-chip[aria-pressed="false"] .i { color: var(--muted-2); }
.vcr-refs { margin-top: 22px; }
.vcr-refs h3 { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.vcr-refs h3 span { font-weight: 600; color: var(--text); }
.vcr-tiles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vcr-tile { position: relative; width: 106px; height: 78px; border-radius: 4px; overflow: hidden; }
.vcr-tile .vsh-comp, .vcr-tile .vcp-logo { width: 100%; height: 100%; border-radius: 4px; }
.vcr-tile .vcp-logo { font-size: 28px; }
.vcr-tag { position: absolute; left: 5px; bottom: 5px; z-index: 3; height: 18px; padding: 0 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.92); color: var(--indigo); font-size: 11px; font-weight: 700; line-height: 18px; }
.vcr-x { position: absolute; right: 4px; top: 4px; z-index: 3; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.94); color: var(--text); display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); padding: 0; }
.vcr-x .i { font-size: 14px; }
.vcr-x:hover { color: #C0263D; }
.vcr-add { width: 136px; height: 78px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1.5px dashed #CDD3E0; border-radius: 6px; background: #fff; font: inherit; font-size: 15px; color: var(--indigo); cursor: pointer; }
.vcr-add .i { font-size: 22px; }
.vcr-add:hover, .vcr-add[aria-expanded="true"] { background: var(--indigo-bg-2); border-color: #B9C5FB; }
.vcr-foot { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 26px 0 28px; padding: 16px 0 20px; border-top: 1px solid var(--border); }
.vcr-cancel { height: 44px; font-size: 16px; font-weight: 500; padding: 0 22px; cursor: pointer; }
.vcr-go { height: 44px; font-size: 16px; padding: 0 20px; gap: 12px; box-shadow: none; cursor: pointer; }
.vcr-go .i { font-size: 19px; }
.vcr-go[aria-busy="true"] { opacity: 0.85; cursor: progress; }

/* 58 · the page: the original and the references | the brief / script and the checklist; the footer row */
.vcp-root :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.vcp-head { padding: 0 0 14px 8px; }
.vcp-backlink { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 15px; font-weight: 500; color: var(--indigo); text-decoration: none; }
.vcp-backlink .i { font-size: 17px; }
.vcp-backlink:hover { text-decoration: underline; }
.vcp-head h1 { font-size: 34px; letter-spacing: -0.6px; }
.vcp-head .sub { font-size: 18px; margin-top: 4px; }
.vcp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 548px; gap: 16px; align-items: start; }
.vcp-main, .vcp-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vcp-card { padding: 14px 16px 16px; border-radius: 10px; }
.vcp-ch { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 16px; align-items: start; }
.vcp-tile { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: var(--indigo-bg); color: var(--indigo); }
.vcp-tile .i { font-size: 20px; }
.vcp-ch h2 { margin: 0; font-size: 18px; font-weight: 700; line-height: 24px; }
.vcp-ch p { margin: 2px 0 0; font-size: 14px; color: var(--text-2); }
.vcp-req { display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 14px; border-radius: 8px; background: #F1F3F7; font-size: 15px; font-weight: 600; color: var(--text); }
.vcp-req .i { font-size: 18px; }
.vcp-poster { margin-top: 12px; }
.vcp-po.vd-poster { width: 100%; height: 234px; }
.vcp-rlist { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vcp-rc { padding: 10px 12px 12px; border: 1px solid var(--border); border-radius: 8px; min-width: 0; }
.vcp-rh { display: flex; align-items: center; gap: 8px; min-height: 26px; }
.vcp-rh b { font-size: 14.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: auto; }
.vcp-badge { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 5px; background: #F1F3F7; color: var(--text-2); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.vcp-badge .i { font-size: 14px; }
.vcp-badge.is-ok { background: var(--green-bg); color: var(--green-text); } .vcp-badge.is-ok .i { color: var(--green); }
.vcp-badge.is-added { background: var(--indigo-bg); color: var(--indigo); font-size: 11.5px; }
.vcp-img { position: relative; margin-top: 8px; height: 102px; border-radius: 6px; overflow: hidden; }
.vcp-img .vsh-comp, .vcp-img .vcp-logo { width: 100%; height: 100%; border-radius: 6px; }
.vcp-img .vcp-logo { position: relative; isolation: isolate; font-size: 40px; background-color: #DDE5FF; background-image: linear-gradient(rgba(59, 91, 253, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(59, 91, 253, 0.1) 1px, transparent 1px); }
.vcp-img .vcp-logo::before { content: ""; position: absolute; z-index: -1; width: 78px; height: 78px; border-radius: 14px; background: #2F5BFF; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.vcp-x { position: absolute; right: 6px; top: 6px; z-index: 4; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.95); color: var(--text); display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); padding: 0; }
.vcp-x .i { font-size: 15px; } .vcp-x:hover { color: #C0263D; }
.vcp-file { display: block; margin-top: 10px; font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcp-none { grid-column: 1 / -1; padding: 18px; border: 1px dashed #D5DAE4; border-radius: 8px; font-size: 14.5px; color: var(--muted); }
.vcp-bbox { margin-top: 14px; border: 1px solid var(--border-soft); border-radius: 8px; overflow: hidden; }
.vcp-ver { margin: 0; display: flex; gap: 36px; padding: 10px 16px; background: #F7F8FB; border-bottom: 1px solid var(--border-soft); }
.vcp-ver div { display: flex; align-items: center; gap: 12px; }
.vcp-ver dt { font-size: 13.5px; color: var(--text-2); }
.vcp-ver dd { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text); }
.vcp-ver div:last-child dd { font-weight: 400; color: var(--muted); }
.vcp-bbox h3 { margin: 12px 16px 6px; font-size: 15px; font-weight: 600; }
.vcp-btext { margin: 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft); font-size: 14.5px; line-height: 1.45; color: var(--text-2); }
.vcp-script { list-style: none; margin: 0 16px 14px; padding: 6px 16px; border-radius: 6px; background: #F4F6FA; }
.vcp-script li { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; min-height: 22px; font-size: 13.5px; color: var(--text-2); }
.vcp-script li span:first-child { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.vcp-checks { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vcp-ck { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 26px; align-items: start; }
.vcp-ck-i { width: 24px; height: 24px; margin-top: 4px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; }
.vcp-ck-i .i { font-size: 14px; stroke-width: 3; }
.vcp-ck.is-bad .vcp-ck-i { background: #E0405A; }
.vcp-ck b { display: block; font-size: 15.5px; font-weight: 500; }
.vcp-ck small { display: block; font-size: 13.5px; color: var(--text-2); }
.vcp-ck.is-bad small { color: #C0263D; }
.vcp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.vcp-back { height: 44px; padding: 0 30px; font-size: 16px; font-weight: 500; text-decoration: none; color: var(--text); }
.vcp-next { height: 44px; padding: 0 26px; font-size: 16px; gap: 12px; box-shadow: none; cursor: pointer; }
.vcp-next .i { font-size: 19px; }
.vcp-next:disabled { opacity: 0.45; cursor: default; }

/* 59 · the 932 px dialog */
html.vcc-lock { overflow: hidden; }
.vcc-backdrop { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(23, 27, 45, 0.45); overscroll-behavior: contain; }
.vcc-dialog { position: relative; width: 932px; max-width: 100%; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); box-sizing: border-box; display: flex; flex-direction: column;
  background: var(--surface); border-radius: 16px; box-shadow: 0 24px 60px rgba(23, 27, 45, 0.22); }
.vcc-dialog:focus { outline: none; }
.vcc-dialog :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.vcc-head { flex: none; padding: 18px 64px 12px 24px; }
.vcc-head h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.4px; line-height: 32px; }
.vcc-head p { margin: 4px 0 0; font-size: 16px; color: var(--text-2); }
.vcc-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border: 0; border-radius: 8px; background: none; color: var(--text-2); display: grid; place-items: center; cursor: pointer; }
.vcc-close .i { font-size: 22px; } .vcc-close:hover { background: var(--border-soft); }
.vcc-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 4px 22px 8px 24px; }
.vcc-strip { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 12px 14px; border-radius: 10px; background: #FDEEF0; color: #B42338; }
.vcc-strip .i { font-size: 20px; flex: none; }
.vcc-strip p { margin: 0; font-size: 14.5px; }
.vcc-strip a { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; color: #B42338; font-weight: 600; }
.vcc-strip a .i { font-size: 15px; }
.vcc-cols { display: grid; grid-template-columns: minmax(0, 1fr) 348px; gap: 14px; align-items: start; }
.vcc-l, .vcc-r { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.vcc-card { padding: 14px 20px 14px; border: 1px solid var(--border); border-radius: 10px; }
.vcc-card h3 { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; }
.vcc-orig h3, .vcc-stills h3 { font-size: 15px; }
.vcc-ti { width: 32px; height: 32px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--indigo-bg); color: var(--indigo); }
.vcc-ti .i { font-size: 18px; }
.vcc-po.vd-poster { width: 100%; height: 262px; margin-top: 12px; }
.vcc-based { margin: 10px 0 0; font-size: 17px; font-weight: 700; }
.vcc-meta { margin: 4px 0 0; font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.vcc-stills ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vcc-stills li { display: flex; flex-direction: column; min-width: 0; }
.vcc-stills .vsh-comp { width: 100%; height: 96px; border-radius: 6px; }
.vcc-stills b { margin-top: 10px; font-size: 13.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vcc-stills li > span { margin-top: 4px; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.vcc-card.vcc-change { padding: 10px 10px 10px 12px; }
.vcc-lines { list-style: none; margin: 8px 0 0; padding: 8px 12px; border-radius: 8px; background: #EEF1FF; display: flex; flex-direction: column; gap: 6px; }
.vcc-lines li { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; align-items: start; font-size: 15px; font-weight: 500; color: var(--indigo); line-height: 1.35; }
.vcc-lines .i { font-size: 20px; margin-top: 0; }
.vcc-card.vcc-keep { padding: 10px 12px; }
.vcc-kl { list-style: none; margin: 4px 0 0; padding: 0 0 0 8px; }
.vcc-kl li { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 24px; align-items: center; min-height: 44px; }
.vcc-kl .i { font-size: 18px; color: var(--text); stroke-width: 2.4; }
.vcc-kl b { display: block; font-size: 14.5px; font-weight: 500; }
.vcc-kl small { display: block; font-size: 12.5px; color: var(--text-2); }
.vcc-none { margin: 8px 0 0 8px; font-size: 14px; color: var(--muted); }
.vcc-card.vcc-model { padding: 0; }
.vcc-mrow { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; row-gap: 8px; padding: 14px 14px 12px; border-bottom: 1px solid var(--border-soft); align-items: center; }
.vcc-mrow label { font-size: 14.5px; font-weight: 500; }
.vcc-sel { grid-column: 2; position: relative; display: block; }
.vcc-sel select { width: 100%; height: 38px; padding: 0 34px 0 12px; border: 1px solid #D9DDE6; border-radius: 6px; background: #fff; font: inherit; font-size: 14.5px; color: var(--text); appearance: none; cursor: pointer; }
.vcc-sel select:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.15); }
.vcc-sel .i { position: absolute; right: 10px; top: 50%; margin-top: -8px; font-size: 16px; color: var(--text-2); pointer-events: none; }
.vcc-crow { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; padding: 12px 14px 14px; align-items: start; }
.vcc-crow > div { display: flex; flex-direction: column; }
.vcc-cl { font-size: 14.5px; font-weight: 500; }
.vcc-crow b { margin-top: 4px; font-size: 24px; font-weight: 800; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; }
.vcc-crow small { margin-top: 4px; font-size: 13px; color: var(--text-2); }
.vcc-foot { flex: none; display: flex; align-items: center; gap: 16px; padding: 12px 22px 18px 24px; }
.vcc-back { height: 44px; padding: 0 26px; font-size: 16px; font-weight: 500; cursor: pointer; }
.vcc-v { margin: 0 auto; font-size: 14.5px; color: var(--text-2); }
.vcc-go { height: 44px; padding: 0 18px; font-size: 16px; gap: 12px; box-shadow: none; cursor: pointer; }
.vcc-go .i { font-size: 19px; }
.vcc-go:disabled { opacity: 0.45; cursor: default; }
.vcc-go[aria-busy="true"] { opacity: 0.85; cursor: progress; }

@media (max-width: 1200px) {
  .vcp-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .vcr-drawer { width: 100vw; }
  .vcr-head { padding: 18px 56px 8px 16px; }
  .vcr-head h2 { font-size: 23px; line-height: 28px; } .vcr-head p { font-size: 14.5px; }
  .vcr-close { top: 12px; right: 8px; width: 44px; height: 44px; }
  .vcr-body { padding: 8px 16px 12px; }
  .vcr-po.vd-poster { height: 170px; }
  .vcr-lrow { flex-wrap: wrap; }
  .vcr-chip { height: 44px; }
  .vcr-tile { width: calc((100% - 16px) / 3); }
  .vcr-add { width: calc((100% - 16px) / 3); }
  .vcr-foot { margin: 0 16px; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); }
  .vcr-foot > * { flex: 1; justify-content: center; height: 48px; padding: 0 12px; }
  .vcp-head { padding: 0 0 12px; }
  .vcp-head h1 { font-size: 26px; } .vcp-head .sub { font-size: 15.5px; }
  .vcp-ch { grid-template-columns: 36px minmax(0, 1fr); row-gap: 8px; }
  .vcp-req { grid-column: 2; justify-self: start; }
  .vcp-po.vd-poster { height: 190px; }
  .vcp-rlist { grid-template-columns: minmax(0, 1fr); }
  .vcp-ver { flex-wrap: wrap; gap: 8px 24px; }
  .vcp-foot > * { flex: 1; justify-content: center; height: 48px; }
  .vcc-backdrop { padding: 0; place-items: end stretch; }
  .vcc-dialog { width: 100%; max-height: 94vh; max-height: 94dvh; border-radius: 16px 16px 0 0; }
  .vcc-head { padding: 16px 56px 10px 16px; }
  .vcc-head h2 { font-size: 22px; line-height: 28px; } .vcc-head p { font-size: 14.5px; }
  .vcc-close { top: 8px; right: 8px; width: 44px; height: 44px; }
  .vcc-body { padding: 4px 16px 8px; }
  .vcc-cols { grid-template-columns: minmax(0, 1fr); }
  .vcc-po.vd-poster { height: 180px; }
  .vcc-stills ul { gap: 8px; }
  .vcc-stills .vsh-comp { height: 64px; }
  .vcc-stills b { font-size: 12.5px; white-space: normal; }
  .vcc-foot { flex-wrap: wrap; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); gap: 8px; }
  .vcc-v { order: -1; flex-basis: 100%; text-align: center; }
  .vcc-back, .vcc-go { flex: 1; justify-content: center; height: 48px; padding: 0 12px; }
}

/* ---------- Content-60 / 61 · Edit in progress (vep-) and Compare versions (cmp-), plan plans/Content-60.md; the players are Content-54's shared vp- player ---------- */
/* 60 · the head: the 32 px back chip, the eyebrow, the 34 px title, the lead */
.vep-head { padding-bottom: 14px; }
.vep-back { display: inline-flex; align-items: center; gap: 9px; height: 32px; padding: 0 13px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface); font-size: 14px; font-weight: 500; color: var(--text); text-decoration: none; }
.vep-back .i { font-size: 16px; color: var(--text-2); }
.vep-back:hover { border-color: #C9D3FB; color: var(--indigo); }
.vep-root :focus-visible, .cmp-root :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
/* three cards: original | new version | the request + the checklist */
.vep-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 494px; gap: 13px; align-items: stretch; }
.vep-card { min-width: 0; padding: 14px 14px 12px; display: flex; flex-direction: column; }
.vep-ch { display: flex; align-items: center; gap: 12px; height: 34px; margin-bottom: 10px; }
.vep-ch-tile { flex: none; width: 32px; height: 32px; border-radius: 7px; display: grid; place-items: center; background: var(--indigo-bg); color: var(--indigo); }
.vep-ch-tile .i { font-size: 19px; }
.vep-ch h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.2px; margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vep-pill { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 6px; background: #F1F3F7; color: var(--text-2); font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.vep-pill.is-ok { background: var(--green-bg); color: var(--green-text); }
.vep-pill.is-fail { background: #FDECEF; color: #B4233A; }
.vep-player { height: 322px; min-width: 0; border-radius: 8px; }
.vep-player .vp { border-radius: 8px; }
/* the processing placeholder, the failure */
.vep-wait, .vep-fail { height: 100%; box-sizing: border-box; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 20px; text-align: center;
  background: #F1F4FA; background-image: linear-gradient(rgba(59, 91, 253, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(59, 91, 253, 0.035) 1px, transparent 1px); background-size: 14px 14px; }
.vep-wait .i { font-size: 52px; color: #5A6275; stroke-width: 1.4; margin-bottom: 8px; }
.vep-wait b, .vep-fail b { font-size: 16px; font-weight: 600; color: var(--text); }
.vep-wait span, .vep-fail span { max-width: 260px; font-size: 15px; line-height: 1.45; color: var(--text-2); }
.vep-fail { background: #FFF6F7; background-image: none; border: 1px solid #F8C9D1; }
.vep-fail-i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #FDECEF; color: #C0263D; margin-bottom: 6px; }
.vep-fail-i .i { font-size: 22px; }
.vep-fail-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.vep-fail-acts .btn-outline, .vep-fail-acts .btn-primary { height: 40px; font-size: 15px; padding: 0 14px; box-shadow: none; text-decoration: none; }
/* the facts: 30 px rows, 108 px labels */
.vep-facts { margin: 16px 0 0; padding: 0 2px; display: flex; flex-direction: column; }
.vep-facts > div { display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: center; min-height: 30px; }
.vep-facts dt { font-size: 14px; color: var(--text-2); }
.vep-facts dd { margin: 0; font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.vep-facts dd.is-dash { color: var(--text-2); }
.vep-facts .vep-st { color: var(--text-2); }
.vep-facts .vep-st.is-ok { color: var(--green-text); font-weight: 500; }
.vep-facts .vep-st.is-ok .i { font-size: 16px; }
.vep-facts .vep-st.is-fail { color: #B4233A; }
.vep-ring { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #D5DBF5; border-top-color: var(--indigo); border-right-color: var(--indigo); animation: vd-rot 0.9s linear infinite; box-sizing: border-box; }
/* the right column */
.vep-side { display: flex; flex-direction: column; gap: 13px; min-width: 0; }
.vep-req { padding: 14px 14px 12px; }
.vep-rows { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.vep-rows > div { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; gap: 4px; }
.vep-rows dt { font-size: 14px; color: var(--text-2); }
.vep-rows dd { margin: 0; min-width: 0; }
.vep-box { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 5px 0 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; color: var(--text); min-width: 0; }
.vep-box > span:first-child, .vep-box:not(.vep-file) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vep-file > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vep-check { flex: 1; padding: 14px 14px 12px; display: flex; flex-direction: column; }
.vep-steps { list-style: none; margin: 0 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.vep-step { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 16px; align-items: start; }
.vep-disc { width: 24px; height: 24px; border-radius: 50%; box-sizing: border-box; border: 2px solid #D5DAE4; display: grid; place-items: center; margin-top: 2px; }
.vep-step.is-done .vep-disc { border: 0; background: var(--green); color: #fff; }
.vep-step.is-done .vep-disc .i { font-size: 14px; stroke-width: 3; }
.vep-step.is-active .vep-disc { border-color: #D5DBF5; border-top-color: var(--indigo); border-right-color: var(--indigo); animation: vd-rot 0.9s linear infinite; }
.vep-step.is-failed .vep-disc { border: 0; background: #F0546A; color: #fff; } .vep-step.is-failed .vep-disc .i { font-size: 13px; stroke-width: 3; }
.vep-step b { display: block; font-size: 15px; font-weight: 600; line-height: 22px; }
.vep-step span { display: block; font-size: 13.5px; line-height: 1.35; color: var(--text-2); }
.vep-step.is-todo b { color: var(--text-2); }
.vep-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--border); }
.vep-foot .btn-outline, .vep-foot .btn-primary { height: 44px; justify-content: center; font-size: 15.5px; font-weight: 600; text-decoration: none; box-shadow: none; }
.vep-foot .btn-primary .i { font-size: 19px; }
.vep-note { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 12.5px; color: var(--text-2); }
.vep-note .i { flex: none; font-size: 15px; color: var(--muted); }

/* 61 · Compare versions: two 484 × 372 players, the change card, one control bar, the footer */
.cmp-head { padding-bottom: 14px; }
.cmp-back { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 8px; font-size: 15px; font-weight: 500; color: var(--text-2); text-decoration: none; }
.cmp-back .i { font-size: 17px; }
.cmp-back:hover { color: var(--indigo); }
.cmp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 386px; grid-template-rows: auto auto; gap: 12px 13px; }
.cmp-pl { min-width: 0; padding: 12px 16px 14px; }
.cmp-ph { display: flex; align-items: center; gap: 10px; height: 30px; margin-bottom: 10px; }
.cmp-ph h2 { margin: 0; font-size: 18px; font-weight: 700; }
.cmp-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 99px; background: #EEF0F4; color: var(--text-2); font-size: 13px; font-weight: 600; }
.cmp-chip.is-new { background: var(--indigo); color: #fff; }
.cmp-ptime { margin-left: auto; font-size: 15px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cmp-player { height: 372px; min-width: 0; }
.cmp-player .vp { border-radius: 6px; }
.cmp-root[data-sync="on"] .cmp-player .vp-bar { display: none; }
.cmp-change { grid-column: 3; grid-row: 1 / span 2; min-width: 0; padding: 16px 18px; display: flex; flex-direction: column; }
.cmp-ch { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cmp-ci { display: grid; place-items: center; color: var(--text-2); } .cmp-ci .i { font-size: 24px; }
.cmp-ch h2 { margin: 0; font-size: 18px; font-weight: 700; }
.cmp-req { margin: 0; padding: 12px 16px; border-radius: 8px; background: #F4F6FA; border: 1px solid var(--border-soft); font-size: 15.5px; line-height: 1.55; color: var(--text); }
.cmp-dh { display: flex; align-items: center; gap: 12px; margin: 20px 0 12px; padding-top: 20px; border-top: 1px solid var(--border-soft); font-size: 16.5px; font-weight: 700; }
.cmp-ok { width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; }
.cmp-ok .i { font-size: 13px; stroke-width: 3; }
.cmp-diff { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: cmp; }
.cmp-diff li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 16px; align-items: center; font-size: 15.5px; color: var(--text-2); counter-increment: cmp; }
.cmp-diff li::before { content: counter(cmp); width: 28px; height: 28px; border-radius: 50%; background: #EEF0F4; color: var(--text-2); display: grid; place-items: center; font-size: 13.5px; font-weight: 600; }
.cmp-diff li:first-child::before { background: var(--indigo); color: #fff; }
.cmp-diff li:first-child { color: var(--text); }
/* the control bar */
.cmp-bar { grid-column: 1 / span 2; min-width: 0; height: 76px; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 0 18px; }
.cmp-play { flex: none; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--indigo); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 10px rgba(59, 91, 253, 0.25); }
.cmp-play .i { font-size: 22px; }
.cmp-play:hover { background: var(--indigo-hover); }
.cmp-i-pause { display: none; }
.cmp-root.is-playing .cmp-i-play { display: none; } .cmp-root.is-playing .cmp-i-pause { display: block; }
.cmp-time { flex: none; min-width: 92px; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--text); }
.cmp-time #cmp-dur { color: var(--text-2); }
.cmp-scrub { position: relative; flex: 1 1 auto; min-width: 80px; height: 28px; cursor: pointer; touch-action: none; border-radius: 6px; }
.cmp-track { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: #E1E5EE; overflow: hidden; }
.cmp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; background: var(--indigo); }
.cmp-knob { position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; border: 1px solid #D5DAE4; box-shadow: 0 1px 4px rgba(23, 27, 45, 0.25); box-sizing: border-box; }
.cmp-root.is-apart .cmp-scrub, .cmp-root.is-apart .cmp-play, .cmp-root.is-apart .cmp-time { opacity: 0.45; }
.cmp-sync { flex: none; display: flex; align-items: center; gap: 10px; margin-left: 24px; font-size: 15.5px; font-weight: 500; }
.cmp-sync > .i { font-size: 20px; color: var(--text-2); }
.cmp-switch { position: relative; flex: none; width: 40px; height: 24px; border: 0; border-radius: 99px; background: #CDD3DF; cursor: pointer; padding: 0; transition: background 0.15s; }
.cmp-switch span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: left 0.15s; }
.cmp-switch[aria-checked="true"] { background: var(--indigo); }
.cmp-switch[aria-checked="true"] span { left: 19px; }
.cmp-vol { flex: none; display: flex; align-items: center; gap: 8px; margin-left: 16px; }
.cmp-mute { width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; display: grid; place-items: center; color: var(--text-2); cursor: pointer; padding: 0; }
.cmp-mute .i { font-size: 22px; } .cmp-mute:hover { background: var(--border-soft); }
.cmp-i-off { display: none; } .cmp-mute[aria-pressed="true"] .cmp-i-on { display: none; } .cmp-mute[aria-pressed="true"] .cmp-i-off { display: block; }
.cmp-vol input { width: 82px; accent-color: var(--indigo); }
/* the footer: Keep left, Request another change centred, Approve right */
.cmp-foot { margin-top: 12px; height: 72px; box-sizing: border-box; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 18px; }
.cmp-foot .btn-outline, .cmp-foot .btn-primary { height: 44px; font-size: 15.5px; justify-content: center; text-decoration: none; }
.cmp-keep { width: 184px; }
.cmp-another { min-width: 320px; }
.cmp-another .i { font-size: 18px; }
.cmp-approve { justify-self: end; min-width: 190px; box-shadow: none; }
.cmp-approve .i { font-size: 19px; }
.cmp-approve.is-busy { opacity: 0.85; cursor: progress; }
.cmp-foot button:disabled { cursor: default; }

@media (max-width: 1200px) {
  .vep-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vep-side { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cmp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cmp-change { grid-column: 1 / -1; grid-row: auto; }
  .cmp-bar { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .vep-grid, .vep-side { grid-template-columns: minmax(0, 1fr); }
  .vep-player { height: min(322px, 90vw); }
  .vep-rows > div { grid-template-columns: minmax(0, 1fr); }
  .vep-foot { grid-template-columns: minmax(0, 1fr); }
  .cmp-grid { grid-template-columns: minmax(0, 1fr); }
  .cmp-player { height: min(372px, 100vw); }
  .cmp-bar { height: auto; flex-wrap: wrap; padding: 12px; row-gap: 10px; }
  .cmp-scrub { flex-basis: calc(100% - 170px); }
  .cmp-sync { margin-left: 0; }
  .cmp-vol { margin-left: auto; }
  .cmp-foot { height: auto; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px; }
  .cmp-keep, .cmp-another, .cmp-approve { width: 100%; min-width: 0; justify-self: stretch; }
}

/* ---------- Content-62 / 63 · Version history (vh2- drawer over Content-54) and Open a previous version (vv- page), plan plans/Content-62.md; the covers are Content-54's vd-poster and Content-49's vsh-comp ---------- */
/* 62 · the 632 px drawer with backdrop (the Content-35 frame) */
html.vh2-lock { overflow: hidden; }
.vh2-backdrop { position: fixed; inset: 0; z-index: 64; background: rgba(23, 27, 45, 0.36); }
.vh2-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 65; width: 652px; max-width: 100vw; box-sizing: border-box; display: flex; flex-direction: column;
  background: var(--surface); box-shadow: -12px 0 40px rgba(23, 27, 45, 0.18); }
.vh2-drawer:focus { outline: none; }
.vh2-drawer :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.vh2-head { position: relative; flex: none; display: flex; align-items: center; padding: 20px 64px 12px 26px; }
.vh2-head h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }
.vh2-close { position: absolute; top: 14px; right: 16px; width: 40px; height: 40px; border: 0; border-radius: 8px; background: none; color: var(--text-2); display: grid; place-items: center; cursor: pointer; }
.vh2-close .i { font-size: 22px; } .vh2-close:hover { background: var(--border-soft); }
.vh2-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 4px 12px 20px 26px; }
/* the current card: the 270 × 154 cover and its text */
.vh2-cur { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 22px; align-items: start; padding: 16px 14px 16px 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.vh2-cur .vd-poster { width: 270px; height: 154px; border-radius: 0 6px 6px 0; }
.vh2-cur-t { min-width: 0; padding-top: 2px; }
.vh2-tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vh2-k { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 6px; background: var(--indigo-bg); color: #2D46C9; font-size: 15px; font-weight: 700; }
.vh2-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 6px; font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.vh2-pill.is-pending_review { background: var(--amber-bg); color: var(--amber-text); }
.vh2-pill.is-approved { background: var(--green-bg); color: var(--green-text); }
.vh2-pill.is-draft { background: #F1F3F7; color: var(--text-2); }
.vh2-cur h3 { margin: 10px 0 6px; font-size: 18px; font-weight: 700; letter-spacing: -0.2px; }
.vh2-cur p { margin: 0; font-size: 15px; line-height: 1.4; color: var(--text-2); }
.vh2-by { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.vh2-av { flex: none; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: #E3E7F2; }
.vh2-av svg { width: 100%; height: 100%; display: block; }
.vh2-by b { display: block; font-size: 14px; font-weight: 600; }
.vh2-by span { display: block; font-size: 13px; color: var(--muted); }
.vh2-sub { margin: 24px 0 10px; font-size: 16px; font-weight: 600; }
.vh2-only { margin: -2px 0 10px; font-size: 14px; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.vh2-only .i { font-size: 16px; color: var(--muted); }
/* the rail: 32 px discs on a 1 px line, the cards */
.vh2-rail { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; position: relative; }
.vh2-item { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; }
.vh2-item::before { content: ""; position: absolute; left: 15px; top: 0; bottom: -10px; width: 1px; background: var(--border); }
.vh2-item:first-child::before { top: 24px; }
.vh2-item:last-child::before { bottom: auto; height: 24px; }
.vh2-item:only-child::before { display: none; }
.vh2-disc { position: relative; z-index: 1; margin-top: 8px; width: 32px; height: 32px; border-radius: 50%; box-sizing: border-box; border: 1px solid #D5DAE4; background: var(--surface); display: grid; place-items: center; font-size: 14.5px; font-weight: 600; color: var(--text-2); }
.vh2-item.is-current .vh2-disc { border: 0; background: var(--indigo); color: #fff; }
.vh2-card { min-width: 0; min-height: 150px; box-sizing: border-box; padding: 12px 14px 10px; border: 1px solid var(--border); border-radius: 10px; display: grid;
  grid-template-columns: 154px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 14px; }
.vh2-item.is-current .vh2-card { background: #F3F5FF; border-color: #D9E0FD; }
.vh2-ch { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; min-width: 0; }
.vh2-ch .vh2-k { height: 22px; font-size: 13.5px; padding: 0 6px; flex: none; }
.vh2-ch h4 { margin: 0; font-size: 15.5px; font-weight: 700; line-height: 22px; min-width: 0; overflow-wrap: anywhere; }
.vh2-ch .vh2-pill { height: 22px; font-size: 13px; flex: none; }
.vh2-when { margin-left: auto; flex: none; text-align: right; font-size: 13px; line-height: 17px; color: var(--text-2); white-space: nowrap; }
.vh2-when small { display: block; font-size: 13px; color: var(--text-2); }
.vh2-thumb { grid-column: 1; grid-row: 2; width: 154px; height: 74px; border-radius: 5px; overflow: hidden; }
.vh2-thumb .vd-poster { width: 100%; height: 100%; border-radius: 5px; }
.vh2-desc { grid-column: 2; grid-row: 2; align-self: start; margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--text-2); padding-top: 4px; }
.vh2-from { grid-column: 1; grid-row: 3; align-self: end; display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--text-2); white-space: nowrap; }
.vh2-from .i { font-size: 13px; color: var(--muted); }
.vh2-acts { grid-column: 2; grid-row: 2 / span 2; align-self: end; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.vh2-acts .btn-outline, .vh2-acts .btn-primary { height: 34px; padding: 0 13px; font-size: 13.5px; font-weight: 500; border-radius: 6px; box-shadow: none; text-decoration: none; }
.vh2-acts .btn-primary:disabled { background: #EEF0F4; color: var(--muted); cursor: default; }

/* 63 · the page: breadcrumb, head, strip, the 878 × 446 player | the details and actions (536 px) */
.vv-root :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.vv-crumbs { display: flex; align-items: center; gap: 12px; margin: 8px 0 16px 8px; font-size: 15px; color: var(--text-2); }
.vv-crumbs .i { font-size: 15px; color: var(--muted); }
.vv-crumbs a { color: var(--text-2); text-decoration: none; }
.vv-crumbs a:hover { color: var(--indigo); }
.vv-crumbs span { color: var(--text); font-weight: 500; }
.vv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 536px; gap: 24px; align-items: start; }
.vv-main { min-width: 0; padding-left: 8px; }
.vv-head { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.vv-head h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.8px; line-height: 1.15; }
.vv-kind { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 6px; background: #EEF0F4; font-size: 15px; font-weight: 500; color: var(--text-2); }
.vv-line { position: relative; display: flex; align-items: center; gap: 10px; margin: 8px 0 14px; font-size: 17px; color: var(--text-2); }
.vv-line b { font-weight: 600; color: var(--text); }
.vv-info { width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; color: var(--text-2); cursor: pointer; padding: 0; }
.vv-info .i { font-size: 20px; } .vv-info:hover { color: var(--indigo); }
.vv-tip { position: absolute; left: 0; top: calc(100% + 8px); z-index: 20; max-width: 360px; padding: 9px 12px; border-radius: 8px; background: #1F2433; color: #fff; font-size: 13.5px; line-height: 1.4; box-shadow: 0 8px 24px rgba(23, 27, 45, 0.25); }
.vv-tip[hidden] { display: none; }
.vv-strip { display: flex; align-items: center; gap: 12px; min-height: 46px; box-sizing: border-box; padding: 0 16px; margin-bottom: 14px; border: 1px solid #C9D6FB; border-radius: 6px; background: #F1F5FF; }
.vv-strip[hidden] { display: none; }
.vv-si { flex: none; width: 16px; height: 16px; border-radius: 3px; background: var(--indigo); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 800; font-family: Georgia, serif; }
.vv-strip p { margin: 0; flex: 1; font-size: 15.5px; color: var(--text-2); }
.vv-strip p b { font-weight: 500; color: #2D46C9; }
.vv-open { flex: none; display: inline-flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 600; color: #2D46C9; text-decoration: none; }
.vv-open .i { font-size: 17px; } .vv-open:hover { text-decoration: underline; }
.vv-player { height: 446px; min-width: 0; }
.vv-player .vp { border-radius: 6px; }
.vv-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.vv-details { padding: 16px 20px 20px; }
.vv-dh { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.vv-dh h2 { margin: 0; font-size: 19px; font-weight: 700; margin-right: auto; }
.vv-pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 6px; background: var(--green-bg); color: var(--green-text); border: 1px solid #BFE7D3; font-size: 13.5px; font-weight: 500; }
.vv-pill .i { font-size: 16px; }
.vv-dl { margin: 0; display: flex; flex-direction: column; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.vv-dl > div { display: grid; grid-template-columns: 154px minmax(0, 1fr); align-items: center; min-height: 38px; }
.vv-dl dt { display: flex; align-items: center; gap: 14px; font-size: 14.5px; color: var(--text-2); }
.vv-dl dt .i { font-size: 21px; color: var(--muted); }
.vv-dl dd { margin: 0; font-size: 15.5px; font-weight: 500; color: var(--text); }
.vv-refrow { align-items: start !important; padding-top: 6px; }
.vv-refrow dt { padding-top: 6px; }
.vv-refrow dd { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: start; font-weight: 400; }
.vv-refimg { width: 120px; height: 82px; border-radius: 6px; overflow: hidden; display: block; }
.vv-refimg .vsh-comp { width: 100%; height: 100%; }
.vv-refnote { font-size: 14px; line-height: 1.45; color: var(--text-2); }
.vv-dsub { margin: 18px 0 8px; font-size: 17px; font-weight: 700; }
.vv-desc { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text-2); }
.vv-actions { padding: 16px 18px 18px; }
.vv-actions h2 { margin: 0 0 16px; font-size: 18px; font-weight: 700; }
.vv-btns { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vv-btns .btn-primary, .vv-btns .btn-outline { height: 44px; padding: 0 10px; font-size: 14px; font-weight: 600; gap: 6px; white-space: nowrap; box-shadow: none; text-decoration: none; }
.vv-btns .i { font-size: 18px; }
.vv-btns .btn-outline { color: #2D46C9; } .vv-btns .btn-outline .i { color: #2D46C9; }
.vv-make:disabled { background: var(--green-bg); color: var(--green-text); cursor: default; }
.vv-dl-w { position: relative; display: flex; }
.vv-down { border-radius: var(--radius) 0 0 var(--radius) !important; color: var(--text) !important; }
.vv-down .i { color: var(--text) !important; }
.vv-caret { width: 32px; padding: 0 !important; justify-content: center; margin-left: -1px; border-radius: 0 var(--radius) var(--radius) 0 !important; color: var(--text) !important; }
.vv-caret .i { color: var(--text) !important; font-size: 16px !important; }
.vv-menu { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 30; min-width: 210px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(23, 27, 45, 0.14); }
.vv-menu[hidden] { display: none; }
.vv-mitem { width: 100%; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 14.5px; color: var(--text); cursor: pointer; text-align: left; }
.vv-mitem .i { font-size: 18px; color: var(--muted); }
.vv-mitem:hover, .vv-mitem:focus-visible { background: #F4F6FA; outline: none; }

@media (max-width: 1200px) {
  .vv-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .vh2-backdrop { z-index: 88; } .vh2-drawer { width: 100vw; z-index: 89; }   /* above the sticky phone top bar (z 80) */
  .vh2-head { padding: 16px 56px 10px 16px; } .vh2-head h2 { font-size: 19px; }
  .vh2-body { padding: 4px 10px 16px 14px; }
  .vh2-cur { grid-template-columns: minmax(0, 1fr); padding: 0 0 12px; gap: 12px; }
  .vh2-cur .vd-poster { width: auto; height: 170px; border-radius: 0; }
  .vh2-cur-t { padding: 0 12px; }
  .vh2-item { grid-template-columns: 38px minmax(0, 1fr); }
  .vh2-card { grid-template-columns: 96px minmax(0, 1fr); padding: 10px; }
  .vh2-ch { flex-wrap: wrap; }
  .vh2-when { margin-left: 0; text-align: left; flex-basis: 100%; white-space: normal; }
  .vh2-when small { display: inline; margin-left: 4px; }
  .vh2-thumb { width: 96px; height: 54px; }
  .vh2-acts { grid-column: 1 / -1; grid-row: 4; justify-content: flex-start; align-self: start; }
  .vh2-acts .btn-outline, .vh2-acts .btn-primary { height: 44px; }
  .vv-crumbs { margin-left: 0; flex-wrap: wrap; gap: 8px; }
  .vv-main { padding-left: 0; }
  .vv-head h1 { font-size: 26px; }
  .vv-line { flex-wrap: wrap; font-size: 15px; }
  .vv-strip { flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
  .vv-player { height: min(446px, 120vw); }
  .vv-dl > div { grid-template-columns: 124px minmax(0, 1fr); }
  .vv-refrow dd { grid-template-columns: minmax(0, 1fr); }
  .vv-btns > * { flex: 1 1 100%; justify-content: center; }
  .vv-dl-w .vv-down { flex: 1; justify-content: center; }
}


/* ---------- Content-56 … 63 · production additions (vk-): the real cover pictures inside Content-54's vd-poster / vd-portrait, logo references,
   the post slides of the compare page (Content-61) and the version page (Content-63) ---------- */
.vd-po-art img, .vd-pt-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vk-logo { position: relative; overflow: hidden; }
.vk-logo img { position: relative; z-index: 1; max-width: 72%; max-height: 72%; object-fit: contain; display: block; }
.cmp-slides, .vv-slides { display: flex; flex-direction: column; align-items: stretch; gap: 10px; height: 100%; }
.cmp-slide { flex: 1 1 auto; min-height: 0; margin: 0; border-radius: 6px; overflow: hidden; background: #F1F4FA; display: grid; place-items: center; }
.cmp-slide img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.cmp-noslide { margin: auto; font-size: 14.5px; color: var(--muted); }
.cmp-sbar { justify-content: center; gap: 16px; }
.cmp-sbar .cmp-time { min-width: 0; text-align: center; }
.cmp-sbar .cmp-mute:disabled, .vv-snav .cmp-mute:disabled { opacity: 0.4; cursor: default; }
.vv-snav { flex: none; display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 14.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.vk-logo:has(img) { background-color: #DDE5FF; background-image: linear-gradient(rgba(59, 91, 253, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(59, 91, 253, 0.1) 1px, transparent 1px); }
.vcp-img .vk-logo:has(img)::before { display: none; }

/* ---------- Content-64 · Create a format variant (fv-), plan plans/Content-64.md; the frames are Content-49's vsh-comp cut from the pack drawing ---------- */
.fv-root :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.fv-head { padding-bottom: 14px; }
.fv-back { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 8px; font-size: 15px; font-weight: 500; color: var(--text-2); text-decoration: none; }
.fv-back .i { font-size: 17px; }
.fv-back:hover { color: var(--indigo); }
/* three cards: the original | the formats and the preview | the settings */
.fv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 444px; gap: 16px; align-items: stretch; }
.fv-card { min-width: 0; padding: 16px 18px 18px; }
.fv-ch { display: flex; align-items: center; gap: 12px; height: 32px; margin-bottom: 18px; }
.fv-ch-tile { flex: none; width: 32px; height: 32px; border-radius: 7px; display: grid; place-items: center; background: var(--indigo-bg); color: var(--indigo); }
.fv-ch-tile .i { font-size: 19px; }
.fv-ch h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.2px; }
/* the original: the 232 × 438 frame + the facts */
.fv-obody { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 18px; align-items: start; }
.fv-oframe { position: relative; width: 232px; height: 438px; border-radius: 8px; overflow: hidden; }
.fv-oframe .vsh-comp, .fv-frame .vsh-comp { width: 100%; height: 100%; border-radius: inherit; }
.fv-dur { position: absolute; z-index: 3; left: 10px; bottom: 10px; height: 26px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 6px; background: rgba(5, 10, 30, 0.72); color: #fff; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fv-ofacts { min-width: 0; padding-top: 2px; }
.fv-ofacts h3 { margin: 0 0 16px; font-size: 17px; font-weight: 700; line-height: 1.35; }
.fv-ofacts dl { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.fv-ofacts dt { font-size: 14.5px; color: var(--text-2); }
.fv-ofacts dd { margin: 2px 0 0; font-size: 16px; color: var(--text); }
/* the format tiles: 136 × 102, the selected one indigo with the ✓ badge */
.fv-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fv-tile { position: relative; height: 102px; min-width: 0; border: 1px solid var(--border); border-radius: 8px; background: #F7F8FB; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font: inherit; font-size: 15px; color: var(--text-2); cursor: pointer; padding: 6px; }
.fv-tile:hover:not(:disabled) { border-color: #C9D3FB; }
.fv-shape { display: block; border: 2px solid currentColor; border-radius: 3px; margin-bottom: 8px; box-sizing: border-box; color: var(--text-2); }
.fv-tile b { font-weight: 500; line-height: 20px; }
.fv-tile span.r { line-height: 20px; }
.fv-tile[aria-checked="true"] { border: 2px solid var(--indigo); background: #F3F6FF; color: var(--indigo); padding: 5px; }
.fv-tile[aria-checked="true"] .fv-shape { color: var(--indigo); }
.fv-badge { position: absolute; top: -9px; right: -9px; width: 22px; height: 22px; border-radius: 50%; background: var(--indigo); color: #fff; display: none; place-items: center; box-shadow: 0 0 0 2px #fff; }
.fv-badge .i { font-size: 12px; stroke-width: 3; }
.fv-tile[aria-checked="true"] .fv-badge { display: grid; }
.fv-tile:disabled { cursor: not-allowed; opacity: 0.55; }
.fv-tile small { font-size: 11.5px; line-height: 1.25; color: var(--muted); text-align: center; }
.fv-unsup { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--amber-bg); color: var(--amber-text); font-size: 14px; line-height: 1.4; }
.fv-unsup[hidden] { display: none; }
.fv-unsup .i { flex: none; font-size: 17px; margin-top: 1px; }
.fv-ph { display: flex; align-items: center; gap: 10px; margin: 20px 0 10px; font-size: 15px; font-weight: 500; color: var(--text); }
.fv-ph .i { font-size: 20px; color: var(--text-2); }
.fv-stage { height: 302px; border-radius: 8px; background: #F4F6FA; border: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fv-frame { position: relative; height: 100%; max-width: 100%; border-radius: 0; overflow: hidden; }
.fv-frame.is-wide { height: auto; width: 100%; }
.fv-safe { position: absolute; inset: 6%; z-index: 4; border: 1.5px dashed rgba(255, 255, 255, 0.85); pointer-events: none; }
.fv-root.is-video-unsupported .fv-frame { opacity: 0.35; }
/* the settings */
.fv-sh { margin: 0; font-size: 17px; font-weight: 700; }
.fv-sp { margin: 4px 0 12px; font-size: 14px; color: var(--text-2); }
.fv-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0; }
.fv-pos { height: 42px; border: 1px solid var(--border); border-radius: 7px; background: #F7F8FB; font: inherit; font-size: 15.5px; color: var(--text); cursor: pointer; }
.fv-pos:hover { border-color: #C9D3FB; }
.fv-pos[aria-checked="true"] { border: 1.5px solid var(--indigo); background: #F3F6FF; color: var(--indigo); font-weight: 500; }
.fv-crop { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 16px; padding: 14px 16px; border-radius: 8px; background: #F4F6FA; }
.fv-crop .i { font-size: 28px; color: var(--text-2); margin-top: 4px; }
.fv-crop p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.fv-sw { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 18px; align-items: center; min-height: 60px; margin-top: 8px; }
.fv-sw:first-of-type { margin-top: 18px; }
.fv-swi { width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-2); }
.fv-swi .i { font-size: 21px; }
.fv-sw b { display: block; font-size: 16px; font-weight: 600; }
.fv-sw div span { display: block; margin-top: 3px; font-size: 13.5px; color: var(--text-2); }
.fv-switch { position: relative; flex: none; width: 40px; height: 24px; border: 0; border-radius: 99px; background: #CDD3DF; cursor: pointer; padding: 0; transition: background 0.15s; }
.fv-switch span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: left 0.15s; }
.fv-switch[aria-checked="true"] { background: var(--indigo); }
.fv-switch[aria-checked="true"] span { left: 19px; }
.fv-info { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 14px; padding: 14px 16px; border-radius: 8px; background: #EEF3FF; }
.fv-model { margin-top: 14px; }                                                    /* backlog 1.12: the format variant's model select */
.fv-ii { width: 20px; height: 20px; border-radius: 50%; background: var(--indigo); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 800; font-family: Georgia, serif; margin-top: 1px; }
.fv-info p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
/* the footer */
.fv-foot { margin-top: 14px; height: 70px; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-end; gap: 32px; padding: 0 18px; }
.fv-foot .btn-outline, .fv-foot .btn-primary { height: 44px; font-size: 16px; font-weight: 500; justify-content: center; text-decoration: none; }
.fv-cancel { min-width: 96px; }
.fv-go { min-width: 196px; box-shadow: none; }
.fv-go:disabled { opacity: 0.5; cursor: not-allowed; }
.fv-go.is-busy { opacity: 0.85; cursor: progress; }
.fv-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; animation: vd-rot 0.8s linear infinite; display: inline-block; }

@media (max-width: 1200px) {
  .fv-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fv-settings { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .fv-grid { grid-template-columns: minmax(0, 1fr); }
  .fv-card { padding: 14px 12px; }
  .fv-obody { grid-template-columns: 124px minmax(0, 1fr); gap: 14px; }
  .fv-oframe { width: 124px; height: 220px; }
  .fv-tile { height: 96px; font-size: 14px; }
  .fv-stage { height: 240px; }
  .fv-foot { height: auto; flex-direction: column-reverse; gap: 10px; padding: 12px; }
  .fv-foot > * { width: 100%; }
}

/* ---------- Content-65 · Create a language variant (lv-), plan plans/Content-65.md; the reference frame is Content-54's vd-poster; the flags are small SVGs of our own ---------- */
.lv-root :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.lv-head { padding-bottom: 14px; }
.lv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 590px; gap: 14px; align-items: stretch; }
.lv-card { min-width: 0; padding: 20px 28px 22px; }
/* the language row: two selects and the arrow */
.lv-langs { display: grid; grid-template-columns: minmax(0, 350px) 64px minmax(0, 350px); align-items: end; }
.lv-lf { min-width: 0; position: relative; }
.lv-lf label { display: block; margin-bottom: 7px; font-size: 15px; font-weight: 500; color: var(--text); }
.lv-sel { position: relative; display: flex; align-items: center; height: 42px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.lv-sel:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.14); }
.lv-sel select { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0 40px 0 48px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 15.5px; color: var(--text);
  appearance: none; -webkit-appearance: none; cursor: pointer; }
.lv-sel select:focus-visible { outline: none; }
.lv-sel.is-ro { background: #FAFBFD; } .lv-sel.is-ro select { cursor: default; color: var(--text); opacity: 1; }
.lv-sel > .i { position: absolute; right: 14px; top: 50%; margin-top: -8px; font-size: 16px; color: var(--text-2); pointer-events: none; }
.lv-flag { position: absolute; left: 14px; top: 50%; margin-top: -7px; width: 22px; height: 14px; border-radius: 2px; overflow: hidden; pointer-events: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); }
.lv-flag svg { display: block; width: 100%; height: 100%; }
.lv-arrow { height: 42px; display: grid; place-items: center; color: var(--text-2); } .lv-arrow .i { font-size: 22px; }
.lv-err { position: absolute; left: 0; top: 100%; margin: 4px 0 0; display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: #C0263D; }
.lv-err[hidden] { display: none; }
.lv-err .i { font-size: 15px; }
/* the two columns split by a 1 px rule */
.lv-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 44px; }
.lv-col { min-width: 0; padding-right: 26px; }
.lv-tcol { padding: 0 0 0 26px; border-left: 1px solid var(--border-soft); }
.lv-col h3 { margin: 0; font-size: 17px; font-weight: 700; }
.lv-col h3 span { color: #2D46C9; }
.lv-meta { margin: 4px 0 0; font-size: 14px; color: var(--text-2); }
.lv-th { display: flex; align-items: flex-start; gap: 12px; }
.lv-th > div { flex: 1; min-width: 0; }
.lv-tr { flex: none; height: 36px; padding: 0 12px; font-size: 14.5px; font-weight: 600; gap: 7px; color: var(--indigo); }
.lv-tr .i { font-size: 17px; color: var(--indigo); }
.lv-tr:disabled { opacity: 0.6; cursor: progress; }
.lv-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(59, 91, 253, 0.25); border-top-color: var(--indigo); animation: vd-rot 0.8s linear infinite; display: inline-block; }
.lv-note { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 -8px; padding: 8px 10px; border-radius: 7px; background: var(--amber-bg); color: var(--amber-text); font-size: 13.5px; line-height: 1.4; }
.lv-note[hidden] { display: none; }
.lv-note .i { flex: none; font-size: 16px; margin-top: 1px; }
.lv-rows { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 28px; }
.lv-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: center; }
.lv-time { display: grid; place-items: center; height: 38px; border-radius: 6px; background: #F1F3F7; font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lv-src { min-height: 78px; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 15px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.lv-tw { position: relative; min-width: 0; }
.lv-tw textarea { display: block; width: 100%; height: 78px; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 15px; line-height: 1.45;
  color: var(--text); resize: vertical; background: var(--surface); }
.lv-tw textarea:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.14); }
.lv-tw textarea::placeholder { color: var(--muted-2); }
.lv-tw.is-invalid textarea { border-color: #E4576C; }
.lv-n { position: absolute; right: 8px; bottom: 5px; font-size: 11.5px; color: var(--muted); pointer-events: none; }
.lv-n.is-over { color: #C0263D; font-weight: 600; }
.lv-rerr { grid-column: 2; margin: -4px 0 0; font-size: 13px; color: #C0263D; }
.lv-rerr[hidden] { display: none; }
/* the reference card: the 548 × 238 frame, the options */
.lv-side { min-width: 0; padding: 16px 20px 18px; }
.lv-rh { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.lv-rh h2 { margin: 0; font-size: 19px; font-weight: 700; margin-right: auto; }
.lv-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 6px; background: #EEF0F4; font-size: 14px; color: var(--text-2); }
.lv-ref { height: 238px; }
.lv-ref .vd-poster { width: 100%; height: 100%; }
.lv-oh { margin: 24px 0 10px; font-size: 17px; font-weight: 700; }
.lv-opts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lv-model { margin-top: 16px; }                                                    /* backlog 1.12: the language variant's model select */
.lv-opt { display: grid; grid-template-columns: 44px 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 48px; }
.lv-oi { width: 44px; height: 44px; border-radius: 8px; background: #EEF3FF; color: var(--indigo); display: grid; place-items: center; }
.lv-oi .i { font-size: 21px; }
.lv-cb { position: relative; width: 20px; height: 20px; align-self: start; margin-top: 3px; }
.lv-cb input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.lv-box { width: 20px; height: 20px; border-radius: 4px; box-sizing: border-box; border: 1.5px solid #B9C0CF; background: #fff; display: grid; place-items: center; color: #fff; pointer-events: none; }
.lv-box .i { font-size: 13px; stroke-width: 3; opacity: 0; }
.lv-cb input:checked + .lv-box { background: var(--indigo); border-color: var(--indigo); }
.lv-cb input:checked + .lv-box .i { opacity: 1; }
.lv-cb input:focus-visible + .lv-box { outline: 2px solid var(--indigo); outline-offset: 2px; }
.lv-ot { min-width: 0; }
.lv-ot label { display: block; font-size: 15px; font-weight: 600; cursor: pointer; }
.lv-ot span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--text-2); }
.lv-avail { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 99px; background: var(--green-bg); color: var(--green-text); font-size: 13px; font-weight: 500; }
.lv-avail .i { font-size: 15px; }
/* the footer */
.lv-foot { margin-top: 14px; min-height: 84px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 18px 8px 14px; }
.lv-foot .btn-outline { height: 44px; min-width: 88px; font-size: 16px; font-weight: 500; justify-content: center; text-decoration: none; }
.lv-go-w { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.lv-go { height: 42px; font-size: 15.5px; padding: 0 18px; box-shadow: none; }
.lv-go .i { font-size: 19px; }
.lv-go.is-busy { opacity: 0.85; cursor: progress; }
.lv-fnote { margin: 0; font-size: 12.5px; color: var(--text-2); }
.lv-ferr { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: #C0263D; }
.lv-ferr[hidden] { display: none; }
.lv-ferr .i { font-size: 15px; }

@media (max-width: 1200px) {
  .lv-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .lv-card { padding: 14px 12px; }
  .lv-langs { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .lv-arrow { height: 24px; transform: rotate(90deg); }
  .lv-err { position: static; }
  .lv-cols { grid-template-columns: minmax(0, 1fr); margin-top: 22px; gap: 24px; }
  .lv-col { padding: 0; }
  .lv-tcol { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--border-soft); }
  .lv-row { grid-template-columns: 76px minmax(0, 1fr); }
  .lv-rows { gap: 14px; }
  .lv-side { padding: 14px 12px; }
  .lv-ref { height: 180px; }
  .lv-foot { flex-direction: column-reverse; align-items: stretch; padding: 12px; }
  .lv-go-w { align-items: stretch; }
  .lv-go { justify-content: center; }
  .lv-fnote { text-align: center; }
}

/* ---------- Content-66 · Create video cover (vcv-), plan plans/Content-66.md; the frames are Content-49's vsh-comp cut from the pack drawings ---------- */
.vcv-root :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.vcv-head { padding-bottom: 14px; }
.vcv-root .ct-subnav { margin-bottom: 14px; }
.vcv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 532px; gap: 13px; align-items: stretch; }
.vcv-ch { display: flex; align-items: center; gap: 14px; height: 34px; margin-bottom: 14px; }
.vcv-ch-tile { flex: none; width: 32px; height: 32px; border-radius: 7px; display: grid; place-items: center; background: var(--indigo-bg); color: var(--indigo); }
.vcv-ch-tile .i { font-size: 19px; }
.vcv-ch h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.2px; }
.vcv-seg { margin-left: auto; display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: 8px; }
.vcv-seg[hidden] { display: none; }
.vcv-seg button { height: 30px; padding: 0 12px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 14px; font-weight: 500; color: var(--text-2); cursor: pointer; }
.vcv-seg button[aria-pressed="true"] { background: var(--indigo-bg); color: var(--indigo); }
/* the preview card: the 858 × 354 stage with the 9:16 cover, the frame row */
.vcv-prev { min-width: 0; padding: 16px 18px 16px; }
.vcv-stage { position: relative; height: 354px; border-radius: 8px; background: #F4F6FA; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vcv-cover { position: relative; height: 100%; aspect-ratio: 9 / 16; overflow: hidden; container-type: inline-size; isolation: isolate; color: #fff; background: #0E1B3D; }
.vcv-cover .vcv-art { position: absolute; inset: 0; z-index: 0; }
.vcv-cover .vcv-art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vcv-cover::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(8, 17, 45, 0.78) 0%, rgba(8, 17, 45, 0.25) 70%, rgba(8, 17, 45, 0.05) 100%); pointer-events: none; }
.vcv-brand { position: absolute; z-index: 2; left: 8cqw; top: 7cqw; display: flex; align-items: center; gap: 4cqw; font-size: 8.4cqw; font-weight: 600; }
.vcv-brand span { width: 15cqw; height: 15cqw; border-radius: 3cqw; background: #2F5BFF; display: grid; place-items: center; font-size: 6.4cqw; font-weight: 800; }
.vcv-hl { position: absolute; z-index: 2; left: 8cqw; right: 8cqw; top: 28cqw; font-size: 17.5cqw; font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; overflow-wrap: anywhere; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); }
.vcv-hl em { font-style: normal; color: var(--vcv-brand, #4FA8FF); }
/* the generated directions */
.vcv-cover.d-navy { background: radial-gradient(120% 90% at 90% 90%, #1E3A8A 0%, #0E1B3D 55%, #070D22 100%); }
.vcv-cover.d-navy .vcv-art { top: 42%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%); mask-image: linear-gradient(180deg, transparent 0, #000 30%); }
.vcv-cover.d-navy::after { background: linear-gradient(180deg, rgba(8, 17, 45, 0.2) 0%, rgba(8, 17, 45, 0) 60%); }
.vcv-cover.d-gradient { background: linear-gradient(150deg, #3B5BFD 0%, #2F7BFF 45%, #20C4F4 100%); }
.vcv-cover.d-gradient .vcv-art { top: 46%; opacity: 0.85; }
.vcv-cover.d-gradient::after { background: linear-gradient(180deg, rgba(10, 20, 80, 0.15) 0%, rgba(10, 20, 80, 0.45) 100%); }
.vcv-cover.d-gradient .vcv-hl em { color: #0E1B3D; }
.vcv-cover.d-overlay::after { background: rgba(5, 10, 30, 0.58); }
.vcv-cover.d-white { background: #FFFFFF; color: #0E1B3D; }
.vcv-cover.d-white .vcv-art { top: 50%; left: 8cqw; right: 8cqw; bottom: 8cqw; border-radius: 3cqw; overflow: hidden; background: #0E1B3D; }
.vcv-cover.d-white::after { display: none; }
.vcv-cover.d-white .vcv-hl { text-shadow: none; }
.vcv-cover.d-white .vcv-brand span { color: #fff; }
.vcv-gtag { position: absolute; z-index: 3; right: 4cqw; bottom: 4cqw; display: inline-flex; align-items: center; gap: 1.6cqw; padding: 1.4cqw 3cqw; border-radius: 99px; background: rgba(255, 255, 255, 0.92); color: #1E3A8A; font-size: 4.6cqw; font-weight: 600; }
.vcv-gtag .i { font-size: 5cqw; }
.vcv-busy { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(244, 246, 250, 0.82); font-size: 15.5px; font-weight: 500; color: var(--text); }
.vcv-busy[hidden] { display: none; }
.vcv-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #D5DBF5; border-top-color: var(--indigo); animation: vd-rot 0.8s linear infinite; }
.vcv-fh { display: flex; align-items: center; gap: 12px; margin: 16px 0 10px; font-size: 15px; color: var(--text); }
.vcv-useframe { height: 32px; padding: 0 11px; font-size: 13.5px; font-weight: 600; gap: 6px; margin-left: 4px; }
.vcv-useframe .i { font-size: 15px; }
.vcv-ftime { margin-left: auto; color: var(--text-2); font-variant-numeric: tabular-nums; }
.vcv-frames { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.vcv-frame { position: relative; height: 84px; min-width: 0; padding: 0; border: 0; border-radius: 6px; background: #0E1B3D; overflow: hidden; cursor: pointer; }
.vcv-frame .vsh-comp { width: 100%; height: 100%; border-radius: 6px; }
.vcv-frame .vsh-comp::after { background: linear-gradient(0deg, rgba(8, 17, 45, 0.35) 0%, rgba(8, 17, 45, 0) 60%); }
.vcv-frame:hover { box-shadow: 0 0 0 2px #C9D3FB; }
.vcv-frame[aria-checked="true"] { box-shadow: 0 0 0 3px var(--indigo); }
.vcv-frame:focus-visible { outline-offset: 3px; }
.vcv-ftag { position: absolute; z-index: 3; left: 50%; bottom: 5px; transform: translateX(-50%); display: none; height: 24px; padding: 0 9px; align-items: center; border-radius: 6px; background: var(--indigo); color: #fff; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vcv-frame[aria-checked="true"] .vcv-ftag { display: inline-flex; }
/* the settings card */
.vcv-set { min-width: 0; padding: 16px 18px 16px; display: flex; flex-direction: column; }
.vcv-field { margin-bottom: 14px; }
.vcv-field label, .vcv-refs legend { display: block; margin-bottom: 7px; font-size: 16px; font-weight: 700; color: var(--text); padding: 0; }
.vcv-star { color: #E4576C; }
.vcv-field input { display: block; width: 100%; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 15px; color: var(--text); }
.vcv-field input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.14); }
.vcv-field.is-invalid input { border-color: #E4576C; }
.vcv-u { display: flex; align-items: flex-start; gap: 10px; margin-top: 4px; }
.vcv-n { margin-left: auto; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.vcv-n.is-over { color: #C0263D; font-weight: 600; }
.vcv-err { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; color: #C0263D; }
.vcv-err[hidden] { display: none; }
.vcv-err .i { font-size: 14px; }
.vcv-sel { position: relative; }
.vcv-sel select { display: block; width: 100%; height: 40px; box-sizing: border-box; padding: 0 40px 0 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); font: inherit; font-size: 15px;
  color: var(--text); appearance: none; -webkit-appearance: none; cursor: pointer; }
.vcv-sel select:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.14); }
.vcv-sel .i { position: absolute; right: 13px; top: 50%; margin-top: -8px; font-size: 16px; color: var(--text-2); pointer-events: none; }
.vcv-hint { margin: 6px 0 0; font-size: 13px; color: var(--text-2); }
.vcv-refs { margin: 0 0 12px; padding: 0; border: 0; min-width: 0; }
.vcv-cb { position: relative; display: flex; align-items: center; gap: 14px; min-height: 44px; font-size: 15px; cursor: pointer; }
.vcv-cb input { position: absolute; left: 0; top: 50%; width: 20px; height: 20px; margin: -10px 0 0; opacity: 0; cursor: pointer; }
.vcv-box { flex: none; width: 20px; height: 20px; border-radius: 4px; box-sizing: border-box; border: 1.5px solid #B9C0CF; display: grid; place-items: center; color: #fff; }
.vcv-box .i { font-size: 13px; stroke-width: 3; opacity: 0; }
.vcv-cb input:checked + .vcv-box { background: var(--indigo); border-color: var(--indigo); }
.vcv-cb input:checked + .vcv-box .i { opacity: 1; }
.vcv-cb input:focus-visible + .vcv-box { outline: 2px solid var(--indigo); outline-offset: 2px; }
.vcv-rthumb, .vcv-rlogo { flex: none; width: 38px; height: 38px; border-radius: 6px; overflow: hidden; }
.vcv-rthumb .vsh-comp { width: 100%; height: 100%; border-radius: 6px; }
.vcv-rthumb .vsh-comp-mark, .vcv-rthumb .vsh-comp::after { display: none; }
.vcv-rlogo { display: grid; place-items: center; background: #2F5BFF; color: #fff; font-size: 14px; font-weight: 800; }
.vcv-noconn { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: #FDECEF; color: #B4233A; font-size: 14px; }
.vcv-noconn[hidden] { display: none; }
.vcv-noconn .i { flex: none; font-size: 17px; }
.vcv-noconn a { margin-left: auto; font-weight: 600; color: #B4233A; }
.vcv-acts { margin-top: auto; display: flex; justify-content: flex-end; gap: 14px; }
.vcv-acts .btn-primary, .vcv-acts .btn-outline { height: 42px; font-size: 15.5px; padding: 0 18px; box-shadow: none; gap: 10px; }
.vcv-acts .i { font-size: 18px; }
.vcv-gen:disabled { opacity: 0.5; cursor: not-allowed; }
.vcv-gen.is-busy { opacity: 0.85; cursor: progress; }
.vcv-use:disabled { background: #F1F3F7; color: var(--muted); border-color: #E6E8EF; cursor: not-allowed; }
.vcv-bspin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; animation: vd-rot 0.8s linear infinite; display: inline-block; }

@media (max-width: 1200px) {
  .vcv-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .vcv-prev, .vcv-set { padding: 14px 12px; }
  .vcv-stage { height: 330px; }
  .vcv-fh { flex-wrap: wrap; }
  .vcv-frames { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vcv-frame { height: 64px; }
  .vcv-acts { flex-direction: column; }
  .vcv-acts > * { justify-content: center; height: 46px !important; }
}

/* ---------- Content-67 / 68 / 69 · Review queue (rq-), Final content review (rvp-) and Review decision (rvd-), plan plans/Content-67.md; the thumbnails are Content-49's vsh-comp, the covers Content-54's vd-poster, the player Content-54's shared vp- player ---------- */
.rq-root :focus-visible, .rvp-root :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
/* 67 · the head, then the sub-navigation row with the two counters at its right */
.rq-head { padding-bottom: 14px; }
.rq-navrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px; }
.rq-counts { display: flex; align-items: center; gap: 10px; flex: none; }
.rq-count { display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  font-size: 14.5px; color: var(--text); white-space: nowrap; }
.rq-count b { font-weight: 600; font-variant-numeric: tabular-nums; }
.rq-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px var(--amber-bg); }
.rq-count.is-changes .rq-dot { background: var(--red); box-shadow: 0 0 0 3px #FDECEF; }
/* the two cards: the table | the 340 px side card */
.rq-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.rq-grid.is-closed { grid-template-columns: minmax(0, 1fr); }
.rq-grid.is-closed .rq-side { display: none; }
.rq-card { min-width: 0; padding: 14px 14px 18px; }
.rq-filters { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.rq-search { position: relative; display: flex; align-items: center; width: 352px; max-width: 100%; height: 40px; }
.rq-search .i { position: absolute; left: 14px; font-size: 17px; color: var(--muted); pointer-events: none; }
.rq-search input { width: 100%; height: 100%; box-sizing: border-box; padding: 0 12px 0 44px; border: 1px solid #D9DDE6; border-radius: 8px; background: #fff; font: inherit; font-size: 14.5px; color: var(--text); }
.rq-search input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.15); }
.rq-dd { position: relative; }
.rq-ddb { display: inline-flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: 8px; background: #F7F8FB; font: inherit; font-size: 14.5px; color: var(--text); cursor: pointer; white-space: nowrap; }
.rq-ddb .i { font-size: 16px; color: var(--text-2); }
.rq-ddb:hover, .rq-ddb[aria-expanded="true"] { border-color: #C9D3FB; }
.rq-ddb.is-set { background: var(--indigo-bg); border-color: #C9D3FB; color: var(--indigo); }
.rq-menu, .rq-rowmenu { position: absolute; z-index: 30; min-width: 184px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(23, 27, 45, 0.14); }
.rq-menu { left: 0; top: calc(100% + 6px); }
.rq-menu[hidden], .rq-rowmenu[hidden] { display: none; }
.rq-mitem { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 14.5px; color: var(--text); text-align: left; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.rq-mitem:hover, .rq-mitem:focus { background: var(--indigo-bg-2); outline: none; }
.rq-mitem span { flex: 1; }
.rq-mitem .i { font-size: 16px; color: var(--text-2); }
.rq-menu .rq-mitem .i { visibility: hidden; color: var(--indigo); }
.rq-menu .rq-mitem[aria-checked="true"] .i { visibility: visible; }
.rq-rowmenu { position: fixed; }
.rq-selinfo { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; font-size: 14px; color: var(--text-2); }
.rq-selinfo[hidden] { display: none; }
.rq-selinfo button { border: 0; background: none; padding: 4px 6px; border-radius: 6px; font: inherit; font-size: 14px; font-weight: 600; color: var(--indigo); cursor: pointer; }
/* the table: 40 px head, 96 px rows */
.rq-tablewrap { position: relative; border: 1px solid var(--border-soft); border-radius: 10px; }
.rq-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.rq-table th { height: 40px; padding: 0 10px; background: #F7F8FB; text-align: left; font-size: 14px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.rq-table th:first-child { border-top-left-radius: 10px; } .rq-table th:last-child { border-top-right-radius: 10px; }
.rq-table th.rq-c-sel { width: 38px; padding: 0 0 0 10px; }
.rq-table th:nth-child(2) { width: auto; }
.rq-table th:nth-child(3) { width: 88px; } .rq-table th:nth-child(4) { width: 60px; } .rq-table th:nth-child(5) { width: 132px; }
.rq-table th:nth-child(6) { width: 108px; } .rq-table th:nth-child(7) { width: 166px; } .rq-table th.rq-c-act { width: 130px; }
.rq-table td { height: 96px; padding: 0 10px; border-top: 1px solid var(--border-soft); vertical-align: middle; font-size: 14px; color: var(--text-2); }
.rq-table td:first-child { padding: 0 0 0 10px; }
.rq-row { cursor: pointer; }
.rq-row:hover td { background: #FAFBFD; }
.rq-row.is-current td { background: #F3F6FF; border-top-color: #C9D3FB; border-bottom: 1px solid #C9D3FB; }
.rq-row.is-current td:first-child { border-left: 1px solid #C9D3FB; }
.rq-row.is-current td:last-child { border-right: 1px solid #C9D3FB; }
.rq-row.is-current + .rq-row td { border-top-color: transparent; }
.rq-cb { position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; cursor: pointer; }
.rq-cb input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.rq-box { width: 20px; height: 20px; box-sizing: border-box; border: 1.5px solid #C4CAD6; border-radius: 5px; background: #fff; display: grid; place-items: center; color: #fff; }
.rq-box .i { font-size: 14px; stroke-width: 3; visibility: hidden; }
.rq-cb input:checked + .rq-box { background: var(--indigo); border-color: var(--indigo); }
.rq-cb input:checked + .rq-box .i { visibility: visible; }
.rq-cb input:indeterminate + .rq-box { background: var(--indigo); border-color: var(--indigo); }
.rq-cb input:indeterminate + .rq-box::after { content: ""; width: 10px; height: 2px; border-radius: 1px; background: #fff; }
.rq-cb input:focus-visible + .rq-box { outline: 2px solid var(--indigo); outline-offset: 2px; }
.rq-content { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rq-thumb { flex: none; width: 116px; height: 78px; border-radius: 6px; overflow: hidden; }
.rq-thumb .vsh-comp { width: 100%; height: 100%; }
.rq-thumb .vsh-comp-t { font-size: 10.5cqw; bottom: 6cqw; }
.rq-ct { min-width: 0; }
.rq-ct b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; line-height: 1.3; font-weight: 600; color: var(--text); }
.rq-ct span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; font-size: 13.5px; line-height: 1.35; color: var(--muted); }
.rq-type { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.rq-type .i { font-size: 18px; color: var(--text-2); }
.rq-ver { display: inline-grid; place-items: center; min-width: 42px; height: 28px; padding: 0 8px; box-sizing: border-box; border-radius: 6px; background: var(--indigo-bg); color: var(--indigo); font-size: 13.5px; font-weight: 600; }
.rq-who { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.rq-who span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rq-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 12.5px; font-weight: 700; }
.rq-date { font-size: 13.5px; line-height: 1.4; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rq-pill { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 15px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.rq-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rq-pill.is-pending { background: var(--amber-bg); color: var(--amber-line); }
.rq-pill.is-pending::before { background: var(--amber); }
.rq-pill.is-changes { background: #FDECEF; color: #C0263D; }
.rq-pill.is-changes::before { background: var(--red); }
.rq-acts { display: flex; align-items: center; gap: 6px; }
.rq-review { height: 36px; padding: 0 14px; font-size: 14.5px; font-weight: 500; border-radius: 7px; box-shadow: none; text-decoration: none; }
.rq-dots { width: 36px; height: 36px; border: 0; border-radius: 7px; background: none; color: var(--text-2); display: grid; place-items: center; cursor: pointer; }
.rq-dots .i { font-size: 18px; }
.rq-dots:hover, .rq-dots[aria-expanded="true"] { background: var(--border-soft); }
.rq-empty { padding: 36px 16px 20px; text-align: center; }
.rq-empty[hidden] { display: none; }
.rq-empty .rq-ei { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: var(--indigo-bg); color: var(--indigo); }
.rq-empty .rq-ei .i { font-size: 24px; }
.rq-empty h2 { margin: 0; font-size: 18px; font-weight: 700; }
.rq-empty p { margin: 6px 0 16px; font-size: 14.5px; color: var(--text-2); }
.rq-empty .btn-outline, .rq-empty .btn-primary { height: 40px; font-size: 15px; box-shadow: none; text-decoration: none; }
/* the side card */
.rq-side { padding: 16px; position: sticky; top: 16px; }
.rq-cover .vd-poster { width: 100%; height: 162px; }
.rq-cover .vsh-comp { width: 100%; height: 162px; border-radius: 8px; }
.rq-cover .vsh-comp-t { font-size: 7.4cqw; }
.rq-sh { display: flex; align-items: center; gap: 12px; margin: 16px 0 6px; }
.rq-sh h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.2px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rq-sdesc { margin: 0 0 8px; font-size: 14.5px; color: var(--text-2); }
.rq-facts { list-style: none; margin: 0; padding: 0 0 12px; border-bottom: 1px solid var(--border); }
.rq-facts li { display: flex; align-items: center; gap: 14px; height: 30px; font-size: 14.5px; color: var(--text-2); }
.rq-facts .i { font-size: 18px; color: var(--muted); flex: none; }
.rq-sacts { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.rq-sacts > * { height: 44px; justify-content: center; font-size: 15px; font-weight: 500; box-shadow: none; text-decoration: none; }

/* 68 · the head: the 34 px title, "{title} • {type} • v{k}" and the queue link */
.rvp-head { align-items: flex-end; padding-bottom: 14px; }
.rvp-head > div { flex: 1; min-width: 0; }
.rvp-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rvp-sep { color: var(--muted-2); }
.rvp-ver { display: inline-grid; place-items: center; height: 24px; padding: 0 8px; border-radius: 6px; background: var(--indigo-bg); color: var(--indigo); font-size: 13px; font-weight: 600; }
.rvp-back { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 13px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  font-size: 14px; font-weight: 500; color: var(--text); text-decoration: none; }
.rvp-back .i { font-size: 16px; color: var(--text-2); }
.rvp-back:hover { border-color: #C9D3FB; color: var(--indigo); }
/* the two cards: the preview | the 648 px checklist */
.rvp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 648px; gap: 16px; align-items: stretch; }
.rvp-prev { min-width: 0; padding: 10px 20px 20px; display: flex; flex-direction: column; }
.rvp-tabrow { display: flex; align-items: center; gap: 16px; height: 56px; margin-bottom: 10px; }
.rvp-tabs { display: flex; align-items: stretch; gap: 4px; height: 100%; margin-right: auto; }
.rvp-tab { display: inline-flex; align-items: center; gap: 10px; padding: 0 16px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 15.5px; font-weight: 500; color: var(--text-2); cursor: pointer; }
.rvp-tab .i { font-size: 19px; }
.rvp-tab[aria-selected="true"] { color: var(--indigo); border-bottom-color: var(--indigo); }
.rvp-tab:hover { color: var(--indigo); }
.rvp-plat { position: relative; display: inline-flex; align-items: center; }
.rvp-pf { position: absolute; left: 14px; width: 22px; height: 22px; pointer-events: none; }
.rvp-plat select { height: 44px; min-width: 216px; padding: 0 40px 0 48px; border: 1px solid #D9DDE6; border-radius: 8px; background: #fff; font: inherit; font-size: 15.5px; color: var(--text); appearance: none; cursor: pointer; }
.rvp-plat select:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.15); }
.rvp-plat > .i { position: absolute; right: 14px; font-size: 16px; color: var(--text-2); pointer-events: none; }
.rvp-panel { flex: 1; min-height: 0; }
.rvp-panel[hidden] { display: none; }
.rvp-stage { position: relative; height: 458px; border-radius: 8px; overflow: hidden; background: #111522; }
.rvp-stage .vp { border-radius: 8px; }
.rvp-safe { position: absolute; z-index: 4; pointer-events: none; border: 1.5px dashed rgba(255, 255, 255, 0.9); outline: 1px solid rgba(8, 17, 45, 0.28); outline-offset: 1px; border-radius: 4px; box-shadow: 0 0 0 999px rgba(4, 8, 20, 0.28); transition: all 0.25s ease; }
.rvp-chip { position: absolute; z-index: 6; top: 12px; right: 14px; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 15px; background: rgba(40, 44, 58, 0.78);
  color: #fff; font-size: 13px; font-weight: 500; pointer-events: none; }
/* the post / carousel slide viewer */
.rvp-slides { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 45%, #2A3350 0%, #111522 70%); }
.rvp-slide { position: relative; height: calc(100% - 64px); max-width: calc(100% - 120px); overflow: hidden; border-radius: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
.rvp-slide .vsh-comp { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.rvp-slide .vsh-comp-t { font-size: 9cqw; bottom: 7cqw; left: 7cqw; right: 7cqw; }
.rvp-nav { position: absolute; top: 50%; margin-top: -22px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--text); display: grid; place-items: center; cursor: pointer; z-index: 7; }
.rvp-nav .i { font-size: 20px; }
.rvp-nav:disabled { opacity: 0.35; cursor: default; }
.rvp-nav.is-prev { left: 18px; } .rvp-nav.is-next { right: 18px; }
.rvp-of { position: absolute; z-index: 7; left: 50%; bottom: 10px; transform: translateX(-50%); height: 26px; padding: 0 10px; border-radius: 13px; display: inline-flex; align-items: center; background: rgba(40, 44, 58, 0.78); color: #fff; font-size: 13px; }
/* the caption and details tabs */
.rvp-caption { height: 458px; box-sizing: border-box; overflow: auto; padding: 18px 20px; border: 1px solid var(--border); border-radius: 8px; }
.rvp-caption p { margin: 0 0 14px; font-size: 16px; line-height: 1.55; color: var(--text); white-space: pre-line; }
.rvp-caption h3 { margin: 18px 0 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); }
.rvp-caption .rvp-cta { font-size: 15.5px; font-weight: 600; color: var(--text); }
.rvp-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.rvp-tags span { height: 28px; padding: 0 10px; border-radius: 6px; background: var(--indigo-bg); color: var(--indigo); font-size: 13.5px; display: inline-flex; align-items: center; }
.rvp-details { height: 458px; box-sizing: border-box; margin: 0; padding: 8px 20px; border: 1px solid var(--border); border-radius: 8px; overflow: auto; }
.rvp-details > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; min-height: 44px; border-bottom: 1px solid var(--border-soft); }
.rvp-details > div:last-child { border-bottom: 0; }
.rvp-details dt { font-size: 14.5px; color: var(--muted); }
.rvp-details dd { margin: 0; font-size: 15px; color: var(--text); }
/* the checklist card */
.rvp-check { min-width: 0; padding: 16px 22px 14px; display: flex; flex-direction: column; }
.rvp-ch { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.rvp-ch-i { display: grid; color: var(--indigo); }
.rvp-ch-i .i { font-size: 24px; }
.rvp-ch h2 { margin: 0 auto 0 0; font-size: 19px; font-weight: 700; letter-spacing: -0.2px; }
.rvp-ready { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; border-radius: 6px; background: var(--green-bg); color: var(--green-text); font-size: 13px; font-weight: 500; }
.rvp-ready[hidden] { display: none; }
.rvp-ready .i { font-size: 16px; }
.rvp-ro { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px; padding: 9px 12px; border-radius: 8px; font-size: 13.5px; line-height: 1.4; }
.rvp-ro { background: #F1F3F7; color: var(--text-2); }
.rvp-ro[hidden] { display: none; }
.rvp-ro .i { font-size: 16px; flex: none; margin-top: 1px; }
.rvp-list { list-style: none; margin: 0; padding: 0; }
.rvp-li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 20px; align-items: center; min-height: 66px; padding: 4px 6px; border-radius: 8px; cursor: pointer; }
.rvp-li:hover { background: #FAFBFD; }
.rvp-li input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rvp-disc { width: 32px; height: 32px; box-sizing: border-box; border-radius: 50%; border: 2px solid #CDD3DE; background: #fff; display: grid; place-items: center; color: #fff; transition: background 0.15s ease; }
.rvp-disc .i { font-size: 17px; stroke-width: 3; visibility: hidden; }
.rvp-li input:checked + .rvp-disc { border: 0; background: var(--green); }
.rvp-li input:checked + .rvp-disc .i { visibility: visible; }
.rvp-li input:focus-visible + .rvp-disc { outline: 2px solid var(--indigo); outline-offset: 2px; }
.rvp-li b { display: block; font-size: 15px; font-weight: 600; color: var(--text); }
.rvp-li small { display: block; margin-top: 3px; font-size: 14px; color: var(--muted); }
.rvp-list.is-ro .rvp-li { cursor: default; }
.rvp-list.is-ro .rvp-li:hover { background: none; }
.rvp-cap { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.rvp-cap h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.rvp-cap h3 .i { font-size: 20px; color: var(--text-2); }
.rvp-capbox { margin: 0; padding: 13px 16px; border-radius: 8px; background: #F4F5F8; font-size: 15px; line-height: 1.45; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rvp-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border); min-height: 60px; }
.rvp-count { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; font-size: 14.5px; color: var(--text-2); }
.rvp-count .i { font-size: 26px; color: #C4CAD6; }
.rvp-count.is-done .i { color: var(--green); }
.rvp-changes { height: 44px; font-size: 15px; font-weight: 500; padding: 0 18px; cursor: pointer; }
.rvp-go { height: 44px; font-size: 15px; font-weight: 500; padding: 0 20px; box-shadow: none; cursor: pointer; }
.rvp-go .i { font-size: 18px; }
.rvp-go:disabled, .rvp-changes:disabled { opacity: 0.45; cursor: default; }
.rvp-hint { margin: 8px 0 0; text-align: right; font-size: 13px; color: var(--muted); }
.rvp-hint[hidden] { display: none; }

/* 69 · the decision dialog: the MM-41 frame at 588 px */
.rvd-backdrop { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(23, 27, 45, 0.45); overscroll-behavior: contain; }
.rvd-dialog { position: relative; width: 588px; max-width: 100%; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); box-sizing: border-box; display: flex; flex-direction: column;
  background: var(--surface); border-radius: 16px; box-shadow: 0 24px 60px rgba(23, 27, 45, 0.22); }
.rvd-dialog:focus { outline: none; }
.rvd-dialog :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.rvd-head { flex: none; padding: 22px 60px 12px 24px; }
.rvd-head h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }
.rvd-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--text-2); display: grid; place-items: center; cursor: pointer; }
.rvd-close .i { font-size: 20px; } .rvd-close:hover { background: var(--border-soft); }
.rvd-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 24px 4px; }
.rvd-item { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.rvd-thumb { flex: none; width: 156px; height: 76px; border-radius: 6px; overflow: hidden; }
.rvd-thumb .vd-poster, .rvd-thumb .vsh-comp { width: 100%; height: 100%; border-radius: 0; }
.rvd-item h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.rvd-item p { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--text-2); }
.rvd-item p span:not(.rvd-sep) { height: 26px; padding: 0 8px; border-radius: 6px; background: #F1F3F7; display: inline-flex; align-items: center; }
.rvd-sep { color: var(--muted-2); }
.rvd-modes { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 12px; }
.rvd-mode { position: relative; display: flex; align-items: flex-start; gap: 20px; min-height: 78px; padding: 16px 20px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.rvd-mode:hover { border-color: #C9D3FB; }
.rvd-mode input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rvd-radio { width: 22px; height: 22px; flex: none; margin-top: 12px; border-radius: 50%; border: 1.5px solid #A9B0C0; background: #fff; box-sizing: border-box; }
.rvd-mode span:last-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rvd-mode b { font-size: 17px; font-weight: 600; color: var(--text); }
.rvd-mode small { font-size: 14.5px; line-height: 1.45; color: var(--text-2); }
.rvd-mode:has(input:checked) { border-color: var(--indigo); background: #F4F6FF; }
.rvd-mode.is-changes:has(input:checked) { border-color: #F0A3AF; background: #FFF7F8; }
.rvd-mode input:checked + .rvd-radio { border: 6px solid var(--indigo); }
.rvd-mode.is-changes input:checked + .rvd-radio { border-color: #E0405A; }
.rvd-mode input:focus-visible + .rvd-radio { outline: 2px solid var(--indigo); outline-offset: 2px; }
.rvd-field { margin-top: 18px; }
.rvd-field label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 500; color: var(--text); }
.rvd-field label small { font-size: 15px; font-weight: 400; color: var(--muted); }
.rvd-field textarea { width: 100%; min-height: 64px; box-sizing: border-box; padding: 10px 14px; border: 1px solid #D9DDE6; border-radius: 8px; font: inherit; font-size: 15px; line-height: 1.4; color: var(--text); resize: vertical; }
.rvd-field textarea:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.15); }
.rvd-field.is-invalid textarea { border-color: #E0405A; box-shadow: 0 0 0 3px rgba(224, 64, 90, 0.12); }
.rvd-u { display: flex; align-items: flex-start; gap: 10px; margin-top: 4px; min-height: 18px; }
.rvd-err { margin: 0 auto 0 0; font-size: 13px; color: #C0263D; }
.rvd-err[hidden] { display: block; visibility: hidden; }
.rvd-n { margin-left: auto; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rvd-sumh { margin: 10px 0 10px; font-size: 15px; font-weight: 600; }
.rvd-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.rvd-chips li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); }
.rvd-chips .i { font-size: 18px; color: var(--green); }
.rvd-chips li.is-off { color: var(--muted); }
.rvd-chips li.is-off .i { color: #E0405A; }
.rvd-who { display: flex; align-items: center; gap: 14px; margin: 16px 0 0; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.rvd-who .rq-av { width: 40px; height: 40px; font-size: 14px; }
.rvd-who b { display: block; font-size: 15px; font-weight: 600; }
.rvd-who small { display: block; margin-top: 2px; font-size: 14px; color: var(--text-2); }
.rvd-foot-note { margin: 12px 0 0; font-size: 13.5px; color: var(--text-2); }
.rvd-warn, .rvd-conflict { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; font-size: 13.5px; line-height: 1.4; }
.rvd-warn { background: var(--amber-bg); color: var(--amber-text); }
.rvd-conflict { background: #FDEEF0; color: #B42338; }
.rvd-warn .i, .rvd-conflict .i { font-size: 17px; flex: none; margin-top: 1px; }
.rvd-conflict a { color: #B42338; font-weight: 600; }
.rvd-warn[hidden], .rvd-conflict[hidden] { display: none; }
.rvd-foot { flex: none; display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 20px 24px 22px; }
.rvd-cancel { height: 44px; font-size: 16px; font-weight: 500; padding: 0 18px; cursor: pointer; }
.rvd-go { height: 44px; font-size: 16px; font-weight: 500; padding: 0 18px; box-shadow: none; cursor: pointer; }
.rvd-go.is-changes { background: #E0405A; }
.rvd-go.is-changes:hover { background: #C8304A; }
.rvd-go:disabled { opacity: 0.45; cursor: default; }
.rvd-go[aria-busy="true"] { opacity: 0.85; cursor: progress; }
.rvd-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; animation: vd-rot 0.8s linear infinite; display: inline-block; }
html.rvd-lock { overflow: hidden; }

@media (max-width: 1280px) {
  .rq-grid { grid-template-columns: minmax(0, 1fr); }
  .rq-side { position: static; }
  .rvp-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .rq-navrow { flex-direction: column; align-items: stretch; }
  .rq-counts { flex-wrap: wrap; }
  .rq-card { padding: 12px; }
  .rq-filters { gap: 10px; }
  .rq-search { width: 100%; }
  .rq-tablewrap { overflow-x: auto; }
  .rq-table { min-width: 1000px; }
  .rq-side { padding: 14px; }
  .rvp-head { flex-direction: column; align-items: flex-start; }
  .rvp-prev { padding: 8px 12px 14px; }
  .rvp-tabrow { flex-wrap: wrap; height: auto; }
  .rvp-tabs { height: 48px; width: 100%; overflow-x: auto; }
  .rvp-tab { padding: 0 10px; }
  .rvp-plat, .rvp-plat select { width: 100%; }
  .rvp-stage, .rvp-caption, .rvp-details { height: 420px; }
  .rvp-details > div { grid-template-columns: 130px minmax(0, 1fr); }
  .rvp-slide { max-width: calc(100% - 24px); height: auto; aspect-ratio: auto; }
  .rvp-nav.is-prev { left: 6px; } .rvp-nav.is-next { right: 6px; }
  .rvp-check { padding: 14px 14px 12px; }
  .rvp-li { column-gap: 14px; }
  .rvp-foot { flex-wrap: wrap; }
  .rvp-count { width: 100%; }
  .rvp-foot .btn-outline, .rvp-foot .btn-primary { flex: 1; justify-content: center; height: 46px; }
  .rvd-backdrop { padding: 0; place-items: end stretch; }
  .rvd-dialog { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 16px 16px 0 0; }
  .rvd-head { padding: 16px 52px 10px 16px; }
  .rvd-close { top: 8px; right: 8px; width: 44px; height: 44px; }
  .rvd-body { padding: 0 16px 4px; }
  .rvd-item { gap: 14px; }
  .rvd-thumb { width: 110px; height: 60px; }
  .rvd-mode { gap: 14px; padding: 14px; }
  .rvd-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .rvd-foot > * { flex: 1; justify-content: center; height: 48px; }
}

/* ---------- Content-70 / 71 / 72 · Export content (ex- dialog over Content-54), Preparing your export and Your export is ready (exp- page), plan plans/Content-70.md; the covers are Content-54's vd-portrait / vd-poster ---------- */
/* 70 · the dialog: the MM-41 frame at 768 px, two columns 262 px | the rest */
.ex-backdrop { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(23, 27, 45, 0.45); overscroll-behavior: contain; }
.ex-dialog { position: relative; width: 768px; max-width: 100%; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); box-sizing: border-box; display: flex; flex-direction: column;
  background: var(--surface); border-radius: 16px; box-shadow: 0 24px 60px rgba(23, 27, 45, 0.22); }
.ex-dialog:focus { outline: none; }
.ex-dialog :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.ex-head { flex: none; padding: 22px 60px 14px 24px; }
.ex-head h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.3px; }
.ex-close { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--text-2); display: grid; place-items: center; cursor: pointer; }
.ex-close .i { font-size: 22px; } .ex-close:hover { background: var(--border-soft); }
.ex-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 24px 14px; display: grid; grid-template-columns: 262px minmax(0, 1fr); gap: 24px; align-items: start; }
.ex-cover { padding: 15px 15px 13px; border: 1px solid var(--border); border-radius: 10px; }
.ex-cover .vd-portrait, .ex-cover .vsh-comp { width: 100%; height: 394px; border-radius: 6px; }
.ex-cover h3 { margin: 12px 0 4px; font-size: 14.5px; font-weight: 600; }
.ex-cover h3 .is-warn { color: var(--amber-line); }
.ex-cover p { margin: 0; font-size: 13.5px; color: var(--text-2); }
.ex-main h3 { margin: 4px 0 4px; font-size: 18px; font-weight: 700; }
.ex-lead { margin: 0 0 10px; font-size: 14px; color: var(--text-2); }
.ex-incl { list-style: none; margin: 0 0 18px; padding: 0; border-top: 1px solid var(--border); }
.ex-row { position: relative; display: flex; align-items: center; gap: 18px; height: 60px; padding: 0 6px; border-bottom: 1px solid var(--border); cursor: pointer; }
.ex-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ex-box { flex: none; width: 22px; height: 22px; box-sizing: border-box; border-radius: 5px; border: 1.5px solid #C4CAD6; background: #fff; display: grid; place-items: center; color: #fff; }
.ex-box .i { font-size: 15px; stroke-width: 3; visibility: hidden; }
.ex-row input:checked + .ex-box { background: var(--indigo); border-color: var(--indigo); }
.ex-row input:checked + .ex-box .i { visibility: visible; }
.ex-row input:focus-visible + .ex-box { outline: 2px solid var(--indigo); outline-offset: 2px; }
.ex-tile { flex: none; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border); display: grid; place-items: center; color: var(--text); }
.ex-tile .i { font-size: 19px; }
.ex-row b { display: block; font-size: 14.5px; font-weight: 600; color: var(--text); }
.ex-row small { display: block; margin-top: 1px; font-size: 13.5px; color: var(--muted); }
.ex-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 14px; }
.ex-seg button { height: 38px; border: 1px solid var(--border); background: #fff; font: inherit; font-size: 14.5px; font-weight: 500; color: var(--text); cursor: pointer; }
.ex-seg button:first-child { border-radius: 8px 0 0 8px; }
.ex-seg button:last-child { border-radius: 0 8px 8px 0; margin-left: -1px; }
.ex-seg button[aria-checked="true"] { position: relative; z-index: 1; border-color: var(--indigo); background: #F4F6FF; color: var(--indigo); }
.ex-files { padding: 10px 12px 12px; border-radius: 8px; background: #F5F6FA; }
.ex-fh { display: flex; align-items: center; gap: 10px; margin: 0 2px 6px; font-size: 13.5px; }
.ex-fh b { font-weight: 500; color: var(--text); }
.ex-fh span { margin-left: auto; color: var(--text-2); }
.ex-flist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ex-flist li { display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 12px; border-radius: 6px; background: #fff; font-size: 13.5px; color: var(--text); }
.ex-flist li .i { font-size: 16px; color: var(--text-2); flex: none; }
.ex-flist li span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-flist li span:last-child { color: var(--text-2); font-variant-numeric: tabular-nums; }
.ex-none { padding: 10px 12px; border-radius: 6px; background: #fff; font-size: 13.5px; color: #C0263D; }
.ex-info { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; font-size: 13px; color: var(--text-2); }
.ex-info .i { font-size: 16px; color: var(--muted); flex: none; }
.ex-info.is-warn { align-items: flex-start; padding: 9px 12px; border-radius: 8px; background: var(--amber-bg); color: var(--amber-text); }
.ex-info.is-warn .i { color: var(--amber-line); margin-top: 1px; }
.ex-foot { flex: none; display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin: 0 24px; padding: 14px 0 18px; border-top: 1px solid var(--border); }
.ex-cancel { height: 40px; font-size: 15.5px; font-weight: 500; padding: 0 22px; cursor: pointer; }
.ex-go { height: 40px; font-size: 15.5px; font-weight: 500; padding: 0 24px; box-shadow: none; cursor: pointer; }
.ex-go:disabled { opacity: 0.45; cursor: default; }
.ex-go[aria-busy="true"] { opacity: 0.85; cursor: progress; }
.ex-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; animation: vd-rot 0.8s linear infinite; display: inline-block; }
html.ex-lock { overflow: hidden; }

/* 71 · the page: the head, the content card | the 380 px brand card, the progress card, the footer row */
.exp-root :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.exp-head { padding-bottom: 14px; }
.exp-top { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; margin-bottom: 16px; }
.exp-item { display: flex; align-items: center; gap: 22px; padding: 14px; min-width: 0; }
.exp-cover { flex: none; width: 436px; max-width: 48%; height: 172px; }
.exp-cover .vd-poster, .exp-cover .vsh-comp { width: 100%; height: 100%; }
.exp-itext { min-width: 0; }
.exp-itext h2 { margin: 0 0 10px; font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }
.exp-itext p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text-2); }
.exp-brand { padding: 16px 20px 18px; }
.exp-bh { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.exp-tile { width: 48px; height: 48px; border-radius: 8px; display: grid; place-items: center; background: #2F5BFF; color: #fff; font-size: 19px; font-weight: 800; }
.exp-bh b { font-size: 20px; font-weight: 700; }
.exp-facts { margin: 0; border: 1px solid var(--border); border-radius: 8px; }
.exp-facts > div { display: flex; align-items: center; justify-content: space-between; height: 33px; padding: 0 14px; border-top: 1px solid var(--border); }
.exp-facts > div:first-child { border-top: 0; }
.exp-facts dt { font-size: 14px; color: var(--text-2); }
.exp-facts dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.exp-prog { padding: 18px 22px 22px; }
.exp-ph { display: flex; align-items: flex-start; gap: 16px; }
.exp-ph > div { flex: 1; min-width: 0; }
.exp-ph h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; }
.exp-ph p { margin: 2px 0 0; font-size: 16px; color: var(--text-2); }
.exp-pct { font-size: 28px; font-weight: 700; color: var(--indigo); font-variant-numeric: tabular-nums; }
.exp-bar { height: 8px; margin: 14px 0 18px; border-radius: 4px; background: #E6E9F2; overflow: hidden; }
.exp-fill { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--indigo); transition: width 0.45s ease; }
.exp-root.is-failed .exp-fill { background: var(--amber); }
.exp-rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 8px; }
.exp-row { display: grid; grid-template-columns: 34px 240px minmax(0, 1fr) auto; column-gap: 16px; align-items: center; min-height: 52px; padding: 0 16px; border-top: 1px solid var(--border); }
.exp-row:first-child { border-top: 0; }
.exp-ri { width: 34px; height: 34px; border-radius: 7px; display: grid; place-items: center; background: var(--indigo-bg); color: var(--indigo); }
.exp-ri .i { font-size: 18px; }
.exp-kind { font-size: 16px; color: var(--text-2); }
.exp-fname { font-size: 16px; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-st { display: inline-flex; align-items: center; gap: 12px; min-width: 116px; font-size: 16px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.exp-st .i { font-size: 22px; }
.exp-st.is-ready { color: var(--green-text); } .exp-st.is-ready .i { color: var(--green); }
.exp-st.is-packaging { color: var(--indigo); }
.exp-st.is-failed { color: #C0263D; }
.exp-ring { width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%; border: 2px solid #D5DBF5; border-top-color: var(--indigo); border-right-color: var(--indigo); animation: vd-rot 0.9s linear infinite; }
.exp-queued { width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%; border: 2px dashed #C4CAD6; }
.exp-retry { height: 34px; padding: 0 12px; margin-left: 4px; border: 1px solid var(--border); border-radius: 7px; background: #fff; font: inherit; font-size: 14px; font-weight: 500; color: var(--indigo); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.exp-retry .i { font-size: 15px; }
.exp-retry:hover { border-color: #C9D3FB; }
.exp-partial { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 10px 14px; border-radius: 8px; background: var(--amber-bg); color: var(--amber-text); font-size: 14px; }
.exp-partial[hidden] { display: none; }
.exp-partial .i { font-size: 17px; color: var(--amber-line); flex: none; }
.exp-partial span { flex: 1; }
.exp-partial a { font-weight: 600; color: var(--indigo); }
.exp-foot { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.exp-foot p { flex: 1; margin: 0; text-align: center; font-size: 14.5px; color: var(--text-2); }
.exp-fb { height: 42px; font-size: 15.5px; font-weight: 500; padding: 0 22px; box-shadow: none; text-decoration: none; }

/* 72 · ready: the 64 px green disc head, the package card (the table | the 322 px cover preview), the footer */
.exp-rhead { display: flex; align-items: center; gap: 22px; padding: 6px 8px 20px; }
.exp-okdisc { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; box-shadow: 0 0 0 6px var(--green-bg); }
.exp-okdisc .i { font-size: 30px; stroke-width: 3; }
.exp-okdisc.is-off { background: #F1F3F7; color: var(--muted); box-shadow: 0 0 0 6px #F7F8FB; }
.exp-rhead h1 { margin: 0; font-size: 38px; font-weight: 800; letter-spacing: -0.9px; line-height: 1.15; }
.exp-rhead p { margin: 4px 0 0; font-size: 17px; color: var(--text-2); }
.exp-pkg { display: grid; grid-template-columns: minmax(0, 1fr) 322px; gap: 24px; padding: 22px 22px 22px 26px; }
.exp-pkg[hidden] { display: none; }
.exp-pmain { min-width: 0; }
.exp-phead { display: flex; align-items: center; gap: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.exp-thumb { flex: none; width: 84px; height: 84px; border-radius: 8px; overflow: hidden; }
.exp-thumb .vsh-comp { width: 100%; height: 100%; border-radius: 0; }
.exp-thumb .vsh-comp-mark { width: 28cqw; height: 28cqw; left: 36cqw; top: 36cqw; font-size: 11cqw; }
.exp-pt { min-width: 0; }
.exp-ptitle { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.exp-ptitle h2 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.4px; }
.exp-appr { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 6px; background: var(--green-bg); color: var(--green-text); font-size: 14px; font-weight: 600; }
.exp-appr .i { font-size: 15px; }
.exp-appr.is-warn { background: var(--amber-bg); color: var(--amber-line); }
.exp-pt p { margin: 8px 0 0; font-size: 16px; color: var(--text-2); }
.exp-meta { display: flex; margin: 0; padding: 18px 0; }
.exp-meta > div { display: grid; grid-template-columns: 30px auto; column-gap: 20px; align-items: center; padding: 0 30px; border-left: 1px solid var(--border); }
.exp-meta > div:first-child { padding-left: 0; border-left: 0; }
.exp-mi { grid-row: span 2; display: grid; color: var(--text-2); }
.exp-mi .i { font-size: 26px; }
.exp-meta dt { font-size: 13.5px; color: var(--text-2); }
.exp-meta dd { margin: 2px 0 0; font-size: 16px; color: var(--text); }
.exp-tw { position: relative; border: 1px solid var(--border-soft); border-radius: 10px; }
.exp-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.exp-table th { height: 38px; padding: 0 16px; background: #F7F8FB; text-align: left; font-size: 14px; font-weight: 500; color: var(--text-2); }
.exp-table th:first-child { border-top-left-radius: 10px; width: auto; } .exp-table th:last-child { border-top-right-radius: 10px; width: 170px; }
.exp-table th:nth-child(2) { width: 110px; } .exp-table th:nth-child(3) { width: 150px; } .exp-table th:nth-child(4) { width: 110px; }
.exp-table td { height: 62px; padding: 0 16px; border-top: 1px solid var(--border-soft); font-size: 15px; color: var(--text-2); }
.exp-fcell { display: flex; align-items: center; gap: 18px; min-width: 0; color: var(--text); font-size: 16px; }
.exp-fcell .i { font-size: 26px; color: var(--text); flex: none; }
.exp-fcell span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-table td:last-child { text-align: right; }
a.exp-dl { text-decoration: none; }
.exp-dl { height: 42px; padding: 0 18px; border: 1px solid #D9DDE6; border-radius: 8px; background: #fff; font: inherit; font-size: 15px; font-weight: 500; color: var(--indigo); display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.exp-dl .i { font-size: 18px; }
.exp-dl:hover { border-color: #C9D3FB; background: #F7F9FF; }
.exp-failed-c { display: inline-flex; align-items: center; gap: 8px; color: #C0263D; font-weight: 500; white-space: nowrap; }
.exp-failed-c .i { font-size: 18px; }
.exp-table tr.is-failed .exp-fcell { color: var(--muted); }
.exp-cprev { padding: 18px 20px 20px; border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; }
.exp-cprev h3 { margin: 0 0 10px; font-size: 14.5px; font-weight: 500; }
.exp-cpimg { flex: 1; display: flex; justify-content: center; align-items: flex-start; }
.exp-cpimg .vd-portrait, .exp-cpimg .vsh-comp { width: 196px; height: 352px; border-radius: 4px; }
.exp-rfoot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.exp-back { height: 52px; padding: 0 26px; font-size: 16px; font-weight: 500; text-decoration: none; }
.exp-back .i { font-size: 20px; }
.exp-zip { height: 58px; padding: 0 30px 0 24px; font-size: 16px; gap: 16px; box-shadow: none; cursor: pointer; }
.exp-zip .i { font-size: 22px; }
.exp-zt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.exp-zt b { font-size: 16.5px; font-weight: 600; }
.exp-zt small { font-size: 12.5px; font-weight: 400; opacity: 0.9; }
.exp-zip[hidden] { display: none; }

@media (max-width: 1280px) {
  .exp-top { grid-template-columns: minmax(0, 1fr); }
  .exp-pkg { grid-template-columns: minmax(0, 1fr); }
  .exp-cprev { align-items: flex-start; }
}
@media (max-width: 768px) {
  .ex-backdrop { padding: 0; place-items: end stretch; }
  .ex-dialog { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 16px 16px 0 0; }
  .ex-head { padding: 16px 52px 10px 16px; }
  .ex-close { top: 8px; right: 8px; width: 44px; height: 44px; }
  .ex-body { grid-template-columns: minmax(0, 1fr); padding: 0 16px 12px; gap: 16px; }
  .ex-cover { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 10px; }
  .ex-cover .vd-portrait, .ex-cover .vsh-comp { height: 170px; grid-row: span 2; }
  .ex-cover h3 { margin: 0 0 4px; align-self: end; }
  .ex-cover p { align-self: start; }
  .ex-foot { margin: 0 16px; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); }
  .ex-foot > * { flex: 1; justify-content: center; height: 48px; }
  .exp-item { flex-direction: column; align-items: stretch; }
  .exp-cover { width: 100%; max-width: none; height: 160px; }
  .exp-row { grid-template-columns: 34px minmax(0, 1fr) auto; row-gap: 2px; padding: 8px 12px; }
  .exp-kind { grid-column: 2; grid-row: 1; font-size: 14px; }
  .exp-fname { grid-column: 2; grid-row: 2; font-size: 14.5px; }
  .exp-ri { grid-row: span 2; }
  .exp-st { grid-column: 3; grid-row: span 2; min-width: 0; font-size: 14.5px; gap: 8px; }
  .exp-foot { flex-wrap: wrap; }
  .exp-foot p { order: -1; width: 100%; }
  .exp-foot .exp-fb { flex: 1; justify-content: center; }
  .exp-rhead { gap: 16px; }
  .exp-okdisc { width: 52px; height: 52px; }
  .exp-rhead h1 { font-size: 28px; }
  .exp-pkg { padding: 16px; }
  .exp-phead { gap: 14px; }
  .exp-thumb { width: 64px; height: 64px; }
  .exp-ptitle { gap: 8px; }
  .exp-ptitle h2 { font-size: 21px; }
  .exp-meta { flex-direction: column; gap: 12px; }
  .exp-meta > div { padding: 0; border-left: 0; }
  .exp-tw { overflow-x: auto; }
  .exp-table { min-width: 820px; }
  .exp-rfoot { flex-direction: column-reverse; align-items: stretch; }
  .exp-rfoot > * { justify-content: center; }
}


/* ---------- Content-64 … 72 · production additions (vx-): the real pictures inside the prototype's drawn slots — the format variant's original
   frame and reframed preview (object-position follows the subject position), the language variant's flags, the video cover's frames / cover,
   the review queue's thumbnails, the review page's slides and the export pages' covers ---------- */
.fv-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fv-frame .fv-pic { object-position: var(--fv-x, 50%) var(--fv-y, 50%); }
.fv-frame { background: #0E1B3D; }
.fv-oframe { background: #0E1B3D; }
.fv-foot .fv-err { margin: 0 auto 0 0; display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: #C0263D; }
.fv-foot .fv-err[hidden] { display: none; }
.fv-foot .fv-err .i { font-size: 15px; }
.lv-ref .vd-poster, .lv-ref .vsh-comp { width: 100%; height: 100%; border-radius: 8px; }
.lv-avail.is-off { background: #F1F3F7; color: var(--muted); }
.vcv-cover .vcv-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vcv-cover.is-image .vcv-brand, .vcv-cover.is-image .vcv-hl, .vcv-cover.is-image::after { display: none; }
.vcv-frame img, .vcv-rthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vcv-rlogo img { max-width: 80%; max-height: 80%; object-fit: contain; display: block; }
.vcv-brand span img { max-width: 80%; max-height: 80%; object-fit: contain; display: block; }
.vcv-strip { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: #FDECEF; color: #B4233A; font-size: 14px; }
.vcv-strip[hidden] { display: none; }
.vcv-strip .i { flex: none; font-size: 17px; }
.vcv-strip button { margin-left: auto; border: 0; background: none; font: inherit; font-weight: 600; color: #B4233A; cursor: pointer; }
.rq-thumb img, .rq-cover img, .rvd-thumb img, .exp-thumb img, .exp-cover img, .exp-cpimg img, .ex-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rq-thumb .rq-noimg, .rq-cover .rq-noimg { width: 100%; height: 100%; display: grid; place-items: center; background: #EEF1FF; color: var(--indigo); font-weight: 800; }
.rq-cover { height: 162px; border-radius: 8px; overflow: hidden; }
.rvp-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rvp-slide { background: #0E1B3D; }
.rvp-stage .vp { height: 100%; }
.rvp-stage .vp-frame { position: relative; }
.ex-cover .ex-pic { width: 100%; height: 394px; border-radius: 6px; overflow: hidden; background: #0E1B3D; }
.ex-cover .ex-pic.is-none { display: grid; place-items: center; color: #fff; font-size: 22px; font-weight: 800; }
.exp-cover { border-radius: 8px; overflow: hidden; background: #0E1B3D; }
.exp-thumb { background: #0E1B3D; }
.exp-cpimg .exp-cpic { width: 196px; height: 352px; border-radius: 4px; overflow: hidden; background: #0E1B3D; }
.exp-cpimg .exp-cpic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exp-none { font-size: 14px; color: var(--muted); }
.st2-brand .wf-link.rq-link, .lb-head .rq-link { white-space: nowrap; }
.lb-head .rq-link { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; margin-left: auto; margin-right: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  font-size: 14.5px; font-weight: 500; color: var(--text); text-decoration: none; align-self: center; }
.lb-head .rq-link:hover { border-color: #C9D3FB; color: var(--indigo); }
.lb-head .rq-link b { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--amber-bg); color: var(--amber-line); font-size: 12.5px; display: inline-grid; place-items: center; }
.lv-retry { margin-left: 6px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: inherit; text-decoration: underline; cursor: pointer; }

/* ---------- Content-73 / 74 / 75 · Send to Promotion (ph- dialog over Content-19), Promotion draft created + the Promotion tab's Content handoffs (phr- pages) and Archive content (cav- dialog over Content-19), plans plans/Content-73.md and Content-75.md; the pictures are Content-19's cp-art pack drawings ---------- */
.ph-backdrop, .phr-root, .cav-backdrop { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-mid: #193F94; --cg-tint: #F1F5F9; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter"; }
body.ph-lock { overflow: hidden; }
/* the pack drawing as a picture: Content-19's cp-art inside a clipped box */
.ph-art, .cav-art { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; }
.ph-art .cp-art, .cav-art .cp-art { border-radius: inherit; cursor: default; box-shadow: none; }
.ph-mark { position: absolute; z-index: 2; left: 9%; top: 7%; width: 13%; min-width: 22px; aspect-ratio: 1; border-radius: 18%; background: var(--cg-primary); color: #fff;
  display: grid; place-items: center; font-size: 13px; font-weight: 700; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }
.ph-hl { position: absolute; z-index: 2; left: 9%; right: 9%; bottom: 12%; color: #fff; font-weight: 700; line-height: 1.12; letter-spacing: -0.3px; font-size: 17px; text-shadow: 0 1px 8px rgba(4, 12, 40, 0.3); }
.on-light > .ph-hl { color: var(--cg-dark); text-shadow: none; }
.ph-thumb .ph-hl, .cav-thumb .ph-hl { top: 50%; bottom: auto; transform: translateY(-50%); right: 14%; font-size: 13px; }

/* 73 · the dialog: the MM-41 frame at 705 px */
.ph-backdrop { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(23, 27, 45, 0.45); overscroll-behavior: contain; }
.ph-dialog { position: relative; width: 705px; max-width: 100%; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); box-sizing: border-box; display: flex; flex-direction: column;
  background: var(--surface); border-radius: 16px; box-shadow: 0 24px 60px rgba(23, 27, 45, 0.22); }
.ph-dialog:focus { outline: none; }
.ph-dialog :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.ph-head { flex: none; padding: 20px 64px 14px 22px; }
.ph-head h2 { margin: 0; font-size: 27px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.2; }
.ph-head p { margin: 4px 0 0; font-size: 16px; color: var(--text-2); }
.ph-close { position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border: 0; border-radius: 8px; background: none; color: var(--text); display: grid; place-items: center; cursor: pointer; }
.ph-close .i { font-size: 24px; } .ph-close:hover { background: var(--border-soft); }
.ph-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 4px 24px 12px; }
.ph-body .er-banner { margin: 0 0 12px; }
.ph-item { display: flex; align-items: center; gap: 18px; min-height: 118px; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; }
.ph-thumb { flex: none; width: 122px; height: 98px; border-radius: 6px; overflow: hidden; }
.ph-item h3 { margin: 0 0 10px; font-size: 19px; font-weight: 600; }
.ph-item p { margin: 0; display: flex; align-items: center; gap: 14px; font-size: 15px; color: var(--text-2); }
.ph-bar { width: 1px; height: 18px; background: var(--border); }
.ph-st { display: inline-flex; align-items: center; gap: 10px; }
.ph-st .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-bg); }
.ph-st.is-ok { color: var(--green-text); }
.ph-st.is-warn { color: var(--amber-line); } .ph-st.is-warn .dot { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-bg); }
.ph-warn { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--amber-bg); border: 1px solid #F6D9A8; color: #7A4B0B; font-size: 14.5px; }
.ph-warn[hidden] { display: none; }
.ph-warn .i { flex: none; font-size: 19px; color: var(--amber); }
.ph-warn span { flex: 1; }
.ph-warn a { flex: none; font-weight: 600; color: var(--indigo); white-space: nowrap; }
.ph-warn a:hover { text-decoration: underline; }
.ph-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 0.8fr); margin: 18px 0 0; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.ph-col { min-width: 0; padding: 0 16px; border-left: 1px solid var(--border); }
.ph-col:first-child { padding-left: 0; border-left: 0; }
.ph-lbl { display: block; margin-bottom: 10px; font-size: 15px; font-weight: 600; color: var(--text); }
.ph-val { display: flex; align-items: center; gap: 14px; min-height: 44px; font-size: 16px; }
.ph-val b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-tile { flex: none; width: 44px; height: 44px; border-radius: 8px; background: var(--cg-primary); color: #fff; font-size: 18px; font-weight: 700; display: grid; place-items: center; }
.ph-doc { flex: none; width: 40px; height: 40px; border-radius: 8px; background: #F1F4FA; color: var(--indigo); display: grid; place-items: center; }
.ph-doc .i { font-size: 21px; }
.ph-plat { position: relative; gap: 0; }
.ph-pf { position: absolute; left: 0; top: 50%; width: 32px; height: 32px; transform: translateY(-50%); pointer-events: none; }
.ph-plat select { width: 100%; min-width: 0; height: 44px; padding: 0 26px 0 44px; border: 1px solid transparent; border-radius: 8px; background: transparent; font: inherit; font-size: 16px; font-weight: 600;
  color: var(--text); appearance: none; cursor: pointer; text-overflow: ellipsis; }
.ph-plat select:hover { border-color: var(--border); }
.ph-plat select:focus-visible { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.ph-plat > .i { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--muted); pointer-events: none; }
.ph-field { margin-top: 18px; }
.ph-field label { display: block; margin-bottom: 10px; font-size: 15px; font-weight: 600; }
.ph-field .req { color: #D63A4E; }
.ph-field input { width: 100%; height: 40px; box-sizing: border-box; padding: 0 13px; border: 1px solid #D9DDE6; border-radius: 8px; font: inherit; font-size: 15.5px; color: var(--text); }
.ph-field input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.15); }
.ph-field.is-invalid input { border-color: #E0405A; box-shadow: 0 0 0 3px rgba(224, 64, 90, 0.12); }
.ph-err { margin: 6px 0 0; font-size: 13px; color: #C0263D; }
.ph-mh { margin: 22px 0 10px; font-size: 18px; font-weight: 500; }
.ph-media { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ph-mrow { display: flex; align-items: center; gap: 18px; min-height: 70px; box-sizing: border-box; padding: 7px 14px 7px 10px; border: 1px solid var(--border); border-radius: 8px; }
.ph-mthumb { flex: none; width: 84px; height: 56px; border-radius: 4px; overflow: hidden; }
.ph-mthumb.is-file { display: grid; place-items: center; background: #F3F4F8; color: var(--text-2); }
.ph-mthumb.is-file .i { font-size: 28px; }
.ph-mtext { flex: 1; min-width: 0; }
.ph-mtext b { display: block; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-mtext small { display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; margin-top: 4px; font-size: 13.5px; color: var(--muted); }
.ph-dot { color: var(--muted-2); }
.ph-mcap { margin-left: 16px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ph-chip { flex: none; align-self: flex-start; margin-top: 6px; height: 24px; padding: 0 10px; border-radius: 12px; background: #F1F3F7; color: var(--text-2); font-size: 12.5px; display: inline-flex; align-items: center; }
.ph-dup { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--indigo-bg-2); border: 1px solid #D6DEFF; color: #28358F; font-size: 14.5px; }
.ph-dup[hidden] { display: none; }
.ph-dup .i { flex: none; font-size: 19px; color: var(--indigo); }
.ph-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 24px; padding: 14px 0 16px; border-top: 1px solid var(--border-soft); }
.ph-cancel { height: 44px; min-width: 92px; padding: 0 18px; justify-content: center; font-size: 16px; font-weight: 600; }
.ph-go { height: 44px; padding: 0 22px; gap: 10px; font-size: 16px; font-weight: 600; box-shadow: none; }
.ph-go .i { font-size: 20px; }
.ph-go[hidden] { display: none; }
.ph-go:disabled { opacity: 0.5; cursor: default; }

/* 74 · Promotion draft created: a centred 906 px column */
.phr-root { min-width: 0; }
.phr-wrap { width: 906px; max-width: 100%; margin: 8px auto 0; display: flex; flex-direction: column; gap: 16px; }
.phr-top { text-align: center; padding: 18px 0 2px; }
.phr-disc { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: #22B573; color: #fff; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(34, 181, 115, 0.28); }
.phr-disc .i { font-size: 34px; stroke-width: 3; }
.phr-top h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.8px; line-height: 1.15; }
.phr-top p { margin: 6px 0 0; font-size: 18px; color: var(--text-2); }
.phr-card { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 46px; padding: 22px 34px 22px 34px; }
.phr-cover { position: relative; width: 260px; height: 358px; border-radius: 8px; overflow: hidden; }
.phr-cover .ph-mark { top: 6%; left: 9%; width: 36px; min-width: 0; font-size: 15px; }
.phr-ctitle { position: absolute; z-index: 2; left: 9%; right: 9%; top: 19%; color: #fff; font-size: 29px; font-weight: 700; line-height: 1.08; letter-spacing: -0.5px; text-shadow: 0 2px 10px rgba(4, 12, 40, 0.35); }
.phr-main { min-width: 0; display: flex; flex-direction: column; padding-top: 6px; }
.phr-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 10px; }
.phr-title h2 { margin: 0; font-size: 25px; font-weight: 700; letter-spacing: -0.4px; }
.phr-appr { height: 26px; padding: 0 11px; border-radius: 6px; background: var(--green-bg); color: var(--green-text); font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; }
.phr-appr.is-warn { background: var(--amber-bg); color: var(--amber-line); }
.phr-facts { margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.phr-facts > div { display: grid; grid-template-columns: 175px minmax(0, 1fr); align-items: center; min-height: 48px; }
.phr-facts dt { display: flex; align-items: center; gap: 18px; font-size: 16px; color: var(--muted); }
.phr-facts dt .i, .phr-facts .phr-pf { flex: none; width: 20px; height: 20px; font-size: 20px; color: var(--text-2); }
.phr-facts .phr-pf { filter: grayscale(1) brightness(0.45); }
.phr-facts dd { margin: 0; font-size: 16px; color: var(--text); }
.phr-draft { height: 26px; padding: 0 10px; border-radius: 6px; background: var(--indigo-bg); color: var(--indigo); font-size: 15px; font-weight: 500; display: inline-flex; align-items: center; }
.phr-ready { margin: 18px 0 18px; font-size: 15px; color: var(--text-2); }
.phr-acts { display: flex; flex-wrap: wrap; gap: 16px; }
.phr-btn { height: 48px; padding: 0 22px 0 20px; gap: 12px; font-size: 16px; font-weight: 600; justify-content: center; box-shadow: none; }
.phr-acts .btn-outline.phr-btn { min-width: 198px; }
.phr-btn .i { font-size: 20px; }
.phr-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; min-height: 70px; box-sizing: border-box; padding: 12px 26px; font-size: 16px; color: var(--muted); }
.phr-strip b { color: var(--text); font-weight: 600; }
.phr-sic { width: 38px; height: 38px; border-radius: 8px; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; }
.phr-sic .i { font-size: 21px; }
.phr-sep { color: var(--muted-2); }

/* 74b · the Promotion tab: Content handoffs (cards 300 px, the 16:9 cover) */

/* 75 · Archive content: the MM-41 frame at 528 px */
.cav-backdrop { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(23, 27, 45, 0.45); overscroll-behavior: contain; }
.cav-dialog { position: relative; width: 528px; max-width: 100%; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); box-sizing: border-box; display: flex; flex-direction: column;
  background: var(--surface); border-radius: 16px; box-shadow: 0 24px 60px rgba(23, 27, 45, 0.22); }
.cav-dialog:focus { outline: none; }
.cav-dialog :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.cav-head { flex: none; padding: 26px 60px 12px 32px; }
.cav-head h2 { margin: 0; font-size: 25px; font-weight: 700; letter-spacing: -0.4px; }
.cav-close { position: absolute; top: 20px; right: 20px; width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--text-2); display: grid; place-items: center; cursor: pointer; }
.cav-close .i { font-size: 22px; } .cav-close:hover { background: var(--border-soft); }
.cav-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 4px 32px 8px; }
.cav-body .er-banner { margin: 0 0 12px; }
.cav-item { display: flex; align-items: center; gap: 18px; }
.cav-thumb { flex: none; width: 156px; height: 82px; border-radius: 6px; overflow: hidden; }
.cav-item h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.cav-item p { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.4; }
.cav-item p span { color: var(--muted-2); margin: 0 3px; }
.cav-lead { margin: 18px 0 14px; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.cav-kept { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cav-kept li { display: flex; align-items: center; gap: 22px; min-height: 64px; box-sizing: border-box; padding: 8px 16px 8px 20px; border: 1px solid var(--border-soft); border-radius: 8px; background: #F7F8FB; }
.cav-ki { flex: none; width: 24px; display: grid; place-items: center; color: var(--text); }
.cav-ki .i { font-size: 24px; }
.cav-kept b { display: block; font-size: 15px; font-weight: 600; }
.cav-kept small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--text-2); }
.cav-n { color: var(--indigo); font-weight: 500; }
.cav-block { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--amber-bg); border: 1px solid #F6D9A8; color: #7A4B0B; font-size: 14.5px; }
.cav-block .i { flex: none; font-size: 19px; color: var(--amber); }
.cav-block span { flex: 1; }
.cav-block a { flex: none; font-weight: 600; color: var(--indigo); } .cav-block a:hover { text-decoration: underline; }
.cav-rule { margin: 18px 0; border: 0; border-top: 1px solid var(--border); }
.cav-check { position: relative; display: flex; align-items: flex-start; gap: 14px; cursor: pointer; }
.cav-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cav-box { flex: none; width: 24px; height: 24px; box-sizing: border-box; margin-top: 2px; border-radius: 5px; border: 1.5px solid #B7BECC; background: #fff; display: grid; place-items: center; color: #fff; }
.cav-box .i { font-size: 16px; stroke-width: 3; visibility: hidden; }
.cav-check input:checked + .cav-box { background: var(--indigo); border-color: var(--indigo); }
.cav-check input:checked + .cav-box .i { visibility: visible; }
.cav-check input:focus-visible + .cav-box { outline: 2px solid var(--indigo); outline-offset: 2px; }
.cav-check b { display: block; font-size: 15px; font-weight: 500; }
.cav-check small { display: block; margin-top: 3px; font-size: 13.5px; color: var(--text-2); }
.cav-field { margin-top: 20px; }
.cav-field label { display: block; margin-bottom: 8px; font-size: 15px; color: var(--text); }
.cav-sel { position: relative; display: block; }
.cav-sel select { width: 100%; height: 44px; padding: 0 40px 0 13px; border: 1px solid #CDD2DC; border-radius: 8px; background: #fff; font: inherit; font-size: 15.5px; color: var(--text); appearance: none; cursor: pointer; }
.cav-sel select:focus-visible { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.cav-sel .i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--text-2); pointer-events: none; }
.cav-foot { flex: none; display: flex; justify-content: flex-end; gap: 16px; padding: 22px 22px 26px; }
.cav-cancel { height: 42px; min-width: 88px; padding: 0 18px; justify-content: center; font-size: 16px; font-weight: 600; }
.cav-go { height: 42px; padding: 0 20px; font-size: 16px; font-weight: 600; box-shadow: none; }
.cav-go:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 1100px) {
  .phr-card { grid-template-columns: 200px minmax(0, 1fr); gap: 28px; padding: 20px; }
  .phr-cover { width: 200px; height: 276px; }
  .phr-ctitle { font-size: 23px; }
}
@media (max-width: 768px) {
  .ph-backdrop, .cav-backdrop { padding: 0; place-items: end stretch; }
  .ph-dialog, .cav-dialog { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 16px 16px 0 0; }
  .ph-head { padding: 16px 52px 10px 16px; } .ph-head h2 { font-size: 22px; } .ph-head p { font-size: 15px; }
  .ph-close, .cav-close { top: 8px; right: 8px; width: 44px; height: 44px; }
  .ph-body { padding: 4px 16px 12px; }
  .ph-item { min-height: 0; gap: 12px; }
  .ph-thumb { width: 92px; height: 74px; }
  .ph-item h3 { font-size: 17px; margin-bottom: 6px; }
  .ph-item p { flex-wrap: wrap; gap: 6px 10px; font-size: 14px; }
  .ph-warn, .cav-block { flex-wrap: wrap; }
  .ph-cols { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ph-col { padding: 0; border-left: 0; }
  .ph-lbl { margin-bottom: 4px; }
  .ph-mrow { gap: 12px; padding: 8px 10px; flex-wrap: wrap; }
  .ph-mthumb { width: 64px; height: 44px; }
  .ph-mtext { flex-basis: calc(100% - 76px); }
  .ph-mcap { margin-left: 0; flex-basis: 100%; }
  .ph-chip { margin: 0 0 0 76px; }
  .ph-foot { margin: 0 16px; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); }
  .ph-foot > * { flex: 1; justify-content: center; height: 48px; }
  .cav-head { padding: 16px 52px 10px 16px; } .cav-head h2 { font-size: 22px; }
  .cav-body { padding: 4px 16px 8px; }
  .cav-item { gap: 12px; }
  .cav-thumb { width: 104px; height: 60px; }
  .cav-kept li { gap: 14px; padding: 8px 12px; }
  .cav-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .cav-foot > * { flex: 1; justify-content: center; height: 48px; }
  .phr-top h1 { font-size: 27px; }
  .phr-top p { font-size: 16px; }
  .phr-card { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 16px; }
  .phr-cover { width: 100%; height: auto; aspect-ratio: 260 / 358; max-height: 420px; }
  .phr-facts > div { grid-template-columns: 130px minmax(0, 1fr); }
  .phr-facts dt { gap: 12px; }
  .phr-acts { flex-direction: column; }
  .phr-acts .phr-btn { width: 100%; }
  .phr-strip { padding: 12px 16px; gap: 4px 10px; font-size: 14.5px; }
}

/* ---------- Content-76 … 84 · Content settings: the host (cs-: the section nav, cards, fields, switches, footers, #readonly / #loading), Brand profile (cbp-), Brand rules & references (cbr-), Models & API connections (cmc-) with the Text & script model drawer (ctm-) and the Update connection dialog (cuc-), Generation defaults (cgd-), Usage & budget (cub-), Permissions & approvers (cpm-) and Activity log (cal-), plans plans/Content-76.md, 78, 81 and 83; the pictures are Content-19's cp-art pack drawings ---------- */
.cs-root, .ctm-backdrop, .cuc-backdrop { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-mid: #193F94; --cg-tint: #F1F5F9; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter"; }
.cs-root { min-width: 0; }
.cs-head { align-items: center; }
.cs-head > div:first-child { min-width: 0; }
.cs-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 16px; align-items: start; }
.cs-nav { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 2px; padding: 12px; }
.cs-navitem { display: flex; align-items: center; gap: 14px; height: 48px; padding: 0 14px; border-radius: 8px; font-size: 15.5px; font-weight: 500; color: var(--text); white-space: nowrap; }
.cs-navitem .i { flex: none; font-size: 21px; color: var(--text-2); }
.cs-navitem:hover { background: #F6F7FA; }
.cs-navitem.is-active { background: var(--indigo-bg); color: var(--indigo); font-weight: 600; }
.cs-navitem.is-active .i { color: var(--indigo); }
.cs-navitem:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
.cs-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cs-card { padding: 20px 22px; min-width: 0; }
.cs-card-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.cs-tile { flex: none; width: 38px; height: 38px; border-radius: 9px; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; }
.cs-tile .i { font-size: 21px; }
.cs-ht { min-width: 0; flex: 1; }
.cs-ht h2 { margin: 3px 0 0; font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }
.cs-ht p { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--text-2); }
.cs-card-head.sm { align-items: center; margin-bottom: 12px; }
.cs-card-head.sm h2 { margin: 0; font-size: 19px; }
.cs-edit { flex: none; margin-left: auto; height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 500; color: var(--text); }
.cs-edit .i { font-size: 16px; } .cs-edit:hover { background: #F7F8FB; }
.cs-lead { margin: 0 0 14px; font-size: 14.5px; line-height: 1.45; color: var(--text-2); }
.cs-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 500; color: var(--indigo); }
.cs-link:hover { text-decoration: underline; } .cs-link .i { font-size: 17px; }
.cs-lbl { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 500; color: var(--text); }
.cs-req { color: #D63A4E; margin-left: 3px; }
.cs-input { width: 100%; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid #D9DDE6; border-radius: 8px; background: #fff; font: inherit; font-size: 15px; color: var(--text); }
.cs-input:focus, .cs-input:focus-within { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.15); }
.cs-input.has-icon, .cs-input.has-prefix, .cs-input.has-eye { display: flex; align-items: center; gap: 10px; }
.cs-input.has-icon > .i { flex: none; font-size: 18px; color: var(--text-2); }
.cs-input.has-icon input, .cs-input.has-prefix input, .cs-input.has-eye input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: var(--text); }
.cs-input:disabled, .cs-input:has(input:disabled), .cs-select select:disabled { background: #F5F6FA; color: var(--text-2); }
.cs-textarea { height: auto; min-height: 64px; padding: 9px 12px; line-height: 1.45; resize: vertical; }
.cs-select { position: relative; display: block; min-width: 0; }
.cs-select select { width: 100%; height: 40px; box-sizing: border-box; padding: 0 36px 0 12px; border: 1px solid #D9DDE6; border-radius: 8px; background: #fff; font: inherit; font-size: 15px; color: var(--text);
  appearance: none; cursor: pointer; text-overflow: ellipsis; }
.cs-select select:focus-visible { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.15); }
.cs-select select:disabled { cursor: default; }
.cs-select > .i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--text-2); pointer-events: none; }
.cs-select.has-icon > .i:first-child { left: 13px; right: auto; font-size: 19px; }
.cs-select.has-icon select { padding-left: 42px; }
.cs-help { display: flex; align-items: baseline; gap: 12px; margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.cs-count { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-count.is-over { color: #C0263D; font-weight: 600; }
.cs-err { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 13px; color: #C0263D; }
.cs-err[hidden] { display: none; }
.cs-err .i { flex: none; font-size: 15px; }
.cs-field.is-invalid .cs-input, .cs-field.is-invalid select, .cs-field.is-invalid .cbr-px { border-color: #E0405A; box-shadow: 0 0 0 3px rgba(224, 64, 90, 0.12); }
.cs-switch { position: relative; flex: none; width: 46px; height: 26px; padding: 0; border: 0; border-radius: 13px; background: #C9CFDD; cursor: pointer; transition: background 0.15s; }
.cs-switch span { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: left 0.15s; }
.cs-switch[aria-checked="true"] { background: var(--indigo); }
.cs-switch[aria-checked="true"] span { left: 23px; }
.cs-switch:disabled { opacity: 0.5; cursor: default; }
.cs-switch:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.cs-foot { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.cs-foot.is-compact { margin-top: 12px; padding-top: 0; border-top: 0; }
.cs-note { flex: 1; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--muted); }
.cs-note .i { flex: none; font-size: 17px; }
.cs-btns { display: flex; gap: 12px; margin-left: auto; }
.cs-btns .btn-outline, .cs-btns .btn-primary, .cs-footcard .btn-outline, .cs-footcard .btn-primary { height: 44px; padding: 0 20px; font-size: 15.5px; font-weight: 600; justify-content: center; box-shadow: none; gap: 10px; }
.cs-footcard .btn-primary .i { font-size: 19px; }
.cs-footcard { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; box-sizing: border-box; padding: 10px 18px; }
.cs-ro { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; background: #F4F6FB; color: var(--text-2); font-size: 14px; }
.cs-ro[hidden] { display: none; }
.cs-ro .i { flex: none; font-size: 18px; color: var(--muted); }
.cs-main > .cs-ro { margin: 0; }
.cs-failed { margin: 0 0 14px; }
.cs-main > .cs-failed { margin: 0; }
.cs-root.is-readonly [data-cs-save], .cs-root.is-readonly [data-cs-cancel], .cs-root.is-readonly .cs-footcard, .cs-root.is-readonly .cs-foot, .cs-root.is-readonly .cgd-reset { display: none; }
.cs-tip { position: relative; flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); display: inline-grid; place-items: center; cursor: help; }
.cs-tip > .i { font-size: 17px; }
.cs-tipbox { position: absolute; z-index: 40; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 240px; padding: 8px 10px; border-radius: 8px; background: #171B2D; color: #fff;
  font-size: 13px; font-weight: 400; line-height: 1.4; text-align: left; visibility: hidden; opacity: 0; transition: opacity 0.12s; pointer-events: none; }
.cs-tip:hover .cs-tipbox, .cs-tip:focus-visible .cs-tipbox { visibility: visible; opacity: 1; }
/* #loading: the MM-43 skeleton over the cards */
.cs-root.is-loading .cs-main > .card, .cs-root.is-loading .cs-main > div > .card, .cs-root.is-loading .cs-main > div > div > .card { position: relative; }
.cs-root.is-loading .cs-main .card > * { visibility: hidden; }
.cs-root.is-loading .cs-main .card::after { content: ""; position: absolute; inset: 20px 22px; border-radius: 6px; background: linear-gradient(90deg, #E9ECF3 25%, #F4F6FB 50%, #E9ECF3 75%);
  background-size: 200% 100%; animation: sk 1.2s infinite; -webkit-mask: repeating-linear-gradient(to bottom, #000 0 14px, transparent 14px 34px); mask: repeating-linear-gradient(to bottom, #000 0 14px, transparent 14px 34px); }
@media (prefers-reduced-motion: reduce) { .cs-root.is-loading .cs-main .card::after { animation: none; } }

/* 76 · Brand profile: the form | the 450 px summary */
.cbp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 450px; gap: 16px; align-items: start; }
.cbp-rows { display: flex; flex-direction: column; gap: 14px; }
.cbp-row { display: grid; grid-template-columns: 146px minmax(0, 1fr); gap: 0 12px; align-items: start; }
.cbp-lbl { display: flex; align-items: center; gap: 6px; min-height: 40px; font-size: 15px; font-weight: 500; }
.cbp-ctl { min-width: 0; }
.cbp-tones { position: relative; display: flex; align-items: center; gap: 6px; height: auto; min-height: 40px; padding: 4px 4px 4px 8px; }
.cbp-chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cbp-chip { height: 28px; padding: 0 3px 0 11px; border-radius: 6px; background: var(--indigo-bg); color: var(--indigo); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 3px; }
.cbp-chip button { width: 24px; height: 24px; border: 0; border-radius: 5px; background: none; color: var(--indigo); display: grid; place-items: center; cursor: pointer; }
.cbp-chip button .i { font-size: 14px; } .cbp-chip button:hover { background: #DCE3FF; }
.cbp-noton { font-size: 14px; color: var(--muted); padding: 0 4px; }
.cbp-tdd { flex: none; width: 32px; height: 32px; border: 0; border-radius: 6px; background: none; color: var(--text-2); display: grid; place-items: center; cursor: pointer; }
.cbp-tdd:hover { background: #F4F6FB; } .cbp-tdd .i { font-size: 18px; }
.cbp-tmenu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; max-height: 320px; overflow: auto; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: #fff;
  box-shadow: 0 12px 32px rgba(23, 27, 45, 0.14); outline: none; }
.cbp-opt { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-radius: 6px; font-size: 15px; cursor: pointer; }
.cbp-opt .i { font-size: 17px; color: var(--indigo); visibility: hidden; }
.cbp-opt.is-on .i { visibility: visible; } .cbp-opt.is-on { font-weight: 600; }
.cbp-opt:hover, .cbp-opt.is-act { background: #F4F6FB; }
.cbp-tmenu:focus-visible .cbp-opt.is-act { box-shadow: inset 0 0 0 2px var(--indigo); }
.cbp-mnote { margin: 4px 10px 2px; font-size: 12.5px; color: var(--muted); }
.cbp-sh { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.cbp-eye { flex: none; color: var(--indigo); display: grid; place-items: center; margin-top: 2px; }
.cbp-eye .i { font-size: 28px; }
.cbp-sh h2, .cgd-pvh h2 { margin: 0; font-size: 20px; font-weight: 700; }
.cbp-sh p { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.cbp-banner { position: relative; display: flex; align-items: center; gap: 22px; min-height: 164px; box-sizing: border-box; padding: 22px 26px; border-radius: 8px; overflow: hidden; color: #fff;
  background: radial-gradient(110% 140% at 100% 100%, var(--cg-primary) 0%, rgba(37, 99, 235, 0) 62%), linear-gradient(110deg, var(--cg-dark) 30%, #1E3A8A 100%); }
.cbp-mono { flex: none; width: 72px; height: 72px; border-radius: 10px; background: var(--cg-primary); display: grid; place-items: center; font-size: 30px; font-weight: 700; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 8px 20px rgba(4, 12, 40, 0.3); }
.cbp-bt { min-width: 0; }
.cbp-bt b { display: block; font-size: 30px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.1; overflow-wrap: anywhere; }
.cbp-bt p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.4; opacity: 0.92; overflow-wrap: anywhere; }
.cbp-colors { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; margin-top: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.cbp-cl { padding-top: 12px; font-size: 14.5px; font-weight: 500; }
.cbp-colors ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; text-align: center; }
.cbp-dot { display: block; width: 44px; height: 44px; margin: 0 auto; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(14, 27, 61, 0.1); }
.cbp-colors b { display: block; margin-top: 7px; font-size: 12.5px; font-weight: 600; }
.cbp-colors small { display: block; font-size: 11.5px; color: var(--muted); }
.cbp-facts { margin: 8px 0 0; }
.cbp-facts > div { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: center; min-height: 40px; }
.cbp-facts dt { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--muted); }
.cbp-facts dt .i { font-size: 20px; color: var(--text-2); }
.cbp-facts dd { margin: 0; min-width: 0; font-size: 14.5px; overflow-wrap: anywhere; }
.cbp-facts dd a { color: var(--indigo); } .cbp-facts dd a:hover { text-decoration: underline; }

/* 77 · Brand rules & references: three cards, then references | the 434 px guidance */
.cbr-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.cbr-sw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.cbr-swatch { display: block; height: 76px; border-radius: 6px; }
.cbr-swatch.is-light { box-shadow: inset 0 0 0 1px var(--border); }
.cbr-hex { display: flex; align-items: center; gap: 2px; margin-top: 10px; }
.cbr-hex b { font-size: 14.5px; font-weight: 700; letter-spacing: 0.2px; }
.cbr-copy { width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--text-2); display: grid; place-items: center; cursor: pointer; }
.cbr-copy .i { font-size: 16px; } .cbr-copy:hover { background: #F2F4F8; }
.cbr-sw small { font-size: 13.5px; color: var(--muted); }
.cbr-aa { font-size: 16px; font-weight: 700; }
.cbr-sample { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border-radius: 8px; background: #F5F7FB; }
.cbr-sample small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.cbr-fam b { font-size: 20px; font-weight: 700; }
.cbr-s1 b { display: block; font-size: 25px; font-weight: 600; letter-spacing: -0.4px; line-height: 1.15; }
.cbr-s2 b { display: block; font-size: 19px; font-weight: 500; }
.cbr-s3 p { margin: 0; font-size: 14.5px; line-height: 1.45; }
.cbr-lock { display: flex; align-items: center; justify-content: center; gap: 18px; height: 96px; margin-bottom: 8px; border-radius: 8px; background: #F5F7FB; }
.cbr-mark { width: 64px; height: 64px; border-radius: 10px; background: var(--cg-primary); color: #fff; display: grid; place-items: center; font-size: 26px; font-weight: 700; }
.cbr-word { font-size: 27px; font-weight: 800; letter-spacing: -0.5px; color: var(--cg-dark); }
.cbr-lrows { margin: 0; padding: 0; list-style: none; }
.cbr-lrow { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 5px 0; }
.cbr-li { flex: none; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border); color: var(--text-2); display: grid; place-items: center; }
.cbr-li .i { font-size: 19px; }
.cbr-lt { flex: 1; min-width: 0; }
.cbr-lt b { display: block; font-size: 14.5px; font-weight: 600; }
.cbr-lt small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.cbr-px { flex: none; display: flex; align-items: center; height: 36px; border: 1px solid #D9DDE6; border-radius: 8px; overflow: hidden; background: #fff; }
.cbr-px input { width: 46px; height: 100%; border: 0; outline: 0; text-align: center; font: inherit; font-size: 15px; color: var(--text); background: transparent; }
.cbr-px span { height: 100%; padding: 0 10px; display: grid; place-items: center; border-left: 1px solid #D9DDE6; background: #F5F7FB; color: var(--muted); font-size: 14px; }
.cbr-px:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.15); }
.cbr-px:has(input:disabled) { background: #F5F6FA; }
.cbr-bottom { display: grid; grid-template-columns: minmax(0, 1fr) 434px; gap: 16px; align-items: stretch; }
.cbr-rh { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 14px; }
.cbr-rh h2 { margin: 0; font-size: 19px; font-weight: 700; }
.cbr-rh p { flex: 1; min-width: 200px; margin: 0; font-size: 14px; color: var(--muted); }
.cbr-count { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 15px; background: #F1F4FA; font-size: 14px; color: var(--text-2); }
.cbr-count .i { font-size: 17px; color: var(--green); }
.cbr-rgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.cbr-pic { position: relative; height: 104px; border-radius: 6px; overflow: hidden; }
.cbr-pic .cp-art { border-radius: 0; cursor: default; box-shadow: none; }
.cbr-rgrid b { display: block; margin-top: 10px; font-size: 14.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbr-rgrid small { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13.5px; color: var(--muted); }
.cbr-rgrid small .i { font-size: 17px; color: var(--green); }
.cbr-empty { display: flex; align-items: center; gap: 10px; margin: 0; padding: 18px; border: 1px dashed var(--border); border-radius: 10px; color: var(--muted); font-size: 14.5px; }
.cbr-empty .i { font-size: 20px; }
.cbr-guid .cs-textarea { min-height: 72px; }

/* 78 · Models & API connections: the cards | the 262 px usage card */
.cmc-add { position: relative; margin-left: auto; }
.cmc-addbtn { height: 44px; padding: 0 20px; gap: 8px; font-size: 16px; font-weight: 600; box-shadow: none; }
.cmc-addbtn .i { font-size: 20px; }
.cmc-menu { position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; min-width: 250px; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: #fff; box-shadow: 0 12px 32px rgba(23, 27, 45, 0.14); }
.cmc-menu button { display: flex; align-items: center; gap: 10px; width: 100%; height: 42px; padding: 0 10px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 15px; color: var(--text); text-align: left; cursor: pointer; }
.cmc-menu button:hover, .cmc-menu button:focus-visible { background: #F4F6FB; outline: none; }
.cmc-menu button .i { font-size: 19px; color: var(--text-2); }
.cmc-on { margin-left: auto; color: var(--green); display: inline-flex; }
.cmc-on .i { color: var(--green) !important; }
.cmc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 262px; gap: 16px; align-items: start; }
.cmc-main { padding: 18px; }
.cmc-list { display: flex; flex-direction: column; gap: 16px; }
.cmc-card { display: grid; grid-template-columns: minmax(0, 1fr) 200px 262px; min-height: 164px; box-sizing: border-box; padding: 18px 0; border: 1px solid var(--border); border-radius: 12px; }
.cmc-c1 { display: flex; gap: 18px; min-width: 0; padding: 0 20px; }
.cmc-c2, .cmc-c3 { min-width: 0; padding: 0 18px; border-left: 1px solid var(--border); }
.cmc-tile { flex: none; width: 64px; height: 64px; border-radius: 12px; display: grid; place-items: center; }
.cmc-tile .i { font-size: 34px; }
.cmc-tile.is-openai { background: #0B0B0F; color: #fff; }
.cmc-tile.is-gemini { background: #EEF2FF; color: #4F6CF7; }
.cmc-tile.is-text { background: var(--indigo-bg); color: var(--indigo); }
.cmc-tile.is-none { background: #F1F3F7; color: var(--muted); }
.cmc-who { min-width: 0; }
.cmc-who h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.3px; }
.cmc-prov { margin: 3px 0 0; font-size: 15px; color: var(--muted); }
.cmc-model { margin: 2px 0 0; font-size: 15.5px; font-weight: 500; }
.cmc-chip { display: inline-flex; align-items: center; height: 26px; margin-top: 8px; padding: 0 10px; border-radius: 6px; background: #F1F3F7; font-size: 13.5px; color: var(--text-2); }
.cmc-sent { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.cmc-state { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 6px; font-size: 14.5px; font-weight: 600; }
.cmc-state .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cmc-state.is-ok { background: var(--green-bg); color: var(--green-text); }
.cmc-state.is-ok .dot { background: var(--green); }
.cmc-state.is-grey { background: #F1F3F7; color: var(--text-2); }
.cmc-state.is-grey .dot { background: #9CA3AF; }
.cmc-state.is-bad { background: #FDECEF; color: #C0263D; }
.cmc-tl { margin: 12px 0 0; font-size: 14px; color: var(--text-2); }
.cmc-td { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.cmc-tline { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.cmc-res { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; font-size: 14px; line-height: 1.35; }
.cmc-res .i { flex: none; font-size: 19px; }
.cmc-res.is-ok .i { color: var(--green); }
.cmc-res.is-bad { color: #C0263D; }
.cmc-kl { margin: 0; font-size: 14.5px; font-weight: 500; }
.cmc-ks { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.cmc-key { display: flex; align-items: center; gap: 8px; height: 40px; margin-top: 8px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }
.cmc-key span[aria-hidden] { letter-spacing: 1px; color: var(--text-2); }
.cmc-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.cmc-btn { height: 40px; padding: 0 12px; font-size: 14px; font-weight: 500; gap: 6px; }
.cmc-btn.is-link { color: var(--indigo); }
.cmc-btn.is-grey { background: #F3F4F7; border-color: #EEF0F5; }
.cmc-btn .i { font-size: 17px; }
.cmc-usage { padding: 18px 18px 6px; }
.cmc-uh { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.cmc-uh .i { font-size: 26px; color: var(--text-2); }
.cmc-uh h2 { margin: 0; font-size: 19px; font-weight: 700; }
.cmc-ulist { margin: 0; padding: 0; list-style: none; }
.cmc-ulist li { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--border-soft); }
.cmc-ulist li:first-child { border-top: 0; }
.cmc-uic { flex: none; }
.cmc-uic .i { font-size: 24px; }
.cmc-uic.is-ok { color: var(--green); } .cmc-uic.is-bad { color: #E0405A; } .cmc-uic.is-link { color: var(--indigo); }
.cmc-ulist b { display: block; font-size: 15px; font-weight: 600; }
.cmc-ulist small { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.cmc-eye { flex: none; width: 34px; height: 34px; border: 0; border-radius: 6px; background: none; color: var(--text-2); display: grid; place-items: center; cursor: pointer; }
.cmc-eye .i { font-size: 19px; } .cmc-eye:hover { background: #F2F4F8; }
.cmc-main .cs-ro { margin-top: 14px; }

/* 79 · the Text & script model drawer (475 px, the MM-30 frame) */
.ctm-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(23, 27, 45, 0.45); overscroll-behavior: contain; }
.ctm-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 475px; max-width: 100%; box-sizing: border-box; display: flex; flex-direction: column; background: var(--surface);
  box-shadow: -16px 0 48px rgba(23, 27, 45, 0.18); animation: ctm-in 0.2s ease-out; }
@keyframes ctm-in { from { transform: translateX(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ctm-drawer { animation: none; } }
.ctm-drawer:focus { outline: none; }
.ctm-drawer :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.ctm-head { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; column-gap: 20px; row-gap: 18px; padding: 26px 60px 10px 26px; }
.ctm-tile { width: 48px; height: 48px; border-radius: 10px; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; }
.ctm-tile .i { font-size: 26px; }
.ctm-head h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.3px; }
.ctm-head p { grid-column: 1 / -1; margin: 0; font-size: 16px; color: var(--text-2); }
.ctm-close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border: 0; border-radius: 8px; background: none; color: var(--text); display: grid; place-items: center; cursor: pointer; }
.ctm-close .i { font-size: 24px; } .ctm-close:hover { background: var(--border-soft); }
.ctm-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 18px 26px 22px; }
.ctm-h { margin: 0 0 12px; font-size: 16.5px; font-weight: 600; }
.ctm-cards { display: flex; flex-direction: column; gap: 16px; }
.ctm-card { border: 1px solid var(--border); border-radius: 10px; transition: border-color 0.12s, box-shadow 0.12s; }
.ctm-card.is-on { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo); }
.ctm-ch { position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 18px 18px 18px 20px; cursor: pointer; }
.ctm-ch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ctm-radio { flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; border: 1.5px solid #A9B0C0; background: #fff; box-sizing: border-box; }
.ctm-ch input:checked + .ctm-radio { border: 7px solid var(--indigo); }
.ctm-ch input:focus-visible + .ctm-radio { outline: 2px solid var(--indigo); outline-offset: 2px; }
.ctm-ct { flex: 1; min-width: 0; }
.ctm-ct b { display: block; font-size: 16px; font-weight: 600; }
.ctm-ct small { display: block; margin-top: 5px; font-size: 14.5px; color: var(--muted); }
.ctm-ch > .i { flex: none; margin-top: 14px; font-size: 20px; color: var(--text-2); }
.ctm-card.is-on .ctm-ch > .i { transform: rotate(90deg); }
.ctm-facts { margin: 0 20px 20px; padding: 10px 20px; border-radius: 8px; background: #F7F8FB; }
.ctm-facts > div { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: center; min-height: 34px; }
.ctm-facts dt { font-size: 14px; color: var(--muted); }
.ctm-facts dd { margin: 0; font-size: 14.5px; }
.ctm-card:not(.is-on) .ctm-facts, .ctm-card:not(.is-on) .ctm-custom { display: none; }
.ctm-st { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.ctm-st .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
.ctm-st.is-grey .dot { background: #9CA3AF; }
.ctm-custom { display: flex; flex-direction: column; gap: 12px; padding: 0 20px 20px 60px; }
.ctm-row .cs-lbl { font-size: 14.5px; }
.ctm-testrow { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.ctm-test { height: 40px; padding: 0 14px; font-size: 14.5px; font-weight: 500; color: var(--indigo); }
.ctm-res { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.ctm-res .i { font-size: 18px; }
.ctm-res.is-ok { color: var(--green-text); } .ctm-res.is-ok .i { color: var(--green); }
.ctm-res.is-bad { color: #C0263D; }
.ctm-out { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border); }
.ctm-lead { margin: -4px 0 18px; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.ctm-grid { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 14px 12px; }
.ctm-gl { font-size: 15.5px; }
.ctm-grid .cs-select select { height: 44px; font-size: 15.5px; }
.ctm-foot { flex: none; display: flex; justify-content: flex-end; gap: 16px; min-height: 72px; box-sizing: border-box; padding: 14px 26px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-soft); }
.ctm-foot .btn-outline, .ctm-foot .btn-primary { height: 48px; padding: 0 24px; font-size: 16px; font-weight: 600; justify-content: center; box-shadow: none; }

/* 80 · the Update connection dialog (512 px, the MM-41 frame) */
.cuc-backdrop { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(23, 27, 45, 0.45); overscroll-behavior: contain; }
.cuc-dialog { position: relative; width: 512px; max-width: 100%; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); box-sizing: border-box; display: flex; flex-direction: column;
  background: var(--surface); border-radius: 16px; box-shadow: 0 24px 60px rgba(23, 27, 45, 0.22); }
.cuc-dialog:focus { outline: none; }
.cuc-dialog :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.cuc-head { flex: none; padding: 26px 60px 4px 28px; }
.cuc-head h2 { margin: 0; font-size: 23px; font-weight: 700; letter-spacing: -0.3px; }
.cuc-head p { margin: 6px 0 0; font-size: 15.5px; color: var(--muted); }
.cuc-close { position: absolute; top: 20px; right: 20px; width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--text); display: grid; place-items: center; cursor: pointer; }
.cuc-close .i { font-size: 22px; } .cuc-close:hover { background: var(--border-soft); }
.cuc-tabs { flex: none; display: flex; gap: 10px; margin: 14px 28px 0; border-bottom: 1px solid var(--border); }
.cuc-tab { height: 44px; margin-bottom: -1px; padding: 0 10px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 15.5px; font-weight: 500; color: var(--text-2); cursor: pointer; }
.cuc-tab[aria-selected="true"] { color: var(--indigo); border-bottom-color: var(--indigo); }
.cuc-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 18px 28px 6px; }
.cuc-f { margin-bottom: 18px; }
.cuc-cur, .cuc-scope { display: flex; align-items: center; gap: 8px; height: 40px; box-sizing: border-box; padding: 0 14px; border: 1px solid var(--border); border-radius: 8px; background: #F5F6FA; font-size: 15px; color: var(--text-2); }
.cuc-cur span[aria-hidden] { letter-spacing: 1px; }
.cuc-scope { color: var(--muted); }
.cuc-tested { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-top: 10px; font-size: 14.5px; color: var(--text-2); }
.cuc-ok, .cuc-bad { display: inline-flex; align-items: center; gap: 7px; }
.cuc-ok { color: var(--green-text); } .cuc-ok .i { font-size: 19px; color: var(--green); }
.cuc-bad { color: #C0263D; } .cuc-bad .i { font-size: 19px; }
.cuc-keyrow { display: flex; gap: 12px; }
.cuc-keyrow .cs-input { flex: 1; padding: 0 4px 0 12px; }
.cuc-test { flex: none; height: 40px; min-width: 86px; padding: 0 14px; justify-content: center; font-size: 15px; font-weight: 500; }
.cuc-result { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 0; font-size: 14.5px; }
.cuc-result:empty { display: none; }
.cuc-result .i { flex: none; font-size: 24px; }
.cuc-result b { display: block; font-size: 15px; font-weight: 500; }
.cuc-result small { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }
.cuc-result.is-ok b { color: var(--green-text); } .cuc-result.is-ok .i { color: var(--green); }
.cuc-result.is-bad b, .cuc-result.is-bad .i { color: #C0263D; }
.cuc-info { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; font-size: 14px; color: var(--text-2); }
.cuc-info .i { flex: none; margin-top: 1px; font-size: 17px; color: var(--muted); }
.cuc-dis { display: flex; gap: 16px; padding: 18px; border: 1px solid #F9C5CE; border-radius: 10px; background: #FFF7F8; }
.cuc-disic { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #FDECEF; color: #E0405A; display: grid; place-items: center; }
.cuc-disic .i { font-size: 21px; }
.cuc-dis h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.cuc-dis p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.cuc-shared { display: flex; gap: 8px; margin-top: 10px !important; color: #9A3412 !important; }
.cuc-shared .i { flex: none; margin-top: 2px; font-size: 17px; }
.cuc-foot { flex: none; display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; padding: 18px 28px 22px; border-top: 1px solid var(--border-soft); }
.cuc-cancel { height: 44px; min-width: 94px; padding: 0 18px; justify-content: center; font-size: 16px; font-weight: 500; }
.cuc-save { height: 44px; padding: 0 26px; font-size: 16px; font-weight: 600; box-shadow: none; }
.cuc-save[aria-disabled="true"] { opacity: 0.55; }
.cuc-red { height: 44px; padding: 0 22px; border: 0; border-radius: 10px; background: #E5303F; color: #fff; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.cuc-red:hover { background: #C9202F; }
.cuc-red[hidden], .cuc-save[hidden] { display: none; }
.cuc-red.is-pending::before { border-color: rgba(255, 255, 255, 0.35); border-top-color: #fff; }

/* 81 · Generation defaults: Shared + Post | Video | the 450 px preview, the footer card */
.cgd-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 400px; gap: 16px; align-items: start; }
.cgd-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cgd-card { padding: 18px 20px 12px; }
.cgd-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.cgd-card .cs-select select { padding-right: 30px; } .cgd-card .cs-select > .i:last-child { right: 9px; }
.cgd-f { margin-bottom: 14px; min-width: 0; }
.cgd-f .cs-help { margin-top: 8px; }
.cgd-pf { position: absolute; left: 12px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); pointer-events: none; }
.cs-select.has-pf select { padding-left: 44px; }
.cs-select.has-thumb select { height: 50px; padding-left: 82px; }
.cgd-pthumb { position: absolute; left: 8px; top: 8px; width: 58px; height: 34px; border-radius: 5px; overflow: hidden; pointer-events: none; }
.cgd-pti .cp-art { border-radius: 0; cursor: default; box-shadow: none; }
.cgd-ptm { position: absolute; z-index: 2; left: 5px; top: 5px; width: 14px; height: 14px; border-radius: 3px; background: var(--cg-primary); color: #fff; font-size: 6.5px; font-weight: 700; display: grid; place-items: center; }
.cgd-sw { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 4px 0; }
.cgd-sw b { display: block; font-size: 15px; font-weight: 500; }
.cgd-sw small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.cgd-model { display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: #F7F8FB; }
.cgd-model b { font-size: 15px; font-weight: 500; }
.cgd-model a { font-size: 13.5px; color: var(--indigo); } .cgd-model a:hover { text-decoration: underline; }
.cgd-novideo { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--amber-bg); border: 1px solid #F6D9A8; color: #7A4B0B; font-size: 14px; }
.cgd-novideo[hidden] { display: none; }
.cgd-novideo .i { flex: none; font-size: 18px; color: var(--amber); }
.cgd-novideo a { margin-left: auto; font-weight: 600; color: var(--indigo); }
.cgd-video.is-off .cgd-sw, .cgd-video.is-off .cgd-f:not(:first-of-type) { opacity: 0.6; }
.cgd-preview { padding: 18px; }
.cgd-pvh { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cgd-box { padding: 14px 16px 16px; border-radius: 10px; background: #F7F8FB; }
.cgd-box + .cgd-box { margin-top: 12px; }
.cgd-bh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cgd-bh b { font-size: 15px; font-weight: 600; }
.cgd-bh span { font-size: 13.5px; color: var(--muted); }
.cgd-postwrap { display: flex; align-items: center; height: 200px; }
.cgd-post { position: relative; height: 200px; max-width: 100%; border-radius: 8px; overflow: hidden; color: #fff; }
.cgd-post .cp-art, .cgd-vcard .cp-art { border-radius: 0; cursor: default; box-shadow: none; }
.cgd-mk { position: absolute; z-index: 2; left: 14px; top: 14px; width: 24px; height: 24px; border-radius: 5px; background: var(--cg-primary); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.cgd-ph { position: absolute; z-index: 2; left: 14px; right: 14px; top: 50px; font-size: 21px; font-weight: 700; line-height: 1.1; letter-spacing: -0.3px; }
.cgd-pl { position: absolute; z-index: 2; left: 14px; right: 16px; bottom: 12px; margin: 0; font-size: 9.5px; line-height: 1.35; opacity: 0.85; }
.cgd-post.is-tall .cgd-ph { font-size: 14px; top: 44px; left: 10px; right: 10px; }
.cgd-post.is-tall .cgd-pl { display: none; }
.cgd-post.is-tall .cgd-mk { left: 10px; top: 10px; }
.cgd-post.is-text { background: #fff; color: var(--cg-dark); box-shadow: inset 0 0 0 1px var(--border); }
.cgd-txt { position: relative; height: 100%; box-sizing: border-box; padding: 46px 14px 12px; }
.cgd-txt .cgd-mk { left: 14px; top: 14px; }
.cgd-txt b { display: block; font-size: 17px; font-weight: 700; line-height: 1.15; }
.cgd-txt p { margin: 8px 0 0; font-size: 11px; line-height: 1.4; color: var(--text-2); }
.cgd-post.is-text.is-tall .cgd-txt b { font-size: 12.5px; }
.cgd-post.is-text.is-tall .cgd-txt p { display: none; }
.cgd-dots { position: absolute; z-index: 2; bottom: 8px; left: 50%; display: flex; gap: 4px; transform: translateX(-50%); }
.cgd-dots i { width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: 0.45; }
.cgd-dots i:first-child { opacity: 1; }
.cgd-vrow { display: flex; align-items: flex-start; gap: 22px; }
.cgd-vcard { position: relative; flex: none; height: 186px; border-radius: 8px; overflow: hidden; color: #fff; }
.cgd-vcard.is-wide { height: auto; width: 180px; }
.cgd-vcard.is-square { height: 140px; }
.cgd-vcard .cgd-mk { left: 50%; top: 18px; transform: translateX(-50%); }
.cgd-vh { position: absolute; z-index: 2; left: 8px; right: 8px; top: 44%; font-size: 14.5px; font-weight: 700; line-height: 1.1; text-align: center; }
.cgd-vcard.is-wide .cgd-vh { top: 42%; font-size: 13px; }
.cgd-vfacts { flex: 1; min-width: 0; margin: 0; }
.cgd-vfacts > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; min-height: 30px; }
.cgd-vfacts dt { font-size: 13.5px; color: var(--muted); }
.cgd-vfacts dd { margin: 0; font-size: 14px; }
.cgd-reset { color: var(--indigo); }

/* 82 · Usage & budget: the KPI row, the usage bar, the table | the 450 px controls */
.cub-month { margin-left: auto; align-self: center; }
.cub-msel select { height: 44px; min-width: 232px; padding-left: 44px; font-size: 15.5px; }
.cub-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cub-kpi { display: flex; align-items: center; gap: 22px; min-height: 120px; box-sizing: border-box; }
.cub-kic { flex: none; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; }
.cub-kic .i { font-size: 34px; }
.cub-kic.is-indigo { background: #EEF3FF; color: var(--indigo); }
.cub-kic.is-amber { background: #FEF3E2; color: #D97706; }
.cub-kic.is-green { background: #E7F7F0; color: #16A34A; }
.cub-kt { min-width: 0; }
.cub-kl { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text-2); }
.cub-kv { display: block; margin: 4px 0 2px; font-size: 30px; font-weight: 800; letter-spacing: -0.6px; }
.cub-kt small { font-size: 14.5px; color: var(--muted); }
.cub-usage { padding: 18px 22px; }
.cub-uh { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 12px; }
.cub-uh h2 { margin: 0; font-size: 20px; font-weight: 700; }
.cub-uh span { font-size: 14.5px; color: var(--muted); }
.cub-bar { display: flex; height: 24px; border-radius: 4px; background: #E9ECF3; overflow: hidden; }
.cub-bar[hidden], .cub-legend[hidden] { display: none; }
.cub-seg { display: flex; align-items: center; justify-content: center; overflow: hidden; color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; transition: width 0.3s; }
.cub-seg.is-rec { background: #2F55F4; }
.cub-seg.is-pend { background: #8FA6F8; }
.cub-bar.is-over .cub-seg.is-rec { background: #E0405A; }
.cub-bar.is-over .cub-seg.is-pend { background: #F09AA8; }
.cub-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 44px; margin-top: 12px; font-size: 14.5px; color: var(--text-2); }
.cub-lg i { display: inline-block; width: 14px; height: 14px; margin-right: 10px; border-radius: 50%; vertical-align: -2px; }
.cub-lg.is-rec i { background: #2F55F4; } .cub-lg.is-pend i { background: #8FA6F8; } .cub-lg.is-rest i { background: #D1D5DE; }
.cub-lg b { margin-left: 10px; color: var(--text); }
.cub-lgp { margin-left: auto; color: var(--muted); }
.cub-lgp.is-over { color: #C0263D; font-weight: 600; }
.cub-none { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14.5px; color: var(--muted); }
.cub-none[hidden] { display: none; }
.cub-bottom { display: grid; grid-template-columns: minmax(0, 1fr) 450px; gap: 16px; align-items: start; }
.cub-table { padding: 18px 22px 14px; }
.cub-table h2, .cub-ctl h2 { margin: 0 0 12px; font-size: 20px; font-weight: 700; }
.cub-tw { overflow-x: auto; }
.cub-tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.cub-tbl th, .cub-tbl td { height: 36px; padding: 0 10px; text-align: left; white-space: nowrap; }
.cub-tbl thead th { height: 32px; background: #F5F6FA; font-size: 14px; font-weight: 500; color: var(--text-2); }
.cub-tbl .n { text-align: right; font-variant-numeric: tabular-nums; }
.cub-tbl tbody th { font-weight: 400; }
.cub-tbl tbody th, .cub-tbl tbody td { border-bottom: 1px solid var(--border-soft); }
.cub-tbl tfoot th, .cub-tbl tfoot td { height: 42px; font-weight: 700; border-top: 1px solid var(--border); }
.cub-ti { display: inline-grid; width: 28px; height: 28px; margin-right: 12px; border-radius: 6px; place-items: center; vertical-align: middle; }
.cub-ti .i { font-size: 17px; }
.cub-ti.is-image { background: #EEF3FF; color: var(--indigo); }
.cub-ti.is-video { background: #F4ECFF; color: #8B5CF6; }
.cub-ti.is-text { background: #E7F7F0; color: #16A34A; }
.cub-note { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 13.5px; color: var(--muted); }
.cub-note .i { flex: none; font-size: 17px; }
.cub-ctl { padding: 18px 22px 20px; }
.cub-cur { flex: none; align-self: stretch; display: grid; place-items: center; padding-right: 10px; border-right: 1px solid var(--border); color: var(--muted); }
.cub-row2 { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 14px; }
.cub-stop { display: flex; align-items: flex-start; gap: 12px; padding-top: 2px; }
.cub-stop b { display: block; font-size: 14px; font-weight: 500; color: var(--text-2); }
.cub-stop small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.cub-save { width: 100%; height: 44px; margin-top: 16px; justify-content: center; font-size: 16px; font-weight: 600; box-shadow: none; }

/* 83 · Permissions & approvers: the team table | the approval card, the footer card */
.cpm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.cpm-team { padding: 18px 18px 16px; }
.cpm-tw { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.cpm-tbl { width: 100%; min-width: 640px; border-collapse: collapse; }
.cpm-tbl thead th { height: 86px; padding: 0 10px; background: #F8F9FB; text-align: left; vertical-align: middle; font-size: 14.5px; font-weight: 600; border-bottom: 1px solid var(--border); }
.cpm-tbl th + th, .cpm-tbl td { border-left: 1px solid var(--border); }
.cpm-cap b { display: block; font-size: 14.5px; font-weight: 600; }
.cpm-cap small { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 400; line-height: 1.3; color: var(--muted); }
.cpm-tbl tbody th, .cpm-tbl tbody td { height: 64px; padding: 0 10px; border-top: 1px solid var(--border-soft); text-align: left; font-weight: 400; }
.cpm-tbl tbody tr:first-child th, .cpm-tbl tbody tr:first-child td { border-top: 0; }
.cpm-who { display: flex; align-items: center; gap: 12px; }
.cpm-av { flex: none; width: 40px; height: 40px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-size: 16px; font-weight: 600; }
.cpm-who b { display: block; font-size: 15.5px; font-weight: 600; white-space: nowrap; }
.cpm-who small { display: block; font-size: 13.5px; color: var(--muted); }
.cpm-tbl td .cs-select { width: 122px; }
.cs-select.is-fixed select { background: #F5F6FA; color: var(--text-2); cursor: default; }
.cs-select.is-fixed > .i { font-size: 15px; }
.cpm-c { text-align: center !important; }
.cpm-yes { display: inline-grid; width: 22px; height: 22px; border-radius: 4px; background: var(--indigo); color: #fff; place-items: center; }
.cpm-yes .i { font-size: 15px; stroke-width: 3; }
.cpm-no { color: #9CA3AF; font-size: 18px; }
.cpm-appr { padding: 18px; }
.cpm-blocks { display: flex; flex-direction: column; gap: 16px; }
.cpm-block { padding: 16px 18px; border: 1px solid var(--border); border-radius: 10px; }
.cpm-swb { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cpm-swb b { display: block; font-size: 15.5px; font-weight: 600; }
.cpm-swb small { display: block; margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.cpm-block .cs-lbl { font-weight: 600; font-size: 15.5px; }
.cpm-apsel.has-av select { padding-left: 48px; }
.cpm-apav { position: absolute; left: 12px; top: 50%; width: 26px; height: 26px; border-radius: 50%; transform: translateY(-50%); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; pointer-events: none; }
.cpm-apav[hidden] { display: none; }

/* 84 · Activity log: the filter card, the table | the 384 px details panel */
.cal-filters { display: grid; grid-template-columns: 234px 202px 238px minmax(0, 1fr); gap: 16px; align-items: end; padding: 16px 20px; }
.cal-f { min-width: 0; }
.cal-q .cs-input { height: 40px; }
.cal-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.cal-grid.no-panel { grid-template-columns: minmax(0, 1fr); }
.cal-table { padding: 6px 20px 12px; }
.cal-tw { overflow-x: auto; }
.cal-tbl { width: 100%; min-width: 700px; border-collapse: collapse; }
.cal-tbl th { height: 46px; padding: 0 8px; text-align: left; font-size: 14.5px; font-weight: 500; color: var(--text-2); border-bottom: 1px solid var(--border); }
.cal-tbl td { height: 61px; padding: 0 8px; font-size: 14.5px; border-bottom: 1px solid var(--border-soft); }
.cal-tbl tr.is-sel td { background: #F7F8FF; }
.cal-time { color: var(--muted); white-space: nowrap; }
.cal-actor { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.cal-av { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; }
.cal-av.is-sys { background: #F1F3F7; color: var(--text-2); }
.cal-av .i { font-size: 16px; }
.cal-act { display: inline-flex; align-items: center; gap: 10px; }
.cal-act .i { flex: none; font-size: 21px; color: var(--text-2); }
.cal-content { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cal-tbl td:nth-child(4) { max-width: 260px; }
.cal-thumb, .cal-pic { position: relative; display: block; overflow: hidden; }
.cal-thumb { flex: none; width: 86px; height: 44px; border-radius: 4px; }
.cal-thumb .cp-art, .cal-pic .cp-art { border-radius: 0; cursor: default; box-shadow: none; }
.cal-thumb.is-tile, .cal-pic.is-tile { background: linear-gradient(120deg, var(--cg-dark), #1D3B8F); display: grid; place-items: center; }
.cal-th { width: 28px; height: 28px; border-radius: 6px; background: var(--cg-primary); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.cal-pic.is-tile .cal-th { width: 64px; height: 64px; font-size: 26px; border-radius: 12px; }
.cal-ct { min-width: 0; }
.cal-ct b { display: block; font-size: 14.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ct small { display: block; font-size: 13.5px; color: var(--muted); }
.cal-view { height: 38px; padding: 0 14px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.cal-foot { display: flex; align-items: center; gap: 16px; min-height: 40px; padding: 12px 10px 2px; font-size: 14px; color: var(--muted); }
.cal-older { height: 36px; margin-left: auto; padding: 0 14px; font-size: 14px; }
.cal-older[hidden] { display: none; }
.cal-empty td { height: auto; padding: 18px 0; border-bottom: 0; }
.cal-empty .es { min-height: 0; padding: 18px 0; }
.cal-panel { position: sticky; top: 12px; padding: 18px 20px 20px; outline: none; }
.cal-panel[hidden] { display: none; }
.cal-ph { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-ph h2 { margin: 0; font-size: 20px; font-weight: 700; }
.cal-close { width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--text); display: grid; place-items: center; cursor: pointer; }
.cal-close .i { font-size: 21px; } .cal-close:hover { background: var(--border-soft); }
.cal-pic { height: 170px; border-radius: 8px; }
.cal-phl { position: absolute; z-index: 2; left: 22px; top: 50%; max-width: 70%; transform: translateY(-50%); color: #fff; font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -0.4px; }
.cal-facts { margin: 16px 0 6px; }
.cal-facts > div { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 0; }
.cal-facts dt { font-size: 14.5px; color: var(--muted); }
.cal-facts dd { margin: 0; min-width: 0; font-size: 14.5px; line-height: 1.45; }
.cal-facts dd b { display: block; font-weight: 600; }
.cal-facts dd small { display: block; color: var(--text-2); }
.cal-open { margin-top: 6px; }

@media (max-width: 1280px) {
  .cbp-grid, .cbr-bottom, .cmc-grid, .cub-bottom, .cpm-grid, .cal-grid { grid-template-columns: minmax(0, 1fr); }
  .cbr-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cgd-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cgd-preview { grid-column: 1 / -1; }
  .cmc-card { grid-template-columns: minmax(0, 1fr) 214px; }
  .cmc-c3 { grid-column: 1 / -1; margin-top: 14px; padding-top: 14px; border-left: 0; border-top: 1px solid var(--border); }
  .cal-panel { position: static; }
}
@media (max-width: 1024px) {
  .cs-layout { grid-template-columns: minmax(0, 1fr); }
  .cs-nav { position: static; flex-direction: row; overflow-x: auto; padding: 6px; gap: 4px; }
  .cs-navitem { flex: none; height: 42px; }
  .cal-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .cs-card { padding: 16px; }
  .cbr-top, .cgd-grid, .cgd-pair, .cub-kpis, .cub-row2, .cal-filters, .cbr-rgrid, .cbr-sw { grid-template-columns: minmax(0, 1fr); }
  .cbr-sw { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .cbp-row { grid-template-columns: minmax(0, 1fr); }
  .cbp-lbl { min-height: 0; margin-bottom: 6px; }
  .cbp-banner { min-height: 0; padding: 18px; gap: 14px; }
  .cbp-mono { width: 56px; height: 56px; font-size: 23px; }
  .cbp-bt b { font-size: 23px; }
  .cbp-colors { grid-template-columns: minmax(0, 1fr); }
  .cbp-cl { padding-top: 0; }
  .cbp-facts > div { grid-template-columns: 100px minmax(0, 1fr); }
  .cs-foot { flex-wrap: wrap; }
  .cs-btns { width: 100%; }
  .cs-btns > * { flex: 1; }
  .cs-footcard { flex-wrap: wrap; }
  .cs-footcard > * { flex: 1 1 100%; }
  .cmc-add, .cub-month { width: 100%; margin-left: 0; }
  .cmc-addbtn { width: 100%; justify-content: center; }
  .cub-msel select { width: 100%; min-width: 0; }
  .cmc-main { padding: 12px; }
  .cmc-card { grid-template-columns: minmax(0, 1fr); padding: 16px 0; }
  .cmc-c1 { padding: 0 16px; gap: 14px; }
  .cmc-tile { width: 48px; height: 48px; } .cmc-tile .i { font-size: 26px; }
  .cmc-c2, .cmc-c3 { margin-top: 14px; padding: 14px 16px 0; border-left: 0; border-top: 1px solid var(--border); }
  .cmc-acts > * { flex: 1; justify-content: center; }
  .ctm-drawer { width: 100%; }
  .ctm-head { padding: 18px 56px 8px 16px; column-gap: 14px; }
  .ctm-close { top: 8px; right: 8px; width: 44px; height: 44px; }
  .ctm-body { padding: 14px 16px 18px; }
  .ctm-custom { padding: 0 16px 16px; }
  .ctm-facts { margin: 0 16px 16px; padding: 8px 14px; }
  .ctm-facts > div { grid-template-columns: 110px minmax(0, 1fr); }
  .ctm-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ctm-gl { margin-top: 8px; }
  .ctm-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .ctm-foot > * { flex: 1; }
  .cuc-backdrop { padding: 0; place-items: end stretch; }
  .cuc-dialog { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 16px 16px 0 0; }
  .cuc-head { padding: 16px 52px 4px 16px; }
  .cuc-close { top: 8px; right: 8px; width: 44px; height: 44px; }
  .cuc-tabs { margin: 10px 16px 0; }
  .cuc-body { padding: 14px 16px 4px; }
  .cuc-keyrow { flex-wrap: wrap; }
  .cuc-test { width: 100%; }
  .cuc-tested { grid-template-columns: 110px minmax(0, 1fr); }
  .cuc-tested > :last-child { grid-column: 1 / -1; }
  .cuc-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .cuc-foot > * { flex: 1; justify-content: center; }
  .cgd-vrow { flex-wrap: wrap; }
  .cub-kpi { gap: 16px; min-height: 0; }
  .cub-kic { width: 56px; height: 56px; } .cub-kic .i { font-size: 26px; }
  .cub-kv { font-size: 26px; }
  .cub-legend { gap: 8px 20px; }
  .cub-lgp { margin-left: 0; width: 100%; }
  .cpm-appr, .cpm-team { padding: 14px; }
  .cal-panel .cal-pic { height: 140px; }
}


/* ---------- Content-73 … 75 · production additions (ph-x): the real pictures inside the prototype's drawn slots (the media thumbnails are spans),
   the caption line kept on the facts row, a file no longer available dimmed, the source title linking to the item ---------- */
.ph-mthumb > .ph-art { display: block; }
.ph-mtext small .ph-mcap { flex: 1 1 0; min-width: 0; }
.ph-mrow.is-gone { opacity: 0.6; }

/* ---------- Content-76 … 80 · production additions (cs-x): the real logo and reference pictures on Brand rules, the light swatch outline, the
   drawer's neutral result line and the empty colour line of the brand summary ---------- */
.cbr-lock.has-logo { padding: 12px 16px; box-sizing: border-box; }
.cbr-lock.is-dark { background: var(--cg-dark); }
.cbr-lock .cbr-logoimg { display: block; max-width: 100%; max-height: 72px; width: auto; height: auto; object-fit: contain; }
.cbr-pic { background: #EEF1F7; }
.cbr-pic > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cbr-nopic { display: grid; place-items: center; height: 100%; color: var(--muted); }
.cbr-nopic .i { font-size: 26px; }
.cbp-dot.is-light { box-shadow: inset 0 0 0 1px var(--border); }
.cbp-nocol { margin: 0; padding-top: 12px; font-size: 14px; color: var(--muted); }
.ctm-res.is-info { color: var(--text-2); } .ctm-res.is-info .i { color: var(--muted); }

/* ---------- Content-81 … 84 · production additions (cgd- / cub- / cpm- / cal-): the live KPI wrapper of the usage page, the real cover
   pictures of the activity rows and the details panel, the action icon in the brand tiles ---------- */
#cub-live { display: contents; }
.cal-thumb > .cal-img, .cal-pic > .cal-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cal-pic > .cal-img + .cal-phl { text-shadow: 0 1px 8px rgba(4, 12, 40, 0.55); }
.cal-th .i { font-size: 16px; }
.cal-pic.is-tile .cal-th .i { font-size: 32px; }
.cal-tbl tr.ld-row td { height: 61px; }

/* ---------- Content-85 / 86 / 87 · Library states: the empty library, no search results (lbe-, over Content-19's lb- cards) and Resume the content setup (srs-), plan plans/Content-85.md; the pictures are Content-19's cp-art pack drawings ---------- */
.lbe-root, .srs-root { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-mid: #193F94; --cg-tint: #F1F5F9; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter"; }

/* 85 · the head with its tools, the card with the illustration, the two choice cards and the footer line */
.lbe-head { display: flex; align-items: center; gap: 20px; padding: 0 0 16px 8px; }
.lbe-ht { min-width: 0; flex: 1; }
.lbe-head h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.8px; line-height: 1.15; }
.lbe-head .sub { margin: 6px 0 0; font-size: 18px; color: var(--text-2); }
.lbe-tools { flex: none; display: flex; align-items: center; gap: 14px; }
.lbe-search { position: relative; display: flex; align-items: center; width: 360px; height: 42px; box-sizing: border-box; padding: 0 12px 0 42px; border: 1px solid #D9DDE6;
  border-radius: 8px; background: var(--surface); }
.lbe-search > .i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: 19px; color: var(--muted); pointer-events: none; }
.lbe-search input { width: 100%; min-width: 0; height: 100%; border: 0; background: none; font: inherit; font-size: 16px; color: var(--text); }
.lbe-search input:focus { outline: none; }
.lbe-search:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.lbe-search input::-webkit-search-cancel-button { display: none; }
.lbe-sel { position: relative; display: inline-flex; }
.lbe-sel select { height: 42px; min-width: 144px; padding: 0 38px 0 14px; border: 1px solid #D9DDE6; border-radius: 8px; background: var(--surface); font: inherit; font-size: 16px;
  color: var(--text); appearance: none; cursor: pointer; }
.lbe-sel select:focus-visible { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.lbe-sel > .i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--muted); pointer-events: none; }
.lbe-count { height: 42px; padding-left: 20px; border-left: 1px solid var(--border); display: inline-flex; align-items: center; font-size: 16px; color: var(--muted); white-space: nowrap; }
.lbe-card.lbe-empty { display: flex; flex-direction: column; align-items: center; min-height: 510px; padding: 46px 32px 34px; text-align: center; }
.lbe-illu { width: 158px; height: 110px; }
.lbe-illu svg { display: block; width: 100%; height: 100%; }
.lbe-empty h2 { margin: 26px 0 0; font-size: 30px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.2; }
.lbe-lead { margin: 12px 0 0; font-size: 18px; color: var(--text-2); max-width: 720px; }
.lbe-choices { display: flex; gap: 20px; margin-top: 38px; }
.lbe-choice { display: flex; align-items: center; gap: 22px; width: 380px; min-height: 122px; box-sizing: border-box; padding: 18px 22px; border: 1px solid #D9DDE6; border-radius: 8px;
  background: var(--surface); color: var(--text); text-align: left; text-decoration: none; font: inherit; cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s; }
.lbe-choice:hover { border-color: var(--indigo); box-shadow: 0 4px 16px rgba(59, 91, 253, 0.12); }
.lbe-choice:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }
.lbe-ct { flex: none; width: 58px; height: 58px; border-radius: 8px; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; }
.lbe-ct .i { font-size: 30px; }
.lbe-ctt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lbe-ctt b { font-size: 20px; font-weight: 700; letter-spacing: -0.2px; }
.lbe-ctt span { font-size: 16px; line-height: 1.45; color: var(--text-2); }
.lbe-choice.is-video { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.lbe-choice.is-video .lbe-ct { background: rgba(255, 255, 255, 0.16); color: #fff; }
.lbe-choice.is-video .lbe-ctt span { color: rgba(255, 255, 255, 0.9); }
.lbe-choice.is-video:hover { background: var(--indigo-hover); }
.lbe-choice:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.lbe-status { display: flex; align-items: center; gap: 20px; margin-top: 42px; width: 100%; max-width: 560px; }
.lbe-status .rule { flex: 1; height: 1px; background: var(--border); min-width: 24px; }
.lbe-sline { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: 15px; color: var(--text-2); }
.lbe-st { display: inline-flex; align-items: center; gap: 9px; color: var(--text-2); text-decoration: none; }
.lbe-st .i { font-size: 20px; color: var(--green); }
.lbe-st.is-todo .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px var(--amber-bg); margin-right: 4px; }
.lbe-st.is-todo:hover { color: var(--indigo); }
.lbe-sline .sep { color: var(--muted-2); }
.lbe-apill { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border-radius: 6px; background: #F1F3F7; color: var(--text-2); text-decoration: none; }
.lbe-apill:hover { color: var(--indigo); background: var(--indigo-bg); }
.lbe-apill:focus-visible, .lbe-st:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

/* 86 · the chip toolbar, the heading line, the no-results card, the grid and the footer */
.lbe-bar { display: flex; align-items: center; gap: 16px; margin: 0 0 14px; flex-wrap: wrap; }
.lbe-chips { display: contents; }
.lbe-chip { display: inline-flex; align-items: center; gap: 12px; height: 50px; box-sizing: border-box; padding: 0 6px 0 14px; border: 1px solid #D9DDE6; border-radius: 8px; background: var(--surface); }
.lbe-chip .k { font-size: 16px; color: var(--text-2); }
.lbe-chip .v { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 4px 0 12px; border-radius: 8px; background: var(--indigo-bg); color: var(--indigo); font-size: 16px; font-weight: 500; }
.lbe-chip .v > .i { font-size: 19px; } .lbe-chip .pf { width: 18px; height: 18px; }
.lbe-chip button { width: 30px; height: 30px; border: 0; border-radius: 6px; background: none; color: var(--text-2); display: grid; place-items: center; cursor: pointer; }
.lbe-chip button:hover { color: var(--text); background: rgba(59, 91, 253, 0.12); } .lbe-chip button .i { font-size: 17px; }
.lbe-chip button:focus-visible, .lbe-add:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.lbe-add { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 20px; border: 1px solid #D9DDE6; border-radius: 8px; background: var(--surface); font: inherit;
  font-size: 16px; font-weight: 500; color: var(--text); cursor: pointer; }
.lbe-add:hover, .lbe-add[aria-expanded="true"] { border-color: var(--indigo); color: var(--indigo); }
.lbe-add .i { font-size: 20px; }
.lbe-add[hidden] { display: none; }
.lbe-for { margin: 0 0 12px 8px; font-size: 19px; color: var(--text-2); }
.lbe-for b { color: var(--text); font-weight: 700; }
.lbe-for[hidden] { display: none; }
.lbe-nr { display: flex; flex-direction: column; align-items: center; padding: 50px 16px 40px; text-align: center; }
.lbe-disc { width: 76px; height: 76px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; }
.lbe-disc .i { font-size: 34px; }
.lbe-nr h2 { margin: 22px 0 0; font-size: 26px; font-weight: 700; letter-spacing: -0.3px; }
.lbe-nr p { margin: 8px 0 0; font-size: 17px; color: var(--muted); }
.lbe-acts { display: flex; gap: 14px; margin-top: 24px; flex-wrap: wrap; justify-content: center; }
.lbe-acts > * { height: 46px; min-width: 146px; padding: 0 22px; justify-content: center; font-size: 16px; font-weight: 600; }
.lbe-foot { display: flex; align-items: center; gap: 16px; min-height: 58px; margin-top: auto; padding: 10px 0; border-top: 1px solid var(--border); font-size: 16px; color: var(--muted); }
.lbe-mh { padding: 6px 10px 4px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); }
.lbe-card.is-loading { position: relative; }
@keyframes lbe-sh { to { background-position: -200% 0; } }

/* 87 · the resume card: the checklist column | the rule | the brand column */
.srs-steps { margin-bottom: 16px; }
.srs-card { display: grid; grid-template-columns: minmax(0, 1fr) 1px 640px; gap: 0 34px; padding: 22px 26px 22px 26px; }
.srs-main { min-width: 0; }
.srs-top { display: flex; align-items: flex-start; gap: 28px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.srs-tile { flex: none; width: 58px; height: 58px; border-radius: 10px; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; }
.srs-tile .i { font-size: 28px; }
.srs-top h2 { margin: 10px 0 0; font-size: 26px; font-weight: 700; letter-spacing: -0.4px; }
.srs-top p { margin: 4px 0 0; font-size: 17px; color: var(--text-2); }
.srs-saved { margin: 16px 0 8px 86px; font-size: 15px; color: var(--muted); }
.srs-list { list-style: none; margin: 0 0 0 86px; padding: 0; }
.srs-row { display: flex; align-items: flex-start; gap: 30px; min-height: 66px; padding: 6px 0; }
.srs-row b { display: block; font-size: 17px; font-weight: 600; margin-top: 2px; }
.srs-row p { margin: 3px 0 0; font-size: 15px; color: var(--muted); }
.srs-st { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; margin-top: 2px; }
.srs-row.is-done .srs-st { background: #22C55E; color: #fff; } .srs-row.is-done .srs-st .i { font-size: 18px; stroke-width: 2.6; }
.srs-row.is-current .srs-st { background: #FDEBC8; } .srs-row.is-current .srs-st::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--amber); }
.srs-row.is-todo .srs-st { background: #EEF0F5; } .srs-row.is-todo .srs-st::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #9CA3AF; }
.srs-row.is-current b { color: var(--text); }
.srs-acts { display: flex; gap: 20px; margin: 20px 0 0 86px; flex-wrap: wrap; }
.srs-acts[hidden] { display: none; }
.srs-acts > a { height: 48px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-size: 17px; font-weight: 500; text-decoration: none; box-sizing: border-box; }
.srs-go .i { font-size: 22px; }
.srs-ro { display: flex; align-items: center; gap: 10px; margin: 18px 0 0 86px; font-size: 15px; color: var(--text-2); }
.srs-ro .i { font-size: 18px; color: var(--muted); }
.srs-ro[hidden] { display: none; }
.srs-div { background: var(--border); margin: 12px 0; }
.srs-side { min-width: 0; padding-top: 14px; }
.srs-side h2 { margin: 0; font-size: 20px; font-weight: 700; }
.srs-count { margin: 8px 0 0; font-size: 16px; color: var(--muted); }
.srs-brand { display: flex; align-items: center; gap: 26px; margin-top: 26px; }
.srs-mono { flex: none; width: 86px; height: 86px; border-radius: 8px; background: #2563EB; color: #fff; font-size: 38px; font-weight: 700; display: grid; place-items: center; letter-spacing: -1px; }
.srs-brand b { font-size: 22px; font-weight: 700; }
.srs-brand p { margin: 6px 0 0; font-size: 16px; line-height: 1.4; color: var(--text-2); }
.srs-pics { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 34px 0 0; padding: 0; }
.srs-pic { position: relative; height: 180px; border-radius: 6px; overflow: hidden; }
.srs-pic.is-logo { background: #1E4FE0; background-image: linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 18px 18px; display: grid; place-items: center; }
.srs-none { grid-column: 1 / -1; height: 120px; border: 1px dashed #D9DDE6; border-radius: 8px; display: grid; place-items: center; font-size: 15px; color: var(--muted); }
.srs-card.is-loading > * { visibility: hidden; }
.srs-card.is-loading { position: relative; min-height: 420px; }
.srs-card.is-loading::after { content: ""; position: absolute; inset: 22px 26px; border-radius: 10px; background: linear-gradient(90deg, #EEF0F5 0%, #F6F7FA 50%, #EEF0F5 100%); background-size: 200% 100%; animation: lbe-sh 1.2s linear infinite; }
@media (prefers-reduced-motion: reduce) { .srs-card.is-loading::after { animation: none; } }

@media (max-width: 1280px) {
  .srs-card { grid-template-columns: minmax(0, 1fr) 1px 460px; gap: 0 24px; }
  .srs-pic { height: 140px; }
}
@media (max-width: 1024px) {
  .lbe-head { flex-direction: column; align-items: stretch; }
  .lbe-tools { flex-wrap: wrap; }
  .lbe-search { flex: 1 1 260px; width: auto; }
  .srs-card { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .srs-div { height: 1px; margin: 0; }
}
@media (max-width: 768px) {
  .lbe-head { padding-left: 0; } .lbe-head h1 { font-size: 27px; } .lbe-head .sub { font-size: 16px; }
  .lbe-tools { gap: 10px; }
  .lbe-search, .lbe-sel, .lbe-sel select { width: 100%; }
  .lbe-count { border-left: 0; padding-left: 0; height: auto; }
  .lbe-card.lbe-empty { min-height: 0; padding: 30px 16px 24px; }
  .lbe-empty h2 { font-size: 24px; } .lbe-lead { font-size: 16px; }
  .lbe-choices { flex-direction: column; width: 100%; gap: 12px; margin-top: 26px; }
  .lbe-choice { width: 100%; min-height: 96px; padding: 14px 16px; gap: 16px; }
  .lbe-ct { width: 48px; height: 48px; } .lbe-ct .i { font-size: 25px; }
  .lbe-ctt b { font-size: 18px; } .lbe-ctt span { font-size: 15px; }
  .lbe-status { margin-top: 28px; gap: 10px; } .lbe-status .rule { display: none; }
  .lbe-bar { gap: 10px; }
  .lbe-chip, .lbe-add { flex: 1 1 100%; height: 46px; }
  .lbe-chip { justify-content: space-between; }
  .lbe-add { justify-content: center; }
  .lbe-for { font-size: 17px; margin-left: 0; }
  .lbe-nr { padding: 32px 4px 28px; } .lbe-nr h2 { font-size: 22px; }
  .lbe-acts { width: 100%; flex-direction: column; } .lbe-acts > * { width: 100%; }
  .srs-head h1 { font-size: 27px; }
  .srs-card { padding: 16px; }
  .srs-top { gap: 14px; } .srs-tile { width: 48px; height: 48px; } .srs-top h2 { margin-top: 4px; font-size: 22px; } .srs-top p { font-size: 15px; }
  .srs-saved, .srs-list, .srs-acts, .srs-ro { margin-left: 0; }
  .srs-row { gap: 16px; }
  .srs-acts > a { width: 100%; }
  .srs-brand { gap: 16px; } .srs-mono { width: 64px; height: 64px; font-size: 28px; }
  .srs-pics { gap: 8px; } .srs-pic { height: 110px; }
}

/* ---------- Content-88 / 89 · Setup errors: the website strip on Content-01 and the failed upload rows on Content-04 (cse-), plan plans/Content-88.md ---------- */
/* 88 · the amber strip under the website field and the optional-website note */
.cse-strip { display: flex; align-items: center; gap: 14px; margin-top: 8px; padding: 10px 12px 10px 14px; border: 1px solid #F5D48A; border-radius: 8px; background: #FFF7E6; }
.cse-strip[hidden] { display: none; }
.cse-si { flex: none; width: 28px; display: grid; place-items: center; color: #E08A00; }
.cse-si .i { font-size: 24px; }
.cse-st { flex: 1; min-width: 0; }
.cse-st b { display: block; font-size: 15px; font-weight: 700; color: #8A3B08; }
.cse-st p { margin: 3px 0 0; font-size: 14px; color: var(--text-2); }
.cse-sb { flex: none; display: flex; gap: 8px; }
.cse-sb[hidden] { display: none; }
.cse-sb .btn-outline { height: 36px; padding: 0 16px; font-size: 14.5px; font-weight: 600; background: #fff; box-shadow: none; gap: 8px; }
.cse-sb .btn-outline:disabled { opacity: 0.6; cursor: default; }
.cse-sb .is-pending .i { font-size: 16px; animation: cse-spin 0.9s linear infinite; }
#cse-help { margin-top: 8px; }
.ct-foot #ct-exit .i { font-size: 19px; }
@keyframes cse-spin { to { transform: rotate(360deg); } }

/* 89 · the banner above the upload card, the failed rows under the table, the footer button */
.cse-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cse-col > .ca-upload { flex: 1; }
.cse-banner { display: flex; align-items: center; gap: 14px; min-height: 48px; box-sizing: border-box; padding: 8px 16px; border: 1px solid #F5D48A; border-radius: 8px; background: #FDF1D8;
  font-size: 16px; font-weight: 500; color: #5E4208; }
.cse-banner[hidden] { display: none; }
.cse-bi, .cse-wi { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--amber); color: #fff; font-size: 15px; font-weight: 800; display: grid; place-items: center; line-height: 1; }
.cse-rows { border-top: 1px solid var(--border); background: #FFFCF5; }
.cse-rows[hidden] { display: none; }
.cse-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) 236px; align-items: center; gap: 12px; min-height: 72px; padding: 8px 12px; border-bottom: 1px solid var(--border-soft); font-size: 14px; }
.cse-row:last-child { border-bottom: 0; }
.cse-row .ca-fn .nmw { gap: 3px; }
.cse-sz { font-size: 12.5px; color: var(--muted); }
.cse-ft { flex-direction: column; gap: 0; width: 44px; height: 44px; background: #F3F4F8; color: var(--muted); }
.cse-ft small { font-size: 8.5px; font-weight: 700; letter-spacing: 0.3px; }
.cse-ft .i { font-size: 18px; }
.cse-why { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.cse-wi { width: 20px; height: 20px; font-size: 13px; margin-top: 1px; }
.cse-why .tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cse-why b { font-size: 14px; font-weight: 600; color: #B45309; }
.cse-why small { font-size: 12.5px; color: var(--text-2); }
.cse-ac { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.cse-btn { height: 36px; padding: 0 14px; font-size: 14px; font-weight: 600; color: var(--indigo); border-color: #C9D4FF; background: #fff; box-shadow: none; gap: 6px; white-space: nowrap; }
.cse-btn .i { font-size: 16px; }
.cse-x { width: 32px; height: 32px; border: 0; border-radius: 7px; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.cse-x:hover { background: var(--border-soft); color: var(--text); } .cse-x .i { font-size: 17px; }
.cse-btn:focus-visible, .cse-x:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.ca-actions .cse-replace-all { margin-left: 0; }
.ca-actions .cse-replace-all[hidden] { display: none; }
.ca-actions .ca-hint:empty + .cse-replace-all:not([hidden]) { margin-left: auto; }
.ca-actions .ca-hint:empty + .cse-replace-all:not([hidden]) + .btn-primary { margin-left: 0; }
@media (prefers-reduced-motion: reduce) { .cse-sb .is-pending .i { animation: none; } }

@media (max-width: 768px) {
  .cse-strip { flex-wrap: wrap; }
  .cse-sb { width: 100%; }
  .cse-sb .btn-outline { flex: 1; height: 44px; justify-content: center; }
  .cse-banner { font-size: 15px; }
  .cse-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cse-ac { justify-content: stretch; }
  .cse-ac .cse-btn { flex: 1; height: 44px; justify-content: center; }
  .cse-x { width: 44px; height: 44px; }
  .ca-actions { flex-wrap: wrap; }
  .ca-actions .cse-replace-all { width: 100%; justify-content: center; order: 3; }
}

/* ---------- Content-90 … 96 · Generation problems (gpb-): API access, budget or provider limit, checking the status, partial results, request declined, original video unavailable and model compatibility, plan plans/Content-90.md; the covers are Content-54's vd-poster and Content-49's vsh-comp ---------- */
.gpb-root { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-mid: #193F94; --cg-tint: #F1F5F9; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter"; }
body.gpb-lock { overflow: hidden; }
.gpb-head { align-items: flex-start; }
.gpb-ht { min-width: 0; flex: 1; }
.gpb-head-nav { align-items: center; }
.gpb-head-tight { padding-top: 0; }
.gpb-steps { margin-bottom: 16px; }
.gpb-grid { display: grid; grid-template-columns: minmax(0, 1fr) 504px; gap: 18px; align-items: start; }
.gpb-main { padding: 22px 22px 20px; min-width: 0; }
.gpb-side { padding: 18px 20px; min-width: 0; }
.gpb-sidecol { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.gpb-ch { display: flex; align-items: center; gap: 16px; }
.gpb-ch h2 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.4px; }
.gpb-ch.sm h2 { font-size: 21px; }
.gpb-tile { flex: none; width: 40px; height: 40px; border-radius: 8px; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; }
.gpb-tile .i { font-size: 22px; }
.gpb-lead { margin: 8px 0 18px; font-size: 17px; color: var(--text-2); }
.gpb-sh { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.gpb-sh h2 { margin: 0; font-size: 20px; font-weight: 700; }
.gpb-stile { flex: none; width: 36px; height: 36px; border-radius: 8px; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; }
.gpb-stile .i { font-size: 20px; }
.gpb-count { margin-left: auto; height: 28px; padding: 0 10px; border-radius: 6px; background: #F1F3F7; color: var(--text-2); font-size: 13.5px; display: inline-flex; align-items: center; white-space: nowrap; }
.gpb-ok { flex: none; color: var(--green); display: grid; place-items: center; } .gpb-ok .i { font-size: 22px; }
.gpb-ro { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font-size: 15px; color: var(--text-2); } .gpb-ro .i { color: var(--muted); font-size: 18px; }
.gpb-ro[hidden] { display: none; }

/* the amber / green / grey boxes */
.gpb-alert { display: flex; align-items: flex-start; gap: 18px; padding: 16px 20px; border: 1px solid #F5D48A; border-radius: 8px; background: #FFF7E6; }
.gpb-alert b { display: block; font-size: 17px; font-weight: 700; color: #7A3E08; }
.gpb-alert p { margin: 4px 0 0; font-size: 15.5px; line-height: 1.45; color: #6B4A0B; }
.gpb-ai { flex: none; color: #E08A00; display: grid; place-items: center; }
.gpb-ai .i { font-size: 30px; } .gpb-ai.sm .i { font-size: 22px; }
.gpb-alert.is-big { align-items: center; padding: 22px 24px; }
.gpb-alert.is-big .gpb-ai .i { font-size: 44px; }
.gpb-alert.is-big b { font-size: 20px; color: #9A3412; } .gpb-alert.is-big p { font-size: 16.5px; }
.gpb-alert.is-mid { align-items: center; padding: 18px 22px; }
.gpb-alert.is-mid b { font-size: 18px; color: var(--text); } .gpb-alert.is-mid p { color: var(--text-2); }
.gpb-alert.is-ok { border-color: #A7E3C8; background: #EAF8F1; } .gpb-alert.is-ok .gpb-ai { color: var(--green); }
.gpb-alert.is-ok b { color: var(--green-text); } .gpb-alert.is-ok p { color: #255F43; }
.gpb-alert.is-grey { border-color: #E1E4EB; background: #F6F7FA; } .gpb-alert.is-grey .gpb-ai { color: var(--muted); }
.gpb-alert.is-grey b { color: var(--text); } .gpb-alert.is-grey p { color: var(--text-2); }
.gpb-pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 6px; font-size: 15px; font-weight: 500; white-space: nowrap; }
.gpb-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.gpb-pill .i { font-size: 17px; }
.gpb-pill.sm { height: 24px; padding: 0 9px; font-size: 13px; gap: 6px; } .gpb-pill.sm .dot { width: 6px; height: 6px; }
.gpb-pill.is-amber { background: #FDF1DC; color: #B45309; } .gpb-pill.is-amber .dot { background: var(--amber); }
.gpb-pill.is-green { background: #E7F7F0; color: var(--green-text); } .gpb-pill.is-green .dot, .gpb-pill.is-green .i { color: var(--green); background: none; } .gpb-pill.is-green .dot { background: var(--green); }
.gpb-pill.is-grey { background: #F1F3F7; color: var(--text-2); } .gpb-pill.is-grey .dot { background: var(--muted-2); }
.gpb-pill.is-red { background: #FDECEF; color: #C2334A; } .gpb-pill.is-red .dot { background: #F0546A; }
.gpb-x { width: 18px; height: 18px; border-radius: 50%; background: var(--amber); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.gpb-tip { position: relative; flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); display: inline-grid; place-items: center; cursor: help; vertical-align: middle; }
.gpb-tip > .i { font-size: 18px; }
.gpb-tipbox { position: absolute; z-index: 40; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 250px; padding: 8px 10px; border-radius: 8px; background: #171B2D; color: #fff;
  font-size: 13px; font-weight: 400; line-height: 1.4; text-align: left; white-space: normal; display: none; pointer-events: none; }
.gpb-tip:hover .gpb-tipbox, .gpb-tip:focus-visible .gpb-tipbox { display: block; }
.gpb-rgen .gpb-tipbox, .gpb-pend .gpb-tipbox { left: auto; right: -6px; transform: none; }
.gpb-tip:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.gpb-root .is-pending .i { animation: gpb-spin 0.9s linear infinite; }
@keyframes gpb-spin { to { transform: rotate(360deg); } }
.gpb-th { position: relative; display: block; width: 82px; height: 58px; border-radius: 6px; overflow: hidden; flex: none; }
.gpb-th > *, .gpb-pic > *, .gpb-cover > *, .gpb-icov > *, .gpb-rp > *, .gpb-ip > *, .gpb-vpic > *, .gpb-big > * { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
.gpb-thumbs { display: flex; gap: 6px; margin-top: 10px; }
.gpb-lg { margin: 0; display: grid; place-items: center; container-type: size; background: #1E4FE0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px); background-size: 14px 14px; }
.gpb-lg span { color: #fff; font-weight: 800; letter-spacing: -0.03em; font-size: 44cqh; line-height: 1; }
.gpb-thumbs.lg .gpb-th { width: 96px; height: 80px; }

/* 90 · API access */
.gpb-conn { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 20px; align-items: center; margin-top: 18px; padding: 14px 20px; border: 1px solid var(--border); border-radius: 10px; background: #F8F9FC; }
.gpb-facts { margin: 0; display: grid; gap: 10px; }
.gpb-facts > div { display: grid; grid-template-columns: 114px minmax(0, 1fr); font-size: 15.5px; }
.gpb-facts dt { color: var(--text-2); } .gpb-facts dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.gpb-facts .mono, .gpb-rdl .mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: 1px; }
.gpb-cbtns { display: flex; flex-direction: column; gap: 12px; }
.gpb-cbtns[hidden] { display: none; }
.gpb-cbtns > * { height: 42px; justify-content: center; font-size: 15.5px; font-weight: 600; text-decoration: none; box-shadow: none; }
.gpb-cbtns .btn-outline { color: var(--indigo); }
.gpb-note { display: flex; align-items: center; gap: 14px; margin: 18px 0 0; padding: 12px 16px; border: 1px solid var(--border); border-radius: 8px; font-size: 13.5px; color: var(--text-2); }
.gpb-note .i { flex: none; font-size: 20px; color: var(--indigo); }
.gpb-foot { display: flex; align-items: center; gap: 20px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.gpb-back { display: inline-flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 500; color: var(--indigo); text-decoration: none; }
.gpb-back:hover { text-decoration: underline; } .gpb-back .i { font-size: 18px; }
.gpb-saved { margin-left: auto; font-size: 14px; color: var(--muted); }
.gpb-gen { height: 46px; padding: 0 22px; gap: 10px; font-size: 16px; font-weight: 600; box-shadow: none; }
.gpb-gen:disabled { background: #D5DAE3; border-color: #D5DAE3; color: #fff; cursor: not-allowed; }
.gpb-gen .i { font-size: 19px; }
.gpb-job { display: grid; grid-template-columns: 242px minmax(0, 1fr); gap: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.gpb-cover { position: relative; height: 148px; border-radius: 8px; overflow: hidden; }
.gpb-job b { display: block; font-size: 17px; font-weight: 700; margin-top: 8px; }
.gpb-job p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--text-2); }
.gpb-sum { margin: 0; }
.gpb-sum > div { display: grid; grid-template-columns: 150px minmax(0, 1fr) 26px; align-items: center; min-height: 52px; border-bottom: 1px solid var(--border-soft); font-size: 15.5px; }
.gpb-sum > div:last-child { border-bottom: 0; }
.gpb-sum > div.has-refs { align-items: start; padding: 12px 0; }
.gpb-sum > div.has-refs .gpb-ok { margin-top: 0; }
.gpb-sum dt { display: flex; align-items: center; gap: 14px; color: var(--text); } .gpb-sum dt .i { font-size: 21px; color: var(--text-2); }
.gpb-sum dd { margin: 0; color: var(--text-2); }

/* 91 · budget or provider limit */
.gpb-grid-91 { grid-template-columns: minmax(0, 1fr) 552px; }
.gpb-bud { padding: 26px 28px 24px; }
.gpb-bh { display: flex; align-items: center; gap: 24px; }
.gpb-wallet { flex: none; width: 76px; height: 76px; border-radius: 12px; background: #FDF1DC; color: #E08A00; display: grid; place-items: center; }
.gpb-wallet .i { font-size: 38px; }
.gpb-bh h2 { margin: 0; font-size: 32px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.15; }
.gpb-bh p { margin: 6px 0 0; font-size: 18px; color: var(--text-2); }
.gpb-tabs { display: flex; gap: 8px; margin-top: 22px; border-bottom: 1px solid var(--border); }
.gpb-tab { height: 46px; padding: 0 20px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 17px; font-weight: 500; color: var(--text-2); cursor: pointer; margin-bottom: -1px; }
.gpb-tab[aria-selected="true"] { color: var(--indigo); font-weight: 600; border-bottom-color: var(--indigo); }
.gpb-tab:hover { color: var(--text); } .gpb-tab:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; border-radius: 6px 6px 0 0; }
.gpb-panel { padding-top: 22px; }
.gpb-panel[hidden] { display: none; }
.gpb-box { padding: 20px 18px; border: 1px solid var(--border); border-radius: 10px; }
.gpb-brow { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 18px; color: var(--muted); }
.gpb-bl { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; }
.gpb-bv b { color: var(--text); font-weight: 700; font-size: 19px; }
.gpb-brow.sm { font-size: 16px; margin-top: 12px; }
.gpb-bar { height: 12px; margin-top: 16px; border-radius: 6px; background: var(--track); overflow: hidden; }
.gpb-bar span { display: block; height: 100%; border-radius: inherit; background: var(--indigo); }
.gpb-bar span.is-mid { background: var(--indigo); }
.gpb-box .gpb-alert { margin-top: 22px; }
.gpb-bbtns { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.gpb-bbtns > a { height: 50px; padding: 0 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 500; text-decoration: none; box-shadow: none; }
.gpb-nm { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--muted); } .gpb-nm .i { font-size: 16px; }
.gpb-pl { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text-2); } .gpb-pl b { color: var(--text); }
.gpb-pl.is-none { display: flex; align-items: center; gap: 10px; font-size: 17px; color: var(--text); font-weight: 600; } .gpb-pl.is-none .i { color: var(--green); font-size: 22px; }
.gpb-pl.sm { margin-top: 8px; font-size: 15px; }
.gpb-box .gpb-pl + .gpb-alert { margin-top: 18px; }
.gpb-saved-req { padding: 18px 18px 20px; }
.gpb-pic { position: relative; height: 216px; border-radius: 8px; overflow: hidden; }
.gpb-rt { display: block; margin: 16px 0 10px; font-size: 21px; font-weight: 700; letter-spacing: -0.2px; }
.gpb-rfacts { list-style: none; margin: 0; padding: 0 0 14px; border-bottom: 1px solid var(--border); display: grid; gap: 9px; }
.gpb-rfacts li { display: flex; align-items: center; gap: 16px; font-size: 16px; color: var(--text-2); } .gpb-rfacts .i { font-size: 20px; color: var(--text-2); }
.gpb-rgen { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.gpb-rgen .gpb-gen { flex: 1; height: 52px; justify-content: center; }
.gpb-rgen.end { justify-content: flex-end; } .gpb-rgen.end .gpb-gen { flex: none; }

/* 92 · checking the status */
.gpb-crumbs { display: flex; align-items: center; gap: 8px; margin: 0 0 12px 8px; font-size: 15px; color: var(--muted); }
.gpb-crumbs a { color: var(--muted); text-decoration: none; } .gpb-crumbs a:hover { color: var(--indigo); } .gpb-crumbs [aria-current] { color: var(--text-2); }
.gpb-backlink { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 8px 8px; font-size: 16px; font-weight: 500; color: var(--indigo); text-decoration: none; }
.gpb-backlink:hover { text-decoration: underline; } .gpb-backlink .i { font-size: 19px; }
.gpb-tl { list-style: none; margin: 18px 0 0; padding: 0 0 0 20px; }
.gpb-tl li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 24px; padding-bottom: 20px; }
.gpb-tl li:not(:last-child)::before { content: ""; position: absolute; left: 16px; top: 38px; bottom: 4px; width: 2px; background: #D5DAE3; }
.gpb-td { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; box-sizing: border-box; }
.gpb-tl .is-done .gpb-td { background: var(--indigo); color: #fff; } .gpb-tl .is-done .gpb-td .i { font-size: 18px; stroke-width: 2.6; }
.gpb-tl .is-current .gpb-td { background: #FDEBC8; } .gpb-tl .is-current .gpb-td::after { content: ""; width: 18px; height: 18px; border-radius: 50%; background: #F08C00; }
.gpb-tl .is-todo .gpb-td { border: 2px solid #C5CBD6; background: #F6F7FA; }
.gpb-tl .is-stop .gpb-td { background: #FDECEF; color: #C2334A; } .gpb-tl .is-stop .gpb-td .i { font-size: 17px; }
.gpb-tl b { display: block; font-size: 18px; font-weight: 600; margin-top: 4px; }
.gpb-tl time { display: block; margin-top: 4px; font-size: 15px; color: var(--muted); }
.gpb-tl p { margin: 6px 0 0; font-size: 15px; color: var(--text-2); }
.gpb-next { display: flex; align-items: flex-start; gap: 22px; margin-top: 6px; padding: 16px 22px 18px; border: 1px solid #DCE4FF; border-radius: 10px; background: #F4F7FF; }
.gpb-next[hidden] { display: none; }
.gpb-ni { flex: none; color: var(--indigo); } .gpb-ni .i { font-size: 30px; }
.gpb-next b { font-size: 16px; font-weight: 700; } .gpb-next p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.gpb-acts { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 14px; margin-top: 20px; }
.gpb-acts > .btn-primary, .gpb-acts > .btn-outline { height: 50px; padding: 0 24px; gap: 12px; font-size: 17px; font-weight: 600; text-decoration: none; box-shadow: none; }
.gpb-acts .i { font-size: 20px; }
.gpb-retry { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.gpb-retry .btn-outline { height: 44px; padding: 0 20px; gap: 10px; font-size: 16px; }
.gpb-retry .btn-outline:disabled { background: #EEF0F5; border-color: #E1E4EB; color: var(--muted-2); cursor: not-allowed; }
.gpb-retry small { font-size: 13px; color: var(--muted); }
.gpb-dl { margin: 0; display: grid; gap: 12px; }
.gpb-dl > div { display: grid; grid-template-columns: 164px minmax(0, 1fr); align-items: center; font-size: 15.5px; }
.gpb-dl dt { color: var(--text-2); } .gpb-dl dd { margin: 0; }
.gpb-gs { margin: 0; display: grid; gap: 18px; }
.gpb-gs > div { display: grid; grid-template-columns: 52px 112px minmax(0, 1fr); align-items: start; font-size: 15px; }
.gpb-gs > div.mid { align-items: center; }
.gpb-gs dt { display: contents; color: var(--text-2); }
.gpb-gi { width: 36px; height: 36px; border-radius: 8px; background: #F3F4F8; color: var(--text-2); display: grid; place-items: center; } .gpb-gi .i { font-size: 19px; }
.gpb-gs dt { font-size: 15px; }
.gpb-gs dd { margin: 0; min-width: 0; } .gpb-gs dd b { display: block; font-weight: 600; } .gpb-gs dd small { display: block; margin-top: 3px; font-size: 14px; color: var(--muted); line-height: 1.45; }
.gpb-pend { display: flex; align-items: center; gap: 6px; color: var(--muted); }

/* 93 · partial results */
.gpb-vcard { padding: 22px 26px; }
.gpb-vars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.gpb-var { min-width: 0; display: flex; flex-direction: column; }
.gpb-vpic { position: relative; margin: 0; aspect-ratio: 330 / 284; border-radius: 6px; overflow: hidden; }
.gpb-vpic .vsh-comp-t { font-size: 10cqw; bottom: auto; top: 30%; }
.gpb-vsel { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 15px; color: var(--text-2); cursor: pointer; position: relative; }
.gpb-vsel input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; }
.gpb-vsel .box { width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid #C5CBD6; background: #fff; display: grid; place-items: center; color: #fff; }
.gpb-vsel .box .i { font-size: 14px; stroke-width: 3; opacity: 0; }
.gpb-vsel input:checked + .box { background: var(--indigo); border-color: var(--indigo); } .gpb-vsel input:checked + .box .i { opacity: 1; }
.gpb-vsel input:focus-visible + .box { outline: 2px solid var(--indigo); outline-offset: 2px; }
.gpb-vn { display: flex; align-items: center; gap: 14px; margin-top: 12px; } .gpb-vn b { font-size: 18px; font-weight: 600; }
.gpb-prev { width: 100%; height: 44px; margin-top: 14px; justify-content: center; gap: 10px; font-size: 16px; font-weight: 500; color: var(--indigo); box-shadow: none; }
.gpb-prev .i { font-size: 19px; }
.gpb-var.is-failed { border: 2px dashed #C9CFDB; border-radius: 8px; min-height: 408px; }
.gpb-fail { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; }
.gpb-fd { width: 62px; height: 62px; border-radius: 50%; background: #FDEBC8; color: #E08A00; display: grid; place-items: center; } .gpb-fd .i { font-size: 30px; }
.gpb-fail b { margin-top: 18px; font-size: 18px; font-weight: 600; } .gpb-fail p { margin: 6px 0 0; font-size: 15px; color: var(--muted); }
.gpb-rv { margin-top: 26px; height: 44px; padding: 0 20px; gap: 10px; font-size: 15.5px; font-weight: 500; box-shadow: none; }
.gpb-spin { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--indigo-bg); border-top-color: var(--indigo); animation: gpb-spin 0.9s linear infinite; }
.gpb-vfoot { display: flex; align-items: center; gap: 24px; margin-top: 14px; padding: 16px 22px; }
.gpb-vf { margin: 0; display: flex; align-items: center; flex: 1; min-width: 0; }
.gpb-vf > div { display: grid; grid-template-columns: 38px auto; grid-template-rows: auto auto; column-gap: 14px; padding: 0 28px; border-left: 1px solid var(--border); }
.gpb-vf > div:first-child { padding-left: 0; border-left: 0; }
.gpb-vfi { grid-row: span 2; width: 38px; height: 38px; border-radius: 50%; background: var(--indigo-bg-2); color: var(--indigo); display: grid; place-items: center; align-self: center; } .gpb-vfi .i { font-size: 19px; }
.gpb-vf dt { font-size: 14px; color: var(--muted); } .gpb-vf dd { margin: 2px 0 0; font-size: 15.5px; color: var(--text); }
.gpb-vbtns { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none; }
.gpb-vrow { display: flex; gap: 14px; }
.gpb-vrow > * { height: 46px; padding: 0 20px; gap: 10px; font-size: 16px; font-weight: 600; text-decoration: none; box-shadow: none; display: inline-flex; align-items: center; }
.gpb-vrow .btn-outline { color: var(--indigo); }
.gpb-vrow .is-disabled { opacity: 0.5; cursor: not-allowed; }
.gpb-vrow .i { font-size: 19px; }
.gpb-retryall[hidden] { display: none; }
.gpb-vbtns small { font-size: 13.5px; color: var(--muted); }

/* 94 · declined */
.gpb-hacts { flex: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.gpb-hacts > * { height: 44px; padding: 0 18px; gap: 10px; font-size: 16px; font-weight: 500; text-decoration: none; box-shadow: none; display: inline-flex; align-items: center; }
.gpb-resp { color: var(--indigo); background: var(--indigo-bg-2); border-color: #DCE4FF; } .gpb-resp .i { font-size: 17px; }
.gpb-alert.is-row { align-items: center; gap: 22px; margin-bottom: 16px; padding: 22px 20px; border-radius: 10px; }
.gpb-disc { flex: none; width: 48px; height: 48px; border-radius: 50%; background: #FDEBC8; display: grid; place-items: center; }
.gpb-disc::before { content: "!"; width: 28px; height: 28px; border-radius: 50%; background: #E08A00; color: #fff; font-size: 17px; font-weight: 800; display: grid; place-items: center; }
.gpb-disc { font-size: 0; }
.gpb-dq { flex: 1; min-width: 0; } .gpb-dq b { font-size: 20px; color: var(--text); } .gpb-dq p { font-size: 16.5px; color: var(--text-2); }
.gpb-dfacts { margin: 0; flex: none; display: flex; }
.gpb-dfacts > div { padding: 0 26px; border-left: 1px solid #F1DDB0; }
.gpb-dfacts dt { font-size: 14px; color: var(--muted); } .gpb-dfacts dd { margin: 8px 0 0; font-size: 16.5px; font-weight: 500; color: var(--text); white-space: nowrap; }
.gpb-item { display: flex; align-items: center; gap: 0; padding: 12px 16px 12px 20px; margin-bottom: 16px; }
.gpb-it { flex: 1; display: flex; gap: 22px; min-width: 0; padding-right: 20px; }
.gpb-it small { font-size: 14px; color: var(--muted); } .gpb-it b { display: block; margin-top: 4px; font-size: 21px; font-weight: 700; }
.gpb-it p { margin: 6px 0 0; font-size: 15.5px; color: var(--text-2); max-width: 380px; }
.gpb-if { display: flex; align-items: center; gap: 16px; padding: 12px 24px; border-left: 1px solid var(--border); }
.gpb-if small { display: block; font-size: 14px; color: var(--muted); } .gpb-if span:not(.gpb-gi) { font-size: 15.5px; color: var(--text-2); }
.gpb-icov { position: relative; flex: none; width: 342px; height: 108px; border-radius: 8px; overflow: hidden; margin-left: 12px; }
.gpb-inputs, .gpb-refcard { padding: 16px 20px 18px; margin-bottom: 16px; }
.gpb-inputs h2, .gpb-refcard h2 { margin: 0; font-size: 20px; font-weight: 700; }
.gpb-in { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.gpb-in li { display: flex; align-items: center; gap: 18px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; }
.gpb-ii { flex: none; width: 42px; height: 42px; border-radius: 8px; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; } .gpb-ii .i { font-size: 22px; }
.gpb-in div { flex: 1; min-width: 0; } .gpb-in b { display: block; font-size: 16.5px; font-weight: 600; } .gpb-in b span { font-weight: 400; color: var(--text-2); }
.gpb-in small { display: block; margin-top: 4px; font-size: 14.5px; color: var(--muted); }
.gpb-refcard p { margin: 8px 0 0; font-size: 15.5px; color: var(--text-2); }
.gpb-rfl { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gpb-rfl li { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; padding: 0 20px; border-left: 1px solid var(--border); min-width: 0; }
.gpb-rfl li:first-child { padding-left: 6px; border-left: 0; }
.gpb-rp { position: relative; height: 100px; border-radius: 6px; overflow: hidden; }
.gpb-rfl b { display: block; font-size: 16.5px; font-weight: 600; } .gpb-rfl small { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.gpb-rst { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.gpb-replace { font-size: 15px; font-weight: 600; color: var(--indigo); text-decoration: none; } .gpb-replace:hover { text-decoration: underline; }
.gpb-rfl li.is-bad .gpb-rp { box-shadow: 0 0 0 2px #F5D48A; }

/* 95 · original video unavailable */
.gpb-allback { flex: none; height: 44px; padding: 0 18px; gap: 10px; font-size: 16px; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; }
.gpb-grid-95 { grid-template-columns: minmax(0, 1fr) 580px; }
.gpb-refvid { padding: 16px 16px 12px; }
.gpb-frame { position: relative; height: 370px; margin-top: 16px; border-radius: 8px; overflow: hidden; background: #0E1B3D; }
.gpb-frame > .vd-poster { position: absolute; inset: 0; border-radius: inherit; }
.gpb-frame.is-missing > .vd-poster { filter: saturate(0.5) brightness(0.4) blur(1px); }
.gpb-over { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; color: #fff; background: rgba(5, 10, 30, 0.5); }
.gpb-broken { width: 56px; height: 64px; }
.gpb-over b { margin-top: 18px; font-size: 19px; font-weight: 700; } .gpb-over p { margin: 8px 0 0; font-size: 16px; opacity: 0.92; }
.gpb-chips { position: absolute; z-index: 5; top: 14px; right: 14px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.gpb-chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 6px; font-size: 14px; font-weight: 500; }
.gpb-chip .i { font-size: 16px; }
.gpb-chip.is-amber { background: #FDF1DC; color: #6B4A0B; } .gpb-chip.is-red { background: #FDECEF; color: #C2334A; } .gpb-chip.is-green { background: #E7F7F0; color: var(--green-text); }
.gpb-vmeta { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; }
.gpb-vmeta b { font-size: 20px; font-weight: 700; } .gpb-vmeta p { margin: 6px 0 0; font-size: 14.5px; color: var(--muted); }
.gpb-ta { width: 100%; box-sizing: border-box; min-height: 68px; padding: 10px 12px; border: 1px solid #D9DDE6; border-radius: 8px; font: inherit; font-size: 16px; line-height: 1.45; color: var(--text); resize: vertical; }
.gpb-ta:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.gpb-help { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.gpb-irefs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.gpb-irefs li { padding: 6px; border: 1px solid var(--border); border-radius: 8px; }
.gpb-ip { position: relative; display: block; height: 100px; border-radius: 6px; overflow: hidden; }
.gpb-in2 { display: flex; align-items: center; gap: 10px; padding: 10px 4px 4px; } .gpb-in2 .i { font-size: 17px; color: var(--text-2); }
.gpb-in2 b { flex: 1; font-size: 14.5px; font-weight: 600; min-width: 0; }
.gpb-mnote { margin-top: 16px; padding: 12px 14px 14px; border: 1px solid #F5D48A; border-radius: 8px; background: #FFF7E6; }
.gpb-mnote > p { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14.5px; color: #5E4208; }
.gpb-mnote > p .i { flex: none; font-size: 20px; color: #E08A00; }
.gpb-mnote.is-ok { border-color: #A7E3C8; background: #EAF8F1; } .gpb-mnote.is-ok > p { color: #255F43; } .gpb-mnote.is-ok > p .i { color: var(--green); }
.gpb-mbtns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.gpb-mbtns[hidden] { display: none; }
.gpb-mbtns > button { height: 40px; justify-content: center; gap: 10px; font-size: 15.5px; font-weight: 500; box-shadow: none; }
.gpb-mbtns .btn-outline { color: var(--indigo); border-color: var(--indigo); }
.gpb-editgen { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.gpb-editgen .gpb-gen { height: 44px; justify-content: center; }
.gpb-editgen small { text-align: center; font-size: 13.5px; color: var(--muted); }

/* 96 · model compatibility */
.gpb-grid-96 { grid-template-columns: minmax(0, 1fr) 540px; }
.gpb-compat { padding: 16px 16px 18px; }
.gpb-h3 { margin: 20px 0 10px; font-size: 17px; font-weight: 700; }
.gpb-conncard { position: relative; display: flex; align-items: center; gap: 18px; min-height: 62px; padding: 8px 18px; border: 1px solid #D9DDE6; border-radius: 8px; background: var(--surface); cursor: pointer; }
.gpb-conncard:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.gpb-ci { color: var(--indigo); } .gpb-ci .i { font-size: 30px; }
.gpb-cn { flex: 1; min-width: 0; display: flex; flex-direction: column; } .gpb-cn b { font-size: 16.5px; font-weight: 600; } .gpb-cn small { font-size: 14px; color: var(--muted); margin-top: 3px; }
.gpb-conncard select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font: inherit; }
.gpb-conncard > .i { font-size: 19px; color: var(--text-2); }
.gpb-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gpb-opt { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 16px 16px 14px; border: 1px solid var(--border); border-radius: 8px; min-width: 0; }
.gpb-opt.is-bad { border: 2px solid #F2B340; background: #FFFBF1; padding: 15px 15px 13px; }
.gpb-oi { width: 36px; height: 36px; border-radius: 8px; background: #F3F4F8; color: var(--text-2); display: grid; place-items: center; } .gpb-oi .i { font-size: 19px; }
.gpb-oi.sm { width: 32px; height: 32px; }
.gpb-ob { min-width: 0; }
.gpb-ol { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 16px; font-weight: 600; }
.gpb-sel { position: relative; display: block; }
.gpb-sel select { width: 100%; height: 40px; padding: 0 36px 0 12px; border: 1px solid #D9DDE6; border-radius: 8px; background: #fff; font: inherit; font-size: 15px; color: var(--text); appearance: none; cursor: pointer; }
.gpb-sel select:focus-visible { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.gpb-sel > .i { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-size: 17px; color: var(--text-2); pointer-events: none; }
.gpb-os { margin-top: 10px; font-size: 14.5px; }
.gpb-os.is-ok { display: flex; align-items: center; gap: 8px; color: var(--text-2); } .gpb-os.is-ok .i { font-size: 19px; color: var(--green); }
.gpb-os.is-bad p { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--amber-line); } .gpb-os.is-bad p .i { flex: none; font-size: 18px; color: var(--amber); }
.gpb-sug { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 14.5px; color: var(--text-2); }
.gpb-sug span:first-child { white-space: nowrap; } .gpb-sug .gpb-sel { flex: 1; min-width: 0; }
.gpb-rthumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gpb-rthumbs .gpb-th.sq { width: 76px; height: 56px; }
.gpb-rthumbs .gpb-count { margin-left: 8px; }
.gpb-cfoot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 20px; }
.gpb-cfoot > * { height: 46px; padding: 0 20px; font-size: 16.5px; font-weight: 500; text-decoration: none; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; }
.gpb-cfoot .btn-primary:disabled { background: #C9D4FF; border-color: #C9D4FF; cursor: default; }
.gpb-script { padding: 14px 16px 16px; }
.gpb-editscript { margin-left: auto; height: 36px; padding: 0 12px; gap: 8px; font-size: 14.5px; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; box-shadow: none; }
.gpb-editscript .i { font-size: 16px; }
.gpb-script .gpb-pic { height: 220px; }
.gpb-script .gpb-rt { margin: 14px 0 6px; }
.gpb-stext { margin: 0; font-size: 16px; line-height: 1.45; color: var(--text-2); }
.gpb-adapt { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: start; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.gpb-adapt[hidden] { display: none; }
.gpb-adapt b { display: block; font-size: 16px; font-weight: 600; } .gpb-adapt small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--text-2); }
.gpb-switch { position: relative; flex: none; width: 46px; height: 26px; padding: 0; border: 0; border-radius: 13px; background: #C9CFDD; cursor: pointer; transition: background 0.15s; }
.gpb-switch span { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: left 0.15s; }
.gpb-switch[aria-checked="true"] { background: var(--indigo); } .gpb-switch[aria-checked="true"] span { left: 23px; }
.gpb-switch:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.gpb-inote { display: flex; gap: 12px; margin: 14px 0 0; padding: 12px 14px; border: 1px solid #DCE4FF; border-radius: 10px; background: #F4F7FF; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.gpb-inote .i { flex: none; font-size: 19px; color: var(--indigo); margin-top: 1px; }
.gpb-script .gpb-rgen .gpb-gen { height: 42px; }
.gpb-genh { display: block; margin-top: 6px; text-align: right; font-size: 13px; color: var(--muted); }

/* the dialog frame (93 preview, 94 provider response, 95 versions) */
.gpb-backdrop { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(23, 27, 45, 0.45); overscroll-behavior: contain; }
.gpb-dlg { position: relative; width: 560px; max-width: 100%; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; box-sizing: border-box; padding: 22px 24px 20px;
  background: var(--surface); border-radius: 16px; box-shadow: 0 24px 60px rgba(23, 27, 45, 0.22); }
.gpb-dlg.is-wide { width: 760px; }
.gpb-dlg:focus { outline: none; } .gpb-dlg :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.gpb-dlg h2 { margin: 0 44px 12px 0; font-size: 22px; font-weight: 700; }
.gpb-dx { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border: 0; border-radius: 8px; background: none; color: var(--text); display: grid; place-items: center; cursor: pointer; }
.gpb-dx:hover { background: var(--border-soft); } .gpb-dx .i { font-size: 22px; }
.gpb-dm { margin: 0 0 12px; font-size: 15px; color: var(--text-2); } .gpb-dm.sm { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 14px; } .gpb-dm.sm .i { color: var(--indigo); font-size: 17px; }
.gpb-dm a { color: var(--indigo); font-weight: 600; }
.gpb-big { position: relative; margin: 0 0 12px; aspect-ratio: 330 / 284; max-height: 60vh; border-radius: 10px; overflow: hidden; }
.gpb-big .vsh-comp-t { font-size: 8cqw; top: 30%; bottom: auto; }
.gpb-df { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.gpb-df > button { height: 42px; padding: 0 18px; gap: 8px; font-size: 15.5px; font-weight: 600; box-shadow: none; }
.gpb-rdl { margin: 0; display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: #F8F9FC; }
.gpb-rdl > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); font-size: 15px; } .gpb-rdl dt { color: var(--muted); } .gpb-rdl dd { margin: 0; overflow-wrap: anywhere; }
.gpb-vlist { display: grid; gap: 10px; }
.gpb-vopt { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.gpb-vopt:has(input:checked) { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo); }
.gpb-vopt.is-off { cursor: not-allowed; background: #F8F9FC; } .gpb-vopt.is-off .gpb-vt { opacity: 0.7; }
.gpb-vopt input { width: 18px; height: 18px; accent-color: var(--indigo); margin: 0; }
.gpb-vt { flex: 1; min-width: 0; } .gpb-vt b { display: block; font-size: 15.5px; } .gpb-vt small { display: block; margin-top: 3px; font-size: 13.5px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .gpb-root .is-pending .i, .gpb-spin { animation: none; } }

@media (max-width: 1400px) {
  .gpb-vars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gpb-var.is-failed { min-height: 300px; }
  .gpb-dfacts > div { padding: 0 16px; }
  .gpb-icov { width: 240px; }
}
@media (max-width: 1280px) {
  .gpb-grid, .gpb-grid-91, .gpb-grid-95, .gpb-grid-96 { grid-template-columns: minmax(0, 1fr); }
  .gpb-alert.is-row { flex-wrap: wrap; } .gpb-dfacts { width: 100%; }
  .gpb-dfacts > div:first-child { border-left: 0; padding-left: 0; }
  .gpb-item { flex-wrap: wrap; } .gpb-icov { margin: 12px 0 0; }
  .gpb-in, .gpb-rfl { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .gpb-rfl li { padding: 0; border-left: 0; }
  .gpb-vfoot { flex-direction: column; align-items: stretch; } .gpb-vbtns { align-items: stretch; } .gpb-vbtns small { text-align: right; }
}
@media (max-width: 768px) {
  .gpb-head, .gpb-head-nav { flex-direction: column; align-items: stretch; }
  .gpb-head h1, .gpb-bh h2 { font-size: 26px; }
  .gpb-main, .gpb-side, .gpb-bud, .gpb-vcard, .gpb-refvid, .gpb-compat, .gpb-script, .gpb-saved-req { padding: 16px; }
  .gpb-ch h2 { font-size: 21px; }
  .gpb-alert, .gpb-alert.is-big, .gpb-alert.is-mid { padding: 14px 16px; gap: 12px; }
  .gpb-alert.is-big .gpb-ai .i { font-size: 32px; }
  .gpb-conn { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .gpb-facts > div { grid-template-columns: 100px minmax(0, 1fr); }
  .gpb-cbtns > *, .gpb-acts > .btn-primary, .gpb-acts > .btn-outline { height: 46px; }
  .gpb-foot { flex-wrap: wrap; gap: 12px; } .gpb-saved { margin-left: 0; flex: 1 1 100%; order: 2; } .gpb-foot .gpb-gen { width: 100%; justify-content: center; order: 3; }
  .gpb-job { grid-template-columns: minmax(0, 1fr); } .gpb-cover { height: 180px; }
  .gpb-sum > div { grid-template-columns: 120px minmax(0, 1fr) 26px; }
  .gpb-thumbs { flex-wrap: wrap; } .gpb-th { width: 72px; height: 52px; }
  .gpb-bh { gap: 14px; } .gpb-wallet { width: 56px; height: 56px; } .gpb-wallet .i { font-size: 28px; }
  .gpb-bh p { font-size: 16px; }
  .gpb-tab { flex: 1; padding: 0 8px; font-size: 15.5px; }
  .gpb-box { padding: 14px; } .gpb-brow { flex-wrap: wrap; font-size: 16px; }
  .gpb-bbtns > a { flex: 1 1 100%; height: 48px; }
  .gpb-pic { height: 180px; }
  .gpb-tl { padding-left: 0; } .gpb-tl li { gap: 14px; }
  .gpb-acts > * { flex: 1 1 100%; justify-content: center; }
  .gpb-retry { margin-left: 0; align-items: stretch; } .gpb-retry .btn-outline { justify-content: center; height: 46px; }
  .gpb-dl > div { grid-template-columns: 110px minmax(0, 1fr); }
  .gpb-gs > div { grid-template-columns: 44px minmax(0, 1fr); } .gpb-gs dd { grid-column: 2; }
  .gpb-vars { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .gpb-vf { flex-direction: column; align-items: stretch; gap: 12px; } .gpb-vf > div { padding: 0; border-left: 0; }
  .gpb-vrow { flex-direction: column; } .gpb-vrow > * { justify-content: center; }
  .gpb-hacts { justify-content: stretch; } .gpb-hacts > * { flex: 1 1 100%; justify-content: center; }
  .gpb-dfacts { flex-wrap: wrap; gap: 12px; } .gpb-dfacts > div { flex: 1 1 40%; padding: 0; border-left: 0; } .gpb-dfacts dd { white-space: normal; }
  .gpb-it { padding-right: 0; flex: 1 1 100%; } .gpb-if { flex: 1 1 100%; padding: 12px 0 0; border-left: 0; }
  .gpb-icov { width: 100%; height: 150px; }
  .gpb-rfl li { grid-template-columns: 120px minmax(0, 1fr); }
  .gpb-allback { width: 100%; justify-content: center; }
  .gpb-frame { height: 220px; }
  .gpb-over b { font-size: 16px; } .gpb-over p { font-size: 14px; } .gpb-broken { width: 40px; height: 46px; }
  .gpb-chips { top: 8px; right: 8px; } .gpb-chip { height: 28px; font-size: 12.5px; }
  .gpb-irefs, .gpb-mbtns, .gpb-set { grid-template-columns: minmax(0, 1fr); }
  .gpb-mbtns > button { height: 46px; }
  .gpb-cfoot { flex-direction: column-reverse; align-items: stretch; } .gpb-cfoot > * { width: 100%; }
  .gpb-sug { flex-wrap: wrap; } .gpb-sug .gpb-sel { flex: 1 1 100%; }
  .gpb-backdrop { padding: 0; place-items: end stretch; }
  .gpb-dlg, .gpb-dlg.is-wide { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 16px 16px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); }
  .gpb-dx { top: 8px; right: 8px; width: 44px; height: 44px; }
  .gpb-df > button { flex: 1; justify-content: center; height: 48px; }
}

/* ---------- Content-97 … 100 · Recovery (crc-): view-only access on the video page, the parallel-edit conflict dialog over Content-01, the Cancel generation dialog over Content-21 and Your content is safe (the delivery recovery page), plan plans/Content-97.md; the covers are Content-54's vd-portrait and Content-49's vsh-comp ---------- */
.crc-root, .crc-dlg { --cg-primary: #2563EB; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-mid: #193F94; --cg-tint: #F1F5F9; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter"; }
body.crc-lock-scroll { overflow: hidden; }

/* 97 · the locked actions and the access card on top of the side column */
.vd-actions .crc-locked { background: #F6F7FA; border-color: #E1E4EB; color: var(--muted); box-shadow: none; cursor: not-allowed; opacity: 1; }
.vd-actions .crc-locked .i { color: var(--muted-2); }
.vd-actions .vd-primary.crc-locked .vd-pi { background: none; color: var(--muted-2); }
.crc-send { text-decoration: none; }
.vd-side .crc-access { flex: none; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; margin-bottom: 12px; padding: 16px 18px; border: 1px solid #DCE4FF;
  border-radius: 10px; background: #F4F7FF; }
.crc-lock { width: 44px; height: 44px; border-radius: 10px; background: #fff; color: var(--indigo); display: grid; place-items: center; box-shadow: 0 1px 3px rgba(23, 27, 45, 0.08); }
.crc-lock .i { font-size: 22px; }
.crc-access.is-limited { border-color: #F5D48A; background: #FFFBF1; } .crc-access.is-limited .crc-lock { color: #E08A00; }
.crc-at { min-width: 0; }
.crc-at h2 { margin: 0; font-size: 19px; font-weight: 700; }
.crc-role { margin: 6px 0 0; font-size: 15.5px; color: var(--text-2); } .crc-role b { color: var(--text); }
.crc-at .crc-line { margin: 6px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--text-2); }
.crc-abtns { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.crc-abtns > * { flex: 1 1 160px; height: 40px; justify-content: center; font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: none; display: inline-flex; align-items: center; gap: 8px; }
.crc-abtns .btn-primary:disabled { background: #E7F7F0; border-color: #A7E3C8; color: var(--green-text); cursor: default; opacity: 1; }
.crc-abtns .i { font-size: 17px; }
.crc-root .is-pending .i, .crc-abtns .is-pending .i, .crc-dlg .is-pending .i { animation: crc-spin 0.9s linear infinite; }
@keyframes crc-spin { to { transform: rotate(360deg); } }

/* the dialog frame (98 · 99) */
.crc-backdrop { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(23, 27, 45, 0.45); overscroll-behavior: contain; }
.crc-dlg { position: relative; width: 842px; max-width: 100%; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; box-sizing: border-box;
  background: var(--surface); border-radius: 16px; box-shadow: 0 24px 60px rgba(23, 27, 45, 0.22); }
.crc-dlg:focus { outline: none; } .crc-dlg :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.crc-dx { position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border: 0; border-radius: 8px; background: none; color: var(--text); display: grid; place-items: center; cursor: pointer; }
.crc-dx:hover { background: var(--border-soft); } .crc-dx .i { font-size: 22px; }

/* 98 · the conflict dialog */
.crc-dlg.is-conflict { padding: 28px 28px 22px; }
.crc-dhead { display: flex; align-items: center; gap: 18px; padding-right: 40px; }
.crc-clock { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; } .crc-clock .i { font-size: 27px; }
.crc-dhead h2 { margin: 0; font-size: 27px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.2; }
.crc-dhead p { margin: 4px 0 0; font-size: 16px; color: var(--text-2); }
.crc-dbody { margin-top: 22px; }
.crc-cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.crc-side { padding: 14px 14px 16px; border: 1px solid var(--border); border-radius: 10px; min-width: 0; }
.crc-side > header, .crc-eq > header { display: flex; align-items: center; gap: 14px; }
.crc-ht { flex: none; width: 34px; height: 34px; border-radius: 8px; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; } .crc-ht .i { font-size: 18px; }
.crc-side header b { display: block; font-size: 17px; font-weight: 700; } .crc-side header small { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }
.crc-bx { margin-top: 12px; padding: 12px 12px 14px; border-radius: 8px; background: #F7F8FB; }
.crc-bn { display: flex; align-items: center; gap: 16px; }
.crc-mono { flex: none; width: 66px; height: 66px; border-radius: 8px; background: #2563EB; color: #fff; font-size: 28px; font-weight: 700; display: grid; place-items: center; }
.crc-bn b { font-size: 21px; font-weight: 700; }
.crc-fl { margin: 14px 0 8px; font-size: 15px; font-weight: 600; }
.crc-chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.crc-chips li { height: 36px; border-radius: 6px; background: #ECEEF3; color: var(--text-2); font-size: 15px; display: grid; place-items: center; padding: 0 6px; text-align: center; }
.crc-chips li.is-diff.mine, .crc-fv.is-diff.mine, .crc-bn b.is-diff.mine { background: #FDF1DC; color: #B45309; }
.crc-chips li.is-diff.theirs, .crc-fv.is-diff.theirs, .crc-bn b.is-diff.theirs { background: #E6EBFF; color: var(--indigo); }
.crc-fv { margin: 0; padding: 8px 10px; border-radius: 6px; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.crc-bn b.is-diff { padding: 2px 8px; border-radius: 6px; }
.crc-eq { margin-top: 14px; padding: 14px 14px 12px; border: 1px solid var(--border); border-radius: 10px; }
.crc-eql { margin: 10px 0 0; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; } .crc-eql b { font-weight: 600; color: var(--text-2); }
.crc-eq header b { font-size: 16.5px; font-weight: 700; } .crc-eq header b span { font-weight: 400; color: var(--text-2); }
.crc-eq p { margin: 12px 0 0; padding: 12px 14px; border-radius: 8px; background: #F7F8FB; font-size: 15px; color: var(--text-2); overflow-wrap: anywhere; }
.crc-dfoot { display: flex; align-items: center; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.crc-fn { flex: 1 1 200px; display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13.5px; color: var(--muted); }
.crc-fn .i { flex: none; font-size: 18px; }
.crc-dfoot > button { height: 40px; padding: 0 16px; font-size: 15px; font-weight: 500; box-shadow: none; gap: 8px; }
.crc-mlead { margin: 0 0 12px; font-size: 15px; color: var(--text-2); }
.crc-mrow { margin: 0 0 12px; padding: 12px 14px 14px; border: 1px solid var(--border); border-radius: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.crc-mrow legend { padding: 0 6px; font-size: 15px; font-weight: 700; }
.crc-mopt { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; min-width: 0; }
.crc-mopt:has(input:checked) { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo); background: var(--indigo-bg-2); }
.crc-mopt input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--indigo); flex: none; }
.crc-mopt small { display: block; font-size: 13px; color: var(--muted); } .crc-mopt b { display: block; margin-top: 2px; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }

/* 99 · the cancel dialog */
.crc-dlg.is-cancel { width: 526px; padding: 22px 22px 20px; }
.crc-chead { display: flex; align-items: center; justify-content: space-between; }
.crc-chead h2 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.3px; }
.crc-chead .crc-dx { position: static; }
.crc-job { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; min-height: 130px; box-sizing: border-box; }
.crc-jc { position: relative; flex: none; width: 158px; height: 106px; border-radius: 6px; overflow: hidden; }
.crc-jc > .cp-art { position: absolute; inset: 0; border-radius: inherit; cursor: default; box-shadow: none; }
.crc-jc .jb-hl { position: absolute; z-index: 2; left: 10px; right: 8px; bottom: 10px; font-size: 16px; font-weight: 800; line-height: 1.05; color: #fff; }
.crc-jc .jb-lock { position: absolute; z-index: 2; left: 10px; top: 8px; }
.crc-jc .cg-mark { width: 22px; height: 22px; font-size: 10px; border-radius: 5px; }
.crc-job b { display: block; font-size: 18px; font-weight: 700; } .crc-job small { display: block; margin-top: 3px; font-size: 14.5px; color: var(--text-2); }
.crc-jst { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 15px; font-weight: 500; color: var(--text-2); } .crc-jst .i { font-size: 17px; }
.crc-jst.is-run { color: var(--indigo); }
.crc-ring { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--indigo-bg); border-top-color: var(--indigo); animation: crc-spin 0.9s linear infinite; }
.crc-info { display: flex; align-items: flex-start; gap: 14px; margin-top: 14px; padding: 14px 16px; border-radius: 10px; background: #EEF2FF; }
.crc-info > .i { flex: none; font-size: 24px; color: var(--text-2); }
.crc-info b { display: block; font-size: 15.5px; font-weight: 600; } .crc-info p { margin: 3px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--text-2); }
.crc-info.is-warn { background: #FFF7E6; } .crc-info.is-warn > .i { color: #E08A00; }
.crc-jd { margin-top: 14px; padding: 12px 18px 8px; border: 1px solid var(--border); border-radius: 10px; }
.crc-jd h3 { margin: 0 0 6px; font-size: 15.5px; font-weight: 600; }
.crc-jd dl { margin: 0; }
.crc-jd dl > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; font-size: 15px; }
.crc-jd dt { display: flex; align-items: center; gap: 12px; color: var(--text-2); } .crc-jd dt .i { font-size: 19px; }
.crc-jd dd { margin: 0; text-align: right; color: var(--text-2); }
.crc-cfoot { display: flex; justify-content: flex-end; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.crc-cfoot > button { height: 42px; padding: 0 18px; font-size: 15.5px; font-weight: 500; box-shadow: none; }
.crc-danger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid #F0546A; border-radius: 8px; background: #fff; color: #D63A4E; font: inherit; cursor: pointer; }
.crc-danger:hover { background: #FDECEF; } .crc-danger:disabled { opacity: 0.8; cursor: default; }

/* 100 · the delivery recovery page */
.crc-head { padding-bottom: 14px; }
.crc-dcard { display: grid; grid-template-columns: 254px minmax(0, 1fr); gap: 18px 38px; padding: 18px 18px 18px; }
.crc-cover { position: relative; width: 254px; height: 432px; border-radius: 6px; overflow: hidden; grid-row: span 1; }
.crc-cover > * { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
.crc-cover.is-square { height: 254px; }
.crc-dmain { min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.crc-top { display: flex; gap: 24px; }
.crc-it { flex: 1; min-width: 0; }
.crc-apill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 6px; background: #E7F7F0; color: var(--green-text); font-size: 15px; font-weight: 500; }
.crc-apill .i { font-size: 17px; color: var(--green); }
.crc-it h2 { margin: 14px 0 0; font-size: 26px; font-weight: 700; letter-spacing: -0.3px; }
.crc-it .crc-line { margin: 6px 0 0; font-size: 16px; line-height: 1.45; color: var(--text-2); max-width: 420px; }
.crc-facts { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; font-size: 15.5px; color: var(--muted); } .crc-facts .dot { color: var(--muted-2); }
.crc-appr { flex: none; margin: 0; width: 330px; padding-left: 30px; border-left: 1px solid var(--border); display: grid; gap: 18px; align-content: start; }
.crc-appr dt { font-size: 14px; color: var(--muted); } .crc-appr dd { margin: 8px 0 0; font-size: 16px; color: var(--text); }
.crc-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.crc-panel { padding: 18px 20px 14px; border: 1px solid var(--border); border-radius: 10px; min-width: 0; }
.crc-ph { display: flex; gap: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.crc-ph > div { min-width: 0; flex: 1; }
.crc-sd { flex: none; width: 60px; height: 60px; border-radius: 10px; display: grid; place-items: center; } .crc-sd .i { font-size: 32px; }
.crc-sd.is-bad { background: #FDECEF; color: #E0344E; } .crc-sd.is-warn { background: #FDF1DC; color: #E08A00; }
.crc-sd.is-ok { background: #E7F7F0; color: var(--green); } .crc-sd.is-grey { background: #F1F3F7; color: var(--muted); }
.crc-panel h3 { margin: 2px 0 0; font-size: 19px; font-weight: 700; }
.crc-st { margin: 6px 0 0; font-size: 16px; font-weight: 500; }
.crc-st.is-bad { color: #E0344E; } .crc-st.is-warn { color: #D97706; } .crc-st.is-ok { color: var(--green-text); } .crc-st.is-grey { color: var(--text-2); }
.crc-sl { margin: 4px 0 0; font-size: 15px; color: var(--text-2); }
.crc-pbtn { margin-top: 16px; height: 44px; padding: 0 22px; gap: 10px; font-size: 16px; font-weight: 600; text-decoration: none; box-shadow: none; display: inline-flex; align-items: center; }
.crc-pbtn .i { font-size: 19px; }
.crc-panel .crc-banner { margin: 12px 0 0; padding: 10px 12px; font-size: 14px; } .crc-panel .crc-banner .btn-outline { height: 36px; }
.crc-pf { padding-top: 12px; }
.crc-pl { display: block; font-size: 14px; color: var(--text-2); }
.crc-inc { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 34px; }
.crc-inc li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--text-2); } .crc-inc .i { font-size: 21px; }
.crc-panel.is-ok .crc-inc .i { color: var(--green); }
.crc-rec { display: flex; align-items: center; gap: 12px; margin: 10px 0 0; font-size: 15.5px; color: var(--text-2); } .crc-rec .i { font-size: 20px; }
.crc-rec a { color: var(--indigo); font-weight: 500; text-decoration: none; } .crc-rec a:hover { text-decoration: underline; }
.crc-rl { margin: 4px 0 0 32px; font-size: 14px; color: var(--muted); }
.crc-strip { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 20px; padding: 14px 22px; border: 1px solid #DCE4FF; border-radius: 10px; background: #F4F7FF; }
.crc-strip > .i { flex: none; font-size: 26px; color: var(--indigo); margin-top: 2px; }
.crc-strip b { font-size: 16.5px; font-weight: 600; } .crc-strip p { margin: 4px 0 0; font-size: 15px; color: var(--text-2); }
.crc-back { grid-column: 1 / -1; justify-self: start; height: 44px; padding: 0 20px; gap: 12px; font-size: 16px; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; }
.crc-back .i { font-size: 19px; }
@media (prefers-reduced-motion: reduce) { .crc-root .is-pending .i, .crc-abtns .is-pending .i, .crc-dlg .is-pending .i, .crc-ring { animation: none; } }

@media (max-width: 1280px) {
  .crc-top { flex-direction: column; } .crc-appr { width: auto; padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--border); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crc-panels { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .vd-side .crc-access { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .crc-lock { width: 36px; height: 36px; }
  .crc-abtns > * { flex: 1 1 100%; height: 44px; }
  .crc-backdrop { padding: 0; place-items: end stretch; }
  .crc-dlg, .crc-dlg.is-conflict, .crc-dlg.is-cancel { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 16px 16px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); }
  .crc-dx { top: 8px; right: 8px; width: 44px; height: 44px; }
  .crc-dhead { gap: 12px; padding-right: 44px; } .crc-clock { width: 42px; height: 42px; } .crc-dhead h2 { font-size: 21px; } .crc-dhead p { font-size: 15px; }
  .crc-cmp, .crc-mrow { grid-template-columns: minmax(0, 1fr); }
  .crc-mono { width: 52px; height: 52px; font-size: 22px; }
  .crc-dfoot > button { flex: 1 1 100%; height: 46px; justify-content: center; }
  .crc-chead h2 { font-size: 22px; }
  .crc-job { align-items: flex-start; } .crc-jc { width: 110px; height: 80px; }
  .crc-cfoot > button { flex: 1; height: 46px; }
  .crc-dcard { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .crc-cover { width: 100%; max-width: 254px; justify-self: center; }
  .crc-appr { grid-template-columns: minmax(0, 1fr); }
  .crc-ph { gap: 14px; } .crc-sd { width: 48px; height: 48px; } .crc-sd .i { font-size: 26px; }
  .crc-pbtn { width: 100%; justify-content: center; height: 46px; }
  .crc-strip { padding: 12px 14px; gap: 12px; }
  .crc-back { width: 100%; justify-content: center; }
}

/* ---------- Content-97 … 100 · Recovery (crc-) additions of the build: the locked actions and the access card on the post page, the Send to
   Promotion header button, the cancel dialog's placeholder cover, the delivery page's cover fallback and draft pill, the problem link of the job
   drawer and the "Recover delivery" link of the export pages (plans/Content-97.md) ---------- */
.pd-actions .crc-locked { background: #F6F7FA; border-color: #E1E4EB; color: var(--muted); box-shadow: none; cursor: not-allowed; opacity: 1; }
.pd-actions .crc-locked .i { color: var(--muted-2); }
.pd-actions .pd-primary.crc-locked .pd-pi { background: none; color: var(--muted-2); }
#pd-actions:has(.crc-send) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pd-actions .crc-send { grid-column: span 2; }
.pd-detail .crc-access { flex: none; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; margin-bottom: 12px; padding: 16px 18px; border: 1px solid #DCE4FF;
  border-radius: 10px; background: #F4F7FF; }
.pd-detail .crc-access.is-limited { border-color: #F5D48A; background: #FFFBF1; }
.vd-actions .crc-send:disabled:not(.crc-locked) { opacity: 0.55; cursor: default; }
.crc-jc .cp-art { cursor: default; }
.crc-jph { display: grid; place-items: center; background: linear-gradient(135deg, #2563EB, #0E1B3D); } .crc-jph .i { font-size: 34px; color: #fff; }
.crc-cover img { object-fit: cover; display: block; }
.crc-cover-ph { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 20px; box-sizing: border-box; color: #fff;
  background: linear-gradient(160deg, #2563EB 0%, #193F94 55%, #0E1B3D 100%); }
.crc-cover-ph .i { font-size: 34px; opacity: 0.85; } .crc-cover-ph b { font-size: 24px; font-weight: 800; line-height: 1.1; }
.crc-apill.is-draft { background: var(--amber-bg); color: var(--amber-text); } .crc-apill.is-draft .i { color: var(--amber-line); }
.jd-foot.has-problem { flex-wrap: wrap; row-gap: 12px; }
.jd-foot .crc-problem { flex: 1 1 100%; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: #D63A4E; text-decoration: none; }
.jd-foot .crc-problem:hover { text-decoration: underline; } .jd-foot .crc-problem .i { font-size: 18px; }
.crc-recover { margin-left: auto; flex: none; font-weight: 600; color: var(--indigo); text-decoration: none; white-space: nowrap; } .crc-recover:hover { text-decoration: underline; }
#exp-r-lead .crc-recover { margin-left: 6px; }
@media (max-width: 768px) {
  .pd-detail .crc-access { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 14px; }
  #pd-actions:has(.crc-send) { grid-template-columns: minmax(0, 1fr); } .pd-actions .crc-send { grid-column: auto; }
}

/* ---------- Content-90 … 96 · production additions to the gpb- block (the prototype drew covers with SVG; the pages show the real pictures), plus the
   "See what went wrong" links of Content-11 / 38 / 53 ---------- */
.gpb-root img { object-fit: cover; display: block; }
.gpb-big > img { object-fit: contain; background: #0E1B3D; }
.gpb-val { display: flex; align-items: center; height: 40px; padding: 0 12px; border: 1px solid #D9DDE6; border-radius: 8px; background: #F8F9FC; font-size: 15px; color: var(--text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gpb-opt.is-bad .gpb-val { background: #fff; text-decoration: line-through; text-decoration-color: rgba(180, 83, 9, 0.5); }
.gpb-conncard.is-static { cursor: default; }
.gpb-cchange { flex: none; font-size: 15px; font-weight: 600; color: var(--indigo); text-decoration: none; } .gpb-cchange:hover { text-decoration: underline; }
.gpb-grid-91.is-single { grid-template-columns: minmax(0, 1fr); }
.gpb-frame > .gpb-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.gpb-frame > .gpb-frame-art { position: absolute; inset: 0; border-radius: inherit; }
.gpb-frame.is-missing > .gpb-frame-art { filter: saturate(0.5) brightness(0.4) blur(1px); }
.pgn-problem { flex: none; align-self: flex-start; margin: 22px 0 0 auto; height: 44px; padding: 0 16px; gap: 8px; text-decoration: none; display: inline-flex; align-items: center; font-weight: 500; }
.pgn-problem[hidden] { display: none; }
.pgn-problem + .pgn-chip { margin-left: 12px; }
.pgn-problem .i { color: #C2334A; }
a.vgn-retry { text-decoration: none; } .vgn-why .i { color: #C2334A; }
.gpb-mbtns > button:disabled { opacity: 0.5; cursor: not-allowed; }
#cg2-problem { text-decoration: none; } #cg2-problem[hidden] { display: none; } #cg2-problem .i { color: #C2334A; }
@media (max-width: 768px) {
  .pgn-problem { margin: 0; width: 100%; justify-content: center; } .pgn-problem + .pgn-chip { margin-left: 0; }
}

/* ---------- Content-85 … 100 build: small additions over the prototype blocks above (the server-rendered pictures and the in-card states) ---------- */
.srs-pic > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.srs-pic.is-logo > img { width: 58%; height: 58%; margin: auto; object-fit: contain; border-radius: 12px; }
.lbe-nrwrap { display: flex; flex-direction: column; min-height: 380px; }
.lbe-bar-in { margin: 2px 0 12px; }
.lbe-bar-in .lbe-chip, .lbe-bar-in .lbe-add { height: 44px; }
.lbe-bar-in .lbe-chip .v { height: 32px; }
.lbe-nrwrap .lbe-for { margin-left: 2px; }
.lbe-nrwrap .lbe-nr { flex: 1; }
.lbe-nrwrap .lbe-foot { margin-top: 0; }
.lbe-inbody { display: flex; flex-direction: column; align-items: center; padding: 40px 16px 30px; text-align: center; }
.lb-menu .lbe-mh { padding: 6px 10px 4px; }
.lb-menu .lb-pf { width: 18px; height: 18px; }

/* ---------- Content-51 … 63 open ends: the storyboard's keyframe menu, the progress page's brand look ---------- */
.vsb-menu { max-width: 340px; }
.vsb-menu button .i { flex: none; }
.vsb-menu button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vgn-root.has-look .vg-cover { background: radial-gradient(130% 80% at 60% 100%, color-mix(in srgb, var(--vgn-primary) 55%, var(--vgn-dark)) 0%, var(--vgn-dark) 70%); }
.vgn-root.has-look .vg-cv-tile, .vgn-root.has-look .vgn-mono { background: var(--vgn-primary); }
.vg-cv-tile.has-logo, .vgn-mono.has-logo, .vgn-root.has-look .vg-cv-tile.has-logo, .vgn-root.has-look .vgn-mono.has-logo { background: #fff; overflow: hidden; padding: 10%; }
.vg-cv-tile.has-logo img, .vgn-mono.has-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- Content-85 … 100 open ends: the compatibility page's scene times, the conflict dialog's kept profile fields ---------- */
.gpb-sclist { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.gpb-sclist li { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; border-radius: 8px; background: #F6F7FA; font-size: 14px; }
.gpb-sclist li b { flex: 1; min-width: 0; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gpb-sclist .gpb-sct, .gpb-sclist .gpb-scn { flex: none; font-variant-numeric: tabular-nums; color: var(--text-2); }
.gpb-sclist .gpb-scn { color: #B45309; font-weight: 600; }
.crc-kept { margin-top: 10px; }

/* ---- Content-64 … 84 open ends: the exports list (xl-), the hand-off approval chip, the review details, the modal skeleton, the pack thumbnail */
.xl-root { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.xl-card { padding: 0; overflow: hidden; }
.xl-tw { overflow-x: auto; }
.xl-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.xl-table th { padding: 12px 16px; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
.xl-table td { padding: 12px 16px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; color: var(--text); }
.xl-table tr:last-child td { border-bottom: 0; }
.xl-table small { color: var(--muted); font-size: 12.5px; }
.xl-content { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.xl-thumb { flex: none; width: 64px; height: 44px; border-radius: 6px; overflow: hidden; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; }
.xl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xl-ct { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.xl-ct b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xl-ct b a { color: inherit; text-decoration: none; }
.xl-ct b a:hover { text-decoration: underline; }
.xl-ver { display: inline-grid; place-items: center; min-width: 36px; height: 24px; padding: 0 7px; border-radius: 6px; background: var(--indigo-bg); color: var(--indigo); font-size: 12.5px; font-weight: 600; margin-right: 6px; }
.xl-appr { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; background: var(--green-bg); color: var(--green-text); font-size: 12.5px; font-weight: 600; }
.xl-appr.is-warn { background: var(--amber-bg); color: var(--amber-line); }
.xl-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px; font-size: 12.5px; font-weight: 500; white-space: nowrap; background: var(--indigo-bg); color: var(--indigo); }
.xl-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.xl-pill.is-ready { background: var(--green-bg); color: var(--green-text); }
.xl-pill.is-failed { background: #FDECEF; color: #C0263D; }
.xl-acts { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.xl-acts .btn-outline { height: 34px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rvp-details > .rvp-dsum { align-items: start; padding: 12px 0; }
.rvp-details > .rvp-dsum dd { line-height: 1.45; }
.ld-modal-back { position: fixed; inset: 0; z-index: 70; background: rgba(23, 27, 45, 0.45); display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 16px; }   /* backlog 5.9: one shrinkable column, so a phone never clips the frame */
.ld-modal-back.is-drawer { display: block; padding: 0; }
.ld-modal { position: relative; max-width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 18px; padding: 22px 24px; background: var(--surface); border-radius: 12px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25); }
.ld-modal-back.is-drawer .ld-modal { position: absolute; top: 0; right: 0; bottom: 0; border-radius: 0; }
.ld-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ld-modal-body { display: flex; flex-direction: column; gap: 14px; }
.ld-modal-foot { display: flex; justify-content: flex-end; gap: 10px; }
.ld-modal-back.is-drawer .ld-modal-foot { margin-top: auto; }
.cgd-pti img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 768px) {
  .xl-table th:nth-child(4), .xl-table td:nth-child(4), .xl-table th:nth-child(5), .xl-table td:nth-child(5) { display: none; }
  .ld-modal-back.is-drawer .ld-modal { left: 0; width: auto !important; }
}

/* ---- Provider model lists (2026-09-27): the "Model" select of the image generation pages (content/_model_pick.html, js/model-pick.js) ---- */
.mdl-pick { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 0; }
.mdl-pick.is-compact { margin: 8px 0 0; }
.mdl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mdl-lbl { font-size: 13px; font-weight: 600; color: var(--text); }
.mdl-refresh { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: var(--indigo); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.mdl-refresh .i { width: 13px; height: 13px; }
.mdl-refresh:hover { text-decoration: underline; }
.mdl-refresh:disabled { color: var(--muted-2); cursor: default; text-decoration: none; }
.mdl-refresh:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 4px; }
.mdl-sel { position: relative; display: block; }
.mdl-sel select { display: block; width: 100%; height: 38px; box-sizing: border-box; padding: 0 36px 0 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); font: inherit; font-size: 14px; color: var(--text); appearance: none; -webkit-appearance: none; }
.mdl-sel select:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.14); }
.mdl-sel select:disabled { background: var(--bg); color: var(--muted); }
.mdl-sel .i { position: absolute; right: 12px; top: 50%; margin-top: -8px; font-size: 16px; color: var(--text-2); pointer-events: none; }
.mdl-note { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.mdl-note.is-warn { color: var(--amber-text); }
.vg-model { max-width: 420px; padding-bottom: 4px; }                          /* Content-52: the video model select under the facts */
.vc-model-row { display: flex; align-items: center; gap: 8px; }
.vc-model-row .vc-sel { flex: 1 1 auto; min-width: 0; }
.vc-load { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 40px; padding: 0 12px; white-space: nowrap; }
.vc-load .i { width: 14px; height: 14px; }
.vc-stale { color: var(--amber-text); }
.cx-model-row { display: flex; gap: 8px; align-items: stretch; }
.cx-model-row .np-input { flex: 1; min-width: 0; }
.cx-load { flex: none; white-space: nowrap; }
.cx-stale { margin: 6px 0 0; font-size: 12.5px; color: var(--amber-text); }
.cuc-model { display: flex; flex-direction: column; gap: 6px; }

/* 2026-09-27 (live use) · one Content sub-navigation in one place: Library and Assets use the shared bar under the tabs (it no longer jumps
   between sub-pages); the page never shifts sideways when a scrollbar appears */
html { scrollbar-gutter: stable; }
/* backlog 5.31: a fixed layer cannot paint over the reserved strip, so while a drawer, the side panel or a dialog backdrop is open (static/js/gutter.js
   sets html.has-overlay) the root drops the gutter and the layer reaches the window's right edge; a scrolling page keeps its scrollbar */
html.has-overlay { scrollbar-gutter: auto; }
.lb-head .lb-views { margin-left: auto; align-self: center; }
.lb-head .lb-views + .rq-link { margin-left: 12px; }
.al-top { min-height: 58px; }
.al-top .al-acts { margin-left: auto; }

/* 2026-09-27 (live use) · Studio "Latest content": compact cards (at most 240 px) in as many columns as fit, not four stretched ones */
.st2-items { grid-template-columns: repeat(auto-fill, minmax(180px, 240px)); }
.st2-cover { height: 132px; overflow: hidden; }
.st2-cover .cp-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 768px) { .st2-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 2026-09-27 (live use) · Content library and Brand assets: compact cards in as many columns as fit, not three / four stretched ones */
.lb-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 280px)); }
.lb-cover { height: 158px; overflow: hidden; }
.al-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 250px)); }
@media (max-width: 699px) { .lb-grid, .al-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 430px) { .lb-grid, .al-grid { grid-template-columns: 1fr; } }

/* ---------- Promotion-01 · Promotion overview (pm- module-shared: the eleven business tabs, the domain bar, the planned pages; po- this screen) — plans/Promotion-01.md, prototype/gen/promotion01.css ---------- */
/* the business tab strip carries eleven tabs since Promotion-01 (… Promotion · Advertisement · Analytics · Settings): denser, scrolls when it has to */
.tabs.biz-tabs { gap: 0; padding: 0 8px; overflow-x: auto; scrollbar-width: none; }
.tabs.biz-tabs::-webkit-scrollbar { display: none; }
.tabs.biz-tabs .tab { flex: none; gap: 8px; padding: 13px 13px 11px; font-size: 15.5px; white-space: nowrap; }
.tabs.biz-tabs .tab .i { font-size: 19px; }
/* the Promotion domain bar (Promotion-00 §2): the Content sub-navigation's look, the utilities pushed right behind a divider */
.pm-domain.ct-subnav { height: 48px; gap: 2px; padding: 0 10px; overflow-x: auto; scrollbar-width: none; }
.pm-domain.ct-subnav::-webkit-scrollbar { display: none; }
.pm-domain .ct-subitem { flex: none; padding: 0 14px; font-size: 15px; border-radius: 0; }
.pm-domain .ct-subitem .i { font-size: 18px; }
.pm-domain .ct-subitem:hover:not(.is-active) { background: var(--indigo-bg-2); color: var(--text); }
.pm-domain .ct-subitem:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
.pm-domain-gap { flex: 1 1 auto; min-width: 16px; position: relative; }
.pm-domain-gap::after { content: ""; position: absolute; right: 6px; top: 12px; bottom: 12px; width: 1px; background: var(--border); }
.pm-domain .pm-util { font-size: 14.5px; }
/* the shared planned page and the Advertisement / Analytics placeholders */
.pm-planned { padding: 28px 16px 36px; }
.pm-planned .es { max-width: 560px; margin: 0 auto; }

/* the overview */
.po-root { --cg-primary: #3B5BFD; --cg-mid: #193F94; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-tint: #EEF3FD; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter"; }
.po-head { display: flex; align-items: flex-end; gap: 20px; padding: 6px 4px 14px; }
.po-title { flex: 1 1 auto; min-width: 0; }
.po-head h1 { margin: 0; font-size: 31px; font-weight: 800; letter-spacing: -0.7px; line-height: 1.15; color: var(--text); }
.po-head .sub { margin: 3px 0 0; font-size: 16px; color: var(--text-2); }
.po-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.po-btn.btn-primary, .po-btn.btn-outline { height: 42px; padding: 0 18px; font-size: 15px; font-weight: 600; gap: 9px; box-shadow: none; text-decoration: none; }
.po-btn .i { font-size: 18px; }
.po-btn.btn-outline { border-color: #C9D2FF; color: var(--indigo); }
.po-btn.btn-outline:hover { background: var(--indigo-bg); }
.po-updated { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.po-demo { padding: 2px 8px; border-radius: 6px; background: var(--track); color: var(--text-2); font-size: 12px; font-weight: 600; }
.po-ro { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); } .po-ro .i { font-size: 16px; }

.po-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.po-metric { display: flex; align-items: center; gap: 18px; min-height: 86px; padding: 12px 20px; color: inherit; text-decoration: none; border-radius: 12px; }
.po-metric:hover { border-color: #C9D2FF; }
.po-metric:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.po-mic { flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--indigo-bg); color: var(--indigo); }
.po-mic .i { font-size: 25px; }
.po-metric.is-amber .po-mic { background: var(--amber-bg); color: var(--amber); }
.po-mt { display: flex; flex-direction: column; min-width: 0; }
.po-mt .l { font-size: 14.5px; font-weight: 500; color: var(--text-2); }
.po-mt b { font-size: 25px; font-weight: 700; line-height: 1.2; color: var(--text); }
.po-mt .s { font-size: 13.5px; color: var(--muted); }
.po-mt .s i, .po-count i, .po-strip-facts i, .po-rmeta i { font-style: normal; margin: 0 6px; color: var(--muted-2); }
.po-metric.is-na b { color: var(--muted-2); }

.po-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.po-main > .po-card:last-child, .po-side > .po-card:last-child { flex: 1 1 auto; display: flex; flex-direction: column; }
.po-main > .po-card:last-child > .po-card-foot, .po-side > .po-card:last-child > .po-card-foot { margin-top: auto; padding-top: 10px; }
.po-main, .po-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.po-card { padding: 14px 18px 12px; border-radius: 12px; }
.po-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.po-card-head h2 { margin: 0; flex: 1 1 auto; font-size: 18px; font-weight: 700; letter-spacing: -0.2px; color: var(--text); }
.po-hic { display: inline-grid; place-items: center; color: var(--indigo); } .po-hic .i { font-size: 21px; }
.po-hic.is-amber { color: var(--amber); }
.po-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--indigo); text-decoration: none; white-space: nowrap; }
.po-link .i { font-size: 16px; }
.po-link:hover { text-decoration: underline; }
.po-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.po-card-foot.is-end { justify-content: flex-end; }

/* upcoming posts */
.po-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.po-row { position: relative; display: grid; grid-template-columns: 160px minmax(0, 1fr) 128px 104px 36px; align-items: center; gap: 16px;
  padding: 0 10px 0 0; border: 1px solid var(--border-soft); border-radius: 8px; min-height: 64px; }
.po-thumb { position: relative; display: block; width: 160px; height: 62px; border-radius: 7px 0 0 7px; overflow: hidden; background: var(--track); }
.po-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.po-thumb .ph-mark { top: 50%; transform: translateY(-50%); left: 14px; width: 30px; min-width: 0; font-size: 12px; }
.po-rmain { min-width: 0; }
.po-rtitle { display: block; font-size: 15px; font-weight: 600; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-rtitle:hover { color: var(--indigo); }
.po-rmeta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13.5px; color: var(--text-2); min-width: 0; }
.po-rmeta > span:not(.po-more) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-pf { flex: none; width: 18px; height: 18px; }
.po-more { flex: none; padding: 1px 7px; border-radius: 6px; background: var(--indigo-bg-2); color: var(--indigo); font-size: 12px; font-weight: 600; }
.po-when { font-size: 14.5px; color: var(--text-2); white-space: nowrap; }
.po-chip { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.po-chip .i { font-size: 13px; }
.po-chip.is-green { background: var(--green-bg); color: var(--green-text); }
.po-chip.is-amber { background: var(--amber-bg); color: var(--amber-text); }
.po-chip.is-blue { background: var(--indigo-bg); color: var(--indigo); }
.po-chip.is-grey { background: var(--track); color: var(--text-2); }
.po-dots { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); }
.po-dots .i { font-size: 20px; }
.po-dots:hover, .po-dots[aria-expanded="true"] { background: var(--indigo-bg-2); color: var(--indigo); }
.po-menu { position: absolute; z-index: 20; right: 8px; top: calc(100% - 6px); min-width: 196px; padding: 6px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 10px 28px rgba(23, 27, 45, 0.14); display: flex; flex-direction: column; }
.po-menu a { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-radius: 7px; font-size: 14.5px; color: var(--text); text-decoration: none; }
.po-menu a .i { font-size: 17px; color: var(--muted); }
.po-menu a:hover, .po-menu a:focus { background: var(--indigo-bg-2); outline: none; }
.po-count { display: inline-flex; align-items: center; flex-wrap: wrap; }

/* ready from Content */
.po-ready { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.po-hand { display: flex; gap: 14px; min-width: 0; padding: 0 12px 0 0; border: 1px solid var(--border-soft); border-radius: 8px; overflow: hidden; }
.po-hcover { position: relative; flex: none; width: 138px; height: 74px; background: var(--track); }
.po-hcover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.po-hcover .ph-mark { top: 50%; transform: translateY(-50%); left: 12px; width: 28px; min-width: 0; font-size: 12px; }
.po-hbody { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.po-hbody h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-hmeta { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-2); min-width: 0; }
.po-htype { display: inline-flex; align-items: center; gap: 6px; } .po-htype .i { font-size: 16px; color: var(--muted); }
.po-appr { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.po-appr .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.po-appr.is-ok { color: var(--green-text); }
.po-appr.is-warn { color: var(--amber-text); } .po-appr.is-warn .dot { background: var(--amber); }
.po-use.btn-outline { margin-left: auto; height: 32px; padding: 0 12px; font-size: 13.5px; font-weight: 600; border-color: #C9D2FF; color: var(--indigo); text-decoration: none; white-space: nowrap; }
.po-use.btn-outline:hover { background: var(--indigo-bg); }

/* needs attention */
.po-att { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.po-att-row { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 8px; }
.po-att-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; }
.po-att-ic.is-amber { background: var(--amber-bg); color: var(--amber); } .po-att-ic.is-amber .i { font-size: 20px; }
.po-pf-lg { width: 38px; height: 38px; }
.po-att-t { flex: 1 1 auto; min-width: 0; }
.po-att-t b { display: block; font-size: 15px; font-weight: 600; color: var(--text); }
.po-att-t p { margin: 2px 0 0; font-size: 13.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-att-btn.btn-outline { flex: none; height: 36px; padding: 0 16px; font-size: 14px; font-weight: 600; border-color: #C9D2FF; color: var(--indigo); text-decoration: none; }
.po-att-btn.btn-outline:hover { background: var(--indigo-bg); }

/* recent activity */
.po-acts { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; }
.po-acts::before { content: ""; position: absolute; left: 70px; top: 10px; bottom: 10px; width: 1px; background: var(--border); }
.po-act { display: grid; grid-template-columns: 52px 14px minmax(0, 1fr); gap: 0 12px; align-items: start; padding: 4px 0 8px; }
.po-act time { font-size: 13.5px; color: var(--text-2); padding-top: 1px; }
.po-act-dot { position: relative; z-index: 1; width: 9px; height: 9px; margin: 5px 0 0 1px; border-radius: 50%; background: var(--indigo); box-shadow: 0 0 0 3px var(--surface); }
.po-act b { display: block; font-size: 14.5px; font-weight: 600; color: var(--text); }
.po-act b a { color: inherit; text-decoration: none; } .po-act b a:hover { color: var(--indigo); text-decoration: underline; }
.po-act p { display: flex; align-items: center; gap: 8px; margin: 3px 0 0; font-size: 13.5px; color: var(--text-2); min-width: 0; }
.po-act p span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-act p .i { font-size: 17px; color: var(--muted); flex: none; }
.po-acts-empty { margin: 4px 0; font-size: 14px; color: var(--muted); }

/* the accounts & sessions strip */
.po-strip { display: flex; align-items: center; gap: 10px 16px; margin-top: 16px; padding: 10px 18px; border-radius: 12px; }
.po-strip-t { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; color: var(--text); } .po-strip-t .i { font-size: 21px; color: var(--indigo); }
.po-strip-facts { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; flex-wrap: wrap; font-size: 13.5px; color: var(--text-2); }
.po-strip-t { flex: none; }
.po-warn { display: inline-flex; align-items: center; gap: 6px; } .po-warn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.po-strip-acts { flex: none; display: inline-flex; gap: 10px; margin-left: auto; }
.po-sbtn.btn-outline { height: 38px; padding: 0 14px; font-size: 14px; font-weight: 600; gap: 8px; border-color: #C9D2FF; color: var(--indigo); text-decoration: none; }
.po-sbtn.btn-outline .i { font-size: 17px; }
.po-sbtn.btn-outline:hover { background: var(--indigo-bg); }
.po-analytics { flex: none; margin-left: 4px; }

/* empty states inside the cards */
.po-card .es.compact { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 14px 8px; }
.po-card .es.compact .il { grid-row: span 3; }
.po-card .es.compact h3, .po-card .es.compact p, .po-card .es.compact .acts { grid-column: 2; }

@media (max-width: 1400px) { .po-strip { flex-wrap: wrap; } }
@media (max-width: 1200px) {
  .po-grid { grid-template-columns: minmax(0, 1fr); }
  .po-analytics { margin-left: 0; }
}
@media (max-width: 768px) {
  .po-head { flex-direction: column; align-items: stretch; }
  .po-actions { flex-wrap: wrap; }
  .po-updated { margin-left: 0; }
  .po-metrics { grid-template-columns: minmax(0, 1fr); }
  .po-row { grid-template-columns: 88px minmax(0, 1fr) auto 34px; gap: 10px; }
  .po-thumb { width: 88px; }
  .po-when { font-size: 13px; }
  .po-row .po-chip { display: none; }
  .po-ready { grid-template-columns: minmax(0, 1fr); }
  .po-hmeta { flex-wrap: wrap; row-gap: 6px; }
  .po-hand { padding-bottom: 0; }
  .po-hcover { height: auto; min-height: 74px; width: 110px; }
  .po-strip-acts { margin-left: 0; flex-wrap: wrap; }
}

/* ---------- Promotion-02 · Publishing overview (pu- this screen; pm-menu / pm-dots module-shared ⋯ menus) — plans/Promotion-02.md, prototype/gen/promotion02.css ---------- */
.po-chip.is-red { background: #FDECEF; color: #B42339; }
a.po-chip { text-decoration: none; }
a.po-chip:hover { filter: brightness(0.97); text-decoration: underline; }
/* the shared ⋯ menu: the button toggles the pre-rendered .pm-menu next to it (static/js/promotion-menu.js) */
.pm-menu[hidden] { display: none; }
.pm-menu a[target="_blank"]::after { content: "↗"; margin-left: auto; font-size: 12px; color: var(--muted); }

.pu-root { --cg-primary: #3B5BFD; --cg-mid: #193F94; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-tint: #EEF3FD; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter"; }
.pu-grid { display: grid; grid-template-columns: minmax(0, 1.52fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.pu-main, .pu-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pu-main > .po-card:last-child, .pu-side > .pu-outcomes { flex: 1 1 auto; }
.pu-side > .pu-outcomes { display: flex; flex-direction: column; } .pu-side > .pu-outcomes > .po-card-foot { margin-top: auto; padding-top: 10px; }
/* small thumbnails show the drawing without its headline */
.pu-dthumb .cp-h, .pu-dthumb .cp-lock, .pu-ocover .cp-h, .pu-ocover .cp-lock, .pu-rcover .cp-h, .pu-rcover .cp-lock { display: none; }
.pu-zone { margin-left: auto; margin-right: 8px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }

/* the seven-day strip */
.pu-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.pu-day { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-width: 0; padding: 8px 6px 10px;
  border: 1px solid var(--border-soft); border-radius: 8px; background: var(--surface); }
.pu-dh { display: flex; flex-direction: column; align-items: center; margin-bottom: 6px; line-height: 1.3; }
.pu-dh b { font-size: 13.5px; font-weight: 600; color: var(--text); }
.pu-dh span { font-size: 13px; color: var(--text-2); }
.pu-day.is-today .pu-dh b, .pu-day.is-today .pu-dh span { color: var(--indigo); }
.pu-day.is-today { border-color: #C9D2FF; }
.pu-dthumb { position: relative; display: block; height: 60px; border-radius: 6px; overflow: hidden; background: var(--track); margin-bottom: 6px; }
.pu-dthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pu-dthumb .ph-mark { top: 50%; transform: translateY(-50%); left: 8px; width: 26px; min-width: 0; font-size: 11px; }
.pu-dthumb:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.pu-more { position: absolute; right: 4px; top: 4px; padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.94); color: var(--indigo);
  font-size: 11.5px; font-weight: 700; }
.pu-dplat { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13.5px; font-weight: 500; color: var(--text); }
.pu-dplat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pu-dplat .po-pf { width: 17px; height: 17px; }
.pu-dmeta { display: flex; flex-direction: column; font-size: 13px; color: var(--text-2); line-height: 1.45; }
.pu-dmeta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pu-dmeta .is-none { color: var(--muted-2); }
.pu-dtime { font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.pu-day .po-chip { margin-top: auto; height: auto; min-height: 24px; padding: 3px 6px; font-size: 12px; line-height: 1.25; text-align: center; white-space: normal; }
.pu-day.is-free { align-items: center; }
.pu-free { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 10px 0; }
.pu-plus { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--indigo-bg-2); color: var(--indigo); }
.pu-plus .i { font-size: 20px; }
.pu-free p { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.35; }
.pu-plan.btn-outline { height: 34px; padding: 0 10px; font-size: 13.5px; font-weight: 600; border-color: #C9D2FF; color: var(--indigo); text-decoration: none; white-space: nowrap; }
.pu-plan.btn-outline:hover { background: var(--indigo-bg); }

/* ready to post */
.pu-ready { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pu-rcard { position: relative; display: flex; gap: 12px; min-width: 0; padding: 6px 8px 6px 6px; border: 1px solid var(--border-soft); border-radius: 8px; }
.pu-rcover { position: relative; flex: none; width: 96px; height: 92px; border-radius: 6px; overflow: hidden; background: var(--track); }
.pu-rcover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pu-rcover .ph-mark { top: 50%; transform: translateY(-50%); left: 10px; width: 26px; min-width: 0; font-size: 11px; }
.pu-rbody { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.pu-rbody h3 { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pu-rmeta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); }
.pu-racts { position: relative; display: flex; align-items: center; gap: 6px; }
.pu-use.btn-outline { height: 32px; padding: 0 12px; font-size: 13.5px; font-weight: 600; border-color: #C9D2FF; color: var(--indigo); text-decoration: none; white-space: nowrap; }
.pu-use.btn-outline:hover { background: var(--indigo-bg); }
.pu-racts .pm-menu { top: calc(100% + 2px); right: 0; }

/* the empty states inside the cards (P01's compact grid) */
.pu-root .po-card .es.compact { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 10px 8px; }
.pu-root .po-card .es.compact .il { grid-row: span 3; }
.pu-root .po-card .es.compact h3, .pu-root .po-card .es.compact p, .pu-root .po-card .es.compact .acts { grid-column: 2; }
.pu-root .po-card .es.compact .acts { justify-content: flex-start; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.pu-root .po-card .es.compact .acts .btn-outline { height: 38px; padding: 0 14px; font-size: 14px; font-weight: 600; gap: 8px; border-color: #C9D2FF; color: var(--indigo); text-decoration: none; }
.pu-root .po-card .es.compact .acts .btn-outline .i { font-size: 17px; }

/* publishing activity */
.pu-period select { height: 36px; padding: 0 30px 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 14px; color: var(--text); }
.pu-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pu-tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 12px 12px; border: 1px solid var(--border-soft); border-radius: 8px; }
.pu-tic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--indigo-bg); color: var(--indigo); margin-bottom: 6px; }
.pu-tic .i { font-size: 19px; }
.pu-tile b { font-size: 24px; font-weight: 700; line-height: 1.15; color: var(--text); }
.pu-tile.is-na b { color: var(--muted-2); }
.pu-tile .l { font-size: 14px; color: var(--text-2); }
.pu-delta { display: flex; flex-direction: column; margin-top: 6px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.pu-chg { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; font-size: 13.5px; }
.pu-chg .i { font-size: 14px; }
.pu-chg.is-up { color: var(--green-text); }
.pu-chg.is-down { color: #B42339; }
.pu-chg.is-flat { color: var(--text-2); }

/* recent outcomes */
.pu-outs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pu-out { position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr) auto 34px; align-items: center; gap: 12px; padding: 0 6px 0 0;
  border: 1px solid var(--border-soft); border-radius: 8px; min-height: 56px; }
.pu-ocover { position: relative; display: block; width: 88px; height: 54px; border-radius: 7px 0 0 7px; overflow: hidden; background: var(--track); }
.pu-ocover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pu-ocover .ph-mark { top: 50%; transform: translateY(-50%); left: 8px; width: 26px; min-width: 0; font-size: 11px; }
.pu-omain { min-width: 0; }
.pu-otitle { display: block; font-size: 14.5px; font-weight: 600; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pu-otitle:hover { color: var(--indigo); }
.pu-out .po-rmeta { margin-top: 3px; font-size: 13px; }
.pu-foot-note { font-size: 12.5px; color: var(--muted); }
.pu-out .pm-menu { top: calc(100% - 4px); }

/* need content? */
.pu-need { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pu-need-ic { flex: none; width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; background: var(--indigo-bg); color: var(--indigo); }
.pu-need-ic .i { font-size: 21px; }
.pu-need-t { flex: 1 1 150px; min-width: 0; }
.pu-need-t h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.pu-need-t p { margin: 3px 0 0; font-size: 14px; color: var(--text-2); }
.pu-need-acts { display: flex; gap: 10px; flex: none; }
.pu-nbtn.btn-primary, .pu-nbtn.btn-outline { height: 40px; padding: 0 16px; font-size: 14.5px; font-weight: 600; text-decoration: none; box-shadow: none; }
.pu-nbtn.btn-outline { border-color: #C9D2FF; color: var(--indigo); }
.pu-nbtn.btn-outline:hover { background: var(--indigo-bg); }

@media (max-width: 1280px) {
  .pu-week { overflow: hidden; }
  .pu-days { grid-template-columns: repeat(7, minmax(118px, 1fr)); overflow-x: auto; padding-bottom: 4px; }
  .pu-ready { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1200px) {
  .pu-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .pu-zone { display: none; }
  .pu-ready { grid-template-columns: minmax(0, 1fr); }
  .pu-tiles { gap: 6px; } .pu-tile { padding: 10px 8px; } .pu-tile b { font-size: 20px; } .pu-tile .l { font-size: 13px; } .pu-tic { width: 32px; height: 32px; }
  .pu-out { grid-template-columns: 64px minmax(0, 1fr) 34px; }
  .pu-out .po-chip { grid-column: 2; grid-row: 2; justify-self: start; margin-bottom: 8px; }
  .pu-ocover { width: 64px; }
  .pu-need-acts { width: 100%; }
  .pu-need-acts .pu-nbtn { flex: 1 1 0; justify-content: center; }
}
.pu-period { margin: 0; }

/* ---------- Promotion-03 · Needs attention (na- this screen: the local breadcrumb, the priority-sorted issue table and the detail panel) — plans/Promotion-03.md, prototype/gen/promotion03.css ---------- */
.na-crumbs { display: flex; align-items: center; gap: 10px; padding: 4px 4px 0; font-size: 15px; color: var(--text-2); }
.na-crumbs a { color: var(--indigo); text-decoration: none; } .na-crumbs a:hover { text-decoration: underline; }
.na-crumbs [aria-hidden] { color: var(--muted-2); }
.na-head { align-items: center; padding-top: 10px; }
.na-sel select { height: 44px; min-width: 150px; padding: 0 34px 0 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  font: inherit; font-size: 14.5px; color: var(--text); }
.na-sel.is-sort select { min-width: 196px; }
.na-sel select:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }

.na-grid { display: grid; grid-template-columns: minmax(0, 1.34fr) minmax(400px, 1fr); gap: 16px; align-items: start; }
.na-list { padding: 8px 8px 12px; border-radius: 12px; min-width: 0; }
.na-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; table-layout: fixed; }
.na-table th { padding: 10px 10px 4px; text-align: left; font-size: 14px; font-weight: 500; color: var(--text-2); }
.na-table th:nth-child(1) { width: 33%; } .na-table th:nth-child(2) { width: 19%; } .na-table th:nth-child(3) { width: 15%; }
.na-table th:nth-child(4) { width: 14%; } .na-table th:nth-child(5) { width: 15%; } .na-table th:nth-child(6) { width: 44px; }
.na-row td { padding: 12px 10px; vertical-align: middle; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); background: var(--surface); }
.na-row td:first-child { border-left: 1px solid var(--border-soft); border-radius: 8px 0 0 8px; }
.na-row td:last-child { border-right: 1px solid var(--border-soft); border-radius: 0 8px 8px 0; }
.na-row { cursor: pointer; }
.na-row:hover td { background: #FAFBFF; }
.na-row.is-selected td { background: var(--indigo-bg-2); border-color: #D8E0FF; }
.na-row.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--indigo); }
.na-row:focus-visible { outline: none; } .na-row:focus-visible td { border-color: var(--indigo); }
.na-issue { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.na-issue b { display: block; font-size: 15px; font-weight: 600; color: var(--text); }
.na-issue p { margin: 3px 0 0; font-size: 13.5px; color: var(--text-2); line-height: 1.4; }
.na-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.na-ic .i { font-size: 18px; }
.na-ic.is-high { background: #FDECEF; color: #D63A52; }
.na-ic.is-medium { background: var(--amber-bg); color: var(--amber); }
.na-ic.is-low { background: var(--track); color: var(--text-2); }
.na-acc { display: flex; align-items: center; gap: 10px; min-width: 0; }
.na-pf { flex: none; width: 32px; height: 32px; }
.na-acc b { display: block; font-size: 14.5px; font-weight: 500; color: var(--text); }
.na-acc span, .na-owner span:last-child { display: block; font-size: 13.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.na-acc > div { min-width: 0; }
.na-owner { display: flex; align-items: center; gap: 8px; min-width: 0; }
.na-av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--indigo-bg); color: var(--indigo); font-size: 12px; font-weight: 700; }
.na-age span { display: block; font-size: 14px; color: var(--text-2); }
.na-pri { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 500; }
.na-pri.is-high { color: #D63A52; } .na-pri.is-medium { color: #C07A0B; } .na-pri.is-low { color: var(--green-text); }
.na-act.btn-outline { height: 36px; width: 100%; max-width: 104px; padding: 0 8px; justify-content: center; font-size: 14px; font-weight: 600; border-color: #9FB0FF;
  color: var(--indigo); text-decoration: none; white-space: nowrap; }
.na-act.btn-outline:hover { background: var(--indigo-bg); }
.na-more { position: relative; text-align: right; }
.na-more .pm-menu { right: 4px; top: calc(100% - 8px); min-width: 200px; text-align: left; }
.pm-menu button[role="menuitem"] { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 10px; border: 0; border-radius: 7px;
  background: none; font: inherit; font-size: 14.5px; color: var(--text); text-align: left; cursor: pointer; }
.pm-menu button[role="menuitem"] .i { font-size: 17px; color: var(--muted); }
.pm-menu button[role="menuitem"]:hover, .pm-menu button[role="menuitem"]:focus { background: var(--indigo-bg-2); outline: none; }
.na-noresults, .na-list > .es { margin: 18px 8px 8px; }

/* the detail panel */
.na-panel { padding: 20px 22px 18px; border-radius: 12px; min-width: 0; position: sticky; top: 12px; }
.na-phead { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.na-pmark { width: 50px; height: 50px; display: grid; place-items: center; }
.na-pf-lg { width: 48px; height: 48px; }
.na-pmark.is-file { border-radius: 50%; background: var(--amber-bg); color: var(--amber); } .na-pmark.is-file .i { font-size: 24px; }
.na-ptitle h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; color: var(--text); }
.na-ptitle p { margin: 3px 0 0; font-size: 14.5px; color: var(--text-2); }
.na-prio { align-self: start; padding: 4px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.na-prio.is-high { background: #FDECEF; color: #C2334A; } .na-prio.is-medium { background: var(--amber-bg); color: var(--amber-text); }
.na-prio.is-low { background: var(--track); color: var(--text-2); }
.na-tabs { display: flex; gap: 6px; margin: 18px 0 16px; border-bottom: 1px solid var(--border); }
.na-tab { position: relative; height: 40px; padding: 0 16px; border: 0; background: none; font: inherit; font-size: 14.5px; color: var(--text-2); cursor: pointer; }
.na-tab.is-active { color: var(--indigo); font-weight: 600; }
.na-tab.is-active::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -1px; height: 2px; background: var(--indigo); border-radius: 2px; }
.na-tab:hover:not(.is-active) { background: var(--indigo-bg-2); }
.na-tab:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
.na-details { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; }
.na-dr { border-left: 1px solid var(--border); padding-left: 18px; }
.na-details h3 { margin: 0 0 4px; font-size: 14.5px; font-weight: 600; color: var(--text); }
.na-details h4 { margin: 12px 0 2px; font-size: 14px; font-weight: 500; color: var(--text-2); }
.na-dl p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.na-dl p.na-last { margin-bottom: 12px; }
.na-state { display: flex; align-items: center; gap: 8px; font-size: 14.5px !important; font-weight: 500; color: var(--text) !important; margin-bottom: 4px !important; }
.na-state .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--grey); }
.na-state.is-red .dot { background: #E5484D; } .na-state.is-amber .dot { background: var(--amber); } .na-state.is-green .dot { background: var(--green); }
.na-sess.btn-outline { height: 36px; padding: 0 14px; font-size: 14px; font-weight: 600; gap: 8px; border-color: #9FB0FF; color: var(--indigo); text-decoration: none; }
.na-sess .i { font-size: 16px; }
.na-steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.na-steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; }
.na-steps .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--indigo-bg); color: var(--indigo); font-size: 13px; font-weight: 700; }
.na-steps b { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.na-steps p { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.na-log, .na-rel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.na-log li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 8px; font-size: 14px; }
.na-log p { margin: 0; color: var(--text); } .na-log time { flex: none; color: var(--muted); font-size: 13px; }
.na-rel li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 8px; }
.na-rel b { display: block; font-size: 14px; font-weight: 600; color: var(--text); } .na-rel span { font-size: 13px; color: var(--text-2); }
.na-log li.na-none, .na-rel li.na-none { display: block; border: 0; padding: 4px 0; color: var(--muted); font-size: 14px; }
.na-pfoot { display: grid; grid-template-columns: minmax(150px, 1fr) auto auto; gap: 10px 12px; align-items: end; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.na-assign { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text-2); }
.na-assign select { height: 44px; padding: 0 30px 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 14.5px; color: var(--text); }
.na-pbtn.btn-primary, .na-pbtn.btn-outline { height: 44px; padding: 0 18px; font-size: 15px; font-weight: 600; gap: 8px; box-shadow: none; text-decoration: none; white-space: nowrap; justify-content: center; }
.na-pbtn .i { font-size: 17px; }
.na-pbtn.btn-outline { border-color: #9FB0FF; color: var(--indigo); }
.na-pbtn.btn-outline:hover:not(:disabled) { background: var(--indigo-bg); }
.na-pbtn:disabled { opacity: 0.55; cursor: not-allowed; }
.na-hint { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--muted); text-align: right; }
.na-panel .es { margin: 24px 0; }
.na-ro { grid-column: 1 / -1; margin: 0; font-size: 13.5px; color: var(--muted); }

@media (max-width: 1400px) { .na-pfoot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .na-assign { grid-column: 1 / -1; } }
@media (max-width: 1200px) {
  .na-grid { grid-template-columns: minmax(0, 1fr); }
  .na-panel { position: static; }
}
@media (max-width: 768px) {
  .na-head .po-actions { flex-wrap: wrap; }
  .na-sel, .na-sel select { width: 100%; min-width: 0; }
  .na-table thead { display: none; }
  .na-table, .na-table tbody { display: block; }
  .na-table { border-spacing: 0; }
  .na-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px; margin-bottom: 8px; border: 1px solid var(--border-soft); border-radius: 8px; overflow: visible; position: relative; }
  .na-row td { display: block; border: 0 !important; border-radius: 0 !important; padding: 8px 10px; background: transparent !important; }
  .na-row.is-selected { background: var(--indigo-bg-2); box-shadow: inset 3px 0 0 var(--indigo); }
  .na-row td:nth-child(1) { grid-column: 1 / 3; } .na-row td:nth-child(6) { grid-column: 3; grid-row: 1; }
  .na-row td:nth-child(2) { grid-column: 1; } .na-row td:nth-child(3) { grid-column: 2; }
  .na-row td:nth-child(4) { grid-column: 1; } .na-row td:nth-child(5) { grid-column: 2 / 4; }
  .na-row.is-selected td:first-child { box-shadow: none; }
  .na-details { grid-template-columns: minmax(0, 1fr); }
  .na-dr { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 14px; }
  .na-phead { grid-template-columns: 44px minmax(0, 1fr); } .na-prio { grid-column: 2; justify-self: start; }
  .na-pfoot { grid-template-columns: minmax(0, 1fr); }
  .na-hint { text-align: left; }
}
/* the production additions: the Promotion-01 card title links to its issue, the fragment-only bits */
.po-att-link { color: inherit; text-decoration: none; } .po-att-link:hover { color: var(--indigo); text-decoration: underline; }
.na-rlink { color: inherit; text-decoration: none; } .na-rlink:hover { color: var(--indigo); }
.na-none { font-size: 13.5px; color: var(--muted-2); }
.na-rel b a { color: inherit; text-decoration: none; } .na-rel b a:hover { color: var(--indigo); text-decoration: underline; }
.na-pfoot.is-ro { display: block; }
.na-panel.is-busy, .na-list.is-busy { min-height: 240px; }

/* ---------- Promotion-04 · Post library (pl- this screen: the breadcrumb head with the view switch, search and filters, the status pills, the post table / cards and the selection footer) — plans/Promotion-04.md, prototype/gen/promotion04.css ---------- */
.pl-root { --cg-primary: #3B5BFD; --cg-mid: #193F94; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-tint: #EEF3FD; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter"; }
.pl-crumbs { padding-top: 6px; }
.pl-head { align-items: center; padding: 8px 4px 14px; }
.pl-actions { gap: 12px; flex-wrap: nowrap; }
.pl-seg { display: inline-flex; height: 40px; border: 1px solid #9FB0FF; border-radius: 8px; overflow: hidden; flex: none; }
.pl-segb { display: inline-flex; align-items: center; gap: 9px; padding: 0 16px; border: 0; background: var(--surface); font: inherit; font-size: 14.5px;
  font-weight: 500; color: var(--indigo); text-decoration: none; cursor: pointer; white-space: nowrap; }
.pl-segb + .pl-segb { border-left: 1px solid #9FB0FF; }
.pl-segb .i { font-size: 18px; }
.pl-segb.is-active { background: var(--indigo); color: #fff; }
.pl-segb:not(.is-active):hover { background: var(--indigo-bg); }
.pl-segb:focus-visible { outline: 2px solid var(--indigo); outline-offset: -3px; }
.pl-search { position: relative; display: flex; align-items: center; width: 252px; height: 40px; flex: 0 1 252px; min-width: 150px; }
.pl-search > .i { position: absolute; left: 13px; font-size: 18px; color: var(--muted); pointer-events: none; }
.pl-search input { width: 100%; height: 40px; padding: 0 34px 0 40px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  font: inherit; font-size: 14.5px; color: var(--text); }
.pl-search input::placeholder { color: var(--muted); }
.pl-search input::-webkit-search-cancel-button { display: none; }
.pl-search input:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.pl-clear { position: absolute; right: 6px; width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.pl-clear:hover { background: var(--indigo-bg-2); color: var(--text); } .pl-clear .i { font-size: 15px; }
.pl-ibtn { position: relative; width: 42px; height: 40px; flex: none; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text-2); cursor: pointer; }
.pl-ibtn .i { font-size: 19px; }
.pl-ibtn:hover, .pl-ibtn[aria-expanded="true"] { border-color: #C9D2FF; background: var(--indigo-bg-2); color: var(--indigo); }
.pl-ibtn:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.pl-ibtn.is-on { border-color: #9FB0FF; color: var(--indigo); }
.pl-badge { position: absolute; top: -7px; right: -7px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--indigo); color: #fff;
  font-size: 11.5px; font-weight: 700; display: grid; place-items: center; }
.pl-more { position: relative; }
.pl-more > .pm-menu { right: 0; top: calc(100% + 6px); min-width: 210px; }
.pl-create.po-btn { height: 40px; }

/* the status pills */
.pl-pills { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 14px; padding: 0 2px; }
.pl-pill { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px 0 16px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); font-size: 14.5px; font-weight: 500; color: var(--text); text-decoration: none; white-space: nowrap; }
.pl-pill:hover { border-color: #C9D2FF; }
.pl-pill.is-active { border-color: var(--indigo); background: var(--indigo-bg-2); color: var(--indigo); box-shadow: inset 0 0 0 1px var(--indigo); }
.pl-pill:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.pl-count { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--track); color: var(--text-2); font-size: 12.5px;
  font-weight: 600; display: grid; place-items: center; }
.pl-pill.is-active .pl-count { background: #fff; color: var(--indigo); }

/* the list card */
.pl-card { padding: 0; border-radius: 12px; overflow: visible; }
.pl-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pl-table th { height: 46px; padding: 0 12px; text-align: left; font-size: 14.5px; font-weight: 500; color: var(--text); border-bottom: 1px solid var(--border); white-space: nowrap; }
.pl-table th.pl-cbc, .pl-table td.pl-cbc { width: 50px; padding: 0 6px 0 18px; }
.pl-table th:nth-child(2) { width: 29%; } .pl-table th:nth-child(3) { width: 11.5%; } .pl-table th:nth-child(4) { width: 9.5%; }
.pl-table th:nth-child(5) { width: 14.5%; } .pl-table th:nth-child(6) { width: 13%; } .pl-table th:nth-child(7) { width: 16%; } .pl-table th:nth-child(8) { width: 56px; }
.pl-sort { display: inline-flex; align-items: center; gap: 8px; padding: 4px 4px; margin-left: -4px; border: 0; border-radius: 6px; background: none; font: inherit;
  font-size: 14.5px; font-weight: 500; color: var(--text); cursor: pointer; text-decoration: none; }
.pl-sort .i { font-size: 15px; color: var(--muted); }
.pl-sort:hover { background: var(--indigo-bg-2); } .pl-sort.is-active, .pl-sort.is-active .i { color: var(--indigo); }
.pl-sort:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.pl-row td { height: 59px; padding: 5px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; font-size: 14.5px; color: var(--text-2); }
.pl-row:hover td { background: #FAFBFF; }
.pl-row.is-selected td { background: var(--indigo-bg-2); }
.pl-check { width: 18px; height: 18px; margin: 0; accent-color: var(--indigo); cursor: pointer; }
.pl-post { display: flex; align-items: center; gap: 16px; min-width: 0; }
.pl-thumb { position: relative; flex: none; display: block; width: 118px; height: 47px; border-radius: 4px; overflow: hidden; background: var(--track); }
.pl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-thumb .ph-hl, .pl-thumb .cp-h, .pl-thumb .cp-lock, .pl-cover .ph-hl, .pl-cover .cp-lock { display: none; }
.pl-thumb .ph-mark { top: 50%; transform: translateY(-50%); left: 10px; width: 26px; min-width: 0; font-size: 11px; }
.pl-pmain { min-width: 0; }
.pl-title { display: block; font-size: 15px; font-weight: 500; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-title:hover { color: var(--indigo); }
.pl-fmt { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13.5px; color: var(--muted); min-width: 0; }
.pl-fmt .i { flex: none; font-size: 16px; }
.pl-fmt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-acc { display: flex; align-items: center; gap: 12px; }
.pl-pf { flex: none; width: 22px; height: 22px; }
.pl-plus { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.pl-none { color: var(--muted-2); font-size: 13.5px; }
.pl-dist { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.pl-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--grey); }
.pl-dot.is-green { background: var(--green); } .pl-dot.is-blue { background: var(--indigo); } .pl-dot.is-amber { background: #F97316; }
.pl-dot.is-red { background: #E5484D; } .pl-dot.is-grey { background: #6B7280; }
.pl-spin { flex: none; width: 18px; height: 18px; margin: 0 -4px; border-radius: 50%; border: 2.5px solid #D6DDFF; border-top-color: var(--indigo); animation: pl-spin 1s linear infinite; }
@keyframes pl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pl-spin { animation: none; border-color: var(--indigo); border-right-color: #D6DDFF; } }
.pl-rmore { position: relative; text-align: right; }
.pl-rmore .pm-menu { right: 8px; top: calc(100% - 6px); min-width: 196px; text-align: left; }
.pl-row .po-chip { height: 28px; padding: 0 12px; font-size: 13.5px; font-weight: 500; }

/* the card view */
.pl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; padding: 16px 18px 6px; }
.pl-pcard { position: relative; display: flex; flex-direction: column; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface); min-width: 0; }
.pl-pcard:hover { border-color: #C9D2FF; }
.pl-pcard.is-selected { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo); }
.pl-cover { position: relative; display: block; aspect-ratio: 16 / 8; border-radius: 9px 9px 0 0; overflow: hidden; background: var(--track); }
.pl-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-cover .ph-mark { left: 14px; top: 14px; transform: none; }
.pl-ccheck { position: absolute; left: 10px; top: 10px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; background: rgba(255, 255, 255, 0.92); }
.pl-cdots { position: absolute; right: 8px; top: 8px; }
.pl-cdots .po-dots { background: rgba(255, 255, 255, 0.92); }
.pl-cdots .pm-menu { right: 0; top: calc(100% + 4px); min-width: 196px; }
.pl-cbody { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; min-width: 0; }
.pl-cline > span:first-child { white-space: nowrap; }
.pl-cline { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; font-size: 13.5px; color: var(--text-2); }
.pl-cbody .pl-fmt { margin-top: 0; }

/* the footer */
.pl-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 64px; padding: 12px 16px 12px 18px; border-top: 1px solid var(--border); }
.pl-cards + .pl-foot { border-top: 1px solid var(--border); margin-top: 10px; }
.pl-selcount { margin: 0 14px 0 4px; font-size: 14.5px; color: var(--text-2); white-space: nowrap; }
.pl-bulk.btn-outline { height: 40px; padding: 0 16px; gap: 9px; font-size: 14.5px; font-weight: 500; color: var(--text-2); border-color: var(--border); }
.pl-bulk.btn-outline .i { font-size: 17px; }
.pl-bulk.btn-outline:disabled { color: var(--muted-2); background: var(--surface); opacity: 0.75; cursor: not-allowed; }
.pl-bulk.btn-outline:not(:disabled):hover { border-color: #C9D2FF; color: var(--indigo); background: var(--indigo-bg-2); }
.pl-foot .pl-more .pm-menu { left: 0; right: auto; top: auto; bottom: calc(100% + 6px); }
.pl-foot .pl-ibtn:disabled { color: var(--muted-2); cursor: not-allowed; background: var(--surface); border-color: var(--border); }
.pl-pager { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pl-range { margin-right: 18px; font-size: 14.5px; color: var(--text-2); white-space: nowrap; }
.pl-pgbtn { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-2); text-decoration: none; }
.pl-pgbtn .i { font-size: 17px; }
.pl-pgbtn:hover:not(.is-off) { border-color: #C9D2FF; color: var(--indigo); }
.pl-pgbtn.is-off { color: var(--muted-2); pointer-events: none; opacity: 0.6; }
.pl-per select { height: 40px; min-width: 132px; margin-left: 8px; padding: 0 30px 0 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  font: inherit; font-size: 14.5px; color: var(--text); }
.pl-card > .es { margin: 36px auto 30px; }

/* the filter popover */
.pl-filterwrap { position: relative; }
.pl-pop { position: absolute; z-index: 30; right: 0; top: calc(100% + 8px); width: 300px; padding: 16px 16px 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(23, 27, 45, 0.16); }
.pl-pop h3 { margin: 0 0 12px; font-size: 15.5px; font-weight: 700; color: var(--text); }
.pl-pop label { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: 13.5px; font-weight: 500; color: var(--text-2); }
.pl-pop select { height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 14.5px; color: var(--text); }
.pl-popf { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.pl-popf .btn-outline, .pl-popf .btn-primary { height: 38px; padding: 0 16px; font-size: 14px; font-weight: 600; box-shadow: none; }

@media (max-width: 1400px) { .pl-search { flex-basis: 200px; } }
@media (max-width: 1200px) {
  .pl-head { flex-wrap: wrap; }
  .pl-actions { flex-wrap: wrap; }
  .pl-table th:nth-child(4), .pl-table td:nth-child(4) { display: none; }
}
@media (max-width: 768px) {
  .pl-actions { width: 100%; }
  .pl-search { flex: 1 1 100%; width: auto; order: 5; }
  .pl-segb { padding: 0 12px; }
  .pl-create.po-btn { margin-left: auto; }
  .pl-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .pl-table thead { display: none; }
  .pl-table, .pl-table tbody { display: block; }
  .pl-row { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 36px; column-gap: 6px; row-gap: 4px; padding: 10px 6px 10px 10px;
    grid-template-areas: "cb post post dots" ". acc chip chip" ". when dist dist"; align-items: center; border-bottom: 1px solid var(--border-soft); }
  .pl-row td { display: block; height: auto; padding: 0 4px; border: 0; background: transparent !important; }
  .pl-row td.pl-cbc { grid-area: cb; width: auto; padding: 0; }
  .pl-row td:nth-child(2) { grid-area: post; } .pl-row td:nth-child(8) { grid-area: dots; }
  .pl-row td:nth-child(3) { grid-area: acc; } .pl-row td:nth-child(6) { grid-area: chip; justify-self: end; }
  .pl-row td:nth-child(5) { grid-area: when; font-size: 13.5px; } .pl-row td:nth-child(7) { grid-area: dist; justify-self: end; font-size: 13.5px; }
  .pl-row td:nth-child(4) { display: none; }
  .pl-row.is-selected { background: var(--indigo-bg-2); }
  .pl-thumb { width: 84px; height: 40px; }
  .pl-foot { gap: 10px; }
  .pl-pager { margin-left: 0; width: 100%; }
  .pl-range { margin-right: auto; }
  .pl-per select { min-width: 0; }
  .pl-cards { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .pl-pop { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; }
}

/* ---------- Promotion-05 · Post brief (bf- this screen: the breadcrumb with the wizard stepper, the brief form with the rich selects, the live post summary and the channel list) — plans/Promotion-05.md, prototype/gen/promotion05.css ---------- */
.bf-root { --cg-primary: #3B5BFD; --cg-mid: #193F94; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-tint: #EEF3FD; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter"; }
.bf-top { display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; padding: 4px 4px 0; }
.bf-top .na-crumbs { padding: 0; }
.bf-crumbs-t { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-steps { list-style: none; display: flex; align-items: center; gap: 0; margin: 0 0 0 auto; padding: 0; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.bf-steps::-webkit-scrollbar { display: none; }
.bf-steps li { display: flex; align-items: center; flex: none; }
.bf-steps li + li::before { content: ""; width: 10px; height: 1px; margin: 0 5px; background: var(--border); }
.bf-step { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted-2); white-space: nowrap; cursor: default; }
.bf-step b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface);
  font-size: 11px; font-weight: 700; color: var(--muted-2); }
.bf-step.is-current { color: var(--indigo); font-weight: 600; }
.bf-step.is-current b { border-color: var(--indigo); background: var(--indigo); color: #fff; }
.bf-head { align-items: center; padding: 10px 4px 16px; }
.bf-head .po-btn { height: 44px; padding: 0 20px; font-size: 15.5px; }
.bf-save.po-btn.btn-outline { border-color: #9FB0FF; }
.bf-continue.po-btn { padding: 0 22px; font-size: 16px; }
.bf-continue .i { order: 2; }
.bf-more { position: relative; }
.bf-more .pl-ibtn { width: 46px; height: 44px; }
.bf-more .pm-menu { right: 0; top: calc(100% + 6px); min-width: 220px; }

.bf-grid { display: grid; grid-template-columns: minmax(0, 1.43fr) minmax(0, 1fr); gap: 19px; align-items: start; }
.bf-card { padding: 20px 20px 16px; border-radius: 12px; min-width: 0; }
.bf-chead { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.bf-chead > div { flex: 1 1 auto; min-width: 0; }
.bf-chead h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.2px; color: var(--text); }
.bf-chead p { margin: 4px 0 0; font-size: 14.5px; color: var(--text-2); }
.bf-state { flex: none; padding-top: 2px; font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; }
.bf-state.is-saved { font-weight: 500; color: var(--muted); }
.bf-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 16px; }
.bf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bf-field.is-wide { grid-column: 1 / -1; }
.bf-label { font-size: 14.5px; font-weight: 500; color: var(--text); }
.bf-label i { font-style: normal; font-weight: 400; color: var(--text-2); }
.bf-input, .bf-textarea { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); font: inherit;
  font-size: 14.5px; color: var(--text); }
.bf-textarea { height: 72px; padding: 9px 12px; resize: vertical; line-height: 1.45; }
.bf-input:focus-visible, .bf-textarea:focus-visible { outline: 2px solid var(--indigo); outline-offset: 0; border-color: transparent; }
.bf-hint { font-size: 12.5px; color: var(--muted); }
.bf-lrow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.bf-lrow .bf-hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the rich selects: the drawn box (icon, label, sub line) over a transparent native select that keeps keyboard and screen reader behaviour */
.bf-rsel { position: relative; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 40px 0 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.bf-rsel:focus-within { outline: 2px solid var(--indigo); outline-offset: 0; border-color: transparent; }
.bf-rsel select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font: inherit; }
.bf-rsel select:disabled { cursor: default; }
.bf-rsel > .i:first-child { flex: none; font-size: 22px; color: var(--text-2); }
.bf-rsel .bf-chev { position: absolute; right: 14px; font-size: 16px; color: var(--text-2); pointer-events: none; }
.bf-rtext { min-width: 0; display: flex; flex-direction: column; }
.bf-rtext b { font-size: 14.5px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-rtext span { margin-top: 2px; font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-rtext.is-empty b { font-weight: 400; color: var(--muted); }
.bf-tile { flex: none; width: 32px; height: 32px; border-radius: 5px; display: grid; place-items: center; background: var(--cg-primary, var(--indigo)); color: #fff; font-size: 12.5px; font-weight: 700; }
.bf-custom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 8px; }
/* languages */
.bf-langs { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 52px; padding: 7px 40px 7px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.bf-langs:focus-within { outline: 2px solid var(--indigo); outline-offset: 0; border-color: transparent; }
.bf-lchip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 6px 0 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--indigo-bg-2); font-size: 14.5px; color: var(--text); }
.bf-lchip > .i { font-size: 17px; color: var(--text-2); }
.bf-lchip button { width: 22px; height: 22px; border: 0; border-radius: 5px; background: none; display: grid; place-items: center; color: var(--text-2); cursor: pointer; }
.bf-lchip button:hover { background: var(--track); color: var(--text); } .bf-lchip button .i { font-size: 13px; }
.bf-ladd { flex: 1 1 60px; min-width: 60px; height: 34px; }
.bf-ladd select { width: 100%; height: 34px; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--muted); appearance: none; -webkit-appearance: none; cursor: pointer; }
.bf-ladd select:focus-visible { outline: none; }
.bf-ladd option { color: var(--text); }
.bf-langs .bf-chev { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--text-2); pointer-events: none; }
/* dates */
.bf-when { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; }
.bf-date { position: relative; display: flex; align-items: center; }
.bf-date > .i { position: absolute; left: 12px; font-size: 19px; color: var(--text-2); pointer-events: none; }
.bf-date .bf-input { padding-left: 42px; }
.bf-date .bf-x { position: absolute; right: 8px; width: 26px; height: 26px; border: 0; border-radius: 5px; background: none; display: grid; place-items: center; color: var(--text-2); cursor: pointer; }
.bf-date .bf-x:hover { background: var(--track); } .bf-date .bf-x .i { font-size: 14px; }
.bf-date.has-x .bf-input { padding-right: 40px; }
.bf-time { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); font: inherit; font-size: 14.5px; color: var(--text); }
/* errors (MM-44 slots) */
.bf-err { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #B42339; }
.bf-err .i { font-size: 14px; }
.bf-root .is-invalid, .bf-root .bf-input.is-invalid, .bf-root .bf-rsel.is-invalid, .bf-root .bf-langs.is-invalid { border-color: #E5484D; }
.bf-summary-strip { display: flex; align-items: center; gap: 8px; margin: -6px 0 14px; padding: 9px 12px; border-radius: 8px; background: #FDECEF; color: #B42339; font-size: 14px; font-weight: 500; }
.bf-banner { display: flex; gap: 12px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid #F6D9A8; border-radius: 10px; background: var(--amber-bg); color: var(--amber-text); font-size: 14px; line-height: 1.45; }
.bf-banner > .i { flex: none; font-size: 19px; margin-top: 1px; }
.bf-banner b { color: var(--text); font-weight: 600; }
.bf-banner ul { margin: 6px 0 0; padding-left: 18px; }
.bf-banner.is-info { border-color: #D6DDFF; background: var(--indigo-bg-2); color: var(--text-2); } .bf-banner.is-info > .i { color: var(--indigo); }

/* the summary */
.bf-sum .bf-chead { margin-bottom: 20px; }
.bf-schip { flex: none; padding: 4px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; }
.bf-schip.is-grey, .bf-schip.is-blue { background: var(--indigo-bg); color: var(--indigo); }
.bf-schip.is-amber { background: var(--amber-bg); color: var(--amber-text); } .bf-schip.is-green { background: var(--green-bg); color: var(--green-text); }
.bf-schip.is-red { background: #FDECEF; color: #B42339; }
.bf-media { display: grid; grid-template-columns: 222px minmax(0, 1fr); gap: 17px; margin-bottom: 18px; }
.bf-cover { position: relative; width: 222px; height: 118px; border-radius: 4px; overflow: hidden; background: var(--track); }
.bf-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bf-cover .cp-h, .bf-cover .cp-lock { display: none; }
.bf-cover.is-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px dashed #C9D2FF; background: var(--indigo-bg-2); color: var(--text-2); font-size: 13px; text-align: center; padding: 8px; }
.bf-cover.is-empty .i { font-size: 24px; color: var(--indigo); } .bf-cover.is-empty b { color: var(--text); font-size: 14px; }
.bf-mtext h3 { margin: 2px 0 6px; font-size: 17px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.bf-mtext p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; }
.bf-facts { display: grid; grid-template-columns: 18px 128px minmax(0, 1fr); gap: 9px 12px; align-items: center; margin: 0 0 18px; padding: 0 0 18px 8px;
  border-bottom: 1px solid var(--border); font-size: 14.5px; }
.bf-facts .i { font-size: 18px; color: var(--text-2); }
.bf-facts dt { color: var(--text-2); }
.bf-facts dd { margin: 0; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-facts dd.is-none { color: var(--muted-2); }
.bf-plat-h { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.bf-plat-h > div { flex: 1 1 auto; }
.bf-plat-h h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.bf-plat-h p { margin: 3px 0 0; font-size: 14px; color: var(--text-2); }
.bf-plat-h .bf-schip { font-size: 12.5px; padding: 4px 12px; margin-top: 4px; }
.bf-chans { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bf-chan { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 22px; gap: 14px; align-items: center; min-height: 52px; padding: 6px 18px 6px 14px;
  border: 1px solid var(--border-soft); border-radius: 8px; cursor: pointer; }
.bf-chan:hover { border-color: #C9D2FF; }
.bf-chan.is-off { cursor: not-allowed; opacity: 0.7; }
.bf-chan .bf-pf { width: 34px; height: 34px; }
.bf-chan b { display: block; font-size: 15px; font-weight: 500; color: var(--text); }
.bf-chan span.sub { display: block; font-size: 13.5px; color: var(--text-2); }
.bf-chan input { width: 20px; height: 20px; margin: 0; accent-color: var(--indigo); cursor: pointer; }
.bf-chan input:disabled { cursor: not-allowed; }
.bf-cchip { padding: 4px 12px; border-radius: 6px; font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.bf-cchip.is-green { background: var(--green-bg); color: var(--green-text); } .bf-cchip.is-amber { background: var(--amber-bg); color: var(--amber-text); }
.bf-cchip.is-grey { background: var(--track); color: var(--text-2); }
.bf-morech { margin-top: 10px; padding: 4px 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.bf-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.bf-root.is-readonly .bf-input, .bf-root.is-readonly .bf-textarea, .bf-root.is-readonly .bf-rsel, .bf-root.is-readonly .bf-langs { background: #FAFBFC; }

@media (max-width: 1400px) { .bf-steps { margin-left: 0; width: 100%; } }
@media (max-width: 1200px) { .bf-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) {
  .bf-head { flex-wrap: wrap; }
  .bf-head .po-actions { width: 100%; flex-wrap: nowrap; gap: 8px; }
  .bf-head .po-btn { flex: 1 1 auto; min-width: 0; justify-content: center; padding: 0 12px; font-size: 14.5px; }
  .bf-fields { grid-template-columns: minmax(0, 1fr); }
  .bf-media { grid-template-columns: minmax(0, 1fr); }
  .bf-cover { width: 100%; height: 150px; }
  .bf-facts { grid-template-columns: 18px 104px minmax(0, 1fr); }
  .bf-chan { padding: 6px 12px; gap: 10px; }
}
/* the production additions: the sort heads and the view switch are links (they carry the full address, so the page works without scripts) */
a.pl-sort, a.pl-segb { text-decoration: none; }
.pl-root.is-readonly .pl-foot { justify-content: flex-end; }
.pl-card.is-busy { min-height: 240px; }

/* ---------- Promotion-06 · Content handoffs (hd- this screen: the breadcrumb head, the filter card, the hand-off table with media thumbnails and the details drawer with its tabs, the source-updates box and the footer) — plans/Promotion-06.md, prototype/gen/promotion06.css ---------- */
.hd-root { --cg-primary: #3B5BFD; --cg-mid: #193F94; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-tint: #EEF3FD; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter";
  display: grid; grid-template-columns: minmax(0, 1fr) 452px; gap: 18px; align-items: start; }
.hd-root.no-drawer { grid-template-columns: minmax(0, 1fr); }
.hd-main { min-width: 0; }
.hd-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 20px; padding: 8px 4px 14px; }
.hd-head .po-title { display: contents; }
.hd-head h1 { grid-column: 1; grid-row: 1; }
.hd-head .sub { grid-column: 1 / -1; grid-row: 2; }
.hd-head .po-actions { grid-column: 2; grid-row: 1; }
.hd-head .po-btn { height: 44px; padding: 0 20px; font-size: 15.5px; }
.hd-head .po-btn.btn-outline { border-color: #9FB0FF; }
.hd-more { position: relative; }
.hd-more .pl-ibtn { width: 46px; height: 44px; }
.hd-more .pm-menu { right: 0; top: calc(100% + 6px); min-width: 220px; }
/* the filter card */
.hd-filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; }
.hd-pills { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hd-pills .pl-pill { height: 36px; padding: 0 10px 0 14px; }
.hd-sep { width: 1px; height: 28px; background: var(--border); flex: none; }
.hd-sel { position: relative; display: inline-flex; align-items: center; flex: none; }
.hd-sel select { height: 38px; width: 138px; padding: 0 34px 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit;
  font-size: 14px; color: var(--text); appearance: none; -webkit-appearance: none; cursor: pointer; }
.hd-sel select:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.hd-sel > .i { position: absolute; right: 11px; font-size: 15px; color: var(--text-2); pointer-events: none; }
.hd-search.pl-search { flex: 1 1 180px; width: auto; min-width: 160px; height: 38px; }
.hd-search.pl-search input { height: 38px; font-size: 14px; }
.hd-count { margin: 16px 4px 10px; font-size: 16px; font-weight: 600; color: var(--text); }
/* the bulk bar */
.hd-bulk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; padding: 8px 12px; border: 1px solid #C9D2FF; border-radius: 10px;
  background: var(--indigo-bg-2); font-size: 14px; color: var(--text); }
.hd-bulk b { font-weight: 600; margin-right: 4px; }
.hd-bulk .btn-outline { height: 34px; padding: 0 12px; font-size: 13.5px; }
.hd-bulk .po-link { margin-left: auto; }
/* the table */
.hd-card { padding: 0; border-radius: 12px; overflow: hidden; }
.hd-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.hd-table th { height: 46px; padding: 0 8px; text-align: left; font-size: 13.5px; font-weight: 500; color: var(--text-2); border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-table th.hd-cbc, .hd-table td.hd-cbc { width: 44px; padding: 0 4px 0 14px; }
.hd-table th:nth-child(2) { width: 26%; } .hd-table th:nth-child(3) { width: 15%; } .hd-table th:nth-child(4) { width: 8%; }
.hd-table th:nth-child(5) { width: 12%; } .hd-table th:nth-child(6) { width: 14%; } .hd-table th:nth-child(7) { width: 12%; } .hd-table th:nth-child(8) { width: 13%; }
.hd-table th:nth-child(9) { width: 44px; }
.hd-table td { padding: 12px 8px; font-size: 14px; color: var(--text); vertical-align: middle; border-bottom: 1px solid var(--border-soft); overflow-wrap: anywhere; }
.hd-table tbody tr:last-child td { border-bottom: 0; }
.hd-row { cursor: pointer; }
.hd-row:hover td { background: #FAFBFF; }
.hd-row.is-open td { background: var(--indigo-bg-2); border-top: 1.5px solid var(--indigo); border-bottom: 1.5px solid var(--indigo); }
.hd-row.is-open td:first-child { border-left: 1.5px solid var(--indigo); border-radius: 10px 0 0 10px; }
.hd-row.is-open td:last-child { border-right: 1.5px solid var(--indigo); border-radius: 0 10px 10px 0; }
.hd-row:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
.hd-row.is-withdrawn td:not(:last-child) { opacity: .62; }
.hd-content { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hd-thumb { position: relative; flex: none; width: 84px; height: 62px; border-radius: 5px; overflow: hidden; background: var(--track); }
.hd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hd-thumb .ph-art, .hd-hero .ph-art { position: absolute; inset: 0; }
.hd-thumb .ph-hl, .hd-thumb .cp-h, .hd-thumb .cp-lock { display: none; }
.hd-thumb .ph-mark { top: 50%; transform: translateY(-50%); left: 8px; width: 24px; min-width: 0; font-size: 10.5px; }
.hd-cmain { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hd-name { font-size: 14.5px; font-weight: 500; color: var(--text); text-decoration: none; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hd-name:hover { color: var(--indigo); text-decoration: underline; }
.hd-name:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 3px; }
.hd-type { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; font-size: 12.5px; color: var(--text-2); }
.hd-type .i { font-size: 15px; }
.hd-arch { font-size: 12px; color: var(--amber-text); }
.hd-proj b { display: block; font-weight: 500; line-height: 1.3; }
.hd-proj span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.hd-proj.is-none b { font-weight: 400; color: var(--muted); }
.hd-ver { font-weight: 500; }
.hd-upd { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 11.5px; line-height: 1.2; font-weight: 600; color: var(--amber-text); white-space: nowrap; }
.hd-upd::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex: none; }
.hd-fmts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hd-fmt { display: inline-flex; align-items: center; height: 24px; padding: 0 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
  font-size: 12px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.hd-purpose { line-height: 1.35; color: var(--text-2); }
.hd-purpose.is-none { color: var(--muted); }
.hd-rmore { position: relative; text-align: right; }
.hd-rmore .pm-menu { right: 6px; top: calc(100% - 4px); min-width: 200px; text-align: left; }
.hd-card .es { margin: 18px; }
/* the drawer */
.hd-drawer { position: sticky; top: 12px; display: flex; flex-direction: column; min-width: 0; max-height: calc(100vh - 24px); padding: 16px 18px 0; border-radius: 12px; overflow: hidden; }
.hd-dscroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -18px; padding: 0 18px 14px; }
.hd-hero { position: relative; aspect-ratio: 2.4 / 1; flex: none; border-radius: 10px; overflow: hidden; background: var(--cg-dark); }
.hd-hero img, .hd-hero video { width: 100%; height: 100%; object-fit: cover; display: block; background: #0B1022; }
.hd-hero video { object-fit: contain; }
.hd-hero .ph-mark { top: 14px; left: 14px; }
.hd-hero .ph-hl { display: none; }
.hd-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 34px; height: 34px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .92);
  display: grid; place-items: center; color: var(--text); cursor: pointer; box-shadow: 0 1px 4px rgba(14, 27, 61, .18); }
.hd-close .i { font-size: 17px; }
.hd-close:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.hd-dhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 4px; }
.hd-dhead h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.3px; color: var(--text); overflow-wrap: anywhere; }
.hd-dfacts { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 13.5px; color: var(--text-2); }
.hd-dfacts .i { font-size: 16px; }
.hd-tabs { display: flex; gap: 2px; margin: 14px -18px 0; padding: 0 12px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.hd-tabs::-webkit-scrollbar { display: none; }
.hd-tab { flex: none; height: 42px; padding: 0 12px; border: 0; border-bottom: 2.5px solid transparent; background: none; font: inherit; font-size: 14.5px;
  font-weight: 500; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.hd-tab:hover { color: var(--text); }
.hd-tab[aria-selected="true"] { color: var(--indigo); border-bottom-color: var(--indigo); font-weight: 600; }
.hd-tab:focus-visible { outline: 2px solid var(--indigo); outline-offset: -3px; }
.hd-panel { padding-top: 12px; }
.hd-dl { display: grid; grid-template-columns: 22px 118px minmax(0, 1fr); align-items: start; gap: 11px 10px; margin: 4px 0 0; font-size: 14px; }
.hd-dl > .i { font-size: 18px; color: var(--text-2); margin-top: 1px; }
.hd-dl dt { color: var(--text-2); }
.hd-dl dd { margin: 0; min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.hd-dl dd.is-none { color: var(--muted); }
.hd-dl dd small { color: var(--muted); font-size: 13px; }
.hd-vrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hd-rights { display: inline-flex; align-items: center; gap: 7px; }
.hd-rights .i { font-size: 18px; color: var(--green); }
.hd-rights.is-licensed .i { color: var(--indigo); } .hd-rights.is-limited .i { color: var(--amber); }
.hd-edit { margin-top: 12px; }
.hd-updbox { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.hd-updbox > .i { flex: none; font-size: 20px; color: var(--indigo); align-self: flex-start; margin-top: 1px; }
.hd-updbox div { flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: var(--text-2); }
.hd-updbox b { display: block; margin-bottom: 2px; font-size: 14.5px; font-weight: 600; color: var(--text); }
.hd-updbox .btn-outline { flex: none; height: 38px; padding: 0 14px; font-size: 14px; border-color: #9FB0FF; color: var(--indigo); }
.hd-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hd-li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 13.5px; }
.hd-li > div { flex: 1 1 auto; min-width: 0; }
.hd-li a, .hd-li b { font-weight: 500; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.hd-li a:hover { color: var(--indigo); text-decoration: underline; }
.hd-li small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.hd-li .po-chip { flex: none; }
.hd-li .hd-upd { margin-top: 3px; }
.hd-note { margin: 12px 0 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.hd-note .i { font-size: 14px; vertical-align: -2px; }
.hd-dialog .hd-note { margin: 0 0 14px; }
.hd-empty { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.hd-dfoot { display: flex; align-items: center; gap: 10px; margin: 0 -18px; padding: 14px 18px 16px; border-top: 1px solid var(--border); background: var(--surface); }
.hd-dfoot .btn-primary, .hd-dfoot .btn-outline { height: 48px; font-size: 15.5px; font-weight: 600; gap: 10px; text-decoration: none; }
.hd-dfoot .btn-primary { flex: 1.3 1 0; justify-content: center; }
.hd-dfoot .btn-outline { flex: 1 1 0; justify-content: center; border-color: #9FB0FF; color: var(--indigo); }
.hd-dfoot .btn-primary[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.hd-dfoot .hd-ro { flex: 1 1 auto; display: inline-flex; align-items: center; gap: 6px; }
.hd-dfoot .hd-more .pl-ibtn { width: 48px; height: 48px; }
.hd-dfoot .hd-more .pm-menu { top: auto; bottom: calc(100% + 6px); }
.hd-ro { font-size: 13.5px; color: var(--muted); }
/* the Edit details dialog (MM-41 frame) */
.hd-dialog { width: min(560px, calc(100vw - 32px)); }
.hd-dialog .foot { justify-content: flex-end; }
.hd-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.hd-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; color: var(--text); min-width: 0; }
.hd-form label.is-wide { grid-column: 1 / -1; }
.hd-form input, .hd-form select, .hd-form textarea { width: 100%; height: 38px; padding: 0 11px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
  font: inherit; font-size: 14px; font-weight: 400; color: var(--text); }
.hd-form textarea { height: 76px; padding: 8px 11px; resize: vertical; }
.hd-form .is-invalid { border-color: #F0546A; }
.hd-ferr { font-size: 12.5px; font-weight: 400; color: #B42339; }
/* narrower screens: the drawer becomes an overlay panel */
@media (max-width: 1300px) {
  .hd-root { grid-template-columns: minmax(0, 1fr); }
  .hd-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(560px, 100vw); max-height: none; border-radius: 0; box-shadow: -8px 0 32px rgba(14, 27, 61, .18); }
  .hd-drawer[hidden] { display: none; }
  .hd-table th:nth-child(5), .hd-table td:nth-child(5) { display: none; }
}
@media (max-width: 768px) {
  .hd-head { grid-template-columns: minmax(0, 1fr); }
  .hd-head .po-actions { grid-column: 1; grid-row: 3; flex-wrap: wrap; margin-top: 8px; }
  .hd-filters .hd-sep { display: none; }
  .hd-sel, .hd-sel select { flex: 1 1 140px; min-width: 0; width: 100%; }
  .hd-table thead { display: none; }
  .hd-table, .hd-table tbody { display: block; }
  .hd-table tr { display: grid; grid-template-columns: 34px minmax(0, 1fr) 40px; gap: 4px 8px; padding: 12px; border-bottom: 1px solid var(--border-soft); }
  .hd-table td { display: block; padding: 0; border: 0 !important; background: none !important; font-size: 13.5px; }
  .hd-table td.hd-cbc { grid-row: 1; padding: 20px 0 0; width: auto; }
  .hd-table td:nth-child(2) { grid-column: 2; }
  .hd-table td.hd-rmore { grid-column: 3; grid-row: 1; }
  .hd-table td:nth-child(n+3):not(.hd-rmore) { grid-column: 2; }
  .hd-table td:nth-child(5), .hd-table td:nth-child(7) { display: none; }
  .hd-row.is-open { outline: 1.5px solid var(--indigo); outline-offset: -2px; border-radius: 10px; background: var(--indigo-bg-2); }
  .hd-drawer { top: 56px; bottom: calc(64px + env(safe-area-inset-bottom)); }   /* between the phone top bar and tab bar */
  .hd-dfoot { flex-wrap: wrap; }
  .hd-dl { grid-template-columns: 22px 100px minmax(0, 1fr); }
  .hd-form { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Promotion-07 · Media library selector (mx- this screen: the wizard's Media step page — the selected media and the post card — and the selector modal with its filters, the thumbnail grid, the detail pane with playback and the selection tray; the shared stepper links) — plans/Promotion-07.md, prototype/gen/promotion07.css ---------- */
.mx-root { --cg-primary: #3B5BFD; --cg-mid: #193F94; --cg-dark: #0E1B3D; --cg-light: #FFFFFF; --cg-tint: #EEF3FD; --cg-text: #FFFFFF; --cg-hfont: "Inter"; --cg-bfont: "Inter"; }
/* the wizard stepper: a built step is a link, a finished one carries a check (shared with the brief) */
a.bf-step { text-decoration: none; color: var(--text-2); cursor: pointer; }
a.bf-step:hover { color: var(--indigo); }
a.bf-step:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 4px; }
.bf-step.is-done b { border-color: var(--green); background: var(--green-bg); color: var(--green-text); }
/* the Media step page */
.mx-head { align-items: center; padding: 10px 4px 16px; }
.mx-head .po-btn { height: 44px; padding: 0 20px; font-size: 15.5px; }
.mx-head .po-btn.btn-outline { border-color: #9FB0FF; }
.mx-head .btn-primary .i { order: 2; }
.mx-head .btn-primary[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.mx-grid-page { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.mx-card-page { padding: 18px 20px; border-radius: 12px; min-width: 0; }
.mx-chead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.mx-chead h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.mx-chead p { margin: 3px 0 0; font-size: 14px; color: var(--text-2); }
.mx-banner { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--amber-bg); color: var(--amber-text); font-size: 14px; }
.mx-banner .i { flex: none; font-size: 18px; margin-top: 1px; }
.mx-banner.is-info { background: var(--indigo-bg-2); color: var(--text-2); }
.mx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mx-li { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--border-soft); }
.mx-li:first-child { border-top: 0; }
.mx-lthumb { position: relative; flex: none; width: 96px; height: 64px; border-radius: 6px; overflow: hidden; background: var(--track); }
.mx-lthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mx-lthumb .mx-badge { left: 5px; bottom: 5px; }
.mx-lmain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mx-lmain b { font-size: 14.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.mx-lmain span { font-size: 13px; color: var(--text-2); }
.mx-lmain .mx-src { color: var(--muted); }
.mx-flag { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; font-weight: 600; color: var(--amber-text); }
.mx-flag.is-gone { color: #B42339; }
.mx-flag .btn-outline { height: 28px; padding: 0 10px; font-size: 12.5px; border-color: #F2C98A; color: var(--amber-text); }
.mx-lact { display: flex; align-items: center; gap: 4px; flex: none; }
.mx-ibtn { width: 32px; height: 32px; border: 0; border-radius: 7px; background: none; display: grid; place-items: center; color: var(--text-2); cursor: pointer; }
.mx-ibtn:hover:not(:disabled) { background: var(--indigo-bg-2); color: var(--indigo); }
.mx-ibtn:disabled { opacity: .35; cursor: default; }
.mx-ibtn:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.mx-ibtn .i { font-size: 17px; }
.mx-pcover { aspect-ratio: 2.4 / 1; border-radius: 10px; overflow: hidden; background: var(--track); display: grid; place-items: center; color: var(--muted); }
.mx-pcover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mx-pcover .i { font-size: 28px; }
.mx-ptitle { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 2px; }
.mx-ptitle h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.mx-pfmt { margin: 0 0 12px; font-size: 13.5px; color: var(--text-2); }
.mx-dests { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mx-dest { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 13.5px; }
.mx-dest .po-pf, .mx-dest .mx-pf { width: 26px; height: 26px; flex: none; }
.mx-dest div { flex: 1 1 auto; min-width: 0; }
.mx-dest b { display: block; font-weight: 600; }
.mx-dest span { color: var(--muted); font-size: 12.5px; }
.mx-h3 { margin: 16px 0 8px; font-size: 14.5px; font-weight: 700; color: var(--text); }
/* the selector modal */
.mx-backdrop { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 24px 16px; background: rgba(14, 27, 61, .42); }
.mx-modal { position: relative; display: flex; flex-direction: column; width: min(1245px, 100%); height: min(700px, calc(100vh - 48px)); background: var(--surface);
  border-radius: 14px; box-shadow: 0 24px 64px rgba(14, 27, 61, .28); overflow: hidden; }
.mx-modal:focus { outline: none; }
.mx-mhead { display: flex; align-items: flex-start; gap: 16px; padding: 20px 22px 10px; }
.mx-mhead > div:first-child { flex: 1 1 auto; min-width: 0; }
.mx-mhead h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.5px; color: var(--text); }
.mx-mhead p { margin: 3px 0 0; font-size: 15.5px; color: var(--text-2); }
.mx-hact { display: flex; align-items: center; gap: 10px; flex: none; }
.mx-hact .btn-outline { height: 40px; padding: 0 14px; font-size: 14.5px; font-weight: 500; gap: 8px; border-color: #9FB0FF; color: var(--indigo); text-decoration: none; }
.mx-hact .btn-outline[aria-disabled="true"], .mx-hact .btn-outline:disabled { opacity: .5; cursor: not-allowed; }
.mx-x { width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; display: grid; place-items: center; color: var(--text); cursor: pointer; margin-left: 8px; }
.mx-x:hover { background: var(--indigo-bg-2); } .mx-x .i { font-size: 20px; }
.mx-x:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.mx-filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 22px 12px; }
.mx-search { position: relative; display: flex; align-items: center; flex: 0 1 310px; min-width: 180px; }
.mx-search .i { position: absolute; left: 12px; font-size: 17px; color: var(--muted); pointer-events: none; }
.mx-search input { width: 100%; height: 40px; padding: 0 12px 0 38px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14.5px; color: var(--text); background: var(--surface); }
.mx-search input:focus-visible, .mx-sel select:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.mx-sel { position: relative; display: inline-flex; align-items: center; flex: none; }
.mx-sel select { height: 40px; width: 150px; padding: 0 32px 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 14px;
  color: var(--text); appearance: none; -webkit-appearance: none; cursor: pointer; }
.mx-sel > .i { position: absolute; right: 10px; font-size: 15px; color: var(--text-2); pointer-events: none; }
.mx-count { margin-left: auto; font-size: 14.5px; color: var(--text-2); white-space: nowrap; }
.mx-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 14px; padding: 0 22px 12px; }
.mx-gridwrap { min-height: 0; overflow-y: auto; padding: 2px 4px 8px 2px; }
.mx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 18px 16px; align-content: start; }
.mx-card { position: relative; min-width: 0; border-radius: 8px; cursor: pointer; outline: none; }
.mx-card[hidden] { display: none; }
.mx-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--cg-dark); border: 2px solid transparent; }
.mx-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mx-thumb .ph-art, .mx-tthumb .ph-art, .mx-lthumb .ph-art, .mx-pcover .ph-art, .mx-player .ph-art { position: absolute; inset: 0; }
.mx-thumb .cp-h, .mx-tthumb .cp-h, .mx-lthumb .cp-h, .mx-player .cp-h, .mx-thumb .ph-hl, .mx-tthumb .ph-hl { display: none; }
.mx-tthumb, .mx-pcover { position: relative; }
.mx-card.is-sel .mx-thumb { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo); }
.mx-card:focus-visible .mx-thumb { outline: 3px solid #9FB0FF; outline-offset: 2px; }
.mx-card.is-focus .mx-thumb { box-shadow: 0 0 0 3px #C9D2FF; }
.mx-card.is-sel.is-focus .mx-thumb { box-shadow: 0 0 0 1px var(--indigo), 0 0 0 4px #C9D2FF; }
.mx-box { position: absolute; top: 9px; left: 9px; width: 24px; height: 24px; border-radius: 5px; border: 2px solid #fff; background: rgba(14, 27, 61, .25); display: grid; place-items: center; color: #fff; }
.mx-box .i { font-size: 15px; opacity: 0; }
.mx-card.is-sel .mx-box { background: var(--indigo); border-color: #fff; }
.mx-card.is-sel .mx-box .i { opacity: 1; }
.mx-badge { position: absolute; left: 9px; bottom: 9px; display: inline-flex; align-items: center; gap: 5px; padding: 2px 6px; border-radius: 5px; background: rgba(8, 12, 30, .72); color: #fff; font-size: 12.5px; font-weight: 600; }
.mx-badge .i { font-size: 15px; }
.mx-name { display: block; margin: 8px 0 2px; font-size: 15px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-meta { display: block; font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-chips { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.mx-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--indigo-bg); color: var(--indigo); font-size: 12.5px; font-weight: 500; }
.mx-pinned { position: absolute; top: 9px; right: 9px; padding: 2px 7px; border-radius: 5px; background: rgba(255, 255, 255, .92); color: var(--text); font-size: 11.5px; font-weight: 600; }
/* the unsupported card */
.mx-card.is-unsupported { cursor: default; }
.mx-card.is-unsupported .mx-thumb { display: none; }
.mx-unsup { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 212px; padding: 16px 14px; border: 1.5px dashed #F2A7B3;
  border-radius: 8px; background: #FFF6F7; text-align: center; font-size: 13.5px; color: var(--text-2); }
.mx-unsup .mx-ficon { position: relative; width: 42px; height: 48px; margin-bottom: 6px; color: #9AA3B5; }
.mx-unsup .mx-ficon .i { font-size: 42px; }
.mx-unsup .mx-ficon b { position: absolute; right: -4px; bottom: 0; width: 18px; height: 18px; border-radius: 50%; background: #E5484D; color: #fff; font-size: 12px; display: grid; place-items: center; }
.mx-unsup strong { font-size: 14.5px; color: var(--text); overflow-wrap: anywhere; }
.mx-unsup em { font-style: normal; color: #D1333F; }
.mx-unsup a { color: var(--indigo); }
.mx-card.is-unsupported:focus-visible .mx-unsup { outline: 3px solid #9FB0FF; outline-offset: 2px; }
/* the detail pane */
.mx-detail { min-height: 0; overflow-y: auto; padding: 14px; border: 1px solid var(--border); border-radius: 10px; }
.mx-player { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #0B1022; display: grid; place-items: center; }
.mx-player video, .mx-player img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mx-player .mx-none { color: #9AA3B5; font-size: 13.5px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mx-player .mx-none .i { font-size: 32px; }
.mx-dtitle { margin: 14px 0 12px; font-size: 20px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.mx-dl { display: grid; grid-template-columns: 24px 110px minmax(0, 1fr); align-items: center; gap: 0 10px; margin: 0; font-size: 14.5px; }
.mx-dl > .i { font-size: 19px; color: var(--text-2); }
.mx-dl dt, .mx-dl dd { min-height: 34px; display: flex; align-items: center; }
.mx-dl dt { color: var(--text-2); }
.mx-dl dd { margin: 0; color: var(--text); justify-content: space-between; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.mx-dl dd a { color: var(--indigo); font-size: 14px; text-decoration: none; white-space: nowrap; }
.mx-dl dd a:hover { text-decoration: underline; }
.mx-dnote { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: #FFF1F3; color: #9F1D2C; font-size: 13.5px; line-height: 1.45; }
.mx-dnote a { color: var(--indigo); }
.mx-dnote.is-pin { background: var(--amber-bg); color: var(--amber-text); }
/* the tray */
.mx-tray { display: flex; align-items: center; gap: 14px; padding: 14px 22px; border-top: 1px solid var(--border); background: var(--surface); }
.mx-tthumb { flex: none; width: 84px; height: 50px; border-radius: 5px; overflow: hidden; background: var(--track); }
.mx-tthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mx-tthumb:empty { display: none; }
.mx-ttext { flex: 1 1 auto; min-width: 0; }
.mx-ttext b { display: block; font-size: 16px; font-weight: 600; color: var(--text); }
.mx-ttext span { display: block; margin-top: 2px; font-size: 14px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-clear { border: 0; background: none; font: inherit; font-size: 14.5px; font-weight: 500; color: var(--indigo); cursor: pointer; padding: 6px 8px; }
.mx-clear:disabled { color: var(--muted); cursor: default; }
.mx-tray .btn-outline { height: 46px; min-width: 100px; justify-content: center; font-size: 15px; }
.mx-tray .btn-primary { height: 46px; padding: 0 20px; font-size: 15.5px; font-weight: 600; }
.mx-tray .btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.mx-modal .es { margin: 30px auto; }
@media (max-width: 1100px) {
  .mx-body { display: block; overflow-y: auto; }
  .mx-gridwrap { overflow: visible; }
  .mx-detail { overflow: visible; margin-top: 14px; }
  .mx-grid-page { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .mx-backdrop { inset: 56px 0 calc(64px + env(safe-area-inset-bottom)) 0; padding: 0; }   /* between the phone top bar and tab bar */
  .mx-modal { width: 100%; height: 100%; border-radius: 0; }
  .mx-mhead { flex-wrap: wrap; padding: 16px 16px 8px; }
  .mx-mhead h2 { font-size: 22px; }
  .mx-hact { width: 100%; flex-wrap: wrap; }
  .mx-x { position: absolute; top: 10px; right: 10px; }
  .mx-filters { padding: 6px 16px 10px; gap: 8px; }
  .mx-search { flex: 1 1 100%; }
  .mx-sel, .mx-sel select { flex: 1 1 140px; width: 100%; }
  .mx-body { padding: 0 16px 10px; }
  .mx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .mx-tray { flex-wrap: wrap; padding: 12px 16px; }
  .mx-ttext { flex-basis: calc(100% - 100px); }
  .mx-tray .btn-outline, .mx-tray .btn-primary { flex: 1 1 auto; }
  .mx-head { flex-wrap: wrap; }
  .mx-head .po-actions { width: 100%; flex-wrap: wrap; }
  .mx-li { flex-wrap: wrap; }
}

/* ---------- Promotion-08 · AI caption ideas (cq- this screen: the first page of the wizard's Copy step — the model line, the no-text-model banner, the job strip, three editable caption cards with Hook / Body / CTA, Language, Brand voice and the locked brand terms, the Refine popover, and the right column with the selected media, the post brief and the publishing details) — plans/Promotion-08.md, prototype/gen/promotion08.css ---------- */
.cq-head { align-items: center; padding: 8px 4px 14px; }
.cq-head .po-btn { height: 44px; padding: 0 20px; font-size: 15.5px; }
.cq-head .po-btn.btn-outline { border-color: #9FB0FF; }
.cq-head .btn-primary[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.cq-model { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.cq-model .i { font-size: 14px; color: var(--indigo); }
.cq-model b { font-weight: 600; color: var(--text-2); }
.cq-demo { margin-left: 6px; padding: 1px 7px; border-radius: 5px; background: var(--track); color: var(--text-2); font-size: 11.5px; font-weight: 600; }
.cq-banner { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: var(--amber-bg); color: var(--amber-text); font-size: 14.5px; }
.cq-banner > .i { flex: none; font-size: 19px; }
.cq-banner span { flex: 1 1 auto; min-width: 0; }
.cq-banner .btn-outline { flex: none; height: 36px; padding: 0 14px; font-size: 14px; text-decoration: none; background: #fff; }
.cq-banner.is-error { background: #FDECEF; color: #B42339; }
.cq-grid { display: grid; grid-template-columns: minmax(0, 1fr) 452px; gap: 16px; align-items: start; }
.cq-cards-col { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.cq-cards { display: flex; flex-direction: column; gap: 14px; }
.cq-job { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px; background: var(--indigo-bg-2); color: var(--text-2); font-size: 14.5px; }
.cq-job b { color: var(--text); font-weight: 700; }
.cq-job span:last-child { color: var(--muted); }
.cq-job[hidden] { display: none; }
/* a caption card */
.cq-card { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 6px; padding: 14px 18px 16px 16px; border-radius: 12px; min-width: 0; }
.cq-card.is-rec { box-shadow: var(--shadow-card); }
.cq-card.is-dirty { border-color: #B9C6FF; }
.cq-card.is-busy .cq-main { opacity: .55; }
.cq-banner button.btn-outline { cursor: pointer; }
.cq-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-top: 4px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); font-size: 14px; font-weight: 700; }
.cq-main { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.cq-chead { display: flex; align-items: center; gap: 10px; min-height: 28px; flex-wrap: wrap; }
.cq-rec { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 5px; background: var(--green-bg); color: var(--green-text); font-size: 13px; font-weight: 600; }
.cq-reason { font-size: 13px; color: var(--muted); }
.cq-gap { flex: 1 1 auto; }
.cq-ver { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 5px; background: var(--track); color: var(--text-2); font-size: 12.5px; }
.cq-ver b { font-weight: 600; }
.cq-age { font-size: 12.5px; color: var(--muted); min-width: 64px; text-align: right; }
.cq-saved-mark { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--indigo); font-weight: 600; }
.cq-cbody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.64fr); gap: 16px 30px; align-items: start; }
.cq-fields { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cq-f { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: start; gap: 0; }
.cq-fl { padding-top: 7px; font-size: 14px; color: var(--text-2); }
.cq-f input, .cq-f textarea { width: 100%; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--text);
  font: inherit; font-size: 14px; line-height: 1.35; }
.cq-f textarea { height: auto; min-height: 50px; padding: 7px 10px; resize: none; overflow: hidden; display: block; }
.cq-f input:focus, .cq-f textarea:focus, .cq-selw select:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, .14); }
.cq-f input:disabled, .cq-f textarea:disabled, .cq-selw select:disabled { background: #F8F9FC; color: var(--text-2); }
.cq-f.is-invalid input, .cq-f.is-invalid textarea { border-color: var(--red); }
.cq-f .er-msg { grid-column: 2; margin-top: 4px; }
.cq-acts { display: flex; gap: 10px; padding: 6px 0 0 64px; flex-wrap: wrap; }
.cq-acts .btn-primary, .cq-acts .btn-outline { height: 36px; padding: 0 16px; font-size: 14px; font-weight: 600; gap: 8px; box-shadow: none; }
.cq-acts .btn-primary { min-width: 150px; }
.cq-acts .btn-outline { min-width: 104px; border-color: #C9D2FF; color: var(--indigo); }
.cq-acts .btn-outline:hover { background: var(--indigo-bg); }
.cq-acts button[aria-disabled="true"], .cq-acts button:disabled { opacity: .5; cursor: not-allowed; }
.cq-save[aria-pressed="true"] { background: var(--indigo-bg); }
.cq-save[aria-pressed="true"] .i { fill: currentColor; }
.cq-set { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cq-s { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; }
.cq-sl { font-size: 14px; color: var(--text-2); }
.cq-selw { position: relative; display: block; min-width: 0; }
.cq-selw select { width: 100%; height: 32px; padding: 0 30px 0 10px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--text); font: inherit; font-size: 14px; appearance: none; }
.cq-selw .i { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-size: 15px; color: var(--muted); pointer-events: none; }
.cq-terms { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.cq-tl { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-2); }
.cq-tl > .i { font-size: 14px; color: var(--muted); }
.cq-tip { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; background: none; color: var(--muted); cursor: help; }
.cq-tip .i { font-size: 14px; }
.cq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cq-term { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 14px; background: #F1F3F8; color: var(--text-2); font-size: 13px; }
.cq-term.is-more { padding: 0 10px; cursor: help; }
.cq-term.is-none { background: none; padding: 0; color: var(--muted); }
.cq-card.is-skel { min-height: 170px; }
.cq-card.is-skel .cq-main { gap: 16px; padding-top: 8px; }
.cq-card.is-skel .skeleton { display: block; height: 14px; }
/* the right column */
.cq-aside { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cq-panel { padding: 16px 16px 16px; border-radius: 12px; min-width: 0; }
.cq-panel h2 { margin: 0 0 10px; font-size: 18px; font-weight: 700; color: var(--text); }
.cq-phead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.cq-phead h2 { margin: 0; }
.cq-edit { height: 32px; padding: 0 14px; font-size: 14px; gap: 7px; text-decoration: none; border-color: #C9D2FF; color: var(--indigo); }
.cq-pic { position: relative; aspect-ratio: 16 / 7; border-radius: 8px; overflow: hidden; background: var(--track); }
.cq-pic img, .cq-pic .ph-art, .cq-pic .ph-art svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.cq-pic .cq-none { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%; color: var(--muted); font-size: 14px; }
.cq-pic .cq-none .i { font-size: 26px; }
.cq-change { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 6px; background: #fff;
  color: var(--indigo); font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.cq-change .i { font-size: 16px; }
.cq-mtitle { margin: 12px 0 4px; font-size: 16.5px; font-weight: 700; color: var(--text); }
.cq-mfacts { margin: 0; font-size: 14px; color: var(--text-2); }
.cq-brief { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14.5px; line-height: 1.45; color: var(--text); }
.cq-brief p { margin: 0; }
.cq-brief .cq-note { margin-top: 6px; font-size: 13px; color: var(--muted); }
.cq-dest { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; color: var(--text); margin-bottom: 8px; }
.cq-dest b { font-weight: 500; }
.cq-dest i { font-style: normal; margin: 0 8px; color: var(--muted); }
.cq-pf { width: 22px; height: 22px; flex: none; }
.cq-row { display: grid; grid-template-columns: 24px 130px minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 8px; }
.cq-row > .i { font-size: 20px; color: var(--muted); }
.cq-rl { font-size: 14px; color: var(--text-2); }
.cq-rv { display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; color: var(--text); background: #fff; }
.cq-rv .i { font-size: 18px; color: var(--muted); }
.cq-rv.is-empty { color: var(--muted); }
.cq-empty-line { margin: 0; font-size: 14px; color: var(--muted); }
/* the Refine popover */
.cq-pop { position: fixed; z-index: 60; width: 360px; padding: 14px 16px 16px; border: 1px solid var(--border); border-radius: 12px; background: #fff; box-shadow: 0 12px 32px rgba(23, 27, 45, .16); }
.cq-pop[hidden] { display: none; }
.cq-pop h3 { margin: 0 0 10px; font-size: 16px; font-weight: 700; }
.cq-picks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cq-picks button { height: 30px; padding: 0 12px; border: 1px solid var(--border); border-radius: 15px; background: #fff; color: var(--text-2); font: inherit; font-size: 13.5px; cursor: pointer; }
.cq-picks button[aria-pressed="true"] { border-color: var(--indigo); background: var(--indigo-bg); color: var(--indigo); }
.cq-instr { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; color: var(--text-2); }
.cq-instr textarea { width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; font: inherit; font-size: 14px; resize: vertical; }
.cq-popacts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.cq-popacts .btn-outline, .cq-popacts .btn-primary { height: 36px; padding: 0 14px; font-size: 14px; }
.cq-root.is-readonly .cq-acts { display: none; }
@media (max-width: 1280px) {
  .cq-grid { grid-template-columns: minmax(0, 1fr); }
  .cq-aside { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}
@media (max-width: 900px) {
  .cq-cbody { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .cq-head { flex-wrap: wrap; align-items: flex-start; }
  .cq-head .po-actions { flex-wrap: wrap; width: 100%; }
  .cq-head .po-btn { flex: 1 1 auto; justify-content: center; min-width: 0; }
  .cq-card { grid-template-columns: 34px minmax(0, 1fr); padding: 12px; }
  .cq-f { grid-template-columns: minmax(0, 1fr); }
  .cq-fl { padding-top: 0; margin-bottom: 4px; }
  .cq-f .er-msg { grid-column: 1; }
  .cq-acts { padding-left: 0; }
  .cq-acts .btn-primary, .cq-acts .btn-outline { flex: 1 1 auto; min-width: 0; }
  .cq-s { grid-template-columns: 96px minmax(0, 1fr); }
  .cq-row { grid-template-columns: 24px 100px minmax(0, 1fr); }
  .cq-pop { left: 12px !important; right: 12px; width: auto; }
  .cq-banner { flex-wrap: wrap; }
}
/* ---------- Promotion-09 · Caption editor (ce- this screen: the second page of the wizard's Copy step — the content card with Load from library, the channel tiles, the caption editor with the emoji popover and the character count against the channel's capability data, the AI assistant and the suggested variants; the simulated post preview per platform; History, Translations and Notes) — plans/Promotion-09.md, prototype/gen/promotion09.css ---------- */
.ce-head { align-items: center; padding: 8px 4px 14px; }
.ce-head .po-btn { height: 44px; padding: 0 20px; font-size: 15.5px; text-decoration: none; }
.ce-head .po-btn.btn-outline { border-color: #9FB0FF; }
.ce-head .po-btn.btn-primary { min-width: 138px; justify-content: center; }
.na-crumbs a .i { font-size: 14px; margin-right: 4px; vertical-align: -2px; }
.ce-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.8fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ce-card { padding: 16px 18px 18px; border-radius: 12px; min-width: 0; }
.ce-chead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ce-chead h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.ce-chead p { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); }
.ce-h3 { margin: 12px 0 8px; font-size: 15px; font-weight: 600; color: var(--text); }
.ce-h3 label { cursor: text; }
.ce-h3row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ce-lang { font-size: 13px; color: var(--muted); margin-top: 4px; }
.ce-link { border: 0; background: none; padding: 0; color: var(--indigo); font: inherit; font-size: 13.5px; cursor: pointer; }
.ce-link:hover { text-decoration: underline; }
.ce-lib { position: relative; }
.ce-libbtn { height: 34px; padding: 0 12px; font-size: 14px; gap: 6px; border-color: #C9D2FF; color: var(--indigo); }
.ce-libbtn .i { font-size: 15px; }
.ce-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 230px; max-height: 320px; overflow: auto; }
.ce-menu button[role="menuitem"] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-mlabel { display: block; padding: 8px 10px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ce-mempty { display: block; padding: 8px 10px; font-size: 13.5px; color: var(--muted); }
/* the channel tiles */
.ce-channels { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; }
.ce-ch { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; height: 44px; padding: 0 6px; border: 1px solid var(--border);
  border-radius: 8px; background: #fff; color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer; min-width: 0; }
.ce-ch span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ce-ch:hover { border-color: #B9C6FF; }
.ce-ch.is-on { border: 2px solid var(--indigo); background: var(--indigo-bg-2); }
.ce-ch:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.ce-pf { width: 22px; height: 22px; flex: none; }
.ce-dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
/* the editor */
.ce-editor { position: relative; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.ce-editor:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, .14); }
.ce-editor.is-invalid { border-color: var(--red); }
.ce-editor textarea { display: block; width: 100%; min-height: 118px; max-height: 420px; padding: 12px 12px 4px; border: 0; border-radius: 8px; resize: none; overflow-y: auto;
  font: inherit; font-size: 14.5px; line-height: 1.55; color: var(--text); background: transparent; }
.ce-editor textarea:focus { outline: none; }
.ce-editor textarea:disabled { color: var(--text-2); }
.ce-efoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 8px 8px 8px; }
.ce-emoji { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.ce-emoji:hover { background: var(--track); }
.ce-emoji .i { font-size: 19px; }
.ce-count { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ce-count .i { font-size: 14px; }
.ce-count.is-ok { background: var(--green-bg); color: var(--green-text); }
.ce-count.is-over { background: #FDECEF; color: #B42339; }
.ce-count.is-none { background: var(--track); color: var(--text-2); }
.ce-emojis { position: absolute; left: 8px; bottom: 44px; z-index: 30; display: grid; grid-template-columns: repeat(4, 36px); gap: 4px; padding: 8px; border: 1px solid var(--border);
  border-radius: 10px; background: #fff; box-shadow: 0 10px 28px rgba(23, 27, 45, .14); }
.ce-emojis[hidden] { display: none; }
.ce-emojis button { width: 36px; height: 36px; border: 0; border-radius: 6px; background: none; font-size: 19px; cursor: pointer; }
.ce-emojis button:hover, .ce-emojis button:focus-visible { background: var(--indigo-bg); outline: none; }
.ce-editor .er-msg { margin: 0 10px 8px; }
/* the AI assistant */
.ce-ai { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ce-aiw { position: relative; min-width: 0; }
.ce-aib { width: 100%; height: 42px; padding: 0 6px; justify-content: center; gap: 6px; font-size: 13.5px; white-space: nowrap; border-color: #C9D2FF; color: var(--indigo); min-width: 0; }
.ce-aib .i { font-size: 16px; flex: none; }
.ce-aib[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.ce-aiw .ce-menu { left: 0; right: auto; }
.ce-aiw .ce-menu.ce-menu-r { left: auto; right: 0; }
.ce-job { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--indigo-bg-2); font-size: 14px; color: var(--text-2); }
.ce-job[hidden] { display: none; }
.ce-job.is-error { background: #FDECEF; color: #B42339; }
.ce-job .btn-outline { margin-left: auto; height: 30px; padding: 0 12px; font-size: 13.5px; }
/* the suggested variants */
.ce-vars { display: flex; flex-direction: column; gap: 8px; }
.ce-var { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; background: #fff; }
.ce-var:hover { border-color: #B9C6FF; }
.ce-var.is-on { border: 2px solid var(--indigo); background: var(--indigo-bg-2); padding: 7px 11px; }
.ce-var input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--indigo); }
.ce-vt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ce-vt b { font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ce-vt span { font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ce-vtag { flex: none; height: 22px; padding: 0 8px; border-radius: 5px; background: var(--track); color: var(--text-2); font-size: 12px; line-height: 22px; }
.ce-vtag.is-cur { background: var(--indigo-bg); color: var(--indigo); }
.ce-vx { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.ce-vx:hover { background: var(--track); color: var(--text); }
.ce-vars.is-collapsed .ce-var:nth-child(n + 4) { display: none; }
.ce-varempty { margin: 0; font-size: 13.5px; color: var(--muted); }
/* the preview */
.ce-selw { position: relative; display: inline-block; flex: none; }
.ce-selw select { height: 36px; padding: 0 32px 0 12px; border: 1px solid #C9D2FF; border-radius: 8px; background: #fff; color: var(--indigo); font: inherit; font-size: 14px; appearance: none; cursor: pointer; }
.ce-selw .i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 15px; color: var(--indigo); pointer-events: none; }
.ce-mock { display: flex; flex-direction: column; border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; background: #fff; }
.ce-mhead { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.ce-av { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--indigo); color: #fff; font-size: 12px; font-weight: 700; flex: none; }
.ce-mock[data-platform="linkedin"] .ce-av { border-radius: 6px; }
.ce-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ce-mname { font-size: 14px; font-weight: 700; color: var(--text); }
.ce-msub { font-size: 12px; color: var(--muted); }
.ce-mock[data-platform="instagram"] .ce-msub, .ce-mock[data-platform="tiktok"] .ce-msub { display: none; }
.ce-mmore .i { font-size: 18px; color: var(--text-2); }
.ce-mpic { position: relative; aspect-ratio: 4 / 5; background: var(--track); overflow: hidden; }
.ce-mpic img, .ce-mpic .ph-art, .ce-mpic .ph-art svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.ce-mpic .ce-nomedia { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%; background: linear-gradient(160deg, #1B2B6B, #3B5BFD); color: #fff; font-size: 14px; font-weight: 600; }
.ce-mock[data-platform="facebook"] .ce-mpic, .ce-mock[data-platform="linkedin"] .ce-mpic, .ce-mock[data-platform="youtube"] .ce-mpic { aspect-ratio: 16 / 10; }
.ce-mock[data-platform="tiktok"] .ce-mpic { aspect-ratio: 9 / 13; }
.ce-mover { display: none; position: absolute; left: 12px; right: 48px; bottom: 12px; margin: 0; color: #fff; font-size: 13px; line-height: 1.4; text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  max-height: 7.2em; overflow: hidden; }
.ce-mock[data-platform="tiktok"] .ce-mover { display: block; }
.ce-mtop { display: none; margin: 0; padding: 0 12px 10px; font-size: 14px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.ce-mock[data-platform="facebook"] .ce-mtop, .ce-mock[data-platform="linkedin"] .ce-mtop { display: block; }
.ce-macts { display: flex; align-items: center; gap: 14px; padding: 10px 12px 4px; }
.ce-macts .i { font-size: 22px; color: var(--text); }
.ce-macts .end { margin-left: auto; }
.ce-macts.fb { display: none; justify-content: space-around; padding: 8px 12px; border-top: 1px solid var(--border-soft); font-size: 13.5px; color: var(--text-2); }
.ce-macts.fb span { display: inline-flex; align-items: center; gap: 6px; }
.ce-macts.fb .i { font-size: 17px; color: var(--text-2); }
.ce-mock[data-platform="facebook"] .ce-macts.ig, .ce-mock[data-platform="linkedin"] .ce-macts.ig, .ce-mock[data-platform="tiktok"] .ce-macts.ig, .ce-mock[data-platform="youtube"] .ce-macts.ig { display: none; }
.ce-mock[data-platform="facebook"] .ce-macts.fb, .ce-mock[data-platform="linkedin"] .ce-macts.fb { display: flex; }
.ce-mtext { margin: 0; padding: 6px 12px 0; font-size: 14px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.ce-mtext b { font-weight: 700; margin-right: 4px; }
.ce-mock[data-platform="facebook"] .ce-mtext, .ce-mock[data-platform="linkedin"] .ce-mtext, .ce-mock[data-platform="tiktok"] .ce-mtext { display: none; }
.ce-mock[data-platform="youtube"] .ce-mtext .ce-yt { display: block; font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.ce-tag { color: #1D4ED8; }
.ce-mtime { margin: 6px 0 0; padding: 0 12px 12px; font-size: 12px; color: var(--muted); }
.ce-mock[data-platform="facebook"] .ce-mtime, .ce-mock[data-platform="linkedin"] .ce-mtime { display: none; }
/* the right column */
.ce-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ce-panel { padding: 14px 16px 14px; }
.ce-phead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.ce-phead h2 { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.ce-phead h2 .i { font-size: 20px; color: var(--indigo); }
.ce-n { font-weight: 400; color: var(--text-2); }
.ce-small { height: 32px; padding: 0 12px; font-size: 13.5px; border-color: #C9D2FF; color: var(--indigo); }
.btn-primary.ce-small { color: #fff; }
.ce-list { list-style: none; margin: 0; padding: 0; }
.ce-list > li { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 8px 0; border-top: 1px solid var(--border-soft); }
.ce-list > li:first-child { border-top: 0; }
.ce-list.is-collapsed > li:nth-child(n + 4) { display: none; }
.ce-hdot { flex: none; width: 8px; height: 8px; margin: 0 4px; border-radius: 50%; background: var(--grey); }
.ce-hrow.is-cur .ce-hdot { background: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.ce-hmain, .ce-tmain, .ce-nmain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ce-hmain b, .ce-tmain b { font-size: 14px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ce-hmain span, .ce-tmain span, .ce-nmain span { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ce-tmain em { font-style: normal; font-size: 12px; color: var(--amber-text); }
.ce-hwhen { flex: none; font-size: 12.5px; color: var(--text-2); }
.ce-ibtn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: 6px; background: none; color: var(--text-2); cursor: pointer; }
.ce-ibtn:hover { background: var(--track); }
.ce-ibtn .i { font-size: 18px; }
.ce-rowmenu { position: relative; flex: none; }
.ce-rowmenu .ce-menu { right: 0; min-width: 190px; }
.ce-ltile { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 26px; border-radius: 5px; background: var(--indigo-bg); color: var(--indigo); font-size: 12px; font-weight: 700; }
.ce-use { flex: none; height: 30px; padding: 0 14px; font-size: 13.5px; border-color: #C9D2FF; color: var(--indigo); }
.ce-nmain p { margin: 0; font-size: 14px; color: var(--text); line-height: 1.4; overflow-wrap: anywhere; }
.ce-noteform { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 8px; }
.ce-noteform[hidden] { display: none; }
.ce-noteform textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; resize: vertical; }
.ce-noteacts { display: flex; justify-content: flex-end; gap: 8px; }
.ce-listempty { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); }
.ce-root.is-readonly .ce-ai, .ce-root.is-readonly .ce-vx { display: none; }
@media (max-width: 1400px) {
  .ce-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .ce-side { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
}
@media (max-width: 1000px) {
  .ce-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .ce-head { flex-wrap: wrap; align-items: flex-start; }
  .ce-head .po-actions { flex-wrap: wrap; width: 100%; }
  .ce-head .po-btn { flex: 1 1 auto; justify-content: center; min-width: 0; }
  .ce-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ce-ai { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ce-hwhen { display: none; }
}

/* ---------- Promotion-10 · Caption extras (xt- this screen: the right drawer over the caption editor — the destination and post cards, the unsupported-fields strip, the grouped link / CTA, hashtags, alt text and first-comment fields with their helper and count lines, the first comment's own status, the sticky footer with Test comment; the editor head's Caption extras / Continue to targets) — plans/Promotion-10.md, prototype/gen/promotion10.css ---------- */
.xt-backdrop { position: fixed; inset: 0; z-index: 81; background: rgba(23, 27, 45, .18); }
.xt-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 82; display: flex; flex-direction: column; width: 560px; max-width: 100vw; background: var(--surface);
  box-shadow: -12px 0 40px rgba(23, 27, 45, .16); }
.xt-drawer:focus { outline: none; }
.xt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 22px 6px; }
.xt-head h2 { margin: 0; font-size: 25px; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.xt-head p { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.xt-close { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--text-2); cursor: pointer; flex: none; }
.xt-close:hover { background: #F3F4F8; }
.xt-close .i { font-size: 20px; }
.xt-body { flex: 1; overflow: auto; padding: 10px 22px 18px; }
.xt-dest { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.xt-pf { width: 34px; height: 34px; flex: none; }
.xt-dmain { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.xt-dmain b { font-size: 15px; color: var(--text); }
.xt-dmain span { font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xt-dmain span i { font-style: normal; margin-left: 8px; }
.xt-dsel { position: relative; flex: none; }
.xt-dsel select { height: 34px; padding: 0 30px 0 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font: inherit; font-size: 13.5px; color: var(--text);
  appearance: none; cursor: pointer; max-width: 210px; }
.xt-dsel .i { position: absolute; right: 9px; top: 10px; font-size: 14px; color: var(--muted); pointer-events: none; }
.xt-post { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 0; }
.xt-thumb { position: relative; width: 144px; height: 80px; flex: none; overflow: hidden; border-radius: 8px; background: #0E1B3D; }
.xt-thumb img, .xt-thumb .ph-art, .xt-thumb svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.xt-thumb .xt-nomedia { display: grid; place-items: center; height: 100%; color: #C9D2FF; font-size: 12px; text-align: center; }
.xt-pmain { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.xt-pmain b { font-size: 15px; color: var(--text); }
.xt-pmain span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.xt-pmain span .i { font-size: 15px; color: var(--muted); }
.xt-pmain small { font-size: 12.5px; color: var(--muted); }
.xt-strip { display: flex; flex-direction: column; gap: 4px; margin: 14px 0 4px; padding: 12px 14px; border-radius: 8px; background: #F4F6FA; color: var(--text-2); font-size: 13.5px; }
.xt-strip p { display: flex; align-items: flex-start; gap: 10px; margin: 0; }
.xt-strip .i { flex: none; font-size: 17px; color: var(--muted); margin-top: 1px; }
.xt-group { margin-top: 18px; padding-top: 2px; }
.xt-group + .xt-group { border-top: 1px solid var(--border-soft); padding-top: 14px; }
.xt-gtitle { margin: 0 0 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); }
.xt-field { margin-top: 18px; }
.xt-group .xt-field:first-of-type { margin-top: 8px; }
.xt-field > label, .xt-field .xt-lbl { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; color: var(--text); }
.xt-field input[type="text"], .xt-field input[type="url"], .xt-field textarea, .xt-field select { display: block; width: 100%; border: 1px solid var(--border); border-radius: 8px;
  background: #fff; font: inherit; font-size: 14.5px; color: var(--text); }
.xt-field input[type="text"], .xt-field input[type="url"], .xt-field select { height: 42px; padding: 0 12px; }
.xt-field textarea { min-height: 42px; padding: 10px 12px; line-height: 1.45; resize: vertical; }
.xt-field input:focus, .xt-field textarea:focus, .xt-field select:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, .14); }
.xt-field :disabled { background: #F7F8FB; color: var(--text-2); }
.xt-field.is-invalid input, .xt-field.is-invalid textarea, .xt-field.is-invalid select { border-color: var(--red); }
.xt-help { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.xt-help .xt-n { flex: none; font-variant-numeric: tabular-nums; }
.xt-help .xt-n.is-over { color: #B42339; font-weight: 600; }
.xt-sub { margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.xt-field .er-msg { margin-top: 6px; }
.xt-cstate { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 3px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.xt-cstate .i { font-size: 13px; }
.xt-cstate.is-grey { background: var(--track); color: var(--text-2); }
.xt-cstate.is-green { background: var(--green-bg); color: var(--green-text); }
.xt-cstate.is-red { background: #FDECEF; color: #B42339; }
.xt-cnote { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.xt-all { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13.5px; color: var(--text-2); cursor: pointer; }
.xt-all input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--indigo); flex: none; }
.xt-foot { display: flex; align-items: center; gap: 8px; padding: 14px 18px 16px; border-top: 1px solid var(--border-soft); background: var(--surface); }
.xt-foot .btn-outline, .xt-foot .btn-primary { flex: none; height: 44px; padding: 0 14px; font-size: 14.5px; font-weight: 600; border-radius: 8px; white-space: nowrap; }
.xt-foot .btn-outline { border-color: #9FB0FF; color: var(--indigo); }
.xt-foot .xt-right { display: flex; gap: 10px; margin-left: auto; flex: none; }
.xt-tested { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 1; font-size: 12.5px; color: var(--text-2); }
.xt-tested .i { flex: none; font-size: 17px; }
.xt-tested.is-ok .i { color: var(--green); }
.xt-tested.is-fail { color: #B42339; }
.xt-tested.is-stale { color: var(--muted); }
.xt-tested span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xt-empty { margin: 30px 0 10px; }
/* the caption editor's head: Caption extras and Continue to targets (Promotion-10 / 11) */
.ce-head .bf-more { position: relative; }
.ce-head .bf-more .pm-menu { right: 0; left: auto; }
.ce-head .po-btn .i { font-size: 17px; }
@media (max-width: 768px) {
  .xt-drawer { width: 100vw; }
  .xt-foot { flex-wrap: wrap; }
  .xt-foot .xt-right { width: 100%; }
  .xt-foot .xt-right .btn-primary { flex: 1; }
  .xt-thumb { width: 104px; height: 64px; }
}

/* ---------- Promotion-11 · Distribution targets (tg- this screen: the wizard's Targets step — the destinations card with the search, Filter and market toolbar, the saved-group strip, one table per platform with account, market, language, access and formats and the row reasons, and the live Summary with the per-platform counts, the status box and the checks) — plans/Promotion-11.md, prototype/gen/promotion11.css ---------- */
.tg-head { align-items: center; padding: 8px 4px 14px; }
.tg-head .po-btn { height: 44px; padding: 0 20px; font-size: 15.5px; text-decoration: none; }
.tg-head .po-btn.btn-outline { border-color: #9FB0FF; }
.tg-head .po-btn .i { font-size: 17px; }
.tg-grid { display: grid; grid-template-columns: minmax(0, 1fr) 446px; gap: 16px; align-items: start; }
.tg-card { padding: 18px 18px 20px; border-radius: 12px; min-width: 0; }
.tg-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.tg-top h2 { margin: 0 auto 0 0; font-size: 21px; font-weight: 700; color: var(--text); }
.tg-search { position: relative; width: 200px; }
.tg-search .i { position: absolute; left: 12px; top: 12px; font-size: 16px; color: var(--muted); }
.tg-search input { width: 100%; height: 40px; padding: 0 12px 0 36px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; background: #fff; }
.tg-search input:focus, .tg-selw select:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, .14); }
.tg-fwrap { position: relative; }
.tg-filter { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font: inherit;
  font-size: 14px; color: var(--text); cursor: pointer; }
.tg-filter.is-on { border-color: var(--indigo); color: var(--indigo); }
.tg-filter .i { font-size: 16px; }
.tg-fpop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 250px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff;
  box-shadow: 0 10px 28px rgba(23, 27, 45, .14); }
.tg-fpop[hidden] { display: none; }
.tg-fpop label { display: flex; align-items: center; gap: 10px; padding: 7px 2px; font-size: 14px; color: var(--text-2); cursor: pointer; }
.tg-fpop input { width: 16px; height: 16px; accent-color: var(--indigo); }
.tg-selw { position: relative; }
.tg-selw select { height: 40px; padding: 0 34px 0 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font: inherit; font-size: 14px; color: var(--text);
  appearance: none; cursor: pointer; max-width: 100%; }
.tg-selw .i { position: absolute; right: 11px; top: 12px; font-size: 15px; color: var(--muted); pointer-events: none; }
/* the saved-group strip */
.tg-group { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 12px 16px; border: 1px solid #E1E6FF; border-radius: 10px; background: #F4F6FF; }
.tg-gicon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; color: var(--indigo); }
.tg-gicon .i { font-size: 24px; }
.tg-gtext { flex: 1; min-width: 0; }
.tg-gtext b { display: block; font-size: 15px; color: var(--text); }
.tg-gtext b span { font-weight: 500; color: var(--indigo); }
.tg-gtext small { font-size: 13.5px; color: var(--text-2); }
.tg-group .tg-selw select { width: 280px; }
.tg-gmore { position: relative; }
.tg-gmore .pm-menu { right: 0; left: auto; top: calc(100% + 4px); }
/* one block per platform */
.tg-plat { margin-top: 16px; }
.tg-plat:first-of-type { margin-top: 0; }
.tg-phead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tg-pf { width: 28px; height: 28px; flex: none; }
.tg-phead b { font-size: 16px; color: var(--text); }
.tg-phead span { font-size: 14px; color: var(--muted); }
.tg-table { width: 100%; border: 1px solid var(--border); border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; table-layout: fixed; }
.tg-table th { height: 34px; padding: 0 10px; background: #F7F8FB; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 500; color: var(--text-2); text-align: left; }
.tg-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-soft); font-size: 14px; color: var(--text-2); vertical-align: middle; }
.tg-table tr:last-child td { border-bottom: 0; }
.tg-table .c-box { width: 44px; padding-left: 14px; }
.tg-table .c-mkt { width: 13%; }
.tg-table .c-lang { width: 12%; }
.tg-table .c-acc { width: 17%; }
.tg-table .c-fmt { width: 15%; }
.tg-table .c-more { width: 50px; text-align: center; }
.tg-table input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--indigo); cursor: pointer; }
.tg-table input[type="checkbox"]:disabled { cursor: not-allowed; }
.tg-row { cursor: pointer; }
.tg-row:hover td { background: #FAFBFE; }
.tg-row.is-sel td { background: #F6F8FF; }
.tg-row.is-off { cursor: default; }
.tg-row.is-off .tg-name b, .tg-row.is-off .tg-name > span, .tg-row.is-off .tg-av { opacity: .6; }
.tg-acct { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tg-av { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #1B2A6B, #3B5BFD); color: #fff;
  font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.tg-av.a-2 { background: linear-gradient(135deg, #0F4C5C, #2BA3B8); }
.tg-name { display: flex; flex-direction: column; min-width: 0; }
.tg-name b { font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-name > span { font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-why { display: block; margin: 3px 0 0; font-size: 12.5px; line-height: 1.35; color: #9A3412; white-space: normal; }
.tg-why.is-warn { color: var(--amber-text); }
.tg-why.is-info { color: var(--muted); }
.tg-why a { margin-left: 4px; color: var(--indigo); font-weight: 600; text-decoration: none; }
.tg-why a:hover { text-decoration: underline; }
.tg-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.tg-chip.is-green { background: var(--green-bg); color: var(--green-text); }
.tg-chip.is-amber { background: var(--amber-bg); color: var(--amber-text); }
.tg-chip.is-red { background: #FDECEF; color: #B42339; }
.tg-fmts { display: flex; gap: 8px; }
.tg-fmt { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; color: var(--text-2); }
.tg-fmt .i { font-size: 19px; }
.tg-fmt.is-match { box-shadow: inset 0 0 0 1.5px var(--indigo); color: var(--indigo); }
.tg-fmt.is-no { color: #C2410C; position: relative; }
.tg-fmt.is-no::after { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 1.5px; background: currentColor; transform: rotate(-35deg); }
.tg-more { position: relative; display: inline-block; }
.tg-more .pl-ibtn, .tg-gmore .pl-ibtn { border-color: transparent; background: none; }
.tg-more .pl-ibtn:hover, .tg-gmore .pl-ibtn:hover { background: var(--track); }
.tg-more .pm-menu { right: 0; left: auto; }
.tg-empty { margin: 24px 0 8px; }
/* the summary */
.tg-sum { position: sticky; top: 12px; padding: 18px 20px 20px; }
.tg-sum h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 19px; font-weight: 700; color: var(--text); }
.tg-sum h2 .i { font-size: 22px; color: var(--indigo); }
.tg-big { display: flex; gap: 16px; align-items: center; padding-bottom: 14px; }
.tg-bigic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); flex: none; }
.tg-bigic .i { font-size: 24px; }
.tg-big b { display: block; font-size: 15px; color: var(--text); }
.tg-big .tg-n { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.tg-big .tg-n strong { font-size: 30px; font-weight: 800; color: var(--text); line-height: 1.1; }
.tg-big .tg-n span { font-size: 13.5px; color: var(--muted); }
.tg-plist { list-style: none; margin: 0 0 14px; padding: 0; }
.tg-plist li { display: flex; align-items: center; gap: 12px; height: 32px; font-size: 14.5px; color: var(--text-2); }
.tg-plist .tg-pf { width: 22px; height: 22px; }
.tg-state { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 10px; }
.tg-state .i { flex: none; font-size: 26px; }
.tg-state b { display: block; font-size: 15px; color: var(--text); }
.tg-state span { font-size: 14px; color: var(--text-2); }
.tg-state.is-green { background: var(--green-bg); border: 1px solid #BFE8D3; }
.tg-state.is-green .i { color: var(--green); }
.tg-state.is-amber { background: var(--amber-bg); border: 1px solid #F3D9A7; }
.tg-state.is-amber .i { color: var(--amber); }
.tg-state.is-grey { background: #F4F6FA; border: 1px solid var(--border); }
.tg-state.is-grey .i { color: var(--grey); }
.tg-checks { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; }
.tg-checks h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.tg-checks h3 .i { font-size: 20px; color: var(--amber); }
.tg-checks > p { margin: 3px 0 8px 30px; font-size: 13px; color: var(--muted); }
.tg-checks ul { list-style: none; margin: 0; padding: 0; }
.tg-checks li { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; padding: 3px 0; font-size: 14px; color: var(--text-2); }
.tg-checks li .i { font-size: 19px; margin-top: 1px; }
.tg-checks li.is-ok .i { color: var(--green); }
.tg-checks li.is-fail .i { color: var(--red); }
.tg-checks li.is-warn .i { color: var(--amber); }
.tg-checks li.is-none .i { color: var(--grey); }
.tg-checks li small { grid-column: 2; display: block; font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.tg-dirty { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 13px; color: var(--amber-text); }
.tg-dirty[hidden] { display: none; }
.tg-dirty .btn-outline { height: 34px; padding: 0 12px; font-size: 13.5px; }
@media (max-width: 1200px) {
  .tg-grid { grid-template-columns: minmax(0, 1fr); }
  .tg-sum { position: static; }
}
@media (max-width: 900px) {
  .tg-table .c-mkt, .tg-table .c-lang { display: none; }
  .tg-table .c-acc { width: 26%; }
  .tg-table .c-fmt { width: 22%; }
}
@media (max-width: 768px) {
  .tg-head .po-actions { flex-wrap: wrap; width: 100%; }
  .tg-head .po-btn { flex: 1 1 auto; justify-content: center; min-width: 0; }
  .tg-top { flex-wrap: wrap; }
  .tg-top h2 { width: 100%; }
  .tg-search { flex: 1; width: auto; }
  .tg-group { flex-wrap: wrap; }
  .tg-group .tg-selw, .tg-group .tg-selw select { width: 100%; }
  .tg-table .c-fmt { display: none; }
  .tg-table .c-box { width: 38px; padding-left: 10px; }
  .tg-table .c-acc { width: 108px; padding: 8px 4px; }
  .tg-table .c-more { width: 40px; padding: 8px 2px; }
  .tg-acct { gap: 8px; }
  .tg-chip { padding: 0 7px; font-size: 12px; }
  .tg-av { width: 34px; height: 34px; font-size: 12px; }
}

/* ---------- Promotion-12 · Account variants (vn- this screen: the wizard's Variants step — the head with Add variant / View parent draft / ⋯, the variant list with the search, account, language and status filters and the rows (picture, caption opening, inherit / custom, account, language, schedule, status), and the variant card with Reset to parent, the Content / Differences / History tabs, the inherited or customized Caption, URL, Media, Language, Schedule and Approval fields with Override / Reset, the simulated preview (P09's ce-mock) and the info strip) — plans/Promotion-12.md, prototype/gen/promotion12.css ---------- */
.vn-head { align-items: center; padding: 8px 4px 14px; }
.vn-head .po-btn { height: 44px; padding: 0 20px; font-size: 15.5px; text-decoration: none; }
.vn-head .po-btn.btn-outline { border-color: #9FB0FF; }
.vn-head .po-btn .i { font-size: 17px; }
.vn-head .vn-sq { width: 60px; padding: 0; justify-content: center; }
.vn-mw { position: relative; }
.vn-mw > .pm-menu { right: 0; left: auto; min-width: 250px; }
.vn-addmenu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 290px; max-height: 360px; overflow: auto; }
.vn-addmenu .pm-pf { width: 18px; height: 18px; flex: none; }
.vn-addmenu .vn-mnote { display: block; padding: 8px 12px; font-size: 13px; color: var(--muted); }
.vn-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
/* the variant list */
.vn-list { padding: 12px 12px 14px; border-radius: 12px; min-width: 0; }
.vn-tools { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.vn-search { position: relative; flex: 1 1 200px; max-width: 222px; }
.vn-search .i { position: absolute; left: 12px; top: 12px; font-size: 16px; color: var(--muted); }
.vn-search input { width: 100%; height: 40px; padding: 0 12px 0 36px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; background: #fff; }
.vn-selw { position: relative; }
.vn-selw select { height: 40px; padding: 0 32px 0 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font: inherit; font-size: 13.5px; color: var(--text);
  appearance: none; cursor: pointer; max-width: 150px; }
.vn-selw .i { position: absolute; right: 10px; top: 12px; font-size: 15px; color: var(--muted); pointer-events: none; }
.vn-search input:focus, .vn-selw select:focus, .vn-edit textarea:focus, .vn-edit input:focus, .vn-edit select:focus { outline: none; border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(59, 91, 253, .14); }
.vn-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.vn-table th { height: 36px; padding: 0 6px; text-align: left; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--text-2); background: #F7F8FC; }
.vn-table th:first-child { border-radius: 8px 0 0 8px; }
.vn-table th:last-child { border-radius: 0 8px 8px 0; }
.vn-table td { padding: 10px 6px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; font-size: 13.5px; color: var(--text); }
.vn-table .c-var { width: 31%; }
.vn-table .c-acct { width: 17%; }
.vn-table .c-lang { width: 10%; }
.vn-table .c-sched { width: 23%; }
.vn-table .c-stat { width: 19%; }
.vn-table .c-more { width: 36px; padding-left: 0; padding-right: 0; text-align: right; }
.vn-row { cursor: pointer; }
.vn-row:hover td { background: #FAFBFF; }
.vn-row.is-sel td { background: #F4F6FF; }
.vn-row.is-sel td:first-child { box-shadow: inset 3px 0 0 var(--indigo); }
.vn-row:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
.vn-var { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vn-thumb { position: relative; flex: none; width: 58px; height: 58px; border-radius: 8px; overflow: hidden; background: linear-gradient(160deg, #1B2B6B, #3B5BFD); }
.vn-thumb img, .vn-thumb .ph-art, .vn-thumb .ph-art svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.vn-thumb .vn-noimg { display: grid; place-items: center; height: 100%; color: #fff; }
.vn-thumb .vn-noimg .i { font-size: 22px; }
.vn-vt { min-width: 0; }
.vn-vt b { display: block; font-size: 13.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vn-vt span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vn-vt span.is-custom { color: var(--indigo); }
.vn-acct { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.vn-pf { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.vn-acct div { min-width: 0; }
.vn-acct b { display: block; font-weight: 500; }
.vn-acct span { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vn-sched { font-size: 13px; }
.vn-sched span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vn-sched .is-none { color: var(--muted); }
.vn-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.vn-chip .i { font-size: 14px; }
.vn-chip.is-green { background: #E7F7F0; color: #0E8A5F; }
.vn-chip.is-amber { background: #FFF4E0; color: #B26A00; }
.vn-chip.is-blue { background: #EEF1FF; color: var(--indigo); }
.vn-chip.is-red { background: #FDECEF; color: #D23B53; }
.vn-chip.is-grey { background: #F0F2F7; color: #6B7280; }
.vn-stat { display: flex; align-items: center; gap: 6px; min-width: 0; }
.vn-stat > .i { font-size: 17px; color: #F59E0B; }
.vn-more { position: relative; display: inline-block; }
.vn-more .pl-ibtn { width: 32px; height: 32px; border-color: transparent; background: none; }
.vn-more .pm-menu { right: 0; left: auto; min-width: 230px; }
.vn-foot { margin: 12px 4px 0; font-size: 13px; color: var(--text-2); }
.vn-empty { margin-top: 12px; }
/* the variant card */
.vn-panel { padding: 16px 18px 18px; border-radius: 12px; min-width: 0; }
.vn-pane[hidden] { display: none; }
.vn-phead { display: flex; align-items: flex-start; gap: 12px; }
.vn-phead h2 { margin: 0; font-size: 21px; font-weight: 800; color: var(--text); line-height: 1.25; overflow-wrap: anywhere; }
.vn-pmeta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-size: 13.5px; color: var(--text-2); }
.vn-pmeta .vn-pf { margin: 0; }
.vn-pacts { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.vn-pacts .btn-outline { height: 40px; padding: 0 16px; font-size: 14.5px; border-color: #9FB0FF; }
.vn-pacts .vn-sq { width: 44px; padding: 0; justify-content: center; }
.vn-tabs { display: flex; gap: 2px; margin: 14px 0 12px; border-bottom: 1px solid var(--border-soft); }
.vn-tab { height: 40px; margin-bottom: -1px; padding: 0 16px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 14px;
  color: var(--text-2); cursor: pointer; }
.vn-tab:hover { color: var(--text); }
.vn-tab.is-on { color: var(--indigo); border-bottom-color: var(--indigo); font-weight: 600; }
.vn-tab .vn-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px; background: #EEF1FF;
  color: var(--indigo); font-size: 11.5px; font-weight: 700; }
.vn-content { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(240px, 1fr); gap: 16px; align-items: start; }
.vn-field { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 0 6px; margin-bottom: 14px; }
.vn-fl { padding-top: 8px; font-size: 14px; font-weight: 500; color: var(--text); }
.vn-fv { min-width: 0; }
.vn-box { min-height: 38px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font-size: 13px; line-height: 1.45; color: var(--text);
  white-space: pre-line; overflow-wrap: anywhere; }
.vn-box.is-caption { max-height: 82px; overflow: hidden; }
.vn-box.is-muted { color: var(--muted); background: #F7F8FC; }
.vn-field.is-custom .vn-box { border-color: #9FB0FF; background: #FBFCFF; }
.vn-two { display: flex; gap: 8px; }
.vn-two .vn-box { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.vn-two .vn-box .i { font-size: 16px; color: var(--text-2); }
.vn-two .vn-box:first-child { flex: 1 1 auto; min-width: 0; }
.vn-two .vn-box:last-child { flex: none; }
.vn-media { display: flex; align-items: center; gap: 10px; padding: 6px; }
.vn-media .vn-mimg { flex: none; width: 80px; height: 52px; border-radius: 6px; overflow: hidden; background: linear-gradient(160deg, #1B2B6B, #3B5BFD); }
.vn-media .vn-mimg img, .vn-media .vn-mimg .ph-art, .vn-media .vn-mimg .ph-art svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.vn-media b { display: block; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vn-media span { display: block; font-size: 12px; color: var(--muted); }
.vn-media > div { min-width: 0; }
.vn-appr { display: flex; align-items: center; gap: 10px; min-height: 38px; }
.vn-appr .vn-chip { height: 32px; padding: 0 14px; font-size: 14px; border-radius: 8px; }
.vn-appr span { font-size: 13px; color: var(--text-2); }
.vn-fline { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; font-size: 12px; color: var(--muted); }
.vn-fline .vn-state { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vn-field.is-custom .vn-fline .vn-state { color: var(--indigo); font-weight: 600; }
.vn-fline .vn-acts { display: flex; gap: 12px; flex: none; }
.vn-link { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; color: var(--indigo); cursor: pointer;
  text-decoration: none; }
.vn-link .i { font-size: 13px; }
.vn-link:hover { text-decoration: underline; }
.vn-link:disabled { color: var(--muted); cursor: default; text-decoration: none; }
.vn-note { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: var(--text-2); }
.vn-note.is-warn { color: #B26A00; }
/* the override editor inside a field */
.vn-edit textarea, .vn-edit input, .vn-edit select { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--indigo); border-radius: 8px; font: inherit;
  font-size: 13px; line-height: 1.45; color: var(--text); background: #fff; }
.vn-edit textarea { min-height: 110px; resize: vertical; }
.vn-edit input, .vn-edit select { height: 38px; }
.vn-edit .vn-count { display: block; margin-top: 4px; text-align: right; font-size: 12px; color: var(--muted); }
.vn-edit .vn-count.is-over { color: #D23B53; font-weight: 600; }
.vn-eacts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.vn-eacts button { height: 32px; padding: 0 14px; font-size: 13px; }
.vn-err { margin: 5px 0 0; font-size: 12px; color: #D23B53; }
/* the blocker strip in the card */
.vn-block { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid #F8D9A6; border-radius: 10px; background: #FFF8EC;
  font-size: 13px; line-height: 1.45; color: #7A4B00; }
.vn-block > .i { flex: none; margin-top: 1px; font-size: 17px; color: #F59E0B; }
.vn-block.is-ok { border-color: #BDE8D6; background: #F0FBF6; color: #0E6B4A; }
.vn-block.is-ok > .i { color: #12B981; }
.vn-block .vn-bacts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.vn-block .vn-link { font-size: 13px; }
/* the preview column */
.vn-prev { padding: 12px; border: 1px solid var(--border-soft); border-radius: 10px; background: #FBFCFE; min-width: 0; }
.vn-prevh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.vn-prevh h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.vn-prevh a { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; color: var(--text-2); }
.vn-prevh a:hover { background: #EEF1FF; color: var(--indigo); }
.vn-prevh a .i { font-size: 17px; }
.vn-prev .ce-mock { background: #fff; }
.vn-prev .ce-mpic { aspect-ratio: 16 / 10; }
.vn-prev .ce-mock[data-platform="instagram"] .ce-mpic { aspect-ratio: 1 / 1; }
.vn-prev .ce-mock[data-shape] .ce-mpic { aspect-ratio: var(--vn-shape); }
.vn-info { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 12px; border-radius: 10px; background: #F4F6FF; font-size: 12.5px; line-height: 1.45;
  color: var(--text-2); }
.vn-info .i { flex: none; margin-top: 1px; font-size: 17px; color: var(--indigo); }
/* differences and history */
.vn-diff h3, .vn-hist h3 { margin: 4px 0 8px; font-size: 14.5px; font-weight: 700; color: var(--text); }
.vn-diff table { width: 100%; margin-bottom: 16px; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.vn-diff th { padding: 8px; text-align: left; font-weight: 600; color: var(--text-2); background: #F7F8FC; }
.vn-diff th:first-child { width: 110px; }
.vn-diff td { padding: 9px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: top; white-space: pre-line; overflow-wrap: anywhere; color: var(--text); }
.vn-diff td.is-new { color: var(--indigo); }
.vn-diff .vn-same { margin: 0 0 16px; padding: 12px; border-radius: 10px; background: #F7F8FC; font-size: 13px; color: var(--text-2); }
.vn-hist ul { margin: 0; padding: 0; list-style: none; }
.vn-hist li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; color: var(--text); }
.vn-hist li .i { flex: none; margin-top: 2px; font-size: 16px; color: var(--indigo); }
.vn-hist li small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.vn-hist li .vn-tag { margin-left: 6px; padding: 1px 7px; border-radius: 5px; background: #EEF1FF; color: var(--indigo); font-size: 11.5px; font-weight: 600; }
.vn-hist .vn-hnone { padding: 12px; border-radius: 10px; background: #F7F8FC; font-size: 13px; color: var(--text-2); }
.vn-root.is-readonly .vn-link[data-act], .vn-root.is-readonly .vn-reset { display: none; }
@media (max-width: 1280px) {
  .vn-content { grid-template-columns: minmax(0, 1fr); }
  .vn-prev { max-width: 420px; }
}
@media (max-width: 1100px) {
  .vn-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .vn-head { flex-wrap: wrap; }
  .vn-head .po-actions { flex-wrap: wrap; }
  .vn-table .c-sched, .vn-table .c-lang { display: none; }
  .vn-table .c-var { width: 44%; }
  .vn-table .c-acct { width: 26%; }
  .vn-table .c-stat { width: 30%; }
  .vn-table .c-more, .vn-stat > .i { display: none; }
  .vn-chip { height: auto; min-height: 24px; padding: 3px 8px; white-space: normal; }
  .vn-thumb { width: 44px; height: 44px; }
  .vn-phead { flex-wrap: wrap; }
  .vn-pacts { margin-left: 0; }
  .vn-search { max-width: none; }
}

/* ---------- Promotion-13 · Media adaptation request (ma- this screen: the modal over Targets / Variants — the source media card with its facts and the Content links, the target format cards with the shaped frame, the dashed safe area, the draggable crop, the requirement and state lines and "Save crop as derivative", the subtitle and content-task cards, the footer strip with the waiting destinations and Request adaptation) — plans/Promotion-13.md, prototype/gen/promotion13.css ---------- */
.ma-backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(23, 27, 45, .45); }
.ma-modal { display: flex; flex-direction: column; width: min(988px, calc(100vw - 32px)); max-height: calc(100vh - 32px); border-radius: 14px; background: var(--surface, #fff);
  box-shadow: 0 24px 60px rgba(15, 23, 42, .28); outline: none; }
.ma-head { position: relative; padding: 20px 60px 12px 20px; }
.ma-head h2 { margin: 0; font-size: 25px; font-weight: 800; color: var(--text); }
.ma-head p { margin: 6px 0 0; font-size: 15.5px; color: var(--text-2); }
.ma-x { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: none;
  color: var(--text-2); cursor: pointer; }
.ma-x:hover { background: var(--indigo-bg-2, #EEF1FF); color: var(--indigo); }
.ma-x .i { font-size: 22px; }
.ma-body { flex: 1 1 auto; overflow: auto; padding: 4px 20px 12px; }
.ma-top { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: stretch; }
.ma-card { padding: 12px; border: 1px solid var(--border-soft); border-radius: 12px; background: #fff; min-width: 0; }
.ma-card > h3 { margin: 0 0 10px; font-size: 16px; font-weight: 700; color: var(--text); }
.ma-card > .ma-sub { margin: -6px 0 12px; font-size: 13px; color: var(--text-2); }
/* the source */
.ma-src-img { display: block; width: 100%; aspect-ratio: 272 / 140; border-radius: 8px; overflow: hidden; background: linear-gradient(160deg, #1B2B6B, #3B5BFD); }
.ma-src-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ma-src-t { display: flex; align-items: center; gap: 6px; margin: 12px 0 6px; font-size: 16px; font-weight: 700; color: var(--text); }
.ma-src-t a { display: inline-grid; place-items: center; color: var(--indigo); }
.ma-src-t a .i { font-size: 16px; }
.ma-src-meta { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--text-2); }
.ma-src-meta .ma-pf { flex: none; width: 20px; height: 20px; }
.ma-src-meta span { display: block; }
.ma-facts { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #F6F7FB; }
.ma-facts dl { display: grid; grid-template-columns: 20px 90px minmax(0, 1fr); gap: 8px 8px; margin: 0; align-items: center; font-size: 13.5px; }
.ma-facts dl .i { font-size: 16px; color: var(--text-2); }
.ma-facts dt { color: var(--text-2); }
.ma-facts dd { margin: 0; color: var(--text); }
.ma-facts > a { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13.5px; font-weight: 500; color: var(--indigo); text-decoration: none; }
.ma-facts > a .i { font-size: 15px; }
.ma-facts > a:hover { text-decoration: underline; }
/* the format cards */
.ma-formats { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; }
.ma-fmt { display: flex; flex-direction: column; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: #fff; min-width: 0; }
.ma-fmt.is-on { border-color: #9FB0FF; box-shadow: 0 0 0 1px rgba(59, 91, 253, .12); }
.ma-fhead { display: flex; align-items: flex-start; gap: 8px; }
.ma-fhead input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--indigo); cursor: pointer; }
.ma-fhead input:disabled { cursor: not-allowed; }
.ma-fhead .ma-pf { flex: none; width: 22px; height: 22px; }
.ma-fhead b { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); }
.ma-fhead span { display: block; font-size: 12.5px; color: var(--text-2); }
.ma-stage { display: grid; place-items: center; height: 156px; margin: 10px 0 6px; }
.ma-frame { position: relative; max-width: 100%; max-height: 150px; overflow: hidden; border: 2px solid #0E1B3D; border-radius: 3px; background: #0E1B3D; cursor: grab;
  touch-action: none; }
.ma-frame.is-fixed { cursor: default; }
.ma-frame:focus-visible { outline: 3px solid rgba(59, 91, 253, .45); outline-offset: 2px; }
.ma-frame img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; }
.ma-frame .ma-safe { position: absolute; border: 1.5px dashed rgba(255, 255, 255, .9); border-radius: 2px; pointer-events: none; }
.ma-frame .ma-novideo { position: absolute; inset: 0; display: grid; place-items: center; padding: 8px; background: rgba(14, 27, 61, .55); color: #fff; font-size: 12px;
  font-weight: 600; text-align: center; }
.ma-size { margin: 0 0 6px; text-align: center; font-size: 13.5px; color: var(--text); }
.ma-lines { margin: 0 0 10px; padding: 0; list-style: none; }
.ma-lines li { display: flex; align-items: flex-start; gap: 6px; padding: 2px 0; font-size: 12.5px; line-height: 1.4; color: var(--text); }
.ma-lines li .i { flex: none; margin-top: 1px; font-size: 15px; color: #12B981; }
.ma-lines li.is-warn { color: #9A5B00; }
.ma-lines li.is-warn .i { color: #F59E0B; }
.ma-lines li.is-info { color: var(--text-2); }
.ma-lines li.is-info .i { color: var(--muted); }
.ma-lines li.is-req .i { color: var(--indigo); }
.ma-crop { width: 100%; height: 36px; margin-top: auto; padding: 0 6px; border-color: #9FB0FF; font-size: 13px; color: var(--indigo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-crop:disabled { color: var(--muted); border-color: var(--border); cursor: not-allowed; }
/* subtitles and the task */
.ma-opts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.ma-opt { display: flex; align-items: flex-start; gap: 12px; }
.ma-opt input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 8px 0 0; accent-color: var(--indigo); cursor: pointer; }
.ma-opt .ma-oic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #F0F2F7; color: var(--text-2); }
.ma-opt .ma-oic .i { font-size: 18px; }
.ma-opt b { display: block; font-size: 14.5px; font-weight: 600; color: var(--text); }
.ma-opt span { display: block; margin-top: 2px; font-size: 13px; color: var(--text-2); }
.ma-opt.is-off { opacity: .6; }
.ma-note { width: 100%; box-sizing: border-box; margin-top: 8px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; }
.ma-note:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, .14); }
/* the footer */
.ma-foot { display: flex; align-items: center; gap: 12px; padding: 12px 20px 18px; border-top: 1px solid var(--border-soft); }
.ma-strip { display: flex; align-items: flex-start; gap: 12px; flex: 1 1 auto; min-width: 0; padding: 12px 16px; border-radius: 10px; background: #EEF3FF; font-size: 13px;
  line-height: 1.45; color: var(--text-2); }
.ma-strip .i { flex: none; margin-top: 1px; font-size: 20px; color: var(--indigo); }
.ma-strip b { display: block; font-weight: 500; color: var(--indigo); }
.ma-strip .ma-wait { display: block; margin-top: 2px; color: #9A5B00; }
.ma-foot .btn-outline, .ma-foot .btn-primary { flex: none; height: 44px; padding: 0 22px; font-size: 15px; }
.ma-foot .ma-ro { flex: none; font-size: 13.5px; color: var(--muted); }
.ma-err { margin: 8px 0 0; font-size: 13px; color: #D23B53; }
@media (max-width: 900px) {
  .ma-top { grid-template-columns: minmax(0, 1fr); }
  .ma-src-img { max-width: 360px; }
}
@media (max-width: 600px) {
  .ma-backdrop { padding: 8px; }
  .ma-modal { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .ma-head h2 { font-size: 21px; }
  .ma-formats { grid-template-columns: minmax(0, 1fr); }
  .ma-opts { grid-template-columns: minmax(0, 1fr); }
  .ma-foot { flex-wrap: wrap; }
  .ma-foot .btn-outline, .ma-foot .btn-primary { flex: 1 1 auto; }
}

/* ---------- Promotion-14 · Post previews (px- this screen: the wizard's Preview step — the head with Save and exit / Continue to schedule, the simulation strip, one simulated preview card per destination (the account, the effective picture, the platform's actions without numbers, the effective caption with its hashtags, the link card, the first comment, the destination's own validation line) and the side cards Post variants (tiles with ‹ ›) and Validation (the checks with their problems and fix links)) — plans/Promotion-14.md, prototype/gen/promotion14.css ---------- */
.px-head { align-items: center; padding: 8px 4px 14px; }
.px-head .po-btn { height: 44px; padding: 0 20px; font-size: 15.5px; }
.px-head .po-btn.btn-outline { border-color: #9FB0FF; }
.px-head .po-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.px-banner { margin-bottom: 12px; }
.px-grid { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 16px; align-items: start; }
.px-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.px-sim { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 16px; border-radius: 10px; background: #EEF3FF; border: 1px solid #DCE4FF;
  color: #2940C8; font-size: 14.5px; }
.px-sim .i { font-size: 18px; flex: none; }
.px-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; align-items: start; }
.px-card { display: flex; flex-direction: column; min-width: 0; padding: 16px 16px 12px; border-radius: 12px; transition: opacity .15s, box-shadow .15s; }
.px-card.is-sel { border-color: #9FB0FF; box-shadow: 0 0 0 1px #9FB0FF; }
.px-chead { display: flex; align-items: center; gap: 12px; min-height: 48px; margin-bottom: 12px; }
.px-pf { width: 40px; height: 40px; flex: none; }
.px-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.px-who b { font-size: 15px; font-weight: 700; color: var(--text); }
.px-who span { font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-mw { position: relative; flex: none; }
.px-mw > .pm-menu { right: 0; left: auto; top: calc(100% + 6px); min-width: 210px; }
.px-edit.btn-outline { height: 36px; padding: 0 18px; font-size: 14.5px; font-weight: 600; border-color: #9FB0FF; color: var(--indigo); box-shadow: none; }
.px-pic { position: relative; aspect-ratio: var(--px-shape, 16 / 10); max-height: 340px; border-radius: 10px; overflow: hidden; background: var(--track); }
.px-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.px-pic .px-play { position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; border-radius: 50%; background: rgba(14, 27, 61, .6); color: #fff;
  display: grid; place-items: center; }
.px-pic .px-play .i { font-size: 20px; }
.px-nomedia { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%; min-height: 150px;
  background: linear-gradient(160deg, #1B2B6B, #3B5BFD); color: #fff; font-size: 14px; font-weight: 600; }
.px-nomedia .i { font-size: 22px; }
.px-body { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; min-width: 0; }
.px-p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.px-p b { font-weight: 700; }
.px-p.is-lead { font-weight: 700; }
.px-p.is-empty { color: var(--muted); font-style: italic; }
.px-tag { color: var(--indigo); }
.px-acts { display: flex; align-items: center; gap: 16px; color: var(--text); }
.px-acts .i { font-size: 23px; }
.px-acts .end { margin-left: auto; }
.px-acts.is-row { flex-wrap: wrap; gap: 6px 16px; padding-top: 8px; border-top: 1px solid var(--border-soft); font-size: 13.5px; color: var(--text-2); }
.px-acts.is-row span { display: inline-flex; align-items: center; gap: 6px; }
.px-acts.is-row .i { font-size: 17px; color: var(--text-2); }
.px-linkcard { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: #F7F8FC;
  font-size: 13.5px; color: var(--text-2); }
.px-linkcard .i { font-size: 16px; color: var(--muted); flex: none; }
.px-linkcard span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-cta { flex: none; padding: 4px 10px; border-radius: 6px; background: #E4E8F2; font-size: 12.5px; font-weight: 700; color: var(--text); }
.px-comment { margin: 0; padding: 8px 10px; border-radius: 8px; background: #F7F8FC; font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.px-foot { display: flex; align-items: flex-start; gap: 6px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--border-soft); font-size: 12.5px; font-weight: 600; }
.px-foot .i { font-size: 15px; flex: none; margin-top: 1px; }
.px-foot.is-ok { color: var(--green-text); }
.px-foot.is-fail { color: #C0263D; }
.px-foot.is-warn { color: var(--amber-text); }
.px-foot a { color: inherit; }
/* the side cards */
.px-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.px-vars, .px-val { padding: 16px 18px; border-radius: 12px; }
.px-sh { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.px-sh h2, .px-val h2 { flex: 1 1 auto; margin: 0; font-size: 19px; font-weight: 800; color: var(--text); }
.px-vcount { font-size: 14px; color: var(--indigo); white-space: nowrap; }
.px-nav { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text-2); cursor: pointer; }
.px-nav:hover:not(:disabled) { border-color: var(--indigo); color: var(--indigo); }
.px-nav:disabled { opacity: .45; cursor: default; }
.px-nav .i { font-size: 16px; }
.px-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.px-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 6px 6px 8px; border: 2px solid transparent; border-radius: 10px;
  background: none; font: inherit; text-align: left; cursor: pointer; }
.px-tile:hover { background: var(--indigo-bg-2); }
.px-tile.is-on { border-color: var(--indigo); background: #fff; }
.px-tile:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.px-timg { display: block; width: 100%; aspect-ratio: 16 / 7; margin-bottom: 6px; border-radius: 8px; overflow: hidden; background: var(--track); }
.px-timg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.px-tile b { font-size: 14px; font-weight: 700; color: var(--text); }
.px-tile span, .px-tile small { max-width: 100%; font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-tile small { font-size: 12px; color: var(--muted); }
.px-vlink { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--indigo); text-decoration: none; }
.px-vlink .i { font-size: 14px; }
.px-vlink:hover { text-decoration: underline; }
.px-val h2 { margin-bottom: 6px; }
.px-checks { list-style: none; margin: 0; padding: 0; }
.px-check { display: flex; align-items: flex-start; gap: 14px; padding: 9px 0; border-top: 1px solid var(--border-soft); }
.px-check:first-child { border-top: 0; }
.px-check[data-check="ready"] { margin-top: 4px; border-top-color: var(--border); }
.px-ci { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; }
.px-ci .i { font-size: 14px; stroke-width: 3; }
.px-check.is-ok .px-ci { background: var(--green); }
.px-check.is-fail .px-ci { background: #E5484D; }
.px-check.is-warn .px-ci { background: var(--amber); }
.px-cb { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.px-cb > b { font-size: 14.5px; font-weight: 700; color: var(--text); }
.px-cb > span { font-size: 13.5px; color: var(--text-2); }
.px-probs { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.px-probs li { padding: 7px 10px; border-radius: 8px; background: #FFF1F2; font-size: 13px; line-height: 1.4; color: #9F1F33; overflow-wrap: anywhere; }
.px-probs.is-warn li, .px-probs li.is-warn { background: #FFF7E8; color: var(--amber-text); }
.px-probs a { font-weight: 600; color: inherit; }
.px-empty { padding: 8px; border-radius: 12px; }
@media (max-width: 1200px) {
  .px-grid { grid-template-columns: minmax(0, 1fr); }
  .px-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 768px) {
  .px-head { flex-wrap: wrap; align-items: flex-start; }
  .px-head .po-actions { flex-wrap: wrap; }
  .px-side { grid-template-columns: minmax(0, 1fr); }
  .px-cards { grid-template-columns: minmax(0, 1fr); }
}
.px-empty .es { border: 0; box-shadow: none; }

/* ---------- Promotion-15 · Distribution schedule (ds- this screen: the wizard's Schedule step — the head with Save as draft / Schedule posts, the cards "1. When do you want to publish?" (Publish now · Specific time · Saved time slots, disabled until P33), "2. Set date and time" (date, local time, the IANA time zone select, Recalculate times) and "3. Platform schedule" (per account: local time, zone with the date's offset, UTC, expiry, Provider / MindGrind with the scheduling owner, status, own time), and the right cards Schedule summary, Conflicts and notes, Saved time slots) — plans/Promotion-15.md, prototype/gen/promotion15.css ---------- */
.ds-head { align-items: center; padding: 8px 4px 14px; }
.ds-head .po-btn { height: 44px; padding: 0 22px; font-size: 15.5px; }
.ds-head .po-btn.btn-outline { border-color: #9FB0FF; }
.ds-banner { margin-bottom: 12px; }
.ds-banner.is-info { background: #EEF3FF; border-color: #DCE4FF; color: #2940C8; }
.ds-muted { color: var(--muted); }
.ds-grid { display: grid; grid-template-columns: minmax(0, 1fr) 384px; gap: 16px; align-items: start; }
.ds-main, .ds-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ds-dyn { display: contents; }
.ds-card { padding: 16px 18px; border-radius: 12px; min-width: 0; }
.ds-card h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 18px; font-weight: 700; color: var(--text); }
.ds-card h2 > .i { font-size: 21px; color: var(--indigo); }
.ds-conf h2 > .i { color: var(--amber); }
.ds-count { margin-left: auto; font-size: 13.5px; font-weight: 500; color: var(--muted); }
/* 1. when */
.ds-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ds-opt { position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 68px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px;
  background: #fff; cursor: pointer; }
.ds-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ds-dot { width: 20px; height: 20px; margin-top: 1px; border: 2px solid #B8BFCF; border-radius: 50%; flex: none; background: #fff; }
.ds-opt.is-on { border-color: #9FB0FF; background: var(--indigo-bg); }
.ds-opt.is-on .ds-dot { border-color: var(--indigo); box-shadow: inset 0 0 0 4px #fff; background: var(--indigo); }
.ds-opt:focus-within { box-shadow: 0 0 0 3px rgba(59, 91, 253, .18); }
.ds-opt.is-off { cursor: not-allowed; background: #FAFBFC; }
.ds-opt.is-off .ds-ot { opacity: .6; }
.ds-ot { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ds-ot b { font-size: 15px; font-weight: 600; color: var(--text); }
.ds-opt.is-on .ds-ot b { color: var(--indigo); }
.ds-ot span { font-size: 13.5px; color: var(--text-2); }
.ds-nownote { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: #FFF7E8; color: var(--amber-text);
  font-size: 13.5px; line-height: 1.45; }
.ds-nownote .i { font-size: 16px; flex: none; margin-top: 1px; }
/* 2. date and time */
.ds-fields { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 16px; }
.ds-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 14px; color: var(--text-2); }
.ds-in { position: relative; display: flex; align-items: center; }
.ds-in > .i:first-child { position: absolute; left: 14px; font-size: 17px; color: var(--muted); pointer-events: none; }
.ds-in input, .ds-in select { width: 100%; height: 44px; padding: 0 12px 0 42px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font: inherit;
  font-size: 15px; color: var(--text); appearance: none; }
.ds-in.is-sel select { padding-right: 34px; cursor: pointer; }
.ds-in.is-sel > .i:last-child { position: absolute; right: 12px; font-size: 16px; color: var(--muted); pointer-events: none; }
.ds-in input:focus, .ds-in select:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, .14); }
.ds-in input:disabled, .ds-in select:disabled { background: #FAFBFC; color: var(--muted); }
.ds-f.is-invalid input, .ds-f.is-invalid select { border-color: #E5484D; }
.ds-ferr { font-size: 12.5px; color: #C0263D; }
.ds-inforow { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.ds-info { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: var(--text-2); }
.ds-info .i { font-size: 17px; color: var(--indigo); flex: none; }
.ds-recalc.btn-outline { flex: none; height: 40px; padding: 0 16px; gap: 8px; font-size: 14.5px; font-weight: 600; border-color: #9FB0FF; color: var(--indigo); box-shadow: none; }
.ds-recalc .i { font-size: 16px; }
#ds-when.is-muted .ds-fields { opacity: .5; }
/* 3. the platform schedule */
.ds-tablecard { padding-bottom: 8px; }
.ds-scroll { position: relative; overflow-x: auto; }
.ds-table { width: 100%; min-width: 860px; border-collapse: collapse; table-layout: fixed; }
.ds-table th { height: 40px; padding: 0 8px; text-align: left; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--text-2); background: #F7F8FC; }
.ds-table th:first-child { border-radius: 8px 0 0 8px; }
.ds-table th:last-child { border-radius: 0 8px 8px 0; }
.ds-table td { padding: 9px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; font-size: 13.5px; color: var(--text); }
.ds-table tr:last-child td { border-bottom: 0; }
.ds-table .c-sel { width: 34px; }
.ds-table .c-acct { width: 17%; }
.ds-table .c-local, .ds-table .c-utc, .ds-table .c-exp { width: 11.5%; white-space: nowrap; }
.ds-when { display: flex; flex-direction: column; }
.ds-when span { font-size: 13px; color: var(--text-2); }
.ds-when b { font-size: 14px; font-weight: 600; color: var(--text); }
.ds-table .c-zone { width: 17%; }
.ds-table .c-via { width: 13%; }
.ds-table .c-stat { width: 11%; }
.ds-table .c-more { width: 40px; text-align: right; }
.ds-table input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--indigo); cursor: pointer; }
.ds-acct { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ds-pf { width: 30px; height: 30px; flex: none; }
.ds-acct div { display: flex; flex-direction: column; min-width: 0; }
.ds-acct b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-acct span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-table .c-zone b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-table .c-zone span, .ds-table .c-via small, .ds-table .c-local small { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-table .c-local small { color: var(--indigo); }
.ds-row.is-off td:not(.c-sel):not(.c-more) { color: var(--muted); }
.ds-row.is-off .ds-pf { opacity: .5; }
.ds-row.is-bad td { background: #FFF8F8; }
.ds-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ds-chip.is-green { background: var(--green-bg); color: var(--green-text); }
.ds-chip.is-red { background: #FDECEE; color: #C0263D; }
.ds-chip.is-amber { background: var(--amber-bg); color: var(--amber-text); }
.ds-chip.is-grey { background: #F1F2F6; color: var(--muted); }
.ds-chip.is-blue, .ds-chip.is-indigo { background: var(--indigo-bg); color: var(--indigo); }
.ds-chip.is-violet { background: #F1ECFF; color: #6B3FD6; }
.ds-mw { position: relative; display: inline-block; }
.ds-table .pl-ibtn { border-color: transparent; background: none; }
.ds-mw > .pm-menu { right: 0; left: auto; top: calc(100% + 4px); min-width: 210px; }
/* the right cards */
.ds-dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; }
.ds-dl dt { padding: 6px 0; font-size: 14px; color: var(--text-2); }
.ds-dl dd { margin: 0; padding: 6px 0; font-size: 14px; font-weight: 600; color: var(--text); text-align: right; overflow-wrap: anywhere; }
.ds-cf { display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.45; }
.ds-cf:first-child { margin-top: 0; }
.ds-cf .i { font-size: 17px; flex: none; margin-top: 1px; }
.ds-cf.is-block { background: #FFF1F2; color: #9F1F33; }
.ds-cf.is-note { background: #FFF7E8; color: var(--amber-text); }
.ds-cf.is-ok { background: none; padding: 6px 0 0; color: var(--text-2); }
.ds-cf.is-ok .i { color: var(--green); font-size: 22px; }
.ds-cf.is-ok b { display: block; color: var(--text); font-size: 14.5px; }
.ds-cf a { font-weight: 600; color: inherit; }
.ds-sempty.es { flex-direction: column; align-items: flex-start; text-align: left; gap: 0; padding: 6px 0 4px; min-height: 0; }
.ds-sempty h3 { font-size: 15px; margin-bottom: 4px; }
.ds-sempty p { font-size: 13.5px; }
.ds-sempty .il { display: none; }
.ds-newslot { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 0; border: 0; background: none; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--indigo); }
.ds-newslot:disabled { opacity: .5; cursor: not-allowed; }
.ds-newslot .i { font-size: 17px; }
@media (max-width: 1280px) {
  .ds-grid { grid-template-columns: minmax(0, 1fr); }
  .ds-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 768px) {
  .ds-head { flex-wrap: wrap; align-items: flex-start; }
  .ds-head .po-actions { flex-wrap: wrap; }
  .ds-opts, .ds-fields, .ds-side { grid-template-columns: minmax(0, 1fr); }
  .ds-inforow { flex-wrap: wrap; }
}

/* ---------- Promotion-16 · Posting calendar (kc- this screen: the page "Publishing / Calendar" — the head with Create post / ⋯, the calendar card with the account and status selects, the range button and its popover, the Day · Week · Month · List switch, the status legend with words, the zone line, the hour grid of Day / Week with thumbnail events in lanes, the month cells with chips, the list table, the empty and no-results states, the drawer of the selected destination with its picture, caption, facts, actions, the Reschedule form and the notes, and the move summary dialog) — plans/Promotion-16.md, prototype/gen/promotion16.css ---------- */
.kc-root { --kc-hour: 28px; display: grid; grid-template-columns: minmax(0, 1fr) 412px; gap: 16px; align-items: start; }
.kc-root.no-drawer { grid-template-columns: minmax(0, 1fr); }
.kc-root.no-drawer .kc-drawer { display: none; }
.kc-main { min-width: 0; }
.kc-head { align-items: center; padding: 8px 4px 14px; }
.kc-head .po-btn { height: 44px; padding: 0 22px; font-size: 15.5px; }
.kc-more { position: relative; }
.kc-more .pl-ibtn { width: 46px; height: 44px; }
.kc-more .pm-menu { right: 0; top: calc(100% + 6px); min-width: 220px; }
.kc-card { padding: 14px 16px 16px; border-radius: 12px; min-width: 0; }
/* the toolbar: the account and status selects, the range */
.kc-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kc-sel { position: relative; display: inline-flex; align-items: center; height: 42px; min-width: 198px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.kc-sel > .i:first-child { position: absolute; left: 12px; font-size: 18px; color: var(--text-2); pointer-events: none; }
.kc-sel > .i:last-child { position: absolute; right: 12px; font-size: 16px; color: var(--muted); pointer-events: none; }
.kc-sel select { appearance: none; width: 100%; height: 100%; padding: 0 36px 0 40px; border: 0; background: transparent; font: inherit; font-size: 14.5px; font-weight: 500; color: var(--text); cursor: pointer; }
.kc-sel:focus-within { border-color: #9FB0FF; box-shadow: 0 0 0 3px var(--indigo-bg); }
.kc-rangew { position: relative; margin-left: auto; }
.kc-range { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--text); cursor: pointer; white-space: nowrap; }
.kc-range .i { font-size: 18px; color: var(--text-2); }
.kc-range .i:last-child { font-size: 16px; color: var(--muted); margin-left: 6px; }
.kc-range:hover, .kc-range[aria-expanded="true"] { border-color: #9FB0FF; }
.kc-rpop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 25; width: 330px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(14, 27, 61, .14); }
.kc-rpop[hidden] { display: none; }
.kc-rnav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; }
.kc-rnav .btn-outline { height: 36px; padding: 0 10px; font-size: 13.5px; gap: 4px; justify-content: center; white-space: nowrap; }
.kc-rnav .i { font-size: 15px; }
.kc-rgo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 13.5px; color: var(--text-2); }
.kc-rgo input { height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13.5px; }
/* the view switch and the legend */
.kc-row2 { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.kc-views { display: inline-grid; grid-template-columns: repeat(4, 82px); height: 40px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface); }
.kc-views button, .kc-views a { display: grid; place-items: center; border: 0; border-left: 1px solid var(--border); background: transparent; font: inherit; font-size: 14px;
  font-weight: 500; color: var(--text-2); cursor: pointer; text-decoration: none; }
.kc-views button:first-child, .kc-views a:first-child { border-left: 0; }
.kc-views button:hover, .kc-views a:hover { background: var(--indigo-bg-2); }
.kc-views button.is-on, .kc-views a.is-on { background: var(--indigo-bg); color: var(--indigo); font-weight: 600; }
.kc-views button:focus-visible, .kc-views a:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
.kc-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 0 auto; padding: 0; list-style: none; font-size: 13px; color: var(--text-2); }
.kc-legend li { display: inline-flex; align-items: center; gap: 7px; }
.kc-dot { display: inline-block; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--grey); }
.kc-dot.is-scheduled { background: var(--green); }
.kc-dot.is-published, .kc-dot.is-publishing { background: var(--indigo); }
.kc-dot.is-approval { background: var(--amber); }
.kc-dot.is-attention { background: var(--red); }
.kc-dot.is-draft { background: #A8AFBF; }
.kc-zone { display: flex; align-items: center; gap: 6px; margin: 10px 0 8px; font-size: 12.5px; color: var(--muted); }
.kc-zone .i { font-size: 14px; }
.kc-zhint { margin-left: 8px; padding-left: 10px; border-left: 1px solid var(--border); }
/* Day / Week: the hour grid */
.kc-grid { --hour: var(--kc-hour); border: 1px solid var(--track); border-radius: 10px; overflow: hidden; }
.kc-grid[hidden] { display: none; }
.kc-heads { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--track); background: var(--surface); }
.kc-day .kc-heads { grid-template-columns: 56px minmax(0, 1fr); }
.kc-dh { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 58px; border-left: 1px solid var(--track); }
.kc-dh span { font-size: 12.5px; color: var(--muted); }
.kc-dh b { font-size: 15px; font-weight: 700; color: var(--text); }
.kc-dh.is-today b { color: var(--indigo); }
.kc-dh.is-today span { color: var(--indigo); }
.kc-scroll { position: relative; height: 432px; overflow-y: auto; overscroll-behavior: contain; }
.kc-canvas { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); height: calc(var(--hour) * 24); }
.kc-hours { position: relative; }
.kc-hl { position: absolute; left: 0; width: 50px; text-align: right; transform: translateY(-50%); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.kc-hl:first-child { transform: none; }
.kc-cols { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  background-image: repeating-linear-gradient(to bottom, var(--track) 0, var(--track) 1px, transparent 1px, transparent calc(var(--hour) * 2)),
    repeating-linear-gradient(to bottom, transparent 0, transparent var(--hour), #F2F4F8 var(--hour), #F2F4F8 calc(var(--hour) + 1px), transparent calc(var(--hour) + 1px), transparent calc(var(--hour) * 2)); }
.kc-day .kc-cols { grid-template-columns: minmax(0, 1fr); }
.kc-col { position: relative; border-left: 1px solid var(--track); min-width: 0; }
.kc-col.is-today { background: rgba(59, 91, 253, .025); }
.kc-col.is-drop { background: rgba(59, 91, 253, .07); }
.kc-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--red); pointer-events: none; z-index: 3; }
.kc-now::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
/* an event */
.kc-ev { --lane: 0; --lanes: 1; position: absolute; z-index: 2; left: calc(3px + (100% - 6px) * var(--lane) / var(--lanes)); width: calc((100% - 6px) / var(--lanes) - 2px);
  height: 92px; display: flex; flex-direction: column; gap: 4px; padding: 4px; border: 1.5px solid #C9CEDB; border-radius: 8px; background: #F5F6FA; text-align: left;
  font: inherit; color: var(--text); cursor: pointer; overflow: hidden; box-shadow: 0 1px 2px rgba(23, 27, 45, .06); }
.kc-ev:hover { box-shadow: 0 4px 12px rgba(23, 27, 45, .12); z-index: 4; }
.kc-ev:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; z-index: 5; }
.kc-ev.is-on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--indigo); z-index: 5; }
.kc-ev[draggable="true"] { cursor: grab; }
.kc-ev.is-dragging { opacity: .45; }
.kc-ev.is-scheduled { border-color: #6FD3AE; background: #ECFDF5; }
.kc-ev.is-published, .kc-ev.is-publishing { border-color: #9DB0FF; background: #EEF3FF; }
.kc-ev.is-approval { border-color: #F7C46C; background: #FFF7E8; }
.kc-ev.is-attention { border-color: #F59AA7; background: #FFF1F2; }
.kc-ev.is-draft { border-color: #C9CEDB; background: #F5F6FA; border-style: dashed; }
.kc-thumb { display: block; height: 36px; flex: none; border-radius: 5px; overflow: hidden; background: #1B2A55; }
.kc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kc-thumb.is-none, .kc-lthumb.is-none { display: grid; place-items: center; background: radial-gradient(120% 110% at 78% 95%, #1E3A8A 0%, #0E1B3D 62%); }
.kc-thumb.is-none .kc-pf, .kc-lthumb.is-none .kc-pf { width: 18px; height: 18px; opacity: .9; }
.kc-evb { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kc-evt { font-size: 12.5px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-evm { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 12px; color: var(--text-2); white-space: nowrap; }
.kc-evm b { font-weight: 600; font-variant-numeric: tabular-nums; }
.kc-pf { width: 16px; height: 16px; flex: none; }
.kc-evl { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11.5px; line-height: 1.2; }
.kc-mark { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--muted);
  box-shadow: 0 1px 2px rgba(23, 27, 45, .12); }
.kc-mark .i { font-size: 12px; }
.kc-ev.is-scheduled .kc-mark { color: var(--green-text); }
.kc-ev.is-published .kc-mark, .kc-ev.is-publishing .kc-mark { color: var(--indigo); }
.kc-ev.is-approval .kc-mark { color: #B45309; }
.kc-ev.is-attention .kc-mark { color: #B42339; }
.kc-ev.is-compact { gap: 3px; padding: 4px; }
.kc-ev.is-compact .kc-thumb { height: 24px; }
.kc-ev.is-compact .kc-evt { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 11.5px; line-height: 1.2; }
.kc-ev.is-compact .kc-evm { gap: 3px; font-size: 11.5px; }
.kc-ev.is-compact .kc-pf { width: 13px; height: 13px; }
.kc-ev.is-compact .kc-evl, .kc-ev.is-compact .kc-mark { display: none; }
.kc-day .kc-ev { height: 64px; flex-direction: row; gap: 10px; padding: 5px 10px 5px 5px; }
.kc-day .kc-thumb, .kc-day .kc-ev.is-compact .kc-thumb { width: 90px; height: auto; }
.kc-day .kc-ev.is-compact .kc-evl, .kc-day .kc-ev.is-compact .kc-mark { display: block; }
.kc-day .kc-ev.is-compact .kc-mark { display: grid; }
.kc-day .kc-evt { font-size: 14px; }
.kc-ghost { position: absolute; z-index: 6; left: 3px; right: 3px; height: 26px; display: grid; place-items: center; border: 2px dashed var(--indigo); border-radius: 8px;
  background: rgba(238, 241, 255, .9); font-size: 12px; font-weight: 700; color: var(--indigo); pointer-events: none; }
/* Month */
.kc-month[hidden] { display: none; }
.kc-mheads { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); font-size: 12.5px; color: var(--muted); text-align: center; padding-bottom: 6px; }
.kc-mgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--track); border-left: 1px solid var(--track); border-radius: 10px; overflow: hidden; }
.kc-mcell { min-height: 88px; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 5px; border-right: 1px solid var(--track); border-bottom: 1px solid var(--track); }
.kc-mcell.is-out { background: #FAFBFD; }
.kc-mcell.is-out .kc-mday { color: var(--muted-2); }
.kc-mcell.is-drop { background: rgba(59, 91, 253, .07); }
.kc-mday { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.kc-mcell.is-today .kc-mday { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--indigo); color: #fff; }
.kc-mchip { display: flex; align-items: center; gap: 5px; min-width: 0; height: 22px; padding: 0 6px; border: 0; border-radius: 5px; background: var(--indigo-bg-2); font: inherit; font-size: 12px;
  color: var(--text); cursor: pointer; text-align: left; }
.kc-mchip b { font-weight: 600; font-variant-numeric: tabular-nums; }
.kc-mchip span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-mchip .kc-dot { width: 8px; height: 8px; }
.kc-mchip:hover, .kc-mchip.is-on { background: var(--indigo-bg); }
.kc-mchip:focus-visible { outline: 2px solid var(--indigo); }
.kc-mmore { align-self: flex-start; padding: 0 6px; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--indigo); cursor: pointer; }
/* List */
.kc-list[hidden] { display: none; }
.kc-ltable { width: 100%; border-collapse: collapse; font-size: 14px; }
.kc-ltable th { height: 38px; padding: 0 10px; background: #F7F8FC; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.kc-ltable td { height: 58px; padding: 0 10px; border-bottom: 1px solid var(--border-soft); }
.kc-lday th { height: 34px; background: var(--surface); font-size: 13px; color: var(--text-2); border-bottom: 1px solid var(--border-soft); }
.kc-lrow { cursor: pointer; }
.kc-lrow:hover, .kc-lrow.is-on { background: var(--indigo-bg-2); }
.kc-ltable .c-t { width: 70px; font-variant-numeric: tabular-nums; }
.kc-ltable .c-a { white-space: nowrap; }
.kc-ltable .c-a .kc-pf { vertical-align: -3px; margin-right: 6px; }
.kc-ltable .c-l { color: var(--text-2); white-space: nowrap; }
.kc-ltable .c-o { width: 80px; text-align: right; }
.kc-lpost { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kc-lthumb { width: 56px; height: 36px; flex: none; border-radius: 6px; overflow: hidden; background: #1B2A55; }
.kc-lthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kc-lopen { height: 32px; padding: 0 12px; font-size: 13px; }
.kc-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  background: var(--track); color: var(--text-2); }
.kc-chip .i { font-size: 13px; }
.kc-chip.is-scheduled { background: var(--green-bg); color: var(--green-text); }
.kc-chip.is-published, .kc-chip.is-publishing { background: var(--indigo-bg); color: var(--indigo); }
.kc-chip.is-approval { background: var(--amber-bg); color: var(--amber-text); }
.kc-chip.is-attention { background: #FDECEF; color: #B42339; }
.kc-empty { margin: 18px 0 6px; }
/* the drawer */
.kc-drawer { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px 18px 18px; border-radius: 12px; }
.kc-dhd { display: flex; align-items: center; gap: 10px; }
.kc-dkind { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--text); }
.kc-dpf { width: 22px; height: 22px; }
.kc-x { margin-left: auto; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--text-2); cursor: pointer; }
.kc-x .i { font-size: 20px; }
.kc-x:hover { background: var(--indigo-bg-2); color: var(--indigo); }
.kc-dtop { display: flex; align-items: center; gap: 12px; }
.kc-dtop h2 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.3px; line-height: 1.2; }
.kc-dwhen { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 14px; color: var(--text-2); }
.kc-dwhen .i { font-size: 17px; color: var(--muted); }
.kc-sep { width: 12px; }
.kc-dacct { display: flex; align-items: center; gap: 7px; margin: -4px 0 0; font-size: 13px; color: var(--muted); }
.kc-dacct .i { font-size: 14px; }
.kc-dacct b { color: var(--text-2); }
.kc-dpic { aspect-ratio: 2.1 / 1; flex: none; border-radius: 10px; overflow: hidden; background: #1B2A55; }
.kc-dpic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kc-dpic .kc-nomedia { height: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; color: #C9D2FF; font-size: 13.5px; }
.kc-dcap { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.kc-dcap p { margin: 0 0 4px; }
.kc-tag { color: var(--indigo); }
.kc-nocap { color: var(--muted); font-style: italic; }
.kc-rnav a.btn-outline { text-decoration: none; }
.kc-facts { margin: 0; padding-top: 10px; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 2px; }
.kc-facts > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; min-height: 25px; font-size: 13.5px; }
.kc-facts dt { color: var(--text-2); }
.kc-facts dd { margin: 0; display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--text); }
.kc-dacts { display: flex; align-items: center; gap: 10px; }
.kc-dacts .btn-primary, .kc-dacts .btn-outline { height: 44px; padding: 0 18px; font-size: 15px; font-weight: 600; gap: 8px; text-decoration: none; }
.kc-dacts .btn-primary { flex: 1 1 0; justify-content: center; }
.kc-dacts .btn-outline { flex: 1 1 0; justify-content: center; border-color: #9FB0FF; color: var(--indigo); }
.kc-dacts .i { font-size: 18px; }
.kc-dmore { position: relative; }
.kc-dmore .pl-ibtn { width: 46px; height: 44px; }
.kc-dmore .pm-menu { right: 0; top: auto; bottom: calc(100% + 6px); min-width: 220px; }
.kc-dnote { display: flex; gap: 10px; padding: 12px 14px; border-radius: 10px; background: #F4F6FF; font-size: 13px; color: var(--text-2); }
.kc-dnote > .i { flex: none; font-size: 18px; color: var(--indigo); margin-top: 1px; }
.kc-dnote b { display: block; font-size: 13.5px; color: var(--text); margin-bottom: 2px; }
.kc-dwarn { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-style: normal; font-size: 12.5px; color: #8A5A12; }
.kc-dwarn .i { flex: none; font-size: 14px; margin-top: 1px; }
.kc-dnote.is-warn { background: #FFF7E8; }
.kc-dnote.is-warn > .i { color: #B45309; }
.kc-dnote.is-lock { background: #F5F6FA; }
.kc-dnote.is-lock > .i { color: var(--text-2); }
.kc-rform { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; }
.kc-rform[hidden] { display: none; }
.kc-rf { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.kc-rf label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.kc-rf input { height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; min-width: 0; }
.kc-rf input:focus { outline: none; border-color: #9FB0FF; box-shadow: 0 0 0 3px var(--indigo-bg); }
.kc-rbtns { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.kc-rbtns button { height: 38px; padding: 0 14px; font-size: 14px; }
.kc-dempty { padding: 24px 0; }
/* the move summary dialog */
.dg.kc-move { width: min(620px, calc(100vw - 32px)); }
.kc-mtable { width: 100%; margin: 6px 0 4px; border-collapse: collapse; font-size: 13.5px; }
.kc-mtable th { height: 34px; padding: 0 10px; background: #F7F8FC; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.kc-mtable td { padding: 8px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.kc-mtable td:first-child { color: var(--text-2); width: 118px; }
.kc-mtable .is-new { font-weight: 700; color: var(--indigo); }
.kc-mlist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.kc-mlist li { display: flex; gap: 8px; padding: 9px 12px; border-radius: 8px; font-size: 13.5px; }
.kc-mlist li .i { flex: none; font-size: 16px; margin-top: 1px; }
.kc-mlist .is-block { background: #FFF1F2; color: #9F1D33; }
.kc-mlist .is-note, .kc-mlist .is-reapproval { background: #FFF7E8; color: #7A4B0C; }
.kc-mlist .is-ok { background: #ECFDF5; color: var(--green-text); }
@media (max-width: 1280px) {
  .kc-root { grid-template-columns: minmax(0, 1fr); }
  .kc-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(440px, 100vw); overflow-y: auto; border-radius: 0; box-shadow: -8px 0 32px rgba(14, 27, 61, .18); }
  .kc-root.no-drawer .kc-drawer, .kc-drawer[hidden] { display: none; }
}
@media (max-width: 768px) {
  .kc-head { flex-wrap: wrap; }
  .kc-sel { min-width: 0; flex: 1 1 150px; }
  .kc-rangew { margin-left: 0; flex: 1 1 100%; }
  .kc-range { width: 100%; justify-content: space-between; }
  .kc-rpop { left: 0; right: auto; width: 100%; }
  .kc-views { grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .kc-legend { margin-left: 0; gap: 12px; }
  .kc-zhint { display: none; }
  .kc-week { overflow-x: auto; }
  .kc-week .kc-heads, .kc-week .kc-scroll { min-width: 760px; }
  .kc-mcell { min-height: 64px; }
  .kc-mchip { padding: 0 3px; }
  .kc-mchip b, .kc-mchip span:last-child { display: none; }
  .kc-list { overflow-x: auto; }
  .kc-ltable { min-width: 600px; }
  .kc-drawer { top: 56px; bottom: calc(64px + env(safe-area-inset-bottom)); }
}
/* ---------- Promotion-17 · Publishing approval center (aq- this screen: the page "Publishing / Approvals" — the head with the filter / account selects and the search, the list card with the posts awaiting approval (picture, title, destination, submitter, target count, scheduled time, version, status) and its sort, the "How approvals work" card, and the detail panel with the tabs Preview (Promotion-14's simulated card beside the Scheduled time, Target accounts and Change summary cards), Target accounts (the exact list) and Change summary (Approved · Now), the decision footer with the scope note and the decided / expired / read-only states) — plans/Promotion-17.md, prototype/gen/promotion17.css ---------- */
.aq-root { min-width: 0; }
.aq-head { align-items: center; padding: 6px 4px 14px; gap: 16px; }
.aq-tools { display: flex; align-items: center; gap: 12px; flex: none; }
.aq-sel { position: relative; display: inline-flex; align-items: center; height: 44px; width: 206px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.aq-sel > .i:first-child { position: absolute; left: 12px; font-size: 18px; color: var(--text-2); pointer-events: none; }
.aq-sel > .i:last-child { position: absolute; right: 12px; font-size: 16px; color: var(--muted); pointer-events: none; }
.aq-sel select { appearance: none; width: 100%; height: 100%; padding: 0 34px 0 40px; border: 0; background: transparent; font: inherit; font-size: 14.5px; font-weight: 500; color: var(--text); cursor: pointer; }
.aq-sel:focus-within, .aq-search:focus-within { border-color: #9FB0FF; box-shadow: 0 0 0 3px var(--indigo-bg); }
.aq-search { position: relative; display: inline-flex; align-items: center; height: 44px; width: 250px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.aq-search > .i { position: absolute; left: 13px; font-size: 18px; color: var(--muted); pointer-events: none; }
.aq-search input { width: 100%; height: 100%; padding: 0 12px 0 42px; border: 0; background: transparent; font: inherit; font-size: 14.5px; color: var(--text); }
.aq-search input:focus { outline: none; }
.aq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(540px, 640px); gap: 16px; align-items: start; }
.aq-grid.no-panel { grid-template-columns: minmax(0, 1fr); }
.aq-grid.no-panel .aq-panel { display: none; }
.aq-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
/* the list card */
.aq-list { padding: 14px 16px 16px; border-radius: 12px; }
.aq-lhead { display: flex; align-items: center; gap: 4px 12px; margin-bottom: 12px; flex-wrap: wrap; }
.aq-lhead h2 { flex: 1 1 auto; margin: 0; font-size: 17px; font-weight: 700; }
.aq-sort { white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 6px; border: 0; background: none; font: inherit; font-size: 14px; color: var(--text-2); cursor: pointer; border-radius: 6px; }
.aq-sort b { font-weight: 600; color: var(--indigo); }
.aq-sort .i { font-size: 16px; color: var(--indigo); }
.aq-sort:hover { background: var(--indigo-bg-2); }
.aq-sort.is-up .i { transform: rotate(180deg); }
.aq-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.aq-row { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr) 76px 128px 92px; align-items: center; gap: 14px; min-height: 118px; padding: 10px 14px 10px 12px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; }
.aq-row:hover { border-color: #C9D2FF; }
.aq-row:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.aq-row.is-on { border: 2px solid var(--indigo); background: #F7F8FF; padding: 9px 13px 9px 11px; }
.aq-row[hidden] { display: none; }
.aq-pic { width: 112px; height: 88px; border-radius: 8px; overflow: hidden; background: #1B2A55; display: grid; place-items: center; }
.aq-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aq-pic.is-none { background: radial-gradient(120% 110% at 78% 95%, #1E3A8A 0%, #0E1B3D 62%); }
.aq-pic.is-none .aq-pf { width: 30px; height: 30px; }
.aq-rmain { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.aq-rtitle { font-size: 16px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aq-rplat { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-2); min-width: 0; white-space: nowrap; overflow: hidden; }
.aq-rplat > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.aq-rplat i { font-style: normal; margin: 0 5px; color: var(--muted-2); }
.aq-pf { width: 16px; height: 16px; flex: none; }
.aq-more { flex: none; margin-left: 4px; padding: 0 6px; border-radius: 5px; background: var(--track); font-size: 12px; font-weight: 600; }
.aq-who { display: flex; align-items: center; gap: 9px; margin-top: 4px; min-width: 0; }
.aq-av { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #E8ECFF; color: var(--indigo); font-size: 12px; font-weight: 700; }
.aq-who b { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aq-who small { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aq-who > span:last-child { min-width: 0; }
.aq-rcol { display: flex; flex-direction: column; gap: 3px; align-self: start; padding-top: 6px; min-width: 0; }
.aq-rcol b { font-size: 14.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.aq-lbl { display: block; font-size: 12.5px; color: var(--muted); }
.aq-rend { align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; padding: 6px 0 4px; }
.aq-ver { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 12px; background: var(--indigo-bg); color: var(--indigo); font-size: 12.5px; font-weight: 600; }
.aq-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border-radius: 13px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  background: var(--track); color: var(--text-2); }
.aq-chip .i { font-size: 13px; }
.aq-chip.is-amber { background: var(--amber-bg); color: var(--amber-text); }
.aq-chip.is-green { background: var(--green-bg); color: var(--green-text); }
.aq-chip.is-red { background: #FDECEF; color: #B42339; }
.aq-chip.is-blue { background: var(--indigo-bg); color: var(--indigo); }
.aq-empty { margin: 12px 0 4px; }
/* the info card */
.aq-how { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; border-radius: 12px; background: #F1F4FF; border: 1px solid #E3E8FF; }
.aq-howi { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--indigo); color: var(--indigo); }
.aq-howi .i { font-size: 15px; }
.aq-how h3 { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.aq-how p { margin: 0; font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
/* the panel */
.aq-panel { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 18px 20px 0; border-radius: 12px; }
.aq-phead { display: flex; align-items: flex-start; gap: 12px; }
.aq-pt { flex: 1 1 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.aq-pt h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.3px; line-height: 1.2; }
.aq-pacts { display: flex; align-items: center; gap: 4px; }
.aq-pmore { position: relative; }
.aq-ibtn { width: 36px; height: 36px; border: 0; background: none; }
.aq-pmore .pm-menu { right: 0; top: calc(100% + 4px); min-width: 210px; }
.aq-x { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--text-2); cursor: pointer; }
.aq-x .i { font-size: 20px; }
.aq-x:hover { background: var(--indigo-bg-2); color: var(--indigo); }
.aq-psub { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 14px; color: var(--text-2); }
.aq-psub i { font-style: normal; margin: 0 4px; color: var(--muted-2); }
.aq-psub .aq-ver { margin-left: 6px; }
.aq-tabs { display: flex; gap: 6px; margin-top: 14px; border-bottom: 1px solid var(--border); }
.aq-tabs button { height: 44px; padding: 0 16px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; font: inherit; font-size: 14.5px; font-weight: 500;
  color: var(--text-2); cursor: pointer; }
.aq-tabs button.is-on { color: var(--indigo); border-bottom-color: var(--indigo); font-weight: 600; }
.aq-tabs button:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
.aq-tp { flex: 1 1 auto; min-height: 0; padding: 14px 0; }
.aq-tp[hidden] { display: none; }
.aq-dsw { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.aq-dchip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); font: inherit;
  font-size: 13px; color: var(--text-2); cursor: pointer; }
.aq-dchip.is-on { border-color: var(--indigo); background: var(--indigo-bg); color: var(--indigo); font-weight: 600; }
.aq-pgrid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: start; }
.aq-prev .px-card { margin: 0; }
.aq-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.aq-scard { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; }
.aq-sic { width: 36px; flex: none; color: var(--text-2); }
.aq-sic .i { font-size: 26px; }
.aq-scard > div { min-width: 0; flex: 1 1 auto; }
.aq-scard b { display: block; margin-top: 3px; font-size: 15.5px; font-weight: 700; }
.aq-tl { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.aq-tl li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); }
.aq-tl i { font-style: normal; margin: 0 4px; color: var(--muted-2); }
.aq-cl { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; color: var(--text-2); }
.aq-cl.is-full { font-size: 14px; }
.aq-cintro { margin: 0 0 6px; font-size: 14px; color: var(--text); }
.aq-dest { margin-top: 14px; }
.aq-dest h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 14px; }
.aq-diff, .aq-ttable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.aq-diff th, .aq-ttable th { height: 34px; padding: 0 10px; background: #F7F8FC; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.aq-diff td, .aq-ttable td { padding: 9px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.aq-diff td:first-child { width: 100px; color: var(--text-2); }
.aq-diff .is-new { color: var(--text); font-weight: 600; }
.aq-diff .is-old { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(107, 114, 128, .5); }
.aq-ttable td small { display: block; font-size: 12px; color: var(--muted); }
.aq-ttable .c-time { white-space: nowrap; }
.aq-ttable th, .aq-ttable td { padding-left: 7px; padding-right: 7px; }
.aq-tscroll { overflow-x: auto; }
.aq-tacct { display: flex; align-items: center; gap: 8px; }
.aq-tacct b { display: block; font-size: 13.5px; }
.aq-tacct span { display: block; font-size: 12.5px; color: var(--muted); }
.aq-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--green-text); font-weight: 600; }
.aq-bad { color: #9F1D33; font-size: 12.5px; }
.aq-foot { position: sticky; bottom: 0; z-index: 3; margin: 0 -20px; padding: 12px 20px 16px; border-top: 1px solid var(--border-soft); border-radius: 0 0 12px 12px; background: var(--surface);
  box-shadow: 0 -10px 18px -14px rgba(14, 27, 61, .25); }
.aq-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.aq-btns .btn-outline, .aq-btns .btn-primary { height: 44px; justify-content: center; font-size: 15px; font-weight: 600; }
.aq-btns .btn-outline { border-color: #9FB0FF; color: var(--indigo); }
.aq-scope { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.aq-tip { display: inline-grid; place-items: center; color: var(--muted); cursor: help; }
.aq-tip .i { font-size: 14px; }
.aq-warn { display: flex; gap: 8px; margin: 0 0 10px; padding: 9px 12px; border-radius: 8px; background: #FFF7E8; color: #7A4B0C; font-size: 13px; }
.aq-warn .i { flex: none; font-size: 16px; margin-top: 1px; }
.aq-state { display: flex; gap: 10px; padding: 12px 14px; border-radius: 10px; background: #F5F6FA; font-size: 13.5px; color: var(--text-2); }
.aq-state > .i { flex: none; font-size: 18px; margin-top: 1px; }
.aq-state b { color: var(--text); }
.aq-state.is-green { background: #ECFDF5; } .aq-state.is-green > .i { color: var(--green-text); }
.aq-state.is-red { background: #FFF1F2; } .aq-state.is-red > .i { color: #B42339; }
.aq-state p { margin: 3px 0 0; }
.aq-state .acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.aq-state .acts a, .aq-state .acts button { height: 36px; padding: 0 12px; font-size: 13.5px; text-decoration: none; }
.aq-pempty { padding: 40px 0; }
.aq-sort { text-decoration: none; }
.aq-rcol b.is-none { color: var(--muted); font-weight: 500; }
.aq-by { margin-left: auto; font-size: 13px; color: var(--muted); }
.aq-note { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.aq-more-link { margin-top: 6px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--indigo); cursor: pointer; }
.aq-bad { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; white-space: nowrap; }
.aq-bad .i { font-size: 14px; }
.aq-probrow td { padding-top: 0; }
.aq-probrow ul { margin: 0; padding: 8px 12px 8px 28px; border-radius: 8px; background: #FAFBFD; font-size: 12.5px; color: #8A5A12; white-space: normal; }
.aq-probrow li.is-bad { color: #9F1D33; }
.aq-noteline { display: block; margin-top: 3px; font-size: 12px; color: #8A5A12; }
.aq-cardw[hidden] { display: none; }
.aq-prev .px-card { box-shadow: none; }
@media (max-width: 1440px) {
  .aq-grid { grid-template-columns: minmax(0, 1fr) minmax(520px, 600px); }
  .aq-row { grid-template-columns: 104px minmax(0, 1fr) 84px 132px; }
  .aq-pic { width: 104px; height: 80px; }
  .aq-rend { grid-column: 2 / -1; flex-direction: row; justify-content: flex-start; gap: 8px; padding: 0; }
  .aq-pgrid { grid-template-columns: 260px minmax(0, 1fr); }
}
@media (max-width: 1280px) {
  .aq-head { flex-wrap: wrap; }
  .aq-grid { grid-template-columns: minmax(0, 1fr); }
  .aq-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(600px, 100vw); overflow-y: auto; border-radius: 0; box-shadow: -8px 0 32px rgba(14, 27, 61, .18); }
  .aq-foot { border-radius: 0; }
  .aq-grid.no-panel .aq-panel, .aq-panel[hidden] { display: none; }
}
@media (max-width: 768px) {
  .aq-tools { flex-wrap: wrap; width: 100%; }
  .aq-sel, .aq-search { width: 100%; }
  .aq-row { grid-template-columns: 88px minmax(0, 1fr); }
  .aq-pic { width: 88px; height: 68px; }
  .aq-rcol { grid-column: 2; padding-top: 0; }
  .aq-rend { grid-column: 2; }
  .aq-pgrid { grid-template-columns: minmax(0, 1fr); }
  .aq-ttable { display: block; overflow-x: auto; }
  .aq-panel { top: 56px; bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* ---------- Promotion-18 · Review distribution (dr- this screen: the wizard's Review step — the head with Back to editing / Save as draft / ⋯, one table card with a row per account variant (the tick, the effective picture, the caption, the destination with its kind, the time, the account's publishing access, the checks from the Promotion-14 validation and the Promotion-15 conflicts, the status chip, the row menu) and the footer sticky to the bottom of the viewport with the counts, the authorization and Schedule package / Publish now with its caret menu) — plans/Promotion-18.md, prototype/gen/promotion18.css ---------- */
.dr-root { min-width: 0; padding-bottom: 8px; }
.dr-head { align-items: flex-end; }
.dr-head .po-actions { align-self: center; }
.dr-more { position: relative; }
.dr-ibtn { width: 50px; height: 42px; border: 1px solid #C9D2FF; border-radius: 8px; background: var(--surface); color: var(--indigo); display: grid; place-items: center; cursor: pointer; }
.dr-ibtn .i { font-size: 20px; }
.dr-ibtn:hover { background: var(--indigo-bg); }
.dr-more .pm-menu, .dr-split .pm-menu { right: 0; left: auto; top: calc(100% + 6px); min-width: 250px; }
.dr-split .pm-menu { top: auto; bottom: calc(100% + 8px); }
.dr-banner { margin: 0 4px 12px; }
/* the table card */
.dr-card { padding: 0 16px 4px; border-radius: 12px; }
.dr-scroll { position: relative; overflow-x: auto; }
.dr-table { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 1060px; }
.dr-table th { height: 52px; padding: 0 10px; text-align: left; font-size: 14.5px; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--border); white-space: nowrap; }
.dr-table td { padding: 12px 10px; vertical-align: middle; border-bottom: 1px solid var(--border-soft, #EEF0F5); }
.dr-table tbody tr:last-child td { border-bottom: 0; }
.dr-table .c-sel { width: 42px; padding-left: 6px; padding-right: 4px; }
.dr-table .c-pic { width: 182px; }
.dr-table .c-cap { width: 17%; }
.dr-table .c-dest { width: 12%; }
.dr-table .c-when { width: 16%; }
.dr-table .c-perm { width: 14%; }
.dr-table .c-chk { width: 15%; }
.dr-table .c-stat { width: 106px; }
.dr-table .c-more { width: 44px; padding-right: 4px; text-align: right; }
.dr-table input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--indigo); cursor: pointer; margin: 0; vertical-align: middle; }
.dr-table input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .45; }
.dr-row.is-off td:not(.c-sel):not(.c-more) { opacity: .55; }
.dr-row.is-locked td:not(.c-more) { background: #FAFBFD; }
.dr-pic { width: 165px; height: 80px; border-radius: 8px; overflow: hidden; background: radial-gradient(120% 110% at 78% 95%, #1E3A8A 0%, #0E1B3D 62%); display: grid; place-items: center; }
.dr-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dr-pic .dr-pf { width: 30px; height: 30px; }
.dr-ct { display: block; font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-cb { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; font-size: 13.5px; line-height: 1.35; color: var(--text-2); }
.dr-dest, .dr-when, .dr-st { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.dr-dest > div, .dr-when > div, .dr-st > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dr-pf { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.dr-dest b, .dr-when b { font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-dest span, .dr-when span { font-size: 13.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-when > .i { font-size: 20px; color: var(--text-2); flex: none; margin-top: 1px; }
.dr-when .is-none { color: var(--muted); font-weight: 500; }
.dr-st > .i { font-size: 19px; flex: none; margin-top: 1px; }
.dr-st b { font-size: 14.5px; font-weight: 600; }
.dr-st span { font-size: 13px; color: var(--text-2); line-height: 1.35; overflow-wrap: anywhere; }
.dr-st.is-ok > .i, .dr-st.is-ok b { color: var(--green-text); }
.dr-st.is-warn > .i, .dr-st.is-warn b { color: var(--amber-text); }
.dr-st.is-fail > .i, .dr-st.is-fail b { color: #B42339; }
.dr-st.is-info > .i, .dr-st.is-info b { color: var(--indigo); }
.dr-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; background: var(--track); color: var(--text-2); }
.dr-chip.is-green { background: var(--green-bg); color: var(--green-text); }
.dr-chip.is-amber { background: var(--amber-bg); color: var(--amber-text); }
.dr-chip.is-red { background: #FDECEF; color: #B42339; }
.dr-chip.is-blue { background: var(--indigo-bg); color: var(--indigo); }
.dr-mw { position: relative; display: inline-block; }
.dr-mw .pm-menu { right: 0; left: auto; min-width: 190px; }
.dr-table .pm-dots { width: 34px; height: 34px; border: 0; background: none; color: var(--text-2); border-radius: 8px; display: grid; place-items: center; cursor: pointer; }
.dr-table .pm-dots:hover { background: var(--indigo-bg-2); color: var(--indigo); }
.dr-table .pm-dots .i { font-size: 20px; }
/* the sticky footer */
.dr-foot { position: sticky; bottom: 12px; z-index: 5; margin-top: 16px; display: flex; align-items: center; gap: 16px 22px; flex-wrap: wrap; padding: 16px 22px; border-radius: 12px;
  box-shadow: 0 8px 28px rgba(22, 34, 72, .10), 0 1px 2px rgba(22, 34, 72, .06); }
.dr-count { flex: 1 1 auto; min-width: 200px; display: flex; flex-direction: column; gap: 3px; }
.dr-count b { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -.3px; }
.dr-count span { font-size: 14px; color: var(--text-2); }
.dr-count .is-bad { color: #B42339; font-weight: 600; }
.dr-auth { display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 360px; }
.dr-auth > .i { font-size: 30px; flex: none; }
.dr-auth b { display: block; font-size: 15px; font-weight: 600; color: var(--text); }
.dr-auth span { display: block; font-size: 13.5px; color: var(--text-2); }
.dr-auth .dr-reason { color: var(--amber-text); font-size: 13px; }
.dr-auth.is-ok > .i { color: var(--green); }
.dr-auth.is-wait > .i { color: var(--amber); }
.dr-auth.is-need > .i { color: var(--amber); }
.dr-btns { display: flex; align-items: center; gap: 12px; flex: none; }
.dr-btns .po-btn { height: 46px; padding: 0 20px; font-size: 15.5px; }
.dr-btns .po-btn.btn-outline { min-width: 186px; justify-content: center; }
.dr-split { position: relative; display: inline-flex; }
.dr-split > .po-btn { border-top-right-radius: 0; border-bottom-right-radius: 0; min-width: 150px; justify-content: center; }
.dr-caret { height: 46px; width: 46px; display: grid; place-items: center; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid rgba(255, 255, 255, .35); padding: 0; }
.dr-caret .i { font-size: 18px; }
.dr-btns .po-btn:disabled, .dr-caret:disabled { opacity: .5; cursor: not-allowed; }
.dr-split.no-caret > .po-btn { border-radius: 8px; }
.dr-note { flex: 1 0 100%; margin: -6px 0 0; text-align: right; font-size: 13px; color: #B42339; }
.dr-note.is-info { color: var(--text-2); }
.dr-open { font-size: 14px; font-weight: 600; color: var(--indigo); text-decoration: none; white-space: nowrap; }
.dr-ro { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); }
.dr-empty { padding: 24px 0; }
@media (max-width: 1280px) {
  .dr-foot { gap: 12px 18px; }
  .dr-auth { max-width: none; flex: 1 1 260px; }
}
@media (max-width: 768px) {
  .dr-head { flex-wrap: wrap; }
  .dr-head .po-actions { flex-wrap: wrap; }
  .dr-foot { position: static; flex-direction: column; align-items: stretch; }
  .dr-count, .dr-auth { flex: 0 0 auto; min-width: 0; }
  .dr-btns { flex-wrap: wrap; }
  .dr-btns .po-btn.btn-outline, .dr-split { flex: 1 1 auto; }
  .dr-split > .po-btn { flex: 1 1 auto; }
  .dr-note { text-align: left; }
}
/* ---------- Promotion-19 · Publishing progress (ru- this screen: the page "Publishing / Runs" — the head with the breadcrumb under the title and Create post / View calendar / ⋯, the Overall progress card (the donut, the title and the counts, the bar with the percentage, the server note, Cancel pending with its scope note), the Publishing steps card (Upload · Fill details · Submit · Verify tiles joined by arrows), the Publishing targets table (content, account, started at, the status chip with its reason, View post / Verify / Retry / Cancel and ⋯), the Live session preview card and the timestamped Recent activity timeline) — plans/Promotion-19.md, prototype/gen/promotion19.css ---------- */
.ru-root { min-width: 0; }
.ru-head { align-items: flex-start; }
.ru-head h1 { margin-bottom: 2px; }
.ru-crumbs { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; font-size: 15px; color: var(--text-2); }
.ru-crumbs a { color: var(--text-2); text-decoration: none; }
.ru-crumbs a:hover { color: var(--indigo); text-decoration: underline; }
.ru-head .po-actions { padding-top: 4px; }
.ru-more { position: relative; }
.ru-ibtn { width: 58px; height: 42px; border: 1px solid #C9D2FF; border-radius: 8px; background: var(--surface); color: var(--indigo); display: grid; place-items: center; cursor: pointer; }
.ru-ibtn .i { font-size: 20px; }
.ru-ibtn:hover { background: var(--indigo-bg); }
.ru-more .pm-menu { right: 0; left: auto; top: calc(100% + 6px); min-width: 260px; }
.ru-grid { display: grid; grid-template-columns: minmax(0, 1fr) 456px; gap: 16px; align-items: start; }
.ru-main, .ru-side { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ru-card { padding: 16px 18px; border-radius: 12px; }
.ru-card > h2 { margin: 0 0 12px; font-size: 17px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 10px; }
.ru-card > h2 .i { font-size: 22px; color: var(--indigo); }
/* overall progress */
.ru-prog { display: grid; grid-template-columns: 116px minmax(0, 1fr) 196px; gap: 18px 22px; align-items: center; }
.ru-donut { position: relative; width: 108px; height: 108px; }
.ru-donut svg { width: 108px; height: 108px; transform: rotate(-90deg); }
.ru-donut .trk { fill: none; stroke: var(--track); stroke-width: 10; }
.ru-donut .val { fill: none; stroke: var(--indigo); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .4s ease; }
.ru-donut.is-done .val { stroke: var(--green); }
.ru-donut.is-bad .val { stroke: var(--amber); }
.ru-dnum { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; }
.ru-dnum b { font-size: 28px; font-weight: 800; color: var(--text); }
.ru-dnum span { font-size: 14px; color: var(--text-2); }
.ru-ptext h3 { margin: 0 0 3px; font-size: 16px; font-weight: 700; color: var(--text); }
.ru-ptext .ru-line { margin: 0; font-size: 14px; color: var(--text-2); }
.ru-barrow { display: flex; align-items: center; gap: 18px; margin: 12px 0 10px; }
.ru-bar { flex: 1 1 auto; height: 12px; border-radius: 6px; background: var(--track); overflow: hidden; }
.ru-bar i { display: block; height: 100%; border-radius: 6px; background: var(--indigo); transition: width .4s ease; }
.ru-pct { font-size: 20px; font-weight: 700; color: var(--text); min-width: 52px; text-align: right; }
.ru-note { margin: 0; font-size: 13.5px; color: var(--text-2); }
.ru-results { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--indigo); text-decoration: none; }
.ru-results:hover { text-decoration: underline; }
.ru-results .i { font-size: 15px; }
.ru-cancel { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.ru-cancel .po-btn { width: 100%; justify-content: center; white-space: nowrap; padding: 0 14px; }
.ru-cancel .po-btn .i { font-size: 20px; }
.ru-cancel .po-btn:disabled { opacity: .5; cursor: not-allowed; }
.ru-cancel p { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.35; }
/* the steps */
.ru-steps { display: flex; align-items: stretch; gap: 0; }
.ru-step { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px; border-radius: 10px; background: #F4F5F8; }
.ru-arrow { flex: none; width: 34px; display: grid; place-items: center; color: var(--muted); }
.ru-arrow .i { font-size: 18px; }
.ru-sico { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--track); color: var(--text-2); }
.ru-sico .i { font-size: 18px; }
.ru-step b { display: block; font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; }
.ru-step .ru-sn { display: block; font-size: 14.5px; color: var(--text); margin-top: 2px; }
.ru-step .ru-ss { display: block; font-size: 13.5px; color: var(--text-2); margin-top: 2px; }
.ru-step.is-done { background: #EEFBF4; }
.ru-step.is-done .ru-sico { background: var(--green); color: #fff; }
.ru-step.is-done .ru-ss { color: var(--green-text); }
.ru-step.is-run { background: var(--indigo-bg); }
.ru-step.is-run .ru-sico { background: none; border: 4px solid #C9D2FF; border-top-color: var(--indigo); animation: ru-spin 1.1s linear infinite; }
.ru-step.is-run .ru-ss { color: var(--indigo); }
.ru-step.is-fail { background: #FDECEF; }
.ru-step.is-fail .ru-sico { background: #F0546A; color: #fff; }
.ru-step.is-fail .ru-ss { color: #B42339; }
@keyframes ru-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ru-step.is-run .ru-sico { animation: none; } }
/* the targets */
.ru-tcard { padding: 14px 16px 6px; }
.ru-scroll { position: relative; overflow-x: auto; }
.ru-table { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 760px; }
.ru-table th { height: 36px; padding: 0 10px; text-align: left; font-size: 13.5px; font-weight: 500; color: var(--text-2); background: #F7F8FC; white-space: nowrap; }
.ru-table th:first-child { border-radius: 8px 0 0 8px; }
.ru-table th:last-child { border-radius: 0 8px 8px 0; }
.ru-table td { padding: 8px 10px; vertical-align: middle; border-bottom: 1px solid var(--border-soft, #EEF0F5); }
.ru-table tbody tr:last-child td { border-bottom: 0; }
.ru-table .c-content { width: 30%; }
.ru-table .c-acct { width: 20%; }
.ru-table .c-at { width: 18%; }
.ru-table .c-stat { width: 17%; }
.ru-table .c-act { width: 15%; }
.ru-content { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ru-pic { width: 58px; height: 34px; flex: none; border-radius: 5px; overflow: hidden; background: radial-gradient(120% 110% at 78% 95%, #1E3A8A 0%, #0E1B3D 62%); display: grid; place-items: center; }
.ru-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ru-pic .ru-pf { width: 16px; height: 16px; }
.ru-content > div, .ru-acct > div, .ru-at { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ru-content b, .ru-acct b { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ru-content span, .ru-acct span, .ru-at span { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; }
.ru-content span .i { font-size: 14px; }
.ru-acct { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ru-pf { width: 22px; height: 22px; flex: none; }
.ru-at b { font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; }
.ru-chip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 14px; font-size: 13px; font-weight: 600; white-space: nowrap; background: var(--track); color: var(--text-2); }
.ru-chip .i { font-size: 15px; }
.ru-chip.is-green { background: var(--green-bg); color: var(--green-text); }
.ru-chip.is-blue { background: var(--indigo-bg); color: var(--indigo); }
.ru-chip.is-amber { background: var(--amber-bg); color: var(--amber-text); }
.ru-chip.is-red { background: #FDECEF; color: #B42339; }
.ru-ring { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #C9D2FF; border-top-color: var(--indigo); animation: ru-spin 1.1s linear infinite; flex: none; }
.ru-why { display: block; margin-top: 4px; font-size: 12.5px; color: var(--text-2); line-height: 1.35; white-space: normal; }
.ru-why.is-bad { color: #B42339; }
.ru-acts { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.ru-acts .btn-outline { height: 34px; padding: 0 14px; font-size: 14px; font-weight: 600; border-color: #C9D2FF; color: var(--indigo); white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; border-radius: 7px; }
.ru-acts .btn-outline:hover { background: var(--indigo-bg); }
.ru-mw { position: relative; display: inline-block; }
.ru-mw .pm-menu { right: 0; left: auto; min-width: 200px; }
.ru-table .pm-dots { width: 32px; height: 32px; border: 0; background: none; color: var(--text-2); border-radius: 8px; display: grid; place-items: center; cursor: pointer; }
.ru-table .pm-dots:hover { background: var(--indigo-bg-2); color: var(--indigo); }
.ru-table .pm-dots .i { font-size: 20px; }
/* the right column */
.ru-live { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: 16px; align-items: start; }
.ru-lpic { width: 184px; height: 126px; border-radius: 8px; overflow: hidden; background: radial-gradient(120% 110% at 78% 95%, #1E3A8A 0%, #0E1B3D 62%); display: grid; place-items: center; }
.ru-lpic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ru-lpic .ru-pf { width: 34px; height: 34px; }
.ru-lt b { display: block; font-size: 15.5px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.ru-lt .ru-lplat { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-2); margin-bottom: 8px; }
.ru-lt .ru-lplat .ru-pf { width: 18px; height: 18px; }
.ru-lt p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.4; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ru-lt .btn-outline { height: 34px; padding: 0 14px; font-size: 14px; font-weight: 600; border-color: #C9D2FF; color: var(--indigo); text-decoration: none; display: inline-flex; align-items: center; border-radius: 7px; }
.ru-lnote { grid-column: 1 / -1; margin: 2px 0 0; font-size: 12.5px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.ru-lnote .i { font-size: 14px; }
.ru-acthead { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ru-acthead h2 { flex: 1 1 auto; margin: 0; font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.ru-acthead h2 .i { font-size: 22px; color: var(--indigo); }
.ru-acthead a { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 500; color: var(--indigo); text-decoration: none; }
.ru-acthead a .i { font-size: 16px; }
.ru-feed { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; }
.ru-feed::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 1px; background: #DCE1F5; }
.ru-feed li { position: relative; display: grid; grid-template-columns: 18px 54px minmax(0, 1fr); gap: 10px; padding: 8px 0; }
.ru-feed li::before { content: ""; position: absolute; left: 0; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--indigo); box-shadow: 0 0 0 3px #fff; }
.ru-feed li.is-bad::before { background: #F0546A; }
.ru-feed li.is-ok::before { background: var(--green); }
.ru-feed time { grid-column: 2; font-size: 13.5px; color: var(--text-2); padding-top: 3px; }
.ru-feed div { grid-column: 3; min-width: 0; }
.ru-feed b { display: block; font-size: 14.5px; font-weight: 600; color: var(--text); }
.ru-feed span { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ru-feed .ru-pf { width: 17px; height: 17px; }
.ru-empty { padding: 20px 0; }
@media (max-width: 1280px) {
  .ru-grid { grid-template-columns: minmax(0, 1fr); }
  .ru-side { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
}
@media (max-width: 768px) {
  .ru-head { flex-wrap: wrap; }
  .ru-head .po-actions { flex-wrap: wrap; }
  .ru-prog { grid-template-columns: 96px minmax(0, 1fr); }
  .ru-cancel { grid-column: 1 / -1; }
  .ru-steps { flex-wrap: wrap; gap: 10px; }
  .ru-step { flex: 1 1 calc(50% - 10px); }
  .ru-arrow { display: none; }
  .ru-side { grid-template-columns: minmax(0, 1fr); }
  .ru-live { grid-template-columns: minmax(0, 1fr); }
  .ru-lpic { width: 100%; }
}

/* ---------- Promotion-20 · Distribution results (rs- this screen: the page "Publishing / Results" — the breadcrumb above the head "Distribution results" with Create post / View calendar (the post scope: the stepper with Results current), four outcome cards (Successful · Pending · Failed · Skipped with a tinted disc, the count and the reason), the list card with the status tabs and their counts, the search, the period and "Retry failed", the table Post · Provider · External URL (+ the provider id) · Attempted at · Status · Evidence (the picture + View post, or the reason with the evidence popover of the run's steps) · Actions (Open post / Verify now / Retry post / Reconnect / Open run / No action and ⋯)) — plans/Promotion-20.md, prototype/gen/promotion20.css ---------- */
.rs-root { min-width: 0; }
.rs-crumbs { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 15px; color: var(--text-2); }
.rs-crumbs a { color: var(--text-2); text-decoration: none; }
.rs-crumbs a:hover { color: var(--indigo); text-decoration: underline; }
.rs-head { align-items: center; margin-bottom: 14px; }
.rs-head h1 { margin-bottom: 2px; }
.rs-scope { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 6px 0 12px; border-radius: 15px; background: var(--indigo-bg); color: var(--indigo); font-size: 13.5px; font-weight: 600; margin: 0 0 12px; }
.rs-scope a { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--indigo); text-decoration: none; }
.rs-scope a:hover { background: #fff; }
.rs-scope .i { font-size: 14px; }
/* the outcome cards */
.rs-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.rs-kpi { display: flex; align-items: center; gap: 22px; min-height: 100px; padding: 14px 20px; border-radius: 12px; }
.rs-disc { flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #EEF0F5; color: var(--text-2); }
.rs-disc > span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #7B8295; color: #fff; }
.rs-disc .i { font-size: 18px; }
.rs-kpi.is-ok .rs-disc { background: #E6F8EF; }
.rs-kpi.is-ok .rs-disc > span { background: var(--green); }
.rs-kpi.is-warn .rs-disc { background: #FFF4E0; }
.rs-kpi.is-warn .rs-disc > span { background: none; color: #F59E0B; border: 3px solid #F59E0B; }
.rs-kpi.is-warn .rs-disc .i { font-size: 17px; }
.rs-kpi.is-bad .rs-disc { background: #FDECEF; }
.rs-kpi.is-bad .rs-disc > span { background: #F0546A; }
.rs-kpi.is-skip .rs-disc > span { background: #7B8295; }
.rs-kpi h2 { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--text); }
.rs-kpi b { display: block; font-size: 24px; font-weight: 800; color: var(--text); line-height: 1.25; }
.rs-kpi div > span { display: block; font-size: 14px; color: var(--text-2); }
/* the list card */
.rs-card { padding: 14px 10px 8px; border-radius: 12px; }
.rs-bar { display: flex; align-items: center; gap: 12px; padding: 0 10px 10px; flex-wrap: wrap; }
.rs-tabs { flex: 1 1 auto; display: flex; align-items: stretch; gap: 6px; min-width: 0; overflow-x: auto; }
.rs-tab { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; font-size: 15px; font-weight: 500; color: var(--text-2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.rs-tab:hover { color: var(--indigo); }
.rs-tab.is-active { color: var(--indigo); font-weight: 600; border-bottom-color: var(--indigo); }
.rs-count { min-width: 26px; height: 24px; padding: 0 8px; border-radius: 12px; background: #F0F2F7; color: var(--text); font-size: 13px; font-weight: 600; display: inline-grid; place-items: center; }
.rs-tab.is-active .rs-count { background: var(--indigo-bg); color: var(--indigo); }
.rs-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rs-search { position: relative; display: flex; align-items: center; }
.rs-search .i { position: absolute; left: 12px; font-size: 17px; color: var(--muted); pointer-events: none; }
.rs-search input { width: 244px; height: 38px; padding: 0 12px 0 38px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); }
.rs-search input:focus { outline: 2px solid #C9D2FF; border-color: var(--indigo); }
.rs-period { height: 38px; width: 176px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); }
.rs-retryall { height: 38px; padding: 0 14px; font-size: 14px; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; }
.rs-retryall .i { font-size: 16px; }
.rs-scroll { position: relative; overflow-x: auto; }
.rs-table { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 1080px; }
.rs-table th { height: 46px; padding: 0 12px; text-align: left; font-size: 14px; font-weight: 500; color: var(--text); background: #F7F8FC; white-space: nowrap; border-top: 1px solid var(--border-soft, #EEF0F5); border-bottom: 1px solid var(--border-soft, #EEF0F5); }
.rs-table td { padding: 9px 12px; vertical-align: middle; border-bottom: 1px solid var(--border-soft, #EEF0F5); }
.rs-table tbody tr:last-child td { border-bottom: 0; }
.rs-table .c-post { width: 25%; }
.rs-table .c-prov { width: 11.5%; }
.rs-table .c-url { width: 15%; }
.rs-table .c-at { width: 11%; }
.rs-table .c-stat { width: 10%; }
.rs-table .c-ev { width: 14%; }
.rs-table .c-act { width: 13.5%; }
.rs-post { display: flex; align-items: center; gap: 14px; min-width: 0; }
.rs-pic { width: 88px; height: 58px; flex: none; border-radius: 6px; overflow: hidden; background: radial-gradient(120% 110% at 78% 95%, #1E3A8A 0%, #0E1B3D 62%); display: grid; place-items: center; }
.rs-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rs-pic .rs-pf { width: 22px; height: 22px; }
.rs-post > div, .rs-prov > div, .rs-at { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rs-post a.rs-title { font-size: 14.5px; font-weight: 600; color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-post a.rs-title:hover { color: var(--indigo); text-decoration: underline; }
.rs-post span, .rs-prov span, .rs-at span { font-size: 13.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px; background: #F0F2F7; color: var(--text-2); font-size: 11.5px; font-weight: 600; vertical-align: 1px; }
.rs-prov { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rs-prov b { font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; }
.rs-pf { width: 28px; height: 28px; flex: none; }
.rs-url { min-width: 0; }
.rs-url a { display: inline; font-size: 14px; color: var(--indigo); text-decoration: none; word-break: break-all; line-height: 1.45; }
.rs-url a:hover { text-decoration: underline; }
.rs-url a .i { font-size: 15px; margin-left: 4px; vertical-align: -2px; }
.rs-url .rs-id { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-url .rs-none { font-size: 14px; color: var(--text-2); }
.rs-at b { font-size: 14px; font-weight: 400; color: var(--text); white-space: nowrap; }
.rs-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 7px; font-size: 13.5px; font-weight: 600; white-space: nowrap; background: #EEF0F5; color: #4B5263; }
.rs-chip .i { font-size: 14px; }
.rs-chip.is-green { background: #E6F8EF; color: var(--green-text); }
.rs-chip.is-amber { background: #FFF4E0; color: #B45309; }
.rs-chip.is-red { background: #FDECEF; color: #B42339; }
.rs-chip.is-blue { background: var(--indigo-bg); color: var(--indigo); }
.rs-ring { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #C9D2FF; border-top-color: var(--indigo); animation: rs-spin 1.1s linear infinite; flex: none; }
@keyframes rs-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rs-ring { animation: none; } }
.rs-ev { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; }
.rs-ev .rs-evpic { width: 62px; height: 40px; flex: none; border-radius: 5px; overflow: hidden; background: #0E1B3D; }
.rs-ev .rs-evpic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rs-ev a.rs-view { font-size: 14px; color: var(--indigo); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.rs-ev a.rs-view:hover { text-decoration: underline; }
.rs-ev a.rs-view .i { font-size: 15px; }
.rs-ev > span { font-size: 13.5px; color: var(--text-2); line-height: 1.35; }
.rs-evbtn { flex: none; width: 24px; height: 24px; border: 0; border-radius: 50%; background: none; color: var(--indigo); display: grid; place-items: center; cursor: pointer; }
.rs-evbtn:hover, .rs-evbtn[aria-expanded="true"] { background: var(--indigo-bg); }
.rs-evbtn .i { font-size: 17px; }
.rs-pop { position: fixed; z-index: 60; width: 340px; max-width: calc(100vw - 24px); padding: 12px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 12px 32px rgba(17, 24, 39, .14); font-size: 13.5px; color: var(--text); }
.rs-pop h3 { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.rs-pop .rs-popwhy { margin: 0 0 8px; color: var(--text); line-height: 1.4; }
.rs-pop .rs-popnone { margin: 0; color: var(--text-2); }
.rs-pop ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rs-pop li { display: grid; grid-template-columns: 92px 1fr auto; gap: 8px; align-items: baseline; }
.rs-pop li b { font-weight: 600; }
.rs-pop li em { font-style: normal; color: var(--text-2); }
.rs-pop li.is-bad em { color: #B42339; }
.rs-pop li.is-ok em { color: var(--green-text); }
.rs-pop li time { color: var(--muted); font-size: 12.5px; }
.rs-pop li p { grid-column: 1 / -1; margin: 0 0 2px; color: var(--text-2); font-size: 12.5px; line-height: 1.35; }
.rs-pop .rs-popfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border-soft, #EEF0F5); color: var(--text-2); font-size: 12.5px; }
.rs-pop .rs-popfoot a { color: var(--indigo); font-weight: 600; text-decoration: none; }
.rs-acts { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.rs-acts .btn-outline, .rs-acts .rs-noact { width: 120px; height: 38px; padding: 0 10px; font-size: 14px; font-weight: 600; justify-content: center; white-space: nowrap; display: inline-flex; align-items: center; border-radius: 7px; text-decoration: none; }
.rs-acts .btn-outline { border-color: var(--indigo); color: var(--indigo); }
.rs-acts .btn-outline:hover { background: var(--indigo-bg); }
.rs-acts .rs-noact { border: 1px solid var(--border); background: #F4F5F8; color: var(--text-2); font-weight: 500; cursor: not-allowed; }
.rs-mw { position: relative; display: inline-block; }
.rs-mw .pm-menu { right: 0; left: auto; min-width: 210px; }
.rs-table .pm-dots { width: 32px; height: 32px; border: 0; background: none; color: var(--text); border-radius: 8px; display: grid; place-items: center; cursor: pointer; }
.rs-table .pm-dots:hover { background: var(--indigo-bg-2, #F4F6FF); color: var(--indigo); }
.rs-table .pm-dots .i { font-size: 20px; }
.rs-foot { margin: 6px 12px 4px; font-size: 13px; color: var(--muted); }
.rs-row.is-new td { animation: rs-flash 1.2s ease; }
@keyframes rs-flash { from { background: #EEF1FF; } to { background: transparent; } }
.rs-empty { padding: 26px 0 18px; }
.rs-list[aria-busy="true"] { opacity: .6; transition: opacity .2s; }
@media (max-width: 1280px) {
  .rs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .rs-head { flex-wrap: wrap; }
  .rs-head .po-actions { flex-wrap: wrap; }
  .rs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rs-kpi { gap: 12px; padding: 12px 14px; min-height: 88px; }
  .rs-disc { width: 44px; height: 44px; }
  .rs-disc > span { width: 26px; height: 26px; }
  .rs-tools { width: 100%; }
  .rs-search, .rs-search input { width: 100%; }
  .rs-period { width: 100%; }
}

/* ---------- Promotion-21 · Published post details (pq- this screen: the page "Publishing / Posts / Details" — the breadcrumb above the head "Published post details" with Promote post / Open on platform / View distribution / Manage post, the destination pills of a post with several destinations, then a 2 × 2 grid: Post content (the picture, the title, the platform line with the status chip, the published text, the format / External URL / Provider ID facts), Performance (since published) with "View in Analytics", the live time, four "—" tiles and the Analytics note, Distribution target (the account identity, View account and the facts incl. the schedule) and Execution history (the timeline of run steps, runs, verifications, the schedule and the approval, "Show all")) — plans/Promotion-21.md, prototype/gen/promotion21.css ---------- */
.pq-root { min-width: 0; }
.pq-crumbs { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 15px; color: var(--text-2); flex-wrap: wrap; }
.pq-crumbs a { color: var(--text-2); text-decoration: none; }
.pq-crumbs a:hover { color: var(--indigo); text-decoration: underline; }
.pq-head { align-items: center; margin-bottom: 14px; }
.pq-head h1 { margin-bottom: 2px; }
.pq-head .po-actions { gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.pq-head .po-btn { white-space: nowrap; }
.pq-head .po-btn .i { font-size: 19px; }
.pq-head .is-off { opacity: .5; cursor: not-allowed; }
.pq-strip { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 16px; border-radius: 10px; background: var(--indigo-bg); color: var(--text); font-size: 14.5px; flex-wrap: wrap; }
.pq-strip > .i { font-size: 20px; color: var(--indigo); }
.pq-strip span { flex: 1 1 auto; }
.pq-strip .btn-outline { height: 36px; padding: 0 14px; font-size: 14px; }
.pq-dests { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
.pq-dests > b { font-size: 14px; font-weight: 600; color: var(--text-2); margin-right: 4px; }
.pq-dest { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 10px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 14px; text-decoration: none; white-space: nowrap; }
.pq-dest:hover { border-color: var(--indigo); }
.pq-dest.is-current { border-color: var(--indigo); background: var(--indigo-bg); color: var(--indigo); font-weight: 600; }
.pq-dest .pq-pf { width: 20px; height: 20px; }
.pq-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.pq-dot.is-grey { background: var(--muted); }
.pq-dot.is-green { background: var(--green); }
.pq-dot.is-red { background: #F0546A; }
.pq-dot.is-amber { background: #F59E0B; }
.pq-dot.is-blue { background: var(--indigo); }
.pq-dest em { font-style: normal; color: var(--text-2); font-weight: 400; }
.pq-grid { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.pq-card { padding: 18px 20px; border-radius: 12px; min-width: 0; }
.pq-card > h2, .pq-chead h2 { margin: 0 0 14px; font-size: 17px; font-weight: 700; color: var(--text); }
.pq-chead { display: flex; align-items: baseline; gap: 10px; }
.pq-chead h2 { flex: 1 1 auto; }
.pq-chead h2 small { font-size: 16px; font-weight: 400; color: var(--text); }
.pq-chead a { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 500; color: var(--indigo); text-decoration: none; white-space: nowrap; }
.pq-chead a:hover { text-decoration: underline; }
.pq-chead a .i { font-size: 16px; }
.pq-pf { width: 22px; height: 22px; flex: none; }
/* post content */
.pq-content { display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: 18px; align-items: start; }
.pq-pic { position: relative; width: 350px; height: 240px; border-radius: 8px; overflow: hidden; background: radial-gradient(120% 110% at 78% 95%, #1E3A8A 0%, #0E1B3D 62%); display: grid; place-items: center; color: #C9D2FF; }
.pq-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pq-pic .pq-nomedia { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 14px; }
.pq-pic .pq-nomedia .pq-pf { width: 40px; height: 40px; }
.pq-play { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(15, 23, 42, .55); color: #fff; display: grid; place-items: center; }
.pq-play .i { font-size: 24px; }
.pq-body { min-width: 0; }
.pq-body h3 { margin: 4px 0 8px; font-size: 18px; font-weight: 700; color: var(--text); }
.pq-plat { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14.5px; color: var(--text-2); margin-bottom: 14px; }
.pq-plat .pq-chip { margin-left: 12px; }
.pq-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 7px; font-size: 13.5px; font-weight: 600; white-space: nowrap; background: #EEF0F5; color: #4B5263; }
.pq-chip .i { font-size: 14px; }
.pq-chip.is-green { background: #E6F8EF; color: var(--green-text); }
.pq-chip.is-amber { background: #FFF4E0; color: #B45309; }
.pq-chip.is-red { background: #FDECEF; color: #B42339; }
.pq-chip.is-blue { background: var(--indigo-bg); color: var(--indigo); }
.pq-text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text); white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pq-text.is-open { display: block; -webkit-line-clamp: unset; }
.pq-more { margin-top: 4px; border: 0; background: none; padding: 0; color: var(--indigo); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.pq-facts { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border-soft, #EEF0F5); display: flex; flex-direction: column; gap: 4px; }
.pq-facts li { display: grid; grid-template-columns: 22px 112px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 32px; font-size: 14px; color: var(--text); }
.pq-facts li > .i { font-size: 20px; color: var(--text-2); }
.pq-facts li > span { color: var(--text-2); }
.pq-facts li > div { min-width: 0; overflow-wrap: anywhere; }
.pq-facts a, .pq-tfacts a { color: var(--indigo); text-decoration: none; overflow-wrap: anywhere; }
.pq-facts a:hover, .pq-tfacts a:hover { text-decoration: underline; }
.pq-facts a .i, .pq-tfacts a .i { font-size: 16px; margin-left: 6px; vertical-align: -3px; }
.pq-facts em, .pq-tfacts em { font-style: normal; color: var(--text-2); }
.pq-facts code { font-family: inherit; }
/* performance */
.pq-fresh { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.pq-fresh .pq-clock { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); display: grid; place-items: center; }
.pq-fresh .pq-clock .i { font-size: 28px; }
.pq-fresh b { display: block; font-size: 17px; font-weight: 700; color: var(--text); }
.pq-fresh span { display: block; font-size: 14px; color: var(--text-2); margin-top: 2px; }
.pq-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.pq-tile { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; }
.pq-tile > .i { flex: none; font-size: 28px; color: var(--indigo); }
.pq-tile b { display: block; font-size: 18px; font-weight: 700; color: var(--text-2); }
.pq-tile span { display: block; font-size: 14px; color: var(--text-2); }
.pq-note { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 10px; background: #F4F6FF; }
.pq-note .pq-ndisc { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #E3E8FF; color: var(--indigo); display: grid; place-items: center; }
.pq-note .pq-ndisc .i { font-size: 22px; }
.pq-note b { display: block; font-size: 16px; font-weight: 700; color: var(--text); }
.pq-note span { display: block; font-size: 14px; color: var(--text-2); margin-top: 2px; }
/* distribution target */
.pq-who { display: flex; align-items: center; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border-soft, #EEF0F5); }
.pq-who .pq-bigpf { width: 44px; height: 44px; flex: none; }
.pq-who > div { flex: 1 1 auto; min-width: 0; }
.pq-who b { display: block; font-size: 17px; font-weight: 700; color: var(--text); }
.pq-who span { display: block; font-size: 14px; color: var(--text-2); margin-top: 2px; }
.pq-who .btn-outline { height: 40px; padding: 0 20px; font-size: 14.5px; white-space: nowrap; }
.pq-tfacts { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 4px 12px; margin: 12px 0 0; font-size: 14px; }
.pq-tfacts dt { color: var(--text); min-height: 28px; display: flex; align-items: center; }
.pq-tfacts dd { margin: 0; min-height: 28px; display: flex; align-items: center; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.pq-health { display: inline-flex; align-items: center; gap: 8px; }
.pq-health i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.pq-health.is-ok { color: var(--green-text); }
.pq-health.is-warn { color: #B45309; }
.pq-health.is-warn i { background: #F59E0B; }
.pq-health.is-bad { color: #B42339; }
.pq-health.is-bad i { background: #F0546A; }
/* execution history */
.pq-hist { list-style: none; margin: 0; padding: 0; position: relative; }
.pq-hist li { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; padding: 0 0 14px; }
.pq-hist li::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: 0; width: 1px; background: #DCE1EC; }
.pq-hist li:last-child::before, .pq-hist li.is-last::before { display: none; }
.pq-hist .pq-hdisc { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #9CA3AF; color: #fff; margin-top: 1px; }
.pq-hist .pq-hdisc .i { font-size: 12px; }
.pq-hist li.is-ok .pq-hdisc { background: var(--green); }
.pq-hist li.is-bad .pq-hdisc { background: #F0546A; }
.pq-hist li.is-warn .pq-hdisc { background: #F59E0B; }
.pq-hist li.is-run .pq-hdisc { background: var(--indigo); }
.pq-hist b { display: block; font-size: 15px; font-weight: 700; color: var(--text); }
.pq-hist time { display: block; font-size: 14px; color: var(--text); margin-top: 2px; }
.pq-hist p { margin: 2px 0 0; font-size: 14px; color: var(--text-2); line-height: 1.4; overflow-wrap: anywhere; }
.pq-hist p a { color: var(--indigo); font-weight: 600; text-decoration: none; margin-left: 6px; }
.pq-hist li[hidden] { display: none; }
.pq-showall { border: 0; background: none; padding: 0; color: var(--indigo); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.pq-hempty { margin: 0; font-size: 14px; color: var(--text-2); }
@media (max-width: 1280px) {
  .pq-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .pq-content { grid-template-columns: minmax(0, 1fr); }
  .pq-pic { width: 100%; height: auto; aspect-ratio: 35 / 24; }
}
@media (max-width: 768px) {
  .pq-head { flex-wrap: wrap; }
  .pq-head .po-actions { justify-content: flex-start; }
  .pq-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pq-tfacts { grid-template-columns: 112px minmax(0, 1fr); }
  .pq-who { flex-wrap: wrap; }
}

/* ---------- Promotion-22 · Manage published post (mg- this screen: the 732 px drawer over the published post details — the head with the breadcrumb "Publishing / Posts / Manage", the Post details card (Title, Caption with the hashtag and character line, the Account select, Published on read-only), the Preview comparison card with the two simulated cards Current (published) / Updated (preview), the strip with the change sentence, Save changes / Save as new draft / ⋯ and the change states, then apart from the editing controls the Post history timeline and the Delete post card naming the exact provider object) — plans/Promotion-22.md, prototype/gen/promotion22.css ---------- */
.mg-backdrop { position: fixed; inset: 0; z-index: 81; background: rgba(23, 27, 45, .28); }
.mg-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 82; display: flex; flex-direction: column; width: 732px; max-width: 100%; background: var(--surface);
  box-shadow: -12px 0 40px rgba(23, 27, 45, .16); }
.mg-drawer:focus { outline: none; }
.mg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 26px 24px 10px; }
.mg-head h2 { margin: 0; font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.mg-crumbs { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; color: var(--muted); }
.mg-crumbs a { color: var(--muted); text-decoration: none; }
.mg-crumbs a:hover { color: var(--text); text-decoration: underline; }
.mg-crumbs [aria-current] { color: var(--text-2); }
.mg-close { display: grid; place-items: center; width: 36px; height: 36px; margin-top: 16px; border: 0; border-radius: 8px; background: none; color: var(--text-2); cursor: pointer; flex: none; }
.mg-close:hover { background: #F3F4F8; }
.mg-close .i { font-size: 20px; }
.mg-body { flex: 1; overflow: auto; padding: 8px 24px 24px; }
.mg-row1 { display: grid; grid-template-columns: 292px minmax(0, 1fr); gap: 11px; align-items: stretch; }
.mg-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 22px; align-items: stretch; }
.mg-card { min-width: 0; padding: 14px 15px 16px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.mg-card h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 15.5px; font-weight: 700; color: var(--text); }
.mg-card h3 .i { font-size: 19px; color: var(--indigo); }
.mg-field { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.mg-card h3 + .mg-field { margin-top: 0; }
.mg-field > span:first-child { font-size: 14px; font-weight: 500; color: var(--text); }
.mg-field input, .mg-field textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 6px; background: #fff; font: inherit; font-size: 14px;
  color: var(--text); padding: 7px 10px; }
.mg-field input { height: 31px; }
.mg-field textarea { min-height: 90px; resize: vertical; line-height: 1.45; }
.mg-field input:focus, .mg-field textarea:focus, .mg-sel select:focus { outline: 2px solid rgba(59, 91, 253, .25); border-color: var(--indigo); }
.mg-field input[readonly], .mg-field textarea[readonly] { background: #F7F8FB; color: var(--text-2); }
.mg-field.is-invalid input, .mg-field.is-invalid textarea { border-color: var(--red); }
.mg-hint { font-style: normal; font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.mg-hint.is-over { color: var(--red); }
.mg-hint.is-note { color: var(--text-2); }
.mg-sel { position: relative; display: flex; align-items: center; }
.mg-sel .mg-pf { position: absolute; left: 10px; width: 20px; height: 20px; pointer-events: none; }
.mg-sel select { width: 100%; height: 36px; padding: 0 30px 0 38px; border: 1px solid var(--border); border-radius: 6px; background: #fff; font: inherit; font-size: 14px;
  color: var(--text); appearance: none; cursor: pointer; }
.mg-sel select:disabled { cursor: default; background: #fff; color: var(--text); opacity: 1; }
.mg-sel > .i { position: absolute; right: 10px; font-size: 15px; color: var(--text-2); pointer-events: none; }
.mg-ro { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: #F7F8FB; font-size: 14px;
  color: var(--text); }
.mg-ro .i { font-size: 17px; color: var(--text-2); }
.mg-cmp > p { margin: -6px 0 12px; font-size: 13.5px; line-height: 1.4; color: var(--text-2); }
.mg-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 11px; }
.mg-mock { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.mg-mhead { padding: 7px 10px; background: #F4F6FA; border-bottom: 1px solid var(--border-soft); font-size: 13px; font-weight: 700; color: var(--text); }
.mg-mwho { display: flex; align-items: center; gap: 8px; padding: 8px 8px 6px; }
.mg-mwho .mg-mpf { width: 26px; height: 26px; flex: none; }
.mg-mwho div { display: flex; flex-direction: column; min-width: 0; }
.mg-mwho b { font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-mwho span { font-size: 11px; color: var(--muted); }
.mg-mpic { position: relative; margin: 0 8px; aspect-ratio: 16 / 10.5; overflow: hidden; border-radius: 4px; background: #0E1B3D; }
.mg-mpic img, .mg-mpic .ph-art { display: block; width: 100%; height: 100%; object-fit: cover; }
.mg-mpic .mg-nomedia { display: grid; place-items: center; height: 100%; font-size: 12px; color: #C9D2FF; }
.mg-mtext { margin: 8px 9px 0; font-size: 12.5px; line-height: 1.42; color: var(--text); white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere; }
.mg-mtext .px-tag, .mg-mtext .mg-tag { color: #2F57C7; }
.mg-macts { display: flex; align-items: center; gap: 9px; padding: 9px 9px 10px; color: var(--text); }
.mg-macts .i { font-size: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mg-macts .end { margin-left: auto; display: inline-flex; }
.mg-same { position: absolute; right: 6px; bottom: 6px; padding: 2px 8px; border-radius: 9px; background: rgba(23, 27, 45, .72); color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; }
.mg-mock.is-changed { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo) inset; }
.mg-strip { display: flex; align-items: center; gap: 12px; margin-top: 11px; padding: 11px 14px; border: 1px solid #DCE3FF; border-radius: 10px; background: #F4F6FF; }
.mg-strip .mg-sic { display: grid; place-items: center; width: 26px; flex: none; color: var(--indigo); }
.mg-strip .mg-sic .i { font-size: 21px; }
.mg-strip p { flex: 1; min-width: 0; margin: 0; font-size: 14px; line-height: 1.4; color: var(--text-2); }
.mg-strip .btn-primary, .mg-strip .btn-outline { height: 38px; flex: none; padding: 0 13px; gap: 8px; border-radius: 6px; font-size: 14.5px; font-weight: 600; }
.mg-strip .btn-primary { box-shadow: none; }
.mg-strip .btn-primary .i, .mg-strip .btn-outline .i { font-size: 17px; }
.mg-strip .btn-primary:disabled { opacity: .5; cursor: default; }
.mg-strip.is-running { border-color: #CFD8FF; }
.mg-strip.is-ok { background: #ECFBF4; border-color: #BDEBD6; }
.mg-strip.is-ok .mg-sic { color: var(--green); }
.mg-strip.is-bad { background: #FFF1F3; border-color: #F8C9D1; }
.mg-strip.is-bad .mg-sic { color: var(--red); }
.mg-strip.is-warn { background: #FFF8EB; border-color: #F7DDA8; }
.mg-strip.is-warn .mg-sic { color: #B7791F; }
.mg-spin { width: 20px; height: 20px; border: 2.5px solid #C9D2FF; border-top-color: var(--indigo); border-radius: 50%; animation: mg-spin .9s linear infinite; }
@keyframes mg-spin { to { transform: rotate(360deg); } }
.mg-mw { position: relative; flex: none; }
.mg-strip .mg-more { width: 38px; padding: 0; justify-content: center; }
.mg-mw .pm-menu { right: 0; left: auto; top: calc(100% + 6px); min-width: 210px; }
.mg-tl { position: relative; margin: 4px 0 0; padding: 0; list-style: none; }
.mg-tl li { position: relative; display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 8px; padding: 0 0 18px 22px; }
.mg-tl li::before { content: ""; position: absolute; left: 3px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--indigo); }
.mg-tl li::after { content: ""; position: absolute; left: 7px; top: 18px; bottom: 0; width: 1px; background: var(--border); }
.mg-tl li:last-child, .mg-tl li.is-last { padding-bottom: 0; }
.mg-tl li:last-child::after, .mg-tl li.is-last::after { display: none; }
.mg-tl li.is-ok::before { background: var(--green); }
.mg-tl li.is-bad::before { background: var(--red); }
.mg-tl li.is-warn::before { background: var(--amber); }
.mg-tl time { font-size: 13.5px; color: var(--text-2); line-height: 1.4; }
.mg-tl b { display: block; font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.4; }
.mg-tl span { display: block; font-size: 13px; color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
.mg-showall { margin-top: 10px; padding: 0; border: 0; background: none; color: var(--indigo); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.mg-del h3 { color: #D33A52; }
.mg-del h3 .i { color: #D33A52; }
.mg-del p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; }
.mg-del p b { font-weight: 600; color: var(--text); }
.mg-delbtn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 38px; border: 1.5px solid #E5485F; border-radius: 6px; background: #fff;
  color: #D33A52; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; text-decoration: none; }
.mg-delbtn:hover { background: #FFF1F3; }
.mg-delbtn:disabled { opacity: .55; cursor: default; }
.mg-delbtn.is-quiet { border-color: var(--border); color: var(--text); }
.mg-note { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: #FFF8EB; font-size: 13.5px; line-height: 1.4;
  color: var(--text-2); }
.mg-note .i { flex: none; font-size: 18px; color: #B7791F; margin-top: 1px; }
.mg-empty { padding: 24px 6px; text-align: center; color: var(--text-2); font-size: 14px; }
@media (max-width: 900px) {
  .mg-drawer { width: 100%; }
  .mg-row1, .mg-row2 { grid-template-columns: minmax(0, 1fr); }
  .mg-strip { flex-wrap: wrap; }
  .mg-strip p { flex-basis: calc(100% - 40px); }
}
@media (max-width: 480px) {
  .mg-body { padding: 6px 16px 96px; }                                /* clear of the phone tab bar (MM-48) */
  .mg-head { padding: 20px 16px 8px; }
  .mg-strip .btn-primary, .mg-strip .btn-outline { flex: 1 1 auto; justify-content: center; }
  .mg-tl li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
/* ---------- Promotion-23 · Unified social inbox (ib- this screen: the page "Inbox" — the head with Compose (disabled with its reason) / Refresh / ⋯, three columns: Conversations (the views with their counts, Channels, Conversation type and Assignment checkboxes, an account that needs sign-in), the thread list (the count, the sort, rows with the initials avatar and platform badge, the name, the age with the waiting clock, the last text, the unread dot, "{Platform} • {account} • Comment / Direct message" and the Unassigned / Assigned chip, the selected row) and the selected conversation (the head with View post and ⋯, the facts line with the labels, the messages with incoming, outgoing and internal notes, the composer with Reply / Internal note, the draft line, Assign / Label and Save draft or Add note, the reason when replying is not supported, the Connection capability card), the Assign and Label popovers) — plans/Promotion-23.md, prototype/gen/promotion23.css ---------- */
.ib-root { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.ib-head { margin-top: 4px; }
.ib-head .btn-primary.is-off { opacity: .55; cursor: not-allowed; box-shadow: none; }
.ib-split { display: inline-flex; }
.ib-split .btn-primary { border-radius: var(--radius) 0 0 var(--radius); }
.ib-split .ib-caret { width: 36px; padding: 0; justify-content: center; border-left: 1px solid rgba(255, 255, 255, .35); border-radius: 0 var(--radius) var(--radius) 0; }
.ib-cols { display: grid; grid-template-columns: 280px minmax(0, 472fr) minmax(0, 624fr); gap: 10px; align-items: stretch; height: max(560px, calc(100vh - 330px)); min-height: 0; }
.ib-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border-radius: 12px; }
.ib-scroll { flex: 1; min-height: 0; overflow: auto; }
/* filters */
.ib-filters .ib-scroll { padding: 16px 8px 16px; }
.ib-ftitle { margin: 0 0 8px 6px; font-size: 15.5px; font-weight: 700; color: var(--text); }
.ib-sep { margin: 12px 6px; border: 0; border-top: 1px solid var(--border-soft); }
.ib-views { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 0; list-style: none; }
.ib-view { display: flex; align-items: center; gap: 10px; width: 100%; height: 31px; padding: 0 10px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 14.5px;
  color: var(--text-2); text-decoration: none; cursor: pointer; }
.ib-view .i { font-size: 17px; color: var(--muted); flex: none; }
.ib-view span:not(.ib-n) { flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-view:hover { background: #F5F6FA; }
.ib-view.is-active { background: var(--indigo-bg); color: var(--indigo); font-weight: 600; }
.ib-view.is-active .i { color: var(--indigo); }
.ib-n { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 11px; background: #F0F2F7; font-size: 12.5px; font-weight: 600; color: var(--text-2); flex: none; }
.ib-view.is-active .ib-n { background: #fff; color: var(--indigo); }
.ib-checks { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ib-check { display: flex; align-items: center; gap: 7px; min-height: 31px; padding: 0 4px 0 6px; border-radius: 7px; font-size: 13.5px; color: var(--text-2); cursor: pointer; }
.ib-check:hover { background: #F7F8FB; }
.ib-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--indigo); flex: none; cursor: pointer; }
.ib-check .ib-pf { width: 18px; height: 18px; flex: none; }
.ib-check span.t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-check.is-off { color: var(--muted); }
.ib-signin { display: block; margin: 2px 0 4px 38px; font-size: 12.5px; line-height: 1.35; color: #B7791F; }
.ib-signin a { color: inherit; font-weight: 600; }
/* list */
.ib-lhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 10px 16px; }
.ib-lhead h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
.ib-sort { position: relative; display: inline-flex; align-items: center; }
.ib-sort select { height: 36px; padding: 0 32px 0 11px; border: 1px solid var(--border); border-radius: 7px; background: #fff; font: inherit; font-size: 14px; color: var(--text); appearance: none; cursor: pointer; }
.ib-sort .i { position: absolute; right: 10px; font-size: 15px; color: var(--text-2); pointer-events: none; }
.ib-list { margin: 0; padding: 0 8px 10px; list-style: none; }
.ib-row { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 12px 12px 12px 14px; border: 1px solid transparent; border-radius: 10px;
  cursor: pointer; }
.ib-row + .ib-row::before { content: ""; position: absolute; left: 14px; right: 14px; top: -1px; border-top: 1px solid var(--border-soft); }
.ib-row.is-selected + .ib-row::before, .ib-row.is-selected::before { display: none; }
.ib-row:hover { background: #FAFBFD; }
.ib-row.is-selected { border-color: #A9B8FF; background: #F4F6FF; box-shadow: 0 0 0 1px #A9B8FF inset; }
.ib-row:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.ib-av { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ib-c, #6B7BD6); color: #fff; font-size: 17px; font-weight: 700;
  letter-spacing: .02em; flex: none; }
.ib-av.is-sm { width: 44px; height: 44px; font-size: 15px; }
.ib-av.is-xs { width: 40px; height: 40px; font-size: 14px; }
.ib-av .ib-badge { position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; padding: 1px; border-radius: 6px; background: #fff; }
.ib-av .ib-badge svg { display: block; width: 100%; height: 100%; }
.ib-rmain { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ib-r1 { display: flex; align-items: baseline; gap: 8px; }
.ib-r1 b { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-row.is-unread .ib-r1 b { font-weight: 800; }
.ib-age { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); flex: none; }
.ib-age .i { font-size: 13px; }
.ib-age.is-late { color: #B7791F; font-weight: 600; }
.ib-r2 { display: flex; align-items: center; gap: 10px; }
.ib-r2 p { flex: 1; min-width: 0; margin: 0; font-size: 14px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-row.is-unread .ib-r2 p { color: var(--text); }
.ib-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--indigo); flex: none; }
.ib-r3 { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.ib-meta { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-meta .ib-pf { width: 16px; height: 16px; flex: none; }
.ib-meta i { font-style: normal; }
.ib-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 12px; background: #F0F2F7; font-size: 12.5px; font-weight: 600; color: var(--text-2);
  white-space: nowrap; flex: none; }
.ib-chip.is-green { background: #E4F7EE; color: #0E7A55; }
.ib-chip.is-amber { background: #FFF3DC; color: #9A5B08; }
.ib-chip.is-blue { background: var(--indigo-bg); color: var(--indigo); }
.ib-chip .i { font-size: 13px; }
/* conversation */
.ib-conv .ib-scroll { display: flex; flex-direction: column; padding: 0 16px 16px; }
.ib-chead { display: flex; align-items: center; gap: 12px; padding: 16px 16px 10px; }
.ib-chead .ib-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ib-chead .ib-who b { font-size: 16px; font-weight: 700; color: var(--text); }
.ib-chead .ib-who span { font-size: 14px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-chead .btn-outline { height: 38px; padding: 0 16px; font-size: 14.5px; border-radius: 7px; border-color: #AFC0FF; color: var(--indigo); }
.ib-chead .btn-outline.is-off { color: var(--muted); border-color: var(--border); cursor: not-allowed; }
.ib-mw { position: relative; flex: none; }
.ib-mw .pm-menu { right: 0; top: calc(100% + 4px); min-width: 200px; }
.ib-iconbtn { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--text-2); cursor: pointer; }
.ib-iconbtn:hover { background: #F3F4F8; }
.ib-iconbtn .i { font-size: 20px; }
.ib-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid var(--border-soft); font-size: 13px; color: var(--text-2); }
.ib-facts .ib-pf { width: 16px; height: 16px; }
.ib-facts > span { display: inline-flex; align-items: center; gap: 5px; }
.ib-facts .ib-chip { height: 22px; padding: 0 8px; font-size: 12px; }
.ib-msgs { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 4px 0 16px; list-style: none; }
.ib-msg { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.ib-bubble { max-width: 420px; padding: 12px 14px; border-radius: 10px; background: #F4F6FA; }
.ib-bubble b { display: block; margin-bottom: 4px; font-size: 14.5px; font-weight: 700; color: var(--text); }
.ib-bubble p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.ib-msg time { font-size: 13px; color: var(--muted); white-space: nowrap; padding-top: 4px; }
.ib-msg.is-out { grid-template-columns: auto minmax(0, 1fr) 40px; }
.ib-msg.is-out .ib-bubble { justify-self: end; background: var(--indigo-bg); }
.ib-msg.is-out .ib-bubble b span { font-weight: 500; color: var(--muted); }
.ib-msg.is-out time { text-align: right; }
.ib-msg.is-note { grid-template-columns: minmax(0, 1fr) auto; }
.ib-msg.is-note .ib-bubble { max-width: none; background: #FFF8EB; border: 1px dashed #F0C674; }
.ib-msg.is-note .ib-bubble b { display: flex; align-items: center; gap: 6px; color: #8A5A0A; }
.ib-msg.is-note .ib-bubble b .i { font-size: 15px; }
.ib-msg.is-note .ib-bubble em { display: block; margin-top: 6px; font-style: normal; font-size: 12.5px; color: var(--muted); }
.ib-compose { border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.ib-tabs { display: flex; gap: 6px; padding: 0 12px; border-bottom: 1px solid var(--border-soft); }
.ib-tab { position: relative; height: 44px; padding: 0 12px; border: 0; background: none; font: inherit; font-size: 15px; color: var(--text-2); cursor: pointer; }
.ib-tab.is-active { color: var(--indigo); font-weight: 600; }
.ib-tab.is-active::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--indigo); }
.ib-pane { padding: 12px; }
.ib-pane textarea { width: 100%; box-sizing: border-box; min-height: 96px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14.5px; line-height: 1.45;
  color: var(--text); resize: vertical; }
.ib-pane textarea:focus { outline: 2px solid rgba(59, 91, 253, .25); border-color: var(--indigo); }
.ib-note-line { margin: 8px 2px 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.ib-draft-line { display: flex; align-items: center; gap: 8px; margin: 8px 2px 0; font-size: 12.5px; color: var(--text-2); }
.ib-draft-line button { padding: 0; border: 0; background: none; color: var(--indigo); font: inherit; font-weight: 600; cursor: pointer; }
.ib-bar { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.ib-bar .sp { flex: 1; }
.ib-ghost { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 14.5px; color: var(--text);
  cursor: pointer; }
.ib-ghost:hover { background: #F3F4F8; }
.ib-ghost .i { font-size: 18px; color: var(--text-2); }
.ib-bar .btn-primary { height: 42px; padding: 0 18px; font-size: 15px; border-radius: 7px; box-shadow: none; gap: 8px; }
.ib-bar .btn-primary .i { font-size: 18px; }
.ib-bar .btn-primary:disabled { opacity: .5; cursor: default; }
.ib-reason { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 8px; background: #F7F8FB; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.ib-reason .i { flex: none; font-size: 18px; color: var(--muted); margin-top: 1px; }
.ib-reason.is-warn { background: #FFF8EB; }
.ib-reason.is-warn .i { color: #B7791F; }
.ib-reason a { color: var(--indigo); font-weight: 600; }
.ib-cap { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 14px 16px; border-radius: 10px; background: #F4F6FF; }
.ib-cap .ib-cap-pf { width: 34px; height: 34px; flex: none; }
.ib-cap div { flex: 1; min-width: 0; }
.ib-cap b { display: block; font-size: 15px; color: var(--text); }
.ib-cap p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--text-2); }
.ib-caps { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--text-2); }
.ib-caps li { display: inline-flex; align-items: center; gap: 4px; }
.ib-caps .i { font-size: 13px; }
.ib-caps .is-yes .i { color: var(--green); }
.ib-caps .is-no { color: var(--muted); }
.ib-cap .btn-outline { height: 38px; padding: 0 14px; font-size: 14px; border-radius: 7px; border-color: #AFC0FF; color: var(--indigo); flex: none; }
.ib-empty { padding: 36px 16px; }
/* popovers */
.ib-pop { position: absolute; z-index: 30; bottom: calc(100% + 6px); left: 0; width: 260px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: #fff;
  box-shadow: 0 12px 32px rgba(23, 27, 45, .14); }
.ib-pop[hidden] { display: none; }
.ib-pop h4 { margin: 4px 6px 6px; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ib-pop button.ib-opt { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 8px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 14px;
  color: var(--text); cursor: pointer; text-align: left; }
.ib-pop button.ib-opt:hover, .ib-pop button.ib-opt:focus { background: var(--indigo-bg-2); outline: none; }
.ib-pop button.ib-opt.is-on { color: var(--indigo); font-weight: 600; }
.ib-pop .ib-av { width: 26px; height: 26px; font-size: 11px; }
.ib-pop label { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 8px; border-radius: 7px; font-size: 14px; color: var(--text); cursor: pointer; }
.ib-pop label:hover { background: #F7F8FB; }
.ib-pop label input { width: 16px; height: 16px; accent-color: var(--indigo); }
.ib-pop .ib-newlabel { display: flex; gap: 6px; margin: 6px 4px 4px; }
.ib-pop .ib-newlabel input { flex: 1; min-width: 0; height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 13.5px; }
.ib-pop .ib-popfoot { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border-soft); }
.ib-pop .ib-popfoot button { height: 32px; padding: 0 12px; font-size: 13.5px; border-radius: 6px; box-shadow: none; }
.ib-anchor { position: relative; display: inline-flex; }
.ib-ro { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 8px; background: #F0F2F7; font-size: 14px; color: var(--text-2); }
@media (max-width: 1280px) {
  .ib-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); height: auto; }
  .ib-filters { grid-column: 1 / -1; }
  .ib-filters .ib-scroll { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 16px; }
  .ib-filters .ib-sep { display: none; }
  .ib-filters .ib-scroll > div { margin-bottom: 12px; }
  .ib-list-col, .ib-conv { height: max(560px, calc(100vh - 330px)); }
}
@media (max-width: 900px) {
  .ib-cols { grid-template-columns: minmax(0, 1fr); }
  .ib-filters .ib-scroll { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ib-list-col { height: 420px; }
  .ib-conv { height: auto; min-height: 520px; }
  .ib-cap { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .ib-filters .ib-scroll { grid-template-columns: minmax(0, 1fr); }
  .ib-row { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 10px; }
  .ib-av { width: 44px; height: 44px; font-size: 15px; }
  .ib-bubble { max-width: none; }
  .ib-bar { flex-wrap: wrap; }
}

/* ---------- Promotion-24 · Comment thread (tc- this screen, cv- the conversation pieces shared with Promotion-25: the page "Inbox / Comments" — the breadcrumb, the head "Comment thread" with View post / ⋯ / the ‹ › pager, left the post card (the picture, the platform line, "Posted …", the title and caption, the comment count and ⋯, the unavailable-post states) and the comment section (the count, the sort, top-level comments with Reply and ⋯, the selected conversation tinted, nested replies with the elbow line: the business's own replies with their delivery chips, internal notes in amber, hidden / deleted / missing-parent states), right the Comment details card (the person, the text, Reply · Hide / Show again · Delete · Open on {Platform}, the facts) and the reply card (Reply as, Use template with its empty picker, "Replying to …", the textarea with the counter, Add internal note · Link to thread, Draft with AI · Save draft · Reply, the result strip in its delivered / sent / failed / unknown / not-sent tones, the amber note mode, the reason instead of a composer)) — plans/Promotion-24.md, prototype/gen/promotion24.css ---------- */
.cv-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cv-crumbs { display: flex; align-items: center; gap: 8px; margin: 2px 4px -8px; font-size: 15px; color: var(--text-2); flex-wrap: wrap; }
.cv-crumbs a { color: var(--text-2); text-decoration: none; }
.cv-crumbs a:hover { color: var(--indigo); text-decoration: underline; }
.cv-crumbs [aria-hidden] { color: var(--muted-2); }
.cv-head { padding-bottom: 6px; }
.cv-head .po-btn .i { font-size: 18px; }
.cv-mw { position: relative; display: inline-flex; flex: none; }
.cv-mw > .pm-menu { right: 0; top: calc(100% + 4px); min-width: 210px; }
.cv-more { width: 50px; padding: 0 !important; justify-content: center; }
.cv-pager { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #fff; }
.cv-pg { display: grid; place-items: center; width: 42px; height: 40px; color: var(--text-2); text-decoration: none; }
.cv-pg + .cv-pg { border-left: 1px solid var(--border); }
.cv-pg:hover { background: var(--indigo-bg-2); color: var(--indigo); }
.cv-pg .i { font-size: 18px; }
.cv-pg.is-off { color: var(--muted-2); pointer-events: none; }
.cv-ro { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 17px; background: #F0F2F7; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.cv-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 12px; background: #F0F2F7; font-size: 12.5px; font-weight: 600;
  color: var(--text-2); white-space: nowrap; }
.cv-chip .i { font-size: 13px; }
.cv-chip.is-green { background: #E4F7EE; color: #0E7A55; }
.cv-chip.is-amber { background: #FFF3DC; color: #9A5B08; }
.cv-chip.is-red { background: #FDECEE; color: #C0283F; }
.cv-chip.is-blue { background: var(--indigo-bg); color: var(--indigo); }
.cv-chip.is-grey { background: #F0F2F7; color: var(--muted); }
.cv-mini { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px; background: #fff; font: inherit;
  font-size: 13px; font-weight: 600; color: var(--indigo); cursor: pointer; }
.cv-mini:hover { background: var(--indigo-bg-2); }
.cv-mini .i { font-size: 14px; }
.cv-note { position: relative; padding: 11px 14px; border: 1px dashed #F0C674; border-radius: 10px; background: #FFF8EB; }
.cv-note b { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #8A5A0A; }
.cv-note b .i { font-size: 15px; }
.cv-note p { margin: 5px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.cv-note em { display: block; margin-top: 5px; font-style: normal; font-size: 12.5px; color: var(--muted); }
.cv-note time { position: absolute; top: 11px; right: 14px; font-size: 12.5px; color: var(--muted); }
/* the composer */
.cv-composer { padding: 18px 18px 16px; border-radius: 12px; }
.cv-composer h2 { margin: 0 0 12px; font-size: 17px; font-weight: 700; color: var(--text); }
.cv-identity { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; height: 50px; padding: 0 14px 0 6px; border: 1px solid var(--border); border-radius: 9px; }
.cv-identity b { display: block; font-size: 14.5px; font-weight: 700; color: var(--text); }
.cv-identity > div span { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-2); }
.ib-av.is-id { width: 38px; height: 38px; border-radius: 8px; font-size: 14px; }
.cv-tpl { height: 42px; padding: 0 14px; gap: 8px; border-color: #C9D2FF; color: var(--indigo); font-size: 14.5px; font-weight: 600; box-shadow: none; }
.cv-tpl .i { font-size: 16px; }
.cv-tplpop { width: 260px; padding: 14px; gap: 4px; }
.cv-tplpop b { font-size: 14px; color: var(--text); }
.cv-tplpop span { font-size: 13px; color: var(--text-2); }
.cv-to { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 12px 0 8px; font-size: 13.5px; color: var(--text-2); }
.cv-to > span { flex: none; white-space: nowrap; }
.cv-to q { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.cv-to button { display: grid; place-items: center; width: 24px; height: 24px; margin-left: auto; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; flex: none; }
.cv-to button:hover { background: #F3F4F8; color: var(--text); }
.cv-field { position: relative; }
.cv-field textarea { display: block; width: 100%; min-height: 84px; padding: 12px 14px 24px; border: 1px solid var(--border); border-radius: 9px; font: inherit; font-size: 15px;
  line-height: 1.5; color: var(--text); resize: vertical; box-sizing: border-box; }
.cv-field textarea:focus { outline: 2px solid var(--indigo-bg); border-color: var(--indigo); }
.cv-count { position: absolute; right: 12px; bottom: 6px; font-size: 12px; color: var(--muted); pointer-events: none; }
.cv-count.is-over { color: #C0283F; font-weight: 600; }
.cv-tools { display: flex; align-items: center; gap: 14px; min-height: 42px; margin-top: 4px; border-bottom: 1px solid var(--border-soft); }
.cv-tools .sp, .cv-foot .sp { flex: 1; }
.cv-ghost { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 6px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 14px; color: var(--text-2); cursor: pointer; }
.cv-ghost:hover { background: #F5F6FA; color: var(--text); }
.cv-ghost .i { font-size: 17px; }
.cv-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--indigo); text-decoration: none; }
.cv-link:hover { text-decoration: underline; }
.cv-link .i { font-size: 16px; }
.cv-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.cv-foot .btn-primary, .cv-foot .btn-outline { height: 42px; padding: 0 18px; font-size: 15px; font-weight: 600; box-shadow: none; gap: 8px; }
.cv-foot .btn-outline { border-color: #C9D2FF; color: var(--indigo); }
.cv-foot .btn-primary { min-width: 106px; justify-content: center; }
.cv-foot .i { font-size: 17px; }
.cv-hint { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 13px; color: var(--text-2); }
.cv-hint .i { font-size: 15px; color: var(--indigo); }
.cv-result { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: #EAF8F1; }
.cv-result .cv-rdisc { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #12B981; color: #fff; flex: none; }
.cv-result .cv-rdisc .i { font-size: 18px; }
.cv-result div { flex: 1 1 auto; min-width: 0; }
.cv-result b { display: block; font-size: 14.5px; font-weight: 700; color: var(--text); }
.cv-result span { display: block; font-size: 13.5px; color: var(--text-2); overflow-wrap: anywhere; }
.cv-result a, .cv-result button { flex: none; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 14px; font-weight: 600; color: var(--indigo); text-decoration: none;
  background: none; border: 0; cursor: pointer; padding: 6px 4px; }
.cv-result a:hover, .cv-result button:hover { text-decoration: underline; }
.cv-result.is-sent { background: var(--indigo-bg-2); } .cv-result.is-sent .cv-rdisc { background: var(--indigo); }
.cv-result.is-failed { background: #FDECEE; } .cv-result.is-failed .cv-rdisc { background: #F0546A; }
.cv-result.is-unknown { background: #FFF6E5; } .cv-result.is-unknown .cv-rdisc { background: #F59E0B; }
.cv-result.is-notsent { background: #F4F6FA; } .cv-result.is-notsent .cv-rdisc { background: #9CA3AF; }
.cv-reason { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 9px; background: #F4F6FA; font-size: 14px; color: var(--text-2); line-height: 1.45; }
.cv-reason .i { font-size: 18px; color: var(--indigo); flex: none; margin-top: 1px; }
.cv-reason.is-warn { background: #FFF6E5; } .cv-reason.is-warn .i { color: #D97706; }
.cv-reason a { color: var(--indigo); font-weight: 600; }
.cv-mode.is-note { margin: -18px -18px -16px; padding: 18px 18px 16px; border-radius: 12px; background: #FFFBF2; }
.cv-mode.is-note h2 { color: #8A5A0A; }
.cv-notesub { display: flex; align-items: center; gap: 6px; margin: -6px 0 10px; font-size: 13.5px; color: #8A5A0A; }
.cv-mode.is-note textarea { border-color: #F0C674; background: #fff; }
.cv-notebtn.btn-primary { background: #B7791F; border-color: #B7791F; }
.cv-notebtn.btn-primary:hover { background: #975A16; }
/* the page's columns */
.tc-cols { display: grid; grid-template-columns: minmax(0, 810fr) minmax(0, 570fr); gap: 16px; align-items: start; }
.tc-left, .tc-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tc-post { display: flex; gap: 22px; padding: 14px; border-radius: 12px; }
.tc-pic { position: relative; flex: none; width: 220px; height: 112px; border-radius: 8px; overflow: hidden; background: var(--track); }
.tc-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-pic .ph-art { position: absolute; inset: 0; }
.tc-nopic { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%; font-size: 13px; color: var(--muted); }
.tc-nopic svg { width: 28px; height: 28px; }
.tc-pmain { flex: 1 1 auto; min-width: 0; padding-top: 2px; }
.tc-pline { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); }
.tc-pline i { font-style: normal; color: var(--muted-2); }
.tc-pf { width: 20px; height: 20px; flex: none; }
.tc-posted { margin-top: 2px; font-size: 14px; color: var(--muted); }
.tc-pmain h2 { margin: 12px 0 4px; font-size: 17px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-pmain p { margin: 0; font-size: 15px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-pside { display: flex; align-items: flex-start; gap: 10px; flex: none; }
.tc-count { display: inline-flex; align-items: center; gap: 6px; height: 34px; font-size: 14.5px; color: var(--text-2); }
.tc-count .i { font-size: 19px; }
.tc-postgone { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 12px; }
.tc-postgone .i { font-size: 22px; color: var(--muted); flex: none; margin-top: 2px; }
.tc-postgone b { display: block; font-size: 15px; color: var(--text); }
.tc-postgone span { display: block; margin-top: 3px; font-size: 14px; color: var(--text-2); }
.tc-comments { padding: 0; border-radius: 12px; overflow: visible; }
.tc-chead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); }
.tc-chead h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
.tc-chead .ib-sort select { border-color: transparent; font-size: 14.5px; }
.tc-list { margin: 0; padding: 6px 8px 8px; list-style: none; }
.tc-c { padding: 10px 8px; border-radius: 10px; }
.tc-c + .tc-c { margin-top: 2px; }
.tc-c.is-selected { background: #F4F6FF; box-shadow: inset 3px 0 0 var(--indigo); }
.tc-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; }
.ib-av.is-md { width: 46px; height: 46px; font-size: 15px; }
.tc-c1 { display: flex; align-items: baseline; gap: 14px; }
.tc-c1 b { font-size: 15px; font-weight: 600; color: var(--text); }
.tc-c1 time { font-size: 13px; color: var(--muted); }
.tc-text { margin: 3px 0 0; font-size: 15px; line-height: 1.5; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.tc-c.is-hidden > .tc-row .tc-text { color: var(--muted); }
.tc-gone { margin: 3px 0 0; font-size: 14.5px; font-style: italic; color: var(--muted); }
.tc-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 5px; min-height: 30px; }
.tc-act { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 8px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 14.5px; color: var(--text-2); cursor: pointer; }
.tc-act:hover { background: rgba(59, 91, 253, .07); color: var(--indigo); }
.tc-act .i { font-size: 18px; }
.tc-act:disabled { color: var(--muted-2); cursor: not-allowed; background: none; }
.tc-acts .cv-chip { margin-left: auto; }
.tc-acts .cv-chip + .cv-mini { margin-left: 0; }
.tc-replies { position: relative; margin: 8px 0 0; padding: 0 0 0 62px; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.tc-replies::before { content: ""; position: absolute; left: 28px; top: -6px; width: 22px; height: 26px; border-left: 1px solid #C9CFDD; border-bottom: 1px solid #C9CFDD; border-bottom-left-radius: 8px; }
.tc-reply .tc-row { gap: 12px; }
.tc-reply.is-own .ib-av { border-radius: 8px; }
.tc-reply .tc-why { margin: 4px 0 0; font-size: 13px; color: var(--text-2); }
.tc-reply.is-failed .tc-text, .tc-reply.is-unknown .tc-text { color: var(--text-2); }
.tc-missing { margin: 0 0 6px; font-size: 13px; font-style: italic; color: var(--muted); }
.tc-details { padding: 16px 18px 16px; border-radius: 12px; }
.tc-details h2 { margin: 0 0 14px; font-size: 17px; font-weight: 700; color: var(--text); }
.tc-who { display: flex; align-items: center; gap: 14px; }
.tc-who > div { flex: 1 1 auto; min-width: 0; }
.tc-who b { display: block; font-size: 15.5px; font-weight: 700; color: var(--text); }
.tc-who > div span { display: block; font-size: 14px; color: var(--text-2); }
.tc-who time { font-size: 13.5px; color: var(--text-2); white-space: nowrap; }
.ib-av.is-lg { width: 50px; height: 50px; font-size: 16px; }
.tc-dtext { margin: 12px 0 14px; font-size: 15px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.tc-dacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tc-dacts .btn-outline { justify-content: center; height: 40px; padding: 0 8px; gap: 8px; font-size: 14.5px; box-shadow: none; text-decoration: none; min-width: 0; white-space: nowrap; overflow: hidden; }
.tc-dacts .btn-outline .i { font-size: 17px; }
.tc-dacts .btn-outline:disabled, .tc-dacts .btn-outline.is-off { color: var(--muted-2); cursor: not-allowed; background: #FAFBFD; }
.tc-dfacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tc-idrow { display: flex; align-items: center; gap: 14px; }
.tc-as { flex: none; font-size: 14.5px; color: var(--text-2); }
@media (max-width: 1280px) {
  .tc-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .cv-head { flex-wrap: wrap; }
  .cv-head .po-actions { flex-wrap: wrap; }
  .tc-post { flex-direction: column; gap: 12px; }
  .tc-pic { width: 100%; height: 160px; }
  .tc-dacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tc-idrow { flex-wrap: wrap; }
  .tc-replies { padding-left: 34px; }
  .tc-replies::before { left: 14px; width: 12px; }
}
/* build additions: the menu note, the deleted-post line, the draft line, the assign menu avatars, the disabled Draft with AI */
.cv-menunote { display: block; max-width: 240px; padding: 6px 10px; font-size: 13px; color: var(--text-2); }
.tc-postnote { display: flex; align-items: center; gap: 6px; margin-top: 6px !important; font-size: 13.5px !important; color: #9A5B08 !important; white-space: normal !important; }
.cv-gap { height: 12px; }
.cv-draftline { margin-top: 8px; }
.ib-av.is-mini { width: 26px; height: 26px; font-size: 11px; }
.cv-assignmenu a.is-on { color: var(--indigo); font-weight: 600; }
.cv-foot .btn-outline.is-off { opacity: .55; cursor: not-allowed; }
.cv-hint a { color: var(--indigo); font-weight: 600; }
.tc-why { margin: 4px 0 0; font-size: 13px; color: var(--text-2); }
.ib-note-line a { color: var(--indigo); font-weight: 600; }
.ib-note-line.is-warn { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: #9A5B08; }
/* ---------- Promotion-25 · Direct message conversation (dm- this screen, with Promotion-24's cv- pieces: the page "Inbox / Messages" — the head with Assign / More actions / the ‹ › pager, three columns: the message list (the count, the account select, the search, rows with the avatar and platform badge, the name, the time, the last text and the unread dot, the selected row), the conversation (the head with the Active / Closed chip, the timeline with incoming grey and outgoing indigo bubbles, the ✓ / ✓✓ ticks, the delivery chips with Verify / Send again, the shared file card, the amber internal notes, the composer with the Reply / Internal note tabs, Save draft and the split Send reply) and the details column (Conversation details with View profile and the facts, Assignment, Reply window, Message status, Verification)) — plans/Promotion-25.md, prototype/gen/promotion25.css ---------- */
.dm-cols { display: grid; grid-template-columns: minmax(0, 418fr) minmax(0, 575fr) minmax(0, 385fr); gap: 10px; align-items: stretch; height: max(620px, calc(100vh - 330px)); min-height: 0; }
.dm-list, .dm-conv { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border-radius: 12px; padding: 0; }
.dm-lhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 16px 10px; }
.dm-lhead h2 { display: flex; align-items: center; gap: 10px; margin: 0; white-space: nowrap; font-size: 19px; font-weight: 700; color: var(--text); }
.dm-lhead .ib-n { height: 24px; font-size: 13px; }
.dm-search { display: flex; align-items: center; gap: 8px; margin: 0 16px 8px; height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); }
.dm-search input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 14.5px; background: none; color: var(--text); }
.dm-search .i { font-size: 17px; }
.dm-rows { flex: 1; min-height: 0; overflow: auto; margin: 0; padding: 0 0 8px; list-style: none; }
.dm-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; min-height: 76px; padding: 10px 16px 10px 22px; border-bottom: 1px solid var(--border-soft);
  color: inherit; text-decoration: none; position: relative; }
.dm-row:hover { background: #F7F8FC; }
.dm-row.is-selected { background: #F0F3FF; }
.dm-row.is-unread::before { content: ""; position: absolute; left: 8px; top: 50%; width: 7px; height: 7px; margin-top: -3px; border-radius: 50%; background: var(--indigo); }
.dm-r1 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dm-r1 b { font-size: 16px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-r1 time { flex: none; font-size: 13.5px; color: var(--text-2); }
.dm-r2 { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.dm-r2 p { flex: 1; min-width: 0; margin: 0; font-size: 15px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-r2 .ib-dot { display: none; }
.dm-closed { font-size: 12px; color: var(--muted); }
.dm-chead { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px; border-bottom: 1px solid var(--border-soft); }
.dm-who { flex: 1 1 auto; min-width: 0; }
.dm-who b { display: block; font-size: 17px; font-weight: 700; color: var(--text); }
.dm-who span { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-2); }
.dm-who i { font-style: normal; color: var(--muted-2); }
.dm-pf { width: 16px; height: 16px; flex: none; }
.dm-scroll { flex: 1; min-height: 0; overflow: auto; padding: 14px 18px 10px; }
.dm-msgs { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.dm-msg { display: flex; gap: 12px; align-items: flex-start; max-width: 86%; }
.dm-msg > div { min-width: 0; }
.dm-msg.is-out { align-self: flex-end; flex-direction: row-reverse; }
.dm-msg.is-out > div { display: flex; flex-direction: column; align-items: flex-end; }
.dm-msg.is-out > .cv-chip { align-self: flex-end; }
.dm-bubble { padding: 10px 14px; border-radius: 12px; background: #F1F3F8; font-size: 15px; line-height: 1.45; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.dm-msg.is-out .dm-bubble { background: var(--indigo); color: #fff; }
.dm-msg.is-failed .dm-bubble, .dm-msg.is-unknown .dm-bubble { background: #E8ECFF; color: var(--text); }
.dm-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; color: var(--text-2); flex-wrap: wrap; }
.dm-msg.is-out .dm-meta { justify-content: flex-end; }
.dm-ticks { display: inline-flex; color: var(--indigo); }
.dm-ticks .i { font-size: 14px; }
.dm-ticks .i + .i { margin-left: -8px; }
.dm-why { margin: 4px 0 0; max-width: 360px; font-size: 13px; color: var(--text-2); text-align: right; }
.dm-file { display: flex; align-items: center; gap: 14px; width: 330px; max-width: 100%; margin-top: 8px; padding: 8px 12px 8px 8px; border: 1px solid var(--border); border-radius: 10px; background: #fff; text-align: left; }
.dm-fmark { display: grid; place-items: center; flex: none; width: 96px; height: 58px; border-radius: 7px; background: linear-gradient(135deg, #DDE4FF, #F1F4FF); color: var(--indigo); }
.dm-fmark .i { font-size: 20px; }
.dm-fmark b { font-size: 11px; letter-spacing: .06em; }
.dm-file div b { display: block; font-size: 14.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.dm-file div span { display: block; font-size: 13px; color: var(--text-2); }
.dm-msg.is-note { max-width: none; align-self: stretch; display: block; }
.dm-compose { flex: none; padding: 0 16px 14px; border-top: 1px solid var(--border-soft); border-radius: 0; box-shadow: none; }
.dm-tabs { display: flex; gap: 22px; margin-bottom: 10px; border-bottom: 1px solid var(--border-soft); }
.dm-tab { height: 40px; padding: 0 4px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 15px; color: var(--text-2); cursor: pointer; }
.dm-tab.is-active { border-bottom-color: var(--indigo); color: var(--indigo); font-weight: 600; }
.dm-compose .cv-field textarea { min-height: 54px; }
.dm-compose .cv-foot { margin-top: 10px; }
.dm-compose .cv-mode.is-note { margin: 0; padding: 0; background: none; }
.dm-compose .cv-notesub { margin: 8px 0 0; }
.dm-split { display: inline-flex; }
.dm-split > .btn-primary { border-radius: var(--radius) 0 0 var(--radius); }
.dm-caret.btn-primary { width: 38px; min-width: 0 !important; height: 42px; padding: 0 !important; justify-content: center; border-left: 1px solid rgba(255, 255, 255, .35); border-radius: 0 var(--radius) var(--radius) 0; box-shadow: none; }
.dm-sendmenu { bottom: calc(100% + 4px); top: auto !important; right: 0; min-width: 260px; }
.dm-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; overflow: auto; }
.dm-card { padding: 14px 16px; border-radius: 12px; }
.dm-card h2 { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--text); }
.dm-person { display: flex; align-items: center; gap: 12px; }
.dm-person > div { flex: 1 1 auto; min-width: 0; }
.dm-person b { display: block; font-size: 16px; font-weight: 700; color: var(--text); }
.dm-person > div span { display: block; font-size: 14px; color: var(--text-2); }
.dm-profile { height: 36px; padding: 0 12px; gap: 6px; border-color: #C9D2FF; color: var(--indigo); font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: none; flex: none; }
.dm-profile .i { font-size: 15px; }
.dm-facts { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.dm-facts li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--text); min-width: 0; }
.dm-facts li > .i, .dm-facts li > svg { font-size: 19px; width: 19px; height: 19px; color: var(--muted); flex: none; }
.dm-labels { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dm-plus { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 50%; background: #fff; color: var(--text-2); cursor: pointer; }
.dm-plus .i { font-size: 14px; }
.dm-row2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dm-ch { display: flex; align-items: center; gap: 10px; }
.dm-ch > .i { font-size: 19px; color: var(--muted); }
.dm-ch b { font-size: 16px; font-weight: 700; color: var(--text); }
.dm-ch .cv-chip { margin-left: auto; }
.dm-i { margin-left: auto; color: var(--muted); display: inline-flex; }
.dm-assignee { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px 0 8px; min-width: 170px; border: 1px solid var(--border); border-radius: 8px; background: #fff;
  font: inherit; font-size: 14.5px; color: var(--text); cursor: pointer; }
.dm-assignee .i:last-child { margin-left: auto; font-size: 15px; color: var(--muted); }
.dm-sub { margin: 6px 0 0 29px; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.dm-state { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 0 29px; }
.dm-state b { display: block; font-size: 14.5px; font-weight: 600; color: var(--text); }
.dm-state span { display: block; font-size: 13.5px; color: var(--text-2); overflow-wrap: anywhere; }
.dm-tick { display: grid !important; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #12B981; color: #fff; flex: none; }
.dm-tick .i { font-size: 13px; }
.dm-tick.is-amber { background: #F59E0B; } .dm-tick.is-red { background: #F0546A; } .dm-tick.is-blue { background: var(--indigo); } .dm-tick.is-grey { background: #C3C8D4; }
.dm-state .cv-mini { margin-top: 6px; }
.dm-empty { padding: 20px 16px; font-size: 14px; color: var(--muted); }
@media (max-width: 1280px) {
  .dm-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: auto; }
  .dm-list { grid-column: 1 / -1; max-height: 340px; }
  .dm-conv { min-height: 620px; }
}
@media (max-width: 900px) {
  .dm-cols { grid-template-columns: minmax(0, 1fr); }
  .dm-conv { min-height: 560px; max-height: 80vh; }
  .dm-msg { max-width: 100%; }
  .dm-file { width: 100%; }
}
/* build additions: the label menu, the empty label line, the read-only assignee */
.dm-labelpop { right: 0; top: calc(100% + 4px); width: 240px; padding: 10px; gap: 2px; }
.dm-labelpop b { margin: 0 4px 4px; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.dm-labelpop label { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 6px; border-radius: 7px; font-size: 14px; color: var(--text); cursor: pointer; }
.dm-labelpop label:hover { background: #F7F8FB; }
.dm-labelpop label input { width: 16px; height: 16px; accent-color: var(--indigo); }
.dm-labelpop input[type=text] { height: 32px; margin: 6px 4px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 13.5px; }
.dm-labelpop .btn-primary { align-self: flex-end; height: 32px; padding: 0 14px; font-size: 13.5px; box-shadow: none; }
.dm-nolabel { font-size: 13.5px; color: var(--muted); }
.dm-assignee.is-ro { cursor: default; }

/* ---------- Promotion-26 · Start conversation (nc- this screen: Compose's caret menu with the saved drafts, the 550 px modal over the inbox — the head with ×, the four numbered fields (the account button and its menu with the disabled accounts and their reasons, the recipient button and the people picker with search and the muted people who cannot be written to, the restriction sentence beside the field, the messaging method with the eligibility strip, the message with Use template, the counter and the open-placeholder line), the Message preview with the recipient's avatar and the grey bubble, the result strip and the footer Save as draft · Cancel · Send message) — plans/Promotion-26.md, prototype/gen/promotion26.css ---------- */
.nc-split .ib-caret { border-radius: 0 var(--radius) var(--radius) 0; }
.nc-mw { position: relative; display: inline-flex; }
.nc-compose-menu { right: 0; left: auto; top: calc(100% + 6px); min-width: 280px; }
.nc-compose-menu a span { display: flex; flex-direction: column; min-width: 0; }
.nc-compose-menu small { font-size: 12px; color: var(--muted); font-weight: 400; }
.nc-menuhead { display: block; padding: 8px 12px 4px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.nc-menunote { display: block; padding: 4px 12px 8px; font-size: 13px; color: var(--muted); }
.nc-backdrop { position: fixed; inset: 0; z-index: 81; background: rgba(23, 27, 45, .34); }
.nc-modal { position: fixed; z-index: 82; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; width: 550px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px); background: var(--surface); border-radius: 12px; box-shadow: 0 24px 64px rgba(23, 27, 45, .22); }
.nc-modal:focus { outline: none; }
.nc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 24px 4px; }
.nc-head h2 { margin: 0; font-size: 21px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.nc-head p { margin: 2px 0 0; font-size: 14.5px; color: var(--text-2); }
.nc-close { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--text-2); cursor: pointer; flex: none; }
.nc-close:hover { background: #F3F4F8; }
.nc-close .i { font-size: 20px; }
.nc-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 8px 24px 4px; }
.nc-field { margin-top: 14px; }
.nc-label { display: block; margin-bottom: 8px; font-size: 14.5px; font-weight: 700; color: var(--text); }
.nc-lrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.nc-lrow .nc-label { margin: 0; }
.nc-field > .nc-mw { display: flex; }
.nc-pick { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 14px 8px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  font: inherit; text-align: left; color: var(--text); cursor: pointer; }
.nc-pick:hover { border-color: #CBD2E4; }
.nc-pick:focus-visible { outline: 2px solid var(--indigo-bg); border-color: var(--indigo); }
.nc-pick.is-bad { border-color: #F2B3BD; }
.nc-pick .nc-pmain { flex: 1 1 auto; min-width: 0; }
.nc-pick b { display: block; font-size: 14.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-pick small { display: block; font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-pick > .i { flex: none; font-size: 18px; color: var(--text-2); }
.nc-pf { width: 26px; height: 26px; flex: none; }
.nc-pick .ib-av, .nc-pop .ib-av, .nc-prow .ib-av { width: 40px; height: 40px; font-size: 14px; }
.nc-chip { flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 12px; font-size: 12.5px; font-weight: 600; background: var(--green-bg); color: var(--green-text); }
.nc-chip.is-amber { background: var(--amber-bg); color: var(--amber-text); }
.nc-chip.is-grey { background: #F0F2F7; color: var(--text-2); }
.nc-pop { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); max-height: 320px; overflow: auto; margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(23, 27, 45, .14); }
.nc-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; font: inherit; text-align: left; color: var(--text); cursor: pointer; }
.nc-opt:hover, .nc-opt:focus-visible, .nc-opt.is-on { background: #F4F6FF; outline: none; }
.nc-opt .nc-pmain { flex: 1 1 auto; min-width: 0; }
.nc-opt b { display: block; font-size: 14.5px; font-weight: 600; }
.nc-opt small { display: block; font-size: 13px; color: var(--text-2); }
.nc-opt .nc-why { color: #B4233A; white-space: normal; }
.nc-opt.is-off { cursor: default; }
.nc-opt.is-off b, .nc-opt.is-off .nc-pf, .nc-opt.is-off .ib-av { opacity: .55; }
.nc-opt.is-off:hover { background: none; }
.nc-people { padding: 0; }
.nc-people ul { margin: 0; padding: 6px; list-style: none; }
.nc-search { position: sticky; top: 0; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-bottom: 1px solid var(--border-soft); background: var(--surface); color: var(--muted); }
.nc-search input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 14.5px; background: none; color: var(--text); }
.nc-empty { padding: 14px 12px; font-size: 14px; color: var(--text-2); }
.nc-empty b { display: block; color: var(--text); }
.nc-restrict { display: flex; gap: 8px; margin: 8px 0 0; padding: 10px 12px; border-radius: 8px; background: #FDECEE; font-size: 13.5px; line-height: 1.45; color: #9F1D33; }
.nc-restrict .i { flex: none; font-size: 17px; margin-top: 1px; }
.nc-method { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 14.5px; color: var(--text); }
.nc-method .nc-pf { width: 24px; height: 24px; }
.nc-method .sp { flex: 1; }
.nc-method > .i { font-size: 18px; color: var(--muted); }
.nc-method.is-off { color: var(--muted); background: #F8F9FB; }
.nc-elig { display: flex; gap: 12px; margin-top: 8px; padding: 12px 14px; border-radius: 8px; background: #EEF3FF; }
.nc-elig > .i { flex: none; font-size: 20px; color: var(--indigo); margin-top: 1px; }
.nc-elig b { display: block; font-size: 14px; font-weight: 600; color: var(--indigo); }
.nc-elig span { display: block; font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.nc-elig.is-warn { background: var(--amber-bg); }
.nc-elig.is-warn > .i, .nc-elig.is-warn b { color: var(--amber-text); }
.nc-elig.is-grey { background: #F4F6FA; }
.nc-elig.is-grey > .i, .nc-elig.is-grey b { color: var(--text-2); }
.nc-tpl { height: 34px; padding: 0 12px; gap: 6px; font-size: 13.5px; }
.nc-tplpop { right: 0; left: auto; top: calc(100% + 6px); width: 340px; max-height: 320px; overflow: auto; }
.nc-text textarea { min-height: 118px; font-size: 14.5px; line-height: 1.5; }
.nc-missing { display: flex; gap: 8px; margin: 8px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--amber-bg); font-size: 13.5px; color: var(--amber-text); }
.nc-preview { margin-top: 14px; padding: 12px 14px 16px; border-radius: 10px; background: #F4F6FB; }
.nc-plabel { display: block; margin: 0 0 8px 48px; font-size: 13px; color: var(--text-2); }
.nc-prow { display: flex; align-items: flex-end; gap: 10px; }
.nc-bubble { max-width: 86%; padding: 10px 14px; border-radius: 12px; background: #E9ECF3; font-size: 13.5px; line-height: 1.5; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.nc-bubble.is-empty { color: var(--muted); }
.nc-body .cv-result { margin-top: 12px; }
.nc-foot { display: flex; align-items: center; gap: 10px; padding: 16px 24px 18px; }
.nc-foot .sp { flex: 1; }
.nc-foot .btn-primary, .nc-foot .btn-outline { height: 40px; padding: 0 16px; gap: 8px; font-size: 14.5px; white-space: nowrap; }
.nc-foot .btn-primary[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.nc-compose-menu a, .nc-tplpop a { height: auto; min-height: 38px; padding: 6px 10px; }
.nc-tplpop a span { display: flex; flex-direction: column; min-width: 0; }
.nc-tplpop small { font-size: 12px; color: var(--muted); font-weight: 400; }
.nc-pick:disabled, .nc-tpl:disabled, #nc-draft:disabled { opacity: .55; cursor: not-allowed; }
.cv-tplpop { width: 320px; padding: 6px; }
.cv-tplpop a { height: auto; min-height: 40px; padding: 6px 10px; }
.cv-tplpop .cv-tplrow { display: flex; flex-direction: column; min-width: 0; font-size: 14px; color: var(--text); }
.cv-tplpop .cv-tplrow small { font-size: 12px; color: var(--muted); }
.cv-tplpop .cv-tplhead { display: block; padding: 6px 10px 4px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.cv-tplnone { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px 8px; }
.cv-tpl:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 600px) {
  .nc-modal { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: 100%; max-width: 100%; max-height: 94vh; border-radius: 14px 14px 0 0; }
  .nc-head, .nc-body, .nc-foot { padding-left: 16px; padding-right: 16px; }
  .nc-foot { flex-wrap: wrap; }
  .nc-foot .sp { display: none; }
  .nc-foot > * { flex: 1 1 auto; justify-content: center; }
  .nc-tplpop { width: min(340px, calc(100vw - 32px)); }
}

/* ---------- Promotion-27 · Contact and conversation context (ck- this screen: the 660 px right drawer over the inbox — the head with ×, the profile block with the provider's public facts (avatar, name and local name, handle, bio, location, followers / following, follower since) beside the Source column (the provider line, when it was checked, ⋯, the Identity status with its chip), the two-column card grid (Linked CRM contact with the inline link form and the suggested matches; Tags with the chips and Add tag; Owner with Change owner), Internal notes with the editor, Recent conversations, the source chip on every card title and the sticky footer Reply on {Platform} · Link CRM contact · More actions) — plans/Promotion-27.md, prototype/gen/promotion27.css ---------- */
.ck-backdrop { position: fixed; inset: 0; z-index: 81; background: rgba(23, 27, 45, .28); }
.ck-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 82; display: flex; flex-direction: column; width: 660px; max-width: 100%; background: var(--surface);
  box-shadow: -18px 0 48px rgba(23, 27, 45, .16); }
.ck-drawer:focus { outline: none; }
.ck-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px 10px; }
.ck-head h2 { margin: 0; font-size: 21px; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.ck-close { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--text-2); cursor: pointer; flex: none; }
.ck-close:hover { background: #F3F4F8; }
.ck-close .i { font-size: 20px; }
.ck-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 6px 24px 20px; }
.ck-profile { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 18px; padding-bottom: 16px; }
.ck-pmain { display: flex; gap: 16px; min-width: 0; }
.ib-av.ck-av { width: 92px; height: 92px; font-size: 30px; flex: none; }
.ck-pfacts { min-width: 0; }
.ck-pfacts h3 { margin: 4px 0 2px; font-size: 20px; font-weight: 700; color: var(--text); }
.ck-pfacts p { margin: 2px 0 0; font-size: 13.5px; color: var(--text-2); line-height: 1.45; overflow-wrap: anywhere; }
.ck-local { font-size: 12.5px !important; color: var(--muted) !important; }
.ck-handle { display: flex; align-items: center; gap: 6px; font-size: 14px !important; color: var(--text) !important; }
.ck-pf { width: 18px; height: 18px; flex: none; }
.ck-sub { color: var(--muted) !important; }
.ck-bio { margin-top: 8px !important; color: var(--text) !important; }
.ck-loc { display: flex; align-items: center; gap: 6px; }
.ck-loc .i { font-size: 16px; color: var(--muted); }
.ck-counts b { font-weight: 700; color: var(--text); }
.ck-counts b + b, .ck-counts b:not(:first-child) { margin-left: 10px; }
.ck-since { color: var(--muted) !important; }
.ck-noprofile { margin-top: 8px !important; color: var(--muted) !important; }
.ck-source { padding-left: 18px; border-left: 1px solid var(--border-soft); min-width: 0; }
.ck-srow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ck-srow b { font-size: 14px; font-weight: 700; color: var(--text); }
.ck-sline { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 13.5px; color: var(--text); }
.ck-smeta { margin: 2px 0 0 24px; font-size: 12.5px; color: var(--muted); }
.ck-idstat { margin-top: 14px; }
.ck-idstat .ck-idh { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--text); }
.ck-idstat .ck-idh .i { font-size: 15px; color: var(--muted); }
.ck-idstat p { margin: 6px 0 0; font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.ck-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; margin-top: 6px; padding: 0 10px; border-radius: 12px; font-size: 12.5px; font-weight: 600; background: #F0F2F7; color: var(--text-2); }
.ck-chip.is-amber { background: var(--amber-bg); color: var(--amber-text); }
.ck-chip.is-green { background: var(--green-bg); color: var(--green-text); }
.ck-mw { position: relative; display: inline-flex; }
.ck-dots { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-2); cursor: pointer; }
.ck-dots .i { font-size: 18px; }
.ck-mw .po-menu { right: 0; left: auto; top: calc(100% + 6px); min-width: 230px; }
.ck-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.ck-stack { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ck-card { min-width: 0; margin-top: 10px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.ck-grid .ck-card, .ck-stack .ck-card { margin-top: 0; }
.ck-ch { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ck-ch .i { font-size: 18px; color: var(--text-2); flex: none; }
.ck-ch h4 { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--text); }
.ck-ch .sp { flex: 1; }
.ck-src { margin-left: auto; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px; background: #F0F2F7; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.ck-ch .sp + .ck-link, .ck-ch .ck-src + .sp { margin-left: 0; }
.ck-link { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--indigo); cursor: pointer; text-decoration: none; }
.ck-link:hover { text-decoration: underline; }
.ck-link .i { font-size: 15px; color: inherit; }
.ck-crm h5 { margin: 4px 0 2px 26px; font-size: 14px; font-weight: 700; color: var(--text); }
.ck-crm p { margin: 0 0 12px 26px; font-size: 13px; color: var(--text-2); line-height: 1.45; }
.ck-crm .ck-cta { margin-left: 26px; }
.ck-crm .ck-sugg-link { display: block; margin: 10px 0 0 26px; }
.ck-record { margin-left: 26px; }
.ck-record b { display: block; font-size: 14.5px; color: var(--text); }
.ck-record span { display: block; font-size: 13px; color: var(--text-2); }
.ck-record .ck-link { margin-top: 10px; color: #B4233A; }
.ck-form { display: grid; gap: 10px; margin-top: 6px; }
.ck-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--text); }
.ck-form select, .ck-form input[type=text] { height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); }
.ck-form .ck-tick { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; font-size: 13px; color: var(--text-2); }
.ck-form .ck-tick input { margin-top: 2px; }
.ck-form .ck-ferr { font-size: 12.5px; color: #B4233A; }
.ck-form .ck-fbtns { display: flex; gap: 8px; justify-content: flex-end; }
.ck-form .btn-outline, .ck-form .btn-primary, .ck-card .ck-cta { height: 36px; padding: 0 14px; font-size: 14px; white-space: nowrap; }
.ck-sugg { margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--border-soft); list-style: none; }
.ck-sugg > b { display: block; font-size: 13px; color: var(--text); }
.ck-sugg > span { display: block; margin-bottom: 6px; font-size: 12.5px; color: var(--muted); }
.ck-sugg li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13.5px; }
.ck-sugg li .ck-chip { margin: 0; }
.ck-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ck-tag { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 6px 0 10px; border-radius: 8px; background: var(--green-bg); font-size: 13px; font-weight: 600; color: var(--green-text); }
.ck-tag:nth-child(3n+2) { background: #E8F7EE; }
.ck-tag:nth-child(3n) { background: #F0F2F7; color: var(--text-2); }
.ck-tag button { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 5px; background: none; color: inherit; cursor: pointer; }
.ck-tag button:hover { background: rgba(0, 0, 0, .06); }
.ck-tag .i { font-size: 13px; }
.ck-addtag { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.ck-taginput { height: 32px; width: 160px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13.5px; }
.ck-owner { display: flex; align-items: center; gap: 10px; }
.ib-av.ck-oav { width: 38px; height: 38px; font-size: 13px; }
.ck-owner > div { flex: 1 1 auto; min-width: 0; }
.ck-owner > div b { display: block; font-size: 14.5px; color: var(--text); }
.ck-owner > div span { display: block; font-size: 13px; color: var(--text-2); }
.ck-change { height: 36px; padding: 0 14px; font-size: 14px; white-space: nowrap; }
.ck-note p { margin: 0; padding: 10px 12px; border-radius: 8px; background: #F4F6FB; font-size: 13.5px; line-height: 1.5; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.ck-note span { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.ck-note .ck-empty { color: var(--muted); background: none; padding: 0; }
.ck-noteedit textarea { display: block; width: 100%; min-height: 84px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; resize: vertical; }
.ck-nfoot { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.ck-nfoot .sp { flex: 1; }
.ck-nfoot .btn-outline, .ck-nfoot .btn-primary { height: 34px; padding: 0 12px; font-size: 13.5px; }
.ck-convs { margin: 0; padding: 0; list-style: none; }
.ck-convs li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border-soft); }
.ck-convs li:first-child { border-top: 0; padding-top: 0; }
.ck-convs .ib-av { width: 34px; height: 34px; font-size: 12px; }
.ck-cmain b { display: block; font-size: 13.5px; font-weight: 700; color: var(--text); }
.ck-cmain b em { margin-left: 6px; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--indigo); }
.ck-cmain p { margin: 1px 0 0; font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-cmain a { color: inherit; text-decoration: none; }
.ck-cside { text-align: right; font-size: 12.5px; color: var(--text-2); }
.ck-cside time, .ck-cside span { display: block; white-space: nowrap; }
.ck-none { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.ck-foot { display: flex; align-items: center; gap: 10px; padding: 14px 24px 16px; border-top: 1px solid var(--border-soft); background: var(--surface); }
.ck-foot > .btn-primary, .ck-foot > .btn-outline, .ck-foot .ck-mw > .btn-outline { height: 40px; padding: 0 16px; gap: 8px; font-size: 14.5px; white-space: nowrap; justify-content: center; }
.ck-foot .ck-reply { flex: 1.3 1 0; }
.ck-foot > .btn-outline, .ck-foot > .ck-mw { flex: 1 1 0; }
.ck-foot > .ck-mw > .btn-outline { width: 100%; }
.ck-foot .ck-moremenu { top: auto; bottom: calc(100% + 6px); }
.ck-readonly { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.cv-contact { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.cv-contact:hover { color: var(--indigo); text-decoration: underline; }
.cv-contact.is-link { color: var(--indigo); font-weight: 600; }
.ck-record .ck-rnote { margin-top: 4px; font-size: 12px; color: var(--muted); }
.ck-crm .ck-noconn { margin: 0 0 0 26px; font-size: 13px; color: var(--text-2); }
/* backlog 5.39 · "Create a new contact" as a change plan */
.ck-plan { margin: 12px 0 0 26px; padding: 10px 12px; border: 1px solid var(--border); border-left-width: 3px; border-radius: 10px; display: flex; flex-direction: column; gap: 4px; }
.ck-plan.is-amber { border-left-color: var(--amber); } .ck-plan.is-green { border-left-color: var(--green); } .ck-plan.is-red { border-left-color: var(--red); }
.ck-plan b { font-size: 14px; color: var(--text); } .ck-plan > span { font-size: 13px; color: var(--text-2); }
.ck-plan .ck-rnote, .ck-create .ck-rnote { font-size: 12px; color: var(--muted); }
.ck-plan .ck-fbtns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; flex-wrap: wrap; }
.ck-create { margin: 12px 0 0 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ck-create label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-2); }
.ck-create .btn-outline, .ck-plan .btn-outline, .ck-plan .btn-primary { height: 36px; padding: 0 12px; font-size: 14px; gap: 6px; white-space: nowrap; }
.ck-sugg li { flex-wrap: wrap; }
.ck-sname { flex: 1 1 auto; min-width: 0; }
.ck-sname small { display: block; font-size: 12px; color: var(--muted); }
@media (max-width: 700px) {
  .ck-drawer { width: 100%; }
  .ck-head, .ck-body, .ck-foot { padding-left: 16px; padding-right: 16px; }
  .ck-profile, .ck-grid { grid-template-columns: minmax(0, 1fr); }
  .ck-source { padding-left: 0; border-left: 0; padding-top: 12px; border-top: 1px solid var(--border-soft); }
  .ib-av.ck-av { width: 64px; height: 64px; font-size: 22px; }
  .ck-foot { flex-wrap: wrap; }
  .ck-foot .ck-reply { flex-basis: 100%; }
  .ck-convs li { grid-template-columns: auto minmax(0, 1fr); }
  .ck-cside { grid-column: 2; text-align: left; }
}

/* ---------- Promotion-28 · Reply templates (rt- this screen: the page "Inbox / Templates" — the head with Create template, two cards: the list (search, the purpose / language / team selects, the count, rows with the purpose icon, the name, the details line, the Active / Archived chip and ⋯, the selected row with the indigo border, the empty and no-results states) and the editor (the name as an input, the status chip, the details selects, the version select, Archive / Restore, ⋯, Reply text with the counter and the read-only strip of an older version, Allowed placeholders and Brand terms as chips, the unknown-placeholder line, the populated sample, the footer with the two info lines, Insert into draft and its conversation popover, Save changes)) — plans/Promotion-28.md, prototype/gen/promotion28.css ---------- */
.rt-cols { display: grid; grid-template-columns: minmax(0, 590fr) minmax(0, 790fr); gap: 16px; align-items: start; }
.rt-list, .rt-editor { min-width: 0; border-radius: 12px; }
.rt-list { padding: 16px; }
.rt-tools { display: grid; grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 1fr)); gap: 8px; }
.rt-search { display: flex; align-items: center; gap: 8px; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); }
.rt-search input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 14px; background: none; color: var(--text); }
.rt-search .i { font-size: 16px; flex: none; }
.rt-sel { min-width: 0; }
.rt-sel select { width: 100%; height: 38px; font-size: 13px; }
.rt-count { margin: 14px 0 10px; font-size: 14px; color: var(--text-2); }
.rt-rows { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rt-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 14px; align-items: center; min-height: 70px; padding: 10px 12px 10px 14px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface); cursor: pointer; }
.rt-row:hover { border-color: #CBD2E4; }
.rt-row.is-selected { border-color: var(--indigo); background: #F7F8FF; box-shadow: 0 0 0 1px var(--indigo) inset; }
.rt-row:focus-visible { outline: 2px solid var(--indigo-bg); }
.rt-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #F0F2F7; color: var(--text-2); }
.rt-ic .i { font-size: 21px; }
.rt-row.is-selected .rt-ic { background: var(--indigo-bg); color: var(--indigo); }
.rt-rmain { min-width: 0; }
.rt-rmain b { display: block; font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-rmain span { display: block; margin-top: 3px; font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 600; background: var(--green-bg); color: var(--green-text); }
.rt-chip.is-grey { background: #F0F2F7; color: var(--text-2); }
.rt-mw { position: relative; display: inline-flex; }
.rt-dots { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--text-2); cursor: pointer; }
.rt-dots:hover { background: #F3F4F8; }
.rt-dots .i { font-size: 18px; }
.rt-mw .po-menu { right: 0; left: auto; top: calc(100% + 4px); min-width: 200px; }
.rt-editor { padding: 18px 18px 16px; }
.rt-ehead { display: flex; align-items: flex-start; gap: 12px; }
.rt-emain { flex: 1 1 auto; min-width: 0; }
.rt-elabel { display: block; font-size: 13px; color: var(--text-2); }
.rt-nrow { display: flex; align-items: center; gap: 10px; min-width: 0; margin-top: 2px; }
.rt-name { flex: 0 1 auto; min-width: 120px; width: auto; field-sizing: content; max-width: 100%; padding: 2px 6px; margin-left: -6px; border: 1px solid transparent; border-radius: 6px; font: inherit; font-size: 21px; font-weight: 700;
  color: var(--text); background: none; }
.rt-name:hover { border-color: var(--border); }
.rt-name:focus { outline: none; border-color: var(--indigo); background: var(--surface); }
.rt-name[readonly] { border-color: transparent; }
.rt-details { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin-top: 4px; font-size: 14px; color: var(--text-2); }
.rt-details select { appearance: none; height: 26px; padding: 0 6px; border: 1px solid transparent; border-radius: 6px; font: inherit; font-size: 14px; color: var(--text-2); background: none; cursor: pointer; }
.rt-details select:hover { border-color: var(--border); }
.rt-details select:disabled { cursor: default; border-color: transparent; }
.rt-details i { font-style: normal; color: var(--muted-2); }
.rt-eacts { display: flex; align-items: center; gap: 8px; flex: none; }
.rt-eacts .ib-sort select { height: 40px; min-width: 132px; font-size: 14px; }
.rt-eacts .btn-outline { height: 40px; padding: 0 14px; gap: 8px; font-size: 14px; white-space: nowrap; }
.rt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 10px; margin-top: 16px; }
.rt-box { min-width: 0; padding: 12px 12px 14px; border: 1px solid var(--border); border-radius: 10px; }
.rt-box h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 14.5px; font-weight: 700; color: var(--text); }
.rt-box h3 .i { font-size: 15px; color: var(--indigo); }
.rt-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rt-text { position: relative; }
.rt-text textarea { display: block; width: 100%; min-height: 210px; padding: 12px 12px 24px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14.5px; line-height: 1.55;
  color: var(--text); resize: vertical; }
.rt-text textarea:focus { outline: 2px solid var(--indigo-bg); border-color: var(--indigo); }
.rt-text textarea[readonly] { background: #F8F9FB; color: var(--text-2); }
.rt-text .cv-count { right: 12px; bottom: 6px; }
.rt-old { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 8px 12px; border-radius: 8px; background: var(--amber-bg); font-size: 13px; color: var(--amber-text); }
.rt-old span { flex: 1 1 auto; }
.rt-old button { flex: none; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--indigo); cursor: pointer; }
.rt-bad { display: flex; gap: 8px; margin: 8px 0 0; font-size: 13px; color: #B4233A; }
.rt-bad .i { flex: none; font-size: 15px; margin-top: 1px; }
.rt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rt-ph, .rt-term { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); font: inherit; cursor: pointer; }
.rt-ph { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 12.5px; color: var(--indigo); background: #F4F6FF; border-color: #DCE3FF; }
.rt-term { font-size: 13px; color: var(--text-2); background: #F4F5F8; border-color: #ECEEF3; }
.rt-ph:hover, .rt-term:hover { border-color: var(--indigo); }
.rt-ph:disabled, .rt-term:disabled { cursor: default; }
.rt-none { margin: 0; font-size: 13px; color: var(--muted); }
.rt-sample { margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: #F4F6FB; }
.rt-sample h3 { margin: 0 0 6px; font-size: 14.5px; font-weight: 700; color: var(--text); }
.rt-sample p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.rt-sample mark { background: #FFF1CC; color: inherit; border-radius: 3px; padding: 0 2px; }
.rt-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.rt-info { display: flex; gap: 10px; flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text-2); line-height: 1.45; }
.rt-info .i { flex: none; font-size: 20px; color: var(--indigo); margin-top: 2px; }
.rt-info b { display: block; font-weight: 400; color: var(--text); }
.rt-foot .btn-outline, .rt-foot .btn-primary { height: 42px; padding: 0 18px; gap: 8px; font-size: 14.5px; white-space: nowrap; flex: none; }
.rt-foot .btn-primary[disabled] { opacity: .5; cursor: not-allowed; }
.rt-insert { right: 0; left: auto; top: auto; bottom: calc(100% + 6px); width: 320px; max-height: 340px; overflow: auto; }
.rt-insert .rt-isearch { display: flex; align-items: center; gap: 8px; margin: 4px 6px 6px; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); }
.rt-insert .rt-isearch input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 13.5px; }
.rt-insert a span { display: flex; flex-direction: column; min-width: 0; }
.rt-insert small { font-size: 12px; color: var(--muted); font-weight: 400; }
.rt-insert .rt-pf { width: 18px; height: 18px; flex: none; }
.rt-empty { padding: 28px 8px; }
.rt-insert a { height: auto; min-height: 40px; padding: 6px 10px; }
.rt-insert a[aria-disabled="true"] { opacity: .55; }
.rt-head { margin-top: 2px; }
@media (max-width: 1280px) {
  .rt-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .rt-tools { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rt-search { grid-column: 1 / -1; }
  .rt-ehead { flex-wrap: wrap; }
  .rt-eacts { flex-wrap: wrap; }
  .rt-grid { grid-template-columns: minmax(0, 1fr); }
  .rt-foot { flex-wrap: wrap; }
  .rt-foot .btn-outline, .rt-foot .btn-primary { flex: 1 1 auto; justify-content: center; }
  .rt-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .rt-row .rt-chip { grid-column: 2; justify-self: start; }
  .rt-insert { width: min(320px, calc(100vw - 48px)); }
}

/* ---------- Promotion-29 · Community activity (cy- this screen: the page "Community" — the head with the brand / channel / status selects, the search, Create response and ⋯, two cards: the activity list (the count, the pill tabs All · Mentions · Comments · Other with their counts, the sort toggle, the refresh icon, rows with the round platform mark or the crossed eye of an unavailable source, the headline, two lines of text, "{Platform} • @handle", the date and time with the Unassigned / Assigned / Done / Dismissed / Unavailable chip and the chevron, the selected row) and the selected item's detail (the source line with View profile, the context line, the described picture tile beside the text, the unavailable state, Status, Assign to, Add a note, Reply / Create task / Open in {Platform} / ⋯, the response box or the reason, the linked response and task, the Activity timeline)) — plans/Promotion-29.md, prototype/gen/promotion29.css ---------- */
.cy-root { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cy-head { margin-top: 4px; align-items: center; }
.cy-actions { gap: 12px; justify-content: flex-end; }
.cy-sel { position: relative; display: inline-flex; align-items: center; }
.cy-sel select { height: 40px; width: 120px; padding: 0 34px 0 13px; border: 1px solid var(--border); border-radius: 7px; background: #fff; font: inherit; font-size: 14.5px;
  color: var(--text); appearance: none; cursor: pointer; }
.cy-sel select:focus-visible { outline: 2px solid rgba(59, 91, 253, .3); border-color: var(--indigo); }
#cy-channel { width: 134px; }
.cy-sel > .i { position: absolute; right: 11px; font-size: 16px; color: var(--text-2); pointer-events: none; }
.cy-search { position: relative; display: inline-flex; align-items: center; }
.cy-search > .i { position: absolute; left: 12px; font-size: 18px; color: var(--muted); pointer-events: none; }
.cy-search input { width: 220px; height: 40px; padding: 0 12px 0 38px; border: 1px solid var(--border); border-radius: 7px; background: #fff; font: inherit; font-size: 14.5px; color: var(--text); }
.cy-search input:focus { outline: 2px solid rgba(59, 91, 253, .25); border-color: var(--indigo); }
.cy-head .btn-primary[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.cy-mw { position: relative; flex: none; }
.cy-mw .pm-menu { right: 0; top: calc(100% + 4px); min-width: 250px; }
.cy-more { width: 42px; padding: 0 !important; justify-content: center; }
.cy-ro { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 8px; background: var(--track); font-size: 14px; color: var(--text-2); }
.cy-cols { display: grid; grid-template-columns: minmax(0, 786fr) minmax(0, 596fr); gap: 16px; align-items: stretch; height: max(560px, calc(100vh - 330px)); min-height: 0; }
.cy-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border-radius: 12px; }
.cy-scroll { flex: 1; min-height: 0; overflow: auto; }
/* list */
.cy-lhead { display: flex; align-items: center; gap: 14px; padding: 16px 16px 12px 20px; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; }
.cy-lhead h2 { margin: 0 6px 0 0; font-size: 17px; font-weight: 700; color: var(--text); white-space: nowrap; }
.cy-tabs { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; flex-wrap: wrap; }
.cy-tab { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 0; border-radius: 17px; background: none; font: inherit; font-size: 14.5px;
  color: var(--text-2); cursor: pointer; white-space: nowrap; }
.cy-tab:hover { background: #F3F4F8; }
.cy-tab .cy-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #EEF0F5; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.cy-tab.is-active { background: var(--indigo); color: #fff; font-weight: 600; }
.cy-tab.is-active .cy-n { background: #fff; color: var(--indigo); }
.cy-sort { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px; border: 0; background: none; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--indigo);
  cursor: pointer; white-space: nowrap; }
.cy-sort .i { font-size: 16px; }
.cy-iconbtn { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text-2); cursor: pointer; flex: none; }
.cy-iconbtn:hover { background: #F3F4F8; }
.cy-iconbtn .i { font-size: 17px; }
.cy-iconbtn[aria-busy="true"] .i { animation: cy-spin 1s linear infinite; }
@keyframes cy-spin { to { transform: rotate(360deg); } }
.cy-list { margin: 0; padding: 0; list-style: none; }
.cy-row { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) 150px 18px; gap: 18px; align-items: center; min-height: 118px; padding: 14px 20px;
  border-bottom: 1px solid var(--border-soft); cursor: pointer; }
.cy-row:hover { background: #FAFBFD; }
.cy-row.is-selected { background: #F2F5FF; }
.cy-row:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
.cy-mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--border-soft); flex: none; align-self: start; margin-top: 4px; }
.cy-mark svg { width: 44px; height: 44px; display: block; }
.cy-mark.is-gone { background: #EEF0F5; box-shadow: none; }
.cy-mark.is-gone .i { font-size: 24px; color: var(--text-2); }
.cy-rmain { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cy-rmain b { font-size: 16px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cy-rmain p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cy-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cy-meta i { font-style: normal; }
.cy-when { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.35; color: var(--text-2); }
.cy-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 14px; border-radius: 15px; background: #EEF0F5; font-size: 14px; font-weight: 500; color: var(--text-2);
  white-space: nowrap; }
.cy-chip.is-green { background: #E4F7EE; color: #0E7A55; }
.cy-chip.is-assigned { padding: 0; background: none; align-items: center; gap: 10px; white-space: normal; line-height: 1.3; color: var(--text-2); }
.cy-av { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--cy-c, #3B5BFD); color: #fff; font-size: 11.5px; font-weight: 700; flex: none; }
.cy-chev { font-size: 20px; color: var(--text-2); }
.cy-empty { padding: 24px 12px; }
.cy-empty .es { padding: 32px 12px; }
/* detail */
.cy-detail .cy-scroll { padding: 22px 24px 24px; }
.cy-dhead { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.cy-dhead .cy-mark { margin: 0; width: 52px; height: 52px; }
.cy-dhead .cy-mark svg { width: 48px; height: 48px; }
.cy-src { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 3px; }
.cy-src b { font-size: 16px; font-weight: 700; color: var(--text); }
.cy-src span { font-size: 14px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cy-src a { color: var(--indigo); font-weight: 500; text-decoration: none; }
.cy-src a:hover { text-decoration: underline; }
.cy-dwhen { padding-top: 6px; font-size: 14px; color: var(--text-2); white-space: nowrap; }
.cy-context { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); }
.cy-content { display: grid; grid-template-columns: 162px minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 14px; }
.cy-content.is-text { grid-template-columns: minmax(0, 1fr); }
.cy-media { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; height: 84px; padding: 8px 10px; border-radius: 8px;
  background: linear-gradient(160deg, #1B2340 0%, #2E3F7A 55%, #0F1530 100%); color: #DCE3FF; font-size: 11.5px; line-height: 1.3; overflow: hidden; }
.cy-media .i { font-size: 18px; color: #fff; opacity: .9; }
.cy-media span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cy-text { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.cy-gone { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 14px 16px; border-radius: 10px; background: #F4F5F9; }
.cy-gone .i { flex: none; font-size: 22px; color: var(--text-2); margin-top: 1px; }
.cy-gone b { display: block; font-size: 15px; color: var(--text); }
.cy-gone p { margin: 3px 0 0; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.cy-gone small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.cy-fields { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px 12px; align-items: center; margin-top: 22px; }
.cy-fields > label, .cy-fields > span.l { font-size: 15px; color: var(--text); }
.cy-fields .cy-top { align-self: start; padding-top: 8px; }
.cy-fsel { position: relative; display: inline-flex; align-items: center; justify-self: start; }
.cy-fsel select { height: 36px; min-width: 150px; padding: 0 34px 0 12px; border: 1px solid var(--border); border-radius: 7px; background: #fff; font: inherit; font-size: 14.5px; color: var(--text);
  appearance: none; cursor: pointer; }
.cy-fsel.is-chip select { height: 30px; min-width: 0; padding: 0 30px 0 12px; border-color: transparent; border-radius: 6px; background: #EEF0F5; font-size: 13.5px; color: var(--text-2); }
.cy-fsel > .i { position: absolute; right: 10px; font-size: 15px; color: var(--text-2); pointer-events: none; }
.cy-fval { font-size: 14.5px; color: var(--text); }
.cy-note textarea { width: 100%; box-sizing: border-box; min-height: 64px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14.5px;
  line-height: 1.45; color: var(--text); resize: vertical; }
.cy-note textarea:focus { outline: 2px solid rgba(59, 91, 253, .25); border-color: var(--indigo); }
.cy-note .cy-notebar { display: flex; justify-content: flex-end; margin-top: 6px; }
.cy-note .cy-notebar[hidden] { display: none; }
.cy-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cy-acts .btn-primary, .cy-acts .btn-outline { height: 42px; padding: 0 16px; font-size: 15px; font-weight: 600; gap: 9px; border-radius: 7px; box-shadow: none; text-decoration: none; }
.cy-acts .btn-outline { border-color: #AFC0FF; color: var(--indigo); }
.cy-acts .btn-outline:hover { background: var(--indigo-bg); }
.cy-acts .i { font-size: 18px; }
.cy-acts .is-off { opacity: .5; cursor: not-allowed; }
.cy-acts .cy-dots { width: 50px; padding: 0; justify-content: center; border-color: var(--border); color: var(--text-2); }
.cy-acts .cy-mw .pm-menu { left: auto; right: 0; }
.cy-reason { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: 8px; background: #F7F8FB; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.cy-reason .i { flex: none; font-size: 18px; color: var(--muted); margin-top: 1px; }
.cy-respond { margin-top: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; }
.cy-respond[hidden] { display: none; }
.cy-respond h4 { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--text); }
.cy-respond textarea { width: 100%; box-sizing: border-box; min-height: 90px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14.5px;
  line-height: 1.45; color: var(--text); resize: vertical; }
.cy-respond p { margin: 8px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.cy-respond .cy-rbar { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; }
.cy-respond .cy-rbar .btn-primary, .cy-respond .cy-rbar .btn-outline { height: 40px; padding: 0 16px; font-size: 14.5px; box-shadow: none; }
.cy-links { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.cy-link { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); }
.cy-link .i { font-size: 16px; color: var(--muted); }
.cy-link a { color: var(--indigo); font-weight: 600; text-decoration: none; }
.cy-link a:hover { text-decoration: underline; }
.cy-sep { margin: 22px 0 18px; border: 0; border-top: 1px solid var(--border-soft); }
.cy-detail h3 { margin: 0 0 16px; font-size: 17px; font-weight: 700; color: var(--text); }
.cy-feed { position: relative; display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0 0 0 26px; list-style: none; }
.cy-feed::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 6px; width: 1px; background: var(--border); }
.cy-ev { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; }
.cy-ev::before { content: ""; position: absolute; left: -26px; top: 12px; width: 9px; height: 9px; border-radius: 50%; background: var(--indigo); }
.cy-ev .cy-av { width: 36px; height: 36px; font-size: 13px; }
.cy-ev .cy-av.is-src { background: #fff; box-shadow: 0 0 0 1px var(--border-soft); }
.cy-ev .cy-av.is-src svg { width: 30px; height: 30px; }
.cy-ev div { min-width: 0; font-size: 14.5px; line-height: 1.4; color: var(--text); }
.cy-ev div b { font-weight: 700; }
.cy-ev small { display: block; font-size: 13.5px; color: var(--text-2); }
.cy-ev q { display: block; margin-top: 4px; padding: 8px 10px; border-radius: 8px; background: #FFF8EB; font-size: 14px; color: var(--text); quotes: none; white-space: pre-line; }
@media (max-width: 1280px) {
  .cy-head { flex-wrap: wrap; row-gap: 12px; }
  .cy-actions { flex-wrap: wrap; justify-content: flex-start; }
  .cy-cols { grid-template-columns: minmax(0, 1fr); height: auto; }
  .cy-col { overflow: visible; }
  .cy-scroll { overflow: visible; }
}
@media (max-width: 900px) {
  .cy-actions { width: 100%; }
  .cy-search { flex: 1 1 200px; }
  .cy-search input { width: 100%; }
  .cy-lhead { gap: 10px; padding: 14px; }
  .cy-lhead .cy-tabs { order: 3; flex: 1 1 100%; }
  .cy-lhead .cy-sort { margin-left: auto; }
  .cy-row { grid-template-columns: 40px minmax(0, 1fr) 16px; gap: 12px; padding: 14px; }
  .cy-row .cy-when { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
  .cy-row .cy-chev { grid-row: 1; grid-column: 3; }
  .cy-mark { width: 40px; height: 40px; }
  .cy-mark svg { width: 36px; height: 36px; }
  .cy-detail .cy-scroll { padding: 16px; }
  .cy-content { grid-template-columns: minmax(0, 1fr); }
  .cy-fields { grid-template-columns: minmax(0, 1fr); }
  .cy-dhead { grid-template-columns: 44px minmax(0, 1fr); }
  .cy-dwhen { grid-column: 2; padding-top: 0; }
}

/* ---------- Promotion-30 · Communities and destinations (dn- this screen: the page "Community / Destinations" — the breadcrumb, the head with Add destination, the table card (the pill tabs All · Connected · Pending · Restricted with counts, the search, the Filter button and its popover, the destination table: the platform mark, the name with ↗ and the address, Type, the Membership chip, Access with a second limiting state, Language, Last verified with the green / grey / red mark, the chevron, the selected row, the count; the empty and no-results states) and the destination drawer docked beside it (the head with the mark, the name ↗, the address, the Connected / Pending / Not a member chip, ⋯ and ×; the underline tabs Details · Recent submissions · Rules · Settings; the Overview card with the three independent states; Recent submissions with the post pictures, the outcome chips and the moderator's reason; the numbered rules; the settings form with Verify now and Remove; the sticky footer Prepare a post · View on {Platform} with the disabled reason), and the Add destination dialog (the account select, By address, the found list with Add / Added)) — plans/Promotion-30.md, prototype/gen/promotion30.css ---------- */
.dn-root { min-width: 0; }
.dn-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
.dn-layout.has-drawer { grid-template-columns: minmax(0, 1fr) 520px; }
.dn-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dn-head { margin-top: 2px; }
.dn-card { padding: 16px 16px 12px; border-radius: 12px; min-width: 0; }
.dn-tools { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.dn-tabs { display: inline-flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.dn-tab { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 11px; border: 0; border-radius: 18px; background: none; font: inherit; font-size: 14.5px;
  color: var(--text-2); cursor: pointer; white-space: nowrap; }
.dn-tab:hover { background: #F3F4F8; }
.dn-tab .dn-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #EEF0F5; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.dn-tab.is-active { background: var(--indigo-bg); color: var(--indigo); font-weight: 600; box-shadow: inset 0 0 0 1px #C9D2FF; }
.dn-tab.is-active .dn-n { background: #fff; color: var(--indigo); }
.dn-search { position: relative; display: inline-flex; align-items: center; }
.dn-search > .i { position: absolute; left: 12px; font-size: 18px; color: var(--muted); pointer-events: none; }
.dn-search input { width: 200px; height: 40px; padding: 0 12px 0 38px; border: 1px solid var(--border); border-radius: 7px; background: #fff; font: inherit; font-size: 14.5px; color: var(--text); }
.dn-search input:focus { outline: 2px solid rgba(59, 91, 253, .25); border-color: var(--indigo); }
.dn-fw { position: relative; }
.dn-filter { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid var(--border); border-radius: 7px; background: #fff; font: inherit;
  font-size: 14.5px; color: var(--text); cursor: pointer; }
.dn-filter .i { font-size: 17px; color: var(--text-2); }
.dn-filter.is-on { border-color: #AFC0FF; color: var(--indigo); }
.dn-pop { position: absolute; z-index: 30; right: 0; top: calc(100% + 6px); width: 260px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .14); }
.dn-pop[hidden] { display: none; }
.dn-pop h4 { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.dn-pop label { display: flex; align-items: center; gap: 8px; min-height: 30px; font-size: 14.5px; color: var(--text); cursor: pointer; }
.dn-pop input { width: 17px; height: 17px; accent-color: var(--indigo); }
.dn-pop .dn-popgrp + .dn-popgrp { margin-top: 10px; }
.dn-pop .dn-popfoot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.dn-pop .dn-popfoot button { height: 36px; padding: 0 14px; font-size: 14px; box-shadow: none; }
.dn-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 14px; }
.dn-table thead th { height: 42px; padding: 0 8px; background: #F6F7FA; font-size: 14px; font-weight: 600; color: var(--text); text-align: left; white-space: nowrap; }
.dn-table thead th:first-child { border-radius: 8px 0 0 8px; padding-left: 14px; }
.dn-table thead th:last-child { border-radius: 0 8px 8px 0; }
.dn-table col.c-dest { width: 31%; }
.dn-table col.c-type { width: 13%; }
.dn-table col.c-mem { width: 12%; }
.dn-table col.c-acc { width: 15%; }
.dn-table col.c-lang { width: 9%; }
.dn-table col.c-ver { width: 22%; }
.dn-table col.c-chev { width: 28px; }
.dn-row td { height: 74px; padding: 8px 8px; border-bottom: 1px solid var(--border-soft); color: var(--text-2); vertical-align: middle; }
.dn-row td:first-child { padding-left: 14px; }
.dn-row { cursor: pointer; }
.dn-row:hover td { background: #FAFBFD; }
.dn-row.is-selected td { background: #F2F5FF; border-bottom-color: #C9D2FF; }
.dn-row.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--indigo); }
.dn-row:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
.dn-dest { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dn-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; flex: none; }
.dn-mark svg { width: 38px; height: 38px; display: block; }
.dn-dest div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dn-dest b { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--text); min-width: 0; }
.dn-dest b span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dn-dest b a { display: inline-grid; place-items: center; color: var(--indigo); flex: none; }
.dn-dest b a .i { font-size: 15px; }
.dn-dest small { font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dn-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 8px; background: #EEF0F5; font-size: 13px; font-weight: 600; color: var(--text-2);
  white-space: nowrap; }
.dn-chip.is-green { background: #E4F7EE; color: #0E7A55; }
.dn-chip.is-amber { background: #FFF1D6; color: #9A5B08; }
.dn-chip.is-red { background: #FDE8EB; color: #C2334A; }
.dn-acc { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.dn-acc small { font-size: 12.5px; color: var(--muted); }
.dn-ver { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.dn-ver .i { font-size: 17px; flex: none; }
.dn-ver.is-ok .i { color: #12B981; }
.dn-ver.is-old .i { color: #9CA3AF; }
.dn-ver.is-bad .i { color: #F0546A; }
.dn-chev { font-size: 18px; color: var(--text-2); }
.dn-count { margin: 14px 2px 2px; font-size: 14px; color: var(--text-2); }
.dn-empty .es { padding: 36px 12px; }
/* drawer */
.dn-drawer { position: sticky; top: 12px; display: flex; flex-direction: column; min-width: 0; height: max(520px, calc(100vh - 310px)); padding: 0; border-radius: 12px; overflow: hidden; }
.dn-drawer[hidden] { display: none; }
.dn-dhead { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto auto; gap: 12px; align-items: start; padding: 20px 18px 12px 22px; }
.dn-dhead .dn-mark { width: 48px; height: 48px; }
.dn-dhead .dn-mark svg { width: 46px; height: 46px; }
.dn-dname { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dn-dname b { min-width: 0; display: block; font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--text); }
.dn-dname b a { margin-left: 6px; color: var(--indigo); display: inline-grid; place-items: center; vertical-align: -2px; }
.dn-dname b a .i { font-size: 17px; }
.dn-dname span { font-size: 14px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dn-dhead .dn-chip { margin-top: 10px; height: 30px; padding: 0 14px; font-size: 14px; font-weight: 500; }
.dn-iconbtn { display: grid; place-items: center; width: 34px; height: 34px; margin-top: 8px; border: 0; border-radius: 8px; background: none; color: var(--text-2); cursor: pointer; }
.dn-iconbtn:hover { background: #F3F4F8; }
.dn-iconbtn .i { font-size: 19px; }
.dn-mw { position: relative; }
.dn-mw .pm-menu { right: 0; top: calc(100% + 2px); min-width: 210px; }
.dn-dtabs { display: flex; gap: 6px; padding: 0 18px; border-bottom: 1px solid var(--border-soft); overflow-x: auto; }
.dn-dtab { position: relative; height: 44px; padding: 0 16px; border: 0; background: none; font: inherit; font-size: 15px; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.dn-dtab.is-active { color: var(--indigo); font-weight: 600; }
.dn-dtab.is-active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--indigo); }
.dn-dbody { flex: 1; min-height: 0; overflow: auto; padding: 18px 18px 18px; display: flex; flex-direction: column; gap: 14px; }
.dn-box { padding: 16px 16px 14px; border: 1px solid var(--border-soft); border-radius: 10px; }
.dn-box h3 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; font-size: 17px; font-weight: 700; color: var(--text); }
.dn-box h3 button { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--indigo); cursor: pointer; }
.dn-box h3 button .i { font-size: 16px; }
.dn-facts { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px 12px; margin: 0; font-size: 14.5px; }
.dn-facts dt { color: var(--text-2); }
.dn-facts dd { margin: 0; color: var(--text); display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.dn-facts dd small { width: 100%; font-size: 13px; color: var(--muted); }
.dn-subs { margin: 0; padding: 0; list-style: none; }
.dn-sub { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto 34px; gap: 12px; align-items: center; padding: 8px 0; }
.dn-sub + .dn-sub { border-top: 1px solid var(--border-soft); }
.dn-thumb { display: grid; place-items: center; width: 72px; height: 48px; border-radius: 6px; background: #EEF0F5; overflow: hidden; }
.dn-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dn-thumb svg { width: 26px; height: 26px; }
.dn-thumb.art-a { background: linear-gradient(160deg, #1B2340, #3B4F96 60%, #0F1530); }
.dn-thumb.art-b { background: linear-gradient(160deg, #0F2A44, #2563EB 70%, #0B1B33); }
.dn-thumb.art-c { background: linear-gradient(160deg, #3C4B63, #9FB3CC 55%, #2B3547); }
.dn-sub div { min-width: 0; }
.dn-sub b { display: block; font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dn-sub span { display: block; font-size: 13.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dn-sub em { display: block; font-style: normal; font-size: 12.5px; color: #C2334A; white-space: normal; }
.dn-sub .dn-chip { height: 28px; padding: 0 12px; font-weight: 500; }
.dn-sub .dn-iconbtn { margin: 0; }
.dn-rules { margin: 0; padding: 0 0 0 22px; }
.dn-rules li { margin: 0 0 12px; font-size: 14.5px; line-height: 1.45; color: var(--text); }
.dn-rules li b { display: block; }
.dn-rules li span { color: var(--text-2); }
.dn-note { margin: 0; font-size: 13px; color: var(--muted); }
.dn-form { display: flex; flex-direction: column; gap: 14px; }
.dn-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; font-weight: 600; color: var(--text); }
.dn-form label small { font-weight: 400; font-size: 13px; color: var(--muted); }
.dn-form select, .dn-form textarea { height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 7px; background: #fff; font: inherit; font-size: 14.5px; color: var(--text); }
.dn-form textarea { height: auto; min-height: 80px; padding: 10px 12px; line-height: 1.45; resize: vertical; }
.dn-form .dn-formbar { display: flex; justify-content: flex-end; gap: 10px; }
.dn-form .btn-primary, .dn-form .btn-outline, .dn-danger .btn-outline { height: 40px; padding: 0 16px; font-size: 14.5px; box-shadow: none; gap: 8px; }
.dn-danger { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dn-danger p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.dn-danger .btn-outline.is-danger { border-color: #F5B5C0; color: #C2334A; }
.dn-danger .btn-outline.is-danger:hover { background: #FDF0F2; }
.dn-foot { display: flex; gap: 12px; padding: 14px 18px 18px; border-top: 1px solid var(--border-soft); background: var(--surface); }
.dn-foot .btn-outline { flex: 1; justify-content: center; height: 44px; font-size: 15px; font-weight: 600; gap: 9px; border-color: #AFC0FF; color: var(--indigo); box-shadow: none; text-decoration: none; }
.dn-foot .btn-outline .i { font-size: 18px; }
.dn-foot .btn-outline.is-off { opacity: .55; cursor: not-allowed; }
.dn-reason { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: #FFF8EB; font-size: 13.5px; line-height: 1.45; color: #8A5A0A; }
.dn-reason .i { flex: none; font-size: 16px; margin-top: 1px; }
/* the Add destination dialog */
.dn-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(15, 23, 42, .42); }
.dn-dialog { display: flex; flex-direction: column; width: min(600px, 100%); max-height: calc(100vh - 32px); background: var(--surface); border-radius: 14px; box-shadow: 0 24px 60px rgba(15, 23, 42, .28); }
.dn-dialog header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 10px; }
.dn-dialog header h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--text); }
.dn-dialog .dn-dlgbody { overflow: auto; padding: 4px 20px 20px; display: flex; flex-direction: column; gap: 16px; }
.dn-dialog .dn-field { display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; font-weight: 600; color: var(--text); }
.dn-dialog .dn-field small { font-weight: 400; font-size: 13px; color: var(--muted); }
.dn-dialog select, .dn-dialog input[type=url] { height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 7px; background: #fff; font: inherit; font-size: 14.5px; color: var(--text); }
.dn-urlrow { display: flex; gap: 10px; }
.dn-urlrow input { flex: 1; min-width: 0; }
.dn-urlrow .btn-primary { height: 40px; padding: 0 18px; font-size: 14.5px; font-weight: 600; box-shadow: none; }
.dn-err { margin: 0; font-size: 13.5px; color: #C2334A; }
.dn-found { margin: 0; padding: 0; list-style: none; border: 1px solid var(--border-soft); border-radius: 10px; }
.dn-found li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; }
.dn-found li + li { border-top: 1px solid var(--border-soft); }
.dn-found .dn-mark { width: 36px; height: 36px; }
.dn-found .dn-mark svg { width: 34px; height: 34px; }
.dn-found b { display: block; font-size: 14.5px; color: var(--text); }
.dn-found span { display: block; font-size: 13px; color: var(--text-2); }
.dn-found .btn-outline { height: 34px; padding: 0 14px; font-size: 14px; box-shadow: none; }
.dn-found .dn-added { font-size: 13.5px; color: var(--muted); }
.dn-found-note { margin: 0; font-size: 13.5px; color: var(--text-2); }
@media (max-width: 1280px) {
  .dn-layout.has-drawer { grid-template-columns: minmax(0, 1fr); }
  .dn-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 55; width: min(560px, 100vw); height: auto; border-radius: 0; box-shadow: -16px 0 40px rgba(15, 23, 42, .18); }
}
@media (max-width: 900px) {
  .dn-tools { flex-wrap: wrap; }
  .dn-tabs { flex: 1 1 100%; overflow-x: auto; }
  .dn-search { flex: 1 1 180px; }
  .dn-search input { width: 100%; }
  .dn-table, .dn-table tbody, .dn-table tr, .dn-table td { display: block; width: 100%; }
  .dn-table thead, .dn-table colgroup { display: none; }
  .dn-row { position: relative; padding: 12px 34px 12px 12px; border-bottom: 1px solid var(--border-soft); }
  .dn-row td { height: auto; padding: 2px 0; border: 0; }
  .dn-row td:first-child { padding-left: 0; }
  .dn-row td.dn-td-chev { position: absolute; right: 8px; top: 24px; width: auto; }
  .dn-row td:not(:first-child):not(.dn-td-chev) { display: inline-block; width: auto; margin: 6px 10px 0 0; }
  .dn-dhead { grid-template-columns: 44px minmax(0, 1fr) auto auto; padding: 16px; }
  .dn-dhead .dn-chip { grid-column: 2; grid-row: 2; justify-self: start; margin-top: 0; }
  .dn-facts { grid-template-columns: minmax(0, 1fr); }
  .dn-sub { grid-template-columns: 56px minmax(0, 1fr) 34px; }
  .dn-sub .dn-chip { grid-column: 2; justify-self: start; }
  .dn-foot { flex-direction: column; }
}
.dn-drawer-in { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* ---------- Promotion-31 · Posting automations (ra- this screen: the page "Automations" — the breadcrumb, the head with Create automation, the pill filters All · Active · Paused · Draft with counts and dots, the search, the rules table (the 80 × 62 picture, the name and the description, the source format with the source kind, the destination accounts with their platform marks, the owner, the status chip with the grant line, the next run, the last result with its dot, History / Edit and ⋯ with the row menu), the footer with the count and the pager, the empty and no-results states) — plans/Promotion-31.md, prototype/gen/promotion31.css ---------- */
.ra-root { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ra-list { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ra-crumbs { margin-bottom: -10px; }
.ra-crumbs span[aria-hidden] { color: var(--muted); }
.ra-head { padding-bottom: 4px; }
.ra-head .ra-create { height: 48px; padding: 0 22px; font-size: 16.5px; }
.ra-head .ra-create .i { font-size: 20px; }
.ra-tools { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ra-pills { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.ra-pill { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  font: inherit; font-size: 15.5px; color: var(--text); cursor: pointer; white-space: nowrap; }
.ra-pill:hover { border-color: #C9D2FF; }
.ra-pill .ra-n { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: #EEF0F5; font-size: 13px; font-weight: 600; color: var(--text-2); }
.ra-pill.is-active { border-color: var(--indigo); background: var(--indigo-bg); color: var(--indigo); font-weight: 600; box-shadow: inset 0 0 0 1px var(--indigo); }
.ra-pill.is-active .ra-n { background: #fff; color: var(--indigo); }
.ra-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #9CA3AF; flex: none; }
.ra-dot.is-green, .is-green > .ra-dot { background: #12B981; }
.ra-dot.is-amber, .is-amber > .ra-dot { background: #F59E0B; }
.ra-dot.is-grey, .is-grey > .ra-dot { background: #9CA3AF; }
.ra-dot.is-red, .is-red > .ra-dot { background: #F0546A; }
.ra-dot.is-indigo, .is-indigo > .ra-dot { background: var(--indigo); }
.ra-search { position: relative; display: inline-flex; align-items: center; flex: none; }
.ra-search > .i { position: absolute; left: 14px; font-size: 18px; color: var(--muted); pointer-events: none; }
.ra-search input { width: 300px; height: 44px; padding: 0 14px 0 42px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 15px; color: var(--text); }
.ra-search input:focus { outline: 2px solid rgba(59, 91, 253, .25); border-color: var(--indigo); }
.ra-card { padding: 14px 18px 12px; border-radius: 12px; min-width: 0; }
.ra-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 14px; }
.ra-table thead th { height: 44px; padding: 0 8px; font-size: 14.5px; font-weight: 600; color: var(--text); text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border-soft); }
.ra-table col.c-name { width: 21%; }
.ra-table col.c-src { width: 10%; }
.ra-table col.c-dest { width: 10.5%; }
.ra-table col.c-owner { width: 8.5%; }
.ra-table col.c-status { width: 14%; }
.ra-table col.c-next { width: 12.5%; }
.ra-table col.c-last { width: 13.5%; }
.ra-table col.c-acts { width: 150px; }
.ra-row td { height: 79px; padding: 8px 8px; border-bottom: 1px solid var(--border-soft); color: var(--text-2); vertical-align: middle; }
.ra-row:last-child td { border-bottom: 0; }
.ra-row:hover td { background: #FAFBFD; }
.ra-name { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ra-pic { position: relative; flex: none; width: 80px; height: 62px; border-radius: 6px; overflow: hidden; background: #0B1430; }
.ra-pic img, .ra-pic .ph-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ra-pic { background: linear-gradient(135deg, #0B1430, #2554D6); }
.ra-pic .ph-mark { position: absolute; inset: 0; left: 0; top: 0; right: 0; bottom: 0; display: grid; place-items: center; width: auto; min-width: 0; height: auto; aspect-ratio: auto; border-radius: 0; margin: 0; padding: 0; background: none; color: #fff; font-weight: 800; font-size: 18px; }
.ra-name div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ra-name b { font-size: 15.5px; font-weight: 600; line-height: 1.3; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ra-name b a { color: inherit; text-decoration: none; }
.ra-name b a:hover { color: var(--indigo); text-decoration: underline; }
.ra-name small { font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ra-src { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ra-fmt { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--text); white-space: nowrap; }
.ra-fmt .i { flex: none; font-size: 21px; color: var(--text-2); }
.ra-src small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ra-dests { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.ra-dests li { display: flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ra-dests .ra-pf { width: 21px; height: 21px; flex: none; }
.ra-dests .ra-more-n { font-size: 13px; color: var(--muted); padding-left: 30px; }
.ra-dests .ra-grp { font-size: 12.5px; color: var(--muted); }
.ra-owner { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--text); white-space: nowrap; }
.ra-owner .i { width: 26px; height: 26px; padding: 4px; border: 1px solid var(--border); border-radius: 50%; color: var(--text-2); }
.ra-status { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.ra-chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 13px; border-radius: 16px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.ra-chip.is-green { background: #E4F7EE; color: #0E7A55; }
.ra-chip.is-amber { background: #FFF1D6; color: #9A5B08; }
.ra-chip.is-grey { background: #EEF0F5; color: var(--text-2); }
.ra-grant { max-width: 100%; font-size: 12.5px; line-height: 1.35; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ra-grant.is-warn { color: #9A5B08; }
.ra-when { display: flex; flex-direction: column; gap: 3px; }
.ra-when b { font-size: 14.5px; font-weight: 500; color: var(--text); white-space: nowrap; }
.ra-when small { font-size: 13.5px; color: var(--muted); }
.ra-when.is-ended b { color: var(--muted); }
.ra-none { color: var(--muted); font-size: 15px; }
.ra-last { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.ra-last .ra-dot { margin-top: 5px; }
.ra-last div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ra-last b { font-size: 14.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.ra-last small { font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ra-acts { display: flex; align-items: center; gap: 10px; }
.ra-act.btn-outline { height: 40px; min-width: 88px; padding: 0 14px; justify-content: center; border-color: var(--indigo); color: var(--indigo); font-size: 14.5px; font-weight: 600;
  box-shadow: none; text-decoration: none; }
.ra-act.btn-outline:hover { background: var(--indigo-bg); }
.ra-mw { position: relative; }
.ra-more { display: grid; place-items: center; width: 44px; height: 40px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-2); cursor: pointer; }
.ra-more .i { font-size: 20px; }
.ra-more:hover, .ra-more[aria-expanded="true"] { border-color: var(--indigo); color: var(--indigo); background: var(--indigo-bg); box-shadow: inset 0 0 0 1px var(--indigo); }
.ra-menu.po-menu { right: 0; top: calc(100% + 6px); min-width: 180px; }
.ra-menu button.is-danger { color: var(--text); }
.ra-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 8px 2px 2px; border-top: 1px solid var(--border-soft); }
.ra-foot > span { font-size: 14.5px; color: var(--text-2); }
.ra-pager { display: inline-flex; align-items: center; gap: 8px; }
.ra-pager button, .ra-pager span, .ra-pager a { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  font: inherit; font-size: 14px; color: var(--text-2); text-decoration: none; }
.ra-pager button:disabled { opacity: .55; }
.ra-pager .is-on { border-color: var(--indigo); color: var(--indigo); font-weight: 600; box-shadow: inset 0 0 0 1px var(--indigo); }
.ra-empty .es { padding: 40px 12px; }
.ra-ro { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--text-2); }
@media (max-width: 1280px) {
  .ra-table col.c-owner { width: 0; }
  .ra-table th:nth-child(4), .ra-row td:nth-child(4) { display: none; }
  .ra-dests li span { display: none; }
}
@media (max-width: 900px) {
  .ra-tools { flex-direction: column; align-items: stretch; }
  .ra-search input { width: 100%; }
  .ra-search { width: 100%; }
  .ra-pill { height: 38px; padding: 0 12px; font-size: 14.5px; }
  .ra-table, .ra-table tbody { display: block; }
  .ra-table colgroup, .ra-table thead { display: none; }
  .ra-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
  .ra-row td { display: block; height: auto; padding: 0; border: 0; }
  .ra-row td:nth-child(1) { grid-column: 1 / -1; }
  .ra-row td:nth-child(3), .ra-row td:nth-child(4), .ra-row td:nth-child(6) { display: none; }
  .ra-row td:nth-child(8) { grid-column: 1 / -1; }
  .ra-row:hover td { background: none; }
}

.pu-rulelist { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.pu-rulelist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 10px; border-radius: 8px; background: #F7F8FB; }
.pu-rulelist a { font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pu-rulelist a:hover { color: var(--indigo); text-decoration: underline; }
.pu-rulelist .pu-rmarks { display: inline-flex; gap: 4px; } .pu-rulelist .pu-rmarks svg { width: 18px; height: 18px; }
.pu-rulelist small { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); }

/* ---------- Promotion-32 · Build posting automation (rb- this screen: the page "Automations / Builder" — the breadcrumb, the head with Save draft · Preview · Activate, the rule strip (name, description, the state chip and the version), three columns of numbered cards (1 Source & tags with the source select, the tag chips and the media toggles; 2 Destination group with the account chips and the add menu of groups and accounts; 3 Content selection radios; 4 AI transformations checkboxes; 5 Schedule with start, time, repeat, the optional end and the summary; 6 Duplicate checks; 7 Approval requirements with the grant fields; the ready / attention card) and the preview column (the example post, the generated publishing plan table, the skipped card and its details dialog)) — plans/Promotion-32.md, prototype/gen/promotion32.css ---------- */
.rb-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rb-crumbs { margin-bottom: -10px; }
.rb-head { padding-bottom: 2px; }
.rb-actions .rb-btn { height: 44px; min-width: 132px; justify-content: center; font-size: 15.5px; }
.rb-actions .rb-btn.btn-outline { border-color: var(--indigo); }
.rb-actions .rb-btn .i { font-size: 19px; }
.rb-strip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 16px; align-items: end; padding: 14px 18px; border-radius: 12px; }
.rb-state { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding-bottom: 2px; }
.rb-state small { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.rb-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.rb-lbl { font-size: 14px; font-weight: 500; color: var(--text); }
.rb-lbl i { font-style: normal; color: var(--muted); font-weight: 400; }
.rb-field > input, .rb-sel input, .rb-sel select, .rb-inline input { height: 44px; width: 100%; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  font: inherit; font-size: 14.5px; color: var(--text); min-width: 0; }
.rb-field > input:focus, .rb-sel input:focus, .rb-sel select:focus, .rb-inline input:focus, .rb-tags:focus-within, .rb-accs:focus-within { outline: 2px solid rgba(59, 91, 253, .25); border-color: var(--indigo); }
.rb-field.is-invalid > input, .rb-field.is-invalid .rb-sel input, .rb-field.is-invalid .rb-accs, .rb-field.is-invalid .rb-toggles { border-color: #F0546A; }
.rb-err { font-size: 12.5px; color: #C2334A; }
.rb-sel { position: relative; display: block; min-width: 0; }
.rb-sel > .i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--text-2); pointer-events: none; }
.rb-sel input, .rb-sel select { padding-left: 36px; padding-right: 8px; }
.rb-sel.is-date input { padding-left: 10px; }
.rb-sel.is-plain select { padding-left: 12px; }
.rb-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; align-items: start; }
.rb-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rb-card { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 18px; border-radius: 12px; min-width: 0; }
.rb-ch { display: flex; align-items: flex-start; gap: 14px; }
.rb-no { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); font-size: 17px; font-weight: 700; }
.rb-ch h2 { margin: 1px 0 2px; font-size: 18px; font-weight: 700; color: var(--text); }
.rb-ch p { margin: 0; font-size: 14px; color: var(--text-2); }
.rb-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.rb-row3 { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, .95fr); gap: 10px; }
.rb-row-end { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1.95fr); gap: 10px; align-items: end; }
.rb-zone { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.rb-tags, .rb-accs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 44px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.rb-tags input { flex: 1 1 70px; min-width: 70px; height: 30px; border: 0; background: none; font: inherit; font-size: 14px; color: var(--text); outline: none; }
.rb-tag { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px 0 10px; border-radius: 6px; background: #EEF1FF; font-size: 13px; color: var(--text); white-space: nowrap; }
.rb-tag button, .rb-acc button { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--text-2); cursor: pointer; }
.rb-tag button .i, .rb-acc button .i { font-size: 13px; }
.rb-tag button:hover, .rb-acc button:hover { background: rgba(59, 91, 253, .12); color: var(--indigo); }
.rb-acc { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 4px 0 8px; border: 1px solid var(--border-soft); border-radius: 7px; background: #F7F8FB; font-size: 13.5px;
  color: var(--text); white-space: nowrap; }
.rb-acc.is-warn { border-color: #F6D58B; background: #FFF8E7; }
.rb-pf { width: 20px; height: 20px; flex: none; }
.rb-addw { position: relative; margin-left: auto; }
.rb-add { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 6px; background: none; color: var(--text-2); cursor: pointer; }
.rb-add:hover, .rb-add[aria-expanded="true"] { background: var(--indigo-bg); color: var(--indigo); }
.rb-accmenu.po-menu { right: 0; top: calc(100% + 6px); min-width: 250px; }
.rb-accmenu h4 { margin: 6px 10px 4px; font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.rb-accmenu button[role="option"] { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 10px; border: 0; border-radius: 7px; background: none; font: inherit;
  font-size: 14px; color: var(--text); text-align: left; cursor: pointer; }
.rb-accmenu button[role="option"]:hover, .rb-accmenu button[role="option"]:focus { background: var(--indigo-bg-2); outline: none; }
.rb-accmenu button[aria-selected="true"]::after { content: "✓"; margin-left: auto; color: var(--indigo); font-weight: 700; }
.rb-accmenu small { margin-left: auto; font-size: 12px; color: #9A5B08; }
.rb-help { font-size: 12.5px; color: var(--muted); }
.rb-toggles { display: flex; gap: 8px; flex-wrap: wrap; border-radius: 8px; }
.rb-tog { position: relative; cursor: pointer; }
.rb-tog input { position: absolute; opacity: 0; pointer-events: none; }
.rb-tog span { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: 17px; background: var(--surface); font-size: 13.5px;
  color: var(--text-2); }
.rb-tog span .i { font-size: 16px; }
.rb-tog input:checked + span { border-color: #AFC0FF; background: var(--indigo-bg); color: var(--indigo); font-weight: 600; }
.rb-tog input:focus-visible + span { outline: 2px solid var(--indigo); outline-offset: 2px; }
.rb-opts { display: flex; flex-direction: column; gap: 12px; }
.rb-opts.is-tight { gap: 9px; }
.rb-opt { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.rb-opt input { flex: none; width: 19px; height: 19px; margin: 1px 0 0; accent-color: var(--indigo); }
.rb-opt span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rb-opt b { font-size: 14.5px; font-weight: 500; color: var(--text); }
.rb-opt small { font-size: 13px; color: var(--text-2); }
.rb-opt small.rb-why { color: #9A5B08; }
.rb-opt.is-disabled { cursor: default; }
.rb-opt.is-disabled b, .rb-opt.is-disabled small:not(.rb-why) { color: var(--muted); }
.rb-note { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; color: var(--muted); }
.rb-note .i { font-size: 15px; color: var(--indigo); flex: none; }
.rb-note a { color: var(--indigo); }
.rb-summary { margin: 0; font-size: 13.5px; color: var(--text-2); }
.rb-grant { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: -2px 0 2px 31px; padding: 12px; border-radius: 8px; background: #F7F8FB; }
.rb-grant[hidden] { display: none; }
.rb-grant .rb-help { grid-column: 1 / -1; }
.rb-inline { display: flex; align-items: center; gap: 8px; }
.rb-inline input { width: 64px; flex: none; }
.rb-inline span { font-size: 13.5px; color: var(--text-2); white-space: nowrap; }
.rb-info { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 12px; background: #F1F4FF; border: 1px solid #D7DFFF; box-shadow: none; }
.rb-info > .i { flex: none; font-size: 22px; color: var(--indigo); margin-top: 1px; }
.rb-info h3 { margin: 0 0 4px; font-size: 15.5px; font-weight: 700; color: var(--indigo); }
.rb-info p { margin: 0; font-size: 14px; color: var(--text-2); }
.rb-info ul { margin: 4px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--text-2); }
.rb-info.is-warn { background: #FFF8E7; border-color: #F6D58B; }
.rb-info.is-warn > .i, .rb-info.is-warn h3 { color: #9A5B08; }
.rb-side { gap: 14px; }
.rb-example, .rb-plan { padding: 16px 18px; border-radius: 12px; min-width: 0; }
.rb-example h2, .rb-plan h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.rb-sub { margin: 3px 0 12px; font-size: 14px; color: var(--text-2); }
.rb-ex { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 8px; border: 1px solid var(--border-soft); border-radius: 10px; }
.rb-expic { position: relative; display: block; aspect-ratio: 16 / 9.4; border-radius: 6px; overflow: hidden; background: #0B1430; }
.rb-expic img, .rb-expic .ph-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rb-ex > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-top: 4px; }
.rb-ex b { font-size: 16px; font-weight: 700; color: var(--text); }
.rb-exacc { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); }
.rb-ex p { margin: 2px 0 0; font-size: 14px; line-height: 1.45; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.rb-ex small { font-size: 12px; color: var(--muted); }
.rb-plhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.rb-plhead small { font-size: 13.5px; color: var(--text-2); }
.rb-viewall { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--indigo); cursor: pointer; }
.rb-viewall[hidden] { display: none; }
.rb-ptable { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 13.5px; }
.rb-ptable th { height: 34px; padding: 0 8px; background: #F6F7FA; font-size: 13px; font-weight: 600; color: var(--text-2); text-align: left; }
.rb-ptable th:first-child { width: 88px; border-radius: 6px 0 0 6px; }
.rb-ptable th:nth-child(3) { width: 92px; }
.rb-ptable th:last-child { width: 104px; border-radius: 0 6px 6px 0; }
.rb-ptable td { height: 54px; padding: 6px 8px; border-bottom: 1px solid var(--border-soft); color: var(--text-2); vertical-align: middle; }
.rb-ptable tr:last-child td { border-bottom: 0; }
.rb-ptable tr.is-more { display: none; }
.rb-plan.is-all .rb-ptable tr.is-more { display: table-row; }
.rb-pdate { white-space: nowrap; }
.rb-pc { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rb-thumb { position: relative; flex: none; width: 56px; height: 40px; border-radius: 5px; overflow: hidden; background: #0B1430; }
.rb-thumb img, .rb-thumb .ph-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rb-pc div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rb-pc b { font-size: 13.5px; font-weight: 600; line-height: 1.25; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rb-pc small { font-size: 12.5px; color: var(--muted); }
.rb-marks { display: inline-flex; align-items: center; gap: 6px; }
.rb-marks .is-off { opacity: .3; }
.rb-st { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; background: #EEF0F5; color: var(--text-2); }
.rb-st.is-green { background: #E4F7EE; color: #0E7A55; }
.rb-st.is-amber { background: #FFF1D6; color: #9A5B08; }
.rb-empty { margin: 8px 0 0; padding: 18px; border-radius: 8px; background: #F7F8FB; font-size: 14px; color: var(--text-2); text-align: center; }
.rb-skip { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 12px; background: #FFF8E7; border: 1px solid #F6D58B; box-shadow: none; }
.rb-skip[hidden] { display: none; }
.rb-skip > .i { flex: none; font-size: 24px; color: #D97706; }
.rb-skip div { flex: 1 1 auto; min-width: 0; }
.rb-skip b { font-size: 15px; color: var(--text); }
.rb-skip p { margin: 2px 0 0; font-size: 13px; color: var(--text-2); }
.rb-skipbtn.btn-outline { flex: none; height: 40px; padding: 0 16px; border-color: var(--indigo); color: var(--indigo); font-weight: 600; box-shadow: none; background: var(--surface); }
.rb-dlg-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow: auto; }
.rb-dlg-list li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px; background: #F7F8FB; }
.rb-dlg-list b { font-size: 14px; color: var(--text); }
.rb-dlg-list span { font-size: 13px; color: var(--text-2); }
.rb-ro { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--text-2); }
.rb-root.is-readonly .rb-card input, .rb-root.is-readonly .rb-card select, .rb-root.is-readonly .rb-strip input { pointer-events: none; }
@media (max-width: 1280px) {
  .rb-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rb-side { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .rb-grid { grid-template-columns: minmax(0, 1fr); }
  .rb-strip { grid-template-columns: minmax(0, 1fr); }
  .rb-state { align-items: flex-start; }
  .rb-head { flex-direction: column; align-items: stretch; }
  .rb-actions { flex-wrap: wrap; }
  .rb-actions .rb-btn { flex: 1 1 120px; min-width: 0; }
  .rb-row2, .rb-row3, .rb-row-end, .rb-ex, .rb-grant { grid-template-columns: minmax(0, 1fr); }
  .rb-grant { margin-left: 0; }
  .rb-ptable th:first-child { width: 58px; }
  .rb-pdate { white-space: normal; font-size: 12px; }
  .rb-ptable th:nth-child(3) { display: none; }
  .rb-ptable td:nth-child(3) { display: none; }
  .rb-ptable th:last-child { width: 96px; }
  .rb-skip { flex-wrap: wrap; }
}

/* ---------- Promotion-33 · Time slots (sl- this screen: the page "Automations / Time slots" — the head, the shared card tabs Time slots · Auto publishing · Market templates · Queue settings, the pills by target with counts and Add slot set, the slot-set table (the business initials tile or the platform mark, the name and the subtitle, the time zone with its abbreviations, the active slots, the maximum a day, Edit), the uncovered-accounts line, the daylight saving card; the Time slots drawer (the target select with its tile, the schedule settings grid, the DST line, the gap and collision selects, the daily slot rows with the time and day selects and the trash button, Add time slot, the Next scheduled times box, the affected-jobs strip, the sticky footer) and the affected-jobs dialog list) — plans/Promotion-33.md, prototype/gen/promotion33.css ---------- */
.sl-root { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sl-head { padding-bottom: 0; }
.sl-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0; border-radius: 12px; overflow: hidden; min-width: 0; }
.sl-tab { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; height: 62px; padding: 0 12px; border: 0; border-left: 1px solid var(--border-soft);
  background: none; font: inherit; font-size: 16px; color: var(--text-2); text-decoration: none; white-space: nowrap; min-width: 0; }
.sl-tab:first-child { border-left: 0; }
.sl-tab .i { flex: none; font-size: 21px; color: var(--muted); }
.sl-tab:hover { color: var(--indigo); }
.sl-tab.is-active { color: var(--indigo); font-weight: 600; }
.sl-tab.is-active::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--indigo); border-radius: 12px; pointer-events: none; }
.sl-tab.is-active .i { color: var(--indigo); }
.sl-tab.is-off { color: var(--muted-2); cursor: default; }
.sl-tab.is-off:hover { color: var(--muted-2); }
.sl-tab .sl-soon { font-size: 12px; font-weight: 500; color: var(--muted); }
.sl-tools { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sl-tools .ra-pills { flex: 1 1 auto; }
.sl-pill .po-pf, .sl-pill .sl-pf { width: 20px; height: 20px; flex: none; }
.sl-add.btn-outline { height: 44px; padding: 0 16px; gap: 8px; font-size: 15px; flex: none; }
.sl-card { padding: 8px 20px 6px; border-radius: 12px; min-width: 0; }
.sl-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 14px; }
.sl-table thead th { height: 52px; padding: 0 10px; font-size: 14.5px; font-weight: 600; color: var(--text); text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border-soft); }
.sl-table col.c-target { width: 30%; }
.sl-table col.c-zone { width: 24%; }
.sl-table col.c-slots { width: 25%; }
.sl-table col.c-max { width: 10%; }
.sl-table col.c-act { width: 110px; }
.sl-row td { height: 64px; padding: 6px 10px; border-bottom: 1px solid var(--border-soft); color: var(--text-2); vertical-align: middle; }
.sl-row:last-child td { border-bottom: 0; }
.sl-row.is-open td { background: #F7F9FF; }
.sl-target { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sl-mark { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 8px; background: var(--indigo); color: #fff; font-size: 17px; font-weight: 800; }
.sl-mark.is-market { background: #EEF1FF; color: var(--indigo); font-size: 13px; }
.sl-mark svg { width: 42px; height: 42px; }
.sl-target div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sl-target b { font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-target small { font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-zone { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--text-2); min-width: 0; }
.sl-zone small { font-size: 13.5px; color: var(--muted); }
.sl-active { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sl-active b { font-size: 14.5px; font-weight: 600; color: var(--text); }
.sl-active small { font-size: 13.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-max { font-size: 14.5px; color: var(--text); }
.sl-edit.btn-outline { height: 40px; min-width: 74px; padding: 0 16px; justify-content: center; border-color: var(--indigo); color: var(--indigo); font-size: 14.5px; font-weight: 600;
  box-shadow: none; text-decoration: none; }
.sl-edit.btn-outline:hover { background: var(--indigo-bg); }
.sl-uncovered { margin: 6px 0 4px; padding: 10px 2px 4px; border-top: 1px solid var(--border-soft); font-size: 13.5px; color: var(--muted); }
.sl-dst { display: flex; align-items: flex-start; gap: 18px; padding: 20px 24px; border-radius: 12px; min-width: 0; }
.sl-dst > .i { flex: none; width: 26px; height: 26px; margin-top: 1px; color: var(--indigo); }
.sl-dst b { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 600; color: var(--text); }
.sl-dst p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.sl-empty .es { padding: 36px 12px; }
.sl-ro { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--text-2); }
/* the drawer */
.sl-backdrop { position: fixed; inset: 0; z-index: 81; background: rgba(23, 27, 45, .12); }
.sl-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 82; display: flex; flex-direction: column; width: 595px; max-width: 100%; background: var(--surface);
  border-left: 1px solid var(--border); box-shadow: -12px 0 32px rgba(23, 27, 45, .10); }
.sl-drawer:focus { outline: none; }
.sl-dhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 24px 8px; }
.sl-dhead h2 { margin: 0 0 6px; font-size: 25px; font-weight: 700; color: var(--text); }
.sl-dhead p { margin: 0; font-size: 15px; color: var(--text-2); }
.sl-x { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--text-2); cursor: pointer; }
.sl-x .i { font-size: 22px; }
.sl-x:hover { background: #F1F3F8; }
.sl-dbody { flex: 1 1 auto; overflow-y: auto; padding: 10px 24px 18px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.sl-lbl { display: block; margin-bottom: 7px; font-size: 14.5px; font-weight: 600; color: var(--text); }
.sl-sub { margin: 12px 0 2px; font-size: 16px; font-weight: 700; color: var(--text); }
.sl-acct { position: relative; display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 44px 0 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.sl-acct .sl-mark { width: 40px; height: 40px; font-size: 16px; }
.sl-acct .sl-mark svg { width: 40px; height: 40px; }
.sl-acct > span:not(.sl-mark) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sl-acct b { font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-acct small { font-size: 13px; color: var(--muted); }
.sl-acct select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font: inherit; }
.sl-acct > .i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--text-2); pointer-events: none; }
.sl-acct.is-fixed select { cursor: default; }
.sl-acct.is-fixed > .i { display: none; }
.sl-grid2 { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; }
.sl-grid2.is-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sl-f { display: flex; flex-direction: column; min-width: 0; }
.sl-f .sl-lbl { font-weight: 500; font-size: 14px; color: var(--text-2); }
.sl-sel { position: relative; display: flex; align-items: center; min-width: 0; }
.sl-sel select, .sl-sel input { width: 100%; height: 44px; padding: 0 38px 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit;
  font-size: 14.5px; color: var(--text); appearance: none; -webkit-appearance: none; min-width: 0; }
.sl-sel input[type="number"] { padding-right: 12px; appearance: auto; -webkit-appearance: auto; }
.sl-sel > .i { position: absolute; right: 12px; font-size: 17px; color: var(--text-2); pointer-events: none; }
.sl-sel select:focus, .sl-sel input:focus { outline: 2px solid rgba(59, 91, 253, .25); border-color: var(--indigo); }
.sl-sel select:disabled, .sl-sel input:disabled { background: #F7F8FB; color: var(--text-2); }
.sl-f.is-invalid select, .sl-f.is-invalid input { border-color: var(--red); }
.sl-err { margin: 4px 0 0; font-size: 12.5px; color: #C2334A; }
.sl-dstline { margin: -2px 0 2px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.sl-note { margin: -2px 0 0; font-size: 13px; color: var(--muted); }
.sl-slotsarea { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 4px; }
.sl-slots { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.sl-slot { display: flex; align-items: center; gap: 7px; min-width: 0; }
.sl-clock { display: grid; place-items: center; flex: none; width: 36px; height: 40px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-2); }
.sl-clock .i { font-size: 18px; }
.sl-slot .sl-sel { flex: 1 1 0; }
.sl-slot .sl-sel.is-time { flex: 0 0 88px; }
.sl-slot .sl-sel select { height: 40px; padding: 0 28px 0 10px; font-size: 14px; }
.sl-slot .sl-sel > .i { right: 8px; font-size: 15px; }
.sl-trash { display: grid; place-items: center; flex: none; width: 30px; height: 36px; border: 0; border-radius: 6px; background: none; color: var(--text-2); cursor: pointer; }
.sl-trash .i { font-size: 18px; }
.sl-trash:hover { background: #FDECEF; color: #C2334A; }
.sl-slot.is-invalid .sl-sel select { border-color: var(--red); }
.sl-addslot { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 4px 0; border: 0; background: none; font: inherit; font-size: 14.5px; font-weight: 600;
  color: var(--indigo); cursor: pointer; }
.sl-addslot .i { font-size: 20px; }
.sl-addslot:disabled { color: var(--muted-2); cursor: default; }
.sl-next { padding: 14px 14px 10px; border-radius: 10px; background: #F4F6FA; min-width: 0; }
.sl-next h4 { margin: 0 0 4px; font-size: 14.5px; font-weight: 600; color: var(--text); }
.sl-next > p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
.sl-next ol { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; background: var(--surface); border-radius: 8px; }
.sl-next li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 26px; padding: 2px 8px; font-size: 12.5px; color: var(--text-2); }
.sl-next li > span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-next li b { font-size: 13px; font-weight: 600; color: var(--text); }
.sl-next li .sl-bul { width: 8px; height: 8px; border-radius: 50%; background: var(--indigo); }
.sl-next li.is-flag .sl-bul { background: var(--amber); }
.sl-next li em { grid-column: 2 / -1; margin-top: -4px; font-style: normal; font-size: 11.5px; color: #9A5B08; }
.sl-next .sl-none { margin: 0; padding: 10px; font-size: 13px; color: var(--muted); background: var(--surface); border-radius: 8px; }
.sl-affected { display: flex; align-items: center; gap: 14px; margin-top: 8px; padding: 14px 16px; border-radius: 10px; background: #EEF3FF; min-width: 0; }
.sl-affected > .i { flex: none; width: 24px; height: 24px; color: var(--indigo); }
.sl-affected div { flex: 1 1 auto; min-width: 0; }
.sl-affected b { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); }
.sl-affected span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--text-2); }
.sl-affected .btn-outline { flex: none; height: 36px; padding: 0 12px; font-size: 13.5px; border-color: var(--indigo); color: var(--indigo); background: var(--surface); }
.sl-dfoot { display: flex; align-items: center; gap: 12px; padding: 14px 24px 18px; border-top: 1px solid var(--border-soft); background: var(--surface); }
.sl-dfoot .btn-outline, .sl-dfoot .btn-primary { height: 46px; padding: 0 26px; font-size: 15.5px; font-weight: 600; }
.sl-dfoot .btn-outline { min-width: 112px; justify-content: center; border-color: var(--indigo); color: var(--indigo); }
.sl-dfoot .sl-save { margin-left: auto; min-width: 128px; justify-content: center; }
.sl-remove { border: 0; background: none; font: inherit; font-size: 14px; color: #C2334A; cursor: pointer; padding: 6px 4px; }
.sl-remove:hover { text-decoration: underline; }
.sl-drawer.is-readonly .sl-addslot, .sl-drawer.is-readonly .sl-trash { display: none; }
.sl-jobs { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; max-height: 380px; overflow-y: auto; }
.sl-jobs li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--border-soft); }
.sl-jobs li:last-child { border-bottom: 0; }
.sl-jobs .sl-pf { width: 20px; height: 20px; }
.sl-jobs div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sl-jobs b { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-jobs small { font-size: 12.5px; color: var(--muted); }
.sl-jobs a { font-size: 12.5px; color: var(--indigo); }
.sl-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.sl-chip.is-green { background: #E4F7EE; color: #0E7A55; }
.sl-chip.is-amber { background: #FFF1D6; color: #9A5B08; }
.sl-chip.is-grey { background: #EEF0F5; color: var(--text-2); }
/* Promotion-15's Saved time slots card since Promotion-33: the next free slots of the post's accounts with Use */
.ds-slotlist { display: flex; flex-direction: column; margin: 4px 0 0; padding: 0; list-style: none; }
.ds-slotrow { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.ds-slotrow:last-child { border-bottom: 0; }
.ds-slotpf { width: 20px; height: 20px; }
.ds-slotrow div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-slotrow b { font-size: 14px; font-weight: 600; color: var(--text); }
.ds-slotrow small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-slotrow .ds-slotflag { color: #9A5B08; white-space: normal; }
.ds-slotuse.btn-outline { height: 32px; padding: 0 12px; font-size: 13.5px; border-color: var(--indigo); color: var(--indigo); }
a.ds-newslot { text-decoration: none; }
/* the Promotion-32 builder's slot set row (Repeat: Saved time slots) */
.rb-slotset { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.rb-slotset .rb-zone { margin: 0; }
@media (max-width: 1280px) {
  .sl-tab { font-size: 15px; gap: 8px; }
  .sl-table col.c-target { width: 32%; }
}
@media (max-width: 900px) {
  .sl-drawer { width: 100%; }
  .sl-slotsarea, .sl-grid2, .sl-grid2.is-even { grid-template-columns: minmax(0, 1fr); }
  .sl-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-tab:nth-child(3) { border-left: 0; }
  .sl-tab { border-top: 1px solid var(--border-soft); height: 52px; }
  .sl-tab:nth-child(-n+2) { border-top: 0; }
  .sl-tools { flex-direction: column; align-items: stretch; }
}
@media (max-width: 600px) {
  .sl-table, .sl-table tbody { display: block; }
  .sl-table colgroup, .sl-table thead { display: none; }
  .sl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
  .sl-row td { display: block; height: auto; padding: 0; border: 0; }
  .sl-row td:nth-child(1) { grid-column: 1 / -1; }
  .sl-row td:nth-child(4) { display: none; }
  .sl-affected { flex-wrap: wrap; }
  .sl-dfoot { flex-wrap: wrap; }
  .sl-dfoot .btn-outline, .sl-dfoot .btn-primary { padding: 0 16px; }
}

/* ---------- Promotion-34 · Market distribution template (mk- this screen: the page "Automations / Market templates" — the breadcrumb with the template name, the head with the progress box, Preview all · Save template · Save and apply and the templates menu; the Markets and distribution card (Add market, the table of markets: the round country badge, the name input and the Primary market line, the language, the zone box with its offset, the account box with the platform mark, the local offer, the destination URL, the Ready / Missing chip, the row menu), the amber missing strip; the Preview card (the market select with its badge and the arrows, the post mock with the avatar, the caption, the picture, the link card, the sandbox note, the locked brand terms box); the Template settings bar (Apply to draft with the draft box, Apply template, Save as new); the Preview all dialog grid) — plans/Promotion-34.md, prototype/gen/promotion34.css ---------- */
.mk-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mk-crumbs { margin-bottom: -8px; }
.mk-crumbs a { color: var(--text-2); text-decoration: none; }
.mk-crumbs a:hover { color: var(--indigo); }
.mk-crumbs span[aria-hidden] { color: var(--muted); }
.mk-head { align-items: flex-start; }
.mk-head .po-actions { align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.mk-progress { display: flex; flex-direction: column; justify-content: center; gap: 10px; width: 190px; height: 60px; padding: 0 14px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); font-size: 13.5px; color: var(--text-2); }
.mk-bar { display: block; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.mk-bar i { display: block; height: 100%; border-radius: 3px; background: var(--green); transition: width .2s; }
.mk-btn.btn-outline, .mk-btn.btn-primary { height: 46px; padding: 0 20px; gap: 9px; font-size: 15.5px; font-weight: 600; }
.mk-btn.btn-outline { border-color: var(--indigo); color: var(--indigo); }
.mk-btn .i { font-size: 19px; }
.mk-mw { position: relative; }
.mk-more { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-2); cursor: pointer; }
.mk-more .i { font-size: 20px; }
.mk-more:hover, .mk-more[aria-expanded="true"] { border-color: var(--indigo); color: var(--indigo); background: var(--indigo-bg); }
.mk-menu.po-menu { right: 0; top: calc(100% + 6px); min-width: 230px; }
.mk-menu h4 { margin: 4px 12px 2px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--muted); text-transform: uppercase; }
.mk-menu a.is-on { color: var(--indigo); font-weight: 600; }
.mk-grid { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 16px; align-items: start; min-width: 0; }
.mk-card { padding: 16px 16px 12px; border-radius: 12px; min-width: 0; }
.mk-cardhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.mk-cardhead h2 { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: var(--text); }
.mk-cardhead p { margin: 0; font-size: 14px; color: var(--text-2); }
.mk-add.btn-outline { height: 42px; padding: 0 16px; gap: 8px; font-size: 15px; font-weight: 600; border-color: var(--indigo); color: var(--indigo); flex: none; }
.mk-tablewrap { min-width: 0; }
.mk-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 13.5px; }
.mk-table thead th { height: 40px; padding: 0 5px; font-size: 13.5px; font-weight: 500; color: var(--text-2); text-align: left; white-space: nowrap; background: #F7F8FB; }
.mk-table thead th:first-child { border-radius: 8px 0 0 8px; padding-left: 10px; }
.mk-table thead th:last-child { border-radius: 0 8px 8px 0; }
.mk-table col.c-market { width: 18.5%; }
.mk-table col.c-lang { width: 10.5%; }
.mk-table col.c-zone { width: 13.5%; }
.mk-table col.c-res { width: 13.5%; }
.mk-table col.c-offer { width: 14.5%; }
.mk-table col.c-url { width: 14.5%; }
.mk-table col.c-status { width: 10.5%; }
.mk-table col.c-dots { width: 32px; }
.mk-row td { height: 70px; padding: 6px 5px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.mk-row td:first-child { padding-left: 10px; }
.mk-market { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mk-flag { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo);
  font-size: 12px; font-weight: 700; letter-spacing: .02em; box-shadow: inset 0 0 0 1px #D8DEFF; }
.mk-market > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mk-market small { font-size: 11.5px; color: var(--muted); }
.mk-in { width: 100%; min-width: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; font: inherit; font-size: 13.5px; color: var(--text); padding: 5px 6px; }
.mk-name.mk-in { font-weight: 600; font-size: 14px; padding: 3px 4px; margin-left: -4px; }
.mk-in:hover { border-color: var(--border); }
.mk-in:focus { outline: 2px solid rgba(59, 91, 253, .22); border-color: var(--indigo); background: var(--surface); }
.mk-box, .mk-offer.mk-in, .mk-url.mk-in { border-color: var(--border); background: var(--surface); }
.mk-offer.mk-in { height: 48px; resize: none; line-height: 1.35; font-size: 13px; }
.mk-url.mk-in { height: 36px; font-size: 13px; color: var(--text-2); }
.mk-sel { position: relative; display: flex; align-items: center; min-width: 0; }
.mk-sel select { width: 100%; height: 36px; padding: 0 24px 0 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); font: inherit; font-size: 13px;
  color: var(--text); appearance: none; -webkit-appearance: none; min-width: 0; text-overflow: ellipsis; }
.mk-sel > .i { position: absolute; right: 7px; font-size: 14px; color: var(--text-2); pointer-events: none; }
.mk-box { position: relative; display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 4px 22px 4px 8px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 12.5px; line-height: 1.3; color: var(--text); min-width: 0; }
.mk-box > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; min-width: 0; }
.mk-box > .mk-one { display: block; white-space: nowrap; text-overflow: ellipsis; }
.mk-box > .mk-flag { display: grid; overflow: visible; }
.mk-box > .mk-two { display: flex; flex-direction: column; }
.mk-two span, .mk-two small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-two small { font-size: 12px; color: var(--text-2); }
.mk-box select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font: inherit; }
.mk-box > .i { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--text-2); pointer-events: none; }
.mk-box .mk-pf { width: 18px; height: 18px; flex: none; }
.mk-box.is-none { color: var(--muted); }
.mk-status { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px; border-radius: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.mk-status .i { font-size: 14px; }
.mk-status.is-ready { background: #E4F7EE; color: #0E7A55; }
.mk-status.is-missing { background: #FFF1D6; color: #9A5B08; }
.mk-dots { display: grid; place-items: center; width: 28px; height: 30px; border: 0; border-radius: 6px; background: none; color: var(--text-2); cursor: pointer; }
.mk-dots:hover, .mk-dots[aria-expanded="true"] { background: #F1F3F8; color: var(--indigo); }
.mk-rmw { position: relative; }
.mk-rowmenu.po-menu { right: 0; top: calc(100% + 4px); min-width: 190px; }
.mk-row.is-invalid td { background: #FFF8F8; }
.mk-err { display: block; margin-top: 2px; font-size: 11.5px; color: #C2334A; }
.mk-missing { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 2px; padding: 0; list-style: none; }
.mk-missing li { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 8px; background: #FFF6E5; font-size: 13.5px; color: #7A4A06; }
.mk-missing li .i { flex: none; font-size: 17px; color: var(--amber-line); }
/* the preview card */
.mk-pv { padding: 16px; border-radius: 12px; min-width: 0; }
.mk-pvhead { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.mk-pvhead > div:first-child { flex: 1 1 auto; min-width: 0; }
.mk-pvhead h2 { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: var(--text); }
.mk-pvhead p { margin: 0; font-size: 13.5px; color: var(--text-2); }
.mk-pvsel { display: flex; align-items: center; gap: 6px; flex: none; }
.mk-pvsel .mk-box { min-height: 38px; min-width: 120px; padding-left: 6px; }
.mk-pvsel .mk-flag { width: 22px; height: 22px; font-size: 9px; }
.mk-arrow { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text-2); cursor: pointer; }
.mk-arrow:disabled { opacity: .45; cursor: default; }
.mk-mock { border: 1px solid var(--border); border-radius: 10px; padding: 12px; min-width: 0; }
.mk-mockhead { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mk-av { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--indigo); color: #fff; font-weight: 800; font-size: 15px; }
.mk-mockhead div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.mk-mockhead b { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; color: var(--text); }
.mk-mockhead b .i { font-size: 15px; color: var(--indigo); }
.mk-mockhead small { font-size: 12.5px; color: var(--muted); }
.mk-mockhead > .i { font-size: 18px; color: var(--text-2); }
.mk-caption { margin: 0 0 10px; font-size: 14.5px; line-height: 1.45; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.mk-pic { position: relative; aspect-ratio: 2.6 / 1; border-radius: 6px; overflow: hidden; background: linear-gradient(135deg, #0B1430, #2554D6); }
.mk-pic img, .mk-pic .ph-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mk-pic .mk-tile { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 28px; font-weight: 800; }
.mk-link { padding: 8px 10px; margin-top: -2px; border-radius: 0 0 6px 6px; background: #F4F6FA; font-size: 12.5px; color: var(--text-2); }
.mk-link small { display: block; color: var(--muted); }
.mk-link b { display: block; margin: 1px 0; font-size: 14px; color: var(--text); }
.mk-nolink { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.mk-sandbox { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.mk-terms { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: #EEF3FF; }
.mk-terms > .i { flex: none; font-size: 20px; color: var(--indigo); margin-top: 1px; }
.mk-terms div { flex: 1 1 auto; min-width: 0; }
.mk-terms b { display: block; font-size: 13px; font-weight: 600; color: var(--indigo); }
.mk-terms span { font-size: 13px; color: var(--text-2); }
.mk-terms em { display: block; margin-top: 3px; font-style: normal; font-size: 12px; color: #9A5B08; }
/* the template settings bar */
.mk-bar2 { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-radius: 12px; min-width: 0; flex-wrap: wrap; }
.mk-bar2 > .i { flex: none; font-size: 26px; color: var(--indigo); }
.mk-bar2 .mk-bt { flex: 1 1 260px; min-width: 0; }
.mk-bar2 .mk-bt b { display: block; font-size: 16px; font-weight: 700; color: var(--text); }
.mk-bar2 .mk-bt span { font-size: 13.5px; color: var(--text-2); }
.mk-applyto { display: flex; align-items: center; gap: 14px; }
.mk-applyto > span { font-size: 14px; color: var(--text-2); white-space: nowrap; }
.mk-draft.mk-box { width: 360px; min-height: 52px; padding: 5px 30px 5px 6px; gap: 10px; }
.mk-draft .mk-thumb { flex: none; width: 56px; height: 38px; border-radius: 5px; overflow: hidden; position: relative; background: linear-gradient(135deg, #0B1430, #2554D6); }
.mk-draft .mk-thumb img, .mk-draft .mk-thumb .ph-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mk-draft div { display: flex; flex-direction: column; min-width: 0; }
.mk-draft b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-draft small { font-size: 12.5px; color: var(--muted); }
.mk-bar2 .btn-primary, .mk-bar2 .btn-outline { height: 46px; padding: 0 22px; gap: 8px; font-size: 15px; font-weight: 600; }
.mk-bar2 .btn-outline { border-color: var(--indigo); color: var(--indigo); }
.mk-ro { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--text-2); }
.mk-empty .es { padding: 40px 12px; }
.mk-all { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-height: 60vh; overflow-y: auto; margin: 4px 0 8px; }
.mk-all article { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; color: var(--text-2); min-width: 0; }
.mk-all header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mk-all header b { flex: 1 1 auto; font-size: 13.5px; color: var(--text); }
.mk-all .mk-flag { width: 24px; height: 24px; font-size: 9px; }
.mk-all p { margin: 0 0 4px; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.dg.mk-dlg { max-width: 760px; width: calc(100vw - 32px); }
@media (max-width: 1280px) {
  .mk-grid { grid-template-columns: minmax(0, 1fr); }
  .mk-draft.mk-box { width: 300px; }
}
@media (max-width: 900px) {
  .mk-head .po-actions { justify-content: flex-start; }
  .mk-table, .mk-table tbody { display: block; }
  .mk-table colgroup, .mk-table thead { display: none; }
  .mk-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
  .mk-row td { display: block; height: auto; padding: 0; border: 0; }
  .mk-row td:first-child { grid-column: 1 / 2; padding-left: 0; }
  .mk-row td:nth-child(7) { grid-column: 2 / 3; grid-row: 1; justify-self: end; }
  .mk-row td:nth-child(8) { display: none; }
  .mk-row td:nth-child(5), .mk-row td:nth-child(6) { grid-column: 1 / -1; }
  .mk-applyto { flex-wrap: wrap; width: 100%; }
  .mk-draft.mk-box { width: 100%; }
  .mk-all { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .mk-cardhead { flex-direction: column; }
  .mk-pvhead { flex-direction: column; }
  .mk-head .po-actions .mk-btn { flex: 1 1 140px; }
  .mk-progress { width: 100%; }
}
/* ---------- Promotion-35 · Automation review and run history (rh- this screen: the page "Automations / Runs" — the breadcrumb, the head with Run now · Edit rule and the ⋯ menu; the Runs card (the filter select, the run rows with the status circle, the slot, the rule and version line, the chip and the counts, the chevron, the selected row, the pager) and the detail panel (the head with the circle, the slot, the chip, the rule, the Run ID and Version with copy buttons, the timing line, the reason strip; the Source items card with thumbnails, the format, the Approved / Skipped state, the Content version and View post; the Targets and variants table with the variant, the target mark, the status chip, the evidence link or text and the row menu; the Authorisation card with the shield, the text and the actions) and the rule snapshot dialog) — plans/Promotion-35.md, prototype/gen/promotion35.css ---------- */
.rh-root { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rh-crumbs { margin-bottom: -8px; }
.rh-crumbs a { color: var(--text-2); text-decoration: none; }
.rh-crumbs a:hover { color: var(--indigo); }
.rh-crumbs span[aria-current] { color: var(--indigo); }
.rh-head .po-actions { gap: 12px; align-items: center; }
.rh-btn.btn-primary, .rh-btn.btn-outline { height: 46px; padding: 0 22px; gap: 9px; font-size: 16px; font-weight: 600; }
.rh-btn.btn-outline { border-color: var(--indigo); color: var(--indigo); }
.rh-btn .i { font-size: 19px; }
.rh-mw { position: relative; }
.rh-more { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-2); cursor: pointer; }
.rh-more .i { font-size: 20px; }
.rh-more:hover, .rh-more[aria-expanded="true"] { border-color: var(--indigo); color: var(--indigo); background: var(--indigo-bg); }
.rh-menu.po-menu { right: 0; top: calc(100% + 6px); min-width: 200px; }
.rh-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr); gap: 16px; align-items: start; min-width: 0; }
.rh-list { padding: 16px; border-radius: 12px; min-width: 0; }
.rh-lhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.rh-lhead h2 { margin: 0 0 4px; font-size: 20px; font-weight: 700; color: var(--text); }
.rh-lhead p { margin: 0; font-size: 14px; color: var(--text-2); }
.rh-filter { position: relative; flex: none; }
.rh-filter select { width: 170px; height: 40px; padding: 0 30px 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 14px;
  color: var(--text); appearance: none; -webkit-appearance: none; }
.rh-filter .i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--text-2); pointer-events: none; }
.rh-rows { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rh-run { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 18px; align-items: center; gap: 12px; min-height: 74px; padding: 10px 12px; border: 1px solid transparent;
  border-bottom-color: var(--border-soft); border-radius: 10px; color: inherit; text-decoration: none; cursor: pointer; }
.rh-run:hover { background: #FAFBFD; }
.rh-run.is-on { border-color: #BFCBFF; background: #EEF3FF; }
.rh-circ { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #EEF0F5; color: var(--muted); }
.rh-circ .i { font-size: 20px; }
.rh-circ.is-green { background: #E4F7EE; color: #0E9F6E; }
.rh-circ.is-amber { background: #FFF1D6; color: #C27A0E; }
.rh-circ.is-red { background: #FDECEF; color: #D63B55; }
.rh-circ.is-indigo { background: var(--indigo-bg); color: var(--indigo); }
.rh-circ.is-grey { background: #EEF1FF; color: var(--indigo); }
.rh-rmain { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rh-rmain b { font-size: 15.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-rmain small { font-size: 13.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-rmain .rh-counts { font-size: 12.5px; color: var(--muted); white-space: normal; }
.rh-rside { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 0; align-self: start; margin-top: 2px; }
.rh-rside small { font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.rh-chev { font-size: 18px; color: var(--text-2); }
.rh-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.rh-chip.is-green { background: #E4F7EE; color: #0E7A55; }
.rh-chip.is-amber { background: #FFF1D6; color: #9A5B08; }
.rh-chip.is-grey { background: #EEF0F5; color: var(--text-2); }
.rh-chip.is-red { background: #FDECEF; color: #B42D45; }
.rh-chip.is-indigo { background: var(--indigo-bg); color: var(--indigo); }
.rh-lfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 13.5px; color: var(--text-2); }
.rh-pager { display: inline-flex; gap: 6px; }
.rh-pager a, .rh-pager span { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-2); text-decoration: none; }
.rh-pager span { opacity: .5; }
.rh-empty .es { padding: 32px 8px; }
/* the detail */
.rh-detail { padding: 18px; border-radius: 12px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rh-dhead { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; }
.rh-dhead .rh-circ { width: 30px; height: 30px; margin-top: 2px; }
.rh-dhead .rh-circ .i { font-size: 17px; }
.rh-dtitle h2 { margin: 0; font-size: 21px; font-weight: 800; color: var(--text); }
.rh-dtitle p { margin: 4px 0 0; font-size: 14.5px; color: var(--text-2); }
.rh-dtitle p b { color: var(--text); font-weight: 700; }
.rh-meta { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; font-size: 13.5px; color: var(--text-2); }
.rh-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.rh-copy { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 5px; background: none; color: var(--text-2); cursor: pointer; }
.rh-copy .i { font-size: 15px; }
.rh-copy:hover { background: #F1F3F8; color: var(--indigo); }
.rh-meta .rh-times { margin-left: auto; }
.rh-reason { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: 8px; background: #FFF6E5; font-size: 13.5px; color: #7A4A06; }
.rh-reason.is-red { background: #FDECEF; color: #8F2236; }
.rh-reason .i { flex: none; font-size: 17px; margin-top: 1px; }
.rh-sub { padding: 14px; border: 1px solid var(--border); border-radius: 10px; min-width: 0; }
.rh-subhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.rh-subhead h3 { margin: 0 0 3px; font-size: 16px; font-weight: 700; color: var(--text); }
.rh-subhead p { margin: 0; font-size: 13.5px; color: var(--text-2); }
.rh-sbtn.btn-outline { height: 38px; padding: 0 14px; gap: 8px; font-size: 14px; font-weight: 600; border-color: var(--indigo); color: var(--indigo); flex: none; text-decoration: none; }
.rh-sources { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rh-src { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.rh-thumb { position: relative; width: 96px; height: 52px; border-radius: 6px; overflow: hidden; background: linear-gradient(135deg, #0B1430, #2554D6); }
.rh-thumb img, .rh-thumb .ph-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rh-thumb .rh-tile { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 14px; }
.rh-src div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rh-src b { font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; color: var(--text-2); }
.rh-facts > span { display: inline-flex; align-items: center; gap: 5px; }
.rh-facts .i { font-size: 15px; }
.rh-facts .is-ok { color: #0E7A55; }
.rh-facts .is-ok::before, .rh-facts .is-skip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #12B981; }
.rh-facts .is-skip { color: var(--muted); }
.rh-facts .is-skip::before { background: #9CA3AF; }
.rh-src em { font-style: normal; font-size: 12.5px; color: var(--muted); }
.rh-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 13.5px; }
.rh-table thead th { height: 34px; padding: 0 6px; font-size: 13px; font-weight: 500; color: var(--text-2); text-align: left; background: #F7F8FB; white-space: nowrap; }
.rh-table thead th:first-child { border-radius: 6px 0 0 6px; }
.rh-table thead th:last-child { border-radius: 0 6px 6px 0; }
.rh-table col.c-content { width: 25%; }
.rh-table col.c-variant { width: 16%; }
.rh-table col.c-target { width: 22%; }
.rh-table col.c-status { width: 18%; }
.rh-table col.c-evidence { width: 19%; }
.rh-table col.c-dots { width: 32px; }
.rh-trow td { height: 42px; padding: 5px 6px; border-bottom: 1px solid var(--border-soft); color: var(--text-2); vertical-align: middle; }
.rh-trow:last-child td { border-bottom: 0; }
.rh-cont { display: flex; align-items: center; gap: 9px; min-width: 0; }
.rh-cont .rh-thumb { width: 44px; height: 30px; flex: none; border-radius: 4px; }
.rh-cont b { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-tgt { display: flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-tgt svg { width: 18px; height: 18px; flex: none; }
.rh-tgt span { overflow: hidden; text-overflow: ellipsis; }
.rh-ev { display: block; min-width: 0; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.rh-ev { display: inline-flex; align-items: center; gap: 5px; color: var(--indigo); font-weight: 600; text-decoration: none; }
a.rh-ev .i { font-size: 14px; }
.rh-ev.is-caption { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--text-2); }
.rh-dots { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--text-2); cursor: pointer; }
.rh-dots:hover, .rh-dots[aria-expanded="true"] { background: #F1F3F8; color: var(--indigo); }
.rh-tmw { position: relative; }
.rh-tmenu.po-menu { right: 0; top: calc(100% + 4px); min-width: 190px; }
.rh-auth { display: flex; align-items: center; gap: 12px 14px; flex-wrap: wrap; }
.rh-authacts.is-block { flex: 1 1 100%; padding-left: 54px; }
.rh-shield { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); }
.rh-shield .i { font-size: 20px; }
.rh-shield.is-amber { background: #FFF1D6; color: #C27A0E; }
.rh-auth > div { flex: 1 1 220px; min-width: 0; }
.rh-auth b { display: block; font-size: 15px; font-weight: 700; color: var(--text); }
.rh-auth span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--text-2); }
.rh-authacts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rh-authacts .btn-primary, .rh-authacts .btn-outline { height: 40px; padding: 0 16px; gap: 8px; font-size: 14px; font-weight: 600; }
.rh-authacts .btn-outline { border-color: var(--indigo); color: var(--indigo); text-decoration: none; }
.rh-authacts .rh-why { flex-basis: 100%; font-size: 12.5px; color: var(--muted); }
.rh-snap { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 14px; margin: 6px 0 10px; font-size: 13.5px; }
.rh-snap dt { color: var(--muted); }
.rh-snap dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.rh-snapnote { margin: 0 0 8px; font-size: 13px; color: var(--text-2); }
.rh-ro { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--text-2); }
@media (max-width: 1280px) {
  .rh-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .rh-table, .rh-table tbody { display: block; }
  .rh-table colgroup, .rh-table thead { display: none; }
  .rh-trow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
  .rh-trow td { display: block; height: auto; padding: 0; border: 0; }
  .rh-trow td:nth-child(1) { grid-column: 1 / -1; }
  .rh-trow td:nth-child(6) { display: none; }
  .rh-meta .rh-times { margin-left: 0; }
  .rh-src { grid-template-columns: 72px minmax(0, 1fr); }
  .rh-src .rh-thumb { width: 72px; height: 44px; }
  .rh-src > a, .rh-src > span:last-child { grid-column: 2; justify-self: start; }
}
@media (max-width: 600px) {
  .rh-head .po-actions { flex-wrap: wrap; }
  .rh-head .po-actions .rh-btn { flex: 1 1 140px; }
  .rh-lhead { flex-direction: column; }
  .rh-run { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .rh-run .rh-chev { display: none; }
  .rh-authacts.is-block { padding-left: 0; }
  .rh-subhead { flex-direction: column; }
  .rh-snap { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Promotion-36 · Social accounts (sa- this screen: the page "Social accounts" — the head with Connect account, the four KPI cards (connected, healthy, needs attention, login identities), the round platform pills with marks and counts, the search, the account table (platform mark · account / resource · login identity · mapped brand · access · session · status · ⋯ with the row menu), the Shared login identities card and the selected-account panel with the Details · Permissions · Linked resources · Recent activity tabs and its footer) — plans/Promotion-36.md, prototype/gen/promotion36.css ---------- */
.sa-root { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sa-head { padding-bottom: 0; }
.sa-head h1 { font-size: 32px; }
.sa-head .sa-connect { height: 44px; padding: 0 22px; font-size: 16px; }
.sa-head .sa-connect .i { font-size: 20px; }
.sa-ro { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 8px; background: var(--track); color: var(--text-2); font-size: 14px; font-weight: 600; }
.sa-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.sa-kpi { display: flex; align-items: center; gap: 22px; min-height: 86px; padding: 14px 22px; border-radius: 12px; min-width: 0; }
.sa-kic { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; }
.sa-kic .i { font-size: 27px; }
.sa-kic.is-indigo { background: var(--indigo-bg); color: var(--indigo); }
.sa-kic.is-green { background: var(--green-bg); color: var(--green); }
.sa-kic.is-amber { background: var(--amber-bg); color: var(--amber); }
.sa-kpi > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sa-klbl { font-size: 15px; font-weight: 500; color: var(--text); }
.sa-kpi b { font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--text); }
.sa-kpi small { font-size: 14px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-tools { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sa-pills { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; flex-wrap: wrap; min-width: 0; }
.sa-pill { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px 0 16px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface);
  font: inherit; font-size: 15px; color: var(--text); cursor: pointer; white-space: nowrap; }
.sa-pill:hover { border-color: #C9D2FF; }
.sa-ppf { width: 22px; height: 22px; flex: none; }
.sa-n { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: #EEF0F5; font-size: 13px; font-weight: 600; color: var(--text-2); }
.sa-pill.is-active { border-color: var(--indigo); background: var(--indigo); color: #fff; font-weight: 600; }
.sa-pill.is-active .sa-n { background: rgba(255, 255, 255, .22); color: #fff; }
.sa-search { position: relative; display: inline-flex; align-items: center; flex: none; }
.sa-search > .i { position: absolute; left: 14px; font-size: 18px; color: var(--muted); pointer-events: none; }
.sa-search input { width: 268px; height: 40px; padding: 0 14px 0 42px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 15px; color: var(--text); }
.sa-search input:focus { outline: 2px solid rgba(59, 91, 253, .25); border-color: var(--indigo); }
.sa-grid { display: grid; grid-template-columns: minmax(0, 1fr) 468px; gap: 14px; align-items: start; min-width: 0; }
.sa-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.sa-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sa-list { min-width: 0; }
.sa-card { padding: 6px 8px 8px; border-radius: 12px; min-width: 0; }
.sa-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 14px; }
.sa-table thead th { height: 46px; padding: 0 7px; font-size: 14px; font-weight: 600; color: var(--text); text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border-soft); }
.sa-table col.c-pf { width: 60px; }
.sa-table col.c-acct { width: 19%; }
.sa-table col.c-login { width: 24%; }
.sa-table col.c-brand { width: 13%; }
.sa-table col.c-access { width: 8%; }
.sa-table col.c-sess { width: 12%; }
.sa-table col.c-status { width: 24%; }
.sa-table col.c-more { width: 40px; }
.sa-row td { height: 64px; padding: 6px 7px; border-bottom: 1px solid var(--border-soft); color: var(--text-2); vertical-align: middle; cursor: pointer; }
.sa-row:last-child td { border-bottom: 0; }
.sa-row:hover td { background: #FAFBFD; }
.sa-row.is-selected td { background: #F1F4FF; }
.sa-row.is-selected td:first-child { border-radius: 8px 0 0 8px; }
.sa-row.is-selected td:last-child { border-radius: 0 8px 8px 0; }
.sa-row:focus-visible { outline: none; }
.sa-row:focus-visible td { box-shadow: inset 0 2px 0 var(--indigo), inset 0 -2px 0 var(--indigo); }
.sa-mark { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; }
.sa-pf { width: 36px; height: 36px; }
.sa-pf-lg { width: 54px; height: 54px; }
.sa-two { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sa-two b { font-size: 14.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-two small { font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-login { font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-brand, .sa-access { font-size: 14.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.sa-brand.is-none { color: var(--muted); }
.sa-chip { display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.sa-chip.is-green { background: var(--green-bg); color: var(--green-text); }
.sa-chip.is-amber { background: var(--amber-bg); color: var(--amber-line); }
.sa-chip.is-red { background: #FDECEF; color: #C23349; }
.sa-chip.is-grey { background: var(--track); color: var(--text-2); }
.sa-chip.is-indigo { background: var(--indigo-bg); color: var(--indigo); }
.sa-sess { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); white-space: nowrap; }
.sa-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--grey); flex: none; }
.sa-sess.is-green .sa-dot { background: var(--green); }
.sa-sess.is-amber .sa-dot { background: var(--amber); }
.sa-sess.is-red .sa-dot { background: var(--red); }
.sa-mw { position: relative; display: inline-flex; }
.sa-more { border: 0; background: none; cursor: pointer; }
.sa-menu { top: calc(100% + 4px); min-width: 220px; }
.sa-menu.is-up { top: auto; bottom: calc(100% + 6px); }
.sa-empty { padding: 20px 8px; }
.sa-info { display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-radius: 12px; min-width: 0; }
.sa-iic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); }
.sa-iic .i { font-size: 21px; }
.sa-info > div { flex: 1 1 auto; min-width: 0; }
.sa-info b { font-size: 15px; font-weight: 600; color: var(--text); }
.sa-info p { margin: 4px 0 0; font-size: 14px; color: var(--text-2); }
.sa-learn { flex: none; height: 40px; padding: 0 20px; color: var(--indigo); border-color: #C9D2FF; font-weight: 600; }
.sa-panel-host { min-width: 0; }
.sa-panel { display: flex; flex-direction: column; padding: 18px 16px 16px; border-radius: 12px; min-width: 0; }
.sa-phead { display: flex; align-items: center; gap: 14px; padding: 0 4px 14px; min-width: 0; }
.sa-phead .sa-mark { width: 58px; height: 58px; }
.sa-ptitle { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.sa-ptitle b { font-size: 19px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-ptitle small { font-size: 14px; color: var(--muted); }
.sa-phead .sa-chip { height: 34px; padding: 0 14px; font-size: 14px; }
.sa-ptabs { display: flex; justify-content: space-between; gap: 0; border-bottom: 1px solid var(--border-soft); margin: 0 0 12px; overflow-x: auto; scrollbar-width: none; }
.sa-ptab { flex: none; height: 42px; padding: 0 9px; border: 0; background: none; font: inherit; font-size: 14px; color: var(--text-2); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.sa-ptab:hover { color: var(--indigo); }
.sa-ptab.is-active { color: var(--indigo); font-weight: 600; border-bottom-color: var(--indigo); }
.sa-pane { min-height: 280px; padding: 0 4px; }
.sa-facts { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 7px 12px; margin: 0; font-size: 14px; }
.sa-facts dt { color: var(--text-2); }
.sa-facts dd { margin: 0; color: var(--text); font-weight: 500; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; overflow-wrap: anywhere; }
.sa-facts dd small { flex-basis: 100%; font-size: 14px; color: var(--text); font-weight: 500; }
.sa-facts .sa-chip { height: 28px; }
.sa-note { font-size: 13.5px; color: var(--text-2); font-weight: 400; }
.sa-perms, .sa-linked, .sa-acts { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sa-perms li { display: grid; grid-template-columns: 110px auto; align-items: center; gap: 4px 10px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 8px; }
.sa-perms .sa-cap { font-weight: 600; color: var(--text); }
.sa-perms .sa-chip { justify-self: start; height: 26px; }
.sa-perms code { grid-column: 2; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.sa-pnote { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); }
.sa-linked li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 8px; min-width: 0; }
.sa-linked .sa-two { flex: 1 1 auto; }
.sa-linked .sa-chip { height: 26px; }
.sa-open { height: 34px; padding: 0 12px; font-size: 13.5px; }
.sa-acts li { display: flex; gap: 12px; align-items: flex-start; }
.sa-acts .sa-dot { margin-top: 6px; background: var(--indigo); }
.sa-acts div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sa-acts b { font-size: 14px; font-weight: 500; color: var(--text); }
.sa-acts small { font-size: 13px; color: var(--muted); }
.sa-pfoot { display: flex; align-items: center; gap: 10px; padding: 14px 4px 0; margin-top: 12px; border-top: 1px solid var(--border-soft); }
.sa-pfoot .btn-outline { height: 42px; padding: 0 16px; gap: 8px; font-size: 15px; font-weight: 600; color: var(--indigo); border-color: #C9D2FF; text-decoration: none; }
.sa-view, .sa-manage { flex: 1 1 0; justify-content: center; min-width: 0; white-space: nowrap; }
.sa-pfoot .sa-pmore { width: 48px; padding: 0; justify-content: center; color: var(--text-2); border-color: var(--border); }
.sa-pfoot .sa-mw { flex: none; }
.sa-pfoot .sa-menu { right: 0; }
@media (max-width: 1280px) {
  .sa-grid { grid-template-columns: minmax(0, 1fr); }
  .sa-pane { min-height: 0; }
}
@media (max-width: 900px) {
  .sa-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-table col.c-brand, .sa-table col.c-sess { width: 0; }
  .sa-table th:nth-child(4), .sa-table td:nth-child(4), .sa-table th:nth-child(6), .sa-table td:nth-child(6) { display: none; }
  .sa-tools { flex-wrap: wrap; }
  .sa-search, .sa-search input { width: 100%; }
}
@media (max-width: 600px) {
  .sa-kpis { grid-template-columns: minmax(0, 1fr); }
  .sa-head { flex-wrap: wrap; align-items: flex-start; }
  .sa-table, .sa-table tbody { display: block; }
  .sa-table thead, .sa-table colgroup { display: none; }
  .sa-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 6px 10px; padding: 12px 6px; border-bottom: 1px solid var(--border-soft); }
  .sa-row td { display: block; height: auto; padding: 0; border: 0; background: none !important; }
  .sa-row td:nth-child(1) { grid-row: span 3; }
  .sa-row td:nth-child(2) { grid-column: 2; }
  .sa-row td:nth-child(8) { grid-column: 3; grid-row: 1; }
  .sa-row td:nth-child(3), .sa-row td:nth-child(5), .sa-row td:nth-child(7) { grid-column: 2 / 4; }
  .sa-info { flex-wrap: wrap; }
  .sa-pfoot { flex-wrap: wrap; }
  .sa-view, .sa-manage { flex: 1 1 100%; }
  .sa-pfoot .sa-mw { margin-left: auto; }
  .sa-facts { grid-template-columns: 112px minmax(0, 1fr); }
}

/* ---------- Promotion-37 · Connect social platform (sc- this screen: the page "Connect social platform" — the head with the crumbs and View connected accounts, the lead, the error strip, five provider cards (mark, name, description, the Demo sandbox chip, the four capability tags from the connector, Connect {Platform}; the selected card indigo; the unconfigured variant with Provider app not configured and Setup steps), the sign-in note, "How would you like to proceed?" with two radio cards and "Important to know"; the demo provider's consent card (logins, permissions, Cancel / Allow) on its bare page) — plans/Promotion-37.md, prototype/gen/promotion37.css ---------- */
.sc-root { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sc-head { align-items: flex-start; padding-bottom: 0; }
.sc-head h1 { font-size: 32px; }
.sc-crumbs { margin: 8px 0 0; font-size: 14.5px; }
.sc-view { height: 44px; }
.sc-lead { margin: -4px 4px 0; font-size: 16.5px; color: var(--text-2); }
.sc-error { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px; background: #FDECEF; color: #A12A3D; font-size: 14.5px; font-weight: 500; }
.sc-error[hidden] { display: none; }
.sc-error .i { font-size: 19px; flex: none; }
.sc-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.sc-card { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 250px; padding: 20px 18px 18px; border-radius: 12px; border: 1px solid var(--border);
  cursor: pointer; min-width: 0; transition: border-color .12s, box-shadow .12s; }
.sc-card:hover { border-color: #C9D2FF; }
.sc-card:focus-visible { outline: 2px solid rgba(59, 91, 253, .35); outline-offset: 2px; }
.sc-card.is-selected { border: 2px solid var(--indigo); padding: 19px 17px 17px; background: #FBFCFF; box-shadow: 0 6px 22px rgba(59, 91, 253, .08); }
.sc-top { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.sc-pf { width: 58px; height: 58px; flex: none; }
.sc-top h2 { margin: 6px 0 6px; font-size: 19px; font-weight: 700; color: var(--text); }
.sc-top p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--text-2); }
.sc-sandbox { align-self: flex-start; margin: -6px 0 -4px 76px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--amber-bg); color: var(--amber-line);
  font-size: 11.5px; font-weight: 700; line-height: 22px; }
.sc-sandbox[hidden] { display: none; }
.sc-tags { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.sc-tag { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 8px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--surface);
  font-size: 14px; color: var(--text); white-space: nowrap; }
.sc-tic { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--green); color: #fff; flex: none; }
.sc-tic .i { font-size: 12px; stroke-width: 3; }
.sc-tag.is-off { color: var(--muted-2); background: #FAFBFC; }
.sc-tag.is-off .sc-tic { background: #C4C9D4; }
.sc-go { margin-top: auto; height: 42px; justify-content: center; font-size: 15px; font-weight: 600; }
.sc-card .btn-outline.sc-go { color: var(--indigo); border-color: var(--indigo); }
.sc-off { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.sc-off .sc-go { margin-top: 0; width: 100%; }
.sc-card .sc-off .sc-go[disabled] { font-size: 13.5px; white-space: nowrap; color: var(--muted); border-color: var(--border); background: var(--track); cursor: not-allowed; opacity: 1; }
.sc-steps { align-self: center; border: 0; background: none; padding: 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--indigo); cursor: pointer; }
.sc-steps:hover { text-decoration: underline; }
.sc-signin { display: flex; align-items: center; gap: 8px; margin: -4px 4px 0; font-size: 14px; color: var(--text-2); }
.sc-signin .i { font-size: 16px; color: var(--muted); }
.sc-lower { display: grid; grid-template-columns: minmax(0, 1.37fr) minmax(0, 1fr); gap: 14px; min-width: 0; }
.sc-proceed, .sc-know { padding: 22px 18px 20px; border-radius: 12px; min-width: 0; }
.sc-proceed h2, .sc-know h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 18px; font-weight: 600; color: var(--text); }
.sc-know h2 .i { font-size: 22px; color: var(--indigo); }
.sc-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sc-choice { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 2px 12px; min-height: 132px; padding: 14px 18px;
  border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.sc-choice input { grid-row: 1; margin: 4px 0 0; width: 22px; height: 22px; accent-color: var(--indigo); }
.sc-cic { grid-column: 2; grid-row: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); }
.sc-cic .i { font-size: 22px; }
.sc-choice b { grid-column: 2; font-size: 15.5px; font-weight: 600; color: var(--text); margin-top: 6px; }
.sc-choice small { grid-column: 2; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.sc-choice.is-selected { border: 2px solid var(--indigo); padding: 13px 17px; background: #FBFCFF; }
.sc-know ul { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sc-know li { display: flex; align-items: center; gap: 14px; font-size: 14.5px; color: var(--text); }
.sc-kic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); flex: none; }
.sc-kic .i { font-size: 14px; stroke-width: 2.6; }
.sc-more { display: inline-flex; align-items: center; gap: 8px; float: right; margin-top: 14px; border: 0; background: none; padding: 0; font: inherit; font-size: 14.5px; font-weight: 600;
  color: var(--indigo); cursor: pointer; }
.sc-more:hover { text-decoration: underline; }
.sc-more .i { font-size: 18px; }
/* the demo provider's consent card (its own bare page; the prototype shows it over the page) */
.sc-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(23, 27, 45, .45); overflow: auto; }
.sc-page { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--bg); }
.sc-consent { width: min(520px, 100%); padding: 28px 28px 22px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 18px 48px rgba(23, 27, 45, .18); }
.sc-chead { display: flex; align-items: center; gap: 14px; }
.sc-chead .sc-pf { width: 48px; height: 48px; }
.sc-chead h1 { margin: 0; font-size: 21px; font-weight: 700; color: var(--text); }
.sc-chead .sc-sandbox { position: static; margin-left: auto; }
.sc-ask { margin: 16px 0 14px; font-size: 15px; color: var(--text-2); }
.sc-ask b { color: var(--text); }
.sc-sub { margin: 16px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.sc-logins { display: flex; flex-direction: column; gap: 8px; }
.sc-login { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.sc-login input { width: 18px; height: 18px; accent-color: var(--indigo); flex: none; }
.sc-login span { display: flex; flex-direction: column; min-width: 0; }
.sc-login b { font-size: 14.5px; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.sc-login small { font-size: 13px; color: var(--muted); }
.sc-login:has(input:checked) { border-color: var(--indigo); background: var(--indigo-bg-2); }
.sc-grants { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sc-grants li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text); }
.sc-grants .i { font-size: 16px; color: var(--green); flex: none; }
.sc-cnote { margin: 16px 0 0; font-size: 13px; color: var(--muted); }
.sc-cfoot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.sc-cfoot button { height: 42px; padding: 0 20px; font-weight: 600; }
@media (max-width: 1280px) {
  .sc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .sc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-lower { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .sc-cards, .sc-choices { grid-template-columns: minmax(0, 1fr); }
  .sc-head { flex-wrap: wrap; }
  .sc-card { min-height: 0; }
  .sc-more { float: none; }
}

/* ---------- Promotion-38 · Social resource details (sx- this screen: the page "Social resource details" — the crumbs, the head with Add resource, the sign-in strip, the summary card (the mark, the handle with the status chip, the type, the about line, the facts Resource ID · Owner · Connected since · Session · Used in publishing, Reconnect / Change owner / ⋯), the Resources · Permissions · Activity tabs, the Connected resources card (search, type and status selects, the table with ids, owners, sessions, usage, status and Manage / Open / Add), the permissions table, the activity list, the right column Resource details and Next scheduled posts, the Add resource dialog); reuses the sa- chips, marks and facts of Promotion-36 — plans/Promotion-38.md, prototype/gen/promotion38.css ---------- */
.sx-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sx-crumbs { margin: 4px 4px -10px; font-size: 14.5px; }
.sx-head { padding-bottom: 0; }
.sx-head h1 { font-size: 30px; }
.sx-head .sx-add { height: 44px; padding: 0 20px; font-size: 15.5px; }
.sx-signin { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px; background: var(--amber-bg); color: var(--amber-line); font-size: 14.5px; font-weight: 500; }
.sx-signin[hidden] { display: none; }
.sx-signin .i { font-size: 19px; flex: none; }
.sx-summary { position: relative; display: flex; align-items: center; gap: 22px; min-height: 118px; padding: 18px 20px; border-radius: 12px; min-width: 0; }
.sx-who { display: flex; align-items: center; gap: 16px; flex: 1 1 300px; min-width: 240px; }
.sx-bigmark { flex: none; display: grid; place-items: center; width: 64px; height: 64px; }
.sx-pf { width: 62px; height: 62px; }
.sx-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sx-nrow { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sx-nrow h2 { margin: 0; font-size: 21px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-nrow .sa-chip { height: 26px; }
.sx-kind { font-size: 15px; color: var(--text-2); }
.sx-name p { margin: 4px 0 0; font-size: 13.5px; color: var(--text-2); }
.sx-facts { display: flex; flex: none; min-width: 0; }
.sx-fact { display: flex; flex-direction: column; gap: 8px; padding: 0 15px; border-left: 1px solid var(--border-soft); min-width: 0; }
.sx-flbl { font-size: 13px; color: var(--text-2); white-space: nowrap; }
.sx-fval { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--text); white-space: nowrap; }
.sx-fval > .i { font-size: 18px; color: var(--text-2); flex: none; }
.sx-fval .sa-two b { font-size: 14.5px; font-weight: 500; }
.sa-dot.is-live { background: var(--green); }
.sx-id { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 13.5px; color: var(--text-2); }
.sx-id > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-fact .sx-id { font-size: 14.5px; color: var(--text); }
.sx-copy { flex: none; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.sx-copy:hover { background: var(--indigo-bg-2); color: var(--indigo); }
.sx-copy .i { font-size: 15px; }
.sx-sacts { display: flex; flex-direction: column; gap: 10px; flex: none; width: 160px; }
.sx-sacts .btn-primary, .sx-sacts .btn-outline { height: 38px; justify-content: center; gap: 8px; padding: 0 12px; font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.sx-sacts .btn-outline { color: var(--indigo); border-color: var(--indigo); }
.sx-smore { flex: none; align-self: flex-start; margin-top: 22px; }
.sx-dots { width: 44px; height: 40px; padding: 0; justify-content: center; color: var(--text-2); }
.sx-smore .sa-menu { right: 0; }
.sx-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--border); padding: 0 4px; }
.sx-tab { height: 46px; padding: 0 18px; border: 0; background: none; font: inherit; font-size: 15px; color: var(--text-2); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.sx-tab:hover { color: var(--indigo); }
.sx-tab.is-active { color: var(--indigo); font-weight: 600; border-bottom-color: var(--indigo); }
.sx-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 18px; align-items: start; min-width: 0; }
.sx-main, .sx-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sx-card { padding: 16px 16px 10px; border-radius: 12px; min-width: 0; }
.sx-card[hidden] { display: none; }
.sx-chead { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 10px; min-width: 0; }
.sx-chead > div:first-child { flex: 1 1 auto; min-width: 0; }
.sx-chead h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.sx-chead p { margin: 4px 0 0; font-size: 13.5px; color: var(--text-2); }
.sx-filters { display: flex; gap: 8px; flex: none; }
.sx-search { position: relative; display: inline-flex; align-items: center; }
.sx-search > .i { position: absolute; left: 12px; font-size: 16px; color: var(--muted); pointer-events: none; }
.sx-search input { width: 190px; height: 36px; padding: 0 10px 0 36px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 13.5px; color: var(--text); }
.sx-sel { position: relative; display: inline-flex; align-items: center; }
.sx-sel select { appearance: none; height: 36px; width: 124px; padding: 0 30px 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 13.5px; color: var(--text); cursor: pointer; }
.sx-sel > .i { position: absolute; right: 10px; font-size: 15px; color: var(--muted); pointer-events: none; }
.sx-search input:focus, .sx-sel select:focus { outline: 2px solid rgba(59, 91, 253, .25); border-color: var(--indigo); }
.sx-table, .sx-ptable { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 14px; }
.sx-table thead th, .sx-ptable thead th { height: 42px; padding: 0 8px; font-size: 13.5px; font-weight: 600; color: var(--text); text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border-soft); background: #FAFBFD; }
.sx-table col.c-res { width: 25%; }
.sx-table col.c-type { width: 17%; }
.sx-table col.c-owner { width: 12%; }
.sx-table col.c-sess { width: 11%; }
.sx-table col.c-use { width: 15%; }
.sx-table col.c-status { width: 11%; }
.sx-table col.c-acts { width: 112px; }
.sx-row td { height: 64px; padding: 6px 8px; border-bottom: 1px solid var(--border-soft); color: var(--text-2); vertical-align: middle; }
.sx-row:last-child td { border-bottom: 0; }
.sx-row.is-current td { background: #F4F6FF; }
.sx-row[hidden] { display: none; }
.sx-res { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sx-type { font-size: 14px; color: var(--text-2); }
.sx-owner { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sx-owner.is-none, .sx-none { color: var(--muted); }
.sx-av { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); font-size: 12px; font-weight: 700; }
.sx-use { font-weight: 500 !important; }
.sx-row .sa-chip { height: 28px; font-size: 12.5px; }
.sx-acts { display: flex; align-items: center; gap: 8px; }
.sx-act { height: 34px; padding: 0 14px; font-size: 13.5px; font-weight: 600; color: var(--indigo); border-color: var(--indigo); text-decoration: none; }
.sx-here { display: inline-flex; align-items: center; height: 34px; padding: 0 10px; font-size: 13px; font-weight: 600; color: var(--indigo); }
.sx-link { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; color: var(--muted); }
.sx-link:hover { background: var(--indigo-bg-2); color: var(--indigo); }
.sx-link .i { font-size: 16px; }
.sx-ptable td { padding: 10px 8px; border-bottom: 1px solid var(--border-soft); color: var(--text-2); vertical-align: middle; }
.sx-ptable tr:last-child td { border-bottom: 0; }
.sx-ptable td b { color: var(--text); font-weight: 600; }
.sx-ptable code { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.sx-ptable .sa-chip { height: 26px; }
.sx-ptable .sx-grant { height: 30px; margin-top: 6px; padding: 0 10px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }   /* backlog 4.14 */
.sx-pnote { margin: 12px 4px 6px; font-size: 13.5px; color: var(--muted); }
.sx-acts-list { padding: 4px 4px 10px; }
.sx-details, .sx-next { padding: 18px 16px; border-radius: 12px; min-width: 0; }
.sx-details h2, .sx-next h2 { margin: 0 0 14px; font-size: 17px; font-weight: 700; color: var(--text); }
.sx-details .sa-facts { grid-template-columns: 130px minmax(0, 1fr); gap: 8px 10px; }
.sx-nhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sx-nhead .po-link { font-size: 14px; font-weight: 600; }
.sx-next ul { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sx-next li { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sx-next .sa-two { flex: 1 1 auto; }
.sx-next .sa-two a { font-size: 14.5px; font-weight: 600; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-next .sa-two a:hover { color: var(--indigo); text-decoration: underline; }
.sx-next small { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.sx-row .sa-two small { white-space: normal; }
.sx-mini { width: 16px; height: 16px; flex: none; }
.sx-next .sa-chip { height: 26px; font-size: 12.5px; }
.sx-thumb { position: relative; flex: none; width: 66px; height: 46px; border-radius: 6px; overflow: hidden; background: linear-gradient(135deg, #0B1430, #2554D6); }
.sx-thumb img, .sx-thumb .ph-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sx-dlg { width: min(560px, 100%); }
/* backlog 3.29 · Remove resource: the impact lists inside the MM-41 dialog */
.sx-rm { width: min(600px, 100%); max-height: calc(100vh - 32px); overflow: auto; }
.sx-rm .q { font-size: 15px; line-height: 1.45; }
.sx-rm-body { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.sx-rm-sec h3 { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.sx-rm-note { margin: 0 0 6px; font-size: 13.5px; color: var(--text-2); }
.sx-rm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 160px; overflow: auto; }
.sx-rm-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; }
.sx-rm-list li a { font-weight: 600; color: var(--text); min-width: 0; overflow-wrap: anywhere; } .sx-rm-list li a:hover { color: var(--indigo); }
.sx-rm-list li small { color: var(--muted); white-space: nowrap; font-size: 12.5px; }
.sx-rm-other { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--text-2); }
.sx-rm-other li { display: flex; gap: 8px; align-items: flex-start; } .sx-rm-other .i { flex: none; margin-top: 2px; color: var(--muted); }
@media (max-width: 640px) { .sx-rm-list li { flex-direction: column; gap: 2px; } .sx-rm-list li small { white-space: normal; } }
.sx-cands { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; max-height: 340px; overflow: auto; }
.sx-cand { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.sx-cand input { width: 18px; height: 18px; accent-color: var(--indigo); flex: none; }
.sx-cand .sa-two { flex: 1 1 auto; }
.sx-cand.is-off { background: #FAFBFC; }
.sx-cand .sa-chip { height: 26px; font-size: 12.5px; }
@media (max-width: 1400px) {
  .sx-summary { flex-wrap: wrap; }
  .sx-facts { order: 3; flex-basis: 100%; flex-wrap: wrap; row-gap: 12px; }
  .sx-fact:first-child { padding-left: 0; border-left: 0; }
  .sx-sacts { margin-left: auto; }
}
@media (max-width: 1280px) {
  .sx-grid { grid-template-columns: minmax(0, 1fr); }
  .sx-chead { flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .sx-table col.c-owner, .sx-table col.c-sess { width: 0; }
  .sx-table th:nth-child(3), .sx-table td:nth-child(3), .sx-table th:nth-child(4), .sx-table td:nth-child(4) { display: none; }
  .sx-filters { flex-wrap: wrap; }
  .sx-fact { flex: 1 1 40%; }
}
@media (max-width: 600px) {
  .sx-head { flex-wrap: wrap; align-items: flex-start; }
  .sx-sacts { width: 100%; flex-direction: row; margin-left: 0; }
  .sx-sacts > * { flex: 1 1 0; }
  .sx-smore { position: absolute; top: 18px; right: 16px; margin: 0; }
  .sx-who { flex-basis: 100%; padding-right: 48px; }
  .sx-nrow { flex-wrap: wrap; }
  .sx-nrow h2 { white-space: normal; overflow-wrap: anywhere; }
  .sx-fact { flex-basis: 100%; padding: 0; border: 0; }
  .sx-search, .sx-search input, .sx-sel, .sx-sel select { width: 100%; }
  .sx-filters { width: 100%; }
  .sx-table, .sx-table tbody { display: block; }
  .sx-table thead, .sx-table colgroup { display: none; }
  .sx-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 12px 4px; border-bottom: 1px solid var(--border-soft); }
  .sx-row td { display: block; height: auto; padding: 0; border: 0; background: none !important; }
  .sx-row td:nth-child(1) { grid-column: 1 / 3; }
  .sx-ptable { table-layout: auto; }
  .sx-ptable th:nth-child(3), .sx-ptable td:nth-child(3) { display: none; }
}

/* ---------- Promotion-39 · Brand resource mapping (mp- this screen: the drawer "Brand resource mapping" over Social accounts — the head with ×, the two-column form (Channel, Account / Resource with its picture, Login identity, Brand with the initials tile, Market with Other market…, Language, Default role), the info strip, the Changes box of Preview changes, the "Items affected by this change" card (counts, the rows with the picture, the title, the kind line, the time and the consequence chip), the sticky footer Cancel · Preview changes · Save mapping; the Promotion-11 flag line) — plans/Promotion-39.md, prototype/gen/promotion39.css ---------- */
.mp-backdrop { position: fixed; inset: 0; z-index: 81; background: rgba(15, 23, 42, .38); }
.mp-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 82; display: flex; flex-direction: column; width: 662px; max-width: 100%; background: var(--surface);
  border-radius: 14px 0 0 14px; box-shadow: -16px 0 40px rgba(23, 27, 45, .16); }
.mp-drawer:focus { outline: none; }
.mp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 10px; }
.mp-head h2 { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: var(--text); }
.mp-head p { margin: 0; font-size: 15px; color: var(--text-2); }
.mp-x { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--text-2); cursor: pointer; }
.mp-x .i { font-size: 22px; }
.mp-x:hover { background: #F1F3F8; }
.mp-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 22px 18px; display: flex; flex-direction: column; gap: 14px; overscroll-behavior: contain; }
.mp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.mp-f { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.mp-lbl { font-size: 14px; font-weight: 600; color: var(--text); }
.mp-ctl { position: relative; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); min-width: 0; }
.mp-ctl.is-tall { height: 52px; padding-left: 8px; }
.mp-ctl:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, .15); }
.mp-ctl > .i { flex: none; font-size: 20px; color: var(--text-2); }
.mp-ctl > .mp-chev { position: absolute; right: 12px; font-size: 16px; color: var(--muted); pointer-events: none; }
.mp-ctl select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font: inherit; }
.mp-ctl select:disabled { cursor: default; }
.mp-ctl.is-off { background: #F8F9FC; }
.mp-val { flex: 1 1 auto; min-width: 0; padding-right: 22px; font-size: 14.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-val small { display: block; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.mp-pf { flex: none; width: 26px; height: 26px; }
.mp-pic { position: relative; flex: none; display: grid; place-items: center; width: 50px; height: 38px; border-radius: 6px; overflow: hidden; background: var(--indigo-bg); }
.mp-pic img, .mp-pic .ph-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mp-pic .mp-pf { width: 24px; height: 24px; }
.mp-tile { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: var(--indigo); color: #fff; font-size: 12.5px; font-weight: 700; }
.mp-tile.is-none { background: var(--track); color: var(--muted); }
.mp-hint { margin: 0; font-size: 12.5px; color: var(--muted); }
.mp-other { height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; color: var(--text); }
.mp-other[hidden] { display: none; }
.mp-other:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, .15); }
.mp-f.is-invalid .mp-ctl, .mp-f.is-invalid .mp-other { border-color: var(--red); }
.mp-err { margin: 0; font-size: 12.5px; color: #C23349; }
.mp-info { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border: 1px solid #D7DFFF; border-radius: 10px; background: var(--indigo-bg-2); font-size: 14px; color: var(--text-2); line-height: 1.45; }
.mp-info > .i { flex: none; margin-top: 3px; font-size: 22px; color: var(--indigo); }
.mp-info p { margin: 0; }
.mp-changes { padding: 12px 14px; border: 1px solid #F2D9A8; border-radius: 10px; background: var(--amber-bg); }
.mp-changes h3 { margin: 0 0 6px; font-size: 14.5px; font-weight: 700; color: var(--amber-line); }
.mp-changes ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; font-size: 14px; color: var(--text-2); }
.mp-changes b { color: var(--text); font-weight: 600; }
.mp-changes.is-none { border-color: var(--border); background: #F8F9FC; }
.mp-changes.is-none h3 { color: var(--text-2); }
.mp-aff { padding: 12px 14px 4px; border: 1px solid var(--border); border-radius: 10px; }
.mp-ahead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mp-ahead h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
.mp-counts { display: flex; gap: 14px; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.mp-aff > p { margin: 3px 0 6px; font-size: 13.5px; color: var(--text-2); }
.mp-list { margin: 0; padding: 0; list-style: none; }
.mp-item { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 5px 4px; border-top: 1px solid var(--border-soft); }
.mp-thumb { position: relative; flex: none; display: grid; place-items: center; width: 68px; height: 40px; border-radius: 6px; overflow: hidden; background: var(--indigo-bg); color: var(--indigo); }
.mp-thumb img, .mp-thumb .ph-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mp-thumb .i { font-size: 20px; }
.mp-it { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mp-it a, .mp-it b { font-size: 14.5px; font-weight: 500; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-it a:hover { color: var(--indigo); }
.mp-it small { font-size: 13px; color: var(--muted); }
.mp-when { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 13.5px; color: var(--text-2); white-space: nowrap; }
.mp-when .sa-chip { height: 22px; padding: 0 8px; font-size: 12px; }
.mp-none { margin: 4px 0 10px; font-size: 14px; color: var(--muted); }
.mp-foot { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-top: 1px solid var(--border); background: var(--surface); border-radius: 0 0 0 14px; }
.mp-foot .mp-sp { flex: 1 1 auto; }
.mp-foot .btn-outline, .mp-foot .btn-primary { height: 44px; padding: 0 20px; font-size: 15px; font-weight: 600; justify-content: center; }
.mp-foot .btn-outline { color: var(--indigo); border-color: var(--indigo); }
.mp-foot .mp-ro { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.tg-why[data-kind="mapping"] { color: var(--amber-line); }
@media (max-width: 900px) {
  .mp-drawer { width: 100%; border-radius: 0; }
}
@media (max-width: 600px) {
  .mp-grid { grid-template-columns: 1fr; }
  .mp-head, .mp-body, .mp-foot { padding-left: 16px; padding-right: 16px; }
  .mp-foot { flex-wrap: wrap; }
  .mp-foot .mp-sp { display: none; }
  .mp-foot .btn-outline, .mp-foot .btn-primary { flex: 1 1 40%; padding: 0 10px; }
  .mp-counts { flex-direction: column; gap: 0; align-items: flex-end; }
  .mp-item { flex-wrap: wrap; }
  .mp-when { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; padding-left: 82px; white-space: normal; }
}

/* ---------- Promotion-40 · Create social resource (nr- this screen: the wizard "Create social resource" — the crumbs and the head, the main card with the left stepper (four numbered steps, the active one tinted, done ones checked) and the step body (1 the resource type radio cards with the route chip and "Registrations in progress"; 2 the login identity cards, the provider-side owner line, the per-type context, the local owner / brand / market / language; 3 the details form with counters and the brand-asset picture pickers), the Resource preview card with the provider-specific mocks (Facebook, Instagram, LinkedIn, TikTok, YouTube; shared with Promotion-41) and the registration steps, the footer card Cancel · Back · Continue) — plans/Promotion-40.md, prototype/gen/promotion40.css ---------- */
.nr-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.nr-crumbs { margin: 4px 4px -8px; font-size: 14.5px; }
.nr-crumbs a { color: var(--indigo); }
.nr-head h1 { font-size: 30px; }
.nr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 555px; gap: 12px; align-items: stretch; min-width: 0; }
.nr-main { display: grid; grid-template-columns: 280px minmax(0, 1fr); padding: 0; border-radius: 12px; min-width: 0; overflow: hidden; }
.nr-steps { margin: 0; padding: 12px 8px; list-style: none; border-right: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 6px; }
.nr-step { position: relative; display: flex; gap: 12px; padding: 14px 12px 16px; border-radius: 10px; color: var(--text); text-decoration: none; }
.nr-step:not(:last-child)::after { content: ""; position: absolute; left: 26.5px; top: 48px; bottom: -14px; width: 2px; background: var(--border); }
.nr-step.is-active { background: var(--indigo-bg); }
.nr-num { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #EEF0F5; color: var(--text-2); font-size: 14px; font-weight: 700; }
.nr-num .i { font-size: 16px; }
.nr-step.is-active .nr-num { background: var(--indigo); color: #fff; }
.nr-step.is-done .nr-num { background: var(--green-bg); color: var(--green-text); }
.nr-stxt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nr-stxt b { font-size: 16px; font-weight: 600; }
.nr-step.is-active .nr-stxt b { color: var(--indigo); }
.nr-stxt small { font-size: 14px; color: var(--text-2); }
.nr-step.is-later { color: var(--muted-2); }
.nr-step.is-later .nr-stxt small { color: var(--muted-2); }
a.nr-step:hover .nr-stxt b { color: var(--indigo); }
.nr-inprog { margin: 14px 4px 0; padding: 12px 10px; border-top: 1px solid var(--border-soft); }
.nr-inprog h3 { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .03em; }
.nr-inprog ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.nr-inprog li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.nr-inprog li .sa-two { flex: 1 1 auto; min-width: 0; }
.nr-inprog li b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nr-inprog a.po-link { font-size: 13px; }
.nr-ipf { flex: none; width: 22px; height: 22px; }
.nr-body { padding: 22px 24px 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.nr-body > h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--text); }
.nr-lead { margin: -4px 0 6px; font-size: 15px; color: var(--text-2); line-height: 1.45; }
.nr-types { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; border: 0; }
.nr-type { position: relative; display: flex; align-items: center; gap: 16px; min-height: 74px; padding: 10px 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; }
.nr-type:hover { border-color: #C9D2FF; }
.nr-type.is-selected { border: 2px solid var(--indigo); padding: 9px 17px; background: #F6F8FF; }
.nr-type input { position: absolute; opacity: 0; pointer-events: none; }
.nr-tpf { flex: none; width: 44px; height: 44px; }
.nr-ttxt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nr-ttxt b { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--text); }
.nr-ttxt small { font-size: 13.5px; color: var(--text-2); }
.nr-route { padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; background: var(--track); color: var(--text-2); white-space: nowrap; }
.nr-route.is-api { background: var(--green-bg); color: var(--green-text); }
.nr-radio { flex: none; width: 22px; height: 22px; border: 2px solid #9AA3B8; border-radius: 50%; background: #fff; }
.nr-type.is-selected .nr-radio { border-color: var(--indigo); box-shadow: inset 0 0 0 4px #fff; background: var(--indigo); }
.nr-type:has(input:focus-visible) { outline: 2px solid rgba(59, 91, 253, .35); outline-offset: 2px; }
.nr-note { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 0; padding: 10px 12px; border-radius: 8px; background: #F8F9FC; font-size: 13.5px; color: var(--text-2); }
.nr-note > .i { flex: none; margin-top: 1px; font-size: 17px; color: var(--indigo); }
.nr-note.is-amber { background: var(--amber-bg); color: var(--amber-line); }
.nr-note.is-amber > .i { color: var(--amber-line); }
.nr-logins { display: flex; flex-direction: column; gap: 8px; }
.nr-login { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.nr-login.is-selected { border: 2px solid var(--indigo); padding: 7px 13px; background: #F6F8FF; }
.nr-login.is-off { cursor: not-allowed; opacity: .6; }
.nr-login input { position: absolute; opacity: 0; pointer-events: none; }
.nr-login .sa-two { flex: 1 1 auto; min-width: 0; }
.nr-login .sa-two b { font-size: 15px; }
.nr-av0 { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); font-size: 14px; font-weight: 700; }
.nr-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.nr-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nr-f.is-wide { grid-column: 1 / -1; }
.nr-lbl { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text); }
.nr-lbl small { font-weight: 400; color: var(--muted); }
.nr-in, .nr-sel select, .nr-ta { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 14.5px; color: var(--text); }
.nr-ta { height: 84px; padding: 10px 12px; resize: vertical; line-height: 1.4; }
.nr-sel { position: relative; display: block; }
.nr-sel select { appearance: none; padding-right: 34px; cursor: pointer; }
.nr-sel > .i { position: absolute; right: 12px; top: 13px; font-size: 16px; color: var(--muted); pointer-events: none; }
.nr-in:focus, .nr-sel select:focus, .nr-ta:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, .15); }
.nr-in:disabled, .nr-sel select:disabled, .nr-ta:disabled { background: #F8F9FC; color: var(--text-2); }
.nr-f.is-invalid .nr-in, .nr-f.is-invalid select, .nr-f.is-invalid .nr-ta, .nr-f.is-invalid .nr-assets { border-color: var(--red); }
.nr-err { margin: 0; font-size: 12.5px; color: #C23349; }
.nr-hint { margin: 0; font-size: 12.5px; color: var(--muted); }
.nr-pre { position: relative; display: flex; align-items: center; }
.nr-pre > span { position: absolute; left: 12px; font-size: 14.5px; color: var(--muted); pointer-events: none; }
.nr-pre .nr-in { padding-left: 30px; }
.nr-assets { display: flex; gap: 8px; flex-wrap: wrap; padding: 8px; border: 1px solid var(--border); border-radius: 8px; }
.nr-asset { position: relative; display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid var(--border-soft); border-radius: 8px; background: #fff; cursor: pointer; font-size: 13px; color: var(--text-2); }
.nr-asset input { position: absolute; opacity: 0; pointer-events: none; }
.nr-asset.is-selected { border-color: var(--indigo); background: #F6F8FF; color: var(--text); }
.nr-asset:has(input:focus-visible) { outline: 2px solid rgba(59, 91, 253, .35); }
.nr-athumb { position: relative; flex: none; width: 40px; height: 40px; border-radius: 6px; overflow: hidden; background: #0F1B3D; }
.nr-athumb.is-wide { width: 64px; }
.nr-athumb img, .nr-athumb .ph-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nr-athumb > .i { position: absolute; inset: 0; margin: auto; font-size: 22px; color: #fff; }
.nr-asset .sa-two small { font-size: 12px; }
.nr-side { display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 16px; border-radius: 12px; min-width: 0; }
.nr-side > h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.nr-pv { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; }
.nr-pvhead { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.nr-pvhead svg { flex: none; width: 44px; height: 44px; }
.nr-pvhead .sa-two b { font-size: 16px; font-weight: 600; }
.nr-pvhead .sa-two small { font-size: 14px; }
.nr-mock { position: relative; margin: 0 14px 14px; border-radius: 8px; overflow: hidden; background: #fff; border: 1px solid var(--border-soft); }
.nr-cover { position: relative; height: 170px; background: linear-gradient(135deg, #0B1430, #2554D6); overflow: hidden; }
.nr-cover img, .nr-cover .ph-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nr-cover.is-none { background: linear-gradient(135deg, #E9ECF3, #D7DDEA); }
.nr-av { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; border: 4px solid #fff; overflow: hidden;
  background: #0F1B3D; color: #fff; font-size: 26px; font-weight: 800; }
.nr-av img { width: 100%; height: 100%; object-fit: cover; }
.nr-av .i { font-size: 44px; }
.nr-av.is-square { border-radius: 10px; }
.nr-mbody { padding: 0 16px 0; }
.is-facebook .nr-av, .is-linkedin .nr-av { margin-top: -48px; }
.nr-mname { margin: 6px 0 0; font-size: 21px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.nr-msub { margin: 2px 0 0; font-size: 14px; color: var(--text-2); overflow-wrap: anywhere; }
.nr-mtabs { display: flex; gap: 24px; margin-top: 12px; padding: 0 2px; border-top: 1px solid var(--border-soft); font-size: 14px; color: var(--text-2); }
.nr-mtabs span { padding: 10px 0 12px; }
.nr-mtabs span.is-on { color: var(--indigo); font-weight: 600; box-shadow: inset 0 -3px 0 var(--indigo); }
.nr-mdesc { margin: 8px 0 0; font-size: 13.5px; color: var(--text-2); line-height: 1.4; overflow-wrap: anywhere; }
.nr-mlink { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13.5px; color: var(--indigo); font-weight: 500; }
.nr-mlink .i { font-size: 15px; }
.nr-follow { display: inline-flex; margin: 10px 0 14px; padding: 6px 16px; border-radius: 16px; background: #0A66C2; color: #fff; font-size: 13.5px; font-weight: 600; }
.nr-ig { padding: 12px 16px 0; }
.nr-igbar { display: flex; align-items: center; justify-content: space-between; font-size: 16px; font-weight: 700; color: var(--text); }
.nr-igbar .i { font-size: 20px; color: var(--text); }
.nr-igrow { display: flex; align-items: center; gap: 18px; margin-top: 12px; }
.nr-igrow .nr-av { width: 86px; height: 86px; border-width: 0; }
.nr-stats { flex: 1 1 auto; display: flex; justify-content: space-around; text-align: center; }
.nr-stats b { display: block; font-size: 17px; color: var(--text); }
.nr-stats small { font-size: 13.5px; color: var(--text-2); }
.nr-igname { margin: 10px 0 0; font-size: 15px; font-weight: 700; color: var(--text); }
.nr-igcat { margin: 1px 0 0; font-size: 13.5px; color: var(--muted); }
.nr-igtabs { display: flex; margin-top: 12px; border-top: 1px solid var(--border-soft); }
.nr-igtabs span { flex: 1; display: grid; place-items: center; padding: 10px 0; color: var(--muted); }
.nr-igtabs span.is-on { color: var(--indigo); box-shadow: inset 0 -3px 0 var(--indigo); }
.nr-igtabs .i { font-size: 22px; }
.nr-noposts { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 0 20px; font-size: 15px; font-weight: 600; color: var(--text-2); }
.nr-noposts .i { font-size: 38px; color: var(--text-2); }
.nr-tt { display: flex; flex-direction: column; align-items: center; padding: 18px 16px 4px; text-align: center; }
.nr-tt .nr-av { width: 86px; height: 86px; border-width: 0; }
.nr-tt .nr-stats { width: 100%; margin-top: 10px; }
.nr-yt .nr-cover { height: 110px; }
.nr-ytrow { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.nr-ytrow .nr-av { width: 72px; height: 72px; border-width: 0; }
.nr-ytrow .nr-av .i { font-size: 34px; }
.nr-rsteps { padding: 12px 14px; border-radius: 10px; background: #F8F9FC; }
.nr-rsteps ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; counter-reset: nr; }
.nr-rsteps h3 { margin: 0 0 2px; font-size: 14.5px; font-weight: 700; color: var(--text); }
.nr-rsteps li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--text-2); counter-increment: nr; }
.nr-rsteps li::before { content: counter(nr); flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); font-size: 12px; font-weight: 700; }
.nr-foot { display: flex; align-items: center; gap: 12px; padding: 16px 16px; border-radius: 12px; }
.nr-foot .nr-sp { flex: 1 1 auto; }
.nr-foot .btn-outline, .nr-foot .btn-primary { height: 44px; padding: 0 22px; font-size: 16px; font-weight: 600; justify-content: center; }
.nr-foot .btn-outline { color: var(--indigo); border-color: var(--indigo); }
.nr-foot .btn-primary { gap: 10px; min-width: 130px; }
.nr-foot .btn-primary .i { font-size: 18px; }
.nr-ro { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
@media (max-width: 1280px) {
  .nr-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .nr-main { grid-template-columns: minmax(0, 1fr); }
  .nr-steps { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border-soft); padding: 8px; }
  .nr-step { flex: 1 0 auto; padding: 8px 10px; }
  .nr-step::after { display: none; }
  .nr-stxt small { display: none; }
  .nr-inprog { display: none; }
}
@media (max-width: 600px) {
  .nr-body { padding: 16px 14px; }
  .nr-form { grid-template-columns: minmax(0, 1fr); }
  .nr-stxt { display: none; }
  .nr-step.is-active .nr-stxt { display: flex; }
  .nr-type { padding: 10px 12px; gap: 12px; }
  .nr-route { display: none; }
  .nr-foot { flex-wrap: wrap; }
  .nr-foot .nr-sp { display: none; }
  .nr-foot .btn-outline, .nr-foot .btn-primary { flex: 1 1 40%; padding: 0 10px; }
  .nr-side { padding: 14px; }
  .nr-mock { margin: 0 8px 10px; }
}

/* ---------- Promotion-41 · Review resource registration (rr- this screen: the wizard step "Review resource registration" — the crumbs and the head with Back, the Resource details card (Edit, the rows Platform with the route chip, Type, Account name, Name, Category, Description, Website ↗, Login identity, Profile image with the picture and its size, Cover image or the "not supported" line, Mapping), the Ownership and verification card (two confirmation boxes, the provider's requirement lines, the What happens next? box), the Preview on {Platform} card with the provider mock of Promotion-40, the footer Cancel · Submit registration, the state strip after submitting (Created · Submitted · Verifying · Failed) with the prefilled values and Verify now) — plans/Promotion-41.md, prototype/gen/promotion41.css ---------- */
.rr-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rr-crumbs { margin: 4px 4px -8px; font-size: 14.5px; }
.rr-head h1 { font-size: 30px; }
.rr-head .rr-back { height: 44px; padding: 0 20px; gap: 10px; font-size: 16px; font-weight: 600; color: var(--indigo); border-color: var(--indigo); }
.rr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 555px; gap: 12px; align-items: start; min-width: 0; }
.rr-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rr-card { padding: 18px 20px 14px; border-radius: 12px; min-width: 0; }
.rr-chead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.rr-chead h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.rr-chead p { margin: 3px 0 0; font-size: 14px; color: var(--text-2); }
.rr-chead .btn-outline { height: 42px; padding: 0 18px; gap: 8px; font-size: 15px; font-weight: 600; color: var(--indigo); border-color: var(--indigo); flex: none; }
.rr-rows { margin: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.rr-rows dt, .rr-rows dd { margin: 0; padding: 9px 6px; border-top: 1px solid var(--border-soft); font-size: 14.5px; min-height: 36px; display: flex; align-items: center; }
.rr-rows dt { color: var(--text-2); }
.rr-rows dd { color: var(--text); gap: 10px; flex-wrap: wrap; overflow-wrap: anywhere; min-width: 0; }
.rr-rows dd a { display: inline-flex; align-items: center; gap: 8px; color: var(--indigo); text-decoration: none; }
.rr-rows dd a .i { font-size: 16px; }
.rr-rows .rr-pf { width: 24px; height: 24px; }
.rr-chip { padding: 3px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 600; background: var(--indigo-bg); color: var(--indigo); }
.rr-chip.is-provider { background: var(--track); color: var(--text-2); }
.rr-pic { position: relative; flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 8px; overflow: hidden; background: #0F1B3D; color: #fff; }
.rr-pic.is-wide { width: 100px; }
.rr-pic img, .rr-pic .ph-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rr-pic > .i { font-size: 30px; }
.rr-file { display: flex; flex-direction: column; gap: 2px; }
.rr-file small { font-size: 13.5px; color: var(--text-2); }
.rr-ok { display: flex; align-items: flex-start; gap: 10px; }
.rr-ok > .i { flex: none; font-size: 20px; color: var(--green); }
.rr-ok small { display: block; font-size: 13px; color: var(--muted); }
.rr-ok .rr-tip { font-size: 16px; color: var(--muted); vertical-align: -3px; }
.rr-own { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 18px; align-items: start; }
.rr-checks { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.rr-check { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--text); cursor: pointer; }
.rr-check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--green); cursor: pointer; }
.rr-req { margin: 2px 0 0; padding-left: 34px; font-size: 13.5px; color: var(--text-2); }
.rr-next { padding: 12px 14px; border: 1px solid #D7DFFF; border-radius: 10px; background: var(--indigo-bg-2); }
.rr-next h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 14.5px; font-weight: 700; color: var(--text); }
.rr-next h3 .i { font-size: 19px; color: var(--indigo); }
.rr-next ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; counter-reset: rr; }
.rr-next li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--text-2); counter-increment: rr; }
.rr-next li::before { content: counter(rr); flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 1px solid #D7DFFF; color: var(--indigo); font-size: 12px; font-weight: 700; }
.rr-pvcard .rr-chead a { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; color: var(--indigo); text-decoration: none; white-space: nowrap; }
.rr-pvcard .nr-mock { max-width: 505px; margin: 6px auto 4px; }
.rr-foot { display: flex; justify-content: flex-end; gap: 14px; }
.rr-foot .btn-outline, .rr-foot .btn-primary { height: 44px; padding: 0 24px; font-size: 15.5px; font-weight: 600; justify-content: center; }
.rr-foot .btn-outline { min-width: 104px; color: var(--indigo); border-color: var(--indigo); }
.rr-foot .btn-primary { min-width: 168px; }
.rr-foot .btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.rr-state { display: flex; align-items: flex-start; gap: 14px; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }
.rr-state[hidden] { display: none; }
.rr-state > .i { flex: none; margin-top: 2px; font-size: 24px; }
.rr-state .rr-stxt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rr-state .rr-stxt b { font-size: 16px; color: var(--text); }
.rr-state .rr-stxt span { font-size: 14px; color: var(--text-2); overflow-wrap: anywhere; }
.rr-state .rr-sacts { display: flex; flex-wrap: wrap; gap: 10px; flex: none; }
.rr-state .rr-sacts .btn-outline, .rr-state .rr-sacts .btn-primary { height: 40px; padding: 0 16px; font-size: 14.5px; font-weight: 600; gap: 8px; }
.rr-state.is-created { border-color: #BDE7D3; background: var(--green-bg); }
.rr-state.is-created > .i { color: var(--green); }
.rr-state.is-submitted { border-color: #D7DFFF; background: var(--indigo-bg-2); }
.rr-state.is-submitted > .i { color: var(--indigo); }
.rr-state.is-verifying { border-color: #F2D9A8; background: var(--amber-bg); }
.rr-state.is-verifying > .i { color: var(--amber-line); }
.rr-state.is-failed { border-color: #F6C4CD; background: #FDECEF; }
.rr-state.is-failed > .i { color: #C23349; }
.rr-state.is-cancelled > .i { color: var(--muted); }
.rr-values { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.rr-value { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.rr-value span { flex: none; width: 110px; color: var(--text-2); }
.rr-value code { flex: 1 1 auto; min-width: 0; padding: 4px 8px; border-radius: 6px; background: #fff; border: 1px solid var(--border-soft); font-family: inherit; font-size: 13.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-copy { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.rr-copy:hover { background: var(--indigo-bg-2); color: var(--indigo); }
.rr-verify { display: flex; gap: 8px; margin-top: 8px; }
.rr-verify .btn-primary { flex: none; height: 40px; padding: 0 16px; gap: 8px; font-size: 14.5px; font-weight: 600; }
.rr-verify input { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; }
.rr-ro { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
@media (max-width: 1280px) {
  .rr-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .rr-own { grid-template-columns: minmax(0, 1fr); }
  .rr-state { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .rr-rows { grid-template-columns: 40% minmax(0, 1fr); }
  .rr-card { padding: 14px; }
  .rr-foot .btn-outline, .rr-foot .btn-primary { flex: 1 1 40%; min-width: 0; padding: 0 10px; }
  .rr-value span { width: 84px; }
}

/* ---------- Promotion-42 · Registration result (rz- this screen: the crumbs with Back to coverage, the head with Open resource · Finish setup · Create post (or Verify now / Start again), the resource card (platform mark, title with the state chip, type, about, Provider ID with copy, External link, Connected), the Setup checklist (Account created · Permissions verified · Brand mapping · Ready to publish with the chips, times and Set up / Reconnect), Permissions & access (the capability rows with Granted / Not granted / Not available and the role / limited-access footer), the Brand mapping card and What's next? tiles) — plans/Promotion-42.md, prototype/gen/promotion42.css ---------- */
.rz-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rz-root [hidden] { display: none !important; }
.rz-crumbrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 4px -8px; }
.rz-crumbs { margin: 0; font-size: 14.5px; }
.rz-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--indigo); text-decoration: none; }
.rz-back .i { font-size: 16px; }
.rz-head h1 { font-size: 30px; }
.rz-head .po-actions { flex-wrap: wrap; justify-content: flex-end; }
.rz-head .btn-primary, .rz-head .btn-outline { height: 44px; padding: 0 20px; gap: 10px; font-size: 15.5px; font-weight: 600; justify-content: center; }
.rz-head .btn-outline { color: var(--indigo); border-color: var(--indigo); }
.rz-head .btn-primary .i, .rz-head .btn-outline .i { font-size: 19px; }
.rz-head [aria-disabled="true"], .rz-head button:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.rz-ro { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-2); }
.rz-res { display: grid; grid-template-columns: minmax(0, 1fr) 230px 290px 230px; align-items: center; padding: 16px 20px; border-radius: 12px; min-width: 0; }
.rz-res > * + * { border-left: 1px solid var(--border-soft); padding-left: 22px; }
.rz-rmain { display: flex; align-items: center; gap: 16px; min-width: 0; padding-right: 20px; }
.rz-pf { flex: none; width: 58px; height: 58px; }
.rz-rtext { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rz-rtitle { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rz-rtitle b { font-size: 20px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.rz-rtype { font-size: 14px; color: var(--text-2); }
.rz-rabout { font-size: 14px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rz-fact { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rz-fact > span { font-size: 13.5px; color: var(--text-2); }
.rz-fact b, .rz-fact a { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; color: var(--text); min-width: 0; }
.rz-fact code { font-family: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rz-fact a { color: var(--indigo); text-decoration: underline; text-underline-offset: 3px; }
.rz-fact a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rz-fact a .i { flex: none; font-size: 20px; }
.rz-copy { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 6px; background: transparent; color: var(--text-2); cursor: pointer; }
.rz-copy:hover { background: var(--track); color: var(--indigo); }
.rz-copy .i { font-size: 18px; }
.rz-chip { flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 3px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  background: var(--track); color: var(--text-2); }
.rz-chip.is-green { background: var(--green-bg); color: var(--green-text); }
.rz-chip.is-amber { background: var(--amber-bg); color: var(--amber-text); }
.rz-chip.is-red { background: #FDECEF; color: #C22E47; }
.rz-chip.is-indigo { background: var(--indigo-bg); color: var(--indigo); }
.rz-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; min-width: 0; }
.rz-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.rz-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 14px; align-items: stretch; min-width: 0; }
.rz-card { padding: 16px 16px 10px; border-radius: 12px; min-width: 0; }
.rz-chead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.rz-card h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.rz-card .rz-csub { margin: 3px 0 0; font-size: 14.5px; color: var(--text-2); }
.rz-steps, .rz-perms { list-style: none; margin: 0; padding: 0; }
.rz-step, .rz-perm { display: grid; grid-template-columns: 38px minmax(0, 1fr) 124px 110px; align-items: center; gap: 12px; min-height: 50px; padding: 5px 4px;
  border-top: 1px solid var(--border-soft); }
.rz-perm { grid-template-columns: 38px minmax(0, 1fr) auto; }
.rz-step .rz-chip { justify-self: center; }
.rz-dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--muted-2); color: #fff; }
.rz-dot .i { font-size: 16px; }
.rz-step.rz-s-done .rz-dot { border-color: var(--green); background: var(--green); }
.rz-step.rz-s-wait .rz-dot { border-color: var(--amber); background: #fff; color: var(--amber); }
.rz-step.rz-s-fail .rz-dot { border-color: var(--red); background: var(--red); }
.rz-stxt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rz-stxt b { font-size: 15px; font-weight: 600; color: var(--text); }
.rz-stxt span { font-size: 13.5px; color: var(--text-2); overflow-wrap: anywhere; }
.rz-when { justify-self: end; font-size: 13.5px; color: var(--text-2); white-space: nowrap; }
.rz-step .btn-outline { justify-self: end; height: 34px; padding: 0 14px; font-size: 14px; font-weight: 600; color: var(--indigo); border-color: var(--indigo); }
.rz-pic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: var(--green); }
.rz-pic .i { font-size: 16px; }
.rz-pic.is-amber { background: transparent; color: var(--amber); }
.rz-pic.is-amber .i { font-size: 26px; }
.rz-pic.is-grey { background: var(--track); color: var(--muted); }
.rz-pic.is-red { background: var(--red); }
.rz-pfoot { margin: 8px 4px 4px; font-size: 13.5px; color: var(--text-2); }
.rz-pfoot .is-limited { color: var(--amber-text); }
.rz-brand { display: flex; align-items: center; gap: 16px; padding: 12px 14px; margin-top: 10px; border: 1px solid var(--border); border-radius: 10px; }
.rz-btile { position: relative; flex: none; display: grid; place-items: center; width: 74px; height: 58px; border-radius: 6px; overflow: hidden; background: #0F1B3D;
  color: #fff; font-size: 18px; font-weight: 700; }
.rz-btile img, .rz-btile .ph-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rz-btext { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rz-btext b { font-size: 15.5px; font-weight: 600; color: var(--text); }
.rz-btext span { font-size: 14px; color: var(--text-2); }
.rz-brand .btn-outline { flex: none; height: 40px; padding: 0 16px; font-size: 14.5px; font-weight: 600; color: var(--indigo); border-color: var(--indigo); }
.rz-tiles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 10px; }
.rz-tile { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  color: var(--text); text-decoration: none; text-align: left; font: inherit; cursor: pointer; }
.rz-tile:hover { border-color: var(--indigo); }
.rz-tile[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.rz-tic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); }
.rz-tic .i { font-size: 20px; }
.rz-tile > div { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rz-tile b { font-size: 15px; font-weight: 600; }
.rz-tile span { font-size: 13.5px; color: var(--text-2); }
.rz-tile > .i { flex: none; font-size: 20px; color: var(--indigo); }
.rz-note { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-radius: 10px; border: 1px solid #D7DFFF; background: var(--indigo-bg-2); font-size: 14px; color: var(--text-2); }
.rz-note .i { flex: none; font-size: 19px; color: var(--indigo); margin-top: 1px; }
.rz-note.is-red { border-color: #F6C6CF; background: #FDF3F5; }
.rz-note.is-red .i { color: var(--red); }
@media (max-width: 1280px) {
  .rz-res { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 14px; }
  .rz-res > * + * { border-left: 0; padding-left: 0; }
  .rz-rmain { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .rz-grid, .rz-grid2, .rz-tiles { grid-template-columns: minmax(0, 1fr); }
  .rz-step { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .rz-when, .rz-step .btn-outline { grid-column: 2 / -1; justify-self: start; }
}
@media (max-width: 600px) {
  .rz-res { grid-template-columns: minmax(0, 1fr); }
  .rz-head .po-actions { justify-content: flex-start; }
  .rz-brand { flex-wrap: wrap; }
}

/* ---------- Promotion-43 · Account coverage (cz- this screen: the head with the market and status selects and Add account, the matrix card (the legend, the Market column with initials tiles and notes, one column per channel with the dot, the account and the language or Not mapped / Not connected / Not needed, the row menu), the Coverage summary tiles, the selected cell's panel (the head with the status chip, the explanation, Account status, the available accounts with Map here / Add and map, the actions, Mark as not needed, the info strip)) — plans/Promotion-43.md, prototype/gen/promotion43.css ---------- */
.cz-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cz-root [hidden] { display: none !important; }
.cz-head h1 { font-size: 30px; }
.cz-head .po-actions { flex-wrap: wrap; justify-content: flex-end; }
.cz-sel { position: relative; }
.cz-sel select { appearance: none; height: 40px; min-width: 150px; padding: 0 36px 0 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  font: inherit; font-size: 14.5px; color: var(--text); cursor: pointer; }
.cz-sel .i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--text-2); pointer-events: none; }
.cz-head .btn-primary { height: 40px; padding: 0 18px; gap: 8px; font-size: 15px; font-weight: 600; }
.cz-ro { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-2); }
.cz-grid { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 14px; align-items: start; min-width: 0; }
.cz-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.cz-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cz-card { padding: 16px; border-radius: 12px; min-width: 0; }
.cz-chead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.cz-chead h2 { margin: 0; font-size: 19px; font-weight: 700; color: var(--text); }
.cz-chead p { margin: 3px 0 0; font-size: 14px; color: var(--text-2); }
.cz-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--text-2); padding-top: 4px; }
.cz-legend span { display: inline-flex; align-items: center; gap: 7px; }
.cz-dot { flex: none; display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--muted-2); }
.cz-dot.is-ready { background: var(--green); }
.cz-dot.is-attention { background: var(--amber); }
.cz-dot.is-missing { background: var(--red); }
.cz-dot.is-skip { background: var(--track); border: 1px solid var(--muted-2); }
.cz-scroll { position: relative; overflow-x: auto; min-width: 0; }
.cz-table { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 620px; }
.cz-table th { height: 44px; padding: 0 14px; text-align: left; font-size: 14.5px; font-weight: 500; color: var(--text); background: var(--bg); border-bottom: 1px solid var(--border-soft); }
.cz-table th:first-child { width: 250px; border-radius: 8px 0 0 0; }
.cz-table th.cz-mcol { width: 44px; border-radius: 0 8px 0 0; }
.cz-table th + th:not(.cz-mcol) { border-left: 1px solid var(--border-soft); }
.cz-table th .cz-ch { display: inline-flex; align-items: center; gap: 9px; }
.cz-table th .cz-pf { width: 22px; height: 22px; }
.cz-table td { height: 78px; padding: 6px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.cz-table td + td:not(.cz-mcol) { border-left: 1px solid var(--border-soft); }
.cz-table tr.is-selected td { background: var(--indigo-bg-2); }
.cz-market { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cz-mtile { flex: none; display: grid; place-items: center; width: 64px; height: 48px; border-radius: 6px; font-size: 15px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #1D2B64 0%, #3B5BFD 100%); }
.cz-market > div b { display: block; font-size: 15px; font-weight: 600; color: var(--text); }
.cz-market > div span { display: block; font-size: 13.5px; color: var(--text-2); }
.cz-cell { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px; border: 2px solid transparent; border-radius: 8px; background: transparent;
  text-align: left; font: inherit; color: var(--text); cursor: pointer; min-width: 0; }
.cz-cell:hover { background: var(--surface); border-color: var(--border); }
.cz-cell.is-selected { border-color: var(--indigo); background: var(--surface); }
.cz-cell .cz-dot { margin-top: 5px; }
.cz-cell.is-dim { opacity: .35; }
.cz-ctext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cz-ctext b { font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cz-ctext span { font-size: 13.5px; color: var(--text-2); }
.cz-ctext em { font-style: normal; font-size: 12.5px; color: var(--muted); }
.cz-mcol { width: 44px; padding: 0 !important; text-align: center; }
.cz-menu-btn { display: grid; place-items: center; width: 32px; height: 32px; margin: 0 auto; border: 0; border-radius: 6px; background: transparent; color: var(--text-2); cursor: pointer; }
.cz-menu-btn:hover { background: var(--track); }
.cz-menu-btn .i { font-size: 18px; }
.cz-menuwrap { position: relative; }
.cz-menu { position: absolute; right: 4px; top: 36px; z-index: 30; min-width: 210px; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  box-shadow: 0 12px 30px rgba(16, 24, 40, .14); text-align: left; }
.cz-menu a, .cz-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 6px; background: transparent;
  font: inherit; font-size: 14px; color: var(--text); text-decoration: none; cursor: pointer; }
.cz-menu a:hover, .cz-menu button:hover { background: var(--bg); }
.cz-menu .i { font-size: 16px; color: var(--text-2); }
.cz-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cz-tile { display: flex; align-items: center; gap: 12px; min-height: 96px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; min-width: 0; }
.cz-tic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--track); color: var(--text-2); }
.cz-tic .i { font-size: 22px; }
.cz-tic.is-ready { background: var(--green-bg); color: var(--green); }
.cz-tic.is-attention { background: var(--amber-bg); color: var(--amber); }
.cz-tic.is-missing { background: #FDECEF; color: var(--red); }
.cz-tile > div { display: flex; flex-direction: column; min-width: 0; }
.cz-tile b { font-size: 24px; font-weight: 700; color: var(--text); line-height: 1.1; }
.cz-tile strong { font-size: 15px; font-weight: 500; color: var(--text); }
.cz-tile span { font-size: 13.5px; color: var(--text-2); }
.cz-panel { position: sticky; top: 76px; padding: 20px; border-radius: 12px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cz-phead { display: flex; align-items: flex-start; gap: 14px; }
.cz-phead .cz-ppf { flex: none; width: 46px; height: 46px; }
.cz-phead > div { flex: 1 1 auto; min-width: 0; }
.cz-phead small { display: block; font-size: 14px; color: var(--text-2); }
.cz-ptitle { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cz-ptitle b { font-size: 21px; font-weight: 700; color: var(--text); }
.cz-x { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 6px; background: transparent; color: var(--text-2); cursor: pointer; }
.cz-x:hover { background: var(--track); }
.cz-x .i { font-size: 20px; }
.cz-chip { display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 6px; font-size: 13px; font-weight: 600; background: var(--track); color: var(--text-2); white-space: nowrap; }
.cz-chip.is-ready { background: var(--green-bg); color: var(--green-text); }
.cz-chip.is-attention { background: var(--amber-bg); color: var(--amber-text); }
.cz-chip.is-missing { background: #FDECEF; color: #C22E47; }
.cz-pmsg b { display: block; font-size: 15.5px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.cz-pmsg p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--text-2); }
.cz-status { border-top: 1px solid var(--border-soft); padding-top: 12px; }
.cz-status h3, .cz-avail h3 { margin: 0 0 6px; font-size: 14.5px; font-weight: 700; color: var(--text); }
.cz-status dl { display: grid; grid-template-columns: 150px minmax(0, 1fr); margin: 0; }
.cz-status dt, .cz-status dd { margin: 0; min-height: 30px; display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.cz-status dt { color: var(--text-2); }
.cz-status dt .i { font-size: 17px; }
.cz-status dd { color: var(--text); gap: 8px; overflow-wrap: anywhere; }
.cz-avail ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cz-avail li { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; }
.cz-avail li > div { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cz-avail li b { font-size: 14.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cz-avail li span { font-size: 13px; color: var(--text-2); }
.cz-avail li .btn-outline { flex: none; height: 34px; padding: 0 12px; font-size: 13.5px; font-weight: 600; color: var(--indigo); border-color: var(--indigo); }
.cz-acts { display: flex; flex-direction: column; gap: 10px; }
.cz-acts .btn-primary, .cz-acts .btn-outline { width: 100%; height: 44px; justify-content: center; gap: 10px; font-size: 15.5px; font-weight: 600; }
.cz-acts .btn-outline { color: var(--indigo); border-color: var(--indigo); }
.cz-skip { align-self: flex-start; border: 0; background: transparent; padding: 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--indigo); cursor: pointer; }
.cz-note { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--indigo-bg-2); font-size: 14px; color: var(--text-2); }
.cz-note .i { flex: none; font-size: 20px; color: var(--indigo); margin-top: 1px; }
.cz-empty { padding: 24px; text-align: center; font-size: 14.5px; color: var(--text-2); }
.sa-head .sa-coverage { height: 44px; padding: 0 18px; gap: 8px; font-size: 15px; font-weight: 600; color: var(--indigo); border-color: var(--indigo); }  /* Promotion-36's entry point */
@media (max-width: 1280px) {
  .cz-grid { grid-template-columns: minmax(0, 1fr); }
  .cz-panel { position: static; }
}
@media (max-width: 900px) {
  .cz-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cz-head .po-actions { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .cz-status dl { grid-template-columns: 120px minmax(0, 1fr); }
  .cz-tile { min-height: 80px; padding: 10px; gap: 10px; }
  .cz-tic { width: 40px; height: 40px; }
}
/* ---------- Promotion-44 · Promotion settings (pt- this screen: the crumb, the head with Discard changes · Save changes (n) and the change line, the left rail of six sections with override chips and unsaved dots, the section cards — Workspace inheritance (the grey value table), Business overrides (label · control · hint, the Override chip and Use workspace setting), the second card (Publishing defaults · Coverage · Roles matrix · notes), Summary of changes (old → new lines, the impact sentences, the green box)) — plans/Promotion-44.md, prototype/gen/promotion44.css ---------- */
.pt-root { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pt-root [hidden] { display: none !important; }
.pt-crumb { display: inline-flex; align-items: center; gap: 8px; margin: 4px 4px -6px; font-size: 14.5px; color: var(--text-2); }
.pt-crumb a { color: var(--text-2); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.pt-crumb .i { font-size: 15px; }
.pt-head { align-items: flex-start; }
.pt-head h1 { font-size: 30px; }
.pt-hside { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.pt-hside .po-actions { gap: 14px; }
.pt-hside .btn-outline, .pt-hside .btn-primary { height: 44px; padding: 0 20px; gap: 10px; font-size: 15.5px; font-weight: 600; justify-content: center; }
.pt-hside .btn-outline { min-width: 138px; color: var(--indigo); border-color: var(--indigo); }
.pt-hside .btn-primary { min-width: 186px; }
.pt-hside button:disabled { opacity: .45; cursor: not-allowed; }
.pt-hside .btn-primary .i { font-size: 18px; }
.pt-line { font-size: 13.5px; color: var(--text-2); text-align: right; }
.pt-ro { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-2); }
.pt-scope { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 6px; background: var(--amber-bg); color: var(--amber-text); font-size: 13px; font-weight: 600; }
.pt-grid { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 16px; align-items: start; min-width: 0; }
.pt-rail { padding: 8px; border-radius: 12px; display: flex; flex-direction: column; gap: 4px; }
.pt-ritem { position: relative; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 14px; border-radius: 10px; color: var(--text); text-decoration: none; }
.pt-ritem:hover { background: var(--bg); }
.pt-ritem.is-active { background: var(--indigo-bg); }
.pt-ritem.is-active::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: var(--indigo); }
.pt-ritem > .i { flex: none; font-size: 24px; color: var(--text-2); }
.pt-ritem.is-active > .i, .pt-ritem.is-active b { color: var(--indigo); }
.pt-ritem > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.pt-ritem b { font-size: 15px; font-weight: 600; }
.pt-ritem small { font-size: 13.5px; color: var(--text-2); }
.pt-rchip { flex: none; padding: 1px 8px; border-radius: 10px; background: var(--track); font-size: 12px; font-weight: 600; color: var(--text-2); }
.pt-rdot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.pt-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; min-width: 0; }
.pt-card { padding: 18px 20px; border-radius: 12px; min-width: 0; }
.pt-chead { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.pt-cic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); }
.pt-cic .i { font-size: 22px; }
.pt-chead h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.pt-chead p { margin: 3px 0 0; font-size: 14px; line-height: 1.4; color: var(--text-2); }
.pt-chead a { font-size: 13.5px; font-weight: 600; color: var(--indigo); text-decoration: none; white-space: nowrap; }
.pt-inherit { margin: 0; padding: 6px 14px; border-radius: 8px; background: var(--bg); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pt-inherit dt, .pt-inherit dd { margin: 0; padding: 9px 0; font-size: 14px; border-top: 1px solid var(--border-soft); }
.pt-inherit dt:first-of-type, .pt-inherit dt:first-of-type + dd { border-top: 0; }
.pt-inherit dt { color: var(--text-2); }
.pt-inherit dd { color: var(--text); overflow-wrap: anywhere; }
.pt-field { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 6px 14px; align-items: center; padding: 8px 0; }
.pt-field + .pt-field { border-top: 1px solid var(--border-soft); }
.pt-flabel { font-size: 14.5px; color: var(--text); display: flex; flex-direction: column; gap: 3px; }
.pt-flabel .pt-ov { align-self: flex-start; padding: 1px 7px; border-radius: 5px; background: var(--indigo-bg); color: var(--indigo); font-size: 11.5px; font-weight: 600; }
.pt-ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.pt-ctl select, .pt-ctl input[type=text], .pt-ctl textarea { height: 40px; min-width: 0; flex: 1 1 200px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); font: inherit; font-size: 14.5px; color: var(--text); }
.pt-ctl textarea { height: auto; min-height: 104px; padding: 8px 12px; line-height: 1.45; resize: vertical; }
.pt-ctl select:disabled, .pt-ctl textarea:disabled, .pt-ctl input:disabled { background: var(--bg); color: var(--text-2); }
.pt-ctl .pt-to { font-size: 14px; color: var(--text-2); flex: none; }
.pt-ctl .pt-time { flex: 0 1 110px; }
.pt-hint { grid-column: 2; margin: 0; font-size: 12.5px; color: var(--muted); }
.pt-reset { border: 0; background: transparent; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--indigo); cursor: pointer; }
.pt-err { grid-column: 2; margin: 0; font-size: 13px; color: var(--red); }
.pt-field.is-invalid select, .pt-field.is-invalid textarea { border-color: var(--red); }
.pt-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.pt-checks label { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--text); cursor: pointer; }
.pt-checks input { width: 17px; height: 17px; margin: 0; accent-color: var(--indigo); }
.pt-members { grid-column: 2; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; max-height: 190px; overflow: auto; }
.pt-members label { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.pt-members small { color: var(--text-2); }
.pt-switch { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text-2); }
.pt-switch .pt-knob { position: relative; width: 42px; height: 24px; border-radius: 12px; background: var(--track); }
.pt-switch .pt-knob::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.pt-matrix { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pt-matrix th, .pt-matrix td { padding: 8px 6px; border-bottom: 1px solid var(--border-soft); text-align: center; }
.pt-matrix th { font-weight: 600; color: var(--text-2); font-size: 12.5px; }
.pt-matrix th:first-child, .pt-matrix td:first-child { text-align: left; color: var(--text); }
.pt-matrix .i { font-size: 16px; color: var(--green); }
.pt-matrix .pt-no { color: var(--muted); }
.pt-note { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--indigo-bg-2); font-size: 13.5px; color: var(--text-2); }
.pt-note .i { flex: none; font-size: 18px; color: var(--indigo); margin-top: 1px; }
.pt-note a { color: var(--indigo); font-weight: 600; text-decoration: none; }
.pt-covers { display: flex; flex-direction: column; gap: 0; }
.pt-subhead { margin: 14px 0 4px; }
.pt-crumb .pt-scope { margin-left: 8px; }
.pt-crumb > a:last-child:not(:first-child) { color: var(--indigo); font-weight: 600; margin-left: 6px; }
.pt-sum { list-style: none; margin: 0; padding: 0; }
.pt-sum li { display: grid; grid-template-columns: 26px 170px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 38px; padding: 4px 0; border-top: 1px solid var(--border-soft); font-size: 14px; }
.pt-sum li:first-child { border-top: 0; }
.pt-sum li > .i { font-size: 19px; color: var(--text-2); }
.pt-sum b { font-weight: 500; color: var(--text); }
.pt-sum span { color: var(--text-2); overflow-wrap: anywhere; }
.pt-sum span em { font-style: normal; color: var(--text); }
.pt-impact { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pt-impact li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--amber-text); }
.pt-impact li .i { flex: none; font-size: 16px; margin-top: 2px; }
.pt-impact li.is-info { color: var(--text-2); }
.pt-done { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 12px 16px; border-radius: 12px; background: var(--green-bg); }
.pt-done > .i { flex: none; font-size: 26px; color: var(--green); }
.pt-done b { display: block; font-size: 15px; font-weight: 600; color: var(--green-text); }
.pt-done span { font-size: 13.5px; color: var(--green-text); }
.pt-empty { margin: 4px 0; font-size: 14px; color: var(--text-2); }
@media (max-width: 1280px) {
  .pt-grid { grid-template-columns: minmax(0, 1fr); }
  .pt-rail { flex-direction: row; overflow-x: auto; }
  .pt-ritem { flex: none; min-height: 52px; }
  .pt-ritem small { display: none; }
}
@media (max-width: 1100px) {
  .pt-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .pt-head { flex-direction: column; align-items: stretch; }
  .pt-hside { align-items: stretch; }
  .pt-hside .po-actions { flex-wrap: wrap; }
  .pt-line { text-align: left; }
  .pt-field { grid-template-columns: minmax(0, 1fr); }
  .pt-hint, .pt-err, .pt-members { grid-column: 1; }
  .pt-sum li { grid-template-columns: 22px minmax(0, 1fr); }
  .pt-sum li span { grid-column: 2; }
  .pt-inherit { grid-template-columns: minmax(0, 1fr); }
  .pt-inherit dd { padding-top: 0; border-top: 0; }
  .pt-card { padding: 14px; }
}

/* ---------- Promotion-45 · Pause posting automation (hx- this screen: the 834 px modal over Posting automations — the head with the paid-campaigns line, Pause until (date, time, clear) and Owner with their hints, the optional reason, the info strip, the four impact tiles (selected rules · eligible queued jobs · in progress · external posts), the four impact columns (rule checkboxes, queued jobs with thumbnails, in-progress rows with spinners, externally scheduled rows with the platform box), the footer with Cancel eligible pending jobs, the note, Cancel and Pause posting) — plans/Promotion-45.md, prototype/gen/promotion45.css ---------- */
.hx-backdrop { position: fixed; inset: 0; z-index: 81; background: rgba(23, 27, 45, .34); }
.hx-modal { position: fixed; z-index: 82; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; width: 834px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px); background: var(--surface); border-radius: 14px; box-shadow: 0 24px 64px rgba(23, 27, 45, .22); }
.hx-modal:focus { outline: none; }
.hx-modal [hidden] { display: none !important; }
.hx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 24px 6px; }
.hx-head h2 { margin: 0; font-size: 24px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.hx-head p { margin: 4px 0 0; max-width: 600px; font-size: 14.5px; line-height: 1.45; color: var(--text-2); }
.hx-close { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin: -2px -6px 0 0; border-radius: 8px; color: var(--text-2); font-size: 22px; }
.hx-close:hover { background: var(--track); color: var(--text); }
.hx-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 24px 12px; display: flex; flex-direction: column; gap: 10px; }
.hx-fields { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; }
.hx-field { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 12px; min-width: 0; }
.hx-lbl { display: inline-flex; align-items: center; gap: 8px; height: 44px; font-size: 15px; font-weight: 500; color: var(--text); white-space: nowrap; }
.hx-lbl .i { font-size: 19px; color: var(--text-2); }
.hx-ctl { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hx-row { display: flex; gap: 8px; min-width: 0; }
.hx-date { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; height: 44px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.hx-date input { flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 6px 0 12px; border: 0; background: transparent; font: inherit; font-size: 15px; color: var(--text); }
.hx-date input:focus { outline: none; }
.hx-date:focus-within, .hx-sel:focus-within, .hx-reason input:focus { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.hx-clear { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-right: 6px; border-radius: 6px; color: var(--text-2); font-size: 16px; }
.hx-clear:hover { background: var(--track); color: var(--text); }
.hx-sel { position: relative; display: flex; align-items: center; gap: 8px; flex: none; height: 44px; padding: 0 10px 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.hx-sel select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: inherit; font-size: 15px; color: var(--text); padding-right: 22px; min-width: 0; cursor: pointer; }
.hx-sel select:focus { outline: none; }
.hx-sel > .i:last-child { position: absolute; right: 10px; pointer-events: none; font-size: 16px; color: var(--text-2); }
.hx-sel > .i:first-child { font-size: 18px; color: var(--text-2); }
.hx-owner { flex: 1 1 auto; }
.hx-owner select { flex: 1 1 auto; width: 100%; }
.hx-time select { width: 100px; }
.hx-hint { margin: 0; font-size: 13px; color: var(--text-2); }
.hx-err { margin: 0; font-size: 13px; color: var(--red); }
.hx-invalid .hx-date, .hx-invalid .hx-sel { border-color: var(--red); }
.hx-reason { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
.hx-reason > span { font-size: 14px; color: var(--text-2); white-space: nowrap; }
.hx-reason input { height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14.5px; color: var(--text); min-width: 0; }
.hx-strip { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 10px 16px; border: 1px solid #D9E1FF; border-radius: 10px; background: #F2F5FF; font-size: 14px; line-height: 1.5; color: var(--text); }
.hx-strip .i { flex: none; margin-top: 2px; font-size: 20px; color: var(--indigo); }
.hx-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hx-tile { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 70px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.hx-ticon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); font-size: 22px; }
.hx-tile > div { display: flex; flex-direction: column; min-width: 0; }
.hx-tile b { font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--text); }
.hx-tile span { font-size: 13.5px; line-height: 1.3; color: var(--text); }
.hx-tile small { font-size: 12px; line-height: 1.3; color: var(--text-2); }
.hx-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 10px; }
.hx-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 12px 10px; }
.hx-col + .hx-col { border-left: 1px solid var(--border-soft); }
.hx-col h3 { margin: 0 0 2px; font-size: 14.5px; font-weight: 700; color: var(--text); }
.hx-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hx-rule { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.hx-rule input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--indigo); cursor: pointer; }
.hx-rule span, .hx-job > div { display: flex; flex-direction: column; min-width: 0; }
.hx-rule b, .hx-job b { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.3; overflow-wrap: anywhere; }
.hx-rule small, .hx-job small { font-size: 12.5px; color: var(--text-2); line-height: 1.35; }
.hx-job { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.hx-thumb { position: relative; flex: none; width: 48px; height: 44px; border-radius: 6px; overflow: hidden; background: linear-gradient(135deg, #0B1430, #2554D6); }
.hx-thumb img, .hx-thumb .ph-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hx-link { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-2); font-size: 18px; }
.hx-state { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--indigo); }
.hx-state.is-wait { color: var(--amber-text); }
.hx-spin { flex: none; width: 12px; height: 12px; border: 2px solid var(--indigo-bg-2, #D9E1FF); border-top-color: var(--indigo); border-radius: 50%; animation: spin .9s linear infinite; }
.hx-more { align-self: flex-start; padding: 0; font-size: 13px; font-weight: 600; color: var(--indigo); }
.hx-expired { margin: 0; font-size: 12.5px; color: var(--text-2); }
.hx-expired a { color: var(--indigo); }
.hx-none { margin: 0; font-size: 13px; color: var(--text-2); }
.hx-extbox { display: flex; align-items: flex-start; gap: 10px; margin-top: auto; padding: 10px 12px; border-radius: 8px; background: #F2F5FF; font-size: 12.5px; line-height: 1.45; color: var(--text); }
.hx-extbox > .i { flex: none; margin-top: 1px; font-size: 18px; color: var(--indigo); }
.hx-extbox label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.hx-extbox input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--indigo); }
.hx-extbox b { display: block; font-weight: 600; }
.hx-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 24px 18px; border-top: 1px solid var(--border-soft); }
.hx-pending { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.hx-pending input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--indigo); cursor: pointer; }
.hx-pending span { display: flex; flex-direction: column; }
.hx-pending b { font-size: 14.5px; font-weight: 600; color: var(--text); }
.hx-pending small { font-size: 12.5px; color: var(--text-2); }
.hx-note { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 14px; border-radius: 8px; background: #F2F5FF; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.hx-note .i { flex: none; margin-top: 1px; font-size: 18px; color: var(--indigo); }
.hx-btns { display: flex; gap: 12px; }
.hx-btns .btn-outline, .hx-btns .btn-primary { height: 44px; padding: 0 20px; font-size: 15.5px; font-weight: 600; justify-content: center; box-shadow: none; }
.hx-btns .btn-outline { color: var(--indigo); border-color: var(--indigo); }
.hx-btns .btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.ra-pause { height: 48px; padding: 0 18px; font-size: 16px; color: var(--indigo); border-color: var(--indigo); }
.ra-pausel { display: block; margin-top: 4px; font-size: 12.5px; color: var(--text-2); }
@media (max-width: 900px) {
  .hx-fields { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hx-tiles, .hx-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-col:nth-child(3) { border-left: 0; }
  .hx-col:nth-child(n + 3) { border-top: 1px solid var(--border-soft); }
  .hx-foot { grid-template-columns: minmax(0, 1fr); }
  .hx-btns { justify-content: flex-end; }
}
@media (max-width: 600px) {
  .hx-modal { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: 100%; max-width: 100%; max-height: 94vh; border-radius: 14px 14px 0 0; }
  .hx-head, .hx-body, .hx-foot { padding-left: 16px; padding-right: 16px; }
  .hx-field, .hx-reason { grid-template-columns: minmax(0, 1fr); }
  .hx-lbl { height: auto; }
  .hx-tiles, .hx-cols { grid-template-columns: minmax(0, 1fr); }
  .hx-col + .hx-col { border-left: 0; border-top: 1px solid var(--border-soft); }
  .hx-btns > * { flex: 1 1 0; }
}

/* ---------- Promotion-46 · Reconnect social account (rn- this screen: the crumbs with Back to account, the head, the secure sign-in workspace (the platform mark, the handle with the connection chip, the reason, Reconnect account with the provider line, the S01 facts — login identity, provider, current step, controller —, the three steps and the provider tasks; the session placeholder when no provider app exists), the resume strip, the Affected posts card (the status chips, the table with thumbnails, status, time, action and ⋯), and the right column — What happens after reconnecting?, Account access, Resources of this login) — plans/Promotion-46.md, prototype/gen/promotion46.css ---------- */
.rn-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rn-root [hidden] { display: none !important; }
.rn-crumbrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 4px -8px; }
.rn-crumbs { margin: 0; font-size: 14.5px; }
.rn-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--indigo); text-decoration: none; }
.rn-back .i { font-size: 16px; }
.rn-head h1 { font-size: 32px; }
.rn-head .sub { font-size: 16.5px; }
.rn-ro { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-2); }
.rn-grid { display: grid; grid-template-columns: minmax(0, 1fr) 512px; gap: 16px; align-items: start; }
.rn-main, .rn-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rn-card { padding: 20px 24px; border-radius: 12px; min-width: 0; }
.rn-card h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.rn-error { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; border: 1px solid #F6C7CF; border-radius: 10px; background: #FDECEF; font-size: 14px; color: #B42339; }
.rn-error .i { flex: none; font-size: 18px; }
.rn-sign { display: flex; flex-direction: column; gap: 14px; }
.rn-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; }
.rn-pf { width: 60px; height: 60px; }
.rn-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rn-who > span { font-size: 16px; font-weight: 700; color: var(--text); }
.rn-hrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rn-hrow b { font-size: 19px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.rn-go { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rn-go .btn-primary { min-width: 258px; height: 46px; padding: 0 22px; font-size: 16px; justify-content: center; }
.rn-go .btn-primary .i { font-size: 19px; }
.rn-go .btn-primary:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.rn-secure { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.rn-secure .i { font-size: 15px; }
.rn-reason { margin: 0; font-size: 15px; color: var(--text); }
.rn-demo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.rn-s01 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.rn-fact { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rn-fact > span { font-size: 12.5px; color: var(--text-2); }
.rn-fact b { font-size: 14.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.rn-fact small { font-size: 12.5px; color: var(--text-2); }
.rn-steps { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.rn-step { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 12px 4px 4px; border-radius: 16px; }
.rn-step + .rn-step::before { content: ""; width: 28px; height: 2px; margin-left: -6px; border-radius: 1px; background: var(--border); }
.rn-dot { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border); font-size: 13px; font-weight: 700; color: var(--text-2); }
.rn-dot .i { font-size: 15px; }
.rn-step div { display: flex; flex-direction: column; min-width: 0; }
.rn-step b { font-size: 14px; font-weight: 600; color: var(--text); }
.rn-step small { display: none; }
.rn-step.is-done .rn-dot { border-color: var(--green); background: var(--green); color: #fff; }
.rn-step.is-now { background: var(--indigo-bg); }
.rn-step.is-now b { color: var(--indigo); }
.rn-step.is-now .rn-dot { border-color: var(--indigo); color: var(--indigo); }
.rn-step.is-fail .rn-dot { border-color: var(--red); background: var(--red); color: #fff; }
.rn-tasks { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13px; color: var(--text-2); }
.rn-tasks .i { flex: none; margin-top: 1px; font-size: 16px; color: var(--indigo); }
.rn-viewer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 150px; padding: 18px; border-radius: 10px;
  background: linear-gradient(160deg, #111831, #1C2750); color: #D5DBF2; text-align: center; }
.rn-viewer .i { font-size: 26px; color: #9FB0FF; }
.rn-viewer b { font-size: 15px; color: #fff; }
.rn-viewer span { max-width: 460px; font-size: 13px; line-height: 1.45; }
.rn-resume { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid #BFE9D7; border-radius: 10px; background: #EFFAF5; font-size: 14px; color: var(--text); }
.rn-resume > .i { flex: none; font-size: 20px; color: var(--green); }
.rn-resume span { flex: 1 1 auto; min-width: 0; }
.rn-resume .btn-primary { flex: none; height: 40px; padding: 0 16px; font-size: 14.5px; box-shadow: none; }
.rn-phead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rn-phead p { margin: 2px 0 0; font-size: 14px; color: var(--text-2); }
.rn-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.rn-fchip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 14px; font-weight: 500; color: var(--text); }
.rn-fchip i { font-style: normal; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--track); font-size: 12.5px; font-weight: 600; display: grid; place-items: center; }
.rn-fchip.is-on { border-color: #A9B8FF; background: var(--indigo-bg); color: var(--indigo); }
.rn-fchip.is-on i { background: #fff; }
.rn-table { width: 100%; margin-top: 12px; border-collapse: collapse; table-layout: fixed; }
.rn-table th { height: 38px; padding: 0 8px; border-bottom: 1px solid var(--border-soft); text-align: left; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.rn-table td { height: 66px; padding: 6px 8px; border-bottom: 1px solid var(--border-soft); font-size: 14px; color: var(--text); vertical-align: middle; }
.rn-table tr:last-child td { border-bottom: 0; }
.rn-table col.c-post { width: auto; } .rn-table col.c-st { width: 132px; } .rn-table col.c-when { width: 168px; } .rn-table col.c-act { width: 212px; }
.rn-post { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rn-thumb { position: relative; flex: none; width: 100px; height: 54px; border-radius: 6px; overflow: hidden; background: linear-gradient(135deg, #0B1430, #2554D6); }
.rn-thumb img, .rn-thumb .ph-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rn-ptext { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rn-ptext a { font-size: 14.5px; font-weight: 600; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rn-ptext a:hover { color: var(--indigo); text-decoration: underline; }
.rn-ptext small { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.rn-mini { width: 15px; height: 15px; flex: none; }
.rn-acts { display: flex; align-items: center; gap: 8px; }
.rn-act { height: 38px; min-width: 124px; padding: 0 12px; font-size: 14px; white-space: nowrap; color: var(--indigo); border-color: var(--indigo); justify-content: center; }
.rn-act:disabled, .rn-act[aria-disabled="true"] { color: var(--text-2); border-color: var(--border); background: var(--surface); cursor: default; }
.rn-dots { position: relative; }
.rn-dots > button { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; color: var(--text-2); font-size: 18px; }
.rn-dots > button:hover { background: var(--track); }
.rn-menu { position: absolute; right: 0; top: 40px; z-index: 30; min-width: 200px; }
.rn-empty { margin: 16px 0 4px; font-size: 14px; color: var(--text-2); }
.rn-what { background: #F4F7FF; border-color: #D9E1FF; }
.rn-what h2 { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.rn-what h2 .i { font-size: 20px; color: var(--indigo); }
.rn-what ul { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.rn-what li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--text); }
.rn-tick { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: #C9D3F5; color: #fff; font-size: 12px; }
.rn-tick.is-on { background: var(--green); }
.rn-tick:not(.is-on) .i { display: none; }
.rn-tick:not(.is-on)::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.rn-access dl { display: grid; grid-template-columns: 26px 206px minmax(0, 1fr); align-items: start; row-gap: 14px; margin: 14px 0 0; }
.rn-access dt { display: contents; }
.rn-access .rn-aic { font-size: 19px; color: var(--text-2); padding-top: 1px; }
.rn-access .rn-aic.is-warn { color: var(--amber); }
.rn-access .rn-alb { font-size: 14.5px; color: var(--text); }
.rn-access dd { margin: 0; display: flex; flex-direction: column; gap: 3px; font-size: 14.5px; font-weight: 600; color: var(--text); min-width: 0; }
.rn-access dd small { font-size: 12.5px; font-weight: 400; color: var(--text-2); }
.rn-access dd .po-chip { align-self: flex-start; }
.rn-res ul { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.rn-res li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.rn-res .rn-rtext { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.rn-res .po-chip { flex: none; }
.rn-res li b { font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rn-res li small { font-size: 12.5px; color: var(--text-2); }
.rn-res p { margin: 12px 0 0; font-size: 13px; color: var(--text-2); }
.rn-res .rn-pf { width: 28px; height: 28px; }
@media (max-width: 1280px) { .rn-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .rn-top { grid-template-columns: auto minmax(0, 1fr); }
  .rn-go { grid-column: 1 / -1; align-items: stretch; }
  .rn-s01 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rn-steps { flex-direction: column; align-items: flex-start; }
  .rn-step + .rn-step::before { display: none; }
}
@media (max-width: 700px) {
  .rn-card { padding: 16px; }
  .rn-table, .rn-table tbody, .rn-table tr, .rn-table td { display: block; width: 100%; }
  .rn-table colgroup, .rn-table thead { display: none; }
  .rn-table tr { padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
  .rn-table td { height: auto; padding: 4px 0; border: 0; }
  .rn-access dl { grid-template-columns: 26px minmax(0, 1fr); }
  .rn-access dd { grid-column: 2; }
  .rn-go .btn-primary { min-width: 0; }
  .rn-resume { flex-wrap: wrap; }
}

/* ---------- Promotion-47 · Resource access problem (ax- this screen: the crumbs, the head with Back to accounts, the problem card (the warning circle, the explanation, the resource row with its chip, the four fact rows — required role, current access, account owner, affected distributions), the Affected scheduled posts card with On hold rows, and the action panel What would you like to do? — three radio cards (request legitimate access, switch to an authorized identity with its login list, recheck), the primary by choice, Copy access note and the note) — plans/Promotion-47.md, prototype/gen/promotion47.css ---------- */
.ax-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ax-root [hidden] { display: none !important; }
.ax-crumbs { margin: 4px 4px -10px; font-size: 14.5px; }
.ax-head { align-items: center; }
.ax-head h1 { font-size: 32px; }
.ax-head .sub { font-size: 16.5px; }
.ax-back { height: 44px; padding: 0 18px; font-size: 15.5px; color: var(--indigo); border-color: var(--indigo); text-decoration: none; }
.ax-grid { display: grid; grid-template-columns: minmax(0, 1fr) 572px; gap: 16px; align-items: start; }
.ax-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ax-card { padding: 20px; border-radius: 12px; min-width: 0; }
.ax-card h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.ax-prob { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 18px; align-items: start; }
.ax-warn { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: var(--amber-bg); color: var(--amber); font-size: 34px; }
.ax-warn.is-ok { background: var(--green-bg); color: var(--green); }
.ax-warn.is-red { background: #FDECEF; color: var(--red); }
.ax-prob h2 { font-size: 18.5px; }
.ax-prob p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.ax-prob p a { color: var(--indigo); font-weight: 600; }
.ax-box { margin-top: 16px; border: 1px solid var(--border); border-radius: 10px; }
.ax-res { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--border-soft); }
.ax-pf { flex: none; width: 50px; height: 50px; }
.ax-rtext { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ax-rtext b { font-size: 17px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.ax-rtext small { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-2); }
.ax-rtext small .i { font-size: 14px; }
.ax-res .po-chip { flex: none; height: 30px; padding: 0 14px; border-radius: 15px; font-size: 13.5px; }
.ax-facts { margin: 0; }
.ax-fact { display: grid; grid-template-columns: 26px 210px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 58px; padding: 8px 16px; border-bottom: 1px solid var(--border-soft); }
.ax-fact:last-child { border-bottom: 0; }
.ax-fact > .i { font-size: 20px; color: var(--text-2); }
.ax-fact dt { font-size: 15px; font-weight: 600; color: var(--text); }
.ax-fact dd { margin: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.ax-fact dd small { font-size: 13px; font-weight: 400; color: var(--text-2); }
.ax-owner { display: flex; align-items: center; gap: 12px; }
.ax-av { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--track); font-size: 14px; font-weight: 700; color: var(--text); }
.ax-owner div { display: flex; flex-direction: column; min-width: 0; }
.ax-phead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ax-phead a { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; color: var(--indigo); text-decoration: none; }
.ax-posts { margin: 12px 0 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: 10px; }
.ax-post { display: grid; grid-template-columns: 104px minmax(0, 1fr) 190px auto 40px; align-items: center; gap: 14px; padding: 8px 14px 8px 12px; }
.ax-post + .ax-post { border-top: 1px solid var(--border-soft); }
.ax-thumb { position: relative; width: 104px; height: 50px; border-radius: 6px; overflow: hidden; background: linear-gradient(135deg, #0B1430, #2554D6); }
.ax-thumb img, .ax-thumb .ph-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ax-ptext { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ax-ptext a { font-size: 15px; font-weight: 600; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-ptext a:hover { color: var(--indigo); text-decoration: underline; }
.ax-ptext small { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-2); }
.ax-mini { width: 15px; height: 15px; flex: none; }
.ax-when { font-size: 14.5px; color: var(--text); }
.ax-dots { position: relative; }
.ax-dots > button { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; color: var(--text-2); font-size: 18px; }
.ax-dots > button:hover { background: var(--track); }
.ax-menu { position: absolute; right: 0; top: 40px; z-index: 30; min-width: 190px; }
.ax-none { margin: 12px 0 0; font-size: 14px; color: var(--text-2); }
.ax-panel { padding: 22px 22px 18px; }
.ax-panel h2 { font-size: 19px; margin-bottom: 14px; }
.ax-opts { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; border: 0; }
.ax-opt { display: grid; grid-template-columns: 22px 48px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 86px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.ax-opt:hover { background: #FAFBFD; }
.ax-opt.is-on { border: 2px solid var(--indigo); padding: 11px 15px; background: #F7F9FF; }
.ax-opt.is-off { opacity: .55; cursor: not-allowed; }
.ax-opt input { width: 20px; height: 20px; margin: 0; accent-color: var(--indigo); }
.ax-oic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); font-size: 22px; }
.ax-otext { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ax-otext b { font-size: 16px; font-weight: 700; color: var(--text); }
.ax-otext span { font-size: 14px; line-height: 1.45; color: var(--text-2); }
.ax-otext .ax-sent { font-size: 13px; font-weight: 600; color: var(--green-text); }
.ax-logins { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 0 84px; }
.ax-login { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text); cursor: pointer; }
.ax-login input { width: 18px; height: 18px; margin: 0; accent-color: var(--indigo); }
.ax-go { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.ax-go .btn-primary, .ax-go .btn-outline { width: 100%; height: 48px; justify-content: center; font-size: 16px; }
.ax-go .btn-outline { color: var(--indigo); border-color: var(--indigo); }
.ax-go .btn-primary:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.ax-note { display: flex; align-items: flex-start; gap: 10px; margin: 16px 6px 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.ax-note .i { flex: none; margin-top: 2px; font-size: 18px; }
.ax-ro { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--text-2); }
@media (max-width: 1100px) { .ax-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .ax-prob { grid-template-columns: minmax(0, 1fr); }
  .ax-fact { grid-template-columns: 26px minmax(0, 1fr); }
  .ax-fact dd { grid-column: 2; }
  .ax-post { grid-template-columns: 80px minmax(0, 1fr) 40px; }
  .ax-thumb { width: 80px; }
  .ax-when, .ax-post > .po-chip { grid-column: 2; }
  .ax-opt { grid-template-columns: 22px minmax(0, 1fr); }
  .ax-oic { display: none; }
  .ax-logins { margin-left: 36px; }
  .ax-head { flex-wrap: wrap; }
}

/* ---------- Promotion-48 · Promotion session entry (ss- this screen: the head with Create session / Session templates, the four KPI tiles, the toolbar (domain, type, status, search, Clear filters), the Sessions card with its card tabs Sessions · Profiles · Queue (S03 inventory, S08 profiles, S09 job queue), the right column — Create from template, Connected resources, Worker capacity (S10, owners / admins) —, the Create session drawer (S02) and the profile drawer (S08)) — plans/Promotion-48.md, prototype/gen/promotion48.css ---------- */
.ss-root { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ss-root [hidden], .ss-drawer [hidden] { display: none !important; }
.ss-head { padding-bottom: 4px; }
.ss-head h1 { font-size: 32px; }
.ss-head .sub { font-size: 16.5px; }
.ss-hbtn.btn-primary, .ss-hbtn.btn-outline { height: 46px; padding: 0 22px; font-size: 15.5px; }
.ss-ro { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-2); }
.ss-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ss-kpi { display: flex; align-items: center; gap: 18px; min-width: 0; height: 78px; padding: 0 20px; border-radius: 12px; }
.ss-kic { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; }
.ss-kic .i { font-size: 25px; }
.ss-kic.is-indigo { background: var(--indigo-bg); color: var(--indigo); }
.ss-kic.is-green { background: var(--green-bg); color: var(--green); }
.ss-kic.is-violet { background: #F1EBFF; color: #8B5CF6; }
.ss-kic.is-amber { background: var(--amber-bg); color: var(--amber); }
.ss-kpi b { display: block; font-size: 25px; font-weight: 700; line-height: 1.1; color: var(--text); }
.ss-kpi span:not(.ss-kic) { display: block; margin-top: 2px; font-size: 15px; color: var(--text-2); }
.ss-grid { display: grid; grid-template-columns: minmax(0, 1fr) 410px; gap: 18px; align-items: start; }
.ss-main, .ss-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ss-tools { display: grid; grid-template-columns: 176px 140px 160px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0; }
.ss-sel { position: relative; min-width: 0; }
.ss-sel select { width: 100%; height: 44px; padding: 0 34px 0 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 14.5px;
  color: var(--text); appearance: none; cursor: pointer; }
.ss-sel .i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--muted); pointer-events: none; }
.ss-sel.is-domain select { padding-left: 42px; border-color: #C9D2FF; color: var(--indigo); font-weight: 600; }
.ss-sel.is-domain .ss-dic { left: 14px; right: auto; color: var(--indigo); font-size: 18px; }
.ss-search { position: relative; min-width: 0; }
.ss-search input { width: 100%; height: 44px; padding: 0 14px 0 42px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 14.5px; color: var(--text); }
.ss-search .i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--muted); }
.ss-clear { border: 0; background: none; padding: 0 4px; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--indigo); cursor: pointer; white-space: nowrap; }
.ss-clear:disabled { color: var(--muted-2); cursor: default; }
.ss-card { padding: 18px 20px; border-radius: 12px; min-width: 0; }
.ss-card h2 { margin: 0; font-size: 18.5px; font-weight: 700; color: var(--text); }
.ss-chead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ss-views { display: inline-flex; gap: 4px; padding: 3px; border-radius: 8px; background: var(--indigo-bg-2); }
.ss-view { height: 30px; padding: 0 12px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-2); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; }
.ss-view.is-on { background: var(--surface); color: var(--indigo); box-shadow: 0 1px 2px rgba(23, 27, 45, .08); }
.ss-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ss-table th { padding: 8px 6px; font-size: 14px; font-weight: 500; color: var(--text-2); text-align: left; white-space: nowrap; }
.ss-table td { padding: 10px 6px; border-top: 1px solid var(--border-soft); font-size: 14.5px; color: var(--text); vertical-align: middle; }
.ss-table col.c-name { width: 31%; } .ss-table col.c-type { width: 14%; } .ss-table col.c-res { width: 12%; } .ss-table col.c-flow { width: 13%; }
.ss-table col.c-next { width: 14%; } .ss-table col.c-st { width: 13%; } .ss-table col.c-act { width: 60px; }
.ss-table.is-profiles col.c-name { width: 30%; } .ss-table.is-queue col.c-name { width: 30%; }
.ss-table col.c-dev { width: 17%; } .ss-table col.c-own, .ss-table col.c-lang { width: 10%; } .ss-table col.c-tz { width: 17%; } .ss-table col.c-pst { width: 16%; }
.ss-table col.c-pri { width: 9%; } .ss-table col.c-due, .ss-table col.c-wkr { width: 13%; } .ss-table col.c-pre { width: 18%; } .ss-table col.c-wait { width: 15%; }
.ss-dotcell .pm-dots, .ss-table .pm-dots { width: 36px; height: 36px; border: 0; background: none; color: var(--text-2); border-radius: 8px; display: inline-grid; place-items: center; cursor: pointer; }
.ss-dotcell .pm-dots:hover { background: var(--indigo-bg-2); color: var(--indigo); }
.ss-dotcell .pm-dots .i { font-size: 20px; }
.ss-dotcell .po-menu { text-align: left; }
.ss-ntext a:focus-visible, .ss-view:focus-visible, .ss-qchip:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.ss-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ss-thumb { position: relative; flex: none; width: 80px; height: 58px; border-radius: 8px; overflow: hidden; background: var(--indigo-bg-2); display: grid; place-items: center; }
.ss-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-thumb .ph-art { position: absolute; inset: 0; }
.ss-thumb .cp-h, .ss-thumb .cp-lock { display: none; }
.ss-thumb .ss-tmark { width: 30px; height: 30px; }
.ss-thumb.is-device { background: linear-gradient(160deg, #1B2B5C, #3B6CFF); color: #fff; }
.ss-thumb.is-device .i { font-size: 28px; }
.ss-ntext { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ss-ntext a, .ss-ntext b { font-size: 15px; font-weight: 600; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-ntext a:hover { color: var(--indigo); text-decoration: underline; }
.ss-ntext small { font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-type { display: inline-flex; align-items: center; gap: 10px; }
.ss-type .i { font-size: 21px; color: var(--text-2); }
.ss-res { display: flex; flex-direction: column; gap: 4px; }
.ss-marks { display: flex; gap: 6px; }
.ss-pf { width: 20px; height: 20px; flex: none; }
.ss-res small, .ss-flow small, .ss-next small, .ss-st small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-flow, .ss-next, .ss-st { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ss-flow > span { display: inline-flex; align-items: center; gap: 8px; }
.ss-flow .i { font-size: 18px; color: var(--indigo); }
.ss-next > span { white-space: nowrap; }
.ss-st .po-chip { align-self: flex-start; min-width: 84px; height: 30px; }
.ss-dotcell { position: relative; text-align: right; }
.ss-empty { padding: 18px 6px 8px; }
.ss-qchips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.ss-qchip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: 17px; background: var(--surface); font: inherit;
  font-size: 13.5px; font-weight: 600; color: var(--text-2); cursor: pointer; text-decoration: none; }
.ss-qchip i { font-style: normal; font-weight: 700; color: var(--muted); }
.ss-qchip.is-on { border-color: #C9D2FF; background: var(--indigo-bg); color: var(--indigo); }
.ss-qchip.is-on i { color: var(--indigo); }
.ss-wait { font-size: 13px; color: var(--text-2); }
.ss-wait.is-warn { color: var(--amber-text); }
.ss-pri { font-size: 13px; font-weight: 600; }
.ss-pri.is-high { color: var(--red); }
/* the right column */
.ss-shead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ss-shead a, .ss-shead button { border: 0; background: none; padding: 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--indigo); cursor: pointer; text-decoration: none; }
.ss-tpls { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ss-tpl { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 6px 4px 6px 6px; border-radius: 10px; }
.ss-tpl:hover { background: var(--indigo-bg-2); }
.ss-tic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 9px; background: var(--indigo-bg); color: var(--indigo); }
.ss-tic .i { font-size: 21px; }
.ss-tpl b { display: block; font-size: 14.5px; font-weight: 600; color: var(--text); }
.ss-tpl small { display: block; margin-top: 2px; font-size: 13px; color: var(--text-2); }
.ss-tpl .btn-outline { height: 36px; padding: 0 14px; font-size: 13.5px; font-weight: 600; border-color: #C9D2FF; color: var(--indigo); white-space: nowrap; }
.ss-rlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ss-rrow { display: grid; grid-template-columns: 26px minmax(0, 1fr) 40px 96px; align-items: center; gap: 12px; height: 34px; font-size: 14px; color: var(--text); }
.ss-rrow .ss-pf, .ss-rrow .ss-ric { width: 22px; height: 22px; }
.ss-ric { display: grid; place-items: center; color: var(--indigo); }
.ss-ric .i { font-size: 20px; }
.ss-rrow > b { font-weight: 500; }
.ss-rrow > em { font-style: normal; text-align: right; color: var(--text-2); }
.ss-rst { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--green-text); white-space: nowrap; }
.ss-rst::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.ss-rst.is-warn { color: var(--amber-text); } .ss-rst.is-warn::before { background: var(--amber); }
.ss-rst.is-off { color: var(--muted); } .ss-rst.is-off::before { background: var(--grey); }
.ss-cap p { margin: 0 0 8px; font-size: 13.5px; color: var(--text-2); }
.ss-cap .ss-capst { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 15px; font-weight: 700; color: var(--text); }
.ss-cap .ss-capst .i { color: var(--amber); font-size: 18px; }
.ss-workers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.ss-workers li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--indigo-bg-2); }
/* the drawers (S02 create, S08 profile) */
.ss-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(15, 22, 45, .32); }
.ss-drawer { position: fixed; z-index: 61; top: 0; right: 0; bottom: 0; width: 560px; max-width: 100vw; display: flex; flex-direction: column; background: var(--surface);
  box-shadow: -12px 0 32px rgba(15, 22, 45, .16); }
.ss-drawer.is-wide { width: 600px; }
.ss-dhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 24px 12px; }
.ss-dhead h2 { margin: 0; font-size: 24px; font-weight: 800; color: var(--text); }
.ss-dhead p { margin: 4px 0 0; font-size: 14.5px; color: var(--text-2); }
.ss-x { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--text-2); cursor: pointer; }
.ss-x:hover { background: var(--indigo-bg-2); }
.ss-x .i { font-size: 20px; }
.ss-dbody { flex: 1 1 auto; overflow-y: auto; padding: 4px 24px 20px; display: flex; flex-direction: column; gap: 18px; }
.ss-dfoot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--border); background: var(--surface); }
.ss-dfoot .btn-outline, .ss-dfoot .btn-primary { height: 44px; padding: 0 20px; font-size: 15px; font-weight: 600; }
.ss-dfoot .ss-left { margin-right: auto; }
.ss-fset { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ss-fset > legend, .ss-flabel { padding: 0; font-size: 14.5px; font-weight: 700; color: var(--text); }
.ss-tgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ss-topt { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.ss-topt input { position: absolute; opacity: 0; pointer-events: none; }
.ss-topt:has(input:checked) { border-color: var(--indigo); background: var(--indigo-bg-2); box-shadow: 0 0 0 1px var(--indigo) inset; }
.ss-topt:has(input:focus-visible) { outline: 2px solid var(--indigo); outline-offset: 2px; }
.ss-topt b { display: block; font-size: 14px; font-weight: 600; }
.ss-topt small { display: block; font-size: 12.5px; color: var(--text-2); }
.ss-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ss-field > span { font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.ss-field select, .ss-field input { height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 14.5px; color: var(--text); min-width: 0; }
.ss-field.is-invalid select, .ss-field.is-invalid input { border-color: var(--red); }
.ss-ferr { font-size: 13px; color: #B42339; }
.ss-frow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ss-radio { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.ss-note { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--indigo-bg-2); font-size: 13.5px; color: var(--text-2); }
.ss-note .i { flex: none; font-size: 18px; color: var(--indigo); margin-top: 1px; }
.ss-note.is-warn { background: var(--amber-bg); color: var(--amber-text); }
.ss-note.is-warn .i { color: var(--amber); }
.ss-note.is-ok { background: var(--green-bg); color: var(--green-text); }
.ss-note.is-ok .i { color: var(--green); }
.ss-note.is-bad { background: #FDECEF; color: #B42339; }
.ss-note.is-bad .i { color: var(--red); }
.ss-dtabs { display: flex; gap: 20px; border-bottom: 1px solid var(--border); }
.ss-dtab { height: 38px; padding: 0; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.ss-dtab.is-on { border-bottom-color: var(--indigo); color: var(--indigo); }
.ss-facts { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px 14px; margin: 0; font-size: 14px; }
.ss-facts dt { color: var(--text-2); }
.ss-facts dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.ss-topt > .i { flex: none; margin-top: 1px; font-size: 20px; color: var(--indigo); }
.ss-fset[hidden], .ss-field[hidden], .ss-frow[hidden] { display: none !important; }
.ss-dfoot .btn-outline .i, .ss-dfoot .btn-primary .i { font-size: 17px; }
.ss-card .es.compact { margin: 6px 0 2px; }
.ss-ntext small { max-width: 100%; }
@media (max-width: 1280px) { .ss-grid { grid-template-columns: minmax(0, 1fr); } .ss-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .ss-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ss-search { grid-column: 1 / -1; } }
@media (max-width: 700px) {
  .ss-kpis { grid-template-columns: minmax(0, 1fr); }
  .ss-head { flex-wrap: wrap; } .ss-head .po-actions { flex-wrap: wrap; }
  .ss-table, .ss-table tbody, .ss-table tr, .ss-table td { display: block; width: 100%; }
  .ss-table thead, .ss-table colgroup { display: none; }
  .ss-table tr { position: relative; padding: 10px 0; border-top: 1px solid var(--border-soft); }
  .ss-table td { padding: 4px 0; border: 0; }
  .ss-dotcell { position: absolute; top: 8px; right: 0; width: auto !important; }
  .ss-tpl { grid-template-columns: 42px minmax(0, 1fr); } .ss-tpl .btn-outline { grid-column: 2; justify-self: start; }
  .ss-frow, .ss-tgrid { grid-template-columns: minmax(0, 1fr); }
  .ss-facts { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- Promotion-49 · Promotion live execution (lx- this screen: the crumbs "Sessions / Live", the head with Take over / Release control, Verify result, Reconnect and ⋯, the control strip (S05), the left column — Current job, Execution progress, Live activity — and the right column — the viewer (S04: the simulated browser or Android frame, the unconfigured frame, the interrupted overlay S07) and Next in queue —, the Result verification dialog (S06)) — plans/Promotion-49.md, prototype/gen/promotion49.css ---------- */
.lx-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lx-root [hidden], .lx-modal [hidden] { display: none !important; }
.lx-crumbs { margin: 4px 4px -8px; font-size: 14.5px; }
.lx-head { padding-bottom: 4px; }
.lx-head h1 { font-size: 32px; }
.lx-head .sub { font-size: 16.5px; }
.lx-actions { flex-wrap: wrap; justify-content: flex-end; }
.lx-actions .po-btn { height: 46px; padding: 0 20px; font-size: 15.5px; }
.lx-actions .po-btn:disabled, .lx-actions .po-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.lx-take.btn-outline { border-color: #F6B8C2; color: #D6334A; }
.lx-take.btn-outline:hover { background: #FDECEF; }
.lx-take .lx-sq { width: 16px; height: 16px; border-radius: 3px; background: #EF4444; }
.lx-more { position: relative; }
.lx-more .pm-dots { width: 46px; height: 46px; border: 1px solid #C9D2FF; border-radius: 8px; background: var(--surface); color: var(--text-2); }
.lx-more .po-menu { right: 0; top: calc(100% + 6px); min-width: 230px; }
.lx-ro { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-2); }
.lx-strip { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 16px; border-radius: 10px; background: var(--indigo-bg); color: var(--indigo); font-size: 14.5px; font-weight: 600; }
.lx-strip .i { flex: none; font-size: 20px; }
.lx-strip span { flex: 1 1 auto; }
.lx-strip small { display: block; font-weight: 500; color: var(--text-2); }
.lx-strip .btn-outline, .lx-strip .btn-primary { height: 38px; padding: 0 14px; font-size: 14px; white-space: nowrap; }
.lx-strip.is-warn { background: var(--amber-bg); color: var(--amber-text); }
.lx-strip.is-bad { background: #FDECEF; color: #B42339; }
.lx-grid { display: grid; grid-template-columns: minmax(0, 544px) minmax(0, 1fr); gap: 14px; align-items: start; }
.lx-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lx-card { padding: 18px 20px; border-radius: 12px; min-width: 0; }
.lx-card h2 { margin: 0; font-size: 18.5px; font-weight: 700; color: var(--text); }
.lx-chead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.lx-chead > div { display: flex; align-items: center; gap: 12px; }
.lx-chead a { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; color: var(--indigo); text-decoration: none; }
.lx-chead .po-chip { height: 28px; font-size: 13.5px; }
.lx-job { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; align-items: start; }
.lx-pic { position: relative; width: 200px; height: 164px; border-radius: 8px; overflow: hidden; background: var(--indigo-bg-2); display: grid; place-items: center; }
.lx-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lx-pic .ph-art { position: absolute; inset: 0; }
.lx-pic .cp-h, .lx-pic .cp-lock { display: none; }
.lx-pic.is-device { background: linear-gradient(160deg, #1B2B5C, #3B6CFF); color: #fff; }
.lx-pic.is-device .i { font-size: 54px; }
.lx-jt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lx-jt h3 { margin: 0; font-size: 19px; font-weight: 700; color: var(--text); }
.lx-plat { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text-2); }
.lx-pf { width: 20px; height: 20px; flex: none; }
.lx-cap { margin: 0; font-size: 15px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-meta { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; color: var(--text-2); }
.lx-meta li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lx-meta .i { flex: none; font-size: 18px; color: var(--muted); }
/* the stepper */
.lx-steps { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lx-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0; }
.lx-step + .lx-step::before { content: ""; position: absolute; top: 14px; right: 50%; width: 100%; height: 2px; background: var(--border); z-index: 0; }
.lx-step.is-done + .lx-step::before, .lx-step.is-done + .lx-step.is-now::before { background: var(--indigo); }
.lx-sdot { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--track); color: #fff; font-size: 13.5px; font-weight: 700; }
.lx-sdot .i { font-size: 16px; stroke-width: 3; }
.lx-step.is-done .lx-sdot, .lx-step.is-now .lx-sdot { background: var(--indigo); }
.lx-step.is-now .lx-sdot { box-shadow: 0 0 0 4px var(--indigo-bg); }
.lx-step.is-wait .lx-sdot { background: var(--amber); box-shadow: 0 0 0 4px var(--amber-bg); }
.lx-step.is-fail .lx-sdot { background: var(--red); }
.lx-step.is-todo .lx-sdot { background: #C9CED9; }
.lx-step b { margin-top: 4px; font-size: 15px; font-weight: 600; color: var(--text); }
.lx-step small { font-size: 13.5px; color: var(--text-2); }
.lx-step.is-now small { color: var(--indigo); font-weight: 500; }
.lx-step.is-wait small { color: var(--amber-text); }
.lx-step.is-fail small { color: #B42339; }
/* the live activity */
.lx-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lx-feed li { display: grid; grid-template-columns: 14px 56px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 29px; font-size: 14.5px; color: var(--text); }
.lx-feed li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #C9CED9; }
.lx-feed li.is-ok::before { background: var(--green); }
.lx-feed li.is-now::before { background: var(--indigo); }
.lx-feed li.is-warn::before { background: var(--amber); }
.lx-feed li.is-bad::before { background: var(--red); }
.lx-feed time { color: var(--text-2); font-variant-numeric: tabular-nums; }
.lx-feed span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-feed li.is-todo span { color: var(--text-2); }
.lx-fempty { margin: 0; font-size: 14px; color: var(--text-2); }
/* the viewer */
.lx-vchip.po-chip { height: 28px; font-size: 13.5px; }
.lx-frame { position: relative; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #F8FAFC; }
.lx-bar { display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 14px; background: #202938; color: #E5E7EB; font-size: 13px; }
.lx-bar .i { font-size: 17px; }
.lx-url { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; height: 26px; padding: 0 12px; border-radius: 6px; background: #374151; color: #F9FAFB; overflow: hidden; white-space: nowrap; }
.lx-url .i { font-size: 14px; flex: none; }
.lx-res { flex: none; color: #CBD5E1; }
.lx-page { display: grid; grid-template-columns: 150px minmax(0, 1fr); min-height: 272px; background: #fff; }
.lx-nav { list-style: none; margin: 0; padding: 12px 12px 12px 18px; border-right: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text); }
.lx-nav .lx-logo { margin: 2px 0 10px; font-family: "Brush Script MT", "Segoe Script", cursive; font-size: 20px; font-weight: 600; }
.lx-nav li { display: flex; align-items: center; gap: 10px; height: 25px; }
.lx-nav li .i { font-size: 15px; }
.lx-post { margin: 12px 16px 16px; padding: 14px; border: 1px solid var(--border-soft); border-radius: 8px; box-shadow: 0 1px 3px rgba(15, 22, 45, .06); }
.lx-post > b { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 700; color: var(--text); }
.lx-pgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.lx-ppic { position: relative; aspect-ratio: 1.36; border-radius: 4px; overflow: hidden; background: var(--indigo-bg-2); }
.lx-ppic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lx-ppic .ph-art { position: absolute; inset: 0; }
.lx-ppic .cp-h, .lx-ppic .cp-lock { display: none; }
.lx-pside { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lx-ptext { min-height: 62px; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 6px; font-size: 11.5px; color: var(--text); overflow: hidden; }
.lx-ptools { display: flex; gap: 6px; flex-wrap: wrap; }
.lx-ptools span { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border: 1px solid var(--border-soft); border-radius: 5px; font-size: 10.5px; color: var(--text-2); }
.lx-ptools .i { font-size: 12px; }
.lx-share { align-self: flex-end; margin-top: auto; height: 28px; padding: 0 22px; border: 0; border-radius: 5px; background: #1D5CF5; color: #fff; font: inherit; font-size: 12px; font-weight: 600; }
.lx-sim { display: flex; align-items: center; gap: 8px; margin: 0; padding: 7px 12px; border-top: 1px solid var(--border-soft); background: var(--indigo-bg-2);
  color: var(--text-2); font-size: 12.5px; }
.lx-sim .i { flex: none; font-size: 15px; color: var(--indigo); }
.lx-phone { display: flex; justify-content: center; padding: 18px 0; background: linear-gradient(180deg, #EEF2FF, #F8FAFC); }
.lx-device { width: 176px; height: 300px; padding: 10px 8px; border-radius: 26px; background: #111827; box-shadow: 0 8px 20px rgba(15, 22, 45, .2); }
.lx-screen { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 12px 10px; border-radius: 18px; background: #fff; font-size: 11px; color: var(--text); overflow: hidden; }
.lx-screen b { font-size: 12px; }
.lx-screen .lx-ppic { aspect-ratio: 1; }
.lx-none { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 330px; padding: 24px 32px; background: #1E2433; color: #E5E7EB; text-align: center; }
.lx-none .i { font-size: 34px; color: #94A3B8; }
.lx-none b { font-size: 17px; color: #fff; }
.lx-none span { max-width: 460px; font-size: 14px; line-height: 1.5; }
.lx-none small { max-width: 460px; font-size: 12.5px; color: #94A3B8; }
.lx-overlay { position: absolute; inset: 40px 0 0; z-index: 2; display: grid; place-items: center; padding: 16px; background: rgba(17, 24, 39, .72); }
.lx-ocard { width: min(420px, 100%); padding: 18px 20px; border-radius: 12px; background: var(--surface); box-shadow: 0 12px 32px rgba(15, 22, 45, .3); }
.lx-ocard h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 17px; font-weight: 700; color: #B42339; }
.lx-ocard h3 .i { font-size: 20px; }
.lx-ocard p { margin: 4px 0; font-size: 14px; color: var(--text-2); }
.lx-ocard p b { color: var(--text); font-weight: 600; }
.lx-ocard .btn-primary { margin-top: 10px; height: 40px; padding: 0 16px; font-size: 15px; font-weight: 600; gap: 8px; }
.lx-ocard .btn-primary .i { font-size: 17px; }
/* next in queue */
.lx-queue { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lx-qrow { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto 40px; align-items: center; gap: 14px; padding: 6px; border: 1px solid var(--border-soft); border-radius: 10px; }
.lx-qpic { position: relative; width: 96px; height: 54px; border-radius: 6px; overflow: hidden; background: var(--indigo-bg-2); display: grid; place-items: center; }
.lx-qpic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lx-qpic .ph-art { position: absolute; inset: 0; }
.lx-qpic .cp-h, .lx-qpic .cp-lock { display: none; }
.lx-qpic.is-device { background: linear-gradient(160deg, #1B2B5C, #3B6CFF); color: #fff; }
.lx-qt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lx-qt a, .lx-qt b { font-size: 15px; font-weight: 600; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-qt a:hover { color: var(--indigo); text-decoration: underline; }
.lx-qt small { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-2); }
.lx-qwhen { font-size: 14.5px; color: var(--text-2); white-space: nowrap; }
.lx-qrow .po-chip { height: 28px; min-width: 82px; }
.lx-qdots { position: relative; }
.lx-qdots .pm-dots { width: 36px; height: 36px; border: 0; background: none; color: var(--text-2); border-radius: 8px; display: grid; place-items: center; cursor: pointer; }
.lx-qdots .pm-dots:hover { background: var(--indigo-bg-2); color: var(--indigo); }
.lx-qdots .pm-dots .i, .lx-more .pm-dots .i { font-size: 20px; }
.lx-qdots .po-menu { right: 0; }
.lx-more .pm-dots { display: grid; place-items: center; cursor: pointer; }
.lx-more .pm-dots:hover { background: var(--indigo-bg); }
.lx-bigpf { width: 54px !important; height: 54px !important; }
.lx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--text); }
.lx-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 6px; }
.lx-list .i { font-size: 15px; color: var(--muted); }
.lx-actions .po-btn:disabled { opacity: .5; cursor: not-allowed; }
/* the verification dialog (S06) */
.lx-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(15, 22, 45, .38); }
.lx-modal { position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 680px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow: auto;
  padding: 22px 24px; border-radius: 14px; background: var(--surface); box-shadow: 0 20px 48px rgba(15, 22, 45, .28); }
.lx-mhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.lx-mhead h2 { margin: 0; font-size: 22px; font-weight: 800; }
.lx-mhead p { margin: 4px 0 0; font-size: 14px; color: var(--text-2); }
.lx-x { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--text-2); cursor: pointer; }
.lx-x:hover { background: var(--indigo-bg-2); }
.lx-x .i { font-size: 20px; }
.lx-verdict { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; font-size: 14.5px; }
.lx-verdict .i { flex: none; font-size: 20px; }
.lx-verdict b { display: block; }
.lx-verdict.is-ok { background: var(--green-bg); color: var(--green-text); }
.lx-verdict.is-warn { background: var(--amber-bg); color: var(--amber-text); }
.lx-verdict.is-bad { background: #FDECEF; color: #B42339; }
.lx-verdict.is-info { background: var(--indigo-bg-2); color: var(--text-2); }
.lx-cmp { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
.lx-cmp th { padding: 8px 10px; text-align: left; font-size: 13px; font-weight: 600; color: var(--text-2); background: var(--indigo-bg-2); }
.lx-cmp td { padding: 9px 10px; border-top: 1px solid var(--border-soft); color: var(--text); overflow-wrap: anywhere; }
.lx-cmp td:first-child { color: var(--text-2); width: 150px; }
.lx-cmp td.is-miss { color: #B42339; }
.lx-cmp td.is-match { color: var(--green-text); }
.lx-mfoot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.lx-mfoot .btn-outline, .lx-mfoot .btn-primary { height: 42px; padding: 0 18px; font-size: 15px; }
.lx-pic .lx-pf, .lx-qpic .lx-pf { width: 40px; height: 40px; }
.lx-qpic.is-device .i { font-size: 24px; }
.lx-card .es { padding: 40px 20px; }
@media (max-width: 1280px) { .lx-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .lx-head { flex-wrap: wrap; } .lx-actions { justify-content: flex-start; }
  .lx-job { grid-template-columns: minmax(0, 1fr); } .lx-pic { width: 100%; }
  .lx-page { grid-template-columns: minmax(0, 1fr); } .lx-nav { display: none; }
  .lx-pgrid { grid-template-columns: minmax(0, 1fr); }
  .lx-qrow { grid-template-columns: 72px minmax(0, 1fr) 40px; } .lx-qpic { width: 72px; } .lx-qwhen, .lx-qrow .po-chip { grid-column: 2; }
  .lx-strip { flex-wrap: wrap; }
  .lx-res { display: none; }
}
/* ---------- Promotion-50 · Promote published post handoff (ad- this screen: the 520 px drawer over Promotion-21 — the head, the reuse box from the connector's ad capability, the Post to promote card (the picture, the caption, the platform line, Published, View post) with the Provider · Eligible ad identity · Campaign objective · Destination campaign account rows, the organic-link strip, the existing-draft line, the sticky footer — and the Advertisement tab's "Advertisement drafts from Promotion" card) — plans/Promotion-50.md, prototype/gen/promotion50.css ---------- */
.ad-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(15, 22, 45, .28); }
.ad-drawer { position: fixed; z-index: 61; top: 0; right: 0; bottom: 0; width: 520px; max-width: 100vw; display: flex; flex-direction: column; background: var(--surface);
  box-shadow: -12px 0 32px rgba(15, 22, 45, .16); }
.ad-drawer [hidden] { display: none !important; }
.ad-dhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 22px 10px; }
.ad-dhead h2 { margin: 0; font-size: 25px; font-weight: 800; letter-spacing: -0.4px; color: var(--text); }
.ad-dhead p { margin: 4px 0 0; font-size: 16px; color: var(--text-2); }
.ad-x { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--text); cursor: pointer; }
.ad-x:hover { background: var(--indigo-bg-2); }
.ad-x .i { font-size: 21px; }
.ad-body { flex: 1 1 auto; overflow-y: auto; padding: 6px 22px 18px; display: flex; flex-direction: column; gap: 14px; }
.ad-info { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; margin: 0; padding: 14px 16px; border-radius: 10px; background: var(--indigo-bg-2); }
.ad-info > .i { font-size: 22px; color: var(--indigo); margin-top: 1px; }
.ad-info b { display: block; font-size: 15.5px; font-weight: 700; color: var(--text); }
.ad-info span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.ad-info.is-warn { background: var(--amber-bg); } .ad-info.is-warn > .i { color: var(--amber); }
.ad-info.is-off { background: var(--track); } .ad-info.is-off > .i { color: var(--muted); }
.ad-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px 14px 4px; }
.ad-card > h3 { margin: 0 0 10px; font-size: 15.5px; font-weight: 700; color: var(--text); }
.ad-post { display: grid; grid-template-columns: 124px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft); }
.ad-pic { position: relative; width: 124px; height: 86px; border-radius: 8px; overflow: hidden; background: var(--indigo-bg-2); display: grid; place-items: center; }
.ad-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-pic .ad-pf { width: 30px; height: 30px; }
.ad-pt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ad-pt b { font-size: 14.5px; font-weight: 700; color: var(--text); }
.ad-pt p { margin: 0; font-size: 13px; line-height: 1.35; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ad-pt small { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.ad-pf { width: 16px; height: 16px; flex: none; }
.ad-view.btn-outline { height: 36px; padding: 0 12px; font-size: 14px; font-weight: 600; gap: 6px; border-color: #C9D2FF; color: var(--indigo); text-decoration: none; white-space: nowrap; }
.ad-view .i { font-size: 15px; }
.ad-rows { list-style: none; margin: 0; padding: 0; }
.ad-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--border-soft); }
.ad-row:first-child { border-top: 0; }
.ad-ric { display: grid; place-items: center; width: 26px; height: 26px; color: var(--muted); }
.ad-ric .i { font-size: 21px; }
.ad-row b { display: block; font-size: 14.5px; font-weight: 700; color: var(--text); }
.ad-val { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px; font-size: 14px; color: var(--text); }
.ad-val em { font-style: normal; font-size: 12.5px; color: var(--text-2); }
.ad-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.ad-ok::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.ad-ok.is-bad { color: #B42339; } .ad-ok.is-bad::before { background: var(--red); }
.ad-sel { position: relative; display: inline-block; margin-top: 4px; }
.ad-sel select { height: 36px; padding: 0 32px 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 14px; font-weight: 600;
  color: var(--text); appearance: none; cursor: pointer; }
.ad-sel .i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 15px; color: var(--muted); pointer-events: none; }
.ad-line { display: block; margin-top: 4px; font-size: 12.5px; color: var(--text-2); }
.ad-acct { display: flex; flex-direction: column; gap: 6px; margin-top: 3px; }
.ad-acct label { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ad-acct .po-chip { height: 22px; font-size: 11.5px; }
.ad-acc { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.ad-acc label { min-width: 0; overflow-wrap: anywhere; }
.ad-acc em { font-style: normal; color: var(--text-2); }
.ad-acc-link { font-size: 12.5px; font-weight: 600; color: var(--indigo); text-decoration: none; white-space: nowrap; }
.ad-acc-link:hover { text-decoration: underline; }
.ad-none { font-size: 13.5px; color: #B42339; }
.ad-strip { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; margin: 0; padding: 12px 16px; border-radius: 10px; background: #EEF2F8; }
.ad-strip .i { font-size: 22px; color: var(--indigo); margin-top: 2px; }
.ad-strip b { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.ad-strip span { display: block; font-size: 13px; color: var(--text-2); }
.ad-existing { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--green-bg); font-size: 13.5px; color: var(--green-text); }
.ad-existing a { margin-left: auto; font-weight: 600; color: var(--indigo); text-decoration: none; }
.ad-err { margin: 0; padding: 10px 14px; border-radius: 10px; background: #FDECEF; font-size: 13.5px; color: #B42339; }
.ad-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 14px 22px 18px; border-top: 1px solid var(--border); background: var(--surface); }
.ad-foot .btn-outline { height: 46px; min-width: 118px; justify-content: center; font-size: 15.5px; font-weight: 600; }
.ad-foot .btn-primary { height: 46px; padding: 0 22px; font-size: 15.5px; font-weight: 600; gap: 10px; }
.ad-foot .btn-primary:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.ad-foot .ad-why { margin-right: auto; font-size: 13px; color: var(--text-2); }
@media (max-width: 700px) {
  .ad-post { grid-template-columns: 96px minmax(0, 1fr); } .ad-pic { width: 96px; height: 70px; } .ad-view { grid-column: 1 / -1; justify-self: start; }
  .ad-foot { flex-wrap: wrap; }
}

/* ---------- Advertisement-01 · Advertisement overview (av- module-shared: the domain bar, the planned pages, the thumbnails; avo- this screen; reuses po-card / po-chip / po-link / po-dots / pm-menu) — plans/Advertisement-01.md, prototype/gen/advertisement01.css ---------- */
/* the Advertisement domain bar is the Promotion bar (.pm-domain) with its own id; nothing else changes */
.av-domain .ct-subitem { padding: 0 13px; }
.av-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.av-planned { padding: 28px 16px 36px; }
.av-planned .es { max-width: 560px; margin: 0 auto; }
/* a media thumbnail: the Content asset, else the brand art with the monogram */
.av-thumb { position: relative; flex: none; display: block; width: 72px; height: 46px; border-radius: 7px; overflow: hidden; background: var(--track); }
.av-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-thumb .ph-art { display: block; }
.av-thumb .cp-art { border-radius: 0; box-shadow: none; cursor: default; }
.av-thumb .ph-mark { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 26px; min-width: 0; height: 18px; font-size: 10.5px; }
.av-pf { flex: none; width: 18px; height: 18px; }
.av-demo { padding: 2px 8px; border-radius: 6px; background: var(--track); color: var(--text-2); font-size: 12px; font-weight: 600; }

/* the overview */
.avo-head { display: flex; align-items: flex-end; gap: 20px; padding: 6px 4px 6px; }
.avo-title { flex: 1 1 auto; min-width: 0; }
.avo-head h1 { margin: 0; font-size: 31px; font-weight: 800; letter-spacing: -0.7px; line-height: 1.15; color: var(--text); }
.avo-head .sub { margin: 3px 0 0; font-size: 16px; color: var(--text-2); }
.avo-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.avo-period-wrap { position: relative; }
.avo-period { display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 14px 0 14px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--text); text-align: left; cursor: pointer; }
.avo-period > .i:first-child { font-size: 22px; color: var(--indigo); }
.avo-period > .i:last-child { font-size: 16px; color: var(--muted); }
.avo-period span { display: flex; flex-direction: column; line-height: 1.2; }
.avo-period b { font-size: 14.5px; font-weight: 600; }
.avo-period small { font-size: 12.5px; color: var(--text-2); }
.avo-period:hover, .avo-period[aria-expanded="true"] { border-color: #C9D2FF; }
.avo-period:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.avo-period-wrap .pm-menu { left: 0; right: auto; top: calc(100% + 6px); min-width: 100%; }
.avo-period-wrap .pm-menu a[aria-current="true"] { color: var(--indigo); font-weight: 600; }
.avo-btn.btn-primary, .avo-btn.btn-outline { height: 46px; }
.avo-data { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0 4px 14px; font-size: 13px; color: var(--muted); }
.avo-data > i { font-style: normal; margin: 0 7px; color: var(--muted-2); }
.avo-data .av-demo { margin-left: 10px; }

.avo-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.avo-kpi { display: flex; align-items: center; gap: 18px; min-height: 92px; padding: 12px 20px; color: inherit; text-decoration: none; border-radius: 12px; }
.avo-kpi:hover { border-color: #C9D2FF; }
.avo-kpi:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.avo-kic { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--indigo-bg); color: var(--indigo); }
.avo-kic .i { font-size: 26px; }
.avo-kt { display: flex; flex-direction: column; min-width: 0; }
.avo-kt .l { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 500; color: var(--text-2); }
.avo-kt .l .i { font-size: 15px; color: var(--muted); }
.avo-kv { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.avo-kt b { font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--text); font-variant-numeric: tabular-nums; }
.avo-kt .s { font-size: 13.5px; color: var(--muted); }
.avo-kpi.is-na b { color: var(--muted-2); }
.avo-delta { display: inline-flex; align-items: center; gap: 3px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.avo-delta .i { font-size: 14px; }
.avo-delta.is-good { color: var(--green-text); }
.avo-delta.is-bad { color: #B42339; }
.avo-delta.is-neutral { color: var(--text-2); }

.avo-notices { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.avo-notices:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.avo-notice { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 10px 18px; border-radius: 12px; }
.avo-notice.is-amber { background: #FFF8EC; border-color: #F7DDB0; }
.avo-notice.is-green { background: #F1FBF6; border-color: #C9ECDB; }
.avo-nic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; }
.avo-nic .i { font-size: 30px; }
.avo-notice.is-amber .avo-nic { color: var(--amber); }
.avo-notice.is-green .avo-nic { color: var(--green); }
.avo-notice.is-blue .avo-nic { color: var(--indigo); }
.avo-nt { flex: 1 1 auto; min-width: 0; }
.avo-nt b { display: block; font-size: 15.5px; font-weight: 600; color: var(--text); }
.avo-nt b a { color: inherit; text-decoration: none; } .avo-nt b a:hover { color: var(--indigo); text-decoration: underline; }
.avo-nt p { margin: 3px 0 0; font-size: 13.5px; color: var(--text-2); }
.avo-nt p a { color: inherit; text-decoration: none; } .avo-nt p a:hover { color: var(--indigo); text-decoration: underline; }
.avo-nt p i { font-style: normal; margin: 0 7px; color: var(--muted-2); }
.avo-nbtn.btn-outline { flex: none; height: 38px; padding: 0 16px; font-size: 14px; font-weight: 600; border-color: #C9D2FF; color: var(--indigo); text-decoration: none; }
.avo-nbtn.btn-outline:hover { background: var(--indigo-bg); }

.avo-grid { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.avo-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.avo-perf { padding: 14px 18px 8px; }
.avo-perf .po-card-head { align-items: flex-start; }
.avo-perf .po-card-head > div { flex: 1 1 auto; min-width: 0; }
.avo-cap { margin: 3px 0 0; font-size: 13.5px; color: var(--text-2); }
.avo-tscroll { position: relative; overflow-x: auto; }
.avo-table { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--text); }
.avo-table th { text-align: left; font-size: 13px; font-weight: 500; color: var(--text-2); padding: 9px 8px; background: #F7F8FB; white-space: nowrap; }
.avo-table thead th:first-child { border-radius: 8px 0 0 8px; } .avo-table thead th:last-child { border-radius: 0 8px 8px 0; }
.avo-table td { padding: 8px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; white-space: nowrap; }
.avo-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.avo-table td.is-na { color: var(--muted-2); }
.avo-camp { display: flex; align-items: center; gap: 12px; min-width: 0; }
.avo-cn { display: flex; flex-direction: column; min-width: 0; white-space: normal; }
.avo-cname { font-size: 14.5px; font-weight: 600; color: var(--text); text-decoration: none; }
.avo-cname:hover { color: var(--indigo); }
.avo-cn small { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 176px; }
.avo-plat { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--text-2); }
.avo-dates { font-size: 13.5px; color: var(--text-2); }
.avo-rdots { position: relative; width: 40px; padding-left: 0; padding-right: 0; }
.avo-rdots .pm-menu { right: 8px; top: calc(100% - 6px); }
.avo-table tfoot th, .avo-table tfoot td { padding: 14px 8px; font-weight: 700; font-size: 14.5px; border-bottom: 0; background: none; color: var(--text); }
.avo-table tfoot th { font-weight: 600; }
.avo-table tbody tr:last-child td { border-bottom: 1px solid var(--border); }

/* the right column */
.avo-side .po-card { padding: 12px 16px 12px; }
.avo-side .po-card-head { margin-bottom: 8px; }
.avo-side .po-card-head h2 { font-size: 17px; }
.avo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.avo-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 9px; min-width: 0; }
.avo-item.is-new { border-color: #C9D2FF; background: var(--indigo-bg-2); }
.avo-item .av-thumb { width: 66px; height: 46px; }
.avo-it { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.avo-it b { font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avo-it b a { color: inherit; text-decoration: none; } .avo-it b a:hover { color: var(--indigo); }
.avo-it span { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avo-it span + span { white-space: normal; }
.avo-item .po-chip { height: 24px; padding: 0 8px; font-size: 12px; }
.avo-it span i { font-style: normal; margin: 0 5px; color: var(--muted-2); }
.avo-iend { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.avo-cont.btn-outline { height: 30px; padding: 0 12px; font-size: 13px; font-weight: 600; border-color: #C9D2FF; color: var(--indigo); text-decoration: none; }
.avo-cont.btn-outline:hover { background: var(--indigo-bg); }
.avo-item .pm-menu { right: 6px; top: calc(100% - 4px); }
.avo-empty { margin: 4px 2px; font-size: 13.5px; color: var(--muted); }

.avo-accts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.avo-acct { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 40px; padding: 4px 2px; }
.avo-acct + .avo-acct { border-top: 1px solid var(--border-soft); }
.avo-acct > .av-pf, .avo-acct > .i { width: 20px; height: 20px; font-size: 20px; color: var(--text-2); }
.avo-an { font-size: 14px; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avo-st { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.avo-st .dot { width: 8px; height: 8px; border-radius: 50%; }
.avo-st.is-green { color: var(--green-text); } .avo-st.is-green .dot { background: var(--green); }
.avo-st.is-amber { color: var(--amber-text); } .avo-st.is-amber .dot { background: var(--amber); }
.avo-st.is-red { color: #B42339; } .avo-st.is-red .dot { background: var(--red); }
.avo-st.is-grey { color: var(--text-2); } .avo-st.is-grey .dot { background: var(--grey); }
.avo-abtn.btn-outline { height: 30px; min-width: 88px; justify-content: center; padding: 0 12px; font-size: 13px; font-weight: 600; border-color: #C9D2FF; color: var(--indigo); text-decoration: none; }
.avo-abtn.btn-outline:hover { background: var(--indigo-bg); }
.avo-side .es.compact { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 10px 6px; }
.avo-side .es.compact .il { grid-row: span 3; }
.avo-side .es.compact h3, .avo-side .es.compact p, .avo-side .es.compact .acts { grid-column: 2; }

@media (max-width: 1200px) {
  .avo-grid { grid-template-columns: minmax(0, 1fr); }
  .avo-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .avo-head { flex-direction: column; align-items: stretch; }
  .avo-actions { flex-wrap: wrap; }
  .avo-kpis, .avo-notices { grid-template-columns: minmax(0, 1fr); }
  .avo-notice { flex-wrap: wrap; }
  .avo-acct { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .avo-acct .avo-abtn { grid-column: 2 / -1; justify-self: start; }
}
/* ---------- Advertisement-02 · Launch readiness (avr- this screen; reuses the D01 head, av- thumbnails, po-card / po-chip) — plans/Advertisement-02.md, prototype/gen/advertisement02.css ---------- */
.avr-grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.avr-main, .avr-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.avr-check { padding: 14px 18px 16px; }
.avr-check .po-card-head h2 { font-size: 20px; }
.avr-tools { display: inline-flex; align-items: center; gap: 10px; }
.avr-filter { height: 40px; min-width: 170px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 14px; color: var(--text); }
.avr-recheck.btn-outline { height: 40px; padding: 0 14px; gap: 7px; font-size: 14px; font-weight: 600; border-color: #C9D2FF; color: var(--indigo); }
.avr-recheck.btn-outline .i { font-size: 16px; }
.avr-recheck.btn-outline:hover { background: var(--indigo-bg); }
.avr-tscroll { position: relative; overflow-x: auto; border: 1px solid var(--border-soft); border-radius: 10px; }
.avr-table { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--text); }
.avr-table th { text-align: left; font-size: 13px; font-weight: 500; color: var(--text-2); padding: 10px 10px; background: #F7F8FB; white-space: nowrap; }
.avr-table td { padding: 9px 10px; border-top: 1px solid var(--border-soft); vertical-align: middle; }
.avr-table tr.is-hidden { display: none; }
.avr-item { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.avr-ic { flex: none; width: 32px; display: grid; place-items: center; color: var(--indigo); } .avr-ic .i { font-size: 24px; }
.avr-item b { display: block; font-size: 14.5px; font-weight: 600; }
.avr-item small { display: block; font-size: 12.5px; color: var(--text-2); }
.avr-table .po-chip { height: 30px; padding: 0 10px; font-size: 13px; }
.avr-table .po-chip .i { font-size: 15px; }
.avr-owner { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); white-space: nowrap; }
.avr-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--indigo-bg); color: var(--indigo); font-size: 11.5px; font-weight: 700; }
.avr-ver { display: flex; flex-direction: column; font-size: 13px; color: var(--text-2); min-width: 150px; }
.avr-ver small { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.avr-ver a { color: var(--indigo); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .avr-ver a:hover { text-decoration: underline; }
.avr-ver a .i { font-size: 13px; }
.avr-act.btn-outline { height: 36px; min-width: 112px; justify-content: center; padding: 0 10px; font-size: 13.5px; font-weight: 600; border-color: #C9D2FF; color: var(--indigo); text-decoration: none; white-space: nowrap; }
.avr-act.btn-outline:hover { background: var(--indigo-bg); }
.avr-nomatch { margin: 12px 4px 0; font-size: 14px; color: var(--muted); }

.avr-banner { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 12px; }
.avr-banner.is-amber { background: #FFF8EC; border-color: #F7DDB0; }
.avr-banner.is-green { background: #F1FBF6; border-color: #C9ECDB; }
.avr-bic { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--amber); }
.avr-banner.is-green .avr-bic { background: var(--green); }
.avr-bic .i { font-size: 22px; }
.avr-bt { flex: 1 1 auto; min-width: 0; }
.avr-bt b { display: block; font-size: 17px; font-weight: 700; color: var(--text); }
.avr-bt ul { margin: 4px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--text-2); }
.avr-bt li + li { margin-top: 2px; }
.avr-bt p { margin: 4px 0 0; font-size: 13.5px; color: var(--text-2); }
.avr-bbtn.btn-primary { flex: none; height: 44px; padding: 0 22px; font-size: 15px; font-weight: 600; box-shadow: none; text-decoration: none; }

.avr-side .po-card { padding: 14px 16px; }
.avr-side .po-card-head h2 { font-size: 18px; flex: 0 1 auto; }
.avr-side .po-card-head .avr-count { margin-left: auto; font-size: 14.5px; font-weight: 600; color: var(--indigo); white-space: nowrap; }
.avr-info { display: inline-grid; place-items: center; color: var(--indigo); cursor: help; } .avr-info .i { font-size: 16px; }
.avr-camps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.avr-camp { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px 12px 6px 6px; border: 1px solid var(--border-soft); border-radius: 10px; }
.avr-camp.is-current { border-color: #C9D2FF; background: var(--indigo-bg-2); }
.avr-camp .av-thumb { width: 96px; height: 58px; }
.avr-cn { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.avr-cn b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avr-cn b a { color: inherit; text-decoration: none; } .avr-cn b a:hover { color: var(--indigo); }
.avr-cn span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); min-width: 0; white-space: nowrap; overflow: hidden; }
.avr-cn span i { font-style: normal; color: var(--muted-2); }
.avr-cn span em { font-style: normal; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.avr-cn .avr-why { display: block; font-size: 12.5px; color: #B42339; white-space: normal; }
.avr-cend { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.avr-cend .po-chip .i { font-size: 14px; }
.avr-btable { width: 100%; border-collapse: collapse; font-size: 14px; }
.avr-btable th { text-align: left; padding: 9px 12px; background: #F7F8FB; font-size: 13px; font-weight: 500; color: var(--text-2); }
.avr-btable th:last-child, .avr-btable td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.avr-btable td { padding: 8px 12px; border-bottom: 1px solid var(--border-soft); }
.avr-btable tfoot td { font-weight: 700; font-size: 15px; border-bottom: 0; padding-top: 10px; }
.avr-sub { font-size: 14px; font-weight: 500; color: var(--text-2); }
.avr-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.avr-tile { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; min-width: 0; }
.avr-tile > .avr-tic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--indigo-bg); color: var(--indigo); }
.avr-tile > .avr-tic .i { font-size: 22px; }
.avr-tile div { display: flex; flex-direction: column; min-width: 0; }
.avr-tile small { font-size: 12.5px; color: var(--text-2); }
.avr-tile b { font-size: 14.5px; white-space: nowrap; font-weight: 700; color: var(--text); }
.avr-tile span { font-size: 12.5px; color: var(--muted); }
.avr-side .es.compact { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 10px 6px; }
.avr-side .es.compact .il { grid-row: span 3; }
.avr-side .es.compact h3, .avr-side .es.compact p { grid-column: 2; }

@media (max-width: 1200px) { .avr-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) {
  .avr-check .po-card-head { flex-wrap: wrap; }
  .avr-banner { flex-wrap: wrap; }
  .avr-tiles { grid-template-columns: minmax(0, 1fr); }
  .avr-camp { grid-template-columns: 80px minmax(0, 1fr); }
  .avr-camp .av-thumb { width: 80px; }
  .avr-cend { grid-column: 2; align-items: flex-start; }
}

/* ---------- Advertisement-03 · Ad approvals (ava- this screen; reuses the D01 head avo-head / avo-data, av- thumbnails and marks, po-card / po-chip / pm-menu) — plans/Advertisement-03.md, prototype/gen/advertisement03.css ---------- */
.ava-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ava-grid.no-panel { grid-template-columns: minmax(0, 1fr); }
.ava-list { padding: 4px 16px 10px; min-width: 0; }
.ava-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-soft); overflow-x: auto; scrollbar-width: none; }
.ava-tab { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 46px; padding: 0 12px; font-size: 14px; font-weight: 500; color: var(--text-2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.ava-tab:hover { color: var(--indigo); }
.ava-tab.is-on { color: var(--indigo); font-weight: 600; border-bottom-color: var(--indigo); }
.ava-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0 10px; }
.ava-search { position: relative; flex: 1 1 200px; min-width: 160px; }
.ava-search .i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--muted); pointer-events: none; }
.ava-search input { width: 100%; height: 40px; padding: 0 12px 0 34px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); }
.ava-select { height: 40px; min-width: 128px; max-width: 170px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 13.5px; color: var(--text); }
.ava-tscroll { position: relative; overflow-x: auto; }
.ava-table { width: 100%; border-collapse: collapse; font-size: 13.5px; color: var(--text); }
.ava-table th { text-align: left; font-size: 12.5px; font-weight: 500; color: var(--text-2); padding: 9px 6px; background: #F7F8FB; white-space: nowrap; }
.ava-table th:first-child { border-radius: 8px 0 0 8px; } .ava-table th:last-child { border-radius: 0 8px 8px 0; }
.ava-table td { padding: 9px 6px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.ava-row { cursor: pointer; }
.ava-row:hover td { background: #FAFBFE; }
.ava-row.is-on td { background: #F4F6FF; }
.ava-row.is-on td:first-child { box-shadow: inset 3px 0 0 var(--indigo); }
.ava-req { display: flex; align-items: center; gap: 9px; min-width: 128px; }
.ava-req .av-thumb { width: 52px; height: 40px; }
.ava-req b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.ava-req b a { color: inherit; text-decoration: none; } .ava-req b a:hover { color: var(--indigo); }
.ava-req small { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.ava-kind { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; font-size: 12px; font-weight: 600; background: var(--indigo-bg); color: var(--indigo); white-space: nowrap; }
.ava-kind.is-pause { background: var(--amber-bg); color: var(--amber-text); }
.ava-kind.is-change { background: #F3EEFF; color: #6D4BD8; }
.ava-acct { display: flex; align-items: center; gap: 6px; max-width: 112px; }
.ava-acct .av-pf { width: 20px; height: 20px; }
.ava-acct span { display: flex; flex-direction: column; min-width: 0; font-size: 13px; line-height: 1.25; }
.ava-acct small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ava-acct small, .ava-camp small, .ava-cost small, .ava-when small { font-size: 12px; color: var(--muted); }
.ava-camp { display: flex; flex-direction: column; min-width: 90px; max-width: 124px; font-size: 13px; line-height: 1.3; }
.ava-camp small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ava-cost { display: flex; flex-direction: column; white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1.3; }
.ava-cost b { font-weight: 600; }
.ava-cost.is-none b { font-weight: 500; color: var(--muted); }
.ava-when { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; white-space: nowrap; font-size: 12.5px; color: var(--text-2); line-height: 1.3; }
.ava-go { color: var(--muted-2); } .ava-go .i { font-size: 16px; }
.ava-table .po-chip { height: 26px; font-size: 12px; }
.ava-foot { display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 10px 2px 2px; font-size: 13px; color: var(--text-2); }
.ava-pager { display: inline-flex; gap: 4px; }
.ava-pager a, .ava-pager span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; color: var(--text-2); text-decoration: none; }
.ava-pager a:hover { background: var(--indigo-bg); color: var(--indigo); }
.ava-pager span { color: var(--muted-2); }
.ava-pager .i { font-size: 15px; }
.ava-list .es { padding: 26px 10px; }

.ava-panel { padding: 14px 18px 16px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ava-ph { display: flex; align-items: flex-start; gap: 8px; }
.ava-ph > div:first-child { flex: 1 1 auto; min-width: 0; }
.ava-ph h2 { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; letter-spacing: -0.3px; color: var(--text); }
.ava-ph p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.ava-x { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; color: var(--text-2); text-decoration: none; }
.ava-x:hover { background: var(--track); } .ava-x .i { font-size: 18px; }
.ava-ptabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-soft); overflow-x: auto; scrollbar-width: none; }
.ava-ptab { flex: none; height: 40px; padding: 0 12px; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.ava-ptab:hover { color: var(--indigo); }
.ava-ptab.is-on { color: var(--indigo); font-weight: 600; border-bottom-color: var(--indigo); }
.ava-tp { display: flex; flex-direction: column; gap: 12px; }
.ava-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 10px; }
.ava-facts dl { margin: 0; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.ava-facts dl > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.ava-facts dt { font-size: 13px; color: var(--text-2); }
.ava-facts dd { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--text); min-width: 0; }
.ava-facts dd small { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); }
.ava-facts dd .av-pf { width: 18px; height: 18px; vertical-align: -4px; margin-right: 5px; }
.ava-facts dd .i { font-size: 16px; vertical-align: -3px; margin-right: 5px; color: var(--indigo); }
.ava-facts dd a { color: var(--indigo); text-decoration: none; } .ava-facts dd a:hover { text-decoration: underline; }
.ava-who { display: flex; align-items: center; gap: 8px; }
.ava-av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--indigo-bg); color: var(--indigo); font-size: 11.5px; font-weight: 700; }
.ava-cmp { padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 10px; }
.ava-cmp-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ava-cmp-h h3 { margin: 0; font-size: 15px; font-weight: 700; }
.ava-ver { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--indigo-bg); color: var(--indigo); font-size: 12px; font-weight: 600; }
.ava-cmp-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ava-box { padding: 10px 12px; border-radius: 8px; background: #F7F8FB; min-width: 0; }
.ava-box h4 { margin: 0 0 6px; font-size: 13.5px; font-weight: 600; }
.ava-box.is-after { background: #F4F6FF; }
.ava-kv { display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr); gap: 3px 10px; margin: 0; font-size: 12.5px; }
.ava-kv dt { color: var(--muted); } .ava-kv dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.ava-box p { margin: 0; font-size: 12.5px; color: var(--muted); }
.ava-box p b { display: block; color: var(--text-2); font-weight: 500; }
.ava-more { align-self: flex-start; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--indigo); cursor: pointer; margin-top: 8px; }
.ava-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ava-card { padding: 12px; border: 1px solid var(--border-soft); border-radius: 10px; min-width: 0; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--text-2); }
.ava-card h3 { margin: 0 0 2px; font-size: 14px; font-weight: 700; color: var(--text); }
.ava-card .av-thumb { width: 100%; height: 72px; border-radius: 7px; }
.ava-card b { font-size: 13px; color: var(--text); }
.ava-card a { color: var(--indigo); font-weight: 600; text-decoration: none; } .ava-card a:hover { text-decoration: underline; }
.ava-amount { font-size: 22px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.3px; }
.ava-note { display: flex; gap: 6px; padding: 7px 9px; border-radius: 7px; background: #F4F6FF; font-size: 12px; color: var(--text-2); }
.ava-note .i { flex: none; font-size: 14px; color: var(--indigo); margin-top: 1px; }
.ava-auth-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 6px; }
.ava-auth-h .po-chip { height: 22px; font-size: 11.5px; }
.ava-card dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; }
.ava-card dt { color: var(--muted); } .ava-card dd { margin: 0; color: var(--text); }
.ava-block { border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; }
.ava-block h3 { margin: 0; padding: 9px 12px; background: #F7F8FB; font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.ava-block table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ava-block th { text-align: left; font-weight: 500; font-size: 12px; color: var(--muted); padding: 6px 12px; }
.ava-block td { padding: 6px 12px; border-top: 1px solid var(--border-soft); overflow-wrap: anywhere; }
.ava-block tr.is-changed td:last-child { color: var(--indigo); font-weight: 600; }
.ava-block td.is-none { color: var(--muted); }
.ava-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ava-checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--border-soft); font-size: 13px; }
.ava-checks li .i { font-size: 16px; }
.ava-checks li.is-ok .i { color: var(--green); } .ava-checks li.is-bad .i { color: #B42339; } .ava-checks li.is-info .i { color: var(--indigo); }
.ava-checks li small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.ava-hist { list-style: none; margin: 0; padding: 0; }
.ava-hist li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.ava-hist li small { display: block; color: var(--muted); font-size: 12px; }
.ava-pfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.ava-pfoot .btn-primary, .ava-pfoot .btn-outline { height: 44px; padding: 0 18px; font-size: 14.5px; font-weight: 600; gap: 7px; }
.ava-pfoot .btn-primary:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.ava-pfoot .ava-reject { margin-left: auto; border-color: #F5B8C2; color: #B42339; }
.ava-pfoot .ava-reject:hover { background: #FDECEF; }
.ava-scope { flex: 1 0 100%; margin: 0; font-size: 12.5px; color: var(--muted); }
.ava-state { flex: 1 0 100%; display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #F7F8FB; font-size: 13px; color: var(--text-2); }
.ava-state .i { flex: none; font-size: 18px; color: var(--indigo); }
.ava-state.is-green { background: #F1FBF6; } .ava-state.is-green .i { color: var(--green); }
.ava-state.is-red { background: #FFF4F6; } .ava-state.is-red .i { color: #B42339; }
.ava-state.is-amber { background: #FFF8EC; } .ava-state.is-amber .i { color: var(--amber); }
.ava-state b { display: block; color: var(--text); font-weight: 600; }
.ava-state p { margin: 2px 0 0; }
.ava-panel .es { padding: 30px 10px; }

@media (max-width: 1280px) { .ava-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) {
  .ava-cards, .ava-cmp-g, .ava-facts { grid-template-columns: minmax(0, 1fr); }
  .ava-select { flex: 1 1 130px; max-width: none; }
  .ava-pfoot .ava-reject { margin-left: 0; }
}

/* ---------- Advertisement-04 · Ads alerts (avl- this screen; reuses the D01 head avo-head / avo-data, av- thumbnails and marks, po-card / po-chip / pm-menu) — plans/Advertisement-04.md, prototype/gen/advertisement04.css ---------- */
.avl-window { display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.avl-window > .i { font-size: 24px; color: var(--indigo); }
.avl-window span { display: flex; flex-direction: column; line-height: 1.25; }
.avl-window small { font-size: 12.5px; color: var(--muted); }
.avl-window b { font-size: 14.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.avl-grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 16px; align-items: start; }
.avl-left { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.avl-list { padding: 14px 16px 10px; }
.avl-lh { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; position: relative; }
.avl-lh h2 { margin: 0; flex: 1 1 auto; font-size: 20px; font-weight: 700; color: var(--text); }
.avl-filter > summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border: 1px solid #C9D2FF; border-radius: 8px; color: var(--indigo); font-size: 14px; font-weight: 600; cursor: pointer; background: var(--surface); }
.avl-filter > summary::-webkit-details-marker { display: none; }
.avl-filter > summary .i { font-size: 16px; }
.avl-filter[open] > summary { background: var(--indigo-bg); }
.avl-filter .n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--indigo); color: #fff; font-size: 11px; display: inline-grid; place-items: center; }
.avl-fform { position: absolute; right: 0; top: 46px; z-index: 20; width: 300px; display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 32px rgba(23, 27, 45, 0.14); }
.avl-fform label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-2); }
.avl-fform input, .avl-fform select { height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); }
.avl-fform .avl-factions { display: flex; justify-content: flex-end; gap: 8px; }
.avl-fform .btn-primary, .avl-fform .btn-outline { height: 36px; padding: 0 14px; font-size: 13.5px; }
.avl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.avl-chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px 0 12px; border-radius: 8px; background: #F4F5F9; color: var(--text-2); font-size: 13.5px; font-weight: 500; text-decoration: none; }
.avl-chip span { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 6px; display: inline-grid; place-items: center; background: #E6E8EF; font-size: 12px; font-weight: 600; }
.avl-chip:hover { color: var(--indigo); }
.avl-chip.is-on { background: var(--indigo); color: #fff; }
.avl-chip.is-on span { background: rgba(255, 255, 255, 0.25); color: #fff; }
.avl-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.avlp-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }   /* backlog 3.28 */
.avlp-arcnote { margin: 0 0 12px; }
.avl-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }   /* backlog 3.20 */
.avl-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto 18px; gap: 12px; align-items: center; padding: 10px 10px; border-radius: 10px; border-bottom: 1px solid var(--border-soft); cursor: pointer; color: inherit; text-decoration: none; }
.avl-row:last-child { border-bottom: 0; }
.avl-row:hover { background: #FAFBFE; }
.avl-row.is-on { background: #F1F4FF; border-bottom-color: transparent; }
.avl-row.is-snoozed { opacity: 0.7; }
.avl-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; }
.avl-ic .i { font-size: 20px; }
.avl-ic.is-high { background: #FDECEF; color: #D9364F; } .avl-ic.is-medium { background: var(--amber-bg); color: #D98A06; }
.avl-ic.is-low { background: var(--indigo-bg); color: var(--indigo); } .avl-ic.is-info { background: var(--track); color: var(--text-2); }
.avl-rt { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.avl-rt b { font-size: 15px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avl-rt span { font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avl-rt em { font-style: normal; font-size: 12px; color: var(--indigo); }
.avl-time { font-size: 13px; color: var(--text-2); white-space: nowrap; }
.avl-prio.po-chip { min-width: 60px; }
.avl-row .avl-go { color: var(--muted-2); } .avl-row .avl-go .i { font-size: 16px; }
.avl-list .es { padding: 26px 10px; }

.avl-spend { padding: 14px 16px 12px; }
.avl-spend .po-card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.avl-spend h2 { margin: 0; flex: 1 1 auto; font-size: 18px; font-weight: 700; }
.avl-spend .po-card-head span { font-size: 13px; color: var(--text-2); white-space: nowrap; }
.avl-stable { width: 100%; border-collapse: collapse; font-size: 14px; }
.avl-stable th { text-align: left; padding: 8px 10px; background: #F7F8FB; font-size: 13px; font-weight: 500; color: var(--text-2); }
.avl-stable th.num, .avl-stable td.num { text-align: right; font-variant-numeric: tabular-nums; }
.avl-stable td { padding: 8px 10px; border-bottom: 1px solid var(--border-soft); }
.avl-stable td .av-pf { width: 18px; height: 18px; vertical-align: -4px; margin-right: 8px; }
.avl-stable tfoot td { font-weight: 700; border-bottom: 0; }
.avl-stable td.is-na { color: var(--muted); }

.avl-panel { padding: 16px 18px 16px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.avl-ph { display: flex; align-items: center; gap: 14px; }
.avl-ph .avl-ic { width: 52px; height: 52px; } .avl-ph .avl-ic .i { font-size: 24px; }
.avl-ph > div { flex: 1 1 auto; min-width: 0; }
.avl-ph h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.3px; color: var(--text); }
.avl-ph p { margin: 2px 0 0; font-size: 13.5px; color: var(--text-2); }
.avl-ph p i { font-style: normal; margin: 0 6px; color: var(--muted-2); }
.avl-mw { position: relative; flex: none; }
.avl-ph .po-chip { height: 30px; padding: 0 12px; font-size: 13px; }
.avl-banner { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 16px; border-radius: 12px; border: 1px solid transparent; }
.avl-banner > .i { font-size: 24px; margin-top: 2px; }
.avl-banner.is-high { background: #FFF1F3; border-color: #F8C9D1; } .avl-banner.is-high > .i { color: #D9364F; }
.avl-banner.is-medium { background: #FFF8EC; border-color: #F7DDB0; } .avl-banner.is-medium > .i { color: #D98A06; }
.avl-banner.is-low { background: #F4F6FF; border-color: #D8DFFF; } .avl-banner.is-low > .i { color: var(--indigo); }
.avl-banner.is-info { background: #F7F8FB; border-color: var(--border); } .avl-banner.is-info > .i { color: var(--text-2); }
.avl-banner b { display: block; font-size: 16px; font-weight: 700; color: var(--text); }
.avl-banner p { margin: 3px 0 0; font-size: 13.5px; color: var(--text-2); }
.avl-bmeta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12.5px; color: var(--text-2); text-align: right; white-space: nowrap; }
.avl-fresh { display: inline-flex; align-items: center; gap: 6px; }
.avl-fresh::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.avl-fresh.is-stale::before { background: var(--amber); }
.avl-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.avl-tile { padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 10px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.avl-tile small { font-size: 12.5px; color: var(--text-2); }
.avl-tile b { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -0.3px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avl-tile span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avl-tile.is-text b { font-size: 15.5px; line-height: 1.55; white-space: normal; overflow-wrap: anywhere; }
.avl-tile.is-red b { color: #D9364F; } .avl-tile.is-green b { color: var(--green-text); } .avl-tile.is-amber b { color: var(--amber-line); }
.avl-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; }
.avl-body.is-single { grid-template-columns: minmax(0, 1fr); }
.avl-facts { margin: 0; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 10px; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 9px 12px; align-items: center; font-size: 13.5px; }
.avl-facts dt { color: var(--text-2); }
.avl-facts dd { margin: 0; color: var(--text); min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.avl-facts dd a { color: var(--text); font-weight: 600; text-decoration: none; } .avl-facts dd a:hover { color: var(--indigo); }
.avl-facts dd .i { font-size: 15px; color: var(--indigo); }
.avl-facts select { height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px; font: inherit; font-size: 13.5px; background: var(--surface); color: var(--text); max-width: 100%; }
.avl-av { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--indigo-bg); color: var(--indigo); font-size: 11px; font-weight: 700; }
.avl-creative { padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 10px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px; align-content: start; font-size: 13px; color: var(--text-2); }
.avl-creative h3 { grid-column: 1 / -1; margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--text); }
.avl-creative .av-thumb { width: 100%; height: 110px; border-radius: 8px; grid-row: span 4; }
.avl-creative b { font-size: 14px; color: var(--text); }
.avl-creative .avl-dot { display: inline-flex; align-items: center; gap: 6px; }
.avl-creative .avl-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.avl-creative .avl-dot.is-amber::before { background: var(--amber); } .avl-creative .avl-dot.is-red::before { background: #D9364F; }
.avl-creative .btn-outline { height: 36px; justify-content: center; font-size: 13.5px; font-weight: 600; text-decoration: none; }
.avl-actions { padding: 12px 14px; border-radius: 12px; background: #F4F6FF; }
.avl-actions h3 { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--text); }
.avl-actions h3 .i { color: var(--indigo); font-size: 17px; }
.avl-abtns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.avl-abtns .btn-primary, .avl-abtns .btn-outline { height: 44px; justify-content: center; gap: 8px; font-size: 14.5px; font-weight: 600; text-decoration: none; }
.avl-abtns .btn-outline { background: var(--surface); }
.avl-state { font-size: 12.5px; color: var(--muted); margin: 0; }
.avl-panel .es { padding: 30px 10px; }

/* Advertisement-01 gains the link to this page in its attention card */
.avl-d01 { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--indigo); text-decoration: none; white-space: nowrap; }
.avl-d01:hover { text-decoration: underline; } .avl-d01 .i { font-size: 14px; }

@media (max-width: 1280px) { .avl-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .avl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .avl-body { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) {
  .avl-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .avl-row .avl-time, .avl-row .avl-go { display: none; }
  .avl-abtns { grid-template-columns: minmax(0, 1fr); }
  .avl-banner { grid-template-columns: 24px minmax(0, 1fr); } .avl-bmeta { grid-column: 2; align-items: flex-start; text-align: left; }
  .avl-fform { width: min(300px, calc(100vw - 48px)); }
}

/* ---------- Advertisement-05 · Advertising accounts (avc- this screen; reuses the D01 head avo-head / avo-data, av- marks, po-card / po-chip / pm-menu) — plans/Advertisement-05.md, prototype/gen/advertisement05.css ---------- */
.avc-grid { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.avc-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.avc-list { padding: 14px 16px 10px; min-width: 0; }
.avc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.avc-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }
.avc-chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--text-2); text-decoration: none; background: var(--surface); white-space: nowrap; }
.avc-chip:hover { border-color: #C9D2FF; color: var(--indigo); }
.avc-chip.is-on { border-color: var(--indigo); color: var(--indigo); background: #F4F6FF; font-weight: 600; }
.avc-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--track); color: var(--text-2); font-size: 11.5px; font-weight: 700; }
.avc-chip.is-on .avc-n { background: var(--indigo); color: #fff; }
.avc-n.is-amber { background: var(--amber-bg); color: var(--amber-text); }
.avc-filter { display: flex; gap: 8px; flex: 0 1 auto; }
.avc-search { position: relative; width: 170px; }
.avc-search .i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--muted); pointer-events: none; }
.avc-search input { width: 100%; height: 38px; padding: 0 10px 0 34px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13.5px; color: var(--text); background: var(--surface); }
.avc-select { height: 38px; width: 124px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 13.5px; color: var(--text); }
.avc-tscroll { position: relative; overflow-x: auto; }
.avc-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--text); }
.avc-table th { text-align: left; font-size: 12.5px; font-weight: 500; color: var(--text-2); padding: 9px 5px; background: #F7F8FB; white-space: nowrap; }
.avc-table th:first-child { border-radius: 8px 0 0 8px; } .avc-table th:last-child { border-radius: 0 8px 8px 0; }
.avc-table td { padding: 10px 5px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.avc-row { cursor: pointer; }
.avc-row:hover td { background: #FAFBFE; }
.avc-row.is-on td { background: #F4F6FF; }
.avc-row.is-on td:first-child { box-shadow: inset 3px 0 0 var(--indigo); }
.avc-row.is-hidden { display: none; }
.avc-plat { display: flex; align-items: center; gap: 8px; min-width: 118px; }
.avc-plat .av-pf { width: 28px; height: 28px; }
.avc-plat b { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; }
.avc-plat b a { color: inherit; text-decoration: none; } .avc-plat b a:hover { color: var(--indigo); }
.avc-plat small { display: block; font-size: 12px; color: var(--muted); max-width: 104px; line-height: 1.3; }
.avc-id b { display: block; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.avc-id small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; }
.avc-biz { max-width: 104px; }
.avc-cz b { display: block; font-weight: 600; }
.avc-cz small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; }
.avc-table .po-chip { height: 26px; font-size: 12px; }
.avc-dot { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.avc-dot i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); }
.avc-dot.is-green i { background: var(--green); } .avc-dot.is-green { color: var(--green-text); }
.avc-dot.is-amber i { background: var(--amber); } .avc-dot.is-amber { color: var(--amber-text); }
.avc-dot.is-red i { background: var(--red); } .avc-dot.is-red { color: #B42339; }
.avc-dot.is-grey { color: var(--text-2); }
.avc-rdots { position: relative; width: 36px; }
.avc-rdots .pm-menu { right: 0; left: auto; top: calc(100% - 6px); min-width: 170px; }
.pm-menu .is-danger { color: #B42339; }
.avc-nomatch { margin: 12px 4px; font-size: 14px; color: var(--text-2); }
.avc-nomatch a { color: var(--indigo); }
.avc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 4px 2px; font-size: 13px; color: var(--text-2); }
.avc-caps { display: inline-flex; align-items: center; gap: 6px; } .avc-caps .i { font-size: 15px; }
.avc-list .es { padding: 26px 10px; }

.avc-row2 { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 14px; }
.avc-cap { margin: 2px 0 0; font-size: 13.5px; color: var(--text-2); }
.avc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.avc-tile { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--border-soft); border-radius: 10px; }
.avc-tile .av-pf { grid-row: span 2; width: 32px; height: 32px; }
.avc-tile b { font-size: 14px; font-weight: 600; }
.avc-tile small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avc-tbtn.btn-outline { grid-column: 1 / -1; margin-top: 10px; height: 34px; justify-content: center; font-size: 13.5px; text-decoration: none; }
.avc-need { display: flex; flex-direction: column; }
.avc-nbtn.btn-outline { align-self: center; height: 40px; margin: 4px 0 12px; gap: 8px; text-decoration: none; }
.avc-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 9px 12px; border-radius: 8px; background: #F4F7FF; font-size: 12.5px; color: var(--text-2); line-height: 1.4; }
.avc-note .i { flex: none; font-size: 16px; color: var(--indigo); margin-top: 1px; }

.avc-reqs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.avc-req { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 2px; border-top: 1px solid var(--border-soft); }
.avc-req:first-child { border-top: 0; }
.avc-req > .av-pf, .avc-req > .i { width: 24px; height: 24px; font-size: 22px; color: var(--indigo); }
.avc-rt b { display: block; font-size: 14px; font-weight: 600; }
.avc-rt span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.avc-racts { display: flex; align-items: center; gap: 10px; }
.avc-rbtn.btn-outline { height: 34px; padding: 0 12px; font-size: 13px; gap: 6px; text-decoration: none; }
.avc-rbtn .i { font-size: 15px; }
.avc-rlink { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer; }
.avc-rlink:hover { color: #B42339; text-decoration: underline; }
.avc-rnote { display: block; margin-top: 2px; font-size: 12.5px; color: var(--amber-text) !important; }
.avc-progress-empty { margin: 4px 0 6px; font-size: 13.5px; color: var(--muted); }

.avc-panel { padding: 16px 18px 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.avc-ph { display: flex; align-items: center; gap: 12px; }
.avc-pmark { flex: none; width: 42px; height: 42px; }
.avc-ph > div { flex: 1 1 auto; min-width: 0; }
.avc-ph h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.3px; color: var(--text); }
.avc-ph p { margin: 1px 0 0; font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avc-ptabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-soft); overflow-x: auto; scrollbar-width: none; }
.avc-ptab { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 500; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.avc-ptab:hover { color: var(--indigo); }
.avc-ptab.is-on { color: var(--indigo); font-weight: 600; border-bottom-color: var(--indigo); }
.avc-tp { display: flex; flex-direction: column; gap: 10px; }
.avc-facts { margin: 0; display: flex; flex-direction: column; gap: 11px; }
.avc-facts > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.avc-facts dt { font-size: 13.5px; color: var(--text-2); }
.avc-facts dd { margin: 0; font-size: 14px; font-weight: 500; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.avc-facts dd small { display: block; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.avc-facts .po-chip { height: 24px; font-size: 12px; }
.avc-copyv { display: inline-flex; align-items: center; gap: 8px; }
.avc-copyv b { font-weight: 600; font-variant-numeric: tabular-nums; }
.avc-copy { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 7px; background: none; color: var(--text-2); cursor: pointer; }
.avc-copy:hover { background: var(--track); color: var(--indigo); } .avc-copy .i { font-size: 16px; }
.avc-idb { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 10px; }
.avc-idic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); }
.avc-idic .i { font-size: 18px; } .avc-idic .av-pf { width: 22px; height: 22px; }
.avc-idb small { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.3px; }
.avc-idb b { display: block; font-size: 14.5px; font-weight: 600; }
.avc-idb span { display: block; font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; }
.avc-h3 { margin: 4px 0 0; font-size: 15px; font-weight: 700; color: var(--text); }
.avc-res { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.avc-res li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.avc-res b { display: block; font-size: 13.5px; font-weight: 600; }
.avc-res small { display: block; font-size: 12px; color: var(--muted); }
.avc-res .po-chip { height: 24px; font-size: 12px; }
.avc-gaps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.avc-gap { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border-soft); }
.avc-gap:first-child { border-top: 0; }
.avc-gic { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--green-bg); color: var(--green-text); }
.avc-gic .i { font-size: 14px; }
.avc-gap.is-gap .avc-gic { background: var(--amber-bg); color: var(--amber-text); }
.avc-gap b { display: block; font-size: 14px; font-weight: 600; }
.avc-gap span { display: block; font-size: 13px; color: var(--text-2); }
.avc-gap small { display: block; font-size: 12px; color: var(--muted); }
.avc-gbtn.btn-outline { height: 32px; padding: 0 10px; font-size: 12.5px; text-decoration: none; white-space: nowrap; }
.avc-acts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.avc-acts li { display: flex; gap: 10px; font-size: 13.5px; }
.avc-acts small { display: block; font-size: 12px; color: var(--muted); }
.avc-av { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--indigo-bg); color: var(--indigo); font-size: 11px; font-weight: 700; }
.avc-empty { margin: 0; font-size: 13.5px; color: var(--muted); }
.avc-qa { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.avc-open.btn-primary { width: 100%; height: 44px; justify-content: center; gap: 8px; text-decoration: none; }
.avc-open .i { font-size: 16px; }
.avc-open[disabled], .avc-open[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.avc-qa2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.avc-qbtn.btn-outline { height: 42px; justify-content: center; gap: 8px; text-decoration: none; }
.avc-qbtn .i { font-size: 17px; }
.avc-qbtn.is-danger { color: #B42339; border-color: #F3C4CC; }
.avc-qbtn.is-danger:hover { background: #FDECEF; }
.avc-panel .es { padding: 24px 8px; }

@media (max-width: 1200px) { .avc-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .avc-row2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) {
  .avc-tools { flex-direction: column; align-items: stretch; }
  .avc-filter { flex-wrap: wrap; } .avc-search { flex: 1 1 160px; width: auto; } .avc-select { flex: 1 1 120px; width: auto; }
  .avc-tiles { grid-template-columns: minmax(0, 1fr); }
  .avc-req { grid-template-columns: 28px minmax(0, 1fr); } .avc-req > .po-chip, .avc-racts { grid-column: 2; justify-self: start; }
  .avc-facts > div { grid-template-columns: 120px minmax(0, 1fr); }
}

/* ---------- Advertisement-06 · Connect or create ad account (avw- this screen: the Add-account wizard; reuses po-card / po-chip / av-pf) — plans/Advertisement-06.md, prototype/gen/advertisement06.css ---------- */
.avw-card { padding: 20px 24px 18px; border-radius: 14px; display: flex; flex-direction: column; gap: 16px; }
.avw-head { display: flex; align-items: flex-start; gap: 16px; }
.avw-head > div { flex: 1 1 auto; min-width: 0; }
.avw-head h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.5px; color: var(--text); }
.avw-head .sub { margin: 3px 0 0; font-size: 16px; color: var(--text-2); }
.avw-ro { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 14px; color: var(--muted); }
.avw-x { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; color: var(--text-2); text-decoration: none; }
.avw-x:hover { background: var(--track); } .avw-x .i { font-size: 20px; }
.avw-steps { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 12px; overflow-x: auto; scrollbar-width: none; }
.avw-step { flex: 1 1 0; display: flex; align-items: center; gap: 10px; min-width: 150px; font-size: 15px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.avw-step:not(:last-child)::after { content: ""; flex: 1 1 auto; height: 1px; min-width: 20px; background: var(--border); }
.avw-num { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); font-size: 14px; font-weight: 600; color: var(--text-2); }
.avw-num .i { font-size: 16px; }
.avw-step.is-on { color: var(--indigo); font-weight: 600; }
.avw-step.is-on .avw-num { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.avw-step.is-done { color: var(--indigo); }
.avw-step.is-done .avw-num { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.avw-step.is-done::after { background: var(--indigo); }
.avw-grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 2.18fr); gap: 20px; align-items: start; }
.avw-left { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.avw-options { display: flex; flex-direction: column; gap: 12px; }
.avw-opt { display: grid; grid-template-columns: 40px minmax(0, 1fr) 22px; gap: 12px; align-items: center; padding: 16px 14px; border: 1px solid var(--border); border-radius: 12px; color: inherit; text-decoration: none; background: var(--surface); }
.avw-opt:hover { border-color: #C9D2FF; }
.avw-opt.is-on { border: 2px solid var(--indigo); padding: 15px 13px; background: #F7F9FF; }
.avw-oic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); }
.avw-opt.is-on .avw-oic { background: var(--indigo); color: #fff; }
.avw-oic .i { font-size: 20px; }
.avw-ot b { display: block; font-size: 15.5px; font-weight: 600; color: var(--text); }
.avw-ot small { display: block; margin-top: 3px; font-size: 13.5px; color: var(--text-2); line-height: 1.4; }
.avw-radio { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--muted-2); background: var(--surface); }
.is-on > .avw-radio { border: 6px solid var(--indigo); }
.avw-main { display: flex; flex-direction: column; gap: 0; min-width: 0; border: 1px solid var(--border-soft); border-radius: 12px; padding: 4px 18px; }
.avw-sec { padding: 14px 0; border-top: 1px solid var(--border-soft); }
.avw-sec:first-child { border-top: 0; }
.avw-sh { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.avw-sh h2, .avw-h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.avw-h2 { margin-bottom: 10px; }
.avw-sh p { margin: 2px 0 0; font-size: 13.5px; color: var(--text-2); }
.avw-link { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 500; color: var(--indigo); text-decoration: none; white-space: nowrap; }
.avw-link:hover { text-decoration: underline; } .avw-link .i { font-size: 14px; }
button.avw-link { border: 0; background: none; padding: 0; font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; }
.avw-empty { margin: 4px 0; font-size: 13.5px; color: var(--muted); }
.avw-otherin { display: block; width: 100%; max-width: 520px; height: 42px; margin-top: 8px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; }
.avw-otherin[hidden], .avw-field input[hidden] { display: none; }
.avw-provs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.avw-prov { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 12px 38px 12px 14px; border: 1px solid var(--border); border-radius: 10px; color: inherit; text-decoration: none; }
.avw-prov:hover { border-color: #C9D2FF; }
.avw-prov.is-on { border: 2px solid var(--indigo); padding: 11px 37px 11px 13px; background: #F7F9FF; }
.avw-pmark { grid-row: span 2; width: 34px; height: 34px; }
.avw-prov b { font-size: 15px; font-weight: 600; }
.avw-prov small { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avw-prov .avw-radio { position: absolute; top: 12px; right: 12px; }
.avw-logins { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.avw-login { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--border-soft); border-radius: 10px; }
.avw-lic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); }
.avw-lic .i { font-size: 17px; }
.avw-lt b { display: block; font-size: 14px; font-weight: 600; }
.avw-lt small { display: block; font-size: 12.5px; color: var(--muted); }
.avw-lbtn.btn-outline { height: 34px; padding: 0 12px; font-size: 13px; gap: 6px; }
.avw-lbtn .i { font-size: 15px; }
.avw-signin { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.avw-signin small { flex-basis: 100%; font-size: 12.5px; color: var(--muted); }
.avw-sbtn.btn-outline { height: 40px; gap: 8px; }
.avw-sbtn .av-pf { width: 20px; height: 20px; }
.avw-sandbox { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; background: var(--amber-bg); color: var(--amber-text); font-size: 12px; font-weight: 600; }
.avw-accts { display: flex; flex-direction: column; border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; }
.avw-acct { display: grid; grid-template-columns: 20px minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 12px; border-top: 1px solid var(--border-soft); cursor: pointer; }
.avw-acct:first-child { border-top: 0; }
.avw-acct:hover { background: #FAFBFE; }
.avw-acct:has(input:checked) { background: #F4F6FF; box-shadow: inset 3px 0 0 var(--indigo); }
.avw-acct.is-off { cursor: default; opacity: 0.72; }
.avw-acct input { width: 18px; height: 18px; accent-color: var(--indigo); margin: 0; }
.avw-at b { display: block; font-size: 14.5px; font-weight: 600; }
.avw-at small, .avw-ab small { display: block; font-size: 12.5px; color: var(--muted); font-weight: 400; }
.avw-ab { font-size: 13px; color: var(--text-2); min-width: 0; }
.avw-acct .po-chip { height: 24px; font-size: 12px; }
.avw-req, .avw-summary, .avw-dup { padding: 12px 14px; border-radius: 10px; background: #F4F7FF; min-width: 0; }
.avw-req h3, .avw-summary h3, .avw-dup h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font-size: 14.5px; font-weight: 700; color: var(--indigo); }
.avw-req h3 .i, .avw-dup h3 .i { font-size: 16px; }
.avw-reqhint { margin: 0; font-size: 13px; color: var(--text-2); }
.avw-reqs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.avw-reqs li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; font-size: 13px; color: var(--text); line-height: 1.4; }
.avw-reqs .i { font-size: 15px; margin-top: 1px; color: var(--green-text); }
.avw-reqs li.is-warn .i { color: var(--amber-text); }
.avw-reqs li.is-grey .i { color: var(--muted); } .avw-reqs li.is-grey { color: var(--text-2); }
.avw-caps { display: flex; align-items: center; gap: 7px; margin: 10px 0 0; font-size: 12.5px; color: var(--text-2); }
.avw-caps .i { font-size: 15px; }
.avw-two { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.avw-fields { display: flex; flex-direction: column; gap: 14px; }
.avw-field { display: flex; flex-direction: column; gap: 5px; }
.avw-field > span { font-size: 14px; font-weight: 600; color: var(--text); }
.avw-field input, .avw-field select, .avw-owner select { height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 14px; color: var(--text); }
.avw-field input.is-invalid { border-color: var(--red); }
.avw-field small { font-size: 12.5px; color: var(--muted); }
.avw-field .avw-err { color: #B42339; }
.avw-sum { margin: 0; display: flex; flex-direction: column; gap: 9px; }
.avw-sum > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.avw-sum.is-compact > div { grid-template-columns: 140px minmax(0, 1fr); }
.avw-sum dt { font-size: 13px; color: var(--text-2); }
.avw-sum dd { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.avw-sum dd small { display: block; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.avw-sum dd .av-pf { width: 18px; height: 18px; vertical-align: -4px; margin-right: 6px; }
.avw-info, .avw-warn { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 9px 12px; border-radius: 8px; font-size: 13px; line-height: 1.45; }
.avw-info { background: var(--surface); color: var(--text-2); border: 1px solid #DCE3FF; }
.avw-warn { background: var(--amber-bg); color: var(--amber-text); }
.avw-info .i, .avw-warn .i { flex: none; font-size: 16px; margin-top: 1px; }
.avw-info .i { color: var(--indigo); }
.avw-review .avw-sum { max-width: 620px; }
.avw-owner { display: flex; align-items: center; gap: 10px; max-width: 520px; padding: 0 0 0 12px; border: 1px solid var(--border); border-radius: 10px; }
.avw-owner > .i { font-size: 20px; color: var(--text-2); }
.avw-owner select { flex: 1 1 auto; border: 0; height: 48px; font-weight: 600; }
.avw-pre { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.avw-pre li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; color: var(--text); }
.avw-pre small { display: block; font-size: 12.5px; color: var(--muted); }
.avw-pic { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; }
.avw-pic .i { font-size: 13px; }
.avw-pic.is-green { background: var(--green-bg); color: var(--green-text); }
.avw-pic.is-amber { background: var(--amber-bg); color: var(--amber-text); }
.avw-pic.is-grey { background: var(--track); color: var(--text-2); }
.avw-pre em { font-style: normal; font-size: 13px; font-weight: 600; white-space: nowrap; }
.avw-pre em.is-green { color: var(--green-text); } .avw-pre em.is-amber { color: var(--amber-text); } .avw-pre em.is-grey { color: var(--text-2); }
.avw-dup p { margin: 0; font-size: 13px; color: var(--text-2); }
.avw-dupok, .avw-dupfound > p { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px !important; }
.avw-dupok .i { font-size: 18px; color: var(--green); } .avw-dupfound .i { font-size: 18px; color: var(--amber); }
.avw-dupok b, .avw-dupfound b { display: block; font-size: 13.5px; color: var(--text); }
.avw-dupok small, .avw-dupfound small { display: block; font-size: 12.5px; color: var(--muted); }
.avw-dupfound .avw-link { margin: 6px 0 0 26px; }
.avw-check { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; font-size: 13px; color: var(--text); }
.avw-check input { margin-top: 2px; accent-color: var(--indigo); }
.avw-strip { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; border-radius: 10px; font-size: 13.5px; }
.avw-strip.is-red { background: #FDECEF; color: #B42339; } .avw-strip.is-blue { background: #F4F7FF; color: var(--text); }
.avw-strip .i { flex: none; font-size: 17px; margin-top: 1px; }
.avw-foot { display: flex; align-items: center; gap: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.avw-cancel.btn-outline, .avw-next.btn-primary, .avw-back.btn-outline { height: 46px; padding: 0 22px; font-size: 15px; text-decoration: none; gap: 8px; }
.avw-fnote { flex: 1 1 auto; font-size: 13px; color: var(--muted); text-align: right; }
.avw-next[disabled], .avw-next[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.avw-next .i { font-size: 17px; }

@media (max-width: 1100px) {
  .avw-grid { grid-template-columns: minmax(0, 1fr); }
  .avw-options { flex-direction: row; overflow-x: auto; } .avw-opt { flex: 1 0 240px; }
}
@media (max-width: 900px) { .avw-two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) {
  .avw-card { padding: 16px 14px; }
  .avw-provs { grid-template-columns: minmax(0, 1fr); }
  .avw-options { flex-direction: column; } .avw-opt { flex: none; }
  .avw-acct { grid-template-columns: 20px minmax(0, 1fr); } .avw-ab, .avw-acct .po-chip { grid-column: 2; justify-self: start; }
  .avw-login { grid-template-columns: 34px minmax(0, 1fr); } .avw-lbtn { grid-column: 2; justify-self: start; }
  .avw-sum > div, .avw-sum.is-compact > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .avw-foot { flex-wrap: wrap; } .avw-fnote { flex-basis: 100%; order: 3; text-align: left; }
  .avw-steps { gap: 6px; } .avw-step { flex: 0 0 auto; min-width: 0; gap: 6px; } .avw-step:not(:last-child)::after { min-width: 10px; flex: 0 0 10px; }
  .avw-step > span:last-child { display: none; } .avw-step.is-on { flex: 1 1 auto; } .avw-step.is-on > span:last-child { display: inline; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- Advertisement-07 · Business registration data (avb- this screen; reuses the D01 head, the D06 stepper avw-steps, po-card / po-chip) — plans/Advertisement-07.md, prototype/gen/advertisement07.css ---------- */
.avb-stepcard { padding: 14px 20px; border-radius: 12px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.avb-draft { margin: 0; font-size: 13px; color: var(--muted); }
.avb-strip { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: #FDECEF; color: #B42339; font-size: 14px; font-weight: 500; }
.avb-strip .i { font-size: 17px; }
.avb-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.avb-form { padding: 16px 20px 12px; }
.avb-fh { margin-bottom: 8px; }
.avb-fh h2 { margin: 0; font-size: 19px; font-weight: 700; color: var(--text); }
.avb-fh p { margin: 2px 0 0; font-size: 14px; color: var(--text-2); }
.avb-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 150px; gap: 14px; align-items: start; padding: 10px 0; }
.avb-lab { padding-top: 11px; font-size: 14px; font-weight: 600; color: var(--text); }
.avb-lab b { color: var(--red); font-weight: 600; }
.avb-ctl { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.avb-ctl input, .avb-ctl select { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 14px; color: var(--text); }
.avb-ctl input:read-only, .avb-ctl select:disabled { background: #F7F8FB; color: var(--text-2); }
.avb-ctl .is-invalid, .avb-ctl input.is-invalid, .avb-ctl select.is-invalid { border-color: var(--red); background: #FFF8F9; }
.avb-pair { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 8px; }
.avb-pair > span, .avb-region { display: flex; flex-direction: column; gap: 4px; }
.avb-phone { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; }
.avb-hint { font-size: 12.5px; color: var(--muted); }
.avb-err { font-size: 12.5px; font-weight: 500; color: #B42339; }
.avb-src { justify-self: start; margin-top: 9px; display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--track); color: var(--text-2); }
.avb-src.is-profile { background: var(--green-bg); color: var(--green-text); }
.avb-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.avb-prof { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--border-soft); border-radius: 10px; background: #F7F9FF; }
.avb-logo { flex: none; width: 40px; height: 40px; display: grid; place-items: center; color: var(--indigo); } .avb-logo .i { font-size: 34px; }
.avb-prof b { font-size: 14.5px; font-weight: 600; }
.avb-prof p { margin: 3px 0 0; font-size: 13px; color: var(--text-2); line-height: 1.45; }
.avb-prof p b { font-size: 13px; color: var(--text); }
.avb-prof small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.avb-use.btn-outline { margin-top: 10px; height: 38px; font-size: 13.5px; }
.avb-verify { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; background: #FFF6E8; border: 1px solid #F8DDB0; }
.avb-vic { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #FFE6BF; color: var(--amber-text); }
.avb-vic .i { font-size: 19px; }
.avb-verify h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
.avb-verify p { margin: 3px 0 0; font-size: 13px; color: var(--text-2); line-height: 1.45; }
.avb-cap { margin: 2px 0 0; font-size: 13px; color: var(--text-2); }
.avb-dlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.avb-doc { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 10px; }
.avb-dic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--track); color: var(--text-2); }
.avb-dic .i { font-size: 18px; }
.avb-doc b { display: block; font-size: 14px; font-weight: 600; }
.avb-doc b em { font-style: normal; color: var(--red); }
.avb-doc small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.avb-dnote { color: var(--text-2) !important; }
.avb-dend { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.avb-dend .po-chip { height: 24px; font-size: 11.5px; }
.avb-dbtn { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--indigo); cursor: pointer; text-align: right; max-width: 150px; }
.avb-dbtn:hover { text-decoration: underline; }
.avb-reqs { margin-top: 10px; border: 1px solid var(--border-soft); border-radius: 10px; }
.avb-reqs summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; }
.avb-reqs summary::-webkit-details-marker { display: none; }
.avb-reqs summary > .i { flex: none; font-size: 20px; color: var(--indigo); }
.avb-reqs summary span { flex: 1 1 auto; }
.avb-reqs summary b { display: block; font-size: 14px; }
.avb-reqs summary small { display: block; font-size: 12.5px; color: var(--muted); }
.avb-reqs summary em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--indigo); white-space: nowrap; }
.avb-reqs[open] summary em { color: var(--text-2); }
.avb-reqs ul { margin: 0; padding: 0 14px 0 34px; font-size: 13px; color: var(--text-2); line-height: 1.5; }
.avb-reqs p { margin: 6px 14px 10px; font-size: 12.5px; color: var(--muted); }
.avb-ro { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }

@media (max-width: 1200px) { .avb-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) {
  .avb-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .avb-lab { padding-top: 0; } .avb-src { margin-top: 0; }
  .avb-pair, .avb-phone { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .avb-doc { grid-template-columns: 40px minmax(0, 1fr); } .avb-dend { grid-column: 2; align-items: flex-start; }
}

/* ---------- Advertisement-08 · Meta business and advertiser setup (avs- shared by the provider setups D08 – D10, avm- this screen; reuses the D06 wizard pieces avw-steps / avw-field / avw-sum / avw-strip / avw-foot, po-card / po-chip / av-pf) — plans/Advertisement-08.md, prototype/gen/advertisement08.css ---------- */
.avs-root { display: flex; flex-direction: column; gap: 14px; }
.avs-draft { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.avs-ro { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 14px; color: var(--muted); }
.avs-sh { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.avs-sh h2 { margin: 0; font-size: 19px; font-weight: 700; color: var(--text); }
.avs-sh p { margin: 3px 0 0; font-size: 14px; color: var(--text-2); line-height: 1.45; }
.avs-caps { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; background: var(--indigo-bg); color: var(--indigo); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.avs-caps .i { font-size: 15px; }
.avs-orgs { display: flex; flex-direction: column; gap: 10px; }
.avs-org { display: grid; grid-template-columns: 22px 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; }
.avs-org:hover { border-color: #C9D2FF; }
.avs-org:has(input:checked) { border: 2px solid var(--indigo); padding: 11px 15px; background: #F7F9FF; }
.avs-org.is-off { cursor: default; opacity: 0.75; }
.avs-org input { width: 20px; height: 20px; margin: 0; accent-color: var(--indigo); }
.avs-oi { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 10px; background: var(--track); color: var(--text-2); font-size: 20px; font-weight: 700; }
.avs-org:has(input:checked) .avs-oi, .avs-oi.is-own { background: #0B2A6B; color: #fff; }
.avs-oi .i { font-size: 24px; }
.avs-ot b { display: block; font-size: 15.5px; font-weight: 600; color: var(--text); }
.avs-ot small { display: block; font-size: 13px; color: var(--text-2); line-height: 1.45; }
.avs-ot .avs-why { color: var(--amber-text); }
.avs-oc { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.avs-oc .po-chip { height: 24px; font-size: 12px; }
.avs-or { display: flex; align-items: center; gap: 12px; margin: 14px 0 10px; font-size: 14px; font-weight: 500; color: var(--text-2); }
.avs-or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--border-soft); }
.avs-org.is-new .avs-oi { background: var(--indigo-bg); color: var(--indigo); border: 1px dashed #C9D2FF; }
.avs-neworg { margin: 10px 0 0 36px; max-width: 520px; }
.avs-neworg[hidden] { display: none; }
.avs-login { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; padding: 10px 14px; border: 1px solid var(--border-soft); border-radius: 10px; font-size: 13.5px; color: var(--text-2); }
.avs-login b { color: var(--text); font-weight: 600; }
.avs-login select { height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; }
.avs-login .btn-outline { height: 34px; padding: 0 12px; font-size: 13px; gap: 6px; }
.avs-login .av-pf { width: 18px; height: 18px; }
.avs-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.avs-grid2 .avw-field.is-wide { grid-column: 1 / -1; }
.avs-grid2.is-spaced { margin-top: 14px; }
.avs-steplink { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.avs-steplink:hover { color: var(--indigo); }
.avw-strip.is-amber { background: var(--amber-bg); color: var(--amber-text); }
.avs-grid2 .avw-field input, .avs-grid2 .avw-field select { width: 100%; }
.avw-field .is-invalid, .avw-field select.is-invalid { border-color: var(--red); background: #FFF8F9; }
.avs-err { font-size: 12.5px; font-weight: 500; color: #B42339 !important; }
.avs-err[hidden] { display: none; }
.avs-fixed { margin: 14px 0 0 !important; }
.avs-static { display: flex; align-items: center; gap: 8px; min-height: 42px; margin: 0; padding: 0 12px; border: 1px solid var(--border-soft); border-radius: 8px; background: #F7F8FB; font-size: 14px; color: var(--text); }
.avs-static .i { font-size: 17px; color: var(--text-2); }
.avs-static .avw-link { margin-left: auto; }
.avs-vh { margin: 0 0 10px; font-size: 17px; font-weight: 700; color: var(--text); }
.avs-h3 { margin: 18px 0 10px; font-size: 15px; font-weight: 700; color: var(--text); }
.avs-kv { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.avs-kv > div { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.avs-kv.is-wide > div { grid-template-columns: 172px minmax(0, 1fr); }
.avs-kv dt { font-size: 13px; color: var(--text-2); }
.avs-kv dd { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.avs-kv dd small { display: block; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.avs-side { padding: 16px; border: 1px solid #DCE3FF; border-radius: 12px; background: #F7F9FF; min-width: 0; align-self: start; }
.avs-side h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--text); }
.avs-side h3 .av-pf { width: 20px; height: 20px; }
.avs-side .avs-note { margin: 12px 0 0; font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.avs-routes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.avs-route { padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 10px; }
.avs-route > div { display: flex; align-items: center; gap: 10px; }
.avs-route b { font-size: 14px; font-weight: 600; color: var(--text); }
.avs-route .po-chip { height: 22px; font-size: 11.5px; flex: none; }
.avs-route p { margin: 6px 0 0; font-size: 13px; color: var(--text-2); line-height: 1.45; }
.avs-route ol { margin: 8px 0 0; padding-left: 20px; font-size: 13px; color: var(--text); line-height: 1.55; }
.avs-route .avw-link { margin-top: 8px; }
.avs-plan { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 14px 16px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface); }
.avs-pic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--amber-bg); color: var(--amber-text); }
.avs-pic.is-green { background: var(--green-bg); color: var(--green-text); } .avs-pic.is-red { background: #FDECEF; color: #B42339; } .avs-pic.is-grey { background: var(--track); color: var(--text-2); }
.avs-pic .i { font-size: 21px; }
.avs-plan b { display: block; font-size: 15.5px; font-weight: 700; color: var(--text); }
.avs-plan small { display: block; font-size: 13px; color: var(--text-2); line-height: 1.45; }
.avs-plan .avs-acts { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.avs-plan b .po-chip { margin-left: 8px; vertical-align: 2px; }
.avs-plan .btn-outline, .avs-plan .btn-primary { height: 38px; padding: 0 14px; font-size: 13.5px; text-decoration: none; gap: 6px; }
.avs-reason { margin: 10px 0 0; padding: 9px 12px; border-radius: 8px; background: #FDECEF; color: #B42339; font-size: 13px; }
.avs-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.avs-table th { padding: 9px 12px; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--text-2); background: #F7F8FB; border-bottom: 1px solid var(--border-soft); }
.avs-table td { padding: 11px 12px; border-bottom: 1px solid var(--border-soft); color: var(--text); vertical-align: middle; }
.avs-table tr:last-child td { border-bottom: 0; }
.avs-table td small { display: block; font-size: 12px; color: var(--muted); }
.avs-table select { height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13.5px; min-width: 150px; }
.avs-table .po-chip { height: 24px; font-size: 12px; }
.avs-twrap { border: 1px solid var(--border-soft); border-radius: 10px; overflow-x: auto; }
.avs-assets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.avs-asset { display: grid; grid-template-columns: 20px 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--border-soft); border-radius: 10px; cursor: pointer; }
.avs-asset:has(input:checked) { border-color: var(--indigo); background: #F7F9FF; }
.avs-asset input { width: 18px; height: 18px; margin: 0; accent-color: var(--indigo); }
.avs-asset .av-pf { width: 30px; height: 30px; }
.avs-asset b { display: block; font-size: 14.5px; font-weight: 600; }
.avs-asset small { display: block; font-size: 12.5px; color: var(--muted); }
.avs-asset .po-chip { height: 24px; font-size: 12px; }
.avs-empty { margin: 4px 0; padding: 14px; border: 1px dashed var(--border); border-radius: 10px; font-size: 13.5px; color: var(--text-2); }
.avs-empty .avw-link { margin-left: 6px; }
.avs-foot { margin-top: 2px; }
.avs-foot .avw-next[hidden] { display: none; }

.avm-card { padding: 20px 24px 18px; border-radius: 14px; display: flex; flex-direction: column; gap: 16px; }
.avm-head { display: flex; align-items: flex-start; gap: 16px; }
.avm-tile { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 12px; background: #EEF3FF; }
.avm-tile .av-pf { width: 36px; height: 36px; }
.avm-head > div { flex: 1 1 auto; min-width: 0; }
.avm-head h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.4px; color: var(--text); }
.avm-head .sub { margin: 3px 0 0; font-size: 15px; color: var(--text-2); }
.avm-body { display: grid; grid-template-columns: 208px minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.avm-steps { list-style: none; margin: 0; padding: 4px 16px 4px 0; border-right: 1px solid var(--border-soft); display: flex; flex-direction: column; }
.avm-step { position: relative; display: flex; align-items: center; gap: 12px; height: 62px; font-size: 15px; font-weight: 500; color: var(--text-2); }
.avm-step:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 47px; height: 30px; width: 1px; background: var(--border); }
.avm-step a, .avm-step > span.avm-sl { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; width: 100%; padding: 6px 8px 6px 0; border-radius: 10px; }
.avm-step a:hover { color: var(--indigo); }
.avm-num { flex: none; position: relative; z-index: 1; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); font-size: 14px; font-weight: 600; color: var(--text-2); }
.avm-num .i { font-size: 15px; }
.avm-step.is-on { color: var(--indigo); font-weight: 600; }
.avm-step.is-on > span.avm-sl { background: #EEF1FF; padding-left: 6px; margin-left: -6px; }
.avm-step.is-on .avm-num, .avm-step.is-done .avm-num { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.avm-step.is-done { color: var(--text); }
.avm-step.is-done::after { background: var(--indigo); }
.avm-main { min-width: 0; }
.avm-reg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; padding: 14px 16px; border: 1px solid var(--border-soft); border-radius: 12px; }
.avm-reg dt { font-size: 12.5px; color: var(--text-2); }
.avm-reg dd { margin: 2px 0 0; font-size: 14px; font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.avm-reg dd span { display: block; }
.avm-ver { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13.5px; color: var(--text); }

@media (max-width: 1200px) { .avm-body { grid-template-columns: 208px minmax(0, 1fr); } .avm-body > .avs-side { grid-column: 1 / -1; } }
@media (max-width: 900px) {
  .avm-body { grid-template-columns: minmax(0, 1fr); }
  .avm-steps { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--border-soft); padding: 0 0 10px; gap: 6px; overflow-x: auto; }
  .avm-step { height: auto; flex: 0 0 auto; } .avm-step::after { display: none; }
  .avm-step .avm-sl > span:last-child, .avm-step a > span:last-child { display: none; }
  .avm-step.is-on .avm-sl > span:last-child { display: inline; }
}
@media (max-width: 768px) {
  .avm-card { padding: 16px 14px; }
  .avs-sh { flex-wrap: wrap; }
  .avs-grid2, .avm-reg { grid-template-columns: minmax(0, 1fr); }
  .avs-org { grid-template-columns: 20px 44px minmax(0, 1fr); } .avs-oi { width: 44px; height: 44px; } .avs-oc { grid-column: 3; align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .avs-kv > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .avs-kv.is-wide > div { grid-template-columns: minmax(0, 1fr); }
  .avs-plan .avs-acts { grid-column: 1 / -1; }
  .avs-neworg { margin-left: 0; }
}

/* ---------- Advertisement-09 · Google manager and client setup (avg- this screen; reuses the shared provider-setup avs- pieces of D08 and the D06 wizard pieces avw-*) — plans/Advertisement-09.md, prototype/gen/advertisement09.css ---------- */
.avg-card { padding: 20px 24px 18px; border-radius: 14px; display: flex; flex-direction: column; gap: 16px; }
.avg-head { display: flex; align-items: flex-start; gap: 14px; }
.avg-back { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; color: var(--text-2); text-decoration: none; }
.avg-back:hover { background: var(--track); } .avg-back .i { font-size: 20px; }
.avg-head > div { flex: 1 1 auto; min-width: 0; }
.avg-head h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.5px; color: var(--text); }
.avg-head .sub { margin: 3px 0 0; font-size: 15.5px; color: var(--text-2); }
.avg-card > .avw-steps { padding: 0 8%; }
.avg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px; align-items: start; }
.avg-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.avg-box { padding: 16px 18px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface); min-width: 0; }
.avg-methods { display: flex; flex-direction: column; gap: 10px; }
.avg-method { display: grid; grid-template-columns: 22px 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; color: inherit; text-decoration: none; cursor: pointer; }
.avg-method:hover { border-color: #C9D2FF; }
.avg-method:has(input:checked) { border: 2px solid var(--indigo); padding: 11px 13px; background: #F7F9FF; }
.avg-method input { width: 18px; height: 18px; margin: 0; accent-color: var(--indigo); }
.avg-method .avg-go { width: 18px; display: grid; place-items: center; color: var(--muted); } .avg-method .avg-go .i { font-size: 16px; }
.avg-mic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); }
.avg-mic .i { font-size: 20px; }
.avg-method b { display: block; font-size: 15px; font-weight: 600; color: var(--text); }
.avg-method small { display: block; margin-top: 2px; font-size: 13px; color: var(--text-2); line-height: 1.4; }
.avg-linkfield { margin: 4px 0 0 34px; max-width: 360px; }
.avg-linkfield[hidden] { display: none; }
.avg-mgr { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 10px; }
.avg-mgr + .avg-mgr { margin-top: 8px; }
.avg-mgr.is-on { border-color: var(--indigo); background: #F7F9FF; }
.avg-mgr .av-pf { width: 34px; height: 34px; }
.avg-mgr b { font-size: 15px; font-weight: 600; color: var(--text); }
.avg-mgr .po-chip { height: 22px; font-size: 11.5px; margin-left: 8px; vertical-align: 1px; }
.avg-mgr small { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px; font-size: 13px; color: var(--text-2); }
.avg-copy { border: 0; background: none; padding: 2px; color: var(--muted); cursor: pointer; display: inline-grid; place-items: center; }
.avg-copy:hover { color: var(--indigo); } .avg-copy .i { font-size: 14px; }
.avg-sep { color: var(--border); }
.avg-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border-soft); margin: -4px 0 12px; }
.avg-tab { border: 0; background: none; padding: 10px 14px; font: inherit; font-size: 15px; font-weight: 500; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.avg-tab.is-on { color: var(--indigo); font-weight: 600; border-bottom-color: var(--indigo); }
.avg-panel[hidden] { display: none; }
.avg-new td { background: #F7F9FF; border-top: 1px dashed #C9D2FF; }
.avg-mono { font-variant-numeric: tabular-nums; white-space: nowrap; }
.avg-checks { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.avg-checks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; font-size: 13.5px; color: var(--text); line-height: 1.45; }
.avg-checks .i { font-size: 16px; margin-top: 1px; color: var(--indigo); }
.avg-checks small { display: block; font-size: 12.5px; color: var(--text-2); }

@media (max-width: 1100px) { .avg-grid { grid-template-columns: minmax(0, 1fr); } .avg-card > .avw-steps { padding: 0; } }
@media (max-width: 768px) {
  .avg-card { padding: 16px 14px; }
  .avg-head h1 { font-size: 22px; }
  .avg-linkfield { margin-left: 0; }
  .avg-method { grid-template-columns: 20px 36px minmax(0, 1fr); } .avg-mic { width: 36px; height: 36px; }
}

/* ---------- Advertisement-10 · TikTok business and advertiser setup (avt- this screen; reuses the shared provider-setup avs- pieces of D08 and the D06 wizard pieces avw-*) — plans/Advertisement-10.md, prototype/gen/advertisement10.css ---------- */
.avt-backlink { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: 15px; font-weight: 500; color: var(--indigo); text-decoration: none; }
.avt-backlink:hover { text-decoration: underline; } .avt-backlink .i { font-size: 17px; }
.avt-head { display: flex; align-items: flex-start; gap: 16px; margin-top: -6px; }
.avt-head > div { flex: 1 1 auto; min-width: 0; }
.avt-head h1 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.5px; color: var(--text); }
.avt-head .sub { margin: 3px 0 0; font-size: 15.5px; color: var(--text-2); }
.avt-hacts { flex: none; display: flex; align-items: center; gap: 16px; }
.avt-chip { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 10px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); font-size: 15px; font-weight: 600; color: var(--text); }
.avt-chip .av-pf { width: 26px; height: 26px; }
.avt-learn { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: var(--indigo); text-decoration: none; }
.avt-learn:hover { text-decoration: underline; } .avt-learn .i { font-size: 16px; }
.avt-steps { list-style: none; margin: 0; padding: 14px 22px; border-radius: 12px; display: flex; align-items: center; gap: 14px; }
.avt-step { flex: 1 1 0; display: flex; align-items: center; gap: 12px; min-width: 0; }
.avt-step:not(:last-child)::after { content: ""; flex: 1 1 auto; height: 1px; min-width: 16px; background: var(--border); }
.avt-num { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); font-size: 16px; font-weight: 600; color: var(--text-2); }
.avt-num .i { font-size: 17px; }
.avt-step b { display: block; font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; }
.avt-step small { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.avt-step.is-on .avt-num, .avt-step.is-done .avt-num { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.avt-step.is-on b { color: var(--indigo); }
.avt-step.is-done::after { background: var(--indigo); }
.avt-grid { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.avt-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.avt-cardx { padding: 16px 20px; border-radius: 12px; }
.avt-ch { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.avt-ch > b.avt-n { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--indigo); color: #fff; font-size: 14px; font-weight: 700; }
.avt-ch h2 { flex: 1 1 auto; margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.avt-ch .po-chip { height: 26px; font-size: 12.5px; }
.avt-cap { margin: -4px 0 12px 42px; font-size: 13.5px; color: var(--text-2); }
.avt-login { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.avt-login[hidden] { display: none; }
.avt-tile { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: #111; }
.avt-tile .av-pf { width: 34px; height: 34px; }
.avt-login small { display: block; font-size: 12.5px; color: var(--muted); }
.avt-login b { display: block; font-size: 16px; font-weight: 700; color: var(--text); }
.avt-login span.avt-dn { display: block; font-size: 13.5px; color: var(--text-2); }
.avt-lacts { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.avt-lacts select { height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13.5px; }
.avt-lacts .btn-outline { height: 38px; padding: 0 14px; font-size: 13.5px; gap: 6px; }
.avt-lacts .av-pf { width: 18px; height: 18px; }
.avt-ver { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-top: 10px; padding: 10px 14px; border: 1px solid var(--border-soft); border-radius: 10px; }
.avt-ver .i { font-size: 20px; color: var(--amber); }
.avt-ver.is-green .i { color: var(--green); } .avt-ver.is-grey .i { color: var(--muted); }
.avt-ver b { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.avt-ver small { display: block; font-size: 12.5px; color: var(--text-2); }
.avt-ver .po-chip { height: 26px; font-size: 12px; }
.avt-exist { margin: 12px 0 0; font-size: 13px; color: var(--text-2); }
.avt-exist .avw-link { margin-left: 6px; }
.avt-fin { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 14px; border: 1px solid var(--border-soft); border-radius: 10px; }
.avt-fin > div { padding: 10px 14px; border-left: 1px solid var(--border-soft); }
.avt-fin > div:first-child { border-left: 0; }
.avt-fin dt { font-size: 12.5px; color: var(--text-2); }
.avt-fin dd { margin: 3px 0 0; font-size: 13.5px; font-weight: 500; color: var(--text); }
.avt-fin dd.is-grey::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); margin-right: 6px; }
.avt-sum { padding: 16px 18px; border-radius: 12px; }
.avt-sum h2 { margin: 0 0 12px; font-size: 18px; font-weight: 700; color: var(--text); }
.avt-sum dl { margin: 0; display: flex; flex-direction: column; }
.avt-sum dl > div { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--border-soft); }
.avt-sum dl > div:first-child { border-top: 0; padding-top: 0; }
.avt-sum dt { font-size: 13.5px; color: var(--text-2); }
.avt-sum dd { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.avt-sum dd small { display: block; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.avt-dot { display: flex; width: fit-content; align-items: center; gap: 6px; font-weight: 600; }
.avt-sum dd > span { display: block; }
.avt-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); }
.avt-dot.is-green { color: var(--green-text); } .avt-dot.is-green::before { background: var(--green); }
.avt-dot.is-amber { color: var(--amber-text); } .avt-dot.is-amber::before { background: var(--amber); }
.avt-dot.is-grey { color: var(--text-2); }
.avt-outcomes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.avt-outcomes .po-chip { height: 22px; font-size: 11.5px; }
.avt-next { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: #F4F7FF; border: 1px solid #DCE3FF; }
.avt-next .i { font-size: 19px; color: var(--indigo); }
.avt-next b { display: block; font-size: 14.5px; color: var(--indigo); }
.avt-next p { margin: 3px 0 0; font-size: 13px; color: var(--text-2); line-height: 1.45; }
.avt-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.avt-foot .btn-outline, .avt-foot .btn-primary { height: 44px; padding: 0 20px; font-size: 15px; gap: 8px; text-decoration: none; }
.avt-foot [hidden] { display: none; }

@media (max-width: 1200px) { .avt-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .avt-steps { gap: 6px; padding: 12px; } .avt-step { flex: 0 0 auto; } .avt-step:not(:last-child)::after { min-width: 10px; flex: 0 0 10px; }
  .avt-step > span:last-child { display: none; } .avt-step.is-on { flex: 1 1 auto; } .avt-step.is-on > span:last-child { display: block; min-width: 0; overflow: hidden; }
}
@media (max-width: 768px) {
  .avt-head { flex-direction: column; } .avt-head h1 { font-size: 23px; }
  .avt-login { grid-template-columns: 52px minmax(0, 1fr); } .avt-tile { width: 52px; height: 52px; } .avt-lacts { grid-column: 1 / -1; align-items: flex-start; }
  .avt-fin { grid-template-columns: minmax(0, 1fr); } .avt-fin > div { border-left: 0; border-top: 1px solid var(--border-soft); } .avt-fin > div:first-child { border-top: 0; }
  .avt-sum dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .avt-cap { margin-left: 0; }
}

/* ---------- Advertisement-11 · Account creation review and execution (avx- this screen and the crumb / card head / fact list the Accounts sub-pages D12 / D13 share; reuses the D01 head avo-head, po-card / po-chip / po-btn, av-pf, avw-strip, avs-caps) — plans/Advertisement-11.md, prototype/gen/advertisement11.css ---------- */
.avx-crumb { display: flex; align-items: center; gap: 7px; margin: 0 4px 2px; font-size: 13px; color: var(--text-2); }
.avx-crumb a { color: var(--text-2); text-decoration: none; } .avx-crumb a:hover { color: var(--indigo); }
.avx-crumb [aria-current] { color: var(--text); font-weight: 600; }
.avx-head { margin-bottom: 12px; }
.avx-card { padding: 16px 18px; min-width: 0; }
.avx-card h2 { margin: 0; font-size: 19px; font-weight: 700; color: var(--text); letter-spacing: -0.2px; display: flex; align-items: center; gap: 8px; }
.avx-card h2 .av-pf { width: 22px; height: 22px; }
.avx-ch { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.avx-ch p { margin: 3px 0 0; font-size: 13.5px; color: var(--text-2); }
.avx-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; margin: 0; }
.avx-kv > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; }
.avx-kv dt { color: var(--text-2); }
.avx-kv dd { margin: 0; color: var(--text); font-weight: 500; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; overflow-wrap: anywhere; }
.avx-kv dd .av-pf { width: 20px; height: 20px; }
.avx-kv.is-tight { grid-template-columns: minmax(0, 1fr); }
.avx-kv.is-tight > div { grid-template-columns: 140px minmax(0, 1fr); padding: 7px 0; }
.avx-fine { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 12.5px; color: var(--text-2); }
.avx-fine .i { font-size: 14px; color: var(--muted); } .avx-fine a { color: var(--indigo); }
.avx-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.avx-main, .avx-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.avx-access { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 10px; font-size: 14px; }
.avx-access .i { font-size: 20px; flex: none; }
.avx-access.is-green { background: #F1FAF5; color: var(--green-text); } .avx-access.is-amber { background: var(--amber-bg); color: var(--amber-text); }
.avx-ex-act { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.avx-ex-act small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.avx-ex-act .po-btn { height: 38px; font-size: 14px; }
.avx-ex { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; border-radius: 10px; background: #F7F8FB; color: var(--text-2); font-size: 13px; }
.avx-ex > .i { font-size: 22px; flex: none; }
.avx-ex b { display: block; font-size: 14px; color: var(--text); }
.avx-ex.is-ok { background: #F1FAF5; } .avx-ex.is-ok > .i { color: var(--green); }
.avx-ex.is-warn { background: var(--amber-bg); } .avx-ex.is-warn > .i { color: var(--amber); }
.avx-ex .avw-link { margin-left: auto; }
.avx-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 2px 2px; }
.avx-start.btn-primary { height: 46px; padding: 0 22px; font-size: 15px; font-weight: 600; gap: 9px; }
.avx-start .i { font-size: 18px; }
.avx-textlink { font-size: 14.5px; font-weight: 600; color: var(--indigo); text-decoration: none; padding: 0 6px; }
.avx-fnote { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--text-2); }
.avx-flow { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.avx-fl { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 8px; border-radius: 10px; }
.avx-fl.is-now { background: #F4F6FF; }
.avx-fn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); color: var(--text-2); font-weight: 700; font-size: 14px; background: var(--surface); }
.avx-fl.is-now .avx-fn { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.avx-fl.is-done .avx-fn { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.avx-fl.is-bad .avx-fn { background: #FDECEF; border-color: #F5C2CB; color: #B42339; }
.avx-fl b { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.avx-fl small { display: block; font-size: 12.5px; color: var(--text-2); }
.avx-sum { margin: 0; display: flex; flex-direction: column; }
.avx-sum > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px; padding: 7px 0; font-size: 13.5px; }
.avx-sum dt { display: flex; align-items: center; gap: 9px; color: var(--text-2); } .avx-sum dt .i { font-size: 16px; color: var(--muted); }
.avx-sum dd { margin: 0; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.avx-next { margin: 10px 0 0; padding: 0; list-style: none; counter-reset: avx; display: flex; flex-direction: column; gap: 10px; }
.avx-next li { counter-increment: avx; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; font-size: 13.5px; color: var(--text-2); align-items: start; }
.avx-next li::before { content: counter(avx); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); font-weight: 700; font-size: 12.5px; }
.avx-strips { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.avx-strip { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-size: 13px; color: var(--text-2); }
.avx-strip > .i { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); }
.avx-strip b { display: block; font-size: 14.5px; color: var(--text); margin-bottom: 2px; }
.avx-strip.is-ok { background: #F1FAF5; border-color: #CDEBDA; } .avx-strip.is-ok > .i { background: var(--green); color: #fff; }
.avx-strip.is-muted > .i { background: var(--track); color: var(--text-2); }
.avx-stepper { padding: 14px 18px; margin-bottom: 14px; overflow-x: auto; }
.avx-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(130px, 1fr)); gap: 0; }
.avx-st { position: relative; display: flex; align-items: flex-start; gap: 10px; padding-right: 12px; }
.avx-st:not(:last-child)::after { content: ""; position: absolute; left: 40px; right: 12px; top: 15px; height: 2px; background: var(--border); z-index: 0; }
.avx-st.is-done:not(:last-child)::after { background: var(--indigo); }
.avx-sn { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--track); color: var(--text-2); font-weight: 700; font-size: 13px; box-shadow: 0 0 0 4px var(--surface); }
.avx-sn .i { font-size: 16px; }
.avx-st.is-done .avx-sn { background: var(--indigo); color: #fff; }
.avx-st.is-now .avx-sn, .avx-st.is-unknown .avx-sn { background: var(--surface); color: var(--indigo); box-shadow: 0 0 0 4px var(--surface), inset 0 0 0 3px var(--indigo); }
.avx-st.is-wait .avx-sn { background: var(--amber-bg); color: var(--amber-text); box-shadow: 0 0 0 4px var(--surface), inset 0 0 0 2px var(--amber); }
.avx-st.is-failed .avx-sn { background: #FDECEF; color: #B42339; }
.avx-sl { position: relative; z-index: 1; background: var(--surface); padding-right: 6px; min-width: 0; }
.avx-sl b { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.avx-sl small { display: block; font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.avx-st.is-wait .avx-sl small { color: var(--amber-text); } .avx-st.is-failed .avx-sl small { color: #B42339; }
.avx-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.12fr); gap: 14px; align-items: start; margin-bottom: 14px; }
.avx-cols .avx-kv { grid-template-columns: minmax(0, 1fr); }
.avx-cols .avx-kv > div { grid-template-columns: 128px minmax(0, 1fr); padding: 7px 0; font-size: 13px; }
.avx-evidence { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: #F1FAF5; }
.avx-evidence h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-size: 14.5px; color: var(--green-text); }
.avx-evidence .avx-kv > div { border-bottom-color: #DCEFE4; }
.avx-id { font-variant-numeric: tabular-nums; }
.avx-copy { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: var(--text-2); cursor: pointer; }
.avx-copy:hover { background: var(--surface); color: var(--indigo); }
.avx-links { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 0; font-size: 13px; }
.avx-links a { color: var(--indigo); font-weight: 600; text-decoration: none; }
.avx-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.avx-feed li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 0 0 12px 18px; }
.avx-feed li::before { content: ""; position: absolute; left: 0; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--indigo); }
.avx-feed li:not(:last-child)::after { content: ""; position: absolute; left: 4px; top: 16px; bottom: 0; width: 2px; background: var(--border-soft); }
.avx-feed li.is-ok::before { background: var(--green); } .avx-feed li.is-warn::before { background: var(--amber); } .avx-feed li.is-bad::before { background: var(--red); }
.avx-feed li.is-pending::before { background: var(--muted-2); }
.avx-feed time { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.avx-feed b { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); }
.avx-feed small { display: block; font-size: 12.5px; color: var(--text-2); }
.avx-feed li.is-pending b { color: var(--text-2); font-weight: 500; }
.avx-wait { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 0; padding: 12px 14px; border-radius: 10px; background: #F4F7FF; font-size: 12.5px; color: var(--text-2); }
.avx-wait > .i { flex: none; font-size: 22px; color: var(--indigo); }
.avx-wait b { display: block; font-size: 13.5px; color: var(--indigo); }
.avx-wait.is-user { background: var(--amber-bg); } .avx-wait.is-user > .i, .avx-wait.is-user b { color: var(--amber-text); }
.avx-wait.is-bad { background: #FDECEF; } .avx-wait.is-bad > .i, .avx-wait.is-bad b { color: #B42339; }
.avx-vtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.avx-vtab { height: 38px; padding: 0 16px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 14px; color: var(--text-2); cursor: pointer; }
.avx-vtab.is-on { color: var(--indigo); border-bottom-color: var(--indigo); font-weight: 600; }
.avx-frame { border-radius: 10px; overflow: hidden; border: 1px solid #1B2446; background: linear-gradient(135deg, #1B2446 0%, #3A4A7A 55%, #6B7BB0 100%); }
.avx-frame.is-off { background: #F7F8FB; border-color: var(--border); }
.avx-fbar { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; background: rgba(255, 255, 255, 0.92); font-size: 11.5px; color: var(--text-2); }
.avx-dots { display: inline-flex; gap: 4px; } .avx-dots i { width: 8px; height: 8px; border-radius: 50%; background: #D5DAE6; }
.avx-addr { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.avx-addr .i { font-size: 11px; }
.avx-simtag { margin-left: auto; padding: 1px 7px; border-radius: 5px; background: var(--amber-bg); color: var(--amber-text); font-weight: 600; white-space: nowrap; }
.avx-fbody { position: relative; display: grid; place-items: center; min-height: 236px; padding: 30px 16px 16px; }
.avx-brand { position: absolute; left: 14px; top: 10px; display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 600; font-size: 14px; }
.avx-brand .av-pf { width: 20px; height: 20px; }
.avx-sheet { width: min(260px, 100%); padding: 16px; border-radius: 8px; background: #fff; text-align: center; box-shadow: 0 10px 30px rgba(10, 20, 50, 0.25); font-size: 12px; color: var(--text-2); }
.avx-sheet b { display: block; font-size: 14px; color: var(--text); }
.avx-sheet p { margin: 4px 0 10px; }
.avx-sheet .btn-primary { height: 34px; padding: 0 12px; font-size: 13px; }
.avx-sheet.is-plain { box-shadow: none; background: transparent; width: 100%; }
.avx-sheet.is-plain > .i { font-size: 30px; color: var(--muted); }
.avx-small { font-size: 12.5px !important; margin-top: 6px; }
.avx-code { display: flex; justify-content: center; gap: 6px; margin: 4px 0 8px; }
.avx-code i { width: 24px; height: 30px; border: 1px solid var(--border); border-radius: 6px; background: #F7F8FB; }
.avx-sim { font-size: 11.5px !important; color: var(--muted) !important; }
.avx-spin { display: inline-block; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--indigo-bg); border-top-color: var(--indigo); animation: avx-spin 1s linear infinite; }
@keyframes avx-spin { to { transform: rotate(360deg); } }
.avx-okmark { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-bottom: 6px; border-radius: 50%; background: var(--green); color: #fff; }
.avx-log { list-style: none; margin: 0; padding: 10px 12px; min-height: 236px; border-radius: 10px; background: #0F172A; color: #CBD5E1; font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow: auto; }
.avx-log time { color: #7DD3FC; }
.avx-vfoot { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 12px; color: var(--text-2); }
.avx-vfoot a { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--indigo); text-decoration: none; font-weight: 600; }
.avx-foot.is-run { padding: 14px 18px; }
.avx-foot.is-run .po-btn { height: 44px; }
.avx-pause.btn-outline { border-color: var(--indigo); }
.avx-cancel.btn-outline { border-color: #F5C2CB; color: #B42339; }
.avx-cancel.btn-outline:hover { background: #FDECEF; }
.avx-foot .po-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.avx-started { margin: 0 0 0 auto; text-align: right; font-size: 13px; color: var(--text-2); }
.avx-started small { display: block; font-size: 12px; color: var(--muted); }
@media (max-width: 1200px) { .avx-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .avx-viewer-card { grid-column: 1 / -1; } .avx-kv { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .avx-grid, .avx-strips, .avx-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) {
  .avx-kv > div, .avx-sum > div { grid-template-columns: 120px minmax(0, 1fr); }
  .avx-ch { flex-wrap: wrap; } .avx-ex-act { align-items: flex-start; }
  .avx-ex { flex-wrap: wrap; } .avx-ex .avw-link { margin-left: 34px; }
  .avx-started { margin: 0; text-align: left; flex-basis: 100%; }
}
/* ---------- Advertisement-12 · Verification and billing setup (avv- this screen; reuses the D11 crumb / card head / fact list avx-crumb / avx-ch / avx-kv, the D01 head avo-head / avo-data, po-card / po-chip / po-btn, av-pf, avw-strip) — plans/Advertisement-12.md, prototype/gen/advertisement12.css ---------- */
.avv-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.avv-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.avv-list, .avv-act { padding: 16px 18px 10px; min-width: 0; }
.avv-list h2, .avv-act h2, .avv-panel h2 { margin: 0; font-size: 19px; font-weight: 700; color: var(--text); }
.avv-list .avx-ch, .avv-act .avx-ch { align-items: center; }
.avv-tscroll { position: relative; overflow-x: auto; }
.avv-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--text); }
.avv-table th { text-align: left; font-size: 12.5px; font-weight: 500; color: var(--text-2); padding: 9px 8px; background: #F7F8FB; white-space: nowrap; }
.avv-table th:first-child { border-radius: 8px 0 0 8px; } .avv-table th:last-child { border-radius: 0 8px 8px 0; }
.avv-table td { padding: 11px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.avv-table td small { display: block; font-size: 12px; color: var(--muted); }
.avv-row { cursor: pointer; } .avv-row:hover td { background: #FAFBFE; }
.avv-row.is-on td { background: #F4F6FF; } .avv-row.is-on td:first-child { box-shadow: inset 3px 0 0 var(--indigo); }
.avv-row td:last-child { color: var(--muted); font-size: 18px; width: 24px; }
.avv-mark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--border-soft); background: var(--surface); }
.avv-mark .av-pf { width: 28px; height: 28px; }
.avv-acc b { display: block; font-size: 14px; } .avv-acc b a { color: inherit; text-decoration: none; } .avv-acc b a:hover { color: var(--indigo); }
.avv-id { font-variant-numeric: tabular-nums; color: var(--text-2) !important; }
.avv-state { display: inline-flex; align-items: flex-start; gap: 7px; font-size: 13px; }
.avv-state > .i { flex: none; font-size: 17px; margin-top: 1px; }
.avv-state b { display: block; font-weight: 600; white-space: nowrap; }
.avv-state small { white-space: nowrap; }
.avv-state.is-green > .i, .avv-state.is-green b { color: var(--green-text); }
.avv-state.is-blue > .i, .avv-state.is-blue b { color: var(--indigo); }
.avv-state.is-amber > .i, .avv-state.is-amber b { color: var(--amber-text); }
.avv-state.is-grey > .i, .avv-state.is-grey b { color: var(--text-2); }
.avv-table.is-act td { font-size: 13px; white-space: nowrap; }
.avv-empty { margin: 6px 2px 10px; font-size: 13.5px; color: var(--text-2); }
.avv-panel { padding: 18px; min-width: 0; }
.avv-ph { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; }
.avv-pmark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: #F4F6FF; }
.avv-pmark .av-pf { width: 30px; height: 30px; }
.avv-ph h2 { font-size: 22px; } .avv-ph small { display: block; font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; }
.avv-line { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 14px 0; padding: 10px 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); font-size: 13px; color: var(--text-2); }
.avv-line .po-btn { height: 36px; font-size: 13.5px; margin-left: auto; }
.avv-line .avw-link { margin-left: 4px; }
.avv-panel > .avw-strip { margin-bottom: 12px; } .avv-panel > .avw-strip .avw-link { margin-left: auto; }
.avv-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.avv-box { padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; min-width: 0; }
.avv-box h3 { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--text); }
.avv-big { display: flex; align-items: center; gap: 10px; margin: 4px 0 2px; font-size: 22px; }
.avv-big > .i { font-size: 30px; }
.avv-big.is-green { color: var(--green-text); } .avv-big.is-blue { color: var(--indigo); } .avv-big.is-amber { color: var(--amber-text); } .avv-big.is-grey { color: var(--text-2); }
.avv-sub { margin: 0 0 10px; font-size: 12.5px; color: var(--text-2); }
.avv-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.avv-tasks li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.avv-tasks li .i { font-size: 18px; } .avv-tasks small { font-size: 12px; color: var(--text-2); }
.avv-tasks li.is-green .i { color: var(--green); } .avv-tasks li.is-blue .i { color: var(--indigo); } .avv-tasks li.is-amber .i { color: var(--amber); }
.avv-tasks li.is-grey .i { color: var(--muted); }
.avv-surface { display: flex; flex-direction: column; gap: 10px; background: #FAFBFE; }
.avv-sh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; font-size: 13px; }
.avv-sh b { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .avv-sh .av-pf { width: 18px; height: 18px; }
.avv-simtag { padding: 2px 8px; border-radius: 6px; background: var(--track); color: var(--text-2); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.avv-preview { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border-soft); text-align: center; font-size: 12.5px; color: var(--text-2); }
.avv-preview b { font-size: 15px; color: var(--text); } .avv-preview p { margin: 0; }
.avv-bigmark { width: 30px; height: 30px; }
.avv-okmark { display: grid; place-items: center; width: 28px; height: 28px; margin-top: 4px; border-radius: 50%; background: var(--green-bg); color: var(--green); }
.avv-go.po-btn { height: 38px; justify-content: center; font-size: 14px; }
.avv-go:disabled, .avv-panel .po-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.avv-note { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12px; color: var(--text-2); } .avv-note .i { flex: none; font-size: 14px; margin-top: 1px; }
.avv-billing { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.avv-billing .avx-ch { flex-wrap: wrap; align-items: center; margin-bottom: 4px; } .avv-billing .avx-ch .po-btn { height: 34px; font-size: 13px; padding: 0 12px; white-space: nowrap; }
.avv-addr { display: block; flex-basis: 100%; }
.avv-money { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 12px; background: #F4F7FF; font-size: 12.5px; color: var(--text-2); }
.avv-money > .i { flex: none; font-size: 20px; color: var(--indigo); margin-top: 1px; }
.avv-money b { display: block; font-size: 13.5px; color: var(--text); }
.avv-money p { margin: 4px 0 10px; } .avv-money .po-btn { height: 36px; font-size: 13.5px; }
@media (max-width: 1200px) { .avv-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) {
  .avv-two, .avv-billing { grid-template-columns: minmax(0, 1fr); }
  .avv-ph { grid-template-columns: 48px minmax(0, 1fr); } .avv-ph .po-chip, .avv-ph .po-btn { grid-column: 2; justify-self: start; }
  .avv-line .po-btn { margin-left: 0; }
}
/* ---------- Advertisement-13 · Advertising identity mapping (avi- this screen and its drawer; reuses the D11 crumb / card head avx-crumb / avx-ch, the D01 head avo-head / avo-data, po-card / po-chip / po-btn, av-pf, avw-strip / avw-link) — plans/Advertisement-13.md, prototype/gen/advertisement13.css ---------- */
.avi-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.avi-accounts { padding: 16px 12px; min-width: 0; }
.avi-accounts h2, .avi-card h2 { margin: 0; font-size: 19px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
.avi-accounts h2 { padding: 0 6px 10px; font-size: 16px; }
.avi-card h2 .av-pf { width: 22px; height: 22px; }
.avi-alist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.avi-acc { display: grid; grid-template-columns: 30px minmax(0, 1fr) 10px; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; color: var(--text); text-decoration: none; }
.avi-acc:hover { background: #FAFBFE; }
.avi-acc.is-on { background: #F4F6FF; box-shadow: inset 3px 0 0 var(--indigo); }
.avi-acc .av-pf { width: 28px; height: 28px; }
.avi-acc b { display: block; font-size: 14px; } .avi-acc small { display: block; font-size: 12px; color: var(--text-2); }
.avi-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted-2); }
.avi-dot.is-green { background: var(--green); } .avi-dot.is-amber { background: var(--amber); } .avi-dot.is-red { background: var(--red); }
.avi-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.avi-card { padding: 16px 18px; min-width: 0; }
.avi-card > .avw-strip { margin-bottom: 12px; } .avi-card > .avw-strip .avw-link { margin-left: auto; }
.avi-tscroll { position: relative; overflow-x: auto; }
.avi-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--text); }
.avi-table th { text-align: left; font-size: 12.5px; font-weight: 500; color: var(--text-2); padding: 9px 8px; background: #F7F8FB; white-space: nowrap; }
.avi-table th:first-child { border-radius: 8px 0 0 8px; } .avi-table th:last-child { border-radius: 0 8px 8px 0; }
.avi-table td { padding: 12px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.avi-id { display: flex; align-items: flex-start; gap: 9px; min-width: 170px; }
.avi-id .av-pf { width: 24px; height: 24px; flex: none; }
.avi-id b { display: block; font-size: 14px; } .avi-id small { display: block; font-size: 12px; color: var(--text-2); }
.avi-sub { display: block; margin-top: 4px; font-size: 12px; color: var(--text-2); max-width: 220px; }
.avi-uses { display: flex; flex-wrap: wrap; gap: 4px; max-width: 250px; }
.avi-uses span { padding: 2px 7px; border-radius: 6px; background: var(--indigo-bg); color: var(--indigo); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.avi-warn { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 4px; font-size: 12px; color: var(--amber-text); font-weight: 600; }
.avi-acts { white-space: nowrap; text-align: right; }
.avi-acts .po-btn { height: 34px; padding: 0 12px; font-size: 13px; }
.avi-rm.btn-outline { border-color: var(--border); color: var(--text-2); }
.avi-rm.btn-outline:hover { border-color: #F5C2CB; color: #B42339; background: #FDECEF; }
.avi-empty { padding: 18px 4px; text-align: center; font-size: 14px; color: var(--text-2); }
.avi-empty p { margin: 0 0 10px; }
.avi-deps { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; }
.avi-deps li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; }
.avi-deps li span { color: var(--text-2); }
.avi-deps .avi-warn { margin: 0; }
.avi-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(16, 21, 47, 0.32); }
.avi-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 81; width: min(560px, 100vw); display: flex; flex-direction: column; background: var(--surface); box-shadow: -12px 0 40px rgba(16, 21, 47, 0.18); }
.avi-drawer[hidden], .avi-backdrop[hidden] { display: none; }
body.avi-lock { overflow: hidden; }
.avi-dh { display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 12px; border-bottom: 1px solid var(--border-soft); }
.avi-dh h2 { margin: 0; font-size: 21px; font-weight: 700; color: var(--text); }
.avi-dh p { margin: 4px 0 0; font-size: 13.5px; color: var(--text-2); }
.avi-x { margin-left: auto; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--text-2); font-size: 20px; cursor: pointer; }
.avi-x:hover { background: var(--track); }
.avi-db { flex: 1 1 auto; overflow-y: auto; padding: 14px 22px; display: flex; flex-direction: column; gap: 12px; }
.avi-info { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 10px; background: #F4F7FF; border: 1px solid #DCE3FF; font-size: 13px; color: var(--text-2); }
.avi-info .i { flex: none; font-size: 20px; color: var(--indigo); } .avi-info b { color: var(--indigo); }
.avi-cand { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; }
.avi-ct { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.avi-pl { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; color: var(--text); }
.avi-pl .av-pf { width: 22px; height: 22px; }
.avi-cs { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12.5px; }
.avi-cs i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); }
.avi-cs.is-green { color: var(--green-text); } .avi-cs.is-green i { background: var(--green); }
.avi-cs.is-amber { color: var(--amber-text); } .avi-cs.is-amber i { background: var(--amber); }
.avi-cs.is-blue { color: var(--indigo); } .avi-cs.is-blue i { background: var(--indigo); }
.avi-cs.is-red { color: #B42339; } .avi-cs.is-red i { background: var(--red); }
.avi-cs.is-grey { color: var(--text-2); }
.avi-manage { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--indigo); text-decoration: none; white-space: nowrap; }
.avi-cb { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 10px; }
.avi-thumb { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 12px; background: linear-gradient(135deg, #1B2446, #3B5BFD); color: #fff; font-weight: 700; font-size: 16px; }
.avi-cb b { display: block; font-size: 14px; color: var(--text); }
.avi-cb small { display: block; font-size: 12px; color: var(--text-2); }
.avi-cact .po-btn { height: 34px; padding: 0 12px; font-size: 13px; }
.avi-done { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--green-text); }
.avi-req { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--amber-bg); color: var(--amber-text); font-size: 12.5px; }
.avi-req .i { flex: none; font-size: 16px; margin-top: 1px; }
.avi-req.is-muted { background: #F7F8FB; color: var(--text-2); }
.avi-df { display: flex; justify-content: flex-end; padding: 12px 22px; border-top: 1px solid var(--border-soft); }
@media (max-width: 1100px) { .avi-grid { grid-template-columns: minmax(0, 1fr); } .avi-alist { flex-direction: row; flex-wrap: wrap; } .avi-acc { min-width: 220px; } }
@media (max-width: 768px) { .avi-cb { grid-template-columns: 44px minmax(0, 1fr); } .avi-thumb { width: 44px; height: 44px; } .avi-cact { grid-column: 2; } .avi-acc { min-width: 0; flex: 1 1 100%; } .avi-alist > li { flex: 1 1 100%; } .avi-ct { flex-wrap: wrap; } }
/* ---------- Advertisement-14 · Ad account details and restrictions (avd- this screen, and the modal frame .avd-modal / .avd-backdrop D16 reuses; reuses the D01 head pieces, po-card / po-chip / po-btn / pm-menu, av-pf, avw-strip, avv-money / avv-simtag) — plans/Advertisement-14.md, prototype/gen/advertisement14.css ---------- */
.avd-back, .avf-back { display: inline-flex; align-items: center; gap: 6px; margin: 2px 4px 8px; font-size: 14px; font-weight: 500; color: var(--indigo); text-decoration: none; }
.avd-back:hover, .avf-back:hover { text-decoration: underline; }
.avd-back .i, .avf-back .i { font-size: 16px; }
.avd-head { display: flex; align-items: center; gap: 16px; margin: 0 4px 14px; }
.avd-tile { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; border: 1px solid var(--border-soft); background: var(--surface); }
.avd-tile .av-pf { width: 38px; height: 38px; }
.avd-title { flex: 1 1 auto; min-width: 0; }
.avd-title h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.6px; color: var(--text); }
.avd-title h1 .po-chip { font-size: 13px; letter-spacing: 0; }
.avd-title p { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 4px 0 0; font-size: 15px; color: var(--text-2); }
.avd-id { font-variant-numeric: tabular-nums; }
.avd-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px; flex: none; }
.avd-btn.po-btn { height: 44px; padding: 0 16px; font-size: 14.5px; }
.avd-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.avd-menuwrap { position: relative; }
.avd-menuwrap .pm-menu { right: 0; left: auto; top: calc(100% + 6px); min-width: 250px; }
.avd-menuwrap .pm-menu button { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.avd-dots { width: 44px; height: 44px; }
.avd-tabs { display: flex; gap: 6px; margin: 0 0 14px; padding: 0 12px; border-radius: 12px; overflow-x: auto; }
.avd-tab { position: relative; display: inline-flex; align-items: center; height: 46px; padding: 0 14px; font-size: 14.5px; font-weight: 500; color: var(--text-2); text-decoration: none; white-space: nowrap; }
.avd-tab:hover { color: var(--text); }
.avd-tab.is-on { color: var(--indigo); font-weight: 600; }
.avd-tab.is-on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--indigo); }
.avd-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.avd-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.avd-card { padding: 16px 18px; min-width: 0; }
.avd-card h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 18px; font-weight: 700; color: var(--text); }
.avd-card h2 small { font-size: 14px; font-weight: 500; color: var(--text-2); }
.avd-ch { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.avd-ch h2 { margin: 0; } .avd-ch small { font-size: 12.5px; color: var(--muted); }
.avd-wide { max-width: 980px; }
.avd-kv { margin: 0; display: flex; flex-direction: column; }
.avd-kv > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; padding: 7px 0; font-size: 13.5px; }
.avd-kv dt { color: var(--text-2); }
.avd-kv dd { margin: 0; color: var(--text); font-weight: 500; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; overflow-wrap: anywhere; }
.avd-kv dd small { display: block; flex-basis: 100%; font-size: 12px; font-weight: 400; color: var(--text-2); }
.avd-kv dd > span > b { display: block; } .avd-kv dd > span > small { margin-top: 2px; }
.avd-kv dd .av-pf { width: 18px; height: 18px; }
.avd-kv.is-tight > div { grid-template-columns: 120px minmax(0, 1fr); padding: 6px 0; }
.avd-kv.is-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.avd-kv.is-two > div { border-bottom: 1px solid var(--border-soft); padding: 10px 0; }
.avd-copy { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.avd-copy:hover { background: var(--track); color: var(--indigo); }
.avd-dot { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.avd-dot i { width: 9px; height: 9px; border-radius: 50%; background: var(--muted-2); }
.avd-dot.is-green i { background: var(--green); } .avd-dot.is-amber i { background: var(--amber); } .avd-dot.is-red i { background: var(--red); }
.avd-dot.is-red { color: #B42339; } .avd-dot.is-green { color: var(--green-text); } .avd-dot.is-amber { color: var(--amber-text); }
.avd-more { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; padding: 0; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--indigo); text-decoration: none; cursor: pointer; }
.avd-more:hover { text-decoration: underline; }
.avd-tscroll { position: relative; overflow-x: auto; }
.avd-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--text); }
.avd-table th { text-align: left; font-size: 12.5px; font-weight: 500; color: var(--text-2); padding: 8px; background: #F7F8FB; white-space: nowrap; }
.avd-table th:first-child { border-radius: 8px 0 0 8px; } .avd-table th:last-child { border-radius: 0 8px 8px 0; }
.avd-table td { padding: 10px 8px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.avd-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.avd-table .is-muted { color: var(--muted); }
.avd-empty { margin: 4px 0; font-size: 13.5px; color: var(--text-2); }
.avd-fine { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; font-size: 12.5px; color: var(--text-2); }
.avd-fine .i { flex: none; font-size: 14px; margin-top: 1px; color: var(--muted); } .avd-fine a { color: var(--indigo); }
.avd-rest + .avd-rest { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.avd-rbox { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background: #FDECEF; border: 1px solid #F5C2CB; color: #B42339; font-size: 13.5px; }
.avd-rbox .i { flex: none; font-size: 24px; }
.avd-rbox b { display: block; font-size: 15px; color: var(--text); } .avd-rbox span { color: var(--text-2); }
.avd-rbox.is-soft { background: var(--amber-bg); border-color: #F7DDB0; color: var(--amber-text); }
.avd-appeal.po-btn { margin-top: 12px; height: 40px; font-size: 14px; }
.avd-appeal:disabled { opacity: 0.55; cursor: not-allowed; }
.avd-ok { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 14px; border-radius: 10px; background: #F1FAF5; font-size: 13.5px; color: var(--text-2); }
.avd-ok .i { flex: none; font-size: 24px; color: var(--green); } .avd-ok b { display: block; font-size: 15px; color: var(--text); }
.avd-sim { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 10px; background: #FAFBFE; border: 1px solid var(--border-soft); font-size: 13px; color: var(--text-2); }
.avd-sim p { margin: 0; }
.avd-simh { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.avd-simh b { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: 14px; }
.avd-big { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 12px; background: #F7F8FB; }
.avd-big > i { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--muted-2); box-shadow: 0 0 0 6px rgba(156, 163, 175, 0.18); }
.avd-big b { display: block; font-size: 22px; font-weight: 700; color: var(--text); } .avd-big span { font-size: 13px; color: var(--text-2); }
.avd-big.is-red { background: #FDECEF; } .avd-big.is-red > i { background: var(--red); box-shadow: 0 0 0 6px rgba(240, 84, 106, 0.18); }
.avd-big.is-green { background: #F1FAF5; } .avd-big.is-green > i { background: var(--green); box-shadow: 0 0 0 6px rgba(18, 185, 129, 0.16); }
.avd-big.is-amber { background: var(--amber-bg); } .avd-big.is-amber > i { background: var(--amber); box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.18); }
.avd-info { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: #F4F7FF; border: 1px solid #DCE3FF; font-size: 13px; color: var(--text-2); }
.avd-info > .i { flex: none; font-size: 20px; color: var(--indigo); } .avd-info > span { flex: 1 1 200px; }
.avd-info .po-btn { height: 38px; font-size: 13.5px; }
.avd-act { display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; align-items: center; gap: 12px; width: 100%; margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font: inherit; text-align: left; color: var(--text); cursor: pointer; }
.avd-act:hover { border-color: #C9D2FF; background: #FAFBFE; }
.avd-act:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.avd-act b { display: block; font-size: 14.5px; } .avd-act small { display: block; font-size: 12.5px; color: var(--text-2); }
.avd-act > .i { color: var(--muted); }
.avd-aic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #F4F6FF; color: var(--indigo); font-size: 20px; }
.avd-act.is-danger .avd-aic { background: #FDECEF; color: #B42339; }
.avd-h3 { margin: 16px 0 8px; font-size: 14.5px; font-weight: 700; color: var(--text); }
.avd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.avd-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; }
.avd-list b { display: block; } .avd-list small { display: block; font-size: 12px; color: var(--text-2); }
.avd-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.avd-feed li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; color: var(--text); }
.avd-feed small { display: block; font-size: 12px; color: var(--muted); }
.avd-av { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); font-size: 11.5px; font-weight: 700; }
/* the modal frame (D14's dialogs; D16's line / task dialogs) */
.avd-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(16, 21, 47, 0.32); }
.avd-modal { position: fixed; z-index: 81; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; border-radius: 16px; background: var(--surface); box-shadow: 0 24px 60px rgba(16, 21, 47, 0.24); }
.avd-modal[hidden], .avd-backdrop[hidden] { display: none; }
body.avd-lock { overflow: hidden; }
.avd-mh { display: flex; align-items: flex-start; gap: 12px; }
.avd-mh h2 { flex: 1 1 auto; margin: 0; font-size: 19px; font-weight: 700; color: var(--text); }
.avd-x { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--text-2); font-size: 20px; cursor: pointer; }
.avd-x:hover { background: var(--track); }
.avd-msub { margin: -6px 0 0; font-size: 13.5px; color: var(--text-2); }
.avd-impact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.avd-impact li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #F7F8FB; font-size: 13.5px; color: var(--text-2); }
.avd-impact .i { flex: none; font-size: 18px; margin-top: 1px; color: var(--indigo); } .avd-impact b { color: var(--text); }
.avd-mf { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.avd-mf .po-btn { height: 42px; }
.avd-modal .btn-danger { display: inline-flex; align-items: center; gap: 6px; padding: 0 18px; border: 0; border-radius: 10px; background: #E5303F; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.avd-modal .btn-danger:hover { background: #C9202F; } .avd-modal .btn-danger:disabled, .avd-mf .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 1280px) { .avd-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .avd-grid > .avd-col:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 768px) {
  .avd-grid, .avd-grid > .avd-col:last-child, .avd-kv.is-two { grid-template-columns: minmax(0, 1fr); }
  .avd-head { flex-wrap: wrap; } .avd-actions { justify-content: flex-start; width: 100%; }
  .avd-kv > div { grid-template-columns: 120px minmax(0, 1fr); }
}
/* ---------- Advertisement-15 · Campaign brief (avf- this screen; reuses the D01 head avo-head, the D14 back link, po-card / po-chip / po-btn, av-pf, av-thumb art, avw-strip) — plans/Advertisement-15.md, prototype/gen/advertisement15.css ---------- */
.avf-head { margin-bottom: 12px; }
.avf-saved { margin-left: 8px; font-size: 13px; color: var(--muted); }
.avf-strip { margin: 0 4px 12px; } .avf-strip .avw-link { margin-left: auto; white-space: nowrap; }
.avw-strip.is-green { background: #F1FAF5; color: var(--green-text); }
.avf-grid { display: grid; grid-template-columns: 228px minmax(0, 1fr) minmax(0, 440px); gap: 16px; align-items: start; }
.avf-steps { padding: 12px 10px; min-width: 0; }
.avf-steps ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; position: relative; }
.avf-steps li { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 8px; border-radius: 10px; }
.avf-steps li:not(:last-child)::after { content: ""; position: absolute; left: 26px; top: 50px; bottom: -14px; width: 1px; background: var(--border); }
.avf-steps li.is-now { background: #F4F6FF; }
.avf-n { position: relative; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-weight: 700; }
.avf-steps li.is-now .avf-n { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.avf-steps b { display: block; font-size: 14.5px; color: var(--text); } .avf-steps li.is-now b { color: var(--indigo); }
.avf-steps small { display: block; font-size: 12.5px; color: var(--text-2); }
.avf-steps a { color: inherit; text-decoration: none; } .avf-steps a:hover b { color: var(--indigo); text-decoration: underline; }
.avf-steps li.is-planned b, .avf-steps li.is-planned .avf-n { color: var(--muted); }
.avf-card { padding: 18px 20px; min-width: 0; }
.avf-card h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 19px; font-weight: 700; color: var(--text); }
.avf-card h2 .i { font-size: 20px; color: var(--indigo); }
.avf-lead { margin: 4px 0 12px; font-size: 13.5px; color: var(--text-2); }
.avf-form { display: flex; flex-direction: column; gap: 14px; }
.avf-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.avf-row.is-three { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1fr); }
.avf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.avf-field > label, .avf-field > legend { padding: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.avf-field .req { color: var(--red); } .avf-field .opt { font-weight: 400; color: var(--text-2); }
.avf-field input, .avf-field select, .avf-field textarea { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  font: inherit; font-size: 14px; color: var(--text); }
.avf-field textarea { padding: 9px 12px; resize: vertical; min-height: 64px; }
.avf-field input:focus, .avf-field select:focus, .avf-field textarea:focus { outline: 2px solid #C9D2FF; border-color: var(--indigo); }
.avf-field.is-invalid input, .avf-field.is-invalid select, .avf-field.is-invalid textarea, .avf-field.is-invalid .avf-chips { border-color: var(--red); }
.avf-err { font-size: 12.5px; color: #B42339; }
.avf-inline { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.avf-inline input { flex: 1 1 auto; min-height: 36px; }
.avf-measure { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12.5px; color: var(--text-2); }
.avf-measure .i { flex: none; font-size: 14px; margin-top: 1px; } .avf-measure a { color: var(--indigo); font-weight: 600; }
.avf-measure.is-amber { padding: 8px 10px; border-radius: 8px; background: var(--amber-bg); color: var(--amber-text); }
.avf-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 42px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.avf-chips:empty::before { content: "None yet"; font-size: 13px; color: var(--muted); align-self: center; }
.avf-chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px 0 10px; border-radius: 6px; background: var(--indigo-bg); color: var(--indigo); font-size: 13px; font-weight: 600; }
.avf-chip button { display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 5px; background: none; color: inherit; cursor: pointer; }
.avf-chip button:hover { background: rgba(59, 91, 253, 0.12); }
.avf-field select[data-avf-add] { min-height: 36px; font-size: 13px; color: var(--text-2); }
.avf-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.avf-tile { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; color: var(--text); text-decoration: none; min-width: 0; }
.avf-tile:hover { border-color: #C9D2FF; }
.avf-tile.is-on { border-color: var(--indigo); box-shadow: 0 0 0 2px #DCE3FF; }
.avf-tile input { position: absolute; top: 12px; left: 12px; z-index: 2; width: 20px; height: 20px; accent-color: var(--indigo); }
.avf-cover { position: relative; display: block; height: 104px; border-radius: 8px; overflow: hidden; background: var(--track); }
.avf-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avf-cover .ph-art { display: block; height: 100%; } .avf-cover .cp-art { height: 100%; border-radius: 0; box-shadow: none; cursor: inherit; }
.avf-cover .ph-mark { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.avf-play { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(16, 21, 47, 0.6); color: #fff; font-size: 12px; }
.avf-tile b { padding: 4px 2px 0; font-size: 13px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avf-tile small { padding: 0 2px 2px; font-size: 11.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avf-tile.is-upload { align-items: center; justify-content: center; text-align: center; border-style: dashed; min-height: 150px; color: var(--indigo); }
.avf-tile.is-upload .i { font-size: 24px; } .avf-tile.is-upload small { white-space: normal; }
.avf-count { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 13px; color: var(--text-2); }
.avf-count .i { font-size: 17px; color: var(--green); } .avf-count.is-over .i { color: var(--red); }
.avf-none { margin: 0; font-size: 13.5px; color: var(--text-2); } .avf-none a { color: var(--indigo); font-weight: 600; }
.avf-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.avf-ch { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.avf-accts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.avf-accts a { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 16px; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 10px; color: var(--text); text-decoration: none; }
.avf-accts a:hover { border-color: #C9D2FF; background: #FAFBFE; }
.avf-accts .av-pf { width: 28px; height: 28px; } .avf-accts b { display: block; font-size: 14px; } .avf-accts small { display: block; font-size: 12px; color: var(--text-2); }
.avf-accts a > .i { color: var(--muted); }
.avf-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.avf-st i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); }
.avf-st.is-green { color: var(--green-text); } .avf-st.is-green i { background: var(--green); }
.avf-st.is-amber { color: var(--amber-text); } .avf-st.is-amber i { background: var(--amber); }
.avf-st.is-red { color: #B42339; } .avf-st.is-red i { background: var(--red); }
.avf-scope { margin: 10px 0 0; display: flex; flex-direction: column; }
.avf-scope > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; padding: 6px 0; font-size: 13.5px; }
.avf-scope dt { display: flex; align-items: center; gap: 8px; color: var(--text-2); } .avf-scope dt .i { font-size: 15px; color: var(--muted); }
.avf-scope dd { margin: 0; color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 1440px) { .avf-grid { grid-template-columns: 210px minmax(0, 1fr) minmax(0, 360px); } .avf-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1280px) {
  .avf-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
  .avf-steps { grid-column: 1 / -1; } .avf-steps ol { flex-direction: row; overflow-x: auto; } .avf-steps li { min-width: 190px; } .avf-steps li::after { display: none; }
}
@media (max-width: 1100px) { .avf-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) {
  .avf-row, .avf-row.is-three { grid-template-columns: minmax(0, 1fr); }
  .avf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .avf-scope > div { grid-template-columns: 130px minmax(0, 1fr); }
  .avf-head { flex-wrap: wrap; } .avf-head .avo-actions { flex-wrap: wrap; }
}
/* ---------- Advertisement-16 · Media plan and launch calendar (avp- this screen; reuses the D01 head avo-head / avo-data, the D14 modal frame avd-modal / avd-backdrop / avd-menuwrap, po-card / po-chip / po-btn / pm-menu, av-pf, av-thumb, avw-strip) — plans/Advertisement-16.md, prototype/gen/advertisement16.css ---------- */
.avp-banner { margin: 0 4px 12px; } .avp-banner .avw-link { margin-left: auto; white-space: nowrap; }
.avw-strip.is-grey { background: #F4F5F8; color: var(--text-2); }
.avp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.avp-main, .avp-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.avp-card { padding: 16px 18px; min-width: 0; }
.avp-card h2 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 19px; font-weight: 700; color: var(--text); }
.avp-ch { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 12px; }
.avp-ch > h2 { margin-right: 4px; }
.avp-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.avp-pill { height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer; }
.avp-pill:hover { border-color: #C9D2FF; } .avp-pill.is-on { background: var(--indigo-bg); border-color: #C9D2FF; color: var(--indigo); font-weight: 600; }
.avp-span { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13.5px; color: var(--text); white-space: nowrap; }
.avp-span .i { color: var(--muted); }
.avp-add.po-btn { height: 36px; font-size: 13.5px; }
.avp-tscroll { position: relative; overflow-x: auto; }
.avp-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--text); }
.avp-table thead th { text-align: left; font-size: 12px; font-weight: 500; color: var(--text-2); padding: 9px 5px; background: #F7F8FB; white-space: nowrap; }
.avp-table thead th:first-child { border-radius: 8px 0 0 8px; } .avp-table thead th:last-child { border-radius: 0 8px 8px 0; }
.avp-table td { padding: 10px 5px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.avp-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.avp-table tfoot th, .avp-table tfoot td { padding: 12px 8px; font-size: 13.5px; font-weight: 600; text-align: left; background: #FAFBFE; white-space: nowrap; }
.avp-table tfoot .num { text-align: right; }
.avp-table tr[hidden] { display: none; }
.avp-camp { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.avp-table .po-chip { white-space: nowrap; } .avp-table td.avp-dates { white-space: nowrap; }
.avp-camp .av-thumb { width: 64px; height: 42px; }
.avp-camp b { display: block; font-size: 13.5px; } .avp-camp small { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-2); }
.avp-camp small .av-pf { width: 14px; height: 14px; }
.avp-issue { color: var(--amber-text) !important; font-weight: 600; } .avp-issue .i { font-size: 13px; }
.avp-pf { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.avp-asset b { display: block; font-size: 13px; max-width: 124px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .avp-asset small { font-size: 12px; color: var(--text-2); }
.avp-rdots { position: relative; width: 34px; text-align: right; }
.avp-rdots .po-dots { width: 30px; }
.avp-rdots .pm-menu { right: 0; left: auto; min-width: 230px; }
.avp-rdots .pm-menu button, .avp-pmenu button { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.avp-root .pm-menu [aria-disabled="true"] { opacity: 0.55; }
.avp-root .pm-menu .is-danger { color: #B42339; }
.avp-pmenu { max-height: 360px; overflow-y: auto; }
.avp-filtered, .avp-muted { margin: 8px 0 0; font-size: 13px; color: var(--text-2); }
.avp-none { padding: 18px 4px; text-align: center; font-size: 14px; color: var(--text-2); } .avp-none p { margin: 0 0 10px; }
.avp-seg { display: inline-flex; padding: 3px; border-radius: 9px; background: #F4F5F8; }
.avp-seg button { height: 30px; padding: 0 14px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer; }
.avp-seg button.is-on { background: var(--surface); color: var(--indigo); font-weight: 600; box-shadow: 0 1px 3px rgba(16, 21, 47, 0.08); }
.avp-month { margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--text); }
.avp-nav { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-2); text-decoration: none; }
.avp-nav:hover { border-color: #C9D2FF; color: var(--indigo); }
.avp-zone { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-2); }
.avp-cscroll { position: relative; overflow-x: auto; }
.avp-cgrid { --avp-days: 21; min-width: 760px; display: flex; flex-direction: column; }
.avp-chead, .avp-crow { display: grid; grid-template-columns: 150px repeat(var(--avp-days), minmax(26px, 1fr)); align-items: stretch; }
.avp-chead { border-bottom: 1px solid var(--border-soft); }
.avp-cl { grid-column: 1; display: flex; flex-direction: column; justify-content: center; padding: 6px 8px 6px 0; min-width: 0; }
.avp-cl b { font-size: 12.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avp-cl small { font-size: 11.5px; color: var(--text-2); }
.avp-day { position: relative; display: flex; flex-direction: column; align-items: center; padding: 18px 0 6px; font-size: 11px; color: var(--text-2); }
.avp-day em { position: absolute; top: 2px; left: 2px; font-style: normal; font-size: 11px; font-weight: 600; color: var(--text); white-space: nowrap; }
.avp-day b { font-size: 13px; color: var(--text); } .avp-day.is-we { color: var(--muted); }
.avp-day.is-today { background: var(--indigo-bg); border-radius: 8px 8px 0 0; } .avp-day.is-today b { color: var(--indigo); }
.avp-crow { position: relative; min-height: 48px; border-bottom: 1px solid var(--border-soft); }
.avp-cell { grid-row: 1; } .avp-cell.is-we { background: #FAFBFD; } .avp-cell.is-today { background: #F4F6FF; }
.avp-bar { grid-row: 1; align-self: center; z-index: 1; display: flex; align-items: center; gap: 8px; height: 30px; margin: 0 2px; padding: 0 10px; border-radius: 8px; overflow: hidden;
  background: #E7EEFF; color: #1F3A9E; font-size: 12px; white-space: nowrap; }
.avp-bar b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; } .avp-bar span { opacity: 0.8; }
.avp-bar.is-google_ads { background: #E3F6EC; color: #11734F; } .avp-bar.is-tiktok { background: #F1E8FF; color: #5B2DA6; }
.avp-bar.is-cut-l { border-top-left-radius: 0; border-bottom-left-radius: 0; } .avp-bar.is-cut-r { border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* backlog 5.16: a movable bar drags (the bar moves the flight, the grip at its right edge the end) */
.avp-bar.is-movable { position: relative; cursor: grab; touch-action: none; padding-right: 16px; } .avp-bar.is-movable:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.avp-bar.is-dragging { cursor: grabbing; z-index: 3; box-shadow: 0 4px 14px rgba(31, 58, 158, 0.22); } .avp-bar.is-saving { opacity: 0.6; pointer-events: none; }
.avp-grip { position: absolute; top: 0; right: 0; bottom: 0; width: 10px; cursor: ew-resize; border-left: 2px solid rgba(31, 58, 158, 0.25); }
.avp-drag-note { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; font-size: 12.5px; color: var(--text-2); } .avp-drag-note .i { flex: none; margin-top: 2px; }
.avp-crow.is-offer { min-height: 40px; }
.avp-offer { grid-row: 1; align-self: center; justify-self: center; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #FDECEF; color: #B42339; font-size: 14px; }
.avp-cempty { margin: 12px 0; font-size: 13px; color: var(--text-2); }
.avp-cal[hidden] { display: none; }
.avp-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.avp-events li { display: grid; grid-template-columns: 120px 90px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.avp-edate { color: var(--text-2); font-variant-numeric: tabular-nums; } .avp-events li.is-offer-ends b { color: #B42339; }
.avp-state { font-size: 11.5px; letter-spacing: 0.04em; }
.avp-form { display: flex; flex-direction: column; gap: 12px; }
.avp-f { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; border: 0; min-width: 0; }
.avp-f > span, .avp-f > legend { font-size: 13px; font-weight: 600; color: var(--text-2); padding: 0; }
.avp-f .req { color: var(--red); }
.avp-f input, .avp-f select, .avp-f textarea { width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 14px; color: var(--text); }
.avp-f textarea { padding: 9px 12px; resize: vertical; }
.avp-f small { font-size: 12px; color: var(--muted); }
.avp-f.is-invalid input, .avp-f.is-invalid select { border-color: var(--red); }
.avp-err { color: #B42339 !important; }
.avp-ver { margin: 0; font-size: 14px; color: var(--text); font-weight: 500; }
.avp-f p { margin: 0; } .avp-f p a { display: inline-flex; align-items: center; gap: 4px; color: var(--indigo); font-weight: 600; text-decoration: none; }
.avp-form .po-btn { align-self: flex-start; height: 38px; }
.avp-form .po-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.avp-frow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.avp-frow.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.avp-srcs { display: flex; flex-direction: column; gap: 6px; max-height: 190px; overflow-y: auto; }
.avp-srcs label { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 8px; cursor: pointer; }
.avp-srcs input { width: 18px; height: 18px; min-height: 0; accent-color: var(--indigo); flex: none; }
.avp-srcs b { display: block; font-size: 13px; } .avp-srcs small { display: block; font-size: 11.5px; }
.avp-linkbtn { margin-left: auto; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--indigo); cursor: pointer; }
.avp-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.avp-tasks li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); }
.avp-tasks input { width: 18px; height: 18px; accent-color: var(--green); }
.avp-tasks label b { display: block; font-size: 13.5px; font-weight: 500; color: var(--text); } .avp-tasks label small { display: block; font-size: 12px; color: var(--text-2); }
.avp-tasks li.is-done label b { text-decoration: line-through; color: var(--muted); }
.avp-tstate { font-size: 12.5px; font-weight: 600; color: var(--indigo); text-decoration: none; white-space: nowrap; } .avp-tstate.is-done { color: var(--text-2); }
.avp-tip { display: inline-flex; color: var(--muted); font-size: 15px; cursor: help; }
.avp-est { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 4px; }
.avp-est b { display: block; font-size: 22px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .avp-est small { font-size: 12.5px; color: var(--text-2); }
.avp-note { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: #F4F7FF; border: 1px solid #DCE3FF; font-size: 12.5px; color: var(--text-2); }
.avp-note > .i { color: var(--indigo); font-size: 15px; } .avp-note > span { flex: 1 1 180px; } .avp-note .po-link { white-space: nowrap; }
.avp-modal { width: min(640px, calc(100vw - 32px)); }
@media (max-width: 1280px) { .avp-grid { grid-template-columns: minmax(0, 1fr); } .avp-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }
@media (max-width: 768px) {
  .avp-frow, .avp-frow.is-three { grid-template-columns: minmax(0, 1fr); }
  .avp-span, .avp-month { margin-left: 0; }
  .avp-events li { grid-template-columns: 100px minmax(0, 1fr); } .avp-events li > span:last-child { grid-column: 2; }
}

/* ---------- Advertisement-17 · Campaign type and capabilities (avk- this screen; reuses the D01 head avo-head, the D15 stepper avf-steps / avf-n and back link avf-back, po-card / po-chip / po-btn, av-pf, avw-strip) — plans/Advertisement-17.md, prototype/gen/advertisement17.css ---------- */
.avk-strip { margin: 0 4px 12px; } .avk-strip .avw-link { margin-left: auto; white-space: nowrap; }
.avk-head .sub b { color: var(--text); font-weight: 600; }
.avk-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
.avk-steps li.is-done .avf-n { background: var(--green-bg); border-color: #BFE7D4; color: var(--green-text); }
.avk-steps li.is-done .avf-n .i { font-size: 14px; }
.avk-main { padding: 18px 20px 0; min-width: 0; display: flex; flex-direction: column; }
.avk-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; align-items: start; }
.avk-intro h2 { margin: 0 0 4px; font-size: 20px; font-weight: 700; color: var(--text); }
.avk-intro p { margin: 0; font-size: 13.5px; color: var(--text-2); }
.avk-pick { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; }
.avk-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.avk-l { font-size: 12px; color: var(--muted); }
.avk-field select { height: 36px; border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 13.5px; background: var(--surface); color: var(--text); min-width: 0; }
.avk-acct { display: flex; align-items: center; gap: 8px; min-width: 0; }
.avk-acct .av-pf { width: 26px; height: 26px; flex: none; }
.avk-acct > span:not(.po-chip) { min-width: 0; } .avk-acct b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avk-acct small, .avk-hint { display: block; font-size: 12px; color: var(--text-2); } .avk-acct .po-chip { margin-left: auto; flex: none; }
.avk-goal b { display: block; font-size: 14px; color: var(--text); }
.avk-goal small { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-2); } .avk-goal small .i { font-size: 12px; }
.avk-read { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 12.5px; color: var(--green-text); } .avk-read .i { font-size: 14px; }
.avk-main .avk-strip { margin: 12px 0 0; }
.avk-sec { margin: 18px 0 10px; font-size: 15px; font-weight: 700; color: var(--text); } .avk-sec span { font-weight: 500; color: var(--muted); }
.avk-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.avk-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; min-width: 0; }
.avk-card:hover { border-color: #C9D2FF; }
.avk-card.is-on { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo) inset; background: #FBFCFF; }
.avk-card input { position: absolute; opacity: 0; pointer-events: none; }
.avk-card:focus-within { outline: 2px solid #C9D2FF; outline-offset: 2px; }
.avk-ch { display: grid; grid-template-columns: 18px 34px minmax(0, 1fr); gap: 8px; align-items: start; }
.avk-radio { width: 18px; height: 18px; margin-top: 8px; border: 2px solid #C3C8D6; border-radius: 50%; background: var(--surface); }
.avk-card.is-on .avk-radio { border-color: var(--indigo); box-shadow: inset 0 0 0 4px var(--surface); background: var(--indigo); }
.avk-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--indigo-bg); color: var(--indigo); }
.avk-ic .i { font-size: 17px; }
.avk-ch b { display: block; font-size: 14.5px; color: var(--text); } .avk-ch small { display: block; font-size: 12.5px; color: var(--text-2); line-height: 1.35; }
.avk-block { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--border-soft); }
.avk-block em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); }
.avk-li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12.5px; color: var(--text); }
.avk-li .i { font-size: 13px; color: var(--green); } .avk-li.is-off { color: var(--muted); } .avk-li.is-off .i { color: var(--muted-2); }
.avk-block:not(.is-goals) .avk-li .i { color: var(--muted); }
.avk-li.is-none { color: var(--muted); }
.avk-tag, .avk-have, .avk-later { font-style: normal; font-size: 11.5px; padding: 1px 6px; border-radius: 6px; }
.avk-tag.is-green, .avk-have { background: var(--green-bg); color: var(--green-text); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avk-tag.is-amber { background: var(--amber-bg); color: var(--amber-text); }
.avk-later { background: #F4F5F8; color: var(--text-2); }
.avk-map { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--indigo); text-decoration: none; } .avk-map:hover { text-decoration: underline; }
.avk-opens { margin-top: auto; font-size: 12px; color: var(--muted); }
.avk-cards.is-muted { gap: 10px; }
.avk-na { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px; border: 1px dashed var(--border); border-radius: 12px; background: #FAFBFC; }
.avk-na .avk-ic { background: #F0F1F5; color: var(--muted); }
.avk-na b { display: block; font-size: 13.5px; color: var(--text-2); } .avk-na small { display: block; font-size: 12.5px; color: var(--text-2); line-height: 1.35; }
.avk-none { padding: 16px; border: 1px dashed var(--border); border-radius: 12px; font-size: 13.5px; color: var(--text-2); } .avk-none p { margin: 0 0 6px; }
.avk-other { margin: 14px 0 0; font-size: 13px; color: var(--text-2); }
.avk-other summary { cursor: pointer; font-weight: 600; color: var(--text); } .avk-other p { margin: 6px 0 0; } .avk-other small { color: var(--muted); }
.avk-foot { position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; margin: 18px -20px 0; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--surface); border-radius: 0 0 14px 14px; }
.avk-foot p { display: flex; align-items: center; gap: 6px; margin: 0 auto 0 0; font-size: 12.5px; color: var(--text-2); } .avk-foot p .i { color: var(--indigo); flex: none; }
.avk-foot .po-btn { height: 40px; min-width: 110px; justify-content: center; }
@media (max-width: 1280px) { .avk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .avk-top { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1024px) {
  .avk-grid { grid-template-columns: minmax(0, 1fr); }
  .avk-steps ol { flex-direction: row; overflow-x: auto; } .avk-steps li { min-width: 170px; } .avk-steps li::after { display: none; }
}
@media (max-width: 768px) {
  .avk-cards { grid-template-columns: minmax(0, 1fr); } .avk-pick { grid-template-columns: minmax(0, 1fr); }
  .avk-foot { flex-wrap: wrap; } .avk-foot p { flex-basis: 100%; }
}
/* ---------- Advertisement-18 · Campaign manager (avn- this screen, and the panel pieces avn-x / avn-kv / avn-hist / avn-form D19 reuses; reuses the D01 head avo-head / avo-data / avo-period, the D14 menu wrap avd-menuwrap, po-card / po-chip / po-btn / pm-menu, av-pf, av-thumb, avw-strip) — plans/Advertisement-18.md, prototype/gen/advertisement18.css ---------- */
.avn-grid { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 16px; align-items: start; }
.avn-grid.no-panel { grid-template-columns: minmax(0, 1fr); }
.avn-list { padding: 14px 16px; min-width: 0; }
.avn-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.avn-search { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; max-width: 420px; height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.avn-search .i { color: var(--muted); } .avn-search input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 13.5px; background: none; color: var(--text); }
.avn-select { height: 38px; padding: 0 30px 0 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13.5px; color: var(--text); background: var(--surface); }
.avn-count { margin-left: auto; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
/* backlog 5.18: the View menu, the Columns button and the save-view dialog */
.avn-viewbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.avn-viewbtn { height: 42px; gap: 8px; max-width: 100%; } .avn-viewbtn > span { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.15; }
.avn-viewbtn small { font-size: 11px; color: var(--muted); font-weight: 500; } .avn-viewbtn b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.avn-colbtn { height: 42px; gap: 6px; }
.avn-vmenu { min-width: 250px; } .avn-vmenu a[aria-current="true"] { color: var(--indigo); font-weight: 600; } .avn-vmenu small { color: var(--muted); font-weight: 500; }
.avn-vgroup { display: block; padding: 8px 12px 2px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); }
.avn-vsep { display: block; height: 1px; margin: 6px 0; background: var(--border-soft); }
.avn-vmenu [aria-disabled="true"] { opacity: 0.5; }
.avn-vform { display: flex; flex-direction: column; gap: 12px; }
.avn-vf { display: flex; flex-direction: column; gap: 6px; } .avn-vf > span { font-size: 14px; font-weight: 600; color: var(--text); }
.avn-vf input { height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); }
.avn-verr { font-size: 12.5px; color: #B42339; } .avn-verr[hidden] { display: none; }
.avn-vck { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text); cursor: pointer; } .avn-vck input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--indigo); }
.avn-vck small { display: block; font-size: 12.5px; color: var(--text-2); }
.avn-vsum { display: flex; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--indigo-bg-2); font-size: 13px; color: var(--text-2); } .avn-vsum[hidden] { display: none; }
.avn-vsum .i { flex: none; margin-top: 2px; color: var(--indigo); }
.avn-acct { color: var(--text-2); white-space: nowrap; }
.avn-tscroll { position: relative; overflow-x: auto; }
.avn-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--text); }
.avn-table thead th { text-align: left; padding: 9px 8px; font-size: 12px; font-weight: 500; color: var(--text-2); background: #F7F8FB; white-space: nowrap; }
.avn-table thead th:first-child { border-radius: 8px 0 0 8px; } .avn-table thead th:last-child { border-radius: 0 8px 8px 0; }
.avn-table td { padding: 8px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.avn-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.avn-table td.is-na { color: var(--muted-2); }
.avn-row { cursor: pointer; } .avn-row:hover td { background: #FAFBFE; }
.avn-row.is-on td { background: #F4F6FF; } .avn-row.is-on td:first-child { box-shadow: inset 3px 0 0 var(--indigo); }
.avn-row.is-campaign td { height: 58px; } .avn-row.is-group td, .avn-row.is-ad td { height: 50px; }
.avn-row[hidden] { display: none; }
.avn-name { display: flex; align-items: center; gap: 8px; min-width: 240px; padding-left: calc(var(--avn-depth, 0) * 26px); }
.avn-name > span:last-child { min-width: 0; }
.avn-link { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: none; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avn-row.is-group .avn-link, .avn-row.is-ad .avn-link { font-weight: 500; }
.avn-link:hover { color: var(--indigo); text-decoration: underline; } .avn-link.is-match { background: #FFF5D6; border-radius: 3px; }
.avn-name small { display: block; font-size: 12px; color: var(--text-2); }
.avn-tog { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.avn-tog:hover { background: #EEF0F5; } .avn-tog.is-empty { cursor: default; } .avn-tog.is-empty:hover { background: none; }
.avn-tog[aria-expanded="false"] .i { transform: rotate(-90deg); }
.avn-mark { width: 24px; height: 24px; flex: none; }
.avn-gic { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 7px; background: #F0F2F8; color: var(--muted); }
.avn-name .av-thumb { width: 52px; height: 34px; flex: none; }
.avn-sub { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.avn-budget { white-space: nowrap; } .avn-budget small { display: block; font-size: 11.5px; color: var(--muted); }
.avn-budget.is-child { font-size: 12px; color: var(--text-2); white-space: normal; max-width: 110px; }
.avn-table tfoot th, .avn-table tfoot td { padding: 12px 8px; font-size: 13.5px; font-weight: 600; background: #FAFBFE; white-space: nowrap; text-align: left; }
.avn-table tfoot .num { text-align: right; }
.avn-dots { position: relative; width: 36px; text-align: right; } .avn-dots .pm-menu { right: 0; left: auto; min-width: 220px; }
.avn-root .pm-menu button { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.avn-note { display: flex; align-items: center; gap: 6px; margin: 10px 2px 0; font-size: 12px; color: var(--muted); } .avn-note .i { color: var(--indigo); }
/* the detail panel */
.avn-panel { position: sticky; top: 12px; display: flex; flex-direction: column; max-height: calc(100vh - 150px); min-width: 0; padding: 0; overflow: hidden; }
.avn-ph { display: flex; align-items: flex-start; gap: 10px; padding: 16px 16px 10px; }
.avn-pmark { width: 34px; height: 34px; flex: none; margin-top: 2px; }
.avn-pt { flex: 1; min-width: 0; } .avn-pt h2 { margin: 0; font-size: 19px; font-weight: 700; color: var(--text); line-height: 1.25; overflow-wrap: anywhere; }
.avn-pt p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; } .avn-pt p + p { margin-top: 0; font-variant-numeric: tabular-nums; }
.avn-open.po-btn { height: 30px; margin-top: 8px; padding: 0 10px; font-size: 12.5px; white-space: nowrap; } .avn-open[disabled] { opacity: 0.55; cursor: not-allowed; }
.avn-pmenu { right: 0; left: auto; min-width: 240px; }
.avn-x { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 8px; color: var(--muted); text-decoration: none; }
.avn-x:hover { background: #F0F2F7; color: var(--text); }
.avn-strip { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 16px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.avn-strip > div { min-width: 0; } .avn-strip small { display: block; font-size: 11.5px; color: var(--muted); } .avn-strip b { display: block; font-size: 12.5px; color: var(--text); }
.avn-strip > div:first-child small { margin-top: 3px; }
.avn-tabs { display: flex; gap: 4px; margin: 12px 16px 0; border-bottom: 1px solid var(--border); overflow-x: auto; }
.avn-tab { height: 38px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 13.5px; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.avn-tab.is-on { border-bottom-color: var(--indigo); color: var(--indigo); font-weight: 600; }
.avn-pbody { flex: 1; overflow-y: auto; padding: 12px 16px 16px; }
.avn-h { margin: 6px 0 8px; font-size: 14px; font-weight: 700; color: var(--text); } .avn-h span { font-weight: 500; color: var(--muted); }
.avn-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.avn-tiles div { padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; min-width: 0; }
.avn-tiles small { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avn-tiles b { display: block; font-size: 17px; color: var(--text); }
.avn-meta { margin: 8px 0 14px; font-size: 12px; color: var(--text-2); line-height: 1.45; }
.avn-kv { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 12.5px; }
.avn-kv dt { color: var(--muted); } .avn-kv dd { margin: 0; color: var(--text); word-break: break-word; }
.avn-kv a { color: var(--indigo); text-decoration: none; } .avn-kv a .i { font-size: 12px; margin-left: 3px; }
.avn-kids, .avn-plans, .avn-hist { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.avn-kids li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; }
.avn-kids a { flex: 1; min-width: 0; color: inherit; text-decoration: none; } .avn-kids b { display: block; font-size: 13px; } .avn-kids small { font-size: 12px; color: var(--text-2); }
.avn-plans li { display: flex; align-items: center; gap: 8px; } .avn-plans a { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.avn-plans b { display: block; font-size: 13px; color: var(--indigo); } .avn-plans small { font-size: 12px; color: var(--text-2); }
.avn-hist li { font-size: 12.5px; color: var(--text); line-height: 1.4; } .avn-hist small { display: block; color: var(--muted); font-size: 11.5px; }
.avn-muted { margin: 4px 0 10px; font-size: 12.5px; color: var(--text-2); }
.avn-creative { display: flex; flex-direction: column; gap: 10px; }
.avn-cover { display: block; aspect-ratio: 1.91 / 1; border-radius: 10px; overflow: hidden; background: #111827; }
.avn-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avn-cover .ph-art { width: 100%; height: 100%; }
.avn-form { display: flex; flex-direction: column; gap: 10px; }
.avn-f { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-2); min-width: 0; }
.avn-f input, .avn-f select { height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13.5px; color: var(--text); background: var(--surface); min-width: 0; }
.avn-frow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.avn-err { color: #B42339; font-size: 12px; }
.avn-strip2 { margin: 0; }
@media (max-width: 1280px) { .avn-grid { grid-template-columns: minmax(0, 1fr); } .avn-panel { position: static; max-height: none; } }
@media (max-width: 768px) {
  .avn-search { max-width: none; flex-basis: 100%; } .avn-select { flex: 1 1 140px; } .avn-count { margin-left: 0; }
  .avn-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .avn-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .avn-kv { grid-template-columns: 110px minmax(0, 1fr); } .avn-ph { flex-wrap: wrap; }
}
/* ---------- Advertisement-19 · Drafts and change plans (avq- this screen; reuses the D18 panel pieces avn-x / avn-kv / avn-hist / avn-form / avn-f, the D01 head avo-head, the D14 modal frame avd-modal / avd-backdrop / avd-menuwrap, po-card / po-chip / po-btn / pm-menu, av-pf, av-thumb, avw-strip) — plans/Advertisement-19.md, prototype/gen/advertisement19.css ---------- */
.avq-grid { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 16px; align-items: start; }
.avq-grid.no-panel { grid-template-columns: minmax(0, 1fr); }
.avq-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.avq-list, .avq-setup { padding: 14px 16px; min-width: 0; }
.avq-tabs { display: inline-flex; flex-wrap: wrap; gap: 0; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.avq-tab { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-right: 1px solid var(--border); font-size: 13.5px; color: var(--text-2); text-decoration: none; background: var(--surface); }
.avq-tab:last-child { border-right: 0; } .avq-tab:hover { background: #F7F8FB; }
.avq-tab span { font-size: 12px; color: var(--muted); }
.avq-tab.is-on { background: var(--indigo-bg); color: var(--indigo); font-weight: 600; box-shadow: inset 0 -2px 0 var(--indigo); } .avq-tab.is-on span { color: var(--indigo); }
.avq-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.avq-search { display: flex; align-items: center; gap: 8px; flex: 1 1 180px; max-width: 220px; height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; }
.avq-search .i { color: var(--muted); } .avq-search input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 13.5px; background: none; }
.avq-select { height: 38px; padding: 0 26px 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; color: var(--text); background: var(--surface); max-width: 150px; }
.avq-tscroll { position: relative; overflow-x: auto; }
.avq-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--text); }
.avq-table thead th { text-align: left; padding: 9px 8px; font-size: 12px; font-weight: 500; color: var(--text-2); background: #F7F8FB; white-space: nowrap; }
.avq-table thead th:first-child { border-radius: 8px 0 0 8px; } .avq-table thead th:last-child { border-radius: 0 8px 8px 0; }
.avq-table td { height: 62px; padding: 8px 6px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.avq-row { cursor: pointer; } .avq-row:hover td { background: #FAFBFE; }
.avq-row.is-on td { background: #F4F6FF; } .avq-row.is-on td:first-child { box-shadow: inset 3px 0 0 var(--indigo); }
.avq-ver { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.avq-name { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: none; } .avq-name:hover { color: var(--indigo); text-decoration: underline; }
.avq-table td small { display: block; font-size: 12px; color: var(--text-2); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avq-targets { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .avq-targets .av-pf { width: 20px; height: 20px; }
.avq-count { margin-left: 4px; padding: 2px 8px; border-radius: 6px; background: #F0F2F8; font-size: 12px; color: var(--text-2); }
.avq-author { display: flex; align-items: center; gap: 8px; white-space: nowrap; } .avq-author small { max-width: 120px !important; }
.avq-av { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); font-size: 12px; font-weight: 700; }
.avq-author b { display: block; font-size: 13px; font-weight: 600; }
.avq-drift { display: flex !important; white-space: nowrap; align-items: center; gap: 4px; margin-top: 3px; color: var(--amber-text) !important; font-weight: 600; } .avq-drift .i { font-size: 12px; }
.avq-act { position: relative; white-space: nowrap; text-align: right; }
.avq-view.po-btn { height: 32px; padding: 0 12px; font-size: 13px; }
.avq-act .avd-menuwrap { display: inline-block; position: relative; vertical-align: middle; }
.avq-rmenu, .avq-fmenu { right: 0; left: auto; min-width: 220px; }
.avq-root .pm-menu button { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.avq-root .pm-menu .is-danger { color: #B42339; }
.avq-pager { display: flex; align-items: center; gap: 14px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.avq-ch h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); } .avq-ch p { margin: 3px 0 10px; font-size: 12.5px; color: var(--text-2); }
.avq-drafts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.avq-drafts li { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; min-width: 0; }
.avq-drafts .av-thumb { width: 70px; height: 46px; flex: none; }
.avq-dt { flex: 1; min-width: 0; } .avq-dt b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avq-dt small { display: block; font-size: 11.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avq-drafts .po-btn { height: 30px; padding: 0 12px; font-size: 12.5px; }
.avq-muted { margin: 4px 0; font-size: 12.5px; color: var(--text-2); }
/* the drawer */
.avq-drawer { position: sticky; top: 12px; display: flex; flex-direction: column; max-height: calc(100vh - 150px); min-width: 0; padding: 0; overflow: hidden; }
.avq-dh { display: flex; align-items: flex-start; gap: 10px; padding: 16px 16px 8px; }
.avq-dic { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 9px; background: var(--indigo-bg); color: var(--indigo); }
.avq-dt2 { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.avq-dt2 h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--text); }
.avq-dt2 p { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--text-2); }
.avq-vchip { padding: 2px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; color: var(--text-2); }
.avq-dtabs { display: flex; gap: 2px; margin: 4px 16px 0; border-bottom: 1px solid var(--border); overflow-x: auto; }
.avq-dtab { height: 38px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 13.5px; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.avq-dtab.is-on { border-bottom-color: var(--indigo); color: var(--indigo); font-weight: 600; }
.avq-dbody { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; }
.avq-dbody > section { display: flex; flex-direction: column; gap: 12px; } .avq-dbody > section[hidden] { display: none; }
.avq-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #F3D9A8; border-radius: 10px; background: var(--amber-bg); }
.avq-bic { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; color: var(--amber-line); } .avq-bic .i { font-size: 22px; }
.avq-banner b { display: block; font-size: 13.5px; color: var(--text); } .avq-banner p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-2); }
.avq-banner > div { flex: 1; min-width: 0; } .avq-banner .po-btn { height: 34px; font-size: 13px; white-space: nowrap; background: var(--surface); }
.avq-change, .avq-target { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.avq-change header, .avq-target header { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.avq-change header .av-pf, .avq-target header .av-pf { width: 28px; height: 28px; flex: none; }
.avq-change header > span:nth-child(2), .avq-target header > span:nth-child(2) { flex: 1; min-width: 0; }
.avq-change header b, .avq-target header b { display: block; font-size: 13.5px; color: var(--text); } .avq-target header b a { color: inherit; text-decoration: none; }
.avq-change header small, .avq-target header small { display: block; font-size: 12px; color: var(--text-2); }
.avq-cmp { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.avq-cmp th, .avq-cmp td { padding: 7px 10px; border-top: 1px solid var(--border-soft); text-align: left; vertical-align: middle; }
.avq-cmp thead th { background: #F7F8FB; font-weight: 500; color: var(--text-2); font-size: 12px; }
.avq-cmp tbody th { font-weight: 500; color: var(--text-2); width: 30%; }
.avq-cmp tr.is-changed td:last-child { background: #F1F4FF; color: var(--indigo); font-weight: 600; }
.avq-cmp tr.is-drift td:nth-child(2) { background: #FFF6E5; } .avq-cmp td small { display: block; font-size: 11.5px; color: var(--amber-text); font-weight: 500; }
.avq-in { width: 100%; height: 32px; padding: 0 8px; border: 1px solid #C9D2FF; border-radius: 7px; font: inherit; font-size: 12.5px; color: var(--text); background: var(--surface); }
.avq-creatives { list-style: none; margin: 0; padding: 8px 12px 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border-top: 1px solid var(--border-soft); }
.avq-creatives li { display: flex; align-items: center; gap: 8px; min-width: 0; } .avq-creatives .av-thumb { width: 64px; height: 42px; flex: none; }
.avq-creatives b { display: block; font-size: 12.5px; } .avq-creatives small { font-size: 11.5px; color: var(--text-2); }
.avq-dfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface); }
.avq-dfoot .po-btn { height: 38px; }
.avq-dfoot .avd-menuwrap { position: relative; } .avq-dfoot #avq-submit, .avq-dfoot #avq-approve, .avq-dfoot #avq-execute { margin-left: auto; }
.avq-dfoot [aria-disabled="true"], .avq-dfoot button[disabled] { opacity: 0.55; cursor: not-allowed; }
.avq-fmenu { bottom: 100%; top: auto; }
.avq-block { display: flex; align-items: center; gap: 5px; flex-basis: 100%; justify-content: flex-end; font-size: 12px; color: var(--text-2); } .avq-block .i { color: var(--indigo); }
.avq-modal { width: min(560px, calc(100vw - 32px)); }
.avq-rc { display: flex; flex-direction: column; gap: 10px; padding: 4px 20px 8px; max-height: 60vh; overflow-y: auto; }
.avq-rcf { margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.avq-rcf legend { padding: 0 4px; font-size: 13px; font-weight: 600; color: var(--text); } .avq-rcf p { margin: 0 0 6px; font-size: 12.5px; color: var(--text-2); }
.avq-rcf label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); padding: 3px 0; }
.avq-cform { padding: 4px 20px 8px; }
@media (max-width: 1280px) { .avq-grid { grid-template-columns: minmax(0, 1fr); } .avq-drawer { position: static; max-height: none; } }
@media (max-width: 768px) {
  .avq-tabs { display: flex; overflow-x: auto; flex-wrap: nowrap; } .avq-search { max-width: none; flex-basis: 100%; } .avq-select { flex: 1 1 140px; max-width: none; }
  .avq-creatives { grid-template-columns: minmax(0, 1fr); } .avq-banner { flex-wrap: wrap; }
}
/* ---------- Advertisement-20 · Offer and landing page (avlp- this screen; avas- the Assets switch shared with D21 / D22; reuses avo-head, avn-form / avn-f / avn-frow / avn-err / avn-x, the D19 list pieces, po-card / po-chip / po-btn, av-pf, avw-strip) — plans/Advertisement-20.md, prototype/gen/advertisement20.css ---------- */
.avas-nav { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 14px; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.avas-item { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 7px; font-size: 13.5px; color: var(--text-2); text-decoration: none; }
.avas-item .i { font-size: 15px; } .avas-item:hover { background: #F4F6FB; color: var(--text); }
.avas-item.is-on { background: var(--indigo-bg); color: var(--indigo); font-weight: 600; }
.avlp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 16px; align-items: start; }
.avlp-grid.no-panel { grid-template-columns: minmax(0, 1fr); }
.avlp-list { padding: 12px 14px; min-width: 0; }
.avlp-tscroll { position: relative; overflow-x: auto; }
.avlp-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--text); }
.avlp-table thead th { text-align: left; padding: 9px 8px; font-size: 12px; font-weight: 500; color: var(--text-2); background: #F7F8FB; white-space: nowrap; }
.avlp-table thead th:first-child { border-radius: 8px 0 0 8px; } .avlp-table thead th:last-child { border-radius: 0 8px 8px 0; }
.avlp-table td { height: 58px; padding: 8px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.avlp-row { cursor: pointer; } .avlp-row:hover td { background: #FAFBFE; }
.avlp-row.is-on td { background: #F4F6FF; } .avlp-row.is-on td:first-child { box-shadow: inset 3px 0 0 var(--indigo); }
.avlp-name { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: none; } .avlp-name:hover { color: var(--indigo); text-decoration: underline; }
.avlp-table td small { display: block; font-size: 12px; color: var(--text-2); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avlp-offer { max-width: 200px; font-size: 12.5px; color: var(--text-2); }
.avlp-table .po-chip { white-space: nowrap; }
.avlp-drawer { position: sticky; top: 12px; display: flex; flex-direction: column; max-height: calc(100vh - 150px); min-width: 0; padding: 0; overflow: hidden; }
.avlp-dh { display: flex; align-items: flex-start; gap: 10px; padding: 16px 16px 6px; }
.avlp-dic { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 9px; background: var(--indigo-bg); color: var(--indigo); }
.avlp-dt { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.avlp-dt h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--text); }
.avlp-dt p { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--text-2); }
.avlp-dbody { flex: 1; overflow-y: auto; padding: 8px 16px 12px; display: flex; flex-direction: column; gap: 14px; }
.avlp-url { position: relative; display: flex; } .avlp-url input { flex: 1; padding-right: 36px !important; }
.avlp-open { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: inline-grid; place-items: center; width: 26px; height: 26px; color: var(--indigo); }
.avlp-sec { display: flex; flex-direction: column; gap: 8px; }
.avlp-sh { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.avlp-sh h3 { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--text); }
.avlp-sh small { font-size: 12px; color: var(--text-2); }
.avlp-check.po-btn { margin-left: auto; height: 32px; padding: 0 12px; font-size: 12.5px; }
.avlp-check[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.avlp-capture { padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: linear-gradient(135deg, #0F1A3D, #1E3A8A); color: #fff; }
.avlp-capture.is-demo { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08); }
.avlp-capture.is-empty, .avlp-capture.is-failed { background: #F7F8FB; color: var(--text); }
.avlp-capture.is-failed { border-color: #F5C2CB; background: #FFF6F7; }
.avlp-capture b { display: block; font-size: 15px; } .avlp-capture p { margin: 4px 0 0; font-size: 12.5px; }
.avlp-capture.is-empty p, .avlp-capture.is-failed p { color: var(--text-2); }
.avlp-cap-url { display: flex; align-items: center; gap: 6px; margin: 0 0 6px !important; font-size: 11.5px !important; opacity: 0.8; word-break: break-all; }
.avlp-cap-title { font-size: 18px !important; font-weight: 700; }
.avlp-cap-desc { opacity: 0.9; }
.avlp-cap-h { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; opacity: 0.92; }
.avlp-note, .avlp-muted { margin: 0; display: flex; align-items: flex-start; gap: 6px; font-size: 12px; color: var(--text-2); }
.avlp-mm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.avlp-mm h4 { margin: 0 0 6px; font-size: 12.5px; font-weight: 700; color: var(--text); } .avlp-mm h4 span { font-weight: 500; color: var(--muted); }
.avlp-checks, .avlp-sugg, .avlp-used { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.avlp-checks li { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; }
.avlp-checks b { display: block; font-weight: 500; color: var(--text); } .avlp-checks small { display: block; font-size: 11.5px; color: var(--text-2); word-break: break-word; }
.avlp-ci { flex: none; font-size: 16px; line-height: 1; } .avlp-checks .is-ok .avlp-ci { color: var(--green); } .avlp-checks .is-fail .avlp-ci { color: var(--red); } .avlp-checks .is-unknown .avlp-ci { color: var(--muted); }
.avlp-sugg li { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; color: var(--text); } .avlp-sugg .i { flex: none; color: var(--amber-line); margin-top: 2px; }
.avlp-used li { display: flex; align-items: center; gap: 8px; font-size: 13px; } .avlp-used .av-pf { width: 22px; height: 22px; } .avlp-used a { flex: 1; color: var(--text); text-decoration: none; font-weight: 600; }
.avlp-dfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface); }
.avlp-dfoot .po-btn { height: 38px; } .avlp-dfoot #avlp-save { margin-left: auto; }
@media (max-width: 1280px) { .avlp-grid { grid-template-columns: minmax(0, 1fr); } .avlp-drawer { position: static; max-height: none; } }
@media (max-width: 768px) { .avlp-mm { grid-template-columns: minmax(0, 1fr); } .avas-nav { display: flex; overflow-x: auto; flex-wrap: nowrap; } .avas-item { white-space: nowrap; } }
/* Advertisement-20 / 21 / 22 entry points on D15 (the brief) and D18 (the Creative tab) */
.avf-assetlink { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12.5px; color: var(--indigo); text-decoration: none; font-weight: 600; }
.avf-assetlink .i { font-size: 14px; } .avf-libline { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.avn-copy { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
/* ---------- Advertisement-21 · Creative library (avcr- this screen; reuses avas-nav, avo-head, the D19 tabs / search / selects avq-tab / avq-search / avq-select / avq-dtabs, avn-kv / avn-form / avn-f / avn-x, the D14 modal frame avd-modal / avd-backdrop / avd-menuwrap, po-card / po-chip / po-btn / pm-menu, av-pf, avw-strip) — plans/Advertisement-21.md, prototype/gen/advertisement21.css ---------- */
.avcr-for { margin: -4px 0 12px; } .avcr-for a { color: var(--indigo); font-weight: 600; }
.avcr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 16px; align-items: start; }
.avcr-grid.no-panel { grid-template-columns: minmax(0, 1fr); }
.avcr-list { padding: 14px 16px; min-width: 0; }
.avcr-tabs { margin-bottom: 12px; }
.avcr-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.avcr-search { max-width: 210px; }
.avcr-bar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 10px 0 12px; font-size: 12.5px; color: var(--text-2); }
.avcr-views { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.avcr-vbtn { display: inline-grid; place-items: center; width: 34px; height: 30px; color: var(--muted); } .avcr-vbtn.is-on { background: var(--indigo-bg); color: var(--indigo); }
.avcr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 14px; }
.avcr-card { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; min-width: 0; }
.avcr-card:hover { border-color: #C9D2FF; } .avcr-card.is-on { border-color: var(--indigo); box-shadow: 0 0 0 2px rgba(59, 91, 253, 0.15); }
/* backlog 5.17: selection, the bulk bar and the collections menu */
.avcr-card { position: relative; } .avcr-card.is-picked { border-color: var(--indigo); background: #FAFBFF; }
.avcr-pick { position: absolute; z-index: 2; top: 16px; left: 16px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 4px rgba(16, 21, 47, 0.18); cursor: pointer; } .avcr-pick input { width: 18px; height: 18px; accent-color: var(--indigo); cursor: pointer; }
.avcr-ck { width: 36px; } .avcr-ck input { width: 17px; height: 17px; accent-color: var(--indigo); }
.avcr-bar .avcr-gap, .avcr-bulk .avcr-gap { flex: 1 1 auto; }
.avcr-colbtn { height: 36px; gap: 6px; font-size: 13.5px; } .avcr-colbtn span { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avcr-colmenu { min-width: 230px; } .avcr-colmenu a[aria-current="true"] { color: var(--indigo); font-weight: 600; } .avcr-colmenu small { color: var(--muted); }
.avcr-mgroup { display: block; padding: 8px 12px 2px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: var(--muted); }
.avcr-msep { display: block; height: 1px; margin: 6px 0; background: var(--border-soft); }
.avcr-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--indigo-bg); }
.avcr-bulk[hidden] { display: none; } .avcr-bulk b { font-size: 13.5px; color: var(--indigo); } .avcr-bulk .po-btn { height: 36px; font-size: 13px; background: var(--surface); }
.avcr-linkbtn { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 500; color: var(--indigo); cursor: pointer; }
.avcr-incol { color: var(--indigo); }
.avcr-media { position: relative; display: block; border-radius: 9px; overflow: hidden; }
.avcr-cover { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 9px; overflow: hidden; background: #0F1A3D; }
.avcr-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .avcr-cover .ph-art { position: absolute; inset: 0; display: block; }
.avcr-cover .cp-art { border-radius: 0; box-shadow: none; cursor: default; }
.avcr-play { position: absolute; left: 8px; bottom: 8px; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 12px; }
.avcr-state { position: absolute; top: 8px; right: 8px; } .avcr-state.is-grey { background: #fff; }
.avcr-newer { position: absolute; left: 8px; top: 8px; padding: 2px 7px; border-radius: 6px; background: rgba(255, 255, 255, 0.92); color: var(--amber-text); font-size: 11px; font-weight: 600; }
.avcr-cname { margin: 2px 0 0; font-size: 15px; font-weight: 700; line-height: 1.25; } .avcr-cname a { color: var(--text); text-decoration: none; }
.avcr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.avcr-chips span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; color: var(--text-2); }
.avcr-gone { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 12px; color: #B42339; }
.avcr-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; margin: 0; font-size: 12.5px; }
.avcr-facts dt { color: var(--muted); } .avcr-facts dd { margin: 0; text-align: right; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avcr-cact { display: flex; gap: 8px; margin-top: auto; } .avcr-cact .po-btn { flex: 1; height: 36px; font-size: 13px; }
.avcr-tscroll { position: relative; overflow-x: auto; }
.avcr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.avcr-table thead th { text-align: left; padding: 9px 8px; font-size: 12px; font-weight: 500; color: var(--text-2); background: #F7F8FB; white-space: nowrap; }
.avcr-table td { padding: 8px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; white-space: nowrap; }
.avcr-trow { cursor: pointer; } .avcr-trow.is-on td { background: #F4F6FF; }
.avcr-tname { display: flex; align-items: center; gap: 10px; } .avcr-tname .avcr-cover { width: 64px; flex: none; } .avcr-tname a { color: var(--text); font-weight: 600; text-decoration: none; }
.avcr-muted { margin: 4px 0; font-size: 12.5px; color: var(--text-2); }
/* the detail pane */
.avcr-pane { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 150px); min-width: 0; padding: 16px; overflow-y: auto; }
.avcr-ph { display: flex; align-items: flex-start; gap: 12px; } .avcr-ph > .avcr-cover { width: 150px; flex: none; }
.avcr-pt { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.avcr-pt h2 { margin: 0; font-size: 19px; font-weight: 700; color: var(--text); }
.avcr-pact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .avcr-pact .po-btn { height: 40px; }
.avcr-pact #avcr-use { flex: 1 1 160px; justify-content: center; } .avcr-pact .avd-menuwrap { position: relative; }
.avcr-menu { right: 0; left: auto; min-width: 250px; }
.avcr-root .pm-menu button { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.avcr-approve { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #F3D9A8; border-radius: 10px; background: var(--amber-bg); }
.avcr-approve > span { display: inline-flex; align-items: center; gap: 6px; flex: 1; color: var(--amber-text); } .avcr-approve small { font-size: 12px; color: var(--text-2); }
.avcr-approve .po-btn { height: 34px; font-size: 13px; background: var(--surface); } .avcr-approve .btn-primary.po-btn { background: var(--indigo); }
.avcr-ptabs { margin: 0; }
.avcr-pbody > section { display: flex; flex-direction: column; gap: 10px; } .avcr-pbody > section[hidden] { display: none; }
.avcr-cons { display: flex; gap: 10px; padding: 12px 14px; border: 1px solid #DCE3FF; border-radius: 10px; background: #F6F8FF; font-size: 12.5px; }
.avcr-cons .i { flex: none; color: var(--indigo); font-size: 18px; } .avcr-cons b { display: block; font-size: 13px; color: var(--text); } .avcr-cons p { margin: 3px 0 0; color: var(--text-2); }
.avcr-adapts b { font-size: 12.5px; } .avcr-adapts ul { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; } .avcr-adapts small { margin-left: 6px; color: var(--muted); }
.avcr-usage, .avcr-posts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.avcr-usage li, .avcr-posts li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; font-size: 13px; }
.avcr-usage .av-pf { width: 24px; height: 24px; flex: none; } .avcr-usage li > span:nth-child(2) { flex: 1; min-width: 0; }
.avcr-usage b { display: block; } .avcr-usage small { display: block; font-size: 11.5px; color: var(--text-2); }
.avcr-posts a { flex: 1; color: var(--text); font-weight: 600; text-decoration: none; } .avcr-pv { font-size: 12px; color: var(--text-2); }
.avcr-rights textarea, .avcr-adform textarea { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13.5px; color: var(--text); resize: vertical; }
.avcr-rights .po-btn { align-self: flex-start; height: 38px; }
.avcr-pfoot { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.avcr-pfoot .po-btn.is-danger { height: 40px; border-color: #F5C2CB; color: #B42339; white-space: nowrap; }
.avcr-pfoot .po-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.avcr-pfoot small { font-size: 12px; color: var(--text-2); }
.avcr-modal { width: min(620px, calc(100vw - 32px)); }
.avcr-lib { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; padding: 4px 2px; }
.avcr-libi { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-size: 13px; }
.avcr-libi:has(input:checked) { border-color: var(--indigo); background: #F4F6FF; } .avcr-libi.is-off { opacity: 0.6; cursor: default; }
.avcr-libi .avcr-cover { width: 84px; flex: none; } .avcr-libi b { display: block; } .avcr-libi small { display: block; font-size: 11.5px; color: var(--text-2); }
.avcr-why { color: var(--amber-text) !important; font-size: 12px; margin: 0; }
.avcr-mnote { margin: 8px 0; }
.avcr-useform, .avcr-adform { padding: 4px 2px 8px; }
.avo-actions [aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
@media (max-width: 1280px) { .avcr-grid { grid-template-columns: minmax(0, 1fr); } .avcr-pane { position: static; max-height: none; } }
@media (max-width: 768px) {
  .avcr-search { max-width: none; flex-basis: 100%; } .avcr-tools .avq-select { flex: 1 1 140px; max-width: none; }
  .avcr-cards { grid-template-columns: minmax(0, 1fr); } .avcr-ph { flex-wrap: wrap; } .avcr-ph > .avcr-cover { width: 100%; }
  .avcr-pfoot { flex-wrap: wrap; } .avcr-content { display: none; }
}
/* ---------- Advertisement-22 · AI ad copy (avcp- this screen; reuses avas-nav, avo-head, avn-form / avn-f, the D14 modal frame avd-modal / avd-backdrop / avd-menuwrap, po-card / po-chip / po-btn / pm-menu, av-pf, avw-strip) — plans/Advertisement-22.md, prototype/gen/advertisement22.css ---------- */
.avcp-hact { align-items: center; }
.avcp-prov select { height: 42px; padding: 0 30px 0 12px; border: 1px solid var(--border); border-radius: 9px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); max-width: 260px; }
.avcp-src { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.avcp-tabs { display: flex; gap: 4px; margin: 0 0 12px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.avcp-tab { height: 40px; display: inline-flex; align-items: center; padding: 0 14px; border-bottom: 2px solid transparent; font-size: 14px; color: var(--text-2); text-decoration: none; white-space: nowrap; }
.avcp-tab.is-on { border-bottom-color: var(--indigo); color: var(--indigo); font-weight: 600; }
.avcp-root > .avw-strip { margin: 0 0 12px; } .avcp-root > .avw-strip a { color: var(--indigo); font-weight: 600; }
.avcp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.avcp-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.avcp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.avcp-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; min-width: 0; }
.avcp-ch { display: flex; align-items: center; gap: 8px; } .avcp-ch h2 { margin: 0; font-size: 16.5px; font-weight: 700; color: var(--indigo); }
.avcp-ch .avd-menuwrap { position: relative; margin-left: auto; }
.avcp-menu { right: 0; left: auto; min-width: 180px; }
.avcp-root .pm-menu button { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.avcp-f { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--text); min-width: 0; }
.avcp-f > span { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.avcp-f input, .avcp-f select, .avcp-f textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13.5px; font-weight: 400; color: var(--text); background: var(--surface); }
.avcp-f input, .avcp-f select { height: 38px; } .avcp-f textarea { resize: vertical; line-height: 1.45; }
.avcp-count { font-size: 11.5px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.avcp-count.is-over_recommended { color: var(--amber-text); } .avcp-count.is-over_max { color: #B42339; font-weight: 700; }
.avcp-hint { min-height: 0; font-size: 11.5px; font-weight: 500; color: var(--amber-text); } .avcp-hint:empty { display: none; } .avcp-hint.is-err { color: #B42339; }
.avcp-prev { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; background: #0F1A3D; }
.avcp-prev img, .avcp-prev .ph-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.avcp-prev .cp-art { border-radius: 0; box-shadow: none; }
.avcp-ov { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 2px; padding: 12px; background: linear-gradient(transparent, rgba(8, 14, 38, 0.85)); color: #fff; }
.avcp-ov b { font-size: 16px; line-height: 1.2; } .avcp-ov small { font-size: 11.5px; opacity: 0.9; } .avcp-ov em { font-style: normal; font-size: 11px; font-weight: 700; opacity: 0.85; }
.avcp-sim { position: absolute; top: 8px; right: 8px; padding: 2px 7px; border-radius: 6px; background: rgba(255, 255, 255, 0.9); color: var(--text-2); font-size: 11px; font-weight: 600; }
.avcp-saved { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--green-text); }
.avcp-refine { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid #DCE3FF; border-radius: 10px; background: #F6F8FF; } .avcp-refine[hidden] { display: none; }
.avcp-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.avcp-pick { padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font: inherit; font-size: 12px; cursor: pointer; }
.avcp-pick.is-on { border-color: var(--indigo); background: var(--indigo-bg); color: var(--indigo); font-weight: 600; }
.avcp-refine input { height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; }
.avcp-refine .po-btn { align-self: flex-end; height: 34px; font-size: 13px; }
.avcp-cf { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; } .avcp-cf .po-btn { height: 40px; justify-content: center; }
.avcp-cf .btn-primary[disabled] { opacity: 0.5; cursor: not-allowed; }
.avcp-run { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid #DCE3FF; border-radius: 10px; background: #F6F8FF; font-size: 13px; }
.avcp-run ol { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 12.5px; } .avcp-run li.is-on { color: var(--indigo); font-weight: 600; }
.avcp-run small { margin-left: auto; color: var(--text-2); }
.avcp-spin { width: 16px; height: 16px; border: 2px solid #C9D2FF; border-top-color: var(--indigo); border-radius: 50%; animation: avcp-spin 0.9s linear infinite; }
@keyframes avcp-spin { to { transform: rotate(360deg); } }
.avcp-saved-list, .avcp-history { padding: 14px 16px; }
.avcp-assets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.avcp-assets > li { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; }
.avcp-ah { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; } .avcp-ah .av-pf { width: 22px; height: 22px; } .avcp-ah b { font-size: 14px; }
.avcp-ah small { flex-basis: 100%; font-size: 12px; color: var(--text-2); }
.avcp-vchip { padding: 1px 7px; border: 1px solid var(--border); border-radius: 6px; font-size: 11.5px; color: var(--text-2); }
.avcp-assets p { margin: 0; font-size: 13px; color: var(--text); white-space: pre-line; } .avcp-assets .avcp-desc { color: var(--text-2); }
.avcp-meta { font-size: 12px; color: var(--text-2); } .avcp-assets details { font-size: 12px; color: var(--text-2); }
.avcp-aact { display: flex; gap: 8px; } .avcp-aact .po-btn { height: 34px; font-size: 13px; }
.avcp-tscroll { position: relative; overflow-x: auto; }
.avcp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.avcp-table th { text-align: left; padding: 8px; font-size: 12px; font-weight: 500; color: var(--text-2); background: #F7F8FB; white-space: nowrap; }
.avcp-table td { padding: 8px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; } .avcp-table td small { display: block; font-size: 11.5px; color: #B42339; white-space: normal; }
/* the right rail */
.avcp-rail { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.avcp-rc { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.avcp-rh { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .avcp-rh h3 { margin: 0; display: inline-flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 700; color: var(--text); }
.avcp-rh h3 .i { font-size: 13px; color: var(--muted); }
.avcp-media { display: flex; gap: 12px; align-items: center; } .avcp-mthumb { width: 120px; aspect-ratio: 16 / 10; flex: none; border-radius: 8px; overflow: hidden; background: #0F1A3D; }
.avcp-mthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avcp-media b a { color: var(--text); text-decoration: none; font-size: 14px; } .avcp-media small { display: block; font-size: 12px; color: var(--text-2); margin: 2px 0; }
.avcp-ready { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; } .avcp-ready::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.avcp-ready.is-green { color: var(--green-text); } .avcp-ready.is-amber { color: var(--amber-text); } .avcp-ready.is-grey, .avcp-ready.is-red { color: var(--text-2); }
.avcp-pick-sel { max-width: none !important; width: 100%; }
.avcp-bt { margin: 0; padding: 10px 12px; border-radius: 8px; background: #F4F6FB; font-size: 13px; color: var(--text-2); line-height: 1.45; } .avcp-bt b { display: block; color: var(--text); }
.avcp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.avcp-tags span { padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 12.5px; color: var(--text); background: #F7F8FB; }
.avcp-tags.is-locked span { border-color: #DCE3FF; background: #F4F6FF; }
.avcp-muted { margin: 0; font-size: 12.5px; color: var(--text-2); }
.avcp-modal { width: min(560px, calc(100vw - 32px)); } .avcp-useform { padding: 4px 2px 8px; }
.avcp-why { color: var(--amber-text); font-size: 12px; margin: 0; }
.avcp-hact [aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
@media (max-width: 1400px) { .avcp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .avcp-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) { .avcp-cards { grid-template-columns: minmax(0, 1fr); } .avcp-hact { flex-wrap: wrap; } .avcp-src { white-space: normal; } }
/* ---------- Advertisement-23 · Ad copy editor (avce- this screen; avap- the simulated ad cards shared with D24 / D25; reuses avas-nav, avo-head, the D22 counters / picks / run strip avcp-count / avcp-pick / avcp-run / avcp-f, po-card / po-chip / po-btn / pm-menu, av-pf, avw-strip) — plans/Advertisement-23.md, prototype/gen/advertisement23.css ---------- */
.avce-hact { align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.avce-hact .avo-btn .i { font-size: 16px; }
.avo-actions .btn-outline.is-off { opacity: 0.5; cursor: not-allowed; }
.avce-hact [aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.avce-popwrap, .avce-trwrap { position: relative; display: inline-flex; }
.avce-pop { position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; width: 300px; display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 32px rgba(15, 26, 61, 0.14); font-size: 13px; }
.avce-pop[hidden] { display: none; } .avce-pop small { color: var(--text-2); font-size: 11.5px; }
.avce-pop input, .avce-pop select { height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; background: var(--surface); }
.avce-pop .po-btn { height: 34px; font-size: 13px; align-self: flex-end; }
.avce-trb { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.avce-menu { right: 0; left: auto; min-width: 200px; }
.avce-root .pm-menu button, .avce-root .pm-menu a { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--text); text-decoration: none; }
.avce-state { display: inline-flex; align-items: flex-start; gap: 7px; font-size: 12.5px; color: var(--text-2); line-height: 1.3; }
.avce-state i { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: var(--green, #12B981); flex: none; }
.avce-state small { display: block; font-size: 11.5px; color: var(--muted); }
.avce-state.is-dirty i { background: var(--amber, #F59E0B); } .avce-state.is-dirty { color: var(--amber-text); font-weight: 600; }
.avce-root > .avw-strip, .avce-root > .avcp-run { margin: 0 0 12px; } .avce-root .avw-strip a { color: var(--indigo); font-weight: 600; }
.avce-grid { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(330px, 1fr) minmax(340px, 1.12fr); gap: 16px; align-items: start; }
.avce-form, .avce-center, .avce-rc { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.avce-form h2, .avce-center h2, .avce-rh h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
.avce-prov { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.avce-prov .av-pf { width: 28px; height: 28px; flex: none; } .avce-prov b { display: block; font-size: 14px; } .avce-prov small { display: block; font-size: 12px; color: var(--text-2); }
.avce-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.avce-row2 .avcp-f > span .i { font-size: 12px; color: var(--muted); }
.avce-scope { margin: 0; font-size: 12.5px; color: var(--text-2); } .avce-scope b { color: var(--text); }
.avce-note { margin: 0; font-size: 12px; color: var(--text-2); line-height: 1.45; } .avce-note a { color: var(--indigo); }
.avce-fields { display: flex; flex-direction: column; gap: 12px; }
.avce-ok { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.avce-ok.is-ok { color: var(--green-text); } .avce-ok.is-ok::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #12B981 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") center / 12px no-repeat; }
.avce-ok.is-over_recommended { color: var(--amber-text); } .avce-ok.is-over_max, .avce-ok.is-err { color: #B42339; font-weight: 600; } .avce-ok:empty { display: none; }
.avce-orig { font-size: 11.5px; font-weight: 400; color: var(--text-2); padding: 6px 8px; border-radius: 6px; background: #F4F6FB; white-space: pre-line; } .avce-orig b { color: var(--text); font-weight: 600; }
.avce-cta { flex-direction: row; align-items: center; gap: 12px; } .avce-cta > span { flex: none; } .avce-cta select { max-width: 200px; }
.avce-ch { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.avce-with select { height: 34px; padding: 0 26px 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 12.5px; background: var(--surface); max-width: 200px; }
.avce-ptabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.avce-ptab { height: 36px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 13px; color: var(--text-2); white-space: nowrap; cursor: pointer; }
.avce-ptab.is-on { border-bottom-color: var(--indigo); color: var(--indigo); font-weight: 600; }
.avce-cards { display: flex; flex-direction: column; gap: 10px; }
.avce-sim { margin: 0; font-size: 11.5px; color: var(--muted); }
.avce-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.avce-rtabs { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.avce-rtabs nav { display: flex; gap: 4px; }
.avce-rtab { height: 34px; display: inline-flex; align-items: center; padding: 0 10px; border-bottom: 2px solid transparent; margin-bottom: -10px; font-size: 13.5px; color: var(--text-2); text-decoration: none; }
.avce-rtab.is-on { border-bottom-color: var(--indigo); color: var(--indigo); font-weight: 600; }
.avce-rtabs .po-btn { height: 36px; font-size: 13px; }
.avce-vlist, .avce-tlist, .avce-plist, .avce-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.avce-vlist a { display: flex; gap: 12px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; color: inherit; text-decoration: none; }
.avce-vlist li.is-on a { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo) inset; background: #F8F9FF; }
.avce-vthumb { width: 96px; aspect-ratio: 16 / 11; flex: none; border-radius: 7px; overflow: hidden; background: #0F1A3D; position: relative; }
.avce-vthumb img, .avce-vthumb .ph-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avce-vb { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.avce-vt { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13.5px; } .avce-vt .po-chip { margin-left: auto; }
.avce-vb small { font-size: 11.5px; color: var(--text-2); } .avce-vx { color: var(--text) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avce-hist li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-soft, #EEF0F5); border-radius: 9px; }
.avce-hist li.is-on { border-color: var(--indigo); background: #F8F9FF; }
.avce-hv { flex: none; min-width: 42px; padding: 2px 7px; border-radius: 6px; background: var(--indigo-bg); color: var(--indigo); font-size: 12px; font-weight: 700; text-align: center; }
.avce-hv.is-draft { background: #FFF4E0; color: var(--amber-text); }
.avce-hb { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; font-size: 13px; } .avce-hb small { color: var(--text-2); font-size: 11.5px; }
.avce-load { flex: none; border: 0; background: none; font: inherit; font-size: 12.5px; cursor: pointer; }
.avce-muted { color: var(--text-2); font-size: 12.5px; }
.avce-rh { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .avce-rh .po-btn { height: 34px; font-size: 12.5px; }
.avce-trpop { width: 320px; }
.avce-tlist li { display: flex; align-items: center; gap: 6px; }
.avce-tlist a { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 10px; padding: 8px 6px; border-radius: 9px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--border-soft, #EEF0F5); }
.avce-tlist li.is-on a { background: #F4F6FF; }
.avce-flag { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #EEF1FF; color: var(--indigo); font-size: 11px; font-weight: 700; }
.avce-tb { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; font-size: 13.5px; } .avce-tb > span { display: flex; align-items: center; gap: 6px; }
.avce-tb small { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avce-tw { flex: none; font-size: 11.5px; color: var(--muted); }
.avce-tdel { border: 0; background: none; cursor: pointer; color: var(--muted); } .avce-tdel:hover { color: #B42339; }
.avce-pth { margin: 4px 0 0; font-size: 12px; font-weight: 600; color: var(--text-2); }
.avce-plist li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; } .avce-plist a { color: var(--indigo); text-decoration: none; }
.avce-empty { padding: 8px; }
/* the simulated ad cards (shared with D24 / D25) */
.avap-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .avap-card[hidden] { display: none; }
.avap-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .avap-plc { font-size: 13px; font-weight: 600; color: var(--text); }
.avap-h small { font-size: 11px; color: var(--muted); }
.avap-frame { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; font-size: 13px; color: #111827; }
.avap-prof { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; } .avap-prof b { display: block; font-size: 13.5px; } .avap-prof small { font-size: 11.5px; color: #6B7280; }
.avap-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--indigo); color: #fff; font-size: 12px; font-weight: 700; }
.avap-text { margin: 0; padding: 0 12px 8px; white-space: pre-line; line-height: 1.4; }
.avap-media { position: relative; display: block; aspect-ratio: 1.91 / 1; background: #0F1A3D; overflow: hidden; }
.avap-media img, .avap-media .ph-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .avap-media .cp-art { border-radius: 0; box-shadow: none; }
.avap-media.is-wide { aspect-ratio: 16 / 9; }
.avap-play { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.88); color: #111827; }
.avap-bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #F3F4F6; }
.avap-bar > span:first-child { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .avap-bar small { font-size: 11px; color: #6B7280; text-transform: uppercase; }
.avap-bar small + b + small { text-transform: none; } .avap-bar b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; }
.avap-cta { flex: none; padding: 6px 12px; border-radius: 6px; background: #E5E7EB; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.avap-tall { position: relative; aspect-ratio: 9 / 16; max-height: 420px; margin: 0 auto; background: #0F1A3D; color: #fff; }
.avap-tall .avap-media { position: absolute; inset: 0; aspect-ratio: auto; }
.avap-top { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; align-items: center; gap: 7px; font-size: 12px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.avap-top .avap-av { width: 26px; height: 26px; font-size: 10px; } .avap-top small { opacity: 0.85; }
.avap-ov { position: absolute; left: 0; right: 0; bottom: 52px; padding: 12px; display: flex; flex-direction: column; gap: 4px; background: linear-gradient(transparent, rgba(8, 14, 38, 0.8)); }
.avap-ov b { font-size: 17px; line-height: 1.2; } .avap-ov small { font-size: 12px; opacity: 0.92; white-space: pre-line; max-height: 4.2em; overflow: hidden; }
.avap-cta-pill { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 7px 18px; border-radius: 999px; background: #fff; color: #111827; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.avap-video { position: relative; } .avap-adb { position: absolute; left: 8px; bottom: 8px; padding: 1px 6px; border-radius: 4px; background: #FACC15; color: #111827; font-size: 11px; font-weight: 700; }
.avap-vbar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; } .avap-vbar > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.avap-vbar small { font-size: 11px; color: #6B7280; }
.avap-disc { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; } .avap-disc b { font-size: 14.5px; } .avap-disc p { margin: 0; color: #4B5563; font-size: 12.5px; }
.avap-drow { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .avap-drow small { font-size: 11.5px; color: #6B7280; }
.avap-search { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; } .avap-search small { font-size: 12px; color: #374151; }
.avap-shl { color: #1A0DAB; font-size: 16px; font-weight: 500; } .avap-search p { margin: 0; color: #4B5563; font-size: 12.5px; }
.avap-warn { display: flex; gap: 6px; margin: 0; padding: 7px 9px; border-radius: 8px; background: #FFF6E5; color: var(--amber-text); font-size: 11.5px; line-height: 1.4; } .avap-warn .i { flex: none; font-size: 13px; margin-top: 1px; }
.avap-card.is-compact .avap-tall { max-height: 300px; }
@media (max-width: 1400px) { .avce-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .avce-side { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 1100px) { .avce-grid, .avce-side { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) { .avce-hact { justify-content: flex-start; } .avce-row2 { grid-template-columns: minmax(0, 1fr); } .avce-pop { right: auto; left: 0; width: min(300px, calc(100vw - 48px)); } }
/* ---------- Advertisement-24 · Creative variant matrix (avvm- this screen; reuses avas-nav, avo-head, the D22 tabs avcp-tabs / avcp-tab, the D23 ad cards avap-, avq-select, the D14 modal frame avd-modal / avd-backdrop, avn-form / avn-f, po-card / po-chip / po-btn, av-pf, avw-strip) — plans/Advertisement-24.md, prototype/gen/advertisement24.css ---------- */
.avvm-hact { align-items: center; flex-wrap: wrap; }
.avvm-hact .btn-primary[disabled] { opacity: 0.5; cursor: not-allowed; }
.avvm-root > .avw-strip { margin: 0 0 12px; } .avvm-root > .avw-strip a { color: var(--indigo); font-weight: 600; }
.avvm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.avvm-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.avvm-card { padding: 6px; min-width: 0; }
.avvm-scroll { position: relative; overflow-x: auto; }
.avvm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.avvm-table th { text-align: left; padding: 10px; font-size: 12.5px; font-weight: 600; color: var(--text-2); background: #F4F6FB; white-space: nowrap; }
.avvm-table th:first-child { border-radius: 8px 0 0 8px; } .avvm-table th:last-child { border-radius: 0 8px 8px 0; }
.avvm-table td { padding: 10px; border-bottom: 1px solid var(--border-soft, #EEF0F5); vertical-align: middle; }
.avvm-row.is-out td { background: #FBFBFD; } .avvm-row.is-out .avvm-thumb { opacity: 0.7; }
.avvm-cr { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.avvm-thumb { position: relative; width: 88px; aspect-ratio: 16 / 11; flex: none; border-radius: 7px; overflow: hidden; background: #0F1A3D; }
.avvm-thumb img, .avvm-thumb .ph-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avvm-cr b, .avvm-copy b, .avvm-lang b, .avvm-acct b, .avvm-plc b { display: block; font-size: 13px; color: var(--text); } .avvm-cr a, .avvm-copy a { color: var(--text); text-decoration: none; }
.avvm-cr small, .avvm-copy small, .avvm-lang small, .avvm-acct small, .avvm-plc small, .avvm-camp { display: block; font-size: 11.5px; color: var(--text-2); }
.avvm-tag { display: inline-block; margin-top: 4px; padding: 1px 7px; border-radius: 6px; background: var(--indigo-bg); color: var(--indigo); font-size: 11px; font-weight: 600; }
.avvm-copy { display: flex; flex-direction: column; gap: 2px; min-width: 170px; max-width: 240px; } .avvm-cl { color: var(--muted) !important; }
.avvm-acct { display: flex; align-items: flex-start; gap: 8px; min-width: 150px; } .avvm-acct .av-pf { width: 26px; height: 26px; flex: none; }
.avvm-camp a { color: var(--indigo); text-decoration: none; }
.avvm-plc { display: flex; flex-direction: column; gap: 2px; min-width: 110px; }
.avvm-exp { display: inline-block; margin-top: 3px; padding: 1px 6px; border-radius: 6px; background: #FFF4E0; color: var(--amber-text); font-size: 11px; font-weight: 600; }
.avvm-role { max-width: 130px; }
.avvm-switch { position: relative; width: 44px; height: 26px; border: 0; border-radius: 999px; background: #D5D9E3; cursor: pointer; flex: none; }
.avvm-switch span { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: left 0.15s; }
.avvm-switch.is-on { background: var(--indigo); } .avvm-switch.is-on span { left: 21px; } .avvm-switch[disabled] { opacity: 0.5; cursor: not-allowed; }
.avvm-rm { border: 0; background: none; color: var(--muted); cursor: pointer; } .avvm-rm:hover { color: #B42339; }
.avvm-why td { padding: 0 10px 10px; border-bottom: 1px solid var(--border-soft, #EEF0F5); }
.avvm-why span { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 1.4; } .avvm-why .i { flex: none; font-size: 13px; margin-top: 1px; }
.avvm-why .is-block { color: #B42339; } .avvm-why .is-warn { color: var(--amber-text); }
.avvm-strip { display: grid; grid-template-columns: minmax(200px, 1fr) repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px 16px; align-items: center; }
.avvm-sh { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; } .avvm-sh > .i { font-size: 20px; color: var(--indigo); flex: none; }
.avvm-sh b { display: block; font-size: 14px; } .avvm-sh small { display: block; color: var(--text-2); font-size: 12px; line-height: 1.4; }
.avvm-mini { display: flex; gap: 10px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; color: inherit; text-decoration: none; min-width: 0; }
.avvm-mini .avvm-thumb { width: 96px; } .avvm-mini > span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 12.5px; }
.avvm-mini small { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-2); } .avvm-mini small .av-pf { width: 14px; height: 14px; }
.avvm-mini b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .avvm-mini .po-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; }
.avvm-done { padding: 14px 16px; } .avvm-done h2 { margin: 0 0 8px; font-size: 15px; }
.avvm-done ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.avvm-done li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; font-size: 13px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft, #EEF0F5); }
.avvm-dl { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; } .avvm-dl a { color: var(--indigo); text-decoration: none; font-weight: 600; }
.avvm-dl small { color: var(--muted); font-size: 11.5px; } .avvm-dl button { border: 0; background: none; font: inherit; font-size: 12.5px; cursor: pointer; }
.avvm-sum { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px; }
.avvm-sum h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; } .avvm-sum h2 .i { color: var(--indigo); font-size: 20px; }
.avvm-sum h3 { margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: 14.5px; }
.avvm-k { margin: 0; display: flex; flex-direction: column; } .avvm-k small { font-size: 12.5px; color: var(--text-2); } .avvm-k b { font-size: 26px; line-height: 1.2; color: var(--text); }
.avvm-expand, .avvm-blockn { display: flex; gap: 6px; margin: 0; padding: 8px 10px; border-radius: 8px; font-size: 12px; line-height: 1.4; } .avvm-expand .i, .avvm-blockn .i { flex: none; margin-top: 1px; }
.avvm-expand { background: #FFF6E5; color: var(--amber-text); } .avvm-blockn { background: #FDECEF; color: #B42339; }
.avvm-prov { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.avvm-prov li { display: flex; gap: 10px; align-items: flex-start; } .avvm-prov .av-pf { width: 30px; height: 30px; flex: none; }
.avvm-prov li > span { display: flex; flex-direction: column; font-size: 13px; } .avvm-prov small { color: var(--text-2); font-size: 12px; }
.avvm-note { margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.avvm-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.avvm-pcard { padding: 12px; display: flex; flex-direction: column; gap: 8px; } .avvm-ph { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 13px; }
.avvm-ph .av-pf { width: 20px; height: 20px; } .avvm-ph small { flex-basis: 100%; color: var(--text-2); font-size: 11.5px; }
.avvm-modal { width: min(620px, calc(100vw - 32px)); } .avvm-addform { padding: 4px 2px 8px; }
.avvm-fs { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 6px; } .avvm-fs legend { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.avvm-checks { display: flex; flex-direction: column; gap: 4px; max-height: 160px; overflow-y: auto; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; }
.avvm-chk { display: flex; align-items: center; gap: 8px; font-size: 13px; } .avvm-chk small { margin-left: auto; color: var(--muted); font-size: 11.5px; }
.avvm-split { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.avvm-count { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: var(--indigo); } .avvm-muted { margin: 0; font-size: 12.5px; color: var(--text-2); }
.avvm-why2 { margin: 0; font-size: 12px; color: var(--amber-text); }
.avvm-cbody { padding: 4px 2px 10px; font-size: 13px; } .avvm-cbody ol { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; line-height: 1.45; }
.avvm-ctotal { margin: 0; font-weight: 600; }
@media (max-width: 1280px) { .avvm-grid { grid-template-columns: minmax(0, 1fr); } .avvm-sum { position: static; } .avvm-strip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 768px) { .avvm-strip { grid-template-columns: minmax(0, 1fr); } .avvm-hact { justify-content: flex-start; } }
/* ---------- Advertisement-25 · Ad previews (avpv- this screen; reuses avas-nav, avo-head, the D23 ad cards avap- and field pieces avce-ok / avce-note / avce-sim, the D22 counters avcp-count / avcp-f, avn-kv, po-card / po-chip / po-btn / po-dots, av-pf, avw-strip) — plans/Advertisement-25.md, prototype/gen/advertisement25.css ---------- */
.avpv-hact { align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.avpv-pick { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.avpv-pick small { font-size: 11px; color: var(--muted); }
.avpv-pick select { border: 0; padding: 0 22px 0 0; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); background: transparent; max-width: 280px; }
.avpv-nav { display: inline-flex; gap: 6px; } .avpv-arrow { border: 1px solid var(--border); background: var(--surface); } .avpv-arrow.is-off { opacity: 0.4; }
.avpv-status { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 9px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.avpv-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.avpv-status.is-green { background: #E7F8F1; color: var(--green-text); } .avpv-status.is-red { background: #FDECEF; color: #B42339; }
.avpv-root > .avw-strip { margin: 0 0 12px; }
.avpv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 450px; gap: 16px; align-items: start; }
.avpv-main { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.avpv-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.avpv-tab { height: 38px; display: inline-flex; align-items: center; padding: 0 16px; border: 1px solid var(--border); border-radius: 9px; font-size: 13.5px; color: var(--text); text-decoration: none; background: var(--surface); }
.avpv-tab.is-on { border-color: var(--indigo); background: var(--indigo-bg); color: var(--indigo); font-weight: 600; }
.avpv-note { margin: 0; font-size: 12px; color: var(--text-2); }
.avpv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; align-items: start; }
.avpv-panel { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.avpv-ph { display: flex; align-items: center; gap: 10px; } .avpv-ph h2 { margin: 0; font-size: 16.5px; } .avpv-ph .avpv-status { padding: 3px 9px; font-size: 12px; }
.avpv-kv { grid-template-columns: 130px minmax(0, 1fr); } .avpv-kv dd .av-pf { width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px; }
.avpv-checks { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.avpv-checks li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; } .avpv-checks li > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.avpv-checks small { color: var(--text-2); line-height: 1.4; } .avpv-checks .po-link { flex: none; font-size: 12px; }
.avpv-ci .i { font-size: 16px; } .avpv-checks .is-ok .avpv-ci { color: #12B981; } .avpv-checks .is-warn .avpv-ci { color: var(--amber, #F59E0B); } .avpv-checks .is-block .avpv-ci { color: #F0546A; }
.avpv-form { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.avpv-form h3 { margin: 0; font-size: 14.5px; }
.avpv-cr { display: flex; gap: 12px; align-items: center; } .avpv-cr > span:last-child { display: flex; flex-direction: column; gap: 2px; font-size: 13px; min-width: 0; }
.avpv-cr a { color: var(--text); text-decoration: none; } .avpv-cr .po-link { color: var(--indigo); font-size: 12.5px; } .avpv-cr small { color: var(--text-2); font-size: 12px; }
.avpv-cthumb { position: relative; width: 132px; aspect-ratio: 16 / 9; flex: none; border-radius: 8px; overflow: hidden; background: #0F1A3D; }
.avpv-cthumb img, .avpv-cthumb .ph-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avpv-dest { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.avpv-dk { padding: 0 10px; height: 36px; display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; font-weight: 400; color: var(--text-2); }
.avpv-dest input { height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; font-weight: 400; min-width: 0; }
.avpv-cta { flex-direction: row; align-items: center; gap: 12px; } .avpv-cta select { max-width: 200px; }
.avpv-foot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding-top: 10px; border-top: 1px solid var(--border); }
.avpv-foot .po-btn { height: 40px; } .avpv-foot .is-off { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 1280px) { .avpv-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) { .avpv-hact { justify-content: flex-start; } .avpv-pick select { max-width: calc(100vw - 80px); } .avpv-dest { grid-template-columns: minmax(0, 1fr); } .avpv-kv { grid-template-columns: 110px minmax(0, 1fr); } }

/* ---------- Advertisement-26 · Placements and formats (avpl- this screen and the shared wizard stepper avpl-steps; reuses avf-back, avo-head, the D15 / D17 stepper avf-steps / avk-steps, po-card / po-chip / po-btn, av-pf, avw-strip, avw-link, the D14 modal frame avd-modal / avd-backdrop) — plans/Advertisement-26.md, prototype/gen/advertisement26.css ---------- */
.avpl-root > .avw-strip, .avtg-root > .avw-strip { margin: 0 0 12px; }
.avw-strip.is-grey { background: var(--track); color: var(--text-2); }
.avpl-hact { align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.avpl-pick { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.avpl-pick small { font-size: 11px; color: var(--muted); }
.avpl-pick select { border: 0; padding: 0 22px 0 0; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); background: transparent; max-width: 240px; }
.avpl-hact .po-btn, .avpl-btns .po-btn { height: 42px; }
.avpl-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
.avpl-steps { position: sticky; top: 12px; }
.avpl-main { padding: 18px 20px 16px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.avpl-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.avpl-top h2 { flex: 1 1 auto; margin: 0; font-size: 19px; font-weight: 700; color: var(--text); }
.avpl-acct { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); text-decoration: none; }
.avpl-acct:hover { color: var(--indigo); } .avpl-acct .av-pf { width: 18px; height: 18px; }
.avpl-modes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.avpl-mode { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; }
.avpl-mode.is-on { border-color: var(--indigo); background: var(--indigo-bg-2); }
.avpl-mode.is-off { opacity: 0.6; cursor: default; }
.avpl-mode input { margin-top: 3px; accent-color: var(--indigo); }
.avpl-mode b { display: block; font-size: 14.5px; color: var(--text); } .avpl-mode small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-2); }
.avpl-read { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--green-text); } .avpl-read .i { font-size: 16px; }
.avpl-group { margin: 6px 0 -2px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); }
.avpl-card { display: grid; grid-template-columns: 26px 38px minmax(0, 1fr) 150px minmax(0, 250px); gap: 14px; align-items: center; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.avpl-card.is-chosen { border-color: #C9D3FF; box-shadow: 0 0 0 1px #C9D3FF inset; }
.avpl-card.is-chosen.is-blocked { border-color: #F3B8C2; box-shadow: 0 0 0 1px #F3B8C2 inset; }
.avpl-tick input { width: 18px; height: 18px; accent-color: var(--indigo); }
.avpl-mark { width: 34px; height: 34px; }
.avpl-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.avpl-text b { font-size: 15px; color: var(--text); }
.avpl-text p { margin: 0; font-size: 13px; color: var(--text-2); }
.avpl-text small { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-2); } .avpl-text small .i { font-size: 14px; }
.avpl-text .po-chip { margin-top: 3px; height: 22px; }
.avpl-pv { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.avpl-pv figcaption { font-size: 11px; color: var(--muted); }
.avpl-frame { display: block; overflow: hidden; border-radius: 8px; background: #10152F; }
.avpl-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avpl-frame[data-shape="wide"] { width: 150px; height: 84px; } .avpl-frame[data-shape="square"] { width: 96px; height: 96px; }
.avpl-frame[data-shape="portrait"] { width: 80px; height: 100px; } .avpl-frame[data-shape="tall"] { width: 62px; height: 110px; }
.avpl-frame.is-empty .ph-art { display: block; width: 100%; height: 100%; }
.avpl-textonly { display: grid; place-items: center; width: 150px; height: 84px; padding: 8px; border: 1px dashed var(--border); border-radius: 8px; font-size: 12px; color: var(--text-2); text-align: center; }
.avpl-side { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.avpl-assigned { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 10px; background: #FAFBFD; }
.avpl-h { font-size: 12px; font-weight: 600; color: var(--muted); }
.avpl-assigned ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.avpl-assigned li b { display: block; font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; } .avpl-assigned li small { font-size: 12px; color: var(--text-2); }
.avpl-assigned li.is-none { font-size: 12.5px; color: var(--muted); }
.avpl-change { align-self: flex-start; }
.avpl-problem { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; background: var(--amber-bg); color: var(--amber-text); }
.avpl-problem.is-blocked { background: #FDECEF; color: #B42339; } .avpl-problem.is-skipped { background: var(--track); color: var(--text-2); }
.avpl-problem[hidden] { display: none; }
.avpl-problem b { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; } .avpl-problem b .i { font-size: 16px; }
.avpl-problem p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.avpl-adapt { align-self: flex-start; height: 32px; padding: 0 12px; font-size: 12.5px; }
.avpl-req { font-size: 12px; color: var(--text-2); } .avpl-req a { color: var(--indigo); }
.avpl-muted { margin: 0; font-size: 12.5px; color: var(--muted); }
.avpl-foot { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.avpl-cap { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--indigo-bg-2); font-size: 13px; color: var(--text-2); }
.avpl-cap .i { flex: none; font-size: 18px; color: var(--indigo); } .avpl-cap b { display: block; color: var(--text); } .avpl-cap small { margin-left: auto; white-space: nowrap; color: var(--muted); }
.avpl-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.avpl-btns > a:first-child { margin-right: auto; }
.avpl-btns .po-btn:disabled, .avpl-hact .po-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.avpl-block { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13px; color: #B42339; } .avpl-block[hidden] { display: none; } .avpl-block .i { flex: none; font-size: 16px; }
.avpl-modal { width: min(520px, calc(100vw - 32px)); }
.avpl-dlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.avpl-dl { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.avpl-dl input { margin-top: 3px; accent-color: var(--indigo); } .avpl-dl b { display: block; font-size: 14px; } .avpl-dl small { font-size: 12.5px; color: var(--text-2); }
.avpl-dl.is-off { background: #FAFBFD; } .avpl-dl.is-off small { color: #B42339; }
@media (max-width: 1280px) { .avpl-card { grid-template-columns: 26px 38px minmax(0, 1fr) 120px; } .avpl-side { grid-column: 3 / -1; } .avpl-frame[data-shape="wide"], .avpl-textonly { width: 120px; height: 68px; } }
@media (max-width: 1100px) {
  .avpl-grid { grid-template-columns: minmax(0, 1fr); } .avpl-steps { position: static; }
  .avpl-steps ol { flex-direction: row; overflow-x: auto; } .avpl-steps li { min-width: 170px; } .avpl-steps li::after { display: none; }
}
@media (max-width: 768px) {
  .avpl-modes { grid-template-columns: minmax(0, 1fr); }
  .avpl-card { grid-template-columns: 26px 34px minmax(0, 1fr); } .avpl-pv, .avpl-side { grid-column: 1 / -1; } .avpl-pv { align-items: flex-start; }
  .avpl-hact { width: 100%; justify-content: flex-start; } .avpl-pick select { max-width: 100%; }
  .avpl-cap { flex-wrap: wrap; } .avpl-cap small { margin-left: 28px; }
}

/* ---------- Advertisement-27 · URLs and tracking (avut- this screen: the drawer over the campaign manager; reuses D18's page avn-, po-card / po-chip / po-btn / po-dots, av-pf, avw-strip, avw-link) — plans/Advertisement-27.md, prototype/gen/advertisement27.css ---------- */
.avut-drawer { position: fixed; z-index: 60; top: var(--topbar-h); right: 0; bottom: 0; width: 520px; display: flex; flex-direction: column; background: var(--surface);
  border-left: 1px solid var(--border); box-shadow: -18px 0 40px rgba(16, 21, 47, 0.10); }
@media (min-width: 1281px) { .avn-root:has(~ .avut-drawer) { padding-right: 520px; } .avn-root:has(~ .avut-drawer) .avo-head { flex-direction: column; align-items: stretch; } .avn-root:has(~ .avut-drawer) .avo-actions { flex-wrap: wrap; } }
.avut-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px 8px; }
.avut-head h2 { flex: 1 1 auto; margin: 0; font-size: 20px; font-weight: 700; color: var(--text); }
.avut-x { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: var(--text-2); font-size: 20px; text-decoration: none; }
.avut-x:hover { background: var(--track); }
.avut-obj { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 4px 20px 10px; }
.avut-thumb { display: block; width: 64px; height: 44px; overflow: hidden; border-radius: 8px; background: #10152F; }
.avut-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .avut-thumb .ph-art { display: block; width: 100%; height: 100%; }
.avut-on { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.avut-on b { font-size: 15px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avut-on small { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; } .avut-on .av-pf { width: 14px; height: 14px; }
.avut-tabs { display: flex; gap: 4px; padding: 0 20px; border-bottom: 1px solid var(--border); }
.avut-tab { position: relative; padding: 10px 12px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.avut-tab.is-on { color: var(--indigo); } .avut-tab.is-on::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--indigo); }
.avut-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 20px 16px; display: flex; flex-direction: column; gap: 12px; }
.avut-body section { display: flex; flex-direction: column; gap: 12px; } .avut-body section[hidden] { display: none; }
.avut-strip { margin: 0; }
.avut-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.avut-f > span:first-child { font-size: 13.5px; font-weight: 600; color: var(--text); }
.avut-f input, .avut-f select { height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13.5px; color: var(--text); background: var(--surface); min-width: 0; width: 100%; }
.avut-f input:disabled { background: var(--track); color: var(--muted); }
.avut-urlrow { display: flex; gap: 8px; } .avut-urlrow input { flex: 1 1 auto; } .avut-open { flex: none; border: 1px solid var(--border); }
.avut-hint { font-size: 12px; color: var(--text-2); } .avut-hint.is-bad, .avut-hint.is-err:not([hidden]) { color: #B42339; }
.avut-note { display: flex; align-items: flex-start; gap: 6px; flex-wrap: wrap; margin: 0; font-size: 12.5px; color: var(--text-2); } .avut-note .i { flex: none; font-size: 15px; margin-top: 1px; }
.avut-utmh { display: flex; align-items: center; justify-content: space-between; font-size: 14.5px; font-weight: 700; color: var(--text); }
.avut-utm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.avut-utm .avut-f > span:first-child { font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.avut-final { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: #F7F9FD; }
.avut-fh { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .avut-fh b { font-size: 13.5px; color: var(--text); }
.avut-final code, .avut-click code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.5; color: var(--text-2); overflow-wrap: anywhere; word-break: break-all; }
.avut-copy { height: 32px; padding: 0 12px; font-size: 12.5px; align-self: flex-start; }
.avut-notes { margin: 0; padding-left: 18px; font-size: 12px; color: var(--amber-text); } .avut-notes:empty { display: none; }
.avut-tiles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.avut-tile { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.avut-tile b { display: block; font-size: 13px; color: var(--text); } .avut-tile small { display: block; font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.avut-ti .i { font-size: 18px; } .avut-tile.is-green .avut-ti { color: var(--green); } .avut-tile.is-amber .avut-ti { color: var(--amber); } .avut-tile.is-red .avut-ti { color: var(--red); } .avut-tile.is-grey .avut-ti { color: var(--grey); }
.avut-h { margin: 4px 0 0; font-size: 14px; font-weight: 700; color: var(--text); }
.avut-click[hidden] { display: none; }
.avut-params { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: fixed; }
.avut-params th { text-align: left; padding: 6px 8px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--border); }
.avut-params td { padding: 6px 8px; border-bottom: 1px solid var(--border-soft); color: var(--text-2); overflow-wrap: anywhere; }
.avut-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; }
.avut-ch { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; } .avut-ch h3 { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--text); }
.avut-ch .po-btn { height: 34px; font-size: 13px; }
.avut-state { margin: 0; display: flex; flex-direction: column; } .avut-state b { font-size: 14px; } .avut-state small { font-size: 12.5px; color: var(--text-2); }
.avut-state.is-green b { color: var(--green-text); } .avut-state.is-red b { color: #B42339; } .avut-state.is-amber b { color: var(--amber-text); }
.avut-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.avut-events li { display: grid; grid-template-columns: 20px 130px minmax(0, 1fr); gap: 6px; align-items: center; font-size: 13px; }
.avut-events li small { color: var(--text-2); } .avut-events li.is-ok .i { color: var(--green); } .avut-events li.is-no .i { color: var(--muted-2); }
.avut-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .avut-btns .po-btn { height: 34px; font-size: 13px; }
.avut-muted { margin: 0; font-size: 12px; color: var(--muted); }
.avut-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface); }
.avut-foot .po-btn { height: 42px; }
.avut-dirty { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 13px; color: var(--text-2); }
.avut-dirty::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); } .avut-dirty[hidden] { display: none; }
@media (max-width: 768px) {
  .avut-drawer { width: 100%; top: 0; z-index: 90; }
  .avut-utm, .avut-tiles { grid-template-columns: minmax(0, 1fr); }
  .avut-events li { grid-template-columns: 20px minmax(0, 1fr); } .avut-events li small { grid-column: 2; }
}

/* ---------- Advertisement-28 · Audience targeting (avtg- this screen; reuses avx-crumb, avo-head, the wizard stepper avf-steps / avpl-steps, po-card / po-chip / po-btn, av-pf, avw-strip, avw-link, avn-kv) — plans/Advertisement-28.md, prototype/gen/advertisement28.css ---------- */
.avtg-crumb { margin-bottom: 4px; }
.avtg-head .po-btn { height: 44px; }
.avtg-grid { display: grid; grid-template-columns: 230px minmax(0, 1fr) 400px; gap: 16px; align-items: start; }
.avtg-grid > .avf-steps { position: sticky; top: 12px; }
.avtg-lib { padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.avtg-lib h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); } .avtg-lib h2 span { color: var(--muted); font-weight: 500; }
.avtg-lib ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.avtg-lib li a { display: flex; align-items: flex-start; gap: 8px; padding: 8px; border-radius: 10px; text-decoration: none; color: inherit; }
.avtg-lib li a:hover, .avtg-lib li.is-on a { background: var(--indigo-bg-2); } .avtg-lib .av-pf { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.avtg-lib b { display: block; font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; } .avtg-lib small { display: block; font-size: 12px; color: var(--text-2); }
.avtg-form { padding: 18px 20px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.avtg-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.avtg-top h2 { margin: 0; font-size: 19px; font-weight: 700; color: var(--text); }
.avtg-type { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.avtg-type legend { float: left; margin-right: 6px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.avtg-type label, .avtg-gender label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text); cursor: pointer; }
.avtg-type input, .avtg-gender input, .avtg-brackets input { accent-color: var(--indigo); width: 17px; height: 17px; }
.avtg-root:not(.is-saved) .avtg-savedpick { display: none; }
.avtg-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.avtg-f > span:first-child, .avtg-l { font-size: 14px; font-weight: 600; color: var(--text); }
.avtg-f select, .avtg-f input:not([type]), .avtg-namewrap input { height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; color: var(--text);
  background: var(--surface); width: 100%; min-width: 0; }
.avtg-f select:disabled, .avtg-namewrap input:read-only { background: #F7F8FB; }
.avtg-namewrap { position: relative; display: block; } .avtg-namewrap input { padding-right: 90px; }
.avtg-count { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); height: 24px; }
.avtg-muted { margin: 0; font-size: 12.5px; color: var(--muted); }
.avtg-chips { display: flex; flex-wrap: wrap; gap: 8px; } .avtg-chips:empty { display: none; }
.avtg-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px 0 12px; border-radius: 8px; background: var(--indigo-bg); color: var(--indigo); font-size: 13.5px; font-weight: 500; }
.avtg-chip button { display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 6px; background: none; color: inherit; font-size: 16px; cursor: pointer; }
.avtg-chip button:hover { background: rgba(59, 91, 253, 0.12); }
.avtg-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.avtg-age { display: flex; align-items: center; gap: 8px; } .avtg-age select { width: 110px; }
.avtg-brackets { display: flex; flex-wrap: wrap; gap: 8px 14px; } .avtg-brackets label { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.avtg-gender > span { display: flex; flex-wrap: wrap; gap: 18px; padding-top: 8px; }
.avtg-err { font-size: 12.5px; color: #B42339; } .avtg-err[hidden] { display: none; }
.avtg-src { display: flex; align-items: flex-start; gap: 6px; } .avtg-src .i { flex: none; font-size: 14px; margin-top: 2px; }
.avtg-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.avtg-side > .card { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.avtg-ch { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .avtg-ch h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.avtg-ch .po-btn { height: 36px; font-size: 13.5px; }
.avtg-estbox { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--indigo-bg-2); }
.avtg-estbox .i { flex: none; font-size: 22px; color: var(--indigo); } .avtg-estbox b { display: block; font-size: 14.5px; color: var(--text); } .avtg-estbox small { display: block; font-size: 12.5px; color: var(--text-2); }
.avtg-estbox.is-ok { background: var(--green-bg); } .avtg-estbox.is-ok b { font-size: 18px; }
.avtg-kv { grid-template-columns: 130px minmax(0, 1fr); } .avtg-kv dd { overflow-wrap: anywhere; }
.avtg-ntabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.avtg-ntab { position: relative; padding: 8px 14px; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.avtg-ntab.is-on { color: var(--indigo); } .avtg-ntab.is-on::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--indigo); }
.avtg-npane { display: flex; flex-direction: column; gap: 8px; } .avtg-npane[hidden] { display: none; }
.avtg-nh { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; } .avtg-nh .av-pf { width: 22px; height: 22px; } .avtg-nh b { font-size: 15px; } .avtg-nh small { margin-left: auto; font-size: 12px; color: var(--muted); }
.avtg-npane ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.avtg-npane li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text-2); } .avtg-npane li .i { flex: none; font-size: 16px; margin-top: 1px; }
.avtg-npane li.is-ok .i { color: var(--indigo); } .avtg-npane li.is-plan .i { color: var(--amber); } .avtg-npane li.is-no .i { color: var(--muted-2); }
@media (max-width: 1280px) { .avtg-grid { grid-template-columns: 230px minmax(0, 1fr); } .avtg-side { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }
@media (max-width: 1100px) {
  .avtg-grid { grid-template-columns: minmax(0, 1fr); } .avtg-grid > .avf-steps { position: static; }
  .avtg-grid > .avf-steps ol { flex-direction: row; overflow-x: auto; } .avtg-grid > .avf-steps li { min-width: 170px; } .avtg-grid > .avf-steps li::after { display: none; }
}
@media (max-width: 768px) { .avtg-row { grid-template-columns: minmax(0, 1fr); } .avtg-side { display: flex; } .avtg-head .avo-actions { flex-wrap: wrap; } .avtg-kv { grid-template-columns: 110px minmax(0, 1fr); } }
/* ---------- Advertisement-29 · Audience library and remarketing (avau- this screen: the library table, the selection bar, the source cards and the docked "Create audience" drawer; reuses avo-head, the D19 pills / search avq-tab / avq-search, po-card / po-chip / po-btn / pm-menu / po-dots, av-pf, avw-strip / avw-link, avn-kv, avd-x) — plans/Advertisement-29.md, prototype/gen/advertisement29.css ---------- */
.avau-head .avo-actions { flex-wrap: wrap; } .avau-head .po-btn { height: 44px; }
.avau-search { flex: 0 1 240px; max-width: 240px; height: 44px; background: var(--surface); }
.avau-root button.po-link { border: 0; background: none; padding: 0; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.avau-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 12px; }
.avau-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.avau-pills .avau-pill { height: 38px; border: 1px solid var(--border); border-radius: 9px; }
.avau-pills .avau-pill.is-on { background: var(--indigo); color: #fff; box-shadow: none; border-color: var(--indigo); } .avau-pills .avau-pill.is-on span { color: rgba(255, 255, 255, 0.85); }
.avau-sel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .avau-sel[hidden] { display: none; } .avau-sel b { font-size: 13.5px; color: var(--text); } .avau-sel .po-btn { height: 36px; font-size: 13.5px; }
.avau-list { padding: 8px 14px 6px; min-width: 0; }
.avau-tscroll { position: relative; overflow-x: auto; }
.avau-table { width: 100%; border-collapse: collapse; font-size: 13.5px; color: var(--text); min-width: 980px; }
.avau-table thead th { text-align: left; padding: 11px 8px; font-size: 12.5px; font-weight: 500; color: var(--text-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
.avau-table td { padding: 10px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.avau-table tbody tr:hover { background: #FAFBFD; } .avau-table tbody tr:last-child td { border-bottom: 0; }
.avau-ck { width: 34px; } .avau-ck input { width: 17px; height: 17px; accent-color: var(--indigo); }
.avau-name { min-width: 160px; } .avau-name b { display: block; font-weight: 600; color: var(--text); } .avau-name a { text-decoration: none; } .avau-name a:hover b { color: var(--indigo); }
.avau-name small, .avau-num small, .avau-state small { display: block; font-size: 12px; color: var(--muted); }
.avau-src { display: inline-flex; align-items: center; gap: 8px; } .avau-src .av-pf { flex: none; width: 20px; height: 20px; }
.avau-type { height: 24px; font-weight: 500; background: var(--track); color: var(--text-2); }
.avau-type.is-website, .avau-type.is-engagement { background: var(--indigo-bg); color: var(--indigo); } .avau-type.is-lookalike { background: #F1EDFF; color: #5B3FD1; }
.avau-type.is-customer_list { background: var(--green-bg); color: var(--green-text); }
.avau-num, .avau-when { white-space: nowrap; } .avau-when { color: var(--text-2); font-size: 13px; }
.avau-dot { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13px; white-space: nowrap; }
.avau-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); }
.avau-dot.is-green { color: var(--green-text); } .avau-dot.is-green::before { background: #12B981; }
.avau-dot.is-blue { color: var(--indigo); } .avau-dot.is-blue::before { background: var(--indigo); }
.avau-dot.is-amber { color: var(--amber-text); } .avau-dot.is-amber::before { background: #F59E0B; }
.avau-dot.is-red { color: #B42339; } .avau-dot.is-red::before { background: #F0546A; } .avau-dot.is-grey { color: var(--text-2); }
.avau-state { max-width: 220px; } .avau-state small { overflow-wrap: anywhere; } .avau-note { display: flex !important; gap: 4px; color: var(--amber-text) !important; } .avau-note .i { flex: none; margin-top: 2px; }
.avau-ex { max-width: 150px; color: var(--text-2); font-size: 13px; overflow-wrap: anywhere; }
.avau-act { width: 40px; text-align: right; } .avau-menu { right: 0; min-width: 230px; } .avau-menu [aria-disabled="true"] { opacity: 0.5; }
.avau-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 8px 8px; font-size: 13px; color: var(--text-2); border-top: 1px solid var(--border-soft); }
.avau-pager { display: inline-flex; align-items: center; gap: 16px; }
.avau-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.avau-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; }
.avau-cicon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); font-size: 22px; }
.avau-card h2 { margin: 0 0 4px; font-size: 15.5px; font-weight: 700; color: var(--text); } .avau-card p { margin: 0 0 10px; font-size: 13px; color: var(--text-2); }
.avau-card .po-btn { height: 38px; font-size: 13.5px; } .avau-card .po-btn[aria-disabled="true"] { opacity: 0.55; }
.avau-muted { margin: 0; font-size: 12.5px; color: var(--muted); } .avau-foot-note { display: flex; gap: 6px; margin-top: 12px; } .avau-foot-note .i { flex: none; margin-top: 2px; }
/* the drawer (docked right under the top bar; the page keeps room for it on wide screens) */
.avau-drawer { position: fixed; z-index: 60; top: var(--topbar-h); right: 0; bottom: 0; width: 420px; display: flex; flex-direction: column; background: var(--surface);
  border-left: 1px solid var(--border); box-shadow: -18px 0 40px rgba(16, 21, 47, 0.10); }
.avau-drawer[hidden] { display: none; }
/* backlog 5.19: on every non-phone width the docked drawer keeps its own column (the table never sits under it); while it is open the table leaves out
   Lookback and Exclusions (shown again when it closes) and scrolls inside its card for the rest */
@media (min-width: 769px) { .avau-root.has-drawer { padding-right: 420px; } .avau-root.has-drawer .avau-head { flex-direction: column; align-items: stretch; }
  .avau-root.has-drawer .avau-head .avo-actions { justify-content: flex-start; } .avau-root.has-drawer .avau-cards { grid-template-columns: minmax(0, 1fr); }
  .avau-root.has-drawer .avau-table { min-width: 760px; } .avau-root.has-drawer .avau-table :is(th, td):is(:nth-child(5), :nth-child(9)) { display: none; } }
.avau-dh { display: flex; align-items: center; gap: 10px; padding: 18px 22px 6px; } .avau-dh h2 { flex: 1 1 auto; margin: 0; font-size: 21px; font-weight: 700; color: var(--text); }
.avau-steps { list-style: none; display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 22px 14px; border-bottom: 1px solid var(--border); }
.avau-steps li { display: flex; align-items: center; gap: 8px; flex: 1 1 0; font-size: 13.5px; color: var(--muted); }
.avau-steps li:not(:last-child)::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--border); margin-left: 4px; }
.avau-steps span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--track); font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.avau-steps li.is-now { color: var(--text); font-weight: 600; } .avau-steps li.is-now span { background: var(--indigo); color: #fff; }
.avau-steps li.is-done span { background: var(--green-bg); color: var(--green-text); }
.avau-db { flex: 1 1 auto; overflow-y: auto; padding: 16px 22px; display: flex; flex-direction: column; gap: 14px; }
.avau-db section { display: flex; flex-direction: column; gap: 14px; } .avau-db section[hidden], .avau-db [data-avau-kind][hidden] { display: none; }
.avau-db [data-avau-kind] { display: flex; flex-direction: column; gap: 14px; }
.avau-db h3 { margin: 0; font-size: 16.5px; font-weight: 700; color: var(--text); } .avau-db h3 + .avau-muted { margin-top: -10px; }
.avau-srcs { display: flex; flex-direction: column; gap: 10px; }
.avau-srcopt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.avau-srcopt:has(input:checked) { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo); background: #FAFBFF; }
.avau-srcopt.is-off { cursor: not-allowed; opacity: 0.6; } .avau-srcopt > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.avau-srcopt b { display: block; font-size: 14.5px; color: var(--text); } .avau-srcopt small { display: block; font-size: 12.5px; color: var(--text-2); } .avau-why { color: var(--amber-text) !important; }
.avau-srcopt input { width: 18px; height: 18px; accent-color: var(--indigo); }
.avau-sicon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); font-size: 19px; }
.avau-f { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.avau-f > span:first-child, .avau-f legend { font-size: 14px; font-weight: 600; color: var(--text); }
.avau-f select[multiple] { height: 150px; padding: 6px 8px; } /* backlog 5.55 (R55): the lookalike's countries */
.avau-f select, .avau-f input:not([type="radio"]):not([type="checkbox"]), .avau-namewrap input, .avau-page input, .avau-idrow input { height: 42px; padding: 0 12px; border: 1px solid var(--border);
  border-radius: 8px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); width: 100%; min-width: 0; }
.avau-namewrap { position: relative; display: block; } .avau-namewrap input { padding-right: 86px; }
.avau-count { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); height: 24px; }
.avau-rules { display: flex; flex-direction: column; gap: 8px; } .avau-rules label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); cursor: pointer; }
.avau-rules input { width: 17px; height: 17px; accent-color: var(--indigo); }
.avau-pages { display: flex; flex-direction: column; gap: 8px; } .avau-page { display: flex; gap: 6px; align-items: center; }
.avau-idrow { display: flex; gap: 8px; } .avau-idrow .po-btn { flex: none; height: 42px; }
.avau-caps, .avau-srcline, .avau-process, .avau-found { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--indigo-bg-2); font-size: 13px; color: var(--text-2); }
.avau-caps { display: flex; gap: 8px; } .avau-caps .i { flex: none; color: var(--indigo); margin-top: 1px; }
.avau-srcline.is-ok { background: var(--green-bg); color: var(--green-text); } .avau-srcline.is-missing { background: #FDECEF; color: #B42339; }
/* backlog 5.57 / 5.58 (R57): an audience edit — the note at the top of Details, the open change plan under the state, the empty source lines hidden */
.avau-editnote { margin: 0 0 14px; } .avau-editing { display: block; color: var(--indigo) !important; } .avau-srcline:empty { display: none; }
.avau-process p { margin: 0 0 6px; } .avau-process ol { margin: 0 0 10px; padding-left: 18px; } .avau-process .po-btn { height: 38px; font-size: 13.5px; }
.avau-found b { display: block; font-size: 14px; color: var(--text); } .avau-found small { display: block; font-size: 12.5px; } .avau-found.is-ok { background: var(--green-bg); }
.avau-found.is-missing { background: #FDECEF; color: #B42339; } .avau-found[hidden] { display: none; }
.avau-kv { grid-template-columns: 120px minmax(0, 1fr); } .avau-kv dd { overflow-wrap: anywhere; }
.avau-err { font-size: 12.5px; color: #B42339; } .avau-err[hidden] { display: none; }
.avau-df { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--border); } .avau-gap { flex: 1 1 auto; } .avau-df .po-btn { height: 44px; min-width: 96px; }
@media (max-width: 768px) { .avau-drawer { z-index: 90; } }
@media (max-width: 1100px) { .avau-cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) {
  .avau-drawer { width: 100%; top: 0; }
  .avau-head .avo-actions { width: 100%; } .avau-search { flex: 1 1 100%; max-width: none; }
  .avau-foot { flex-direction: column; align-items: flex-start; } .avau-steps { padding: 8px 16px 12px; } .avau-db, .avau-dh, .avau-df { padding-left: 16px; padding-right: 16px; }
}
/* ---------- Advertisement-30 · Audience exclusions (avex- this screen: the modal over the audience library; reuses the D14 modal frame avd-modal / avd-backdrop / avd-mh / avd-x / avd-mf, po-chip / po-btn, av-pf, avw-strip) — plans/Advertisement-30.md, prototype/gen/advertisement30.css ---------- */
.avex-modal { width: min(760px, calc(100vw - 32px)); padding: 22px 24px; gap: 14px; }
.avex-mh { align-items: flex-start; } .avex-mh > div { flex: 1 1 auto; min-width: 0; } .avex-mh h2 { margin: 0; font-size: 21px; font-weight: 700; color: var(--text); }
.avex-sub { margin: 4px 0 0 !important; }
.avex-icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); font-size: 22px; }
.avex-strip { margin: 0; } .avex-scope { margin: -4px 0 0; font-size: 13px; color: var(--text-2); }
.avex-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); }
.avex-tab { position: relative; padding: 10px 14px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.avex-tab span { font-weight: 500; color: var(--muted); } .avex-tab.is-on { color: var(--indigo); }
.avex-tab.is-on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--indigo); }
.avex-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .avex-body [role="tabpanel"][hidden] { display: none; }
.avex-tscroll { position: relative; overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.avex-table { width: 100%; border-collapse: collapse; font-size: 13.5px; color: var(--text); min-width: 640px; }
.avex-table thead th { text-align: left; padding: 10px; font-size: 12.5px; font-weight: 500; color: var(--text-2); background: #F7F8FB; white-space: nowrap; }
.avex-table td { padding: 10px; border-top: 1px solid var(--border-soft); vertical-align: middle; }
.avex-table td b { display: block; font-weight: 600; } .avex-table td small { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.avex-table td small .av-pf { width: 14px; height: 14px; }
.avex-ck { width: 36px; } .avex-ck input { width: 17px; height: 17px; accent-color: var(--indigo); }
.avex-row.is-off td:not(.avex-ck) { color: var(--muted); } .avex-why { color: #B42339 !important; } .avex-why.is-blue { color: var(--indigo) !important; }
.avex-fresh { white-space: nowrap; color: var(--text-2); font-size: 13px; }
.avex-pop { white-space: nowrap; } .avex-pop .po-chip { height: 22px; margin-top: 4px; font-size: 11.5px; font-weight: 500; }
.avex-cc { min-width: 150px; }
.avex-dd { position: relative; } .avex-dd summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; font-weight: 500; color: var(--text); padding: 6px 10px;
  border: 1px solid var(--border); border-radius: 8px; white-space: nowrap; }
.avex-dd summary::-webkit-details-marker { display: none; } .avex-dd summary::after { content: "▾"; font-size: 11px; color: var(--muted); }
.avex-ddl { position: absolute; z-index: 3; right: 0; top: calc(100% + 4px); width: 280px; max-height: 240px; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 30px rgba(16, 21, 47, 0.16); }
.avex-ddl label { display: flex; align-items: flex-start; gap: 8px; padding: 6px; border-radius: 8px; cursor: pointer; } .avex-ddl label:hover { background: #F7F8FB; }
.avex-ddl label.is-off { cursor: not-allowed; opacity: 0.6; } .avex-ddl input { margin-top: 2px; accent-color: var(--indigo); }
.avex-ddl b { display: block; font-size: 13px; } .avex-ddl small { display: block; font-size: 11.5px; color: var(--muted); }
.avex-muted { margin: 0; font-size: 12.5px; color: var(--muted); }
.avex-add { display: flex; flex-direction: column; gap: 6px; max-width: 360px; } .avex-add span { font-size: 13.5px; font-weight: 600; color: var(--text); }
.avex-add select { height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; background: var(--surface); }
.avex-locs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.avex-locs li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.avex-lname { flex: 1 1 auto; font-weight: 600; font-size: 14px; color: var(--text); } .avex-locs li.avex-muted { border-style: dashed; justify-content: center; }
.avex-overlap { display: flex; flex-direction: column; gap: 8px; }
.avex-oh { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .avex-oh b { font-size: 14.5px; color: var(--text); } .avex-oh .po-btn { height: 34px; font-size: 13px; }
.avex-obox { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 10px; background: #F7F8FB; }
.avex-obox .i { flex: none; font-size: 22px; color: var(--muted); } .avex-obox b { display: block; font-size: 14px; color: var(--text); } .avex-obox small { display: block; font-size: 12.5px; color: var(--text-2); }
.avex-obox.is-ok { background: var(--green-bg); }
.avex-impact { margin: 0; font-size: 13px; color: var(--text-2); } .avex-err { font-size: 13px; color: #B42339; } .avex-err[hidden] { display: none; }
.avex-mf { justify-content: space-between; align-items: flex-start; }
.avex-save { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .avex-save small { font-size: 12px; color: var(--muted); text-align: right; } .avex-save .po-btn { height: 44px; }
@media (max-width: 768px) { .avex-modal { padding: 18px 16px; } .avex-mf { flex-direction: column-reverse; align-items: stretch; } .avex-save { align-items: stretch; } .avex-save small { text-align: left; } }
/* ---------- Advertisement-31 · Budget and schedule (avbg- this screen; reuses avx-crumb, avo-head, po-card / po-chip / po-btn, av-pf, av-thumb art, avw-strip / avw-link, avn-kv) — plans/Advertisement-31.md, prototype/gen/advertisement31.css ---------- */
.avbg-crumb { margin-bottom: 4px; }
.avbg-head .po-btn { height: 44px; } .avbg-head .avo-actions { flex-wrap: wrap; }
.avbg-setup { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; padding: 10px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border);
  font-size: 13.5px; color: var(--text-2); } .avbg-setup > .i { color: var(--indigo); }
.avbg-strip { margin: 0 0 10px; }
.avbg-grid { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 16px; align-items: start; }
.avbg-main, .avbg-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.avbg-form { padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.avbg-form h2, .avbg-side h2, .avbg-ads h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 19px; font-weight: 700; color: var(--text); }
.avbg-form h2 + .avbg-muted { margin-top: -10px; }
.avbg-muted { margin: 0; font-size: 12.5px; color: var(--muted); }
.avbg-row4 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 12px; }
.avbg-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; }
.avbg-f > span:first-child, .avbg-l, .avbg-types legend { font-size: 14px; font-weight: 600; color: var(--text); }
.avbg-f select, .avbg-f input { height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); width: 100%; min-width: 0; }
.avbg-f input[readonly] { background: #F7F8FB; color: var(--text-2); }
.avbg-ro-f { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: #F7F8FB; font-size: 14px; color: var(--text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.avbg-ro-f .av-pf { flex: none; width: 20px; height: 20px; }
.avbg-camp small .po-chip { height: 20px; font-size: 11.5px; }
.avbg-types { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 16px; }
.avbg-types legend { margin-bottom: 8px; } .avbg-level, .avbg-types .avbg-err { grid-column: 1 / -1; }
.avbg-type { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.avbg-type:has(input:checked) { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo); background: #FAFBFF; }
.avbg-type input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--indigo); flex: none; } .avbg-type b { display: block; font-size: 14.5px; color: var(--text); }
.avbg-type small { display: block; font-size: 12.5px; color: var(--text-2); }
.avbg-amount { display: grid; grid-template-columns: 200px minmax(0, 1fr) 260px; gap: 12px; align-items: start; } .avbg-amount > label { padding-top: 12px; }
.avbg-total { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--indigo-bg-2); } .avbg-total small { display: block; font-size: 12.5px; color: var(--text-2); }
.avbg-total b { display: block; font-size: 18px; color: var(--text); }
.avbg-sched { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: start; } .avbg-sched > .avbg-l { padding-top: 12px; }
.avbg-dash { padding-top: 38px; color: var(--muted); }
.avbg-incl, .avbg-apply .avw-strip { margin: 0; }
.avbg-apply { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.avbg-err { font-size: 12.5px; color: #B42339; } .avbg-err[hidden] { display: none; }
.avbg-issues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .avbg-issues:empty { display: none; }
.avbg-issues li { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; border-radius: 8px; font-size: 13px; } .avbg-issues .i { flex: none; margin-top: 2px; }
.avbg-issues li.is-amber { background: var(--amber-bg); color: var(--amber-text); } .avbg-issues li.is-red { background: #FDECEF; color: #B42339; }
.avbg-ads { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.avbg-ads ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.avbg-ads li { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.avbg-thumb { width: 120px; height: 68px; border-radius: 8px; overflow: hidden; } .avbg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avbg-ads b { display: block; font-size: 15px; color: var(--text); } .avbg-ads small { display: block; font-size: 12.5px; color: var(--muted); }
.avbg-side > .card { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.avbg-tip { display: inline-flex; color: var(--muted); font-size: 16px; }
.avbg-albody { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 18px; align-items: center; } .avbg-albody > p { grid-column: 1 / -1; }
.avbg-donut { --p: 0; position: relative; width: 120px; height: 120px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: conic-gradient(var(--indigo) calc(var(--p) * 1%), #E3E8F4 0); }
.avbg-donut::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: var(--surface); }
.avbg-donut b, .avbg-donut small { position: relative; } .avbg-donut b { font-size: 22px; color: var(--text); } .avbg-donut small { font-size: 10.5px; color: var(--text-2); max-width: 80px; }
.avbg-alist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: var(--text-2); }
.avbg-alist li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 44px; gap: 8px; align-items: center; }
.avbg-alist i { width: 10px; height: 10px; border-radius: 50%; background: #E3E8F4; } .avbg-alist i.is-me { background: var(--indigo); }
.avbg-alist b { color: var(--text); font-weight: 600; } .avbg-alist em { font-style: normal; text-align: right; }
.avbg-alist li.is-total { grid-template-columns: minmax(0, 1fr) auto 44px; padding-top: 8px; border-top: 1px solid var(--border); color: var(--text); font-weight: 700; }
.avbg-line { margin: 0; padding: 8px 12px; border-radius: 8px; background: #F7F8FB; font-size: 13px; color: var(--text-2); } .avbg-line b { color: var(--text); }
.avbg-line small { display: block; font-size: 12px; color: var(--muted); }
.avbg-lsrc { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12.5px; font-weight: 500; color: var(--text-2); } .avbg-lsrc .av-pf { width: 18px; height: 18px; }
.avbg-lim { list-style: none; margin: 0; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; border-radius: 10px; background: #F7F8FB; }
.avbg-lim li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; color: var(--text-2); } .avbg-lim b { color: var(--text); font-weight: 600; text-align: right; }
.avbg-lim li.is-ok .i { color: #12B981; } .avbg-lim li.is-no .i { color: #F0546A; } .avbg-lim li.is-plan .i { color: var(--muted); }
.avbg-kv { grid-template-columns: 170px minmax(0, 1fr); font-size: 13px; }
.avbg-side .avbg-muted { display: flex; gap: 6px; } .avbg-side .avbg-muted .i { flex: none; margin-top: 2px; }
#avbg-estbody { position: relative; overflow-x: auto; }
.avbg-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--text); }
.avbg-table th, .avbg-table td { padding: 7px 8px; text-align: left; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.avbg-table thead th { font-size: 12px; font-weight: 500; color: var(--text-2); background: #F7F8FB; }
.avbg-table tfoot th, .avbg-table tfoot td { font-weight: 700; background: #F7F8FB; border-bottom: 0; } .avbg-more td { color: var(--muted); font-style: italic; }
@media (max-width: 1280px) { .avbg-grid { grid-template-columns: minmax(0, 1fr); } .avbg-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } }
@media (max-width: 1100px) { .avbg-row4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .avbg-amount, .avbg-sched { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .avbg-amount > label, .avbg-sched > .avbg-l { grid-column: 1 / -1; padding-top: 0; } .avbg-dash { display: none; } }
@media (max-width: 768px) {
  .avbg-row4, .avbg-types, .avbg-amount, .avbg-sched { grid-template-columns: minmax(0, 1fr); } .avbg-side { display: flex; }
  .avbg-albody { grid-template-columns: minmax(0, 1fr); justify-items: start; } .avbg-ads li { grid-template-columns: 80px minmax(0, 1fr); } .avbg-ads li .po-chip { grid-column: 2; justify-self: start; }
  .avbg-thumb { width: 80px; height: 46px; } .avbg-kv { grid-template-columns: 130px minmax(0, 1fr); } .avbg-lsrc { margin-left: 0; } .avbg-side h2 { flex-wrap: wrap; }
}

/* ---------- Advertisement-32 · Bidding and optimization (avbd- this screen: the drawer over the campaign manager; reuses D18's page avn-, po-card / po-chip / po-btn, av-pf, avw-strip, avw-link) — plans/Advertisement-32.md, prototype/gen/advertisement32.css ---------- */
.avbd-drawer { position: fixed; z-index: 60; top: var(--topbar-h); right: 0; bottom: 0; width: 540px; display: flex; flex-direction: column; background: var(--surface);
  border-left: 1px solid var(--border); box-shadow: -18px 0 40px rgba(16, 21, 47, 0.10); }
@media (min-width: 1281px) { .avn-root:has(~ .avbd-drawer) { padding-right: 540px; } .avn-root:has(~ .avbd-drawer) .avo-head { flex-direction: column; align-items: stretch; } .avn-root:has(~ .avbd-drawer) .avo-actions { flex-wrap: wrap; } }
.avbd-head { display: flex; align-items: flex-start; gap: 10px; padding: 14px 20px 6px; }
.avbd-ht { flex: 1 1 auto; min-width: 0; }
.avbd-crumb { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.avbd-crumb a { display: inline-flex; align-items: center; gap: 2px; color: var(--text-2); text-decoration: none; } .avbd-crumb a:hover { color: var(--indigo); }
.avbd-head h2 { margin: 4px 0 0; font-size: 21px; font-weight: 700; color: var(--text); }
.avbd-x { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: var(--text-2); font-size: 20px; text-decoration: none; }
.avbd-x:hover { background: var(--track); }
.avbd-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 20px 16px; display: flex; flex-direction: column; gap: 14px; }
.avbd-setup { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); font-size: 12.5px; color: var(--text-2); }
.avbd-setup > .i { color: var(--indigo); }
.avbd-obj { display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 170px); gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: 12px; }
.avbd-thumb { display: block; width: 72px; height: 64px; overflow: hidden; border-radius: 8px; background: #10152F; position: relative; }
.avbd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .avbd-thumb .ph-art { display: block; width: 100%; height: 100%; }
.avbd-on, .avbd-acct { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.avbd-on b { font-size: 15px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avbd-on small, .avbd-acct small { font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; } .avbd-on .po-chip { height: 22px; font-size: 11.5px; }
.avbd-acct { padding-left: 12px; border-left: 1px solid var(--border); }
.avbd-pf { display: inline-flex; align-items: center; gap: 6px; } .avbd-pf b { font-size: 14.5px; color: var(--text); } .avbd-pf .av-pf { width: 20px; height: 20px; }
.avbd-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.avbd-strip { margin: 0; }
.avbd-sec { display: flex; flex-direction: column; gap: 8px; }
.avbd-sec h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.avbd-evrow { position: relative; display: flex; align-items: center; }
.avbd-evrow select { width: 100%; height: 46px; padding: 0 150px 0 14px; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--text); background: var(--surface); min-width: 0; }
.avbd-evchip { position: absolute; right: 36px; pointer-events: none; }
.avbd-line { margin: 0; font-size: 12.5px; color: var(--text-2); }
.avbd-muted { display: flex; align-items: flex-start; gap: 6px; flex-wrap: wrap; margin: 0; font-size: 12.5px; color: var(--muted); }
.avbd-strats { display: flex; flex-direction: column; gap: 8px; }
.avbd-strat { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.avbd-strat input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--indigo); }
.avbd-strat b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14.5px; color: var(--text); }
.avbd-strat small { display: block; font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.avbd-strat.is-on { border-color: var(--indigo); background: #F6F8FF; box-shadow: 0 0 0 1px var(--indigo) inset; }
.avbd-strat.is-off { cursor: default; background: #FAFBFD; } .avbd-strat.is-off b { color: var(--muted); }
.avbd-rec { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--indigo-bg); color: var(--indigo); }
.avbd-f { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.avbd-f > span:first-child { font-size: 13.5px; font-weight: 600; color: var(--text); }
.avbd-f input { height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); min-width: 0; }
.avbd-f input:disabled { background: var(--track); color: var(--muted); }
.avbd-hint { font-size: 12px; color: var(--text-2); }
.avbd-err { font-size: 12.5px; color: #B42339; } .avbd-err[hidden] { display: none; }
.avbd-advice { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; border-radius: 10px; background: #F4F7FF; }
.avbd-advice > .i { font-size: 22px; color: var(--indigo); }
.avbd-advice p { margin: 0; font-size: 13.5px; color: var(--text); } .avbd-advice small { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.avbd-advice.is-none { background: #F7F8FB; } .avbd-advice.is-none > .i { color: var(--muted-2); }
.avbd-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface); }
.avbd-foot .po-btn { height: 44px; }
.avbd-src { display: inline-flex; align-items: center; gap: 5px; margin-right: auto; font-size: 12.5px; color: var(--text-2); }
.avbd-dirty { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.avbd-dirty::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); } .avbd-dirty[hidden] { display: none; }
@media (max-width: 768px) {
  .avbd-drawer { width: 100%; top: 0; z-index: 90; }
  .avbd-obj { grid-template-columns: 64px minmax(0, 1fr); } .avbd-acct { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
  .avbd-evrow { flex-direction: column; align-items: stretch; gap: 6px; } .avbd-evrow select { padding-right: 14px; } .avbd-evchip { position: static; align-self: flex-start; }
  .avbd-src { width: 100%; }
}

/* ---------- Advertisement-33 · Launch review (avlr- this screen; reuses avf-back, avo-head, po-card / po-chip / po-btn / po-dots / pm-menu, av-pf, av-thumb art, avw-strip / avw-link, avn-kv, avd-menuwrap) — plans/Advertisement-33.md, prototype/gen/advertisement33.css ---------- */
.avlr-head .po-btn { height: 44px; } .avlr-head .avo-actions { flex-wrap: wrap; justify-content: flex-end; }
.avlr-pick { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.avlr-pick select { height: 44px; max-width: 260px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 13.5px; color: var(--text); background: var(--surface); }
.avlr-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 6px 0 14px; padding: 0 4px; }
.avlr-steps li { position: relative; min-width: 0; }
.avlr-steps li:not(:last-child)::after { content: ""; position: absolute; top: 20px; left: 52px; right: 8px; height: 2px; background: var(--border); }
.avlr-steps li.is-done:not(:last-child)::after { background: #BFCBFF; }
.avlr-steps li > a, .avlr-steps li > .avlr-n { text-decoration: none; color: inherit; }
.avlr-steps li, .avlr-steps li > a { display: flex; align-items: center; gap: 10px; }
.avlr-n { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface);
  font-size: 15px; font-weight: 700; color: var(--muted); }
.avlr-steps li.is-done .avlr-n { background: var(--indigo); border-color: var(--indigo); color: #fff; } .avlr-steps li.is-done .avlr-n .i { font-size: 20px; }
.avlr-steps li.is-now .avlr-n { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.avlr-steps b { display: block; font-size: 15px; color: var(--text); background: var(--bg, #F6F7FB); padding-right: 8px; position: relative; z-index: 1; }
.avlr-steps li.is-now b { color: var(--indigo); }
.avlr-steps small { display: block; font-size: 12px; color: var(--muted); position: relative; z-index: 1; }
.avlr-strip { margin: 0 0 10px; }
.avlr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.avlr-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; min-width: 0; }
.avlr-card { padding: 16px 18px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.avlr-card.avlr-wide { grid-column: span 2; }
.avlr-card.is-changed { box-shadow: 0 0 0 2px var(--amber) inset; }
.avlr-ch { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.avlr-ch h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
.avlr-ok .i { color: var(--green); font-size: 20px; } .avlr-bad .i { color: var(--amber); font-size: 20px; }
.avlr-kv { grid-template-columns: minmax(96px, 42%) minmax(0, 1fr); font-size: 13px; } .avlr-kv dd .po-chip { height: 22px; font-size: 11.5px; }
.avlr-url { overflow-wrap: anywhere; }
.avlr-acct { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.avlr-pf { width: 30px; height: 30px; } .avlr-acct b { display: block; font-size: 14px; color: var(--text); } .avlr-acct small { display: block; font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.avlr-tree { list-style: none; margin: 0; padding: 8px 10px; border-radius: 8px; background: #F7F8FB; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.avlr-tree b { color: var(--text); } .avlr-tree small { display: block; color: var(--text-2); }
.avlr-cr { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.avlr-cr li { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.avlr-thumb { width: 100%; height: 76px; }
.avlr-cr b { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .avlr-cr small { font-size: 12px; color: var(--text-2); }
.avlr-cr .po-chip { align-self: flex-start; height: 22px; font-size: 11.5px; white-space: normal; text-align: left; }
.avlr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.avlr-table th { text-align: left; font-weight: 600; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--border); }
.avlr-table td { padding: 7px 8px; border-bottom: 1px solid var(--border-soft, #EEF0F5); color: var(--text); }
.avlr-table tfoot th, .avlr-table tfoot td { font-weight: 700; color: var(--text); border-bottom: 0; }
.avlr-table .num { text-align: right; white-space: nowrap; }
.avlr-muted { margin: 0; font-size: 12.5px; color: var(--muted); }
.avlr-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--topbar-h) + 12px); }
.avlr-checks { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.avlr-ckh { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .avlr-ckh h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.avlr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.avlr-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; }
.avlr-list li > .i { font-size: 19px; margin-top: 1px; } .avlr-list li.is-ok > .i { color: var(--green); } .avlr-list li.is-warn > .i { color: var(--amber); } .avlr-list li.is-block > .i { color: var(--red); }
.avlr-list b { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); } .avlr-list small { display: block; font-size: 12px; color: var(--text-2); }
.avlr-list .avw-link { grid-column: 2; font-size: 12.5px; }
.avlr-box { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: center; padding: 12px 14px; border-radius: 10px; }
.avlr-box > .i { font-size: 30px; } .avlr-box b { display: block; font-size: 15px; } .avlr-box small { display: block; font-size: 12.5px; color: var(--text-2); }
.avlr-box.is-green { background: #EAF8F1; } .avlr-box.is-green > .i, .avlr-box.is-green b { color: var(--green-text); }
.avlr-box.is-red { background: #FDECEF; } .avlr-box.is-red > .i, .avlr-box.is-red b { color: #B42339; }
.avlr-submitbox { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 16px; border-radius: 12px; background: #EEF3FF; border: 1px solid #D9E2FF; }
.avlr-sicon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--indigo); color: #fff; font-size: 18px; }
.avlr-submitbox b { font-size: 14.5px; color: var(--indigo); } .avlr-submitbox p { margin: 6px 0 0; font-size: 12.5px; color: var(--text-2); }
.avlr-why { display: flex; gap: 6px; align-items: flex-start; color: var(--amber-text) !important; }
@media (max-width: 1500px) { .avlr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1280px) { .avlr-grid { grid-template-columns: minmax(0, 1fr); } .avlr-side { position: static; } }
@media (max-width: 768px) {
  .avlr-cards { grid-template-columns: minmax(0, 1fr); } .avlr-card.avlr-wide { grid-column: auto; }
  .avlr-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .avlr-steps li::after { display: none; }
  .avlr-pick select { max-width: 100%; } .avlr-pick { flex: 1 1 100%; }
  .avlr-kv { grid-template-columns: minmax(0, 1fr); } .avlr-kv dt { margin-top: 4px; }
}

/* ---------- Advertisement-34 · Creating campaigns (avrn- this screen: the campaign runner's page; reuses avo-head, po-card / po-chip / po-btn, av-pf, av-thumb art, avw-strip / avw-link) — plans/Advertisement-34.md, prototype/gen/advertisement34.css ---------- */
.avrn-head .po-btn { height: 44px; } .avrn-head .avo-actions { flex-wrap: wrap; justify-content: flex-end; align-items: flex-end; }
.avrn-pick { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.avrn-pick select { height: 44px; max-width: 330px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 13px; color: var(--text); background: var(--surface); }
.avrn-cancelwrap { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } .avrn-cancelwrap small { font-size: 11.5px; color: var(--muted); }
.avrn-cancel { color: #C8233A; border-color: #F2A7B2; } .avrn-cancel:hover { background: #FDECEF; }
.avrn-strip { margin: 0 0 10px; }
.avrn-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.avrn-main, .avrn-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.avrn-card { padding: 16px 18px; min-width: 0; }
.avrn-ch { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.avrn-ch h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; font-weight: 700; color: var(--text); } .avrn-ch h2 .i { color: var(--indigo); }
.avrn-top { display: grid; grid-template-columns: 160px minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 16px; align-items: center; }
.avrn-cover { width: 160px; height: 76px; border-radius: 8px; }
.avrn-id { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .avrn-id b { font-size: 17px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avrn-id small { font-size: 12.5px; color: var(--text-2); }
.avrn-prov { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--text); } .avrn-prov .av-pf { width: 18px; height: 18px; }
.avrn-prov .po-chip { height: 22px; font-size: 11.5px; }
.avrn-fact { display: flex; align-items: flex-start; gap: 8px; min-width: 0; } .avrn-fact > .i { font-size: 20px; color: var(--text-2); margin-top: 2px; }
.avrn-fact span { display: flex; flex-direction: column; min-width: 0; } .avrn-fact small { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.avrn-fact b { font-size: 14.5px; color: var(--text); }
.avrn-state b { display: inline-flex; align-items: center; gap: 6px; } .avrn-state b i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.avrn-state b.is-green { color: var(--green-text); } .avrn-state b.is-blue { color: var(--indigo); } .avrn-state b.is-amber { color: var(--amber-text); } .avrn-state b.is-red { color: #B42339; }
.avrn-state b.is-grey { color: var(--text-2); }
.avrn-steps { list-style: none; display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 10px; margin: 16px 0 4px; padding: 14px 0 0; border-top: 1px solid var(--border); }
.avrn-steps li { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; }
.avrn-steps li:not(:last-child)::after { content: ""; position: absolute; top: 20px; left: 48px; right: 6px; height: 2px; background: var(--border); z-index: 0; }
.avrn-steps li.is-done:not(:last-child)::after { background: #BFCBFF; }
.avrn-n { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface);
  font-size: 15px; font-weight: 700; color: var(--muted); }
.avrn-steps li.is-done .avrn-n { background: var(--indigo); border-color: var(--indigo); color: #fff; } .avrn-steps li.is-now .avrn-n { border-color: var(--indigo); color: var(--indigo); }
.avrn-steps li.is-failed .avrn-n { border-color: var(--red); color: var(--red); } .avrn-steps li.is-cancelled .avrn-n { color: var(--muted-2); }
.avrn-steps span:last-child { position: relative; z-index: 1; min-width: 0; background: var(--surface); padding-right: 6px; }
.avrn-steps b { display: block; font-size: 14.5px; color: var(--text); } .avrn-steps small { display: block; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.avrn-reason { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; font-size: 13px; background: #F4F7FF; color: var(--text); }
.avrn-reason.is-red { background: #FDECEF; color: #B42339; } .avrn-reason.is-amber { background: var(--amber-bg); color: var(--amber-text); }
.avrn-muted { display: flex; align-items: flex-start; gap: 6px; flex-wrap: wrap; margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.avrn-auth { margin-top: 8px; }
.avrn-gatelist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.avrn-gatelist li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; }
.avrn-gatelist li > .i { font-size: 19px; margin-top: 1px; } .avrn-gatelist li.is-ok > .i { color: var(--green); } .avrn-gatelist li.is-bad > .i { color: var(--red); }
.avrn-gatelist b { display: block; font-size: 13.5px; color: var(--text); } .avrn-gatelist small { display: block; font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.avrn-h3 { margin: 16px 0 8px; font-size: 15px; font-weight: 700; color: var(--text); }
.avrn-scroll { position: relative; overflow-x: auto; }
.avrn-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.avrn-table th { text-align: left; font-weight: 600; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.avrn-table td { padding: 10px; border-bottom: 1px solid var(--border-soft, #EEF0F5); color: var(--text); vertical-align: middle; }
.avrn-table td small { display: block; font-size: 12px; color: var(--text-2); }
.avrn-table tr.is-delivery td { background: #FFFBF1; }
.avrn-vals { color: var(--text-2) !important; overflow-wrap: anywhere; min-width: 200px; }
.avrn-name { display: flex; align-items: center; gap: 10px; min-width: 220px; } .avrn-name b { display: block; }
.avrn-tthumb { width: 56px; height: 36px; } .avrn-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.avrn-rsn { max-width: 280px; } .avrn-act { text-align: right; } .avrn-retry { height: 34px; font-size: 13px; }
.avrn-deliver { margin: 16px 0 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; gap: 10px; }
.avrn-deliver legend { padding: 0 4px; font-size: 14px; font-weight: 700; color: var(--text); }
.avrn-deliver label { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; cursor: pointer; }
.avrn-deliver label[hidden] { display: none; }
.avrn-deliver input { margin: 3px 0 0; width: 17px; height: 17px; accent-color: var(--indigo); }
.avrn-deliver b { display: block; font-size: 13.5px; color: var(--text); } .avrn-deliver small { display: block; font-size: 12px; color: var(--text-2); }
.avrn-confirm { padding: 8px 10px; border-radius: 8px; background: var(--amber-bg); color: var(--amber-text); font-size: 13px; font-weight: 600; }
.avrn-why { display: flex; gap: 6px; align-items: flex-start; margin: 12px 0 0; font-size: 13px; color: #B42339; }
.avrn-tabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin: -4px 0 8px; }
.avrn-tab { position: relative; padding: 10px 12px; font-size: 14px; font-weight: 600; color: var(--text-2); text-decoration: none; }
.avrn-tab.is-on { color: var(--indigo); } .avrn-tab.is-on::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--indigo); }
.avrn-verify { margin-left: auto; height: 36px; font-size: 13px; }
.avrn-keys { margin-top: 10px; }
.avrn-assets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.avrn-assets li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--border); border-radius: 10px; }
.avrn-athumb { width: 84px; height: 52px; } .avrn-assets span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.avrn-assets b { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .avrn-assets small { font-size: 12px; color: var(--text-2); }
.avrn-assets .po-chip { align-self: flex-start; height: 22px; font-size: 11.5px; }
.avrn-pv .po-chip .av-pf { width: 14px; height: 14px; }
.avrn-post { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.avrn-ph { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.avrn-av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #10152F; color: #fff; font-size: 13px; font-weight: 700; }
.avrn-ph b { display: block; font-size: 14px; color: var(--text); } .avrn-ph small { font-size: 12px; color: var(--muted); }
.avrn-ptext { margin: 0; padding: 0 12px 10px; font-size: 13px; color: var(--text); }
.avrn-pimg { display: block; height: 180px; background: #10152F; overflow: hidden; position: relative; } .avrn-pimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avrn-pimg .ph-art { display: block; width: 100%; height: 100%; }
.avrn-pfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: #F7F8FB; }
.avrn-pfoot small { display: block; font-size: 11px; color: var(--muted); } .avrn-pfoot b { font-size: 13.5px; color: var(--text); }
.avrn-cta { flex: none; padding: 7px 12px; border-radius: 6px; background: var(--track); font-size: 13px; font-weight: 600; color: var(--text); }
.avrn-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.avrn-events li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 8px; padding-left: 16px; position: relative; }
.avrn-events li::before { content: ""; position: absolute; left: 0; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--indigo); }
.avrn-events li.is-ok::before { background: var(--green); } .avrn-events li.is-warn::before { background: var(--amber); } .avrn-events li.is-bad::before { background: var(--red); }
.avrn-events li.is-pending::before { background: var(--grey); }
.avrn-events time { font-size: 12.5px; color: var(--text-2); } .avrn-events b { display: block; font-size: 13px; color: var(--text); } .avrn-events small { display: block; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 1500px) { .avrn-top { grid-template-columns: 130px minmax(0, 1fr) minmax(0, 1fr); } .avrn-cover { width: 130px; } }
@media (max-width: 1280px) { .avrn-grid { grid-template-columns: minmax(0, 1fr); } .avrn-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }
@media (max-width: 768px) {
  .avrn-top { grid-template-columns: minmax(0, 1fr); } .avrn-cover { width: 100%; height: 120px; }
  .avrn-steps { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); } .avrn-steps li::after { display: none; }
  .avrn-gatelist { grid-template-columns: minmax(0, 1fr); }
  .avrn-pick select { max-width: 100%; } .avrn-pick { flex: 1 1 100%; } .avrn-cancelwrap { align-items: flex-start; }
  .avrn-side { display: flex; }
}

/* ---------- Advertisement-35 · Launch result and rejected ads (avrs- this screen: the providers' review apart from the delivery / MindGrind workflow, the tiles, the table and the panel with the provider's rejection reason and the fix form; reuses avo-head / the D01 period menu, po-card / po-chip / po-btn / pm-menu, av-pf, av-thumb art, avw-strip / avw-link, avd-x) — plans/Advertisement-35.md, prototype/gen/advertisement35.css ---------- */
.avrs-head .po-btn { height: 44px; }
.avrs-scope { margin: 0 0 12px; }
.avrs-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; }
.avrs-grid.no-panel { grid-template-columns: minmax(0, 1fr); }
.avrs-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.avrs-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.avrs-tile { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); text-decoration: none; color: var(--text);
  box-shadow: 0 1px 2px rgba(16, 21, 47, 0.04); }
.avrs-tile:hover { border-color: #C9D2FF; } .avrs-tile.is-on { border-color: var(--indigo); box-shadow: inset 0 0 0 1px var(--indigo); }
.avrs-tile:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.avrs-tic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: 22px; background: var(--track); color: var(--text-2); }
.avrs-tile.is-green .avrs-tic { background: var(--green-bg); color: var(--green-text); } .avrs-tile.is-blue .avrs-tic { background: var(--indigo-bg); color: var(--indigo); }
.avrs-tile.is-red .avrs-tic { background: #FDECEF; color: #C8233A; } .avrs-tile.is-amber .avrs-tic { background: var(--amber-bg); color: var(--amber-text); }
.avrs-tile > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.avrs-tile b { font-size: 22px; font-weight: 700; } .avrs-tile span span { font-size: 13.5px; color: var(--text); } .avrs-tile small { font-size: 12px; color: var(--muted); }
.avrs-list { padding: 14px 16px; min-width: 0; }
.avrs-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.avrs-tools h2 { flex: 1 1 auto; margin: 0 8px 0 0; font-size: 17px; font-weight: 700; color: var(--text); white-space: nowrap; } .avrs-tools h2 span { color: var(--muted); font-weight: 500; }
.avrs-search { display: flex; align-items: center; gap: 8px; flex: 0 1 280px; min-width: 180px; height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.avrs-search .i { color: var(--muted); } .avrs-search input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 13.5px; background: none; color: var(--text); }
.avrs-select { height: 38px; padding: 0 28px 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13.5px; color: var(--text); background: var(--surface); }
.avrs-check { height: 38px; font-size: 13.5px; }
.avrs-scroll { position: relative; overflow-x: auto; }
.avrs-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--text); }
.avrs-table thead th { text-align: left; padding: 9px 6px; font-size: 12px; font-weight: 500; color: var(--text-2); background: #F7F8FB; white-space: nowrap; }
.avrs-table thead th:first-child { border-radius: 8px 0 0 8px; } .avrs-table thead th:last-child { border-radius: 0 8px 8px 0; }
.avrs-table td { padding: 8px 6px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.avrs-row { cursor: pointer; } .avrs-row:hover td { background: #FAFBFE; } .avrs-row td { height: 60px; }
.avrs-row.avrs-s-rejected td { background: #FFF6F7; } .avrs-row.avrs-s-rejected:hover td { background: #FDEFF1; }   /* never the app-wide .is-pending (a spinner) */
.avrs-row.is-on td { background: #F4F6FF; } .avrs-row.is-on td:first-child { box-shadow: inset 3px 0 0 var(--indigo); }
.avrs-name { display: flex; align-items: center; gap: 8px; min-width: 180px; } .avrs-name > span:last-child { min-width: 0; }
.avrs-thumb { width: 48px; height: 36px; }
.avrs-gic { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 7px; background: #F0F2F8; color: var(--muted); }
.avrs-link { display: block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: none; }
.avrs-link:hover { color: var(--indigo); text-decoration: underline; }
.avrs-name small, .avrs-when small { display: block; font-size: 12px; color: var(--text-2); }
.avrs-prov { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .avrs-prov .av-pf { width: 18px; height: 18px; }
.avrs-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--text-2); overflow-wrap: anywhere; }
.avrs-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.avrs-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2, #B7BDCB); }
.avrs-dot.is-green::before { background: var(--green); } .avrs-dot.is-blue::before { background: var(--indigo); } .avrs-dot.is-amber::before { background: #DB7900; }
.avrs-dot.is-red { color: #B42339; } .avrs-dot.is-red::before { background: var(--red); }
.avrs-when { white-space: nowrap; } .avrs-deliv { min-width: 130px; } .avrs-reason { display: block; max-width: 200px; margin-top: 3px; font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.avrs-row.avrs-s-rejected .avrs-reason { color: #B42339; } .avrs-na { color: var(--muted-2, #B7BDCB); } .avrs-table td.avrs-mono { white-space: nowrap; } .avrs-na2 { display: block; max-width: 70px; font-size: 12px; color: var(--muted); }
.avrs-act { text-align: right; } .avrs-do { height: 32px; padding: 0 10px; font-size: 12.5px; white-space: nowrap; }
.avrs-note { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.avrs-panel { position: sticky; top: 12px; display: flex; flex-direction: column; min-width: 0; max-height: calc(100vh - 150px); padding: 0; overflow: hidden; }
.avrs-ph { display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 10px; }
.avrs-pic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--track); color: var(--text-2); font-size: 20px; }
.avrs-pic.is-red { background: #E63D45; color: #fff; }
.avrs-pt { flex: 1 1 auto; min-width: 0; } .avrs-pt h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.avrs-pt b { display: block; font-size: 14.5px; font-weight: 500; color: var(--text); } .avrs-pt p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.avrs-x { text-decoration: none; }
.avrs-tabs { display: flex; gap: 18px; padding: 0 16px; border-bottom: 1px solid var(--border); }
.avrs-tab { padding: 10px 2px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 13.5px; color: var(--text-2); cursor: pointer; }
.avrs-tab.is-on { color: var(--indigo); border-bottom-color: var(--indigo); font-weight: 600; }
.avrs-pbody { flex: 1 1 auto; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.avrs-pbody section { display: flex; flex-direction: column; gap: 12px; } .avrs-pbody section[hidden] { display: none; }
.avrs-sum { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 14px; align-items: start; }
.avrs-cover { display: block; width: 160px; height: 160px; border-radius: 10px; overflow: hidden; background: var(--track); } .avrs-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avrs-cover .ph-art { display: block; height: 100%; }
.avrs-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 12px; margin: 0; font-size: 13px; }
.avrs-kv dt { color: var(--muted); } .avrs-kv dd { margin: 0; color: var(--text); overflow-wrap: anywhere; } .avrs-kv dd small { display: block; font-size: 11.5px; color: var(--muted); }
.avrs-kv a { color: var(--text); } .avrs-kv2 { padding-top: 10px; border-top: 1px solid var(--border-soft); }
.avrs-url { font-size: 12.5px; }
.avrs-reject { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 12px 14px; border: 1px solid #F6C9CF; border-radius: 10px; background: #FFF4F5; }
.avrs-reject > .i { font-size: 22px; color: #E63D45; } .avrs-reject small { display: block; font-size: 12.5px; color: #C8233A; }
.avrs-reject b { display: block; margin: 2px 0; font-size: 15px; color: var(--text); } .avrs-reject p { margin: 0 0 6px; font-size: 13px; color: var(--text-2); }
.avrs-reject .avrs-src { margin-top: 6px; color: var(--muted); font-size: 11.5px; }
.avrs-sib { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12.5px; color: var(--text-2); }
.avrs-open { margin: 0; }
.avrs-fix { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: #FAFBFE; }
.avrs-fix[hidden] { display: none; } .avrs-fix h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.avrs-f { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-2); }
.avrs-f input, .avrs-f select { height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13.5px; color: var(--text); background: var(--surface); min-width: 0; }
.avrs-err { color: #B42339; font-size: 12px; } .avrs-err[hidden] { display: none; }
.avrs-fixf { display: flex; justify-content: flex-end; gap: 8px; } .avrs-fixf .po-btn { height: 40px; }
.avrs-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.avrs-hist li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; }
.avrs-hist a { min-width: 0; color: var(--text); text-decoration: none; } .avrs-hist b { display: block; font-size: 13px; } .avrs-hist small { font-size: 12px; color: var(--muted); }
.avrs-muted { margin: 0; font-size: 13px; color: var(--muted); }
.avrs-pf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface); }
.avrs-pf .po-btn { height: 42px; flex: 1 1 auto; justify-content: center; } .avrs-pf .btn-primary { flex: 1 1 45%; }
.avrs-replace { flex: 1 0 100%; text-align: center; font-size: 12.5px; }
@media (max-width: 1280px) { .avrs-grid { grid-template-columns: minmax(0, 1fr); } .avrs-panel { position: static; max-height: none; } .avrs-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .avrs-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .avrs-tile { padding: 10px; } .avrs-tic { width: 36px; height: 36px; font-size: 18px; }
  .avrs-tools h2 { flex-basis: 100%; } .avrs-search { flex: 1 1 100%; } .avrs-sum { grid-template-columns: minmax(0, 1fr); } .avrs-cover { width: 100%; height: 180px; }
}

/* ---------- Advertisement-36 · Bulk actions and lifecycle (avbk- this screen: the campaign manager's selection column and bulk bar, and the bulk modal with its review table; reuses the D14 modal frame avd-modal / avd-backdrop / avd-mh / avd-mf, po-chip / po-btn, av-pf, av-thumb art, avw-strip / avw-link) — plans/Advertisement-36.md, prototype/gen/advertisement36.css ---------- */
.avo-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }   /* D01: Bulk actions next to the Analytics link */
.avbk-ck { width: 36px; text-align: center; } .avbk-ck input { width: 17px; height: 17px; accent-color: var(--indigo); cursor: pointer; }
.avbk-open[disabled] { opacity: 0.55; cursor: not-allowed; }
.avbk-bar { position: sticky; top: 8px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: #EEF1FF;
  color: var(--text); font-size: 13.5px; }
.avbk-bar[hidden] { display: none; } .avbk-bar .po-btn { height: 36px; font-size: 13px; } .avbk-bargap { flex: 1 1 auto; }
.avn-row.avbk-gone td { opacity: 0.45; }
.avbk-modal { width: min(1000px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: 20px 24px; }
.avbk-modal[aria-busy="true"] { cursor: progress; }
.avbk-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--indigo-bg); color: var(--indigo); font-size: 20px; }
.avbk-mh > div { flex: 1 1 auto; min-width: 0; }
.avbk-form { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.avbk-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.avbk-f { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text); min-width: 0; } .avbk-f > span { font-weight: 600; }
.avbk-f select, .avbk-f input { height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 9px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); }
.avbk-f small { font-size: 12.5px; color: var(--text-2); }
.avbk-ro { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 9px; background: #F7F8FB; font-weight: 500; }
/* backlog 3.24: the absolute budget amount with its currency */
.avbk-amtrow { display: flex; gap: 8px; min-width: 0; } .avbk-amtrow input { flex: 1 1 auto; min-width: 0; } .avbk-amtrow select { flex: none; width: 96px; }
.avbk-cur { flex: none; display: grid; place-items: center; min-width: 64px; height: 42px; padding: 0 10px; border: 1px solid var(--border); border-radius: 9px; background: #F7F8FB; }
.avbk-disconnect { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12px; color: var(--muted); }
.avbk-strip { margin: 0; }
.avbk-scroll { position: relative; overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.avbk-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--text); }
.avbk-table thead th { text-align: left; padding: 9px 10px; font-size: 12px; font-weight: 500; color: var(--text-2); background: #F7F8FB; white-space: nowrap; }
.avbk-table td { padding: 9px 10px; border-top: 1px solid var(--border-soft); vertical-align: middle; }
.avbk-row.is-skip td { background: #FAFAFB; color: var(--text-2); } .avbk-row.is-block td { background: #FFF6F7; }
.avbk-name { display: flex; align-items: center; gap: 10px; min-width: 220px; } .avbk-name > span:last-child { min-width: 0; }
.avbk-name b { display: block; font-size: 13.5px; } .avbk-name small { display: block; font-size: 12px; color: var(--text-2); }
.avbk-thumb { width: 52px; height: 36px; }
.avbk-gic { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 7px; background: #F0F2F8; color: var(--muted); }
.avbk-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px !important; color: var(--muted) !important; }
.avbk-prop { min-width: 150px; } .avbk-detail { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; } .avbk-detail[hidden] { display: none; }
.avbk-acct { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .avbk-acct .av-pf { width: 18px; height: 18px; }
.avbk-tag { display: inline-block; margin: 1px 4px 1px 0; padding: 1px 7px; border-radius: 5px; background: var(--track); font-size: 11.5px; color: var(--text-2); }
.avbk-sup { display: flex; align-items: flex-start; gap: 6px; min-width: 170px; font-size: 12.5px; } .avbk-sup .i { flex: none; font-size: 16px; margin-top: 1px; }
.avbk-sup.is-ok .i { color: var(--green); } .avbk-sup.is-warn .i { color: #DB7900; } .avbk-sup.is-skip .i { color: var(--muted); } .avbk-sup.is-block { color: #B42339; } .avbk-sup.is-block .i { color: var(--red); }
.avbk-notes { padding: 10px 14px; border: 1px solid #F3D9A8; border-radius: 10px; background: #FFF9EE; font-size: 13px; color: var(--text); }
.avbk-notes b { display: flex; align-items: center; gap: 6px; } .avbk-notes .i { color: #DB7900; }
.avbk-notes ul { margin: 6px 0 0; padding-left: 20px; color: var(--text-2); } .avbk-notes li { margin: 2px 0; }
.avbk-foot { position: sticky; bottom: -20px; background: var(--surface); padding: 10px 0 0; } .avbk-gap { flex: 1 1 auto; }
.avbk-result { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--text); }
@media (max-width: 768px) {
  .avbk-modal { width: calc(100vw - 16px); padding: 16px; } .avbk-top { grid-template-columns: minmax(0, 1fr); }
  .avbk-foot { flex-wrap: wrap; } .avbk-foot .po-btn { flex: 1 1 auto; } .avbk-gap { display: none; }
}

/* ---------- Advertisement-37 · Experiment setup (avxp- this screen: the rail, the form with the arms and the checks, the provider availability and the read-only plan; reuses avo-head, po-card / po-chip / po-btn, av-pf, av-thumb art, avw-strip / avw-link) — plans/Advertisement-37.md, prototype/gen/advertisement37.css ---------- */
.avxp-head .po-btn { height: 44px; } .avxp-head .avo-actions { flex-wrap: wrap; justify-content: flex-end; align-items: flex-end; }
.avxp-pick { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.avxp-pick select { height: 44px; max-width: 320px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 13px; color: var(--text); background: var(--surface); }
.avxp-new { position: relative; } .avxp-new summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .avxp-new summary::-webkit-details-marker { display: none; }
.avxp-newpop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: flex; flex-direction: column; gap: 8px; width: 300px; padding: 12px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface); box-shadow: 0 12px 30px rgba(16, 21, 47, 0.14); }
.avxp-newpop label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.avxp-newpop select, .avxp-emptypick select { height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13.5px; color: var(--text); background: var(--surface); }
.avxp-strip { margin: 0 0 12px; }
.avxp-grid { display: grid; grid-template-columns: 210px minmax(0, 1fr) 500px; gap: 16px; align-items: start; }
.avxp-rail { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 4px; padding: 10px; }
.avxp-step { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border-radius: 10px; text-decoration: none; color: var(--text); }
.avxp-step:hover { background: #F7F8FB; } .avxp-step.is-on { background: #EEF1FF; }
.avxp-sn { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--track); font-size: 14px; font-weight: 700; color: var(--text-2); }
.avxp-step.is-on .avxp-sn { background: var(--indigo); color: #fff; } .avxp-step.is-ok:not(.is-on) .avxp-sn { background: var(--green-bg); color: var(--green-text); }
.avxp-step b { display: block; font-size: 14px; } .avxp-step.is-on b { color: var(--indigo); } .avxp-step small { display: block; font-size: 12px; color: var(--muted); }
.avxp-form { display: flex; flex-direction: column; gap: 0; padding: 0; min-width: 0; }
.avxp-sec { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); scroll-margin-top: 12px; } .avxp-sec:last-child { border-bottom: 0; }
.avxp-sh { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.avxp-sh h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); } .avxp-sh h2 span { font-weight: 500; color: var(--muted); font-size: 15px; } .avxp-sh small { font-size: 12.5px; color: var(--muted); }
.avxp-h3 { margin: 6px 0 0; font-size: 16px; font-weight: 700; color: var(--text); }
.avxp-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 13px; color: var(--text); } .avxp-f > span { display: flex; justify-content: space-between; font-weight: 600; }
.avxp-f input, .avxp-f select, .avxp-f textarea { min-height: 40px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); min-width: 0; }
.avxp-f textarea { resize: vertical; line-height: 1.45; } .avxp-f input:disabled, .avxp-f select:disabled, .avxp-f textarea:disabled { background: #F7F8FB; color: var(--text-2); }
.avxp-f small { font-size: 12px; color: var(--text-2); } .avxp-count { font-style: normal; font-weight: 400; font-size: 12px; color: var(--muted); }
.avxp-ro { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 40px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; background: #F7F8FB; font-weight: 500; }
.avxp-ro .av-pf { width: 18px; height: 18px; } .avxp-ro a { color: var(--text); }
.avxp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.avxp-money { display: flex; align-items: stretch; gap: 0; } .avxp-money b { display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--border); border-right: 0; border-radius: 8px 0 0 8px; background: #F7F8FB; font-size: 13px; }
.avxp-money input { flex: 1 1 auto; border-radius: 0 8px 8px 0; }
.avxp-err { color: #B42339 !important; } .avxp-err[hidden] { display: none; }
.avxp-note { display: block; margin: 0; padding: 8px 12px; border-radius: 8px; background: #F4F7FF; font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.avxp-note > .i { margin-right: 6px; vertical-align: -2px; }
.avxp-note a { color: var(--indigo); }
.avxp-arms { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.avxp-arm { display: grid; grid-template-columns: 120px minmax(0, 0.8fr) minmax(0, 1.3fr) minmax(0, 1.3fr) 34px; gap: 8px; align-items: center; }
.avxp-arm select, .avxp-arm input { height: 38px; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; color: var(--text); background: var(--surface); min-width: 0; }
.avxp-arm select:disabled, .avxp-arm input:disabled { background: #F7F8FB; color: var(--text-2); }
.avxp-rm { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; } .avxp-rm:hover { background: #FDECEF; color: #C8233A; }
.avxp-add { align-self: flex-start; height: 38px; font-size: 13px; }
.avxp-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: 13.5px; }
.avxp-kv dt { color: var(--muted); } .avxp-kv dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.avxp-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.avxp-checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: start; font-size: 13px; color: var(--text); }
.avxp-checks li > .i { font-size: 18px; margin-top: 1px; } .avxp-checks li.is-ok > .i { color: var(--green); } .avxp-checks li.is-block > .i { color: var(--red); } .avxp-checks li.is-warn > .i { color: #DB7900; }
.avxp-checks li.is-block span { color: #B42339; } .avxp-checks a { font-size: 12.5px; }
.avxp-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.avxp-card { padding: 16px 18px; min-width: 0; } .avxp-card > h2 { margin: 0 0 10px; font-size: 18px; font-weight: 700; color: var(--text); }
.avxp-prov { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; }
.avxp-prov summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px; cursor: pointer; list-style: none; } .avxp-prov summary::-webkit-details-marker { display: none; }
.avxp-prov summary .av-pf { width: 26px; height: 26px; } .avxp-prov summary b { font-size: 14.5px; } .avxp-prov summary small { margin-left: auto; font-size: 12px; color: var(--muted); }
.avxp-prov ul { margin: 0; padding: 0 12px 10px 30px; font-size: 13px; } .avxp-prov li { margin: 4px 0; } .avxp-prov li small { display: block; font-size: 12px; color: var(--text-2); }
.avxp-prov p { margin: 0; padding: 0 12px 8px; }
.avxp-muted { margin: 0; font-size: 12.5px; color: var(--muted); }
.avxp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 10px 0; border: 1px solid var(--border); border-radius: 10px; }
.avxp-facts > div { padding: 10px 12px; min-width: 0; } .avxp-facts > div:nth-child(even) { border-left: 1px solid var(--border); } .avxp-facts > div:nth-child(n+3) { border-top: 1px solid var(--border); }
.avxp-table .po-chip { white-space: normal; height: auto; min-height: 24px; padding: 3px 8px; text-align: left; }
.avxp-facts dt { font-size: 12px; color: var(--muted); } .avxp-facts dd { margin: 2px 0 0; font-size: 14px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.avxp-facts dd small { display: block; font-size: 11.5px; font-weight: 400; color: var(--text-2); }
.avxp-scroll { position: relative; overflow-x: auto; }
.avxp-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--text); margin-bottom: 10px; }
.avxp-table th { text-align: left; padding: 8px; font-size: 12px; font-weight: 500; color: var(--text-2); background: #F7F8FB; white-space: nowrap; }
.avxp-table td { padding: 8px; border-bottom: 1px solid var(--border-soft); vertical-align: top; } .avxp-table td small { display: block; font-size: 12px; color: var(--text-2); }
.avxp-thumb { width: 72px; height: 48px; }
@media (max-width: 1440px) { .avxp-grid { grid-template-columns: 200px minmax(0, 1fr) 430px; } }
@media (max-width: 1280px) {
  .avxp-grid { grid-template-columns: minmax(0, 1fr); } .avxp-rail { position: static; flex-direction: row; overflow-x: auto; } .avxp-step { flex: 1 0 170px; }
}
@media (max-width: 768px) {
  .avxp-row { grid-template-columns: minmax(0, 1fr); } .avxp-arm { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px; } .avxp-arm select[name=creative_id], .avxp-arm select[name=copy_id] { grid-column: 1 / 3; }
  .avxp-sec { padding: 14px; } .avxp-rail { display: none; } .avxp-newpop { right: auto; left: 0; width: min(300px, calc(100vw - 32px)); }
}

/* ---------- Advertisement-38 · Optimization recommendations (avrc- this screen; avop- the Optimization switch of D37 / D38 / D40 over the avas-nav component; reuses avo-head, po-card / po-chip / po-btn / pm-menu, av-pf, av-thumb art, avw-strip, avl-d01, avd-menuwrap) — plans/Advertisement-38.md, prototype/gen/advertisement38.css ---------- */
.avop-nav { margin: 12px 0 2px; }
.avrc-head, .avru-head { align-items: flex-start; }
.avrc-head .avo-actions, .avru-head .avo-actions { align-self: flex-start; padding-top: 8px; flex-wrap: wrap; justify-content: flex-end; }
.avrc-head .po-btn, .avru-head .po-btn { height: 46px; }
.avrc-sources { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 2px 4px 14px; padding: 0; font-size: 12.5px; color: var(--text-2); }
.avrc-sources li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .avrc-sources .av-pf { width: 16px; height: 16px; flex: none; } .avrc-sources .i { font-size: 14px; flex: none; }
.avrc-sources li b { font-weight: 600; color: var(--text); } .avrc-sources li.is-off b { color: var(--text-2); } .avrc-sources .avrc-zone { color: var(--muted); }
.avrc-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 14px; align-items: end; margin: 0 0 14px; }
.avrc-filters label { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 13px; font-weight: 500; color: var(--text); }
.avrc-filters select { height: 44px; min-width: 0; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); }
.avrc-clear { align-self: center; padding-top: 20px; font-size: 14px; white-space: nowrap; }
.avrc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 16px; align-items: start; } .avrc-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.avrc-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.avrc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.avrc-tile { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 16px 18px; border-radius: 12px; color: var(--text); text-decoration: none; }
.avrc-tile:hover { border-color: #C9D2FF; }
.avrc-tic { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; font-size: 24px; }
.avrc-tile.is-blue .avrc-tic { background: var(--indigo-bg); color: var(--indigo); } .avrc-tile.is-green .avrc-tic { background: var(--green-bg); color: var(--green-text); }
.avrc-tile.is-grey .avrc-tic { background: var(--track); color: var(--text-2); }
.avrc-tt { display: flex; flex-direction: column; min-width: 0; } .avrc-tt small { font-size: 13.5px; color: var(--text-2); } .avrc-tt b { font-size: 24px; font-weight: 800; line-height: 1.2; }
.avrc-tt span { font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.avrc-list { min-width: 0; padding: 14px 16px 8px; }
.avrc-lh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .avrc-lh h2 { margin: 0; font-size: 19px; font-weight: 700; color: var(--text); }
.avrc-sort { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-2); }
.avrc-sort select { border: 0; background: none; font: inherit; font-size: 13px; color: var(--text); }
.avrc-scroll { position: relative; overflow-x: auto; }
.avrc-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--text); }
.avrc-table th { padding: 9px 6px; text-align: left; font-size: 12px; font-weight: 500; color: var(--text-2); background: #F7F8FB; white-space: nowrap; }
.avrc-table td { padding: 10px 6px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.avrc-table tr.is-on td { background: #F4F7FF; }
.avrc-rec { display: flex; align-items: center; gap: 10px; min-width: 200px; color: var(--text); text-decoration: none; }
.avrc-thumb { width: 56px; height: 40px; }
.avrc-rt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .avrc-rt b { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.avrc-rt span { max-width: 190px; overflow: hidden; font-size: 12px; color: var(--text-2); white-space: nowrap; text-overflow: ellipsis; }
.avrc-camp { display: flex; align-items: center; gap: 8px; min-width: 110px; } .avrc-camp .av-pf { flex: none; width: 20px; height: 20px; }
.avrc-camp > span { display: flex; flex-direction: column; } .avrc-camp b { font-size: 12.5px; font-weight: 600; } .avrc-camp > span > span { font-size: 12px; color: var(--text-2); }
.avrc-imp { display: flex; flex-direction: column; min-width: 100px; max-width: 130px; } .avrc-imp b { font-size: 13px; font-weight: 600; } .avrc-imp small { font-size: 11.5px; color: var(--muted); }
.avrc-plan { display: block; margin-top: 4px; font-size: 11.5px; color: var(--text-2); }
.avrc-type small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.avrc-acts { white-space: nowrap; } .avrc-acts .avd-menuwrap { display: inline-block; vertical-align: middle; }
.avrc-act.po-btn { height: 34px; padding: 0 11px; font-size: 13px; vertical-align: middle; }
.avrc-panel { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 14px; min-width: 0; max-height: calc(100vh - 24px); overflow-y: auto; padding: 16px 18px; }
.avrc-ph { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .avrc-ph h2 { margin: 0; font-size: 19px; font-weight: 700; color: var(--text); }
.avrc-x { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--text-2); } .avrc-x:hover { background: #F4F6FB; }
.avrc-hero { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding-bottom: 14px; border-bottom: 1px solid var(--border-soft); }
.avrc-hthumb { width: 110px; height: 70px; }
.avrc-ht { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .avrc-ht b { font-size: 15px; line-height: 1.3; color: var(--text); }
.avrc-ht span { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); } .avrc-ht .av-pf { flex: none; width: 16px; height: 16px; } .avrc-ht small { font-size: 12px; color: var(--muted); }
.avrc-sec h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--text); }
.avrc-sh { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .avrc-sh h3 { margin: 0; } .avrc-sh .po-link { font-size: 13px; }
.avrc-box { padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; } .avrc-box > b { font-size: 14px; color: var(--text); }
.avrc-box > p { margin: 4px 0 10px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.avrc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--border-soft); }
.avrc-facts > div { min-width: 0; padding: 9px 8px 7px 0; } .avrc-facts > div:nth-child(even) { padding-left: 12px; border-left: 1px solid var(--border-soft); }
.avrc-facts > div:nth-child(n+3) { border-top: 1px solid var(--border-soft); }
.avrc-facts dt { font-size: 12px; color: var(--muted); } .avrc-facts dd { margin: 4px 0 0; } .avrc-facts dd b { display: block; font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.avrc-facts dd small { display: block; font-size: 11.5px; color: var(--muted); }
.avrc-src { display: flex; gap: 6px; margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-2); } .avrc-src .i { flex: none; margin-top: 2px; }
.avrc-ctable { width: 100%; border-collapse: collapse; font-size: 12.5px; color: var(--text); }
.avrc-ctable th { padding: 7px 6px; text-align: left; font-size: 11.5px; font-weight: 500; color: var(--text-2); background: #F7F8FB; }
.avrc-ctable td { padding: 7px 6px; border-bottom: 1px solid var(--border-soft); vertical-align: top; overflow-wrap: anywhere; } .avrc-ctable td.is-changed { font-weight: 700; }
.avrc-total { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; color: var(--text); }
.avrc-note, .avrc-decided { margin: 0; font-size: 12.5px; }
.avrc-etiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.avrc-etile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.avrc-etile small { font-size: 12px; color: var(--text-2); } .avrc-etile b { font-size: 19px; font-weight: 800; color: var(--text); } .avrc-etile em { font-size: 11px; font-style: normal; color: var(--muted); }
.avrc-delta { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; } .avrc-delta .i { font-size: 12px; }
.avrc-delta.is-green { color: var(--green-text); } .avrc-delta.is-red { color: #C8233A; } .avrc-delta.is-grey { color: var(--muted); }
.avrc-trend { margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.avrc-trend figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text); }
.avrc-trend figcaption span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); }
.avrc-trend figcaption i { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--indigo); } .avrc-trend figcaption i.is-prev { border-top: 2px dashed #9CA3AF; margin-left: 8px; }
.avrc-chart { position: relative; height: 90px; margin-top: 14px; } .avrc-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.avrc-chart polyline { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; } .avrc-chart polyline.is-cur { stroke: var(--indigo); }
.avrc-chart polyline.is-prev { stroke: #9CA3AF; stroke-dasharray: 5 4; }
.avrc-ymax { position: absolute; top: -14px; right: 0; font-size: 11px; color: var(--muted); }
.avrc-xl { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: var(--muted); }
.avrc-fresh { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.avrc-auth { display: flex; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.45; } .avrc-auth .i { flex: none; margin-top: 2px; }
.avrc-auth.is-safety, .avrc-auth.is-grant { background: #F1FAF5; color: var(--green-text); } .avrc-auth.is-approval { background: var(--amber-bg); color: var(--amber-text); }
.avrc-foot { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 8px; } .avrc-foot:empty { display: none; }
.avrc-foot .po-btn { height: 46px; justify-content: center; font-size: 14px; }
.avrc-dform { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: #FAFBFD; }
.avrc-dform[hidden] { display: none; }
.avrc-dform label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; color: var(--text); }
.avrc-dform label > span { display: flex; justify-content: space-between; } .avrc-dform em { font-style: normal; font-weight: 400; font-size: 12px; color: var(--muted); }
.avrc-dform select, .avrc-dform textarea { min-height: 40px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13.5px; color: var(--text); background: var(--surface); }
.avrc-err { font-size: 12px; color: #B42339; } .avrc-err[hidden] { display: none; }
.avrc-dacts { display: flex; justify-content: flex-end; gap: 8px; } .avrc-dacts .po-btn { height: 38px; font-size: 13.5px; }
.avl-d01 + .avrc-d01 { margin-left: 16px; }
@media (max-width: 1440px) { .avrc-grid { grid-template-columns: minmax(0, 1fr) 420px; } }
@media (max-width: 1280px) { .avrc-grid { grid-template-columns: minmax(0, 1fr); } .avrc-panel { position: static; max-height: none; } }
@media (max-width: 768px) {
  .avrc-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .avrc-clear { padding-top: 0; } .avrc-tiles { grid-template-columns: minmax(0, 1fr); }
  .avrc-hero { grid-template-columns: 80px minmax(0, 1fr); } .avrc-hthumb { width: 80px; height: 54px; } .avrc-hchip { grid-column: 2; justify-self: start; }
  .avrc-foot { grid-template-columns: minmax(0, 1fr); } .avrc-etile b { font-size: 16px; } .avrc-panel { padding: 14px; }
  .avl-d01 + .avrc-d01 { margin-left: 0; }
  .avrc-head, .avru-head { flex-wrap: wrap; } .avrc-head .avo-title, .avru-head .avo-title { flex: 1 1 100%; width: 100%; }
  .avrc-head h1, .avru-head h1 { font-size: 25px; overflow-wrap: anywhere; } .avop-nav { max-width: 100%; }
}
/* ---------- Advertisement-39 · Recommendation details and change plan (avrd- the right drawer over the recommendations page: the outcome strip, the performance per campaign, the editable change plan with its total, assumptions, authorization, measurement and the effective date; reuses po-chip / po-btn, av-pf, avw-strip / avw-link) — plans/Advertisement-39.md, prototype/gen/advertisement39.css ---------- */
.avrd-back { position: fixed; inset: 0; z-index: 60; background: rgba(16, 21, 47, 0.28); }
.avrd { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; display: flex; flex-direction: column; width: 520px; max-width: 100%; background: var(--surface);
  box-shadow: -18px 0 40px rgba(16, 21, 47, 0.16); }
.avrd-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 20px 12px; border-bottom: 1px solid var(--border-soft); }
.avrd-h h2 { margin: 0; font-size: 19px; font-weight: 700; color: var(--text); }
.avrd-x { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: var(--text-2); } .avrd-x:hover { background: #F4F6FB; }
.avrd-body { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 14px 20px 18px; }
.avrd-title { display: flex; align-items: flex-start; gap: 12px; } .avrd-title b { display: block; font-size: 15px; color: var(--text); } .avrd-title small { display: block; font-size: 12.5px; color: var(--text-2); }
.avrd-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--green-bg); color: var(--green-text); font-size: 19px; }
.avrd-outcome { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 14px; border-radius: 10px; }
.avrd-outcome.is-amber { background: #FFF8EC; } .avrd-outcome.is-blue { background: #F4F7FF; }
.avrd-outcome b { font-size: 14px; color: var(--text); } .avrd-outcome p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.avrd-oic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #FFE9C7; color: #C77700; font-size: 18px; }
.avrd-outcome.is-blue .avrd-oic { background: var(--indigo-bg); color: var(--indigo); }
.avrd-outcome .po-chip { height: auto; min-height: 24px; white-space: normal; text-align: center; }
.avrd-sec h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--text); } .avrd-sec h3 .i { font-size: 15px; color: var(--text-2); }
.avrd-scroll { position: relative; overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.avrd-table { width: 100%; border-collapse: collapse; font-size: 12.5px; color: var(--text); }
.avrd-table th { padding: 8px; text-align: left; font-size: 11.5px; font-weight: 600; color: var(--text-2); background: #F7F8FB; white-space: nowrap; }
.avrd-table td { padding: 8px; border-top: 1px solid var(--border-soft); vertical-align: top; } .avrd-table td small { display: block; font-size: 11px; color: var(--muted); }
.avrd-table .num { text-align: right; white-space: nowrap; } .avrd-table tfoot td { font-weight: 700; background: #FAFBFD; }
.avrd-table .av-pf { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; }
.avrd-table td.is-up { color: var(--green-text); } .avrd-table td.is-down { color: #C8233A; }
.avrd-amt { display: inline-flex; align-items: stretch; } .avrd-amt > span[aria-hidden] { display: grid; place-items: center; padding: 0 6px; border: 1px solid var(--border); border-right: 0;
  border-radius: 7px 0 0 7px; background: #F7F8FB; font-size: 11.5px; color: var(--text-2); }
.avrd-amt input { width: 86px; height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: 0 7px 7px 0; font: inherit; font-size: 13px; color: var(--text); text-align: right; }
.avrd-amt input.is-invalid { border-color: #E4546B; background: #FFF6F7; }
.avrd-err { display: block; margin-top: 3px; font-size: 11.5px; color: #B42339; } .avrd-err[hidden] { display: none; }
.avrd-note { margin: 6px 0 0; font-size: 11.5px; color: var(--muted); }
.avrd-check { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; } .avrd-check.is-ok { color: var(--green-text); } .avrd-check.is-bad { color: #B42339; }
.avrd-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.avrd-mini { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; } .avrd-mini h3 { font-size: 13.5px; margin-bottom: 4px; }
.avrd-mini ul { margin: 0 0 4px; padding-left: 16px; font-size: 12px; line-height: 1.45; color: var(--text-2); } .avrd-mini li { margin: 2px 0; }
.avrd-h3b { margin-top: 8px !important; }
.avrd-strip { margin: 0; font-size: 12.5px; }
.avrd-f { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 20px 16px; border-top: 1px solid var(--border-soft); background: var(--surface); }
.avrd-eff { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--text); }
.avrd-eff input { height: 42px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; color: var(--text); }
.avrd-eff small { font-weight: 400; font-size: 11.5px; color: var(--muted); }
.avrd-fb { display: flex; gap: 8px; margin-left: auto; } .avrd-fb .po-btn { height: 44px; }
@media (max-width: 768px) {
  .avrd { width: 100%; z-index: 82; bottom: calc(64px + env(safe-area-inset-bottom)); } .avrd-back { z-index: 81; } .avrd-body { padding: 12px 14px 16px; } .avrd-h, .avrd-f { padding-left: 14px; padding-right: 14px; }
  .avrd-cols { grid-template-columns: minmax(0, 1fr); } .avrd-outcome { grid-template-columns: 36px minmax(0, 1fr); } .avrd-outcome .po-chip { grid-column: 2; justify-self: start; }
  .avrd-fb { width: 100%; } .avrd-fb .po-btn { flex: 1 1 0; justify-content: center; }
}
/* ---------- Advertisement-40 · Ads automation rules (avru- this screen: the five tiles, the rules table with the scope, the effect sentence, the authorization and the last action, the execution history; reuses avo-head, avop-nav, po-card / po-chip / po-btn / pm-menu, avd-menuwrap, avw-strip / avw-link) — plans/Advertisement-40.md, prototype/gen/advertisement40.css ---------- */
.avru-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 4px 0 14px; }
.avru-tile { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 14px 16px; border-radius: 12px; }
.avru-tic { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; font-size: 22px; }
.avru-tile.is-indigo .avru-tic { background: var(--indigo-bg); color: var(--indigo); } .avru-tile.is-green .avru-tic { background: var(--green-bg); color: var(--green-text); }
.avru-tile.is-grey .avru-tic { background: var(--track); color: var(--text-2); } .avru-tile.is-blue .avru-tic { background: #EAF4FF; color: #2F6FD6; }
.avru-tt { display: flex; flex-direction: column; min-width: 0; } .avru-tt b { font-size: 21px; font-weight: 800; line-height: 1.2; color: var(--text); overflow-wrap: anywhere; }
.avru-tt .l { font-size: 13.5px; font-weight: 600; color: var(--text); } .avru-tt small { font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; }
.avru-strip { margin: 0 0 14px; }
.avru-rules, .avru-history { min-width: 0; padding: 14px 16px 8px; margin-bottom: 14px; }
.avru-lh { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; } .avru-lh h2 { margin: 0; font-size: 19px; font-weight: 700; color: var(--text); }
.avru-grants { display: flex; gap: 6px; flex: 1 1 400px; margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-2); } .avru-grants .i { flex: none; margin-top: 2px; color: var(--green-text); }
.avru-scroll { position: relative; overflow-x: auto; }
.avru-table, .avru-htable { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--text); }
.avru-table th, .avru-htable th { padding: 9px 8px; text-align: left; font-size: 12px; font-weight: 500; color: var(--text-2); background: #F7F8FB; white-space: nowrap; }
.avru-table td, .avru-htable td { padding: 10px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.avru-table td small, .avru-htable td small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-2); }
.avru-name { display: block; min-width: 170px; font-size: 13.5px; font-weight: 600; } .avru-mod { color: var(--muted) !important; font-size: 11.5px !important; }
.avru-tile.is-text .avru-tt b { font-size: 16px; }
.avru-scope { display: block; min-width: 150px; font-weight: 500; }
.avru-effect { min-width: 200px; max-width: 280px; line-height: 1.4; }
.avru-auth { display: block; min-width: 150px; font-weight: 600; } .avru-auth.is-green { color: var(--green-text); } .avru-auth.is-amber { color: var(--amber-text); } .avru-auth.is-blue { color: #2F6FD6; }
.avru-when { display: block; white-space: nowrap; }
.avru-inc { color: var(--amber-text) !important; }
.avru-table .po-chip.is-indigo, .avru-htable .po-chip.is-indigo { background: var(--indigo-bg); color: var(--indigo); }
.avru-table .po-chip.is-violet, .avru-htable .po-chip.is-violet { background: #F1ECFF; color: #6B3FD6; }
.avru-dot { display: inline-flex; align-items: flex-start; gap: 6px; min-width: 120px; font-weight: 500; } .avru-dot::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: #9CA3AF; }
.avru-dot.is-green::before { background: var(--green); } .avru-dot.is-indigo::before { background: var(--indigo); } .avru-dot.is-blue::before { background: #2F6FD6; }
.avru-dot.is-amber::before { background: #F59E0B; } .avru-dot.is-red::before { background: var(--red); }
.avru-acts { white-space: nowrap; } .avru-acts .avd-menuwrap { display: inline-block; vertical-align: middle; }
.avru-ib { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-right: 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  color: var(--indigo); vertical-align: middle; cursor: pointer; text-decoration: none; } .avru-ib:hover { background: var(--indigo-bg); } .avru-ib[disabled] { opacity: 0.45; cursor: not-allowed; }
.avru-hh { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.avru-hh h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 19px; font-weight: 700; color: var(--text); } .avru-hh h2 .i { color: var(--indigo); }
.avru-hf { display: flex; gap: 8px; flex-wrap: wrap; } .avru-hf select { height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; color: var(--text); background: var(--surface); }
.avru-full { margin-left: auto; } .avru-full.po-btn { height: 38px; font-size: 13.5px; }
.avru-t { white-space: nowrap; }
.avru-det { min-width: 280px; line-height: 1.4; } .avru-det > span { display: block; } .avru-det small b { color: var(--text); font-weight: 600; }
@media (max-width: 1440px) { .avru-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .avru-tiles { grid-template-columns: minmax(0, 1fr); } .avru-full { margin-left: 0; } .avru-rules, .avru-history { padding: 12px; }
  .avru-hf { width: 100%; } .avru-hf label, .avru-hf select { flex: 1 1 0; min-width: 0; }
}

/* ---------- Advertisement-41 · Build optimization rule (avrb- this screen: the stepper, the IF / AND condition rows with the window and the two data gates, the THEN row, the target scope and review cards, the right side — the checks and the rule preview with the objects in scope; reuses avo-head, avop-nav, po-card / po-chip / po-btn, avw-strip / avw-link) — plans/Advertisement-41.md, prototype/gen/advertisement41.css ---------- */
.avrb-acts { flex-wrap: wrap; justify-content: flex-end; }
.avrb-back { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 10px; font-size: 15px; font-weight: 600; color: var(--indigo); text-decoration: none; }
.avrb-back .i { font-size: 18px; } .avrb-back:hover { text-decoration: underline; }
.avrb-vsel select { height: 42px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); }
.avrb-pending, .avrb-old, .avrb-err { margin: 0 0 12px; align-items: center; flex-wrap: wrap; } .avrb-pending > span:first-of-type { flex: 1 1 360px; }
.avrb-pacts { display: flex; gap: 8px; margin-left: auto; }
.avrb-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.avrb-main, .avrb-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.avrb-form { padding: 14px 18px 16px; }
.avrb-steps { display: flex; gap: 6px; margin: 0 0 14px; padding: 0 0 12px; list-style: none; border-bottom: 1px solid var(--border-soft); overflow-x: auto; }
.avrb-steps li { flex: 1 1 0; min-width: max-content; }
.avrb-step { display: inline-flex; align-items: center; gap: 10px; padding: 4px 6px 8px; font-size: 14.5px; font-weight: 500; color: var(--text-2); text-decoration: none; border-bottom: 2px solid transparent; }
.avrb-sn { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--track); color: var(--text-2); font-size: 13.5px; font-weight: 700; }
.avrb-step.is-on { color: var(--text); font-weight: 600; border-bottom-color: var(--indigo); } .avrb-step.is-on .avrb-sn { background: var(--indigo); color: #fff; }
.avrb-step.is-error .avrb-sn { background: #FDECEF; color: #B42339; } .avrb-step.is-error { color: #B42339; }
.avrb-sec + .avrb-sec { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.avrb-sh { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.avrb-sh h2, .avrb-sch h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); } .avrb-sh p, .avrb-sch p { margin: 3px 0 0; font-size: 13.5px; color: var(--text-2); max-width: 520px; }
.avrb-match { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-2); }
.avrb-match b { display: inline-flex; align-items: center; height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; font-weight: 500; color: var(--text); background: #F7F8FB; }
.avrb-conds { display: flex; flex-direction: column; gap: 10px; }
.avrb-cond { display: grid; grid-template-columns: 42px minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr) 34px; gap: 8px; align-items: center; padding: 0; }
.avrb-cond.is-gate { margin-top: 10px; grid-template-columns: 42px minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr) 34px; }
.avrb-cond > .avrb-def { grid-column: 2 / span 3; }
.avrb-and { justify-self: start; padding: 3px 8px; border-radius: 12px; background: var(--indigo-bg); color: var(--indigo); font-size: 11.5px; font-weight: 700; letter-spacing: .3px; }
.avrb-cond:first-child > .avrb-and { background: none; padding-left: 0; font-size: 15px; color: var(--text); }
.avrb-gl { display: flex; align-items: center; height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: #F7F8FB; font-size: 14px; font-weight: 500; color: var(--text); }
.avrb-op { font-size: 14px; color: var(--text-2); padding-left: 4px; }
.avrb-gh { grid-column: 5; font-size: 11.5px; color: var(--muted); }
.avrb-cond.is-gate .avrb-gh { grid-column: 2 / span 3; margin-top: -4px; }
.avrb-f { position: relative; display: flex; align-items: center; min-width: 0; }
.avrb-f select, .avrb-f input { width: 100%; min-width: 0; height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); }
.avrb-f select:disabled, .avrb-f input:disabled { background: #F7F8FB; color: var(--text-2); }
.avrb-val { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 0 10px 0 8px; height: 40px; }
.avrb-val input { border: 0; height: 38px; padding: 0 4px; background: transparent; } .avrb-val input:focus { outline: none; }
.avrb-val:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, .12); }
.avrb-pre, .avrb-suf { flex: none; font-size: 14px; color: var(--text-2); } .avrb-pre:empty, .avrb-suf:empty { display: none; }
.avrb-del { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.avrb-del:hover { background: #FDECEF; color: #B42339; } .avrb-del .i { font-size: 18px; }
.avrb-add { margin-top: 14px; }
.avrb-then-row { display: grid; grid-template-columns: minmax(0, 1.2fr) 150px minmax(0, 1fr); gap: 10px; align-items: center; }
.avrb-ctype { display: flex; flex-direction: column; padding: 4px 12px; border: 1px solid var(--border-soft); border-radius: 8px; background: #F7F8FB; }
.avrb-ctype small { font-size: 11.5px; color: var(--muted); } .avrb-ctype b { font-size: 14px; font-weight: 500; color: var(--text); }
.avrb-ferr { grid-column: 2 / -1; display: block; margin-top: 2px; font-size: 12px; color: #B42339; }
.avrb-f.is-invalid select, .avrb-f.is-invalid input, .avrb-val.is-invalid { border-color: #F0546A; }
.avrb-lab .avrb-ferr, .avrb-then-row .avrb-ferr { position: static; }
/* the right side */
.avrb-checks, .avrb-preview { padding: 14px 18px; }
.avrb-checks h2, .avrb-pvh h2 { margin: 0 0 10px; font-size: 18px; font-weight: 700; color: var(--text); }
.avrb-cklist { margin: 0; padding: 0; list-style: none; }
.avrb-ck { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 0; }
.avrb-ck + .avrb-ck { border-top: 1px solid var(--border-soft); }
.avrb-ckic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff; } .avrb-ckic .i { font-size: 15px; }
.avrb-ck.is-warn .avrb-ckic { background: #F59E0B; } .avrb-ck.is-block .avrb-ckic { background: var(--red); }
.avrb-ckt { display: flex; flex-direction: column; min-width: 0; } .avrb-ckt b { font-size: 14px; font-weight: 600; color: var(--text); }
.avrb-ckt small { font-size: 12.5px; line-height: 1.4; color: var(--text-2); overflow-wrap: anywhere; }
.avrb-state { align-self: center; padding: 4px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; background: var(--green-bg); color: var(--green-text); }
.avrb-state.is-warn { background: var(--amber-bg); color: var(--amber-text); } .avrb-state.is-block { background: #FDECEF; color: #B42339; }
.avrb-pvh { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .avrb-pvh h2 { margin: 0; }
.avrb-pvgrid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; margin-top: 10px; }
.avrb-logic { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.avrb-if, .avrb-then { padding: 10px 12px; border-radius: 10px; background: #F4F7FF; font-size: 13px; color: var(--text); }
.avrb-if ul { margin: 6px 0 0; padding-left: 18px; } .avrb-if li { margin: 3px 0; line-height: 1.35; } .avrb-if li.avrb-gate { color: var(--text-2); }
.avrb-lead { margin: 0; font-size: 13.5px; } .avrb-lead b { color: var(--indigo); font-weight: 700; }
.avrb-then .avrb-lead { font-weight: 600; } .avrb-then .avrb-lead b { text-transform: uppercase; }
.avrb-then dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; margin: 8px 0 0; font-size: 12.5px; }
.avrb-then dt { color: var(--text-2); } .avrb-then dd { margin: 0; overflow-wrap: anywhere; } .avrb-then dd small { display: block; color: var(--muted); }
.avrb-arrow { align-self: center; margin: 4px 0; color: var(--indigo); } .avrb-arrow .i { font-size: 18px; }
.avrb-objs { min-width: 0; }
.avrb-oh { display: flex; flex-direction: column; margin: 0 0 8px; } .avrb-oh b { font-size: 13.5px; color: var(--text); } .avrb-oh small { font-size: 12px; color: var(--text-2); }
.avrb-olist { margin: 0; padding: 0; list-style: none; }
.avrb-olist li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 7px 0; border-top: 1px solid var(--border-soft); }
.avrb-olist .av-pf { width: 20px; height: 20px; margin-top: 2px; }
.avrb-olist span { display: flex; flex-direction: column; min-width: 0; } .avrb-olist b { font-size: 13px; font-weight: 600; color: var(--text); }
.avrb-olist small { font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; } .avrb-otext { color: var(--muted) !important; }
.avrb-olist .po-chip.is-indigo { background: var(--indigo-bg); color: var(--indigo); }
.avrb-more, .avrb-none { margin: 6px 0; font-size: 12.5px; color: var(--text-2); }
.avrb-pnote { margin-top: 10px; font-size: 12px; }
/* the scope and review cards */
.avrb-scope, .avrb-review { display: grid; gap: 12px 16px; align-items: start; margin-top: 16px; padding: 14px 18px 16px; }
.avrb-scope { grid-template-columns: minmax(160px, 1fr) minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.6fr); }
/* backlog 3.21: the rule's own schedule */
.avrb-runs .avrb-pair { flex-direction: column; } .avrb-runs .avrb-pair select { flex: none; width: 100%; min-width: 0; }
.avrb-runs .avrb-pair input[type="time"] { flex: none; width: 100%; min-width: 0; }
.avrb-review { grid-template-columns: minmax(170px, 1fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr); }
.avrb-lab { flex-direction: column; align-items: stretch; gap: 6px; } .avrb-lab > span:first-child { font-size: 13px; font-weight: 500; color: var(--text-2); }
.avrb-lab small { font-size: 12px; color: var(--muted); }
.avrb-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 40px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.avrb-chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px 0 10px; border-radius: 6px; background: var(--indigo-bg); color: var(--indigo); font-size: 13px; font-weight: 500; }
.avrb-chip button { display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 5px; background: none; color: var(--indigo); cursor: pointer; }
.avrb-chip button:hover { background: #DDE3FF; } .avrb-chip .i { font-size: 13px; }
.avrb-chips select { flex: 1 1 140px; min-width: 120px; height: 30px; border: 0; background: transparent; font-size: 13px; color: var(--text-2); }
.avrb-pair { display: flex; gap: 8px; } .avrb-pair input { flex: 1 1 0; } .avrb-pair select { flex: 0 0 100px; width: 100px; }
.avrb-desc { grid-column: span 1; }
.avrb-effect { grid-column: 1 / -1; display: flex; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 10px; background: #F4F7FF; font-size: 13.5px; color: var(--text); }
.avrb-effect b { flex: none; color: var(--indigo); }
.avrb-meta { grid-column: 1 / -1; margin: 0; font-size: 12.5px; color: var(--text-2); }
@media (max-width: 1440px) { .avrb-scope { grid-template-columns: repeat(3, minmax(0, 1fr)); } .avrb-sch { grid-column: 1 / -1; } .avrb-camps { grid-column: span 2; } }
@media (max-width: 1280px) { .avrb-grid { grid-template-columns: minmax(0, 1fr); } .avrb-review { grid-template-columns: repeat(2, minmax(0, 1fr)); } .avrb-review .avrb-sch { grid-column: 1 / -1; } }
@media (max-width: 768px) {
  .avrb-acts { width: 100%; justify-content: flex-start; } .avrb-head h1 { font-size: 25px; overflow-wrap: anywhere; }
  .avrb-cond, .avrb-cond.is-gate { grid-template-columns: 42px minmax(0, 1fr) 34px; } .avrb-cond > .avrb-f, .avrb-cond > .avrb-gl, .avrb-cond > .avrb-op { grid-column: 2; }
  .avrb-cond > .avrb-del { grid-column: 3; grid-row: 1; } .avrb-cond > .avrb-def, .avrb-cond.is-gate .avrb-gh, .avrb-ferr { grid-column: 2 / -1; }
  .avrb-then-row, .avrb-pvgrid, .avrb-scope, .avrb-review { grid-template-columns: minmax(0, 1fr); } .avrb-camps { grid-column: auto; }
  .avrb-form, .avrb-checks, .avrb-preview, .avrb-scope, .avrb-review { padding: 12px; } .avrb-steps li { flex: none; }
}

/* ---------- Advertisement-42 · Advertising workflow builder (avwf- this screen: the head's workflow and version controls, the problems strip, the palette with Nodes / Variables, the canvas — steps at their positions, SVG connections with branch labels, the dry-run marks — and the inspector for the workflow or the selected step with its example input and output; reuses avo-head, avop-nav, po-card / po-chip / po-btn / pm-menu, avd-menuwrap, avw-strip / avw-link) — plans/Advertisement-42.md, prototype/gen/advertisement42.css ---------- */
.avwf-head { flex-wrap: wrap; } .avwf-head .avo-title { flex: 1 1 min(720px, 100%); } .avwf-acts { flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-left: auto; }
.avwf-sel select { height: 42px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); }
.avwf-saved { font-size: 13.5px; color: var(--text-2); white-space: nowrap; }
.avwf-wfs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.avwf-wf { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  font-size: 13.5px; font-weight: 500; color: var(--text); text-decoration: none; } .avwf-wf.is-on { border-color: var(--indigo); color: var(--indigo); }
.avwf-pending, .avwf-bg, .avwf-issues .avw-strip, #avwf-old { margin: 0 0 12px; align-items: center; flex-wrap: wrap; } .avwf-pending > span:first-of-type { flex: 1 1 360px; }
.avwf-pacts { display: flex; gap: 8px; margin-left: auto; }
.avwf-grid { display: grid; grid-template-columns: 212px minmax(0, 1fr) 390px; gap: 14px; align-items: start; }
.avwf-pal, .avwf-insp { padding: 12px 14px; min-width: 0; }
.avwf-ptabs { display: flex; margin: 0 0 10px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.avwf-ptabs button { flex: 1 1 0; height: 36px; border: 0; background: var(--surface); font: inherit; font-size: 14px; color: var(--text-2); cursor: pointer; }
.avwf-ptabs button.is-on { background: var(--indigo-bg); color: var(--indigo); font-weight: 600; }
.avwf-pal h3 { margin: 12px 0 6px; font-size: 13.5px; font-weight: 700; color: var(--text); }
.avwf-pal ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.avwf-pi { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  font: inherit; font-size: 13.5px; color: var(--text); text-align: left; cursor: pointer; }
.avwf-pi .i { flex: none; font-size: 17px; color: var(--text-2); } .avwf-pi:hover:not(:disabled) { border-color: #C9D2FF; background: #F7F8FF; } .avwf-pi:disabled { opacity: .6; cursor: default; }
.avwf-phint { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.avwf-vars li { display: flex; flex-direction: column; padding: 6px 0; border-bottom: 1px solid var(--border-soft); }
.avwf-vars code { font-size: 12.5px; color: var(--indigo); } .avwf-vars small { font-size: 12px; color: var(--text-2); }
.avwf-canvas { padding: 0; overflow: hidden; }
.avwf-scroll { position: relative; height: 640px; overflow: auto; background-color: #FBFCFE;
  background-image: radial-gradient(#DCE1EA 1px, transparent 1px); background-size: 18px 18px; }
.avwf-board { position: relative; min-width: 100%; min-height: 100%; }
.avwf-edges { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.avwf-edge { fill: none; stroke: #7A8499; stroke-width: 1.5; } .avwf-edge.is-warn { stroke: #E0798A; stroke-dasharray: 5 4; } .avwf-edge.is-loop { stroke: var(--indigo); stroke-dasharray: 5 4; }
.avwf-ah { fill: #7A8499; }
.avwf-lab rect { fill: #fff; stroke: #CFE8DA; } .avwf-lab text { font: 600 11.5px/1 system-ui, sans-serif; fill: var(--green-text); }
.avwf-lab.is-warn rect { fill: #FDECEF; stroke: #F5B5C0; } .avwf-lab.is-warn text { fill: #B42339; }
.avwf-node { position: absolute; display: flex; align-items: center; gap: 10px; width: 212px; height: 62px; padding: 0 12px; border: 1px solid #D5DBE7; border-radius: 10px;
  background: #fff; box-shadow: 0 1px 2px rgba(20, 30, 60, .06); cursor: pointer; user-select: none; touch-action: none; }
.avwf-node:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.avwf-nic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #F1F3F8; color: var(--text-2); } .avwf-nic .i { font-size: 18px; }
.avwf-nt { display: flex; flex-direction: column; min-width: 0; } .avwf-nt b { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avwf-nt small { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avwf-node.is-condition { border-color: #B9C5FF; background: #EEF1FF; } .avwf-node.is-condition .avwf-nic { background: #fff; color: var(--indigo); }
.avwf-node.is-notify, .avwf-node.is-task { border-color: #F5C2CB; background: #FFF4F6; } .avwf-node.is-notify .avwf-nic, .avwf-node.is-task .avwf-nic { background: #FDE3E8; color: #C4314B; }
.avwf-node.is-budget .avwf-nic, .avwf-node.is-status .avwf-nic { background: var(--indigo-bg); color: var(--indigo); }
.avwf-node.is-end { background: #F7F8FB; } .avwf-node.is-trigger .avwf-nic { background: #EAF4FF; color: #2F6FD6; }
.avwf-node.is-sel { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 91, 253, .18); }
.avwf-node.is-err { border-color: #F0546A; box-shadow: 0 0 0 2px rgba(240, 84, 106, .15); }
.avwf-tr { position: absolute; right: -8px; top: -8px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: #fff; }
.avwf-tr .i { font-size: 12px; } .avwf-node.is-block .avwf-tr { background: #F59E0B; } .avwf-node.is-stop .avwf-tr { background: #9CA3AF; }
.avwf-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; padding: 8px 14px; border-top: 1px solid var(--border-soft); font-size: 12px; color: var(--text-2); }
.avwf-lg { display: inline-block; width: 10px; height: 10px; margin-right: -8px; border-radius: 50%; background: var(--green); }
.avwf-lg.is-block { background: #F59E0B; } .avwf-lg.is-stop { background: #9CA3AF; } .avwf-lg.is-err { background: #fff; border: 2px solid #F0546A; }
.avwf-ih { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .avwf-ih h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.avwf-x { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--text-2); cursor: pointer; } .avwf-x:hover { background: var(--track); }
.avwf-ihead { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; } .avwf-ihead > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.avwf-ihead b { font-size: 14.5px; color: var(--text); } .avwf-ihead small { font-size: 12.5px; color: var(--text-2); }
.avwf-ihead .avwf-nic { width: 44px; height: 44px; background: var(--indigo-bg); color: var(--indigo); }
.avwf-insp h3 { margin: 14px 0 6px; font-size: 13.5px; font-weight: 700; color: var(--text); }
.avwf-f { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; align-items: center; margin: 0 0 8px; }
.avwf-f[hidden] { display: none; }
.avwf-f > label, .avwf-f > span:first-child { font-size: 13px; color: var(--text-2); }
.avwf-in { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .avwf-in small { font-size: 11.5px; color: var(--muted); }
.avwf-in input, .avwf-in select, .avwf-in textarea, .avwf-f > input { width: 100%; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px;
  font: inherit; font-size: 13.5px; color: var(--text); background: var(--surface); }
.avwf-in textarea { height: auto; padding: 8px 10px; resize: vertical; }
.avwf-multi { display: flex; flex-direction: column; gap: 4px; max-height: 150px; overflow: auto; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; }
.avwf-multi label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.avwf-dl { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 6px 10px; margin: 8px 0 0; font-size: 13px; }
.avwf-dl dt { color: var(--text-2); } .avwf-dl dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.avwf-grants, .avwf-runs { margin: 0; padding: 0; list-style: none; }
.avwf-grants li { display: flex; gap: 8px; padding: 6px 0; font-size: 13px; } .avwf-grants li > .i { flex: none; margin-top: 2px; color: var(--green-text); }
.avwf-grants li.is-off > .i { color: var(--muted); } .avwf-grants span { display: flex; flex-direction: column; min-width: 0; } .avwf-grants small { font-size: 12px; color: var(--text-2); }
.avwf-runs li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 0; border-top: 1px solid var(--border-soft); font-size: 13px; }
.avwf-runs li > span:first-child { flex: 1 1 200px; display: flex; flex-direction: column; min-width: 0; } .avwf-runs small { font-size: 12px; color: var(--text-2); }
.avwf-cancel.po-btn { height: 32px; padding: 0 10px; font-size: 13px; }
.avwf-muted { margin: 4px 0; font-size: 12.5px; color: var(--text-2); }
.avwf-nissues { margin: 6px 0; padding: 0 0 0 18px; font-size: 12.5px; color: #B42339; } .avwf-nissues li.is-warning { color: var(--amber-text); }
.avwf-ex-t { margin: 0 0 6px; font-size: 12.5px; color: var(--text); } .avwf-ex-l { margin: 8px 0 4px; font-size: 12px; font-weight: 600; color: var(--indigo); }
.avwf-pre { margin: 0; max-height: 220px; overflow: auto; padding: 8px 10px; border-radius: 8px; background: #F4F7FF; font: 12px/1.45 ui-monospace, Consolas, monospace; color: var(--text);
  white-space: pre-wrap; overflow-wrap: anywhere; }
.avwf-delnode { margin-top: 14px; color: #B42339; }
.avwf-empty { padding: 10px 14px; }
@media (max-width: 1440px) { .avwf-grid { grid-template-columns: 190px minmax(0, 1fr) 340px; } }
@media (max-width: 1100px) { .avwf-grid { grid-template-columns: minmax(0, 1fr); } .avwf-pal ul { flex-direction: row; flex-wrap: wrap; } .avwf-pi { width: auto; } }
@media (max-width: 768px) {
  .avwf-head { align-items: stretch; } .avwf-head .avo-title { width: 100%; flex-basis: auto; } .avwf-acts { width: 100%; justify-content: flex-start; margin-left: 0; } .avwf-head h1 { font-size: 25px; overflow-wrap: anywhere; } .avwf-scroll { height: 460px; }
  .avwf-f { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ---------- Advertisement-43 · Automation grants and limits (avgr- this screen: the capability chip, five tiles, the grants table with the source chips and the ⋯ menu, the recent automation activity, the details card with the inherited / version-bound explanation, the revoke impact and the change history, the grant drawer with its live narrow / widen answer; reuses avo-head, avop-nav, po-card / po-chip / po-btn / pm-menu, avd-menuwrap, avw-strip / avw-link) — plans/Advertisement-43.md, prototype/gen/advertisement43.css ---------- */
.avgr-acts { flex-wrap: wrap; justify-content: flex-end; }
.avgr-cap { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface);
  font-size: 14px; font-weight: 500; color: var(--indigo); white-space: nowrap; } .avgr-cap .i { font-size: 17px; }
.avgr-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 4px 0 14px; }
.avgr-tile { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 14px 16px; border-radius: 12px; }
.avgr-tic { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; font-size: 22px; background: var(--indigo-bg); color: var(--indigo); }
.avgr-tile.is-green .avgr-tic { background: var(--green-bg); color: var(--green-text); } .avgr-tile.is-amber .avgr-tic { background: var(--amber-bg); color: var(--amber-text); }
.avgr-tile.is-grey .avgr-tic { background: var(--track); color: var(--text-2); }
.avgr-tt { display: flex; flex-direction: column; min-width: 0; } .avgr-tt .l { font-size: 13px; font-weight: 500; color: var(--text-2); }
.avgr-tt b { font-size: 21px; font-weight: 800; line-height: 1.25; color: var(--text); overflow-wrap: anywhere; } .avgr-tt small { font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; }
.avgr-tile[data-avgr-tile="expiry"] .avgr-tt b { font-size: 17px; }
.avgr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 410px; gap: 16px; align-items: start; }
.avgr-main, .avgr-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.avgr-list, .avgr-activity, .avgr-detail { padding: 14px 16px 10px; min-width: 0; }
.avgr-lh { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.avgr-lh h2 { margin: 0; font-size: 19px; font-weight: 700; color: var(--text); } .avgr-lh p { margin: 3px 0 0; font-size: 13.5px; color: var(--text-2); max-width: 620px; }
.avgr-scroll { position: relative; overflow-x: auto; }
.avgr-table, .avgr-atable { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--text); }
.avgr-table th, .avgr-atable th { padding: 9px 8px; text-align: left; font-size: 12px; font-weight: 500; color: var(--text-2); background: #F7F8FB; white-space: nowrap; }
.avgr-table td, .avgr-atable td { padding: 10px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.avgr-table td small { display: block; margin-top: 3px; font-size: 12px; color: var(--text-2); }
.avgr-table tr.is-sel td { background: #F7F8FF; } .avgr-table tr.is-off td { color: var(--text-2); }
.avgr-name { display: block; min-width: 120px; font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: none; } .avgr-name:hover { color: var(--indigo); }
.avgr-acct { display: flex !important; align-items: center; gap: 6px; } .avgr-acct .av-pf, .avgr-atable .av-pf { width: 18px; height: 18px; flex: none; vertical-align: middle; margin-right: 4px; }
.avgr-objs { min-width: 140px; max-width: 220px; } .avgr-nw { white-space: nowrap; }
.avgr-table .po-chip.is-indigo { background: var(--indigo-bg); color: var(--indigo); } .avgr-table .po-chip.is-violet { background: #F1ECFF; color: #6B3FD6; }
.avgr-acts .avd-menuwrap, .avgr-table .avd-menuwrap { display: inline-block; }
.avgr-dh { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .avgr-dh h2 { margin: 0; font-size: 19px; font-weight: 700; color: var(--text); }
.avgr-dh .po-btn { height: 38px; }
.avgr-dt { display: flex; align-items: center; gap: 12px; margin: 12px 0 8px; } .avgr-dt > span { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.avgr-dt b { font-size: 16px; color: var(--text); } .avgr-dt small { font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; }
.avgr-dmark { width: 40px !important; height: 40px !important; flex: none; padding: 6px; border-radius: 10px; background: #F4F7FF; }
.avgr-dl { display: grid; grid-template-columns: 138px minmax(0, 1fr); gap: 7px 12px; margin: 8px 0 12px; font-size: 13px; }
.avgr-dl dt { color: var(--text-2); } .avgr-dl dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.avgr-appr { display: flex; align-items: center; gap: 8px; } .avgr-av { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); font-size: 11px; font-weight: 700; }
.avgr-explain { font-size: 12.5px; margin: 0 0 12px; } .avgr-explain b { display: block; }
.avgr-impact h3, .avgr-hist h3 { display: flex; align-items: center; gap: 6px; margin: 4px 0 8px; font-size: 14.5px; font-weight: 700; color: var(--text); } .avgr-impact h3 .i { font-size: 15px; color: var(--muted); }
.avgr-impact ul, .avgr-live ul { margin: 0; padding: 0; list-style: none; }
.avgr-impact li { display: flex; gap: 10px; padding: 6px 0; } .avgr-impact li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.avgr-impact b { font-size: 13px; color: var(--text); } .avgr-impact small { font-size: 12px; color: var(--text-2); }
.avgr-iic { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #fff; } .avgr-iic .i { font-size: 13px; }
.avgr-impact li.is-warn .avgr-iic { background: #F59E0B; } .avgr-impact li.is-info .avgr-iic { background: #fff; color: var(--indigo); border: 1.5px solid var(--indigo); }
.avgr-revoke { margin-top: 8px; color: #B42339; }
.avgr-hist { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.avgr-hist ul { margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--text); } .avgr-hist li { padding: 4px 0; } .avgr-hist small { display: block; color: var(--text-2); }
/* the drawer */
.avgr-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(15, 23, 42, .32); }
.avgr-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; display: flex; flex-direction: column; width: min(560px, 100vw); background: var(--surface);
  box-shadow: -8px 0 30px rgba(15, 23, 42, .18); }
.avgr-drh { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-soft); }
.avgr-drh h2 { margin: 0; font-size: 19px; font-weight: 700; color: var(--text); }
.avgr-x { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; color: var(--text-2); } .avgr-x:hover { background: var(--track); }
.avgr-form { flex: 1 1 auto; overflow: auto; padding: 14px 20px; }
.avgr-f { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.avgr-f > span:first-child, .avgr-f legend { padding: 0; font-size: 13px; font-weight: 600; color: var(--text); } .avgr-f legend small { font-weight: 400; color: var(--text-2); }
.avgr-f input[type="text"], .avgr-f input[type="number"], .avgr-f input[type="date"], .avgr-f select { height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px;
  font: inherit; font-size: 14px; color: var(--text); background: var(--surface); min-width: 0; }
.avgr-f > small { font-size: 12px; color: var(--muted); }
.avgr-radio, .avgr-check { display: flex; align-items: center; gap: 8px; min-height: 30px; font-size: 13.5px; color: var(--text); }
.avgr-check .av-pf { width: 18px; height: 18px; } .avgr-check small { color: var(--text-2); } .avgr-check[hidden] { display: none; }
.avgr-check.is-never { color: var(--muted); }
.avgr-camps { display: flex; flex-direction: column; max-height: 170px; overflow: auto; padding: 4px 8px; border: 1px solid var(--border-soft); border-radius: 8px; }
.avgr-pair { display: flex; align-items: center; gap: 8px; min-width: 0; } .avgr-pair > input, .avgr-pair > select { flex: 1 1 0; }
.avgr-cur { flex: none; font-size: 13.5px; color: var(--text-2); }
.avgr-target[hidden] { display: none; } .avgr-budget[hidden] { display: none; }
.avgr-f.is-invalid input, .avgr-f.is-invalid select, .avgr-f .is-invalid input { border-color: #F0546A; }
.avgr-ferr { font-size: 12px; color: #B42339; }
.avgr-live { padding: 10px 12px; border-radius: 10px; background: #F4F7FF; font-size: 13px; }
.avgr-kind { margin: 0 0 6px; font-weight: 600; color: var(--text); } .avgr-kind.is-widen, .avgr-kind.is-revoked { color: var(--amber-text); } .avgr-kind.is-narrow { color: var(--green-text); }
.avgr-live li { display: flex; flex-direction: column; padding: 4px 0; } .avgr-live small { color: var(--text-2); }
.avgr-drf { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--border-soft); }
@media (max-width: 1440px) { .avgr-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .avgr-grid { grid-template-columns: minmax(0, 1fr) 360px; } }
@media (max-width: 1100px) { .avgr-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) {
  .avgr-tiles { grid-template-columns: minmax(0, 1fr); } .avgr-acts { width: 100%; justify-content: flex-start; } .avgr-head h1 { font-size: 25px; overflow-wrap: anywhere; }
  .avgr-list, .avgr-activity, .avgr-detail { padding: 12px; } .avgr-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .avgr-dl dd { margin-bottom: 6px; }
  .avgr-cap { white-space: normal; height: auto; min-height: 42px; }
}
/* ---------- Advertisement-44 · Data gates and rule conflicts (avgd- this screen: the five gate tiles with their switches and fields, the always-on line, the context table, the anomaly card, the priority list with ↑ / ↓, the conflicts and open plans, the test example with its decision and gate chain; reuses avo-head, avop-nav, po-card / po-chip / po-btn, av-pf, avw-strip / avw-link) — plans/Advertisement-44.md, prototype/gen/advertisement44.css ---------- */
.avgd-acts { flex-wrap: wrap; justify-content: flex-end; }
.avgd-root .po-chip.is-indigo, .avdr-root .po-chip.is-indigo, .avar-root .po-chip.is-indigo { background: var(--indigo-bg); color: var(--indigo); }
.avgd-saved { margin: 0 4px 10px; font-size: 12.5px; color: var(--text-2); }
.avgd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 16px; align-items: start; }
.avgd-main, .avgd-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.avgd-gates, .avgd-context, .avgd-anom, .avgd-conf, .avgd-test { padding: 14px 16px; min-width: 0; }
.avgd-ch { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.avgd-ch h2 { margin: 0; font-size: 19px; font-weight: 700; color: var(--text); } .avgd-ch h2 small { font-size: 14px; font-weight: 500; color: var(--text-2); }
.avgd-ch p { margin: 3px 0 0; font-size: 13px; color: var(--text-2); }
.avgd-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.avgd-tile { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 12px 12px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.avgd-tile.is-off { background: #FAFBFD; } .avgd-tile.is-off .avgd-tl, .avgd-tile.is-off .avgd-num input { color: var(--text-2); }
.avgd-tic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); font-size: 17px; }
.avgd-tile.is-off .avgd-tic { background: var(--track); color: var(--text-2); }
.avgd-tl { font-size: 13.5px; font-weight: 700; color: var(--text); }
.avgd-tile > small { font-size: 11.5px; line-height: 1.35; color: var(--text-2); }
.avgd-num { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12.5px; color: var(--text-2); }
.avgd-num input { flex: none; width: 74px; min-width: 0; height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px; font-size: 15px; font-weight: 700; color: var(--text); background: var(--surface); }
.avgd-fields { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; color: var(--text); } .avgd-fields label { display: inline-flex; align-items: center; gap: 4px; }
.avgd-switch { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.avgd-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.avgd-knob { position: relative; width: 34px; height: 20px; border-radius: 10px; background: #CBD2E0; transition: background .15s; }
.avgd-knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .25); transition: transform .15s; }
.avgd-switch input:checked + .avgd-knob { background: var(--green); } .avgd-switch input:checked + .avgd-knob::after { transform: translateX(14px); }
.avgd-switch input:focus-visible + .avgd-knob { outline: 2px solid var(--indigo); outline-offset: 2px; }
.avgd-switch input:checked ~ .avgd-st { color: var(--green-text); }
.avgd-always { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border-radius: 9px; background: #F6F8FC; font-size: 12.5px; color: var(--text-2); }
.avgd-always .i { flex: none; font-size: 16px; color: var(--indigo); } .avgd-always b { color: var(--text); }
.avgd-period select { height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 13px; }
.avgd-scroll { position: relative; overflow-x: auto; }
.avgd-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--text); }
.avgd-table th { padding: 8px; text-align: left; font-size: 12px; font-weight: 500; color: var(--text-2); background: #F7F8FB; white-space: nowrap; }
.avgd-table td { padding: 9px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.avgd-table .n { text-align: right; white-space: nowrap; } .avgd-table tfoot th, .avgd-table tfoot td { font-weight: 700; background: #FAFBFD; border-bottom: 0; }
.avgd-cmp { display: flex; align-items: center; gap: 8px; min-width: 180px; } .avgd-cmp .av-pf { width: 22px; height: 22px; flex: none; }
.avgd-cmp span { display: flex; flex-direction: column; } .avgd-cmp small { font-size: 11.5px; color: var(--text-2); }
.avgd-note { margin: 8px 0 0; font-size: 12px; color: var(--text-2); }
.avgd-ok, .avgd-alist li { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border: 1px solid #D6E2FF; border-radius: 9px; background: #F4F7FF; }
.avgd-ok .i { flex: none; font-size: 18px; color: var(--indigo); } .avgd-ok span, .avgd-alist span { display: flex; flex-direction: column; font-size: 13px; }
.avgd-ok small, .avgd-alist small { font-size: 12px; color: var(--text-2); }
.avgd-alist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; } .avgd-alist li { border-color: #F5D9A8; background: #FFF8EC; }
.avgd-alist .av-pf { width: 20px; height: 20px; flex: none; }
.avgd-window { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--text); }
.avgd-window input { width: 70px; height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px; font-size: 14px; }
.avgd-window small { font-weight: 500; color: var(--text-2); }
.avgd-prio { margin: 0; padding: 0; list-style: none; border: 1px solid var(--border-soft); border-radius: 10px; }
.avgd-prio li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--border-soft); }
.avgd-prio li:last-child { border-bottom: 0; }
.avgd-rank { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); font-size: 12px; font-weight: 700; }
.avgd-pn { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; font-size: 13px; }
.avgd-pn a { font-weight: 600; color: var(--text); text-decoration: none; } .avgd-pn a:hover { color: var(--indigo); }
.avgd-pn small { font-size: 11.5px; color: var(--text-2); overflow-wrap: anywhere; } .avgd-pn .avgd-chg { color: var(--text); }
.avgd-move { display: inline-flex; gap: 2px; } .avgd-move .po-dots { width: 30px; height: 30px; }
.avgd-h3 { margin: 14px 0 8px; font-size: 14.5px; font-weight: 700; color: var(--text); }
.avgd-clist, .avgd-open { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.avgd-clist li { display: flex; gap: 10px; padding: 10px; border: 1px solid var(--border); border-left: 4px solid #F0546A; border-radius: 9px; }
.avgd-clist li.is-amber { border-left-color: #F59E0B; } .avgd-clist li.is-grey { border-left-color: #9CA3AF; }
.avgd-pair { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--text-2); }
.avgd-cb { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 13px; } .avgd-cb .po-chip { align-self: flex-start; }
.avop-nav .avas-item { padding: 0 10px; gap: 5px; } /* Advertisement-44: eight Optimization pages in one row */ .avgd-cb small { font-size: 12px; color: var(--text-2); }
.avgd-cb .avgd-idle { color: var(--amber-text); }
.avgd-open li { font-size: 13px; } .avgd-open small { display: block; font-size: 12px; color: var(--text-2); }
.avgd-test:focus { outline: none; }
.avgd-tform { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1fr) 96px; gap: 10px; align-items: end; }
.avgd-tform label { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--text); }
.avgd-tform select, .avgd-tform input { height: 38px; min-width: 0; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 13px; }
.avgd-tform .po-btn { grid-column: 1 / -1; justify-self: start; }
.avgd-result { margin-top: 12px; }
.avgd-dec { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; padding: 10px 12px; border-radius: 9px; background: #F6F8FC; font-size: 13px; color: var(--text); }
.avgd-dec .po-chip { font-size: 13px; font-weight: 700; }
.avgd-chain { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.avgd-chain li { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; font-size: 12.5px; }
.avgd-chain li span:last-child { display: flex; flex-direction: column; min-width: 0; } .avgd-chain small { font-size: 11.5px; color: var(--text-2); overflow-wrap: anywhere; }
.avgd-mk { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; font-weight: 700; background: var(--track); color: var(--text-2); }
.avgd-chain li.is-pass .avgd-mk { background: var(--green-bg); color: var(--green-text); } .avgd-chain li.is-stop .avgd-mk { background: #FDECEF; color: #B42339; }
.avgd-chain li.is-review .avgd-mk { background: var(--amber-bg); color: var(--amber-text); } .avgd-chain li.is-none { opacity: .55; }
.avgd-root .is-invalid input, .avgd-root .is-invalid select, .avgd-root .is-invalid .avgd-num input { border-color: #E63D45; box-shadow: 0 0 0 2px rgba(230, 61, 69, .15); }
.avgd-root .avgd-prio.is-invalid { border-color: #E63D45; }
@media (max-width: 1440px) { .avgd-grid { grid-template-columns: minmax(0, 1fr) 470px; } .avgd-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1280px) { .avgd-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) { .avgd-tiles { grid-template-columns: minmax(0, 1fr); } .avgd-tform { grid-template-columns: minmax(0, 1fr); } .avgd-chain { grid-template-columns: minmax(0, 1fr); }
  .avgd-ch { flex-direction: column; } .avgd-head h1 { font-size: 25px; overflow-wrap: anywhere; } }
/* ---------- Advertisement-45 · Dry run and historical replay (avdr- this screen: the setup card, the run card, four tiles, the simulated changes with their filter, the budgets actual vs simulated, the daily SVG chart, the takeaways and the evaluation timeline with what actually happened; reuses avo-head, avop-nav, po-card / po-chip / po-btn, av-pf, avw-strip / avw-link) — plans/Advertisement-45.md, prototype/gen/advertisement45.css ---------- */
.avdr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.avdr-main, .avdr-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.avdr-setup, .avdr-actions, .avdr-budgets, .avdr-chart, .avdr-take, .avdr-run, .avdr-time { padding: 14px 16px; min-width: 0; }
.avdr-setup h2, .avdr-actions h2, .avdr-budgets h2, .avdr-chart h2, .avdr-take h2, .avdr-time h2 { margin: 0 0 10px; font-size: 18px; font-weight: 700; color: var(--text); }
.avdr-form { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .75fr) minmax(0, 1.25fr); gap: 12px 16px; align-items: start; }
.avdr-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; margin: 0; padding: 0; border: 0; font-size: 13px; }
.avdr-f > span:first-child, .avdr-f legend { padding: 0; font-size: 13px; font-weight: 600; color: var(--text); }
.avdr-f select, .avdr-f input[type="date"] { height: 40px; min-width: 0; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 13.5px; color: var(--text); }
.avdr-f > small, .avdr-period > small { font-size: 12px; color: var(--text-2); }
.avdr-rule { grid-row: span 2; } .avdr-rule small { line-height: 1.4; }
.avdr-mode { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; } .avdr-mode legend { width: 100%; margin-bottom: 5px; }
.avdr-mode label { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.avdr-pair { display: flex; align-items: center; gap: 6px; } .avdr-pair input { flex: 1 1 0; }
.avdr-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.avdr-preset { height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); font-size: 12px; color: var(--text-2); cursor: pointer; }
.avdr-preset:hover { border-color: var(--indigo); color: var(--indigo); }
.avdr-run { display: flex; flex-direction: column; gap: 8px; align-items: stretch; text-align: center; }
.avdr-go { justify-content: center; height: 48px; font-size: 16px; }
.avdr-run p { margin: 0; font-size: 12.5px; color: var(--text-2); } .avdr-meta { line-height: 1.5; }
.avdr-safe { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; color: var(--green-text) !important; }
.avdr-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.avdr-tile { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border-radius: 12px; }
.avdr-tic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: 20px; background: var(--indigo-bg); color: var(--indigo); }
.avdr-tile.is-green .avdr-tic { background: var(--green-bg); color: var(--green-text); } .avdr-tile.is-amber .avdr-tic { background: #FDECEF; color: #B42339; }
.avdr-tile.is-blue .avdr-tic { background: #E7F6EE; color: var(--green-text); }
.avdr-tt { display: flex; flex-direction: column; min-width: 0; } .avdr-tt b { font-size: 21px; font-weight: 800; line-height: 1.2; color: var(--text); overflow-wrap: anywhere; }
.avdr-tt .l { font-size: 13px; font-weight: 600; color: var(--text); } .avdr-tt small { font-size: 11.5px; color: var(--text-2); overflow-wrap: anywhere; }
.avdr-ch { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .avdr-ch h2 { margin: 0; }
.avdr-ch select { height: 34px; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 12.5px; }
.avdr-scroll { position: relative; overflow-x: auto; }
.avdr-table { width: 100%; border-collapse: collapse; font-size: 12.5px; color: var(--text); }
.avdr-table th { padding: 8px; text-align: left; font-size: 11.5px; font-weight: 500; color: var(--text-2); background: #F7F8FB; white-space: nowrap; }
.avdr-table td { padding: 8px; border-bottom: 1px solid var(--border-soft); vertical-align: top; } .avdr-table td small { display: block; font-size: 11.5px; color: var(--text-2); }
.avdr-table .n { text-align: right; white-space: nowrap; } .avdr-nw { white-space: nowrap; }
.avdr-auth { min-width: 160px; max-width: 260px; } .avdr-in { min-width: 130px; max-width: 200px; color: var(--text-2); }
.avdr-cmp { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .avdr-cmp .av-pf { width: 18px; height: 18px; }
.avdr-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; } .avdr-budgets { grid-column: 1 / -1; }
.avdr-row.is-workflow { grid-template-columns: minmax(0, 1fr); } .avdr-wfnote { font-size: 13px; color: var(--text-2); }   /* backlog 5.20: workflow replays */
.avdr-note { margin: 8px 0 0; font-size: 12px; color: var(--text-2); } .avdr-note .i { vertical-align: -2px; }
.avdr-svg { width: 100%; height: auto; display: block; }
.avdr-grid-l { stroke: #E9ECF3; stroke-width: 1; } .avdr-ax { font-size: 10px; fill: #667493; }
.avdr-l-spend { fill: none; stroke: #164BFF; stroke-width: 2; } .avdr-l-actual { fill: none; stroke: #9CA3AF; stroke-width: 1.6; }
.avdr-l-sim { fill: none; stroke: #078D45; stroke-width: 1.8; stroke-dasharray: 5 4; }
.avdr-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 0; font-size: 11.5px; color: var(--text-2); }
.avdr-legend span::before { content: ""; display: inline-block; width: 16px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 2px solid #164BFF; }
.avdr-legend .is-actual::before { border-top-color: #9CA3AF; } .avdr-legend .is-sim::before { border-top: 2px dashed #078D45; }
.avdr-take ul { margin: 0; padding: 0 0 0 18px; font-size: 12.5px; color: var(--text); } .avdr-take li { margin: 0 0 6px; } .avdr-take li::marker { color: var(--green); }
.avdr-tl { margin: 0; padding: 0; list-style: none; max-height: 720px; overflow-y: auto; }
.avdr-tl > li { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 8px 2px 10px 18px; border-left: 2px solid #E2E8F3; margin-left: 6px; }
.avdr-dot { position: absolute; left: -7px; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: #CBD2E0; border: 2px solid #fff; }
.avdr-tl > li.is-change .avdr-dot { background: var(--green); } .avdr-tl > li.is-blocked .avdr-dot { background: #E63D45; } .avdr-tl > li.is-notified .avdr-dot { background: var(--indigo); }
.avdr-tb { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; font-size: 12.5px; } .avdr-tb small { font-size: 11.5px; color: var(--text-2); overflow-wrap: anywhere; }
.avdr-tb .avdr-actual { color: var(--text); }
.avdr-tb details summary { margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--indigo); cursor: pointer; }
.avdr-tb details ul { margin: 4px 0 0; padding: 0 0 0 14px; } .avdr-tb details li { margin-bottom: 4px; font-size: 12px; }
.avdr-center { text-align: center; margin: 0 0 16px; }
.avdr-root .is-invalid select, .avdr-root .is-invalid input { border-color: #E63D45; box-shadow: 0 0 0 2px rgba(230, 61, 69, .15); }

@media (max-width: 1280px) { .avdr-grid { grid-template-columns: minmax(0, 1fr); } .avdr-tl { max-height: none; } }
@media (max-width: 768px) { .avdr-form, .avdr-row { grid-template-columns: minmax(0, 1fr); } .avdr-rule { grid-row: auto; } .avdr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .avdr-head h1 { font-size: 25px; overflow-wrap: anywhere; } }
@media (max-width: 430px) { .avdr-tiles { grid-template-columns: minmax(0, 1fr); } }
/* ---------- Advertisement-46 · Automation execution and recovery (avar- this screen: the capability chip, the runs card with its tabs, filters and table, the detail card with its head, Actions menu and tabs — goal, tiles, decision input, authorization, the run-result donut, recovery — the steps, changes, verification and recovery tables; reuses avo-head, avop-nav, po-card / po-chip / po-btn / pm-menu, avd-menuwrap, av-pf, avw-strip / avw-link) — plans/Advertisement-46.md, prototype/gen/advertisement46.css ---------- */
.avar-acts { flex-wrap: wrap; justify-content: flex-end; max-width: 380px; }
.avar-cap { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; font-size: 13.5px; color: var(--text-2); white-space: nowrap; } .avar-cap .i { font-size: 16px; }
.avar-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.avar-grid.has-detail { grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); }
.avar-list, .avar-detail { padding: 12px 16px 14px; min-width: 0; }
.avar-tabs, .avar-dtabs { display: flex; gap: 22px; margin: 0 0 12px; border-bottom: 1px solid var(--border-soft); overflow-x: auto; }
.avar-tab, .avar-dtab { position: relative; padding: 10px 2px 11px; border: 0; background: none; font-size: 14px; font-weight: 500; color: var(--text-2); text-decoration: none; white-space: nowrap; cursor: pointer; }
.avar-tab.is-on, .avar-dtab.is-on { color: var(--indigo); font-weight: 600; } .avar-tab.is-on::after, .avar-dtab.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--indigo); }
.avar-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; }
.avar-filters select, .avar-search input { height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 13px; color: var(--text); }
.avar-search { position: relative; flex: 1 1 200px; display: flex; } .avar-search .i { position: absolute; left: 10px; top: 11px; font-size: 16px; color: var(--muted); }
.avar-search input { width: 100%; padding-left: 32px; }
.avar-scroll { position: relative; overflow-x: auto; }
.avar-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--text); }
.avar-table th { padding: 9px 8px; text-align: left; font-size: 12px; font-weight: 500; color: var(--text-2); background: #F7F8FB; white-space: nowrap; }
.avar-table td { padding: 10px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: top; } .avar-table td small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--text-2); }
.avar-table tr.is-sel td { background: #F4F7FF; } .avar-nw { white-space: nowrap; }
.avar-name { display: block; min-width: 140px; font-weight: 600; color: var(--text); text-decoration: none; } .avar-name:hover { color: var(--indigo); }
.avar-prov { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .avar-prov .av-pf { width: 18px; height: 18px; }
.avar-dots .avd-menuwrap { display: inline-block; }
.avar-count { margin: 10px 0 0; font-size: 12.5px; color: var(--text-2); }
.avar-mini { font-size: 12.5px; } .avar-mini code { font-size: 11.5px; color: var(--text); overflow-wrap: anywhere; }
.avar-dh { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.avar-dh h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 20px; font-weight: 700; color: var(--text); }
.avar-dh p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-2); }
.avar-dacts { display: flex; align-items: center; gap: 8px; } .avar-menu { height: 38px; } .avar-menu .i { font-size: 14px; }
.avar-dacts .pm-menu button[disabled] { opacity: .45; cursor: not-allowed; }
.avar-x { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; color: var(--text-2); } .avar-x:hover { background: var(--track); }
.avar-ov { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; }
.avar-ovl h3, .avar-box h3 { display: flex; align-items: center; gap: 7px; margin: 12px 0 6px; font-size: 14.5px; font-weight: 700; color: var(--text); }
.avar-ovl h3:first-child { margin-top: 0; } .avar-ovl h3 .i, .avar-box h3 .i { font-size: 16px; color: var(--indigo); }
.avar-goal { margin: 0 0 10px; font-size: 13px; color: var(--text); }
.avar-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.avar-tile { display: flex; flex-direction: column; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; } .avar-tile b { font-size: 19px; font-weight: 800; color: var(--text); }
.avar-tile small { font-size: 11.5px; color: var(--text-2); }
.avar-dl { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 5px 12px; margin: 0; font-size: 12.5px; }
.avar-dl dt { color: var(--text-2); } .avar-dl dd { margin: 0; color: var(--text); overflow-wrap: anywhere; } .avar-dl dd small { display: block; font-size: 11.5px; color: var(--text-2); }
.avar-inputs { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.avar-inputs li { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; } .avar-inputs span { display: flex; flex-direction: column; min-width: 0; } .avar-inputs small { color: var(--text-2); overflow-wrap: anywhere; }
.avar-ovr { display: flex; flex-direction: column; gap: 12px; }
.avar-box { padding: 12px; border: 1px solid var(--border); border-radius: 10px; } .avar-box h3 { margin-top: 0; }
.avar-donut { display: flex; align-items: center; gap: 12px; }
.avar-ring { flex: none; width: 92px; height: 92px; } .avar-ring-bg { fill: none; stroke: #E9ECF3; stroke-width: 5; }
.avar-ring-fg { fill: none; stroke: #078D45; stroke-width: 5; } .avar-ring-t { font-size: 8px; font-weight: 800; fill: #10152F; }
.avar-dleg { display: flex; flex-direction: column; gap: 2px; font-size: 12px; } .avar-dleg b { font-size: 12.5px; color: var(--text); } .avar-dleg small { color: var(--text-2); }
.avar-dleg i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #9CA3AF; } .avar-dleg i.is-green { background: #078D45; }
.avar-dleg i.is-red { background: #E63D45; } .avar-dleg i.is-amber { background: #DB7900; }
.avar-lnk { margin-top: 6px; padding: 0; border: 0; background: none; cursor: pointer; }
.avar-rec p { margin: 0 0 6px; font-size: 12.5px; color: var(--text); }
.avar-note { display: block; margin: 6px 0; font-size: 12px; color: var(--text-2); }
.avar-reason { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; font-size: 12px; color: var(--text-2); }
.avar-reason input { height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.avar-reason.is-invalid input { border-color: #E63D45; box-shadow: 0 0 0 2px rgba(230, 61, 69, .15); }
.avar-rbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .avar-rbtns .po-btn { justify-content: center; height: 38px; font-size: 13px; }
.avar-rbtns .avar-wide { grid-column: 1 / -1; } .avar-rbtns .po-btn[disabled], .avar-ra .po-btn[disabled] { opacity: .45; cursor: not-allowed; }
.avar-inputs .po-chip { flex: none; } .avar-stop { color: #B42339; }
.avar-h3 { margin: 14px 0 6px; font-size: 14px; font-weight: 700; color: var(--text); }
.avar-trace, .avar-changes { margin: 0; padding: 0 0 0 18px; font-size: 12.5px; color: var(--text); } .avar-trace li, .avar-changes > li { margin-bottom: 6px; }
.avar-trace small, .avar-changes small { display: block; color: var(--text-2); } .avar-changes ul { margin: 4px 0 0; padding-left: 16px; color: var(--text-2); }
.avar-ra .po-btn { height: 32px; font-size: 12px; margin: 0 4px 4px 0; }
@media (max-width: 1440px) { .avar-ov { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1280px) { .avar-grid.has-detail { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) { .avar-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .avar-dh { flex-direction: column; } .avar-dl { grid-template-columns: minmax(0, 1fr); }
  .avar-head h1 { font-size: 25px; overflow-wrap: anywhere; } .avar-cap { white-space: normal; } }
/* ---------- Advertisement-47 · Spending center (avsp- this screen: the month select, the currency chips, the data line, four tiles with bars and chips, the accounts and campaign-budget tables, the planning-budget donut with its inline allocation form, the commitments table, the strip; avbn- the Budgets switch shared with D48 / D49 (over avas-nav); reuses avo-head, po-card / po-chip / po-btn / pm-menu, avd-menuwrap, av-pf, avw-strip / avw-link) — plans/Advertisement-47.md, prototype/gen/advertisement47.css ---------- */
.avbn-nav { margin-bottom: 4px; }
.avsp-acts, .avlm-acts, .avbl-acts { flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.avsp-period label { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.avsp-period .i { font-size: 16px; color: var(--text-2); } .avsp-period select { border: 0; background: none; font-size: 13.5px; color: var(--text); }
.avsp-curs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; } .avsp-curs a { text-decoration: none; } .avsp-curs small { font-size: 12px; color: var(--text-2); }
.avsp-line, .avbl-line { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 12px; font-size: 12.5px; color: var(--text-2); } .avsp-line i, .avbl-line i { font-style: normal; color: var(--muted); }
.avsp-root > .avw-strip, .avlm-root > .avw-strip, .avbl-root > .avw-strip { margin: 0 0 12px; }
.avsp-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 16px; }
.avsp-tile { position: relative; display: flex; gap: 12px; padding: 16px; min-width: 0; }
.avsp-tic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); } .avsp-tic .i { font-size: 20px; }
.avsp-tic.is-reported { background: #EAF7F0; color: #078D45; } .avsp-tic.is-available { background: #EAF7F0; color: #078D45; }
.avsp-tb { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.avsp-tl { font-size: 13px; color: var(--text-2); } .avsp-tv { font-size: 24px; font-weight: 800; color: var(--text); overflow-wrap: anywhere; } .avsp-tb small { font-size: 12.5px; color: var(--text-2); }
.avsp-tchip { position: absolute; top: 14px; right: 14px; } .avsp-tile:has(.avsp-tchip) .avsp-tl { padding-right: 96px; }
.avsp-bar { display: block; height: 6px; margin-top: 8px; border-radius: 3px; background: var(--track); overflow: hidden; } .avsp-bar i { display: block; height: 100%; border-radius: 3px; background: var(--indigo); }
.avsp-bar.is-reported i, .avsp-bar.is-available i, .avsp-bar.is-green i { background: #12B981; } .avsp-bar.is-amber i { background: #F59E0B; } .avsp-bar.is-red i { background: #E63D45; }
.avsp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 500px; gap: 16px; align-items: start; }
.avsp-main, .avsp-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.avsp-card { padding: 14px 16px 16px; min-width: 0; }
.avsp-ch { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.avsp-ch > .po-btn, .avsp-ch > .avw-link { flex: none; white-space: nowrap; }
.avsp-ch h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); } .avsp-ch p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-2); }
.avsp-scroll { position: relative; overflow-x: auto; }
.avsp-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--text); }
.avsp-table th { padding: 9px 8px; text-align: left; font-size: 12px; font-weight: 500; color: var(--text-2); background: #F7F8FB; white-space: nowrap; }
.avsp-table td { padding: 10px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; } .avsp-table td small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-2); }
.avsp-table .n { text-align: right; white-space: nowrap; } .avsp-table tfoot th, .avsp-table tfoot td { padding: 10px 8px; font-weight: 700; background: #FAFBFD; border-top: 1px solid var(--border); }
.avsp-table td.is-over { color: #B42339; font-weight: 700; } .avsp-nw { white-space: nowrap; }
.avsp-acct, .avsp-camp, .avsp-prov { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } .avsp-acct .av-pf { width: 26px; height: 26px; flex: none; }
.avsp-acct b, .avsp-camp b { font-weight: 600; } .avsp-acct span { display: flex; flex-direction: column; min-width: 120px; } .avsp-acct small { white-space: nowrap; } .avsp-camp a { color: var(--text); text-decoration: none; } .avsp-camp a:hover { color: var(--indigo); }
.avsp-camp img, .avsp-noimg { flex: none; width: 56px; height: 36px; border-radius: 6px; object-fit: cover; } .avsp-noimg { display: grid; place-items: center; background: var(--track); color: var(--text-2); }
.avsp-prov { white-space: nowrap; gap: 6px; } .avsp-prov .av-pf { width: 18px; height: 18px; }
.avsp-sel { width: 28px; } .avsp-sel input { width: 16px; height: 16px; }
.avsp-used { min-width: 86px; } .avsp-used .avsp-bar { margin-top: 4px; height: 5px; }
.avsp-acts-cell { display: flex; align-items: center; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.avsp-mdis { opacity: .6; cursor: not-allowed; }
.avsp-note { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; font-size: 12px; color: var(--text-2); } .avsp-note .i { flex: none; font-size: 14px; margin-top: 1px; }
.avsp-note:has(> .po-link) { flex-wrap: wrap; gap: 6px 16px; } .avsp-note > .po-link { white-space: normal; }   /* backlog R3: the two links wrap inside the card (1672 px overflowed) */
.avsp-donut { display: flex; align-items: center; gap: 22px; }
.avsp-ring { flex: none; width: 150px; height: 150px; transform: rotate(0deg); }
.avsp-ring-bg { fill: none; stroke: #E9ECF3; stroke-width: 6; } .avsp-ring-seg { fill: none; stroke-width: 6; }
.avsp-ring-v { font-size: 4.6px; font-weight: 800; fill: #10152F; text-anchor: middle; } .avsp-ring-s { font-size: 3px; fill: #6B7280; text-anchor: middle; }
.avsp-legend { flex: 1; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.avsp-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 44px; align-items: center; gap: 8px; font-size: 13px; }
.avsp-legend i { width: 10px; height: 10px; border-radius: 50%; } .avsp-legend i.is-none { background: #D6DAE3; } .avsp-legend small { text-align: right; color: var(--text-2); }
.avsp-legend span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avsp-form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.avsp-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-2); }
.avsp-form input { height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13.5px; color: var(--text); background: var(--surface); }
.avsp-form label.is-invalid input { border-color: #E63D45; box-shadow: 0 0 0 2px rgba(230, 61, 69, .15); }
.avsp-fnote, .avsp-unalloc { margin: 0; font-size: 12.5px; color: var(--text-2); } .avsp-unalloc.is-over { color: #B42339; font-weight: 600; }
.avsp-fbtns { display: flex; justify-content: flex-end; gap: 8px; }
.avsp-ctable td a { color: var(--text); text-decoration: none; } .avsp-ctable td a:hover { color: var(--indigo); }
.avsp-strip a { color: var(--indigo); font-weight: 600; }
@media (max-width: 1440px) { .avsp-grid { grid-template-columns: minmax(0, 1fr) 420px; } .avsp-ring { width: 124px; height: 124px; } }
@media (max-width: 1280px) { .avsp-grid { grid-template-columns: minmax(0, 1fr); } .avsp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) { .avsp-tiles { grid-template-columns: minmax(0, 1fr); } .avsp-ch { flex-direction: column; } .avsp-donut { flex-direction: column; align-items: stretch; }
  .avsp-ring { align-self: center; } .avsp-head h1 { font-size: 25px; } .avsp-acts { justify-content: flex-start; } }
/* ---------- Advertisement-48 · Spending limits and emergency controls (avlm- this screen: the zone and time, the red stop banner, four tiles, the caps table with its pending-request rows and inline add form, the provider-reported limits, the delivering campaigns table, the emergency card with its tabs, the stop form with the live expected scope, the stop results; reuses avo-head, avbn-nav / avas-nav, po-card / po-chip / po-btn / pm-menu, avd-menuwrap, av-pf, avw-strip / avw-link) — plans/Advertisement-48.md, prototype/gen/advertisement48.css ---------- */
.avlm-now { display: flex; flex-direction: column; align-items: flex-end; font-size: 12.5px; color: var(--text-2); } .avlm-now small { font-size: 12.5px; }
.avlm-stopbtn { border-color: #F5B7C1; color: #B42339; } .avlm-stopbtn:hover { background: #FDECEF; }
.avlm-banner { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px; padding: 14px 16px; border: 1px solid #F5B7C1; border-radius: 12px; background: #FDECEF; color: #7A1426; }
.avlm-banner > .i { flex: none; font-size: 22px; color: #E63D45; } .avlm-banner b { font-size: 14.5px; } .avlm-banner p { margin: 4px 0 0; font-size: 13px; }
.avlm-bacts { display: flex; gap: 8px; margin-left: auto; flex: none; }
.avlm-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 16px; }
.avlm-tile { display: flex; gap: 12px; padding: 16px; min-width: 0; }
.avlm-tic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); } .avlm-tic .i { font-size: 20px; }
.avlm-tic.is-spend { background: #EAF7F0; color: #078D45; }
.avlm-tb { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .avlm-tl { font-size: 13px; color: var(--text-2); }
.avlm-tv { font-size: 22px; font-weight: 800; color: var(--text); overflow-wrap: anywhere; } .avlm-tb small { font-size: 12.5px; color: var(--text-2); }
.avlm-bar { display: block; height: 6px; margin-top: 6px; border-radius: 3px; background: var(--track); overflow: hidden; } .avlm-bar i { display: block; height: 100%; background: #12B981; }
.avlm-bar.is-amber i { background: #F59E0B; } .avlm-bar.is-red i { background: #E63D45; } .avlm-bar.is-grey i { background: #9CA3AF; }
.avlm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 16px; align-items: start; }
.avlm-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.avlm-card { padding: 14px 16px 16px; min-width: 0; }
.avlm-ch { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.avlm-ch > .po-btn, .avlm-ch > .avw-link { flex: none; white-space: nowrap; }
.avlm-ch h2, .avlm-eh h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); } .avlm-ch p, .avlm-eh p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-2); }
.avlm-scroll { position: relative; overflow-x: auto; }
.avlm-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--text); }
.avlm-table th { padding: 9px 8px; text-align: left; font-size: 12px; font-weight: 500; color: var(--text-2); background: #F7F8FB; white-space: nowrap; }
.avlm-table td { padding: 10px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; } .avlm-table td small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-2); }
.avlm-table .n { text-align: right; white-space: nowrap; } .avlm-nw { white-space: nowrap; }
.avlm-table tfoot th, .avlm-table tfoot td { padding: 10px 8px; font-weight: 700; background: #FAFBFD; border-top: 1px solid var(--border); }
.avlm-scope, .avlm-camp, .avlm-prov { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } .avlm-scope .av-pf { width: 24px; height: 24px; flex: none; }
.avlm-biz { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 6px; background: var(--indigo-bg); color: var(--indigo); } .avlm-biz .i { font-size: 14px; }
.avlm-rep { min-width: 150px; } .avlm-rep .avlm-bar { height: 5px; margin-top: 4px; }
.avlm-plan { font-size: 12.5px; color: var(--text-2); } .avlm-plan.is-over { color: #B42339; font-weight: 600; }
.avlm-pend td { background: #FFF8EC; } .avlm-pendt { display: inline-flex; align-items: flex-start; gap: 8px; font-size: 12.5px; } .avlm-pendt .i { flex: none; font-size: 15px; color: #DB7900; margin-top: 1px; }
/* backlog 5.19: a cap's version history */
.avlm-vers td { padding-top: 0 !important; } .avlm-vers summary { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); cursor: pointer; list-style: none; }
.avlm-vers summary::-webkit-details-marker { display: none; } .avlm-vers summary:hover { color: var(--indigo); }
.avlm-vlist { list-style: none; margin: 8px 0 4px; padding: 0 0 0 4px; display: flex; flex-direction: column; gap: 6px; border-left: 2px solid var(--border-soft); }
.avlm-vlist li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding-left: 10px; font-size: 12.5px; color: var(--text); }
.avlm-vlist li > span small { display: block; color: var(--text-2); } .avlm-vwho { color: var(--muted); white-space: nowrap; }
@media (max-width: 768px) { .avlm-vlist li { grid-template-columns: 34px minmax(0, 1fr); } .avlm-vwho { grid-column: 2; white-space: normal; } }
.avlm-pacts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; } .avlm-own { color: var(--text-2); }
.avlm-small { height: 30px; padding: 0 10px; font-size: 12.5px; }
.avlm-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: #FAFBFD; }
.avlm-form label, .avlm-sform label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-2); }
.avlm-form select, .avlm-form input, .avlm-sform select, .avlm-sform input[type="text"] { height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13.5px; color: var(--text); background: var(--surface); }
.avlm-form .is-invalid select, .avlm-form .is-invalid input, .avlm-sform .is-invalid input, .avlm-sform .is-invalid select { border-color: #E63D45; box-shadow: 0 0 0 2px rgba(230, 61, 69, .15); }
.avlm-fbtns { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.avlm-note { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; font-size: 12px; color: var(--text-2); } .avlm-note .i { flex: none; font-size: 14px; margin-top: 1px; }
.avlm-h3 { margin: 14px 0 8px; font-size: 14px; font-weight: 700; color: var(--text); }
.avlm-plist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.avlm-plist li { display: flex; align-items: center; gap: 10px; font-size: 13px; } .avlm-plist .av-pf { width: 22px; height: 22px; flex: none; }
.avlm-plist span { display: flex; flex-direction: column; min-width: 0; } .avlm-plist small { font-size: 11.5px; color: var(--text-2); } .avlm-plist em { margin-left: auto; font-style: normal; color: var(--text-2); text-align: right; }
.avlm-camp img, .avlm-noimg { flex: none; width: 56px; height: 36px; border-radius: 6px; object-fit: cover; } .avlm-noimg { display: grid; place-items: center; background: var(--track); color: var(--text-2); }
.avlm-camp a { color: var(--text); text-decoration: none; } .avlm-camp a:hover { color: var(--indigo); } .avlm-prov { white-space: nowrap; gap: 6px; } .avlm-prov .av-pf { width: 18px; height: 18px; }
.avlm-ps { white-space: nowrap; }
.avlm-em { position: sticky; top: 12px; }
.avlm-eh { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; } .avlm-eh > .i { flex: none; font-size: 24px; color: #E63D45; margin-top: 2px; }
.avlm-etabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 12px; padding: 4px; border-radius: 10px; background: #F4F6FB; }
.avlm-etab { height: 36px; border: 0; border-radius: 7px; background: none; font-size: 13.5px; color: var(--text-2); cursor: pointer; }
.avlm-etab.is-on { background: var(--surface); color: var(--indigo); font-weight: 600; box-shadow: 0 1px 2px rgba(16, 21, 47, .08); }
.avlm-warn { margin: 0 0 12px; font-size: 12.5px; }
.avlm-sform { display: flex; flex-direction: column; gap: 10px; }
.avlm-picks { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 6px; } .avlm-picks legend { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--text); }
.avlm-pick { display: grid !important; grid-template-columns: 18px 20px minmax(0, 1fr) auto; align-items: center; gap: 8px !important; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; cursor: pointer; }
.avlm-pick[hidden] { display: none !important; } .avlm-pick input { width: 16px; height: 16px; } .avlm-pick .av-pf { width: 20px; height: 20px; }
.avlm-pick span { display: flex; flex-direction: column; min-width: 0; } .avlm-pick b { font-size: 13px; color: var(--text); } .avlm-pick small { font-size: 11.5px; color: var(--text-2); }
.avlm-stiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 10px; border-radius: 10px; background: #F7F8FB; }
.avlm-stiles span { display: flex; flex-direction: column; align-items: center; text-align: center; } .avlm-stiles b { font-size: 17px; font-weight: 800; color: var(--text); overflow-wrap: anywhere; }
.avlm-stiles small { font-size: 11.5px; color: var(--text-2); }
.avlm-confirm { flex-direction: row !important; align-items: flex-start; gap: 8px !important; font-size: 12.5px; color: var(--text) !important; } .avlm-confirm input { flex: none; margin-top: 2px; width: 16px; height: 16px; }
.avlm-confirm.is-invalid span { color: #B42339; }
.avlm-go { justify-content: center; height: 44px; background: #E63D45; border-color: #E63D45; } .avlm-go:hover { background: #C92F37; } .avlm-go[disabled] { opacity: .5; cursor: not-allowed; }
.avlm-wide { width: 100%; justify-content: center; margin-top: 10px; }
.avlm-results { margin: 0 0 14px; } .avlm-rsum { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--text); }
.avlm-rlist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.avlm-rlist li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: flex-start; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 9px; }
.avlm-rlist li.is-paused { border-color: #BDE8D0; background: #F4FBF7; } .avlm-rlist li.is-unknown { border-color: #F5D9A8; background: #FFF8EC; }
.avlm-rlist li.is-failed, .avlm-rlist li.is-not_sent { border-color: #F5B7C1; background: #FFF6F7; }
.avlm-rlist .av-pf { width: 20px; height: 20px; } .avlm-rb { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .avlm-rb b { font-size: 13px; }
.avlm-rb small { font-size: 11.5px; color: var(--text-2); overflow-wrap: anywhere; } .avlm-rt { color: var(--text) !important; }
.avlm-racts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; } .avlm-racts .avw-link { font-size: 12px; } .avlm-demo { color: var(--text-2); }
@media (max-width: 1440px) { .avlm-grid { grid-template-columns: minmax(0, 1fr) 420px; } }
@media (max-width: 1280px) { .avlm-grid { grid-template-columns: minmax(0, 1fr); } .avlm-em { position: static; } .avlm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) { .avlm-tiles { grid-template-columns: minmax(0, 1fr); } .avlm-ch { flex-direction: column; } .avlm-form { grid-template-columns: minmax(0, 1fr); }
  .avlm-banner { flex-direction: column; } .avlm-bacts { margin-left: 0; } .avlm-head h1 { font-size: 24px; overflow-wrap: anywhere; } .avlm-now { align-items: flex-start; }
  .avlm-acts { justify-content: flex-start; } .avlm-plist li { flex-wrap: wrap; } .avlm-plist em { margin-left: 32px; text-align: left; } }
.avbg-cap { display: block; } .avv-docs { margin: 10px 0 0; } .avlm-d01 { color: #B42339 !important; }
/* ---------- Advertisement-49 · Billing documents and payments (avbl- this screen: the payment-methods menu, the read line, five tiles, the documents card with its tabs, filters and table, the document preview with its facts, lines, tax, linked spend and actions, the footer note; reuses avo-head, avbn-nav / avas-nav, po-card / po-chip / po-btn / pm-menu, avd-menuwrap, av-pf, avw-strip) — plans/Advertisement-49.md, prototype/gen/advertisement49.css ---------- */
.avbl-mmenu { min-width: 300px; } .avbl-mmenu a, .avbl-mdis { display: flex !important; align-items: center; gap: 10px; }
.avbl-mmenu .av-pf { width: 20px; height: 20px; flex: none; } .avbl-mmenu span { display: flex; flex-direction: column; min-width: 0; } .avbl-mmenu small { font-size: 11.5px; color: var(--text-2); white-space: normal; }
.avbl-mdis { opacity: .7; cursor: not-allowed; padding: 8px 12px; font-size: 13px; }
.avbl-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.avbl-tile { display: flex; gap: 12px; padding: 16px; min-width: 0; }
.avbl-tic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); } .avbl-tic .i { font-size: 20px; }
.avbl-tic.is-green { background: #EAF7F0; color: #078D45; } .avbl-tic.is-amber { background: #FFF4E0; color: #DB7900; } .avbl-tic.is-red { background: #FDECEF; color: #E63D45; }
.avbl-tb { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .avbl-tl { font-size: 13px; color: var(--text-2); }
.avbl-tb b { font-size: 21px; font-weight: 800; color: var(--text); overflow-wrap: anywhere; } .avbl-tb small { font-size: 12px; color: var(--text-2); }
.avbl-grid { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 16px; align-items: start; }
.avbl-card { padding: 12px 16px 16px; min-width: 0; }
.avbl-tabs { display: flex; gap: 22px; margin: 0 0 12px; border-bottom: 1px solid var(--border-soft); overflow-x: auto; }
.avbl-tab { position: relative; padding: 10px 2px 11px; font-size: 14px; font-weight: 500; color: var(--text-2); text-decoration: none; white-space: nowrap; }
.avbl-tab small { margin-left: 4px; font-size: 12px; color: var(--muted); } .avbl-tab.is-on { color: var(--indigo); font-weight: 600; }
.avbl-tab.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--indigo); }
.avbl-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; }
.avbl-filters select, .avbl-search input { height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 13px; color: var(--text); max-width: 100%; }
.avbl-search { position: relative; flex: 1 1 240px; display: flex; } .avbl-search .i { position: absolute; left: 10px; top: 11px; font-size: 16px; color: var(--muted); }
.avbl-search input { width: 100%; padding-left: 32px; }
.avbl-count { margin: 0 0 8px; font-size: 12.5px; color: var(--text-2); text-align: right; }
.avbl-scroll { position: relative; overflow-x: auto; }
.avbl-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--text); }
.avbl-table th { padding: 9px 8px; text-align: left; font-size: 12px; font-weight: 500; color: var(--text-2); background: #F7F8FB; white-space: nowrap; }
.avbl-table td { padding: 10px 7px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; } .avbl-table td small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-2); }
.avbl-table .n { text-align: right; white-space: nowrap; } .avbl-table td.n small { white-space: nowrap; } .avbl-nw { white-space: nowrap; }
.avbl-row { cursor: pointer; } .avbl-row:hover td { background: #FAFBFD; } .avbl-row.is-sel td { background: #F4F7FF; }
.avbl-kind { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .avbl-kind .i { font-size: 16px; color: var(--text-2); }
.avbl-prov { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .avbl-prov .av-pf { width: 20px; height: 20px; flex: none; }
.avbl-num { color: var(--text); font-weight: 600; text-decoration: none; white-space: nowrap; } .avbl-num:hover { color: var(--indigo); }
.avbl-foot { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #F7F8FB; font-size: 12.5px; color: var(--text-2); }
.avbl-foot .i { flex: none; font-size: 15px; margin-top: 1px; }
.avbl-preview { position: sticky; top: 12px; }
.avbl-ph { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 10px; } .avbl-ph h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.avbl-doc { padding: 14px; border: 1px solid var(--border); border-radius: 10px; }
.avbl-dh { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; } .avbl-dh .av-pf { width: 30px; height: 30px; flex: none; }
.avbl-dh > span { display: flex; flex-direction: column; min-width: 0; } .avbl-dh small { font-size: 12px; color: var(--text-2); }
.avbl-dn { margin-left: auto; text-align: right; } .avbl-dn small { white-space: nowrap; } .avbl-dn b { font-size: 17px; }
.avbl-dl { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 6px 12px; margin: 0 0 12px; font-size: 12.5px; }
.avbl-dl dt { color: var(--text-2); } .avbl-dl dd { margin: 0; color: var(--text); overflow-wrap: anywhere; } .avbl-dl dd small { color: var(--text-2); }
.avbl-lines { width: 100%; border-collapse: collapse; font-size: 12.5px; } .avbl-lines th, .avbl-lines td { padding: 7px 8px; border-bottom: 1px solid var(--border-soft); text-align: left; }
.avbl-lines thead th { background: #F7F8FB; font-weight: 600; color: var(--text-2); } .avbl-lines .n { text-align: right; } .avbl-tax { font-size: 12px; color: var(--text-2); }
.avbl-total th, .avbl-total td { font-size: 14px; font-weight: 800; background: #F4F7FF; color: var(--text); }
.avbl-linked { display: flex; align-items: flex-start; gap: 6px; margin: 12px 0 0; font-size: 12.5px; color: var(--text-2); } .avbl-linked .i { flex: none; font-size: 15px; margin-top: 1px; }
.avbl-linked a { color: var(--indigo); font-weight: 600; } .avbl-src { margin: 6px 0 0; font-size: 11.5px; color: var(--muted); }
.avbl-pacts { display: grid; grid-template-columns: 1fr 1fr 44px; gap: 8px; margin-top: 12px; } .avbl-pacts .po-btn { justify-content: center; height: 42px; }
.avbl-pacts .po-btn[disabled] { opacity: .55; cursor: not-allowed; } .avbl-copy { padding: 0; }
@media (max-width: 1440px) { .avbl-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .avbl-grid { grid-template-columns: minmax(0, 1fr) 420px; } }
@media (max-width: 1280px) { .avbl-grid { grid-template-columns: minmax(0, 1fr); } .avbl-preview { position: static; } }
@media (max-width: 768px) { .avbl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .avbl-filters > label { flex: 1 1 100%; } .avbl-filters select { width: 100%; }
  .avbl-head h1 { font-size: 24px; overflow-wrap: anywhere; } .avbl-acts { justify-content: flex-start; } .avbl-dl { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 430px) { .avbl-tiles { grid-template-columns: minmax(0, 1fr); } .avbl-pacts { grid-template-columns: 1fr 44px; } .avbl-pacts #avbl-open { grid-column: 1 / -1; grid-row: 2; } }
/* ---------- Advertisement-50 · Catalogs and product diagnostics (avct- this screen: the read line, the catalogs / feed sources card with its tabs, filters and table, the catalog panel with its header, tabs, detail boxes, counts, product list and product detail, diagnostics, history and the feed form, the Connect feed dialog; reuses avo-head, avas-nav, po-card / po-chip / po-btn / pm-menu, avd-menuwrap / avd-modal / avd-backdrop, av-pf, avw-strip) — plans/Advertisement-50.md, prototype/gen/advertisement50.css ---------- */
.avct-nav, .avld-nav { margin: -2px 0 6px; } .avct-nav .avas-nav, .avld-nav .avas-nav { margin: 0 0 8px; }                     /* the Assets switch under the head (8 items) */
.avct-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: -4px 0 14px; font-size: 12.5px; color: var(--text-2); }
.avct-line span { display: inline-flex; align-items: center; gap: 6px; } .avct-line .av-pf { width: 16px; height: 16px; flex: none; } .avct-line i { font-style: normal; color: var(--muted); }
.avct-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: 16px; align-items: start; }
.avct-card { padding: 12px 16px 16px; min-width: 0; }
.avct-tabs, .avct-ptabs { display: flex; gap: 24px; margin: 0 0 12px; border-bottom: 1px solid var(--border-soft); overflow-x: auto; }
.avct-tab, .avct-ptab { position: relative; padding: 10px 2px 11px; font-size: 14px; font-weight: 500; color: var(--text-2); text-decoration: none; white-space: nowrap; }
.avct-tab small, .avct-ptab small { margin-left: 4px; font-size: 12px; color: var(--muted); } .avct-tab.is-on, .avct-ptab.is-on { color: var(--indigo); font-weight: 600; }
.avct-tab.is-on::after, .avct-ptab.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--indigo); }
.avct-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; }
.avct-filters select, .avct-search input, .avct-pf select { height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 13px; color: var(--text); max-width: 100%; }
.avct-search { position: relative; flex: 1 1 220px; display: flex; } .avct-search .i { position: absolute; left: 10px; top: 11px; font-size: 16px; color: var(--muted); }
.avct-search input { width: 100%; padding-left: 32px; }
.avct-scroll { position: relative; overflow-x: auto; }
.avct-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--text); }
.avct-table th { padding: 9px 8px; text-align: left; font-size: 12px; font-weight: 500; color: var(--text-2); background: #F7F8FB; white-space: nowrap; }
.avct-table td { padding: 11px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; } .avct-table td small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-2); }
.avct-table .n { text-align: right; white-space: nowrap; } .avct-nw { white-space: nowrap; }
.avct-row { cursor: pointer; } .avct-row:hover td { background: #FAFBFD; } .avct-row.is-sel td { background: #F4F7FF; } .avct-row.is-sel td:first-child { box-shadow: inset 3px 0 0 var(--indigo); }
.avct-cat { display: flex; align-items: center; gap: 12px; min-width: 0; } .avct-cat > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.avct-tile { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: #EEF1FF; color: var(--indigo); } .avct-tile .i { font-size: 20px; }
.avct-tile.is-lg { width: 56px; height: 56px; border-radius: 12px; } .avct-tile.is-lg .i { font-size: 26px; }
.avct-name { color: var(--text); font-weight: 600; text-decoration: none; } .avct-name:hover { color: var(--indigo); }
.avct-prov { display: inline-flex; align-items: center; gap: 8px; } .avct-prov .av-pf { width: 22px; height: 22px; flex: none; } .avct-prov > span { display: flex; flex-direction: column; min-width: 0; }
.avct-url { overflow-wrap: anywhere; word-break: break-word; }
.avct-count { margin: 10px 0 0; font-size: 12.5px; color: var(--text-2); }
.avct-foot { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #F7F8FB; font-size: 12.5px; color: var(--text-2); }
.avct-foot .i { flex: none; font-size: 15px; margin-top: 1px; }
.avct-panel { position: sticky; top: 12px; }
.avct-ph { display: flex; align-items: flex-start; gap: 14px; margin: 4px 0 12px; }
.avct-pt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; } .avct-pt h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.avct-pt small { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); } .avct-pt .av-pf { width: 16px; height: 16px; }
.avct-pacts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; flex: none; } .avct-pacts .po-btn[disabled] { opacity: .55; cursor: not-allowed; }
.avct-plan { margin: 0 0 12px; } .avct-plan a { color: var(--indigo); font-weight: 600; }
.avct-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 0 0 12px; } .avct-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.avct-box { padding: 14px; border: 1px solid var(--border); border-radius: 10px; min-width: 0; } .avct-box h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14.5px; font-weight: 700; color: var(--text); }
.avct-bh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; } .avct-bh h3 { margin: 0; }
.avct-dl { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 7px 10px; margin: 0; font-size: 12.5px; }
.avct-dl dt { color: var(--text-2); } .avct-dl dd { margin: 0; color: var(--text); overflow-wrap: anywhere; } .avct-dl dd small { display: block; color: var(--text-2); }
.avct-dl dd .av-pf { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }
.avct-counts { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-soft); } .avct-counts dd { display: flex; justify-content: space-between; gap: 8px; } .avct-counts dd span { color: var(--text-2); }
.avct-note { margin: 8px 0 0; font-size: 12px; color: var(--text-2); }
.avct-diags { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .avct-diags li { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.avct-diags li b { flex: 1 1 auto; min-width: 0; } .avct-diags li > span:last-child { color: var(--text-2); white-space: nowrap; }
.avct-ok { display: flex; align-items: center; gap: 10px; margin: 0; } .avct-ok .i { font-size: 24px; color: #078D45; } .avct-ok span { display: flex; flex-direction: column; } .avct-ok b { color: #078D45; font-size: 13.5px; }
.avct-ok small { font-size: 12px; color: var(--text-2); }
.avct-pf { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; } .avct-pn { font-size: 12.5px; color: var(--text-2); }
.avct-plist { list-style: none; margin: 0 0 12px; padding: 0; border: 1px solid var(--border); border-radius: 10px; max-height: 280px; overflow-y: auto; }
.avct-prow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--border-soft); color: var(--text); text-decoration: none; font-size: 13px; }
.avct-plist li:last-child .avct-prow { border-bottom: 0; } .avct-prow:hover { background: #FAFBFD; } .avct-prow.is-sel { background: #F4F7FF; box-shadow: inset 3px 0 0 var(--indigo); }
.avct-prow > span:first-child { display: flex; flex-direction: column; min-width: 0; } .avct-prow small { font-size: 11.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avct-pp { text-align: right; white-space: nowrap; font-weight: 600; } .avct-pp small { display: block; font-weight: 400; }
.avct-product { display: flex; flex-direction: column; gap: 10px; } .avct-product > .po-btn { align-self: flex-start; }
.avct-issues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.avct-issues li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #F7F8FB; font-size: 12.5px; color: var(--text-2); }
.avct-issues li .i { flex: none; font-size: 17px; margin-top: 1px; } .avct-issues li span { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; } .avct-issues li b { color: var(--text); font-size: 13px; }
.avct-issues li.is-red { background: #FDECEF; } .avct-issues li.is-red .i { color: #E63D45; } .avct-issues li.is-amber { background: #FFF4E0; } .avct-issues li.is-amber .i { color: #DB7900; }
.avct-issues li small { font-size: 11.5px; } .avct-issues li .po-link { flex: none; align-self: center; }
.avct-src { margin: 0; font-size: 11.5px; color: var(--muted); }
.avct-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .avct-hist li { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: 12.5px; }
.avct-hist time { color: var(--text-2); white-space: nowrap; }
.avct-form { display: flex; flex-direction: column; gap: 12px; } .avct-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--text); }
.avct-form input:not([type=radio]), .avct-form select { height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-weight: 400; font-size: 13.5px; color: var(--text); }
.avct-form .is-invalid { border-color: #E63D45; } .avct-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.avct-mode { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; border: 0; } .avct-mode legend { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--text); }
.avct-mode label { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; }
.avct-fa { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.avct-check { margin: 0; padding: 10px 12px; border-radius: 10px; background: #F4F7FF; font-size: 12.5px; color: var(--text); } .avct-check.is-ok { background: #F1FAF5; }
.avct-check.is-warning { background: var(--amber-bg); color: var(--amber-text); } .avct-check.is-failed { background: #FDECEF; color: #B42339; }
.avct-modal { width: min(620px, calc(100vw - 32px)); }
.avk-src-link { margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--indigo); }                                                   /* D17: the Catalogs / Lead forms link of a required source */
@media (max-width: 1440px) { .avct-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .avct-cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1280px) { .avct-grid { grid-template-columns: minmax(0, 1fr); } .avct-panel { position: static; } .avct-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 768px) { .avct-head h1 { font-size: 24px; } .avct-acts { justify-content: flex-start; } .avct-filters > label { flex: 1 1 100%; } .avct-filters select { width: 100%; }
  .avct-cards, .avct-two { grid-template-columns: minmax(0, 1fr); } .avct-ph { flex-wrap: wrap; } .avct-pacts { justify-content: flex-start; width: 100%; }
  .avct-dl { grid-template-columns: minmax(0, 1fr); gap: 2px 10px; } .avct-dl dd { margin-bottom: 6px; } .avct-hist li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
/* ---------- Advertisement-51 · Leads and delivery (avld- this screen: the export menu, the read line, the privacy strip, the leads / forms card with its tabs, filters, table and pager, the lead drawer with its header, tabs, detail boxes, masked answers, delivery trail and footer, the Lead rules dialog; reuses avo-head, avas-nav, po-card / po-chip / po-btn / pm-menu, avd-menuwrap / avd-modal / avd-backdrop / avd-x, av-pf, avw-strip) — plans/Advertisement-51.md, prototype/gen/advertisement51.css ---------- */
.avld-xmenu { min-width: 290px; } .avld-xmenu button { display: flex !important; align-items: center; gap: 10px; width: 100%; text-align: left; }
.avld-xmenu span { display: flex; flex-direction: column; min-width: 0; } .avld-xmenu small { font-size: 11.5px; color: var(--text-2); white-space: normal; }
.avld-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: -4px 0 14px; font-size: 12.5px; color: var(--text-2); }
.avld-line span { display: inline-flex; align-items: center; gap: 6px; } .avld-line .av-pf { width: 16px; height: 16px; flex: none; } .avld-line i { font-style: normal; color: var(--muted); }
.avld-priv { margin: 0 0 14px; }
.avld-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; } .avld-root.has-drawer .avld-grid { grid-template-columns: minmax(0, 1fr) 440px; }
.avld-card { padding: 12px 16px 16px; min-width: 0; }
.avld-tabs, .avld-dtabs { display: flex; gap: 24px; margin: 0 0 12px; border-bottom: 1px solid var(--border-soft); overflow-x: auto; }
.avld-tab, .avld-dtab { position: relative; padding: 10px 2px 11px; font-size: 14px; font-weight: 500; color: var(--text-2); text-decoration: none; white-space: nowrap; }
.avld-tab small { margin-left: 4px; font-size: 12px; color: var(--muted); } .avld-tab.is-on, .avld-dtab.is-on { color: var(--indigo); font-weight: 600; }
.avld-dtab small { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 4px; padding: 0 5px; border-radius: 10px; background: var(--indigo); color: #fff; font-size: 11.5px; font-weight: 700; }
.avld-tab.is-on::after, .avld-dtab.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--indigo); }
.avld-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.avld-filters select, .avld-search input { height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 13px; color: var(--text); max-width: 100%; }
.avld-search { position: relative; flex: 1 1 200px; display: flex; } .avld-search .i { position: absolute; left: 10px; top: 11px; font-size: 16px; color: var(--muted); }
.avld-search input { width: 100%; padding-left: 32px; }
.avld-scroll { position: relative; overflow-x: auto; }
.avld-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--text); }
.avld-table th { padding: 9px 8px; text-align: left; font-size: 12px; font-weight: 500; color: var(--text-2); background: #F7F8FB; white-space: nowrap; }
.avld-table td { padding: 11px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; } .avld-table td small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-2); }
.avld-table .n { text-align: right; white-space: nowrap; } .avld-nw { white-space: nowrap; } .avld-cb { width: 32px; }
.avld-row { cursor: pointer; } .avld-row:hover td { background: #FAFBFD; } .avld-row.is-sel td { background: #F4F7FF; }
.avld-who { display: flex; align-items: center; gap: 10px; min-width: 0; } .avld-who > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.avld-av { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #E9ECF6; color: var(--text-2); font-size: 13px; font-weight: 700; }
.avld-av.is-lg { width: 52px; height: 52px; font-size: 17px; }
.avld-name { color: var(--text); font-weight: 600; text-decoration: none; } .avld-name:hover { color: var(--indigo); }
.avld-prov { display: inline-flex; align-items: center; gap: 8px; } .avld-prov .av-pf { width: 20px; height: 20px; flex: none; } .avld-prov > span { display: flex; flex-direction: column; min-width: 0; }
.avld-crm { font-size: 12.5px; color: var(--text); overflow-wrap: anywhere; } .avld-crm.avld-s-none, .avld-crm.avld-s-failed, .avld-crm.avld-s-pending, .avld-crm.avld-s-skipped { color: var(--text-2); }
.avld-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 0; font-size: 12.5px; color: var(--text-2); }
.avld-pages { display: inline-flex; gap: 6px; } .avld-pg { display: grid; place-items: center; min-width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-2); text-decoration: none; }
.avld-pg.is-on { background: #EEF1FF; border-color: #C9D3FF; color: var(--indigo); font-weight: 700; }
.avld-foot { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #F7F8FB; font-size: 12.5px; color: var(--text-2); }
.avld-foot .i { flex: none; font-size: 15px; margin-top: 1px; } .avld-foot a { color: var(--indigo); font-weight: 600; }
.avld-drawer { position: sticky; top: 12px; display: flex; flex-direction: column; padding: 16px 16px 0; min-width: 0; max-height: calc(100vh - 24px); }
.avld-dh { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; } .avld-dt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.avld-dt h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; } .avld-dt small { font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.avld-dh .avd-x { text-decoration: none; }
.avld-dbody { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 0 0 12px; }
.avld-box { padding: 14px; border: 1px solid var(--border); border-radius: 10px; min-width: 0; } .avld-box h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14.5px; font-weight: 700; color: var(--text); }
.avld-bh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; } .avld-bh h3 { margin: 0; }
.avld-reveal { height: 34px; } .avld-reveal[aria-pressed="true"] { background: #EEF1FF; border-color: #C9D3FF; color: var(--indigo); }
.avld-dl { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 7px 10px; margin: 0 0 8px; font-size: 12.5px; }
.avld-dl dt { color: var(--text-2); } .avld-dl dd { margin: 0; color: var(--text); overflow-wrap: anywhere; } .avld-dl dd small { color: var(--text-2); }
.avld-dl dd .av-pf { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; } .avld-dl dd.is-revealed { font-weight: 600; }
.avld-dl dd a { color: var(--indigo); } .avld-ref { color: var(--text); }
.avld-copy, .avld-link { padding: 0 4px; border: 0; background: none; color: var(--indigo); cursor: pointer; font: inherit; } .avld-copy .i { font-size: 14px; vertical-align: -2px; }
.avld-note { margin: 4px 0 0; font-size: 12px; color: var(--text-2); } .avld-note a { color: var(--indigo); } .avld-note + .avld-dl { margin-top: 10px; }
.avld-dacts { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.avld-trail { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .avld-trail li { display: grid; grid-template-columns: 124px auto minmax(0, 1fr); align-items: start; gap: 8px; padding: 7px 0; border-top: 1px solid var(--border-soft); font-size: 12px; }
.avld-trail time { color: var(--text-2); white-space: nowrap; }
.avld-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .avld-hist li { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: 12.5px; }
.avld-hist time { color: var(--text-2); white-space: nowrap; }
.avld-dfoot { position: sticky; bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 8px; margin: 0 -16px; padding: 12px 16px; border-top: 1px solid var(--border-soft); background: var(--surface); border-radius: 0 0 12px 12px; }
.avld-dfoot .po-btn { justify-content: center; height: 42px; } .avld-dfoot .po-btn[disabled] { opacity: .55; cursor: not-allowed; } .avld-more { padding: 0; width: 44px; }
.avld-modal { width: min(600px, calc(100vw - 32px)); }
.avld-form { display: flex; flex-direction: column; gap: 14px; } .avld-form fieldset { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; border: 0; }
.avld-form legend { margin: 0 0 6px; font-size: 13.5px; font-weight: 700; color: var(--text); } .avld-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--text); }
.avld-form select { height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-weight: 400; font-size: 13.5px; color: var(--text); }
.avld-form .avld-check { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; } .avld-check small { color: var(--text-2); }
.avld-viewers { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 16px; }
@media (max-width: 1440px) { .avld-root.has-drawer .avld-grid { grid-template-columns: minmax(0, 1fr) 400px; } }
@media (max-width: 1280px) { .avld-root.has-drawer .avld-grid { grid-template-columns: minmax(0, 1fr); } .avld-drawer { position: static; max-height: none; } }
@media (max-width: 768px) { .avld-head h1 { font-size: 24px; } .avld-acts { justify-content: flex-start; } .avld-filters > label { flex: 1 1 100%; } .avld-filters select { width: 100%; }
  .avld-dl { grid-template-columns: minmax(0, 1fr); gap: 2px 10px; } .avld-dl dd { margin-bottom: 6px; } .avld-viewers { grid-template-columns: minmax(0, 1fr); }
  .avld-trail li, .avld-hist li { grid-template-columns: minmax(0, 1fr); gap: 2px; } .avld-pager { flex-wrap: wrap; } }
@media (max-width: 430px) { .avld-dfoot { grid-template-columns: minmax(0, 1fr) 44px; } .avld-dfoot #avld-retry { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- Advertisement-71 · Advertisement sessions and D71-live (avss- the sessions page and the shared session parts: the KPI tiles, the list with its chips, filters, kind tiles and pager, the Live workspace card with its tabs, the simulated Ads Manager page, the stepper, the current step, the controller, the evidence list, the footer actions, the New session drawer and the verification dialog; avlv- the live page; reuses avo-head, po-card / po-chip / po-btn / pm-menu, avd-menuwrap / avd-modal / avd-backdrop / avd-x, av-pf, avw-strip, cv-crumbs and Promotion-49's lx-frame / lx-bar / lx-url / lx-res / lx-sim / lx-none / lx-overlay / lx-ocard / lx-feed) — plans/Advertisement-71.md, prototype/gen/advertisement71.css ---------- */
.avss-acts { flex-wrap: wrap; justify-content: flex-end; }
.avss-more { width: 44px; padding: 0 !important; justify-content: center; }
.avss-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 10px 0 16px; }
.avss-tile { display: flex; align-items: center; gap: 16px; min-height: 92px; padding: 14px 18px; border-radius: 12px; min-width: 0; }
.avss-tile > div { display: flex; flex-direction: column; min-width: 0; }
.avss-tic { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); }
.avss-tic .i { font-size: 26px; }
.avss-tic.is-running { background: var(--green-bg); color: var(--green); } .avss-tic.is-completed { background: #EEF1FF; color: var(--indigo); }
.avss-tl { font-size: 14px; color: var(--text); } .avss-tv { font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--text); }
.avss-tile small { font-size: 13px; color: var(--text-2); }
.avss-grid { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 16px; align-items: start; }
.avss-card { padding: 16px 18px; min-width: 0; }
.avss-ch { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.avss-ch h2 { margin: 0; font-size: 19px; font-weight: 700; color: var(--text); }
.avss-cap { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); } .avss-cap .i { font-size: 15px; }
.avss-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.avss-chipf { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 16px; font-size: 13px; font-weight: 500; color: var(--text); text-decoration: none; }
.avss-chipf small { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--track); font-size: 11.5px; font-weight: 700; color: var(--text-2); }
.avss-chipf.is-on { border-color: var(--indigo); background: var(--indigo); color: #fff; } .avss-chipf.is-on small { background: #fff; color: var(--indigo); }
.avss-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.avss-filters select, .avss-search input { height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 13px; color: var(--text); max-width: 100%; }
.avss-search { position: relative; flex: 1 1 200px; display: flex; } .avss-search .i { position: absolute; left: 10px; top: 11px; font-size: 16px; color: var(--muted); }
.avss-search input { width: 100%; padding-left: 32px; }
.avss-scroll { position: relative; overflow-x: auto; }
.avss-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--text); }
.avss-table th { padding: 9px 6px; text-align: left; font-size: 12px; font-weight: 500; color: var(--text-2); background: #F7F8FB; white-space: nowrap; }
.avss-table td { padding: 10px 6px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; } .avss-table td small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-2); }
.avss-row { cursor: pointer; } .avss-row:hover td { background: #FAFBFD; } .avss-row.is-sel td { background: #F4F7FF; }
.avss-sess { display: flex; align-items: center; gap: 10px; min-width: 0; } .avss-sess > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.avss-ref { color: var(--text); font-weight: 600; text-decoration: none; white-space: nowrap; } .avss-ref:hover { color: var(--indigo); }
.avss-ktile { flex: none; display: grid; place-items: center; width: 52px; height: 40px; border-radius: 8px; background: var(--indigo-bg); color: var(--indigo); }
.avss-ktile .i { font-size: 20px; } .avss-ktile.is-lg { width: 72px; height: 54px; } .avss-ktile.is-lg .i { font-size: 26px; }
.avss-ktile.is-ad_optimize { background: #F1ECFF; color: #6D4AE0; } .avss-ktile.is-ad_verify { background: var(--amber-bg); color: var(--amber-text); } .avss-ktile.is-ad_account { background: var(--green-bg); color: var(--green-text); }
.avss-type { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 6px; background: #F1F3F8; font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; }
.avss-obj { min-width: 130px; } .avss-nw { white-space: nowrap; }
.avss-pf { width: 22px; height: 22px; }
.avss-rowacts { white-space: nowrap; text-align: right; }
.avss-rowacts > * { vertical-align: middle; }
.avss-rbtn.po-btn { height: 34px; padding: 0 12px; font-size: 13px; }
.avss-rowacts .avd-menuwrap { display: inline-block; }
.avss-rdots { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--text-2); cursor: pointer; }
.avss-rdots:hover { background: var(--track); } .avss-rdots .i { font-size: 18px; }
.avss-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 0; font-size: 12.5px; color: var(--text-2); }
.avss-pages { display: inline-flex; gap: 6px; } .avss-pg { display: grid; place-items: center; min-width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-2); text-decoration: none; }
.avss-pg.is-on { background: #EEF1FF; border-color: #C9D3FF; color: var(--indigo); font-weight: 700; }
.avss-ws .avss-ch .po-chip { height: 28px; font-size: 13px; }
.avss-wsum { display: flex; align-items: center; gap: 14px; margin: 0 0 10px; } .avss-wsum > div { display: flex; flex-direction: column; min-width: 0; }
.avss-wsum b { font-size: 16px; color: var(--text); } .avss-wsum span { font-size: 13.5px; color: var(--text-2); }
.avss-wsum small { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); } .avss-wsum .av-pf { width: 16px; height: 16px; }
.avss-tabs { display: flex; gap: 18px; margin: 0 0 12px; border-bottom: 1px solid var(--border-soft); overflow-x: auto; }
.avss-tab { position: relative; padding: 9px 2px 10px; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.avss-tab.is-on { color: var(--indigo); font-weight: 600; } .avss-tab.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--indigo); }
.avss-panel { min-height: 280px; }
.avss-vhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; font-size: 13px; color: var(--text-2); }
.avss-vhead > span:first-child { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .avss-vhead .i, .avss-vhead .av-pf { font-size: 16px; width: 16px; height: 16px; }
.avss-vchip.po-chip { height: 26px; }
.avss-page { display: grid; grid-template-columns: 120px minmax(0, 1fr); min-height: 236px; background: #fff; }
.avss-page.has-creative { grid-template-columns: 112px minmax(0, 1fr) 124px; }
.avss-amnav { list-style: none; margin: 0; padding: 10px 8px; border-right: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--text); }
.avss-amnav li { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 6px; border-radius: 6px; } .avss-amnav li .i { font-size: 14px; color: var(--text-2); }
.avss-amnav li.is-on { background: #EEF1FF; color: var(--indigo); font-weight: 600; } .avss-amnav .avss-amlogo { margin: 0 0 6px; font-size: 14px; font-weight: 700; gap: 6px; }
.avss-ammain { padding: 10px 10px; min-width: 0; overflow-x: auto; } .avss-amh { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--text); }
.avss-amtools { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; } .avss-amtools span { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border: 1px solid var(--border-soft); border-radius: 5px; font-size: 11px; color: var(--text-2); }
.avss-amtools span.is-primary { background: #1D5CF5; border-color: #1D5CF5; color: #fff; font-weight: 600; }
.avss-amtable { width: 100%; border-collapse: collapse; font-size: 11.5px; color: var(--text); } .avss-amtable th { padding: 6px; text-align: left; font-weight: 500; color: var(--text-2); border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.avss-amtable td { padding: 7px 6px; border-bottom: 1px solid var(--border-soft); } .avss-amname { color: #1D5CF5; font-weight: 600; } .avss-amempty { color: var(--text-2); }
.avss-toggle { display: inline-block; position: relative; width: 26px; height: 14px; border-radius: 7px; background: #CBD2DE; vertical-align: middle; }
.avss-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.avss-toggle.is-on { background: #1D5CF5; } .avss-toggle.is-on::after { left: 14px; }
.avss-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #9CA3AF; } .avss-dot.is-green { background: var(--green); } .avss-dot.is-amber { background: var(--amber); }
.avss-creative { margin: 0; padding: 10px; border-left: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.avss-creative img, .avss-noimg { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: var(--indigo-bg-2); }
.avss-noimg { display: grid; place-items: center; color: var(--indigo); } .avss-creative figcaption { display: flex; flex-direction: column; font-size: 11.5px; } .avss-creative small { color: var(--text-2); }
.avss-frame .lx-none { min-height: 260px; }
.avss-sensitive .i { color: var(--amber); } .avss-out.po-btn { margin-top: 6px; height: 36px; }
.avss-open { margin: 8px 0 0; text-align: right; font-size: 13px; } .avss-open a { display: inline-flex; align-items: center; gap: 5px; color: var(--indigo); font-weight: 600; text-decoration: none; }
.avss-h3 { margin: 14px 0 8px; font-size: 14.5px; font-weight: 700; color: var(--text); }
.avss-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.avss-step { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 36px; font-size: 13.5px; }
.avss-sdot { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #C9CED9; color: #fff; font-size: 11.5px; font-weight: 700; }
.avss-sdot .i { font-size: 14px; } .avss-step.is-done .avss-sdot { background: var(--green); } .avss-step.is-now .avss-sdot { background: var(--indigo); box-shadow: 0 0 0 4px var(--indigo-bg); }
.avss-step.is-wait .avss-sdot { background: var(--amber); } .avss-step.is-fail .avss-sdot { background: var(--red); } .avss-step.is-skip .avss-sdot { background: #E5E8EF; color: var(--text-2); }
.avss-sl { display: flex; flex-direction: column; min-width: 0; } .avss-sl b { font-weight: 500; color: var(--text); } .avss-sl small { font-size: 12px; color: var(--text-2); }
.avss-sw { font-size: 12.5px; color: var(--text-2); white-space: nowrap; } .avss-step.is-now .avss-sw { color: var(--indigo); font-weight: 600; } .avss-step.is-done .avss-sw { color: var(--green-text); }
.avss-step.is-wait .avss-sw { color: var(--amber-text); font-weight: 600; } .avss-step.is-fail .avss-sw { color: #B42339; font-weight: 600; }
.avss-cur { display: flex; flex-direction: column; gap: 10px; } .avss-curh { display: flex; align-items: flex-start; gap: 12px; }
.avss-curh b { font-size: 15.5px; color: var(--text); } .avss-curh p { margin: 2px 0 0; font-size: 13px; color: var(--text-2); }
.avss-ring { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 4px solid var(--indigo-bg); border-top-color: var(--indigo); }
.avss-ring.is-done { border-color: var(--green); } .avss-ring.is-wait { border-color: var(--amber-bg); border-top-color: var(--amber); } .avss-ring.is-fail { border-color: #FDECEF; border-top-color: var(--red); }
.avss-ring.is-pending, .avss-ring.is-skip { border-color: var(--track); }
.avss-wait { margin: 0; }
.avss-kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 7px 12px; margin: 0; font-size: 13px; } .avss-kv dt { color: var(--text-2); } .avss-kv dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.avss-ctl { display: flex; flex-direction: column; gap: 12px; } .avss-ctl .avw-strip { margin: 0; }
.avss-ctlacts { display: flex; flex-wrap: wrap; gap: 8px; }
.avss-take.po-btn { border-color: #F3B7C0; color: #B42339; }
.avss-feed li { font-size: 13px; min-height: 26px; } .avss-feed em { font-style: normal; color: var(--text-2); }
.avss-ev { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; }
.avss-ev li { display: grid; grid-template-columns: 136px minmax(0, 1fr) auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: 12.5px; }
.avss-ev time { color: var(--text-2); white-space: nowrap; } .avss-ev small { color: var(--text-2); white-space: nowrap; } .avss-ev .avss-evnone { display: block; color: var(--text-2); }
.avss-fine { display: flex; align-items: flex-start; gap: 7px; margin: 8px 0; font-size: 12.5px; color: var(--text-2); } .avss-fine .i { flex: none; font-size: 15px; margin-top: 1px; } .avss-fine a { color: var(--indigo); font-weight: 600; }
.avss-rec { display: flex; flex-wrap: wrap; gap: 8px; }
.avss-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border-soft); }
.avss-foot > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .avss-foot small { font-size: 11.5px; color: var(--text-2); text-align: center; }
.avss-foot .po-btn { justify-content: center; height: 40px; font-size: 13.5px; padding: 0 10px; } .avss-foot .po-btn[disabled] { opacity: .55; cursor: not-allowed; }
.avss-end.po-btn { border-color: #F3B7C0; color: #B42339; }
.avss-nosel { margin: 24px 0; color: var(--text-2); text-align: center; }
.avss-drawer { position: fixed; z-index: 81; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); display: flex; flex-direction: column; background: var(--surface); box-shadow: -18px 0 48px rgba(16, 21, 47, 0.2); }
.avss-dh { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px 10px; } .avss-dh h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--text); }
.avss-dh .avd-x { text-decoration: none; }
.avss-dform { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 4px 22px 16px; }
.avss-dform fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; } .avss-dform legend { margin: 0 0 6px; font-size: 13.5px; font-weight: 700; color: var(--text); }
.avss-dform label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--text); } .avss-dform label small { font-weight: 400; color: var(--text-2); }
.avss-dform select, .avss-dform input[type="text"], .avss-dform input[type="datetime-local"] { height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-weight: 400; font-size: 13.5px; color: var(--text); }
.avss-dform label.is-invalid select, .avss-dform label.is-invalid input { border-color: var(--red); }
.avss-tpl { flex-direction: row !important; align-items: center; gap: 12px !important; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.avss-tpl input { position: absolute; opacity: 0; width: 1px; height: 1px; } .avss-tpl.is-on { border-color: var(--indigo); background: #F4F7FF; }
.avss-tpl > span:last-child { display: flex; flex-direction: column; } .avss-tpl b { font-size: 14px; } .avss-tpl small { font-size: 12.5px; font-weight: 400; color: var(--text-2); }
.avss-tpl .avss-ktile { width: 40px; height: 40px; }
.avss-tpl:focus-within { outline: 2px solid var(--indigo); outline-offset: 2px; }
.avss-newprof { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 10px; } .avss-newprof[hidden] { display: none; }
.avss-test { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); } .avss-test .po-btn { height: 36px; }
.avss-dfoot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 22px; border-top: 1px solid var(--border-soft); }
/* backlog 3.26: the profiles card and the profile drawer (S08) */
.avss-profiles { margin-top: 16px; } .avss-profiles .avss-ch .avss-fine { margin: 0; }
.avss-profiles td small { display: block; font-size: 12px; color: var(--text-2); }
.avss-dh small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-2); }
.avss-pfacts { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px 12px; margin: 0; font-size: 13px; }
.avss-pfacts dt { color: var(--text-2); } .avss-pfacts dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.avss-pform { display: flex; flex-direction: column; gap: 12px; }
.avss-dfoot { flex-wrap: wrap; } .avss-dfoot .avss-left { margin-right: auto; }
@media (max-width: 768px) { .avss-pfacts { grid-template-columns: minmax(0, 1fr); } .avss-pfacts dt { margin-top: 4px; }
  body:has(#avss-pdrawer) .mo-tabbar, body:has(#avss-drawer) .mo-tabbar { display: none; } }
.avss-vmodal { width: min(640px, calc(100vw - 32px)); }
.avss-verdict { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 13px; }
.avss-verdict.is-green { background: var(--green-bg); color: var(--green-text); } .avss-verdict.is-amber { background: var(--amber-bg); color: var(--amber-text); }
.avss-verdict.is-red { background: #FDECEF; color: #B42339; } .avss-verdict.is-grey { background: var(--track); color: var(--text-2); }
.avss-vtable { width: 100%; margin: 10px 0 0; border-collapse: collapse; font-size: 13px; } .avss-vtable th, .avss-vtable td { padding: 8px; border-bottom: 1px solid var(--border-soft); text-align: left; overflow-wrap: anywhere; }
.avss-vtable thead th { font-size: 12px; font-weight: 500; color: var(--text-2); background: #F7F8FB; } .avss-vtable tbody th { font-weight: 500; color: var(--text-2); }
/* D71-live */
.avlv-crumbs { margin: 4px 0 2px; }
.avlv-acts { flex-wrap: wrap; justify-content: flex-end; }
.avlv-upd { display: flex; flex-direction: column; align-items: flex-end; font-size: 12.5px; color: var(--text-2); } .avlv-upd small { font-size: 12px; }
.avlv-grid { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 12px; }
.avlv-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.avlv-card { padding: 16px 18px; min-width: 0; }
.avlv-create.po-btn { height: 36px; font-size: 13.5px; }
.avlv-table td { padding: 8px 6px; } .avlv-when { font-size: 12px; color: var(--text-2); min-width: 92px; }
.avlv-wacts .po-btn[disabled] { opacity: .55; cursor: not-allowed; } .avlv-search { flex: 1 1 100%; }
.avlv-dl { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--indigo); text-decoration: none; }
.avlv-wh { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
.avlv-wt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; } .avlv-wt h2 { margin: 0; font-size: 19px; font-weight: 700; color: var(--text); }
.avlv-wt p { flex-basis: 100%; margin: 0; font-size: 13.5px; color: var(--text-2); } .avlv-ref { font-size: 12.5px; color: var(--text-2); }
.avlv-wacts { display: flex; flex-wrap: wrap; gap: 8px; } .avlv-wacts .po-btn { height: 38px; font-size: 13.5px; padding: 0 12px; }
.avlv-ws .avw-strip { margin: 0 0 10px; }
.avlv-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.avlv-details.po-btn { margin-top: 10px; height: 36px; }
@media (max-width: 1440px) { .avss-grid { grid-template-columns: minmax(0, 1fr) 460px; } }
@media (max-width: 1280px) { .avss-grid, .avlv-grid { grid-template-columns: minmax(0, 1fr); } .avss-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) { .avss-head h1, .avlv-head h1 { font-size: 24px; } .avss-acts, .avlv-acts { justify-content: flex-start; } .avss-filters > label { flex: 1 1 100%; } .avss-filters select { width: 100%; }
  .avss-page, .avss-page.has-creative { grid-template-columns: minmax(0, 1fr); } .avss-amnav { display: none; } .avss-creative { border-left: 0; border-top: 1px solid var(--border-soft); }
  .avss-creative img, .avss-noimg { max-width: 160px; } .avlv-two, .avss-foot, .avss-newprof { grid-template-columns: minmax(0, 1fr); }
  .avss-ev li { grid-template-columns: minmax(0, 1fr); gap: 2px; } .avss-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; } .avss-kv dd { margin-bottom: 6px; } .avlv-upd { align-items: flex-start; } }
@media (max-width: 430px) { .avss-tiles { grid-template-columns: minmax(0, 1fr); } .lx-bar .lx-res { display: none; } }
/* ---------- Advertisement-72 · Advertisement settings (avsg- this screen: the scope switch, the card grid with the inheritance lines, the chip lists, the account defaults, the team table, the locked approval row, the capability table, the linked policies, the read-only server switches, the unsaved bar and the summary dialog; reuses avo-head, po-card / po-chip / po-btn, avd-modal / avd-backdrop / avd-x / avd-impact, av-pf, avw-strip) — plans/Advertisement-72.md, prototype/gen/advertisement72.css ---------- */
.avsg-acts { flex-wrap: wrap; justify-content: flex-end; }
.avsg-upd { flex-basis: 100%; text-align: right; font-size: 12.5px; color: var(--text-2); }
.avsg-scope { display: inline-flex; gap: 4px; margin: 10px 0 0; padding: 3px; border-radius: 10px; background: var(--track); }
.avsg-scopeitem { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); text-decoration: none; }
.avsg-scopeitem.is-on { background: var(--surface); color: var(--indigo); box-shadow: 0 1px 2px rgba(16, 21, 47, .08); }
.avsg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 12px; }
.avsg-card { padding: 16px 20px 18px; min-width: 0; scroll-margin-top: 16px; } .avsg-card.is-focus { box-shadow: 0 0 0 2px var(--indigo); }
.avsg-wide { grid-column: 1 / -1; }
.avsg-card h2 { margin: 0; font-size: 18.5px; font-weight: 700; color: var(--text); }
.avsg-sub { margin: 3px 0 12px; font-size: 13px; color: var(--text-2); }
.avsg-ch { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .avsg-ch .po-btn { flex: none; height: 38px; font-size: 13.5px; }
.avsg-h3 { margin: 14px 0 8px; font-size: 14.5px; font-weight: 700; color: var(--text); }
.avsg-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; }
.avsg-field { display: flex; flex-direction: column; gap: 5px; margin: 0 0 12px; min-width: 0; }
.avsg-label { font-size: 13px; font-weight: 600; color: var(--text); }
.avsg-field select { height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 13.5px; color: var(--text); max-width: 100%; }
.avsg-field.is-invalid select, .avsg-field.is-invalid .avsg-chips { border-color: var(--red); }
.avsg-src, .avsg-hint { font-size: 12px; color: var(--text-2); } .avsg-hint { color: var(--muted); }
.avsg-reset { padding: 0; border: 0; background: none; font: inherit; color: var(--indigo); font-weight: 600; cursor: pointer; } .avsg-reset:disabled { color: var(--text-2); cursor: default; }
.avsg-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 40px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.avsg-chip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 4px 0 10px; border-radius: 6px; background: #EEF1FF; font-size: 12.5px; font-weight: 600; color: var(--indigo); }
.avsg-chip button { display: grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 4px; background: none; color: var(--indigo); font-size: 15px; cursor: pointer; }
.avsg-chip button:hover { background: #DDE3FF; }
.avsg-add { flex: 1 1 110px; min-width: 110px; height: 28px !important; border: 0 !important; padding: 0 4px !important; background: none !important; font-size: 12.5px !important; color: var(--text-2) !important; }
.avsg-scroll { position: relative; overflow-x: auto; }
.avsg-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--text); }
.avsg-table th { padding: 8px; text-align: left; font-size: 12px; font-weight: 500; color: var(--text-2); background: #F7F8FB; white-space: nowrap; }
.avsg-table td { padding: 9px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; } .avsg-table td small { display: block; font-size: 11.5px; color: var(--text-2); }
.avsg-acct { display: inline-flex; align-items: center; gap: 8px; } .avsg-acct > span { display: flex; flex-direction: column; } .avsg-acct .av-pf { width: 20px; height: 20px; }
.avsg-budget { display: inline-flex; align-items: center; gap: 6px; } .avsg-budget input { width: 120px; height: 34px; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; }
.avsg-budget span:last-child { font-size: 12px; color: var(--text-2); }
.avsg-who { display: flex; align-items: center; gap: 10px; min-width: 0; } .avsg-who > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.avsg-av { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #E9ECF6; color: var(--text-2); font-size: 12.5px; font-weight: 700; }
.avsg-locked { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #F7F8FB; }
.avsg-locked > .i { flex: none; font-size: 18px; color: var(--text-2); } .avsg-locked > span:nth-child(2) { flex: 1 1 auto; display: flex; flex-direction: column; font-size: 13px; }
.avsg-locked small { color: var(--text-2); }
.avsg-fine { display: flex; align-items: flex-start; gap: 7px; margin: 8px 0 0; font-size: 12.5px; color: var(--text-2); } .avsg-fine .i { flex: none; font-size: 15px; margin-top: 1px; }
.avsg-lines { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.avsg-lines li { display: flex; align-items: flex-start; gap: 7px; } .avsg-lines .i { flex: none; font-size: 15px; margin-top: 1px; } .avsg-lines a { color: var(--indigo); font-weight: 600; }
.avsg-manage.po-btn { height: 32px; padding: 0 12px; font-size: 13px; } .avsg-nw { white-space: nowrap; }
.avsg-pol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.avsg-pol a { display: grid; grid-template-columns: 170px minmax(0, 1fr) 18px; align-items: center; gap: 10px; padding: 11px 4px; border-bottom: 1px solid var(--border-soft); color: var(--text); text-decoration: none; font-size: 13px; }
.avsg-pol a:hover { background: #FAFBFD; } .avsg-pol span { color: var(--text-2); } .avsg-pol .i { color: var(--muted); }
.avsg-env { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; margin: 0; font-size: 13px; }
.avsg-env dt { display: flex; flex-direction: column; color: var(--text); } .avsg-env dt small { font-size: 11px; color: var(--muted); font-family: ui-monospace, Consolas, monospace; } .avsg-env dd { margin: 0; align-self: center; }
.avsg-bar { position: sticky; bottom: 12px; z-index: 30; display: flex; align-items: center; gap: 10px; margin: 16px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--surface);
  box-shadow: 0 10px 30px rgba(16, 21, 47, .18); } .avsg-bar[hidden] { display: none; }
.avsg-bar span { flex: 1 1 auto; font-size: 13.5px; font-weight: 600; color: var(--text); } .avsg-bar .po-btn { height: 38px; }
.avsg-modal { width: min(620px, calc(100vw - 32px)); }
.avsg-sum { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.avsg-sum li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 9px 12px; border: 1px solid var(--border-soft); border-radius: 10px; font-size: 13px; }
.avsg-sum li b { color: var(--text); } .avsg-sum li span { color: var(--text-2); }
@media (max-width: 1280px) { .avsg-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) { .avsg-head h1 { font-size: 24px; } .avsg-acts { justify-content: flex-start; } .avsg-upd { text-align: left; } .avsg-two { grid-template-columns: minmax(0, 1fr); }
  .avsg-pol a { grid-template-columns: minmax(0, 1fr) 18px; } .avsg-pol a span { grid-column: 1; } .avsg-ch { flex-wrap: wrap; } }
.avsg-link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--indigo); text-decoration: none; white-space: nowrap; } .avsg-link .i { font-size: 15px; }

/* ---------- Advertisement-52 / 53 / 54 · the Meta specialist editor (ave- the shared editor frame: head with the provider mark, the editor stepper, fields, switches, limits, the side cards; avmc- the campaign section, avma- the ad section with the simulated preview and the access list, avmd- the lead destination with the form and conversation previews; reuses avo-head, avf-back, po-card / po-chip / po-btn / po-link, av-pf, avw-strip) — plans/Advertisement-52.md, -53.md, -54.md, prototype/gen/advertisement52.css ---------- */
.ave-head { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.ave-mark { width: 52px; height: 52px; border-radius: 14px; background: #EEF3FF; display: grid; place-items: center; }
.ave-mark .av-pf { width: 30px; height: 30px; }
.ave-head h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ave-head h1 .po-chip { font-size: 12px; letter-spacing: 0; }
.ave-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.ave-strip { margin: 0 4px 12px; } .ave-strip .avw-link { margin-left: auto; white-space: nowrap; }
.ave-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.ave-main { padding: 16px 20px 20px; min-width: 0; }
.ave-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ave-card { padding: 14px 16px; min-width: 0; }
.ave-ch { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.ave-ch h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
.ave-ch h2 small { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.ave-ch > a, .ave-ch > button, .ave-ch > select { margin-left: auto; }
.ave-ch select { height: 32px; border: 1px solid var(--border); border-radius: 8px; padding: 0 8px; font: inherit; font-size: 13px; background: var(--surface); color: var(--text); max-width: 170px; }
/* the editor stepper */
.ave-steps ol { list-style: none; margin: 0 0 12px; padding: 0 0 14px; display: flex; gap: 6px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.ave-steps li { flex: 1 1 0; min-width: 150px; position: relative; }
.ave-steps li:not(:last-child)::after { content: ""; position: absolute; top: 17px; right: 4px; width: 18px; height: 1px; background: var(--border); }
.ave-steps a { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 4px 26px 4px 4px; border-radius: 10px; text-decoration: none; color: inherit; }
.ave-steps a:hover b { color: var(--indigo); }
.ave-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); font-weight: 700; font-size: 14px; color: var(--text-2); }
.ave-steps li.is-now .ave-n { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.ave-steps li.is-done .ave-n { background: var(--green-bg); border-color: #BFE7D4; color: var(--green-text); } .ave-steps .ave-n .i { font-size: 15px; }
.ave-sl { min-width: 0; } .ave-sl b { display: block; font-size: 14.5px; color: var(--text); } .ave-steps li.is-now .ave-sl b { color: var(--indigo); }
.ave-sl small { display: block; font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ave-read { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 12.5px; color: var(--green-text); } .ave-read .i { font-size: 14px; }
.ave-main > .ave-strip { margin: 0 0 12px; }
/* fields */
.ave-form { min-width: 0; }
.ave-h2 { margin: 2px 0 12px; font-size: 18px; font-weight: 700; color: var(--text); }
.ave-h3 { margin: 0 0 10px; font-size: 15.5px; font-weight: 700; color: var(--text); }
.ave-intro { margin: -8px 0 12px; font-size: 13.5px; color: var(--text-2); }
.ave-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; min-width: 0; }
.ave-l, .ave-field > label { font-size: 13.5px; font-weight: 600; color: var(--text); }
.ave-l small, .ave-field > label small { font-weight: 500; color: var(--muted); margin-left: 4px; display: inline-flex; align-items: center; gap: 3px; } .ave-l small .i { font-size: 12px; }
.ave-l2 { font-size: 13px; color: var(--text-2); }
.ave-field input:not([type=radio]):not([type=checkbox]), .ave-field select, .ave-field textarea, .avmd-edit input:not([type=checkbox]), .avmd-edit select {
  width: 100%; min-width: 0; height: 38px; border: 1px solid var(--border); border-radius: 8px; padding: 0 12px; font: inherit; font-size: 14px; background: var(--surface); color: var(--text); box-sizing: border-box; }
.ave-field textarea { height: auto; min-height: 66px; padding: 8px 12px; resize: vertical; line-height: 1.45; }
.ave-field input:disabled, .ave-field select:disabled, .ave-field textarea:disabled { background: #F6F7FA; color: var(--text-2); }
.ave-field.is-invalid input, .ave-field.is-invalid select, .ave-field.is-invalid textarea { border-color: var(--red, #F0546A); }
.ave-err { font-size: 12.5px; color: #B42339; }
.ave-hint { font-size: 12.5px; color: var(--text-2); }
.ave-static { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--text); } .ave-static small { font-size: 12.5px; color: var(--text-2); }
.ave-inwrap { position: relative; display: flex; align-items: center; gap: 10px; }
.ave-inwrap input { flex: 1; }
.ave-limit { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ave-limit .i { font-size: 13px; }
.ave-limit.is-ok { background: var(--green-bg); color: var(--green-text); } .ave-limit.is-warn { background: var(--amber-bg); color: var(--amber-text); } .ave-limit.is-bad { background: #FDECEF; color: #B42339; }
.ave-field > label .ave-limit { float: right; margin-left: 8px; }
.ave-radio { width: 18px; height: 18px; flex: none; border: 2px solid #C3C8D6; border-radius: 50%; background: var(--surface); box-sizing: border-box; }
label.is-on > .ave-radio, .avmd-list li.is-on .ave-radio, input:checked + .ave-radio { border: 5px solid var(--indigo); }
.ave-na { font-size: 13px; color: var(--text-2); } .ave-na summary { cursor: pointer; color: var(--indigo); font-weight: 600; margin-top: 4px; }
.ave-na ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; } .ave-na li { display: flex; gap: 8px; flex-wrap: wrap; } .ave-na li b { color: var(--text); }
.ave-sw { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; }
.ave-sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ave-sw > span { position: absolute; inset: 0; border-radius: 11px; background: var(--track); transition: background .15s; pointer-events: none; }
.ave-sw > span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.ave-sw.is-on > span { background: var(--indigo); } .ave-sw.is-on > span::after { transform: translateX(18px); }
.ave-sw input:focus-visible + span { outline: 2px solid #C9D2FF; outline-offset: 2px; }
.ave-sw input:disabled { cursor: not-allowed; } .ave-sw.is-static { opacity: .9; }
.ave-x { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 6px; font-size: 16px; line-height: 1; } .ave-x:hover { color: var(--text); background: var(--track); }
.ave-link-btn { border: 0; background: none; color: #B42339; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; padding: 0 4px; }
.ave-miss { color: #B42339; font-weight: 600; }
/* the side cards */
.ave-tree { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ave-tree li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; min-width: 0; }
.ave-tree li.is-group, .ave-tree li.is-ad { margin-left: 22px; padding-left: 10px; border-left: 1px solid var(--border); }
.ave-tree .av-pf, .ave-tree .i { width: 22px; height: 22px; font-size: 20px; color: var(--text-2); }
.ave-tree b { display: block; font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; } .ave-tree a { text-decoration: none; color: inherit; } .ave-tree a:hover b { color: var(--indigo); }
.ave-tree small { display: block; font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.ave-tree li.is-on b { color: var(--indigo); } .ave-tree li.is-new b { color: var(--muted); }
.ave-acct { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; }
.ave-acct .av-pf { width: 30px; height: 30px; }
.ave-acct b { font-size: 14px; color: var(--text); } .ave-acct small { display: block; font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; } .ave-acct .ave-src { color: var(--muted); margin-top: 2px; }
.ave-access { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; }
.ave-access li { display: grid; grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1.15fr) 20px; gap: 8px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); }
.ave-access li:last-child { border-bottom: 0; } .ave-access li.is-none { display: block; font-size: 13px; color: var(--text-2); }
.ave-access .av-pf { width: 22px; height: 22px; }
.ave-access small { display: block; font-size: 11.5px; color: var(--text-2); } .ave-access b { font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.ave-acc { display: flex; gap: 6px; align-items: flex-start; min-width: 0; } .ave-acc > .i { font-size: 16px; flex: none; margin-top: 1px; }
.ave-access li.is-ok .ave-acc > .i, .ave-access li.is-ok .ave-acc b { color: var(--green-text); } .ave-access li.is-bad .ave-acc > .i, .ave-access li.is-bad .ave-acc b { color: var(--amber-text); }
.ave-go { color: var(--muted); display: inline-flex; } .ave-go .i { font-size: 16px; }
/* D52 · campaign */
.avmc-objs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.avmc-obj, .avmc-opt, .avmd-mode { position: relative; display: grid; grid-template-columns: 18px 32px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; min-width: 0; }
.avmc-opt, .avmd-mode { grid-template-columns: 18px minmax(0, 1fr); }
.avmc-obj input, .avmc-opt input, .avmd-mode input, .avma-mode input, .avmc-pr input, .avmd-list input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.avmc-obj.is-on, .avmc-opt.is-on, .avmd-mode.is-on { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo) inset; background: #FBFCFF; }
.avmc-obj:focus-within, .avmc-opt:focus-within, .avmd-mode:focus-within { outline: 2px solid #C9D2FF; outline-offset: 2px; }
.avmc-opt.is-off, .avmd-mode.is-off { cursor: default; background: #FAFBFC; }
.avmc-ic .i { font-size: 26px; color: var(--text); }
.avmc-obj b, .avmc-opt b, .avmd-mode b { display: block; font-size: 14px; color: var(--text); } .avmc-obj small, .avmc-opt small, .avmd-mode small { display: block; font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.avmc-rec { font-style: normal; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 6px; background: var(--green-bg); color: var(--green-text); margin-left: 6px; }
.avmc-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.avmc-dist { display: flex; flex-direction: column; gap: 8px; }
.avmc-adv { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.avmc-adv li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: start; }
.avmc-adv b { display: block; font-size: 13.5px; color: var(--text); } .avmc-adv small { display: block; font-size: 12.5px; color: var(--text-2); }
.avmc-adv .po-chip { font-style: normal; margin-top: 4px; display: inline-block; } .avmc-adv li.is-off b { color: var(--muted); }
.avmc-period { display: flex; gap: 18px; flex-wrap: wrap; }
.avmc-pr { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); cursor: pointer; }
.avmc-money { display: grid; grid-template-columns: 34px minmax(0, 1fr) 46px; align-items: center; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface); }
.avmc-money span { text-align: center; font-size: 14px; color: var(--text-2); }
.avmc-money input { border: 0 !important; border-left: 1px solid var(--border) !important; border-radius: 0 !important; }
.avmc-facts { margin: 4px 0 0; display: grid; gap: 6px; font-size: 13px; }
.avmc-facts div { display: flex; gap: 8px; flex-wrap: wrap; } .avmc-facts dt { color: var(--text-2); min-width: 140px; } .avmc-facts dd { margin: 0; color: var(--text); }
/* D53 · ad */
.avma-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; }
.avma-details { padding-left: 22px; border-left: 1px solid var(--border); }
.avma-modes { display: flex; gap: 22px; flex-wrap: wrap; }
.avma-mode { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); cursor: pointer; }
.avma-phone { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; }
.avma-ph-top { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 10px 12px; }
.avma-av { width: 32px; height: 32px; border-radius: 50%; background: #1E2A5A; color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.avma-ph-top b { display: block; font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; } .avma-ph-top small { font-size: 11.5px; color: var(--text-2); }
.avma-dots { color: var(--text-2); letter-spacing: 1px; }
.avma-ph-text { margin: 0; padding: 0 12px 10px; font-size: 13px; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.avma-phone.is-instagram .avma-ph-text { padding-top: 8px; }
.avma-ph-media { aspect-ratio: 1 / 1; background: #0F1B3D; display: grid; place-items: center; color: #C9D2FF; font-size: 12.5px; text-align: center; }
.avma-ph-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avma-ph-media span { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px; } .avma-ph-media .i { font-size: 26px; }
.avma-ph-cta { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #F4F6FA; min-width: 0; }
.avma-ph-cta b { flex: 1; min-width: 0; font-size: 13.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avma-btn { padding: 6px 12px; border-radius: 6px; background: #E4E7EF; font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.avma-phone.is-instagram .avma-btn { background: var(--indigo); color: #fff; }
.avma-prev .ave-hint { display: block; margin-top: 8px; }
.avma-rules { margin: -6px 0 14px; }
/* D54 · destination */
.avmd-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.avmd-sec { margin-top: 6px; }
.avmd-sh { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .avmd-sh .ave-h3 { margin: 0; } .avmd-sh button { margin-left: auto; }
.avmd-list { list-style: none; margin: 0 0 12px; padding: 0; border: 1px solid var(--border); border-radius: 10px; }
.avmd-list li { border-bottom: 1px solid var(--border); } .avmd-list li:last-child { border-bottom: 0; }
.avmd-list label { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; cursor: pointer; }
.avmd-list li.is-on { background: #FBFCFF; } .avmd-list li.is-off label { cursor: default; } .avmd-list li.is-off b { color: var(--muted); }
.avmd-list li.is-none { padding: 12px; font-size: 13px; color: var(--text-2); }
.avmd-list b { display: block; font-size: 13.5px; color: var(--text); } .avmd-list small { display: block; font-size: 12px; color: var(--text-2); }
.avmd-dl { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #F8F9FC; display: grid; gap: 7px; font-size: 13px; }
.avmd-dl div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.avmd-dl dt { color: var(--text-2); } .avmd-dl dd { margin: 0; color: var(--text); overflow-wrap: anywhere; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.avmd-dl dd .i { font-size: 15px; } .avmd-dl dd.is-ok { color: var(--green-text); } .avmd-dl dd.is-bad { color: var(--amber-text); }
.avmd-edit { border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; }
.avmd-edit summary { display: flex; align-items: center; gap: 6px; padding: 10px 0; cursor: pointer; font-weight: 600; color: var(--indigo); } .avmd-edit summary .i { font-size: 15px; }
.avmd-edit[open] summary { border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.avmd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.avmd-qs { border: 0; margin: 0 0 12px; padding: 0; min-width: 0; } .avmd-qs legend { font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.avmd-prefill { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 8px; font-size: 13.5px; } .avmd-prefill label { display: inline-flex; align-items: center; gap: 6px; }
.avmd-custom { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.avmd-custom li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.avmd-custom li:has([data-q-options]) { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto; }
.avmd-addq { display: flex; gap: 8px; flex-wrap: wrap; }
.avmd-fact { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 0 12px; } .avmd-fact .ave-hint { flex-basis: 100%; }
.avmd-ident { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; margin: 0 0 6px; }
.avmd-ident .av-pf { width: 28px; height: 28px; } .avmd-ident b { display: block; font-size: 14px; color: var(--text); } .avmd-ident small { font-size: 12px; color: var(--text-2); }
.avmd-ident .po-chip { display: inline-flex; align-items: center; gap: 4px; } .avmd-ident .po-chip .i { font-size: 12px; }
#avmd-messaging > .ave-hint { display: block; margin-bottom: 14px; }
.avmd-chat { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px 14px; background: #fff; margin-bottom: 10px; }
.avmd-chat-top { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.avmd-chat-top b { display: block; font-size: 13.5px; } .avmd-chat-top small { font-size: 11.5px; color: var(--text-2); }
.avmd-time { text-align: center; font-size: 11.5px; color: var(--muted); margin: 10px 0; }
.avmd-bubble { margin: 0 0 8px; padding: 8px 12px; border-radius: 16px; font-size: 13px; max-width: 82%; width: fit-content; overflow-wrap: anywhere; }
.avmd-bubble.is-me { margin-left: auto; background: #7B5CF5; color: #fff; } .avmd-bubble.is-them { background: #EEF0F5; color: var(--text); }
.avmd-formprev { border: 1px solid var(--border); border-radius: 12px; padding: 14px; background: #fff; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; }
.avmd-formprev h3 { margin: 0; font-size: 17px; color: var(--text); } .avmd-formprev p { margin: 0; font-size: 12.5px; color: var(--text-2); }
.avmd-fp-brand { font-weight: 600; color: var(--text) !important; }
.avmd-fp-q { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text); }
.avmd-fp-in { height: 30px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; color: var(--muted); padding: 6px 8px; box-sizing: border-box; }
.avmd-fp-btn { text-align: center; padding: 8px; border-radius: 8px; background: var(--indigo); color: #fff; font-weight: 600; font-size: 13.5px; }
.avmd-fp-legal { font-size: 11.5px !important; text-align: center; }
@media (max-width: 1280px) { .ave-grid { grid-template-columns: minmax(0, 1fr); } .ave-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
@media (max-width: 1100px) { .avmc-objs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .avma-cols, .avmc-cols { grid-template-columns: minmax(0, 1fr); } .avma-details { padding-left: 0; border-left: 0; } }
@media (max-width: 768px) {
  .ave-head { grid-template-columns: 40px minmax(0, 1fr); } .ave-mark { width: 40px; height: 40px; } .ave-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .ave-head h1 { font-size: 24px; } .ave-main { padding: 14px; } .avmc-objs, .avmd-modes, .avmd-grid { grid-template-columns: minmax(0, 1fr); }
  .ave-side { grid-template-columns: minmax(0, 1fr); } .ave-steps li { min-width: 132px; } .avmd-dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ave-access li { grid-template-columns: 24px minmax(0, 1fr) 20px; } .ave-access .ave-acc { grid-column: 2 / 3; }
  .avmd-ident { grid-template-columns: 28px minmax(0, 1fr) auto; } .avmd-ident > a { grid-column: 2 / -1; justify-self: start; }
  .avmd-custom li, .avmd-custom li:has([data-q-options]) { grid-template-columns: minmax(0, 1fr) auto; } .avmd-custom li .po-chip { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- Advertisement-55 / 56 / 57 · the last Meta editor sections and the first Google Ads section (avmx- connected assets: the local modes, catalog and app lists, pills, fields, event readiness, the app readiness box, the compatible creative, the required-assets card and the product-card preview; avmq- eligibility: the card-level tabs, the requirements checklist, the partnership switch and partners with their request actions, the category list with its conflicts, the EU names, the account facts, the current-access and pending-authorization cards; avgs- the Google campaign: the type cards, the details row, the Search settings with networks, location / language chips, the ad schedule rows, budget, goal and bidding; the stepper's planned sections; reuses the ave- frame, avmc-obj / avmc-period / avmc-pr / avmc-money / avmc-cols / avmc-facts, avmd-mode / avmd-list / avmd-dl, avma-phone, po-card / po-chip / po-btn / po-link, av-pf, avw-strip) — plans/Advertisement-55.md, -56.md, -57.md, prototype/gen/advertisement55.css ---------- */
.ave-steps li { min-width: 124px; } .ave-steps a { padding-right: 16px; }
.ave-steps li.is-planned .ave-n { border-style: dashed; color: var(--muted); } .ave-steps li.is-planned .ave-sl b { color: var(--muted); }
/* D55 · connected assets */
.avmx-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.avmx-modes .avmd-mode b { display: flex; align-items: center; gap: 6px; } .avmx-modes .avmd-mode b .i { font-size: 16px; color: var(--text-2); }
.avmx-panel { margin-top: 4px; }
.avmx-list label { grid-template-columns: 18px minmax(0, 1fr) auto; }
.avmx-list .po-chip { white-space: nowrap; }
.avmx-why { color: var(--amber-text) !important; }
.avmx-manage { margin-left: 8px; font-weight: 500; font-size: 13px; }
.avmx-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.avmx-setread { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; font-size: 12.5px; color: var(--text-2); } .avmx-setread .i { flex: none; }
.avmx-reread { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--indigo); cursor: pointer; }   /* backlog 5.20 */
.avmx-pills { display: flex; flex-direction: column; gap: 8px; }
.avmx-pill { position: relative; display: block; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; }
.avmx-pill input { position: absolute; opacity: 0; pointer-events: none; }
.avmx-pill.is-on { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo) inset; background: #FBFCFF; }
.avmx-pill:focus-within { outline: 2px solid #C9D2FF; outline-offset: 2px; }
.avmx-pill b { display: block; font-size: 13.5px; color: var(--text); } .avmx-pill small { display: block; font-size: 12px; color: var(--text-2); margin-top: 1px; }
.avmx-pill:has(input:disabled) { cursor: default; background: #FAFBFC; } .avmx-pill:has(input:disabled) b { color: var(--muted); }
fieldset.avmx-fields { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; } .avmx-fields legend { margin-bottom: 6px; padding: 0; }
.avmx-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13.5px; color: var(--text); } .avmx-checks label { display: inline-flex; align-items: center; gap: 6px; }
.avmx-ev, .avmx-req, .avmx-compat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.avmx-ev li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.avmx-ev li:last-child { border-bottom: 0; } .avmx-ev li > span:first-child { flex: 1; min-width: 0; }
.avmx-ev b, .avmx-req b { display: block; font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; } .avmx-ev small, .avmx-req small { display: block; font-size: 12px; color: var(--text-2); }
.avmx-ready { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; font-size: 13px; }
.avmx-ready b { display: block; font-size: 14px; } .avmx-ready > .i { font-size: 20px; flex: none; margin-top: 1px; }
.avmx-ready.is-ok { background: var(--green-bg); color: var(--green-text); border: 1px solid #BFE7D4; } .avmx-ready.is-no { background: var(--amber-bg); color: var(--amber-text); border: 1px solid #F5D9A8; }
.avmx-compat li { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; font-size: 13.5px; } .avmx-compat .i { font-size: 15px; margin-top: 2px; }
.avmx-compat li.is-ok .i { color: var(--green-text); } .avmx-compat li.is-no { color: var(--muted); } .avmx-compat small { display: block; font-size: 12px; }
.avmx-req li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.avmx-req li:last-child { border-bottom: 0; } .avmx-req li > .i { font-size: 17px; } .avmx-req li.is-ok > .i { color: var(--green-text); } .avmx-req li.is-no > .i { color: var(--amber-text); }
.avmx-req li.is-grey > .i { color: var(--muted); } .avmx-req a { text-decoration: none; color: inherit; } .avmx-req a:hover b { color: var(--indigo); }
.avmx-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 10px 10px; }
.avmx-card { border: 1px solid var(--border); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 4px; min-width: 0; background: #fff; }
.avmx-card b { font-size: 12px; color: var(--text); overflow-wrap: anywhere; line-height: 1.3; } .avmx-card small { font-size: 12px; color: var(--text-2); } .avmx-card s { color: var(--muted); }
.avmx-card .avma-btn { text-align: center; padding: 4px 6px; font-size: 11.5px; }
.avmx-thumb { aspect-ratio: 1 / 1; border-radius: 6px; background: #0F1B3D; color: #C9D2FF; display: grid; place-items: center; } .avmx-thumb .i { font-size: 20px; }
.avmx-pnote { margin: 0; padding: 0 12px 10px; }
/* D56 · eligibility */
.avmq-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin: 0 0 16px; }
.avmq-tab { border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-2); padding: 9px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.avmq-tab:hover { color: var(--indigo); } .avmq-tab.is-on { color: var(--indigo); border-bottom-color: var(--indigo); }
.avmq-tab:focus-visible { outline: 2px solid #C9D2FF; outline-offset: 2px; border-radius: 6px; }
.avmq-check { list-style: none; margin: 0 0 12px; padding: 0; border: 1px solid var(--border); border-radius: 12px; }
.avmq-check li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.avmq-check li:last-child { border-bottom: 0; }
.avmq-check b { display: block; font-size: 14px; color: var(--text); } .avmq-check small { display: block; font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; }
.avmq-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: #EEF1FF; color: var(--indigo); }
.avmq-check li.is-green .avmq-n { background: var(--green-bg); color: var(--green-text); } .avmq-check li.is-red .avmq-n { background: #FDECEF; color: #B42339; }
.avmq-check li.is-amber .avmq-n { background: var(--amber-bg); color: var(--amber-text); } .avmq-check li.is-grey .avmq-n { background: var(--track); color: var(--text-2); }
.avmq-open { border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 5px 10px; font: inherit; font-size: 13px; font-weight: 600; color: var(--indigo); cursor: pointer; }
.avmq-open:hover { border-color: var(--indigo); }
.avmq-switch { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: start; }
.avmq-switch b { display: block; font-size: 14px; color: var(--text); } .avmq-switch small { display: block; font-size: 12.5px; color: var(--text-2); }
.avmq-partners b { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .avmq-partners b .av-pf { width: 16px; height: 16px; }
.avmq-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 0 12px 10px 40px; }
.avmq-conf { display: flex !important; gap: 4px; align-items: flex-start; flex-wrap: wrap; color: #B42339 !important; margin-top: 4px; } .avmq-conf .i { font-size: 13px; margin-top: 1px; }
.avmq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.avmq-eu { display: block; margin: -4px 0 10px; }
.avmq-dl { margin-bottom: 14px; }
.avmq-kv { margin: 10px 0 0; display: grid; gap: 6px; font-size: 13px; }
.avmq-kv div { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .avmq-kv dt { color: var(--text-2); } .avmq-kv dd { margin: 0; color: var(--text); text-align: right; }
.avmq-pend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.avmq-pend li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; } .avmq-pend li > .i { font-size: 18px; color: var(--indigo); margin-top: 2px; }
.avmq-pend b { display: block; font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; } .avmq-pend small { display: block; font-size: 12.5px; color: var(--text-2); }
.avmq-pend .avmq-acts { padding: 10px 0 0; }
/* D57 · Google campaign */
.avgs-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.avgs-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.avgs-acct > span { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .avgs-acct .av-pf { width: 20px; height: 20px; }
.avgs-search { padding-right: 20px; border-right: 1px solid var(--border); }
.avgs-nets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.avgs-nets label { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; cursor: pointer; }
.avgs-nets input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--indigo); }
.avgs-nets b { display: block; font-size: 13.5px; color: var(--text); } .avgs-nets small { display: block; font-size: 12px; color: var(--text-2); }
.avgs-nets li.is-off b { color: var(--muted); } .avgs-nets li.is-none { font-size: 13px; color: var(--text-2); }
.avgs-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.avgs-chips li { display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px 3px 10px; border-radius: 16px; background: #EEF1FF; color: var(--indigo); font-size: 13px; font-weight: 600; }
.avgs-chips li.is-all { padding-right: 10px; background: var(--track); color: var(--text-2); } .avgs-chips .ave-x { font-size: 14px; padding: 0 5px; color: var(--indigo); }
.avgs-chips:empty::before { content: "None chosen yet"; font-size: 13px; color: var(--muted); }
.avgs-rows { margin-top: 10px; } .avgs-rows ul { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.avgs-sr { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.avgs-sr select { height: 34px !important; padding: 0 8px !important; font-size: 13px !important; }
.avgs-goal { margin: 0 0 6px; }
@media (max-width: 1280px) { .avgs-types { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .avmx-cols, .avgs-row { grid-template-columns: minmax(0, 1fr); } .avgs-search { padding-right: 0; border-right: 0; } .avmx-modes { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) {
  .avgs-types, .avmq-grid, .avmx-cards { grid-template-columns: minmax(0, 1fr); }
  .avmq-check li { grid-template-columns: 30px minmax(0, 1fr) auto; row-gap: 6px; } .avmq-check li > span:nth-child(2) { grid-column: 2 / -1; }
  .avmq-check li .po-chip { grid-column: 2; grid-row: 2; justify-self: start; } .avmq-check li .avmq-open { grid-column: 3; grid-row: 2; }
  .avmq-acts { padding-left: 12px; } .avgs-sr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; } .avgs-sr select[data-r="days"] { grid-column: 1 / -1; }
}

/* ---------- Advertisement-58 / 59 / 60 · the Google Ads editors: keywords, responsive search ads, the visual types' form (avgk- keywords: the ad group tabs, the status tabs and filters, the add row, the keyword table in its scroll box with match chips, warnings and actions, the bulk footer, the negative keyword scopes and shared lists, the pending changes, the planner's ideas, the simulated search result; avgr- responsive search ads: the ad variants, the details row, the display path, the headline and description lists with pins and counters, the sitelinks and callouts, the checks, ad strength, the device toggle and the combinations; avgv- the visual form: the local type modes, the channel and video lists, the media slots with thumbnails and readiness, the texts, the simulated preview per surface; reuses the ave- frame, avgs-nets / avgs-chips, avmx-pill / avmx-pills / avmx-req, avmc-cols / avmc-facts, avma-av / avma-btn, po-card / po-chip / po-btn / po-link, avw-strip) — plans/Advertisement-58.md, -59.md, -60.md, prototype/gen/advertisement58.css ---------- */
.avgk-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; } .avgk-head .ave-h2 { margin: 0 auto 0 0; }
.avgk .ave-intro, .avgr .ave-intro { margin: 0 0 12px; }
.avgk-ext { margin-left: 6px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.avgk-groups { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.avgk-g { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: none; }
.avgk-g .i { font-size: 14px; color: var(--text-2); } .avgk-g:hover { border-color: #C9D2FF; }
.avgk-g.is-on { border-color: var(--indigo); background: #EEF1FF; color: var(--indigo); } .avgk-g.is-on .i { color: var(--indigo); }
.avgk-n { min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--track); font-size: 11.5px; line-height: 18px; text-align: center; color: var(--text-2); }
.avgk-g.is-on .avgk-n { background: var(--indigo); color: #fff; }
.avgk-ng { margin: 0 0 12px; padding: 12px; border: 1px dashed var(--border); border-radius: 10px; }
.avgk-inline { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; } .avgk-inline > input, .avgk-inline > textarea { flex: 1 1 220px; min-width: 0; }
.avgk-inline select { flex: 0 0 auto; height: 38px; border: 1px solid var(--border); border-radius: 8px; padding: 0 8px; font: inherit; font-size: 13.5px; background: var(--surface); }
.avgk-inline input { height: 38px; border: 1px solid var(--border); border-radius: 8px; padding: 0 12px; font: inherit; font-size: 14px; background: var(--surface); box-sizing: border-box; }
.avgk-inline .po-btn { height: 38px; }
.avgk-empty { display: flex; gap: 10px; align-items: center; padding: 16px; border: 1px dashed var(--border); border-radius: 10px; font-size: 13.5px; color: var(--text-2); }
.avgk-empty .i { font-size: 20px; color: var(--muted); } .avgk-empty b { color: var(--text); }
.avgk-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 12px; }
.avgk-tools select, .avgk-tools input { height: 36px; border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 13.5px; background: var(--surface); min-width: 0; }
.avgk-tools input { flex: 1 1 180px; }
.avgk-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: #F6F7FA; }
.avgk-tab { border: 0; background: none; padding: 5px 10px; border-radius: 7px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.avgk-tab span { margin-left: 4px; font-weight: 700; color: var(--muted); } .avgk-tab.is-on { background: var(--surface); color: var(--indigo); box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.avgk-tab.is-on span { color: var(--indigo); } .avgk-tab:focus-visible { outline: 2px solid #C9D2FF; }
.avgk-add textarea { min-height: 38px !important; height: 38px; }
.avgk-add .avgk-inline select { width: auto !important; flex: 0 0 160px; } .avgk-add .avgk-inline .po-btn { flex: 0 0 auto; }
.avgk-negadd select { width: auto !important; }
.avgk-scroll { overflow-x: auto; max-width: 100%; border: 1px solid var(--border); border-radius: 10px; }
.avgk-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }
.avgk-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--text-2); padding: 9px 10px; background: #F8F9FB; border-bottom: 1px solid var(--border); white-space: nowrap; }
.avgk-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text); }
.avgk-table tr:last-child td { border-bottom: 0; } .avgk-table input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--indigo); margin: 0; }
.avgk-c-sel { width: 34px; } .avgk-c-act { width: 110px; white-space: nowrap; text-align: right; }
.avgk-kw { min-width: 150px; } .avgk-kw b { display: block; font-weight: 600; overflow-wrap: break-word; }
.avgk-table td:nth-child(n+5):not(.avgk-c-act) { white-space: nowrap; }
.avgk-warn { display: flex; align-items: flex-start; gap: 4px; margin-top: 3px; font-size: 12px; color: var(--amber-text); } .avgk-warn .i { font-size: 13px; flex: none; margin-top: 1px; }
.avgk-warn.is-red { color: #B42339; } .avgk-warn.is-new { color: var(--muted); }
.avgk-mt { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--track); color: var(--text-2); }
.avgk-mt.is-exact { background: #EEF1FF; color: var(--indigo); } .avgk-mt.is-phrase { background: #F3ECFF; color: #6D3FD0; } .avgk-mt.is-broad { background: #F1F2F5; color: #4B5263; }
.avgk-act { border: 1px solid var(--border); background: var(--surface); border-radius: 7px; padding: 3px 9px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer; }
.avgk-act:hover { border-color: var(--indigo); color: var(--indigo); }
.avgk-none { margin: 10px 0 0; font-size: 13px; color: var(--text-2); }
.avgk-bulk { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 10px 0 18px; font-size: 13px; color: var(--text-2); }
.avgk-bulk b { color: var(--text); } .avgk-bulk-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.avgk-bulk select { height: 32px; border: 1px solid var(--border); border-radius: 8px; padding: 0 8px; font: inherit; font-size: 13px; background: var(--surface); }
.avgk-negh { margin-top: 6px; } .avgk-negp { margin: 12px 0 0; }
.avgk-chips { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.avgk-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px; border: 1px solid var(--border); border-radius: 16px; font-size: 13px; font-weight: 600; color: var(--text); background: var(--surface); }
.avgk-chips li .avgk-mt { font-size: 11px; padding: 1px 6px; } .avgk-chips .ave-x { font-size: 14px; padding: 0 5px; }
.avgk-chips:empty::before { content: "No negative keywords"; font-size: 13px; color: var(--muted); }
.avgk-lists { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.avgk-lists label { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; cursor: pointer; }
.avgk-lists input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--indigo); }
.avgk-lists b { display: block; font-size: 13.5px; color: var(--text); } .avgk-lists small { display: block; font-size: 12px; color: var(--text-2); }
.avgk-boundary { display: flex; gap: 6px; align-items: flex-start; margin-top: 14px; } .avgk-boundary .i { font-size: 14px; flex: none; margin-top: 1px; }
.avgk-linkbtn { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; cursor: pointer; }
.avgk-plan { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.avgk-plan li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.avgk-pi { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: var(--green-bg); color: var(--green-text); }
.avgk-plan li.is-minus .avgk-pi { background: #FDECEF; color: #B42339; } .avgk-plan li.is-pause .avgk-pi { background: var(--amber-bg); color: var(--amber-text); font-size: 11px; }
.avgk-plan b { display: block; font-size: 13px; color: var(--text); } .avgk-plan small { display: block; font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; }
.avgk-seed { display: flex; gap: 8px; margin: 0 0 8px; } .avgk-seed input { flex: 1; min-width: 0; height: 34px; border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 13.5px; }
.avgk-src { margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.avgk-ideas-t { min-width: 0; font-size: 12.5px; table-layout: fixed; } .avgk-ideas-t th, .avgk-ideas-t td { padding: 7px 6px; white-space: normal !important; }
.avgk-ideas-t th:first-child { width: 26px; } .avgk-ideas-t th:nth-child(3) { width: 92px; } .avgk-ideas-t th:nth-child(4) { width: 84px; }
.avgk-ideas-t td:nth-child(3), .avgk-ideas-t td:nth-child(4) { font-variant-numeric: tabular-nums; }
.avgk-have { display: block; font-size: 11.5px; color: var(--muted); }
.avgk-addideas { margin: 10px 0 6px; }
.avgk-serp { padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: #FBFCFD; }
.avgk-sp { font-size: 12px; font-weight: 700; color: var(--text); }
.avgk-dom { display: flex; align-items: center; gap: 6px; margin: 4px 0; font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; } .avgk-dom .i { font-size: 14px; }
.avgk-h { margin: 2px 0; font-size: 17px; line-height: 1.3; color: #1A0DAB; overflow-wrap: anywhere; } .avgk-d { margin: 2px 0 0; font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
/* D59 · responsive search ads */
.avgr-src { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--green-text); } .avgr-src .i { font-size: 14px; }
.avgr-variants { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.avgr-v { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none; background: var(--surface); max-width: 100%; }
.avgr-v > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .avgr-v .i { font-size: 14px; color: var(--text-2); }
.avgr-v.is-on { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo) inset; background: #FBFCFF; } .avgr-v.is-new { border-style: dashed; }
.avgr-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; }
.avgr-path { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13.5px; color: var(--text-2); }
.avgr-path input { width: 140px; flex: 0 1 140px; min-width: 0; } .avgr-dom { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.avgr-ch { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
.avgr-saved { height: 32px !important; max-width: 260px; font-size: 13px !important; }
.avgr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: avgr; }
.avgr-item { display: grid; grid-template-columns: minmax(0, 1fr) 150px 64px 28px; gap: 8px; align-items: center; }
.avgr-item.is-short { grid-template-columns: minmax(0, 1fr) 64px 28px; }
.avgr-item select { height: 38px; } .avgr-cnt { font-size: 12px; color: var(--text-2); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.avgr-cnt.is-over { color: #B42339; font-weight: 700; }
.avgr-coll > .po-btn { align-self: flex-start; }
.avgr-scope { font-size: 12px; font-weight: 500; color: var(--muted); }
.avgr-sls { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.avgr-sl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 28px; gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; }
.avgr-sl input { height: 34px !important; } .avgr-sl input[data-s="line1"] { grid-column: 1; } .avgr-sl input[data-s="line2"] { grid-column: 2; }
.avgr-sl .ave-x { grid-column: 3; grid-row: 1; }
.avgr-checks li > span b { font-size: 13px; }
.avgr-strength { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #F8F9FB; font-size: 13.5px; }
.avgr-strength small { flex-basis: 100%; font-size: 12px; color: var(--text-2); }
.avgr-dev { margin-left: auto; display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.avgr-db { border: 0; background: var(--surface); padding: 5px 10px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.avgr-db .i { font-size: 14px; } .avgr-db.is-on { background: #EEF1FF; color: var(--indigo); }
.avgr-serp { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.avgr-serp.is-mobile { max-width: 330px; margin: 0 auto; border-radius: 16px; } .avgr-serp.is-mobile .avgk-h { font-size: 16px; }
.avgr-psl { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; } .avgr-psl li { padding-top: 6px; border-top: 1px solid var(--border); }
.avgr-psl b { display: block; font-size: 13.5px; font-weight: 500; color: #1A0DAB; } .avgr-psl small { display: block; font-size: 12px; color: var(--text-2); }
.avgr-serp.is-desktop .avgr-psl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
.avgr-pco { margin: 6px 0 0; font-size: 12.5px; color: var(--text-2); }
.avgr-combo { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin: 10px 0; font-size: 12.5px; color: var(--text-2); }
/* D60 · Display, Video and Demand Gen */
.avgv-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 6px; }
.avgv-mode { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); text-decoration: none; color: var(--text); min-width: 0; }
.avgv-mode > .i { font-size: 18px; color: var(--text-2); flex: none; } .avgv-mode b { display: block; font-size: 14px; } .avgv-mode small { display: block; font-size: 12px; color: var(--text-2); }
.avgv-mode.is-on { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo) inset; background: #FBFCFF; } .avgv-mode.is-on > .i, .avgv-mode.is-on b { color: var(--indigo); }
a.avgv-mode:hover { border-color: #C9D2FF; }
.avgv-na { margin: 4px 0 14px; }
.avmx-pill b .avgv-len { display: inline; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.avgv-facts dt { min-width: 80px; }
.avgv-chan { display: flex; gap: 10px; align-items: center; margin: 0 0 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.avgv-chan .av-pf { width: 22px; height: 22px; flex: none; } .avgv-chan > span { flex: 1; min-width: 0; } .avgv-chan b { display: block; font-size: 13.5px; } .avgv-chan small { display: block; font-size: 12px; color: var(--text-2); }
.avgv-videos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.avgv-videos label { display: grid; grid-template-columns: 18px 72px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 8px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.avgv-videos li.is-on label { border-color: var(--indigo); background: #FBFCFF; } .avgv-videos input { accent-color: var(--indigo); margin: 0; }
.avgv-videos b { display: block; font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; } .avgv-videos small { display: block; font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.avgv-vthumb { position: relative; width: 72px; height: 42px; border-radius: 6px; background: linear-gradient(135deg, #1E2A5A, #3B5BFD); color: #fff; display: grid; place-items: center; }
.avgv-vthumb small { position: absolute; right: 3px; bottom: 2px; font-size: 10px !important; color: #fff !important; background: rgba(0, 0, 0, .55); padding: 0 3px; border-radius: 3px; }
.avgv-slots { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.avgv-slot { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 8px; border: 1px solid var(--border); border-radius: 10px; }
.avgv-slot.is-changed { border-color: #C9D2FF; background: #FBFCFF; }
.avgv-thumb { grid-row: span 2; width: 64px; height: 48px; border-radius: 6px; overflow: hidden; background: var(--track); display: grid; place-items: center; color: var(--muted); }
.avgv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.avgv-sl { min-width: 0; } .avgv-sl b { display: block; font-size: 13.5px; color: var(--text); } .avgv-sl small { display: block; font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.avgv-sl b .avgv-req { display: inline; font-size: 11px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.avgv-use { grid-column: 2 / -1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.avgv-use select { height: 32px; border: 1px solid var(--border); border-radius: 8px; padding: 0 8px; font: inherit; font-size: 13px; background: var(--surface); max-width: 100%; }
.avgv-texts { display: grid; gap: 4px; }
.avgv-surf { margin: 0 0 10px; }
.avgv-pv { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; }
.avgv-media { position: relative; aspect-ratio: 1.91 / 1; background: #1E2A5A; display: grid; place-items: center; color: #fff; }
.avgv-pv.is-youtube .avgv-media { aspect-ratio: 16 / 9; } .avgv-pv.is-gmail .avgv-media { aspect-ratio: 1.91 / 1; } .avgv-pv.is-display .avgv-media { aspect-ratio: 1.2 / 1; }
.avgv-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avgv-play { width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #1E2A5A; display: grid; place-items: center; font-size: 20px; }
.avgv-vt { position: absolute; left: 10px; bottom: 8px; font-size: 12px; font-weight: 600; }
.avgv-skip { position: absolute; right: 8px; bottom: 8px; padding: 4px 10px; border-radius: 4px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; }
.avgv-empty { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: #C9D2FF; }
.avgv-meta { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; }
.avgv-meta b { display: block; font-size: 14px; color: var(--text); overflow-wrap: anywhere; } .avgv-meta small { display: block; font-size: 12px; color: var(--text-2); }
.avgv-desc { margin: 0; padding: 0 12px 12px; font-size: 13px; color: var(--text-2); }
@media (max-width: 1100px) { .avgr-row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) {
  .avgv-modes { grid-template-columns: minmax(0, 1fr); }
  .avgr-item { grid-template-columns: minmax(0, 1fr) 64px 28px; } .avgr-item select { grid-column: 1 / -1; grid-row: 2; }
  .avgr-sl { grid-template-columns: minmax(0, 1fr) 28px; } .avgr-sl input { grid-column: 1 !important; } .avgr-sl .ave-x { grid-column: 2; grid-row: 1; }
  .avgk-c-act { width: auto; } .avgr-path input { flex: 1 1 100px; }
}

/* ---------- Advertisement-61 / 62 / 63 · the Google Ads editors of Performance Max, Shopping and the connected destinations (avgp- Performance Max: the goal / budget / bidding facts, the campaign options and the product feed, the asset group pills with the inline new-group row, the asset group form, the audience-signal note and search themes, the completeness ring, the unsupported assets; avgm- Shopping: the numbered steps, the Merchant Center sources, the priority pills, the product selection cards and counts, the product-group table in its own scroll box with the include boxes and maximum CPCs, the simulated product cards; avgl- destinations: the App / Local business mode cards, the app listing, the store and goal pills, the event source line, the region chips, the Business Profile and its locations, the campaign-type availability; reuses the ave- frame, avgs-nets / avgs-chips, avmx-pill / avmx-pills / avmx-req, avmc-cols / avmc-obj / avmc-facts, avgv-slots / avgv-videos, avgr-coll, avgk-head / avgk-src / avgk-warn, po-card / po-chip / po-btn / po-link, avw-strip) — plans/Advertisement-61.md, -62.md, -63.md, prototype/gen/advertisement61.css ---------- */
.avgp-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
.avgp-fact { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: #FBFCFE; min-width: 0; }
.avgp-fact > .i { font-size: 18px; color: var(--indigo); margin-top: 2px; } .avgp-fact small { display: block; font-size: 12px; color: var(--text-2); }
.avgp-fact b { display: block; font-size: 14px; color: var(--text); overflow-wrap: anywhere; } .avgp-fact em { display: block; font-style: normal; font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.avgp-fact.is-warn { border-color: #F5D089; background: #FFFBF0; } .avgp-fact.is-warn > .i, .avgp-fact.is-warn em { color: var(--amber-text); }
.avgp-cols { margin: 0 0 12px; }
.avgp-feeds li.is-off b { color: var(--muted); } .avgp-feeds .po-chip { margin-left: 4px; vertical-align: 1px; }
.avgp-groups { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.avgp-gpill { display: inline-flex; flex-direction: column; gap: 2px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); text-decoration: none; color: var(--text); min-width: 0; max-width: 100%; }
.avgp-gpill b { font-size: 13.5px; overflow-wrap: anywhere; } .avgp-gpill small { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--text-2); }
.avgp-gpill.is-on { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo) inset; background: #FBFCFF; } .avgp-gpill.is-on b { color: var(--indigo); }
.avgp-newrow { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; } .avgp-newrow[hidden] { display: none; }
.avgp-newrow input, .avgp-themeadd input { height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13.5px; min-width: 0; }
.avgp-group { margin: 6px 0 0; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: #FCFCFE; min-width: 0; }
.avgp-gh { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin: 0 0 10px; } .avgp-gh b { font-size: 15px; color: var(--text); } .avgp-gh small { font-size: 12px; color: var(--muted); }
.avgp-group input[type=url], .avgp-group .avgr-row input { width: 100%; box-sizing: border-box; }
.avgp-signote { margin: 0 0 10px; }
.avgp-themes { margin: 4px 0 8px; } .avgp-themes li { font-weight: 500; }
.avgp-themeadd { display: flex; gap: 6px; flex-wrap: wrap; } .avgp-themeadd input { flex: 1 1 180px; }
.avgp-ring-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; margin: 0 0 8px; }
.avgp-ring { --p: 0; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--indigo) calc(var(--p) * 1%), var(--track) 0); position: relative; }
.avgp-ring::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--surface); }
.avgp-ring b { position: relative; font-size: 22px; color: var(--text); }
.avgp-ring-row > span:last-child b { display: block; font-size: 15px; color: var(--text); } .avgp-ring-row > span:last-child small { display: block; font-size: 12.5px; color: var(--text-2); }
.avgp-items li small { display: block; font-size: 12px; color: var(--text-2); }
.avgp-uns { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .avgp-uns li { padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.avgp-uns b { display: block; font-size: 13px; color: var(--text); overflow-wrap: anywhere; } .avgp-uns small { display: block; font-size: 12px; color: var(--text-2); }

.avgm-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.avgm-step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; min-width: 0; }
.avgm-n { width: 28px; height: 28px; border-radius: 50%; background: var(--indigo); color: #fff; font-weight: 700; font-size: 14px; display: grid; place-items: center; }
.avgm-body { min-width: 0; }
.avgm-sources .po-chip { margin-left: 4px; vertical-align: 1px; }
.avgm-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0 0; }
.avgm-prio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.avgm-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.avgm-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 10px 0 0; }
.avgm-counts p { margin: 0; padding: 10px 12px; border-radius: 10px; background: #F6F8FC; display: grid; gap: 2px; font-size: 12.5px; color: var(--text-2); min-width: 0; }
.avgm-counts b { font-size: 13.5px; color: var(--text); } .avgm-counts p.is-warn { background: #FFF8EA; } .avgm-counts p.is-warn b { color: var(--amber-text); }
.avgm-dimrow { max-width: 320px; margin: 0 0 10px; } .avgm-dimrow select { width: 100%; }
.avgm-scroll { position: relative; overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; max-width: 100%; }
.avgm-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13px; }
.avgm-table th { text-align: left; font-weight: 600; font-size: 12px; color: var(--text-2); padding: 8px 10px; background: #F7F8FB; border-bottom: 1px solid var(--border); }
.avgm-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text); }
.avgm-table tr:last-child td { border-bottom: 0; } .avgm-table td small { display: block; font-size: 11.5px; color: var(--text-2); }
.avgm-table tr.is-gone td { color: var(--muted); } .avgm-table tr.avgm-other td { background: #FBFCFE; }
.avgm-c-sel { width: 36px; } .avgm-c-sel input { width: 16px; height: 16px; accent-color: var(--indigo); }
.avgm-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.avgm-cpc { width: 88px; height: 30px; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px; font: inherit; font-size: 13px; }
.avgm-bidnote { margin: 8px 0 0; }
.avgm-cards { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.avgm-cards li { display: grid; gap: 2px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; min-width: 0; }
.avgm-img { height: 64px; border-radius: 8px; background: linear-gradient(135deg, #EEF1FF, #DCE3FF); display: grid; place-items: center; color: var(--indigo); font-size: 22px; }
.avgm-cards b { font-size: 12.5px; color: var(--indigo); overflow-wrap: anywhere; } .avgm-price { font-size: 13.5px; font-weight: 700; color: var(--text); } .avgm-cards small { font-size: 11.5px; color: var(--text-2); }

.avgl-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0 6px; }
.avgl-mode { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); text-decoration: none; color: var(--text); min-width: 0; }
.avgl-mode > .i { font-size: 20px; color: var(--text-2); flex: none; } .avgl-mode b { display: block; font-size: 14px; } .avgl-mode small { display: block; font-size: 12px; color: var(--text-2); }
.avgl-mode.is-on { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo) inset; background: #FBFCFF; } .avgl-mode.is-on > .i, .avgl-mode.is-on b { color: var(--indigo); }
.avgl-cols { margin: 12px 0; }
.avgl-app { display: flex; gap: 10px; align-items: flex-start; min-width: 0; } .avgl-app > span:last-child { min-width: 0; }
.avgl-ic { width: 40px; height: 40px; border-radius: 10px; background: #EEF1FF; color: var(--indigo); display: grid; place-items: center; font-size: 20px; flex: none; }
.avgl-ok { display: inline-flex !important; gap: 4px; align-items: center; color: var(--green-text) !important; }
.avgl-row { flex-direction: row; flex-wrap: wrap; } .avgl-row .avmx-pill { flex: 1 1 160px; }
.avgl-src { display: flex; gap: 6px; align-items: center; margin: 4px 0 0; font-size: 12.5px; color: var(--green-text); } .avgl-src .i { font-size: 14px; }
.avgl-regions li.is-bad { background: #FDECEF; color: #B42339; }
.avgl-locs small .i { font-size: 12px; margin-right: 3px; vertical-align: -1px; } .avgl-locs li.is-off b { color: var(--muted); } .avgl-locs .po-chip { margin-left: 4px; vertical-align: 1px; }
.avgl-types { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.avgl-types li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; min-width: 0; }
.avgl-types li > .i { font-size: 17px; margin-top: 1px; } .avgl-types li.is-ok > .i { color: var(--green-text); } .avgl-types li.is-no { background: #FAFBFC; } .avgl-types li.is-no > .i { color: var(--muted); }
.avgl-types b { display: block; font-size: 13.5px; color: var(--text); } .avgl-types small { display: block; font-size: 12px; color: var(--text-2); } .avgl-types li.is-this { border-color: #C9D2FF; }
.avgl-facts dt { min-width: 120px; }
@media (max-width: 1100px) { .avgp-facts { grid-template-columns: minmax(0, 1fr); } .avgm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .avgm-prio, .avgm-modes, .avgm-counts, .avgl-modes, .avgl-types { grid-template-columns: minmax(0, 1fr); }
  .avgm-step { grid-template-columns: minmax(0, 1fr); } .avgm-n { display: none; }
  .avgp-ring-row { grid-template-columns: 80px minmax(0, 1fr); } .avgp-ring { width: 80px; height: 80px; }
  .avgm-cards { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Advertisement-64 / 65 / 66 · the last Google editor and the first TikTok editors (avgx- Google exclusions: the local steps, the kind rail with each kind's scope, the shared lists, the add rows, the exclusion tables in their own scroll box, the account level, the affected campaigns, the review list, the footer line, the simulated before / after preview; avts- TikTok setup: the campaign and ad group levels, the objective cards with the refused ones, the creation modes, the pixel and event line; avtc- TikTok creative: the ad format cards, the video list with thumbnails and spec state, the Spark post list with the authorization states and requests, the selected post facts, the simulated TikTok phone and its facts; reuses the ave- frame, avgs-nets / avgs-rows, avmx-pill / avmx-pills / avmx-req, avmc-obj / avmc-pr / avmc-cols / avmc-facts, avgk-head / avgk-warn / avgk-src, po-card / po-chip / po-btn / po-link, avw-strip) — plans/Advertisement-64.md, -65.md, -66.md, prototype/gen/advertisement64.css ---------- */
.avgx-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 16px; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: #FBFCFE; }
.avgx-step { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 14px; color: var(--text-2); cursor: pointer; }
.avgx-step.is-on { background: var(--surface); color: var(--indigo); font-weight: 600; box-shadow: 0 1px 3px rgba(23,27,45,0.08); }
.avgx-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--track); color: var(--text-2); }
.avgx-step.is-on .avgx-n { background: var(--indigo); color: #fff; }
.avgx-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
.avgx-rail, .avgx-body { min-width: 0; }
.avgx-kinds { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.avgx-kind { width: 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; text-align: left; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font: inherit; cursor: pointer; }
.avgx-kind b { display: block; font-size: 14px; color: var(--text); } .avgx-kind small { display: block; font-size: 12px; color: var(--text-2); margin-top: 2px; }
.avgx-kind.is-on { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo) inset; background: #F7F9FF; } .avgx-kind.is-on b { color: var(--indigo); }
.avgx-kind.is-off b { color: var(--text-2); }
.avgx-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: #EEF1FF; color: var(--indigo); font-size: 17px; }
.avgx-kind.is-off .avgx-ic { background: var(--track); color: var(--muted); }
.avgx-scope { font-weight: 600; } .avgx-scope.is-ok { color: var(--green-text) !important; } .avgx-scope.is-no { color: var(--amber-text) !important; }
.avgx-panel[hidden], .avgx-pane[hidden] { display: none; }
.avgx-items { color: var(--muted) !important; overflow-wrap: anywhere; }
.avgx-add { display: grid; grid-template-columns: minmax(0, 1fr) 230px auto; gap: 10px; align-items: end; margin: 4px 0 6px; }
.avgx-add label { display: grid; gap: 4px; min-width: 0; } .avgx-add .ave-l { margin: 0; }
.avgx-add input, .avgx-add select { height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; background: var(--surface); min-width: 0; width: 100%; box-sizing: border-box; }
.avgx-add .po-btn { height: 38px; }
.avgx-h4 { margin: 14px 0 8px; font-size: 14px; color: var(--text); }
.avgx-tbl { position: relative; overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; max-width: 100%; }
.avgx-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13px; }
.avgx-table th { text-align: left; font-weight: 600; font-size: 12.5px; color: var(--text-2); background: #F8F9FC; padding: 9px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.avgx-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text); overflow-wrap: anywhere; }
.avgx-table tr:last-child td { border-bottom: 0; } .avgx-table tr.is-this td { background: #F7F9FF; }
.avgx-ok, .avgx-no { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; }
.avgx-ok { color: var(--green-text); } .avgx-ok .i { color: var(--green); } .avgx-no { color: var(--amber-text); }
.avgx-empty { margin: 0; padding: 12px; font-size: 13px; color: var(--muted); } .avgx-empty[hidden] { display: none; }
.avgx-account { margin: 16px 0 0; padding: 12px 14px; border: 1px dashed #C9D2E6; border-radius: 12px; background: #FBFCFE; }
.avgx-account .avgx-h4 { margin: 0 0 4px; } .avgx-accline { margin: 0 0 4px; font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; }
/* backlog 3.23: the account level's own form (an account change plan for Ad approvals) */
.avxa-open { margin-top: 8px; }
.avxa-form { margin-top: 10px; display: grid; gap: 10px; min-width: 0; }
.avxa-form .avmc-cols { min-width: 0; }
.avxa-acts { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.avgx-changes { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.avgx-changes li { display: flex; gap: 10px; align-items: baseline; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; }
.avgx-changes li small { color: var(--amber-text); } .avgx-changes li.is-none { color: var(--muted); }
.avgx-foot { margin: 16px 0 0; padding: 10px 0 0; border-top: 1px solid var(--border); font-size: 13.5px; color: var(--text-2); text-align: right; }
.avgx-view { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); margin: 8px 0 12px; }
.avgx-vb { padding: 8px 6px; border: 0; border-bottom: 2px solid transparent; background: transparent; font: inherit; font-size: 13.5px; color: var(--text-2); cursor: pointer; }
.avgx-vb.is-on { color: var(--indigo); border-bottom-color: var(--indigo); font-weight: 600; }
.avgx-mock { padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: #FBFCFE; display: grid; gap: 10px; }
.avgx-q { display: grid; grid-template-columns: 26px minmax(0, 1fr) 18px; gap: 8px; align-items: center; padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 13px; color: var(--text); }
.avgx-q .i { color: var(--muted); } .avgx-qt { overflow-wrap: anywhere; }
.avgx-g { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: conic-gradient(#4285F4 0 25%, #34A853 0 50%, #FBBC05 0 75%, #EA4335 0); font-size: 13px; }
.avgx-res { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 12px; border-radius: 10px; font-size: 13px; }
.avgx-res b { display: block; font-size: 14px; } .avgx-res small { display: block; color: var(--text-2); font-size: 12.5px; overflow-wrap: anywhere; }
.avgx-res.is-shown { background: #F1FAF5; color: var(--green-text); } .avgx-res.is-hidden { background: #FFF6E5; color: var(--amber-text); }
.avgx-mock[data-view="after"] .avgx-res.is-shown, .avgx-mock[data-view="before"] .avgx-res.is-hidden { display: none; }
.avgx-facts dt { min-width: 150px; }

.avts-level { padding: 0 0 16px; margin: 0 0 16px; border-bottom: 1px solid var(--border); }
.avts-level:last-of-type { border-bottom: 0; }
.avts-lh { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 10px; } .avts-lh .ave-h2 { margin: 0; }
.avts-gname { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.avts-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.avts-types .avmc-obj.is-na { grid-template-columns: 32px minmax(0, 1fr); cursor: default; background: #F7F8FA; }
.avts-types .avmc-obj.is-na b { color: var(--text-2); } .avts-types .avmc-obj.is-na > .i { font-size: 18px; color: var(--muted); margin: 4px 0 0 6px; }
.avts-types [hidden], .avts-pills [hidden] { display: none; }
.avts-modes { display: grid; gap: 8px; }
.avts-mode { display: grid !important; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.avts-mode.is-on { border-color: var(--indigo); background: #FBFCFF; } .avts-mode.is-na { background: #F7F8FA; }
.avts-mode b { display: block; font-size: 13.5px; color: var(--text); } .avts-mode small { display: block; font-size: 12px; color: var(--text-2); font-weight: 400; }
.avts-px { display: flex; gap: 10px; align-items: center; } .avts-px select { flex: 1 1 auto; min-width: 0; }
.avts-evline { display: flex; gap: 8px; align-items: baseline; margin-top: 4px; font-size: 12.5px; color: var(--text-2); }
.avts-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; background: var(--muted); }
.avts-dot.is-green { background: var(--green); } .avts-dot.is-amber { background: #F59E0B; }
.avts-facts { margin-top: 14px; }

.avtc-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
.avtc-mode { position: relative; display: grid; grid-template-columns: 18px 26px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; min-width: 0; }
.avtc-mode input { position: absolute; opacity: 0; pointer-events: none; }
.avtc-mode.is-on { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo) inset; background: #FBFCFF; }
.avtc-mode:focus-within { outline: 2px solid #C9D2FF; outline-offset: 2px; }
.avtc-mode .av-pf { width: 22px; height: 22px; } .avtc-mode b { display: block; font-size: 14px; color: var(--text); } .avtc-mode small { display: block; font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.avtc-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.avtc-col { min-width: 0; } .avtc-col [hidden] { display: none; }
.avtc-videos, .avtc-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.avtc-videos li, .avtc-posts li { padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); min-width: 0; }
.avtc-videos li.is-on, .avtc-posts li.is-on { border-color: var(--indigo); background: #FBFCFF; }
.avtc-videos li.is-warn { border-color: #F5D089; }
.avtc-videos label, .avtc-posts label { display: grid; grid-template-columns: 16px 64px minmax(0, 1fr); gap: 10px; align-items: start; cursor: pointer; }
.avtc-posts label { grid-template-columns: 16px minmax(0, 1fr); }
.avtc-videos input, .avtc-posts input { margin: 3px 0 0; accent-color: var(--indigo); }
.avtc-videos b, .avtc-posts b { display: block; font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; }
.avtc-videos small, .avtc-posts small { display: block; font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.avtc-posts li.is-expired { background: #FFF7F8; } .avtc-posts li.is-expired b { color: var(--text-2); }
.avtc-posts li > .po-btn { margin: 8px 0 0 26px; }
.avgk-warn.is-red { color: #B42339 !important; }
.avtc-thumb { position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: #1F2433; color: #fff; display: grid; place-items: center; }
.avtc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.avtc-dur { position: absolute; right: 4px; bottom: 4px; padding: 0 4px; border-radius: 4px; background: rgba(0,0,0,0.6); font-size: 10.5px; }
.avtc-ok { display: inline-flex !important; align-items: center; gap: 5px; color: var(--green-text) !important; } .avtc-ok .i { color: var(--green); }
.avtc-post { margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: #FBFCFE; }
.avtc-post .ave-h3 { display: flex; gap: 8px; align-items: center; margin: 0 0 8px; }
.avtc-copy { border: 0; background: none; padding: 0 2px; cursor: pointer; vertical-align: -2px; }
.avtc-col textarea { width: 100%; box-sizing: border-box; min-height: 76px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; resize: vertical; }
.avtc-col input:not([type]), .avtc-col input[inputmode] { width: 100%; box-sizing: border-box; }
.avtc-prev .ave-ch h2 { display: inline-flex; gap: 8px; align-items: center; } .avtc-prev .ave-ch .av-pf { width: 18px; height: 18px; }
.avtc-wrap { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); gap: 14px; align-items: start; }
.avtc-phone { position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, #202B45 0%, #0E1424 100%); color: #fff; max-width: 210px; }
.avtc-top { position: absolute; top: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 14px; font-size: 12px; opacity: 0.9; z-index: 1; }
.avtc-top b { border-bottom: 2px solid #fff; padding-bottom: 2px; }
.avtc-media { position: absolute; inset: 0; display: grid; place-items: center; }
.avtc-media img { width: 100%; height: 100%; object-fit: cover; }
.avtc-orig { display: grid; justify-items: center; gap: 6px; padding: 0 16px; text-align: center; font-size: 22px; opacity: 0.85; } .avtc-orig small { font-size: 11px; }
.avtc-side { position: absolute; right: 8px; bottom: 96px; }
.avtc-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--indigo); font-size: 12px; font-weight: 700; border: 2px solid #fff; }
.avtc-cap { position: absolute; left: 10px; right: 48px; bottom: 50px; display: grid; gap: 2px; font-size: 11.5px; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.avtc-cap b { font-size: 12.5px; } .avtc-cap span { overflow-wrap: anywhere; } .avtc-cap small { opacity: 0.8; font-size: 10.5px; }
.avtc-btn { position: absolute; left: 10px; right: 10px; bottom: 12px; padding: 7px 0; border-radius: 6px; background: #fff; color: #111; text-align: center; font-size: 12px; font-weight: 700; }
.avtc-facts { margin: 0; display: grid; gap: 14px; font-size: 13px; }
.avtc-facts dt { display: flex; gap: 6px; align-items: center; color: var(--text-2); font-size: 12px; } .avtc-facts dd { margin: 2px 0 0; color: var(--text); font-weight: 600; }
@media (max-width: 1100px) {
  .avgx-grid { grid-template-columns: minmax(0, 1fr); } .avgx-kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .avtc-cols { grid-template-columns: minmax(0, 1fr); } .avts-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .avgx-kinds, .avts-types, .avtc-modes { grid-template-columns: minmax(0, 1fr); }
  .avgx-add { grid-template-columns: minmax(0, 1fr); }
  .avgx-step { flex: 1 1 100%; }
  .avtc-wrap { grid-template-columns: minmax(0, 1fr); } .avtc-phone { margin: 0 auto; }
}

/* ---------- Advertisement-67 / 68 / 69 / 70 · the last TikTok editors (avtp- Smart+: the campaign facts, the "TikTok decides" / "Settings you keep" columns, the switchable automation, the blockers, the Smart+ statement, the ads list; avtd- destination: the two mode tiles (the location decides), the form and app lists, the app monogram, the store URL line, the event list with the received state, the eligibility list, the Form & CRM statuses, the destination facts beside the phone; avtm- commerce: the workflow cards with the unavailable chip, the catalog list, the permissions, the Shop / GMV Max eligibility (store access, eligibility, requirements with TikTok's states), the simulated product list; avtf- landing and formats: the destination type cards, the Instant Page editor with its media references, the format cards (Spark Ads as a link), the Instant Page phone and the requirement rows; reuses the ave- frame, avts-lh, avtc-phone / avtc-wrap / avtc-facts / avtc-thumb, avmd-list / avmd-dl / avmd-sh / avmd-edit / avmd-grid / avmd-fact, avmx-pill / avmx-pills / avmx-req, avmc-adv / avmc-facts, ave-sw, ave-access, po-card / po-chip / po-btn / po-link, avw-strip) — plans/Advertisement-67.md, -68.md, -69.md, -70.md, prototype/gen/advertisement67.css ---------- */
.avtp-sec { padding: 0 0 16px; margin: 0 0 16px; border-bottom: 1px solid var(--border); }
.avtp-sec:last-of-type { border-bottom: 0; margin-bottom: 0; }
.avtp-facts { margin: 12px 0 0; }
.avtp-src { font-size: 12.5px; color: var(--muted); }
.avtp-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.avtp-col { min-width: 0; } .avtp-col .ave-h3 { margin: 0 0 8px; }
.avtp-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.avtp-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.avtp-list li .i { color: var(--indigo); margin-top: 2px; } .avtp-list.is-kept li .i { color: var(--text-2); } .avtp-list.is-bad li { border-color: #F3C2CA; background: #FFF7F8; } .avtp-list.is-bad li .i { color: #D6364E; }
.avtp-list b { display: block; font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; } .avtp-list small { display: block; font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; }
.avtp-list li.is-none { display: block; color: var(--muted); font-size: 13px; }
.avtp-opts { margin: 0; }
.avtp-note { margin-top: 12px; }
.avtp-ads { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.avtp-ads li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 13px; }
.avtp-ads b { display: block; color: var(--text); overflow-wrap: anywhere; } .avtp-ads small { display: block; color: var(--text-2); font-size: 12px; }
.avtp-ads li.is-none { display: block; color: var(--muted); }

.avtd-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 6px; }
.avtd-mode { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: #F7F8FA; color: var(--text-2); min-width: 0; }
.avtd-mode.is-on { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo) inset; background: #FBFCFF; color: var(--text); }
.avtd-mode .i { margin-top: 2px; color: var(--indigo); } .avtd-mode b { display: block; font-size: 14px; } .avtd-mode small { display: block; font-size: 12.5px; color: var(--text-2); }
.avtd-sec { margin: 14px 0 0; }
.avtd-apps label { grid-template-columns: 18px 36px minmax(0, 1fr); }
.avtd-appic { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: var(--indigo); color: #fff; font-weight: 700; font-size: 13px; }
.avtd-url { overflow-wrap: anywhere; }
.avtd-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.avtd-events li { padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.avtd-events li.is-on { border-color: var(--indigo); background: #FBFCFF; } .avtd-events li.is-no { background: #F7F8FA; }
.avtd-events label { display: grid; grid-template-columns: 16px 18px minmax(0, 1fr); gap: 8px; align-items: start; cursor: pointer; }
.avtd-events input { margin: 3px 0 0; accent-color: var(--indigo); }
.avtd-events .is-ok .i, .avtd-events li.is-ok > label > .i { color: var(--green); } .avtd-events li.is-no > label > .i { color: #B7791F; }
.avtd-events b { display: block; font-size: 13.5px; color: var(--text); } .avtd-events small { display: block; font-size: 12px; color: var(--text-2); }
.avtd-events li.is-none { color: var(--muted); font-size: 13px; }
.avtd-elig li { grid-template-columns: 18px minmax(0, 1fr) !important; }
.avtd-elig li > span small { display: block; } .avtd-elig li > span b { display: block; }
.avtd-status { margin: 0; display: grid; gap: 10px; font-size: 13px; }
.avtd-status > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.avtd-status dt { color: var(--text-2); } .avtd-status dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.avtd-status small { color: var(--text-2); font-size: 12px; }
.avtd-dest { display: grid; gap: 4px; font-size: 13px; min-width: 0; } .avtd-dest b { color: var(--text); overflow-wrap: anywhere; } .avtd-dest small { color: var(--text-2); overflow-wrap: anywhere; }

.avtm-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.avtm-mode { position: relative; display: grid; grid-template-columns: 18px 26px minmax(0, 1fr); gap: 8px; align-items: start; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; min-width: 0; }
.avtm-mode input { position: absolute; opacity: 0; pointer-events: none; }
.avtm-mode.is-on { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo) inset; background: #FBFCFF; }
.avtm-mode.is-na { background: #F7F8FA; } .avtm-mode.is-na b { color: var(--text-2); }
.avtm-mode:focus-within { outline: 2px solid #C9D2FF; outline-offset: 2px; }
.avtm-ic .i { font-size: 20px; color: var(--indigo); }
.avtm-mode b { display: block; font-size: 14px; color: var(--text); } .avtm-mode small { display: block; font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.avtm-mode i.po-chip { display: inline-block; margin-top: 6px; font-style: normal; }
.avtm-sec { margin: 16px 0 0; }
.avtm-cats label { grid-template-columns: 18px 18px minmax(0, 1fr); }
.avtm-cats .i { color: var(--green); }
.avtm-perms, .avtm-reqs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.avtm-perms li, .avtm-reqs li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); min-width: 0; }
.avtm-perms li.is-ok .i { color: var(--green); } .avtm-perms li.is-no .i { color: #B7791F; }
.avtm-perms b, .avtm-reqs b { display: block; font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; }
.avtm-perms small, .avtm-reqs small { display: block; font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.avtm-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--muted); }
.avtm-facts { margin: 0 0 12px; }
.avtm-h4 { margin: 12px 0 8px; font-size: 13.5px; }
.avtm-count { margin: 0 0 8px; font-size: 13px; color: var(--text-2); } .avtm-count b { color: var(--text); }
.avtm-prods { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.avtm-prods li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--border); border-radius: 10px; min-width: 0; }
.avtm-prods li.is-more { display: block; color: var(--text-2); font-size: 12.5px; text-align: center; }
.avtm-pic { width: 34px; height: 34px; border-radius: 8px; background: #EEF1FF; color: var(--indigo); display: grid; place-items: center; }
.avtm-prods b { display: block; font-size: 12.5px; color: var(--text); overflow-wrap: anywhere; } .avtm-prods small { display: block; font-size: 11.5px; color: var(--text-2); }
.avtm-empty { display: flex; gap: 10px; align-items: center; margin: 0; padding: 14px; border: 1px dashed var(--border); border-radius: 12px; color: var(--text-2); font-size: 13px; }

.avtf-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.avtf-type, .avtf-fmt { position: relative; display: grid; grid-template-columns: 18px 22px minmax(0, 1fr); gap: 8px; align-items: start; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; min-width: 0; color: inherit; text-decoration: none; }
.avtf-type input, .avtf-fmt input { position: absolute; opacity: 0; pointer-events: none; }
.avtf-type.is-on, .avtf-fmt.is-on { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo) inset; background: #FBFCFF; }
.avtf-type.is-na, .avtf-fmt.is-na { background: #F7F8FA; cursor: default; } .avtf-type.is-na b, .avtf-fmt.is-na b { color: var(--text-2); }
.avtf-type:focus-within, .avtf-fmt:focus-within { outline: 2px solid #C9D2FF; outline-offset: 2px; }
.avtf-type .i, .avtf-fmt .i { color: var(--indigo); margin-top: 2px; }
.avtf-type b, .avtf-fmt b { display: block; font-size: 14px; color: var(--text); } .avtf-type small, .avtf-fmt small { display: block; font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.avtf-fmt i.po-chip { display: inline-block; margin: 4px 0 0; font-style: normal; }
.avtf-fmt.is-link { grid-template-columns: 22px minmax(0, 1fr); }
.avtf-formats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.avtf-h { margin-top: 20px; }
[data-avtf-pane][hidden] { display: none; }
.avtf-edit { margin-top: 10px; }
.avtf-wide { grid-column: 1 / -1; }
.avtf-edit textarea { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; resize: vertical; }
.avtf-media { margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; min-width: 0; }
.avtf-media legend { padding: 0 6px; font-size: 13px; font-weight: 600; } .avtf-media legend small { font-weight: 400; color: var(--text-2); }
.avtf-media ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.avtf-media li { padding: 8px; border: 1px solid var(--border); border-radius: 10px; min-width: 0; } .avtf-media li.is-on { border-color: var(--indigo); background: #FBFCFF; }
.avtf-media li.is-none { grid-column: 1 / -1; color: var(--muted); font-size: 13px; border-style: dashed; }
.avtf-media label { display: grid; grid-template-columns: 16px 64px minmax(0, 1fr); gap: 8px; align-items: center; cursor: pointer; }
.avtf-media b { display: block; font-size: 13px; color: var(--text); overflow-wrap: anywhere; } .avtf-media small { display: block; font-size: 12px; color: var(--text-2); }
.avtf-page { background: linear-gradient(180deg, #243152 0%, #0E1424 100%); }
.avtf-page-top { position: absolute; top: 10px; left: 12px; right: 12px; display: flex; justify-content: space-between; font-size: 12px; z-index: 1; }
.avtf-page-media { position: absolute; left: 0; right: 0; top: 0; height: 55%; display: grid; place-items: center; overflow: hidden; }
.avtf-page-media img { width: 100%; height: 100%; object-fit: cover; }
.avtf-page-text { position: absolute; left: 12px; right: 12px; top: 58%; display: grid; gap: 4px; }
.avtf-page-text b { font-size: 14px; line-height: 1.2; overflow-wrap: anywhere; } .avtf-page-text small { font-size: 11px; opacity: 0.85; overflow-wrap: anywhere; }
.avtf-page .avtc-btn { background: var(--indigo); color: #fff; }
.avtf-req { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.avtf-req li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-width: 0; }
.avtf-req li.is-ok .i { color: var(--green); } .avtf-req li.is-no .i { color: #B7791F; }
.avtf-req small { color: var(--text-2); font-size: 12px; text-align: right; overflow-wrap: anywhere; }
#avtf-preview .avtc-facts, #avtd-preview .avtd-dest { min-width: 0; } #avtf-preview .avtc-facts dd { overflow-wrap: anywhere; }
@media (max-width: 1100px) {
  .avtp-cols { grid-template-columns: minmax(0, 1fr); } .avtm-modes, .avtf-formats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .avtd-modes, .avtm-modes, .avtf-types, .avtf-formats, .avtm-prods, .avtf-media ul { grid-template-columns: minmax(0, 1fr); }
  .avtd-status > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .avtm-perms li, .avtm-reqs li { grid-template-columns: 18px minmax(0, 1fr); } .avtm-perms li > .po-chip, .avtm-reqs li > .po-chip { grid-column: 2; justify-self: start; }
}

/* ---------- Analytics-01 · Analytics overview (an- module-shared: the domain bar, the demo chip, the provider marks; anov- this screen; reuses po-card / po-chip / po-link / po-dots / pm-menu / es) — plans/Analytics-01.md, app/static/css/app.css (prototype block prototype/gen/analytics01.css) ---------- */
/* the Analytics domain bar is the Promotion bar (.pm-domain) with its own id; nothing else changes */
.an-domain .ct-subitem { padding: 0 13px; }
.an-demo { margin-left: 10px; padding: 2px 8px; border-radius: 6px; background: var(--track); color: var(--text-2); font-size: 12px; font-weight: 600; }
.an-pf { flex: none; width: 20px; height: 20px; }
.an-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* series tokens (plans/Analytics-01.md §2.4: colour follows the provider on every chart; validated as a categorical set) */
.anov-root { --an-meta: #3B5BFD; --an-google: #EB6834; --an-linkedin: #1BAF7A; --an-business: #475467; --an-prev: #9CA3AF; }

/* head + toolbar */
.anov-head { display: flex; align-items: flex-end; gap: 20px; padding: 6px 4px 10px; }
.anov-title { flex: 1 1 auto; min-width: 0; }
.anov-head h1 { margin: 0; font-size: 31px; font-weight: 800; letter-spacing: -0.7px; line-height: 1.15; color: var(--text); }
.anov-head .sub { margin: 3px 0 0; font-size: 16px; color: var(--text-2); }
.anov-explore.btn-primary { height: 46px; padding: 0 22px; font-size: 15px; font-weight: 600; text-decoration: none; }
.anov-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 8px 12px; margin-bottom: 14px; border-radius: 12px; }
.anov-menu-wrap { position: relative; }
.anov-menu-wrap .pm-menu { left: 0; right: auto; top: calc(100% + 6px); min-width: 100%; z-index: 30; }
.anov-menu-wrap .pm-menu [aria-current="true"] { color: var(--indigo); font-weight: 600; }
.anov-menu-wrap .pm-menu [aria-current="true"]::after { content: "✓"; margin-left: auto; }
.anov-period, .anov-scope { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--text); text-align: left; cursor: pointer; font: inherit; white-space: nowrap; }
.anov-period > .i:first-child { font-size: 21px; color: var(--indigo); }
.anov-period > .i:last-child, .anov-scope > .i:last-child { font-size: 15px; color: var(--muted); }
.anov-period span { display: flex; flex-direction: column; line-height: 1.2; }
.anov-period b { font-size: 14px; font-weight: 600; }
.anov-period small { font-size: 12.5px; color: var(--text-2); }
.anov-scope { height: 38px; font-size: 14px; color: var(--text-2); }
.anov-scope > .i:first-child { font-size: 16px; color: var(--muted); }
.anov-scope b { font-weight: 600; color: var(--text); }
.anov-period:hover, .anov-scope:hover, .anov-period[aria-expanded="true"], .anov-scope[aria-expanded="true"] { border-color: #C9D2FF; }
.anov-period:focus-visible, .anov-scope:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.anov-switch { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text-2); cursor: pointer; user-select: none; }
.anov-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.anov-track { position: relative; width: 36px; height: 20px; border-radius: 10px; background: var(--track); transition: background .15s; flex: none; }
.anov-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.anov-switch input:checked + .anov-track { background: var(--indigo); }
.anov-switch input:checked + .anov-track::after { transform: translateX(16px); }
.anov-switch input:focus-visible + .anov-track { outline: 2px solid var(--indigo); outline-offset: 2px; }
.anov-switch b { font-weight: 600; color: var(--text); }
.anov-data { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0 0 0 auto; font-size: 13px; color: var(--muted); }
.anov-data > i { font-style: normal; margin: 0 7px; color: var(--muted-2); }
.anov-banner { display: flex; align-items: center; gap: 12px; margin: -4px 0 14px; padding: 10px 16px; border: 1px solid #F7DDB0; border-radius: 12px; background: #FFF8EC;
  font-size: 14px; color: var(--text-2); }
.anov-banner[hidden] { display: none; }
.anov-banner .i { font-size: 20px; color: var(--amber); flex: none; }
.anov-banner b { color: var(--text); }
.anov-banner.is-info { border-color: #C9D2FF; background: var(--indigo-bg-2); } .anov-banner.is-info .i { color: var(--indigo); }
.anov-banner a { margin-left: auto; }

/* the four summaries */
.anov-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.anov-kpi { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px 12px; border-radius: 12px; min-width: 0; }
.anov-ktop { display: flex; align-items: flex-start; gap: 16px; }
.anov-kic { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--indigo-bg); color: var(--indigo); }
.anov-kic .i { font-size: 24px; }
.anov-kic.is-mint { background: #E7F7F0; color: #178A5E; }
.anov-kt { display: flex; flex-direction: column; min-width: 0; }
.anov-kl { display: inline-flex; align-items: center; gap: 4px; font-size: 14.5px; font-weight: 500; color: var(--text-2); }
.anov-kl a { color: inherit; text-decoration: none; } .anov-kl a:hover { color: var(--indigo); text-decoration: underline; }
.anov-info { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: help; }
.anov-info .i { font-size: 15px; }
.anov-info:hover, .anov-info:focus-visible { color: var(--indigo); background: var(--indigo-bg-2); outline: none; }
.anov-kv { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.anov-kv b { font-size: 28px; font-weight: 700; line-height: 1.2; color: var(--text); font-variant-numeric: tabular-nums; }
.anov-kpi.is-na .anov-kv b { color: var(--muted-2); }
.anov-ks { font-size: 13px; color: var(--muted); }
.anov-knote { font-size: 12.5px; color: var(--text-2); }
.anov-delta { display: inline-flex; align-items: center; gap: 3px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.anov-delta .i { font-size: 14px; }
.anov-delta.is-good { color: var(--green-text); }
.anov-delta.is-bad { color: #B42339; }
.anov-delta.is-neutral { color: var(--text-2); }
.anov-flag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.anov-flag.is-amber { background: var(--amber-bg); color: var(--amber-text); }
.anov-flag.is-grey { background: var(--track); color: var(--text-2); }
.anov-kbox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--border-soft); border-radius: 9px; }
.anov-kbox > div { display: flex; flex-direction: column; gap: 1px; padding: 7px 12px; min-width: 0; }
.anov-kbox > div + div { border-left: 1px solid var(--border-soft); }
.anov-kbox span { display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.anov-kbox span .anov-info { width: 18px; height: 18px; } .anov-kbox span .anov-info .i { font-size: 13px; }
.anov-kbox b { font-size: 16px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.anov-kbox b.is-na { color: var(--muted-2); font-weight: 600; }
.anov-kbox.is-muted { background: #FAFBFC; }
.anov-kbox .anov-boxnote { grid-column: 1 / -1; padding: 8px 12px; font-size: 12.5px; color: var(--muted); }
.anov-ksrc { margin: 0; font-size: 12.5px; color: var(--muted); }
.anov-ksrc.is-warn { color: var(--amber-text); }
.anov-kact { margin-left: 4px; font-weight: 600; color: var(--indigo); text-decoration: none; }

/* the four trends */
.anov-trends { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.anov-trend { display: flex; flex-direction: column; padding: 12px 14px 10px; min-width: 0; }
.anov-thead { display: flex; align-items: center; gap: 8px; min-width: 0; }
.anov-thead h2 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 15.5px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anov-rep { font-size: 13px; }
.anov-dots { width: 30px; height: 30px; }
.anov-trend .anov-menu-wrap .pm-menu { left: auto; right: 0; min-width: 200px; }
.anov-tabs { display: inline-flex; align-self: flex-start; gap: 2px; margin-top: 8px; padding: 2px; border-radius: 8px; background: var(--track); }
.anov-tabs button { height: 26px; padding: 0 12px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer; }
.anov-tabs button[aria-selected="true"] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(23, 27, 45, 0.08); }
.anov-tabs button:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.anov-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; min-height: 20px; margin: 8px 0 2px; font-size: 12.5px; color: var(--text-2); }
.anov-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.anov-legend i { width: 14px; height: 3px; border-radius: 2px; }
.anov-legend i.is-prev { height: 0; border-top: 2px dashed var(--muted); background: none; }
.anov-legend b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.anov-chart { position: relative; height: 172px; outline: none; border-radius: 8px; }
.anov-chart:focus-visible { box-shadow: 0 0 0 2px var(--indigo); }
.anov-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.anov-chart .ax { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.anov-chart .grid { stroke: var(--border-soft); stroke-width: 1; }
.anov-chart .base { stroke: var(--border); stroke-width: 1; }
.anov-chart .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.anov-chart .ln.is-prev { stroke-dasharray: 4 4; stroke-width: 1.5; opacity: 0.55; }
.anov-chart .ln.is-partial { stroke-dasharray: 3 3; }
.anov-chart .area { opacity: 0.1; }
.anov-chart .xh { stroke: var(--muted-2); stroke-width: 1; }
.anov-chart .dot { stroke: var(--surface); stroke-width: 2; }
.anov-chart .gapband { fill: var(--track); opacity: 0.55; }
.anov-chart .gaptext { font-size: 11px; fill: var(--muted); }
.anov-chart .es.compact { padding: 18px 8px; }
.anov-tfoot { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.anov-table-wrap { height: 172px; overflow: auto; border: 1px solid var(--border-soft); border-radius: 8px; }
.anov-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.anov-table th, .anov-table td { padding: 5px 8px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--border-soft); font-variant-numeric: tabular-nums; }
.anov-table th:first-child, .anov-table td:first-child { text-align: left; }
.anov-table thead th { position: sticky; top: 0; background: #F7F8FB; font-weight: 600; color: var(--text-2); }

/* the bottom row */
.anov-bottom { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.2fr) minmax(0, 0.9fr); gap: 14px; align-items: start; }
.anov-bottom .po-card-head h2 { font-size: 17px; }
.anov-gap-list, .anov-src-list, .anov-rep-list { list-style: none; margin: 0; padding: 0; }
.anov-gap { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 9px 2px; }
.anov-gap + .anov-gap { border-top: 1px solid var(--border-soft); }
.anov-gic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--track); color: var(--text-2); }
.anov-gic .i { font-size: 18px; }
.anov-gic.is-red { background: #FDECEF; color: #B42339; } .anov-gic.is-amber { background: var(--amber-bg); color: var(--amber-text); }
.anov-gic.is-blue { background: var(--indigo-bg); color: var(--indigo); } .anov-gic.is-green { background: var(--green-bg); color: var(--green-text); }
.anov-gh { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.anov-gh b { font-size: 14.5px; font-weight: 600; color: var(--text); }
.anov-gh .po-chip { height: 22px; padding: 0 8px; font-size: 12px; }
.anov-gt p { margin: 2px 0 0; font-size: 13px; color: var(--text-2); }
.anov-gbtn.btn-outline { align-self: center; height: 32px; padding: 0 12px; font-size: 13px; font-weight: 600; border-color: #C9D2FF; color: var(--indigo); text-decoration: none; white-space: nowrap; }
.anov-gbtn.btn-outline:hover { background: var(--indigo-bg); }
.anov-ok { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; padding-top: 10px; border-top: 1px solid var(--border-soft); font-size: 13px; color: var(--text-2); }
.anov-ok .po-chip { height: 22px; padding: 0 8px; font-size: 12px; }
.anov-src { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 7px 2px; }
.anov-src + .anov-src { border-top: 1px solid var(--border-soft); }
.anov-src > .an-pf, .anov-src > .i { grid-row: span 2; width: 20px; height: 20px; font-size: 20px; color: var(--text-2); }
.anov-sn { display: flex; flex-direction: column; min-width: 0; grid-row: span 2; }
.anov-sn a { font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; } .anov-sn a:hover { color: var(--indigo); text-decoration: underline; }
.anov-sn small { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anov-src .po-chip { justify-self: end; height: 22px; padding: 0 8px; font-size: 12px; }
.anov-sf { justify-self: end; font-size: 12px; color: var(--muted); white-space: nowrap; }
.anov-sf.is-warn { color: var(--amber-text); }
.anov-src-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 8px; padding-top: 10px;
  border-top: 1px solid var(--border-soft); font-size: 12.5px; color: var(--muted); }
.anov-src-foot .po-link { font-size: 13.5px; }
.anov-rep-list { display: flex; flex-direction: column; gap: 6px; }
.anov-rep-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 16px; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--border-soft);
  border-radius: 9px; color: inherit; text-decoration: none; }
.anov-rep-row:hover { border-color: #C9D2FF; background: var(--indigo-bg-2); }
.anov-rep-row:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.anov-ric { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--indigo-bg); color: var(--indigo); }
.anov-ric .i { font-size: 18px; }
.anov-rt { display: flex; flex-direction: column; min-width: 0; }
.anov-rt b { font-size: 14px; font-weight: 600; color: var(--text); }
.anov-rt small { font-size: 12.5px; color: var(--muted); }
.anov-rep-row > .i:last-child { font-size: 16px; color: var(--indigo); }

/* the tooltip (definitions and chart values) */
.anov-tip { position: fixed; z-index: 60; max-width: 320px; padding: 10px 12px; border-radius: 10px; background: #171B2D; color: #fff; font-size: 12.5px; line-height: 1.45;
  box-shadow: 0 8px 24px rgba(23, 27, 45, 0.25); pointer-events: none; }
.anov-tip[hidden] { display: none; }
.anov-tip b { display: block; margin-bottom: 3px; font-size: 13px; }
.anov-tip .f { display: block; margin-top: 6px; color: #C3C8D8; }
.anov-tip table { border-collapse: collapse; margin-top: 2px; }
.anov-tip td { padding: 1px 0; } .anov-tip td + td { padding-left: 14px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.anov-tip .sw { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 2px; vertical-align: 0; }
.anov-tip .sw.is-prev { height: 0; border-top: 2px dashed #C3C8D8; border-radius: 0; background: none; }

/* states */
.anov-root.is-loading .anov-kpi, .anov-root.is-loading .anov-trend, .anov-root.is-loading .anov-bottom .po-card { position: relative; overflow: hidden; }
.anov-root.is-loading .anov-kpi > *, .anov-root.is-loading .anov-trend > *, .anov-root.is-loading .anov-bottom .po-card > * { visibility: hidden; }
.anov-root.is-loading .anov-kpi::after, .anov-root.is-loading .anov-trend::after, .anov-root.is-loading .anov-bottom .po-card::after {
  content: ""; position: absolute; inset: 16px; border-radius: 8px;
  background: linear-gradient(90deg, var(--track) 0%, #F3F5F9 50%, var(--track) 100%); background-size: 200% 100%; animation: anov-sh 1.2s linear infinite; }
@keyframes anov-sh { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .anov-root.is-loading .anov-kpi::after, .anov-root.is-loading .anov-trend::after, .anov-root.is-loading .anov-bottom .po-card::after { animation: none; } }
.anov-error { margin-top: 8px; }

@media (max-width: 1400px) {
  .anov-trends { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anov-bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anov-reports { grid-column: 1 / -1; }
  .anov-rep-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1200px) {
  .anov-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anov-data { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 768px) {
  .anov-head { flex-direction: column; align-items: stretch; }
  .anov-explore.btn-primary { justify-content: center; }
  .anov-kpis, .anov-trends, .anov-bottom, .anov-rep-list { grid-template-columns: minmax(0, 1fr); }
  .anov-gap { grid-template-columns: 34px minmax(0, 1fr); }
  .anov-gap .anov-gbtn { grid-column: 2; justify-self: start; }
  .anov-src { grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto; }
  .anov-src > .an-pf, .anov-src > .i, .anov-sn { grid-row: auto; }
  .anov-src .po-chip, .anov-sf { grid-column: 2; justify-self: start; }
  .anov-toolbar { gap: 10px; }
}

/* the build's additions (the prototype's menu buttons became links; hooks are data-anov-*; the planned page; the custom range; the fragment error) */
.an-planned { padding: 28px 16px 36px; }
.an-planned .es { max-width: 560px; margin: 0 auto; }
.anov-thead .anov-menu-wrap { display: inline-flex; }
.anov-dots { border: 0; background: none; padding: 0; cursor: pointer; }
.anov-dots:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.anov-root .pm-menu a[role="menuitem"] > span { flex: 1 1 auto; }
.anov-period, .anov-scope { font-family: inherit; }
.anov-custom { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; }
.anov-custom[hidden] { display: none; }
.anov-custom label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.anov-custom input { height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); }
.anov-custom .btn-primary, .anov-custom .btn-outline { height: 38px; padding: 0 14px; font-size: 14px; }
.anov-custom-err { flex-basis: 100%; font-size: 13px; color: #B42339; }
.anov-custom-err[hidden] { display: none; }
.anov-root .anov-error { margin: 0 0 14px; }
.anov-kpi .anov-kv b.is-na, .anov-kpi.is-na .anov-kv b { color: var(--muted-2); }
.anov-cpcd .anov-delta { font-size: 12.5px; }
.anov-trend .anov-chart .es.compact { display: flex; flex-direction: row; text-align: left; padding: 18px 8px; }
.anov-sources .anov-sn small { display: block; }
@media (max-width: 768px) {
  .anov-custom { flex-basis: 100%; }
  .anov-custom label { flex: 1 1 140px; }
  .anov-toolbar .po-ro { flex-basis: 100%; }
}

/* ---------- Analytics-02 · Business outcomes and metric definitions (anmd- this screen; reuses an- / po-card / po-chip / po-link / po-btn / pm-menu / es) — plans/Analytics-02.md, app/static/css/app.css (prototype block prototype/gen/analytics02.css; the app-wide spinner class .is-pending is never used here — .is-await) ---------- */
.anmd-root { --anmd-panel-w: 452px; }
.anmd-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--anmd-panel-w); gap: 16px; align-items: start; }
.anmd-layout.is-closed { grid-template-columns: minmax(0, 1fr); }
.anmd-main { min-width: 0; display: flex; flex-direction: column; }

/* crumb, head, context line, banner */
.anmd-crumb { display: flex; align-items: center; gap: 8px; margin: 0 0 2px 4px; font-size: 13px; color: var(--muted); }
.anmd-crumb a { color: var(--text-2); text-decoration: none; } .anmd-crumb a:hover { color: var(--indigo); text-decoration: underline; }
.anmd-crumb b { font-weight: 600; color: var(--text); }
.anmd-head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px 16px; padding: 2px 4px 6px; }
.anmd-title { flex: 1 1 360px; min-width: 0; }
.anmd-head h1 { margin: 0; font-size: 25px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.15; color: var(--text); }
.anmd-head .sub { margin: 3px 0 0; font-size: 14.5px; color: var(--text-2); }
.anmd-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.anmd-actions .po-btn { height: 40px; padding: 0 14px; font-size: 14px; }
.anmd-context { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0 0 12px 4px; font-size: 13px; color: var(--muted); }
.anmd-context > i { font-style: normal; margin: 0 7px; color: var(--muted-2); }
.anmd-viewonly { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; padding: 2px 8px; border-radius: 6px; background: var(--indigo-bg); color: var(--indigo); font-size: 12px; font-weight: 600; }
.anmd-viewonly[hidden] { display: none; }
.anmd-viewonly .i { font-size: 14px; }
.anmd-banner { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 10px 16px; border: 1px solid #F7DDB0; border-radius: 12px; background: #FFF8EC; font-size: 14px; color: var(--text-2); }
.anmd-banner[hidden] { display: none; }
.anmd-banner > .i { font-size: 20px; color: var(--amber); flex: none; }
.anmd-banner b { color: var(--text); }
.anmd-banner.is-info { border-color: #C9D2FF; background: var(--indigo-bg-2); } .anmd-banner.is-info > .i { color: var(--indigo); }
.anmd-banner .po-link { margin-left: auto; }

/* the definitions card */
.anmd-card { padding: 0; border-radius: 12px; overflow: hidden; }
.anmd-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; padding: 9px 12px; border-bottom: 1px solid var(--border-soft); }
.anmd-tabs { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--track); }
.anmd-tabs button { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 13.5px; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.anmd-tabs button b { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.anmd-tabs button[aria-selected="true"] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(23, 27, 45, 0.08); }
.anmd-tabs button[aria-selected="true"] b { color: var(--indigo); }
.anmd-tabs button:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.anmd-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.anmd-search, .anmd-select { position: relative; display: inline-flex; align-items: center; height: 36px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.anmd-search > .i, .anmd-select > .i { position: absolute; left: 10px; font-size: 15px; color: var(--muted); pointer-events: none; }
.anmd-search input { width: 150px; height: 100%; padding: 0 10px 0 32px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 13.5px; color: var(--text); }
.anmd-select select { height: 100%; max-width: 170px; padding: 0 6px 0 30px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 13.5px; color: var(--text); cursor: pointer; }
.anmd-search:focus-within, .anmd-select:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.anmd-search input:focus, .anmd-select select:focus { outline: none; }
.anmd-table-wrap { overflow-x: auto; }
.anmd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.anmd-table th { padding: 9px 7px; text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1.25; border-bottom: 1px solid var(--border-soft); background: #FAFBFD; }
.anmd-table th:first-child, .anmd-table td:first-child { padding-left: 14px; }
.anmd-table th:last-child, .anmd-table td:last-child { padding-right: 6px; }
.anmd-table td { padding: 10px 7px; vertical-align: middle; border-bottom: 1px solid var(--border-soft); color: var(--text-2); }
.anmd-table tbody tr { cursor: pointer; }
.anmd-table tbody tr:hover td { background: #FAFBFF; }
.anmd-table tbody tr.is-selected td { background: var(--indigo-bg-2); }
.anmd-table tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--indigo); }
.anmd-table tbody tr:last-child td { border-bottom: 0; }
.anmd-table tbody tr:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
.anmd-def { display: flex; align-items: center; gap: 10px; min-width: 150px; max-width: 200px; }
.anmd-dic { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--indigo-bg); color: var(--indigo); }
.anmd-dic .i { font-size: 18px; }
.anmd-dic.is-outcome { background: #E7F7F0; color: #178A5E; }
.anmd-dic.is-archived { background: var(--track); color: var(--muted); }
.anmd-dn { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.anmd-dn b { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 700; color: var(--text); }
.anmd-dn b .i { font-size: 13px; color: var(--muted-2); }
.anmd-dn small { font-size: 12px; color: var(--muted); }
.anmd-dn .anmd-kind { margin-top: 3px; }
.anmd-kind { display: inline-flex; align-items: center; align-self: flex-start; white-space: nowrap; height: 20px; padding: 0 7px; border-radius: 5px; font-size: 11.5px; font-weight: 600; background: var(--track); color: var(--text-2); }
.anmd-kind.is-outcome { background: #E7F7F0; color: #178A5E; }
.anmd-kind.is-await { background: var(--amber-bg); color: var(--amber-text); }
.anmd-kind.is-warn { background: var(--amber-bg); color: var(--amber-text); }
.anmd-tgt { display: flex; flex-direction: column; line-height: 1.3; white-space: nowrap; }
.anmd-tgt b { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.anmd-tgt b .i { font-size: 13px; color: var(--muted); }
.anmd-tgt small { font-size: 11.5px; color: var(--muted); }
.anmd-src { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.anmd-src span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 12.5px; color: var(--text-2); }
.anmd-src .an-pf { width: 16px; height: 16px; }
.anmd-src .anmd-fi { display: inline-grid; place-items: center; width: 16px; height: 16px; color: var(--muted); } .anmd-src .anmd-fi .i { font-size: 14px; }
.anmd-src.is-off span { color: var(--muted-2); }
.anmd-src.is-off span:last-child { font-size: 11px; }
.anmd-formula { min-width: 110px; max-width: 150px; color: var(--text-2); line-height: 1.3; }
.anmd-formula small { display: block; font-size: 11.5px; color: var(--muted); }
.anmd-cell-2 { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.anmd-cell-2.is-attr { min-width: 100px; max-width: 124px; } .anmd-cell-2.is-tz { white-space: nowrap; }
.anmd-cell-2 small { font-size: 11.5px; color: var(--muted); }
.anmd-ver { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.anmd-vchip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--indigo-bg); color: var(--indigo); font-size: 12.5px; font-weight: 700; }
.anmd-vchip.is-grey { background: var(--track); color: var(--text-2); }
.anmd-vchip.is-await { background: var(--amber-bg); color: var(--amber-text); }
.anmd-rowdots { position: relative; }
.anmd-rowdots .po-dots { width: 30px; height: 30px; border: 0; background: none; cursor: pointer; }
.anmd-rowdots .po-dots:hover, .anmd-rowdots .po-dots[aria-expanded="true"] { background: var(--track); }
.anmd-rowdots .pm-menu { right: 0; left: auto; top: calc(100% + 4px); min-width: 220px; z-index: 40; }
.anmd-menu button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.anmd-menu button small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; }
.anmd-foot { margin: 0; padding: 10px 16px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--border-soft); }
.anmd-empty { padding: 28px 16px; text-align: center; }
.anmd-empty svg.il { width: 96px; height: 72px; }
.anmd-empty b { display: block; margin-top: 8px; font-size: 15px; color: var(--text); }
.anmd-empty p { margin: 4px auto 12px; max-width: 460px; font-size: 13.5px; color: var(--text-2); }
.anmd-skel { height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--track), #F3F5F9, var(--track)); background-size: 200% 100%; animation: anmd-sk 1.2s linear infinite; }
@keyframes anmd-sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* the docked definition panel */
.anmd-panel { position: sticky; top: 12px; display: flex; flex-direction: column; max-height: calc(100vh - 24px); min-height: 420px; padding: 0; border-radius: 12px; overflow: hidden; }
.anmd-panel[hidden] { display: none; }
.anmd-phead { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px 6px; }
.anmd-phead .anmd-dic { width: 46px; height: 46px; } .anmd-phead .anmd-dic .i { font-size: 22px; }
.anmd-pt { flex: 1 1 auto; min-width: 0; }
.anmd-pt h2 { margin: 0; font-size: 19px; font-weight: 700; color: var(--text); letter-spacing: -0.2px; }
.anmd-pt p { margin: 1px 0 0; font-size: 13.5px; color: var(--muted); }
.anmd-x { width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--text-2); cursor: pointer; display: grid; place-items: center; }
.anmd-x:hover { background: var(--track); } .anmd-x .i { font-size: 20px; }
.anmd-x:focus-visible { outline: 2px solid var(--indigo); }
.anmd-ptabs { display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--border-soft); }
.anmd-ptabs button { position: relative; height: 40px; padding: 0 12px; border: 0; background: none; font: inherit; font-size: 14px; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.anmd-ptabs button b { font-weight: 600; color: var(--muted); }
.anmd-ptabs button[aria-selected="true"] { color: var(--indigo); font-weight: 600; }
.anmd-ptabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--indigo); }
.anmd-ptabs button:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; border-radius: 6px; }
.anmd-pbody { flex: 1 1 auto; overflow-y: auto; padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 12px; }
.anmd-pfoot { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--border-soft); background: var(--surface); }
.anmd-pfoot .spacer { flex: 1 1 auto; }
.anmd-pfoot .po-btn { height: 40px; }
.anmd-pfoot .anmd-fnote { flex: 1 1 auto; font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.anmd-pfoot .anmd-fnote.is-warn { color: var(--amber-text); }
.anmd-pfoot .anmd-fnote.is-bad { color: #B42339; }
.anmd-pfoot .pm-menu { left: 0; right: auto; bottom: calc(100% + 6px); top: auto; min-width: 230px; z-index: 40; }
.anmd-box { border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface); }
.anmd-box > h3 { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 12px; font-size: 14px; font-weight: 700; color: var(--text); border-bottom: 1px solid var(--border-soft); background: #FAFBFD; border-radius: 10px 10px 0 0; }
.anmd-box > h3 .spacer { flex: 1 1 auto; }
.anmd-kv { display: grid; grid-template-columns: 138px minmax(0, 1fr); font-size: 13px; }
.anmd-kv dt, .anmd-kv dd { margin: 0; padding: 7px 12px; border-bottom: 1px solid var(--border-soft); }
.anmd-kv dt { color: var(--muted); }
.anmd-kv dd { color: var(--text); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.anmd-kv dd small { width: 100%; font-size: 12px; color: var(--muted); }
.anmd-kv dt:nth-last-of-type(1), .anmd-kv dd:last-child { border-bottom: 0; }
.anmd-kv .an-pf { width: 16px; height: 16px; }
.anmd-eq { padding: 10px 12px 12px; }
.anmd-eqline { margin: 0 0 10px; text-align: center; font-size: 14.5px; font-weight: 600; color: var(--text); }
.anmd-eqline em { font-style: normal; color: var(--muted); margin: 0 4px; }
.anmd-eqboxes { display: flex; align-items: stretch; justify-content: center; gap: 8px; flex-wrap: wrap; }
.anmd-eqbox { display: flex; flex-direction: column; justify-content: center; min-width: 96px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; text-align: center; }
.anmd-eqbox span { font-size: 12px; color: var(--muted); }
.anmd-eqbox b { font-size: 18px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.anmd-eqbox.is-result { border-color: #C9D2FF; background: var(--indigo-bg-2); }
.anmd-eqbox.is-result b { color: var(--indigo); font-size: 20px; }
.anmd-eqbox.is-na b { color: var(--muted-2); font-size: 16px; }
.anmd-eqop { align-self: center; font-size: 18px; color: var(--muted); }
.anmd-eqnote { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.anmd-eqnote b { font-weight: 600; }
.anmd-eqnote .is-good { color: var(--green-text); } .anmd-eqnote .is-bad { color: var(--amber-text); }
.anmd-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.anmd-rules .anmd-box > h3 .i { font-size: 18px; }
.anmd-rules .is-inc > h3 .i { color: var(--green); } .anmd-rules .is-exc > h3 .i { color: var(--red); }
.anmd-rules ul { margin: 0; padding: 8px 12px 10px 26px; font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.anmd-rules li + li { margin-top: 3px; }
.anmd-rules .is-inc li::marker { color: var(--green); } .anmd-rules .is-exc li::marker { color: var(--red); }
.anmd-note { display: flex; gap: 10px; padding: 10px 12px; border: 1px solid #C9D2FF; border-radius: 10px; background: var(--indigo-bg-2); font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.anmd-note > .i { flex: none; font-size: 18px; color: var(--indigo); margin-top: 1px; }
.anmd-note b { color: var(--text); }
.anmd-note ul { margin: 4px 0 0; padding-left: 16px; }
.anmd-note .btn-outline { margin-left: auto; align-self: flex-start; height: 32px; padding: 0 10px; font-size: 12.5px; white-space: nowrap; }
.anmd-note.is-warn { border-color: #F7DDB0; background: #FFF8EC; } .anmd-note.is-warn > .i { color: var(--amber); }
.anmd-note.is-bad { border-color: #F6C6CE; background: #FDF1F3; } .anmd-note.is-bad > .i { color: #B42339; }
.anmd-note.is-good { border-color: #BFE8D6; background: #F0FAF5; } .anmd-note.is-good > .i { color: var(--green); }
.anmd-note .anmd-nt { flex: 1 1 auto; min-width: 0; }
.anmd-note .anmd-nacts { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.anmd-note .anmd-nacts .btn-outline, .anmd-note .anmd-nacts .btn-primary { margin: 0; height: 32px; padding: 0 12px; font-size: 13px; box-shadow: none; }

/* where used + version history */
.anmd-group > h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13.5px; font-weight: 700; color: var(--text); }
.anmd-group > h3 .i { font-size: 16px; color: var(--indigo); }
.anmd-group > h3 { flex-wrap: wrap; }
.anmd-group > h3 small { flex-basis: 100%; margin: -2px 0 0 24px; font-size: 12px; font-weight: 400; color: var(--muted); }
.anmd-group ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border-soft); border-radius: 10px; }
.anmd-group li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; font-size: 13px; }
.anmd-group li + li { border-top: 1px solid var(--border-soft); }
.anmd-group li .anmd-ut { flex: 1 1 auto; min-width: 0; }
.anmd-group li .anmd-ut b { display: block; font-weight: 600; color: var(--text); }
.anmd-group li .anmd-ut small { display: block; color: var(--muted); font-size: 12px; }
.anmd-group li .anmd-ut code { font-family: inherit; font-size: 12px; padding: 1px 5px; border-radius: 4px; background: var(--track); color: var(--text-2); }
.anmd-group li .po-link { font-size: 12.5px; }
.anmd-group .anmd-none { color: var(--muted); font-size: 12.5px; }
.anmd-vlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.anmd-vrow { border: 1px solid var(--border-soft); border-radius: 10px; }
.anmd-vrow.is-active { border-color: #C9D2FF; }
.anmd-vrow.is-await { border-color: #F7DDB0; background: #FFFCF6; }
.anmd-vhead { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; border-radius: 10px; }
.anmd-vhead:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
.anmd-vhead .anmd-vt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; font-size: 13px; }
.anmd-vhead .anmd-vt b { font-weight: 600; color: var(--text); }
.anmd-vhead .anmd-vt small { color: var(--muted); font-size: 12px; }
.anmd-vhead > .i { font-size: 16px; color: var(--muted); transition: transform .15s; }
.anmd-vrow.is-open .anmd-vhead > .i { transform: rotate(90deg); }
.anmd-vbody { display: none; padding: 0 12px 10px; font-size: 12.5px; color: var(--text-2); }
.anmd-vrow.is-open .anmd-vbody { display: block; }
.anmd-vbody p { margin: 0 0 6px; }
.anmd-vbody ul { margin: 0 0 8px; padding-left: 16px; }
.anmd-vbody .anmd-vacts { display: flex; gap: 8px; flex-wrap: wrap; }
.anmd-vbody .anmd-vacts button { height: 30px; padding: 0 10px; font-size: 12.5px; box-shadow: none; }

/* the edit form */
.anmd-form { display: flex; flex-direction: column; gap: 12px; }
.anmd-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--track); }
.anmd-seg button { height: 30px; padding: 0 12px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer; }
.anmd-seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(23, 27, 45, 0.08); }
.anmd-seg button:disabled { cursor: default; }
.anmd-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.anmd-field input[type="text"], .anmd-field input[type="number"], .anmd-field select { width: 100%; }
.anmd-field > label.anmd-sw { font-weight: 400; color: var(--text-2); }
.anmd-field > label, .anmd-field > .anmd-fl { font-size: 13px; font-weight: 600; color: var(--text); }
.anmd-field > label small, .anmd-field > .anmd-fl small { font-weight: 400; color: var(--muted); }
.anmd-field input[type="text"], .anmd-field input[type="number"], .anmd-field select, .anmd-field textarea {
  height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 13.5px; color: var(--text); min-width: 0; }
.anmd-field textarea { height: 64px; padding: 8px 10px; resize: vertical; line-height: 1.4; }
.anmd-field input:focus, .anmd-field select:focus, .anmd-field textarea:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.anmd-field.is-invalid input, .anmd-field.is-invalid select, .anmd-field.is-invalid textarea, .anmd-field.is-invalid .anmd-terms { border-color: #E5707F; }
.anmd-field .anmd-err { display: flex; gap: 5px; font-size: 12.5px; color: #B42339; line-height: 1.35; }
.anmd-field .anmd-err .i { flex: none; font-size: 14px; margin-top: 1px; }
.anmd-field .anmd-warn { display: flex; gap: 5px; font-size: 12.5px; color: var(--amber-text); line-height: 1.35; }
.anmd-field .anmd-warn .i { flex: none; font-size: 14px; margin-top: 1px; }
.anmd-field .anmd-help { font-size: 12px; color: var(--muted); line-height: 1.35; }
.anmd-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.anmd-row3 { display: grid; grid-template-columns: 1.1fr 0.8fr 1.1fr; gap: 10px; }
.anmd-terms { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; }
.anmd-term { display: grid; grid-template-columns: 56px minmax(0, 1fr) 30px; gap: 6px; align-items: center; }
.anmd-term select { height: 34px; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); font: inherit; font-size: 13px; color: var(--text); min-width: 0; }
.anmd-term .anmd-op0 { font-size: 12.5px; color: var(--muted); text-align: center; }
.anmd-term button { width: 30px; height: 30px; border: 0; border-radius: 7px; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.anmd-term button:hover { background: var(--track); color: var(--text); }
.anmd-term button .i { font-size: 16px; }
.anmd-addterm { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 8px; border: 0; border-radius: 7px; background: none; color: var(--indigo); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.anmd-addterm:hover { background: var(--indigo-bg-2); } .anmd-addterm .i { font-size: 15px; }
.anmd-checks { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; }
.anmd-checks label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.anmd-checks label b { margin-left: auto; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.anmd-checks input { width: 16px; height: 16px; accent-color: var(--indigo); }
.anmd-sw { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.anmd-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.anmd-sw .anmd-track { position: relative; flex: none; width: 34px; height: 20px; margin-top: 1px; border-radius: 10px; background: var(--track); transition: background .15s; }
.anmd-sw .anmd-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.anmd-sw input:checked + .anmd-track { background: var(--indigo); }
.anmd-sw input:checked + .anmd-track::after { transform: translateX(14px); }
.anmd-sw input:focus-visible + .anmd-track { outline: 2px solid var(--indigo); outline-offset: 2px; }
.anmd-sw b { display: block; color: var(--text); font-weight: 600; }
.anmd-events { display: flex; flex-direction: column; gap: 6px; }
.anmd-event { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 30px; gap: 6px; align-items: center; }
.anmd-event select { height: 34px; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); font: inherit; font-size: 13px; color: var(--text); min-width: 0; }
.anmd-event button { width: 30px; height: 30px; border: 0; border-radius: 7px; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.anmd-event button:hover { background: var(--track); } .anmd-event button .i { font-size: 16px; }
.anmd-event small { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.anmd-impact { border: 1px solid var(--border-soft); border-radius: 10px; }
.anmd-impact > h3 { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 12px; font-size: 14px; font-weight: 700; color: var(--text); border-bottom: 1px solid var(--border-soft); background: #FAFBFD; border-radius: 10px 10px 0 0; }
.anmd-impact > h3 .i { font-size: 17px; color: var(--indigo); }
.anmd-impact .anmd-ib { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.anmd-impact .anmd-ib ul { margin: 0; padding-left: 16px; }
.anmd-diff { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 10px; font-size: 12.5px; }
.anmd-diff dt { margin: 0; color: var(--muted); }
.anmd-diff dd { margin: 0; color: var(--text); }
.anmd-diff del { color: var(--muted); text-decoration: line-through; }
.anmd-diff ins { text-decoration: none; font-weight: 600; color: var(--text); }

/* change history dialog + conflict dialog */
.anmd-scrim { position: fixed; inset: 0; background: rgba(23, 27, 45, 0.34); z-index: 60; }
.anmd-scrim[hidden] { display: none; }
.anmd-dialog { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); display: flex; flex-direction: column;
  background: var(--surface); border-radius: 14px; box-shadow: 0 24px 64px rgba(23, 27, 45, 0.28); z-index: 61; }
.anmd-dialog.is-narrow { width: min(560px, calc(100vw - 32px)); }
.anmd-dhead { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 10px; }
.anmd-dhead h2 { flex: 1 1 auto; margin: 0; font-size: 19px; font-weight: 700; color: var(--text); }
.anmd-dhead p { margin: 3px 0 0; font-size: 13.5px; color: var(--text-2); }
.anmd-dbody { overflow-y: auto; padding: 4px 18px 14px; }
.anmd-dfoot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--border-soft); }
.anmd-dfoot .po-btn { height: 40px; }
.anmd-hist { width: 100%; border-collapse: collapse; font-size: 13px; }
.anmd-hist th { padding: 8px 8px; text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.anmd-hist td:first-child { white-space: nowrap; }
.anmd-hist td { padding: 9px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: top; color: var(--text-2); }
.anmd-hist td b { color: var(--text); font-weight: 600; }
.anmd-hist button.po-link { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; cursor: pointer; }
.anmd-evt { display: inline-flex; height: 20px; align-items: center; padding: 0 7px; border-radius: 5px; font-size: 11.5px; font-weight: 600; background: var(--track); color: var(--text-2); white-space: nowrap; }
.anmd-evt.is-saved, .anmd-evt.is-approved, .anmd-evt.is-restored { background: var(--green-bg); color: var(--green-text); }
.anmd-evt.is-requested { background: var(--amber-bg); color: var(--amber-text); }
.anmd-evt.is-created { background: var(--indigo-bg); color: var(--indigo); }
.anmd-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.anmd-cmp > div { border: 1px solid var(--border-soft); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; color: var(--text-2); }
.anmd-cmp > div b { display: block; margin-bottom: 4px; font-size: 13px; color: var(--text); }

@media (min-width: 769px) {
  .anmd-table { table-layout: fixed; }
  .anmd-table th:nth-child(1) { width: 20%; } .anmd-table th:nth-child(2) { width: 11%; } .anmd-table th:nth-child(3) { width: 13%; }
  .anmd-table th:nth-child(4) { width: 13.5%; } .anmd-table th:nth-child(5) { width: 11.5%; } .anmd-table th:nth-child(6) { width: 12%; }
  .anmd-table th:nth-child(7) { width: 9%; } .anmd-table th:nth-child(8) { width: 6%; } .anmd-table th:nth-child(9) { width: 4%; }
  .anmd-def, .anmd-formula, .anmd-cell-2.is-attr { min-width: 0; max-width: none; }
  .anmd-table td.anmd-c-formula { overflow-wrap: anywhere; }
  .anmd-cell-2.is-tz { white-space: normal; }
}
@media (max-width: 1400px) {
  .anmd-root { --anmd-panel-w: 440px; }
  .anmd-table th:nth-child(6), .anmd-table td:nth-child(6) { display: none; }
}
@media (max-width: 1200px) {
  .anmd-table th:nth-child(5), .anmd-table td:nth-child(5), .anmd-table th:nth-child(7), .anmd-table td:nth-child(7) { display: none; }
}
@media (max-width: 1360px) {
  .anmd-layout, .anmd-layout.is-closed { grid-template-columns: minmax(0, 1fr); }
  .anmd-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); height: auto; max-height: none; min-height: 0; border-radius: 0; z-index: 61; }
  .anmd-scrim.is-panel { display: block; }
}
@media (max-width: 768px) {
  .anmd-head h1 { font-size: 23px; }
  .anmd-actions { width: 100%; } .anmd-actions .po-btn { flex: 1 1 auto; justify-content: center; }
  .anmd-toolbar { padding: 10px; } .anmd-tabs { max-width: 100%; overflow-x: auto; } .anmd-filters { width: 100%; }
  .anmd-search { flex: 1 1 100%; } .anmd-search input { width: 100%; } .anmd-select { flex: 1 1 0; min-width: 0; } .anmd-select select { width: 100%; }
  .anmd-table thead { display: none; }
  .anmd-table, .anmd-table tbody, .anmd-table tr { display: block; width: 100%; }
  .anmd-table tbody tr { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 12px 12px 12px 14px; border-bottom: 1px solid var(--border-soft); }
  .anmd-table td { display: block !important; padding: 0; border: 0; background: none !important; }
  .anmd-table td:first-child { grid-column: 1 / -1; padding: 0 36px 0 0; box-shadow: none !important; }
  .anmd-table td[data-l]::before { content: attr(data-l); display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-bottom: 1px; }
  .anmd-table td.anmd-c-dots { position: absolute; top: 10px; right: 8px; }
  .anmd-table td.anmd-c-formula { grid-column: 1 / -1; }
  .anmd-table tbody tr.is-selected { box-shadow: inset 3px 0 0 var(--indigo); }
  .anmd-formula { max-width: none; } .anmd-def, .anmd-src, .anmd-cell-2 { min-width: 0; }
  .anmd-rules, .anmd-row2, .anmd-row3, .anmd-cmp { grid-template-columns: 1fr; }
  .anmd-kv { grid-template-columns: 112px minmax(0, 1fr); }
}

/* production additions (app/static/js/analytics-definitions.js): the pre-rendered ⋯ menus, the reject box, the history pager, the version list foot */
.anmd-menu[hidden] { display: none; }
.anmd-rejectbox { margin-top: 8px; }
.anmd-rejectbox[hidden], .anmd-err[hidden] { display: none; }
.anmd-hmore { margin: 10px 0 0; text-align: center; }
.anmd-vfoot { border: 0; padding: 4px 2px; }
.anmd-pbody > .anmd-form { gap: 12px; }

@media (max-width: 768px) {
  /* the drawer is full-screen on a phone: above the bottom tab bar (z 85), below the MM-41 dialogs (z 90) */
  .anmd-panel { width: 100vw; z-index: 87; }
  .anmd-scrim { z-index: 86; }
  .anmd-dialog { z-index: 88; }
}

/* ---------- Analytics-03 · Organic performance (anor- this screen and its A03-search mode; the Explore crumb switcher every analysis reuses; reuses the Analytics-01 toolbar, summary, ⓘ, legend, chart, table and tooltip classes anov-* and po-card / po-chip / po-link / pm-menu / es) — plans/Analytics-03.md, app/static/css/app.css (prototype block prototype/gen/analytics03.css + the build's additions) ---------- */
.anor-root { --an-total: #475467; }

/* the Explore crumb with the analysis switcher (plans/Analytics-03.md §2.1 — the Explore sub-navigation every A03 … A30 analysis reuses) */
.anor-crumb { display: flex; align-items: center; gap: 8px; margin: 0 0 2px 4px; font-size: 13.5px; color: var(--muted); }
.anor-crumb b { font-weight: 600; color: var(--text-2); }
.anor-xbtn { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px 0 6px; margin-left: -6px; border: 0; border-radius: 7px; background: none;
  font: inherit; color: var(--indigo); font-weight: 600; cursor: pointer; }
.anor-xbtn .i { font-size: 14px; }
.anor-xbtn:hover, .anor-xbtn[aria-expanded="true"] { background: var(--indigo-bg-2); }
.anor-xbtn:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.anor-xwrap .pm-menu.anor-xmenu { left: 0; right: auto; min-width: 300px; max-height: 70vh; overflow: auto; padding: 6px; }
.anor-xgroup { margin: 6px 8px 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.anor-xmenu a { display: flex; align-items: center; gap: 10px; }
.anor-xmenu a small { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.anor-xmenu a[aria-current="true"] { color: var(--indigo); font-weight: 600; background: var(--indigo-bg-2); }

/* head + mode switch */
.anor-head { display: flex; align-items: flex-end; gap: 20px; padding: 0 4px 10px; }
.anor-title { flex: 1 1 auto; min-width: 0; }
.anor-head h1 { margin: 0; font-size: 31px; font-weight: 800; letter-spacing: -0.7px; line-height: 1.15; color: var(--text); }
.anor-head .sub { margin: 3px 0 0; font-size: 15.5px; color: var(--text-2); }
.anor-mode { display: inline-flex; flex: none; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.anor-mode a { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px; border-radius: 7px; font-size: 14px; font-weight: 600; color: var(--text-2);
  text-decoration: none; }
.anor-mode a .i { font-size: 16px; }
.anor-mode a[aria-selected="true"] { background: var(--indigo-bg); color: var(--indigo); }
.anor-mode a:hover:not([aria-selected="true"]) { background: var(--indigo-bg-2); }
.anor-mode a:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }

/* toolbar additions */
.anor-accmenu.pm-menu { min-width: 300px; padding: 8px; }
.anor-check { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 7px; font-size: 13.5px; color: var(--text); cursor: pointer; }
.anor-check:hover { background: var(--indigo-bg-2); }
.anor-check input { width: 16px; height: 16px; accent-color: var(--indigo); }
.anor-accnote { margin: 6px 8px 2px; padding-top: 8px; border-top: 1px solid var(--border-soft); font-size: 12px; color: var(--muted); }
.anor-prop { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--border-soft); border-radius: 9px; background: #FAFBFC;
  font-size: 14px; color: var(--text-2); white-space: nowrap; }
.anor-prop b { font-weight: 600; color: var(--text); }
.anov-menu-wrap .pm-menu [data-stype] small { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.anor-viewonly { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; font-size: 12.5px; color: var(--text-2); }
.anor-viewonly[hidden] { display: none; }
.anor-banner .po-link { white-space: nowrap; }

/* summaries: the Analytics-01 card without the two-cell box */
.anor-kpi { gap: 8px; }
.anor-kpi .anov-knote { color: var(--muted); }
.anor-ksrc { padding-top: 8px; border-top: 1px solid var(--border-soft); }
.anor-ksrc { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.anor-ksrc b { font-weight: 600; color: var(--text-2); }
.anor-ks1 { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .anor-ks1 .an-pf { width: 15px; height: 15px; }
.anov-kic.is-mint { background: #E7F7F0; color: #178A5E; }

/* the grids */
.anor-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 14px; align-items: start; margin-bottom: 14px; }
.anor-grid-s { grid-template-columns: minmax(0, 2.55fr) minmax(0, 0.95fr); }
.anor-grid2 { display: grid; grid-template-columns: minmax(0, 2.55fr) minmax(0, 0.95fr); gap: 14px; align-items: start; }
.anor-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anor-root .po-card-head h2 { font-size: 16.5px; }

/* the trend panel */
.anor-trend { display: flex; flex-direction: column; padding: 12px 14px 10px; min-width: 0; }
.anor-trend .anov-thead h2 { flex: 0 1 auto; margin-right: auto; }
.anor-trend .anov-thead { flex-wrap: wrap; }
.anor-select select { height: 32px; padding: 0 28px 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 13.5px; color: var(--text); }
.anor-select select:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.anor-view.anov-tabs { margin-top: 0; }
.anor-trend .anov-menu-wrap .pm-menu { left: auto; right: 0; min-width: 200px; }
.anor-chart.anov-chart { height: 250px; }
.anor-trend .anov-table-wrap { height: 250px; }
.anor-focus { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 13px; color: var(--text-2); }
.anor-focus[hidden] { display: none; }
.anor-focus button { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border: 1px solid #C9D2FF; border-radius: 12px; background: var(--indigo-bg-2);
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--indigo); cursor: pointer; }
.anor-focus button .i { font-size: 12px; }

/* the breakdown card */
.anor-break { padding: 12px 14px; min-width: 0; }
.anor-break .anov-thead h2 { font-size: 15.5px; }
.anor-btabs { margin: 8px 0 6px; }
.anor-bars { list-style: none; margin: 0; padding: 0; }
.anor-bar { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 8px 6px;
  border-radius: 8px; cursor: pointer; }
.anor-bar + .anor-bar { border-top: 1px solid var(--border-soft); }
.anor-bar:hover { background: var(--indigo-bg-2); }
.anor-bar[aria-pressed="true"] { background: var(--indigo-bg); box-shadow: inset 3px 0 0 var(--indigo); }
.anor-bar:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.anor-bar > .an-pf, .anor-bar > .i { grid-row: span 2; width: 22px; height: 22px; font-size: 20px; color: var(--text-2); }
.anor-bn { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; font-size: 13.5px; color: var(--text); font-weight: 600; }
.anor-bn small { font-size: 12px; font-weight: 400; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anor-bv { justify-self: end; font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.anor-bv.is-na { color: var(--muted-2); font-weight: 600; }
.anor-btrack { grid-column: 2; position: relative; height: 8px; margin-top: 5px; border-radius: 4px; background: var(--track); overflow: hidden; }
.anor-btrack i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.anor-bmeta { grid-column: 3; justify-self: end; margin-top: 3px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.anor-bmeta .is-good { color: var(--green-text); font-weight: 600; } .anor-bmeta .is-bad { color: #B42339; font-weight: 600; }
.anor-bar.is-na { cursor: default; } .anor-bar.is-na:hover { background: none; }
.anor-bnote { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--border-soft); font-size: 12.5px; color: var(--muted); }
.anor-bnote b { color: var(--text-2); font-weight: 600; }

/* side cards */
.anor-links, .anor-missing, .anor-bp, .anor-paid, .anor-about { padding: 12px 14px; }
.anor-lrows, .anor-miss-list, .anor-about-list { list-style: none; margin: 0; padding: 0; }
.anor-lrow { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 7px 0; }
.anor-lrow + .anor-lrow { border-top: 1px solid var(--border-soft); }
.anor-lrow .an-pf { grid-row: span 2; }
.anor-lrow b { font-size: 13.5px; font-weight: 600; color: var(--text); }
.anor-lrow small { grid-column: 2; font-size: 12px; color: var(--muted); }
.anor-lrow .anor-lv { grid-row: span 2; text-align: right; font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.anor-lrow .anor-lv small { display: block; font-size: 11.5px; font-weight: 500; }
.anor-lrow .anor-lv.is-na { color: var(--muted-2); }
.anor-lnote { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.anor-lnote .po-link { font-size: 12.5px; }
.anor-miss { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 7px 0; }
.anor-miss + .anor-miss { border-top: 1px solid var(--border-soft); }
.anor-miss b { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.anor-miss small { font-size: 12px; color: var(--muted); }
.anor-miss .anov-gbtn.btn-outline, .anor-bp .anov-gbtn.btn-outline { height: 30px; padding: 0 10px; font-size: 12.5px; }
.anor-bp .anov-gbtn { display: inline-flex; margin-top: 10px; }
.anor-bp .po-card-head .po-chip { margin-left: auto; height: 22px; padding: 0 8px; font-size: 12px; }
.anor-paid .po-link { display: inline-flex; margin-top: 8px; font-size: 13px; }
.anor-about-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; padding: 6px 0; }
.anor-about-list li + li { border-top: 1px solid var(--border-soft); }
.anor-about-list b { font-size: 13px; font-weight: 600; color: var(--text); }
.anor-about-list p { margin: 1px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-2); }
.anor-versions { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--border-soft); font-size: 12px; line-height: 1.5; color: var(--muted); }
.anor-versions a { color: var(--indigo); text-decoration: none; } .anor-versions a:hover { text-decoration: underline; }

/* the posts and search tables */
.anor-posts, .anor-stable { padding: 12px 14px; min-width: 0; }
.anor-stable { margin-top: 0; }
.anor-posts-sub { font-size: 12.5px; color: var(--muted); }
.anor-posts-link { margin-left: auto; font-size: 13px; }
.anor-stabs { margin: 2px 0 8px; }
.anor-twrap { overflow-x: auto; }
.anor-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.anor-table th { padding: 7px 8px; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--text-2); background: #F7F8FB; border-bottom: 1px solid var(--border-soft);
  white-space: nowrap; }
.anor-table th.num, .anor-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.anor-table th button { display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.anor-table th[aria-sort="descending"] button::after { content: "↓"; color: var(--indigo); }
.anor-table th[aria-sort="ascending"] button::after { content: "↑"; color: var(--indigo); }
.anor-table th button:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 3px; }
.anor-table td { padding: 7px 8px; border-bottom: 1px solid var(--border-soft); color: var(--text); vertical-align: middle; }
.anor-table tbody tr { cursor: pointer; }
.anor-table tbody tr:hover { background: var(--indigo-bg-2); }
.anor-table tbody tr[aria-selected="true"] { background: var(--indigo-bg); box-shadow: inset 3px 0 0 var(--indigo); }
.anor-table tbody tr:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
.anor-table tbody tr.is-na td { color: var(--muted); }
.anor-table tbody tr.is-sum { cursor: default; } .anor-table tbody tr.is-sum:hover { background: none; }
.anor-table tbody tr.is-sum td { color: var(--text-2); font-style: normal; background: #FAFBFC; }
.anor-pc { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.anor-thumb { flex: none; width: 64px; height: 42px; border-radius: 6px; overflow: hidden; background: var(--track); }
.anor-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.anor-pt { display: flex; flex-direction: column; min-width: 0; }
.anor-pt b { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anor-pt small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anor-acc { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.anor-fmt { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--indigo-bg); color: var(--indigo); font-size: 12px; font-weight: 600; }
.anor-fmt.is-video { background: #F6E9F3; color: #8E2F76; }
.anor-fmt .i { font-size: 12px; }
.anor-na { font-size: 12px; color: var(--muted); }
.anor-lk { display: inline-block; max-width: 96px; } .anor-lk small { display: block; font-size: 11.5px; line-height: 1.3; color: var(--muted); }
.anor-pub { white-space: nowrap; } .anor-pub small { display: block; font-size: 11.5px; color: var(--muted); }
.anor-open.btn-outline { height: 30px; padding: 0 10px; font-size: 12.5px; font-weight: 600; border-color: #C9D2FF; color: var(--indigo); }
.anor-foot { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.anor-share { display: block; position: relative; width: 120px; height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; }
.anor-share i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: #EB6834; }
.anor-q { font-weight: 600; }

/* the post drawer (520 px, the design system's drawer) */
.anor-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(16, 21, 47, 0.28); }
.anor-scrim[hidden] { display: none; }
.anor-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 71; display: flex; flex-direction: column; width: min(540px, 100vw); background: var(--surface);
  box-shadow: -12px 0 32px rgba(23, 27, 45, 0.18); }
.anor-drawer[hidden] { display: none; }
.anor-dh { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--border-soft); }
.anor-dh .anor-thumb { width: 84px; height: 56px; }
.anor-dh h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.anor-dh p { margin: 2px 0 0; font-size: 13px; color: var(--text-2); }
.anor-dh .anor-x { margin-left: auto; flex: none; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--text-2); cursor: pointer; }
.anor-dh .anor-x:hover { background: var(--track); } .anor-dh .anor-x .i { font-size: 18px; }
.anor-db { flex: 1 1 auto; overflow: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.anor-box { border: 1px solid var(--border-soft); border-radius: 10px; padding: 12px 14px; }
.anor-box h3 { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: var(--text); }
.anor-kvs { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 13px; }
.anor-kvs dt { color: var(--text-2); } .anor-kvs dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--text); font-variant-numeric: tabular-nums; }
.anor-kvs dd small { color: var(--muted); }
.anor-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.anor-tile { padding: 8px 10px; border-radius: 8px; background: #F7F8FB; }
.anor-tile span { display: block; font-size: 12px; color: var(--text-2); }
.anor-tile b { font-size: 18px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.anor-tile.is-na b { color: var(--muted-2); font-size: 16px; }
.anor-tile small { display: block; font-size: 11.5px; color: var(--muted); }
.anor-dnote { margin: 0; padding: 10px 12px; border-radius: 9px; background: var(--amber-bg); color: var(--amber-text); font-size: 12.5px; }
.anor-dnote.is-info { background: var(--indigo-bg-2); color: var(--text-2); }
.anor-df { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border-soft); }
.anor-df .btn-outline, .anor-df .btn-primary { height: 38px; padding: 0 14px; font-size: 13.5px; text-decoration: none; }

/* states: a body swap dims the body (the fragment arrives within a second; a skeleton would flicker) */
.anor-root.is-readonly [data-write] { display: none !important; }

@media (max-width: 1400px) {
  .anor-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .anor-grid .anor-side { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anor-grid-s { grid-template-columns: minmax(0, 1fr); }
  .anor-grid-s .anor-side { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .anor-grid2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1200px) {
  .anor-kpis.anov-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anor-data.anov-data { margin-left: 0; flex-basis: 100%; }
  .anor-grid-s .anor-side { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .anor-head { flex-direction: column; align-items: stretch; }
  .anor-mode { align-self: flex-start; }
  .anor-kpis.anov-kpis, .anor-grid, .anor-grid .anor-side { grid-template-columns: minmax(0, 1fr); }
  .anor-trend .anov-thead { gap: 8px; }
  .anor-prop { white-space: normal; height: auto; padding: 6px 10px; }
  .anor-posts .po-card-head, .anor-stable .po-card-head { flex-wrap: wrap; }
  .anor-posts-sub { order: 5; flex-basis: 100%; }
  /* the posts table becomes cards */
  #anor-ptable thead { display: none; }
  #anor-ptable, #anor-ptable tbody, #anor-ptable tr, #anor-ptable td { display: block; width: 100%; }
  #anor-ptable tr { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; padding: 10px 4px; border-bottom: 1px solid var(--border-soft); }
  #anor-ptable td { padding: 0; border: 0; text-align: left !important; }
  #anor-ptable td:first-child { grid-column: 1 / -1; }
  #anor-ptable td[data-l]::before { content: attr(data-l); display: block; font-size: 11.5px; color: var(--muted); }
  #anor-ptable td:last-child { position: absolute; top: 10px; right: 4px; width: auto; }
  #anor-ptable .anor-pc { min-width: 0; padding-right: 64px; }
  .anor-stbl th:last-child, .anor-stbl td:last-child { display: none; }
  .anor-kvs { grid-template-columns: minmax(0, 1fr); }
  .anor-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anor-drawer { width: 100vw; }
}

/* Analytics-03 build additions: links in place of the prototype's buttons (every control is a link with the whole query, swapped in by the script) */
.anor-root.is-loading .anor-body { opacity: .55; transition: opacity .15s .12s; }
.anov-tabs a.anor-vtab { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 6px; font-size: 13px; color: var(--text-2); text-decoration: none; }
.anov-tabs a.anor-vtab[aria-current="true"] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(23, 27, 45, 0.08); }
.anov-tabs a.anor-vtab:hover:not([aria-current="true"]) { color: var(--text); }
.anov-tabs a.anor-vtab:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.anor-mode a[aria-current="page"] { background: var(--indigo-bg); color: var(--indigo); }
.anor-mode a:hover:not([aria-current="page"]) { background: var(--indigo-bg-2); }
.anor-table th .anor-sortlink { display: inline-flex; align-items: center; gap: 3px; color: inherit; text-decoration: none; }
.anor-table th[aria-sort="descending"] .anor-sortlink::after { content: "↓"; color: var(--indigo); }
.anor-table th[aria-sort="ascending"] .anor-sortlink::after { content: "↑"; color: var(--indigo); }
.anor-table th .anor-sortlink:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 3px; }
.anor-table tbody tr.is-plain { cursor: default; } .anor-table tbody tr.is-plain:hover { background: none; }
.anor-bars li { list-style: none; }
.anor-bars li + li .anor-bar { border-top: 1px solid var(--border-soft); border-radius: 0; }
a.anor-bar { color: inherit; text-decoration: none; }
.anor-bar[aria-current="true"] { background: var(--indigo-bg); box-shadow: inset 3px 0 0 var(--indigo); }
.anor-bmeta .is-neutral { color: var(--text-2); font-weight: 600; }
.anor-focus .anor-chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border: 1px solid #C9D2FF; border-radius: 12px;
  background: var(--indigo-bg-2); font-size: 12.5px; font-weight: 600; color: var(--indigo); text-decoration: none; }
.anor-focus .anor-chip .i { font-size: 12px; }
.anor-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(135deg, #E8ECFA, #D5DDF7); color: var(--indigo); }
.anor-ph.is-video { background: linear-gradient(135deg, #F3E6F0, #E6CCE0); color: #8E2F76; }
.anor-ph .i { font-size: 18px; }
.anor-toolbar .anov-custom { flex-basis: 100%; }
.anor-body > .anov-error { margin-bottom: 12px; border-radius: 10px; background: #FDECEF; }
@media (max-width: 768px) {
  .anor-drawer { z-index: 87; }                            /* above the phone's bottom tab bar (z 85), below the MM-41 dialogs (z 90) */
  .anor-scrim { z-index: 86; }
}

/* ---------- Analytics-04 · Content performance (ancp- this screen; reuses A03's Explore crumb, head, thumbnails, format chips, tiles, boxes and scrim, A01's toolbar, summary, ⓘ, legend, chart, table and tooltip classes, po-card / po-chip / po-link / pm-menu / es) — plans/Analytics-04.md, app/static/css/app.css (prototype block prototype/gen/analytics04.css + the build's additions) ---------- */
.ancp-root { --ancp-panel: 392px; }

/* toolbar: the distribution segment and the search field */
.ancp-toolbar { flex-wrap: wrap; row-gap: 10px; }
.ancp-seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.ancp-seg button, .ancp-seg a { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 0; border-radius: 6px; background: none; font: inherit;
  font-size: 13.5px; font-weight: 600; color: var(--text-2); cursor: pointer; text-decoration: none; }
.ancp-seg [aria-pressed="true"], .ancp-seg [aria-current="true"] { background: var(--indigo-bg); color: var(--indigo); }
.ancp-seg button:focus-visible, .ancp-seg a:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.ancp-search { display: inline-flex; align-items: center; gap: 7px; height: 38px; min-width: 190px; padding: 0 10px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--muted); }
.ancp-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; color: var(--text); }
.ancp-search:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.ancp-data.anov-data { margin-left: auto; }

/* the grid: main + the docked detail panel */
.ancp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.ancp-grid.has-panel { grid-template-columns: minmax(0, 1fr) var(--ancp-panel); }
.ancp-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ancp-kpis.anov-kpis { margin-bottom: 10px; }
.ancp-sep { display: flex; align-items: flex-start; gap: 8px; margin: 0 2px 12px; font-size: 12.5px; color: var(--text-2); }
.ancp-sep .i { flex: none; margin-top: 1px; font-size: 15px; color: var(--indigo); }

/* the usages table */
.ancp-usages { padding: 12px 14px; min-width: 0; }
.ancp-usages .po-card-head { flex-wrap: wrap; row-gap: 6px; }
.ancp-sort { margin-left: auto; }
.ancp-selbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 2px 0 8px; padding: 8px 10px; border-radius: 9px; background: var(--indigo-bg-2); }
.ancp-selbar[hidden] { display: none; }
.ancp-selbar b { font-size: 13.5px; color: var(--text); }
.ancp-selbar .po-btn { height: 32px; padding: 0 12px; font-size: 13px; }
.ancp-selnote { font-size: 12.5px; color: var(--amber-text); }
.ancp-table { table-layout: fixed; }
.ancp-table col.c-sel { width: 34px; } .ancp-table col.c-content { width: 24%; } .ancp-table col.c-where { width: 13%; } .ancp-table col.c-dist { width: 9.5%; }
.ancp-table col.c-date { width: 7.5%; } .ancp-table col.c-fmt { width: 7.5%; } .ancp-table col.c-num { width: 9.5%; } .ancp-table col.c-rate { width: 8%; }
.ancp-table col.c-spend { width: 7%; } .ancp-table col.c-act { width: 82px; }
.ancp-table td { overflow: hidden; }
.ancp-table td.num b { display: block; font-weight: 600; color: var(--text); }
.ancp-table td.num small { display: block; font-size: 11.5px; line-height: 1.3; color: var(--muted); white-space: normal; }
.ancp-table td.num.is-na b { color: var(--muted-2); font-weight: 500; }
.ancp-table .anor-pc { min-width: 0; }
.ancp-table .anor-pt small { white-space: nowrap; }
.ancp-where { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ancp-where span { display: flex; flex-direction: column; min-width: 0; }
.ancp-where b { font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ancp-where small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ancp-where .an-pf { flex: none; }
.ancp-dist { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; font-weight: 600; }
.ancp-dist.is-organic { background: #E7F7F0; color: #178A5E; }
.ancp-dist.is-paid { background: var(--indigo-bg); color: var(--indigo); }
.ancp-date { white-space: nowrap; } .ancp-date small { display: block; font-size: 11.5px; color: var(--muted); }
.ancp-check { width: 16px; height: 16px; accent-color: var(--indigo); cursor: pointer; }
.ancp-check:disabled { cursor: not-allowed; opacity: .45; }
.ancp-table tbody tr[aria-selected="true"] { background: var(--indigo-bg); box-shadow: inset 3px 0 0 var(--indigo); }
.ancp-pager { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 8px; }

/* the compare card */
.ancp-compare { padding: 12px 14px; }
.ancp-compare[hidden] { display: none; }
.ancp-compare .po-card-head .anor-x, .ancp-panel .anor-x { margin-left: auto; flex: none; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--text-2); cursor: pointer; }
.ancp-compare .anor-x:hover, .ancp-panel .anor-x:hover { background: var(--track); }
.ancp-compare .anov-chart { height: 200px; }
.ancp-cmpnote { margin: 6px 0 0; font-size: 12.5px; color: var(--text-2); }
.ancp-cmptable { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 12.5px; }
.ancp-cmptable th, .ancp-cmptable td { padding: 5px 8px; border-bottom: 1px solid var(--border-soft); text-align: right; font-variant-numeric: tabular-nums; }
.ancp-cmptable th:first-child, .ancp-cmptable td:first-child { text-align: left; }
.ancp-cmptable th { font-weight: 600; color: var(--text-2); background: #F7F8FB; }
.ancp-cmptable td:first-child i { display: inline-block; width: 10px; height: 3px; margin-right: 6px; border-radius: 2px; vertical-align: middle; }

/* the detail panel (docked ≥ 1400 px, a drawer below) */
.ancp-panel { position: sticky; top: 12px; display: flex; flex-direction: column; max-height: calc(100vh - 24px); padding: 0; overflow: hidden; }
.ancp-panel[hidden] { display: none; }
.ancp-ph { display: flex; align-items: flex-start; gap: 10px; padding: 14px 14px 10px; }
.ancp-ph .anor-thumb { width: 84px; height: 56px; }
.ancp-ph h2 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--text); }
.ancp-ph p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-2); }
.ancp-pact { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 10px; }
.ancp-pact .po-btn { height: 36px; padding: 0 12px; font-size: 13.5px; }
.ancp-ptabs { display: flex; gap: 4px; padding: 0 14px; border-bottom: 1px solid var(--border-soft); }
.ancp-ptabs button, .ancp-ptabs a { height: 36px; padding: 0 10px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--text-2); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.ancp-ptabs [aria-selected="true"], .ancp-ptabs [aria-current="true"] { color: var(--indigo); border-bottom-color: var(--indigo); }
.ancp-ptabs button:focus-visible, .ancp-ptabs a:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
.ancp-pb { flex: 1 1 auto; overflow: auto; padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.ancp-pb h3 { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--text); }
.ancp-pb .anov-chart { height: 150px; }
.ancp-pb .anor-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ancp-use { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 8px; align-items: center; padding: 7px 0; }
.ancp-use + .ancp-use { border-top: 1px solid var(--border-soft); }
.ancp-use b { font-size: 13px; font-weight: 600; color: var(--text); }
.ancp-use small { grid-column: 2; font-size: 12px; color: var(--muted); }
.ancp-use .ancp-uv { grid-row: span 2; text-align: right; font-size: 13.5px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.ancp-use .ancp-uv small { display: block; font-weight: 500; }
.ancp-flag { margin: 0; padding: 9px 11px; border-radius: 9px; background: var(--indigo-bg-2); font-size: 12.5px; color: var(--text-2); }
.ancp-flag.is-amber { background: var(--amber-bg); color: var(--amber-text); }
.ancp-scrim { display: none; }

@media (max-width: 1500px) {
  .ancp-data.anov-data { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 1400px) {
  .ancp-grid.has-panel { grid-template-columns: minmax(0, 1fr); }
  .ancp-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 71; width: min(540px, 100vw); max-height: none; border-radius: 0; box-shadow: -12px 0 32px rgba(23, 27, 45, 0.18); }
  .ancp-scrim:not([hidden]) { display: block; }
  .ancp-table col.c-where { width: 13%; } .ancp-table col.c-date { width: 9%; }
}
@media (max-width: 1200px) {
  .ancp-kpis.anov-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ancp-twrap { overflow-x: auto; }
  .ancp-table { min-width: 980px; }
}
@media (max-width: 768px) {
  .ancp-kpis.anov-kpis { grid-template-columns: minmax(0, 1fr); }
  .ancp-search { flex: 1 1 100%; }
  .ancp-sort { margin-left: 0; }
  .ancp-table { min-width: 0; }
  #ancp-table thead, #ancp-table colgroup { display: none; }
  #ancp-table, #ancp-table tbody, #ancp-table tr, #ancp-table td { display: block; width: 100%; }
  #ancp-table tr { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; padding: 10px 4px 10px 30px; border-bottom: 1px solid var(--border-soft); }
  #ancp-table td { padding: 0; border: 0; text-align: left !important; overflow: visible; }
  #ancp-table td:first-child { position: absolute; top: 12px; left: 4px; width: auto; }
  #ancp-table td:nth-child(2) { grid-column: 1 / -1; }
  #ancp-table td[data-l]::before { content: attr(data-l); display: block; font-size: 11.5px; color: var(--muted); }
  #ancp-table td:last-child { position: absolute; top: 10px; right: 4px; width: auto; }
  #ancp-table .anor-pc { padding-right: 70px; }
  .ancp-panel { width: 100vw; z-index: 87; }
  .ancp-scrim { z-index: 86; }
}

/* Analytics-04 build additions: links in place of the prototype's buttons, the body dimming during a swap (A03's), the pager */
.ancp-root.is-loading .ancp-body { opacity: .55; transition: opacity .15s .12s; }
.ancp-root a.anor-x { display: inline-flex; align-items: center; justify-content: center; color: var(--text-2); text-decoration: none; }
.ancp-root a.anor-x .i { font-size: 18px; }
.ancp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ancp-foot .ancp-pager { margin-top: 8px; font-size: 13px; color: var(--text-2); }
.ancp-selnote.is-muted { color: var(--muted); }
.ancp-selbar .btn-outline.po-btn { height: 30px; }
.ancp-table a.anor-open { display: inline-flex; align-items: center; text-decoration: none; }
.ancp-body > .anov-error { margin-bottom: 12px; border-radius: 10px; background: #FDECEF; }
.ancp-toolbar .anov-custom { flex-basis: 100%; }
.ancp-grid.has-panel .ancp-scrim { display: none; }
@media (max-width: 1400px) {
  .ancp-grid.has-panel .ancp-scrim { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(16, 21, 47, 0.28); }
}
@media (max-width: 768px) {
  .ancp-grid.has-panel .ancp-scrim { z-index: 86; }
}

/* ---------- Analytics-05 · Inbox and community performance (ancm- this screen; reuses A03's Explore crumb, head, bars, table, drawer and about list, A04's segment, A01's toolbar, summary, ⓘ, tabs, legend, chart and tooltip classes, po-card / po-chip / po-link / pm-menu / es) — plans/Analytics-05.md, app/static/css/app.css (prototype block prototype/gen/analytics05.css + the build's additions) ---------- */
.ancm-root { --ancm-closed: #3B5BFD; --ancm-open: #A5B4FC; }
.ancm-toolbar { flex-wrap: wrap; row-gap: 10px; }
.ancm-data.anov-data { margin-left: auto; }
.ancm-kpis.anov-kpis { margin-bottom: 12px; }
.ancm-root .po-card-head h2 { font-size: 16.5px; }

/* the two grids */
.ancm-grid1 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 0.9fr); gap: 14px; align-items: start; margin-bottom: 14px; }
.ancm-grid2 { display: grid; grid-template-columns: minmax(0, 2.55fr) minmax(0, 0.95fr); gap: 14px; align-items: start; }
.ancm-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ancm-vol, .ancm-chans, .ancm-team, .ancm-comm, .ancm-open, .ancm-priv { padding: 12px 14px; min-width: 0; }
.ancm-vol .po-card-head, .ancm-team .po-card-head, .ancm-chans .po-card-head { flex-wrap: wrap; row-gap: 6px; }
.ancm-vtabs.anov-tabs { margin: 0 0 0 auto; }
.ancm-vtabs a { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 6px; font-size: 13px; color: var(--text-2); text-decoration: none; }
.ancm-vtabs a[aria-selected="true"] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(23, 27, 45, 0.08); }
.ancm-vtabs a:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.ancm-legend i.is-closed { background: var(--ancm-closed); height: 10px; width: 10px; border-radius: 2px; }
.ancm-legend i.is-open { background: var(--ancm-open); height: 10px; width: 10px; border-radius: 2px; }
.ancm-chart.anov-chart { height: 220px; }
.ancm-chart .an-col { shape-rendering: crispEdges; }

.ancm-vfoot { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }

/* the first-response buckets and the channel rows (A03's bar rows) */
.ancm-bars { margin-top: 4px; }
.ancm-bars .anor-bar { grid-template-columns: 24px minmax(0, 1fr) auto; width: 100%; border: 0; background: none; font: inherit; text-align: left; color: inherit; }
.ancm-bars .anor-bar:disabled { cursor: default; } .ancm-bars .anor-bar:disabled:hover { background: none; }
.ancm-bars li { list-style: none; }
.ancm-bars .anor-bar > .an-pf, .ancm-bars .anor-bar > .i { color: var(--text-2); }
.ancm-bars .anor-bar.is-zero .anor-bv { color: var(--text-2); font-weight: 600; }
.ancm-bars .anor-bar.is-muted > .i { color: var(--muted); }
.ancm-bucket-title { margin: 8px 0 2px; font-size: 13.5px; font-weight: 700; color: var(--text); }
.ancm-subhead { margin: 10px 6px 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

/* about this data */
.ancm-about .anor-about-list li > .i { font-size: 17px; color: var(--indigo); margin-top: 2px; }
.ancm-about .anor-about-list p small { display: block; color: var(--muted); }
.ancm-about .anor-about-list a { color: var(--indigo); text-decoration: none; } .ancm-about .anor-about-list a:hover { text-decoration: underline; }

/* the assignee table */
.ancm-table { table-layout: fixed; }
.ancm-table col.c-who { width: 21%; } .ancm-table col.c-n { width: 10%; } .ancm-table col.c-med { width: 15%; } .ancm-table col.c-share { width: 16%; }
.ancm-table col.c-act { width: 96px; }
.ancm-table tbody tr { cursor: default; }
.ancm-table tbody tr:hover { background: none; }
.ancm-table tbody tr.is-total td { font-weight: 700; background: #FAFBFC; border-bottom: 0; }
.ancm-who { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.ancm-who b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ancm-av { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--indigo-bg); color: var(--indigo); font-size: 12px; font-weight: 700; }
.ancm-av.is-none { background: var(--track); color: var(--muted); }
.ancm-share { display: flex; align-items: center; gap: 8px; }
.ancm-share b { width: 38px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ancm-share span { flex: 1 1 auto; position: relative; height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; }
.ancm-share span i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--ancm-closed); }
.ancm-evbtn.btn-outline { height: 30px; padding: 0 10px; font-size: 12.5px; font-weight: 600; border-color: #C9D2FF; color: var(--indigo); white-space: nowrap; }

/* side cards */
.ancm-lead { margin: 0 0 8px; font-size: 12.5px; color: var(--text-2); }
.ancm-kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; margin: 0 0 10px; font-size: 13px; }
.ancm-kv dt { color: var(--text-2); } .ancm-kv dd { margin: 0; font-weight: 700; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.ancm-kv dd small { font-weight: 500; color: var(--muted); }
.ancm-kvh { margin: 8px 0 4px; font-size: 12px; font-weight: 700; color: var(--text-2); }
.ancm-comm .po-link { font-size: 13px; }
.ancm-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ancm-links a { display: grid; grid-template-columns: 20px minmax(0, 1fr) 16px; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-soft);
  border-radius: 9px; color: inherit; text-decoration: none; }
.ancm-links a:hover { border-color: #C9D2FF; background: var(--indigo-bg-2); }
.ancm-links a:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.ancm-links a > .i:first-child { font-size: 18px; color: var(--indigo); }
.ancm-links a > .i:last-child { font-size: 15px; color: var(--indigo); }
.ancm-links span { display: flex; flex-direction: column; min-width: 0; }
.ancm-links b { font-size: 13.5px; font-weight: 600; color: var(--text); }
.ancm-links small { font-size: 12px; color: var(--muted); }
.ancm-priv p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.ancm-privnote { display: flex; gap: 6px; margin-top: 8px !important; padding: 8px 10px; border-radius: 8px; background: var(--amber-bg); color: var(--amber-text) !important; }
.ancm-privnote[hidden] { display: none; }
.ancm-privnote .i { flex: none; font-size: 15px; margin-top: 1px; }

/* the evidence drawer (A03's drawer) */
.ancm-ev { list-style: none; margin: 0; padding: 0; }
.ancm-ev li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; align-items: start; padding: 10px 2px; }
.ancm-ev li + li { border-top: 1px solid var(--border-soft); }
.ancm-ev .an-pf { margin-top: 2px; }
.ancm-evh { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.ancm-evh b { font-size: 13.5px; font-weight: 600; color: var(--text); }
.ancm-evh .po-chip { height: 20px; padding: 0 7px; font-size: 11.5px; }
.ancm-evt { grid-column: 2; margin: 0; font-size: 12.5px; color: var(--text-2); }
.ancm-evt small { color: var(--muted); }
.ancm-ev .po-link { grid-row: span 2; align-self: center; font-size: 12.5px; white-space: nowrap; }
.ancm-kindchip { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 10px; font-size: 11.5px; font-weight: 600; background: var(--indigo-bg); color: var(--indigo); }
.ancm-kindchip.is-dm { background: #F6E9F3; color: #8E2F76; }
.ancm-state { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 10px; font-size: 11.5px; font-weight: 600; background: var(--track); color: var(--text-2); }
.ancm-state.is-closed { background: #E7F7F0; color: #178A5E; }
.ancm-evnote { margin: 0; padding: 9px 11px; border-radius: 9px; background: var(--amber-bg); color: var(--amber-text); font-size: 12.5px; }
.ancm-evsub { margin: 0; font-size: 12.5px; color: var(--muted); }

@media (max-width: 1500px) {
  .ancm-data.anov-data { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 1400px) {
  .ancm-grid1 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .ancm-grid1 .ancm-about { grid-column: 1 / -1; }
  .ancm-grid2 { grid-template-columns: minmax(0, 1fr); }
  .ancm-side { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1200px) {
  .ancm-kpis.anov-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ancm-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ancm-table { min-width: 760px; }
}
@media (max-width: 768px) {
  .ancm-kpis.anov-kpis, .ancm-grid1, .ancm-side { grid-template-columns: minmax(0, 1fr); }
  .ancm-vtabs.anov-tabs { margin-left: 0; }
  .ancm-table { min-width: 0; }
  #ancm-ttable thead, #ancm-ttable colgroup { display: none; }
  #ancm-ttable, #ancm-ttable tbody, #ancm-ttable tr, #ancm-ttable td { display: block; width: 100%; }
  #ancm-ttable tr { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; padding: 10px 4px; border-bottom: 1px solid var(--border-soft); }
  #ancm-ttable td { padding: 0; border: 0; text-align: left !important; }
  #ancm-ttable td:first-child { grid-column: 1 / -1; padding-right: 96px; }
  #ancm-ttable td[data-l]::before { content: attr(data-l); display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); }
  #ancm-ttable td:last-child { position: absolute; top: 10px; right: 4px; width: auto; }
  #ancm-ttable td.ancm-sharecell { grid-column: 1 / -1; }
  .ancm-drawer { z-index: 87; }
  .ancm-scrim { z-index: 86; }
}

/* Analytics-05 build additions: links and spans in place of the prototype's buttons, the body dimming during a swap (A03's), the drawer as a link-closed modal */
.ancm-root.is-loading .ancm-body { opacity: .55; transition: opacity .15s .12s; }
.ancm-bars a.anor-bar, .ancm-bars span.anor-bar { display: grid; color: inherit; text-decoration: none; }
.ancm-bars span.anor-bar { cursor: default; } .ancm-bars span.anor-bar:hover { background: none; }
.ancm-root a.anor-x { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: 8px;
  color: var(--text-2); text-decoration: none; }
.ancm-root a.anor-x:hover { background: var(--track); } .ancm-root a.anor-x .i { font-size: 18px; }
.ancm-root a.ancm-evbtn { display: inline-flex; align-items: center; text-decoration: none; }
.ancm-root .anor-dh { align-items: flex-start; }
.ancm-body > .anov-error { margin-bottom: 12px; border-radius: 10px; background: #FDECEF; }
.ancm-toolbar .anov-custom { flex-basis: 100%; }
.ancm-evempty { display: block !important; }
.ancm-about .anor-about-list p small { font-size: 11.5px; }

/* ---------- Analytics-06 · Ads analytics (anad- this screen; reuses A03's Explore crumb, head, table, thumbnails, drawer, boxes, tiles, about and missing lists, A04's segment and search, A01's toolbar, summary, ⓘ, tabs, legend, chart and tooltip classes, po-card / po-chip / po-link / pm-menu / es) — plans/Analytics-06.md, app/static/css/app.css (prototype block prototype/gen/analytics06.css + the build's additions) ---------- */
.anad-root { --anad-meta: #3B5BFD; --anad-google: #EB6834; }
.anad-root .po-card-head h2 { font-size: 16.5px; }

/* the fixed toolbar (the spec's "one fixed toolbar": sticky under the shell) */
.anad-toolbar { position: sticky; top: 8px; z-index: 20; flex-wrap: wrap; row-gap: 10px; box-shadow: 0 2px 8px rgba(23, 27, 45, 0.06); }
.anad-data.anov-data { margin-left: auto; }
.anad-attrmenu.pm-menu { min-width: 320px; padding: 8px; }
.anad-mhead { margin: 2px 8px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.anad-mrow { display: flex; align-items: center; gap: 10px; padding: 7px 8px; font-size: 13px; }
.anad-mrow span { display: flex; flex-direction: column; } .anad-mrow b { font-weight: 600; color: var(--text); } .anad-mrow small { color: var(--text-2); }
.anad-attrmenu [role="menuitem"] small { display: block; font-size: 11.5px; color: var(--muted); }
.anad-mnote { margin: 6px 8px 2px; padding-top: 8px; border-top: 1px solid var(--border-soft); font-size: 12px; color: var(--muted); }
.anov-menu-wrap .pm-menu [role="menuitem"][disabled] small { margin-left: auto; font-size: 11.5px; color: var(--muted); }

/* summaries: the drawing's three */
.anad-kpis.anov-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 14px; }

/* the chart card */
.anad-chartcard, .anad-tablecard, .anad-about, .anad-missing { padding: 12px 14px; min-width: 0; margin-bottom: 14px; }
.anad-chartcard .po-card-head { flex-wrap: wrap; row-gap: 6px; }
.anad-mtabs.anov-tabs { margin: 0 0 0 auto; }
.anad-view.ancp-seg { margin-left: 8px; }
.anad-chart.anov-chart { height: 240px; }

/* the table card */
.anad-tbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 4px 0 10px; }
.anad-ltabs.anov-tabs { margin: 0; }
.anad-chip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border: 1px solid #C9D2FF; border-radius: 13px; background: var(--indigo-bg-2);
  font-size: 12.5px; font-weight: 600; color: var(--indigo); }
.anad-chip[hidden] { display: none; }
.anad-chip button, .anad-chip a { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.anad-chip .i { font-size: 12px; }
.anad-search.ancp-search { margin-left: auto; min-width: 210px; }
.anad-table { table-layout: fixed; min-width: 1180px; }
.anad-table col.c-name { width: 20%; } .anad-table col.c-prov { width: 9.5%; } .anad-table col.c-status { width: 8%; } .anad-table col.c-n { width: 6.5%; }
.anad-table col.c-cpc { width: 6%; } .anad-table col.c-impr { width: 7.5%; } .anad-table col.c-res { width: 11%; } .anad-table col.c-spark { width: 8.5%; }
.anad-table col.c-act { width: 82px; }
.anad-table td { overflow: hidden; }
.anad-table tbody tr.is-total { cursor: default; } .anad-table tbody tr.is-total:hover { background: none; }
.anad-table tbody tr.is-total td { font-weight: 700; background: #FAFBFC; }
.anad-table td.num { font-variant-numeric: tabular-nums; }
.anad-table td.num.is-na { color: var(--muted-2); }
.anad-table .anor-pc { min-width: 0; }
.anad-table .anor-thumb { width: 56px; height: 36px; }
.anad-res b { display: block; font-weight: 600; } .anad-res small { display: block; font-size: 11.5px; line-height: 1.3; color: var(--muted); white-space: normal; }
.anad-res.is-na b { color: var(--muted-2); font-weight: 500; }
.anad-spark { display: block; width: 100%; max-width: 110px; height: 26px; }
.anad-spark .gap { fill: var(--track); }
.anad-chipst { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; font-weight: 600; background: var(--track); color: var(--text-2); }
.anad-chipst.is-green { background: #E7F7F0; color: #178A5E; } .anad-chipst.is-red { background: #FDECEF; color: #B42339; } .anad-chipst.is-blue { background: var(--indigo-bg); color: var(--indigo); }
.anad-open.btn-outline { height: 30px; padding: 0 10px; font-size: 12.5px; font-weight: 600; border-color: #C9D2FF; color: var(--indigo); white-space: nowrap; }

/* the bottom row */
.anad-bottom { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.anad-about .anor-about-list li > .an-pf, .anad-about .anor-about-list li > .i { margin-top: 2px; font-size: 18px; color: var(--indigo); }
.anad-about .anor-about-list p small { display: block; color: var(--muted); }
.anad-about .anor-about-list a { color: var(--indigo); text-decoration: none; }
.anad-missing .anor-miss .i { font-size: 18px; color: var(--text-2); }

/* the drawer */
.anad-dh3 { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--text); }
.anad-dact { display: flex; flex-wrap: wrap; gap: 8px; }
.anad-dact .po-btn { height: 36px; padding: 0 12px; font-size: 13.5px; text-decoration: none; }
.anad-drawer .anov-chart { height: 170px; }
.anad-drawer .anor-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.anad-kids { list-style: none; margin: 0; padding: 0; }
.anad-kids li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 7px 0; font-size: 13px; }
.anad-kids li + li { border-top: 1px solid var(--border-soft); }
.anad-kids b { font-weight: 600; color: var(--text); } .anad-kids small { grid-column: 1 / -1; color: var(--muted); }
.anad-kids span { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 1500px) {
  .anad-data.anov-data { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 1200px) {
  .anad-bottom { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .anad-toolbar { position: static; }
  .anad-kpis.anov-kpis { grid-template-columns: minmax(0, 1fr); }
  .anad-mtabs.anov-tabs { margin-left: 0; overflow-x: auto; max-width: 100%; }
  .anad-view.ancp-seg { margin-left: 0; }
  .anad-search.ancp-search { margin-left: 0; flex: 1 1 100%; }
  .anad-table { min-width: 0; }
  #anad-table thead, #anad-table colgroup { display: none; }
  #anad-table, #anad-table tbody, #anad-table tr, #anad-table td { display: block; width: 100%; }
  #anad-table tr { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; padding: 10px 4px; border-bottom: 1px solid var(--border-soft); }
  #anad-table td { padding: 0; border: 0; text-align: left !important; overflow: visible; }
  #anad-table td:first-child { grid-column: 1 / -1; padding-right: 84px; }
  #anad-table td[data-l]::before { content: attr(data-l); display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); }
  #anad-table td.anad-sparkcell { display: none; }
  #anad-table tr.is-total td:empty { display: none; }
  #anad-table td.anad-rescell { grid-column: 1 / -1; }
  #anad-table td:last-child { position: absolute; top: 10px; right: 4px; width: auto; }
  .anad-drawer .anor-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anad-drawer { z-index: 87; } .anad-scrim { z-index: 86; }
}

/* Analytics-06 build additions: links in place of the prototype's buttons (tabs, rows, the chip), the body dimming during a swap (A03's) */
.anad-root.is-loading .anad-body { opacity: .55; transition: opacity .15s .12s; }
.anad-mtabs a, .anad-ltabs a { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 6px; font-size: 13px; color: var(--text-2); text-decoration: none; }
.anad-mtabs a[aria-selected="true"], .anad-ltabs a[aria-selected="true"] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(23, 27, 45, 0.08); }
.anad-mtabs a:hover:not([aria-selected="true"]), .anad-ltabs a:hover:not([aria-selected="true"]) { color: var(--text); }
.anad-mtabs a:focus-visible, .anad-ltabs a:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.anad-mrow.is-off { opacity: .6; cursor: default; }
.anad-attrmenu a[role="menuitem"] small { display: block; font-size: 11.5px; color: var(--muted); }
.anad-root a.anor-x { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: 8px;
  color: var(--text-2); text-decoration: none; }
.anad-root a.anor-x:hover { background: var(--track); } .anad-root a.anor-x .i { font-size: 18px; }
.anad-root a.anad-open, .anad-drawer a.po-btn { display: inline-flex; align-items: center; text-decoration: none; }
.anad-body > .anov-error { margin-bottom: 12px; border-radius: 10px; background: #FDECEF; }
.anad-toolbar .anov-custom { flex-basis: 100%; }
.anad-chip a { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: inherit; }
.anad-table tbody tr.is-total td[colspan] { font-weight: 400; }
.anad-cmp.po-link { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 13px; font-weight: 600; white-space: nowrap; }

/* ---------- Analytics-07 · Campaign and creative comparison (ancc- this screen; reuses A03's Explore crumb, head, table, thumbnails, drawer, scrim and about list, A04's segment and search, A06's status chips and result cells, A01's toolbar, summary, ⓘ, legend, chart and tooltip classes, po-card / po-link / pm-menu / es) — plans/Analytics-07.md, app/static/css/app.css (prototype block prototype/gen/analytics07.css + the build's additions) ---------- */
.ancc-root .po-card-head h2 { font-size: 16.5px; }
.ancc-head { align-items: flex-start; }
.ancc-head .ancc-custom { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; margin-left: auto; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ancc-head .ancc-custom .i { font-size: 16px; }

/* the toolbar */
.ancc-toolbar { flex-wrap: wrap; row-gap: 10px; }
.ancc-data.anov-data { margin-left: auto; }
.ancc-toolbar .pm-menu [role="menuitem"] { flex-wrap: wrap; }
.ancc-toolbar .pm-menu [role="menuitem"] small { flex-basis: 100%; font-size: 11.5px; color: var(--muted); }
.ancc-toolbar .pm-menu [role="menuitem"][disabled] { opacity: .55; cursor: default; }

/* the top banner (the most severe check) */
.ancc-banner { position: relative; padding-right: 44px; }
.ancc-banner .ancc-hide { position: absolute; top: 8px; right: 8px; display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px;
  background: none; color: inherit; cursor: pointer; text-decoration: none; }
.ancc-banner .ancc-hide:hover { background: rgba(23, 27, 45, .06); }
.ancc-banner.is-block { border-color: #F4B7C1; background: #FDECEF; color: #8F1C2E; }
.ancc-banner.is-block > .i { color: #D6364F; }

/* summaries */
.ancc-kpis.anov-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; }
.ancc-kpis .anov-kpi.is-metric { box-shadow: inset 0 0 0 2px var(--indigo-bg-2, #DDE3FF); }

/* one selection */
.ancc-one { padding: 16px 18px; margin-bottom: 14px; }
.ancc-one h2 { margin: 0 0 4px; font-size: 15.5px; }
.ancc-one p { margin: 0 0 10px; font-size: 13px; color: var(--text-2); }
.ancc-cands { display: flex; flex-wrap: wrap; gap: 8px; }
.ancc-cand { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 12px 4px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface, #fff);
  font: inherit; font-size: 13px; color: var(--text); cursor: pointer; text-decoration: none; }
.ancc-cand:hover { border-color: #C9D2FF; background: var(--indigo-bg); }
.ancc-cand small { color: var(--muted); }

/* trend + bars */
.ancc-row { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 14px; }
.ancc-trend, .ancc-barscard, .ancc-tablecard, .ancc-checks, .ancc-about { padding: 12px 14px; min-width: 0; }
.ancc-trend .po-card-head { flex-wrap: wrap; row-gap: 6px; }
.ancc-view.ancp-seg { margin-left: auto; }
.ancc-chart.anov-chart { height: 240px; }
.ancc-bars { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 14px; }
.ancc-bars li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 6px; align-items: center; }
.ancc-bars .ancc-bmark { grid-row: 1 / 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #F2F4FA; }
.ancc-bars .ancc-bmark .an-pf { width: 24px; height: 24px; }
.ancc-bars .ancc-bname { min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ancc-bars .ancc-bname small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.ancc-bars .ancc-bval { grid-row: 1 / 3; grid-column: 3; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.ancc-bars .ancc-btrack { grid-column: 2; height: 10px; border-radius: 5px; background: var(--track); overflow: hidden; }
.ancc-bars .ancc-bfill { display: block; height: 100%; border-radius: 5px; }
.ancc-bars .is-na .ancc-bval { color: var(--muted-2); font-weight: 500; }

/* the table */
.ancc-tablecard { margin-bottom: 14px; }
.ancc-table { table-layout: fixed; min-width: 1240px; }
.ancc-table col.c-name { width: 16%; } .ancc-table col.c-prov { width: 9.5%; } .ancc-table col.c-obj { width: 8%; } .ancc-table col.c-res { width: 10%; }
.ancc-table col.c-dates { width: 10%; } .ancc-table col.c-spend { width: 6%; } .ancc-table col.c-rep { width: 7%; } .ancc-table col.c-clicks { width: 6.5%; }
.ancc-table col.c-impressions { width: 7%; } .ancc-table col.c-ctr { width: 5.5%; } .ancc-table col.c-cpc { width: 5.5%; } .ancc-table col.c-sample { width: 7%; }
.ancc-table th { white-space: normal; vertical-align: bottom; line-height: 1.25; }
.ancc-table col.c-act { width: 124px; }
.ancc-table td { overflow: hidden; }
.ancc-table td.num { font-variant-numeric: tabular-nums; }
.ancc-table td.num.is-na, .ancc-table td .is-na { color: var(--muted-2); }
.ancc-table th.is-metric, .ancc-table td.is-metric { background: #F5F7FF; }
.ancc-table th.is-metric .ancc-sort { color: var(--indigo); }
.ancc-sort { display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; background: none; font: inherit; font-weight: inherit; color: inherit; cursor: pointer; }
.ancc-sort .i { font-size: 12px; opacity: .35; }
.ancc-table th .ancc-sort { white-space: nowrap; }
.ancc-sort[aria-sort="descending"] .i, .ancc-sort[aria-sort="ascending"] .i { opacity: 1; }
.ancc-sort[aria-sort="ascending"] .i { transform: rotate(180deg); }
th.num .ancc-sort { justify-content: flex-end; width: 100%; text-align: right; }
.ancc-table .ancc-sel { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: 1px; }
.ancc-table .anor-thumb { width: 52px; height: 34px; }
.ancc-table small.ancc-sub { display: block; font-size: 11.5px; color: var(--muted); white-space: normal; line-height: 1.3; }
.ancc-table tbody tr.is-total { cursor: default; } .ancc-table tbody tr.is-total:hover { background: none; }
.ancc-table tbody tr.is-total td { font-weight: 700; background: #FAFBFC; }
.ancc-table tbody tr.is-total td.is-metric { background: #EEF1FF; }
.ancc-act { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.ancc-act .anad-open.btn-outline { text-decoration: none; }
.ancc-rm { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 7px; background: none; color: var(--text-2); cursor: pointer; text-decoration: none; }
.ancc-rm:hover { border-color: #F4B7C1; color: #B42339; background: #FDECEF; }
.ancc-rm[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* checks and about */
.ancc-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.ancc-cklist { list-style: none; margin: 0; padding: 0; }
.ancc-cklist li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 10px; padding: 8px 0; font-size: 13px; }
.ancc-cklist li + li { border-top: 1px solid var(--border-soft); }
.ancc-cklist li > .i { font-size: 17px; margin-top: 1px; }
.ancc-cklist b { font-weight: 600; color: var(--text); }
.ancc-cklist p { grid-column: 2; margin: 0; color: var(--text-2); }
.ancc-cklist .is-ok > .i { color: #178A5E; } .ancc-cklist .is-warn > .i { color: #C27803; } .ancc-cklist .is-block > .i { color: #D6364F; } .ancc-cklist .is-info > .i { color: var(--indigo); }
.ancc-about .anor-about-list li > .an-pf, .ancc-about .anor-about-list li > .i { margin-top: 2px; font-size: 18px; color: var(--indigo); }
.ancc-about .anor-about-list p small { display: block; color: var(--muted); }
.ancc-about .anor-about-list a { color: var(--indigo); text-decoration: none; }

/* the Customize drawer */
.ancc-drawer.anor-drawer { width: min(640px, 100vw); }
.ancc-form { display: grid; gap: 14px; }
.ancc-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.ancc-form legend, .ancc-form .ancc-lab { margin-bottom: 6px; font-size: 12.5px; font-weight: 700; color: var(--text); }
.ancc-levels { display: flex; flex-wrap: wrap; gap: 8px; }
.ancc-levels label { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; cursor: pointer; }
.ancc-levels label:has(input:checked) { border-color: var(--indigo); background: var(--indigo-bg); color: var(--indigo); font-weight: 600; }
.ancc-clist { list-style: none; margin: 0; padding: 0; max-height: 330px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.ancc-clist li + li { border-top: 1px solid var(--border-soft); }
.ancc-clist label { display: grid; grid-template-columns: 20px 48px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; }
.ancc-clist label:hover { background: #F7F8FC; }
.ancc-clist .anor-thumb { width: 48px; height: 32px; }
.ancc-clist b { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ancc-clist small { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.ancc-clist small .an-pf { width: 14px; height: 14px; }
.ancc-clist .ancc-cfig { text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; }
.ancc-clist .ancc-cfig.is-na { color: var(--muted-2); }
.ancc-form select { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font: inherit; font-size: 13.5px; }
.ancc-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.ancc-count { font-size: 12.5px; color: var(--text-2); }
.ancc-count.is-bad { color: #B42339; font-weight: 600; }
.ancc-dfoot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.ancc-dfoot .ancc-count { margin-right: auto; }
.ancc-dfoot .po-btn { height: 38px; padding: 0 16px; font-size: 13.5px; }

@media (max-width: 1500px) {
  .ancc-data.anov-data { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 1200px) {
  .ancc-row, .ancc-bottom { grid-template-columns: minmax(0, 1fr); }
  .ancc-kpis.anov-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .ancc-head { flex-wrap: wrap; }
  .ancc-head .ancc-custom { margin-left: 0; }
  .ancc-view.ancp-seg { margin-left: 0; }
  .ancc-table { min-width: 0; }
  #ancc-table thead, #ancc-table colgroup { display: none; }
  #ancc-table, #ancc-table tbody, #ancc-table tr, #ancc-table td { display: block; width: 100%; }
  #ancc-table tr { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; padding: 10px 4px; border-bottom: 1px solid var(--border-soft); }
  #ancc-table td { padding: 0; border: 0; text-align: left !important; overflow: visible; background: none; }
  #ancc-table td:first-child { grid-column: 1 / -1; padding-right: 84px; }
  #ancc-table td[data-l]::before { content: attr(data-l); display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); }
  #ancc-table td.ancc-rescell { grid-column: 1 / -1; }
  #ancc-table td.ancc-actcell { position: absolute; top: 10px; right: 4px; width: auto; }
  #ancc-table tr.is-total td:empty { display: none; }
  .ancc-two { grid-template-columns: minmax(0, 1fr); }
  .ancc-drawer { z-index: 87; } .ancc-scrim { z-index: 86; }
}
@media (max-width: 480px) {
  .ancc-kpis.anov-kpis { grid-template-columns: minmax(0, 1fr); }
  .ancc-clist label { grid-template-columns: 20px minmax(0, 1fr) auto; }
  .ancc-clist .anor-thumb { display: none; }
}

/* states */
.ancc-root.is-loading .anov-kpi, .ancc-root.is-loading .po-card { position: relative; overflow: hidden; }
.ancc-root.is-loading .anov-kpi > *, .ancc-root.is-loading .po-card > * { visibility: hidden; }
.ancc-root.is-loading .anov-kpi::after, .ancc-root.is-loading .po-card::after { content: ""; position: absolute; inset: 14px; border-radius: 8px;
  background: linear-gradient(90deg, var(--track) 0%, #F3F5F9 50%, var(--track) 100%); background-size: 200% 100%; animation: anov-sh 1.2s linear infinite; }
.ancc-root.is-loading .po-card { min-height: 180px; }
@media (prefers-reduced-motion: reduce) { .ancc-root.is-loading .anov-kpi::after, .ancc-root.is-loading .po-card::after { animation: none; } }

/* Analytics-07 build additions: the head button beside the A03 head, links in place of the prototype's buttons, the body dimming during a swap, the drawer's links */
.ancc-headwrap { position: relative; }
.ancc-headwrap > .ancc-custom { position: absolute; top: 30px; right: 0; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; font-size: 14px;
  font-weight: 600; text-decoration: none; white-space: nowrap; }
.ancc-headwrap > .ancc-custom .i { font-size: 16px; }
.ancc-headwrap .anor-head { padding-right: 240px; }
.ancc-root.is-loading .ancc-body { opacity: .55; transition: opacity .15s .12s; }
.ancc-body > .anov-error { margin-bottom: 12px; border-radius: 10px; background: #FDECEF; }
.ancc-toolbar .anov-custom { flex-basis: 100%; }
.ancc-root a.anor-x { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: 8px;
  color: var(--text-2); text-decoration: none; }
.ancc-root a.anor-x:hover { background: var(--track); } .ancc-root a.anor-x .i { font-size: 18px; }
.ancc-root a.anad-open, .ancc-drawer a.po-btn { display: inline-flex; align-items: center; text-decoration: none; }
.ancc-table a.ancc-sort { text-decoration: none; }
.ancc-chart .grid.is-ref { stroke: var(--muted-2); }
@media (max-width: 768px) {
  .ancc-headwrap > .ancc-custom { position: static; margin: 0 0 12px; }
  .ancc-headwrap .anor-head { padding-right: 0; }
}

/* ---------- Analytics-08 · Funnel analysis (anfu- this screen; reuses A03's Explore crumb, head, table, drawer, boxes, tiles and scrim, A04's segment, A06's status chips, A01's toolbar, summary, ⓘ, legend, chart and tooltip classes, po-card / po-link / pm-menu / es) — plans/Analytics-08.md, app/static/css/app.css (prototype block prototype/gen/analytics08.css + the build's additions) ---------- */
.anfu-root .po-card-head h2 { font-size: 16.5px; }
.anfu-toolbar { flex-wrap: wrap; row-gap: 10px; }
.anfu-data.anov-data { margin-left: auto; }
.anfu-toolbar .pm-menu [role="menuitem"] { flex-wrap: wrap; }
.anfu-toolbar .pm-menu [role="menuitem"] small { flex-basis: 100%; font-size: 11.5px; color: var(--muted); }
.anfu-toolbar .pm-menu [role="menuitem"][disabled] { opacity: .55; cursor: default; }
.anfu-scope.ancp-seg.is-off, .anov-menu-wrap.is-off { opacity: .5; pointer-events: none; }

/* the stage strip: seven cards, an arrow between two */
.anfu-stages { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 18px; margin: 0 0 14px; }
.anfu-stage { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 12px 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface, #fff); font: inherit; text-align: left; color: var(--text); cursor: pointer; text-decoration: none; }
.anfu-stage:hover { border-color: #C9D2FF; box-shadow: 0 2px 8px rgba(23, 27, 45, .06); }
.anfu-stage:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.anfu-stage[aria-current="true"] { border-color: var(--indigo); box-shadow: inset 0 0 0 1px var(--indigo); }
.anfu-stage + .anfu-stage::before { content: ""; position: absolute; left: -15px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  background: no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.anfu-stage .anfu-sl { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.anfu-stage .anfu-sl .i { font-size: 15px; color: var(--indigo); }
.anfu-stage .anfu-sv { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font-size: 24px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.anfu-stage.is-na .anfu-sv b { color: var(--muted-2); font-weight: 600; }
.anfu-stage .anfu-sv .anov-delta { font-size: 12px; }
.anfu-stage .anfu-rate { font-size: 12.5px; color: var(--text); font-weight: 600; min-height: 17px; }
.anfu-stage .anfu-rate small { display: block; font-weight: 400; color: var(--muted); }
.anfu-stage .anfu-rate.is-cross { color: #9A5B00; }
.anfu-stage .anfu-src { display: flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--border-soft); font-size: 11.5px; color: var(--muted); }
.anfu-stage .anfu-src .an-pf { width: 14px; height: 14px; }
.anfu-stage .anfu-src .i { font-size: 13px; }

/* the main grid with the side panel */
.anfu-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; align-items: start; }
.anfu-main, .anfu-side { display: grid; gap: 14px; min-width: 0; }
.anfu-sources, .anfu-ga4, .anfu-trend, .anfu-gaps, .anfu-test, .anfu-cov { padding: 12px 14px; min-width: 0; }
.anfu-table { table-layout: fixed; min-width: 760px; }
.anfu-table th small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); }
.anfu-table td.num { font-variant-numeric: tabular-nums; }
.anfu-table td small { display: inline; margin-left: 4px; font-size: 11.5px; color: var(--muted); }
.anfu-table td.is-na { color: var(--muted-2); }
.anfu-table td.is-na small { display: block; margin: 0; }
.anfu-table tbody tr { cursor: default; }
.anfu-table tbody tr:hover { background: none; }
.anfu-table tbody tr.is-total td { font-weight: 700; background: #FAFBFC; }
.anfu-table tbody tr.is-other td:first-child b { font-weight: 600; color: var(--text-2); }
.anfu-srcname { display: flex; align-items: center; gap: 8px; }
.anfu-srcname .an-pf, .anfu-srcname > .i { width: 18px; height: 18px; font-size: 18px; flex: none; }
.anfu-table .anfu-srcname small { display: block; margin: 0; font-size: 11.5px; color: var(--muted); }

/* the GA4 funnel report */
.anfu-steps { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.anfu-steps li { display: grid; grid-template-columns: 26px minmax(0, 220px) minmax(0, 1fr) 190px; align-items: center; gap: 12px; font-size: 13px; }
.anfu-steps .anfu-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); font-weight: 700; font-size: 12px; }
.anfu-steps b { display: block; font-weight: 600; color: var(--text); } .anfu-steps small { display: block; font-size: 11.5px; color: var(--muted); }
.anfu-steps .anfu-btrack { height: 22px; border-radius: 6px; background: var(--track); overflow: hidden; }
.anfu-steps .anfu-bfill { display: flex; align-items: center; height: 100%; padding-left: 8px; border-radius: 6px; background: #5B74FF; color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.anfu-steps .anfu-sr { text-align: right; font-variant-numeric: tabular-nums; }
.anfu-steps .anfu-sr span { display: block; font-size: 11.5px; color: var(--muted); }
.anfu-ga4note { display: block; margin: 10px 0 6px; padding: 8px 10px; border-radius: 8px; background: #F5F7FF; font-size: 12.5px; color: var(--text-2); }

/* the indexed trend */
.anfu-trend .po-card-head { flex-wrap: wrap; row-gap: 6px; }
.anfu-sboxes { display: flex; flex-wrap: wrap; gap: 12px; margin-left: auto; }
.anfu-sbox { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.anfu-sbox i { width: 12px; height: 3px; border-radius: 2px; }
.anfu-chart.anov-chart { height: 230px; }

/* the side cards */
.anfu-gaplist, .anfu-covlist { list-style: none; margin: 0; padding: 0; }
.anfu-gaplist li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 10px; padding: 9px 0; font-size: 13px; }
.anfu-gaplist li + li { border-top: 1px solid var(--border-soft); }
.anfu-gaplist .anfu-gic { grid-row: 1 / 4; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--indigo-bg); color: var(--indigo); }
.anfu-gaplist .anfu-gic.is-amber { background: #FFF4E0; color: #B45309; } .anfu-gaplist .anfu-gic.is-grey { background: var(--track); color: var(--text-2); }
.anfu-gaplist .anfu-gic .i { font-size: 17px; }
.anfu-gaplist b { font-weight: 600; color: var(--text); } .anfu-gaplist p { margin: 0; color: var(--text-2); } .anfu-gaplist a { font-size: 12.5px; }
.anfu-testtext { margin: 0 0 10px; font-size: 13px; color: var(--text-2); }
.anfu-idea { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 10px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 9px; background: #FAFBFE; }
.anfu-idea svg { width: 64px; height: 48px; }
.anfu-idea b { display: block; font-size: 13px; } .anfu-idea p { margin: 2px 0 0; font-size: 12px; color: var(--text-2); }
.anfu-testform { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.anfu-testform select { width: 100%; min-width: 0; text-overflow: ellipsis; }
.anfu-testform label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--text); }
.anfu-testform select { height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font: inherit; font-size: 13.5px; font-weight: 400; }
.anfu-testform .po-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; font-size: 13.5px; }
.anfu-testmsg { margin: 0; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; }
.anfu-testmsg.is-ok { background: #E7F7F0; color: #14684A; } .anfu-testmsg.is-warn { background: #FFF4E0; color: #8A4B00; } .anfu-testmsg.is-err { background: #FDECEF; color: #8F1C2E; }
.anfu-testmsg a { font-weight: 600; }
.anfu-covlink.po-link { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 13px; font-weight: 600; }
.anfu-covlist li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 8px 0; font-size: 13px; }
.anfu-covlist li + li { border-top: 1px solid var(--border-soft); }
.anfu-covlist .an-pf, .anfu-covlist > li > .i { width: 18px; height: 18px; font-size: 18px; }
.anfu-covlist b { font-weight: 600; } .anfu-covlist small { grid-column: 2 / -1; font-size: 11.5px; color: var(--muted); }

/* the stage drawer */
.anfu-drawer .anov-chart { height: 170px; }
.anfu-drawer .anor-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.anfu-drows { list-style: none; margin: 0; padding: 0; }
.anfu-drows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 7px 0; font-size: 13px; }
.anfu-drows li + li { border-top: 1px solid var(--border-soft); }
.anfu-drows span { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 1500px) {
  .anfu-data.anov-data { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 1400px) {
  .anfu-stages { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .anfu-stage:nth-child(4n + 1)::before { display: none; }
}
@media (max-width: 1200px) {
  .anfu-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .anfu-steps li { grid-template-columns: 26px minmax(0, 1fr) 110px; }
  .anfu-steps .anfu-btrack { grid-column: 2 / -1; grid-row: 2; }
}
@media (max-width: 768px) {
  .anfu-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .anfu-stage::before { display: none; }
  .anfu-sboxes { margin-left: 0; }
  .anfu-drawer { z-index: 87; } .anfu-scrim { z-index: 86; }
  .anfu-drawer .anor-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 430px) {
  .anfu-stages { grid-template-columns: minmax(0, 1fr); }
}

/* states */
.anfu-root.is-loading .anfu-stage, .anfu-root.is-loading .po-card { position: relative; overflow: hidden; }
.anfu-root.is-loading .anfu-stage > *, .anfu-root.is-loading .po-card > * { visibility: hidden; }
.anfu-root.is-loading .anfu-stage::after, .anfu-root.is-loading .po-card::after { content: ""; position: absolute; inset: 12px; border-radius: 8px;
  background: linear-gradient(90deg, var(--track) 0%, #F3F5F9 50%, var(--track) 100%); background-size: 200% 100%; animation: anov-sh 1.2s linear infinite; }
.anfu-root.is-loading .po-card { min-height: 160px; }
@media (prefers-reduced-motion: reduce) { .anfu-root.is-loading .anfu-stage::after, .anfu-root.is-loading .po-card::after { animation: none; } }

/* Analytics-08 build additions: the head button beside the A03 head, the steps and series as links, the body dimming during a swap, the drawer's links */
.anfu-headwrap { position: relative; }
.anfu-headwrap > .anfu-testbtn { position: absolute; top: 30px; right: 0; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; font-size: 14px;
  font-weight: 600; text-decoration: none; white-space: nowrap; }
.anfu-headwrap > .anfu-testbtn .i { font-size: 16px; }
.anfu-headwrap .anor-head { padding-right: 260px; }
.anfu-root.is-loading .anfu-body { opacity: .55; transition: opacity .15s .12s; }
.anfu-body > .anov-error { margin-bottom: 12px; border-radius: 10px; background: #FDECEF; }
.anfu-toolbar .anov-custom { flex-basis: 100%; }
.anfu-toolbar .anov-menu-wrap.is-off { opacity: .5; }
.anfu-root a.anor-x { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: 8px;
  color: var(--text-2); text-decoration: none; }
.anfu-root a.anor-x:hover { background: var(--track); } .anfu-root a.anor-x .i { font-size: 18px; }
a.anfu-stage { color: var(--text); }
a.anfu-sbox { text-decoration: none; }
.anfu-sbox .anfu-cb { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid var(--border); border-radius: 4px; background: #fff; }
.anfu-sbox[aria-checked="true"] .anfu-cb { border-color: var(--indigo); background: var(--indigo); color: #fff; }
.anfu-sbox .anfu-cb .i { font-size: 11px; }
.anfu-defb.anfu-defb { font-size: 13.5px; line-height: 1.3; }
.anfu-chart .grid.is-ref { stroke: var(--muted-2); }
.anfu-testmsg[hidden] { display: none; }
@media (max-width: 768px) {
  .anfu-headwrap > .anfu-testbtn { position: static; margin: 0 0 12px; }
  .anfu-headwrap .anor-head { padding-right: 0; }
}

/* ---------- Analytics-09 · Targeting performance (antg- this screen and its device / placement / search modes; reuses A03's Explore crumb, head, mode control, table and about lists, A04's segment, A06's status chips, A01's toolbar, summary, ⓘ, tabs, legend, chart and tooltip classes, po-card / po-link / pm-menu / es) — plans/Analytics-09.md, prototype/gen/analytics09.css ---------- */
.antg-root .po-card-head h2 { font-size: 16.5px; }
.antg-root .anor-head { align-items: flex-start; }
.antg-root .anor-mode a[aria-current="page"] { background: var(--indigo-bg); color: var(--indigo); }
.antg-about .anor-about-list small { display: block; font-size: 11.5px; color: var(--muted); }
.antg-recon { margin: -4px 0 14px; font-size: 12.5px; color: var(--muted); } .antg-recon.is-warn { color: #7A4A0C; }

/* the toolbar */
.antg-toolbar { flex-wrap: wrap; row-gap: 10px; }
.antg-data.anov-data { margin-left: auto; }
.antg-toolbar .anov-scope .an-pf { width: 16px; height: 16px; }
.antg-menu [role="menuitem"] { flex-wrap: wrap; }
.antg-menu [role="menuitem"] small { flex-basis: 100%; font-size: 11.5px; color: var(--muted); }
.antg-menu [role="menuitem"][disabled] { opacity: .55; cursor: default; }
.antg-banner.is-grey { border-color: var(--border); background: #F7F8FB; }
.antg-banner.is-grey > .i { color: var(--text-2); }

/* summaries */
.antg-kpis.anov-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* chart + suggestions */
.antg-row { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 14px; }
.antg-chartcard, .antg-sugg, .antg-tablecard, .antg-about { padding: 12px 14px; min-width: 0; }
.antg-chartcard .po-card-head { flex-wrap: wrap; row-gap: 6px; }
.antg-view.ancp-seg { margin-left: auto; }
.antg-mtabs.anov-tabs { margin: 0 0 10px; flex-wrap: wrap; }
.antg-bars { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 12px; align-content: start; }
.antg-bars[hidden] { display: none; }
.antg-bars li { display: grid; grid-template-columns: minmax(96px, 180px) minmax(0, 1fr) 76px; column-gap: 12px; align-items: center; }
.antg-bname { min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.antg-btrack { height: 12px; border-radius: 6px; background: var(--track); overflow: hidden; }
.antg-bfill { display: block; height: 100%; border-radius: 6px; }
.antg-bval { text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--text); }
.antg-bars .is-na .antg-bval { color: var(--muted-2); font-weight: 500; }
.antg-chart.anov-chart { height: 220px; }
.antg-more { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.antg-slist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.antg-slist li { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 10px; background: #FBFCFE; }
.antg-slist li .anad-chipst { justify-self: start; }
.antg-slist b { font-size: 14px; color: var(--text); }
.antg-slist p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.antg-slist .po-link, .antg-slist .antg-sbtn { justify-self: start; margin-top: 2px; }
.antg-sbtn.btn-outline { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; font-size: 13px; text-decoration: none; }
.antg-sbtn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.antg-snone { margin: 0; font-size: 13px; color: var(--muted); }
.antg-snote { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.antg-snote .i { flex: none; font-size: 15px; margin-top: 1px; }

/* the table */
.antg-tablecard { margin-bottom: 14px; }
.antg-tablecard .po-card-head { flex-wrap: wrap; row-gap: 6px; }
.antg-grain.ancp-seg { margin-left: auto; }
.antg-twrap { position: relative; }
.antg-table { table-layout: fixed; min-width: 900px; }
.antg-table th, .antg-table td { overflow: hidden; }
.antg-table th:first-child { width: 26%; }
.antg-t-search th:first-child { width: 24%; }
.antg-table th small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); }
.antg-table th.antg-actcol { width: 52px; }
.antg-table tbody tr { cursor: default; }
.antg-sort { color: inherit; text-decoration: none; white-space: nowrap; }
.antg-sort:hover { color: var(--indigo); }
.antg-table th[aria-sort="descending"] .antg-sort::after { content: " ↓"; color: var(--indigo); }
.antg-table th[aria-sort="ascending"] .antg-sort::after { content: " ↑"; color: var(--indigo); }
.antg-table td.num.is-na { color: var(--muted-2); }
.antg-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.antg-badge { flex: none; display: inline-grid; place-items: center; width: 34px; height: 24px; border-radius: 6px; background: var(--indigo-bg); color: var(--indigo);
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; }
.antg-ico { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #F2F4FA; color: var(--text-2); }
.antg-ico .i { font-size: 17px; }
.antg-nt { min-width: 0; }
.antg-nt b { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.antg-nt small { display: block; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.antg-sw { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.antg-table tr.is-other td { color: var(--text-2); background: #FBFCFE; font-style: italic; }
.antg-table tbody tr.is-total td { font-weight: 700; background: #FAFBFC; }
.antg-act { text-align: right; overflow: visible !important; }
.antg-dots { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 7px; background: none;
  color: var(--text-2); cursor: pointer; }
.antg-dots:hover { background: var(--indigo-bg-2); color: var(--indigo); }
.antg-rmenu { right: 0; left: auto; min-width: 280px; }
.antg-rmenu [aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* about */
.antg-aboutgrid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; }
.antg-miss h3 { margin: 4px 0 4px; font-size: 13px; font-weight: 700; color: var(--text); }

/* the change-plan dialog */
.antg-scrim.anor-scrim { display: block; }
.antg-dialog { position: fixed; z-index: 72; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  overflow: auto; padding: 16px 18px; border-radius: 14px; box-shadow: 0 18px 48px rgba(23, 27, 45, 0.24); }
.antg-dhead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.antg-dhead h2 { margin: 0; font-size: 17px; }
.antg-dx { margin-left: auto; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--text-2); text-decoration: none; }
.antg-dx:hover { background: var(--indigo-bg-2); }
.antg-dfacts { margin: 0; display: grid; gap: 8px; }
.antg-dfacts > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
.antg-dfacts dt { font-size: 12.5px; color: var(--muted); }
.antg-dfacts dd { margin: 0; font-size: 13.5px; color: var(--text); line-height: 1.45; }
.antg-dnote { display: flex; gap: 8px; margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--indigo-bg-2); font-size: 12.5px; color: var(--text-2); }
.antg-dnote .i { flex: none; font-size: 16px; color: var(--indigo); }
.antg-dmsg { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 9px 12px; border-radius: 10px; font-size: 13px; }
.antg-dmsg[hidden] { display: none; }
.antg-dmsg.is-ok { background: #E7F7F0; color: #145C40; } .antg-dmsg.is-warn { background: #FFF8EC; color: #7A4A0C; } .antg-dmsg.is-err { background: #FDECEF; color: #8F1C2E; }
.antg-dfoot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.antg-dfoot .po-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; text-decoration: none; }
.antg-dview { margin: 8px 0 0; font-size: 12px; color: var(--muted); text-align: right; }

/* loading (the body dims and each card shows a skeleton while a swap loads) */
.antg-root.is-loading .antg-body { opacity: .55; transition: opacity .15s; }
.antg-root.is-loading .anov-kpi, .antg-root.is-loading .po-card { position: relative; overflow: hidden; }

@media (max-width: 1200px) {
  .antg-row, .antg-aboutgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .antg-root .anor-mode { max-width: 100%; overflow-x: auto; }
  .antg-root .anor-mode a { flex: none; }
  .antg-kpis.anov-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .antg-bars li { grid-template-columns: minmax(0, 1fr) 70px; row-gap: 4px; }
  .antg-bars .antg-btrack { grid-column: 1 / -1; grid-row: 2; }
  .antg-table { min-width: 0; table-layout: auto; }
  .antg-table thead { display: none; }
  .antg-table, .antg-table tbody { display: block; width: 100%; }
  .antg-table td { display: block; width: auto; }
  .antg-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; padding: 10px 4px; border-bottom: 1px solid var(--border-soft); position: relative; }
  .antg-table td { padding: 0; border: 0; text-align: left !important; }
  .antg-table td:first-child { grid-column: 1 / -1; padding-right: 40px; }
  .antg-table td[data-l]::before { content: attr(data-l); display: block; font-size: 11px; color: var(--muted); }
  .antg-table td.antg-act { position: absolute; top: 10px; right: 4px; width: auto; }
  .antg-table td:empty { display: none; }
  .antg-table tr.is-total td:first-child { padding-right: 0; }
}
@media (max-width: 430px) {
  .antg-kpis.anov-kpis { grid-template-columns: minmax(0, 1fr); }
  .antg-dfacts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ---------- Analytics-10 · Experiment results (anex- this screen; reuses A03's Explore crumb and head, A06's status chips, A09's dialog note, A01's toolbar, ⓘ, legend, chart and tooltip classes, po-card / po-link / pm-menu / es) — plans/Analytics-10.md, prototype/gen/analytics10.css ---------- */
.anex-root .po-card-head h2 { font-size: 16.5px; }
.anex-headwrap { position: relative; }
.anex-headwrap > .anex-headbtn { position: absolute; top: 30px; right: 0; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; font-size: 14px;
  font-weight: 600; white-space: nowrap; }
.anex-headwrap > .anex-headbtn .i { font-size: 16px; }
.anex-headwrap .anor-head { padding-right: 280px; }

/* the toolbar */
.anex-toolbar { flex-wrap: wrap; row-gap: 10px; }
.anex-pick b { display: inline-block; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.anex-menu { min-width: 340px; }
.anex-menu [role="menuitem"] { flex-wrap: wrap; } .anex-menu [role="menuitem"] small { flex-basis: 100%; font-size: 11.5px; color: var(--muted); }
.anex-run { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 4px 12px; border: 1px solid var(--border); border-radius: 10px; }
.anex-run .i { font-size: 18px; color: var(--indigo); }
.anex-run b { display: block; font-size: 14px; color: var(--text); } .anex-run small { display: block; font-size: 12px; color: var(--muted); }
.anex-data.anov-data { margin-left: auto; }
.anex-banner.is-grey { border-color: var(--border); background: #F7F8FB; } .anex-banner.is-grey > .i { color: var(--text-2); }
.anex-banner.is-green { border-color: #BDE8D5; background: #EEFAF4; } .anex-banner.is-green > .i { color: #178A5E; }
.anex-banner.is-red { border-color: #F4B7C1; background: #FDECEF; } .anex-banner.is-red > .i { color: #D6364F; }
.anex-empty { margin-top: 4px; }

/* row 1 */
.anex-row1 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 14px; }
.anex-hyp, .anex-result, .anex-take, .anex-trend, .anex-checks, .anex-time, .anex-steps { padding: 12px 16px; min-width: 0; }
.anex-mid, .anex-side { display: grid; gap: 14px; min-width: 0; }
.anex-htext { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--text); }
.anex-kvs { margin: 0; display: grid; }
.anex-kvs > div { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-top: 1px solid var(--border-soft); }
.anex-kvs dt { font-size: 12.5px; color: var(--muted); }
.anex-kvs dd { margin: 0; font-size: 13px; color: var(--text); line-height: 1.45; }
.anex-kvs dd small { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.anad-chipst.is-amber, .anex-verdict.is-amber { background: #FFF1DB; color: #9A5B06; }
.anad-chipst.is-grey { background: var(--track); color: var(--text-2); }
.anex-big { margin: 2px 0 0; font-size: 30px; font-weight: 700; line-height: 1.2; color: var(--text); font-variant-numeric: tabular-nums; }
.anex-rsub { margin: 2px 0 0; font-size: 13px; color: var(--text-2); }
.anex-ci { margin: 6px 0 0; font-size: 13.5px; font-weight: 600; color: var(--text); }
.anex-src { display: flex; gap: 6px; align-items: flex-start; margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.anex-src .i { flex: none; font-size: 14px; margin-top: 1px; }
.anex-rnone { margin: 0; font-size: 13px; color: var(--muted); }
.anex-arms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.anex-arm { padding: 12px 14px; min-width: 0; border-radius: 12px; }
.anex-arm.is-na { opacity: .7; }
.anex-ahead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.anex-abadge { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--c) 14%, #fff);
  color: var(--c); font-weight: 700; }
.anex-ahead b { display: block; font-size: 14px; color: var(--text); } .anex-ahead small { display: block; font-size: 12px; color: var(--muted); }
.anex-afig { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; }
.anex-afig dt { font-size: 11.5px; color: var(--muted); }
.anex-afig dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anex-afig .is-kpi dd { color: var(--indigo); }
.anex-aci { margin: 6px 0 0; font-size: 11.5px; color: var(--muted); }
.anex-ad { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.anex-ad img, .anex-adph { width: 64px; height: 48px; border-radius: 8px; object-fit: cover; background: #F2F4FA; }
.anex-adph { display: grid; place-items: center; color: var(--muted-2); }
.anex-ad b { display: block; font-size: 12.5px; color: var(--text); } .anex-ad small { display: block; font-size: 11.5px; color: var(--muted); }
.anex-ad span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11.5px; color: var(--text-2); }
.anex-tlist { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.anex-chart.anov-chart { height: 180px; }

/* row 2 */
.anex-row2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; margin-bottom: 14px; }
.anex-clist, .anex-tl, .anex-slist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.anex-clist li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.anex-clist li > .i { font-size: 19px; margin-top: 1px; }
.anex-clist li.is-ok > .i { color: #12B981; } .anex-clist li.is-warn > .i { color: var(--amber); } .anex-clist li.is-info > .i { color: var(--indigo); } .anex-clist li.is-bad > .i { color: #D6364F; }
.anex-clist b, .anex-tl b, .anex-slist b { display: block; font-size: 13.5px; color: var(--text); }
.anex-clist small, .anex-tl small, .anex-slist small { display: block; font-size: 12px; line-height: 1.45; color: var(--muted); }
.anex-tl li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; position: relative; }
.anex-tld { font-size: 12.5px; color: var(--text-2); }
.anex-tl li > div { position: relative; padding-left: 16px; }
.anex-tl li > div::before { content: ""; position: absolute; left: 0; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--indigo); }
.anex-slist li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; }
.anex-sn { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); font-weight: 700; font-size: 13px; }
.anex-sbtn.btn-outline { display: inline-flex; align-items: center; gap: 6px; height: 32px; margin-top: 6px; padding: 0 12px; font-size: 13px; text-decoration: none; }
.anex-sbtn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.anex-slist .po-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 13px; }
.anex-smsg { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; }
.anex-smsg.is-ok { color: #145C40; } .anex-smsg.is-warn { color: #7A4A0C; } .anex-smsg.is-err { color: #8F1C2E; }

/* the select-variant dialog */
.anex-scrim.anor-scrim { display: block; }
.anex-dialog { position: fixed; z-index: 72; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
  padding: 16px 18px; border-radius: 14px; box-shadow: 0 18px 48px rgba(23, 27, 45, 0.24); }
.anex-dhead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.anex-dhead h2 { margin: 0; font-size: 17px; }
.anex-dx { margin-left: auto; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--text-2); text-decoration: none; }
.anex-opts { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.anex-opt { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.anex-opt.is-off { cursor: default; opacity: .6; }
.anex-opt b { display: block; font-size: 13.5px; color: var(--text); } .anex-opt small { display: block; font-size: 12px; color: var(--muted); }
.anex-ack { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #FFF8EC; font-size: 13px; color: #7A4A0C; }
.anex-dnote.antg-dnote { display: flex; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--indigo-bg-2); font-size: 12.5px; color: var(--text-2); }
.anex-dnote .i { flex: none; font-size: 16px; color: var(--indigo); }
.anex-dmsg { margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; font-size: 13px; }
.anex-dmsg[hidden] { display: none; }
.anex-dmsg.is-ok { background: #E7F7F0; color: #145C40; } .anex-dmsg.is-warn { background: #FFF8EC; color: #7A4A0C; } .anex-dmsg.is-err { background: #FDECEF; color: #8F1C2E; }
.anex-dfoot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.anex-dfoot .po-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; text-decoration: none; }

.anex-root.is-loading .anex-body { opacity: .55; transition: opacity .15s; }

@media (max-width: 1400px) { .anex-row1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } .anex-side { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; } }
@media (max-width: 1200px) {
  .anex-row1, .anex-row2 { grid-template-columns: minmax(0, 1fr); }
  .anex-side { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .anex-headwrap > .anex-headbtn { position: static; margin: 0 0 12px; }
  .anex-headwrap .anor-head { padding-right: 0; }
  .anex-arms { grid-template-columns: minmax(0, 1fr); }
  .anex-kvs > div { grid-template-columns: 96px minmax(0, 1fr); }
  .anex-pick b { max-width: 180px; }
  .anex-data.anov-data { margin-left: 0; }
}

/* Analytics-09 / 10 build additions: the body dims during a swap, the inline error strip */
.antg-body > .anov-error, .anex-body > .anov-error { margin-bottom: 12px; border-radius: 10px; background: #FDECEF; }
.antg-toolbar .anov-custom { flex-basis: 100%; }

/* ---------- Analytics-11 · Change impact (anci- this screen; reuses A03's Explore crumb and head, A06's status chips, A01's toolbar, ⓘ, legend, chart and tooltip classes, A03's table, A04's segmented control, A09's dialog note, po-card / po-link / pm-menu / es) — plans/Analytics-11.md, prototype/gen/analytics11.css ---------- */
.anci-root .po-card-head h2 { font-size: 16px; }
.anci-headwrap { position: relative; }
.anci-headacts { position: absolute; top: 30px; right: 0; display: flex; align-items: center; gap: 8px; }
.anci-headacts .anci-open { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.anci-headacts .anci-more { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; }
.anci-headacts .anci-moremenu { right: 0; left: auto; min-width: 280px; }
.anci-headacts .anci-moremenu [role="menuitem"] { display: flex; align-items: center; gap: 8px; }
.anci-headacts .anci-moremenu [aria-disabled="true"] { opacity: .5; pointer-events: none; }
.anci-headwrap .anor-head { padding-right: 360px; }

/* the toolbar */
.anci-toolbar { flex-wrap: wrap; row-gap: 10px; }
.anci-pick b { display: inline-block; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.anci-menu { min-width: 360px; }
.anci-menu [role="menuitem"] { flex-wrap: wrap; } .anci-menu [role="menuitem"] small { flex-basis: 100%; font-size: 11.5px; color: var(--muted); }
.anci-wins a { text-decoration: none; }
.anci-winbox { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 4px 12px; border: 1px solid var(--border); border-radius: 10px; }
.anci-winbox .i { font-size: 18px; color: var(--indigo); }
.anci-winbox b { display: block; font-size: 13.5px; color: var(--text); } .anci-winbox small { display: block; font-size: 12px; color: var(--muted); }
.anci-data.anov-data { margin-left: auto; }
.anci-banner.is-grey { border-color: var(--border); background: #F7F8FB; } .anci-banner.is-grey > .i { color: var(--text-2); }
.anci-empty { margin-top: 4px; }

/* the summary cards */
.anci-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.anci-card { padding: 12px 16px; border-radius: 12px; min-width: 0; }
.anci-chead { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.anci-chead h2 { margin: 0; font-size: 15px; }
.anci-cgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.05fr); gap: 10px; align-items: stretch; }
.anci-cgrid > div:not(.anci-diff) small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anci-cgrid > div:not(.anci-diff) b { display: block; margin-top: 2px; font-size: 22px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.anci-cgrid > div:nth-child(2) { padding-left: 10px; border-left: 1px solid var(--border-soft); }
.anci-diff { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #F4F5F9; min-width: 0; }
.anci-mark { flex: none; font-size: 20px; line-height: 1; color: var(--text-2); }
.anci-diff b { display: block; font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.anci-diff small { display: block; font-size: 12px; color: var(--muted); }

/* row 2: the chart and the details */
.anci-row2 { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 14px; }
.anci-chartcard, .anci-details, .anci-tablecard, .anci-checks, .anci-time, .anci-comp { padding: 12px 16px; min-width: 0; }
.anci-chartcard .po-card-head { flex-wrap: wrap; row-gap: 6px; }
.anci-mtabs.anov-tabs { margin: 0 0 0 auto; }
.anci-mtabs a { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 6px; font-size: 12.5px; color: var(--text-2); text-decoration: none; white-space: nowrap; }
.anci-mtabs a[aria-current="true"] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(23, 27, 45, 0.08); }
.anci-mtabs a:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.anci-legend { flex-wrap: wrap; }
.anci-sw { display: inline-block; width: 12px; height: 10px; border-radius: 2px; }
.anci-sw.is-a { background: #E8ECFF; } .anci-sw.is-b { background: #E6F6EF; } .anci-sw.is-c { background: #FFF1DB; border: 1px dashed #D08A1E; }
.anci-chart.anov-chart { height: 230px; }
.anov-chart .spanband.is-a { fill: #EEF1FF; opacity: .75; } .anov-chart .spanband.is-b { fill: #E9F7F1; opacity: .8; } .anov-chart .spanband.is-c { fill: #FFF3E0; opacity: .9; }
.anov-chart .spantext { font-size: 11px; fill: var(--muted); }
.anov-chart .mark { stroke: #3B5BFD; stroke-width: 1.4; }
.anov-chart .marktext { font-size: 11.5px; font-weight: 600; fill: #3B5BFD; }
.anci-kvs { margin: 0; display: grid; }
.anci-kvs > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-top: 1px solid var(--border-soft); }
.anci-kvs > div:first-child { border-top: 0; }
.anci-kvs dt { font-size: 12.5px; color: var(--muted); }
.anci-kvs dd { margin: 0; font-size: 13px; color: var(--text); line-height: 1.45; min-width: 0; overflow-wrap: anywhere; }
.anci-kvs dd ul { margin: 0; padding-left: 16px; }
.anci-fu { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; align-items: start; margin: 0 0 8px; }
.anci-fu small { display: block; font-size: 12px; color: var(--muted); }
.anci-fudone.btn-outline { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; font-size: 12.5px; }
.anci-none { color: var(--muted); }
.anci-msg { margin: 6px 0 0; font-size: 12.5px; } .anci-msg.is-ok { color: #145C40; } .anci-msg.is-warn { color: #7A4A0C; } .anci-msg.is-err { color: #8F1C2E; }

/* row 3: the table, the checks, the timeline and the completeness */
.anci-row3 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 14px; }
.anci-mid, .anci-side { display: grid; gap: 14px; min-width: 0; }
.anci-table th small, .anci-table td small { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); }
.anci-table th { white-space: normal; }
.anci-table th[scope="row"] { background: none; font-weight: 400; min-width: 150px; } .anci-table th[scope="row"] b { font-weight: 600; color: var(--text); }
.anci-table td small.is-note { color: #7A4A0C; }
.anci-tdiff { display: inline-flex; gap: 4px; align-items: baseline; white-space: nowrap; font-weight: 600; color: var(--text); }
.anci-tdiff > span { color: var(--text-2); }
.anci-clist, .anci-tl, .anci-plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.anci-clist li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.anci-clist li > .i { font-size: 19px; margin-top: 1px; }
.anci-clist li.is-ok > .i { color: #12B981; } .anci-clist li.is-warn > .i { color: var(--amber); } .anci-clist li.is-info > .i { color: var(--indigo); }
.anci-clist b, .anci-tl b, .anci-plist b { display: block; font-size: 13.5px; color: var(--text); }
.anci-clist small, .anci-tl small, .anci-plist small { display: block; font-size: 12px; line-height: 1.45; color: var(--muted); }
.anci-tl li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; }
.anci-tld { font-size: 12.5px; color: var(--text-2); }
.anci-tl li > div { position: relative; padding-left: 16px; min-width: 0; }
.anci-tl li > div::before { content: ""; position: absolute; left: 0; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); }
.anci-tl li.is-change > div::before { background: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); } .anci-tl li.is-change .anci-tld { color: var(--indigo); font-weight: 600; }
.anci-tl li.is-warn > div::before { background: var(--amber); } .anci-tl li.is-info > div::before { background: #9CA8F5; }
.anci-plist li { display: grid; grid-template-columns: 22px minmax(0, 1fr) max-content; gap: 10px; align-items: start; }
.anci-plist li > div { min-width: 0; }
.anci-plist .an-pf { width: 20px; height: 20px; margin-top: 1px; }
.anci-pstate { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #E7F7F0; color: #145C40; white-space: nowrap; }
.anci-plist li.is-warn .anci-pstate { background: #FFF1DB; color: #9A5B06; } .anci-plist li.is-planned .anci-pstate, .anci-plist li.is-info .anci-pstate { background: var(--track); color: var(--text-2); }

/* the follow-up dialog */
.anci-scrim.anor-scrim { display: block; }
.anci-dialog { position: fixed; z-index: 72; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
  padding: 16px 18px; border-radius: 14px; box-shadow: 0 18px 48px rgba(23, 27, 45, 0.24); }
.anci-dhead { display: flex; align-items: center; gap: 10px; }
.anci-dhead h2 { margin: 0; font-size: 17px; }
.anci-dx { margin-left: auto; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--text-2); text-decoration: none; }
.anci-dsub { margin: 4px 0 12px 42px; font-size: 13px; color: var(--muted); }
.anci-field { display: grid; gap: 4px; margin-bottom: 10px; font-size: 13px; color: var(--text-2); min-width: 0; }
.anci-field > span { font-weight: 600; color: var(--text); }
.anci-field textarea, .anci-field select, .anci-field input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13.5px; color: var(--text); background: var(--surface); }
.anci-count { justify-self: end; font-size: 11.5px; color: var(--muted); }
.anci-frow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.anci-dnote.antg-dnote { display: flex; gap: 8px; margin: 4px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--indigo-bg-2); font-size: 12.5px; color: var(--text-2); }
.anci-dnote .i { flex: none; font-size: 16px; color: var(--indigo); }
.anci-dmsg { margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; font-size: 13px; }
.anci-dmsg[hidden] { display: none; }
.anci-dmsg.is-ok { background: #E7F7F0; color: #145C40; } .anci-dmsg.is-warn { background: #FFF8EC; color: #7A4A0C; } .anci-dmsg.is-err { background: #FDECEF; color: #8F1C2E; }
.anci-dfoot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.anci-dfoot .po-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; text-decoration: none; }

.anci-root.is-loading .anci-body { opacity: .55; transition: opacity .15s; }

@media (max-width: 1400px) { .anci-row3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .anci-side { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; } }
@media (max-width: 1200px) {
  .anci-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anci-row2, .anci-row3 { grid-template-columns: minmax(0, 1fr); }
  .anci-side { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .anci-headacts { position: static; margin: 0 0 12px; }
  .anci-headwrap .anor-head { padding-right: 0; }
  .anci-cards { grid-template-columns: minmax(0, 1fr); }
  .anci-cgrid > div:not(.anci-diff) b { font-size: 19px; }
  .anci-kvs > div { grid-template-columns: 96px minmax(0, 1fr); }
  .anci-pick b { max-width: 170px; }
  .anci-data.anov-data { margin-left: 0; }
  .anci-frow { grid-template-columns: minmax(0, 1fr); }
  .anci-mtabs.anov-tabs { margin-left: 0; overflow-x: auto; max-width: 100%; }
  .anci-menu { min-width: 0; width: calc(100vw - 48px); }
}
/* ---------- Analytics-12 · Scenario planner (ansc- this screen; reuses A03's Explore crumb and head, A06's status chips, A01's toolbar, ⓘ, legend, chart and tooltip classes, A03's table, A04's segmented control, A09's note, po-card / po-link / pm-menu / es) — plans/Analytics-12.md, prototype/gen/analytics12.css ---------- */
.ansc-root .po-card-head { flex-wrap: wrap; row-gap: 6px; }
.ansc-root .po-card-head h2 { font-size: 16px; }
.ansc-toolbar { flex-wrap: wrap; row-gap: 10px; }
.ansc-pick b { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.ansc-menu { min-width: 320px; }
.ansc-menu [role="menuitem"] { flex-wrap: wrap; } .ansc-menu [role="menuitem"] small { flex-basis: 100%; font-size: 11.5px; color: var(--muted); }
.ansc-hist { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.ansc-toolbar .ancp-seg a { text-decoration: none; }
.ansc-periodbox { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 4px 12px; border: 1px solid var(--border); border-radius: 10px; }
.ansc-periodbox .i { font-size: 18px; color: var(--indigo); }
.ansc-periodbox b { display: block; font-size: 13.5px; color: var(--text); } .ansc-periodbox small { display: block; font-size: 12px; color: var(--muted); }
.ansc-data.anov-data { margin-left: auto; }
.ansc-banner.is-grey { border-color: var(--border); background: #F7F8FB; } .ansc-banner.is-grey > .i { color: var(--text-2); }
.ansc-empty { margin-top: 4px; }

/* row 1 */
.ansc-row1 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; margin-bottom: 14px; }
.ansc-cur, .ansc-prop, .ansc-sens, .ansc-asm, .ansc-next { padding: 12px 16px; min-width: 0; }
.ansc-sub { margin: -2px 0 10px; font-size: 13px; color: var(--muted); }
.ansc-alloc { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px; border: 1px solid var(--border-soft); border-radius: 12px; }
.ansc-donut { position: relative; width: 120px; height: 120px; border-radius: 50%; }
.ansc-donut > span { position: absolute; inset: 22px; display: grid; place-content: center; text-align: center; border-radius: 50%; background: var(--surface); }
.ansc-donut b { font-size: 20px; color: var(--text); } .ansc-donut small { font-size: 11.5px; color: var(--muted); }
.ansc-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.ansc-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 38px; gap: 8px; align-items: center; }
.ansc-legend li > i { width: 10px; height: 10px; border-radius: 50%; }
.ansc-legend b { display: block; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ansc-legend li small { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); }
.ansc-legend .an-pf { width: 12px; height: 12px; }
.ansc-legend em { font-style: normal; font-size: 13.5px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.ansc-share { justify-content: flex-end; text-align: right; font-variant-numeric: tabular-nums; }
.ansc-inputs label { min-width: 0; cursor: pointer; }
.ansc-money { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; height: 32px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.ansc-money input { width: 58px; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); text-align: right; -moz-appearance: textfield; }
.ansc-money input::-webkit-outer-spin-button, .ansc-money input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ansc-money:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.ansc-money input:focus { outline: none; }
.ansc-keep { display: flex; gap: 8px; align-items: center; margin: 10px 0 0; font-size: 12.5px; color: var(--text-2); }
.ansc-other { display: flex; gap: 6px; margin: 8px 0 0; font-size: 12px; color: var(--muted); } .ansc-other .i { flex: none; font-size: 14px; }
.ansc-h3 { margin: 14px 0 6px; font-size: 14px; color: var(--text); } .ansc-h3 small { font-weight: 400; font-size: 12px; color: var(--muted); }
.ansc-kv { margin: 0; display: grid; }
.ansc-kv > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--border-soft); }
.ansc-kv dt { font-size: 13px; color: var(--text); min-width: 0; } .ansc-kv dt small { display: block; font-size: 11.5px; color: var(--muted); }
.ansc-kv dd { margin: 0; text-align: right; font-size: 14px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ansc-kv dd small { display: block; font-size: 10.5px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.ansc-kv.is-proj dd small { color: #9A5B06; }
.ansc-kv dd.is-na { color: var(--muted); font-weight: 500; }
.ansc-foot { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.ansc-note { display: flex; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--indigo-bg-2); font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.ansc-note > .i { flex: none; font-size: 16px; color: var(--indigo); }
.ansc-note.is-warn { background: #FFF8EC; color: #7A4A0C; } .ansc-note.is-warn > .i { color: var(--amber); }
.ansc-note[hidden] { display: none; }
.ansc-caps { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 10px; }
.ansc-caps > .i { font-size: 17px; color: #12B981; }
.ansc-caps b { display: block; font-size: 13px; color: var(--text); } .ansc-caps small { display: block; font-size: 12px; color: var(--muted); }
.ansc-caps.is-over { border-color: #F4B7C1; background: #FDECEF; } .ansc-caps.is-over > .i { color: #D6364F; }
.ansc-chart.anov-chart { height: 220px; }
.ansc-range { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; margin-top: 10px; padding: 12px; border-radius: 10px; background: var(--indigo-bg-2); }
.ansc-range > .i { font-size: 18px; color: var(--indigo); }
.ansc-range b { display: block; font-size: 14px; color: var(--indigo); } .ansc-range small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-2); }

/* row 2 */
.ansc-row2 { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 14px; }
.ansc-afields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.ansc-afields label { display: grid; gap: 4px; font-size: 12.5px; color: var(--text-2); min-width: 0; }
.ansc-pct { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; color: var(--muted); }
.ansc-pct input { width: 100%; min-width: 0; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); }
.ansc-pct:focus-within { border-color: var(--indigo); } .ansc-pct input:focus { outline: none; }
.ansc-afields select { height: 34px; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; background: var(--surface); color: var(--text); }
.ansc-afmsg { margin: 0 0 8px; font-size: 12.5px; color: #7A4A0C; }
.ansc-rules { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 4px; font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.ansc-table th[scope="row"] { background: none; font-weight: 600; white-space: normal; }
.ansc-table th[scope="row"] .an-pf { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; }
.ansc-name { display: grid; gap: 4px; font-size: 12.5px; color: var(--text-2); }
.ansc-name input { height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; color: var(--text); }
.ansc-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.ansc-acts .po-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; font-size: 14px; }
.ansc-why { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.ansc-msg { margin: 8px 0 0; padding: 9px 12px; border-radius: 10px; font-size: 13px; }
.ansc-msg[hidden], .ansc-why[hidden] { display: none; }
.ansc-msg.is-ok { background: #E7F7F0; color: #145C40; } .ansc-msg.is-warn { background: #FFF8EC; color: #7A4A0C; } .ansc-msg.is-err { background: #FDECEF; color: #8F1C2E; }
.ansc-usenote, .ansc-used { display: flex; gap: 8px; margin: 12px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.ansc-usenote .i, .ansc-used .i { flex: none; font-size: 15px; color: var(--indigo); } .ansc-used .i { color: #12B981; }
.ansc-safe.antg-dnote { display: flex; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--indigo-bg-2); font-size: 12.5px; color: var(--text-2); }
.ansc-safe .i { flex: none; font-size: 16px; color: var(--indigo); }

/* A01's focused reports card names A11 / A12 */
.anov-rep-more { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }

.ansc-root.is-loading .ansc-body { opacity: .55; transition: opacity .15s; }

@media (max-width: 1400px) { .ansc-row1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ansc-sens { grid-column: 1 / -1; } .ansc-afields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1200px) { .ansc-row1, .ansc-row2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) {
  .ansc-alloc { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .ansc-legend { width: 100%; }
  .ansc-pick b { max-width: 150px; }
  .ansc-data.anov-data { margin-left: 0; }
  .ansc-afields { grid-template-columns: minmax(0, 1fr); }
  .ansc-acts { grid-template-columns: minmax(0, 1fr); }
  .ansc-menu { min-width: 0; width: calc(100vw - 48px); }
}

/* ---------- Analytics-13 · Marketing profitability (anpf- this screen; reuses A03's Explore crumb and head, A01's toolbar, period menu, custom range, banner, ⓘ, flag and tooltip classes, A03's table, A04's segmented control and "where" cell, A06's status chips, po-card / po-link / pm-menu / es) — plans/Analytics-13.md, prototype/gen/analytics13.css ---------- */
.anpf-root .po-card-head { flex-wrap: wrap; row-gap: 6px; }
.anpf-root .po-card-head h2 { font-size: 16px; }
.anpf-toolbar { flex-wrap: wrap; row-gap: 10px; }
.anpf-views a { gap: 6px; text-decoration: none; } .anpf-views .i { font-size: 15px; }
.anpf-data.anov-data { margin-left: auto; }
.anpf-sub { margin: -2px 0 10px; font-size: 13px; color: var(--muted); }

/* the summaries: two groups — what the platforms attribute (never added) · the reconciled business figures */
.anpf-kpis { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 4fr); gap: 14px; margin-bottom: 14px; }
.anpf-kgroup { min-width: 0; display: grid; gap: 8px; align-content: start; }
.anpf-kgroup.is-platform { padding: 10px; border: 1px dashed #C9D0DD; border-radius: 14px; background: #F7F8FB; }
.anpf-kgroup.is-business { padding: 10px 0; }
.anpf-kcap { display: flex; align-items: center; gap: 6px; margin: 0 0 0 2px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.anpf-kcap small { font-weight: 400; color: var(--muted); } .anpf-kcap .i { font-size: 15px; color: var(--muted); }
.anpf-kgrid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; }
.anpf-kpi { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; min-width: 0; }
.anpf-ktop { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.anpf-kic { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--indigo-bg); color: var(--indigo); }
.anpf-kic .i { font-size: 20px; }
.anpf-kic.is-grey { background: #ECEEF3; color: #5B6479; } .anpf-kic.is-mint { background: #E7F7F0; color: #178A5E; } .anpf-kic.is-rose { background: #FDECEF; color: #C23A51; }
.anpf-kic.is-blue { background: var(--indigo-bg); color: var(--indigo); } .anpf-kic.is-violet { background: #F1ECFD; color: #6D43D9; }
.anpf-kt { min-width: 0; display: grid; gap: 2px; }
.anpf-kl { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--text); }
.anpf-kv { font-size: 26px; line-height: 1.15; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anpf-kpi.is-na .anpf-kv { color: var(--muted); font-weight: 600; }
.anpf-kgroup.is-platform .anpf-kv { font-size: 22px; }
.anpf-klines { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 2px; }
.anpf-klines li { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.anpf-klines b { font-size: 16px; color: var(--text); font-variant-numeric: tabular-nums; }
.anpf-kt .anov-flag { justify-self: start; }
.anpf-ks { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
.anpf-kn { margin: auto 0 0; padding-top: 6px; border-top: 1px solid var(--border-soft); font-size: 11.5px; line-height: 1.35; color: var(--muted); }

/* rows */
.anpf-row { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 14px; }
.anpf-wf, .anpf-src, .anpf-defs, .anpf-read, .anpf-recon, .anpf-plat, .anpf-costs { padding: 12px 16px; min-width: 0; }
.anpf-costs { margin-bottom: 14px; }

/* the waterfall: server-drawn columns on one axis (percent of the axis range), dashed connectors between the steps */
.anpf-wfplot { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: 236px auto; column-gap: 6px; }
.anpf-wfaxis { position: relative; margin-top: 22px; }
.anpf-wfaxis span { position: absolute; right: 4px; transform: translateY(50%); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.anpf-wfarea { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 22px; }
.anpf-wfgrid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid #E9ECF3; }
.anpf-wfgrid.is-zero { border-top-color: #B9C0CE; }
.anpf-wflink { position: absolute; height: 0; border-top: 1.5px dashed #9CA3AF; }
.anpf-wfcol { position: relative; }
.anpf-wfbar { position: absolute; left: 22%; right: 22%; border-radius: 4px 4px 0 0; }
.anpf-wfbar.is-rev { background: #1FA971; } .anpf-wfbar.is-cost { background: #F0808F; border-radius: 0 0 4px 4px; } .anpf-wfbar.is-result { background: #3B5BFD; }
.anpf-wfbar.is-neg { background: #D6364F; border-radius: 0 0 4px 4px; }
.anpf-wfbar.is-missing { display: grid; place-items: center; border: 1.5px dashed #B9C0CE; border-radius: 6px; background: repeating-linear-gradient(45deg, #F7F8FB 0 6px, #EEF0F5 6px 12px); color: var(--muted); font-weight: 600; }
.anpf-wfval { position: absolute; left: 0; right: 0; text-align: center; font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.anpf-wflabels { grid-column: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 8px; }
.anpf-wflabels span { padding: 0 4px; text-align: center; font-size: 12.5px; line-height: 1.3; color: var(--text-2); }
.anpf-wfgaps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.anpf-wfgaps li { display: flex; gap: 6px; font-size: 12.5px; line-height: 1.45; color: var(--text-2); } .anpf-wfgaps .i { flex: none; font-size: 15px; color: var(--amber); }

/* tables (the scroll box contains its visually hidden captions) */
.anpf-twrap { position: relative; }
.anpf-table th { white-space: normal; }
.anpf-table tbody tr { cursor: default; } .anpf-table tbody tr:hover { background: none; }
.anpf-table tr.is-total td { font-weight: 700; background: #F7F8FB; }
.anpf-table td.is-na { color: var(--muted); }
.anpf-table .ancp-where { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.anpf-table .ancp-where .an-pf { flex: none; width: 22px; height: 22px; }
.anpf-table .ancp-where small { display: block; font-size: 11.5px; color: var(--muted); }
.anpf-attr b { display: block; } .anpf-attr small { display: block; max-width: 230px; margin-left: auto; font-size: 11.5px; font-weight: 400; line-height: 1.35; color: var(--muted); white-space: normal; }
.anpf-recline { display: flex; gap: 8px; margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: #E7F7F0; font-size: 12.5px; line-height: 1.45; color: #145C40; }
.anpf-recline > .i { flex: none; font-size: 16px; }
.anpf-recline .po-link { white-space: nowrap; }

/* definitions and reading */
.anpf-row.is-2 { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.anpf-deflink { margin-left: auto; font-size: 12.5px; }
.anpf-dl { margin: 0; display: grid; }
.anpf-dl > div { display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--border-soft); }
.anpf-dl dt { font-size: 13px; font-weight: 600; color: var(--text); }
.anpf-dl dd { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.anpf-dl dd.anpf-ver { font-size: 11.5px; color: var(--indigo); white-space: nowrap; }
.anpf-readlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.anpf-readlist li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; }
.anpf-ric { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--indigo-bg); color: var(--indigo); } .anpf-ric .i { font-size: 16px; }
.anpf-readlist b { font-size: 13.5px; color: var(--text); } .anpf-readlist p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.anpf-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; font-size: 12.5px; }

/* sources and reconciliation */
.anpf-headval { margin-left: auto; font-size: 20px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.anpf-srclist, .anpf-platlist { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.anpf-srclist li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 10px; }
.anpf-srclist .an-pf, .anpf-platlist .an-pf { width: 22px; height: 22px; } .anpf-srclist > li > .i { font-size: 20px; color: var(--muted); }
.anpf-srclist b, .anpf-platlist b { display: block; font-size: 13px; color: var(--text); } .anpf-srclist small, .anpf-platlist small { display: block; font-size: 11.5px; color: var(--muted); }
.anpf-platlist li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px; border: 1px solid var(--border-soft); border-radius: 10px; }
.anpf-platlist p { margin: 4px 0 0; font-size: 12px; line-height: 1.4; color: var(--text-2); }
.anpf-platlist dl { margin: 0; display: grid; grid-template-columns: repeat(3, auto); gap: 12px; text-align: right; }
.anpf-platlist dt { font-size: 11px; color: var(--muted); } .anpf-platlist dd { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.anpf-platlist dd.is-na { color: var(--muted); }
.anpf-note { display: flex; gap: 8px; margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; background: var(--indigo-bg-2); font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.anpf-note > .i { flex: none; font-size: 15px; color: var(--indigo); }
.anpf-note.is-warn { background: #FFF8EC; color: #7A4A0C; } .anpf-note.is-warn > .i { color: var(--amber); }
.anpf-costgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.anpf-costgrid h3 { margin: 0 0 8px; font-size: 14px; color: var(--text); } .anpf-costgrid h3 small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.anpf-mini td, .anpf-mini th { padding: 6px 8px; }
.anpf-acct { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 8px 2px 0; font-size: 12.5px; }
.anpf-empty { margin: 0; font-size: 13px; color: var(--muted); }

/* the Finances tab links both marketing analyses (MM-52 head) */
.fi-anlinks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.fi-anlinks .i { font-size: 14px; color: var(--indigo); }

.anpf-root.is-loading .anpf-body { opacity: .55; transition: opacity .15s; }

@media (max-width: 1400px) { .anpf-kpis { grid-template-columns: minmax(0, 1fr); } .anpf-kgroup.is-business { padding: 0; } }
@media (max-width: 1200px) { .anpf-row, .anpf-row.is-2, .anpf-costgrid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .anpf-kgrid { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .anpf-data.anov-data { margin-left: 0; }
  .anpf-views { flex-wrap: wrap; }
  .anpf-kgrid { grid-template-columns: minmax(0, 1fr); }
  .anpf-kv { font-size: 22px; }
  .anpf-dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .anpf-platlist li { grid-template-columns: 22px minmax(0, 1fr); } .anpf-platlist dl { grid-column: 1 / -1; justify-content: start; text-align: left; }
  .anpf-wfplot { grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: 200px auto; }
  .anpf-wfval { font-size: 12px; } .anpf-wflabels span { font-size: 11px; }
  .anpf-twrap .anpf-table { min-width: 460px; }
  .anpf-costgrid .anor-table { display: block; overflow-x: auto; }
}
/* ---------- Analytics-14 · Marketing cost analysis (ancs- this screen; reuses A03's Explore crumb and head, A01's toolbar, period menu, custom range, comparison switch, banner, ⓘ, delta, legend, chart and tooltip classes, A03's table, A04's segmented control and "where" cell, A13's link row, po-card / po-link / pm-menu / es) — plans/Analytics-14.md, prototype/gen/analytics14.css ---------- */
.ancs-root .po-card-head { flex-wrap: wrap; row-gap: 6px; }
.ancs-root .po-card-head h2 { font-size: 16px; }
.ancs-toolbar { flex-wrap: wrap; row-gap: 10px; }
.ancs-data.anov-data { margin-left: auto; }
.ancs-headnote { margin-left: auto; font-size: 12px; color: var(--muted); }
.ancs-sub { margin: -2px 0 10px; font-size: 13px; color: var(--muted); }

/* the four summaries — spend (delivery) · invoiced · paid · outstanding, never one total */
.ancs-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.ancs-kpi { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; min-width: 0; }
.ancs-ktop { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.ancs-kic { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--indigo-bg); color: var(--indigo); } .ancs-kic .i { font-size: 22px; }
.ancs-kic.is-slate { background: #ECEEF3; color: #475467; } .ancs-kic.is-mint { background: #E7F7F0; color: #178A5E; } .ancs-kic.is-amber { background: #FFF1DB; color: #9A5B06; }
.ancs-kt { min-width: 0; display: grid; gap: 2px; }
.ancs-kl { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.ancs-kv { font-size: 28px; line-height: 1.15; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ancs-kpi.is-na .ancs-kv { color: var(--muted); font-weight: 600; }
.ancs-ks { font-size: 12.5px; color: var(--text-2); }
.ancs-kcmp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--muted); }
.ancs-kn { margin: auto 0 0; padding-top: 6px; border-top: 1px solid var(--border-soft); font-size: 11.5px; line-height: 1.35; color: var(--muted); }

/* rows */
.ancs-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; align-items: start; margin-bottom: 14px; }
.ancs-row.is-3 { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.ancs-row.is-rec { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.ancs-trend, .ancs-prov, .ancs-camps, .ancs-timing, .ancs-recs, .ancs-about { padding: 12px 16px; min-width: 0; }
.ancs-chart.anov-chart { height: 230px; }

/* tables (the scroll box contains its visually hidden headers — they would escape it and widen the page) */
.ancs-twrap { position: relative; }
.ancs-table th { white-space: normal; }
.ancs-table tbody tr { cursor: default; } .ancs-table tbody tr:hover { background: none; }
.ancs-table tr.is-total td { font-weight: 700; background: #F7F8FB; }
.ancs-table td.is-na { color: var(--muted); }
.ancs-table .ancp-where { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ancs-table .ancp-where .an-pf { flex: none; width: 22px; height: 22px; }
.ancs-table small { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); }
.ancs-unb b { display: block; } .ancs-unb small { white-space: normal; }
.ancs-prov .ancs-table td, .ancs-prov .ancs-table th { padding-left: 6px; padding-right: 6px; }
.ancs-camp { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.ancs-camp .an-pf { flex: none; width: 18px; height: 18px; } .ancs-camp:hover b { color: var(--indigo); }
.ancs-cat { display: inline-block !important; margin-top: 2px; padding: 0 7px; border-radius: 9px; background: #F1F3F8; }
.ancs-foot { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.ancs-empty { display: flex; gap: 6px; align-items: center; margin: 4px 0; font-size: 13px; color: var(--muted); }

/* timing: the documents' events on a rail, then what falls due and the delivery not yet invoiced */
.ancs-events { list-style: none; margin: 0; padding: 0 0 0 4px; display: grid; }
.ancs-events li { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 0 0 12px; }
.ancs-events li:not(:last-child)::before { content: ""; position: absolute; left: 7px; top: 14px; bottom: 0; border-left: 2px solid #DDE3F0; }
.ancs-dot { width: 14px; height: 14px; margin-top: 2px; border: 3px solid var(--indigo); border-radius: 50%; background: var(--surface); }
.ancs-events li.is-green .ancs-dot { border-color: #12B981; } .ancs-events li.is-grey .ancs-dot { border-color: #9CA3AF; }
.ancs-when { display: block; font-size: 12px; color: var(--muted); }
.ancs-events a, .ancs-due a { color: inherit; text-decoration: none; } .ancs-events a:hover b, .ancs-due a:hover b { color: var(--indigo); }
.ancs-events b { font-size: 13px; color: var(--text); }
.ancs-events small { display: block; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.ancs-events small .an-pf { margin-right: 4px; vertical-align: -2px; }
.ancs-events small .an-pf, .ancs-due .an-pf { width: 14px; height: 14px; }
.ancs-events em, .ancs-due em { font-style: normal; font-size: 13.5px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ancs-events li.is-green em { color: #178A5E; } .ancs-events li.is-grey em { color: var(--muted); font-weight: 500; }
.ancs-h3 { margin: 6px 0 6px; font-size: 13.5px; color: var(--text); }
.ancs-due { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.ancs-due li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 10px; background: #F7F8FB; }
.ancs-due li.is-red { background: #FDECEF; } .ancs-due li.is-amber { background: #FFF8EC; } .ancs-due li.is-blue { background: var(--indigo-bg-2); }
.ancs-due b { display: block; font-size: 13px; color: var(--text); } .ancs-due small { display: block; font-size: 11.5px; color: var(--muted); }

/* other marketing costs */
.ancs-add { display: inline-flex; align-items: center; gap: 6px; height: 34px; margin-left: 8px; }
.ancs-acts { white-space: nowrap; text-align: right; }
.ancs-mini { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; margin-left: 4px; }
.ancs-plan { display: flex; gap: 8px; margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; background: var(--indigo-bg-2); font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.ancs-plan > .i { flex: none; font-size: 15px; color: var(--indigo); }
.ancs-about p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.ancs-abrow .po-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; }

/* the record dialog (Record a cost / Edit) */
.ancs-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(16, 21, 47, .38); }
.ancs-dialog { position: fixed; z-index: 81; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: 16px 18px; }
.ancs-scrim[hidden], .ancs-dialog[hidden], .ancs-msg[hidden] { display: none; }
.ancs-x { margin-left: auto; }
.ancs-safe { display: flex; gap: 8px; margin: 0 0 12px; padding: 9px 12px; border-radius: 10px; background: #E7F7F0; font-size: 12.5px; line-height: 1.45; color: #145C40; }
.ancs-safe > .i { flex: none; font-size: 15px; }
.ancs-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.ancs-fields label { display: grid; gap: 4px; min-width: 0; font-size: 12.5px; color: var(--text-2); }
.ancs-fields label.is-wide { grid-column: 1 / -1; }
.ancs-fields small { color: var(--muted); font-weight: 400; }
.ancs-fields input, .ancs-fields select { height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); min-width: 0; }
.ancs-fields input[aria-invalid="true"], .ancs-fields select[aria-invalid="true"] { border-color: #D6364F; box-shadow: 0 0 0 3px #FDECEF; }
.ancs-msg { margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; font-size: 13px; background: #FDECEF; color: #8F1C2E; }
.ancs-msg.is-warn { background: #FFF8EC; color: #7A4A0C; }
.ancs-dacts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }

.ancs-root.is-loading .ancs-body { opacity: .55; transition: opacity .15s; }

@media (max-width: 1400px) { .ancs-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1200px) { .ancs-row, .ancs-row.is-3, .ancs-row.is-rec { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) {
  .ancs-data.anov-data { margin-left: 0; }
  .ancs-kpis { grid-template-columns: minmax(0, 1fr); }
  .ancs-kv { font-size: 24px; }
  .ancs-twrap .ancs-table { min-width: 520px; }
  .ancs-headnote { margin-left: 0; flex-basis: 100%; }
  .ancs-add { margin-left: 0; }
  .ancs-fields { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Analytics-15 · Data sources (ansr- this screen; reuses po-card / po-card-head / po-chip / po-link / pm-menu, an-pf, an-demo, anor-viewonly, es) — plans/Analytics-15.md, prototype/gen/analytics15.css ---------- */
.ansr-root .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ansr-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ansr-head { display: flex; align-items: flex-start; gap: 16px 24px; flex-wrap: wrap; }
.ansr-title { flex: 1 1 520px; min-width: 0; }
.ansr-title h1 { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 700; color: var(--text); }
.ansr-title p { margin: 6px 0 0; font-size: 15px; color: var(--text-2); max-width: 880px; }
.ansr-headr { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-left: auto; }
.ansr-data { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; font-size: 13px; color: var(--text-2); }
.ansr-data .i { font-size: 16px; } .ansr-data i { font-style: normal; color: var(--muted); }
.ansr-connect { height: 46px; padding: 0 22px; font-size: 16px; gap: 10px; }
.ansr-connect .i { font-size: 20px; }
.ansr-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; }
.ansr-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 10px; background: var(--surface-2); }
.ansr-seg a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--text-2); text-decoration: none; }
.ansr-seg a[aria-current="true"] { background: var(--surface); color: var(--indigo); box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.ansr-seg a:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.ansr-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--track); font-size: 12px; color: var(--text-2); }
.ansr-search { position: relative; display: flex; align-items: center; margin-left: auto; flex: 0 1 280px; min-width: 180px; }
.ansr-search .i { position: absolute; left: 10px; font-size: 16px; color: var(--muted); pointer-events: none; }
.ansr-search input { width: 100%; height: 36px; padding: 0 10px 0 32px; border: 1px solid var(--border); border-radius: 9px; font: inherit; font-size: 13.5px; background: var(--surface); }
.ansr-banner { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; font-size: 14px; }
.ansr-banner.is-green { background: var(--green-bg); color: var(--green-text); } .ansr-banner.is-red { background: #FDECEF; color: #B42339; }
.ansr-banner .i { font-size: 18px; }
.ansr-card { padding: 0; overflow: hidden; }
.ansr-twrap { position: relative; overflow-x: auto; }
.ansr-table { width: 100%; min-width: 1120px; border-collapse: collapse; font-size: 13.5px; }
.ansr-table th { padding: 12px 8px; text-align: left; font-size: 13px; font-weight: 600; color: var(--text-2); border-bottom: 1px solid var(--border-soft); white-space: nowrap; background: var(--surface); }
.ansr-table td { padding: 12px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; color: var(--text); }
.ansr-table tr:last-child td { border-bottom: 0; }
.ansr-table tr.is-attention td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.ansr-table small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-2); }
.ansr-table b { font-weight: 600; }
.ansr-src, .ansr-owner, .ansr-mode { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ansr-src .an-pf, .ansr-src > .i { width: 28px; height: 28px; font-size: 28px; flex: none; color: var(--text-2); }
.ansr-src b { white-space: nowrap; }
.ansr-table .ansr-owner small { display: none; }                      /* the title is in the panel; the table keeps the name */
.ansr-res { max-width: 180px; min-width: 130px; }
.ansr-res b, .ansr-res small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.ansr-av { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); font-size: 12.5px; font-weight: 700; }
.ansr-mode .i { font-size: 20px; color: var(--indigo); flex: none; }
.ansr-mode b, .ansr-src small { white-space: nowrap; }
.ansr-mode small { max-width: 130px; }
.ansr-scope span { display: block; max-width: 175px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text); }
.ansr-scope span + span { color: var(--text-2); font-size: 12.5px; }
.ansr-nowrap { white-space: nowrap; }
.ansr-status .po-chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ansr-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ansr-status small { max-width: 160px; }
.ansr-quota { display: inline-flex !important; align-items: center; gap: 4px; color: var(--amber-text) !important; }
.ansr-quota .i { font-size: 14px; }
.ansr-qlink { display: inline-block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--indigo); text-decoration: none; }
.ansr-qlink:hover { text-decoration: underline; }
.ansr-act { white-space: nowrap; text-align: right; position: sticky; right: 0; background: var(--surface); box-shadow: -8px 0 8px -8px rgba(16, 24, 40, .18); }
.ansr-act { z-index: 1; } .ansr-act.is-open { z-index: 3; }
.ansr-act-h { text-align: right !important; position: sticky; right: 0; }
.ansr-table tr.is-attention td.ansr-act { background: var(--surface); }
.ansr-view { height: 34px; padding: 0 12px; font-size: 13.5px; }
.ansr-menu-wrap { position: relative; display: inline-block; vertical-align: middle; }
.ansr-dots { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--text-2); cursor: pointer; }
.ansr-dots:hover { background: var(--surface-2); } .ansr-dots .i { font-size: 20px; }
.ansr-dots:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.ansr-menu { position: fixed; z-index: 90; min-width: 200px; text-align: left; }   /* placed by the script under its button: never clipped by the table's scroll box */
.ansr-menu .is-danger { color: #B42339; }
.ansr-muted { color: var(--text-2); font-size: 13px; }
.ansr-more { padding-bottom: 14px; }
.ansr-more .po-card-head { flex-wrap: wrap; }
.ansr-more h2 { margin: 0; font-size: 17px; }
.ansr-more-sub { font-size: 13px; color: var(--text-2); }
.ansr-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ansr-tile { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 10px; min-width: 0; }
.ansr-tile .an-pf, .ansr-tile > .i { width: 24px; height: 24px; font-size: 24px; flex: none; color: var(--text-2); }
.ansr-tile div { flex: 1; min-width: 0; }
.ansr-tile b { display: block; font-size: 14px; } .ansr-tile small { display: block; font-size: 12.5px; color: var(--text-2); }
.ansr-tconnect { height: 32px; padding: 0 12px; font-size: 13px; flex: none; }
.ansr-more-foot { margin: 10px 0 0; font-size: 13px; color: var(--text-2); }
.ansr-info { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 12px; background: #F4F7FF; border: 1px solid #DFE6FF; }
.ansr-info-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--surface); color: var(--indigo); }
.ansr-info-ic .i { font-size: 22px; }
.ansr-info div { flex: 1 1 240px; min-width: 0; }
.ansr-info h2 { margin: 0 0 4px; font-size: 15px; } .ansr-info p { margin: 0; font-size: 13.5px; color: var(--text-2); }
.ansr-info .btn-outline { flex: none; gap: 8px; }
.ansr-error { margin-bottom: 8px; }
/* the panel */
.ansr-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(16, 24, 40, .18); }
.ansr-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: 520px; max-width: 100%; display: flex; flex-direction: column; background: var(--surface);
  box-shadow: -8px 0 32px rgba(16, 24, 40, .16); }
.ansr-p-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--border-soft); }
.ansr-p-head .an-pf, .ansr-p-head > .i { width: 32px; height: 32px; font-size: 32px; flex: none; color: var(--text-2); }
.ansr-p-head div { flex: 1; min-width: 0; }
.ansr-p-head h2 { margin: 0; font-size: 19px; }
.ansr-p-head p { margin: 6px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ansr-p-head small { font-size: 12.5px; color: var(--text-2); }
.ansr-x { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; cursor: pointer; color: var(--text-2); }
.ansr-x:hover { background: var(--surface-2); } .ansr-x .i { font-size: 20px; }
.ansr-p-body { flex: 1; overflow-y: auto; padding: 6px 20px 16px; }
.ansr-p-body section { padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
.ansr-p-body section:last-child { border-bottom: 0; }
.ansr-p-body h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); }
.ansr-dl { display: grid; grid-template-columns: minmax(120px, 38%) minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 13.5px; }
.ansr-dl dt { color: var(--text-2); } .ansr-dl dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.ansr-sub { margin: 12px 0 6px; font-size: 13px; font-weight: 600; color: var(--text); }
.ansr-scopes, .ansr-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.ansr-scopes li, .ansr-steps li { display: flex; align-items: flex-start; gap: 8px; }
.ansr-scopes .i, .ansr-steps .i { font-size: 16px; flex: none; margin-top: 1px; }
.ansr-scopes .is-ok .i, .ansr-steps .is-ok .i { color: var(--green); }
.ansr-scopes .is-missing .i, .ansr-steps .is-failed .i { color: var(--red); }
.ansr-steps .is-skipped { color: var(--muted); }
.ansr-scopes span, .ansr-steps span { flex: 1; min-width: 0; }
.ansr-scopes code { display: block; font-size: 11.5px; color: var(--text-2); }
.ansr-scopes b { color: #B42339; font-size: 12px; }
.ansr-steps small { display: block; color: var(--text-2); }
.ansr-fail { display: flex; gap: 6px; margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: #FDECEF; color: #B42339; font-size: 13px; }
.ansr-prov { margin: 0; font-size: 13.5px; color: var(--text); }
.ansr-p-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border-soft); }
.ansr-p-foot .btn-outline, .ansr-p-foot .btn-primary { gap: 6px; height: 38px; padding: 0 14px; font-size: 14px; }
.ansr-p-foot .is-danger { color: #B42339; margin-left: auto; }
/* the disconnect dialog */
.ansr-dlg-wrap { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(16, 24, 40, .32); }
.ansr-dlg { width: 520px; max-width: 100%; padding: 22px 24px 18px; border-radius: 14px; background: var(--surface); box-shadow: 0 20px 48px rgba(16, 24, 40, .24); }
.ansr-dlg h2 { margin: 0 0 8px; font-size: 19px; }
.ansr-dlg p { margin: 0 0 12px; font-size: 14px; color: var(--text-2); }
.ansr-dlg .ansr-muted { display: flex; gap: 6px; align-items: flex-start; }
.ansr-check { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 10px; font-size: 14px; }
.ansr-check input { margin-top: 3px; } .ansr-check small { display: block; font-size: 12.5px; color: var(--text-2); }
.ansr-dlg-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.ansr-dlg .btn-danger { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border: 0; border-radius: 10px; background: #E5303F; color: #fff; font: inherit;
  font-weight: 600; cursor: pointer; }
.ansr-dlg .btn-danger:hover { background: #C9202F; }
@media (max-width: 1400px) { .ansr-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1200px) { .ansr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .ansr-title h1 { font-size: 24px; }
  .ansr-headr { margin-left: 0; width: 100%; }
  .ansr-connect { width: 100%; justify-content: center; }
  .ansr-search { margin-left: 0; flex: 1 1 100%; }
  .ansr-tiles { grid-template-columns: minmax(0, 1fr); }
  .ansr-info { flex-wrap: wrap; }
  .ansr-table { min-width: 980px; }
}
@media (max-width: 640px) { .ansr-panel { width: 100%; } .ansr-dl { grid-template-columns: minmax(0, 1fr); } .ansr-dl dd { margin-bottom: 4px; } }
/* ---------- Analytics-16 · Connect analytics source (ancn- this screen; reuses po-card / po-chip / po-link, an-pf, an-demo, anor-viewonly, Promotion-37's sc-consent for the demo page) — plans/Analytics-16.md, prototype/gen/analytics16.css ---------- */
.ancn-root .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ancn-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ancn-back { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 14px; color: var(--indigo); text-decoration: none; font-weight: 500; }
.ancn-back .i { font-size: 16px; }
.ancn-head { display: flex; align-items: center; gap: 16px 18px; flex-wrap: wrap; }
.ancn-mark { display: inline-grid; place-items: center; width: 56px; height: 56px; flex: none; }
.ancn-mark .an-pf, .ancn-mark .i { width: 52px; height: 52px; font-size: 52px; color: var(--indigo); }
.ancn-title { flex: 1 1 460px; min-width: 0; }
.ancn-title h1 { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 700; }
.ancn-title p { margin: 4px 0 0; font-size: 15px; color: var(--text-2); }
.ancn-title .ancn-recon { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; color: var(--indigo); }
.ancn-data { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 0 auto; font-size: 13px; color: var(--text-2); }
.ancn-data .i { font-size: 16px; }
.ancn-steps { list-style: none; margin: 0; padding: 14px 24px; display: flex; align-items: center; gap: 12px; border-radius: 12px; }
.ancn-steps li { display: flex; align-items: center; gap: 12px; flex: 1 1 0; min-width: 0; position: relative; }
.ancn-steps li:not(:last-child)::after { content: ""; flex: 1; height: 2px; margin-left: 8px; background: var(--border); border-radius: 2px; min-width: 20px; }
.ancn-steps li.is-done:not(:last-child)::after { background: var(--indigo); }
.ancn-n { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; border: 2px solid var(--border); color: var(--text-2);
  font-weight: 700; font-size: 15px; background: var(--surface); }
.ancn-steps .is-current .ancn-n, .ancn-steps .is-done .ancn-n { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.ancn-n .i { font-size: 18px; }
.ancn-steps b { display: block; font-size: 15px; white-space: nowrap; } .ancn-steps small { display: block; font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.ancn-steps .is-upcoming b { color: var(--text-2); }
.ancn-banner { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; font-size: 14px; }
.ancn-banner.is-green { background: var(--green-bg); color: var(--green-text); } .ancn-banner.is-red { background: #FDECEF; color: #B42339; }
.ancn-banner .i { font-size: 18px; flex: none; }
.ancn-grid { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 14px; align-items: start; }
.ancn-form { padding: 6px 20px 0; border-radius: 12px; min-width: 0; }
.ancn-sec { padding: 14px 0; border-bottom: 1px solid var(--border-soft); min-width: 0; }
.ancn-sec h2 { margin: 0; font-size: 17px; font-weight: 700; } .ancn-sec h2 span { color: var(--text); }
.ancn-hint { margin: 2px 0 10px; font-size: 13px; color: var(--text-2); }
.ancn-selbox { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  cursor: pointer; }
.ancn-selbox:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-bg); }
.ancn-selbox > .an-pf, .ancn-selbox > .i:first-child { width: 28px; height: 28px; font-size: 26px; flex: none; color: var(--text-2); }
.ancn-selbox > .i:last-child { font-size: 18px; color: var(--text-2); flex: none; pointer-events: none; }
.ancn-selwrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ancn-selwrap select { appearance: none; -webkit-appearance: none; width: 100%; border: 0; background: none; padding: 0; font: inherit; font-size: 15px; font-weight: 600;
  color: var(--text); cursor: pointer; outline: none; }
.ancn-selwrap select:disabled { cursor: default; color: var(--text); opacity: 1; }
.ancn-selwrap small { font-size: 12.5px; color: var(--text-2); }
.ancn-ids { display: flex; flex-direction: column; gap: 6px; }
.ancn-id { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.ancn-id.is-on { border-color: var(--indigo); background: #F7F9FF; }
.ancn-id.is-off { opacity: .6; cursor: default; }
.ancn-id input { accent-color: var(--indigo); }
.ancn-id > .i, .ancn-id > .an-pf { width: 22px; height: 22px; font-size: 22px; flex: none; }
.ancn-id > span:not(.po-chip) { flex: 1; min-width: 0; }
.ancn-id b { display: block; font-size: 14.5px; } .ancn-id small { display: block; font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; }
.ancn-need { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--amber-bg);
  color: var(--amber-text); font-size: 13.5px; }
.ancn-need > span { flex: 1 1 260px; min-width: 0; }
.ancn-need .btn-primary { height: 36px; padding: 0 16px; font-size: 14px; } .ancn-need .i { font-size: 18px; flex: none; }
.ancn-other { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 0; border: 0; background: none; color: var(--indigo); font: inherit; font-size: 13.5px;
  font-weight: 600; cursor: pointer; }
.ancn-note { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; background: #F4F7FF; border: 1px solid #DFE6FF;
  font-size: 13px; color: var(--text); }
.ancn-note .i { font-size: 17px; color: var(--indigo); flex: none; margin-top: 1px; }
.ancn-note.is-plain { background: none; border: 0; padding: 4px 0 0; color: var(--text-2); }
.ancn-empty { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: var(--text-2); }
.ancn-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; border-bottom: 1px solid var(--border-soft); }
.ancn-pair .ancn-sec { border-bottom: 0; }
.ancn-rescol { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.ancn-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13px; }
.ancn-field > span { font-weight: 600; color: var(--text); }
.ancn-field select, .ancn-field input { width: 100%; height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: 9px; font: inherit; font-size: 14px;
  background: var(--surface); min-width: 0; }
.ancn-field small { font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.ancn-err, .ancn-warn { display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; font-size: 13px; }
.ancn-err { background: #FDECEF; color: #B42339; } .ancn-warn { background: var(--amber-bg); color: var(--amber-text); }
.ancn-err .i, .ancn-warn .i { font-size: 16px; flex: none; margin-top: 1px; }
.ancn-listed { margin: 8px 0 0; font-size: 12.5px; color: var(--text-2); }
.ancn-link { padding: 0; border: 0; background: none; color: var(--indigo); font: inherit; cursor: pointer; font-weight: 600; }
.ancn-muted { margin: 0; font-size: 13px; color: var(--text-2); }
.ancn-methods { display: flex; flex-direction: column; gap: 6px; }
.ancn-method { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.ancn-method.is-on { border-color: var(--indigo); background: #F7F9FF; }
.ancn-method.is-off { cursor: default; background: var(--surface-2); border-color: var(--border-soft); }
.ancn-method.is-off b { color: var(--text-2); }
.ancn-method input { margin-top: 3px; accent-color: var(--indigo); }
.ancn-method b { display: block; font-size: 14px; } .ancn-method em { font-style: normal; font-weight: 500; color: var(--indigo); }
.ancn-method small { display: block; font-size: 12.5px; color: var(--text-2); }
.ancn-selbox.is-scope > .i:first-child { color: var(--indigo); }
.ancn-handoff p { margin: 6px 0 12px; font-size: 14px; color: var(--text-2); }
.ancn-handoff .btn-primary { gap: 8px; }
.ancn-off p { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 14px; color: var(--text-2); }
.ancn-foot { position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin: 0 -20px; padding: 12px 20px; background: var(--surface);
  border-top: 1px solid var(--border-soft); border-radius: 0 0 12px 12px; }
.ancn-req { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; flex: 1 1 360px; min-width: 0; font-size: 13px; }
.ancn-req b { font-weight: 600; }
.ancn-req > span { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); }
.ancn-req .is-ok .i { color: var(--green); } .ancn-req .is-missing .i { color: var(--red); }
.ancn-req .po-link { display: inline-flex; align-items: center; gap: 4px; }
.ancn-btns { display: flex; gap: 10px; margin-left: auto; }
.ancn-btns .btn-outline, .ancn-btns .btn-primary { height: 42px; padding: 0 22px; font-size: 15px; }
.ancn-btns [disabled] { opacity: .55; cursor: not-allowed; }
.ancn-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ancn-side h2 { margin: 0 0 8px; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.ancn-tres { display: flex; align-items: center; gap: 12px; padding: 6px 0 10px; }
.ancn-tic { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; color: #fff; background: var(--muted); }
.ancn-tic .i { font-size: 22px; }
.ancn-test.is-passed .ancn-tic { background: var(--green); } .ancn-test.is-failed .ancn-tic { background: var(--red); } .ancn-test.is-stale .ancn-tic { background: var(--amber); }
.ancn-tres b { display: block; font-size: 15px; } .ancn-tres small { display: block; font-size: 12.5px; color: var(--text-2); }
.ancn-tsteps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ancn-tsteps li { display: grid; grid-template-columns: 24px 52px minmax(0, 1fr) auto; align-items: start; gap: 8px; font-size: 13.5px; }
.ancn-sic { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; background: var(--muted); }
.ancn-sic .i { font-size: 13px; }
.ancn-tsteps .is-ok .ancn-sic { background: var(--green); } .ancn-tsteps .is-failed .ancn-sic { background: var(--red); } .ancn-tsteps .is-skipped { color: var(--muted); }
.ancn-sn { color: var(--text-2); } .ancn-sl small { display: block; font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.ancn-tsteps time { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ancn-done { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--green-bg); color: var(--green-text); }
.ancn-done .i { font-size: 22px; flex: none; } .ancn-done b { display: block; font-size: 13.5px; } .ancn-done small { display: block; font-size: 12.5px; }
.ancn-preview ul, .ancn-apis ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ancn-preview li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); }
.ancn-preview li:last-child { border-bottom: 0; }
.ancn-preview li > .i { font-size: 20px; color: var(--indigo); flex: none; }
.ancn-preview li span { flex: 1; min-width: 0; } .ancn-preview b { display: block; font-size: 14px; } .ancn-preview small { display: block; font-size: 12.5px; color: var(--text-2); }
.ancn-preview em { font-style: normal; font-size: 12px; color: var(--text-2); text-align: right; max-width: 140px; }
.ancn-preview .is-available em { color: var(--green-text); } .ancn-preview .is-unavailable em { color: var(--amber-text); }
.ancn-preview .is-unavailable > .i { color: var(--muted); }
.ancn-apis li { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13.5px; } .ancn-apis li .i { color: var(--indigo); font-size: 16px; }
.ancn-apis .ancn-muted { margin-top: 8px; }
.ancn-setup { border: 1px solid var(--amber-line, #F5D48A); }
.ancn-setup p { margin: 0 0 8px; font-size: 13.5px; color: var(--text-2); }
.ancn-setup ol { margin: 0 0 8px; padding-left: 20px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
@media (max-width: 1400px) { .ancn-pair { grid-template-columns: minmax(0, 1fr); } .ancn-pair .ancn-sec + .ancn-sec { border-top: 1px solid var(--border-soft); } }
@media (max-width: 1200px) { .ancn-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) {
  .ancn-title h1 { font-size: 22px; }
  .ancn-data { margin-left: 0; }
  .ancn-steps { padding: 12px; gap: 8px; }
  .ancn-steps small { display: none; }
  .ancn-steps b { font-size: 13px; }
  .ancn-steps li:not(:last-child)::after { min-width: 8px; margin-left: 4px; }
  .ancn-rescol { grid-template-columns: minmax(0, 1fr); }
  .ancn-btns { width: 100%; margin-left: 0; } .ancn-btns > * { flex: 1; justify-content: center; }
  .ancn-tsteps li { grid-template-columns: 24px minmax(0, 1fr) auto; } .ancn-sn { display: none; }
}
@media (max-width: 430px) { .ancn-steps .ancn-n { width: 28px; height: 28px; font-size: 13px; } .ancn-steps b { white-space: normal; } }
/* ---------- Analytics-17 · Analytics browser workspace (plans/Analytics-17.md §2; prefix anbw-, the viewer chrome is Promotion-49's lx-) ---------- */
.anbw-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anbw-root .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.anbw-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anbw-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.anbw-title { min-width: 0; flex: 1 1 420px; }
.anbw-title h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.6px; color: var(--text); }
.anbw-title p { margin: 4px 0 0; font-size: 15px; color: var(--text-2); max-width: 760px; }
.anbw-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px 14px; flex-wrap: wrap; flex: 0 1 auto; }
.anbw-switch { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); min-width: 0; }
.anbw-switch select { height: 42px; max-width: 360px; min-width: 0; padding: 0 30px 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit;
  font-size: 14px; font-weight: 500; color: var(--text); text-overflow: ellipsis; }
.anbw-upd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; justify-content: flex-end; margin: 0; font-size: 13px; color: var(--muted); }
.anbw-upd .i { font-size: 15px; }
.anbw-err { margin: 0; }
.anbw-grid { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 16px; align-items: start; }
.anbw-grid.is-android { grid-template-columns: 300px minmax(0, 1fr) 330px; }
.anbw-side, .anbw-center { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.anbw-root .po-card { min-width: 0; }
.anbw-vhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.anbw-vhead > div:not(.anbw-dev) { flex: 1 1 200px; min-width: 0; }
.anbw-vhead h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.anbw-vhead p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.anbw-vic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); }
.anbw-vic .i { font-size: 20px; }
svg.an-pf.anbw-vic { padding: 6px; width: 36px; height: 36px; background: #EAF7EF; }
.anbw-vchip { flex: none; }
.anbw-dev { display: inline-flex; flex: none; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.anbw-devb { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px; border-radius: 7px; font-size: 14px; font-weight: 600; color: var(--text-2); text-decoration: none; }
.anbw-devb .i { font-size: 17px; }
.anbw-devb.is-on { background: var(--indigo); color: #fff; }
.anbw-devb:not(.is-on):hover { background: var(--indigo-bg-2); }
/* the browser viewer: a simulated page of the business's own website */
.anbw-frame { min-height: 470px; display: flex; flex-direction: column; }
.anbw-site { position: relative; flex: 1 1 auto; min-height: 400px; background: #fff; overflow: hidden; }
.anbw-snav { display: flex; align-items: center; gap: 22px; height: 52px; padding: 0 26px; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; color: var(--text-2); }
.anbw-snav b { margin-right: auto; font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: -0.3px; }
.anbw-snav span.is-on { color: var(--indigo); font-weight: 600; }
.anbw-snav em { font-style: normal; padding: 6px 14px; border-radius: 7px; background: var(--indigo); color: #fff; font-weight: 600; }
.anbw-shero { padding: 42px 26px 20px; max-width: 560px; }
.anbw-shero small { display: inline-block; margin-bottom: 10px; padding: 2px 8px; border-radius: 5px; background: var(--indigo-bg-2); color: var(--indigo); font-size: 12px; font-weight: 600; }
.anbw-shero h3 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.6px; color: var(--text); }
.anbw-shero p { margin: 10px 0 18px; font-size: 15px; color: var(--text-2); }
.anbw-scta { display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border-radius: 8px; background: #111827; color: #fff; font-size: 14px; font-weight: 600; }
.anbw-sgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 8px 26px 90px; }
.anbw-sgrid span { height: 86px; border-radius: 10px; background: linear-gradient(135deg, #EEF2FF, #F8FAFC); border: 1px solid var(--border-soft); }
.anbw-sbanner { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: 10px;
  background: #111827; color: #F9FAFB; font-size: 13px; box-shadow: 0 8px 24px rgba(15, 22, 45, .25); }
.anbw-sbanner > span { display: flex; align-items: center; gap: 8px; flex: 1 1 240px; }
.anbw-sbanner .i { font-size: 16px; color: #A5B4FC; }
.anbw-sbanner em { font-style: normal; padding: 6px 12px; border-radius: 6px; border: 1px solid #4B5563; font-weight: 600; font-size: 12.5px; }
.anbw-sbanner em.is-primary { background: #fff; color: #111827; border-color: #fff; }
.anbw-none { flex: 1 1 auto; min-height: 430px; }
.anbw-none.is-idle { background: #2A3142; }
.anbw-none small { color: #94A3B8; font-size: 12.5px; }
/* the Android viewer: a phone frame with the simulated TikTok app (no figures) */
.anbw-phonecard { display: flex; flex-direction: column; }
.anbw-phonecard .anbw-dev { align-self: flex-start; margin-bottom: 12px; }
.anbw-phone { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 0 4px; }
.anbw-device { width: 250px; height: 500px; padding: 12px 10px; border-radius: 38px; background: #111827; box-shadow: 0 10px 28px rgba(15, 22, 45, .22); }
.anbw-screen { position: relative; height: 100%; border-radius: 28px; background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.anbw-app { display: flex; flex-direction: column; gap: 12px; padding: 30px 14px 14px; height: 100%; }
.anbw-abar { display: flex; align-items: center; gap: 6px; font-size: 16px; }
.anbw-abar .an-pf { width: 20px; height: 20px; }
.anbw-aprof { display: flex; align-items: center; gap: 10px; }
.anbw-aprof div { display: flex; flex-direction: column; min-width: 0; }
.anbw-aprof b { font-size: 14px; color: var(--text); }
.anbw-aprof small { font-size: 11.5px; color: var(--muted); }
.anbw-aav { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #0F172A; color: #fff; font-weight: 800; font-size: 17px; flex: none; }
.anbw-astats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; font-size: 10.5px; color: var(--muted); }
.anbw-astats span { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.anbw-astats i { display: block; width: 34px; height: 10px; border-radius: 4px; background: var(--track); }
.anbw-atabs { display: flex; justify-content: space-around; border-bottom: 1px solid var(--border-soft); font-size: 12px; color: var(--muted); }
.anbw-atabs span { padding: 6px 4px; }
.anbw-atabs span.is-on { color: var(--text); font-weight: 700; box-shadow: inset 0 -2px 0 #111827; }
.anbw-agrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.anbw-agrid span { aspect-ratio: .75; border-radius: 4px; background: linear-gradient(160deg, #1F2937, #475569); }
.anbw-sens, .anbw-pnone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100%; padding: 20px 18px; text-align: center;
  background: #F8FAFC; color: var(--text-2); font-size: 12.5px; line-height: 1.45; }
.anbw-sens .i, .anbw-pnone .i { font-size: 30px; color: var(--indigo); }
.anbw-sens b, .anbw-pnone b { font-size: 14.5px; color: var(--text); }
.anbw-pcap { display: flex; align-items: flex-start; gap: 6px; margin: 0; max-width: 260px; font-size: 12px; color: var(--muted); text-align: left; }
.anbw-pcap .i { flex: none; font-size: 14px; color: var(--indigo); margin-top: 1px; }
.anbw-phone .lx-overlay { inset: 0; border-radius: 12px; }
/* the controller (browser layout) */
.anbw-hic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--indigo-bg-2); color: var(--indigo); flex: none; }
.anbw-hic .i { font-size: 17px; }
.anbw-ctop { display: grid; grid-template-columns: 92px minmax(0, 1fr) minmax(0, 170px); gap: 14px; align-items: center; margin-bottom: 12px; }
.anbw-ring { --p: 0; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--surface) 76%, transparent 78%), conic-gradient(var(--indigo) calc(var(--p) * 1%), var(--track) 0); }
.anbw-ring span { display: flex; flex-direction: column; align-items: center; font-size: 22px; font-weight: 800; color: var(--text); line-height: 1; }
.anbw-ring small { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 3px; }
.anbw-cst { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.anbw-cst b { font-size: 17px; font-weight: 700; color: var(--text); }
.anbw-cst span { font-size: 14px; color: var(--text-2); overflow-wrap: anywhere; }
.anbw-cst small { font-size: 12px; color: var(--muted); }
.anbw-clast { display: flex; flex-direction: column; gap: 2px; padding-left: 14px; border-left: 1px solid var(--border-soft); font-size: 13px; color: var(--text-2); min-width: 0; }
.anbw-clast small { font-size: 12px; color: var(--muted); }
.anbw-clast p { display: flex; align-items: flex-start; gap: 6px; margin: 4px 0 0; color: var(--green-text); font-weight: 600; overflow-wrap: anywhere; }
.anbw-clast p .i { flex: none; font-size: 16px; }
.anbw-wait, .anbw-sep { margin: 0 0 10px; }
.anbw-cacts, .anbw-sacts, .anbw-lacts { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.anbw-cacts > .btn-primary, .anbw-cacts > .anbw-take { flex: 1 1 200px; justify-content: center; }
.anbw-root .po-btn.anbw-go { height: 50px; font-size: 16px; }
.anbw-root .po-btn.anbw-take { height: 50px; justify-content: center; }
.anbw-take span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.anbw-take small { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.anbw-menuwrap { position: relative; flex: none; margin-left: auto; }
.anbw-root .po-btn.anbw-more { width: 42px; padding: 0; justify-content: center; }
.anbw-menuwrap .po-menu { right: 0; top: calc(100% + 4px); min-width: 230px; }
.anbw-menuwrap .po-menu .is-danger { color: #B42339; }
.anbw-menuwrap .po-menu .is-danger .i { color: #B42339; }
.anbw-root .btn-outline.is-danger { border-color: #F3B6C0; color: #B42339; }
.anbw-all { margin-top: 4px; font-size: 13.5px; }
.anbw-all summary { cursor: pointer; color: var(--indigo); font-weight: 600; padding: 4px 0; }
.anbw-steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.anbw-step { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 34px; padding: 4px 6px; border-radius: 8px; }
.anbw-step.is-now { background: var(--indigo-bg-2); }
.anbw-step.is-wait { background: var(--amber-bg); }
.anbw-sdot { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--track); background: var(--surface); }
.anbw-sdot .i { font-size: 12px; }
.anbw-step.is-done .anbw-sdot { background: var(--green); border-color: var(--green); color: #fff; }
.anbw-step.is-now .anbw-sdot { border-color: var(--indigo); }
.anbw-step.is-wait .anbw-sdot { border-color: var(--amber); color: var(--amber-text); }
.anbw-step.is-cancelled { opacity: .6; }
.anbw-sl { display: flex; flex-direction: column; min-width: 0; }
.anbw-sl b { font-size: 13.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.anbw-sl small { font-size: 12px; color: var(--muted); }
.anbw-sw { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
/* evidence */
.anbw-count { margin-left: auto; font-size: 13px; color: var(--muted); }
.anbw-sub { margin: -4px 0 10px; font-size: 13px; color: var(--muted); }
.anbw-ev { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.anbw-shot { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.anbw-thumb { position: relative; display: flex; flex-direction: column; gap: 6px; height: 96px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; overflow: hidden; }
.anbw-thumb i { display: block; height: 9px; border-radius: 3px; background: var(--track); }
.anbw-thumb i:first-child { width: 60%; background: #C7D2FE; }
.anbw-thumb i:nth-child(2) { width: 90%; }
.anbw-thumb i:nth-child(3) { width: 75%; margin-top: auto; height: 22px; background: #E0E7FF; }
.anbw-thumb.is-app { background: #0F172A; }
.anbw-thumb.is-app i { background: #334155; }
.anbw-thumb.is-app i:first-child { background: #64748B; }
.anbw-shot:first-child .anbw-thumb { border-color: var(--indigo); box-shadow: 0 0 0 2px var(--indigo-bg); }
.anbw-thumb.is-next { align-items: center; justify-content: center; border-style: dashed; background: #FAFBFD; color: var(--muted); }
.anbw-thumb.is-next .i { font-size: 24px; }
.anbw-shot.is-cleared .anbw-thumb { opacity: .45; }
.anbw-shot figcaption { display: flex; flex-direction: column; min-width: 0; }
.anbw-shot b { font-size: 13px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.anbw-shot small { font-size: 12px; color: var(--muted); }
.anbw-muted { margin: 0; font-size: 13.5px; color: var(--muted); }
/* brief / details / lease */
.anbw-dl { display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr); gap: 7px 14px; margin: 0; font-size: 13.5px; }
.anbw-dl dt { color: var(--muted); }
.anbw-grid.is-android .anbw-dl { grid-template-columns: minmax(80px, 108px) minmax(0, 1fr); }
.anbw-dl dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.anbw-obs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.anbw-obs li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 8px; font-size: 13px; color: var(--text-2); }
.anbw-obs b { color: var(--text); font-weight: 600; }
.anbw-why { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--indigo-bg-2); font-size: 12.5px; color: var(--text-2); }
.anbw-why .i { flex: none; font-size: 15px; color: var(--indigo); margin-top: 1px; }
.anbw-lease .avw-strip { margin-bottom: 10px; }
.anbw-lacts { margin: 12px 0 0; }
.anbw-lacts .btn-outline { flex: 1 1 140px; justify-content: center; }
/* the session card (android layout) */
.anbw-shead { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.anbw-shead > div:first-of-type { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.anbw-shead h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.anbw-tt { width: 40px; height: 40px; padding: 8px; border-radius: 10px; background: #111827; flex: none; }
.anbw-sacts { margin: 0; }
.anbw-sacts .po-btn.anbw-go, .anbw-sacts .po-btn.anbw-take { height: 44px; font-size: 14.5px; }
.anbw-lead { margin: 12px 0; font-size: 14px; color: var(--text-2); }
.anbw-bar { height: 10px; border-radius: 6px; background: var(--track); overflow: hidden; }
.anbw-bar span { display: block; height: 100%; border-radius: 6px; background: var(--indigo); }
.anbw-barl { display: flex; justify-content: space-between; margin: 6px 0 12px; font-size: 13px; color: var(--text-2); }
.anbw-panels { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.anbw-panels li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 6px; border-top: 2px solid var(--track); min-width: 0; }
.anbw-panels li.is-done { border-top-color: var(--green); }
.anbw-panels li.is-now { border-top-color: var(--indigo); }
.anbw-panels li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.anbw-panels b { font-size: 14px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.anbw-panels small { font-size: 12.5px; color: var(--muted); }
.anbw-panels li.is-done small:first-of-type { color: var(--green-text); }
.anbw-panels li.is-now small:first-of-type { color: var(--indigo); }
.anbw-pn { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--track); color: var(--text-2); font-size: 13px; font-weight: 700; }
.anbw-panels li.is-done .anbw-pn { background: var(--indigo); color: #fff; }
.anbw-panels li.is-now .anbw-pn { background: var(--indigo); color: #fff; }
.anbw-pn .i { font-size: 14px; }
.anbw-evcard .anbw-ev { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.anbw-empty .es { padding: 18px 8px; }
/* the New session drawer (S02) */
.anbw-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(15, 22, 45, .35); }
.anbw-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; display: flex; flex-direction: column; width: min(560px, 100%); background: var(--surface);
  box-shadow: -12px 0 32px rgba(15, 22, 45, .18); }
.anbw-drawer[hidden], .anbw-scrim[hidden] { display: none; }
.anbw-dhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--border-soft); }
.anbw-dhead h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--text); }
.anbw-x { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.anbw-x:hover { background: var(--indigo-bg-2); }
.anbw-dbody { flex: 1 1 auto; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; margin: 0; }
.anbw-needs { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.anbw-needs legend { margin-bottom: 8px; font-size: 14px; font-weight: 700; color: var(--text); }
.anbw-need { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.anbw-need:has(input:checked) { border-color: var(--indigo); background: #F7F8FF; }
.anbw-need.is-off { opacity: .6; cursor: not-allowed; }
.anbw-need input { margin-top: 4px; accent-color: var(--indigo); }
.anbw-need > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.anbw-need b { font-size: 14.5px; color: var(--text); }
.anbw-need small { font-size: 12.5px; color: var(--muted); }
.anbw-need em { font-style: normal; font-size: 12.5px; color: var(--amber-text); }
.anbw-nic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 8px; background: var(--indigo-bg-2); color: var(--indigo); }
.anbw-nic .an-pf { width: 20px; height: 20px; }
.anbw-noff { font-size: 13px; }
.anbw-noff summary { cursor: pointer; color: var(--indigo); font-weight: 600; }
.anbw-noff ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.anbw-noff li { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px; background: #F8FAFC; color: var(--text-2); }
.anbw-noff li b { color: var(--text); }
.anbw-part { display: flex; flex-direction: column; gap: 12px; }
.anbw-part[hidden] { display: none; }
.anbw-flabel { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--text); }
.anbw-flabel small { font-weight: 500; color: var(--muted); }
.anbw-pages { display: flex; flex-direction: column; gap: 6px; }
.anbw-chk { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 8px; font-size: 14px; color: var(--text); cursor: pointer; }
.anbw-chk input { margin-top: 3px; accent-color: var(--indigo); }
.anbw-chk span { display: flex; flex-direction: column; min-width: 0; }
.anbw-chk small { font-size: 12px; color: var(--muted); }
.anbw-in { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.anbw-in input, .anbw-in select { height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 14px; font-weight: 400; color: var(--text); }
.anbw-in.is-invalid input, .anbw-in.is-invalid select, .anbw-pages.is-invalid { outline: 2px solid #F3B6C0; outline-offset: 1px; border-radius: 8px; }
.anbw-hint { display: flex; align-items: flex-start; gap: 7px; margin: 0; font-size: 12.5px; color: var(--muted); }
.anbw-hint .i { flex: none; font-size: 14px; margin-top: 1px; }
.anbw-dfoot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--border-soft); background: var(--surface); }
@media (max-width: 1440px) {
  .anbw-grid { grid-template-columns: minmax(0, 1fr) 480px; }
  .anbw-grid.is-android { grid-template-columns: 280px minmax(0, 1fr) 300px; }
  .anbw-ctop { grid-template-columns: 88px minmax(0, 1fr); }
  .anbw-clast { grid-column: 1 / -1; padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--border-soft); }
}
@media (max-width: 1280px) {
  .anbw-grid, .anbw-grid.is-android { grid-template-columns: minmax(0, 1fr); }
  .anbw-grid.is-android { grid-template-columns: 280px minmax(0, 1fr); }
  .anbw-grid.is-android .anbw-side { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .anbw-grid.is-android { grid-template-columns: minmax(0, 1fr); }
  .anbw-grid.is-android .anbw-side { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .anbw-title h1 { font-size: 24px; }
  .anbw-tools { justify-content: flex-start; width: 100%; }
  .anbw-switch { flex: 1 1 100%; }
  .anbw-switch select { flex: 1 1 auto; max-width: none; width: 100%; }
  .anbw-upd { justify-content: flex-start; }
  .anbw-frame { min-height: 320px; }
  .anbw-site { min-height: 300px; }
  .anbw-shero { padding: 24px 16px 12px; }
  .anbw-shero h3 { font-size: 22px; }
  .anbw-snav { gap: 12px; padding: 0 14px; font-size: 12px; }
  .anbw-snav span { display: none; }
  .anbw-sgrid { padding: 6px 16px 110px; }
  .anbw-none { min-height: 300px; }
  .anbw-ev { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anbw-panels { grid-template-columns: minmax(0, 1fr); }
  .anbw-dl { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .anbw-dl dd { margin-bottom: 8px; }
  .anbw-vhead .anbw-dev { width: 100%; }
  .anbw-devb { flex: 1 1 0; justify-content: center; }
  .anbw-device { width: 230px; height: 460px; }
}
/* ---------- Analytics-18 · GA4 property and report selection (plans/Analytics-18.md §2; prefix anga-) ---------- */
.anga-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anga-root .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.anga-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anga-back { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 14px; font-weight: 600; color: var(--indigo); text-decoration: none; }
.anga-back .i { font-size: 16px; }
.anga-head { display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; }
.anga-hmark { width: 48px; height: 48px; flex: none; }
.anga-title { flex: 1 1 420px; min-width: 0; }
.anga-title h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.6px; color: var(--text); }
.anga-title p { margin: 4px 0 0; font-size: 15px; color: var(--text-2); max-width: 900px; }
.anga-pz { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; padding: 10px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.anga-pz > .i { font-size: 22px; color: var(--indigo); }
.anga-pz span { display: flex; flex-direction: column; }
.anga-pz b { font-size: 15px; color: var(--text); }
.anga-pz small { font-size: 12.5px; color: var(--muted); }
.anga-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.anga-tab { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; font-size: 14.5px; font-weight: 600; color: var(--text-2); text-decoration: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px; }
.anga-tab.is-on { color: var(--indigo); border-bottom-color: var(--indigo); }
.anga-tab:not(.is-on):hover { color: var(--text); }
.anga-dstrip { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 10px 16px; border-radius: 12px; }
.anga-dsel, .anga-name { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); min-width: 0; }
.anga-dsel select, .anga-name input { height: 38px; min-width: 0; max-width: 340px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit;
  font-size: 14px; font-weight: 500; color: var(--text); }
.anga-name { flex: 1 1 220px; }
.anga-name input { flex: 1 1 auto; }
.anga-link { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--indigo); cursor: pointer;
  text-decoration: none; }
.anga-link .i { font-size: 15px; }
.anga-banner, .anga-err { margin: 0; }
.anga-grid { display: grid; grid-template-columns: minmax(0, 390px) minmax(0, 1fr) minmax(0, 1.05fr); gap: 16px; align-items: start; }
.anga-card { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; }
.anga-ch { display: flex; align-items: center; gap: 12px; }
.anga-ch h2 { margin: 0; flex: 1 1 auto; font-size: 18px; font-weight: 700; color: var(--text); }
.anga-mk { width: 34px; height: 34px; flex: none; }
.anga-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 8px; background: var(--indigo-bg-2); color: var(--indigo); }
.anga-ic .i { font-size: 19px; }
.anga-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 0; margin: 0; padding: 0; }
.anga-f > span, .anga-f > legend { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text); }
.anga-f > span small { font-weight: 400; color: var(--muted); }
.anga-f > span .i { font-size: 16px; color: var(--muted); }
.anga-f select, .anga-f input[type=text], .anga-date input { height: 42px; min-width: 0; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  font: inherit; font-size: 14.5px; color: var(--text); }
.anga-f > small { font-size: 12.5px; color: var(--muted); }
.anga-f.is-invalid select, .anga-f.is-invalid .anga-chips { border-color: #F0546A; box-shadow: 0 0 0 1px #F0546A; }
.anga-e { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; font-weight: 600; color: #B42339; }
.anga-e .i { flex: none; font-size: 14px; margin-top: 1px; }
.anga-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.anga-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 44px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.anga-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 12px; border-radius: 7px; background: var(--indigo-bg); color: var(--text); font-size: 13.5px;
  font-weight: 500; max-width: 100%; }
.anga-chip.is-bad { background: #FDECEF; color: #B42339; }
.anga-chip.is-ratio { background: var(--amber-bg); color: var(--amber-text); }
.anga-chip button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: inherit; cursor: pointer; }
.anga-chip button:hover { background: rgba(15, 22, 45, .08); }
.anga-chip button .i { font-size: 13px; }
.anga-add { height: 30px !important; flex: 1 1 140px; max-width: 220px; padding: 0 8px !important; border: 1px dashed var(--border) !important; font-size: 13px !important; color: var(--indigo) !important; }
.anga-date { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.anga-date > .i { font-size: 18px; color: var(--indigo); }
.anga-date select { border: 0 !important; height: 36px !important; padding: 0 !important; font-weight: 600; flex: 1 1 140px; }
.anga-date input { height: 34px !important; flex: 1 1 130px; }
.anga-filters { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.anga-filters li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 8px; background: #F8FAFC; font-size: 13.5px; color: var(--text); }
.anga-filters button, .anga-steps button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; flex: none; }
.anga-filters button:hover, .anga-steps button:hover { background: var(--indigo-bg-2); }
.anga-none { margin: 0; padding: 12px; border: 1px dashed var(--border); border-radius: 8px; text-align: center; font-size: 13.5px; color: var(--muted); }
.anga-addf summary { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid #C9D2FF; border-radius: 8px; color: var(--indigo); font-size: 13.5px; font-weight: 600;
  cursor: pointer; list-style: none; }
.anga-addf summary::-webkit-details-marker { display: none; }
.anga-addf summary .i { font-size: 15px; }
.anga-fform { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 8px; align-items: center; }
.anga-fform select, .anga-fform input[type=text] { height: 38px; min-width: 0; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13.5px; }
.anga-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); }
.anga-inline input { accent-color: var(--indigo); }
.anga-checks { flex-direction: row; flex-wrap: wrap; gap: 8px 16px; }
.anga-checks legend { width: 100%; margin-bottom: 4px; }
.anga-checks label { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.anga-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.anga-steps li { display: flex; align-items: center; gap: 8px; }
.anga-steps input { flex: 1 1 auto; height: 38px !important; }
.anga-sn { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); font-size: 12.5px; font-weight: 700; }
.anga-hint { display: flex; align-items: flex-start; gap: 7px; margin: 0; font-size: 12.5px; color: var(--muted); }
.anga-hint .i { flex: none; font-size: 14px; margin-top: 1px; }
.anga-zone { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 10px; background: var(--indigo-bg-2); }
.anga-zone > .i { flex: none; font-size: 24px; color: var(--indigo); margin-top: 2px; }
.anga-zone div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.anga-zone b { font-size: 14px; color: var(--text); }
.anga-zone span { font-size: 14px; color: var(--text); }
.anga-zone small { font-size: 12.5px; color: var(--muted); }
.anga-dl { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 13px; }
.anga-dl dt { color: var(--muted); }
.anga-dl dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.anga-dl dd.is-warn { color: var(--amber-text); font-weight: 600; }
.anga-root .po-btn.anga-small { height: 36px; padding: 0 12px; font-size: 13.5px; align-self: flex-start; }
.anga-cerr { margin: 0; }
.anga-flags { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.anga-twrap { position: relative; overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.anga-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.anga-table th, .anga-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.anga-table thead th { background: #F8FAFC; font-size: 13px; font-weight: 600; color: var(--text-2); }
.anga-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.anga-table tfoot th, .anga-table tfoot td { background: #F4F7FF; font-weight: 700; color: var(--text); border-bottom: 0; }
.anga-table tbody th { font-weight: 600; color: var(--text); }
.anga-table tr.is-other td { color: var(--amber-text); font-style: italic; }
.anga-note { font-size: 12.5px; color: var(--muted); }
.anga-ok { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 10px; font-size: 13px; color: var(--text-2); }
.anga-ok > .i { flex: none; font-size: 26px; color: var(--green); }
.anga-ok span { display: flex; flex-direction: column; gap: 2px; }
.anga-ok b { font-size: 13.5px; color: var(--text); font-weight: 600; }
.anga-ok small { font-size: 12px; color: var(--muted); }
.anga-exports { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 10px; font-size: 13px; color: var(--text-2); }
.anga-exports b { color: var(--text); font-size: 13.5px; }
.anga-exports ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.anga-exports li { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.anga-exports small { color: var(--muted); }
.anga-coll { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px; background: #F8FAFC; font-size: 13px; color: var(--text-2); }
.anga-coll > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.anga-coll b { color: var(--text); font-size: 14px; }
.anga-coll p { margin: 0; color: var(--text); }
.anga-coll small { color: var(--muted); overflow-wrap: anywhere; }
.anga-foot { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 14px 18px; border-radius: 12px; position: sticky; bottom: 8px; z-index: 5; }
.anga-gap { flex: 1 1 auto; }
.anga-root .po-btn.anga-fb { height: 56px; padding: 0 18px; gap: 12px; }
.anga-root .po-btn.anga-fb .i { font-size: 22px; }
.anga-fb span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: left; }
.anga-fb small { font-size: 12px; font-weight: 500; opacity: .8; max-width: 260px; white-space: normal; }
.anga-root .btn-primary.anga-fb small { color: #E0E7FF; }
.anga-fb[disabled] { opacity: .55; cursor: not-allowed; }
@media (max-width: 1400px) {
  .anga-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .anga-prop { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .anga-prop .anga-ch { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .anga-grid { grid-template-columns: minmax(0, 1fr); }
  .anga-prop { display: flex; }
}
@media (max-width: 768px) {
  .anga-title h1 { font-size: 23px; }
  .anga-card { padding: 14px; }
  .anga-row2, .anga-fform { grid-template-columns: minmax(0, 1fr); }
  .anga-dsel, .anga-name { flex: 1 1 100%; }
  .anga-dsel select { flex: 1 1 auto; max-width: none; }
  .anga-foot { position: static; }
  .anga-root .po-btn.anga-fb { flex: 1 1 100%; justify-content: flex-start; }
  .anga-gap { display: none; }
}
/* ---------- Analytics-19 · Advertising and search reports (plans/Analytics-19.md §2; prefix anrs-) ---------- */
.anrs-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anrs-root .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.anrs-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anrs-back { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 14px; font-weight: 600; color: var(--indigo); text-decoration: none; }
.anrs-back .i { font-size: 16px; }
.anrs-head { display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; }
.anrs-hmark { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 4px rgba(15, 22, 45, .10); }
.anrs-hmark .an-pf { width: 34px; height: 34px; }
.anrs-hmark.is-icon { color: var(--indigo); background: var(--indigo-bg-2); }
.anrs-hmark.is-icon .i { font-size: 28px; }
.anrs-title { flex: 1 1 380px; min-width: 0; }
.anrs-title h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.6px; color: var(--text); }
.anrs-title p { margin: 4px 0 0; font-size: 15px; color: var(--text-2); max-width: 820px; }
.anrs-hright { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.anrs-date { display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.anrs-date > .i { font-size: 24px; color: var(--indigo); }
.anrs-date > span:not(.anrs-tip) { display: flex; flex-direction: column; }
.anrs-date b { font-size: 15.5px; color: var(--text); }
.anrs-date small { font-size: 12.5px; color: var(--muted); }
.anrs-tip { display: inline-grid; place-items: center; color: var(--muted); cursor: help; }
.anrs-tip .i { font-size: 16px; }
.anrs-root .po-btn.anrs-hb { height: 50px; padding: 0 18px; font-size: 15px; gap: 8px; }
.anrs-root .po-btn.anrs-hb .i { font-size: 18px; }
.anrs-modes { position: relative; display: flex; gap: 6px; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow-x: auto; scrollbar-width: thin;
  align-self: flex-start; max-width: 100%; }
.anrs-mode { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--text-2);
  text-decoration: none; white-space: nowrap; flex: none; }
.anrs-mode:hover { background: var(--indigo-bg-2); color: var(--text); }
.anrs-mode.is-on { background: var(--indigo); color: #fff; }
.anrs-dot { width: 7px; height: 7px; border-radius: 50%; background: #C8CFDB; flex: none; }
.anrs-dot.is-on { background: #12B981; }
.anrs-mode.is-on .anrs-dot { box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }
.anrs-banner, .anrs-err { margin: 0; }
.anrs-dstrip { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 10px 16px; border-radius: 12px; }
.anrs-dsel, .anrs-name { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); min-width: 0; }
.anrs-dsel select, .anrs-name input { height: 38px; min-width: 0; max-width: 340px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit;
  font-size: 14px; font-weight: 500; color: var(--text); }
.anrs-name { flex: 1 1 220px; }
.anrs-name input { flex: 1 1 auto; }
.anrs-link { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--indigo); cursor: pointer;
  text-decoration: none; align-self: flex-start; }
.anrs-link .i { font-size: 15px; }
.anrs-grid { display: grid; grid-template-columns: minmax(0, 450px) minmax(0, 1fr); gap: 16px; align-items: start; }
.anrs-card { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; min-width: 0; }
.anrs-card h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.anrs-rows { display: flex; flex-direction: column; gap: 12px; }
.anrs-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: start; }
.anrs-rl { padding-top: 11px; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.anrs-rv { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.anrs-rv select, .anrs-pick select, .anrs-pick textarea, select.anrs-rv { height: 42px; width: 100%; min-width: 0; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); font: inherit; font-size: 14.5px; color: var(--text); }
.anrs-pick textarea { height: auto; padding: 8px 12px; resize: vertical; font-size: 13.5px; }
.anrs-rv > small, .anrs-pick > small { font-size: 12.5px; color: var(--muted); }
.anrs-ro { flex-direction: row; align-items: center; gap: 10px; min-height: 42px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; background: #F8FAFC; }
.anrs-ro span { display: flex; flex-direction: column; min-width: 0; }
.anrs-ro b { font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.anrs-ro small { font-size: 12.5px; color: var(--muted); }
.anrs-mk { width: 26px; height: 26px; flex: none; }
.anrs-row.is-invalid select, .anrs-row.is-invalid .anrs-chips, .anrs-row.is-invalid textarea { border-color: #F0546A; box-shadow: 0 0 0 1px #F0546A; }
.anrs-e { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; font-weight: 600; color: #B42339; }
.anrs-e .i { flex: none; font-size: 14px; margin-top: 1px; }
.anrs-date2 { display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.anrs-date2 > .i { font-size: 18px; color: var(--indigo); flex: none; }
.anrs-date2 select { border: 0 !important; height: 40px !important; padding: 0 !important; font-weight: 600; }
.anrs-custom { display: flex; gap: 8px; flex-wrap: wrap; }
.anrs-custom input { height: 38px; flex: 1 1 130px; min-width: 0; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13.5px; }
.anrs-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 44px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.anrs-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 12px; border-radius: 7px; background: var(--indigo-bg); color: var(--text); font-size: 13.5px;
  font-weight: 500; max-width: 100%; }
.anrs-chip.is-bad { background: #FDECEF; color: #B42339; }
.anrs-chip.is-ratio { background: var(--amber-bg); color: var(--amber-text); }
.anrs-chip button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: inherit; cursor: pointer; }
.anrs-chip button:hover { background: rgba(15, 22, 45, .08); }
.anrs-chip button .i { font-size: 13px; }
.anrs-add { height: 30px !important; width: auto !important; flex: 0 1 120px; padding: 0 8px !important; border: 1px dashed var(--border) !important; font-size: 13px !important;
  color: var(--indigo) !important; }
.anrs-none-in { margin: 0; font-size: 13px; color: var(--muted); }
.anrs-filters { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.anrs-filters li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 8px; background: #F8FAFC; font-size: 13.5px; color: var(--text); }
.anrs-filters button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.anrs-addf summary { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid #C9D2FF; border-radius: 8px; color: var(--indigo); font-size: 13.5px;
  font-weight: 600; cursor: pointer; list-style: none; }
.anrs-addf summary::-webkit-details-marker { display: none; }
.anrs-fform { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 8px; align-items: center; }
.anrs-fform select, .anrs-fform input { height: 38px; min-width: 0; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13.5px; }
.anrs-root .po-btn.anrs-small { height: 36px; padding: 0 12px; font-size: 13.5px; gap: 6px; }
.anrs-notes { display: flex; gap: 12px; padding: 14px; border-radius: 10px; background: var(--indigo-bg-2); }
.anrs-notes > .i { flex: none; font-size: 20px; color: var(--indigo); margin-top: 1px; }
.anrs-notes b { font-size: 14px; color: var(--text); }
.anrs-notes p { margin: 4px 0 0; font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.anrs-query summary { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--indigo); cursor: pointer; }
.anrs-query pre { margin: 8px 0 4px; padding: 10px 12px; border-radius: 8px; background: #0F172A; color: #E2E8F0; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.anrs-query small { font-size: 12px; color: var(--muted); }
.anrs-cerr { margin: 0; }
.anrs-ph { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.anrs-ph h2 { font-size: 17px; }
.anrs-gap { flex: 1 1 auto; }
.anrs-sync { font-size: 12.5px; color: var(--muted); }
.anrs-ic { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 8px; background: var(--indigo-bg-2); color: var(--indigo); }
.anrs-runp { align-self: flex-start; }
.anrs-flags { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.anrs-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.anrs-tile { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface); min-width: 0; }
.anrs-tic { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--indigo-bg-2); color: var(--indigo); }
.anrs-tic .i { font-size: 20px; }
.anrs-tile div { display: flex; flex-direction: column; min-width: 0; }
.anrs-tile small { font-size: 12.5px; color: var(--text-2); }
.anrs-tile b { font-size: 24px; font-weight: 800; color: var(--text); letter-spacing: -0.3px; }
.anrs-tile span { font-size: 12px; color: var(--muted); }
.anrs-chart { margin: 0; padding: 14px 14px 10px; border: 1px solid var(--border-soft); border-radius: 10px; display: flex; flex-direction: column; gap: 8px; }
.anrs-chart figcaption { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--text); }
.anrs-legend { display: flex; gap: 14px; font-size: 12.5px; color: var(--text-2); }
.anrs-legend span { display: inline-flex; align-items: center; gap: 6px; }
.anrs-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.anrs-chart svg { width: 100%; height: 200px; display: block; }
.anrs-grid-l { stroke: #EEF1F6; stroke-width: 1; }
.anrs-ax { font-size: 11px; fill: #8A94A6; }
.anrs-chart small { font-size: 12px; color: var(--muted); }
.anrs-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.anrs-tcard { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border-soft); border-radius: 10px; min-width: 0; }
.anrs-th { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--text); }
.anrs-th .po-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; }
.anrs-tcard > small { font-size: 12px; color: var(--muted); }
.anrs-twrap { position: relative; overflow-x: auto; }
.anrs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.anrs-table th, .anrs-table td { padding: 7px 8px; text-align: left; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.anrs-table thead th { background: #F8FAFC; font-size: 12px; font-weight: 600; color: var(--text-2); }
.anrs-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.anrs-table tfoot td { background: #F4F7FF; font-weight: 700; color: var(--text); border-bottom: 0; }
.anrs-table td:first-child { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.anrs-note { font-size: 12.5px; color: var(--muted); }
.anrs-extra { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 10px; font-size: 13px; color: var(--text-2); }
.anrs-extra b { color: var(--text); font-size: 13.5px; }
.anrs-extra p { margin: 0; }
.anrs-extra ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.anrs-extra li { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.anrs-extra li span { overflow-wrap: anywhere; }
.anrs-extra small { color: var(--muted); }
.anrs-ready { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 10px; background: #F8FAFC; }
.anrs-ready > .i { font-size: 34px; color: var(--indigo); flex: none; }
.anrs-ready b { font-size: 15px; color: var(--text); }
.anrs-ready p { margin: 2px 0 0; font-size: 13.5px; color: var(--text-2); }
.anrs-ok { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 10px; font-size: 13px; color: var(--text-2); }
.anrs-ok > .i { flex: none; font-size: 24px; color: var(--green); }
.anrs-ok span { display: flex; flex-direction: column; gap: 2px; }
.anrs-ok b { font-size: 13.5px; color: var(--text); font-weight: 600; }
.anrs-ok small { font-size: 12px; color: var(--muted); }
.anrs-coll { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px; background: #F8FAFC; font-size: 13px; color: var(--text-2); }
.anrs-coll > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.anrs-coll b { color: var(--text); font-size: 14px; }
.anrs-coll p { margin: 0; color: var(--text); }
.anrs-coll small { color: var(--muted); overflow-wrap: anywhere; }
.anrs-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px; }
.anrs-eic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: var(--indigo-bg-2); color: var(--indigo); }
.anrs-eic .an-pf { width: 32px; height: 32px; }
.anrs-eic .i { font-size: 26px; }
.anrs-empty p { margin: 0; font-size: 14px; color: var(--text-2); max-width: 760px; }
.anrs-apis { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--text-2); }
.anrs-other { display: flex; gap: 8px; align-items: flex-start; }
.anrs-other .i { flex: none; margin-top: 2px; color: var(--muted); }
.anrs-foot { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 14px 18px; border-radius: 12px; }
.anrs-root .po-btn.anrs-fb { height: 56px; padding: 0 18px; gap: 12px; }
.anrs-root .po-btn.anrs-fb .i { font-size: 22px; }
.anrs-fb span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: left; }
.anrs-fb small { font-size: 12px; font-weight: 500; opacity: .8; max-width: 260px; white-space: normal; }
.anrs-root .btn-primary.anrs-fb small { color: #E0E7FF; }
.anrs-fb[disabled], .anrs-hb[disabled] { opacity: .55; cursor: not-allowed; }
@media (max-width: 1250px) {
  .anrs-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .anrs-title h1 { font-size: 23px; }
  .anrs-hmark { width: 44px; height: 44px; }
  .anrs-card { padding: 14px; }
  .anrs-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .anrs-rl { padding-top: 0; }
  .anrs-fform { grid-template-columns: minmax(0, 1fr); }
  .anrs-dsel, .anrs-name { flex: 1 1 100%; }
  .anrs-dsel select { flex: 1 1 auto; max-width: none; }
  .anrs-hright { width: 100%; }
  .anrs-date { flex: 1 1 100%; }
  .anrs-root .po-btn.anrs-hb { flex: 1 1 40%; justify-content: center; }
  .anrs-root .po-btn.anrs-fb { flex: 1 1 100%; justify-content: flex-start; }
  .anrs-gap { display: none; }
  .anrs-tile b { font-size: 20px; }
  .anrs-chart svg { height: 160px; }
}
/* ---------- Analytics-20 · CRM and commerce sources (plans/Analytics-20.md §2; prefix anbd-) ---------- */
.anbd-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anbd-root .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.anbd-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anbd-back { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 14px; font-weight: 600; color: var(--indigo); text-decoration: none; }
.anbd-back .i { font-size: 16px; }
.anbd-head { display: flex; align-items: flex-start; gap: 12px 18px; flex-wrap: wrap; }
.anbd-title { flex: 1 1 420px; min-width: 0; }
.anbd-title h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.6px; color: var(--text); }
.anbd-title p { margin: 4px 0 0; font-size: 15px; color: var(--text-2); max-width: 860px; }
.anbd-hright { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.anbd-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 16px 22px; list-style: none; border-radius: 12px; }
.anbd-step { position: relative; display: flex; align-items: center; min-width: 0; }
.anbd-step > a, .anbd-step { gap: 12px; color: inherit; text-decoration: none; }
.anbd-step > a { display: flex; align-items: center; min-width: 0; }
.anbd-step:not(:last-child)::after { content: ""; flex: 1 1 auto; height: 2px; margin: 0 6px 0 14px; min-width: 16px; background: var(--track); border-radius: 2px; }
.anbd-step.is-done:not(:last-child)::after { background: var(--indigo); }
.anbd-sn { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--indigo-bg); color: var(--text); font-size: 17px; font-weight: 800; }
.anbd-step.is-current .anbd-sn { background: var(--indigo); color: #fff; box-shadow: 0 0 0 4px var(--indigo-bg); }
.anbd-step.is-done .anbd-sn { background: var(--indigo); color: #fff; }
.anbd-sn .i { font-size: 18px; }
.anbd-sl { display: flex; flex-direction: column; min-width: 0; }
.anbd-sl b { font-size: 15px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anbd-step.is-current .anbd-sl b { color: var(--indigo); }
.anbd-sl small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anbd-banner, .anbd-err { margin: 0; }
.anbd-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 16px; align-items: start; }
.anbd-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.anbd-card { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; min-width: 0; }
.anbd-card h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.anbd-badge { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--indigo); color: #fff; font-size: 13px; font-weight: 800; }
.anbd-sub { margin: -4px 0 0; font-size: 13.5px; color: var(--muted); }
.anbd-group { margin: 6px 0 -4px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
.anbd-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.anbd-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: inherit;
  text-decoration: none; min-width: 0; }
.anbd-item:hover { border-color: #C9D2F5; background: var(--indigo-bg-2); }
.anbd-item.is-on { border-color: var(--indigo); background: var(--indigo-bg); box-shadow: 0 0 0 1px var(--indigo); }
.anbd-item.is-off { background: #FAFBFD; }
.anbd-item.is-off .anbd-it b { color: var(--text-2); }
.anbd-ic { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 9px; background: var(--indigo-bg-2); color: var(--indigo); }
.anbd-ic .an-pf { width: 24px; height: 24px; }
.anbd-ic .i { font-size: 19px; }
.anbd-ic.big { width: 54px; height: 54px; border-radius: 12px; }
.anbd-ic.big .an-pf { width: 34px; height: 34px; }
.anbd-ic.big .i { font-size: 26px; }
.anbd-it { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.anbd-it b { font-size: 14.5px; color: var(--text); overflow-wrap: anywhere; }
.anbd-it small { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.anbd-item.is-on .anbd-it small { color: var(--indigo); }
.anbd-chev { font-size: 16px; color: var(--muted-2); flex: none; }
.anbd-na { flex: none; }
.anbd-intro p { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.5; }
.anbd-rules { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.anbd-rules li { display: flex; gap: 10px; font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.anbd-rules .i { flex: none; font-size: 18px; color: var(--indigo); margin-top: 1px; }
.anbd-h3 { margin: 6px 0 0; font-size: 14.5px; font-weight: 700; color: var(--text); }
.anbd-h3 small { font-size: 12px; font-weight: 500; color: var(--muted); }
.anbd-recent { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.anbd-recent li { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 8px; }
.anbd-recent a { display: flex; flex-direction: column; min-width: 0; color: inherit; text-decoration: none; }
.anbd-recent a b { font-size: 13.5px; color: var(--indigo); }
.anbd-recent a small { font-size: 12px; color: var(--muted); }
.anbd-cfgcols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 18px; }
.anbd-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.anbd-sysline { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: #F8FAFC; }
.anbd-sysline > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.anbd-sysline b { font-size: 14px; color: var(--text); }
.anbd-sysline small { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.anbd-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.anbd-field select { height: 42px; width: 100%; min-width: 0; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit;
  font-size: 14.5px; font-weight: 500; color: var(--text); }
.anbd-field small { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.anbd-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; }
.anbd-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 14px; border: 1.5px dashed #BFC8E6; border-radius: 12px;
  background: var(--indigo-bg-2); text-align: center; cursor: pointer; }
.anbd-drop:hover, .anbd-drop:focus-within { border-color: var(--indigo); }
.anbd-drop .i { font-size: 28px; color: var(--indigo); }
.anbd-drop b { font-size: 14.5px; color: var(--text); }
.anbd-drop small { font-size: 12.5px; color: var(--muted); }
.anbd-drop.is-off { cursor: default; opacity: .7; }
.anbd-filecard { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 14px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface); }
.anbd-fi { font-size: 30px; color: var(--indigo); }
.anbd-fname { display: flex; flex-direction: column; min-width: 0; }
.anbd-fname b { font-size: 15px; color: var(--text); overflow-wrap: anywhere; }
.anbd-fname small { font-size: 12.5px; color: var(--muted); }
.anbd-ok { font-size: 22px; color: var(--green); }
.anbd-replace { position: relative; grid-column: 2 / 4; justify-self: end; cursor: pointer; }
.anbd-kv { display: grid; gap: 8px 14px; margin: 0; }
.anbd-kv div { display: flex; flex-direction: column; min-width: 0; }
.anbd-kv dt { font-size: 12px; font-weight: 600; color: var(--muted); }
.anbd-kv dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.anbd-kv dd.is-green { color: var(--green-text); }
.anbd-kv dd.is-red { color: #B42339; }
.anbd-kv.row { grid-template-columns: repeat(3, minmax(0, auto)); justify-content: end; }
.anbd-kv.grid { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 10px; background: #F8FAFC; }
.anbd-kv.list div { flex-direction: row; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border-soft); }
.anbd-kv.list dd { text-align: right; }
.anbd-tmpl, .anbd-refresh { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.anbd-tmpl legend, .anbd-refresh legend { padding: 0; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.anbd-radio { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; }
.anbd-radio:has(input:checked) { border-color: var(--indigo); background: var(--indigo-bg); }
.anbd-radio input { margin-top: 3px; accent-color: var(--indigo); flex: none; }
.anbd-radio span { display: flex; flex-direction: column; min-width: 0; }
.anbd-radio b { font-size: 14px; color: var(--text); }
.anbd-radio small { font-size: 12.5px; color: var(--muted); }
.anbd-radio.is-off { cursor: default; background: #FAFBFD; }
.anbd-radio.is-off b { color: var(--text-2); }
.anbd-lbl { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0; font-size: 14px; font-weight: 700; color: var(--text); }
.anbd-lbl small { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.anbd-lbl .i { font-size: 16px; color: var(--indigo); align-self: center; }
.anbd-sql { margin: 0; padding: 12px 14px; max-height: 240px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; background: #0F172A; color: #E2E8F0;
  font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; }
.anbd-map { width: 100%; border-collapse: collapse; font-size: 13.5px; table-layout: fixed; }
.anbd-map th { padding: 8px 10px; text-align: left; font-size: 12.5px; font-weight: 700; color: var(--text-2); background: #F4F6FB; border-bottom: 1px solid var(--border); }
.anbd-map td { padding: 7px 10px; border-bottom: 1px solid var(--border-soft); color: var(--text); vertical-align: middle; overflow-wrap: anywhere; }
.anbd-map select { width: 100%; height: 36px; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 13.5px; }
.anbd-map tr.is-invalid select { border-color: #F0546A; box-shadow: 0 0 0 1px #F0546A; }
.anbd-map code { font-size: 12.5px; color: var(--text-2); }
.anbd-req { color: #B42339; font-weight: 700; }
.anbd-e { display: flex; gap: 5px; margin-top: 4px; font-size: 12px; font-weight: 600; color: #B42339; }
.anbd-e .i { flex: none; font-size: 13px; margin-top: 1px; }
.anbd-never { display: flex; gap: 8px; margin: 0; padding: 9px 11px; border-radius: 9px; background: #F6F7FA; font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.anbd-never .i { flex: none; font-size: 16px; color: var(--muted); margin-top: 1px; }
.anbd-never small { color: var(--muted); }
.anbd-empty { margin: 0; font-size: 13.5px; color: var(--muted); }
.anbd-thead { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; }
.anbd-thead h2 { flex: 1 1 auto; }
.anbd-sum { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px; border: 1px solid var(--border-soft); border-radius: 12px; background: #F8FAFC; }
.anbd-sumt { display: flex; flex-direction: column; flex: 1 1 160px; min-width: 0; }
.anbd-sumt b { font-size: 16px; color: var(--text); }
.anbd-sumt small { font-size: 13px; color: var(--muted); }
.anbd-tmsg, .anbd-ro, .anbd-note { margin: 0; }
.anbd-twrap { position: relative; overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.anbd-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 520px; }
.anbd-table th { padding: 9px 12px; text-align: left; font-size: 12.5px; font-weight: 700; color: var(--text-2); background: #F4F6FB; border-bottom: 1px solid var(--border); white-space: nowrap; }
.anbd-table td { padding: 9px 12px; border-bottom: 1px solid var(--border-soft); color: var(--text); vertical-align: top; }
.anbd-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.anbd-table tfoot th, .anbd-table tfoot td { background: #F4F6FB; border-bottom: 0; font-size: 14px; }
.anbd-table tr.is-rejected td { background: #FFF6F7; }
.anbd-table tr.is-duplicate td { background: #FFFBF1; }
.anbd-st { display: inline-flex; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.anbd-st.is-accepted { background: var(--green-bg); color: var(--green-text); }
.anbd-st.is-duplicate { background: var(--amber-bg); color: var(--amber-text); }
.anbd-st.is-rejected { background: #FDE8EB; color: #B42339; }
.anbd-why { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.anbd-note2 { display: flex; gap: 6px; margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.anbd-note2 .i { flex: none; font-size: 14px; margin-top: 2px; }
.anbd-transfer { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; font-size: 13.5px; color: var(--text-2); }
.anbd-transfer small { color: var(--muted); }
.anbd-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px 12px; flex-wrap: wrap; }
.anbd-foot .po-btn { height: 46px; padding: 0 20px; font-size: 15px; gap: 8px; }
.anbd-why2 { flex: 1 1 100%; text-align: right; font-size: 12.5px; color: var(--muted); }
.anbd-vgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 16px; align-items: start; }
.anbd-checks { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.anbd-checks li { display: flex; gap: 8px; font-size: 13.5px; color: var(--text-2); line-height: 1.4; }
.anbd-checks .i { flex: none; font-size: 16px; margin-top: 1px; }
.anbd-checks .is-ok .i { color: var(--green); }
.anbd-checks .is-warn .i { color: var(--amber); }
.anbd-checks .is-fail .i { color: #E11D48; }
.anbd-ready { display: flex; gap: 10px; padding: 12px 14px; border-radius: 10px; font-size: 13.5px; }
.anbd-ready span { display: flex; flex-direction: column; gap: 3px; }
.anbd-ready small { font-size: 12.5px; line-height: 1.45; }
.anbd-ready .i { flex: none; font-size: 20px; }
.anbd-ready.is-ok { background: var(--green-bg); color: var(--green-text); }
.anbd-ready.is-no { background: var(--amber-bg); color: var(--amber-text); }
.anbd-done { align-items: flex-start; }
.anbd-okbig { margin: 0; }
.anbd-okbig .i { font-size: 44px; color: var(--green); }
.anbd-links { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.anbd-links small { color: var(--muted); }
@media (max-width: 1400px) {
  .anbd-grid { grid-template-columns: minmax(0, 270px) minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .anbd-grid, .anbd-vgrid { grid-template-columns: minmax(0, 1fr); }
  .anbd-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anbd-step::after { display: none; }
}
@media (max-width: 768px) {
  .anbd-cfgcols, .anbd-2 { grid-template-columns: minmax(0, 1fr); }
  .anbd-kv.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anbd-kv.row { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; }
  .anbd-title h1 { font-size: 25px; }
  .anbd-steps { padding: 12px 14px; }
  .anbd-sl small { display: none; }
  .anbd-foot .po-btn { flex: 1 1 160px; justify-content: center; }
  .anbd-why2 { text-align: left; }
  .anbd-card { padding: 16px; }
}
/* ---------- Analytics-21 · Website analysis request (plans/Analytics-21.md §2; prefix anwa-) ---------- */
.anwa-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anwa-root .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.anwa-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anwa-top { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: -8px; }
.anwa-top:empty { display: none; }
.anwa-banner, .anwa-err { margin: 0; }
.anwa-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.anwa-card { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; min-width: 0; }
.anwa-card h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.anwa-card h2 .i { font-size: 22px; color: var(--indigo); flex: none; }
.anwa-sub { margin: 0; font-size: 13px; color: var(--muted); }
.anwa-form { display: flex; flex-direction: column; gap: 14px; }
.anwa-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; }
.anwa-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.anwa-field > input, .anwa-field > select { height: 42px; width: 100%; min-width: 0; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  font: inherit; font-size: 14.5px; font-weight: 500; color: var(--text); }
.anwa-field > select:disabled { background: #F8FAFC; color: var(--text-2); }
.anwa-field small { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.anwa-field.is-invalid > input, .anwa-chips.is-invalid { border-color: #F0546A; box-shadow: 0 0 0 1px #F0546A; }
.anwa-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 42px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.anwa-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 30px; padding: 0 4px 0 10px; border-radius: 7px; background: var(--indigo-bg); font-size: 13px;
  font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.anwa-chip button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 5px; background: none; color: var(--muted); cursor: pointer; }
.anwa-chip button:hover { background: #DDE3FB; color: var(--text); }
.anwa-chip .i { font-size: 13px; }
.anwa-add { flex: 1 1 110px; min-width: 90px; height: 30px; border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--text); outline: none; }
.anwa-ev { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.anwa-ev legend { padding: 0; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.anwa-check { display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); cursor: pointer; }
.anwa-check:has(input:checked) { border-color: #C9D2F5; background: var(--indigo-bg-2); }
.anwa-check input { margin-top: 3px; accent-color: var(--indigo); flex: none; }
.anwa-check span { display: flex; flex-direction: column; min-width: 0; }
.anwa-check b { font-size: 13.5px; font-weight: 600; color: var(--text); }
.anwa-check small { font-size: 12px; color: var(--muted); }
.anwa-check:has(input:disabled) { cursor: default; opacity: .75; }
.anwa-run { align-self: flex-start; height: 46px; padding: 0 22px; font-size: 15px; gap: 8px; }
.anwa-dl { display: flex; flex-direction: column; margin: 0; }
.anwa-dl div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); }
.anwa-dl div:last-child { border-bottom: 0; }
.anwa-dl dt { font-size: 13.5px; color: var(--text-2); }
.anwa-dl dd { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.anwa-dl ol { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; font-weight: 400; color: var(--text-2); }
.anwa-rhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.anwa-rhead > div { flex: 1 1 200px; min-width: 0; }
.anwa-sico { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; }
.anwa-sico .i { font-size: 22px; }
.anwa-sico.is-green { background: var(--green-bg); color: var(--green); }
.anwa-sico.is-amber { background: var(--amber-bg); color: var(--amber); }
.anwa-sico.is-red { background: #FDE8EB; color: #E11D48; }
.anwa-sico.is-blue { background: var(--indigo-bg); color: var(--indigo); }
.anwa-full { gap: 8px; }
.anwa-pages { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.anwa-page { display: flex; gap: 14px; align-items: flex-start; padding: 10px; border: 1px solid var(--border-soft); border-radius: 10px; min-width: 0; }
.anwa-thumb { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 120px; height: 72px; flex: none; border: 1px dashed #CBD2E1;
  border-radius: 8px; background: #F8FAFC; color: var(--muted-2); }
.anwa-thumb .i { font-size: 22px; }
.anwa-thumb small { font-size: 11px; }
.anwa-pinfo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.anwa-pinfo p { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.anwa-purl { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.anwa-code { font-size: 13px; color: var(--text-2); }
.anwa-meta { font-size: 12.5px; color: var(--muted); }
.anwa-meta span { color: #CBD2E1; }
.anwa-note { margin: 0; font-size: 12.5px; color: var(--muted); }
.anwa-keys { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.anwa-keys li { display: grid; grid-template-columns: 26px minmax(110px, 170px) minmax(0, 1fr); gap: 4px 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--border-soft); }
.anwa-keys li:last-child { border-bottom: 0; }
.anwa-kico .i { font-size: 20px; }
.anwa-keys .is-good .anwa-kico { color: var(--green); }
.anwa-keys .is-attention .anwa-kico { color: var(--amber); }
.anwa-keys .is-problem .anwa-kico { color: #E11D48; }
.anwa-keys .is-info .anwa-kico { color: var(--indigo); }
.anwa-keys .is-untested .anwa-kico { color: var(--muted-2); }
.anwa-keys b { font-size: 13.5px; color: var(--text); }
.anwa-ktext { font-size: 13.5px; color: var(--text-2); }
.anwa-kind { grid-column: 3; justify-self: start; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.anwa-kind.is-observed { background: var(--indigo-bg); color: var(--indigo); }
.anwa-kind.is-heuristic { background: var(--amber-bg); color: var(--amber-text); }
.anwa-kind.is-untested { background: #EEF0F5; color: var(--text-2); }
.anwa-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.anwa-col ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.anwa-col li { position: relative; padding-left: 14px; font-size: 13.5px; color: var(--text-2); line-height: 1.45; overflow-wrap: anywhere; }
.anwa-col li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2); }
.anwa-col li.is-good::before { background: var(--green); }
.anwa-col li.is-attention::before { background: var(--amber); }
.anwa-col li.is-problem::before { background: #E11D48; }
.anwa-col li.is-info::before { background: var(--indigo); }
.anwa-area { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); }
.anwa-col.is-observed h2 .i { color: var(--indigo); }
.anwa-col.is-heuristic h2 .i { color: var(--amber); }
.anwa-col.is-untested h2 .i { color: var(--muted); }
.anwa-empty { color: var(--muted); }
.anwa-none p { margin: 0; font-size: 14px; color: var(--text-2); }
.anwa-hist ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.anwa-hist small { color: var(--muted); }
@media (max-width: 1250px) {
  .anwa-grid { grid-template-columns: minmax(0, 1fr); }
  .anwa-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .anwa-2, .anwa-ev { grid-template-columns: minmax(0, 1fr); }
  .anwa-dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .anwa-keys li { grid-template-columns: 26px minmax(0, 1fr); }
  .anwa-keys .anwa-ktext, .anwa-kind { grid-column: 2; }
  .anwa-page { flex-direction: column; }
  .anwa-thumb { width: 100%; height: 56px; flex-direction: row; }
  .anwa-run { align-self: stretch; justify-content: center; }
  .anwa-card { padding: 16px; }
}
/* ---------- Analytics-22 · Landing page and technical analysis (plans/Analytics-22.md §2; prefix anlp-) ---------- */
.anlp-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anlp-root .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.anlp-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anlp-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-top: -6px; }
.anlp-bl { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 380px; }
.anlp-back { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 13.5px; font-weight: 600; color: var(--indigo); text-decoration: none; }
.anlp-back:hover { text-decoration: underline; }
.anlp-back .i { font-size: 15px; }
.anlp-meta { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin: 0; font-size: 13.5px; color: var(--text-2); }
.anlp-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.anlp-acts .po-btn { height: 44px; padding: 0 18px; gap: 8px; font-size: 14.5px; }
.anlp-acts button:disabled { opacity: .55; cursor: not-allowed; }
.anlp-err, .anlp-taskline { margin: 0; }
.anlp-hint { margin: -6px 0 0; font-size: 12.5px; color: var(--muted); text-align: right; }
.anlp-pages { display: flex; gap: 8px; flex-wrap: wrap; }
.anlp-pages a { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  font-size: 13.5px; font-weight: 600; color: var(--text-2); text-decoration: none; max-width: 100%; overflow-wrap: anywhere; }
.anlp-pages a:hover { border-color: #C9D2FF; color: var(--text); }
.anlp-pages a[aria-current="page"] { border-color: var(--indigo); background: var(--indigo-bg); color: var(--indigo); }
.anlp-dot { width: 8px; height: 8px; border-radius: 50%; background: #E11D48; flex: none; }
.anlp-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; min-width: 0; }
.anlp-card h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.anlp-card h2 .i { font-size: 21px; color: var(--indigo); flex: none; }
.anlp-card h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); }
.anlp-chead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.anlp-chead .po-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 600; }
.anlp-sub { margin: 0; font-size: 13px; color: var(--muted); }
.anlp-row1 { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1.05fr); gap: 16px; align-items: stretch; }
.anlp-row2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.anlp-url { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.anlp-url .i { font-size: 13px; margin-left: 4px; vertical-align: -1px; }
.anlp-shot { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-height: 180px; padding: 16px; border-radius: 10px; }
.anlp-shot.is-none { flex-direction: row; align-items: center; gap: 12px; border: 1px dashed #CBD2E1; background: #F8FAFC; color: var(--muted-2); }
.anlp-shot.is-none > .i { font-size: 30px; flex: none; }
.anlp-shot.is-none p { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.anlp-shot.is-none b { font-size: 14px; color: var(--text); }
.anlp-shot.is-none span { font-size: 12.5px; color: var(--muted); }
.anlp-shot.is-capture { position: relative; padding-top: 34px; border: 1px solid var(--border); background: linear-gradient(160deg, #1E2A4A, #34466F); color: #fff; }
.anlp-shot-bar { position: absolute; top: 0; left: 0; right: 0; display: flex; gap: 5px; align-items: center; height: 22px; padding: 0 10px; border-radius: 10px 10px 0 0;
  background: rgba(255, 255, 255, .12); }
.anlp-shot-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .5); }
.anlp-shot-h { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.anlp-shot-cta { align-self: flex-start; padding: 6px 14px; border-radius: 7px; background: var(--indigo); font-size: 13px; font-weight: 700; }
.anlp-shot small { font-size: 12px; color: rgba(255, 255, 255, .8); }
.anlp-shot small .po-link { color: #fff; text-decoration: underline; }
.anlp-dl { display: flex; flex-direction: column; margin: 0; }
.anlp-dl div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border-soft); }
.anlp-dl div:last-child { border-bottom: 0; }
.anlp-dl dt { font-size: 13px; color: var(--text-2); }
.anlp-dl dd { margin: 0; font-size: 13px; font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.anlp-caps { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.anlp-caps li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.anlp-caps li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.anlp-caps b { font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; }
.anlp-caps small { font-size: 12px; color: var(--muted); }
.anlp-cthumb { display: grid; place-items: center; width: 64px; height: 42px; flex: none; border-radius: 7px; background: linear-gradient(160deg, #1E2A4A, #34466F); color: #fff; }
.anlp-cthumb .i { font-size: 18px; }
.anlp-sess { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 600; }
.anlp-empty { margin: 0; font-size: 13px; color: var(--muted); }
.anlp-quote { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 8px 10px; border-left: 3px solid var(--indigo); border-radius: 4px; background: var(--indigo-bg-2);
  font-size: 13.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.anlp-quote small { font-size: 11.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.anlp-checks { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.anlp-checks li { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); min-width: 0; }
.anlp-checks li:last-child { border-bottom: 0; }
.anlp-cl { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.anlp-cl b { font-size: 13px; font-weight: 600; color: var(--text); }
.anlp-cl small { font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.anlp-cl small .po-link, .anlp-sub .po-link, .anlp-empty .po-link, .anlp-url .po-link, .anlp-taskline .po-link { display: inline; font-size: inherit; white-space: normal; overflow-wrap: anywhere; }
.anlp-cv { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; max-width: 55%; text-align: right; }
.anlp-cv .po-chip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.anlp-kind { padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.anlp-kind.is-observed { background: var(--indigo-bg); color: var(--indigo); }
.anlp-kind.is-heuristic { background: var(--amber-bg); color: var(--amber-text); }
.anlp-kind.is-untested { background: #EEF0F5; color: var(--text-2); }
.anlp-foot { margin: auto 0 0; font-size: 12px; color: var(--muted); }
.anlp-foot.anlp-warn { color: var(--text-2); }
.anlp-pcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.anlp-pcol { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 10px; min-width: 0; }
.anlp-pcol ul { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.anlp-pcol li { display: flex; flex-direction: column; min-width: 0; }
.anlp-pcol b { font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.anlp-pcol small { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.anlp-klist { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.anlp-klist li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 8px; align-items: start; padding: 10px 12px; border: 1px solid var(--border-soft);
  border-radius: 10px; min-width: 0; }
.anlp-klist .anlp-kind { grid-column: 2; justify-self: start; }
.anlp-kico .i { font-size: 19px; }
.anlp-klist .is-good .anlp-kico { color: var(--green); }
.anlp-klist .is-attention .anlp-kico { color: var(--amber); }
.anlp-klist .is-problem .anlp-kico { color: #E11D48; }
.anlp-klist .is-info .anlp-kico { color: var(--indigo); }
.anlp-klist .is-untested .anlp-kico { color: var(--muted-2); }
.anlp-kt { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.anlp-kt b { font-size: 13px; color: var(--text); }
.anlp-kt small { font-size: 11.5px; color: var(--muted); }
.anlp-fid { align-self: flex-start; font-size: 11.5px; font-weight: 800; color: var(--indigo); text-decoration: none; }
a.anlp-fid:hover { text-decoration: underline; }
.anlp-all { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; scroll-margin-top: 80px; }
.anlp-col ul { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.anlp-col li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--border-soft); border-left-width: 3px; border-radius: 8px;
  font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; scroll-margin-top: 80px; }
.anlp-col li.is-good { border-left-color: var(--green); }
.anlp-col li.is-attention { border-left-color: var(--amber); }
.anlp-col li.is-problem { border-left-color: #E11D48; }
.anlp-col li.is-info { border-left-color: var(--indigo); }
.anlp-col li.is-untested { border-left-color: #CBD2E1; }
.anlp-col li.anlp-empty { border: 0; padding: 0; }
.anlp-col li:target { box-shadow: 0 0 0 2px var(--indigo); }
.anlp-fhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.anlp-area { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); }
.anlp-fpage { font-size: 11.5px; color: var(--muted); }
.anlp-ftext { color: var(--text); }
.anlp-fev, .anlp-fwhen { font-size: 11.5px; color: var(--muted); }
.anlp-col.is-observed h2 .i { color: var(--indigo); }
.anlp-col.is-heuristic h2 .i { color: var(--amber); }
.anlp-col.is-untested h2 .i { color: var(--muted); }
.anlp-cmp-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.anlp-cmp-cols ul { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 0; padding: 0 0 0 16px; font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.anlp-cmp-cols li.anlp-empty { list-style: none; margin-left: -16px; }
@media (max-width: 1400px) {
  .anlp-row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .anlp-row1, .anlp-all { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .anlp-row2, .anlp-pcols, .anlp-cmp-cols { grid-template-columns: minmax(0, 1fr); }
  .anlp-acts { width: 100%; }
  .anlp-acts .po-btn { flex: 1 1 100%; justify-content: center; }
  .anlp-hint { text-align: left; }
  .anlp-dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .anlp-klist { grid-template-columns: minmax(0, 1fr); }
  .anlp-card { padding: 14px; }
  .anlp-shot { min-height: 140px; }
}
/* ---------- Analytics-23 · Extraction recipe builder (plans/Analytics-23.md §2; prefix anrc-) ---------- */
.anrc-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anrc-root .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.anrc-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anrc-back { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 13.5px; font-weight: 600; color: var(--indigo); text-decoration: none; }
.anrc-back:hover { text-decoration: underline; }
.anrc-back .i { font-size: 15px; }
.anrc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-top: -6px; }
.anrc-title { flex: 1 1 520px; min-width: 0; }
.anrc-title h1 { margin: 0; font-size: 28px; font-weight: 800; color: var(--text); }
.anrc-title p { margin: 4px 0 0; font-size: 14px; color: var(--text-2); max-width: 900px; }
.anrc-hright { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.anrc-switch { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.anrc-switch select { height: 40px; max-width: 280px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 13.5px;
  color: var(--text); }
.anrc-hright .po-btn { height: 40px; gap: 6px; }
.anrc-banner, .anrc-err { margin: 0; }
.anrc-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; min-width: 0; }
.anrc-card h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.anrc-card h2 .i { font-size: 20px; color: var(--indigo); flex: none; }
.anrc-chead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.anrc-sub { margin: 0; font-size: 13px; color: var(--muted); }
.anrc-foot { margin: auto 0 0; font-size: 12px; color: var(--muted); }
.anrc-empty { margin: 0; font-size: 13px; color: var(--muted); }
.anrc-row1 { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 1.2fr); gap: 16px; align-items: stretch; }
.anrc-row2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; align-items: stretch; }
.anrc-row3 { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 16px; align-items: stretch; }
.anrc-row4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.anrc-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text-2); }
.anrc-field > input, .anrc-field > select { height: 40px; width: 100%; min-width: 0; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  font: inherit; font-size: 14px; font-weight: 500; color: var(--text); }
.anrc-field > select:disabled, .anrc-field > input:disabled { background: #F8FAFC; color: var(--text-2); }
.anrc-field small { font-size: 12px; font-weight: 400; color: var(--muted); }
.anrc-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.anrc-rtop { display: flex; gap: 12px; align-items: flex-start; }
.anrc-nic { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 10px; background: var(--indigo-bg); color: var(--indigo); }
.anrc-nic .i, .anrc-nic .an-pf { font-size: 22px; width: 22px; height: 22px; }
.anrc-rname { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.anrc-rsub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; font-size: 13px; color: var(--text-2); }
.anrc-steps { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 0; padding: 0; list-style: none; }
.anrc-steps li { display: flex; align-items: flex-start; gap: 10px; padding: 6px 4px; }
.anrc-steps li > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.anrc-steps b { font-size: 13.5px; color: var(--text); }
.anrc-steps small { font-size: 12px; color: var(--muted); }
.anrc-sn { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); font-size: 13px;
  font-weight: 700; color: var(--text-2); }
.anrc-steps .is-done .anrc-sn { border-color: var(--green); background: var(--green-bg); color: var(--green); }
.anrc-steps .is-current .anrc-sn { border-color: var(--indigo); background: var(--indigo); color: #fff; }
.anrc-steps .is-current b { color: var(--indigo); }
.anrc-needs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.anrc-need { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); text-decoration: none;
  color: inherit; min-width: 0; }
a.anrc-need:hover { border-color: #C9D2FF; }
.anrc-need.is-on { border-color: var(--indigo); background: var(--indigo-bg-2); }
.anrc-need.is-off { opacity: .6; }
.anrc-need .anrc-nic { width: 34px; height: 34px; border-radius: 8px; }
.anrc-need > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.anrc-need b { font-size: 13.5px; color: var(--text); }
.anrc-need small { font-size: 12px; color: var(--muted); }
.anrc-need em { font-size: 11.5px; font-style: normal; color: var(--amber-text); }
.anrc-dl { display: flex; flex-direction: column; margin: 0; }
.anrc-dl div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border-soft); }
.anrc-dl div:last-child { border-bottom: 0; }
.anrc-dl dt { font-size: 13px; color: var(--text-2); }
.anrc-dl dd { margin: 0; font-size: 13px; font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.anrc-tik { display: flex; flex-direction: column; gap: 8px; }
.anrc-why { margin: 0; }
.anrc-noff summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-2); }
.anrc-noff ul { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.anrc-noff li { display: flex; flex-direction: column; font-size: 12.5px; color: var(--muted); }
.anrc-noff b { font-size: 12.5px; color: var(--text); }
.anrc-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; }
.anrc-check input { accent-color: var(--indigo); flex: none; }
.anrc-check.is-small { padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 12.5px; }
.anrc-frame { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; min-width: 0; }
.anrc-fbar { display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; background: #F1F4FA; border-bottom: 1px solid var(--border-soft); min-width: 0; }
.anrc-fbar i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #CBD2E1; }
.anrc-fbar em { margin-left: 8px; font-size: 12px; font-style: normal; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anrc-outline { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 12px 14px; list-style: none; max-height: 270px; overflow: auto; }
.anrc-outline li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; min-width: 0; }
.anrc-outline li.lv-1 { font-size: 15px; font-weight: 800; color: var(--text); }
.anrc-outline li.lv-2, .anrc-outline li.lv-3 { font-weight: 700; color: var(--text); }
.anrc-outline li.is-block { margin-top: 4px; padding-top: 5px; border-top: 1px dashed #C9D2FF; }
.anrc-outline li.is-price { color: var(--green); font-weight: 600; }
.anrc-bmark { padding: 0 6px; border-radius: 5px; background: var(--indigo-bg); font-size: 10.5px; font-weight: 800; color: var(--indigo); flex: none; }
.anrc-obtn { padding: 2px 10px; border-radius: 6px; background: var(--indigo); font-size: 12px; font-weight: 700; color: #fff; }
.anrc-screens { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.anrc-screens li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 10px; }
.anrc-screens b { font-size: 13.5px; color: var(--text); }
.anrc-screens span { font-size: 12.5px; color: var(--muted); }
.anrc-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 40px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.anrc-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 28px; padding: 0 4px 0 10px; border-radius: 7px; background: var(--indigo-bg); font-size: 13px;
  font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.anrc-chip button, .anrc-rm { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 5px; background: none; color: var(--muted); cursor: pointer; }
.anrc-chip button:hover, .anrc-rm:hover { background: #DDE3FB; color: var(--text); }
.anrc-chip .i, .anrc-rm .i { font-size: 13px; }
.anrc-add { flex: 1 1 110px; min-width: 90px; height: 28px; border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--text); outline: none; }
.anrc-panels { display: flex; gap: 10px 16px; flex-wrap: wrap; margin: 0; padding: 0; border: 0; }
.anrc-panels legend { padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.anrc-tablewrap { max-width: 100%; overflow-x: auto; }
.anrc-table, .anrc-ttable { width: 100%; border-collapse: collapse; font-size: 13px; }
.anrc-table th, .anrc-ttable th { padding: 6px 6px; border-bottom: 1px solid var(--border); text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.anrc-table td { padding: 5px 4px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.anrc-table select, .anrc-table input[type="text"] { width: 100%; min-width: 0; height: 34px; padding: 0 6px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface);
  font: inherit; font-size: 13px; color: var(--text); }
.anrc-table td:first-child { width: 36%; }
.anrc-table td:nth-child(3) { width: 104px; min-width: 104px; }
.anrc-req { text-align: center; }
.anrc-req input { accent-color: var(--indigo); width: 16px; height: 16px; }
.anrc-rmcell { width: 30px; }
.anrc-addf { align-self: flex-start; height: 36px; gap: 6px; }
.anrc-ttable td { padding: 6px; border-bottom: 1px solid var(--border-soft); color: var(--text); overflow-wrap: anywhere; }
.anrc-ttable td.is-missing { color: var(--muted); background: #FFF8EC; }
.anrc-dedup { display: flex; gap: 6px; flex-wrap: wrap; }
.anrc-rule { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 12.5px; color: var(--text-2); }
.anrc-rule .i { font-size: 15px; color: var(--green); flex: none; margin-top: 1px; }
.anrc-ev { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; font-size: 13px; font-weight: 500; color: var(--text); }
.anrc-ev li { display: flex; align-items: center; gap: 6px; }
.anrc-ev .i { font-size: 13px; color: var(--green); }
.anrc-per, .anrc-msgs { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--text-2); }
.anrc-per b { color: var(--text); }
.anrc-msgs li { position: relative; padding-left: 14px; }
.anrc-msgs li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--indigo); }
.anrc-pre { margin: 0; padding: 12px 14px; border-radius: 10px; background: #0F172A; color: #E2E8F0; font-size: 12.5px; line-height: 1.5; overflow: auto; max-height: 220px;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.anrc-schema .po-btn, .anrc-acts .po-btn { gap: 6px; }
.anrc-idgrid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end; }
.anrc-acts { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 8px; }
.anrc-acts .po-btn { height: 42px; justify-content: center; }
.anrc-acts button:disabled { opacity: .5; cursor: not-allowed; }
.anrc-vers ul, .anrc-runs ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--text-2); }
.anrc-vers li { display: flex; gap: 10px; flex-wrap: wrap; }
.anrc-vers b { color: var(--text); }
.anrc-runs small { color: var(--muted); }
.anrc-runs .anrc-foot .po-link, .anrc-foot .po-link { display: inline; font-size: inherit; white-space: normal; }
.ansr-info .ansr-info-acts { flex: none; display: flex; gap: 8px; flex-wrap: wrap; }
.anbw-recipes { margin: 0; font-size: 12.5px; color: var(--muted); }
.anbw-recipes .po-link, .anbw-brief .anbw-recipe { display: inline; font-size: 13px; white-space: normal; }
@media (max-width: 1400px) {
  .anrc-row1, .anrc-row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anrc-prev, .anrc-test { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .anrc-row1, .anrc-row2, .anrc-row3, .anrc-row4 { grid-template-columns: minmax(0, 1fr); }
  .anrc-idgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .anrc-needs, .anrc-2 { grid-template-columns: minmax(0, 1fr); }
  .anrc-dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .anrc-card { padding: 14px; }
  .anrc-title h1 { font-size: 24px; }
  .anrc-table thead { display: none; }
  .anrc-table, .anrc-table tbody, .anrc-table tr, .anrc-table td { display: block; width: 100%; }
  .anrc-table tr { position: relative; padding: 8px 34px 8px 0; border-bottom: 1px solid var(--border); }
  .anrc-table td { padding: 3px 0; border: 0; }
  .anrc-table td:first-child { width: 100%; }
  .anrc-table td[data-label]::before { content: attr(data-label); display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); }
  .anrc-req { text-align: left; }
  .anrc-rmcell { position: absolute; top: 8px; right: 0; width: auto; }
  .anrc-acts { grid-template-columns: minmax(0, 1fr); }
  .anrc-switch, .anrc-switch select { width: 100%; max-width: none; }
}
/* ---------- Analytics-24 · Extracted data preview (plans/Analytics-24.md §2; prefix anxp-) ---------- */
.anxp-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anxp-root .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.anxp-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anxp-back { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 13.5px; font-weight: 600; color: var(--indigo); text-decoration: none; }
.anxp-back:hover { text-decoration: underline; }
.anxp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-top: -6px; }
.anxp-title { flex: 1 1 520px; min-width: 0; }
.anxp-title h1 { margin: 0; font-size: 28px; font-weight: 800; color: var(--text); }
.anxp-title p { margin: 4px 0 0; font-size: 14px; color: var(--text-2); max-width: 900px; }
.anxp-hright { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.anxp-switch { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); min-width: 0; }
.anxp-switch select { height: 40px; max-width: 360px; min-width: 0; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit;
  font-size: 13.5px; color: var(--text); }
.anxp-err { margin: 0; }
.anxp-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; min-width: 0; }
.anxp-card h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.anxp-chead { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.anxp-chead .po-btn { gap: 6px; }
.anxp-sub { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.anxp-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.anxp-kpi { display: flex; align-items: flex-start; gap: 12px; padding: 16px; min-width: 0; }
.anxp-kpi > div { display: flex; flex-direction: column; min-width: 0; }
.anxp-kic { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); }
.anxp-kic .i { font-size: 22px; }
.anxp-kpi.is-green .anxp-kic { background: var(--green-bg); color: var(--green); }
.anxp-kpi.is-amber .anxp-kic { background: var(--amber-bg); color: var(--amber-text); }
.anxp-kpi.is-red .anxp-kic { background: #FDECEE; color: var(--red); }
.anxp-kpi.is-grey .anxp-kic { background: #EEF1F6; color: var(--muted); }
.anxp-kv { font-size: 26px; font-weight: 800; color: var(--text); line-height: 1.15; overflow-wrap: anywhere; }
.anxp-kv.is-word { font-size: 20px; }
.anxp-kl { font-size: 14px; font-weight: 600; color: var(--text); }
.anxp-kpi small { font-size: 12px; color: var(--muted); }
.anxp-row { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.anxp-row2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.anxp-twrap { position: relative; overflow-x: auto; min-width: 0; border: 1px solid var(--border-soft); border-radius: 10px; }
.anxp-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.anxp-table th { padding: 10px 12px; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--text-2); background: #F6F8FC; border-bottom: 1px solid var(--border-soft);
  white-space: nowrap; }
.anxp-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-soft); color: var(--text); vertical-align: top; }
.anxp-table tbody tr:last-child td { border-bottom: 0; }
.anxp-table tr.is-dup td { background: #FFF1F2; }
.anxp-table tr.is-rej td { color: var(--muted); }
.anxp-table tr.is-acc td { background: #F3FBF7; }
.anxp-table td.is-miss { color: var(--amber-text); font-style: italic; }
.anxp-table td.anxp-gone { color: var(--muted); }
.anxp-table tr.is-purged td { color: var(--muted); }
.anxp-stw .anxp-purged { color: var(--muted); max-width: 260px; }
.anxp-ck { width: 36px; }
.anxp-ck input { accent-color: var(--indigo); width: 16px; height: 16px; }
.anxp-no { color: var(--muted) !important; }
.anxp-page { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.anxp-when { white-space: nowrap; }
.anxp-when small { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); }
.anxp-stw { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.anxp-stw small { font-size: 11.5px; color: var(--muted); }
.anxp-stw .anxp-prob, .anxp-stw .anxp-why { color: var(--amber-text); max-width: 260px; }
.anxp-root .anxp-dl .po-link, .anxp-root .anxp-links .po-link, .anxp-root .anxp-banner .po-link { display: inline; white-space: normal; }
.anxp-num { text-align: right; font-variant-numeric: tabular-nums; }
.anxp-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border-soft); background: #F6F8FC; flex-wrap: wrap; }
.anxp-banner > div { flex: 1 1 300px; min-width: 0; }
.anxp-banner b { font-size: 14px; color: var(--text); }
.anxp-banner p { margin: 2px 0 0; font-size: 13px; color: var(--text-2); }
.anxp-banner.is-red { background: #FFF1F2; border-color: #FBD0D6; }
.anxp-banner.is-red b, .anxp-banner.is-red .anxp-bic { color: var(--red); }
.anxp-banner.is-amber { background: var(--amber-bg); border-color: var(--amber-line); }
.anxp-banner.is-amber .anxp-bic { color: var(--amber-text); }
.anxp-bic .i { font-size: 24px; }
.anxp-banner .po-btn { gap: 6px; }
.anxp-sid { display: flex; align-items: center; gap: 10px; }
.anxp-sid > div { display: flex; flex-direction: column; min-width: 0; }
.anxp-sid b { font-size: 14px; }
.anxp-sid small { font-size: 12px; color: var(--muted); }
.anxp-dl { display: flex; flex-direction: column; margin: 0; }
.anxp-dl div { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 10px; padding: 5px 0; }
.anxp-dl dt { font-size: 13px; color: var(--text-2); }
.anxp-dl dd { margin: 0; font-size: 13px; font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.anxp-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; margin: 4px 0 0; padding: 0; list-style: none; }
.anxp-checks li { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.anxp-checks li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.anxp-checks b { font-size: 13.5px; color: var(--text); }
.anxp-checks small { font-size: 12px; color: var(--muted); }
.anxp-cic { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--green-bg); color: var(--green); }
.anxp-checks .is-warn .anxp-cic { background: var(--amber-bg); color: var(--amber-text); }
.anxp-checks .is-bad .anxp-cic { background: #FDECEE; color: var(--red); }
.anxp-cic .i { font-size: 17px; }
.anxp-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.anxp-acts .po-btn { gap: 6px; }
.anxp-root .po-btn.is-danger { color: var(--red); border-color: #F5B7C0; }
.anxp-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.anxp-field input { height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13.5px; font-weight: 400; color: var(--text); min-width: 0; }
.anxp-note { margin: 0; font-size: 12.5px; color: var(--muted); }
.anxp-links { margin: 0; font-size: 13px; color: var(--text-2); }
.anxp-empty { align-items: center; text-align: center; padding: 40px 18px; }
.anxp-empty p { margin: 0; color: var(--text-2); }
.anxp-eic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); }
.anxp-eic .i { font-size: 26px; }
.anxp-eact { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.anxp-eact .po-btn { gap: 6px; }
@media (max-width: 1400px) { .anxp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .anxp-row, .anxp-row2 { grid-template-columns: minmax(0, 1fr); } .anxp-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .anxp-kpis { grid-template-columns: minmax(0, 1fr); }
  .anxp-checks { grid-template-columns: minmax(0, 1fr); }
  .anxp-title h1 { font-size: 24px; }
  .anxp-switch { flex-wrap: wrap; width: 100%; }
  .anxp-switch select { width: 100%; max-width: 100%; }
  .anxp-acts .po-btn { flex: 1 1 100%; justify-content: center; }
}
/* ---------- Analytics-25 · Field mapping and normalization (plans/Analytics-25.md §2; prefix anmp-) ---------- */
.anmp-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anmp-root .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.anmp-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anmp-back { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 13.5px; font-weight: 600; color: var(--indigo); text-decoration: none; }
.anmp-back:hover { text-decoration: underline; }
.anmp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-top: -6px; }
.anmp-title { flex: 1 1 480px; min-width: 0; }
.anmp-title h1 { margin: 0; font-size: 28px; font-weight: 800; color: var(--text); }
.anmp-title p { margin: 4px 0 0; font-size: 14px; color: var(--text-2); max-width: 860px; }
.anmp-hright { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.anmp-hright .po-btn { height: 42px; gap: 6px; }
.anmp-switch { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); min-width: 0; }
.anmp-switch select { height: 40px; max-width: 320px; min-width: 0; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit;
  font-size: 13.5px; color: var(--text); }
.anmp-banner, .anmp-err { margin: 0; }
.anmp-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; }
.anmp-src { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "ic name" "dl dl"; gap: 8px 10px; padding: 12px 14px; text-decoration: none;
  color: inherit; border: 1px solid transparent; min-width: 0; }
.anmp-src:hover { border-color: #C9D2FF; }
.anmp-src.is-on { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo) inset; }
.anmp-sic { grid-area: ic; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); }
.anmp-sic .i, .anmp-sic .an-pf { font-size: 22px; width: 22px; height: 22px; }
.anmp-sname { grid-area: name; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.anmp-sname b { font-size: 14.5px; color: var(--text); }
.anmp-sname small { max-width: 100%; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anmp-src .po-chip { margin-top: 2px; }
.anmp-sdl { grid-area: dl; display: flex; flex-direction: column; margin: 0; }
.anmp-sdl div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 12.5px; }
.anmp-sdl dt { color: var(--text-2); }
.anmp-sdl dd { margin: 0; font-weight: 600; color: var(--text); text-align: right; }
.anmp-row { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; }
.anmp-main, .anmp-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anmp-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; min-width: 0; }
.anmp-card h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.anmp-card h2 > .i { font-size: 19px; color: var(--indigo); }
.anmp-chead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.anmp-chead .po-btn { gap: 6px; }
.anmp-sub { margin: 0; font-size: 13px; color: var(--muted); }
.anmp-foot { margin: 0; font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; }
.anmp-twrap { position: relative; overflow-x: auto; min-width: 0; border: 1px solid var(--border-soft); border-radius: 10px; }
.anmp-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.anmp-table th { padding: 9px 10px; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--text-2); background: #F6F8FC; border-bottom: 1px solid var(--border-soft);
  white-space: nowrap; }
.anmp-table td { padding: 9px 10px; border-bottom: 1px solid var(--border-soft); color: var(--text); vertical-align: top; }
.anmp-table tbody tr:last-child td { border-bottom: 0; }
.anmp-table td small { display: block; font-size: 11.5px; color: var(--muted); }
.anmp-table code { font-size: 12.5px; }
.anmp-edit select, .anmp-edit input[type=text] { height: 34px; width: 100%; min-width: 88px; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface);
  font: inherit; font-size: 13px; color: var(--text); }
.anmp-edit select:disabled, .anmp-edit input:disabled { background: #F8FAFC; color: var(--muted); }
.anmp-edit td.is-off > * { visibility: hidden; }
.anmp-add input { accent-color: var(--indigo); width: 16px; height: 16px; }
.anmp-ex span { display: block; font-size: 12.5px; color: var(--text-2); }
.anmp-ex small { color: var(--green-text) !important; font-weight: 600; }
.anmp-zone { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.anmp-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--text-2); min-width: 0; }
.anmp-field select { height: 38px; min-width: 220px; max-width: 100%; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit;
  font-size: 13.5px; color: var(--text); }
.anmp-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.anmp-acts .po-btn { gap: 6px; }
.anmp-vf b { font-size: 13px; color: var(--text); }
.anmp-vf ul { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--text-2); }
.anmp-vf li { display: flex; align-items: center; gap: 8px; }
.anmp-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.anmp-list li { display: flex; flex-direction: column; min-width: 0; }
.anmp-list b { font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; }
.anmp-list small { font-size: 12.5px; color: var(--muted); }
.anmp-checks { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.anmp-checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 13.5px; }
.anmp-checks li > span { color: var(--green); display: grid; }
.anmp-checks li.is-bad > span { color: var(--red); }
.anmp-checks b { font-weight: 500; color: var(--text); }
.anmp-checks em { font-style: normal; color: var(--text-2); font-variant-numeric: tabular-nums; }
.anmp-verr { margin: 0; padding: 8px 10px; border-radius: 8px; background: #FFF1F2; color: var(--red); font-size: 13px; }
.anmp-norm { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.anmp-norm li { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 10px; background: #F6F8FC; min-width: 0; }
.anmp-norm b { font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; }
.anmp-norm small { font-size: 12px; color: var(--muted); }
.anmp-impact p { margin: 0; font-size: 13px; color: var(--text-2); }
.anmp-impact .po-btn { align-self: flex-start; gap: 6px; }
@media (max-width: 1280px) { .anmp-row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) {
  .anmp-title h1 { font-size: 24px; }
  .anmp-switch { flex-wrap: wrap; width: 100%; }
  .anmp-switch select, .anmp-field select { width: 100%; min-width: 0; max-width: 100%; }
  .anmp-hright .po-btn { flex: 1 1 100%; justify-content: center; }
  .anmp-twrap { border: 0; overflow: visible; }
  .anmp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .anmp-table, .anmp-table tbody, .anmp-table tr, .anmp-table td { display: block; width: 100%; }
  .anmp-table tr { margin-bottom: 10px; border: 1px solid var(--border-soft); border-radius: 10px; }
  .anmp-table td { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; border-bottom: 1px solid var(--border-soft); }
  .anmp-table td::before { content: attr(data-label); font-size: 12px; font-weight: 600; color: var(--text-2); }
  .anmp-edit td.is-off { display: none; }
  .anmp-acts .po-btn { flex: 1 1 100%; justify-content: center; }
}
/* ---------- Analytics-26 · Sync scheduling and backfill (plans/Analytics-26.md §2; prefix ansy-) ---------- */
.ansy-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ansy-root .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ansy-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ansy-back { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 13.5px; font-weight: 600; color: var(--indigo); text-decoration: none; }
.ansy-back:hover { text-decoration: underline; }
.ansy-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-top: -6px; }
.ansy-title { flex: 1 1 520px; min-width: 0; }
.ansy-title h1 { margin: 0; font-size: 28px; font-weight: 800; color: var(--text); }
.ansy-title p { margin: 4px 0 0; font-size: 14px; color: var(--text-2); max-width: 920px; }
.ansy-hright { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.ansy-hright .po-btn { height: 40px; gap: 6px; }
.ansy-switch { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); min-width: 0; }
.ansy-switch select { height: 40px; max-width: 320px; min-width: 0; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit;
  font-size: 13.5px; color: var(--text); }
.ansy-banner, .ansy-err { margin: 0; }
.ansy-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 16px; align-items: start; }
.ansy-left { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ansy-card { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; min-width: 0; }
.ansy-card h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.ansy-card h2 > .i { font-size: 20px; color: var(--indigo); }
.ansy-chead { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ansy-sub { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.ansy-grid1 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 10px 12px; align-items: end; }
.ansy-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text-2); }
.ansy-field select, .ansy-field input { height: 40px; width: 100%; min-width: 0; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  font: inherit; font-size: 14px; font-weight: 500; color: var(--text); }
.ansy-field select:disabled, .ansy-field input:disabled { background: #F8FAFC; color: var(--text-2); }
.ansy-field[hidden] { display: none; }
.ansy-next { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--indigo-bg-2); min-width: 0; }
.ansy-next span { font-size: 12.5px; color: var(--text-2); }
.ansy-next b { font-size: 14px; color: var(--text); }
.ansy-next small { font-size: 11.5px; color: var(--muted); }
.ansy-line { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 14px; align-items: end; }
.ansy-line p { margin: 0 0 4px; font-size: 12.5px; color: var(--muted); }
.ansy-ro { display: block; padding: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--text); }
.ansy-note { margin: 0; font-size: 12.5px; color: var(--text-2); }
.ansy-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.ansy-acts .po-btn { gap: 6px; }
.ansy-root .po-btn.is-danger { color: var(--red); border-color: #F5B7C0; }
.ansy-bf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.2fr); gap: 10px 12px; align-items: end; }
.ansy-bfsum { display: flex; flex-direction: column; margin: 0 0 4px; }
.ansy-bfsum b { font-size: 14px; color: var(--text); }
.ansy-bfsum small { font-size: 12.5px; color: var(--muted); }
.ansy-legend { display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--text-2); flex-wrap: wrap; }
.ansy-legend li { display: flex; align-items: center; gap: 6px; }
.ansy-legend i { width: 10px; height: 10px; border-radius: 50%; }
.ansy-legend .is-sync { background: var(--indigo); }
.ansy-legend .is-bf { background: #CFE0FF; }
.ansy-legend .is-cov { background: var(--green-bg); border: 1px solid var(--green); }
.ansy-calrow { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.ansy-cal { border: 1px solid var(--border-soft); border-radius: 12px; padding: 12px; min-width: 0; }
.ansy-calhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ansy-calhead b { font-size: 16px; color: var(--text); }
.ansy-nav { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--text-2); text-decoration: none; }
.ansy-nav:hover { background: #F1F4FA; }
.ansy-month { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ansy-month th { padding: 4px 0; font-size: 12px; font-weight: 600; color: var(--text-2); text-align: center; }
.ansy-month td { padding: 3px 0; text-align: center; }
.ansy-day { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 13px; font-weight: 600; color: var(--text); }
.ansy-day.is-other { color: #B6BDCB; font-weight: 500; }
.ansy-day.is-cov { background: var(--green-bg); }
.ansy-day.is-bf { background: #DCE8FF; }
.ansy-day.is-sync { box-shadow: inset 0 0 0 2px var(--indigo); }
.ansy-day.is-today { box-shadow: inset 0 0 0 2px #9AA8C7; }
.ansy-day.is-next { background: var(--indigo); color: #fff; box-shadow: none; }
.ansy-side { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: 1px solid var(--border-soft); border-radius: 12px; min-width: 0; }
.ansy-side li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); }
.ansy-side li:last-child { border-bottom: 0; }
.ansy-side li > span { color: var(--indigo); padding-top: 2px; }
.ansy-side li > div { display: flex; flex-direction: column; min-width: 0; }
.ansy-side b { font-size: 13px; color: var(--text); }
.ansy-side em { font-style: normal; font-size: 13.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.ansy-side small { font-size: 12px; color: var(--muted); }
.ansy-upsert { display: flex; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--indigo-bg-2); font-size: 12.5px; color: var(--text-2); }
.ansy-upsert > .i { color: var(--indigo); font-size: 20px; flex: none; }
.ansy-upsert b { display: block; font-size: 13.5px; color: var(--indigo); }
.ansy-queue { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ansy-queue li { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 10px;
  background: #F8FAFF; }
.ansy-queue li > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.ansy-queue b { font-size: 13.5px; color: var(--text); }
.ansy-queue small { font-size: 12px; color: var(--muted); }
.ansy-qacts { display: flex; gap: 8px; flex-wrap: wrap; }
.ansy-qacts .po-btn { gap: 6px; }
.ansy-twrap { position: relative; overflow-x: auto; min-width: 0; border: 1px solid var(--border-soft); border-radius: 10px; }
.ansy-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ansy-table th { padding: 9px 12px; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--text-2); background: #F6F8FC; border-bottom: 1px solid var(--border-soft);
  white-space: nowrap; }
.ansy-table td { padding: 9px 12px; border-bottom: 1px solid var(--border-soft); color: var(--text); vertical-align: top; }
.ansy-table tbody tr:last-child td { border-bottom: 0; }
.ansy-num { text-align: right; font-variant-numeric: tabular-nums; }
.ansy-msg { font-size: 12.5px; color: var(--text-2); min-width: 220px; }
@media (max-width: 1280px) { .ansy-row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .ansy-grid1 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ansy-calrow { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) {
  .ansy-title h1 { font-size: 24px; }
  .ansy-switch { flex-wrap: wrap; width: 100%; }
  .ansy-switch select { width: 100%; max-width: 100%; }
  .ansy-grid1, .ansy-line, .ansy-bf { grid-template-columns: minmax(0, 1fr); }
  .ansy-day { width: 30px; height: 30px; font-size: 12px; }
  .ansy-acts .po-btn, .ansy-qacts .po-btn { flex: 1 1 100%; justify-content: center; }
  .ansy-twrap { border: 0; overflow: visible; }
  .ansy-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ansy-table, .ansy-table tbody, .ansy-table tr, .ansy-table td { display: block; width: 100%; }
  .ansy-table tr { margin-bottom: 10px; border: 1px solid var(--border-soft); border-radius: 10px; }
  .ansy-table td { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 8px; }
  .ansy-table td::before { content: attr(data-label); font-size: 12px; font-weight: 600; color: var(--text-2); }
  .ansy-msg { min-width: 0; }
}
/* ---------- Analytics-27 · Analytics sync jobs (plans/Analytics-27.md §2; prefix anjb-) ---------- */
.anjb-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anjb-root .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.anjb-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anjb-back { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 13.5px; font-weight: 600; color: var(--indigo); text-decoration: none; }
.anjb-back:hover { text-decoration: underline; }
.anjb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-top: -6px; }
.anjb-title { flex: 1 1 520px; min-width: 0; }
.anjb-title h1 { margin: 0; font-size: 28px; font-weight: 800; color: var(--text); }
.anjb-title p { margin: 4px 0 0; font-size: 14px; color: var(--text-2); max-width: 920px; }
.anjb-hright { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.anjb-hright .po-btn { height: 40px; gap: 6px; }
.anjb-banner, .anjb-err { margin: 0; }
.anjb-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.anjb-tile { display: flex; align-items: center; gap: 14px; padding: 16px 18px; min-width: 0; }
.anjb-tile > div { display: flex; flex-direction: column; min-width: 0; }
.anjb-tile b { font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--text); }
.anjb-tile > div > span { font-size: 14.5px; font-weight: 600; color: var(--text); }
.anjb-tile small { font-size: 12.5px; color: var(--muted); }
.anjb-tic { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; font-size: 24px; }
.anjb-tic.is-green { background: var(--green-bg); color: var(--green); }
.anjb-tic.is-blue { background: var(--indigo-bg); color: var(--indigo); }
.anjb-tic.is-red { background: #FDECEF; color: var(--red); }
.anjb-tic.is-amber { background: var(--amber-bg); color: var(--amber); }
.anjb-tic.is-grey { background: var(--track); color: var(--text-2); }
.anjb-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 390px); gap: 16px; align-items: start; }
.anjb-card, .anjb-panel { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; min-width: 0; }
.anjb-card h2, .anjb-panel h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.anjb-card h2 > .i { font-size: 20px; color: var(--indigo); }
.anjb-chead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.anjb-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.anjb-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--text-2); text-decoration: none; background: var(--surface); }
.anjb-pill span { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; background: var(--track); font-size: 11.5px; }
.anjb-pill.is-on { border-color: var(--indigo); background: var(--indigo); color: #fff; }
.anjb-pill.is-on span { background: rgba(255, 255, 255, .22); color: #fff; }
.anjb-twrap { position: relative; overflow-x: auto; min-width: 0; border: 1px solid var(--border-soft); border-radius: 10px; }
.anjb-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.anjb-table th { padding: 10px 9px; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--text-2); background: #F6F8FC; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.anjb-table td { padding: 10px 9px; border-bottom: 1px solid var(--border-soft); color: var(--text); vertical-align: middle; }
.anjb-table tbody tr:last-child td { border-bottom: 0; }
.anjb-tr { cursor: pointer; }
.anjb-tr:hover td { background: #FAFBFE; }
.anjb-tr.is-on td { background: var(--indigo-bg-2); }
.anjb-tr.is-on td:first-child { box-shadow: inset 3px 0 0 var(--indigo); }
.anjb-ck { width: 30px; }
.anjb-ck input { width: 16px; height: 16px; accent-color: var(--indigo); }
.anjb-src { display: flex; align-items: center; gap: 8px; min-width: 0; }
.anjb-src b { font-size: 13px; font-weight: 700; }
.anjb-src .an-pf, .anjb-pmark { width: 26px; height: 26px; flex: none; }
.anjb-mk { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--track); color: var(--text-2); font-size: 15px; flex: none; }
.anjb-acc { display: block; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.anjb-open { display: block; font-weight: 600; color: var(--text); text-decoration: none; }
.anjb-open:hover { color: var(--indigo); text-decoration: underline; }
.anjb-table small { display: block; font-size: 12px; color: var(--muted); }
.anjb-nowrap { white-space: nowrap; }
.anjb-foot { margin: 0; font-size: 12.5px; color: var(--muted); }
.anjb-panel { position: sticky; top: 12px; }
.anjb-phead { display: flex; align-items: flex-start; gap: 10px; }
.anjb-phead > div { flex: 1 1 auto; min-width: 0; }
.anjb-phead h2 { font-size: 18px; }
.anjb-phead p { margin: 2px 0 0; font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.anjb-pmark { margin-top: 2px; }
.anjb-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-soft); }
.anjb-tab { height: 38px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.anjb-tab.is-on { color: var(--indigo); border-bottom-color: var(--indigo); }
.anjb-pane[hidden] { display: none; }
.anjb-reason { display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; margin-bottom: 10px; font-size: 13px; }
.anjb-reason.is-red { background: #FDECEF; color: #8F1D30; }
.anjb-reason.is-amber { background: var(--amber-bg); color: var(--amber-text); }
.anjb-reason > .i { flex: none; font-size: 18px; margin-top: 1px; }
.anjb-reason b { display: block; font-size: 13.5px; }
.anjb-reason p { margin: 2px 0 0; }
.anjb-reason small { display: block; margin-top: 4px; opacity: .85; }
.anjb-facts { display: flex; flex-direction: column; margin: 0; }
.anjb-facts > div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.anjb-facts > div:last-child { border-bottom: 0; }
.anjb-facts dt { color: var(--text-2); }
.anjb-facts dd { margin: 0; color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
.anjb-note { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.anjb-hist { display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; padding: 0; list-style: none; }
.anjb-hist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 8px; font-size: 13px; }
.anjb-hist li > span:nth-child(2) { grid-column: 1; color: var(--text-2); }
.anjb-hist .po-chip { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.anjb-hist small { grid-column: 1; font-size: 12px; color: var(--muted); }
.anjb-acts { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; border-top: 1px solid var(--border-soft); }
.anjb-acts .po-btn { gap: 6px; }
.anjb-root .po-btn.is-danger { color: var(--red); border-color: #F5B7C0; }
@media (max-width: 1400px) { .anjb-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1280px) { .anjb-row { grid-template-columns: minmax(0, 1fr); } .anjb-panel { position: static; } }
@media (max-width: 768px) {
  .anjb-title h1 { font-size: 24px; }
  .anjb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .anjb-tile { padding: 12px; gap: 10px; }
  .anjb-tic { width: 40px; height: 40px; font-size: 19px; }
  .anjb-hright .po-btn { flex: 1 1 100%; justify-content: center; }
  .anjb-twrap { border: 0; overflow: visible; }
  .anjb-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .anjb-table, .anjb-table tbody, .anjb-table tr, .anjb-table td { display: block; width: 100%; }
  .anjb-table tr { margin-bottom: 10px; border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; }
  .anjb-table td { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; padding: 8px 12px; }
  .anjb-table td::before { content: attr(data-label); font-size: 12px; font-weight: 600; color: var(--text-2); }
  .anjb-table td.anjb-ck { display: block; }
  .anjb-table td > .po-chip { justify-self: start; }
  .anjb-table td.anjb-ck::before { content: none; }
  .anjb-acc { max-width: none; white-space: normal; }
  .anjb-tr.is-on td:first-child { box-shadow: none; }
  .anjb-facts > div { grid-template-columns: 110px minmax(0, 1fr); }
  .anjb-acts .po-btn { flex: 1 1 100%; justify-content: center; }
}
/* ---------- Analytics-28 · Collection run and evidence (plans/Analytics-28.md §2; prefix anrn-) ---------- */
.anrn-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anrn-root .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.anrn-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anrn-crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); }
.anrn-crumbs a { font-weight: 600; color: var(--indigo); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.anrn-crumbs a:hover { text-decoration: underline; }
.anrn-crumbs b { color: var(--text); font-weight: 600; }
.anrn-headcard { display: flex; align-items: center; gap: 16px 20px; padding: 16px 20px; flex-wrap: wrap; min-width: 0; }
.anrn-hic { display: grid; place-items: center; flex: none; width: 58px; height: 58px; border-radius: 50%; font-size: 28px; }
.anrn-hic.is-green { background: var(--green-bg); color: var(--green); }
.anrn-hic.is-red { background: #FDECEF; color: var(--red); }
.anrn-hic.is-amber { background: var(--amber-bg); color: var(--amber); }
.anrn-hic.is-blue, .anrn-hic.is-grey { background: var(--indigo-bg); color: var(--indigo); }
.anrn-htitle { flex: 1 1 360px; min-width: 0; }
.anrn-hrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.anrn-htitle h1 { margin: 0; font-size: 24px; font-weight: 800; color: var(--text); }
.anrn-htitle p { margin: 4px 0 0; font-size: 14px; color: var(--text-2); overflow-wrap: anywhere; }
.anrn-hfacts { display: grid; grid-template-columns: repeat(4, minmax(110px, auto)); margin: 0; }
.anrn-hfacts > div { padding: 2px 18px; border-left: 1px solid var(--border-soft); min-width: 0; }
.anrn-hfacts dt { font-size: 12.5px; color: var(--muted); }
.anrn-hfacts dd { margin: 3px 0 0; font-size: 14px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.anrn-banner, .anrn-err { margin: 0; }
.anrn-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.anrn-acts .po-btn { gap: 6px; }
.anrn-root .po-btn.is-danger { color: var(--red); border-color: #F5B7C0; }
.anrn-row3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.anrn-row2 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.anrn-row2b { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.anrn-card { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; min-width: 0; }
.anrn-card h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.anrn-h3 { margin: 6px 0 0; font-size: 14px; font-weight: 700; color: var(--text); }
.anrn-chead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.anrn-count { padding: 2px 8px; border-radius: 6px; background: var(--track); font-size: 12px; font-weight: 600; color: var(--text-2); }
.anrn-steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.anrn-step { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding-bottom: 14px; }
.anrn-step:not(:last-child)::before { content: ""; position: absolute; left: 14px; top: 30px; bottom: 2px; width: 2px; background: var(--border-soft); }
.anrn-sdot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 15px; color: #fff; background: var(--green); position: relative; z-index: 1; }
.anrn-step.is-warning .anrn-sdot { background: var(--amber); }
.anrn-step.is-failed .anrn-sdot, .anrn-step.is-unknown .anrn-sdot { background: var(--red); }
.anrn-step.is-skipped .anrn-sdot, .anrn-step.is-waiting .anrn-sdot { background: var(--track); color: var(--muted); }
.anrn-step.is-running .anrn-sdot { background: var(--indigo); }
.anrn-shead { display: flex; justify-content: space-between; gap: 8px; }
.anrn-shead b { font-size: 14.5px; color: var(--text); }
.anrn-stime { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.anrn-step p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; }
.anrn-step small { display: block; font-size: 12px; color: var(--muted); }
.anrn-results { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: 1px solid var(--border-soft); border-radius: 10px; }
.anrn-results li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--border-soft); }
.anrn-results li:last-child { border-bottom: 0; }
.anrn-results b { font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.anrn-rl { font-size: 13px; color: var(--text); }
.anrn-rl small { display: block; font-size: 11.5px; color: var(--muted); }
.anrn-ric { font-size: 19px; }
.anrn-ric.is-green { color: var(--green); } .anrn-ric.is-red { color: var(--red); } .anrn-ric.is-blue { color: var(--indigo); } .anrn-ric.is-amber { color: var(--amber); }
.anrn-ric.is-grey { color: var(--muted); }
.anrn-outcome { display: flex; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 10px; font-size: 13px; }
.anrn-outcome > .i { flex: none; font-size: 20px; }
.anrn-outcome b { display: block; font-size: 13.5px; }
.anrn-outcome small { display: block; margin-top: 2px; }
.anrn-outcome.is-green { background: var(--green-bg); color: var(--green-text); }
.anrn-outcome.is-red { background: #FDECEF; color: #8F1D30; }
.anrn-outcome.is-amber { background: var(--amber-bg); color: var(--amber-text); }
.anrn-outcome.is-blue, .anrn-outcome.is-grey { background: var(--indigo-bg-2); color: var(--text); }
.anrn-dl { display: flex; flex-direction: column; margin: 0; }
.anrn-dl > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.anrn-dl > div:last-child { border-bottom: 0; }
.anrn-dl dt { color: var(--text-2); }
.anrn-dl dd { margin: 0; color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
.anrn-params dd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; font-weight: 500; }
.anrn-twrap { position: relative; overflow-x: auto; min-width: 0; border: 1px solid var(--border-soft); border-radius: 10px; }
.anrn-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.anrn-table th { padding: 9px 12px; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--text-2); background: #F6F8FC; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.anrn-table td { padding: 9px 12px; border-bottom: 1px solid var(--border-soft); color: var(--text); vertical-align: middle; }
.anrn-table tbody tr:last-child td { border-bottom: 0; }
.anrn-table small { display: block; font-size: 11.5px; color: var(--muted); }
.anrn-file { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.anrn-file > .i { color: var(--indigo); font-size: 18px; flex: none; }
.anrn-tag { display: inline-block; padding: 3px 8px; border-radius: 6px; background: var(--indigo-bg); color: var(--indigo); font-size: 12px; font-weight: 600; white-space: nowrap; }
.anrn-dl-btn { width: 36px; height: 34px; padding: 0; justify-content: center; }
.anrn-muted { margin: 0; font-size: 12.5px; color: var(--muted); }
.anrn-num { text-align: right; font-variant-numeric: tabular-nums; }
.anrn-nowrap { white-space: nowrap; }
@media (max-width: 1400px) { .anrn-row3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .anrn-row3 > :last-child { grid-column: 1 / -1; } }
@media (max-width: 1100px) { .anrn-row3, .anrn-row2 { grid-template-columns: minmax(0, 1fr); } .anrn-hfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .anrn-htitle h1 { font-size: 21px; }
  .anrn-hfacts { width: 100%; gap: 8px 0; }
  .anrn-hfacts > div { padding: 2px 10px; }
  .anrn-acts .po-btn { flex: 1 1 100%; justify-content: center; }
  .anrn-dl > div { grid-template-columns: 112px minmax(0, 1fr); }
  .anrn-twrap { border: 0; overflow: visible; }
  .anrn-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .anrn-table, .anrn-table tbody, .anrn-table tr, .anrn-table td { display: block; width: 100%; }
  .anrn-table tr { margin-bottom: 10px; border: 1px solid var(--border-soft); border-radius: 10px; }
  .anrn-table td { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; }
  .anrn-table td::before { content: attr(data-label); font-size: 12px; font-weight: 600; color: var(--text-2); }
  .anrn-num { text-align: left; }
  .anrn-table td > .anrn-tag, .anrn-table td > .anrn-dl-btn { justify-self: start; }
  .anrn-nowrap { white-space: normal; }
}
/* ---------- Analytics-29 · Data quality and repair (plans/Analytics-29.md §2; prefix anqa-) ---------- */
.anqa-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anqa-root .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.anqa-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anqa-back { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 13.5px; font-weight: 600; color: var(--indigo); text-decoration: none; }
.anqa-back:hover { text-decoration: underline; }
.anqa-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-top: -6px; }
.anqa-title { flex: 1 1 520px; min-width: 0; }
.anqa-title h1 { margin: 0; font-size: 28px; font-weight: 800; color: var(--text); }
.anqa-title p { margin: 4px 0 0; font-size: 14px; color: var(--text-2); max-width: 980px; }
.anqa-hright { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.anqa-hright .po-btn { height: 40px; gap: 6px; }
.anqa-err { margin: 0; }
.anqa-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.anqa-tile { display: flex; align-items: center; gap: 14px; padding: 16px 18px; min-width: 0; }
.anqa-tile > div { display: flex; flex-direction: column; min-width: 0; }
.anqa-tile b { font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--text); }
.anqa-tile > div > span { font-size: 14.5px; font-weight: 600; color: var(--text); }
.anqa-tile small { font-size: 12.5px; color: var(--muted); }
.anqa-tic { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; font-size: 24px; }
.anqa-tic.is-green { background: var(--green-bg); color: var(--green); }
.anqa-tic.is-blue { background: var(--indigo-bg); color: var(--indigo); }
.anqa-tic.is-red { background: #FDECEF; color: var(--red); }
.anqa-tic.is-amber { background: var(--amber-bg); color: var(--amber); }
.anqa-tic.is-grey { background: var(--track); color: var(--text-2); }
.anqa-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.85fr); gap: 16px; align-items: start; }
.anqa-left { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anqa-card, .anqa-panel { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; min-width: 0; }
.anqa-card h2, .anqa-panel h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.anqa-card h2 > .i { font-size: 20px; color: var(--indigo); }
.anqa-chead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.anqa-kinds { display: flex; gap: 6px; flex-wrap: wrap; }
.anqa-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--text-2); text-decoration: none; background: var(--surface); }
.anqa-pill span { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; background: var(--track); font-size: 11.5px; }
.anqa-pill.is-on { border-color: var(--indigo); background: var(--indigo); color: #fff; }
.anqa-pill.is-on span { background: rgba(255, 255, 255, .22); color: #fff; }
.anqa-twrap { position: relative; overflow-x: auto; min-width: 0; border: 1px solid var(--border-soft); border-radius: 10px; }
.anqa-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.anqa-table th { padding: 10px 9px; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--text-2); background: #F6F8FC; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.anqa-table td { padding: 10px 9px; border-bottom: 1px solid var(--border-soft); color: var(--text); vertical-align: middle; }
.anqa-table tbody tr:last-child td { border-bottom: 0; }
.anqa-tr { cursor: pointer; }
.anqa-tr:hover td { background: #FAFBFE; }
.anqa-tr.is-on td { background: var(--indigo-bg-2); }
.anqa-tr.is-on td:first-child { box-shadow: inset 3px 0 0 var(--indigo); }
.anqa-issue { display: flex; gap: 10px; align-items: flex-start; min-width: 200px; }
.anqa-issue > div { min-width: 0; }
.anqa-iic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; font-size: 18px; }
.anqa-iic.is-red { background: #FDECEF; color: var(--red); }
.anqa-iic.is-amber { background: var(--amber-bg); color: var(--amber); }
.anqa-iic.is-blue { background: var(--indigo-bg); color: var(--indigo); }
.anqa-open { display: block; font-weight: 700; color: var(--text); text-decoration: none; }
.anqa-open:hover { color: var(--indigo); text-decoration: underline; }
.anqa-table small { display: block; font-size: 12px; color: var(--muted); }
.anqa-src { display: flex; align-items: center; gap: 8px; min-width: 0; }
.anqa-src .an-pf { width: 24px; height: 24px; flex: none; }
.anqa-src b, .anqa-src a { font-size: 13px; font-weight: 700; color: var(--text); text-decoration: none; }
.anqa-src a:hover { color: var(--indigo); text-decoration: underline; }
.anqa-src small { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anqa-nowrap { white-space: nowrap; }
.anqa-st { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.anqa-sev { font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.anqa-sev.is-red { color: #B42339; } .anqa-sev.is-amber { color: var(--amber-text); } .anqa-sev.is-blue { color: var(--indigo); }
.anqa-num { text-align: right; font-variant-numeric: tabular-nums; }
.anqa-panel { position: sticky; top: 12px; }
.anqa-phead { display: flex; align-items: flex-start; gap: 10px; }
.anqa-phead > div { flex: 1 1 auto; min-width: 0; }
.anqa-phead h2 { font-size: 18px; }
.anqa-phead p { display: flex; align-items: center; gap: 6px; margin: 3px 0 0; font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.anqa-phead p .an-pf { width: 18px; height: 18px; flex: none; }
.anqa-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.anqa-sum { margin: 0; font-size: 13.5px; color: var(--text); }
.anqa-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-soft); }
.anqa-tab { height: 38px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.anqa-tab.is-on { color: var(--indigo); border-bottom-color: var(--indigo); }
.anqa-pane { display: flex; flex-direction: column; gap: 10px; }
.anqa-pane[hidden] { display: none; }
.anqa-dl { display: flex; flex-direction: column; margin: 0; }
.anqa-dl > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.anqa-dl > div:last-child { border-bottom: 0; }
.anqa-dl dt { color: var(--text-2); }
.anqa-dl dd { margin: 0; color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
.anqa-uses { padding: 10px 12px; border-radius: 10px; background: #F8FAFF; font-size: 13px; }
.anqa-uses b { display: block; font-size: 13px; color: var(--text); }
.anqa-uses ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.anqa-uses li { padding: 3px 8px; border-radius: 6px; background: var(--indigo-bg); color: var(--indigo); font-size: 12px; font-weight: 600; }
.anqa-uses p { margin: 4px 0 0; color: var(--muted); }
.anqa-gate { display: flex; gap: 8px; margin: 8px 0 0 !important; color: var(--amber-text) !important; }
.anqa-gate > .i { flex: none; font-size: 16px; }
.anqa-links { margin: 0; font-size: 13px; }
.anqa-cmp { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); gap: 8px; align-items: center; }
.anqa-cmpcol { min-width: 0; border: 1px solid var(--border-soft); border-radius: 10px; padding: 10px; }
.anqa-cmpcol h3, .anqa-h3 { margin: 0 0 6px; font-size: 13.5px; font-weight: 700; color: var(--text); }
.anqa-arrow { color: var(--indigo); font-size: 20px; text-align: center; }
.anqa-mini { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.anqa-mini th { padding: 5px 6px; text-align: left; font-weight: 600; color: var(--text-2); border-bottom: 1px solid var(--border-soft); }
.anqa-mini td { padding: 5px 6px; border-bottom: 1px solid var(--border-soft); color: var(--text); overflow-wrap: anywhere; }
.anqa-mini tr:last-child td { border-bottom: 0; }
.anqa-mini tr.is-removed td { background: #FDECEF; color: #8F1D30; text-decoration: line-through; }
.anqa-mini tr.is-added td { background: var(--green-bg); color: var(--green-text); }
.anqa-mini tr.is-changed td { background: var(--amber-bg); color: var(--amber-text); }
.anqa-preview td { font-variant-numeric: tabular-nums; }
.anqa-note { display: flex; gap: 6px; margin: 0; font-size: 12.5px; color: var(--muted); }
.anqa-note > .i { flex: none; font-size: 15px; }
.anqa-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; padding: 12px; border-radius: 10px; background: #F8FAFF; }
.anqa-acts .po-btn { gap: 6px; }
.anqa-range { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; }
.anqa-range label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.anqa-range input { height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13.5px; color: var(--text); background: var(--surface); }
.anqa-accept { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.anqa-accept textarea { width: 100%; min-height: 56px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13.5px; resize: vertical;
  box-sizing: border-box; }
.anqa-accept .po-btn { align-self: flex-start; gap: 6px; }
.anqa-hist { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.anqa-hist li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 8px; font-size: 13px; }
.anqa-hist span { color: var(--text-2); overflow-wrap: anywhere; }
.anqa-hist small { color: var(--muted); font-size: 12px; }
@media (max-width: 1400px) { .anqa-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1280px) { .anqa-row { grid-template-columns: minmax(0, 1fr); } .anqa-panel { position: static; } }
@media (max-width: 768px) {
  .anqa-title h1 { font-size: 24px; }
  .anqa-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .anqa-tile { padding: 12px; gap: 10px; }
  .anqa-tic { width: 40px; height: 40px; font-size: 19px; }
  .anqa-hright .po-btn { flex: 1 1 100%; justify-content: center; }
  .anqa-twrap { border: 0; overflow: visible; }
  .anqa-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .anqa-table, .anqa-table tbody, .anqa-table tr, .anqa-table td { display: block; width: 100%; }
  .anqa-table tr { margin-bottom: 10px; border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; }
  .anqa-table td { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; padding: 8px 12px; }
  .anqa-table td::before { content: attr(data-label); font-size: 12px; font-weight: 600; color: var(--text-2); }
  .anqa-issue { min-width: 0; }
  .anqa-src small { max-width: none; white-space: normal; }
  .anqa-num { text-align: left; }
  .anqa-table td > .po-chip { justify-self: start; }
  .anqa-tr.is-on td:first-child { box-shadow: none; }
  .anqa-dl > div { grid-template-columns: 112px minmax(0, 1fr); }
  .anqa-cmp { grid-template-columns: minmax(0, 1fr); }
  .anqa-arrow { transform: rotate(90deg); }
  .anqa-acts .po-btn { flex: 1 1 100%; justify-content: center; }
  .anqa-phead { flex-wrap: wrap; }
}
/* ---------- Analytics-30 · Source comparison (plans/Analytics-30.md §2; prefix anvs-) ---------- */
.anvs-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anvs-root .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.anvs-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anvs-toolbar { margin-bottom: 0; }
.anvs-pairbtn b { font-weight: 700; color: var(--text); }
.anvs-pairbtn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 520px; }
.anvs-pairmenu, .anvs-viewmenu { min-width: 340px; max-width: min(460px, calc(100vw - 32px)); }
.anvs-pairmenu a, .anvs-off { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.anvs-off { padding: 8px 12px; color: var(--muted); cursor: not-allowed; font-size: 14px; }
.anvs-off small { font-size: 12px; color: var(--muted); white-space: normal; }
.anvs-vrow { display: flex; align-items: center; gap: 4px; }
.anvs-vrow a { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.anvs-vrow small { font-size: 12px; color: var(--muted); }
.anvs-vx { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 0; border-radius: 7px; background: none; color: var(--muted); cursor: pointer; }
.anvs-vx:hover { background: var(--track); color: var(--red); }
.anvs-vnone { margin: 0; padding: 10px 12px; font-size: 13px; color: var(--muted); }
.anvs-data { margin-left: auto; }
.anvs-save { height: 38px; gap: 6px; }
.anvs-custom { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 12px 14px; }
.anvs-custom[hidden], .anvs-viewform[hidden] { display: none; }
.anvs-err { margin: 0; }
.anvs-viewform, .anvs-choose { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 12px 14px; }
.anvs-viewform label, .anvs-choose label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.anvs-viewform input { width: min(420px, 100%); height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; }
.anvs-choose select { height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; max-width: 100%; }
.anvs-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr); gap: 14px; align-items: stretch; }
.anvs-side, .anvs-diff, .anvs-defs, .anvs-reasons, .anvs-days { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; min-width: 0; }
.anvs-shead { display: flex; align-items: flex-start; gap: 12px; }
.anvs-mark { width: 44px; height: 44px; flex: none; }
.anvs-nomark { display: grid; place-items: center; border-radius: 12px; background: var(--track); color: var(--text-2); font-size: 22px; }
.anvs-stitle { flex: 1 1 140px; min-width: 0; }
.anvs-stitle h2 { margin: 0; font-size: 18px; font-weight: 800; color: var(--text); }
.anvs-stitle p { margin: 2px 0 0; font-size: 13.5px; color: var(--text-2); }
.anvs-sright { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-left: auto; }
.anvs-role { align-self: flex-end; padding: 3px 10px; border-radius: 999px; background: var(--track); font-size: 12px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.anvs-view { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; white-space: nowrap; }
.anvs-value { margin: 2px 0 0; font-size: 32px; font-weight: 800; line-height: 1.1; color: var(--text); }
.anvs-side.is-na .anvs-value { color: var(--muted); }
.anvs-def { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 13px; font-weight: 600; color: var(--indigo); }
.anvs-def .i { flex: none; margin-top: 2px; }
.anvs-range { margin: 0; font-size: 12.5px; color: var(--text-2); }
.anvs-reason { display: flex; gap: 6px; margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--amber-bg); font-size: 12.5px; color: var(--text); }
.anvs-reason .i { flex: none; margin-top: 2px; color: var(--amber); }
.anvs-chart { display: block; width: 100%; height: auto; max-height: 190px; }
.anvs-grid { stroke: var(--border-soft); stroke-width: 1; }
.anvs-tick { font-size: 10.5px; fill: var(--muted); }
.anvs-line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.anvs-chart.is-left .anvs-line { stroke: #3B5BFD; }
.anvs-chart.is-left .anvs-area { fill: rgba(59, 91, 253, .12); }
.anvs-chart.is-right .anvs-line { stroke: #EB6834; }
.anvs-chart.is-right .anvs-area { fill: rgba(235, 104, 52, .12); }
.anvs-nochart { display: flex; align-items: center; gap: 8px; margin: 0; padding: 26px 12px; border: 1px dashed var(--border); border-radius: 10px; font-size: 13px; color: var(--muted);
  justify-content: center; }
.anvs-gapnote { margin: 0; font-size: 12px; color: var(--muted); }
.anvs-fresh { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: auto 0 0; font-size: 12.5px; color: var(--text-2); }
.anvs-fresh > .i { color: var(--muted); }
.anvs-fresh > span { flex: 1 1 200px; min-width: 0; }
.anvs-diff h2, .anvs-chead h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.anvs-chead h2 > .i { color: var(--amber); font-size: 20px; }
.anvs-why { display: flex; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--indigo-bg); font-size: 13px; color: var(--text); line-height: 1.45; }
.anvs-why > .i { flex: none; margin-top: 2px; color: var(--indigo); font-size: 17px; }
.anvs-gap { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.anvs-gap > div { display: flex; flex-direction: column; min-width: 0; }
.anvs-gap b { font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--text); }
.anvs-gap b.is-blue { color: var(--indigo); font-size: 24px; }
.anvs-gap span { font-size: 13px; color: var(--text-2); }
.anvs-nogap { display: flex; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--track); font-size: 13px; color: var(--text); }
.anvs-nogap > .i { flex: none; margin-top: 2px; color: var(--muted); }
.anvs-muted { margin: 0; font-size: 12.5px; color: var(--muted); }
.anvs-dl { display: grid; gap: 8px; margin: 0; }
.anvs-dl > div { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 10px; font-size: 13px; }
.anvs-dl dt { color: var(--text-2); }
.anvs-dl dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.anvs-bottom { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.anvs-chead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.anvs-twrap { position: relative; overflow-x: auto; min-width: 0; border: 1px solid var(--border-soft); border-radius: 10px; }
.anvs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.anvs-table th { padding: 10px 9px; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--text-2); background: #F6F8FC; border-bottom: 1px solid var(--border-soft); }
.anvs-table td { padding: 10px 9px; border-bottom: 1px solid var(--border-soft); color: var(--text); vertical-align: top; }
.anvs-table tbody tr:last-child td { border-bottom: 0; }
.anvs-table small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.anvs-deftable td:nth-child(3) { min-width: 180px; }
.anvs-src { display: flex; align-items: center; gap: 8px; }
.anvs-src .an-pf { width: 22px; height: 22px; flex: none; }
.anvs-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.anvs-rlist { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.anvs-rlist li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--text); line-height: 1.45; }
.anvs-tag { flex: none; min-width: 74px; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 700; text-align: center; }
.anvs-tag.is-blue { background: var(--indigo-bg); color: var(--indigo); }
.anvs-tag.is-amber { background: var(--amber-bg); color: #B45309; }
.anvs-tag.is-violet { background: #F1ECFE; color: #6D28D9; }
.anvs-tag.is-grey { background: var(--track); color: var(--text-2); }
.anvs-tag.is-red { background: #FDECEF; color: var(--red); }
.anvs-notes { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.anvs-notes h3 { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--text); }
.anvs-note { display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--green-bg); }
.anvs-note.is-changed { background: var(--amber-bg); }
.anvs-note > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.anvs-nic { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff; font-size: 14px; }
.anvs-ntext { margin: 0; font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.anvs-note small { font-size: 12px; color: var(--text-2); }
.anvs-noteform { display: flex; flex-direction: column; gap: 6px; }
.anvs-noteform label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.anvs-noteform textarea { width: 100%; min-height: 58px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; resize: vertical; box-sizing: border-box; }
.anvs-noteform .po-btn { align-self: flex-start; gap: 6px; }
.anvs-dayscroll { max-height: 420px; overflow: auto; }
.anvs-daytable th { position: sticky; top: 0; }
@media (max-width: 1400px) {
  .anvs-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anvs-diff { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .anvs-bottom { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .anvs-top { grid-template-columns: minmax(0, 1fr); }
  .anvs-data { margin-left: 0; }
  .anvs-pairbtn span { max-width: 240px; }
  .anvs-save, .anvs-noteform .po-btn { width: 100%; justify-content: center; }
  .anvs-value { font-size: 28px; }
  .anvs-dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .anvs-deftable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .anvs-deftable tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
  .anvs-deftable td { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 8px; border: 0; padding: 4px 10px; }
  .anvs-deftable td::before { content: attr(data-label); font-size: 12px; font-weight: 600; color: var(--text-2); }
  .anvs-deftable td:nth-child(3) { min-width: 0; }
}
/* Analytics-13's GA4 purchases row links here */
.anpf-cmp { display: block; margin-top: 2px; font-size: 11.5px; white-space: nowrap; }
/* ---------- Analytics-31 · Tracking health (plans/Analytics-31.md §2; prefix anmt-) ---------- */
.anmt-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anmt-root .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.anmt-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anmt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.anmt-title { flex: 1 1 520px; min-width: 0; }
.anmt-title h1 { margin: 0; font-size: 28px; font-weight: 800; color: var(--text); }
.anmt-title p { margin: 4px 0 0; font-size: 14px; color: var(--text-2); max-width: 900px; }
.anmt-hright { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.anmt-hright .po-btn { height: 40px; gap: 6px; }
.anmt-last { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.anmt-last > .i { font-size: 20px; color: var(--indigo); }
.anmt-last span { display: flex; flex-direction: column; line-height: 1.25; }
.anmt-last small { font-size: 12px; color: var(--text-2); }
.anmt-last b { font-size: 14px; color: var(--text); }
.anmt-err { margin: 0; }
.anmt-tiles { display: grid; grid-template-columns: minmax(0, 1.05fr) repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.anmt-tile { display: flex; min-width: 0; padding: 0; }
.anmt-donutile { align-items: center; gap: 16px; padding: 16px 18px; }
.anmt-donutile > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.anmt-donutile b { font-size: 16px; color: var(--text); }
.anmt-dtext { font-size: 15px; font-weight: 700; }
.anmt-dtext.is-green { color: var(--green); }
.anmt-dtext.is-amber { color: #B45309; }
.anmt-dtext.is-red { color: var(--red); }
.anmt-donutile small { font-size: 12.5px; color: var(--text-2); }
.anmt-donut { flex: none; width: 92px; height: 92px; }
.anmt-dtrack { fill: none; stroke: var(--track); stroke-width: 4.2; }
.anmt-dval { fill: none; stroke-width: 4.2; stroke-linecap: round; }
.anmt-donut.is-green .anmt-dval { stroke: var(--green); }
.anmt-donut.is-amber .anmt-dval { stroke: var(--green); }
.anmt-donut.is-red .anmt-dval { stroke: var(--red); }
.anmt-donut text { font-size: 9px; font-weight: 800; fill: var(--text); }
.anmt-tlink { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 16px; color: inherit; text-decoration: none; border-radius: inherit; }
.anmt-tlink:hover { background: #FAFBFE; }
.anmt-tic { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 50%; font-size: 24px; }
.anmt-tic.is-green { background: var(--green-bg); color: var(--green); }
.anmt-tic.is-amber { background: var(--amber-bg); color: var(--amber); }
.anmt-tic.is-red { background: #FDECEF; color: var(--red); }
.anmt-tic.is-grey { background: var(--track); color: var(--text-2); }
.anmt-tbody { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.anmt-ttop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.anmt-ttop b { font-size: 16px; color: var(--text); }
.anmt-tbody dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.anmt-tbody dt { font-size: 12px; color: var(--text-2); }
.anmt-tbody dd { margin: 2px 0 0; font-size: 14px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.anmt-chev { color: var(--muted); font-size: 18px; flex: none; }
.anmt-row { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 16px; align-items: start; }
.anmt-left, .anmt-right { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anmt-card, .anmt-panel { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; min-width: 0; }
.anmt-chead { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.anmt-chead h2, .anmt-panel h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.anmt-chead h2 > .i { font-size: 20px; color: var(--indigo); }
.anmt-chead p { margin: 2px 0 0; font-size: 13px; color: var(--text-2); }
.anmt-chead .po-btn { height: 38px; gap: 6px; }
.anmt-twrap { position: relative; overflow-x: auto; min-width: 0; border: 1px solid var(--border-soft); border-radius: 10px; }
.anmt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.anmt-table th { padding: 10px 9px; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--text-2); background: #F6F8FC; border-bottom: 1px solid var(--border-soft); }
.anmt-table td { padding: 10px 9px; border-bottom: 1px solid var(--border-soft); color: var(--text); vertical-align: top; }
.anmt-table tbody tr:last-child td { border-bottom: 0; }
.anmt-table small { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.anmt-nowrap { white-space: nowrap; }
.anmt-src { display: flex; align-items: flex-start; gap: 8px; min-width: 170px; }
.anmt-src > span { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.anmt-src .an-pf { width: 24px; height: 24px; flex: none; }
.anmt-src a { font-weight: 700; color: var(--text); text-decoration: none; }
.anmt-src a:hover { color: var(--indigo); text-decoration: underline; }
.anmt-ids { display: grid; gap: 2px; margin: 0; }
.anmt-ids > div { display: flex; gap: 6px; font-size: 12.5px; }
.anmt-ids dt { color: var(--muted); }
.anmt-ids dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--text); }
.anmt-evs { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; white-space: nowrap; }
.anmt-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--muted); }
.anmt-dot.is-green { background: var(--green); }
.anmt-dot.is-amber { background: var(--amber); }
.anmt-dot.is-red { background: var(--red); }
.anmt-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
.anmt-acts .po-btn { height: 34px; gap: 6px; white-space: nowrap; }
.anmt-tr { cursor: pointer; }
.anmt-tr:hover td { background: #FAFBFE; }
.anmt-tr.is-on td { background: var(--indigo-bg-2); }
.anmt-tr.is-on td:first-child { box-shadow: inset 3px 0 0 var(--indigo); }
.anmt-ev { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); text-decoration: none; white-space: nowrap; }
.anmt-ev .i { font-size: 18px; color: var(--indigo); }
.anmt-cov { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.anmt-cov li { position: relative; display: inline-flex; }
.anmt-cmark .an-pf { width: 22px; height: 22px; }
.anmt-cst { display: inline-grid; place-items: center; font-size: 12px; }
.anmt-cov .anmt-cst { position: absolute; right: -5px; bottom: -4px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); }
.anmt-cst.is-green { color: var(--green); }
.anmt-cst.is-amber { color: var(--amber); }
.anmt-cst.is-red { color: var(--red); }
.anmt-cst.is-grey { color: var(--muted); }
.anmt-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font-size: 12px; color: var(--text-2); }
.anmt-legend > span { display: inline-flex; align-items: center; gap: 4px; }
.anmt-opts { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.anmt-opts a { display: flex; align-items: center; gap: 10px; padding: 10px 10px; border: 1px solid var(--border-soft); border-radius: 10px; color: inherit; text-decoration: none; }
.anmt-opts a:hover { background: #FAFBFE; }
.anmt-oic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--indigo-bg); color: var(--indigo); font-size: 16px; }
.anmt-otext { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.anmt-otext b { font-size: 13.5px; color: var(--text); }
.anmt-otext small { font-size: 12px; color: var(--text-2); }
.anmt-panel { position: sticky; top: 12px; }
.anmt-pbox { display: flex; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--amber-bg); }
.anmt-panel.is-red .anmt-pbox { background: #FFF1E8; }
.anmt-panel.is-green .anmt-pbox { background: var(--green-bg); }
.anmt-pic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; font-size: 26px; color: var(--amber); }
.anmt-panel.is-green .anmt-pic { color: var(--green); }
.anmt-pbox h2 { font-size: 15px; color: #B45309; }
.anmt-panel.is-green .anmt-pbox h2 { color: var(--green); }
.anmt-pbox p { margin: 4px 0 0; font-size: 13px; color: var(--text); line-height: 1.45; }
.anmt-reassure { font-weight: 600; }
.anmt-lines { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.anmt-lines li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.anmt-lines .an-pf { width: 20px; height: 20px; flex: none; }
.anmt-lines li > span:not(.po-chip) { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.anmt-lines small { font-size: 12px; color: var(--text-2); }
.anmt-aff { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.anmt-aff h3, .anmt-h3 { margin: 0 0 4px; font-size: 13.5px; font-weight: 700; color: var(--text); }
.anmt-aff ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--text-2); }
.anmt-steps { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.anmt-steps a, .anmt-steps button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 6px; border: 0; border-radius: 8px; background: none; font: inherit;
  color: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.anmt-steps a:hover, .anmt-steps button:hover { background: #F6F8FC; }
.anmt-steps a > span:not(.anmt-sic), .anmt-steps button > span:not(.anmt-sic) { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.anmt-steps b { font-size: 13.5px; color: var(--text); }
.anmt-steps small { font-size: 12px; color: var(--text-2); }
.anmt-steps .i:last-child { color: var(--indigo); flex: none; }
.anmt-sic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); font-size: 15px; }
@media (max-width: 1400px) {
  .anmt-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .anmt-row { grid-template-columns: minmax(0, 1fr); }
  .anmt-panel { position: static; }
}
@media (max-width: 768px) {
  .anmt-tiles { grid-template-columns: minmax(0, 1fr); }
  .anmt-hright { width: 100%; }
  .anmt-hright .po-btn, .anmt-chead .po-btn { width: 100%; justify-content: center; }
  .anmt-aff { grid-template-columns: minmax(0, 1fr); }
  .anmt-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .anmt-table tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
  .anmt-table tbody tr:last-child { border-bottom: 0; }
  .anmt-table td { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; border: 0; padding: 4px 10px; }
  .anmt-table td::before { content: attr(data-label); font-size: 12px; font-weight: 600; color: var(--text-2); }
  .anmt-table td > .po-chip { justify-self: start; }
  .anmt-table td > small, .anmt-table td > .anmt-acts { grid-column: 2; }
  .anmt-evs, .anmt-nowrap { white-space: normal; }
  .anmt-src { min-width: 0; }
}
/* Advertisement-02's measurement row links Tracking health (A31) under its action */
.avr-more { display: block; margin-top: 6px; font-size: 12.5px; white-space: nowrap; }
/* ---------- Analytics-32 · Create GA4 property and link Ads (plans/Analytics-32.md §2; prefix angp-) ---------- */
.angp-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.angp-root .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.angp-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.angp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.angp-title { flex: 1 1 520px; min-width: 0; }
.angp-title h1 { margin: 0; font-size: 28px; font-weight: 800; color: var(--text); }
.angp-title p { margin: 4px 0 0; font-size: 14px; color: var(--text-2); max-width: 900px; }
.angp-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.angp-applink { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.angp-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--indigo); color: #fff; font-size: 11.5px; font-weight: 700; }
.angp-tab .angp-count { background: var(--track); color: var(--text-2); }
.angp-tab.is-on .angp-count { background: var(--indigo); color: #fff; }
.angp-steps { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; flex-wrap: wrap; }
.angp-step { display: flex; align-items: center; }
.angp-step + .angp-step::before { content: ""; width: 22px; height: 1px; background: var(--border); margin-right: 6px; }
.angp-step > a, .angp-step > span { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 14px; text-decoration: none; padding: 4px 2px; border-radius: 8px; }
.angp-step b { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--border); font-size: 13px; font-weight: 700; color: var(--text-2); background: var(--surface); }
.angp-step.is-on b { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.angp-step.is-on > span { color: var(--indigo); font-weight: 600; }
.angp-step.is-done b { border-color: var(--green); color: var(--green); }
.angp-step > a:hover { color: var(--indigo); }
.angp-err, .angp-notice { margin: 0; }
.angp-cols { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.angp-card { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; min-width: 0; }
.angp-chead { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.angp-chead > div { flex: 1 1 auto; min-width: 0; }
.angp-chead h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 19px; font-weight: 700; color: var(--text); }
.angp-chead h2 > .i { font-size: 20px; color: var(--indigo); }
.angp-chead p { margin: 3px 0 0; font-size: 13px; color: var(--text-2); }
.angp-chead > .po-chip { flex: none; }
.angp-logo { flex: none; width: 40px; height: 40px; }
.angp-ext { flex: none; height: 34px; gap: 6px; font-size: 13px; }
.angp-sub { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border-soft); min-width: 0; }
.angp-sub h3, .angp-req h3, .angp-h3 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14.5px; font-weight: 700; color: var(--text); }
.angp-radios, .angp-streams, .angp-plist, .angp-gate, .angp-ops, .angp-events, .angp-list, .angp-chips { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.angp-radio { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; min-width: 0; flex-wrap: wrap; }
.angp-radio.is-on { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo) inset; background: #F7F8FF; }
.angp-radio.is-disabled { cursor: not-allowed; opacity: 0.72; }
.angp-radio input { flex: none; width: 18px; height: 18px; accent-color: var(--indigo); margin: 0; }
.angp-rtext { display: flex; flex-direction: column; gap: 2px; flex: 1 1 180px; min-width: 0; }
.angp-rtext b { display: flex; align-items: center; gap: 6px; font-size: 14.5px; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.angp-rtext small { font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; }
.angp-acc { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-2); text-decoration: none; }
.angp-acc.is-ok { color: var(--text); }
.angp-acc.is-ok .i { color: var(--green); }
.angp-streams li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; flex-wrap: wrap; }
.angp-streams li > .i { font-size: 22px; color: var(--text-2); flex: none; }
.angp-info, .angp-warn { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 10px; font-size: 13px; color: var(--text); }
.angp-info { background: #EEF2FF; border: 1px solid #D7DEFF; }
.angp-info > .i { color: var(--indigo); font-size: 18px; flex: none; }
.angp-warn { background: var(--amber-bg); border: 1px solid #F6D58E; }
.angp-warn > .i { color: var(--amber); font-size: 18px; flex: none; }
.angp-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; margin: 0; border: 1px solid var(--border-soft); border-radius: 10px; padding: 4px 14px; }
.angp-kv1 { grid-template-columns: minmax(0, 1fr); }
.angp-kv > div { display: grid; grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.2fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); min-width: 0; }
.angp-kv > div:last-child { border-bottom: 0; }
.angp-kv dt { font-size: 12.5px; color: var(--text-2); }
.angp-kv dd { margin: 0; font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; }
.angp-muted { margin: 0; font-size: 12.5px; color: var(--text-2); display: flex; align-items: flex-start; gap: 6px; }
.angp-muted > .i { flex: none; font-size: 15px; margin-top: 1px; }
.angp-req { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); background: #FAFBFE; }
.angp-req.is-ok { background: var(--green-bg); border-color: #B7E8D2; }
.angp-req h3 > .i { color: var(--text-2); }
.angp-req.is-ok h3 > .i { color: var(--green); }
.angp-req ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.angp-req li { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; color: var(--text); }
.angp-req li > .i { flex: none; font-size: 15px; margin-top: 1px; }
.angp-req li.is-ok > .i { color: var(--green); }
.angp-req li.is-info > .i { color: var(--text-2); }
.angp-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.angp-actions .po-btn { height: 42px; gap: 6px; min-width: 150px; justify-content: center; }
.angp-actions .btn-primary.po-btn { min-width: 210px; }
.angp-linkbtn { border: 0; background: none; color: var(--text-2); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; padding: 6px; }
.angp-linkbtn:hover { color: var(--red); }
.angp-linknote { align-items: center; }
.angp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.angp-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 12.5px; color: var(--text-2); }
.angp-field input, .angp-field select, .angp-field textarea { height: 40px; padding: 0 11px; border: 1px solid var(--border); border-radius: 9px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); min-width: 0; width: 100%; box-sizing: border-box; }
.angp-field textarea { height: auto; padding: 9px 11px; resize: vertical; }
.angp-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text); cursor: pointer; }
.angp-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--indigo); flex: none; }
.angp-check span { display: flex; flex-direction: column; gap: 2px; }
.angp-check small { color: var(--text-2); font-size: 12.5px; }
.angp-seg { display: flex; flex-direction: column; gap: 8px; }
.angp-chips { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.angp-item { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.angp-item > header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 10px 14px; background: #F6F8FC; border-bottom: 1px solid var(--border-soft); }
.angp-item > header b { font-size: 14px; color: var(--text); }
.angp-item > header span { font-size: 13.5px; color: var(--text); }
.angp-item > header small { margin-left: auto; font-size: 12px; color: var(--text-2); }
.angp-ba { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.angp-ba th, .angp-ba td { padding: 8px 14px; text-align: left; border-bottom: 1px solid var(--border-soft); overflow-wrap: anywhere; vertical-align: top; }
.angp-ba thead th { font-size: 12px; font-weight: 600; color: var(--text-2); }
.angp-ba tbody th { font-weight: 500; color: var(--text-2); width: 34%; }
.angp-ba tbody tr:last-child > * { border-bottom: 0; }
.angp-ops li, .angp-gate li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; flex-wrap: wrap; }
.angp-opn { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--track); color: var(--text-2); font-size: 12px; font-weight: 700; flex: none; }
.angp-ops li.is-green .angp-opn { background: var(--green-bg); color: var(--green); }
.angp-ops li.is-amber .angp-opn { background: var(--amber-bg); color: #B45309; }
.angp-ops li.is-red .angp-opn { background: #FDECEF; color: var(--red); }
.angp-ops .po-btn { height: 34px; gap: 6px; }
.angp-gate li { align-items: flex-start; }
.angp-gate li > .i { flex: none; font-size: 18px; margin-top: 1px; }
.angp-gate li.is-ok > .i { color: var(--green); }
.angp-gate li.is-bad { border-color: #F5C2CB; background: #FFF7F8; }
.angp-gate li.is-bad > .i { color: var(--red); }
.angp-gate li span { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 200px; }
.angp-gate li b { font-size: 13.5px; color: var(--text); }
.angp-gate li small { font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; }
.angp-events li { display: flex; flex-direction: column; gap: 2px; padding-left: 12px; border-left: 3px solid var(--border); }
.angp-events li.is-ok { border-color: var(--green); }
.angp-events li.is-warn, .angp-events li.is-bad { border-color: var(--amber); }
.angp-events li b { font-size: 13px; color: var(--text); }
.angp-events li small { font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.angp-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--border-soft); padding-bottom: 2px; min-width: 0; scrollbar-width: thin; }
.angp-tab { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 8px 12px; border-radius: 8px 8px 0 0; font-size: 13.5px; color: var(--text-2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.angp-tab.is-on { color: var(--indigo); border-bottom-color: var(--indigo); font-weight: 600; }
.angp-tab > .i { font-size: 16px; }
.angp-cnote { padding: 2px 0; }
.angp-twrap { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: 10px; min-width: 0; }
.angp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.angp-table th { padding: 9px 12px; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--text-2); background: #F6F8FC; border-bottom: 1px solid var(--border-soft); }
.angp-table td { padding: 9px 12px; border-bottom: 1px solid var(--border-soft); color: var(--text); vertical-align: top; overflow-wrap: anywhere; }
.angp-table tbody tr:last-child td { border-bottom: 0; }
.angp-list li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); }
.angp-list li > .i { color: var(--text-2); }
.angp-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; background: var(--indigo); }
.angp-dot.is-purple { background: #7C4DFF; } .angp-dot.is-brown { background: #8D6E63; } .angp-dot.is-green { background: var(--green); }
.angp-dot.is-red { background: var(--red); } .angp-dot.is-cyan { background: #06B6D4; } .angp-dot.is-orange { background: #F59E0B; }
.angp-arow { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 16px; align-items: start; }
.angp-plist li > a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; color: inherit; text-decoration: none; flex-wrap: wrap; }
.angp-plist li.is-on > a { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo) inset; background: #F7F8FF; }
.angp-plist li > a:hover { background: #FAFBFE; }
.angp-decide { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
@media (max-width: 1180px) {
  .angp-cols, .angp-arow { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .angp-title h1 { font-size: 23px; }
  .angp-steps { gap: 4px; }
  .angp-step + .angp-step::before { width: 10px; margin-right: 4px; }
  .angp-step > a > span, .angp-step > span > span { font-size: 12.5px; }
  .angp-card { padding: 14px; }
  .angp-chead { flex-wrap: wrap; }
  .angp-ext { width: 100%; justify-content: center; }
  .angp-kv, .angp-grid { grid-template-columns: minmax(0, 1fr); }
  .angp-kv > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .angp-actions .po-btn, .angp-actions .btn-primary.po-btn { width: 100%; min-width: 0; }
  .angp-item > header small { margin-left: 0; width: 100%; }
  .angp-table thead { display: none; }
  .angp-table tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
  .angp-table td { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; border: 0; padding: 4px 12px; }
  .angp-table td::before { content: attr(data-label); color: var(--text-2); font-size: 12px; }
  .angp-table td[colspan]::before { content: none; }
}
/* ---------- Analytics-33 · Google tag and conversion setup (plans/Analytics-33.md §2; prefix angt-) ---------- */
.angt-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.angt-root .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.angt-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.angt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.angt-title { flex: 1 1 520px; min-width: 0; }
.angt-title h1 { margin: 0; font-size: 28px; font-weight: 800; color: var(--text); }
.angt-title p { margin: 4px 0 0; font-size: 14px; color: var(--text-2); max-width: 960px; }
.angt-back { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; margin-bottom: 4px; }
.angt-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.angt-applink { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.angt-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--indigo); color: #fff; font-size: 11.5px; font-weight: 700; }
.angt-ext { flex: none; height: 44px; gap: 8px; font-size: 14px; padding: 0 18px; }
.angt-wizard { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; min-width: 0; }
.angt-wtitle { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 19px; font-weight: 700; color: var(--text); }
.angt-wtitle > .i { font-size: 24px; color: var(--indigo); }
.angt-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.angt-step { display: flex; align-items: center; min-width: 0; position: relative; }
.angt-step > a, .angt-step > span { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; padding: 4px; border-radius: 10px; min-width: 0; }
.angt-step b { display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--border); font-size: 18px; font-weight: 700; color: var(--text-2); background: #F3F5FA; }
.angt-step.is-on b { background: var(--indigo); border-color: var(--indigo); color: #fff; box-shadow: 0 0 0 4px #E3E8FF; }
.angt-stext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.angt-stext > span { font-size: 15px; font-weight: 600; }
.angt-stext small { font-size: 12.5px; color: var(--text-2); }
.angt-step > a:hover .angt-stext > span { color: var(--indigo); }
.angt-err, .angt-notice { margin: 0; }
.angt-row3 { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.angt-row3b { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.75fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.angt-cols { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 16px; align-items: start; }
.angt-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.angt-card { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; min-width: 0; }
.angt-chead { display: flex; align-items: flex-start; gap: 12px; min-width: 0; flex-wrap: wrap; }
.angt-chead > div { flex: 1 1 180px; min-width: 0; }
.angt-chead > .i { flex: none; font-size: 26px; color: var(--indigo); margin-top: 1px; }
.angt-chead h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.angt-chead p { margin: 3px 0 0; font-size: 13px; color: var(--text-2); }
.angt-chead > .po-chip { flex: none; }
.angt-chead > .po-btn { flex: none; height: 36px; gap: 6px; font-size: 13px; }
.angt-logo { flex: none; width: 34px; height: 34px; }
.angt-h3 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; font-weight: 700; color: var(--text); }
.angt-site { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 10px; background: #FAFBFE; }
.angt-site > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.angt-host { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 700; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.angt-host .i { font-size: 14px; color: var(--indigo); }
.angt-site small { font-size: 12.5px; color: var(--text-2); }
.angt-pages, .angt-ops, .angt-gate, .angt-events, .angt-switches, .angt-planned, .angt-toggles, .angt-conts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.angt-pages li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.angt-pages li.is-ok > .i { color: var(--green); } .angt-pages li.is-bad > .i { color: var(--red); }
.angt-pages li span { margin-left: auto; color: var(--text-2); }
.angt-cont { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.angt-crow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--text); }
.angt-crow b { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; }
.angt-crow > span:not(.po-chip) { color: var(--text-2); font-size: 13px; }
.angt-crow .po-chip { margin-left: auto; }
.angt-more { align-self: flex-end; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.angt-line { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.angt-line > .i { color: var(--text-2); flex: none; }
.angt-small { font-size: 12px; }
.angt-kv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; border: 1px solid var(--border-soft); border-radius: 10px; padding: 2px 12px; }
.angt-kv > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); min-width: 0; }
.angt-kv > div:last-child { border-bottom: 0; }
.angt-kv dt { font-size: 12.5px; color: var(--text-2); }
.angt-kv dd { margin: 0; font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; }
.angt-muted { margin: 0; font-size: 12.5px; color: var(--text-2); display: flex; align-items: flex-start; gap: 6px; }
.angt-muted > .i { flex: none; font-size: 15px; margin-top: 1px; }
.angt-info, .angt-warn { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 11px 13px; border-radius: 10px; font-size: 13px; color: var(--text); }
.angt-info { background: #EEF2FF; border: 1px solid #D7DEFF; }
.angt-info > .i { color: var(--indigo); font-size: 18px; flex: none; }
.angt-warn { background: var(--amber-bg); border: 1px solid #F6D58E; }
.angt-warn > .i { color: var(--amber); font-size: 18px; flex: none; }
.angt-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.angt-actions .po-btn { height: 40px; gap: 6px; min-width: 140px; justify-content: center; }
.angt-linkbtn { border: 0; background: none; color: var(--text-2); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; padding: 4px 6px; }
.angt-linkbtn:hover { color: var(--indigo); }
.angt-twrap { position: relative; overflow-x: auto; border: 1px solid var(--border-soft); border-radius: 10px; min-width: 0; }
.angt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.angt-table th { padding: 8px 10px; text-align: left; font-size: 12px; font-weight: 600; color: var(--text-2); background: #F6F8FC; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.angt-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-soft); color: var(--text); vertical-align: top; overflow-wrap: anywhere; }
.angt-table td > .i { font-size: 16px; color: var(--text-2); vertical-align: -3px; margin-right: 4px; }
.angt-table td small { display: block; font-size: 12px; color: var(--text-2); }
.angt-table code, .angt-pages code, .angt-fp code { font-size: 12px; background: #F3F5FA; padding: 1px 5px; border-radius: 5px; }
.angt-table tbody tr:last-child td { border-bottom: 0; }
.angt-switches li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); padding: 3px 0; border-bottom: 1px solid var(--border-soft); }
.angt-switches li:last-child { border-bottom: 0; }
.angt-switches li > .i { flex: none; font-size: 16px; color: var(--green); }
.angt-switches li span { flex: 1 1 auto; min-width: 0; }
.angt-switches b { font-size: 12.5px; font-weight: 600; }
.angt-switches b.is-on { color: var(--text); } .angt-switches b.is-off { color: var(--text-2); }
.angt-switches li:has(b.is-off) > .i { color: var(--text-2); }
.angt-planned li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; font-size: 13px; }
.angt-planned li.is-on { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo) inset; background: #F7F8FF; }
.angt-planned li a { flex: 1 1 180px; min-width: 0; color: var(--text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.angt-planned li a:hover { color: var(--indigo); }
.angt-planned li small { font-size: 12px; color: var(--text-2); }
.angt-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); background: #FAFBFE; }
.angt-box.is-amber { background: var(--amber-bg); border-color: #F6D58E; }
.angt-box > .i { flex: none; font-size: 22px; color: var(--text-2); }
.angt-box.is-amber > .i { color: var(--amber); }
.angt-box > div { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; }
.angt-box b { font-size: 13.5px; color: var(--text); }
.angt-box small { font-size: 12.5px; color: var(--text-2); }
.angt-box .po-btn { height: 36px; gap: 6px; flex: none; }
.angt-testplan { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--text); }
.angt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.angt-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 12.5px; color: var(--text-2); }
.angt-field input, .angt-field select { height: 40px; padding: 0 11px; border: 1px solid var(--border); border-radius: 9px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); min-width: 0; width: 100%; box-sizing: border-box; }
.angt-pair { display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: 8px; }
.angt-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text); cursor: pointer; }
.angt-check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--indigo); flex: none; }
.angt-check > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.angt-check small { color: var(--text-2); font-size: 12px; }
.angt-toggles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.angt-item { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.angt-item > header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 9px 12px; background: #F6F8FC; border-bottom: 1px solid var(--border-soft); }
.angt-item > header b { font-size: 13.5px; color: var(--text); }
.angt-item > header span { font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.angt-item > header small, .angt-item > header .angt-linkbtn { margin-left: auto; font-size: 12px; color: var(--text-2); }
.angt-ba { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: fixed; }
.angt-ba th, .angt-ba td { padding: 7px 12px; text-align: left; border-bottom: 1px solid var(--border-soft); overflow-wrap: anywhere; vertical-align: top; }
.angt-ba thead th { font-size: 12px; font-weight: 600; color: var(--text-2); }
.angt-ba tbody th { font-weight: 500; color: var(--text-2); width: 34%; }
.angt-ba tbody tr:last-child > * { border-bottom: 0; }
.angt-ops li, .angt-gate li { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; flex-wrap: wrap; }
.angt-opn { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--track); color: var(--text-2); font-size: 12px; font-weight: 700; flex: none; }
.angt-ops li.is-green .angt-opn { background: var(--green-bg); color: var(--green); }
.angt-ops li.is-amber .angt-opn { background: var(--amber-bg); color: #B45309; }
.angt-ops li.is-red .angt-opn { background: #FDECEF; color: var(--red); }
.angt-ops .po-btn { height: 34px; gap: 6px; }
.angt-rtext { display: flex; flex-direction: column; gap: 2px; flex: 1 1 180px; min-width: 0; }
.angt-rtext b { font-size: 13.5px; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.angt-rtext small { font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.angt-gate li { align-items: flex-start; }
.angt-gate li > .i { flex: none; font-size: 18px; margin-top: 1px; }
.angt-gate li.is-ok > .i { color: var(--green); }
.angt-gate li.is-bad { border-color: #F5C2CB; background: #FFF7F8; }
.angt-gate li.is-bad > .i { color: var(--red); }
.angt-gate li span { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 200px; }
.angt-gate li b { font-size: 13px; color: var(--text); }
.angt-gate li small { font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.angt-events li { display: flex; flex-direction: column; gap: 2px; padding-left: 12px; border-left: 3px solid var(--border); }
.angt-events li.is-ok { border-color: var(--green); }
.angt-events li.is-warn, .angt-events li.is-bad { border-color: var(--amber); }
.angt-events li b { font-size: 13px; color: var(--text); }
.angt-events li small { font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.angt-review { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid #D7DEFF; border-radius: 10px; background: #F7F8FF; }
.angt-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface); font-size: 13px; color: var(--text); }
.angt-strip > span:not(.po-chip) { flex: 1 1 260px; min-width: 0; }
.angt-wsbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; min-width: 0; }
.angt-wsbar > .i { color: var(--text-2); font-size: 18px; }
.angt-wsitem { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); font-size: 13px; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.angt-wsitem.is-on { border-color: var(--indigo); color: var(--indigo); font-weight: 600; background: #F7F8FF; }
.angt-fp { margin-left: auto; font-size: 12px; color: var(--text-2); }
.angt-wschoice { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 10px; }
.angt-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--border-soft); padding-bottom: 2px; min-width: 0; scrollbar-width: thin; }
.angt-tab { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 8px 12px; border-radius: 8px 8px 0 0; font-size: 13.5px; color: var(--text-2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.angt-tab.is-on { color: var(--indigo); border-bottom-color: var(--indigo); font-weight: 600; }
.angt-tab > .i { font-size: 16px; }
.angt-subform { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.angt-conts li { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.angt-conts li > small { font-size: 12.5px; color: var(--text-2); }
.angt-conts li > .po-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.angt-plink { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text); text-decoration: none; }
@media (max-width: 1180px) {
  .angt-row3, .angt-row3b, .angt-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .angt-title h1 { font-size: 23px; }
  .angt-ext { width: 100%; justify-content: center; }
  .angt-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .angt-step b { width: 36px; height: 36px; font-size: 15px; }
  .angt-stext > span { font-size: 13.5px; }
  .angt-card { padding: 14px; }
  .angt-kv > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .angt-grid, .angt-toggles { grid-template-columns: minmax(0, 1fr); }
  .angt-actions .po-btn { width: 100%; min-width: 0; }
  .angt-chead > .po-btn { width: 100%; justify-content: center; }
  .angt-fp { margin-left: 0; width: 100%; }
  .angt-table { min-width: 480px; }
  .angt-planned li a { flex-basis: 100%; }
}
/* ---------- Analytics-34 · Meta and TikTok event sources (plans/Analytics-34.md §2; prefix anes-, the shared card pieces are A33's angt-) ---------- */
.anes-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anes-providers { display: flex; gap: 12px; flex-wrap: wrap; min-width: 0; }
.anes-prov { display: flex; align-items: center; gap: 12px; flex: 0 1 300px; min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  color: var(--text); text-decoration: none; }
.anes-prov.is-on { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo) inset; background: #F7F8FF; }
.anes-prov:hover { border-color: var(--indigo); }
.anes-pmark { flex: none; width: 38px; height: 38px; }
.anes-ptext { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.anes-ptext b { font-size: 16px; }
.anes-ptext small { font-size: 12.5px; color: var(--text-2); }
.anes-prov .po-chip { flex: none; }
.anes-row { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.4fr) minmax(0, 0.8fr); gap: 16px; align-items: start; }
.anes-row2 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.95fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.anes-pick { display: flex; gap: 6px; flex-wrap: wrap; }
.anes-chipsel { padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; color: var(--text); text-decoration: none; }
.anes-chipsel.is-on { border-color: var(--indigo); background: #F7F8FF; }
.anes-chipsel small { color: var(--text-2); }
.anes-id { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.anes-id code { font-size: 13px; background: #F3F5FA; padding: 2px 6px; border-radius: 6px; overflow-wrap: anywhere; }
.anes-copy { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text-2); cursor: pointer; }
.anes-copy:hover { color: var(--indigo); border-color: var(--indigo); }
.anes-table td:first-child { min-width: 150px; }
.anes-table td:first-child small { margin-left: 22px; }
.anes-diags { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.anes-diags li { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 9px; font-size: 13px; }
.anes-diags li > .i { flex: none; color: var(--indigo); margin-top: 1px; }
.anes-diags li.is-warning > .i, .anes-diags li.is-error > .i { color: var(--amber); }
.anes-diags li span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.anes-diags small { color: var(--text-2); font-size: 12px; }
.anes-inst { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); min-width: 0; }
.anes-inst:last-of-type { border-bottom: 0; }
.anes-ilabel { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); min-width: 0; }
.anes-ilabel > .i { font-size: 20px; color: var(--text-2); flex: none; }
.anes-inst .po-chip { max-width: 100%; white-space: normal; }
.anes-inst small { font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.anes-testline { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; background: #F6F8FC; font-size: 12.5px; color: var(--text); }
.anes-testline > .i { flex: none; color: var(--indigo); }
.anes-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.anes-steps li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; }
.anes-steps li:last-child { border-bottom: 0; }
.anes-steps li > .i { color: var(--text-2); font-size: 18px; }
.anes-steps li.is-green > .i { color: var(--green); }
.anes-steps li.is-amber > .i { color: var(--amber); }
.anes-steps small { font-size: 12px; color: var(--text-2); }
.anes-steps a { color: var(--text); }
.anes-links { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.anes-links li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: space-between; font-size: 13px; }
.anes-links small { color: var(--text-2); }
.anes-links .po-btn { height: 34px; gap: 6px; }
.anes-new { border: 1px solid var(--border-soft); border-radius: 10px; padding: 8px 12px; }
.anes-new summary { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--indigo); }
.anes-new[open] summary { margin-bottom: 10px; }
.anes-new .angt-grid, #anes-f-pixel .angt-grid { grid-template-columns: minmax(0, 1fr); }
.anes-res { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.anes-res a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); color: var(--text); text-decoration: none; }
.anes-res li:last-child a { border-bottom: 0; }
.anes-res a b { font-size: 13.5px; font-weight: 600; }
.anes-res a small { grid-column: 1; font-size: 12px; color: var(--text-2); }
.anes-res a > .i { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--indigo); }
.anes-res a:hover b { color: var(--indigo); }
@media (max-width: 1280px) {
  .anes-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .anes-row > .angt-stack { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .anes-row2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .anes-row2 > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .anes-row, .anes-row2, .anes-row > .angt-stack { grid-template-columns: minmax(0, 1fr); }
  .anes-row2 > :last-child { grid-column: auto; }
}
@media (max-width: 768px) {
  .anes-prov { flex: 1 1 100%; }
  .anes-root .angt-head .angt-ext { width: 100%; justify-content: center; }
  .anes-root .angt-actions .po-btn { width: 100%; }
  .anes-links .po-btn { width: 100%; justify-content: center; }
  .anes-table { min-width: 560px; }
}
/* ---------- Analytics-35 · Server-side event connections (plans/Analytics-35.md §2; prefix ansv-, the shared card pieces are A33's angt-) ---------- */
.ansv-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ansv-hbtns { display: flex; gap: 10px; flex-wrap: wrap; flex: none; }
.ansv-hbtns .po-btn { height: 44px; gap: 8px; font-size: 14px; padding: 0 18px; }
.ansv-tabs { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ansv-tab { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text);
  text-decoration: none; font-size: 14px; font-weight: 600; min-width: 0; }
.ansv-tab.is-on { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo) inset; background: #F7F8FF; }
.ansv-tab > span:not(.po-chip) { min-width: 0; overflow-wrap: anywhere; }
.ansv-tmark { flex: none; width: 24px; height: 24px; }
.ansv-cols { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 16px; align-items: start; }
.ansv-root .angt-chead h2 .po-chip { vertical-align: 3px; margin-left: 6px; font-size: 11.5px; }
.ansv-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; border: 1px solid var(--border-soft); border-radius: 10px; }
.ansv-strip > div { padding: 10px 12px; border-right: 1px solid var(--border-soft); min-width: 0; }
.ansv-strip > div:last-child { border-right: 0; }
.ansv-strip dt { font-size: 12px; color: var(--text-2); margin-bottom: 4px; }
.ansv-strip dd { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 7px; align-items: center; }
.ansv-strip dd b { font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; }
.ansv-strip dd small { grid-column: 2; font-size: 11.5px; color: var(--text-2); }
.ansv-strip dd > .i { color: var(--text-2); font-size: 15px; }
.ansv-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--text-2); }
.ansv-strip .is-green .ansv-dot { background: var(--green); } .ansv-strip .is-amber .ansv-dot { background: var(--amber); } .ansv-strip .is-blue .ansv-dot { background: var(--indigo); }
.ansv-own { margin-top: 2px; }
.ansv-table td small { margin-top: 2px; }
.ansv-table td:first-child { min-width: 200px; }
.ansv-switch { display: inline-flex; align-items: center; cursor: pointer; }
.ansv-switch input { appearance: none; width: 40px; height: 22px; border-radius: 11px; background: var(--track); position: relative; cursor: pointer; margin: 0; transition: background .15s; }
.ansv-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .15s; }
.ansv-switch input:checked { background: var(--indigo); }
.ansv-switch input:checked::after { left: 21px; }
.ansv-switch input:disabled { opacity: .5; cursor: not-allowed; }
.ansv-switch input:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.ansv-dedup { width: 120px; height: 34px; padding: 0 9px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; background: #F6F8FC; color: var(--text); }
.ansv-flow { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; counter-reset: f; }
.ansv-flow li { position: relative; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; text-align: center; background: #FAFBFE; }
.ansv-flow li + li::before { content: "→"; position: absolute; left: -10px; top: 50%; transform: translate(-50%, -50%); color: var(--text-2); }
.ansv-access { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ansv-access li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; }
.ansv-access li > .i { flex: none; font-size: 18px; }
.ansv-access li.is-ok > .i { color: var(--green); } .ansv-access li.is-bad > .i { color: var(--amber); }
.ansv-access li > span { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; min-width: 0; }
.ansv-access small { font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.ansv-access .po-btn { height: 34px; gap: 6px; }
.ansv-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ansv-val { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 13px; }
.ansv-val.is-ok { background: var(--green-bg); } .ansv-val.is-bad { background: var(--amber-bg); }
.ansv-val > .i { flex: none; font-size: 18px; } .ansv-val.is-ok > .i { color: var(--green); } .ansv-val.is-bad > .i { color: var(--amber); }
.ansv-val > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ansv-val small { font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.ansv-check { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.ansv-check li { padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.ansv-check li:last-child { border-bottom: 0; }
.ansv-auto { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; }
.ansv-auto > .i { flex: none; font-size: 18px; color: var(--text-2); }
.ansv-check li.is-done .ansv-auto > .i { color: var(--green); }
.ansv-auto > span { display: flex; flex-direction: column; gap: 2px; }
.ansv-auto small, .ansv-check .angt-check small { font-size: 12px; color: var(--text-2); }
.ansv-dl { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ansv-dl li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; }
.ansv-dl li > .i { flex: none; font-size: 17px; color: var(--text-2); }
.ansv-dl li.is-ok > .i { color: var(--green); }
.ansv-dl li > span { display: flex; flex-direction: column; gap: 2px; }
.ansv-dl small { font-size: 12px; color: var(--text-2); }
@media (max-width: 1180px) {
  .ansv-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .ansv-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ansv-strip > div:nth-child(2) { border-right: 0; }
  .ansv-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--border-soft); }
  .ansv-g3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .ansv-hbtns, .ansv-hbtns .po-btn { width: 100%; justify-content: center; }
  .ansv-tab { flex: 1 1 100%; }
  .ansv-strip { grid-template-columns: minmax(0, 1fr); }
  .ansv-strip > div { border-right: 0; border-bottom: 1px solid var(--border-soft); }
  .ansv-strip > div:last-child { border-bottom: 0; }
  .ansv-flow { grid-template-columns: minmax(0, 1fr); }
  .ansv-flow li + li::before { content: "↓"; left: 50%; top: -10px; transform: translate(-50%, -50%); }
  .ansv-own { grid-template-columns: minmax(0, 1fr); }
  .ansv-root .angt-actions .po-btn { width: 100%; }
  .ansv-table { min-width: 720px; }
}
/* ---------- Analytics-36 · Event mapping and deduplication (plans/Analytics-36.md §2; prefix anem-, the shared card pieces are A33's angt-; the head and tab pieces are reused by A37 / A38) ---------- */
.anem-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anem-hright { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; flex: 0 1 auto; min-width: 0; }
.anem-hbtns { display: flex; gap: 10px; flex-wrap: wrap; }
.anem-hbtns .po-btn { height: 44px; gap: 8px; font-size: 14px; padding: 0 18px; }
.anem-saved { margin: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.anem-saved small { font-size: 12px; color: var(--text-2); }
.anem-saved b { font-size: 13.5px; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.anem-tabs { display: flex; gap: 4px 22px; flex-wrap: wrap; padding: 0 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; min-width: 0; }
.anem-tab { display: inline-block; padding: 12px 2px 10px; font-size: 14px; font-weight: 600; color: var(--text-2); text-decoration: none; border-bottom: 2px solid transparent; }
.anem-tab:hover { color: var(--indigo); }
.anem-tab.is-on { color: var(--indigo); border-bottom-color: var(--indigo); }
.anem-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.anem-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.anem-group + .anem-group { padding-top: 6px; border-top: 1px dashed var(--border-soft); }
.anem-ghead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--text); }
.anem-ghead > .i { font-size: 18px; color: var(--indigo); }
.anem-ghead small { flex: 1 1 260px; font-size: 12.5px; color: var(--text-2); min-width: 0; }
.anem-offline { margin: 0; }
.anem-table { min-width: 860px; }
.anem-table th:first-child, .anem-table td:first-child { width: 52px; }
.anem-nalist { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12.5px; color: var(--text-2); }
.anem-nalist .i { flex: none; color: var(--grey); font-size: 15px; margin-top: 1px; }
.anem-table td { vertical-align: middle; }
.anem-table tr.is-bad td { background: #FFF5F6; }
.anem-dest { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.anem-dest .an-pf { flex: none; width: 20px; height: 20px; }
.anem-dest span { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.anem-dest b { font-size: 13px; font-weight: 600; }
.anem-in { width: 100%; min-width: 100px; height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; color: var(--text); background: #fff; }
.anem-in:disabled { background: #F6F8FC; color: var(--text-2); }
.anem-sm { min-width: 84px; max-width: 120px; }
select.anem-in { min-width: 104px; }
.anem-prov { display: block; font-size: 12px; color: var(--text-2); min-width: 120px; }
.anem-pc { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px; max-width: 150px; }
.anem-pc select { height: 30px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 12.5px; max-width: 140px; }
.anem-mini { height: 30px; padding: 0 10px; font-size: 12.5px; }
.anem-prob { color: #B4233A !important; }
.anem-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }
.anem-filters select, .anem-filters input { height: 36px; border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 13px; background: #fff; }
.anem-q { flex: 1 1 200px; }
.anem-q input { width: 100%; }
.anem-stable { min-width: 820px; }
.anem-nowrap { white-space: nowrap; }
.anem-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.anem-rules li { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.anem-rules li > span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.anem-rules b { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text); }
.anem-rules b .an-pf { width: 16px; height: 16px; }
.anem-rules small { font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; }
.anem-rn { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); font-weight: 700; display: grid; place-items: center; font-size: 14px; }
.anem-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border: 1px solid var(--border-soft); border-radius: 10px; }
.anem-sum > div { padding: 10px 8px; text-align: center; border-right: 1px solid var(--border-soft); min-width: 0; }
.anem-sum > div:last-child { border-right: 0; }
.anem-sum dt { font-size: 12.5px; font-weight: 600; color: var(--text); order: 2; }
.anem-sum dd { margin: 0; font-size: 26px; font-weight: 800; }
.anem-sum > div { display: flex; flex-direction: column; gap: 2px; }
.anem-sum dd { order: 1; }
.anem-sum small { order: 3; font-size: 11.5px; color: var(--text-2); }
.anem-sum .is-blue { color: var(--indigo); } .anem-sum .is-green { color: var(--green); } .anem-sum .is-red { color: var(--red); } .anem-sum .is-amber { color: var(--amber-line); }
.anem-coll { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.anem-coll > li { display: flex; flex-direction: column; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); }
.anem-coll > li:last-child { border-bottom: 0; padding-bottom: 0; }
.anem-coll ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.anem-coll ul li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; font-size: 13px; }
.anem-coll ul li .an-pf { width: 16px; height: 16px; }
.anem-coll ul li small { grid-column: 2 / -1; font-size: 11.5px; color: var(--text-2); }
.anem-never { font-size: 12px; color: var(--amber-text); font-weight: 600; }
.anem-links { margin: 0; font-size: 13px; color: var(--text-2); }
@media (max-width: 1180px) {
  .anem-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .anem-hright, .anem-hbtns { width: 100%; justify-content: stretch; }
  .anem-hbtns .po-btn { flex: 1 1 140px; justify-content: center; }
  .anem-tabs { padding: 0 12px; gap: 2px 14px; }
  .anem-tab { font-size: 13px; padding: 10px 0 8px; }
  .anem-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anem-sum > div:nth-child(2) { border-right: 0; }
  .anem-sum > div:nth-child(-n+2) { border-bottom: 1px solid var(--border-soft); }
  .anem-filters > * { flex: 1 1 140px; }
}
/* ---------- Analytics-37 · Consent and signal diagnostics (plans/Analytics-37.md §2; prefix ancg-, with A33's angt- cards and A36's anem- head pieces) ---------- */
.ancg-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ancg-legal { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 13px; border-radius: 10px; background: #F6F8FC; border: 1px solid var(--border); font-size: 13px; color: var(--text-2); }
.ancg-legal > .i { flex: none; font-size: 18px; color: var(--indigo); }
.ancg-open { display: flex; gap: 8px; align-items: flex-start; }
.ancg-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ancg-tile { display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-width: 0; }
.ancg-tile > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ancg-tile b { font-size: 22px; font-weight: 800; color: var(--text); }
.ancg-tile span:not(.ancg-tic) { font-size: 14px; color: var(--text); }
.ancg-tile small { font-size: 12px; color: var(--text-2); }
.ancg-tic { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; background: #F1F3F8; color: var(--grey); }
.ancg-tile.is-green .ancg-tic { background: var(--green-bg); color: var(--green); }
.ancg-tile.is-red .ancg-tic { background: #FDECEF; color: var(--red); }
.ancg-tile.is-amber .ancg-tic { background: var(--amber-bg); color: var(--amber); }
.ancg-row3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr) minmax(0, 1.15fr); gap: 16px; align-items: start; }
.ancg-row2 { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ancg-scen, .ancg-evid, .ancg-recs, .ancg-prov { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ancg-scen li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--border-soft); border-radius: 10px; }
.ancg-sic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; background: #F1F3F8; color: var(--grey); }
.ancg-scen li.is-red .ancg-sic { background: #FDECEF; color: var(--red); }
.ancg-scen li.is-green .ancg-sic { background: var(--green-bg); color: var(--green); }
.ancg-stext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ancg-stext b { font-size: 14px; } .ancg-stext small { font-size: 12px; color: var(--text-2); }
.ancg-none { color: var(--amber-text) !important; }
.ancg-sig { display: flex; flex-direction: column; gap: 4px; }
.ancg-sig > span { display: flex; gap: 6px; align-items: center; justify-content: flex-end; font-size: 12px; }
.ancg-sig code { font-size: 11.5px; background: #F3F5FA; padding: 1px 5px; border-radius: 5px; }
.ancg-evid li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: center; }
.ancg-evid li > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ancg-evid b { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
.ancg-evid small { font-size: 12px; color: var(--text-2); }
.ancg-evid .po-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; }
.ancg-thumb { position: relative; height: 66px; border-radius: 8px; background: #2B2F3D; overflow: hidden; display: block; }
.ancg-thumb span { position: absolute; left: 14%; right: 14%; border-radius: 3px; background: #fff; }
.ancg-thumb span:nth-child(1) { top: 18%; height: 34%; }
.ancg-thumb span:nth-child(2) { top: 60%; height: 12%; left: 18%; right: 54%; background: #3D4354; }
.ancg-thumb span:nth-child(3) { top: 60%; height: 12%; left: 52%; right: 18%; background: var(--indigo); }
.ancg-thumb.is-accept { background: #E8F7EF; } .ancg-thumb.is-accept span:nth-child(1) { background: var(--green); opacity: .25; }
.ancg-table { min-width: 380px; }
.ancg-table .anem-dest span { align-items: flex-start; gap: 3px; }
.ancg-table td { vertical-align: middle; }
.ancg-table tr.is-on td { background: var(--indigo-bg-2); }
.ancg-pair { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.ancg-recs li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px; border-radius: 10px; background: #F6F8FC; border: 1px solid var(--border-soft); }
.ancg-recs li.is-amber { background: var(--amber-bg); border-color: #F6D58E; } .ancg-recs li.is-red { background: #FFF1F3; border-color: #F7C9D1; }
.ancg-recs li > .i { font-size: 20px; color: var(--amber); }
.ancg-recs li > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ancg-recs b { font-size: 14px; } .ancg-recs small { font-size: 12.5px; color: var(--text-2); }
.ancg-ract { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.ancg-prio { font-size: 12.5px; color: var(--text-2); display: inline-flex; gap: 6px; align-items: center; }
.ancg-prov li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); }
.ancg-prov li:last-child { border-bottom: 0; }
.ancg-prov li.is-nomark { grid-template-columns: minmax(0, 1fr) auto; }
.ancg-prov li.is-nomark > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ancg-prov li > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ancg-prov .an-pf { width: 18px; height: 18px; }
.ancg-prov b { font-size: 13.5px; } .ancg-prov small { font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.ancg-gtags { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; font-size: 12px; }
@media (max-width: 1180px) {
  .ancg-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ancg-row3, .ancg-row2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .ancg-tiles { grid-template-columns: minmax(0, 1fr); }
  .ancg-scen li { grid-template-columns: 40px minmax(0, 1fr); }
  .ancg-sig { grid-column: 1 / -1; }
  .ancg-sig > span { justify-content: flex-start; }
  .ancg-recs li { grid-template-columns: 22px minmax(0, 1fr); }
  .ancg-ract { grid-column: 1 / -1; justify-content: flex-start; }
  .ancg-prov li { grid-template-columns: 20px minmax(0, 1fr); }
  .ancg-prov li.is-nomark { grid-template-columns: minmax(0, 1fr); }
  .ancg-prov li.is-nomark > .po-chip { grid-column: 1; }
  .ancg-prov li > .po-chip, .ancg-prov li > .po-btn { grid-column: 2; justify-self: start; }
}
/* ---------- Analytics-38 · Test events and troubleshooting (plans/Analytics-38.md §2; prefix andb-, with A33's angt- cards, A36's anem- tab pills and A37's ancg- provider list) ---------- */
.andb-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.andb-hright { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.andb-hright > .po-btn { height: 44px; gap: 8px; font-size: 14px; padding: 0 18px; }
.andb-runsel { min-width: 0; }
.andb-runsel select { height: 44px; max-width: 360px; }
.andb-new { gap: 12px; }
.andb-evs { border: 0; margin: 0; padding: 0; display: flex; gap: 10px 22px; flex-wrap: wrap; }
.andb-evs legend { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.andb-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.andb-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr); gap: 14px; }
.andb-tile { display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-width: 0; }
.andb-tile > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.andb-tile b { font-size: 26px; font-weight: 800; color: var(--text); }
.andb-apart b { font-size: 16px; }
.andb-tile small { font-size: 12px; color: var(--text-2); }
.andb-tic { flex: none; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; background: var(--indigo-bg); color: var(--indigo); }
.andb-tile.is-green .andb-tic { background: var(--green-bg); color: var(--green); }
.andb-tile.is-red .andb-tic { background: #FDECEF; color: var(--red); }
.andb-tile.is-grey .andb-tic { background: #F1F3F8; color: var(--grey); }
.andb-cols { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 16px; align-items: start; }
.andb-journey h2 .po-link { display: inline-flex; align-items: center; gap: 4px; }
.andb-browser { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; }
.andb-bbar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #F3F5FA; border-bottom: 1px solid var(--border-soft); }
.andb-bbar i { width: 10px; height: 10px; border-radius: 50%; background: #F0546A; }
.andb-bbar i:nth-child(2) { background: #F5A524; } .andb-bbar i:nth-child(3) { background: #12B981; }
.andb-bbar span { margin-left: 8px; flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; background: #fff; border-radius: 999px; padding: 3px 12px; font-size: 12.5px; color: var(--text-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.andb-site { padding: 14px 18px 18px; }
.andb-nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); }
.andb-nav b { font-size: 16px; color: var(--text); margin-right: 8px; }
.andb-nav em { margin-left: auto; font-style: normal; background: var(--indigo); color: #fff; border-radius: 8px; padding: 6px 12px; font-weight: 600; }
.andb-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 16px; align-items: center; margin-top: 16px; }
.andb-hero h3 { margin: 0; font-size: 26px; line-height: 1.15; font-weight: 800; color: var(--text); }
.andb-hero p { margin: 8px 0 12px; font-size: 14px; color: var(--text-2); }
.andb-cta { display: inline-block; background: var(--indigo); color: #fff; border-radius: 8px; padding: 8px 14px; font-weight: 600; font-size: 13.5px; }
.andb-chart { display: block; height: 130px; border-radius: 10px; background: linear-gradient(160deg, #1F2433 0%, #2E3447 100%); position: relative; overflow: hidden; }
.andb-chart::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 22%; height: 46%; background: linear-gradient(120deg, transparent 0 20%, #12B981 20% 22%, transparent 22% 45%, #12B981 45% 47%, transparent 47% 70%, #12B981 70% 72%, transparent 72%); opacity: .8; }
.andb-pages { margin: 0; font-size: 12.5px; color: var(--text-2); }
.andb-pages code { font-size: 12px; background: #F3F5FA; padding: 1px 5px; border-radius: 5px; }
.andb-exp { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.andb-exp li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13.5px; }
.andb-exp li > .i { color: var(--indigo); font-size: 18px; }
.andb-exp li span { display: flex; flex-direction: column; min-width: 0; }
.andb-exp small { font-size: 12px; color: var(--text-2); }
.andb-sbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.andb-show { display: flex; gap: 16px; margin: 0; }
.andb-show .anem-tab { padding: 4px 0; font-size: 13px; }
.andb-table { min-width: 640px; }
.andb-table td:first-child, .andb-table td:nth-child(2) { white-space: nowrap; }
.andb-table td { vertical-align: middle; }
.andb-table tr.is-on td { background: var(--indigo-bg-2); }
.andb-ev { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; color: var(--text); text-decoration: none; }
.andb-ev:hover { color: var(--indigo); }
.andb-ev .i { color: var(--indigo); font-size: 16px; }
.andb-insp { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 16px; align-items: start; }
.andb-insp .angt-kv .is-bad dd { color: #B4233A; font-weight: 600; }
.andb-insp .angt-kv .is-ok dd { color: var(--green-text); font-weight: 600; }
.andb-code { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; min-width: 0; }
.andb-ctabs { display: flex; gap: 16px; padding: 0 12px; border-bottom: 1px solid var(--border-soft); background: #F8F9FC; }
.andb-ctabs button { border: 0; background: none; padding: 9px 0 7px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-2); border-bottom: 2px solid transparent; cursor: pointer; }
.andb-ctabs button[aria-selected="true"] { color: var(--indigo); border-bottom-color: var(--indigo); }
.andb-json { margin: 0; padding: 12px; max-height: 280px; overflow: auto; font-size: 12.5px; line-height: 1.5; background: #fff; color: #1F2A6B; white-space: pre; }
.andb-val { padding: 12px; font-size: 13px; }
.andb-val ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.andb-val p { margin: 0; color: var(--text-2); }
.andb-row2 { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1180px) {
  .andb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .andb-cols, .andb-row2, .andb-insp { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .andb-tiles { grid-template-columns: minmax(0, 1fr); }
  .andb-hright, .andb-hright > .po-btn, .andb-runsel, .andb-runsel select { width: 100%; max-width: none; }
  .andb-hright > .po-btn { justify-content: center; }
  .andb-g3 { grid-template-columns: minmax(0, 1fr); }
  .andb-hero { grid-template-columns: minmax(0, 1fr); }
  .andb-hero h3 { font-size: 21px; }
  .andb-nav span { display: none; }
  .andb-sbtns, .andb-sbtns .po-btn { width: 100%; justify-content: center; }
}
/* ---------- Analytics-39 · Offline outcomes and lead quality (plans/Analytics-39.md §2; prefix anof-, with A33's angt- cards and A37's ancg- provider list) ---------- */
.anof-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anof-hright { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.anof-hright > .po-btn { height: 46px; gap: 8px; font-size: 15px; padding: 0 22px; }
.anof-upsel { min-width: 0; }
.anof-upsel select { height: 46px; max-width: 300px; }
.anof-updated { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--text-2); }
.anof-updated b { font-weight: 500; color: var(--text); white-space: nowrap; }
.anof-steps { list-style: none; margin: 0; padding: 12px 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.anof-step { display: flex; align-items: center; min-width: 0; position: relative; }
.anof-step + .anof-step::before { content: ""; position: absolute; left: -6px; top: 50%; width: 1px; height: 30px; transform: translateY(-50%); background: var(--border-soft); }
.anof-step > a, .anof-step > span { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; padding: 4px; border-radius: 10px; min-width: 0; }
.anof-step b { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; font-size: 16px; font-weight: 700; color: var(--text-2); background: #EEF0F6; }
.anof-step.is-on b { background: var(--indigo); color: #fff; box-shadow: 0 0 0 4px #E3E8FF; }
.anof-step.is-done b { background: var(--green-bg); color: var(--green); }
.anof-stext { display: flex; flex-direction: column; min-width: 0; }
.anof-stext > span { font-weight: 600; font-size: 15px; }
.anof-stext small { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anof-step > a:hover .anof-stext > span { color: var(--indigo); }
.anof-row1 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.anof-row2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.anof-row3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.anof-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--border-soft); }
.anof-tabs button { border: 0; background: none; padding: 8px 2px 9px; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-2); border-bottom: 2px solid transparent; cursor: pointer; }
.anof-tabs button[aria-selected="true"] { color: var(--indigo); border-bottom-color: var(--indigo); }
.anof-pane { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.anof-crm { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.anof-crm li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px; border: 1px solid var(--border); border-radius: 12px; }
.anof-crm li.is-off { background: #FAFBFD; }
.anof-crm li.is-off .anof-ctext b { color: var(--text-2); }
.anof-cmark { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #F1F3F8; color: var(--text-2); font-weight: 700; font-size: 15px; }
.anof-cmark svg { width: 24px; height: 24px; }
.anof-ctext { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.anof-ctext b { font-size: 14px; }
.anof-ctext small { font-size: 12px; color: var(--text-2); }
.anof-cnote { color: var(--amber-text, #8A5A00) !important; }
.anof-crm .po-link { font-size: 12.5px; white-space: nowrap; }
.anof-file { display: grid; grid-template-columns: 26px minmax(0, 1fr) 24px; gap: 10px; align-items: center; padding: 12px 14px; border: 1px dashed #C9D2F5; border-radius: 12px; background: #F8FAFF; }
.anof-file > .i:first-child { font-size: 24px; color: var(--indigo); }
.anof-file > .i:last-child { font-size: 22px; color: var(--green); }
.anof-file span { display: flex; flex-direction: column; min-width: 0; }
.anof-file b { font-size: 14.5px; overflow-wrap: anywhere; }
.anof-file small { font-size: 12.5px; color: var(--text-2); }
.anof-cols { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.anof-cols li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: #F3F5FA; font-size: 12px; color: var(--text-2); max-width: 100%; }
.anof-cols li code { font-size: 12px; color: var(--text); overflow-wrap: anywhere; }
.anof-cols li small { display: none; }
.anof-cols li.is-email, .anof-cols li.is-phone { background: var(--green-bg); color: var(--green-text); }
.anof-cols li.is-dropped { background: #FDECEF; color: #B4233A; text-decoration: line-through; }
.anof-drop { margin: 0; }
.anof-dz { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px dashed var(--border); border-radius: 12px; cursor: pointer; position: relative; }
.anof-dz:hover, .anof-dz:focus-within { border-color: var(--indigo); background: var(--indigo-bg-2); }
.anof-dz > .i { font-size: 22px; color: var(--indigo); }
.anof-dz span { display: flex; flex-direction: column; min-width: 0; }
.anof-dz b { color: var(--indigo); font-size: 14px; }
.anof-dz small { font-size: 12px; color: var(--text-2); }
.anof-dz input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.anof-mtable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.anof-mtable thead th { text-align: left; font-size: 12px; font-weight: 600; color: var(--text-2); background: #F6F7FB; padding: 7px 8px; }
.anof-mtable tbody th { text-align: left; font-weight: 500; padding: 6px 8px; color: var(--text); white-space: nowrap; }
.anof-mtable tbody th abbr { color: #B4233A; text-decoration: none; }
.anof-mtable td { padding: 5px 8px; vertical-align: middle; }
.anof-mtable td:last-child { width: 26px; text-align: center; }
.anof-mtable select { width: 100%; min-width: 0; height: 34px; border: 1px solid var(--border); border-radius: 8px; padding: 0 8px; font: inherit; font-size: 13px; background: #fff; }
.anof-mtable tr.is-match th { color: var(--text-2); }
.anof-ok { color: var(--green); font-size: 18px; }
.anof-bad { color: var(--amber, #F59E0B); font-size: 18px; }
.anof-prob { display: block; color: #B4233A; font-size: 12px; margin: 3px 0 0; }
.anof-outs { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.anof-outs legend { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.anof-g2 { grid-template-columns: minmax(0, 1fr); }
.anof-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.anof-checks li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; }
.anof-checks li > .i { font-size: 26px; color: #A8B0C2; }
.anof-checks li.is-ok > .i { color: var(--green); }
.anof-checks li.is-warn > .i { color: var(--amber, #F59E0B); }
.anof-checks span { display: flex; flex-direction: column; min-width: 0; }
.anof-checks b { font-size: 14.5px; }
.anof-checks small { font-size: 12.5px; color: var(--text-2); }
.anof-legend { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); }
.anof-legend li { display: inline-flex; align-items: center; gap: 6px; }
.anof-legend li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
.anof-legend li.is-red::before { background: var(--red); }
.anof-legend li.is-amber::before { background: #F59E0B; }
.anof-table { min-width: 760px; }
.anof-table td { vertical-align: middle; }
.anof-table td:first-child { width: 44px; }
.anof-table td:nth-child(2), .anof-table td:nth-child(3), .anof-table td:nth-child(4), .anof-table td:nth-child(5) { white-space: nowrap; }
.anof-table td:last-child { min-width: 180px; }
.anof-table tr.is-rejected td:last-child { color: #B4233A; }
.anof-table tr.is-duplicate td:last-child { color: #8A5A00; }
.anof-prov { display: block; font-size: 11.5px; margin-top: 3px; color: var(--text-2); }
.anof-prov.is-green { color: var(--green-text); }
.anof-prov.is-red { color: #B4233A; }
.anof-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.anof-tiles li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 0; }
.anof-tiles li + li { border-left: 1px solid var(--border-soft); padding-left: 12px; }
.anof-tiles li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.anof-tiles b { font-size: 24px; font-weight: 800; color: var(--text); line-height: 1.1; }
.anof-tiles small { font-size: 12px; color: var(--text-2); }
.anof-tiles small:first-of-type { font-weight: 600; color: var(--text); font-size: 13px; }
.anof-tic { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: var(--green-bg); color: var(--green); }
.anof-tiles li.is-amber .anof-tic { background: #FEF3E2; color: #E58A00; }
.anof-tiles li.is-red .anof-tic { background: #FDECEF; color: var(--red); }
.anof-status { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; border-top: 1px solid var(--border-soft); padding-top: 12px; }
.anof-status > div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 10px; align-items: start; }
.anof-status dt { font-size: 13.5px; font-weight: 600; color: var(--text); display: flex; flex-direction: column; }
.anof-status dt small { font-weight: 400; font-size: 12px; color: var(--text-2); }
.anof-status dd { margin: 0; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; min-width: 0; }
.anof-status dd small { font-size: 12px; color: var(--text-2); }
.anof-acts { flex-wrap: wrap; }
.anof-acts .po-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.anof-acts .btn-primary[data-anof-plan] { flex: 1 1 200px; justify-content: center; }
.anof-hint { text-align: center; margin: 0; }
.anof-range { font-size: 12.5px; font-weight: 500; color: var(--text-2); margin-left: 6px; }
.anof-quality { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.anof-quality li { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.anof-quality small { font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.anof-quality b { font-size: 22px; font-weight: 800; color: var(--text); overflow-wrap: anywhere; }
.anof-quality li:last-child b { font-size: 15px; line-height: 1.35; }
.anof-quality span { font-size: 12px; color: var(--text-2); }
.anof-quality .po-link { font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; margin-top: auto; }
@media (max-width: 1180px) {
  .anof-row1, .anof-row2, .anof-row3 { grid-template-columns: minmax(0, 1fr); }
  .anof-quality { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .anof-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px 12px; }
  .anof-step + .anof-step::before { display: none; }
  .anof-hright { width: 100%; justify-content: stretch; }
  .anof-hright > .po-btn, .anof-upsel, .anof-upsel select { width: 100%; max-width: none; }
  .anof-tiles { grid-template-columns: minmax(0, 1fr); }
  .anof-tiles li + li { border-left: 0; padding-left: 0; border-top: 1px solid var(--border-soft); }
  .anof-status > div { grid-template-columns: minmax(0, 1fr); }
  .anof-quality { grid-template-columns: minmax(0, 1fr); }
  .anof-acts .po-btn { width: 100%; justify-content: center; }
}
/* ---------- Analytics-40 · Attribution settings (plans/Analytics-40.md §2; prefix anat-, with A33's angt- cards and A39's anof-updated) ---------- */
.anat-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anat-hright { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.anat-hright > .po-btn { height: 46px; gap: 8px; font-size: 15px; padding: 0 22px; }
.anat-tabs { display: flex; gap: 28px; padding: 0 20px; overflow-x: auto; scrollbar-width: none; }
.anat-tab { padding: 13px 2px 11px; font-size: 14.5px; font-weight: 600; color: var(--text-2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.anat-tab:hover { color: var(--indigo); }
.anat-tab.is-on { color: var(--indigo); border-bottom-color: var(--indigo); }
.anat-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.anat-card.is-off { background: #FAFBFD; }
.anat-chead { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.anat-chead h2 { margin: 0; font-size: 18px; }
.anat-chead p { margin: 0; font-size: 13px; color: var(--text-2); }
.anat-mark { width: 50px; height: 50px; border-radius: 50%; background: #F3F5FA; display: grid; place-items: center; }
.anat-mark svg { width: 30px; height: 30px; }
.anat-rows { margin: 0; display: flex; flex-direction: column; gap: 9px; }
.anat-rows > div { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 10px; }
.anat-rows dt { font-size: 13px; color: var(--text-2); }
.anat-rows dd { margin: 0; font-size: 13.5px; color: var(--text); font-weight: 500; display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.anat-rows dd small { font-size: 11.5px; color: var(--text-2); font-weight: 400; }
.anat-change { border-top: 1px solid var(--border-soft); padding-top: 10px; }
.anat-change summary { cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--indigo); display: flex; align-items: center; gap: 6px; list-style: none; }
.anat-change summary::-webkit-details-marker { display: none; }
.anat-cform { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.anat-ui { font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.anat-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.anat-bottom .anat-diff { grid-column: 1 / -1; order: 3; }
.anat-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.anat-ticks { list-style: none; margin: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: #F7F9FC; border-radius: 12px; }
.anat-ticks li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.anat-ticks .i { color: var(--green); font-size: 17px; flex: none; }
.anat-table { min-width: 760px; font-size: 13px; }
.anat-table td { min-width: 130px; }
.anat-table th[scope="row"] { font-weight: 600; white-space: nowrap; text-align: left; }
.anat-why { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--text); }
.anat-pform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.anat-pform .anat-future, .anat-pform .angt-actions { grid-column: 1 / -1; }
.anat-future { display: flex; gap: 8px; align-items: flex-start; margin: 0; }
.anat-future label { display: flex; flex-direction: column; font-size: 13px; }
.anat-future small { color: var(--text-2); font-size: 12px; }
.anat-wide { grid-column: 1 / -1; }
.anat-versions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.anat-versions li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 2px 10px; font-size: 13.5px; }
.anat-versions small { grid-column: 2; color: var(--text-2); font-size: 12px; }
.anat-anns { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.anat-anns li { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--border-soft); }
.anat-anns li:first-child { border-top: 0; }
.anat-anns span { display: flex; flex-direction: column; min-width: 0; }
.anat-anns small { font-size: 12px; color: var(--text-2); }
.anat-adate { font-weight: 700; color: var(--indigo); font-size: 13.5px; }
.anat-aform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.anat-aform .angt-actions, .anat-aform .angt-check { grid-column: 1 / -1; }
@media (max-width: 1180px) {
  .anat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anat-bottom, .anat-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .anat-cards, .anat-aform, .anat-pform, .anat-bottom { grid-template-columns: minmax(0, 1fr); }
  .anat-hright { width: 100%; }
  .anat-hright > .po-btn { width: 100%; justify-content: center; }
  .anat-tabs { gap: 18px; padding: 0 14px; }
  .anat-rows > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
/* ---------- Analytics-41 · Revenue reconciliation (plans/Analytics-41.md §2; prefix anrv-, with A33's angt- cards and A39's anof- stepper / tiles) ---------- */
.anrv-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anrv-hright { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.anrv-periods { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; }
.anrv-periods a { padding: 10px 14px; font-size: 13.5px; font-weight: 600; color: var(--text-2); text-decoration: none; white-space: nowrap; }
.anrv-periods a + a { border-left: 1px solid var(--border); }
.anrv-periods a.is-on { background: var(--indigo-bg); color: var(--indigo); }
.anrv-cols { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.45fr) minmax(0, 0.95fr); gap: 16px; align-items: start; }
.anrv-imports { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.anrv-imports li { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px dashed #C9D2F5; border-radius: 12px; align-items: flex-start; }
.anrv-imports li.is-on { background: #F8FAFF; border-style: solid; border-color: var(--indigo); }
.anrv-imports a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: center; color: var(--text); text-decoration: none; width: 100%; }
.anrv-imports a > .i { font-size: 22px; color: var(--indigo); }
.anrv-imports a span { display: flex; flex-direction: column; min-width: 0; }
.anrv-imports b { font-size: 14px; overflow-wrap: anywhere; }
.anrv-imports small { font-size: 12.5px; color: var(--text-2); }
.anrv-map { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.anrv-map > div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 10px; align-items: center; }
.anrv-map dt { font-size: 13.5px; color: var(--text); }
.anrv-map dd { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; min-width: 0; }
.anrv-map code { font-size: 12.5px; overflow-wrap: anywhere; }
.anrv-rules { display: flex; flex-direction: column; gap: 10px; }
.anrv-rules fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.anrv-rules legend { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.anrv-table { min-width: 0; table-layout: auto; }
.anrv-cur { font-size: 11.5px; color: var(--text-2); font-weight: 600; }
.anrv-table td:nth-child(2) { white-space: nowrap; }
.anrv-table td:last-child { min-width: 130px; }
.anrv-table th { white-space: normal; }
.anrv-table th, .anrv-table td { padding-left: 8px; padding-right: 8px; }
.anrv-table td { vertical-align: middle; }
.anrv-table td small { display: block; font-size: 11.5px; color: var(--text-2); }
.anrv-table tr.is-duplicate td:last-child { color: #B4233A; }
.anrv-table tr.is-unmatched td:last-child { color: #8A5A00; }
.anrv-acts { justify-content: flex-end; }
.anrv-acts .po-btn { height: 46px; padding: 0 20px; gap: 8px; }
.anrv-acts .po-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.anrv-counts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.anrv-counts li, .anrv-total { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; }
.anrv-counts li + li { border-top: 1px solid var(--border-soft); }
.anrv-counts span:nth-child(2), .anrv-total span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.anrv-counts b, .anrv-total b { font-size: 14.5px; }
.anrv-counts small, .anrv-total small { font-size: 12px; color: var(--text-2); }
.anrv-counts em { font-style: normal; font-size: 22px; font-weight: 800; text-align: right; display: flex; flex-direction: column; }
.anrv-counts em small { font-size: 12.5px; font-weight: 500; }
.anrv-counts li.is-blue .anof-tic { background: var(--indigo-bg); color: var(--indigo); }
.anrv-counts li.is-grey .anof-tic { background: #F1F3F8; color: var(--grey); }
.anrv-counts li.is-red .anof-tic { background: #FDECEF; color: var(--red); }
.anrv-total { border-top: 1px solid var(--border); padding-top: 14px; }
.anrv-total em { font-style: normal; font-size: 28px; font-weight: 800; color: var(--text); text-align: right; overflow-wrap: anywhere; }
.anrv-plat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.anrv-plat li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; font-size: 13.5px; }
.anrv-plat li span { font-weight: 700; text-align: right; }
.anrv-plat li small { grid-column: 1 / -1; font-size: 12px; color: var(--text-2); }
.anrv-match { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text-2); display: flex; flex-direction: column; gap: 4px; }
.angt-h3 small { font-weight: 400; font-size: 12px; color: var(--text-2); margin-left: 4px; }
@media (max-width: 1180px) {
  .anrv-cols { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .anrv-sum { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .anrv-cols { grid-template-columns: minmax(0, 1fr); }
  .anrv-table { min-width: 520px; }
  .anrv-hright { width: 100%; justify-content: stretch; }
  .anrv-periods { width: 100%; }
  .anrv-periods a { flex: 1; text-align: center; padding: 10px 6px; }
  .anrv-acts .po-btn { width: 100%; justify-content: center; }
}
/* ---------- Analytics-42 · Reporting currencies (plans/Analytics-42.md §2; prefix anfx-, a modal over the Analytics settings frame, with A33's angt- fields and table) ---------- */
.anfx-root { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anfx-frame { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anfx-shead h1 { margin: 0; font-size: 28px; font-weight: 800; color: var(--text); }
.anfx-shead p { margin: 4px 0 0; font-size: 14px; color: var(--text-2); }
.anfx-fcols { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr) minmax(0, 330px); gap: 16px; align-items: start; min-height: 560px; }
.anfx-nav { display: flex; flex-direction: column; gap: 4px; padding: 10px; }
.anfx-navitem { display: flex; align-items: flex-start; gap: 12px; padding: 11px 12px; border-radius: 10px; color: var(--text); text-decoration: none; }
.anfx-navitem > .i { flex: none; font-size: 24px; color: var(--text-2); margin-top: 2px; }
.anfx-navitem span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.anfx-navitem b { font-size: 14.5px; font-weight: 600; }
.anfx-navitem small { font-size: 12.5px; color: var(--muted); }
.anfx-navitem.is-on { background: var(--indigo-bg); }
.anfx-navitem.is-on b, .anfx-navitem.is-on > .i { color: var(--indigo); }
.anfx-fmain { min-height: 300px; padding: 18px; }
.anfx-rules { display: flex; flex-direction: column; gap: 18px; padding: 18px; }
.anfx-rule { display: flex; align-items: flex-start; gap: 12px; }
.anfx-rule > .i { flex: none; font-size: 22px; color: var(--indigo); padding: 9px; border-radius: 50%; background: var(--indigo-bg); box-sizing: content-box; }
.anfx-rule span { display: flex; flex-direction: column; gap: 3px; }
.anfx-rule b { font-size: 14.5px; color: var(--text); }
.anfx-rule small { font-size: 13px; color: var(--text-2); }
.anfx-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(16, 21, 47, 0.32); }
.anfx-modal { position: fixed; z-index: 71; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(764px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto;
  display: flex; flex-direction: column; padding: 22px 22px 18px; border-radius: 14px; box-shadow: 0 18px 60px rgba(16, 21, 47, 0.22); outline: none; box-sizing: border-box; }
.anfx-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anfx-mhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.anfx-mhead h2 { margin: 0; font-size: 25px; font-weight: 800; color: var(--text); }
.anfx-mhead p { margin: 4px 0 0; font-size: 14px; color: var(--text-2); }
.anfx-x { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 9px; color: var(--text-2); text-decoration: none; }
.anfx-x:hover { background: var(--indigo-bg-2); color: var(--text); }
.anfx-x .i { font-size: 20px; }
.anfx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 22px; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft); }
.anfx-f > span { font-size: 14px; font-weight: 600; color: var(--text); }
.anfx-f small { font-size: 12.5px; color: var(--muted); }
.anfx-keep { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; border-radius: 10px; background: #F4F7FF; border: 1px solid #DCE3FF; }
.anfx-keep b { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--text); }
.anfx-keep b .i { color: var(--indigo); font-size: 16px; }
.anfx-keep small { font-size: 12.5px; color: var(--text-2); }
.anfx-inline { display: flex; align-items: center; gap: 10px; }
.anfx-inline input { width: 90px !important; flex: none; }
.anfx-inline em { font-style: normal; font-size: 13px; color: var(--text-2); }
.anfx-rates { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.anfx-rhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.anfx-rhead h3 { margin: 0; font-size: 19px; font-weight: 700; color: var(--text); }
.anfx-rhead p { margin: 3px 0 0; font-size: 13px; color: var(--text-2); }
.anfx-rhead .po-btn { height: 38px; font-size: 14px; }
.anfx-table th, .anfx-table td { vertical-align: top; }
.anfx-num { text-align: right; white-space: nowrap; }
.anfx-code { display: flex; align-items: baseline; gap: 6px; }
.anfx-code b { font-size: 14px; }
.anfx-code small { font-size: 12.5px; color: var(--muted); }
.anfx-in { display: block; font-size: 11.5px; color: var(--muted); }
.anfx-where { margin: 0 0 6px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.anfx-where li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 2px 10px; font-size: 12.5px; color: var(--text-2); padding: 6px 10px; border: 1px solid var(--border-soft); border-radius: 8px; }
.anfx-where li b { color: var(--text); } .anfx-where li em { font-style: normal; font-weight: 600; color: var(--text); text-align: right; }
.anfx-where li small { grid-column: 2 / -1; color: var(--muted); font-size: 11.5px; }
.anfx-by { display: block; font-size: 11.5px; color: var(--muted); }
.anfx-acts { white-space: nowrap; }
.anfx-linkbtn { border: 0; background: none; padding: 0 0 0 10px; cursor: pointer; font: inherit; font-size: 13.5px; }
.anfx-linkbtn.is-danger { color: #B42339; }
.anfx-add { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid #DCE3FF; border-radius: 12px; background: #FAFBFF; }
.anfx-add[hidden] { display: none; }
.anfx-add h4 { margin: 0; font-size: 15px; color: var(--text); }
.anfx-addgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
/* backlog 3.17 · A04 GA4 landing visits per post, A08 sessions by session campaign */
.ancp-table .anor-pt small.ancp-visits { color: #2E44C8; }
.anfu-ctable { min-width: 860px; }
.anfu-ctable th:first-child { width: 28%; }
.anfu-ctable td:first-child .anfu-srcname, .anfu-ctable td:first-child .anfu-srcname > span { min-width: 0; }
.anfu-ctable td:first-child small, .anfu-ctable th small { white-space: normal; overflow-wrap: anywhere; }
.anfu-ctable td small a { color: inherit; }
/* backlog 3.17 · A25 value groups (channel groups) */
.anvg-rules { min-width: 520px; }
.anvg-rules input, .anvg-rules select { width: 100%; min-width: 0; }
.anvg-n { width: 32px; color: var(--muted); }
.anvg-x { width: 40px; text-align: center; }
.anvg-del { border: 0; background: none; cursor: pointer; padding: 4px; }
.anvg-acts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.anvg-note { flex: 1 1 220px; min-width: 0; }
.anvg-note input { width: 100%; }
.anvg-preview { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.anvg-preview h3 { margin: 0 0 6px; font-size: 14px; color: var(--text); }
.anvg-preview h3 small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.anvg-values td.num { text-align: right; font-variant-numeric: tabular-nums; }
.anvg-groups { margin: 0 0 10px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.anvg-groups li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border: 1px solid var(--border-soft); border-radius: 8px; font-size: 13px; }
.anvg-groups li b { overflow-wrap: anywhere; }
.anvg-groups li em { font-style: normal; font-variant-numeric: tabular-nums; }
.anvg-groups li.is-un { color: var(--muted); }
@media (max-width: 900px) { .anvg-preview { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) { .anvg-rules { min-width: 0; } .anvg-rules .anvg-n, .anvg-rules thead { display: none; } .anvg-rules input, .anvg-rules select { max-width: 100%; box-sizing: border-box; } }
/* backlog 3.16 · Analytics settings: the scope switch (this business · workspace defaults) and where each value comes from */
.anst-scope { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.anst-scope-i { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 8px 14px; border: 1px solid var(--border-soft); border-radius: 10px; background: #fff; color: var(--text); text-decoration: none; }
.anst-scope-i b { font-size: 13.5px; overflow-wrap: anywhere; }
.anst-scope-i small { font-size: 11.5px; color: var(--muted); }
.anst-scope-i.is-on { border-color: #3B5BFD; background: #EEF1FF; }
.anst-inh { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.anst-inh.is-business { color: #2E44C8; }
.anst-reset { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-size: 11.5px; }
.anst-drop { margin-top: 12px; }
/* backlog 3.15 · the ECB feed box of Reporting currencies */
.anfx-feed { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 12px; padding: 12px 14px; border: 1px solid #DCE3FF; border-radius: 12px; background: #FAFBFF; }
.anfx-feed.is-off { background: var(--surface-2, #F7F8FB); border-color: var(--border-soft); }
.anfx-feed-t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14px; color: var(--text); }
.anfx-feed-t em { font-style: normal; font-size: 12.5px; color: var(--muted); }
.anfx-feed > small { font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; }
.anfx-feed-dl { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); gap: 4px 18px; margin: 0; font-size: 12.5px; }
.anfx-feed-dl div { min-width: 0; }
.anfx-feed-dl dt { color: var(--muted); }
.anfx-feed-dl dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 768px) { .anfx-feed-dl { grid-template-columns: minmax(0, 1fr); } }
.anfx-banner { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid; }
.anfx-banner > .i { flex: none; font-size: 24px; margin-top: 2px; }
.anfx-banner > span:first-of-type { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.anfx-banner b { font-size: 14.5px; color: var(--text); }
.anfx-banner small { font-size: 12.5px; color: var(--text-2); }
.anfx-banner .anfx-miss { color: var(--text); }
.anfx-banner.is-warn { background: #FFF8EC; border-color: #F6D58E; } .anfx-banner.is-warn > .i { color: var(--amber); }
.anfx-banner.is-info { background: #F4F7FF; border-color: #DCE3FF; } .anfx-banner.is-info > .i { color: var(--indigo); }
.anfx-banner.is-ok { background: #F1FAF5; border-color: #BFE6D2; } .anfx-banner.is-ok > .i { color: var(--green); }
.anfx-retained { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; text-align: right; }
.anfx-retained b { font-size: 17px; }
.anfx-more summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--indigo); }
.anfx-more[open] summary { margin-bottom: 8px; }
.anfx-hist { margin: 0 0 8px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.anfx-hist li { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; color: var(--text-2); padding: 7px 10px; border: 1px solid var(--border-soft); border-radius: 8px; }
.anfx-hist li b { color: var(--text); }
.anfx-hist li em { margin-left: auto; font-style: normal; color: var(--green-text); }
.anfx-hist li.is-off em { color: var(--muted); }
.anfx-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 6px; }
/* A42's conversion notes on the screens that read the rule (A14's records table) */
.ancs-conv { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: var(--muted); white-space: normal; text-align: right; max-width: 260px; margin-left: auto; }
@media (max-width: 1180px) { .anfx-fcols { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); } .anfx-rules { display: none; } }
@media (max-width: 768px) {
  .anfx-fcols { grid-template-columns: minmax(0, 1fr); min-height: 0; } .anfx-fmain { display: none; }
  .anfx-scrim { z-index: 86; }
  .anfx-modal { z-index: 87; left: 0; right: 0; top: auto; bottom: 0; transform: none; width: 100vw; max-height: 92vh; border-radius: 16px 16px 0 0; padding: 16px; }
  .anfx-grid { grid-template-columns: minmax(0, 1fr); }
  .anfx-addgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .anfx-banner { flex-wrap: wrap; } .anfx-retained { align-items: flex-start; text-align: left; }
  .anfx-table thead { display: none; }
  .anfx-table, .anfx-table tbody, .anfx-table tr, .anfx-table td { display: block; width: 100%; box-sizing: border-box; }
  .anfx-table tr { padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
  .anfx-table td { border: 0 !important; padding: 3px 0 !important; text-align: left; }
  .anfx-table td::before { content: attr(data-label); display: block; font-size: 11.5px; color: var(--muted); }
  .anfx-table td[data-label="Currency"]::before { content: none; }
}
/* ---------- Analytics-43 · Reports and exports (plans/Analytics-43.md §2; prefix anrp-: the report cards, the shared report table and chart of A43 / A44, the snapshot drawer) ---------- */
.anrp-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anrp-head { align-items: flex-start; }
.anrp-zone { display: flex; align-items: center; gap: 12px; padding: 12px 16px; flex: 0 1 auto; }
.anrp-zone > .i { font-size: 30px; color: var(--indigo); flex: none; }
.anrp-zone span { display: flex; flex-direction: column; gap: 2px; }
.anrp-zone b { font-size: 15px; color: var(--text); }
.anrp-zone small { font-size: 12.5px; color: var(--text-2); }
.anrp-tabs { display: inline-flex; gap: 6px; }
.anrp-tabs a { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--text-2); text-decoration: none; }
.anrp-tabs a span { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--track); font-size: 11.5px; }
.anrp-tabs a.is-on { background: var(--indigo-bg); color: var(--indigo); }
.anrp-tabs a.is-on span { background: var(--indigo); color: #fff; }
.anrp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.anrp-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 12px; min-width: 0; }
.anrp-card.is-archived { opacity: 0.85; }
.anrp-chead { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.anrp-chead > div:first-child { min-width: 0; }
.anrp-chead h2 { margin: 0; font-size: 18px; font-weight: 700; }
.anrp-chead h2 a { color: var(--text); text-decoration: none; }
.anrp-chead h2 a:hover { color: var(--indigo); }
.anrp-chead p { margin: 4px 0 0; font-size: 13px; color: var(--text-2); }
.anrp-menuwrap { position: relative; flex: none; }
.anrp-dots { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--text-2); cursor: pointer; }
.anrp-dots:hover { background: var(--indigo-bg-2); }
.anrp-menu { right: 0; top: 36px; min-width: 250px; }
.anrp-menu small { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.anrp-thumb { position: relative; display: block; min-height: 132px; padding: 10px 10px 6px; border: 1px solid var(--border-soft); border-radius: 10px; text-decoration: none; color: inherit; background: #FCFDFF; }
.anrp-thumb:hover { border-color: #C9D2FF; }
.anrp-notrun { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: var(--muted); }
.anrp-spark { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.anrp-spark svg { width: 100%; height: 112px; display: block; overflow: visible; }
.anrp-hbars { margin: 0; padding: 4px 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.anrp-hbars li { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr) auto; align-items: center; gap: 8px; font-size: 12px; }
.anrp-hl { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anrp-ht { height: 14px; border-radius: 4px; background: var(--track); overflow: hidden; }
.anrp-ht i { display: block; height: 100%; border-radius: 4px; background: var(--indigo); }
.anrp-ht i.is-na { width: 0 !important; }
.anrp-hbars b { font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; min-width: 56px; text-align: right; }
.anrp-axis { stroke: var(--border); stroke-width: 1; }
.anrp-line { fill: none; stroke: var(--indigo); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.anrp-bar { fill: var(--indigo); }
.anrp-spark figcaption { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--muted); }
.anrp-spark figcaption b { color: var(--text-2); font-weight: 600; }
.anrp-nochart { min-height: 40px; display: grid; place-items: center; font-size: 12.5px; color: var(--muted); }
.anrp-src { margin: 0; font-size: 12px; color: var(--muted); }
.anrp-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.anrp-exp { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none; background: #fff; }
.anrp-exp:hover { border-color: #C9D2FF; color: var(--indigo); }
.anrp-exp .i { font-size: 15px; color: #D14343; }
.anrp-exp[data-anrp-export="csv"] .i, .anrp-exp[data-anrp-export="xlsx"] .i { color: #1F8A4C; }
.anrp-exp.is-off { color: var(--muted); background: #F6F7FA; }
.anrp-run { height: 34px !important; padding: 0 12px !important; font-size: 13px !important; margin-left: auto; gap: 6px !important; }
.anrp-moved { display: flex; gap: 6px; margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--amber-bg); font-size: 12.5px; color: var(--text); }
.anrp-moved .i { color: var(--amber); flex: none; }
.anrp-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.anrp-owner { display: flex; align-items: center; gap: 8px; }
.anrp-av { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); font-size: 12.5px; font-weight: 700; }
.anrp-owner > span:last-child { display: flex; flex-direction: column; }
.anrp-owner b { font-size: 13.5px; }
.anrp-owner small, .anrp-sched small { font-size: 12px; color: var(--muted); }
.anrp-sched { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.anrp-ver { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: 12px; color: var(--text-2); }
.anrp-ver small { color: var(--muted); overflow-wrap: anywhere; }
.anrp-create { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px 22px; text-align: center; border: 1.5px dashed #C9D2FF; background: #FBFCFF;
  text-decoration: none; color: var(--text-2); font-size: 14px; }
.anrp-create b { font-size: 20px; color: var(--text); }
.anrp-create .btn-primary { width: 100%; max-width: 250px; justify-content: center; }
.anrp-create.is-off { pointer-events: none; opacity: 0.6; }
.anrp-plus { display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); font-size: 26px; }
.anrp-emptycard { grid-column: span 2; }
.anrp-about { display: flex; align-items: center; gap: 16px; padding: 18px 20px; }
.anrp-aic { display: inline-grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); font-size: 24px; }
.anrp-about > div { flex: 1 1 auto; min-width: 0; }
.anrp-about h2 { margin: 0 0 4px; font-size: 18px; }
.anrp-about p { margin: 0; font-size: 13.5px; color: var(--text-2); }
.anrp-about .po-btn { flex: none; }
.anrp-twrap { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: 10px; max-width: 100%; }
.anrp-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.anrp-table th, .anrp-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-soft); text-align: left; vertical-align: middle; }
.anrp-table thead th { font-size: 12.5px; font-weight: 600; color: var(--text-2); background: #FAFBFD; white-space: nowrap; }
.anrp-table thead th small { display: block; font-weight: 500; color: var(--muted); font-size: 11px; }
.anrp-table .anrp-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.anrp-table th.anrp-dim { font-weight: 500; min-width: 120px; }
.anrp-table tbody th.anrp-dim { display: table-cell; }
.anrp-table th.anrp-dim > span { display: inline-flex; flex-direction: column; vertical-align: middle; }
.anrp-table th.anrp-dim b { font-weight: 600; color: var(--text); }
.anrp-table th.anrp-dim small { font-size: 11.5px; color: var(--muted); }
.anrp-mark { font-size: 18px; margin-right: 8px; vertical-align: middle; }
.anrp-flag { color: var(--amber-text) !important; }
.anrp-table td.is-na { color: var(--muted); cursor: help; }
.anrp-table tfoot th, .anrp-table tfoot td { font-weight: 700; color: var(--text); background: #FAFBFD; border-bottom: 0; }
.anrp-table tr.anrp-cmp th, .anrp-table tr.anrp-cmp td { font-weight: 500; font-size: 12px; color: var(--text-2); background: #fff; }
.anrp-table tr.anrp-cmp em { display: block; font-style: normal; color: var(--indigo); }
.anrp-table sup { color: var(--indigo); font-weight: 700; }
.anrp-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(16, 21, 47, 0.28); }
.anrp-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 71; display: flex; flex-direction: column; gap: 12px; width: min(760px, 100vw); padding: 20px 22px; background: var(--surface);
  box-shadow: -12px 0 40px rgba(16, 21, 47, 0.18); overflow-y: auto; box-sizing: border-box; outline: none; }
.anrp-dhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.anrp-dhead h2 { margin: 0; font-size: 21px; }
.anrp-dhead p { margin: 4px 0 0; font-size: 13px; color: var(--text-2); }
.anrp-dacts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.anrp-dacts .anrp-run { margin-left: 0; }
.anrp-notes { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-2); }
.anrp-notes li.is-warn, .anrp-notes li.is-block { color: var(--amber-text); }
.anrp-snaps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.anrp-snaps a { color: var(--indigo); text-decoration: none; }
.anrp-snaps a[aria-current] { font-weight: 700; color: var(--text); }
/* the Explore crumb's report links (every analysis, A03 … A30) */
.anor-crumb { flex-wrap: wrap; }
.anrp-xlinks { display: inline-flex; align-items: center; gap: 14px; margin-left: auto; flex-wrap: wrap; }
.anrp-xlinks .po-link { font-size: 13px; }
@media (max-width: 1400px) { .anrp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .anrp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .anrp-grid { grid-template-columns: minmax(0, 1fr); } .anrp-emptycard { grid-column: auto; }
  .anrp-about { flex-wrap: wrap; } .anrp-zone { width: 100%; box-sizing: border-box; }
  .anrp-scrim { z-index: 86; } .anrp-drawer { z-index: 87; width: 100vw; padding: 16px; }
}
/* ---------- Analytics-44 · Report builder (plans/Analytics-44.md §2; prefix anrb-, with A43's anrp- table and chart and A33's angt- fields) ---------- */
.anrb-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anrb-root[aria-busy="true"] .anrb-preview { opacity: 0.6; transition: opacity 0.15s; }
.anrb-head .angt-title { flex: 1 1 420px; }
.anrb-hright { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.anrb-hright .po-btn { height: 44px; }
.anrb-period { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.anrb-period > .i { font-size: 24px; color: var(--indigo); flex: none; }
.anrb-period > span { display: flex; flex-direction: column; }
.anrb-period select { border: 0; padding: 0; font: inherit; font-size: 15px; font-weight: 700; color: var(--text); background: none; }
.anrb-period small { font-size: 12px; color: var(--muted); }
.anrb-cur select { height: 52px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 15px; font-weight: 600; background: #fff; color: var(--text); }
/* backlog 3.7: the report's blocks */
.anrb-blocks { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; min-width: 0; }
.anrb-bhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.anrb-bhead > div { flex: 1 1 420px; min-width: 0; }
.anrb-bhead h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16.5px; font-weight: 700; color: var(--text); }
.anrb-bhead p { margin: 2px 0 0; font-size: 13px; color: var(--text-2); }
.anrb-btitle { flex: 0 1 300px; min-width: 0; }
.anrb-btitle input { width: 100%; box-sizing: border-box; }
.anrb-blist { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 8px; }
.anrb-bitem { display: flex; align-items: stretch; gap: 4px; min-width: 0; border: 1px solid var(--border-soft); border-radius: 10px; background: #FBFCFE; }
.anrb-bitem.is-on { border-color: var(--indigo); background: var(--indigo-bg); }
.anrb-bopen { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--text); }
.anrb-bopen > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.anrb-bopen b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anrb-bopen small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anrb-bno { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: #fff; border: 1px solid var(--border); font-size: 12.5px; font-weight: 700; }
.anrb-bitem.is-on .anrb-bno { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.anrb-bacts { display: flex; align-items: center; gap: 2px; padding-right: 6px; }
.anrb-bicon { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 7px; background: none; color: var(--text-2); cursor: pointer; }
.anrb-bicon:hover:not(:disabled) { background: #fff; color: var(--indigo); }
.anrb-bicon:disabled { opacity: 0.35; cursor: default; }
.anrb-badd { align-self: flex-start; gap: 6px; }
.anrp-dblock { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.anrp-dblock + .anrp-dblock { padding-top: 12px; border-top: 1px solid var(--border-soft); }
.anrp-dbt { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
.anrp-dbt small { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.anrb-cols { display: grid; grid-template-columns: minmax(0, 370px) minmax(0, 1fr); gap: 16px; align-items: start; }
.anrb-form { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.anrb-custom { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.anrb-custom[hidden] { display: none; }
.anrb-sec { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }
.anrb-sec h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16.5px; font-weight: 700; color: var(--text); }
.anrb-sec h2 small { font-weight: 500; color: var(--muted); font-size: 13px; }
.anrb-sec > p { margin: -4px 0 2px; font-size: 13px; color: var(--text-2); }
.anrb-i { display: inline-flex; color: var(--muted); cursor: help; }
.anrb-count { font-size: 13px; font-weight: 600; color: var(--indigo); }
.anrb-srcs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.anrb-src { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 9px; background: #FBFCFE; cursor: pointer; }
.anrb-src input { width: 18px; height: 18px; flex: none; accent-color: var(--indigo); }
.anrb-logo { font-size: 24px; flex: none; }
.anrb-src > span { display: flex; flex-direction: column; min-width: 0; }
.anrb-src b { font-size: 14px; font-weight: 600; color: var(--text); }
.anrb-src small { font-size: 12px; color: var(--muted); }
.anrb-src.is-off { opacity: 0.6; cursor: not-allowed; }
.anrb-ds select, .anrb-sec > select { height: 40px; padding: 0 11px; border: 1px solid var(--border); border-radius: 9px; font: inherit; font-size: 14px; color: var(--text); background: #fff; width: 100%; box-sizing: border-box; }
.anrb-ds small { font-size: 12px; color: var(--muted); }
.anrb-mets { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px; }
.anrb-mets label { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--text); cursor: pointer; }
.anrb-mets input { width: 18px; height: 18px; flex: none; margin-top: 1px; accent-color: var(--indigo); }
.anrb-mets label > span { display: flex; flex-direction: column; min-width: 0; }
.anrb-mets small { font-size: 11.5px; color: var(--muted); }
.anrb-mets label.is-needs > span { color: var(--muted); }
.anrb-mets label.is-needs small::after { content: " · select its source"; color: var(--amber-text); }
.anrb-mets li.is-never label { cursor: not-allowed; color: var(--muted); }
.anrb-camps summary { cursor: pointer; height: 40px; display: flex; align-items: center; padding: 0 11px; border: 1px solid var(--border); border-radius: 9px; font-size: 14px; color: var(--text); background: #fff; }
.anrb-camps ul { margin: 6px 0 0; padding: 6px 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.anrb-camps label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.anrb-camps label .i { font-size: 18px; }
.anrb-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.anrb-preview { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anrb-card { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; min-width: 0; }
.anrb-phead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.anrb-phead h2 { margin: 0; font-size: 19px; font-weight: 700; }
.anrb-phead p { margin: 3px 0 0; font-size: 13px; color: var(--text-2); }
.anrb-note { margin: 0; font-size: 12.5px; color: var(--text-2); }
.anrb-sub { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; }
.anrb-defs, .anrb-checks { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; min-width: 0; }
.anrb-defs h3, .anrb-checks h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15.5px; color: var(--text); }
.anrb-defs h3 .i { color: var(--indigo); } .anrb-checks h3 .i { color: var(--amber); }
.anrb-defs > p, .anrb-checks > p { margin: -4px 0 0; font-size: 12.5px; color: var(--text-2); }
.anrb-defs dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 14px; }
.anrb-defs dl > div { min-width: 0; }
.anrb-defs dt { font-size: 13px; font-weight: 600; color: var(--text); }
.anrb-defs dd { margin: 2px 0 0; font-size: 12.5px; color: var(--text-2); }
.anrb-defs dd small { display: block; color: var(--muted); font-size: 11.5px; }
.anrb-checks ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.anrb-checks li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text); }
.anrb-ci { flex: none; display: inline-flex; font-size: 17px; }
.anrb-ci.is-green { color: var(--green); } .anrb-ci.is-amber { color: var(--amber); } .anrb-ci.is-red { color: var(--red); } .anrb-ci.is-blue { color: var(--indigo); }
.anrb-checks li.is-block { font-weight: 600; }
.anrb-version { display: grid; grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 12px 16px; padding: 14px 18px; }
.anrb-vic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--indigo-bg); color: var(--indigo); font-size: 22px; align-self: center; }
.anrb-vtext h2 { margin: 0; font-size: 16px; }
.anrb-vtext p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-2); }
.anrb-vacts { display: flex; gap: 8px; }
.anrb-vwide { grid-column: 1 / -1; }
.anrb-versions summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--indigo); }
.anrb-versions ul { margin: 6px 0 0; padding: 0 0 0 16px; font-size: 12.5px; color: var(--text-2); }
@media (max-width: 1320px) { .anrb-version { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); } .anrb-vacts { grid-column: 1 / -1; justify-content: flex-end; } .anrb-vtext { grid-column: span 2; } }
@media (max-width: 1180px) { .anrb-cols { grid-template-columns: minmax(0, 1fr); } .anrb-sub { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) {
  .anrb-hright { width: 100%; justify-content: stretch; } .anrb-period { flex: 1 1 100%; }
  .anrb-version { grid-template-columns: minmax(0, 1fr); } .anrb-vtext { grid-column: auto; } .anrb-vic { display: none; }
  .anrb-defs dl { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Analytics-45 · Report delivery and scheduling (plans/Analytics-45.md §2; prefix andl-: A43's delivery strip and history tab, the delivery drawer, the external report page) ---------- */
.anrp-root .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.andl-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.andl-kpi { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; min-width: 0; }
.andl-kpi > .i { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); box-sizing: border-box; }
.andl-kpi span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.andl-kpi small { font-size: 12.5px; color: var(--text-2); }
.andl-kpi b { font-size: 18px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.andl-kpi em { font-style: normal; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
a.andl-sched { text-decoration: none; color: inherit; border-radius: 8px; }
a.andl-sched:hover b { color: var(--indigo); }
.andl-sched b { font-size: 12.5px; font-weight: 600; }
.andl-history { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; min-width: 0; }
.andl-twrap { overflow-x: auto; max-width: 100%; }
.andl-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.andl-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--text-2); padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.andl-table td { padding: 10px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.andl-why { display: block; margin-top: 4px; font-size: 12px; color: var(--text-2); max-width: 420px; }
/* the drawer */
.anrp-drawer.andl-drawer { width: min(540px, 100vw); gap: 14px; padding-bottom: 0; }
.andl-rep { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; }
.andl-repic { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--indigo-bg); color: var(--indigo); }
.andl-rep > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; }
.andl-rep small { font-size: 12.5px; color: var(--text-2); }
.andl-form { display: flex; flex-direction: column; gap: 14px; }
.andl-card { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; min-width: 0; }
.andl-card legend, .andl-card h3 { padding: 0 4px; font-size: 15px; font-weight: 700; color: var(--text); margin: 0; }
.andl-hist { display: flex; }
.andl-hist h3 { padding: 0; }
.andl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.andl-grid > [hidden] { display: none; }
.andl-grid2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.andl-next { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13px; color: var(--text-2); }
.andl-next > .i { flex: none; color: var(--indigo); margin-top: 2px; }
.andl-next span { display: flex; flex-direction: column; gap: 2px; }
.andl-next b { color: var(--text); }
.andl-next small { font-size: 12px; color: var(--muted); }
.andl-box { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--border-soft); border-radius: 10px; }
.andl-boxhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.andl-boxhead > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.andl-boxhead small { font-size: 12.5px; color: var(--text-2); }
.andl-members { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.andl-members label { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 9px; cursor: pointer; }
.andl-members label:hover { background: var(--indigo-bg-2); }
.andl-members label > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.andl-members small { font-size: 12px; color: var(--text-2); }
.andl-av { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--indigo-bg); color: var(--indigo); font-size: 12px; font-weight: 700; }
.andl-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--text); cursor: pointer; }
.andl-check[hidden] { display: none; }
.andl-check input { margin-top: 3px; }
.andl-check > span { display: block; min-width: 0; }
.andl-check small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-2); }
.andl-note { display: flex; align-items: flex-start; gap: 7px; margin: 0; font-size: 12.5px; color: var(--text-2); }
.andl-note.is-amber { color: var(--amber-text); }
.andl-note .i { flex: none; margin-top: 1px; }
.andl-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.andl-chips:empty { display: none; }
.andl-chips li { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 10px; border-radius: 15px; background: var(--indigo-bg-2); font-size: 13px; color: var(--text); }
.andl-chips li small { font-size: 11px; color: var(--green-text); }
.andl-chips li.is-new { background: var(--green-bg); }
.andl-chips li.is-new small { color: var(--green-text); }
.andl-chips li.is-removed span { text-decoration: line-through; color: var(--muted); }
.andl-chips li.is-unsub { background: #EEF1F6; }
.andl-chips li.is-unsub span { color: var(--muted); }
.andl-chips li small.andl-unsub { color: var(--muted); }
.sh-unsub p b { color: var(--text); }
@media (max-width: 768px) { #rp-an-reports .c-ver, #rp-an-reports .c-run, #rp-an-reports .v-avatar { display: none; } }
.andl-x { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); cursor: pointer; }
.andl-x:hover { background: var(--surface); color: var(--red); }
.andl-empty { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px dashed var(--border); border-radius: 10px; }
.andl-empty[hidden] { display: none; }
.andl-empty > .i { flex: none; width: 30px; height: 30px; color: var(--muted); }
.andl-empty span { display: flex; flex-direction: column; gap: 2px; }
.andl-empty small { font-size: 12.5px; color: var(--text-2); }
.andl-add { display: flex; align-items: flex-end; gap: 8px; }
.andl-add .angt-field { flex: 1 1 auto; }
.andl-link { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 13px; color: var(--text-2); }
.andl-link.is-active { color: var(--green-text); }
.andl-link.is-expired, .andl-link.is-revoked { color: var(--amber-text); }
.andl-link .po-link { font-size: 13px; }
.andl-fixed { display: flex; align-items: center; gap: 7px; min-height: 40px; margin: 0; padding: 0 11px; border: 1px dashed var(--border); border-radius: 9px; font-size: 13.5px; color: var(--text); box-sizing: border-box; }
.andl-runs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.andl-runs > li { padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 10px; }
.andl-runhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.andl-runhead small { color: var(--text-2); }
.andl-runhead .po-link { margin-left: auto; font-size: 12.5px; }
.andl-sum { margin: 6px 0 0; font-size: 12.5px; color: var(--text-2); }
.andl-lines { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.andl-lines li { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.andl-lines li small { color: var(--text-2); text-align: right; }
.andl-lines li.is-green small { color: var(--green-text); }
.andl-lines li.is-red small { color: var(--red); }
.andl-foot { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin: 0 -22px; padding: 12px 22px;
  background: var(--surface); border-top: 1px solid var(--border); }
.andl-foot .btn-outline.is-off { opacity: .5; cursor: not-allowed; }
.andl-drawer .is-invalid { border-color: var(--red) !important; }
.andl-public .anrp-twrap { margin: 16px 0; }
.andl-public .andl-pblock { margin: 22px 0 0; font-size: 17px; font-weight: 700; color: var(--text); }
@media (max-width: 1100px) { .andl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .andl-grid { grid-template-columns: 1fr; }
  .andl-foot { margin: 0 -16px; padding: 12px 16px; }
  .andl-foot .po-btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 520px) { .andl-kpis { grid-template-columns: 1fr; } .andl-add { flex-direction: column; align-items: stretch; } }
/* ---------- Analytics-46 · Analytics accounts and access (plans/Analytics-46.md §2; prefix anac-: the login cards, the login's access page — scopes, resources, who may use it, GA4 access bindings, the data access report, access plans) ---------- */
.anac-root .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.anac-connect { flex: none; height: 44px; gap: 8px; padding: 0 18px; }
.anac-list { display: flex; flex-direction: column; gap: 12px; }
.anac-card { display: grid; grid-template-columns: minmax(200px, 1.25fr) minmax(130px, 0.7fr) minmax(170px, 1fr) minmax(200px, 1.2fr) minmax(140px, 0.8fr) minmax(150px, 0.85fr) auto; gap: 16px;
  align-items: start; padding: 16px 18px; min-width: 0; }
.anac-card.is-other { grid-template-columns: minmax(200px, 1.25fr) minmax(300px, 2.9fr) minmax(140px, 0.8fr) minmax(150px, 0.85fr); }
.anac-id { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.anac-mark { flex: none; width: 34px; height: 34px; font-size: 34px; }
.anac-h1 .anac-mark { width: 30px; height: 30px; font-size: 30px; }
.anac-id h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.anac-login { margin: 2px 0 0; font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.anac-id small { display: block; margin-top: 4px; font-size: 12px; color: var(--text-2); }
.anac-col { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 13px; }
.anac-k { font-size: 12px; color: var(--text-2); }
.anac-owner { display: flex; align-items: center; gap: 8px; min-width: 0; }
.anac-av { width: 26px; height: 26px; font-size: 11px; }
.anac-res { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.anac-res li { display: flex; flex-direction: column; min-width: 0; }
.anac-res small { font-size: 11.5px; color: var(--text-2); overflow-wrap: anywhere; }
.anac-scopes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.anac-scopes em { font-style: normal; font-size: 12px; color: var(--muted); }
.anac-sk { flex: none; width: 40px; font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.anac-chip { display: inline-block; padding: 2px 7px; border-radius: 6px; background: var(--indigo-bg); color: var(--indigo); font-family: inherit; font-size: 11.5px; font-weight: 600;
  overflow-wrap: anywhere; }
.anac-chip.is-write { background: var(--amber-bg); color: var(--amber-text); }
.anac-when { font-size: 13px; color: var(--text); }
.anac-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.anac-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.anac-state.is-green::before { background: var(--green); }
.anac-state.is-red::before { background: var(--red); }
.anac-col small, .anac-why { font-size: 11.5px; color: var(--text-2); }
.anac-col .po-chip { align-self: flex-start; }
.anac-acts { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.anac-acts .po-btn { height: 38px; justify-content: center; white-space: nowrap; }
.anac-strip { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 14px 18px; border: 1px solid #D5DEFF; border-radius: 12px; background: var(--indigo-bg); font-size: 13px; color: var(--text-2); }
.anac-strip > .i { flex: none; width: 22px; height: 22px; color: var(--indigo); }
.anac-strip b { display: block; color: var(--text); margin-bottom: 2px; }
/* the login's page */
.anac-crumb { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); }
.anac-crumb a { display: inline-flex; align-items: center; gap: 6px; color: var(--indigo); text-decoration: none; font-weight: 600; }
.anac-h1 { display: flex; align-items: center; gap: 12px; overflow-wrap: anywhere; }
.anac-hacts { display: flex; gap: 8px; flex-wrap: wrap; }
.anac-danger { color: var(--red) !important; }
.anac-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.anac-who { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.anac-who li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; min-width: 0; }
.anac-who li > span:nth-child(2) { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.anac-who small { font-size: 12px; color: var(--text-2); }
.anac-allow, .anac-give { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.anac-allow .angt-field, .anac-give .angt-field { flex: 1 1 180px; }
.anac-restr { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; border: 0; font-size: 13px; }
.anac-restr legend { font-size: 12.5px; color: var(--text-2); padding: 0; margin-bottom: 4px; }
.anac-restr label { display: inline-flex; align-items: center; gap: 6px; }
.anac-need { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px dashed var(--border); border-radius: 10px; }
.anac-need > .i { flex: none; width: 22px; height: 22px; color: var(--amber); }
.anac-need > span { display: flex; flex-direction: column; flex: 1 1 260px; gap: 2px; font-size: 13.5px; }
.anac-need small { font-size: 12.5px; color: var(--text-2); }
.anac-bacts { white-space: nowrap; }
.anac-bacts .po-link + .po-link { margin-left: 10px; }
.anac-inline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; white-space: normal; font-size: 12.5px; }
.anac-inline select { height: 34px; border: 1px solid var(--border); border-radius: 8px; padding: 0 8px; font: inherit; }
.anac-inline label { display: inline-flex; align-items: center; gap: 4px; }
.anac-report { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.anac-num { text-align: right !important; white-space: nowrap; }
.anac-table td { overflow-wrap: normal; }
.anac-table td:nth-child(3) { white-space: nowrap; }
.anac-table code { overflow-wrap: anywhere; }
.anac-plans li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.anac-plans .po-btn { height: 34px; margin-left: auto; }
@media (max-width: 1400px) { .anac-card { grid-template-columns: minmax(200px, 1.3fr) minmax(170px, 1fr) minmax(200px, 1.2fr) minmax(150px, 0.9fr); }
  .anac-card .anac-col:nth-child(2) { display: none; } .anac-acts { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; } }
@media (max-width: 1100px) { .anac-card, .anac-card.is-other { grid-template-columns: 1fr 1fr; } .anac-id { grid-column: 1 / -1; } .anac-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .anac-card, .anac-card.is-other { grid-template-columns: 1fr; } .anac-acts { flex-direction: column; } }
/* ---------- Analytics-47 · Analytics settings (plans/Analytics-47.md §2; prefix anst-: the settings rail and sections — defaults, business hours, reporting sources, notifications, permissions, history, sync defaults, retention, privacy) ---------- */
.anst-root .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.anst-upd { display: flex; align-items: center; gap: 12px; padding: 12px 16px; flex: 0 1 auto; }
.anst-upd > .i { flex: none; width: 26px; height: 26px; color: var(--indigo); }
.anst-upd span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.anst-upd small { color: var(--text-2); }
.anst-cols { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.anst-nav { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 2px; padding: 8px; }
.anst-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.anst-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.anst-grid > .angt-card.is-focus, .anst-main > .angt-card.is-focus { box-shadow: 0 0 0 2px var(--indigo); }
.anst-dl { display: flex; flex-direction: column; margin: 0; border: 1px solid var(--border-soft); border-radius: 10px; }
.anst-dl > div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; }
.anst-dl > div:last-child { border-bottom: 0; }
.anst-dl dt { color: var(--text); font-weight: 600; }
.anst-dl dd { margin: 0; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.anst-dl small { font-size: 12px; color: var(--text-2); }
.anst-num { display: inline-flex; align-items: center; gap: 8px; }
.anst-num input { width: 92px; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; }
.anst-num em { font-style: normal; font-size: 13px; color: var(--text-2); }
.anst-hours { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--border-soft); border-radius: 10px; }
.anst-hhead { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: 13.5px; }
.anst-hhead span { font-size: 15px; font-weight: 700; color: var(--text); }
.anst-hhead small { font-size: 12px; color: var(--text-2); }
.anst-days { display: flex; flex-wrap: wrap; gap: 6px; }
.anst-days label { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; cursor: pointer; }
.anst-times { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.anst-times .angt-field { flex: 1 1 100px; }
.anst-rs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.anst-rs li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; font-size: 13px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); }
.anst-rs li:last-child { border-bottom: 0; }
.anst-rs span { color: var(--text-2); }
.anst-rs .po-link { font-size: 12.5px; justify-self: start; }
.anst-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.anst-checks label { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; cursor: pointer; }
.anst-checks input { margin-top: 3px; }
.anst-checks span { display: flex; flex-direction: column; gap: 2px; }
.anst-checks small { font-size: 12px; color: var(--text-2); }
.anst-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.anst-links a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 10px; color: var(--text); text-decoration: none; }
.anst-links a:hover { border-color: var(--indigo); }
.anst-links small { grid-column: 1; font-size: 12px; color: var(--text-2); }
.anst-links .i { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--indigo); }
.anst-people, .anst-hist, .anst-switches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.anst-people li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: center; font-size: 13px; }
.anst-people li > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.anst-people small { font-size: 12px; color: var(--text-2); }
.anst-people em { grid-column: 2; font-style: normal; font-size: 12px; color: var(--indigo); }
.anst-hist li, .anst-switches li { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; font-size: 13px; }
.anst-hist li > span:first-child, .anst-switches li > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.anst-hist small, .anst-switches small { font-size: 12px; color: var(--text-2); }
.anst-row { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 12px; }
.anst-ret { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
.anst-ret label { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.anst-ret label small { font-size: 12px; color: var(--text-2); }
.anst-range { grid-column: 2; font-size: 11.5px; color: var(--text-2); text-align: right; }
.anst-pform { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: end; }
.anst-pform .anst-wide { grid-column: 1 / span 3; }
.anst-pform .po-btn { height: 40px; }
.anst-table td small { display: block; }
.anst-acts { white-space: nowrap; }
.anst-acts .po-btn { height: 34px; margin-right: 8px; }
.anst-save { position: sticky; bottom: 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; z-index: 5; }
.anst-save > .i { flex: none; width: 24px; height: 24px; color: var(--indigo); }
.anst-save > span { display: flex; flex-direction: column; flex: 1 1 260px; font-size: 13px; }
.anst-save small { color: var(--text-2); }
.anst-save .po-btn { height: 40px; }
.anst-root .is-invalid { border-color: var(--red) !important; }
@media (min-width: 1900px) { .anst-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .anst-cols { grid-template-columns: 1fr; } .anst-nav { position: static; flex-direction: row; overflow-x: auto; }
  .anst-nav .anfx-navitem { flex: 0 0 auto; } .anst-nav .anfx-navitem small { display: none; } .anst-grid { grid-template-columns: 1fr; } .anst-pform { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .anst-pform, .anst-row { grid-template-columns: 1fr; } .anst-pform .anst-wide { grid-column: auto; } .anst-dl > div { grid-template-columns: 1fr; } }

/* backlog 3.25 · ad set / ad group settings (the editors' frame section `groups`) */
.avgr-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.avgr-pick { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); text-decoration: none; background: var(--surface); }
.avgr-pick span { display: grid; min-width: 0; } .avgr-pick b, .avgr-pick small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avgr-pick small { font-size: 12px; color: var(--text-2); }
.avgr-pick.is-on { border-color: var(--indigo, #3B5BFD); box-shadow: 0 0 0 1px var(--indigo, #3B5BFD) inset; }
/* backlog 5.38: Add ad set / ad group */
button.avgr-addgroup { font: inherit; text-align: left; cursor: pointer; border-style: dashed; color: var(--indigo, #3B5BFD); }
button.avgr-addgroup:hover, button.avgr-addgroup:focus-visible { border-color: var(--indigo, #3B5BFD); }
button.avgr-addgroup svg { width: 16px; height: 16px; flex: none; }
.avgr-add-hint { margin: -8px 0 14px; }
.avgr-card { padding: 14px 0; border-top: 1px solid var(--border); }
.avgr-card .ave-h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.avgr-card select, .avgr-card #avgr-bid { width: 100%; max-width: 420px; }
.avgr-card .avmc-money { max-width: 280px; }
.avgr-lv { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.avgr-lv li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
@media (max-width: 768px) { .avgr-pick { flex: 1 1 100%; } .avgr-card select, .avgr-card #avgr-bid, .avgr-card .avmc-money { max-width: none; } }

/* backlog 3.9 · the source panel's owner picker */
.ansr-own-pick { display: grid; gap: 6px; margin-top: 10px; }
.ansr-own-pick label { font-size: 13px; font-weight: 600; }
.ansr-own-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ansr-own-row select { flex: 1 1 200px; min-width: 0; }
.ansr-own-pick small { font-size: 12px; color: var(--text-2); }

/* backlog 3.18 · the live ad to change in "Select a variant" */
.anex-adpick { display: grid; gap: 6px; margin: 0 0 12px; font-size: 13px; font-weight: 600; }
.anex-adpick small { font-weight: 400; color: var(--text-2); }
.anex-adpick select { width: 100%; min-width: 0; }

/* backlog 3.33 · a query row filters the search trend */
.anor-qlink { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.anor-qlink[aria-current="true"] { font-weight: 600; text-decoration-style: solid; }

/* ---------- Backlog 3.10 · Standing grants on Measurement approvals (prefix angr-) ---------- */
.angr-card { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; margin-top: 14px; min-width: 0; }
.angr-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.angr-head > div { flex: 1 1 320px; min-width: 0; }
.angr-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 19px; font-weight: 700; color: var(--text); }
.angr-head h2 > .i { font-size: 20px; color: var(--indigo); }
.angr-head p { margin: 4px 0 0; font-size: 13px; color: var(--text-2); max-width: 900px; }
.angr-head .po-btn { gap: 6px; }
.angr-form { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--border-soft); border-radius: 10px; min-width: 0; }
.angr-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 12.5px; color: var(--text-2); }
.angr-field input { height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface, #fff); min-width: 0; }
.angr-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.angr-set { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.angr-set legend { font-size: 12.5px; color: var(--text-2); margin-bottom: 4px; }
.angr-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--text); min-width: 0; }
.angr-check input { margin-top: 3px; flex: none; }
.angr-check span { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.angr-check small { color: var(--text-2); font-size: 12px; }
.angr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.angr-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 10px; min-width: 0; }
.angr-main { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.angr-main b { font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.angr-main small { flex: 1 1 100%; font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; }
.angr-acts { display: flex; align-items: center; gap: 10px; flex: none; }
@media (max-width: 768px) {
  .angr-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .angr-item { flex-direction: column; }
}

/* backlog 3.14 · Promotion-27: "Link a known contact" searches the CRM */
.ck-search { display: flex; align-items: flex-end; gap: 8px; min-width: 0; }
.ck-search label { flex: 1 1 auto; min-width: 0; }
.ck-search input[type=search] { height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); min-width: 0; width: 100%; }
.ck-search .btn-outline { height: 38px; gap: 6px; flex: none; }
.ck-snote { margin: 0; font-size: 12.5px; color: var(--text-2); }
.ck-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ck-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--surface); text-align: left; cursor: pointer; font: inherit; color: var(--text); min-width: 0; }
.ck-pick b { font-size: 13.5px; overflow-wrap: anywhere; }
.ck-pick small { font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.ck-pick[aria-pressed="true"] { border-color: var(--indigo); background: #EEF1FF; }
.ck-nocreate { font-size: 12px; color: var(--text-2); }

/* ---------- Backlog R31 / R32 (2026-10-03): A32-admin rule lines, A39 Floodlight destinations, A19 provider-side jobs ---------- */
.angp-rules li { flex-wrap: wrap; align-items: baseline; }
.angp-rules li small { flex: 1 1 100%; color: var(--text-2); font-size: 12.5px; }
.anof-flh { margin-top: 18px; }
.anof-fl li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.anof-fl li > span { min-width: 0; overflow-wrap: anywhere; }
.anof-flform { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.anrs-jobs { margin-top: 16px; }
.anrs-chead h2 { display: flex; align-items: center; gap: 8px; }
.anrs-chead h2 > .i { color: var(--indigo); }
.anrs-chead p { margin: 4px 0 0; font-size: 13px; color: var(--text-2); }
.anrs-jnote { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13px; color: var(--text-2); }
.anrs-jnote > .i { flex: none; margin-top: 2px; }
.anrs-jnote.is-warn { color: var(--amber-text); }
.anrs-jobform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.anrs-jfield { display: flex; flex-direction: column; gap: 4px; flex: 1 1 320px; min-width: 0; font-size: 13px; color: var(--text-2); }
.anrs-jfield input, .anrs-jfield select { width: 100%; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
.anrs-jlist { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.anrs-jlist li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.anrs-jtext { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.anrs-jtext small { font-size: 12.5px; color: var(--text-2); }
@media (max-width: 760px) { .anrs-jobform .anrs-small { width: 100%; } }

/* ---------- Backlog R43 (2026-10-03): the avatar field (MM-18), undated planned hours (MM-51), files as related references (MM-25) ---------- */
.st-avatar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.st-av-prev { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .02em; flex: none; }
.st-input.st-code { width: 110px; text-transform: uppercase; font-weight: 600; letter-spacing: .06em; }
.st-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.st-sw { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; cursor: pointer; }
.st-sw input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.st-sw .dot { width: 26px; height: 26px; border-radius: 50%; }
.st-sw input:checked + .dot { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--indigo); }
.st-sw input:focus-visible + .dot { outline: 2px solid var(--indigo); outline-offset: 4px; }
.st-hint { font-size: 13px; color: var(--muted); }
.cp-task .due.none { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; color: var(--muted); }
.cp-task .due .wk { font-size: 13px; white-space: nowrap; }
.cp-setdate { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--indigo); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.cp-setdate .i { font-size: 15px; } .cp-setdate:hover { background: var(--indigo-bg-2); }
.dp-acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .dp-head .dp-acts .btn-outline { margin-left: 0; }
.fl-badge.dp-fbadge, .dp-file-cand .fl-badge { width: 28px; height: 28px; border-radius: 6px; font-size: 8px; }
.dp-file-open { background: none; border: 0; padding: 0; font: inherit; color: var(--indigo); cursor: pointer; text-align: left; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-row .dp-file-open { display: block; font-weight: 600; } .dp-file-open:hover { text-decoration: underline; } .dp-file-open:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 4px; }
.rel-acts { display: inline-flex; gap: 6px; margin-left: auto; } .rel-row.rel-file > .fl-badge { margin-top: 2px; }
@media (max-width: 640px) { .dp-head { flex-wrap: wrap; } .dp-acts { margin-left: 0; justify-content: flex-start; } .st-input.st-code { width: 96px; } }
@media (max-width: 768px) {   /* R43: the MM-18 General form fits a phone (it was 585 px wide at 430 px and clipped the avatar swatches) */
  .st-body { grid-template-columns: minmax(0, 1fr); } #st-section-host { min-width: 0; }
  .st-form { grid-template-columns: minmax(0, 1fr); } .st-lc { flex-wrap: wrap; gap: 8px 18px; } .st-lc .st-input { width: 100%; }
  .st-areas { overflow-x: auto; } .st-areas .st-table { min-width: 0; }
}

/* Backlog R45 / R46 (2026-10-03) — 5.11 the change log (`cl-`, over the Promotion-19 `ru-` table), 5.12 Move to next slots (`sl-`), 5.14 the reply
   templates' usage (`rt-`), 5.13 Content's adaptation requests (`cad-`). */
.cl-card > h2 { margin-bottom: 10px; }
.cl-pills { margin: 0 0 12px; }
.cl-table { min-width: 940px; }
.cl-table th.c-at, .cl-table td.c-at { width: 118px; }
.cl-table th.c-acct, .cl-table td.c-acct { width: 200px; }
.cl-table th.c-change, .cl-table td.c-change { width: 170px; }
.cl-table th.c-stat, .cl-table td.c-stat { width: 230px; }
.cl-table th.c-act, .cl-table td.c-act { width: 220px; }
.cl-table td { padding: 10px; vertical-align: middle; border-bottom: 1px solid var(--border-soft); }
.cl-what { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text); }
.cl-what .i { font-size: 15px; color: var(--text-2); }
.cl-row .btn-outline[disabled] { opacity: .55; cursor: not-allowed; }
.cl-pager { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 12px; font-size: 13.5px; color: var(--text-2); }
.cl-pager span { margin-right: auto; }
.cl-pager .btn-outline { height: 34px; padding: 0 14px; text-decoration: none; display: inline-flex; align-items: center; }
.sl-affected .sl-affacts { display: flex; flex-direction: column; align-items: stretch; gap: 6px; flex: none; margin: 0; }
.sl-affacts .btn-outline[hidden] { display: none; }
.sl-movedlg { width: min(620px, calc(100vw - 32px)); }
.sl-movedlg .sl-jobs { margin: 4px 0 6px; }
.sl-jobs li.is-skip b { color: var(--text-2); }
.sl-jobs small.sl-why { color: var(--amber-text); }
.sl-jobs small strong { color: var(--text); font-weight: 600; }
.rt-rmain .rt-use { font-size: 12.5px; color: var(--muted); }
.rt-rmain .rt-use.is-used { color: var(--green-text); }
.rt-usage { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 13px; color: var(--text-2); }
.rt-usage .i { font-size: 14px; color: var(--indigo); }
.lb-head .rq-link.cad-link { margin-left: 0; }
.cad-root { min-width: 0; }
.cad-head { align-items: flex-start; }
.cad-head .cad-lib { margin-left: auto; height: 40px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap; }
.cad-pills { margin: 0 0 14px; padding: 0 8px; }
.cad-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.cad-card { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 14px 16px; border-radius: 12px; }
.cad-card.is-cancelled { opacity: .72; }
.cad-pic { width: 96px; height: 96px; border-radius: 10px; overflow: hidden; background: var(--track); display: grid; place-items: center; color: var(--muted); }
.cad-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cad-pic .i { font-size: 28px; }
.cad-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cad-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cad-title { font-size: 16px; font-weight: 700; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cad-ver { font-size: 13px; color: var(--text-2); }
.cad-formats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cad-formats li { padding: 3px 10px; border-radius: 999px; background: var(--indigo-bg); color: var(--indigo); font-size: 12.5px; font-weight: 600; }
.cad-note, .cad-meta, .cad-done, .cad-hint { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13.5px; color: var(--text-2); flex-wrap: wrap; }
.cad-note .i, .cad-meta .i, .cad-done .i, .cad-hint .i { font-size: 15px; flex: none; }
.cad-meta a { color: var(--indigo); text-decoration: none; }
.cad-meta a:hover { text-decoration: underline; }
.cad-done { color: var(--green-text); font-weight: 600; }
.cad-hint { color: var(--amber-text); }
.cad-acts { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 210px; }
.cad-acts .btn-outline, .cad-acts .btn-primary { height: 36px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; white-space: nowrap; font-size: 14px; font-weight: 600; }
.cad-pick select { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; }
.cad-why { max-width: 230px; font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
.cad-empty { padding: 8px; }
@media (max-width: 768px) {
  .cad-head { flex-wrap: wrap; }
  .cad-head .cad-lib { margin-left: 0; }
  .cad-card { grid-template-columns: 64px minmax(0, 1fr); }
  .cad-pic { width: 64px; height: 64px; }
  .cad-acts { grid-column: 1 / -1; min-width: 0; }
  .cad-why { max-width: none; }
  .sl-affected { flex-wrap: wrap; }
  .sl-affected .sl-affacts { width: 100%; flex-direction: row; flex-wrap: wrap; }
}

/* ---------- Backlog 5.52 · laptop widths (769 – 1671 px): no horizontal page scroll between the MM-48 phone layer and the 1672 px design.
   Every rule sits inside a min-width: 769px media query with an upper bound under 1672 px, so the design width and the phone layer are
   unchanged. Wide data tables scroll inside their own box (.tbl-scroll), never the page. Tiers: ≤ 1671 shell + tables, ≤ 1599 headers and the
   readiness matrix, ≤ 1440 two-column pages stack, ≤ 1199 the sidebar becomes an icon rail. ---------- */
@media (min-width: 769px) and (max-width: 1671.98px) {
  /* the shell: no 1200 px floor, the content column may shrink below its widest child */
  body { min-width: 0; }
  .shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .main, .content { min-width: 0; }
  .tbl-scroll { overflow-x: auto; max-width: 100%; }
  .grid-2 { grid-template-columns: 372px minmax(0, 1fr); }
  .grid-2.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .grid-2.rel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .grid-main { grid-template-columns: minmax(0, 1fr) 360px; }
  .area-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .rp-grid > *, .rp-grid .rp-card { min-width: 0; }
  .ms-head, .cp-head, .item-metrics { flex-wrap: wrap; row-gap: 12px; }
  /* visually hidden text inside a scrolling table must not widen the page: anchor it at the left edge of its containing block */
  .sr-only, .an-sr, .ca-sr, .cg2-sr, .lb-vh, .jd-sr, .pw-sr, .ie-sr, .av-sr, .avgm-sr { left: 0; }

  /* project / business header: identity + actions on the first row, the meta blocks under them; the tab strip scrolls */
  .proj-head, .proj-head.biz { grid-template-columns: minmax(0, 1fr) auto; row-gap: 14px; }
  .proj-head > .proj-meta { grid-column: 1 / -1; grid-row: 2; margin-left: 0; justify-content: flex-start; flex-wrap: wrap; row-gap: 12px; }
  .proj-head > .proj-actions { grid-column: 2; grid-row: 1; }
  .proj-head .proj-id { min-width: 0; }
  .tabs { overflow-x: auto; scrollbar-width: thin; }
  .tabs a, .tabs button { white-space: nowrap; flex: none; }

  /* fixed-layout tables keep the width their columns need and scroll inside their box */
  .tbl-scroll > .subs { min-width: 1400px; }
  .tbl-scroll > .tree { min-width: 1300px; }
  .tbl-scroll > .ms { min-width: 1180px; }
  .tbl-scroll > .mt { min-width: 860px; }
  .tbl-scroll > .ra-table { min-width: 1150px; }
  .cp-card { overflow-x: auto; } .cp-table { min-width: 1080px; }
}
@media (min-width: 769px) and (max-width: 1599.98px) {
  .topbar .search { width: auto; flex: 0 1 400px; min-width: 200px; }
  .topbar .crumbs { min-width: 0; overflow: hidden; white-space: nowrap; }
  .btn-primary { white-space: nowrap; }

  /* page header: title + actions on the first row, the KPI row (or other middle block) on its own row */
  .page-head { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
  .page-head .page-title, .page-head .page-sub { white-space: normal; }
  .page-head > :nth-child(2):not(:last-child) { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; flex-wrap: wrap; min-width: 0; }

  /* MM-01 / MM-02 readiness matrix: narrower fixed columns, the area bars take the cell's width, header icons give way to the labels */
  .matrix col.c-project { width: 280px; } .matrix.incubator col.c-project { width: 250px; }
  .matrix col.c-ready, .matrix.incubator col.c-ready { width: 158px; }
  .matrix.incubator col.c-blocker { width: 120px; }
  .matrix th.c-area .i { display: none; }
  .matrix th.c-area .lbl.two { white-space: normal; }
  .matrix td.c-area a { display: flex; width: 100%; }
  .matrix .acell { display: flex; width: 100%; gap: 6px; }
  .matrix .acell .bar, .matrix.incubator .acell .bar { flex: 1 1 auto; width: auto; min-width: 16px; }
  .matrix .acell .pct { min-width: 34px; font-size: 14px; flex: none; }
  .matrix .pcell > div, .matrix .v-line1, .matrix .v-line2 { min-width: 0; }
  .matrix .v-name, .matrix .v-line2 a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .matrix.incubator .blocker { max-width: 100%; }
  .ops col.c-company { width: 280px; } .ops col.c-act { width: 170px; }

  /* MM-04 cards: the readiness tiles and the two lists */
  .grid-2 { grid-template-columns: 340px minmax(0, 1fr); }
  .grid-2.even { grid-template-columns: minmax(0, 1fr); }
  .area-card { padding: 12px 12px 10px; }
  .area-card .tile-head { font-size: 15px; } .area-card .tile-head .i { font-size: 24px; }

  /* the 1400 px layouts of Promotion-03 and Analytics-46 start at 1599 px now */
  .na-pfoot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .na-assign { grid-column: 1 / -1; }
  .anac-card { grid-template-columns: minmax(200px, 1.3fr) minmax(170px, 1fr) minmax(200px, 1.2fr) minmax(150px, 0.9fr); }
  .anac-card .anac-col:nth-child(2) { display: none; } .anac-acts { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
  /* Advertisement page heads: the action row wraps under the title instead of pushing past the edge */
  .avo-head { flex-wrap: wrap; } .avo-actions { flex: 0 1 auto; flex-wrap: wrap; min-width: 0; max-width: 100%; }
}
@media (min-width: 769px) and (max-width: 1440.98px) {
  /* two-column pages with a fixed side column stack (their own 1200 px rules start too late for a 1000 – 1150 px content column) */
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .mt-grid, .rp-grid { grid-template-columns: minmax(0, 1fr); }
  .lk-head { grid-template-columns: 1fr 1fr; } .lk-head .ttl { grid-column: 1 / -1; }
  .na-grid { grid-template-columns: minmax(0, 1fr); } .na-panel { position: static; }
  .anov-kpis, .anor-kpis.anov-kpis, .ancp-kpis.anov-kpis, .ancm-kpis.anov-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* below 1200 px the sidebar becomes an icon rail (the labels stay as the links' text and title) */
@media (min-width: 769px) and (max-width: 1199.98px) {
  :root { --sidebar-w: 76px; }
  .sidebar .logo { justify-content: center; padding: 18px 0 14px; }
  .sidebar .logo-word { display: none; }
  .sidebar .logo svg { width: 40px; height: 40px; }
  .sidebar .ws-card { margin: 4px 10px 0; width: calc(100% - 20px); padding: 8px 0; justify-content: center; }
  .sidebar .ws-card > span:not(.ws-avatar), .sidebar .ws-card > .i { display: none; }
  .sidebar .nav { padding: 0 10px; }
  .sidebar .nav-item { font-size: 0; justify-content: center; gap: 0; padding: 11px 0; }
  .sidebar-bottom { padding: 0 10px 14px; }
  .sidebar .user-card { justify-content: center; padding: 10px 0 4px; }
  .sidebar .user-card > span:not(.user-photo), .sidebar .user-card > .i { display: none; }

  .grid-2, .grid-main { grid-template-columns: minmax(0, 1fr); }
  .matrix th { font-size: 14px; }
  .matrix.incubator .acell .bar { display: none; } .matrix.incubator .acell { justify-content: center; }
  .pstrip { flex-wrap: wrap; row-gap: 10px; }
}
/* ---------- end of backlog 5.52 laptop widths ---------- */

/* Live-use fix 2026-10-18: one Workspace settings header + tab strip on every tab; a page-of-its-own tab names itself below the strip. */
.wst-sec { margin: 0 0 16px; } .wst-sec h2 { margin: 0; font-size: 24px; font-weight: 700; display: inline-flex; align-items: center; gap: 12px; }
.wst-sec .sub { font-size: 15px; color: var(--text-2); margin-top: 4px; } .wst-sec .ig-ext { height: 26px; font-size: 13px; padding: 0 10px; }
.wst-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .wst-card-head .btn-primary { flex: none; }