/* ================================================================ DataAnalyzer — design system A compact, utility-oriented CSS — no framework, no build step. Two themes are provided and toggled via ``. Light is the default; dark is opt-in via the header button, persisted in localStorage by theme_controller.js. ================================================================ */ :root { /* Shape / typography tokens are theme-agnostic. */ --radius: 10px; --radius-sm: 6px; --fz-xs: .75rem; --fz-sm: .875rem; --fz-md: 1rem; --fz-lg: 1.125rem; --fz-xl: 1.35rem; --fz-2xl: 1.75rem; } /* ---------------- LIGHT THEME (default) ------------------ */ :root, :root[data-theme="light"] { --bg-0: #f6f7fb; --bg-1: #ffffff; --bg-2: #ffffff; --bg-3: #eef0f6; --border: #e2e5ef; --border-strong: #cdd2e2; --text: #0f172a; --text-dim: #4b5568; --text-muted: #7a8497; --accent: #0e9488; /* cyan-700, readable on light */ --accent-2: #7c3aed; /* violet-600 */ --bullish: #059669; --bearish: #dc2626; --warning: #d97706; --info: #2563eb; --shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 18px rgba(15, 23, 42, .06); --shadow-hover: 0 2px 6px rgba(14, 148, 136, .10), 0 10px 30px rgba(15, 23, 42, .10); --bg-gradient: radial-gradient(1200px 600px at 80% -10%, rgba(14, 148, 136, .05), transparent 50%), radial-gradient(1000px 500px at -20% 110%, rgba(124, 58, 237, .05), transparent 50%), var(--bg-0); } /* ---------------- DARK THEME ----------------- */ :root[data-theme="dark"] { --bg-0: #0b1020; --bg-1: #11172b; --bg-2: #171e38; --bg-3: #1f2748; --border: #2a335a; --border-strong: #3a4576; --text: #e6ecff; --text-dim: #9aa4c7; --text-muted: #6b7499; --accent: #5eead4; --accent-2: #a78bfa; --bullish: #10b981; --bearish: #ef4444; --warning: #f59e0b; --info: #60a5fa; --shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .25); --shadow-hover: 0 2px 6px rgba(94, 234, 212, .08), 0 10px 30px rgba(0, 0, 0, .35); --bg-gradient: radial-gradient(1200px 600px at 80% -10%, rgba(94, 234, 212, .06), transparent 50%), radial-gradient(1000px 500px at -20% 110%, rgba(167, 139, 250, .05), transparent 50%), var(--bg-0); } /* -------------------------------------------------- reset */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-gradient); color: var(--text); line-height: 1.5; min-height: 100vh; -webkit-font-smoothing: antialiased; transition: background-color .2s, color .2s; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-2); } h1, h2, h3, h4 { margin: 0 0 .5em 0; font-weight: 600; letter-spacing: -.01em; } h1 { font-size: var(--fz-2xl); } h2 { font-size: var(--fz-xl); } h3 { font-size: var(--fz-lg); } hr { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; } code, pre { font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace; font-size: .875em; } /* -------------------------------------------------- layout */ .app { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; } .sidebar { background: var(--bg-1); border-right: 1px solid var(--border); padding: 1.25rem 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .sidebar__brand { position: relative; display: flex; align-items: center; gap: .6rem; padding: 0 1.25rem 1.25rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; } .sidebar__brand .logo { width: 32px; height: 32px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-radius: 8px; display: grid; place-items: center; font-weight: 700; color: #ffffff; } .sidebar__brand h1 { font-size: 1rem; margin: 0; } .sidebar__brand small { color: var(--text-muted); font-size: .7rem; } .theme-toggle { position: absolute; top: -4px; right: .9rem; width: 32px; height: 32px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--border); color: var(--text); cursor: pointer; display: grid; place-items: center; font-size: .95rem; transition: background .15s, border-color .15s, transform .1s; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } .theme-toggle:active { transform: scale(.94); } .sidebar nav { padding: 0 .75rem; } .sidebar nav a { display: flex; align-items: center; gap: .65rem; padding: .6rem .75rem; border-radius: var(--radius-sm); color: var(--text-dim); font-size: var(--fz-sm); font-weight: 500; margin-bottom: 2px; transition: background .12s, color .12s; } .sidebar nav a:hover { background: var(--bg-2); color: var(--text); } .sidebar nav a.active { background: linear-gradient(135deg, rgba(94,234,212,.15), rgba(167,139,250,.12)); color: var(--text); box-shadow: inset 0 0 0 1px rgba(94,234,212,.25); } .sidebar nav a .ico { width: 18px; text-align: center; color: var(--accent); } .sidebar__footer { padding: 1rem 1.25rem; position: absolute; bottom: 0; left: 0; right: 0; font-size: var(--fz-xs); color: var(--text-muted); border-top: 1px solid var(--border); background: var(--bg-1); } .main { padding: clamp(1rem, 2vw + .5rem, 2rem) clamp(1rem, 2.5vw, 2rem) 3rem; min-width: 0; max-width: 100%; } .page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .page-header h1 { margin: 0 0 .25rem; } .page-header .subtitle { color: var(--text-dim); font-size: var(--fz-sm); } /* -------------------------------------------------- cards */ .card { background: linear-gradient(180deg, var(--bg-1), var(--bg-2)); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; min-width: 0; } .card__header { gap: .5rem; flex-wrap: wrap; } .card__body, .card__header, .card__footer { min-width: 0; } /* (removed: ".card + .card { margin-top: 1rem }" — it broke horizontal alignment when two cards sit next to each other inside a grid. Stacked cards use the explicit ".mb-3" utility instead.) */ .card__header { display: flex; align-items: center; justify-content: space-between; padding: .95rem 1.1rem; border-bottom: 1px solid var(--border); background: rgba(255, 255, 255, .02); } .card__header h3 { margin: 0; font-size: var(--fz-md); } .card__header .badge { margin-left: .5rem; } .card__body { padding: 1.1rem; } .card__footer { padding: .8rem 1.1rem; border-top: 1px solid var(--border); color: var(--text-dim); font-size: var(--fz-sm); } /* -------------------------------------------------- grid helpers */ .grid { display: grid; gap: 1rem; align-items: stretch; } .grid > * { min-width: 0; } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); } /* Cards inside a grid cell should fill the full cell height so pairs of cards on the same row (Bullish / Bearish targets, etc.) line up. The same applies when the card is wrapped in an intermediate container (e.g. ``
`` produced by the progressive loader). */ .grid > .card, .grid > [data-pivot-analysis-target="section"] > .card { height: 100%; display: flex; flex-direction: column; } .grid > .card > .card__body, .grid > [data-pivot-analysis-target="section"] > .card > .card__body { flex: 1; } .grid > [data-pivot-analysis-target="section"] { display: flex; flex-direction: column; } /* -------------------------------------------------- stats */ .stat { padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-2); display: flex; flex-direction: column; gap: .2rem; } .stat .label { color: var(--text-muted); font-size: var(--fz-xs); text-transform: uppercase; letter-spacing: .05em; } .stat .value { font-size: var(--fz-xl); font-weight: 700; letter-spacing: -.01em; } .stat .value.positive { color: var(--bullish); } .stat .value.negative { color: var(--bearish); } .stat .hint { color: var(--text-dim); font-size: var(--fz-xs); } /* -------------------------------------------------- badges */ .badge { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .55rem; border-radius: 999px; font-size: var(--fz-xs); font-weight: 600; background: var(--bg-3); color: var(--text-dim); border: 1px solid var(--border); } .badge--bull { background: rgba(16, 185, 129, .15); color: var(--bullish); border-color: rgba(16, 185, 129, .35); } .badge--bear { background: rgba(239, 68, 68, .15); color: var(--bearish); border-color: rgba(239, 68, 68, .35); } .badge--info { background: rgba(96, 165, 250, .15); color: var(--info); border-color: rgba(96, 165, 250, .35); } .badge--accent { background: rgba(94, 234, 212, .12); color: var(--accent); border-color: rgba(94, 234, 212, .35); } /* -------------------------------------------------- table */ .table-wrap { overflow-x: auto; border-radius: var(--radius); -webkit-overflow-scrolling: touch; max-width: 100%; } .table-wrap table { min-width: 480px; } table { width: 100%; border-collapse: collapse; font-size: var(--fz-sm); } th, td { padding: .6rem .85rem; text-align: left; border-bottom: 1px solid var(--border); } th { color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: var(--fz-xs); letter-spacing: .05em; background: rgba(255, 255, 255, .02); } tbody tr:hover { background: rgba(94, 234, 212, .04); } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } /* Confidence-target cell whose price has been physically touched within the current window's [low, high] range (V1 logic). Highlight is blue to match V1 (#dbeafe / #1e40af). */ td.cell-target-reached { background: rgba(59, 130, 246, .14); color: #2563eb; font-weight: 600; } :root[data-theme="dark"] td.cell-target-reached { background: rgba(96, 165, 250, .18); color: #93c5fd; } .target-pct { display: inline-block; margin-left: .25rem; font-size: var(--fz-xs); color: var(--text-muted); font-weight: 400; } td.cell-target-reached .target-pct { color: inherit; opacity: .85; } .target-tick { display: inline-block; margin-left: .25rem; color: inherit; font-weight: 700; } /* Highlight the cell of the bin with the highest concentration in the time-distribution table. */ td.is-max-cell { background: rgba(94, 234, 212, .12); color: var(--accent); font-weight: 600; } /* ============== Distance section — gradient cards (V1 look) ============== */ .section-title { margin: 0 0 .5rem; font-size: var(--fz-md); font-weight: 700; letter-spacing: -.01em; } .subsection-title { margin: 1rem 0 .5rem; font-size: var(--fz-sm); font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .03em; } .trend-banner { padding: .65rem .95rem; border-radius: 8px; border-left: 6px solid currentColor; font-size: var(--fz-md); } .trend-banner--bull { background: rgba(16, 185, 129, .12); color: var(--bullish); } .trend-banner--bear { background: rgba(239, 68, 68, .12); color: var(--bearish); } .trend-banner--neutral { background: rgba(107, 116, 153, .12); color: var(--text-dim); } .trend-banner strong { color: inherit; } .grad-card { color: #ffffff; padding: 1.1rem 1.2rem; border-radius: 12px; text-align: center; display: flex; flex-direction: column; gap: .25rem; box-shadow: var(--shadow-card); } .grad-card__label { font-size: var(--fz-xs); opacity: .9; font-weight: 500; } .grad-card__value { font-size: 2rem; font-weight: 800; letter-spacing: -.01em; } .grad-card__hint { font-size: var(--fz-xs); opacity: .85; line-height: 1.3; } .grad-card--big { text-align: left; padding: 1.4rem 1.5rem; gap: .35rem; } .grad-card__title { font-size: var(--fz-md); font-weight: 700; } .grad-card__sub { font-size: var(--fz-xs); opacity: .9; margin-bottom: .25rem; } .grad-card__pill { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: var(--fz-xs); font-weight: 700; width: fit-content; } .grad-card__big-value { font-size: 2.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; } .grad-card__counts { font-size: var(--fz-xs); opacity: .9; } .grad-card__inset { margin-top: .5rem; padding: .55rem .7rem; background: rgba(255, 255, 255, .14); border-radius: 8px; font-size: var(--fz-xs); line-height: 1.45; } .grad-card--summary { padding: 1rem 1.1rem; text-align: left; font-size: var(--fz-md); font-weight: 600; } .grad-card--summary strong { color: inherit; } /* Gradient palettes (V1 colours) */ .grad-blue { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .grad-violet { background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%); } .grad-green { background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%); } .grad-orange { background: linear-gradient(135deg, #fb923c 0%, #f97316 100%); } .grad-red { background: linear-gradient(135deg, #f87171 0%, #ef4444 100%); } .caption { margin: .35rem 0; font-size: var(--fz-sm); color: var(--text-dim); line-height: 1.5; } /* ============== banner-strip / risk-card / reliability ============== */ .banner-strip { padding: .5rem 1.1rem; background: rgba(94, 234, 212, .08); border-bottom: 1px solid var(--border); color: var(--text-dim); font-size: var(--fz-sm); } :root[data-theme="light"] .banner-strip { background: rgba(14, 148, 136, .07); } .trend-line { margin: .5rem 0 1rem; padding: .65rem .9rem; background: var(--bg-3); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); font-size: var(--fz-md); } .risk-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; height: 100%; } .risk-card__title { font-weight: 700; font-size: var(--fz-md); } .risk-card__sub { color: var(--text-dim); font-size: var(--fz-xs); margin-bottom: .35rem; } .risk-card__badge { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: 999px; font-size: var(--fz-xs); font-weight: 700; width: fit-content; } .risk-badge--low { background: rgba(16, 185, 129, .15); color: var(--bullish); border: 1px solid rgba(16, 185, 129, .35); } .risk-badge--moderate { background: rgba(245, 158, 11, .15); color: var(--warning); border: 1px solid rgba(245, 158, 11, .35); } .risk-badge--high { background: rgba(239, 68, 68, .15); color: var(--bearish); border: 1px solid rgba(239, 68, 68, .35); } .risk-badge--neutral { background: var(--bg-3); color: var(--text-dim); border: 1px solid var(--border); } .risk-card__value { font-size: var(--fz-2xl); font-weight: 800; letter-spacing: -.02em; margin: .25rem 0; } .risk-card__counts { font-size: var(--fz-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; } .risk-card__hint { font-size: var(--fz-sm); color: var(--text-dim); margin-top: .35rem; } .risk-card__explainer { font-size: var(--fz-xs); color: var(--text-dim); margin-top: .45rem; padding: .55rem .7rem; background: var(--bg-3); border-radius: var(--radius-sm); line-height: 1.45; } .reliability-row { margin-top: .9rem; text-align: center; padding: .55rem .8rem; border-radius: var(--radius-sm); } .reliability--ok { color: var(--bullish); } .reliability--low { color: var(--warning); } /* Compact summary banner used in the Distance block (replaces the big gradient card from the previous layout). Coloured left border tells apart the four verdict types at a glance. */ .summary-banner { padding: .65rem .9rem; border-radius: var(--radius-sm); border-left: 3px solid currentColor; background: var(--bg-3); font-size: var(--fz-md); line-height: 1.5; color: var(--text); } .summary-banner--green { color: var(--bullish); background: rgba(16, 185, 129, .10); } .summary-banner--red { color: var(--bearish); background: rgba(239, 68, 68, .10); } .summary-banner--orange { color: var(--warning); background: rgba(245, 158, 11, .12); } .summary-banner--violet { color: var(--accent-2); background: rgba(167, 139, 250, .12); } .summary-banner strong { color: inherit; } /* -------------------------------------------------- forms */ .field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; } .field label { font-size: var(--fz-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; } .field input, .field select, .field textarea { background: var(--bg-0); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: .55rem .75rem; font-size: var(--fz-sm); font-family: inherit; outline: none; transition: border-color .15s, box-shadow .15s; width: 100%; min-width: 0; box-sizing: border-box; } .field input:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(94, 234, 212, .15); } .form-row { display: grid; gap: 1rem; align-items: end; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); } .form-row > * { min-width: 0; } /* -------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-2); color: var(--text); font-size: var(--fz-sm); font-weight: 600; cursor: pointer; transition: all .15s; } .btn:hover { border-color: var(--accent); color: var(--accent); } .btn--primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #ffffff; border-color: transparent; font-weight: 700; } .btn--primary:hover { color: #ffffff; filter: brightness(1.08); box-shadow: var(--shadow-hover); } .btn--danger { border-color: rgba(239, 68, 68, .4); color: var(--bearish); } .btn--danger:hover { background: rgba(239, 68, 68, .12); border-color: var(--bearish); } .btn--ghost { background: transparent; } .btn--sm { padding: .3rem .7rem; font-size: var(--fz-xs); } /* -------------------------------------------------- flash */ .flash { padding: .75rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: var(--fz-sm); } .flash--success { background: rgba(16, 185, 129, .1); border: 1px solid rgba(16, 185, 129, .3); color: #6ee7b7; } .flash--danger { background: rgba(239, 68, 68, .1); border: 1px solid rgba(239, 68, 68, .3); color: #fca5a5; } .flash--info { background: rgba(96, 165, 250, .1); border: 1px solid rgba(96, 165, 250, .3); color: #93c5fd; } /* -------------------------------------------------- plot container */ .plot { width: 100%; min-height: 380px; } .plot--tall { min-height: 500px; } /* TradingView Lightweight Charts container. */ .tv-chart { width: 100%; height: 520px; position: relative; } /* -------------------------------------------------- misc */ .text-dim { color: var(--text-dim); } .text-muted { color: var(--text-muted); } .text-right { text-align: right; } .text-center { text-align: center; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .flex { display: flex; gap: .5rem; align-items: center; } .flex--between { display: flex; justify-content: space-between; align-items: center; } .hidden { display: none; } /* -------------------------------------------------- filters grid */ /* 4-column grid used by Extreme Pivots / SMC filter forms. Every cell inherits the same row height so dates / selects / button groups align cleanly across two rows. */ .filters { display: flex; flex-direction: column; gap: 1rem; } .filters__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; align-items: end; } .filters__row > .field { min-width: 0; } /* fix overflow in grid children */ .filters__actions { display: flex; gap: .5rem; align-items: end; justify-content: flex-end; padding-top: 1.4rem; /* line up with other fields' labels */ } .filters__presets { display: flex; gap: .35rem; padding-top: .15rem; } /* Dim the form elements so the flatpickr popup doesn't steal focus visually. */ .flatpickr-input { font-family: inherit; } /* Flatpickr — drive colours from our theme variables so the calendar tracks light/dark without reloading stylesheets. */ .flatpickr-calendar { background: var(--bg-1); border: 1px solid var(--border); box-shadow: var(--shadow-card); color: var(--text); } .flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowBottom:before { border-bottom-color: var(--border); border-top-color: var(--border); } .flatpickr-calendar.arrowTop:after, .flatpickr-calendar.arrowBottom:after { border-bottom-color: var(--bg-1); border-top-color: var(--bg-1); } .flatpickr-day { color: var(--text); border-radius: 6px; } .flatpickr-day.today { border-color: var(--accent); color: var(--accent); } .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected:hover { background: var(--accent); border-color: var(--accent); color: #ffffff; } .flatpickr-day:hover { background: var(--bg-3); } .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--text-muted); } .flatpickr-day.flatpickr-disabled { color: var(--text-muted); opacity: .4; } .flatpickr-months .flatpickr-month { background: transparent; color: var(--text); } .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { fill: var(--text); color: var(--text); } .flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--accent); } .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year { background: transparent; color: var(--text); border-color: transparent; } .flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: var(--bg-3); } .flatpickr-weekdays, span.flatpickr-weekday { color: var(--text-muted); background: transparent; } .numInputWrapper span.arrowUp:after { border-bottom-color: var(--text); } .numInputWrapper span.arrowDown:after { border-top-color: var(--text); } /* -------------------------------------------------- loading overlay */ .loading-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(11, 16, 32, .72); backdrop-filter: blur(6px); display: grid; place-items: center; animation: fade-in .15s ease-out; } .loading-overlay__box { background: linear-gradient(180deg, var(--bg-1), var(--bg-2)); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem 2rem; box-shadow: var(--shadow-hover); text-align: center; min-width: 280px; } .loading-overlay__title { font-weight: 600; margin-top: .75rem; } .loading-overlay__hint { color: var(--text-muted); font-size: var(--fz-xs); margin-top: .35rem; } .spinner { width: 36px; height: 36px; margin: 0 auto; border-radius: 50%; border: 3px solid var(--border-strong); border-top-color: var(--accent); animation: spin 0.9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes fade-in { from { opacity: 0 } to { opacity: 1 } } /* Inline progress bar used by job-based downloads */ .progress { width: 100%; height: 8px; background: var(--bg-0); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); } .progress__bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .25s ease; } .progress__bar--indeterminate { width: 35% !important; animation: indeterminate 1.4s ease-in-out infinite; background: linear-gradient(90deg, transparent, var(--accent) 40%, var(--accent-2) 60%, transparent); } @keyframes indeterminate { 0% { margin-left: -35%; } 100% { margin-left: 100%; } } /* -------------------------------------------------- responsive */ @media (max-width: 1024px) { .app { grid-template-columns: minmax(0, 1fr); } .sidebar { position: relative; height: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: .75rem 0; } .sidebar__brand { padding: 0 1rem .75rem; margin-bottom: .5rem; } .sidebar nav { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0 1rem; } .sidebar nav a { padding: .4rem .7rem; } .sidebar__footer { position: relative; padding: .75rem 1rem 0; } } @media (max-width: 600px) { .main { padding: 1rem .85rem 2rem; } .card__body { padding: .85rem; } .card__header { padding: .75rem .85rem; } } /* ======================================================================== * Position Sizer — autocomplete, segmented direction, results layout * ======================================================================== */ .autocomplete { position: relative; } .autocomplete > input { width: 100%; } .autocomplete__menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--bg-1); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-card); max-height: 320px; overflow-y: auto; padding: 4px; } .autocomplete__item { display: grid; grid-template-columns: minmax(72px, auto) minmax(0, 1fr) auto; gap: .75rem; align-items: baseline; width: 100%; padding: .55rem .7rem; border-radius: 8px; background: transparent; border: 0; text-align: left; cursor: pointer; font-family: inherit; color: var(--text); } .autocomplete__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .autocomplete__item:hover, .autocomplete__item--active { background: var(--bg-3); } .autocomplete__sym { font-weight: 600; color: var(--accent); font-family: 'JetBrains Mono', monospace; } .autocomplete__name { color: var(--text); } .autocomplete__meta { color: var(--text-muted); font-size: var(--fz-xs); } .autocomplete__empty { padding: .65rem .8rem; color: var(--text-muted); font-size: var(--fz-sm); } /* Segmented direction toggle */ .seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--bg-3); border: 1px solid var(--border); border-radius: 10px; width: fit-content; } .seg__btn { padding: .45rem 1rem; border: 0; background: transparent; cursor: pointer; border-radius: 7px; color: var(--text-dim); font-weight: 500; font-family: inherit; transition: background .15s, color .15s; } .seg__btn:hover { color: var(--text); } .seg__btn--active { background: var(--bg-1); color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,.06); } /* Profile-edit collapsible */ .profile-edit { margin-top: 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-1); overflow: hidden; } .profile-edit > summary { cursor: pointer; user-select: none; list-style: none; padding: .85rem 1rem; display: flex; align-items: baseline; gap: .75rem; background: var(--bg-3); border-bottom: 1px solid transparent; transition: background .15s; } .profile-edit > summary::-webkit-details-marker { display: none; } .profile-edit > summary::before { content: "▸"; color: var(--text-muted); font-size: var(--fz-sm); transition: transform .2s ease; display: inline-block; } .profile-edit[open] > summary { border-bottom-color: var(--border); } .profile-edit[open] > summary::before { transform: rotate(90deg); } .profile-edit > summary:hover { background: var(--bg-2); } .profile-edit__title { font-weight: 600; color: var(--text); font-size: var(--fz-md); } .profile-edit__sub { color: var(--text-muted); font-size: var(--fz-xs); } .param-section { padding: 1rem 1.1rem; border-bottom: 1px solid var(--border); } .param-section:last-of-type { border-bottom: 0; } .param-section--type { background: linear-gradient(180deg, rgba(94, 234, 212, .05), transparent); } .param-section__label { display: block; font-size: var(--fz-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem; font-weight: 600; } .param-section__title { margin: 0 0 .8rem; font-size: var(--fz-sm); color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; display: flex; align-items: center; gap: .65rem; } .param-section__title::after { content: ""; flex: 1; height: 1px; background: var(--border); } .type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: .75rem 1rem; align-items: center; } .type-grid > * { min-width: 0; } .type-grid > select { width: 100%; padding: .55rem .8rem; background: var(--bg-1); color: var(--text); border: 1px solid var(--border-strong); border-radius: 8px; font-family: inherit; font-size: var(--fz-md); font-weight: 500; cursor: pointer; } .type-grid > select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(94, 234, 212, .15); } .type-hint { color: var(--text-muted); line-height: 1.45; } .param-grid { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); } .param-grid > * { min-width: 0; } .param-grid__wide { grid-column: span 2; } .param-grid .field { gap: .25rem; } .param-grid .field label small { text-transform: none; letter-spacing: 0; margin-left: .3rem; font-weight: 400; } .profile-edit__actions { display: flex; gap: .5rem; flex-wrap: wrap; padding: 1rem 1.1rem; background: var(--bg-3); border-top: 1px solid var(--border); } /* param-grid / type-grid both use auto-fit minmax — no breakpoints needed. */ @media (max-width: 700px) { .param-grid__wide { grid-column: 1 / -1; } } /* Results — headline trio + 2-col grid */ .sizing-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: .75rem; margin-bottom: 1rem; } .sizing-summary > * { min-width: 0; } .sizing-headline { background: var(--bg-3); border: 1px solid var(--border); border-radius: 10px; padding: .85rem; text-align: center; min-width: 0; } .sizing-headline__label { font-size: var(--fz-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .35rem; } .sizing-headline__value { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: clamp(1.1rem, 1.4vw + .8rem, 1.5rem); color: var(--text); line-height: 1.15; word-break: break-word; } .sizing-headline__value--loss { color: var(--bearish); } .sizing-headline__value--gain { color: var(--bullish); } .sizing-headline__sub { font-size: var(--fz-xs); color: var(--text-muted); margin-top: .35rem; min-height: 1em; word-break: break-word; } .sizing-grid { display: grid; gap: .55rem; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); } .sizing-grid > * { min-width: 0; } .sizing-cell { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .55rem .8rem; background: var(--bg-0); border: 1px solid var(--border); border-radius: 8px; min-width: 0; } .sizing-cell__label { color: var(--text-dim); font-size: var(--fz-sm); flex-shrink: 0; } .sizing-cell__value { font-family: 'JetBrains Mono', monospace; font-weight: 500; color: var(--text); text-align: right; min-width: 0; word-break: break-word; } .sizing-warnings { margin-top: .9rem; display: flex; flex-direction: column; gap: .35rem; } .sizing-warning { background: rgba(234, 179, 8, .12); border: 1px solid rgba(234, 179, 8, .35); color: #b45309; padding: .55rem .75rem; border-radius: 8px; font-size: var(--fz-sm); } :root[data-theme="dark"] .sizing-warning { color: #fde68a; } /* sizing-summary and sizing-grid use auto-fit minmax — no breakpoint needed. */ .autocomplete__type { display: inline-block; margin-left: .5rem; padding: 1px 6px; font-size: 10px; font-style: normal; text-transform: uppercase; letter-spacing: .04em; border-radius: 4px; background: rgba(94, 234, 212, .12); color: var(--accent); border: 1px solid rgba(94, 234, 212, .3); }