/* interactive_screeners — calm dense Deepvue-style palette. CLAUDE.md §11.2. Dark is default. Light theme activates via [data-theme="light"] on , set by main.js from localStorage or prefers-color-scheme. */ :root { --bg: #0a0e14; --bg-elev: #0f1521; --fg: #e6ebf3; --fg-muted: #8b94a3; --accent: #e6b450; --accent-cyan: #39bae6; --row-stripe: #11161e; --row-hover: #1a2030; --border: #1f2937; --pass: #10b981; --fail: #ef4444; --neutral: #4b5563; } [data-theme="light"] { --bg: #ffffff; --bg-elev: #f8fafc; --fg: #1f2937; --fg-muted: #64748b; --accent: #b45309; /* darker amber — readable on white */ --accent-cyan: #0e7490; /* darker cyan */ --row-stripe: #f3f4f6; --row-hover: #e5e7eb; --border: #d1d5db; --pass: #047857; --fail: #b91c1c; --neutral: #9ca3af; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Noto Sans TC", system-ui, sans-serif; font-size: 15px; line-height: 1.45; min-height: 100vh; } .topbar { display: flex; align-items: center; flex-wrap: wrap; /* never overflow horizontally — controls reflow to a new line instead of forcing a page-wide horizontal scrollbar at 100% */ gap: 0.5rem 1rem; padding: 0.6rem 1rem; border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 0; z-index: 10; } .brand { text-decoration: none; color: var(--accent); font-weight: 600; letter-spacing: 0.02em; font-size: 16px; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; } .brand-lockup { display: inline-flex; align-items: center; gap: 0.55rem; } .brand-slogan { font-size: 10px; font-weight: 400; color: var(--fg-muted); letter-spacing: 0.03em; line-height: 1.25; max-width: 16rem; /* wrap under the logo (≈ lockup width) rather than stretching the topbar row wide */ } .brand-logo { height: 36px; width: auto; display: block; } /* The logo SVG ships in "yellow-on-transparent" form for the dark theme. Under the light theme we re-tint via filter so the logomark stays readable on a white background. */ [data-theme="light"] .brand-logo { filter: brightness(0.6) saturate(1.3); } .brand-sub { color: var(--fg-muted); font-weight: 400; } .intro-banner { padding: 0.55rem 1rem; border-bottom: 1px solid var(--border); background: var(--bg); } .intro-subhead { margin: 0; color: var(--fg-muted); font-size: 12.5px; line-height: 1.55; max-width: 70rem; } .market-badge, .market-selector { padding: 0.2rem 0.6rem; border: 1px solid var(--border); border-radius: 3px; color: var(--accent-cyan); background: var(--bg); font-family: "JetBrains Mono", "SFMono-Regular", monospace; font-size: 13px; cursor: pointer; } .market-selector option { background: var(--bg-elev); color: var(--accent-cyan); } .market-selector:focus { outline: 1px solid var(--accent); } .market-selector option[data-access="preview"]::after { content: " · preview"; } .meta-asof { color: var(--fg-muted); font-family: "JetBrains Mono", "SFMono-Regular", monospace; font-size: 13px; } .plan-badge { padding: 0.2rem 0.55rem; border-radius: 3px; font-family: "JetBrains Mono", monospace; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; background: var(--neutral); color: #f3f4f6; } .plan-badge.plan-demo { background: var(--neutral); } .plan-badge.plan-lite { background: #1d4ed8; color: #f3f4f6; } .plan-badge.plan-pro { background: var(--accent); color: #042619; } .signin-link { color: var(--accent-cyan); text-decoration: none; background: transparent; border: 1px solid var(--border); padding: 0.25rem 0.7rem; border-radius: 3px; font-size: 12.5px; cursor: pointer; font-family: inherit; } .signin-link:hover { color: var(--accent); border-color: var(--accent); } .theme-toggle { margin-left: auto; background: transparent; color: var(--fg-muted); border: 1px solid var(--border); padding: 0.2rem 0.55rem; border-radius: 3px; cursor: pointer; font-size: 14px; line-height: 1.2; font-family: inherit; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); } .lang-toggle { display: flex; gap: 0.25rem; } .lang-toggle button { background: transparent; color: var(--fg-muted); border: 1px solid var(--border); padding: 0.25rem 0.7rem; border-radius: 3px; cursor: pointer; font-size: 13px; } .lang-toggle button:hover { color: var(--fg); } .lang-toggle button.active { color: var(--accent); border-color: var(--accent); } .controls { display: flex; flex-wrap: wrap; gap: 1rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); align-items: flex-end; background: var(--bg-elev); } .control { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } .control label { color: var(--fg-muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; } .control select, .control input[type="number"], .control input[type="text"] { background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 3px; padding: 0.4rem 0.6rem; font-size: 14px; font-family: inherit; min-width: 10rem; } .control input[type="text"]:focus { outline: 1px solid var(--accent); outline-offset: 0; } .control input[type="number"] { width: 7rem; min-width: 0; } #ticker-search { font-family: "JetBrains Mono", monospace; letter-spacing: 0.05em; text-transform: uppercase; } /* Preset dropdown — capped width so the long combo/Raschke labels (e.g. * "VVT — ボラティリティ・出来高スラスト セットアップ (AlpharvestPro)") * don't blow out the controls row width and push the second toggle column * onto a new line. The capped width applies to the CLOSED