/* =====================================================================
   Kompis · "Spatial Glass" theme  (loaded after style.css)
   Apple Liquid Glass × visionOS spatial UI: translucent layered glass with
   specular rims, depth, floating toolbars/ornaments, vivid premium accents
   on an animated aurora mesh. Deep rich dark is the default; light mode via
   the moon/sun toggle. Business = cooler vivid variant.
   Motion: transform/opacity only; everything respects reduced motion.
   ===================================================================== */
:root{--px:0;--py:0;--ease-spring:cubic-bezier(.2,1.25,.35,1);--ease-out:cubic-bezier(.16,1,.3,1)}
body{
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* light · privat — Apple systemBlue primary, white/graphite structure */
  --bg:#F2F2F7;--text:#1D1D1F;--ink:#1D1D1F;--muted:#5C5C66;--slate:#5C5C66;
  --surface:rgba(255,255,255,.68);--solid:#FFFFFF;--surface-2:rgba(60,60,67,.06);--border:rgba(60,60,67,.12);--line:rgba(60,60,67,.12);
  --glass:rgba(255,255,255,.52);--glass-strong:rgba(255,255,255,.8);--glass-border:rgba(255,255,255,.85);--glass-tint:rgba(255,255,255,.94);
  --hi:rgba(255,255,255,1);--sheen:rgba(255,255,255,.6);--rim:rgba(255,255,255,1);--rim2:rgba(255,255,255,.3);
  --accent:#0071E3;--accent-ink:#0062CC;--accent-soft:rgba(0,113,227,.10);
  --grad:linear-gradient(135deg,#0071E3,#0058D0);--grad-glow:rgba(0,113,227,.45);
  --grad-ok:linear-gradient(135deg,#34E07A,#00C7BE);--ok-ink:#03240F;
  --mint:#1FB257;--mint-ink:#177A37;--mint-soft:rgba(48,209,88,.14);
  --sun:#FFD60A;--sun-ink:#7A5000;--sun-soft:rgba(255,190,10,.18);
  --coral:#FF9F0A;--coral-ink:#B25000;--coral-soft:rgba(255,159,10,.15);
  --violet:#0B7285;--violet-fill:#14A3B8;--violet-soft:rgba(20,163,184,.12);
  --sky:#0062CC;--sky-soft:rgba(0,113,227,.08);--fjord:#0062CC;--red:#D70015;
  --au1:#5AB2FF;--au2:#5EE6D0;--au3:#7FD3FF;--au4:#3D8BFF;--au5:#FFC24D;--au-o:.5;--au-bg2:#E6F2FF;
  --r:28px;--r-sm:20px;--r-xs:14px;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 22px 50px -28px rgba(20,40,80,.32);
  --shadow-lg:0 40px 90px -40px rgba(20,40,80,.5);
  --blur:blur(28px) saturate(185%);
  --glow:0 0 0 1px rgba(255,255,255,.6),0 14px 40px -12px var(--grad-glow);
}
body.mode-business{
  --accent:#0066D6;--accent-ink:#0062CC;--accent-soft:rgba(0,102,214,.10);
  --grad:linear-gradient(135deg,#0066D6,#007A8A);--grad-glow:rgba(0,122,160,.45);
  --au1:#4C9BFF;--au2:#3DD6E8;--au3:#58E0B5;--au4:#2F7BFF;--au5:#FFB340;--au-bg2:#E3F2F4;--bg:#EEF2F6;
  --r:24px;--r-sm:17px;--r-xs:12px;
}
body.dark{
  /* true black + graphite surfaces, crisp white highlights */
  --bg:#000000;--text:#F5F5F7;--ink:#F5F5F7;--muted:rgba(235,235,245,.66);--slate:rgba(235,235,245,.66);
  --surface:rgba(28,28,30,.56);--solid:#1C1C1E;--surface-2:rgba(255,255,255,.06);--border:rgba(255,255,255,.11);--line:rgba(255,255,255,.11);
  --glass:rgba(28,28,30,.44);--glass-strong:rgba(36,36,38,.72);--glass-border:rgba(255,255,255,.14);--glass-tint:rgba(28,28,30,.9);
  --hi:rgba(255,255,255,.24);--sheen:rgba(255,255,255,.08);--rim:rgba(255,255,255,.5);--rim2:rgba(255,255,255,.07);
  --accent-ink:#4DA3FF;--accent-soft:rgba(10,132,255,.18);
  --mint:#30D158;--mint-ink:#5DE88A;--mint-soft:rgba(48,209,88,.16);
  --sun-ink:#FFD84D;--sun-soft:rgba(255,214,10,.14);
  --coral-ink:#FFB340;--coral-soft:rgba(255,159,10,.16);
  --violet:#63E6E2;--violet-fill:#30B0C7;--violet-soft:rgba(48,176,199,.18);
  --sky:#64D2FF;--sky-soft:rgba(100,210,255,.13);--fjord:#64D2FF;--red:#FF6961;
  --au1:#0A84FF;--au2:#00C7BE;--au3:#1E5BFF;--au4:#2FCB8C;--au5:#FF9F0A;--au-o:.6;--au-bg2:#031326;
  --shadow:0 1px 0 rgba(255,255,255,.04),0 28px 60px -30px rgba(0,0,0,.9);
  --shadow-lg:0 50px 100px -40px rgba(0,0,0,.95);
  --glow:0 0 0 1px rgba(255,255,255,.14),0 14px 44px -10px var(--grad-glow);
}
body.dark.mode-business{--bg:#000000;--accent-ink:#4DA3FF;--accent-soft:rgba(10,132,255,.18);
  --au1:#0A84FF;--au2:#64D2FF;--au3:#0B4FD8;--au4:#00C7BE;--au5:#FFD60A;--au-bg2:#021A20}

html{background:#000}
html:has(body:not(.dark)){background:#F2F2F7}
body{font-family:var(--font);background:transparent;color:var(--text);letter-spacing:-.005em;font-feature-settings:"ss01","cv11";transition:none}
h1,h2,h3,h4{letter-spacing:-.022em}
a{color:var(--sky)}
:focus-visible{outline:2.5px solid var(--sky);outline-offset:2px;border-radius:10px}

/* ---------- aurora / mesh background (fx.js injects .aurora) ---------- */
.aurora{position:fixed;inset:-8vmax;z-index:-1;pointer-events:none;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 120%,var(--au-bg2),transparent 60%),var(--bg);contain:strict}
.au-layer{position:absolute;inset:0;will-change:transform}
.au-layer.l1{transform:translate3d(calc(var(--px)*-26px),calc(var(--py)*-20px),0)}
.au-layer.l2{transform:translate3d(calc(var(--px)*-48px),calc(var(--py)*-36px),0)}
.au-layer.l3{transform:translate3d(calc(var(--px)*-80px),calc(var(--py)*-60px),0)}
.aurora i{position:absolute;border-radius:50%;opacity:var(--au-o);will-change:transform}
.aurora .b1{width:62vmax;height:62vmax;left:-12vmax;top:-18vmax;background:radial-gradient(circle,var(--au1),transparent 64%);animation:au1 26s ease-in-out infinite alternate}
.aurora .b2{width:56vmax;height:56vmax;right:-14vmax;top:-10vmax;background:radial-gradient(circle,var(--au2),transparent 64%);animation:au2 31s ease-in-out infinite alternate}
.aurora .b3{width:70vmax;height:70vmax;left:18vmax;bottom:-34vmax;background:radial-gradient(circle,var(--au3),transparent 64%);animation:au3 34s ease-in-out infinite alternate}
.aurora .b4{width:48vmax;height:48vmax;right:4vmax;bottom:-12vmax;background:radial-gradient(circle,var(--au4),transparent 64%);animation:au1 29s ease-in-out infinite alternate-reverse}
.aurora .b5{width:30vmax;height:30vmax;left:34vmax;top:12vmax;background:radial-gradient(circle,var(--au5),transparent 66%);opacity:calc(var(--au-o)*.7);animation:au2 23s ease-in-out infinite alternate-reverse}
.au-grain{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body.dark .au-grain{opacity:.08}
.au-vignette{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,transparent 50%,rgba(0,0,0,.35))}
body:not(.dark) .au-vignette{background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(255,255,255,.35))}
@keyframes au1{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(9vmax,6vmax,0) scale(1.12)}100%{transform:translate3d(-4vmax,12vmax,0) scale(.94)}}
@keyframes au2{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-10vmax,8vmax,0) scale(.9)}100%{transform:translate3d(-3vmax,-6vmax,0) scale(1.15)}}
@keyframes au3{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-8vmax,-9vmax,0) scale(1.08)}100%{transform:translate3d(10vmax,-3vmax,0) scale(.96)}}

/* ---------- Liquid Glass primitives ---------- */
.card,.stat,.mcard,.quick button,.hero,.topbar,.tabbar,.sheet,.nl-head{
  position:relative;
  background:linear-gradient(180deg,var(--sheen),transparent 42%),linear-gradient(var(--surface),var(--surface));
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-border);
  box-shadow:inset 0 1px 0 var(--hi),inset 0 -1px 0 var(--rim2),var(--shadow)}
/* specular rim: bright top-left edge fading out (masked 1px gradient border) */
.card::before,.stat::before,.mcard::before,.quick button::before,.hero::before,.topbar::before,.tabbar::before,.sheet::before,.agent::before,.sidebar::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:1;
  background:linear-gradient(135deg,var(--rim),transparent 32%,transparent 68%,var(--rim2));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
