/* ══════════════════════════════════════════════════════════════════════════
   SOLUTRA CRM — produktdemon
   ──────────────────────────────────────────────────────────────────────────
   En självspelande återskapning av tre CRM-vyer. Inget är en bild: allt är
   DOM och SVG, så texten är skarp i alla skalor och varje del går att
   animera.

   SKALNINGEN. Komponenten ritas alltid mot en fast designyta på 1440x900.
   Värden får därför skrivas i absoluta pixlar precis som i en designfil, och
   JS skalar hela ytan med transform:scale() till den bredd den råkar få.
   Ingen omritning per brytpunkt, inga kolumner som byter beteende, och
   proportionerna stämmer med förlagan överallt.

   HOVER. Demon är helt passiv: pointer-events är avstängt i hela trädet, så
   besökarens egna klick gör ingenting. Hovertillstånden drivs i stället av
   fantomkursorn, som sätter klassen .hov på det den pekar på. Därför finns
   det inte en enda :hover-regel här nere.

   FÄRGERNA. Panelmörkret ligger medvetet under sajtens vanliga bakgrund:
   skärmen ska läsa som en självlysande yta i ett mörkt rum, inte som en
   sektion av sidan.
   ═══════════════════════════════════════════════════════════════════════ */

.crmd-yta{
  position:relative;
  width:100%;
  aspect-ratio:1440/900;
  overflow:hidden;
  border-radius:14px;
  background:#050A18;
  contain:layout paint;
}

.crmd-app{
  position:absolute;
  left:0; top:0;
  width:1440px;
  height:900px;
  transform-origin:0 0;
  transform:scale(var(--cd-fit,1));
  display:grid;
  grid-template-columns:240px 1fr;

  /* Demon reagerar aldrig på besökaren. */
  pointer-events:none;
  user-select:none;

  font-family:'Inter','Montserrat',system-ui,sans-serif;
  font-size:13px;
  line-height:1.45;
  color:var(--d-txt);
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;

  /* Alla siffror i demon tickar. Tabulära former håller bredden konstant så
     ingenting hoppar i sidled när värdena räknas upp (CLS 0). */
  font-variant-numeric:tabular-nums;

  --d-bg:#050A18;
  --d-panel:#0B1224;
  --d-panel2:#111A33;
  --d-linje:rgba(120,160,255,.10);
  --d-linje2:rgba(120,160,255,.06);
  --d-bla:#2F6BFF;
  --d-bla2:#4C8DFF;
  --d-lila:#7C4DFF;
  --d-gron:#22C55E;
  --d-gul:#F5A524;
  --d-rod:#F0517A;
  --d-txt:#F2F5FF;
  --d-txt2:rgba(230,238,255,.55);
  --d-txt3:rgba(230,238,255,.34);
  --d-glow:0 0 40px -12px rgba(47,107,255,.55);

  background:
    radial-gradient(1100px 620px at 22% -10%, rgba(47,107,255,.10), transparent 62%),
    radial-gradient(760px 520px at 96% 8%, rgba(124,77,255,.09), transparent 60%),
    var(--d-bg);
}

/* I laptopens skärmglas fyller demon glaset kant i kant: glasets kvot
   (1,56) är snäppet lägre än designytans (1,60), så ~2 % täcks av samma
   mörker som appens bakgrund — osynligt. Under 760 px kliver glaset ur
   datorn (mobilblocket i index.html) och då gäller aspect-ratio igen. */
/* OBS sammansatt väljare utan mellanslag: montera() lägger .crmd-yta på
   SAMMA element som bär .skarm-app, inte på ett barn. Med efterföljarväljare
   matchade regeln aldrig, aspect-ratio 1440/900 låg kvar, och glaset behöll
   demons bildformat i stället för laptopskärmens — vilket gav den mörka
   remsan under demon. */
@media(min-width:761px){
  .skarm-app.crmd-yta{position:absolute; inset:0; height:100%; aspect-ratio:auto; border-radius:0}
}

/* ── Atomer ───────────────────────────────────────────────────────────── */

.cd-panel{
  background:var(--d-panel);
  border:1px solid var(--d-linje);
  border-radius:12px;
}

.cd-btn{
  display:inline-flex; align-items:center; gap:7px;
  height:36px; padding:0 15px;
  border-radius:10px;
  border:1px solid transparent;
  font-size:12.5px; font-weight:600;
  color:var(--d-txt);
  white-space:nowrap;
  transition:transform .12s ease, background-color .16s ease, box-shadow .16s ease, filter .16s ease;
}
.cd-btn svg{flex:none}

.cd-btn--pri{
  background:linear-gradient(96deg,var(--d-bla),var(--d-bla2));
  box-shadow:0 6px 18px -8px rgba(47,107,255,.85);
  color:#fff;
}
.cd-btn--pri.hov{filter:brightness(1.12); box-shadow:0 8px 22px -8px rgba(47,107,255,1)}

.cd-btn--sek{
  background:rgba(255,255,255,.035);
  border-color:var(--d-linje);
  color:var(--d-txt2);
  font-weight:500;
}
.cd-btn--sek.hov{background:rgba(255,255,255,.07); color:var(--d-txt)}

/* Nedtryckt läge. Fantomkursorn sätter .tryck i 90 ms vid varje klick — en
   px ned och en aning ljusare, samma som ett riktigt aktivt tillstånd. */
.cd-btn.tryck,.cd-nl.tryck,.cd-flik.tryck,.cd-ikbtn.tryck{
  transform:translateY(1px);
  filter:brightness(1.18);
}

.cd-ikbtn{
  position:relative;
  width:36px; height:36px;
  display:grid; place-items:center;
  border-radius:10px;
  border:1px solid var(--d-linje);
  background:rgba(255,255,255,.025);
  color:var(--d-txt2);
  transition:transform .12s ease, background-color .16s ease, color .16s ease;
}
.cd-ikbtn.hov{background:rgba(255,255,255,.06); color:var(--d-txt)}

.cd-badge{
  position:absolute; top:-5px; right:-5px;
  min-width:17px; height:17px; padding:0 4px;
  border-radius:9px;
  background:linear-gradient(96deg,var(--d-bla),var(--d-bla2));
  border:2px solid var(--d-panel);
  font-size:9.5px; font-weight:700; line-height:13px;
  color:#fff; text-align:center;
}

