/* Satima SmartBOTS — shared brand stylesheet for redesign mockups.
   Tokens copied verbatim from `satima-platform-plan (5).html` / CLAUDE.md §14. */

:root{
  --void:#050914; --deep:#0A1330; --panel:#0E1A3C; --panel2:#101C42;
  --blue:#0066CC; --cyan:#3FE0FF; --orange:#FF6B00;
  --ink:#F4F7FC; --slate:#8B98B8; --line:rgba(63,224,255,0.16);
  --green:#4ADE80; --amber:#FBBF24; --red:#FB7185;
  --gutter: clamp(12px,2vw,32px);
  --trustbar-h: 44px;
  --topnav-h: 72px;
}
@media(max-width:680px){ :root{ --gutter: 15px; --trustbar-h: 40px; } }
*{box-sizing:border-box; margin:0; padding:0;}
/* ONE cosmic backdrop for the entire site — CSS gradients, not a photographic image.
   A previous version used galaxy-panorama.webp with background-attachment:fixed +
   background-size:cover, which renders consistently in this project's testing tooling
   (Chromium desktop engine, even at mobile viewport sizes) but background-attachment:fixed
   is a well-documented weak spot on real mobile browsers — support/compositing has long
   been inconsistent, which is very likely why the background kept looking different on an
   actual phone despite every screenshot here checking out fine. Pure CSS gradients don't
   have that failure mode (nothing to decode/composite specially, no "fixed" needed): the
   nebula tints are anchored to the top of the page (same effect as the original hero
   glow) and the fine grid tiles perfectly at any scroll position on any device. */
body{
  background-color:var(--void); color:var(--ink); font-family:'Space Grotesk',sans-serif; line-height:1.5;
  background-image:
    radial-gradient(ellipse 70% 55% at 15% 0%, rgba(63,224,255,0.12), transparent 60%),
    radial-gradient(ellipse 65% 50% at 90% 8%, rgba(255,107,0,0.10), transparent 60%)
    /* grid lines temporarily disabled for testing — was: 2 linear-gradient 1px-line
       layers here, background-size 24px 24px each, background-repeat:repeat. Re-add
       to restore. */;
  background-size:100% 100vh, 100% 100vh;
  background-position:top left, top right;
  background-repeat:no-repeat, no-repeat;
}
/* admin keeps the original plain background — the grid/nebula treatment is a
   storefront-only decision, not meant for the internal admin tool */
body.admin-body{background-image:none; background-color:var(--void);}

.display{font-family:'Orbitron',sans-serif;}
.mono{font-family:'JetBrains Mono',monospace;}
a{color:var(--cyan); text-decoration:none;}
img{max-width:100%; display:block;}
::selection{background:var(--blue); color:#fff;}

/* ---------- ambient cosmic decoration (sitewide + per-section) ----------
   Real shaded/rendered sprites (app/static/img/deco/*.webp — procedurally painted
   locally, same rule as galaxy-panorama.webp) rather than flat line-doodle SVGs. The
   fixed sitewide layer covers every page; .section-deco layers add more instances inside
   individual long sections so decoration keeps appearing as the page scrolls, not just
   in the first viewport. */
/* z-index:1, not 0 — the .pdp::before/.section::before cosmic backdrops are also z-index:0
   within the same (non-isolated) root stacking context, and being later in the DOM they
   were painting over this fixed layer, hiding the sprites almost everywhere. At z-index:1
   this beats those backdrops while still losing to actual page content (also z-index:1,
   but later in DOM order), so sprites now sit between the backdrop and the content. */
.cosmic-deco{position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden;}
.cosmic-deco img, .section-deco img{position:absolute; opacity:0.06; filter:drop-shadow(0 0 10px rgba(63,224,255,0.2));}
.section-deco{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
@keyframes deco-drift{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-14px) rotate(4deg); } }
@keyframes deco-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
/* rocket "launch" — climbs on a diagonal and fades out at the top of its run rather than
   just drifting in place, then resets and fades back in at the bottom to loop. */
@keyframes deco-launch{
  0%{ transform:translate(0,0) rotate(-18deg); opacity:0; }
  12%{ opacity:0.22; }
  80%{ opacity:0.22; }
  100%{ transform:translate(26px,-200px) rotate(-18deg); opacity:0; }
}
/* stars twinkle in place — opacity/scale pulse only, no rotation or drift */
@keyframes deco-twinkle{ 0%,100%{ opacity:0.10; transform:scale(0.8); } 50%{ opacity:0.32; transform:scale(1.2); } }
/* mobile gets its own denser, more visible set (deco-mobile-extra, markup below) rather
   than just a shrunk copy of the desktop layer — raised opacity too, since 0.13 read as
   "basically invisible" per feedback. */
.deco-mobile-extra{display:none;}
@media(max-width:900px){ .cosmic-deco img, .section-deco img{opacity:0.08;} }
@media(max-width:680px){
  .deco-mobile-extra{display:block; opacity:0.34 !important;}
  /* the always-on desktop set stayed rendered (just fainter) on mobile too, which meant
     up to 15 fixed sprites competing for one narrow viewport — real measured overlaps,
     several actually touching. Mobile now shows ONLY the dedicated, already-spaced
     deco-mobile-extra set instead of layering both. */
  .cosmic-deco img:not(.deco-mobile-extra){display:none;}
}

/* small ambient accent on every cutout-frame instance — gallery-main, gallery-thumbs,
   product-grid/related-row thumbnails, box-item icons — so real space imagery appears on
   every product image, not just the PDP hero. */
.cutout-frame::after{
  content:""; position:absolute; z-index:2; pointer-events:none;
  top:4%; right:4%; width:22%; height:22%; max-width:34px; max-height:34px;
  background-image:url("/static/img/deco/star-cluster.webp"); background-size:contain; background-repeat:no-repeat;
  opacity:0.5;
}
.box-item .ph.cutout-frame::after, .gallery-thumbs .t.cutout-frame::after{width:30%; height:30%; opacity:0.4;}
/* homepage grid card thumbs — a second, actually-animated sprite in the opposite corner
   from the static ::after star accent above, so each product photo itself feels part of
   the same living space scene, not just the margins around the grid. */
