/* ==========================================================================
   3SA Dialer – "Se systemet" showcase (#demo)
   Pure HTML/CSS/JS replica of the real app, played as short animated scenes.
   Everything is prefixed dm-. The stage is a fixed 1240x775 canvas that is
   scaled with transform by showcase.js, so the scenes stay pixel-accurate.
   Base styles = FINAL state of each scene; keyframes only define the "from"
   states (fill-mode both). With prefers-reduced-motion the final frame shows.
   ========================================================================== */

/* ---------- section / player chrome (landing side) ---------- */
.dm{margin-top:48px;position:relative}
.dm-strip{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding:0}
.dm-tab{position:relative;flex:1 1 150px;min-width:0;border:1px solid #EADFD3;background:rgba(255,255,255,.62);color:#6B5E54;cursor:pointer;border-radius:14px;padding:12px 14px 14px;text-align:left;font:600 13.5px 'Geist',system-ui,sans-serif;letter-spacing:-.01em;transition:color .3s,background .3s,border-color .3s,transform .3s;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.dm-tab:hover{color:#1A1410;transform:translateY(-1px)}
.dm-tab.on{color:#1A1410;background:#fff;border-color:#E3C9B4}
.dm-tab .dm-tab-n{display:block;font:500 11px 'Geist Mono',ui-monospace,monospace;letter-spacing:.1em;color:#B4501A;margin-bottom:4px}
.dm-tab .dm-tab-bar{position:absolute;left:14px;right:14px;bottom:8px;height:3px;border-radius:3px;background:rgba(26,20,16,.08);overflow:hidden}
.dm-tab .dm-tab-bar i{position:absolute;inset:0;background:#EB7A34;transform:scaleX(0);transform-origin:left}
.dm-tab.on .dm-tab-bar i{animation:dmProg var(--dm-dur,10s) linear both}
.dm-tab.done .dm-tab-bar i{transform:scaleX(1);background:rgba(235,122,52,.45)}
.dm-paused .dm-tab.on .dm-tab-bar i{animation-play-state:paused}
@keyframes dmProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.dm-tab:focus-visible{outline:2px solid #EB7A34;outline-offset:2px}

.dm-scalewrap{position:relative;width:100%}
.dm-win{position:absolute;left:0;top:0;width:1240px;height:819px;border-radius:24px;overflow:hidden;background:#fff;transform-origin:0 0;box-shadow:0 2px 4px rgba(26,20,16,.06),0 30px 80px -30px rgba(26,20,16,.45),0 70px 140px -50px rgba(180,80,26,.25);border:1px solid rgba(26,20,16,.08)}
.dm-chrome{height:44px;background:#15161c;display:flex;align-items:center;padding:0 18px;gap:14px;position:relative}
.dm-dots{display:flex;gap:7px}
.dm-dots i{width:11px;height:11px;border-radius:50%;background:#ff5f57}
.dm-dots i:nth-child(2){background:#febc2e}.dm-dots i:nth-child(3){background:#28c840}
.dm-url{margin:0 auto;height:26px;min-width:320px;border-radius:8px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.72);font:500 12px 'Inter',system-ui,sans-serif;display:flex;align-items:center;justify-content:center;gap:7px;letter-spacing:.01em}
.dm-url svg{width:11px;height:11px;opacity:.7}
.dm-live{position:absolute;right:18px;top:0;height:44px;display:flex;align-items:center;gap:6px;font:600 10.5px 'Geist Mono',ui-monospace,monospace;letter-spacing:.1em;color:rgba(255,255,255,.55)}
.dm-live b{width:6px;height:6px;border-radius:50%;background:#21C45D;box-shadow:0 0 0 3px rgba(33,196,93,.25);animation:dmPulse 1.6s ease-in-out infinite}

/* ---------- app frame ---------- */
.dm-app{position:absolute;left:0;top:44px;width:1240px;height:775px;background:#fff;font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.45;color:#222639;letter-spacing:0;-webkit-font-smoothing:antialiased;text-align:left;overflow:hidden}
.dm-app *{box-sizing:border-box}
.dm-app button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:default}
.dm-app h1,.dm-app h2,.dm-app h3,.dm-app p{margin:0;font-weight:inherit;letter-spacing:0}
.dm-app svg{display:block;flex:none}
.dm-i{display:inline-flex;width:16px;height:16px;flex:none}
.dm-i svg{width:100%;height:100%}

/* sidebar (Ember theme) */
.dm-sb{position:absolute;left:0;top:0;width:64px;height:775px;display:flex;flex-direction:column;align-items:center;padding:14px 0 6px;background-color:#1a1b23;background-image:radial-gradient(140% 55% at 50% 105%,rgba(249,115,22,.55),transparent 65%),linear-gradient(180deg,#1a1b23 0%,#1f1d22 55%,#3a1d0e 100%);z-index:3}
.dm-sb-logo{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.04);padding:3px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.dm-sb-logo img{width:34px;height:auto;display:block}
.dm-sb-bell{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);margin-bottom:8px}
.dm-sb-bell .dm-i{width:20px;height:20px}
.dm-sb-bell b{position:absolute;top:2px;right:2px;min-width:22px;height:18px;padding:0 5px;border-radius:999px;background:#F97015;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}
.dm-sb-nav{position:relative;display:flex;flex-direction:column;gap:8px}
.dm-sb-nav.dm-sb-bot{margin-top:auto}
.dm-sb-it{position:relative;width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);z-index:1;transition:color .3s}
.dm-sb-it .dm-i{width:20px;height:20px}
.dm-sb-it.on{color:#fff}
.dm-sb-sq{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:8px;background:linear-gradient(135deg,#fb923c,#ea580c);box-shadow:0 8px 18px -8px rgba(249,115,22,.9);transition:top .4s cubic-bezier(.2,.8,.2,1),opacity .3s;opacity:0}
.dm-sb-sq.show{opacity:1}

/* content + scenes */
.dm-content{position:absolute;left:64px;top:0;width:1176px;height:775px;overflow:hidden;background:#fff}
.dm-scene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s;background:#fff}
.dm-scene.dm-on{opacity:1;visibility:visible;transition:opacity .35s ease}
.dm-paused .dm-scene *{animation-play-state:paused !important}
.dm-pg{position:absolute;inset:0;padding:40px 24px 0}

/* fake cursor */
.dm-cur{position:absolute;left:0;top:0;width:22px;height:22px;z-index:40;pointer-events:none;transform:translate(700px,560px);filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.dm-cur svg{width:22px;height:22px}
.dm-cur::after{content:"";position:absolute;left:-8px;top:-8px;width:18px;height:18px;border-radius:50%;border:2px solid #F97015;opacity:0;transform:scale(.4)}
@keyframes dmClick{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(2.2)}}

/* Aura FAB */
.dm-fab{position:absolute;right:22px;bottom:22px;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#c026d3 55%,#f97316);box-shadow:0 14px 30px -10px rgba(124,58,237,.8);display:flex;align-items:center;justify-content:center;color:#fff;z-index:5}
.dm-fab::before{content:"";position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(from 0deg,#7c3aed,#c026d3,#f97316,#7c3aed);filter:blur(3px);z-index:-1;opacity:.75;animation:dmSpin 3s linear infinite}
.dm-fab .dm-i{width:26px;height:26px;animation:dmTwinkle 3s ease-in-out infinite}
@keyframes dmSpin{to{transform:rotate(360deg)}}
@keyframes dmTwinkle{0%,100%{transform:none}50%{transform:scale(1.12) rotate(12deg)}}

/* ---------- shared app primitives ---------- */
.dm-bc{display:flex;align-items:center;gap:8px;font-size:14px;color:#6B7280;margin-bottom:8px}
.dm-bc .dm-i{width:16px;height:16px}
.dm-bc b{font-weight:400;color:#222639}
.dm-h1{font-size:24px;font-weight:700;line-height:32px;margin-bottom:24px}
.dm-tabs{display:flex;gap:4px;border-bottom:1px solid #E5E7EB;position:relative}
.dm-tab-i{display:flex;align-items:center;gap:8px;padding:8px 16px 10px;font-size:14px;font-weight:500;color:#6B7280;position:relative;border-radius:8px 8px 0 0}
.dm-tab-i.on{color:#F97015}
.dm-tab-i.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#F97015;border-radius:2px 2px 0 0}
.dm-h2{font-size:20px;font-weight:600;line-height:28px}
.dm-sub{font-size:13.5px;color:#6B7280;margin-top:3px}
.dm-muted{color:#6B7280}
.dm-pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px 0 8px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.dm-pill i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.dm-pill.st-ub{color:#9CA3AF;background:rgba(156,163,175,.1)}
.dm-pill.st-ge{color:#2563EB;background:rgba(37,99,235,.1)}
.dm-pill.st-su{color:#16A34A;background:rgba(22,163,74,.1)}
.dm-pill.st-te{color:#7C3AED;background:rgba(124,58,237,.1)}
.dm-pill.st-ik{color:#DC2626;background:rgba(220,38,38,.1)}
.dm-pill.st-ug{color:#475569;background:rgba(71,85,105,.1)}
.dm-camp{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:999px;background:rgba(249,112,21,.1);color:#F97015;font-size:12px;font-weight:500;white-space:nowrap}
.dm-xchip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:6px;background:#F3F4F6;font-size:12px;color:#6B7280;white-space:nowrap}
.dm-xchip b{color:#222639;font-weight:600}
.dm-av{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#F3F4F6;color:#222639;font-weight:600;flex:none}
.dm-av.s20{width:20px;height:20px;font-size:8px}
.dm-av.s24{width:24px;height:24px;font-size:9.5px}
.dm-seg{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:10px;background:#F3F4F6;font-size:13px;color:#6B7280}
.dm-seg span{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;white-space:nowrap}
.dm-seg span.on{background:#fff;color:#222639;font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.dm-seg span b{font-weight:600;font-size:12px}
.dm-seg span b.red{color:#EF4343}
.dm-sel{display:inline-flex;align-items:center;gap:10px;height:36px;padding:0 12px 0 14px;border:1px solid #E5E7EB;border-radius:10px;background:#fff;font-size:14px;color:#222639;white-space:nowrap}
.dm-sel .dm-i{width:16px;height:16px;color:#6B7280;margin-left:auto}
.dm-srch{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:1px solid #E5E7EB;border-radius:10px;background:#fff;font-size:14px;color:#9CA3AF;white-space:nowrap}
.dm-srch .dm-i{width:16px;height:16px;color:#9CA3AF}
.dm-card{background:#fff;border:1px solid #E5E7EB;border-radius:16px;box-shadow:0 1px 2px rgba(35,40,64,.04),0 10px 28px -18px rgba(35,40,64,.22)}
.dm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 16px;border-radius:11px;font-size:14px;font-weight:600;white-space:nowrap}
.dm-btn .dm-i{width:16px;height:16px}
.dm-btn-pri{background:#F97015;color:#fff;box-shadow:0 8px 20px -10px rgba(249,115,22,.9)}
.dm-btn-out{background:#fff;color:#222639;border:1px solid #E5E7EB}
.dm-chk{width:18px;height:18px;border:1.5px solid #D1D5DB;border-radius:4px;background:#fff;flex:none}
.dm-tile{width:44px;height:44px;border-radius:12px;background:rgba(249,112,21,.1);color:#F97015;display:flex;align-items:center;justify-content:center;flex:none}
.dm-tile .dm-i{width:20px;height:20px}
.dm-phead{display:flex;align-items:center;gap:14px}
.dm-phead h1{font-size:24px;font-weight:700;line-height:30px}
.dm-phead p{font-size:13.5px;color:#6B7280;margin-top:2px}
.dm-toast{position:absolute;right:24px;bottom:24px;min-width:300px;padding:18px 24px;background:#fff;border:1px solid #E5E7EB;border-radius:8px;box-shadow:0 10px 30px -12px rgba(0,0,0,.25);font-size:14px;z-index:30}
.dm-toast b{display:block;font-weight:600;margin-bottom:2px}
.dm-toast.ok{display:flex;align-items:center;gap:12px;min-width:0}
.dm-toast.ok .dm-i{width:20px;height:20px;color:#16A34A}
.dm-toast.ok b{margin:0}

/* counters (registered property; fallback shows the <b> text) */
@property --dm-n{syntax:'<integer>';inherits:true;initial-value:0}
.dm-num{font-variant-numeric:tabular-nums}
.dm-cnt .dm-num>b{display:none}
.dm-cnt .dm-num::after{counter-reset:dmn var(--dm-n);content:counter(dmn)}
.dm-cnt .dm-num.z2::after{content:counter(dmn,decimal-leading-zero)}
.dm-cnt .dm-num{--dm-n:var(--to)}
@keyframes dmCount{from{--dm-n:0}to{--dm-n:var(--to)}}

/* generic keyframes */
@keyframes dmIn{from{opacity:0}to{opacity:1}}
@keyframes dmOut{from{opacity:1}to{opacity:0}}
@keyframes dmBlip{0%{opacity:0}8%{opacity:1}92%{opacity:1}100%{opacity:0}}
@keyframes dmRise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes dmRise2{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes dmZoom{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
@keyframes dmZoomBlip{0%{opacity:0;transform:scale(.95)}6%{opacity:1;transform:none}94%{opacity:1;transform:none}100%{opacity:0;transform:scale(.97)}}
@keyframes dmPop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes dmGrowX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes dmGrowY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes dmPress{0%,100%{transform:scale(1)}50%{transform:scale(.96)}}
@keyframes dmPulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes dmRing{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.9);opacity:0}}
@keyframes dmType{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes dmCaret{0%,100%{opacity:1}50%{opacity:0}}
@keyframes dmHalo{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.6);opacity:0}}
@keyframes dmSlideL{from{transform:translateX(100%)}to{transform:none}}
@keyframes dmSlideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes dmDraw{from{stroke-dashoffset:200}to{stroke-dashoffset:0}}
@keyframes dmShine{0%{transform:translateX(-120%) skewX(-18deg)}100%{transform:translateX(220%) skewX(-18deg)}}
@keyframes dmDots{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}
@keyframes dmAurora{0%{transform:rotate(0) scale(1)}50%{transform:rotate(12deg) scale(1.08)}100%{transform:rotate(0) scale(1)}}

/* ======================================================================
   SCENE 1 – Dialer (campaign queue -> lead page in call)
   ====================================================================== */
.dm-ctable{margin-top:16px;border:1px solid #E5E7EB;border-radius:8px;background:#fff;overflow:hidden}
.dm-ctable .dm-tr{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr 1fr;align-items:center;padding:0 16px;height:57px;border-bottom:1px solid #E5E7EB;position:relative}
.dm-ctable .dm-tr:last-child{border-bottom:0}
.dm-ctable .dm-th{background:rgba(243,244,246,.3);font-weight:500;color:#222639}
.dm-ctable .dm-th span{display:flex;align-items:center;gap:6px}
.dm-ctable .dm-th .dm-i{width:14px;height:14px;color:#6B7280}
.dm-ctable .dm-tr>span{font-size:15px}
.dm-ctable .dm-tr>span:first-child{font-weight:500;color:#222639;display:flex;align-items:center;gap:8px;position:relative;z-index:1;transition:padding-left .25s}
.dm-ctable .dm-tr>span+span{color:#6B7280}
.dm-ctable .dm-tr .dm-i{width:16px;height:16px;color:#F97015}
.dm-hov{position:absolute;inset:0;background:rgba(243,244,246,.45);opacity:0}
.dm-hov::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:#F97015}
.dm-hov::after{content:"";position:absolute;right:12px;top:12px;width:32px;height:32px;border-radius:8px;background:#F97015;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");background-size:16px;background-position:center;background-repeat:no-repeat}
.dm-ripple{position:absolute;left:120px;top:50%;width:0;height:0;border-radius:50%;background:rgba(249,112,21,.18);transform:translate(-50%,-50%);opacity:0}

.dm-s1 .dm-queue{opacity:0}
.dm-s1.dm-on .dm-queue{animation:dmOut .45s ease 2.9s both}
.dm-s1.dm-on .dm-queue .dm-bc{animation:dmRise .45s cubic-bezier(.2,.8,.2,1) 0s both}
.dm-s1.dm-on .dm-queue .dm-h1{animation:dmRise .45s cubic-bezier(.2,.8,.2,1) .05s both}
.dm-s1.dm-on .dm-queue .dm-tabs{animation:dmRise .45s cubic-bezier(.2,.8,.2,1) .1s both}
.dm-s1.dm-on .dm-queue .dm-h2{animation:dmRise .45s cubic-bezier(.2,.8,.2,1) .18s both}
.dm-s1.dm-on .dm-queue .dm-tr{animation:dmRise .45s cubic-bezier(.2,.8,.2,1) both}
.dm-s1.dm-on .dm-queue .dm-tr:nth-child(1){animation-delay:.22s}
.dm-s1.dm-on .dm-queue .dm-tr:nth-child(2){animation-delay:.28s}
.dm-s1.dm-on .dm-queue .dm-tr:nth-child(3){animation-delay:.34s}
.dm-s1.dm-on .dm-queue .dm-tr:nth-child(4){animation-delay:.40s}
.dm-s1.dm-on .dm-queue .dm-tr:nth-child(5){animation-delay:.46s}
.dm-s1.dm-on .dm-queue .dm-hov{animation:dmBlip 1s linear 2.1s both}
.dm-s1.dm-on .dm-queue .dm-tr:nth-child(2)>span:first-child{animation:dmPadIn 1s linear 2.1s both}
@keyframes dmPadIn{0%{padding-left:0}10%{padding-left:6px}90%{padding-left:6px}100%{padding-left:0}}
.dm-s1.dm-on .dm-ripple{animation:dmRipple .55s ease-out 2.6s both}
@keyframes dmRipple{0%{width:0;height:0;opacity:1}100%{width:520px;height:520px;opacity:0}}
.dm-s1.dm-on .dm-lead{animation:dmIn .5s ease 3.1s both}
.dm-s1 .dm-cur{transform:translate(871px,686px)}
.dm-s1.dm-on .dm-cur{animation:dmCur1 12.5s cubic-bezier(.4,0,.2,1) both}
@keyframes dmCur1{
  0%,8%{transform:translate(636px,560px)}
  17.6%,22%{transform:translate(151px,290px)}
  32%,72%{transform:translate(676px,470px)}
  76.8%,80%{transform:translate(831px,468px)}
  84%,86.4%{transform:translate(691px,558px)}
  91.2%,100%{transform:translate(871px,686px)}
}
.dm-s1.dm-on .dm-cur::after{animation:dmClick .5s ease-out 2.6s forwards,dmClick .5s ease-out 9.8s forwards,dmClick .5s ease-out 10.6s forwards,dmClick .5s ease-out 11.5s forwards}

/* lead page */
.dm-lead{padding:0}
.dm-dbar{position:absolute;left:0;top:0;right:0;height:64px;display:flex;align-items:center;gap:12px;padding:0 20px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid #E5E7EB;z-index:10}
.dm-grip{width:18px;height:18px;color:#9CA3AF}
.dm-numf{display:flex;align-items:center;height:44px;border:1px solid #E5E7EB;border-radius:12px;background:#fff;overflow:hidden}
.dm-numf>.dm-i{width:16px;height:16px;color:#6B7280;margin:0 10px 0 14px}
.dm-numtxt{font-size:16px;font-weight:600;letter-spacing:.03em;font-variant-numeric:tabular-nums;padding-right:14px;min-width:170px}
.dm-numst{position:relative;height:100%;min-width:92px;border-left:1px solid #E5E7EB;padding:0 14px;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;color:#6B7280}
.dm-numst em{font-style:normal}
.dm-numst b{font-weight:600}
.dm-numst>span{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;padding:0 14px;white-space:nowrap}
.dm-numst>span i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.dm-st-idle{color:#6B7280}
.dm-st-ring{background:#FFFBEB;color:#D97706}
.dm-st-ring i{animation:dmPulse 1s ease-in-out infinite}
.dm-st-call{background:#ECFDF5;color:#059669}
.dm-st-call i{animation:dmPulse 1s ease-in-out infinite}
.dm-st-idle,.dm-st-ring{opacity:0}
.dm-s1.dm-on .dm-st-idle{animation:dmOut .2s linear 3.4s both}
.dm-s1.dm-on .dm-st-ring{animation:dmBlip 1.8s linear 3.4s both}
.dm-s1.dm-on .dm-st-call{animation:dmIn .2s linear 5.2s both}
.dm-callbtn{position:relative;width:46px;height:46px;border-radius:50%;background:#EF4343;color:#fff;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 8px 20px -8px rgba(239,67,67,.85)}
.dm-callbtn .dm-i{width:20px;height:20px;transform:rotate(135deg)}
.dm-callbtn .dm-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(239,67,67,.55);opacity:0;animation:dmRing 1.8s ease-out infinite}
.dm-callbtn .dm-ring:nth-child(2){animation-delay:.6s}
.dm-s1.dm-on .dm-callbtn{animation:dmCallIdle .2s linear 3.4s both}
@keyframes dmCallIdle{from{background:#059669;box-shadow:0 8px 20px -8px rgba(22,163,74,.85)}to{background:#EF4343;box-shadow:0 8px 20px -8px rgba(239,67,67,.85)}}
.dm-s1.dm-on .dm-callbtn .dm-i{animation:dmRot .3s ease 3.4s both}
@keyframes dmRot{from{transform:rotate(0)}to{transform:rotate(135deg)}}
.dm-s1.dm-on .dm-callbtn .dm-ring{animation:dmRing 1.8s ease-out 3.4s infinite}
.dm-s1.dm-on .dm-callbtn .dm-ring:nth-child(2){animation-delay:4s}
.dm-tools{display:flex;gap:2px;padding:3px;border:1px solid #E5E7EB;border-radius:12px;background:#fff}
.dm-tools b{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#374151}
.dm-tools b .dm-i{width:17px;height:17px}
.dm-aurabox{display:flex;align-items:center;gap:8px;height:44px;border:1px solid #E5E7EB;border-radius:12px;background:#fff;padding:0 6px 0 12px}
.dm-aurabox small{display:block;font-size:11px;color:#6B7280;line-height:13px}
.dm-aurabox strong{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;line-height:17px;padding-right:8px;border-right:1px solid #E5E7EB}
.dm-aurabox strong .dm-i{width:14px;height:14px;color:#6B7280}
.dm-aurat{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#F97015;background:linear-gradient(135deg,rgba(249,112,21,.1),rgba(249,112,21,.2));box-shadow:inset 0 0 0 1px rgba(249,112,21,.3)}
.dm-aurat .dm-i{width:18px;height:18px}
.dm-dbar-r{margin-left:auto;display:flex;gap:8px}
.dm-leadbody{position:absolute;left:0;top:64px;right:0;bottom:0;padding:28px 24px 0;overflow:hidden}
.dm-leadhead{display:flex;align-items:center;gap:12px;margin-top:2px}
.dm-back{width:36px;height:36px;border:1px solid #E5E7EB;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#222639}
.dm-back .dm-i{width:16px;height:16px}
.dm-leadhead h1{font-size:24px;font-weight:700;letter-spacing:-.01em}
.dm-res{margin-left:auto;display:flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:8px;border:1px solid rgba(249,112,21,.3);background:rgba(249,112,21,.1);color:#F97015;font-weight:600;font-size:14px}
.dm-res .dm-i{width:16px;height:16px}
.dm-chips{display:flex;align-items:center;gap:10px;margin:10px 0 0 48px;font-size:13px}
.dm-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;background:#F3F4F6;color:#4B5563;font-size:13px;font-weight:500}
.dm-chip .dm-i{width:14px;height:14px}
.dm-chip.pri{background:rgba(249,112,21,.1);color:#F97015}
.dm-leadcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;margin-top:24px}
.dm-leadcols>div{min-width:0}
.dm-lf-c{border:1px solid #E5E7EB;border-radius:18px;background:#fff;overflow:hidden}
.dm-lf-h{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid #E5E7EB;font-size:14.5px;font-weight:600}
.dm-lf-h .dm-tile{width:30px;height:30px;border-radius:9px}
.dm-lf-h .dm-tile .dm-i{width:16px;height:16px}
.dm-lf-h .dm-cnt-pill{font-size:11.5px;font-weight:700;background:#F3F4F6;padding:3px 7px;border-radius:6px;color:#4B5563}
.dm-lf-h .dm-by{margin-left:auto;font-size:13px;font-weight:400;color:#6B7280}
.dm-lf-h .dm-by b{color:#F97015;font-weight:600}
.dm-lf-h .dm-seg{padding:2px;border-radius:8px;font-size:12.5px}
.dm-lf-h .dm-seg span{padding:4px 9px;border-radius:6px}
.dm-lf-ct{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid #E5E7EB;background:linear-gradient(90deg,rgba(249,112,21,.06),#fff);overflow:hidden}
.dm-lf-ct b{font-size:15px;font-weight:700;margin-right:2px;white-space:nowrap;flex:none}
.dm-lf-ct span:first-of-type{flex:none}
.dm-lf-ct span{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 8px 0 11px;border:1px solid #E5E7EB;border-radius:999px;background:#fff;font-size:12px;font-weight:500;min-width:0;white-space:nowrap}
.dm-lf-ct span em{font-style:normal;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dm-lf-ct span .dm-i{width:13px;height:13px;color:#6B7280}
.dm-lf-ct span .dm-i.cp{margin-left:4px}
.dm-lf-g{display:grid;grid-template-columns:repeat(3,1fr)}
.dm-lf-t{min-height:58px;padding:9px 14px 10px;box-shadow:inset -1px -1px 0 #E5E7EB}
.dm-lf-t.w2{grid-column:span 2}
.dm-lf-t small{display:block;font-size:11.5px;font-weight:600;color:#6B7280;margin-bottom:3px;display:flex;align-items:center;justify-content:space-between}
.dm-lf-t small .dm-i{width:14px;height:14px;color:#F97015}
.dm-lf-t b{font-size:14px;font-weight:600;display:block;line-height:1.4}
.dm-lf-t .ja{display:inline-block;padding:1px 9px;border-radius:999px;background:rgba(22,163,74,.13);color:#16a34a;font-size:13px;font-weight:600}
.dm-lf-f{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:rgba(243,244,246,.35);font-size:12.5px;color:#6B7280}
.dm-lf-f b{color:#F97015;font-weight:600;display:flex;align-items:center;gap:4px}
.dm-lf-f b .dm-i{width:14px;height:14px}
.dm-recent{margin-top:28px}
.dm-recent h3{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600}
.dm-recent h3 .dm-i{width:16px;height:16px;color:#6B7280}
.dm-recent h3 span{margin-left:auto;font-size:13px;font-weight:400;color:#6B7280;display:flex;align-items:center;gap:6px}
.dm-recent .dm-rr{display:flex;align-items:flex-start;gap:12px;padding:14px 0 0}
.dm-recent .dm-rr .dm-tile{width:32px;height:32px;border-radius:10px;background:#fff;border:1px solid #E5E7EB;color:#F97015}
.dm-recent .dm-rr .dm-tile .dm-i{width:15px;height:15px}
.dm-recent .dm-rr b{display:block;font-size:14px;font-weight:600}
.dm-recent .dm-rr small{font-size:13px;color:#6B7280}
.dm-recent .dm-rr em{margin-left:auto;font-style:normal;font-size:12.5px;color:#6B7280;white-space:nowrap}
.dm-rd{border:1px solid #E5E7EB;border-radius:8px;background:#fff;padding:16px;display:flex;flex-direction:column;gap:14px;align-self:start}
.dm-rd-h{display:flex;align-items:center;justify-content:space-between}
.dm-rd-h h3{font-size:16px;font-weight:600}
.dm-rd-h button{display:flex;align-items:center;gap:8px;height:36px;padding:0 14px;border:1px solid #059669;border-radius:8px;color:#059669;font-size:14px;font-weight:500}
.dm-rd-h button .dm-i{width:16px;height:16px}
.dm-lbl{font-size:14px;font-weight:500;display:block;margin-bottom:6px}
.dm-note{min-height:100px;border:1px solid #E5E7EB;border-radius:6px;padding:10px 12px;font-size:14px;line-height:20px;position:relative}
.dm-note span{display:block;width:max-content;max-width:100%;white-space:nowrap;overflow:hidden}
.dm-note .dm-caret{position:absolute;width:1.5px;height:16px;background:#222639;opacity:0;top:12px;left:12px}
.dm-s1.dm-on .dm-note span:nth-child(1){animation:dmType 1.9s steps(56,end) 5.8s both}
.dm-s1.dm-on .dm-note span:nth-child(2){animation:dmType 1.6s steps(50,end) 7.7s both}
.dm-s1.dm-on .dm-note .dm-caret{animation:dmCaretRun 3.6s steps(60,end) 5.8s forwards}
@keyframes dmCaretRun{0%{opacity:1;transform:translate(0,0)}52%{opacity:1;transform:translate(392px,0)}53%{transform:translate(0,20px)}98%{opacity:1;transform:translate(398px,20px)}100%{opacity:0;transform:translate(398px,20px)}}
.dm-selw{position:relative}
.dm-status{height:44px;border:1px solid #E5E7EB;border-radius:6px;display:flex;align-items:center;gap:10px;padding:0 14px;position:relative;background:#fff}
.dm-status .dm-i{width:16px;height:16px;margin-left:auto;color:#6B7280}
.dm-status .dm-dotv{width:12px;height:12px;border-radius:50%;background:#2563EB;flex:none;position:relative}
.dm-status .dm-dotv::before{content:"";position:absolute;inset:-4px;border-radius:50%;background:currentColor;opacity:.15;color:#2563EB}
.dm-status .dm-sv{position:relative;height:20px;flex:1}
.dm-status .dm-sv span{position:absolute;left:0;top:0;white-space:nowrap}
.dm-status .dm-sv .a{opacity:0}
.dm-s1.dm-on .dm-status{animation:dmSelFocus .2s linear 9.8s both,dmSelBlur .2s linear 10.7s forwards}
@keyframes dmSelFocus{from{border-color:#E5E7EB;box-shadow:none}to{border-color:#F97015;box-shadow:0 0 0 4px rgba(249,112,21,.13)}}
@keyframes dmSelBlur{from{border-color:#F97015;box-shadow:0 0 0 4px rgba(249,112,21,.13)}to{border-color:#E5E7EB;box-shadow:none}}
.dm-s1.dm-on .dm-status .dm-sv .a{animation:dmOut .15s linear 10.7s both}
.dm-s1.dm-on .dm-status .dm-sv .b{animation:dmIn .15s linear 10.7s both}
.dm-s1.dm-on .dm-status .dm-dotv{animation:dmDotSwap .15s linear 10.7s both}
@keyframes dmDotSwap{from{background:#9CA3AF;color:#9CA3AF}to{background:#2563EB;color:#2563EB}}
.dm-s1.dm-on .dm-status .dm-i{animation:dmFlip .2s linear 9.9s both,dmFlipBack .2s linear 10.7s forwards}
@keyframes dmFlip{to{transform:rotate(180deg)}}
@keyframes dmFlipBack{from{transform:rotate(180deg)}to{transform:none}}
.dm-dd{position:absolute;left:0;right:0;top:50px;background:#fff;border:1px solid #E5E7EB;border-radius:12px;box-shadow:0 20px 50px -20px rgba(0,0,0,.3);padding:6px;z-index:20;opacity:0;transform-origin:top}
.dm-dd div{display:flex;align-items:center;gap:10px;height:38px;padding:0 12px;border-radius:8px;font-size:14px;font-weight:500;position:relative}
.dm-dd div::before{content:"";position:absolute;inset:0;border-radius:8px;background:#F3F4F6;z-index:-1;opacity:0}
.dm-dd div.cur{background:#F3F4F6;font-weight:600}
.dm-dd div i{width:12px;height:12px;border-radius:50%;flex:none;box-shadow:0 0 0 4px rgba(0,0,0,.07)}
.dm-dd div kbd{margin-left:auto;width:22px;height:22px;border:1px solid #E5E7EB;border-radius:5px;display:flex;align-items:center;justify-content:center;font:500 12px 'Inter',sans-serif;color:#9CA3AF}
.dm-dd div .dm-i{width:14px;height:14px;color:#F97015}
.dm-s1.dm-on .dm-dd{animation:dmZoomBlip .9s cubic-bezier(.2,.8,.2,1) 9.9s both}
.dm-s1.dm-on .dm-dd div:nth-child(2)::before{animation:dmBlip .5s linear 10.2s both}
.dm-slot{min-height:40px;position:relative}
.dm-slot>div{position:absolute;left:0;right:0;top:0}
.dm-tsv{height:40px;border:1px solid rgba(249,115,22,.5);border-radius:6px;display:flex;align-items:center;justify-content:center;gap:10px;color:#EA580C;font-size:14px;font-weight:500;opacity:0}
.dm-tsv .dm-i{width:16px;height:16px}
.dm-cbbox{border:1px solid rgba(37,99,235,.25);background:rgba(37,99,235,.06);border-radius:8px;padding:9px 12px;font-size:13px;color:#1E40AF;display:flex;align-items:center;gap:10px}
.dm-cbbox .dm-i{width:15px;height:15px}
.dm-cbbox b{font-weight:600}
.dm-s1.dm-on .dm-tsv{animation:dmOut .2s linear 10.7s both}
.dm-s1.dm-on .dm-cbbox{animation:dmRise .35s cubic-bezier(.2,.8,.2,1) 10.75s both}
.dm-gsom{height:44px;border:1px solid #E5E7EB;border-radius:6px;display:flex;align-items:center;gap:10px;padding:0 12px;font-size:14px}
.dm-gsom .dm-av{background:rgba(249,112,21,.12);color:#F97015}
.dm-gsom .dm-i{width:16px;height:16px;margin-left:auto;color:#6B7280}
.dm-hint{font-size:12.5px;color:#6B7280;margin-top:-6px}
.dm-save{height:40px;border-radius:6px;background:#F97015;color:#fff;font-size:14px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:10px}
.dm-save .dm-i{width:16px;height:16px}
.dm-s1.dm-on .dm-save{animation:dmPress .3s ease 11.45s both}
.dm-toast-call{opacity:0}
.dm-s1.dm-on .dm-toast-call{animation:dmToastBlip 3s cubic-bezier(.2,.8,.2,1) 5.3s both}
@keyframes dmToastBlip{0%{opacity:0;transform:translateY(16px)}8%{opacity:1;transform:none}90%{opacity:1;transform:none}100%{opacity:0;transform:translateY(6px)}}
.dm-s1.dm-on .dm-toast-saved{animation:dmSlideUp .4s cubic-bezier(.2,.8,.2,1) 11.8s both}
.dm-cnt .dm-s1.dm-on .dm-timer{animation:dmCount 7.3s linear 5.2s both}

/* ======================================================================
   SCENE 2 – Indgående opkald + incoming modal
   ====================================================================== */
.dm-inb{max-width:1024px;margin:0 auto}
.dm-inb-tb{display:flex;align-items:center;gap:12px;margin-top:28px}
.dm-inb-tb .dm-srch{flex:0 0 384px;height:40px;border-radius:8px}
.dm-inb-tb .dm-sel{height:40px;border-radius:8px;min-width:174px}
.dm-inb-all{display:flex;align-items:center;gap:14px;padding:18px 16px 12px;font-size:14px;color:#374151}
.dm-inb-row{display:flex;align-items:center;gap:16px;padding:16px;border-bottom:1px solid #E5E7EB;position:relative}
.dm-inb-row:first-of-type{border-top:1px solid #E5E7EB}
.dm-inb-st{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.dm-inb-st.ok{background:#DCFCE7;color:#16A34A}
.dm-inb-st.no{background:#FEE2E2;color:#DC2626}
.dm-inb-st .dm-i{width:18px;height:18px}
.dm-inb-row .dm-nm{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600}
.dm-inb-row .dm-nm span{font-size:14px;font-weight:400;color:#6B7280}
.dm-inb-row .dm-nm em{font-style:normal;font-size:13px;font-weight:500;display:flex;align-items:center;gap:5px}
.dm-inb-row .dm-nm em::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.dm-inb-row .dm-nm em.g{color:#16A34A}.dm-inb-row .dm-nm em.r{color:#DC2626}
.dm-inb-row .dm-cp{font-size:14px;color:#6B7280;margin-top:2px}
.dm-inb-row .dm-when{margin-left:auto;text-align:right}
.dm-inb-row .dm-when b{display:block;font-size:14px;font-weight:600}
.dm-inb-row .dm-when small{font-size:12px;color:#6B7280}
.dm-inb-row .dm-acts{display:flex;gap:4px;color:#9CA3AF}
.dm-inb-row .dm-acts i{width:32px;height:32px;display:flex;align-items:center;justify-content:center}
.dm-inb-row .dm-acts .dm-i{width:16px;height:16px}
.dm-s2.dm-on .dm-inb>*{animation:dmRise .45s cubic-bezier(.2,.8,.2,1) both}
.dm-s2.dm-on .dm-inb>*:nth-child(2){animation-delay:.06s}
.dm-s2.dm-on .dm-inb>*:nth-child(3){animation-delay:.12s}
.dm-s2.dm-on .dm-inb-row{animation:dmRise .45s cubic-bezier(.2,.8,.2,1) both}
.dm-s2.dm-on .dm-inb-row:nth-of-type(2){animation-delay:.18s}
.dm-s2.dm-on .dm-inb-row:nth-of-type(3){animation-delay:.22s}
.dm-s2.dm-on .dm-inb-row:nth-of-type(4){animation-delay:.26s}
.dm-s2.dm-on .dm-inb-row:nth-of-type(5){animation-delay:.30s}
.dm-s2.dm-on .dm-inb-row:nth-of-type(6){animation-delay:.34s}
.dm-s2.dm-on .dm-inb-row:nth-of-type(7){animation-delay:.38s}
.dm-s2.dm-on .dm-inb-row:nth-of-type(8){animation-delay:.42s}
.dm-s2.dm-on .dm-inb-row.dm-new{animation:dmRise2 .6s cubic-bezier(.2,.8,.2,1) 5.2s both}
.dm-s2.dm-on .dm-inb-row.dm-new .dm-inb-st{animation:dmPop .5s cubic-bezier(.5,1.6,.4,1) 5.4s both}
.dm-ovl{position:absolute;inset:0;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:20;opacity:0}
.dm-s2.dm-on .dm-ovl{animation:dmBlip 3.3s linear 1.2s both}
.dm-modal{position:absolute;left:50%;top:50%;width:448px;transform:translate(-50%,-50%);background:#fff;border:1px solid #E5E7EB;border-radius:8px;box-shadow:0 10px 40px -10px rgba(0,0,0,.2);padding:24px;z-index:21;text-align:center;opacity:0}
.dm-s2.dm-on .dm-modal{animation:dmModal 3.3s cubic-bezier(.2,.8,.2,1) 1.2s both}
@keyframes dmModal{0%{opacity:0;transform:translate(-50%,-50%) scale(.92)}8%{opacity:1;transform:translate(-50%,-50%) scale(1)}92%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.95)}}
.dm-modal-ic{position:relative;width:64px;height:64px;border-radius:50%;background:rgba(249,112,21,.1);color:#F97015;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.dm-modal-ic .dm-i{width:32px;height:32px;animation:dmShake 1.2s ease-in-out infinite}
@keyframes dmShake{0%,100%{transform:rotate(0)}20%{transform:rotate(-12deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(6deg)}}
.dm-modal-ic::before,.dm-modal-ic::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(249,112,21,.25);animation:dmHalo 1.6s ease-out infinite;z-index:-1}
.dm-modal-ic::after{animation-delay:.8s}
.dm-modal h2{font-size:20px;font-weight:600}
.dm-modal>p{font-size:16px;color:#6B7280;margin-top:4px}
.dm-modal-lead{margin-top:20px;background:rgba(243,244,246,.5);border-radius:8px;padding:16px;text-align:left;display:flex;flex-direction:column;gap:10px}
.dm-modal-lead div{display:flex;gap:10px;align-items:flex-start}
.dm-modal-lead .dm-i{width:18px;height:18px;color:#6B7280;margin-top:3px}
.dm-modal-lead small{display:block;font-size:14px;color:#6B7280}
.dm-modal-lead b{display:block;font-size:16px;font-weight:600}
.dm-modal-lead b.clamp{font-size:14px;font-weight:500;line-height:20px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dm-modal-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.dm-modal-btns .dm-btn{height:44px;border-radius:6px;font-size:15px}
.dm-modal-btns .red{background:#EF4343;color:#fff}
.dm-modal-btns .grn{background:#16A34A;color:#fff}
.dm-modal-fwd{margin-top:12px;height:44px;border:1px solid rgba(249,115,22,.5);border-radius:6px;display:flex;align-items:center;justify-content:center;gap:10px;color:#F97316;font-size:15px;font-weight:500}
.dm-modal-fwd .dm-i{width:16px;height:16px}
.dm-s2.dm-on .dm-modal-btns .grn{animation:dmPress .3s ease 4.2s both}
.dm-s2 .dm-cur{transform:translate(936px,540px)}
.dm-s2.dm-on .dm-cur{animation:dmCur2 10s cubic-bezier(.4,0,.2,1) both}
@keyframes dmCur2{0%,26%{transform:translate(836px,640px)}38%,46%{transform:translate(684px,512px)}56%,100%{transform:translate(936px,540px)}}
.dm-s2.dm-on .dm-cur::after{animation:dmClick .5s ease-out 4.2s forwards}
.dm-aci{position:absolute;right:16px;bottom:16px;display:flex;align-items:center;gap:16px;padding:16px;background:#16A34A;color:#fff;border-radius:8px;box-shadow:0 10px 25px -5px rgba(0,0,0,.2),0 8px 10px -6px rgba(0,0,0,.1);z-index:25}
.dm-aci .dm-pd{width:12px;height:12px;border-radius:50%;background:#fff;animation:dmPulse 1.2s ease-in-out infinite}
.dm-aci>.dm-i{width:20px;height:20px}
.dm-aci b{display:block;font-weight:500;font-size:14px}
.dm-aci small{display:block;font-size:14px;color:#DCFCE7}
.dm-aci em{font-style:normal}
.dm-aci .dm-hang{display:flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:6px;background:#EF4444;font-size:13px;font-weight:500}
.dm-aci .dm-hang .dm-i{width:16px;height:16px}
.dm-s2.dm-on .dm-aci{animation:dmSlideUp .4s cubic-bezier(.2,.8,.2,1) 4.6s both}
.dm-cnt .dm-s2.dm-on .dm-ctimer{animation:dmCount 5.2s linear 4.6s both}

/* ======================================================================
   SCENE 3 – Statuser tab -> Genopkald tab
   ====================================================================== */
.dm-s3 .dm-stat{opacity:0}
.dm-s3.dm-on .dm-stat{animation:dmOut .4s ease 5s both}
.dm-s3.dm-on .dm-stat .dm-bc,.dm-s3.dm-on .dm-stat .dm-h1,.dm-s3.dm-on .dm-stat .dm-tabs{animation:dmRise .45s cubic-bezier(.2,.8,.2,1) both}
.dm-thead{display:flex;align-items:flex-start;justify-content:space-between;margin-top:24px}
.dm-ttb{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.dm-ttb2{margin-top:10px}
.dm-fordel{margin-top:16px;border:1px solid #E5E7EB;border-radius:16px;padding:16px;background:#fff}
.dm-fordel-h{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:700}
.dm-fordel-h span{font-size:13px;font-weight:400;color:#6B7280}
.dm-dist{display:flex;gap:2px;height:12px;margin-top:12px;border-radius:6px;overflow:hidden}
.dm-dist i{height:100%;transform-origin:left;border-radius:2px}
.dm-chipsrow{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.dm-schip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px 0 10px;border:1px solid #E5E7EB;border-radius:999px;background:#fff;font-size:13px;font-weight:500}
.dm-schip i{width:8px;height:8px;border-radius:50%;flex:none}
.dm-schip b{font-weight:700}
.dm-schip span{color:#6B7280;font-weight:400}
.dm-stbl{margin-top:16px;overflow:hidden}
.dm-stbl .dm-tr{display:grid;grid-template-columns:1.5fr .95fr 2.3fr 1.25fr .75fr 1.05fr;gap:10px;align-items:center;padding:0 18px;height:49px;border-bottom:1px solid #E5E7EB;font-size:14px}
.dm-stbl .dm-th{background:rgba(243,244,246,.4);font-size:12px;font-weight:600;color:#6B7280;height:42px}
.dm-stbl .dm-tr>span{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;white-space:nowrap}
.dm-stbl .dm-xchip{overflow:hidden;flex:0 1 auto;min-width:0}
.dm-stbl .dm-tr .nm{font-weight:600}
.dm-stbl .dm-tr .cp{font-size:13px;color:#6B7280}
.dm-stbl .dm-tr .dt{font-size:13.5px;color:#4B5563}
.dm-stbl .dm-tr .us{font-size:14px;font-weight:500}
.dm-s3.dm-on .dm-thead,.dm-s3.dm-on .dm-ttb,.dm-s3.dm-on .dm-ttb2,.dm-s3.dm-on .dm-fordel{animation:dmRise .45s cubic-bezier(.2,.8,.2,1) both}
.dm-s3.dm-on .dm-thead{animation-delay:.12s}.dm-s3.dm-on .dm-ttb{animation-delay:.2s}.dm-s3.dm-on .dm-ttb2{animation-delay:.25s}.dm-s3.dm-on .dm-fordel{animation-delay:.3s}
.dm-s3.dm-on .dm-dist i{animation:dmGrowX .7s cubic-bezier(.2,.8,.2,1) both}
.dm-s3.dm-on .dm-dist i:nth-child(1){animation-delay:.7s}
.dm-s3.dm-on .dm-dist i:nth-child(2){animation-delay:1s}
.dm-s3.dm-on .dm-dist i:nth-child(3){animation-delay:1.3s}
.dm-s3.dm-on .dm-dist i:nth-child(4){animation-delay:1.6s}
.dm-s3.dm-on .dm-dist i:nth-child(5){animation-delay:1.9s}
.dm-s3.dm-on .dm-schip{animation:dmPop .45s cubic-bezier(.5,1.6,.4,1) both}
.dm-s3.dm-on .dm-schip:nth-child(1){animation-delay:.9s}
.dm-s3.dm-on .dm-schip:nth-child(2){animation-delay:1.2s}
.dm-s3.dm-on .dm-schip:nth-child(3){animation-delay:1.5s}
.dm-s3.dm-on .dm-schip:nth-child(4){animation-delay:1.8s}
.dm-s3.dm-on .dm-schip:nth-child(5){animation-delay:2.1s}
.dm-cnt .dm-s3.dm-on .dm-schip .dm-num{animation:dmCount 1s cubic-bezier(.2,.8,.2,1) both}
.dm-cnt .dm-s3.dm-on .dm-schip:nth-child(1) .dm-num{animation-delay:.9s}
.dm-cnt .dm-s3.dm-on .dm-schip:nth-child(2) .dm-num{animation-delay:1.2s}
.dm-cnt .dm-s3.dm-on .dm-schip:nth-child(3) .dm-num{animation-delay:1.5s}
.dm-cnt .dm-s3.dm-on .dm-schip:nth-child(4) .dm-num{animation-delay:1.8s}
.dm-cnt .dm-s3.dm-on .dm-schip:nth-child(5) .dm-num{animation-delay:2.1s}
.dm-s3.dm-on .dm-stbl{animation:dmRise .45s cubic-bezier(.2,.8,.2,1) .5s both}
.dm-s3.dm-on .dm-stbl .dm-tr{animation:dmRise .4s cubic-bezier(.2,.8,.2,1) both}
.dm-s3.dm-on .dm-stbl .dm-tr:nth-child(2){animation-delay:1.3s}
.dm-s3.dm-on .dm-stbl .dm-tr:nth-child(3){animation-delay:1.45s}
.dm-s3.dm-on .dm-stbl .dm-tr:nth-child(4){animation-delay:1.6s}
.dm-s3.dm-on .dm-stbl .dm-tr:nth-child(5){animation-delay:1.75s}
.dm-s3.dm-on .dm-stbl .dm-tr:nth-child(6){animation-delay:1.9s}
.dm-s3.dm-on .dm-stbl .dm-tr:nth-child(7){animation-delay:2.05s}
.dm-s3.dm-on .dm-stat .dm-tab-i:nth-child(2){animation:dmTabHov .7s linear 4.1s both;border-radius:8px 8px 0 0}
@keyframes dmTabHov{0%{background:transparent}15%{background:#F3F4F6}85%{background:#F3F4F6}100%{background:transparent}}
/* Genopkald tab */
.dm-s3.dm-on .dm-cb{animation:dmIn .4s ease 5.1s both}
.dm-cb-list{margin-top:20px;overflow:hidden}
.dm-gh{display:flex;align-items:center;gap:8px;padding:10px 18px;background:rgba(243,244,246,.4);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#4B5563;border-bottom:1px solid #E5E7EB}
.dm-gh b{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 6px;border-radius:6px;background:#E5E7EB;font-size:12px;font-weight:700;color:#222639}
.dm-gh.red{color:#EF4343}
.dm-gh.red b{background:#EF4343;color:#fff}
.dm-cbr{display:grid;grid-template-columns:92px 1fr auto;align-items:center;padding:14px 18px;border-bottom:1px solid #E5E7EB;position:relative;gap:12px}
.dm-cbr .tm{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;line-height:22px}
.dm-cbr .tm small{display:block;font-size:12px;font-weight:400;color:#6B7280;margin-top:2px}
.dm-cbr .tm.ov{color:#EF4343}.dm-cbr .tm.ov small{color:#EF4343}
.dm-cbr .tm.td{color:#F97015}
.dm-cbr .inf b{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600}
.dm-cbr .inf small{display:flex;align-items:center;gap:6px;font-size:13px;color:#6B7280;margin-top:3px}
.dm-cbr .inf small .dm-i{width:14px;height:14px}
.dm-cbr .inf p{font-size:13.5px;color:#6B7280;margin-top:3px;display:flex;align-items:center;gap:8px}
.dm-ai{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:6px;background:#F5F3FF;color:#7C3AED;font-size:11px;font-weight:600}
.dm-ai .dm-i{width:11px;height:11px}
.dm-cbr .ac{display:flex;gap:6px;opacity:0}
.dm-cbr .ac i{width:34px;height:34px;border:1px solid #E5E7EB;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#374151;background:#fff}
.dm-cbr .ac i .dm-i{width:16px;height:16px}
.dm-cbr .ac i.go{background:#F97015;border-color:#F97015;color:#fff}
.dm-cbr .hov{position:absolute;inset:0;background:rgba(243,244,246,.3);opacity:0}
.dm-cbr .hov::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:#F97015}
.dm-s3.dm-on .dm-cb-list>*{animation:dmRise2 .5s cubic-bezier(.2,.8,.2,1) both}
.dm-s3.dm-on .dm-cb-list>*:nth-child(1){animation-delay:5.3s}
.dm-s3.dm-on .dm-cb-list>*:nth-child(2){animation-delay:5.4s}
.dm-s3.dm-on .dm-cb-list>*:nth-child(3){animation-delay:5.5s}
.dm-s3.dm-on .dm-cb-list>*:nth-child(4){animation-delay:5.6s}
.dm-s3.dm-on .dm-cb-list>*:nth-child(5){animation-delay:5.7s}
.dm-s3.dm-on .dm-cb-list>*:nth-child(6){animation-delay:5.8s}
.dm-s3.dm-on .dm-cb-list>*:nth-child(7){animation-delay:5.9s}
.dm-s3.dm-on .dm-cb-list>*:nth-child(8){animation-delay:6s}
.dm-s3.dm-on .dm-cbr.tgt .hov{animation:dmIn .25s linear 7.4s both}
.dm-s3.dm-on .dm-cbr.tgt .ac{animation:dmAcIn .3s cubic-bezier(.2,.8,.2,1) 7.4s both}
@keyframes dmAcIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
.dm-s3.dm-on .dm-cbr.tgt .ac i:first-child{animation:dmPress .3s ease 8.3s both}
.dm-snz{position:absolute;right:62px;top:54px;width:220px;background:#fff;border:1px solid #E5E7EB;border-radius:12px;box-shadow:0 20px 50px -20px rgba(0,0,0,.3);padding:6px;z-index:20;opacity:0;transform-origin:top right}
.dm-snz small{display:block;padding:6px 10px 4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#6B7280}
.dm-snz div{display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border-radius:8px;font-size:13.5px;font-weight:500;position:relative}
.dm-snz div::before{content:"";position:absolute;inset:0;border-radius:8px;background:#F3F4F6;z-index:-1;opacity:0}
.dm-snz div .dm-i{width:14px;height:14px;color:#6B7280}
.dm-s3.dm-on .dm-snz{animation:dmZoomBlip 1.4s cubic-bezier(.2,.8,.2,1) 8.4s both}
.dm-s3.dm-on .dm-snz div:nth-of-type(2)::before{animation:dmBlip .6s linear 9.2s both}
.dm-s3.dm-on .dm-toast-snz{animation:dmSlideUp .4s cubic-bezier(.2,.8,.2,1) 9.9s both}
.dm-s3.dm-on .dm-cbr.tgt .tm .t1{animation:dmOut .2s linear 9.9s both}
.dm-s3.dm-on .dm-cbr.tgt .tm .t2{animation:dmIn .2s linear 9.9s both}
.dm-cbr .tm .t1{opacity:0;position:absolute;left:18px;top:14px}
.dm-s3 .dm-cur{transform:translate(836px,620px)}
.dm-s3.dm-on .dm-cur{animation:dmCur3 11s cubic-bezier(.4,0,.2,1) both}
@keyframes dmCur3{0%,30%{transform:translate(696px,560px)}38%,46%{transform:translate(178px,114px)}54%,66%{transform:translate(536px,540px)}72%,76%{transform:translate(1072px,550px)}80%,84%{transform:translate(926px,638px)}90%,100%{transform:translate(836px,620px)}}
.dm-s3.dm-on .dm-cur::after{animation:dmClick .5s ease-out 4.6s forwards,dmClick .5s ease-out 8.3s forwards,dmClick .5s ease-out 9.6s forwards}

/* ======================================================================
   SCENE 4 – Kalender
   ====================================================================== */
.dm-kal-head{display:flex;align-items:center;gap:14px}
.dm-kal-head .r{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13px;color:#6B7280}
.dm-kal-conn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border:1px solid #E5E7EB;border-radius:999px;background:#fff;font-size:13.5px;font-weight:500;color:#222639}
.dm-kal-conn i{width:8px;height:8px;border-radius:50%;background:#F97015;box-shadow:0 0 0 3px rgba(249,112,21,.2)}
.dm-kal-g{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border:1px solid #E5E7EB;border-radius:10px;background:#fff;font-size:14px;font-weight:500;color:#222639}
.dm-kal-g .gi{width:16px;height:16px;border-radius:3px;background:#4285F4;position:relative}
.dm-kal-g .gi::after{content:"31";position:absolute;inset:0;color:#fff;font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center}
.dm-kal-g .oi{width:16px;height:16px;border-radius:3px;background:#0F6CBD}
.dm-kal-new{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:10px;background:#F97015;color:#fff;font-size:14px;font-weight:600;box-shadow:0 8px 20px -10px rgba(249,115,22,.9)}
.dm-kal-new .dm-i{width:16px;height:16px}
.dm-kal-tb{display:flex;align-items:center;gap:12px;margin-top:22px}
.dm-kal-tb h2{font-size:21px;font-weight:700;margin-right:8px}
.dm-kal-nav{display:inline-flex;align-items:center;height:36px;border:1px solid #E5E7EB;border-radius:10px;overflow:hidden;background:#fff}
.dm-kal-nav span{display:flex;align-items:center;justify-content:center;height:100%;padding:0 10px;font-size:14px;font-weight:600}
.dm-kal-nav span+span{border-left:1px solid #E5E7EB}
.dm-kal-nav .dm-i{width:16px;height:16px;color:#6B7280}
.dm-kal-tb .dm-sel{height:36px;gap:8px}
.dm-kal-tb .dm-sel .dm-i.f{margin:0;width:15px;height:15px;color:#6B7280}
.dm-kal-ref{width:36px;height:36px;border:1px solid #E5E7EB;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#6B7280}
.dm-kal-seg{margin-top:12px}
.dm-kal{margin-top:12px;border:1px solid #E5E7EB;border-radius:16px;overflow:hidden;background:#fff}
.dm-dow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:rgba(243,244,246,.45);border-bottom:1px solid #E5E7EB}
.dm-dow span{padding:10px 12px;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#6B7280}
.dm-wk{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid #E5E7EB}
.dm-wk:last-child{border-bottom:0}
.dm-cell{min-height:128px;min-width:0;padding:6px;border-right:1px solid #E5E7EB;display:flex;flex-direction:column;gap:4px}
.dm-cell:last-child{border-right:0}
.dm-cell.out{background:rgba(243,244,246,.3)}
.dm-cell.out .dn{color:#9CA3AF}
.dm-cell .dn{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex:none}
.dm-cell.today .dn{background:#F97015;color:#fff;box-shadow:0 4px 10px -4px rgba(249,115,22,.8)}
.dm-ev{position:relative;padding:3px 7px 3px 10px;min-width:0;border-radius:9px;background:color-mix(in srgb,var(--c) 10%,#fff);--c:#2563EB;font-size:12px;line-height:16px;transform-origin:left center}
.dm-ev::before{content:"";position:absolute;left:2px;top:5px;bottom:5px;width:3px;border-radius:0 3px 3px 0;background:var(--c)}
.dm-ev b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px}
.dm-ev b em{font-style:normal;font-size:11.5px;color:color-mix(in srgb,var(--c) 75%,#000);margin-right:5px}
.dm-ev span{display:flex;align-items:center;justify-content:space-between;margin-top:1px}
.dm-ev span i{font-style:normal;display:inline-block;padding:0 6px;border:1px solid color-mix(in srgb,var(--c) 40%,#fff);color:var(--c);border-radius:999px;font-size:10.5px;font-weight:500;line-height:15px;background:#fff}
.dm-ev span .dm-av{width:16px;height:16px;font-size:6.5px;background:#fff;border:1px solid #E5E7EB}
.dm-ev.c-blue{--c:#2563EB}.dm-ev.c-purple{--c:#7C3AED}.dm-ev.c-green{--c:#16A34A}.dm-ev.c-orange{--c:#EA580C}.dm-ev.c-pink{--c:#DB2777}.dm-ev.c-red{--c:#DC2626}.dm-ev.c-yellow{--c:#CA8A04}
.dm-s4.dm-on .dm-kal-head,.dm-s4.dm-on .dm-kal-tb,.dm-s4.dm-on .dm-kal-seg,.dm-s4.dm-on .dm-kal{animation:dmRise .45s cubic-bezier(.2,.8,.2,1) both}
.dm-s4.dm-on .dm-kal-tb{animation-delay:.08s}.dm-s4.dm-on .dm-kal-seg{animation-delay:.14s}.dm-s4.dm-on .dm-kal{animation-delay:.2s}
.dm-s4.dm-on .dm-ev{animation:dmPop .45s cubic-bezier(.5,1.6,.4,1) calc(.6s + var(--k)*.13s) both}
.dm-s4.dm-on .dm-ev.tgt{animation:dmPop .45s cubic-bezier(.5,1.6,.4,1) calc(.6s + var(--k)*.13s) both,dmEvHov .6s linear 4.4s forwards}
@keyframes dmEvHov{0%{transform:none;box-shadow:none}20%{transform:translateY(-1px);box-shadow:0 6px 14px -8px rgba(0,0,0,.3)}80%{transform:translateY(-1px);box-shadow:0 6px 14px -8px rgba(0,0,0,.3)}100%{transform:none;box-shadow:none}}
.dm-s4 .dm-ovl{background:rgba(24,26,40,.4);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:1}
.dm-s4.dm-on .dm-ovl{animation:dmIn .3s ease 4.9s both}
.dm-evp{position:absolute;left:50%;top:50%;width:560px;transform:translate(-50%,-50%);background:#fff;border-radius:16px;box-shadow:0 40px 100px -30px rgba(0,0,0,.45);z-index:21;overflow:hidden}
.dm-s4.dm-on .dm-evp{animation:dmEvp .35s cubic-bezier(.2,.8,.2,1) 5s both}
@keyframes dmEvp{from{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%)}}
.dm-evp-h{padding:22px 22px 0;background:linear-gradient(180deg,rgba(37,99,235,.08),rgba(37,99,235,0) 70%)}
.dm-evp-h .row{display:flex;align-items:center}
.dm-evp-h .cat{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:6px;background:#2563EB;color:#fff;font-size:12px;font-weight:600}
.dm-evp-h .ic{margin-left:auto;display:flex;gap:4px;color:#6B7280}
.dm-evp-h .ic i{width:32px;height:32px;display:flex;align-items:center;justify-content:center}
.dm-evp-h .ic .dm-i{width:17px;height:17px}
.dm-evp-h h2{font-size:20px;font-weight:700;margin-top:10px}
.dm-evp-h p{display:flex;align-items:center;gap:8px;font-size:14px;color:#4B5563;margin-top:6px}
.dm-evp-h p .dm-i{width:15px;height:15px;color:#6B7280}
.dm-evp-b{padding:18px 22px 20px}
.dm-evp-note{border:1px solid #FDE68A;background:#FEFCE8;border-radius:10px;padding:12px 16px}
.dm-evp-note small{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#92400E}
.dm-evp-note small .dm-i{width:13px;height:13px}
.dm-evp-note p{font-size:14.5px;margin-top:6px}
.dm-evp-l{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#6B7280;margin:16px 0 8px}
.dm-evp-g{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dm-evp-g div{border:1px solid #E5E7EB;border-radius:10px;padding:10px 14px}
.dm-evp-g small{display:block;font-size:12px;color:#6B7280}
.dm-evp-g b{display:block;font-size:14px;font-weight:600;margin-top:2px}
.dm-evp-dash{margin-top:12px;border:1px dashed #D1D5DB;border-radius:10px;padding:12px 14px;font-size:13.5px;color:#4B5563;line-height:19px}
.dm-evp-f{display:flex;align-items:center;gap:12px;padding:14px 22px;background:rgba(243,244,246,.4);border-top:1px solid #E5E7EB}
.dm-evp-f .dm-av{width:32px;height:32px;font-size:12px;background:#fff;border:1px solid #E5E7EB}
.dm-evp-f b{display:block;font-size:14px;font-weight:600}
.dm-evp-f small{display:flex;align-items:center;gap:5px;font-size:12.5px;color:#6B7280}
.dm-evp-f small .dm-i{width:12px;height:12px}
.dm-s4 .dm-cur{transform:translate(936px,620px)}
.dm-s4.dm-on .dm-cur{animation:dmCur4 10s cubic-bezier(.4,0,.2,1) both}
@keyframes dmCur4{0%,32%{transform:translate(636px,560px)}44%,50%{transform:translate(1031px,731px)}58%,100%{transform:translate(936px,620px)}}
.dm-s4.dm-on .dm-cur::after{animation:dmClick .5s ease-out 4.7s forwards}
.dm-sync{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;height:40px;padding:0 16px 0 12px;border-radius:999px;background:#0F172A;color:#fff;font-size:13px;font-weight:500;box-shadow:0 14px 30px -12px rgba(0,0,0,.6);z-index:22;white-space:nowrap}
.dm-sync .dm-i{width:16px;height:16px;color:#4ADE80}
.dm-sync .gi{width:16px;height:16px;border-radius:3px;background:#4285F4;position:relative}
.dm-sync .gi::after{content:"31";position:absolute;inset:0;color:#fff;font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center}
.dm-s4.dm-on .dm-sync{animation:dmSyncIn .45s cubic-bezier(.5,1.6,.4,1) 6.6s both}
@keyframes dmSyncIn{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}

/* ======================================================================
   SCENE 5 – Aura AI panel
   ====================================================================== */
.dm-s5 .dm-ovl{background:rgba(0,0,0,.18);-webkit-backdrop-filter:none;backdrop-filter:none;opacity:1}
.dm-s5.dm-on .dm-ovl{animation:dmIn .4s ease 1.9s both}
.dm-s5.dm-on .dm-fab{animation:dmPress .35s ease 1.7s both}
.dm-aura{position:absolute;right:0;top:0;width:440px;height:775px;background:#fff;box-shadow:-30px 0 80px -30px rgba(0,0,0,.45);z-index:22;display:flex;flex-direction:column;overflow:hidden}
.dm-s5.dm-on .dm-aura{animation:dmSlideL .5s cubic-bezier(.2,.8,.2,1) 1.9s both}
.dm-aura-h{position:relative;flex:none;height:100px;padding:20px 18px 18px;background:#1b1530;color:#fff;overflow:hidden}
.dm-aura-h::before{content:"";position:absolute;inset:-40%;background:radial-gradient(40% 55% at 15% 20%,rgba(124,58,237,.9),transparent 70%),radial-gradient(35% 50% at 88% 15%,rgba(249,115,22,.75),transparent 70%),radial-gradient(40% 45% at 60% 110%,rgba(192,38,211,.7),transparent 70%);filter:blur(18px);animation:dmAurora 10s ease-in-out infinite}
.dm-aura-h .row{position:relative;display:flex;align-items:center;gap:12px}
.dm-orb{width:42px;height:42px;border-radius:50%;background:conic-gradient(#7c3aed,#c026d3,#f97316,#7c3aed);padding:3px;animation:dmSpin 6s linear infinite;flex:none}
.dm-orb i{display:flex;width:100%;height:100%;border-radius:50%;background:#fff;align-items:center;justify-content:center;color:#7c3aed;animation:dmSpin 6s linear infinite reverse}
.dm-orb .dm-i{width:20px;height:20px}
.dm-aura-h b{display:block;font-size:17px;font-weight:700}
.dm-aura-h small{display:block;font-size:12px;opacity:.8}
.dm-aura-h .x{margin-left:auto;width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:#fff}
.dm-aura-h .x .dm-i{width:20px;height:20px}
.dm-aura-b{flex:1;overflow:hidden;position:relative}
.dm-aura-m{position:absolute;left:14px;right:14px;top:14px;display:flex;flex-direction:column;gap:12px;transform:translateY(-250px)}
.dm-s5.dm-on .dm-aura-m{animation:dmAuraScroll 12s cubic-bezier(.2,.8,.2,1) both}
@keyframes dmAuraScroll{0%,52%{transform:translateY(0)}58%,66%{transform:translateY(-120px)}72%,100%{transform:translateY(-250px)}}
.dm-msg{max-width:88%;padding:10px 13px;border-radius:16px;font-size:13.5px;line-height:21px}
.dm-msg.u{align-self:flex-end;background:linear-gradient(135deg,#7c3aed,#c026d3);color:#fff;border-bottom-right-radius:6px}
.dm-msg.a{align-self:flex-start;background:#F3F4F6;color:#222639;border-bottom-left-radius:6px}
.dm-msg b{font-weight:700}
.dm-typing{align-self:flex-start;display:flex;gap:5px;padding:12px 14px;border-radius:16px;background:#F3F4F6;opacity:0;position:absolute;left:0}
.dm-typing i{width:7px;height:7px;border-radius:50%;background:#7c3aed;animation:dmDots 1.1s ease-in-out infinite}
.dm-typing i:nth-child(2){animation-delay:.15s}.dm-typing i:nth-child(3){animation-delay:.3s}
.dm-ac-cd{border:1px solid #E5E7EB;border-radius:16px;background:#fff;overflow:hidden}
.dm-ac-h{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #E5E7EB;font-size:13.5px;font-weight:600}
.dm-ac-h .tl{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(22,163,74,.12);color:#16a34a}
.dm-ac-h .tl.pk{background:rgba(219,39,119,.12);color:#db2777}
.dm-ac-h .tl .dm-i{width:14px;height:14px}
.dm-ac-h .n{width:22px;height:22px;border-radius:50%;background:#F3F4F6;font-size:12px;display:flex;align-items:center;justify-content:center;font-weight:600}
.dm-ac-h .adm{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;background:#F3F4F6;font-size:12px;font-weight:500;color:#4B5563}
.dm-ac-h .adm::before{content:"";width:6px;height:6px;border-radius:50%;background:#9CA3AF}
.dm-ac-seg{display:flex;gap:6px;padding:10px 12px 8px}
.dm-ac-seg span{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border:1px solid #E5E7EB;border-radius:999px;font-size:12.5px;font-weight:500;color:#4B5563}
.dm-ac-seg span.on{background:#1F2937;border-color:#1F2937;color:#fff;font-weight:600}
.dm-ac-rw{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid #E5E7EB}
.dm-ac-rw .dm-chk{width:18px;height:18px;border-radius:5px}
.dm-ac-rw .t{flex:1;min-width:0}
.dm-ac-rw .t b{display:block;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-ac-rw .t small{display:block;font-size:11.5px;color:#6B7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-ac-rw .tm{font-size:12.5px;font-weight:600;color:#EF4343;white-space:nowrap}
.dm-ac-rw .dm-pill{height:22px}
.dm-ac-rw .go{width:30px;height:30px;border-radius:8px;background:rgba(124,58,237,.1);color:#7c3aed;display:flex;align-items:center;justify-content:center;flex:none}
.dm-ac-rw .go .dm-i{width:15px;height:15px}
.dm-ac-f{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:rgba(243,244,246,.4);border-top:1px solid #E5E7EB;font-size:13px;color:#6B7280}
.dm-ac-f b{color:#222639;font-weight:700}
.dm-ac-f .btns{display:flex;gap:8px}
.dm-ac-btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:10px;font-size:13.5px;font-weight:600;color:#222639;background:#fff;border:1px solid #E5E7EB}
.dm-ac-btn.pri{background:linear-gradient(135deg,#7c3aed,#f97316);color:#fff;border:0;box-shadow:0 8px 18px -8px rgba(124,58,237,.8)}
.dm-ac-btn .dm-i{width:14px;height:14px}
.dm-ac-body{padding:12px;display:flex;align-items:center;gap:12px}
.dm-ac-pill{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:999px;background:rgba(217,119,6,.13);color:#D97706;font-size:13.5px;font-weight:600}
.dm-ac-pill i{width:7px;height:7px;border-radius:50%;background:currentColor}
.dm-sw{display:flex;gap:8px;margin-left:8px}
.dm-sw i{width:24px;height:24px;border-radius:50%}
.dm-sw i.on{box-shadow:0 0 0 2px #fff,0 0 0 4px currentColor}
.dm-ac-note{display:flex;align-items:center;gap:6px;padding:0 12px 8px;font-size:12.5px;color:#6B7280}
.dm-ac-note .dm-i{width:14px;height:14px;color:#7c3aed}
.dm-ac-f.r{justify-content:flex-end;gap:8px;border-top:0;padding-top:0}
.dm-ac-done{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid #E5E7EB;background:rgba(22,163,74,.06);color:#16a34a;font-size:13px;font-weight:600}
.dm-ac-done .dm-i{width:15px;height:15px}
.dm-aura-c{flex:none;border-top:1px solid #E5E7EB;padding:12px 14px 10px}
.dm-aura-cbox{display:flex;align-items:center;height:56px;border:1.5px solid #DDD6FE;border-radius:16px;padding:0 8px 0 16px;box-shadow:0 0 0 4px rgba(124,58,237,.08)}
.dm-aura-cbox span{flex:1;font-size:14px;color:#9CA3AF}
.dm-aura-cbox i{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#7c3aed,#f97316);display:flex;align-items:center;justify-content:center;color:#fff;opacity:.35;transform:scale(.9)}
.dm-aura-cbox i .dm-i{width:16px;height:16px}
.dm-aura-c small{display:flex;justify-content:center;gap:14px;margin-top:8px;font-size:11px;color:#9CA3AF}
/* message timeline */
.dm-s5 .dm-m1{opacity:0}
.dm-s5.dm-on .dm-m1{animation:dmMsgIn .35s cubic-bezier(.2,.8,.2,1) 2.8s both}
.dm-s5.dm-on .dm-m2{animation:dmMsgIn .35s cubic-bezier(.2,.8,.2,1) 4.3s both}
.dm-s5.dm-on .dm-m3{animation:dmMsgIn .4s cubic-bezier(.2,.8,.2,1) 4.7s both}
.dm-s5.dm-on .dm-m4{animation:dmMsgIn .35s cubic-bezier(.2,.8,.2,1) 6.5s both}
.dm-s5.dm-on .dm-m5{animation:dmMsgIn .35s cubic-bezier(.2,.8,.2,1) 7.9s both}
.dm-s5.dm-on .dm-m6{animation:dmMsgIn .4s cubic-bezier(.2,.8,.2,1) 8.3s both}
@keyframes dmMsgIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.dm-s5.dm-on .dm-m1{animation:dmMsgIn .35s cubic-bezier(.2,.8,.2,1) 2.8s both}
.dm-s5.dm-on .dm-typing.t1{animation:dmBlip 1.1s linear 3.3s both}
.dm-s5.dm-on .dm-typing.t2{animation:dmBlip 1.1s linear 6.9s both}
.dm-s5.dm-on .dm-m3 .dm-ac-rw{animation:dmRise .35s cubic-bezier(.2,.8,.2,1) both}
.dm-s5.dm-on .dm-m3 .dm-ac-rw:nth-of-type(1){animation-delay:5s}
.dm-s5.dm-on .dm-m3 .dm-ac-rw:nth-of-type(2){animation-delay:5.15s}
.dm-s5.dm-on .dm-ac-btn.pri{animation:dmPress .3s ease 10.2s both}
.dm-s5.dm-on .dm-ac-done{animation:dmRise .35s cubic-bezier(.2,.8,.2,1) 10.5s both}
.dm-s5.dm-on .dm-m6 .dm-ac-f.r{animation:dmOut .25s linear 10.5s both}
.dm-m6 .dm-ac-f.r{opacity:0;position:absolute;right:0;bottom:0;left:0;background:#fff}
.dm-m6 .dm-ac-ft{position:relative;min-height:54px}
.dm-s5 .dm-cur{transform:translate(936px,650px)}
.dm-s5.dm-on .dm-cur{animation:dmCur5 12s cubic-bezier(.4,0,.2,1) both}
@keyframes dmCur5{0%,4%{transform:translate(696px,500px)}12.5%,16%{transform:translate(1119px,718px)}24%,75%{transform:translate(496px,620px)}83%,86%{transform:translate(1081px,563px)}92%,100%{transform:translate(936px,650px)}}
.dm-s5.dm-on .dm-cur::after{animation:dmClick .5s ease-out 1.7s forwards,dmClick .5s ease-out 10.2s forwards}

/* ======================================================================
   SCENE 6 – Daglig rapport
   ====================================================================== */
.dm-dr-head{display:flex;align-items:center;gap:14px;margin-top:4px}
.dm-dr-head .dm-livebadge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:#16A34A;margin-left:8px}
.dm-dr-head .dm-livebadge i{width:7px;height:7px;border-radius:50%;background:#16A34A;animation:dmPulse 1.4s ease-in-out infinite}
.dm-dr-head .r{margin-left:auto;display:flex;align-items:center;gap:10px}
.dm-dr-head .r .dm-btn{height:38px;font-weight:600;font-size:13.5px;border-radius:10px}
.dm-dnav{display:inline-flex;align-items:center;height:38px;border:1px solid #E5E7EB;border-radius:10px;overflow:hidden;background:#fff}
.dm-dnav span{display:flex;align-items:center;gap:8px;height:100%;padding:0 12px;font-size:13.5px;font-weight:600}
.dm-dnav span+span{border-left:1px solid #E5E7EB}
.dm-dnav .dm-i{width:15px;height:15px;color:#6B7280}
.dm-dnav span.m{padding:0 40px}
.dm-podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:14px;align-items:end;margin-top:22px}
.dm-pc{position:relative;border:1px solid #E5E7EB;border-radius:20px;padding:18px;background:#fff;overflow:hidden}
.dm-pc.first{padding:22px 20px;border-color:#FCD9A8;background:linear-gradient(180deg,#FFF7EC,#fff 60%)}
.dm-pc.first::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:dmShine 3.5s ease-in-out infinite;z-index:0;pointer-events:none}
.dm-pc.first>*{position:relative;z-index:1}
.dm-pc .top{display:flex;align-items:center;gap:12px}
.dm-medal{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:800;flex:none}
.dm-medal.g{background:linear-gradient(135deg,#fbbf24,#f59e0b)}.dm-medal.s{background:linear-gradient(135deg,#cbd5e1,#94a3b8)}.dm-medal.b{background:linear-gradient(135deg,#f0a36b,#c2703d)}
.dm-pav{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;flex:none}
.dm-pc.first .dm-pav{width:52px;height:52px;font-size:17px}
.dm-pc .nm{font-size:15.5px;font-weight:700;display:flex;align-items:center;gap:8px}
.dm-pc .nm i{font-style:normal;font-size:11px;font-weight:500;color:#6B7280;border:1px solid #E5E7EB;border-radius:999px;padding:1px 7px}
.dm-pc .sub{font-size:12.5px;color:#6B7280;margin-top:2px}
.dm-pc .big{display:flex;align-items:baseline;gap:8px;margin-top:14px;font-size:34px;font-weight:700;line-height:1}
.dm-pc.first .big{font-size:42px}
.dm-pc .big small{font-size:13px;font-weight:400;color:#6B7280}
.dm-pc .st{display:flex;gap:16px;margin-top:10px;font-size:12.5px;color:#6B7280}
.dm-pc .st b{color:#222639;font-weight:600}
.dm-pc .dm-pbar{height:6px;border-radius:3px;background:#F3F4F6;margin-top:14px;overflow:hidden}
.dm-pc .dm-pbar i{display:block;height:100%;border-radius:3px;transform-origin:left;background:#94a3b8}
.dm-pc.first .dm-pbar i{background:#F97015}
.dm-pc.third .dm-pbar i{background:#c2703d}
.dm-s6.dm-on .dm-dr-head{animation:dmRise .45s cubic-bezier(.2,.8,.2,1) both}
.dm-s6.dm-on .dm-pc{animation:dmRise2 .6s cubic-bezier(.2,.8,.2,1) both}
.dm-s6.dm-on .dm-pc.second{animation-delay:.35s}.dm-s6.dm-on .dm-pc.first{animation-delay:.5s}.dm-s6.dm-on .dm-pc.third{animation-delay:.65s}
.dm-s6.dm-on .dm-pc .dm-pbar i{animation:dmGrowX 1s cubic-bezier(.2,.8,.2,1) 1.1s both}
.dm-cnt .dm-s6.dm-on .dm-pc .dm-num{animation:dmCount 1.4s cubic-bezier(.2,.8,.2,1) 1s both}
.dm-kpih{display:flex;align-items:center;gap:10px;margin-top:22px}
.dm-kpih h2{font-size:16px;font-weight:700}
.dm-kpih span{font-size:13px;color:#6B7280}
.dm-kpih .dm-btn{margin-left:auto;height:36px;font-size:13.5px;border-radius:10px}
.dm-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:14px}
.dm-kc{border:1px solid #E5E7EB;border-radius:18px;padding:14px 16px 12px;background:#fff;position:relative;min-width:0}
.dm-kc .top{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#6B7280;padding-right:50px}
.dm-kc .top span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
.dm-kc .top i{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c);flex:none}
.dm-kc .top i .dm-i{width:14px;height:14px}
.dm-kc svg.sp{position:absolute;right:12px;top:15px;width:52px;height:24px;overflow:visible}
.dm-kc svg.sp path{fill:none;stroke:var(--c);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:200;stroke-dashoffset:0}
.dm-kc svg.sp .fl{fill:color-mix(in srgb,var(--c) 10%,transparent);stroke:none}
.dm-kc .v{font-size:26px;font-weight:700;margin-top:8px;font-variant-numeric:tabular-nums;line-height:1.2}
.dm-kc .d{display:flex;align-items:center;gap:4px;font-size:12px;color:#6B7280;margin-top:6px}
.dm-kc .d b{font-weight:600}
.dm-kc .d.up b{color:#16A34A}.dm-kc .d.dn b{color:#DC2626}
.dm-kc .d .dm-i{width:12px;height:12px}
.dm-kc .d.up .dm-i{color:#16A34A}.dm-kc .d.dn .dm-i{color:#DC2626}
.dm-s6.dm-on .dm-kpih{animation:dmRise .45s cubic-bezier(.2,.8,.2,1) 1.3s both}
.dm-s6.dm-on .dm-kc{animation:dmRise2 .5s cubic-bezier(.2,.8,.2,1) calc(1.5s + var(--k)*.1s) both}
.dm-s6.dm-on .dm-kc svg.sp path{animation:dmDraw 1.2s ease-out calc(1.9s + var(--k)*.1s) both}
.dm-s6.dm-on .dm-kc svg.sp .fl{animation:dmIn .6s ease calc(2.6s + var(--k)*.1s) both}
.dm-cnt .dm-s6.dm-on .dm-kc .dm-num{animation:dmCount 1.3s cubic-bezier(.2,.8,.2,1) calc(1.7s + var(--k)*.1s) both}
.dm-chart{margin-top:16px;border:1px solid #E5E7EB;border-radius:16px;padding:16px 18px 34px;background:#fff}
.dm-chart .h{display:flex;align-items:center;justify-content:space-between;font-size:16px;font-weight:700}
.dm-chart .lg{display:flex;gap:14px;font-size:13px;font-weight:400;color:#4B5563}
.dm-chart .lg span{display:flex;align-items:center;gap:6px}
.dm-chart .lg i{width:9px;height:9px;border-radius:2px;background:#F97015}
.dm-chart .lg span:last-child i{background:#16A34A}
.dm-bars{position:relative;display:grid;grid-template-columns:repeat(16,1fr);gap:0;height:108px;margin-top:14px;align-items:end;background:repeating-linear-gradient(180deg,transparent 0 26px,#F3F4F6 26px 27px)}
.dm-bars>div{position:relative;height:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px}
.dm-bars b{display:block;width:20px;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#F97015,#FDBA74);transform-origin:bottom;height:calc(var(--h)*1%)}
.dm-bars b.s{width:20px;background:linear-gradient(180deg,#16A34A,#86EFAC);height:calc(var(--h)*1%)}
.dm-bars>div.now b:first-child{box-shadow:0 0 0 2px #fff,0 0 0 4px #F97015}
.dm-bars>div span{position:absolute;top:100%;margin-top:8px;font-size:12px;color:#6B7280}
.dm-bars>div.now span{color:#F97015;font-weight:600}
.dm-s6.dm-on .dm-chart{animation:dmRise .45s cubic-bezier(.2,.8,.2,1) 2.4s both}
.dm-s6.dm-on .dm-bars b{animation:dmGrowY .7s cubic-bezier(.2,.8,.2,1) calc(2.7s + var(--k)*.08s) both}
.dm-s6 .dm-cur{display:none}

/* ---------- responsive ---------- */
@media (max-width:900px){.dm-tab{flex:1 1 calc(33.33% - 6px);padding:10px 12px 12px;font-size:12.5px}.dm-tab .dm-tab-bar{bottom:6px}}
@media (max-width:520px){.dm-tab{flex:1 1 calc(50% - 6px)}.dm-strip{gap:5px}.dm-win{border-radius:16px}}
@media (prefers-reduced-motion:reduce){
  .dm-scene *{animation:none !important}
  .dm-tab.on .dm-tab-bar i{transform:scaleX(1)}
  .dm-cur{display:none}
  .dm-cnt .dm-num{--dm-n:var(--to)}
}