:root {
    --rt-dyp:    #0B1530;
    --rt-navy:   #101F46;
    --rt-bla:    #0E2973;
    --rt-accent: #116DFF;
    --rt-hvit:   #FFFFFF;
    --rt-dempet: #9AA7C4;
    --kant:      rgba(255,255,255,.10);
    --kant-sterk:rgba(255,255,255,.20);
    --flate:     #142351;
    --flate2:    #1A2C61;
    --ok:        #3ECF8E;
    --vent:      #F0A93B;
    --fare:      #FF5470;
    --rod:       #E5243B;   /* TRYKK-knappen — --fare er for rosa til dette */
    --rod-mork:  #8E0F1C;
    --gull:      #E8B14C;
    --radius:    12px;
    --maks:      680px;
  }

  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  /* Må stå her: flere elementer setter display:flex, som ellers slår [hidden]. */
  [hidden] { display: none !important; }

  html, body {
    margin: 0; padding: 0;
    background: var(--rt-dyp);
    color: var(--rt-hvit);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px; line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
  }
  body {
    min-height: 100vh;
    padding-bottom: 40px;
    background:
      radial-gradient(1100px 620px at 50% -14%, rgba(17,109,255,.30), transparent 62%),
      radial-gradient(800px 460px at 100% 4%, rgba(14,41,115,.55), transparent 60%),
      var(--rt-dyp);
    background-attachment: fixed;
  }
  button, input, select, textarea { font: inherit; color: inherit; }
  a { color: var(--rt-accent); }

  .tall { font-variant-numeric: tabular-nums; }

  /* ---------------------------------------------------------------- topp -- */
  .topp {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    padding-top: calc(12px + env(safe-area-inset-top));
    background: rgba(11,21,48,.86);
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    border-bottom: 1px solid var(--kant);
  }
  .merke { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
  .hjul-logo { width: 30px; height: 30px; color: var(--rt-hvit); flex: 0 0 auto; }
  .ordmerke { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
  .ordmerke b {
    font-weight: 900; font-size: 19px; letter-spacing: -.02em;
  }
  .ordmerke span {
    font-weight: 300; font-size: 15px; letter-spacing: .16em;
    color: var(--rt-dempet);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  .skyld {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--kant-sterk);
    border-radius: 999px;
    padding: 6px 12px;
    cursor: pointer; flex: 0 0 auto;
    transition: background .15s, border-color .15s;
  }
  .skyld:hover { background: rgba(255,255,255,.11); }
  .skyld.har-gjeld { border-color: rgba(232,177,76,.55); background: rgba(232,177,76,.12); }
  .skyld.gjeldfri  { border-color: rgba(62,207,142,.45); background: rgba(62,207,142,.10); }
  .skyld-tekst { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
  .skyld-etikett { font-size: 10px; letter-spacing: .10em; text-transform: uppercase; color: var(--rt-dempet); }
  .skyld-sum { font-size: 16px; font-weight: 800; }
  .skyld.har-gjeld .skyld-sum { color: var(--gull); }
  .skyld.gjeldfri  .skyld-sum { color: var(--ok); }
  .skyld-pil { color: var(--rt-dempet); font-size: 12px; transition: transform .2s; }
  .skyld[aria-expanded="true"] .skyld-pil { transform: rotate(180deg); }

  /* -------------------------------------------------------------- skuff --- */
  .skuff {
    position: relative; z-index: 39;
    max-width: var(--maks); margin: 0 auto;
    padding: 4px 16px 16px;
    animation: skli .22s ease-out;
  }
  @keyframes skli { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

  /* --------------------------------------------------------------- main --- */
  main { max-width: var(--maks); margin: 0 auto; padding: 18px 16px 8px; }

  .laster { display: grid; place-items: center; padding: 60px 0; }
  .hjul-spinner { width: 44px; height: 44px; color: rgba(255,255,255,.35); animation: snurr 2.6s linear infinite; }
  @keyframes snurr { to { transform: rotate(360deg); } }

  .kort {
    background: linear-gradient(180deg, var(--flate2), var(--flate));
    border: 1px solid var(--kant);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 16px;
  }
  .kort-tittel {
    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--rt-dempet); margin: 0 0 12px;
    display: flex; align-items: center; gap: 8px;
  }
  .kort-tittel .antall {
    background: var(--rt-accent); color: #fff; border-radius: 999px;
    padding: 1px 7px; font-size: 11px; letter-spacing: 0;
  }

  .banner {
    display: flex; gap: 12px; align-items: flex-start;
    background: rgba(240,169,59,.10); border: 1px solid rgba(240,169,59,.35);
    border-left: 4px solid var(--vent);
    border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px;
  }
  .banner .ikon { font-size: 20px; line-height: 1.2 }
  .banner .tx { font-size: 14px; line-height: 1.5 }
  .banner .tx b { display: block; color: var(--vent); margin-bottom: 2px; font-size: 15px }
  .banner .tx code {
    background: rgba(0,0,0,.28); border-radius: 5px; padding: 1px 6px;
    font-size: 13px; overflow-wrap: anywhere;
  }

  /* --------------------------------------------------------- innmelding --- */
  .hero { position: relative; overflow: hidden; padding: 20px 16px 18px; }
  .hero .hjul-vann {
    position: absolute; right: -46px; top: -46px;
    width: 190px; height: 190px; color: #fff; opacity: .045; pointer-events: none;
  }
  .hero h1 {
    position: relative;
    margin: 0 0 16px; font-size: 22px; font-weight: 800; letter-spacing: -.02em;
  }
  .hero h1 small {
    display: block; font-size: 12px; font-weight: 400; letter-spacing: .04em;
    color: var(--rt-dempet); margin-top: 3px;
  }

  .felt { position: relative; margin-bottom: 14px; }
  .felt label {
    display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--rt-dempet); margin-bottom: 6px;
  }
  .felt input, .felt select, .felt textarea {
    width: 100%; padding: 13px 14px;
    background: rgba(0,0,0,.28);
    border: 1px solid var(--kant-sterk);
    border-radius: 10px;
    color: var(--rt-hvit); font-size: 16px;
    appearance: none; -webkit-appearance: none;
  }
  .felt select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%239AA7C4' stroke-width='2'/></svg>");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 12px;
    padding-right: 38px;
  }
  .felt select option { background: var(--rt-navy); color: #fff; }
  .felt input::placeholder, .felt textarea::placeholder { color: rgba(154,167,196,.65); }
  .felt input:focus, .felt select:focus, .felt textarea:focus {
    outline: none; border-color: var(--rt-accent);
    box-shadow: 0 0 0 3px rgba(17,109,255,.28);
  }
  .felt-rad { display: flex; flex-wrap: wrap; gap: 10px; }
  .felt-rad .felt { flex: 1 1 180px; }
  .felt-rad .felt.smal { flex: 0 0 116px; }

  .epost-boks { display: flex; gap: 8px; align-items: stretch; }
  .epost-boks input {
    flex: 1; min-width: 0; padding: 13px 14px;
    background: rgba(0,0,0,.28); border: 1px solid var(--kant-sterk);
    border-radius: 10px; color: var(--rt-hvit); font-size: 15px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  .epost-boks input:focus { outline: none; border-color: var(--rt-accent); }
  .epost-boks .knapp { flex: 0 0 auto; }
  .hjelp { font-size: 13px; color: var(--rt-dempet); line-height: 1.5; margin: 10px 0 14px; }
  .hjelp b { color: var(--rt-hvit); }

  .chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
  .chip {
    background: rgba(255,255,255,.06); border: 1px solid var(--kant);
    color: var(--rt-dempet); border-radius: 999px;
    padding: 6px 11px; font-size: 13px; cursor: pointer;
    transition: all .14s;
  }
  .chip:hover { color: #fff; border-color: var(--kant-sterk); background: rgba(255,255,255,.11); }
  .chip.valgt { background: var(--rt-accent); border-color: var(--rt-accent); color: #fff; }

  .knapp {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid var(--kant-sterk); background: rgba(255,255,255,.07);
    color: var(--rt-hvit); border-radius: 10px;
    padding: 10px 14px; font-weight: 600; font-size: 14px; cursor: pointer;
    transition: all .14s;
  }
  .knapp:hover { background: rgba(255,255,255,.13); }
  .knapp:disabled { opacity: .45; cursor: not-allowed; }
  .knapp.liten { padding: 7px 11px; font-size: 13px; border-radius: 8px; }
  .knapp.ok    { background: rgba(62,207,142,.16); border-color: rgba(62,207,142,.5); color: var(--ok); }
  .knapp.fare  { background: rgba(255,84,112,.14); border-color: rgba(255,84,112,.45); color: var(--fare); }
  .knapp.gull  { background: rgba(232,177,76,.14); border-color: rgba(232,177,76,.45); color: var(--gull); }

  .knapp-primar {
    width: 100%; margin-top: 4px;
    background: var(--rt-accent); border: none; color: #fff;
    border-radius: 10px; padding: 16px;
    font-size: 15px; font-weight: 800; letter-spacing: .10em; text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(17,109,255,.35);
    transition: transform .1s, box-shadow .18s, background .18s;
  }
  .knapp-primar:hover { background: #2A7DFF; }
  .knapp-primar:active { transform: translateY(1px) scale(.995); }
  .knapp-primar:disabled { opacity: .5; box-shadow: none; cursor: not-allowed; }

  /* --------------------------------------------------------------- kassa -- */
  .kassa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--kant); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--kant); }
  .kassa-boks { background: var(--flate); padding: 14px 10px; text-align: center; }
  .kassa-boks .etikett { font-size: 10px; letter-spacing: .10em; text-transform: uppercase; color: var(--rt-dempet); }
  .kassa-boks .verdi { font-size: 19px; font-weight: 800; margin-top: 3px; }
  .kassa-boks .verdi.gull { color: var(--gull); }
  .kassa-boks .verdi.ok { color: var(--ok); }

  .vipps-knapp {
    width: 100%; margin-top: 12px;
    background: #FF5B24; border: none; color: #fff;
    border-radius: 10px; padding: 13px;
    font-size: 14px; font-weight: 700; letter-spacing: .04em; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
  }
  .vipps-knapp:hover { background: #FF6E3D; }
  a.vipps-knapp { text-decoration: none; box-sizing: border-box; }
  .vipps-hint {
    font-size: 12px; color: var(--rt-dempet); text-align: center;
    margin-top: 6px; line-height: 1.4;
  }
  .vipps-hint b { color: var(--rt-hvit); font-size: 13px; }


  .versting-liste { list-style: none; margin: 0; padding: 0; }
  .versting {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 0; border-bottom: 1px solid var(--kant);
  }
  .versting:last-child { border-bottom: none; }
  .versting .plass { width: 24px; text-align: center; font-size: 16px; }
  .versting .navn { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .versting .antall { font-size: 12px; color: var(--rt-dempet); }
  .versting .sum { font-weight: 800; color: var(--gull); }
  .versting.meg .navn::after { content: ' (deg)'; color: var(--rt-dempet); font-weight: 400; font-size: 12px; }

  /* ---------------------------------------------------------- botlinjer --- */
  .segment {
    display: flex; gap: 2px; background: rgba(0,0,0,.28);
    border: 1px solid var(--kant); border-radius: 10px; padding: 3px; margin-bottom: 12px;
  }
  .segment button {
    flex: 1; background: none; border: none; color: var(--rt-dempet);
    padding: 8px 4px; border-radius: 7px; font-size: 13px; font-weight: 600; cursor: pointer;
  }
  .segment button.aktiv { background: var(--rt-accent); color: #fff; }

  .oppgjor-boks {
    border: 1px solid rgba(62,207,142,.28); border-radius: 10px;
    background: rgba(62,207,142,.06);
    padding: 12px 13px; margin-bottom: 12px;
  }
  .oppgjor {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 0; border-bottom: 1px solid var(--kant);
  }
  .oppgjor:last-child { border-bottom: none; }
  .oppgjor .navn { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .oppgjor .antall { font-size: 12px; color: var(--rt-dempet); white-space: nowrap; }
  .oppgjor .sum { font-weight: 800; color: var(--gull); white-space: nowrap; }

  .bot {
    border: 1px solid var(--kant); border-radius: 10px;
    background: rgba(0,0,0,.18);
    padding: 12px 13px; margin-bottom: 10px;
  }
  .bot.protest { border-color: rgba(240,169,59,.5); }
  .bot-topp { display: flex; align-items: flex-start; gap: 10px; }
  .bot-hode { flex: 1; min-width: 0; }
  .bot-navn { font-weight: 800; font-size: 15px; }
  .bot-grunn { margin-top: 2px; overflow-wrap: anywhere; }
  .bot-meta { margin-top: 5px; font-size: 12px; color: var(--rt-dempet); }
  .bot-hoyre { text-align: right; flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
  .bot-belop { font-weight: 800; font-size: 16px; white-space: nowrap; }

  .merkelapp {
    display: inline-block; font-size: 10px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 999px; border: 1px solid;
  }
  .merkelapp.venter   { color: var(--vent); border-color: rgba(240,169,59,.45); background: rgba(240,169,59,.12); }
  .merkelapp.godkjent { color: var(--ok);   border-color: rgba(62,207,142,.45); background: rgba(62,207,142,.12); }
  .merkelapp.avvist   { color: var(--fare); border-color: rgba(255,84,112,.42); background: rgba(255,84,112,.12); }
  .merkelapp.protest  { color: var(--vent); border-color: rgba(240,169,59,.6);  background: rgba(240,169,59,.18); }
  .merkelapp.betalt   { color: var(--ok);   border-color: rgba(62,207,142,.45); background: rgba(62,207,142,.12); }

  .protest-boks {
    margin-top: 9px; padding: 9px 11px; border-radius: 8px;
    background: rgba(240,169,59,.10); border: 1px solid rgba(240,169,59,.30);
    font-size: 13px;
  }
  .protest-boks b { color: var(--vent); }

  .handlinger { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
  .handlinger .belop-inn {
    width: 96px; padding: 7px 10px; border-radius: 8px;
    background: rgba(0,0,0,.32); border: 1px solid var(--kant-sterk); color: #fff;
  }
  .handlinger .belop-inn:focus { outline: none; border-color: var(--rt-accent); }

  /* ------------------------------------------------------- reaksjoner ---- */
  .reaksjoner {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--kant);
  }
  .reak {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(255,255,255,.05); border: 1px solid var(--kant);
    border-radius: 999px; padding: 3px 9px; font-size: 14px; cursor: pointer;
    transition: all .12s;
  }
  .reak:hover { background: rgba(255,255,255,.12); }
  .reak.mine { background: rgba(17,109,255,.20); border-color: rgba(17,109,255,.65); }
  .reak .n { font-size: 12px; font-weight: 700; color: var(--rt-dempet); }
  .reak.mine .n { color: #fff; }
  .reak-legg {
    color: var(--rt-dempet); font-size: 13px; padding: 3px 9px;
    border: 1px dashed var(--kant-sterk); border-radius: 999px; background: none; cursor: pointer;
  }
  .reak-legg:hover { color: #fff; }
  .reak-velger { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; margin-top: 6px; }
  .reak-velger button {
    background: rgba(255,255,255,.06); border: 1px solid var(--kant);
    border-radius: 8px; padding: 5px 9px; font-size: 17px; cursor: pointer; line-height: 1;
  }
  .reak-velger button:hover { background: rgba(255,255,255,.15); }

  .tom {
    text-align: center; color: var(--rt-dempet); font-size: 14px;
    padding: 22px 10px; border: 1px dashed var(--kant); border-radius: 10px;
  }

  /* --------------------------------------------------------------- bunn --- */
  .bunn {
    max-width: var(--maks); margin: 24px auto 0; padding: 16px;
    display: flex; align-items: center; gap: 9px;
    border-top: 1px solid var(--kant);
    color: var(--rt-dempet); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  }
  .hjul-bunn { width: 16px; height: 16px; color: var(--rt-dempet); opacity: .7; }
  .bunn span { flex: 1; }
  .lyd-knapp { background: none; border: none; cursor: pointer; font-size: 15px; opacity: .75; padding: 2px 4px; }
  .lyd-knapp:hover { opacity: 1; }
  .lyd-knapp.av { opacity: .3; }

  /* -------------------------------------------------------------- toast --- */
  .toast {
    position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 14px);
    background: var(--rt-navy); border: 1px solid var(--kant-sterk);
    color: #fff; padding: 11px 18px; border-radius: 999px;
    font-size: 14px; font-weight: 600; max-width: 88vw; text-align: center;
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
    z-index: 90; box-shadow: 0 10px 30px rgba(0,0,0,.45);
  }
  .toast.vis { opacity: 1; transform: translate(-50%, 0); }
  .toast.feil { border-color: rgba(255,84,112,.6); color: var(--fare); }

  /* ---------------------------------------------------------- konfetti ---- */
  #konfetti {
    position: fixed; inset: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 80; display: none;
  }
  #konfetti.kjorer { display: block; }

  @media (prefers-reduced-motion: reduce) {
    .hjul-spinner { animation: none; }
    .skuff { animation: none; }
  }

  @media (max-width: 380px) {
    .ordmerke span { display: none; }
    .kassa-boks .verdi { font-size: 17px; }
  }

/* ======================================================== innlogging ==== */
.logg-inn-side {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center; padding: 24px;
}
.logg-inn {
  width: 100%; max-width: 380px;
  background: linear-gradient(180deg, var(--flate2), var(--flate));
  border: 1px solid var(--kant); border-radius: var(--radius);
  padding: 28px 24px; position: relative; overflow: hidden;
}
.logg-inn .hjul-vann {
  position: absolute; right: -40px; top: -40px;
  width: 170px; height: 170px; color: #fff; opacity: .05; pointer-events: none;
}
.logg-inn .topplogo { display: flex; justify-content: center; margin-bottom: 14px; }
.logg-inn .topplogo svg { width: 52px; height: 52px; color: #fff; }
.logg-inn .ordmerke { justify-content: center; margin-bottom: 4px; }
.logg-inn .under {
  text-align: center; color: var(--rt-dempet); font-size: 13px; margin-bottom: 22px;
}
.logg-inn .feilboks {
  background: rgba(255,84,112,.12); border: 1px solid rgba(255,84,112,.4);
  color: var(--fare); border-radius: 8px; padding: 10px 12px;
  font-size: 13px; margin-bottom: 14px; line-height: 1.45;
}
.logg-inn .feilboks[hidden] { display: none !important; }

.status-kort dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; }
.status-kort dt { color: var(--rt-dempet); font-size: 13px; }
.status-kort dd { margin: 0; font-weight: 600; font-size: 13px; text-align: right; }
.status-kort dd.ja { color: var(--ok); }
.status-kort dd.nei { color: var(--rt-dempet); font-weight: 400; }

/* Utlogging bor i bunnlinja — sjelden brukt, skal ikke stjele plass i toppen. */
.bunn .logg-ut {
  background: none; border: none; cursor: pointer; padding: 2px 4px;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--rt-dempet); opacity: .75;
}
.bunn .logg-ut:hover { opacity: 1; color: var(--rt-hvit); }

/* ---------------------------------------------------------- innvielse --- */
/* Ligger over konfetti-canvaset (z-index 80), så teksten leses gjennom regnet. */
.velkomst {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: 28px;
  background: rgba(11, 21, 48, .55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .9s ease; pointer-events: none;
}
.velkomst.vis { opacity: 1; pointer-events: auto; }
.velkomst p {
  margin: 0; max-width: 420px; text-align: center;
  font-size: 27px; font-weight: 800; line-height: 1.25;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .65);
}
.velkomst small {
  display: block; margin-top: 12px;
  font-size: 13px; font-weight: 400; color: var(--rt-dempet);
}

@media (prefers-reduced-motion: reduce) {
  .velkomst { transition: none; }
}

/* ------------------------------------------------------ TRYKK-aksjonen --- */
/* Mobil først. Knappen skalerer med skjermbredden og stopper på 280 px.       */
.aksjon { text-align: center; padding: 20px 16px 18px; }
.aksjon-apen {
  border-color: rgba(229,36,59,.45);
  background:
    radial-gradient(420px 260px at 50% 0%, rgba(229,36,59,.20), transparent 70%),
    linear-gradient(180deg, var(--flate2), var(--flate));
}
.aksjon-trygg { border-color: rgba(62,207,142,.40); }
.aksjon-sent  { border-color: rgba(229,36,59,.45); }

.aksjon-overskrift {
  margin: 0 0 14px; font-size: 20px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2;
}
.aksjon-overskrift small {
  display: block; margin-top: 4px;
  font-size: 13px; font-weight: 400; color: var(--rt-dempet); letter-spacing: 0;
}

.trykk-knapp {
  position: relative; display: grid; place-items: center;
  width: min(68vw, 280px); height: min(68vw, 280px);
  margin: 6px auto 26px; padding: 0;
  border: none; border-radius: 50%; cursor: pointer;
  color: #fff; font: inherit;
  background: radial-gradient(circle at 35% 28%, #FF7282 0%, var(--rod) 46%, #B0122A 100%);
  box-shadow:
    0 10px 0 var(--rod-mork),
    0 20px 44px rgba(229,36,59,.45),
    inset 0 -10px 22px rgba(0,0,0,.25),
    inset 0 8px 16px rgba(255,255,255,.22);
  transition: transform .07s ease, box-shadow .07s ease;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.trykk-knapp span {
  font-size: clamp(2.4rem, 13vw, 4.2rem); font-weight: 900; letter-spacing: .05em;
  text-shadow: 0 3px 0 rgba(0,0,0,.22);
}
/* Pulsring rundt knappen, så den roper selv når ingen rører den. */
.trykk-knapp::after {
  content: ''; position: absolute; inset: -10px; border-radius: 50%;
  border: 3px solid var(--rod); opacity: 0; pointer-events: none;
  animation: trykk-puls 1.8s ease-out infinite;
}
@keyframes trykk-puls {
  0%   { transform: scale(.94); opacity: .75; }
  100% { transform: scale(1.18); opacity: 0; }
}
.trykk-knapp:active {
  transform: translateY(8px);
  box-shadow:
    0 2px 0 var(--rod-mork),
    0 8px 20px rgba(229,36,59,.35),
    inset 0 -6px 16px rgba(0,0,0,.28),
    inset 0 8px 16px rgba(255,255,255,.18);
}
.trykk-knapp:disabled { cursor: progress; filter: saturate(.7) brightness(.9); }
.trykk-knapp:disabled::after { animation: none; }
.trykk-knapp:focus-visible { outline: 3px solid #fff; outline-offset: 8px; }

.nedtelling {
  font-size: clamp(2rem, 11vw, 3.2rem); font-weight: 900; line-height: 1;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.nedtelling.snart { color: #FF4D5E; animation: blunk 1s steps(2, start) infinite; }
@keyframes blunk { to { opacity: .55; } }
.frist-tekst { margin-top: 6px; font-size: 13px; color: var(--rt-dempet); }

.aksjon-trygg .nedtelling { font-size: clamp(1.5rem, 8vw, 2rem); margin-top: 12px; }

.aksjon-status { font-size: 22px; font-weight: 800; line-height: 1.2; }
.aksjon-status small {
  display: block; margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--rt-dempet);
}
.aksjon-sent .aksjon-status { color: #FF4D5E; }
.aksjon-trygg .aksjon-status { color: var(--ok); }

.gapestokk-tall { margin-top: 18px; font-size: 14px; color: var(--rt-dempet); }
.gapestokk-tall b { color: var(--rt-hvit); font-size: 16px; }
.gapestokk {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px;
}
.gapestokk-tittel {
  flex-basis: 100%; font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rt-dempet); margin-bottom: 2px;
}
.gapestokk-navn {
  font-size: 12px; line-height: 1; padding: 6px 10px; border-radius: 999px;
  background: rgba(229,36,59,.14); border: 1px solid rgba(229,36,59,.35); color: #FFB3BC;
}
.gapestokk-alle { margin-top: 8px; font-size: 14px; color: var(--ok); }

/* Popupen ligger under konfetti-canvaset (80) og toasten (90), over toppen (40). */
.aksjon-popup {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center; overflow-y: auto;
  padding:
    calc(20px + env(safe-area-inset-top))   calc(16px + env(safe-area-inset-right))
    calc(20px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  background: rgba(6, 11, 26, .86);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .25s ease;
}
.aksjon-popup.vis { opacity: 1; }
.aksjon-popup-innhold {
  position: relative; width: 100%; max-width: 420px;
  text-align: center; padding: 44px 4px 8px;
}
.aksjon-popup h2 {
  margin: 0 0 20px; font-size: clamp(1.7rem, 8.5vw, 2.3rem); font-weight: 900;
  letter-spacing: -.02em; line-height: 1.1;
}
.aksjon-popup h2 small {
  display: block; margin-top: 8px;
  font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--rt-dempet);
}
.aksjon-lukk {
  position: absolute; top: 0; right: 0;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid var(--kant-sterk);
  color: #fff; font-size: 18px; line-height: 1; cursor: pointer;
}
.aksjon-lukk:hover { background: rgba(255,255,255,.16); }
body.popup-apen { overflow: hidden; }

@media (max-width: 380px) {
  .trykk-knapp { width: 62vw; height: 62vw; }
}
/* Lav skjerm (liten telefon, eller liggende): mindre knapp, så alt får plass. */
@media (max-height: 640px) {
  .trykk-knapp { width: min(52vw, 42vh); height: min(52vw, 42vh); margin-bottom: 20px; }
  .aksjon-popup-innhold { padding-top: 40px; }
  .aksjon-popup h2 { margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .trykk-knapp::after { animation: none; opacity: 0; }
  .nedtelling.snart { animation: none; }
  .aksjon-popup { transition: none; }
}

/* -------------------------------------------------------- kommentarer --- */
/* Tråden under en bot. På en kommentar finnes bare tommel opp og ned.       */
.kommentarer {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--kant);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.kommentar {
  width: 100%; background: rgba(0,0,0,.22);
  border: 1px solid var(--kant); border-radius: 10px; padding: 9px 11px;
}
.kommentar-hode {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 3px;
}
.kommentar-hode b { font-size: 13px; font-weight: 700; }
.kommentar-hode span { font-size: 11px; color: var(--rt-dempet); }
.kommentar-tekst { font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.kommentar-bunn { display: flex; align-items: center; gap: 6px; margin-top: 7px; }

.tommel {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.06); border: 1px solid var(--kant);
  border-radius: 999px; padding: 4px 10px; font-size: 14px; line-height: 1;
  color: inherit; cursor: pointer;
}
.tommel:hover { background: rgba(255,255,255,.12); }
.tommel.mine { background: rgba(17,109,255,.20); border-color: rgba(17,109,255,.65); }
.tommel .n { font-size: 12px; font-weight: 700; color: var(--rt-dempet); }
.tommel.mine .n { color: #fff; }

.kommentar-slett {
  margin-left: auto; background: none; border: none; cursor: pointer;
  font-size: 13px; color: var(--rt-dempet); padding: 4px 6px; border-radius: 8px;
}
.kommentar-slett:hover { color: var(--fare); background: rgba(255,84,112,.12); }

.kommentar-legg {
  background: none; border: 1px dashed var(--kant); border-radius: 999px;
  color: var(--rt-dempet); cursor: pointer; font: inherit;
  font-size: 12px; padding: 5px 11px;
}
.kommentar-legg:hover { color: #fff; border-color: var(--kant-sterk); }

.kommentar-skriv { display: flex; gap: 8px; width: 100%; }
.kommentar-skriv input {
  flex: 1; min-width: 0; padding: 10px 12px;
  background: rgba(0,0,0,.28); border: 1px solid var(--kant-sterk);
  border-radius: 10px; color: var(--rt-hvit); font: inherit; font-size: 14px;
}
.kommentar-skriv input::placeholder { color: var(--rt-dempet); }
.kommentar-skriv input:focus {
  outline: none; border-color: var(--rt-accent); background: rgba(0,0,0,.38);
}