/* =========================================================================
   Selgerens arbeidsflate: tallene, arbeidsomraadet og koen.

   Egen fil og lastet ETTER dashboard.css. Den setter sine egne globale
   regler for .card, td og .pill, og laster vi foer den, taper reglene her
   mot dem uten at noe sier fra.
   ========================================================================= */

/* ---------- toppbar: soek, dato, bruker ---------- */

.topbar-actions { display: flex; align-items: center; gap: 14px; }

.ko-sok {
  display: flex; align-items: center; gap: 8px; height: 42px;
  min-width: min(360px, 38vw); padding: 0 12px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  color: var(--text-faint);
}
.ko-sok input {
  flex: 1; min-width: 0; min-height: 0; padding: 0; border: none; background: none;
  box-shadow: none; font-size: 13.5px; color: var(--text);
}
.ko-sok input:focus { outline: none; box-shadow: none; }
.ko-sok:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(49,89,213,.14); }

.ko-sok kbd, .arbeid-taster kbd, .utfall-chip kbd {
  font-family: var(--font-mono); font-size: 10.5px; padding: 1px 6px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 5px;
  color: var(--text-faint);
}

.topbar-dato {
  display: flex; align-items: center; gap: 10px; padding: 6px 14px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  font-size: 13px; font-weight: 600;
}
.topbar-dato small, .topbar-bruker small {
  display: block; font-size: 11px; font-weight: 400; color: var(--text-faint);
  text-transform: none;
}
.topbar-bruker { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.topbar-bruker .avatar { width: 38px; height: 38px; font-size: 13px; }

.avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
  background: linear-gradient(135deg, #BBD7FF, #7FB0F5); color: #1B3F85;
}

/* ---------- tallene oeverst ---------- */

.stat-rad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 18px; }
.stat-kort {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  background: var(--panel); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); box-shadow: var(--skygge);
}
.stat-kort strong { display: block; font-size: 26px; line-height: 1.1; letter-spacing: -.5px; }
.stat-kort div > span { font-size: 12.5px; color: var(--text-dim); }
.stat-kort.varsel strong { color: #B91C1C; }

.stat-ikon { width: 52px; height: 52px; border-radius: 14px; flex: none; overflow: hidden; }
.stat-bilde { display: block; width: 100%; height: 100%; }

/* ---------- arbeidsomraadet ---------- */

.arbeid { display: grid; grid-template-columns: 1.2fr 1fr .9fr; gap: 16px; align-items: stretch; margin-bottom: 26px; }
.arbeid-kort {
  background: var(--panel); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); box-shadow: var(--skygge); padding: 20px;
}
.arbeid-hoyre { display: grid; gap: 16px; }
.arbeid-topp { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.arbeid-topp h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.arbeid-etikett { margin: 18px 0 8px; font-size: 12.5px; color: var(--text-dim); text-align: left; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: 8px; background: #E8F1FF; color: var(--accent);
  font-size: 12px; font-weight: 600;
}
.chip[hidden] { display: none; }
.chip-aktiv { background: #DCEAFF; }

.pager { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-dim); }
.pager button {
  width: 30px; height: 30px; padding: 0; display: grid; place-items: center;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
}
.pager button:hover { background: var(--panel-2); }

/* Symbol per bransje. Selskapene har ingen logo - de er nyregistrerte - og
   et symbol per bransje sier det samme paa et blikk. */
.bransje-ikon {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: grid; place-items: center; overflow: hidden;
}
.bransje-ikon.stor { width: 62px; height: 62px; border-radius: 15px; }
.bransje-bilde { display: block; width: 100%; height: 100%; object-fit: cover; }

.arbeid-hode { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.arbeid-hode h2 { margin: 0; font-size: 22px; letter-spacing: -.4px; line-height: 1.2; }
.arbeid-nettside { font-size: 13px; }
.arbeid-merker { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }

.arbeid-person {
  display: flex; align-items: center; gap: 12px; padding: 14px 0;
  border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft);
}
.arbeid-person strong { display: block; font-size: 15px; }
.arbeid-nummer { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.arbeid-nummer > svg {
  width: 38px; height: 38px; padding: 10px; border-radius: 50%; flex: none;
  background: #DCEAFF; color: var(--accent);
}
.arbeid-nummer strong { font-family: var(--font-mono); font-size: 15px; display: block; }

.arbeid-fakta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px 0; }
.arbeid-fakta dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.arbeid-fakta dd { margin: 3px 0 0; font-size: 13.5px; font-weight: 600; }

.arbeid-sist { background: var(--panel-2); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }
.arbeid-sist h3 { margin: 0 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.arbeid-sist p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-dim); }

