/* ═══ LAG 1 — hentet ordrett ut av base.html 26. august 2026 ═══ */
  :root{
    --ink:#0f172a;--sub:#64748b;--line:#e2e8f0;--bg:#f1f5f9;--card:#fff;
    --accent:#4f46e5;--accent-l:#eef2ff;--accent-b:#c7d2fe;
    --ok:#059669;--ok-bg:#ecfdf5;--ok-b:#a7f3d0;
    --warn:#b45309;--warn-bg:#fffbeb;--warn-b:#fde68a;
    --bad:#b91c1c;--bad-bg:#fef2f2;--bad-b:#fecaca;
  }
  @media (prefers-color-scheme:dark){
    :root{--ink:#e2e8f0;--sub:#94a3b8;--line:#334155;--bg:#0b1220;--card:#131c2e;
          --accent:#818cf8;--accent-l:#1e1b4b;--accent-b:#4338ca;
          --ok:#34d399;--ok-bg:#062e24;--ok-b:#065f46;
          --warn:#fbbf24;--warn-bg:#3a2606;--warn-b:#92400e;
          --bad:#f87171;--bad-bg:#3b1010;--bad-b:#991b1b;}
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
       background:var(--bg);color:var(--ink);line-height:1.55;font-size:16px;}
  .wrap{max-width:860px;margin:0 auto;padding:0 16px 60px;}
  /* ---- Toppen: navn øverst, meny under. Alltid lik, på hver side. ----
     Før lå menyen i to Jinja-blokker som hver side kunne overstyre, og de
     gjorde det: femte plass var «Oversikt», «Transaksjoner», «Avbryt»,
     «Amex-CSV», «Banker» eller «Kontoer» avhengig av hvor du var. Nå kommer
     den fra én liste i main.py, og sidene kan ikke røre den. */
  header{background:var(--accent);color:#fff;position:sticky;top:0;z-index:10;
         box-shadow:0 1px 10px rgba(15,23,42,.18);}
  header .topp{max-width:860px;margin:0 auto;display:flex;align-items:center;
               gap:12px;padding:13px 16px 11px;}
  header a.brand{color:#fff;text-decoration:none;font-weight:800;font-size:1.08rem;
                 letter-spacing:-.01em;display:flex;align-items:center;gap:7px;}
  header .spacer{flex:1;}
  header .hvem{font-size:.78rem;color:#c7d2fe;}
  /* Menyen ruller sidelengs på telefon i stedet for å brekke i flere rader —
     rekkefølgen blir da den samme uansett skjermbredde. */
  /* ───────────────────── SIDEMENY ─────────────────────
     Kollapsbar, uten en linje JavaScript. Bryteren er en avkryssingsboks som
     ligger FØR sidemenyen i DOM-en, så `:checked ~` kan style den. Grunnen:
     tre feil i et rutenett slapp gjennom fordi JS ikke ble testet, og en meny
     som ikke virker uten JS er en meny som en dag ikke virker.

     Undermenyene er <details>. De husker ikke seg selv, men den som hører til
     siden du står på står åpen — det er `open` fra malen. */
  #meny-bryter{position:absolute;opacity:0;pointer-events:none;}
  .skall{display:flex;min-height:calc(100vh - 52px);}
  nav.side{background:#1e2537;color:#dbe3ff;width:222px;flex:0 0 222px;
           transition:flex-basis .16s ease,width .16s ease;overflow:hidden;
           padding:10px 0 24px;}
  nav.side .gruppe{margin:1px 8px;}
  nav.side a,nav.side summary{display:flex;align-items:center;gap:9px;
      color:#c3cdf0;text-decoration:none;font-size:.9rem;font-weight:600;
      padding:9px 11px;border-radius:8px;cursor:pointer;white-space:nowrap;}
  nav.side summary{list-style:none;}
  nav.side summary::-webkit-details-marker{display:none;}
  nav.side summary::after{content:"›";margin-left:auto;opacity:.5;
      transition:transform .16s ease;}
  nav.side details[open]>summary::after{transform:rotate(90deg);}
  nav.side a:hover,nav.side summary:hover{background:rgba(255,255,255,.07);color:#fff;}
  nav.side .ikon{font-size:1.02rem;width:1.2rem;text-align:center;flex:0 0 auto;}
  nav.side .aktiv>summary,nav.side a.aktiv{background:var(--accent);color:#fff;}
  nav.side .under{margin:1px 0 6px 30px;display:flex;flex-direction:column;gap:1px;}
  nav.side .under a{font-size:.85rem;font-weight:500;padding:7px 10px;}
  nav.side .under a.aktiv{background:rgba(255,255,255,.13);color:#fff;}
  nav.side .merke{background:#fbbf24;color:#42280a;font-size:.68rem;font-weight:800;
      min-width:17px;height:17px;border-radius:9px;display:inline-flex;
      align-items:center;justify-content:center;padding:0 5px;margin-left:auto;}
  /* Sammenslått: bare ikonene. Teksten skjules, ikke slettes — skjermlesere
     og tastaturnavigasjon skal fortsatt finne den. */
  #meny-bryter:checked ~ .skall nav.side{width:52px;flex-basis:52px;}
  #meny-bryter:checked ~ .skall nav.side .tekst,
  #meny-bryter:checked ~ .skall nav.side .under,
  #meny-bryter:checked ~ .skall nav.side summary::after,
  #meny-bryter:checked ~ .skall nav.side .merke{display:none;}
  #meny-bryter:checked ~ .skall nav.side a,
  #meny-bryter:checked ~ .skall nav.side summary{justify-content:center;padding:9px 0;}
  label.menyknapp{color:#fff;cursor:pointer;font-size:1.15rem;line-height:1;
      padding:6px 9px;border-radius:8px;user-select:none;}
  label.menyknapp:hover{background:rgba(255,255,255,.14);}
  .innhold{flex:1 1 auto;min-width:0;}
  /* På telefon ligger menyen over innholdet i stedet for å spise bredden. */
  @media (max-width:720px){
    nav.side{position:fixed;left:0;top:52px;bottom:0;z-index:20;width:222px;
             flex-basis:222px;box-shadow:2px 0 14px rgba(0,0,0,.3);}
    #meny-bryter:not(:checked) ~ .skall nav.side{transform:translateX(-100%);}
    #meny-bryter:checked ~ .skall nav.side{width:222px;flex-basis:222px;
                                           transform:none;}
    #meny-bryter:checked ~ .skall nav.side .tekst,
    #meny-bryter:checked ~ .skall nav.side .under,
    #meny-bryter:checked ~ .skall nav.side .merke{display:flex;}
    #meny-bryter:checked ~ .skall nav.side a,
    #meny-bryter:checked ~ .skall nav.side summary{justify-content:flex-start;
                                                   padding:9px 11px;}
  }
  h1{font-size:1.5rem;margin:26px 0 6px;letter-spacing:-.02em;}
  h2{font-size:1.14rem;margin:28px 0 8px;}
  p.sub{color:var(--sub);margin:0 0 18px;font-size:.94rem;}
  .card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:15px;}
  .card.ok{border-color:var(--ok-b);background:var(--ok-bg);}
  .card.warn{border-color:var(--warn-b);background:var(--warn-bg);}
  .card.bad{border-color:var(--bad-b);background:var(--bad-bg);}
  .card h3{margin:0 0 8px;font-size:1.02rem;}
  .card p{margin:0 0 9px;font-size:.93rem;}
  .card p:last-child{margin-bottom:0;}
  label{display:block;font-weight:700;font-size:.86rem;margin:0 0 5px;}
  label .hint{display:block;font-weight:400;color:var(--sub);font-size:.83rem;margin-top:2px;}
  input[type=text],input[type=number],select{
    width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;
    font-size:1rem;background:var(--card);color:var(--ink);font-family:inherit;}
  input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);}
  .field{margin-bottom:16px;}
  .check{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;}
  .check input{width:20px;height:20px;margin:2px 0 0;flex-shrink:0;}
  .check label{margin:0;font-weight:600;}
  button,.btn{display:inline-block;background:var(--accent);color:#fff;border:none;
    padding:14px 22px;border-radius:11px;font-size:1rem;font-weight:700;cursor:pointer;
    text-decoration:none;text-align:center;font-family:inherit;}
  button:active,.btn:active{transform:translateY(1px);}
  button.wide,.btn.wide{display:block;width:100%;}
  button.ghost,.btn.ghost{background:transparent;color:var(--accent);border:1.5px solid var(--accent-b);}
  button.danger{background:var(--bad);}
  button.small,.btn.small{padding:7px 13px;font-size:.86rem;border-radius:8px;}
  .drop{border:2.5px dashed var(--accent-b);border-radius:16px;padding:34px 20px;text-align:center;
        background:var(--accent-l);cursor:pointer;transition:.15s;}
  .drop.over{border-color:var(--accent);background:var(--card);}
  .drop .big{font-size:2.2rem;margin-bottom:8px;}
  .drop .t{font-weight:700;font-size:1.05rem;margin-bottom:4px;}
  .drop .s{color:var(--sub);font-size:.88rem;}
  .drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;}
  .fname{margin-top:12px;font-size:.92rem;font-weight:700;color:var(--accent);word-break:break-all;}
  table{width:100%;border-collapse:collapse;font-size:.86rem;}
  th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top;}
  th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--sub);font-weight:700;}
  td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
  .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -18px;padding:0 18px;}
  .pill{display:inline-block;font-size:.7rem;font-weight:800;padding:3px 8px;border-radius:6px;white-space:nowrap;}
  .pill.ny{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-b);}
  .pill.dupe{background:var(--bg);color:var(--sub);border:1px solid var(--line);}
  .pill.problem{background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad-b);}
  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:10px;margin:16px 0;}
  .stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px 10px;text-align:center;}
  .stat .n{font-size:1.5rem;font-weight:800;line-height:1.15;}
  .stat .l{font-size:.73rem;color:var(--sub);text-transform:uppercase;letter-spacing:.04em;margin-top:2px;}
  .stat.ok .n{color:var(--ok);} .stat.bad .n{color:var(--bad);} .stat.warn .n{color:var(--warn);}
  code{background:var(--bg);padding:1.5px 5px;border-radius:4px;font-size:.85em;
       font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all;}
  .muted{color:var(--sub);font-size:.87rem;}
  .row-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px;}
  ul.tight{margin:9px 0 0;padding-left:20px;} ul.tight li{margin-bottom:6px;font-size:.9rem;}
  pre.err{background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad-b);padding:12px;
          border-radius:10px;font-size:.8rem;overflow-x:auto;white-space:pre-wrap;}
  .cta{padding:18px 0 6px;border-top:1px solid var(--line);margin-top:22px;}
  /* På smale skjermer: skjul de minst viktige kolonnene så beløpet får plass */
  @media (max-width:520px){
    table.compact th.hide-sm,table.compact td.hide-sm{display:none;}
    th,td{padding:9px 6px;}
  }