.p-card .thumb-deco{
  position:absolute; z-index:2; bottom:5%; left:5%; width:15%; max-width:26px;
  opacity:0.5; pointer-events:none; filter:drop-shadow(0 0 6px rgba(63,224,255,0.25));
  animation:deco-spin 34s linear infinite;
}
/* everything else needs to sit above the fixed cosmic layer (.topnav already stacks
   above it via its own position:sticky + z-index:20, left out here on purpose) */
.checkout-shell, main, .pdp, .section, footer.site-footer{position:relative; z-index:1;}

/* ---------- top nav ---------- */
.topnav{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:16px var(--gutter); background:rgba(5,9,20,0.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px;}
.topnav .wordmark{font-size:12px;}
.brand svg{width:26px; height:26px;}
.brand span{font-family:'Orbitron',sans-serif; font-weight:700; font-size:14px; letter-spacing:1.5px;}
.brand span b{color:var(--cyan);}
/* topnav-trust replaces the old search bar on desktop — same info as the mobile-only
   .trust-bar band below, but merged into the already-sticky topnav row instead of a
   separate band, since the topnav itself provides the sticky/pinned behavior here. */
.topnav-trust{display:none; flex:1; justify-content:center;}
.topnav-trust-inner{
  display:flex; align-items:center; gap:8px 12px;
  font-size:18px; font-weight:800; color:var(--ink); white-space:nowrap;
  background:linear-gradient(90deg, rgba(63,224,255,0.10), rgba(255,107,0,0.08));
  border:1px solid var(--line); border-radius:100px; padding:5px 20px;
}
.topnav-trust .item{display:flex; align-items:center; gap:6px; white-space:nowrap;}
.topnav-trust .sep{color:var(--slate); opacity:0.6;}
.topnav-trust .call{color:var(--cyan); text-decoration:none; font-weight:700; display:flex; align-items:center; gap:6px;}
.topnav-trust .call svg{width:14px; height:14px; flex-shrink:0;}
@media(min-width:681px){ .topnav-trust{display:flex;} }
.navlinks{display:flex; align-items:center; gap:22px; font-size:13.5px; color:var(--slate);}
.navlinks a:hover{color:var(--cyan);}
.cart-icon-btn{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:19px; height:19px; border-radius:50%; background:var(--panel2);
  border:1px solid var(--line); font-size:9px; cursor:pointer; flex-shrink:0;
}
.cart-badge{
  position:absolute; top:-3px; right:-3px; min-width:14px; height:14px; padding:0 3px;
  border-radius:100px; background:var(--orange); color:#0A0500;
  font-family:'JetBrains Mono',monospace; font-size:8px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

/* mobile: no room for the search bar with so few products (dropped entirely, not just
   hidden), no room for topnav-trust either — that info stays in the full-width .trust-bar
   band above the nav instead (kept sticky itself, see .trust-bar). */
@media(max-width:680px){
  .topnav{ top:var(--trustbar-h); padding:12px var(--gutter); }
  .navlinks{ display:none; }
}

/* ---------- footer ---------- */
footer.site-footer{
  padding:40px var(--gutter); border-top:1px solid var(--line);
  font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--slate);
  margin-top:60px;
}
.footer-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:22px;}
.socialrow{display:flex; gap:12px;}
.social{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:var(--panel2); border:1px solid var(--line); transition:border-color .12s ease;
}
.social:hover{border-color:rgba(63,224,255,0.5);}
.social svg{width:17px; height:17px; color:var(--cyan);}

.fab-main{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,#25D366,#1EBE57); border:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(37,211,102,0.35); cursor:pointer;
}
.fab-main svg{width:19px; height:19px;}

/* ---------- cutout-frame: no background of its own — product photos sit directly on
   the one shared sitewide background, same as everything else. Used to have its own
   opaque var(--deep) fill + grid + spotlight, which was a literal "box" behind every
   product photo across the site (hundreds of instances: grid thumbnails, PDP gallery,
   related-row, box icons) — the most visible remaining instance of the boxed-panel look. ---------- */
.cutout-frame{ position:relative; overflow:hidden; }
.cutout-frame img{ object-fit:contain !important; position:relative; z-index:1; }
.glow-cyan{ --glow-color:rgba(63,224,255,0.38); }
.glow-orange{ --glow-color:rgba(255,107,0,0.34); }
.glow-green{ --glow-color:rgba(74,222,128,0.32); }


/* ---------- badges / tags ---------- */
.badge{
  display:inline-flex; align-items:center; font-family:'JetBrains Mono',monospace;
  font-size:10px; font-weight:700; letter-spacing:0.5px; padding:4px 9px;
  border-radius:6px; text-transform:uppercase;
}
.badge.bestseller{background:rgba(255,107,0,0.16); color:var(--orange); border:1px solid rgba(255,107,0,0.4);}
.badge.new{background:rgba(63,224,255,0.14); color:var(--cyan); border:1px solid rgba(63,224,255,0.4);}
.badge.off{background:rgba(74,222,128,0.14); color:var(--green); border:1px solid rgba(74,222,128,0.4);}

/* campaign badges — one class per brand accent token, data-driven via Campaign.badge_color */
.badge.campaign-cyan{background:rgba(63,224,255,0.16); color:var(--cyan); border:1px solid rgba(63,224,255,0.45);}
.badge.campaign-orange{background:rgba(255,107,0,0.18); color:var(--orange); border:1px solid rgba(255,107,0,0.45);}
.badge.campaign-green{background:rgba(74,222,128,0.16); color:var(--green); border:1px solid rgba(74,222,128,0.45);}
.badge.campaign-red{background:rgba(251,113,133,0.16); color:var(--red); border:1px solid rgba(251,113,133,0.45);}
.badge.campaign-amber{background:rgba(251,191,36,0.16); color:var(--amber); border:1px solid rgba(251,191,36,0.45);}

/* ---------- product grid ---------- */
.grid-title{font-family:'Orbitron',sans-serif; font-weight:700; font-size:clamp(22px,3vw,30px); margin:36px 0 6px;}
.grid-sub{color:var(--slate); font-size:14px; margin-bottom:26px;}
.product-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px;}
.p-card{
  background:linear-gradient(180deg,var(--panel),var(--deep));
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  transition:transform .15s ease, border-color .15s ease; cursor:pointer;
}
.p-card:hover{transform:translateY(-4px); border-color:rgba(63,224,255,0.45);}
.p-card .thumb{position:relative; aspect-ratio:1; overflow:hidden; background:var(--panel2); padding:10%; box-sizing:border-box;}
.p-card .thumb img{width:100%; height:100%; object-fit:cover;}
.p-card .badges{position:absolute; top:10px; left:10px; display:flex; gap:6px;}
.p-card .body{padding:16px;}
.p-card h3{font-size:15px; font-weight:700; margin-bottom:4px;}
.p-card .cat{font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--slate); margin-bottom:10px;}
.p-card .price-row{display:flex; align-items:baseline; gap:8px;}
.p-card .now{font-family:'Orbitron',sans-serif; font-weight:700; font-size:18px; color:var(--cyan);}
.p-card .was{font-size:12.5px; color:var(--slate); text-decoration:line-through;}