@supports (corner-shape:squircle){.card,.stat,.mcard,.hero,.dj,.dj-info,.sheet,.action,.quick button{corner-shape:squircle}}
.card{border-radius:var(--r);padding:18px}
.stat{border-radius:var(--r-sm)}
/* nested surfaces: tinted, no extra blur (perf + legibility) */
.todo,.deal,.copyvar,.price-row,.rut-hint,.info-strip,.vbadge,.perm,.composer,.site-prev,.so div,.co{background:var(--surface-2);border:1px solid var(--border);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.co{background:transparent;border:0;border-bottom:1px solid var(--border)}
.price-row{background:var(--mint-soft);border-color:transparent}
.price-row .after{color:var(--mint-ink)}
.rut-hint{background:var(--sun-soft);border-color:rgba(255,190,10,.28)}
.composer{background:var(--glass-strong);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:22px}
.todo{border-radius:18px}
.todo.done{background:var(--mint-soft)!important;border-color:rgba(48,209,88,.35)}
.todo .chk{border-color:color-mix(in srgb,var(--text) 28%,transparent)}
.todo.done .chk{background:var(--grad-ok);border-color:transparent;color:var(--ok-ink);box-shadow:0 0 18px -2px rgba(48,209,88,.7)}
.deal.ok{background:var(--mint-soft)!important;border-color:rgba(48,209,88,.35)}
.toggle{background:color-mix(in srgb,var(--text) 22%,transparent)}
.toggle[aria-checked=true]{background:#30D158}
.progress,.bar{background:color-mix(in srgb,var(--text) 10%,transparent)}
.progress>i{background:var(--grad);box-shadow:0 0 16px -2px var(--grad-glow)}
.bar i{background:linear-gradient(90deg,var(--au3),var(--au4))}
.crit .bar i{background:var(--grad-ok)}
.sep{background:var(--border)}

/* ---------- hover lift + glow (pointer devices) ---------- */
@media (hover:hover){
  .card,.stat,.quick button,.mcard{transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .3s}
  .quick button:hover,.stat:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 35%,var(--glass-border));box-shadow:inset 0 1px 0 var(--hi),var(--shadow),0 18px 40px -22px var(--grad-glow)}
  .btn:hover{filter:brightness(1.06)}
}

/* ---------- segmented controls (pills) ---------- */
.seg{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--hi),0 8px 22px -16px rgba(0,0,0,.45);padding:3px}
.seg button{color:var(--muted);font-weight:600;transition:background .3s var(--ease-out),color .3s,box-shadow .3s}
.seg button[aria-pressed=true],body.dark .seg button[aria-pressed=true]{background:var(--glass-tint);color:var(--text);box-shadow:inset 0 1px 0 var(--hi),0 4px 14px -4px rgba(0,0,0,.35)}
body.dark .seg button[aria-pressed=true]{background:rgba(255,255,255,.16)}
.seg.mode button[aria-pressed=true]::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:1px;background:var(--grad);box-shadow:0 0 10px var(--grad-glow)}
.seg.mode button[data-mode=privat][aria-pressed=true],.seg.mode button[data-mode=business][aria-pressed=true]{color:var(--text)}

