/* ==========================================================================
   UPS Power UK — "Volt" theme
   Mains mode (light) is the default; Battery mode (dark) via data-theme.
   ========================================================================== */

:root{
  --bg:#f4f2ec;
  --bg-2:#ebe7dc;
  --surface:#ffffff;
  --ink:#111512;
  --ink-2:#343b36;
  --muted:#656d66;
  --line:#d9d4c6;
  --volt:#c8f031;
  --volt-2:#b4dc1c;
  --volt-text:#4f6600;
  --amber:#ffa928;
  --ok:#2c8a3c;
  --bad:#c9412f;
  --panel:#121714;
  --panel-2:#1b221d;
  --panel-ink:#d4f45c;
  --panel-dim:#7f8c79;
  --shadow:0 1px 0 rgba(17,21,18,.04), 0 18px 40px -22px rgba(17,21,18,.35);
  --hard:3px 3px 0 var(--ink);
  --radius:14px;
  --f-display:'Bricolage Grotesque',system-ui,sans-serif;
  --f-body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:light;
}
:root[data-theme="battery"]{
  --bg:#0b0e0c;
  --bg-2:#101411;
  --surface:#151a16;
  --ink:#eef3e4;
  --ink-2:#c5cdbf;
  --muted:#8d978c;
  --line:#28302a;
  --volt-text:#c8f031;
  --panel:#070908;
  --panel-2:#0f1310;
  --shadow:0 1px 0 rgba(0,0,0,.4), 0 18px 40px -20px rgba(0,0,0,.8);
  --hard:3px 3px 0 var(--volt);
  color-scheme:dark;
}

/* Base ------------------------------------------------------------------- */
html{scroll-behavior:smooth;}
body{
  font-family:var(--f-body); font-size:1.02rem; line-height:1.6;
  color:var(--ink-2); background:var(--bg);
  -webkit-font-smoothing:antialiased;
  transition:background-color .35s ease, color .35s ease;
}
h1,h2,h3,h4,h5,h6{font-family:var(--f-display); font-weight:700; color:var(--ink); letter-spacing:-.02em; line-height:1.1;}
h1{font-weight:800;}
a{color:var(--ink); text-decoration-color:var(--volt-2); text-underline-offset:3px;}
a:hover{color:var(--volt-text);}
.mono{font-family:var(--f-mono); letter-spacing:-.01em;}
.text-muted{color:var(--muted) !important;}
.skip-link{position:absolute; z-index:2000; top:.5rem; left:.5rem; background:var(--volt); color:#111; padding:.5rem 1rem; border-radius:8px;}
img{max-width:100%; height:auto;}
::selection{background:var(--volt); color:#111;}
:focus-visible{outline:3px solid var(--volt-2); outline-offset:2px;}

.section{padding:5.5rem 0;}
.section-sm{padding:3.5rem 0;}
.section-alt{background:var(--bg-2);}
@media (max-width:767.98px){ .section{padding:3.5rem 0;} }

.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--f-mono); font-size:.76rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--volt-text);
}
.eyebrow::before{content:""; width:22px; height:2px; background:currentColor;}
.eyebrow.on-dark{color:var(--volt);}
.section-title{font-size:clamp(1.9rem,3.4vw,2.8rem); margin:.6rem 0 1rem;}
.lede{font-size:1.12rem; color:var(--muted); max-width:640px;}

