/* ============================================================
   Data 365 · Buyer list
   Clean, bright "intelligence brief": cool-neutral surfaces,
   high-contrast ink, one confident crimson accent. Generous
   sizing for readability. Serif only for the masthead; a crisp
   grotesque for everything; mono for figures.
   Light (default) + cool-slate dark.
   ============================================================ */

:root,
html[data-theme="light"] {
  --bg:        #f5f6f8;   /* page */
  --surface:   #ffffff;   /* cards, table, panels */
  --surface-2: #f0f2f5;   /* subtle raised / hover fill */
  --ink:       #15181e;
  --ink-soft:  #555d6b;
  --ink-faint: #8e96a3;
  --rule:      #e7e9ee;
  --rule-2:    #d4d9e1;
  --accent:    #c0322c;
  --accent-deep:#9f2a25;
  --accent-soft:rgba(192,50,44,.08);
  --good:      #1a8f54;  --good-soft: rgba(26,143,84,.10);
  --warn:      #b3791a;  --warn-soft: rgba(179,121,26,.12);
  --bad:       #cf3a32;  --bad-soft:  rgba(207,58,50,.10);
  --row-hover: #f7f8fa;
  --shadow:    0 1px 2px rgba(20,23,30,.04), 0 8px 24px -12px rgba(20,23,30,.14);
  --shadow-lg: 0 24px 60px -22px rgba(20,23,30,.30);
}

html[data-theme="dark"] {
  --bg:        #0f1217;
  --surface:   #171b22;
  --surface-2: #1f242d;
  --ink:       #eef1f5;
  --ink-soft:  #aab2bf;
  --ink-faint: #717a87;
  --rule:      #262c35;
  --rule-2:    #353c47;
  --accent:    #ef6b62;
  --accent-deep:#f2837b;
  --accent-soft:rgba(239,107,98,.14);
  --good:      #4cc585;  --good-soft: rgba(76,197,133,.14);
  --warn:      #e0b14e;  --warn-soft: rgba(224,177,78,.14);
  --bad:       #ef6b62;  --bad-soft:  rgba(239,107,98,.14);
  --row-hover: #1c212a;
  --shadow:    0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.6);
  --shadow-lg: 0 28px 64px -20px rgba(0,0,0,.66);
}

:root {
  --serif: "Fraunces", Georgia, serif;
  --sans:  "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;
  --maxw:  1400px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background .35s ease, color .35s ease;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--accent); color: #fff; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ───────────── Masthead ───────────── */
.masthead {
  position: relative;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
.masthead::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); }
.mast-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 20px 32px 14px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
}
.brand { animation: rise .5s cubic-bezier(.2,.7,.2,1) both; }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.eyebrow .stamp { color: var(--accent); font-weight: 600; }
.wordmark {
  font-family: var(--serif); font-optical-sizing: auto; font-weight: 600;
  font-size: clamp(30px, 4vw, 46px); line-height: 1; letter-spacing: -.02em; margin: 6px 0 3px;
}
.brand-sub { font-size: 14.5px; color: var(--ink-soft); max-width: 64ch; }
.mast-actions { display: flex; align-items: center; gap: 14px; padding-bottom: 5px; animation: rise .5s .05s cubic-bezier(.2,.7,.2,1) both; }
.generated { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }

.icon-btn { width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--rule-2); background: var(--surface); cursor: pointer; font-size: 16px; color: var(--ink-soft); display: grid; place-items: center; transition: .2s; }
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }
.btn { background: var(--accent); color: #fff; border: 1px solid var(--accent); padding: 10px 18px; border-radius: 9px; cursor: pointer; font-size: 14px; font-weight: 600; transition: .18s; }
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn-ghost { background: var(--surface); border: 1px solid var(--rule-2); color: var(--ink-soft); padding: 8px 15px; border-radius: 9px; cursor: pointer; font-size: 13.5px; transition: .18s; }
.btn-ghost:hover { color: var(--ink); border-color: var(--ink-faint); }
.user-chip { display: inline-flex; align-items: center; gap: 10px; }
.user-chip[hidden] { display: none; }
.u-name { font-size: 13px; color: var(--ink-soft); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* dealsheet */
.dealsheet { max-width: var(--maxw); margin: 0 auto; padding: 0 32px 16px; display: flex; flex-wrap: wrap; gap: 28px; animation: rise .5s .1s cubic-bezier(.2,.7,.2,1) both; }
.ds-cell { display: flex; flex-direction: column; gap: 3px; }
.ds-k { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.ds-v { font-size: 14.5px; color: var(--ink); font-weight: 500; }

/* ───────────── Target context ───────────── */
.target-panel { max-width: var(--maxw); margin: 16px auto 0; padding: 0 32px; }
.target-panel > summary { cursor: pointer; list-style: none; width: max-content; font-size: 13px; color: var(--ink-soft); padding: 8px 0; }
.target-panel > summary::before { content: "▸  "; color: var(--ink-faint); }
.target-panel[open] > summary::before { content: "▾  "; }
.target-panel > summary:hover { color: var(--accent); }
.target-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; padding: 6px 0 10px; }
.target-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow); }
.target-card h4 { margin: 0 0 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.target-card p { margin: 0; font-size: 14px; color: var(--ink-soft); }

/* ───────────── Stat strip ───────────── */
.statstrip { max-width: var(--maxw); margin: 18px auto 0; padding: 0 32px; display: flex; flex-wrap: wrap; gap: 10px; animation: rise .5s .14s cubic-bezier(.2,.7,.2,1) both; }
.stat { cursor: pointer; border: 1px solid var(--rule-2); background: var(--surface); color: var(--ink-soft); padding: 9px 15px; border-radius: 10px; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; transition: .16s; box-shadow: var(--shadow); }
.stat:hover { border-color: var(--ink-faint); color: var(--ink); }
.stat .n { font-family: var(--mono); font-size: 13px; color: var(--ink-faint); }
.stat.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.stat.active .n { color: rgba(255,255,255,.65); }

/* ───────────── Controls ───────────── */
.controls { max-width: var(--maxw); margin: 18px auto 0; padding: 0 32px; }
.controls-row { display: flex; gap: 14px; align-items: center; }
.search-wrap { flex: 1; position: relative; display: flex; align-items: center; }
.search-ico { position: absolute; left: 16px; font-size: 18px; color: var(--ink-faint); pointer-events: none; }
#search { width: 100%; background: var(--surface); border: 1px solid var(--rule-2); border-radius: 11px; padding: 14px 16px 14px 44px; font-size: 15.5px; outline: none; box-shadow: var(--shadow); transition: .18s; }
#search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.seg { display: inline-flex; border: 1px solid var(--rule-2); border-radius: 11px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.seg button { background: transparent; border: 0; padding: 13px 20px; cursor: pointer; color: var(--ink-faint); font-size: 14px; font-weight: 600; transition: .15s; }
.seg button.active { background: var(--ink); color: #fff; }

.filters { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin: 18px 0 0; }
.filters label { font-size: 12.5px; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.filters select { font-size: 14px; font-weight: 500; color: var(--ink); background: var(--surface); border: 1px solid var(--rule-2); border-radius: 8px; padding: 7px 28px 7px 11px; cursor: pointer; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%), linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%);
  background-position: right 12px center, right 7px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.filters select:focus { outline: none; border-color: var(--accent); }
.filters .chk { gap: 7px; color: var(--ink-soft); }
.filters input[type=checkbox] { accent-color: var(--accent); width: 17px; height: 17px; }
.resultbar { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--ink-faint); padding: 16px 2px 8px; }
.resultbar #count { font-family: var(--mono); }
.kbd-hint { opacity: .85; }

/* ───────────── Results ───────────── */
main { max-width: var(--maxw); margin: 0 auto; padding: 6px 32px 100px; }

/* Table */
table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow); }
thead th { position: sticky; top: 0; z-index: 5; background: var(--surface); text-align: left; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; padding: 15px 16px; border-bottom: 1px solid var(--rule-2); white-space: nowrap; }
thead th:first-child { border-top-left-radius: 14px; }
thead th:last-child { border-top-right-radius: 14px; }
tbody tr { border-bottom: 1px solid var(--rule); cursor: pointer; transition: background .12s; }
tbody tr:last-child { border-bottom: 0; }
tbody tr:last-child td:first-child { border-bottom-left-radius: 14px; }
tbody tr:last-child td:last-child { border-bottom-right-radius: 14px; }
tbody tr:hover { background: var(--row-hover); }
tbody tr.row-cursor { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
tbody td { padding: 16px; vertical-align: middle; }
td.name { min-width: 230px; }
.bname { font-size: 16px; font-weight: 650; letter-spacing: -.005em; color: var(--ink); }
td.name small { display: block; font-size: 13px; color: var(--ink-faint); margin-top: 2px; font-weight: 400; }
.meta-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
td.cat, td.hq { font-size: 14px; color: var(--ink-soft); }

.star { background: none; border: 0; cursor: pointer; font-size: 19px; line-height: 1; color: var(--ink-faint); padding: 0 2px; transition: .15s; }
.star:hover { color: var(--accent); transform: scale(1.15); }
.star.on { color: var(--accent); }
.slcount { font-family: var(--mono); font-size: 9px; color: var(--accent); }

/* fit score */
.fit { display: inline-flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.fit b { font-family: var(--mono); font-weight: 600; font-size: 19px; line-height: 1; }
.fit .fitbar { display: inline-flex; gap: 3px; }
.fit .fitbar i { width: 9px; height: 4px; border-radius: 2px; background: var(--rule-2); }
.fit-5 b, .fit-4 b { color: var(--good); } .fit-5 .fitbar i.on, .fit-4 .fitbar i.on { background: var(--good); }
.fit-3 b { color: var(--warn); } .fit-3 .fitbar i.on { background: var(--warn); }
.fit-2 b, .fit-1 b { color: var(--bad); } .fit-2 .fitbar i.on, .fit-1 .fitbar i.on { background: var(--bad); }
.fit-0 b { color: var(--ink-faint); }

/* pills / chips — bigger, calmer */
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; padding: 3px 10px; border-radius: 7px; border: 1px solid var(--rule-2); background: var(--surface-2); color: var(--ink-soft); white-space: nowrap; }
.tag-good { color: var(--good); border-color: color-mix(in srgb, var(--good) 35%, transparent); background: var(--good-soft); }
.tag-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: var(--warn-soft); }
.tag-bad  { color: var(--bad);  border-color: color-mix(in srgb, var(--bad) 35%, transparent);  background: var(--bad-soft); }
.status-fresh { color: var(--good); border-color: color-mix(in srgb, var(--good) 32%, transparent); background: var(--good-soft); }
.status-passed { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 32%, transparent); background: var(--bad-soft); }
.status-existing-client, .status-client { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 32%, transparent); background: var(--accent-soft); }
.status-likely-round1-profile { color: var(--warn); background: var(--warn-soft); }