@media(max-width:680px){
  .product-grid{grid-template-columns:repeat(2,1fr); gap:10px;}
  .p-card{border-radius:12px;}
  .p-card .body{padding:10px;}
  .p-card h3{font-size:13px; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .p-card .cat{font-size:9px; margin-bottom:5px;}
  .p-card .now{font-size:10px;}
  .p-card .was{font-size:8px;}
  .p-card .body span.btn-sm{font-size:9.5px; padding:6px 4px; margin-top:8px !important;}
  .p-card .badges{top:6px; left:6px;}
  .p-card .badge{font-size:8px; padding:2px 5px;}
}

/* ---------- PDP ----------
   One continuous cosmic backdrop (.pdp::before) spans both columns so the gallery and
   info panels read as one surface, not two abutting boxed cards — the gallery/info
   panels themselves stay transparent and only add their own small local glow accents. */
/* z-index:2, overriding the shared z-index:1 above — .pdp contains #pdp-mobile-bar
   (position:fixed), and since .pdp itself is a positioned+z-indexed element it forms
   its own stacking context, trapping that fixed child at .pdp's own stacking level
   instead of the root. Without this override, .pdp (z-index:1) loses to
   footer.site-footer (also z-index:1, but later in DOM) once scrolled that far,
   burying the floating Order Now button behind the footer regardless of its own
   z-index:50 — that z-index only matters *within* .pdp's trapped context. */
.pdp{position:relative; z-index:2; display:grid; grid-template-columns:1fr; gap:28px; padding:36px var(--gutter) 0; max-width:1920px; margin:0 auto;}
@media(min-width:900px){ .pdp{grid-template-columns:1fr 1fr;} }
.pdp > *:not(.section-deco):not(.pdp-mobile-bar){position:relative; z-index:1;}

.gallery-main{
  position:relative; aspect-ratio:1; overflow:hidden;
  margin:0 auto 14px; padding:6%; box-sizing:border-box; max-width:540px; width:100%;
}
.gallery-main img{position:relative; z-index:1; width:100%; height:100%; display:block; object-fit:contain; transition:transform .3s ease;}
.gallery-main:hover img{transform:scale(1.06);}
.gallery-main video{position:relative; z-index:1; width:100%; height:100%; display:block; object-fit:contain; background:transparent;}
.video-thumb{position:relative; width:84px !important; height:84px !important; animation:video-pulse 2.4s ease-in-out infinite;}
.video-thumb .play-glyph{
  position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:rgba(5,9,20,0.55); color:var(--ink); font-size:18px;
}
.video-thumb .play-glyph .caption{font-size:9px; font-family:'JetBrains Mono',monospace; letter-spacing:0.3px; white-space:nowrap;}
@keyframes video-pulse{
  0%,100%{ box-shadow:0 0 0 0 var(--glow-color); }
  50%{ box-shadow:0 0 10px 3px var(--glow-color); }
}
.gallery-thumbs{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
.gallery-thumbs .t{
  width:68px; height:68px; border-radius:10px; overflow:hidden; cursor:pointer;
  border:2px solid transparent; background:var(--panel2); padding:6px; box-sizing:border-box; flex-shrink:0;
}
.gallery-thumbs .t.active{border-color:var(--cyan);}
.gallery-thumbs .t img{width:100%; height:100%; object-fit:cover;}
@media(max-width:680px){ .video-thumb{width:60px !important; height:60px !important;} .video-thumb .play-glyph{font-size:14px;} .video-thumb .play-glyph .caption{display:none;} }

/* desktop — thumbs move to a vertical strip on the left of the main image instead of a
   row underneath; scrolls internally rather than growing taller than the image once more
   photos/video exceed what fits (own scrollbar, doesn't push page content around). */
@media(min-width:900px){
  .gallery{display:flex; align-items:flex-start; gap:12px;}
  .gallery-main{order:2; margin:0; flex:1 1 auto; max-width:none; position:sticky; top:calc(var(--topnav-h) + 16px);}
  .gallery-thumbs{
    order:1; flex:0 0 auto; flex-direction:column; flex-wrap:nowrap; justify-content:flex-start;
    max-height:440px; overflow-y:auto; padding-right:2px; scrollbar-width:thin;
    position:sticky; top:calc(var(--topnav-h) + 16px);
  }
}

/* mobile — the hero image was capped by width only, so on a tall-narrow phone it still
   rendered near full-viewport-width tall, pushing the thumbnails and Key Features below
   the fold. Cap by viewport height too, and trim the surrounding padding so image +
   thumbnails + the start of "More Than a Toy" all fit on the first screen. */
@media(max-width:680px){
  .pdp{padding:8px var(--gutter) 0; gap:10px;}
  /* thumbs move to a narrow vertical strip on the left of the image, same idea as
     desktop — frees the vertical space a row-of-thumbs-underneath used to cost, so
     Order Now still lands on the first screen without scrolling. */
  .gallery{display:flex; align-items:flex-start; gap:8px;}
  .gallery-main{order:2; margin:0; flex:1 1 auto; max-height:36vh; padding:2%;}
  .gallery-thumbs{
    order:1; flex:0 0 auto; flex-direction:column; flex-wrap:nowrap; justify-content:flex-start;
    gap:5px; max-height:36vh; overflow-y:auto;
  }
  .gallery-thumbs .t{width:40px; height:40px; padding:3px;}
  .section:first-of-type{padding-top:8px;}
  .cta-row{margin-bottom:10px; gap:8px;}
  .trust-row{padding-top:8px; gap:12px;}
  /* price moves below the Order Now/Add to Cart row on mobile (desktop keeps price
     first) so the buy button lands higher, within the first screen. */
  .price-cta-row{display:flex; flex-direction:column;}
  .price-cta-row .cta-row{order:1;}
  .price-cta-row .price-block{order:2; margin-top:8px; margin-bottom:0;}
  .price-block .now{font-size:11.5px;}
  .qty-stepper.compact button{width:26px; height:32px;}
  .qty-stepper.compact span{width:22px;}
  .btn.compact{padding:9px 12px; font-size:11.5px;}
  .feature-cell.style-paragraph .fc-media img, .feature-cell.style-image-callout .fc-media img{max-height:80px;}
  .section .sub{margin-bottom:6px;}
}

.pdp-info{position:relative;}
/* no local glow here on purpose — .pdp-info sits directly on the one shared sitewide
   background now, same as everywhere else, rather than its own colored zone */
.pdp-info > *{position:relative; z-index:1;}

.pdp-info .kicker{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:1.5px; color:var(--cyan); margin-bottom:8px;}
.pdp-info h1{font-family:'Orbitron',sans-serif; font-weight:900; font-size:clamp(26px,3.4vw,38px); margin-top:0; margin-bottom:8px;}
.pdp-info .pitch-line{color:var(--ink); font-size:16px; font-weight:600; margin-bottom:8px; max-width:520px;}
.pdp-info .lede{color:var(--slate); font-size:15px; margin-bottom:10px; max-width:520px;}
.price-block{display:flex; align-items:baseline; gap:12px; margin-bottom:6px; flex-wrap:wrap;}
.price-block .now{font-family:'Orbitron',sans-serif; font-size:12.5px; font-weight:900; color:var(--cyan);}
.price-block .was{font-size:16px; color:var(--slate); text-decoration:line-through;}
.price-block .save{font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--green);}

.age-safety-row{display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--slate); margin:12px 0;}
.proximity-trust-strip{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:14.5px; font-weight:700; color:var(--ink);
  background:linear-gradient(90deg, rgba(63,224,255,0.12), rgba(255,107,0,0.08));
  border:1px solid var(--line); border-radius:10px; padding:10px 14px; margin-bottom:14px;
}
.proximity-trust-strip .arrow{color:var(--cyan); opacity:0.8; font-size:13px;}
@media(max-width:680px){
  .proximity-trust-strip{flex-wrap:nowrap; gap:5px; font-size:11px; padding:8px 10px; overflow-x:auto;}
  .proximity-trust-strip .arrow{font-size:10px;}
}
.courier-line{font-size:12.5px; color:var(--green); margin-top:-4px; margin-bottom:14px;}

