/* Option 10: selection leads; placement color stays deliberately quiet. */
:root{--bg:#141b21;--panel:#202b33;--line:#3b4852;--muted:#aebcc6;--text:#f1f3f5;--gold:#d4c3a1;--green:#a7c9ba;--red:#e2a8a5}
body{background:var(--bg);color:var(--text)}
.sidebar{background:#11181e}.nav-label{color:var(--muted)}.topbar,.table-head{background:#19232b}
.heading{padding-bottom:18px}.heading h1{font-size:40px;line-height:1.1;letter-spacing:-1.5px}.heading h1 em{color:#b8daed}
.heading .subtitle{max-width:570px;line-height:1.7}
.bankroll-strip,.stats,.pending-panel,.live-panel,.history-panel{background:var(--panel)}
.system-chip.checked,.nav-link.active{background:#d4c3a10e;border-color:#d4c3a14d}
.signal-row{padding-top:20px;padding-bottom:20px;transition:background .2s,border-color .2s}
.pending-panel .signal-row{border-top:1px solid #e8eff07a}
.phase-soon{border-left:3px solid #c7ab7b}
.signal-row .market{padding:11px 12px;background:#b8daed0c;border-left:2px solid #8cafc4;border-radius:2px;min-width:0}
.signal-row .market strong{font-size:20px;font-weight:650;line-height:1.25;letter-spacing:-.35px;color:#c4e5f7;overflow-wrap:break-word;word-break:normal}
.signal-row .market small{display:block;font-size:9px;color:var(--muted);margin-top:7px;text-transform:capitalize}
.signal-row .fixture strong{font-size:13px;line-height:1.5;color:#e5ebef}
.signal-row .risk strong{font:600 24px/1.1 Arial,sans-serif;letter-spacing:-.8px;color:#f1f3f5}
.signal-row .amount-note{font-size:9px;margin-top:6px;color:var(--muted)}
.signal-row .placement-btn{min-height:42px;border:1px solid #aa956d;background:#d4c3a11a;color:#e1d0af;border-radius:5px;font-size:11px;font-weight:600;gap:9px;transition:background .18s,border-color .18s,color .18s}
.signal-row .placement-btn:hover{background:#d4c3a133;border-color:#d4c3a1;color:#f4e5c7}
.signal-row .placement-btn>span{font-size:16px;font-weight:400;line-height:1}
.signal-row.is-placed{background:#79848d0e;border-left:3px solid #78838c}
.signal-row.is-placed .placement-btn{background:#454c52;color:#f0f2f4;border-color:#69737b}
.signal-row.is-placed .placement-btn>span{display:grid;place-items:center;background:#d6dde3;color:#293039;border-radius:50%;width:19px;height:19px;font-size:12px;font-weight:700}
.signal-row.is-placed .placement-btn:hover{background:#555e66;border-color:#8c98a1;color:#fff}
.signal-row.is-placed .amount-note{color:#d2dbe2}.signal-row.is-placed .market{border-left-color:#6d8798;background:#b8daed07}
.signal-row .edit-placement{font-size:10px;color:#b8c6d0;margin-top:9px}
.signal-row .placed-detail{color:#b8c4ce;line-height:1.5}
.signal-row .placement-btn:disabled{opacity:1}.signal-row .placement-btn:focus-visible{outline:2px solid #c4e5f7;outline-offset:3px}
.soon-heading{background:#c7ab7b0a;border-color:#c7ab7b55}.soon-heading>span:first-child,.soon-label{color:#d4c3a1}
.soon-heading .urgency-count,.system-chip .urgency-count{background:#c98f6c;color:#1c2024}
.table-head{color:#b6c3cd;letter-spacing:1px}.section-note{color:var(--muted)}
.history-panel .signal-row{padding-top:17px;padding-bottom:17px}.history-panel .market strong{font-size:18px}
@media(min-width:1550px){.signal-row .market strong{font-size:23px}}
@media(max-width:1200px) and (min-width:981px){.signal-row .market{padding:10px 8px}.signal-row .market strong{font-size:18px}.signal-row .placement-btn{font-size:10px;padding:8px 5px}}
@media(max-width:980px){.heading h1{font-size:36px}.signal-row .market strong{font-size:21px}.signal-row .market{align-self:stretch}.signal-row .placement-cell{align-self:center}.signal-row .risk strong{font-size:28px}}
@media(max-width:600px){.heading h1{font-size:32px}.heading .edition{display:none}.signal-row .market{padding:11px 8px}.signal-row .market strong{font-size:20px}.signal-row .fixture strong{font-size:14px}}
@media(prefers-reduced-motion:reduce){.signal-row,.signal-row .placement-btn{transition:none}}

/* A restrained warm halo before recording; a cool gray veil afterwards. */
.signal-row.is-unplaced .placement-btn{
  border-color:#c18b65;background:#d993571b;color:#efd4b8;
  box-shadow:0 0 14px #ee8c3d21,inset 0 0 10px #ee8c3d0a;
}
.signal-row.is-unplaced .placement-btn:hover{
  border-color:#e4a16c;background:#d993572b;color:#ffe4cb;
  box-shadow:0 0 20px #ee8c3d38,inset 0 0 12px #ee8c3d12;
}
.signal-row .market{position:relative;isolation:isolate;overflow:visible}
.signal-row.is-placed .market{background:transparent;border-left-color:#77818a}
.signal-row.is-placed .market::before{
  content:"";position:absolute;inset:0;background:#343d45;opacity:.85;z-index:-1;pointer-events:none;
}
.signal-row.is-placed .market strong{color:#e0e7ec;opacity:.85}
.signal-row.is-placed .market small{color:#c4ced7;opacity:.85}
.signal-row .recorded-status{display:block;margin-top:10px;color:#c2cdd5;font-size:9px;line-height:1.5;letter-spacing:.15px}
.signal-row.is-placed .placement-btn{opacity:.85;background:#31373d;border-color:#515a62;color:#c1c2c4;box-shadow:none}
.signal-row.is-placed .placement-btn>span{background:#abb1b6;color:#21262e}
.signal-row.is-placed .placement-btn:hover{opacity:1;background:#394249;color:#ccc;box-shadow:none}
.signal-row.just-recorded .placement-btn{animation:record-button .65s ease-out}
.signal-row.just-recorded .market{animation:record-selection .65s ease-out}
@keyframes record-button{from{opacity:1;box-shadow:0 0 18px #ee8c3d38;background:#d993572b;border-color:#c18b65}to{opacity:.85;box-shadow:none;background:#31373d;border-color:#515a62}}
@keyframes record-selection{from{background:#b8daed16}to{background:transparent}}
@media(prefers-reduced-motion:reduce){.signal-row.just-recorded .placement-btn,.signal-row.just-recorded .market{animation:none}}

/* Instant "I placed it" feedback — Saving only; Placed waits for backend. */
.signal-row .placement-btn.is-saving{
  opacity:.92;cursor:wait;pointer-events:none;
  border-color:#aa956d;background:#d4c3a124;color:#e8dcc4;box-shadow:none;
}
.signal-row .placement-btn.is-saving>span.placement-spinner{
  display:inline-block;width:14px;height:14px;border-radius:50%;
  border:2px solid #e1d0af55;border-top-color:#e8dcc4;
  background:transparent;animation:placement-spin .7s linear infinite;
}
.signal-row .placement-inline-error{
  display:block;margin-top:7px;font-size:10px;line-height:1.4;color:#e2a8a5;
}
@media(max-width:600px){
  .signal-row .placement-btn.is-saving{font-size:10px;gap:7px}
  .signal-row .placement-btn.is-saving>span.placement-spinner{width:12px;height:12px}
}
@keyframes placement-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .signal-row .placement-btn.is-saving>span.placement-spinner{animation:none;border-color:#e8dcc4}
}

/* Cleaner signal cells: slightly larger system names, money only. */
.signal-row .system-tag{font-size:12px}
.signal-row .risk .amount-note,.signal-row .risk small{display:none}
.signal-row .risk.is-estimated .amount-note{display:block}
@media(max-width:1200px){.signal-row .system-tag{font-size:11px}}

/* Match the selection size approved in the main signal room. */
.signal-row .market strong,.history-panel .signal-row .market strong{font-size:17px;font-weight:600;line-height:1.35;letter-spacing:normal}
@media(max-width:980px){.signal-row .market strong,.history-panel .signal-row .market strong{font-size:18px}}

/* Fine typography adjustments for the list prototype. */
.signal-row .odds strong{font-size:14px}
.signal-row .fixture strong{font-size:15.5px}
.signal-row .fixture small{font-size:11px}
@media(max-width:600px){.signal-row .fixture strong{font-size:16.5px}}

/* Pending, Live and History follow the page scrollbar on every viewport. */
.pending-scroll,
.live-panel #live-rows,
.history-panel #history-rows{max-height:none;height:auto;overflow:visible}

/* Recorded status belongs to the right edge of the selection. */
.signal-row .recorded-status{width:fit-content;max-width:90px;margin:10px 0 0 auto;padding:5px 7px;border:1px solid #9db5c44d;border-radius:4px;background:#b8daed0c;color:#d5e1e9;font-size:9px;font-weight:500;line-height:1.4;text-align:center;letter-spacing:0}
@media(min-width:1400px){
 .signal-row.is-placed .market{display:grid;grid-template-columns:minmax(0,1fr) 76px;column-gap:12px;align-items:start}
 .signal-row.is-placed .market strong{grid-column:1;grid-row:1}
 .signal-row.is-placed .market small{grid-column:1;grid-row:2}
 .signal-row.is-placed .recorded-status{grid-column:2;grid-row:1/span 2;align-self:center;justify-self:end;margin:0;max-width:76px}
}
.signal-row.phase-settled .recorded-status{color:#c4cdd4;background:#ffffff05;border-color:#a7b5bf33}

/* Settled outcomes: the website's green/red wash across the entire selection. */
.history-panel .signal-row.result-win{--result-color:#b1e7c3;background:linear-gradient(90deg,#34805847 0%,#34805833 78%,#34805814 100%);border-left:4px solid #7eba96}
.history-panel .signal-row.result-loss{--result-color:#ffc1ba;background:linear-gradient(90deg,#8e3a4057 0%,#8e3a4038 78%,#8e3a401c 100%);border-left:4px solid #ce8c88}
.history-panel .signal-row.result-push,.history-panel .signal-row.result-void{--result-color:#d5dde5;background:#ffffff06;border-left:4px solid #8998a4}
.history-panel .signal-row.result-win:hover{background:linear-gradient(90deg,#34805860 0%,#34805840 78%,#3480581c 100%)}
.history-panel .signal-row.result-loss:hover{background:linear-gradient(90deg,#8e3a406b 0%,#8e3a4047 78%,#8e3a4024 100%)}
.history-panel .signal-row .market{border-color:var(--result-color);background:#ffffff05}
/* Selection left rail uses strategy accent (shared mapping below) — WON/LOST must not override it. */
.history-panel .signal-row .market::before{display:none}
.history-panel .signal-row .market strong{color:var(--result-color);opacity:1}
.history-panel .signal-row .market small{color:#cad5da;opacity:1}
.history-panel .signal-row .fixture small{color:#c0d1d0}
.history-panel .signal-row.result-loss .fixture small{color:#d3c5c8}
.settlement-result{display:flex;align-items:center;flex-wrap:wrap;gap:4px 9px;margin-top:16px;color:var(--result-color);font-family:Arial,sans-serif}

.settlement-units{font-size:18px;font-weight:750;letter-spacing:-1px;line-height:1.15;white-space:nowrap}
.settlement-caption{display:block;font-size:7px;letter-spacing:1px;line-height:1.5;flex-basis:100%;color:#c2ced2}
@media(min-width:1400px){
 .history-panel .signal-row .fixture{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:20px;align-items:center}
 .settlement-result{display:grid;justify-items:center;gap:7px;margin:0;padding:0 0 0 14px;border-left:1px solid #ffffff20}
 
 .settlement-units{font-size:22px}
 .settlement-caption{font-size:7px;letter-spacing:.8px}
}
@media(max-width:600px){.settlement-units{font-size:20px}.history-panel .signal-row{padding-top:21px;padding-bottom:21px}}

/* Recording tightens an active row, rather than adding vertical bulk. */
.signal-row.is-placed:not(.phase-settled){padding-top:6px;padding-bottom:6px;min-height:0}
.signal-row.is-placed:not(.phase-settled) .placed-detail{display:none}
.signal-row.is-placed:not(.phase-settled) .recorded-status{margin-top:5px;padding:2px 5px;line-height:1.3}
@media(min-width:1400px){.signal-row.is-placed:not(.phase-settled) .recorded-status{margin:0;padding:5px 7px}}

/* Profit stamps float over the stake without increasing the row height. */
.history-panel .risk.has-personal-result{position:relative}
.history-panel .risk.has-personal-result .personal-result{display:block;position:absolute;right:-8px;top:calc(8mm - 2.1px);z-index:1;color:var(--result-color);font:750 28px/38.4px Arial,sans-serif;letter-spacing:-1.3px;white-space:nowrap;transform:translateY(-72%) rotate(17deg);transform-origin:50% 75%;pointer-events:auto}
.history-panel .risk.has-personal-result>strong{display:block;font-size:23px;opacity:.72;line-height:30px;margin-top:0}
.history-panel .risk.has-personal-result .personal-result.positive{color:#52ce85}
.history-panel .risk.has-personal-result .personal-result.positive{right:calc(-8px - 3mm)}
.history-panel .risk.has-personal-result .personal-result.negative{color:#ff8878}
.history-panel .risk.has-personal-result .personal-result.neutral{color:#d5dde5}
@media(max-width:980px){.history-panel .risk.has-personal-result .personal-result{transform:translateY(-110%) rotate(17deg)}}
@media(max-width:980px){.history-panel .risk.has-personal-result>strong{text-align:left}}
.history-panel .signal-row.is-placed .market{display:block}
.history-panel .signal-row.is-placed .market small{padding-right:65px}
.history-panel .signal-row.is-placed .recorded-status{position:absolute;right:8px;bottom:8px;margin:0;padding:2px 5px;line-height:1.3}
.history-panel .signal-row .placed-detail{display:none}
.history-panel .signal-row.is-placed{padding-top:11px;padding-bottom:11px}
@media(min-width:981px){.history-panel .table-head,.history-panel .signal-row{grid-template-columns:126px minmax(175px,1.5fr) minmax(120px,1fr) 72px 145px 128px}}
@media(min-width:1550px){.history-panel .table-head,.history-panel .signal-row{grid-template-columns:145px minmax(240px,1.6fr) minmax(150px,1fr) 85px 160px 140px}}
@media(min-width:981px) and (max-width:1200px){.history-panel .table-head,.history-panel .signal-row{grid-template-columns:100px minmax(140px,1.3fr) minmax(100px,1fr) 64px 125px 105px}}

/* Amount-column alignment; the stamp counter-offset leaves its net drop at 3mm.
   Keep its anchor box stable while reducing the text, so rows don't grow. */
.signal-row>.risk,.table-head>span:nth-child(5){transform:translate(-6mm,-2mm)}
.risk-preview strong{font-size:24px}
@media(max-width:980px){.signal-row .risk strong{font-size:26px}.history-panel .risk.has-personal-result>strong{font-size:23px}}
@media(max-width:600px){.risk-preview strong{font-size:20px}}

/* Keep published stake units visible alongside the personal amount. */
.signal-row .risk .signal-units{display:block;margin-top:5px;font-size:11px;line-height:1.3;color:var(--muted);white-space:nowrap}

/* Shared strategy colors for the thin selection-left accent.
   Same mapping in Pending, Live, and Settled/History. WON/LOST never overrides it. */
:root {
  --strategy-ps: var(--ps, #d9bc80);
  --strategy-dd: var(--dd, #d796a5);
  --strategy-hr: var(--hr, #a8a0e9);
  --strategy-ms: var(--ms, #72c3aa);
  --strategy-lr: var(--lr, #6ec8f5); /* Live Room — electric sky; distinct from MS turquoise */
  --pending-ps: var(--strategy-ps);
  --pending-dd: var(--strategy-dd);
  --pending-hr: var(--strategy-hr);
  --pending-ms: var(--strategy-ms);
  --pending-lr: var(--strategy-lr);
  --pending-fixture-width: 3px;
  --pending-fixture-height: 20px;
  --pending-fixture-gap: 9px;
  --pending-selection-width: 3px;
  --pending-row-rail-width: 0px; /* Optional: set to 4px. */
  --pending-row-rail-opacity: .4;
  --pending-tint: 3%; /* Optional: 0% disables the wash. */
}

/* One shared strategy → accent mapping (all three panels). */
.pending-panel .signal-row:has(.system-tag.premium-slate),
.live-panel .signal-row:has(.system-tag.premium-slate),
.history-panel .signal-row:has(.system-tag.premium-slate) { --strategy-accent: var(--strategy-ps); --pending-accent: var(--strategy-accent); }
.pending-panel .signal-row:has(.system-tag.divine-draws),
.live-panel .signal-row:has(.system-tag.divine-draws),
.history-panel .signal-row:has(.system-tag.divine-draws) { --strategy-accent: var(--strategy-dd); --pending-accent: var(--strategy-accent); }
.pending-panel .signal-row:has(.system-tag.highroller),
.live-panel .signal-row:has(.system-tag.highroller),
.history-panel .signal-row:has(.system-tag.highroller) { --strategy-accent: var(--strategy-hr); --pending-accent: var(--strategy-accent); }
.pending-panel .signal-row:has(.system-tag.multi-sport),
.live-panel .signal-row:has(.system-tag.multi-sport),
.history-panel .signal-row:has(.system-tag.multi-sport) { --strategy-accent: var(--strategy-ms); --pending-accent: var(--strategy-accent); }
.pending-panel .signal-row:has(.system-tag.live-room),
.live-panel .signal-row:has(.system-tag.live-room),
.history-panel .signal-row:has(.system-tag.live-room) { --strategy-accent: var(--strategy-lr); --pending-accent: var(--strategy-accent); }

/* Thin vertical line immediately left of SELECTION — strategy color in every section. */
.pending-panel .signal-row:has(.system-tag:is(.premium-slate,.divine-draws,.highroller,.multi-sport,.live-room)) .market,
.live-panel .signal-row:has(.system-tag:is(.premium-slate,.divine-draws,.highroller,.multi-sport,.live-room)) .market,
.history-panel .signal-row:has(.system-tag:is(.premium-slate,.divine-draws,.highroller,.multi-sport,.live-room)) .market {
  border-left-width: var(--pending-selection-width);
  border-left-color: var(--strategy-accent);
}

/* Pending-only: soft strategy tint, optional outer rail, fixture accent bar. */
.pending-panel .signal-row:has(.system-tag:is(.premium-slate,.divine-draws,.highroller,.multi-sport,.live-room)) {
  position: relative;
  background: color-mix(in srgb, var(--strategy-accent) var(--pending-tint), transparent);
}
.pending-panel .signal-row:has(.system-tag:is(.premium-slate,.divine-draws,.highroller,.multi-sport,.live-room))::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--pending-row-rail-width); background: var(--strategy-accent);
  opacity: var(--pending-row-rail-opacity); pointer-events: none;
}
.pending-panel .signal-row:has(.system-tag:is(.premium-slate,.divine-draws,.highroller,.multi-sport,.live-room)) .fixture-text > strong {
  position: relative; padding-left: calc(var(--pending-fixture-width) + var(--pending-fixture-gap));
  overflow-wrap: anywhere;
}
.pending-panel .signal-row:has(.system-tag:is(.premium-slate,.divine-draws,.highroller,.multi-sport,.live-room)) .fixture-text > strong::before {
  content: ""; position: absolute; left: 0; top: .15em;
  width: var(--pending-fixture-width); height: var(--pending-fixture-height);
  border-radius: 2px; background: var(--strategy-accent); pointer-events: none;
}

/* Allow the accent gutter and long club names to fit narrow mobile grids. */
.pending-panel .signal-row:has(.system-tag:is(.premium-slate,.divine-draws,.highroller,.multi-sport,.live-room)) .fixture { min-width: 0; }
/* 2026-10-25: placed cards (wide screens) - the open strategy source and the sport label
   shared grid row 2 and overlapped. Source on row 2, sport on row 3, status spans all. */
@media(min-width:1400px){
 .signal-row.is-placed .market .selection-line{grid-column:1;grid-row:1}
 .signal-row.is-placed .market small.signal-source-detail{grid-column:1;grid-row:2}
 .signal-row.is-placed .market small.sport-label{grid-column:1;grid-row:3}
 .signal-row.is-placed .market .recorded-status{grid-column:2;grid-row:1/span 3}
}