/* ==========================================================
   ONVER-portalen
   Samma formspråk som onver.net: kräm, bläck, bärnsten (ON-lampan) och petrol.
   Det enda egna motivet är provisionsstegen (.ladder): 12 rutor som tänds när kunden betalar.
   ========================================================== */

@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('fonts/fraunces-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Work Sans'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('fonts/worksans-latin.woff2') format('woff2');
}

:root{
  --bg:#F2EDE3;
  --surface:#FBF8F2;
  --surface-2:#E9E1D2;
  --ink:#1C2127;
  --ink-soft:#535C67;
  --accent:#B9791E;
  --accent-ink:#241902;
  --accent-text:#8A5710;
  --accent-2:#1F6E63;
  --bad:#B3261E;
  --line:rgba(28,33,39,.14);
  --line-strong:rgba(28,33,39,.28);
  --shadow-lg:0 30px 60px -32px rgba(28,33,39,.38);
  --overlay:rgba(28,33,39,.55);
  --serif:'Fraunces','Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --sans:'Work Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --side:252px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#12161D; --surface:#181D25; --surface-2:#222932; --ink:#F1ECE1; --ink-soft:#A2AAB4;
    --accent:#E7A93B; --accent-ink:#1A1206; --accent-text:#E7A93B; --accent-2:#4FD0BE; --bad:#FF8A80;
    --line:rgba(241,236,225,.12); --line-strong:rgba(241,236,225,.26);
    --shadow-lg:0 30px 60px -28px rgba(0,0,0,.6); --overlay:rgba(6,8,10,.68);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#12161D; --surface:#181D25; --surface-2:#222932; --ink:#F1ECE1; --ink-soft:#A2AAB4;
  --accent:#E7A93B; --accent-ink:#1A1206; --accent-text:#E7A93B; --accent-2:#4FD0BE; --bad:#FF8A80;
  --line:rgba(241,236,225,.12); --line-strong:rgba(241,236,225,.26);
  --shadow-lg:0 30px 60px -28px rgba(0,0,0,.6); --overlay:rgba(6,8,10,.68);
  color-scheme:dark;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
p{ margin:0; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.12; margin:0; letter-spacing:-.012em; font-variation-settings:'opsz' 96; }
button{ font:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
[hidden]{ display:none !important; }

.skip-link{ position:absolute; left:-999px; top:12px; z-index:500; background:var(--accent); color:var(--accent-ink); padding:12px 18px; border-radius:2px; text-decoration:none; font-weight:500; }
.skip-link:focus{ left:16px; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.text-link{ color:var(--accent-2); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.text-link:hover{ text-decoration-thickness:2px; }
.muted{ color:var(--ink-soft); }
.num{ font-variant-numeric:tabular-nums; }
.nowrap{ white-space:nowrap; }
.right{ text-align:right; }
.small{ font-size:.88rem; }

/* ---------- knappar ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:10px 20px; border-radius:3px; border:1px solid transparent;
  font-family:var(--sans); font-size:.95rem; font-weight:500; line-height:1.2; text-decoration:none; cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, filter .15s ease; white-space:nowrap;
}
.btn-primary{ background:var(--accent); color:var(--accent-ink); }
.btn-primary:hover{ filter:brightness(1.07); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn-ghost:hover{ background:var(--surface-2); }
.btn-danger{ background:transparent; color:var(--bad); border-color:color-mix(in srgb, var(--bad) 45%, transparent); }
.btn-danger:hover{ background:color-mix(in srgb, var(--bad) 8%, transparent); }
.btn-sm{ min-height:36px; padding:7px 14px; font-size:.88rem; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }
.linklike{ background:none; border:0; padding:0; color:var(--accent-2); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }

/* ---------- varumärke ---------- */
.brand{ display:inline-flex; align-items:center; gap:10px; font-family:var(--serif); font-weight:600; font-size:1.25rem; letter-spacing:.01em; text-decoration:none; color:var(--ink); }
.brand-mark{ position:relative; width:28px; height:15px; border-radius:9px; background:var(--accent); flex:none; }
.brand-mark::after{ content:''; position:absolute; top:2px; right:2px; width:11px; height:11px; border-radius:50%; background:var(--surface); }

.theme-btn{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); border-radius:3px; cursor:pointer; }
.theme-btn:hover{ color:var(--ink); border-color:var(--line-strong); }
.theme-btn .icon-sun{ display:none; }
:root[data-theme="dark"] .theme-btn .icon-sun{ display:block; }
:root[data-theme="dark"] .theme-btn .icon-moon{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-btn .icon-sun{ display:block; }
  :root:not([data-theme="light"]) .theme-btn .icon-moon{ display:none; }
}
.menu-btn{ display:none; align-items:center; gap:10px; min-height:40px; padding:0 12px; border:1px solid var(--line); border-radius:3px; background:var(--surface); color:var(--ink); cursor:pointer; font-size:.9rem; }
.menu-lines{ position:relative; width:16px; height:10px; border-top:1.6px solid currentColor; border-bottom:1.6px solid currentColor; }
.menu-lines::after{ content:''; position:absolute; left:0; right:0; top:50%; border-top:1.6px solid currentColor; transform:translateY(-50%); }

/* ---------- skal: sidomeny + innehåll ---------- */
.shell{ display:grid; grid-template-columns:var(--side) minmax(0,1fr); min-height:100vh; }
.sidebar{
  position:sticky; top:0; height:100vh; overflow-y:auto; display:flex; flex-direction:column;
  background:var(--surface); border-right:1px solid var(--line); padding:22px 16px 18px;
}
.sidebar-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 8px 22px; }
.role-tag{ font-size:.78rem; color:var(--accent-2); border:1px solid currentColor; border-radius:20px; padding:1px 9px; }
.side-nav{ display:flex; flex-direction:column; gap:1px; }
.side-nav a, .side-link{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 10px 8px 12px; border-radius:3px; text-decoration:none; color:var(--ink-soft); font-size:.95rem;
  border-left:2px solid transparent;
}
.side-nav a:hover, .side-link:hover{ color:var(--ink); background:var(--bg); }
.side-nav a[aria-current="page"], .side-link[aria-current="page"]{ color:var(--ink); background:var(--bg); border-left-color:var(--accent); font-weight:500; }
.count{ font-size:.75rem; font-weight:600; min-width:22px; height:20px; padding:0 6px; border-radius:10px; display:inline-grid; place-items:center; background:var(--surface-2); color:var(--ink); font-variant-numeric:tabular-nums; }
.count-accent{ background:var(--accent); color:var(--accent-ink); }
.side-bottom{ margin-top:auto; padding-top:20px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:1px; }
.side-user{ padding:14px 12px 10px; }
.side-user-name{ font-weight:500; font-size:.92rem; }
.side-user-mail{ font-size:.8rem; color:var(--ink-soft); overflow-wrap:anywhere; }
.side-actions{ display:flex; gap:8px; align-items:center; padding:0 12px; }
.side-actions form{ margin:0; }

.main-col{ min-width:0; display:flex; flex-direction:column; }
.mobile-bar{ display:none; }
.main{ width:100%; max-width:1140px; padding:40px 48px 80px; }

@media (max-width:900px){
  .shell{ grid-template-columns:1fr; }
  .sidebar{
    position:fixed; z-index:80; left:0; top:0; bottom:0; width:min(300px, 86vw); height:100%;
    transform:translateX(-100%); transition:transform .22s ease; box-shadow:var(--shadow-lg);
  }
  .sidebar.open{ transform:none; }
  .mobile-bar{
    display:flex; align-items:center; justify-content:space-between; gap:12px; position:sticky; top:0; z-index:60;
    padding:12px 16px; padding-top:calc(12px + env(safe-area-inset-top,0px));
    background:color-mix(in srgb, var(--bg) 92%, transparent); border-bottom:1px solid var(--line);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  }
  .mobile-bell{ margin-left:auto; font-size:.85rem; color:var(--accent-text); text-decoration:none; font-weight:500; }
  .menu-btn{ display:inline-flex; }
  .main{ padding:28px 16px 64px; }
  body.menu-open::after{ content:''; position:fixed; inset:0; background:var(--overlay); z-index:70; }
}

/* ---------- sidhuvud ---------- */
.page-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px 32px; flex-wrap:wrap; margin-bottom:32px; }
.page-head h1{ font-size:clamp(1.75rem,3.2vw,2.4rem); }
.page-head .lede{ margin-top:8px; color:var(--ink-soft); max-width:62ch; }
.page-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.crumb{ display:inline-block; margin-bottom:10px; font-size:.9rem; color:var(--ink-soft); text-decoration:none; }
.crumb:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

/* ---------- meddelanden ---------- */
.flash{ padding:13px 16px; border:1px solid var(--line); border-left:3px solid var(--accent-2); background:var(--surface); border-radius:3px; margin-bottom:20px; font-size:.95rem; }
.flash-error{ border-left-color:var(--bad); }
.notice{ padding:16px 18px; border:1px solid var(--line); border-radius:4px; background:var(--surface); margin-bottom:28px; display:flex; justify-content:space-between; align-items:center; gap:12px 24px; flex-wrap:wrap; }
.notice strong{ display:block; font-weight:600; }
.notice p{ color:var(--ink-soft); font-size:.94rem; }
.notice-warn{ border-left:3px solid var(--accent); }
.notice-bad{ border-left:3px solid var(--bad); }

/* ---------- block (sektioner inne på en sida) ---------- */
.block{ margin-top:44px; }
.block:first-child{ margin-top:0; }
.block-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px 24px; flex-wrap:wrap; margin-bottom:14px; }
.block-head h2{ font-size:1.35rem; }
.block-head p{ color:var(--ink-soft); font-size:.94rem; }
.grid-2{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:44px; }
.grid-side{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:44px; align-items:start; }
@media (max-width:1000px){ .grid-2, .grid-side{ grid-template-columns:1fr; gap:36px; } }

