/* GrossistHub B2B · tema A varm: espresso-glas (1/11 dæmpet efter ejerens ønske: neutral mørk bund, svagere glød, mindre mættet kobber).
   Samme glas-system som design-retning/a-glas, men på sort-brun bund med karamel, kobber og en smule rosé.
   Motorkontrakt: alt UI i #app, alt i rem (PH.fitRem), ingen vw/vh, hover skrives :hover og [data-ph-hover]. */
:root{
  color-scheme:dark;
  --bg:#0a0908;
  --ink:#f8f4ef;
  --ink-2:rgba(246,240,233,.82);
  --ink-3:rgba(232,222,212,.64);
  --ink-4:rgba(232,222,212,.36);
  --caramel:230 170 116;
  --copper:210 142 110;
  --rose:224 184 156;
  --cream:255 222 184;
  --mint:84 240 196;
  --low:255 200 97;
  --out:255 107 107;
  --r-card:26px;
  --r-in:16px;
  --surf:rgba(244,240,235,.045);
  --surf-2:rgba(244,240,235,.08);
  --lift:0 1px 2px rgba(0,0,0,.25),0 10px 24px -14px rgba(0,0,0,.7);
  --ease:cubic-bezier(.22,1,.36,1);
  --spd:1;
  --ph-ripple:rgba(230,170,116,.8);
  --ph-pulse:rgba(230,170,116,.8);
  --ph-frame-bg:#0a0908;
  --paper:#fffaf3;
  --paper-ink:#26221e;
  --paper-ink-2:#6d5646;
  --paper-line:rgba(70,40,20,.1);
}
*{box-sizing:border-box}
html{font-size:10px;background:var(--bg)}
html,body{margin:0;height:100%}
body{overflow:hidden;background:var(--bg)}
#app{position:fixed;inset:0;overflow:hidden;background:var(--bg);color:var(--ink);
  font-family:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:1.4rem;line-height:1.45;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid rgb(var(--caramel));outline-offset:3px}
