/* ── Variables ── */ :root { --green: #7BB290; --green2: #4ab78f; --green-d: rgba(123,178,144,.14); --green-b: rgba(123,178,144,.38); --on-green: #0e1512; /* text/icon colour on a green fill (dark) → flips to #fff on light */ --red: #e96a6a; --amber: #f0a054; --bg: #0a0f0b; /* page background (dark) */ --hdr-bg: #343a40; /* Theme channels — light/dark flip ONLY these (see html[data-theme="light"]). In dark they equal the original literals, so dark mode stays pixel-identical. */ --on-rgb: 255,255,255; /* white surface/border overlays on dark */ --text-rgb: 238,244,240; /* primary text channel (var(--text)) */ --muted-rgb:233,241,236; /* secondary text channel */ --surface: #111a14; /* solid panel surfaces */ --hdr-rgb: 11,16,12; /* sticky header background */ /* Foreground surfaces ~20% brighter so content separates from the dark bg. */ --glass: rgba(var(--on-rgb),.06); --glass-b: rgba(var(--on-rgb),.14); --text: rgb(var(--text-rgb)); /* Readability bump (operator: hard to read on a dim phone). Muted/dim text opacities raised so secondary copy stays legible at low screen brightness. */ --muted: rgba(var(--muted-rgb),.86); --dim: rgba(var(--muted-rgb),.66); /* shared foreground tokens (also used by the map + new controls) */ --fvc-panel-bg: rgba(var(--on-rgb),.06); --fvc-panel-bg-strong: rgba(var(--on-rgb),.09); --fvc-border: rgba(var(--on-rgb),.14); --fvc-border-strong: rgba(123,178,144,.45); --fvc-map-fill: rgba(123,178,144,.16); --fvc-map-stroke: rgba(123,178,144,.50); --fvc-accent: #7BB290; --r: 16px; --r-sm: 10px; --r-pill: 100px; --shadow: 0 8px 32px rgba(0,0,0,.36); } *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } html { scroll-behavior:smooth; overflow-x:clip; } /* clip (NOT hidden): hidden makes a scroll container, which breaks position:sticky on Chrome mobile (header slips up). clip prevents H-scroll without that side-effect. */ /* Mobile tap reliability: register taps IMMEDIATELY on interactive controls. * Without this, iOS Safari briefly holds the first tap to see if a double-tap- * zoom follows (the viewport is zoomable), so a single tap on a button sometimes * does nothing and the user has to tap a second time (Details/Share/etc. on the * cards). `manipulation` keeps scroll/pan but disables double-tap-zoom on these * elements → first tap always clicks. Scrolling/zooming the page is unaffected. */ button, a, label, summary, [role="button"], [onclick], .card-btn, .stock-card, .login-btn, .btn-green, .fvc-chip, .control-pill, .hdr-btn, .sm-action-btn, .fvc-rec-btn, .card-sector, .card-conf-pill { touch-action: manipulation; } /* Chrome Android reliability: mark EVERY interactive control as a tap target so the browser doesn't hold the first tap(s) for double-tap-zoom / scroll-vs-tap disambiguation. This matters most inside the detail bottom-sheet, which is a scroll container with a NON-passive touchmove listener (drag-to-close) — without this, Chrome waited and the year/tab/close buttons needed several taps. It does NOT disable scrolling or pinch-zoom. Firefox was already fine. */ button, summary, [onclick], .fvc-term, .histfv-range, .modal-tab, .modal-close, .modal-meta-chip, .fvc-afilter, .fvc-clear-all, .control-filters, .fvc-control-filters { touch-action: manipulation; } body { font-family:'Space Grotesk',system-ui,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; line-height:1.6; overflow-x:clip; /* clip (not hidden) → prevents H-scroll WITHOUT creating a scroll container that breaks position:sticky */ } a { color:inherit; text-decoration:none; } strong { font-weight:600; } /* ── Subtle grid background ── */ body::before { content:''; position:fixed;inset:0;z-index:0; background-image: linear-gradient(rgba(123,178,144,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(123,178,144,.025) 1px, transparent 1px); background-size:56px 56px; pointer-events:none; } /* ── Header — premium SaaS ── */ .hdr { /* near-solid (was 88% + blur(22px)): a heavy backdrop-filter on a sticky header over the fixed page background repaints every scroll frame and flickers the header + background on Chrome. Solid bg = identical look, no flicker. Fully opaque (was .97) + own compositor layer: at .97 the scrolled feed-card buttons ghosted through the sticky header. Same colour, alpha 1.0. */ background:rgb(var(--hdr-rgb)); transform:translateZ(0); padding:11px 28px; display:flex;align-items:center;justify-content:space-between;gap:16px; position:sticky;top:0;z-index:200; border-bottom:1px solid rgba(123,178,144,.14); box-shadow:0 1px 40px rgba(0,0,0,.55), 0 0 0 0.5px rgba(123,178,144,.07), inset 0 1px 0 rgba(123,178,144,.06); } /* Firefox: der eigene Compositor-Layer des sticky Headers (transform:translateZ) laesst am oberen Viewport-Rand einen Sub-Pixel-Spalt zum fixen Hintergrund (Betreiber 2026-07-27, "Spalt oben"). 1px nach oben deckt ihn zu, betrifft nur Firefox, aendert Chrome und das Anti-Ghosting nicht. */ @supports (-moz-appearance:none) { .hdr { top:-1px; } } .hdr-brand { display:flex;align-items:center;gap:10px; text-decoration:none; /* Brand yields width FIRST: with justify-content:space-between + non-shrinking nav, a fixed-width logo pushed the right-hand buttons off-screen on narrow iPhones ("Header abgeschnitten"). Now the logo clips/scales; buttons stay in. */ flex:0 1 auto;min-width:0;overflow:hidden; transition:opacity .18s; } .hdr-brand:hover { opacity:.85; } .hdr-logo-img { height:32px;width:auto;display:block;flex-shrink:1;min-width:0;max-width:100%;object-fit:contain;object-position:left center; } .hdr-radar-sub { padding:2px 9px;border-radius:var(--r-pill); background:rgba(123,178,144,.09);border:1px solid rgba(123,178,144,.22); font-size:.57rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--green);white-space:nowrap;align-self:center; } .hdr-pill { display:inline-flex;align-items:center;gap:5px; padding:3px 10px;border-radius:var(--r-pill); background:rgba(123,178,144,.07);border:1px solid rgba(123,178,144,.18); font-size:.6rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase; color:rgba(123,178,144,.75);white-space:nowrap; } .hdr-pill::before { content:'';width:5px;height:5px;border-radius:50%; background:var(--green);flex-shrink:0; animation:blink 2.4s ease-in-out infinite; } .hdr-nav { display:flex;gap:8px;align-items:center;flex-shrink:0; } .hdr-btn { display:inline-flex;align-items:center;gap:6px; padding:7px 18px;border-radius:var(--r-pill); font-family:inherit;font-size:.78rem;font-weight:600; cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s; text-decoration:none;border:none; white-space:nowrap; /* header CTAs never break into two lines at odd viewport widths */ } .hdr-btn.primary { background:var(--green);color:#0a1a10; box-shadow:0 4px 14px rgba(123,178,144,.28); } .hdr-btn.primary:hover { transform:translateY(-1px);box-shadow:0 6px 20px rgba(123,178,144,.45); } .hdr-btn.ghost { background:rgba(var(--on-rgb),.06);color:var(--text); border:1px solid rgba(var(--on-rgb),.12); } .hdr-btn.ghost:hover { background:rgba(var(--on-rgb),.10); } @media (max-width:640px) { .hdr { padding:10px 14px; } .hdr-pill { display:none; } .hdr-logo-img { height:26px; } /* Compact mobile header: icon-only Sign in, "Pro" (no price), compact Watchlist */ .hdr-nav { gap:6px; } .hdr-label { display:none; } /* hide "Watchlist" + "Sign in" words */ .hdr-pro-price, .hdr-pro-full { display:none; } /* just "Pro" on mobile (no "Go", no price) */ .hdr-account-btn, .hdr-wl-btn { padding:0; width:38px; height:38px; justify-content:center; /* square icon buttons */ } .hdr-wl-btn .wl-count-badge { position:absolute; top:-5px; right:-5px; } .hdr-pro-btn { padding:0 13px; height:30px; } /* Language switcher → single compact toggle on phones (shows the language you switch TO). It must look IDENTICAL to the 32px theme button beside it — a matched set. */ .hdr-lang { padding:0; gap:0; height:auto; border:none; background:transparent; margin-right:auto; } .hdr-lang-opt.active { display:none; } .hdr-lang-opt:not(.active) { width:32px; height:32px; min-width:0; padding:0; font-size:12px; font-weight:700; background:rgba(var(--on-rgb),.06); border:1px solid var(--fvc-border); border-radius:var(--r-pill); color:var(--text); } .hdr-lang-opt:not(.active):hover { background:rgba(var(--on-rgb),.12); color:var(--text); } .hdr-theme-btn:has(+ .hdr-lang) { margin-right:6px; } } /* ≤480px: the 16px base gap plus shrinkable toggles pushed the PRO button past the right viewport edge (clipped corner) and squeezed the theme button to ~18px. */ @media (max-width:480px) { .hdr { gap:8px; padding:10px 10px; } .hdr-nav { gap:6px; } .hdr-theme-btn { flex:0 0 32px; } .hdr-lang-opt:not(.active) { flex:0 0 32px; } } /* ── Main layout ── */ .main { position:relative;z-index:1; } /* ── Hero ── */ .hero { padding:72px 24px 64px; text-align:center; background:radial-gradient(ellipse 70% 50% at 50% 0%, rgba(74,183,143,.07) 0%, transparent 70%); } .hero-eyebrow { font-size:.7rem;letter-spacing:.28em;text-transform:uppercase; color:var(--green);margin-bottom:16px; } .hero h1 { font-size:clamp(2rem,5vw,3rem);font-weight:700;letter-spacing:-.03em; line-height:1.1;margin-bottom:14px; background:linear-gradient(135deg,var(--text) 0%,var(--green) 100%); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; } .hero-sub { font-size:1.05rem;color:var(--muted);max-width:480px;margin:0 auto 10px;line-height:1.7; } .hero-disclaimer { font-size:.72rem;color:var(--dim);margin-bottom:36px; } .hero-actions { display:flex;gap:12px;justify-content:center;flex-wrap:wrap; } .btn { display:inline-flex;align-items:center;gap:8px; border-radius:var(--r-pill);padding:12px 24px; font-family:inherit;font-size:.88rem;font-weight:600; cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s; text-decoration:none;border:none; } .btn-green { background:var(--green);color:#0a1a10; box-shadow:0 6px 20px rgba(123,178,144,.28); } .btn-green:hover { transform:translateY(-2px);box-shadow:0 10px 28px rgba(123,178,144,.42); } .btn-ghost { background:var(--glass);color:var(--text); border:1px solid var(--glass-b); } .btn-ghost:hover { background:rgba(var(--on-rgb),.07); } /* ── Section ── */ .section { padding:64px 24px;max-width:900px;margin:0 auto; } .section-hdr { display:flex;align-items:baseline;justify-content:space-between; flex-wrap:wrap;gap:12px;margin-bottom:8px; } .section-title { font-size:1.25rem;font-weight:600; } .section-meta { font-size:.75rem;color:var(--dim); } .section-sub { font-size:.83rem;color:var(--muted);margin-bottom:32px; } /* ── Status bar ── */ .status-bar { background:var(--glass);border:1px solid var(--glass-b);border-radius:var(--r); padding:14px 20px;margin-bottom:28px; display:flex;align-items:center;gap:12px;flex-wrap:wrap; font-size:.78rem;color:var(--muted); } .status-dot { width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0;animation:blink 2.4s ease-in-out infinite; } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} } /* ── Stock cards ── */ .cards { display:flex;flex-direction:column;gap:16px; } /* Desktop feed density (design audit): a single ~630px card per row meant ~1.4 cards per 1440×900 viewport (50 results ≈ 51,000px page). On wide screens the results become a 2-column grid inside a slightly wider list section — layout/ spacing only, all dark-mode colors untouched. Mobile/tablet unchanged. */ @media (min-width:1280px) { #stock-list-section { max-width:1160px; } #cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } /* Full-width children (loading/empty/error boxes + values-filter note) span both columns */ #cards > .state-box, #cards > .fvc-values-note { grid-column:1 / -1; } .stock-card { padding:16px 22px; } .card-thesis { margin-bottom:12px; } .fvc-interp { margin:12px 0; } } .stock-card { /* solid-ish tint, NO backdrop-filter: 50 blurred cards over the fixed background grid forced a per-frame GPU re-blur on scroll → whole-page flicker/jank (worse the more cards/the weaker the GPU). The blur was barely visible over the dark page anyway. */ background:rgba(var(--on-rgb),.05);border:1px solid var(--glass-b);border-radius:var(--r); padding:24px 26px; transition:border-color .2s,box-shadow .2s; /* INP-Pass 2026-07-13: Below-Fold-Karten kosten weder Layout noch Paint, bis sie in Viewport-Nähe scrollen — ergänzt das Batched-Render vom 07-07 (185→129ms) auf der Präsentations-Seite. contain-intrinsic-size ≈ Kartenhöhe hält die Scrollbar stabil. */ content-visibility:auto; contain-intrinsic-size:auto 340px; } .stock-card:hover { border-color:var(--green-b); box-shadow:0 4px 24px rgba(123,178,144,.08); } .card-top { display:flex;align-items:flex-start;justify-content:space-between;gap:16px; margin-bottom:6px; } .card-identity { flex:1;min-width:0; } .card-ticker { font-size:1.2rem;font-weight:700;letter-spacing:.04em;color:var(--text); } .card-name { font-size:.8rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; max-width:260px;margin-top:2px; } .card-score-wrap { text-align:right;flex-shrink:0; } .card-score { font-size:2rem;font-weight:700;line-height:1; background:linear-gradient(135deg,var(--green) 0%,var(--green2) 100%); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; } .card-score-lbl { font-size:.62rem;color:var(--dim);letter-spacing:.08em;text-transform:uppercase;margin-top:1px; } .verdict-pill { display:inline-flex;align-items:center;gap:6px; padding:4px 12px;border-radius:var(--r-pill); font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase; margin-bottom:10px; } .verdict-strong { background:rgba(74,183,143,.15);color:var(--green2);border:1px solid rgba(74,183,143,.3); } .verdict-watch { background:rgba(123,178,144,.10);color:var(--green);border:1px solid var(--green-b); } .verdict-mixed { background:rgba(240,160,84,.10);color:var(--amber);border:1px solid rgba(240,160,84,.28); } .verdict-weak { background:rgba(224,95,95,.08);color:var(--red);border:1px solid rgba(224,95,95,.22); } .card-thesis { font-size:.81rem;color:var(--muted);line-height:1.65;margin-bottom:18px; font-style:italic; } /* ── Factor bars ── */ .factor-bars { display:flex;flex-direction:column;gap:7px;margin-bottom:20px; } .fb-row { display:grid;grid-template-columns:110px 1fr 36px;align-items:center;gap:10px; } .fb-label { font-size:.7rem;color:var(--muted);letter-spacing:.04em; } .fb-track { height:5px;border-radius:3px; background:rgba(var(--on-rgb),.06);overflow:hidden; } .fb-fill { height:100%;border-radius:3px; background:linear-gradient(90deg,var(--green) 0%,var(--green2) 100%); transition:width .6s cubic-bezier(.4,0,.2,1); } .fb-fill.medium { background:linear-gradient(90deg,var(--amber) 0%,#f5c875 100%); } .fb-fill.low { background:linear-gradient(90deg,var(--red) 0%,#e88080 100%); } .fb-val { font-size:.7rem;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums; } /* ── Key metrics ── */ .key-metrics { display:flex;flex-wrap:wrap;gap:8px 20px; margin-bottom:18px; padding:12px 0; border-top:1px solid var(--glass-b); border-bottom:1px solid var(--glass-b); } .km-item { font-size:.74rem; } .km-label { color:var(--dim);margin-right:4px; } .km-val { color:var(--text);font-weight:500; } .km-val.up { color:var(--green); } .km-val.down { color:var(--red); } /* ── Card footer ── */ .card-footer { display:flex;align-items:center;justify-content:space-between; flex-wrap:wrap;gap:10px; } .card-source { font-size:.66rem;color:var(--dim); } /* ── Investment interpretation (signal label + one analytical sentence) ──── */ .fvc-interp { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:18px 0; padding:11px 13px; border-radius:10px; background:rgba(var(--on-rgb),.035); border:1px solid var(--glass-b, rgba(var(--on-rgb),.1)); border-left:3px solid #8a9aa0; /* accent re-set per tone below */ cursor:pointer; transition:background .15s, transform .12s, border-color .15s; /* whole box opens the detail page */ -webkit-tap-highlight-color:transparent; } .fvc-interp:hover { background:rgba(var(--on-rgb),.06); transform:translateY(-1px); } .fvc-interp:active { transform:translateY(0); } .fvc-interp:focus-visible { outline:2px solid var(--fvc-green,#7BB290); outline-offset:2px; } .fvc-interp-badge { flex:0 0 auto; font-size:.67rem; font-weight:800; letter-spacing:.015em; padding:4px 11px; border-radius:999px; line-height:1.15; white-space:nowrap; background:rgba(var(--on-rgb),.06); border:1px solid var(--glass-b, rgba(var(--on-rgb),.12)); color:var(--text,var(--text)); } .fvc-interp-text { flex:1 1 220px; min-width:0; font-size:.78rem; line-height:1.4; color:var(--muted, rgba(var(--muted-rgb),.72)); } /* Tone palette — green (positive) · grey (neutral/weak) · amber (caution) · red (negative) */ .fvc-interp.tone-positive, .fvc-interp.tone-neutral-positive, .fvc-interp.tone-positive-caution { border-left-color:#7BB290; } .fvc-interp.tone-positive .fvc-interp-badge, .fvc-interp.tone-neutral-positive .fvc-interp-badge, .fvc-interp.tone-positive-caution .fvc-interp-badge { background:rgba(123,178,144,.16); border-color:rgba(123,178,144,.42); color:#7BB290; } .fvc-interp.tone-neutral, .fvc-interp.tone-weak { border-left-color:#9aa0a6; } .fvc-interp.tone-neutral .fvc-interp-badge, .fvc-interp.tone-weak .fvc-interp-badge { background:rgba(var(--on-rgb),.06); border-color:rgba(var(--on-rgb),.16); color:#aab0b6; } .fvc-interp.tone-caution, .fvc-interp.tone-neutral-caution { border-left-color:#f0a054; } .fvc-interp.tone-caution .fvc-interp-badge, .fvc-interp.tone-neutral-caution .fvc-interp-badge { background:rgba(240,160,84,.14); border-color:rgba(240,160,84,.4); color:#f0a054; } .fvc-interp.tone-negative { border-left-color:#e96a6a; } .fvc-interp.tone-negative .fvc-interp-badge { background:rgba(233,106,106,.14); border-color:rgba(233,106,106,.42); color:#e96a6a; } @media (max-width:560px){ .fvc-interp { padding:8px 10px; gap:8px; } .fvc-interp-badge { font-size:.62rem; padding:3px 9px; } .fvc-interp-text { font-size:.73rem; flex-basis:100%; } /* sentence wraps under the badge */ } /* Verdict / red-flag pill — one component matched to the .fvc-interp-badge pill, used for the red-flag badge on cards (under the verdict) and both badges on the detail page (under the sum row). Tone variants mirror the .fvc-interp tone palette so a solo badge carries its own colour without the .fvc-interp box. */ .fvc-vbadge { display:inline-flex; align-items:center; gap:5px; font-size:.67rem; font-weight:800; letter-spacing:.015em; padding:4px 11px; border-radius:999px; line-height:1.2; white-space:nowrap; border:1px solid var(--glass-b, rgba(var(--on-rgb),.12)); background:rgba(var(--on-rgb),.06); color:var(--text); } .fvc-vbadge.tone-positive,.fvc-vbadge.tone-neutral-positive,.fvc-vbadge.tone-positive-caution { background:rgba(123,178,144,.16); border-color:rgba(123,178,144,.42); color:#7BB290; } .fvc-vbadge.tone-neutral,.fvc-vbadge.tone-weak { background:rgba(var(--on-rgb),.06); border-color:rgba(var(--on-rgb),.16); color:#aab0b6; } .fvc-vbadge.tone-caution,.fvc-vbadge.tone-neutral-caution { background:rgba(240,160,84,.14); border-color:rgba(240,160,84,.4); color:#f0a054; } .fvc-vbadge.tone-negative,.fvc-vbadge.flag { background:rgba(233,106,106,.14); border-color:rgba(233,106,106,.42); color:#e96a6a; } /* Classification badges rendered in the SAME .fvc-vbadge component as the verdict, so the detail sum row reads as one consistently-sized set (operator 2026-07-12: "die badges verschieden groß"). */ .fvc-vbadge.tone-penny { background:rgba(224,138,138,.13); border-color:rgba(224,138,138,.4); color:#e08a8a; } .fvc-vbadge.tone-cyclical { background:rgba(144,184,240,.13); border-color:rgba(144,184,240,.4); color:#90b8f0; } .fvc-vbadge.tone-dilution { background:rgba(240,160,84,.13); border-color:rgba(240,160,84,.4); color:#f0a054; } .fvc-vbadge.flag { white-space:normal; text-align:left; display:inline-block; } /* red-flag text can wrap — inline-block (NOT flex): any inner would become its own flex item and shatter the sentence into columns */ .fvc-vbadge.flag .gq-dot { margin-right:5px; } /* flex gap replacement for the 🚩 */ .fvc-flags-row { display:flex; flex-wrap:wrap; gap:6px; margin:7px 0 0; } /* card: under the verdict box */ .fvc-sum-badges { display:flex; flex-wrap:wrap; gap:6px; margin:9px 0 2px; } /* detail: under the sum rows */ @media (max-width:560px){ .fvc-vbadge { font-size:.62rem; padding:3px 9px; } } .card-actions { display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;flex:1 1 100%; } /* full-width so flex-end actually pushes the buttons right (footer is space-between) → easier thumb reach */ .card-btn { display:inline-flex;align-items:center;justify-content:center;gap:6px; padding:10px 18px;border-radius:var(--r-pill); font-family:inherit;font-size:.82rem;font-weight:600; cursor:pointer;transition:background .18s,transform .18s; text-decoration:none;border:none; } .card-btn.details { background:var(--glass);color:var(--text); border:1px solid var(--glass-b); } .card-btn.details:hover { background:rgba(var(--on-rgb),.09); } .card-btn.fvc { background:var(--green-d);color:var(--green); border:1px solid var(--green-b); } .card-btn.fvc:hover { background:rgba(123,178,144,.18); } .card-btn.coffee { background:rgba(240,160,84,.10);color:var(--amber); border:1px solid rgba(240,160,84,.25); } .card-btn.coffee:hover { background:rgba(240,160,84,.18); } /* iPhone (≤560px): shrink the three card actions (Details / Watch / Share this find) a touch so all three stay on ONE row instead of wrapping (operator, iPhone 12 Pro). Higher specificity than the base .card-btn → overrides padding/font on mobile only. */ @media (max-width:560px){ .card-actions { gap:6px; } .card-actions .card-btn { padding:8px 10px; font-size:.74rem; gap:5px; white-space:nowrap; } .card-actions .card-btn svg { width:12px; height:12px; } } /* iPhone 12/13 class (≤430px): one notch tighter still — the GERMAN labels („Fair Value ansehen" · „+ Merken" · „Fund teilen") otherwise wrap to a second row (operator 2026-07-06). Buttons also flex-grow so a fitting row fills the card width evenly instead of hugging the right edge. */ @media (max-width:430px){ .card-actions .card-btn { padding:8px 8px; font-size:.7rem; flex:1 1 auto; min-width:0; } } /* ── Confidence badge ── */ .conf-badge { display:inline-flex;align-items:center;gap:4px; font-size:.64rem;padding:2px 9px;border-radius:var(--r-pill); letter-spacing:.06em;text-transform:uppercase; } .conf-high { background:rgba(123,178,144,.12);color:var(--green);border:1px solid var(--green-b); } .conf-medium { background:rgba(240,160,84,.10);color:var(--amber);border:1px solid rgba(240,160,84,.25); } .conf-low { background:rgba(224,95,95,.08);color:var(--red);border:1px solid rgba(224,95,95,.2); } /* ── Loading & empty states ── */ .state-box { text-align:center;padding:64px 24px; background:var(--glass);border:1px solid var(--glass-b);border-radius:var(--r); } .state-box p { color:var(--muted);font-size:.88rem;margin-top:12px;line-height:1.7; } /* ── No-results dialog (search returned 0 hits): apologise → AI → report gap → calculators ── */ .fvc-nores { max-width:520px;margin:0 auto;padding:40px 26px; } .fvc-nores-emoji { font-size:2.2rem;line-height:1;margin-bottom:6px;opacity:.9; } .fvc-nores-title { color:var(--text,#e9f1ec);font-size:1.08rem;font-weight:800;margin:6px 0 4px;line-height:1.35; } .fvc-nores-sub { color:var(--muted);font-size:.86rem;line-height:1.65;margin:0 auto 18px;max-width:440px; } .fvc-nores-actions { display:flex;flex-direction:column;gap:10px;max-width:360px;margin:0 auto; } .fvc-nores-btn { display:block;width:100%;box-sizing:border-box;padding:12px 16px;border-radius:12px; font-size:.9rem;font-weight:700;cursor:pointer;text-decoration:none;text-align:center; border:1px solid var(--glass-b);background:rgba(255,255,255,.04);color:var(--text,#e9f1ec); transition:transform .12s ease,background .15s ease,border-color .15s ease; } .fvc-nores-btn:hover { background:rgba(255,255,255,.08);transform:translateY(-1px); } .fvc-nores-btn.primary { background:var(--fvc-green,#7BB290);border-color:transparent;color:#08130d; } .fvc-nores-btn.primary:hover { background:#8cc4a2; } .fvc-nores-btn.ghost { background:transparent;color:var(--muted);font-weight:600; } .fvc-nores-hint { color:var(--dim,rgba(233,241,236,.5));font-size:.74rem;margin-top:16px; } .fvc-nores-thanks { display:block;padding:12px 16px;border-radius:12px;font-size:.86rem;font-weight:700;line-height:1.5; color:#9be8bf;background:rgba(123,178,144,.12);border:1px solid rgba(123,178,144,.32); } /* Pulse-highlight the search bar / magnifier when the user is sent there to use the AI */ @keyframes fvcBarPulse { 0%,100%{box-shadow:0 0 0 0 rgba(123,178,144,0);} 25%{box-shadow:0 0 0 4px rgba(123,178,144,.55);} } .fvc-bar-pulse { animation:fvcBarPulse 0.85s ease-in-out 3;border-radius:14px; } .spinner { width:36px;height:36px;border-radius:50%; border:3px solid var(--glass-b);border-top-color:var(--green); animation:spin .8s linear infinite;margin:0 auto 16px; } @keyframes spin { to { transform:rotate(360deg); } } /* Small inline spinner for the sign-in / contact "verifying…/sending…" status line. */ .login-spin { display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-right:7px; border:2px solid var(--glass-b);border-top-color:var(--green);border-radius:50%; animation:spin .7s linear infinite; } /* ── Modal ── */ .modal-overlay { position:fixed;inset:0;z-index:500; /* NO backdrop-filter: a blur on this fixed full-screen overlay forced the compositor to re-blur every frame while scrolling the modal → heavy scroll lag on Chrome (Safari never applied it — it needs the -webkit- prefix — which is why the jank was Chrome-only). A near- solid backdrop looks the same and scrolls smoothly. */ background:rgba(0,0,0,.8); display:flex;align-items:center;justify-content:center; padding:20px;opacity:0;pointer-events:none;transition:opacity .25s; } .modal-overlay.open { opacity:1;pointer-events:all; } .modal { background:var(--surface);border:1px solid var(--glass-b);border-radius:var(--r); width:100%;max-width:640px;max-height:86vh;max-height:86dvh;overflow-y:auto;overflow-x:hidden; -webkit-overflow-scrolling:touch; /* momentum scrolling on iOS */ padding:28px;position:relative; box-shadow:0 24px 70px rgba(0,0,0,.55); transform:translateY(12px);transition:transform .25s; } .modal-overlay.open .modal { transform:translateY(0); } /* ── Embedded Stripe checkout: a framed, on-brand sheet so the white Stripe form lands softly on the dark site, plus an instant loading state (the click never feels frozen). ── */ /* A clean BRANDED header on the dark sheet — our logo + a quiet "secure payment via Stripe" trust line — then the familiar (tested) white Stripe card below. The logo is graphic brand identity, so it doesn't compete with Stripe's text product band; it just frames the checkout as ours. */ .fvc-embed-co { padding:14px 0 0; } .fvc-embed-brandhead { display:flex; flex-direction:column; align-items:center; gap:9px; padding:6px 44px 13px; } .fvc-embed-brandhead .fvc-embed-logo { height:25px; width:auto; display:block; } /* Light mode: the white wordmark vanishes on the light sheet — swap to the dark-text variant. */ .fvc-embed-brandhead .fvc-embed-logo-light { display:none; } html[data-theme="light"] .fvc-embed-brandhead .fvc-embed-logo-dark { display:none; } html[data-theme="light"] .fvc-embed-brandhead .fvc-embed-logo-light { display:block; } .fvc-embed-brandhead .fvc-embed-secure { display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:600; letter-spacing:.01em; color:var(--muted,#9fb0a8); } .fvc-embed-brandhead .fvc-embed-stripe { display:inline-flex; align-items:center; } .fvc-embed-brandhead .fvc-embed-stripe svg { height:16px; width:auto; display:block; } /* Trust + founder reassurance under "Powered by Stripe", on the dark sheet, above the Stripe card. */ .fvc-co-trust { padding:2px 18px 10px; } .fvc-co-trust-item { display:flex; align-items:flex-start; gap:9px; margin:9px 0; font-size:.83rem; line-height:1.45; color:var(--muted,#9fb0a8); } .fvc-co-trust-item .fvc-co-ck { flex:0 0 auto; width:16px; height:16px; margin-top:1px; color:var(--green,#7BB290); } .fvc-co-founder { display:flex; align-items:center; gap:13px; margin-top:14px; padding:13px 14px; background:rgba(123,178,144,.07); border:1px solid var(--green-b,rgba(123,178,144,.30)); border-radius:14px; } .fvc-co-founder .fvc-co-photo { flex:0 0 auto; width:56px; height:56px; border-radius:50%; object-fit:cover; object-position:50% 22%; background:#fff; } .fvc-co-founder .fvc-co-fnote { min-width:0; } .fvc-co-founder .fvc-co-fnote p { margin:0; font-size:.82rem; line-height:1.4; color:var(--text,#e9f1ec); } /* Trust-Block statt Unterschrift (operator 2026-07-16): Name in normaler Schrift, ruhig + seriös. */ .fvc-co-founder .fvc-co-name { display:block; margin-top:6px; line-height:1.2; font-weight:700; font-size:.88rem; color:var(--text,#e9f1ec); } .fvc-co-founder .fvc-co-role { display:block; margin-top:2px; font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted,#9fb0a8); } .fvc-embed-mount { min-height:440px; padding:4px 6px 12px; } /* Once Stripe's (light) form is mounted, frame it as an intentional white inset card — rounded to match the site's radii, soft shadow, breathing margin — so it reads as designed-in, not bolted-on. The loader above stays on the dark sheet (its muted text needs the dark bg for contrast). */ .fvc-embed-mount.is-ready { animation:fvcEmbedIn .35s ease; margin:12px; padding:8px 8px 10px; background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 10px 34px rgba(0,0,0,.24); } .fvc-embed-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; min-height:420px; padding:0 24px; text-align:center; color:var(--muted,#9fb0a8); font-size:.9rem; } .fvc-embed-spin { width:32px; height:32px; border-radius:50%; border:3px solid rgba(123,178,144,.22); border-top-color:var(--green,#7BB290); animation:fvcSpin .8s linear infinite; } @keyframes fvcSpin { to { transform:rotate(360deg); } } @keyframes fvcEmbedIn { from { opacity:0; } to { opacity:1; } } @media (prefers-reduced-motion:reduce) { .fvc-embed-spin { animation-duration:1.6s; } .fvc-embed-mount.is-ready { animation:none; } } /* ── DARK on-site checkout (Stripe Payment Element) — seamless with the dark site, no white box. The Payment Element itself is themed via its JS `appearance` API (FVC_PE_APPEARANCE); this styles our surrounding summary, pay button and trust line so the whole sheet reads as one dark unit. ── */ .fvc-pe-co { padding:30px 18px 20px; } .fvc-pe-head { padding:2px 2px 14px; border-bottom:1px solid var(--fvc-border,rgba(255,255,255,.08)); margin-bottom:14px; } .fvc-pe-brand { font-weight:800; font-size:1.12rem; letter-spacing:.01em; color:var(--text,#e9f1ec); } .fvc-pe-brand span { color:var(--green,#7BB290); } .fvc-pe-price { margin-top:5px; font-size:.95rem; color:var(--muted,#9fb0a8); } .fvc-pe-price .fvc-pe-now { color:var(--green,#7BB290); font-weight:800; font-size:1.15rem; } .fvc-pe-field { margin:12px 0; } .fvc-pe-paybox { min-height:220px; } .fvc-pe-pay { margin-top:18px; width:100%; padding:15px 16px; border:0; border-radius:14px; background:var(--green,#7BB290); color:#0a1a10; font-weight:800; font-size:1.04rem; cursor:pointer; transition:filter .15s ease, transform .05s ease; } .fvc-pe-pay:hover { filter:brightness(1.06); } .fvc-pe-pay:active { transform:translateY(1px); } .fvc-pe-trust { margin-top:13px; display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; font-size:.8rem; color:var(--muted,#9fb0a8); } .fvc-pe-trust .fvc-pe-stripe { display:inline-flex; align-items:center; } .fvc-pe-trust .fvc-pe-stripe svg { height:15px; width:auto; display:block; opacity:.92; } .modal-close { position:absolute;top:16px;right:16px; width:28px;height:28px;border-radius:50%; background:var(--glass);border:1px solid var(--glass-b); color:var(--muted);font-size:1rem;cursor:pointer; display:flex;align-items:center;justify-content:center; transition:background .15s,color .15s; } .modal-close:hover { background:rgba(var(--on-rgb),.10); } .modal h2 { font-size:1.1rem;font-weight:700;margin-bottom:4px; } .modal .modal-sub { font-size:.78rem;color:var(--muted);margin-bottom:20px; } /* Detail-section rhythm (design-polish 2026-07): ONE gap between sections (32px, 8px grid), ONE gap after every section title (12px). Mobile scales both down (see .modal-sheet). */ .modal-section { margin-bottom:32px; } .modal-section-title { font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--green);margin-bottom:12px;padding-bottom:6px; border-bottom:1px solid var(--glass-b); } /* collapsible section (
) — Data Sources ships collapsed */ .modal-fold summary { display:flex;align-items:center;justify-content:space-between;gap:8px; cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent; } .modal-fold summary::-webkit-details-marker { display:none; } .modal-fold summary .modal-section-title { flex:1 1 auto;margin-bottom:0; } .modal-fold summary .modal-fold-chev { flex:0 0 auto;color:var(--green);opacity:.75; margin-bottom:4px;transition:transform .18s; } .modal-fold[open] summary .modal-fold-chev { transform:rotate(180deg); } .modal-fold[open] summary { margin-bottom:2px; } .modal-row { display:flex;justify-content:space-between;align-items:center; padding:5px 0;font-size:.8rem;color:var(--muted); border-bottom:1px solid rgba(var(--on-rgb),.03); } .modal-row:last-child { border-bottom:none; } .modal-row .mr-label { flex:1; } .modal-row .mr-val { font-weight:500;color:var(--text);font-variant-numeric:tabular-nums;text-align:right; } .modal-row .mr-score { width:28px;height:28px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:.68rem;font-weight:700;margin-left:10px;flex-shrink:0; } .modal-warn { background:rgba(240,160,84,.08);border:1px solid rgba(240,160,84,.2); border-radius:var(--r-sm);padding:10px 14px; font-size:.78rem;color:var(--amber);margin-top:10px;line-height:1.55; } .modal-penalty { background:rgba(224,95,95,.07);border:1px solid rgba(224,95,95,.2); border-radius:var(--r-sm);padding:8px 12px;margin:4px 0; font-size:.78rem;color:var(--red); } /* ── Footer ── */ /* slim final strip — compact, premium, unobtrusive */ .footer { border-top:1px solid var(--glass-b); padding:12px 24px; margin-top:40px; background:rgba(10,15,11,.5); } .footer-inner { max-width:1180px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:4px 18px; } .footer-copy { font-size:.74rem; font-weight:600; color:var(--muted); letter-spacing:.01em; } .footer-note { font-size:.7rem; color:var(--dim); } .footer-nav { display:flex; flex-wrap:wrap; gap:6px 22px; justify-content:center; max-width:1180px; margin:0 auto 14px; padding-bottom:14px; border-bottom:1px solid var(--fvc-border); } .footer-nav a { font-size:.8rem; font-weight:600; color:var(--muted); text-decoration:none; transition:color .15s; } .footer-nav a:hover { color:var(--green); } .footer-legal { display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:center; max-width:1180px; margin:0 auto 12px; } .footer-legal a { font-size:.76rem; color:var(--muted); text-decoration:none; transition:color .15s; } .footer-legal a:hover { color:var(--green); text-decoration:underline; } /* ── Community leaderboard (footer) ───────────────────────────────────────── */ .fvc-lb { max-width:520px; margin:0 auto 22px; padding:16px 18px 14px; border:1px solid var(--glass-b); border-radius:14px; background:linear-gradient(180deg, rgba(123,178,144,.06), rgba(10,15,11,.2)); } /* In the Evidence popup the leaderboard follows the "Bottom line" box with no gap → they stuck together. Add clear top spacing (footer leaderboard keeps margin-top:0). */ .fvc-lb-ev { margin-top:26px; } /* Standalone leaderboard slot between the Statistics box and the Smaller-tests box. */ .ev3-lb-slot { margin:24px 0; } /* Schluss-Rhythmus vereinheitlicht auf 24 (war 30/32, Rhythmus-Pass 2026-07-16) */ .fvc-lb-h { font-size:.92rem; font-weight:800; color:var(--text); margin-bottom:12px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; } .fvc-lb-sub { font-size:.66rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--dim); } .fvc-lb-loading { list-style:none; padding:8px 10px; color:var(--dim); font-size:.84rem; } .fvc-lb-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; } .fvc-lb-row { padding:8px 10px; border-radius:10px; font-size:.86rem; } .fvc-lb-main { display:flex; align-items:center; gap:10px; } .fvc-lb-click > .fvc-lb-main { cursor:pointer; } .fvc-lb-click > .fvc-lb-main::after { content:'▾'; flex:0 0 auto; color:var(--dim); font-size:.7rem; transition:transform .15s; } .fvc-lb-row.open > .fvc-lb-main::after { transform:rotate(180deg); } .fvc-lb-top3 { display:flex; flex-wrap:wrap; gap:5px 14px; padding:9px 0 3px 38px; } /* The `hidden` attribute (JS collapses ranks #4+) must beat display:flex above — else every row's stocks stay visible (operator: "immer schon ausgeklappt"). */ .fvc-lb-top3[hidden] { display:none; } .fvc-lb-h3 { font-size:.74rem; color:var(--muted); font-variant-numeric:tabular-nums; background:none; border:1px solid var(--fvc-border,rgba(var(--on-rgb),.10)); border-radius:6px; padding:3px 8px; cursor:pointer; font-family:inherit; transition:border-color .15s,background .15s; } .fvc-lb-h3:hover { border-color:var(--fvc-green,#7BB290); background:rgba(123,178,144,.08); } .fvc-lb-h3 b { color:var(--text); font-weight:700; } .fvc-lb-h3 .pos { color:var(--green,#7BB290); } .fvc-lb-h3 .neg { color:#e08a8a; } .fvc-lb-row:nth-child(odd) { background:rgba(var(--on-rgb),.025); } .fvc-lb-top { background:rgba(123,178,144,.10) !important; } .fvc-lb-rank { flex:0 0 28px; text-align:center; font-weight:800; font-size:1rem; color:var(--muted); } .fvc-lb-nick { flex:1 1 auto; min-width:0; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .fvc-lb-hold { flex:0 0 auto; font-size:.72rem; color:var(--dim); white-space:nowrap; } .fvc-lb-ret { flex:0 0 auto; font-weight:800; font-variant-numeric:tabular-nums; min-width:62px; text-align:right; } .fvc-lb-ret.pos { color:var(--green,#7BB290); } .fvc-lb-ret.neg { color:#e08a8a; } .fvc-lb-foot { margin-top:11px; font-size:.7rem; color:var(--dim); text-align:center; } @media (max-width:520px){ .fvc-lb-hold { display:none; } } /* ── Hero stats panel ── */ .hero-stats { display:flex;flex-wrap:wrap;gap:10px;justify-content:center; margin-top:36px; } .hero-stat { background:var(--glass);border:1px solid var(--glass-b);border-radius:var(--r); padding:14px 22px;min-width:130px;text-align:center; } .hero-stat-val { font-size:1.4rem;font-weight:700;line-height:1;margin-bottom:4px; background:linear-gradient(135deg,var(--text) 0%,var(--green) 100%); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; } .hero-stat-label { font-size:.64rem;color:var(--dim);letter-spacing:.1em;text-transform:uppercase; } /* ── How it works section ── */ .hiw-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px;margin-top:28px; } .hiw-card { background:var(--glass);border:1px solid var(--glass-b);border-radius:var(--r); padding:20px 22px; transition:border-color .2s; } .hiw-card:hover { border-color:var(--green-b); } .hiw-icon { font-size:1.5rem;margin-bottom:10px;line-height:1; } .hiw-title { font-size:.85rem;font-weight:700;color:var(--green);margin-bottom:6px; } .hiw-weight { display:inline-block;font-size:.6rem;font-weight:600; background:var(--green-d);color:var(--green);border:1px solid var(--green-b); border-radius:var(--r-pill);padding:2px 8px;margin-bottom:8px; letter-spacing:.08em;text-transform:uppercase; } .hiw-desc { font-size:.77rem;color:var(--muted);line-height:1.6; } .hiw-note { margin-top:20px;text-align:center;font-size:.73rem;color:var(--dim); } /* ── Transparency panel ── */ .tp-panel { background:var(--glass);border:1px solid var(--glass-b);border-radius:var(--r); padding:24px 28px; } .tp-title { font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--green);margin-bottom:14px;padding-bottom:8px; border-bottom:1px solid var(--glass-b); } .tp-row { display:flex;gap:14px;align-items:flex-start; padding:7px 0;border-bottom:1px solid rgba(var(--on-rgb),.03); font-size:.8rem; } .tp-row:last-child { border-bottom:none; } .tp-dot { width:6px;height:6px;border-radius:50%;background:var(--green); flex-shrink:0;margin-top:6px; } .tp-text { color:var(--muted);line-height:1.6; } .tp-text strong { color:var(--text);font-weight:600; } /* ── Modal raw financials ── */ .fin-grid { display:grid;grid-template-columns:1fr 1fr;gap:4px 20px;margin-top:2px; } .fin-item { display:flex;justify-content:space-between;align-items:center; font-size:.77rem;padding:3px 0;border-bottom:1px solid rgba(var(--on-rgb),.03); } .fin-label { color:var(--dim); } .fin-val { color:var(--text);font-weight:500;font-variant-numeric:tabular-nums; } /* ── Modal warning / missing ── */ .modal-missing { background:rgba(var(--on-rgb),.04);border:1px solid rgba(var(--on-rgb),.08); border-radius:var(--r-sm);padding:10px 14px;margin:4px 0; font-size:.78rem;color:var(--dim); } /* ── Filter bar ── */ .filter-bar { background:var(--glass);border:1px solid var(--glass-b);border-radius:var(--r); padding:16px 20px;margin-bottom:20px; } .filter-row { display:flex;flex-wrap:wrap;gap:10px;align-items:center; } .filter-select, .filter-input { background:rgba(var(--on-rgb),.06);border:1px solid var(--glass-b); border-radius:var(--r-sm);color:var(--text); font-family:inherit;font-size:.78rem;padding:7px 12px; cursor:pointer;min-width:130px; appearance:none;-webkit-appearance:none; } .filter-select:focus, .filter-input:focus { outline:none;border-color:var(--green-b); } .filter-input { min-width:160px; } .filter-input::placeholder { color:var(--dim); } .filter-btn { display:inline-flex;align-items:center;gap:5px; padding:7px 16px;border-radius:var(--r-pill); font-family:inherit;font-size:.78rem;font-weight:600; cursor:pointer;border:none;transition:background .18s; } .filter-btn.apply { background:var(--green);color:#0a1a10; } .filter-btn.apply:hover { background:var(--green2); } .filter-btn.universe { background:var(--glass);color:var(--muted); border:1px solid var(--glass-b); } .filter-btn.universe:hover { background:rgba(var(--on-rgb),.09); } .filter-label { font-size:.68rem;color:var(--dim); display:block;margin-bottom:2px;letter-spacing:.06em;text-transform:uppercase; } .filter-group { display:flex;flex-direction:column;gap:2px; } .filter-row-sources { margin-top:10px;padding-top:10px; border-top:1px solid var(--glass-b); } .filter-hint { font-size:.66rem;color:var(--dim);margin-top:8px; font-style:italic; } /* ── Universe modal ── */ .univ-modal { background:var(--surface);border:1px solid var(--glass-b);border-radius:var(--r); width:100%;max-width:680px;max-height:88vh;max-height:88dvh;overflow-y:auto; padding:28px;position:relative; box-shadow:0 24px 70px rgba(0,0,0,.55); transform:translateY(12px);transition:transform .25s; } .modal-overlay.open .univ-modal { transform:translateY(0); } .univ-stat-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px;margin:16px 0; } .univ-stat-card { background:var(--glass);border:1px solid var(--glass-b);border-radius:var(--r-sm); padding:14px 16px; } .univ-stat-val { font-size:1.3rem;font-weight:700; background:linear-gradient(135deg,var(--text) 0%,var(--green) 100%); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; margin-bottom:4px; } .univ-stat-label { font-size:.65rem;color:var(--dim);letter-spacing:.08em;text-transform:uppercase; } .univ-progress-wrap { margin:16px 0; } .univ-progress-label { display:flex;justify-content:space-between; font-size:.75rem;color:var(--muted);margin-bottom:6px; } .univ-progress-bar { height:8px;background:rgba(var(--on-rgb),.06);border-radius:4px;overflow:hidden; } .univ-progress-fill { height:100%;border-radius:4px; background:linear-gradient(90deg,var(--green) 0%,var(--green2) 100%); transition:width .6s ease; } .univ-breakdown-grid { display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:12px 0; } .univ-breakdown-row { display:flex;justify-content:space-between; font-size:.78rem;padding:5px 10px; background:var(--glass);border-radius:6px; } .univ-breakdown-label { color:var(--muted); } .univ-breakdown-val { font-weight:600;color:var(--text); } /* ── Badges ── */ .badge { display:inline-flex;align-items:center;gap:3px; padding:2px 8px;border-radius:var(--r-pill); font-size:.62rem;font-weight:600;letter-spacing:.04em; text-transform:uppercase; } .badge-green { background:rgba(123,178,144,.18);color:var(--green); border:1px solid var(--green-b); } .badge-amber { background:rgba(240,160,84,.12); color:var(--amber); border:1px solid rgba(240,160,84,.25); } .badge-red { background:rgba(224,95,95,.12); color:var(--red); border:1px solid rgba(224,95,95,.25); } .badge-blue { background:rgba(100,160,240,.10);color:#90b8f0; border:1px solid rgba(100,160,240,.2); } .badge-dim { background:var(--glass);color:var(--dim); border:1px solid var(--glass-b); } .card-badges { display:flex;flex-wrap:wrap;gap:4px;margin-top:6px; } /* ── Factor family row ── */ .fam-grid { display:flex;flex-direction:column;gap:6px;margin-top:10px; } /* Unified quality list: family group headers + per-factor research basis */ .qf-fam { font-size:.86rem;font-weight:700;color:var(--text);margin:28px 0 11px;letter-spacing:.01em; } /* larger sub-headings + more air above/below (operator 2026-07-09) */ .qf-item { display:flex;flex-direction:column;gap:1px; } .qf-item + .qf-item { margin-top:0; } /* Extra-Luft war fuer die Studienzeile darunter; seit die in der Erklaerblase steckt (2026-08-01), gilt derselbe 6px-Rhythmus wie bei KI-Qualitaet & Co. */ .qf-study { font-size:.62rem;color:var(--dim);line-height:1.35;padding-left:2px;margin-top:1px; } /* Prominent Quality Score header (operator): big colour-coded number. */ .qf-scorehead { display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px; } .qf-scorehead-lbl { font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--dim); } .qf-scorehead-val { font-size:2.1rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums; } .qf-scorehead-max { font-size:.95rem;font-weight:600;color:var(--dim); } .fam-row { display:grid;grid-template-columns:150px 1fr 42px;align-items:center;gap:14px; /* more air between the label and the bar so bars don't hug the text (operator 2026-07-09) */ font-size:.73rem; } /* Label shrinks to its own text so the dotted tooltip underline only spans the WORDS, not the whole 150px column up to the bar (operator 2026-07-09). */ .fam-row .fam-name { justify-self:start; } .fam-bar-wrap { background:rgba(var(--on-rgb),.06);border-radius:var(--r-pill);height:5px;overflow:hidden;margin-left:2px; } .fam-bar-fill { height:100%;border-radius:var(--r-pill);background:var(--green);transition:width .3s;min-width:7px; } .fam-score { text-align:right;font-weight:600;font-size:.73rem; } .fam-missing { color:var(--dim);font-style:italic; } /* Tap-to-explain on a quality-factor name (opens an .mv-pop bubble via fvcInfoPop). */ .fam-name-x { position:relative; cursor:pointer; } .fam-name-x:hover, .fam-name-x:focus-visible { color:var(--text); outline:none; } .fam-i { opacity:.45; font-size:.85em; } .fam-name-x:hover .fam-i, .fam-name-x:focus-visible .fam-i { opacity:.95; } /* ── Source confidence bar ── */ .src-conf-bar { display:flex;align-items:center;gap:8px;font-size:.72rem;margin-top:4px; } .src-conf-fill { flex:1;background:rgba(var(--on-rgb),.06);border-radius:var(--r-pill);height:4px;overflow:hidden; } .src-conf-inner { height:100%;border-radius:var(--r-pill);transition:width .3s; } /* ── Alpha factor audit table ── */ .factor-audit { width:100%;border-collapse:collapse;font-size:.72rem;margin-top:8px; } .factor-audit th { text-align:left;padding:4px 8px;color:var(--dim); font-weight:500;font-size:.65rem;text-transform:uppercase;letter-spacing:.05em; border-bottom:1px solid var(--glass-b); } .factor-audit td { padding:5px 8px;border-bottom:1px solid rgba(var(--on-rgb),.04);vertical-align:top; } .factor-audit tr.factor-missing td { color:var(--dim);font-style:italic; } .factor-audit tr.factor-ok td:first-child { color:var(--text); } .factor-audit .fa-score { font-weight:700; } .factor-audit .fa-basis { color:var(--dim);font-size:.65rem; } /* ── Reconciliation event row ── */ .recon-events { display:flex;flex-direction:column;gap:4px;margin-top:6px; } .recon-event { padding:6px 10px;border-radius:8px;font-size:.72rem; border-left:3px solid; } .recon-event.error { background:rgba(224,95,95,.08); border-color:var(--red); color:var(--text); } .recon-event.warning { background:rgba(240,160,84,.08);border-color:var(--amber); color:var(--text); } .recon-event.info { background:var(--glass); border-color:var(--green-b);color:var(--muted); } /* ── Data mode badge on card ── */ .card-mode-evidence { color:var(--green); font-size:.64rem;font-weight:600; } .card-mode-momentum { color:var(--amber); font-size:.64rem;font-weight:600; } /* ── Stats panel – new layout ── */ .stats-panel { display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px;margin-top:24px; } .stat-card { background:var(--glass);border:1px solid var(--glass-b);border-radius:var(--r-sm); padding:14px 16px;text-align:center; } .stat-card-val { font-size:1.5rem;font-weight:700;color:var(--green);line-height:1.1; } .stat-card-label { font-size:.67rem;color:var(--dim);margin-top:3px;text-transform:uppercase;letter-spacing:.05em; } .stat-card-note { font-size:.62rem;color:var(--dim);margin-top:2px;font-style:italic; } /* ── Responsive ── */ @media (max-width:640px) { .hero { padding:48px 16px 40px; } .section { padding:40px 16px; } .stock-card { padding:18px; } .card-top { flex-direction:column;gap:4px; } .card-score-wrap { display:flex;align-items:center;gap:10px; } .card-score { font-size:1.5rem; } .fb-row { grid-template-columns:90px 1fr 30px; } .footer-inner { flex-direction:column; align-items:flex-start; gap:3px; } } /* ── Fair Value Model Stack ── */ .fv-consensus { background:rgba(123,178,144,.08);border:1px solid rgba(123,178,144,.2); border-radius:8px;padding:18px 16px;margin:8px 0 14px; } /* Three fair values, larger with breathing room. When it must wrap (narrow): Bear top-left, Bull top-right, Fair Value centered on the line below (operator). */ /* One line on every width — Bear · Fair Value · Bull. Fonts scale with the screen (clamp) so all three stay on a single line even on a narrow iPhone, with the Fair Value kept the prominent one (operator). */ .fv-range-row { display:flex;align-items:baseline;justify-content:space-between;gap:6px;flex-wrap:nowrap;font-size:clamp(.72rem,3.2vw,.95rem);margin-bottom:0; } .fv-range-row .fv-bear { text-align:left;white-space:nowrap; } .fv-range-row .fv-bull { text-align:right;white-space:nowrap; } .fv-range-row .fv-base { text-align:center;white-space:nowrap;font-size:clamp(.82rem,3.7vw,1.12rem);font-weight:600; } .fv-range-row strong { font-weight:800; } .fv-bear { color:var(--red); } .fv-bull { color:var(--green); } @media (min-width:560px) { .fv-range-row { justify-content:space-evenly; } } /* Single centered score inside a .fv-consensus box (Quality Score / AI Quality) — same green box and same value size as the Fair Value headline, score colour-coded. */ .fv-scorebox { text-align:center;font-size:clamp(.82rem,3.7vw,1.12rem);font-weight:600;line-height:1.2; } .fv-scorebox strong { font-weight:800; } .fv-scorebox-sub { text-align:center;font-size:.74rem;color:var(--muted);margin-top:5px; } .fv-scorebox-sub b { font-weight:800; } /* Centred, colour-coded sentence inside a .fv-consensus box (Revenue/Growth verdict). */ .fv-boxsentence { text-align:center;font-size:.88rem;font-weight:600;line-height:1.45; } /* Extra-long combined value string (e.g. high-priced stocks) → shrink the row a notch so Bear · Fair Value · Bull still never collide (operator). */ .fv-range-row--tight { font-size:clamp(.62rem,2.7vw,.82rem); } .fv-range-row--tight .fv-base { font-size:clamp(.68rem,3vw,.92rem); } .fv-meta { font-size:.72rem;color:var(--dim);margin-top:4px; } .fv-note { font-size:.65rem;color:var(--dim);margin:6px 0 0;line-height:1.5; } .fv-table { margin:8px 0; } .fv-table-header,.fv-model-row { /* Bear·Base·Bull each get their OWN equal column so the values line up VERTICALLY across rows (a flex group staggered them). Headers + values are centred in each column; the value block keeps a clear gap to the Evidence badge (narrowed to what its 0–100 score needs). Value font is fluid so long numbers (e.g. Korean won in thousands) stay on one line on phones. (operator 2026-07-09) */ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) 48px;align-items:center; gap:13px;padding:3px 0;border-bottom:1px solid rgba(var(--on-rgb),.04); } .fv-family-group { margin-bottom:8px; } .fv-family-label { font-size:.65rem;text-transform:uppercase;letter-spacing:.07em;color:var(--dim);padding:6px 0 2px;border-bottom:1px solid rgba(var(--on-rgb),.08); } .fv-model-name { font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;justify-self:start;max-width:100%; } /* justify-self:start → the dotted tooltip underline hugs the model name, not the whole column up to the numbers (operator 2026-07-09) */ /* Bear · Base · Bull spread across the column (space-between) so they sit further apart and leave room for the wider "Evidence" header (operator). */ /* 3 equal columns → Bear·Base·Bull align vertically down the table; centred so each value sits under its centred header; 10px between them; fluid font so long values never wrap or collide on small screens. */ .fv-model-vals { display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;font-size:clamp(.61rem,2.2vw,.72rem);font-family:monospace;font-variant-numeric:tabular-nums; } .fv-bear-val { color:var(--red);text-align:center;white-space:nowrap;min-width:0; } .fv-base-val { text-align:center;white-space:nowrap;min-width:0; } .fv-bull-val { color:var(--green);text-align:center;white-space:nowrap;min-width:0; } .fv-conf { font-size:.66rem;text-align:center;border-radius:4px;padding:1px 4px; } .fv-conf-hi { background:rgba(123,178,144,.18);color:var(--green); } .fv-conf-med { background:rgba(240,160,84,.15);color:var(--amber); } .fv-conf-lo { background:rgba(var(--on-rgb),.07);color:var(--dim); } .fv-skipped { margin-top:8px;border-radius:6px;background:rgba(var(--on-rgb),.04);padding:6px 8px; } /* ══════════════════════════════════════════════════════════════════════════════ DATA COMMAND CENTER ══════════════════════════════════════════════════════════════════════════════ */ /* ── Command Center shell ── */ .cc-section { background:rgba(var(--on-rgb),.025); border:1px solid rgba(123,178,144,.15); border-radius:var(--r); padding:28px 28px 24px; margin:0 0 32px; } .cc-terminal-header { display:flex;align-items:center;gap:10px; font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--green);margin-bottom:22px; } .cc-terminal-header::before { content:'';display:inline-block;width:8px;height:8px;border-radius:50%; background:var(--green);box-shadow:0 0 6px var(--green); animation:ccBlink 2.4s ease-in-out infinite; } @keyframes ccBlink { 0%,100%{opacity:1} 50%{opacity:.3} } /* ── 6-col metric grid ── */ .cc-metrics { display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:20px; } .cc-metric { background:rgba(var(--on-rgb),.04);border:1px solid rgba(var(--on-rgb),.08); border-radius:var(--r-sm);padding:14px 16px; } .cc-metric-val { font-size:1.4rem;font-weight:700;color:var(--green);line-height:1.1; } .cc-metric-label { font-size:.62rem;color:var(--dim);margin-top:3px;text-transform:uppercase;letter-spacing:.06em; } .cc-metric-note { font-size:.6rem;color:var(--dim);margin-top:2px;font-style:italic;opacity:.75; } /* ── Two-panel row (pipeline + activity) ── */ .cc-panels { display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:4px; } .cc-panel { background:rgba(var(--on-rgb),.04);border:1px solid rgba(var(--on-rgb),.08); border-radius:var(--r-sm);padding:14px 16px; } .cc-panel-title { font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em; color:var(--muted);margin-bottom:10px; } .cc-row { display:flex;justify-content:space-between;align-items:baseline;padding:3px 0;font-size:.78rem; } .cc-row + .cc-row { border-top:1px solid rgba(var(--on-rgb),.04); } .cc-row-key { color:var(--muted);flex-shrink:0; } .cc-row-val { color:var(--text);text-align:right;margin-left:8px;word-break:break-all; } /* ── Progress bar ── */ .cc-progress-wrap { margin:10px 0 12px; } .cc-progress-track { background:rgba(var(--on-rgb),.07);border-radius:4px;height:6px; overflow:hidden;position:relative; } .cc-progress-fill { height:100%;border-radius:4px;background:var(--green); transition:width .6s ease; } /* ── Status chips ── */ .cc-chip { display:inline-block;font-size:.62rem;font-weight:600; padding:1px 6px;border-radius:4px;vertical-align:middle; } .cc-chip-green { background:rgba(123,178,144,.18);color:var(--green); } .cc-chip-amber { background:rgba(240,160,84,.15);color:var(--amber); } .cc-chip-red { background:rgba(224,95,95,.12);color:var(--red); } .cc-chip-blue { background:rgba(100,160,220,.12);color:#7ab0e0; } .cc-chip-dim { background:rgba(var(--on-rgb),.06);color:var(--dim); } /* ── Inline status dot ── */ .cc-dot { display:inline-block;width:6px;height:6px;border-radius:50%; vertical-align:middle;margin-right:4px; } .cc-dot-green { background:var(--green); } .cc-dot-amber { background:var(--amber); } .cc-dot-red { background:var(--red); } .cc-dot-dim { background:var(--dim); } /* ══════════════════════════════════════════════════════════════════════════════ SOURCE STATUS MATRIX ══════════════════════════════════════════════════════════════════════════════ */ .src-matrix-section { margin:0 0 32px; } .src-matrix-section .section-hdr { margin-bottom:4px; } .src-group { margin-bottom:20px; } .src-group-header { display:flex;align-items:center;gap:10px;padding:8px 0; cursor:pointer;user-select:none;border-bottom:1px solid rgba(var(--on-rgb),.07); margin-bottom:10px; } .src-group-header:hover .src-group-title { color:var(--text); } .src-group-title { font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em; color:var(--muted);transition:color .15s; } .src-group-count { font-size:.65rem;color:var(--dim); background:rgba(var(--on-rgb),.06);border-radius:10px;padding:1px 7px; } .src-group-toggle { font-size:.75rem;color:var(--dim);margin-left:auto; } .src-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px; } .src-card { background:rgba(var(--on-rgb),.03);border:1px solid rgba(var(--on-rgb),.07); border-left:3px solid transparent;border-radius:var(--r-sm); padding:10px 12px;position:relative; } .src-card-active { border-left-color:var(--green); } .src-card-discovery_ready{ border-left-color:var(--amber); } .src-card-not_configured { border-left-color:rgba(var(--on-rgb),.2); } .src-card-cooldown { border-left-color:var(--red); } .src-card-planned { border-left-color:rgba(var(--on-rgb),.1); opacity:.6; } .src-card-name { font-size:.75rem;font-weight:600;color:var(--text);line-height:1.3; } .src-card-key { font-size:.6rem;color:var(--dim);font-family:monospace;margin-top:1px; } .src-card-status { display:inline-block;font-size:.58rem;font-weight:700;text-transform:uppercase; letter-spacing:.06em;padding:1px 5px;border-radius:3px;margin-top:5px; } .src-status-active { background:rgba(123,178,144,.15);color:var(--green); } .src-status-discovery_ready { background:rgba(240,160,84,.13);color:var(--amber); } .src-status-not_configured { background:rgba(var(--on-rgb),.07);color:var(--dim); } .src-status-cooldown { background:rgba(224,95,95,.12);color:var(--red); } .src-status-planned { background:rgba(var(--on-rgb),.05);color:var(--dim); } .src-role-pill { display:inline-block;font-size:.58rem;text-transform:uppercase;letter-spacing:.05em; padding:0px 5px;border-radius:3px;margin-left:4px;vertical-align:middle; border:1px solid rgba(var(--on-rgb),.1);color:var(--dim); } .src-role-filing { border-color:rgba(123,178,144,.3);color:rgba(123,178,144,.8); } .src-role-prices { border-color:rgba(100,180,240,.3);color:rgba(100,180,240,.8); } .src-role-identity { border-color:rgba(200,160,80,.3);color:rgba(200,160,80,.8); } .src-role-universe { border-color:rgba(160,120,220,.3);color:rgba(160,120,220,.8); } .src-role-macro { border-color:rgba(200,100,100,.3);color:rgba(200,100,100,.8); } .src-role-validator { border-color:rgba(180,180,180,.3);color:rgba(180,180,180,.8); } /* ── Source group body collapse ── */ .src-group-body.collapsed { display:none; } /* ══════════════════════════════════════════════════════════════════════════════ CROSS-VALIDATION PANEL ══════════════════════════════════════════════════════════════════════════════ */ .val-section { margin:0 0 32px; } .val-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px; } .val-card { background:rgba(var(--on-rgb),.04);border:1px solid rgba(var(--on-rgb),.08); border-radius:var(--r-sm);padding:12px 14px; } .val-num { font-size:1.3rem;font-weight:700;color:var(--green); } .val-label { font-size:.63rem;color:var(--dim);margin-top:2px;text-transform:uppercase;letter-spacing:.06em; } .val-bar-wrap { margin-top:7px;height:4px;background:rgba(var(--on-rgb),.07);border-radius:2px;overflow:hidden; } .val-bar-fill { height:100%;background:var(--green);border-radius:2px; } /* ── Automatic updates + history panels ── */ .au-panel { display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:32px; } .au-card { background:rgba(var(--on-rgb),.025);border:1px solid rgba(var(--on-rgb),.08); border-radius:var(--r-sm);padding:16px 18px; } .au-card-title { font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em; color:var(--muted);margin-bottom:10px; } /* ── Responsive overrides ── */ @media (max-width:900px) { .cc-metrics { grid-template-columns:repeat(3,1fr); } .cc-panels { grid-template-columns:1fr; } .au-panel { grid-template-columns:1fr; } } @media (max-width:540px) { .cc-section { padding:18px 16px; } .cc-metrics { grid-template-columns:repeat(2,1fr); } .src-grid { grid-template-columns:1fr 1fr; } .val-grid { grid-template-columns:repeat(2,1fr); } } /* ══════════════════════════════════════════════════════════════════════════════ API KEY CENTER ══════════════════════════════════════════════════════════════════════════════ */ .akc-table { width:100%;border-collapse:collapse;font-size:.78rem; } .akc-table th { text-align:left;font-size:.63rem;font-weight:700;text-transform:uppercase; letter-spacing:.08em;color:var(--dim);padding:6px 10px; border-bottom:1px solid rgba(var(--on-rgb),.1); background:rgba(var(--on-rgb),.03); } .akc-table td { padding:9px 10px;border-bottom:1px solid rgba(var(--on-rgb),.05); vertical-align:top; } .akc-table tr:hover td { background:rgba(var(--on-rgb),.025); } /* Key status badges */ .akc-badge { display:inline-flex;align-items:center;gap:4px; font-size:.62rem;font-weight:700;padding:2px 7px;border-radius:4px; white-space:nowrap; } .akc-badge-ok { background:rgba(123,178,144,.18);color:var(--green); } .akc-badge-missing { background:rgba(240,160,84,.15);color:var(--amber); } .akc-badge-nokey { background:rgba(123,178,144,.1);color:rgba(123,178,144,.7); } .akc-badge-upgrade { background:rgba(100,160,220,.12);color:#7ab0e0; } .akc-badge-notrecom{ background:rgba(var(--on-rgb),.06);color:var(--dim); } .akc-badge-free { background:rgba(123,178,144,.1);color:rgba(123,178,144,.6);font-size:.58rem; } .akc-badge-nofree { background:rgba(224,95,95,.1);color:rgba(224,95,95,.7);font-size:.58rem; } /* Priority indicator */ .akc-pri { display:inline-block;font-size:.6rem;font-weight:700;text-transform:uppercase; letter-spacing:.06em;padding:1px 5px;border-radius:3px; } .akc-pri-critical { background:rgba(224,95,95,.18);color:var(--red); } .akc-pri-high { background:rgba(123,178,144,.18);color:var(--green); } .akc-pri-medium { background:rgba(240,160,84,.15);color:var(--amber); } .akc-pri-low { background:rgba(var(--on-rgb),.08);color:var(--muted); } .akc-pri-optional { background:rgba(var(--on-rgb),.05);color:var(--dim); } .akc-pri-notrecom { background:rgba(var(--on-rgb),.04);color:var(--dim); } .akc-action-link { color:var(--green);text-decoration:none;font-size:.72rem; } .akc-action-link:hover { text-decoration:underline; } .akc-source-name { font-weight:600;color:var(--text); } .akc-source-value { font-size:.7rem;color:var(--muted);margin-top:2px; } .akc-limit-note { font-size:.67rem;color:var(--dim); } .akc-action-text { font-size:.7rem;color:var(--muted);margin-top:3px; } /* Group header inside AKC */ .akc-group-hdr td { padding:10px 10px 4px;font-size:.63rem;font-weight:700;text-transform:uppercase; letter-spacing:.09em;color:var(--muted);border-bottom:none; background:rgba(var(--on-rgb),.02); } /* ══════════════════════════════════════════════════════════════════════════════ IMPROVED SOURCE STATUS MATRIX (status-grouped) ══════════════════════════════════════════════════════════════════════════════ */ .srm-summary { display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px; } .srm-summary-chip { display:flex;align-items:center;gap:6px;padding:6px 12px; background:rgba(var(--on-rgb),.04);border:1px solid rgba(var(--on-rgb),.08); border-radius:var(--r-sm);font-size:.72rem;cursor:pointer; transition:border-color .15s; } .srm-summary-chip:hover { border-color:rgba(var(--on-rgb),.2); } .srm-summary-chip-n { font-size:1.1rem;font-weight:700; } .srm-summary-chip-label { color:var(--muted);font-size:.65rem; } .srm-chip-active .srm-summary-chip-n { color:var(--green); } .srm-chip-discovery .srm-summary-chip-n { color:var(--amber); } .srm-chip-needs_key .srm-summary-chip-n { color:#7ab0e0; } .srm-chip-planned .srm-summary-chip-n { color:var(--dim); } .srm-status-group { margin-bottom:18px; } .srm-status-hdr { display:flex;align-items:center;gap:8px; padding:8px 0;border-bottom:1px solid rgba(var(--on-rgb),.07); margin-bottom:10px;cursor:pointer;user-select:none; } .srm-status-title { font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em; } .srm-status-count { font-size:.65rem;background:rgba(var(--on-rgb),.07); border-radius:10px;padding:1px 7px;color:var(--dim); } .srm-status-toggle { margin-left:auto;font-size:.75rem;color:var(--dim); } .srm-cards { display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px; } .srm-card { background:rgba(var(--on-rgb),.03);border:1px solid rgba(var(--on-rgb),.07); border-left:3px solid transparent;border-radius:var(--r-sm); padding:10px 12px; } .srm-card-active { border-left-color:var(--green); } .srm-card-discovery_ready{ border-left-color:var(--amber); } .srm-card-not_configured { border-left-color:#7ab0e0; } .srm-card-planned { border-left-color:rgba(var(--on-rgb),.1);opacity:.65; } .srm-card-cooldown { border-left-color:var(--red); } .srm-card-name { font-size:.75rem;font-weight:600;color:var(--text);line-height:1.3; } .srm-card-meta { font-size:.62rem;color:var(--dim);margin-top:3px;line-height:1.5; } .srm-card-key { font-size:.6rem;color:var(--dim);font-family:monospace; } .srm-body.collapsed { display:none; } /* Role pill in SRM */ .srm-role { display:inline-block;font-size:.57rem;text-transform:uppercase;letter-spacing:.05em; padding:0px 4px;border-radius:3px;border:1px solid rgba(var(--on-rgb),.1); color:var(--dim);vertical-align:middle;margin-top:2px; } .srm-role-filing { border-color:rgba(123,178,144,.3);color:rgba(123,178,144,.75); } .srm-role-prices { border-color:rgba(100,180,240,.3);color:rgba(100,180,240,.75); } .srm-role-identity { border-color:rgba(200,160,80,.3);color:rgba(200,160,80,.75); } .srm-role-universe { border-color:rgba(160,120,220,.3);color:rgba(160,120,220,.75); } .srm-role-macro { border-color:rgba(200,100,100,.3);color:rgba(200,100,100,.75); } .srm-role-optional { border-color:rgba(180,180,180,.2);color:rgba(180,180,180,.5); } @media (max-width:640px) { .akc-table th:nth-child(4), .akc-table td:nth-child(4) { display:none; } .srm-cards { grid-template-columns:1fr 1fr; } } /* ── Source Ingestion Matrix (sim-*) ─────────────────────────────────────── */ .sim-exec-bar { display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;padding:10px 0; border-bottom:1px solid rgba(var(--on-rgb),.06); } .sim-exec-metric { text-align:center;padding:6px 14px; } .sim-exec-n { display:block;font-size:1.2rem;font-weight:700;line-height:1.2; } .sim-exec-lbl { display:block;font-size:.6rem;color:var(--dim);text-transform:uppercase;letter-spacing:.06em;margin-top:2px; } .sim-status-group { margin-bottom:6px;border-radius:8px;border:1px solid rgba(var(--on-rgb),.05);overflow:hidden; } .sim-status-hdr { display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer; background:rgba(var(--on-rgb),.03);user-select:none; } .sim-status-hdr:hover { background:rgba(var(--on-rgb),.06); } .sim-status-dot { width:7px;height:7px;border-radius:50%;flex-shrink:0; } .sim-status-title { font-size:.72rem;font-weight:600;flex:1; } .sim-status-count { font-size:.65rem;color:var(--dim);background:rgba(var(--on-rgb),.07);border-radius:var(--r-pill);padding:1px 7px; } .sim-status-toggle{ font-size:.65rem;color:var(--dim); } .sim-body { padding:10px; } .sim-body.collapsed { display:none; } .sim-cards { display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px; } .sim-card { background:rgba(var(--on-rgb),.04);border-radius:6px; border-left:3px solid rgba(var(--on-rgb),.08);padding:8px 10px; } .sim-card-used_in_scoring { border-left-color:var(--green); } .sim-card-ingested { border-left-color:#4caf8a; } .sim-card-discovered { border-left-color:var(--amber); } .sim-card-discovery_ready { border-left-color:#e0b040; } .sim-card-needs_api_key { border-left-color:#7ab0e0; } .sim-card-cooldown { border-left-color:var(--red); } .sim-card-discovery_failed,.sim-card-ingestion_failed { border-left-color:#c06060;opacity:.8; } .sim-card-planned { border-left-color:rgba(var(--on-rgb),.1);opacity:.6; } .sim-card-name { font-size:.72rem;font-weight:600;color:var(--text);line-height:1.3;margin-bottom:3px; } .sim-card-info { font-size:.6rem;color:var(--dim);margin-bottom:3px; } .sim-cat { display:inline-block;font-size:.55rem;padding:0px 4px;border-radius:3px;border:1px solid rgba(var(--on-rgb),.08);margin-left:4px; } .sim-cat-filing_fundamental { border-color:rgba(123,178,144,.25);color:rgba(123,178,144,.7); } .sim-cat-exchange_universe { border-color:rgba(160,120,220,.25);color:rgba(160,120,220,.7); } .sim-cat-identity { border-color:rgba(200,160,80,.25);color:rgba(200,160,80,.7); } .sim-cat-price { border-color:rgba(100,180,240,.25);color:rgba(100,180,240,.7); } .sim-cat-macro { border-color:rgba(200,100,100,.25);color:rgba(200,100,100,.7); } .sim-cat-validator{ border-color:rgba(180,180,180,.15);color:rgba(180,180,180,.5); } .sim-region { margin-right:4px; } .sim-card-metrics { font-size:.62rem;color:var(--muted);margin-top:4px;line-height:1.6; } .sim-card-error { font-size:.6rem;color:#c06060;margin-top:4px;line-height:1.4; } /* ── Database Coverage (dc-*) ────────────────────────────────────────────── */ .dc-exec-row { display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px; padding-bottom:12px;border-bottom:1px solid rgba(var(--on-rgb),.06); } .dc-exec-card { flex:1 1 120px;padding:10px 14px;background:rgba(var(--on-rgb),.04); border-radius:8px;text-align:center; } .dc-exec-val { font-size:1.15rem;font-weight:700;line-height:1.2; } .dc-exec-lbl { font-size:.6rem;color:var(--dim);text-transform:uppercase;letter-spacing:.05em;margin-top:3px; } .dc-progress { margin-bottom:12px; } .dc-progress-label { display:flex;justify-content:space-between;font-size:.68rem;margin-bottom:6px;color:var(--muted); } .dc-bar-wrap { height:6px;background:rgba(var(--on-rgb),.07);border-radius:3px;overflow:hidden;position:relative; } .dc-bar { height:100%;border-radius:3px;transition:width .6s ease; } .dc-bar-pending { position:absolute;top:0;right:0;height:100%;background:rgba(var(--on-rgb),.04); } .dc-multi-row { display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px; } .dc-multi-item { text-align:center;padding:6px 12px; } .dc-multi-n { font-size:1rem;font-weight:700;line-height:1.2; } .dc-multi-lbl { font-size:.6rem;color:var(--dim);margin-top:2px; } .dc-raw-section { margin-top:12px; } .dc-raw-table { width:100%;border-collapse:collapse;font-size:.68rem;margin-top:6px; } .dc-raw-table th { padding:5px 8px;text-align:left;font-size:.6rem;text-transform:uppercase;letter-spacing:.05em; color:var(--dim);border-bottom:1px solid rgba(var(--on-rgb),.06); } .dc-raw-table td { padding:4px 8px;border-bottom:1px solid rgba(var(--on-rgb),.04); } .dc-raw-table tr:hover td { background:rgba(var(--on-rgb),.03); } .dc-run-summary { display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px;padding:8px 10px; background:rgba(var(--on-rgb),.04);border-radius:6px;font-size:.68rem;color:var(--muted); border-left:3px solid var(--green); } .dc-run-label { color:var(--dim);font-size:.6rem;text-transform:uppercase;letter-spacing:.05em; } .dc-empty { padding:16px;font-size:.8rem;color:var(--dim); } @media (max-width:640px) { .sim-cards { grid-template-columns:1fr 1fr; } .dc-exec-row { gap:6px; } .dc-multi-row { gap:6px; } } /* ══════════════════════════════════════════════════════════════════════════════ DATA COMMAND CENTER — new layout ══════════════════════════════════════════════════════════════════════════════ */ /* ── DCC grid + stat cards ── */ .dcc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin:12px 0; } .dcc-card { background:rgba(var(--on-rgb),.04);border:1px solid rgba(var(--on-rgb),.08); border-radius:var(--r-sm);padding:12px 14px; } .dcc-val { font-size:1.45rem;font-weight:700;color:var(--green);line-height:1.1; } .dcc-label { font-size:.62rem;color:var(--dim);margin-top:3px;text-transform:uppercase;letter-spacing:.06em; } .dcc-note { font-size:.6rem;color:var(--dim);margin-top:2px;font-style:italic;opacity:.8; } /* ── DCC progress bar ── */ .dcc-progress-wrap { margin:10px 0; } .dcc-progress-labels { display:flex;justify-content:space-between; font-size:.68rem;color:var(--muted);margin-bottom:4px; } .dcc-progress-track { height:6px;background:rgba(var(--on-rgb),.07);border-radius:4px;overflow:hidden; } .dcc-progress-fill { height:100%;border-radius:4px; background:linear-gradient(90deg,var(--green) 0%,var(--green2) 100%); transition:width .6s ease; } /* ── DCC status line ── */ .dcc-status-line { display:flex;align-items:center;gap:6px; font-size:.75rem;margin-bottom:12px; } /* ── DCC warning banner ── */ .dcc-warning { font-size:.73rem;color:var(--amber);background:rgba(240,160,84,.07); border:1px solid rgba(240,160,84,.2);border-radius:var(--r-sm); padding:7px 12px;margin:6px 0; } .dcc-warning code { font-family:monospace;font-size:.7rem;opacity:.85; } /* ── DCC next action panel ── */ .dcc-next-action { background:rgba(123,178,144,.06);border:1px solid rgba(123,178,144,.15); border-radius:var(--r-sm);padding:10px 14px;margin-top:10px; } .dcc-next-title { font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin-bottom:5px; } .dcc-next-primary { font-size:.8rem;color:var(--text);font-weight:500; } .dcc-next-secondary{ font-size:.72rem;color:var(--dim);margin-top:3px; } /* ══════════════════════════════════════════════════════════════════════════════ SOURCE BUCKETS ══════════════════════════════════════════════════════════════════════════════ */ /* ── Summary chip row ── */ .src-bkts-summary { display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px; } .src-bkt-chip { display:flex;align-items:center;gap:5px; background:rgba(var(--on-rgb),.05);border:1px solid rgba(var(--on-rgb),.1); border-radius:var(--r-pill);padding:4px 12px; font-size:.72rem;cursor:pointer;transition:background .15s; } .src-bkt-chip:hover { background:rgba(var(--on-rgb),.09); } .src-bkt-chip-n { font-weight:700;font-size:.85rem; } .src-bkt-chip-lbl { color:var(--muted); } /* ── Bucket group ── */ .src-bkt-group { margin-bottom:8px;border:1px solid rgba(var(--on-rgb),.06);border-radius:var(--r-sm);overflow:hidden; } .src-bkt-hdr { display:flex;align-items:center;gap:8px; padding:10px 14px;cursor:pointer;background:rgba(var(--on-rgb),.03); transition:background .15s; } .src-bkt-hdr:hover { background:rgba(var(--on-rgb),.06); } .src-bkt-dot { width:7px;height:7px;border-radius:50%;flex-shrink:0; } .src-bkt-title { font-size:.82rem;font-weight:600;flex:1; } .src-bkt-count { font-size:.72rem;font-weight:600;color:var(--muted); } .src-bkt-note { font-size:.68rem;color:var(--dim);margin-left:4px; } .src-bkt-toggle { color:var(--dim);font-size:.75rem;margin-left:auto;flex-shrink:0; } .src-bkt-body { overflow:hidden;transition:max-height .25s ease; } .src-bkt-body.collapsed{ display:none; } .src-bkt-cards { display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px;padding:10px 12px; } /* ── Individual source card ── */ .src-card { background:rgba(var(--on-rgb),.03);border:1px solid rgba(var(--on-rgb),.07); border-radius:8px;padding:10px 12px;font-size:.78rem; } .src-card-name { font-weight:600;color:var(--text);margin-bottom:2px; } .src-card-role { font-size:.68rem;color:var(--muted);margin-bottom:5px;line-height:1.4; } .src-card-meta { display:flex;flex-wrap:wrap;gap:4px;margin-bottom:3px; } .src-card-stats { font-size:.65rem;color:var(--dim);margin-top:3px; } .src-card-error { font-size:.62rem;color:var(--red);margin-top:4px; background:rgba(224,95,95,.07);border-radius:4px;padding:3px 6px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } /* ── Source region + flags ── */ .src-region { font-size:.62rem;color:var(--dim); background:rgba(var(--on-rgb),.05);border-radius:4px;padding:1px 5px; } .src-flag { font-size:.58rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase; border-radius:4px;padding:1px 5px; } .src-flag-alpha { background:rgba(123,178,144,.15);color:var(--green);border:1px solid var(--green-b); } .src-flag-fv { background:rgba(100,160,240,.10);color:#90b8f0;border:1px solid rgba(100,160,240,.2); } /* ══════════════════════════════════════════════════════════════════════════════ METHOD DETAILS + DEV SECTION ══════════════════════════════════════════════════════════════════════════════ */ .method-details { margin-top:16px; border:1px solid rgba(var(--on-rgb),.07);border-radius:var(--r-sm); overflow:hidden; } .method-details > summary { padding:10px 16px;cursor:pointer;font-size:.78rem;color:var(--muted); background:rgba(var(--on-rgb),.03); list-style:none; display:flex;align-items:center;gap:6px; } .method-details > summary::before { content:'▸';color:var(--dim);font-size:.7rem; } .method-details[open] > summary::before { content:'▾'; } .method-details > summary:hover { background:rgba(var(--on-rgb),.06); } .method-details > *:not(summary) { padding:0 16px 16px; } .dev-section { display:none; } .dev-only { display:none; } /* ══════════════════════════════════════════════════════════════════════════════ SEARCH BAR — v3 ══════════════════════════════════════════════════════════════════════════════ */ .search-wrap { margin-bottom:20px; } .search-box-row { display:flex;align-items:center;gap:0; background:rgba(var(--on-rgb),.06);border:1px solid var(--glass-b); border-radius:var(--r);padding:0 14px; transition:border-color .18s; } .search-box-row:focus-within { border-color:rgba(123,178,144,.5); } .search-icon { flex-shrink:0;color:var(--dim);pointer-events:none;margin-right:10px; } .search-input { flex:1;background:transparent;border:none;outline:none; color:var(--text);font-family:inherit;font-size:.88rem; padding:13px 4px; } .search-input::placeholder { color:var(--dim); } .search-clear { background:none;border:none;cursor:pointer; color:var(--dim);font-size:.9rem;padding:4px 6px; display:none;transition:color .15s; } .search-clear:hover { color:var(--muted); } .search-hint { font-size:.72rem;color:var(--dim);margin-top:7px; display:flex;align-items:center;gap:8px;flex-wrap:wrap; } .adv-toggle { background:none;border:none;cursor:pointer; color:var(--green);font-size:.72rem;font-family:inherit; padding:0;text-decoration:underline;text-underline-offset:2px; transition:color .15s; } .adv-toggle:hover { color:var(--green2); } .adv-filters { background:var(--glass);border:1px solid var(--glass-b); border-radius:var(--r);padding:16px 20px;margin-top:10px; } .adv-filters-inner { display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end; } /* ══════════════════════════════════════════════════════════════════════════════ ACTIVE SOURCES PANEL — v3 ══════════════════════════════════════════════════════════════════════════════ */ .sources-panel { background:var(--glass);border:1px solid var(--glass-b); border-radius:var(--r);padding:18px 22px; } .sources-two-col { display:grid;grid-template-columns:1fr 1fr;gap:16px; margin-bottom:16px; } .sources-col-title { font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);margin-bottom:8px; } .sources-badges { display:flex;flex-wrap:wrap;gap:5px; } /* Source badges */ .src-badge { display:inline-flex;align-items:center;gap:4px; padding:3px 10px;border-radius:var(--r-pill); font-size:.66rem;font-weight:600;letter-spacing:.03em; } .src-badge-green { background:rgba(123,178,144,.14);color:var(--green);border:1px solid rgba(123,178,144,.3); } .src-badge-green::before { content:'●';font-size:.55rem; } .src-badge-blue { background:rgba(100,160,240,.10);color:#90b8f0;border:1px solid rgba(100,160,240,.25); } .src-badge-amber { background:rgba(240,160,84,.12);color:var(--amber);border:1px solid rgba(240,160,84,.28); } .src-badge-red { background:rgba(224,95,95,.10);color:var(--red);border:1px solid rgba(224,95,95,.25); } .src-badge-dim { background:rgba(var(--on-rgb),.05);color:var(--dim);border:1px solid rgba(var(--on-rgb),.09); } /* Stats row */ .sources-stats-row { display:flex;flex-wrap:wrap;gap:0; border-top:1px solid var(--glass-b);border-bottom:1px solid var(--glass-b); margin-bottom:14px; } .sources-stat { flex:1 1 100px;padding:10px 14px;text-align:center; border-right:1px solid var(--glass-b); } .sources-stat:last-child { border-right:none; } .sources-stat-val { display:block;font-size:1.2rem;font-weight:700;color:var(--green);line-height:1.1; } .sources-stat-lbl { display:block;font-size:.6rem;color:var(--dim);margin-top:3px; text-transform:uppercase;letter-spacing:.06em; } /* Progress bars */ .sources-progress-row { display:grid;grid-template-columns:1fr 1fr;gap:14px; margin-bottom:12px; } .sources-progress-item {} .sources-progress-label { display:flex;justify-content:space-between; font-size:.68rem;color:var(--muted);margin-bottom:5px; } .sources-prog-track { height:5px;background:rgba(var(--on-rgb),.07); border-radius:3px;overflow:hidden; } .sources-prog-fill { height:100%;background:linear-gradient(90deg,var(--green) 0%,var(--green2) 100%); border-radius:3px;transition:width .6s ease; } /* Footer */ .sources-footer { display:flex;flex-wrap:wrap;gap:6px;padding-top:10px; border-top:1px solid var(--glass-b); } @media (max-width:640px) { .sources-two-col { grid-template-columns:1fr; } .sources-stats-row { gap:0; } .sources-stat { flex:1 1 80px; padding:8px 8px; } .sources-stat-val { font-size:1rem; } .sources-progress-row { grid-template-columns:1fr; } } /* ══════════════════════════════════════════════════════════════════════════════ STOCK CARD — REDESIGNED v3 ══════════════════════════════════════════════════════════════════════════════ */ /* Card header: ticker/name on left, confidence badge on right */ .card-header { display:flex;align-items:flex-start;justify-content:space-between; gap:12px;margin-bottom:6px; } /* Override old card-identity width constraint */ .card-header .card-identity { flex:1;min-width:0; } .card-header .card-ticker { font-size:1.15rem;font-weight:700;letter-spacing:.03em; display:flex;align-items:baseline;gap:6px; } .card-exchange { font-size:.65rem;color:var(--dim);font-weight:500; letter-spacing:.04em; } .card-conf-badge { flex-shrink:0; display:inline-flex;align-items:center;gap:4px; padding:3px 10px;border-radius:var(--r-pill); font-size:.64rem;font-weight:700;letter-spacing:.06em; border:1px solid;text-transform:uppercase;white-space:nowrap; } /* FV row: price → arrow → FV → upside */ .card-fv-row { display:flex;align-items:center;justify-content:space-around; gap:8px;margin-bottom:12px; padding:10px 14px; background:rgba(var(--on-rgb),.03);border-radius:var(--r-sm); } .card-fv-col { text-align:center; } .card-fv-main { padding:0 4px; } .card-fv-arrow { font-size:1.1rem;flex-shrink:0;opacity:.8; } .card-metric-lbl { font-size:.6rem;color:var(--dim);text-transform:uppercase; letter-spacing:.07em;margin-bottom:3px; } .card-metric-val { font-size:.95rem;font-weight:700;color:var(--text); font-variant-numeric:tabular-nums; } .card-fv-val { font-size:1.1rem; } /* FV Gauge */ .fv-gauge-wrap { margin-bottom:8px; } .fv-gauge-track { position:relative;height:6px; background:rgba(var(--on-rgb),.07);border-radius:3px; overflow:visible; } .fv-gauge-band { position:absolute;top:0;height:100%; background:rgba(123,178,144,.18);border-radius:3px; } .fv-gauge-fv-marker { position:absolute;top:-3px; width:3px;height:12px;border-radius:2px; transform:translateX(-50%); box-shadow:0 0 6px currentColor; } .fv-gauge-price-marker { position:absolute;top:-4px; width:14px;height:14px;border-radius:50%; background:var(--amber); transform:translateX(-50%); border:2px solid var(--bg); box-shadow:0 0 6px rgba(240,160,84,.5); } .fv-gauge-labels { display:flex;justify-content:space-between;align-items:center; font-size:.63rem;margin-top:5px; padding:0 2px; } /* Position label + verdict */ .card-pos-label { text-align:center; font-size:.7rem;font-weight:600; margin-top:4px;min-height:14px; } .card-verdict { text-align:center; margin:8px 0 4px; } /* Meta chips row */ .card-meta-row { display:flex;flex-wrap:wrap;gap:5px; margin:8px 0 12px; } .card-meta-chip { background:rgba(var(--on-rgb),.05);border:1px solid rgba(var(--on-rgb),.09); border-radius:var(--r-pill);padding:2px 9px; font-size:.63rem;color:var(--dim); } /* Share button */ .card-btn.share { background:rgba(100,160,240,.08);color:#90b8f0; border:1px solid rgba(100,160,240,.2); } .card-btn.share:hover { background:rgba(100,160,240,.15); } /* ══════════════════════════════════════════════════════════════════════════════ MODAL FAIR VALUE SECTION — v3 ══════════════════════════════════════════════════════════════════════════════ */ .fv-public-block { background:rgba(123,178,144,.05);border:1px solid rgba(123,178,144,.15); border-radius:var(--r-sm);padding:14px 16px; } .fv-pub-row { display:flex;align-items:center;flex-wrap:wrap;gap:4px; margin-bottom:8px; } .fv-pub-sep { font-size:1rem;color:var(--dim);padding:0 4px;flex-shrink:0; } .fv-pub-item { text-align:center;flex:1;min-width:70px; } .fv-pub-main { flex:1.4; } .fv-pub-lbl { font-size:.62rem;color:var(--dim);text-transform:uppercase; letter-spacing:.07em;margin-bottom:3px; } .fv-pub-val { font-size:.95rem;font-weight:700;color:var(--text); font-variant-numeric:tabular-nums; } .fv-pub-val.up { color:var(--green); } .fv-pub-val.down { color:var(--red); } .fv-pub-formula { display:flex;align-items:baseline;gap:6px; padding:6px 0;border-top:1px solid rgba(var(--on-rgb),.06); margin-bottom:6px; } .fv-formula-note { font-size:.68rem;color:var(--dim);line-height:1.6;margin-top:2px; } /* ══════════════════════════════════════════════════════════════════════════════ DEEP DIVE SUMMARY — styled for modal collapsible sections ══════════════════════════════════════════════════════════════════════════════ */ .deep-dive-summary { display:flex;align-items:center;gap:6px; padding:8px 2px;cursor:pointer;list-style:none; font-size:.78rem;font-weight:600;color:var(--muted); transition:color .15s;user-select:none; } .deep-dive-summary::before { content:'▸';color:var(--dim);font-size:.7rem;flex-shrink:0; } details[open] > .deep-dive-summary::before { content:'▾'; } .deep-dive-summary:hover { color:var(--text); } /* ══════════════════════════════════════════════════════════════════════════════ SHARE CARD PREVIEW ══════════════════════════════════════════════════════════════════════════════ */ .share-preview-card { background:#0d1117;border:1px solid rgba(123,178,144,.3); border-radius:var(--r);padding:22px 24px; max-width:380px;margin:0 auto; font-family:'Space Grotesk',system-ui,sans-serif; } .spc-brand { font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--green);margin-bottom:8px; display:flex;align-items:center;gap:6px; } .spc-brand::before { content:'';display:inline-block;width:7px;height:7px;border-radius:50%; background:var(--green);box-shadow:0 0 6px var(--green); } .spc-ticker { font-size:2.2rem;font-weight:700;color:var(--green); letter-spacing:.04em;line-height:1;margin-bottom:4px; } .spc-name { font-size:.8rem;color:var(--muted);margin-bottom:14px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .spc-row { display:flex;justify-content:space-around; padding:12px 0;margin-bottom:12px; border-top:1px solid rgba(var(--on-rgb),.07); border-bottom:1px solid rgba(var(--on-rgb),.07); } .spc-metric { text-align:center; } .spc-lbl { font-size:.58rem;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px; } .spc-val { font-size:1rem;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums; } .spc-fv { color:var(--green); } .spc-chips { display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px; } .spc-chip { background:rgba(var(--on-rgb),.07);border-radius:var(--r-pill); padding:2px 9px;font-size:.63rem;color:var(--muted); } .spc-verdict { font-size:.72rem;color:var(--muted); margin-bottom:8px;line-height:1.5; } .spc-disclaimer { font-size:.6rem;color:var(--dim); border-top:1px solid rgba(var(--on-rgb),.06); padding-top:8px;margin-top:4px;line-height:1.6; } /* ── Valuation meter statement ── */ .val-meter-stmt { font-size:.72rem;color:var(--muted);text-align:center; margin-top:6px;line-height:1.5; } /* ── Card ticker row (ticker + exchange on one line) ── */ .card-ticker-row { display:flex;align-items:baseline;gap:6px; } /* ── Card footer: buttons left / meta chips right ── */ .card-footer { display:flex;align-items:center;justify-content:space-between; flex-wrap:wrap;gap:10px;margin-top:14px; } .card-meta-chips { display:flex;flex-wrap:wrap;gap:5px;align-items:center;justify-content:flex-end; } /* ── Results bar separator ── */ .results-bar-sep { color:var(--dim);margin:0 4px; } /* ── Modal note (non-warn paragraph) ── */ .modal-note { font-size:.72rem;color:var(--dim);line-height:1.6; padding:6px 0; } /* ══════════════════════════════════════════════════════════════════════════════ STATUS TOP BAR — v4 ══════════════════════════════════════════════════════════════════════════════ */ .status-top-inner { display:flex;align-items:flex-start;justify-content:space-between; gap:20px;flex-wrap:wrap; background:var(--glass);border:1px solid var(--glass-b); border-radius:var(--r);padding:18px 22px; } .status-top-left { display:flex;align-items:flex-start;gap:14px; flex:1;min-width:220px; } .status-live-dot { width:10px;height:10px;border-radius:50%; background:var(--green);box-shadow:0 0 10px rgba(123,178,144,.7); flex-shrink:0;margin-top:4px; animation:blink 2.4s ease-in-out infinite; } .status-top-headline { font-size:.95rem;font-weight:700;color:var(--text);line-height:1.3; } .status-top-sub { font-size:.72rem;color:var(--muted);margin-top:3px;line-height:1.5; max-width:340px; } .status-top-right { flex:1;min-width:220px; } .status-badges { display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px; } .status-badge { display:inline-flex;align-items:center;gap:4px; padding:3px 10px;border-radius:var(--r-pill); font-size:.64rem;font-weight:600;letter-spacing:.04em; } .status-badge-green { background:rgba(123,178,144,.13);color:var(--green);border:1px solid rgba(123,178,144,.3); } .status-badge-green::before { content:'●';font-size:.5rem; } .status-badge-blue { background:rgba(100,160,240,.10);color:#90b8f0;border:1px solid rgba(100,160,240,.25); } .status-meta-row { display:flex;align-items:center;flex-wrap:wrap;gap:6px; font-size:.73rem;color:var(--muted); } .status-meta-item { display:inline-flex;align-items:center;gap:4px; } .status-meta-sep { color:var(--dim);font-size:.7rem; } .status-prog-track { display:inline-block;width:52px;height:5px; background:rgba(var(--on-rgb),.07);border-radius:3px;overflow:hidden; vertical-align:middle; } .status-prog-fill { height:100%;background:linear-gradient(90deg,var(--green) 0%,var(--green2) 100%); border-radius:3px; } .status-cron-ok { color:var(--green);font-weight:600; } .status-cron-off { color:var(--dim); } .status-dim { color:var(--dim); } /* ══════════════════════════════════════════════════════════════════════════════ RESULTS BAR — v4 ══════════════════════════════════════════════════════════════════════════════ */ .results-bar { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap; gap:8px 10px;margin-bottom:8px; font-size:.78rem;color:var(--muted); min-height:26px; } .results-bar-sort { color:var(--dim);font-size:.73rem; } /* Result-summary line + evidence/sort toggle controls */ .fvc-ctx-left { display:flex;align-items:baseline;flex-wrap:wrap;gap:5px;min-width:0; } .fvc-ctx-region { color:var(--text);font-weight:600; } .fvc-ctx-ev, .fvc-ctx-sort { color:var(--dim); } /* count on the left (shrinks/wraps internally); the Cards/Table toggle stays pinned right on the SAME line at every width (operator 2026-07-07). */ /* Count keeps its intrinsic width (nowrap, no min-width:0) so it never clips to "Filter-…": when count + controls don't fit, the control group wraps instead. */ .fvc-ctx-count { color:var(--muted);flex:0 0 auto;white-space:nowrap; } /* View toggle + Sort. margin-left:auto pins the group right; when the row can't fit both the count and the controls (iPhone-12 width) the whole group wraps to a 2nd line, still right-aligned — no horizontal overflow (operator 2026-07-07). */ .fvc-ctrl-row { display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto;flex-wrap:wrap;justify-content:flex-end; } .fvc-sort-toggle { display:inline-flex;align-items:center;gap:6px; background:rgba(123,178,144,.07); border:1px solid rgba(123,178,144,.28); color:var(--text); font-size:.75rem;font-weight:600; padding:7px 13px;border-radius:var(--r-pill,999px); cursor:pointer;white-space:nowrap;line-height:1; transition:background .14s,border-color .14s,opacity .14s,transform .05s; } .fvc-sort-toggle:hover { background:rgba(123,178,144,.15);border-color:rgba(123,178,144,.5); } .fvc-sort-toggle:active { transform:translateY(1px); } .fvc-ev-toggle.is-high { background:rgba(123,178,144,.16);border-color:var(--green,#7BB290);color:var(--green,#7BB290); } .fvc-sort-caret { font-size:.6rem;opacity:.7;transform:translateY(1px); } .fvc-lbl-short { display:none; } /* Busy: dim the controls (no layout shift) while a fetch is in flight */ .results-bar.fvc-bar-busy .fvc-ctrl-row { opacity:.55;pointer-events:none; } /* Elegant loading state on the list area while switching sort/filter/page */ #cards.fvc-list-loading { position:relative;opacity:.5;pointer-events:none;transition:opacity .12s; } #cards.fvc-list-loading::after { content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px; background:linear-gradient(90deg,transparent,var(--green,#7BB290),transparent); background-size:40% 100%;background-repeat:no-repeat; animation:fvcListBar 1.1s ease-in-out infinite; } @keyframes fvcListBar { 0%{background-position:-40% 0;} 100%{background-position:140% 0;} } /* Clear "Searching…" pill so the user knows it's working (operator #34). */ #cards.fvc-list-loading { opacity:.45; } #cards.fvc-list-loading::before { content:"Searching…"; position:absolute; left:50%; top:46px; transform:translateX(-50%); z-index:4; background:rgba(13,20,16,.94); color:var(--green,#7BB290); font-weight:700; font-size:.82rem; padding:9px 18px; border-radius:999px; border:1px solid rgba(123,178,144,.42); box-shadow:0 6px 18px rgba(0,0,0,.35); white-space:nowrap; } @media (max-width:640px) { /* Cards/Table toggle stays inline-right (handled by the base .results-bar now). */ .fvc-view-toggle { flex:0 0 auto; } .fvc-ctrl-row { width:auto;justify-content:flex-end;flex:0 0 auto; } .fvc-sort-toggle { flex:0 0 auto; } .fvc-lbl-full { display:none; } .fvc-lbl-short { display:inline; } } /* ══════════════════════════════════════════════════════════════════════════════ SEARCH SUGGESTIONS — v4 ══════════════════════════════════════════════════════════════════════════════ */ .search-suggestions { background:var(--surface);border:1px solid rgba(123,178,144,.25); border-radius:var(--r-sm); margin-top:4px;overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.45); position:relative;z-index:100; } .sugg-item { display:flex;align-items:center;justify-content:space-between; padding:10px 14px;cursor:pointer; border-bottom:1px solid rgba(var(--on-rgb),.04); transition:background .12s; } .sugg-item:last-child { border-bottom:none; } .sugg-item:hover { background:rgba(var(--on-rgb),.05); } .sugg-left { display:flex;align-items:baseline;gap:8px; } .sugg-right { display:flex;align-items:center;gap:6px;flex-shrink:0; } .sugg-ticker { font-weight:700;font-size:.88rem;color:var(--text); } .sugg-name { font-size:.73rem;color:var(--dim);max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .sugg-upside { font-size:.73rem;font-weight:600; } .sugg-conf { font-size:.62rem;font-weight:600;padding:1px 7px;border-radius:var(--r-pill); letter-spacing:.04em;text-transform:uppercase; } .sugg-empty { padding:12px 14px;font-size:.78rem;color:var(--dim);text-align:center; } /* Subtle autocomplete loading row (only shown when a lookup exceeds ~150ms) */ .fvc-sug-loading { display:flex;align-items:center;gap:9px; padding:11px 14px;font-size:.78rem;color:var(--dim); } .fvc-sug-spin { width:12px;height:12px;border-radius:50%;flex-shrink:0; border:2px solid rgba(123,178,144,.3);border-top-color:var(--green,#7BB290); animation:fvcSugSpin .6s linear infinite; } @keyframes fvcSugSpin { to { transform:rotate(360deg); } } /* ══════════════════════════════════════════════════════════════════════════════ STOCK CARD — v4 redesigned numbers layout ══════════════════════════════════════════════════════════════════════════════ */ /* Ticker row + company name open the detail view on click */ .card-open { cursor:pointer; transition:color .15s; } .card-open .card-ticker { transition:color .15s; } .card-open:hover .card-ticker, .card-open:hover { color:var(--green,#7BB290); } /* The ticker row is a real (crawlable link to /stock/) — strip the default anchor look so it stays visually identical to the surrounding card text. */ a.card-ticker-row { color:inherit; text-decoration:none; } /* Free per-stock fair-value alert CTA (detail-page lead funnel). */ .fvc-alert-cta { border:1px solid rgba(123,178,144,.28); border-radius:14px; background:rgba(123,178,144,.07); padding:14px 16px; } .fvc-alert-row { display:flex; align-items:flex-start; gap:10px; } .fvc-alert-ic { font-size:1.2rem; line-height:1.25; flex:0 0 auto; } .fvc-alert-tx { display:flex; flex-direction:column; gap:2px; min-width:0; } .fvc-alert-tx b { color:var(--text,#e9f1ec); font-size:.95rem; } /* DIRECT child only: the subtitle. The glossary decorator wraps terms like "Fair Value" in a nested INSIDE the title — a plain `.fvc-alert-tx span` also matched those and shrank/dimmed "Fair Value" mid-title. */ .fvc-alert-tx > span { color:var(--dim,#9fb0a8); font-size:.78rem; line-height:1.4; } .fvc-alert-form { display:flex; gap:8px; margin-top:11px; } .fvc-alert-form.is-done { display:none; } .fvc-alert-email { flex:1 1 0; min-width:0; box-sizing:border-box; border:1px solid rgba(123,178,144,.3); border-radius:10px; background:rgba(12,19,15,.55); color:var(--text,#e9f1ec); font-size:16px; padding:10px 12px; outline:none; } .fvc-alert-email:focus { border-color:var(--fvc-green,#7BB290); } .fvc-alert-email::placeholder { color:var(--dim,#9fb0a8); } .fvc-alert-hp { position:absolute; left:-9999px; width:1px; height:1px; } .fvc-alert-btn { flex:0 0 auto; border:none; border-radius:10px; background:var(--fvc-green,#7BB290); color:#08130d; font-weight:700; font-size:14px; padding:10px 16px; cursor:pointer; white-space:nowrap; transition:filter .15s; } .fvc-alert-btn:hover { filter:brightness(1.07); } .fvc-alert-msg { font-size:.8rem; margin-top:8px; min-height:1em; color:var(--dim,#9fb0a8); } .fvc-alert-msg.ok { color:var(--green,#7BB290); } .fvc-alert-msg.err { color:#e0816f; } @media (max-width:480px){ .fvc-alert-form { flex-wrap:wrap; } .fvc-alert-email, .fvc-alert-btn { flex:1 1 100%; } } .card-company { font-size:.96rem;font-weight:600;color:rgba(var(--muted-rgb),.92);margin:2px 0 10px; letter-spacing:.005em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%; } /* sector / ethics / penny / shared chips — own full-width row under the name */ .card-subbadges { display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 12px; } .card-subbadges:empty { display:none; } .card-exch { font-size:.63rem;color:var(--dim);font-weight:500;letter-spacing:.04em; } /* Sector chip under the company name — clickable → filter by sector */ .card-sector { display:inline-block;margin-top:6px;cursor:pointer; font-size:.62rem;font-weight:600;letter-spacing:.03em; padding:2px 8px;border-radius:999px; background:rgba(123,178,144,.10);border:1px solid rgba(123,178,144,.24); color:var(--green);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px; transition:background .15s,border-color .15s; } .card-sector:hover { background:rgba(123,178,144,.18);border-color:rgba(123,178,144,.4); } /* Subtle social-proof badge — only rendered when a stock has shares (>0). */ .card-shared-badge { display:inline-block;margin:6px 0 0 6px; font-size:.58rem;font-weight:600;letter-spacing:.03em; padding:2px 8px;border-radius:999px; background:rgba(var(--on-rgb),.05);border:1px solid rgba(var(--on-rgb),.12); color:var(--muted,rgba(var(--muted-rgb),.7));white-space:nowrap; } /* Penny-stock badge — warns that the Fair Value / upside is noise at a sub-10¢ share price. Flag only (never hidden); muted red so it reads as a caveat. */ .card-penny-badge { display:inline-block;margin:6px 0 0 6px;cursor:default; font-size:.58rem;font-weight:700;letter-spacing:.03em; padding:2px 8px;border-radius:999px; background:rgba(224,138,138,.12);border:1px solid rgba(224,138,138,.34); color:#e08a8a;white-space:nowrap; } /* Cyclical-peak badge — a commodity producer at peak earnings whose Fair Value is dampened toward mid-cycle. Neutral slate-blue (informational, not an alarm). Overrides the shared penny-badge base. */ .card-cyclical-badge { background:rgba(144,184,240,.12);border-color:rgba(144,184,240,.34);color:#90b8f0; } /* Heavy-diluter badge — share count grew >10 %/y, FV dampened ×0.85 (DilutionGuard). Amber caveat. */ .card-dilution-badge { background:rgba(240,160,84,.12);border-color:rgba(240,160,84,.34);color:#f0a054; } .card-penny-badge.card-dilution-badge.fvc-term:hover, .card-penny-badge.card-dilution-badge.fvc-term:focus { color:#f0a054; } .fvc-vbadge.tone-dilution.fvc-term:hover, .fvc-vbadge.tone-dilution.fvc-term:focus { color:#f0a054; } /* Values exposure badge on cards — neutral amber, never alarming. Only shown when an exposure is clearly inferred from the industry (max 2 per card). */ .card-ethics-badge { display:inline-block;margin:6px 0 0 6px;cursor:default; font-size:.58rem;font-weight:600;letter-spacing:.03em; padding:2px 8px;border-radius:999px; background:rgba(240,160,84,.12);border:1px solid rgba(240,160,84,.3); color:var(--amber,#f0a054);white-space:nowrap; } /* ── Today's Focus (#menu 2026-07-07): a STRATEGY MENU on top; one panel below = either the pick card ("Today's Pick" entry) or one strategy list (Quality + Upside), sized to the SAME height as the card. Existing tokens only; default view only. */ #fvc-overview:not(:empty) { margin:0 0 16px; } .fvc-ov-wrap { max-width:720px;margin-inline:auto; /* card-sized focused panel, centered — not full-width */ padding:12px 16px 14px; border:1px solid var(--glass-b);border-radius:var(--r); background:rgba(var(--on-rgb),.03); } .fvc-ov-title { font-size:.95rem;font-weight:700;letter-spacing:.02em;color:var(--text);margin-bottom:10px; } .fvc-ov-accent { font-weight:600;color:var(--green); } /* Strategy menu — horizontally scrollable chips (same on desktop + mobile). */ .fvc-ov-tabs { display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:0 0 10px;-webkit-overflow-scrolling:touch; } .fvc-ov-tabs::-webkit-scrollbar { display:none; } .fvc-ov-tab { flex:0 0 auto;padding:5px 11px;border-radius:var(--r-pill,999px);cursor:pointer; background:rgba(var(--on-rgb),.06);border:1px solid var(--glass-b); color:var(--muted);font:inherit;font-size:.75rem;font-weight:600;line-height:1.2;white-space:nowrap; } .fvc-ov-tab.active { background:var(--green-d);border-color:var(--green-b);color:var(--text); } /* Panel — one thing at a time; min-height is set inline to the pick card's height. */ .fvc-ov-panel { position:relative; } .fvc-ov-focus { position:relative; border:1px solid var(--green-b);border-radius:var(--r);overflow:hidden; box-shadow:0 4px 24px rgba(123,178,144,.08); } .fvc-ov-focus .stock-card { border:0;border-radius:0;box-shadow:none; } .fvc-ov-dismiss { position:absolute;top:8px;right:8px;z-index:3;width:24px;height:24px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0; background:rgba(var(--on-rgb),.10);border:1px solid var(--glass-b);color:var(--dim); font-size:.95rem;line-height:1; } .fvc-ov-dismiss:hover { color:var(--text); } .fvc-ov-list { display:flex;flex-direction:column; } .fvc-ov-lhead { display:flex;align-items:center;gap:8px; padding:2px 6px 6px;border-bottom:1px solid var(--glass-b);margin-bottom:2px; font-size:.66rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted); } .fvc-ov-lh-name { flex:1 1 auto;min-width:0; } .fvc-ov-lhead .fvc-ov-q, .fvc-ov-lhead .fvc-ov-up { color:var(--muted);font-weight:700; } .fvc-ov-row { display:flex;align-items:center;gap:8px;width:100%; padding:7px 6px;margin:0;border:0;border-radius:8px;cursor:pointer; background:transparent;color:var(--text);text-align:left; font:inherit;font-size:.82rem;line-height:1.3; } .fvc-ov-row:hover, .fvc-ov-row:focus-visible { background:rgba(var(--on-rgb),.07); } .fvc-ov-rank { flex:0 0 18px;font-size:.7rem;font-weight:700;color:var(--muted);text-align:right; } .fvc-ov-name { flex:1 1 auto;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .fvc-ov-q { flex:0 0 44px;font-weight:800;font-size:.82rem;text-align:right;font-variant-numeric:tabular-nums; } .fvc-ov-up { flex:0 0 56px;font-weight:800;font-size:.82rem;text-align:right;font-variant-numeric:tabular-nums; } /* ── Tabellen-Ansicht (#table-view 2026-07-07): dense re-sortable overview table — a second rendering of the same feed page (Karten ⇄ Tabelle toggle in the results bar). Column-header buttons trigger the existing SERVER sorts. */ .fvc-view-toggle { display:inline-flex;flex:0 0 auto;border:1px solid var(--glass-b);border-radius:var(--r-pill,999px);overflow:hidden; } .fvc-view-btn { padding:4px 11px;border:0;cursor:pointer;background:transparent;color:var(--muted); font:inherit;font-size:.72rem;font-weight:600;line-height:1.3;white-space:nowrap; } .fvc-view-btn.active { background:var(--green-d);color:var(--text); } /* Sort control — moved into the results bar (operator 2026-07-07). Pill matching the view toggle; a native