/* ══════════════════════════════════════════════════════════════════════
   LAG 2 — systemet malene manglet
   ═══════════════════════════════════════════════════════════════════════

   Målt 26. august 2026: de 21 malene hadde 438 inline `style="…"`, og
   44 % av dem (192) var ren avstandsjustering — `margin` og `margin-top`.
   88 var `font-size`, i fem varianter av «litt mindre» (.78 .86 .87 .88 .9).

   Det er ikke stygg CSS. Det er FRAVÆR AV ET SYSTEM: hvert element måtte
   dytte seg selv på plass fordi ingenting rundt det gjorde jobben.

   Lag 2 fikser årsaken, ikke symptomet:

     .stack   layouten setter avstanden, ikke elementet   → 192 marginer bort
     .t-*     fire trinn i stedet for fem tilfeldigheter  →  88 font-sizes bort
     resten   navn på det som faktisk gjentok seg

   REGEL FRAMOVER: skriver du `style="…"` i en mal, mangler det en klasse
   her. Legg den til her i stedet — ellers vokser rotet tilbake.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* Typeskala — fire trinn. Ikke finn opp et femte. */
  --t-xs:.75rem; --t-sm:.86rem; --t-md:.93rem; --t-lg:1.05rem;
  /* Avstandsskala */
  --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:26px;
}

