/* ============================================================ CuanMeter — Design System 5 themes via CSS variables on Themes: fintech (default) | dark | glass | aurora | brutal ============================================================ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: 'Satoshi', 'General Sans', -apple-system, system-ui, sans-serif; font-feature-settings: 'ss01', 'ss02', 'cv01'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--fg); background: var(--bg); background-attachment: fixed; transition: background-color 0.3s ease, color 0.3s ease; min-height: 100vh; } .mono { font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; font-feature-settings: 'tnum'; } .tnum { font-variant-numeric: tabular-nums; } /* ============================================================ THEME: Fintech Modern (default) ============================================================ */ body[data-theme="fintech"] { --bg: #f4f7f5; --bg-soft: #ffffff; --surface: #ffffff; --surface-2: #f7f9f8; --surface-hover: #f0f4f2; --fg: #0a1f1a; --fg-muted: #5d6c66; --fg-faint: #8a9994; --border: #e1e7e4; --border-strong: #cfd6d2; --primary: #00a86b; --primary-hover: #008f5a; --primary-soft: #e6f6ef; --primary-fg: #ffffff; --success: #00a86b; --danger: #e23e57; --warning: #f59e0b; --info: #2563eb; --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --radius-xl: 32px; --shadow-sm: 0 1px 2px rgba(10, 31, 26, 0.04); --shadow: 0 2px 8px rgba(10, 31, 26, 0.04), 0 1px 2px rgba(10, 31, 26, 0.06); --shadow-lg: 0 12px 40px -12px rgba(10, 31, 26, 0.12), 0 4px 12px rgba(10, 31, 26, 0.04); --card-bg: var(--surface); --card-border: 1px solid var(--border); --card-shadow: var(--shadow); --grid-color: rgba(0, 168, 107, 0.04); --cta-terminal-bg: #0d1f16; } /* ============================================================ THEME: Dark Dashboard ============================================================ */ body[data-theme="dark"] { --bg: #07090d; --bg-soft: #0c1015; --surface: #0f141b; --surface-2: #131923; --surface-hover: #182030; --fg: #e8efe9; --fg-muted: #8a9590; --fg-faint: #5b6661; --border: #1c2430; --border-strong: #2a3543; --primary: #00e08c; --primary-hover: #00c97c; --primary-soft: rgba(0, 224, 140, 0.12); --primary-fg: #02110a; --success: #00e08c; --danger: #ff5470; --warning: #ffb547; --info: #4d8fff; --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --radius-xl: 32px; --shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.02); --shadow: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6); --card-bg: var(--surface); --card-border: 1px solid var(--border); --card-shadow: none; --grid-color: rgba(0, 224, 140, 0.03); --cta-terminal-bg: #07090d; background-image: linear-gradient(var(--grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--grid-color) 1px, transparent 1px); background-size: 56px 56px; } /* ============================================================ THEME: Glassmorphism ============================================================ */ body[data-theme="glass"] { --bg: #d8efe2; --bg-soft: rgba(255, 255, 255, 0.6); --surface: rgba(255, 255, 255, 0.55); --surface-2: rgba(255, 255, 255, 0.35); --surface-hover: rgba(255, 255, 255, 0.7); --fg: #0d2a20; --fg-muted: #4a5d56; --fg-faint: #7a8a83; --border: rgba(255, 255, 255, 0.6); --border-strong: rgba(255, 255, 255, 0.85); --primary: #00a86b; --primary-hover: #008c58; --primary-soft: rgba(0, 168, 107, 0.18); --primary-fg: #ffffff; --success: #00a86b; --danger: #e23e57; --warning: #f59e0b; --info: #2563eb; --radius-sm: 12px; --radius: 20px; --radius-lg: 28px; --radius-xl: 36px; --shadow: 0 8px 32px rgba(0, 80, 50, 0.08); --shadow-lg: 0 24px 60px rgba(0, 80, 50, 0.16); --card-bg: var(--surface); --card-border: 1px solid var(--border); --card-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.8); --grid-color: transparent; --cta-terminal-bg: #0d1f16; background: radial-gradient(circle at 15% 20%, #a4e8c8 0%, transparent 45%), radial-gradient(circle at 85% 70%, #8bdcf0 0%, transparent 45%), radial-gradient(circle at 50% 90%, #f0e8a4 0%, transparent 40%), linear-gradient(135deg, #d8efe2 0%, #c8e8d8 100%); } /* ============================================================ THEME: Aurora / Gradient ============================================================ */ body[data-theme="aurora"] { --bg: #050a18; --bg-soft: #0a1024; --surface: rgba(255, 255, 255, 0.04); --surface-2: rgba(255, 255, 255, 0.06); --surface-hover: rgba(255, 255, 255, 0.08); --fg: #f0f5ff; --fg-muted: #a4afca; --fg-faint: #6b7895; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); --primary: #00ff9f; --primary-hover: #00e08c; --primary-soft: rgba(0, 255, 159, 0.14); --primary-fg: #02110a; --success: #00ff9f; --danger: #ff4d8d; --warning: #ffb547; --info: #6f8aff; --radius-sm: 10px; --radius: 16px; --radius-lg: 24px; --radius-xl: 32px; --shadow: 0 0 40px rgba(0, 255, 159, 0.05); --shadow-lg: 0 24px 80px rgba(0, 80, 200, 0.2), 0 0 60px rgba(0, 255, 159, 0.08); --card-bg: var(--surface); --card-border: 1px solid var(--border); --card-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06); --grid-color: transparent; --cta-terminal-bg: #07090d; background: radial-gradient(ellipse at 0% 0%, rgba(0, 255, 159, 0.18) 0%, transparent 50%), radial-gradient(ellipse at 100% 0%, rgba(140, 80, 255, 0.18) 0%, transparent 50%), radial-gradient(ellipse at 50% 100%, rgba(0, 200, 255, 0.12) 0%, transparent 60%), linear-gradient(180deg, #050a18 0%, #0a0f24 100%); } /* ============================================================ THEME: Neo Brutalism ============================================================ */ body[data-theme="brutal"] { --bg: #f4ecd8; --bg-soft: #fff8e6; --surface: #ffffff; --surface-2: #fff8e6; --surface-hover: #fef3b8; --fg: #0a0a0a; --fg-muted: #2a2a2a; --fg-faint: #5a5a5a; --border: #0a0a0a; --border-strong: #0a0a0a; --primary: #00d971; --primary-hover: #00b85f; --primary-soft: #d8ffe8; --primary-fg: #0a0a0a; --success: #00d971; --danger: #ff5470; --warning: #ffd23f; --info: #4d8fff; --radius-sm: 0px; --radius: 0px; --radius-lg: 0px; --radius-xl: 0px; --shadow-sm: 2px 2px 0 #0a0a0a; --shadow: 4px 4px 0 #0a0a0a; --shadow-lg: 8px 8px 0 #0a0a0a; --card-bg: var(--surface); --card-border: 3px solid #0a0a0a; --card-shadow: var(--shadow); --grid-color: transparent; --cta-terminal-bg: #0a0a0a; background-image: linear-gradient(rgba(10, 10, 10, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 10, 10, 0.04) 1px, transparent 1px); background-size: 24px 24px; } /* ============================================================ Universal element styling ============================================================ */ a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, select, textarea { font-family: inherit; color: inherit; } ::selection { background: var(--primary); color: var(--primary-fg); } h1, h2, h3, h4, h5 { font-family: 'Satoshi', 'General Sans', system-ui, sans-serif; letter-spacing: -0.025em; font-weight: 700; line-height: 1.05; color: var(--fg); margin: 0; } body[data-theme="brutal"] h1, body[data-theme="brutal"] h2, body[data-theme="brutal"] h3 { letter-spacing: -0.04em; font-weight: 900; text-transform: uppercase; line-height: 1.05 !important; } /* ============================================================ Layout primitives ============================================================ */ .app-shell { min-height: 100vh; display: flex; flex-direction: column; } .container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; } @media (max-width: 640px) { .container { padding: 0 16px; } } /* ============================================================ Card primitive ============================================================ */ .card { background: var(--card-bg); border: var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s, background 0.2s; } body[data-theme="glass"] .card, body[data-theme="aurora"] .card { backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); } .card.interactive:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } body[data-theme="brutal"] .card.interactive:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #0a0a0a; } body[data-theme="dark"] .card.interactive:hover { border-color: var(--primary); background: var(--surface-2); transform: translateY(-2px); } /* ============================================================ Button primitive ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 22px; height: 48px; font-weight: 700; font-size: 15px; border-radius: 999px; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); letter-spacing: -0.01em; white-space: nowrap; position: relative; } .btn-primary { background: var(--primary); color: var(--primary-fg); box-shadow: 0 4px 14px -2px color-mix(in oklab, var(--primary) 40%, transparent); } .btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 8px 20px -4px color-mix(in oklab, var(--primary) 50%, transparent); } /* Profil Risiko — tactile press states */ .risk-choice:active { transform: scale(0.98); } .risk-cta:active:not(:disabled) { transform: scale(0.985); } .btn-secondary { background: var(--surface); color: var(--fg); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--surface-hover); border-color: var(--border-strong); } body[data-theme="brutal"] .btn { border-radius: 0; border: 3px solid #0a0a0a; font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; height: 52px; } body[data-theme="brutal"] .btn-primary { box-shadow: 4px 4px 0 #0a0a0a; } body[data-theme="brutal"] .btn-primary:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #0a0a0a; } body[data-theme="brutal"] .btn-secondary { background: #fff; box-shadow: 4px 4px 0 #0a0a0a; } body[data-theme="brutal"] .btn-secondary:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #0a0a0a; } body[data-theme="dark"] .btn-primary { box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 50%, transparent); } body[data-theme="aurora"] .btn-primary { box-shadow: 0 0 30px -4px var(--primary), inset 0 1px 0 rgba(255, 255, 255, 0.2); } body[data-theme="aurora"] .btn-secondary { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); backdrop-filter: blur(20px); } body[data-theme="glass"] .btn-secondary { background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(20px); border-color: rgba(255, 255, 255, 0.7); } /* ============================================================ Inputs ============================================================ */ .input, .select { width: 100%; height: 52px; padding: 0 16px; font-size: 16px; font-weight: 600; color: var(--fg); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; outline: none; font-variant-numeric: tabular-nums; } .input:focus, .select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 18%, transparent); } body[data-theme="brutal"] .input, body[data-theme="brutal"] .select { border-width: 3px; border-color: #0a0a0a; font-weight: 700; } body[data-theme="brutal"] .input:focus, body[data-theme="brutal"] .select:focus { box-shadow: 4px 4px 0 #0a0a0a; transform: translate(-2px, -2px); } body[data-theme="dark"] .input, body[data-theme="dark"] .select { background: var(--surface-2); } body[data-theme="dark"] .input:focus, body[data-theme="dark"] .select:focus { box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 12%, transparent); } body[data-theme="aurora"] .input, body[data-theme="aurora"] .select { background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(12px); } body[data-theme="glass"] .input, body[data-theme="glass"] .select { background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(12px); } .input-group { display: flex; flex-direction: column; gap: 8px; } .label { font-size: 13px; font-weight: 700; color: var(--fg-muted); letter-spacing: -0.005em; display: flex; align-items: center; gap: 6px; } body[data-theme="brutal"] .label { text-transform: uppercase; font-weight: 800; font-size: 12px; letter-spacing: 0.06em; color: var(--fg); } .input-prefix { position: relative; } .input-prefix > span { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--fg-faint); font-weight: 700; font-size: 14px; pointer-events: none; } .input-prefix .input { padding-left: 44px; } /* ============================================================ Badge / pill ============================================================ */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12px; font-weight: 700; border-radius: 999px; background: var(--primary-soft); color: var(--primary); letter-spacing: -0.005em; white-space: nowrap; width: fit-content; } body[data-theme="brutal"] .badge { border-radius: 0; border: 2px solid #0a0a0a; background: var(--primary); color: #0a0a0a; font-weight: 900; text-transform: uppercase; } /* ============================================================ CTA Terminal card ============================================================ */ .cta-terminal { background-image: linear-gradient(color-mix(in oklab, var(--primary) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--primary) 6%, transparent) 1px, transparent 1px); background-size: 56px 56px; } /* dark mode body already has a grid — remove card grid to avoid double/misaligned lines */ body[data-theme="dark"] .cta-terminal { background-image: none; } /* ============================================================ Marquee ============================================================ */ .marquee-track { display: flex; animation: marquee 60s linear infinite; width: max-content; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee-pause:hover .marquee-track { animation-play-state: paused; } /* ============================================================ Utilities ============================================================ */ .up { color: var(--success); } .down { color: var(--danger); } .muted { color: var(--fg-muted); } .faint { color: var(--fg-faint); } .divider { height: 1px; background: var(--border); } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .fade-up { animation: fadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } .fade-up-1 { animation-delay: 0.05s; } .fade-up-2 { animation-delay: 0.10s; } .fade-up-3 { animation-delay: 0.15s; } .fade-up-4 { animation-delay: 0.20s; } .spark { display: block; width: 100%; height: 100%; overflow: visible; } /* ============================================================ Mobile responsiveness ============================================================ */ /* Hero 3D illustration — shrink on tablet, hide on small phone */ @media (max-width: 860px) { .hero-3d { height: 400px !important; margin-top: 0 !important; } } @media (max-width: 600px) { .hero-3d { display: none !important; } } /* Hero section — prevent horizontal overflow on mobile */ @media (max-width: 900px) { #hero-grid { overflow: hidden; } } /* Mobile dot, meta & legend — hidden on desktop */ .cal-event-dot { display: none; } .cal-dot-legend { display: none; } .cal-event-meta-mobile { display: none; } .cal-event-dot-inline { display: none; } .screener-mobile-list { display: none; } /* Strategy picker */ .strategy-checkbox { display: inline-flex; width: 16px; height: 16px; border-radius: 4px; border: 2px solid var(--border); background: var(--surface); flex-shrink: 0; transition: border-color 0.15s, background 0.15s; } .strategy-checkbox.checked { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 15%, transparent); } .strategy-mode-btn { padding: 4px 14px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); color: var(--fg-muted); font-size: 12px; font-weight: 700; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .strategy-mode-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); } /* Screener strategy breakdown block (inside mobile card) */ .screener-strategy-block { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px; display: flex; flex-direction: column; gap: 5px; } .screener-strategy-head { display: flex; align-items: center; gap: 8px; } .screener-strategy-label { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); flex: 1; } .screener-strategy-score { font-size: 11px; font-weight: 700; color: var(--fg-muted); font-family: 'JetBrains Mono', monospace; } .screener-score-bar-track { height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; } .screener-score-bar-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; } .screener-strategy-breakdown { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--fg-muted); } /* ===== Arena Hybrid Pro ===== */ .arena-screen > .container { max-width: 1500px; } .arena-pick { position: relative; max-width: 560px; margin-bottom: 18px; } .arena-account-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: stretch; margin-bottom: 18px; } .arena-account-card { min-width: 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 3px; } .arena-account-card > span { color: var(--fg-muted); font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .arena-account-card > strong { color: var(--fg); font-size: clamp(18px, 2vw, 23px); font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .arena-account-card > small { color: var(--fg-faint); font-size: 10px; font-weight: 700; } .arena-account-actions { padding: 0 4px; display: flex; align-items: center; gap: 9px; } .arena-market-shell { margin-bottom: 14px; } .arena-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 10px; } .arena-head-main { min-width: 0; display: flex; align-items: center; gap: 24px; } .arena-symbol-lockup { display: flex; align-items: center; gap: 10px; } .arena-symbol-logo { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--primary-soft); border: 1px solid color-mix(in oklab, var(--primary) 28%, var(--border)); color: var(--primary); font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 900; } .arena-head-tk { display: flex; align-items: center; gap: 7px; } .arena-head-tk strong { color: var(--fg); font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 900; } .arena-sim-badge, .arena-ticket-status, .arena-live-dot { border: 1px solid color-mix(in oklab, var(--primary) 35%, var(--border)); background: var(--primary-soft); color: var(--primary); border-radius: 999px; font-size: 8px; font-weight: 900; letter-spacing: 0.08em; padding: 3px 7px; } .arena-head-caption { display: block; margin-top: 1px; color: var(--fg-faint); font-size: 10px; } .arena-quote { display: flex; align-items: baseline; gap: 10px; font-variant-numeric: tabular-nums; } .arena-head-last { color: var(--fg); font-family: 'JetBrains Mono', monospace; font-size: 25px; font-weight: 900; letter-spacing: -0.04em; } .arena-quote > span:last-child { font-size: 12px; font-weight: 800; } .arena-change { flex-shrink: 0; padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg-muted); font-size: 11px; font-weight: 700; cursor: pointer; } .arena-change:hover { border-color: var(--primary); color: var(--primary); } .arena-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin-bottom: 10px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-sm); } .arena-stats > div { min-width: 0; padding: 8px 10px; background: var(--surface); display: flex; flex-direction: column; gap: 2px; } .arena-stats span { color: var(--fg-faint); font-size: 8px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; } .arena-stats b { overflow: hidden; color: var(--fg); font-family: 'JetBrains Mono', monospace; font-size: 11px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; } .arena-pos { padding: 9px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .arena-pos > div { display: flex; align-items: baseline; gap: 7px; } .arena-pos span { color: var(--fg-muted); font-size: 10px; } .arena-pos strong { color: inherit; font-family: 'JetBrains Mono', monospace; font-size: 12px; } .arena-main { display: grid; grid-template-columns: minmax(0, 1.3fr) 138px minmax(360px, 0.6fr); gap: 18px; align-items: start; margin-bottom: 18px; } .arena-tape { --ob-bg: var(--surface); --ob-head: color-mix(in oklab, var(--fg) 6%, var(--surface)); --ob-line: var(--border); --ob-text: var(--fg); --ob-dim: var(--fg-muted); --ob-faint: var(--fg-faint); --ob-up: var(--success); --ob-dn: var(--danger); overflow: hidden; min-width: 0; background: var(--ob-bg); border: 1px solid var(--ob-line); border-radius: var(--radius); box-shadow: var(--shadow-sm); color: var(--ob-text); font-variant-numeric: tabular-nums; } .arena-tape-titlebar { min-height: 44px; padding: 8px 12px; background: var(--ob-head); color: var(--ob-text); border-bottom: 1px solid var(--ob-line); display: flex; align-items: center; justify-content: space-between; gap: 8px; } .arena-tape-titlebar strong { font-size: 12px; letter-spacing: 0.02em; } .arena-tape-titlebar .arena-live-dot { background: color-mix(in oklab, var(--ob-up) 14%, transparent); border-color: color-mix(in oklab, var(--ob-up) 40%, transparent); color: var(--ob-up); } .arena-tape-head { height: 26px; display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 0 11px; background: var(--ob-head); border-bottom: 1px solid var(--ob-line); color: var(--ob-faint); font-size: 8.5px; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; } .arena-tape-head > span:last-child { text-align: right; } .arena-tape-list { max-height: 460px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ob-line) transparent; } .arena-tape-empty { padding: 18px 11px; color: var(--ob-dim); font-size: 10px; text-align: center; } .arena-tape-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px; height: 24px; padding: 0 11px; border-bottom: 1px solid var(--ob-line); font-size: 10.5px; animation: arenaTapeIn 0.28s ease; } @keyframes arenaTapeIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } } .arena-tape-px { display: flex; align-items: center; gap: 4px; font-family: 'JetBrains Mono', monospace; font-weight: 700; } .arena-tape-arrow { font-size: 8px; font-style: normal; } .arena-tape-lot { display: flex; align-items: center; gap: 5px; justify-content: flex-end; color: var(--ob-dim); font-family: 'JetBrains Mono', monospace; } .arena-tape-badge { padding: 1px 5px; border-radius: 999px; background: rgba(139, 147, 255, 0.18); color: #8b93ff; font-size: 8px; font-style: normal; font-weight: 800; letter-spacing: 0.03em; } .arena-tape-up .arena-tape-px { color: var(--ob-up); } .arena-tape-dn .arena-tape-px { color: var(--ob-dn); } .arena-tape-flat .arena-tape-px { color: var(--ob-text); } .arena-tape-mine { background: rgba(139, 147, 255, 0.1); box-shadow: inset 2px 0 0 #8b93ff; } .arena-book { overflow: hidden; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); font-variant-numeric: tabular-nums; } .arena-book-titlebar { min-height: 58px; padding: 11px 15px; background: color-mix(in oklab, var(--fg) 92%, var(--primary) 8%); color: var(--bg-soft); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .arena-book-titlebar > div { display: flex; flex-direction: column; gap: 1px; } .arena-book-titlebar strong { font-size: 14px; } .arena-book-titlebar > div span { color: color-mix(in oklab, var(--bg-soft) 68%, transparent); font-size: 10px; } .arena-live-dot { background: color-mix(in oklab, var(--primary) 15%, transparent); border-color: color-mix(in oklab, var(--primary) 45%, transparent); } .arena-ladder-skel { min-height: 360px; animation: pulse 1.5s infinite; } .arena-book-loading { min-height: 360px; display: grid; place-items: center; color: var(--fg-muted); font-size: 12px; } .arena-brow { display: grid; grid-template-columns: 28px 34px minmax(62px, 1.25fr) minmax(112px, 1.7fr) minmax(62px, 1.25fr) 34px 28px 48px; align-items: center; gap: 2px; height: 34px; padding: 0 7px; } .arena-bhead, .arena-btot { height: 29px; background: color-mix(in oklab, var(--fg) 5%, var(--surface)); color: var(--fg-faint); font-size: 9px; font-weight: 900; letter-spacing: 0.045em; text-transform: uppercase; } .arena-bhead { border-bottom: 1px solid var(--border); } .arena-btot { border-top: 1px solid var(--border); } .arena-bhead > span, .arena-btot > span { text-align: center; } .arena-bbody { max-height: 420px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } .arena-price-row { position: relative; border-bottom: 1px solid color-mix(in oklab, var(--border) 65%, transparent); outline: none; cursor: pointer; transition: background-color 120ms ease; } .arena-price-row:hover, .arena-price-row:focus-visible { background: var(--surface-hover); } .arena-brow-last { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); } .arena-brow-last:hover, .arena-brow-last:focus-visible { background: color-mix(in oklab, var(--primary-soft) 82%, var(--surface-hover)); } .arena-plus { width: 23px; height: 23px; margin: auto; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: transparent; font-size: 14px; line-height: 19px; opacity: 0.7; cursor: pointer; } .arena-plus:hover { opacity: 1; } .arena-plus-buy { color: var(--success); } .arena-plus-sell { color: var(--danger); } .arena-c-freq { color: var(--fg-faint); font-family: 'JetBrains Mono', monospace; font-size: 9px; text-align: center; } .arena-c-blot, .arena-c-alot { position: relative; height: 24px; overflow: hidden; display: flex; align-items: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; } .arena-c-blot { justify-content: flex-end; } .arena-c-alot { justify-content: flex-start; } .arena-lotbar { position: absolute; top: 2px; height: calc(100% - 4px); min-width: 2px; border-radius: 2px; transition: width 220ms ease; } .arena-lotbar-bid { right: 0; background: color-mix(in oklab, var(--success) 22%, transparent); } .arena-lotbar-ask { left: 0; background: color-mix(in oklab, var(--danger) 20%, transparent); } .arena-lotn { position: relative; z-index: 1; padding: 0 5px; color: var(--fg); font-style: normal; } .arena-lotn.d-up { color: var(--success); } .arena-lotn.d-dn { color: var(--danger); } .arena-mine { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; font-size: 9px; line-height: 1; color: #fff; background: var(--primary); border-radius: 4px; padding: 2px 5px; margin: 0 2px; flex-shrink: 0; border: 1px solid color-mix(in oklab, var(--primary) 70%, var(--surface)); box-shadow: 0 2px 6px color-mix(in oklab, var(--primary) 18%, transparent); cursor: grab; user-select: none; -webkit-user-select: none; transition: opacity 120ms ease, transform 120ms ease, box-shadow 120ms ease; } .arena-mine:hover { transform: translateY(-1px); box-shadow: 0 4px 9px color-mix(in oklab, var(--primary) 25%, transparent); } .arena-mine:active { cursor: grabbing; } .arena-mine-dragging { opacity: 0.34; cursor: grabbing; } .arena-c-mine { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--primary) 72%, transparent); border-radius: 5px; cursor: grab; } .arena-c-mine:active { cursor: grabbing; } .arena-row-drop-target { background: color-mix(in oklab, var(--primary-soft) 78%, var(--surface)) !important; box-shadow: inset 3px 0 0 var(--primary), inset 0 0 0 2px color-mix(in oklab, var(--primary) 64%, transparent) !important; } .arena-row-drop-target .arena-c-px::after { content: 'DROP'; position: absolute; top: 50%; left: calc(50% + 48px); transform: translateY(-50%); padding: 2px 4px; border-radius: 3px; background: var(--primary); color: var(--primary-fg); font-size: 7px; letter-spacing: 0.05em; } .arena-c-px { position: relative; z-index: 1; color: var(--fg); font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 800; line-height: 1.05; text-align: center; } .arena-price-main { display: flex; align-items: center; justify-content: center; gap: 3px; } .arena-c-px small { display: block; margin-top: 1px; font-size: 8px; font-weight: 700; opacity: 0.78; } .arena-c-px.paper-up { color: var(--success); } .arena-c-px.paper-dn { color: var(--danger); } .arena-mk { min-width: 12px; padding: 1px 3px; border-radius: 3px; background: var(--fg-faint); color: var(--surface); font-size: 7px; font-style: normal; font-weight: 900; } .arena-c-done { color: var(--fg-muted); font-family: 'JetBrains Mono', monospace; font-size: 10px; text-align: center; } /* ============================================================ Dark "trading terminal" Order Book skin. Scoped under .arena-book-term so it stays dark regardless of the app theme, and overrides the base light-card rules above. ============================================================ */ .arena-book-term { /* Follow the app theme: light surface in light mode, dark in dark mode. */ --ob-bg: var(--surface); --ob-bg2: var(--surface-hover); --ob-head: color-mix(in oklab, var(--fg) 6%, var(--surface)); --ob-line: var(--border); --ob-line-soft: color-mix(in oklab, var(--border) 60%, transparent); --ob-text: var(--fg); --ob-dim: var(--fg-muted); --ob-faint: var(--fg-faint); --ob-up: var(--success); --ob-dn: var(--danger); --ob-freq: #7c6cff; background: var(--ob-bg); border-color: var(--ob-line); color: var(--ob-text); box-shadow: var(--shadow-sm); } body[data-theme="dark"] .arena-book-term { --ob-freq: #9aa0ff; } .arena-book-term .arena-book-titlebar { min-height: 44px; padding: 8px 12px; background: var(--ob-head); color: var(--ob-text); border-bottom: 1px solid var(--ob-line); } .arena-book-term .arena-book-titlebar strong { font-size: 12px; letter-spacing: 0.02em; } .arena-book-term .arena-book-titlebar > div span { color: var(--ob-faint); font-size: 9px; } .arena-book-term .arena-live-dot { background: color-mix(in oklab, var(--ob-up) 14%, transparent); border-color: color-mix(in oklab, var(--ob-up) 40%, transparent); color: var(--ob-up); } .arena-book-term .arena-brow { grid-template-columns: minmax(74px, 1fr) 32px 44px 26px minmax(74px, 1.1fr) 104px minmax(74px, 1.1fr) 26px 44px 32px minmax(66px, 0.9fr); gap: 0; height: 30px; padding: 0; align-items: stretch; } /* Vertical column separators — full-height cells form a table grid */ .arena-book-term .arena-brow > * { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 0 6px; border-right: 1px solid var(--ob-line-soft); } .arena-book-term .arena-brow > *:last-child { border-right: none; } .arena-book-term .arena-c-blot { justify-content: flex-end; } .arena-book-term .arena-c-alot { justify-content: flex-start; } .arena-book-term .arena-c-trade { justify-content: flex-end; } .arena-book-term .arena-c-done { justify-content: flex-end; } .arena-book-term .arena-c-px { flex-direction: column; } .arena-book-term .arena-c-act { padding: 0; } .arena-book-term .arena-bhead, .arena-book-term .arena-btot { height: 32px; background: var(--ob-head); color: var(--ob-faint); font-size: 10px; letter-spacing: 0.05em; } .arena-book-term .arena-bhead { border-bottom: 1px solid var(--ob-line); } .arena-book-term .arena-btot { border-top: 1px solid var(--ob-line); color: var(--ob-dim); font-size: 11px; } /* Reserve the same scrollbar gutter on head/total as the scrollable body so the vertical column dividers line up across all three rows. */ .arena-book-term .arena-bhead, .arena-book-term .arena-btot { overflow-y: scroll; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: transparent transparent; } .arena-book-term .arena-bhead::-webkit-scrollbar, .arena-book-term .arena-btot::-webkit-scrollbar { width: 0; height: 0; } .arena-book-term .arena-btot > span { color: var(--ob-text); } /* header / total column alignment: numbers right, actions centred */ .arena-book-term .arena-bhead > span, .arena-book-term .arena-btot > span { justify-content: flex-end; } .arena-book-term .arena-bhead > span:nth-child(1), .arena-book-term .arena-btot > span:nth-child(1) { justify-content: flex-start; } .arena-book-term .arena-bhead > span:nth-child(2), .arena-book-term .arena-bhead > span:nth-child(6), .arena-book-term .arena-bhead > span:nth-child(10), .arena-book-term .arena-btot > span:nth-child(6) { justify-content: center; } .arena-book-term .arena-bbody { max-height: 540px; overflow-y: scroll; scrollbar-gutter: stable; scrollbar-color: var(--ob-line) transparent; } .arena-book-term .arena-price-row { border-bottom: 1px solid var(--ob-line-soft); transition: background-color 90ms ease; } .arena-book-term .arena-price-row:hover, .arena-book-term .arena-price-row:focus-visible { background: var(--ob-bg2); } .arena-book-term .arena-brow-last { background: color-mix(in oklab, var(--ob-freq) 12%, transparent); box-shadow: inset 2px 0 0 var(--ob-freq); } .arena-book-term .arena-brow-last:hover { background: color-mix(in oklab, var(--ob-freq) 18%, transparent); } /* Trade column — subtle directional depth bar + compact value */ .arena-book-term .arena-c-trade { position: relative; display: flex; align-items: center; justify-content: flex-end; height: 100%; overflow: hidden; padding-right: 6px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ob-dim); } .arena-book-term .arena-c-trade em { position: relative; z-index: 1; font-style: normal; } /* Buy/Sell pressure split bar (green buy | red sell), proportional. */ .arena-book-term .arena-tbar-split { position: absolute; top: 3px; bottom: 3px; left: 6px; right: 6px; display: flex; border-radius: 2px; overflow: hidden; opacity: 0.42; } .arena-book-term .arena-tbar-buy { height: 100%; background: var(--ob-up); } .arena-book-term .arena-tbar-sell { height: 100%; background: var(--ob-dn); } .arena-book-term .arena-c-trade em { color: var(--ob-text); } /* carried band (no real print at this tick) — keep the column continuous but visibly subordinate to actual trades */ .arena-book-term .arena-c-trade-carry .arena-tbar-split { opacity: 0.16; } .arena-book-term .arena-plus { width: 20px; height: 20px; border-width: 1px; font-size: 13px; line-height: 17px; opacity: 0.55; } .arena-book-term .arena-plus-buy { color: var(--ob-up); } .arena-book-term .arena-plus-sell { color: var(--ob-dn); } .arena-book-term .arena-c-freq { color: var(--ob-freq); font-size: 11px; text-align: center; } .arena-book-term .arena-c-delta { font-size: 9px; text-align: center; color: transparent; } .arena-book-term .arena-c-delta.delta-up { color: var(--ob-up); } .arena-book-term .arena-c-delta.delta-dn { color: var(--ob-dn); } .arena-book-term .arena-c-blot, .arena-book-term .arena-c-alot { height: 100%; font-size: 12.5px; color: var(--ob-text); } .arena-book-term .arena-lotn { color: var(--ob-text); padding: 0 5px; } .arena-book-term .arena-lotn.d-up { color: var(--ob-up); } .arena-book-term .arena-lotn.d-dn { color: var(--ob-dn); } .arena-book-term .arena-c-px { color: var(--ob-text); font-size: 14px; } .arena-book-term .arena-c-px small { color: var(--ob-dim); opacity: 1; font-size: 9px; } .arena-book-term .arena-c-px.paper-up { color: var(--ob-up); } .arena-book-term .arena-c-px.paper-up small { color: color-mix(in oklab, var(--ob-up) 70%, var(--ob-dim)); } .arena-book-term .arena-c-px.paper-dn { color: var(--ob-dn); } .arena-book-term .arena-c-px.paper-dn small { color: color-mix(in oklab, var(--ob-dn) 70%, var(--ob-dim)); } .arena-book-term .arena-mk { background: var(--ob-freq); color: #fff; } .arena-book-term .arena-c-done { color: var(--ob-dim); font-size: 11px; text-align: right; } .arena-book-term .arena-c-done.paper-up { color: var(--ob-up); } .arena-book-term .arena-c-done.paper-dn { color: var(--ob-dn); } /* Footer withdraw actions */ .arena-book-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--ob-line); border-top: 1px solid var(--ob-line); } .arena-book-actions button { padding: 11px 8px; border: none; background: var(--ob-head); color: var(--ob-dim); font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; transition: background-color 110ms ease, color 110ms ease; } .arena-book-actions button:hover { background: var(--ob-bg2); color: var(--ob-text); } .arena-book-actions .arena-wd-buy:hover { color: var(--ob-up); } .arena-book-actions .arena-wd-sell:hover { color: var(--ob-dn); } .arena-book-actions .arena-wd-all { background: var(--ob-bg2); color: var(--ob-text); } .arena-book-actions .arena-wd-all:hover { background: color-mix(in oklab, var(--ob-bg2) 80%, var(--ob-text)); } .arena-ticket-wrap { min-width: 0; position: sticky; top: 86px; } .arena-ticket { overflow: hidden; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--primary); border-radius: var(--radius); box-shadow: var(--shadow); } .arena-ticket-heading { margin-bottom: 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .arena-ticket-heading > div { display: flex; flex-direction: column; gap: 2px; } .arena-ticket-heading strong { color: var(--fg); font-size: 16px; } .arena-ticket-heading > div span { color: var(--fg-muted); font-size: 10px; } .arena-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 16px; padding: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; } .arena-seg button { min-height: 40px; padding: 6px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--fg-muted); font-size: 12px; font-weight: 800; cursor: pointer; } .arena-seg button.on { background: var(--surface); border-color: color-mix(in oklab, var(--primary) 50%, var(--border)); color: var(--primary); box-shadow: var(--shadow-sm); } .arena-step { display: grid; grid-template-columns: 48px 40px minmax(0, 1fr) 40px; align-items: center; gap: 5px; margin-bottom: 10px; } .arena-step-lbl { color: var(--fg-muted); font-size: 11px; font-weight: 700; } .arena-step button { width: 40px; height: 40px; padding: 0; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--fg); font-size: 15px; cursor: pointer; } .arena-step button:hover { border-color: var(--primary); color: var(--primary); } .arena-step input { width: 100%; min-width: 0; height: 40px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; outline: none; background: var(--surface-2); color: var(--fg); font-family: 'JetBrains Mono', monospace; font-size: 15px; font-variant-numeric: tabular-nums; text-align: center; } .arena-step input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 10%, transparent); } .arena-allocation-label { margin: 14px 0 7px; display: flex; justify-content: space-between; gap: 8px; color: var(--fg-faint); font-size: 10px; } .arena-allocation-label strong { color: var(--fg-muted); font-family: 'JetBrains Mono', monospace; font-size: 10px; } .arena-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 14px; } .arena-presets button { min-width: 0; padding: 9px 3px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--fg-muted); font-size: 11px; font-weight: 800; cursor: pointer; } .arena-presets button:hover { border-color: var(--primary); color: var(--primary); } .arena-estimate { margin-bottom: 13px; padding: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; display: grid; gap: 7px; } .arena-estimate > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .arena-estimate span { color: var(--fg-muted); font-size: 10px; } .arena-estimate b { color: var(--fg-muted); font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; } .arena-estimate > div:first-child strong { color: var(--fg); font-family: 'JetBrains Mono', monospace; font-size: 18px; } .arena-maxrow { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 11px; } .arena-max { min-width: 0; padding: 9px 5px; overflow: hidden; border: 1px solid var(--border); border-radius: 7px; background: transparent; color: var(--fg-muted); font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } .arena-max:hover { border-color: var(--primary); color: var(--primary); } .arena-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .arena-btns .btn { min-width: 0; min-height: 64px; padding: 8px 10px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 14px; } .arena-btns .btn small { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 600; opacity: 0.82; } .arena-msg { margin-top: 9px; padding: 7px 9px; border-radius: 7px; background: var(--surface-2); color: var(--fg-muted); font-size: 10px; line-height: 1.4; text-align: center; } .arena-orders { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); } .arena-orders-h { margin-bottom: 5px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--fg-faint); font-size: 9px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .arena-wd { display: flex; gap: 3px; } .arena-wd button { padding: 3px 6px; border: 1px solid var(--border); border-radius: 5px; background: transparent; color: var(--fg-muted); font-size: 8px; font-weight: 800; cursor: pointer; } .arena-wd button:hover { border-color: var(--danger); color: var(--danger); } .arena-order { min-height: 28px; padding: 5px 0; border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent); display: flex; align-items: center; gap: 7px; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-variant-numeric: tabular-nums; } .arena-order > span:first-child { width: 30px; font-weight: 900; } .arena-order-detail { flex: 1; display: flex; flex-direction: column; gap: 2px; color: var(--fg-muted); } .arena-order-detail b { color: var(--fg); font-size: 9px; font-weight: 700; } .arena-order-detail small { color: var(--fg-faint); font-size: 8px; } .arena-order button { border: none; background: transparent; color: var(--fg-faint); font-size: 12px; cursor: pointer; } .arena-order button:hover { color: var(--danger); } .arena-hist { overflow: hidden; margin-bottom: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .arena-hist-title { padding: 10px 12px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 10px; } .arena-hist-title > div { display: flex; flex-direction: column; gap: 1px; } .arena-hist-title strong { color: var(--fg); font-size: 11px; } .arena-hist-title span { color: var(--fg-faint); font-size: 8px; } .arena-history-list { padding: 3px 10px; } .arena-history-row { display: grid; grid-template-columns: 46px 80px 1fr 1fr auto; align-items: center; gap: 8px; min-height: 30px; border-bottom: 1px solid color-mix(in oklab, var(--border) 65%, transparent); color: var(--fg-muted); font-family: 'JetBrains Mono', monospace; font-size: 9px; font-variant-numeric: tabular-nums; } .arena-history-row:last-child { border-bottom: none; } .arena-history-row > span:first-child { font-weight: 900; } .arena-sim-controls { display: flex; align-items: center; gap: 18px; margin-bottom: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); } .arena-control-group, .arena-regime-wrap { min-width: 0; display: flex; align-items: center; gap: 8px; } .arena-control-group > span, .arena-regime-wrap > span { flex-shrink: 0; color: var(--fg-faint); font-size: 8px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; } .arena-profile-options { width: 360px; } .arena-speed-control { margin-left: auto; } .arena-mini-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(44px, 1fr); gap: 3px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; } .arena-mini-seg button { min-width: 44px; min-height: 30px; padding: 5px 9px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--fg-muted); font-size: 10px; font-weight: 800; white-space: nowrap; cursor: pointer; } .arena-profile-options button { min-width: 82px; } .arena-mini-seg button:hover { color: var(--fg); background: var(--surface-hover); } .arena-mini-seg button.on { border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); } .arena-regime-wrap { margin-left: 2px; } .arena-regime { min-width: 94px; min-height: 30px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--surface-2); color: var(--fg-muted); font-size: 9px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; } .arena-regime i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .arena-regime-quiet { color: var(--fg-muted); } .arena-regime-normal { color: var(--primary); } .arena-regime-trend_up { color: var(--success); } .arena-regime-trend_down { color: var(--danger); } .arena-regime-volatile { border-color: color-mix(in oklab, #d49a28 42%, var(--border)); color: #b47b12; } .arena-regime-panic_buy { border-color: color-mix(in oklab, var(--success) 45%, var(--border)); background: color-mix(in oklab, var(--success) 8%, var(--surface)); color: var(--success); } .arena-regime-panic_sell { border-color: color-mix(in oklab, var(--danger) 45%, var(--border)); background: color-mix(in oklab, var(--danger) 8%, var(--surface)); color: var(--danger); } .arena-insights { overflow: hidden; margin-bottom: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .arena-insights-head { min-height: 50px; padding: 10px 13px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .arena-insights-head > div { display: flex; flex-direction: column; gap: 2px; } .arena-insights-head strong { color: var(--fg); font-size: 12px; } .arena-insights-head span { color: var(--fg-faint); font-size: 9px; } .arena-insights-head > span { padding: 3px 7px; border: 1px solid var(--border); border-radius: 999px; font-family: 'JetBrains Mono', monospace; } .arena-insight-list { padding: 3px 12px; } .arena-insight { min-height: 42px; padding: 8px 2px; border-bottom: 1px solid color-mix(in oklab, var(--border) 65%, transparent); display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: start; gap: 10px; } .arena-insight:last-child { border-bottom: none; } .arena-insight > span { padding-top: 2px; color: var(--fg-faint); font-family: 'JetBrains Mono', monospace; font-size: 9px; font-variant-numeric: tabular-nums; } .arena-insight p { margin: 0; color: var(--fg-muted); font-size: 11px; line-height: 1.55; } .arena-insight-spoof p { color: color-mix(in oklab, var(--danger) 72%, var(--fg)); } .arena-insight-iceberg p { color: color-mix(in oklab, #4d78d6 72%, var(--fg)); } .arena-insight-sweep p { color: color-mix(in oklab, #b47b12 74%, var(--fg)); } .arena-insight-wall p { color: color-mix(in oklab, var(--primary) 70%, var(--fg)); } body[data-theme="dark"] .arena-book-titlebar { background: var(--surface-2); color: var(--fg); border-bottom: 1px solid var(--border); } body[data-theme="dark"] .arena-book-titlebar > div span { color: var(--fg-muted); } body[data-theme="dark"] .arena-bhead, body[data-theme="dark"] .arena-btot { background: color-mix(in oklab, var(--surface-2) 82%, var(--fg) 4%); } body[data-theme="dark"] .arena-brow-last { background: color-mix(in oklab, var(--primary) 10%, var(--surface)); box-shadow: inset 3px 0 0 color-mix(in oklab, var(--primary) 78%, transparent); } body[data-theme="dark"] .arena-ticket { border-top-color: color-mix(in oklab, var(--primary) 78%, var(--border)); box-shadow: none; } body[data-theme="dark"] .arena-mini-seg button.on { box-shadow: none; } .ihsg-floater-arena { right: 10px !important; bottom: 10px !important; min-width: 138px !important; padding: 7px 10px !important; } @media (max-width: 980px) { .arena-account-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } .arena-account-actions { grid-column: 1 / -1; justify-content: flex-end; padding: 0; } .arena-main { grid-template-columns: minmax(0, 1.2fr) 116px minmax(280px, 0.7fr); } .arena-sim-controls { flex-wrap: wrap; gap: 10px 14px; } .arena-speed-control { margin-left: 0; } .arena-regime-wrap { margin-left: auto; } } @media (max-width: 820px) { .arena-main { grid-template-columns: 1fr; } .arena-ticket-wrap { position: static; top: auto; } .arena-tape { order: 3; } .arena-ticket-wrap { order: 2; } .arena-tape-list { max-height: 240px; } } @media (max-width: 640px) { .ihsg-floater-arena { transform: scale(0.82); transform-origin: right bottom; } .arena-account-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .arena-account-card { padding: 11px 12px; } .arena-account-card > strong { font-size: 17px; } .arena-account-actions { justify-content: space-between; } .arena-head { align-items: flex-start; } .arena-head-main { align-items: flex-start; flex-direction: column; gap: 8px; } .arena-quote { padding-left: 48px; } .arena-head-last { font-size: 21px; } .arena-change { padding: 6px 8px; font-size: 9px; } .arena-stats { grid-template-columns: repeat(3, 1fr); } .arena-control-group { width: 100%; align-items: flex-start; flex-direction: column; } .arena-mini-seg, .arena-profile-options { width: 100%; } .arena-profile-options button { min-width: 0; padding-inline: 4px; } .arena-regime-wrap { width: 100%; margin-left: 0; justify-content: space-between; } .arena-pos { align-items: flex-start; flex-direction: column; } .arena-brow { grid-template-columns: 26px minmax(56px, 1.1fr) minmax(104px, 1.5fr) minmax(56px, 1.1fr) 26px; height: 28px; } .arena-brow > :nth-child(2), .arena-brow > :nth-child(6), .arena-brow > :nth-child(8) { display: none; } .arena-bhead > span:nth-child(3)::after { content: ''; } .arena-book-titlebar { min-height: 48px; padding: 9px 12px; } .arena-book-titlebar strong { font-size: 12px; } .arena-book-titlebar > div span { display: none; } .arena-bhead, .arena-btot { height: 24px; font-size: 8px; } .arena-c-px { font-size: 11px; } .arena-c-px small { font-size: 7px; } .arena-bbody { max-height: 70vh; } .arena-ticket { padding: 12px; } .arena-ticket-heading { margin-bottom: 12px; } .arena-ticket-heading strong { font-size: 13px; } .arena-seg { margin-bottom: 13px; padding: 3px; } .arena-seg button { min-height: 34px; font-size: 11px; } .arena-step { grid-template-columns: 42px 34px minmax(0, 1fr) 34px; margin-bottom: 8px; } .arena-step button { width: 34px; height: 34px; } .arena-step input { height: 34px; font-size: 13px; } .arena-btns .btn { min-height: 56px; font-size: 12px; } .arena-history-row { grid-template-columns: 42px 64px 1fr auto; } .arena-history-row > span:nth-child(4) { display: none; } .arena-insight { grid-template-columns: 1fr; gap: 3px; } } @media (max-width: 420px) { .arena-account-summary { grid-template-columns: 1fr; } .arena-account-actions { grid-column: auto; } .arena-quote { padding-left: 0; } .arena-symbol-logo { display: none; } .arena-step { grid-template-columns: 38px 32px minmax(0, 1fr) 32px; } .arena-step button { width: 32px; } .arena-maxrow { grid-template-columns: 1fr; } } /* ===== Paper Trading ===== */ .paper-summary { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin-bottom: 16px; } .paper-sumbox { flex: 1; min-width: 120px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; } .paper-sumbox span { font-size: 11px; color: var(--fg-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .paper-sumbox strong { font-size: 20px; font-weight: 800; color: var(--fg); font-variant-numeric: tabular-nums; } .paper-sum-actions { display: flex; align-items: center; gap: 10px; } .paper-fee-toggle { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--fg-muted); cursor: pointer; } .paper-reset { font-size: 12px; padding: 6px 12px; } .paper-up { color: var(--success); } .paper-dn { color: var(--danger); } .paper-buybar { max-width: 480px; margin-bottom: 16px; } .paper-buy-btn { margin-top: 12px; background: var(--primary); color: var(--primary-fg, #fff); border: none; border-radius: 10px; padding: 8px 16px; font-size: 13px; font-weight: 800; cursor: pointer; } .paper-buy-btn:hover { filter: brightness(1.08); } .paper-empty { padding: 28px 18px; border: 1px dashed var(--border); border-radius: var(--radius); text-align: center; color: var(--fg-muted); font-size: 14px; margin-bottom: 16px; } .paper-holdings { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; } .paper-hrow { display: grid; grid-template-columns: 1.4fr 0.6fr 1fr 1fr 0.9fr auto; align-items: center; gap: 10px; padding: 11px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer; } .paper-hrow:hover { border-color: var(--primary); } .paper-hhead { background: none; border: none; cursor: default; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--fg-faint); padding: 0 14px; } .paper-tk { font-family: 'JetBrains Mono', monospace; font-weight: 800; color: var(--fg); } .paper-sellbtn { border: 1px solid var(--danger); background: transparent; color: var(--danger); font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 8px; cursor: pointer; } .paper-sellbtn:hover { background: var(--danger); color: #fff; } .paper-hist { margin-bottom: 16px; } .paper-hist-toggle { background: none; border: none; color: var(--fg-muted); font-size: 13px; font-weight: 700; cursor: pointer; padding: 8px 0; } .paper-hist-list { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; } .paper-hist-row { display: grid; grid-template-columns: 50px 70px 1fr auto; gap: 10px; padding: 7px 12px; background: var(--surface-2); border-radius: 8px; font-size: 12px; font-variant-numeric: tabular-nums; } .paper-hist-row > span:first-child { font-weight: 800; } .btn-sell { background: var(--danger); color: #fff; } .btn-sell:hover { filter: brightness(1.08); } .paper-modal-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; padding: 18px; } .paper-modal { width: min(380px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3); } .paper-modal-head { display: flex; align-items: center; justify-content: space-between; font-size: 16px; color: var(--fg); margin-bottom: 10px; } .paper-modal-head strong { font-family: 'JetBrains Mono', monospace; } .paper-modal-x { background: none; border: none; color: var(--fg-muted); font-size: 22px; line-height: 1; cursor: pointer; } .paper-modal-price { font-size: 13px; color: var(--fg-muted); margin-bottom: 12px; } .paper-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; } .paper-field span { font-size: 12px; color: var(--fg-muted); } .paper-field input { padding: 9px 12px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface-2); color: var(--fg); font-size: 15px; font-variant-numeric: tabular-nums; } .paper-calc { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; } .paper-calc > div { display: flex; justify-content: space-between; font-size: 13px; color: var(--fg-muted); font-variant-numeric: tabular-nums; } .paper-calc-total { padding-top: 6px; border-top: 1px solid var(--border); } .paper-calc-total span { color: var(--fg); font-weight: 800; font-size: 15px; } .paper-modal-err { background: rgba(220, 50, 50, 0.1); border: 1px solid var(--danger); color: var(--danger); font-size: 12px; padding: 8px 12px; border-radius: 8px; margin-bottom: 12px; text-align: center; } .paper-modal-submit { width: 100%; } .paper-modal-submit:disabled { cursor: not-allowed; filter: grayscale(0.35); opacity: 0.48; box-shadow: none; transform: none; } @media (max-width: 640px) { .paper-hrow { grid-template-columns: 1.2fr 0.5fr 1fr 0.8fr auto; font-size: 12px; } .paper-hrow > span:nth-child(3), .paper-hhead > span:nth-child(3) { display: none; } } /* ===== Fundamental card (Analyzer) ===== */ .fund-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; } .fund-loading { color: var(--fg-muted); font-size: 14px; padding: 12px 0; } .fund-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .fund-name { font-size: 16px; font-weight: 800; color: var(--fg); } .fund-sector { font-size: 12px; color: var(--fg-muted); margin-top: 2px; } .fund-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 12px; } .fund-metric { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; } .fund-metric-label { font-size: 11px; font-weight: 700; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.03em; } .fund-metric-value { font-size: 18px; font-weight: 800; color: var(--fg); font-variant-numeric: tabular-nums; margin: 2px 0; } .fund-metric-hint { font-size: 10px; color: var(--fg-faint); } .fund-52w { margin-top: 14px; font-size: 12px; color: var(--fg-muted); } .fund-52w strong { color: var(--fg); font-variant-numeric: tabular-nums; } .fund-disclaimer { margin-top: 12px; font-size: 11px; color: var(--fg-faint); font-style: italic; } /* ===== Watchlist ===== */ .watchlist-star { background: none; border: none; cursor: pointer; line-height: 1; padding: 0; color: var(--fg-faint); transition: color 0.15s, transform 0.1s; } .watchlist-star:hover { transform: scale(1.15); } .watchlist-star.active { color: #FFC53D; } /* Widget: search box + autocomplete */ .watchlist-search { position: relative; margin-bottom: 14px; max-width: 420px; } .watchlist-search-input { width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--fg); font-size: 13px; } .watchlist-search-input:focus { outline: none; border-color: var(--primary); } .watchlist-search-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22); } .watchlist-search-item { display: block; width: 100%; text-align: left; padding: 9px 14px; background: none; border: none; cursor: pointer; font-size: 12px; color: var(--fg-muted); } .watchlist-search-item:hover { background: var(--surface-2); } .watchlist-search-item strong { color: var(--fg); font-family: 'JetBrains Mono', monospace; } /* Widget: empty state + rows */ .watchlist-empty { padding: 28px 18px; border: 1px dashed var(--border); border-radius: var(--radius); text-align: center; color: var(--fg-muted); font-size: 14px; } .watchlist-rows { display: flex; flex-direction: column; gap: 6px; } .watchlist-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .watchlist-row:hover { border-color: var(--primary); background: var(--surface-2); } .watchlist-logo { border-radius: 50%; background: #fff; object-fit: contain; flex-shrink: 0; } .watchlist-logo-fallback { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; color: var(--primary); background: var(--primary-soft); } .watchlist-tk { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 14px; color: var(--fg); width: 56px; flex-shrink: 0; } .watchlist-spark-wrap { flex: 1; min-width: 40px; height: 24px; display: flex; align-items: center; } .watchlist-spark { width: 100%; height: 24px; } .watchlist-px { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--fg); text-align: right; min-width: 78px; } .watchlist-up { color: var(--success); font-weight: 700; font-size: 13px; min-width: 56px; text-align: right; } .watchlist-dn { color: var(--danger); font-weight: 700; font-size: 13px; min-width: 56px; text-align: right; } .watchlist-remove { border: none; background: none; color: var(--fg-faint); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; flex-shrink: 0; } .watchlist-remove:hover { color: var(--danger); } @media (max-width: 640px) { .watchlist-spark-wrap { display: none; } .watchlist-tk { width: 48px; } .watchlist-px { min-width: 64px; font-size: 12px; } } /* ===== Sector Heatmap — home preview ===== */ .heatmap-preview .heatmap-canvas { height: min(55vh, 504px); } .heatmap-preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .heatmap-preview-cta { display: block; width: 100%; margin-top: 16px; text-align: center; font-weight: 800; } /* ===== Sector Heatmap ===== */ .heatmap-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .heatmap-toolbar-right { display: flex; align-items: center; gap: 12px; } .heatmap-toolbar-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .heatmap-tf-toggle { display: flex; gap: 4px; } .heatmap-tf-toggle .strategy-mode-btn { padding: 5px 13px; font-size: 12px; font-weight: 800; } .heatmap-ts { font-size: 12px; color: var(--fg-muted); } .heatmap-scale-toggle { display: flex; align-items: center; gap: 4px; } .heatmap-scale-label { font-size: 11px; font-weight: 700; color: var(--fg-muted); margin-right: 2px; } .heatmap-scale-toggle .strategy-mode-btn { padding: 3px 10px; font-size: 11px; } .heatmap-legend { display: flex; align-items: center; gap: 8px; } .heatmap-legend-cap { font-size: 11px; font-weight: 700; color: var(--fg-muted); } .heatmap-legend-bar { display: flex; width: 160px; height: 10px; border-radius: 5px; overflow: hidden; border: 1px solid var(--border); } .heatmap-legend-bar > span { flex: 1; } .heatmap-error { padding: 16px; border-radius: var(--radius); background: rgba(220, 50, 50, 0.08); border: 1px solid var(--danger); color: var(--danger); font-size: 13px; text-align: center; margin-bottom: 14px; } .heatmap-canvas { position: relative; width: 100%; height: min(84vh, 840px); border-radius: var(--radius); overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); } .heatmap-skeleton { animation: pulse 1.5s infinite; } .heatmap-sector { position: absolute; overflow: hidden; } .heatmap-sector-label { position: absolute; top: 0; left: 0; right: 0; height: 18px; line-height: 18px; padding: 0 6px; font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-muted); background: var(--surface); display: flex; align-items: center; justify-content: space-between; gap: 6px; overflow: hidden; } .heatmap-sector-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .heatmap-sector-pct { flex-shrink: 0; font-weight: 800; } .heatmap-sector-inner { position: absolute; } .heatmap-tile { position: absolute; border: 1px solid rgba(0, 0, 0, 0.18); padding: 0; margin: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: filter 0.12s, background 0.45s ease; } .heatmap-tile:hover { filter: brightness(1.12); z-index: 2; } .heatmap-tile-label { display: flex; flex-direction: column; align-items: center; line-height: 1.15; pointer-events: none; } .heatmap-tile-logo { background: #fff; border-radius: 50%; padding: 2px; object-fit: contain; margin-bottom: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } /* Detail card on tile tap/click */ .heatmap-detail { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 950; display: flex; align-items: center; justify-content: space-between; gap: 18px; width: min(440px, calc(100vw - 28px)); padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22); animation: heatmapDetailUp 0.18s ease; } @keyframes heatmapDetailUp { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } } .heatmap-detail-main { display: flex; align-items: center; gap: 12px; min-width: 0; } .heatmap-detail-logo { background: #fff; border-radius: 50%; padding: 3px; object-fit: contain; flex-shrink: 0; } .heatmap-detail-ticker { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 16px; color: var(--fg); } .heatmap-detail-sector { font-family: inherit; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-muted); } .heatmap-detail-stats { display: flex; align-items: baseline; gap: 12px; margin-top: 2px; font-size: 12px; color: var(--fg-muted); white-space: nowrap; } .heatmap-detail-stats strong { font-size: 13px; } .heatmap-detail-tfs { display: flex; gap: 6px; margin-top: 8px; } .heatmap-detail-tf { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 8px; border-radius: 8px; background: var(--surface-2); min-width: 52px; } .heatmap-detail-tf.active { background: color-mix(in srgb, var(--primary) 16%, transparent); outline: 1px solid color-mix(in srgb, var(--primary) 40%, transparent); } .heatmap-detail-tf-label { font-size: 9px; font-weight: 800; letter-spacing: 0.04em; color: var(--fg-faint); } .heatmap-detail-tf strong { font-size: 12px; font-family: 'JetBrains Mono', monospace; } .heatmap-detail-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .heatmap-detail-actions .btn-primary { font-size: 12px; padding: 8px 12px; white-space: nowrap; } .heatmap-detail-close { border: none; background: var(--surface-2); color: var(--fg-muted); width: 26px; height: 26px; border-radius: 8px; font-size: 16px; line-height: 1; cursor: pointer; flex-shrink: 0; } .heatmap-detail-close:hover { color: var(--fg); } .heatmap-tile-label strong { font-size: 12px; font-weight: 800; font-family: 'JetBrains Mono', monospace; } .heatmap-tile-label span { font-size: 10px; font-weight: 600; } /* Calendar — single breakpoint for all mobile overrides (no conflict) */ @media (max-width: 640px) { .calc-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .calc-grid > * { min-width: 0 !important; } .calc-grid .card { padding: 20px !important; } .calculator-screen { padding: 32px 0 64px !important; } .calculator-screen .fade-up { margin-bottom: 28px !important; } .calculator-screen h1 { font-size: 34px !important; line-height: 1.08 !important; letter-spacing: 0 !important; } .calculator-screen p { font-size: 14px !important; } .calculator-screen .calc-grid .card { padding: 18px !important; } .calculator-screen .calc-grid [style*="grid-template-columns: 1fr 1fr"], .calculator-screen .calc-grid [style*="grid-template-columns: 1fr 1.4fr auto"] { grid-template-columns: 1fr !important; } .input-group { min-width: 0; } .input { width: 100%; min-width: 0; } .card .mono.tnum { overflow-wrap: anywhere; word-break: break-word; } .band-filter-row { align-items: stretch !important; padding: 12px !important; } .band-filter-row .input { flex: 1 1 130px; width: 100% !important; } .band-filter-row .btn { flex: 1 1 100%; justify-content: center; } .band-filter-row > span:last-child { flex: 1 1 100%; margin-left: 0 !important; justify-content: center; text-align: center; } /* Collapse 2-column calendar grid */ .market-calendar-grid { display: flex !important; flex-direction: column !important; } .market-calendar-grid > div:first-child { display: none !important; } /* Events panel: vertical stack */ .cal-events-panel { display: flex !important; flex-direction: column !important; gap: 10px; } /* Card: compact desktop-like layout */ .cal-event-card { display: grid !important; grid-template-columns: 64px minmax(0, 1fr) !important; align-items: center !important; gap: 10px !important; padding: 12px !important; } .cal-event-datebox { display: flex !important; min-height: 58px !important; } .cal-event-badge { display: none !important; } /* Legend */ .cal-dot-legend { display: flex !important; align-items: center; gap: 12px; flex-wrap: wrap; padding: 4px 2px 2px; } /* Hide duplicate mobile-only meta; date box stays visible on mobile. */ .cal-event-meta-mobile { display: none !important; align-items: center; gap: 6px; margin-bottom: 4px; } .cal-event-dot-inline { display: none !important; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; opacity: 0.9; } /* Typography */ .cal-event-title { font-size: 14px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px !important; } .cal-event-desc { font-size: 12px !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } /* Analyzer mobile: prevent card clipping. */ .analyzer-ml-grid { grid-template-columns: 1fr !important; gap: 12px !important; } .analyzer-ml-card { padding: 20px !important; min-width: 0 !important; } .analyzer-metric-grid { grid-template-columns: 1fr 1fr !important; } .analyzer-trade-header, .analyzer-trade-row { grid-template-columns: 1.25fr 0.9fr 1.35fr 1fr 1fr !important; column-gap: 6px !important; } .analyzer-trade-header span, .analyzer-trade-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Screener mobile: use cards instead of a wide table. */ .screener-table-wrap { display: none !important; } .screener-mobile-list { display: grid; gap: 10px; } .screener-mobile-card { width: 100%; text-align: left; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 12px; color: var(--fg); box-shadow: var(--shadow-sm); } .screener-mobile-card:disabled { opacity: 0.72; } .screener-mobile-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .screener-mobile-ticker { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 900; color: var(--fg); letter-spacing: 0; } .screener-mobile-sub { margin-top: 3px; font-size: 12px; font-weight: 800; line-height: 1.25; } .screener-mobile-signal { font-size: 11px; font-weight: 900; letter-spacing: 0.03em; white-space: nowrap; } .screener-mobile-meta, .screener-mobile-levels { display: grid; gap: 6px; } .screener-mobile-meta { grid-template-columns: auto 1fr auto 1fr auto 1fr; padding: 8px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); align-items: center; } .screener-mobile-meta span, .screener-mobile-levels span { font-size: 10px; font-weight: 800; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; } .screener-mobile-meta strong { font-size: 11px; font-weight: 800; color: var(--fg); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .screener-mobile-levels { grid-template-columns: repeat(4, 1fr); margin-top: 10px; } .screener-mobile-levels div { min-width: 0; padding: 8px; border-radius: var(--radius-sm); background: var(--surface-2); } .screener-mobile-levels strong { display: block; margin-top: 4px; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 800; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Strategy picker: compact on mobile */ .strategy-picker { padding: 12px 14px !important; } .screener-strategy-breakdown { gap: 8px; font-size: 10px; } /* Sector heatmap: taller on mobile, slimmer legend */ .heatmap-canvas { height: min(80vh, 560px); } .heatmap-legend-bar { width: 110px; } /* Broker flow cards: compact readable table on phones. */ .broker-card { padding: 0 !important; } .broker-card > div:first-child { padding: 14px 16px !important; } .broker-table th { padding: 9px 12px !important; font-size: 10px !important; } .broker-table th:nth-child(3), .broker-cell-price { display: none !important; } .broker-cell-code { padding: 12px 12px !important; width: 68px; } .broker-cell-code span { width: 42px !important; height: 30px !important; font-size: 12px !important; } .broker-cell-value { padding: 12px 14px 12px 8px !important; font-size: 15px !important; line-height: 1.15 !important; white-space: nowrap; } } /* Touch devices — disable hover-only interactive effects */ @media (hover: none) { .logo-btn { transition: none !important; } .logo-sparkline { stroke-dasharray: unset !important; stroke-dashoffset: 0 !important; transition: none !important; } .logo-math { transition: none !important; } .hero-3d { transition: none !important; } .nav-link:hover { color: var(--fg-muted) !important; background: transparent !important; } }