/* NBOT dashboard — Whole Glance UI. * Soft, light, modern minimalist. No framework. */ /* r22: sky-blue day theme + starry-blue night theme. Operator toggle in the hero. Stored in localStorage("nbot-theme") ∈ {"day", "night"}. Defaults to "day". CSS variables are switched via [data-theme] attribute on . */ /* ── DAY: sky blue (default) ────────────────────────────────────── */ :root, :root[data-theme="day"] { --bg: #eef4fb; /* pale sky blue */ --surface: #ffffff; /* clean white cards */ --ink: #0f1d36; /* deep navy ink */ --ink-soft: #4b5d76; --ink-faint: #8a98ab; --line: #dce6f1; --line-soft: #ebf1f8; --green: #1f8f5d; --green-soft: #e1f4ec; --red: #c63f3a; --red-soft: #fce5e3; --amber: #b5781a; --amber-soft: #fbf2dd; --accent: #2c6cdf; /* sky-blue accent */ --shadow-soft: 0 1px 2px rgba(15, 29, 54, 0.05), 0 4px 16px rgba(15, 29, 54, 0.05); } /* ── NIGHT: starry blue ─────────────────────────────────────────── */ :root[data-theme="night"] { --bg: #060c1f; /* midnight backdrop */ --surface: #11192e; /* card surface, slight star-blue */ --ink: #e3ecfb; --ink-soft: #97a8c8; --ink-faint: #5d6c89; --line: #213050; --line-soft: #182238; --green: #4ade80; /* brighter for dark contrast */ --green-soft: #0e2a1c; --red: #f87171; --red-soft: #2c1414; --amber: #fbbf24; --amber-soft: #2a2010; --accent: #60a5fa; /* bright sky-blue against dark */ --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 22px rgba(0, 0, 0, 0.35); } :root { --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; --num-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif; --radius: 14px; --radius-sm: 8px; } /* Smooth color transition when toggling theme */ html { transition: background-color 0.25s ease; } body, .section, .today-card, .stat-card, .position-card, .latest-item, .market-idx-card, .market-stk-card { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; } /* Night-mode: subtle star-field. Two radial-gradient layers ride on the body as a fixed background — no DOM elements, no perf cost. */ :root[data-theme="night"] body { background-color: var(--bg); background-image: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.55), transparent 50%), radial-gradient(1px 1px at 65% 80%, rgba(255,255,255,0.5), transparent 50%), radial-gradient(1.2px 1.2px at 80% 25%, rgba(255,255,255,0.6), transparent 50%), radial-gradient(1px 1px at 45% 60%, rgba(255,255,255,0.45), transparent 50%), radial-gradient(0.8px 0.8px at 12% 75%, rgba(255,255,255,0.4), transparent 50%), radial-gradient(1.2px 1.2px at 90% 55%, rgba(255,255,255,0.55), transparent 50%), radial-gradient(1px 1px at 35% 15%, rgba(255,255,255,0.5), transparent 50%); background-size: 100% 100%; background-attachment: fixed; } /* Theme toggle button in the hero. Subtle outline pill. */ .theme-toggle { background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer; user-select: none; transition: all 0.18s ease; margin-left: 8px; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } @media (max-width: 540px) { .theme-toggle { font-size: 12px; padding: 4px 10px; } } /* ── page container ── */ /* 2026-05-19: bumped 720 → 880 so the All-view stats cards (2-col grid) have meaningfully more breathing room per card. Side-effect is all sections (hero, RUNNING, lists, toggle) feel slightly more spacious on desktop, mobile unaffected (≤540 has its own padding rule, ≤720 collapses stats to 1-col). */ .page { /* 2026-05-19 r10: widened 880 → 1100 so the now-stacked stat cards (operator pref: vertical instead of side-by-side) have more horizontal breathing room for the 2-col metric grid inside. */ max-width: 1100px; margin: 0 auto; padding: 40px 28px 24px; } /* ── hero (status + halt) ── */ .hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; } .hero-status { display: flex; align-items: center; gap: 14px; min-width: 0; } .status-led { width: 12px; height: 12px; border-radius: 50%; background: var(--ink-faint); flex-shrink: 0; box-shadow: 0 0 0 4px rgba(138, 147, 160, 0.12); transition: background-color 0.4s ease, box-shadow 0.4s ease; } .status-led.is-ok { background: var(--green); box-shadow: 0 0 0 4px rgba(46, 158, 106, 0.16); animation: pulse-green 3s ease-in-out infinite; } .status-led.is-halted { background: var(--red); box-shadow: 0 0 0 4px rgba(207, 79, 72, 0.16); } .status-led.is-warn { background: var(--amber); box-shadow: 0 0 0 4px rgba(201, 138, 22, 0.18); } @keyframes pulse-green { 0%, 100% { box-shadow: 0 0 0 4px rgba(46, 158, 106, 0.16); } 50% { box-shadow: 0 0 0 8px rgba(46, 158, 106, 0.06); } } .status-lines { min-width: 0; } /* r13: bigger title — operator pref "Bramhaand should be bigger". 22 → 32 desktop, scales down on mobile via the 540-breakpoint. */ .status-lines h1 { font-size: 32px; font-weight: 700; margin: 0 0 4px 0; letter-spacing: -0.015em; } .status-sub { margin: 0; color: var(--ink-soft); font-size: 15px; } /* IST clock — top-right of hero, ticks every second */ .hero-clock { font-family: var(--num-font); font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.02em; flex-shrink: 0; } @media (max-width: 540px) { .hero-clock { font-size: 14px; } } .hero-actions { flex-shrink: 0; } /* r6 .halt-btn rules removed: dashboard is READ-ONLY (control via TG). */ /* ── dividers ── */ .divider { border: 0; border-top: 1px solid var(--line-soft); margin: 28px 0; } /* ── section ── */ .section { display: block; } /* CRITICAL: HTML5 `hidden` attribute must defeat .section's `display: block`. Without this, .section overrides the user-agent [hidden]{display:none} rule (same specificity, author origin wins) — so toggling `el.hidden = true` from JS would have NO visible effect, causing all market/stats sections to stay visible regardless of view. Fixed 2026-05-19 after operator saw both market sections show on Crypto toggle. */ .section[hidden], hr.divider[hidden], [hidden] { display: none !important; } .section-label { font-size: 11px; font-weight: 600; color: var(--ink-faint); letter-spacing: 0.14em; margin: 0 0 18px 0; text-transform: uppercase; } /* ── TODAY ── */ .today-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .today-grid.is-single { grid-template-columns: 1fr; max-width: 360px; } .today-card { display: flex; flex-direction: column; gap: 6px; } .today-pnl { font-family: var(--num-font); /* r13/r14: 44 → 56 → 32 (operator final: too big at 56). */ font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; } .today-pnl.is-pos { color: var(--green); } .today-pnl.is-neg { color: var(--red); } .today-pnl.is-flat { color: var(--ink); } .today-market { font-size: 13px; color: var(--ink-soft); font-weight: 500; } .today-meta { font-size: 13px; color: var(--ink-faint); } .today-streak { font-size: 12px; color: var(--green); margin-top: 2px; } /* ── positions ── */ .positions-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .position-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 14px; } .position-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .position-sym { font-weight: 600; color: var(--ink); } .position-tag { font-size: 12px; color: var(--ink-faint); background: var(--line-soft); padding: 2px 8px; border-radius: 999px; } .position-elapsed { margin-left: auto; color: var(--ink-soft); font-size: 13px; } .position-empty { color: var(--ink-faint); font-size: 14px; font-style: italic; padding: 4px 0; } /* ─── Rich position card (2026-05-19 operator pref) ───────────── */ /* Multi-line entry/exit/PnL summary like TG ENTRY messages used to. Replaces the old single-line position-item which only showed sym+age. */ .position-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; list-style: none; display: flex; flex-direction: column; gap: 10px; } .position-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .position-emoji { font-size: 16px; } .position-head .position-sym { font-weight: 600; color: var(--ink); font-size: 15px; } .position-dir { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; letter-spacing: 0.5px; } .position-dir-long, .position-dir-ce { background: var(--green-soft); color: var(--green); } .position-dir-short, .position-dir-pe { background: var(--red-soft); color: var(--red); } .position-trail { font-size: 11px; color: var(--green); background: var(--green-soft); padding: 2px 8px; border-radius: 999px; font-weight: 500; } /* 2026-05-26 — freshness badges. 3-state: FRESH (green-subtle, positive confirmation) STALE_TICK (amber, mid-market quote fetch failed) MARKET_CLOSED (gray, NSE off-hours defense-in-depth) Operator hovers for `Last fresh quote: `. */ .position-stale, .position-fresh { font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600; cursor: help; } .position-stale-tick { color: #b45309; /* amber-700 */ background: #fef3c7; /* amber-100 */ } .position-stale-market { color: #4b5563; /* slate-600 */ background: #e5e7eb; /* slate-200 */ font-weight: 500; } .position-fresh { color: var(--green); background: var(--green-soft); font-weight: 500; } @media (prefers-color-scheme: dark) { .position-stale-tick { color: #fbbf24; background: rgba(251, 191, 36, 0.15); } .position-stale-market { color: #cbd5e1; background: rgba(148, 163, 184, 0.2); } } .position-head .position-tag { font-size: 11px; color: var(--ink-faint); background: var(--line-soft); padding: 2px 8px; border-radius: 999px; } .position-head .position-elapsed { margin-left: auto; color: var(--ink-soft); font-size: 12px; } .position-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 14px; } .position-metric { display: flex; flex-direction: column; gap: 2px; } .position-metric-label { font-size: 10px; color: var(--ink-faint); letter-spacing: 0.5px; text-transform: uppercase; } .position-metric-value { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); } .position-metric.is-warn .position-metric-value { color: var(--amber); } .position-metric.is-pos .position-metric-value { color: var(--green); } .position-metric.is-neg .position-metric-value { color: var(--red); } .position-metric.is-flat .position-metric-value { color: var(--ink-soft); } /* ── latest trades ── */ .latest-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; } /* Expanded mode: list grows up to ~60vh then scrolls so the page stays usable even with hundreds of trades (operator ask 2026-05-18). */ .latest-list.is-expanded { max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); } .latest-list.is-expanded .latest-item { padding-left: 4px; padding-right: 4px; } .latest-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; } .latest-item:last-child { border-bottom: 0; } .latest-icon { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; } .latest-icon.is-pos { background: var(--green-soft); color: var(--green); } .latest-icon.is-neg { background: var(--red-soft); color: var(--red); } .latest-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .latest-sym { font-weight: 600; } .latest-reason { font-size: 12px; color: var(--ink-faint); margin-left: 4px; } .latest-pnl { font-weight: 600; font-family: var(--num-font); flex-shrink: 0; } .latest-pnl.is-pos { color: var(--green); } .latest-pnl.is-neg { color: var(--red); } .latest-time { color: var(--ink-faint); font-size: 12px; width: 64px; text-align: right; flex-shrink: 0; } .latest-empty { color: var(--ink-faint); font-size: 14px; font-style: italic; padding: 4px 0; } .link-btn { background: none; border: 0; color: var(--accent); font-size: 13px; cursor: pointer; margin-top: 10px; padding: 4px 0; font-family: var(--font); } .link-btn:hover { text-decoration: underline; } /* r9 + r26: .toggle / .toggle-section / .toggle-opt rules removed — the All/Crypto/Stocks toggle was retired in r9 (operator pref) and the HTML for it is commented out in index.html. */ /* ── footer ── */ .foot { text-align: center; margin-top: 32px; color: var(--ink-faint); font-size: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; } .foot-led { width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: inline-block; } .foot-led.is-warn { background: var(--amber); } .foot-led.is-bad { background: var(--red); } .foot-sep { color: var(--line); } /* r7 + r26: .is-fresh removed — pulse cue was a no-op since r7 and the pulseUpdated() caller was removed in r26. r6 + r26: .modal / .modal-backdrop / .btn-ghost / .btn-confirm rules removed — the confirm modal was deleted from index.html in r6. r9 + r26: .view-fade rules removed — view transitions retired with the All/Crypto/Stocks toggle in r9. */ /* ── responsive ── */ @media (max-width: 540px) { .page { padding: 24px 18px 18px; } /* r13: keep title bigger on mobile too, but cap so it doesn't dwarf the rest. Desktop 32px → mobile 24px. */ .status-lines h1 { font-size: 24px; } .today-grid { grid-template-columns: 1fr; gap: 20px; } /* r14: desktop 32 → mobile 28. */ .today-pnl { font-size: 28px; } .stat-pnl { font-size: 28px; } .stat-row { font-size: 14px; } .latest-time { width: 52px; font-size: 11px; } } /* ─── STATS view (operator 2026-05-18) ─────────────────────────── */ /* r10: single column always — operator wants stat cards stacked (crypto on top, stocks below), not side-by-side. Combined with the wider .page, each card now spans the full panel. r26: removed .stats-grid.is-single — toggle was retired in r9, and app.js no longer adds/removes the class. */ .stats-grid { display: grid; grid-template-columns: 1fr; gap: 18px; } .stat-card { background: var(--surface); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: 12px; } .stat-head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); } .stat-market { font-size: 13px; color: var(--ink-faint); letter-spacing: 0.06em; text-transform: uppercase; } .stat-pnl { font-family: var(--num-font); font-weight: 700; /* r13/r14: 32 → 42 → 32 (operator final: match LIFETIME tile). */ font-size: 32px; font-variant-numeric: tabular-nums; line-height: 1.1; } .stat-pnl.is-pos { color: var(--green); } .stat-pnl.is-neg { color: var(--red); } .stat-pnl.is-flat { color: var(--ink-soft); } /* 2026-05-26 — realized vs unrealized split shown directly under the headline total PnL. Compact two-segment line so the operator can read both numbers at a glance. */ .stat-pnl-split { font-size: 12px; color: var(--ink-soft); margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } .stat-meta { font-size: 13px; color: var(--ink-soft); } /* Locked = swept profit (crypto only). Subtle green tint — same hue as is-pos but on a single line under the meta. Round-9b add. */ .stat-locked { margin-top: 2px; color: var(--green); font-weight: 500; } /* Pause banner — r11. Amber/orange so it stands out from PnL colors (green/red) without being alarming. Same hue family as "warning" in the footer LED. Lives right under the meta line in the card. 2026-05-19 r12: always rendered (was hidden when empty). Operator wants to see "🟢 Scanning" when active so the absence of paused state is also visible. .is-active uses green. */ .stat-pause { margin-top: 4px; font-size: 13px; color: #b85e00; font-weight: 500; } .stat-pause.is-active { color: var(--green); } .stat-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; } .stat-row { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; border-bottom: 1px dotted var(--line-soft); /* r13: bump metric rows for readability (13 → 15). The grid now has 14 rows per card on the wider 1100px panel; bigger type prevents the row text from feeling like footnotes. */ font-size: 15px; gap: 8px; min-width: 0; } .stat-key { color: var(--ink-faint); white-space: nowrap; /* no label wraps onto two lines */ flex-shrink: 0; } .stat-val { color: var(--ink); font-family: var(--num-font); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .stat-reasons { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; } .stat-reasons-label { font-size: 12px; color: var(--ink-faint); } .stat-reason-chip { background: var(--line-soft); color: var(--ink-soft); border-radius: 999px; padding: 2px 10px; font-size: 11px; font-variant-numeric: tabular-nums; } .stat-section-h { margin: 8px 0 0 0; font-size: 12px; font-weight: 500; color: var(--ink-faint); letter-spacing: 0.06em; text-transform: uppercase; } .stat-trades { list-style: none; padding: 0; margin: 0; /* 2026-05-19: 50vh → 28vh so page doesn't get huge with 2 stat cards stacked (All view) — each list scrolls within its own short window, page total stays one screen-ish. */ max-height: 28vh; overflow-y: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); } .stat-trade-item { display: grid; grid-template-columns: 24px 1fr auto auto auto; gap: 8px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--line-soft); font-size: 13px; } .stat-trade-item:last-child { border-bottom: 0; } /* r6 + r26: .control-row / .control-btn / .control-status rules removed — dashboard is READ-ONLY, all control moved to Telegram (/halt, /resume, /reset_stats). HTML elements were deleted in r6. */ /* ─── MARKET SUMMARY (2026-05-19) ──────────────────────────────── */ /* Indices row + universe stocks grid. Visible on All + Stocks views. Auto-fit grid so it looks right on mobile and desktop. */ .market-badge { display: inline-block; margin-left: 10px; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.4px; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line-soft); } .market-badge.is-live { color: var(--green); border-color: var(--green-soft); background: var(--green-soft); } .market-badge.is-pre { color: var(--ink-soft); } .market-badge.is-post { color: var(--ink-soft); } .market-badge.is-off { color: var(--ink-soft); } /* 2026-05-19 r11: explicit 5-col grid. Indices = exactly 5 (NIFTY, BANK, FIN, MIDCAP, SENSEX) → fills one clean row. Was auto-fit minmax(140px) which on the now-wider 1100px panel packed 7 cards per row, leaving 10-card stock/coin lists as ugly 7+3 split. */ .market-indices { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 14px; } .market-idx-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 10px 12px; text-align: left; transition: border-color 0.15s ease; } .market-idx-card.is-pos { border-left: 3px solid var(--green); } .market-idx-card.is-neg { border-left: 3px solid var(--red); } .market-idx-card.is-flat { border-left: 3px solid var(--line-soft); } .market-idx-name { font-size: 11px; color: var(--ink-soft); letter-spacing: 0.4px; text-transform: uppercase; margin-bottom: 2px; } .market-idx-ltp { font-size: 18px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .market-idx-chg { font-size: 13px; font-variant-numeric: tabular-nums; margin-top: 2px; } .market-idx-chg.is-pos { color: var(--green); } .market-idx-chg.is-neg { color: var(--red); } .market-idx-chg.is-flat { color: var(--ink-soft); } /* 10 cards (universe stocks OR crypto coins) → clean 5×2 grid. */ .market-stocks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } /* Collapse to fewer columns on narrower viewports — mobile gets 2. */ @media (max-width: 880px) { .market-indices, .market-stocks { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 540px) { .market-indices, .market-stocks { grid-template-columns: repeat(2, 1fr); } } .market-stk-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 10px 12px; transition: border-color 0.15s ease; } .market-stk-card.is-pos { border-left: 3px solid var(--green); } .market-stk-card.is-neg { border-left: 3px solid var(--red); } .market-stk-card.is-flat { border-left: 3px solid var(--line-soft); } .market-stk-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; } .market-stk-name { font-size: 12px; font-weight: 600; color: var(--ink); letter-spacing: 0.3px; } .market-stk-chg { font-size: 12px; font-variant-numeric: tabular-nums; } .market-stk-chg.is-pos { color: var(--green); } .market-stk-chg.is-neg { color: var(--red); } .market-stk-chg.is-flat { color: var(--ink-soft); } .market-stk-ltp { font-size: 16px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .market-empty { padding: 16px; color: var(--ink-soft); font-size: 13px; text-align: center; background: var(--surface); border-radius: var(--radius); border: 1px dashed var(--line-soft); } /* ─── Analytics page (r28) ──────────────────────────────────────── */ .analytics-market-toggle { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px; gap: 4px; box-shadow: var(--shadow-soft); } .amt-opt { background: transparent; border: 0; padding: 8px 24px; font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; border-radius: 999px; font-family: var(--font); letter-spacing: 0.06em; transition: all 0.2s ease; } .amt-opt:hover { color: var(--ink); } .amt-opt.is-active { background: var(--ink); color: #fff; } .analytics-curve-wrap { background: var(--surface); border-radius: var(--radius); padding: 16px 16px 8px 16px; box-shadow: var(--shadow-soft); } /* r28μ/ξ (2026-05-22/23): monthly calendar — proper month grid with prev/next navigation. Each cell painted by daily PnL (green positive, red negative, gray no trades). */ .cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .cal-nav { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 6px; font-size: 18px; font-weight: 600; line-height: 1; padding: 4px 14px; cursor: pointer; color: var(--ink); font-family: var(--font); transition: background 0.15s ease; } .cal-nav:hover { background: var(--line-soft); } .cal-title { font-size: 16px; font-weight: 600; color: var(--ink); margin: 0; letter-spacing: 0.02em; } .cal-dow-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; } .cal-dow { text-align: center; font-size: 10px; letter-spacing: 0.1em; color: var(--ink-faint); font-family: var(--num-font); padding: 4px 0; } /* r28σ: uniform-height grid with visible cell borders so it actually looks like a calendar. grid-auto-rows: 1fr makes all rows equal height (grid stretches them to match the tallest). */ .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 78px; gap: 6px; } /* Structural-only — color set by JS via element.style.backgroundColor to bypass CSP `style-src 'self'` (blocks inline style="..." attrs). */ .cal-day { border-radius: 6px; padding: 8px 10px; position: relative; border: 1px solid var(--line-soft); display: flex; flex-direction: column; } .cal-cell.is-empty { visibility: hidden; } .cal-date { font-size: 13px; font-weight: 600; font-family: var(--num-font); font-variant-numeric: tabular-nums; text-align: left; line-height: 1; } .cal-pnl { font-size: 11px; font-family: var(--num-font); font-variant-numeric: tabular-nums; margin-top: auto; /* push PnL to bottom of cell */ text-align: right; opacity: 0.95; } .calendar-footer { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--ink-soft); font-family: var(--num-font); font-variant-numeric: tabular-nums; text-align: center; } /* r28ι (2026-05-22): all axis labels now rendered as SVG inside the SVG itself. No more DOM-overlay divs — every label is in viewBox coordinates that match the curve. Eliminates all CSS percentage / abs-position resolution bugs. */ .chart-frame { height: 280px; /* equity default; .dd-frame overrides */ width: 100%; } .chart-frame.dd-frame { height: 220px; } .analytics-svg { display: block; width: 100%; height: 100%; /* fills the frame's explicit height */ } .analytics-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 720px) { .analytics-summary-grid { grid-template-columns: repeat(2, 1fr); } } .summary-tile { background: var(--surface); border-radius: var(--radius-sm); padding: 12px 14px; box-shadow: var(--shadow-soft); } .summary-tile-label { font-size: 11px; color: var(--ink-faint); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; } .summary-tile-val { font-family: var(--num-font); font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 600; color: var(--ink); } .analytics-diag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } /* r28χ: DOW card spans both columns so it gets full width; BEST/WORST 5 sit side-by-side in the row below. */ .diag-card-wide { grid-column: 1 / -1; } @media (max-width: 720px) { .analytics-diag-grid { grid-template-columns: 1fr; } .diag-card-wide { grid-column: auto; } } .diag-card { background: var(--surface); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-soft); } .diag-head { margin: 0 0 12px 0; font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: 0.04em; } .diag-sub { color: var(--ink-faint); font-size: 11px; font-weight: 400; } .diag-table { width: 100%; border-collapse: collapse; font-size: 13px; } .diag-table td { padding: 6px 8px; border-bottom: 1px solid var(--line-soft); } .diag-table td.num { font-family: var(--num-font); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .diag-bar-cell { position: relative; min-width: 130px; } .diag-bar-cell span { position: relative; z-index: 1; } .diag-bar { position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: 3px; opacity: 0.18; z-index: 0; } .diag-bar.is-pos { background: var(--green); } .diag-bar.is-neg { background: var(--red); } .diag-bar.is-flat { background: var(--ink-faint); } /* Hold-time card */ .hold-row { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line-soft); } .hold-label { font-size: 13px; font-weight: 500; } .hold-label.is-pos { color: var(--green); } .hold-label.is-neg { color: var(--red); } .hold-val { font-family: var(--num-font); font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 600; } .hold-tag-wrap { margin-top: 12px; } .hold-tag { font-size: 12px; padding: 4px 10px; border-radius: 999px; } .hold-tag.is-pos { background: var(--green-soft); color: var(--green); } .hold-tag.is-neg { background: var(--red-soft); color: var(--red); } /* Trade browser */ .trade-filters { display: flex; gap: 10px; margin-bottom: 12px; align-items: center; flex-wrap: wrap; } .trade-filter-input { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 10px; font-size: 13px; color: var(--ink); font-family: var(--font); } .trade-filter-input:focus { outline: none; border-color: var(--accent); } .trade-filter-count { color: var(--ink-faint); font-size: 12px; margin-left: auto; } .trade-table-wrap { background: var(--surface); border-radius: var(--radius); padding: 8px 4px; box-shadow: var(--shadow-soft); overflow-x: auto; /* r28e: cap height so the diagnostics + footer stay visible no matter how many trades land in the ledger; sticky header keeps columns readable while scrolling. 200 trades * 28 px ≈ 5,600 px raw — far too tall without the cap. */ max-height: 600px; overflow-y: auto; } .trade-table { width: 100%; border-collapse: collapse; font-size: 13px; } .trade-table thead { position: sticky; top: 0; background: var(--surface); z-index: 1; /* Drop a faint shadow under the sticky header so it doesn't blend into the first row as the user scrolls. */ box-shadow: 0 1px 0 var(--line-soft); } .trade-table th { text-align: left; font-weight: 600; font-size: 11px; color: var(--ink-faint); letter-spacing: 0.06em; text-transform: uppercase; padding: 8px; border-bottom: 1px solid var(--line); cursor: pointer; user-select: none; background: var(--surface); /* sticky needs an opaque background */ } .trade-table th:hover { color: var(--ink); } .trade-table th.num, .trade-table td.num { text-align: right; } .trade-table td { padding: 6px 8px; border-bottom: 1px solid var(--line-soft); } .trade-table td.num { font-family: var(--num-font); font-variant-numeric: tabular-nums; } .trade-table td.is-pos { color: var(--green); } .trade-table td.is-neg { color: var(--red); } .dir-long, .dir-ce { color: var(--green); font-weight: 600; font-size: 11px; } .dir-short, .dir-pe { color: var(--red); font-weight: 600; font-size: 11px; } .reason-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--line-soft); color: var(--ink-soft); } .reason-trail { background: var(--green-soft); color: var(--green); } .reason-sl { background: var(--red-soft); color: var(--red); } .reason-time { background: var(--amber-soft); color: var(--amber); } .reason-eod { background: var(--line-soft); color: var(--ink-soft); } /* "📊 Analytics" link in main hero */ .analytics-link { text-decoration: none; } /* r28b: streaks card */ .streaks-grid { display: flex; flex-direction: column; gap: 4px; } .streak-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line-soft); } .streak-label { font-size: 13px; font-weight: 500; } .streak-label.is-pos { color: var(--green); } .streak-label.is-neg { color: var(--red); } .streak-val { font-family: var(--num-font); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 700; } .streak-val.is-pos { color: var(--green); } .streak-val.is-neg { color: var(--red); } /* r28ω: streaks card additions — rolling-win-rate divider + W/L tape */ .streaks-divider { height: 12px; border-top: 1px dashed var(--line-soft); margin-top: 10px; } .tape-wrap { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); } .tape-label { font-size: 11px; color: var(--ink-faint); font-family: var(--num-font); letter-spacing: 0.04em; margin-bottom: 8px; } .tape-row { display: flex; flex-wrap: wrap; gap: 4px; } .tape-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; cursor: help; } .tape-dot.is-pos { background: var(--green); } .tape-dot.is-neg { background: var(--red); } .tape-dot.is-zero { background: var(--ink-faint); opacity: 0.4; } /* r28b: outlier table (best 5 / worst 5) */ .outlier-table td { font-size: 12px; padding: 6px 6px; } /* r28b: return-pct histogram */ .hist-wrap { display: flex; flex-direction: column; gap: 4px; } .hist-row { display: grid; grid-template-columns: 110px 1fr 40px; align-items: center; gap: 8px; font-size: 12px; } .hist-label { font-family: var(--num-font); font-variant-numeric: tabular-nums; color: var(--ink-soft); text-align: right; } .hist-bar-wrap { background: var(--line-soft); border-radius: 3px; height: 14px; overflow: hidden; } .hist-bar { height: 100%; border-radius: 3px; transition: width 0.15s ease; } .hist-bar.is-pos { background: var(--green); opacity: 0.7; } .hist-bar.is-neg { background: var(--red); opacity: 0.7; } .hist-count { font-family: var(--num-font); font-variant-numeric: tabular-nums; color: var(--ink-soft); text-align: right; } /* r28U security-MEDIUM#4: small utility classes so the analytics page doesn't need inline style="..." attributes — lets us drop 'unsafe-inline' from the nginx CSP style-src directive. */ .no-underline { text-decoration: none; } .mt-18 { margin-top: 18px; } .mt-24 { margin-top: 24px; } .mt-48 { margin-top: 48px; }