/* =====================================================================
   THEME BASE — shared by every beta theme (theme-bento.css,
   theme-inspected.css, theme-tierlist.css). The header links this file
   only together with one theme file, never on its own, and never on the
   admin page. style.css is untouched: delete the theme files and the site
   is back to its normal look.

   How it works. style.css re-declares the colour tokens (--ink, --surface,
   --accent …) on the header, the status strip, the hero, the footer and the
   "console" panels, in seven layers of ever more specific selectors. Section
   1 below makes all of those elements inherit the theme's tokens instead,
   so a theme only has to set its tokens once on :root. The remaining
   sections restyle the few places that used hard-coded colours, and read
   the theme's choices from --th-* variables. !important is used on purpose:
   it is the one reliable way to win over those seven layers, and style.css
   itself uses it only for [hidden] and layout fixes, none of which clash.
   ===================================================================== */

/* ---- 1. one set of tokens everywhere ---- */
.hero,.page-hero,.grave-hero,.tools-hero,.site-head,.statusbar,.site-foot,.cookiebar,
.hero-console,.scanpanel,.hero .scanpanel,body.beta .hero .scanpanel,body.beta .scanpanel,
.empty,body.beta .empty,.intro-head{
  --paper:inherit!important; --surface:inherit!important; --surface-2:inherit!important; --surface-3:inherit!important; --row-hover:inherit!important;
  --ink:inherit!important; --body:inherit!important; --muted:inherit!important;
  --line:inherit!important; --line-soft:inherit!important; --rule:inherit!important; --rule-strong:inherit!important;
  --link:inherit!important; --link-soft:inherit!important;
  --accent:inherit!important; --accent-dark:inherit!important; --accent-soft:inherit!important; --accent-ink:inherit!important;
  --alive:inherit!important; --alive-soft:inherit!important; --signal:inherit!important;
  --wobbly:inherit!important; --wobbly-soft:inherit!important; --dead:inherit!important; --dead-soft:inherit!important;
  --band:inherit!important; --band-ink:inherit!important; --band-body:inherit!important; --band-dim:inherit!important;
  --band-line:inherit!important; --band-fill:inherit!important;
}

/* ---- 2. type ---- */
body,body.beta,.empty p,body.beta .empty p,.sp-fail{font-family:var(--th-body)!important}
h1,
h2,
h3,
h4,
.h1,
.h2,
.page-h1,
.tools-h1,
.brand-name,
.panel-title,
.hero-stats b,
.plogo-fallback,
.pprice,
.vote b,
.score-ring b,
.stat .val,
.price-card .amount,
.gcard .rank,
.gcard .gname,
.rule .rn,
.tally b,
.grave-count b,
.stone .sname,
.deal-price,
.plan-price,
.gcard .glogo-fb,
.gprice,
.empty h3,
.tools-cat-head h2{
  font-family:var(--th-display)!important;font-stretch:var(--th-display-stretch,100%)}
h1,h2,h3,.h1,.h2,.page-h1,.tools-h1{font-weight:var(--th-display-weight,700)!important;letter-spacing:var(--th-display-track,-.02em)!important;
  text-transform:var(--th-display-case,none)}
.eyebrow,body.beta .eyebrow{color:var(--th-eyebrow,var(--accent))!important;font-family:var(--th-eyebrow-font,var(--mono))!important}
.eyebrow::before{background:currentColor}

/* ---- 3. the logo: each theme draws its own mark ---- */
.brand .brand-mark,.foot-brand .brand-mark{display:none!important}
.brand,.brand-name{flex:none!important;white-space:nowrap}
.brand::before,.foot-brand::before{content:"";flex:none;width:var(--th-logo-w,30px);height:var(--th-logo-h,30px);
  background:var(--th-logo) center/contain no-repeat}
.brand-name{text-transform:var(--th-brand-case,none);letter-spacing:var(--th-brand-track,-.02em)!important;
  font-weight:var(--th-brand-weight,800)!important;color:var(--band-ink)}

/* ---- 4. page ground ---- */
body,body.beta,:root[data-theme="dark"] body,:root[data-theme="dark"] body.beta{
  background-color:var(--paper)!important;background-image:var(--th-ground,none)!important}
