/* ==========================================================================
   Pecron Forhandler – designlag «Pecron × Apple»
   Rolig, luftig og presist: systemfont (SF Pro på Apple-enheter, Inter ellers),
   gruppert lys bakgrunn, hvite kort uten kanter, myke skygger, Pecron-oransje
   som aksent og Pecron-svart for de viktigste flatene.
   Lastes etter app.css og overstyrer bare appens grensesnitt – ikke de
   utskrivbare dokumentene (.a4) eller sertifikatet.
   ========================================================================== */
:root{
  --bg:#f5f5f7; --card:#ffffff; --panel:#f2f2f4; --panel-2:#e8e8ed; --line:rgba(60,60,67,.12); --hair:rgba(60,60,67,.18);
  --fg:#1d1d1f; --muted:#6e6e73; --soft:#86868b;
  --accent:#fea025; --accent-strong:#b25f00; --accent-tint:#fff4e5; --ink:#1d1d1f;
  --dark:#111315; --pecron-dark:#161d25;
  --good:#1a7f37; --good-bg:#e7f6ec; --warn:#a15c00; --warn-bg:#fff3df; --bad:#d70015; --bad-bg:#ffecee;
  --blue:#0a84ff; --green:#30b158; --purple:#af52de; --teal:#30b0c7; --pink:#ff375f; --indigo:#5856d6; --mint:#00c7be;
  --sf:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sfd:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --round:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Inter",sans-serif;
  --r:20px; --r-sm:14px;
  --sh:0 1px 2px rgba(0,0,0,.04),0 6px 20px rgba(0,0,0,.05);
  --sh-lg:0 2px 6px rgba(0,0,0,.05),0 18px 50px rgba(0,0,0,.10);
  --ease:cubic-bezier(.2,.8,.2,1);
}
html,body{background:var(--bg)}
body{font-family:var(--sf);font-size:16px;line-height:1.47;letter-spacing:-.011em;color:var(--fg);text-rendering:optimizeLegibility}
::selection{background:rgba(254,160,37,.3)}
a{color:var(--accent-strong)}
.num{font-family:var(--round);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.muted{color:var(--muted)}
.wrap{max-width:820px;padding:0 20px calc(118px + env(safe-area-inset-bottom,0px))}
@media(min-width:900px){.wrap{max-width:900px}}
/* Mykere inngang på hver side */
.wrap>*:not(.top){animation:pfin .45s var(--ease) both}
@keyframes pfin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.wrap>*{animation:none!important}}