/* ---------- PDP purchase card + flowing content column ----------
   .purchase-card is the "one decision" block (badges/price/CTA/qty) — light card
   treatment so it reads as a distinct decision point rather than blending into the
   page. Not sticky at any breakpoint (was sticky on desktop only; dropped per direct
   feedback — "freezing" the card felt too heavy) — it stays in normal document flow
   everywhere, and #pdp-mobile-bar (below, despite the name — now shown at every
   breakpoint) takes over the "always-visible CTA" job once the inline card scrolls out
   of view. */
.purchase-card{
  border:1px solid var(--line); border-radius:16px; background:var(--deep);
  box-shadow:0 8px 28px rgba(0,0,0,0.45); padding:18px 20px; margin-bottom:20px;
}

.pdp-flow{display:flex; flex-direction:column; gap:4px;}
.feature-prose{border-radius:14px; padding:20px 22px; margin-bottom:14px;}
.feature-prose.panel-tone-a{background:var(--panel);}
.feature-prose.panel-tone-b{background:var(--panel2);}
.feature-prose h2{margin-bottom:10px;}
.feature-prose p{font-size:13.5px; line-height:1.6; color:var(--slate); margin-bottom:12px;}
.feature-prose p strong{color:var(--ink);}
.feature-prose .fc-media{margin:0 0 14px;}
.feature-prose .fc-media img{width:100%; max-height:220px; object-fit:cover; border-radius:10px;}
.feature-prose .fc-title{font-family:'Orbitron',sans-serif; font-weight:800; font-size:clamp(15px,1.8vw,18px); margin-bottom:6px;}
.feature-prose .fc-sub{font-size:13px; line-height:1.5; color:var(--slate); margin-bottom:10px;}
.feature-prose .box-panel{grid-template-columns:1fr; padding:0;}
@media(min-width:560px){ .feature-prose .box-panel{grid-template-columns:repeat(2,1fr);} }
.box-pro-tip-line{grid-column:1/-1; font-size:13.5px; line-height:1.6; color:var(--slate); padding:0 10px;}

/* slim floating Order Now button, every breakpoint (name predates the desktop rollout)
   — fades in once the inline purchase card's CTA row has scrolled out of view above
   (see the IntersectionObserver in product.html), so the buy action stays reachable
   without pinning the whole card. */
.pdp-mobile-bar{
  position:fixed; left:16px; bottom:16px; z-index:50; display:inline-block;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease, visibility 0s linear .2s;
}
.pdp-mobile-bar.visible{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .2s ease;
}
.pdp-mobile-bar .btn{flex:none; display:inline-block; padding:12px 22px; box-shadow:0 8px 20px rgba(0,0,0,0.4);}
/* desktop: right-aligned, stacked just above the floating WhatsApp FAB (right:18px,
   bottom:18px, 40px tall — see _base.html) instead of bottom-left. */
@media(min-width:900px){ .pdp-mobile-bar{left:auto; right:18px; bottom:70px;} }

.trust-bar{
  position:sticky; top:0; z-index:21; box-sizing:border-box; min-height:var(--trustbar-h);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 14px;
  padding:10px var(--gutter); font-size:14px; font-weight:600; color:var(--ink);
  background:linear-gradient(90deg, rgba(63,224,255,0.32), rgba(255,107,0,0.26)), var(--deep);
  border-bottom:1px solid var(--line);
}
.trust-bar .item{display:flex; align-items:center; gap:6px;}
.trust-bar .sep{color:var(--slate); opacity:0.6;}
.trust-bar .call{color:var(--cyan); text-decoration:none; display:flex; align-items:center; gap:6px; font-weight:700;}
.trust-bar .call svg{width:14px; height:14px; flex-shrink:0;}
@media(max-width:680px){
  .trust-bar{flex-wrap:nowrap; justify-content:space-between; gap:6px; font-size:10.5px; padding:8px 12px;}
  .trust-bar .sep{flex-shrink:0;}
  .trust-bar .call svg{width:12px; height:12px;}
  .hide-mobile{display:none;}
}
@media(min-width:681px){ .trust-bar{display:none;} }

