/* ============================================================================
TARA — S44 skin: TERMINAL PRO — Phase 3a (core VIEWS inside #main, CSS-only).
Visual truth: ../S43-login-previews/04-terminal-improved.html #scr-* screens
(phosphor night tokens, framed panels, mono type, square corners, dashed
row rules, amber/red/win semantics). Palette literals mirror Phase-1
skin-terminal.css and Phase-2 skin-terminal-shell.css so gate + shell +
views read as ONE design.
Scope oath: every rule lives under html[data-ui="terminal"] and inside
#main / #modalBg / #toast ONLY. #gate, .gp-*, #sidebar, body are owned by
the Phase-1/2 files and are NOT touched here.
CSS only — markup from js/app.js untouched. Verified against app.js:
result coloring = .green/.red (no .plus/.minus classes exist), feed/list
rows = .trow (helper fn is sigRow — no .sigrow class), stat cards =
class="card stat", S43 pills = .pill with INLINE hsl backgrounds
(kept — recolor-only rule: base pill skin below never sets background,
so tf/margin/mode hues stay untouched), select checkboxes = .sig-chk,
feed columns = .pub-cols/.pub-col/.pub-col-h, modal = #modalBg > .modal
(appended to , outside #app — restyled here in its own scope).
No backdrop-filter anywhere in this file (weak GPU); existing blurs are
killed inside the scope. New keyframes prefixed tv-; the only infinite
animation added is a 1-em title cursor (opacity steps, cheap) and it is
disabled under prefers-reduced-motion.
========================================================================== */
/* ==========================================================================
0 · TOKENS — night phosphor (same literals as --t-/--tsh- files) + a
remap of the neutral-layer vars that app.js uses in INLINE styles
(var(--primary), var(--green-hi), var(--border), var(--g1)…). Remapping
them inside this scope is what makes inline-styled bits (conf colors,
leaderboard "आप" tint, rules markers, nextsig frame) go phosphor without
touching a byte of JS. THEMES persistence (localStorage theme keys) is
untouched — this is presentation-layer only, active only under data-ui.
========================================================================== */
html[data-ui="terminal"] #main,
html[data-ui="terminal"] #modalBg,
html[data-ui="terminal"] #toast{
/* skin tokens */
--tv-acc:#22c55e; --tv-acc-rgb:34,197,94;
--tv-amber:#fbbf24; --tv-amber-rgb:251,191,36;
--tv-red:#ef4444; --tv-red-rgb:239,68,68;
--tv-win:#22c55e; --tv-win-rgb:34,197,94;
--tv-bg:#010402; --tv-bg2:#020705; --tv-panel:#040b06; --tv-panel2:#08130b;
--tv-text:color-mix(in srgb,#22c55e 30%,#eafcef 70%);
--tv-dim:color-mix(in srgb,#22c55e 42%,#75857a 58%);
--tv-faint:color-mix(in srgb,#22c55e 30%,#414f47 70%);
--tv-line:rgba(34,197,94,.32); --tv-line2:rgba(34,197,94,.14);
--tv-glow:0 0 10px rgba(34,197,94,.45);
--tv-mono:ui-monospace,Menlo,Monaco,'Cascadia Mono','Courier New',monospace;
/* neutral-layer remap (base styles.css vars consumed by views + inline styles) */
--bg:#010402; --bg2:#020705;
--primary:#22c55e; --primary2:#16a34a; --primary-hi:#86efac; --accent:#22c55e;
--primary-bg:rgba(34,197,94,.16); --ring:rgba(34,197,94,.40);
--violet:#22c55e; --violet-hi:#86efac; --cyan:#22c55e; --magenta:#86efac;
--sapphire:#22c55e; --sky:#22c55e; --ice:#86efac;
--g1:#22c55e; --g2:#16a34a; --g3:#86efac;
--glow:rgba(34,197,94,.45);
--green:#22c55e; --green-hi:#6ee7a0; --green-soft:#16a34a; --green-bg:rgba(34,197,94,.12);
--red:#ef4444; --red-hi:#f87171; --red-soft:#ef4444; --red-bg:rgba(239,68,68,.12);
--yellow:#fbbf24; --blue:#22d3ee;
--text-hi:#eafcef; --text:color-mix(in srgb,#22c55e 30%,#eafcef 70%);
--text-dim:color-mix(in srgb,#22c55e 42%,#75857a 58%);
--muted:color-mix(in srgb,#22c55e 30%,#414f47 70%);
--glass:rgba(4,11,6,.85); --glass-2:rgba(34,197,94,.08);
--card:#040b06; --card2:#08130b;
--border:rgba(34,197,94,.14); --border-strong:rgba(34,197,94,.32);
--radius:2px;
--shadow:inset 0 0 40px rgba(34,197,94,.03);
--shadow-lg:0 0 18px rgba(34,197,94,.20);
--aura1:rgba(34,197,94,.08); --aura2:rgba(34,197,94,.05); --aura3:rgba(34,197,94,.04);
}
/* base typography inside the scope (modal/toast sit outside #app, so the
Phase-2 #app font rule does not reach them) */
html[data-ui="terminal"] #main{font-family:var(--tv-mono)}
html[data-ui="terminal"] #modalBg,
html[data-ui="terminal"] #toast{font-family:var(--tv-mono);color:var(--tv-text)}
html[data-ui="terminal"] #modalBg ::selection,
html[data-ui="terminal"] #main ::selection{background:rgba(var(--tv-acc-rgb),.35);color:var(--tv-text)}
html[data-ui="terminal"] #modalBg :focus-visible{outline:2px solid var(--tv-acc);outline-offset:2px}
html[data-ui="terminal"] #main .num,
html[data-ui="terminal"] #modalBg .num{font-variant-numeric:tabular-nums}
/* kill every glass blur the base sheet puts inside this scope (weak GPU) */
html[data-ui="terminal"] #main .card,
html[data-ui="terminal"] #main .stat,
html[data-ui="terminal"] #main .tile,
html[data-ui="terminal"] #main .chips,
html[data-ui="terminal"] #main .seg,
html[data-ui="terminal"] #main details.exp,
html[data-ui="terminal"] #main .sig-card,
html[data-ui="terminal"] #main .btn,
html[data-ui="terminal"] #main .gen-progress,
html[data-ui="terminal"] #modalBg,
html[data-ui="terminal"] #modalBg .modal,
html[data-ui="terminal"] #modalBg .btn,
html[data-ui="terminal"] #toast{backdrop-filter:none;-webkit-backdrop-filter:none}
/* ==========================================================================
1 · PAGE HEADERS — "> TITLE" (Phase-2 adds the prompt) + blinking block
cursor, dim letterspaced sub-line (truth: h1 + .ssub)
========================================================================== */
html[data-ui="terminal"] #main .page-h::after{
content:"";display:inline-block;width:.5em;height:.85em;margin-left:7px;
background:var(--tv-acc);box-shadow:var(--tv-glow);vertical-align:-2px;
animation:tv-blink 1.05s steps(1) infinite;
}
@keyframes tv-blink{50%{opacity:0}}
html[data-ui="terminal"] #main .page-sub{
color:var(--tv-dim);font-size:12.5px;letter-spacing:.05em;
}
/* ==========================================================================
2 · CARDS / STATS / TILES — framed panels with corner glyphs (truth .fr).
Corner glyphs are pure box-drawing characters (decoration, no words).
.stat's base blob (::before) and hover-shadow (::after) are fully reset
here because statCard() emits class="card stat".
========================================================================== */
html[data-ui="terminal"] #main .card,
html[data-ui="terminal"] #main .stat{
position:relative;overflow:visible;
border:1px solid var(--tv-line2);border-radius:8px; /* S60-13 owner: edges थोड़े rounded */
background:linear-gradient(180deg,rgba(var(--tv-acc-rgb),.05),rgba(var(--tv-acc-rgb),.012) 45%,transparent) var(--tv-panel);
box-shadow:inset 0 0 40px rgba(var(--tv-acc-rgb),.03);
transition:border-color .18s;
}
html[data-ui="terminal"] #main .card:hover,
html[data-ui="terminal"] #main .stat:hover{border-color:var(--tv-line);transform:none}
/* corner glyphs — full reset of .stat's decorative pseudos, then the frame */
html[data-ui="terminal"] #main .card::before,
html[data-ui="terminal"] #main .stat::before{
content:"\250C";display:block;position:absolute;top:-9px;left:-5px;right:auto;bottom:auto;
width:auto;height:auto;border-radius:0;filter:none;opacity:.9;pointer-events:none;
background:var(--tv-bg);color:var(--tv-acc);font-size:13px;line-height:1;
box-shadow:none;transition:none;
}
html[data-ui="terminal"] #main .card::after,
html[data-ui="terminal"] #main .stat::after{
content:"\2510";display:block;position:absolute;top:-9px;right:-5px;left:auto;bottom:auto;
width:auto;height:auto;border-radius:0;filter:none;opacity:.9;pointer-events:none;
background:var(--tv-bg);color:var(--tv-acc);font-size:13px;line-height:1;
box-shadow:none;transition:none;
}
html[data-ui="terminal"] #main .card:hover::after,
html[data-ui="terminal"] #main .stat:hover::after{opacity:.9}
/* stat internals — phosphor value with soft glow (truth .sval) */
html[data-ui="terminal"] #main .stat .t{
color:var(--tv-dim);letter-spacing:.15em;font-weight:400;position:relative;
}
html[data-ui="terminal"] #main .stat .v{
background:none;-webkit-background-clip:border-box;background-clip:border-box;
color:var(--tv-acc);-webkit-text-fill-color:var(--tv-acc);
font-family:var(--tv-mono);font-variant-numeric:tabular-nums;
text-shadow:0 0 11px rgba(var(--tv-acc-rgb),.35);
}
html[data-ui="terminal"] #main .stat.profit .v{
background:none;color:var(--tv-win);-webkit-text-fill-color:var(--tv-win);
text-shadow:0 0 11px rgba(var(--tv-win-rgb),.35);
}
html[data-ui="terminal"] #main .stat.loss .v{
background:none;color:var(--tv-red);-webkit-text-fill-color:var(--tv-red);
text-shadow:0 0 11px rgba(var(--tv-red-rgb),.35);
}
html[data-ui="terminal"] #main .stat .s{color:var(--tv-faint)}
/* tiles (truth panel-in-panel) — key/value readouts */
html[data-ui="terminal"] #main .tile,
html[data-ui="terminal"] #modalBg .tile{
background:var(--tv-panel2);border:1px solid var(--tv-line2);border-radius:2px;
}
html[data-ui="terminal"] #main .tile .k,
html[data-ui="terminal"] #modalBg .tile .k{
color:var(--tv-dim);letter-spacing:.14em;text-transform:uppercase;font-size:10.5px;
}
html[data-ui="terminal"] #main .tile .v,
html[data-ui="terminal"] #modalBg .tile .v{color:var(--tv-text)}
/* expandable cards (Trading-Rules checklist etc.) */
html[data-ui="terminal"] #main details.exp{
border:1px solid var(--tv-line2);border-radius:6px;background:var(--tv-panel); /* S60-13 */
}
html[data-ui="terminal"] #main details.exp summary{color:var(--tv-acc);letter-spacing:.06em}
html[data-ui="terminal"] #main details.exp[open]{border-color:var(--tv-line)}
/* ==========================================================================
3 · BUTTONS — bracket-key look shared with the shell (Phase-2 covers
#app; restated here so #modalBg buttons match). No layout changes;
.hidden's display:none!important still wins everywhere.
========================================================================== */
html[data-ui="terminal"] #main .btn,
html[data-ui="terminal"] #modalBg .btn{
border-radius:0;border:1px solid var(--tv-line);
background:transparent;color:var(--tv-acc);
font-family:var(--tv-mono);font-weight:700;letter-spacing:.07em;
box-shadow:none;
transition:background .18s,box-shadow .18s,transform .1s,color .18s,border-color .18s;
}
html[data-ui="terminal"] #main .btn:hover,
html[data-ui="terminal"] #modalBg .btn:hover{
background:rgba(var(--tv-acc-rgb),.13);box-shadow:var(--tv-glow);
border-color:var(--tv-line);transform:none;
}
html[data-ui="terminal"] #main .btn:active,
html[data-ui="terminal"] #modalBg .btn:active{transform:scale(.96)}
html[data-ui="terminal"] #main .btn.primary,
html[data-ui="terminal"] #modalBg .btn.primary{
background:rgba(var(--tv-acc-rgb),.16);color:var(--tv-acc);
border:1px solid var(--tv-line);
box-shadow:inset 0 0 18px rgba(var(--tv-acc-rgb),.12);
}
html[data-ui="terminal"] #main .btn.primary:hover,
html[data-ui="terminal"] #modalBg .btn.primary:hover{
background:rgba(var(--tv-acc-rgb),.22);filter:none;
box-shadow:inset 0 0 18px rgba(var(--tv-acc-rgb),.12),var(--tv-glow);
}
html[data-ui="terminal"] #main .btn.primary::after,
html[data-ui="terminal"] #modalBg .btn.primary::after{animation:none;content:none} /* infinite shine off */
/* semantic keys — win/loss outcome + danger buttons (truth .b.warn/.b.dng) */
html[data-ui="terminal"] #main .btn.green,
html[data-ui="terminal"] #modalBg .btn.green{
background:rgba(var(--tv-win-rgb),.14);color:var(--tv-win);
border:1px solid rgba(var(--tv-win-rgb),.55);box-shadow:none;
}
html[data-ui="terminal"] #main .btn.green:hover,
html[data-ui="terminal"] #modalBg .btn.green:hover{
background:rgba(var(--tv-win-rgb),.22);box-shadow:0 0 10px rgba(var(--tv-win-rgb),.35);
}
html[data-ui="terminal"] #main .btn.red,
html[data-ui="terminal"] #modalBg .btn.red{
background:rgba(var(--tv-red-rgb),.13);color:var(--tv-red);
border:1px solid rgba(var(--tv-red-rgb),.55);box-shadow:none;
}
html[data-ui="terminal"] #main .btn.red:hover,
html[data-ui="terminal"] #modalBg .btn.red:hover{
background:rgba(var(--tv-red-rgb),.20);box-shadow:0 0 10px rgba(var(--tv-red-rgb),.35);
}
html[data-ui="terminal"] #main .btn:disabled,
html[data-ui="terminal"] #modalBg .btn:disabled{opacity:.45;box-shadow:none;transform:none;cursor:not-allowed}
html[data-ui="terminal"] #main .btn.primary.is-scanning{filter:none;animation:tv-scanPulse 1.1s ease-in-out infinite}
@keyframes tv-scanPulse{50%{box-shadow:inset 0 0 18px rgba(var(--tv-acc-rgb),.12),0 0 16px rgba(var(--tv-acc-rgb),.6)}}
html[data-ui="terminal"] #main button.is-locked,
html[data-ui="terminal"] #main button.is-locked:hover{opacity:.5;filter:grayscale(.4);box-shadow:none}
/* ==========================================================================
4 · FORMS — prompt-style inputs (truth .in/.lbl), square, phosphor focus
========================================================================== */
html[data-ui="terminal"] #main label.f,
html[data-ui="terminal"] #modalBg label.f{
font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
color:var(--tv-dim);
}
html[data-ui="terminal"] #main input,
html[data-ui="terminal"] #main select,
html[data-ui="terminal"] #main textarea,
html[data-ui="terminal"] #modalBg input,
html[data-ui="terminal"] #modalBg select,
html[data-ui="terminal"] #modalBg textarea{
background:var(--tv-panel);border:1px solid var(--tv-line2);border-radius:2px;
color:var(--tv-text);caret-color:var(--tv-acc);
transition:border-color .15s,box-shadow .18s;
}
html[data-ui="terminal"] #main input:hover,
html[data-ui="terminal"] #main select:hover,
html[data-ui="terminal"] #main textarea:hover,
html[data-ui="terminal"] #modalBg input:hover,
html[data-ui="terminal"] #modalBg select:hover,
html[data-ui="terminal"] #modalBg textarea:hover{border-color:var(--tv-line)}
html[data-ui="terminal"] #main input:focus,
html[data-ui="terminal"] #main select:focus,
html[data-ui="terminal"] #main textarea:focus,
html[data-ui="terminal"] #modalBg input:focus,
html[data-ui="terminal"] #modalBg select:focus,
html[data-ui="terminal"] #modalBg textarea:focus{
outline:none;border-color:var(--tv-acc);
box-shadow:inset 0 0 16px rgba(var(--tv-acc-rgb),.12),0 0 0 1px rgba(var(--tv-acc-rgb),.32);
}
html[data-ui="terminal"] #main input::placeholder,
html[data-ui="terminal"] #main textarea::placeholder,
html[data-ui="terminal"] #modalBg input::placeholder{color:var(--tv-faint)}
html[data-ui="terminal"] #main select option,
html[data-ui="terminal"] #modalBg select option{background:#020705;color:var(--tv-text)}
/* checkbox accents (sig-chk / checklist / pcheck use accent-color via vars —
already phosphor from the remap; keep native size/logic untouched) */
html[data-ui="terminal"] #main input[type="checkbox"],
html[data-ui="terminal"] #modalBg input[type="checkbox"]{accent-color:var(--tv-acc)}
html[data-ui="terminal"] #main .checklist label{color:var(--tv-dim)}
html[data-ui="terminal"] #main .checklist label:has(input:checked){opacity:.55}
/* ==========================================================================
5 · CHIPS / SEG / PAIRS / SPINNER — selection controls; .on states stay
clearly distinct (contract rule 3). NO movement on .pairs hover (W15).
========================================================================== */
html[data-ui="terminal"] #main .chips{
background:var(--tv-panel);border:1px solid var(--tv-line2);border-radius:2px;
}
html[data-ui="terminal"] #main .chips button{
border-radius:0;color:var(--tv-dim);letter-spacing:.05em;
transition:color .18s,background .18s,box-shadow .18s;
}
html[data-ui="terminal"] #main .chips button:hover{color:var(--tv-text);background:rgba(var(--tv-acc-rgb),.07)}
html[data-ui="terminal"] #main .chips button.on{
color:var(--tv-acc);background:rgba(var(--tv-acc-rgb),.14);
box-shadow:inset 0 0 0 1px var(--tv-acc),0 0 10px rgba(var(--tv-acc-rgb),.35);
text-shadow:0 0 8px rgba(var(--tv-acc-rgb),.4);
}
/* OTC / LIVE market dots — recolor (amber = OTC, win = LIVE) + pulse killed
(weak GPU; static glow keeps the signal) */
html[data-ui="terminal"] #main #tabOtc::before{
background:var(--tv-amber);box-shadow:0 0 7px rgba(var(--tv-amber-rgb),.8);animation:none;
}
html[data-ui="terminal"] #main #tabLive::before{
background:var(--tv-win);box-shadow:0 0 7px rgba(var(--tv-win-rgb),.8);animation:none;
}
/* CALL / PUT segmented buttons (truth .dirb) */
html[data-ui="terminal"] #main .seg button,
html[data-ui="terminal"] #modalBg .seg button{
border-radius:0;border:1px solid var(--tv-line2);background:var(--tv-panel);
color:var(--tv-dim);letter-spacing:.06em;
}
html[data-ui="terminal"] #main .seg button.on-call,
html[data-ui="terminal"] #modalBg .seg button.on-call{
background:rgba(var(--tv-win-rgb),.12);border-color:rgba(var(--tv-win-rgb),.6);
color:var(--tv-win);box-shadow:0 0 14px rgba(var(--tv-win-rgb),.3);
text-shadow:0 0 8px rgba(var(--tv-win-rgb),.5);
}
html[data-ui="terminal"] #main .seg button.on-put,
html[data-ui="terminal"] #modalBg .seg button.on-put{
background:rgba(var(--tv-red-rgb),.12);border-color:rgba(var(--tv-red-rgb),.6);
color:var(--tv-red);box-shadow:0 0 14px rgba(var(--tv-red-rgb),.3);
text-shadow:0 0 8px rgba(var(--tv-red-rgb),.5);
}
html[data-ui="terminal"] #main .seg.res button.on,
html[data-ui="terminal"] #modalBg .seg.res button.on{
background:rgba(var(--tv-acc-rgb),.14);border-color:var(--tv-acc);color:var(--tv-acc);
box-shadow:0 0 10px rgba(var(--tv-acc-rgb),.35);
}
/* pair grid (payout-sorted, W15 money-risk: colors only — never movement,
base has no transform on these and none is added here) */
html[data-ui="terminal"] #main .pairs button{
border-radius:0;border:1px solid var(--tv-line2);background:var(--tv-panel);
color:var(--tv-dim);font-family:var(--tv-mono);
transition:border-color .25s,color .25s,background .25s,box-shadow .3s;
}
html[data-ui="terminal"] #main .pairs button:hover{
background:rgba(var(--tv-acc-rgb),.07);border-color:var(--tv-line);color:var(--tv-text);
}
html[data-ui="terminal"] #main .pairs button.on{
color:var(--tv-acc);border:1px solid var(--tv-acc);
background:rgba(var(--tv-acc-rgb),.13);
box-shadow:var(--tv-glow),inset 0 0 0 1px rgba(var(--tv-acc-rgb),.32);
}
html[data-ui="terminal"] #main .pairs button.on::before{
background:var(--tv-acc);box-shadow:0 0 7px rgba(var(--tv-acc-rgb),.8);
border-radius:0;animation:none; /* static phosphor block — position stays put */
}
html[data-ui="terminal"] #main .pairs button.on::after{
background:linear-gradient(120deg,transparent,rgba(var(--tv-acc-rgb),.32),transparent);
}
html[data-ui="terminal"] #main .pcheck label{
border-radius:0;border:1px solid var(--tv-line2);background:var(--tv-panel);color:var(--tv-dim);
}
html[data-ui="terminal"] #main .pcheck label.on{
border-color:var(--tv-acc);background:rgba(var(--tv-acc-rgb),.13);color:var(--tv-acc);
box-shadow:var(--tv-glow);
}
html[data-ui="terminal"] #main .pcheck label.on::before{
background:var(--tv-acc);box-shadow:0 0 7px rgba(var(--tv-acc-rgb),.8);
border-radius:0;animation:none;
}
/* time spinner (truth .spinbtn/.spinval) */
html[data-ui="terminal"] #main .spin .num{
background:var(--tv-panel);border:1px solid var(--tv-line2);border-radius:0;
color:var(--tv-acc);font-family:var(--tv-mono);
box-shadow:inset 0 0 20px rgba(var(--tv-acc-rgb),.08);
text-shadow:0 0 10px rgba(var(--tv-acc-rgb),.4);
}
html[data-ui="terminal"] #main .spin .sb{
border-radius:0;border:1px solid var(--tv-line2);background:var(--tv-panel);color:var(--tv-acc);
}
html[data-ui="terminal"] #main .spin .sb:hover{
background:rgba(var(--tv-acc-rgb),.12);border-color:var(--tv-acc);color:var(--tv-acc);
}
html[data-ui="terminal"] #main .spin .cap{color:var(--tv-faint);letter-spacing:.14em}
html[data-ui="terminal"] #main .spin .cap.live{color:var(--tv-acc)}
/* ==========================================================================
6 · ROWS / FEED — .trow is THE row unit (recent trades, history,
my-signals, leaderboard, published sigRow, generate results).
S43 pills keep their inline semantic backgrounds (recolor-only oath:
base .pill below sets NO background-color, no display, no order).
========================================================================== */
html[data-ui="terminal"] #main .trow{
border-radius:0;border-bottom:1px dashed var(--tv-line2);
transition:background .15s;
}
html[data-ui="terminal"] #main .trow:hover{background:rgba(var(--tv-acc-rgb),.06)}
html[data-ui="terminal"] #main .trow .meta .a{color:var(--tv-text);letter-spacing:.03em}
html[data-ui="terminal"] #main .trow .meta .m{color:var(--tv-faint)}
html[data-ui="terminal"] #main .trow .pl{font-variant-numeric:tabular-nums}
html[data-ui="terminal"] #main .trow .pl .stake{color:var(--tv-faint)}
/* direction icon — square W/L cell (truth .wl) */
html[data-ui="terminal"] #main .dirico{border-radius:0;font-family:var(--tv-mono)}
html[data-ui="terminal"] #main .dirico.call{
background:rgba(var(--tv-win-rgb),.12);color:var(--tv-win);
box-shadow:inset 0 0 0 1px rgba(var(--tv-win-rgb),.55);
}
html[data-ui="terminal"] #main .dirico.put{
background:rgba(var(--tv-red-rgb),.12);color:var(--tv-red);
box-shadow:inset 0 0 0 1px rgba(var(--tv-red-rgb),.55);
}
/* result badges (W/L/ATM/SKIP) — square outcome cells */
html[data-ui="terminal"] #main .badge,
html[data-ui="terminal"] #modalBg .badge{
border-radius:2px;font-family:var(--tv-mono);letter-spacing:.06em;
}
html[data-ui="terminal"] #main .badge.win,
html[data-ui="terminal"] #modalBg .badge.win{
background:rgba(var(--tv-win-rgb),.12);color:var(--tv-win);border-color:rgba(var(--tv-win-rgb),.55);
}
html[data-ui="terminal"] #main .badge.loss,
html[data-ui="terminal"] #modalBg .badge.loss{
background:rgba(var(--tv-red-rgb),.12);color:var(--tv-red);border-color:rgba(var(--tv-red-rgb),.55);
}
html[data-ui="terminal"] #main .badge.draw,
html[data-ui="terminal"] #modalBg .badge.draw{
background:rgba(var(--tv-amber-rgb),.10);color:var(--tv-amber);border-color:rgba(var(--tv-amber-rgb),.45);
}
/* pills — S43 tf/margin/mode pills carry INLINE hsl backgrounds that must
survive (money-honesty display): this rule shapes/borders only and NEVER
sets background/display/order, so the inline hues win untouched. */
html[data-ui="terminal"] #main .pill,
html[data-ui="terminal"] #modalBg .pill{
border-radius:2px;border-color:var(--tv-line2);color:var(--tv-dim);
font-family:var(--tv-mono);letter-spacing:.06em;
}
/* published feed columns */
html[data-ui="terminal"] #main .pub-col-h{
color:var(--tv-acc);letter-spacing:.12em;text-transform:uppercase;font-size:12px;
border-bottom:1px dashed var(--tv-line2);padding-bottom:6px;
text-shadow:0 0 8px rgba(var(--tv-acc-rgb),.3);
}
/* next-signal countdown strip (id-coupled 1s ticker — colors only) */
html[data-ui="terminal"] #main .nextsig-row{
border-radius:2px;border:1px solid var(--tv-line);
background:linear-gradient(180deg,rgba(var(--tv-acc-rgb),.10),rgba(var(--tv-acc-rgb),.03));
box-shadow:0 0 18px rgba(var(--tv-acc-rgb),.18);
}
html[data-ui="terminal"] #main .nextsig-row .nextsig-cd{
color:var(--tv-amber);font-family:var(--tv-mono);font-variant-numeric:tabular-nums;
text-shadow:0 0 9px rgba(var(--tv-amber-rgb),.45);
}
/* trading-rules slide-open card */
html[data-ui="terminal"] #main .rules-card{
border:1px solid var(--tv-line2);border-radius:2px;background:var(--tv-panel);box-shadow:none;
}
html[data-ui="terminal"] #main .rules-head{color:var(--tv-acc);letter-spacing:.06em}
html[data-ui="terminal"] #main .rules-head:hover{background:rgba(var(--tv-acc-rgb),.07)}
html[data-ui="terminal"] #main .rules-arrow{color:var(--tv-dim)}
html[data-ui="terminal"] #main .rules-list li{color:var(--tv-dim)}
html[data-ui="terminal"] #main .rules-list li::marker{color:var(--tv-acc)}
/* generate & publish — sticky progress strip */
html[data-ui="terminal"] #main .gen-progress{
border-radius:2px;border:1px solid var(--tv-line);background:var(--tv-bg2);
box-shadow:0 4px 18px rgba(0,0,0,.5),0 0 12px rgba(var(--tv-acc-rgb),.15);
font-family:var(--tv-mono);
}
html[data-ui="terminal"] #main .gen-progress .gp-sep{opacity:.4}
/* ==========================================================================
7 · SIGNAL RESULT CARDS — analyzer output (truth .bigdir/.confbar/.mtghint)
========================================================================== */
html[data-ui="terminal"] #main .sig-card{
border-radius:2px;border:1px solid var(--tv-line2);
background:linear-gradient(180deg,rgba(var(--tv-acc-rgb),.05),rgba(var(--tv-acc-rgb),.012) 45%,transparent) var(--tv-panel);
box-shadow:inset 0 0 40px rgba(var(--tv-acc-rgb),.03);
}
html[data-ui="terminal"] #main .sig-card::before{filter:blur(30px);opacity:.5}
html[data-ui="terminal"] #main .sig-card.call{
border-color:rgba(var(--tv-win-rgb),.45);
box-shadow:0 0 30px rgba(var(--tv-win-rgb),.12),inset 0 0 40px rgba(var(--tv-win-rgb),.03);
}
html[data-ui="terminal"] #main .sig-card.call::before{background:radial-gradient(circle,rgba(var(--tv-win-rgb),.28),transparent 70%)}
html[data-ui="terminal"] #main .sig-card.put{
border-color:rgba(var(--tv-red-rgb),.45);
box-shadow:0 0 30px rgba(var(--tv-red-rgb),.12),inset 0 0 40px rgba(var(--tv-red-rgb),.03);
}
html[data-ui="terminal"] #main .sig-card.put::before{background:radial-gradient(circle,rgba(var(--tv-red-rgb),.28),transparent 70%)}
html[data-ui="terminal"] #main .sig-dir{font-family:var(--tv-mono);letter-spacing:.03em}
html[data-ui="terminal"] #main .dir-call{color:var(--tv-win);text-shadow:0 0 22px rgba(var(--tv-win-rgb),.7)}
html[data-ui="terminal"] #main .dir-put{color:var(--tv-red);text-shadow:0 0 22px rgba(var(--tv-red-rgb),.7)}
html[data-ui="terminal"] #main .dir-skip{color:var(--tv-faint)}
/* confidence bar — square track, phosphor fill (fill gradient uses the
remapped --g1/--g2/--green vars automatically) */
html[data-ui="terminal"] #main .conf-bar{
border-radius:0;background:var(--tv-panel);border:1px solid var(--tv-line2);
}
html[data-ui="terminal"] #main .conf-bar>i{border-radius:0;box-shadow:0 0 8px rgba(var(--tv-acc-rgb),.6)}
html[data-ui="terminal"] #main .ticks{color:var(--tv-faint);font-family:var(--tv-mono)}
/* recommendation strips */
html[data-ui="terminal"] #main .rec{border-radius:2px;font-family:var(--tv-mono);letter-spacing:.04em}
html[data-ui="terminal"] #main .rec-strong{
color:var(--tv-win);background:rgba(var(--tv-win-rgb),.10);
border-color:rgba(var(--tv-win-rgb),.5);box-shadow:0 0 18px rgba(var(--tv-win-rgb),.14);
}
html[data-ui="terminal"] #main .rec-moderate{
color:var(--tv-amber);background:rgba(var(--tv-amber-rgb),.08);border-color:rgba(var(--tv-amber-rgb),.45);
}
html[data-ui="terminal"] #main .rec-skip{
color:var(--tv-red);background:rgba(var(--tv-red-rgb),.08);border-color:rgba(var(--tv-red-rgb),.45);
}
/* factor rows + 5-factor cards */
html[data-ui="terminal"] #main .factor,
html[data-ui="terminal"] #modalBg .factor{border-bottom:1px dashed var(--tv-line2)}
html[data-ui="terminal"] #main .factor .fw,
html[data-ui="terminal"] #modalBg .factor .fw{color:var(--tv-faint);font-family:var(--tv-mono)}
html[data-ui="terminal"] #main .factor .fbar,
html[data-ui="terminal"] #main .fcard .fbar{border-radius:0;background:var(--tv-panel2)}
html[data-ui="terminal"] #main .fcard{
background:var(--tv-panel2);border:1px solid var(--tv-line2);border-radius:2px;
}
html[data-ui="terminal"] #main .fcard .fc-name{color:var(--tv-text)}
html[data-ui="terminal"] #main .fcard .fw{color:var(--tv-faint);font-family:var(--tv-mono)}
html[data-ui="terminal"] #main .fcard.fs-bull{border-color:rgba(var(--tv-win-rgb),.4)}
html[data-ui="terminal"] #main .fcard.fs-bear{border-color:rgba(var(--tv-red-rgb),.38)}
html[data-ui="terminal"] #main .fs-bull{color:var(--tv-win)}
html[data-ui="terminal"] #main .fs-bear{color:var(--tv-red)}
html[data-ui="terminal"] #main .fs-neu{color:var(--tv-faint)}
html[data-ui="terminal"] #main .sig-analysis .an-sum{color:var(--tv-text)}
/* processing / scan animation — phosphor radar (wording untouched; base
copy already follows the "Processing…" rule) */
html[data-ui="terminal"] #main .scan-card{background:var(--tv-panel)}
html[data-ui="terminal"] #main .radar{
background:radial-gradient(circle,rgba(var(--tv-acc-rgb),.10),transparent 70%);
border:1px solid rgba(var(--tv-acc-rgb),.35);
box-shadow:0 0 18px rgba(var(--tv-acc-rgb),.28),inset 0 0 14px rgba(var(--tv-acc-rgb),.15);
}
html[data-ui="terminal"] #main .radar::before{
background:conic-gradient(from 0deg,transparent 0deg,rgba(var(--tv-acc-rgb),.06) 250deg,rgba(var(--tv-acc-rgb),.55) 340deg,rgba(234,252,239,.85) 360deg);
}
html[data-ui="terminal"] #main .radar::after{background:var(--tv-acc);box-shadow:0 0 12px rgba(var(--tv-acc-rgb),.9)}
html[data-ui="terminal"] #main .scan-title{
background:none;-webkit-background-clip:border-box;background-clip:border-box;
color:var(--tv-acc);-webkit-text-fill-color:var(--tv-acc);
text-shadow:0 0 12px rgba(var(--tv-acc-rgb),.45);animation:none;letter-spacing:.08em;
}
html[data-ui="terminal"] #main .scanrow .sname{color:var(--tv-dim)}
html[data-ui="terminal"] #main .scanrow .sline{border-radius:0;background:var(--tv-panel2)}
html[data-ui="terminal"] #main .scanrow .sline i{
border-radius:0;
background:linear-gradient(90deg,transparent,rgba(var(--tv-acc-rgb),.75),rgba(var(--tv-acc-rgb),.9),transparent);
background-size:50% 100%;background-repeat:no-repeat;
}
html[data-ui="terminal"] #main .scan-foot{color:var(--tv-faint)}
html[data-ui="terminal"] #main .scan-dots i{border-radius:0;background:var(--tv-acc)}
html[data-ui="terminal"] #main .spinner,
html[data-ui="terminal"] #modalBg .spinner{
border:3px solid rgba(var(--tv-acc-rgb),.2);border-top-color:var(--tv-acc);
}
/* ==========================================================================
8 · HEATMAP + CALENDAR DETAIL — colors come from JS; shape/select only
========================================================================== */
html[data-ui="terminal"] #main .hm .d{border-radius:2px}
html[data-ui="terminal"] #main .hm .d.sel{
outline:2px solid var(--tv-acc);box-shadow:0 0 0 3px rgba(var(--tv-acc-rgb),.35);
}
html[data-ui="terminal"] #main .hm-h{color:var(--tv-faint);letter-spacing:.08em}
html[data-ui="terminal"] #main .hm-detail-in{
border-radius:2px;background:var(--tv-panel2);border:1px solid var(--tv-line2);
}
html[data-ui="terminal"] #main .hm-detail .hd-wk{color:var(--tv-acc)}
html[data-ui="terminal"] #main .hm-detail .hd-dt{color:var(--tv-dim)}
/* ==========================================================================
9 · TABLES — factor tables, CSV preview, owner lists (mostly inline-styled
cells; furniture only: heads dim + letterspaced, dashed row rules)
========================================================================== */
html[data-ui="terminal"] #main table,
html[data-ui="terminal"] #modalBg table{font-family:var(--tv-mono);font-variant-numeric:tabular-nums}
html[data-ui="terminal"] #main table th,
html[data-ui="terminal"] #modalBg table th{
color:var(--tv-dim);font-weight:400;letter-spacing:.12em;text-transform:uppercase;
font-size:10.5px;border-bottom:1px solid var(--tv-line2);
}
html[data-ui="terminal"] #main table td,
html[data-ui="terminal"] #modalBg table td{border-bottom:1px dashed var(--tv-line2)}
html[data-ui="terminal"] #main table tr:last-child td,
html[data-ui="terminal"] #modalBg table tr:last-child td{border-bottom:none}
/* ==========================================================================
10 · LEADERBOARD — rendered as .trow rows (covered in §6); the "आप"
highlight is an inline color-mix over --g1 → phosphor via the var remap.
Rank/streak accents ride the same row skin; nothing extra to force here.
========================================================================== */
/* ==========================================================================
11 · NOTICES / EMPTY STATES / MISC READOUTS
========================================================================== */
html[data-ui="terminal"] #main .empty,
html[data-ui="terminal"] #modalBg .empty{
border:1px dashed var(--tv-line);border-radius:2px;color:var(--tv-dim);
background:transparent;
}
html[data-ui="terminal"] #main .notice{
color:var(--tv-amber);background:rgba(var(--tv-amber-rgb),.08);
border:1px solid rgba(var(--tv-amber-rgb),.4);border-radius:2px;
}
html[data-ui="terminal"] #main .lock-note{
border-radius:2px;background:var(--tv-panel2);border:1px solid var(--tv-line2);color:var(--tv-dim);
}
html[data-ui="terminal"] #main .hol-chip{
border-radius:2px;background:var(--tv-panel2);border:1px solid var(--tv-line2);color:var(--tv-text);
}
html[data-ui="terminal"] #main .hol-chip button:hover{color:var(--tv-red);background:rgba(var(--tv-red-rgb),.12)}
html[data-ui="terminal"] #main .tg-preview{
border-radius:2px;background:var(--tv-panel2);border:1px solid var(--tv-line2);
}
html[data-ui="terminal"] #main .shot-prev img,
html[data-ui="terminal"] #main .shot-img,
html[data-ui="terminal"] #modalBg .shot-img{border-radius:2px;border:1px solid var(--tv-line)}
html[data-ui="terminal"] #main .theme-swatch{
border-radius:2px;background:var(--tv-panel);border:1px solid var(--tv-line2);
}
html[data-ui="terminal"] #main .theme-swatch:hover{border-color:var(--tv-line)}
html[data-ui="terminal"] #main .theme-swatch.on{
border-color:var(--tv-acc);box-shadow:0 0 0 2px rgba(var(--tv-acc-rgb),.4);
}
html[data-ui="terminal"] #main .theme-swatch .sw{border-radius:2px}
html[data-ui="terminal"] #main .theme-swatch .tn{color:var(--tv-dim)}
html[data-ui="terminal"] #main .muted,
html[data-ui="terminal"] #modalBg .muted{color:var(--tv-faint)}
html[data-ui="terminal"] #main .green,
html[data-ui="terminal"] #modalBg .green{color:var(--tv-win)}
html[data-ui="terminal"] #main .red,
html[data-ui="terminal"] #modalBg .red{color:var(--tv-red)}
html[data-ui="terminal"] #main svg text{fill:var(--tv-faint)}
/* ==========================================================================
12 · MODAL — truth .mw: solid bg2 panel, phosphor frame + glow. Overlay
stacking/ids untouched (AutoRefresh's modal-guard keys off #modalBg).
========================================================================== */
html[data-ui="terminal"] #modalBg{background:rgba(0,4,1,.74)}
html[data-ui="terminal"] #modalBg .modal{
background:var(--tv-bg2);border:1px solid var(--tv-line);border-radius:2px;
box-shadow:0 20px 60px rgba(0,0,0,.7),var(--tv-glow);
color:var(--tv-text);
scrollbar-width:thin;scrollbar-color:rgba(var(--tv-acc-rgb),.35) transparent;
}
html[data-ui="terminal"] #modalBg .modal h3{
color:var(--tv-acc);letter-spacing:.08em;font-weight:700;
text-shadow:0 0 10px rgba(var(--tv-acc-rgb),.4);
}
html[data-ui="terminal"] #modalBg .modal::-webkit-scrollbar{width:9px;height:9px}
html[data-ui="terminal"] #modalBg .modal::-webkit-scrollbar-track{background:transparent}
html[data-ui="terminal"] #modalBg .modal::-webkit-scrollbar-thumb{
background:rgba(var(--tv-acc-rgb),.28);border:2px solid var(--tv-bg2);border-radius:0;
}
html[data-ui="terminal"] #modalBg .modal::-webkit-scrollbar-thumb:hover{background:rgba(var(--tv-acc-rgb),.45)}
/* ==========================================================================
13 · TOAST — truth .toast: left phosphor rule + glow. Visibility logic
(.show opacity/transform) belongs to the base sheet and is not touched.
========================================================================== */
html[data-ui="terminal"] #toast{
background:var(--tv-bg2);border:1px solid var(--tv-line);border-left:4px solid var(--tv-acc);
border-radius:2px;color:var(--tv-text);font-weight:600;letter-spacing:.03em;
box-shadow:0 8px 30px rgba(0,0,0,.6),0 0 14px rgba(var(--tv-acc-rgb),.25);
}
/* ==========================================================================
14 · SCROLLBARS — thin phosphor inside scrollable view panels (.pairs,
.pcheck, tables' overflow wrappers). #main itself is covered by Phase-2's
#app rule; these keep inner panels consistent.
========================================================================== */
html[data-ui="terminal"] #main .pairs,
html[data-ui="terminal"] #main .pcheck{
scrollbar-width:thin;scrollbar-color:rgba(var(--tv-acc-rgb),.35) transparent;
}
/* ==========================================================================
15 · REDUCED MOTION — kill the additions of this file (base sheet already
has a global reduce rule; this is belt-and-braces for the tv- loops)
========================================================================== */
@media (prefers-reduced-motion:reduce){
html[data-ui="terminal"] #main .page-h::after,
html[data-ui="terminal"] #main .btn.primary.is-scanning{animation:none!important}
html[data-ui="terminal"] #main .scanrow .sline i,
html[data-ui="terminal"] #main .radar::before,
html[data-ui="terminal"] #main .scan-dots i,
html[data-ui="terminal"] #main .spinner,
html[data-ui="terminal"] #modalBg .spinner{animation:none!important}
}
/* ---- Phase 3b-1: NEXT SIGNAL hero (dashboard/#published top row) ---------- */
/* #nextSigRow content is rewritten every 1s by the global ticker — style only. */
html[data-ui="terminal"] #main .nextsig-row{
background:linear-gradient(180deg,rgba(34,197,94,.10),rgba(34,197,94,.03));
border:1px solid rgba(34,197,94,.38); border-radius:4px;
padding:16px 18px; font-size:15px; letter-spacing:.03em;
box-shadow:inset 0 0 22px rgba(34,197,94,.05);
position:relative;
}
html[data-ui="terminal"] #main .nextsig-row::before{
content:"NEXT SIGNAL"; position:absolute; top:-9px; left:12px;
padding:0 8px; font-size:10px; letter-spacing:.28em;
color:rgba(34,197,94,.85); background:#020705;
}
html[data-ui="terminal"] #main .nextsig-row .nextsig-cd{
font-size:30px; font-weight:800; color:#fbbf24;
text-shadow:0 0 14px rgba(251,191,36,.45); letter-spacing:.06em;
}
@media (max-width:560px){
html[data-ui="terminal"] #main .nextsig-row .nextsig-cd{font-size:22px}
}
/* === Phase 3b: / === */
/* ============================================================================
TARA — S44 Phase 3b patch · route / (slug dashboard)
SKIN: TERMINAL PRO. Loads after skin-terminal-views.css; same scope oath —
every selector under html[data-ui="terminal"] and inside #main only.
GAP FILLED (verified against js/app.js): the P&L heatmap is dashboard-only
(renderHeatmap is called solely from VIEWS['/'] — app.js:545 and the
#hmRange handler at app.js:547; cells emitted at app.js:592, click-select
'sel' toggled at app.js:601-603). Base styles.css still MOVES these day
cells under the terminal skin: .hm .d:hover{transform:scale(1.16)}
(styles.css:240), .hm .d:active{transform:scale(1.05)} (styles.css:241)
and .hm .d.sel{...transform:scale(1.1)} (styles.css:242). Phase 3a §8
reshapes .hm .d (radius) and restyles .hm .d.sel (outline + glow ring)
but never touches the transform property on any of the three states
(grep-verified: no `transform` under any .hm selector in
skin-terminal-views.css), so daily-P&L click targets still jump on
hover/click — a W15 defect inside this skin. Fix: pin transform:none on
exactly those three states. Hover feedback survives on the allowed
channels the base sheet already provides (brightness + drop-shadow,
styles.css:240); selected feedback stays Phase 3a's phosphor outline +
ring. Static declarations only — no animation added, so nothing new needs
a prefers-reduced-motion off-switch.
NOT touched (already covered / must-not-break): heatmap cell FILLS are
inline JS colors (app.js:576-578 cellColor, :592) and stay JS-owned per
Phase 3a §8's "colors come from JS" contract — same for the .fut future
tint (app.js:589), the legend swatches (app.js:598) and the equity/donut
SVG fills (charts.js:5 — #22c55e/#ef4444 already equal --tv-acc/--tv-red,
so charts read phosphor as-is). #nextSigRow (live 1s ticker) untouched —
no display rule anywhere here. .hm-detail/.hd-pl need nothing: green/red/
muted resolve through Phase 3a's token remap (styles.css:253). No .pill
rule (S43 inline hsl backgrounds keep winning). Stat cards, chips (.on),
.trow/.dirico/.badge/.empty all ride Phase 3a §2/§5/§6/§11 unchanged.
========================================================================== */
/* P&L heatmap day cells — W15: a click target never moves. Kills the base
sheet's hover/active/selected scale inside the terminal skin only; the
base brightness/shadow hover feedback and Phase 3a's .sel outline+ring
remain the (motionless) state signals. */
html[data-ui="terminal"] #main .hm .d:hover,
html[data-ui="terminal"] #main .hm .d:active,
html[data-ui="terminal"] #main .hm .d.sel{
transform:none;
}
/* === Phase 3b: /new-trade === */
/* ============================================================================
TARA — S44 skin: TERMINAL PRO — Phase 3b patch: route /new-trade
(Log New Trade / Edit Trade form).
Gap-fill ONLY — the Phase-3a file skin-terminal-views.css already covers
this view's .card, details.exp/.checklist, .seg (#bCall/#bPut/.res),
inputs/selects/textarea, .tile (#plPreview), .btn (.primary/.red/.sm,
#saveTrade disabled state), .muted (#rcCount/#vaNote) and .shot-prev img.
None of that is re-defined here. Verified against js/app.js lines 619-825.
Scope oath: every rule lives under html[data-ui="terminal"] #main.
Money-safety: nothing is hidden or resized — #vaNote and #shotPrev
(async-filled) stay visible; checklist checkboxes untouched (they feed
disciplineStats via :checked count); no content-generating pseudo-elements
on inputs (ntPrefill re-fills values programmatically); no transform on
any clickable (W15). No new animations in this file, so there is nothing
extra to switch off under prefers-reduced-motion.
========================================================================== */
/* --------------------------------------------------------------------------
1 · NATIVE WIDGET SCHEME — no color-scheme is declared anywhere in the
stack, so the #tdate (datetime-local, app.js:640) calendar-picker
indicator, the number-input spinners (#amount app.js:641, #payout :644,
#entry/#exit :648-649) and the #assetList dropdown anchored to #asset
(app.js:636-637) render UA-light: dark icons sitting on the phosphor
panels. Declaring the dark scheme on exactly these six controls flips
the UA-internal chrome to its dark rendering — icon/spinners become
light and readable. The SPA exposes no route attribute, so the rule is
confined to /new-trade via these route-unique ids — same convention as
terminal-trades.css (#thFrom/#thTo). Deliberately NOT swept in: the
selects (their popup option colors are Phase-3a §4's), the checklist
checkboxes (accent-color is Phase-3a §4's), and the plain text fields /
#notes (no UA-light chrome to fix). Value colors/typography stay with
the Phase-3a input skin (not repeated).
-------------------------------------------------------------------------- */
html[data-ui="terminal"] #main #tdate,
html[data-ui="terminal"] #main #amount,
html[data-ui="terminal"] #main #payout,
html[data-ui="terminal"] #main #entry,
html[data-ui="terminal"] #main #exit,
html[data-ui="terminal"] #main #asset{
color-scheme:dark;
}
/* --------------------------------------------------------------------------
2 · EXTRA-PHOTO THUMBS (#xtraPrev) — app.js:754 emits each thumb ![]()
with INLINE style "border-radius:8px;border:1px solid var(--border)".
The border COLOR is already phosphor (the Phase-3a scope remaps --border,
and the inline var() resolves against that inherited value), but the 8px
radius stays round against the 2px square terminal language — inline
style, so !important is required. Size (72px box, object-fit:cover) and
the [data-xrm] remove keys (.btn.sm.red — covered by Phase-3a §3) are
left exactly as rendered.
-------------------------------------------------------------------------- */
html[data-ui="terminal"] #main #xtraPrev img{
border-radius:2px !important;
}
/* --------------------------------------------------------------------------
3 · SCREENSHOT PREVIEW WRAPPER (.shot-prev .shot-thumb) — base sheet
(styles.css:486) makes it a bare flex row; only its ![]()
got a terminal
frame in Phase-3a (§11). Give the wrapper the panel-in-panel treatment so
the thumb + its remove key (#shotRm) read as one framed readout, matching
the .tile / .hm-detail-in pattern. Display/flex mechanics untouched;
#vaNote is appended to #shotPrev as a SIBLING of this wrapper and is not
affected (and never hidden).
-------------------------------------------------------------------------- */
html[data-ui="terminal"] #main .shot-prev .shot-thumb{
background:var(--tv-panel2);
border:1px solid var(--tv-line2);
border-radius:2px;
padding:8px;
}
/* === Phase 3b: /import === */
/* ============================================================================
TARA — Phase 3b patch: route /import (Import CSV) — TERMINAL PRO skin.
Loads after skin-terminal-views.css; same scope oath: every rule lives
under html[data-ui="terminal"] and inside #main only.
GAP FILLED HERE (verified against js/app.js VIEWS['/import'], lines 828-903):
#payoutRange input[type=range] — the base sheet and both skin files style
generic inputs only, so the payout slider (money-relevant: payout% drives
every imported trade's P&L) rendered as a native track inside a framed
panel. This file skins the track + thumb (WebKit + Gecko), the #payoutVal
readout, the how-to markers, #csvStatus emphasis, and the preview
scroll wrapper's scrollbar.
Already covered by the 3a views file — NOT redefined here: .card frames,
.btn/.btn.primary (#pickFile/#doImport incl. :disabled), .tile (#dupCtl),
.notice (#csvNotice), .badge.draw (DUP), table furniture (#csvPreview),
.muted, checkbox accent (#skipDups inline var(--violet) resolves phosphor
via the scope's token remap — no rule needed).
W15: zero movement on the slider — glow/color feedback only, no transform.
No @keyframes and no animation added in this file → nothing new to switch
off under prefers-reduced-motion (transitions only).
Braces balanced; wording rule: no pseudo-element text content added.
========================================================================== */
/* ---- payout % slider — phosphor track + square thumb --------------------- */
/* the generic input rule (3a §4) keeps painting the framed field around it;
appearance:none only strips the native track/thumb chrome inside */
html[data-ui="terminal"] #main #payoutRange{
-webkit-appearance:none;appearance:none;
cursor:pointer;accent-color:var(--tv-acc); /* belt-and-braces fallback */
}
html[data-ui="terminal"] #main #payoutRange::-webkit-slider-runnable-track{
height:6px;border-radius:0;
background:linear-gradient(90deg,rgba(var(--tv-acc-rgb),.30),rgba(var(--tv-acc-rgb),.08));
box-shadow:inset 0 0 0 1px var(--tv-line2);
}
html[data-ui="terminal"] #main #payoutRange::-webkit-slider-thumb{
-webkit-appearance:none;appearance:none;
width:16px;height:16px;margin-top:-5px; /* (6px track − 16px thumb)/2 */
border-radius:0;background:var(--tv-acc);
border:1px solid var(--tv-bg);
box-shadow:var(--tv-glow);
transition:box-shadow .18s;
}
html[data-ui="terminal"] #main #payoutRange:hover::-webkit-slider-thumb,
html[data-ui="terminal"] #main #payoutRange:focus-visible::-webkit-slider-thumb{
box-shadow:0 0 14px rgba(var(--tv-acc-rgb),.75); /* glow only — no movement (W15) */
}
/* Gecko */
html[data-ui="terminal"] #main #payoutRange::-moz-range-track{
height:6px;border-radius:0;
background:rgba(var(--tv-acc-rgb),.08);
box-shadow:inset 0 0 0 1px var(--tv-line2);
}
html[data-ui="terminal"] #main #payoutRange::-moz-range-progress{
height:6px;border-radius:0;background:rgba(var(--tv-acc-rgb),.45);
}
html[data-ui="terminal"] #main #payoutRange::-moz-range-thumb{
width:14px;height:14px;border-radius:0;
background:var(--tv-acc);border:1px solid var(--tv-bg);
box-shadow:var(--tv-glow);
}
/* ---- payout readouts ------------------------------------------------------ */
/* #payoutVal is rewritten by JS on every input — recolor only, never hidden */
html[data-ui="terminal"] #main #payoutVal{
color:var(--tv-acc);font-family:var(--tv-mono);font-variant-numeric:tabular-nums;
letter-spacing:.04em;text-shadow:0 0 10px rgba(var(--tv-acc-rgb),.4);
}
/* ---- how-to steps — phosphor list numerals (decoration, no text added) ---- */
html[data-ui="terminal"] #main .card ol.muted li::marker{color:var(--tv-acc)}
/* ---- file status line — key counts readable, rest stays dim --------------- */
/* JS writes "N new trades found · … duplicates detected · file name" */
html[data-ui="terminal"] #main #csvStatus b{color:var(--tv-text)}
/* ---- preview table scroll wrapper — thin phosphor scrollbar --------------- */
/* the wrapper is an inline overflow:auto div inside #csvPreview; scrollbar
color only — overflow/scrolling behavior untouched (must keep scrolling) */
html[data-ui="terminal"] #main #csvPreview div{
scrollbar-width:thin;scrollbar-color:rgba(var(--tv-acc-rgb),.35) transparent;
}
html[data-ui="terminal"] #main #csvPreview div::-webkit-scrollbar{width:9px;height:9px}
html[data-ui="terminal"] #main #csvPreview div::-webkit-scrollbar-track{background:transparent}
html[data-ui="terminal"] #main #csvPreview div::-webkit-scrollbar-thumb{
background:rgba(var(--tv-acc-rgb),.28);border-radius:0;
}
html[data-ui="terminal"] #main #csvPreview div::-webkit-scrollbar-thumb:hover{
background:rgba(var(--tv-acc-rgb),.45);
}
/* === Phase 3b: /trades === */
/* ============================================================================
TARA — S44 Phase 3b patch · route /trades (Trade History) · skin TERMINAL
Root: html[data-ui="terminal"] — identical to skin-terminal-views.css.
GAP-FILL ONLY. Verified against js/app.js VIEWS['/trades'] (≈1056-1131) and
openTrade/confirmDelete (≈1133-1168): every element in this view already
rides the covered component layer of skin-terminal-views.css —
.trow/.dirico/.badge/.pl §6, .chips §5, inputs/selects §4, .btn §3,
.card §2, .empty/.muted/.shot-img §11, modal (.tile/#mEdit/#mClose) §12/§2.
The ONLY missing piece: #thFrom / #thTo (input[type=date], never
re-rendered — app.js draw() writes only #thCount + #thList, so these rules
never depend on a re-render). No color-scheme exists anywhere in the stack,
so Chrome draws the native calendar-picker indicator and popup with
UA-LIGHT widgets, which clash on the phosphor panel. Fix: opt exactly these
two inputs into dark UA widgets, then phosphor-tint the (now light)
indicator glyph. Field background/text/border stay owned by §4 (explicit
values win over UA colors, so color-scheme cannot restyle the field itself).
No layout, no display, no transforms, no pseudo-element text, and no
animation is added (nothing new for reduced-motion to switch off).
========================================================================== */
/* dark UA form widgets for the two custom-range date fields:
indicator glyph flips to its light variant, native popup calendar goes dark */
html[data-ui="terminal"] #main #thFrom,
html[data-ui="terminal"] #main #thTo{
color-scheme:dark;
}
/* phosphor-tint the light indicator glyph (Chrome pseudo — Chrome-era fine);
color/opacity only: the hit target is never moved or resized */
html[data-ui="terminal"] #main #thFrom::-webkit-calendar-picker-indicator,
html[data-ui="terminal"] #main #thTo::-webkit-calendar-picker-indicator{
opacity:.75;
cursor:pointer;
filter:sepia(1) saturate(3) hue-rotate(65deg) brightness(1.1);
}
html[data-ui="terminal"] #main #thFrom:hover::-webkit-calendar-picker-indicator,
html[data-ui="terminal"] #main #thTo:hover::-webkit-calendar-picker-indicator{
opacity:1;
}
/* === Phase 3b: /analytics === */
/* ============================================================================
TARA — S44 Phase 3b patch · route /analytics (slug analytics)
SKIN: TERMINAL PRO. Loads after skin-terminal-views.css; same scope oath —
every selector under html[data-ui="terminal"] and inside #main only.
GAP FILLED (verified against js/app.js): the three breakdown lists this
route renders — Strategy Performance #byStrat and Session Performance
#bySession (both filled by groupPerf, app.js:1282/:1284, row markup
app.js:1299) and Emotional Analysis #byEmotion (app.js:1292) — draw their
row dividers with an INLINE `border-bottom:1px solid var(--border)` on
each `.between` row. Solid inline dividers are the ONE place on this route
that misses the terminal skin's signature dashed row rule (Phase 3a gives
dashed rules to every other list row: .trow §6 skin-terminal-views.css:396,
table td §9 :593, .factor §7 :519). Because the divider is an inline style
from app.js, `!important` is the only CSS-side way to reach it — used here
for the border alone (same 1px width, dashed style, --tv-line2 = the
dashed-rule token Phase 3a already uses for .trow/td). Last row's trailing
divider is stripped to match §9's table tr:last-child treatment (:594).
These containers are only rewritten by the full-view AutoRefresh redraw
(app.js:1239) — no per-second ticker writes into them; static CSS is safe.
NOT touched (already covered / must-not-break / deliberate):
— #anRange range chips + .on state (app.js:1242): Phase 3a §5 .chips.
— statCard grid, .profit/.loss variants (app.js:1259-1266, statCard :551):
Phase 3a §2.
— Empty states "No data yet" / "No trades in this range" (app.js:1245) and
groupPerf's "No data" (:1297): Phase 3a §11 — kept fully visible.
— Discipline card (app.js:1209-1236): .badge.win/.loss ride §6; the
progress bars + emotion/checklist meters are inline-styled with
var(--primary)/var(--card2), already phosphor via the Phase 3a token
remap (:49-70). The two NEUTRAL badges (🏆 Best / 🎯 disciplined,
app.js:1219-1220) render frameless because base styles.css:152 gives
variant-less .badge a transparent border — identical on every route and
skin, and the discipline card exposes no id/class hook to scope a
route-only fix; left for a base-skin decision, not faked here.
— Card headings (Daily P&L etc., app.js:1268-1273): the same
`.card > b` pattern is shared by dashboard/settings/owner/telegram
(app.js:512-517, :3017-3074) — restyling it only on /analytics would
fracture cross-route consistency.
— Charts SVGs (charts.js): bar green/red literals equal --tv-win/--tv-red;
donut PALETTE hues are data-encoding (asset share) and must not be
flattened to phosphor; axis/label text already phosphor via Phase 3a
§11 `svg text` (:643); .bar-grow entrance animation belongs to base
styles.css:284 (its global reduced-motion rule covers it).
— Top Assets legend rows (app.js:1289): tight 2px legend rows carry no
divider by design — no dashed rule forced on them.
— No .pill rule here at all (S43 inline hsl pills keep winning); no
display:none; no transform (W15); no animation/transition added
(nothing new needs a prefers-reduced-motion off-switch).
========================================================================== */
/* breakdown list rows — dashed phosphor rules (inline solid divider from
app.js:1292/:1299 is restyled dashed; !important required to beat the
inline style — border only, nothing else) */
html[data-ui="terminal"] #main #byStrat>.between,
html[data-ui="terminal"] #main #bySession>.between,
html[data-ui="terminal"] #main #byEmotion>.between{
border-bottom:1px dashed var(--tv-line2)!important;
}
/* last row: drop the trailing divider, same as Phase 3a table
tr:last-child td (§9) — the card's own frame closes the list */
html[data-ui="terminal"] #main #byStrat>.between:last-child,
html[data-ui="terminal"] #main #bySession>.between:last-child,
html[data-ui="terminal"] #main #byEmotion>.between:last-child{
border-bottom:none!important;
}
/* === Phase 3b: /signal === */
/* ============================================================================
TARA — S44 Phase 3b patch · route /signal (slug signal-analyzer) · skin:
TERMINAL PRO. Gap-fill ONLY — everything else on this view is already
covered by skin-terminal-views.css (§3 buttons/is-locked, §5 chips/pairs/
spin incl. #tabOtc/#tabLive dots recolored+depulsed at lines 308-313,
§7 result/scan/conf/fcard, §11 lock-note) and is NOT re-defined here.
Residue closed: the payout chip rendered by PAY_BADGE (app.js:1307) inside
#pairGrid pair buttons carries INLINE background:rgba(45,190,120,.16) +
border-radius:6px — a round teal chip sitting inside square phosphor
buttons. Inline styles only lose to !important, hence the two flagged
declarations below. Chip is never hidden or resized (recolor/reshape only;
payout% stays fully visible). W15: zero movement added. No new animation
in this patch (so no reduced-motion switch is required by it).
Scope oath: html[data-ui="terminal"] + #main only, same root as the parent
views file. CSS only — markup untouched. Tokens (--tv-*) come from the §0
block of skin-terminal-views.css (declared on #main, inherited here).
========================================================================== */
/* PAY_BADGE payout chip — the only child a #pairGrid pair button can
contain (button markup = pair text + optional badge span; verified at
app.js:1413). Square it to the terminal grid and swap the teal tint for
phosphor green. The inline color:var(--green) already resolves to phosphor
#22c55e through the §0 token remap, so color needs no override. Inline
padding/font-size are left untouched — no layout shift. */
html[data-ui="terminal"] #main #pairGrid button > span{
background:rgba(var(--tv-acc-rgb),.14)!important; /* inline rgba(45,190,120,.16) → phosphor */
border-radius:0!important; /* inline 6px → square terminal chip */
font-family:var(--tv-mono);
font-variant-numeric:tabular-nums;
letter-spacing:.02em;
box-shadow:inset 0 0 0 1px rgba(var(--tv-acc-rgb),.30);
text-shadow:0 0 6px rgba(var(--tv-acc-rgb),.35);
}
/* selected pair (.on) already glows accent — lift the badge frame one notch
so the payout % stays clearly readable over the brighter fill */
html[data-ui="terminal"] #main #pairGrid button.on > span{
background:rgba(var(--tv-acc-rgb),.22)!important;
box-shadow:inset 0 0 0 1px rgba(var(--tv-acc-rgb),.50);
}
/* === Phase 3b: /published === */
/* ============================================================================
TARA — S44 Phase 3b patch · route /published (slug published-feed)
SKIN: TERMINAL PRO. Loads after skin-terminal-views.css; same scope oath —
every selector under html[data-ui="terminal"] and inside #main only.
GAP FILLED (verified against js/app.js): #pubHiBtn is the ONLY bare .btn
that ever receives .on (app.js:1907 — hiBtn.classList.toggle('on',
pubHiConf)) and no `.btn.on` rule exists in styles.css or any skin file
(grep-verified), so the ≥90% confidence filter's active state had zero
visual treatment beyond the JS ☆/⭐ glyph swap. The amber phosphor
"filter armed" key below mirrors the existing .chips button.on pattern
(fill + inset ring + glow + text-shadow); amber instead of accent green so
the armed star-filter reads distinct from the green .btn.primary active
tab sitting in the same header row. Amber literals = the --tv-amber /
--tv-amber-rgb tokens already declared on #main by skin-terminal-views.css.
NOT touched (already covered / must-not-break): no .pill rule here at all
(S43 tf/margin/mode inline hsl backgrounds keep winning); no display:none
(live regions #pubBody/#pubStats/#nextSigRow untouched); no transform
(W15 — click target never moves); no new animation (nothing needs a
prefers-reduced-motion off-switch — the base .btn transition on
background/box-shadow/color/border-color is reused as-is); base 920px
.pub-cols stack untouched.
========================================================================== */
/* ≥90% confidence filter toggle — armed state (#pubHiBtn.classList 'on').
Rest state stays the shared bracket-key .btn skin from Phase 3a. */
html[data-ui="terminal"] #main #pubHiBtn.on{
background:rgba(var(--tv-amber-rgb),.14);
border-color:rgba(var(--tv-amber-rgb),.60);
color:var(--tv-amber);
box-shadow:inset 0 0 0 1px rgba(var(--tv-amber-rgb),.55),0 0 10px rgba(var(--tv-amber-rgb),.35);
text-shadow:0 0 8px rgba(var(--tv-amber-rgb),.40);
}
/* hover feedback while armed (id specificity beats the base .btn:hover green
wash, so restate it in amber — brightness only, zero movement / W15) */
html[data-ui="terminal"] #main #pubHiBtn.on:hover{
background:rgba(var(--tv-amber-rgb),.22);
border-color:rgba(var(--tv-amber-rgb),.70);
box-shadow:inset 0 0 0 1px rgba(var(--tv-amber-rgb),.55),0 0 14px rgba(var(--tv-amber-rgb),.45);
}
/* === Phase 3b: /leaderboard === */
/* ============================================================================
TARA — S44 Phase 3b patch · route /leaderboard (Leaderboard) · skin TERMINAL
Loads after skin-terminal-views.css; same scope oath — every selector under
html[data-ui="terminal"] and inside #main only.
GAP FILLED (verified against js/app.js VIEWS['/leaderboard'], 1621-1668):
the rank cell is a text-bearing BARE .dirico (accuracy note, S47: the
/my-signals SKIP cell at app.js:1581 also bears text — the #lbBody scope
below keeps this rule correct; SKIP is handled by its own Phase 4 patch)
(app.js:1652 — `${medal}
`,
no .call/.put class; the only other bare .dirico is the admin avatar at
app.js:2833, which carries an inline background-image and is not on this
route). Base styles.css:175 gives bare .dirico size/grid/weight only — no
background, no color — and Phase 3a §6 adds only border-radius:0 + mono
font to it, so the "#4"+ ranks and the not-qualified "—" render as naked
text floating in an invisible 34px box while every neighbouring cell
(W/L badges, P&L, medal emoji) is framed. Fix below: one phosphor readout
treatment — panel fill, inset hairline ring, dim phosphor digits — scoped
to #lbBody (id written only by this view, app.js:1632/1641), so nothing
leaks to the .call/.put call-sites or the admin avatar. Emoji medals
🥇🥈🥉 keep their own glyph colors; the JS-set inline font-size (18px
top-3 / 13px rest, app.js:1652) keeps winning — no font-size is set here.
NOT touched (already covered / must-not-break): .trow rows + .meta + hover
(Phase 3a §6); .badge.win/.loss (§6); .green/.red P&L colors (§11); the
.empty loading / "No data yet" / "Load fail" states stay fully visible
(§11 — honest states, re-rendered by load() app.js:1645/1660); the You-row
inline color-mix over --g1 (app.js:1651) already goes phosphor via the §0
var remap (base file documents this at its own lines 30-32 and §10);
config card / inputs #lbBase #lbAmt #lbMtg / label.f / #lbSave #lbRefresh
(§2/§3/§4); NO .pill rule here at all (the "owner" / "You" pills at
app.js:1653 keep the base pill skin untouched); no display:none anywhere
(#lbBody is an AutoRefresh-driven live region, app.js:1665-1667);
no transform/movement (W15 — these rows are cursor:default anyway);
no animation added (nothing new for prefers-reduced-motion to switch off);
only --tv-* tokens already declared on #main by Phase 3a §0 are used.
========================================================================== */
/* rank cell (bare .dirico — this route only) — phosphor readout square:
panel fill + inset hairline ring, dim tabular digits for "#N" / "—".
Shape (border-radius:0) + font-family stay owned by Phase 3a §6. */
html[data-ui="terminal"] #main #lbBody .dirico{
background:var(--tv-panel2);
box-shadow:inset 0 0 0 1px var(--tv-line2);
color:var(--tv-dim);
font-variant-numeric:tabular-nums;
text-shadow:0 0 8px rgba(var(--tv-acc-rgb),.25);
}
/* === Phase 3b: /telegram === */
/* ============================================================================
TARA — S44 Phase 3b patch · route /telegram (slug telegram)
SKIN: TERMINAL PRO. Loads after skin-terminal-views.css; same scope oath —
every selector under html[data-ui="terminal"] and inside #main only.
GAPS FILLED (verified against js/app.js):
1. #tgStyleBody --bd remap — the owner "Send to channel now" section
divider is an INLINE style `border-top:1px solid var(--bd,#333)`
(app.js:3309, inside the #tgStyleBody innerHTML built at
app.js:3306-3316). `--bd:` is declared in NO css file in the staging
tree (grep-verified: styles.css, all skin files, all patches — zero
hits), so the var falls back to the neutral #333 — the one gray
hairline on an otherwise all-phosphor page. An inline style can't be
out-specificity'd, but its var() CAN be resolved: declaring --bd on
the #tgStyleBody container makes the same inline rule render the
phosphor hairline. Value = var(--tv-line2), the existing panel-line
token skin-terminal-views.css declares on #main (line 46). Phase 3a
never sets --bd anywhere, so this is a new property, not an override.
2. .tg-steps li::marker — the 3-step "Join our Telegram" ordered list
(app.js:3176-3180) is this route's only user-facing checklist. Base
styles.css:459-461 gives the text var(--muted) (already phosphor via
the Phase 3a remap) but leaves the list numbers at the browser
default, while the visually-equivalent rules checklist got accent
markers in Phase 3a (`.rules-list li::marker` — skin file line 466).
Same treatment here: markers in --tv-acc so the step numbers read as
phosphor prompts. Static color only — no motion, nothing needs a
prefers-reduced-motion off-switch.
NOT touched (already covered / must-not-break): .card/.badge win-loss-draw
banners (app.js:3213-3221), .btn/.btn.primary/.btn.red pause-resume keys,
inputs/selects/textareas of the bot-setup + announce cards, label.f,
details.exp setup guide, .tg-preview boxes (#tgPrev_*, skin file §11),
.empty loading/"owner has not set up" states (honest empty-states stay
visible) — all Phase 3a. No .pill rule here at all (the two "owner" pills
at app.js:3229/3253 keep the S43 recolor-only base skin); no display:none
anywhere; no transform (W15); no new animation/transition. The tgJoinPopup
modal copy of .tg-steps (app.js:3197) lives in #modalBg, outside this
patch's #main-only oath — deliberately left alone.
========================================================================== */
/* 1 · owner style-card divider — resolve the inline var(--bd,#333)
(app.js:3309) to the phosphor panel line instead of its gray fallback */
html[data-ui="terminal"] #main #tgStyleBody{--bd:var(--tv-line2)}
/* 2 · join-steps list numbers — phosphor markers, mirroring the Phase 3a
.rules-list li::marker precedent (skin-terminal-views.css:466) */
html[data-ui="terminal"] #main .tg-steps li::marker{color:var(--tv-acc)}
/* === Phase 3b: /signals === */
/* ============================================================================
TARA — S44 Phase 3b patch · route /signals (slug signals-manage — owner
Publish / manage published signals).
SKIN: TERMINAL PRO. Loads after skin-terminal-views.css; same scope oath —
every selector under html[data-ui="terminal"] and inside #main only.
GAP AUDIT RESULT (verified against js/app.js): ONE real gap (see GAP
FILLED below). Every other element this route renders inside #main is
already covered by the Phase 3a component layer:
· h1.page-h + p.page-sub (app.js:1736) — §1 prompt cursor + dim sub;
· .grid.g4 stat row via statCard() → .card.stat .t/.v/.s with .profit/.loss
variants (app.js:1737-1741, statCard app.js:551) — §2;
· honest no-count / Hyper footnotes (.muted, app.js:1743-1744) — §11;
· #sigBody select-bar (app.js:1951): #pubSelAll checkbox — §4 checkbox
accent (its inline accent-color:var(--primary) resolves phosphor via the
§0 var remap); #pubDelSel = .btn.sm.red + dynamic disabled (the ONLY
state this view toggles, wirePubSelect app.js:1960-1963) — §3 .btn.red +
.btn:disabled; no classList state-class is ever toggled inside #main on
this route (grep-verified: wireSigRows/wirePubSelect flip only .checked /
.disabled props);
· session group cards (publishedGroupsHtml app.js:1931-1947): .card frame
§2, .badge.win/.loss/.draw §6, count .pill §6, honest .empty state
("No Signals Published Yet…", app.js:1932) §11 — stays fully visible;
· manage rows (sigRow manage=true, app.js:1970-2008): .trow + dashed rule +
hover §6, .sig-chk §4, .dirico.call/.put §6, .meta .a/.m §6, confidence
inline colors var(--green-hi)/var(--yellow) (app.js:1971) → §0 remap,
outcome key-strip W/M1/L/ATM/AV/LP/NA/✎/🗑 = .btn.sm(.green/.red)
(app.js:1997-2007) — §3;
GAP FILLED: native checkbox UA chrome — #pubSelAll (app.js:1951) and the
per-row .sig-chk boxes (app.js:1990, inside #sigBody) render UA-light
widget chrome on the phosphor panel. No color-scheme rule in the stack
reaches them: terminal-new-trade.css scopes color-scheme:dark to six
route-unique ids (its earlier draft's global "#main input" rule — which
this file's first version cited as covering these boxes — was narrowed
by the S47 sanity fix, invalidating that claim; caught by both S47
verifiers) and terminal-trades.css covers only #thFrom/#thTo. The rule
below mirrors the sibling convention with route-unique scoping; the tick
color itself needs nothing (inline accent-color:var(--primary) resolves
phosphor via the §0 var remap).
NOT touched (deliberate, with reasons):
· NO .pill rule at all — S43 tf/margin/mode pills (app.js:1992) and the
🚀 Hyper pill (app.js:1981) keep their inline hsl backgrounds winning;
· win/loss row tints are INLINE hsl at .05 alpha (app.js:1973) — inline
styles, only beatable with !important; same resting look as /published
(whose accepted patch also left them), so no override is smuggled in;
· no display:none anywhere (#sigBody is a live region — AutoRefresh full
redraw app.js:1749 + renderPublished refresh app.js:1954);
· no transform/movement (W15) and no animation added — nothing new for
prefers-reduced-motion to switch off;
· the row-tap detail modal + edit/delete-confirm modals (openPubSignal
app.js:2026-2066, openEditSignal app.js:2068-2089, wirePubSelect
app.js:1964-1966) live in #modalBg, OUTSIDE this patch's #main-only
scope (same call as terminal-telegram.css:35). Known Phase-3a-level
nit noted for the base file's owner, not patched here: #modalBg
.sig-dir.dir-call/.dir-put (app.js:2031) still glows with the legacy
literals of styles.css:190 because skin-terminal-views.css:494-496
scopes .dir-call/.dir-put to #main only (aurora's base covers #modalBg
too, skin-aurora-views.css:278-283).
========================================================================== */
/* Native checkbox scheme — the manage select-all box (#pubSelAll) and the
per-row .sig-chk boxes exist only on this route's #sigBody (renderPublished
manage=true): dark UA widget chrome instead of the light default. Tick
color already phosphor via the inline accent-color:var(--primary) remap. */
html[data-ui="terminal"] #main #pubSelAll,
html[data-ui="terminal"] #main #sigBody .sig-chk{
color-scheme:dark;
}
/* === Phase 4: /my-signals === */
/* ============================================================================
TARA — S44 Phase 4 patch · route /my-signals (slug my-signals)
SKIN: TERMINAL PRO. Loads after skin-terminal-views.css; same scope oath —
every selector under html[data-ui="terminal"] and inside #main only.
GAP FILLED (verified against js/app.js): SKIP signals render a BARE .dirico.
mySigRow (app.js:1574-1587) emits the direction cell at app.js:1581 as
`class="dirico ${skip?'':(g.direction==='call'?'call':'put')}"` with the
"⊘" glyph when trade_recommendation==='skip' (app.js:1575) — i.e. NO
.call/.put variant class. Base styles.css:175 gives bare .dirico size/grid/
weight only (width/height 34px, display:grid, font-weight:800 — no
background, no color); styles.css:176-177 paint only the .call/.put
variants. In the CURRENT skin-terminal-views.css the Phase 3a §6 rules
(lines 405-413) likewise style `.dirico` shape/mono plus `.dirico.call` /
`.dirico.put` fills only, and the one bare-.dirico fix that exists — the
Phase 3b /leaderboard section, lines 1170-1176 — is deliberately scoped to
`#lbBody .dirico` ("scoped to #lbBody … so nothing leaks to the .call/.put
call-sites", lines 1146-1148), so it can never reach this route. Result:
on /my-signals every call (▲ green square) and put (▼ red square) row
opens with a framed phosphor cell while a skip row's "⊘" floats as naked
text in an invisible 34px box. Fix below: the same phosphor-readout
treatment the leaderboard rank cell got (panel fill + inset hairline ring),
with the glyph in --tv-faint to match the skin's existing skip semantics
(`.dir-skip{color:var(--tv-faint)}`, skin-terminal-views.css:497) — skip
stays visibly DIMMER than the win/loss-colored neighbours, honest
"no trade" reading. Route-unique scoping: the `data-mi` row attribute is
emitted ONLY by mySigRow (app.js:1580) and consumed only by this view's
wiring (app.js:1561) — grep-verified, no other occurrence in app.js — so
`.trow[data-mi]` confines the rule to /my-signals rows; :not(.call):not(.put)
leaves the variant cells 100% owned by Phase 3a §6 (no override, pure gap).
Tokens used: --tv-panel2 / --tv-line2 / --tv-faint — all declared on #main
by skin-terminal-views.css §0 (lines 42-45). Static declarations only —
no animation/transition added, so nothing new needs a prefers-reduced-motion
off-switch.
NOT touched (already covered by the CURRENT skin-terminal-views.css /
must-not-break):
— h1.page-h + p.page-sub (app.js:1556): §1 prompt cursor + dim sub
(lines 102-110).
— #mySigClear .btn.red + the "＋ New Signal" a.btn (app.js:1557): §3
buttons (lines 190-238) — class-based, tag-agnostic.
— Honest empty state "No signal generated yet" (app.js:1558): §2 .card +
§11 .empty (lines 606-610) — stays fully visible, no display rule
anywhere in this file.
— List card / "Generated Signals" header / "latest N (max 50)" .muted
(app.js:1559): §2 + §11.
— .trow rows + dashed rule + hover + .meta .a/.m (app.js:1580-1583): §6
(lines 395-401); base hover is background-only (styles.css:174) — no
W15 exposure, nothing to pin.
— .dirico.call / .dirico.put (app.js:1581): §6 lines 406-413.
— outcome .badge.win/.loss (app.js:1576): §6 lines 420-427.
— ROUTE CAUTION (W/L marks feed the leaderboard): the [data-moc] W and L
keys are .btn.sm.green / .btn.sm.red and the [data-del-ts] delete key is
a plain .btn.sm (app.js:1578-1579, :1585) — §3 already renders the three
semantics distinct (green fill / red fill / neutral bracket key); no
restyle here and no hover movement (W15; the Phase 3a-wide .btn:active
press-scale, current file :204, remains the skin's press language —
post-click, unlike the aurora sibling whose base HOVER lift needed
pins — S47 verify corrected this line's earlier "never move" claim), and
their disabled/size mechanics stay base-owned.
— NO .pill rule here at all (S43 oath — this view emits no .pill, and none
is invented).
— The row-tap detail modal + clear-all confirm modal (openMySignal
app.js:1588-1618, showModal app.js:3411-3412) live in #modalBg, appended
to OUTSIDE #main — outside this patch's scope oath (same call as
the /telegram and /signals sections; the current file's §9/§12 #modalBg
rules already cover their table/tile/btn furniture).
— AutoRefresh full-view redraw (app.js:1572) rewrites #main's innerHTML —
everything here is stateless CSS on re-emitted classes/attributes; no
id-coupled writer is touched, no live region hidden.
— Pending W9 (5-factor color dots) is a FUTURE feature: no fake dots, no
reserved UI, nothing pre-built — only today's real DOM is skinned.
========================================================================== */
/* skip-signal direction cell (bare .dirico — this route's rows only):
phosphor readout square matching the leaderboard rank-cell precedent —
panel fill + inset hairline ring; "⊘" in faint phosphor per the skin's
.dir-skip semantics. Shape (border-radius:0) + mono font stay owned by
Phase 3a §6; .call/.put cells are excluded and untouched. */
html[data-ui="terminal"] #main .trow[data-mi] .dirico:not(.call):not(.put){
background:var(--tv-panel2);
box-shadow:inset 0 0 0 1px var(--tv-line2);
color:var(--tv-faint);
}
/* === Phase 4: /owner === */
/* ============================================================================
TARA — S44 Phase 4 patch · route /owner (slug owner-panel)
SKIN: TERMINAL PRO. Loads after skin-terminal-views.css; same scope oath —
every selector under html[data-ui="terminal"] and inside #main only.
Route facts (verified): VIEWS['/owner'] = app.js:2437-2734; the route is
PERMANENTLY excluded from AutoRefresh (guards app.js:310/:345/:348) and
renders ONE-TIME SECRETS (2FA manual key app.js:2651, recovery codes
app.js:2658, agent device token #agTok app.js:2711) — nothing here blurs,
dims, hides or user-select-tricks any of them; two gaps below INCREASE
secret legibility. No animation is added anywhere in this file (color /
shadow / radius / scheme / var declarations only), so nothing new needs a
prefers-reduced-motion off-switch, and nothing added implies live updating.
GAPS FILLED (each verified against js/app.js by my own grep, and against
the CURRENT skin-terminal-views.css, which has NO rule for any op-* class
or /owner-unique id — grep-verified: zero hits for op-fcard/op-toggle/
op-sw/opCountdown/opExpDays/op2fa/opAgentMsg in that file; its color-scheme
rules cover only #tdate/#amount/#payout/#entry/#exit/#asset (:803-810),
#thFrom/#thTo (:958-961) and #pubSelAll/#sigBody .sig-chk (:1287-1290)):
1 · Control-deck geometry — the view injects its own