/* ---------- Toppfelt: frostet glass ---------- */
.top{position:sticky;top:0;z-index:30;margin:0 -20px;padding:calc(10px + env(safe-area-inset-top,0px)) 20px 10px;background:rgba(245,245,247,.78);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:.5px solid transparent;transition:border-color .2s}
.top.scrolled{border-bottom-color:var(--hair)}
.brand{font-family:var(--sfd);font-weight:800;font-size:19px;letter-spacing:.16em;text-transform:uppercase;line-height:1;display:flex;flex-direction:column;gap:5px}
.brand .bl{display:inline;color:var(--fg)}
.brand small{font-family:var(--sf);font-size:12.5px;letter-spacing:-.005em;text-transform:none;color:var(--muted);font-weight:500;margin:0;max-width:62vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand .bdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-left:3px;vertical-align:top;position:relative;top:1px}
.me-chip{background:#fff;border:0;box-shadow:var(--sh);padding:4px 12px 4px 4px;font-weight:600;font-size:14px;color:var(--fg)}
.av{width:30px;height:30px;font-family:var(--sf);font-size:12.5px;font-weight:700;background:linear-gradient(145deg,#2a3340,#111315);letter-spacing:.02em}

/* ---------- Tittel og seksjoner ---------- */
h1.page{font-family:var(--sfd);font-weight:800;font-size:clamp(30px,8.6vw,40px);line-height:1.08;text-transform:none;letter-spacing:-.03em;margin:18px 0 6px}
h1.page+p,h1.page+.muted{font-size:17px;color:var(--muted);margin-top:4px}
h2.sec{font-family:var(--sfd);font-weight:700;text-transform:none;letter-spacing:-.022em;font-size:22px;color:var(--fg);margin:34px 0 12px}
h2.sec a,h2.sec small{font-family:var(--sf);font-size:15px;font-weight:500;color:var(--accent-strong);text-decoration:none;letter-spacing:-.01em}
h2.sec small.muted{color:var(--muted)}
.back{color:var(--accent-strong);font-weight:500;font-size:16px;margin-top:12px;gap:2px}
.back:hover{opacity:.75}
.small{font-size:13.5px}
.lbl,.mlbl{font-family:var(--sf);font-size:12px;letter-spacing:.06em;font-weight:600;text-transform:uppercase;color:var(--muted)}
.mlbl{color:var(--accent-strong)}

/* ---------- Kort og flater ---------- */
.panel{background:var(--card);border:0;border-radius:var(--r);box-shadow:var(--sh)}
.pad{padding:18px}
.stack{gap:12px}
.empty{color:var(--soft);padding:28px 20px}
.loading{color:var(--soft);font-size:15px}
.loading::before{content:"";width:28px;height:28px;border-radius:50%;border:2.5px solid var(--panel-2);border-top-color:var(--accent);animation:pfspin .8s linear infinite;margin-bottom:10px}
.loading{display:grid;place-items:center;align-content:center;gap:0}
@keyframes pfspin{to{transform:rotate(360deg)}}

/* ---------- Knapper ---------- */
.btn{font-family:var(--sf);border:0;background:rgba(118,118,128,.12);color:var(--fg);border-radius:12px;font-weight:600;letter-spacing:-.01em;padding:11px 16px;transition:transform .12s var(--ease),background .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.97)}
.btn:hover{background:rgba(118,118,128,.18)}
.btn.pri{background:var(--accent);color:#1d1d1f;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 6px 16px rgba(254,160,37,.28)}
.btn.pri:hover{background:#ffab3a}
.btn.dark{background:var(--dark);color:#fff}
.btn.ghost{background:transparent;color:var(--accent-strong)}
.btn.ghost:hover{background:rgba(254,160,37,.1)}
.btn.sm{border-radius:999px;padding:7px 14px;font-size:14px;min-height:34px}
.btn.big{border-radius:14px;padding:16px;font-size:17px}
.btn.good{background:var(--good-bg);color:var(--good)} .btn.bad{background:var(--bad-bg);color:var(--bad)}
.cta{font-family:var(--sfd);text-transform:none;letter-spacing:-.015em;font-size:18px;font-weight:700;border-radius:16px;padding:17px;background:var(--dark);color:#fff;box-shadow:0 10px 30px rgba(17,19,21,.22);margin-top:14px!important}
.cta::first-letter{color:var(--accent)}
.cta:active{transform:scale(.985)}
.pill{font-weight:600;font-size:12px;padding:3px 10px;letter-spacing:-.005em}
.pill.n{background:rgba(118,118,128,.12);color:var(--muted)}

/* ---------- Felt ---------- */
.field{font-weight:600;font-size:14px;color:var(--fg);gap:7px}
.field input,.field select,.field textarea,input.in,select.in,textarea.in,.search{background:#fff;border:1px solid var(--hair);border-radius:12px;padding:12px 14px;font-size:16px;font-weight:400;transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus,input.in:focus,select.in:focus,textarea.in:focus,.search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(254,160,37,.2)}
.checks{border:1px solid var(--hair);border-radius:12px;background:#fff}
.err{background:var(--bad-bg);color:var(--bad);border-radius:12px;font-weight:500}
.okmsg{background:var(--good-bg);color:var(--good);border-radius:12px;font-weight:500}

/* ---------- Segmentkontroll (filtre, faner i ark) ---------- */
.filters,.shtabs{background:rgba(118,118,128,.12);border:0;border-radius:10px;padding:2px;gap:0}
.filters button,.shtabs button{border-radius:8px;padding:7px 14px;font-weight:500;font-size:14px;color:var(--fg)}
.filters button[aria-pressed="true"],.shtabs button.on{background:#fff;font-weight:600;box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04)}

/* ---------- Bunnmeny: iOS-fanelinje ---------- */
.nav{background:rgba(250,250,252,.82);backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);border-top:.5px solid var(--hair);padding:6px 6px calc(4px + env(safe-area-inset-bottom,0px))}
.nav a{font-size:10.5px;font-weight:500;letter-spacing:0;color:#8e8e93;gap:3px;padding:4px 2px}
.nav a svg{width:25px;height:25px;stroke-width:1.8}
.nav a[aria-current="page"],.nav a[aria-current="page"] svg{color:var(--accent-strong)}
.nav a[aria-current="page"] svg{fill:rgba(254,160,37,.16)}
.nav a.plus{background:none;color:#8e8e93;box-shadow:none;transform:none;padding:4px 2px;border-radius:10px}
.nav a.plus svg{color:inherit!important}
.nav a.plus[aria-current="page"]{color:var(--accent-strong)}
.nav a.plus span{font-weight:600}

/* ---------- Forsiden: hilsen ---------- */
.hero{position:relative;overflow:hidden;margin-top:14px;padding:24px 22px 22px;border-radius:26px;gap:8px;color:#fff;
  background:radial-gradient(90% 120% at 100% 0%,rgba(254,160,37,.38),rgba(254,160,37,0) 55%),radial-gradient(70% 90% at 0% 100%,rgba(90,110,140,.28),transparent 60%),linear-gradient(160deg,#1c232d,#0d0f12);
  box-shadow:0 18px 40px rgba(13,15,18,.22)}
.hero::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;border:1px solid rgba(255,255,255,.08);box-shadow:0 0 0 30px rgba(255,255,255,.02),0 0 0 60px rgba(255,255,255,.015)}
.hero .k{font-family:var(--sf);font-weight:600;letter-spacing:.04em;font-size:13px;color:rgba(255,255,255,.62);text-transform:uppercase}
.hero h1{font-family:var(--sfd);font-weight:800;text-transform:none;letter-spacing:-.03em;font-size:clamp(30px,8.4vw,40px);line-height:1.05}
.hero .quip{border:0;padding:0;margin:2px 0 4px;font-size:17px;font-weight:500;line-height:1.4;color:rgba(255,255,255,.92);max-width:34em}
.hero p{color:rgba(255,255,255,.55);font-size:14.5px}
.hero .hchips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;position:relative;z-index:1}
.hero .hchips a,.hero .hchips span{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);border:.5px solid rgba(255,255,255,.14);color:#fff;text-decoration:none;font-size:13.5px;font-weight:600;border-radius:999px;padding:6px 12px;backdrop-filter:blur(10px)}

/* ---------- Widgets (oversikt) ---------- */
.tiles{gap:12px}
.tile{background:var(--card);border:0;border-radius:var(--r);box-shadow:var(--sh);padding:16px;display:grid;gap:2px;transition:transform .15s var(--ease)}
.tile:active{transform:scale(.97)}
.tile .k{font-family:var(--sf);font-size:13px;font-weight:600;text-transform:none;letter-spacing:-.005em;color:var(--muted)}
.tile .v{font-family:var(--round);font-weight:700;font-size:34px;letter-spacing:-.03em;line-height:1.1;margin-top:4px}
.tile .s{font-size:13px;color:var(--soft)}
.tile.acc{background:linear-gradient(160deg,#fff6e8,#fff 70%);border:0}
.bar{height:6px;background:var(--panel-2)}
.bar i{background:linear-gradient(90deg,#ffb54d,var(--accent))}

/* ---------- Kampanjer, nyheter ---------- */
.camp{padding:16px;gap:14px}
.camp .em,.xnews .em,.mod .em,.lib .em{background:var(--accent-tint);border-radius:12px}
.camp b{font-size:17px;letter-spacing:-.015em;font-weight:600}
.camp p{font-size:15px}
.count{font-family:var(--round);color:var(--accent-strong)}
.files a{background:#fff;border:0;box-shadow:var(--sh);border-radius:14px;font-weight:500}
.campimg{border-radius:18px}
.xnews{grid-template-columns:44px 1fr;gap:14px}
.xnews .em{width:44px;height:44px;display:grid;place-items:center;font-size:22px}
.xnews b{font-size:17px;font-weight:600;letter-spacing:-.015em}

/* ---------- Academy ---------- */
.prog{padding:20px}
.prog-h b{font-family:var(--sfd);text-transform:none;letter-spacing:-.025em;font-size:22px;font-weight:700}
.mods{gap:10px}
.mod{border:0;background:#fff;box-shadow:var(--sh);border-radius:18px;padding:14px;grid-template-columns:48px 1fr auto;transition:transform .15s var(--ease)}
.mod:active{transform:scale(.98)}
.mod .em{width:48px;height:48px;font-size:24px}
.mod b{font-weight:600;letter-spacing:-.015em}
.mod.ok{background:#fff;box-shadow:var(--sh)}
.mod.ok .em{background:var(--good-bg)}
.mod .btn.sm{padding:7px 16px}
.lesson{background:#fff;box-shadow:var(--sh);border-radius:18px;padding:18px}
.lesson b{font-size:18px;letter-spacing:-.02em}
.q{border-top:.5px solid var(--hair)}
.opt{border:1px solid var(--hair);border-radius:14px;padding:14px;transition:background .15s,border-color .15s}
.opt:has(input:checked){background:var(--accent-tint)}
.result{border-radius:20px;padding:20px}
.result b{font-family:var(--sfd);letter-spacing:-.03em}
.stickybar{background:linear-gradient(rgba(245,245,247,0),var(--bg) 35%)}
.certcard{border-radius:24px;box-shadow:0 18px 40px rgba(13,15,18,.22)}
.certcard b{font-family:var(--sfd);text-transform:none;letter-spacing:-.02em}

/* ---------- Konkurranse ---------- */
.chero{background:radial-gradient(90% 120% at 100% 0%,rgba(254,160,37,.14),transparent 55%),#fff;border:0;border-radius:24px;box-shadow:var(--sh);padding:22px}
.rankbig{font-family:var(--round);font-weight:800;letter-spacing:-.05em}
.pts{font-family:var(--round);letter-spacing:-.03em}
.hunt{background:var(--accent-tint);border-radius:14px}
.pod{border:0;background:#fff;box-shadow:var(--sh);border-radius:18px 18px 10px 10px}
.pod .p{font-family:var(--round)}
.pod .m{font-family:var(--sf);letter-spacing:.04em}
.pod.g{background:linear-gradient(180deg,#fff6d8,#fff 70%)}
.lb li{border-bottom:.5px solid var(--hair);padding:12px 16px}
.lb .pos,.lb .sc b{font-family:var(--round)}
.lb li.me{background:var(--accent-tint);box-shadow:inset 3px 0 0 var(--accent)}
.feed li{border-bottom:.5px solid var(--hair)}
.prod{border:1px solid var(--hair);border-radius:16px}
.prod b{font-family:var(--sfd);letter-spacing:-.02em;font-weight:700}
.prod[aria-pressed="true"]{background:var(--accent-tint)}
.qty button{border:0;background:rgba(118,118,128,.12);border-radius:50%}
.qty output{font-family:var(--round)}
.sumline{background:var(--dark);border-radius:16px}
.sumline b{font-family:var(--round)}

/* ---------- Lister (gruppert) ---------- */
.lib{border-bottom:.5px solid var(--hair);padding:13px 16px}
.list li{border-bottom:.5px solid var(--hair);padding:13px 16px}
table.t th,.xadm-table th{color:var(--soft);font-weight:600}
table.t th,table.t td,.xadm-table th,.xadm-table td{border-bottom:.5px solid var(--hair)}
.xadm-scroll{border:0;box-shadow:var(--sh);border-radius:var(--r)}

/* ---------- Admin ---------- */
.tabs{gap:8px;padding:6px 20px 10px;margin:0 -20px}
.tabs a{border:0;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06);color:var(--fg);font-weight:500;padding:8px 14px;font-size:14px}
.tabs a[aria-current="page"]{background:var(--dark);color:#fff}
.form h3{font-family:var(--sfd);text-transform:none;letter-spacing:-.02em;font-weight:700}
.linkbox{background:var(--accent-tint);border:0;border-radius:16px}
.qedit{border:0;background:var(--panel);border-radius:16px}

/* ---------- Toast ---------- */
.toast{background:rgba(29,29,31,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:999px;padding:12px 20px;font-weight:500;font-size:15px;box-shadow:0 12px 40px rgba(0,0,0,.25);animation:pftoast .35s var(--ease)}
.toast.err{background:rgba(215,0,21,.94)}
@keyframes pftoast{from{opacity:0;transform:translate(-50%,10px) scale(.96)}}

/* ---------- Innlogging ---------- */
.login{background:radial-gradient(80% 60% at 100% 0%,rgba(254,160,37,.35),transparent 60%),radial-gradient(70% 50% at 0% 100%,rgba(80,100,130,.35),transparent 60%),linear-gradient(170deg,#1a2029,#0b0c0e);color:#fff;align-content:center}
.login-card{background:rgba(255,255,255,.97);color:var(--fg);border:0;border-radius:28px;padding:32px 24px 26px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.login h1{font-family:var(--sfd);text-transform:none;letter-spacing:-.03em;font-size:34px;font-weight:800;margin:18px 0 6px}
.login-card>p,.login-card p.muted{font-size:16px}
.brandmark{font-family:var(--sfd);letter-spacing:.2em;font-size:15px;font-weight:800;display:flex;align-items:center;gap:10px}
.brandmark span{font-family:var(--sf);letter-spacing:.02em;font-size:12px;font-weight:600;background:var(--accent);color:#1d1d1f;border-radius:999px;padding:3px 9px}
.pinform input[inputmode=numeric]{font-family:var(--round);border:1px solid var(--hair);border-radius:14px;background:#fff;letter-spacing:.6em;font-weight:600}
.pinform input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(254,160,37,.2)}
.login .btn.big{margin-top:4px}

/* ---------- Verktøy-ikoner som app-ikoner ---------- */
.xtools{gap:12px}
.xtools a{border:0;box-shadow:var(--sh);border-radius:var(--r);padding:16px;gap:4px;transition:transform .15s var(--ease)}
.xtools a:active{transform:scale(.97)}
.xtools a i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:21px;margin-bottom:8px;background:color-mix(in srgb,var(--tc,var(--accent)) 14%,#fff)}
.xtools a:nth-child(7n+1){--tc:var(--accent)} .xtools a:nth-child(7n+2){--tc:var(--pink)} .xtools a:nth-child(7n+3){--tc:var(--blue)} .xtools a:nth-child(7n+4){--tc:var(--green)}
.xtools a:nth-child(7n+5){--tc:var(--purple)} .xtools a:nth-child(7n+6){--tc:var(--teal)} .xtools a:nth-child(7n+7){--tc:var(--indigo)}
.xtools a b{font-size:16px;font-weight:600;letter-spacing:-.015em}
.xtools a span{font-size:13px;color:var(--soft)}
.xtools a em{top:12px;right:12px;background:var(--bad);font-family:var(--round)}
.mgrid{gap:12px}
.mtile{border:0;box-shadow:var(--sh);border-radius:var(--r);padding:16px;gap:4px;transition:transform .15s var(--ease)}
.mtile:active{transform:scale(.97)}
.mtile i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:21px;margin-bottom:8px;background:color-mix(in srgb,var(--tc,var(--accent)) 14%,#fff)}
.mtile:nth-child(7n+1){--tc:var(--accent)} .mtile:nth-child(7n+2){--tc:var(--blue)} .mtile:nth-child(7n+3){--tc:var(--indigo)} .mtile:nth-child(7n+4){--tc:var(--green)}
.mtile:nth-child(7n+5){--tc:var(--pink)} .mtile:nth-child(7n+6){--tc:var(--purple)} .mtile:nth-child(7n+7){--tc:var(--teal)}
.mtile b{font-size:16px;font-weight:600;letter-spacing:-.015em}
.mtile span{color:var(--soft)}
.mjo{background:#fff;box-shadow:var(--sh);border-radius:var(--r)}
.mcard,.mprod{border:0;box-shadow:var(--sh);border-radius:var(--r)}
.mprod .mpi{background:linear-gradient(180deg,#f7f7f9,#eeeef1)}
.mvr,.mcalc{border-radius:24px;background:linear-gradient(160deg,#1c232d,#0d0f12)}
.mvbig,.mvtop b,.ttot b,.xsum,.mcalc .cres b{font-family:var(--sfd);text-transform:none;letter-spacing:-.025em}
.mvch button{background:rgba(118,118,128,.1);border:1.5px solid transparent;border-radius:12px}
.mvch button[aria-pressed=true]{background:var(--accent-tint);border-color:var(--accent)}
.mchips button{border:0;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06);font-weight:500}
.mchips button[aria-pressed=true]{background:var(--dark);color:#fff}
.mimg{border-radius:16px}
.mprev{background:#fff;box-shadow:var(--sh);border-radius:var(--r)}
.tline{background:#fff;box-shadow:var(--sh);border-radius:16px}
.xprod{border:0;box-shadow:var(--sh);border-radius:16px}
.xprod.on{box-shadow:0 0 0 2px var(--accent),var(--sh)}
.xbadges>div{background:#fff;box-shadow:var(--sh);border-radius:16px;border:0}
.xbadges>div.on{background:linear-gradient(160deg,#fff6e8,#fff);border:0}
.xbadges.sm{background:#fff;box-shadow:var(--sh);border-radius:999px;padding:8px 14px;width:max-content;max-width:100%;overflow:hidden}
.xweek{background:linear-gradient(160deg,#fff6e8,#fff 60%);border:0}
.xweek .xq{font-family:var(--sfd);font-size:19px;letter-spacing:-.02em;font-weight:700}
.xopts .btn{background:#fff;border:1px solid var(--hair);font-weight:500;border-radius:14px}
.xopts .btn.good{background:var(--good-bg);border-color:transparent}
.xopts .btn.bad{background:var(--bad-bg);border-color:transparent}
.xalert{background:var(--warn-bg);border:0;box-shadow:none}
.xpush{background:linear-gradient(160deg,#eef5ff,#fff)}

/* ---------- HUSK å dele ---------- */
.shbox{background:#fff;border:0;box-shadow:var(--sh);border-radius:24px;padding:20px 0 16px;margin-top:16px}
.shhead{padding:0 20px}
.shhead h2{font-family:var(--sfd);text-transform:none;letter-spacing:-.025em;font-size:22px;font-weight:800}
.shhead p{font-size:15px}
.shtodo{background:var(--accent);color:#1d1d1f;font-family:var(--round);font-weight:700}
.shrow{padding:14px 20px 6px;scroll-padding:20px;gap:14px}
.shc{border:0;border-radius:18px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.08)}
.shtx{padding:12px 14px 14px}
.shtx b{font-size:16px;letter-spacing:-.015em;font-weight:600}
.shcta{border-radius:999px;padding:7px 14px}
.shown,.shok,.shlk{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.shown{background:rgba(254,160,37,.92)}
.shov{background:rgba(0,0,0,.4);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.shsheet{border-radius:28px 28px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.2)}
@media (min-width:700px){.shsheet{border-radius:28px}}
.shsheet::before{content:"";position:sticky;top:6px;display:block;width:38px;height:5px;border-radius:3px;background:rgba(255,255,255,.85);margin:6px auto -11px;z-index:2;box-shadow:0 0 4px rgba(0,0,0,.25)}
.shin h3{font-family:var(--sfd);letter-spacing:-.025em;font-weight:800}
.shtext{border:0;background:var(--panel);border-radius:14px;font-size:15px}
.shmain{border-radius:14px}
.shwarn{border-radius:14px}

/* ==========================================================================
   Nye moduler: Siden sist, streak, duell, strømfakta
   ========================================================================== */
.fcard{display:block;background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:18px;margin-top:14px;color:var(--fg);text-decoration:none}
.fsince header{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px}
.fsince h2{margin:0;font-family:var(--sfd);font-size:22px;font-weight:800;letter-spacing:-.025em}
.fsince header small{color:var(--soft);font-size:13.5px}
.fsl{list-style:none;margin:0 -18px -10px;padding:0}
.fsl li>a,.fsl li>div{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:11px 18px;color:var(--fg);text-decoration:none;position:relative}
.fsl li+li>a::before,.fsl li+li>div::before{content:"";position:absolute;top:0;left:62px;right:0;border-top:.5px solid var(--hair)}
.fsl .fe{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--panel);font-size:17px}
.fsl li.hot .fe{background:var(--accent-tint)}
.fsl .ft{font-size:15.5px;line-height:1.35;letter-spacing:-.01em}
.fsl li.hot .ft{font-weight:600}
.fa{color:#c7c7cc;font-size:22px;line-height:1}
.fquiet{margin:4px 0 0;color:var(--muted);font-size:15px}
.fquiet a{font-weight:600;text-decoration:none}

.fhome{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.fhome>.fcard{margin-top:0}
.fhome>*{grid-column:1/-1}
.fstreak{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.fstreak .fsn{display:grid;justify-items:center;min-width:76px;line-height:1}
.fstreak .fflame{font-size:30px;filter:saturate(1.2)}
.fstreak.risk .fflame{animation:pfflick 1.6s ease-in-out infinite}
@keyframes pfflick{0%,100%{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.08) rotate(2deg)}}
.fstreak .fsn b{font-family:var(--round);font-size:46px;font-weight:800;letter-spacing:-.04em;margin-top:2px}
.fstreak .fsn small{font-size:12px;color:var(--muted);font-weight:600;margin-top:2px}
.fstreak .fsx p{margin:0 0 10px;font-size:15px;line-height:1.4}
.fstreak.safe{background:linear-gradient(160deg,#ecf8f0,#fff 60%)}
.fstreak.risk{background:linear-gradient(160deg,#fff4e5,#fff 60%)}
.fbar{height:6px;border-radius:99px;background:var(--panel-2);overflow:hidden;margin-bottom:6px}
.fbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#ffc46b,var(--accent))}
.fms{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.fms span{font-size:12px;font-weight:600;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08);border-radius:999px;padding:3px 9px}

.fduel{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}
.fduel .fdi{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:22px;background:color-mix(in srgb,var(--indigo) 14%,#fff)}
.fduel b{display:block;font-size:16.5px;letter-spacing:-.015em}
.fduel small{display:block;color:var(--muted);font-size:13.5px;margin-top:1px}
.fduel.hot{background:linear-gradient(135deg,#2b2a6b,#5856d6);color:#fff;box-shadow:0 14px 34px rgba(88,86,214,.35)}
.fduel.hot small{color:rgba(255,255,255,.75)}
.fduel.hot .fdi{background:rgba(255,255,255,.16)}
.fduel.hot .btn.pri{box-shadow:none}

.ffact{position:relative;overflow:hidden;background:linear-gradient(160deg,#f2f6ff,#fff 60%)}
.ffact .fk{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.ffact .fbody{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;margin:10px 0 6px}
.ffact .fbig{font-size:34px;line-height:1}
.ffact p{margin:0;font-family:var(--sfd);font-size:19px;line-height:1.3;font-weight:700;letter-spacing:-.02em}
.ffact small{display:block;font-size:12.5px}
.flink{border:0;background:none;padding:6px 0 0;color:var(--blue);font-weight:600;font-size:14.5px}

/* Duell-sider */
.fhero{background:linear-gradient(160deg,#1c1b4a,#3e3cc0);color:#fff;border-radius:26px;padding:22px;margin-top:14px;display:grid;gap:12px;box-shadow:0 18px 40px rgba(62,60,192,.28)}
.fhero h1{margin:0;font-family:var(--sfd);font-size:28px;letter-spacing:-.03em;line-height:1.1}
.fhero p{margin:0;color:rgba(255,255,255,.78);font-size:15px}
.fhero .btn.pri{box-shadow:none}
.fhero .btn.ghost{color:#fff}
.fstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fstats>div{background:rgba(255,255,255,.1);border-radius:16px;padding:12px;display:grid;justify-items:center}
.fstats b{font-size:30px;font-weight:800}
.fstats small{color:rgba(255,255,255,.7);font-size:12.5px}
.fdlist{background:#fff;border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.fdrow{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:12px 16px;width:100%;border:0;background:none;text-align:left;color:var(--fg);text-decoration:none;font:inherit;position:relative}
.fdrow+.fdrow::before{content:"";position:absolute;top:0;left:68px;right:0;border-top:.5px solid var(--hair)}
.fdrow b{display:block;font-weight:600;letter-spacing:-.01em}
.fdrow small{display:block;color:var(--muted);font-size:13px}
.fav{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;background:linear-gradient(145deg,#6d6bff,#3e3cc0)}
.ftop{list-style:none;margin:0;padding:0;background:#fff;border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.ftop li{display:grid;grid-template-columns:28px 1fr auto;grid-template-rows:auto auto;column-gap:10px;padding:12px 16px;border-top:.5px solid var(--hair)}
.ftop li:first-child{border-top:0}
.ftop li>span{grid-row:1/3;align-self:center;font-weight:800;color:var(--soft)}
.ftop li:nth-child(1)>span{color:var(--gold)}
.ftop li small{grid-column:2;color:var(--muted);font-size:13px}
.ftop li em{grid-row:1/3;grid-column:3;align-self:center;font-style:normal;font-weight:700}
.fsearch{margin-top:6px}
.fsrand{margin:12px 0 4px;background:#fff;box-shadow:var(--sh)}
.fplay{min-height:62vh;display:grid;align-content:start;gap:16px;padding-top:18px}
.fvs{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center}
.fvs.big{font-size:44px;letter-spacing:0}
.fready{background:#fff;border-radius:26px;box-shadow:var(--sh);padding:28px 22px;text-align:center;display:grid;gap:12px;margin-top:20px}
.fready h1{margin:0;font-family:var(--sfd);font-size:40px;letter-spacing:-.035em}
.fready p{margin:0;color:var(--muted)}
.ftime{height:6px;border-radius:99px;background:var(--panel-2);overflow:hidden}
.ftime i{display:block;height:100%;width:100%;border-radius:99px;background:linear-gradient(90deg,var(--indigo),#8e8cff)}
.fq{background:#fff;border-radius:24px;box-shadow:var(--sh);padding:22px}
.fq small{color:var(--muted);font-weight:600;font-size:13px}
.fq h2{margin:8px 0 0;font-family:var(--sfd);font-size:21px;line-height:1.3;letter-spacing:-.02em}
.fopts{display:grid;gap:10px}
.fopt{border:0;background:#fff;box-shadow:var(--sh);border-radius:16px;padding:16px 18px;text-align:left;font-size:16px;font-weight:500;color:var(--fg);transition:transform .12s var(--ease),background .15s}
.fopt:active{transform:scale(.98)}
.fopt.sel{background:var(--indigo);color:#fff}
.fopt[disabled]:not(.sel){opacity:.55}
.fres{background:#fff;border-radius:26px;box-shadow:var(--sh);padding:26px 20px;text-align:center;display:grid;gap:10px;justify-items:center;margin-top:14px}
.fres.vant{background:linear-gradient(160deg,#fff6d8,#fff 60%)}
.fres .fbig{font-size:54px;line-height:1}
.fres h1{margin:0;font-family:var(--sfd);font-size:32px;letter-spacing:-.03em}
.fscore{display:flex;gap:18px;align-items:center;justify-content:center}
.fscore b{font-size:44px;font-weight:800;display:block;line-height:1}
.fscore small{color:var(--muted);font-size:13px}
.fscore>span{font-size:28px;color:var(--soft)}
.fans b{display:block;margin-bottom:6px;letter-spacing:-.01em}
.fans ul{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:4px}
.fans li{padding:8px 12px;border-radius:10px;background:var(--panel);font-size:14.5px}
.fans li.right{background:var(--good-bg);color:var(--good);font-weight:600}
.fans li.wrong{background:var(--bad-bg);color:var(--bad)}
.fans li em{font-style:normal;font-size:11.5px;font-weight:700;background:rgba(0,0,0,.08);border-radius:999px;padding:1px 7px;margin-left:6px}
.fans small{display:block;margin-top:4px}

/* ---------- Kontaktkort og installeringstips ---------- */
.kcard,.contact{border-radius:var(--r)}

/* ---------- Store skjermer ---------- */
@media(min-width:760px){
  .tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fhome{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fhome .fstreak{grid-column:span 2}
  .fhome .fduel{grid-column:span 1;grid-template-columns:auto 1fr}
  .fhome .fduel .fa,.fhome .fduel .btn{display:none}
  .fhome .ffact{grid-column:span 3}
}

/* ---------- Finjustering etter første gjennomgang ---------- */
.xtools a,.mtile{align-content:start}
.xtools a{gap:2px}
.shnext{margin:12px 20px 0;font-size:15px;color:var(--muted)}
.shnext b{color:var(--fg)}
.shc{flex:0 0 min(64%,232px)}
.shimg{aspect-ratio:4/4.2}
.shlk{top:auto;bottom:8px;right:8px}
.shok{top:auto;bottom:8px}
/* ---------- Profil (Meg) ---------- */
.phead{display:grid;justify-items:center;text-align:center;gap:4px;margin:22px 0 6px}
.pav{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;font-size:32px;font-weight:700;color:#fff;letter-spacing:.02em;background:radial-gradient(80% 80% at 70% 20%,rgba(254,160,37,.55),transparent 60%),linear-gradient(145deg,#2a3340,#0d0f12);box-shadow:0 10px 30px rgba(13,15,18,.25);margin-bottom:8px}
.phead h1{margin:0;font-family:var(--sfd);font-size:28px;font-weight:800;letter-spacing:-.03em}
.phead p{margin:0;color:var(--muted)}
.pstats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;margin-top:16px}
.pstats>*{background:#fff;border-radius:18px;box-shadow:var(--sh);padding:12px 6px;display:grid;justify-items:center;text-decoration:none;color:var(--fg)}
.pstats b{font-size:26px;font-weight:800}
.pstats small{color:var(--muted);font-size:12px}
.glist{background:#fff;border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;margin-top:18px}
.glist a{display:grid;grid-template-columns:32px 1fr auto;gap:12px;align-items:center;padding:13px 16px;color:var(--fg);text-decoration:none;font-weight:500;position:relative}
.glist a+a::before{content:"";position:absolute;top:0;left:60px;right:0;border-top:.5px solid var(--hair)}
.glist .gi{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:17px;background:var(--panel)}
.glist a.dark .gi{background:var(--dark)}
.glist a:active{background:var(--panel)}
.login-card{background:#fff}
/* Hilsen med stemningsbilde */
.hero.hasimg{min-height:230px;align-content:end;background:linear-gradient(180deg,rgba(10,12,15,.05) 0%,rgba(10,12,15,.35) 38%,rgba(10,12,15,.86) 100%),radial-gradient(90% 120% at 100% 0%,rgba(254,160,37,.30),transparent 55%),var(--himg) center/cover no-repeat,linear-gradient(160deg,#1c232d,#0d0f12)}
.hero.hasimg::after{display:none}
.hero.hasimg h1,.hero.hasimg .quip{text-shadow:0 1px 12px rgba(0,0,0,.35)}
@media(min-width:760px){.hero.hasimg{min-height:300px;padding:30px 32px}}
/* ---------- Flytende glass-fanelinje (som iOS 26) ---------- */
.nav{left:12px;right:12px;bottom:calc(8px + env(safe-area-inset-bottom,0px));padding:6px;border-radius:30px;border:.5px solid rgba(255,255,255,.6);background:rgba(250,250,252,.72);box-shadow:0 10px 40px rgba(0,0,0,.14),0 1px 0 rgba(255,255,255,.8) inset}
.nav ul{gap:2px}
.nav a{border-radius:24px;padding:7px 2px 6px;transition:background .2s var(--ease),color .2s}
.nav a[aria-current="page"]{background:rgba(254,160,37,.14)}
.nav a[aria-current="page"] span{font-weight:600}
@media(min-width:760px){.nav{left:50%;right:auto;transform:translateX(-50%);width:min(560px,calc(100vw - 32px));bottom:18px}}
.toast{bottom:calc(100px + env(safe-area-inset-bottom,0px))}
.stickybar{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
.nav ul{align-items:center}

/* ==========================================================================
   Mitt løp – Pecron-proff
   ========================================================================== */
.pav.l3{box-shadow:0 0 0 3px #fff,0 0 0 6px #ffb54d,0 10px 30px rgba(13,15,18,.25)}
.pav.l4{box-shadow:0 0 0 3px #fff,0 0 0 6px #d4a017,0 0 24px rgba(212,160,23,.55),0 10px 30px rgba(13,15,18,.25);background:radial-gradient(80% 80% at 70% 20%,rgba(255,214,102,.65),transparent 60%),linear-gradient(145deg,#3a2f12,#0d0f12)}
.pav.sm{width:40px;height:40px;font-size:14px;margin:0;box-shadow:none}
.pav.sm.l4{box-shadow:0 0 0 2px #fff,0 0 0 4px #d4a017}
.ptitle{display:inline-flex;margin-top:8px;font-weight:600;font-size:14px;text-decoration:none;color:var(--fg);background:#fff;box-shadow:var(--sh);border-radius:999px;padding:5px 14px}
.ptitle.lv4{background:linear-gradient(135deg,#fff3c4,#ffe08a);color:#5a4300}
.lbadge{font-size:13px;margin-left:4px}

.lcard{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}
.lrw{position:relative;width:52px;height:52px;display:grid;place-items:center}
.lring{position:absolute;inset:0;transform:rotate(-90deg)}
.lr0{fill:none;stroke:var(--panel-2);stroke-width:4}
.lr1{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;transition:stroke-dasharray .6s var(--ease)}
.lv4 .lr1{stroke:#d4a017}
.lre{font-size:22px}
.lcard small{display:block;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.lcard b{display:block;font-family:var(--sfd);font-size:19px;letter-spacing:-.02em}
.lcard em{display:block;font-style:normal;color:var(--muted);font-size:13.5px}
.lcard.lv4{background:linear-gradient(135deg,#fff8dc,#fff 60%)}

.lwall{background:linear-gradient(160deg,#1f1a0c,#3a2f12);color:#fff}
.lwk{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#ffd666}
.lwl{display:flex;gap:16px;overflow-x:auto;margin-top:12px;padding-bottom:2px;scrollbar-width:none}
.lwp{display:grid;justify-items:center;text-align:center;gap:4px;min-width:84px}
.lwp b{font-size:13.5px}
.lwp small{color:rgba(255,255,255,.65);font-size:11.5px}

.lhero{display:grid;justify-items:center;text-align:center;gap:4px;background:#fff;border-radius:26px;box-shadow:var(--sh);padding:26px 20px;margin-top:10px}
.lhero .pav{font-size:34px;margin-bottom:8px}
.lhero small{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lhero h2{margin:0;font-family:var(--sfd);font-size:30px;letter-spacing:-.03em}
.lhero p{margin:6px 0 0;color:var(--muted);max-width:30em}
.lhero.lv4{background:linear-gradient(160deg,#fff4c9,#fff 60%)}
.lsteps{display:grid;gap:12px;margin-top:16px;position:relative}
.lstep{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:16px 18px}
.lstep.lock{opacity:.72}
.lsh{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.lse{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:21px;background:var(--panel)}
.lstep.done .lse{background:var(--good-bg)}
.lstep.now .lse{background:var(--accent-tint)}
.lsh small{display:block;color:var(--muted);font-size:12px;font-weight:600}
.lsh b{font-family:var(--sfd);font-size:18px;letter-spacing:-.02em}
.lreq{list-style:none;margin:12px -18px 0;padding:0}
.lreq li a{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;padding:10px 18px;color:var(--fg);text-decoration:none;border-top:.5px solid var(--hair)}
.lreq .lck{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--hair);display:grid;place-items:center;font-size:12px;font-weight:700}
.lreq li.ok .lck{background:var(--good);border-color:var(--good);color:#fff}
.lreq li.pend .lck{border-color:var(--accent);font-size:11px}
.lreq .lrl{font-size:14.5px;display:grid;gap:5px}
.lreq .lrl small{color:var(--muted)}
.lreq .fbar{margin:0;height:4px}
.lreq li.ok .fbar i{background:var(--good)}
.lreq .lval{font-size:14px;font-weight:700;color:var(--muted);white-space:nowrap}
.lreq li.ok .lval{color:var(--good)}
.lexam{margin-top:14px;background:var(--panel);border-radius:16px;padding:14px 16px;display:grid;gap:8px;justify-items:start}
.lexam p{margin:0;font-size:14px;color:var(--muted)}
.lexam .okmsg{color:var(--good)}
.lexbar{position:sticky;top:calc(64px + env(safe-area-inset-top,0px));z-index:20;display:flex;align-items:center;gap:12px;justify-content:space-between;background:rgba(255,255,255,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--sh);border-radius:999px;padding:8px 8px 8px 18px;margin-top:12px}
.lexbar b{font-family:var(--round);font-size:18px}
.lexbar b.low{color:var(--bad)}
.lexbar span{color:var(--muted);font-size:13.5px}
.lq{display:grid;gap:8px}
.lq b{font-size:16.5px;letter-spacing:-.01em;line-height:1.35}
.lopts{display:grid;gap:8px}
.lopts .fopt{box-shadow:none;border:1px solid var(--hair);padding:12px 14px;font-size:15px}
.lopts .fopt.sel{background:var(--dark);border-color:var(--dark);color:#fff}
.certcard.proff{background:radial-gradient(120% 140% at 100% 0%,#6b5414 0%,#1d1708 60%);grid-template-columns:72px 1fr}
.certcard.proff .pmedal{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font-size:40px;background:radial-gradient(circle at 35% 30%,#ffe9a3,#d4a017 70%);box-shadow:0 0 30px rgba(212,160,23,.5)}
.certcard.proff b{color:#ffe08a}