a{color:var(--link,var(--accent))}
a:hover{color:var(--ink)}

/* ---- 5. cards ---- */
.card,body.beta .card,.tool-tile,body.beta .tool-tile,.gcard,body.beta .gcard,.tier-card,body.beta .tier-card,
.cat-card,.ledger,body.beta .ledger,.price-card{
  border-radius:var(--th-card-radius)!important;border:var(--th-card-border)!important;
  box-shadow:var(--th-card-shadow,none)!important;background-color:var(--surface)}
.gcard:hover,.tool-tile:hover,.cat-card:hover,a.card:hover{box-shadow:var(--th-card-shadow-hover,none)!important;
  transform:var(--th-card-lift,translateY(-2px))}
.ledger-head{background:var(--surface-2)!important;border-bottom-color:var(--line-soft)!important}
.tool-tile::before{display:var(--th-tile-stripe,block)}

/* ---- 6. buttons ---- */
.btn{border-radius:var(--th-btn-radius)!important;text-transform:var(--th-btn-case,none);
  letter-spacing:var(--th-btn-track,normal);font-family:var(--th-btn-font,inherit);font-weight:var(--th-btn-weight,700)}
.btn-primary,.btn.btn-primary,.empty .btn{
  background:var(--th-btn-bg)!important;border:var(--th-btn-border)!important;color:var(--th-btn-ink)!important;
  box-shadow:var(--th-btn-shadow,none)!important}
.btn-primary:hover,.btn.btn-primary:hover,.empty .btn:hover{
  background:var(--th-btn-bg-hover,var(--th-btn-bg))!important;color:var(--th-btn-ink)!important;
  box-shadow:var(--th-btn-shadow-hover,var(--th-btn-shadow,none))!important;transform:var(--th-btn-lift,none)}
.btn-primary:focus-visible{outline:2px solid var(--th-focus,var(--ink));outline-offset:2px}
.btn:not(.btn-primary){background:var(--th-btn2-bg,var(--surface))!important;border:var(--th-btn2-border)!important;
  color:var(--th-btn2-ink,var(--ink))!important}
.btn:not(.btn-primary):hover{border-color:var(--th-btn2-border-hover,var(--ink))!important;color:var(--th-btn2-ink,var(--ink))!important}
.btn-danger{color:var(--dead)!important}

/* ---- 7. header, status strip, footer ---- */
.site-head,body.beta .site-head{background:var(--th-head-bg)!important;border-bottom:var(--th-head-border)!important;
  -webkit-backdrop-filter:none;backdrop-filter:none}
/* :not(.btn): the "Create account" / "Add product" buttons live inside .nav, and a
   plain ".nav a" would out-rank ".btn-primary" and grey their label out */
.nav a:not(.btn),body.beta .nav > a:not(.btn),.site-foot a:not(.btn),.themetog,.menu > summary,body.beta .menu > summary{color:var(--band-dim)!important}
.nav a:not(.btn):hover,.nav a.active:not(.btn),.site-foot a:not(.btn):hover,.menu[open] > summary{color:var(--band-ink)!important}
.nav a.active::after{background:var(--th-nav-active,var(--ink))!important}
.nav-n{background:var(--accent-soft)!important;color:var(--accent-ink)!important}
.statusbar{background:var(--th-strip-bg)!important;color:var(--th-strip-ink,var(--band-dim))!important;
  border-bottom:var(--th-strip-border,0)!important}
.statusbar b{color:var(--band-ink)!important}
.statusbar .sb-ok{color:var(--th-strip-ok,var(--alive))!important}
.site-foot,body.beta .site-foot{background:var(--th-foot-bg)!important;color:var(--band-body)!important;
  border-top:var(--th-foot-border)!important}
@media(max-width:860px){.nav.open,body.beta .nav{background:var(--th-head-bg)!important;border-bottom:var(--th-head-border)!important}}
.menu-body,body.beta .menu-body{background:var(--surface)!important;border:var(--th-panel-border)!important;
  border-radius:var(--th-panel-radius)!important;box-shadow:var(--th-panel-shadow)!important}