/* ---------- nyckeltal: en rad med tunna avdelare, som "Det här ingår" på sajten ---------- */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:0; }
.stats > div{ padding:18px 20px 20px 0; }
.stats > div + div{ padding-left:20px; border-left:1px solid var(--line); }
.stats dt{ font-size:.86rem; color:var(--ink-soft); }
.stats dd{ margin:6px 0 0; font-family:var(--serif); font-size:1.85rem; font-weight:600; line-height:1.05; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.stats dd small{ display:block; margin-top:6px; font-family:var(--sans); font-size:.82rem; font-weight:400; color:var(--ink-soft); letter-spacing:0; }
.stats .lead dd{ color:var(--accent-text); }
@media (max-width:640px){
  .stats{ grid-template-columns:1fr 1fr; }
  .stats > div{ padding:16px 12px 16px 0; }
  .stats > div + div{ padding-left:0; border-left:0; }
  .stats > div:nth-child(even){ padding-left:12px; border-left:1px solid var(--line); }
  .stats > div:nth-child(n+3){ border-top:1px solid var(--line); }
  .stats dd{ font-size:1.5rem; }
}

/* ---------- tabeller ---------- */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:6px; background:var(--surface); }
.table{ width:100%; border-collapse:collapse; font-size:.93rem; }
.table th, .table td{ text-align:left; padding:12px 16px; border-bottom:1px solid var(--line); vertical-align:middle; }
.table thead th{ background:var(--surface-2); font-size:.82rem; font-weight:500; color:var(--ink-soft); white-space:nowrap; }
.table tbody tr:last-child td, .table tbody tr:last-child th{ border-bottom:0; }
.table tbody tr:hover{ background:color-mix(in srgb, var(--surface-2) 35%, transparent); }
.table td.num, .table th.num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.table a.row-link{ font-weight:500; text-decoration:none; }
.table a.row-link:hover{ text-decoration:underline; text-underline-offset:3px; }
.table .sub{ display:block; font-size:.82rem; color:var(--ink-soft); margin-top:2px; }
.table tfoot td{ font-weight:600; border-top:1px solid var(--line-strong); border-bottom:0; }
@media (max-width:640px){ .table th, .table td{ padding:11px 12px; } }

