:root{
    --blue:#0A66C2;
    --blue-deep:#033C77;
    --ink:#000C20;
    --ink-70:#5A5A5A;
    --paper:#FFFFFF;
    --paper-dim:#E8F0FA;
    --accent:#ED8D26;
    --accent-ink:#033C77;
    --current:#0AB0C2;
    --line:#D1E1F5;
    --line-dark:rgba(var(--on),0.14);
    --glass:rgba(var(--on),0.05);
    --glass-brd:rgba(var(--on),0.12);
    --radius:3px;
    --on:255,255,255;      /* text/linjer på mörka ytor */
    --on-solid:#fff;
    font-size:16px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth; scroll-padding-top:86px;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter Tight',system-ui,sans-serif;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    line-height:1.6;
    overflow-x:hidden;
  }
  h1,h2,h3,.disp{ font-family:'Inter Tight',system-ui,sans-serif; letter-spacing:-0.01em; margin:0; font-weight:700; }
  h3{ font-weight:600; }
  .mono{ font-family:'Inter Tight',sans-serif; font-variant-numeric:tabular-nums; letter-spacing:0.01em; }
  .tagline{ font-family:'Inter Tight'; font-weight:600; color:var(--blue); font-size:0.78rem; }
  a{color:inherit;} img{max-width:100%;display:block;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 32px; position:relative;}
  @media(max-width:640px){ .wrap{padding:0 20px;} }

  /* ---------- SCROLL PROGRESS ---------- */
  #progress{ position:fixed; top:0; left:0; height:2px; width:0%; background:linear-gradient(90deg,var(--current),var(--blue)); z-index:200; transition:width .08s linear; }

  /* ---------- NAV ---------- */
  header{ position:sticky; top:0; z-index:50; background:rgba(var(--on),0.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
  .navrow{ display:flex; align-items:center; justify-content:space-between; padding:16px 32px; max-width:1180px; margin:0 auto; }
  .brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.2rem; text-decoration:none; line-height:1.15; }
  .brand svg{ width:34px; height:34px; flex:none; }
  .brand .tagline{ font-size:0.62rem; font-weight:500; }
  .status-led{ display:inline-flex; align-items:center; gap:6px; font-size:0.68rem; color:var(--ink-70); margin-left:6px; padding:4px 9px; border:1px solid var(--line); border-radius:20px;}
  .status-led i{ width:6px;height:6px;border-radius:50%; background:var(--current); box-shadow:0 0 0 0 rgba(10,176,194,.6); animation:ledpulse 2s infinite;}
  @keyframes ledpulse{ 0%{box-shadow:0 0 0 0 rgba(10,176,194,.5);} 70%{box-shadow:0 0 0 6px rgba(10,176,194,0);} 100%{box-shadow:0 0 0 0 rgba(10,176,194,0);} }
  nav ul{ list-style:none; display:flex; gap:34px; margin:0; padding:0; font-size:0.93rem; }
  nav a{ text-decoration:none; color:var(--ink-70); transition:color .15s; }
  nav a:hover{ color:var(--ink); }
  .navcta{ display:inline-flex; align-items:center; gap:8px; background:var(--ink); color:var(--paper); text-decoration:none; padding:10px 20px; font-size:0.88rem; font-weight:500; border-radius:var(--radius); }
  .navwrap-outer{ display:flex; align-items:center; gap:36px; }
  .mobile-hide{ display:flex; align-items:center; }
  @media(max-width:840px){ .mobile-hide{display:none;} }

  /* ---------- DECORATIVE: grid + glow (used sparingly, dark sections only) ---------- */
  .techbg{ position:relative; background:var(--ink); color:var(--on-solid); overflow:hidden; }
  .techbg::before{
    content:''; position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(var(--on),0.055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(var(--on),0.055) 1px, transparent 1px);
    background-size:44px 44px;
    mask-image:radial-gradient(ellipse 90% 70% at 50% 20%, black 40%, transparent 85%);
    pointer-events:none;
  }
  .glow{ position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; opacity:.55; }
  .glow-blue{ background:#0A66C2; }
  .glow-teal{ background:#0AB0C2; }
  .glow-orange{ background:#ED8D26; opacity:.35; }

  /* ---------- HERO ---------- */
  .hero{ padding:110px 0 90px; }
  .hero .glow-blue{ width:520px; height:520px; top:-220px; right:-160px; }
  .hero .glow-teal{ width:360px; height:360px; bottom:-160px; left:-120px; opacity:.3; }
  .hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px; align-items:center; }
  @media(max-width:940px){ .hero-grid{grid-template-columns:1fr; gap:52px;} }
  .eyebrow-line{ display:flex; align-items:center; gap:10px; color:var(--current); font-size:0.85rem; font-weight:500; margin-bottom:22px;}
  .eyebrow-line .dot{width:7px;height:7px;border-radius:50%;background:var(--current); flex:none; box-shadow:0 0 12px 2px rgba(10,176,194,.7);}
  h1.hero-h{ font-size:clamp(2.5rem, 5vw, 3.8rem); line-height:1.04; max-width:13ch; color:var(--on-solid); }
  .hero-sub{ margin-top:22px; font-size:1.15rem; font-weight:300; color:rgba(var(--on),0.68); max-width:46ch; }
  .hero-ctas{ margin-top:36px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
  .btn-primary{ background:var(--accent); color:#000C20; text-decoration:none; padding:14px 26px; font-weight:600; font-size:0.98rem; border-radius:var(--radius); border:1px solid var(--accent); box-shadow:0 0 0 0 rgba(237,141,38,.5); transition:box-shadow .25s, transform .15s; }
  .btn-primary:hover{ box-shadow:0 0 26px 2px rgba(237,141,38,.45); transform:translateY(-1px); }
  .btn-ghost{ color:var(--on-solid); text-decoration:none; font-weight:500; font-size:0.98rem; border-bottom:1px solid rgba(var(--on),.4); padding-bottom:2px; }
  .hero-metrics{ display:flex; gap:28px; margin-top:46px; flex-wrap:wrap; }
  .hero-metrics .m{ min-width:90px; }
  .hero-metrics .v{ font-size:1.5rem; font-weight:700; color:var(--on-solid); }
  .hero-metrics .l{ font-size:0.74rem; color:rgba(var(--on),0.5); margin-top:2px;}

  /* price curve glass card */
  .curve-card{
    background:linear-gradient(180deg, rgba(var(--on),.07), rgba(var(--on),.02));
    border:1px solid var(--glass-brd); backdrop-filter:blur(6px);
    border-radius:8px; padding:26px 24px 20px; position:relative;
    box-shadow:0 20px 60px -20px rgba(0,0,0,.6);
  }
  .curve-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:2px;}
  .curve-top .label{ font-size:0.78rem; color:rgba(var(--on),0.5); }
  .curve-top .big{ font-size:1.4rem; font-weight:700; }
  .live-chip{ display:inline-flex; align-items:center; gap:6px; font-size:0.68rem; color:var(--current); border:1px solid rgba(10,176,194,.4); padding:3px 9px; border-radius:20px;}
  .live-chip i{ width:5px;height:5px;border-radius:50%; background:var(--current); animation:ledpulse 2s infinite;}
  svg.curve{ width:100%; height:auto; margin-top:12px; }
  .curve-legend{ display:flex; gap:20px; margin-top:14px; font-size:0.75rem; color:rgba(var(--on),0.62); flex-wrap:wrap;}
  .curve-legend span{ display:inline-flex; align-items:center; gap:6px;}
  .swatch{width:9px;height:9px;border-radius:2px;}
  .curve-foot{ display:flex; justify-content:space-between; margin-top:18px; padding-top:16px; border-top:1px solid var(--glass-brd);}
  .curve-foot div{ font-size:0.72rem; color:rgba(var(--on),0.45);}
  .curve-foot b{ display:block; color:var(--on-solid); font-size:1rem; font-weight:700; margin-top:2px;}

  /* ---------- SECTION BASICS ---------- */
  section{ padding:88px 0; position:relative; }
  .section-line{ border-top:1px solid var(--line); }
  .kicker{ font-size:0.85rem; color:var(--current); font-weight:500; margin-bottom:14px; display:flex; align-items:center; gap:8px;}
  .kicker::before{ content:''; width:16px; height:1px; background:var(--current); display:inline-block; }
  h2.section-h{ font-size:clamp(1.7rem,3vw,2.3rem); max-width:16ch; }
  .lede{ color:var(--ink-70); font-weight:300; font-size:1.1rem; max-width:60ch; margin-top:16px;}

  /* count-up numbers */
  .countup{ font-variant-numeric:tabular-nums; }

  /* investment stats */
  .invest-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; margin-top:48px; align-items:center;}
  @media(max-width:860px){ .invest-grid{grid-template-columns:1fr;} }
  .stat{ display:flex; gap:22px; padding:22px 0; border-top:1px solid var(--line); transition:padding-left .2s; }
  .stat:first-child{ border-top:none; }
  .stat:hover{ padding-left:8px; }
  .stat .num{ font-size:1.9rem; font-weight:700; color:var(--blue); min-width:120px; flex:none;}
  .stat .txt{ color:var(--ink-70); font-size:0.96rem; padding-top:6px;}
  .stat .txt b{ color:var(--ink); font-weight:600; }
  .battery-visual{ background:var(--ink); border-radius:10px; padding:34px; position:relative; overflow:hidden; }
  .battery-visual .glow-blue{ width:280px; height:280px; top:-100px; right:-100px; opacity:.4;}

  /* ---------- BENEFIT (dark band, tech) ---------- */
  .band-dark{ color:var(--on-solid); }
  .band-dark .glow-orange{ width:360px; height:360px; top:20%; right:-140px; }
  .band-dark .glow-blue{ width:300px; height:300px; bottom:-140px; left:-100px; }
  .band-dark .kicker{ color:var(--current); }
  .band-dark .lede{ color:rgba(var(--on),0.68); }
  .benefit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; margin-top:48px; align-items:center;}
  @media(max-width:860px){ .benefit-grid{grid-template-columns:1fr;} }
  .payslip{ border:1px solid var(--glass-brd); border-radius:8px; padding:26px 24px; background:var(--glass); backdrop-filter:blur(6px); }
  .payslip-row{ display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--glass-brd); font-size:0.92rem;}
  .payslip-row:last-child{ border-bottom:none; }
  .payslip-row.total{ padding-top:16px; font-weight:600; font-size:1rem; }
  .payslip-row.total .v{ color:var(--accent); font-size:1.2rem; }

  /* ---------- DASHBOARD (new, signature hightech section) ---------- */
  .dash-panel{
    margin-top:52px; border:1px solid var(--glass-brd); border-radius:12px; overflow:hidden;
    background:linear-gradient(160deg, rgba(var(--on),.06), rgba(var(--on),.015));
    backdrop-filter:blur(6px);
  }
  .dash-head{ display:flex; justify-content:space-between; align-items:center; padding:18px 24px; border-bottom:1px solid var(--glass-brd); }
  .dash-head .dots{ display:flex; gap:6px; }
  .dash-head .dots i{ width:8px;height:8px;border-radius:50%; background:rgba(var(--on),.18); }
  .dash-body{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:0; }
  @media(max-width:820px){ .dash-body{grid-template-columns:1fr;} }
  .dash-gauge{ padding:34px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-right:1px solid var(--glass-brd); text-align:center;}
  @media(max-width:820px){ .dash-gauge{border-right:none; border-bottom:1px solid var(--glass-brd);} }
  .gauge-label{ font-size:0.76rem; color:rgba(var(--on),.5); margin-top:14px;}
  .gauge-pct{ font-size:0.85rem; color:rgba(var(--on),.85); margin-top:2px; font-weight:600;}
  .dash-metrics{ padding:30px 30px 10px; }
  .metric-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:26px;}
  @media(max-width:520px){ .metric-row{grid-template-columns:1fr;} }
  .metric{ border:1px solid var(--glass-brd); border-radius:8px; padding:16px 18px; background:rgba(var(--on),.02);}
  .metric .l{ font-size:0.72rem; color:rgba(var(--on),.5);}
  .metric .v{ font-size:1.4rem; font-weight:700; margin-top:6px; color:var(--on-solid);}
  .metric .v small{ font-size:0.8rem; font-weight:400; color:rgba(var(--on),.5);}
  .bars{ display:flex; align-items:flex-end; gap:3px; height:64px; padding:0 30px 26px;}
  .bars i{ flex:1; background:var(--current); opacity:.55; border-radius:2px 2px 0 0; transform:scaleY(0); transform-origin:bottom; transition:transform .6s ease; }
  .bars i.hi{ background:var(--accent); }
  .dash-panel.in .bars i{ transform:scaleY(1); }

  /* ---------- PROCESS with flow line ---------- */
  .steps-wrap{ position:relative; margin-top:56px; }
  .flow-line{ position:absolute; top:26px; left:0; width:100%; height:2px; z-index:0; }
  .steps{ display:grid; grid-template-columns:repeat(6,1fr); gap:0; position:relative; z-index:1;}
  @media(max-width:960px){ .steps{grid-template-columns:repeat(3,1fr);} .flow-line{display:none;} }
  @media(max-width:600px){ .steps{grid-template-columns:1fr;} }
  .step{ padding:0 20px 0 0; }
  .step .n{ width:26px; height:26px; border-radius:50%; border:1px solid var(--current); color:var(--current); display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:600; background:var(--paper); position:relative; z-index:2;}
  .step h3{ font-size:1rem; margin-top:16px; font-weight:600;}
  .step p{ font-size:0.87rem; color:var(--ink-70); margin-top:8px; }

  /* ---------- PRODUCTS ---------- */
  .prod-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:48px;}
  @media(max-width:800px){ .prod-grid{grid-template-columns:1fr;} }
  .prod{ background:var(--ink); color:var(--on-solid); border-radius:12px; padding:36px 32px; position:relative; overflow:hidden; border:1px solid transparent; transition:border-color .25s, transform .25s; }
  .prod:hover{ border-color:rgba(10,176,194,.5); transform:translateY(-3px); }
  .prod .glow-blue{ width:220px; height:220px; top:-90px; right:-90px; opacity:.35; }
  .prod-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:22px; position:relative; z-index:1;}
  .prod-name{ font-size:1.5rem; font-weight:700;}
  .prod-tag{ font-size:0.78rem; background:rgba(10,176,194,.15); color:var(--current); border:1px solid rgba(10,176,194,.4); padding:4px 10px; border-radius:20px; font-weight:500;}
  .battery-illust{ width:100%; height:100px; margin-bottom:20px; position:relative; z-index:1;}
  .cap-track{ height:6px; border-radius:3px; background:rgba(var(--on),.1); overflow:hidden; margin-top:6px;}
  .cap-fill{ height:100%; border-radius:3px; background:linear-gradient(90deg,var(--current),var(--blue)); width:0%; transition:width 1.1s ease; }
  .prod.in .cap-fill{ width:var(--cap); }
  .prod-spec{ display:flex; justify-content:space-between; padding:11px 0; border-top:1px solid rgba(var(--on),.1); font-size:0.9rem; position:relative; z-index:1;}
  .prod-spec .k{ color:rgba(var(--on),.55); }
  .prod-price{ margin-top:20px; padding-top:20px; border-top:1px solid rgba(var(--on),.22); position:relative; z-index:1;}
  .prod-price .label{ font-size:0.78rem; color:rgba(var(--on),.55);}
  .prod-price .amount{ font-size:1.5rem; font-weight:700; margin-top:4px;}
  .prod-price .amount span{ font-size:0.92rem; font-weight:400; color:rgba(var(--on),.55);}
  .prod-cta{ display:inline-flex; align-items:center; gap:8px; margin-top:22px; background:var(--accent); color:#000C20; text-decoration:none; padding:12px 22px; font-size:0.9rem; font-weight:600; border-radius:var(--radius); position:relative; z-index:1;}

  /* ---------- OM OSS ---------- */
  .about-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; margin-top:48px;}
  @media(max-width:860px){ .about-grid{grid-template-columns:1fr;} }
  .about-marks{ display:flex; flex-direction:column; gap:14px; }
  .about-mark{ border:1px solid var(--line); border-radius:8px; padding:22px; background:linear-gradient(160deg,var(--paper-dim),transparent); }
  .about-mark .lbl{ font-size:0.8rem; color:var(--ink-70);}
  .about-mark .val{ font-size:1.25rem; font-weight:700; margin-top:4px; color:var(--blue);}
  .about-copy p{ color:var(--ink-70); font-size:1rem; margin:0 0 20px; }
  .about-copy h3{ font-size:1.05rem; margin-bottom:10px; }

  /* ---------- FAQ ---------- */
  .faq-list{ margin-top:44px; border-top:1px solid var(--line);}
  .faq-item{ border-bottom:1px solid var(--line); }
  .faq-q{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 0; cursor:pointer; background:none; border:none; width:100%; text-align:left; font-size:1.02rem; font-weight:600; color:var(--ink);}
  .faq-q .plus{ font-size:1.2rem; color:var(--current); flex:none; transition:transform .2s; }
  .faq-item[open] .plus{ transform:rotate(45deg); }
  .faq-a{ padding:0 0 22px; color:var(--ink-70); font-size:0.96rem; max-width:64ch; }

  /* ---------- CONTACT ---------- */
  .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:48px; }
  @media(max-width:860px){ .contact-grid{grid-template-columns:1fr;} }
  .contact-card{ border:1px solid var(--line); border-radius:8px; padding:26px; transition:border-color .2s;}
  .contact-card:hover{ border-color:var(--blue); }
  .contact-card .lbl{ font-size:0.8rem; color:var(--ink-70); margin-bottom:6px;}
  .contact-card .val{ font-size:1.15rem; font-weight:700; }
  .contact-card a{ text-decoration:none; }

  /* ---------- FOOTER ---------- */
  footer{ color:var(--on-solid); padding:64px 0 32px; position:relative; }
  .foot-top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:40px; padding-bottom:44px; border-bottom:1px solid var(--glass-brd);}
  .foot-brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.3rem; text-decoration:none;}
  .foot-cols{ display:flex; gap:64px; flex-wrap:wrap; }
  .foot-col h4{ font-size:0.8rem; color:rgba(var(--on),0.5); margin:0 0 14px; font-weight:500;}
  .foot-col a, .foot-col p{ display:block; text-decoration:none; color:var(--on-solid); font-size:0.92rem; margin-bottom:9px; }
  .foot-bottom{ display:flex; justify-content:space-between; padding-top:24px; font-size:0.82rem; color:rgba(var(--on),0.45); flex-wrap:wrap; gap:10px;}

  .reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }

  ::selection{ background:var(--current); color:#fff; }
  :focus-visible{ outline:2px solid var(--current); outline-offset:2px; }
  @media (prefers-reduced-motion: reduce){ *{ transition:none !important; scroll-behavior:auto !important; animation:none !important; } }

/* =========================================================
   APP-KOMPONENTER (inloggning, butik, kassa, admin)
   ========================================================= */
.page{ padding:64px 0 96px; min-height:60vh; }
.page-head{ margin-bottom:36px; }
.page-head h1{ font-size:clamp(1.9rem,3.4vw,2.6rem); line-height:1.1; }
.page-head p{ color:var(--ink-70); font-weight:300; font-size:1.08rem; max-width:62ch; margin:14px 0 0; }
.panel{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:30px; }
.panel + .panel{ margin-top:20px; }
.panel h2{ font-size:1.15rem; margin-bottom:6px; }
.panel .hint{ color:var(--ink-70); font-size:0.88rem; margin:0 0 18px; }
.auth-wrap{ min-height:calc(100vh - 70px); display:grid; grid-template-columns:1fr 1fr; }
@media(max-width:900px){ .auth-wrap{grid-template-columns:1fr;} .auth-art{display:none;} }
.auth-art{ padding:80px 56px; display:flex; flex-direction:column; justify-content:flex-end; }
.auth-art h2{ font-size:2rem; line-height:1.1; max-width:14ch; color:var(--on-solid); position:relative; z-index:1; }
.auth-art p{ color:rgba(var(--on),.65); max-width:40ch; position:relative; z-index:1; }
.auth-form{ display:flex; align-items:center; justify-content:center; padding:48px 24px; background:var(--paper-dim); }
.auth-form .panel{ width:100%; max-width:420px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:0.84rem; font-weight:600; margin-bottom:6px; }
.field .req{ color:var(--accent); }
.field small{ display:block; color:var(--ink-70); font-size:0.78rem; margin-top:5px; }
.input, .field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=password], .field input[type=number], .field select, .field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:0.95rem; background:#fff; color:var(--ink); transition:border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus, .input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(10,102,194,.14); }
.field textarea{ min-height:96px; resize:vertical; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
@media(max-width:640px){ .grid-2{grid-template-columns:1fr;} }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--blue); color:#fff; border:none; padding:13px 24px; border-radius:8px; font:inherit; font-weight:600; font-size:0.95rem; cursor:pointer; text-decoration:none; transition:transform .15s, box-shadow .2s, opacity .15s; }
.btn:hover{ box-shadow:0 8px 22px -8px rgba(10,102,194,.55); transform:translateY(-1px); }
.btn-accent{ background:var(--accent); color:#000C20; }
.btn-accent:hover{ box-shadow:0 8px 22px -8px rgba(237,141,38,.6); }
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn-sm{ padding:7px 13px; font-size:0.82rem; border-radius:6px; }
.btn-danger{ background:#C20A66; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.alert{ padding:12px 16px; border-radius:8px; font-size:0.9rem; margin-bottom:18px; border:1px solid; }
.alert-error{ background:#E8F0FA; border-color:#D1E1F5; color:#C20A66; }
.alert-ok{ background:#E8F0FA; border-color:#D1E1F5; color:#000C20; }
.alert-info{ background:var(--paper-dim); border-color:var(--line); color:var(--ink); }

/* Butik */
.shop-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px; }
.shop-card{ background:var(--ink); color:var(--on-solid); border-radius:14px; padding:32px; position:relative; overflow:hidden; display:flex; flex-direction:column; text-decoration:none; border:1px solid transparent; transition:transform .25s, border-color .25s; }
.shop-card:hover{ transform:translateY(-4px); border-color:rgba(10,176,194,.55); }
.shop-card .glow{ width:240px; height:240px; top:-100px; right:-100px; opacity:.4; }
.shop-card h3{ font-size:1.5rem; position:relative; }
.shop-card .sub{ color:rgba(var(--on),.6); font-size:0.92rem; margin:6px 0 22px; position:relative; }
.shop-card .from{ margin-top:auto; padding-top:20px; border-top:1px solid rgba(var(--on),.14); position:relative; }
.shop-card .from span{ font-size:0.78rem; color:rgba(var(--on),.5); display:block; }
.shop-card .from b{ font-size:1.45rem; }
.shop-card .go{ margin-top:18px; color:var(--accent); font-weight:600; font-size:0.92rem; position:relative; }
.kwh-bar{ height:6px; border-radius:3px; background:rgba(var(--on),.1); overflow:hidden; position:relative; margin-bottom:6px; }
.kwh-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--current),var(--blue)); border-radius:3px; }