.menu-body a,body.beta .menu-body a{color:var(--body)!important}
.menu-body a:hover,body.beta .menu-body a:hover{background:var(--row-hover)!important;color:var(--ink)!important}
.menu-body a.on,body.beta .menu-body a.on,.menu-body .menu-admin{color:var(--ink)!important;font-weight:700}
.menu-body .menu-head{color:var(--muted)!important}
.menu-body .menu-out{border-top-color:var(--line-soft)!important}

/* ---- 8. the hero: the theme's ground, no console grid, beam or ECG ---- */
.hero-net,.pulse-ecg,.hero-ecg-bed,.aurora{display:none!important}
.hero::before,.hero::after,.page-hero::before,.page-hero::after,.tools-hero::before,.tools-hero::after,
.grave-hero::before,.grave-hero::after{display:none!important;animation:none!important}
.hero,.page-hero,.tools-hero,.grave-hero,body.beta .hero,body.beta .page-hero,body.beta .tools-hero,
body.beta .grave-hero,body.beta .hero.tools-hero{
  background:var(--th-hero-bg,var(--paper))!important;color:var(--ink)!important;border-bottom:var(--th-hero-border,0)!important}
.hero h1,.hero .h2,.page-hero h1,.page-h1,.tools-h1,.grave-hero h1,.hero strong,.hero b{color:var(--ink)!important}
.hero .lead,.hero p.lead,.page-hero p.lead,.tools-hero p.tools-lead,.grave-hero p,.grave-hero .lead{color:var(--body)!important}
.page-hero .page-h1 span,.hero .tools-h1 span,.hero h1 span.soft{color:var(--th-hero-em,var(--ink))!important}
.hero-stats b{color:var(--th-hero-stat,var(--ink))!important}
.hero-stats span,.grave-count span,.page-hero .hero-meta{color:var(--muted)!important}
.page-hero .hero-meta b{color:var(--ink)!important}
.hero-stats > div{border-color:var(--line)!important}
.page-hero p.lead a,.hero p.lead a{color:var(--ink)!important;text-decoration:underline;text-underline-offset:3px}
.tools-hero .tools-legend a{color:var(--body)!important}
.hero .eyebrow::before,.eyebrow::before{box-shadow:none!important;animation:none!important}

/* ---- 9. the scan form, the live panel and the console ---- */
.hero .scan-box,body.beta .hero .scan-box,.hero-search,body.beta .hero-search,
.scanpanel,.hero .scanpanel,body.beta .hero .scanpanel,body.beta .scanpanel,.hero-console{
  background:var(--th-panel-bg,var(--surface))!important;border:var(--th-panel-border)!important;
  border-radius:var(--th-panel-radius)!important;box-shadow:var(--th-panel-shadow,none)!important;color:var(--ink)!important}
input,select,textarea,body.beta input,body.beta select,body.beta textarea,
.hero .scan-box input,body.beta .hero .scan-box input,body.beta .hero-search input,
.page-hero-extra input[type=search],.page-hero-extra input[type=text],.page-hero-extra input[type=url],
.tools-find input,.tools-hero .tools-find input,.foot-news-row .sub-input{
  background:var(--th-input-bg,var(--surface))!important;border:var(--th-input-border)!important;color:var(--ink)!important;
  border-radius:var(--th-input-radius,10px)!important}
.hero .scan-box input,body.beta .hero-search input,.page-hero-extra input{font-family:var(--th-body)!important}
input::placeholder,textarea::placeholder{color:var(--muted)!important}
input:focus,select:focus,textarea:focus,.hero .scan-box input:focus,body.beta .hero-search input:focus,.page-hero-extra input:focus{
  border-color:var(--th-focus,var(--ink))!important;box-shadow:0 0 0 3px var(--th-focus-ring,var(--accent-soft))!important}
