/* ============================================================================ TARA — skin-aurora-views.css (Phase 3a — core views, UI "aurora"). DERIVED from ../S43-login-previews/light-A-aurora.html (login-only final): glass cards, pastel indigo→teal→rose accents, rounded corners, soft shadows, Inter type. Reuses the --ash- tokens declared at html level by the Phase-2 sibling skin-aurora-shell.css so gate + shell + views read as ONE design. Loads after styles.css + skin-aurora-shell.css so it wins. OATH SELF-CHECK (contract CONTRACT-S44-views.md): 1. Every rule is scoped under html[data-ui="aurora"] AND inside #main / #modalBg / #toast only. #gate, .gp-*, #sidebar, body: untouched. 2. CSS only. No pseudo-element TEXT content is added anywhere (decorative gradients only), so the banned-words rule is trivially met. 3. S43 pills (tf/margin/mode) in sigRow: recolored via the .pill base only (their inline semantic tint backgrounds are left in place); never hidden, never reordered. .hidden semantics untouched. #modalBg overlay stacking untouched (no z-index/display rules). #toast .show visibility mechanics untouched (colors only). Canvas container heights untouched. .pairs button / payout lists: color-only hover, zero movement (W15). .chips/.tabs/.seg button.on stay clearly distinct (solid gradient fill + white text vs. quiet rest state). 920px grid collapses not fought. 4. Perf: NO new @keyframes at all (av- prefix rule trivially met), no new infinite animations, no backdrop-filter added on repeated surfaces (solid high-opacity white instead — same call as the Phase-2 shell); reduced-motion respected at the end. 6. Aurora language: glass cards, indigo-teal-rose gradient, soft small hover lifts (reduced-motion-safe). Note: the truth file styles no scrollbars → none are styled here. Note: app.js result coloring = .green/.red utility classes (+ .badge win/loss/draw, .stat.profit/.loss, .dirico.call/.put, .pl) — there are no .plus/.minus classes in the real markup; mapped accordingly. ========================================================================== */ /* ---------------- base text inside views --------------------------------- */ html[data-ui="aurora"] #main{ font-family:var(--ash-font); } html[data-ui="aurora"] #main .green, html[data-ui="aurora"] #modalBg .green{ color:var(--ash-up); } html[data-ui="aurora"] #main .red, html[data-ui="aurora"] #modalBg .red{ color:var(--ash-down); } html[data-ui="aurora"] #modalBg .muted{ color:var(--ash-ink-faint); } /* ---------------- page headers ------------------------------------------- */ html[data-ui="aurora"] #main .page-h{ color:var(--ash-ink); font-weight:800; letter-spacing:-.5px; position:relative; padding-bottom:10px; margin-bottom:6px; } html[data-ui="aurora"] #main .page-h::after{ /* accent underline (decoration only, no text) */ content:""; position:absolute; left:0; bottom:2px; width:52px; height:4px; border-radius:999px; background:var(--ash-grad); opacity:.9; } html[data-ui="aurora"] #main .page-sub{ color:var(--ash-ink-soft); } /* ---------------- cards / stats / tiles / grids -------------------------- */ html[data-ui="aurora"] #main .card{ position:relative; background:rgba(255,255,255,.62); border:1px solid var(--ash-glass-brd); border-radius:var(--ash-radius); padding:22px; box-shadow:var(--ash-shadow-1); } html[data-ui="aurora"] #main .card::before{ /* top sheen from the final's .glass::after — transparent + pointer-events:none, sits over content exactly like the truth file's .glass::after; children are NOT re-positioned (sticky/absolute descendants like .gen-progress keep their own positioning) */ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.30), transparent 40%); } html[data-ui="aurora"] #main .stat{ background:rgba(255,255,255,.62); border:1px solid var(--ash-glass-brd); border-radius:var(--ash-radius); box-shadow:var(--ash-shadow-1); } html[data-ui="aurora"] #main .stat:hover{ transform:translateY(-3px); } html[data-ui="aurora"] #main .stat::after{ /* hover: soft aurora shadow, not neon */ box-shadow:var(--ash-shadow-2); } html[data-ui="aurora"] #main .stat::before{ background:radial-gradient(circle, rgba(99,102,241,.20), transparent 70%); } html[data-ui="aurora"] #main .stat.profit::before{ background:radial-gradient(circle, rgba(22,160,111,.18), transparent 70%); } html[data-ui="aurora"] #main .stat.loss::before{ background:radial-gradient(circle, rgba(229,72,77,.16), transparent 70%); } html[data-ui="aurora"] #main .stat .t{ color:var(--ash-ink-faint); letter-spacing:.14em; } html[data-ui="aurora"] #main .stat .v{ background:none; -webkit-background-clip:initial; background-clip:initial; color:var(--ash-ink); filter:none; font-variant-numeric:tabular-nums; } html[data-ui="aurora"] #main .stat.profit .v{ background:none; -webkit-background-clip:initial; background-clip:initial; color:var(--ash-up); } html[data-ui="aurora"] #main .stat.loss .v{ background:none; -webkit-background-clip:initial; background-clip:initial; color:var(--ash-down); } html[data-ui="aurora"] #main .stat .s{ color:var(--ash-ink-soft); } html[data-ui="aurora"] #main .tile, html[data-ui="aurora"] #modalBg .tile{ background:rgba(255,255,255,.55); border:1px solid var(--ash-field-brd); border-radius:var(--ash-radius-sm); } html[data-ui="aurora"] #main .tile .k, html[data-ui="aurora"] #modalBg .tile .k{ color:var(--ash-ink-faint); font-weight:700; letter-spacing:.04em; } html[data-ui="aurora"] #main .tile .v, html[data-ui="aurora"] #modalBg .tile .v{ color:var(--ash-ink); } /* ---------------- buttons ------------------------------------------------- */ html[data-ui="aurora"] #main .btn, html[data-ui="aurora"] #modalBg .btn{ border:1.5px solid var(--ash-field-brd); border-radius:var(--ash-radius-sm); background:var(--ash-field); color:var(--ash-ink); font-weight:700; box-shadow:var(--ash-shadow-1); backdrop-filter:none; -webkit-backdrop-filter:none; transition:transform .3s var(--ash-ease-back), box-shadow .3s var(--ash-ease), border-color .3s; } html[data-ui="aurora"] #main .btn:hover, html[data-ui="aurora"] #modalBg .btn:hover{ transform:translateY(-2px); border-color:var(--ash-accent); box-shadow:var(--ash-shadow-2); } html[data-ui="aurora"] #main .btn:active, html[data-ui="aurora"] #modalBg .btn:active{ transform:translateY(0) scale(.985); } html[data-ui="aurora"] #main .btn:focus-visible, html[data-ui="aurora"] #modalBg .btn:focus-visible{ outline:none; box-shadow:var(--ash-glow); } html[data-ui="aurora"] #main .btn.primary, html[data-ui="aurora"] #modalBg .btn.primary{ border:none; color:#fff; background:var(--ash-grad); background-size:180% 180%; box-shadow:0 8px 22px rgba(99,102,241,.32); transition:transform .3s var(--ash-ease-back), box-shadow .3s var(--ash-ease), background-position .6s var(--ash-ease); } html[data-ui="aurora"] #main .btn.primary:hover, html[data-ui="aurora"] #modalBg .btn.primary:hover{ transform:translateY(-2px); filter:none; background-position:100% 0; box-shadow:0 14px 30px rgba(99,102,241,.4); } html[data-ui="aurora"] #main .btn.primary::after, html[data-ui="aurora"] #modalBg .btn.primary::after{ display:none; animation:none; } /* base infinite shine sweep off (perf) */ html[data-ui="aurora"] #main .btn.primary:disabled, html[data-ui="aurora"] #modalBg .btn.primary:disabled{ opacity:.45; box-shadow:none; transform:none; } html[data-ui="aurora"] #main .btn.primary.is-scanning{ animation:none; filter:none; } /* base infinite pulse off (perf) */ html[data-ui="aurora"] #main .btn.green, html[data-ui="aurora"] #modalBg .btn.green{ border:none; color:#fff; background:linear-gradient(120deg, #16a06f, #2dd4bf); box-shadow:0 6px 16px rgba(22,160,111,.30); } html[data-ui="aurora"] #main .btn.red, html[data-ui="aurora"] #modalBg .btn.red{ border:none; color:#fff; background:linear-gradient(120deg, #e5484d, #fb7185); box-shadow:0 6px 16px rgba(229,72,77,.30); } /* ---------------- inputs / selects / labels ------------------------------ */ html[data-ui="aurora"] #main label.f, html[data-ui="aurora"] #modalBg label.f{ color:var(--ash-ink-soft); font-weight:700; } html[data-ui="aurora"] #main input, html[data-ui="aurora"] #main select, html[data-ui="aurora"] #main textarea, html[data-ui="aurora"] #modalBg input, html[data-ui="aurora"] #modalBg select, html[data-ui="aurora"] #modalBg textarea{ background:var(--ash-field); border:1.5px solid var(--ash-field-brd); color:var(--ash-ink); border-radius:var(--ash-radius-sm); font-weight:500; transition:border-color .3s, box-shadow .3s, background .3s; } html[data-ui="aurora"] #main input::placeholder, html[data-ui="aurora"] #main textarea::placeholder, html[data-ui="aurora"] #modalBg input::placeholder, html[data-ui="aurora"] #modalBg textarea::placeholder{ color:var(--ash-ink-faint); font-weight:400; } html[data-ui="aurora"] #main input:focus, html[data-ui="aurora"] #main select:focus, html[data-ui="aurora"] #main textarea:focus, html[data-ui="aurora"] #modalBg input:focus, html[data-ui="aurora"] #modalBg select:focus, html[data-ui="aurora"] #modalBg textarea:focus{ outline:none; border-color:var(--ash-accent); box-shadow:var(--ash-glow); background:var(--ash-bg-2); } html[data-ui="aurora"] #main select option, html[data-ui="aurora"] #modalBg select option{ background:#fff; color:var(--ash-ink); } html[data-ui="aurora"] #main .checklist label, html[data-ui="aurora"] #modalBg .checklist label{ color:var(--ash-ink-soft); } html[data-ui="aurora"] #main .checklist input, html[data-ui="aurora"] #main .pcheck input, html[data-ui="aurora"] #modalBg .checklist input{ accent-color:var(--ash-accent); } /* ---------------- chips / tabs / segs (active .on stays distinct) --------- */ html[data-ui="aurora"] #main .chips, html[data-ui="aurora"] #main .tabs{ background:var(--ash-glass-2); border:1px solid var(--ash-field-brd); border-radius:var(--ash-radius-sm); backdrop-filter:none; -webkit-backdrop-filter:none; } html[data-ui="aurora"] #main .chips button, html[data-ui="aurora"] #main .tabs button{ color:var(--ash-ink-soft); border-radius:10px; transition:all .3s var(--ash-ease); } html[data-ui="aurora"] #main .chips button:hover, html[data-ui="aurora"] #main .tabs button:hover{ color:var(--ash-ink); } html[data-ui="aurora"] #main .chips button.on, html[data-ui="aurora"] #main .tabs button.on{ color:#fff; background:var(--ash-grad); border:none; box-shadow:var(--ash-shadow-1); } html[data-ui="aurora"] #main .seg button, html[data-ui="aurora"] #modalBg .seg button{ border:1.5px solid var(--ash-field-brd); border-radius:var(--ash-radius-sm); background:var(--ash-field); color:var(--ash-ink-soft); } html[data-ui="aurora"] #main .seg button.on, html[data-ui="aurora"] #main .seg.res button.on, html[data-ui="aurora"] #modalBg .seg button.on, html[data-ui="aurora"] #modalBg .seg.res button.on{ color:#fff; background:var(--ash-grad); border-color:transparent; box-shadow:var(--ash-shadow-1); } html[data-ui="aurora"] #main .seg button.on-call, html[data-ui="aurora"] #modalBg .seg button.on-call{ color:#fff; background:linear-gradient(120deg, #16a06f, #2dd4bf); border-color:transparent; box-shadow:0 6px 16px rgba(22,160,111,.28); } html[data-ui="aurora"] #main .seg button.on-put, html[data-ui="aurora"] #modalBg .seg button.on-put{ color:#fff; background:linear-gradient(120deg, #e5484d, #fb7185); border-color:transparent; box-shadow:0 6px 16px rgba(229,72,77,.28); } /* locked market tab (weekend/holiday) — quiet, still obviously off */ html[data-ui="aurora"] #main button.is-locked, html[data-ui="aurora"] #main button.is-locked:hover{ opacity:.45; filter:grayscale(.4); transform:none; } /* ---------------- badges + S43 pills (recolor ONLY) ----------------------- */ html[data-ui="aurora"] #main .badge, html[data-ui="aurora"] #modalBg .badge{ font-weight:800; } html[data-ui="aurora"] #main .badge.win, html[data-ui="aurora"] #modalBg .badge.win{ background:rgba(22,160,111,.12); color:var(--ash-up); border-color:rgba(22,160,111,.30); } html[data-ui="aurora"] #main .badge.loss, html[data-ui="aurora"] #modalBg .badge.loss{ background:rgba(229,72,77,.12); color:var(--ash-down); border-color:rgba(229,72,77,.30); } html[data-ui="aurora"] #main .badge.draw, html[data-ui="aurora"] #modalBg .badge.draw{ background:rgba(120,130,180,.12); color:var(--ash-ink-soft); border-color:var(--ash-field-brd); } /* .pill: base recolor for light glass. The S43 tf/margin/mode pills carry their semantic tints as inline backgrounds — those inline values win by design and are deliberately NOT overridden (money-honesty display: same hue coding as dark, readable on white). Text/border only here. */ html[data-ui="aurora"] #main .pill, html[data-ui="aurora"] #modalBg .pill{ background:rgba(120,130,180,.10); border:1px solid var(--ash-field-brd); color:var(--ash-ink-soft); font-weight:700; } /* ---------------- feed rows (.trow = trades, published sigRow, leaderboard, admin users) + sig-chk ------------------------------- */ html[data-ui="aurora"] #main .trow, html[data-ui="aurora"] #modalBg .trow{ border-bottom:1px solid var(--ash-glass-brd-2); } html[data-ui="aurora"] #main .trow:hover, html[data-ui="aurora"] #modalBg .trow:hover{ background:rgba(255,255,255,.55); } /* color only — no movement */ html[data-ui="aurora"] #main .trow .meta .a{ color:var(--ash-ink); } html[data-ui="aurora"] #main .trow .meta .m{ color:var(--ash-ink-faint); } html[data-ui="aurora"] #main .trow .pl .stake{ color:var(--ash-ink-faint); } html[data-ui="aurora"] #main .dirico.call, html[data-ui="aurora"] #modalBg .dirico.call{ background:rgba(22,160,111,.12); color:var(--ash-up); box-shadow:none; } html[data-ui="aurora"] #main .dirico.put, html[data-ui="aurora"] #modalBg .dirico.put{ background:rgba(229,72,77,.12); color:var(--ash-down); box-shadow:none; } html[data-ui="aurora"] #main .sig-chk{ accent-color:var(--ash-accent); } /* ---------------- sig-card (analyzer result + scan card) ------------------ */ html[data-ui="aurora"] #main .sig-card{ background:rgba(255,255,255,.66); border:1px solid var(--ash-glass-brd); border-radius:var(--ash-radius); box-shadow:var(--ash-shadow-2); } html[data-ui="aurora"] #main .sig-card.call{ border-color:rgba(22,160,111,.35); box-shadow:0 8px 30px rgba(22,160,111,.14), 0 30px 60px rgba(40,50,110,.10); } html[data-ui="aurora"] #main .sig-card.call::before{ background:radial-gradient(circle, rgba(22,160,111,.20), transparent 70%); } html[data-ui="aurora"] #main .sig-card.put{ border-color:rgba(229,72,77,.32); box-shadow:0 8px 30px rgba(229,72,77,.13), 0 30px 60px rgba(40,50,110,.10); } html[data-ui="aurora"] #main .sig-card.put::before{ background:radial-gradient(circle, rgba(229,72,77,.18), transparent 70%); } html[data-ui="aurora"] #main .sig-dir.dir-call, html[data-ui="aurora"] #modalBg .sig-dir.dir-call{ color:var(--ash-up); text-shadow:none; } html[data-ui="aurora"] #main .sig-dir.dir-put, html[data-ui="aurora"] #modalBg .sig-dir.dir-put{ color:var(--ash-down); text-shadow:none; } html[data-ui="aurora"] #main .sig-dir.dir-skip, html[data-ui="aurora"] #modalBg .sig-dir.dir-skip{ color:var(--ash-ink-faint); } html[data-ui="aurora"] #main .conf-bar{ background:rgba(120,130,180,.14); border:1px solid var(--ash-field-brd); } html[data-ui="aurora"] #main .conf-bar>i{ background:linear-gradient(90deg, #6366f1, #0ea5a4 70%, #16a06f); box-shadow:none; } html[data-ui="aurora"] #main .ticks{ color:var(--ash-ink-faint); } html[data-ui="aurora"] #main .rec-strong{ color:var(--ash-up); background:linear-gradient(120deg, rgba(22,160,111,.12), rgba(45,212,191,.10)); border-color:rgba(22,160,111,.30); box-shadow:none; } html[data-ui="aurora"] #main .rec-moderate{ color:#9a7412; background:rgba(212,160,23,.10); border-color:rgba(212,160,23,.30); } html[data-ui="aurora"] #main .rec-skip{ color:var(--ash-down); background:rgba(229,72,77,.10); border-color:rgba(229,72,77,.28); } html[data-ui="aurora"] #main .factor, html[data-ui="aurora"] #modalBg .factor{ border-bottom-color:var(--ash-glass-brd-2); } html[data-ui="aurora"] #main .factor .fbar, html[data-ui="aurora"] #main .fcard .fbar, html[data-ui="aurora"] #modalBg .factor .fbar{ background:rgba(120,130,180,.14); } html[data-ui="aurora"] #main .fcard, html[data-ui="aurora"] #modalBg .fcard{ background:rgba(255,255,255,.55); border:1px solid var(--ash-field-brd); border-radius:var(--ash-radius-sm); } html[data-ui="aurora"] #main .fcard.fs-bull{ border-color:rgba(22,160,111,.30); } html[data-ui="aurora"] #main .fcard.fs-bear{ border-color:rgba(229,72,77,.28); } html[data-ui="aurora"] #main .fs-bull, html[data-ui="aurora"] #modalBg .fs-bull{ color:var(--ash-up); } html[data-ui="aurora"] #main .fs-bear, html[data-ui="aurora"] #modalBg .fs-bear{ color:var(--ash-down); } /* scan/processing card — recolor only, base animation timing untouched */ html[data-ui="aurora"] #main .scan-card{ background:rgba(255,255,255,.66); } html[data-ui="aurora"] #main .scan-title{ background:var(--ash-grad); -webkit-background-clip:text; background-clip:text; color:transparent; } html[data-ui="aurora"] #main .radar{ background:radial-gradient(circle, rgba(99,102,241,.10), transparent 70%); border-color:rgba(99,102,241,.25); box-shadow:0 0 18px rgba(99,102,241,.18), inset 0 0 14px rgba(14,165,164,.12); } html[data-ui="aurora"] #main .scanrow .sname{ color:var(--ash-ink-soft); } html[data-ui="aurora"] #main .scanrow .sline{ background:rgba(120,130,180,.14); } html[data-ui="aurora"] #main .scanrow .sline i{ background:linear-gradient(90deg, transparent, rgba(99,102,241,.75), rgba(14,165,164,.85), transparent); background-size:50% 100%; background-repeat:no-repeat; } html[data-ui="aurora"] #main .scan-foot{ color:var(--ash-ink-faint); } html[data-ui="aurora"] #main .scan-dots i{ background:var(--ash-accent); } /* ---------------- pair grid / payout lists (W15: no movement) ------------- */ html[data-ui="aurora"] #main .pairs button{ border:1.5px solid var(--ash-field-brd); border-radius:var(--ash-radius-sm); background:var(--ash-field); color:var(--ash-ink-soft); transition:border-color .25s, color .25s, background .25s, box-shadow .3s; /* color-only, position stays put */ } html[data-ui="aurora"] #main .pairs button:hover{ background:#fff; color:var(--ash-ink); } html[data-ui="aurora"] #main .pairs button.on{ color:#fff; background:var(--ash-grad); border-color:transparent; box-shadow:0 6px 16px rgba(99,102,241,.28); } html[data-ui="aurora"] #main .pairs button.on::after{ display:none; } /* base shine sweep off */ html[data-ui="aurora"] #main .pairs button.on::before, html[data-ui="aurora"] #main .pcheck label.on::before{ background:#fff; animation:none; box-shadow:none; } html[data-ui="aurora"] #main .pcheck label{ border:1.5px solid var(--ash-field-brd); border-radius:var(--ash-radius-sm); background:var(--ash-field); color:var(--ash-ink-soft); } html[data-ui="aurora"] #main .pcheck label.on{ color:#fff; background:var(--ash-grad); border-color:transparent; box-shadow:0 6px 16px rgba(99,102,241,.28); } /* ---------------- time spinner -------------------------------------------- */ html[data-ui="aurora"] #main .spin .num{ background:var(--ash-field); border:1.5px solid var(--ash-field-brd); color:var(--ash-ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.6); } html[data-ui="aurora"] #main .spin .sb{ background:rgba(120,130,180,.12); color:var(--ash-ink-soft); } html[data-ui="aurora"] #main .spin .sb:hover{ background:var(--ash-accent); color:#fff; } html[data-ui="aurora"] #main .spin .cap{ color:var(--ash-ink-faint); } html[data-ui="aurora"] #main .spin .cap.live{ color:var(--ash-teal); } /* ---------------- heatmap -------------------------------------------------- */ html[data-ui="aurora"] #main .hm .d{ color:var(--ash-ink-soft); } html[data-ui="aurora"] #main .hm .d:hover{ box-shadow:0 4px 14px rgba(40,50,110,.18); } html[data-ui="aurora"] #main .hm .d.sel{ outline:2px solid var(--ash-accent); box-shadow:0 0 0 3px rgba(99,102,241,.22); } html[data-ui="aurora"] #main .hm-h{ color:var(--ash-ink-faint); } html[data-ui="aurora"] #main .hm-detail-in{ background:rgba(255,255,255,.55); border:1px solid var(--ash-field-brd); border-radius:var(--ash-radius-sm); } html[data-ui="aurora"] #main .hm-detail .hd-wk{ color:var(--ash-ink); } html[data-ui="aurora"] #main .hm-detail .hd-dt{ color:var(--ash-ink-soft); } html[data-ui="aurora"] #main .hm-detail .hd-pl.green{ color:var(--ash-up); } html[data-ui="aurora"] #main .hm-detail .hd-pl.red{ color:var(--ash-down); } /* ---------------- published feed: pub-cols + next-signal + rules ---------- */ html[data-ui="aurora"] #main .pub-col-h{ color:var(--ash-ink); font-weight:800; letter-spacing:.05em; text-transform:uppercase; font-size:12px; } html[data-ui="aurora"] #main .nextsig-row{ background:var(--ash-grad-soft); border:1px solid rgba(99,102,241,.28); box-shadow:var(--ash-shadow-1); border-radius:var(--ash-radius-sm); } html[data-ui="aurora"] #main .nextsig-row .nextsig-cd{ color:var(--ash-gold); } html[data-ui="aurora"] #main .rules-card{ background:rgba(255,255,255,.62); border:1px solid var(--ash-glass-brd); border-radius:var(--ash-radius); box-shadow:var(--ash-shadow-1); } html[data-ui="aurora"] #main .rules-head{ color:var(--ash-ink); } html[data-ui="aurora"] #main .rules-head:hover{ background:rgba(255,255,255,.5); } html[data-ui="aurora"] #main .rules-arrow{ color:var(--ash-ink-faint); } html[data-ui="aurora"] #main .rules-list li{ color:var(--ash-ink-soft); } html[data-ui="aurora"] #main .rules-list li::marker{ color:var(--ash-accent); } /* ---------------- tables (inline-styled inside cards) ------------- */ html[data-ui="aurora"] #main table, html[data-ui="aurora"] #modalBg table{ color:var(--ash-ink); } html[data-ui="aurora"] #main table th, html[data-ui="aurora"] #modalBg table th{ color:var(--ash-ink-faint); font-weight:700; } html[data-ui="aurora"] #main table tr:not(:last-child) td, html[data-ui="aurora"] #modalBg table tr:not(:last-child) td{ border-bottom:1px solid var(--ash-glass-brd-2); } /* ---------------- generate & publish extras ------------------------------- */ html[data-ui="aurora"] #main .gen-progress{ background:rgba(255,255,255,.88); border:1px solid var(--ash-glass-brd); box-shadow:var(--ash-shadow-1); color:var(--ash-ink); backdrop-filter:none; -webkit-backdrop-filter:none; } html[data-ui="aurora"] #main .notice{ color:#9a7412; background:rgba(212,160,23,.09); border-color:rgba(212,160,23,.28); } html[data-ui="aurora"] #main .lock-note{ color:var(--ash-ink-soft); background:rgba(255,255,255,.55); border-color:var(--ash-field-brd); } html[data-ui="aurora"] #main .hol-chip{ color:var(--ash-ink); background:rgba(255,255,255,.6); border-color:var(--ash-field-brd); } html[data-ui="aurora"] #main .hol-chip button{ color:var(--ash-ink-faint); } html[data-ui="aurora"] #main .hol-chip button:hover{ color:var(--ash-down); background:rgba(229,72,77,.10); } /* ---------------- settings: theme picker + expanders ---------------------- */ html[data-ui="aurora"] #main .theme-swatch{ background:rgba(255,255,255,.55); border:1px solid var(--ash-field-brd); border-radius:var(--ash-radius-sm); } html[data-ui="aurora"] #main .theme-swatch:hover{ border-color:var(--ash-accent); } html[data-ui="aurora"] #main .theme-swatch.on{ border-color:var(--ash-accent); box-shadow:var(--ash-glow); } html[data-ui="aurora"] #main .theme-swatch .tn{ color:var(--ash-ink-soft); } html[data-ui="aurora"] #main .theme-swatch.on .tn{ color:var(--ash-ink); } html[data-ui="aurora"] #main details.exp{ background:rgba(255,255,255,.55); border:1px solid var(--ash-field-brd); border-radius:var(--ash-radius-sm); backdrop-filter:none; -webkit-backdrop-filter:none; } html[data-ui="aurora"] #main details.exp summary{ color:var(--ash-ink); } html[data-ui="aurora"] #main .tg-preview{ background:rgba(255,255,255,.6); border-color:var(--ash-field-brd); color:var(--ash-ink); } html[data-ui="aurora"] #main .shot-prev img, html[data-ui="aurora"] #main .shot-img, html[data-ui="aurora"] #modalBg .shot-img{ border-color:var(--ash-field-brd); } html[data-ui="aurora"] #main .ui-av, html[data-ui="aurora"] #modalBg .ui-av{ background-color:rgba(255,255,255,.6); border-color:var(--ash-field-brd); } html[data-ui="aurora"] #modalBg .ui-av-letter{ color:var(--ash-ink); } /* ---------------- empty states / loaders ---------------------------------- */ html[data-ui="aurora"] #main .empty, html[data-ui="aurora"] #modalBg .empty{ color:var(--ash-ink-faint); } html[data-ui="aurora"] #main .skeleton{ background:rgba(120,130,180,.12); } html[data-ui="aurora"] #main .spinner, html[data-ui="aurora"] #modalBg .spinner{ border-color:rgba(99,102,241,.25); border-top-color:var(--ash-accent); } html[data-ui="aurora"] #main svg text{ fill:var(--ash-ink-faint); } /* ---------------- modal + toast ------------------------------------------- */ /* overlay: recolor + softer veil only — display/stacking untouched */ html[data-ui="aurora"] #modalBg{ background:rgba(30,40,90,.30); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); /* single overlay = cheap */ } html[data-ui="aurora"] #modalBg .modal{ background:rgba(255,255,255,.94); color:var(--ash-ink); border:1px solid var(--ash-glass-brd); border-radius:var(--ash-radius); box-shadow:var(--ash-shadow-2); } html[data-ui="aurora"] #modalBg .modal h3{ color:var(--ash-ink); } /* toast: colors only — .show opacity/transform mechanics stay in base */ html[data-ui="aurora"] #toast{ background:rgba(255,255,255,.96); color:var(--ash-ink); border:1px solid var(--ash-glass-brd); box-shadow:var(--ash-shadow-2), inset 3px 0 0 var(--ash-accent); backdrop-filter:none; -webkit-backdrop-filter:none; } /* ---------------- reduced motion ------------------------------------------ */ @media (prefers-reduced-motion:reduce){ html[data-ui="aurora"] #main .btn:hover, html[data-ui="aurora"] #modalBg .btn:hover, html[data-ui="aurora"] #main .btn.primary:hover, html[data-ui="aurora"] #modalBg .btn.primary:hover, html[data-ui="aurora"] #main .btn:active, html[data-ui="aurora"] #modalBg .btn:active, html[data-ui="aurora"] #main .stat:hover{ transform:none; background-position:0 0; } } /* ---- Phase 3b-1: NEXT SIGNAL hero (dashboard/#published top row) ---------- */ html[data-ui="aurora"] #main .nextsig-row{ background:linear-gradient(120deg,rgba(99,102,241,.14),rgba(14,165,164,.12),rgba(251,113,133,.10)); border:1px solid rgba(99,102,241,.28); border-radius:22px; padding:16px 20px; font-size:15px; box-shadow:0 10px 26px rgba(99,102,241,.14), inset 0 1px 0 rgba(255,255,255,.35); } html[data-ui="aurora"] #main .nextsig-row .nextsig-cd{ font-size:30px; font-weight:800; background:linear-gradient(120deg,#6366f1,#0ea5a4); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:.03em; } @media (max-width:560px){ html[data-ui="aurora"] #main .nextsig-row .nextsig-cd{font-size:22px} } /* === Phase 3b: / === */ /* ============================================================================ TARA — S44 Phase 3b patch · route / (slug dashboard) SKIN: AURORA. Loads after skin-aurora-views.css; same scope oath — every selector under html[data-ui="aurora"] and inside #main only. Tokens are the --ash- set declared at html level by skin-aurora-shell.css; no new palette values are introduced anywhere in this file. GAPS FILLED (verified against js/app.js + js/charts.js + styles.css): 1. W15 — the P&L heatmap is dashboard-only (renderHeatmap 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 aurora 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 restyles .hm .d hover/sel (box-shadow + outline, skin-aurora-views.css:371-375) but never touches the transform property on any of the three states (grep-verified: no `transform` under any .hm selector in skin-aurora-views.css) — same W15 defect the terminal sibling patch fixed. Pin transform:none on exactly those three states; hover keeps base brightness (styles.css:240) + Phase 3a's soft shadow, selected keeps Phase 3a's accent outline + ring. (Base reduced-motion only shortens durations — styles.css:290 — it does not remove the scale, so this fix is needed regardless.) 2. Heatmap neutral cells ride the OLD paper-light token: cellColor() paints no-trade / zero days with inline background:var(--card2) (app.js:576-578, emitted :592) and the legend's middle swatch uses the same var (app.js:598). Aurora runs with html.light, where --card2 = #f5edd8 warm cream (styles.css:31) — a paper-theme value that clashes with the cool white glass card; neither aurora skin file remaps any base var (shell header: "app/theme vars stay untouched"). Re-seat the var on an existing ash token, scoped to #heatmap ONLY, so the inline var() lookups resolve cool without touching the inline styles themselves. The money-honest green/red intensity scale (app.js:577-578) and the .fut future tint (app.js:589) are fixed literals — untouched by design. 3. Day-detail "flat" status: showHmDetail() classes Break-even / No-trades as .hd-pl.flat (app.js:611-613), which base colors var(--muted) (styles.css:253) = warm #8a7d5c under html.light (styles.css:30). Phase 3a covers only .hd-pl.green/.red (skin-aurora-views.css:383-384) — .flat was missed; inked on ash so the honest neutral state reads as part of the skin (never hidden). 4. Equity-curve gridlines: Charts.area() strokes its y-ticks with the base var (stroke="var(--border)", charts.js:35) = warm rgba(120,100,60,.22) under html.light (styles.css:32). CSS beats presentation attributes, so one route-scoped rule (#equity is dashboard-only, app.js:513,532) re-strokes them on the cool ash hairline token. The curve/area colors themselves (Charts.GREEN/RED literals + gradient stops, charts.js:5, :45-48) stay JS-owned — retinting the stroke without its matching gradient stops would tear the chart apart, so deliberately NOT touched. 5. Win-rate donut headline: charts.js:69 asks for hi-contrast fill="var(--text)" on the 22px weight-800 center value, but Phase 3a's generic tick-label rule (#main svg text → ash-ink-faint, skin-aurora-views.css:469) flattens it to the same faint gray as its 10px "Win Rate" sub-label. Narrower selector (NOT a restatement of the 3a selector) re-inks only the weight-800 headline inside the dashboard-only #wrdonut (app.js:514,537); tick labels and the sub-label everywhere else keep the 3a faint fill. NOT touched (already covered / must-not-break): #nextSigRow (live 1s ticker, app.js:114-126, :3457) — no display rule anywhere here; base + Phase 3b-1 hero (skin-aurora-views.css:391-396, :505-520) own it. Stat cards (.stat profit/loss), chips .on (#dashRange/#hmRange), .trow/.dirico/ .badge/.pl, .empty, .page-h/.page-sub, .hm-detail-in, #main .muted (shell :211) all ride Phase 3a/shell unchanged. No .pill rule (S43 inline hsl backgrounds keep winning). Honest empty-states (app.js:532,538,542) stay visible. Static declarations only — no animation or transition added, so nothing new needs a prefers-reduced-motion off-switch. ========================================================================== */ /* 1 — P&L heatmap day cells — W15: a click target never moves. Kills the base sheet's hover/active/selected scale inside the aurora skin only; brightness + Phase 3a shadow/outline stay as the motionless signals. */ html[data-ui="aurora"] #main .hm .d:hover, html[data-ui="aurora"] #main .hm .d:active, html[data-ui="aurora"] #main .hm .d.sel{ transform:none; } /* 2 — neutral heatmap fills: re-seat --card2 on the ash hairline token so the inline background:var(--card2) cells + legend swatch resolve cool instead of paper-cream. Scoped to #heatmap only (#hmDetail and everything else keep the base var). */ html[data-ui="aurora"] #main #heatmap{ --card2:var(--ash-glass-brd-2); } /* 3 — day-detail neutral status (Break-even / No trades) on ash ink */ html[data-ui="aurora"] #main .hm-detail .hd-pl.flat{ color:var(--ash-ink-soft); } /* 4 — equity-curve y-tick gridlines on the cool ash hairline (CSS wins over the SVG's stroke="var(--border)" presentation attribute) */ html[data-ui="aurora"] #main #equity svg line{ stroke:var(--ash-glass-brd-2); } /* 5 — win-rate donut center value back to full ink (headline only; the sub-label and all tick labels keep Phase 3a's faint fill) */ html[data-ui="aurora"] #main #wrdonut svg text[font-weight="800"]{ fill:var(--ash-ink); } /* === Phase 3b: /new-trade === */ /* ============================================================================ TARA — S44 skin: AURORA — Phase 3b patch: route /new-trade (Log New Trade / Edit Trade form). Gap-fill ONLY — skin-aurora-views.css already covers this view's .card, details.exp + .checklist (accent-color via lines 171-175), .seg (#bCall/#bPut on-call/on-put + .res .on), inputs/selects/textarea + placeholders, .tile (#plPreview), .btn (.primary/.red, #saveTrade disabled state) and .shot-prev img border recolor. None of that is re-defined here. Native datetime/number widgets render UA-light, which matches this light skin — no scheme rule needed. Verified against js/app.js lines 619-825. Scope oath: every rule lives under html[data-ui="aurora"] #main. Money-safety: nothing hidden/resized (#vaNote, #shotPrev, checklist checkboxes untouched); no content-generating pseudo-elements on inputs; no transform added on clickables (W15). No new animations in this file, so there is nothing extra to switch off under prefers-reduced-motion. ========================================================================== */ /* -------------------------------------------------------------------------- EXTRA-PHOTO THUMBS (#xtraPrev) — app.js:754 emits each thumb with INLINE style "border-radius:8px;border:1px solid var(--border)". Those ride the base dark-theme vars, not the aurora --ash- tokens (the aurora skin deliberately keeps its own namespace and does not remap --border). Re-seat the frame on the ash tokens; inline style, so !important is required. Size (72px box, object-fit:cover) and the [data-xrm] remove buttons (.btn.sm.red — covered by the views file) stay as rendered. -------------------------------------------------------------------------- */ html[data-ui="aurora"] #main #xtraPrev img{ border-color:var(--ash-field-brd) !important; border-radius:var(--ash-radius-sm) !important; } /* === Phase 3b: /import === */ /* ============================================================================ TARA — S44 skin: AURORA — Phase 3b patch: route /import (Import Trades from CSV). Gap-fill ONLY — skin-aurora-views.css already covers this view's .card frames (how-to / payout / upload cards), .btn + .btn.primary incl. :disabled (#pickFile, #doImport, app.js:846/856/879-884), .tile (#dupCtl, app.js:850), .notice (#csvNotice no-date warning, app.js:893-894), .badge.draw (DUP tag, app.js:899), table th/td furniture inside #csvPreview (app.js:896-900), .muted, and .empty. None of that is re-defined here. Verified against js/app.js VIEWS['/import'], lines 828-903. GAPS FILLED HERE: 1) #payoutRange (app.js:841) — payout% drives every imported trade's win P&L (parseCSV(lastText,payout), app.js:888), yet no sheet in the stack skins input[type=range]: the slider renders as a raw UA track inside the aurora glass card. Track + thumb skinned (WebKit + Gecko), soft glow feedback only — zero movement (W15). 2) #payoutVal (app.js:841, rewritten by JS on every input, app.js:860) — gradient-text readout in the aurora indigo→teal ramp (same clip-text pattern the base file uses for .scan-title / .nextsig-cd). Recolor only, never hidden. 3) How-to
    (app.js:834-836) — 3a colors ::marker for .rules-list only (base line 405); these step numerals stay UA-default. Accent markers added (decoration, no text content). 4) #csvStatus (app.js:847/892) — JS writes "N new trades found · N duplicates detected". The aurora skin never remaps the base --yellow (#ffcf5b when the html lacks .light) — near-invisible on white glass, and it is a money-count. The is re-inked and the inline-styled span re-seated on --ash-gold; inline style, so !important is required (same pattern as the exemplar's #xtraPrev re-seat). 5) #skipDups (app.js:852) — checkbox ships inline "accent-color:var(--violet)", a base-theme var aurora does not remap; re-seated on --ash-accent (!important vs inline). Never hidden — it gates duplicate imports. DELIBERATELY NOT TOUCHED: scrollbars on the #csvPreview overflow wrapper (the aurora truth file styles no scrollbars — the 3a header says so, and this patch follows it); the inline opacity:.5 on duplicate preview rows (app.js:899, honest signal); the hidden file input (app.js:845, inline by design); #doImport's JS-driven display toggling (app.js:879-884). Scope oath: every rule lives under html[data-ui="aurora"] #main. Palette: only --ash- tokens plus rgba()/hex literals the aurora base files already use (rgba(99,102,241,.28), rgba(14,165,164,.12), rgba(120,130,180,.14), #6366f1, #0ea5a4, #fff) — no new palette values. W15: no transform anywhere in this file; hover/focus feedback is box-shadow/color only. No @keyframes and no animation added → nothing new to switch off under prefers-reduced-motion (color/shadow transitions only). No pseudo-element text content is added anywhere. ========================================================================== */ /* -------------------------------------------------------------------------- PAYOUT % SLIDER (#payoutRange, app.js:841) — aurora track + round thumb. The generic 3a input rule keeps painting the glass field frame around it; appearance:none only strips the native track/thumb chrome inside. -------------------------------------------------------------------------- */ html[data-ui="aurora"] #main #payoutRange{ -webkit-appearance:none;appearance:none; cursor:pointer;accent-color:var(--ash-accent); /* belt-and-braces fallback */ } html[data-ui="aurora"] #main #payoutRange::-webkit-slider-runnable-track{ height:6px;border-radius:999px; background:linear-gradient(90deg, rgba(99,102,241,.28), rgba(14,165,164,.12)); box-shadow:inset 0 0 0 1px var(--ash-field-brd); } html[data-ui="aurora"] #main #payoutRange::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none; width:16px;height:16px;margin-top:-5px; /* (6px track − 16px thumb)/2 */ border-radius:50%;background:#fff; border:1.5px solid var(--ash-accent); box-shadow:var(--ash-shadow-1); transition:box-shadow .3s var(--ash-ease); } html[data-ui="aurora"] #main #payoutRange:hover::-webkit-slider-thumb, html[data-ui="aurora"] #main #payoutRange:focus-visible::-webkit-slider-thumb{ box-shadow:var(--ash-glow); /* glow only — no movement (W15) */ } /* Gecko */ html[data-ui="aurora"] #main #payoutRange::-moz-range-track{ height:6px;border-radius:999px; background:rgba(120,130,180,.14); box-shadow:inset 0 0 0 1px var(--ash-field-brd); } html[data-ui="aurora"] #main #payoutRange::-moz-range-progress{ height:6px;border-radius:999px; background:linear-gradient(90deg, #6366f1, #0ea5a4); } html[data-ui="aurora"] #main #payoutRange::-moz-range-thumb{ width:14px;height:14px;border-radius:50%; background:#fff;border:1.5px solid var(--ash-accent); box-shadow:var(--ash-shadow-1); } /* -------------------------------------------------------------------------- PAYOUT READOUT (#payoutVal, app.js:841/860) — aurora gradient text, same clip-text pattern as the base .scan-title. Recolor only, never hidden. -------------------------------------------------------------------------- */ html[data-ui="aurora"] #main #payoutVal{ background:linear-gradient(120deg, #6366f1, #0ea5a4); -webkit-background-clip:text;background-clip:text;color:transparent; font-variant-numeric:tabular-nums; } /* -------------------------------------------------------------------------- HOW-TO STEPS (ol.muted, app.js:834-836) — accent numerals; 3a only does this for .rules-list (base line 405). Decoration only, no text added. -------------------------------------------------------------------------- */ html[data-ui="aurora"] #main .card ol.muted li::marker{ color:var(--ash-accent);font-weight:700; } /* -------------------------------------------------------------------------- FILE STATUS LINE (#csvStatus, app.js:847/892) — the new-trade count re-inked to full ink; the duplicate-count span ships an inline color:var(--yellow) (base pale #ffcf5b, unreadable on white glass) and is re-seated on the aurora gold. Inline style → !important required. Text content and visibility untouched (honest counts stay visible). -------------------------------------------------------------------------- */ html[data-ui="aurora"] #main #csvStatus b{color:var(--ash-ink)} html[data-ui="aurora"] #main #csvStatus span[style]{ color:var(--ash-gold) !important;font-weight:700; } /* -------------------------------------------------------------------------- SKIP-DUPLICATES CHECKBOX (#skipDups, app.js:852) — inline accent-color:var(--violet) rides the base dark-theme namespace, which the aurora skin deliberately does not remap; re-seat on the aurora accent. Inline style → !important required. Size/margins/visibility untouched. -------------------------------------------------------------------------- */ html[data-ui="aurora"] #main #skipDups{ accent-color:var(--ash-accent) !important; } /* === Phase 3b: /trades === */ /* ============================================================================ TARA — S44 Phase 3b patch · route /trades (Trade History) · skin AURORA Root: html[data-ui="aurora"] — identical to skin-aurora-views.css. GAP-FILL ONLY. Verified against js/app.js VIEWS['/trades'] (≈1056-1131) and openTrade/confirmDelete (≈1133-1168): every element in this view rides primitives already covered by skin-aurora-views.css / -shell.css — .trow/.dirico/.badge/.pl (feed rows), .chips, inputs/selects, .btn, .card, .empty, .shot-img, modal .tile/#mEdit/#mClose, and #main .muted (shell line 211). Two view-scoped hardening rules remain: 1) W15 — the per-row delete button inside #thList rows is a .btn, and the Aurora base gives every .btn a translateY(-2px) hover lift; on this row that shifts a money-adjacent click target sitting beside the row's own click handler. Neutralize the transform for row buttons ONLY — hover feedback is kept (accent border-color + shadow from the base rule still apply), nothing is hidden or resized. 2) #thFrom / #thTo native date widgets currently look correct on the light glass only because NO color-scheme exists anywhere in the stack; pin color-scheme:light on exactly these two inputs so the UA calendar indicator/popup keep rendering light regardless of OS theme or future stack changes. (These inputs are never re-rendered — app.js draw() writes only #thCount + #thList — so no re-render dependency.) No layout, no display, no pseudo-element text, and no animation is added (nothing new for reduced-motion to switch off). ========================================================================== */ /* W15: no hover movement on the money-adjacent per-row delete .btn */ html[data-ui="aurora"] #main #thList .trow .btn:hover{ transform:none; } /* pin light UA widgets on the custom-range date fields */ html[data-ui="aurora"] #main #thFrom, html[data-ui="aurora"] #main #thTo{ color-scheme:light; } /* === Phase 3b: /analytics === */ /* ============================================================================ TARA — S44 skin: AURORA — Phase 3b patch: route /analytics (Analytics). Gap-fill ONLY — skin-aurora-views.css already covers this view's .page-h/ .page-sub, the #anRange range chips + .on state (app.js:1242), the two statCard .grid.g4 rows incl. .profit/.loss variants (app.js:1259-1266, statCard :551 → views §stat 68-86), .card, .badge.win/.loss (:222-229), .green/.red (:36-39), .empty honest states (:462, app.js:1245 + groupPerf "No data" :1297) and chart label text via `#main svg text` (:469). None of that is re-defined here. Verified against js/app.js lines 1170-1301 (VIEWS['/analytics'] :1237, disciplineCard :1209, groupPerf :1295) and charts.js lines 74-95. Scope oath: every rule lives under html[data-ui="aurora"] #main. WHY THIS ROUTE HAS GAPS AT ALL: the aurora skin deliberately keeps its own --ash- namespace and never remaps the base dark-theme tokens (unlike the terminal skin, whose Phase 3a remap already rescues these spots — see terminal-analytics.css header). So every INLINE style app.js writes with var(--border) / var(--card2) / var(--primary) still resolves to the dark :root values (styles.css:5,12-13): rgba(255,255,255,.10) borders and rgba(255,255,255,.05) tracks — white-on-white, invisible on aurora's light glass. All fixes below therefore re-point those custom properties on route-unique containers (inline `var()` re-resolves against the inherited custom property — no fight with the inline styles, and, except for one divider strip, no !important). Values are existing --ash- tokens only. GAPS FILLED (evidence = js/app.js line refs): 1. Breakdown row dividers — Strategy #byStrat (:1282) and Session #bySession (:1284), row markup groupPerf :1299, plus Emotional Analysis #byEmotion rows (:1292) all carry INLINE `border-bottom:1px solid var(--border)` → invisible on light glass. Re-pointed to --ash-glass-brd-2, the same token Phase 3a uses for .trow (:247) and table row rules (:412-415). Last row's trailing divider is stripped to match §tables' tr:not(:last-child) treatment (:412) — that one needs !important (inline style). 2. Emotion win-rate meters (#byEmotion, app.js:1292) — track is inline `background:var(--card2)` (invisible white .05), fill is inline `background:var(--primary)` (dark-theme #5b8dff, off-palette here). Track → --ash-glass-brd-2 (the views file's own meter-track tone, cf. .conf-bar/.fbar rgba(120,130,180,…) :285,:304); fill → --ash-accent. 3. Discipline & Streaks meters (disciplineCard bar() :1213-1215 — Rules checklist / Emotional control / Journaling / Sizing bars :1229-1232): identical inline var(--card2) track + var(--primary) fill, same fix. The card exposes NO id/class hook (noted by the terminal sibling patch too), so it is anchored via the route-unique range-chips row: `.between:has(> #anRange) ~ .card` (#anRange renders only on /analytics, app.js:1242-1243). The anchor also sweeps the Daily-P&L card and the range-empty card — harmless: nothing in them consumes --card2/--primary. If a legacy browser lacks :has(), the rule simply no-ops and the card stays as it renders today — degradation, never breakage. 4. Daily P&L zero-axis (#daily, app.js:1268/:1279) — Charts.bar draws the axis as `` (charts.js:94) → invisible white line on the light card. --border re-pointed on #daily to --ash-field-brd (a touch stronger than the row-divider token: it is the zero line separating profit bars from loss bars — money-honest readability). Bar fills stay the hard green/red literals (charts.js:5) — correct data encoding on light; donut PALETTE + legend swatches (:1288-1289) are data colors and untouched. NOT touched (deliberate): grade number colors in disciplineCard are inline hex literals (:1212) — legible on white as-is, out of CSS reach without style-attr hacks; variant-less 🏆/🎯 badges (:1219-1220) render frameless from base styles.css:152 on every route/skin — a base-skin decision, not patched per-route; .bar-grow entrance animation belongs to base styles.css (its reduced-motion rule covers it); Top-Assets legend rows (:1289) carry no divider by design. No .pill rule here at all (S43 inline hsl pills keep winning); no display:none anywhere (empty states stay visible); no transform on any hover/click state (W15); no new animation or transition is added in this file, so there is nothing extra to switch off under prefers-reduced-motion. AutoRefresh redraws this view whole (app.js:1239) — all rules here are static and re-resolve identically on every redraw. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Breakdown list row dividers (#byStrat/#bySession via groupPerf app.js:1299, #byEmotion app.js:1292) — the inline var(--border) on each .between row re-resolves to the aurora row-rule token. -------------------------------------------------------------------------- */ html[data-ui="aurora"] #main #byStrat, html[data-ui="aurora"] #main #bySession, html[data-ui="aurora"] #main #byEmotion{ --border:var(--ash-glass-brd-2); } /* last row: drop the trailing divider, mirroring the Phase 3a table rule tr:not(:last-child) (:412) — the card's own frame closes the list. (!important required: the divider is an inline style from app.js.) */ html[data-ui="aurora"] #main #byStrat>.between:last-child, html[data-ui="aurora"] #main #bySession>.between:last-child, html[data-ui="aurora"] #main #byEmotion>.between:last-child{ border-bottom:none!important; } /* -------------------------------------------------------------------------- 2. Emotion win-rate meters (app.js:1292) — inline var(--card2) track / var(--primary) fill re-pointed to aurora tokens. -------------------------------------------------------------------------- */ html[data-ui="aurora"] #main #byEmotion{ --card2:var(--ash-glass-brd-2); --primary:var(--ash-accent); } /* -------------------------------------------------------------------------- 3. Discipline & Streaks meters (disciplineCard bar() app.js:1213-1215) — no id/class hook on the card itself, so anchor on the route-unique #anRange chips row and walk to the following cards. Also sweeps the Daily-P&L / range-empty cards: no --card2/--primary consumers there. -------------------------------------------------------------------------- */ html[data-ui="aurora"] #main .between:has(> #anRange) ~ .card{ --card2:var(--ash-glass-brd-2); --primary:var(--ash-accent); } /* -------------------------------------------------------------------------- 4. Daily P&L zero-axis (charts.js:94 — ) — slightly stronger field-border token: it is the profit/loss zero line. -------------------------------------------------------------------------- */ html[data-ui="aurora"] #main #daily{ --border:var(--ash-field-brd); } /* === Phase 3b: /signal === */ /* ============================================================================ TARA — S44 Phase 3b patch · route /signal (slug signal-analyzer) · skin: AURORA. Gap-fill ONLY on top of skin-aurora-views.css (which already covers this view's chips/tabs, .pairs grid, spinner, sig-card/scan/conf/fcard, tiles, lock-note, details.exp) — nothing from there is re-defined here. Gaps closed: 1) #tabOtc / #tabLive market-state dots — base styles.css:379-380 hardcodes #a855f7 purple / #22e07a green with pulseP/pulseG INFINITE box-shadow animations; aurora never overrode them, so off-palette dots + an inherited infinite loop ran on the light glass. Recolored to the ash palette with the loop stopped (static soft halo keeps the state signal; dot keeps its exact size/position — same fix the terminal file proved at its lines 308-313). On the active .on gradient fill the dot goes white, matching aurora's own .pairs button.on::before convention. 2) PAY_BADGE payout chip (app.js:1307, rendered at app.js:1413 as the only child of a #pairGrid pair button) — its INLINE dark-theme tint rgba(45,190,120,.16) + color:var(--green) reads wrong on light glass; re-tinted to the --ash-up family (!important required to beat inline). Chip never hidden or resized; inline radius/padding/size untouched. No new animation added (only animation:none), so this patch needs no extra reduced-motion switch. W15: zero movement. is-locked stays visible (its opacity/grayscale rule lives in the parent file and is untouched). Scope oath: html[data-ui="aurora"] + #main only, same root as the parent views file. CSS only — markup untouched. --ash-* tokens come from the Phase-2 skin-aurora-shell.css declarations at html level. ========================================================================== */ /* market-state dots — OTC = indigo accent, LIVE = up-green; pulse stopped */ html[data-ui="aurora"] #main #tabOtc::before{ background:var(--ash-accent); box-shadow:0 0 0 3px rgba(99,102,241,.16); animation:none; } html[data-ui="aurora"] #main #tabLive::before{ background:var(--ash-up); box-shadow:0 0 0 3px rgba(22,160,111,.16); animation:none; } /* active tab: the .on gradient fill is indigo→teal with white text — a white dot (aurora's established .on-dot treatment) keeps the marker visible */ html[data-ui="aurora"] #main #tabOtc.on::before, html[data-ui="aurora"] #main #tabLive.on::before{ background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.25); } /* PAY_BADGE payout chip — ash-up tint on the rest state; inline background + color must be beaten with !important (border-radius:6px inline is kept — rounded suits aurora) */ html[data-ui="aurora"] #main #pairGrid button > span{ background:rgba(22,160,111,.12)!important; /* inline rgba(45,190,120,.16) → ash-up tint */ color:var(--ash-up)!important; /* inline var(--green) → ash-up ink */ box-shadow:inset 0 0 0 1px rgba(22,160,111,.22); } /* selected pair (.on) sits on the indigo→teal gradient with white text — the badge follows aurora's white-on-gradient convention for readability */ html[data-ui="aurora"] #main #pairGrid button.on > span{ background:rgba(255,255,255,.18)!important; color:#fff!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); } /* === Phase 3b: /published === */ /* ============================================================================ TARA — S44 Phase 3b patch · route /published (slug published-feed) SKIN: AURORA. Loads after skin-aurora-views.css; same scope oath — every selector under html[data-ui="aurora"] and inside #main only. Tokens are the --ash- set declared at html level by skin-aurora-shell.css. 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)); no `.btn.on` rule exists in styles.css or any skin file (grep-verified), so the ≥90% confidence filter's active state had zero treatment beyond the JS ☆/⭐ glyph swap. Styled below with the established aurora "on = gradient fill + white text" language (.chips/.tabs/.pairs button.on pattern). NOT touched (already covered / must-not-break): no .pill rule here at all (contract Rule 2 — the S43 tf/margin/mode row pills keep their inline hsl backgrounds, and the #pubTabs tab-count pills, app.js:1881, keep the Phase 3a base .pill treatment from skin-aurora-views.css — not a gap); no display:none (live regions #pubBody/#pubStats/#nextSigRow untouched); no new transform and no new animation added here (nothing needs a prefers-reduced-motion off-switch — base transitions/reduce rules reused as-is); base 920px .pub-cols stack untouched; #pubHiBtn keeps its 1.5px border width (border-color only goes transparent — click target never changes size). ========================================================================== */ /* ≥90% confidence filter toggle — armed state (#pubHiBtn.classList 'on') */ html[data-ui="aurora"] #main #pubHiBtn.on{ color:#fff; background:var(--ash-grad); border-color:transparent; box-shadow:0 6px 16px rgba(99,102,241,.28); } /* hover feedback while armed (id specificity beats base .btn:hover border/ shadow — restate shadow only; base transform behaviour left as-is) */ html[data-ui="aurora"] #main #pubHiBtn.on:hover{ box-shadow:0 10px 22px rgba(99,102,241,.36); } /* keyboard focus ring is box-shadow-based in aurora (.btn:focus-visible) — the armed state's shadow must not mask it */ html[data-ui="aurora"] #main #pubHiBtn.on:focus-visible{ outline:none; box-shadow:var(--ash-glow), 0 6px 16px rgba(99,102,241,.28); } /* === Phase 3b: /leaderboard === */ /* ============================================================================ TARA — S44 skin: AURORA — Phase 3b patch: route /leaderboard (Rankings + Your Trading Config). Gap-fill ONLY — skin-aurora-views.css already covers this view's .card, .page-h/.page-sub, label.f + number inputs (#lbBase/#lbAmt/#lbMtg with focus glow), .btn (.primary #lbSave, .sm #lbRefresh), .trow rows inside #lbBody (border, color-only hover, .meta .a/.m inks via lines 246-251), .pill (owner/You tags), .badge.win/.badge.loss, .green/.red P&L colors and the .empty loading/no-data/load-fail states; skin-aurora-shell.css line 211 recolors #main .muted. None of that is re-defined here. Verified against js/app.js lines 1621-1668. Scope oath: every rule lives under html[data-ui="aurora"] #main. Money-safety: nothing hidden/resized; W/L badges, win-rate, P&L/ROI figures and the honest "not qualified" note untouched; honest empty states stay visible. No transform on any state (W15). No new animations/transitions in this file, so there is nothing extra to switch off under prefers-reduced-motion. ========================================================================== */ /* -------------------------------------------------------------------------- RANK MEDALLION (#lbBody .dirico) — app.js:1652 renders the rank cell as a PLAIN
    (no .call/.put — content is 🥇/🥈/🥉, "#4"…, or "—" for unqualified). Base styles.css:175 gives .dirico geometry only; its background/color live solely on the .call/.put variants, and Phase 3a likewise recolors only .dirico.call/.dirico.put (views lines 253-260). Result on aurora: rank numbers and the "—" marker float as bare dark-theme text on the glass card. Seat the plain medallion on the ash field tokens as a quiet chip; medal emoji rows keep their native emoji colors, and the inline qualified-rank font-size bump (18px vs 13px, app.js:1652) is left as rendered. :not(.call):not(.put) keeps the base variants authoritative by intent even though this route never emits them. Not a click target (row cursor is inline "default", no handler) — static, no hover state. -------------------------------------------------------------------------- */ html[data-ui="aurora"] #main #lbBody .dirico:not(.call):not(.put){ background:var(--ash-field); border:1px solid var(--ash-field-brd); color:var(--ash-ink-soft); } /* Deliberately NOT touched: the self-row highlight (app.js:1651 inline background:color-mix(in srgb,var(--g1) 8%,transparent)) — it rides the user-selected data-theme accent by design and reads as a soft pastel wash on aurora's light cards, so it is honest and coherent as-is; overriding an inline style here would need !important for zero visual gain. */ /* === Phase 3b: /telegram === */ /* ============================================================================ TARA — S44 skin: AURORA — Phase 3b patch: route /telegram (member join card + owner/staff bot config). Gap-fill ONLY — skin-aurora-views.css already covers this view's .card, .empty loading / "owner has not set up" states (honest empty-states stay visible), .badge win/loss/draw broadcast 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 (views file lines 446-450) and the .tg-preview boxes #tgPrev_* (views file lines 451-453). #main .muted is recolored by skin-aurora-shell.css line 211. None of that is re-defined here. Verified against js/app.js lines 3152-3408. Scope oath: every rule lives under html[data-ui="aurora"] #main. Money-safety: nothing hidden/resized; no .pill rule at all (the "owner" pills at app.js:3229/3253 keep the recolor-only base skin rule); no transform on any clickable (W15); no new animation/transition, so there is nothing extra to switch off under prefers-reduced-motion. The tgJoinPopup modal copy of .tg-steps (app.js:3197) lives in #modalBg, outside this patch's #main-only oath — deliberately left alone. The inline accent-color:var(--violet) checkboxes (app.js:3244/3263) resolve to a readable violet/blue in both Day and Night base themes — left alone. ========================================================================== */ /* -------------------------------------------------------------------------- JOIN-STEPS LIST (.tg-steps, app.js:3176-3180) — base styles.css:459-461 paints the
      itself color:var(--muted) and its var(--text-hi). Aurora keeps its own --ash- namespace and remaps only the .muted CLASS (shell line 211), which never reaches the ol's own var(--muted); and the aurora card surface is hard-coded light (rgba(255,255,255,.62)) in BOTH Day and Night base themes, while the raw var(--muted)/var(--text-hi) values are dark-theme inks — off-palette on this glass card. Re-seat the list on the ash ink tokens. (Accuracy note, S47 verify: aurora always rides the light theme under the ui-skin theme-link — ui-skin.js THEME_OF aurora='light' — so the Night-Mode white-on-white case the first draft cited cannot occur while aurora is active; it would matter only if the theme-link were ever unlinked. Rules unchanged, rationale corrected.) -------------------------------------------------------------------------- */ html[data-ui="aurora"] #main .tg-steps{ color:var(--ash-ink-soft); } html[data-ui="aurora"] #main .tg-steps b{ color:var(--ash-ink); } /* -------------------------------------------------------------------------- JOIN-STEPS MARKERS — the step numbers stay at the browser default while the visually-equivalent rules checklist got accent markers in Phase 3a (.rules-list li::marker — views file line 405). Same treatment here. Static color only — no motion. -------------------------------------------------------------------------- */ html[data-ui="aurora"] #main .tg-steps li::marker{ color:var(--ash-accent); } /* -------------------------------------------------------------------------- OWNER STYLE-CARD DIVIDER (#tgStyleBody) — the "Send to channel now" section divider is an INLINE style `border-top:1px solid var(--bd,#333)` (app.js:3309). `--bd:` is declared in NO css file in the staging tree (grep-verified — the html.light token block styles.css:25-36 included), so the var falls back to #333: one harsh near-black hairline on the soft white glass card. 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 aurora field hairline instead. Phase 3a never sets --bd anywhere, so this is a new property, not an override (same technique as the terminal patch for this route, terminal-telegram.css:41). -------------------------------------------------------------------------- */ html[data-ui="aurora"] #main #tgStyleBody{ --bd:var(--ash-field-brd); } /* === Phase 3b: /signals === */ /* ============================================================================ TARA — S44 skin: AURORA — Phase 3b patch: route /signals (Publish Signals — owner manage: published list + result marking). Gap-fill ONLY — skin-aurora-views.css already covers this view's .page-h/ .page-sub, .card stat row (.stat/.profit/.loss, app.js:1737-1742), session group .card + .badge win/loss/draw + .pill counts (app.js:1941-1943), .trow rows with .dirico.call/.put and .meta .a/.m (app.js:1989-1996), every outcome/edit/delete .btn.sm (.green/.red, app.js:1997-2007), the analysis modal .tile grid, and the .empty state ("Use 'Generate & Publish' to create a session.", app.js:1952 via publishedGroupsHtml:1932). None of that is re-defined here. Verified against js/app.js lines 1733-1750 (view), 1948-1968 (renderPublished + wirePubSelect), 1970-2008 (sigRow manage). Scope oath: every rule lives under html[data-ui="aurora"] #main. Note: #sigBody is shared with /generate (app.js:1757), but every selector below anchors on ids/classes only /signals renders (#pubSelAll, #pubDelSel, #sigBody .sig-chk — sigRow emits .sig-chk only with manage=true, and only /signals calls publishedGroupsHtml with manage=true), so nothing bleeds. Money-safety: nothing hidden or resized (checkbox 16/18px inline sizes, outcome buttons, honesty win/loss row tints, reason lines all untouched); S43 tf/margin/mode pills' inline hsl backgrounds untouched (no .pill rule in this file); no transform added on hover/click (W15 — only transform:none on a disabled control); no new animations, so there is nothing extra to switch off under prefers-reduced-motion. ========================================================================== */ /* -------------------------------------------------------------------------- GAP 1 — SELECT-ALL CHECKBOX (#pubSelAll) — app.js:1951 emits it with INLINE style "accent-color:var(--primary)". Aurora runs on html.light (skin-aurora-shell.css:49) where --primary resolves to the parchment theme's #1e5fe0 (styles.css:27) — not the aurora indigo. The aurora skin deliberately keeps its own --ash- namespace and never remaps --primary (same finding as the aurora-new-trade patch for --border). Re-seat the accent on the ash token; inline style, so !important is required. Size (16px inline) and label markup stay as rendered. -------------------------------------------------------------------------- */ html[data-ui="aurora"] #main #pubSelAll{ accent-color:var(--ash-accent) !important; } /* -------------------------------------------------------------------------- GAP 2 — PER-ROW CHECKBOXES (#sigBody .sig-chk) — app.js:1990 emits each manage-row checkbox with the same INLINE "accent-color:var(--primary)". Phase 3a *intended* to cover this (skin-aurora-views.css:261 sets .sig-chk accent-color:var(--ash-accent)) but that rule silently loses to the inline style — it is a no-op in the real DOM. This is NOT a restated Phase 3a rule: different selector, and it exists solely to add the !important the inline style makes necessary, enforcing Phase 3a's own declared value. Without it the row boxes render parchment #1e5fe0 while GAP 1's select-all renders indigo — mismatched within one bar. -------------------------------------------------------------------------- */ html[data-ui="aurora"] #main #sigBody .sig-chk{ accent-color:var(--ash-accent) !important; } /* -------------------------------------------------------------------------- GAP 3 — DELETE-SELECTED BUTTON DISABLED STATE (#pubDelSel) — app.js:1951 renders it disabled, and wirePubSelect (app.js:1960) keeps it disabled until at least one row is checked. Aurora's .btn.red (skin-aurora-views.css:137-141) is an always-on red gradient + drop shadow with NO :disabled variant anywhere (styles.css:145 and skin-aurora-views.css:128 only cover .btn.primary:disabled) — so a dead delete button reads as fully armed, and the base .btn:hover still lifts it. Quiet it down exactly the way Phase 3a quiets .btn.primary:disabled: opacity + shadow off + no movement. transform:none only REMOVES motion (W15-safe); no new animation introduced. -------------------------------------------------------------------------- */ html[data-ui="aurora"] #main #pubDelSel:disabled, html[data-ui="aurora"] #main #pubDelSel:disabled:hover{ opacity:.45; box-shadow:none; transform:none; cursor:not-allowed; } /* -------------------------------------------------------------------------- Deliberately NOT touched: - Confidence (app.js:1971,1996): under html.light these resolve to #0b7d5e / #b45309 — readable on the light glass and identical to how the aurora /published feed shows them (its patch also left them); a b[style] attribute hack would be brittle. - Honesty win/loss row tints (inline hsl .05 backgrounds, app.js:1973): money-honesty coloring, must keep winning. - S43 tf/margin/mode pills (app.js:1676-1700): inline hsl backgrounds by contract — no .pill rule in this file. - Edit-signal modal's #esErr .gate-err (app.js:2077): lives in #modalBg, outside this patch's #main-only oath; base styles.css:456 already gives it a readable light-mode red via html.light --red. - #sigBody itself, stats row, group cards, .trow, outcome buttons, empty state: fully covered by Phase 3a (see header). ========================================================================== */ /* === Phase 4: /my-signals === */ /* ============================================================================ TARA — S44 skin: AURORA — Phase 4 patch: route /my-signals (My Signals — self-generated signal log with W/L marking). Gap-fill ONLY — skin-aurora-views.css already covers this view's .page-h/.page-sub underline+inks (lines 43-51), .card glass frames incl. the honest 📜 empty state (.card :54-66, .empty :462-463), the header buttons (#mySigClear .btn.red :137-141, the "＋ New Signal" via the generic .btn :99-113), the log rows (.trow border/color-only hover/.meta inks :246-251), .dirico.call/.put chips (:253-260), the outcome .badge.win/.loss (:220-229), the W/L mark buttons' fills (.btn.green :132-136 / .btn.red :137-141 — green vs red gradient keeps the mark semantics visually distinct from the neutral glass 🗑 delete .btn), .green/.red utilities (:36-39) and #main .muted (shell file line 211). None of that is re-defined here. The openMySignal detail modal (app.js:1588-1618) renders in #modalBg — outside this patch's #main-only oath — and its .tile/table/.sig-dir/.green/.red furniture is already covered by the Phase 3a #modalBg rules (:88-96, :408-415, :477-482); deliberately left alone. Verified against js/app.js VIEWS['/my-signals'] lines 1553-1573, mySigRow 1574-1587, openMySignal 1588-1618. Scope oath: every rule lives under html[data-ui="aurora"] #main, and both anchors ride .trow[data-mi] — data-mi is emitted ONLY by mySigRow (app.js:1580) and read ONLY by this route's wire-up (app.js:1561), so nothing bleeds into other routes' .trow lists. GAPS FILLED (evidence = js/app.js + stack line refs): 1) SKIP-signal medallion — mySigRow emits the direction chip as `
      ` with content ⊘ for trade_recommendation==='skip' rows (app.js:1575,1581), i.e. a PLAIN .dirico with no variant class. Base styles.css:175 gives .dirico geometry only; background/color exist solely on the .call/.put variants (styles.css:176-177), and Phase 3a likewise recolors only .dirico.call/.dirico.put (skin-aurora-views.css:253-260). The Phase 3b /leaderboard section fixed this exact hole for its rank medallions but scoped the fix to #lbBody only (skin-aurora-views.css:1097-1101, quoted selector `#main #lbBody .dirico:not(.call):not(.put)`) — it never reaches /my-signals. Result here: the honest ⊘ "no trade" marker floats as bare text beside its framed call/put siblings. Seated on the same quiet ash field-chip treatment as the leaderboard fix (same three tokens) so skip rows stay visibly honest and visually quieter than the tinted call/put chips. 2) W15 pin — each row carries money-adjacent click targets: W/L mark buttons [data-moc] (app.js:1578-1579; the leaderboard ranking is built from these marks — app.js:1621-1631) and the [data-del-ts] delete 🗑 (app.js:1585), all .btn/.btn.sm sitting INSIDE a clickable .trow whose own handler opens the detail modal (app.js:1561, guarded by e.target.closest('button')). The aurora base moves every .btn: :hover translateY(-2px) (skin-aurora-views.css:106-109) and :active scale(.985) (:110-111), on top of base styles.css:138. A moving target over a row that is itself a click zone invites mis-marks. Sibling precedent: the Phase 3b /trades section pins exactly this with `#thList .trow .btn:hover{transform:none}` (skin-aurora-views.css: 820-823). Same neutralization here (hover AND active — a click target never moves); hover feedback is preserved via the base rule's accent border-color + shadow, which this pin does not touch. NOT touched (deliberate): no .pill rule (S43 contract — this route renders no pills anyway); pending W9 5-factor dots are a FUTURE feature — no fake dot slots pre-built, only what mySigRow renders today is skinned; no display rule anywhere (empty state, badges, W/L buttons, honest "no trade" row text all stay visible); the outcome .badge and confidence inks ride Phase 3a; #mySigClear confirm modal lives in #modalBg (outside oath). AutoRefresh redraws this view whole (app.js:1572) — both rules are static and re-resolve identically on every redraw. Tokens used are existing --ash- declarations only (--ash-field, --ash-field-brd, --ash-ink-soft — all already used by skin-aurora-views.css); no literals, no new palette values. W15: transform:none only REMOVES motion; no new animation or transition is added in this file, so there is nothing extra to switch off under prefers-reduced-motion. ========================================================================== */ /* -------------------------------------------------------------------------- GAP 1 — SKIP-signal ⊘ medallion (plain .dirico, app.js:1581) — quiet ash field chip, mirroring the #lbBody fix (skin-aurora-views.css:1097-1101); .call/.put variants keep their Phase 3a tints untouched. Static, not a click target of its own — no hover state. -------------------------------------------------------------------------- */ html[data-ui="aurora"] #main .trow[data-mi] .dirico:not(.call):not(.put){ background:var(--ash-field); border:1px solid var(--ash-field-brd); color:var(--ash-ink-soft); } /* -------------------------------------------------------------------------- GAP 2 — W15: no movement on the in-row W/L mark ([data-moc]) and delete ([data-del-ts]) buttons — they sit inside a clickable row and the marks feed the leaderboard. Sanctioned transform:none pin (precedent: skin-aurora-views.css:820-823, /trades). Color/border/shadow hover feedback from the base .btn rules is kept. -------------------------------------------------------------------------- */ html[data-ui="aurora"] #main .trow[data-mi] .btn:hover, html[data-ui="aurora"] #main .trow[data-mi] .btn:active{ transform:none; } /* === Phase 4: /owner === */ /* ============================================================================ TARA — S44 skin: AURORA — Phase 4 patch: route /owner (Owner Panel). Gap-fill ONLY — skin-aurora-views.css already covers this view's .page-h/ .page-sub (:43-51), .card (:54-66), the statCard .grid.g4 row (.stat .t/.v/ .s, :68-86), .btn family incl. .primary/.red/:disabled (:99-141), inputs + placeholders + focus (#opInvite/#opExpDays/#opAgentName/#op2faCode…, :146-168), .badge.win/.loss/.draw (:220-233 — ocBadgeCls app.js:1703 emits only these three), .pill base recolor (:238-242), the Auto-Trader device rows .trow/.dirico.call/.put/.meta .a/.m (:246-260, markup app.js: 2688-2693), every inline-styled
th/td (:408-415), .empty (:462) and the revoke/delete modals in #modalBg (:473-482). #main .muted rides skin-aurora-shell.css:211; #main base ink is ash via shell:206. None of that is re-defined here. Verified against js/app.js VIEWS['/owner'], lines 2437-2734 (deck markup 2468-2501, abuse chips 2610-2626, 2FA 2628-2671, referral 2672-2680, devices 2681-2718, report 2719-2733). WHY THIS ROUTE HAS GAPS: the view injects its OWN