.benefits-strip{
  display:flex; flex-wrap:wrap; gap:10px 24px;
  margin:4px 0 18px; padding:14px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--ink); font-weight:600;
}
@media(max-width:680px){ .benefits-strip{gap:8px 16px; font-size:11px;} }

.battery-spec-table{
  display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-top:14px; max-width:520px;
}
.battery-spec-table .row{display:contents;}
.battery-spec-table .k, .battery-spec-table .v{background:var(--panel2); padding:10px 14px; font-size:12.5px;}
.battery-spec-table .k{color:var(--slate); font-family:'JetBrains Mono',monospace;}
.battery-spec-table .v{color:var(--ink); font-weight:600;}

.final-cta-line{
  margin:6px 0 0; font-size:13.5px; color:var(--slate); font-style:italic;
}

.qty-stepper{display:flex; align-items:center; border:1px solid var(--line); border-radius:10px; overflow:hidden; flex:none;}
.qty-stepper button{
  width:38px; height:40px; background:var(--panel2); color:var(--ink); border:none;
  font-size:16px; cursor:pointer;
}
.qty-stepper span{width:44px; text-align:center; font-family:'JetBrains Mono',monospace; font-size:14px;}
.qty-stepper.compact button{width:28px; height:32px; font-size:13px;}
.qty-stepper.compact span{width:26px; font-size:12px;}
.stock-note{font-size:12px; color:var(--slate);}

.cta-row{display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap;}
.btn{
  flex:1; padding:14px 20px; border-radius:12px; font-weight:700; font-size:14.5px;
  border:none; cursor:pointer; text-align:center; font-family:'Space Grotesk',sans-serif;
}
.btn.compact{flex:0 1 auto; padding:9px 16px; font-size:12.5px; white-space:nowrap;}
.btn-primary{background:linear-gradient(90deg,var(--orange),#FF8A3D); color:#0A0500;}
.btn-secondary{background:var(--panel2); color:var(--ink); border:1px solid var(--line);}

.trust-row{display:flex; gap:18px; flex-wrap:wrap; font-size:12px; color:var(--slate); padding-top:12px; border-top:1px solid var(--line);}
.trust-row .item{display:flex; align-items:center; gap:6px;}

/* restock notify */
.restock-box{
  background:rgba(255,107,0,0.06); border:1px solid rgba(255,107,0,0.3); border-radius:14px;
  padding:18px 20px; margin-bottom:20px;
}
.restock-box .t{font-weight:700; font-size:14px; margin-bottom:4px;}
.restock-box .s{font-size:12.5px; color:var(--slate); margin-bottom:14px;}
.restock-box form{display:flex; gap:10px; flex-wrap:wrap;}
.restock-box input{
  flex:1; min-width:140px; background:var(--panel2); border:1px solid var(--line);
  border-radius:8px; padding:10px 12px; color:var(--ink); font-size:13px;
}

/* sections below fold — one shared cosmic backdrop (::before, same galaxy-panorama/grid
   treatment as .pdp::before) spans each *entire* section including its heading, so there's
   no color/edge boundary between the title and the panel below it, and no mismatch against
   the page's own background (body is the same --deep now, not a different --void shade). */
.section{position:relative; padding:20px var(--gutter) 0; max-width:1920px; margin:0 auto;}
.section > *{position:relative; z-index:1;}
.section h2{font-family:'Orbitron',sans-serif; font-weight:700; font-size:clamp(20px,2.6vw,26px); margin-bottom:6px;}
.section .sub{color:var(--slate); font-size:13.5px; margin-bottom:10px;}

/* key features — all 8 blocks in one 3-across grid (desktop), no per-cell borders/frames
   (transparent, sits directly on the shared section backdrop like before). Paragraph/
   image-callout cells run image-left, content-right — not stacked vertically. */
.feature-grid{position:relative; display:grid; grid-template-columns:1fr; gap:22px 24px;}
@media(min-width:900px){ .feature-grid{grid-template-columns:repeat(3,1fr);} }
.feature-cell{position:relative; z-index:1;}
/* 8 blocks in a 3-col grid always leaves a 2-item last row — shift it into columns 2-3
   instead of 1-2 so it reads centered rather than flush-left. nth-child(8) not (7): the
   .section-deco sprite layer is itself the grid's first child, so the 7th .feature-cell
   is the 8th child overall. Matches only when there are exactly 8 cells (2nd-to-last
   child); harmless no-op otherwise. */
@media(min-width:900px){ .feature-grid > .feature-cell:nth-child(8):nth-last-child(2){ grid-column:2; } }

.feature-cell.style-paragraph, .feature-cell.style-image-callout{
  display:flex; flex-direction:row; align-items:flex-start; text-align:left; gap:12px;
}
.feature-cell.style-paragraph .fc-media, .feature-cell.style-image-callout .fc-media{flex:0 0 34%; display:flex; justify-content:center;}
.feature-cell.style-paragraph .fc-media img, .feature-cell.style-image-callout .fc-media img{
  max-height:100px; width:auto; max-width:100%; object-fit:contain; display:block;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,0.5));
}
.feature-cell.style-paragraph .fc-body, .feature-cell.style-image-callout .fc-body{flex:1;}
.feature-cell .fc-title{font-family:'Orbitron',sans-serif; font-weight:800; font-size:clamp(14px,1.8vw,17px); margin-bottom:4px;}
.feature-cell .fc-sub{font-size:12.5px; line-height:1.5; color:var(--slate);}

.feature-cell.style-callout{display:flex; align-items:center; justify-content:center; text-align:center; padding:10px 4px;}
.feature-cell.style-callout .callout-stamp{
  font-family:'Space Grotesk',sans-serif; font-weight:400; font-size:clamp(14px,1.7vw,17px); color:var(--slate);
}
.feature-cell.style-callout .callout-stamp::before{content:"“"; color:var(--cyan); margin-right:2px;}
.feature-cell.style-callout .callout-stamp::after{content:"”"; color:var(--cyan); margin-left:2px;}