.prov { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; font-weight: 600; padding: 2px 6px; border-radius: 5px; border: 1px solid var(--rule-2); color: var(--ink-faint); }
.prov-new-research { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.prov-client { color: var(--good); border-color: color-mix(in srgb, var(--good) 30%, transparent); }
.prov-shortlist { color: #fff; background: var(--accent); border-color: var(--accent); }
.rel { color: var(--accent); font-size: 13px; }
.tierbadge { font-family: var(--mono); font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 7px; border: 1px solid var(--rule-2); color: var(--ink-faint); }
.tier-1 { color: var(--accent); border-color: var(--accent); }
.cstat { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: .03em; }
.cstat-grew { color: var(--good); background: var(--good-soft); }
.cstat-churned { color: var(--bad); background: var(--bad-soft); }
.cstat-reduced { color: var(--warn); background: var(--warn-soft); }
.cstat-flat { color: var(--ink-faint); background: var(--surface-2); }
.aov { font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); }

/* export menu */
.export-wrap { position: relative; }
.export-pop { position: absolute; right: 0; top: calc(100% + 8px); background: var(--surface); border: 1px solid var(--rule-2); border-radius: 11px; box-shadow: var(--shadow-lg); padding: 6px; min-width: 210px; z-index: 50; display: flex; flex-direction: column; }
.export-pop[hidden] { display: none; }
.export-pop button { text-align: left; background: none; border: 0; padding: 10px 13px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--ink); }
.export-pop button:hover { background: var(--surface-2); color: var(--accent); }

/* expand control in resultbar */
.resultbar-right { display: inline-flex; align-items: center; gap: 16px; }
.linkbtn { background: none; border: 0; cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 600; padding: 0; }
.linkbtn:hover { text-decoration: underline; }

/* inline help tooltip */
.help { display: inline-flex; align-items: center; justify-content: center; cursor: help; color: var(--ink-faint); font-size: 12px; font-weight: 400; margin-left: 5px; position: relative; }
.help:hover { color: var(--accent); }
.help::after {
  content: attr(data-tip); position: absolute; left: 50%; transform: translateX(-50%); top: 165%;
  width: 270px; white-space: pre-line; text-align: left; text-transform: none; letter-spacing: 0;
  font-family: var(--sans); font-weight: 400; font-size: 12.5px; line-height: 1.55;
  background: var(--ink); color: var(--surface); padding: 11px 13px; border-radius: 9px;
  box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 60;
}
.help:hover::after { opacity: 1; }

/* sortable headers */
thead th[data-sort] { cursor: pointer; user-select: none; }
thead th[data-sort]:hover { color: var(--ink); }
thead th.sorted { color: var(--accent); }
.sarrow { font-size: 9px; }