/* Buttons ---------------------------------------------------------------- */
.btn{font-weight:700; border-radius:10px; padding:.7rem 1.2rem; transition:transform .12s ease, box-shadow .12s ease, background .15s;}
.btn-lg{padding:.9rem 1.5rem; font-size:1.05rem;}
.btn-sm{padding:.4rem .75rem;}
.btn-volt, .btn-accent{
  background:var(--volt); color:#111512; border:2px solid #111512; box-shadow:3px 3px 0 #111512;
}
.btn-volt:hover, .btn-accent:hover{background:var(--volt-2); color:#111512; border-color:#111512; transform:translate(-1px,-1px); box-shadow:4px 4px 0 #111512;}
.btn-volt:active, .btn-accent:active{transform:translate(2px,2px); box-shadow:1px 1px 0 #111512;}
.btn-ink, .btn-outline-navy{
  background:transparent; color:var(--ink); border:2px solid var(--ink);
}
.btn-ink:hover, .btn-outline-navy:hover{background:var(--ink); color:var(--bg); border-color:var(--ink);}
.btn-ghost-light{background:rgba(255,255,255,.08); color:#fff; border:2px solid rgba(255,255,255,.55);}
.btn-ghost-light:hover{background:#fff; color:#111512; border-color:#fff;}

/* Top bar & nav ---------------------------------------------------------- */
.topbar{background:#111512; color:#c9d0c3; font-family:var(--f-mono); font-size:.76rem; padding:.45rem 0; letter-spacing:.01em;}
.topbar a{color:#fff; text-decoration:none; font-weight:600;}
.topbar a:hover{color:var(--volt);}
.live-dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--volt); box-shadow:0 0 0 0 rgba(200,240,49,.6); animation:pulse 2.2s infinite; margin-right:.45rem; vertical-align:1px;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(200,240,49,.55);}70%{box-shadow:0 0 0 8px rgba(200,240,49,0);}100%{box-shadow:0 0 0 0 rgba(200,240,49,0);}}

.main-nav{
  position:sticky; top:0; z-index:1030;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line); padding:.6rem 0;
}
.brand{display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink);}
.brand:hover{color:var(--ink);}
.brand svg{flex:0 0 auto;}
.brand-word{font-family:var(--f-display); font-weight:800; font-size:1.35rem; letter-spacing:-.03em;}
.brand-word em{font-style:normal; color:var(--volt-text);}
.main-nav .nav-link{font-weight:600; color:var(--ink); padding:.5rem .8rem !important; border-radius:8px;}
.main-nav .nav-link:hover, .main-nav .nav-link.active{background:var(--bg-2);}
.main-nav .navbar-toggler{border:2px solid var(--ink); padding:.35rem .55rem;}
.main-nav .navbar-toggler-icon{filter:var(--toggler-filter,none);}
:root[data-theme="battery"] .main-nav .navbar-toggler-icon{filter:invert(1);}
.nav-sizer{display:inline-flex; align-items:center; gap:.4rem;}
.nav-sizer .tag{font-family:var(--f-mono); font-size:.62rem; background:var(--volt); color:#111; padding:.1rem .35rem; border-radius:4px; font-weight:700; letter-spacing:.04em;}

.dropdown-menu.situations{
  border:2px solid var(--ink); border-radius:var(--radius); box-shadow:var(--hard);
  background:var(--surface); padding:.5rem; min-width:320px;
}
.situations .dropdown-item{display:flex; gap:.8rem; align-items:flex-start; border-radius:10px; padding:.65rem .75rem; white-space:normal; color:var(--ink);}
.situations .dropdown-item:hover{background:var(--bg-2); color:var(--ink);}
.situations .dropdown-item i{font-size:1.2rem; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:9px; background:var(--volt); color:#111; flex:0 0 auto;}
.situations .dropdown-item small{display:block; color:var(--muted); line-height:1.35;}

/* Mains / Battery switch */
.power-switch{
  display:inline-flex; align-items:center; gap:0; padding:3px; border-radius:999px;
  border:2px solid var(--ink); background:var(--surface); cursor:pointer;
  font-family:var(--f-mono); font-size:.68rem; font-weight:700; letter-spacing:.06em;
}
.power-switch span{display:inline-flex; align-items:center; gap:.3rem; padding:.28rem .6rem; border-radius:999px; color:var(--muted); transition:background .2s,color .2s;}
.power-switch [data-mode="mains"]{background:var(--ink); color:var(--bg);}
:root[data-theme="battery"] .power-switch [data-mode="mains"]{background:transparent; color:var(--muted);}
:root[data-theme="battery"] .power-switch [data-mode="battery"]{background:var(--volt); color:#111;}

/* Hero ------------------------------------------------------------------- */
.hero{position:relative; color:#fff; overflow:hidden; background:#0b0e0c;}
.hero-bg{position:absolute; inset:0;}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:center 60%;}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(8,10,9,.94) 0%, rgba(8,10,9,.82) 38%, rgba(8,10,9,.35) 70%, rgba(8,10,9,.2) 100%),
    linear-gradient(0deg, rgba(8,10,9,.85) 0%, transparent 40%);
}
.hero .container{position:relative; z-index:1;}
.hero h1{color:#fff; font-size:clamp(2.6rem,6vw,4.6rem); letter-spacing:-.035em; line-height:.98;}
.hero h1 .hl{color:var(--volt);}
.hero .lede{color:rgba(255,255,255,.8); font-size:1.18rem;}
.hero-proof{display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:2rem; font-family:var(--f-mono); font-size:.8rem; color:rgba(255,255,255,.72);}
.hero-proof i{color:var(--volt); margin-right:.35rem;}

.page-hero{position:relative; color:#fff; background:#0b0e0c; overflow:hidden;}
.page-hero .hero-bg::after{background:linear-gradient(90deg, rgba(8,10,9,.92) 0%, rgba(8,10,9,.7) 55%, rgba(8,10,9,.35) 100%);}
.page-hero h1{color:#fff; font-size:clamp(2.2rem,4.5vw,3.6rem);}
.page-hero .lede{color:rgba(255,255,255,.78);}
.page-hero.plain{background:var(--panel); background-image:radial-gradient(rgba(200,240,49,.13) 1px, transparent 1px); background-size:22px 22px;}

/* LCD readout panel ------------------------------------------------------ */
.lcd{
  background:var(--panel); color:var(--panel-ink); font-family:var(--f-mono);
  border-radius:var(--radius); border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4), 0 30px 60px -30px rgba(0,0,0,.7);
  position:relative; overflow:hidden;
}
.lcd::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px);
}
.lcd-head{display:flex; justify-content:space-between; align-items:center; font-size:.7rem; color:var(--panel-dim); text-transform:uppercase; letter-spacing:.1em; padding:.8rem 1rem; border-bottom:1px dashed rgba(255,255,255,.12);}
.lcd-body{padding:1rem;}
.lcd-row{display:flex; justify-content:space-between; gap:1rem; padding:.3rem 0; font-size:.85rem;}
.lcd-row .k{color:var(--panel-dim);}
.lcd-row .v{color:var(--panel-ink); font-weight:600; text-align:right;}
.lcd-big{font-size:2rem; font-weight:600; letter-spacing:-.03em; line-height:1.05; color:var(--panel-ink);}
.lcd-big small{font-size:.8rem; color:var(--panel-dim); font-weight:400; letter-spacing:0;}
.lcd .chip{
  font-family:var(--f-mono); font-size:.74rem; background:var(--panel-2); color:#cfd6c9;
  border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:.35rem .7rem; cursor:pointer;
  display:inline-flex; align-items:center; gap:.35rem; transition:all .15s;
}
.lcd .chip:hover{border-color:var(--volt);}
.lcd .chip[aria-pressed="true"]{background:var(--volt); color:#111; border-color:var(--volt); font-weight:700;}
.lcd .match{display:flex; align-items:center; gap:.75rem; background:var(--panel-2); border-radius:10px; padding:.7rem .8rem; text-decoration:none; color:#fff; border:1px solid rgba(255,255,255,.08);}
.lcd .match:hover{border-color:var(--volt); color:#fff;}
.lcd .match i{color:var(--volt); font-size:1.4rem;}
.lcd-bar{height:8px; background:#232b25; border-radius:99px; overflow:hidden;}
.lcd-bar span{display:block; height:100%; background:linear-gradient(90deg,var(--volt),#e9ff8c); border-radius:99px; transition:width .35s ease;}

/* Steps ------------------------------------------------------------------ */
.step{border-top:2px solid var(--ink); padding-top:1.1rem;}
.step .n{font-family:var(--f-mono); font-size:.8rem; color:var(--volt-text); font-weight:600;}
.step h3{font-size:1.3rem; margin:.4rem 0 .5rem;}
.step .ico{width:46px; height:46px; border-radius:12px; background:var(--volt); color:#111; display:flex; align-items:center; justify-content:center; font-size:1.25rem; border:2px solid #111; margin-bottom:.9rem;}

/* Situation (category) photo cards -------------------------------------- */
.situation-card{
  position:relative; display:block; border-radius:18px; overflow:hidden; min-height:420px;
  color:#fff; text-decoration:none; border:2px solid var(--ink); box-shadow:var(--hard);
  transition:transform .18s ease, box-shadow .18s ease;
}
.situation-card:hover{color:#fff; transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink);}
.situation-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.situation-card:hover img{transform:scale(1.05);}
.situation-card::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.05) 25%, rgba(8,10,9,.92) 100%);}
.situation-card .inner{position:absolute; inset:auto 0 0 0; z-index:1; padding:1.5rem;}
.situation-card .badge-ico{width:48px; height:48px; border-radius:12px; background:var(--volt); color:#111; display:flex; align-items:center; justify-content:center; font-size:1.35rem; margin-bottom:1rem; border:2px solid #111;}
.situation-card h3{color:#fff; font-size:1.6rem; margin-bottom:.35rem;}
.situation-card p{color:rgba(255,255,255,.78); margin-bottom:1rem;}
.situation-card .meta{font-family:var(--f-mono); font-size:.75rem; color:var(--volt); text-transform:uppercase; letter-spacing:.08em;}
.situation-card .count{position:absolute; top:1rem; right:1rem; z-index:1; font-family:var(--f-mono); font-size:.72rem; background:rgba(8,10,9,.7); border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:.3rem .7rem;}

/* Product cards ---------------------------------------------------------- */
.product-card{
  background:var(--surface); border:2px solid var(--ink); border-radius:18px; height:100%;
  display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--hard);
  transition:transform .18s ease, box-shadow .18s ease;
}
.product-card:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink);}
.product-card .media{position:relative; aspect-ratio:4/3; background:var(--panel); overflow:hidden; border-bottom:2px solid var(--ink);}
.product-card .media img{width:100%; height:100%; object-fit:cover;}
.device-tile{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:1rem;
  background:
    radial-gradient(circle at 70% 35%, rgba(200,240,49,.18), transparent 55%),
    radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0/18px 18px,
    var(--panel);
  color:var(--panel-ink); font-family:var(--f-mono);
}
.device-tile .big-ico{font-size:3.6rem; color:var(--volt); align-self:center; filter:drop-shadow(0 0 18px rgba(200,240,49,.35));}
.device-tile .readout{display:flex; justify-content:space-between; font-size:.74rem; color:var(--panel-dim);}
.device-tile .readout b{color:var(--panel-ink); font-weight:600;}
.flag{
  position:absolute; top:.8rem; right:.8rem; z-index:2; font-family:var(--f-mono); font-size:.66rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; background:var(--volt); color:#111; padding:.28rem .55rem; border-radius:6px; border:1.5px solid #111;
}
.product-card .body{padding:1.15rem 1.2rem 1.25rem; display:flex; flex-direction:column; flex:1;}
.product-card .brand-line{font-family:var(--f-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);}
.product-card h3{font-size:1.18rem; margin:.25rem 0 .45rem;}
.product-card h3 a{text-decoration:none; color:var(--ink);}
.product-card h3 a::after{content:""; position:absolute; inset:0;}
.product-card{position:relative;}
.product-card .summary{color:var(--muted); font-size:.93rem; flex:1; margin-bottom:.9rem;}
.runtime-pill{
  display:flex; align-items:center; gap:.55rem; font-family:var(--f-mono); font-size:.78rem;
  background:var(--bg-2); border-radius:10px; padding:.5rem .65rem; margin-bottom:.9rem; color:var(--ink-2);
}
.runtime-pill i{color:var(--volt-text);}
.runtime-pill b{color:var(--ink);}
.card-foot{display:flex; justify-content:space-between; align-items:center; gap:.5rem; border-top:1px dashed var(--line); padding-top:.8rem;}
.price{font-family:var(--f-display); font-weight:700; color:var(--ink); font-size:1.02rem;}

/* Charge (battery) rating */
.charge{display:inline-flex; align-items:center; gap:.45rem;}
.charge-cells{display:inline-flex; gap:2px; padding:2px; border:1.5px solid var(--ink); border-radius:4px; position:relative; margin-right:4px;}
.charge-cells::after{content:""; position:absolute; right:-5px; top:50%; transform:translateY(-50%); width:3px; height:7px; background:var(--ink); border-radius:0 2px 2px 0;}
.charge .cell{width:9px; height:12px; background:var(--bg-2); border-radius:1.5px; overflow:hidden; display:block;}
.charge .cell span{display:block; height:100%; background:var(--volt-2);}
.charge-val{font-family:var(--f-mono); font-size:.78rem; font-weight:600; color:var(--ink);}

/* Photo mosaic ----------------------------------------------------------- */
.mosaic{display:grid; gap:14px; grid-template-columns:repeat(4,1fr); grid-auto-rows:190px;}
.mosaic figure{position:relative; margin:0; border-radius:14px; overflow:hidden; border:2px solid var(--ink);}
.mosaic img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.mosaic figure:hover img{transform:scale(1.06);}
.mosaic figcaption{
  position:absolute; left:.6rem; bottom:.6rem; font-family:var(--f-mono); font-size:.7rem;
  background:rgba(8,10,9,.78); color:#fff; padding:.3rem .55rem; border-radius:6px;
}
.mosaic figcaption i{color:var(--volt); margin-right:.3rem;}
.mosaic .tall{grid-row:span 2;}
.mosaic .wide{grid-column:span 2;}
@media (max-width:991.98px){ .mosaic{grid-template-columns:repeat(2,1fr); grid-auto-rows:160px;} }

/* Fact tiles ------------------------------------------------------------- */
.fact{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; height:100%;}
.fact .ico{width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:var(--ink); color:var(--volt); font-size:1.2rem; margin-bottom:1rem;}
.fact h3{font-size:1.1rem; margin-bottom:.4rem;}
.fact p{color:var(--muted); font-size:.93rem; margin:0;}

.photo-frame{position:relative; border-radius:18px; overflow:hidden; border:2px solid var(--ink); box-shadow:var(--hard);}
.photo-frame img{display:block; width:100%; height:100%; object-fit:cover;}
.photo-frame .tag{position:absolute; left:1rem; top:1rem; font-family:var(--f-mono); font-size:.72rem; background:var(--volt); color:#111; padding:.3rem .6rem; border-radius:6px; font-weight:700; border:1.5px solid #111;}

/* Look-for checklist ----------------------------------------------------- */
.lookfor{display:flex; gap:1rem; align-items:flex-start; padding:1.2rem 0; border-bottom:1px dashed var(--line);}
.lookfor:last-child{border-bottom:0;}
.lookfor .ico{flex:0 0 auto; width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--volt); color:#111; border:2px solid #111; font-size:1.1rem;}
.lookfor h3{font-size:1.05rem; margin:0 0 .25rem;}
.lookfor p{margin:0; color:var(--muted); font-size:.93rem;}

/* Breadcrumb ------------------------------------------------------------- */
.crumbs{font-family:var(--f-mono); font-size:.76rem; padding:.9rem 0; border-bottom:1px solid var(--line);}
.crumbs .breadcrumb{margin:0;}
.crumbs a{text-decoration:none; color:var(--muted);}
.crumbs a:hover{color:var(--ink);}
.crumbs .breadcrumb-item.active{color:var(--ink);}
.page-hero .crumbs{border-color:rgba(255,255,255,.12);}
.page-hero .crumbs a, .page-hero .breadcrumb-item+.breadcrumb-item::before{color:rgba(255,255,255,.6);}
.page-hero .crumbs .breadcrumb-item.active{color:#fff;}

/* Product page ----------------------------------------------------------- */
.product-visual{position:relative; aspect-ratio:4/3; border-radius:20px; overflow:hidden; border:2px solid var(--ink); box-shadow:var(--hard); background:var(--panel);}
.product-visual img{width:100%; height:100%; object-fit:cover;}
.product-visual .device-tile .big-ico{font-size:6rem;}
.buy-box{background:var(--surface); border:2px solid var(--ink); border-radius:18px; padding:1.4rem; box-shadow:var(--hard);}
.stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.stat{background:var(--bg-2); border-radius:12px; padding:.8rem .9rem;}
.stat .k{font-family:var(--f-mono); font-size:.66rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em;}
.stat .v{font-family:var(--f-display); font-weight:800; font-size:1.35rem; color:var(--ink); line-height:1.2;}
.canrun{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px;}
.canrun .item{display:flex; align-items:center; gap:.75rem; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:.75rem .85rem;}
.canrun .item > i{font-size:1.3rem; width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:var(--bg-2); color:var(--ink);}
.canrun .item .t{font-weight:700; color:var(--ink); font-size:.92rem; line-height:1.25;}
.canrun .item .s{font-family:var(--f-mono); font-size:.75rem; color:var(--muted);}
.canrun .item.ok .s b{color:var(--ok);}
:root[data-theme="battery"] .canrun .item.ok .s b{color:var(--volt);}
.canrun .item.no{opacity:.72;}
.canrun .item.no .s b{color:var(--bad);}
.specs-list{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface);}
.specs-list .row-s{display:flex; gap:1rem; padding:.8rem 1rem; border-bottom:1px solid var(--line);}
.specs-list .row-s:last-child{border-bottom:0;}
.specs-list .row-s i{color:var(--volt-text); font-size:1.05rem; margin-top:.1rem;}
.specs-list .k{flex:0 0 38%; font-weight:600; color:var(--muted); font-size:.92rem;}
.specs-list .v{color:var(--ink); font-size:.95rem;}
.estimator input[type=range]{accent-color:var(--volt-2); width:100%;}

/* Rich text -------------------------------------------------------------- */
.prose{color:var(--ink-2); line-height:1.8; font-size:1.05rem;}
.prose h2{margin-top:2.2rem; font-size:1.7rem;}
.prose h3{margin-top:1.6rem; font-size:1.25rem;}
.prose ul{padding-left:0; list-style:none;}
.prose ul li{position:relative; padding-left:1.7rem; margin-bottom:.45rem;}
.prose ul li::before{content:""; position:absolute; left:0; top:.55em; width:12px; height:12px; border-radius:3px; background:var(--volt); border:2px solid var(--ink);}
.prose img{border-radius:12px;}
.prose blockquote{border-left:4px solid var(--volt); padding:.4rem 1rem; color:var(--muted); font-style:italic;}
.prose a{text-decoration:underline;}

/* Sizer ------------------------------------------------------------------ */
.scene-tabs{display:flex; flex-wrap:wrap; gap:.6rem;}
.scene-tab{
  display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1rem; border-radius:12px;
  border:2px solid var(--ink); background:var(--surface); color:var(--ink); font-weight:700; cursor:pointer;
}
.scene-tab[aria-selected="true"]{background:var(--ink); color:var(--bg);}
.scene-tab[aria-selected="true"] i{color:var(--volt);}
.device-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px;}
.device-row{
  display:flex; align-items:center; gap:.75rem; background:var(--surface); border:1.5px solid var(--line);
  border-radius:12px; padding:.65rem .75rem; transition:border-color .15s, box-shadow .15s;
}
.device-row.on{border-color:var(--ink); box-shadow:2px 2px 0 var(--ink);}
.device-row > i{font-size:1.25rem; width:38px; height:38px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; border-radius:10px; background:var(--bg-2); color:var(--ink);}
.device-row.on > i{background:var(--volt); color:#111;}
.device-row .info{flex:1; min-width:0;}
.device-row .name{font-weight:700; color:var(--ink); font-size:.92rem; line-height:1.2;}
.device-row .watts{font-family:var(--f-mono); font-size:.72rem; color:var(--muted);}
.stepper{display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:9px; overflow:hidden;}
.stepper button{border:0; background:var(--bg-2); color:var(--ink); width:28px; height:28px; display:flex; align-items:center; justify-content:center;}
.stepper button:hover{background:var(--volt);color:#111;}
.stepper output{min-width:26px; text-align:center; font-family:var(--f-mono); font-size:.85rem; font-weight:600; color:var(--ink);}
.hours-input{width:62px; font-family:var(--f-mono); font-size:.8rem; border:1.5px solid var(--line); border-radius:8px; padding:.2rem .35rem; background:var(--surface); color:var(--ink);}
.custom-device{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center;}
.custom-device input{border:1.5px solid var(--line); background:var(--surface); color:var(--ink); border-radius:9px; padding:.45rem .65rem; font-size:.9rem;}
@media (min-width:992px){ .sizer-result{position:sticky; top:90px;} }
.mobile-bar{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:1040; display:flex; gap:1rem; align-items:center;
  background:var(--panel); color:#cfd6c9; border:2px solid var(--volt); border-radius:14px; padding:.75rem 1rem;
  font-family:var(--f-mono); font-size:.82rem; text-decoration:none; box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.mobile-bar:hover{color:#fff;}
.mobile-bar b{color:var(--panel-ink);}
.mobile-bar i{color:var(--volt);}
#matches{scroll-margin-top:90px;}
.result-card{border:2px solid var(--ink); border-radius:16px; background:var(--surface); padding:1rem; display:flex; gap:.9rem; align-items:center; text-decoration:none; color:var(--ink); transition:transform .15s, box-shadow .15s;}
.result-card:hover{transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--ink); color:var(--ink);}
.result-card .thumb{width:58px; height:58px; flex:0 0 auto; border-radius:12px; background:var(--panel); color:var(--volt); display:flex; align-items:center; justify-content:center; font-size:1.6rem; overflow:hidden;}
.result-card .thumb img{width:100%; height:100%; object-fit:cover;}
.result-card .fit{font-family:var(--f-mono); font-size:.72rem;}
.fit-best{color:var(--ok);}
:root[data-theme="battery"] .fit-best{color:var(--volt);}
.fit-close{color:#b07100;}
:root[data-theme="battery"] .fit-close{color:var(--amber);}

/* CTA band --------------------------------------------------------------- */
.cta-band{position:relative; border-radius:24px; overflow:hidden; color:#fff; border:2px solid var(--ink); box-shadow:var(--hard);}
.cta-band img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.cta-band::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(8,10,9,.93) 0%, rgba(8,10,9,.65) 60%, rgba(8,10,9,.35) 100%);}
.cta-band .inner{position:relative; z-index:1; padding:clamp(2rem,5vw,4rem);}
.cta-band h2{color:#fff; font-size:clamp(1.8rem,3.5vw,2.8rem);}
.cta-band p{color:rgba(255,255,255,.78);}

/* Footer ----------------------------------------------------------------- */
.site-footer{background:#0b0e0c; color:#b9c2b4; border-top:4px solid var(--volt);}
.site-footer .brand{color:#fff;}
.site-footer .brand-word em{color:var(--volt);}
.footer-heading{font-family:var(--f-mono); color:#fff; font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:1rem;}
.footer-links{list-style:none; padding:0;}
.footer-links li{margin-bottom:.55rem;}
.footer-links a{color:#b9c2b4; text-decoration:none;}
.footer-links a:hover{color:var(--volt);}
.footer-cta{background:#141a15; border:1px solid #28302a; border-radius:16px; padding:1.4rem;}
.footer-cta h3{color:#fff; font-size:1.2rem;}
.footer-base{font-family:var(--f-mono); font-size:.74rem; color:#7f897c; border-top:1px solid #222a23;}
.footer-base a{color:#b9c2b4;}

/* Bootstrap bits in battery mode ---------------------------------------- */
:root[data-theme="battery"] .form-control, :root[data-theme="battery"] .form-select{background-color:var(--surface); color:var(--ink); border-color:var(--line);}

/* Admin (shared) --------------------------------------------------------- */
.admin-wrap{background:var(--bg); min-height:100vh;}
.admin-card{background:var(--surface); border:1px solid var(--line); border-radius:14px;}
.admin-sidebar{background:#0b0e0c; color:#fff; min-height:100vh; border-right:3px solid var(--volt);}
.admin-sidebar a{color:rgba(255,255,255,.72); display:block; padding:.6rem 1rem; border-radius:10px; text-decoration:none;}
.admin-sidebar a.active, .admin-sidebar a:hover{background:rgba(200,240,49,.12); color:#fff;}
.admin-thumb{width:44px; height:44px; border-radius:8px; object-fit:cover; background:var(--panel);}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
}
@media (max-width:991.98px){ body:has(.mobile-bar) .footer-base{padding-bottom:80px;} }