/* ---------- buttons ---------- */
.btn,body.mode-privat .btn{border-radius:999px;font-weight:650;letter-spacing:-.01em}
.btn{transition:transform .25s var(--ease-spring),box-shadow .3s,filter .2s,background .3s}
.btn:active{transform:scale(.96)}
.btn-primary,.btn-mint,.btn-violet,.ag-send{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after,.btn-mint::after,.btn-violet::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0) 52%);mix-blend-mode:soft-light}
.btn-primary{background:var(--grad);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 28px -12px var(--grad-glow)}
.btn-primary:hover{background:var(--grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 16px 36px -10px var(--grad-glow)}
body.dark .btn-primary{background:var(--grad);color:#fff}
.btn-mint{background:var(--grad);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 28px -12px var(--grad-glow)}
.btn-violet{background:linear-gradient(135deg,#0E7C86,#0B6E99);color:#fff;box-shadow:0 12px 28px -12px rgba(20,140,170,.6)}
.btn-ghost{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-border);color:var(--text);box-shadow:inset 0 1px 0 var(--hi)}
.btn-ghost:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--glass-border))}
.btn-coral{background:var(--coral-soft);color:var(--coral-ink)}
.btn-danger-ghost{color:var(--red)}
.icon-btn{border-radius:999px;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-border);color:var(--text);box-shadow:inset 0 1px 0 var(--hi)}
.chip-btn{background:var(--glass-strong);border:1px solid color-mix(in srgb,var(--violet-fill) 30%,transparent);color:var(--violet);box-shadow:inset 0 1px 0 var(--hi)}
.chip-btn:hover{background:var(--violet-soft);box-shadow:0 0 0 1px color-mix(in srgb,var(--violet-fill) 40%,transparent),0 8px 24px -10px rgba(48,176,199,.5)}
body.dark .chip-btn{color:var(--violet);border-color:rgba(48,176,199,.35)}
.badge{letter-spacing:.005em;font-weight:650}
.b-sun{background:linear-gradient(135deg,#FFE066,#FFB300);color:#3A2600}
.b-mint{background:var(--mint-soft);color:var(--mint-ink)}
.b-violet{background:var(--violet-soft);color:var(--violet)}
.b-sky{background:var(--sky-soft);color:var(--text)}
.b-coral{background:var(--coral-soft);color:var(--coral-ink)}
body.dark .b-violet{color:var(--violet)}body.dark .b-sky{color:var(--text)}
.reason{background:var(--mint-soft);color:var(--mint-ink)}
.eyebrow,body.mode-business .eyebrow{color:var(--accent-ink);letter-spacing:.07em}
.card-h .link,.sec-h .link{color:var(--accent-ink)}
.logo{border-radius:15px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 16px -8px rgba(0,0,0,.45)}
.logo::after{background:radial-gradient(circle,rgba(255,255,255,.35),transparent 70%)}
.step i{background:var(--grad);color:#fff}
.quick .qi{border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.quick button{border-radius:22px}
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}

/* ---------- floating chrome / ornaments ---------- */
.demo-banner{background:transparent;color:var(--muted);font-size:11.5px;padding:7px 12px 0}
.demo-banner b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.topbar{position:sticky;margin:8px 10px 0;top:8px;border-radius:999px;padding:7px 8px 7px 10px;transition:box-shadow .3s}
.topbar.scrolled{border-color:var(--glass-border);box-shadow:inset 0 1px 0 var(--hi),0 20px 50px -24px rgba(0,0,0,.55)}
.tb-title{font-weight:700;letter-spacing:-.02em}
.brand-mark{background:conic-gradient(from 210deg,var(--au1),var(--au2),var(--au5),var(--au4),var(--au3),var(--au1));border-radius:12px;box-shadow:0 6px 18px -6px var(--grad-glow)}
.brand-mark::after{background:linear-gradient(160deg,#3A3A3C,#0B0B0C);border-radius:10px}
body:not(.dark) .brand-mark::after{background:linear-gradient(160deg,#3A3A3C,#1C1C1E)}
.avatar{background:var(--grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 16px -6px var(--grad-glow)}
.tabbar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));padding:6px 4px 8px;border-radius:32px;
  background:linear-gradient(180deg,var(--sheen),transparent 50%),linear-gradient(var(--glass-strong),var(--glass-strong));box-shadow:inset 0 1px 0 var(--hi),0 24px 60px -20px rgba(0,0,0,.6)}
.tab{color:var(--muted);transition:color .3s,transform .3s var(--ease-spring)}
.tab:active{transform:scale(.92)}
.tab[aria-current=page],body.mode-business .tab[aria-current=page]{color:var(--accent-ink)}
.tab[aria-current=page]::before{top:-3px;width:26px;background:var(--grad);box-shadow:0 0 12px var(--grad-glow)}
.tab .dot{background:#FFD60A;box-shadow:0 0 0 2px var(--solid),0 0 10px rgba(255,214,10,.8)}
.tab-agent{color:var(--violet)}
.tab-agent .orb,.ag-orb{background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.75),transparent 28%),conic-gradient(from 200deg,#0A84FF,#64D2FF,#30D158,#FFD60A,#FF9F0A,#0A84FF);color:#fff}
.tab-agent .orb{box-shadow:0 12px 28px -8px rgba(10,132,255,.7),0 0 0 4px var(--solid),0 0 0 5px var(--glass-border);animation:orbspin 9s linear infinite}
.tab-agent .orb svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
@keyframes orbspin{to{background-position:0 0;filter:hue-rotate(360deg)}}
.ag-orb{border-radius:999px;box-shadow:0 6px 18px -6px rgba(10,132,255,.7)}
#toast-root{bottom:104px}
.toast{background:var(--glass-tint);color:var(--text);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-radius:999px;border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--hi),0 20px 50px -18px rgba(0,0,0,.6);animation:toastin .55s var(--ease-spring) both}
body.dark .toast{background:rgba(44,44,46,.82);color:#fff}
@keyframes toastin{from{opacity:0;transform:translate3d(0,18px,0) scale(.86)}}
.toast .tick,.tick{background:var(--grad-ok);color:var(--ok-ink);box-shadow:0 0 16px -2px rgba(48,209,88,.8)}

/* ---------- agent: spatial floating window ---------- */
.agent{background:linear-gradient(180deg,var(--sheen),transparent 30%),linear-gradient(var(--glass-strong),var(--glass-strong));-webkit-backdrop-filter:blur(40px) saturate(190%);backdrop-filter:blur(40px) saturate(190%)}
body.dark .agent{background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 30%),linear-gradient(rgba(22,22,24,.66),rgba(22,22,24,.66))}
.ag-head,.ag-tabs,.ag-foot{border-color:var(--border)}
.ag-foot{background:transparent}
.ag-body{background:radial-gradient(120% 220px at 50% 0%,var(--violet-soft),transparent 80%)}
.ag-input{border-radius:999px;background:var(--glass-tint);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--hi)}
body.dark .ag-input{background:rgba(255,255,255,.07)}
.ag-send{border-radius:999px;background:linear-gradient(180deg,#0A6CFF,#0058D0);box-shadow:0 8px 20px -8px rgba(0,113,227,.7)}
.ag-tabs button[aria-selected=true]{color:var(--violet);border-color:var(--violet-fill)}
.live{background:#30D158;box-shadow:0 0 8px #30D158}
.msg{border-radius:22px}
.msg.bot{background:var(--glass-tint);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--hi)}
body.dark .msg.bot{background:rgba(255,255,255,.07)}
.msg.user{background:linear-gradient(180deg,#0A6CFF,#0058D0);box-shadow:0 10px 24px -12px rgba(0,113,227,.6)}
.action{position:relative;background:var(--glass-tint);border:1px solid color-mix(in srgb,var(--violet-fill) 28%,transparent);border-radius:24px;box-shadow:inset 0 1px 0 var(--hi),0 22px 50px -28px rgba(10,80,160,.45)}
body.dark .action{background:rgba(255,255,255,.06)}
.action-h{background:var(--violet-soft);color:var(--violet);font-size:11px;gap:6px}
.action-h .svc{white-space:nowrap}
.preview{background:var(--surface-2);border:1px solid var(--border);border-radius:16px}
.action-st.ok{background:var(--mint-soft);color:var(--mint-ink)}
.action.approved{animation:approveGlow 1.4s var(--ease-out)}
@keyframes approveGlow{0%{box-shadow:0 0 0 0 rgba(48,209,88,.0)}25%{box-shadow:0 0 0 3px rgba(48,209,88,.65),0 0 60px 6px rgba(48,209,88,.45)}100%{box-shadow:inset 0 1px 0 var(--hi),0 22px 50px -28px rgba(10,80,160,.45)}}
.ig-img{background:linear-gradient(135deg,#FFB340,#FF9F0A 45%,#0A84FF);color:#fff}
/* mobile: agent sheet = floating spatial window that rises from depth, page recedes */
@media (max-width:1023px){
  .agent{inset:10px 10px calc(10px + env(safe-area-inset-bottom)) 10px;border-radius:32px;border:1px solid var(--glass-border);overflow:hidden;
    transform:perspective(1000px) translate3d(0,60px,-120px) rotateX(10deg) scale(.92);opacity:0;visibility:hidden;
    transition:transform .5s var(--ease-out),opacity .3s ease,visibility 0s linear .5s;box-shadow:inset 0 1px 0 var(--hi),0 40px 100px -30px rgba(0,0,0,.85)}
  body.agent-sheet .agent{transform:none;opacity:1;visibility:visible;transition:transform .65s var(--ease-spring),opacity .3s ease,visibility 0s}
  .main-col,.tabbar{transition:transform .5s var(--ease-out),opacity .4s}
  body.agent-sheet .main-col{transform:scale(.93);opacity:.45}
  body.agent-sheet .tabbar{transform:translateY(30px) scale(.9);opacity:0;pointer-events:none}
}

/* ---------- screens ---------- */
.hero,body.mode-privat .hero,body.mode-business .hero,body.dark.mode-privat .hero,body.dark.mode-business .hero{border-radius:34px;color:var(--text);
  background:radial-gradient(90% 140% at 100% 0%,color-mix(in srgb,var(--au1) 38%,transparent),transparent 60%),radial-gradient(80% 120% at 0% 110%,color-mix(in srgb,var(--au2) 30%,transparent),transparent 62%),radial-gradient(60% 90% at 60% 120%,color-mix(in srgb,var(--au3) 30%,transparent),transparent 70%),linear-gradient(var(--glass-strong),var(--glass-strong))}
body.dark .hero{background:radial-gradient(90% 140% at 100% 0%,color-mix(in srgb,var(--au1) 46%,transparent),transparent 60%),radial-gradient(80% 120% at 0% 110%,color-mix(in srgb,var(--au2) 32%,transparent),transparent 62%),radial-gradient(60% 90% at 60% 120%,color-mix(in srgb,var(--au3) 30%,transparent),transparent 70%),linear-gradient(rgba(22,22,24,.62),rgba(22,22,24,.62))!important}
.hero h1{font-weight:780;letter-spacing:-.035em}
.hero p{opacity:1;color:var(--muted)}
.hero .eyebrow,body.mode-business .hero .eyebrow{color:var(--accent-ink)}
.hero-deco{border:0;width:220px;height:220px;right:-50px;top:-60px;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),rgba(255,255,255,.06) 45%,transparent 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);animation:floaty 9s ease-in-out infinite}
body.dark .hero-deco{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.22),rgba(255,255,255,.03) 45%,transparent 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
@keyframes floaty{50%{transform:translate3d(-10px,12px,0) scale(1.04)}}
.hero .pill,body.mode-business .hero .pill,body.dark .hero .pill{background:var(--glass-tint);border:1px solid var(--glass-border);color:var(--text);box-shadow:inset 0 1px 0 var(--hi)}
body.dark .hero .pill{background:rgba(255,255,255,.1)}
.stat .v{font-weight:780;letter-spacing:-.04em}
.stat .d{color:var(--mint-ink)}
.mcard{border-radius:30px;overflow:hidden;transform:perspective(1000px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateZ(0)}
.mcard.tilting{transition:transform .12s linear,box-shadow .3s}
.mcard::after,.quick button::after,.stat::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.22),transparent 45%)}
.mcard.tilting::after,.quick button.tilting::after,.stat.tilting::after{opacity:1}
.mcard.gone{transform:translateX(-40px) rotate(-4deg) scale(.96)!important;opacity:0}
.mcard .cover{height:84px}
.mcard .cover::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 140% at 20% 0%,rgba(255,255,255,.35),transparent 60%)}
.mcard .cover .logo{box-shadow:0 0 0 4px var(--solid),0 10px 24px -8px rgba(0,0,0,.5);z-index:1}
.mscore{background:conic-gradient(from 0deg,#30D158,#00C7BE calc(var(--p)*1%),color-mix(in srgb,var(--text) 12%,transparent) 0);box-shadow:0 0 0 4px var(--solid),0 0 22px -6px rgba(48,209,88,.7)}
.mscore::before,.ring::before{background:var(--solid)}
.mstate{background:var(--surface-2);color:var(--text);border-radius:999px}
.mstate.matched{background:var(--mint-soft);color:var(--mint-ink)}
.sponsored{background:var(--glass-tint);color:var(--text);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.nl-head{border-radius:34px;color:#fff;background:radial-gradient(90% 140% at 100% 0%,rgba(255,214,10,.32),transparent 55%),radial-gradient(80% 120% at 0% 100%,rgba(10,132,255,.5),transparent 60%),linear-gradient(135deg,#0B1424,#101418)}
.nl-head::after{background:radial-gradient(circle,rgba(0,199,190,.5),transparent 70%)}
.nl-head .wk{background:linear-gradient(135deg,#FFE066,#FFB300);color:#3A2600}
.ms.got .mi{background:linear-gradient(135deg,#FFE066,#FF9F0A);color:#3A2600;border-radius:999px;box-shadow:0 0 18px -4px rgba(255,180,0,.8)}
.ms .mi{border-radius:999px}
.lvl .n{background:var(--solid)}
.lvl.done .n{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 0 16px -2px var(--grad-glow)}
.lvl.cur .n{border-color:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 5px var(--accent-soft);background:var(--solid)}
.lvl.done:not(:last-child)::after{background:var(--grad)}
.lvl:not(:last-child)::after{background:var(--border)}
.ring{background:conic-gradient(#30D158,#00C7BE calc(var(--p)*1%),color-mix(in srgb,var(--text) 12%,transparent) 0);filter:drop-shadow(0 0 14px rgba(48,209,88,.35))}
.chart i{background:linear-gradient(180deg,color-mix(in srgb,var(--au4) 70%,#fff),var(--au3));opacity:.75}
.chart div.now i{background:var(--grad);opacity:1;box-shadow:0 0 18px -2px var(--grad-glow)}
.capcal span{background:var(--surface-2)}
.capcal span i{background:var(--au4)}
.capcal span i.free{background:#30D158}
.browser{background:var(--surface-2);border-color:var(--border)}
.browser .url{background:var(--glass-tint)}
body.dark .browser .url{background:rgba(255,255,255,.08)}
.site-hero{background:radial-gradient(90% 120% at 100% 0%,rgba(255,214,10,.35),transparent 60%),var(--grad)}
.site-hero .b{color:#1D1D1F;border-radius:999px}
.site-blocks div{background:var(--surface-2)}
.fmt button{border-radius:999px;background:var(--glass);border:1px solid var(--glass-border);color:var(--text)}
.fmt button[aria-pressed=true]{background:var(--violet-soft);color:var(--violet);border-color:color-mix(in srgb,var(--violet-fill) 45%,transparent)}
.ad{border-radius:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 16px 30px -18px rgba(0,0,0,.6)}
.ad.sel{border-color:#fff;box-shadow:0 0 0 3px var(--violet-fill),0 18px 40px -16px rgba(10,132,255,.6)}
.copyvar b{color:var(--violet)}
.tbl tr:hover td{background:var(--surface-2)}
.job.new{border-color:#FFD60A;box-shadow:0 0 0 3px rgba(255,214,10,.3),0 0 40px -10px rgba(255,214,10,.6)}
.info-strip svg{color:var(--accent-ink)}
.vbadge .vi{border-radius:999px}
.page-h h1{font-weight:780;letter-spacing:-.035em}
.sec-h h2{font-weight:760;letter-spacing:-.03em}

/* ---------- desktop: visionOS-style floating windows ---------- */
@media (min-width:1024px){
  .sidebar,body.mode-business .sidebar{margin:12px 0 12px 12px;top:12px;height:calc(100vh - 24px);border-radius:32px;color:var(--text);
    background:linear-gradient(180deg,var(--sheen),transparent 30%),linear-gradient(var(--glass),var(--glass));-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--hi),var(--shadow)}
  body.dark .sidebar{background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 30%),linear-gradient(rgba(22,22,24,.5),rgba(22,22,24,.5))!important}
  .side-link,body.mode-business .sidebar .side-link{border-radius:999px;color:var(--muted);transition:background .3s,color .3s,transform .3s var(--ease-spring)}
  .side-link:hover,body.mode-business .sidebar .side-link:hover{background:var(--surface-2);color:var(--text);transform:translateX(2px)}
  .side-link[aria-current=page],body.mode-business .sidebar .side-link[aria-current=page]{background:var(--glass-tint);color:var(--text);box-shadow:inset 0 1px 0 var(--hi),0 8px 22px -12px rgba(0,0,0,.5)}
  body.dark .side-link[aria-current=page]{background:rgba(255,255,255,.12)!important}
  .side-link[aria-current=page] svg{color:var(--accent-ink)}
  body.mode-business .sidebar .side-sec,.side-sec{color:var(--muted)}
  .side-foot,body.mode-business .sidebar .side-foot{background:var(--surface-2);color:var(--text);border-radius:22px;border:1px solid var(--border)}
  body.mode-business .sidebar .brand-mark::after{background:linear-gradient(160deg,#3A3A3C,#0B0B0C)}
  .agent{margin:12px 12px 12px 0;top:12px;height:calc(100vh - 24px);border-radius:32px;border:1px solid var(--glass-border);overflow:hidden;box-shadow:inset 0 1px 0 var(--hi),var(--shadow-lg)}
  .agent.spatial-open{animation:spatialOpen .8s var(--ease-out) both;transform-origin:100% 50%}
  .topbar{margin:12px 14px 0;top:12px}
  .app{min-height:calc(100vh - 24px)}
  #toast-root{bottom:28px}
}
@keyframes spatialOpen{
  0%{opacity:0;transform:perspective(1400px) translate3d(60px,10px,-220px) rotateY(-18deg) scale(.9)}
  55%{opacity:1}
  100%{opacity:1;transform:none}}

/* =====================================================================
   Dagens jobb · 3D coverflow carousel with tilt + light reflection
   ===================================================================== */
.dj{position:relative;isolation:isolate;overflow:hidden;border-radius:38px;user-select:none;-webkit-user-select:none;height:480px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 1px rgba(255,255,255,.12),var(--shadow-lg)}
.dj.full{height:calc(100dvh - 244px);min-height:520px}
.dj-bgs{position:absolute;inset:0;z-index:-3}
.dj-bgs i{position:absolute;inset:0;opacity:0}
.dj.anim .dj-bgs i{transition:opacity .6s ease}
.dj::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(70% 55% at 50% -5%,rgba(255,255,255,.42),transparent 70%),radial-gradient(70% 45% at 50% 105%,rgba(0,0,0,.35),transparent 70%)}
.dj::after{content:"";position:absolute;width:70%;aspect-ratio:1;left:-20%;top:-30%;z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.28),transparent 62%);animation:djlight 14s ease-in-out infinite alternate}
@keyframes djlight{to{transform:translate3d(110%,40%,0) scale(1.2)}}
.dj-head{position:absolute;top:14px;left:14px;right:14px;z-index:5;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dj-pill{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;font-weight:650;font-size:13px;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.08));-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.38);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 24px -14px rgba(0,0,0,.6);background-color:rgba(12,8,28,.30)}
.dj-pill.title{font-size:14.5px;font-weight:750}
.dj-pill.title .sun{font-size:16px;text-shadow:none}
button.dj-pill{cursor:pointer;transition:transform .3s var(--ease-spring),background-color .3s}
button.dj-pill:hover{background-color:rgba(20,10,30,.36);transform:translateY(-1px)}
.dj-viewport{position:absolute;z-index:2;left:0;right:0;top:62px;bottom:56px;touch-action:pan-y;cursor:grab;outline:none}
.dj-viewport:focus-visible{outline:3px solid rgba(255,255,255,.85);outline-offset:-6px;border-radius:28px}
.dj-viewport.dragging{cursor:grabbing}
.dj-track{position:absolute;inset:0;perspective:1300px;perspective-origin:50% 42%;transform-style:preserve-3d}
.dj-card{position:absolute;top:0;bottom:0;left:0;width:var(--cw,320px);display:flex;flex-direction:column;transform-origin:50% 60%;transform-style:preserve-3d;will-change:transform,opacity}
.dj.anim .dj-card{transition:transform .7s var(--ease-out),opacity .6s ease,filter .6s}
.dj.anim .dj-card.tilting,.dj-card.tilting{transition:transform .14s linear,opacity .6s ease}
.dj-visual{flex:1 1 auto;min-height:110px;position:relative;display:grid;place-items:center;pointer-events:none;transform-style:preserve-3d}
.dj-emoji{position:relative;z-index:2;font-size:clamp(78px,20vw,156px);line-height:1;filter:drop-shadow(0 30px 24px rgba(0,0,0,.35));font-family:"Apple Color Emoji","Noto Color Emoji","Segoe UI Emoji",sans-serif;will-change:transform}
.dj-card.on .dj-emoji{animation:emojiBob 5s ease-in-out infinite}
@keyframes emojiBob{50%{translate:0 -10px}}
.dj.compact .dj-emoji{font-size:clamp(66px,15vw,116px)}
.dj-glow{position:absolute;width:min(82%,280px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,0) 66%);transform:translateZ(-30px)}
.dj-ring{position:absolute;width:min(64%,220px);aspect-ratio:1;border-radius:50%;transform:translateZ(-10px);
  background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.45),rgba(255,255,255,.06) 40%,rgba(255,255,255,.02) 70%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45),inset 0 -14px 30px rgba(255,255,255,.08),0 30px 60px -30px rgba(0,0,0,.5)}
.dj-shadow{position:absolute;bottom:9%;width:36%;height:18px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.38),transparent 70%);filter:blur(2px)}
.dj-deco{position:absolute;z-index:3;font-size:clamp(26px,6vw,42px);font-family:"Apple Color Emoji","Noto Color Emoji","Segoe UI Emoji",sans-serif;filter:drop-shadow(0 12px 10px rgba(0,0,0,.3));animation:djfloat 5s ease-in-out infinite}
.dj-deco.d1{top:12%;left:8%;transform:translateZ(90px) rotate(-12deg)}
.dj-deco.d2{bottom:20%;right:7%;transform:translateZ(60px) rotate(10deg);animation-delay:-2.5s}
@keyframes djfloat{50%{translate:0 -9px}}
.dj-info{position:relative;z-index:3;margin-top:-18px;border-radius:30px;padding:16px 18px;pointer-events:auto;overflow:hidden;
  background:linear-gradient(180deg,#FFFFFF,rgba(250,250,253,.97));color:#1D1D1F;
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(255,255,255,.6),0 30px 60px -28px rgba(0,0,0,.65)}
body.dark .dj-info{background:linear-gradient(180deg,rgba(44,44,46,.98),rgba(24,24,26,.98));color:#F5F5F7;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px rgba(255,255,255,.08),0 30px 60px -28px rgba(0,0,0,.9)}
.dj-shine{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;opacity:0;transition:opacity .35s;mix-blend-mode:soft-light;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.9),transparent 42%)}
body.dark .dj-shine{mix-blend-mode:screen;background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.26),transparent 45%)}
.dj-card.tilting .dj-shine{opacity:1}
.dj-sweep{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:4}
.dj-sweep::after{content:"";position:absolute;top:-20%;bottom:-20%;width:38%;left:0;transform:translateX(-120%) skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);mix-blend-mode:soft-light;opacity:0}
body.dark .dj-sweep::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);mix-blend-mode:screen}
.dj-card.on .dj-sweep::after{animation:sheenSweep 6.5s var(--ease-out) 1s infinite}
@keyframes sheenSweep{0%{transform:translateX(-120%) skewX(-18deg);opacity:1}35%{transform:translateX(330%) skewX(-18deg);opacity:1}36%,100%{opacity:0;transform:translateX(330%) skewX(-18deg)}}
.dj-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.dj-price b{font-size:31px;font-weight:800;letter-spacing:-.045em;line-height:1}
.dj-price .lab{font-size:12.5px;color:#5E5E6A;font-weight:600}
body.dark .dj-price .lab,body.dark .dj-info p,body.dark .dj-meta{color:rgba(235,235,245,.7)}
/* Live employment ads: the job title is the headline. Pay is a small line. */
.dj-card.live .dj-info h3{font-size:clamp(22px,5.4vw,28px);font-weight:800;letter-spacing:-.04em;line-height:1.12;margin:0 0 4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dj-pay{font-size:13px;font-weight:650;letter-spacing:-.01em;line-height:1.25;color:#1D1D1F}
.dj-pay small{font-size:.75em;font-weight:650}
.dj-pay.is-muted{font-size:12.5px;font-weight:550;color:#8E8E93}
body.dark .dj-pay{color:#F5F5F7}
body.dark .dj-pay.is-muted{color:rgba(235,235,245,.5)}
.dj-info h3{font-size:19px;font-weight:750;letter-spacing:-.025em;margin:8px 0 4px}
.dj-info p{font-size:13.5px;color:#5E5E6A;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dj.compact .dj-info p{-webkit-line-clamp:2}
.dj-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;color:#5E5E6A;margin:10px 0 12px}
.dj-meta span,.dj-meta .dj-source{display:inline-flex;align-items:center;gap:4px}
.dj-source,.dj-fresh{font-size:12px;font-weight:750;text-decoration:none}
.dj-source{text-decoration:underline;text-underline-offset:2px}
.dj-source.is-live,.dj-fresh.is-live{color:#148A3A}
.dj-source.is-upd,.dj-fresh.is-upd{color:#8A6A10}
.dj-source.is-off,.dj-fresh.is-off{color:#C4372F}
body.dark .dj-source.is-live,body.dark .dj-fresh.is-live{color:#5DE88A}
body.dark .dj-source.is-upd,body.dark .dj-fresh.is-upd{color:#F5D48A}
body.dark .dj-source.is-off,body.dark .dj-fresh.is-off{color:#FFB4A8}
.dj-meta .badge.b-sky{background:rgba(60,60,67,.08);color:#1D1D1F}
body.dark .dj-meta .badge.b-sky{background:rgba(255,255,255,.1);color:#F5F5F7}
.dj-meta .badge.b-mint{background:rgba(48,209,88,.16);color:#177A37}
body.dark .dj-meta .badge.b-mint{color:#5DE88A}
.dj-act{display:flex;gap:8px}
.dj-act .btn{flex:1;padding:12px 16px;font-size:15px}
.dj-act .ai{flex:none;width:46px;padding:0;background:rgba(20,163,184,.12);color:#0B7285}
body.dark .dj-act .ai{background:rgba(48,176,199,.2);color:#63E6E2}
.dj-act .btn.done{background:var(--grad-ok);color:var(--ok-ink);box-shadow:0 0 24px -4px rgba(48,209,88,.7)}
.dj-card:not(.on) .dj-info{pointer-events:none}
.dj-card .stamp{position:absolute;z-index:5;top:12%;right:12%;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;transform:translateZ(110px);
  background:var(--grad-ok);color:var(--ok-ink);box-shadow:0 0 0 4px rgba(255,255,255,.75),0 0 40px 4px rgba(48,209,88,.6);animation:stampIn .7s var(--ease-spring) both}
@keyframes stampIn{from{opacity:0;transform:translateZ(300px) scale(2.2) rotate(-40deg)}}
.dj-card .stamp svg{width:30px;height:30px;stroke-width:2.6}
.dj-card .mine{position:absolute;z-index:6;top:4%;left:50%;margin-left:-50px;font-size:11px;font-weight:750;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.88);color:#1D1D1F;transform:translateZ(70px)}
.dj-foot{position:absolute;left:0;right:0;bottom:10px;z-index:5;display:flex;align-items:center;justify-content:center;gap:12px}
.dj-arrow{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.08));background-color:rgba(12,8,28,.30);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 24px -14px rgba(0,0,0,.6);transition:transform .3s var(--ease-spring),background-color .3s}
.dj-arrow:hover:not(:disabled){transform:scale(1.08);background-color:rgba(20,10,30,.36)}
.dj-arrow:disabled{opacity:.4;cursor:default}
.dj-dots{display:flex;gap:6px;align-items:center;padding:9px 13px;border-radius:999px;background-color:rgba(20,10,30,.22);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.25)}
.dj-dots i{width:7px;height:7px;border-radius:99px;background:rgba(255,255,255,.45);transition:width .45s var(--ease-spring),background .35s}
.dj-dots i.on{width:24px;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.8)}
.dj-side{position:absolute;top:50%;z-index:5;margin-top:-30px;width:52px;height:52px;display:none}
.dj-side.prev{left:16px}.dj-side.next{right:16px}
.dj-sub{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 4px 0;font-size:13px;color:var(--muted)}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin:2px 2px -4px}
.sec-h h2{font-size:21px}
.sec-h .link{font-size:13px;font-weight:700}
@media (min-width:860px){
  .dj{height:480px}
  .dj.full{height:calc(100vh - 150px);min-height:600px;max-height:900px}
  .dj-side{display:grid}
  .dj-info{padding:18px 20px}
}
@media (max-width:520px){
  .dj-head .dj-pill.date{display:none}
  .dj-head .dj-pill .lbl{display:none}
  .dj-head{gap:6px}
}
/* Phone jobs screen: the card, including Ta jobbet, sits above the tab bar and the safe area. */
@media (max-width:1023.98px){
  body.scr-jobs{height:100dvh;overflow:hidden}
  body.scr-jobs .app{height:100dvh;min-height:0;overflow:hidden}
  body.scr-jobs .main-col{height:100%;min-height:0;overflow:hidden}
  body.scr-jobs #main{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;
    padding-top:8px;padding-bottom:calc(104px + var(--sab))}
  body.scr-jobs .screen{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
  body.scr-jobs .screen>*:not(.dj){flex:0 0 auto}
  body.scr-jobs .dj.full{flex:1 1 auto;height:auto;min-height:0;max-height:none}
  /* top+bottom stretch collapses on a flex card with overflow hidden, so pin the height */
  body.scr-jobs .dj-card{height:100%;bottom:auto}
  body.scr-jobs .dj-visual{flex:1 1 auto;min-height:0}
  body.scr-jobs .dj-info{flex:0 0 auto}
  body.scr-jobs .dj-emoji{font-size:clamp(48px,14vw,92px)}
  body.scr-jobs .dj-meta{margin:6px 0 8px;max-height:2.65em;overflow:hidden}
  body.scr-jobs .dj-filter{margin-bottom:6px}
  body.scr-jobs .dj-sub{margin:6px 4px 0}
}
@media (max-width:1023.98px) and (max-height:820px){
  body.scr-jobs .fb-q,body.scr-jobs .fb-sel,body.scr-jobs .fb-fil{height:44px}
  body.scr-jobs .dj-viewport{top:50px;bottom:44px}
  body.scr-jobs .dj-head{top:8px}
  body.scr-jobs .dj-pill{padding:6px 11px}
  body.scr-jobs .dj-foot{bottom:4px}
  body.scr-jobs .dj-info{padding:10px 14px 12px}
  body.scr-jobs .dj-info p{-webkit-line-clamp:2}
  body.scr-jobs .dj-card.live .dj-info h3{font-size:22px}
}

/* =====================================================================
   Match moment · light burst + cards colliding in 3D
   ===================================================================== */
.mm{background:radial-gradient(circle at 50% 22%,rgba(10,132,255,.6),transparent 38%),radial-gradient(circle at 50% 26%,rgba(0,199,190,.38),transparent 62%),radial-gradient(circle at 50% 120%,rgba(255,159,10,.25),transparent 55%),rgba(0,0,0,.9);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);overflow-x:hidden}
body.mode-business .mm{background:radial-gradient(circle at 50% 22%,rgba(30,130,255,.6),transparent 38%),radial-gradient(circle at 50% 26%,rgba(0,200,220,.45),transparent 62%),radial-gradient(circle at 50% 120%,rgba(48,209,88,.28),transparent 55%),rgba(0,0,0,.9)}
.mm-fx{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.mm-rays{position:absolute;left:var(--cx,50%);top:var(--cy,22%);width:180vmax;height:180vmax;margin:-90vmax 0 0 -90vmax;opacity:0;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.13) 0 4deg,transparent 4deg 15deg);
  -webkit-mask:radial-gradient(circle,#000 0,rgba(0,0,0,.5) 18%,transparent 50%);mask:radial-gradient(circle,#000 0,rgba(0,0,0,.5) 18%,transparent 50%);
  animation:raysIn .9s .45s var(--ease-out) forwards,spin 40s linear infinite}
@keyframes raysIn{to{opacity:1}}
@keyframes spin{to{rotate:360deg}}
.mm-flash{position:absolute;left:var(--cx,50%);top:var(--cy,22%);width:120vmax;height:120vmax;margin:-60vmax 0 0 -60vmax;border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,220,240,.5) 12%,transparent 40%);animation:flash .9s .42s ease-out forwards}
@keyframes flash{0%{opacity:0;transform:scale(.2)}15%{opacity:1}100%{opacity:0;transform:scale(1.1)}}
.mm-shock{position:absolute;left:var(--cx,50%);top:var(--cy,22%);width:160px;height:160px;margin:-80px 0 0 -80px;border-radius:50%;opacity:0;
  border:2px solid rgba(255,255,255,.8);box-shadow:0 0 30px rgba(255,255,255,.6),inset 0 0 30px rgba(255,255,255,.4);animation:shock 1.2s .45s var(--ease-out) forwards}
.mm-shock.s2{animation-delay:.62s;border-color:rgba(255,200,120,.7)}
@keyframes shock{0%{opacity:1;transform:scale(.2)}100%{opacity:0;transform:scale(7)}}
.mm-card{z-index:1}
.mm-logos{perspective:900px;transform-style:preserve-3d;height:140px}
.mm-logos .logo{width:100px;height:100px;border-radius:32px;font-size:31px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 0 0 1.5px rgba(255,255,255,.55),0 0 50px -6px rgba(255,255,255,.45),0 24px 50px -14px rgba(0,0,0,.7)}
.mm-logos .logo::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(140deg,rgba(255,255,255,.55),transparent 40%);pointer-events:none}
.mm-logos .l1{animation:coll1 1s var(--ease-out) both;transform:rotate(-8deg)}
.mm-logos .l2{animation:coll2 1s var(--ease-out) both;transform:rotate(8deg)}
@keyframes coll1{
  0%{opacity:0;transform:translate3d(-62vw,-30px,-700px) rotateY(85deg) rotateZ(-35deg)}
  42%{opacity:1;transform:translate3d(10px,0,120px) rotateY(18deg) rotateZ(-6deg)}
  52%{transform:translate3d(22px,0,90px) rotateY(-6deg) rotateZ(-2deg) scale(1.08,.9)}
  68%{transform:translate3d(-18px,0,10px) rotateY(-10deg) rotateZ(-12deg) scale(.97)}
  84%{transform:translate3d(4px,0,0) rotateZ(-7deg)}
  100%{transform:rotate(-8deg)}}
@keyframes coll2{
  0%{opacity:0;transform:translate3d(62vw,-30px,-700px) rotateY(-85deg) rotateZ(35deg)}
  42%{opacity:1;transform:translate3d(-10px,0,120px) rotateY(-18deg) rotateZ(6deg)}
  52%{transform:translate3d(-22px,0,90px) rotateY(6deg) rotateZ(2deg) scale(1.08,.9)}
  68%{transform:translate3d(18px,0,10px) rotateY(10deg) rotateZ(12deg) scale(.97)}
  84%{transform:translate3d(-4px,0,0) rotateZ(7deg)}
  100%{transform:rotate(8deg)}}
.mm-spark{background:var(--grad);box-shadow:0 0 0 4px #fff,0 0 40px 8px rgba(255,255,255,.55);animation:sparkin .6s .5s var(--ease-spring) both}
.mm-ring{border-color:rgba(255,255,255,.8);animation:ring 1.3s .5s ease-out both}
.mm h2{font-size:44px;font-weight:850;letter-spacing:-.045em;color:#fff;text-shadow:0 0 40px rgba(255,255,255,.35),0 4px 30px rgba(0,0,0,.4);animation:popin .7s .62s var(--ease-spring) both}
.mm h2 span{background:linear-gradient(100deg,#FFE066,#FFB340 60%,#FF9F0A);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 18px rgba(255,140,60,.55))}
body.mode-business .mm h2 span{background:linear-gradient(100deg,#9BE7FF,#3DA2FF 50%,#5EEAD4);-webkit-background-clip:text;background-clip:text}
.mm .sub{color:rgba(255,255,255,.9);text-shadow:0 1px 10px rgba(0,0,0,.5)}
.mm-intro{border-radius:26px;background:rgba(255,255,255,.95);color:#1D1D1F;box-shadow:inset 0 1px 0 #fff,0 30px 70px -30px rgba(0,0,0,.8)}
.mm-intro .h{color:#0062CC}
.mm-intro .caret{background:#0062CC}
.mm-first{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:22px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.mm-first .ic{background:linear-gradient(135deg,#FFE066,#FF9F0A);color:#3A2600;border-radius:999px}
.mm-actions .btn-w{background:#fff;color:#1D1D1F;box-shadow:0 14px 34px -14px rgba(255,255,255,.55)}
.mm-actions .btn-o{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);color:#fff;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.mm-actions .btn-o[data-act=mmoffer]{border-color:rgba(255,214,10,.7)!important;box-shadow:0 0 24px -8px rgba(255,214,10,.7)}
.mm-close{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}

/* =====================================================================
   FX layer: launch intro, page transitions, level-up, particles
   ===================================================================== */
.fx-canvas{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:135}
.fx-ring{position:fixed;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;pointer-events:none;z-index:134;
  border:2px solid var(--c,#30D158);box-shadow:0 0 24px var(--c,#30D158),inset 0 0 18px var(--c,#30D158);animation:fxring .9s var(--ease-out) forwards}
@keyframes fxring{from{transform:scale(.25);opacity:1}to{transform:scale(5.5);opacity:0}}

/* launch intro */
.intro{position:fixed;inset:0;z-index:300;display:grid;place-items:center;overflow:hidden;background:#000;color:#fff;cursor:pointer;
  animation:introOut .8s var(--ease-out) 2s forwards}
.intro .i-au{position:absolute;inset:-10vmax}
.intro .i-au i{position:absolute;border-radius:50%;opacity:0;animation:iBlob 2.4s var(--ease-out) forwards}
.intro .i-au .a{width:70vmax;height:70vmax;left:-10vmax;top:-20vmax;background:radial-gradient(circle,#0A84FF,transparent 62%)}
.intro .i-au .b{width:64vmax;height:64vmax;right:-14vmax;top:0;background:radial-gradient(circle,#00C7BE,transparent 62%);animation-delay:.1s}
.intro .i-au .c{width:70vmax;height:70vmax;left:20vmax;bottom:-36vmax;background:radial-gradient(circle,#1D7BFF,transparent 62%);animation-delay:.2s}
.intro .i-au .d{width:40vmax;height:40vmax;left:30vmax;top:20vmax;background:radial-gradient(circle,#FF9F0A,transparent 64%);animation-delay:.3s}
@keyframes iBlob{from{opacity:0;transform:scale(.6)}to{opacity:.7;transform:scale(1.05)}}
.i-stage{position:relative;display:grid;justify-items:center;gap:18px;perspective:900px}
.i-orb{width:132px;height:132px;border-radius:42px;position:relative;display:grid;place-items:center;transform-style:preserve-3d;
  background:linear-gradient(160deg,rgba(255,255,255,.35),rgba(255,255,255,.06));-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  border:1px solid rgba(255,255,255,.45);box-shadow:inset 0 2px 0 rgba(255,255,255,.7),inset 0 -20px 40px rgba(255,255,255,.08),0 40px 80px -30px rgba(0,0,0,.9),0 0 80px -10px rgba(10,132,255,.55);
  animation:orbIn 1.2s var(--ease-spring) .15s both}
.i-orb::before{content:"";position:absolute;inset:10px;border-radius:32px;background:conic-gradient(from 210deg,#0A84FF,#64D2FF,#30D158,#FFD60A,#FF9F0A,#0A84FF);filter:saturate(1.1);opacity:.95;animation:spin 6s linear infinite}
.i-orb::after{content:"";position:absolute;inset:16px;border-radius:26px;background:linear-gradient(160deg,#2C2C2E,#0A0A0A)}
.i-orb b{position:relative;z-index:1;font-size:56px;font-weight:850;letter-spacing:-.04em;background:linear-gradient(180deg,#fff,#D8D8F0);-webkit-background-clip:text;background-clip:text;color:transparent}
.i-orb .spec{position:absolute;inset:0;border-radius:inherit;z-index:2;overflow:hidden}
.i-orb .spec::after{content:"";position:absolute;top:-30%;bottom:-30%;width:40%;left:0;transform:translateX(-150%) skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:specSweep 1.1s .9s var(--ease-out) forwards}
@keyframes specSweep{to{transform:translateX(380%) skewX(-20deg)}}
@keyframes orbIn{0%{opacity:0;transform:translateZ(-500px) rotateX(40deg) rotateY(-30deg) scale(.6)}60%{opacity:1}100%{opacity:1;transform:none}}
.i-word{display:flex;font-size:44px;font-weight:800;letter-spacing:-.045em}
.i-word span{display:inline-block;opacity:0;animation:letterIn .8s var(--ease-spring) both}
@keyframes letterIn{from{opacity:0;transform:translate3d(0,26px,0) rotateX(-70deg);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.i-tag{font-size:15px;color:rgba(255,255,255,.75);opacity:0;animation:fadeUp .7s var(--ease-out) 1.15s forwards}
@keyframes fadeUp{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
@keyframes introOut{to{opacity:0;transform:scale(1.18);visibility:hidden}}
body.revealing .main-col,body.revealing .tabbar{animation:appIn 1s var(--ease-out) both}
body.revealing .sidebar{animation:appInL 1s var(--ease-out) .05s both}
@media (min-width:1024px){body.revealing .agent{animation:appInR 1s var(--ease-out) .12s both}}
@keyframes appIn{from{opacity:0;transform:translate3d(0,40px,0) scale(.94)}}
@keyframes appInL{from{opacity:0;transform:perspective(1400px) translate3d(-40px,0,-120px) rotateY(14deg)}}
@keyframes appInR{from{opacity:0;transform:perspective(1400px) translate3d(40px,0,-120px) rotateY(-14deg)}}

/* page transitions: old view recedes into depth (View Transitions API), new view rises in staggered layers */
#main{view-transition-name:main}
::view-transition-old(root),::view-transition-new(root){animation:none}
::view-transition-group(main){animation-duration:0s}
::view-transition-old(main){animation:vtOut .34s var(--ease-out) both}
::view-transition-new(main){animation:none;opacity:1}
@keyframes vtOut{to{opacity:0;transform:scale(.95) translateY(-10px)}}
.screen{animation:none}
.screen.enter>*{animation:riseIn .75s var(--ease-out) backwards}
.screen.enter>*:nth-child(2){animation-delay:.05s}.screen.enter>*:nth-child(3){animation-delay:.1s}.screen.enter>*:nth-child(4){animation-delay:.15s}
.screen.enter>*:nth-child(5){animation-delay:.2s}.screen.enter>*:nth-child(6){animation-delay:.25s}.screen.enter>*:nth-child(n+7){animation-delay:.3s}
@keyframes riseIn{from{opacity:0;transform:perspective(1200px) translate3d(0,26px,-70px) rotateX(7deg)}}

/* milestone / level-up */
.lvlup{position:fixed;inset:0;z-index:126;display:grid;place-items:center;padding:20px;overflow:hidden;cursor:pointer;
  background:radial-gradient(circle at 50% 40%,rgba(255,170,0,.38),transparent 42%),radial-gradient(circle at 50% 45%,rgba(10,132,255,.3),transparent 65%),rgba(0,0,0,.84);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);animation:fade .35s both}
.lvlup.out{animation:fadeOut .5s forwards}
@keyframes fadeOut{to{opacity:0;visibility:hidden}}
.lv-rays{position:absolute;left:50%;top:40%;width:170vmax;height:170vmax;margin:-85vmax 0 0 -85vmax;opacity:0;
  background:repeating-conic-gradient(from 0deg,rgba(255,214,10,.16) 0 5deg,transparent 5deg 16deg);
  -webkit-mask:radial-gradient(circle,#000 0,transparent 48%);mask:radial-gradient(circle,#000 0,transparent 48%);animation:raysIn .8s .5s forwards,spin 30s linear infinite}
.lv-card{position:relative;text-align:center;color:#fff;max-width:440px}
.lv-badge{width:156px;height:156px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;font-size:70px;position:relative;
  background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.95),transparent 30%),conic-gradient(from 210deg,#FFE066,#FF9F0A,#FFD60A,#64D2FF,#30D158,#FFE066);
  box-shadow:0 0 0 6px rgba(255,255,255,.16),0 0 90px 12px rgba(255,170,0,.5),inset 0 -12px 30px rgba(0,0,0,.25);animation:coinIn 1.1s var(--ease-spring) both}
.lv-badge::after{content:"";position:absolute;inset:14px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#3A3A3C,#0B0B0C);box-shadow:inset 0 2px 0 rgba(255,255,255,.3)}
.lv-badge span{position:relative;z-index:1;font-family:"Apple Color Emoji","Noto Color Emoji","Segoe UI Emoji",sans-serif;filter:drop-shadow(0 10px 14px rgba(0,0,0,.5))}
@keyframes coinIn{0%{opacity:0;transform:perspective(800px) translateZ(-700px) rotateY(-720deg) scale(.3)}70%{opacity:1;transform:perspective(800px) translateZ(50px) rotateY(12deg) scale(1.08)}100%{opacity:1;transform:none}}
.lv-k{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:rgba(255,214,10,.16);color:#FFE066;border:1px solid rgba(255,214,10,.4);animation:fadeUp .5s .7s both}
.lv-card h2{font-size:40px;font-weight:850;letter-spacing:-.045em;margin:12px 0 6px;background:linear-gradient(100deg,#fff,#FFE066 50%,#FF9F0A);-webkit-background-clip:text;background-clip:text;color:transparent;animation:popin .7s .8s var(--ease-spring) both}
.lv-card p{color:rgba(255,255,255,.85);animation:fadeUp .5s 1s both}
.lv-card .btn{margin-top:18px;background:#fff;color:#1D1D1F;animation:fadeUp .5s 1.15s both}

/* admin sheet / form */
.sheet-wrap{position:fixed;inset:0;z-index:110;display:grid;place-items:end center;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:fade .25s both;padding:10px}
.sheet{width:min(560px,100%);max-height:calc(100dvh - 20px);overflow-y:auto;border-radius:34px;padding:22px;box-shadow:inset 0 1px 0 var(--hi),var(--shadow-lg);animation:sheetIn .6s var(--ease-spring) both;
  background:linear-gradient(180deg,var(--sheen),transparent 30%),linear-gradient(var(--glass-tint),var(--glass-tint))}
body.dark .sheet{background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 30%),linear-gradient(rgba(28,28,30,.9),rgba(28,28,30,.9))}
@keyframes sheetIn{from{opacity:0;transform:perspective(1000px) translate3d(0,40px,-120px) rotateX(10deg)}}
@media (min-width:640px){.sheet-wrap{place-items:center}}
.apply-sheet h2{margin:4px 0 0}
.apply-lead{margin:8px 0 0;color:var(--muted);font-size:13.5px}
.apply-desc{margin:12px 0 0;font-size:14px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.apply-note{margin:8px 0 0;font-size:13px;color:var(--muted)}
.apply-person{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.apply-person b{display:block;font-size:16px}
.apply-person .role{color:var(--muted);font-size:12.5px;margin-top:2px}
.apply-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.apply-actions .btn{flex:1;min-width:140px;justify-content:center;text-decoration:none}
.apply-empty{margin-top:14px}
.apply-secondary{display:inline-block;margin-top:12px;font-size:13.5px;font-weight:650}
.apply-source{margin:16px 0 0;font-size:12px;color:var(--muted)}
.sheet h2{font-size:22px;font-weight:780;letter-spacing:-.03em}
.form{display:grid;gap:10px;margin-top:14px}
.form .two-f{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form label{display:grid;gap:5px;font-size:12.5px;font-weight:650;color:var(--muted)}
.form input,.form textarea,.form select{width:100%;border:1px solid var(--border);background:var(--surface-2);border-radius:14px;padding:10px 12px;font-size:14.5px;color:var(--text);outline:none;transition:border-color .2s,box-shadow .2s}
body:not(.dark) .form input,body:not(.dark) .form textarea,body:not(.dark) .form select{background:rgba(255,255,255,.8)}
.form select option{background:var(--solid);color:var(--text)}
.form input:focus,.form textarea:focus,.form select:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.form textarea{min-height:76px;resize:vertical}
.form .chk-row{display:flex;gap:16px;align-items:center;font-size:14px;font-weight:600;color:var(--text)}
.form .chk-row label{display:flex;gap:6px;align-items:center;color:var(--text);font-size:14px}
.form .chk-row input{width:auto}
.form-btns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:6px}

/* ---------- reduced motion: keep it calm ---------- */
@media (prefers-reduced-motion:reduce){
  .aurora i,.hero-deco,.tab-agent .orb,.dj::after,.dj-deco,.dj-card.on .dj-emoji,.dj-card.on .dj-sweep::after,.mm-rays,.lv-rays,.i-orb::before{animation:none!important}
  .intro{display:none}
  .au-layer{transform:none!important}
  ::view-transition-old(main){animation:none}
  .screen.enter>*{animation:none}
}
body.no-motion .aurora i,body.no-motion .hero-deco,body.no-motion .tab-agent .orb,body.no-motion .dj::after,body.no-motion .dj-deco,body.no-motion .dj-card.on .dj-emoji,body.no-motion .dj-sweep::after,body.no-motion .mm-rays,body.no-motion .lv-rays{animation:none!important}
body.no-motion .screen.enter>*{animation:none}

/* --- review fixes (round 3) --- */
.hero>*:not(.hero-deco){position:relative;z-index:2}
.seg.mode button[aria-pressed=true],.seg.mode button[data-mode=privat][aria-pressed=true],.seg.mode button[data-mode=business][aria-pressed=true],body.dark .seg.mode button[aria-pressed=true]{background:var(--grad);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 18px -6px var(--grad-glow)}
.seg.mode button[aria-pressed=true]::before{background:#fff;box-shadow:0 0 8px rgba(255,255,255,.9)}
.dj-card .mine{transform:translateZ(120px);white-space:nowrap}
.sheet::before{display:none}

/* =====================================================================
   Round 4 · Apple-system balance: systemBlue primary, graphite/black +
   crisp white structure, other hues only as category/feature accents.
   ===================================================================== */
/* primary pills: white on dark, black on light */
.btn-primary,.btn-primary:hover{background:#1D1D1F;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 28px -14px rgba(0,0,0,.55)}
body.dark .btn-primary,body.dark .btn-primary:hover{background:#fff;color:#000;box-shadow:inset 0 -1px 0 rgba(0,0,0,.08),0 12px 30px -14px rgba(255,255,255,.35)}
.btn-primary::after{display:none}
/* segmented mode switch: white thumb on dark / black thumb on light, coloured dot */
.seg.mode button[aria-pressed=true],.seg.mode button[data-mode=privat][aria-pressed=true],.seg.mode button[data-mode=business][aria-pressed=true]{background:#1D1D1F;color:#fff;box-shadow:0 4px 14px -6px rgba(0,0,0,.45)}
body.dark .seg.mode button[aria-pressed=true],body.dark .seg.mode button[data-mode=privat][aria-pressed=true],body.dark .seg.mode button[data-mode=business][aria-pressed=true]{background:#fff;color:#000;box-shadow:0 4px 16px -6px rgba(255,255,255,.3)}
.seg.mode button[aria-pressed=true]::before{background:#0A84FF;box-shadow:0 0 8px rgba(10,132,255,.8)}
.seg.mode button[data-mode=business][aria-pressed=true]::before{background:#00C7BE;box-shadow:0 0 8px rgba(0,199,190,.8)}
body.dark .seg button[aria-pressed=true]{background:rgba(255,255,255,.18)}
/* avatar + brand: graphite with white */
.avatar{background:linear-gradient(160deg,#3A3A3C,#1C1C1E);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 0 1px rgba(255,255,255,.12)}
body:not(.dark) .avatar{background:#1D1D1F}
/* Dagens jobb chrome: crisp white glass pills with black text */
.dj-pill,.dj-arrow{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.72));background-color:transparent;color:#1D1D1F;text-shadow:none;border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #fff,0 10px 26px -14px rgba(0,0,0,.45)}
button.dj-pill:hover,.dj-arrow:hover:not(:disabled){background-color:transparent;background:#fff}
.dj-dots{background:rgba(255,255,255,.72);border-color:rgba(255,255,255,.9)}
.dj-dots i{background:rgba(0,0,0,.22)}
.dj-dots i.on{background:#1D1D1F;box-shadow:none}
.dj-viewport:focus-visible{outline-color:#fff}
/* dark info card = graphite */
body.dark .dj-info{background:linear-gradient(180deg,rgba(44,44,46,.98),rgba(24,24,26,.98))}
/* nav accents in systemBlue */
.tab[aria-current=page]::before{background:#0A84FF;box-shadow:0 0 12px rgba(10,132,255,.7)}
.demo-banner b{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--accent-ink)}
/* AI agent identity: multi-hue orb, otherwise neutral graphite/white + blue */
.ag-tabs button[aria-selected=true]{color:var(--text);border-color:var(--text)}
.msg.bot .who{color:var(--accent-ink)}
.action-h{background:var(--surface-2);color:var(--muted)}
.action{border-color:var(--border)}
.typing i{background:var(--accent)}
/* reward accents stay warm: gold milestones, green success */
.hero-deco{opacity:.8}

/* =====================================================================
   ROUND 5 – company logos, generators (image / PDF / website)
   ===================================================================== */
.klogo{color:#fff}
.klogo svg{width:62%;height:62%;position:relative;z-index:1;overflow:visible;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}
.klogo::after{width:70%;height:70%;right:-26%;bottom:-30%;background:radial-gradient(circle,rgba(255,255,255,.28),transparent 70%)}
.logo.xs{width:24px;height:24px;font-size:9px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.logo.sm{width:34px;height:34px;font-size:11px}
.logo.xl{width:84px;height:84px}
.klock{display:inline-flex;align-items:center;gap:12px;min-width:0}
.klock-t{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.kwm{font-size:19px;color:var(--text);white-space:nowrap}
.klock-t small{font-size:10.5px;color:var(--muted);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-top:3px}
.klock.xl .logo{width:72px;height:72px}.klock.xl .kwm{font-size:30px}
/* match card cover branding */
.mcard .cover{overflow:visible}
.cover-mark{position:absolute;right:-6px;top:-18px;width:150px;height:150px;color:#fff;opacity:.16;transform:rotate(-12deg);pointer-events:none;overflow:hidden}
.cover-mark svg{width:100%;height:100%}
.mcard .cover{isolation:isolate}
.cover-wm{position:absolute;left:16px;top:14px;color:#fff;max-width:60%}
.cover-wm .kwm{color:#fff;font-size:17px;text-shadow:0 1px 10px rgba(0,0,0,.25)}
.mcard .cover .sponsored{z-index:2}
.mcard .cover .cover-wm+.logo{z-index:2}
.mcard .cover:has(.sponsored) .cover-wm{top:auto;bottom:12px;left:96px}
/* tables / rows */
.tco{display:inline-flex;align-items:center;gap:9px}.tco .logo{border-radius:8px}
.dj-by{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.dj-by .logo.xs{width:20px;height:20px}
.dj-person{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.08)}
body.dark .dj-person{background:rgba(255,255,255,.14)}
.ad-brand{display:inline-flex;align-items:center;gap:6px}.ad-brand .logo.xs{width:20px;height:20px;box-shadow:0 0 0 1.5px rgba(255,255,255,.7)}
/* profile brand card */
.brand-stage{display:flex;align-items:center;justify-content:center;padding:26px 14px;border-radius:20px;background:radial-gradient(120% 120% at 20% 0%,rgba(10,132,255,.14),transparent 60%),var(--surface-2);border:1px solid var(--border)}
.sw{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
/* quick create chips (agent) */
.ag-quick{display:flex;gap:6px;margin:0 0 8px;overflow-x:auto;scrollbar-width:none}
.ag-quick::-webkit-scrollbar{display:none}
.ag-quick button{flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font-size:12.5px;font-weight:650;color:var(--text);background:var(--glass-strong);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--hi);transition:transform .2s,background .2s}
.ag-quick button svg{color:var(--violet)}
.ag-quick button:hover{transform:translateY(-1px);background:var(--violet-soft)}
/* generator cards */
.gen-card .action-t{margin-bottom:10px}
.gen-stage{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:1/1;max-height:230px;margin:0 auto;background:linear-gradient(135deg,color-mix(in srgb,var(--violet-fill) 30%,transparent),color-mix(in srgb,var(--fjord) 22%,transparent));display:grid;place-items:center}
.gen-stage.story{aspect-ratio:9/16;max-height:260px}
.gen-stage.gen-genpdf{aspect-ratio:1/1.414;max-height:250px;background:linear-gradient(180deg,#fff,#eef2f7)}
.gen-stage.gen-gensite{aspect-ratio:16/10;max-height:none;width:100%}
.gen-shim{position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);background-size:250% 100%;animation:genShim 1.2s linear infinite}
@keyframes genShim{from{background-position:130% 0}to{background-position:-130% 0}}
.gen-orb{position:relative;width:56px;height:56px;border-radius:18px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--violet-fill),var(--fjord));box-shadow:0 10px 30px -8px var(--violet-fill);animation:genPulse 1.1s ease-in-out infinite}
@keyframes genPulse{50%{transform:scale(1.08) rotate(4deg)}}
.gen-steps{list-style:none;padding:0;margin:12px 0 8px;display:grid;gap:6px;font-size:13px}
.gen-steps li{display:flex;align-items:center;gap:8px;color:var(--muted);animation:genStep .3s ease-out both;animation-delay:calc(var(--i)*.55s)}
.gen-steps .gs-dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--border);position:relative;animation:genDot .3s ease-out both;animation-delay:calc(var(--i)*.55s + .5s)}
@keyframes genStep{from{opacity:.25}to{opacity:1;color:var(--text)}}
@keyframes genDot{to{background:var(--mint);border-color:var(--mint);box-shadow:0 0 0 4px var(--mint-soft)}}
.gen-bar{height:5px;border-radius:9px;background:var(--surface-2);overflow:hidden}
.gen-bar i{display:block;height:100%;width:100%;border-radius:inherit;background:linear-gradient(90deg,var(--violet-fill),var(--fjord));transform-origin:0 50%;animation:genBar 1.9s cubic-bezier(.3,.7,.4,1) both}
@keyframes genBar{from{transform:scaleX(.04)}to{transform:scaleX(1)}}
.gen-img{border-radius:16px;overflow:hidden;box-shadow:0 18px 40px -20px rgba(0,0,0,.6);animation:genReveal .5s cubic-bezier(.2,.8,.2,1) both}
.gen-img img{display:block;width:100%;height:auto}
.gen-img.story{max-width:200px;margin:0 auto}
@keyframes genReveal{from{opacity:0;transform:scale(.94);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.gen-meta{font-size:11.5px;color:var(--muted);margin-top:8px}
.gen-edit{display:grid;gap:8px}
.gen-edit label{display:grid;gap:4px;font-size:12px;font-weight:600;color:var(--muted)}
.gen-edit input{font:inherit;font-size:14px;color:var(--text);padding:9px 11px;border-radius:12px;border:1px solid var(--border);background:var(--surface-2)}
.gen-edit input:focus{outline:2px solid var(--violet-fill);outline-offset:1px}
/* PDF preview (always paper-white) */
.pp{display:flex;justify-content:center;padding:12px;border-radius:16px;background:linear-gradient(180deg,#d9dde3,#c9ced6);animation:genReveal .5s cubic-bezier(.2,.8,.2,1) both}
body.dark .pp{background:linear-gradient(180deg,#2a2d33,#1d1f24)}
.pp-page{position:relative;width:100%;max-width:260px;aspect-ratio:1/1.414;background:#fff;color:#1d1d1f;border-radius:4px;padding:16px 14px 12px;box-shadow:0 14px 30px -14px rgba(0,0,0,.55);font-size:7px;line-height:1.35;display:flex;flex-direction:column;gap:9px;overflow:hidden}
.pp-bar{position:absolute;left:0;right:0;top:0;height:3px}
.pp-h{display:flex;align-items:center;gap:6px;border-bottom:1px solid #e5e5ea;padding-bottom:8px}
.pp-h .logo.xs{width:22px;height:22px}
.pp-co{display:flex;flex-direction:column;flex:1;min-width:0}.pp-co b{font-size:9px}.pp-co small,.pp-t small{color:#6e6e73;font-size:6px}
.pp-t{display:flex;flex-direction:column;align-items:flex-end}.pp-t b{font-size:12px;letter-spacing:.02em}
.pp-to{display:grid;grid-template-columns:1fr 1fr;gap:6px}.pp-to small{display:block;color:#86868b;font-weight:700;font-size:5.5px}.pp-to b{font-size:7.5px}
.pp-tb{width:100%;border-collapse:collapse}.pp-tb th{font-size:6px;text-align:left;padding:4px;background:#eef4fd}.pp-tb td{padding:4px;border-bottom:1px solid #eee}.pp-tb .r{text-align:right}
.pp-sum{margin-left:40%;display:grid;gap:3px}.pp-sum div{display:flex;justify-content:space-between}
.pp-pay{color:#fff;border-radius:4px;padding:5px 6px;margin-top:3px;align-items:center}.pp-pay b{font-size:9px}
.pp-hero{display:flex;gap:8px;align-items:center;background:color-mix(in srgb,var(--c) 10%,#fff);border-radius:6px;padding:10px}.pp-hero b{display:block;font-size:10px}.pp-hero small{color:#6e6e73}
.pp-svc{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.pp-svc span{background:#f5f5f7;border-radius:4px;padding:8px 5px;font-weight:700;display:flex;gap:4px;align-items:center}.pp-svc i{width:3px;height:10px;border-radius:2px}
.pp-lines{display:grid;gap:4px}.pp-lines i{height:4px;border-radius:2px;background:#ececf0}.pp-lines i:nth-child(2){width:80%}.pp-lines i:nth-child(3){width:60%}
.pp-f{margin-top:auto;border-top:1px solid #eee;padding-top:5px;color:#86868b;font-size:5.5px}
/* website preview */
.gen-site{border-radius:16px;overflow:hidden;border:1px solid var(--border);background:#fbfbfd;animation:genReveal .5s cubic-bezier(.2,.8,.2,1) both}
.gen-site .browser .url{margin-left:6px}
.gs-frame{position:relative;height:250px;overflow:hidden}
.gs-frame iframe{position:absolute;left:0;top:0;width:250%;height:250%;border:0;transform:scale(.4);transform-origin:0 0;pointer-events:none;background:#fbfbfd}
/* full-screen site */
.site-full{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;background:rgba(6,6,13,.72);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);animation:sfIn .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes sfIn{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:none}}
.sf-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;margin:10px 10px 0;border-radius:20px;background:var(--glass-strong);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--hi)}
.sf-bar .browser{background:none;border:0;padding:0}.sf-bar .browser i,.gen-site .browser i{width:10px;height:10px;border-radius:50%;background:#FF5F57;display:inline-block}
.sf-bar .browser i:nth-child(2),.gen-site .browser i:nth-child(2){background:#FEBC2E}.sf-bar .browser i:nth-child(3),.gen-site .browser i:nth-child(3){background:#28C840}
.sf-bar .url{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text);background:var(--surface-2);padding:6px 12px;border-radius:999px}
.sf-bar .spacer{flex:1}
.sf-stage{flex:1;display:flex;justify-content:center;align-items:stretch;padding:10px;min-height:0}
.sf-frame{width:100%;height:100%;border:0;border-radius:18px;background:#fbfbfd;box-shadow:0 30px 80px -30px rgba(0,0,0,.8);transition:width .4s cubic-bezier(.2,.8,.2,1),border-radius .4s}
.sf-stage.mobile .sf-frame{width:390px;max-width:100%;border-radius:36px;box-shadow:0 0 0 10px #111,0 30px 80px -30px rgba(0,0,0,.8)}
@media (max-width:640px){.sf-dev{display:none}.sf-bar .url{max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
/* Skapa hub */
.gen-hub .card-h h3{display:inline-flex;align-items:center;gap:6px}
.gen-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gen-tile{position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:left;padding:14px;border-radius:20px;background:var(--glass);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--hi);color:var(--text);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.gen-tile:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 var(--hi),0 18px 36px -22px rgba(0,0,0,.6)}
.gt-ic{grid-row:1/3;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,var(--g2),var(--g1));box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 18px -8px var(--g1)}
.gen-tile b{font-size:15px}.gen-tile small{grid-column:2;color:var(--muted);font-size:12.5px;line-height:1.3}
.gt-go{grid-row:1/3;grid-column:3;color:var(--muted)}
@media (max-width:900px){.gen-tiles{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.gen-shim,.gen-orb,.gen-bar i,.gen-steps li,.gen-steps .gs-dot,.gen-img,.pp,.gen-site,.site-full{animation:none!important}.gen-steps .gs-dot{background:var(--mint);border-color:var(--mint)}}
body.no-motion .gen-shim,body.no-motion .gen-orb{animation:none}
/* r5: keep the match-moment close button above the 3D logo stage */
.mm-close{z-index:5}
.mm-logos{z-index:1;pointer-events:none}
.cover-clip{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}