/* AJKFi site 0.4.0 - DARK theme (state file section 234; mockups approved by Aaron 2026-10-13 22:45).
   Linked LAST by theme.php: media="screen" (Dark) or "screen and (prefers-color-scheme: dark)" (Auto); not used for Light.
   Grayish charcoal surfaces, the site indigo lifted for dark, neon orange + purple accents with a small glow only where it
   means something. The CSS variables switch ~400 var() uses by themselves; below them every hard-coded light colour of
   style.css / dash.css gets its dark version. Printing always uses the light look (screen only). */

:root{
  --bg:#121419; --bg-2:#1a1d23; --card:#1b1e25; --card-2:#20242c; --raise:#272b34;
  --ink:#e9ebf1; --muted:#aab1bf; --faint:#8b93a3; --line:#2b3039; --line-2:#3a404c;
  --brand:#6b78f2; --brand-2:#8c97f6; --brand-deep:#aab2ff; --brand-ink:#ffffff;
  --brand-soft:rgba(107,120,242,.16); --brand-line:rgba(107,120,242,.45);
  --accent:#6b78f2; --accent-2:#8c97f6; --accent-deep:#aab2ff; --accent-soft:rgba(107,120,242,.16); --accent-line:rgba(107,120,242,.45);
  --teal:#3fd2b4; --teal-soft:rgba(63,210,180,.14);
  --ok:#3fd2a4; --ok-soft:rgba(63,210,164,.14);
  --warn:#ffb057; --warn-soft:rgba(255,176,87,.14);
  --bad:#ff6b81; --bad-soft:rgba(255,107,129,.14);
  --info:#8f9af7; --info-soft:rgba(107,120,242,.16);
  --gold:#ffc04d; --gold-soft:rgba(255,192,77,.14);
  --shadow:0 1px 2px rgba(0,0,0,.35);
  --lift:0 18px 36px -24px rgba(0,0,0,.7);
  --neo-in:#7d89f5; --neo-or:#ff8a3d; --neo-pu:#b08cff; --neo-gy:#9aa3b3;
  --ch-coin:#7682e0; --ch-vou:#c58bd4; --ch-spark:#9d86e6; --dot-off:#5d6574;
  color-scheme:dark;
}

