/* ============================================================
   saas/app/static/css/app.css
   Thin clean shell + design tokens. The polished, custom
   "corporate" redesign happens later (after the wizard core).
   ============================================================ */
:root {
  --bg: #f6f8fb;
  --surface: #ffffff;
  --ink: #1b2330;
  --ink-soft: #5b6676;
  --muted: #8a93a3;
  --border: #e3e8ef;
  --brand: #2563eb;
  --brand-ink: #ffffff;
  --brand-soft: #eaf1ff;
  --product: #e8f6ee;
  --product-ink: #1c7a45;
  --section: #fff3e0;
  --section-ink: #b4630a;
  --junk: #f3f4f6;
  --junk-ink: #98a2b3;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 16px rgba(16,24,40,.06);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
/* the hidden attribute must win over component display rules (.legend{display:flex} etc.) */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* --- top bar --- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-mark {
  font-weight: 800; letter-spacing: .5px; background: var(--brand);
  color: var(--brand-ink); padding: 4px 8px; border-radius: 8px; font-size: 13px;
}
.brand-name { font-weight: 700; }
.topnav { display: flex; align-items: center; gap: 18px; }
.topnav a { color: var(--ink-soft); text-decoration: none; font-weight: 500; }
.topnav a:hover { color: var(--ink); }

/* --- buttons --- */
.btn { display: inline-block; border: 1px solid transparent; border-radius: 8px;
  padding: 8px 14px; font-weight: 600; cursor: pointer; text-decoration: none; font-size: 14px; }
.btn-lg { padding: 12px 20px; font-size: 15px; }
.btn-primary { background: var(--brand); color: var(--brand-ink); }
.btn-primary:hover { filter: brightness(.95); }
.btn-accent { background: #2f9e44; color: #fff; border-color: #2b8a3e; font-weight: 600; }
.btn-accent:hover { filter: brightness(1.06); }
.btn-accent.done { background: #e9f7ec; color: #2b8a3e; border-color: #b2e0bd; font-weight: 500; }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--ink); }
.btn-ghost:hover { background: var(--brand-soft); }

/* --- layout --- */
.content { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 36px 28px; }
.footer { text-align: center; color: var(--muted); padding: 24px; font-size: 13px;
  border-top: 1px solid var(--border); background: var(--surface); }
.muted { color: var(--muted); }

/* --- hero --- */
.hero { text-align: center; padding: 30px 0 10px; }
.hero h1 { font-size: 38px; line-height: 1.15; margin: 0 0 14px; letter-spacing: -.5px; }
.lede { color: var(--ink-soft); max-width: 680px; margin: 0 auto 24px; font-size: 17px; }
.hero-actions { display: flex; gap: 12px; justify-content: center; }

/* --- cards --- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow); }
.card h3 { margin: 0 0 8px; }
.card p { margin: 0; color: var(--ink-soft); }

/* --- wizard --- */
.wizard h1 { display: flex; align-items: center; gap: 12px; }
.tag { font-size: 12px; font-weight: 600; color: var(--brand); background: var(--brand-soft);
  padding: 3px 10px; border-radius: 999px; }
.uploader { background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 26px; display: flex; align-items: center; gap: 14px; margin: 18px 0; }
.hint { color: var(--muted); font-size: 13px; }
.status { margin-left: auto; font-weight: 600; }

.summary { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0 20px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 14px; font-size: 14px; }
.stat b { font-size: 18px; }

.chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.chip-product { background: var(--product); color: var(--product-ink); }
.chip-section { background: var(--section); color: var(--section-ink); }
.chip-cat { background: var(--section); color: var(--section-ink); }
.chip-sub { background: #e7e0ff; color: #5b3ec7; }
.chip-junk { background: var(--junk); color: var(--junk-ink); }
.small { font-size: 13px; }

/* --- field palette (drag-and-drop mapping) --- */
.palette { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; margin: 6px 0 14px; box-shadow: var(--shadow); }
.palette-label { font-weight: 700; color: var(--ink-soft); }
.palette-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.field-chip { display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand); border: 1px solid #cfe0ff;
  font-weight: 600; font-size: 13px; cursor: grab; user-select: none; }
.field-chip:active { cursor: grabbing; }
.field-chip.dragging { opacity: .5; }

/* --- mapping (dropdown fallback) --- */
.mapping { margin: 6px 0 22px; }
.mapping > summary { cursor: pointer; color: var(--ink-soft); font-weight: 600; padding: 4px 0; }
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.map-cell { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.map-cell label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .4px; }
.map-cell select { width: 100%; padding: 6px; border: 1px solid var(--border); border-radius: 6px; background: #fff; }

/* --- preview grid --- */
.grid-wrap { margin-top: 8px; }
.grid-scroll { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); max-height: 60vh; }
table.grid { border-collapse: collapse; width: 100%; font-size: 13px; }
table.grid th, table.grid td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 6px 9px; text-align: left; white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
table.grid thead th { position: sticky; top: 0; background: #fafbfc; z-index: 1; }
table.grid th.col-target { transition: background .1s, box-shadow .1s; }
table.grid th.col-target.drop-hot { background: var(--brand-soft);
  box-shadow: inset 0 0 0 2px var(--brand); }
.hdr-badges { display: block; margin-top: 4px; }
.hdr-badge { display: inline-block; margin: 2px 3px 0 0; padding: 1px 7px; border-radius: 999px;
  background: var(--brand); color: #fff; font-size: 11px; font-weight: 600; cursor: pointer; }
.hdr-badge:hover { background: #b42318; }
table.grid td.rownum { color: var(--muted); text-align: right; background: #fafbfc; position: sticky; left: 0; }
tr.row-product { background: var(--product); }
tr.row-section_header { background: var(--section); font-weight: 600; }
tr.row-category { background: var(--section); font-weight: 700; }
tr.row-subcategory { background: #f0ebff; font-weight: 600; }
tr.row-junk { background: var(--junk); color: var(--junk-ink); }
tr.row-header { background: #eef2f7; font-weight: 700; }
td.inh { color: var(--brand); font-weight: 600; background: rgba(37,99,235,.05); }
.role-select { font-size: 12px; padding: 3px 4px; border: 1px solid var(--border); border-radius: 6px; background: #fff; }

/* --- profiles bar --- */
.profiles-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--brand-soft); border: 1px solid #d4e2ff; border-radius: var(--radius);
  padding: 10px 14px; margin: 4px 0 18px; }
.pb-label { font-weight: 700; color: var(--brand); }
.pb-list { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pb-btn { padding: 5px 12px; font-size: 13px; background: #fff; }
.pb-btn:hover { background: #fff; border-color: var(--brand); color: var(--brand); }

/* --- studio: sheet tabs --- */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0 10px;
  border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.tab { border: 1px solid var(--border); background: var(--surface); cursor: pointer;
  padding: 6px 12px; border-radius: 8px 8px 0 0; font-size: 13px; font-weight: 600;
  color: var(--ink-soft); }
.tab:hover { background: var(--brand-soft); }
.tab.active { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; }

/* --- studio: on-document split editor (side-by-side products) --- */
.split-hint { background: #fff7ed; border: 1px solid #fed7aa; color: #b4630a;
  border-radius: 8px; padding: 8px 12px; margin: 6px 0 10px; font-weight: 600; }
@keyframes flashpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(202,138,4,.0); }
  50% { box-shadow: 0 0 0 4px rgba(202,138,4,.35); } }
.flash { animation: flashpulse 1.1s ease-in-out infinite; }
.studio-grid th.splitdiv, .studio-grid td.splitdiv { width: 14px; min-width: 14px; padding: 0;
  cursor: col-resize; position: relative; }
/* header cell holds the After-Effects-style marker handle */
.studio-grid th.splitdiv { height: 34px; overflow: visible; }
.split-marker { position: absolute; top: -2px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-top: 11px solid #b6c0cf; transition: border-top-color .12s; pointer-events: none; }
.studio-grid th.splitdiv:hover .split-marker { border-top-color: var(--brand); }
/* faint dotted guide so every clickable divider position is discoverable */
.studio-grid td.splitdiv { border-left: 1px dotted #dfe5ee; }
.studio-grid th.splitdiv:hover, .studio-grid td.splitdiv:hover { background: rgba(37,99,235,.10); }
/* ACTIVE divider = Excel page-break dashed line down the whole column + pulsing marker */
.studio-grid th.splitdiv.on, .studio-grid td.splitdiv.on { border-left: 2px dashed var(--brand);
  background: rgba(37,99,235,.06); }
.studio-grid th.splitdiv.on .split-marker { border-top-color: var(--brand);
  filter: drop-shadow(0 0 2px rgba(37,99,235,.7)); animation: markerpulse 1s ease-in-out infinite; }
@keyframes markerpulse { 0%,100% { transform: translateX(-50%) scale(1); opacity: 1; }
  50% { transform: translateX(-50%) scale(1.45); opacity: .65; } }

/* --- studio: pick-whip (AE-style cell -> classification connector) --- */
.whipline { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 60; overflow: visible; }
@keyframes whipflow { to { stroke-dashoffset: -24; } }
.whip-flow { animation: whipflow .5s linear infinite; }
.studio-grid td { position: relative; }
.whip { position: absolute; top: 50%; right: 3px; transform: translateY(-50%);
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--brand);
  background: #fff; cursor: grab; opacity: .3; transition: opacity .1s, transform .1s; z-index: 3; }
.whip::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--brand); }
.studio-grid td:hover .whip { opacity: .9; }
.whip:hover { opacity: 1 !important; transform: translateY(-50%) scale(1.25); cursor: grab; }
.drop-ok { outline: 2px dashed var(--brand); outline-offset: 2px; }
body.whipping { cursor: crosshair; user-select: none; }
.studio-grid td[data-col] { cursor: crosshair; }   /* whole cell is the grab origin */
.studio-grid td[data-col]:hover { box-shadow: inset 0 0 0 1px rgba(37,99,235,.45); }
.studio-grid td.armed-cell { outline: 2px solid var(--brand); outline-offset: -2px;
  background: rgba(37,99,235,.10) !important; }

/* --- studio: legend + bands --- */
.legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 14px; margin: 6px 0 14px; box-shadow: var(--shadow); }
.legend-label { font-weight: 700; color: var(--ink-soft); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.sw-brand { background: #ca8a04; }
.sw-category { background: #0d9488; }
.sw-subcategory { background: #b45309; }
.sw-product { background: #1c7a45; }
.legend { flex-direction: column; align-items: stretch; gap: 8px;
  position: sticky; top: 0; z-index: 40; box-shadow: 0 2px 10px rgba(16,24,40,.10); }
/* while dragging a pick-whip, make the pinned target bar obvious */
body.whipping .legend { outline: 2px solid var(--brand); outline-offset: 1px; }
body.whipping .legend::after { content: "\2193 drop on a field or title type"; font-size: 12px;
  font-weight: 700; color: var(--brand); }
.legend-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.legend-row input { padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; }
.legend-row .btn { padding: 4px 10px; font-size: 13px; }
.chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.type-chip, .field-chip2 { display: inline-flex; align-items: center; gap: 5px;
  background: #f4f6f9; border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 9px; font-size: 13px; font-weight: 600; }
.type-chip .dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.chips .x { cursor: pointer; color: var(--muted); font-weight: 700; }
.chips .x:hover { color: #b42318; }
.studio-grid th.colhead { background: #f1f5ff; }
.studio-grid th.colhead select { width: 100%; min-width: 92px; font-size: 12px;
  padding: 3px 4px; border: 1px solid var(--border); border-radius: 6px; }
.studio-grid tr.row-header { background: #eef2f7; color: #98a2b3; }
.studio-grid th.group-sep { background: #e7f5f3; color: #0d9488; font-size: 11px;
  text-transform: uppercase; letter-spacing: .5px; text-align: center; font-weight: 700; }
.studio-grid th.colsub { padding: 0; height: 1px; }

.studio-grid td.gut { padding: 0 2px; background: #fafbfc; position: sticky; left: 0; white-space: nowrap; }
.studio-grid .lane { display: inline-block; width: 12px; height: 22px; vertical-align: top;
  position: relative; border-left: 1px solid transparent; }
.studio-grid .lane.on { opacity: .85; }
.studio-grid .lane.top { border-top: 3px solid rgba(0,0,0,.45); }
.studio-grid .bandhandle { position: absolute; left: 0; bottom: -1px; width: 12px; height: 6px;
  cursor: ns-resize; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.6); }
.studio-grid tr.row-banner { font-weight: 700; background: #fbfbe8; }
.type-select { font-size: 12px; padding: 2px 4px; border: 1px solid var(--border); border-radius: 6px; }
body.dragging-band { user-select: none; cursor: ns-resize; }

/* --- output --- */
.output-wrap { margin-top: 28px; }
.output-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.output-head h3 { margin: 0; }
.output-actions { display: flex; gap: 10px; }

@media (max-width: 760px) {
  .cards { grid-template-columns: 1fr; }
  .hero h1 { font-size: 28px; }
}

/* ============================================================
   Studio2 — simpler UX
   ============================================================ */

/* Studio2 needs the full viewport width -- the site default content
   max-width: 1080px makes the document grid feel cramped. This rule
   breaks Studio2 out of that container while leaving every other page
   untouched. */
body:has(.studio2) .content { max-width: none; padding: 24px 28px; }
.studio2 { padding: 16px 24px 32px; }
.studio2 h1 .tag {
  background: #137d68; color: #fff; font-size: 11px;
  padding: 3px 8px; border-radius: 10px; vertical-align: middle;
  margin-left: 8px; font-weight: 500; letter-spacing: 0.3px;
}
.studio2 .lede { color: #5a6573; max-width: 720px; }
.studio2 kbd {
  background: #e9ecf0; border: 1px solid #d4d6dc; border-radius: 3px;
  padding: 1px 6px; font: 12px monospace; color: #1a1d23;
}

.s2-uploader { display: flex; align-items: center; gap: 14px; margin: 16px 0; }
.s2-uploader .status { color: #5a6573; font-size: 13px; }
.s2-uploader .hint { color: #8b94a3; font-size: 12px; }
.s2-ai-toggle {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 13px; color: #5b4b8a; background: #f3effc; border: 1px solid #d8cdf2;
  padding: 5px 10px; border-radius: 7px; user-select: none;
}
.s2-ai-toggle input { accent-color: #7a4fd6; cursor: pointer; }
.s2-ai-toggle select {
  border: 1px solid #d8cdf2; border-radius: 6px; padding: 3px 6px;
  font-size: 13px; color: #5b4b8a; background: #fff; cursor: pointer;
}
.s2-consensus {
  margin: 4px 0 12px; padding: 10px 14px; border: 1px solid #d8cdf2;
  background: #faf8ff; border-radius: 8px; font-size: 13px; color: #3c4452;
}
.s2-con-head { font-weight: 600; color: #5b4b8a; margin-bottom: 4px; }
.s2-con-stats { margin-bottom: 6px; }
.s2-con-warn { color: #b4540a; }
.s2-con-ok { color: #1f8a4c; }
.s2-con-list { margin: 0; padding-left: 18px; max-height: 150px; overflow: auto; }
.s2-con-list li { margin: 2px 0; }

/* studio12 A/B choice for PDF uploads */
.s2-choice { margin: 8px 0 16px; }
.s2-choice-head { font-weight: 600; color: #3c4452; margin-bottom: 8px; font-size: 15px; }
.s2-choice-cards { display: flex; gap: 16px; flex-wrap: wrap; }
.s2-choice-card {
  flex: 1; min-width: 280px; max-width: 460px; text-align: left; cursor: pointer;
  border: 1.5px solid #d8cdf2; border-radius: 12px; padding: 16px 18px; background: #fff;
  transition: box-shadow .12s, border-color .12s, transform .06s;
}
.s2-choice-card:hover { border-color: #7a4fd6; box-shadow: 0 4px 14px #7a4fd622; transform: translateY(-1px); }
.s2-choice-a { background: linear-gradient(180deg,#f6fff9,#fff); border-color: #bfe6cd; }
.s2-choice-a:hover { border-color: #1f8a4c; box-shadow: 0 4px 14px #1f8a4c22; }
.s2-choice-title { font-size: 16px; font-weight: 700; color: #2f3a46; margin-bottom: 4px; }
.s2-choice-sub { font-size: 13px; color: #5a6573; line-height: 1.4; }
.s2-choice-badge {
  display: inline-block; margin-top: 10px; font-size: 11px; font-weight: 600;
  color: #6b5bb0; background: #efeaff; border: 1px solid #d8cdf2;
  padding: 3px 8px; border-radius: 20px;
}

.s2-toolbar {
  display: flex; align-items: center; gap: 10px; margin: 8px 0 12px;
  flex-wrap: wrap;
}
.s2-toolbar .s2-help { color: #8b94a3; margin-left: auto; }

.s2-layout {
  display: grid;
  /* Was 1fr 340px -- right pane was too wide and the document grid felt
     pinched. minmax(0,1fr) lets the wide grid overflow horizontally
     (with scroll inside .s2-gridwrap) instead of squishing columns. */
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 18px;
  align-items: start;
}

.s2-gridwrap {
  border: 1px solid #d4d6dc; border-radius: 6px;
  background: #e9ecf0;
  overflow-x: auto;          /* horizontal scroll for wide form1 tables */
  overflow-y: visible;
  max-width: 100%;
}
.s2-grid {
  position: relative; overflow: visible;
  background: #e9ecf0;
  min-width: 0;              /* allow long cells to WRAP instead of widening the column */
}
.s2-grid table { width: 100%; border-collapse: collapse; position: relative; z-index: 2; }
.s2-grid td, .s2-grid th {
  border: 1px solid #d4d6dc; padding: 9px 12px; text-align: left;
  font-size: 13px; background: transparent; position: relative;
  vertical-align: top;
}
/* the inner div is what actually CAPS a column with auto table-layout: long
   DESCRIPTION cells wrap at this width (like the original); short cells stay narrow;
   empty/image columns collapse. */
.s2-grid td > .s2-cell {
  display: block; max-width: 340px; white-space: normal; overflow-wrap: anywhere;
}
.s2-grid th {
  background: #e9ecf0; color: #5a6573; font-weight: 500;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
}
.s2-grid tr.banner td { background: #fdf4e0; font-weight: 600; }
.s2-grid tr.data   td { background: #ffffff; }
.s2-grid td.selected { outline: 2px solid #2680e6; outline-offset: -2px; }
.s2-grid td:hover { cursor: cell; }

/* Ghost overlays */
.s2-ghosts {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
}
.s2-ghost {
  position: absolute; border-style: dashed; border-width: 2px;
  border-radius: 8px;
}
.s2-ghost-section { background: rgba(45,165,80,0.20);  border-color: rgba(25,130,55,1); z-index: 1; color: rgba(25,130,55,1); }
.s2-ghost-sub     { background: rgba(40,145,200,0.20); border-color: rgba(20,110,175,1); z-index: 2; color: rgba(20,110,175,1); }
.s2-ghost-header  { background: rgba(200,140,30,0.22); border-color: rgba(170,105,15,1); z-index: 3; color: rgba(170,105,15,1); }
.s2-ghost-brand   { background: rgba(160,90,200,0.20); border-color: rgba(125,55,175,1); z-index: 2; color: rgba(125,55,175,1); }
.s2-ghost-suggest { background: rgba(110,110,110,0.10); border-color: rgba(80,80,80,0.70); border-width: 1.5px; z-index: 1; color: rgba(80,80,80,0.7); }

.s2-ghost-label {
  position: absolute; top: -11px; left: 12px;
  font-size: 11px; color: #1a1d23;
  background: #ffffff; padding: 1px 8px;
  border-radius: 10px; border: 1px solid #d4d6dc;
  pointer-events: none; white-space: nowrap; font-weight: 500;
  max-width: 90%; overflow: hidden; text-overflow: ellipsis;
}
.s2-ghost-rm {
  position: absolute; top: -10px; right: 8px;
  width: 18px; height: 18px; border: 1px solid currentColor;
  background: #fff; color: currentColor; cursor: pointer;
  border-radius: 50%; font: 12px/14px sans-serif; padding: 0;
  pointer-events: auto; z-index: 4;
}
.s2-ghost-rm:hover { background: currentColor; color: #fff; }

/* ✓ commit / ✗ reject chips on the LEFT corner of a detected section hint */
.s2-ghost-actions {
  position: absolute; top: -12px; left: 6px;
  display: flex; gap: 3px; pointer-events: auto; z-index: 5;
}
.s2-ghost-ok, .s2-ghost-no {
  width: 20px; height: 20px; border: 1.5px solid; background: #fff;
  font: 700 13px/15px -apple-system, sans-serif; cursor: pointer;
  border-radius: 50%; padding: 0; display: flex; align-items: center; justify-content: center;
}
.s2-ghost-ok { border-color: #137d68; color: #137d68; }
.s2-ghost-ok:hover { background: #137d68; color: #fff; }
.s2-ghost-no { border-color: #b42318; color: #b42318; }
.s2-ghost-no:hover { background: #b42318; color: #fff; }
/* section hint label now carries INLINE ✓/✗ buttons (always visible with the chip) */
.s2-ghost-label-section { left: 12px; z-index: 21; display: inline-flex; align-items: center; gap: 3px; }
.s2-sec-act { pointer-events: auto; cursor: pointer; border: 1.5px solid currentColor; background: #fff;
  border-radius: 50%; width: 17px; height: 17px; line-height: 14px; font-size: 11px; font-weight: 700;
  padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.s2-sec-ok { color: #137d68; }
.s2-sec-ok:hover { background: #137d68; color: #fff; }
.s2-sec-no { color: #b42318; }
.s2-sec-no:hover { background: #b42318; color: #fff; }
.s2-sec-txt { pointer-events: none; }

/* multi-page span stepper (◀ N ▶) on header field + section ghosts */
.s2-span-step { position: absolute; top: -12px; right: 8px; display: inline-flex; align-items: center;
  gap: 1px; background: #fff; border: 1px solid #c8cdd6; border-radius: 11px; padding: 0 2px;
  pointer-events: auto; z-index: 6; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.s2-span-arrow { border: none; background: none; cursor: pointer; font-size: 11px; line-height: 16px;
  padding: 0 3px; color: #364fc7; }
.s2-span-arrow:hover { color: #1c2e8a; }
.s2-span-num { font-size: 11px; font-weight: 700; min-width: 14px; text-align: center; color: #1a1d23; }
/* tree/SECTION page-span stepper (#33): flows INLINE inside the coverage label
   ("subcategory L2: ... ◀ N ▶") instead of the header stepper's absolute spot.
   pointer-events:auto re-enables clicks inside the pointer-events:none label. */
.s6-tree-span-step { position: static; margin-left: 6px; vertical-align: middle; }
.s2-ghost.committed { border-style: solid; }
.s2-ghost.committed .s2-ghost-ok { background: #137d68; color: #fff; }

.s2-grip {
  position: absolute; width: 28px; height: 8px;
  left: 50%; transform: translateX(-50%);
  border-radius: 4px; background: #fff;
  pointer-events: auto; cursor: ns-resize;
  box-shadow: 0 0 0 1.5px currentColor;
  background-image: radial-gradient(circle at center, currentColor 1.5px, transparent 2px);
  background-size: 8px 100%;
  background-position: center;
  background-repeat: repeat-x;
}
.s2-grip-top    { top: -5px; }
.s2-grip-bottom { bottom: -5px; }

/* Right-side live preview */
.s2-preview {
  border: 1px solid #d4d6dc; border-radius: 6px;
  background: #fafbfc; padding: 14px; position: sticky; top: 16px;
  max-height: 80vh; overflow-y: auto;
}
.s2-preview h3 {
  margin: 0 0 10px; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.5px; color: #5a6573;
}
.s2-record { border-top: 1px solid #d4d6dc; padding: 8px 0; font-size: 12px; }
.s2-record:first-child { border-top: 0; }
.s2-pn { color: #137d68; font-weight: 600; }
.s2-field { display: flex; gap: 8px; font-size: 11px; margin-top: 3px; }
.s2-key { color: #8b94a3; min-width: 90px; }
.s2-val { color: #1a1d23; }
.s2-empty { color: #8b94a3; font-size: 12px; font-style: italic; padding: 8px 0; }

/* Popover */
.s2-popover {
  position: absolute; background: #fff;
  border: 1px solid #8fa3b8; border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  z-index: 100; width: 250px; overflow: hidden;
  font-size: 13px;
}
.s2-popover-head {
  padding: 6px 12px; background: #e9ecf0;
  border-bottom: 1px solid #d4d6dc; color: #5a6573;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
}
.s2-popover-item {
  padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #e9ecf0;
}
.s2-popover-item:hover { background: #f3f4f6; }
.s2-popover-item.suggested {
  background: rgba(45,165,80,0.16); color: rgba(25,130,55,1); font-weight: 600;
}
.s2-popover-item.suggested::after { content: "  <- suggested"; font-size: 10px; color: #5a6573; font-weight: 400; }
.s2-popover-item:last-child { border-bottom: 0; }

/* Vertical segment ghosts (form1 multi-segment side-by-side)
   Distinct dark-purple long-dash border so they don't read as "another
   subsection band" alongside the cyan row-bands. */
.s2-segment-ghost {
  position: absolute;
  border-left: 3px dashed rgba(125, 55, 175, 0.85);
  border-right: 3px dashed rgba(125, 55, 175, 0.85);
  background: rgba(160, 90, 200, 0.05);
  z-index: 0;                   /* below row-band ghosts */
  pointer-events: none;
}
.s2-segment-label {
  position: absolute;
  top: 4px; left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: rgba(125, 55, 175, 1);
  background: #fff;
  padding: 1px 8px;
  border: 1.5px solid rgba(125, 55, 175, 0.85);
  border-radius: 10px;
  font-weight: 600;
  white-space: nowrap;
}

/* Vertical drag handle between segments */
.s2-segment-handle {
  position: absolute;
  width: 8px;
  background: transparent;
  cursor: ew-resize;
  z-index: 4;
  pointer-events: auto;
}
.s2-segment-handle-dots {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 6px; height: 28px;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 0 0 1.5px #5a6573;
  background-image: radial-gradient(circle at center, #5a6573 1.5px, transparent 2px);
  background-size: 100% 8px;
  background-position: center;
  background-repeat: repeat-y;
}
.s2-segment-handle:hover .s2-segment-handle-dots { box-shadow: 0 0 0 1.5px #137d68; }
.s2-segment-handle-rm {
  position: absolute;
  top: -22px; left: 50%;
  transform: translateX(-50%);
  width: 18px; height: 18px;
  border: 1px solid #b42318;
  background: #fff;
  color: #b42318;
  cursor: pointer;
  border-radius: 50%;
  font: 12px/14px sans-serif;
  padding: 0;
  pointer-events: auto;
  z-index: 5;
}
.s2-segment-handle-rm:hover { background: #b42318; color: #fff; }

/* "+ split" button at column boundaries without splits */
.s2-segment-add {
  position: absolute;
  width: 16px; height: 16px;
  border: 1px dashed #5a6573;
  background: #fff;
  color: #5a6573;
  cursor: pointer;
  border-radius: 50%;
  font: 13px/14px sans-serif;
  padding: 0;
  pointer-events: auto;
  z-index: 4;
  opacity: 0.4;
  transition: opacity 0.15s;
}
.s2-segment-add:hover { opacity: 1; background: #137d68; color: #fff; border-color: #137d68; }

/* ============================================================
   Studio3 Piece A -- column-header submenu (Replace + Flyout)
   ============================================================ */

/* Toolbar toggle group (Submenu style: Replace | Flyout) */
.s2-toggle-group {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 8px;
  padding: 3px 6px;
  border: 1px solid #d4d6dc;
  border-radius: 8px;
  background: #f8f9fb;
  font-size: 12px;
}
.s2-toggle-label { color: #5a6573; font-size: 11px; }
.s2-toggle-btn {
  border: 0; background: transparent; cursor: pointer;
  padding: 3px 10px; border-radius: 6px;
  font: 600 12px/1 -apple-system, "Segoe UI", system-ui, sans-serif;
  color: #5a6573;
}
.s2-toggle-btn.active { background: #137d68; color: #fff; }
.s2-toggle-btn:not(.active):hover { background: #e9ecf0; color: #1a1d23; }

/* Popover items with chevron submenu indicator */
.s2-popover-item.has-submenu { padding-right: 28px; position: relative; }
.s2-popover-caret {
  position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%);
  color: #8b94a3; font-size: 16px; font-weight: 700;
}
.s2-popover-item.has-submenu:hover .s2-popover-caret { color: #137d68; }

/* Field-level header gets a slightly different head label color */
.s2-popover-back {
  background: #f3f4f6;
  color: #5a6573;
  font-size: 12px;
}
.s2-popover-back:hover { background: #e9ecf0; color: #137d68; }
.s2-popover-back-arrow {
  display: inline-block; margin-right: 6px; font-size: 16px;
  vertical-align: middle; color: #5a6573;
}
.s2-popover-back:hover .s2-popover-back-arrow { color: #137d68; }

/* "+ add custom field" inline input row */
.s2-popover-add {
  padding: 6px 8px;
  border-top: 1px solid #d4d6dc;
  background: #fafbfc;
}
.s2-popover-add-input {
  width: 100%;
  border: 1px solid #d4d6dc;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 12px;
  color: #1a1d23;
  background: #fff;
}
.s2-popover-add-input:focus { outline: none; border-color: #137d68; }

/* Flyout (second popover) styling: same look as the primary popover */
#s2PopoverFlyout {
  /* inherits .s2-popover; just adds a subtle indicator to show it's child */
  border-left: 3px solid #137d68;
}
#s2PopoverFlyout::before {
  content: ""; position: absolute;
  top: 14px; left: -8px;
  width: 0; height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid #137d68;
}

/* Studio3 -- custom-field input pinned near top of submenu */
.s2-popover-add-top {
  border-top: 0;
  border-bottom: 1px solid #d4d6dc;
  background: #f0fdf6;
}
.s2-popover-add-top:hover { background: #f0fdf6; }
.s2-popover-add-top .s2-popover-add-input {
  border-color: #137d68;
  font-weight: 500;
}

/* Flyout flipped to left side: indicator arrow on the right edge */
#s2PopoverFlyout.s2-flyout-left { border-left: 0; border-right: 3px solid #137d68; }
#s2PopoverFlyout.s2-flyout-left::before {
  left: auto; right: -8px;
  border-left: 8px solid #137d68;
  border-right: 0;
}

/* ============================================================
   Studio4 Piece B -- proposed bands (auto-detected matches)
   ============================================================ */

/* Proposed ghost = same color family as confirmed, but faded + with
   a "pulse" animation on the border so user notices new matches. */
.s2-ghost-proposed {
  opacity: 0.65;
  border-style: dashed;
  border-width: 2px;
  animation: s2ProposedPulse 1.6s ease-in-out infinite;
}
@keyframes s2ProposedPulse {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 0.95; }
}

.s2-ghost-label-proposed {
  background: #fff8dc;
  border-color: rgba(170, 105, 15, 1);
  color: #6a4309;
  font-style: italic;
  font-weight: 500;
}

.s2-proposed-actions {
  position: absolute;
  top: -11px; right: 8px;
  display: flex; gap: 4px;
  pointer-events: auto;
  z-index: 5;
}
.s2-proposed-ok,
.s2-proposed-no {
  width: 22px; height: 22px;
  border: 1.5px solid;
  background: #fff;
  font: 700 14px/16px -apple-system, sans-serif;
  cursor: pointer;
  border-radius: 50%;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.s2-proposed-ok { border-color: #137d68; color: #137d68; }
.s2-proposed-ok:hover { background: #137d68; color: #fff; }
.s2-proposed-no { border-color: #b42318; color: #b42318; }
.s2-proposed-no:hover { background: #b42318; color: #fff; }

/* ============================================================
   Studio5 -- level submenu, tree picker, persistent tree panel
   ============================================================ */

/* Level submenu items use a tree-ish indented look */
.s5-level-item {
  font-size: 13px;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
}
.s5-level-item b { font-weight: 600; }
.s5-level-1 { color: #137d68; }
.s5-level-2 { color: rgba(20, 110, 175, 1); }
.s5-level-3 { color: rgba(125, 55, 175, 1); }

/* Tree picker rows */
.s5-tree-item { font-size: 13px; padding: 8px 14px; }
.s5-tree-item b { color: #1a1d23; font-weight: 600; }

/* Apply button in tree preview submenu */
.s5-tree-apply {
  background: #137d68; color: #fff;
  text-align: center; font-weight: 600;
  border-top: 1px solid #0b5b4c;
}
.s5-tree-apply:hover { background: #0b5b4c; }

/* Mini tree preview INSIDE the popover */
.s5-tree-preview {
  padding: 8px 14px;
  background: #fafbfc;
  font: 12px/1.6 -apple-system, "Segoe UI", system-ui, sans-serif;
  border-bottom: 1px solid #d4d6dc;
}
.s5-tree-line {
  white-space: nowrap;
  text-overflow: ellipsis; overflow: hidden;
  padding: 2px 0;
}
.s5-tree-line.s5-tree-new {
  background: rgba(19, 125, 104, 0.10);
  border-left: 3px solid #137d68;
  padding-left: 4px; margin-left: -4px;
}
.s5-tree-line .s5-tree-lvl {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  background: #e9ecf0; color: #5a6573;
  padding: 1px 5px; border-radius: 4px;
  margin-right: 6px;
}
.s5-tree-level-1 .s5-tree-lvl { background: rgba(45, 165, 80, 0.18); color: #137d68; }
.s5-tree-level-2 .s5-tree-lvl { background: rgba(40, 145, 200, 0.18); color: rgba(20, 110, 175, 1); }
.s5-tree-level-3 .s5-tree-lvl { background: rgba(160, 90, 200, 0.18); color: rgba(125, 55, 175, 1); }

/* Persistent "Trees" panel inside the right preview pane */
.s5-trees-panel {
  background: #fff;
  border: 1px solid #d4d6dc;
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.s5-trees-panel h3 {
  margin: 0 0 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #5a6573;
}
.s5-trees-body {
  max-height: 320px;
  overflow-y: auto;
}
.s5-trees-empty { color: #8b94a3; font-size: 12px; font-style: italic; }
.s5-tree-block { margin-bottom: 10px; }
.s5-tree-block:last-child { margin-bottom: 0; }
.s5-tree-head {
  font: 600 12px/1.4 -apple-system, "Segoe UI", system-ui, sans-serif;
  color: #137d68;
  border-bottom: 1px dashed #d4d6dc;
  padding-bottom: 4px; margin-bottom: 4px;
}
.s5-trees-body .s5-tree-line {
  font-size: 12px; padding: 3px 4px;
  cursor: pointer;
  border-radius: 3px;
}
.s5-trees-body .s5-tree-line:hover { background: #e9ecf0; }

/* Brief flash when user clicks a tree-panel line that jumps to a cell */
.s5-jump-flash {
  animation: s5JumpFlash 1.2s ease-out;
}
@keyframes s5JumpFlash {
  0%   { box-shadow: 0 0 0 3px #137d68 inset; background: rgba(19, 125, 104, 0.30); }
  100% { box-shadow: none; background: inherit; }
}

/* Studio5 -- x button to remove a single tree entry */
.s5-tree-line { position: relative; }
.s5-tree-rm {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border: 1px solid #b42318;
  background: #fff;
  color: #b42318;
  cursor: pointer;
  border-radius: 50%;
  font: 700 12px/1 sans-serif;
  padding: 0;
  margin-left: 6px;
  vertical-align: middle;
  opacity: 0.5;
  transition: opacity 0.12s;
}
.s5-tree-rm:hover { background: #b42318; color: #fff; opacity: 1; }
.s5-tree-line:hover .s5-tree-rm { opacity: 1; }
.s5-tree-rm-panel { float: right; }

/* Studio5 -- Apply + Cancel row at the bottom of the tree-preview submenu */
.s5-tree-actions {
  display: flex; gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid #d4d6dc;
  background: #fafbfc;
}
.s5-tree-actions button {
  flex: 1;
  padding: 10px 14px;
  border-radius: 6px;
  font: 600 13px/1 -apple-system, "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid;
}
.s5-tree-apply { background: #137d68; color: #fff; border-color: #0b5b4c; }
.s5-tree-apply:hover { background: #0b5b4c; }
.s5-tree-cancel { background: #fff; color: #5a6573; border-color: #d4d6dc; }
.s5-tree-cancel:hover { background: #f3f4f6; color: #1a1d23; }
.s5-tree-hint {
  font-size: 10px; font-weight: 500;
  padding: 1px 6px; border-radius: 4px;
  background: rgba(255,255,255,0.18); color: inherit;
  border: 1px solid currentColor; opacity: 0.55;
}
.s5-tree-cancel .s5-tree-hint { background: #e9ecf0; border-color: #b0b5be; }

/* Studio5 UX polish */

/* Flashing hint under the "Section / Subsection" role item */
.s5-role-hint {
  font-size: 10.5px;
  color: #137d68;
  margin-top: 2px;
  font-style: italic;
  opacity: 0.85;
  letter-spacing: 0.3px;
}
.s5-role-hint-flash {
  animation: s5HintFlash 0.45s ease-out;
}
@keyframes s5HintFlash {
  0%   { opacity: 0;    transform: translateX(-4px); }
  100% { opacity: 0.85; transform: translateX(0); }
}

/* "Pick a level for this new entry" divider in the level picker when an
   existing tree is shown above. */
.s5-tree-preview-context {
  background: #f0fdf6;
  border-top: 1px solid #d4d6dc;
  border-bottom: 1px solid #d4d6dc;
}
.s5-tree-divider {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #5a6573;
  padding: 8px 14px 4px;
  font-weight: 600;
}

/* Tree picker: wrap + inline tree body */
.s5-tree-item-wrap {
  border-bottom: 1px solid #d4d6dc;
}
.s5-tree-item-wrap:last-child { border-bottom: 0; }
.s5-tree-item {
  border-bottom: 0;
  font-weight: 600;
}
.s5-tree-item-body {
  background: #f7f9fb;
  padding: 4px 14px 6px 22px;
  font: 11px/1.5 -apple-system, "Segoe UI", system-ui, sans-serif;
  border-top: 1px dashed #d4d6dc;
}
.s5-tree-item-body .s5-tree-line {
  padding: 1px 0;
}

/* Studio5 polish v3 -- mini tree hint + dual submenu */

/* Mini-tree look for the flashing hint under "Section / Subsection" */
.s5-role-hint {
  margin-top: 4px;
  padding: 4px 6px 4px 10px;
  background: rgba(19, 125, 104, 0.06);
  border-left: 2px solid rgba(19, 125, 104, 0.45);
  border-radius: 3px;
  font: italic 9.5px/1.4 -apple-system, "Segoe UI", system-ui, sans-serif;
  color: #5a6573;
  letter-spacing: 0.1px;
}
.s5-mini-tree-line { padding: 1px 0; white-space: nowrap; }
.s5-mini-tree-lvl {
  display: inline-block;
  background: #fff;
  color: #137d68;
  border: 1px solid rgba(19, 125, 104, 0.4);
  border-radius: 3px;
  padding: 0 3px;
  font-size: 8.5px;
  font-weight: 700;
  margin-right: 4px;
  vertical-align: baseline;
  font-style: normal;
}

/* Active tree in the picker -- so user knows which tree the flyout shows */
.s5-tree-item-active {
  background: rgba(19, 125, 104, 0.10);
  border-left: 3px solid #137d68;
  padding-left: 11px;   /* compensate for the left border */
  font-weight: 700;
}

/* Delete-whole-tree × in the picker -- larger and red so it reads as
   "destructive" vs the per-entry × inside the flyout */
.s5-tree-rm-whole {
  float: right;
  width: 20px; height: 20px;
  border: 1.5px solid #b42318;
  font-weight: 800; font-size: 13px;
}

/* Active level in the flyout -- highlighted so user sees which level the
   Apply will commit to */
.s5-level-active {
  background: rgba(19, 125, 104, 0.14);
  border-left: 3px solid #137d68;
  padding-left: 11px;
}

/* Dual-flyout tweaks: widen the flyout slightly since it now holds the
   filled tree + level picker + Apply/Cancel */
#s2PopoverFlyout.s5-tree-flyout { width: 300px; }

/* Studio5 dual-preview tree picker (2026-05-29) */
.s5-tree-popover-wide { width: 540px !important; }
.s5-tree-popover-wide .s2-popover-items { padding: 0; }
.s5-tree-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  border-bottom: 1px solid #d4d6dc;
}
.s5-tree-row:last-child { border-bottom: 0; }
.s5-tree-row-left {
  border-bottom: 0;
  border-right: 1px solid #d4d6dc;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
}
.s5-tree-row-right {
  padding: 6px 10px 8px;
  background: #fafbfc;
  font-size: 11.5px;
  line-height: 1.5;
  min-height: 80px;
}
.s5-cascade-head {
  font: italic 10.5px/1.4 -apple-system, "Segoe UI", system-ui, sans-serif;
  color: #5a6573;
  margin-bottom: 4px;
}
.s5-tree-line-empty { color: #8b94a3; font-style: italic; }
.s5-tree-line-clickable { cursor: pointer; padding: 3px 4px; border-radius: 3px; }
.s5-tree-line-clickable:hover { background: rgba(19, 125, 104, 0.10); color: #137d68; }
.s5-tree-line-clickable:hover .muted { color: #137d68; }

/* "Or choose existing tree" divider between new and existing rows */
.s5-tree-popover-wide .s5-tree-divider {
  background: #e9ecf0;
  padding: 4px 14px;
  font: 600 10px/1.4 -apple-system, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #5a6573;
  border-top: 1px solid #d4d6dc;
  border-bottom: 1px solid #d4d6dc;
}

/* Flash the "+ new tree" input red when user clicks a Level without naming */
.s5-tree-input-empty-flash {
  border-color: #b42318 !important;
  background: rgba(180, 35, 24, 0.05) !important;
  animation: s5InputFlash 0.6s ease-out;
}
@keyframes s5InputFlash {
  0%   { box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.30); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Mark the "+ new tree" cascade panel a touch differently so it reads
   as the "empty placeholder" */
.s5-cascade-new {
  background: rgba(19, 125, 104, 0.04);
  border-left: 2px solid rgba(19, 125, 104, 0.30);
}

/* Studio5 2026-05-29: chevron arrows on row-band grips for drag affordance */
.s2-grip { display: flex; align-items: center; justify-content: center; }
.s2-grip-chevron {
  font-size: 7px;
  color: inherit;
  line-height: 1;
  pointer-events: none;
  opacity: 0.75;
}
.s2-grip:hover { opacity: 1; }
.s2-grip:hover .s2-grip-chevron { opacity: 1; }
.s2-grip:active { box-shadow: 0 0 0 2px currentColor; }

/* ---- Studio5 save-as-vendor-profile ---------------------------------- */
.btn-sm { padding: 4px 10px; font-size: 12px; }

.s5-profiles-wrap { position: relative; display: inline-block; }
.s5-profiles-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 240px; max-height: 320px; overflow-y: auto;
  background: #fff; border: 1px solid #d7dde5; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(20, 30, 50, 0.16); padding: 6px;
}
.s5-pm-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 6px;
  background: transparent; cursor: pointer; font: inherit;
}
.s5-pm-item:hover { background: #eef3fb; }
.s5-pm-item b { font-size: 13px; color: #1c2533; }
.s5-pm-meta { font-size: 11px; color: #7a8696; }
.s5-pm-loading, .s5-pm-empty { padding: 10px 12px; font-size: 12px; color: #7a8696; }

.s5-profile-suggest {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 10px 0; padding: 10px 14px;
  background: #eaf6ef; border: 1px solid #b7e0c6; border-radius: 8px;
}
.s5-suggest-text { font-size: 13px; color: #1c4a32; }
.s5-suggest-text b { color: #0f7a4d; }

/* Studio6: keep the tree submenu inside the window. When a tree grows tall,
   the popover scrolls INTERNALLY instead of pushing the page down. Pure
   design -- no behaviour change. */
.s2-popover {
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
/* The wide tree picker's cascade panels (4A/4B/4C...) each get their OWN scroll
   at a PLEASANT height (~240px) so a tree with many banners scrolls inside its
   own panel instead of stretching the whole picker -- you no longer have to
   scroll the main menu to the bottom to reach a panel. */
.s2-popover.s5-tree-popover-wide { max-height: 82vh; }
.s5-cascade-panel { max-height: 240px; overflow-y: auto; overflow-x: hidden; }

/* Studio6: tree COVERAGE ghosts -- dashed spans over the rows each section /
   subsection covers, colored + nested by level. pointer-events:none so the
   underlying cells stay clickable. */
.s6-tree-cover {
  position: absolute;
  border: 2px dashed #1f9d6b;
  background: rgba(31, 157, 107, 0.06);
  border-radius: 6px;
  pointer-events: none;
  z-index: 2;
  box-sizing: border-box;
}
.s6-tree-cover-l1 { border-color: #1f9d6b; background: rgba(31, 157, 107, 0.07); z-index: 2; }
.s6-tree-cover-l2 { border-color: #2563eb; background: rgba(37, 99, 235, 0.06); z-index: 3; }
.s6-tree-cover-l3 { border-color: #b45309; background: rgba(180, 83, 9, 0.07); z-index: 4; }
.s6-tree-cover-label {
  position: absolute; top: -10px; left: 8px;
  padding: 1px 7px; border-radius: 9px; font-size: 11px; font-weight: 600;
  background: #0f7a4d; color: #fff; white-space: nowrap; pointer-events: none;
}
.s6-tree-cover-l2 > .s6-tree-cover-label { background: #2563eb; }
.s6-tree-cover-l3 > .s6-tree-cover-label { background: #b45309; }
.s6-cover-ext { opacity: 0.8; font-size: 9px; }

/* Per-level badges around the coverage perimeter (3 per side). They identify
   each area by level so adjacent/overlapping ghosts are distinguishable. */
.s6-cover-tag {
  position: absolute; z-index: 5;
  font-size: 8px; font-weight: 800; line-height: 1; letter-spacing: 0.3px;
  padding: 1px 3px; border-radius: 3px; color: #fff; pointer-events: none;
  transform: translate(-50%, -50%); box-shadow: 0 0 0 1px rgba(255,255,255,0.6);
}
.s6-tree-cover-l1 .s6-cover-tag { background: #1f9d6b; }
.s6-tree-cover-l2 .s6-cover-tag { background: #2563eb; }
.s6-tree-cover-l3 .s6-cover-tag { background: #b45309; }
.s6-cover-tag-top    { top: 0; }
.s6-cover-tag-bottom { top: 100%; }
.s6-cover-tag-left   { left: 0; }
.s6-cover-tag-right  { left: 100%; }

/* Provisional coverage: bottom boundary inferred from a GUESSED (not-yet-
   confirmed) next banner. Dotted + lighter; confirming the guess (✓) turns it
   into a solid, locked span. */
.s6-tree-cover-provisional { border-style: dotted !important; opacity: 0.82; }
.s6-tree-cover-provisional .s6-tree-cover-label::after {
  content: " · provisional"; font-weight: 400; opacity: 0.85;
}

/* Bottom resize handle on a coverage ghost (drag to set explicit span). */
.s6-cover-resize {
  position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 15px; border-radius: 8px;
  background: #fff; border: 1.5px solid currentColor;
  cursor: ns-resize; pointer-events: auto; z-index: 6; color: #1f9d6b;
}
.s6-cover-rz-arrow { font-size: 8px; line-height: 1; letter-spacing: -2px; }
.s6-tree-cover-l1 .s6-cover-resize { color: #1f9d6b; }
.s6-tree-cover-l2 .s6-cover-resize { color: #2563eb; }
.s6-tree-cover-l3 .s6-cover-resize { color: #b45309; }

/* Guessed areas FLASH (pulse) so they read as "confirm me" hints, distinct
   from stable confirmed coverage. */
/* Pulse the GLOW + fill (not opacity) -- opacity on the parent would fade the
   ✓/✗ action buttons too, making them invisible. */
@keyframes s6-guess-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(14,159,142,0.0); background: rgba(14,159,142,0.07); }
  50%      { box-shadow: 0 0 0 3px rgba(14,159,142,0.45); background: rgba(14,159,142,0.20); }
}
.s5-ghost-proposed-tree { animation: s6-guess-flash 1.25s ease-in-out infinite; }

/* ---- Studio7: full-width grid + floating LIVE RESULT panel ---------- */
.studio7 .s2-layout { grid-template-columns: minmax(0, 1fr); }  /* reclaim the old right pane */

.s7-float {
  position: fixed; right: 24px; bottom: 24px; z-index: 80;
  width: 580px; max-width: 92vw; max-height: 72vh;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #cfd6e0; border-radius: 10px;
  box-shadow: 0 12px 40px rgba(20, 30, 50, 0.22); overflow: hidden;
}
.s7-float-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; background: #1c2533; color: #fff; cursor: move;
  user-select: none; font-size: 13px; font-weight: 600;
}
.s7-float-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s7-float-head .muted { color: #b8c2d0; font-weight: 400; }
.s7-float-btns { display: flex; gap: 4px; flex: 0 0 auto; }
.s7-float-btn {
  width: 22px; height: 22px; border: 0; border-radius: 5px; cursor: pointer;
  background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 14px; line-height: 1;
}
.s7-float-btn:hover { background: rgba(255, 255, 255, 0.28); }
.s7-float-body { overflow: auto; background: #fff; flex: 1 1 auto; min-height: 0; }
.s7-float.s7-min { max-height: none; }
.s7-float.s7-min .s7-float-body { display: none; }

.s7-outtable { border-collapse: collapse; width: 100%; font-size: 11px; }
.s7-outtable th, .s7-outtable td {
  border: 1px solid #e3e8ef; padding: 3px 7px; text-align: left;
  white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis;
}
.s7-outtable thead th { position: sticky; top: 0; z-index: 1; background: #eef3fb; color: #1c2533; font-weight: 700; }
.s7-outtable tbody tr:nth-child(even) { background: #fafbfd; }
.s7-rownum { color: #9aa6b4; text-align: right; background: #f4f6f9 !important; width: 1%; }
.s7-col-tree { background: rgba(31, 157, 107, 0.10); }
.s7-outtable thead th.s7-col-tree { background: #d8f0e4; color: #0f7a4d; }
.s7-empty-cell { color: #c2c9d2; }
.s7-empty { padding: 16px; font-size: 12px; color: #7a8696; }

/* (Removed: Studio7 persistent column-roles strip. The header/field layer is a
   VIRTUAL layer chosen from the cell popover's "Column header" item -- no
   separate on-screen strip. See studio7.js ROLE_LIST.) */

/* ---- studio6-hints A/B variant -------------------------------------- */
/* Suppress ALL persistent grid ghosts (auto-detected bands + proposed bands)
   EXCEPT the user's confirmed tree coverage, tree guesses, and the transient
   hint flashes -- so the scene stays uncluttered. */
.hints-mode .s2-ghosts > .s2-ghost:not(.s6-tree-cover):not(.s5-ghost-proposed-tree):not(.s6-hint-flash):not(.s2-ghost-brand):not(.s2-ghost-field):not(.s2-ghost-headerrow):not(.s2-ghost-section):not(.s2-ghost-sub) {
  display: none !important;
}
/* section / subsection bands STAY visible in hints-mode so their ✓ keep / ✗ drop chips show;
   suppress their transient "hint → ..." flash so it doesn't double up on the persistent chip */
.hints-mode .s2-ghost-section, .hints-mode .s2-ghost-sub { display: block !important; }
.hints-mode .s6-hint-flash-section, .hints-mode .s6-hint-flash-sub { display: none !important; }

/* Studio8 VIRTUAL LAYERS: FIELD/header layer (teal), its own on-grid ghost --
   distinct from TREE coverage (level colors) and BRAND (purple). */
.s2-ghost-field {
  background: rgba(13, 148, 136, 0.10);
  border-left: 2px solid rgba(13, 148, 136, 0.55);
  border-right: 2px solid rgba(13, 148, 136, 0.55);
  pointer-events: none;
}
.s2-ghost-headerrow {
  background: rgba(13, 148, 136, 0.14);
  border-top: 2px solid rgba(13, 148, 136, 0.7);
  border-bottom: 2px solid rgba(13, 148, 136, 0.7);
  pointer-events: none;
}
.s2-ghost-label-field {
  background: rgba(13, 148, 136, 1);
  color: #fff;
}
/* Studio9: one big "Accept ALL suggestions" button pinned to the LEFT edge.
   Appears only while there are proposals; per-guess ✓/✗ still work individually. */
.s9-accept-all {
  position: fixed; left: 14px; top: 50%; transform: translateY(-50%);
  z-index: 95; width: 86px; padding: 12px 8px; border: 0; border-radius: 12px;
  background: #137d68; color: #fff; font: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  box-shadow: 0 8px 22px rgba(19,125,104,0.45); text-align: center;
  animation: s9-accept-pulse 2.2s ease-in-out infinite;
}
.s9-accept-all:hover { background: #0f6b59; animation: none; }
.s9-accept-all-check { font-size: 22px; line-height: 1; }
.s9-accept-all-txt { font-size: 12px; font-weight: 700; line-height: 1.15; }
.s9-accept-all-n {
  background: #fff; color: #137d68; border-radius: 11px;
  padding: 1px 9px; font-size: 12px; font-weight: 700;
}
@keyframes s9-accept-pulse {
  0%,100% { box-shadow: 0 8px 22px rgba(19,125,104,0.45); }
  50%     { box-shadow: 0 8px 30px rgba(19,125,104,0.8); }
}
/* The BRAND layer is its own persistent layer in studio7 (purple, distinct from
   the green/blue/amber tree-coverage layer) -- so it stays visible in hints-mode. */
.studio7 .s2-ghost-brand .s2-ghost-label { background: rgba(125,55,175,1); color: #fff; }
/* The transient "expected dissection" hint, flashed one at a time every ~10s. */
.s6-hint-flash {
  position: absolute; border: 2px dashed #6366f1;
  background: rgba(99, 102, 241, 0.10); border-radius: 6px;
  pointer-events: none; z-index: 5;
  animation: s6-hint-pulse 1s ease-in-out infinite;
}
/* Pulse glow + fill, NOT opacity -- so the ✓/✗ buttons on the flash stay solid. */
@keyframes s6-hint-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0.0); background: rgba(99,102,241,0.07); }
  50%      { box-shadow: 0 0 0 3px rgba(99,102,241,0.40); background: rgba(99,102,241,0.20); }
}
.s6-hint-flash-label {
  position: absolute; top: -10px; left: 8px; padding: 1px 7px; border-radius: 9px;
  font-size: 11px; font-weight: 600; background: #6366f1; color: #fff; white-space: nowrap;
}
.s6-hint-flash-section { border-color: #1f9d6b; } .s6-hint-flash-section .s6-hint-flash-label { background: #1f9d6b; }
.s6-hint-flash-sub     { border-color: #2563eb; } .s6-hint-flash-sub .s6-hint-flash-label     { background: #2563eb; }
.s6-hint-flash-brand   { border-color: #b45309; } .s6-hint-flash-brand .s6-hint-flash-label   { background: #b45309; }
/* Studio9 hints flash VISUAL-ONLY (no buttons) -- accept/reject is on the guesses
   (left rail). Per-LAYER edge style so each layer reads at a glance:
   tree = dashed, brand = dotted. */
.s6-hint-layer-tree  { border-style: solid !important; }
.s6-hint-layer-brand { border-style: dashed !important; }

/* GUESS ✓/✗ -> move to the LEFT edge (lined up under the "Accept all" button),
   static/solid (the guess ghost pulses via box-shadow, not opacity, so these
   never fade). Was right:8px -> hidden under the floating "Live result" panel. */
.s5-ghost-proposed-tree .s2-proposed-actions,
.s2-ghost-proposed .s2-proposed-actions { left: 6px; right: auto; top: -13px; z-index: 85; }
.s5-ghost-proposed-tree .s2-ghost-label-proposed { left: 64px; }

/* --- COSMETIC: per-layer EDGE IDENTITY -- color + treatment + accent so each
   virtual layer is unmistakable (thin dash/dot/double alone was too subtle).
   TREE = green dashed + thick green left bar; BRAND = purple dotted + glow ring;
   FIELD = teal diagonal HATCH fill; HEADER = amber double bars. --- */
/* Each layer = distinct COLOR + distinct EDGE TEXTURE + a bold colored LEFT SPINE:
   TREE = green SOLID + 6px spine · BRAND = purple DASHED + 6px spine + glow ·
   FIELD = teal diagonal HATCH · HEADER = amber DOUBLE. (Replaces the too-similar
   dashed-vs-dotted distinction.) */
.s6-tree-cover { border-style: solid; border-left-width: 6px; }
.s6-hint-layer-tree {
  border-style: solid !important; border-color: #1f9d6b !important;
  border-left: 6px solid #1f9d6b !important;
}
.studio7 .s2-ghost-brand { border-style: dashed; border-left-width: 6px; }
.s6-hint-layer-brand {
  border-style: dashed !important; border-color: #7d37af !important;
  border-left: 6px solid #7d37af !important;
  box-shadow: 0 0 0 2px rgba(125, 55, 175, 0.25);
}
.s2-ghost-field {
  border-style: solid; border-left-width: 6px; border-left-color: #0d9488;
  background-image: repeating-linear-gradient(45deg,
    rgba(13,148,136,0.16) 0 6px, transparent 6px 12px);
}
.s2-ghost-headerrow { border-style: double; border-width: 4px; border-color: #b45309; }

/* Studio10: preview drag-to-concatenate columns */
.s7-combo-hint {
  padding: 4px 10px; font-size: 10.5px; color: #6b7686; font-style: italic;
  border-bottom: 1px dashed #e1e6ee;
}
.s7-outtable th[draggable="true"] { cursor: grab; }
.s7-outtable th.s7-drop-combine {            /* center -> combine */
  outline: 2px dashed #137d68; outline-offset: -2px; background: #e7f7f1;
}
.s7-outtable th.s7-drop-before { box-shadow: inset 3px 0 0 #2563eb; }  /* edge -> reorder */
.s7-outtable th.s7-drop-after  { box-shadow: inset -3px 0 0 #2563eb; }
.s7-outtable th.s7-col-combined { background: #fdf2e9; color: #9a4a13; }
.s7-combo-ok {
  margin-left: 6px; cursor: pointer; color: #137d68; font-weight: 700;
  padding: 0 3px; border-radius: 3px;
}
.s7-combo-ok:hover { background: #d9f5ec; }
.s7-combo-done { margin-left: 6px; color: #137d68; font-weight: 700; opacity: 0.6; }
.s7-combo-rm {
  margin-left: 5px; cursor: pointer; color: #b42318; font-weight: 700;
  padding: 0 3px; border-radius: 3px;
}
.s7-combo-rm:hover { background: #fde2de; }

/* --- COSMETIC: per-layer resize HANDLE SHAPES (distinct shape + color; the ▲▼
   directional arrow stays). TREE coverage = green PILL · tree band = blue CIRCLE
   · brand = purple SQUARE. --- */
.s6-cover-resize { color: #1f9d6b; border-radius: 9px; }
.s2-ghost-category .s2-grip,
.s2-ghost-subcategory .s2-grip { color: #2563eb; border-radius: 50%; }
.s2-ghost-brand .s2-grip { color: #7d37af; border-radius: 1px; }

/* --- Studio9 onboarding guidance (permanent) --- */
/* Banner above the workspace with flashing down-arrows pointing into the grid. */
.s9-guide {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 8px; text-align: center;
  padding: 8px 14px; margin: 0 0 8px;
  background: #eef7f4; border: 1px solid #bfe3d8; border-radius: 8px;
  color: #0f5c4c; font-size: 13px; font-weight: 600;
}
.s9-guide-arrows {
  color: #137d68; font-size: 15px; letter-spacing: 2px;
  animation: s9-guide-bounce 1.1s ease-in-out infinite;
}
@keyframes s9-guide-bounce {
  0%, 100% { transform: translateY(0);   opacity: 0.5; }
  50%      { transform: translateY(4px); opacity: 1;   }
}
/* Permanent first-row hint inside the live-result preview panel. */
.s7-float-guide {
  padding: 6px 10px; font-size: 11px; line-height: 1.4;
  color: #41607a; background: #f0f7ff; border-bottom: 1px solid #d6e4f2;
}

/* --- Studio9 segment SLICER: a red SCISSOR that slides along the TOP edge,
   with a projected red cut line + dotted markers at other detected boundaries. --- */
.s9-slicer-line {                 /* the active projected cut */
  position: absolute; width: 0; border-left: 2px dashed #d6336c;
  z-index: 78; pointer-events: none;
}
.s9-slicer-detected {             /* where the system thinks other segments are */
  position: absolute; width: 0; border-left: 2px dotted rgba(214, 51, 108, 0.45);
  z-index: 77; pointer-events: none;
}
/* While slicing, open a clear strip above the grid so the roller (placed above
   the grid at top:-44) is NOT clipped by the grid wrapper's overflow:auto. */
.s9-slicing .s2-gridwrap { padding-top: 54px; }
.s9-slicer-hit {                  /* wide invisible grab/double-click area over the line */
  position: absolute; width: 18px; z-index: 79;
  cursor: ew-resize; pointer-events: auto; background: transparent;
  user-select: none; -webkit-user-select: none;
}
.s9-scissor {                     /* the chunky roller handle on the top edge */
  position: absolute; z-index: 81; width: 40px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #fff; background: #d6336c;
  border-radius: 13px; cursor: ew-resize; pointer-events: auto;
  box-shadow: 0 3px 8px rgba(214, 51, 108, 0.5);
  animation: s9-scissor-bob 1.2s ease-in-out infinite;
  user-select: none; -webkit-user-select: none;
}
.s9-scissor::after {              /* downward pointer onto the cut line */
  content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 7px solid #d6336c;
}
@keyframes s9-scissor-bob {       /* gentle left-right wiggle -> "slide me" hint */
  0%, 100% { transform: translateX(-2px); }
  50%      { transform: translateX(2px); }
}
#s9SliceBtn.active { background: #fce4ef; color: #b4377a; border-color: #e899bd; }

/* Studio5 progressive guessing: proposed TREE-entry ghost (teal tint). */
.s5-ghost-proposed-tree {
  border-color: #0e9f8e !important;
  background: rgba(14, 159, 142, 0.10) !important;
}
.s5-ghost-proposed-tree .s2-ghost-label-proposed {
  background: #0e9f8e; color: #fff;
}

/* ---- Smart-Select (studio12) ---- */
.s2-smartsel { margin: 14px 0; border: 1px solid #d8dee9; border-radius: 8px; background: #fff; overflow: hidden; }
.s2-smartsel-bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: #f3f6fb; border-bottom: 1px solid #e3e8f0; }
.s2-smartsel-title { font-weight: 600; color: #305496; }
.s2-smartsel-bar .btn { margin-left: auto; }
.s2-smartsel-stage { position: relative; display: inline-block; line-height: 0; max-width: 100%; }
.s2-smartsel-stage img { max-width: 100%; height: auto; display: block; }
.s2-smartsel-masks { position: absolute; inset: 0; }
.s2-smartsel-mask { position: absolute; border: 2px solid rgba(48,84,150,.9); background: rgba(48,84,150,.08);
  border-radius: 3px; box-sizing: border-box; cursor: move; }
.s2-smartsel-mask .s2-mask-label { position: absolute; top: -1px; left: -1px; transform: translateY(-100%);
  background: #305496; color: #fff; font-size: 11px; line-height: 1.4; padding: 1px 6px; border-radius: 3px 3px 0 0;
  white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.s2-smartsel-mask .s2-mask-rows { position: absolute; bottom: 2px; right: 2px; background: rgba(48,84,150,.85);
  color: #fff; font-size: 10px; padding: 0 4px; border-radius: 3px; }

/* ---- Smart-Select interactive masks (iter 2) ---- */
.s2-smartsel-mask { transition: border-color .1s, background .1s; }
.s2-smartsel-mask:hover { border-color: rgba(48,84,150,1); background: rgba(48,84,150,.14); }
.s2-smartsel-mask.selected { border-color: #e8590c; background: rgba(232,89,12,.12); box-shadow: 0 0 0 1px #e8590c; z-index: 5; }
.s2-smartsel-mask .s2-mask-check { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px;
  background: #2f9e44; color: #fff; border: none; border-radius: 4px; font-size: 13px; line-height: 20px;
  text-align: center; cursor: pointer; padding: 0; z-index: 6; opacity: .92; }
.s2-smartsel-mask .s2-mask-check:hover { opacity: 1; transform: scale(1.08); }
.s2-smartsel-mask.confirmed { border-color: #2f9e44; background: rgba(47,158,68,.12); }
.s2-smartsel-mask.confirmed .s2-mask-check { background: #1f7a33; }
.s2-mask-handle { position: absolute; width: 10px; height: 10px; background: #fff; border: 2px solid #e8590c;
  border-radius: 2px; z-index: 7; }
.s2-mask-handle.nw { left: -6px; top: -6px; cursor: nwse-resize; }
.s2-mask-handle.ne { right: -6px; top: -6px; cursor: nesw-resize; }
.s2-mask-handle.sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.s2-mask-handle.se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.s2-mask-handle.n { left: 50%; top: -6px; margin-left: -5px; cursor: ns-resize; }
.s2-mask-handle.s { left: 50%; bottom: -6px; margin-left: -5px; cursor: ns-resize; }
.s2-mask-handle.w { left: -6px; top: 50%; margin-top: -5px; cursor: ew-resize; }
.s2-mask-handle.e { right: -6px; top: 50%; margin-top: -5px; cursor: ew-resize; }

/* ---- TYPED masks (iter 3): header / title / records, each its own colour ---- */
.s2-mask-legend { display: inline-flex; gap: 10px; align-items: center; margin-left: 6px; }
.s2-leg { font-size: 11px; padding: 1px 7px; border-radius: 10px; color: #fff; font-weight: 600; }
.s2-leg-header  { background: #2f6fd0; }
.s2-leg-title   { background: #e8930c; }
.s2-leg-records { background: #2f9e44; }
.s2-leg-block { background: #7048e8; }
.s2-tools { display: inline-flex; gap: 4px; }
.s2-pager { display: inline-flex; align-items: center; gap: 6px; }
.s2-pager .btn { padding: 2px 8px; }
.s2-pageind { font-size: 12px; font-weight: 600; color: #364fc7; white-space: nowrap; }
.s2-pager .btn:disabled { opacity: .4; cursor: default; }
.s2-tool.active { background: #364fc7; color: #fff; border-color: #2b3fa0; }
.s2-scissor.active { background: #c2255c; color: #fff; border-color: #a61e4d; }

/* light but INTENSE fills + thick, noticeable borders */
.s2-smartsel-mask { border-width: 4px; border-radius: 4px; }
.s2-smartsel-mask.t-header  { border-color: #1c7ed6; background: rgba(77,171,247,.22); }
.s2-smartsel-mask.t-title   { border-color: #f08c00; background: rgba(255,212,59,.30); }
.s2-smartsel-mask.t-records { border-color: #2f9e44; background: rgba(105,219,124,.24); }
.s2-smartsel-mask.t-header:hover  { background: rgba(77,171,247,.34); }
.s2-smartsel-mask.t-title:hover   { background: rgba(255,212,59,.42); }
.s2-smartsel-mask.t-records:hover { background: rgba(105,219,124,.36); }
.s2-smartsel-mask.selected { box-shadow: 0 0 0 2px #111, 0 0 0 5px #ffd43b; z-index: 5; }

/* add-mask buttons (draw a new region of a type) */
.s2-addmask { border: none; cursor: pointer; font: inherit; }
.s2-addmask.active { outline: 2px solid #111; outline-offset: 1px; }

/* the type TAG (top-left) doubles as the click-to-change-type control */
.s2-smartsel-mask .s2-mask-tag { position: absolute; top: -1px; left: -1px; transform: translateY(-100%);
  color: #fff; font-size: 11px; line-height: 1.5; padding: 1px 7px; border-radius: 4px 4px 0 0;
  white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  user-select: none; }
.s2-smartsel-mask.t-header  .s2-mask-tag { background: #2f6fd0; }
.s2-smartsel-mask.t-title   .s2-mask-tag { background: #e8930c; }
.s2-smartsel-mask.t-records .s2-mask-tag { background: #2f9e44; }
.s2-smartsel-mask .s2-mask-tag:hover { filter: brightness(1.12); }
.s2-smartsel-mask .s2-mask-tag .ico { margin-right: 4px; }

/* whole-block masks (BLOCK mode) — purple, brighter + thick like the typed ones */
.s2-smartsel-mask.t-block  { border-color: #7048e8; background: rgba(151,117,250,.22); }
.s2-smartsel-mask.t-block:hover { background: rgba(151,117,250,.34); }
.s2-smartsel-mask.t-block  .s2-mask-tag { background: #7048e8; cursor: default; }

/* workarea2 mode buttons (3-way: blocks / typed / auto) */
.s2-modes { display: inline-flex; gap: 0; border: 1px solid #c8cdd6; border-radius: 7px; overflow: hidden; }
.s2-mode { font: inherit; font-size: 12px; padding: 5px 10px; border: none; border-right: 1px solid #c8cdd6;
  background: #f4f6fa; color: #333; cursor: pointer; white-space: nowrap; }
.s2-mode:last-child { border-right: none; }
.s2-mode:hover { background: #e9edf5; }
.s2-mode.active { background: #2f6fd0; color: #fff; }
.s2-mode b { font-weight: 700; }

.s2-bar-actions { display: inline-flex; gap: 6px; margin-left: auto; }

/* scissors (per-block vertical / horizontal cut) */
.s2-slice { display: inline-flex; gap: 4px; }
.s2-scissor.active { background: #c2255c; color: #fff; border-color: #a61e4d; }
.s2-slice-guide { position: absolute; pointer-events: none; z-index: 20; }

/* the add-type buttons dim out when not in 'manage now' mode */
.s2-mask-legend.dimmed { opacity: .38; pointer-events: none; filter: grayscale(.6); }

/* "what to do next" callout */
.s2-callout { margin: 6px 2px 0; padding: 8px 12px; border-radius: 8px;
  background: #fff7e6; border: 1px solid #ffd479; color: #7a4d00; font-size: 13px; line-height: 1.45; }
.s2-callout b { color: #5a3a00; }
.s2-callout .k, .s2-smarthint .k { display: inline-block; padding: 0 5px; border-radius: 4px; background: #ffe8b3;
  border: 1px solid #ffce6b; font-size: 12px; }

/* flashing smart-select prompt (rotobrush-style) */
.s2-smarthint { margin: 6px 2px 0; padding: 6px 12px; border-radius: 8px; font-size: 13px;
  background: #e7f5ff; border: 1px solid #74c0fc; color: #1864ab; animation: s2pulse 1.5s ease-in-out infinite; }
.s2-smarthint b { color: #0b4a8f; }
.s2-smarthint .ok { color: #2b8a3e; font-weight: 700; }
.s2-smarthint .no { color: #c92a2a; font-weight: 700; }
@keyframes s2pulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }

/* cursor-following helper while Ctrl is held */
.s2-hovertip { position: fixed; z-index: 9999; background: #1f2937; color: #fff; font-size: 12px;
  padding: 4px 9px; border-radius: 6px; pointer-events: none; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.s2-hovertip[hidden] { display: none; }

/* Ctrl-hover smart-select: dim all, light the one under the cursor + show ✓/✕ */
.s2-smartsel-masks.ctrl-active { cursor: crosshair; }
.s2-smartsel-masks.ctrl-active .s2-smartsel-mask { opacity: .42; transition: opacity .08s; }
.s2-smartsel-masks.ctrl-active .s2-smartsel-mask.lit { opacity: 1;
  box-shadow: 0 0 0 3px #fff, 0 0 16px 4px rgba(0,0,0,.4); z-index: 8; }
.s2-mask-ok { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #2f9e44;
  color: #fff; border: none; border-radius: 4px; font-size: 13px; line-height: 20px; text-align: center;
  cursor: pointer; padding: 0; z-index: 6; display: none; }
.s2-smartsel-masks.ctrl-active .s2-smartsel-mask.lit .s2-mask-ok { display: block; }
.s2-smartsel-mask.confirmed { box-shadow: 0 0 0 3px #2f9e44; }