/* ---------- statusmärken ---------- */
.pill{ display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:500; line-height:1.2; padding:3px 9px 3px 8px; border-radius:20px; border:1px solid currentColor; white-space:nowrap; }
.pill::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.pill-ok{ color:var(--accent-2); }
.pill-wait{ color:var(--accent-text); }
.pill-off{ color:var(--ink-soft); }
.pill-bad{ color:var(--bad); }

/* ---------- provisionsstegen ---------- */
.ladder{ display:inline-flex; gap:3px; align-items:flex-end; vertical-align:middle; padding-bottom:6px; position:relative; }
.rung{ position:relative; width:11px; height:18px; border:1px solid var(--line-strong); border-radius:2px; background:transparent; }
.rung.on{ background:var(--accent); border-color:var(--accent); }
.rung.bonus::after{ content:''; position:absolute; left:50%; bottom:-7px; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:var(--accent-2); }
.ladder-sm .rung{ width:7px; height:13px; }
.ladder-sm .rung.bonus::after{ width:4px; height:4px; margin-left:-2px; bottom:-6px; }
.ladder-key{ display:flex; flex-wrap:wrap; gap:6px 18px; font-size:.84rem; color:var(--ink-soft); margin-top:12px; }
.ladder-key span{ display:inline-flex; align-items:center; gap:7px; }
.ladder-key i{ display:inline-block; width:9px; height:13px; border-radius:2px; border:1px solid var(--line-strong); }
.ladder-key i.on{ background:var(--accent); border-color:var(--accent); }
.ladder-key i.dot{ width:6px; height:6px; border-radius:50%; border:0; background:var(--accent-2); }
/* Det enda animerade ögonblicket: stegen tänds en gång när översikten laddas. */
.ladder-animate .rung.on{ animation:rung-on .5s cubic-bezier(.2,.8,.2,1) both; }
.ladder-animate .rung:nth-child(2){ animation-delay:.04s } .ladder-animate .rung:nth-child(3){ animation-delay:.08s }
.ladder-animate .rung:nth-child(4){ animation-delay:.12s } .ladder-animate .rung:nth-child(5){ animation-delay:.16s }
.ladder-animate .rung:nth-child(6){ animation-delay:.2s } .ladder-animate .rung:nth-child(7){ animation-delay:.24s }
.ladder-animate .rung:nth-child(8){ animation-delay:.28s } .ladder-animate .rung:nth-child(9){ animation-delay:.32s }
.ladder-animate .rung:nth-child(10){ animation-delay:.36s } .ladder-animate .rung:nth-child(11){ animation-delay:.4s }
.ladder-animate .rung:nth-child(12){ animation-delay:.44s }
@keyframes rung-on{ from{ background:transparent; border-color:var(--line-strong); } }