/* ---- style.css: base ---- */
::selection{background:rgba(107,120,242,.38)}
a{color:var(--brand-2)}
input::placeholder,textarea::placeholder{color:#6f7787}
.top{background:rgba(18,20,25,.86);border-bottom-color:var(--line)}
.top.scrolled{background:rgba(22,24,30,.94);box-shadow:0 10px 24px -20px rgba(0,0,0,.9)}
.btn:hover{border-color:#4a5160}
.btn.ghost{background:var(--card-2);border-color:var(--line-2);color:var(--ink)}
.btn.ghost:hover{background:var(--raise)}
.btn.primary{box-shadow:0 0 16px -6px rgba(107,120,242,.8)}
.btn.danger:hover{background:#e0556b;border-color:#e0556b}
.btn.google .g{border-color:var(--line-2)}
.tile.warn{border-color:rgba(255,192,77,.32)}
.flash.ok{border-color:rgba(63,210,164,.35)}
.flash.err{border-color:rgba(255,107,129,.35)}
.flash.warn{border-color:rgba(255,176,87,.35)}
tbody tr:hover td{background:var(--card-2)}
.hero h1 .soft{color:#8b93a3}
.ci.g{color:var(--gold)}
.feat:hover,div.rcard.now:hover{border-color:var(--line-2)}
.r-buy{color:#ff8a65;background:rgba(255,112,67,.12);border-color:rgba(255,112,67,.35)}
.r-buy:hover{background:rgba(255,112,67,.2)}
.steps li::before,.gnum{color:#121419;background:var(--ink)}
.cta-band{background:#1e222b;border:1px solid var(--line-2);color:var(--ink)}
.cta-band h2{color:var(--ink)}
.cta-band p{color:var(--muted)}
.cta-band .btn{background:var(--ink);border-color:var(--ink);color:#121419}
.cta-band .btn.ghost{background:transparent;border-color:var(--line-2);color:var(--ink)}
.cta-band .btn.ghost:hover{background:var(--raise)}
.cta-band .btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.note.warn{border-color:rgba(255,176,87,.32)}
.note.bad{border-color:rgba(255,107,129,.32)}
.note.ok{border-color:rgba(63,210,164,.32)}
.assist{border-color:rgba(63,210,164,.32)}
.assist .fic{background:var(--card)}
.tier.t-legend{--tl:#3a404c}
.avatar{border-color:var(--card)}
.pbox.best{border-color:rgba(63,210,164,.35)}
.price-dist{background:#0d0f13;border-color:var(--line-2)}
.leaflet-control-attribution{background:rgba(27,30,37,.88)!important}
.card.empty{background:var(--card-2)}
.top .nav{box-shadow:0 18px 40px -26px rgba(0,0,0,.9)}
.help-card{box-shadow:0 24px 50px -24px rgba(0,0,0,.9)}
.help-fab>summary{box-shadow:0 12px 28px -12px rgba(107,120,242,.8)}
.card.gen-lic{background:linear-gradient(135deg,rgba(107,120,242,.16),var(--card) 70%)}

/* ---- dash.css: account area ---- */
.top .nav a.on{background:var(--card-2);box-shadow:0 0 0 1px var(--line-2),0 0 18px -6px rgba(107,120,242,.55)}
.ico{background:rgba(125,137,245,.14)}
.ico.c-or{background:rgba(255,138,61,.14)}
.ico.c-pu{background:rgba(176,140,255,.14)}
.ico.c-gy{background:rgba(154,163,179,.12)}
.ico svg{filter:drop-shadow(0 0 4px currentColor)}
.thm a.on{background:var(--card-2);box-shadow:0 0 0 1px var(--line-2)}
.seg a.on{background:var(--card-2);box-shadow:0 0 0 1px var(--line-2)}
.kpi{background:linear-gradient(180deg,#1e222a,#1b1e25)}
.kpi.kpi-top{border-color:rgba(255,138,61,.35);box-shadow:0 0 22px -12px rgba(255,138,61,.6)}
.pickbtn{background:var(--card);border-color:var(--line-2);color:var(--ink)}
.pickbtn .n{color:#c3c9ff}
.pop,.more-pop{box-shadow:0 18px 40px rgba(0,0,0,.6)}
.tbl tr.ex td{background:repeating-linear-gradient(-45deg,transparent 0 8px,rgba(255,255,255,.025) 8px 16px)}
.tg.brand{background:rgba(107,120,242,.18);color:#b9c0ff}
.tg.warn{background:rgba(255,176,87,.16);color:#ffc27a}
.dot{box-shadow:0 0 8px var(--ok)}
.dot.off{box-shadow:none}
.dot.old{box-shadow:0 0 8px rgba(255,138,61,.7)}
.search,.sel,.pop .ps{background:var(--card-2);border-color:var(--line-2)}
.chart .cv{fill:#d7dbe6}
.card.mach.ex{background:repeating-linear-gradient(-45deg,var(--card) 0 8px,var(--card-2) 8px 16px)}
@media (max-width:900px){
  body.acct-area .tabbar{background:rgba(22,24,30,.97);border-top-color:var(--line)}
  .tabbar a.on .ico{background:rgba(125,137,245,.16)}
  .tbl.cards tr.ex{background:repeating-linear-gradient(-45deg,transparent 0 8px,rgba(255,255,255,.03) 8px 16px)}
}
@media (max-width:1099px){.top .nav{box-shadow:20px 0 50px -30px rgba(0,0,0,.9)}}

/* 0.4.4: Recommended router cards */
.rcard.rec{background:linear-gradient(180deg,rgba(107,120,242,.18),var(--card) 62%);box-shadow:var(--shadow),0 0 0 1px rgba(107,120,242,.25),0 14px 30px -20px rgba(107,120,242,.55)}
.r-rec{background:linear-gradient(90deg,#3443c4,#6b78f2 55%,#b08cff)}
/* site 0.4.4 (2026-10-16): Recommended router row. This line also changes the file so the Docker build cache cannot keep the old file date (= old ?v= token). */

/* 0.4.5: Easiest to set up / Recommended picks */
.rcard.easy{border-color:rgba(60,207,142,.45);background:linear-gradient(180deg,rgba(31,164,99,.2),var(--card) 65%);
  box-shadow:var(--shadow),0 0 0 1px rgba(60,207,142,.3),0 14px 30px -20px rgba(31,164,99,.6)}
.r-pts li{color:#7fe0b2}.r-pts svg{color:#3ccf8e}
.routers .router.pick-rec{border-color:rgba(107,120,242,.4);background:linear-gradient(180deg,rgba(107,120,242,.16),var(--card) 70%)}
.routers .router.pick-easy{border-color:rgba(60,207,142,.45);background:linear-gradient(180deg,rgba(31,164,99,.2),var(--card) 75%)}
.routers .router.pick-easy .fic{color:#7fe0b2;background:rgba(31,164,99,.22)}