input[type=checkbox],input[type=radio]{border-radius:revert!important;background:revert!important;border:revert!important}
.hero .scan-box .scan-note,.hero .scan-box p,.hero .scanpanel .muted,.hero .scanpanel .tiny{color:var(--muted)!important}
.scanpanel .sp-head,.scanpanel .sp-head *{color:var(--body)!important}
.scanpanel:not(.err) .sp-head .sp-dot{background:var(--alive)!important}
.scanpanel .gauge .g-track{fill:var(--surface)!important;stroke:var(--line)!important}
.scanpanel .gauge .g-num,.scanpanel .gauge .g-num b{color:var(--ink)!important}
.scanpanel .gauge .g-num small{color:var(--muted)!important}
.scanpanel .gauge{filter:none!important}
.hc-head{border-bottom-color:var(--line-soft)!important;color:var(--muted)!important}
.hc-dots i{background:var(--line)!important}
.hc-row,.hc-name,.hero-console .hc-row{color:var(--ink)!important}
a.hc-row:hover{background:var(--row-hover)!important;color:var(--ink)!important}
.hc-st{color:var(--alive)!important}.hc-st.bad{color:var(--dead)!important}
.hc-meta,.hc-foot{color:var(--muted)!important}.hc-foot .hc-st{color:var(--line)!important}
.hc-right,.hc-foot a,.hc-typing .hc-row.is-cur .hc-meta::after{color:var(--ink)!important}
.sp-fail,.hero .scanpanel .sp-fail{background:var(--surface-2)!important;border-color:var(--line)!important;color:var(--body)!important}
.sp-fail-head,.hero .scanpanel .sp-fail-head{color:var(--ink)!important}

/* ---- 10. palette (Ctrl+K), cookie bar, empty states, key caps ---- */
.ttk-back{background:rgba(10,10,8,.42)!important}
.ttk-box{background:var(--surface)!important;border:var(--th-panel-border)!important;border-radius:var(--th-panel-radius)!important;
  color:var(--ink)!important;box-shadow:var(--th-panel-shadow-lg,var(--shadow-lift))!important}
.ttk-in{border-bottom-color:var(--line-soft)!important}
.ttk-prompt{color:var(--ink)!important}
.ttk-in input{background:transparent!important;border:0!important;box-shadow:none!important;color:var(--ink)!important}
.ttk-g,.ttk-empty,.ttk-it .ttk-s,.ttk-it .ttk-go{color:var(--muted)!important}
.ttk-it,.ttk-it:hover{color:var(--ink)!important}
.ttk-it.is-sel{background:var(--row-hover)!important;color:var(--ink)!important}
.ttk-it.is-sel .ttk-go{color:var(--ink)!important}
.ttk-dot{background:var(--line)!important}
.ttk-dot.alive{background:var(--alive)!important;box-shadow:none!important}
.ttk-dot.dead{background:var(--dead)!important}.ttk-dot.wobbly,.ttk-dot.stale{background:var(--wobbly)!important}
.ttk-foot{border-top-color:var(--line-soft)!important;color:var(--muted)!important}
.ttk kbd,.sb-k kbd,.empty kbd,.foot-sys kbd,kbd.tt-kbd{background:var(--surface-2)!important;border-color:var(--line)!important;color:var(--body)!important}
.cookiebar{background:var(--surface)!important;color:var(--body)!important;border-top:var(--th-panel-border)!important}
.cookiebar strong{color:var(--ink)!important}.cookiebar a{color:var(--ink)!important;text-decoration:underline}
.empty,body.beta .empty{background:var(--surface-2)!important;border:var(--th-card-border)!important;
  border-radius:var(--th-card-radius)!important;color:var(--body)!important;font-family:var(--th-body)!important}
.empty::before,body.beta .empty::before,.empty h3::before{content:none!important;display:none!important}
.empty h3,body.beta .empty h3{color:var(--ink)!important}
.empty .empty-code{color:var(--muted)!important;border-top-color:var(--line-soft)!important}
.empty .empty-code b{color:var(--dead)!important}
.intro-head{background:var(--surface-2)!important;color:var(--ink)!important;border-bottom:1px solid var(--line)!important}
.intro-head h2,body.beta .intro-head h2,.intro-head .intro-pulse{color:var(--ink)!important}
.intro-card{border:var(--th-panel-border,1px solid var(--line))!important;border-radius:var(--th-panel-radius,22px)!important}
.intro-x{background:var(--surface)!important;color:var(--ink)!important;border:1px solid var(--line)!important}
.intro-head .eyebrow{color:var(--th-eyebrow,var(--ink))!important}