/* Portföljen: en rad per kund */
.portfolio{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.portfolio li{ display:grid; grid-template-columns:minmax(0,1.3fr) auto minmax(0,.7fr); gap:8px 24px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); }
.portfolio .name{ font-weight:500; text-decoration:none; }
.portfolio .name:hover{ text-decoration:underline; text-underline-offset:3px; }
.portfolio .meta{ display:block; font-size:.84rem; color:var(--ink-soft); }
.portfolio .left{ text-align:right; font-size:.88rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
@media (max-width:640px){
  .portfolio li{ grid-template-columns:1fr auto; }
  .portfolio .left{ grid-column:1 / -1; text-align:left; }
}

/* ---------- introduktionssteg (riktig sekvens) ---------- */
.steps{ list-style:none; margin:0 0 36px; padding:22px 24px; display:grid; grid-template-columns:repeat(5,1fr); gap:20px; counter-reset:step; background:var(--surface); border:1px solid var(--line); border-radius:6px; }
.steps li{ position:relative; padding-top:36px; counter-increment:step; }
.steps li::before{
  content:counter(step); position:absolute; top:0; left:0; width:26px; height:26px; border-radius:50%;
  border:1px solid var(--line-strong); color:var(--ink-soft); font-family:var(--serif); font-size:.85rem; font-weight:600;
  display:grid; place-items:center; background:var(--surface);
}
.steps li::after{ content:''; position:absolute; top:13px; left:34px; right:-14px; height:1px; background:var(--line); }
.steps li:last-child::after{ display:none; }
.steps li.done::before{ content:''; background:var(--accent-2); border-color:var(--accent-2); }
.steps li.done::after{ background:var(--accent-2); }
.steps li.done .tick{ position:absolute; top:8px; left:8px; width:10px; height:6px; border-left:2px solid var(--surface); border-bottom:2px solid var(--surface); transform:rotate(-45deg); }
.steps li.current::before{ border-color:var(--accent); color:var(--accent-text); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.steps h3{ font-family:var(--sans); font-size:.95rem; font-weight:600; letter-spacing:0; }
.steps p{ font-size:.85rem; color:var(--ink-soft); margin-top:4px; }
.steps a{ font-size:.85rem; }
@media (max-width:900px){ .steps{ grid-template-columns:1fr; gap:0; padding:8px 18px; } .steps li{ padding:16px 0 16px 40px; border-bottom:1px solid var(--line); } .steps li:last-child{ border-bottom:0; } .steps li::before{ top:16px; } .steps li.done .tick{ top:24px; } .steps li::after{ display:none; } }

/* ---------- nyckel/värde-listor ---------- */
.kv{ display:grid; grid-template-columns:minmax(120px, 34%) minmax(0,1fr); margin:0; border-top:1px solid var(--line); }
.kv dt, .kv dd{ padding:11px 0; border-bottom:1px solid var(--line); margin:0; }
.kv dt{ color:var(--ink-soft); font-size:.92rem; padding-right:16px; }
.kv dd{ overflow-wrap:anywhere; }

/* ---------- listor med rader (köer, notiser) ---------- */
.rows{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.rows > li{ display:flex; justify-content:space-between; align-items:center; gap:12px 20px; padding:13px 0; border-bottom:1px solid var(--line); }
.rows > li > a{ text-decoration:none; }
.rows > li > a:hover{ text-decoration:underline; text-underline-offset:3px; }
.rows .when{ font-size:.84rem; color:var(--ink-soft); white-space:nowrap; }
.rows .zero{ color:var(--ink-soft); }
.rows .big{ font-family:var(--serif); font-weight:600; font-size:1.2rem; font-variant-numeric:tabular-nums; }
.rows li.unread{ font-weight:500; }
.rows li.unread::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; margin-right:-8px; }

/* ---------- tidslinje (aktiviteter, meddelanden) ---------- */
.thread{ list-style:none; margin:0; padding:0; }
.thread > li{ position:relative; padding:0 0 22px 22px; border-left:1px solid var(--line); margin-left:5px; }
.thread > li:last-child{ padding-bottom:4px; }
.thread > li::before{ content:''; position:absolute; left:-5px; top:5px; width:9px; height:9px; border-radius:50%; background:var(--surface); border:1px solid var(--line-strong); }
.thread > li.from-us::before{ background:var(--accent-2); border-color:var(--accent-2); }
.thread > li.internal{ opacity:.85; }
.thread > li.internal::before{ background:var(--accent); border-color:var(--accent); }
.thread .who{ font-size:.86rem; color:var(--ink-soft); }
.thread .who strong{ color:var(--ink); font-weight:600; }
.thread .body{ margin-top:6px; max-width:70ch; }
.thread .body p + p{ margin-top:8px; }

/* ---------- formulär ---------- */
.form{ display:grid; gap:16px; }
.form-narrow{ max-width:560px; }
.field{ display:grid; }
.field > label{ display:block; font-size:.88rem; color:var(--ink-soft); }
.field > label > input, .field > label > select, .field > label > textarea{ display:block; margin-top:6px; }
.field .req{ color:var(--accent-text); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field-row-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
@media (max-width:640px){ .field-row, .field-row-3{ grid-template-columns:1fr; } }
.help{ font-size:.82rem; color:var(--ink-soft); margin-top:6px; }
input, select, textarea{
  font-family:var(--sans); font-size:1rem; color:var(--ink); background:var(--bg);
  border:1px solid var(--line-strong); border-radius:3px; padding:10px 12px; width:100%; min-height:44px;
}
textarea{ resize:vertical; min-height:96px; line-height:1.5; }
input[type="file"]{ padding:8px; background:var(--surface); }
input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.check{ display:flex; gap:10px; align-items:flex-start; font-size:.94rem; color:var(--ink); cursor:pointer; }
.check input{ width:18px; height:18px; min-height:0; margin-top:2px; padding:0; accent-color:var(--accent); flex:none; }
.form-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.after-list{ margin-top:20px; }
.inline-form .stripe-key{ flex:1 1 320px; max-width:460px; }
.mt{ margin-top:16px; }
.mt-lg{ margin-top:28px; }
.inline-form{ display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; }
.inline-form .field{ min-width:150px; }
.inline-form > form{ margin:0; }
fieldset{ border:0; margin:0; padding:0; min-width:0; }
legend{ font-size:.88rem; color:var(--ink-soft); padding:0; margin-bottom:8px; }

/* Paketval som radioknappar */
.choices{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.choice{ position:relative; display:block; border:1px solid var(--line-strong); border-radius:6px; padding:16px 18px 16px 46px; cursor:pointer; background:var(--surface); }
.choice input{ position:absolute; left:16px; top:18px; width:18px; height:18px; min-height:0; padding:0; accent-color:var(--accent); }
.choice:has(input:checked){ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.choice strong{ display:block; font-family:var(--serif); font-size:1.15rem; font-weight:600; }
.choice .price{ display:block; margin-top:2px; font-variant-numeric:tabular-nums; }
.choice .desc{ display:block; margin-top:6px; font-size:.86rem; color:var(--ink-soft); }

/* Panel: avgränsad yta för formulär och åtgärder */
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:24px; }
.panel + .panel{ margin-top:16px; }
.grid-2 > .panel + .panel, .grid-side > .panel + .panel{ margin-top:0; }
.panel h2{ font-size:1.2rem; margin-bottom:6px; }
.panel h3{ font-family:var(--sans); font-size:1rem; font-weight:600; letter-spacing:0; margin-bottom:6px; }
.panel > p{ color:var(--ink-soft); font-size:.94rem; margin-bottom:16px; }
.panel-accent{ border-left:3px solid var(--accent); }
@media (max-width:640px){ .panel{ padding:18px 16px; } }

/* Tomt läge */
.empty{ border:1px dashed var(--line-strong); border-radius:6px; padding:28px 24px; color:var(--ink-soft); }
.empty-title{ font-family:var(--serif); font-size:1.15rem; font-weight:600; color:var(--ink); margin-bottom:4px; }
.empty-action{ margin-top:16px; }

/* Flikar som filter */
.tabs{ display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin-bottom:20px; }
.tabs a{ padding:9px 12px; text-decoration:none; color:var(--ink-soft); font-size:.93rem; border-bottom:2px solid transparent; margin-bottom:-1px; display:inline-flex; gap:8px; align-items:center; }
.tabs a:hover{ color:var(--ink); }
.tabs a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--accent); font-weight:500; }

.filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:18px; }
.filters .field{ min-width:160px; flex:1 1 160px; max-width:260px; }
.filters .btn{ align-self:flex-end; }

.pager{ display:flex; gap:12px; align-items:center; justify-content:center; margin-top:18px; font-size:.9rem; color:var(--ink-soft); }

/* ---------- akademin ---------- */
.modules{ list-style:none; margin:0; padding:0; counter-reset:mod; border-top:1px solid var(--line); }
.modules li{ display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:6px 20px; align-items:center; padding:20px 0; border-bottom:1px solid var(--line); counter-increment:mod; }
.modules li::before{ content:counter(mod); font-family:var(--serif); font-size:1.5rem; color:var(--accent-text); line-height:1; }
.modules h3{ font-size:1.15rem; }
.modules h3 a{ text-decoration:none; }
.modules h3 a:hover{ text-decoration:underline; text-underline-offset:3px; }
.modules p{ color:var(--ink-soft); font-size:.92rem; margin-top:4px; }
.modules.locked li{ opacity:.6; }
@media (max-width:640px){ .modules li{ grid-template-columns:36px minmax(0,1fr); } .modules li > :last-child{ grid-column:2; } }

.lesson{ padding:32px 0; border-top:1px solid var(--line); }
.lesson:first-of-type{ border-top:0; padding-top:0; }
.lesson > h2{ font-size:1.5rem; margin-bottom:14px; }
.prose{ max-width:68ch; }
.prose p, .prose ul, .prose ol{ margin:0 0 14px; }
.prose ul, .prose ol{ padding-left:22px; }
.prose li + li{ margin-top:6px; }
.prose h3{ font-family:var(--sans); font-size:1.02rem; font-weight:600; letter-spacing:0; margin:24px 0 8px; }
.prose strong{ font-weight:600; }
.prose .script{ background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent-2); border-radius:4px; padding:16px 18px; margin:0 0 16px; }
.prose .script p:last-child{ margin-bottom:0; }
.prose .rule{ background:color-mix(in srgb, var(--bad) 6%, var(--surface)); border:1px solid color-mix(in srgb, var(--bad) 25%, transparent); border-radius:4px; padding:16px 18px; margin:0 0 16px; }
.prose .rule ul{ margin-bottom:0; }
.prose table{ width:100%; border-collapse:collapse; margin:0 0 16px; font-size:.93rem; }
.prose th, .prose td{ text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); }
.prose th{ font-weight:500; color:var(--ink-soft); }
.video{ position:relative; aspect-ratio:16/9; max-width:720px; margin:0 0 18px; border-radius:6px; overflow:hidden; background:var(--surface-2); }
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.quiz{ list-style:none; margin:0; padding:0; counter-reset:q; display:grid; gap:20px; }
.quiz > li{ counter-increment:q; border:1px solid var(--line); border-radius:6px; padding:18px 20px; background:var(--surface); }
.quiz .q{ font-weight:500; display:flex; gap:10px; }
.quiz .q::before{ content:counter(q) '.'; font-family:var(--serif); color:var(--accent-text); font-weight:600; }
.quiz .options{ display:grid; gap:6px; margin-top:12px; }
.quiz .option{ display:flex; gap:10px; align-items:flex-start; padding:9px 12px; border:1px solid var(--line); border-radius:4px; cursor:pointer; background:var(--bg); font-size:.95rem; }
.quiz .option input{ width:18px; height:18px; min-height:0; padding:0; margin-top:2px; accent-color:var(--accent); flex:none; }
.quiz .option:has(input:checked){ border-color:var(--accent); }
.quiz .option.right{ border-color:var(--accent-2); background:color-mix(in srgb, var(--accent-2) 8%, var(--bg)); }
.quiz .option.wrong{ border-color:var(--bad); background:color-mix(in srgb, var(--bad) 6%, var(--bg)); }
.quiz .why{ margin-top:10px; font-size:.9rem; color:var(--ink-soft); }
.quiz li.was-wrong{ border-color:color-mix(in srgb, var(--bad) 40%, var(--line)); }

