/* Clean fintech look. Light is the default; dark is opted into with from Customize Feed (saved on the device). One accent: "ink" (near-black in light, near-white in dark) for everything you can tap. Green/red only ever mean long/short or good/bad; orange ("warn") means "take care" (counter-trend, stale, demo). */ :root{ --f-ui:'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif; --bg:#F2F2EE; --bg-card:#FFFFFF; --bg-elevated:#F4F4F0; --glass:rgba(255,255,255,0.92); --border:rgba(14,15,18,0.07); --border-strong:rgba(14,15,18,0.14); --text:#0E0F12; --text-dim:#5D616A; --text-faint:#868B94; --accent:#0E0F12; --accent-ink:#FFFFFF; --accent-dim:rgba(14,15,18,0.06); --warn:#B8650A; --warn-dim:rgba(184,101,10,0.10); --long:#00996A; --long-dim:rgba(0,153,106,0.10); --short:#E0434A; --short-dim:rgba(224,67,74,0.10); --radius:26px; --r-md:16px; --r-sm:12px; --shadow-card:0 1px 2px rgba(16,17,20,0.04), 0 14px 36px -14px rgba(16,17,20,0.16); --shadow-float:0 1px 3px rgba(16,17,20,0.06), 0 10px 24px -10px rgba(16,17,20,0.22); --scrim:rgba(14,15,18,0.35); color-scheme:light; } :root[data-theme="dark"]{ --bg:#0C0D0F; --bg-card:#16171A; --bg-elevated:#1F2024; --glass:rgba(28,29,33,0.92); --border:rgba(255,255,255,0.07); --border-strong:rgba(255,255,255,0.13); --text:#F4F4F2; --text-dim:#9A9EA6; --text-faint:#6E737B; --accent:#F4F4F2; --accent-ink:#0E0F12; --accent-dim:rgba(255,255,255,0.08); --warn:#E8A33D; --warn-dim:rgba(232,163,61,0.12); --long:#1FBF84; --long-dim:rgba(31,191,132,0.13); --short:#F0595E; --short-dim:rgba(240,89,94,0.13); --shadow-card:0 1px 2px rgba(0,0,0,0.3), 0 18px 40px -18px rgba(0,0,0,0.7); --shadow-float:0 1px 3px rgba(0,0,0,0.4), 0 10px 24px -10px rgba(0,0,0,0.7); --scrim:rgba(0,0,0,0.55); color-scheme:dark; } *{box-sizing:border-box;} html,body{ margin:0; padding:0; height:100%; background:var(--bg); color:var(--text); font-family:var(--f-ui); -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums; overscroll-behavior:none; transition:background-color .2s ease, color .2s ease; } #app{ max-width:480px; margin:0 auto; height:100dvh; display:flex; flex-direction:column; position:relative; } /* The feed column is the whole app on phones. It carries the padding so the floating top bar and buttons position exactly as before. */ .feed-col{ flex:1; min-height:0; display:flex; flex-direction:column; padding:0 8px env(safe-area-inset-bottom,0); position:relative; } .analysis-panel{ display:none; } /* Top bar — floats over the card itself, no dedicated header row, so the chart fills the very top of the screen (Tinder has no solid header block either, just small icons over the content) */ .top-bar{ position:absolute; left:0; right:0; top:calc(10px + env(safe-area-inset-top,0)); display:flex; align-items:center; justify-content:space-between; padding:0 16px; z-index:15; pointer-events:none; } .top-icon-btn{ width:36px; height:36px; border-radius:50%; border:none; background:var(--glass); backdrop-filter:blur(10px); color:var(--text); display:flex; align-items:center; justify-content:center; gap:3px; font-size:11px; font-weight:600; cursor:pointer; pointer-events:auto; box-shadow:var(--shadow-float); } .top-icon-btn svg{ width:16px; height:16px; } .top-icon-btn .ico{ width:14px; height:14px; } #savedBtn{ width:auto; min-width:36px; padding:0 11px; border-radius:100px; gap:5px; font-size:12px; font-weight:700; } /* Preference chips (instruments / trading styles filter) */ .chip-group{ display:flex; flex-wrap:wrap; gap:8px; } /* Unselected chips are quiet outlines; selected ones are white with an ink ring, so a screen full of selected markets stays light. */ .chip{ padding:9px 15px; border-radius:100px; border:none; background:transparent; box-shadow:inset 0 0 0 1px var(--border-strong); color:var(--text-faint); font-size:13px; font-weight:600; font-family:var(--f-ui); cursor:pointer; transition:all .15s ease; } .chip.active{ color:var(--text); background:var(--bg-card); box-shadow:inset 0 0 0 1.5px var(--accent); } .filter-link{ background:none; border:none; color:var(--accent); font-size:13px; font-weight:700; cursor:pointer; padding:0; } .filter-link:disabled{ color:var(--text-faint); opacity:.6; cursor:default; } .section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; } .section-actions{ display:flex; gap:16px; } .section-actions .filter-link{ padding:6px 0; } .filter-note{ font-size:11.5px; color:var(--text-faint); margin-top:8px; line-height:1.4; } .advanced-block{ border-top:1px solid var(--border); margin-top:8px; padding-top:18px; } .advanced-block input{ width:100%; background:var(--bg); border:1px solid var(--border); border-radius:9px; padding:9px 10px; color:var(--text); font-family:var(--f-ui); font-variant-numeric:tabular-nums; font-size:12px; margin-top:8px; } .advanced-block .save-key-btn{ background:var(--accent); color:var(--accent-ink); border:none; border-radius:9px; padding:9px 14px; font-weight:600; font-size:12.5px; cursor:pointer; margin-top:8px; } /* Card stack — fills essentially the whole screen, Tinder-style */ .stack{ position:relative; flex:1; min-height:0; display:flex; align-items:center; justify-content:center; } .card{ position:absolute; width:100%; height:100%; background:var(--bg-card); border:none; border-radius:var(--radius); display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--shadow-card); touch-action:none; user-select:none; will-change:transform; } .card-head{ padding:calc(56px + env(safe-area-inset-top,0)) 18px 10px; flex-shrink:0; } .card-head-top{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; } .symbol{ font-family:var(--f-ui); font-weight:800; font-size:24px; letter-spacing:-0.02em; } .direction{ font-size:11px; font-weight:600; padding:4px 10px; border-radius:100px; letter-spacing:0.02em; } .direction.long{ background:var(--long-dim); color:var(--long); } /* On the card the pattern's shape is a tinted label, not a solid "call" button: the Scanner describes the chart, it doesn't advise. */ .card .direction.long, .card .direction.short, .panel-setup .direction.long, .panel-setup .direction.short, .detail-header .direction.long, .detail-header .direction.short{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:800; letter-spacing:0.03em; padding:8px 14px 8px 11px; border-radius:100px; } .dir-arrow{ display:inline-flex; } .dir-arrow .ico{ width:16px; height:16px; stroke-width:2.6; } .direction.short{ background:var(--short-dim); color:var(--short); } .direction.info{ background:var(--bg-elevated); color:var(--text-dim); } .info-note{ background:var(--bg-elevated); border:none; border-radius:var(--r-sm); padding:10px 12px; font-size:12px; color:var(--text-dim); margin-bottom:12px; line-height:1.4; } /* Confirmation gauges — sports-car-dial styled. Indicator name is shown to everyone; the digital numeric readout at the bottom of each dial is Pro-gated (shows a lock instead). Pending state (before the fetch resolves) stays plain text since there's nothing to draw a gauge for yet. */ .confirm-dials{ display:flex; justify-content:center; gap:10px; margin-bottom:8px; } .dial-widget{ display:flex; flex-direction:column; align-items:center; gap:4px; } .dial-svg-wrap{ position:relative; display:flex; align-items:center; justify-content:center; } .dial-svg-wrap svg{ display:block; } /* The readout sits in the open gap at the bottom of the gauge, below the needle's pivot, on a dark backing so the needle and the glow never cross it. */ .dial-center{ position:absolute; top:79%; left:50%; transform:translate(-50%, -50%); font-family:var(--f-ui); font-variant-numeric:tabular-nums; font-weight:700; font-size:8.5px; letter-spacing:-0.02em; text-align:center; line-height:1; white-space:nowrap; padding:2px 4px; border-radius:5px; background:var(--bg-card); text-shadow:none; } .dial-widget.large .dial-center{ font-size:15px; padding:3px 8px; border-radius:7px; border:1px solid currentColor; } .dial-center.pass{ color:var(--long); } .dial-center.fail{ color:var(--short); } .dial-center.locked{ color:var(--text-faint); font-size:9px; } .dial-widget.large .dial-center.locked{ font-size:13px; border-color:var(--border-strong); } .dial-name{ font-size:8px; font-family:var(--f-ui); font-variant-numeric:tabular-nums; letter-spacing:0.05em; color:var(--text-dim); text-transform:uppercase; } .dial-widget.large .dial-name{ font-size:11px; } /* Subtle "live" pulse on the center dot — safe to animate via CSS because a 's own bounding box is naturally centered on its cx/cy, unlike the needle (see the long comment above buildDialSVG for why the needle itself isn't animated). */ .dial-pulse{ animation: dialPulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes dialPulse{ 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.35); } } /* Detail-view confirmation rows (Pro) and the locked teaser (free) */ .confirm-locked{ display:flex; align-items:center; gap:8px; padding:13px 16px; border-radius:var(--r-md); border:none; background:var(--bg-elevated); color:var(--text); font-size:13px; font-weight:600; margin-top:10px; cursor:pointer; } .confirm-locked .ico{ width:15px; height:15px; flex-shrink:0; color:var(--text-dim); } .confirm-locked:hover{ box-shadow:inset 0 0 0 1.5px var(--accent); } .confirm-row{ display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-top:1px solid var(--border); } .confirm-row:first-of-type{ border-top:none; margin-top:8px; } .confirm-icon{ flex-shrink:0; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-top:0; } .confirm-icon .ico{ width:13px; height:13px; stroke-width:2.8; } .confirm-row.pass .confirm-icon{ background:var(--long-dim); color:var(--long); } .confirm-row.fail .confirm-icon{ background:var(--short-dim); color:var(--short); } .confirm-row strong{ font-size:13.5px; font-weight:700; } .confirm-reading{ font-size:12.5px; color:var(--text-dim); margin-top:2px; line-height:1.45; } .badges{ display:flex; flex-wrap:wrap; gap:6px; } .badge{ font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:100px; border:none; background:var(--bg-elevated); color:var(--text-dim); white-space:nowrap; } .badge.horizon{ color:var(--text); } .chart-wrap{ position:relative; flex:1; min-height:150px; } .chart-wrap .chart-status, .detail-chart-wrap .chart-status{ position:absolute; top:8px; left:14px; font-size:11px; font-weight:500; color:var(--text-faint); font-family:var(--f-ui); font-variant-numeric:tabular-nums; z-index:2; pointer-events:none; } .card-foot{ padding:14px 18px 16px; flex-shrink:0; } .levels{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:12px; } .level{ background:var(--bg-elevated); border-radius:var(--r-md); padding:9px 8px; text-align:center; } .level .lbl{ font-size:11px; font-weight:600; color:var(--text-faint); margin-bottom:2px; } .level .val{ font-size:16px; font-weight:800; letter-spacing:-0.01em; } .level .val{ color:var(--text); } .level.fib .val{ color:var(--warn); } .level.atr .val{ color:var(--text-dim); } .rationale{ font-size:12.5px; line-height:1.5; color:var(--text-dim); } /* Swipe stamps */ .stamp{ position:absolute; top:22px; font-family:var(--f-ui); font-weight:800; font-size:22px; letter-spacing:0.04em; padding:6px 14px; border-radius:8px; border-width:3px; border-style:solid; opacity:0; pointer-events:none; z-index:5; } .stamp.save{ right:18px; color:var(--long); border-color:var(--long); transform:rotate(8deg); } .stamp.skip{ left:18px; color:var(--short); border-color:var(--short); transform:rotate(-8deg); } /* Bottom actions — float over the bottom edge of the card itself, Tinder-style, rather than living in their own row beneath it */ .actions{ position:absolute; left:0; right:0; bottom:calc(54px + env(safe-area-inset-bottom,0)); display:flex; justify-content:center; gap:22px; pointer-events:none; z-index:15; } .action-btn{ width:58px; height:58px; border-radius:50%; border:none; background:var(--glass); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:22px; box-shadow:var(--shadow-float); pointer-events:auto; transition:transform .12s ease, box-shadow .15s ease; } .action-btn .ico{ width:24px; height:24px; stroke-width:2.4; } .action-btn:active{ transform:scale(0.92); } .action-btn.skip{ color:var(--short); } .action-btn.save{ color:var(--accent-ink); background:var(--accent); } .action-btn.save .ico{ fill:none; } /* Reverse/Rewind — smaller than Skip/Save (secondary action, Tinder places its Rewind button the same way), with a small lock badge when the viewer isn't on Pro. Visible to everyone — gating happens on tap, not on visibility, so free users know the feature exists rather than never finding out. */ .action-btn.reverse{ width:44px; height:44px; color:var(--text-dim); align-self:center; position:relative; } .action-btn.reverse .ico{ width:18px; height:18px; stroke-width:2.2; } .action-btn.reverse.disabled{ opacity:0.35; cursor:default; } .action-btn.reverse .lock-badge{ position:absolute; bottom:-2px; right:-2px; width:18px; height:18px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; border:2px solid var(--bg); } .action-btn.reverse .lock-badge .ico{ width:9px; height:9px; stroke-width:3; } /* Paywall prompt — bottom sheet, same pattern as the saved drawer */ .disclaimer{ text-align:center; font-size:9px; color:var(--text-faint); padding:5px 12px; flex-shrink:0; line-height:1.3; } /* Empty state */ .empty{ text-align:center; padding:40px 24px; } .empty .big{ font-family:var(--f-ui); font-size:20px; font-weight:800; margin-bottom:6px; } .empty .small{ font-size:13px; color:var(--text-dim); margin-bottom:18px; } .empty button{ background:var(--accent); color:var(--accent-ink); border:none; border-radius:100px; padding:12px 22px; font-weight:700; font-size:14px; cursor:pointer; } /* Saved drawer */ .drawer-overlay{ position:fixed; inset:0; background:var(--scrim); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:16; } .drawer-overlay.open{ opacity:1; pointer-events:auto; } .drawer{ position:fixed; bottom:0; left:0; right:0; max-width:480px; margin:0 auto; background:var(--bg-card); border-top:none; border-radius:26px 26px 0 0; box-shadow:0 -10px 40px -10px rgba(0,0,0,0.25); max-height:70vh; overflow-y:auto; transform:translateY(100%); transition:transform .25s ease; z-index:17; padding:18px 18px calc(18px + env(safe-area-inset-bottom,0)); } .drawer.open{ transform:translateY(0); } .drawer h3{ font-family:var(--f-ui); margin:0 0 14px; font-size:19px; font-weight:800; } .saved-item{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); } .saved-item:last-child{ border-bottom:none; } .saved-item-main .sym{ font-weight:700; font-size:14.5px; } .saved-item-main .tags{ font-size:11px; color:var(--text-faint); margin-top:2px; } .saved-item button{ background:var(--bg-elevated); border:none; color:var(--text); border-radius:100px; padding:6px 12px; font-size:12px; font-weight:600; cursor:pointer; } .drawer-empty{ color:var(--text-faint); font-size:12.5px; text-align:center; padding:20px 0; } /* Tap-to-expand hint (Tinder-style up-chevron on the card) */ .expand-hint{ position:absolute; left:50%; bottom:8px; transform:translateX(-50%); width:34px; height:22px; display:flex; align-items:center; justify-content:center; color:var(--text-faint); z-index:6; cursor:pointer; } .expand-hint svg{ width:18px; height:18px; } /* Detail drill-down (modeled on Tinder's profile detail screen) */ .detail-overlay{ position:fixed; inset:0; max-width:480px; margin:0 auto; background:var(--bg); z-index:20; transform:translateY(100%); transition:transform .32s cubic-bezier(.22,.68,0,1.01); display:flex; flex-direction:column; overflow:hidden; } .detail-overlay.open{ transform:translateY(0); } .detail-scroll{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; } .detail-header{ position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:12px; padding:calc(14px + env(safe-area-inset-top,0)) 16px 12px; background:var(--bg); } .detail-back{ width:38px; height:38px; border-radius:50%; background:var(--bg-card); border:none; box-shadow:var(--shadow-float); display:flex; align-items:center; justify-content:center; color:var(--text); cursor:pointer; flex-shrink:0; } .detail-back .ico{ width:22px; height:22px; stroke-width:2.4; } .detail-header .symbol{ font-size:22px; } .detail-chart-wrap{ position:relative; height:280px; margin:0 16px 16px; border-radius:var(--r-md); overflow:hidden; border:none; background:var(--bg-card); box-shadow:var(--shadow-card); } .detail-badges{ display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 16px; } .detail-levels{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin:0 16px 20px; } .detail-section{ padding:0 16px 24px; } .detail-section h4{ font-family:var(--f-ui); font-size:17px; font-weight:800; letter-spacing:-0.01em; margin:0 0 10px; color:var(--text); } .detail-section p{ font-size:14px; line-height:1.6; color:var(--text-dim); margin:0; } .detail-footer{ flex-shrink:0; display:flex; justify-content:center; gap:22px; padding:14px 0 calc(14px + env(safe-area-inset-bottom,0)); background:var(--bg); } /* ---- Phase 1 additions ---- */ /* "Last updated" line under the progress pill. Once refresh is decoupled from app opens, this is the only way a user can tell how fresh the feed is (ROADMAP §8, Phase 1). */ .top-updated{ font-size:10.5px; font-weight:500; color:var(--text-faint); background:var(--glass); backdrop-filter:blur(10px); border-radius:100px; padding:2px 9px; } .top-updated.stale{ color:var(--warn); } .demo-flag{ font-size:10px; font-weight:700; letter-spacing:0.04em; color:var(--warn); border:none; background:var(--warn-dim); border-radius:100px; padding:3px 8px; margin-left:6px; white-space:nowrap; } .status-grid{ display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:12px; color:var(--text-dim); margin-top:6px; } .status-grid dt{ color:var(--text-faint); } .status-grid dd{ margin:0; font-family:var(--f-ui); font-variant-numeric:tabular-nums; } .loading-state{ text-align:center; color:var(--text-dim); font-size:13px; padding:40px 24px; } /* Swipe card: the chart is the card. The header stays one compact block, the chart takes every pixel left over, and the foot holds only the two dials and the three levels. The written rationale and commentary live in the detail view (tap "Analysis"). The Skip/Save/Reverse buttons float over the bottom edge of the card (ROADMAP §4), so the foot reserves that strip, including the iPhone home-indicator inset, and the "Analysis" hint sits just above the buttons. */ .card .card-head{ padding-bottom:8px; } .card .card-head-top{ margin-bottom:6px; align-items:center; } .card .badges{ flex-wrap:nowrap; overflow:hidden; gap:5px; } .card .badge{ font-size:11px; padding:4px 10px; } /* The chart gives way first when the screen is short (a phone browser with its toolbars showing): the levels and the Analysis link must never be pushed under the floating buttons. */ .card .chart-wrap{ min-height:120px; } .card-foot{ padding:10px 14px calc(84px + env(safe-area-inset-bottom,0)); } .card .levels{ margin-bottom:0; gap:6px; } .card .level{ padding:7px 6px; } .card .level .val{ font-size:15.5px; } .card .info-note{ margin-bottom:0; } /* "Analysis" sits in the flow under the levels, never over them. */ .card .expand-hint{ position:static; transform:none; margin:8px auto 0; width:max-content; height:auto; gap:4px; padding:3px 10px; border-radius:100px; font-size:12.5px; font-weight:700; color:var(--text); } .expand-hint svg{ width:13px; height:13px; } /* ---------- Screen-size calibration ---------- Checked against the visible browser area of common phones and tablets (Safari/Chrome bars showing): iPhone SE to Pro Max, small to large Android, iPad and Android tablets. Short phones (iPhone SE in Safari, small Android): smaller dials and buttons so the chart keeps some height and nothing reaches them. */ @media (max-height: 640px){ .card .now-line{ height:28px; margin-bottom:6px; } } @media (max-height: 600px){ .card .card-head{ padding-bottom:6px; } .card .symbol{ font-size:20px; } .action-btn{ width:50px; height:50px; } .actions{ bottom:calc(42px + env(safe-area-inset-bottom,0)); gap:18px; } .card-foot{ padding-bottom:calc(68px + env(safe-area-inset-bottom,0)); } } /* Tablets held upright: a wider card than a phone's. */ @media (min-width: 700px) and (max-width: 1023px){ #app{ max-width:640px; } } /* Phones turned sideways leave ~330 px of height: too little for a swipe card, so ask to turn upright (the installed app is already locked to portrait in the manifest). */ .rotate-note{ display:none; } @media (orientation: landscape) and (max-height: 480px) and (pointer: coarse){ .rotate-note{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; position:fixed; inset:0; z-index:90; background:var(--bg); color:var(--text); text-align:center; padding:24px; } .rotate-note .rotate-icon{ display:flex; animation:rotateHint 2.4s ease-in-out infinite; } .rotate-note .rotate-icon .ico{ width:40px; height:40px; stroke-width:1.8; } .rotate-note b{ font-family:var(--f-ui); font-size:19px; font-weight:800; } .rotate-note span{ font-size:13px; color:var(--text-dim); } } @keyframes rotateHint{ 0%,20%{ transform:rotate(90deg); } 50%,100%{ transform:rotate(0deg); } } @media (prefers-reduced-motion: reduce){ .rotate-note .rotate-icon{ animation:none; } } /* Intro splash: full-screen brand moment on cold start, fades into the feed. Follows the theme. */ .splash{ position:fixed; inset:0; z-index:100; background:var(--bg); color:var(--text); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:env(safe-area-inset-top,0) 24px env(safe-area-inset-bottom,0); transition:opacity .45s ease, visibility .45s; cursor:pointer; } .splash.hide{ opacity:0; visibility:hidden; pointer-events:none; } .splash-center{ display:flex; flex-direction:column; align-items:center; text-align:center; } .splash-logo{ width:96px; height:96px; border-radius:26px; box-shadow:var(--shadow-card); animation:splashPop .7s cubic-bezier(.2,.9,.3,1.2) both; } .splash-name{ margin-top:22px; font-family:var(--f-ui); font-weight:800; font-size:36px; letter-spacing:-0.03em; animation:splashRise .6s .15s ease-out both; } .splash-tag{ margin-top:8px; font-size:15px; color:var(--text-dim); max-width:300px; text-wrap:balance; line-height:1.45; animation:splashRise .6s .3s ease-out both; } .splash-loader{ margin-top:34px; width:120px; height:3px; border-radius:3px; background:var(--border-strong); overflow:hidden; animation:splashRise .6s .45s ease-out both; } /* Fills over the splash's 6 s minimum (SPLASH_MIN_MS in app.js). */ .splash-loader span{ display:block; width:100%; height:100%; border-radius:3px; background:var(--accent); transform-origin:left center; animation:splashFill 6s cubic-bezier(.4,.1,.3,1) both; } .splash-foot{ position:absolute; left:0; right:0; bottom:calc(22px + env(safe-area-inset-bottom,0)); text-align:center; font-size:11.5px; color:var(--text-faint); } @keyframes splashPop{ from{ opacity:0; transform:scale(.85); } to{ opacity:1; transform:none; } } @keyframes splashRise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } @keyframes splashFill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } } @media (prefers-reduced-motion: reduce){ .splash-logo, .splash-name, .splash-tag, .splash-loader{ animation:none; } } /* ---------- Price freshness ---------- */ .level .lbl .asof{ text-transform:none; letter-spacing:0; color:var(--text-faint); opacity:0.85; } /* Its own strip between the chart and the levels, with its height reserved from the start so nothing shifts when the price arrives. */ .now-line{ display:flex; align-items:center; justify-content:space-between; gap:10px; height:32px; padding:0 12px; margin:0 0 8px; border-radius:var(--r-sm); background:var(--bg-elevated); border:none; font-size:12.5px; color:var(--text-dim); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; } .now-line.unavailable{ visibility:hidden; } .now-line b{ color:var(--text); font-weight:800; font-size:14px; margin-left:4px; } .now-diff{ display:flex; align-items:center; gap:6px; overflow:hidden; text-overflow:ellipsis; } .now-tag{ font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:100px; color:var(--warn); background:var(--warn-dim); border:none; } .now-tag.bad{ color:var(--short); background:var(--short-dim); border-color:transparent; } .now-tag.good{ color:var(--long); background:var(--long-dim); border-color:transparent; } /* ---------- Plans: swipe meter, teaser cards, plans screen ---------- */ .toast{ position:fixed; left:50%; bottom:calc(150px + env(safe-area-inset-bottom,0)); transform:translate(-50%, 10px); width:min(420px, calc(100vw - 40px)); z-index:30; display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--r-md); background:var(--bg-card); border:none; box-shadow:var(--shadow-float); opacity:0; transition:opacity .3s ease, transform .3s ease; } .toast.show{ opacity:1; transform:translate(-50%, 0); } .toast[hidden]{ display:none; } .toast b{ font-size:13.5px; display:block; } .toast span{ font-size:11.5px; color:var(--text-dim); display:block; margin-top:2px; } .toast-btn{ margin-left:auto; background:var(--accent); color:var(--accent-ink); border:none; border-radius:100px; padding:8px 14px; font-weight:700; font-size:12px; cursor:pointer; white-space:nowrap; } .lock-flag{ display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; color:var(--text-dim); background:var(--bg-elevated); border-radius:100px; padding:3px 9px; margin-left:8px; vertical-align:4px; white-space:nowrap; } .card.locked .locked-chart{ filter:blur(3px) saturate(0.6); opacity:0.55; } /* Room for the swipe meter under the counter (Free and Standard). */ .card.locked .card-head .badges{ opacity:0.85; } .lock-overlay{ position:absolute; left:0; right:0; top:42%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; pointer-events:none; z-index:4; padding:0 24px; } .lock-flag .ico{ width:11px; height:11px; } .lock-icon{ display:flex; width:52px; height:52px; border-radius:50%; align-items:center; justify-content:center; background:var(--accent); color:var(--accent-ink); box-shadow:var(--shadow-float); margin-bottom:4px; } .lock-icon .ico{ width:22px; height:22px; stroke-width:2.2; } .lock-title{ font-family:var(--f-ui); font-weight:800; font-size:20px; letter-spacing:-0.01em; } .lock-sub{ font-size:12.5px; color:var(--text-dim); } .locked-levels .val{ color:var(--text-faint) !important; letter-spacing:0.12em; } .card.locked .stamp.save{ color:var(--accent); border-color:var(--accent); } .out-panel{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; text-align:center; padding:calc(90px + env(safe-area-inset-top,0)) 22px 24px; background:var(--bg-card); box-shadow:var(--shadow-card); border-radius:var(--radius); overflow-y:auto; } .out-ring{ width:112px; height:112px; border-radius:50%; border:6px solid var(--border); border-top-color:var(--accent); border-right-color:var(--accent); display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0; } .out-ring b{ font-family:var(--f-ui); font-size:24px; font-weight:800; } .out-ring span{ font-size:10px; color:var(--text-dim); letter-spacing:0.06em; } .out-panel h2{ font-family:var(--f-ui); font-size:22px; font-weight:800; letter-spacing:-0.01em; margin:18px 0 6px; } .out-panel p{ margin:0; color:var(--text-dim); font-size:13px; line-height:1.5; } .out-peek{ margin:16px 0 4px; width:100%; border:none; background:var(--bg-elevated); border-radius:var(--r-md); padding:10px 12px; font-size:12.5px; color:var(--text-dim); text-align:left; line-height:1.5; } .out-peek b{ color:var(--text); } .out-peek .ico{ width:12px; height:12px; vertical-align:-1px; } .out-plans{ width:100%; display:flex; flex-direction:column; gap:10px; margin-top:12px; } .out-cta{ margin-top:14px; width:100%; background:var(--accent); color:var(--accent-ink); border:none; border-radius:100px; padding:15px; font-weight:800; font-size:15px; cursor:pointer; } .out-later{ margin-top:10px; font-size:12px; color:var(--text-dim); } .linklike{ background:none; border:none; padding:0; color:var(--text); text-decoration:underline; font-size:inherit; cursor:pointer; } .plan-row{ display:flex; align-items:center; gap:12px; text-align:left; padding:14px 16px; border-radius:var(--r-md); border:none; background:var(--bg-card); box-shadow:var(--shadow-card); cursor:pointer; } .plan-row.best{ border-color:var(--accent); box-shadow:inset 0 0 0 1.5px var(--accent); } .plan-name{ font-family:var(--f-ui); font-weight:800; font-size:16px; } .plan-feat{ font-size:11.5px; color:var(--text-dim); margin-top:3px; line-height:1.4; } .plan-price{ margin-left:auto; text-align:right; font-weight:800; font-size:15px; white-space:nowrap; } .plan-price small{ display:block; font-weight:400; font-size:10.5px; color:var(--text-faint); } .plan-tag{ font-size:9px; font-weight:700; letter-spacing:0.06em; color:var(--accent-ink); background:var(--accent); border-radius:100px; padding:2px 7px; margin-left:6px; vertical-align:2px; } .plan-tag.current{ background:var(--bg-elevated); color:var(--text); } .plan-list{ display:flex; flex-direction:column; gap:10px; } .plans-intro h2{ font-family:var(--f-ui); font-size:24px; font-weight:800; letter-spacing:-0.02em; margin:0 0 6px; } .plans-intro p{ margin:0; font-size:13px; color:var(--text-dim); line-height:1.5; } .beta-note{ margin-top:10px; font-size:12px; color:var(--text-dim); line-height:1.5; text-align:center; } .beta-note b{ color:var(--text); } .plans-later{ display:block; margin:14px auto 0; color:var(--text-dim); } .chip-group-label{ font-size:12px; font-weight:700; color:var(--text-dim); margin:14px 0 8px; } .chip-group-label:first-child{ margin-top:0; } .chip.locked{ opacity:0.5; display:inline-flex; align-items:center; gap:5px; } .chip .ico{ width:12px; height:12px; } .panel-locked{ padding:24px 20px; text-align:center; } .panel-locked p{ font-size:13px; color:var(--text-dim); line-height:1.6; } .panel-locked p b{ color:var(--text); } /* ---------- Wide screens (laptops and desktops) ---------- The card keeps the left column with a much larger chart, and the analysis the detail view shows on phones sits permanently on the right, updated on every swipe. Saved setups slide in from the right and Customize Feed from the left instead of covering the screen. Phones and tablets in portrait never reach this block. */ @media (min-width: 1024px){ #app{ max-width:1400px; flex-direction:row; gap:20px; padding:16px 24px; } .feed-col{ min-width:0; padding:0; } .card{ border-radius:var(--radius); } .card .expand-hint{ display:none; } /* the analysis is already on screen */ .disclaimer{ font-size:11px; padding:8px 12px 0; } .card-foot{ padding-bottom:104px; } .actions{ bottom:50px; } .action-btn:hover{ transform:translateY(-2px); } .action-btn:hover{ box-shadow:0 2px 6px rgba(16,17,20,0.08), 0 14px 30px -10px rgba(16,17,20,0.28); } .analysis-panel{ display:block; width:400px; flex-shrink:0; overflow-y:auto; background:var(--bg-card); border:none; box-shadow:var(--shadow-card); border-radius:var(--radius); padding:4px 4px 16px; } .panel-head{ padding:20px 16px 14px; margin-bottom:8px; } .panel-title{ font-size:12px; font-weight:700; color:var(--text-faint); margin-bottom:8px; } .panel-setup{ display:flex; align-items:center; gap:10px; } .panel-setup .symbol{ font-size:20px; } .panel-sub{ margin-top:6px; font-size:12px; color:var(--text-dim); } .panel-empty{ padding:40px 24px; text-align:center; font-size:13px; color:var(--text-faint); line-height:1.5; } .analysis-panel .confirm-dials{ margin-bottom:14px; } .kbd-hints{ display:flex; justify-content:center; gap:16px; padding:8px 16px 4px; font-size:11.5px; color:var(--text-faint); } kbd{ display:inline-block; min-width:20px; padding:1px 5px; margin-right:4px; border:1px solid var(--border-strong); border-bottom-width:2px; border-radius:5px; font-family:var(--f-ui); font-variant-numeric:tabular-nums; font-size:11px; text-align:center; color:var(--text-dim); } /* First-visit keyboard hint, floating over the bottom of the chart (clear of the levels and the buttons) */ .key-hint{ position:absolute; left:50%; bottom:200px; transform:translate(-50%, 8px); z-index:16; display:flex; align-items:center; gap:14px; padding:12px 14px 12px 18px; border-radius:var(--r-md); background:var(--bg-card); border:none; box-shadow:var(--shadow-float); color:var(--text); white-space:nowrap; opacity:0; transition:opacity .3s ease, transform .3s ease; } .key-hint.show{ opacity:1; transform:translate(-50%, 0); } .key-hint-main{ font-size:14px; font-weight:600; } .key-hint-main kbd{ color:var(--text); border-color:var(--accent); font-size:14px; padding:1px 7px; } .key-hint-sub{ font-size:12.5px; color:var(--text-dim); } .key-hint-ok{ background:var(--accent); color:var(--accent-ink); border:none; border-radius:100px; padding:8px 14px; font-weight:700; font-size:12.5px; cursor:pointer; } /* Side sheets instead of full-screen pages */ .drawer{ top:0; bottom:0; left:auto; right:0; width:400px; max-width:none; max-height:none; margin:0; border-top:none; border-left:none; border-radius:0; transform:translateX(100%); padding:24px 22px; } .drawer.open{ transform:translateX(0); } #filterOverlay{ right:auto; width:460px; max-width:none; margin:0; border-right:none; transform:translateX(-100%); transition:transform .28s ease; box-shadow:20px 0 60px -20px rgba(0,0,0,0.6); } #filterOverlay.open{ transform:translateX(0); } } /* ---------- multi-timeframe ---------- */ .symbol-stack{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; } .trend-flag{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:100px; white-space:nowrap; } .trend-flag.with{ color:var(--long); background:var(--long-dim); } .trend-flag.counter{ color:var(--warn); background:var(--warn-dim); } .tf-row{ display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; margin:4px 0 10px; } .tf-cell{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 0 8px; border-radius:var(--r-sm); background:var(--bg-card); border:none; } .tf-arrow{ display:flex; color:var(--text-faint); } .tf-arrow .ico{ width:16px; height:16px; stroke-width:2.6; } .tf-cell.up .tf-arrow{ color:var(--long); } .tf-cell.down .tf-arrow{ color:var(--short); } .tf-label{ font-size:11px; font-weight:600; color:var(--text-dim); } .tf-cell.higher{ box-shadow:inset 0 0 0 1px var(--border-strong); } .tf-cell.own{ box-shadow:inset 0 0 0 2px var(--accent); } .tf-cell.own .tf-label{ color:var(--text); font-weight:800; } .tf-row.blurred{ filter:blur(3px); opacity:0.5; pointer-events:none; } .align-sentence{ font-size:13.5px; line-height:1.5; color:var(--text-dim); margin:0 0 10px; } .align-sentence b{ color:var(--text); } .other-setups{ display:flex; flex-direction:column; gap:6px; } .other-setup{ display:flex; align-items:center; gap:10px; width:100%; padding:12px 14px; border-radius:var(--r-md); text-align:left; cursor:pointer; background:var(--bg-card); border:none; color:var(--text); font:inherit; font-size:13px; } .other-setup:hover{ box-shadow:inset 0 0 0 1.5px var(--accent); } .os-dir{ display:inline-flex; align-items:center; gap:3px; font-weight:800; font-size:12px; white-space:nowrap; } .os-dir .ico{ width:13px; height:13px; stroke-width:2.8; } .os-dir.long{ color:var(--long); } .os-dir.short{ color:var(--short); } .os-what{ flex:1; min-width:0; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .os-align{ font-size:11px; font-weight:700; padding:2px 7px; border-radius:100px; white-space:nowrap; } .os-align.with{ color:var(--long); background:var(--long-dim); } .os-align.counter{ color:var(--warn); background:var(--warn-dim); } /* ---------- confluence ---------- */ .flag-row{ display:flex; align-items:center; gap:6px; flex-wrap:nowrap; } .conf-pill{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:3px 9px; border-radius:100px; white-space:nowrap; color:var(--text-dim); background:var(--bg-elevated); border:none; } .conf-pill .pips{ display:inline-flex; gap:2px; } .conf-pill .pips i{ width:5px; height:5px; border-radius:50%; background:var(--border-strong); } .conf-pill .pips i.on{ background:var(--text); } .conf-pill.s4, .conf-pill.s5{ color:var(--long); background:var(--long-dim); } .conf-pill.s4 .pips i.on, .conf-pill.s5 .pips i.on{ background:var(--long); } .conf-head{ display:flex; align-items:center; gap:8px; } .conf-rows .confirm-row:first-of-type{ border-top:none; margin-top:0; } .confirm-row.locked-row{ opacity:0.55; } .confirm-row.locked-row .confirm-icon{ background:none; } .conf-locked{ margin-top:10px; } /* ---------- Analysis view as cards on the page background ---------- On phones the Analysis view sits on --bg, so each check reads as its own white card. (The PC side panel is already a card and keeps the plain rows.) */ .detail-overlay .confirm-row, .detail-overlay .conf-rows .confirm-row:first-of-type{ background:var(--bg-card); border:none; border-radius:var(--r-md); padding:13px 14px; margin-top:8px; } .detail-overlay .detail-levels .level{ background:var(--bg-card); box-shadow:var(--shadow-card); } .detail-overlay .detail-badges .badge{ background:var(--bg-card); } .detail-overlay .confirm-locked{ background:var(--bg-card); } .detail-overlay .tf-row .tf-cell{ box-shadow:var(--shadow-card); } .detail-overlay .tf-row .tf-cell.own{ box-shadow:inset 0 0 0 2px var(--accent); } .analysis-panel .tf-cell, .analysis-panel .other-setup{ background:var(--bg-elevated); } .ico{ display:inline-block; flex-shrink:0; vertical-align:middle; } .detail-overlay .conf-pill{ background:var(--bg-card); } /* ---------- sign-in (Google) ---------- */ .sign-in{ position:fixed; inset:0; z-index:40; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:calc(24px + env(safe-area-inset-top,0)) 24px calc(24px + env(safe-area-inset-bottom,0)); background:var(--bg); overflow-y:auto; } .sign-in[hidden]{ display:none; } .sign-in-close{ position:absolute; top:calc(16px + env(safe-area-inset-top,0)); left:16px; } .sign-in-card{ width:min(380px, 100%); display:flex; flex-direction:column; align-items:center; text-align:center; background:var(--bg-card); border-radius:var(--radius); box-shadow:var(--shadow-card); padding:32px 24px 26px; } .sign-in-logo{ width:72px; height:72px; border-radius:20px; } .sign-in-card h1{ margin:16px 0 4px; font-size:28px; font-weight:800; letter-spacing:-0.03em; } .sign-in-lead{ margin:0; font-size:14.5px; color:var(--text-dim); line-height:1.45; } .sign-in-badge{ margin:16px 0 22px; font-size:11.5px; font-weight:700; padding:4px 11px; border-radius:100px; background:var(--bg-elevated); color:var(--text-dim); } .gis-button{ min-height:44px; display:flex; justify-content:center; } .sign-in-error{ margin:14px 0 0; font-size:13px; font-weight:600; color:var(--short); line-height:1.45; } .sign-in-error[hidden]{ display:none; } .sign-in-note{ margin:18px 0 0; font-size:12px; color:var(--text-faint); line-height:1.5; } .sign-in-foot{ margin-top:20px; font-size:11.5px; color:var(--text-faint); } /* Account row in Customize Feed */ .account-row{ display:flex; align-items:center; gap:12px; background:var(--bg-card); border-radius:var(--r-md); padding:12px 14px; } .account-pic{ width:40px; height:40px; border-radius:50%; flex-shrink:0; object-fit:cover; } .account-initial{ display:flex; align-items:center; justify-content:center; background:var(--accent); color:var(--accent-ink); font-weight:800; font-size:17px; } .account-who{ flex:1; min-width:0; display:flex; flex-direction:column; } .account-who b{ font-size:14.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .account-who span{ font-size:12.5px; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .account-signin{ margin-top:0; } /* Coming-soon Pro tools, feedback sheet, admin link */ .soon-list{ display:flex; flex-direction:column; gap:8px; } .soon-row{ display:flex; align-items:center; gap:12px; background:var(--bg-card); border-radius:var(--r-md); padding:12px 14px; } .soon-row > div{ flex:1; min-width:0; display:flex; flex-direction:column; } .soon-row b{ font-size:14px; font-weight:700; } .soon-row span{ font-size:12.5px; color:var(--text-dim); line-height:1.4; } .soon-row .chip{ flex-shrink:0; display:inline-flex; align-items:center; gap:5px; } .admin-link{ display:inline-block; margin-top:10px; text-decoration:underline; } .feedback-sheet{ position:fixed; inset:0; z-index:45; display:flex; align-items:flex-end; justify-content:center; background:var(--scrim); padding:0 0 env(safe-area-inset-bottom,0); } .feedback-sheet[hidden]{ display:none; } .feedback-card{ width:min(480px, 100%); background:var(--bg-card); border-radius:26px 26px 0 0; padding:22px 20px 20px; box-shadow:0 -10px 40px -10px rgba(0,0,0,0.25); } .feedback-card h3{ margin:0 0 12px; font-size:19px; font-weight:800; } .feedback-card textarea{ width:100%; resize:vertical; font:inherit; font-size:15px; line-height:1.5; padding:12px 14px; border-radius:var(--r-md); border:none; background:var(--bg-elevated); color:var(--text); } .feedback-actions{ display:flex; align-items:center; justify-content:flex-end; gap:18px; margin-top:12px; } .feedback-actions .out-cta{ width:auto; margin:0; padding:12px 26px; } @media (min-width: 1024px){ .feedback-sheet{ align-items:center; } .feedback-card{ border-radius:26px; } } /* ---------- legal pages (/privacy, /terms) ---------- */ body.legal{ height:auto; min-height:100%; overscroll-behavior:auto; } .legal-page{ max-width:720px; margin:0 auto; padding:28px 20px 64px; font-size:15.5px; line-height:1.65; } .legal-page h1{ font-size:32px; font-weight:800; letter-spacing:-0.03em; margin:18px 0 4px; } .legal-page h2{ font-size:19px; font-weight:800; letter-spacing:-0.01em; margin:32px 0 8px; } .legal-page h3{ font-size:15.5px; font-weight:700; margin:18px 0 4px; } .legal-page p, .legal-page li{ color:var(--text-dim); } .legal-page b{ color:var(--text); } .legal-page ul{ padding-left:20px; } .legal-page li{ margin:4px 0; } .legal-page a{ color:var(--text); } .legal-meta{ margin:0 0 20px; font-size:13.5px; } .legal-back{ font-size:14px; font-weight:700; text-decoration:none; } .legal-callout{ background:var(--bg-card); border-radius:var(--r-md); box-shadow:var(--shadow-card); padding:16px 18px; margin:20px 0; } .legal-callout p{ margin:6px 0 0; } .legal-links{ margin-top:36px; font-size:14px; } /* Draft placeholders: impossible to miss until they're filled in. */ mark.fill{ background:var(--warn-dim); color:var(--warn); font-weight:700; padding:0 4px; border-radius:4px; } .legal-foot{ margin-top:14px; font-size:12px; color:var(--text-faint); text-align:center; } .legal-foot a{ color:inherit; } .sign-in-note a{ color:var(--text-dim); font-weight:600; } .delete-account{ display:block; margin-top:12px; font-size:12.5px; color:var(--short); } .delete-copy{ margin:0 0 10px; font-size:14px; line-height:1.5; color:var(--text-dim); } .out-cta.danger{ background:var(--short); color:#fff; } .out-cta:disabled{ opacity:0.6; cursor:default; } /* ---------- Sections: Scanner · My scans · School ---------- The main navigation: one row between the filter and watchlist buttons, the active section filled. */ .mode-tabs{ display:flex; gap:2px; padding:3px; border-radius:100px; background:var(--bg-card); border:1px solid var(--border-strong); box-shadow:var(--shadow-float); pointer-events:auto; } .mode-tabs button{ border:none; background:transparent; cursor:pointer; font-family:var(--f-ui); font-size:13.5px; font-weight:800; line-height:1.2; color:var(--text-dim); padding:8px 12px; border-radius:100px; white-space:nowrap; } .mode-tabs button.active{ background:var(--accent); color:var(--accent-ink); } @media (max-width:400px){ .top-bar .mode-tabs button{ padding:8px 9px; font-size:13px; } } @media (max-width:365px){ .top-bar .mode-tabs button{ padding:8px 7px; font-size:12.5px; } } .feed-status{ display:flex; justify-content:center; align-items:center; gap:6px; font-size:10.5px; font-weight:600; color:var(--text-faint); padding:2px 12px 0; flex-shrink:0; white-space:nowrap; } .feed-status .top-updated{ background:none; backdrop-filter:none; padding:0; font-size:inherit; } .feed-status .top-updated:not([hidden])::before{ content:"·"; margin-right:6px; } .detail-header.mode-header{ gap:10px; } .detail-header.mode-header .mode-tabs{ box-shadow:none; background:var(--bg-elevated); } /* ---------- My scans ---------- */ .scan-picker .chip{ font-weight:700; } .scan-editor h4{ margin-bottom:6px; } .scan-sub{ font-size:11px; font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.04em; margin:14px 0 8px; } .scan-editor.readonly .chip:not(.active){ opacity:0.55; } .scan-name{ display:flex; flex-direction:column; gap:6px; font-size:11px; font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.04em; } .scan-name input, .planner-grid input{ font-family:var(--f-ui); font-size:15px; font-weight:600; color:var(--text); background:var(--bg-card); border:1px solid var(--border-strong); border-radius:var(--r-sm); padding:10px 12px; text-transform:none; letter-spacing:0; width:100%; box-sizing:border-box; } .scan-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; align-items:center; } .scan-actions .chip[disabled]{ opacity:0.45; cursor:default; } .scan-list{ display:flex; flex-direction:column; gap:8px; } .scan-row{ display:flex; flex-direction:column; gap:3px; text-align:left; font-family:var(--f-ui); color:var(--text); background:var(--bg-card); border:none; border-radius:var(--r-md); padding:12px 14px; cursor:pointer; box-shadow:var(--shadow-card); } .scan-row-main{ display:flex; align-items:center; gap:8px; font-size:15px; } .scan-row-tf{ font-size:12px; font-weight:600; color:var(--text-dim); } .scan-row-sub{ font-size:12px; color:var(--text-dim); line-height:1.4; } .scan-empty{ font-size:13px; color:var(--text-dim); padding:6px 0; } .scan-near-head{ margin-top:18px; } .planner-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; } .planner-grid label{ display:flex; flex-direction:column; gap:5px; font-size:11px; font-weight:700; color:var(--text-faint); } .planner-grid input{ font-size:14px; padding:9px 10px; } .planner-out{ margin-top:10px; font-size:13px; line-height:1.6; color:var(--text-dim); background:var(--bg-elevated); border-radius:var(--r-sm); padding:10px 12px; } .planner-out b{ color:var(--text); } /* ---------- Chart school ---------- */ .school-stats{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px 12px; font-size:13px; font-weight:600; color:var(--text-dim); } .school-score b{ color:var(--text); } .school-score-lock, .school-adv-lock{ font-size:12.5px; } .school-adv-lock{ display:block; margin-top:10px; } .school-card{ background:var(--bg-card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow-card); display:flex; flex-direction:column; gap:12px; } .school-head{ display:flex; flex-direction:column; gap:8px; } .school-head .symbol{ font-size:24px; font-weight:800; letter-spacing:-0.02em; } .school-meta{ font-size:12px; color:var(--text-faint); margin-top:2px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .school-tags{ display:flex; flex-wrap:wrap; gap:6px; } .school-tags .badge{ white-space:normal; } .school-chart{ height:220px; border-radius:var(--r-md); overflow:hidden; background:var(--bg-elevated); } .school-explain p{ margin:0 0 8px; font-size:13px; line-height:1.5; color:var(--text-dim); } .school-explain b{ color:var(--text); } .school-q{ font-size:15px; font-weight:800; } .school-reads{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; } .school-read{ justify-content:center; display:inline-flex; align-items:center; gap:6px; padding:11px 8px; font-weight:700; } .school-read .ico{ width:16px; height:16px; } .school-read[disabled]{ cursor:default; opacity:0.55; } .school-read.truth{ opacity:1; border-color:var(--long); color:var(--long); background:var(--long-dim); } .school-read.picked:not(.truth){ opacity:1; border-color:var(--short); color:var(--short); background:var(--short-dim); } .school-result{ font-size:13.5px; line-height:1.5; border-radius:var(--r-sm); padding:10px 12px; } .school-result.right{ background:var(--long-dim); } .school-result.right b{ color:var(--long); } .school-result.wrong{ background:var(--bg-elevated); } .school-done{ text-align:center; padding:28px 18px; } .school-done .big{ font-size:18px; font-weight:800; } .school-done p{ font-size:13px; color:var(--text-dim); line-height:1.5; }