/* Produktsida */
.product-layout{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
@media(max-width:900px){ .product-layout{grid-template-columns:1fr;} }
.product-visual{ border-radius:16px; padding:40px; min-height:380px; display:flex; flex-direction:column; justify-content:center; }
.product-visual svg{ width:100%; height:auto; position:relative; z-index:1; }
.opt-group{ margin-bottom:22px; }
.opt-group > span{ display:block; font-size:0.84rem; font-weight:600; margin-bottom:10px; }
.opts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.opt{ position:relative; }
.opt input{ position:absolute; opacity:0; pointer-events:none; }
.opt label{ display:block; border:1.5px solid var(--line); border-radius:10px; padding:14px 16px; cursor:pointer; transition:border-color .15s, background .15s; }
.opt label b{ display:block; font-size:0.95rem; }
.opt label small{ color:var(--ink-70); font-size:0.78rem; }
.opt input:checked + label{ border-color:var(--blue); background:var(--paper-dim); box-shadow:0 0 0 3px rgba(10,102,194,.12); }
.opt input:focus-visible + label{ outline:2px solid var(--current); }
.price-box{ border:1px solid var(--line); border-radius:12px; overflow:hidden; margin:24px 0; }
.price-box .main{ padding:20px 22px; background:var(--paper-dim); display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.price-box .main b{ font-size:1.8rem; }
.price-box .main span{ color:var(--ink-70); font-size:0.85rem; }
.price-row{ display:flex; justify-content:space-between; padding:12px 22px; border-top:1px solid var(--line); font-size:0.92rem; }
.price-row span{ color:var(--ink-70); }
.spec-list{ margin:0; padding:0; list-style:none; }
.spec-list li{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); font-size:0.92rem; }
.spec-list li span{ color:var(--ink-70); }

/* Kassa */
.checkout{ display:grid; grid-template-columns:1.35fr 0.85fr; gap:32px; align-items:start; }
@media(max-width:960px){ .checkout{grid-template-columns:1fr;} }
.summary{ position:sticky; top:100px; }
.summary .line{ display:flex; justify-content:space-between; padding:9px 0; font-size:0.92rem; border-bottom:1px solid var(--line); }
.summary .line span{ color:var(--ink-70); }
.summary .total{ font-weight:700; font-size:1.05rem; border-bottom:none; padding-top:14px; }
.step-title{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.step-title i{ width:28px; height:28px; border-radius:50%; background:var(--blue); color:#fff; font-style:normal; font-weight:700; font-size:0.85rem; display:flex; align-items:center; justify-content:center; flex:none; }
.step-title h2{ margin:0; }
.upload{ border:1.5px dashed var(--line); border-radius:10px; padding:18px; text-align:center; transition:border-color .15s, background .15s; cursor:pointer; position:relative; }
.upload:hover, .upload.drag{ border-color:var(--blue); background:var(--paper-dim); }
.upload input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.upload .u-title{ font-weight:600; font-size:0.9rem; }
.upload .u-hint{ color:var(--ink-70); font-size:0.78rem; margin-top:4px; }
.upload-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.upload-chip{ display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:6px 8px; font-size:0.78rem; max-width:100%; }
.upload-chip img{ width:34px; height:34px; object-fit:cover; border-radius:4px; }
.upload-chip button{ border:none; background:none; color:#C20A66; cursor:pointer; font-size:1rem; line-height:1; }
.upload-progress{ height:4px; background:var(--line); border-radius:2px; overflow:hidden; margin-top:8px; display:none; }
.upload-progress i{ display:block; height:100%; width:0; background:var(--blue); transition:width .15s; }
.check{ display:flex; gap:10px; align-items:flex-start; font-size:0.9rem; }
.check input{ margin-top:3px; width:18px; height:18px; flex:none; accent-color:var(--blue); }

/* FAQ-sida */
.faq-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.faq-tabs button{ border:1px solid var(--line); background:#fff; border-radius:20px; padding:8px 16px; font:inherit; font-size:0.86rem; cursor:pointer; }
.faq-tabs button.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.faq-search{ margin-bottom:18px; }

/* Tack */
.thanks{ text-align:center; max-width:640px; margin:0 auto; }
.thanks .check-ring{ width:84px; height:84px; margin:0 auto 24px; border-radius:50%; background:rgba(10,176,194,.12); display:flex; align-items:center; justify-content:center; }
.timeline{ text-align:left; margin-top:32px; }
.timeline li{ list-style:none; position:relative; padding:0 0 20px 34px; }
.timeline li::before{ content:''; position:absolute; left:8px; top:22px; bottom:0; width:2px; background:var(--line); }
.timeline li:last-child::before{ display:none; }
.timeline li b{ display:block; }
.timeline li span{ color:var(--ink-70); font-size:0.9rem; }
.timeline li i{ position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:50%; border:2px solid var(--current); background:#fff; }
.timeline li.done i{ background:var(--current); }

/* User-meny */
.userbox{ display:flex; align-items:center; gap:12px; font-size:0.85rem; color:var(--ink-70); }
.userbox a{ color:var(--ink-70); text-decoration:none; }
.userbox a:hover{ color:var(--ink); }

/* =========================================================
   ADMIN
   ========================================================= */
.admin-body{ background:#E8F0FA; }
.admin-shell{ display:grid; grid-template-columns:240px 1fr; min-height:100vh; }
@media(max-width:900px){ .admin-shell{grid-template-columns:1fr;} .admin-side{position:static !important; height:auto !important;} }
.admin-side{ background:var(--ink); color:var(--on-solid); padding:24px 16px; position:sticky; top:0; height:100vh; display:flex; flex-direction:column; }
.admin-side .brand{ color:var(--on-solid); margin:0 8px 28px; }
.admin-side nav a{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; color:rgba(var(--on),.7); text-decoration:none; font-size:0.92rem; margin-bottom:2px; }
.admin-side nav a:hover{ background:rgba(var(--on),.06); color:var(--on-solid); }
.admin-side nav a.on{ background:rgba(10,176,194,.16); color:var(--on-solid); }
.admin-side nav a .badge{ margin-left:auto; background:var(--accent); color:#000C20; font-size:0.7rem; font-weight:700; padding:1px 7px; border-radius:10px; }
.admin-side .foot{ margin-top:auto; font-size:0.8rem; color:rgba(var(--on),.45); padding:0 8px; }
.admin-side .foot a{ color:rgba(var(--on),.7); }
.admin-main{ padding:32px 36px 64px; min-width:0; }
@media(max-width:640px){ .admin-main{padding:24px 16px;} }
.admin-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.admin-top h1{ font-size:1.6rem; }
.admin-top p{ margin:4px 0 0; color:var(--ink-70); font-size:0.9rem; }
.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
@media(max-width:900px){ .kpis{grid-template-columns:repeat(2,1fr);} }
.kpi{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px 20px; }
.kpi span{ font-size:0.78rem; color:var(--ink-70); }
.kpi b{ display:block; font-size:1.6rem; margin-top:4px; }
.toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.toolbar .input{ width:auto; min-width:220px; padding:9px 12px; }
.toolbar select.input{ min-width:170px; }
.table-wrap{ background:#fff; border:1px solid var(--line); border-radius:12px; overflow-x:auto; }
table.data{ width:100%; border-collapse:collapse; font-size:0.88rem; }
table.data th{ text-align:left; padding:12px 14px; font-size:0.74rem; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-70); border-bottom:1px solid var(--line); background:#E8F0FA; white-space:nowrap; }
table.data td{ padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
table.data tr:last-child td{ border-bottom:none; }
table.data tr.row-link{ cursor:pointer; }
table.data tr.row-link:hover td{ background:#E8F0FA; }
table.data input.input{ padding:7px 9px; font-size:0.85rem; }
.pill{ display:inline-block; padding:3px 10px; border-radius:20px; font-size:0.74rem; font-weight:600; white-space:nowrap; }
.st-ny{ background:#E8F0FA; color:#000C20; }
.st-vantar{ background:#D1E1F5; color:#000C20; }
.st-godkand{ background:#E8F0FA; color:#000C20; }
.st-installerad{ background:#E8F0FA; color:#000C20; }
.st-avbruten{ background:#F0F0F0; color:#5A5A5A; }
.detail-grid{ display:grid; grid-template-columns:1.3fr 0.7fr; gap:20px; align-items:start; }
@media(max-width:1000px){ .detail-grid{grid-template-columns:1fr;} }
dl.kv{ display:grid; grid-template-columns:200px 1fr; gap:0; margin:0; font-size:0.9rem; }
dl.kv dt{ color:var(--ink-70); padding:9px 0; border-bottom:1px solid var(--line); }
dl.kv dd{ margin:0; padding:9px 0; border-bottom:1px solid var(--line); word-break:break-word; }
@media(max-width:560px){ dl.kv{grid-template-columns:1fr;} dl.kv dt{border-bottom:none; padding-bottom:0;} }
.thumbs{ display:flex; flex-wrap:wrap; gap:10px; }
.thumbs a{ display:block; border:1px solid var(--line); border-radius:8px; overflow:hidden; width:120px; height:90px; background:var(--paper-dim); text-align:center; font-size:0.75rem; color:var(--ink-70); text-decoration:none; }
.thumbs img{ width:100%; height:100%; object-fit:cover; }
.thumbs .pdf{ display:flex; align-items:center; justify-content:center; height:100%; padding:8px; }
.note{ border-left:3px solid var(--current); padding:8px 12px; background:#E8F0FA; margin-bottom:10px; font-size:0.88rem; }
.note small{ display:block; color:var(--ink-70); font-size:0.75rem; margin-top:2px; }
.muted{ color:var(--ink-70); }
.nowrap{ white-space:nowrap; }

/* FAQ-redigering för admin */
.admin-edit-bar{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; background:#E8F0FA; border:1px solid #D1E1F5; color:#000C20; border-radius:10px; padding:12px 16px; margin-bottom:20px; font-size:0.9rem; }
.faq-admin{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:0 0 18px; }
.faq-admin form{ display:flex; gap:6px; margin:0; }
.faq-edit{ padding:4px 0 22px; }
.faq-item[id]{ scroll-margin-top:110px; }

/* Formateringsverktyg */
.fmt-bar{ display:flex; gap:4px; margin-bottom:6px; }
.fmt-bar button{ border:1px solid var(--line); background:#fff; border-radius:6px; padding:5px 11px; font:inherit; font-size:0.85rem; cursor:pointer; min-width:36px; }
.fmt-bar button:hover{ background:var(--paper-dim); border-color:var(--blue); }
.fmt-preview{ margin-top:8px; padding:12px 14px; border:1px dashed var(--line); border-radius:8px; font-size:0.92rem; color:var(--ink-70); background:#E8F0FA; }
.faq-a strong{ color:var(--ink); }

/* =========================================================
   V5 – HIGHTECH-SIDOR
   ========================================================= */
.hero-link{ color:var(--on-solid); text-decoration:none; font-weight:500; font-size:0.98rem; border-bottom:1px solid rgba(var(--on),.4); padding-bottom:2px; }
.hero-link:hover{ border-color:var(--on-solid); }
.techbg .btn-ghost{ color:var(--on-solid); border-color:rgba(var(--on),.25); }
.techbg .btn-ghost:hover{ background:rgba(var(--on),.06); }
nav a.nav-on{ color:var(--ink); font-weight:600; }
.company-chip{ display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border:1px solid var(--line); border-radius:20px; font-size:0.8rem; }
.company-chip i{ width:6px; height:6px; border-radius:50%; background:var(--current); box-shadow:0 0 0 3px rgba(10,176,194,.18); }

/* Mobilmeny */
.menu-btn{ display:none; width:40px; height:40px; border:1px solid var(--line); background:#fff; border-radius:8px; cursor:pointer; position:relative; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after{ position:absolute; left:11px; width:18px; height:2px; background:var(--ink); content:''; transition:transform .2s; }
.menu-btn span{ top:19px; } .menu-btn span::before{ top:-6px; left:0; } .menu-btn span::after{ top:6px; left:0; }
.mobile-nav{ display:none; }
@media(max-width:840px){
  .menu-btn{ display:inline-block; }
  .menu-open .mobile-nav{ display:flex; flex-direction:column; padding:8px 20px 18px; border-top:1px solid var(--line); background:#fff; }
  .mobile-nav a{ padding:12px 0; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--line); }
  .userbox .navcta{ padding:9px 14px; }
}

/* Sidhero */
.page-hero{ padding:88px 0 80px; }
.circuit{ position:absolute; inset:0; pointer-events:none; opacity:.55;
  background:
    radial-gradient(circle at 12% 30%, rgba(10,176,194,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 22%, rgba(10,102,194,.7) 0 2px, transparent 3px),
    radial-gradient(circle at 64% 78%, rgba(237,141,38,.6) 0 2px, transparent 3px),
    radial-gradient(circle at 34% 84%, rgba(10,176,194,.5) 0 2px, transparent 3px);
  animation: twinkle 5s ease-in-out infinite alternate; }
@keyframes twinkle{ from{ opacity:.25; } to{ opacity:.7; } }
.section-dark{ background:var(--ink); color:var(--on-solid); }
.section-dark .lede{ color:rgba(var(--on),.66); }
.section-dark h2, .section-dark h3{ color:var(--on-solid); }

/* Interaktiv graf */
.curve-card{ cursor:crosshair; user-select:none; }
.curve-card .band-charge{ fill:#0AB0C2; opacity:.14; }
.curve-card .band-use{ fill:#ED8D26; opacity:.16; }
.curve-card .tick{ fill:rgba(var(--on),.4); font:600 10px 'Inter Tight', sans-serif; }
.curve-card .cursor{ stroke:rgba(var(--on),.55); stroke-dasharray:3 4; }
.curve-card .cursor-dot{ fill:var(--on-solid); stroke:#0AB0C2; stroke-width:2; transition:stroke .2s; }
.curve-card .cursor-dot.st-use{ stroke:#ED8D26; } .curve-card .cursor-dot.st-idle{ stroke:rgba(var(--on),.6); }
.curve-card .cursor-halo{ fill:#0AB0C2; opacity:.25; animation:halo 1.8s ease-out infinite; transform-box:fill-box; transform-origin:center; }
.curve-card .cursor-halo.st-use{ fill:#ED8D26; } .curve-card .cursor-halo.st-idle{ fill:var(--on-solid); opacity:.12; }
@keyframes halo{ from{ transform:scale(.6); opacity:.45; } to{ transform:scale(1.8); opacity:0; } }
.live-chip.is-live i{ animation:ledpulse 2s infinite; }
.live-chip:not(.is-live){ color:var(--on-solid); border-color:rgba(var(--on),.3); }
.live-chip:not(.is-live) i{ background:#fff; }
.chart-readout{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:16px; padding-top:14px; border-top:1px solid var(--glass-brd); }
@media(max-width:520px){ .chart-readout{ grid-template-columns:repeat(2,1fr); } }
.chart-readout div{ font-size:0.7rem; color:rgba(var(--on),.45); }
.chart-readout b{ display:block; color:var(--on-solid); font-size:1rem; font-weight:700; margin-top:3px; font-variant-numeric:tabular-nums; }
.socbar{ height:4px; background:rgba(var(--on),.1); border-radius:2px; margin-top:6px; overflow:hidden; }
.socbar i{ display:block; height:100%; background:linear-gradient(90deg,#0AB0C2,#0A66C2); transition:width .3s; }
.state-pill{ display:inline-block; font-size:0.66rem; font-weight:700; padding:2px 8px; border-radius:20px; margin-top:4px; letter-spacing:.02em; }
.state-pill.st-charge{ background:rgba(10,176,194,.18); color:#0AB0C2; }
.state-pill.st-use{ background:rgba(237,141,38,.2); color:#ED8D26; }
.state-pill.st-idle{ background:rgba(var(--on),.08); color:rgba(var(--on),.7); }
.profit-row{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-top:12px; padding:12px 14px; border-radius:8px; background:linear-gradient(90deg, rgba(10,176,194,.12), rgba(237,141,38,.12)); }
.profit-row span{ font-size:0.75rem; color:rgba(var(--on),.6); }
.profit-row b{ font-size:1.25rem; color:var(--on-solid); }
.profit-row small{ color:rgba(var(--on),.5); font-size:0.72rem; }
.chart-hint{ font-size:0.7rem; color:rgba(var(--on),.4); margin-top:8px; }

/* Lås-band på startsidan */
.lock-band{ padding:80px 0; }
.lock-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:36px; }
@media(max-width:900px){ .lock-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .lock-grid{ grid-template-columns:1fr; } }
.lock-card{ position:relative; border:1px solid var(--glass-brd); border-radius:14px; padding:24px; background:linear-gradient(160deg, rgba(var(--on),.07), rgba(var(--on),.015)); text-decoration:none; color:var(--on-solid); transition:transform .25s, border-color .25s; overflow:hidden; }
.lock-card:hover{ transform:translateY(-4px); border-color:rgba(10,176,194,.55); }
.lock-card .ico{ width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(10,176,194,.14); color:#0AB0C2; margin-bottom:16px; }
.lock-card h3{ font-size:1.05rem; margin-bottom:6px; }
.lock-card p{ margin:0; font-size:0.86rem; color:rgba(var(--on),.6); }
.lock-card .lock{ position:absolute; top:18px; right:18px; font-size:0.7rem; color:rgba(var(--on),.5); }

/* Sex steg */
.steps-x{ position:relative; display:grid; grid-template-columns:repeat(6,1fr); gap:18px; margin-top:44px; }
.steps-track{ position:absolute; left:calc(100%/12); right:calc(100%/12); top:31px; height:2px; background:var(--line); border-radius:2px; overflow:hidden; }
.steps-dark .steps-track{ background:rgba(var(--on),.12); }
.steps-fill{ position:absolute; inset:0; width:0; background:linear-gradient(90deg,var(--current),var(--blue),var(--accent)); transition:width 1.6s cubic-bezier(.2,.7,.2,1); }
.steps-pulse{ position:absolute; top:-3px; width:60px; height:8px; left:-60px; background:radial-gradient(closest-side, rgba(var(--on),.95), transparent); opacity:0; }
.steps-x.in .steps-fill{ width:100%; }
.steps-x.in .steps-pulse{ opacity:1; animation:pulseRun 3.2s linear 1.6s infinite; }
@keyframes pulseRun{ from{ left:-60px; } to{ left:100%; } }
.step-x{ position:relative; text-align:center; opacity:0; transform:translateY(14px); transition:opacity .5s ease var(--d), transform .5s ease var(--d); }
.steps-x.in .step-x{ opacity:1; transform:none; }
.step-node{ width:64px; height:64px; margin:0 auto 16px; border-radius:50%; background:#fff; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; position:relative; color:var(--blue); box-shadow:0 10px 30px -14px rgba(10,102,194,.5); transition:border-color .3s, transform .3s; }
.steps-dark .step-node{ background:#011734; border-color:rgba(var(--on),.16); color:#0AB0C2; }
.step-node svg{ width:26px; height:26px; }
.step-node span{ position:absolute; top:-6px; right:-8px; background:var(--accent); color:#000C20; font-size:0.66rem; font-weight:800; border-radius:20px; padding:2px 6px; }
.step-x:hover .step-node{ transform:translateY(-3px) scale(1.04); border-color:var(--current); }
.step-x h3{ font-size:0.98rem; margin-bottom:6px; }
.step-x p{ font-size:0.82rem; color:var(--ink-70); margin:0; }
.steps-dark .step-x p{ color:rgba(var(--on),.58); }
@media(max-width:960px){
  .steps-x{ grid-template-columns:1fr; gap:0; }
  .steps-track{ left:31px; right:auto; top:32px; bottom:32px; width:2px; height:auto; }
  .steps-fill{ width:100% !important; height:0; transition:height 1.6s; }
  .steps-x.in .steps-fill{ height:100%; }
  .steps-pulse{ display:none; }
  .step-x{ display:grid; grid-template-columns:64px 1fr; column-gap:18px; text-align:left; padding-bottom:22px; }
  .step-node{ margin:0; grid-row:span 2; }
  .step-x h3{ margin-top:10px; }
}

/* Butikskort med minibatteri */
.shop-card .mini-bat{ position:absolute; right:26px; top:26px; width:34px; height:56px; border:1.5px solid rgba(var(--on),.35); border-radius:6px; padding:3px; }
.shop-card .mini-bat::before{ content:''; position:absolute; top:-6px; left:10px; width:12px; height:4px; border-radius:2px; background:rgba(var(--on),.35); }
.shop-card .mini-bat i{ position:absolute; left:3px; right:3px; bottom:3px; border-radius:3px; background:linear-gradient(0deg,#0AB0C2,#0A66C2); animation:miniCharge 4s ease-in-out infinite alternate; }
@keyframes miniCharge{ from{ height:30%; } to{ height:88%; } }

/* Produktsida */
.p-stage{ position:relative; border-radius:18px; padding:34px 30px 26px; min-height:440px; display:flex; flex-direction:column; }
.p-stage svg.bat{ width:100%; max-width:420px; margin:0 auto; display:block; position:relative; z-index:1; }
.bat .bat-fill{ fill:url(#batGrad); }
.bat.discharging .bat-fill{ fill:url(#batGradOut); }
.bat .spark{ stroke-dasharray:4 10; animation:flow 1s linear infinite; }
.discharging .spark{ animation-direction:reverse; }
@keyframes flow{ to{ stroke-dashoffset:-28; } }
.bat .bubble{ fill:rgba(var(--on),.55); animation:rise 3.2s linear infinite; }
@keyframes rise{ from{ transform:translateY(0); opacity:0; } 20%{ opacity:.8; } to{ transform:translateY(-150px); opacity:0; } }
.stage-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:auto; position:relative; z-index:1; }
.stage-stats div{ border:1px solid var(--glass-brd); border-radius:10px; padding:10px 12px; background:rgba(var(--on),.03); }
.stage-stats span{ display:block; font-size:0.68rem; color:rgba(var(--on),.5); }
.stage-stats b{ color:var(--on-solid); font-size:0.98rem; }
.bat-state{ fill:#0AB0C2; font:700 12px 'Inter Tight', sans-serif; letter-spacing:.04em; }
.discharging .bat-state{ fill:#ED8D26; }

.benefit-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:28px; }
@media(max-width:900px){ .benefit-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .benefit-grid{ grid-template-columns:1fr; } }
.benefit{ position:relative; border:1px solid var(--line); border-radius:14px; padding:22px; background:#fff; overflow:hidden; transition:transform .25s, box-shadow .25s; }
.benefit::after{ content:''; position:absolute; inset:auto -40% -60% auto; width:160px; height:160px; background:radial-gradient(closest-side, rgba(10,176,194,.16), transparent); transition:transform .4s; }
.benefit:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -24px rgba(10,102,194,.45); }
.benefit:hover::after{ transform:scale(1.4); }
.benefit .ico{ width:40px; height:40px; border-radius:10px; background:var(--paper-dim); color:var(--blue); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.benefit h3{ font-size:1rem; margin-bottom:6px; }
.benefit p{ margin:0; font-size:0.88rem; color:var(--ink-70); }
.stagger > *{ opacity:0; transform:translateY(12px); transition:opacity .5s, transform .5s; }
.stagger.in > *{ opacity:1; transform:none; }
.stagger.in > *:nth-child(2){ transition-delay:.08s; } .stagger.in > *:nth-child(3){ transition-delay:.16s; }
.stagger.in > *:nth-child(4){ transition-delay:.24s; } .stagger.in > *:nth-child(5){ transition-delay:.32s; } .stagger.in > *:nth-child(6){ transition-delay:.4s; }

.spec-toggle{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:22px 26px; border-radius:14px; border:1px solid var(--glass-brd); background:var(--ink); color:var(--on-solid); font:inherit; font-size:1.05rem; font-weight:700; cursor:pointer; position:relative; overflow:hidden; }
.spec-toggle::before{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(10,176,194,.18), transparent); transform:translateX(-100%); animation:sheen 4s ease-in-out infinite; }
@keyframes sheen{ 60%,100%{ transform:translateX(100%); } }
.spec-toggle small{ display:block; font-weight:400; font-size:0.8rem; color:rgba(var(--on),.55); }
.spec-toggle .chev{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(var(--on),.25); display:flex; align-items:center; justify-content:center; transition:transform .3s; flex:none; }
.spec-toggle[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.spec-panel{ max-height:0; overflow:hidden; transition:max-height .6s cubic-bezier(.2,.7,.2,1); }
.spec-inner{ padding:22px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media(max-width:800px){ .spec-inner{ grid-template-columns:1fr; } }
.spec-sec{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; }
.spec-sec header{ display:flex; justify-content:space-between; align-items:center; padding:14px 18px; background:linear-gradient(90deg, var(--ink), #012349); color:var(--on-solid); }
.spec-sec header b{ font-size:0.95rem; }
.spec-sec header span{ font-size:0.72rem; color:#0AB0C2; letter-spacing:.04em; text-transform:uppercase; }
.spec-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:11px 18px; border-top:1px solid var(--line); font-size:0.86rem; }
.spec-row:first-of-type{ border-top:none; }
.spec-row span{ color:var(--ink-70); }
.spec-row b{ font-weight:600; text-align:right; }
.spec-row:nth-child(even){ background:#E8F0FA; }
.key-figs{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:6px; }
@media(max-width:700px){ .key-figs{ grid-template-columns:repeat(2,1fr); } }
.key-fig{ border-radius:12px; padding:16px; background:var(--paper-dim); border:1px solid var(--line); }
.key-fig b{ display:block; font-size:1.35rem; color:var(--blue); }
.key-fig span{ font-size:0.76rem; color:var(--ink-70); }

/* Om oss – energiflöde */
.flow-card{ border-radius:18px; padding:26px; position:relative; overflow:hidden; }
.flow-card svg{ width:100%; height:auto; display:block; position:relative; z-index:1; }
.flow-node rect{ fill:rgba(var(--on),.05); stroke:rgba(var(--on),.2); }
.flow-node text{ fill:var(--on-solid); font:600 12px 'Inter Tight', sans-serif; }
.flow-node .sub{ fill:rgba(var(--on),.5); font-weight:400; font-size:10px; }
.flow-path{ fill:none; stroke:rgba(var(--on),.14); stroke-width:2; }
.flow-live{ fill:none; stroke-width:2; stroke-dasharray:6 12; animation:flow 1.1s linear infinite; }
.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px; }
@media(max-width:860px){ .values{ grid-template-columns:1fr; } }
.value-card{ border:1px solid var(--glass-brd); border-radius:16px; padding:26px; background:linear-gradient(160deg, rgba(var(--on),.07), rgba(var(--on),.015)); }
.value-card .num{ font-size:2.2rem; font-weight:800; background:linear-gradient(90deg,#0AB0C2,#0A66C2); -webkit-background-clip:text; background-clip:text; color:transparent; }
.value-card h3{ margin:6px 0 8px; font-size:1.05rem; }
.value-card p{ margin:0; color:rgba(var(--on),.62); font-size:0.9rem; }
.story{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
@media(max-width:900px){ .story{ grid-template-columns:1fr; } }
.story p{ color:var(--ink-70); font-size:1.02rem; }
.orbit{ position:relative; aspect-ratio:1; max-width:420px; margin:0 auto; }
.orbit .ring{ position:absolute; inset:0; border:1px dashed var(--line); border-radius:50%; animation:spin 40s linear infinite; }
.orbit .ring.r2{ inset:16%; animation-duration:26s; animation-direction:reverse; border-style:solid; border-color:rgba(10,102,194,.18); }
.orbit .ring.r3{ inset:32%; animation-duration:18s; }
.orbit .ring::before{ content:''; position:absolute; top:-6px; left:50%; width:12px; height:12px; border-radius:50%; background:var(--current); box-shadow:0 0 0 6px rgba(10,176,194,.15); }
.orbit .ring.r2::before{ background:var(--accent); box-shadow:0 0 0 6px rgba(237,141,38,.15); }
.orbit .ring.r3::before{ background:var(--blue); }
.orbit .core{ position:absolute; inset:40%; border-radius:50%; background:var(--ink); display:flex; align-items:center; justify-content:center; box-shadow:0 20px 50px -20px rgba(10,102,194,.6); }
.orbit .core img{ width:60%; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Kontakt */
.contact-layout{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:28px; align-items:start; margin-top:-56px; position:relative; z-index:2; }
@media(max-width:900px){ .contact-layout{ grid-template-columns:1fr; margin-top:-40px; } }
.c-card{ display:flex; gap:14px; align-items:flex-start; padding:20px; border-radius:14px; background:#fff; border:1px solid var(--line); text-decoration:none; color:var(--ink); transition:transform .2s, border-color .2s, box-shadow .2s; margin-bottom:12px; }
.c-card:hover{ transform:translateX(4px); border-color:var(--blue); box-shadow:0 14px 30px -20px rgba(10,102,194,.5); }
.c-card .ico{ width:44px; height:44px; flex:none; border-radius:12px; background:var(--ink); color:#0AB0C2; display:flex; align-items:center; justify-content:center; }
.c-card span{ display:block; font-size:0.78rem; color:var(--ink-70); }
.c-card b{ font-size:1rem; }
.signal{ position:relative; width:120px; height:120px; margin:0 0 8px; }
.signal i{ position:absolute; inset:0; border-radius:50%; border:1.5px solid rgba(10,176,194,.6); animation:ping 3s ease-out infinite; }
.signal i:nth-child(2){ animation-delay:1s; } .signal i:nth-child(3){ animation-delay:2s; }
.signal b{ position:absolute; inset:38%; border-radius:50%; background:var(--current); box-shadow:0 0 24px rgba(10,176,194,.9); }
@keyframes ping{ from{ transform:scale(.3); opacity:1; } to{ transform:scale(1); opacity:0; } }
.topic-pills{ display:flex; flex-wrap:wrap; gap:8px; }
.topic-pills label{ position:relative; }
.topic-pills input{ position:absolute; opacity:0; }
.topic-pills span{ display:inline-block; padding:8px 14px; border:1px solid var(--line); border-radius:20px; font-size:0.85rem; cursor:pointer; transition:all .15s; }
.topic-pills input:checked + span{ background:var(--ink); color:#fff; border-color:var(--ink); }
.topic-pills input:focus-visible + span{ outline:2px solid var(--current); }
.hp{ position:absolute; left:-9999px; }

/* Löneväxlingskalkyl */
.calc{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center; }
@media(max-width:860px){ .calc{ grid-template-columns:1fr; } }
.calc select{ width:100%; padding:12px 14px; border-radius:8px; border:1px solid var(--glass-brd); background:rgba(var(--on),.06); color:var(--on-solid); font:inherit; }
.calc select option{ color:#000; }
.calc-bars{ display:grid; gap:14px; }
.calc-bar span{ display:flex; justify-content:space-between; font-size:0.85rem; color:rgba(var(--on),.7); margin-bottom:6px; }
.calc-bar span b{ color:var(--on-solid); }
.calc-bar div{ height:10px; border-radius:6px; background:rgba(var(--on),.08); overflow:hidden; }
.calc-bar div i{ display:block; height:100%; border-radius:6px; transition:width .6s cubic-bezier(.2,.7,.2,1); }

/* Löneväxlingskalkyl – vattenfall */
.calc-panel{ position:relative; overflow:hidden; margin-top:32px; padding:36px; border-radius:18px; background:var(--ink); color:var(--on-solid); }
.calc-panel::before{ content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(var(--on),.05) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--on),.05) 1px,transparent 1px); background-size:44px 44px; pointer-events:none; }
.calc-panel .calc{ position:relative; z-index:1; align-items:start; }
.calc-label{ display:block; font-size:0.84rem; font-weight:600; color:rgba(var(--on),.8); margin-bottom:8px; }
.calc-explain{ margin-top:22px; font-size:0.9rem; color:rgba(var(--on),.7); }
.calc-explain p{ margin:0 0 8px; }
.calc-explain b{ color:var(--on-solid); }
.calc-explain ol{ margin:0 0 14px; padding-left:20px; }
.calc-explain li{ margin-bottom:4px; }
.calc-ex{ padding:12px 14px; border-radius:10px; background:rgba(var(--on),.06); border:1px solid rgba(var(--on),.1); }
.wf{ display:grid; gap:18px; }
.wf-top{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:0.9rem; color:rgba(var(--on),.75); margin-bottom:8px; }
.wf-top b{ color:var(--on-solid); font-size:1.05rem; white-space:nowrap; font-variant-numeric:tabular-nums; }
.wf-top b.neg{ color:#0AB0C2; } .wf-top b.pos{ color:#ED8D26; }
.wf-top em{ font-style:normal; color:var(--on-solid); }
.wf-track{ position:relative; height:14px; border-radius:7px; background:rgba(var(--on),.07); }
.wf-bar{ position:absolute; top:0; bottom:0; left:0; width:0; border-radius:7px; transition:left .7s cubic-bezier(.2,.7,.2,1), width .7s cubic-bezier(.2,.7,.2,1); }
.wf-gross{ background:linear-gradient(90deg,#0A66C2,#0AB0C2); }
.wf-save{ background:repeating-linear-gradient(45deg, rgba(10,176,194,.9) 0 6px, rgba(10,176,194,.45) 6px 12px); }
.wf-tax{ background:rgba(237,141,38,.85); }
.wf-net{ background:linear-gradient(90deg,#ED8D26,#ED8D26); box-shadow:0 0 18px rgba(237,141,38,.45); }
.wf-total{ padding-top:16px; border-top:1px solid rgba(var(--on),.14); }
.wf-total .wf-top span{ color:var(--on-solid); font-weight:600; font-size:1rem; }
.wf-total .wf-top b{ color:#ED8D26; font-size:1.6rem; }
.wf-total .wf-track{ height:18px; }

/* Om oss – HUD */
.hud{ border-radius:22px; padding:8px; position:relative; overflow:hidden; box-shadow:0 30px 70px -40px rgba(0,12,32,.8); }
.hud svg{ width:100%; height:auto; display:block; position:relative; z-index:1; }
.hud::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 0 48%, rgba(10,176,194,.12) 50%, transparent 52% 100%); background-size:100% 200%; animation:scan 5s linear infinite; pointer-events:none; z-index:2; }
@keyframes scan{ from{ background-position:0 -100%; } to{ background-position:0 100%; } }

/* Redigeringsläge för admin */
.edit-dock{ position:fixed; right:20px; bottom:20px; z-index:300; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.edit-toggle{ display:flex; align-items:center; gap:8px; padding:12px 18px; border-radius:30px; border:none; background:var(--ink); color:#fff; font:inherit; font-size:0.9rem; cursor:pointer; box-shadow:0 12px 30px -10px rgba(0,12,32,.6); }
.edit-toggle span{ width:24px; height:24px; border-radius:50%; background:var(--accent); color:#000C20; display:flex; align-items:center; justify-content:center; font-size:0.85rem; }
body.editing .edit-toggle{ background:var(--accent); color:#000C20; }
body.editing .edit-toggle span{ background:#000C20; color:var(--accent); }
.edit-fmt{ display:flex; gap:4px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:5px; box-shadow:0 10px 24px -12px rgba(0,12,32,.4); }
.edit-fmt button{ border:none; background:var(--paper-dim); border-radius:6px; padding:6px 11px; font:inherit; font-size:0.85rem; cursor:pointer; color:var(--ink); }
.edit-fmt button:hover{ background:var(--line); }
body.editing .ed{ outline:1.5px dashed rgba(237,141,38,.75); outline-offset:3px; border-radius:3px; cursor:text; transition:background .15s; }
body.editing .ed:hover{ background:rgba(237,141,38,.1); }
body.editing .ed:focus{ outline:2px solid var(--accent); background:rgba(237,141,38,.12); }
body.editing .ed.saved{ outline-color:#66C20A; }
.edit-toast{ position:fixed; left:50%; bottom:24px; transform:translate(-50%, 20px); opacity:0; background:var(--ink); color:#fff; padding:10px 18px; border-radius:24px; font-size:0.88rem; z-index:310; transition:all .25s; pointer-events:none; }
.edit-toast.show{ opacity:1; transform:translate(-50%, 0); }
.edit-toast.err{ background:#C20A66; }

/* =========================================================
   KALKYLMOTOR – ekonomi, lån och lönsamhet
   ========================================================= */
.tax-toggle{ display:inline-flex; align-items:center; gap:4px; padding:4px; border-radius:30px; background:rgba(var(--on),.08); border:1px solid rgba(var(--on),.14); }
.tax-toggle span{ font-size:0.75rem; color:rgba(var(--on),.6); padding:0 10px 0 8px; }
.tax-toggle button{ border:none; background:transparent; color:var(--on-solid); font:inherit; font-size:0.85rem; font-weight:600; padding:7px 14px; border-radius:20px; cursor:pointer; transition:background .2s, color .2s; }
.tax-toggle button.on{ background:var(--accent); color:#000C20; }
.tax-toggle.light{ background:var(--paper-dim); border-color:var(--line); }
.tax-toggle.light span{ color:var(--ink-70); }
.tax-toggle.light button{ color:var(--ink); }

.econ{ padding:84px 0; margin-top:40px; }
.econ-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; }
.econ-for{ color:rgba(var(--on),.6); margin:10px 0 0; font-size:0.92rem; }
.econ-for b{ color:var(--on-solid); }
.econ-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:32px; }
@media(max-width:960px){ .econ-grid{ grid-template-columns:1fr; } }
.econ-card{ position:relative; border:1px solid var(--glass-brd); border-radius:16px; padding:24px; background:linear-gradient(160deg, rgba(var(--on),.07), rgba(var(--on),.015)); overflow:hidden; }
.econ-card.econ-hl{ border-color:rgba(237,141,38,.45); background:linear-gradient(160deg, rgba(237,141,38,.16), rgba(var(--on),.02)); }
.econ-ico{ width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(10,176,194,.15); color:#0AB0C2; margin-bottom:14px; }
.econ-hl .econ-ico{ background:rgba(237,141,38,.2); color:#ED8D26; }
.econ-card h3{ color:rgba(var(--on),.75); font-size:0.92rem; font-weight:600; margin:0 0 6px; }
.econ-big{ font-size:clamp(1.5rem, 2.6vw, 2rem); font-weight:800; color:var(--on-solid); line-height:1.15; font-variant-numeric:tabular-nums; }
.econ-big.pos{ color:#66C20A; } .econ-big.neg{ color:#ED8D26; }
.econ-hl .econ-big{ color:#ED8D26; }
.econ-sub{ color:rgba(var(--on),.58); font-size:0.86rem; margin:6px 0 0; }
.econ-det{ margin-top:16px; border-top:1px solid var(--glass-brd); padding-top:12px; }
.econ-det summary{ cursor:pointer; color:#0AB0C2; font-size:0.85rem; font-weight:600; list-style:none; }
.econ-det summary::after{ content:' ↓'; }
.econ-det[open] summary::after{ content:' ↑'; }
.calc-steps{ margin-top:10px; }
.cs-row{ display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px dashed rgba(var(--on),.1); font-size:0.82rem; color:rgba(var(--on),.65); }
.cs-row b{ color:var(--on-solid); white-space:nowrap; font-variant-numeric:tabular-nums; }
.cs-row.em b{ color:#0AB0C2; }
.cs-row.tot{ border-bottom:none; border-top:1px solid rgba(var(--on),.25); margin-top:4px; padding-top:10px; color:var(--on-solid); font-weight:600; }
.cs-row.tot b{ color:#ED8D26; font-size:0.95rem; }
.econ-foot{ color:rgba(var(--on),.45); font-size:0.76rem; margin:18px 0 0; max-width:90ch; }

.price-row.save-row{ background:rgba(102,194,10,.08); }
.price-row.save-row span{ color:#000C20; font-weight:600; }
.price-row.save-row strong{ color:#000C20; }
.save-badge{ margin-top:14px; padding:14px 16px; border-radius:12px; background:linear-gradient(135deg, #E8F0FA, #E8F0FA); border:1px solid #D1E1F5; }
.save-badge span{ display:block; font-size:0.8rem; color:#000C20; font-weight:600; }
.save-badge b{ display:block; font-size:1.45rem; color:#000C20; margin:2px 0; }
.save-badge small{ color:#5A5A5A; font-size:0.78rem; }
.econ-note{ font-size:0.74rem; color:var(--ink-70); margin:8px 0 10px; line-height:1.45; }

.loan-compare{ margin-top:6px; padding:16px 18px; border-radius:12px; background:rgba(var(--on),.05); border:1px solid rgba(var(--on),.12); display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media(max-width:560px){ .loan-compare{ grid-template-columns:1fr; } }
.loan-compare span{ display:block; font-size:0.75rem; color:rgba(var(--on),.55); }
.loan-compare b{ color:var(--on-solid); font-size:1rem; font-variant-numeric:tabular-nums; }
.loan-compare b.pos{ color:#66C20A; }
.loan-compare p{ grid-column:1 / -1; margin:0; font-size:0.72rem; color:rgba(var(--on),.45); }

.roi-wrap{ margin-top:28px; border:1px solid var(--line); border-radius:16px; padding:20px; background:#fff; box-shadow:0 24px 50px -36px rgba(0,12,32,.35); }
.roi-top{ display:flex; justify-content:flex-end; margin-bottom:12px; }
.roi-table-wrap{ overflow-x:auto; }
.roi-table{ width:100%; border-collapse:collapse; font-size:0.9rem; min-width:760px; }
.roi-table th{ text-align:right; font-size:0.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-70); padding:10px 12px; border-bottom:1px solid var(--line); }
.roi-table th:first-child, .roi-table td:first-child{ text-align:left; }
.roi-table td{ text-align:right; padding:14px 12px; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; vertical-align:top; }
.roi-table td small{ color:var(--ink-70); }
.roi-table tr:last-child td{ border-bottom:none; }
.roi-table td.pos b{ color:#000C20; } .roi-table td.neg b{ color:#ED8D26; }
.roi-table tbody tr{ transition:background .15s; }
.roi-table tbody tr:hover{ background:#E8F0FA; }

.card-save{ position:relative; margin-top:14px; font-size:0.85rem; color:rgba(var(--on),.7); }
.card-save b{ color:#66C20A; }
.card-save span{ color:var(--accent); }

/* Logotyp enligt grafisk manual – frizon = höjden på "n" */
.brand-logo{ height:36px; width:auto; display:block; padding:4px 0; }
.brand-logo-foot{ height:40px; width:auto; display:block; }
@media(max-width:640px){ .brand-logo{ height:30px; } }

/* =========================================================
   Färger strikt enligt grafisk manual (primär, support, CTA, grå)
   CTA 1 #0AB0C2 · CTA 2 #ED8D26 · CTA 4 #66C20A · CTA 5 #C20A66
   ========================================================= */
.alert-error{ background:rgba(194,10,102,.06); border-color:rgba(194,10,102,.35); color:#000C20; }
.alert-ok{ background:rgba(102,194,10,.1); border-color:#66C20A; color:#000C20; }
.alert-info{ background:#E8F0FA; border-color:#D1E1F5; color:#000C20; }
.pill{ color:#000C20; }
.st-ny{ background:rgba(237,141,38,.18); }
.st-vantar{ background:#D1E1F5; }
.st-godkand{ background:rgba(10,176,194,.18); }
.st-installerad{ background:rgba(102,194,10,.2); }
.st-avbruten{ background:#F0F0F0; color:#5A5A5A; }
.admin-edit-bar{ background:rgba(237,141,38,.12); border-color:rgba(237,141,38,.45); color:#000C20; }
.price-row.save-row{ background:rgba(102,194,10,.1); }
.price-row.save-row span, .price-row.save-row strong{ color:#000C20; }
.price-row.save-row strong::before{ content:''; display:inline-block; width:8px; height:8px; border-radius:50%; background:#66C20A; margin-right:8px; vertical-align:middle; }
.save-badge{ background:rgba(102,194,10,.1); border:1px solid #66C20A; }
.save-badge span{ color:#000C20; }
.save-badge b{ color:#000C20; }
.save-badge small{ color:#5A5A5A; }
.roi-table td.pos b, .roi-table td.neg b{ color:#000C20; padding:3px 10px; border-radius:20px; }
.roi-table td.pos b{ background:rgba(102,194,10,.18); }
.roi-table td.neg b{ background:rgba(237,141,38,.18); }
.card-save b{ color:#66C20A; }
.card-save span{ color:#ED8D26; }

/* Info-ikon och förklaring */
.info{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; margin-left:6px; border-radius:50%; border:1.5px solid currentColor; font:italic 700 10px/1 Georgia, serif; color:#0AB0C2; cursor:help; vertical-align:1px; opacity:.9; transition:background .15s, color .15s; }
.info:hover, .info:focus{ background:#0AB0C2; color:#000C20; outline:none; }
.tip-pop{ position:fixed; z-index:400; padding:14px 16px; border-radius:12px; background:#000C20; color:var(--on-solid); font-size:0.84rem; line-height:1.5; border:1px solid rgba(10,176,194,.45); box-shadow:0 18px 40px -16px rgba(0,12,32,.7); opacity:0; transform:translateY(4px); pointer-events:none; transition:opacity .15s, transform .15s; }
.tip-pop.show{ opacity:1; transform:none; }
.tip-pop b, .tip-pop strong{ color:#0AB0C2; }

/* Innehåll som bara syns för admin i redigeringsläge */
.edit-only{ display:none; }
body.editing .edit-only{ display:block; margin-top:24px; padding:20px; border-radius:14px; border:1.5px dashed rgba(237,141,38,.7); background:rgba(237,141,38,.08); color:var(--on-solid); font-size:0.9rem; }
body.editing .edit-only h4{ margin:0 0 10px; font-size:0.9rem; color:#ED8D26; }
body.editing .edit-only > div{ margin-bottom:10px; }

/* Skatteväljare vid priset */
.price-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin:4px 0 10px; font-size:0.86rem; font-weight:600; }

/* Tomma kalkylfält i admin */
.field.is-empty input{ border-style:dashed; border-color:#ED8D26; background:#F0F0F0; }
.empty-tag{ display:inline-block; margin-left:6px; padding:1px 8px; border-radius:10px; font-size:0.68rem; font-weight:700; background:rgba(237,141,38,.18); color:#000C20; vertical-align:1px; }

/* Underlag – säsongsdiagram */
.assume-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; margin-top:24px; }
.assume{ border:1px solid var(--line); border-radius:12px; padding:16px; background:#fff; }
.assume span{ display:block; font-size:0.75rem; color:var(--ink-70); }
.assume b{ display:block; font-size:1.1rem; margin:4px 0 2px; color:#0A66C2; }
.assume small{ font-size:0.75rem; color:var(--ink-70); }
.dark-select{ width:100%; padding:11px 12px; border-radius:8px; border:1px solid rgba(var(--on),.2); background:rgba(var(--on),.06); color:var(--on-solid); font:inherit; }
.dark-select option{ color:#000C20; }
.season-chart{ display:grid; grid-template-columns:repeat(12,1fr); gap:10px; align-items:end; height:300px; margin-top:36px; }
.sbar{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; outline:none; }
.sbar-col{ width:100%; max-width:48px; height:calc(var(--h) * .8); min-height:4px; position:relative; }
.sbar-col i{ position:absolute; inset:0; border-radius:8px 8px 3px 3px; background:linear-gradient(0deg,#0A66C2,#0AB0C2); transform:scaleY(0); transform-origin:bottom; transition:transform .7s cubic-bezier(.2,.7,.2,1) var(--d); }
.season-chart.in .sbar-col i{ transform:scaleY(1); }
.sbar.est .sbar-col i{ background:repeating-linear-gradient(45deg, rgba(10,176,194,.75) 0 6px, rgba(10,176,194,.4) 6px 12px); }
.sbar-val{ font-size:0.7rem; color:rgba(var(--on),.75); margin-bottom:6px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.sbar-lbl{ font-size:0.75rem; color:rgba(var(--on),.55); margin-top:8px; text-transform:uppercase; letter-spacing:.04em; }
.sbar-tip{ position:absolute; bottom:calc(var(--h) * .8 + 40px); left:50%; transform:translateX(-50%); width:180px; padding:10px 12px; border-radius:10px; background:#000C20; border:1px solid rgba(10,176,194,.45); font-size:0.75rem; color:rgba(var(--on),.8); opacity:0; pointer-events:none; transition:opacity .15s; z-index:5; }
.sbar-tip b{ color:#0AB0C2; }
.sbar:hover .sbar-tip, .sbar:focus .sbar-tip{ opacity:1; }
.sbar:hover .sbar-col i{ background:linear-gradient(0deg,#ED8D26,#ED8D26); }
.season-sum{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:28px; }
@media(max-width:900px){ .season-sum{ grid-template-columns:repeat(2,1fr); } .season-chart{ gap:4px; height:240px; } .sbar-val{ display:none; } }
.season-sum div{ border:1px solid rgba(var(--on),.14); border-radius:12px; padding:14px; background:rgba(var(--on),.04); }
.season-sum span{ display:block; font-size:0.72rem; color:rgba(var(--on),.55); }
.season-sum b{ color:var(--on-solid); font-size:1.05rem; }
.formula{ margin:12px 0 0; padding-left:20px; }
.formula li{ margin-bottom:8px; }
/* minidiagram i produktkortet */
.mini-season{ display:grid; grid-template-columns:repeat(12,1fr); gap:3px; align-items:end; height:46px; margin-top:14px; }
.mini-season i{ display:block; border-radius:2px 2px 0 0; background:linear-gradient(0deg,#0A66C2,#0AB0C2); min-height:3px; }
.mini-season-lbl{ display:flex; justify-content:space-between; font-size:0.62rem; color:rgba(var(--on),.4); margin-top:3px; }
.econ-link{ display:inline-block; margin-top:10px; font-size:0.82rem; color:#0AB0C2; }

/* Elområdesväljare i sidhuvudet */
.area-pick{ position:relative; display:inline-flex; align-items:center; margin:0; }
.area-pick .area-ico{ position:absolute; left:10px; font-size:0.8rem; color:#ED8D26; pointer-events:none; }
.area-pick select{ appearance:none; -webkit-appearance:none; font:inherit; font-size:0.8rem; font-weight:600; color:var(--ink); padding:7px 28px 7px 26px; border:1px solid var(--line); border-radius:20px; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235A5A5A' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 11px center; cursor:pointer; }
.area-pick select:focus{ outline:2px solid #0AB0C2; outline-offset:1px; }
@media(max-width:640px){ .area-pick select{ padding:6px 24px 6px 22px; font-size:0.72rem; } }
.now-line{ margin-top:10px; padding:10px 12px; border-radius:10px; background:rgba(237,141,38,.12); border:1px solid rgba(237,141,38,.35); font-size:0.85rem; color:rgba(var(--on),.8); }
.now-line b{ color:var(--on-solid); }
.mini-season i.now, .sbar.now .sbar-col i{ background:linear-gradient(0deg,#ED8D26,#ED8D26) !important; }
.sbar.now .sbar-lbl{ color:#ED8D26; font-weight:700; }
.season-sum{ grid-template-columns:repeat(6,1fr); }
.season-sum .sum-now{ border-color:rgba(237,141,38,.6); background:rgba(237,141,38,.12); }
.season-sum .sum-now b{ color:#ED8D26; }
.sbar-lbl small{ font-size:0.6rem; opacity:.7; text-transform:none; }

/* Elområdesväljare (segment) */
.area-seg{ display:inline-flex; align-items:center; gap:3px; padding:4px; border-radius:14px; background:rgba(var(--on),.06); border:1px solid rgba(var(--on),.14); flex-wrap:wrap; }
.area-seg > span{ font-size:0.72rem; color:rgba(var(--on),.55); padding:0 8px 0 6px; }
.area-seg a{ display:flex; flex-direction:column; align-items:center; min-width:58px; padding:6px 10px; border-radius:10px; text-decoration:none; color:var(--on-solid); transition:background .15s, color .15s; line-height:1.15; }
.area-seg a b{ font-size:0.82rem; }
.area-seg a small{ font-size:0.62rem; color:rgba(var(--on),.5); }
.area-seg a:hover{ background:rgba(var(--on),.08); }
.area-seg a.on{ background:#ED8D26; color:#000C20; }
.area-seg a.on small{ color:rgba(0,12,32,.7); }
.area-seg.light{ background:#E8F0FA; border-color:#D1E1F5; }
.area-seg.light > span{ color:#5A5A5A; }
.area-seg.light a{ color:#000C20; }
.area-seg.light a small{ color:#5A5A5A; }
.area-seg.light a:hover{ background:#D1E1F5; }
.area-seg.light a.on{ background:#ED8D26; }
.chart-area{ margin:12px 0 4px; }
.chart-area .area-seg{ width:100%; justify-content:space-between; }
.chart-area .area-seg a{ flex:1; min-width:0; }
@media(max-width:520px){ .area-seg > span{ width:100%; padding:2px 6px 4px; } .area-seg a{ min-width:0; flex:1; } }

/* Elområdesväljare (segment) */
.area-seg{ display:inline-flex; align-items:center; gap:3px; padding:4px; border-radius:14px; background:rgba(var(--on),.06); border:1px solid rgba(var(--on),.14); flex-wrap:wrap; }
.area-seg > span{ font-size:0.72rem; color:rgba(var(--on),.55); padding:0 8px 0 6px; }
.area-seg a{ display:flex; flex-direction:column; align-items:center; min-width:58px; padding:6px 10px; border-radius:10px; text-decoration:none; color:var(--on-solid); transition:background .15s, color .15s; line-height:1.15; }
.area-seg a b{ font-size:0.82rem; }
.area-seg a small{ font-size:0.62rem; color:rgba(var(--on),.5); }
.area-seg a:hover{ background:rgba(var(--on),.08); }
.area-seg a.on{ background:#ED8D26; color:#000C20; }
.area-seg a.on small{ color:rgba(0,12,32,.7); }
.area-seg.light{ background:#E8F0FA; border-color:#D1E1F5; }
.area-seg.light > span{ color:#5A5A5A; }
.area-seg.light a{ color:#000C20; }
.area-seg.light a small{ color:#5A5A5A; }
.area-seg.light a:hover{ background:#D1E1F5; }
.area-seg.light a.on{ background:#ED8D26; }
.chart-area{ margin:12px 0 4px; }
.chart-area .area-seg{ width:100%; justify-content:space-between; }
.chart-area .area-seg a{ flex:1; min-width:0; }
@media(max-width:520px){ .area-seg > span{ width:100%; padding:2px 6px 4px; } .area-seg a{ min-width:0; flex:1; } }

/* Variantväljare */
.sr-only{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px; }
.vpick{ position:relative; }
.vpick-btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-radius:12px; border:1px solid rgba(var(--on),.18); background:rgba(var(--on),.06); color:var(--on-solid); font:inherit; text-align:left; cursor:pointer; transition:border-color .15s, background .15s; }
.vpick-btn:hover, .vpick.open .vpick-btn{ border-color:#0AB0C2; background:rgba(10,176,194,.08); }
.vpick-btn svg{ flex:none; transition:transform .2s; color:#0AB0C2; }
.vpick.open .vpick-btn svg{ transform:rotate(180deg); }
.vpick-cur b{ display:block; font-size:1rem; }
.vpick-cur small{ display:block; font-size:0.8rem; color:rgba(var(--on),.6); }
.vpick-pop{ position:absolute; z-index:30; left:0; right:0; top:calc(100% + 8px); max-height:360px; overflow:auto; padding:6px; border-radius:14px; background:#011734; border:1px solid rgba(10,176,194,.35); box-shadow:0 24px 50px -20px rgba(0,0,0,.8); }
.vpick-grp + .vpick-grp{ margin-top:6px; padding-top:6px; border-top:1px solid rgba(var(--on),.08); }
.vpick-h{ display:flex; justify-content:space-between; align-items:baseline; padding:8px 12px 4px; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#0AB0C2; }
.vpick-h span{ font-weight:600; color:rgba(var(--on),.45); letter-spacing:0; text-transform:none; }
.vpick-opt{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; color:rgba(var(--on),.85); font-size:0.9rem; cursor:pointer; outline:none; }
.vpick-opt b{ font-size:0.85rem; color:var(--on-solid); font-variant-numeric:tabular-nums; white-space:nowrap; }
.vpick-opt:hover, .vpick-opt:focus{ background:rgba(var(--on),.07); }
.vpick-opt.on{ background:rgba(237,141,38,.16); color:var(--on-solid); }
.vpick-opt.on b{ color:#ED8D26; }
.vpick-opt.on span::before{ content:'✓'; color:#ED8D26; margin-right:8px; font-weight:700; }
.calc-panel{ overflow:visible; background:radial-gradient(circle at 100% 0, rgba(237,141,38,.22), transparent 42%), radial-gradient(circle at 0 100%, rgba(10,102,194,.32), transparent 45%), #000C20; }
.calc-panel > .glow{ display:none; }
.calc-panel::before{ border-radius:inherit; }
.calc-panel .calc{ z-index:2; }

/* Minidiagram – hovring */
.ms-wrap{ position:relative; padding-top:6px; }
.mini-season{ height:56px; gap:4px; }
.mini-season i{ cursor:pointer; transition:opacity .15s, transform .2s, filter .2s; transform-origin:bottom; outline:none; }
.ms-wrap.hover .mini-season i{ opacity:.35; }
.ms-wrap.hover .mini-season i.hot{ opacity:1; transform:scaleY(1.08); filter:drop-shadow(0 0 8px rgba(10,176,194,.8)); }
.ms-wrap.hover .mini-season i.now.hot{ filter:drop-shadow(0 0 8px rgba(237,141,38,.8)); }
.ms-tip{ position:absolute; bottom:calc(100% - 2px); transform:translate(-50%, 6px); min-width:190px; padding:10px 12px; border-radius:10px; background:#000C20; border:1px solid rgba(10,176,194,.5); box-shadow:0 14px 30px -14px rgba(0,0,0,.8); font-size:0.74rem; color:rgba(var(--on),.7); opacity:0; pointer-events:none; transition:opacity .15s, transform .15s; z-index:5; white-space:nowrap; }
.ms-tip.show{ opacity:1; transform:translate(-50%, 0); }
.ms-tip b{ display:block; color:#0AB0C2; text-transform:capitalize; font-size:0.72rem; }
.ms-tip strong{ display:block; color:var(--on-solid); font-size:1.05rem; margin:2px 0 4px; }
.ms-tip span{ display:block; }
.ms-tip::after{ content:''; position:absolute; left:50%; bottom:-5px; width:8px; height:8px; background:#000C20; border-right:1px solid rgba(10,176,194,.5); border-bottom:1px solid rgba(10,176,194,.5); transform:translateX(-50%) rotate(45deg); }
.econ-card{ overflow:visible; }
.roi-table td.sub-tot{ font-weight:700; background:rgba(10,102,194,.06); }
.roi-table th:nth-child(5), .roi-table th:nth-child(7){ color:#000C20; }

/* Efter byte av elområde: inga in-animationer */
html.instant .reveal, html.instant .stagger > *, html.instant .step-x, html.instant .sbar-col i, html.instant .bars i,
html.instant .steps-fill, html.instant .wf-bar, html.instant .calc-bar div i, html.instant .cap-fill, html.instant .gauge-ring{ transition:none !important; }
html.instant .reveal, html.instant .stagger > *, html.instant .step-x{ opacity:1 !important; transform:none !important; }
html.instant{ scroll-behavior:auto !important; }

/* ---------- Produktsida: fördelar under bilden och reglage vid besparingen ---------- */
.product-left{ display:flex; flex-direction:column; gap:26px; min-width:0; }
.benefit-mini-wrap .kicker{ margin-bottom:4px; }
.benefit-mini-title{ font-size:1.25rem; margin:0 0 14px; }
.benefit-mini-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:560px){ .benefit-mini-grid{ grid-template-columns:1fr; } }
.benefit-mini{ display:flex; gap:12px; align-items:flex-start; border:1px solid var(--line); border-radius:12px; padding:14px; background:#fff; transition:border-color .2s, box-shadow .2s, transform .2s; }
.benefit-mini:hover{ border-color:#A4C2EA; box-shadow:0 14px 30px -22px rgba(10,102,194,.5); transform:translateY(-2px); }
.benefit-mini .ico{ flex:none; width:34px; height:34px; border-radius:9px; background:var(--paper-dim); color:var(--blue); display:flex; align-items:center; justify-content:center; }
.benefit-mini h3{ font-size:0.92rem; margin:0 0 3px; }
.benefit-mini p{ margin:0; font-size:0.8rem; line-height:1.45; color:var(--ink-70); }
.econ-controls{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
@media(max-width:700px){ .econ-controls{ align-items:flex-start; } }

/* =========================================================
   LJUST LÄGE – <html data-theme="light">
   De mörka ytorna (hero, band, kort, sidfot) blir ljusa "ritningsytor":
   supportblått, blått rutnät och mjuka ljuseffekter. Texten blir #000C20.
   Accentfärger som text får mörkare toner för tydlig kontrast.
   ========================================================= */
.theme-switch{ display:inline-flex; align-items:center; gap:2px; padding:3px; border-radius:30px; border:1px solid rgba(var(--on),.18); background:rgba(var(--on),.05); }
.theme-switch button{ display:flex; align-items:center; justify-content:center; width:34px; height:30px; border:none; border-radius:20px; background:transparent; color:rgba(var(--on),.6); cursor:pointer; transition:background .2s, color .2s; }
.theme-switch button:hover{ color:var(--on-solid); }
.theme-switch button svg{ width:17px; height:17px; }
.theme-switch button[aria-pressed="true"]{ background:var(--accent); color:#000C20; box-shadow:0 0 16px -2px rgba(237,141,38,.55); }
.foot-bottom .foot-end{ display:flex; align-items:center; gap:16px; }
.logo-light{ display:none !important; }
html[data-theme="light"] .logo-dark{ display:none !important; }
html[data-theme="light"] .logo-light{ display:block !important; }
html.theme-anim *, html.theme-anim *::before{ transition:background-color .35s ease, color .35s ease, border-color .35s ease !important; }

html[data-theme="light"]{ --line:#D1E1F5; }
html[data-theme="light"] :is(.techbg, .prod, .shop-card, .section-dark, .battery-visual, .calc-panel, .spec-toggle, .admin-side){
  --on:0,12,32; --on-solid:#000C20;
  --glass:rgba(10,102,194,.05); --glass-brd:rgba(10,102,194,.2); --line-dark:rgba(10,102,194,.2);
  --t-teal:#077A87; --t-orange:#A85407; --t-green:#3D7506;
}
html[data-theme="light"] .techbg{ background:linear-gradient(180deg,#F5F9FE 0%,#E8F0FA 100%); color:#000C20; }
html[data-theme="light"] .techbg::before{ background-image:linear-gradient(rgba(10,102,194,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(10,102,194,.09) 1px, transparent 1px); }
html[data-theme="light"] footer.techbg{ border-top:1px solid #D1E1F5; }
html[data-theme="light"] .glow{ opacity:.22; }
html[data-theme="light"] .glow-orange{ opacity:.14; }
html[data-theme="light"] :is(.prod, .shop-card, .battery-visual, .spec-toggle){ background:linear-gradient(160deg,#FFFFFF 0%,#E8F0FA 100%); border:1px solid #D1E1F5; box-shadow:0 22px 50px -34px rgba(3,60,119,.45); }
html[data-theme="light"] .calc-panel{ background:radial-gradient(circle at 100% 0, rgba(237,141,38,.14), transparent 42%), radial-gradient(circle at 0 100%, rgba(10,102,194,.14), transparent 45%), linear-gradient(160deg,#FFFFFF,#E8F0FA); border:1px solid #D1E1F5; box-shadow:0 24px 50px -36px rgba(3,60,119,.45); }
html[data-theme="light"] .section-dark{ background:#E8F0FA; }
html[data-theme="light"] .spec-sec header{ background:linear-gradient(90deg,#0A66C2,#033C77); }
html[data-theme="light"] :is(.curve-card, .payslip, .dash-panel, .metric, .econ-card, .lock-card, .flow-card){ background:rgba(255,255,255,.78); box-shadow:0 18px 40px -30px rgba(3,60,119,.4); }
html[data-theme="light"] .econ-card.econ-hl{ background:linear-gradient(160deg, rgba(237,141,38,.14), #FFFFFF); border-color:rgba(237,141,38,.55); }
/* Accenter som text: mörkare toner för kontrast mot ljus bakgrund */
html[data-theme="light"] :is(.techbg, .prod, .shop-card, .calc-panel, .section-dark) :is(.eyebrow-line, .kicker, .live-chip, .prod-tag, .econ-det summary, .econ-link, .econ-ico){ color:var(--t-teal); }
html[data-theme="light"] .eyebrow-line .dot{ box-shadow:0 0 10px 1px rgba(10,176,194,.5); }
html[data-theme="light"] :is(.techbg, .calc-panel) :is(.payslip-row.total .v, .econ-hl .econ-big, .econ-big.neg, .econ-hl .econ-ico){ color:var(--t-orange); }
html[data-theme="light"] :is(.techbg, .calc-panel) .econ-big.pos{ color:var(--t-green); }
html[data-theme="light"] .techbg a[style*="#0AB0C2"]{ color:var(--t-teal) !important; }
html[data-theme="light"] .techbg .hero-sub, html[data-theme="light"] .techbg .lede{ color:rgba(0,12,32,.72) !important; }
html[data-theme="light"] .steps-dark .step-node{ background:#fff; border-color:#D1E1F5; color:#0A66C2; }
html[data-theme="light"] .tax-toggle button.on, html[data-theme="light"] .area-seg a.on{ color:#000C20; }
html[data-theme="light"] .dark-select{ background:#fff; }
/* SVG-grafik som ritats för mörk bakgrund */
html[data-theme="light"] :is(.techbg, .prod, .shop-card, .battery-visual, .calc-panel) :is([stroke="#fff"], .curve-line){ stroke:#0A66C2; }
html[data-theme="light"] :is(.techbg, .prod, .shop-card, .battery-visual, .calc-panel) [stroke^="rgba(255,255,255"]{ stroke:rgba(0,12,32,.28); }
html[data-theme="light"] :is(.techbg, .prod, .shop-card, .battery-visual, .calc-panel) :not(text)[fill^="rgba(255,255,255"]{ fill:rgba(10,102,194,.08); }
html[data-theme="light"] :is(.techbg, .prod, .shop-card, .battery-visual, .calc-panel) text[fill^="rgba(255,255,255"]{ fill:rgba(0,12,32,.6); }
html[data-theme="light"] :is(.techbg, .prod, .shop-card, .battery-visual, .calc-panel) [fill="#fff"]{ fill:#000C20; }
html[data-theme="light"] :is(.techbg, .prod, .shop-card, .battery-visual, .calc-panel) [fill^="rgba(0,12,32"]{ fill:rgba(255,255,255,.9); }
/* Pratbubblor och listor som ligger över ytorna förblir mörka */
html[data-theme="light"] :is(.tip-pop, .sbar-tip, .ms-tip, .vpick-pop){ --on:255,255,255; --on-solid:#fff; }
/* Admin */
html[data-theme="light"] .admin-side{ background:#fff; border-right:1px solid #D1E1F5; }
html[data-theme="light"] .admin-side nav a.on{ background:#E8F0FA; color:#0A66C2; box-shadow:inset 3px 0 0 #0A66C2; }
html[data-theme="light"] .admin-side .tagline{ color:#077A87 !important; }
.admin-side .theme-switch{ margin-top:12px; }
html[data-theme="light"] .flow-card{ background:linear-gradient(160deg,#FFFFFF,#F5F9FE) !important; border-color:#D1E1F5 !important; }
html[data-theme="light"] .flow-node rect{ fill:#FFFFFF; stroke:#A4C2EA; }
html[data-theme="light"] :is(.techbg, .battery-visual) [fill^="rgba(255,255,255"]:is(rect){ fill:rgba(255,255,255,.7); }
/* Admin: kalkylantaganden och resultat */
.calc-h{ font-size:0.95rem; margin:14px 0 10px; }
.calc-legend{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0 16px; }
.calc-legend div{ border:1px solid var(--line); border-left:3px solid var(--blue); border-radius:10px; padding:12px 14px; font-size:0.85rem; color:var(--ink-70); background:#F5F9FE; }
.calc-legend div:last-child{ border-left-color:var(--accent); }
.calc-legend b{ display:block; color:var(--ink); margin-bottom:2px; }
@media(max-width:800px){ .calc-legend{ grid-template-columns:1fr; } }
.calc-how{ border:1px solid var(--line); border-radius:10px; padding:12px 16px; margin-bottom:8px; background:#fff; }
.calc-how summary{ cursor:pointer; font-weight:600; }
.calc-how ol{ margin:12px 0 4px; padding-left:20px; font-size:0.88rem; color:var(--ink-70); line-height:1.7; }
.calc-how ol b{ color:var(--ink); }
.io-bar{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; padding:16px 20px; }
.io-bar > div:first-child{ flex:1; min-width:260px; font-size:0.9rem; }
.io-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.io-import{ margin:0; }
.io-import label{ cursor:pointer; }
.btn-del{ color:#C20A66 !important; border-color:rgba(194,10,102,.35) !important; }
.btn-del:hover{ background:rgba(194,10,102,.06); box-shadow:none; }
/* Inloggningsknappen: alltid vit text */
.userbox a.navcta, .userbox a.navcta:hover{ color:#fff; }
.userbox a.navcta:hover{ background:var(--blue); }
/* Svävande sol/måne längst ner till höger på alla sidor */
.theme-float{ --on:255,255,255; --on-solid:#fff; }
.theme-float .theme-switch{ background:rgba(0,12,32,.88); border-color:rgba(255,255,255,.16); backdrop-filter:blur(8px); box-shadow:0 12px 30px -10px rgba(0,12,32,.55); padding:4px; }
.theme-fixed{ position:fixed; right:20px; bottom:20px; z-index:290; }
.dock-row{ display:flex; align-items:center; gap:10px; }
html[data-theme="light"] .theme-float{ --on:0,12,32; --on-solid:#000C20; }
html[data-theme="light"] .theme-float .theme-switch{ background:rgba(255,255,255,.92); border-color:#D1E1F5; box-shadow:0 12px 30px -12px rgba(3,60,119,.45); }
@media(max-width:640px){ .theme-fixed{ right:14px; bottom:14px; } }
@media print{ .theme-float{ display:none; } }
.edit-fmt[hidden]{ display:none; }