/* ---------- inloggningssidor ---------- */
body.auth{ min-height:100vh; }
.auth-wrap{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 16px; }
.auth-brand{ margin-bottom:28px; font-size:1.45rem; }
.auth-card{ width:min(440px, 100%); background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow-lg); padding:34px; }
.auth-card h1{ font-size:1.7rem; }
.auth-card .sub{ color:var(--ink-soft); margin:8px 0 24px; font-size:.95rem; }
.auth-alt{ margin-top:18px; font-size:.92rem; text-align:center; }
.auth-foot{ margin-top:24px; font-size:.88rem; color:var(--ink-soft); }
@media (max-width:520px){ .auth-card{ padding:24px 18px; } }

/* ---------- topplista ---------- */
.leaders{ list-style:none; margin:0; padding:0; counter-reset:lead; border-top:1px solid var(--line); }
.leaders li{ display:flex; align-items:center; gap:14px; padding:11px 0; border-bottom:1px solid var(--line); counter-increment:lead; }
.leaders li::before{ content:counter(lead); width:24px; font-family:var(--serif); font-weight:600; color:var(--ink-soft); }
.leaders li:first-child::before{ color:var(--accent-text); }
.leaders .n{ margin-left:auto; font-variant-numeric:tabular-nums; color:var(--ink-soft); font-size:.9rem; }
.leaders li.me{ font-weight:600; }

/* ---------- detaljer ---------- */
details.more{ border-top:1px solid var(--line); }
details.more > summary{ cursor:pointer; list-style:none; padding:14px 0; font-weight:500; display:flex; justify-content:space-between; }
details.more > summary::-webkit-details-marker{ display:none; }
details.more > summary::after{ content:''; width:9px; height:9px; margin-top:6px; border-right:1.6px solid var(--accent); border-bottom:1.6px solid var(--accent); transform:rotate(45deg); transition:transform .2s ease; }
details.more[open] > summary::after{ transform:rotate(-135deg); margin-top:10px; }
details.more > div{ padding-bottom:18px; }

.copy-row{ display:flex; gap:8px; align-items:stretch; }
.copy-row input{ font-size:.88rem; }

.money-big{ font-family:var(--serif); font-size:2.4rem; font-weight:600; letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; }
.money-big span{ font-family:var(--sans); font-weight:400; letter-spacing:0; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}
@media print{
  .sidebar, .mobile-bar, .page-actions, form, .btn{ display:none !important; }
  .shell{ display:block; }
  body{ background:#fff; color:#000; }
}