/* SunSleuth V1.4 (formerly ShadeCheck). All colors live in theme variables (Garden = default, Daylight = light outdoor theme). */
:root, [data-theme="garden"] { color-scheme: dark;
  --bg:#0B0F0A; --card:#151C13; --card2:#1B2418; --line:#34432F; --text:#F4F8EF; --muted:#B7C4AE; --accent:#D9F99D; --ink:#0B1405;
  --blocked:#FF8A65; --warn:#FBBF24; --danger:#FF9E80; --input:#0A0D09; --sun:#D9F99D; --cloud:#7D8977; --grid:#33412E; --header-bg:rgba(11,15,10,.96);
  --pill-good-bg:#2A3F1C; --pill-good-fg:#D9F99D; --pill-part-bg:#3D3214; --pill-part-fg:#FBBF24; --pill-bad-bg:#4A2418; --pill-bad-fg:#FFB199;
  --dome-bg:#0A0E09; --dome-empty:#141B12; --dome-target:#243220; --dome-open:#3B6B45; --dome-open-m:#4C8A57; --dome-blk:#FF9F7F; --dome-blk-m:#FFB59C; --dome-hatch:#3A1A0E; --dome-line:rgba(244,248,239,.22); --dome-label:#F4F8EF;
  --path-today:#FFD23F; --path-jun:#F2A0FF; --path-eq:#F2F2F2; --path-dec:#8CC8FF; --path-halo:#0B0F0A; --sun-now:#FFF6A0;
  --ar-shade:rgba(0,0,0,.62); --ar-text:#F4F8EF; --ar-open:rgba(120,200,140,.16); --ar-target:rgba(255,255,255,.14); --ar-blk:rgba(255,138,101,.45); --ar-hatch:rgba(60,20,8,.6); --ar-ring:rgba(244,248,239,.25); --ar-horizon:rgba(244,248,239,.75); --ar-arrow:#FFFFFF; --ar-track:#2E3B2A; --ar-progress:#D9F99D;
  --logo-sun:#FFD23F; --logo-glass:#D9F99D; --scrim:rgba(0,0,0,.6);
  --s1:#D9F99D; --s2:#6DB7FF; --s3:#FF8A65; --s4:#F2A0FF; --s5:#FFD23F; --s6:#7FE0C8;
  --viewer-bg:radial-gradient(circle at 50% 40%, #1f2b1b, #070907); --shadow:0 10px 30px rgba(0,0,0,.45);
}
[data-theme="daylight"] { color-scheme: light;
  --bg:#F7F5EE; --card:#FFFFFF; --card2:#F1EEE4; --line:#CDC7B3; --text:#1C2416; --muted:#4F5B47; --accent:#2F7D1E; --ink:#FFFFFF;
  --blocked:#C2410C; --warn:#B45309; --danger:#B91C1C; --input:#FFFFFF; --sun:#3F8F2A; --cloud:#8A948A; --grid:#E2DDCF; --header-bg:rgba(247,245,238,.97);
  --pill-good-bg:#DCF0D2; --pill-good-fg:#1F5C12; --pill-part-bg:#FDEBC8; --pill-part-fg:#7A4205; --pill-bad-bg:#FBD9C9; --pill-bad-fg:#9A3412;
  --dome-bg:#E9EDE0; --dome-empty:#DDE2D2; --dome-target:#CBD5BA; --dome-open:#B5DDA6; --dome-open-m:#A3D392; --dome-blk:#C2410C; --dome-blk-m:#9A3412; --dome-hatch:#FFE1D2; --dome-line:rgba(28,36,22,.25); --dome-label:#1C2416;
  --path-today:#7C4A03; --path-jun:#7E22CE; --path-eq:#3F4752; --path-dec:#1D5FC0; --sun-now:#7C4A03; --path-halo:#FFFFFF;
  --ar-shade:rgba(255,255,255,.88); --ar-text:#1C2416; --ar-open:rgba(47,125,30,.18); --ar-target:rgba(255,255,255,.28); --ar-blk:rgba(194,65,12,.45); --ar-hatch:rgba(255,255,255,.65); --ar-ring:rgba(255,255,255,.45); --ar-horizon:rgba(255,255,255,.95); --ar-arrow:#FFFFFF; --ar-track:#D9D4C3; --ar-progress:#2F7D1E;
  --logo-sun:#E08E0B; --logo-glass:#1C2416; --scrim:rgba(28,36,22,.45);
  --s1:#2F7D1E; --s2:#1D63C9; --s3:#C2410C; --s4:#7E22CE; --s5:#A16207; --s6:#0F766E;
  --viewer-bg:radial-gradient(circle at 50% 40%, #e9efe0, #cfd8c4); --shadow:0 10px 30px rgba(28,36,22,.18);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; background:var(--bg); color:var(--text); font:16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
header { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 14px; background:var(--header-bg); border-bottom:1px solid var(--line); }
.brand { font-weight:800; font-size:19px; }
.tag { font-size:12px; font-weight:700; color:var(--muted); border:1px solid var(--line); border-radius:99px; padding:1px 8px; vertical-align:middle; }
.hdr-r { display:flex; align-items:center; gap:6px; }
.tier { display:flex; align-items:center; gap:4px; }
.tier button { width:auto; margin:0; padding:6px 11px; font-size:14px; border-radius:99px; background:transparent; color:var(--text); border:1px solid var(--line); }
.tier button.on { background:var(--accent); color:var(--ink); border-color:var(--accent); }
.gear { width:40px; height:40px; margin:0; padding:0; border-radius:99px; background:transparent; color:var(--text); border:1px solid var(--line); font-size:20px; line-height:1; }
.gear.on { border-color:var(--accent); color:var(--accent); }
.spotbar { max-width:560px; margin:0 auto; padding:8px 14px 0; font-size:14px; color:var(--muted); display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.spotbar .sbtext { flex:1 1 180px; min-width:0; }
.spotbar .seg { flex:0 0 auto; gap:4px; }
.spotbar .seg button { width:auto; margin:0; padding:6px 13px; font-size:14px; border-radius:99px; }
.spotbar b { color:var(--text); }
.spotbar a { color:var(--accent); cursor:pointer; font-weight:700; text-decoration:underline; }
main { max-width:560px; margin:0 auto; padding:4px 12px 24px; }
h2 { font-size:18px; margin:0 0 8px; font-weight:750; }
p { margin:6px 0; color:var(--muted); }
ul { margin:6px 0; padding-left:18px; color:var(--muted); }
.small { font-size:14px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px; margin:12px 0; }
.card.tight { padding:8px 12px; }
label { display:block; font-size:14px; font-weight:600; color:var(--muted); margin:12px 0 5px; }
input, select, button { width:100%; font:inherit; border-radius:12px; }
input, select { background:var(--input); color:var(--text); border:1px solid var(--line); padding:11px; }
input[type=range] { padding:0; accent-color:var(--accent); }
button { background:var(--accent); color:var(--ink); border:0; padding:12px; font-weight:750; margin-top:8px; cursor:pointer; font-size:16px; }
button.ghost { background:transparent; color:var(--text); border:1.5px solid var(--line); }
button.ghost.on { border-color:var(--accent); color:var(--accent); }
button.danger { color:var(--danger); border-color:var(--line); }
button:disabled { opacity:.4; }
.row { display:flex; gap:8px; align-items:flex-end; }
.row > * { flex:1; min-width:0; }
details > summary { cursor:pointer; color:var(--text); font-size:15px; font-weight:700; margin-top:2px; padding:4px 0; }
details.card > summary { list-style-position:inside; }
.seg { display:flex; gap:6px; }
.seg button { background:transparent; color:var(--text); border:1.5px solid var(--line); }
.seg button.on { background:var(--accent); color:var(--ink); border-color:var(--accent); }
.seg.mini button { padding:7px; font-size:14px; }
.hide { display:none !important; }
.big { font-size:26px; font-weight:800; }
a { color:var(--accent); }
/* hero headline */
.hero { padding:16px; }
.hero .hname { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.hero .hname h1 { font-size:20px; margin:0; font-weight:800; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hero .seg.htype { flex:none; gap:4px; }
.hero .seg.htype button { width:auto; margin:0; padding:5px 12px; font-size:14px; border-radius:99px; }
.chip { display:inline-block; font-size:13px; font-weight:700; border:1px solid var(--line); border-radius:99px; padding:2px 10px; color:var(--muted); white-space:nowrap; }
.hero .hmain { display:flex; align-items:center; gap:14px; margin:12px 0 4px; }
.grade { flex:none; width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:34px; font-weight:900; background:var(--accent); color:var(--ink); }
.grade.g-C, .grade.g-D { background:var(--warn); color:#1A1300; }
.grade.g-F { background:var(--blocked); color:#1A0A04; }
[data-theme="daylight"] .grade.g-C, [data-theme="daylight"] .grade.g-D { color:#FFFFFF; }
[data-theme="daylight"] .grade.g-F { color:#FFFFFF; }
.hnum { font-size:46px; font-weight:900; line-height:1.02; letter-spacing:-.5px; }
.hnum .u { font-size:22px; font-weight:800; margin-left:4px; }
.hsub { font-size:15px; color:var(--muted); font-weight:600; }
.verdict { font-size:17px; font-weight:750; margin:10px 0 4px; color:var(--text); }
.shadeline { font-size:16px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:8px; margin:6px 0; }
.shadeline .sw { flex:none; }
.hnote { font-size:14px; color:var(--muted); }
.teasebtn { display:block; width:100%; text-align:left; background:var(--card2); color:var(--text); border:1.5px dashed var(--accent); }
.teasebtn b { color:var(--accent); }
/* scan */
.viewer { position:relative; width:100%; aspect-ratio:3/4; max-height:64vh; margin:10px auto 0; background:#000; border-radius:16px; overflow:hidden; }
.viewer video, .viewer canvas { position:absolute; inset:0; width:100%; height:100%; }
.viewer video { object-fit:cover; }
.viewer canvas { touch-action:none; }
.viewer-msg { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:24px; text-align:center; background:var(--viewer-bg); }
.viewer-msg p { color:var(--text); font-size:16px; }
.viewer-msg button { width:auto; align-self:center; padding:13px 28px; }
.hud { text-align:center; color:var(--muted); margin:6px 0; min-height:20px; }
#dome { width:100%; aspect-ratio:1/1; display:block; touch-action:none; background:var(--dome-bg); border-radius:14px; }
.tools { margin-top:8px; }
.tools button { margin-top:0; padding:10px 4px; font-size:14px; }
.legend { display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; color:var(--muted); font-size:14px; font-weight:600; }
.legend i, .sw { display:inline-block; width:14px; height:14px; border-radius:3px; margin-right:5px; vertical-align:-2px; }
.sw-sun { background:var(--sun); }
.sw-cloud { background:var(--cloud); }
.sw-blk { background:repeating-linear-gradient(45deg, var(--blocked) 0 3px, var(--card) 3px 5px); outline:1px solid var(--blocked); }
.sw-dblk { background:repeating-linear-gradient(45deg, var(--dome-blk-m) 0 3px, var(--dome-hatch) 3px 5px); }
.sw-dopen { background:var(--dome-open); }
.sw-line { background:var(--text); height:3px; vertical-align:3px; }
.sw-p-today { background:var(--path-today); } .sw-p-jun { background:var(--path-jun); } .sw-p-eq { background:var(--path-eq); } .sw-p-dec { background:var(--path-dec); }
.tiles { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0; }
.tile { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:12px; }
.tile .v { font-size:26px; font-weight:850; }
.tile .k { font-size:14px; color:var(--muted); font-weight:600; }
.tile.lead { grid-column:1/3; }
.tile.lead .v { font-size:34px; }
.pill { display:inline-block; padding:2px 10px; border-radius:99px; font-size:14px; font-weight:750; }
.pill.full, .pill.pass { background:var(--pill-good-bg); color:var(--pill-good-fg); }
.pill.part { background:var(--pill-part-bg); color:var(--pill-part-fg); }
.pill.shade, .pill.fail { background:var(--pill-bad-bg); color:var(--pill-bad-fg); }
.teaser { position:relative; min-height:250px; }
.blurbox { filter:blur(6px); opacity:.65; pointer-events:none; user-select:none; }
.lock { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:6px; padding:8px; }
.lock b { font-size:19px; }
.lock span { color:var(--text); font-size:15px; font-weight:600; }
.lock button, .lockcard button { width:auto; padding:11px 20px; }
.loadrow { display:grid; grid-template-columns: minmax(0,1fr) 64px 56px 46px 38px; gap:6px; align-items:center; margin:6px 0; }
.loadrow input { padding:9px 6px; min-width:0; }
.loadrow button { margin:0; padding:9px 0; }
.loadhead { display:grid; grid-template-columns: minmax(0,1fr) 64px 56px 46px 38px; gap:6px; font-size:13px; font-weight:700; color:var(--muted); }
.ltrow { display:flex; justify-content:space-between; align-items:center; gap:8px; border-bottom:1px solid var(--line); padding:7px 0; font-size:15px; }
.ltrow button { width:38px; margin:0; padding:5px 0; }
.ltrow .m { color:var(--muted); font-size:13.5px; }
.scrollx { overflow-x:auto; }
table { border-collapse:collapse; width:100%; font-size:14.5px; }
th, td { text-align:left; padding:7px 8px; border-bottom:1px solid var(--line); white-space:nowrap; }
th { color:var(--muted); font-weight:700; }
td.best { color:var(--accent); font-weight:800; }
td.best::after { content:" ★"; }
.months { display:grid; grid-template-columns:repeat(6,1fr); gap:4px; margin-top:8px; }
.months div { text-align:center; border-radius:8px; padding:5px 0; font-size:13px; font-weight:700; }
.months .p { background:var(--pill-good-bg); color:var(--pill-good-fg); }
.months .f { background:var(--pill-bad-bg); color:var(--pill-bad-fg); }
svg { width:100%; height:auto; display:block; }
svg text { fill:var(--muted); font-size:12px; font-weight:600; font-family:inherit; }
nav.tabbar { position:fixed; left:0; right:0; bottom:0; z-index:6; display:flex; background:var(--header-bg); border-top:1px solid var(--line); padding:6px 6px calc(6px + env(safe-area-inset-bottom)); }
nav.tabbar button { margin:0 2px; padding:10px 2px; background:transparent; color:var(--muted); font-size:15px; font-weight:750; }
nav.tabbar button.on { color:var(--ink); background:var(--accent); }
nav.tabbar button .lk { font-size:11px; opacity:.85; }
.toast { pointer-events:none; position:fixed; left:50%; transform:translateX(-50%); bottom:84px; background:var(--text); color:var(--bg); padding:11px 15px; border-radius:12px; z-index:30; font-size:15px; font-weight:600; max-width:90vw; text-align:center; }
.warnbox { border-left:4px solid var(--warn); padding:5px 9px; color:var(--text); font-size:14.5px; margin:8px 0; background:var(--pill-part-bg); border-radius:0 8px 8px 0; }
.pagetitle { font-size:22px; margin:14px 2px 6px; font-weight:800; }
.addbar { display:block; width:100%; margin:10px 0; padding:15px; border:2px dashed var(--accent); background:transparent; color:var(--accent); font-size:17px; border-radius:16px; text-align:center; }
.back { width:auto; background:transparent; color:var(--accent); border:0; padding:8px 2px; margin:6px 0 0; font-weight:750; }
.scanhead { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.spotrow { display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px; margin:8px 0; cursor:pointer; }
.spotrow .ic { width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:850; background:var(--card2); color:var(--accent); flex:none; border:1px solid var(--line); }
.spotrow .body { flex:1; min-width:0; }
.spotrow .nm { font-weight:750; font-size:16.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spotrow .m { font-size:14px; color:var(--muted); font-weight:600; }
.spotrow .gmini { flex:none; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:18px; background:var(--accent); color:var(--ink); }
.spotrow .gmini.g-C, .spotrow .gmini.g-D { background:var(--warn); color:#1A1300; }
.spotrow .gmini.g-F { background:var(--blocked); color:#1A0A04; }
[data-theme="daylight"] .spotrow .gmini.g-C, [data-theme="daylight"] .spotrow .gmini.g-D, [data-theme="daylight"] .spotrow .gmini.g-F { color:#FFFFFF; }
.spotrow .gmini.g-none { background:var(--card2); color:var(--muted); border:1px dashed var(--line); font-size:14px; }
.spotrow .chev { color:var(--muted); font-size:20px; }
.empty { text-align:center; padding:22px 12px; color:var(--muted); }
#scanBtn.rescan { background:transparent; color:var(--accent); border:1.5px solid var(--accent); }
.scannote { border-left:4px solid var(--warn); padding:5px 9px; color:var(--text); }
.scannote.ok { border-left-color:var(--accent); }
footer { text-align:center; color:var(--muted); margin:18px 0 6px; }
/* payoff overlay */
.payoff { position:fixed; inset:0; z-index:20; background:rgba(0,0,0,.55); display:flex; align-items:flex-end; justify-content:center; padding:10px; }
[data-theme="daylight"] .payoff { background:rgba(28,36,22,.35); }
.payoff .sheet { width:100%; max-width:540px; max-height:96vh; overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:22px; padding:16px; box-shadow:var(--shadow); animation:pop .45s cubic-bezier(.2,1.4,.4,1); }
@keyframes pop { from { transform:translateY(40px) scale(.94); opacity:0; } to { transform:none; opacity:1; } }
.payoff .kicker { font-size:14px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.payoff .hmain { display:flex; align-items:center; gap:14px; margin:8px 0; }
.payoff .grade { width:78px; height:78px; font-size:42px; animation:pop .6s .15s both cubic-bezier(.2,1.6,.4,1); }
.payoff canvas { width:100%; max-width:330px; aspect-ratio:1/1; display:block; margin:6px auto; border-radius:14px; background:var(--dome-bg); }
.settings .opt { display:flex; gap:10px; }
.settings .opt button { display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left; background:var(--card2); color:var(--text); border:2px solid var(--line); }
.settings .opt button.on { border-color:var(--accent); }
.swatches { display:flex; gap:4px; }
.swatches i { width:18px; height:18px; border-radius:5px; border:1px solid rgba(128,128,128,.4); display:inline-block; }

/* ---------- V1.4: brand, plan pill, settings, sheets, mock Stripe ---------- */
.brand { display:flex; align-items:center; gap:7px; min-width:0; }
.logo { width:30px; height:30px; flex:0 0 auto; }
.logo.sm { width:24px; height:24px; vertical-align:-5px; margin-right:6px; }
.logo-sun { fill:var(--logo-sun); stroke:var(--logo-sun); }
.logo-glass { stroke:var(--logo-glass); }
.wordmark { font-weight:850; letter-spacing:-.01em; }
.planpill { width:auto; margin:0; padding:7px 13px; font-size:14px; border-radius:99px; background:transparent; color:var(--text); border:1.5px solid var(--line); }
.planpill.pro { background:var(--accent); color:var(--ink); border-color:var(--accent); }
.acctchip { width:30px; height:30px; margin:0; padding:0; border-radius:99px; background:transparent; color:var(--text); border:1.5px solid var(--line); font-size:14px; font-weight:700; line-height:1; text-transform:uppercase; }
.acctchip.hide { display:none; }
.procard { border-color:var(--accent); }
.procard button { margin-top:10px; }
body.noscroll { overflow:hidden; }
.modal { position:fixed; inset:0; z-index:25; background:var(--scrim); display:flex; justify-content:center; overflow:auto; }
.modal.bottom { align-items:flex-end; padding:10px; }
.modal.full { align-items:stretch; padding:0; }
.sheet2 { width:100%; max-width:540px; background:var(--card); border:1px solid var(--line); border-radius:22px; padding:16px 16px 18px; box-shadow:var(--shadow); animation:pop .35s cubic-bezier(.2,1.3,.4,1); margin-top:auto; }
.sh-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sh-head h2 { margin:0; font-size:22px; font-weight:850; display:flex; align-items:center; }
.x { width:40px; height:40px; margin:0; padding:0; border-radius:99px; background:transparent; color:var(--text); border:1.5px solid var(--line); font-size:16px; }
.reason { color:var(--text); font-weight:650; margin:10px 0 4px; }
.perks { list-style:none; padding:0; margin:10px 0; }
.perks li { padding:5px 0 5px 28px; position:relative; color:var(--text); }
.perks li::before { content:"✓"; position:absolute; left:4px; top:4px; font-weight:900; color:var(--accent); }
.plans { display:flex; gap:10px; margin-top:12px; }
.plan { flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; background:var(--card2); color:var(--text); border:2px solid var(--line); padding:12px; margin:0; }
.plan.on { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent) inset; }
.pl-top { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.pl-price { font-size:26px; font-weight:850; line-height:1.1; }
.pl-price small { font-size:14px; font-weight:650; color:var(--muted); }
.pl-sub { font-size:13px; font-weight:500; color:var(--muted); }
.badge { font-size:12px; font-weight:800; background:var(--pill-good-bg); color:var(--pill-good-fg); padding:1px 8px; border-radius:99px; }
.cta { font-size:17px; padding:14px; margin-top:12px; }
.fine { margin-top:10px; }
.fine a { cursor:pointer; font-weight:650; }
.center { text-align:center; }
.testnote { font-size:13px; font-weight:750; color:var(--pill-part-fg); background:var(--pill-part-bg); border-radius:10px; padding:7px 10px; margin-top:10px; }
.signin input { font-size:17px; }
.gbtn { display:flex; align-items:center; justify-content:center; gap:8px; }
.gbtn .g { font-weight:900; color:var(--s2); }
.spinner { width:34px; height:34px; border-radius:99px; border:4px solid var(--line); border-top-color:var(--accent); margin:14px auto; animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.setrow { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; color:var(--text); }
.setrow > span:first-child { color:var(--muted); font-weight:600; }
.setrow .seg { flex:0 0 auto; }
.setrow .seg button { width:64px; margin:0; }
.trunc { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.btncol { display:flex; flex-direction:column; }
.armed { background:var(--danger) !important; color:var(--card) !important; border-color:var(--danger) !important; }
.linklist { list-style:none; padding:0; margin:4px 0; }
.linklist li { border-bottom:1px solid var(--line); }
.linklist li:last-child { border-bottom:0; }
.linklist a { display:flex; justify-content:space-between; align-items:center; padding:11px 2px; font-weight:650; text-decoration:none; color:var(--text); cursor:pointer; }
.linklist a::after { content:"›"; color:var(--muted); font-size:20px; }
.linklist .tag { margin-left:auto; margin-right:8px; }
.about { cursor:default; user-select:none; }
.devcard { border-style:dashed; }
.devlog { margin-top:10px; font-family:ui-monospace, Menlo, Consolas, monospace; font-size:12px; color:var(--muted); max-height:180px; overflow:auto; }
.devlog b { display:block; color:var(--text); margin-bottom:4px; }
/* Mock Stripe Checkout / Customer Portal: Stripe-like light page in both themes (it stands in for stripe.com). */
.modal.ckwrap { background:#F6F9FC; }
.ck { width:100%; max-width:520px; min-height:100%; background:#FFFFFF; color:#1A1F36; font-size:16px; padding:0 0 30px; }
.ck p { color:#4F566B; }
.ck a { color:#5851DF; cursor:pointer; font-weight:650; text-decoration:none; }
.ck-bar { position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 16px; background:#FFFFFF; border-bottom:1px solid #E3E8EE; z-index:1; }
.ck-brand { font-weight:800; }
.ck-test { font-size:12px; font-weight:800; letter-spacing:.04em; color:#7A2E0E; background:#FFDEB3; border-radius:6px; padding:3px 8px; }
.ck-sum { padding:18px 16px 4px; }
.ck-prod { color:#4F566B; font-weight:600; }
.ck-amt { font-size:36px; font-weight:800; color:#1A1F36; }
.ck-amt small { font-size:15px; font-weight:600; color:#4F566B; }
.ck-ph { font-size:13px; color:#4F566B; }
.ck-form { padding:4px 16px; }
.ck label { color:#4F566B; font-size:14px; margin:14px 0 5px; }
.ck input { background:#FFFFFF; color:#1A1F36; border:1px solid #D5DBE1; border-radius:8px; box-shadow:0 1px 1px rgba(0,0,0,.04); }
.ck-card input { border-radius:0; margin-top:-1px; }
.ck-card > input:first-child { border-radius:8px 8px 0 0; margin-top:0; }
.ck-card > :last-child, .ck-card > :last-child input:first-child { border-radius:0 0 0 8px; }
.ck-card > input:last-child { border-radius:0 0 8px 8px; }
.ck-two { display:flex; } .ck-two input { flex:1; } .ck-two input:last-child { border-radius:0 0 8px 0; margin-left:-1px; }
.ck-pay { background:#5851DF; color:#FFFFFF; border-radius:8px; font-size:17px; padding:14px; margin-top:18px; }
.ck-fine { font-size:13px; text-align:center; margin-top:12px; }
.ck-err { color:#C0123C !important; font-weight:650; }
.ck-dev { margin-top:16px; padding:9px 10px; border:1px dashed #D5DBE1; border-radius:8px; font-size:13px; color:#4F566B; text-align:center; }
.ck-done { text-align:center; padding:40px 20px; }
.ck-done h3 { font-size:26px; margin:10px 0 6px; }
.ck-check { width:64px; height:64px; margin:0 auto; border-radius:99px; background:#E1F5E5; color:#1E7B34; font-size:34px; font-weight:900; display:flex; align-items:center; justify-content:center; animation:pop .5s cubic-bezier(.2,1.6,.4,1); }
.ck .spinner { border-color:#E3E8EE; border-top-color:#5851DF; }
.pt-h { font-size:20px; margin:18px 0 6px; }
.pt-sec { border-top:1px solid #E3E8EE; padding:12px 0; }
.pt-sec h4 { margin:0 0 6px; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:#4F566B; }
.pt-plan { display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.pt-btn { background:#FFFFFF; color:#1A1F36; border:1px solid #D5DBE1; border-radius:8px; }
.pt-btn.danger { color:#C0123C; }
.pt-inv { list-style:none; padding:0; margin:0; color:#4F566B; font-size:14px; }
.pt-inv li { display:flex; justify-content:space-between; gap:8px; padding:6px 0; border-bottom:1px solid #F0F3F7; }
.oneplan { display:flex; align-items:baseline; justify-content:space-between; gap:10px; background:var(--card2); border:2px solid var(--accent); border-radius:14px; padding:12px 14px; margin-top:12px; color:var(--text); }
.oneplan .pl-sub { font-size:14px; font-weight:650; color:var(--muted); }
/* affiliate links */
.aff { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 10px; padding:8px 0; border-bottom:1px solid var(--line, rgba(127,127,127,.25)); }
.aff-name { font-weight:650; color:var(--text); }
.aff-go a { font-weight:700; }
.adtag { display:inline-block; font-size:12px; font-weight:750; padding:1px 7px; border-radius:999px; border:1px solid var(--muted); color:var(--text); margin-left:4px; white-space:nowrap; }
.aff-disc { font-size:13px; color:var(--text); margin:8px 0 0; }
/* V1.5: rename in place, panels editor */
.hero .hname h1 { flex:1; }
.hname-in { width:100%; margin:0; padding:2px 4px; font:inherit; font-size:20px; font-weight:800; color:var(--text); background:transparent; border:1px dashed transparent; border-radius:8px; text-overflow:ellipsis; }
.hname-in:hover { border-color:var(--line); }
.hname-in:focus { border-color:var(--accent); outline:none; background:rgba(255,255,255,0.04); }
.spotbar b.rn { text-decoration:underline dotted; text-underline-offset:3px; cursor:pointer; }
h3.sub { font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:16px 0 4px; }
.pnrow { display:flex; align-items:center; gap:6px; margin:6px 0; }
.pnrow select { flex:1; min-width:0; margin:0; }
.pnrow .pnw { flex:0 0 68px; margin:0; }
.pnrow .qty { display:flex; align-items:center; gap:4px; flex:none; }
.pnrow .qty b { min-width:18px; text-align:center; }
.pnrow .qty button, .pnrow .pnx { width:32px; height:32px; margin:0; padding:0; border-radius:99px; font-size:18px; line-height:1; }
.pnrow button:disabled { opacity:.35; }
.pntotal { margin:8px 0; }
.pnadd { border-top:1px solid var(--line); margin-top:8px; padding-top:6px; }
.pnadd .row button { margin-top:6px; }
.pntest:empty { display:none; }
.pntest { margin-top:8px; padding:8px 10px; border:1px solid var(--line); border-radius:12px; }
/* V1.6 sync */
.chip.warn { color:var(--warn, #f0b429); border-color:var(--warn, #f0b429); font-size:11px; padding:1px 7px; vertical-align:middle; margin-left:4px; }

/* V1.7 load card: AC / DC choice */
.acseg { margin:4px 0 2px; }
.acseg button { flex:1 1 0; margin:0; padding:9px 6px; font-size:14px; }
details.adv { margin:2px 0 10px; }
details.adv summary { cursor:pointer; font-size:14px; color:var(--muted); padding:4px 0; }