.arbeid-lenker { display: flex; flex-wrap: wrap; gap: 8px; }
.arbeid-lenker a {
  padding: 9px 14px; border: 1px solid var(--border); border-radius: 10px;
  font-size: 13px; font-weight: 600; text-decoration: none; color: var(--accent); background: var(--panel);
}
.arbeid-lenker a:hover { background: var(--panel-2); }

/* samtalen i midten */
.arbeid-samtale { text-align: center; }
.ring-sirkel {
  width: 112px; height: 112px; margin: 14px auto 18px; border-radius: 50%; border: none;
  display: grid; place-items: center; cursor: pointer; color: #fff; background: var(--accent);
  box-shadow: 0 0 0 14px rgba(49,89,213,.10), 0 0 0 30px rgba(49,89,213,.05);
  transition: background-color .2s, box-shadow .2s;
}
.ring-sirkel svg { width: 44px; height: 44px; }
.ring-sirkel:hover { filter: brightness(1.08); }
.arbeid.ringer .ring-sirkel { animation: ringepuls 1.2s ease-in-out infinite; }
.arbeid.i-samtale .ring-sirkel {
  background: #16A34A; box-shadow: 0 0 0 14px rgba(22,163,74,.12), 0 0 0 30px rgba(22,163,74,.06);
}
.arbeid-klar { margin: 6px 0 2px; font-size: 18px; font-weight: 700; letter-spacing: -.2px; }
@keyframes ringepuls { 0%, 100% { opacity: 1 } 50% { opacity: .6 } }

/* Demp og legg paa vises bare naar det ringer eller en samtale paagaar, som
   paa en vanlig telefon. Staten settes av JavaScript paa .arbeid. */