/* ── Avstand: forelderen bestemmer, barnet holder kjeft ───────────────
   `.stack` gir jevn luft mellom barna og nuller barnas egne marginer, så
   en <p> og en <h2> etter hverandre får SAMME avstand. Det er nettopp den
   uforutsigbarheten de 192 inline-marginene kompenserte for. */
.stack,.stack-xs,.stack-md,.stack-lg{display:flow-root;}
.stack>*,.stack-xs>*,.stack-md>*,.stack-lg>*{margin-block:0;}
.stack-xs>*+*{margin-block-start:var(--r-xs);}
.stack>*+*{margin-block-start:var(--r-sm);}
.stack-md>*+*{margin-block-start:var(--r-md);}
.stack-lg>*+*{margin-block-start:var(--r-lg);}

/* ── Rader: flex med gap, aldri marginer mellom knapper ─────────────── */
.row{display:flex;align-items:center;gap:var(--r-sm);flex-wrap:wrap;}
.row-top{align-items:flex-start;}
.row-end{justify-content:flex-end;}
.spread{display:flex;align-items:center;justify-content:space-between;
        gap:var(--r-sm);flex-wrap:wrap;}
.grow{flex:1 1 auto;min-width:0;}

/* ── Typografi ────────────────────────────────────────────────────────
   `em` ikke `rem` på .t-*, så et lite tall inne i en liten linje ikke
   plutselig blir større enn linja rundt. */