.feature-cell.style-sequence{text-align:center;}
.feature-cell.style-sequence .fc-title{font-size:clamp(15px,2vw,18px);}
.feature-cell.style-sequence .fc-sub{margin-bottom:10px;}
.seq-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; position:relative; z-index:1;}
.seq-chip{
  font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; letter-spacing:0.5px;
  padding:8px 15px; border-radius:100px; background:rgba(63,224,255,0.1);
  border:1px solid rgba(63,224,255,0.35); color:var(--cyan);
}
.seq-chip.accent{background:rgba(255,107,0,0.14); border-color:rgba(255,107,0,0.42); color:var(--orange);}
.seq-arrow{color:var(--slate); font-size:14px;}
.seq-tagline{font-size:12.5px; color:var(--slate); font-style:italic; margin-top:2px; position:relative; z-index:1;}

.feature-cell.style-dimensions{text-align:center;}
.feature-cell.style-dimensions .fc-title{margin-bottom:2px;}
.feature-cell.style-dimensions .fc-sub{margin-bottom:8px;}
.dim-diagram{display:flex; justify-content:center; position:relative; z-index:1;}
.dim-diagram svg{width:100%; max-width:190px; height:auto;}
.dim-stats{margin-top:10px;}

/* box contents — a compact 2-3 column grid; no background of its own, the parent
   .section::before supplies the same backdrop used everywhere else now */
.box-panel{
  position:relative;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:2px; padding:6px 12px 16px;
}
.box-label{grid-column:1/-1; font-family:'JetBrains Mono',monospace; font-size:13.5px; white-space:nowrap; letter-spacing:0.8px; text-transform:uppercase; color:var(--green); padding:16px 10px 8px;}
.box-label.excluded{color:var(--orange); border-top:1px solid rgba(255,255,255,0.06); margin-top:6px; padding-top:18px;}
.box-label.pro-tip{color:var(--cyan); border-top:1px solid rgba(255,255,255,0.06); margin-top:6px; padding-top:18px;}
.delivery-disclaimer{font-size:12px; color:var(--slate); margin:8px 0 14px;}
.box-item{
  display:flex; gap:12px; align-items:flex-start; padding:10px; margin:2px;
}
.box-item .ph{width:52px; height:52px; border-radius:12px; overflow:hidden; flex-shrink:0; padding:7px; box-sizing:border-box;}
.box-item .ph img{width:100%; height:100%; object-fit:contain;}
.box-item .ph-icon{
  width:52px; height:52px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:22px; background:rgba(255,107,0,0.08); border:1px solid rgba(255,107,0,0.25);
}
.box-item .name{font-weight:700; font-size:13px;}
.box-item .desc{font-size:11.5px; color:var(--slate); margin-top:2px;}
.callout{
  margin:14px 22px 20px; padding:12px 14px; border-radius:10px;
  background:rgba(255,107,0,0.08); border:1px solid rgba(255,107,0,0.3);
  font-size:12px; color:var(--ink); display:flex; gap:8px;
}

/* related carousel */
.related-row{display:flex; gap:16px; flex-wrap:wrap;}
.related-row .p-card{flex:0 1 220px;}
.related-row .p-card .body{padding:10px;}
.related-row .p-card h3{font-size:12px; margin-bottom:2px;}
.related-row .p-card .cat{font-size:9px; margin-bottom:6px;}
.related-row .p-card .now{font-size:13px;}

