/* ==========================================================================
   Nordiva kreatørplattform, delt designsystem

   Merkevare: Montserrat som eneste skrift, marineblå #0E1B4D som aksent,
   varm papirbakgrunn. Endre tokens her, ikke ute i sidene.
   Ingen gradienter. Ingen emoji. Ingen animasjon utover translateY(-1px).
   ========================================================================== */

:root{
  /* Merkevare */
  --brand:#0E1B4D;          /* Nordiva marineblå */
  --brand-mork:#081033;     /* trykket og hover */
  --brand-myk:#EEF1F8;      /* svak flate, sitatblokker og valgt tilstand */

  /* Tekst og flater */
  --ink:#17203C;
  --ink-soft:#4C5570;
  --paper:#F6F6F8;          /* nøytral flate, som Trybe */
  --card:#FFFFFF;
  --line:#E5E5EA;
  --line-mork:#D3D3DA;

  /* Status */
  --green:#1B6B3A;  --green-bg:#EDF5EF;  --green-line:#A9CDB6;
  --red:#A81F1F;    --red-bg:#FBEFEF;    --red-line:#E0A8A8;
  --amber:#8A6410;  --amber-bg:#FFF9E6;  --amber-line:#E0C778;
  --violet:#3A3A8A; --violet-bg:#EFEFFA; --violet-line:#B9B9E8;

  --shadow:0 1px 3px rgba(14,27,77,.04), 0 14px 38px rgba(14,27,77,.07);
  --shadow-lav:0 1px 2px rgba(14,27,77,.04), 0 6px 18px rgba(14,27,77,.05);
  --radius-card:20px;       /* Trybe ligger rundt 20 til 24 */
  --radius-el:14px;
  --radius-pill:999px;

  /* Luft. Én skala, brukt overalt. */
  --luft-1:10px;
  --luft-2:18px;
  --luft-3:28px;
  --luft-4:44px;
  --luft-5:80px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:18px;
  line-height:1.7;
  letter-spacing:.002em;
}
/* Adminpanelet tåler tettere informasjon enn kreatørflatene. */
body.tett{font-size:15px;line-height:1.6}

h1,h2,h3{font-family:inherit;font-weight:700;line-height:1.25;margin:0;letter-spacing:-.015em}
h1{font-size:2.3rem}
h2{font-size:1.6rem}
h3{font-size:1.18rem;font-weight:600;letter-spacing:-.01em}
body.tett h1{font-size:1.9rem}
body.tett h2{font-size:1.35rem}
body.tett h3{font-size:1.05rem}

p{margin:0 0 1.3rem}
a{color:var(--brand);text-underline-offset:3px}
a:hover{text-decoration:none}
img{max-width:100%;height:auto}
strong,b{font-weight:600}

:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:4px}

.wrap{max-width:740px;margin:0 auto;padding:0 24px}
.wrap.bred{max-width:1200px}
.skjul{display:none !important}
.kunskjerm{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Avstand mellom seksjoner. Bruk .luft, ikke inline margin. */
.luft{margin-top:var(--luft-5)}
.luft-liten{margin-top:var(--luft-4)}

/* --------------------------------------------------------------------------
   Seglet. To tynne linjer, den nederste med 35 prosent opasitet.
   Skal antyde luft som trekkes ut. Brukes kun som seksjonsmarkør.
   -------------------------------------------------------------------------- */
.segl{display:block;height:9px;margin:0 0 var(--luft-3);position:relative}
.segl:before,.segl:after{content:'';position:absolute;left:0;right:0;height:2px;background:var(--brand)}
.segl:after{top:7px;opacity:.35}
.segl:before{top:0}

.eyebrow{
  font-size:.75rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--brand);margin:0 0 14px;
}
h1 + .lead, h2 + .lead{margin-top:var(--luft-1)}
.lead{font-size:1.1rem;color:var(--ink-soft);margin:var(--luft-1) 0 var(--luft-3);max-width:34em}
.dempet{color:var(--ink-soft)}
.liten{font-size:.92rem}

h2 + p, h2 + ul, h3 + p{margin-top:var(--luft-1)}

/* --------------------------------------------------------------------------
   Toppstripe på offentlig side
   -------------------------------------------------------------------------- */
.topp{background:var(--card);border-bottom:1px solid var(--line)}
.topp .rad{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;padding:20px 0;
}
.merke{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink)}
.merke .navn{font-weight:700;font-size:1.1rem;letter-spacing:-.01em;display:block;line-height:1.3}
.merke .under{
  display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand);font-weight:600;line-height:1.4;
}
.logo{width:40px;height:40px;flex:0 0 40px;border-radius:50%}

/* --------------------------------------------------------------------------
   Knapper. Trykkflater minimum 48px høye.
   -------------------------------------------------------------------------- */
