/* ============================================================ FXBias v2 — Single source of truth Theme switch: | ============================================================ */ * { box-sizing: border-box; margin: 0; padding: 0; } :root { /* Pastel accent palette (dusty, non-CRT) — same in both themes */ --bull: #7dd3ae; --bull-glow: rgba(125,211,174,0.45); --bull-stroke-l: #6ba88b; --bear: #e89a8e; --bear-glow: rgba(232,154,142,0.45); --bear-stroke-l: #c47467; --neutral: #a5acba; --neutral-glow: rgba(165,172,186,0.30); --warm-amber: #e8b87a; --warm-amber-glow: rgba(232,184,122,0.55); /* Status colors */ --status-live: var(--bull); --status-partial: var(--warm-amber); } /* DARK THEME (default) */ :root, :root[data-theme="dark"] { --bg: #1a1a1c; --stage: #1a1a1c; --card: linear-gradient(155deg, #1f1f24 0%, #1a1a1d 100%); --card-solid: #1f1f24; --text: #f0f0f3; --text-muted: rgba(240,240,243,0.55); --text-faint: rgba(240,240,243,0.38); --border: rgba(255,255,255,0.05); --ring-bg: #28282d; --shadow-out: -3px -3px 7px rgba(255,255,255,0.025), 5px 5px 14px rgba(0,0,0,0.6); /* Pulse — mint in dark */ --pulse-color: var(--bull); --pulse-glow: var(--bull-glow); --pulse-deep: var(--bull); /* Bias label colors */ --strong-bull-c: var(--bull); --bull-c: var(--bull); --neutral-bull-c: var(--bull); --neutral-c: var(--neutral); --neutral-bear-c: var(--bear); --bear-c: var(--bear); --strong-bear-c: var(--bear); } /* LIGHT THEME (lavender-teal gradient) */ :root[data-theme="light"] { --bg: linear-gradient(160deg, #e8e1ed 0%, #d4d1e3 28%, #b8c5d6 55%, #a5c0c8 80%, #c8d4d2 100%); --stage: #e8e1ed; --card: rgba(255,255,255,0.65); --card-solid: #ffffff; --text: #2e2940; --text-muted: rgba(46,41,64,0.55); --text-faint: rgba(46,41,64,0.38); --border: rgba(255,255,255,0.7); --ring-bg: rgba(255,255,255,0.96); --shadow-out: 0 12px 32px rgba(46,41,64,0.12), inset 0 1px 0 rgba(255,255,255,0.9); --pulse-color: #9a8bbf; --pulse-glow: rgba(154,139,191,0.55); --pulse-deep: #6a5a91; --strong-bull-c: var(--bull-stroke-l); --bull-c: var(--bull-stroke-l); --neutral-bull-c: var(--bull-stroke-l); --neutral-c: var(--neutral); --neutral-bear-c: var(--bear-stroke-l); --bear-c: var(--bear-stroke-l); --strong-bear-c: var(--bear-stroke-l); } body { background: var(--bg); color: var(--text); font-family: -apple-system, 'SF Pro Display', BlinkMacSystemFont, system-ui, sans-serif; min-height: 100vh; min-height: 100dvh; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; } /* ============================================================ LAYOUT — page container ============================================================ */ .app { max-width: 1280px; margin: 0 auto; padding: 22px 22px 110px; min-height: 100vh; } @media (max-width: 900px) { .app { padding: 14px 12px 120px; } } /* ============================================================ TOP NAV (desktop only — hidden on mobile) ============================================================ */ .topnav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; position: relative; z-index: 50; gap: 12px; } @media (max-width: 900px) { .topnav { display: none; } } .topnav__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 12px; } /* Mode toggle (Intraday / Swing) */ .mode-toggle { display: flex; align-items: center; gap: 4px; padding: 4px; background: linear-gradient(145deg, #18181b, #232328); border-radius: 999px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.04); } :root[data-theme="light"] .mode-toggle { background: rgba(255,255,255,0.55); backdrop-filter: blur(30px); box-shadow: inset 0 2px 4px rgba(46,41,64,0.10), 0 1px 0 rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.7); } .mode-toggle__opt { padding: 6px 13px; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; color: rgba(240,240,243,0.4); border-radius: 999px; transition: all 0.3s cubic-bezier(0.16,1,0.3,1); } :root[data-theme="light"] .mode-toggle__opt { color: rgba(46,41,64,0.45); } .mode-toggle__opt.is-active { background: linear-gradient(145deg, #36363e, #232328); color: var(--warm-amber); box-shadow: 0 1px 4px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05); } .mode-toggle__opt.is-active[data-mode="intraday"] { color: var(--bull); } :root[data-theme="light"] .mode-toggle__opt.is-active { background: rgba(255,255,255,0.92); color: #b8741a; box-shadow: 0 1px 4px rgba(46,41,64,0.10), inset 0 1px 0 rgba(255,255,255,0.95); } :root[data-theme="light"] .mode-toggle__opt.is-active[data-mode="intraday"] { color: var(--bull-stroke-l); } /* Brand dropdown (center) */ .brand-dropdown { position: relative; } .brand-dropdown__trigger { display: flex; align-items: center; gap: 10px; padding: 9px 20px; background: linear-gradient(145deg, #232328, #18181b); border-radius: 999px; box-shadow: var(--shadow-out); cursor: pointer; min-width: 170px; justify-content: center; border: 1px solid rgba(255,255,255,0.04); font-size: 13px; font-weight: 500; letter-spacing: 0.4px; color: var(--text); } :root[data-theme="light"] .brand-dropdown__trigger { background: rgba(255,255,255,0.55); backdrop-filter: blur(30px); box-shadow: 0 8px 24px rgba(46,41,64,0.10), inset 0 1px 0 rgba(255,255,255,0.85); border: 1px solid rgba(255,255,255,0.7); } .brand-dropdown__arrow { font-size: 10px; color: var(--text-muted); transition: transform 0.22s; } .brand-dropdown.is-open .brand-dropdown__arrow { transform: rotate(180deg); } .brand-dropdown__menu { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); min-width: 200px; background: linear-gradient(155deg, #1f1f24, #1a1a1d); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; box-shadow: 0 20px 56px rgba(0,0,0,0.7); padding: 8px; z-index: 60; animation: dropFade 0.22s cubic-bezier(0.16,1,0.3,1); } :root[data-theme="light"] .brand-dropdown__menu { background: rgba(255,255,255,0.96); border-color: rgba(255,255,255,0.85); box-shadow: 0 20px 56px rgba(46,41,64,0.22); } @keyframes dropFade { from { opacity: 0; transform: translateX(-50%) translateY(-6px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } .brand-dropdown__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border-radius: 10px; font-size: 13px; color: var(--text); text-align: left; transition: background 0.18s; } .brand-dropdown__item:hover { background: rgba(255,255,255,0.05); } :root[data-theme="light"] .brand-dropdown__item:hover { background: rgba(46,41,64,0.06); } .brand-dropdown__item.is-active { color: var(--bull); } :root[data-theme="light"] .brand-dropdown__item.is-active { color: var(--bull-stroke-l); } .brand-dropdown__item-letter { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: rgba(255,255,255,0.05); font-size: 11px; font-weight: 600; color: var(--text-muted); } :root[data-theme="light"] .brand-dropdown__item-letter { background: rgba(46,41,64,0.06); } /* Status badge (LIVE) */ .status-badge { display: flex; align-items: center; gap: 9px; padding: 8px 16px 8px 13px; background: linear-gradient(145deg, #232328, #18181b); border-radius: 999px; box-shadow: var(--shadow-out); border: 1px solid rgba(255,255,255,0.04); font-size: 11px; letter-spacing: 1.4px; font-weight: 600; color: var(--text); } :root[data-theme="light"] .status-badge { background: rgba(255,255,255,0.55); backdrop-filter: blur(30px); box-shadow: 0 8px 24px rgba(46,41,64,0.10), inset 0 1px 0 rgba(255,255,255,0.85); border: 1px solid rgba(255,255,255,0.7); } .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--status-live); box-shadow: 0 0 9px var(--bull-glow); animation: statusPulse 2.4s ease-in-out infinite; } .status-dot.is-partial { background: var(--status-partial); box-shadow: 0 0 9px var(--warm-amber-glow); } @keyframes statusPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } /* Theme toggle (sun/moon) — dočasne v topnav kým nie je Settings tab */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(145deg, #232328, #18181b); border: 1px solid rgba(255,255,255,0.04); box-shadow: var(--shadow-out); font-size: 15px; transition: transform 0.22s; } :root[data-theme="light"] .theme-toggle { background: rgba(255,255,255,0.55); backdrop-filter: blur(30px); border-color: rgba(255,255,255,0.7); box-shadow: 0 8px 24px rgba(46,41,64,0.10), inset 0 1px 0 rgba(255,255,255,0.85); } .theme-toggle:hover { transform: rotate(15deg); } /* ============================================================ GROUP (instrument category section) ============================================================ */ .group { margin-bottom: 26px; } .group__label { font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-bottom: 12px; padding-left: 6px; } .bias-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } @media (max-width: 900px) { .bias-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } } @media (max-width: 560px) { .bias-grid { grid-template-columns: 1fr; } } /* ============================================================ BIAS CARD ============================================================ */ .bias-card { position: relative; background: var(--card); border-radius: 20px; border: 1px solid var(--border); box-shadow: var(--shadow-out); padding: 18px; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: 240px; transition: box-shadow 0.2s; } :root[data-theme="light"] .bias-card { backdrop-filter: blur(20px); } .bias-card__corner-glow { position: absolute; top: -35%; right: -28%; width: 240px; height: 240px; border-radius: 50%; filter: blur(14px); pointer-events: none; opacity: 0.55; z-index: 0; } .bias-card--bull .bias-card__corner-glow { background: radial-gradient(circle, var(--bull-glow) 0%, transparent 60%); } .bias-card--bear .bias-card__corner-glow { background: radial-gradient(circle, var(--bear-glow) 0%, transparent 60%); } .bias-card--neutral .bias-card__corner-glow { background: radial-gradient(circle, var(--neutral-glow) 0%, transparent 60%); } .bias-card__head { display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 2; gap: 10px; } .bias-card__head-left { display: flex; flex-direction: column; gap: 3px; } .bias-card__head-right { display: flex; align-items: center; gap: 6px; } .bias-card__top-conviction { font-size: 8px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 700; color: var(--warm-amber); opacity: 0.85; } :root[data-theme="light"] .bias-card__top-conviction { color: #b8741a; } .bias-card__symbol { font-size: 17px; font-weight: 400; letter-spacing: 0.3px; color: var(--text); } .bias-card__tag { font-size: 9px; letter-spacing: 1.6px; font-weight: 700; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); } :root[data-theme="light"] .bias-card__tag { background: rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.6); } .bias-card--bull .bias-card__tag { color: var(--bull-c); } .bias-card--bear .bias-card__tag { color: var(--bear-c); } .bias-card--neutral .bias-card__tag { color: var(--neutral-c); } .bias-card__plan-badge { font-size: 10px; font-weight: 600; padding: 3px 8px; background: rgba(154,139,191,0.14); color: #b3a3d6; border-radius: 6px; border: 1px solid rgba(154,139,191,0.28); cursor: pointer; transition: all 0.18s; } :root[data-theme="light"] .bias-card__plan-badge { background: rgba(154,139,191,0.18); color: var(--pulse-deep); border-color: rgba(154,139,191,0.40); } .bias-card__plan-badge:hover { background: rgba(154,139,191,0.22); } .bias-card__conflict-tri { font-size: 14px; color: var(--warm-amber); cursor: pointer; padding: 2px 4px; border-radius: 5px; line-height: 1; transition: all 0.18s; } :root[data-theme="light"] .bias-card__conflict-tri { color: #b8741a; } .bias-card__conflict-tri:hover { background: rgba(232,184,122,0.14); transform: scale(1.1); } /* Ring */ .bias-card__ring-wrap { position: relative; width: 130px; height: 130px; margin: 12px auto 0; cursor: pointer; z-index: 2; transition: transform 0.32s cubic-bezier(0.16,1,0.3,1); } .bias-card.is-override-open .bias-card__ring-wrap { transform: translateX(-32%); } @media (max-width: 560px) { .bias-card.is-override-open .bias-card__ring-wrap { transform: translateX(-25%) scale(0.85); } } .bias-card__ring-glow { position: absolute; inset: -10px; border-radius: 50%; filter: blur(16px); z-index: 0; pointer-events: none; opacity: 0.5; } .bias-card--bull .bias-card__ring-glow { background: radial-gradient(circle, rgba(125,211,174,0.75) 0%, transparent 65%); } .bias-card--bear .bias-card__ring-glow { background: radial-gradient(circle, rgba(232,154,142,0.75) 0%, transparent 65%); } .bias-card--neutral .bias-card__ring-glow { background: radial-gradient(circle, rgba(165,172,186,0.55) 0%, transparent 65%); } .bias-card__ring-svg { position: relative; width: 100%; height: 100%; z-index: 1; } .bias-card__ring-track { fill: var(--ring-bg); stroke: none; } .bias-card__ring-progress { fill: none; stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset 0.6s cubic-bezier(0.16,1,0.3,1); } .bias-card--bull .bias-card__ring-progress { stroke: var(--bull); } .bias-card--bear .bias-card__ring-progress { stroke: var(--bear); } .bias-card--neutral .bias-card__ring-progress { stroke: var(--neutral); } .bias-card__ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; z-index: 2; } .bias-card__ring-value { font-size: 30px; font-weight: 200; letter-spacing: -1.2px; line-height: 1; } .bias-card__ring-value sup { font-size: 13px; opacity: 0.4; font-weight: 300; margin-left: 1px; } .bias-card__ring-label { font-size: 8px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; } /* TOP CONVICTION heartbeat */ .bias-card.is-top .bias-card__symbol { animation: heartbeat 1.4s ease-in-out infinite; text-shadow: 0 0 14px var(--bull); } .bias-card.is-top.bias-card--bear .bias-card__symbol { text-shadow: 0 0 14px var(--bear); } @keyframes heartbeat { 0%, 70%, 100% { opacity: 1; transform: scale(1); } 10% { opacity: 0.5; transform: scale(0.96); } 20% { opacity: 1; transform: scale(1.02); } 30% { opacity: 0.7; transform: scale(0.98); } 40% { opacity: 1; transform: scale(1); } } /* Override panel — inline inside card */ .bias-card__override { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); width: 140px; background: linear-gradient(155deg, #26262c 0%, #1a1a1d 100%); border-radius: 14px; padding: 12px 10px; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 20px 56px rgba(0,0,0,0.7); z-index: 5; animation: slideIn 0.3s cubic-bezier(0.16,1,0.3,1); } :root[data-theme="light"] .bias-card__override { background: rgba(255,255,255,0.96); border-color: rgba(255,255,255,0.85); box-shadow: 0 20px 56px rgba(46,41,64,0.22); } @keyframes slideIn { from { opacity: 0; transform: translate(8px, -50%); } to { opacity: 1; transform: translate(0, -50%); } } @media (max-width: 560px) { .bias-card__override { width: 130px; right: 12px; } } .override__title { font-size: 9px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700; color: var(--text-muted); margin-bottom: 8px; text-align: center; } .override__opt { display: block; width: 100%; padding: 6px 8px; margin-bottom: 3px; font-size: 11px; font-weight: 500; text-align: left; border-radius: 7px; background: transparent; color: var(--text); transition: all 0.18s; } .override__opt:hover { background: rgba(255,255,255,0.05); } :root[data-theme="light"] .override__opt:hover { background: rgba(46,41,64,0.06); } .override__opt--strong-bull, .override__opt--bull, .override__opt--neutral-bull { color: var(--bull-c); } .override__opt--neutral { color: var(--neutral-c); } .override__opt--neutral-bear, .override__opt--bear, .override__opt--strong-bear { color: var(--bear-c); } .override__opt.is-selected { background: rgba(255,255,255,0.06); font-weight: 600; } :root[data-theme="light"] .override__opt.is-selected { background: rgba(46,41,64,0.08); } .override__revert { display: block; width: 100%; padding: 6px 8px; margin-top: 4px; font-size: 10px; letter-spacing: 0.4px; color: var(--warm-amber); border-radius: 7px; background: rgba(232,184,122,0.10); border: 1px solid rgba(232,184,122,0.25); transition: all 0.18s; } :root[data-theme="light"] .override__revert { color: #b8741a; background: rgba(232,184,122,0.16); } .override__revert:hover { background: rgba(232,184,122,0.18); } .override__divider { height: 1px; background: rgba(255,255,255,0.06); margin: 8px 0; } :root[data-theme="light"] .override__divider { background: rgba(46,41,64,0.10); } .override__plan { display: block; width: 100%; padding: 7px 8px; font-size: 11px; font-weight: 500; color: var(--bull-c); background: rgba(125,211,174,0.10); border: 1px solid rgba(125,211,174,0.25); border-radius: 8px; transition: all 0.18s; } .override__plan:hover { background: rgba(125,211,174,0.18); } /* Pillars (optional, prefs.showPillars) */ .bias-card__pillars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 12px; position: relative; z-index: 2; } .bias-card__pillar { display: flex; flex-direction: column; align-items: center; padding: 5px 2px; background: rgba(255,255,255,0.02); border-radius: 7px; } .pillar__lbl { font-size: 8px; letter-spacing: 0.8px; color: var(--text-faint); text-transform: uppercase; } .pillar__val { font-size: 10px; font-family: 'SF Mono', monospace; font-weight: 600; color: var(--text); margin-top: 1px; } /* ============================================================ MONDAY BRIEF ============================================================ */ .brief { background: var(--card); border-radius: 22px; border: 1px solid var(--border); box-shadow: var(--shadow-out); overflow: hidden; margin-bottom: 22px; } :root[data-theme="light"] .brief { backdrop-filter: blur(20px); } .brief__header { width: 100%; padding: 14px 22px; display: flex; justify-content: space-between; align-items: center; background: transparent; color: var(--text); font-size: 14px; font-weight: 500; } .brief__chevron { font-size: 11px; color: var(--text-muted); transition: transform 0.22s; } .brief.is-open .brief__chevron { transform: rotate(180deg); } .brief__section { padding: 18px 22px; border-bottom: 1px solid var(--border); } .brief__section:last-child { border-bottom: none; } .brief__sec-title { font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--text-muted); font-weight: 600; padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 14px; } .cot-block { margin-bottom: 14px; } .cot-block:last-child { margin-bottom: 0; } .cot-block__label { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 7px; } .cot-block--long .cot-block__label { color: var(--bull-c); } .cot-block--short .cot-block__label { color: var(--bear-c); } .cot-block--neutral .cot-block__label { color: var(--text-muted); } .cot-row { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.03); border-radius: 9px; margin-bottom: 5px; } :root[data-theme="light"] .cot-row { background: rgba(255,255,255,0.40); border-color: rgba(255,255,255,0.55); } .cot-row:last-child { margin-bottom: 0; } .cot-row__ccy { font-family: 'SF Mono', monospace; font-size: 11.5px; font-weight: 700; letter-spacing: 0.5px; min-width: 38px; } .cot-row__pct { color: var(--text-muted); font-family: 'SF Mono', monospace; font-size: 10.5px; min-width: 48px; } .cot-row__desc { color: var(--text); font-size: 11px; flex: 1; opacity: 0.85; } .day-row { display: flex; align-items: baseline; gap: 12px; padding: 8px 12px 8px 14px; margin-bottom: 5px; border-radius: 9px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.03); border-left: 3px solid transparent; } :root[data-theme="light"] .day-row { background: rgba(255,255,255,0.40); border-color: rgba(255,255,255,0.55); border-left-color: transparent; } .day-row:last-child { margin-bottom: 0; } .day-row--high { border-left-color: var(--bear); } .day-row--med { border-left-color: var(--warm-amber); } .day-row--low { border-left-color: var(--neutral); } .day-row--none { border-left-color: rgba(255,255,255,0.06); } :root[data-theme="light"] .day-row--high { border-left-color: var(--bear-stroke-l); } :root[data-theme="light"] .day-row--med { border-left-color: #b8741a; } :root[data-theme="light"] .day-row--low { border-left-color: rgba(46,41,64,0.30); } :root[data-theme="light"] .day-row--none { border-left-color: rgba(46,41,64,0.08); } .day-row__name { font-weight: 600; min-width: 75px; font-size: 12px; } .day-row__events { font-family: 'SF Mono', monospace; font-size: 10.5px; color: var(--text-muted); letter-spacing: 0.1px; flex: 1; line-height: 1.55; } .ev-major { display: inline-block; padding: 1px 6px; margin: 0 3px; background: rgba(232,184,122,0.14); color: var(--warm-amber); border: 1px solid rgba(232,184,122,0.30); border-radius: 4px; font-size: 9px; font-weight: 700; letter-spacing: 0.6px; font-family: -apple-system, sans-serif; vertical-align: middle; } :root[data-theme="light"] .ev-major { color: #b8741a; } .divergence-row { display: flex; align-items: baseline; gap: 12px; padding: 8px 12px; margin-bottom: 5px; background: rgba(255,255,255,0.025); border-radius: 9px; border: 1px solid rgba(255,255,255,0.03); } :root[data-theme="light"] .divergence-row { background: rgba(255,255,255,0.40); border-color: rgba(255,255,255,0.55); } .divergence-row:last-child { margin-bottom: 0; } .divergence__sym { font-family: 'SF Mono', monospace; font-size: 11.5px; font-weight: 700; min-width: 75px; } .divergence__pct { font-family: 'SF Mono', monospace; font-size: 12px; font-weight: 600; min-width: 60px; } .divergence__pct--bull { color: var(--bull); } .divergence__pct--bear { color: var(--bear); } :root[data-theme="light"] .divergence__pct--bull { color: var(--bull-stroke-l); } :root[data-theme="light"] .divergence__pct--bear { color: var(--bear-stroke-l); } .divergence__note { flex: 1; font-size: 11px; color: var(--text); opacity: 0.85; } .brief__empty { font-size: 11.5px; color: var(--text-muted); font-style: italic; padding: 4px 2px; } /* ============================================================ PULSE BTN (mobile only) ============================================================ */ .pulse-btn { position: fixed; bottom: max(28px, env(safe-area-inset-bottom, 28px)); left: 50%; transform: translateX(-50%); z-index: 998; width: 56px; height: 56px; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: opacity 0.28s, transform 0.32s cubic-bezier(0.16,1,0.3,1); } @media (min-width: 901px) { .pulse-btn { display: none; } } .pulse-btn.is-hidden { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(20px) scale(0.85); } .pulse-btn__ring { position: absolute; inset: 0; border-radius: 50%; opacity: 0; animation: pulseRing 2.6s ease-out infinite; pointer-events: none; background: radial-gradient(circle, var(--pulse-glow) 0%, transparent 70%); } .pulse-btn__ring:nth-child(1) { animation-delay: 0s; } .pulse-btn__ring:nth-child(2) { animation-delay: 0.87s; } .pulse-btn__ring:nth-child(3) { animation-delay: 1.74s; } @keyframes pulseRing { 0% { opacity: 0.75; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } } .pulse-btn__core { position: absolute; inset: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #34343c 0%, #1c1c20 100%); border: 1px solid var(--pulse-color); box-shadow: 0 0 16px var(--pulse-glow), 0 8px 22px rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; } :root[data-theme="light"] .pulse-btn__core { background: radial-gradient(circle at 35% 30%, #fff, #e8e1f5); border-color: var(--pulse-color); box-shadow: 0 0 18px var(--pulse-glow), 0 8px 22px rgba(106,90,145,0.25); } .pulse-btn__letter { font-size: 22px; font-weight: 300; letter-spacing: -0.5px; color: var(--text); text-shadow: 0 0 10px var(--pulse-glow); } :root[data-theme="light"] .pulse-btn__letter { color: var(--pulse-deep); } /* RADIAL menu */ .radial { position: fixed; top: 50%; left: 50%; width: 0; height: 0; z-index: 1001; visibility: hidden; opacity: 0; transition: opacity 0.18s; } .radial.is-open { visibility: visible; opacity: 1; } .radial__item { position: absolute; top: 0; left: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: var(--card); border: 1.5px solid var(--pulse-color); box-shadow: 0 8px 22px rgba(0,0,0,0.55); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: box-shadow 0.18s; } :root[data-theme="dark"] .radial__item { background: linear-gradient(155deg, #1f1f24 0%, #1a1a1d 100%); } :root[data-theme="light"] .radial__item { background: rgba(255,255,255,0.92); backdrop-filter: blur(20px); } .radial__item.is-hover { box-shadow: 0 0 0 6px rgba(125,211,174,0.20), 0 0 30px rgba(125,211,174,0.70), 0 8px 22px rgba(0,0,0,0.55); z-index: 12; } :root[data-theme="light"] .radial__item.is-hover { box-shadow: 0 0 0 6px rgba(154,139,191,0.22), 0 0 30px rgba(154,139,191,0.65), 0 8px 22px rgba(46,41,64,0.25); } .radial__letter { font-size: 17px; font-weight: 500; color: var(--text); pointer-events: none; } .radial__label { font-size: 8px; letter-spacing: 0.9px; text-transform: uppercase; color: var(--text-muted); margin-top: 3px; font-weight: 600; pointer-events: none; } .radial__hint { position: absolute; top: 0; left: 0; margin: -22px 0 0 -55px; width: 110px; text-align: center; font-size: 11px; color: var(--text-muted); pointer-events: none; } .radial-backdrop { position: fixed; inset: 0; background: rgba(10,10,12,0.55); backdrop-filter: blur(10px); z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.2s; } :root[data-theme="light"] .radial-backdrop { background: rgba(46,41,64,0.45); } .radial-backdrop.is-open { opacity: 1; pointer-events: auto; } body.is-radial-active, body.is-radial-active * { -webkit-user-select: none !important; user-select: none !important; -webkit-touch-callout: none !important; } /* ============================================================ PLAN MODAL (Journal) ============================================================ */ .jm-overlay { position: fixed; inset: 0; background: rgba(10,10,12,0.78); backdrop-filter: blur(8px); z-index: 9998; display: flex; align-items: flex-start; justify-content: center; padding: 24px 12px; overflow-y: auto; } :root[data-theme="light"] .jm-overlay { background: rgba(46,41,64,0.40); } .jm-card { background: var(--card-solid); border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 30px 70px rgba(0,0,0,0.7); max-width: 520px; width: 100%; padding: 26px 24px; animation: pop 0.28s cubic-bezier(0.16,1,0.3,1); } :root[data-theme="dark"] .jm-card { background: linear-gradient(155deg, #1f1f24 0%, #1a1a1d 100%); } :root[data-theme="light"] .jm-card { box-shadow: 0 30px 70px rgba(46,41,64,0.30); } @keyframes pop { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } .jm-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; } .jm-title { font-size: 16px; font-weight: 500; color: var(--bull); } :root[data-theme="light"] .jm-title { color: var(--bull-stroke-l); } .jm-close { color: var(--text-muted); font-size: 24px; width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; } .jm-close:hover { background: rgba(232,154,142,0.10); color: var(--bear); } .jm-field { margin-bottom: 16px; } .jm-label { display: block; font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 600; color: var(--text-muted); margin-bottom: 7px; } .jm-input, select.jm-input, textarea.jm-input { width: 100%; padding: 11px 13px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--text); border-radius: 11px; font-size: 13px; font-family: inherit; transition: all 0.18s; outline: none; } :root[data-theme="light"] .jm-input, :root[data-theme="light"] select.jm-input, :root[data-theme="light"] textarea.jm-input { background: rgba(255,255,255,0.65); border-color: rgba(255,255,255,0.7); } .jm-input:focus { border-color: var(--bull); box-shadow: 0 0 0 3px rgba(125,211,174,0.10); } .jm-input--textarea { resize: vertical; min-height: 90px; } .jm-dir-row { display: flex; gap: 8px; } .jm-dir-opt { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 8px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 11px; cursor: pointer; font-size: 12.5px; transition: all 0.18s; } :root[data-theme="light"] .jm-dir-opt { background: rgba(255,255,255,0.55); } .jm-dir-opt input[type=radio] { margin: 0; accent-color: var(--bull); } .jm-dir-opt:hover { background: rgba(125,211,174,0.08); border-color: rgba(125,211,174,0.20); } .jm-dir-opt.is-selected.jm-dir-opt--watch { background: rgba(154,139,191,0.15); border-color: rgba(154,139,191,0.40); color: #b3a3d6; } :root[data-theme="light"] .jm-dir-opt.is-selected.jm-dir-opt--watch { color: var(--pulse-deep); } .jm-dir-opt.is-selected.jm-dir-opt--long { background: rgba(125,211,174,0.15); border-color: rgba(125,211,174,0.40); color: var(--bull-c); } .jm-dir-opt.is-selected.jm-dir-opt--short { background: rgba(232,154,142,0.15); border-color: rgba(232,154,142,0.40); color: var(--bear-c); } .jm-actions { display: flex; gap: 8px; margin-top: 22px; } .jm-btn { flex: 1; padding: 11px 18px; border-radius: 11px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.4px; transition: all 0.18s; } .jm-btn--primary { background: linear-gradient(155deg, rgba(125,211,174,0.30), rgba(125,211,174,0.15)); color: var(--bull-c); border: 1px solid rgba(125,211,174,0.40); } .jm-btn--primary:hover { background: linear-gradient(155deg, rgba(125,211,174,0.40), rgba(125,211,174,0.22)); box-shadow: 0 0 16px rgba(125,211,174,0.25); } .jm-btn--ghost { background: rgba(255,255,255,0.04); color: var(--text); border: 1px solid var(--border); } :root[data-theme="light"] .jm-btn--ghost { background: rgba(255,255,255,0.55); } .jm-btn--ghost:hover { background: rgba(255,255,255,0.08); } /* ============================================================ LOADING / EMPTY STATES ============================================================ */ .loading { display: flex; align-items: center; justify-content: center; padding: 60px 20px; color: var(--text-muted); font-size: 13px; letter-spacing: 0.4px; } .loading::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 10px; border: 2px solid var(--border); border-top-color: var(--bull); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .error-banner { padding: 12px 16px; margin-bottom: 18px; background: rgba(232,154,142,0.10); border: 1px solid rgba(232,154,142,0.30); border-radius: 12px; color: var(--bear-c); font-size: 12px; }