@media(max-width:680px){
  .related-row{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
  .related-row .p-card{flex:none;}
  .related-row .p-card .body{padding:8px;}
  .related-row .p-card h3{font-size:10.5px; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .related-row .p-card .cat{font-size:8px; margin-bottom:4px;}
  .related-row .p-card .now{font-size:11.5px;}
  .related-row .p-card .was{font-size:8.5px;}
}

/* admin — collapsible left sidebar (replaced the horizontal top nav once it grew past
   ~13 links and started wrapping to 3 rows) */
.wordmark{
  font-family:'Orbitron',sans-serif; font-weight:700; letter-spacing:1px;
  color:var(--ink); text-decoration:none; white-space:nowrap;
}
.wordmark b{color:var(--cyan);}
.wordmark-icon{
  height:1.35em; width:auto; object-fit:contain; vertical-align:-0.02em;
  /* asymmetric on purpose — "S" is a curved glyph whose ink pulls in from its own
     bounding-box edge (optical right-side bearing), so a box-touching 0px gap still
     reads as visible whitespace next to S even though the same value looks flush next
     to T's straight left stroke. Pulled further left to compensate. */
  margin-left:-14px; margin-right:-10px;
}
.login-wordmark{display:block; font-size:24px; text-align:center; margin-bottom:24px;}

.admin-sidebar{
  position:fixed; top:0; left:0; bottom:0; width:240px; z-index:40;
  display:flex; flex-direction:column; background:rgba(5,9,20,0.96); backdrop-filter:blur(10px);
  border-right:1px solid var(--line); overflow-y:auto; overflow-x:hidden;
  transition:width .18s ease, transform .18s ease;
}
.sidebar-top{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:18px 16px; border-bottom:1px solid var(--line); flex-shrink:0;}
.sidebar-top .wordmark{font-size:13px;}
.sidebar-toggle{
  flex-shrink:0; width:28px; height:28px; border-radius:8px; border:1px solid var(--line);
  background:var(--panel2); color:var(--slate); cursor:pointer; font-size:11px;
  display:flex; align-items:center; justify-content:center; transition:transform .18s ease, color .12s ease;
}
.sidebar-toggle:hover{color:var(--cyan);}

.sidebar-nav{display:flex; flex-direction:column; gap:2px; padding:12px; flex:1;}
.sidebar-nav a{
  display:flex; align-items:center; gap:12px; font-size:13px; color:var(--slate);
  padding:10px 12px; border-radius:8px; white-space:nowrap;
  transition:background .12s ease, color .12s ease;
}
.sidebar-nav a:hover{color:var(--ink); background:rgba(255,255,255,0.04);}
.sidebar-nav a.active{color:var(--cyan); background:rgba(63,224,255,0.1);}
.nav-icon{font-size:16px; flex-shrink:0; width:20px; text-align:center;}
.nav-label{overflow:hidden; text-overflow:ellipsis;}

.sidebar-user{padding:14px 12px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px; flex-shrink:0;}
.sidebar-user-info{display:flex; align-items:center; gap:10px; padding:0 4px 6px; min-width:0;}
.user-avatar{
  flex-shrink:0; width:30px; height:30px; border-radius:50%; background:var(--panel2);
  border:1px solid var(--line); color:var(--cyan); font-family:'Orbitron',sans-serif; font-weight:700;
  font-size:13px; display:flex; align-items:center; justify-content:center;
}
.sidebar-user-text{display:flex; flex-direction:column; gap:4px; min-width:0;}
.sidebar-user-text .name{font-size:12.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sidebar-badges{display:flex; gap:6px; flex-wrap:wrap;}
.sidebar-user .btn-sm{display:flex; align-items:center; gap:10px; width:100%; box-sizing:border-box;}
.sidebar-user form{width:100%;}
.sidebar-user form .btn-sm{width:100%; cursor:pointer;}

.mobile-nav-trigger{display:none;}

.sidebar-backdrop{display:none;}

.admin-content{margin-left:240px; padding:28px clamp(20px,3vw,40px) 80px; max-width:1320px; transition:margin-left .18s ease;}

/* collapsed — desktop rail, state persisted via localStorage (app/templates/admin/_base.html) */
@media(min-width:861px){
  html.sidebar-collapsed .admin-sidebar{width:68px;}
  html.sidebar-collapsed .admin-content{margin-left:68px;}
  html.sidebar-collapsed .sidebar-toggle{transform:rotate(180deg);}
  html.sidebar-collapsed .sidebar-top{justify-content:center;}
  html.sidebar-collapsed .sidebar-top .wordmark{display:none;}
  html.sidebar-collapsed .nav-label,
  html.sidebar-collapsed .sidebar-user-text{display:none;}
  html.sidebar-collapsed .sidebar-nav a,
  html.sidebar-collapsed .sidebar-user-info,
  html.sidebar-collapsed .sidebar-user .btn-sm{justify-content:center;}
}

/* mobile — slide-in overlay drawer, same fixed+backdrop pattern as the storefront cart
   drawer (app/templates/storefront/_base.html), not persisted (always starts closed) */
@media(max-width:860px){
  .admin-sidebar{width:260px; transform:translateX(-100%); box-shadow:0 0 40px rgba(0,0,0,0.4);}
  html.sidebar-open .admin-sidebar{transform:translateX(0);}
  .admin-content{margin-left:0; padding-top:74px;}
  .mobile-nav-trigger{
    display:flex; position:fixed; top:14px; left:14px; z-index:45;
    width:38px; height:38px; border-radius:10px; border:1px solid var(--line);
    background:rgba(5,9,20,0.9); backdrop-filter:blur(8px); color:var(--ink);
    align-items:center; justify-content:center; font-size:18px; cursor:pointer;
  }
  html.sidebar-open .sidebar-backdrop{display:block; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:35;}
}

.admin-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; flex-wrap:wrap; gap:14px;}
.admin-header h1{font-family:'Orbitron',sans-serif; font-size:21px; letter-spacing:0.3px;}

.stat-strip{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:30px;}
@media(min-width:700px){ .stat-strip{grid-template-columns:repeat(4,1fr);} }
.stat-strip .stat{background:var(--deep); padding:18px 18px;}
.stat-strip .k{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--cyan); letter-spacing:1px; margin-bottom:6px;}
.stat-strip .v{font-family:'Orbitron',sans-serif; font-size:20px; font-weight:700;}
.stat-strip .delta{font-size:11px; margin-top:4px;}
.stat-strip .delta.up{color:var(--green);}
.stat-strip .delta.down{color:var(--red);}

.admin-table{width:100%; border-collapse:collapse; background:var(--panel2); border:1px solid var(--line); border-radius:14px; overflow:hidden;}
.admin-table th{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.8px; color:var(--cyan);
  text-align:left; padding:12px 16px; text-transform:uppercase; border-bottom:1px solid var(--line);
}
.admin-table td{padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.05); font-size:13.5px;}
.admin-table tr:last-child td{border-bottom:none;}
.admin-table tbody tr{transition:background .12s ease;}
.admin-table tbody tr:hover{background:rgba(255,255,255,0.02);}
.admin-table .item-cell{display:flex; align-items:center; gap:12px;}
.admin-table .item-cell img{width:40px; height:40px; border-radius:8px; object-fit:cover;}
.pill-status{font-family:'JetBrains Mono',monospace; font-size:10px; padding:4px 10px; border-radius:100px;}
.pill-status.active{background:rgba(74,222,128,0.12); color:var(--green);}
.pill-status.inactive{background:rgba(139,152,184,0.15); color:var(--slate);}
.btn-sm{
  font-family:'JetBrains Mono',monospace; font-size:11px; padding:7px 13px; border-radius:8px;
  background:var(--panel2); border:1px solid var(--line); color:var(--ink); cursor:pointer;
  transition:border-color .12s ease, background .12s ease, transform .12s ease;
}
.btn-sm:hover{border-color:rgba(63,224,255,0.4); transform:translateY(-1px);}
.btn-sm.primary{background:rgba(63,224,255,0.12); border-color:rgba(63,224,255,0.4); color:var(--cyan);}
.btn-sm.primary:hover{background:rgba(63,224,255,0.2);}
.btn-sm.danger{background:rgba(251,113,133,0.1); border-color:rgba(251,113,133,0.35); color:var(--red);}
.btn-sm.danger:hover{background:rgba(251,113,133,0.18);}
.btn-sm[disabled]{opacity:0.4; cursor:not-allowed; transform:none;}
.btn:hover{filter:brightness(1.08); transform:translateY(-1px);}
.btn{transition:filter .12s ease, transform .12s ease;}

/* ---------- forms ---------- */
.form-card{
  background:linear-gradient(180deg,var(--panel2),var(--deep)); border:1px solid var(--line);
  border-radius:16px; padding:26px; max-width:720px; box-shadow:0 8px 24px rgba(0,0,0,0.18);
}
.form-row{margin-bottom:16px;}
.form-row label{display:block; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.6px; color:var(--slate); text-transform:uppercase; margin-bottom:6px;}
.form-row input[type=text], .form-row input[type=email], .form-row input[type=password],
.form-row input[type=number], .form-row input[type=date], .form-row input[type=tel],
.form-row select, .form-row textarea{
  width:100%; background:var(--deep); border:1px solid var(--line); border-radius:8px;
  padding:10px 12px; color:var(--ink); font-size:13.5px; font-family:'Space Grotesk',sans-serif;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  outline:none; border-color:rgba(63,224,255,0.55); box-shadow:0 0 0 3px rgba(63,224,255,0.12);
}
.form-row select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238B98B8' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:10px 7px; padding-right:32px;
}
.form-row textarea{min-height:100px; resize:vertical;}
.form-row .hint{font-size:11.5px; color:var(--slate); margin-top:4px;}
.form-grid{display:grid; grid-template-columns:1fr; gap:0 16px;}
@media(min-width:640px){ .form-grid.cols-2{grid-template-columns:1fr 1fr;} .form-grid.cols-3{grid-template-columns:1fr 1fr 1fr;} }
.form-actions{display:flex; gap:10px; margin-top:8px;}
.checkbox-row{display:flex; align-items:center; gap:8px;}
.checkbox-row input{width:auto; accent-color:var(--cyan);}
.checkbox-row label{margin-bottom:0; text-transform:none; font-family:'Space Grotesk',sans-serif; font-size:13.5px; color:var(--ink);}

