:root{
  --pink:#ff7ac8; --pink-2:#ffb3e1; --lav:#b58cff; --lav-2:#e2d2ff; --sky:#7fd8ff; --mint:#8ff0c8; --sun:#ffe27a;
  --ink:#4b2a6b; --ink-2:#7a5c96; --card:rgba(255,255,255,.78); --line:rgba(181,140,255,.35);
  --rainbow:linear-gradient(90deg,#ff8fb8,#ffc27a,#ffe97a,#8ff0c8,#7fd8ff,#b58cff,#ff8fd8);
  --conic:conic-gradient(from 0deg,#ff8fb8,#ffc27a,#ffe97a,#8ff0c8,#7fd8ff,#b58cff,#ff8fd8,#ff8fb8);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:"Fredoka",ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,sans-serif;
  color:var(--ink);
  background:linear-gradient(160deg,#ffe0f4 0%,#efe2ff 45%,#d9f3ff 100%) fixed;
  min-height:100dvh;
  padding-bottom:calc(84px + env(safe-area-inset-bottom));
}
.sky{position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(2px 2px at 12% 18%,#fff 50%,transparent 51%),
    radial-gradient(3px 3px at 78% 12%,#fff 50%,transparent 51%),
    radial-gradient(2px 2px at 64% 38%,#fff 50%,transparent 51%),
    radial-gradient(3px 3px at 22% 62%,#fff 50%,transparent 51%),
    radial-gradient(2px 2px at 88% 72%,#fff 50%,transparent 51%),
    radial-gradient(2px 2px at 42% 86%,#fff 50%,transparent 51%),
    radial-gradient(3px 3px at 6% 92%,#fff 50%,transparent 51%);
  animation:twinkle 4s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.4}to{opacity:1}}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
  background:rgba(255,240,250,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:3px solid transparent;border-image:var(--rainbow) 1}
.top h1{margin:0;font-size:1.45rem;font-weight:700;letter-spacing:.3px;display:flex;align-items:center;gap:8px}
.top h1 .ttl{background:linear-gradient(90deg,#e0559f,#8a5cf0);-webkit-background-clip:text;background-clip:text;color:transparent}
.uni{display:inline-block;animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-3px) rotate(-6deg)}}
.badge{font-size:.8rem;padding:4px 10px;border-radius:99px;background:#fff;border:1px solid var(--line);color:var(--ink-2)}
.badge.warn{background:#fff3c4;border-color:#ffd66b;color:#8a5a00}
.badge.err{background:#ffe0e6;border-color:#ff9db1;color:#a3254a}

main{position:relative;z-index:1;max-width:560px;margin:0 auto;padding:14px 16px}
.view{display:none}
.view.active{display:block;animation:pop .25s ease}
@keyframes pop{from{opacity:0;transform:translateY(6px)}}
.card{background:var(--card);border:1px solid rgba(255,255,255,.9);border-radius:24px;padding:16px;margin-bottom:14px;
  box-shadow:0 8px 24px -10px rgba(140,80,200,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
h2{margin:0 0 10px;font-size:1.1rem;font-weight:600}
.hint{margin:8px 0 0;font-size:.85rem;color:var(--ink-2);line-height:1.4}

.hero{text-align:center;padding:24px 16px 18px}
.big{position:relative;width:min(62vw,230px);aspect-ratio:1;border:0;border-radius:50%;padding:0;cursor:pointer;background:none;
  -webkit-tap-highlight-color:transparent;font:inherit}
.big .ring{position:absolute;inset:0;border-radius:50%;background:var(--conic);
  box-shadow:0 12px 34px -8px rgba(181,140,255,.8),0 0 0 6px rgba(255,255,255,.6)}
.big .inner{position:absolute;inset:14px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#fff 0%,#fff3fb 60%,#ffe3f4 100%);
  font-size:clamp(1.8rem,9vw,2.4rem);font-weight:700;color:#d14b97;letter-spacing:2px;transition:transform .15s}
.big:active .inner{transform:scale(.95)}
.big.on .ring{animation:spin 3s linear infinite}
.big.on .inner{background:radial-gradient(circle at 35% 30%,#fff 0%,#f3eaff 60%,#e6d6ff 100%);color:#7b45d6}
@keyframes spin{to{transform:rotate(360deg)}}
.readout{display:flex;justify-content:center;gap:28px;margin-top:20px}
.num{font-size:2rem;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
.lbl{font-size:.8rem;color:var(--ink-2);margin-top:4px;text-transform:uppercase;letter-spacing:1px}
.gps{display:inline-block;margin-top:14px;font-size:.8rem;padding:4px 12px;border-radius:99px;background:#fff;border:1px solid var(--line);color:var(--ink-2)}
.gps.good{border-color:#7fe0b5;color:#1d7a53}
.gps.bad{border-color:#ff9db1;color:#a3254a}

.field{display:block;margin-bottom:10px}
.field span{display:block;font-size:.82rem;color:var(--ink-2);margin:0 0 4px 4px}
input,select{width:100%;font:inherit;font-size:1rem;color:var(--ink);padding:11px 14px;border-radius:16px;
  border:2px solid var(--lav-2);background:#fff;outline:none;-webkit-appearance:none;appearance:none}
select{background-image:linear-gradient(45deg,transparent 50%,var(--lav) 50%),linear-gradient(135deg,var(--lav) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:36px}
input:focus,select:focus{border-color:var(--lav)}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pill{font:inherit;font-weight:600;border:0;border-radius:99px;padding:11px 18px;cursor:pointer;color:#fff;
  background:linear-gradient(90deg,#ff7ac8,#b58cff);box-shadow:0 6px 16px -6px rgba(200,80,180,.6)}
.pill.alt{background:#fff;color:var(--ink);border:2px solid var(--lav-2);box-shadow:none}
.ghost{font:inherit;border:0;background:none;color:var(--ink-2);padding:10px 12px;cursor:pointer;border-radius:12px}
.ghost:hover{background:rgba(181,140,255,.12)}

.month{display:flex;align-items:center;justify-content:space-between;text-align:center}
.month .ghost{font-size:1.6rem;line-height:1;padding:6px 14px}
.mname{font-weight:600;font-size:1.1rem;text-transform:capitalize}
.msum{font-size:.85rem;color:var(--ink-2)}

.item{display:flex;gap:12px;align-items:flex-start;background:var(--card);border-radius:20px;padding:12px 14px;margin-bottom:10px;
  border:1px solid rgba(255,255,255,.9);box-shadow:0 4px 14px -8px rgba(140,80,200,.35)}
.item .dot{flex:0 0 10px;height:10px;border-radius:50%;margin-top:7px;background:var(--rainbow)}
.item .main{flex:1;min-width:0}
.item .t1{font-weight:600}
.item .t2{font-size:.85rem;color:var(--ink-2);margin-top:2px;overflow-wrap:anywhere}
.item .acts{display:flex;gap:2px;flex-shrink:0}
.item .acts button{font-size:1rem;padding:6px 8px}
.tag{display:inline-block;font-size:.72rem;padding:1px 8px;border-radius:99px;background:var(--lav-2);color:var(--ink);margin-left:4px;vertical-align:1px}
.tag.pend{background:#fff3c4}
.empty{text-align:center;color:var(--ink-2);padding:22px 10px}

.tabs{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;justify-content:space-around;
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:rgba(255,245,252,.88);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:3px solid transparent;border-image:var(--rainbow) 1}
.tabs button{flex:1;max-width:120px;font:inherit;font-size:.78rem;border:0;background:none;color:var(--ink-2);padding:6px 0;border-radius:14px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}
.tabs button span{font-size:1.3rem}
.tabs button.on{background:linear-gradient(180deg,#ffe3f4,#efe2ff);color:var(--ink);font-weight:600}

dialog{border:0;border-radius:26px;padding:20px;width:min(92vw,440px);color:var(--ink);
  background:linear-gradient(170deg,#fff 0%,#fff6fc 100%);box-shadow:0 20px 60px -10px rgba(120,60,180,.5)}
dialog::backdrop{background:rgba(120,70,170,.35);backdrop-filter:blur(3px)}

#toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);
  z-index:10;max-width:90vw;padding:10px 18px;border-radius:99px;background:#fff;color:var(--ink);font-weight:500;
  border:2px solid var(--lav-2);box-shadow:0 10px 30px -10px rgba(120,60,180,.5);opacity:0;pointer-events:none;transition:.25s}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Tesla-tur */
.tesla{border:2px solid transparent;
  background:linear-gradient(135deg,#fff,#f1e8ff) padding-box,var(--rainbow) border-box}
.tesla-top{display:flex;gap:12px;align-items:center}
.tesla-ico{font-size:1.8rem;width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:#fff;box-shadow:0 4px 12px -6px rgba(140,80,200,.5)}
.tesla .t1{font-weight:600;font-size:1.05rem}
.tesla .t2{font-size:.85rem;color:var(--ink-2)}
.tesla.pause .tesla-ico{opacity:.6}
.readout.small{margin:14px 0 12px}
.readout.small .num{font-size:1.5rem}
.row.center{justify-content:center}
.copy{display:flex;gap:6px}
.copy input{font-size:.8rem;padding:9px 12px;color:var(--ink-2)}
.tag.tesla-tag{background:#d9f3ff}
.tag.est{background:#fff3c4}

/* Prut-enhjørning ved start */
#prut{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(255,230,248,.35);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);animation:pfade 3.8s ease forwards;cursor:pointer}
#prut .stage{position:relative;width:min(94vw,380px);height:320px}
#prut .uni{position:absolute;left:0;bottom:20px;width:150px;height:auto;transform-origin:50% 100%;overflow:visible;
  animation:uhop 3.8s ease forwards;filter:drop-shadow(0 8px 14px rgba(140,80,200,.35))}
#prut .tail{transform-origin:128px 66px;animation:tail 3.8s ease forwards}
#prut .cloud{position:absolute;left:118px;bottom:58px;right:0;height:200px;transform-origin:0% 100%;
  animation:cgrow 3.8s cubic-bezier(.2,1.4,.4,1) forwards;opacity:0}
#prut .pf{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#eafff5 45%,#c9f3df);
  box-shadow:0 0 0 3px rgba(255,255,255,.75),0 8px 20px -8px rgba(120,180,150,.6)}
#prut .p1{left:0;bottom:0;width:26%;height:24%}
#prut .p2{left:10%;top:20%;width:50%;height:58%}
#prut .p3{left:40%;top:2%;width:52%;height:58%}
#prut .p4{left:58%;top:36%;width:42%;height:50%}
#prut .p5{left:22%;top:42%;width:54%;height:48%}
#prut .p6{left:4%;top:44%;width:30%;height:34%}
#prut .txt{position:absolute;left:14%;right:4%;top:18%;bottom:16%;display:grid;place-items:center;text-align:center;
  font-weight:700;font-size:1.3rem;line-height:1.25;color:#b0498f;opacity:0;animation:tpop 3.8s ease forwards}
#prut .trail{position:absolute;border-radius:50%;background:#dff8ec;box-shadow:0 0 0 2px #fff;opacity:0;animation:trail 3.8s ease forwards}
#prut .t1{left:126px;bottom:66px;width:14px;height:14px}
#prut .t2{left:112px;bottom:52px;width:9px;height:9px;animation-delay:.08s}
@keyframes pfade{0%{opacity:0}5%{opacity:1}90%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes uhop{0%{transform:translateY(60px) scale(.5);opacity:0}10%{transform:none;opacity:1}
  18%{transform:translateY(-16px)}24%{transform:none}
  27%{transform:scaleY(.86) scaleX(1.08)}31%{transform:scaleY(1.08) scaleX(.95) rotate(-5deg)}
  36%{transform:rotate(3deg)}42%,100%{transform:none}}
@keyframes tail{0%,24%{transform:none}29%,46%{transform:rotate(-38deg)}56%,100%{transform:rotate(-8deg)}}
@keyframes trail{0%,28%{opacity:0;transform:scale(.2)}34%{opacity:1;transform:scale(1)}100%{opacity:1}}
@keyframes cgrow{0%,28%{opacity:0;transform:scale(.04)}42%{opacity:1;transform:scale(1.06)}48%{transform:scale(.97)}
  54%,100%{opacity:1;transform:scale(1)}}
@keyframes tpop{0%,42%{opacity:0;transform:scale(.6)}52%{opacity:1;transform:scale(1.1)}58%,100%{opacity:1;transform:scale(1)}}