:root { --bg: #f3f4f8; --panel: #ffffff; --ink: #1a1c2e; --muted: #6b7085; --border: #e4e6ef; --purple: #5b2a86; --purple-dark: #3d1b5c; --green-1: #d8f4e4; --green-3: #8fdcb0; --green-5: #26a65b; --red-1: #fbe1e1; --red-3: #f2a3a3; --red-5: #d3323f; --neutral: #eceef4; --radius: 10px; --shadow: 0 1px 2px rgba(20, 20, 40, 0.06), 0 4px 16px rgba(20, 20, 40, 0.04); } /* Dark mode: system preference (unless explicitly overridden below), or the user's own toggle choice persisted via [data-theme] on . */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0e1016; --panel: #171a23; --ink: #e8e9f0; --muted: #8992a6; --border: #262b38; --green-1: #113325; --green-3: #1e5c3d; --green-5: #33c078; --red-1: #3a1620; --red-3: #6e2530; --red-5: #f0525f; --neutral: #1c2029; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25); } } :root[data-theme="dark"] { --bg: #0e1016; --panel: #171a23; --ink: #e8e9f0; --muted: #8992a6; --border: #262b38; --green-1: #113325; --green-3: #1e5c3d; --green-5: #33c078; --red-1: #3a1620; --red-3: #6e2530; --red-5: #f0525f; --neutral: #1c2029; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25); } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--ink); transition: background 0.15s ease, color 0.15s ease; } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; background: linear-gradient(120deg, var(--purple-dark), var(--purple)); color: white; position: sticky; top: 0; z-index: 10; box-shadow: var(--shadow); } .brand { display: flex; align-items: center; gap: 12px; } .brand-mark { width: 36px; height: 36px; border-radius: 8px; background: white; color: var(--purple-dark); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 18px; } .brand h1 { font-size: 17px; margin: 0; font-weight: 700; } .brand .subtitle { font-size: 12px; margin: 2px 0 0; opacity: 0.85; } .status { display: flex; align-items: center; gap: 12px; font-size: 12px; } .status .pill { background: rgba(255,255,255,0.15); padding: 4px 10px; border-radius: 999px; font-weight: 600; } #refresh-btn, #theme-toggle { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: white; padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; } #refresh-btn:hover, #theme-toggle:hover { background: rgba(255,255,255,0.28); } #theme-toggle { padding: 5px 9px; line-height: 1; } .error-banner { background: #fdecea; color: #9a2a2a; border-bottom: 1px solid #f3c6c6; padding: 10px 24px; font-size: 13px; } .error-banner.hidden { display: none; } /* Generic collapse utility - the scoped rules above are redundant with this but kept for specificity safety where they're used elsewhere. */ .hidden { display: none; } main { max-width: 1180px; margin: 0 auto; padding: 20px 20px 60px; display: flex; flex-direction: column; gap: 18px; } .panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px 20px; box-shadow: var(--shadow); } .panel-row { display: grid; /* minmax(0, 1fr), not bare 1fr - same fix as .heatmap-grid below: a wide child (a movers-table forced to min-width: 640px for its own mobile scroll behavior) was pushing each column past its track, so the whole row (F&O Gainers/Losers, Most Active, 52-Week Highs/Lows) drifted wider than every other panel and fell out of alignment with them. */ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .panel.half { margin: 0; min-width: 0; } @media (max-width: 760px) { .panel-row { grid-template-columns: minmax(0, 1fr); } } .panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .panel-head.sub { margin-top: 18px; } .panel-head h2 { font-size: 15px; margin: 0 0 4px; } .panel-head h3 { font-size: 13px; margin: 0 0 4px; color: var(--muted); } .panel-head .hint { font-size: 12px; color: var(--muted); margin: 0; } .muted { color: var(--muted); font-weight: 400; font-size: 12px; } .skeleton, .skeleton-grid { color: var(--muted); font-size: 13px; padding: 24px 0; text-align: center; } /* Heatmap */ .heatmap-grid { display: grid; /* minmax(0, 1fr), not bare 1fr - a bare 1fr track still won't shrink below its content's min-content width (long tile text, in this case), which was overflowing the grid past the viewport on mobile instead of wrapping/shrinking as intended. minmax(0, ...) removes that floor. */ grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 10px; } @media (max-width: 900px) { .heatmap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 520px) { .heatmap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .tile { border-radius: 8px; padding: 10px 12px; color: white; cursor: pointer; min-height: 64px; display: flex; flex-direction: column; justify-content: space-between; transition: transform 0.08s ease; border: 1px solid rgba(0,0,0,0.05); } .tile:hover { transform: translateY(-2px); } .tile .sym { font-size: 12px; font-weight: 700; letter-spacing: 0.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tile .tile-count { font-weight: 500; opacity: 0.8; font-size: 11px; } .tile .val { font-size: 13px; font-weight: 600; } .tile .chg { font-size: 12px; font-weight: 600; } /* Advance/Decline */ .advdecl-body { margin-top: 8px; } .ad-summary { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; } .ad-bar { flex: 1; min-width: 220px; height: 22px; border-radius: 999px; overflow: hidden; display: flex; background: var(--neutral); } .ad-bar .adv { background: var(--green-5); } .ad-bar .dec { background: var(--red-5); } .ad-bar .unc { background: #b9bccc; } .ad-counts { display: flex; gap: 16px; font-size: 13px; } .ad-counts b { font-size: 16px; } .ad-counts .adv-c b { color: var(--green-5); } .ad-counts .dec-c b { color: var(--red-5); } .ad-toggle { font-size: 12px; color: var(--purple); cursor: pointer; background: none; border: none; padding: 0; text-decoration: underline; } /* Tables */ table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; } th, td { text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--border); } th:first-child, td:first-child { text-align: left; } th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; } th.sortable { cursor: pointer; user-select: none; } th.sortable:hover { color: var(--ink); } tr:last-child td { border-bottom: none; } /* Movers tables scroll horizontally within their own box instead of letting a wide table (many columns) force the whole page to scroll sideways on mobile - the table itself refuses to shrink below min-width, so overflow-x kicks in on narrow viewports. */ .movers-table { overflow-x: auto; } .movers-table table { min-width: 640px; } @media (max-width: 700px) { .movers-table table { font-size: 12px; } th, td { padding: 5px 6px; } .mobile-hide { display: none; } } .sym-link { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px dashed var(--muted); } .sym-link:hover { color: var(--purple); border-bottom-color: var(--purple); } .cell-left { text-align: left; color: var(--muted); font-size: 12px; } /* Sector filter bar */ .sector-filter-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); font-size: 13px; flex-wrap: wrap; } .sector-filter-bar label { font-weight: 600; color: var(--ink); } .sector-filter-bar select { font-size: 13px; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel); color: var(--ink); cursor: pointer; } .up { color: var(--green-5); font-weight: 600; } .down { color: var(--red-5); font-weight: 600; } .flat { color: var(--muted); } .empty-note { color: var(--muted); font-size: 13px; padding: 10px 2px; } /* Modal */ .modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; } .modal.hidden { display: none; } .modal-backdrop { position: absolute; inset: 0; background: rgba(20,20,35,0.45); } .modal-card { position: relative; background: var(--panel); width: min(640px, 92vw); max-height: 82vh; overflow: hidden; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); display: flex; flex-direction: column; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); } .modal-header h2 { margin: 0; font-size: 16px; } #modal-close { background: none; border: none; font-size: 16px; cursor: pointer; color: var(--muted); } .modal-body { padding: 4px 18px 18px; overflow-y: auto; } /* Market overview: index strip + bias box */ .index-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; } @media (max-width: 600px) { .index-strip { grid-template-columns: 1fr; } } .index-card { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; background: var(--neutral); } .index-card .idx-name { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; } .index-card .idx-val { font-size: 20px; font-weight: 700; margin-top: 2px; } .index-card .idx-chg { font-size: 13px; font-weight: 600; margin-top: 2px; } .bias-box { border-top: 1px dashed var(--border); padding-top: 14px; } .bias-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .bias-label-tag { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; margin-right: 8px; } .bias-value { font-size: 18px; font-weight: 800; } .bias-value.bullish { color: var(--green-5); } .bias-value.bearish { color: var(--red-5); } .bias-value.neutral { color: var(--muted); } .bias-caveat { font-size: 11px; color: var(--muted); max-width: 360px; margin: 4px 0 0; } .bias-factors { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .bias-factor { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; font-size: 12px; background: var(--neutral); } .bias-factor .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .bias-factor .dot.up { background: var(--green-5); } .bias-factor .dot.down { background: var(--red-5); } .bias-factor .dot.flat { background: #b9bccc; } .bias-factor .f-name { font-weight: 600; } .bias-factor .f-detail { color: var(--muted); } /* ORB scanner */ .orb-tabs { display: flex; gap: 6px; margin-top: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; } .orb-tab { font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--neutral); border: 1px solid var(--border); padding: 6px 16px; border-radius: 999px; cursor: pointer; flex-shrink: 0; } .orb-tab:hover { background: #e3ddf0; } .orb-tab.active { background: var(--purple); color: white; border-color: var(--purple); } .orb-status-note { font-size: 12px; color: var(--muted); margin: 10px 0 0; } .breakout-up { color: var(--green-5); font-weight: 700; } .breakout-down { color: var(--red-5); font-weight: 700; } .breakout-none { color: var(--muted); } /* Scanners mega-panel: one top-level group visible at a time (ORB / Buy-Sell / 15-Min Breakout / Screener) - this is the main mobile-friendliness fix: previously all four full sections rendered stacked and always-visible, which made the page extremely long to scroll on a phone. */ .group-tabs { display: flex; gap: 4px; margin-top: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; border-bottom: 1px solid var(--border); } .group-tab { font-size: 13px; font-weight: 700; color: var(--muted); background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 14px; cursor: pointer; white-space: nowrap; flex-shrink: 0; } .group-tab:hover { color: var(--ink); } .group-tab.active { color: var(--purple); border-bottom-color: var(--purple); } .scanner-group { display: none; margin-top: 14px; } .scanner-group.active { display: block; } /* F&O Screener condition chips */ .checks-cell { max-width: 420px; } .check-chip { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; margin: 2px 3px 2px 0; background: var(--neutral); white-space: nowrap; } .check-chip.up { color: var(--green-5); } .check-chip.down { color: var(--muted); }