.arbeid-kontroller { display: none; justify-content: center; gap: 22px; margin: 18px 0 4px; }
.arbeid.ringer .arbeid-kontroller, .arbeid.i-samtale .arbeid-kontroller { display: flex; }
.kontroll {
  display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 0;
  background: none; border: none; font-size: 12px; color: var(--text-dim); cursor: pointer;
}
.kontroll-ikon {
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--border);
}
.kontroll-legg-paa .kontroll-ikon { background: #EF4444; border-color: #EF4444; color: #fff; }
.kontroll-legg-paa .kontroll-ikon svg { transform: rotate(135deg); }
.kontroll.paa .kontroll-ikon { background: #FEF3C7; border-color: #F59E0B; }

.utfall-chips { display: flex; flex-wrap: wrap; gap: 8px; text-align: left; }
.utfall-chip { position: relative; cursor: pointer; }
.utfall-chip input { position: absolute; opacity: 0; pointer-events: none; }
.utfall-chip span {
  display: inline-flex; padding: 7px 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; border: 1px solid transparent;
  background: var(--panel-2); color: var(--text-dim);
}
.utfall-chip kbd { margin-left: 8px; opacity: .55; background: rgba(255,255,255,.7); }
.utfall-good span { background: #ECFDF3; color: #166534; }
.utfall-accent span { background: #E8F1FF; color: #2459B5; }
.utfall-warn span { background: #FEF6E3; color: #92400E; }
.utfall-bad span { background: #FEECEC; color: #B42318; }
.utfall-muted span { background: #F1F5F9; color: #475569; }
.utfall-chip input:checked + span { box-shadow: 0 0 0 2px currentColor; }
.utfall-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* fremdrift og notater til hoeyre */
.maal-valg summary {
  cursor: pointer; list-style: none; padding: 5px 10px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--accent); background: #E8F1FF;
}
.maal-valg summary::-webkit-details-marker { display: none; }
.maal-skjema { display: flex; gap: 6px; margin-top: 8px; }
.maal-skjema input { width: 80px; }

.ring-fremdrift { position: relative; width: 136px; height: 136px; margin: 6px auto; }
.ring-fremdrift svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-fremdrift circle { fill: none; stroke-width: 10; }
.ring-fremdrift .spor { stroke: #E6EDF7; }
.ring-fremdrift .fylt { stroke: #12B5A6; stroke-linecap: round; transition: stroke-dashoffset .5s; }
.ring-midt { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-midt strong { font-size: 32px; line-height: 1; letter-spacing: -1px; }
.ring-midt span { font-size: 11px; color: var(--text-faint); margin-top: 3px; }
.fremdrift-melding { text-align: center; margin: 8px 0 0; font-size: 13px; color: var(--text-dim); }

.arbeid-notater textarea { width: 100%; min-height: 96px; resize: vertical; font-size: 13.5px; }
.maler { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.maler button {
  padding: 4px 10px; font-size: 11.5px; border-radius: 999px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--border);
}
.maler button:hover { background: #E8F1FF; }
.arbeid-oppfolging { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.arbeid-lagre { width: 100%; margin-top: 14px; padding: 13px; font-size: 14px; border-radius: 10px; }
.arbeid-taster { margin: 10px 0 0; font-size: 11px; color: var(--text-faint); }
.ringeskjema { display: none; }

/* Ingen leads: dagsmaalet og fremdriften staar igjen, resten byttes mot en
   melding. De hoerer til selgeren, ikke til om han har leads akkurat naa. */
.arbeid-tom { display: none; }
.arbeid.uten-leads .arbeid-lead, .arbeid.uten-leads .arbeid-samtale { display: none; }
.arbeid.uten-leads .arbeid-tom {
  display: grid; place-items: center; grid-column: 1 / 3; min-height: 180px;
  font-weight: 600; color: var(--text-dim); background: var(--panel);
  border: 1px dashed var(--border); border-radius: var(--radius-lg);
}

/* ---------- koen ---------- */

.ko-tittel { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; font-size: 18px; }
.crm-liste { display: grid; grid-template-columns: 1fr; gap: 8px; }
.crm-kort { padding: 10px 14px; }

.ko-rad, .ko-hode {
  display: grid; grid-template-columns: 38px minmax(0, 1.7fr) 120px 100px minmax(170px, auto);
  align-items: center; gap: 14px;
}
.ko-hode {
  padding: 0 14px 6px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-faint);
}
.ko-navn h3 { margin: 0; font-size: 14px; }
.ko-navn .crm-meta { margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ko-ring { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.ko-ring .ring-knapp { padding: 7px 18px; border-radius: 999px; }
.crm-kort.ko-valgt { box-shadow: 0 0 0 2px var(--accent), var(--skygge); }
.crm-kort.ko-skjult { display: none; }
.crm-rask { margin-top: 8px; }
.crm-rask > summary { cursor: pointer; font-size: 12px; color: var(--text-faint); }

/* ---------- maskot ---------- */

.maskot { margin-top: auto; padding: 8px 14px 0; }
.maskot-tekst {
  max-width: 140px; margin: 0 0 -4px 6px; transform: rotate(-5deg);
  font: 600 15px/1.3 "Segoe Script", "Bradley Hand", "Comic Sans MS", cursive;
  color: var(--accent);
}
.maskot img { display: block; width: 150px; height: auto; margin-left: auto; }

/* ---------- smale skjermer ---------- */

@media (max-width: 1280px) {
  .stat-rad { grid-template-columns: repeat(3, 1fr); }
  .arbeid { grid-template-columns: 1fr 1fr; }
  .arbeid-hoyre { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .topbar-dato, .topbar-bruker span:last-child { display: none; }
  .ko-sok { min-width: 0; flex: 1; }
  .arbeid, .arbeid-hoyre { grid-template-columns: 1fr; }
  .arbeid-fakta { grid-template-columns: 1fr 1fr; }
  .ko-rad, .ko-hode { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .ko-status, .ko-sist, .ko-hode { display: none; }
}
@media (max-width: 560px) {
  .stat-rad { grid-template-columns: 1fr 1fr; }
}

/* ---------- admin-forsiden i samme stil ----------
   Tallkortene hos admin bruker de samme runde, fargede ikonene som tallene
   oeverst paa selgerens side. Bare stil: markupen og strukturen er uendret,
   og testene som vokter dem staar urort. */
.stat-card .stat-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
}
.stat-card .stat-icon svg { width: 21px; height: 21px; }
.stat-card.tone-success .stat-icon { background: #DCFCE7; color: #15803D; }
.stat-card.tone-accent .stat-icon { background: #E0EAFF; color: #2F6FDB; }
.stat-card.tone-neutral .stat-icon { background: #EDE9FE; color: #6D28D9; }
.stat-card.tone-warning .stat-icon { background: #FEF3C7; color: #B45309; }
.stat-card.tone-danger .stat-icon { background: #FEE2E2; color: #B91C1C; }


/* ---------- tema: samme blaa og myke former som maskotten ----------------
   Ligger sist saa det vinner over dashboard.css og style.css, og gjelder
   baade selger og admin. Fargene er hentet fra maskotten (hodetelefonene og
   dressen) og ikonene: en varm himmelblaa som hovedfarge, turkis som den
   andre, og lyse pastellflater i stedet for graatt. */
:root {
  --bg: #EEF5FF; --panel: #fff; --panel-2: #F5F9FF; --panel-3: #E8F1FF;
  --border: #D6E4F7; --border-soft: #E6EEFA;
  --text: #14284B; --text-dim: #4A5D7E; --text-faint: #5F7194;
  --accent: #2F6FDB; --accent-dim: #2459B5;
  --success: #12957F; --danger: #D9484F; --warning: #C77A0A;
  --data: #4A8AF0; --data-svak: rgba(74,138,240,.10); --graf-rute: #E3ECF8;
  --teal: #12B5A6; --teal-dim: #0E9488;
  --radius: 12px; --radius-lg: 18px;
  --skygge: 0 1px 2px rgba(47,111,219,.06), 0 2px 8px rgba(47,111,219,.06);
  --skygge-loft: 0 8px 24px rgba(47,111,219,.14);
}
body { background: var(--bg); color: var(--text); }
.sidebar, .topbar { border-color: var(--border); }
.sidebar .brand .mark, .login-card .mark {
  background: linear-gradient(135deg, #4A8AF0, #2F6FDB); box-shadow: 0 4px 10px rgba(47,111,219,.30);
}
.nav-link { border-radius: 12px; }
.nav-link:hover { background: var(--panel-3); }
.nav-link.active { background: linear-gradient(90deg, #DCEAFF, #E8F1FF); color: var(--accent-dim); }

/* kort: mykere hjoerner og en blaatonet skygge */
.stat-kort, .stat-card, .arbeid-kort, .crm-kort, .kort, .panel, .card {
  border-radius: var(--radius-lg); border-color: var(--border); box-shadow: var(--skygge);
}
.stat-kort:hover, .stat-card:hover { box-shadow: var(--skygge-loft); }

/* knapper: runde, med et lett lys fra toppen */
button, .btn, .crm-ring { border-radius: 12px; }
button.primary, .crm-ring:not(.mangler) {
  background: linear-gradient(180deg, #4A8AF0, #2F6FDB); border-color: #2F6FDB; color: #fff;
  box-shadow: 0 2px 6px rgba(47,111,219,.28);
}
button.primary:hover, .crm-ring:not(.mangler):hover {
  background: linear-gradient(180deg, #5A97F5, #3A7BE6); filter: none;
}
button:hover { filter: none; }
button.ghost, button:not(.primary):not(.danger):not(.ring-knapp):not(.ring-sirkel) { border-color: var(--border); }
button.ghost:hover { background: var(--panel-3); }
button.danger { background: #FFE6E7; border-color: #FFCBCD; color: #A82C33; }
button.danger:hover { background: var(--danger); color: #fff; }

/* ring er alltid turkis/groenn: en telefon som er klar skal se ut som det */
.ring-sirkel, .ko-ring .ring-knapp, button.ring-knapp {
  background: linear-gradient(180deg, #25C9B8, #12B5A6); border-color: #0E9488; color: #fff;
  box-shadow: 0 6px 16px rgba(18,181,166,.35);
}
.ko-ring .ring-knapp, button.ring-knapp { box-shadow: 0 2px 6px rgba(18,181,166,.32); }
.ring-sirkel:hover, .ko-ring .ring-knapp:hover { background: linear-gradient(180deg, #34D3C3, #14BFAF); filter: none; }
.arbeid .ring-sirkel { box-shadow: 0 0 0 14px rgba(18,181,166,.12), 0 0 0 30px rgba(18,181,166,.06); }
.arbeid.i-samtale .ring-sirkel {
  background: linear-gradient(180deg, #4A8AF0, #2F6FDB);
  box-shadow: 0 0 0 14px rgba(47,111,219,.12), 0 0 0 30px rgba(47,111,219,.06);
}

.pill.accent, .chip-aktiv { background: #DCEAFF; color: var(--accent-dim); }
input:focus, textarea:focus, select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,111,219,.16); outline: none;
}
.ko-sok:focus-within { box-shadow: 0 0 0 3px rgba(47,111,219,.16); }
.crm-kort.ko-valgt { box-shadow: 0 0 0 2px var(--accent), var(--skygge-loft); }

/* admin: de fire tonene faar samme pastell som ikonene */
.stat-card .stat-icon { border-radius: 14px; }
.stat-card.tone-success .stat-icon { background: #D9F4EE; color: #0E8A76; }
.stat-card.tone-accent .stat-icon { background: #DCEAFF; color: #2459B5; }
.stat-card.tone-neutral .stat-icon { background: #EADFFB; color: #6B3FC4; }
.stat-card.tone-warning .stat-icon { background: #FFF1C9; color: #A86406; }
.stat-card.tone-danger .stat-icon { background: #FFE0E1; color: #C23038; }


/* ---------- spill: nivaa, XP og merker ------------------------------------- */

.spill { margin: auto 14px 0; padding: 14px; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #F5F9FF, #E8F1FF); border: 1px solid var(--border); }
.spill + .maskot { margin-top: 0; }
.spill-niva { display: flex; align-items: center; gap: 10px; }
.spill-medalje { width: 46px; height: 46px; border-radius: 12px; flex: none; }
.spill-niva strong { display: block; font-size: 15px; line-height: 1.2; }
.spill-tittel { font-size: 12px; color: var(--text-dim); }
.spill-stolpe { height: 9px; margin: 12px 0 6px; border-radius: 999px; background: #D6E4F7; overflow: hidden; }
.spill-stolpe i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #12B5A6, #4A8AF0); transition: width .6s ease; }
.spill-xp { margin: 0; font-size: 12px; color: var(--text-dim); }
.spill-xp b { color: var(--text); }
.spill-rekke { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 12.5px;
  font-weight: 600; color: #D9650B; }
.spill-rekke[hidden] { display: none; }
.spill-rekke .icon-sm { width: 15px; height: 15px; }
.spill-merker { margin-top: 10px; }
.spill-merker summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--accent-dim); }
.merke-rutenett { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.merke { display: block; border-radius: 12px; overflow: hidden; filter: grayscale(1); opacity: .38;
  transition: filter .3s, opacity .3s; }
.merke.opptjent { filter: none; opacity: 1; }
.merke img { display: block; width: 100%; height: auto; }

/* feiringen */
#spill-toasts { position: fixed; bottom: 24px; right: 24px; z-index: 200; display: grid; gap: 10px;
  pointer-events: none; }
.spill-toast { display: flex; align-items: center; gap: 12px; min-width: 260px; max-width: 340px;
  padding: 12px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--border);
  box-shadow: var(--skygge-loft); transform: translateY(40px); opacity: 0;
  transition: transform .35s cubic-bezier(.2, .9, .3, 1.2), opacity .3s; }
.spill-toast.inn { transform: none; opacity: 1; }
.spill-toast img { width: 56px; height: 56px; border-radius: 14px; flex: none; }
.spill-toast strong { display: block; font-size: 14.5px; }
.spill-toast span { font-size: 12.5px; color: var(--text-dim); }
.spill-konfetti { position: fixed; inset: 0; z-index: 190; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .spill-toast { transition: opacity .2s; transform: none; }
  .spill-stolpe i { transition: none; }
}
@media (max-width: 900px) { .spill { display: none; } }


/* ---------- demo paa SMS ------------------------------------------------------ */

.demo-sms { margin: 4px 0 14px; padding: 14px; border-radius: var(--radius-lg);
  background: var(--panel-2); border: 1px solid var(--border); text-align: left; }
.demo-sms[hidden] { display: none; }
.demo-sms .arbeid-etikett { margin-top: 0; }
.demo-samtykke { display: flex; gap: 10px; align-items: flex-start; font-size: 13px;
  line-height: 1.4; cursor: pointer; margin-bottom: 10px; }
.demo-samtykke input { margin-top: 2px; width: 17px; height: 17px; flex: none; }
.demo-send { display: inline-flex; align-items: center; gap: 8px; width: 100%; justify-content: center;
  padding: 10px 14px; font-weight: 600; background: linear-gradient(180deg, #4A8AF0, #2F6FDB);
  border-color: #2F6FDB; color: #fff; }
.demo-send:disabled { background: var(--panel-3); border-color: var(--border); color: var(--text-faint);
  box-shadow: none; opacity: 1; }
.demo-status { margin: 8px 0 0; min-height: 1.2em; }
.demo-tekst { margin-top: 6px; font-size: 12.5px; }
.demo-tekst summary { cursor: pointer; color: var(--accent-dim); font-weight: 600; }
.demo-tekst p { margin: 6px 0 0; padding: 8px 10px; background: #fff; border: 1px solid var(--border);
  border-radius: 10px; color: var(--text-dim); word-break: break-word; }