svg.i{width:1.8rem;height:1.8rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
kbd{display:inline-grid;place-items:center;min-width:2.4rem;font-family:inherit;font-size:1.1rem;font-weight:600;line-height:1;color:var(--ink-2);padding:.45rem .8rem;border-radius:99px;background:rgba(244,240,235,.1)}

/* ---------- Baggrund: bløde farvefelter inde i #app ---------- */
.bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:radial-gradient(120% 90% at 50% -10%,#1a1613 0%,#100e0c 52%,#090807 100%)}
.blob{position:absolute;border-radius:50%;aspect-ratio:1}
.b1{width:64%;left:-17%;top:-52%;background:radial-gradient(circle,rgba(226,162,104,.13),rgba(226,162,104,0) 64%)}
.b2{width:56%;right:-18%;top:-24%;background:radial-gradient(circle,rgba(204,128,96,.10),rgba(204,128,96,0) 64%)}
.b3{width:30%;left:38%;top:-22%;background:radial-gradient(circle,rgba(220,160,150,.03),rgba(220,160,150,0) 64%)}
.b4{width:54%;left:-15%;bottom:-62%;background:radial-gradient(circle,rgba(190,136,88,.11),rgba(190,136,88,0) 64%)}
.b5{width:50%;right:-7%;bottom:-58%;background:radial-gradient(circle,rgba(200,140,130,.03),rgba(200,140,130,0) 64%)}
.noise{position:absolute;inset:0;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ---------- Skal ---------- */
.shell{position:relative;z-index:1;display:grid;grid-template-columns:9rem minmax(0,1fr);gap:1.6rem;height:100%;padding:1.6rem}
.main{display:grid;grid-template-rows:auto minmax(0,1fr);gap:1.6rem;min-width:0;min-height:0}
.views{position:relative;min-width:0;min-height:0}
.view{position:absolute;inset:0;min-width:0;min-height:0}

/* Glas: flade, dybde og en blød lyskant oppe til venstre */
.glass,.card{position:relative;isolation:isolate;border-radius:var(--r-card);
  background:linear-gradient(180deg,rgba(246,241,236,.07) 0%,rgba(246,241,236,.022) 42%,rgba(246,241,236,.012) 100%),rgba(30,26,23,.5);
  -webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(246,242,237,.08),0 2px 6px rgba(0,0,0,.22),0 28px 56px -24px rgba(0,0,0,.78)}
.glass::before,.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(160deg,rgba(244,240,235,.22),rgba(244,240,235,.05) 26%,rgba(244,240,235,0) 52%,rgb(var(--acc,255 255 255) / .14) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
/* Lodret 9:16-optagelse: #app transform-skaleres, så blur slås fra og fladen gøres en anelse tættere */
html.ph-frame .glass,html.ph-frame .card{-webkit-backdrop-filter:none;backdrop-filter:none;
  background:linear-gradient(180deg,rgba(246,241,236,.075) 0%,rgba(246,241,236,.025) 42%,rgba(246,241,236,.014) 100%),rgba(32,28,25,.62)}

/* ---------- Skinne ---------- */
.rail{--acc:var(--caramel);display:flex;flex-direction:column;align-items:center;gap:2.6rem;padding:2rem .9rem 1.6rem;border-radius:30px}
.mark{display:grid;place-items:center;width:5rem;height:5rem;border:0;border-radius:50%;padding:0;flex:none;
  background:radial-gradient(circle at 30% 25%,rgb(var(--caramel) / .42),rgb(var(--copper) / .2) 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 30px -6px rgb(var(--caramel) / .75)}
.mark svg{width:2.9rem;height:2.9rem}
.nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.8rem;width:100%}
.nav{position:relative;display:flex;flex-direction:column;align-items:center;gap:.6rem;width:100%;padding:1.1rem .2rem 1rem;border:0;border-radius:20px;background:none;
  color:var(--ink-3);font-size:1.08rem;font-weight:600;letter-spacing:.005em;text-align:center;transition:color .4s var(--ease),background .4s var(--ease)}
.nav svg.i{width:2.2rem;height:2.2rem;transition:transform .4s var(--ease)}
.nav:hover,.nav[data-ph-hover]{color:var(--ink);background:rgba(244,240,235,.05)}
.nav:hover svg.i,.nav[data-ph-hover] svg.i{transform:translateY(-1px)}
.nav.on{color:var(--ink);background:linear-gradient(180deg,rgb(var(--caramel) / .22),rgb(var(--caramel) / .06));box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 30px -10px rgb(var(--caramel) / .6)}
.nav.on svg.i{color:rgb(var(--caramel));filter:drop-shadow(0 0 6px rgb(var(--caramel) / .8))}
.nav .badge{position:absolute;top:.5rem;right:1.2rem;min-width:1.9rem;height:1.9rem;padding:0 .5rem;border-radius:99px;display:grid;place-items:center;
  font-size:1.05rem;font-weight:700;line-height:1;color:#26221e;background:rgb(var(--caramel));box-shadow:0 0 14px rgb(var(--caramel) / .75)}
.nav .badge:empty{display:none}
.nav .badge.warn{background:rgb(var(--low));box-shadow:0 0 14px rgb(var(--low) / .6)}
.nav .badge.new{right:.6rem;color:#05271d;background:rgb(var(--mint));box-shadow:0 0 14px rgb(var(--mint) / .7);animation:badgeIn .6s var(--ease)}
@keyframes badgeIn{from{transform:scale(.3);opacity:0}}
.rail-keys{margin-top:auto;display:flex;align-items:center;gap:.3rem;font-size:1rem;color:var(--ink-4)}
.rail-keys kbd{min-width:2rem;padding:.35rem .5rem;font-size:1rem}

/* ---------- Topbar ---------- */
.top{display:flex;align-items:center;gap:2rem;min-height:5.6rem;padding:0 .4rem 0 1rem;min-width:0}
.greet{min-width:0;flex:0 0 auto}
.greet h1{margin:0;font-size:2.7rem;font-weight:600;letter-spacing:-.035em;line-height:1.1;white-space:nowrap}
.greet h1 span{background:linear-gradient(90deg,#fff 0%,rgb(var(--cream)) 35%,rgb(var(--caramel)) 70%,rgb(var(--copper)));-webkit-background-clip:text;background-clip:text;color:transparent}
.greet p{display:flex;align-items:center;gap:.9rem;margin:.6rem 0 0;font-size:1.28rem;font-weight:500;color:var(--ink-3);white-space:nowrap;overflow:hidden}
.greet p i{width:.4rem;height:.4rem;border-radius:50%;background:var(--ink-4);flex:none}
.greet p b{font-weight:700;color:var(--ink-2)}
.greet p .clk{color:var(--ink-2);font-weight:600}
.top-r{display:flex;align-items:center;justify-content:flex-end;gap:1.2rem;margin-left:auto;flex:1 1 auto;min-width:0}
.search{display:flex;align-items:center;gap:1rem;flex:0 1 30rem;min-width:18rem;height:4.6rem;padding:0 .7rem 0 1.6rem;border:0;border-radius:99px;
  color:var(--ink-3);font-size:1.3rem;font-weight:500;background:rgba(244,240,235,.06);box-shadow:inset 0 1px 0 rgba(244,240,235,.07),var(--lift);
  transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.search span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search:hover,.search[data-ph-hover]{background:rgba(244,240,235,.09);box-shadow:inset 0 1px 0 rgba(244,240,235,.1),0 0 30px -8px rgb(var(--caramel) / .55)}
.search kbd{margin-left:auto}
.top-new{height:4.6rem;padding:0 .7rem 0 1.6rem}
.top-new kbd{background:rgba(38,34,30,.18);color:#26221e;margin-left:.2rem}
.demo{display:inline-flex;align-items:center;gap:.6rem;height:3rem;padding:0 1.2rem;border-radius:99px;font-size:1.12rem;font-weight:600;color:var(--ink-3);background:rgba(244,240,235,.04);white-space:nowrap}
.demo::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:rgb(var(--caramel) / .85)}
.me{display:flex;align-items:center;gap:1rem;height:4.6rem;padding:0 1.6rem 0 .5rem;border-radius:99px;background:rgba(244,240,235,.05);box-shadow:var(--lift)}
.me-av{display:grid;place-items:center;width:3.6rem;height:3.6rem;border-radius:50%;font-size:1.2rem;font-weight:700;color:#26221e;
  background:linear-gradient(135deg,rgb(var(--cream)),rgb(var(--caramel)) 55%,rgb(var(--copper)));box-shadow:0 0 0 2px #100c08,0 0 0 3.5px rgb(var(--caramel) / .5),0 0 18px rgb(var(--caramel) / .4)}
.me b{display:block;font-size:1.28rem;font-weight:700;line-height:1.2;white-space:nowrap}
.me small{display:block;font-size:1.1rem;font-weight:500;color:var(--ink-3);line-height:1.25;white-space:nowrap}

/* ---------- Kort ---------- */
.card{--acc:var(--caramel);display:flex;flex-direction:column;min-width:0;min-height:0;padding:2.5rem 2.8rem;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.card::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(70% 62% at var(--gx,100%) var(--gy,0%),rgb(var(--acc) / .15),transparent 72%);opacity:.85;transition:opacity .5s var(--ease)}
.card.hov:hover{transform:translateY(-4px);
  box-shadow:inset 0 1px 0 rgba(246,242,237,.12),0 2px 6px rgba(0,0,0,.22),0 40px 70px -28px rgba(0,0,0,.85),0 0 60px -18px rgb(var(--acc) / .6)}
.card.hov:hover::after{opacity:1}
.card.ping{animation:ping 1.2s var(--ease)}
@keyframes ping{0%{box-shadow:0 0 0 0 rgb(var(--acc) / .7)}60%{box-shadow:0 0 0 8px rgb(var(--acc) / 0),0 0 70px -10px rgb(var(--acc) / .7)}100%{box-shadow:0 0 0 0 rgb(var(--acc) / 0)}}

.c-head{display:flex;align-items:center;gap:1.1rem;min-height:3.4rem;flex:none;min-width:0}
.c-ico{display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;flex:none;color:rgb(var(--acc));
  background:radial-gradient(circle at 30% 25%,rgb(var(--acc) / .28),rgb(var(--acc) / .08));box-shadow:0 0 20px -6px rgb(var(--acc) / .7)}
.c-ico svg.i{width:1.7rem;height:1.7rem}
.c-head h2{margin:0;font-size:1.5rem;font-weight:700;color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
.c-head .r{margin-left:auto}
.meta{font-size:1.18rem;font-weight:500;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.link{display:inline-flex;align-items:center;gap:.5rem;padding:0;border:0;background:none;font-size:1.26rem;font-weight:700;color:rgb(var(--acc));border-radius:99px;white-space:nowrap}
.link svg.i{width:1.5rem;height:1.5rem;transition:transform .4s var(--ease)}
.link:hover svg.i,.link[data-ph-hover] svg.i{transform:translateX(3px)}
.c-foot{display:flex;align-items:center;gap:1.2rem;margin-top:1.2rem;flex:none;min-width:0}
.c-foot .sub{flex:1;min-width:0}
.c-foot .btn{margin-left:auto}

.big{display:inline-block;font-size:6.4rem;font-weight:300;letter-spacing:-.055em;line-height:1;white-space:nowrap;
  background:linear-gradient(180deg,#fff 35%,rgb(var(--acc) / .9) 130%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgb(var(--acc) / .3))}
.big .u{font-size:.34em;font-weight:500;letter-spacing:0;margin-left:.35em;-webkit-text-fill-color:var(--ink-3)}
.delta{display:inline-flex;align-items:center;gap:.35rem;height:2.6rem;padding:0 1rem 0 .8rem;border-radius:99px;font-size:1.22rem;font-weight:700;white-space:nowrap;
  color:rgb(var(--mint));background:rgb(var(--mint) / .13)}
.delta.neg{color:rgb(var(--rose));background:rgb(var(--rose) / .14)}
.delta svg.i{width:1.4rem;height:1.4rem;stroke-width:2.2}
.muted{color:var(--ink-3)}
.sub{margin:0;font-size:1.26rem;font-weight:500;color:var(--ink-3)}
.sub b{color:var(--ink-2);font-weight:700}
.sub.small{font-size:1.15rem}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;height:3.6rem;padding:0 1.6rem;border:0;border-radius:99px;white-space:nowrap;flex:none;
  font-size:1.26rem;font-weight:700;color:var(--ink);background:rgba(244,240,235,.08);box-shadow:inset 0 1px 0 rgba(244,240,235,.08);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .4s var(--ease),opacity .4s}
.btn svg.i{width:1.55rem;height:1.55rem;stroke-width:2}
.btn:hover,.btn[data-ph-hover]{background:rgba(244,240,235,.14)}
.btn:active{transform:scale(.97)}
.btn.pri{--acc:var(--caramel);color:#26221e;background:linear-gradient(180deg,rgb(var(--cream)) -40%,rgb(var(--caramel)) 45%,rgb(var(--copper)) 140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 26px -10px rgb(var(--caramel) / .9)}
.btn.pri:hover,.btn.pri[data-ph-hover]{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 12px 32px -8px rgb(var(--caramel))}
.btn.pri kbd{background:rgba(38,34,30,.16);color:#26221e;font-size:1.05rem;padding:.4rem .7rem}
.btn[disabled]{opacity:.38;pointer-events:none;box-shadow:none}
.btn.sm{height:3.1rem;padding:0 1.2rem;font-size:1.18rem}

.av{display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;flex:none;font-size:1.1rem;font-weight:700;color:var(--ink);
  background:radial-gradient(circle at 30% 25%,rgb(var(--acc,var(--caramel)) / .5),rgb(var(--acc,var(--caramel)) / .12))}
.chip{display:inline-flex;align-items:center;gap:.45rem;height:2.4rem;padding:0 .95rem;border-radius:99px;font-size:1.1rem;font-weight:700;white-space:nowrap;flex:none}
.chip::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:currentColor}
.chip.ok{color:rgb(var(--mint));background:rgb(var(--mint) / .12)}
.chip.low{color:rgb(var(--low));background:rgb(var(--low) / .13)}
.chip.out{color:rgb(var(--out));background:rgb(var(--out) / .14)}
.chip.acc{color:rgb(var(--caramel));background:rgb(var(--caramel) / .14)}
.chip.plain{color:var(--ink-2);background:rgba(244,240,235,.08)}
.chip.plain::before{display:none}
.livechip{display:inline-flex;align-items:center;gap:.55rem;font-size:1.12rem;font-weight:700;color:rgb(var(--mint))}
.livechip::before{content:"";width:.7rem;height:.7rem;border-radius:50%;background:rgb(var(--mint));animation:live 2.2s ease-out infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgb(var(--mint) / .6)}80%,100%{box-shadow:0 0 0 .8rem rgb(var(--mint) / 0)}}

/* Produktfoto: cremefarvet "studieflade", fotoets egen baggrund multipliceres ind i den */
.pimg{position:relative;overflow:hidden;flex:none;border-radius:14px;
  background:radial-gradient(120% 95% at 50% 28%,#fff6e8 0%,#f3e4cc 58%,#e0c8a6 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1.4rem 2.4rem -1.6rem rgba(110,60,24,.35),0 10px 22px -12px rgba(0,0,0,.75)}
.pimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.32);mix-blend-mode:multiply}
.pimg svg.i{position:absolute;inset:0;margin:auto;width:46%;height:46%;color:#b4673a;stroke-width:1.25;opacity:.88}
.pimg.round{border-radius:50%}

/* Tooltips i grafer */
.tip{position:absolute;z-index:3;pointer-events:none;padding:.9rem 1.3rem;border-radius:var(--r-in);font-size:1.15rem;font-weight:500;white-space:nowrap;
  background:rgba(28,24,20,.9);box-shadow:inset 0 1px 0 rgba(244,240,235,.12),0 14px 34px -12px rgba(0,0,0,.9);
  opacity:0;transform:translate(-50%,-125%);transition:opacity .3s var(--ease)}
.tip b{display:block;font-size:1.45rem;font-weight:600;color:var(--ink);margin:.1rem 0}
.tip span{color:var(--ink-3)}
.hov-on .tip{opacity:1}
.ax{font-size:1.1rem;font-weight:500;fill:var(--ink-3);font-family:'Sora',sans-serif}
.ax.now{fill:rgb(var(--caramel));font-weight:700}
.ann{font-size:1.12rem;font-weight:600;fill:var(--ink-2);font-family:'Sora',sans-serif}

/* ================= OVERBLIK ================= */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:minmax(0,1.38fr) minmax(0,.74fr) minmax(0,1.04fr);gap:1.6rem;
  grid-template-areas:
   "pred pred pred pred pred rev rev rev ai ai ai ai"
   "flow flow flow flow flow flow flow flow ai ai ai ai"
   "top top top top top low low low low last last last"}

/* Løber tør snart */
.pred{grid-area:pred;--acc:var(--caramel);--gx:0%;--gy:0%;overflow:hidden}
.stmt{margin:1.5rem 0 0;font-size:2.45rem;font-weight:500;letter-spacing:-.035em;line-height:1.22;flex:none;text-wrap:balance}
.stmt b{font-weight:700;background:linear-gradient(180deg,#fff 20%,rgb(var(--cream)) 120%);-webkit-background-clip:text;background-clip:text;color:transparent}
.stmt em{font-style:normal;font-weight:700;background:linear-gradient(90deg,rgb(var(--low)),rgb(var(--caramel)));-webkit-background-clip:text;background-clip:text;color:transparent}
.pred > .sub{margin-top:.8rem;flex:none}
.stock-chart{position:relative;flex:1;min-height:0;margin:.6rem -2.8rem 0}
.stock-chart svg{position:absolute;inset:0;overflow:visible}
.pred .c-foot .sub b{color:rgb(var(--mint))}
.pred.swap .stmt,.pred.swap > .sub,.pred.swap .stock-chart,.pred.swap .c-foot{animation:swapIn .7s var(--ease) backwards}
@keyframes swapIn{from{opacity:0;transform:translateY(.8rem)}}

/* Omsætning */
.rev{grid-area:rev;--acc:var(--copper);--gx:100%;--gy:0%}
.rev-kpi{margin-top:1.8rem;flex:none}
.rev .big{font-size:4.6rem}
.rev .drow{display:flex;align-items:center;gap:.9rem;margin-top:1.2rem;font-size:1.2rem;font-weight:500;flex:none;white-space:nowrap}
.rev > .sub{margin-top:.7rem;flex:none}
.rev-chart{position:relative;flex:1;min-height:0;margin:1.2rem -1rem 0}
.rev-chart svg{position:absolute;inset:0;overflow:visible}
.legend{display:flex;gap:1.6rem;margin-top:.6rem;font-size:1.1rem;font-weight:500;color:var(--ink-3);flex:none}
.legend span{display:inline-flex;align-items:center;gap:.55rem}
.legend i{width:1.6rem;height:.3rem;border-radius:2px}
.legend .l1{background:linear-gradient(90deg,rgb(var(--caramel)),rgb(var(--copper)))}
.legend .l2{background:repeating-linear-gradient(90deg,var(--ink-3) 0 .4rem,transparent .4rem .7rem)}

/* AI-sælger */
.ai{grid-area:ai;--acc:var(--rose);--gx:100%;--gy:0%;
  background:radial-gradient(110% 60% at 100% 0%,rgb(var(--rose) / .16),transparent 62%),radial-gradient(90% 50% at 0% 100%,rgb(var(--caramel) / .1),transparent 60%),
   linear-gradient(180deg,rgba(246,241,236,.065),rgba(246,241,236,.015) 45%),rgba(36,32,28,.5)}
.orb{position:relative;width:3.4rem;height:3.4rem;border-radius:50%;flex:none;
  background:conic-gradient(from 210deg,rgb(var(--caramel)),rgb(var(--rose)),rgb(var(--copper)),rgb(var(--cream)),rgb(var(--caramel)));
  box-shadow:0 0 24px -2px rgb(var(--rose) / .7)}
.orb::after{content:"";position:absolute;inset:.4rem;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.9),rgba(255,255,255,.1) 45%,rgba(32,28,24,.6) 78%)}
.toggle{display:inline-flex;align-items:center;gap:.8rem;margin-left:auto;cursor:pointer;font-size:1.2rem;font-weight:600;color:var(--ink-2);user-select:none;white-space:nowrap}
.toggle input{position:absolute;opacity:0;pointer-events:none}
.toggle .tr{position:relative;width:4rem;height:2.3rem;border-radius:99px;background:rgba(244,240,235,.12);transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.toggle .tr::after{content:"";position:absolute;top:.3rem;left:.3rem;width:1.7rem;height:1.7rem;border-radius:50%;background:#efd9c8;box-shadow:0 2px 6px rgba(0,0,0,.4);transition:transform .45s var(--ease),background .4s}
.toggle input:checked + .tr{background:rgb(var(--rose) / .7);box-shadow:0 0 18px -2px rgb(var(--rose) / .8)}
.toggle input:checked + .tr::after{transform:translateX(1.7rem);background:#fff}
.toggle input:focus-visible + .tr{outline:2px solid rgb(var(--caramel));outline-offset:3px}
.ai-title{margin:1.6rem 0 0;font-size:2.3rem;font-weight:500;letter-spacing:-.035em;line-height:1.15;flex:none}
.ai-title b{font-weight:700;background:linear-gradient(180deg,#fff,rgb(var(--rose)));-webkit-background-clip:text;background-clip:text;color:transparent}
.ai .lead{display:flex;align-items:center;gap:.6rem;margin-top:.8rem;flex:none}
.ai .lead svg.i{width:1.55rem;height:1.55rem;color:rgb(var(--mint))}
.drafts{list-style:none;margin:1.5rem -.6rem 0;padding:0 .6rem .6rem;display:flex;flex-direction:column;gap:.9rem;flex:1;min-height:0;overflow-y:auto;scrollbar-width:none}
.drafts::-webkit-scrollbar{display:none}
.draft{flex:none;position:relative;padding:1.1rem 1.1rem 1.2rem;border-radius:20px;background:rgba(244,240,235,.05);box-shadow:var(--lift);
  transition:background .4s var(--ease),opacity .4s,transform .45s var(--ease)}
.draft:hover{background:rgba(244,240,235,.075)}
.d-head{display:flex;align-items:center;gap:1.1rem}
.d-who{min-width:0;flex:1}
.d-who b{display:block;font-size:1.32rem;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-who small{display:block;font-size:1.12rem;font-weight:500;line-height:1.3;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-who small em{font-style:normal;font-weight:700;color:rgb(var(--low))}
.d-act{display:flex;gap:.6rem;flex:none}
.d-act .btn{height:3rem;padding:0 1.1rem;font-size:1.15rem}
.d-act .btn.pri{--acc:var(--rose);background:linear-gradient(180deg,#ffd9de -30%,rgb(var(--rose)) 60%,rgb(var(--copper)) 160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 24px -10px rgb(var(--rose) / .9);color:#27231f}
.bubble{margin:.8rem 0 0 4.5rem;padding:.7rem 1rem;border-radius:16px 16px 16px 6px;background:linear-gradient(180deg,rgb(var(--rose) / .13),rgb(var(--rose) / .06));overflow:hidden}
.d-lines{display:flex;flex-wrap:nowrap;gap:.9rem;font-size:1.14rem;font-weight:600;color:var(--ink-2)}
.bubble .d-sum[hidden]{display:none}
.d-lines .more{color:var(--ink-3)}
.bubble .d-sum{display:block;margin-top:.45rem;font-size:1.06rem;font-weight:500;color:var(--ink-3);white-space:nowrap}
.d-lines span{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}
.d-lines .pimg{width:2.4rem;height:2.4rem;border-radius:50%;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.d-lines .pimg img{transform:scale(1.6)}
.d-lines .pimg svg.i{width:60%;height:60%}
.d-sum{display:flex;align-items:baseline;gap:.6rem;margin-top:.7rem;font-size:1.12rem;font-weight:500;color:var(--ink-3)}
.d-sum b{margin-left:auto;font-size:1.32rem;font-weight:700;color:var(--ink)}
.sentline{display:none;align-items:center;gap:.5rem;font-size:1.2rem;font-weight:700;color:rgb(var(--mint));white-space:nowrap}
.sentline svg.i{width:1.6rem;height:1.6rem;stroke-width:2.2}
.draft.sent{background:rgb(var(--mint) / .07)}
.draft.sent .bubble{opacity:.55}
.draft.sent .d-act{display:none}
.draft.sent .sentline{display:inline-flex}
.ai.compact .ai-title{font-size:2rem;margin-top:1.3rem}
.ai.compact .drafts{margin-top:1.2rem;gap:.7rem}
.ai.compact .draft{padding:.8rem .9rem .9rem}
.ai.compact .bubble{margin-top:.6rem}
.ai.compact .bubble .d-sum{display:none}
.ai.compact .d-act .btn .t{display:none}
.ai.compact .d-act .btn:not(.pri){width:3rem;padding:0}
.ai.paused .drafts{opacity:.38;filter:saturate(.3);pointer-events:none}
.ai.paused .orb{filter:grayscale(.85);box-shadow:none}
.ai-foot{display:flex;align-items:center;gap:.8rem;margin-top:1.1rem;font-size:1.18rem;font-weight:500;color:var(--ink-3);flex:none;min-width:0}
.ai-foot span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-foot .dotp{width:1.4rem;display:grid;place-items:center;flex:none}
.ai-foot .dotp::before{content:"";width:.8rem;height:.8rem;border-radius:50%;background:rgb(var(--rose));box-shadow:0 0 12px rgb(var(--rose));animation:breathe 1.8s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(.6);opacity:.5}}
.ai.paused .ai-foot .dotp::before{animation:none;background:var(--ink-4);box-shadow:none}

/* Ordrer lige nu (puls) */
.flow{grid-area:flow;--acc:var(--caramel);--gx:60%;--gy:100%;flex-direction:row;gap:1rem}
.flow-l{display:flex;flex-direction:column;align-items:flex-start;width:19rem;flex:none}
.flow-l h2{margin:1.3rem 0 0;font-size:1.5rem;font-weight:700;letter-spacing:-.01em}
.flow-l .sub{margin-top:.4rem;font-size:1.22rem}
.flow-l .sub.small{margin-top:auto;color:var(--ink-4)}
.flow-vis{position:relative;flex:1;min-width:0;min-height:0}
.st{position:absolute;transform:translateX(-50%);text-align:center;white-space:nowrap}
.st-top{top:-.2rem}
.st-top b{display:block;font-size:2.7rem;font-weight:400;letter-spacing:-.04em;line-height:1.05;transition:color 1s var(--ease),text-shadow 1s var(--ease),transform 1s var(--ease)}
.st-top.beat b{color:rgb(var(--c));text-shadow:0 0 22px rgb(var(--c) / .75);transform:scale(1.07);transition-duration:.12s}
.st-top span{display:block;font-size:1.16rem;font-weight:600;color:var(--ink-3);margin-top:.15rem}
.st-top .plus{position:absolute;left:100%;top:0;margin-left:.3rem;font-size:1.1rem;font-weight:700;color:rgb(var(--mint));animation:plusIn 2.4s var(--ease) forwards}
@keyframes plusIn{0%{opacity:0;transform:translateY(.6rem)}15%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}
.st-bot{bottom:-.2rem}
.st-bot b{display:inline-flex;align-items:center;gap:.5rem;font-size:1.26rem;font-weight:600;color:var(--ink-2)}

/* Mest solgt */
.topv{grid-area:top;--acc:var(--cream);--gx:0%;--gy:100%}
.card.topv{flex-direction:column}
.tiles{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem;flex:1;min-height:0}
.tile{display:flex;flex-direction:column;min-height:0;min-width:0;cursor:pointer;border-radius:18px;transition:transform .45s var(--ease)}
.tile:hover,.tile[data-ph-hover]{transform:translateY(-3px)}
.tile .pimg{flex:1;min-height:0;border-radius:18px}
.tile .pimg img{transform:scale(1.12)}
.tile .rank{position:absolute;top:.8rem;left:.8rem;display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;font-size:1.05rem;font-weight:700;color:#5a3218;background:rgba(255,250,242,.8);box-shadow:0 2px 6px rgba(80,40,10,.2)}
.tile b{display:block;margin-top:.9rem;font-size:1.25rem;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .q{display:block;font-size:1.12rem;font-weight:500;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .q strong{display:block;font-weight:700;color:var(--ink-2)}

/* Lavt lager */
.lowc{grid-area:low;--acc:var(--low);--gx:100%;--gy:100%}
.lowlist{list-style:none;margin:1.4rem 0 0;padding:0;display:flex;flex-direction:column;justify-content:space-between;gap:.7rem;flex:1;min-height:0}
.lr-r{display:flex;flex-direction:column;align-items:flex-end;gap:.3rem}
.lr-r small{font-size:1.04rem;font-weight:600;color:var(--ink-3);white-space:nowrap}
.lowc .link{color:rgb(var(--low));font-size:1.18rem}
.lrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1.1rem;padding:.6rem 1.2rem .6rem .6rem;border-radius:18px;background:var(--surf);box-shadow:var(--lift);cursor:pointer;transition:background .4s var(--ease)}
.lrow:hover,.lrow[data-ph-hover]{background:var(--surf-2)}
.lrow .pimg{width:4.4rem;height:4.4rem;border-radius:12px}
.lrow b{display:block;font-size:1.26rem;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow small{display:block;font-size:1.1rem;font-weight:500;color:var(--ink-3);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lvl{position:relative;height:.5rem;margin-top:.5rem;border-radius:99px;background:rgba(244,240,235,.08);overflow:hidden}
.lvl i{position:absolute;left:0;top:0;bottom:0;border-radius:inherit;background:rgb(var(--c));box-shadow:0 0 10px rgb(var(--c) / .6)}
.lvl::after{content:"";position:absolute;top:-.2rem;bottom:-.2rem;left:var(--m,50%);width:2px;background:rgba(244,240,235,.4)}

/* Ordrelister */
.last{grid-area:last;--acc:var(--mint);--gx:100%;--gy:100%}
.olist{list-style:none;margin:1.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:.7rem;flex:1;min-height:0;overflow:hidden}
.orow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;padding:.6rem 1.3rem .6rem .6rem;border-radius:99px;background:var(--surf);box-shadow:var(--lift);flex:none;
  transition:background .4s var(--ease)}
.orow.click{cursor:pointer}
.orow.click:hover,.orow.click[data-ph-hover]{background:var(--surf-2)}
.orow .src{display:grid;place-items:center;width:3.2rem;height:3.2rem;border-radius:50%;color:rgb(var(--c,var(--caramel)));background:rgb(var(--c,var(--caramel)) / .13)}
.orow .src svg.i{width:1.55rem;height:1.55rem}
.orow b{display:block;font-size:1.24rem;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orow small{display:block;font-size:1.08rem;font-weight:500;color:var(--ink-3);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orow .amt{text-align:right;font-size:1.24rem;font-weight:700;white-space:nowrap}
.orow .amt small{font-weight:500}
.orow.fresh{background:linear-gradient(90deg,rgb(var(--mint) / .16),rgb(var(--mint) / .05));box-shadow:0 0 0 1px rgb(var(--mint) / .35),0 0 30px -8px rgb(var(--mint) / .6);animation:rowIn .6s var(--ease) backwards}
@keyframes rowIn{from{opacity:0;transform:translateY(-.8rem) scale(.98)}}
.olist.roomy .orow{border-radius:20px;padding:.9rem 1.4rem .9rem .9rem}
.olist.roomy .orow .src{width:3.8rem;height:3.8rem}
.empty{padding:1.6rem;text-align:center;font-size:1.22rem;color:var(--ink-3)}

/* ================= KUNDER ================= */
.kunder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr) minmax(0,.86fr);grid-template-rows:auto minmax(0,1fr) auto;gap:1.6rem;
  grid-template-areas:"list head head" "list use std" "list use hist"}
.clist{grid-area:list;--acc:var(--caramel);--gx:0%;--gy:0%}
.field{display:flex;align-items:center;gap:1rem;height:4.4rem;padding:0 .7rem 0 1.5rem;border-radius:99px;background:rgba(244,240,235,.06);box-shadow:inset 0 1px 0 rgba(244,240,235,.06);flex:none;
  color:var(--ink-3);transition:box-shadow .3s var(--ease),background .3s var(--ease)}
.field:focus-within{background:rgba(244,240,235,.09);box-shadow:inset 0 0 0 1.5px rgb(var(--caramel) / .7),0 0 26px -8px rgb(var(--caramel) / .7)}
.field input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:1.36rem;font-weight:500;color:var(--ink)}
.field input::placeholder{color:var(--ink-3)}
.clist .field{margin-top:1.6rem}
.seg{display:flex;gap:.5rem;padding:.4rem;border-radius:99px;background:rgba(244,240,235,.05);flex:none;width:max-content;max-width:100%}
.seg button{display:inline-flex;align-items:center;gap:.6rem;height:3.2rem;padding:0 1.3rem;border:0;border-radius:99px;background:none;font-size:1.18rem;font-weight:600;color:var(--ink-3);white-space:nowrap;transition:background .3s var(--ease),color .3s}
.seg button:hover,.seg button[data-ph-hover]{color:var(--ink)}
.seg button[aria-pressed="true"]{color:var(--ink);background:rgba(244,240,235,.12);box-shadow:inset 0 1px 0 rgba(244,240,235,.1)}
.seg button i{font-style:normal;font-weight:700;color:rgb(var(--caramel))}
.clist .seg{margin-top:1.2rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;flex:none}
.chips button{height:2.8rem;padding:0 1.1rem;border:0;border-radius:99px;background:rgba(244,240,235,.04);font-size:1.12rem;font-weight:600;color:var(--ink-3);transition:background .3s,color .3s}
.chips button:hover,.chips button[data-ph-hover]{color:var(--ink);background:rgba(244,240,235,.08)}
.chips button[aria-pressed="true"]{color:#26221e;background:rgb(var(--caramel))}
.crows{list-style:none;margin:1.3rem -.6rem 0;padding:.2rem .6rem .6rem;display:flex;flex-direction:column;gap:.6rem;flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(244,240,235,.14) transparent}
.crow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;padding:.6rem 1.2rem .6rem .6rem;border-radius:99px;background:var(--surf);cursor:pointer;flex:none;transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.crow:hover,.crow[data-ph-hover]{background:var(--surf-2)}
.crow[aria-selected="true"]{background:linear-gradient(90deg,rgb(var(--caramel) / .2),rgb(var(--caramel) / .07));box-shadow:inset 0 0 0 1px rgb(var(--caramel) / .35)}
.crow b{display:block;font-size:1.26rem;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow small{display:block;font-size:1.08rem;font-weight:500;color:var(--ink-3);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow .r{display:flex;align-items:center;gap:.6rem}

.khead{grid-area:head;--acc:var(--caramel);--gx:100%;--gy:0%;flex-direction:row;align-items:center;gap:2rem}
.kh-av{width:6.4rem;height:6.4rem;font-size:2rem;box-shadow:0 0 30px -8px rgb(var(--caramel) / .8)}
.kh-main{min-width:0;flex:1}
.kh-main h2{margin:0;font-size:2.6rem;font-weight:600;letter-spacing:-.035em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kh-main p{margin:.5rem 0 0;font-size:1.24rem;font-weight:500;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kh-tags{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.kh-credit{width:17rem;flex:none}
.kh-credit .k{font-size:1.12rem;font-weight:600;color:var(--ink-3)}
.kh-credit .v{display:block;margin-top:.3rem;font-size:1.5rem;font-weight:600;white-space:nowrap}
.kh-credit .v small{font-size:1.1rem;font-weight:500;color:var(--ink-3)}
.kh-credit .lvl{height:.6rem;margin-top:.8rem}
.kh-act{display:flex;flex-direction:column;gap:.7rem;flex:none}
.kuse{grid-area:use;--acc:var(--copper);--gx:0%;--gy:100%}
.use-kpi{display:flex;align-items:baseline;gap:1rem;margin-top:1.6rem;flex:none;flex-wrap:wrap}
.use-kpi .big{font-size:5.2rem}
.use-chart{position:relative;flex:1;min-height:0;margin:1rem -2.8rem 0}
.use-chart svg{position:absolute;inset:0;overflow:visible}
.gauge{flex:none;margin-top:1.2rem;padding:1.3rem 1.5rem;border-radius:18px;background:var(--surf)}
.gauge .gt{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .8rem;font-size:1.24rem;font-weight:600}
.gauge .gt b{font-size:2rem;font-weight:500;letter-spacing:-.03em}
.gauge .gt span{margin-left:auto;font-size:1.12rem;font-weight:500;color:var(--ink-3)}
.gauge .lvl{height:.8rem;margin-top:.9rem}
.kstd{grid-area:std;--acc:var(--cream);--gx:100%;--gy:0%}
.stdlist{list-style:none;margin:1.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:.6rem;flex:1;min-height:0;overflow:hidden}
.stdrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;padding:.5rem 1.2rem .5rem .5rem;border-radius:16px;background:var(--surf);flex:none}
.stdrow .pimg{width:3.8rem;height:3.8rem;border-radius:11px}
.stdrow b{display:block;font-size:1.22rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stdrow small{display:block;font-size:1.08rem;font-weight:500;color:var(--ink-3);white-space:nowrap}
.stdrow .amt{font-size:1.22rem;font-weight:700;text-align:right;white-space:nowrap}
.kstd .c-foot{justify-content:space-between}
.kstd .c-foot .tot{font-size:1.2rem;font-weight:500;color:var(--ink-3)}
.kstd .c-foot .tot b{font-size:1.5rem;font-weight:700;color:var(--ink)}
.khist{grid-area:hist;--acc:var(--mint);--gx:100%;--gy:100%;max-height:34rem}
.khist .olist{flex:none}

/* ================= LYN-ORDRE ================= */
.lyn{display:grid;grid-template-columns:minmax(0,.58fr) minmax(0,1.12fr) minmax(0,.9fr);gap:1.6rem}
.lo-side{display:flex;flex-direction:column;gap:1.6rem;min-height:0;min-width:0}
.lo-cust{--acc:var(--caramel);--gx:0%;--gy:0%;flex:1}
.lo-cust .who{display:flex;align-items:center;gap:1.2rem;margin-top:1.6rem}
.lo-cust .who .av{width:5.2rem;height:5.2rem;font-size:1.6rem}
.lo-cust .who b{display:block;font-size:1.9rem;font-weight:600;letter-spacing:-.03em;line-height:1.2}
.lo-cust .who small{display:block;font-size:1.14rem;font-weight:500;color:var(--ink-3)}
.kv{list-style:none;margin:1.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:.9rem;flex:none}
.kv li{display:flex;align-items:baseline;gap:1rem;font-size:1.2rem}
.kv li span{color:var(--ink-3);font-weight:500;flex:none}
.kv li b{margin-left:auto;font-weight:600;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kv li b.ok{color:rgb(var(--mint))}
.kv li b.warn{color:rgb(var(--low))}
.lo-cust .lvl{height:.5rem;margin-top:.6rem}
.lo-cust .gauge{margin-top:1.6rem}
.lo-cust .norm{margin-top:1.1rem;line-height:1.5}
.lo-cust .note{margin-top:auto;padding:1.2rem 1.3rem;border-radius:16px;background:rgb(var(--caramel) / .09);font-size:1.18rem;font-weight:500;color:var(--ink-2);line-height:1.45}
.lo-cust .note b{color:rgb(var(--caramel))}
.lo-cust .note.out{background:rgb(var(--out) / .1)}
.lo-cust .note.out b{color:rgb(var(--out))}
.picks{list-style:none;margin:1.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.picks li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;padding:.6rem 1.2rem .6rem .6rem;border-radius:99px;background:var(--surf);cursor:pointer;transition:background .3s}
.picks li:hover,.picks li[data-ph-hover]{background:var(--surf-2)}
.picks b{display:block;font-size:1.22rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.picks small{display:block;font-size:1.06rem;color:var(--ink-3);white-space:nowrap}
.lo-keys{--acc:var(--cream);flex:none;padding:2.2rem 2.4rem}
.keysteps{list-style:none;margin:1.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.75rem}
.keysteps li{display:flex;align-items:center;gap:.6rem;font-size:1.16rem;font-weight:500;color:var(--ink-3)}
.keysteps li > kbd:first-child{min-width:4.4rem}
.keysteps li span{margin-left:.4rem}
.keysteps kbd{font-size:1.05rem}

.lo-builder{--acc:var(--caramel);--gx:30%;--gy:0%;padding:2.4rem 2.4rem 2.2rem}
.lo-builder .c-head h2{font-size:1.6rem}
.lo-lines{position:relative;flex:1;min-height:0;margin:1.4rem -.6rem 0;padding:.2rem .6rem;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:.8rem}
.lo-lines::-webkit-scrollbar{display:none}
.line{position:relative;display:grid;grid-template-columns:5.4rem minmax(0,1fr) 8.6rem 9.8rem 2.4rem;align-items:center;gap:1.1rem;padding:.8rem .8rem .8rem .8rem;border-radius:20px;background:var(--surf);box-shadow:var(--lift);flex:none;
  transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.line.enter{animation:lineIn .5s var(--ease) backwards}
@keyframes lineIn{from{opacity:0;transform:translateY(.8rem) scale(.98)}}
.line:focus-within{background:var(--surf-2);box-shadow:inset 0 0 0 1px rgb(var(--caramel) / .35),var(--lift)}
.line .pimg{width:5.4rem;height:5.4rem;border-radius:14px}
.l-name{min-width:0}
.l-name b{display:block;font-size:1.4rem;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l-name small{display:flex;align-items:center;gap:.5rem;font-size:1.08rem;font-weight:500;color:var(--ink-3);white-space:nowrap;overflow:hidden}
.l-name small i{width:.55rem;height:.55rem;border-radius:50%;background:rgb(var(--c));flex:none}
.ladder{display:flex;gap:.35rem;margin-top:.55rem}
.ladder span{display:inline-flex;align-items:center;height:2.2rem;padding:0 .75rem;border-radius:99px;font-size:1.02rem;font-weight:600;color:var(--ink-3);background:rgba(244,240,235,.05);white-space:nowrap;transition:background .35s var(--ease),color .35s,box-shadow .35s}
.ladder span.on{color:#26221e;background:rgb(var(--caramel));box-shadow:0 0 16px -2px rgb(var(--caramel) / .8)}
.ladder span.pop{animation:pop .7s var(--ease)}
@keyframes pop{0%{transform:scale(1)}30%{transform:scale(1.18)}100%{transform:scale(1)}}
.l-qty{display:flex;align-items:center;gap:.5rem;height:4.4rem;padding:0 1.1rem 0 .4rem;border-radius:99px;background:rgba(0,0,0,.22);box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.l-qty:focus-within{box-shadow:inset 0 0 0 1.5px rgb(var(--caramel)),0 0 22px -6px rgb(var(--caramel) / .8)}
.l-qty input{width:100%;min-width:0;border:0;outline:0;background:none;text-align:right;font-size:1.9rem;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.l-qty span{font-size:1.1rem;font-weight:600;color:var(--ink-3)}
.l-qty.err{box-shadow:inset 0 0 0 1.5px rgb(var(--out))}
.l-amt{text-align:right;min-width:0}
.l-amt b{display:block;font-size:1.62rem;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.l-amt small{display:block;font-size:1.06rem;font-weight:500;color:var(--ink-3);white-space:nowrap}
.l-amt small.save{font-weight:700;color:rgb(var(--mint));animation:saveIn .6s var(--ease)}
@keyframes saveIn{from{opacity:0;transform:translateY(.4rem)}}
.l-amt.flash b{animation:amtFlash .8s var(--ease)}
@keyframes amtFlash{0%{color:rgb(var(--caramel));text-shadow:0 0 18px rgb(var(--caramel) / .8)}100%{color:var(--ink)}}
.l-del{display:grid;place-items:center;width:2.6rem;height:2.6rem;border:0;border-radius:50%;background:none;color:var(--ink-4);transition:background .3s,color .3s}
.l-del:hover,.l-del[data-ph-hover]{background:rgb(var(--out) / .14);color:rgb(var(--out))}
.l-del svg.i{width:1.4rem;height:1.4rem}
.spar{position:absolute;right:16.2rem;top:-1rem;display:inline-flex;align-items:center;gap:.4rem;height:2.4rem;padding:0 1rem;border-radius:99px;font-size:1.08rem;font-weight:700;white-space:nowrap;
  color:#05271d;background:rgb(var(--mint));box-shadow:0 0 20px -2px rgb(var(--mint) / .8);animation:sparIn 3.2s var(--ease) forwards;pointer-events:none}
.spar svg.i{width:1.3rem;height:1.3rem;stroke-width:2.4}
@keyframes sparIn{0%{opacity:0;transform:translateY(.6rem) scale(.9)}10%{opacity:1;transform:none}85%{opacity:1}100%{opacity:0}}
.lo-empty{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1.2rem;flex:1;padding:1rem 1.2rem}
.lo-empty h3{margin:0;font-size:2.8rem;font-weight:500;letter-spacing:-.04em;line-height:1.15}
.lo-empty h3 b{font-weight:700;background:linear-gradient(90deg,#fff,rgb(var(--caramel)));-webkit-background-clip:text;background-clip:text;color:transparent}
.lo-empty p{margin:0;font-size:1.3rem;color:var(--ink-3);max-width:44rem}
.lo-empty .keyrow{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:.6rem;font-size:1.18rem;color:var(--ink-3)}
.lo-add{position:relative;flex:none;margin-top:1rem}
.field.add{height:4.8rem;background:rgba(0,0,0,.2);box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}
.field.add svg.i{color:rgb(var(--caramel))}
.field.add input:disabled{opacity:.6}
.sugg{position:absolute;left:0;right:0;bottom:calc(100% + .6rem);z-index:20;list-style:none;margin:0;padding:.7rem;border-radius:22px;
  background:linear-gradient(180deg,rgba(246,241,236,.1),rgba(246,241,236,.04)),rgba(30,26,22,.94);
  box-shadow:inset 0 1px 0 rgba(244,240,235,.14),0 30px 60px -20px rgba(0,0,0,.9),0 0 0 1px rgba(244,240,235,.06);animation:suggIn .3s var(--ease)}
@keyframes suggIn{from{opacity:0;transform:translateY(.6rem)}}
.sugg li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:1rem;padding:.5rem 1.2rem .5rem .5rem;border-radius:16px;cursor:pointer}
.sugg li[aria-selected="true"],.sugg li:hover,.sugg li[data-ph-hover]{background:rgb(var(--caramel) / .14)}
.sugg .pimg{width:3.8rem;height:3.8rem;border-radius:11px}
.sugg b{display:block;font-size:1.28rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sugg small{display:block;font-size:1.06rem;color:var(--ink-3);white-space:nowrap}
.sugg .p{font-size:1.18rem;font-weight:600;color:var(--ink-2);white-space:nowrap}
.sugg .none{display:block;padding:1rem;text-align:center;color:var(--ink-3);cursor:default}
.lo-foot{display:flex;align-items:center;gap:1.4rem;margin-top:1.4rem;flex:none;min-width:0}
.lo-foot .sum{min-width:0;flex:1}
.lo-foot .sum small{display:block;font-size:1.12rem;font-weight:500;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lo-foot .sum b{display:block;font-size:2.4rem;font-weight:400;letter-spacing:-.04em;line-height:1.15;white-space:nowrap}
.lo-foot .sum b span{font-size:1.2rem;font-weight:500;letter-spacing:0;color:var(--ink-3);margin-left:.4rem}
.lo-foot .why{font-size:1.14rem;font-weight:600;color:var(--ink-3);text-align:right;max-width:20rem}
.lo-foot .why.err{color:rgb(var(--out))}
.lo-foot .why.ok{color:rgb(var(--mint))}
.lo-foot .btn.pri{height:4.6rem;padding:0 1rem 0 2rem;font-size:1.36rem}

/* Faktura: lyst papirark i en glasramme */
.paper-wrap{position:relative;display:flex;flex-direction:column;min-height:0;min-width:0;padding:1.2rem;border-radius:30px;
  background:linear-gradient(180deg,rgba(246,241,236,.08),rgba(246,241,236,.02)),rgba(30,26,23,.4);
  box-shadow:inset 0 1px 0 rgba(246,242,237,.1),0 30px 60px -26px rgba(0,0,0,.85)}
.paper{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:2.8rem 3rem 2.4rem;border-radius:22px;
  color:var(--paper-ink);background:radial-gradient(120% 60% at 100% 0%,#fff6ea 0%,rgba(255,246,234,0) 60%),linear-gradient(180deg,#fffbf6,#f8efe3);
  box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(56,52,48,.2),0 0 70px -24px rgb(var(--caramel) / .55)}
.p-top{display:flex;align-items:flex-start;gap:1.4rem;flex:none}
.p-logo{display:grid;place-items:center;width:4.2rem;height:4.2rem;border-radius:50%;flex:none;background:radial-gradient(circle at 30% 25%,#ffd7a8,#e38a55 75%);box-shadow:0 6px 14px -6px rgba(160,70,20,.6)}
.p-logo svg{width:2.4rem;height:2.4rem}
.p-brand{min-width:0}
.p-brand b{display:block;font-size:1.45rem;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.p-brand small{display:block;font-size:1.06rem;color:var(--paper-ink-2);line-height:1.45}
.p-doc{margin-left:auto;text-align:right}
.p-doc b{display:block;font-size:1.2rem;font-weight:600;color:var(--paper-ink-2)}
.p-doc .no{display:block;margin-top:.2rem;font-size:1.9rem;font-weight:600;letter-spacing:-.02em}
.stamp{display:inline-flex;align-items:center;gap:.4rem;margin-top:.6rem;height:2.5rem;padding:0 1rem;border-radius:99px;font-size:1.08rem;font-weight:700;white-space:nowrap;
  color:#a2552a;box-shadow:inset 0 0 0 1.5px rgba(176,92,44,.5)}
.stamp.sent{color:#fff;background:linear-gradient(180deg,#2fbf8f,#16936b);box-shadow:0 6px 16px -6px rgba(16,120,86,.7);animation:stamp .55s cubic-bezier(.2,1.6,.4,1) backwards}
.stamp.last{color:var(--paper-ink-2);box-shadow:inset 0 0 0 1.5px rgba(70,40,20,.2)}
@keyframes stamp{from{transform:scale(1.8) rotate(-8deg);opacity:0}}
.p-meta{display:grid;grid-template-columns:1.25fr 1fr;gap:1.6rem;margin-top:2.2rem;padding:1.4rem 1.6rem;border-radius:16px;background:rgba(120,70,30,.06);flex:none}
.p-meta .k{display:block;font-size:1.02rem;font-weight:600;color:var(--paper-ink-2)}
.p-meta .v{display:block;margin-top:.2rem;font-size:1.18rem;font-weight:500;line-height:1.45}
.p-meta .v b{font-weight:700}
.p-meta .v + .k{margin-top:.8rem}
.p-tbl{width:100%;margin-top:1.8rem;border-collapse:collapse;font-size:1.2rem;flex:none}
.p-tbl th{padding:0 0 .8rem;font-size:1.02rem;font-weight:600;color:var(--paper-ink-2);text-align:left;border-bottom:1.5px solid var(--paper-line)}
.p-tbl td{padding:1rem 0;border-bottom:1px solid var(--paper-line);vertical-align:top}
.p-tbl td b{display:block;font-weight:700;font-size:1.24rem}
.p-tbl td small{display:block;font-size:1.02rem;color:var(--paper-ink-2)}
.p-tbl .r{text-align:right;white-space:nowrap;padding-left:1rem}
.p-tbl tr.enter td{animation:pIn .45s var(--ease) backwards}
@keyframes pIn{from{opacity:0;transform:translateY(.5rem)}}
.p-tbl .fl{animation:pFlash .9s var(--ease)}
@keyframes pFlash{0%{background:rgba(244,162,89,.38)}100%{background:rgba(244,162,89,0)}}
.p-empty{margin-top:1.8rem;padding:2.4rem;border-radius:16px;text-align:center;font-size:1.2rem;color:var(--paper-ink-2);background:rgba(120,70,30,.05)}
.p-sum{margin-top:auto;padding-top:1.6rem;display:flex;flex-direction:column;gap:.5rem;flex:none}
.p-sum div{display:flex;justify-content:space-between;font-size:1.22rem;color:var(--paper-ink-2)}
.p-sum div span:last-child{color:var(--paper-ink);font-weight:600}
.p-sum .tot{margin-top:.6rem;padding-top:1.2rem;border-top:1.5px solid var(--paper-line);align-items:baseline}
.p-sum .tot span:first-child{font-size:1.3rem;font-weight:700;color:var(--paper-ink)}
.p-sum .tot span:last-child{font-size:3rem;font-weight:500;letter-spacing:-.04em}
.p-sum .fl{animation:pFlash .9s var(--ease);border-radius:6px}
.p-foot{display:flex;justify-content:space-between;gap:1rem;margin-top:1.4rem;font-size:1.02rem;color:var(--paper-ink-2);line-height:1.45;flex:none}

/* ================= PRODUKTER ================= */
.prod{display:grid;grid-template-rows:auto minmax(0,1fr);gap:1.6rem}
.prod-head{display:flex;align-items:center;gap:2rem;padding:0 .4rem 0 .6rem;min-width:0}
.prod-head h2{margin:0;font-size:2.2rem;font-weight:600;letter-spacing:-.03em}
.prod-head .sub{margin-top:.2rem}
.prod-head .seg{margin-left:auto}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:1.6rem;min-height:0}
.pcard{--acc:var(--caramel);--gx:100%;--gy:0%;flex-direction:row;gap:1.8rem;padding:1.4rem 2rem 1.4rem 1.4rem;cursor:pointer}
.pcard > .pimg{height:100%;aspect-ratio:1;border-radius:18px}
.pcard.anim{animation:cardIn .5s var(--ease) backwards;animation-delay:var(--delay,0s)}
.pc-info{display:flex;flex-direction:column;min-width:0;flex:1;padding:.6rem 0 .2rem}
.pc-info b.n{font-size:1.5rem;font-weight:700;line-height:1.25;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-info small{font-size:1.08rem;font-weight:500;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-stock{display:flex;align-items:baseline;gap:.6rem;margin-top:1.2rem}
.pc-stock .num{font-size:3rem;font-weight:300;letter-spacing:-.05em;line-height:1}
.pc-stock .u{font-size:1.15rem;font-weight:500;color:var(--ink-3)}
.pc-stock .chip{margin-left:auto;align-self:center}
.pc-info .lvl{margin-top:.8rem}
.pc-ny{margin-top:.5rem;font-size:1.06rem;font-weight:600;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard > .pimg img{transform:scale(1.08)}
.pc-tiers{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.pc-tiers li{display:flex;justify-content:space-between;font-size:1.12rem;font-weight:500;color:var(--ink-3)}
.pc-tiers li b{font-weight:700;color:var(--ink-2)}
.pc-foot{display:flex;align-items:center;gap:.8rem;margin-top:.9rem}
.pc-foot .ny{font-size:1.08rem;font-weight:600;color:rgb(var(--low));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pc-foot .btn{margin-left:auto}
.pcard.dim{opacity:.32;filter:saturate(.4)}
.pcard.out-of .pimg img{filter:grayscale(.5)}

/* Skuffe */
.scrim{position:absolute;inset:0;z-index:50;background:rgba(10,5,3,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fade .35s var(--ease)}
@keyframes fade{from{opacity:0}}
.drawer{--acc:var(--caramel);position:absolute;z-index:51;top:1.6rem;right:1.6rem;bottom:1.6rem;width:46rem;display:flex;flex-direction:column;padding:2.4rem 2.6rem;border-radius:30px;
  background:linear-gradient(180deg,rgba(246,241,236,.1),rgba(246,241,236,.03)),rgba(30,26,22,.88);
  transform:translateX(calc(100% + 3rem));transition:transform .55s var(--ease);visibility:hidden}
.drawer.open{transform:none;visibility:visible}
.dr-head{display:flex;align-items:center;gap:1rem}
.dr-head h2{margin:0;font-size:1.5rem;font-weight:700}
.dr-head .x{margin-left:auto;display:grid;place-items:center;width:3.4rem;height:3.4rem;border:0;border-radius:50%;background:rgba(244,240,235,.08);color:var(--ink-2)}
.dr-head .x:hover,.dr-head .x[data-ph-hover]{background:rgba(244,240,235,.16)}
.dr-photo{height:22rem;margin-top:1.6rem;border-radius:22px}
.dr-photo img{object-fit:contain;transform:scale(1.3)}
.dr-title{margin:1.8rem 0 0;font-size:2.4rem;font-weight:600;letter-spacing:-.035em;line-height:1.15}
.dr-sub{margin:.4rem 0 0;font-size:1.2rem;color:var(--ink-3)}
.dr-sec{margin-top:1.8rem}
.dr-sec h3{margin:0 0 .8rem;font-size:1.18rem;font-weight:600;color:var(--ink-3)}
.dr-tiers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.dr-tiers li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:1.4rem;align-items:center;padding:.9rem 1.3rem;border-radius:14px;background:var(--surf);font-size:1.24rem}
.dr-tiers li b{font-weight:700}
.dr-tiers li span{color:var(--ink-3);font-size:1.12rem;white-space:nowrap}
.dr-stats{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.dr-stats div{padding:1.2rem 1.4rem;border-radius:16px;background:var(--surf)}
.dr-stats > div > b{display:block;font-size:2.4rem;font-weight:300;letter-spacing:-.04em;line-height:1.1}
.dr-stats > div > span{display:block;margin-top:.3rem;font-size:1.1rem;color:var(--ink-3)}
.drawer .c-foot{margin-top:auto;padding-top:1.6rem}

/* Palette */
.pal{position:absolute;inset:0;z-index:60;display:grid;justify-items:center;align-items:start;padding-top:10rem;background:rgba(10,5,3,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
html.ph-frame .pal{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,5,3,.7)}
.pal.open{opacity:1;pointer-events:auto}
.pal-box{--acc:var(--caramel);width:60rem;max-width:calc(100% - 3.2rem);padding:1.2rem;border-radius:28px;transform:translateY(-1rem) scale(.98);transition:transform .4s var(--ease);
  background:linear-gradient(180deg,rgba(246,241,236,.09),rgba(246,241,236,.03)),rgba(30,26,22,.9)}
.pal.open .pal-box{transform:none}
.pal-in{display:flex;align-items:center;gap:1rem;height:5.4rem;padding:0 1.2rem 0 1.8rem;border-radius:99px;background:rgba(244,240,235,.07)}
.pal-in svg.i{color:rgb(var(--caramel))}
.pal-in input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:1.6rem;font-weight:500;color:var(--ink)}
.pal-in input::placeholder{color:var(--ink-3)}
.pal-mode{padding:.9rem 1.8rem 0;font-size:1.08rem;font-weight:600;color:rgb(var(--caramel))}
.pal-mode:empty{display:none}
.pal-list{list-style:none;margin:.6rem 0 0;padding:0;max-height:44rem;overflow:auto;scrollbar-width:none}
.pal-grp{padding:1rem 1.8rem .4rem;font-size:1.06rem;font-weight:600;color:var(--ink-4)}
.pal-list li.pi{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1.2rem;padding:.7rem 1.4rem .7rem .7rem;border-radius:99px;cursor:pointer;transition:background .25s var(--ease)}
.pal-list li.pi[aria-selected="true"],.pal-list li.pi:hover,.pal-list li.pi[data-ph-hover]{background:rgb(var(--caramel) / .14)}
.pal-list li.pi.dis{opacity:.42}
.pal-list .ic{display:grid;place-items:center;width:3.6rem;height:3.6rem;border-radius:50%;color:rgb(var(--caramel));background:rgb(var(--caramel) / .12)}
.pal-list .ic svg.i{width:1.6rem;height:1.6rem}
.pal-list .pimg{width:3.6rem;height:3.6rem;border-radius:50%}
.pal-list .pimg img{transform:scale(1.6)}
.pal-list li b{display:block;font-weight:700;font-size:1.34rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-list li small{display:block;font-size:1.12rem;font-weight:500;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-list li small em{font-style:normal;font-weight:700;color:rgb(var(--low))}
.pal-list .kk{display:flex;align-items:center;gap:.6rem;font-size:1.1rem;color:var(--ink-3);white-space:nowrap}
.pal-empty{padding:2rem;text-align:center;color:var(--ink-3)}
.pal-foot{display:flex;gap:1.6rem;padding:1.1rem 1.6rem .4rem;font-size:1.1rem;font-weight:500;color:var(--ink-3)}

/* Toasts nederst til højre */
.toasts{position:absolute;z-index:70;right:2.4rem;bottom:2.4rem;display:flex;flex-direction:column;gap:1rem;pointer-events:none}
.toasts{transition:transform .35s var(--ease)}
.toast{--acc:var(--caramel);display:flex;align-items:center;gap:1.3rem;width:42rem;padding:1.3rem 1.6rem 1.3rem 1.3rem;border-radius:24px;pointer-events:auto;
  background:linear-gradient(180deg,rgba(246,241,236,.1),rgba(246,241,236,.04)),rgba(32,28,24,.9);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:inset 0 1px 0 rgba(244,240,235,.14),0 26px 50px -18px rgba(0,0,0,.9),0 0 44px -14px rgb(var(--acc) / .75);animation:toastIn .55s var(--ease) backwards}
html.ph-frame .toast{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(180deg,rgba(246,241,236,.1),rgba(246,241,236,.04)),rgba(32,28,24,.97)}
.toast.out{transition:opacity .45s var(--ease),transform .45s var(--ease);opacity:0;transform:translateY(1.2rem) scale(.98)}
@keyframes toastIn{from{opacity:0;transform:translateY(1.6rem) scale(.97)}}
.toast .ti{display:grid;place-items:center;width:4rem;height:4rem;border-radius:50%;flex:none;color:#26221e;
  background:linear-gradient(135deg,rgb(var(--cream)),rgb(var(--acc)));box-shadow:0 0 22px -4px rgb(var(--acc) / .9)}
.toast .ti svg.i{width:2rem;height:2rem;stroke-width:2}
.toast div{min-width:0}
.toast b{display:block;font-size:1.32rem;font-weight:700}
.toast span{display:block;font-size:1.18rem;font-weight:500;color:var(--ink-3)}
.toast time{margin-left:auto;align-self:flex-start;font-size:1.06rem;font-weight:600;color:var(--ink-3);white-space:nowrap}

/* ================= KUNDENS APP ================= */
.appv{display:grid;grid-template-columns:minmax(0,1fr) 46rem minmax(0,1.12fr);gap:1.6rem}
.steps{--acc:var(--caramel);--gx:0%;--gy:0%}
.steps-lead{margin-top:1.4rem}
.stepl{list-style:none;margin:2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.4rem;position:relative;flex:none}
.stepl::before{content:"";position:absolute;left:1.7rem;top:2rem;bottom:2rem;width:2px;border-radius:2px;background:rgba(244,240,235,.1)}
.stepl li{position:relative;display:flex;align-items:flex-start;gap:1.4rem;padding:1.1rem .8rem;border-radius:18px;transition:background .5s var(--ease)}
.stepl li i{position:relative;z-index:1;display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;flex:none;background:#26221e;box-shadow:inset 0 0 0 2px rgba(244,240,235,.14);transition:all .5s var(--ease)}
.stepl li i::after{content:"";width:.9rem;height:.9rem;border-radius:50%;background:var(--ink-4);transition:all .5s var(--ease)}
.stepl li b{display:block;font-size:1.4rem;font-weight:700;color:var(--ink-3);transition:color .5s}
.stepl li span{display:block;margin-top:.2rem;font-size:1.15rem;color:var(--ink-4);transition:color .5s}
.stepl li.done i{background:rgb(var(--mint) / .18);box-shadow:inset 0 0 0 2px rgb(var(--mint) / .6)}
.stepl li.done i::after{background:rgb(var(--mint));box-shadow:0 0 10px rgb(var(--mint))}
.stepl li.done b{color:var(--ink)}
.stepl li.done span{color:var(--ink-3)}
.stepl li.cur{background:rgb(var(--caramel) / .1)}
.stepl li.cur i{background:rgb(var(--caramel) / .2);box-shadow:inset 0 0 0 2px rgb(var(--caramel)),0 0 18px -2px rgb(var(--caramel) / .8)}
.stepl li.cur i::after{background:rgb(var(--caramel))}
.stepl li.cur b{color:var(--ink)}
.stepl li.cur span{color:var(--ink-2)}
.steps .btn{align-self:flex-start;margin-top:1.4rem}
.app-stat{margin-top:auto;padding:1.8rem 2rem;border-radius:20px;background:var(--surf)}
.app-stat .big{font-size:5.2rem}
.app-stat .sub{margin-top:.6rem}
.phone-stage{position:relative;display:grid;place-items:center;min-height:0;min-width:0}
.phone-stage::before{content:"";position:absolute;inset:8% 4%;border-radius:50%;background:radial-gradient(closest-side,rgb(var(--caramel) / .3),rgb(var(--copper) / .12) 55%,transparent);filter:blur(10px)}
.phone{position:relative;width:41.6rem;height:87rem;flex:none;padding:1.3rem;border-radius:6.4rem;transform:scale(var(--ps,1));
  background:linear-gradient(145deg,#36322e,#120b08 40%,#201c18);box-shadow:inset 0 0 0 1.5px rgba(244,240,235,.18),inset 0 0 0 .6rem #0c0705,0 40px 80px -30px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.6)}
.island{position:absolute;z-index:5;top:2.4rem;left:50%;width:12.4rem;height:3.6rem;margin-left:-6.2rem;border-radius:99px;background:#050302}
.screen{position:relative;width:39rem;height:84.4rem;border-radius:5.2rem;overflow:hidden;background:#fbf4ea;color:#26221e;display:flex;flex-direction:column}

.ph-status{display:flex;justify-content:space-between;align-items:center;height:5.4rem;padding:1.6rem 3.4rem 0;font-size:1.5rem;font-weight:600;flex:none}
.ph-status .ic{display:flex;gap:.6rem;align-items:center}
.ph-status .ic i{display:block;width:2.4rem;height:1.15rem;border-radius:.35rem;box-shadow:inset 0 0 0 1.5px #26221e;position:relative}
.ph-status .ic i::after{content:"";position:absolute;inset:.25rem;right:.6rem;border-radius:.15rem;background:#26221e}
.ph-status .ic s{display:block;width:1.7rem;height:1.1rem;background:linear-gradient(90deg,#26221e 0 18%,transparent 18% 27%,#26221e 27% 45%,transparent 45% 54%,#26221e 54% 72%,transparent 72% 81%,#26221e 81%);clip-path:polygon(0 100%,100% 0,100% 100%)}
.ph-scroll{position:relative;flex:1;min-height:0;overflow:hidden;padding:1rem 2rem 2rem;display:flex;flex-direction:column}
.ph-brand{display:flex;align-items:center;gap:.8rem;font-size:1.3rem;font-weight:700;color:#8a5a3a}
.ph-brand i{display:grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:50%;background:radial-gradient(circle at 30% 25%,#ffd7a8,#e38a55 75%)}
.ph-brand i svg{width:1.6rem;height:1.6rem}
.ph-brand span{margin-left:auto;display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;background:#f0e2d0;font-size:1.15rem;color:#6d4a33}
.ph-hi{margin:1.8rem 0 0;font-size:1.4rem;font-weight:500;color:#8b7262}
.ph-name{margin:.2rem 0 0;font-size:2.8rem;font-weight:700;letter-spacing:-.04em;line-height:1.1}
.ph-card{margin-top:1.8rem;padding:1.6rem 1.6rem 1.4rem;border-radius:2.4rem;background:#fff;box-shadow:0 1px 2px rgba(80,40,10,.06),0 14px 30px -18px rgba(120,60,20,.35)}
.ph-card h4{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 1rem;font-size:1.6rem;font-weight:700;letter-spacing:-.02em}
.ph-card h4 span{font-size:1.2rem;font-weight:500;color:#9b8070}
.ph-line{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1.1rem;padding:.7rem 0;border-top:1px solid #f1e6d8}
.ph-line:first-of-type{border-top:0}
.ph-line .pimg{width:5rem;height:5rem;border-radius:1.4rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.ph-line b{display:block;font-size:1.4rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-line small{display:block;font-size:1.2rem;color:#9b8070}
.ph-line .a{font-size:1.4rem;font-weight:600;white-space:nowrap}
.ph-sum{margin-top:.8rem;padding-top:1rem;border-top:1px dashed #e8d8c4;display:flex;flex-direction:column;gap:.3rem}
.ph-sum div{display:flex;justify-content:space-between;font-size:1.25rem;color:#8b7262}
.ph-sum .tot{margin-top:.3rem;font-size:1.6rem;font-weight:700;color:#26221e}
.ph-note{margin:1.2rem .4rem 0;font-size:1.2rem;line-height:1.45;color:#8b7262}
.ph-note b{color:#26221e}
.ph-note.out{color:#b5503c}
.ph-cta{margin-top:auto;padding-top:1.4rem}
.pbtn{display:flex;align-items:center;justify-content:center;gap:.8rem;width:100%;height:5.6rem;border:0;border-radius:99px;font-size:1.7rem;font-weight:700;color:#26221e;
  background:linear-gradient(180deg,#ffd29e -20%,#f4a259 55%,#e07a4f 150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 14px 26px -12px rgba(200,90,30,.7);transition:transform .3s var(--ease),opacity .3s}
.pbtn:active{transform:scale(.97)}
.pbtn[disabled]{opacity:.4;pointer-events:none;box-shadow:none}
.pbtn.ghost{background:#f0e2d0;color:#6d4a33;box-shadow:none}
.pbtn svg.i{width:2rem;height:2rem;stroke-width:2.2}
.pbtn:hover,.pbtn[data-ph-hover]{filter:brightness(1.04)}
.ph-sheet{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:1.2rem 2rem 3rem;border-radius:3rem 3rem 0 0;background:#fff;box-shadow:0 -20px 50px -20px rgba(80,40,10,.45);animation:sheetIn .5s var(--ease)}
@keyframes sheetIn{from{transform:translateY(100%)}}
.ph-sheet.still,.ph-scrim.still{animation:none} /* arket er allerede åbent, når der vælges dag */
.ph-sheet .grab{width:4.4rem;height:.5rem;margin:0 auto 1.6rem;border-radius:99px;background:#e6d6c2}
.ph-sheet h4{margin:0;font-size:2rem;font-weight:700;letter-spacing:-.03em}
.ph-sheet p{margin:.4rem 0 0;font-size:1.25rem;color:#8b7262}
.days{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.6rem 0}
.day{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;padding:1.4rem 1.5rem;border:0;border-radius:2rem;background:#f7eee3;text-align:left;box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .3s,background .3s}
.day b{font-size:1.6rem;font-weight:700;color:#26221e}
.day span{font-size:1.15rem;color:#8b7262}
.day[aria-pressed="true"]{background:#fff3e4;box-shadow:inset 0 0 0 2px #e98a4f,0 8px 20px -10px rgba(220,110,40,.6)}
.day:hover,.day[data-ph-hover]{background:#fff3e4}
.ph-scrim{position:absolute;inset:0;z-index:3;background:rgba(38,34,30,.28);animation:fade .4s var(--ease)}
.ph-done{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1;padding-top:4rem}
.ph-ok{display:grid;place-items:center;width:9rem;height:9rem;border-radius:50%;color:#fff;background:linear-gradient(180deg,#38c897,#169a70);box-shadow:0 18px 40px -14px rgba(20,140,100,.7);animation:stamp .6s cubic-bezier(.2,1.6,.4,1)}
.ph-ok svg.i{width:4.4rem;height:4.4rem;stroke-width:2.4}
.ph-done h3{margin:2.4rem 0 0;font-size:2.6rem;font-weight:700;letter-spacing:-.04em}
.ph-done p{margin:.6rem 0 0;font-size:1.35rem;color:#8b7262;line-height:1.5}
.ph-done .rc{width:100%;margin-top:2.4rem;text-align:left}
.ph-done .rc div{display:flex;justify-content:space-between;padding:.8rem 0;border-top:1px solid #f1e6d8;font-size:1.3rem;color:#8b7262}
.ph-done .rc div:first-child{border-top:0}
.ph-done .rc b{color:#26221e;font-weight:600}
.ph-home{position:absolute;left:50%;bottom:.9rem;width:13.4rem;height:.5rem;margin-left:-6.7rem;border-radius:99px;background:#26221e;opacity:.85;z-index:6}

.feed{--acc:var(--mint);--gx:100%;--gy:0%}
.feed > .sub{margin-top:.9rem}

/* ---------- Indlæsning og visningsskift ---------- */
.pre .card,.pre .rail,.pre .top,.pre .paper-wrap,.pre .phone-stage,.pre .prod-head{opacity:0}
.card.in,.paper-wrap.in,.phone-stage.in,.prod-head.in{animation:cardIn calc(.5s * var(--spd)) var(--ease) backwards;animation-delay:var(--delay,0s)}
.rail.in,.top.in{animation:fadeIn calc(.45s * var(--spd)) var(--ease) backwards}
@keyframes cardIn{from{opacity:0;transform:translateY(1.6rem) scale(.985)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(-.6rem)}}

/* ---------- Mobil og tablet (op til 820 px) ---------- */
@media (hover:none),(max-width:820px){
  kbd,.keyrow,.keysteps{display:none!important}
}
@media (max-width:1024px){
  .shell{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);padding:1rem;gap:1rem}
  .rail{flex-direction:row;padding:.6rem;gap:.6rem;border-radius:24px}
  .mark,.rail-keys{display:none}
  .nav-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.2rem}
  .nav{font-size:1rem;gap:.4rem;min-height:5.2rem;padding:.8rem .1rem .7rem;justify-content:center}
  .nav .badge,.nav .badge.new{top:.5rem;right:auto;left:calc(50% + 1.4rem)}
  .greet{flex:1 1 100%}
  .top{flex-wrap:wrap;gap:1rem}
  .top-r{width:100%;flex-wrap:wrap}
  .search{flex:1;width:auto}
  .top-new,.me,.demo{display:none}
  .greet p{white-space:normal;flex-wrap:wrap}
  .views{overflow:auto}
  .view{position:static;display:flex!important;flex-direction:column;gap:1rem}
  .view[hidden]{display:none!important}
  .view > .card,.view .card{min-height:30rem}
  .ai{min-height:60rem}
  .flow{flex-direction:column}
  .lo-side{gap:1rem}
  .paper-wrap{min-height:70rem}
  .pgrid{display:flex;flex-direction:column}
  .phone-stage{min-height:90rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .pre .card,.pre .rail,.pre .top,.pre .paper-wrap,.pre .phone-stage,.pre .prod-head{opacity:1}
}