/* ── Light/dark tokens (default dark via .dark on ) ── */ [hidden] { display: none !important; } :root { --bg: var(--kv-bg); --card: var(--kv-card); --card-2: var(--kv-card-2); --text: var(--kv-text); --muted: var(--kv-muted); --accent: var(--kv-accent); --border: var(--kv-border); --pass: var(--kv-pass); --fail: var(--kv-fail); --warn: var(--kv-warn); } html { --kv-bg:#0f172a; --kv-card:#1e293b; --kv-card-2:#273449; --kv-text:#f1f5f9; --kv-muted:#94a3b8; --kv-accent:#38bdf8; --kv-border:#334155; --kv-pass:#22c55e; --kv-fail:#ef4444; --kv-warn:#f59e0b; } * { box-sizing: border-box; } body { margin:0; font:15px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--kv-bg); color:var(--kv-text); } .app-header { position:relative; text-align:center; padding:18px 52px; border-bottom:1px solid var(--kv-border); } .app-header h1 { font-size:1.4rem; margin:0; } .app-header p { margin:4px 0 0; color:var(--kv-muted); font-size:0.9rem; } main { max-width:1340px; margin:0 auto; padding:20px 16px 0; } .editorial { background:rgba(245,158,11,0.08); border:1px solid rgba(245,158,11,0.35); border-radius:10px; padding:12px 16px; margin-bottom:16px; } .editorial p { margin:0 0 8px; font-size:0.85rem; color:var(--kv-text); line-height:1.55; } .editorial p:last-child { margin-bottom:0; } .as-at { display:block; text-align:right; font-size:0.78rem; color:var(--kv-pass); padding:8px 12px 4px; } .status { padding:24px; text-align:center; color:var(--kv-muted); } /* ── Survivorship rules ── */ .rules-card { background:var(--kv-card); border:1px solid var(--kv-border); border-radius:12px; padding:16px 20px; margin-bottom:16px; } .rules-details summary { cursor:pointer; list-style:none; padding:0 20px; position:relative; } .rules-details summary::-webkit-details-marker { display:none; } .rules-details summary::before, .rules-details summary::after { content:'+'; position:absolute; top:0; color:var(--kv-muted); } .rules-details summary::before { left:0; } .rules-details summary::after { right:0; } .rules-details[open] summary::before, .rules-details[open] summary::after { content:'−'; } .rules-title { font-size:0.95rem; font-weight:600; color:var(--kv-text); margin:0; } .rules-intro { font-size:0.84rem; color:var(--kv-muted); line-height:1.5; margin:12px 0 12px; } .rules-list { margin:0; padding-left:20px; display:grid; gap:8px; } .rules-list li { font-size:0.84rem; color:var(--kv-muted); line-height:1.5; } .rules-list li strong { color:var(--kv-text); } .screen-summary { margin:14px 0 0; padding-top:12px; border-top:1px solid var(--kv-border); font-size:0.82rem; color:var(--kv-muted); line-height:1.5; } .screen-summary strong { color:var(--kv-pass); } .rules-cta { margin:12px 0 0; font-size:0.84rem; color:var(--kv-muted); } .rules-cta a { color:var(--kv-accent); font-weight:600; } .table-card { background:var(--kv-card); border:1px solid var(--kv-border); border-radius:12px; width:100%; min-width:0; overflow:hidden; } .table-scroll { overflow-x:auto; } #rank-table { width:100%; min-width:1120px; border-collapse:collapse; font-size:0.85rem; } #rank-table th, #rank-table td { padding:9px 10px; text-align:left; border-bottom:1px solid var(--kv-border); white-space:nowrap; } #rank-table th { color:var(--kv-muted); font-weight:600; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.03em; } #rank-table td.num, #rank-table th.num { text-align:right; } .tk { font-weight:600; } .nm { color:var(--kv-muted); font-size:0.78rem; } .tag { display:inline-block; padding:1px 7px; border-radius:10px; font-size:0.7rem; font-weight:700; border:1px solid var(--kv-border); } .tag.dcf { color:var(--kv-accent); border-color:var(--kv-accent); } .tag.ddm { color:var(--kv-warn); border-color:var(--kv-warn); } .pos { color:var(--kv-pass); font-weight:600; } .neg { color:var(--kv-fail); font-weight:600; } #rank-table td.fv { color:var(--kv-pass); font-weight:700; font-size:0.95rem; } /* ── Tool info & FAQ ── */ .tool-info { max-width:900px; margin:48px auto 0; padding:0 4px; display:grid; grid-template-columns:1fr 1fr; gap:32px; } .tool-info h2 { font-size:1rem; font-weight:600; color:var(--kv-text); margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--kv-border); } .tool-about p { font-size:0.9rem; color:var(--kv-muted); line-height:1.6; margin-bottom:8px; } .tool-about a, .editorial a { color:var(--kv-accent); } .faq-item { border-bottom:1px solid var(--kv-border); padding:10px 0; } .faq-item summary { font-size:0.9rem; font-weight:500; color:var(--kv-text); cursor:pointer; list-style:none; padding-right:20px; position:relative; } .faq-item summary::-webkit-details-marker { display:none; } .faq-item summary::after { content:'+'; position:absolute; right:0; color:var(--kv-muted); } .faq-item[open] summary::after { content:'−'; } .faq-item p { font-size:0.85rem; color:var(--kv-muted); line-height:1.6; margin-top:8px; } footer { max-width:900px; margin:40px auto 0; padding:20px 16px 40px; border-top:1px solid var(--kv-border); color:#94a3b8; font-size:0.8rem; text-align:center; } footer a { color:var(--kv-accent); } /* ── Light mode ── */ html:not(.dark) { --kv-bg:#edf2f7; --kv-card:#d4dce8; --kv-card-2:#c5cfe0; --kv-text:#0f172a; --kv-muted:#475569; --kv-border:#e2e8f0; --kv-accent:#0369a1; --kv-warn:#d97706; } html:not(.dark) footer { color:#475569; } /* ── Mobile ── */ @media (max-width:800px) { input, select, textarea { font-size:16px; } .app-header { display:flex; align-items:flex-start; gap:8px; padding:12px 16px; } .home-logo { position:static; flex:0 0 auto; order:1; padding-top:6px; } .app-header-center { flex:1; min-width:0; order:2; text-align:center; } .app-header h1 { font-size:1.1rem; } .theme-toggle { position:static; flex:0 0 auto; order:3; width:44px; height:44px; } .tool-info { grid-template-columns:1fr; } } /* ── Sharesight affiliate block ── */ .sharesight-promo { max-width: 900px; margin: 48px auto 0; padding: 0 20px; } .sharesight-promo-inner { display: flex; align-items: center; gap: 20px; padding: 18px 22px; background: var(--kv-card); border: 1px solid var(--kv-border); border-radius: 12px; } .sharesight-logo-wrap { flex: 0 0 auto; background: #fff; border-radius: 8px; padding: 6px 10px; display: flex; align-items: center; } .sharesight-logo-wrap img { height: 28px; width: auto; display: block; } .sharesight-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .sharesight-offer { font-size: 0.85rem; color: var(--kv-accent) !important; } .sharesight-copy > p:not(.sharesight-offer) { font-size: 0.85rem; color: var(--kv-muted); line-height: 1.5; } .sharesight-cta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .sharesight-cta a { display: inline-block; padding: 9px 18px; background: var(--kv-accent); color: #0f172a; font-weight: 600; font-size: 0.85rem; border-radius: 8px; text-decoration: none; white-space: nowrap; transition: opacity 0.15s; } .sharesight-cta a:hover { opacity: 0.85; } .sharesight-affiliate-note { font-size: 0.7rem; color: var(--kv-muted); text-align: right; } @media (max-width: 600px) { .sharesight-promo-inner { flex-direction: column; align-items: flex-start; gap: 14px; } .sharesight-cta { align-items: flex-start; width: 100%; } .sharesight-cta a { width: 100%; text-align: center; } .sharesight-affiliate-note { text-align: left; } } /* ── Paper portfolio hero card ── */ .portfolio-hero { margin: 0 0 16px; padding: 16px 20px; background: rgba(245, 158, 11, 0.07); border: 1px solid rgba(245, 158, 11, 0.3); border-left: 4px solid var(--kv-warn); border-radius: 10px; } .portfolio-hero-label { font-size: 0.78rem; color: var(--kv-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.04em; } .portfolio-hero-stat { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .portfolio-hero-left { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .portfolio-hero-index { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .portfolio-hero-index-name { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--kv-muted); } .portfolio-hero-value { font-size: 2rem; font-weight: 700; color: var(--kv-text); line-height: 1; } .portfolio-hero-gain { font-size: 1.25rem; font-weight: 700; } .portfolio-hero-gain.pos { color: var(--kv-pass); } .portfolio-hero-gain.neg { color: var(--kv-fail); } .portfolio-hero-note { font-size: 0.75rem; color: var(--kv-muted); margin-top: 6px; } .portfolio-hero-dividends { margin-top: 6px; font-size: 0.85rem; font-weight: 600; color: var(--kv-pass); } /* ── Hero two-column layout: stat card left, timeline chart right ── */ .portfolio-hero-row { display: flex; align-items: stretch; gap: 20px; } .portfolio-hero-col { flex: 1 1 50%; min-width: 0; } .portfolio-hero-chart-col { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid rgba(245, 158, 11, 0.25); padding-left: 20px; } .portfolio-hero-chart-title { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--kv-muted); margin-bottom: 6px; } .portfolio-hero-chart-wrap { position: relative; height: 120px; } .portfolio-hero-chart-wrap canvas { width: 100% !important; height: 120px !important; display: block; } @media (max-width: 700px) { .portfolio-hero-row { flex-direction: column; } .portfolio-hero-chart-col { border-left: none; border-top: 1px solid rgba(245, 158, 11, 0.25); padding-left: 0; padding-top: 14px; margin-top: 6px; } } /* ── Recent activity table ── */ .activity-card { margin: 16px 0 0; padding: 16px 20px; background: var(--kv-card); border: 1px solid var(--kv-border); border-radius: 10px; } .activity-title { font-size: 0.9rem; font-weight: 600; color: var(--kv-text); margin: 0 0 12px; } .activity-table { width: 100%; font-size: 0.82rem; border-collapse: collapse; min-width: 420px; } .activity-table th { color: var(--kv-muted); font-weight: 500; padding: 4px 8px; text-align: left; border-bottom: 1px solid var(--kv-border); white-space: nowrap; } .activity-table th.num, .activity-table td.num { text-align: right; } .activity-table td { padding: 6px 8px; border-bottom: 1px solid var(--kv-border); color: var(--kv-text); white-space: nowrap; } .activity-empty { text-align: center; color: var(--kv-muted); font-style: italic; padding: 16px 8px !important; } .activity-table .pos { color: var(--kv-pass); } .activity-table .neg { color: var(--kv-fail); } /* ── Play Store badge (web only) ── */ #kv-play-badge { text-align: center; padding: 0 16px 4px; margin-bottom: 12px; } #kv-play-badge .play-badge-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kv-muted); margin: 0 0 2px; } #kv-play-badge img { display: inline-block; }