.cd-pill{
  display:inline-flex; align-items:center; gap:5px;
  height:22px; padding:0 9px;
  border-radius:8px;
  font-size:11px; font-weight:600;
  letter-spacing:.005em;
}
.cd-pill--bla{background:rgba(47,107,255,.16); color:#8FB4FF; border:1px solid rgba(47,107,255,.28)}
.cd-pill--lila{background:rgba(124,77,255,.16); color:#B9A2FF; border:1px solid rgba(124,77,255,.30)}
.cd-pill--gul{background:rgba(245,165,36,.14); color:#E8A34A; border:1px solid rgba(245,165,36,.26)}
.cd-pill--gron{background:rgba(34,197,94,.14); color:#4ADE80; border:1px solid rgba(34,197,94,.28)}
.cd-pill--gra{background:rgba(255,255,255,.05); color:var(--d-txt2); border:1px solid var(--d-linje)}

.cd-kebab{color:var(--d-txt3); flex:none}
.cd-lank{font-size:12px; font-weight:600; color:var(--d-bla2)}

.cd-avatar{
  position:relative;
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  font-size:11px; font-weight:700; letter-spacing:.02em;
  color:#EAF1FF;
  background:linear-gradient(145deg,#24356E,#16224A);
  border:1px solid rgba(140,175,255,.22);
  flex:none;
}
.cd-avatar--sm{width:24px; height:24px; font-size:9.5px}
.cd-avatar--on::after{
  content:""; position:absolute; right:-1px; bottom:-1px;
  width:9px; height:9px; border-radius:50%;
  background:var(--d-gron); border:2px solid var(--d-panel);
}

/* ── Sidomenyn ────────────────────────────────────────────────────────── */

.cd-sido{
  position:relative;
  display:flex; flex-direction:column;
  background:var(--d-panel);
  border-right:1px solid var(--d-linje);
}

/* Kantglöden. Den blå strimman längs menyns ytterkant hör till identiteten
   och ska överleva alla omgångar: ljusast på mitten, utfasad mot hörnen. */
.cd-sido::after{
  content:"";
  position:absolute; right:-1px; top:14%; bottom:14%;
  width:2px;
  background:linear-gradient(180deg,transparent,rgba(80,140,255,.9) 22%,#5D9BFF 50%,rgba(80,140,255,.9) 78%,transparent);
  box-shadow:0 0 26px 5px rgba(47,107,255,.42);
}

.cd-logo{
  display:flex; align-items:center; gap:10px;
  height:72px; padding:0 20px;
  flex:none;
}
.cd-logo b{font-size:14px; font-weight:700; letter-spacing:.055em}
.cd-logo .cd-logo-m{
  width:30px; height:30px; flex:none;
  color:var(--d-bla2);
  filter:drop-shadow(0 0 10px rgba(76,141,255,.55));
}

.cd-nav{position:relative; display:flex; flex-direction:column; gap:3px; padding:6px 12px}

.cd-nl{
  position:relative;
  display:flex; align-items:center; gap:11px;
  height:42px; padding:0 13px;
  border-radius:10px;
  font-size:13px; font-weight:500;
  color:var(--d-txt2);
  transition:background-color .18s ease, color .18s ease, transform .12s ease;
}
.cd-nl svg{flex:none; opacity:.85}
.cd-nl.hov{background:rgba(255,255,255,.045); color:var(--d-txt)}

/* Den aktiva menypunktens platta ligger i ett EGET element (.cd-nlmark) som
   glider mellan raderna vid vybyte. Hade markeringen varit en klass på
   raden skulle den hoppa; nu translateras en enda platta mjukt på plats. */
.cd-nlmark{
  position:absolute; left:12px; right:12px; top:6px;
  height:42px;
  border-radius:10px;
  background:linear-gradient(96deg,rgba(47,107,255,.95),rgba(76,141,255,.62));
  box-shadow:0 8px 22px -10px rgba(47,107,255,.95), inset 0 1px 0 rgba(255,255,255,.14);
  transform:translateY(var(--cd-nly,0));
  transition:transform .46s cubic-bezier(.4,.02,.16,1);
  z-index:0;
}
.cd-nl{z-index:1}
.cd-nl.on{color:#fff; font-weight:600}
.cd-nl.on svg{opacity:1}

.cd-anv{
  display:flex; align-items:center; gap:10px;
  margin:auto 12px 14px;
  padding:9px 11px;
  border-radius:12px;
  background:var(--d-panel2);
  border:1px solid var(--d-linje);
}
.cd-anv b{display:block; font-size:12.5px; font-weight:600}
.cd-anv small{display:block; font-size:11px; color:var(--d-txt2)}
.cd-anv .cd-kebab{margin-left:auto}

/* ── Toppfältet ───────────────────────────────────────────────────────── */

.cd-huvud{display:flex; flex-direction:column; min-width:0}

.cd-topp{
  display:flex; align-items:center; gap:12px;
  height:72px; padding:0 26px;
  border-bottom:1px solid var(--d-linje);
  flex:none;
}

.cd-sok{
  display:flex; align-items:center; gap:9px;
  width:290px; height:37px; padding:0 12px;
  border-radius:10px;
  background:rgba(255,255,255,.028);
  border:1px solid var(--d-linje);
  color:var(--d-txt3);
  font-size:12.5px;
}
.cd-sok kbd{
  margin-left:auto;
  font:inherit; font-size:11px;
  color:var(--d-txt3);
  letter-spacing:.04em;
}
.cd-sok--sm{width:210px; height:34px}

.cd-topp-h{display:flex; align-items:center; gap:9px; margin-left:auto}

/* ── Innehållsytan ────────────────────────────────────────────────────── */

.cd-yta{
  position:relative;
  flex:1;
  padding:22px 26px;
  min-height:0;
  overflow:hidden;
}

/* Vylagren staplas på varandra så korsövergången kan köra båda samtidigt. */
.cd-vy{
  position:absolute; inset:0;
  padding:22px 26px;
  display:flex; flex-direction:column;
  opacity:0;
  transform:scale(1.03);
  transition:opacity .36s ease, transform .36s cubic-bezier(.3,0,.2,1);
  will-change:transform,opacity;
}
.cd-vy.inne{opacity:1; transform:none}
.cd-vy.ut{opacity:0; transform:scale(.97)}

.cd-vyh{display:flex; align-items:flex-start; gap:16px; margin-bottom:18px; flex:none}
.cd-vyh h2{
  font-family:inherit;
  font-size:25px; font-weight:700; line-height:1.15;
  letter-spacing:-.022em;
}
.cd-vyh p{margin-top:5px; font-size:13px; color:var(--d-txt2)}
.cd-vyh-h{display:flex; align-items:center; gap:9px; margin-left:auto; padding-top:3px}

/* ── KPI-korten ───────────────────────────────────────────────────────── */

.cd-kpi-rad{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:16px; flex:none}

.cd-kpi{
  position:relative;
  height:106px;
  padding:14px 15px 0;
  overflow:hidden;
  background:var(--d-panel);
  border:1px solid var(--d-linje);
  border-radius:12px;
}
.cd-kpi-h{display:flex; align-items:center; gap:11px}
.cd-kpi-ic{
  width:34px; height:34px; flex:none;
  display:grid; place-items:center;
  border-radius:10px;
  background:rgba(47,107,255,.13);
  border:1px solid rgba(47,107,255,.24);
  color:var(--d-bla2);
}
.cd-kpi--lila .cd-kpi-ic{background:rgba(124,77,255,.14); border-color:rgba(124,77,255,.26); color:#A98BFF}
.cd-kpi-t{font-size:12.5px; color:var(--d-txt2)}
.cd-kpi .cd-kebab{margin-left:auto}

.cd-kpi-n{
  margin:7px 0 0 45px;
  font-size:23px; font-weight:700; letter-spacing:-.02em; line-height:1.1;
}
.cd-kpi-n i{font-style:normal; font-size:12px; font-weight:600; color:var(--d-txt2); margin-left:3px}
.cd-kpi-d{margin:2px 0 0 45px; font-size:11px; font-weight:500; color:var(--d-gron)}

.cd-spark{position:absolute; left:0; right:0; bottom:0; width:100%; height:30px; display:block}

/* ══ VY: LEADS ═════════════════════════════════════════════════════════ */

.cd-tabellpanel{position:relative; display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden}

.cd-flikrad{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  flex:none;
}
.cd-flikar{display:flex; align-items:center; gap:4px; background:rgba(255,255,255,.022); border-radius:10px; padding:3px}
.cd-flik{
  display:inline-flex; align-items:center; gap:6px;
  height:30px; padding:0 11px;
  border-radius:8px;
  font-size:12px; font-weight:500;
  color:var(--d-txt2);
  transition:background-color .18s ease, color .18s ease, transform .12s ease;
}
.cd-flik em{font-style:normal; font-size:11px; color:var(--d-txt3)}
.cd-flik.hov{background:rgba(255,255,255,.05); color:var(--d-txt)}
.cd-flik.on{background:rgba(255,255,255,.09); color:var(--d-txt); font-weight:600}
.cd-flik.on em{color:var(--d-txt2)}
.cd-flikar-h{display:flex; align-items:center; gap:9px; margin-left:auto}
.cd-filterprick{
  width:6px; height:6px; border-radius:50%;
  background:var(--d-bla2); box-shadow:0 0 8px rgba(76,141,255,.9);
}

.cd-tab{width:100%; border-collapse:collapse; table-layout:fixed}
.cd-tab th{
  padding:9px 12px;
  font-size:10px; font-weight:600; letter-spacing:.075em; text-transform:uppercase;
  color:var(--d-txt3);
  text-align:left;
  border-top:1px solid var(--d-linje);
  border-bottom:1px solid var(--d-linje);
}
.cd-tab td{padding:0 12px; border-bottom:1px solid var(--d-linje2); vertical-align:middle}
.cd-tab tbody tr{
  height:56px;
  transition:background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.cd-tab tbody tr.hov{
  background:rgba(255,255,255,.032);
  box-shadow:0 10px 26px -18px rgba(0,0,0,.9);
}
.cd-kryss{
  width:14px; height:14px; border-radius:4px;
  border:1.5px solid rgba(150,180,255,.30);
  display:block;
}
.cd-stjarna{color:rgba(150,180,255,.30)}

.cd-lead-n{font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:7px}
.cd-lead-e{font-size:11px; color:var(--d-txt2); margin-top:2px}
.cd-ftg-n{font-size:12.5px; font-weight:500}
.cd-ftg-d{font-size:11px; color:var(--d-txt2); margin-top:2px}

.cd-ring{position:relative; width:38px; height:38px}
.cd-ring svg{display:block; transform:rotate(-90deg)}
.cd-ring b{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:11.5px; font-weight:700;
}

.cd-akt{display:flex; align-items:center; gap:8px}
.cd-akt-ic{color:var(--d-txt3); flex:none}
.cd-akt-t{font-size:12px}
.cd-akt-s{font-size:11px; color:var(--d-txt2); margin-top:1px}

.cd-agare{display:flex; align-items:center; gap:8px; font-size:12px}

.cd-tabellfot{
  display:flex; align-items:center; gap:12px;
  margin-top:auto;
  padding:12px 16px;
  border-top:1px solid var(--d-linje);
  font-size:11.5px; color:var(--d-txt2);
  flex:none;
}
.cd-sidor{display:flex; align-items:center; gap:5px; margin-left:auto}
.cd-sidnr{
  min-width:27px; height:27px; padding:0 7px;
  display:grid; place-items:center;
  border-radius:8px;
  border:1px solid var(--d-linje);
  font-size:11.5px; color:var(--d-txt2);
}
.cd-sidnr.on{
  background:linear-gradient(96deg,var(--d-bla),var(--d-bla2));
  border-color:transparent; color:#fff; font-weight:600;
}

/* ══ VY: AUTOMATISERING ════════════════════════════════════════════════ */

.cd-byggare{display:grid; grid-template-columns:1fr 236px; flex:1; min-height:0}
.cd-byggare-h{
  display:flex; align-items:center; gap:11px;
  padding:13px 15px;
  border-bottom:1px solid var(--d-linje);
  flex:none;
}
.cd-byggare-h b{font-size:14px; font-weight:600}
.cd-byggare-hh{display:flex; align-items:center; gap:9px; margin-left:auto}

.cd-flode{display:grid; grid-template-columns:166px 1fr; min-height:0}

.cd-palett{
  padding:13px;
  border-right:1px solid var(--d-linje);
  overflow:hidden;
}
.cd-palett-r{
  margin:12px 0 7px;
  font-size:9.5px; font-weight:700; letter-spacing:.10em; text-transform:uppercase;
  color:var(--d-txt3);
}
.cd-palett-r:first-child{margin-top:0}
.cd-pi{
  display:flex; align-items:center; gap:9px;
  height:29px; padding:0 8px;
  white-space:nowrap;
  border-radius:8px;
  font-size:11.5px; color:var(--d-txt2);
  transition:background-color .18s ease, color .18s ease;
}
.cd-pi svg{flex:none; opacity:.8}
.cd-pi.hov{background:rgba(255,255,255,.055); color:var(--d-txt)}

/* Canvasen. Punktrastret ritas med en repeterande gradient i stället för en
   bild, så det skalar utan att bli suddigt. */
.cd-canvas{
  position:relative;
  overflow:hidden;
  background-image:radial-gradient(rgba(140,175,255,.13) 1px, transparent 1px);
  background-size:22px 22px;
  background-position:11px 11px;
}
.cd-zoom{
  position:absolute; right:12px; top:12px;
  display:flex; flex-direction:column; gap:6px;
  z-index:3;
}
.cd-zoom .cd-ikbtn{width:29px; height:29px; background:var(--d-panel2)}

.cd-linjer{position:absolute; inset:0; width:100%; height:100%; overflow:visible}

.cd-nod{
  position:absolute;
  width:186px;
  display:flex; align-items:center; gap:10px;
  padding:11px 11px;
  border-radius:12px;
  background:var(--d-panel2);
  border:1px solid var(--d-linje);
  box-shadow:0 12px 28px -20px rgba(0,0,0,.95);
  /* top-transitionen är det andra medvetna undantaget från transform-
     regeln: absoluta noder i en liten egen yta, flyttas EN gång när
     draget ger plats åt den nya noden. */
  transition:transform .2s ease, box-shadow .2s ease, border-color .25s ease, opacity .35s ease, filter .35s ease, top .32s cubic-bezier(.3,0,.2,1);
}
.cd-nod-ic{
  width:28px; height:28px; flex:none;
  display:grid; place-items:center;
  border-radius:8px;
  background:rgba(47,107,255,.15);
  color:var(--d-bla2);
}
.cd-nod b{display:block; font-size:12px; font-weight:600}
.cd-nod small{display:block; font-size:10.5px; color:var(--d-txt2); margin-top:1px}
.cd-nod .cd-kebab{margin-left:auto}
.cd-nod.hov{border-color:rgba(120,160,255,.26)}

.cd-nod--lila{border-color:rgba(124,77,255,.42)}
.cd-nod--lila .cd-nod-ic{background:rgba(124,77,255,.18); color:#A98BFF}
.cd-nod--gul{border-color:rgba(245,165,36,.45)}
.cd-nod--gul .cd-nod-ic{background:rgba(245,165,36,.16); color:var(--d-gul)}
.cd-nod--gron{border-color:rgba(34,197,94,.40)}
.cd-nod--gron .cd-nod-ic{background:rgba(34,197,94,.16); color:#4ADE80}
.cd-nod--bla .cd-nod-ic{background:rgba(47,107,255,.16); color:var(--d-bla2)}

/* Grenetiketterna Ja/Nej sitter på kopplingarna, inte i noderna. */
.cd-gren{
  position:absolute;
  padding:2px 9px;
  border-radius:7px;
  font-size:10.5px; font-weight:600;
  background:var(--d-panel);
  transform:translate(-50%,-50%);
}
.cd-gren--ja{color:#4ADE80; border:1px solid rgba(34,197,94,.35)}
.cd-gren--nej{color:#F2789C; border:1px solid rgba(240,81,122,.35)}

.cd-info{padding:15px; border-left:1px solid var(--d-linje); overflow:hidden}
.cd-info h4{font-family:inherit; font-size:13.5px; font-weight:600; margin-bottom:13px}
.cd-info-r{margin-bottom:11px}
.cd-info-e{font-size:10.5px; color:var(--d-txt3); margin-bottom:3px}
.cd-info-v{font-size:12px; font-weight:500}
.cd-info-v.sek{color:var(--d-txt2); font-weight:400; line-height:1.5}
.cd-info-rad{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; font-size:11.5px}
.cd-info-rad span{color:var(--d-txt2)}
.cd-info-rad b{font-weight:600}
.cd-info hr{border:0; border-top:1px solid var(--d-linje); margin:12px 0}
.cd-info .cd-btn{width:100%; justify-content:center; margin-top:12px}

/* ══ VY: ÖVERSIKT ══════════════════════════════════════════════════════ */

.cd-over{display:grid; grid-template-columns:1fr 330px; gap:16px; flex:1; min-height:0}
.cd-over-v{display:flex; flex-direction:column; gap:16px; min-height:0}
.cd-over-h{display:flex; flex-direction:column; gap:16px; min-height:0}

.cd-ph{display:flex; align-items:center; gap:10px; padding:11px 15px 0}
.cd-ph h3{font-family:inherit; font-size:13.5px; font-weight:600}
.cd-ph .cd-lank{margin-left:auto}

/* Intäktsöversikten */
.cd-graf{padding:13px 15px 12px; display:flex; flex-direction:column; flex:1; min-height:0}
.cd-graf-h{display:flex; align-items:flex-start; gap:12px; margin-bottom:6px}
.cd-graf-n{font-size:22px; font-weight:700; letter-spacing:-.02em}
.cd-graf-n i{font-style:normal; font-size:11.5px; font-weight:600; color:var(--d-txt2); margin-left:3px}
.cd-graf-d{font-size:11.5px; font-weight:600; color:var(--d-gron); margin-left:8px}
.cd-legend{display:flex; gap:14px; margin-left:auto; padding-top:3px}
.cd-legend span{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--d-txt2)}
.cd-legend i{width:14px; height:2.5px; border-radius:2px; display:block}
.cd-grafyta{position:relative; flex:1; min-height:0; margin-bottom:18px}
.cd-grafyta svg{position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible}

/* Aktivitetsfeeden */
.cd-feed{padding:2px 15px 10px}
.cd-fi{display:flex; align-items:center; gap:11px; padding:6.5px 0}
.cd-fi + .cd-fi{border-top:1px solid var(--d-linje2)}
.cd-fi-ic{
  width:30px; height:30px; flex:none;
  display:grid; place-items:center;
  border-radius:9px;
  background:rgba(47,107,255,.12);
  border:1px solid rgba(47,107,255,.20);
  color:var(--d-bla2);
}
.cd-fi b{display:block; font-size:11.5px; font-weight:600; white-space:nowrap}
.cd-fi small{display:block; font-size:10.5px; color:var(--d-txt2); margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:168px}
.cd-fi time{margin-left:auto; font-size:10.5px; color:var(--d-txt3); white-space:nowrap; flex:none}

/* Topprepresentanter */
.cd-rep{padding:2px 15px 10px}
.cd-ri{display:flex; align-items:center; gap:10px; padding:5.5px 0}
.cd-ri-nr{width:12px; font-size:11px; color:var(--d-txt3); flex:none}
.cd-ri-t{flex:1; min-width:0}
.cd-ri-t b{display:block; font-size:12px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cd-ri-bar{height:4px; border-radius:3px; background:rgba(255,255,255,.06); margin-top:5px; overflow:hidden}
.cd-ri-bar i{
  display:block; height:100%; border-radius:3px;
  background:linear-gradient(90deg,var(--d-bla),#8B6BFF);
  transform-origin:0 50%;
  transform:scaleX(var(--v,0));
  transition:transform .7s cubic-bezier(.3,0,.2,1);
}
.cd-ri-v{font-size:11.5px; font-weight:600; white-space:nowrap; flex:none}

/* Pipeline */
.cd-pipe{display:grid; grid-template-columns:repeat(5,1fr); gap:11px; padding:11px 15px 13px}
.cd-pk-h{display:flex; align-items:center; gap:5px; margin-bottom:3px}
.cd-pk-h b{font-size:11.5px; font-weight:600}
.cd-pk-h svg{margin-left:auto; color:var(--d-txt3)}
.cd-pk-a{font-size:10.5px; color:var(--d-txt2)}
.cd-pk-v{font-size:11px; font-weight:600; color:var(--d-bla2); margin-top:2px}
.cd-pk-strek{height:2px; border-radius:2px; background:rgba(255,255,255,.07); margin:7px 0 8px; overflow:hidden}
.cd-pk-strek i{
  display:block; height:100%; width:100%; border-radius:2px;
  background:linear-gradient(90deg,var(--d-bla),var(--d-bla2));
  transform-origin:0 50%; transform:scaleX(0);
  transition:transform .4s cubic-bezier(.3,0,.2,1);
}
.cd-pk.tand .cd-pk-strek i{transform:scaleX(1)}
.cd-pkort{
  padding:8px 9px;
  border-radius:9px;
  background:var(--d-panel2);
  border:1px solid var(--d-linje);
  margin-bottom:6px;
}
.cd-pkort b{display:block; font-size:11px; font-weight:600}
.cd-pkort small{display:block; font-size:10.5px; color:var(--d-txt2); margin-top:1px}
.cd-pk-mer{font-size:10.5px; color:var(--d-txt3)}

/* Axeletiketterna: HTML i stället för SVG-text — SVG:n sträcks med
   preserveAspectRatio:none och hade förvrängt glyferna. */
.cd-axy{
  position:absolute; left:0; width:26px;
  transform:translateY(-50%);
  text-align:right;
  font-size:9.5px; color:var(--d-txt3);
}
.cd-axx{
  position:absolute; bottom:-16px;
  transform:translateX(-50%);
  font-size:9.5px; color:var(--d-txt3);
}

/* Grafens tooltip. Positioneras i procent av grafytan så den följer med
   skalningen; pilspetsen utelämnas medvetet, precis som i förlagan. */
.cd-tip{
  position:absolute;
  transform:translate(14px,-46%);
  min-width:202px;
  padding:9px 11px;
  border-radius:10px;
  background:rgba(13,20,40,.94);
  border:1px solid rgba(120,160,255,.16);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.9);
  z-index:2;
}
.cd-tip-d{display:flex; align-items:center; gap:8px; font-size:11px; font-weight:600; margin-bottom:6px}
.cd-tip-d .cd-kebab{margin-left:auto}
.cd-tip-r{display:flex; align-items:center; gap:7px; font-size:11px; color:var(--d-txt2); padding:2.5px 0}
.cd-tip-r i{width:8px; height:8px; border-radius:3px; display:block; flex:none}
.cd-tip-r b{margin-left:auto; font-weight:600; color:var(--d-txt)}

/* Mina uppgifter */
.cd-upg{padding:2px 15px 10px}
.cd-ui{display:flex; align-items:center; gap:9px; padding:6px 0}
.cd-ui + .cd-ui{border-top:1px solid var(--d-linje2)}
.cd-ui-t{flex:1; min-width:0; font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cd-ui time{font-size:10.5px; color:var(--d-txt3); white-space:nowrap; flex:none}

/* ══ ANIMATIONEN ═══════════════════════════════════════════════════════
   Allt som rör sig gör det med transform och opacity. De två medvetna
   undantagen är kommenterade där de sker (nya radens höjd och nodernas
   top vid infogningen) — båda är engångslägen i små, absoluta ytor. */

/* Fastlagret: operativsystemets överlägg (toasts, notiser, slutrad,
   ridå) — skalas med ytan men följer ALDRIG kameran. */
.cd-fastlager{
  position:absolute; left:0; top:0;
  width:1440px; height:900px;
  transform-origin:0 0;
  transform:scale(var(--cd-fit,1));
  pointer-events:none;
  z-index:60;
}

/* ── Fantomkursorn ────────────────────────────────────────────────────── */

.cd-kursorlager{position:absolute; inset:0; z-index:40; pointer-events:none}

.cd-kursor{
  position:absolute; left:0; top:0;
  width:22px; height:26px;
  transform:translate(720px,450px);
  opacity:0;
  transition:opacity .3s ease;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.55)) drop-shadow(0 6px 14px rgba(0,0,0,.35));
  will-change:transform;
}
.cd-kursor.syns{opacity:1}
.cd-kursor svg{display:block; overflow:visible}
.cd-kursor .k-pil,.cd-kursor .k-hand{transition:opacity .12s ease}
.cd-kursor .k-hand{opacity:0}
.cd-kursor.drar .k-pil{opacity:0}
.cd-kursor.drar .k-hand{opacity:1}
/* Klickpressen skalar från spetsen, inte mitten — annars driver pilen. */
.cd-kursor .k-skal{transform-origin:3px 2px; transition:transform 90ms ease}
.cd-kursor.klick .k-skal{transform:scale(.88)}

.cd-ripple{
  position:absolute;
  width:34px; height:34px;
  margin:-17px 0 0 -17px;
  border-radius:50%;
  border:1.6px solid rgba(140,180,255,.85);
  opacity:0;
  transform:scale(.25);
  pointer-events:none;
}
.cd-ripple.kor{animation:cd-ripple 450ms ease-out forwards}
@keyframes cd-ripple{
  0%{opacity:.85; transform:scale(.25)}
  100%{opacity:0; transform:scale(1.35)}
}

/* ── Toppfältets liv ──────────────────────────────────────────────────── */

.cd-ikbtn.studs{animation:cd-studs .55s cubic-bezier(.36,.07,.19,.97)}
@keyframes cd-studs{
  0%,100%{transform:none}
  22%{transform:translateY(-3px) rotate(-8deg)}
  44%{transform:translateY(1px) rotate(6deg)}
  66%{transform:translateY(-1.5px) rotate(-3deg)}
}
.cd-badge.puls{animation:cd-badgepuls .6s ease}
@keyframes cd-badgepuls{
  0%{box-shadow:0 0 0 0 rgba(76,141,255,.8)}
  100%{box-shadow:0 0 0 11px rgba(76,141,255,0)}
}

/* ── Akt 1: tabelliv ──────────────────────────────────────────────────── */

.cd-tab tbody tr{will-change:auto}
.cd-tab tbody tr.doljs{opacity:0; transform:translateX(6px); transition:opacity .16s ease, transform .16s ease}
.cd-tab tbody tr.borta{display:none}
.cd-tab tbody tr.intradar{opacity:0; transform:translateY(9px)}
.cd-tab tbody tr.intradd{opacity:1; transform:none; transition:opacity .3s ease, transform .3s cubic-bezier(.3,0,.2,1)}

/* Nya raden. Höjden expanderar från 0 — medvetet undantag från
   transformregeln: en tabellrad kan inte klippas med scale utan att
   innehållet förvrängs, och expansionen är exakt den mjuka nedtryckning
   av raderna under som förlagan beskriver. Engång, liten yta. */
.cd-rad-ny{height:0}
.cd-rad-ny td{padding-top:0; padding-bottom:0}
.cd-rad-ny .cd-radcell{opacity:0; transform:translateY(-5px)}
.cd-rad-ny.inne{height:56px; transition:height .32s cubic-bezier(.3,0,.2,1)}
.cd-rad-ny.inne .cd-radcell{opacity:1; transform:none; transition:opacity .3s ease .12s, transform .3s ease .12s}
.cd-rad-ny.glod{position:relative}
.cd-rad-ny.glod::after{
  content:""; position:absolute; inset:1px 2px;
  border-radius:9px;
  border:1px solid rgba(76,141,255,.65);
  box-shadow:0 0 22px -4px rgba(47,107,255,.6), inset 0 0 14px -6px rgba(47,107,255,.5);
  pointer-events:none;
  opacity:0;
  animation:cd-radglod 1.05s ease 2;
}
@keyframes cd-radglod{0%,100%{opacity:0}45%{opacity:1}}

.cd-nypill{
  display:inline-flex; align-items:center;
  height:17px; padding:0 6px;
  border-radius:6px;
  background:linear-gradient(96deg,var(--d-bla),var(--d-bla2));
  font-size:9px; font-weight:800; letter-spacing:.08em;
  color:#fff;
}

/* Typewriter-markören under utskrift */
.cd-skriver::after{content:"|"; margin-left:1px; color:var(--d-bla2); animation:cd-blink .8s steps(2,jump-none) infinite}
@keyframes cd-blink{50%{opacity:0}}

.cd-kpi-d.blink{animation:cd-deltablink .7s ease 2}
@keyframes cd-deltablink{50%{color:#7CF5A8; text-shadow:0 0 12px rgba(34,197,94,.8)}}

/* ── Akt 1: sidopanelen ───────────────────────────────────────────────── */

.cd-sidopanel{
  position:absolute; top:0; right:0; bottom:0;
  width:308px;
  padding:17px 17px 15px;
  background:#0D1530;
  border-left:1px solid var(--d-linje);
  box-shadow:-26px 0 50px -28px rgba(0,0,0,.9);
  transform:translateX(103%);
  transition:transform .42s cubic-bezier(.3,0,.18,1);
  z-index:6;
  display:flex; flex-direction:column;
}
.cd-sidopanel.inne{transform:none}
.cd-sp-h{display:flex; align-items:center; gap:11px; margin-bottom:13px}
.cd-sp-h b{display:block; font-size:14.5px; font-weight:700}
.cd-sp-h small{display:block; font-size:11px; color:var(--d-txt2)}
.cd-sp-score{margin-left:auto}
.cd-sp-e{font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--d-txt3); margin:11px 0 7px}
.cd-sp-rad{display:flex; align-items:center; gap:8px; padding:4px 0; font-size:11.5px}
.cd-sp-rad svg{color:var(--d-txt3); flex:none}
.cd-sp-rad span{color:var(--d-txt2)}
.cd-sp-rad b{margin-left:auto; font-weight:500}

.cd-sp-stapelrad{display:flex; align-items:center; gap:9px; padding:4px 0}
.cd-sp-stapelrad small{width:92px; font-size:10.5px; color:var(--d-txt2); flex:none}
.cd-sp-stapel{flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,.06); overflow:hidden}
.cd-sp-stapel i{
  display:block; height:100%; border-radius:3px;
  background:linear-gradient(90deg,var(--d-bla),var(--d-bla2));
  transform-origin:0 50%;
  transform:scaleX(0);
}
.cd-sp-stapelrad.vax i{transform:scaleX(var(--v)); transition:transform .5s cubic-bezier(.3,0,.2,1)}
.cd-sp-stapelrad b{font-size:10.5px; width:22px; text-align:right; flex:none}

.cd-sp-auto{
  display:flex; align-items:center; gap:9px;
  margin-top:auto;
  padding:10px 11px;
  border-radius:10px;
  background:rgba(47,107,255,.12);
  border:1px solid rgba(47,107,255,.3);
  opacity:0; transform:translateY(7px);
}
.cd-sp-auto.inne{opacity:1; transform:none; transition:opacity .35s ease, transform .35s ease}
.cd-sp-auto svg{color:#FFD34D; flex:none; filter:drop-shadow(0 0 7px rgba(255,211,77,.7))}
.cd-sp-auto b{display:block; font-size:11.5px}
.cd-sp-auto small{display:block; font-size:10.5px; color:var(--d-txt2)}

/* ── Toasts och notiser ───────────────────────────────────────────────── */

.cd-toast{
  position:absolute; right:18px; bottom:18px;
  display:flex; align-items:center; gap:10px;
  padding:11px 14px;
  border-radius:12px;
  background:#101A38;
  border:1px solid rgba(120,160,255,.2);
  box-shadow:0 20px 45px -18px rgba(0,0,0,.95), var(--d-glow);
  opacity:0; transform:translateY(14px);
  z-index:30;
}
.cd-toast.inne{opacity:1; transform:none; transition:opacity .34s ease, transform .34s cubic-bezier(.25,.9,.3,1.15)}
.cd-toast.ut{opacity:0; transform:translateY(8px); transition:opacity .28s ease, transform .28s ease}
.cd-toast-ic{
  width:30px; height:30px; flex:none;
  display:grid; place-items:center;
  border-radius:9px;
  background:rgba(34,197,94,.15); color:#4ADE80;
}
.cd-toast-ic--bla{background:rgba(47,107,255,.16); color:var(--d-bla2)}
.cd-toast b{display:block; font-size:12px}
.cd-toast small{display:block; font-size:10.5px; color:var(--d-txt2)}

.cd-notisbubbla{
  position:absolute; right:18px; top:14px;
  display:flex; align-items:center; gap:9px;
  padding:9px 13px;
  border-radius:11px;
  background:#101A38;
  border:1px solid rgba(120,160,255,.22);
  box-shadow:0 16px 38px -16px rgba(0,0,0,.9);
  opacity:0; transform:translateY(-10px);
  z-index:30;
}
.cd-notisbubbla.inne{opacity:1; transform:none; transition:opacity .3s ease, transform .3s cubic-bezier(.25,.9,.3,1.2)}
.cd-notisbubbla.ut{opacity:0; transform:translateY(-8px); transition:opacity .25s ease, transform .25s ease}
.cd-notisbubbla svg{color:var(--d-bla2); flex:none}
.cd-notisbubbla b{font-size:11.5px}

/* ── Lead-chipen och affärskortet ─────────────────────────────────────── */

.cd-chip{
  position:absolute; left:0; top:0;
  display:flex; align-items:center; gap:8px;
  padding:6px 12px 6px 7px;
  border-radius:999px;
  background:#15224A;
  border:1px solid rgba(120,165,255,.4);
  box-shadow:0 12px 30px -12px rgba(0,0,0,.9), 0 0 26px -6px rgba(47,107,255,.55);
  font-size:11.5px; font-weight:600; white-space:nowrap;
  z-index:45;
  will-change:transform;
}
.cd-chip small{font-weight:500; color:var(--d-txt2)}
.cd-chip .cd-avatar{width:22px; height:22px; font-size:8.5px}
.cd-chip--kort{border-radius:12px; padding:8px 13px 8px 8px}
.cd-chip--kort .cd-chipsumma{font-size:11px; font-weight:700; color:#8FB4FF}

/* ── Akt 2: flödesliv ─────────────────────────────────────────────────── */

.cd-nod{will-change:auto}
.cd-nod.lyft{
  transform:rotate(3deg) scale(1.03);
  box-shadow:0 26px 48px -18px rgba(0,0,0,1), 0 0 30px -8px rgba(47,107,255,.5);
  z-index:8;
}
.cd-nod.aktiv{
  border-color:rgba(76,141,255,.75);
  box-shadow:0 0 34px -8px rgba(47,107,255,.75), 0 12px 28px -18px rgba(0,0,0,.9);
}
.cd-nod.aktiv .cd-nod-ic{animation:cd-ikonsnurr .5s cubic-bezier(.3,0,.2,1)}
@keyframes cd-ikonsnurr{from{transform:rotate(-100deg) scale(.6); opacity:0}to{transform:none; opacity:1}}
.cd-nod.dimmad{opacity:.25; filter:grayscale(1)}
.cd-nod.gron{border-color:rgba(34,197,94,.65)}
.cd-gren.dimmad{opacity:.25; filter:grayscale(1)}
.cd-gren--ja.tand{box-shadow:0 0 16px -2px rgba(34,197,94,.6)}

/* Bocken i nodhörnet */
.cd-nodbock{
  position:absolute; right:-7px; top:-7px;
  width:19px; height:19px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--d-gron);
  color:#04240F;
  box-shadow:0 0 14px -2px rgba(34,197,94,.8);
  opacity:0; transform:scale(.3);
}
.cd-nodbock.inne{opacity:1; transform:none; transition:opacity .22s ease, transform .3s cubic-bezier(.2,1.4,.4,1)}

/* Om-nodens utvärdering */
.cd-omdome{
  position:absolute;
  left:50%; transform:translateX(-50%) translateY(4px);
  display:flex; align-items:center; gap:7px;
  padding:5px 11px;
  border-radius:9px;
  background:#101A38;
  border:1px solid rgba(245,165,36,.4);
  font-size:11px; font-weight:700;
  white-space:nowrap;
  opacity:0;
  z-index:9;
}
.cd-omdome.inne{opacity:1; transform:translateX(-50%) translateY(0); transition:opacity .25s ease, transform .25s ease}
.cd-omdome.sant{border-color:rgba(34,197,94,.55)}
.cd-omdome .cd-sant{display:none; color:#4ADE80}
.cd-omdome.sant .cd-sant{display:inline-flex; align-items:center; gap:4px}

/* Mail-miniatyren */
.cd-mailmini{
  position:absolute;
  width:172px;
  padding:9px 11px;
  border-radius:10px;
  background:#101A38;
  border:1px solid rgba(120,160,255,.24);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.95);
  opacity:0; transform:translateY(6px) scale(.92);
  z-index:9;
}
.cd-mailmini.inne{opacity:1; transform:none; transition:opacity .25s ease, transform .3s cubic-bezier(.25,.9,.3,1.15)}
.cd-mailmini.ut{opacity:0; transform:translateY(-4px) scale(.95); transition:opacity .22s ease, transform .22s ease}
.cd-mailmini small{display:block; font-size:9.5px; color:var(--d-txt3); margin-bottom:2px}
.cd-mailmini b{display:block; font-size:11px}
.cd-mailmini .cd-mailrad{height:4px; border-radius:2px; background:rgba(255,255,255,.08); margin-top:5px}
.cd-mailmini .cd-mailrad:last-child{width:64%}

/* Klock-progressen på Vänta-noder */
.cd-vantring{position:absolute; right:34px; top:50%; transform:translateY(-50%)}
.cd-vantring svg{display:block; transform:rotate(-90deg)}
.cd-vantetikett{
  position:absolute; right:-4px; top:-13px;
  font-size:8px; font-weight:700; letter-spacing:.05em;
  color:var(--d-txt3);
  white-space:nowrap;
}

/* Partikeln som reser längs kopplingarna */
.cd-partikel{
  position:absolute; left:0; top:0;
  width:9px; height:9px;
  margin:-4.5px 0 0 -4.5px;
  border-radius:50%;
  background:radial-gradient(circle at 38% 35%, #CFE2FF, #4C8DFF 62%, rgba(76,141,255,0) 75%);
  box-shadow:0 0 12px 3px rgba(76,141,255,.75);
  z-index:7;
  will-change:transform;
}

/* Streckad platshållare vid draget */
.cd-plats{
  position:absolute;
  width:186px; height:54px;
  border-radius:12px;
  border:1.6px dashed rgba(120,165,255,.55);
  background:rgba(47,107,255,.07);
  opacity:0;
  transition:opacity .2s ease;
  z-index:2;
}
.cd-plats.inne{opacity:1}

/* Statuspillen "Kör nu"/"Aktiv" */
.cd-pill--kor{background:rgba(34,197,94,.14); color:#4ADE80; border:1px solid rgba(34,197,94,.35)}
.cd-pill--kor i{width:6px; height:6px; border-radius:50%; background:var(--d-gron); animation:cd-korpuls 1.1s ease infinite}
@keyframes cd-korpuls{50%{box-shadow:0 0 0 5px rgba(34,197,94,0); opacity:.6}}

/* Skapade uppgifter i högerpanelen */
.cd-info-uppgifter{opacity:0; transform:translateY(6px)}
.cd-info-uppgifter.inne{opacity:1; transform:none; transition:opacity .3s ease, transform .3s ease}
.cd-uppgiftschip{
  display:flex; align-items:center; gap:8px;
  padding:7px 9px;
  border-radius:9px;
  background:rgba(34,197,94,.1);
  border:1px solid rgba(34,197,94,.28);
  font-size:11px;
}
.cd-uppgiftschip svg{color:#4ADE80; flex:none}

/* ── Akt 3: pipeline och graf ─────────────────────────────────────────── */

.cd-pkort.vand{position:relative; z-index:5; will-change:transform}
.cd-pkort--elin{border-color:rgba(76,141,255,.5); box-shadow:0 0 22px -8px rgba(47,107,255,.6)}
.cd-pkort--elin.vunnen{
  border-color:rgba(34,197,94,.6);
  box-shadow:0 0 26px -6px rgba(34,197,94,.65);
  background:linear-gradient(160deg, rgba(34,197,94,.12), var(--d-panel2) 55%);
}
.cd-pk.tand .cd-pk-h b{color:#fff}

.cd-burst{position:absolute; left:0; top:0; width:0; height:0; z-index:20; pointer-events:none}
.cd-burst i{
  position:absolute; left:0; top:0;
  width:5px; height:5px;
  border-radius:50%;
  will-change:transform,opacity;
}

.cd-fi--ny{opacity:0; transform:translateY(-7px)}
.cd-fi--ny.inne{opacity:1; transform:none; transition:opacity .32s ease, transform .32s ease}
.cd-fi--ny .cd-fi-ic{background:rgba(34,197,94,.14); border-color:rgba(34,197,94,.3); color:#4ADE80}
.cd-fi--ny.puls .cd-fi-ic{animation:cd-badgepuls .8s ease 2}

.cd-ui .cd-kryss{position:relative; transition:background-color .2s ease, border-color .2s ease}
.cd-ui.klar .cd-kryss{background:var(--d-gron); border-color:var(--d-gron)}
.cd-ui.klar .cd-kryss svg{position:absolute; inset:0; margin:auto}
.cd-ui.klar .cd-kryss path{stroke-dasharray:22; stroke-dashoffset:22; animation:cd-bock .3s ease forwards}
@keyframes cd-bock{to{stroke-dashoffset:0}}
.cd-ui.klar .cd-ui-t{color:var(--d-txt3); text-decoration:line-through}
.cd-ui--ny{opacity:0; transform:translateY(7px)}
.cd-ui--ny.inne{opacity:1; transform:none; transition:opacity .32s ease, transform .32s ease}

/* Grafscrubbens hårlinje och tooltip flyttas med transform i JS.
   Sluttexten: */
.cd-slutrad{
  position:absolute; left:0; right:0; bottom:26px;
  text-align:center;
  font-size:15px; font-weight:600; letter-spacing:.01em;
  color:var(--d-txt);
  text-shadow:0 2px 18px rgba(0,0,0,.8);
  opacity:0; transform:translateY(8px);
  z-index:35;
}
.cd-slutrad.inne{opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease}
.cd-slutrad b{background:linear-gradient(96deg,#7fb0ff,#4C8DFF); -webkit-background-clip:text; background-clip:text; color:transparent}

/* Toppens puls på grafens nya slutpunkt */
.cd-grafpuls{transform-box:fill-box; transform-origin:center; animation:cd-grafpuls 1.6s ease infinite}
@keyframes cd-grafpuls{50%{transform:scale(2.1); opacity:.25}}

/* Loopens återställningsridå: hela appen tonar mjukt vid varvbytet. */
.crmd-app .cd-rida{
  position:absolute; inset:0;
  background:var(--d-bg);
  opacity:0;
  transition:opacity .3s ease;
  z-index:50; pointer-events:none;
}
.crmd-app .cd-rida.inne{opacity:1}

/* ── Reducerad rörelse ────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .crmd-app *,.crmd-app *::before,.crmd-app *::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}