/* IsStockSafe — single stylesheet. Clean, light, minimal — near-white page, floating white cards with a soft shadow, calm indigo accent (trust/safety, matching the brand). */ :root{ --navy:#1A1D29; --navy2:#F8F9FB; --navy3:#FFFFFF; --gold:#4338CA; --gold2:#3730A3; --white:#1A1D29; --muted:#6B7280; --text:#374151; --green:#059669; --amber:#D97706; --red:#DC2626; --blue:#2563EB; --purple:#7C3AED; --orange:#EA580C; --page-bg:#F8F9FB; --card-bg:#FFFFFF; --border:#E5E7EB; --border-soft:#EEF0F2; --tint:#F3F4F6; --shadow:0 1px 2px rgba(16,24,40,.04),0 2px 8px rgba(16,24,40,.06); --radius:12px; --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,system-ui,sans-serif; /* Light-tint callout/badge colors — indigo, green (two shades used interchangeably for slightly different intensities), red, amber, blue — each with its paired border. Every one of these was hardcoded hex scattered across 25+ rules before being collected here; the dark-mode block below is what actually fixes the "light text on a light tinted box" contrast bug those caused. */ --tint-indigo:var(--tint-indigo); --tint-indigo-border:var(--tint-indigo-border); --tint-green:var(--tint-green); --tint-green2:var(--tint-green2); --tint-green-border:var(--tint-green-border); --tint-red:var(--tint-red); --tint-red-border:var(--tint-red-border); --tint-amber:var(--tint-amber); --tint-amber-border:var(--tint-amber-border); --tint-blue:var(--tint-blue); --text-on-tint-red:var(--text-on-tint-red); --text-on-tint-green:var(--text-on-tint-green); } /* Dark theme — same variable names, dark values. Everything already colored through var(--page-bg) etc. (which is nearly everything — this stylesheet has used CSS variables consistently throughout) picks this up automatically with zero further changes. Inline hex colors (score pills: green/amber/red, mover-card percentages) are left as-is deliberately — "green means good" should mean the same thing in both themes, not shift with it. --gold/--gold2 (the indigo accent, despite the name) are brightened here specifically, since the darker light -mode shade reads as muddy rather than as an accent against a dark background — every other value is a fairly direct near-inverse. */ [data-theme="dark"]{ --navy:#F8F9FB; --navy2:#0F1115; --navy3:#171A23; --gold:#818CF8; --gold2:#A5B4FC; --white:#F3F4F6; --muted:#9CA3AF; --text:#D1D5DB; --green:#10B981; --amber:#F59E0B; --red:#EF4444; --blue:#3B82F6; --purple:#A78BFA; --orange:#FB923C; --page-bg:#0F1115; --card-bg:#171A23; --border:#2D3140; --border-soft:#242836; --tint:#1F2330; --shadow:0 1px 2px rgba(0,0,0,.3),0 2px 8px rgba(0,0,0,.4); --tint-indigo:#2A2B4A; --tint-indigo-border:#4C4A8A; --tint-green:#123A2C; --tint-green2:#0F3D2E; --tint-green-border:#1F6B4D; --tint-red:#4A1F1F; --tint-red-border:#7A3535; --tint-amber:#4A3A14; --tint-amber-border:#8A6D24; --tint-blue:#1E3A5F; --text-on-tint-red:var(--tint-red-border); --text-on-tint-green:var(--tint-green-border); } *{box-sizing:border-box;margin:0;padding:0} body{font-family:var(--font);background:var(--page-bg);color:var(--white); -webkit-font-smoothing:antialiased;line-height:1.5} a{color:inherit;text-decoration:none} button,input,select,textarea{font-family:inherit;font-size:inherit} select{background:var(--card-bg);border:1px solid var(--border);color:var(--white); padding:9px 13px;border-radius:8px} select:focus{outline:none;border-color:var(--gold)} button{cursor:pointer} .muted{color:var(--muted)} .small{font-size:12px} .center{text-align:center} .num{text-align:right} /* ── Nav ───────────────────────────────────────────────────── */ nav{display:flex;justify-content:space-between;align-items:center;padding:16px 32px; border-bottom:1px solid var(--border);position:sticky;top:0; background:var(--card-bg);z-index:60} .nav-brand{font-weight:700;font-size:19px;display:inline-flex;align-items:center;gap:8px} .nav-brand span{color:var(--gold)} .nav-brand-icon{width:26px;height:26px;flex-shrink:0} .nav-links{display:flex;gap:18px;align-items:center} .nav-links a{color:var(--gold);font-size:14px;font-weight:500} .nav-links a:hover,.nav-links a.active{color:var(--white)} .theme-toggle{color:var(--gold);font-size:14px;font-weight:500} .theme-toggle:hover{color:var(--white)} .btn,.btn-gold{display:inline-block;padding:8px 16px;border-radius:8px;font-size:14px; font-weight:600;border:1px solid var(--border);background:var(--card-bg); color:var(--white)!important;text-align:center} .btn-gold{background:var(--gold);color:#fff!important;border-color:var(--gold)} .rate-picker{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .rate-btn{width:40px;height:40px;border-radius:8px;border:1px solid var(--border); background:var(--card-bg);color:var(--white);font-weight:700;font-size:14px;cursor:pointer} .rate-btn:hover{border-color:var(--gold)} .rate-btn.on{background:var(--gold);border-color:var(--gold);color:#fff} .btn-gold:hover{background:var(--gold2)} .btn:hover{background:var(--page-bg)} .btn-block{display:block;width:100%;margin-top:8px} .btn-lg{padding:13px 26px;font-size:15px} .link-btn{background:none;border:none;color:var(--gold);font-weight:600; font-size:13px;padding:8px 0} .link-btn:hover{text-decoration:underline} /* ── Layout ────────────────────────────────────────────────── */ .wrap{max-width:1240px;margin:0 auto;padding:26px 24px 60px; overflow-wrap:break-word;word-break:break-word} .wrap.narrow{max-width:760px} .page-head{margin-bottom:22px} .page-head h1{font-size:26px;font-weight:700;margin-bottom:5px} .section-title{font-size:22px;font-weight:700;margin-bottom:4px} .section-title-row{display:flex;justify-content:space-between;align-items:baseline; flex-wrap:wrap;gap:8px;margin-top:48px} .section-title-row .section-title{margin-bottom:0} .see-all{font-size:13.5px;font-weight:600;color:var(--gold);white-space:nowrap} .see-all:hover{text-decoration:underline} .mover-section-head{font-size:14px;font-weight:700;margin-bottom:12px;padding-bottom:8px; border-bottom:2px solid var(--border)} .mover-up{color:var(--green)} .mover-down{color:var(--red)} .mover-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .mover-card{display:block;background:var(--card-bg);border-radius:var(--radius); box-shadow:var(--shadow);padding:14px 16px;text-decoration:none;color:inherit} .mover-card:hover{box-shadow:0 2px 10px rgba(0,0,0,.1)} .mover-card-name{font-size:15.5px;font-weight:700} .mover-card-divider{border-top:1px solid #C2410C;margin:10px 0} .mover-card-bottom{display:flex;justify-content:space-between;align-items:center} .mover-card-change{font-size:12.5px;color:var(--muted);font-weight:600} .section-sub{color:var(--muted);font-size:14px;margin-bottom:20px} /* ── Hero ──────────────────────────────────────────────────── */ .hero{max-width:820px;margin:0 auto;padding:52px 24px 32px;text-align:center} .hero-badge{display:inline-block;background:var(--card-bg);border:1px solid var(--border); color:var(--muted);font-size:13px;padding:6px 14px;border-radius:20px;margin-bottom:16px} .hero h1{font-size:36px;font-weight:700;line-height:1.25;margin-bottom:14px;color:var(--navy)} .hero-sub{color:var(--text);font-size:16px;max-width:640px;margin:0 auto 26px} .search-wrap{display:flex;gap:8px;max-width:560px;margin:0 auto;position:relative} .search-wrap input{flex:1;background:var(--card-bg);border:1px solid var(--border); color:var(--white);padding:13px 16px;border-radius:10px;font-size:15px} .search-wrap input:focus{outline:none;border-color:var(--gold)} .search-wrap button{background:var(--gold);color:#fff;border:none; padding:13px 22px;border-radius:10px;font-weight:600} .suggest{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--card-bg); border:1px solid var(--border);border-radius:10px;overflow:hidden;display:none; z-index:50;box-shadow:0 12px 30px rgba(30,41,59,.12);max-height:360px;overflow-y:auto} .suggest.open{display:block} .suggest-item{display:flex;justify-content:space-between;align-items:center; padding:11px 14px;border-bottom:1px solid var(--border-soft);text-align:left;font-size:14px} .suggest-item:last-child{border-bottom:none} .suggest-item:hover{background:var(--page-bg)} .suggest-item i{color:var(--muted);font-style:normal;font-size:12px} .suggest-item small{color:var(--muted);font-size:12px} .suggest-score{font-weight:700} .hero-stats{display:flex;gap:36px;justify-content:center;margin-top:30px;flex-wrap:wrap} .hero-stats div{text-align:center} .hero-stats b{display:block;font-size:24px;font-weight:700;color:var(--navy)} .hero-stats span{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em} /* ── Sector rows ───────────────────────────────────────────── */ .sector-nav{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 28px} .sector-chip{font-size:14px;padding:7px 14px;border-radius:20px;background:var(--gold); border:1px solid var(--gold);font-weight:600;color:#fff} .sector-chip:hover{background:var(--gold2);border-color:var(--gold2)} .sector-chip .muted{color:#FDE68A} .sector-block{margin-bottom:34px;background:var(--card-bg);border-radius:var(--radius); padding:22px;box-shadow:var(--shadow)} .sector-head{display:flex;justify-content:space-between;align-items:baseline; gap:14px;margin-bottom:14px;flex-wrap:wrap} .sector-name{font-size:19.5px;font-weight:700} .sector-meta{font-size:14px;color:var(--muted);margin-left:10px;font-weight:400} .sector-more{font-size:13px;color:var(--orange);font-weight:600;white-space:nowrap} .row-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .sector-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px} .sector-tile{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow); padding:18px;color:inherit;text-decoration:none;transition:transform .15s,box-shadow .15s} .sector-tile:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(16,24,40,.10)} .sector-tile-top{display:flex;justify-content:space-between;align-items:center;gap:10px} .sector-tile-name{font-weight:700;font-size:14.5px} .sector-tile-meta{font-size:12.5px;color:var(--muted);margin-top:8px} .sector-tile-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(48px,1fr));gap:6px;margin-top:10px; padding-top:10px;border-top:1px solid var(--border-soft)} /* The base border-soft (#EEF0F2) is nearly invisible against the white card background — barely different in lightness, so this divider reads as "not there" wherever it's used, since the content around it already draws the eye and there's nothing else competing for contrast. */ .mini-card .sector-tile-stats, .sector-tile .sector-tile-stats{border-top-color:#C2410C} .sector-tile-stats div{font-size:10.5px;color:var(--muted);text-transform:uppercase; letter-spacing:.03em} .sector-tile-stats b{display:block;font-size:13px;color:var(--white);font-weight:700; text-transform:none;letter-spacing:normal;margin-top:2px} .stock-chips{display:flex;flex-wrap:wrap;gap:10px} .stock-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px; border-radius:20px;background:var(--card-bg);font-size:13px;font-weight:600; color:var(--gold);border:1px solid var(--gold)} .stock-chip:hover{background:var(--gold);color:#fff} .stock-chip:hover .stock-chip-score{color:#FDE68A} .stock-chip-score{font-weight:700;color:var(--gold2)} .mini-card{background:var(--card-bg);border-radius:10px;box-shadow:var(--shadow); padding:15px;transition:border-color .18s,transform .15s;position:relative} .mini-card:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(20,37,43,.10),0 2px 4px rgba(20,37,43,.06)} .mini-card-link{display:flex;flex-direction:column;gap:11px;color:inherit;text-decoration:none} .watch-star{position:absolute;top:10px;right:10px;z-index:2;width:26px;height:26px; border:none;background:none;font-size:19px;line-height:1;color:var(--muted); cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center; border-radius:50%;transition:background .15s,color .15s} .watch-star:hover{background:var(--tint);color:var(--white)} .watch-star.on{color:#C2410C} .watch-star.on:hover{background:#FFEDD5} .mini-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding-right:22px} .mini-name{font-weight:700;font-size:15.5px;line-height:1.3} .mini-sym{font-size:12.5px;color:var(--muted);margin-top:2px} .mini-score{font-size:23px;font-weight:700;line-height:1;flex-shrink:0} .mini-tags{display:flex;gap:4px;flex-wrap:wrap} .tag{font-size:10px;padding:2px 6px;border-radius:20px;background:var(--tint);color:var(--muted)} .tag-cycl{background:#EDE9FE;color:var(--purple)} .tag-govt{background:var(--tint-blue);color:var(--blue)} /* ── Home: by-pillar tables ────────────────────────────────── */ .pillar-tables{display:grid;grid-template-columns:1fr 1fr;gap:20px} @media (max-width:860px){.pillar-tables{grid-template-columns:1fr}} .pillar-table-block{background:var(--card-bg);border-radius:var(--radius); overflow:hidden;box-shadow:var(--shadow)} .pillar-table-title{font-weight:700;font-size:14px;padding:13px 16px; border-bottom:1px solid var(--border)} .pillar-table-title-good{color:var(--green)} .pillar-table-title-bad{color:var(--red)} .pillar-table{min-width:0;font-size:13px} .pillar-table th{padding:9px 10px} .pillar-table td{padding:0} .pillar-table .cell{padding:9px 10px;display:block} /* ── How it works ──────────────────────────────────────────── */ .how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px} .how-card{background:var(--card-bg);border-radius:var(--radius); padding:22px;box-shadow:var(--shadow)} .how-icon{font-size:24px;margin-bottom:10px} .how-title{font-weight:700;margin-bottom:6px} .how-desc{font-size:13.5px;color:var(--muted);line-height:1.6} /* ── Stock page ────────────────────────────────────────────── */ .verdict-box{background:var(--tint-indigo); border:1px solid var(--tint-indigo-border);border-radius:var(--radius); padding:20px 22px;margin-bottom:24px} .verdict-title{font-weight:700;color:var(--gold);margin-bottom:8px;font-size:14px} .verdict-box p{font-size:15px;line-height:1.6;color:var(--text)} .verdict-note{font-size:11.5px;color:var(--muted);margin-top:10px} .stock-head{display:flex;justify-content:space-between;align-items:flex-start; gap:20px;flex-wrap:wrap;margin-bottom:24px;background:var(--card-bg); border-radius:var(--radius);box-shadow:var(--shadow);padding:24px} .score-disclaimer{flex-basis:100%;font-size:12px;color:var(--red); margin-top:16px;padding-top:16px;border-top:1px solid var(--border-soft)} .watch-btn{display:inline-block;margin-top:10px;padding:7px 14px;border-radius:20px; font-size:12.5px;font-weight:600;background:var(--tint);border:1px solid var(--border); color:var(--muted);cursor:pointer} .watch-btn:hover{border-color:var(--gold);color:var(--gold)} .watch-btn.on{background:#FFEDD5;border-color:#FDBA74;color:#C2410C} .watch-card{position:relative} .watch-card a{display:block;color:inherit;text-decoration:none} .watch-remove{display:block;width:100%;margin-top:10px;padding:6px;border-radius:8px; border:1px solid var(--border);background:none;color:var(--red);font-size:12px; font-weight:600;cursor:pointer} .watch-remove:hover{background:var(--tint-red);border-color:var(--tint-red-border)} .watch-remove:disabled{opacity:.5;cursor:default} .stock-head h1{font-size:26px;font-weight:700} .stock-head .sym{font-size:15px;color:var(--muted);font-weight:500} .stock-head .sub{color:var(--muted);font-size:14px;margin-top:3px} .stock-head .meta{font-size:12.5px;color:var(--muted);margin-top:8px} .chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px} .chip{font-size:11px;padding:3px 9px;border-radius:20px;background:var(--tint);color:var(--muted)} .chip-cycl{background:#EDE9FE;color:var(--purple)} .chip-govt{background:var(--tint-blue);color:var(--blue)} .icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px; border-radius:9px;background:var(--tint);font-size:15px;flex-shrink:0} .ring-box{position:relative} .score-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)} .ring-bg{fill:none;stroke:var(--border);stroke-width:5} .ring-fill{fill:none;stroke-width:5;stroke-linecap:round} .ring-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-weight:700;line-height:1;font-variant-numeric:tabular-nums} .ring-label{font-size:10px;color:var(--muted);text-align:center;margin-top:4px} .score-trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px;margin-bottom:24px} .trio-card{background:var(--card-bg);border-radius:var(--radius); padding:20px;text-align:center;box-shadow:var(--shadow)} .trio-label{font-size:12px;color:var(--muted);margin-bottom:6px} .trio-val{font-size:34px;font-weight:700;line-height:1} .trio-sub{font-size:13px;color:var(--muted);margin-top:5px} .detail-section{background:var(--card-bg);border-radius:var(--radius); padding:22px;margin-bottom:16px;box-shadow:var(--shadow);scroll-margin-top:130px} .detail-section h3{font-size:17px;font-weight:700;margin-bottom:14px; display:flex;align-items:center;gap:8px} .pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} .price-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius); padding:28px 24px;position:relative} .price-card-featured{border-color:var(--gold);box-shadow:0 4px 20px rgba(67,56,202,.12)} .price-card-name{font-size:14px;font-weight:700;color:var(--muted);text-transform:uppercase; letter-spacing:.03em} .price-card-amount{font-size:38px;font-weight:800;margin-top:6px} .price-card-sub{font-size:13px;color:var(--muted);margin-bottom:20px} .price-features{list-style:none;margin:0 0 22px;padding:0} .price-features li{padding:9px 0;border-top:1px solid var(--border-soft);font-size:14.5px} .price-features li:first-child{border-top:none} .price-breakdown{margin:16px 0 0;padding-left:20px} .price-breakdown li{font-size:14.5px;color:var(--text);line-height:1.7} .detail-section h4{font-size:14.5px;font-weight:600;margin-bottom:8px} .method-weights{display:flex;flex-direction:column;gap:1px;background:var(--border-soft); border-radius:8px;overflow:hidden;margin-top:8px} .method-formula{font-family:'SF Mono',Consolas,Monaco,monospace;font-size:13.5px; background:var(--tint);border:1px solid var(--border);border-radius:8px; padding:14px 16px;margin:10px 0;line-height:1.7;color:var(--white)} /* ── Learn articles ──────────────────────────────────────────────────────── */ /* Scoped to .learn-article specifically — .detail-section h3 is the same shared heading pattern used on every other page (stock.php, screener.php, methodology.php, admin pages), so this can't live on that base selector without recoloring headings site-wide. */ .learn-article .detail-section h3{color:#C2410C} /* Learn articles use h2 for section headings (proper h1->h2 order for SEO and accessibility — every other page's h1->h3 jump is a pre-existing pattern left alone elsewhere, but not worth repeating here). Same visual treatment as .detail-section h3 gets everywhere else, just the correct tag. */ .learn-article .detail-section h2{color:#C2410C;font-size:17px;font-weight:700; margin-bottom:14px;display:flex;align-items:center;gap:8px} /* The site-wide *{margin:0} reset removes the browser's default paragraph spacing along with everything else, and .detail-section never added its own — invisible on pages with one paragraph per section, but these articles run several in a row, so without this they visually run together with no break between them at all. */ .learn-article .detail-section p{margin-bottom:12px} .learn-article .detail-section p:last-child{margin-bottom:0} /* Level bands: the low/moderate/high (or similar) reading of a ratio maps naturally onto the same red/amber/green language the rest of the site already uses for score bands — not a new color system, the same one. */ .learn-levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px;margin:14px 0} .learn-level{border-left:4px solid var(--border);background:var(--tint); border-radius:0 8px 8px 0;padding:14px 16px} .learn-level b{display:block;font-size:14.5px;margin-bottom:4px} .learn-level p{margin:0;font-size:14px;color:var(--muted);line-height:1.55} .learn-level-red{border-left-color:var(--red);background:var(--tint-red)} .learn-level-red b{color:var(--red)} .learn-level-amber{border-left-color:var(--amber);background:var(--tint-amber)} .learn-level-amber b{color:var(--amber)} .learn-level-green{border-left-color:var(--green);background:var(--tint-green)} .learn-level-green b{color:var(--green)} /* Worked examples: numbered because they genuinely are a sequence (Example 1, Example 2), set apart from surrounding prose with the site's primary accent tint rather than another neutral card. No flex layout — a number prefix inline with the title text is simpler and can't wrap awkwardly the way a separate circle-plus-flex-row did. */ .learn-example{background:var(--tint-indigo); border:1px solid var(--tint-indigo-border);border-radius:10px; padding:16px 18px;margin:16px 0} .learn-example-num{display:inline-block;width:24px;height:24px;line-height:24px; border-radius:50%;background:var(--gold);color:#fff;font-weight:700; font-size:13px;text-align:center;margin-right:8px} .learn-example p:first-of-type{margin-top:0} .learn-example p:last-child{margin-bottom:0} .learn-example-title{font-weight:700;margin-bottom:8px;display:block} /* Deliberate list treatment — generous left padding so the marker never crowds the text, consistent across every section that lists comparisons, use-cases or limitations. */ .learn-list{list-style:none;margin:12px 0;padding:0} .learn-list li{position:relative;padding:0 0 0 26px;margin-bottom:12px; line-height:1.6} .learn-list li::before{content:'';position:absolute;left:6px;top:9px; width:8px;height:8px;border-radius:50%;background:var(--gold)} .learn-list li:last-child{margin-bottom:0} /* FAQ — each question set apart by color and weight rather than a plain bold line, with a hairline dividing consecutive questions. */ .learn-faq-item{padding:14px 0;border-bottom:1px solid var(--border-soft)} .learn-faq-item:first-child{padding-top:0} .learn-faq-item:last-child{border-bottom:none;padding-bottom:0} .learn-faq-q{color:var(--gold);font-weight:700;font-size:15px; margin-bottom:6px;display:block} .learn-faq-item p{margin:0;line-height:1.6} .method-weight-row{display:flex;justify-content:space-between;align-items:center; background:var(--card-bg);padding:11px 14px;font-size:14px} .method-weight-row b{color:var(--gold);font-weight:800} .method-max{font-size:12px;font-weight:600;color:var(--muted);text-transform:none; margin-left:8px} .method-list{margin:8px 0 0;padding-left:20px} .method-list li{font-size:14px;line-height:1.6;margin-bottom:10px} .method-table{width:100%;border-collapse:collapse;font-size:14px} .method-table th{text-align:left;padding:9px 12px;border-bottom:2px solid var(--border); font-size:12.5px;color:var(--muted)} .method-table td{padding:9px 12px;border-bottom:1px solid var(--border-soft)} .method-link{display:inline-block;margin-top:10px;margin-bottom:20px;font-size:13px;font-weight:600; color:var(--gold)} .method-link:hover{text-decoration:underline} .desc{font-size:15.5px;line-height:1.75;color:var(--text)} .price-range-bar{margin-bottom:12px} .price-range-track{position:relative;height:8px;border-radius:6px; background:linear-gradient(90deg,#DC262655,#D9770655,#05966955);margin-bottom:8px} .price-range-dot{position:absolute;top:50%;width:14px;height:14px;border-radius:50%; background:var(--gold);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25); transform:translate(-50%,-50%)} .price-range-labels{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted)} .note{font-size:13.5px;color:var(--muted);margin-top:12px;line-height:1.65} /* Checklist */ .check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px 22px} .check-row{display:flex;align-items:center;gap:11px;padding:11px 0; border-bottom:1px solid var(--border-soft)} .check-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center; justify-content:center;font-size:13px;font-weight:700;flex-shrink:0} .check-strong .check-icon{background:var(--tint-green);color:var(--green)} .check-ok .check-icon{background:var(--tint-indigo);color:var(--gold)} .check-weak .check-icon{background:var(--tint-red);color:var(--red)} .check-unknown .check-icon{background:var(--tint);color:var(--muted)} .check-label{font-size:15px;font-weight:600} .check-detail{font-size:13.5px;color:var(--muted)} /* Drivers */ .drivers-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} .driver-item{display:flex;gap:9px;padding:8px 0;font-size:13.5px;line-height:1.45; border-bottom:1px solid var(--border-soft)} .driver-item:last-child{border-bottom:none} .sign{font-weight:700;flex-shrink:0;width:12px} .sign.pos{color:var(--green)} .sign.neg{color:var(--red)} /* Pillars */ .pillars-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px} .pillar-card{background:var(--tint);border-radius:9px;padding:14px} .pillar-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px} .pillar-name{font-size:13px;font-weight:600} .pillar-score{font-size:20px;font-weight:700} .pillar-bar-bg{height:5px;background:var(--border);border-radius:4px;overflow:hidden} .pillar-bar-fill{height:100%;border-radius:4px} .pill-info{display:inline-flex;align-items:center;justify-content:center;width:15px; height:15px;border-radius:50%;background:var(--border);color:var(--muted); font-size:10px;font-weight:700;margin-left:5px;cursor:help;position:relative} .pill-info:hover::after{content:attr(data-tip);position:absolute;bottom:22px;left:50%; transform:translateX(-50%);background:var(--navy);padding:9px 12px;border-radius:7px; font-size:12px;font-weight:400;line-height:1.5;width:220px;text-align:left;z-index:20; border:1px solid var(--navy);color:#fff} /* Lifecycle + trends */ .life-badge{display:inline-block;padding:7px 15px;border-radius:24px;font-weight:700; margin-bottom:10px} .trend-legend{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:14px;font-size:12px; color:var(--muted)} .trend-legend span{display:flex;align-items:center;gap:6px} .dot{width:10px;height:10px;border-radius:50%;display:inline-block} .trend-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px} .trend-card{background:var(--tint);border-radius:9px;padding:12px 14px} .trend-top{display:flex;justify-content:space-between;margin-bottom:4px} .trend-label{font-size:12px;color:var(--muted)} .trend-arw{font-size:16px;font-weight:700} .trend-word{font-size:13.5px;font-weight:600;text-transform:capitalize} .trend-chg{font-size:11.5px;color:var(--muted);margin-top:2px} .trend-note{font-size:11px;color:var(--muted);margin-top:6px;padding-top:6px; border-top:1px solid var(--border-soft);line-height:1.4} .trend-up .trend-arw,.trend-up .trend-word{color:var(--green)} .trend-down .trend-arw,.trend-down .trend-word{color:var(--red)} .trend-flat .trend-arw,.trend-flat .trend-word{color:var(--gold)} /* Explanations */ .explain-block{margin-bottom:14px} .explain-head{font-size:11.5px;font-weight:700;text-transform:uppercase; letter-spacing:.06em;color:var(--gold);margin-bottom:5px} .explain-block p{font-size:15.5px;line-height:1.75;color:var(--text)} /* Metrics */ .metric-group{margin-bottom:20px} .metric-group:last-child{margin-bottom:0} .metric-group-title{font-size:11.5px;font-weight:700;text-transform:uppercase; letter-spacing:.07em;color:var(--gold);margin-bottom:10px;padding-bottom:6px; border-bottom:1px solid var(--tint-indigo-border)} .metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px} .metric-label{font-size:11.5px;color:var(--muted)} .metric-val{font-size:15px;font-weight:700;margin-top:2px} /* Lender */ .lend-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px} .lend-card{background:var(--tint);border-radius:9px;padding:14px 16px} .lend-label{font-size:12px;color:var(--muted)} .lend-value{font-size:20px;font-weight:700;color:var(--gold);margin:4px 0} .lend-detail{font-size:11.5px;color:var(--muted);line-height:1.5} /* Charts */ .chart-rows{display:flex;flex-direction:column;gap:9px} .chart-row{display:flex;align-items:center;gap:12px} .chart-yr{width:48px;font-size:12px;color:var(--muted)} .chart-track{flex:1;height:22px;background:var(--tint);border-radius:4px;overflow:hidden} .chart-fill{height:100%;border-radius:4px} .chart-val{width:110px;text-align:right;font-size:12.5px;font-weight:600} .cc-badge{display:inline-block;padding:5px 12px;border-radius:6px;font-size:12.5px; font-weight:600;margin-bottom:14px} /* Tables */ .table-wrap{overflow-x:auto} .fyc-table,.peer-table,.screen-table{width:100%;border-collapse:collapse;font-size:13.5px} .screen-table{min-width:1080px} .act-month-table{width:100%;border-collapse:collapse;font-size:13.5px} .act-month-table th{text-align:left;padding:10px 8px;color:var(--muted); font-size:11.5px;text-transform:uppercase;letter-spacing:.02em; border-bottom:1px solid var(--border)} .act-month-table td{padding:10px 8px;border-bottom:1px solid var(--border-soft)} .act-month-table tr:last-child td{border-bottom:none} .act-month-table form{margin:0} .peer-table{min-width:560px} .fyc-table th,.peer-table th,.screen-table th{text-align:left;padding:11px 12px; font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted); border-bottom:1px solid var(--border);white-space:nowrap} .fyc-table td{padding:11px 12px;border-bottom:1px solid var(--border-soft)} .fyc-table td:not(:first-child){text-align:right} .peer-table td,.screen-table td{padding:0;border-bottom:1px solid var(--border-soft)} .peer-table tr:hover td,.screen-table tr:hover td{background:var(--page-bg)} .peer-table tr.is-current td{background:var(--tint-indigo)} .peer-name{font-weight:600} .cell{display:block;width:100%;padding:11px 12px;color:inherit;text-decoration:none} td.num .cell{text-align:right} .fyc-arrow{font-size:15px;font-weight:700} .fyc-up{color:var(--green)} .fyc-down{color:var(--red)} .fyc-flat{color:var(--muted)} .fyc-verdict{font-size:14px;line-height:1.6;padding:13px 16px;border-radius:9px; background:var(--tint-green);border-left:3px solid var(--green);margin-top:16px} .rel{font-size:10px;font-weight:700;margin-left:7px} .rel.best{color:var(--green)} .rel.worst{color:var(--red)} .rel.mid{color:var(--muted)} .pill{display:inline-block;padding:3px 9px;border-radius:20px;font-size:12px;font-weight:700; white-space:nowrap;flex-shrink:0} /* Capital allocation */ .cap-summary{font-size:14px;line-height:1.6;padding:13px 16px;border-radius:9px; background:var(--tint-indigo);border-left:3px solid var(--gold);margin-bottom:16px} .cap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px 22px} .cap-row{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--border-soft)} .cap-mark{font-weight:700;flex-shrink:0;width:16px} .cap-yes .cap-mark{color:var(--green)} .cap-no .cap-mark{color:var(--muted)} .cap-label{font-size:13.5px;font-weight:600} .cap-detail{font-size:12px;color:var(--muted)} /* Consistency */ .cons-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0 3px} .cons-right{display:flex;align-items:center;gap:11px} .cons-stars{font-size:15px;letter-spacing:2px;color:var(--gold)} .cons-meta{font-size:11.5px;color:var(--muted);padding-bottom:9px; border-bottom:1px solid var(--border-soft)} /* Watch / flags / signals */ .watch-head{font-size:12px;font-weight:700;text-transform:uppercase; letter-spacing:.06em;color:var(--muted);margin-bottom:9px} .watch-item{display:flex;gap:10px;padding:7px 0;font-size:13.5px;line-height:1.5} .dot-a{color:var(--amber);font-weight:700} .flag-item,.sig-item{padding:9px 0;font-size:13.5px;line-height:1.6; border-bottom:1px solid var(--border-soft);color:var(--text)} .flag-item:last-child,.sig-item:last-child{border-bottom:none} .suit-wrap{display:flex;flex-wrap:wrap;gap:9px} .suit-pill{padding:7px 13px;border-radius:20px;font-size:12.5px;font-weight:500} .suit-yes{background:var(--tint-green);color:var(--green);border:1px solid var(--tint-green-border)} .suit-no{background:var(--tint);color:var(--muted);border:1px solid var(--border)} /* 52-week range */ .range-track{position:relative;height:8px;border-radius:8px;margin:26px 0 8px; background:linear-gradient(90deg,var(--tint-red-border),var(--tint-amber-border),#34D399)} .range-dot{position:absolute;top:50%;width:15px;height:15px;border-radius:50%; background:var(--gold);border:3px solid #fff;box-shadow:0 0 0 1px var(--border); transform:translate(-50%,-50%)} .range-ends{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)} .range-ends b{display:block;color:var(--white);font-size:14px;font-weight:600;margin-top:2px} /* ── Paywall ───────────────────────────────────────────────── */ .paywall{background:var(--tint-indigo); border:1px solid var(--tint-indigo-border);border-radius:var(--radius); padding:36px 28px;text-align:center;margin:20px 0} .paywall-icon{font-size:34px;margin-bottom:10px} .paywall h3{font-size:20px;font-weight:700;margin-bottom:8px} .paywall>p{color:var(--muted);font-size:14px;margin-bottom:18px} .paywall-list{list-style:none;max-width:440px;margin:0 auto 22px;text-align:left} .paywall-list li{padding:7px 0 7px 26px;position:relative;font-size:14px;color:var(--text)} .paywall-list li::before{content:'✔';position:absolute;left:0;color:var(--green);font-weight:700} .paywall-alt{font-size:12.5px;color:var(--muted);margin-top:12px} .paywall-alt a{color:var(--gold)} .meter-bar{background:var(--card-bg);border:1px solid var(--tint-indigo-border); border-radius:10px;padding:18px 22px;font-size:17px;font-weight:600; color:var(--text);text-align:center;margin-top:22px;line-height:1.6} .meter-bar a{color:var(--gold);font-weight:700;white-space:nowrap} .meter-bar a:hover{text-decoration:underline} @media(max-width:600px){.meter-bar{font-size:15px;padding:15px 16px}} /* ── Screener ──────────────────────────────────────────────── */ .compare-adder{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .compare-chip-bar{display:flex;align-items:center;justify-content:space-between; flex-wrap:wrap;gap:10px;margin:14px 0} .compare-chips{display:flex;gap:8px;flex-wrap:wrap} .compare-chip{background:var(--tint);border:1px solid var(--border);border-radius:20px; padding:6px 8px 6px 14px;font-size:13.5px;font-weight:600;display:inline-flex; align-items:center;gap:8px} .watch-chip-wrap{display:flex;flex-wrap:wrap;gap:10px} .watch-chip{background:var(--tint);border:1px solid var(--border);border-radius:20px; box-shadow:var(--shadow);padding:10px 10px 10px 16px;font-size:14px;font-weight:700; display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--white)} .watch-chip:hover{border-color:var(--gold)} .watch-chip-count{background:#1F2937;color:#FBBF24;border-radius:12px; min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center; font-size:12.5px;font-weight:800;padding:0 6px} .wcard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px} .wcard{position:relative;background:var(--card-bg);border-radius:var(--radius); box-shadow:var(--shadow);padding:18px} .wcard .watch-star{position:absolute;top:16px;right:16px;background:none;border:none; font-size:20px;color:var(--border);cursor:pointer;z-index:1} .wcard .watch-star.on{color:var(--gold)} .wcard-link{text-decoration:none;color:inherit;display:block} .sector-trend-card{text-decoration:none;color:inherit;display:block} .wcard-head{display:flex;justify-content:space-between;align-items:flex-start; padding-right:28px} .wcard-name{font-size:16px;font-weight:700} .wcard-sym{font-size:12.5px;color:var(--muted);margin-top:2px} .wcard-score{font-size:22px;font-weight:800} .wcard-divider{border-top:1px solid #C2410C;margin:14px 0} .wcard-ratios{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} .scr-tags{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted)} .scr-pills{display:flex;flex-wrap:wrap;gap:10px 14px} .scr-pill{display:flex;flex-direction:column;gap:3px;font-size:11px} .scr-pill b{border-radius:6px;padding:2px 7px;font-size:13px;font-weight:700;text-align:center} .wcard-ratios div{display:flex;flex-direction:column;gap:2px} .wcard-ratios span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.02em} .wcard-ratios b{font-size:14px;font-weight:700} .wcard-pillars{display:grid;row-gap:10px;column-gap:16px;align-items:center} .wcard-pillars > div{text-align:center} .wcard-month{font-size:10.5px;color:var(--muted);font-weight:700;text-transform:uppercase} .wcard-pillar-label{font-size:12.5px;color:var(--muted);font-weight:600;white-space:nowrap;text-align:left !important} .compare-chip-x{background:none;border:none;color:var(--muted);cursor:pointer; font-size:12px;padding:2px 4px;border-radius:50%;line-height:1} .compare-chip-x:hover{background:var(--border);color:var(--white)} .compare-clear-all{font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap} .compare-clear-all:hover{color:var(--red);text-decoration:underline} .compare-pillar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px} .compare-pillar-card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow); padding:16px} .history-trend{font-size:24px;font-weight:800;line-height:1;vertical-align:middle;display:inline-block} .history-trend-up{color:var(--green)} .history-trend-down{color:var(--red)} .history-trend-flat{color:var(--gold)} .compare-pillar-title{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase; letter-spacing:.03em;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #C2410C} .compare-pillar-row{display:flex;justify-content:space-between;align-items:center; padding:8px 6px;border-radius:6px;text-decoration:none;color:inherit} .compare-pillar-row:hover{background:var(--page-bg)} .compare-pillar-company{font-size:13.5px;font-weight:600} .compare-pillar-val{font-weight:700;font-size:14px} .compare-better{background:var(--tint-green2)} .compare-better:hover{background:var(--tint-green)} .panel{background:var(--card-bg);border-radius:var(--radius); padding:20px 22px;margin-bottom:20px;box-shadow:var(--shadow)} .filter-top{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px} .filter-top input[type=text],.filter-top select{background:var(--card-bg); border:1px solid var(--border);color:var(--white);padding:9px 13px; border-radius:8px;font-size:13.5px} .filter-top input[type=text]{flex:1;min-width:210px} .filter-top select{min-width:150px} .group-title{font-size:13px;font-weight:700;text-transform:uppercase; letter-spacing:.07em;color:#C2410C;margin:18px 0 12px; padding-bottom:6px;border-bottom:1px solid var(--tint-indigo-border)} .filter-sliders{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px 24px;position:relative} .filter-sliders.locked{opacity:.4} .slider-row label{display:flex;justify-content:space-between;align-items:baseline; font-size:12.5px;color:var(--muted);margin-bottom:6px} .slider-row label b{color:var(--gold);font-size:13px} input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:4px; background:var(--border);border-radius:4px;outline:none} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px; border-radius:50%;background:var(--gold);border:2px solid #fff;cursor:pointer} input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%; background:var(--gold);border:2px solid #fff;cursor:pointer} .lock-overlay{position:absolute;inset:-6px;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:10px;background:rgba(241,239,232,.9); font-size:14px;border-radius:9px} .checks{display:flex;gap:18px;flex-wrap:wrap} .chk{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);cursor:pointer} .chk input{accent-color:var(--gold);width:15px;height:15px;cursor:pointer} .preset-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px} .preset-chip{font-size:13px;font-weight:600;color:var(--gold);background:var(--card-bg); border:1px solid var(--border);padding:7px 14px;border-radius:20px;box-shadow:var(--shadow)} .preset-chip:hover{border-color:var(--gold);background:var(--tint-indigo)} .preset-chip-soon{color:var(--muted);cursor:default;opacity:.6} .preset-chip-soon:hover{border-color:var(--border);background:var(--card-bg)} .active-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px} .filter-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600; color:var(--gold);background:var(--card-bg);border:1px solid var(--border); padding:5px 10px;border-radius:20px;box-shadow:var(--shadow)} .filter-chip span{color:var(--muted);font-weight:400} .filter-chip:hover{border-color:var(--gold)} .filter-clear{font-size:12.5px;color:var(--muted);text-decoration:underline} .filter-clear:hover{color:var(--red)} .result-bar{display:flex;justify-content:space-between;align-items:center; margin-bottom:14px;flex-wrap:wrap;gap:10px} .empty,.loading{padding:52px;text-align:center;color:var(--muted)} .pager{display:flex;gap:8px;align-items:center;justify-content:center; margin-top:22px;flex-wrap:wrap} .pager a{padding:7px 13px;border-radius:7px;background:var(--card-bg); border:1px solid var(--border);font-size:13px} .pager a.active{background:var(--gold);color:#fff;font-weight:700;border-color:var(--gold)} /* ── Auth ──────────────────────────────────────────────────── */ .auth-wrap{max-width:420px;margin:56px auto;padding:0 20px} .auth-card{background:var(--card-bg);border-radius:var(--radius); padding:32px;box-shadow:var(--shadow)} .auth-card h1{font-size:22px;font-weight:700;margin-bottom:8px} .auth-card>p{color:var(--muted);font-size:14px;margin-bottom:20px} .auth-card label{display:block;font-size:13px;color:var(--muted);margin-bottom:14px} .auth-card input{width:100%;background:var(--card-bg);border:1px solid var(--border); color:var(--white);padding:11px 13px;border-radius:8px;margin-top:5px;font-size:14px} .auth-card input:focus{outline:none;border-color:var(--gold)} .hint{font-size:11.5px;color:var(--muted);display:block;margin-top:4px} .detail-section form label{display:block;font-size:13px;color:var(--muted);margin-bottom:14px} .detail-section form input[type=text]{width:100%;background:var(--card-bg);border:1px solid var(--border); color:var(--white);padding:11px 13px;border-radius:8px;margin-top:5px;font-size:14px} .detail-section form input[type=text]:focus{outline:none;border-color:var(--gold)} .upi-id-box{background:var(--tint);border:1px dashed var(--border);border-radius:8px; padding:14px 16px;font-size:17px;font-weight:700;text-align:center; letter-spacing:.02em;margin:14px 0} .auth-alt{font-size:13px;color:var(--muted);margin-top:16px;text-align:center} .auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0; color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em} .auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)} .btn-google{display:flex;align-items:center;justify-content:center;gap:10px; background:var(--card-bg);border:1px solid var(--border);color:var(--white); font-weight:600;font-size:14px;padding:11px;border-radius:8px;text-decoration:none} .btn-google:hover{background:var(--tint);border-color:var(--muted)} .auth-alt a{color:var(--gold)} .alert{padding:12px 14px;border-radius:8px;font-size:13.5px;margin-bottom:16px;line-height:1.5} .alert.err{background:var(--tint-red);color:var(--text-on-tint-red);border:1px solid var(--tint-red-border)} .alert.ok{background:var(--tint-green2);color:var(--text-on-tint-green);border:1px solid var(--tint-green-border)} /* ── Plans ─────────────────────────────────────────────────── */ .plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px} .plan{background:var(--card-bg);border-radius:var(--radius); padding:26px;position:relative;box-shadow:var(--shadow)} .plan-featured{border-color:var(--gold);box-shadow:0 0 0 1px rgba(15,118,110,.25)} .plan-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%); background:var(--gold);color:#fff;font-size:11px;font-weight:700; padding:4px 12px;border-radius:20px} .plan-name{font-size:14px;color:var(--muted);font-weight:600} .plan-price{font-size:32px;font-weight:700;margin:6px 0 18px} .plan-price span{font-size:14px;color:var(--muted);font-weight:500} .plan ul{list-style:none;margin-bottom:20px} .plan li{padding:7px 0;font-size:13.5px;color:var(--text)} .plan li.off{color:var(--muted);opacity:.6} .plan-current{text-align:center;font-size:13px;color:var(--muted);padding:9px} .plan-status{background:var(--tint);border-radius:9px;padding:14px;margin-bottom:14px} .plan-status.active{background:var(--tint-green);border:1px solid var(--tint-green-border)} .faq{margin-top:40px} .faq h3{font-size:17px;font-weight:700;margin-bottom:14px} .faq-q{font-size:13.5px;color:var(--muted);line-height:1.7;margin-bottom:14px} .faq-q b{color:var(--white)} .kv{display:flex;justify-content:space-between;padding:10px 0; border-bottom:1px solid var(--border-soft);font-size:14px} .kv span{color:var(--muted)} .kv a{color:var(--gold)} /* ── News ──────────────────────────────────────────────────── */ .news-item{padding:14px 0;border-bottom:1px solid var(--border-soft)} .news-item:last-child{border-bottom:none} .news-cat{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10.5px; font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px} .news-headline{font-size:14px;font-weight:600;line-height:1.45} .news-summary{font-size:13px;color:var(--muted);margin-top:5px;line-height:1.6} .news-meta{display:flex;gap:12px;font-size:11.5px;color:var(--muted);margin-top:7px} .news-link{color:var(--gold)} /* ── Footer ────────────────────────────────────────────────── */ footer{border-top:1px solid var(--border);margin-top:52px;padding:30px 24px 22px} .foot-inner{max-width:1240px;margin:0 auto} .foot-note{color:var(--muted);font-size:13px;max-width:560px;line-height:1.65;margin-top:8px} .foot-legal{max-width:1240px;margin:20px auto 0;padding-top:16px; border-top:1px solid var(--border);font-size:11.5px;color:var(--muted);line-height:1.65} .foot-copy{max-width:1240px;margin:14px auto 0;padding-top:14px; border-top:1px solid var(--border);display:flex;justify-content:space-between; gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted)} @media(max-width:1000px){.row-grid{grid-template-columns:repeat(2,1fr)}.mover-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:760px){ nav{padding:14px 16px}.nav-links{gap:12px}.nav-links a{font-size:13px} .hero{padding:34px 18px 22px}.hero h1{font-size:26px} .wrap{padding:20px 16px 44px} .search-wrap{flex-direction:column} .drivers-grid,.check-grid,.cap-grid{grid-template-columns:1fr} .stock-head h1{font-size:22px} .filter-sliders{grid-template-columns:1fr 1fr;gap:12px 16px} } @media(max-width:600px){.row-grid{grid-template-columns:1fr}.mover-grid{grid-template-columns:1fr}} .shell{display:block;max-width:1240px;margin:0 auto} .ad-rail{display:none} .ad-slot{width:300px;height:600px;background:var(--card-bg); border:1px dashed var(--border);border-radius:10px; display:flex;align-items:center;justify-content:center; color:var(--muted);font-size:11px;letter-spacing:.05em} /* Mobile/narrow replacement for the side rails — same free-users-only content, different shape and position since there is no room for a 300px column next to a phone-width page. Shown by default; the min-width:1280px query below turns it off exactly where the real rails turn on, so the two never show at once and free visitors are never simply skipped in between. */ .ad-slot-mobile{margin:28px auto 0;text-align:center;display:flex; flex-direction:column;align-items:center;gap:16px} .ad-slot-mobile .ad-slot{width:300px;height:250px} @media(min-width:1280px){ .shell{display:grid;grid-template-columns:300px minmax(0,1fr) 300px; gap:24px;max-width:1900px;padding:0 20px;align-items:start} .ad-rail{display:block;position:sticky;top:88px} .ad-rail-left{grid-column:1;grid-row:1} .ad-rail-right{grid-column:3;grid-row:1} .shell > .wrap{grid-column:2;grid-row:1;padding-left:0;padding-right:0;max-width:none;min-width:0;margin:0} .shell-plain{display:block;max-width:1240px;padding:0} .ad-slot-mobile{display:none} } @media(min-width:1600px){ .shell{gap:32px;padding:0 28px} } /* ── Stock page search ───────────────────────────────────────────────────── */ .stock-search{position:relative;max-width:520px;margin:0 0 22px} .admin-search-wrap{position:relative;flex:1;min-width:210px} .admin-search-wrap input[type=text]{width:100%} #pickInput{background:var(--card-bg);border:1px solid var(--border); color:var(--white);padding:13px 16px;border-radius:10px;font-size:15px} #pickInput:focus{outline:none;border-color:var(--gold)} #addBtn{padding:13px 22px;border-radius:10px} .stock-search input{width:100%;background:var(--card-bg);border:1px solid var(--border); color:var(--white);padding:11px 15px 11px 40px;border-radius:10px;font-size:14px} .stock-search input:focus{outline:none;border-color:var(--gold)} .stock-search .mag{position:absolute;left:14px;top:50%;transform:translateY(-50%); color:var(--muted);font-size:14px;pointer-events:none} /* ── Mobile nav ──────────────────────────────────────────────────────────── */ .nav-toggle{display:none;background:none;border:1px solid var(--border); border-radius:8px;padding:7px 10px;cursor:pointer;line-height:0} .nav-toggle span{display:block;width:19px;height:2px;background:var(--white); border-radius:2px;margin:4px 0;transition:transform .22s,opacity .18s} .nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg)} .nav-toggle.open span:nth-child(2){opacity:0} .nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* A