/* active-filter chips */
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.active-filters:empty { display: none; }
.fchip { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-soft); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: .14s; }
.fchip:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.fchip.clearall { background: transparent; color: var(--ink-soft); border-color: var(--rule-2); }
.fchip.clearall:hover { color: var(--ink); border-color: var(--ink-faint); }

/* outreach pipeline stage */
.stage { font-size: 12.5px; font-weight: 600; border: 1px solid var(--rule-2); border-radius: 8px; padding: 6px 9px; background: var(--surface-2); color: var(--ink-soft); cursor: pointer; max-width: 132px; }
.stage:focus { outline: none; border-color: var(--accent); }
.stage-none { color: var(--ink-faint); background: transparent; }
.stage-todo { color: var(--ink); background: var(--surface-2); }
.stage-contacted { color: #2563c9; background: rgba(37, 99, 201, .10); border-color: rgba(37, 99, 201, .4); }
html[data-theme="dark"] .stage-contacted { color: #79a8f2; background: rgba(121, 168, 242, .12); border-color: rgba(121, 168, 242, .4); }
.stage-talks { color: var(--warn); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.stage-hold { color: var(--ink-faint); background: var(--surface-2); }
.stage-passed { color: var(--bad); background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.stage-meta { font-size: 12px; color: var(--ink-faint); margin-top: 8px; font-family: var(--mono); }
.rb-sub { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-faint); font-size: 11px; }

/* peek (inline preview) */
.peek-toggle { background: none; border: 0; cursor: pointer; color: var(--ink-faint); font-size: 11px; line-height: 1; margin-right: 8px; padding: 2px; transition: transform .15s, color .15s; display: inline-block; }
.peek-toggle:hover { color: var(--accent); }
.peek-toggle.open { transform: rotate(90deg); color: var(--accent); }
.peek-row { animation: none !important; }
.peek-row > td { padding: 0 18px 18px 60px; background: var(--row-hover); border-bottom: 1px solid var(--rule); }
.peek { border-left: 2px solid var(--accent); padding: 4px 0 4px 18px; }
.peek-why { margin: 10px 0 12px; font-size: 15px; line-height: 1.65; color: var(--ink); max-width: 96ch; }
.peek-facts { display: flex; flex-wrap: wrap; gap: 9px 26px; margin-bottom: 10px; }
.pf { font-size: 13.5px; color: var(--ink-soft); }
.pf-k { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); margin-right: 6px; }
.peek-verdict { font-size: 14px; color: var(--ink-soft); margin: 8px 0; }
.peek-verdict b { color: var(--ink); }
.peek-src { font-size: 12.5px; margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.peek-src-k { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.peek-src a { font-family: var(--mono); font-size: 12px; }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; margin-top: 10px; }
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 20px; cursor: pointer; transition: .18s; box-shadow: var(--shadow); }
.card:hover { border-color: var(--rule-2); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.card-top { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.card h3 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -.01em; }
.card .sub { color: var(--ink-faint); font-size: 13px; margin: 4px 0 10px; }
.card .rationale { font-size: 14px; color: var(--ink-soft); margin: 10px 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; align-items: center; }

.empty { text-align: center; color: var(--ink-faint); padding: 80px 20px; font-size: 15px; }

/* ───────────── Drawer ───────────── */
.drawer-overlay { position: fixed; inset: 0; background: rgba(20,23,30,.4); backdrop-filter: blur(2px); z-index: 40; animation: fade .2s ease; }
.drawer { position: fixed; top: 0; right: 0; height: 100vh; width: min(620px, 96vw); z-index: 41; background: var(--surface); border-left: 1px solid var(--rule-2); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; animation: slidein .26s cubic-bezier(.2,.7,.2,1); }
.drawer[hidden], .drawer-overlay[hidden] { display: none; }
.drawer-head { padding: 26px 28px 18px; border-bottom: 1px solid var(--rule); display: flex; align-items: start; gap: 14px; }
.drawer-head h2 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 27px; letter-spacing: -.02em; line-height: 1.08; }
.drawer-head .dsub { color: var(--ink-faint); font-size: 13.5px; margin-top: 7px; }
.drawer-close { margin-left: auto; background: var(--surface); border: 1px solid var(--rule-2); color: var(--ink-soft); width: 36px; height: 36px; border-radius: 9px; cursor: pointer; font-size: 14px; flex: none; transition: .15s; }
.drawer-close:hover { color: var(--accent); border-color: var(--accent); }
.drawer-body { overflow-y: auto; padding: 24px 28px 80px; }
.field { margin: 0 0 22px; }
.field h5 { margin: 0 0 7px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.field p { margin: 0; font-size: 15px; color: var(--ink-soft); line-height: 1.65; }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 0; margin: 16px 0 22px; font-size: 14.5px; }
.kv dt { color: var(--ink-faint); padding: 9px 0; border-top: 1px solid var(--rule); }
.kv dd { margin: 0; padding: 9px 0; border-top: 1px solid var(--rule); color: var(--ink); }
.sources { margin: 8px 0 0; padding-left: 18px; }
.sources li { margin: 4px 0; word-break: break-all; font-size: 13px; font-family: var(--mono); }
.review-box { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 12px; padding: 18px; margin: 24px 0 0; }
.review-box h5 { margin: 0 0 12px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.review-row { display: flex; align-items: center; gap: 18px; margin: 10px 0; flex-wrap: wrap; }
.review-row label { font-size: 13.5px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 7px; }
.review-row select { background: var(--surface); border: 1px solid var(--rule-2); border-radius: 7px; padding: 6px 9px; color: var(--ink); }
.review-box textarea { width: 100%; margin-top: 10px; background: var(--surface); border: 1px solid var(--rule-2); border-radius: 9px; padding: 12px; color: var(--ink); resize: vertical; min-height: 76px; font-family: var(--sans); font-size: 14.5px; }
.review-box textarea:focus { outline: none; border-color: var(--accent); }
.rating { display: inline-flex; gap: 2px; }
.rating .star { font-size: 21px; }
.team { display: flex; flex-direction: column; gap: 9px; }
.tr-row { border: 1px solid var(--rule); border-radius: 9px; padding: 11px 13px; background: var(--surface-2); }
.tr-who { font-weight: 650; font-size: 14px; }
.tr-meta { display: flex; gap: 10px; align-items: center; margin-top: 4px; font-size: 12.5px; flex-wrap: wrap; }
.tr-sl { color: var(--accent); }
.tr-rate { color: var(--warn); letter-spacing: 1px; }
.tr-note { margin-top: 6px; font-size: 13.5px; color: var(--ink-soft); }

/* ───────────── Auth gate ───────────── */
.auth-gate { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: var(--bg); background-image: radial-gradient(130% 80% at 50% -20%, var(--accent-soft), transparent 55%); animation: fade .3s ease; }
.auth-gate[hidden] { display: none; }
.gate-card { width: min(430px, 92vw); padding: 26px 36px 34px; background: var(--surface); border: 1px solid var(--rule-2); border-top: 3px solid var(--accent); border-radius: 14px; box-shadow: var(--shadow-lg); text-align: center; }
.gate-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.gate-title { font-family: var(--serif); font-weight: 600; font-size: 40px; letter-spacing: -.02em; margin: 6px 0 4px; }
.gate-sub { color: var(--ink-soft); font-size: 14.5px; margin: 0 0 22px; }
.gate-msg { font-size: 13.5px; color: var(--ink); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 9px; padding: 11px 13px; margin-bottom: 18px; }
.gate-btn { width: 100%; padding: 14px 16px; border-radius: 10px; cursor: pointer; font-size: 15px; font-weight: 600; border: 1px solid var(--accent); background: var(--accent); color: #fff; transition: .18s; }
.gate-btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.gate-otp { display: flex; flex-direction: column; gap: 11px; }
.gate-otp input { width: 100%; padding: 13px 15px; border: 1px solid var(--rule-2); border-radius: 10px; background: var(--bg); color: var(--ink); text-align: center; font-size: 15px; }
.gate-otp input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ───────────── Motion ───────────── */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes slidein { from { transform: translateX(20px); opacity: .4; } to { transform: none; opacity: 1; } }
tbody tr { animation: rise .4s cubic-bezier(.2,.7,.2,1) both; }
tbody tr:nth-child(1){animation-delay:.02s} tbody tr:nth-child(2){animation-delay:.04s} tbody tr:nth-child(3){animation-delay:.06s} tbody tr:nth-child(4){animation-delay:.08s} tbody tr:nth-child(5){animation-delay:.10s} tbody tr:nth-child(6){animation-delay:.12s} tbody tr:nth-child(7){animation-delay:.14s} tbody tr:nth-child(8){animation-delay:.16s}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ───────────── Responsive ───────────── */
@media (max-width: 820px) {
  .mast-inner, .dealsheet, .target-panel, .statstrip, .controls, main { padding-left: 18px; padding-right: 18px; }
  .controls-row { flex-direction: column; align-items: stretch; }
  table { border-radius: 12px; }
  thead { display: none; }
  table, tbody, tr, td { display: block; width: 100%; }
  tbody tr { padding: 8px 4px; }
  tbody td { padding: 5px 16px; }
  td.name { min-width: 0; }
}