.btn{
  font:inherit;font-size:1rem;font-weight:600;cursor:pointer;letter-spacing:.005em;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:15px 30px;
  background:var(--brand);color:#fff;border:2px solid var(--brand);
  border-radius:var(--radius-pill);text-decoration:none;
}
/* Pil på slutten, slik Trybe merker sine primærhandlinger. */
.btn.pil:after{content:'\203A';font-size:1.25em;line-height:1;margin-left:2px;opacity:.85}
.btn:hover{background:var(--brand-mork);border-color:var(--brand-mork);color:#fff}
.btn.full{width:100%}
.btn.rolig{background:var(--card);color:var(--brand);border-color:var(--line-mork)}
.btn.rolig:hover{background:var(--brand-myk);border-color:var(--brand);color:var(--brand)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.knapperad{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 var(--luft-2)}

.tilbake{
  font:inherit;font-size:.98rem;font-weight:600;background:none;border:0;
  color:var(--brand);cursor:pointer;padding:12px 0;margin:0 0 var(--luft-1);
  display:inline-block;text-decoration:none;
}
.tilbake:hover{text-decoration:underline}

/* --------------------------------------------------------------------------
   Kort og paneler
   -------------------------------------------------------------------------- */
.kort{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:32px 34px;margin:0 0 var(--luft-3);box-shadow:var(--shadow);
}
.kort > :last-child{margin-bottom:0}
.kort h3{margin-bottom:var(--luft-1)}
.kort.merket{border-left:5px solid var(--brand)}
body.tett .kort{padding:26px 28px}

.panel{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:30px 32px;margin:0 0 var(--luft-3);box-shadow:var(--shadow);
}
.panel h2{margin-bottom:6px}
.panel .note{font-size:.92rem;color:var(--ink-soft);margin:0 0 var(--luft-3);max-width:52em}

.stat{font-size:.88rem;font-weight:600;color:var(--brand);letter-spacing:.01em;margin:0 0 var(--luft-2)}
.hvorfor{font-size:.98rem;color:var(--ink-soft);margin-bottom:0}
.hvorfor b{color:var(--ink)}

blockquote{
  margin:0 0 var(--luft-2);padding:22px 26px;background:var(--brand-myk);
  border-left:4px solid var(--brand);border-radius:0 10px 10px 0;
  font-size:1.05rem;font-weight:500;line-height:1.65;
}
ul,ol{margin:0 0 1.3rem;padding-left:1.35em}
li{margin-bottom:.75rem}
li:last-child{margin-bottom:0}

/* --------------------------------------------------------------------------
   Komposisjon i bredden.

   Trybe setter kortene ved siden av hverandre i stedet for under hverandre.
   Det er det som gjør at dashbordet deres leses på ett blikk. Vi bruker
   samme grep, men beholder ett fokuspunkt i full bredde øverst.
   -------------------------------------------------------------------------- */
.rutenett{display:grid;gap:20px;align-items:start;margin:0 0 var(--luft-3)}
@media(min-width:900px){
  .rutenett.to{grid-template-columns:1.3fr 1fr}
  .rutenett.likt{grid-template-columns:1fr 1fr}
}
.rutenett > *{margin-bottom:0;min-width:0}

/* Seksjonsrad. Tittel til venstre, handling til høyre, som deres
   «My Brands ... View All». */
.seksjonsrad{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin:0 0 var(--luft-1);
}
.seksjonsrad h2,.seksjonsrad h3{margin:0}
.merlenke{
  font:inherit;font-size:.92rem;font-weight:600;background:none;border:0;
  color:var(--brand);cursor:pointer;padding:6px 0;
  display:inline-flex;align-items:center;gap:5px;
}
.merlenke:after{content:'\203A';font-size:1.25em;line-height:1}
.merlenke:hover{text-decoration:underline}

/* Menykort, brukes på portalens hjemskjerm */
.meny{display:grid;gap:18px;margin-top:var(--luft-3)}
@media(min-width:760px){.meny{grid-template-columns:1fr 1fr}}
.meny button,.meny a{
  font:inherit;text-align:left;background:var(--card);border:1px solid var(--line);
  border-left:5px solid var(--brand);border-radius:var(--radius-el);padding:28px 30px;
  cursor:pointer;box-shadow:var(--shadow);color:var(--ink);text-decoration:none;display:block;
}
.meny button:hover,.meny a:hover{border-left-color:var(--brand-mork);transform:translateY(-1px)}
.meny b{display:block;font-size:1.15rem;font-weight:700;letter-spacing:-.01em;margin-bottom:6px}
.meny span{color:var(--ink-soft);font-size:.96rem;display:block;line-height:1.6}

/* --------------------------------------------------------------------------
   Neste steg. Ett fokuspunkt øverst i kreatørdashboardet.
   Full flate i merkefargen, så det ikke er tvil om hvor blikket skal.
   -------------------------------------------------------------------------- */
.neste{
  background:var(--brand);color:#fff;border-radius:var(--radius-card);
  padding:34px 36px;margin:var(--luft-3) 0;
}
.neste.hast{background:#7A1717}
.neste.ferdig{background:#155C32}
.neste .merk{
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin:0 0 12px;
}
.neste h2{color:#fff;font-size:1.42rem;margin:0 0 var(--luft-1)}
.neste p{color:rgba(255,255,255,.88);margin:0 0 var(--luft-2);font-size:1rem;max-width:40em}
.neste p:last-child{margin-bottom:0}
.neste .sitat{
  border-left:3px solid rgba(255,255,255,.4);padding:4px 0 4px 18px;
  font-weight:500;color:#fff;
}
.neste .btn{background:#fff;color:var(--brand);border-color:#fff}
.neste .btn:hover{background:var(--brand-myk);border-color:var(--brand-myk);color:var(--brand)}
.neste .btn.rolig{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.neste .btn.rolig:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.neste .knapperad{margin:var(--luft-2) 0 0}

/* Frist, rett under neste steg */
.frist{
  display:block;font-size:.94rem;line-height:1.6;
  color:var(--ink-soft);margin:0 0 var(--luft-3);
}
.frist .rad{display:block}
.frist b{color:var(--ink);font-weight:600}
.frist .over{color:var(--red);font-weight:600}

/* --------------------------------------------------------------------------
   Sjekkliste
   -------------------------------------------------------------------------- */
.sjekk{list-style:none;padding:0;margin:0}
.sjekk li{
  display:flex;gap:16px;align-items:flex-start;margin:0;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.sjekk li:first-child{padding-top:0}
.sjekk li:last-child{border-bottom:0;padding-bottom:0}
.sjekk .rute{
  width:26px;height:26px;flex:0 0 26px;margin-top:2px;border-radius:50%;
  border:2px solid var(--line-mork);background:var(--card);
  text-align:center;line-height:22px;font-size:.78rem;font-weight:700;color:transparent;
}
.sjekk li.gjort .rute{background:var(--green);border-color:var(--green);color:#fff}
.sjekk li.gjort .hva b{color:var(--ink-soft);font-weight:500}
.sjekk .hva{line-height:1.55}
.sjekk .hva b{display:block;font-weight:600}
.sjekk .hva em{font-style:normal;color:var(--ink-soft);font-size:.92rem;display:block;margin-top:3px}

/* --------------------------------------------------------------------------
   Varsel
   -------------------------------------------------------------------------- */
.varsel{
  background:#FFF6E3;border:0;border-radius:16px;
  padding:20px 26px;margin:0 0 var(--luft-2);font-size:.95rem;line-height:1.6;
}
.varsel b{display:block;margin-bottom:6px;font-weight:700}
.varsel > :last-child{margin-bottom:0}
.varsel.ok{background:#EAF7EF}
.varsel.feil{background:#FCEFEE}
.varsel.rolig{background:var(--card);border:1px solid var(--line)}

/* --------------------------------------------------------------------------
   Påstandsliste, to kolonner over 820px
   -------------------------------------------------------------------------- */
.pastander{display:grid;gap:24px;margin-top:var(--luft-3)}
@media(min-width:820px){.pastander{grid-template-columns:1fr 1fr;align-items:start}}
.boks{border-radius:var(--radius-card);padding:30px 32px;border:2px solid}
.boks.ja{background:var(--green-bg);border-color:var(--green)}
.boks.nei{background:var(--red-bg);border-color:var(--red)}
.boks h3{font-size:1.12rem;margin-bottom:var(--luft-2)}
.boks.ja h3{color:var(--green)}
.boks.nei h3{color:var(--red)}
.boks ul{list-style:none;padding:0;margin:0}
.boks li{padding-left:34px;position:relative;font-size:.96rem;margin-bottom:16px;line-height:1.6}
.boks li:last-child{margin-bottom:0}
.boks.ja li:before{content:'\2713';position:absolute;left:0;top:0;color:var(--green);font-weight:700;font-size:1.05rem}
.boks.nei li:before{content:'\2715';position:absolute;left:0;top:0;color:var(--red);font-weight:700;font-size:.95rem}

/* --------------------------------------------------------------------------
   Merkelapper og grepsmerke
   -------------------------------------------------------------------------- */
.lapp{
  display:inline-block;font-size:.76rem;font-weight:600;padding:5px 12px;letter-spacing:.01em;
  border-radius:20px;white-space:nowrap;border:1px solid transparent;line-height:1.4;
}
.lapp.ny{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-line)}
.lapp.ok{background:var(--green-bg);color:var(--green);border-color:var(--green-line)}
.lapp.endre{background:var(--violet-bg);color:var(--violet);border-color:var(--violet-line)}
.lapp.nei{background:var(--red-bg);color:var(--red);border-color:var(--red-line)}
.lapp.rolig{background:var(--paper);color:var(--ink-soft);border-color:var(--line)}

.grep{
  display:inline-block;font-weight:700;
  width:28px;height:28px;line-height:24px;text-align:center;border:2px solid var(--brand);
  border-radius:50%;color:var(--brand);font-size:.82rem;
}

/* --------------------------------------------------------------------------
   Tabeller
   -------------------------------------------------------------------------- */
.rull{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.93rem}
th{
  text-align:left;font-size:.82rem;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--ink-soft);padding:0 14px 12px 0;border-bottom:1px solid var(--line);white-space:nowrap;
}
td{padding:16px 14px 16px 0;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.55}
tr:last-child td{border-bottom:0}
td.navn{font-weight:600}
.tall{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.bestatt{color:var(--green)}
.midt{color:var(--amber)}
.stryk{color:var(--red)}
.tomrad td{color:var(--ink-soft);font-style:italic;padding:26px 0}

.stolpe{height:8px;background:#E7E4DE;border-radius:20px;overflow:hidden;margin-top:8px;max-width:130px}
.stolpe i{display:block;height:100%;background:var(--brand)}

.handling{
  font:inherit;font-size:.86rem;font-weight:600;background:var(--card);border:1.5px solid var(--line-mork);
  border-radius:var(--radius-pill);padding:10px 18px;cursor:pointer;color:var(--ink);
  margin:0 8px 8px 0;min-height:42px;
}
.handling:hover{border-color:var(--brand);color:var(--brand)}
.handling.primar{background:var(--brand);color:#fff;border-color:var(--brand)}
.handling.primar:hover{background:var(--brand-mork);color:#fff}

/* --------------------------------------------------------------------------
   KPI-bokser
   -------------------------------------------------------------------------- */
.kpier{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin:0 0 var(--luft-3)}
.kpi{
  position:relative;overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:22px 24px 24px;box-shadow:var(--shadow-lav);
}
/* Tynn farget strek i bunnen, ulik per kort, som Trybes stat-kort.
   Et kort som krever handling er aldri gult, det får bare gul strek. */
.kpi:after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--brand);opacity:.85;
}
.kpier .kpi:nth-child(2):after{background:#0485F7}
.kpier .kpi:nth-child(3):after{background:#17C964}
.kpier .kpi:nth-child(4):after{background:#8B5CF6}
.kpier .kpi:nth-child(5):after{background:#F5A524}
.kpi.flagg{border-color:var(--line);background:var(--card)}
.kpi.flagg:after{background:#F5A524}
.kpi.flagg .merk:after{
  content:'';display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#F5A524;margin-left:7px;vertical-align:1px;
}
.kpi .merk{font-size:.8rem;color:var(--ink-soft);margin-bottom:10px;line-height:1.4}
.kpi .tallet{font-size:1.9rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kpi .under{font-size:.8rem;color:var(--ink-soft);margin-top:10px;line-height:1.45}

/* --------------------------------------------------------------------------
   Skjema
   -------------------------------------------------------------------------- */
.felt{margin:0 0 var(--luft-3)}
.felt label,.gruppe > legend{display:block;font-weight:600;margin:0 0 var(--luft-1);font-size:1rem;line-height:1.5}
.felt .hjelp,.gruppe .hjelp{font-size:.9rem;color:var(--ink-soft);margin:-4px 0 12px;line-height:1.6;max-width:44em}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=url],input[type=date],select,textarea{
  font:inherit;font-size:1rem;width:100%;padding:15px 18px;min-height:54px;
  border:1.5px solid var(--line);border-radius:var(--radius-el);
  background:var(--card);color:var(--ink);
}
textarea{min-height:140px;resize:vertical;line-height:1.6}
select{appearance:none;background-image:none}
input:hover,select:hover,textarea:hover{border-color:var(--brand)}
input[aria-invalid="true"],textarea[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--red)}
.feltfeil{color:var(--red);font-weight:600;font-size:.92rem;margin:10px 0 0;line-height:1.5}
.feltfeil:empty{margin:0}

.gruppe{border:0;padding:0;margin:0 0 var(--luft-3)}
.valg{display:grid;gap:12px}
.valg label{
  display:flex;gap:14px;align-items:flex-start;font-weight:400;
  border:1.5px solid var(--line);border-radius:var(--radius-el);
  padding:18px 20px;cursor:pointer;background:var(--card);margin:0;min-height:54px;line-height:1.55;
}
.valg label:hover{border-color:var(--brand);background:var(--brand-myk)}
.valg input{margin:4px 0 0;width:20px;height:20px;min-height:0;flex:0 0 20px;accent-color:var(--brand)}
.valg label > span b{display:block;font-weight:600}
.valg label > span em{display:block;font-style:normal;color:var(--ink-soft);font-size:.92rem;margin-top:4px}

/* Navnevalg ved innlogging */
.hvem{display:grid;gap:12px;margin:0 0 var(--luft-3)}
.hvem button{
  font:inherit;font-size:1.05rem;font-weight:500;text-align:left;min-height:58px;
  background:var(--card);color:var(--ink);border:1.5px solid var(--line);
  border-radius:var(--radius-el);padding:17px 20px;cursor:pointer;
}
.hvem button:hover{border-color:var(--brand)}
.hvem button[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-myk);font-weight:600}

.feilmelding{color:var(--red);font-weight:600;margin-top:var(--luft-2);min-height:1.6em;line-height:1.5}
.hint{font-size:.92rem;color:var(--ink-soft);margin-top:var(--luft-3)}

/* --------------------------------------------------------------------------
   Trinn, brukt på offentlig side
   -------------------------------------------------------------------------- */
.trinn{list-style:none;padding:0;margin:var(--luft-3) 0 0;counter-reset:t}
.trinn li{
  counter-increment:t;position:relative;padding:0 0 34px 66px;margin:0;
  border-left:2px solid var(--line);margin-left:21px;
}
.trinn li:last-child{border-left-color:transparent;padding-bottom:0}
.trinn li:before{
  content:counter(t);position:absolute;left:-22px;top:-6px;
  width:42px;height:42px;line-height:38px;text-align:center;
  font-weight:700;font-size:1rem;
  background:var(--card);color:var(--brand);border:2px solid var(--brand);border-radius:50%;
}
.trinn b{display:block;font-size:1.08rem;font-weight:700;letter-spacing:-.01em;margin-bottom:6px}
.trinn span{color:var(--ink-soft);font-size:.96rem;line-height:1.65}

/* Faktaliste, to kolonner på brede skjermer */
.fakta{display:grid;gap:20px;margin:var(--luft-3) 0}
@media(min-width:700px){.fakta{grid-template-columns:1fr 1fr}}
.fakta div{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-el);padding:26px 28px}
.fakta b{display:block;font-size:1.05rem;font-weight:700;letter-spacing:-.01em;margin-bottom:8px}
.fakta span{color:var(--ink-soft);font-size:.96rem;line-height:1.65}

/* Spørsmål og svar */
details{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-el);margin:0 0 14px}
details summary{
  cursor:pointer;font-weight:600;padding:20px 24px;min-height:56px;
  display:flex;align-items:center;gap:16px;list-style:none;line-height:1.5;
}
details summary::-webkit-details-marker{display:none}
details summary:after{content:'+';margin-left:auto;color:var(--brand);font-size:1.4rem;font-weight:600;line-height:1}
details[open] summary{padding-bottom:12px}
details[open] summary:after{content:'\2212'}
details .svar{padding:0 24px 22px}
details .svar > :last-child{margin-bottom:0}

/* --------------------------------------------------------------------------
   Faner i adminpanelet
   -------------------------------------------------------------------------- */
.faner{display:flex;gap:4px;margin-top:var(--luft-3);flex-wrap:wrap}
.faner button{
  font:inherit;font-size:.95rem;font-weight:500;background:none;border:0;
  border-bottom:3px solid transparent;color:var(--ink-soft);padding:13px 16px;cursor:pointer;min-height:50px;
}
.faner button:hover{color:var(--ink)}
.faner button[aria-current="true"]{color:var(--brand);font-weight:600;border-bottom-color:var(--brand)}
.faner .prikk{
  display:inline-block;margin-left:8px;background:var(--amber);color:#fff;
  font-size:.7rem;font-weight:600;border-radius:20px;padding:2px 8px;vertical-align:1px;
}

.skjerm{display:none;padding:var(--luft-4) 0 110px}
.skjerm.pa{display:block}

/* --------------------------------------------------------------------------
   Portalnavigasjon. Alltid synlig, alltid tekst, aldri skjult bak et ikon.
   Bryter over flere linjer i stedet for å scrolle sidelengs, så ingenting
   forsvinner ut av bildet på mobil.
   -------------------------------------------------------------------------- */
.portaltopp{background:var(--card);border-bottom:1px solid var(--line)}
.portaltopp .rad{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;padding:16px 0;
}
.portaltopp .hvemer{font-size:.95rem;color:var(--ink-soft)}
.portaltopp .hvemer b{color:var(--ink);font-weight:600}

.portalnav{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:0 0 16px;
}
.portalnav button{
  font:inherit;font-size:.9rem;font-weight:500;cursor:pointer;
  background:var(--paper);color:var(--ink);border:1.5px solid var(--line);
  border-radius:20px;padding:11px 15px;min-height:46px;white-space:nowrap;
}
.portalnav button:hover{border-color:var(--brand);color:var(--brand)}
.portalnav button[aria-current="true"]{
  background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600;
}
.portalnav .prikk{
  display:inline-block;margin-left:8px;background:var(--amber);color:#fff;
  font-size:.7rem;font-weight:600;border-radius:20px;padding:1px 7px;
}
.portalnav button[aria-current="true"] .prikk{background:#fff;color:var(--brand)}

/* --------------------------------------------------------------------------
   Inspirasjon
   -------------------------------------------------------------------------- */
.insp{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:0;margin:0 0 var(--luft-3);box-shadow:var(--shadow);overflow:hidden;
}
.insp .topp2{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  padding:24px 30px;border-bottom:1px solid var(--line);background:var(--brand-myk);
}
.insp .topp2 h3{margin:0;flex:1 1 auto;min-width:180px}
.insp .krop{padding:26px 30px}
.insp .krop > :last-child{margin-bottom:0}
.insp dl{margin:0}
.insp dt{
  font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 6px;
}
.insp dd{margin:0 0 var(--luft-2);line-height:1.65}
.insp dd:last-child{margin-bottom:0}
.insp .tallrad{font-size:.88rem;font-weight:600;color:var(--brand);width:100%;margin:0}

/* Dekning, hvilke vinkler som mangler */
.dekning{list-style:none;padding:0;margin:0}
.dekning li{
  display:grid;grid-template-columns:34px 1fr auto;gap:14px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--line);margin:0;
}
.dekning li:last-child{border-bottom:0}
.dekning .navnet{font-weight:600}
.dekning .navnet em{display:block;font-style:normal;font-weight:400;font-size:.9rem;color:var(--ink-soft);margin-top:2px}
.dekning .antall{font-variant-numeric:tabular-nums;font-size:.9rem;color:var(--ink-soft);white-space:nowrap}

/* Kreatørlista. Ingen rangering, ingen tall om annonsene. */
.roster{display:grid;gap:12px;margin:0}
@media(min-width:640px){.roster{grid-template-columns:1fr 1fr}}
.roster div{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-el);
  padding:18px 20px;
}
.roster b{display:block;font-weight:600;margin-bottom:4px}
.roster span{font-size:.9rem;color:var(--ink-soft);display:block}
.roster .meg{border-color:var(--brand);background:var(--brand-myk)}

/* --------------------------------------------------------------------------
   Materiell
   -------------------------------------------------------------------------- */
.mat{display:grid;gap:16px;margin:0}
.mat article{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-el);
  padding:24px 26px;
}
.mat .slag{
  display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand);margin:0 0 8px;
}
.mat h3{margin:0 0 6px}
.mat p{margin:0 0 var(--luft-2);color:var(--ink-soft);font-size:.96rem}
.mat p:last-child{margin-bottom:0}

/* --------------------------------------------------------------------------
   Kontakt
   -------------------------------------------------------------------------- */
.folk{display:grid;gap:18px;margin:0 0 var(--luft-3)}
@media(min-width:640px){.folk{grid-template-columns:1fr 1fr}}
.folk article{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:26px 28px;box-shadow:var(--shadow);
}
.folk h3{margin:0 0 4px}
.folk .rolle{color:var(--ink-soft);font-size:.94rem;margin:0 0 var(--luft-2)}
.folk .knapperad{margin:0}
.folk .btn{font-size:.95rem;min-height:50px;padding:12px 20px}

/* --------------------------------------------------------------------------
   Bunnmeny på mobil

   Pillemenyen over bryter til tre linjer på telefon og spiser toppen av
   hver skjerm. Under 820px bytter vi den derfor med en flytende linje
   nederst med fire valg, og resten i en Mer-dialog. Ingenting ligger bak
   et ikon, alt har tekst.
   -------------------------------------------------------------------------- */
.bunnmeny{display:none}

@media(max-width:820px){
  .portalnav{display:none}

  .bunnmeny{
    display:flex;gap:4px;position:fixed;z-index:40;
    left:12px;right:12px;bottom:12px;
    background:var(--brand);border-radius:999px;padding:6px;
    box-shadow:0 8px 28px rgba(14,27,77,.32);
  }
  .bunnmeny button{
    flex:1 1 0;min-width:0;font:inherit;font-size:.78rem;font-weight:600;
    background:none;border:0;color:rgba(255,255,255,.78);cursor:pointer;
    padding:12px 6px;border-radius:999px;min-height:48px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .bunnmeny button[aria-current="true"]{background:#fff;color:var(--brand)}
  .bunnmeny .prikk{
    display:inline-block;margin-left:5px;background:var(--amber);color:#fff;
    font-size:.66rem;font-weight:600;border-radius:20px;padding:0 6px;
  }
  .bunnmeny button[aria-current="true"] .prikk{background:var(--brand);color:#fff}

  /* Plass til menyen, så den aldri dekker siste knapp på siden. */
  body{padding-bottom:96px}
  footer{margin-bottom:24px}
}

/* Mer-dialogen. Full liste med tekst, ingen ikoner. */
.ark{
  position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;
  background:rgba(19,26,46,.55);
}
.ark[hidden]{display:none}
.ark .arkinnhold{
  background:var(--card);width:100%;max-height:82vh;overflow:auto;
  border-radius:20px 20px 0 0;padding:26px 22px 34px;
}
.ark h3{margin:0 0 var(--luft-2)}
.ark .arkliste{display:grid;gap:10px;margin:0 0 var(--luft-2)}
.ark .arkliste button{
  font:inherit;font-size:1rem;font-weight:500;text-align:left;
  background:var(--card);color:var(--ink);border:2px solid var(--line-mork);
  border-radius:var(--radius-el);padding:15px 18px;min-height:54px;cursor:pointer;
}
.ark .arkliste button[aria-current="true"]{
  border-color:var(--brand);background:var(--brand-myk);color:var(--brand);font-weight:600;
}

/* --------------------------------------------------------------------------
   Adminpanelet, fast venstremeny

   Elleve valg i en toppmeny blir uleselig. Vi har seks, men en venstremeny
   holder når det vokser, og den frigjør toppen til det som krever handling.
   -------------------------------------------------------------------------- */
.appramme{display:block}

@media(min-width:900px){
  .appramme{display:grid;grid-template-columns:238px minmax(0,1fr);min-height:100vh}
  .appramme > .hovedfelt{min-width:0}
}

.sidemeny{
  background:var(--card);border-right:1px solid var(--line);
  padding:20px 16px 30px;display:flex;flex-direction:column;gap:3px;
}

/* Kortet øverst sier hvem du er logget inn som og hvilken runde det
   gjelder. Uten det starter menyen rett på en knapp og ser uferdig ut. */
.merkekort{
  display:flex;align-items:center;gap:12px;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:13px 15px;margin:0 0 var(--luft-3);text-decoration:none;color:var(--ink);
}
.merkekort img{width:34px;height:34px;flex:0 0 34px;border-radius:50%}
.merkekort span{min-width:0;flex:1 1 auto}
.merkekort:after{
  content:'';width:9px;height:9px;flex:0 0 9px;margin-left:4px;
  border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);
  transform:rotate(45deg) translateY(-2px);
}
.merkekort b{display:block;font-weight:700;font-size:.95rem;line-height:1.3}
.merkekort em{
  display:block;font-style:normal;font-size:.78rem;color:var(--ink-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.sidemeny .bolk{
  font-size:.68rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint,var(--ink-soft));opacity:.75;padding:var(--luft-2) 12px 6px;margin:0;
}
.sidemeny button{
  position:relative;font:inherit;font-size:.93rem;font-weight:500;text-align:left;
  background:none;border:0;color:var(--ink-soft);cursor:pointer;
  padding:11px 14px;border-radius:12px;min-height:46px;
  display:flex;align-items:center;gap:12px;
}
.sidemeny button:hover{background:var(--paper);color:var(--ink)}
.sidemeny button[aria-current="true"]{
  background:#F0F0F3;color:var(--ink);font-weight:600;
}
.sidemeny button[aria-current="true"] .ikon{color:var(--brand)}
/* Streken flukter med kanten av menyen, ikke med knappen. */
.sidemeny button[aria-current="true"]:before{
  content:'';position:absolute;left:-16px;top:9px;bottom:9px;width:3px;
  background:var(--brand);border-radius:0 3px 3px 0;
}
.sidemeny .prikk{
  margin-left:auto;background:var(--amber);color:#fff;
  font-size:.7rem;font-weight:600;border-radius:20px;padding:1px 8px;
}
.sidemeny button[aria-current="true"] .prikk{background:var(--brand);color:#fff}
.sidemeny .bunnfelt{margin-top:auto;padding:var(--luft-3) 12px 0;font-size:.8rem;color:var(--ink-soft);line-height:1.5}

@media(max-width:899px){
  .sidemeny{
    border-right:0;border-bottom:1px solid var(--line);
    flex-direction:row;flex-wrap:wrap;align-items:center;padding:14px 20px;gap:0;
  }
  .merkekort{margin:0;width:100%;background:none;border:0;padding:0}
  .sidemeny > button,.sidemeny .bolk,.sidemeny .bunnfelt{display:none}
}

/* --------------------------------------------------------------------------
   Segmentvelger. Underdeling inne i en fane, når to visninger hører
   sammen men ikke fortjener hver sin plass i menyen.
   -------------------------------------------------------------------------- */
.segment{
  display:inline-flex;gap:4px;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:5px;margin:0 0 var(--luft-3);max-width:100%;flex-wrap:wrap;
}
.segment button{
  font:inherit;font-size:.9rem;font-weight:500;border:0;background:none;
  color:var(--ink-soft);padding:9px 18px;border-radius:999px;cursor:pointer;min-height:42px;
  display:inline-flex;align-items:center;gap:8px;
}
.segment .ikon{width:17px;height:17px;flex:0 0 17px}
.segment .ikon svg{width:100%;height:100%}
.segment button:hover{color:var(--ink)}
.segment button[aria-current="true"]{background:var(--brand);color:#fff;font-weight:600}

/* --------------------------------------------------------------------------
   Tom tilstand. Aldri en tom flate, alltid hva som skjer videre.
   -------------------------------------------------------------------------- */
.tomstat{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:10px;padding:52px 24px;
}
.tomstat .ikon{
  width:54px;height:54px;border-radius:50%;background:var(--paper);
  display:flex;align-items:center;justify-content:center;color:var(--ink-soft);margin-bottom:4px;
}
.tomstat .ikon svg{width:24px;height:24px}
.tomstat b{font-size:1.05rem;font-weight:700}
.tomstat p{color:var(--ink-soft);max-width:40ch;margin:0;font-size:.94rem;line-height:1.6}
.tomstat .handling{margin-top:8px}

/* --------------------------------------------------------------------------
   Halvmåler. Trybe bruker den til Approval Rate. Vi bruker den til
   godkjenningsrate, som er det eneste kvalitetstallet kreatøren styrer selv.
   -------------------------------------------------------------------------- */
.maaler{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.maaler svg{width:132px;height:auto;display:block}
.maaler .merk{font-size:.78rem;color:var(--ink-soft);text-align:center}
.maaler .bue-bak{stroke:var(--line)}
.maaler .bue-fram{stroke:var(--brand)}
.maaler .tallet2{
  font-family:inherit;font-weight:700;font-size:19px;fill:var(--ink);
  text-anchor:middle;letter-spacing:-.5px;
}

/* --------------------------------------------------------------------------
   Filterrad med piller, som Trybes Submissions.
   -------------------------------------------------------------------------- */
.filterrad{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 var(--luft-3)}
.filterrad button{
  font:inherit;font-size:.88rem;font-weight:500;cursor:pointer;
  background:var(--paper);color:var(--ink-soft);border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:9px 16px;min-height:42px;
  display:inline-flex;align-items:center;gap:8px;
}
.filterrad button:hover{color:var(--ink);border-color:var(--line-mork)}
.filterrad button[aria-pressed="true"]{
  background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600;
}
.filterrad .telling{
  font-size:.78rem;font-weight:600;opacity:.8;
}
.filterrad .hoyrestilt{margin-left:auto}

/* Fargeprikk foran statusfiltrene, som deres. */
.statusprikk{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.statusprikk.ny{background:var(--amber)}
.statusprikk.ok{background:var(--green)}
.statusprikk.endre{background:var(--violet)}
.statusprikk.nei{background:var(--red)}

/* --------------------------------------------------------------------------
   Topplinje. Merkepille til venstre, hjelp og brukerchip til høyre.
   Hentet rett fra Trybes Brand Portal og Creator Portal.
   -------------------------------------------------------------------------- */
.topplinje{
  position:sticky;top:0;z-index:45;background:var(--card);
  border-bottom:1px solid var(--line);
}
.topplinje .rad{
  display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;
}
.topplinje .venstre,.topplinje .hoyre{display:flex;align-items:center;gap:10px;min-width:0}
.topplinje .logo{width:32px;height:32px;flex:0 0 32px;border-radius:50%}
.topplinje .merkepille{
  background:var(--paper);border:1px solid var(--line);border-radius:999px;
  padding:7px 15px;font-size:.85rem;font-weight:600;white-space:nowrap;
}
.rundknapp{
  width:38px;height:38px;flex:0 0 38px;border-radius:50%;padding:0;
  border:1px solid var(--line);background:var(--card);color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.rundknapp:hover{border-color:var(--brand);color:var(--brand)}
.rundknapp svg{width:19px;height:19px}
.brukerchip{
  display:flex;align-items:center;gap:10px;background:none;border:0;font:inherit;
  cursor:pointer;padding:5px 10px 5px 5px;border-radius:999px;color:var(--ink);min-height:48px;
}
.brukerchip:hover{background:var(--paper)}
.brukerchip .initialer{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;
}
.brukerchip .navn2{font-weight:600;font-size:.9rem;white-space:nowrap}
.brukerchip:after{
  content:'';width:8px;height:8px;flex:0 0 8px;margin-left:2px;
  border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);
  transform:rotate(45deg) translateY(-2px);
}
@media(max-width:600px){.topplinje .merkepille,.brukerchip .navn2{display:none}}

.brukermeny{position:relative}
.brukermeny .meny2{
  position:absolute;right:0;top:calc(100% + 8px);min-width:190px;padding:6px;z-index:60;
  background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
}
.brukermeny .meny2[hidden]{display:none}
.brukermeny .meny2 p{
  margin:0;padding:10px 14px 8px;font-size:.8rem;color:var(--ink-soft);
  border-bottom:1px solid var(--line-soft);
}
.brukermeny .meny2 button{
  display:block;width:100%;text-align:left;font:inherit;font-size:.92rem;
  background:none;border:0;padding:11px 14px;border-radius:8px;cursor:pointer;
  color:var(--ink);min-height:44px;margin-top:4px;
}
.brukermeny .meny2 button:hover{background:var(--paper)}

/* --------------------------------------------------------------------------
   Velkomstkort. Trybes «Welcome, navn» øverst på kreatørflaten.
   -------------------------------------------------------------------------- */
.velkomstkort{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:18px 26px;margin:0 0 var(--luft-3);box-shadow:var(--shadow);
}
.velkomstkort .hilsen{font-size:.8rem;color:var(--ink-soft);margin:0 0 2px}
.velkomstkort .navn3{font-size:1.3rem;font-weight:700;letter-spacing:-.02em;margin:0;line-height:1.2}
.velkomstkort img{width:36px;height:36px;border-radius:50%;flex:0 0 36px}

/* --------------------------------------------------------------------------
   Sidemeny som eget kort, slik kreatørflaten deres er satt opp.
   -------------------------------------------------------------------------- */
@media(min-width:900px){
  .appramme.luftig{grid-template-columns:258px minmax(0,1fr);gap:22px;padding:22px 22px 22px 22px}
  .appramme.luftig .sidemeny{
    border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);
    align-self:start;position:sticky;top:82px;min-height:auto;padding:22px 14px 24px;
  }
  .appramme.luftig .hovedfelt{min-width:0}
  .appramme.luftig .hovedfelt .wrap{padding-left:0;padding-right:0;max-width:none}
  .appramme.luftig .skjerm{padding-top:0}
}
.sidemeny .menytittel{
  font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);opacity:.8;padding:0 12px var(--luft-2);margin:0;
}

/* Ikoner i menyen. Alltid sammen med tekst, aldri alene. */
.sidemeny button .ikon,.bunnmeny .ikon{width:20px;height:20px;flex:0 0 20px}
.sidemeny button .ikon svg,.bunnmeny .ikon svg{width:100%;height:100%}

/* --------------------------------------------------------------------------
   Veiviser. Ett spørsmål per skjerm, fremdrift på toppen, én knapp nederst.

   Mønsteret er hentet fra Trybe, og det er riktig for målgruppa vår: ingen
   lange skjemaer å scrolle gjennom, og alltid tydelig hvor langt du er
   kommet og hva neste trykk gjør.
   -------------------------------------------------------------------------- */
.fremdrift{position:fixed;top:0;left:0;right:0;height:5px;background:var(--line);z-index:50}
.fremdrift i{display:block;height:100%;background:var(--brand);transition:width .25s ease}
@media(prefers-reduced-motion:reduce){.fremdrift i{transition:none}}

.veitopp{display:flex;align-items:center;gap:16px;padding:26px 0 var(--luft-3)}
.veitopp .tilbake{margin:0}
.veitopp .steg{margin-left:auto;font-size:.85rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}

.veisteg{display:none}
.veisteg.pa{display:block}
.veisteg h2{font-size:1.7rem;max-width:16em}

/* Store, myke felt uten hard ramme, som i Trybes onboarding. */
.veisteg input[type=text],
.veisteg input[type=email],
.veisteg input[type=tel]{
  border-radius:var(--radius-pill);padding:19px 28px;min-height:62px;
  font-size:1.05rem;border-color:transparent;box-shadow:var(--shadow-lav);
}
.veisteg textarea{
  border-radius:22px;padding:19px 26px;border-color:transparent;box-shadow:var(--shadow-lav);
}
.veisteg .valg label{
  border-radius:18px;padding:19px 24px;border-color:transparent;box-shadow:var(--shadow-lav);
}
.veisteg input:focus-visible,.veisteg textarea:focus-visible{box-shadow:none}

/* Svak flatevask på veiviseren og innloggingen. Trybe har en varm
   fargeovergang her. Vi bruker vår egen marineblå, veldig nedtonet.
   Dette er det ene stedet spesifikasjonens «ingen gradienter» er fraveket. */
#kode,#login{
  background:
    radial-gradient(1100px 460px at 12% -8%, rgba(14,27,77,.075), transparent 62%),
    radial-gradient(880px 460px at 96% 4%, rgba(14,27,77,.05), transparent 62%);
}

/* Knappen står fast nederst, slik at den aldri må letes etter. */
.veibunn{position:sticky;bottom:0;background:var(--paper);padding:16px 0 24px;margin-top:var(--luft-4)}
.veibunn:before{content:'';display:block;height:1px;background:var(--line);margin:0 0 16px}

/* --------------------------------------------------------------------------
   Filmstripe. Videoer i rad, slik Trybe viser ukens beste.
   -------------------------------------------------------------------------- */
.filmstripe{display:flex;gap:12px;overflow-x:auto;padding:0 0 8px;margin:0}
.filmstripe > *{
  flex:0 0 116px;aspect-ratio:9/16;border-radius:12px;overflow:hidden;
  background:var(--brand);border:1px solid var(--line);position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:12px 11px;cursor:pointer;text-align:left;
  font:inherit;color:#fff;text-decoration:none;
}
.filmstripe > *:hover{border-color:var(--brand-mork);background:var(--brand-mork)}
.filmstripe .merket2{
  font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.filmstripe b{font-size:.84rem;font-weight:600;line-height:1.35;margin-top:3px}

/* --------------------------------------------------------------------------
   Statistikkort med strekikon
   -------------------------------------------------------------------------- */
.statrad{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));margin:0}
.statrad > div{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-el);
  padding:18px 20px;display:flex;flex-direction:column;gap:4px;
}
.statrad .ikon{width:24px;height:24px;color:var(--brand);margin-bottom:8px}
.statrad .ikon svg{width:100%;height:100%}
.statrad b{font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1}
.statrad span{font-size:.84rem;color:var(--ink-soft);line-height:1.45}

/* --------------------------------------------------------------------------
   Radliste. Gruppert oppsett, brukt til kontakt.
   -------------------------------------------------------------------------- */
.rader{
  display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;margin:0 0 var(--luft-3);
}
.rader > *{
  display:flex;align-items:center;gap:14px;padding:17px 22px;min-height:62px;
  border:0;border-bottom:1px solid var(--line-soft);background:none;
  font:inherit;text-align:left;color:var(--ink);text-decoration:none;cursor:pointer;
}
.rader > :last-child{border-bottom:0}
.rader > :hover{background:var(--paper)}
.rader .ikon{width:22px;height:22px;flex:0 0 22px;color:var(--brand)}
.rader .ikon svg{width:100%;height:100%}
.rader .tekst{min-width:0}
.rader .tekst b{display:block;font-weight:600;font-size:.98rem}
.rader .tekst em{display:block;font-style:normal;font-size:.86rem;color:var(--ink-soft);margin-top:2px}
.rader .pil{margin-left:auto;color:var(--ink-soft);font-size:1.15rem;flex:0 0 auto}

/* Hovedhandling festet nederst i sidemenyen, som Trybes Create Content. */
.sidemeny .hovedknapp{margin-top:auto;padding-top:var(--luft-3)}
.sidemeny .hovedknapp + .bunnfelt{margin-top:var(--luft-2);padding-top:var(--luft-2);border-top:1px solid var(--line-soft)}
/* Må være mer spesifikk enn `.sidemeny button`, ellers arver den
   menyknappenes gjennomsiktige bakgrunn. */
.sidemeny .hovedknapp .btn{
  width:100%;min-height:50px;font-size:.94rem;padding:13px 18px;
  justify-content:center;border-radius:var(--radius-el);
  background:var(--brand);color:#fff;border:2px solid var(--brand);font-weight:600;
}
.sidemeny .hovedknapp .btn:hover{background:var(--brand-mork);border-color:var(--brand-mork);color:#fff}
@media(max-width:899px){.sidemeny .hovedknapp{display:none}}

/* --------------------------------------------------------------------------
   Bunn
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Handlingsstripe, brukt til angre og til bulkvurdering
   -------------------------------------------------------------------------- */
.stripe{
  position:sticky;bottom:0;z-index:30;
  background:var(--brand);color:#fff;border-radius:var(--radius-el);
  padding:16px 20px;margin:var(--luft-3) 0 0;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  box-shadow:0 8px 28px rgba(14,27,77,.28);
}
.stripe p{margin:0;font-size:.94rem;flex:1 1 auto;min-width:180px}
.stripe p b{font-weight:700}
.stripe .handling{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.5);margin:0;
}
.stripe .handling:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.stripe .handling.primar{background:#fff;color:var(--brand);border-color:#fff}
.stripe .handling.primar:hover{background:var(--brand-myk);color:var(--brand)}
.stripe input[type=text]{
  flex:1 1 220px;min-height:44px;padding:10px 14px;font-size:.92rem;
  border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.12);color:#fff;
}
.stripe input[type=text]::placeholder{color:rgba(255,255,255,.65)}

td.velg{width:44px;padding-right:0}
td.velg input,th.velg input{width:20px;height:20px;accent-color:var(--brand);cursor:pointer}
tr.valgt{background:var(--brand-myk)}

/* --------------------------------------------------------------------------
   Video

   Vi laster ikke opp noe. Filene ligger i kreatørens Google Drive-mappe,
   og her bygger vi bare inn forhåndsvisningen. Mangler fil-IDen, viser vi
   en forklaring i riktig format i stedet for en tom eller død ramme.
   -------------------------------------------------------------------------- */
.videoramme{
  position:relative;width:100%;max-width:260px;aspect-ratio:9/16;
  border-radius:12px;overflow:hidden;background:#0C1330;
  border:1px solid var(--line);flex:0 0 auto;
}
.videoramme iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.videoramme .mangler{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  gap:8px;padding:22px;text-align:center;color:rgba(255,255,255,.72);font-size:.84rem;line-height:1.55;
}
.videoramme .mangler b{color:#fff;font-weight:600;display:block}
.videoramme.bred{max-width:100%;aspect-ratio:16/9}

/* --------------------------------------------------------------------------
   Skuff. Glir inn fra siden på desktop, dekker skjermen på mobil.
   Erstatter systemdialogene, som var den tydeligste grunnen til at
   panelet føltes uferdig.
   -------------------------------------------------------------------------- */
.skuff{
  position:fixed;inset:0;z-index:70;display:flex;justify-content:flex-end;
  background:rgba(12,19,48,.55);
}
.skuff[hidden]{display:none}
.skuffinnhold{
  background:var(--card);width:min(580px,100%);height:100%;overflow-y:auto;
  padding:28px 32px 40px;display:flex;flex-direction:column;gap:var(--luft-3);
}
.skuffhode{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.skuffhode h2{font-size:1.3rem;word-break:break-word}
.skuffhode .lukk{
  font:inherit;font-size:1.5rem;line-height:1;background:none;border:0;cursor:pointer;
  color:var(--ink-soft);padding:6px 10px;border-radius:8px;flex:0 0 auto;
}
.skuffhode .lukk:hover{background:var(--paper);color:var(--ink)}
.skuffrad{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}
.skuffrad .fakta2{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:12px}
.skuffrad .fakta2 div{display:flex;flex-direction:column;gap:2px}
.skuffrad .fakta2 dt,.skuffrad .fakta2 .merk{
  font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
}
.skuffrad .fakta2 .verdi{font-size:.96rem;font-weight:600;word-break:break-word}

/* --------------------------------------------------------------------------
   Kommentartråd
   -------------------------------------------------------------------------- */
.trad{display:flex;flex-direction:column;gap:12px;margin:0}
.trad article{
  background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px;
}
.trad article.fra-oss{background:var(--brand-myk);border-color:var(--brand-myk)}
.trad .hvem{
  display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
  font-size:.76rem;color:var(--ink-soft);margin:0 0 6px;
}
.trad .hvem b{color:var(--ink);font-weight:600;font-size:.84rem}
.trad p{margin:0;font-size:.95rem;line-height:1.6}
.trad .tomt{color:var(--ink-soft);font-style:italic;font-size:.92rem}

/* --------------------------------------------------------------------------
   Annonsebibliotek
   -------------------------------------------------------------------------- */
.annonse{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:24px 26px;margin:0 0 18px;box-shadow:var(--shadow);
  display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;
}
.annonse .info{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:14px}
.annonse .tittelrad{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.annonse .tittelrad h3{margin:0;font-size:1.05rem;word-break:break-word}
.annonse .maal{
  display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));
  border-top:1px solid var(--line-soft);padding-top:14px;
}
.annonse .maal div{display:flex;flex-direction:column;gap:2px}
.annonse .maal .merk{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.annonse .maal .verdi{font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.annonse .stempel{font-size:.78rem;color:var(--ink-soft)}
.annonse .stempel.gammel{color:var(--amber);font-weight:600}

/* --------------------------------------------------------------------------
   Analyse, brukt i inspirasjonsboardet
   -------------------------------------------------------------------------- */
.analyse{display:flex;flex-direction:column;gap:var(--luft-2);margin:0}
.analyse > div{display:flex;flex-direction:column;gap:5px}
.analyse .merk{
  font-size:.7rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--brand);
}
.analyse p{margin:0;font-size:.96rem;line-height:1.65}
.analyse ol{margin:0;padding-left:1.3em}
.analyse ol li{font-size:.96rem;margin-bottom:8px}

/* --------------------------------------------------------------------------
   Bunn
   -------------------------------------------------------------------------- */
footer{border-top:1px solid var(--line);margin-top:var(--luft-5);padding:30px 0 48px;font-size:.92rem;color:var(--ink-soft)}
footer a{color:var(--ink-soft)}
.eksempeldata{font-size:.85rem;color:var(--ink-soft);margin-top:var(--luft-2);font-style:italic}

/* --------------------------------------------------------------------------
   Respons og bevegelse
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  .meny button:hover,.meny a:hover{transform:none}
}
@media(max-width:820px){
  :root{--luft-5:60px;--luft-4:36px}
}
@media(max-width:520px){
  body{font-size:17px}
  /* Navnet står allerede i hilsenen på hjem. På telefon er toppen for
     dyrebar til å bruke en hel linje på å gjenta det. */
  .portaltopp .rad{padding:12px 0;flex-wrap:nowrap}
  .portaltopp .hvemer{display:none}
  .portaltopp .logo{width:34px;height:34px;flex-basis:34px}
  .portaltopp .merke .navn{font-size:1rem}
  h1{font-size:1.8rem}
  h2{font-size:1.35rem}
  .wrap{padding:0 20px}
  .kort{padding:26px 22px}
  .panel{padding:24px 20px}
  .boks{padding:24px 22px}
  .meny button,.meny a{padding:24px 22px}
  .fakta div{padding:22px 24px}
  .btn{width:100%}
  .knapperad{flex-direction:column;gap:12px}
  .knapperad .btn{width:100%}
}
@media(max-width:380px){
  .wrap{padding:0 16px}
  .trinn li{padding-left:56px}
}


/* ==========================================================================
   Håndverkspass for panelet.

   Det som skiller en proff app-flate fra et dokument er tettheten: liten
   UI-tekst, lave rader, små etiketter uten rammer, og samme luft overalt.
   Alt under gjelder kun body.tett, altså adminpanelet.
   ========================================================================== */
body.tett{font-size:14px;line-height:1.5}
body.tett h2{font-size:1.3rem}
body.tett .note{font-size:.85rem;margin-bottom:18px}
body.tett .panel{padding:22px 26px;border-radius:16px}
body.tett .panel h2,body.tett .panel h3{font-size:1rem;font-weight:700;margin-bottom:2px}
body.tett .merlenke{font-size:.85rem}
body.tett .varsel{font-size:.88rem;padding:16px 22px;border-radius:14px}
body.tett .tomstat{padding:38px 20px}

/* Tabeller: lave rader, ingen linjebrekk i tall og datoer, stille hover. */
body.tett table{font-size:.84rem}
body.tett th{font-size:.78rem;padding-bottom:10px;font-weight:500}
body.tett td{padding:11px 14px 11px 0;white-space:nowrap;vertical-align:middle}
body.tett td.brytbar{white-space:normal;min-width:200px}
body.tett .rull tbody tr:hover td{background:#FAFAFB}

/* Etiketter og merker: små, uten rammer, som Trybes. */
body.tett .lapp{border:0;font-size:.72rem;padding:5px 11px}
body.tett .grep{width:22px;height:22px;line-height:19px;font-size:.68rem;border-width:1.5px}
body.tett .prikk{background:var(--brand);color:#fff}
body.tett .sidemeny button[aria-current="true"] .prikk{background:var(--brand);color:#fff}

/* Knapper: én størrelse for handlinger i rader, én for primærknapper. */
body.tett .handling{font-size:.8rem;min-height:34px;padding:7px 15px;margin:0 6px 0 0}
body.tett .btn{min-height:44px;font-size:.9rem;padding:11px 24px}
body.tett .filterrad button{min-height:38px;font-size:.82rem;padding:8px 15px}
body.tett .segment button{min-height:38px;font-size:.85rem;padding:8px 16px}
body.tett .sidemeny button{font-size:.88rem;min-height:42px;padding:10px 14px}

/* KPI-kort: mindre tall, strammere luft. */
body.tett .kpi{padding:18px 20px 20px}
body.tett .kpi .tallet{font-size:1.65rem}
body.tett .kpi .merk{font-size:.78rem;margin-bottom:8px}
body.tett .kpi .under{font-size:.76rem;margin-top:8px}
body.tett .kpier{gap:12px;grid-template-columns:repeat(auto-fit,minmax(175px,1fr))}

/* Skuffen og dekningen følger samme skala. */
body.tett .skuffinnhold{padding:24px 28px 36px;gap:22px}
body.tett .dekning li{padding:11px 0}
body.tett .dekning .navnet em{font-size:.8rem}
body.tett .annonse{padding:20px 22px;gap:20px}
body.tett .annonse .maal .verdi{font-size:.95rem}
body.tett .annonse .maal .merk{font-size:.64rem}
body.tett .stempel{font-size:.74rem}


/* ==========================================================================
   Annonsebiblioteket, bygget som Metas Ad Library: rutenett av kort med
   status øverst, forhåndsvisningen i midten, og det biblioteket ikke har,
   tallene våre, rett under forhåndsvisningen.
   ========================================================================== */
.adgrid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));align-items:start}
.adkort{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:16px 16px 18px;display:flex;flex-direction:column;gap:12px;
}
.adkort .adtopp{display:flex;align-items:center;justify-content:space-between;gap:10px}
.adkort .admeta{font-size:.76rem;color:var(--ink-soft);line-height:1.55;margin:0}
.adkort .adknapp{
  font:inherit;font-size:.82rem;font-weight:600;width:100%;
  background:var(--paper);border:1px solid var(--line);border-radius:8px;
  padding:9px 12px;cursor:pointer;color:var(--ink);min-height:38px;
}
.adkort .adknapp:hover{border-color:var(--line-mork)}
.adkort .adhode{
  display:flex;gap:10px;align-items:center;
  border-top:1px solid var(--line-soft);padding-top:12px;
}
.adkort .adhode img{width:34px;height:34px;border-radius:50%;flex:0 0 34px}
.adkort .adhode b{display:block;font-size:.86rem;line-height:1.25}
.adkort .adhode em{font-style:normal;font-size:.74rem;color:var(--ink-soft)}
.adkort .adtekst{font-size:.82rem;line-height:1.5;margin:0}
.adkort .videoramme{width:100%;max-width:240px;align-self:center}
.adkort .admaal{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px 12px;
  border-top:1px solid var(--line-soft);padding-top:12px;
}
.adkort .admaal div{display:flex;flex-direction:column;gap:2px;min-width:0}
.adkort .admaal .merk{font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.adkort .admaal .verdi{font-size:.95rem;font-weight:700;font-variant-numeric:tabular-nums}
.adkort .adbunn{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-size:.74rem;color:var(--ink-soft);
}
.adkort .adbunn .gammel{color:#B8860B;font-weight:600}

/* --------------------------------------------------------------------------
   Periodevelger, som datovelgeren øverst i Shopify-adminen. Faste forslag
   pluss egendefinert fra-til. Panelet tegnes på nytt når valget endres.
   -------------------------------------------------------------------------- */
.periode{position:relative;display:inline-block;flex:0 0 auto}
.periodeknapp{
  display:inline-flex;align-items:center;gap:8px;
  min-height:40px;padding:8px 34px 8px 16px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  font-weight:600;font-size:.88rem;line-height:1;font-family:inherit;color:var(--ink);cursor:pointer;
  box-shadow:var(--shadow-lav);position:relative;white-space:nowrap;
}
.periodeknapp::after{
  content:"";position:absolute;right:14px;top:50%;width:8px;height:8px;
  border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);
  transform:translateY(-70%) rotate(45deg);
}
.periodeknapp:hover{border-color:var(--brand)}
.periodemeny{
  position:absolute;right:0;top:calc(100% + 8px);z-index:40;width:270px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:10px;box-shadow:0 12px 32px rgba(14,27,77,.16);text-align:left;
}
#periode-forslag button{
  display:block;width:100%;text-align:left;padding:9px 12px;margin:0;
  background:none;border:0;border-radius:9px;cursor:pointer;
  font-weight:500;font-size:.88rem;line-height:1.2;font-family:inherit;color:var(--ink);
}
#periode-forslag button:hover{background:var(--paper)}
#periode-forslag button[aria-current="true"]{background:#F0F0F3;font-weight:600}
.periodemeny .egendef{
  display:flex;gap:10px;margin:10px 2px 12px;padding-top:12px;
  border-top:1px solid var(--line);
}
.periodemeny .egendef .felt{margin:0;flex:1 1 0;min-width:0}
.periodemeny .egendef label{font-size:.72rem}
.periodemeny .egendef input{min-height:38px;padding:6px 10px;font-size:.84rem;width:100%}
.periodemeny .knapper{display:flex;justify-content:flex-end;gap:8px;padding:0 2px 2px}
.periodemeny .knapper .handling{margin:0}
.admaal .tomtall{
  grid-column:1/-1;margin:0;padding:6px 2px;
  font-size:.8rem;color:var(--ink-soft);
}