.t-xs{font-size:var(--t-xs);} .t-sm{font-size:var(--t-sm);}
.t-md{font-size:var(--t-md);} .t-lg{font-size:var(--t-lg);}
.bold{font-weight:700;} .black{font-weight:800;}
.c-sub{color:var(--sub);} .c-ok{color:var(--ok);}
.c-warn{color:var(--warn);} .c-bad{color:var(--bad);}

/* ── Tall skal stå under hverandre ────────────────────────────────────
   tabular-nums gjør at sifrene får lik bredde, så 1 234 og 9 876 flukter.
   Uten den danser kolonnen. */
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.right{text-align:right;} .center{text-align:center;}
.nowrap{white-space:nowrap;}

/* ── Diverse som faktisk gjentok seg ──────────────────────────────────
   `.flush` trenger !important: den brukes til å overstyre marginer som
   ligger på elementtypen selv (p, h2, ul) fra lag 1. */
.flush{margin:0 !important;}
.inline{display:inline;} .hidden{display:none;}
.click{cursor:pointer;}
/* Brede tabeller og diagrammer ruller inni sin egen boks — aldri hele sida. */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}
.smal{max-width:700px;}

/* ── Respekter den som har slått av bevegelse ─────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;
    animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}

/* ── Avstand oppover, i tre trinn ─────────────────────────────────────
   Et mellomsteg, ikke maalet. Malene hadde fem tilfeldige verdier for
   `margin-top` (4 6 8 10 12 14 16 18px); her blir de tre. Det RIKTIGE er
   `.stack` paa forelderen — da trenger ingen av dem aa finnes. Bruk .mt-*
   bare der elementet virkelig staar alene. */
.mt-xs{margin-block-start:var(--r-xs);}
.mt-sm{margin-block-start:var(--r-sm);}
.mt-md{margin-block-start:var(--r-md);}