/* ---- 11. chips, badges, section heads, tools ---- */
.chip,body.beta .chip,.tag-pick .chip{border-radius:var(--th-chip-radius,8px)!important;font-family:var(--th-chip-font,var(--mono))!important}
.chip.on,body.beta .chip.on,.tag-pick .chip.on,:root[data-theme="dark"] .chip.on{
  background:var(--th-chip-on-bg,var(--ink))!important;border-color:var(--th-chip-on-bg,var(--ink))!important;color:var(--th-chip-on-ink,var(--paper))!important}
.badge,body.beta .badge{border-radius:var(--th-badge-radius,100px)!important;font-family:var(--th-badge-font,var(--th-body))!important;
  text-transform:var(--th-badge-case,none)!important;letter-spacing:var(--th-badge-track,.01em)!important;font-weight:700!important}
.band-head h2::before{background:var(--th-section-dot,var(--ink))!important}
body.beta .band-head{border-top-color:var(--line)!important}
.tool-demo,:root[data-theme="dark"] .tool-demo{background:var(--surface-2)!important;border-color:var(--line-soft)!important;color:var(--body)!important}
.tool-demo em,.tool-demo b.big,:root[data-theme="dark"] .tool-demo em,:root[data-theme="dark"] .tool-demo b.big{color:var(--ink)!important}
.tools-jump{background:var(--surface)!important;border-radius:var(--th-card-radius)!important}
.tools-sec{border-radius:var(--th-card-radius)!important}

/* ---- 12. status and grades: the theme's own colours ---- */
.live.alive,body.beta .live.alive{color:var(--alive)!important}
body.beta .live.alive{background:var(--alive-soft)!important}
.live.alive .dot,.dot-alive::after{background:var(--alive)!important;border-color:var(--alive)!important}
.dot-alive::after{background:transparent!important}
.grade-A{--ring-color:var(--th-grade-a,var(--alive))!important}.grade-B{--ring-color:var(--th-grade-b)!important}
.grade-C{--ring-color:var(--th-grade-c,var(--wobbly))!important}.grade-D{--ring-color:var(--th-grade-d)!important}
.grade-F{--ring-color:var(--th-grade-f,var(--dead))!important}
.result.grade-A{--g1:var(--th-grade-a,var(--alive))!important}.result.grade-B{--g1:var(--th-grade-b)!important}
.result.grade-C{--g1:var(--th-grade-c,var(--wobbly))!important}.result.grade-D{--g1:var(--th-grade-d)!important}
.result.grade-F{--g1:var(--th-grade-f,var(--dead))!important}
.gauge.grade-A{--gc:var(--th-grade-a,var(--alive))!important}.gauge.grade-B{--gc:var(--th-grade-b)!important}
.gauge.grade-C{--gc:var(--th-grade-c,var(--wobbly))!important}.gauge.grade-D{--gc:var(--th-grade-d)!important}
.gauge.grade-F{--gc:var(--th-grade-f,var(--dead))!important}
.result .result-band,.result .result-band h2,.result .result-band p,.result .result-band .grade-letter{color:var(--th-grade-ink,#FFFFFF)!important}

/* ---- 13. text on an ink/accent fill ---- */
/* style.css pairs var(--accent) or var(--ink) fills with a hard-coded white label.
   In every theme the accent is ink in light mode and near-white in dark mode, so
   the label has to be the page colour instead, or it vanishes in dark mode. */
.pagination .on,
.gcard.is-first .rank,
.finding-n,
.nav-me,
.pick-it.on::after,
.pchips .pchip.used,
.coupon-btn:hover,
.tabs-groups a.on,
.gridtop-partners .slotfree:hover,
.review-mark:hover,
.topspot-deal em,
body.beta .topspot-deal em{color:var(--paper)!important}

/* ---- 14. found by the contrast audit ---- */
/* the scan panel's device captions sit on the panel, not on the phone screen */
.scanpanel .wd-mode{color:var(--ink)!important}
.scanpanel .wd-host, .scanpanel .tally-note, .scanpanel .sp-idle{color:var(--muted)!important}
/* the phone screen in the scan panel is always white, whatever the panel around it */
.wd-idle{color:#5F6560!important}
/* the discount tag is a red fill; in dark mode the red is light, so the label turns dark */
:root[data-theme="dark"] .pprice .pct,:root[data-theme="dark"] .gprice .pct,:root[data-theme="dark"] .plan-price .pct,:root[data-theme="dark"] .deal-pct{color:#111111!important}