.line-items{border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-bottom:10px;}
.line-items .line-row{display:grid; grid-template-columns:2fr 1fr 1fr auto; gap:10px; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,0.05); align-items:center;}
.line-items.currency .line-row{grid-template-columns:2fr 1fr 1fr 0.8fr 1fr auto;}
.line-items .line-row:last-child{border-bottom:none;}
.line-items .line-row:hover{background:rgba(255,255,255,0.02);}

.alert{border-radius:10px; padding:12px 14px; font-size:13px; margin-bottom:16px;}
.alert-error{background:rgba(251,113,133,0.1); border:1px solid rgba(251,113,133,0.35); color:var(--red);}
.alert-warn{background:rgba(251,191,36,0.1); border:1px solid rgba(251,191,36,0.35); color:var(--amber);}
.alert-success{background:rgba(74,222,128,0.1); border:1px solid rgba(74,222,128,0.35); color:var(--green);}

/* ---------- login ---------- */
.login-shell{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.login-card{width:100%; max-width:380px; background:linear-gradient(180deg,var(--panel2),var(--deep)); border:1px solid var(--line); border-radius:16px; padding:32px; box-shadow:0 16px 40px rgba(0,0,0,0.3);}
.login-card h1{font-family:'Orbitron',sans-serif; font-size:16px; text-align:center; margin-bottom:20px; color:var(--slate); font-weight:500;}
.login-card .btn{width:100%;}

/* ---------- misc admin ---------- */
.role-badge{font-family:'JetBrains Mono',monospace; font-size:10px; padding:3px 9px; border-radius:100px; text-transform:uppercase;}
.role-badge.operations{background:rgba(255,107,0,0.14); color:var(--orange);}
.role-badge.finance{background:rgba(74,222,128,0.14); color:var(--green);}
.role-badge.social_media{background:rgba(63,224,255,0.12); color:var(--cyan);}
.role-badge.sales{background:rgba(251,191,36,0.14); color:var(--amber);}
.stat-strip .stat.wide{grid-column:span 2;}
.print-only{display:none;}
@media print{
  body *{visibility:hidden;}
  .print-only, .print-only *{visibility:visible;}
  .print-only{display:block; position:absolute; top:0; left:0;}
}

/* ---------- finance reports ---------- */
.report-sheet{background:var(--panel2); border:1px solid var(--line); border-radius:16px; padding:clamp(20px,3vw,40px); margin-bottom:24px;}
.report-letterhead{display:flex; flex-direction:column; gap:6px; align-items:center; text-align:center; border-bottom:1px solid var(--line); padding-bottom:22px; margin-bottom:26px;}
.report-title{font-family:'Orbitron',sans-serif; font-weight:700; font-size:18px; letter-spacing:0.5px; color:var(--ink); margin-top:4px;}
.report-meta{display:flex; gap:16px; flex-wrap:wrap; justify-content:center; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--slate); margin-top:4px;}
.report-section-title{font-family:'Orbitron',sans-serif; font-weight:700; font-size:14px; color:var(--cyan); margin-bottom:14px; letter-spacing:0.3px;}
.report-big-figure{font-family:'Orbitron',sans-serif; font-size:26px; font-weight:700; color:var(--ink); margin-bottom:12px;}
.report-line-item{display:flex; justify-content:space-between; gap:10px; font-size:12.5px; padding:6px 0; border-bottom:1px solid var(--line); color:var(--slate);}
.report-line-item:last-child{border-bottom:none;}
.report-footer{margin-top:8px; padding-top:16px; border-top:1px solid var(--line);}

.dow-chart{display:flex; align-items:flex-end; gap:10px; height:160px; padding-top:20px;}
.dow-bar{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%;}
.dow-bar .bar{width:100%; max-width:36px; background:linear-gradient(180deg,var(--cyan),var(--orange)); border-radius:6px 6px 0 0; min-height:2px;}
.dow-bar .dow-label{font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--slate); margin-top:8px;}
.dow-bar .dow-value{font-size:10px; color:var(--ink); margin-top:2px;}

/* growth trend line — single-series weekly trend (Reports revenue / Analytics visitors),
   percentage-viewBox SVG stretched via preserveAspectRatio="none", no chart library.
   Static (no hover/tooltip) to match the day-of-week/hourly bar charts' own lack of
   interactivity — selective labels (first/peak/last) instead of one per point. */
.trend-chart{height:140px; position:relative;}
.trend-chart svg{width:100%; height:100%; display:block; overflow:visible;}
.trend-area{fill:rgba(63,224,255,0.10);}
.trend-line{fill:none; stroke:var(--cyan); stroke-width:2px; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;}
.trend-summary{display:flex; justify-content:space-between; gap:12px; margin-top:10px; font-size:11.5px; color:var(--slate); flex-wrap:wrap;}
.trend-summary b{color:var(--ink); font-family:'JetBrains Mono',monospace; font-weight:600;}
.trend-summary .peak b{color:var(--cyan);}

@media print{
  .admin-sidebar, .no-print{display:none !important;}
  body.admin-body, .admin-content{background:#fff !important; padding:0 !important; margin-left:0 !important;}
  /* Flip only the dark-theme structural tokens for the report — brand accents
     (cyan/orange/green/red) stay as-is, so the printed statement still reads as
     "Satima SmartBOTS" and not a generic invoice. Same reasoning as the dispatch
     label: dark-mode printouts waste ink and look wrong on paper. */
  .report-sheet{
    --void:#fff; --deep:#fff; --panel:#fff; --panel2:#f7f8fb; --ink:#12182b; --slate:#55607a; --line:#d9dce6;
    background:#fff; border:none; box-shadow:none; padding:0;
  }
}