/* ===== Designspråk: varm off-white flate, aubergine meny, magenta aksent =====
     Alle farger, fonter og radiuser hentes herfra – endre her for å slå
     gjennom på hele systemet. */
  :root{
    /* Flater og tekst (varme nøytraler) */
    --canvas:#FAF7F5; --surface:#FFFFFF; --surface-2:#F5F0ED;
    --ink:#2B2230; --ink-soft:#4F4556; --muted:#716777;
    --border:#EAE3DE; --border-strong:#D8CDC6;

    /* Aksent: dyp rosa/magenta. --link brukes på tekstlenker. */
    --brand:#C8285F; --brand-strong:#A31F4E; --brand-soft:#FBE9F0; --brand-ink:#7C1738;
    --link:#A31F4E;

    /* Sidemeny: mørk aubergine med lys tekst */
    --side-bg:#231B2B; --side-ink:#EDE6F0; --side-active:#3A2E45; --side-muted:#A99DB4;

    /* Statusfarger: samme betydning som før, harmonisert med paletten */
    --s-prospekt-fg:#6A6070; --s-prospekt-bg:#EFEAE7;
    --s-kontaktet-fg:#35669B; --s-kontaktet-bg:#E6EEF7;
    --s-dialog-fg:#7B4FA8;    --s-dialog-bg:#F0E8F7;
    --s-mulig-fg:#3A6A7B;     --s-mulig-bg:#E4EEF1;
    --s-tilbud-fg:#955A09;    --s-tilbud-bg:#FBEFD9;
    --s-aktiv-fg:#276F4E;     --s-aktiv-bg:#E3F1E8;
    --s-tapt-fg:#B8402D;      --s-tapt-bg:#FBE8E4;

    --danger:#B8402D; --amber:#955A09; --green:#276F4E;

    /* Former: runde kort, pille-knapper/tagger */
    --radius:18px; --radius-sm:12px; --pill:999px;
    --shadow:0 1px 2px rgba(43,34,48,.04), 0 6px 20px rgba(43,34,48,.06);
    --shadow-lg:0 12px 40px rgba(43,34,48,.16);

    /* Typografi: Bricolage Grotesque til overskrifter, DM Sans til brødtekst */
    --sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --display:'Bricolage Grotesque',var(--sans);
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%}
  body{
    background:var(--canvas); color:var(--ink); font-family:var(--sans);
    font-size:14.5px; line-height:1.5; -webkit-font-smoothing:antialiased;
  }
  button{font-family:inherit; cursor:pointer}
  input,select,textarea{font-family:inherit; font-size:14px}
  a{color:var(--link); text-decoration:none}
  ::selection{background:var(--brand-soft)}

  /* Layout */
  .app{display:grid; grid-template-columns:236px 1fr; min-height:100vh}
  .sidebar{
    background:var(--side-bg); color:var(--side-ink);
    padding:22px 16px; position:sticky; top:0; height:100vh;
    display:flex; flex-direction:column; gap:6px;
  }
  .brand{display:flex; align-items:center; gap:10px; padding:4px 8px 18px}
  .brand-mark{
    width:34px; height:34px; border-radius:12px; background:var(--brand);
    color:#fff; display:grid; place-items:center; font-family:var(--display);
    font-weight:700; font-size:19px; letter-spacing:-.5px; cursor:pointer;
    overflow:hidden; transition:filter .12s, box-shadow .12s; position:relative;
  }
  .brand-mark:hover{filter:brightness(.94)}
  .brand-mark:hover::after{content:"Bytt"; position:absolute; inset:0; background:rgba(0,0,0,.45); color:#fff; font-family:var(--sans); font-size:9.5px; font-weight:600; display:grid; place-items:center; letter-spacing:.3px}
  .brand-mark.has-logo{background:#fff; border:1px solid var(--border)}
  .brand-mark img{width:100%; height:100%; object-fit:contain; display:block}
  .whoami{display:flex; align-items:center; gap:9px; padding:8px 6px 12px; min-height:0}
  .whoami:empty{display:none}
  .whoami .mini-avatar{box-shadow:none; width:26px; height:26px; border-radius:8px; font-size:10px}
  .whoami-t{display:flex; flex-direction:column; min-width:0; line-height:1.25}
  .whoami-name{font-size:13px; font-weight:600; color:var(--side-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .whoami-sub{font-size:11px; color:var(--side-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .whoami.unmatched .whoami-sub{color:#E8B15C}
  .brand-gear{margin-left:auto; flex:none; width:34px; height:34px; border:none; border-radius:10px; background:transparent; color:var(--side-muted); display:grid; place-items:center; padding:0; cursor:pointer; transition:.12s}
  .brand-gear:hover{background:rgba(255,255,255,.07); color:var(--side-ink)}
  .brand-gear.active{background:var(--side-active); color:var(--side-ink)}
  .brand-gear svg{width:18px; height:18px; stroke-width:1.8}
  .brand-gear:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
  .brand-name{font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:-.4px; color:var(--side-ink)}
  .brand-sub{font-size:11px; color:var(--side-muted); margin-top:-2px; letter-spacing:.2px}
  .nav{display:flex; flex-direction:column; gap:2px; margin-top:4px}
  .nav-lbl{font-size:11px; text-transform:uppercase; letter-spacing:.7px; color:var(--side-muted); padding:12px 10px 4px; font-weight:600}
  .nav-item{
    display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:var(--pill);
    color:var(--side-ink); font-weight:500; border:none; background:none; text-align:left; width:100%;
    transition:background .12s, color .12s;
  }
  .nav-item:hover{background:rgba(255,255,255,.07)}
  .nav-item.active{background:var(--side-active); color:#fff; font-weight:600}
  .nav-item svg{width:18px; height:18px; flex:none; stroke-width:1.9}
  .nav-count{margin-left:auto; font-size:11px; font-weight:600; background:rgba(255,255,255,.1); color:#CFC3D6; padding:1px 8px; border-radius:var(--pill)}
  .nav-item.active .nav-count{background:rgba(255,255,255,.18); color:#fff}
  .sidebar-foot{margin-top:auto; padding:12px 10px 2px; border-top:1px solid rgba(255,255,255,.1)}
  /* Innstillinger → Data og backup */
  .data-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--border)}
  .data-row:last-of-type{border-bottom:none}
  .data-txt{min-width:0; flex:1}
  .data-name{font-weight:600; font-size:14px}
  .sidebar-foot small{color:var(--side-muted); font-size:11px; line-height:1.45; display:block}
  /* Knapper på mørk meny: gjennomsiktige med lys kant/tekst */
  .sidebar .btn{background:transparent; border-color:rgba(255,255,255,.22); color:var(--side-ink)}
  .sidebar .btn:hover{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.4)}
  .sidebar .btn-ghost{border-color:transparent; color:var(--side-muted)}
  .sidebar .btn-ghost:hover{background:rgba(255,255,255,.07); color:var(--side-ink)}

  /* Main */
  .main{min-width:0; padding:0}
  .topbar{
    position:sticky; top:0; z-index:20; background:rgba(250,247,245,.88);
    backdrop-filter:blur(8px); border-bottom:1px solid var(--border);
    padding:18px 34px; display:flex; align-items:center; gap:16px;
  }
  .topbar h1{font-family:var(--display); font-size:23px; font-weight:700; margin:0; letter-spacing:-.6px}
  .topbar .sub{color:var(--muted); font-size:13px; margin-top:1px}
  .topbar-actions{margin-left:auto; display:flex; gap:9px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
  .content{padding:26px 34px 60px; max-width:1180px}
  .content.content-wide{max-width:none}

  /* Buttons */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px 20px; min-height:44px; border-radius:var(--pill);
    border:1px solid var(--border-strong); background:var(--surface); color:var(--ink);
    font-weight:600; font-size:13.5px; transition:.12s; white-space:nowrap;
  }
  .btn:hover{border-color:var(--muted); background:var(--surface-2)}
  .btn svg{width:16px; height:16px; stroke-width:2}
  .btn-primary{background:var(--brand); border-color:var(--brand); color:#fff}
  .btn-primary:hover{background:var(--brand-strong); border-color:var(--brand-strong)}
  .btn-ghost{border-color:transparent; background:transparent; color:var(--ink-soft)}
  .btn-ghost:hover{background:var(--surface-2)}
  .btn-danger{color:var(--danger); border-color:transparent; background:transparent}
  .btn-danger:hover{background:var(--s-tapt-bg)}
  .btn-sm{padding:6px 13px; min-height:34px; font-size:12.5px; border-radius:var(--pill)}
  .btn:disabled{opacity:.45; cursor:not-allowed; pointer-events:none}
  /* «Send e-post til valgte»: nøytral sekundærknapp. Dus når ingenting er valgt (disabled), tydelig mørk kant og tekst når noe er valgt – aldri rosa (Ny kontakt er primærknappen). */
  .kt-send.has-sel{border-color:var(--ink); color:var(--ink); box-shadow:0 0 0 1px var(--ink) inset}
  .kt-send.has-sel:hover{background:var(--surface-2)}
  .sel-count{font-size:12.5px; font-weight:600; color:var(--muted); white-space:nowrap}

  /* Cards & grid */
  .card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow)}
  /* Varsler: rød rad = åpent (krever handling), gul rad = under oppfølging. Dempede toner som
     resten av systemet; fargen sitter på radene, så kortet kan blande begge. */
  .alerts-card{border-color:rgba(184,64,45,.22); overflow:hidden}
  .alerts-card .row{border-bottom-color:rgba(43,34,48,.07)}
  .alerts-card .row:last-child{border-bottom:none}
  .alert-row.open{background:var(--s-tapt-bg); box-shadow:inset 3px 0 0 var(--danger)}
  .alert-row.following{background:var(--s-tilbud-bg); box-shadow:inset 3px 0 0 var(--amber)}
  .alert-row:hover{filter:brightness(.985)}
  .alerts-head h2{display:flex; align-items:center; gap:8px; color:var(--danger)}
  .alerts-head.calm h2{color:var(--amber)}
  .alerts-head h2 svg{width:18px; height:18px; stroke-width:2}
  .alert-row .btn-ghost:hover{background:rgba(255,255,255,.6)}
  .al-type{display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; padding:1px 7px; margin-right:8px; border-radius:var(--pill); background:rgba(255,255,255,.7); color:var(--danger)}
  .al-type.al-expired{color:var(--ink-soft)}
  .alert-row.following .al-type{color:var(--amber)}
  /* Liten av/på-bryter for «under oppfølging»: av = rød prikk (åpent), på = gul prikk (under oppfølging) */
  .al-switch{flex:none; position:relative; width:30px; height:16px; padding:0; border-radius:var(--pill); border:1px solid rgba(184,64,45,.4); background:rgba(184,64,45,.12); cursor:pointer; transition:background .12s, border-color .12s}
  .al-switch::after{content:''; position:absolute; inset:-10px -6px}       /* større trefflate uten at bryteren vokser */
  .al-knob{position:absolute; top:2px; left:2px; width:10px; height:10px; border-radius:50%; background:var(--danger); transition:transform .12s, background .12s}
  .al-switch:hover{box-shadow:0 0 0 3px rgba(184,64,45,.14)}
  .al-switch[aria-checked="true"]{border-color:rgba(149,90,9,.55); background:rgba(149,90,9,.16)}
  .al-switch[aria-checked="true"] .al-knob{transform:translateX(14px); background:var(--amber)}
  .al-switch[aria-checked="true"]:hover{box-shadow:0 0 0 3px rgba(149,90,9,.16)}
  .al-switch:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
  /* «Alle varsler»-siden: tabell-aktig med faste kolonner (kolonnebredder er felles for hode og rader) */
  .alerts-page{overflow:hidden}
  .ap-scroll{overflow-x:auto}
  .ap-head, .ap-row{display:grid; grid-template-columns:minmax(260px,1fr) 190px 150px 232px; align-items:center; column-gap:16px; padding:0 18px; min-width:860px}
  .ap-head{padding-top:10px; padding-bottom:10px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); border-bottom:1px solid var(--border); background:var(--surface-2)}
  .ap-row{padding-top:11px; padding-bottom:11px; border-bottom:1px solid var(--border); box-shadow:inset 3px 0 0 var(--border-strong); background:var(--surface)}
  .ap-row:last-child{border-bottom:none}
  .ap-row:hover{background:var(--surface-2)}
  .ap-row.st-open{box-shadow:inset 3px 0 0 var(--danger)}
  .ap-row.st-following{box-shadow:inset 3px 0 0 var(--amber)}
  .ap-row.st-snoozed{box-shadow:inset 3px 0 0 var(--s-prospekt-fg)}
  .ap-row.st-upcoming{box-shadow:inset 3px 0 0 var(--s-kontaktet-fg)}
  .ap-name{display:flex; align-items:center; gap:12px; min-width:0}
  .ap-name-t{min-width:0}
  .ap-sub{display:flex; align-items:center; gap:8px; margin-top:3px; min-width:0}
  .ap-sub .al-type{margin-right:0; flex:none}
  .ap-note{font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
  .ap-date{font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap}
  .ap-notify{font-size:11.5px; font-weight:400; color:var(--danger); margin-top:2px}
  .ap-actions{display:grid; grid-template-columns:150px 30px 30px; column-gap:6px; align-items:center; justify-items:end}
  .ap-slot{display:flex; justify-content:flex-end; width:100%}
  .al-badge{flex:none; font-size:11px; font-weight:700; padding:3px 10px; border-radius:var(--pill); white-space:nowrap}
  .al-badge.open{background:var(--s-tapt-bg); color:var(--s-tapt-fg)}
  .al-badge.following{background:var(--s-tilbud-bg); color:var(--amber)}
  .al-badge.snoozed{background:var(--s-prospekt-bg); color:var(--s-prospekt-fg)}
  .al-badge.upcoming{background:var(--s-kontaktet-bg); color:var(--s-kontaktet-fg)}
  .al-state{display:inline-block; font-size:10.5px; font-weight:700; padding:1px 8px; margin-right:8px; border-radius:var(--pill); background:var(--amber); color:#fff}
  /* Ikoner/tegn inni knapper, lenker og elementer med tips fanger ikke musehendelser selv – hendelsene går til elementet under (knappen),
     som da er hovret/målet uansett om musen står over ikonet eller knappen. */
  button svg, button svg *, a svg, a svg *, [data-hint] svg, [data-hint] svg *{pointer-events:none}
  .ui-tip{position:fixed; z-index:400; max-width:240px; padding:6px 10px; border-radius:8px; background:var(--ink); color:#fff; font-size:12px; font-weight:500; line-height:1.3; pointer-events:none; box-shadow:0 4px 14px rgba(43,34,48,.25); animation:fade .1s}
  .al-act-slot{flex:none; width:150px; display:flex; justify-content:flex-end}
  .al-go{flex:none; width:30px; height:30px; padding:0; border:none; border-radius:50%; background:transparent; color:var(--muted); display:grid; place-items:center; cursor:pointer}
  .al-go:hover{background:rgba(255,255,255,.7); color:var(--ink)}
  .al-go svg{width:16px; height:16px; stroke-width:2}
  .ap-row .al-go:hover{background:var(--surface-2)}
  .al-kebab{border:none; background:transparent; width:30px; height:30px; padding:0; border-radius:50%; color:var(--ink-soft); display:grid; place-items:center; cursor:pointer; flex:none}
  .al-kebab:hover{background:rgba(255,255,255,.7); color:var(--ink)}
  .al-kebab svg{width:18px; height:18px; fill:currentColor; stroke:none}
  .modal-foot .al-kebab:hover{background:var(--surface-2)}   /* i kortenes bunnlinje er bakgrunnen hvit */
  .modal-foot .al-kebab{align-self:center}                 /* midtstilt på samme horisontale midtlinje som knappene ved siden av (ellers ligger den ved toppkanten) */
  .al-menu{position:fixed; z-index:250; min-width:210px; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-lg); padding:6px; animation:pop .12s ease-out}
  .al-menu button{display:block; width:100%; text-align:left; border:none; background:none; padding:9px 12px; border-radius:9px; font:inherit; font-size:13px; font-weight:500; color:var(--ink); cursor:pointer}
  .al-menu button:hover, .al-menu button:focus-visible{background:var(--surface-2); outline:none}
  .al-menu button.danger{color:var(--danger)}
  .al-menu button.good{color:var(--s-aktiv-fg)}
  .alerts-more{display:block; width:100%; border:none; background:rgba(184,64,45,.06); padding:10px; font:inherit; font-size:12.5px; font-weight:600; color:var(--danger); cursor:pointer; border-top:1px solid rgba(184,64,45,.16)}
  .alerts-more:hover{background:rgba(184,64,45,.12)}
  .al-set-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
  .al-set-row .inp{width:96px}
  .al-set-unit{font-size:13px; color:var(--muted)}
  .grid{display:grid; gap:16px}
  .dash-cols{grid-template-columns:repeat(auto-fit, minmax(340px, 1fr))}
  .dash-cols .row{min-height:64px; box-sizing:border-box}
  /* ---- Oversikt: toppstripe, økonomi-grafer, ringer og oppfølging (se renderDashboard i app.js) ---- */
  /* Toppstripe: nøytrale tall (kpiRowHtml) til venstre, pengetallene i en egen mørk aubergine-boks (economyZoneHtml) til høyre */
  .top-row{display:grid; grid-template-columns:auto minmax(0,1fr); gap:22px; align-items:center; margin:0 0 20px}
  .kpis{display:flex; flex-direction:column; gap:7px; padding:0 4px}
  .kpi{display:flex; align-items:baseline; gap:8px; white-space:nowrap}
  .kpi-v{font-family:var(--display); font-size:22px; font-weight:700; letter-spacing:-.6px; line-height:1; min-width:22px}
  .kpi-l{font-size:13px; color:var(--muted)}
  .kpi.alert .kpi-v{color:var(--danger)}
  .kpi.warn .kpi-v{color:var(--amber)}
  .econ-zone{padding:15px 22px 16px; border-radius:var(--radius); background:linear-gradient(135deg, var(--side-bg), var(--side-active)); color:#fff; box-shadow:var(--shadow)}
  .econ-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr))}
  .econ-t{padding:0 22px; min-width:0}
  .econ-t:first-child{padding-left:0}
  .econ-t:last-child{padding-right:0}
  .econ-t + .econ-t{border-left:1px solid rgba(255,255,255,.13)}
  .econ-k{font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.8px; color:var(--side-muted)}
  .econ-v{font-family:var(--display); font-size:25px; font-weight:700; letter-spacing:-.8px; line-height:1; margin-top:7px; white-space:nowrap}
  .econ-t.pot .econ-v{color:#F4C97A}
  .econ-s{font-size:12px; color:var(--side-muted); margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

  /* Kort-overskrift felles for graf, kvartalsmål, ringer og oppfølging */
  .card-head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap}
  .card-t{font-family:var(--display); font-size:19px; font-weight:700; letter-spacing:-.5px; line-height:1.2}
  .card-s{font-size:13px; color:var(--muted); margin-top:3px}
  .fin-card, .dn-card{padding:20px 24px 20px}
  .fin-row{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:20px; align-items:stretch; margin:0 0 20px}
  .fin-row > div > .card{height:100%; box-sizing:border-box}
  .dn-row{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:0 0 20px}

  /* Inntekt per måned: stablede søyler + klikkbar tegnforklaring (retainer / prosjekt / mål) */
  .fin-legend{display:flex; align-items:center; gap:6px 14px; flex-wrap:wrap}
  .fin-lg{display:inline-flex; align-items:center; gap:6px; border:none; background:none; padding:2px 0; font:inherit; font-size:12.5px; color:var(--ink-soft); cursor:pointer}
  .fin-lg:hover{color:var(--ink)}
  .fin-lg i{width:9px; height:9px; border-radius:3px; background:var(--brand)}
  .fin-lg.retainer i{background:var(--brand)}
  .fin-lg.project i{background:var(--side-active)}
  .fin-lg.fc{cursor:help; color:var(--muted)}
  .fin-lg.fc i{background:var(--brand); opacity:.35}
  .fin-lg.goal i{width:14px; height:0; border-radius:0; border-top:2px dashed #E0A24A; background:none}
  .fin-lg.off{opacity:.45; text-decoration:line-through}
  .fin-lg.add{border:1px solid var(--border-strong); border-radius:var(--pill); padding:3px 11px 3px 8px; font-weight:600}
  .fin-lg.add:hover{border-color:var(--brand); color:var(--brand)}
  .fin-lg svg{width:12px; height:12px; stroke-width:2.2}
  .fin-label{font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); font-weight:600}
  .fin-chart{position:relative; width:100%; margin-top:10px}
  .fin-svg{display:block; overflow:visible; touch-action:pan-y}
  .fin-svg text{font-size:11px; fill:var(--muted); font-family:var(--sans)}
  .fin-svg text.mo.now{fill:var(--ink); font-weight:700}
  .fin-svg text.bv{fill:var(--ink); font-weight:600; font-size:11px}
  .fin-svg .grid{stroke:var(--border); stroke-width:1}
  .fin-svg .b-ret{fill:var(--brand)}
  .fin-svg .b-prj{fill:var(--side-active)}
  .fin-svg .fc{opacity:.38}
  .fin-svg text.fc{opacity:1; fill:var(--muted); font-weight:400}
  .fin-svg .today{stroke:var(--border-strong); stroke-width:1}
  .fin-svg text.fc-t{font-size:10.5px; fill:var(--muted); letter-spacing:.3px}
  .fin-svg .hi{fill:var(--surface-2); opacity:.7}
  .fin-svg .goal{stroke:#E0A24A; stroke-width:1.6; stroke-dasharray:5 4}
  .fin-tip{position:absolute; z-index:2; pointer-events:none; background:var(--ink); color:#fff; border-radius:10px; padding:7px 11px; font-size:12px; display:flex; flex-direction:column; white-space:nowrap; box-shadow:var(--shadow-lg)}
  .fin-tip[hidden]{display:none}
  .fin-tip b{font-family:var(--display); font-size:14px; letter-spacing:-.3px}
  .fin-tip span{opacity:.75; text-transform:capitalize}
  .fin-tip span.sp{text-transform:none; opacity:.85}
  .fin-empty{padding:34px 10px; text-align:center; color:var(--muted); font-size:13px}
  .fin-note{font-size:12px; color:var(--muted); margin-top:8px}

  /* Kvartalsmål: ring + tall */
  .q-body{display:flex; align-items:center; gap:22px; margin-top:16px; flex-wrap:wrap}
  .q-ring{display:block; flex:none}
  .q-track{fill:none; stroke:var(--surface-2); stroke-width:12}
  .q-prog{fill:none; stroke:var(--green); stroke-width:12; stroke-linecap:round}
  .q-prog.done{stroke:var(--green)}
  .q-pct{font-family:var(--display); font-size:25px; font-weight:700; letter-spacing:-.8px; fill:var(--ink)}
  .q-lbl{font-size:11px; fill:var(--muted)}
  .q-rows{flex:1; min-width:130px; display:flex; flex-direction:column; gap:11px}
  .q-row{display:flex; flex-direction:column-reverse; gap:2px; font-size:10.5px; text-transform:uppercase; letter-spacing:.7px; font-weight:600; color:var(--muted)}
  .q-row b{font-family:var(--display); font-size:17px; letter-spacing:-.3px; text-transform:none; color:var(--ink); font-weight:700}
  .q-row.billed b{color:var(--green)}      /* Mål: nøytral, Fakturert: grønn (som ringen), Gjenstår: rødrosa */
  .q-row.left b{color:var(--brand)}

  /* Smultringer: ståa i pipeline */
  .dn-body{display:flex; align-items:center; gap:22px; margin-top:14px; flex-wrap:wrap}
  .dn-svg{flex:none; display:block}
  .dn-track{fill:none; stroke:var(--surface-2); stroke-width:14}
  .dn-seg{fill:none; stroke-width:14; cursor:pointer; transition:stroke-width .2s cubic-bezier(.3,1.4,.5,1), opacity .2s}
  .dn-seg.hl{stroke-width:19}
  .dn-card.hot .dn-seg:not(.hl){opacity:.4}
  .dn-num,.dn-cap{pointer-events:none}
  .dn-num{font-family:var(--display); font-size:24px; font-weight:700; letter-spacing:-.6px; fill:var(--ink)}
  .dn-cap{font-size:10.5px; fill:var(--muted)}
  .dn-legend{list-style:none; margin:0; padding:0; flex:1; min-width:150px}
  .dn-legend li{display:flex; align-items:center; gap:9px; font-size:13.5px; padding:7px 8px; margin:0 -8px; border-top:1px solid var(--border); border-radius:8px; cursor:pointer; transition:background .15s, transform .2s cubic-bezier(.3,1.4,.5,1)}
  .dn-legend li:focus-visible{outline:2px solid var(--brand); outline-offset:-2px}
  .dn-legend li.hl{background:var(--surface-2); transform:translateX(3px)}
  .dn-legend li.hl .dn-dot{transform:scale(1.25)}
  .dn-legend li:first-child{border-top:none}
  .dn-legend li.zero{color:var(--muted)}
  .dn-legend li.zero b{font-weight:500}
  .dn-dot{transition:transform .2s cubic-bezier(.3,1.4,.5,1); width:10px; height:10px; border-radius:3px; flex:none; box-shadow:inset 0 0 0 1px rgba(43,34,48,.12)}
  .dn-name{flex:1; min-width:0}
  .dn-legend b{font-weight:700}

  .alerts-card{margin-bottom:20px}
  .section-head{display:flex; align-items:center; gap:10px; margin:30px 0 13px}
  .section-head h2{font-family:var(--display); font-size:17px; font-weight:700; margin:0; letter-spacing:-.4px}
  .section-head .hint{font-size:12.5px; color:var(--muted)}
  .section-head .spacer{margin-left:auto}

  /* Badges / pills */
  .badge{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px; white-space:nowrap}
  .badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.85}
  .b-prospekt{color:var(--s-prospekt-fg); background:var(--s-prospekt-bg)}
  .b-kontaktet{color:var(--s-kontaktet-fg); background:var(--s-kontaktet-bg)}
  .b-dialog{color:var(--s-dialog-fg); background:var(--s-dialog-bg)}
  .b-mulig{color:var(--s-mulig-fg); background:var(--s-mulig-bg)}
  .b-tilbud{color:var(--s-tilbud-fg); background:var(--s-tilbud-bg)}
  .b-aktiv{color:var(--s-aktiv-fg); background:var(--s-aktiv-bg)}
  .b-tapt{color:var(--s-tapt-fg); background:var(--s-tapt-bg)}
  .tag{display:inline-block; max-width:100%; box-sizing:border-box; font-size:11.5px; font-weight:500; color:var(--ink-soft); background:var(--surface-2); border:1px solid var(--border); padding:2px 9px; border-radius:999px; overflow-wrap:break-word; word-break:break-word}

  /* Lists / rows */
  .row{display:flex; align-items:center; gap:14px; padding:13px 18px; border-bottom:1px solid var(--border)}
  .row:last-child{border-bottom:none}
  .row:hover{background:var(--surface-2)}
  .row.clickable{cursor:pointer}
  .avatar{width:38px; height:38px; border-radius:12px; flex:none; display:grid; place-items:center; font-weight:700; font-size:14px; color:#fff; font-family:var(--display); overflow:hidden}
  .avatar.has-logo{background:#fff !important; border:1px solid var(--border)}
  .avatar img{width:100%; height:100%; object-fit:contain; display:block}
  .logo-edit{display:flex; align-items:center; gap:14px}
  .logo-preview{width:56px; height:56px; border-radius:16px; flex:none; display:grid; place-items:center; background:var(--brand-soft); color:var(--brand-ink); font-family:var(--display); font-weight:700; font-size:20px; overflow:hidden}
  .logo-preview.has-logo{background:#fff; border:1px solid var(--border)}
  .logo-preview img{width:100%; height:100%; object-fit:contain}
  .logo-actions{display:flex; flex-direction:column; gap:7px; align-items:flex-start}
  .logo-hint{margin:0; font-size:12px; color:var(--muted)}
  .row-main{min-width:0; flex:1}
  .row-title{font-weight:600; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .row-sub{font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .row-meta{font-size:12.5px; color:var(--muted); text-align:right; white-space:nowrap}
  .row-meta .strong{color:var(--ink); font-weight:600}
  .row-meta .assignee{margin-top:2px; font-weight:500; color:var(--muted)}
  .kt-lines{display:flex; flex-direction:column; align-items:flex-end; gap:4px}
  .kt-lines a, .kt-lines .muted{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-soft); font-weight:500}
  .kt-lines a:hover{color:var(--brand)}
  .kt-lines .muted{color:var(--muted)}
  .row-status{flex:none; width:124px; display:flex; align-items:center}
  .row-lead{flex:none; width:120px; text-align:left; font-size:12.5px; color:var(--ink-soft); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .team-card{height:228px; display:flex; flex-direction:column; overflow:hidden; cursor:grab}
  .team-card:active{cursor:grabbing}
  .team-card.dragging{opacity:.4}
  .team-card.drop-target{outline:2px dashed var(--brand); outline-offset:2px}
  .team-head{display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; flex:none}
  .team-id{flex:1; min-width:0}
  .team-name{font-family:var(--display); font-weight:700; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .team-role{font-size:12.5px; color:var(--muted); margin-top:1px; min-height:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .team-field{margin-bottom:12px; flex:none}
  .team-field .fl{font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:600; margin-bottom:3px}
  .team-val{font-size:13px; color:var(--ink-soft); line-height:1.45}
  .team-val.clamp2{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; min-height:38px; word-break:break-word}
  .team-contact{margin-bottom:12px; flex:none; display:flex; flex-direction:column; gap:5px}
  .team-line{min-height:19px}
  .team-line a{display:flex; align-items:center; gap:6px; min-width:0; font-size:12.5px; color:var(--ink-soft); font-weight:500}
  .team-line a span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .team-line .cline-ic{flex:none}
  .km-meta{flex:none; width:210px}
  /* Avtaler-siden: ansvarlige og inntekt/fornyelse i faste kolonner, så radene flukter */
  .av-assignees{flex:none; width:118px; display:flex; align-items:center}
  .av-meta{flex:none; width:190px}
  .ag-go-cust, .ag-revise{margin-left:auto}
  .ag-go-cust + .ag-revise{margin-left:0}      /* begge knappene (kundesiden): ligger sammen til høyre */
  /* Historikk: bare statusboblen og ansvarlig-ikonene dempes (samme 0,7 som døde avtaler på kundekortet, .ag-past) – full styrke ved hover på raden.
     All tekst (kunde, tjeneste, inntekt) er klar hele tiden. */
  .row.av-dead .row-status, .row.av-dead .av-assignees{opacity:.7; transition:opacity .12s}
  .row.av-dead:hover .row-status, .row.av-dead:hover .av-assignees{opacity:1}
  .task-meta{display:flex; align-items:center; gap:12px; margin-left:auto; flex:none}
  /* Avatarene er venstre-anker: fast startlinje uansett én eller flere ansvarlige */
  .task-assignee{width:132px; display:flex; align-items:center; justify-content:flex-start; font-size:12.5px; color:var(--muted); font-weight:500; white-space:nowrap}

  /* Flere ansvarlige – kompakt avatar-stabel (samme avatar-stil som ellers) */
  .assignee-stack{display:inline-flex; align-items:center; min-width:0; max-width:100%}
  .mini-avatars{display:inline-flex; flex-direction:row-reverse; align-items:center; flex:none}
  .mini-avatar{width:22px; height:22px; border-radius:6px; flex:none; display:grid; place-items:center; font-weight:700; font-size:9px; letter-spacing:.3px; color:#fff; font-family:var(--display); box-shadow:0 0 0 2px var(--surface); overflow:hidden}
  .mini-avatar img{width:100%; height:100%; object-fit:contain}
  .mini-avatars .mini-avatar + .mini-avatar{margin-right:-3px}
  .mini-avatar.more{background:var(--surface-2); color:var(--ink-soft); font-weight:600; font-size:10px; margin-left:4px}
  .row:hover .mini-avatar, .task:hover .mini-avatar{box-shadow:0 0 0 2px var(--surface-2)}
  .assignee-names{flex:1; margin-left:7px; font-size:12.5px; color:var(--muted); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}

  /* Navne-boble ved hover – kun når navnene ikke allerede vises (2+ ansvarlige) */
  .assignee-stack.has-tip{position:relative}
  .assignee-stack.has-tip:hover{z-index:10}
  .assignee-stack.has-tip::after{
    content:attr(data-tip);
    position:absolute; left:50%; bottom:calc(100% + 7px);      /* midtstilt over ikonene */
    background:var(--ink); color:#fff;
    font-size:11.5px; font-weight:500; line-height:1.35; letter-spacing:.1px;
    padding:5px 9px; border-radius:7px; white-space:nowrap;
    box-shadow:var(--shadow-lg);
    opacity:0; transform:translate(-50%,3px); pointer-events:none;
    transition:opacity .12s ease, transform .12s ease;
  }
  .assignee-stack.has-tip:hover::after{opacity:1; transform:translate(-50%,0)}

  /* Flervalg av ansvarlige i oppgave-skjemaene */
  .assignee-picker{display:flex; flex-direction:column; gap:2px; max-height:216px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--radius-sm); padding:6px; background:var(--surface)}
  .assignee-picker.empty-hint{padding:14px; font-size:13px; color:var(--muted); text-align:center}
  .assignee-opt{display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:8px; cursor:pointer; font-size:13.5px; color:var(--ink-soft)}
  .assignee-opt:hover{background:var(--surface-2)}
  .assignee-opt input{width:16px; height:16px; accent-color:var(--brand); flex:none; margin:0}
  .assignee-opt .mini-avatar{box-shadow:none}
  .confirm-box .assignee-picker{margin:-8px 0 18px}
  .confirm-box .assignee-opt-name{white-space:normal}
  .assignee-opt-name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

  /* Egendefinert ikonfarge på en ansatt */
  .color-pick{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
  .color-pick-prev{width:38px; height:38px; font-size:14px; flex:none}
  .color-pick-input{width:46px; height:34px; padding:2px; border:1px solid var(--border-strong); border-radius:8px; background:var(--surface); cursor:pointer}
  .color-pick-input::-webkit-color-swatch-wrapper{padding:0}
  .color-pick-input::-webkit-color-swatch{border:none; border-radius:5px}
  .color-pick-hint{font-size:12px; color:var(--muted)}
  .due-slot{width:112px; text-align:right; white-space:nowrap; font-size:12.5px}
  .due-wrap{position:relative; display:inline-block}
  .due-click{cursor:pointer; border:none; background:none; padding:2px 5px; margin:-2px -5px; border-radius:6px; font:inherit; font-weight:600; color:inherit}
  .due-click:hover{background:var(--surface-2)}
  .due-input{position:absolute; right:0; bottom:-2px; width:1px; height:1px; opacity:0; border:0; padding:0; margin:0}
  .td-done{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:var(--ink-soft); cursor:pointer; margin-top:4px}
  .td-done input{width:16px; height:16px; accent-color:var(--brand)}
  .task{cursor:pointer}
  .warn-text{color:var(--amber); font-weight:600}
  .danger-text{color:var(--danger); font-weight:600}

  .empty{padding:34px 20px; text-align:center; color:var(--muted)}
  .empty svg{width:30px; height:30px; opacity:.5; margin-bottom:8px; stroke-width:1.6}
  .empty .t{font-weight:600; color:var(--ink-soft); font-size:14px}
  .empty .d{font-size:13px; margin-top:3px}

  /* Toolbar (filters) */
  .toolbar{display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin-bottom:16px}
  .search{position:relative; flex:1; min-width:200px}
  .search > svg{position:absolute; left:15px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--muted); stroke-width:2}
  .search input{width:100%; padding:11px 16px 11px 38px; border:1px solid var(--border-strong); border-radius:var(--pill); background:var(--surface)}
  .search input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}

  /* Detail (kundekort) */
  .detail{display:grid; grid-template-columns:320px 1fr; gap:20px; align-items:start}
  .detail-col{min-width:0}
  .detail-col > :first-child{margin-top:0}
  .field{margin-bottom:13px}
  .field .fl{font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:600; margin-bottom:3px}
  .field .fv{font-size:14px; word-break:break-word}
  .field .fv a{font-weight:500}
  .panel-pad{padding:20px}
  .tabs{display:flex; gap:4px; padding:4px; background:var(--surface-2); border-radius:var(--pill); margin-top:32px; margin-bottom:16px}
  .tab{flex:1; padding:8px; border:none; background:none; border-radius:var(--pill); font-weight:600; font-size:13px; color:var(--muted)}
  .tab.active{background:var(--surface); color:var(--ink); box-shadow:var(--shadow)}

  /* Timeline */
  .timeline-scroll{max-height:320px; overflow-y:auto}
  .timeline{position:relative; padding-left:26px}
  .timeline::before{content:""; position:absolute; left:8px; top:6px; bottom:6px; width:2px; background:var(--border)}
  .tl-item{position:relative; padding:0 0 18px}
  .tl-item:last-child{padding-bottom:0}
  .tl-row{display:flex; align-items:center; gap:8px}
  .tl-actions{margin-left:auto; display:flex; gap:2px; opacity:0; transition:opacity .12s}
  .tl-item:hover .tl-actions{opacity:1}
  .tl-btn{border:none; background:none; color:var(--muted); width:26px; height:26px; border-radius:7px; display:grid; place-items:center}
  .tl-btn:hover{background:var(--surface-2); color:var(--ink)}
  .tl-btn.del:hover{background:var(--s-tapt-bg); color:var(--danger)}
  .tl-btn svg{width:15px; height:15px; stroke-width:2}
  @media(hover:none){ .tl-actions{opacity:1} }
  .tl-dot{position:absolute; left:-25px; top:2px; width:18px; height:18px; border-radius:50%; background:var(--surface); border:2px solid var(--border-strong); display:grid; place-items:center}
  .tl-dot svg{width:10px; height:10px; stroke-width:2.4}
  .tl-type{font-weight:600; font-size:13.5px}
  .tl-date{font-size:12px; color:var(--muted); margin-left:8px; font-weight:500}
  .tl-date.tl-who{margin-left:4px}
  .act-who{color:#877D8D; font-weight:500; font-size:.9em}
  /* Type-velger i «Registrer kontakt»: runde ikon-knapper i samme stil som .act-dot */
  .act-types{display:flex; gap:8px}
  .act-type{width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center; padding:0; background:var(--surface); border:2px solid var(--border-strong); cursor:pointer; transition:.12s}
  .act-type svg{width:16px; height:16px; stroke-width:2.2}
  .act-type:hover{background:var(--brand-soft)}
  .act-type.on{background:currentColor; border-color:currentColor}
  .act-type.on svg{color:#fff}
  .act-type:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
  /* Kontaktperson-velger: piller med person-ikon, pin på hovedkontakten */
  .tpl-pill.act-ct{display:inline-flex; align-items:center; gap:6px}
  .act-ct-ic{width:14px; height:14px; flex:none; stroke-width:2}
  .act-ct-pin{display:inline-flex; margin-left:1px}
  /* Kundevalg i «Registrer kontakt» fra Oversikt */
  /* Forslagene flyter som et lag over innholdet under (kortet vokser ikke) og scroller inni seg selv ved mange treff */
  #a_cust{position:relative}
  .cust-results{position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:5; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); padding:4px; max-height:220px; overflow-y:auto; overscroll-behavior:contain}
  .cust-results[hidden]{display:none}
  .cust-opt{display:flex; align-items:center; gap:10px; width:100%; padding:7px 10px; border:none; border-radius:10px; background:none; font:inherit; font-size:13.5px; text-align:left; cursor:pointer; color:var(--ink)}
  .cust-opt:hover, .cust-opt.hi{background:var(--brand-soft)}
  .cust-opt .nm, .cust-picked .nm{font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .cust-opt .sub{margin-left:auto; font-size:12px; color:var(--muted); white-space:nowrap}
  .cust-none{padding:10px; font-size:13px; color:var(--muted)}
  /* Søkefelt og valgt-pille har samme faste høyde, så kortet ikke endrer høyde når en kunde velges */
  #a_cust .search input{box-sizing:border-box; height:42px}
  .cust-picked{box-sizing:border-box; height:42px; position:relative; display:flex; align-items:center; gap:10px; padding:0 44px 0 12px; border:1px solid var(--brand); border-radius:var(--pill); background:var(--surface); font-size:13.5px}
  .cust-picked .rcpt-q-clear{right:8px}
  .act-ct-pin{color:var(--brand)}
  /* Hovedkontakt for en avtale: forenklede, klikkbare kontaktkort («Ingen valgt» først) */
  .ag-contacts{display:flex; flex-direction:column; gap:6px}
  .ag-ct{display:flex; align-items:center; gap:10px; width:100%; padding:8px 12px; text-align:left; font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-sm); cursor:pointer; transition:.12s}
  .ag-ct:hover{background:var(--surface-2)}
  .ag-ct.on{background:var(--brand-soft); border-color:var(--brand)}
  .ag-ct-ic{flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--surface-2); color:var(--muted)}
  .ag-ct.on .ag-ct-ic{background:var(--surface); color:var(--brand)}
  .ag-ct-ic svg{width:15px; height:15px; stroke-width:2}
  .ag-ct-txt{display:flex; flex-direction:column; min-width:0; flex:1}
  .ag-ct-name{font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .ag-ct-sub{font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .ag-ct-pin{flex:none; display:inline-flex; color:var(--brand)}
  .ag-ct-pin svg{width:14px; height:14px; stroke-width:2.2}
  .ag-ct.add{border-style:dashed; color:var(--brand-ink)}
  .ag-ct.add .ag-ct-ic{background:var(--brand-soft); color:var(--brand)}
  .act-ct-pin svg{width:13px; height:13px; flex:none; stroke-width:2.2}
  .tl-text{font-size:13.5px; color:var(--ink-soft); margin-top:2px; white-space:pre-wrap}
  .t-samtale{color:var(--s-kontaktet-fg)} .t-epost{color:var(--brand)} .t-mote{color:var(--s-dialog-fg)} .t-melding{color:var(--green)}
  .act-dot{width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--surface); border:2px solid var(--border-strong)}
  .act-dot svg{width:16px; height:16px; stroke-width:2.2}

  /* Tasks */
  .task{display:flex; align-items:flex-start; gap:11px; padding:11px 0; border-bottom:1px solid var(--border)}
  .task:last-child{border-bottom:none}
  .check{width:19px; height:19px; padding:0; -webkit-appearance:none; appearance:none; border-radius:6px; border:2px solid var(--border-strong); background:var(--surface); flex:none; margin-top:1px; display:grid; place-items:center; transition:.12s}
  .check:hover{border-color:var(--brand)}
  .check.done{background:var(--brand); border-color:var(--brand)}
  .check svg{width:12px; height:12px; color:#fff; stroke-width:3; opacity:0; display:block}
  .check.done svg{opacity:1}
  /* Oppgave-avkrysning: fullført = grønn med hake (de andre avkrysningene, f.eks. kontaktvalg, beholder merkefargen) */
  .check[data-toggle].done{background:var(--green); border-color:var(--green)}
  .check[data-toggle]:disabled.done{opacity:1; cursor:default}
  /* Fullfører: teksten nedtones/streker over et øyeblikk, og raden glir så bort (høyde → 0) */
  .row.completing .row-title, .task.completing .task-title{text-decoration:line-through; color:var(--muted); transition:color .15s}
  .row.completing .row-sub, .row.completing .task-meta, .task.completing .task-meta{opacity:.55; transition:opacity .15s}
  .row.task-leaving, .task.task-leaving{height:0 !important; min-height:0 !important; padding-top:0; padding-bottom:0; opacity:0; transform:translateX(24px); overflow:hidden; border-bottom-width:0; margin:0; transition:height .28s ease, padding .28s ease, opacity .22s ease, transform .28s ease}
  .check:disabled{opacity:.35; cursor:not-allowed}
  .check:disabled:hover{border-color:var(--border-strong)}
  .done-head{align-items:center}
  .done-toggle{display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; width:fit-content; padding:4px 10px 4px 6px; margin-left:-6px; border-radius:9px; transition:background .12s}
  .done-toggle:hover{background:var(--surface-2)}
  .done-toggle .chev{width:16px; height:16px; color:var(--muted); transition:transform .18s}
  .done-toggle .chev.open{transform:rotate(180deg)}
  .done-setting{margin-left:auto; display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted); font-weight:500}
  .done-setting select{padding:5px 12px; border:1px solid var(--border-strong); border-radius:var(--pill); background:var(--surface); color:var(--ink); font-weight:600; font-size:12.5px}
  .done-setting select:focus{outline:none; border-color:var(--brand)}
  .done-note{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted); margin:-4px 2px 12px}
  .done-note .note-pin{width:14px; height:14px; color:var(--brand); flex:none}
  .pin{border:none; background:none; color:#B4A9B8; width:38px; height:38px; border-radius:9px; display:grid; place-items:center; flex:none; transition:.12s}
  .pin-slot{width:38px; height:38px; flex:none; display:block}
  .pin:hover{background:var(--surface-2)}
  .pin svg{width:27px; height:27px; stroke-width:1.9}
  .pin.pinned{color:var(--green)}
  .pin.pinned svg{fill:currentColor}
  .contacts-block{margin-top:32px}
  .contacts-head{display:flex; align-items:center; justify-content:space-between; margin:0 2px 10px}
  .contacts-head h3{font-family:var(--display); font-size:14px; font-weight:700; margin:0}
  .contact-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 13px; margin-bottom:10px; box-shadow:var(--shadow)}
  .contact-card.is-primary{border-color:#F3C7D6; background:var(--brand-soft)}
  .contact-row{display:flex; align-items:flex-start; gap:8px}
  .contact-id{flex:1; min-width:0}
  .contact-name{font-weight:600; font-size:14px; display:flex; align-items:center; gap:7px; flex-wrap:wrap}
  .primary-tag{display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--brand-ink); background:#fff; border:1px solid #F3C7D6; padding:1px 7px 1px 5px; border-radius:999px}
  .primary-tag .ptag{width:11px; height:11px; fill:currentColor; stroke:currentColor}
  .contact-role{font-size:12.5px; color:var(--muted); margin-top:2px}
  .contact-actions{display:flex; gap:2px; flex:none}
  .cbtn{border:none; background:none; color:var(--muted); width:28px; height:28px; border-radius:7px; display:grid; place-items:center}
  .cbtn:hover{background:var(--surface-2); color:var(--ink)}
  .cbtn.del:hover{background:var(--s-tapt-bg); color:var(--danger)}
  .cbtn svg{width:15px; height:15px; stroke-width:1.9}
  .contact-lines{margin-top:9px; display:flex; flex-direction:column; gap:5px}
  .contact-lines a{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-soft); font-weight:500; word-break:break-all}
  .contact-lines a:hover{color:var(--brand)}
  .cline-ic{width:13px; height:13px; color:var(--muted); stroke-width:2; flex:none}
  .contact-empty{font-size:13px; color:var(--muted); padding:4px 2px 8px}
  .form-sep{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin:8px 0 12px; padding-top:14px; border-top:1px solid var(--border)}
  .modal-note{font-size:12px; color:var(--muted); margin:4px 0 0}
  .agreement-block{margin-top:16px}
  .ag-head{margin:0 2px 10px}
  .ag-head h3{font-family:var(--display); font-size:14px; font-weight:700; margin:0}
  /* Kompakt avtale-rad: et klikk åpner fullt kort (kundesiden) eller en kort
     forhåndsvisning (pipeline) i en modal – foldes ikke ut på stedet. */
  .ag-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:10px; box-shadow:var(--shadow); overflow:hidden}
  .ag-card-head{display:flex; align-items:center; gap:8px; width:100%; padding:12px 14px; background:none; border:none; cursor:pointer; text-align:left; font:inherit}
  .ag-card-head:hover{background:var(--surface-2)}
  .ag-card-head .chev{width:16px; height:16px; color:var(--muted); flex:none}
  .ag-card-head .chev.go{transform:rotate(-90deg)}
  /* Tidligere (tapte/utgåtte) avtaler på kundekortet: egen, nedtonet del under de levende */
  /* Avsluttet avtale i fullt kort: tydelig, rolig handling for å bruke den som utgangspunkt for en ny */
  .ag-reuse{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:14px 0 4px; padding:10px 14px; border-radius:var(--radius-sm); background:var(--surface-2); border:1px solid var(--border); font-size:13px; color:var(--ink-soft)}
  /* «Håndter avtalene først»: en rad per avtale med valgene Tapt / Utgått / Slett */
  .ag-fates{display:flex; flex-direction:column; gap:8px; margin:6px 0 12px}
  .ag-fate{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface)}
  .ag-pick{display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; text-align:left; font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; transition:.12s}
  .ag-pick:hover{background:var(--brand-soft); border-color:var(--brand)}
  .ag-pick .ag-fate-name{flex:1}
  .ag-pick-box{flex:none; width:18px; height:18px; border-radius:6px; border:1.5px solid var(--border-strong); background:var(--surface); display:grid; place-items:center; color:transparent}
  .ag-pick-box svg{width:12px; height:12px; stroke-width:3}
  .ag-pick.on{background:var(--brand-soft); border-color:var(--brand)}
  .ag-pick.on .ag-pick-box{background:var(--brand); border-color:var(--brand); color:#fff}
  .ag-pick-rev{font-size:12.5px; color:var(--muted); white-space:nowrap}
  .ag-fate-info{display:flex; align-items:center; gap:10px; min-width:0}
  .ag-fate-name{font-weight:600; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .ag-fate-pills .tpl-pill{display:inline-flex; align-items:center; gap:5px}
  .ag-fate-pills .tpl-pill svg{width:13px; height:13px; stroke-width:2}
  .ag-fate-pills .tpl-pill.fate-del.on{background:var(--s-tapt-bg); border-color:var(--danger); color:var(--danger)}
  .ag-past{margin-top:18px}
  .ag-past-head{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin:0 2px 8px}
  .ag-past .ag-card{opacity:.7; box-shadow:none; background:var(--surface-2)}
  .ag-past .ag-card:hover{opacity:1}
  /* «Varsel om å ta kontakt igjen» på Tapt-fanen i Kunder */
  .km-recontact{display:flex; align-items:center; gap:5px; color:var(--s-tapt-fg)}
  .km-recontact svg{width:12px; height:12px; flex:none; stroke-width:2.2}
  .ag-end-tag{flex:none; font-size:10.5px; font-weight:600; line-height:1; padding:3px 8px; border-radius:var(--pill); letter-spacing:.1px}
  .ag-end-tag.tapt{color:var(--s-tapt-fg); background:var(--s-tapt-bg)}
  .ag-end-tag.utgatt{color:var(--s-tapt-fg); background:var(--s-tapt-bg)}   /* Utgått er rød som Tapt – forskjellen vises av teksten */
  .ag-card-name{font-family:var(--display); font-weight:700; font-size:14.5px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .ag-card-revenue{font-size:13px; font-weight:600; color:var(--ink-soft); white-space:nowrap}
  /* Fast bredde, som .row-status i kundelisten – statusboblene flukter
     loddrett uansett hvor lang tjenesten/inntekten foran den er. */
  .ag-card-status{flex:none; width:116px; display:flex; align-items:center}
  /* 2-kolonners rutenett for de korte feltene + egne små seksjons-
     overskrifter (gjenbruker .form-sep) – mindre "vegg av tekst", lettere å skanne. */
  /* auto-fit: 2 kolonner der det er plass (kundekortet), faller selv tilbake
     til 1 kolonne i trange sammenhenger (pipeline-kortet) – samme komponent
     tilpasser seg uten at kalleren trenger å vite hvor den vises. */
  .ag-card-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(110px,1fr)); column-gap:16px}
  /* Fullt avtalekort (modal på kundesiden) og kort forhåndsvisning (pipeline)
     deler samme topp (.ag-summary); det fulle kortet legger til .ag-detail. */
  .ag-detail-modal{max-width:580px}
  .ag-summary-cust{display:flex; align-items:center; gap:12px}
  .ag-summary-deal{margin-top:16px; padding:12px 14px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm)}
  .ag-summary-name{font-family:var(--display); font-weight:700; font-size:17px; overflow-wrap:anywhere}
  .ag-summary-meta{display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:8px}
  .ag-summary-revenue{font-size:14px; font-weight:600; color:var(--ink-soft)}
  .ag-detail{margin-top:6px}
  .ag-detail .field{margin-top:12px; margin-bottom:0}
  .ag-detail .ag-sep{margin:18px 0 2px; padding-top:14px}
  .ag-flag{display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; padding:1px 6px; border-radius:999px; margin-left:4px; vertical-align:middle}
  .ag-flag.auto{color:var(--s-aktiv-fg); background:var(--s-aktiv-bg)}
  .ag-flag.manual{color:var(--s-tilbud-fg); background:var(--s-tilbud-bg)}
  .renewal-status{display:flex; align-items:center; gap:8px; margin-top:5px; font-size:11.5px; color:var(--muted)}
  /* Forslag: legg til ukjent e-postadresse som kontakt */
  .sg-card{padding:6px 0; border-left:3px solid var(--s-kontaktet-fg)}
  .sg-row{display:flex; align-items:center; gap:12px; padding:12px 16px}
  .sg-row + .sg-row{border-top:1px solid var(--border)}
  .sg-ic{flex:none; width:32px; height:32px; border-radius:50%; background:var(--s-kontaktet-bg); color:var(--s-kontaktet-fg); display:grid; place-items:center}
  .sg-ic svg{width:16px; height:16px; stroke-width:1.9}
  .sg-text{flex:1; min-width:0; font-size:13.5px; line-height:1.45; overflow-wrap:anywhere}
  .sg-sub{font-size:12px; color:var(--muted); margin-top:2px}
  .sg-more{padding:8px 16px 10px; font-size:12px; color:var(--muted)}
  .sg-row.call{border-bottom:1px solid var(--border); background:var(--s-kontaktet-bg)}
  .sg-row.call .sg-ic{background:var(--surface)}
  /* Ligger øverst i kortet: følg kortets avrundede hjørner (kortet har ikke overflow:hidden) */
  .sg-row.call:first-child{border-top-left-radius:calc(var(--radius) - 1px); border-top-right-radius:calc(var(--radius) - 1px)}
  .sg-row.call:last-child{border-bottom:none; border-bottom-left-radius:calc(var(--radius) - 1px); border-bottom-right-radius:calc(var(--radius) - 1px)}
  .sg-btn{flex:none; width:34px; height:34px; border-radius:50%; border:1.5px solid; background:var(--surface); display:grid; place-items:center; padding:0; cursor:pointer; transition:.12s}
  .sg-btn svg{width:17px; height:17px; stroke-width:2.6}
  .sg-btn.yes{color:var(--green); border-color:var(--green)}
  .sg-btn.yes:hover{background:var(--green); color:#fff}
  .sg-btn.no{color:var(--danger); border-color:var(--danger)}
  .sg-btn.no:hover{background:var(--danger); color:#fff}
  .cc-top{display:flex; align-items:center; gap:14px; margin-bottom:14px}
  .cc-top .avatar{width:48px; height:48px; font-size:17px; flex:none}
  .cc-edit{margin-left:auto; align-self:flex-start; flex:none}
  .cc-role{font-size:13px; color:var(--ink-soft); margin-top:2px}
  .cc-co{font-size:13px; color:var(--muted); margin-top:3px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
  .cc-info{display:flex; flex-direction:column; gap:6px; padding:12px 0 14px; border-bottom:1px solid var(--border); margin-bottom:14px}
  .cc-info a, .cc-info .muted{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; align-self:flex-start}
  .cc-info a{color:var(--ink-soft)} .cc-info a:hover{color:var(--brand)}
  .cc-info .muted{color:var(--muted)}
  /* Fast høyde: ca. 5 registreringer synlige (en flik av den neste antyder at lista kan rulleres); resten nås ved å rulle i feltet. */
  .cc-log .timeline-scroll{max-height:300px; overscroll-behavior:contain; scrollbar-gutter:stable; padding-right:6px}
  .batch-sub{font-size:13px; color:var(--muted); margin-bottom:12px}
  .batch-list{max-height:320px; overflow-y:auto; border:1px solid var(--border); border-radius:14px}
  .batch-rcpt{display:flex; align-items:baseline; gap:10px; padding:9px 14px; border-bottom:1px solid var(--border); font-size:13.5px}
  .batch-rcpt:last-child{border-bottom:0}
  .batch-name{font-weight:600; min-width:0; overflow-wrap:anywhere}
  .batch-mail{color:var(--muted); font-size:12.5px; min-width:0; overflow-wrap:anywhere}
  .cc-log-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
  .cc-log-h{font-family:var(--display); font-weight:700; font-size:14px}
  .loose-av{background:var(--surface-2); color:var(--muted); border:1px dashed var(--border-strong)}
  .loose-av svg{width:55%; height:55%; stroke-width:1.8}
  .rem-row{display:flex; align-items:center; gap:7px; font-size:13px; margin-bottom:4px}
  .rem-dot{width:7px; height:7px; border-radius:50%; background:var(--amber); flex:none}
  .rem-row .linklike{margin-left:2px}
  /* Kommentar-redigering inni «Varsle meg senere»: liten og rolig, inline */
  .sn-note{margin-top:12px; font-size:12px}
  .sn-note [hidden]{display:none !important}
  .sn-note-view{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
  .sn-note-cur{color:var(--muted); overflow-wrap:anywhere}
  .sn-note-edit{display:flex; align-items:center; gap:10px}
  .sn-note-edit .inp{flex:1; min-width:0; padding:7px 10px; font-size:13px}
  .sn-note-edit .linklike{flex:none}
  .sn-cancel{color:var(--muted)}
  .rem-note{font-size:12px; color:var(--muted); margin:-2px 0 6px 14px; overflow-wrap:anywhere}
  .al-note{display:flex; align-items:flex-start; gap:6px; margin-top:4px; font-size:12.5px; color:var(--ink-soft); overflow-wrap:anywhere}
  .al-note svg{width:13px; height:13px; flex:none; margin-top:2px; color:var(--muted)}
  .rem-dot.off{background:var(--border-strong)}
  .rem-opt{margin-top:6px}
  .ag-alert-opt{margin-top:6px; font-size:12px}
  .ag-alert-opt [hidden]{display:none}
  .ag-alert-set{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
  .ag-alert-set label{font-size:12px; color:var(--muted); font-weight:600}
  .ag-alert-set .inp{width:auto; padding:6px 10px; font-size:13px}
  .linklike{border:none; background:none; color:var(--link); font-weight:600; font-size:11.5px; cursor:pointer; padding:0; text-decoration:underline}
  .notes-block{margin-top:32px}
  .notes-head{margin:0 2px 10px}
  .notes-head h3{font-family:var(--display); font-size:14px; font-weight:700; margin:0}
  .notes-grid{display:grid; grid-template-columns:repeat(auto-fill, 150px); gap:10px; justify-content:start; margin-bottom:12px}
  .note-card{position:relative; width:150px; aspect-ratio:1/1; display:flex; flex-direction:column; background:#FBF3CB; border-radius:4px; padding:12px 12px 9px; box-shadow:0 1px 2px rgba(90,80,25,.07), 0 5px 13px rgba(120,105,30,.11); cursor:grab; overflow:hidden}
  .note-card:active{cursor:grabbing}
  .note-text{flex:1; min-height:0; font-size:13px; line-height:1.45; color:#4B4326; white-space:pre-wrap; word-break:break-word; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5}
  .note-actions{display:flex; gap:2px; justify-content:flex-end; margin-top:8px; opacity:0; transition:opacity .12s}
  .note-foot{display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:8px}
  .note-foot .note-actions{margin:0 0 0 auto}
  .note-date{min-width:0; font-size:10.5px; line-height:1; color:#70683A; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .note-card:hover .note-actions{opacity:1}
  .nbtn{border:none; background:rgba(75,67,38,.06); color:#6B6230; width:24px; height:24px; border-radius:6px; display:grid; place-items:center}
  .nbtn:hover{background:rgba(75,67,38,.14)}
  .nbtn.del:hover{background:var(--s-tapt-bg); color:var(--danger)}
  .nbtn svg{width:13px; height:13px; stroke-width:2}
  .note-card.dragging{opacity:.4}
  .note-card.drop-target{outline:2px dashed #D9C97A; outline-offset:2px}
  .tpl-card{display:flex; flex-direction:column; cursor:grab}
  .tpl-body{font-size:13px; color:var(--ink-soft); white-space:pre-wrap; min-height:120px; max-height:120px; overflow:hidden; line-height:1.5; margin-bottom:16px; -webkit-mask-image:linear-gradient(#000 70%,transparent)}
  .tpl-card:active{cursor:grabbing}
  .tpl-card-fixed, .tpl-card-fixed:active{cursor:default}
  .tpl-card.dragging{opacity:.4}
  .tpl-card.drop-target{outline:2px dashed var(--brand); outline-offset:2px}
  .tpl-actions{margin-top:auto; align-self:flex-start; display:flex; gap:8px; flex-wrap:wrap}
  @media(hover:none){ .note-actions{opacity:1} }
  .task-body{flex:1; min-width:0}
  .task-title{font-weight:500; font-size:14px}
  .task.completed .task-title{text-decoration:line-through; color:var(--muted)}
  .task-meta{font-size:12px; color:var(--muted); margin-top:2px; display:flex; gap:8px; flex-wrap:wrap; align-items:center}
  .due{font-weight:600}
  .due.overdue{color:var(--danger)} .due.soon{color:var(--amber)}

  /* Pipeline */
  /* Kolonnetall varierer per fane (4 for Leads, 3 for Avtaler) – selve
     grid-template-columns settes derfor inline per rendering. */
  .pipeline{display:grid; gap:12px; overflow-x:auto; padding-bottom:8px}
  /* border-color settes inline per kolonne (samme farge som overskriften) –
     border-bredden økes litt her så fargen faktisk er synlig. */
  /* Kolonnesporet får en svært lys tone av kolonnens statusfarge: statusboblens bakgrunn (--s-*-bg) blandet 70/30 med hvitt, så tonen er ren (ikke grå). De hvite kortene røres ikke. */
  .pl-col[data-col=prospekt]{--col-bg:var(--s-prospekt-bg)}
  .pl-col[data-col=kontaktet]{--col-bg:var(--s-kontaktet-bg)}
  .pl-col[data-col=dialog]{--col-bg:var(--s-dialog-bg)}
  .pl-col[data-col=tapt], .pl-col[data-col=tapt_avtale]{--col-bg:var(--s-tapt-bg)}
  .pl-col[data-col=mulig]{--col-bg:var(--s-mulig-bg)}
  .pl-col[data-col=tilbud_sendt]{--col-bg:var(--s-tilbud-bg)}
  .pl-col[data-col=aktiv]{--col-bg:var(--s-aktiv-bg)}
  .pl-col{background:var(--surface-2); background:color-mix(in srgb, var(--col-bg, var(--surface-2)) 70%, #fff); border:1.5px solid var(--border); border-radius:var(--radius); padding:10px; min-height:120px; transition:.12s}
  .pl-col.dragover{background:var(--brand-soft); border-color:var(--brand)}
  /* Dra et lead over til Avtaler-fanen */
  .pl-offscreen{position:absolute; left:-10000px; top:0; width:100%; visibility:hidden; pointer-events:none}
  .pl-drag-host[hidden]{display:none}
  .lead-drag-active .pl-col.lead-drop-no{opacity:.45}
  .lead-drag-active .pl-col.lead-drop-ok{border-style:dashed}
  .lead-drag-active .pl-col.lead-drop-ok.dragover{border-style:solid; background:var(--brand-soft); border-color:var(--brand); box-shadow:0 0 0 4px rgba(200,40,95,.16)}
  .tab{position:relative; overflow:hidden}
  .tab.hover-switch{background:var(--brand-soft); color:var(--brand-ink)}
  .tab.hover-switch::after{content:''; position:absolute; left:0; bottom:0; height:3px; width:0; background:var(--brand); animation:tabFill 1s linear forwards}
  @keyframes tabFill{from{width:0}to{width:100%}}
  .pl-head{display:flex; align-items:center; justify-content:space-between; padding:2px 4px 10px; font-weight:600; font-size:13px}
  .pl-head .n{font-size:11px; color:var(--muted); background:var(--surface); padding:1px 7px; border-radius:999px}
  .pl-head-title{font:inherit; font-weight:600; font-size:13px; background:none; border:none; padding:3px 9px; margin:-3px -9px; border-radius:999px; cursor:pointer; text-align:left; transition:.12s}
  .pl-head-title:hover{background:var(--brand-soft); color:var(--brand-strong) !important}
  .pl-head-title:focus-visible{outline:2px solid var(--brand); outline-offset:1px}
  /* Filter-komponent (chips + filterpanel + aktive filtre) */
  .chips{display:flex; flex-wrap:wrap; gap:7px}
  .chip{display:inline-flex; align-items:center}
  .chip:disabled{opacity:.45; cursor:not-allowed}
  .tgl-wrap{display:inline-flex; cursor:not-allowed}
  .chip-dot{width:8px; height:8px; border-radius:50%; margin-right:7px; flex:none}
  .fbar-toolbar{margin-bottom:12px}
  .search .rcpt-q-clear{right:10px}
  .search:has(.rcpt-q-clear) input{padding-right:42px}
  /* Rund knapp helt til høyre i søkefeltet (Registrer kontakt → Velg aktør) */
  .search-pick{position:absolute; right:7px; top:50%; transform:translateY(-50%); width:28px; height:28px; border:none; border-radius:50%; background:var(--surface-2); color:var(--muted); padding:0; cursor:pointer; transition:.12s}
  .search-pick svg{position:absolute; inset:0; margin:auto; width:15px; height:15px; stroke-width:2}
  .search-pick:hover{background:var(--border); color:var(--ink)}
  .search-pick.on{background:var(--brand-soft); color:var(--brand-ink)}
  .search:has(.search-pick) input{padding-right:46px}
  .search .rcpt-q-clear.search-clear{right:40px}   /* til venstre for «Velg aktør»-knappen */
  .search:has(.search-clear:not([hidden])) input{padding-right:74px}
  /* av/på-filter (Hovedkontakter): chip med liten bryter, tydelig skilt fra de gjensidig utelukkende chip-radene */
  .fbar-toggles{padding-left:28px; border-left:1px solid var(--border-strong)}
  .chip.tgl{gap:9px}
  .tgl-sw{position:relative; width:24px; height:14px; border-radius:var(--pill); background:var(--border-strong); flex:none; transition:background .12s}
  .tgl-knob{position:absolute; top:2px; left:2px; width:10px; height:10px; border-radius:50%; background:#fff; transition:transform .12s}
  .chip.tgl.on .tgl-sw{background:var(--brand)}
  .chip.tgl.on .tgl-knob{transform:translateX(10px)}
  .fbar-btn{gap:7px}
  .fbar-btn svg{width:16px; height:16px}
  .fbar-btn.has-active{border-color:var(--brand); background:var(--brand-soft); color:var(--brand-ink)}
  .fbar-count{display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:var(--pill); background:var(--brand); color:#fff; font-size:11.5px; font-weight:700}
  .fbar-quicks{display:flex; flex-wrap:wrap; gap:10px 28px; margin-bottom:14px}
  .fbar-quicks .fbar-quick{margin-bottom:0}
  .fbar-quick{display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-bottom:14px}
  .fbar-quick-label{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--muted)}
  .fbar-active{display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-bottom:14px; padding:9px 12px; border-radius:var(--radius-sm); background:var(--brand-soft); border:1px solid rgba(200,40,95,.18)}
  .fbar-active-label{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--brand-ink); margin-right:2px}
  /* X-knappen er forankret til pillens høyre kant (fast 5 px fra kanten) – pillen reserverer plass til den med padding-right, så X-en står i ro i pillen uansett hva som står foran. */
  .chip.fchip{position:relative; display:inline-flex; align-items:center; padding:4px 28px 4px 12px; background:var(--surface); border-color:var(--brand); color:var(--brand-ink); font-weight:600; cursor:default}
  .chip.fchip:hover{background:var(--surface); color:var(--brand-ink)}
  /* Fast 20 px rund knapp (skrumper aldri, uansett hvor lang teksten foran er); X-ikonet sentreres med absolutt posisjon. */
  .fchip > span{min-width:0; overflow:hidden; text-overflow:ellipsis; padding-right:9px}      /* fast luft mellom teksten og X-rundingen (X-en selv er forankret til kanten) */
  .fchip button{position:absolute; right:5px; top:50%; margin-top:-10px; border:none; background:var(--brand-soft); color:var(--brand-ink); width:20px; height:20px; padding:0; border-radius:50%; display:block; cursor:pointer}
  .fchip button:hover{background:var(--brand); color:#fff}
  .fchip button svg{position:absolute; inset:0; margin:auto; width:10px; height:10px; stroke-width:2.6}      /* partall i partall: ingen halvpiksel-uskarphet som ser ut som skjevhet */
  .fbar-shown{font-size:12px; color:var(--muted); margin-left:6px}
  .fbar-reset{margin-left:auto; border:none; background:none; padding:4px 8px; font:inherit; font-size:12.5px; font-weight:600; color:var(--brand-strong); text-decoration:underline; text-underline-offset:2px; cursor:pointer; border-radius:var(--pill)}
  .fbar-reset:hover{background:rgba(200,40,95,.1)}
  .filter-panel .fp-body{flex:1; min-height:0; overflow:auto; padding:2px 22px 12px}
  .fp-group{margin-bottom:20px}
  .fp-label{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin-bottom:8px}
  .fp-foot{display:flex; align-items:center; gap:9px; padding:14px 22px 20px; border-top:1px solid var(--border)}
  .fp-count{margin-right:auto; font-size:12.5px; font-weight:600; color:var(--muted)}
  /* Bred kolonnevisning */
  .col-panel{position:fixed; top:0; right:0; bottom:0; width:min(560px,100%); z-index:3; background:var(--canvas); box-shadow:var(--shadow-lg); display:flex; flex-direction:column; animation:rcptIn .2s ease-out}
  /* Kolonnevisningen (openColumnPanel) som stort, midtstilt kort i overlayet i stedet for sidepanel (Filter-panelet er fortsatt et sidepanel) */
  .col-panel.col-modal{position:relative; top:auto; right:auto; bottom:auto; width:100%; max-width:820px; max-height:88vh; border-radius:22px; overflow:hidden; animation:pop .18s cubic-bezier(.2,.9,.3,1.2)}
  .col-modal .col-panel-head{padding:22px 26px 14px}
  .col-modal .col-panel-list{margin:0 26px 26px}
  .col-panel-head{display:flex; align-items:center; gap:10px; padding:20px 22px 14px}
  .col-panel-head h3{font-family:var(--display); font-size:19px; margin:0; font-weight:700; letter-spacing:-.4px; display:flex; align-items:center; gap:10px; color:var(--col, var(--ink))}
  .col-dot{width:10px; height:10px; border-radius:50%; background:var(--col); flex:none}
  .col-count{font-size:12px; font-weight:600; color:var(--muted); background:var(--surface); padding:2px 9px; border-radius:var(--pill); border:1px solid var(--border)}
  .col-panel-head .modal-close{margin-left:auto}
  .col-panel-list{flex:0 1 auto; min-height:0; overflow:auto; margin:0 22px 22px}
  .col-panel-list .row:last-child{border-bottom:none}
  .col-row{cursor:pointer}
  .col-row:hover{background:var(--surface-2)}
  .col-row:focus-visible{outline:2px solid var(--brand); outline-offset:-2px}
  .col-row .row-title, .col-row .row-sub{white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere}
  .pl-head-right{display:flex; align-items:center; gap:6px}
  .pl-head-add{display:flex; align-items:center; justify-content:center; width:20px; height:20px; padding:0; border:none; border-radius:999px; background:var(--surface); color:var(--muted); cursor:pointer; transition:.12s}
  .pl-head-add:hover{background:var(--brand-soft); color:var(--brand-strong)}
  .pl-head-add svg{width:12px; height:12px; stroke-width:2.5}
  .pl-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 11px; margin-bottom:8px; cursor:grab; box-shadow:var(--shadow)}
  .pl-card:active{cursor:grabbing}
  .pl-card-top{display:flex; align-items:center; gap:8px}
  .pl-card .nm{font-family:var(--display); font-weight:700; font-size:14px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .pl-card .co{font-size:12px; color:var(--muted); margin-top:5px}
  .pl-card.dragging{opacity:.4}
  /* Avtale-kort i pipeline-tavlen (gjenbruker .ag-card) er dra-bare */
  .ag-card[draggable="true"]{cursor:grab}
  .ag-card[draggable="true"]:active{cursor:grabbing}
  .ag-card.dragging{opacity:.4}
  /* Samlekort: flere avtaler for samme kunde i samme kolonne, kollapset til
     ett kort med antall – foldes ut til enkeltavtaler (agreementCard) ved klikk.
     Kunde-raden (pl-group-head) har bevisst en annen bakgrunn og en grønn
     "N avtaler"-boble, så den ikke er til forveksling med de hvite avtale-
     kortene den folder ut til – to ulike nedtrekksnivåer skal se ulike ut. */
  .pl-group{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:8px; box-shadow:var(--shadow); overflow:hidden}
  .pl-group-head{display:flex; align-items:center; gap:8px; width:100%; padding:10px 11px; background:var(--surface-2); border:none; cursor:pointer; text-align:left; font:inherit}
  .pl-group-head:hover{background:var(--brand-soft)}
  .pl-group.expanded .pl-group-head{border-bottom:1px solid var(--border)}
  .pl-group-head .chev{width:14px; height:14px; color:var(--muted); flex:none; transition:transform .18s}
  .pl-group-head .chev.open{transform:rotate(180deg)}
  .pl-group-head .nm{font-family:var(--display); font-weight:700; font-size:14.5px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .pl-group-count{font-size:11px; font-weight:700; color:var(--s-aktiv-fg); background:var(--s-aktiv-bg); padding:2px 8px; border-radius:999px; white-space:nowrap}
  .pl-group-count.tone-tilbud{color:var(--s-tilbud-fg); background:var(--s-tilbud-bg)}
  .pl-group-count.tone-mulig{color:var(--s-mulig-fg); background:var(--s-mulig-bg)}
  .pl-group-count.tone-tapt{color:var(--s-tapt-fg); background:var(--s-tapt-bg)}      /* bare tapte/utgåtte avtaler = rød */
  .pl-group-body{padding:8px}
  .pl-group-body .ag-card{margin-bottom:6px}
  .pl-group-body .ag-card:last-child{margin-bottom:0}

  /* Modal */
  .overlay{position:fixed; inset:0; background:rgba(35,27,43,.46); backdrop-filter:blur(3px); z-index:100; display:grid; place-items:center; padding:20px; animation:fade .15s}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  .modal{background:var(--surface); border-radius:22px; box-shadow:var(--shadow-lg); width:100%; max-width:520px; max-height:90vh; overflow:auto; animation:pop .18s cubic-bezier(.2,.9,.3,1.2)}
  .modal.wide{max-width:640px}
  @keyframes pop{from{transform:translateY(12px) scale(.98); opacity:0}to{transform:none; opacity:1}}
  .modal-head{padding:20px 22px 4px; display:flex; align-items:center}
  .modal-head h3{font-family:var(--display); font-size:19px; margin:0; font-weight:700; letter-spacing:-.4px}
  .modal-close{margin-left:auto; border:none; background:var(--surface-2); width:30px; height:30px; border-radius:8px; color:var(--muted); display:grid; place-items:center}
  .modal-close:hover{background:var(--border)}
  .modal-body{padding:16px 22px 22px}
  .modal-foot{display:flex; gap:9px; justify-content:flex-end; padding:0 22px 22px}

  /* E-post: mottakervelger (chips i vinduet + sidepanel) */
  .rcpt-label-row{display:flex; align-items:baseline; justify-content:space-between}
  .rcpt-box{display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:8px 10px; min-height:48px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface)}
  .rcpt-chips{display:contents}
  .rcpt-empty{font-size:13px; color:var(--muted); margin-right:auto; padding-left:3px}
  .rcpt-chip{display:inline-flex; align-items:center; gap:2px; max-width:100%; padding:3px 4px 3px 11px; border-radius:var(--pill); background:var(--surface-2); border:1px solid var(--border); font-size:12.5px; font-weight:500; color:var(--ink)}
  .rcpt-chip.free{background:var(--surface); border-style:dashed; border-color:var(--border-strong)}
  .rcpt-chip-t{max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .rcpt-chip-x{border:none; background:transparent; width:20px; height:20px; padding:0; border-radius:50%; display:grid; place-items:center; color:var(--muted); flex:none}
  .rcpt-chip-x:hover{background:var(--border); color:var(--ink)}
  .rcpt-chip-x svg{width:11px; height:11px; stroke-width:2.4}
  .rcpt-pick{margin-left:auto}
  .rcpt-pick svg{width:15px; height:15px}
  .field-err{font-size:12.5px; color:var(--danger); line-height:1.4; margin-top:6px}
  .inp.inp-err{border-color:var(--danger)}
  .rcpt-hint{font-size:12px; color:var(--muted); margin-top:6px}
  .rcpt-hint:empty{display:none}
  /* Innstillinger */
  .settings-page{max-width:760px}
  .settings-section{padding:22px 24px; margin-bottom:18px}
  .settings-head h2{font-family:var(--display); font-size:17px; font-weight:700; letter-spacing:-.3px; margin:0 0 4px}
  .settings-head p{margin:0 0 16px; font-size:13px; color:var(--muted); line-height:1.5}
  .svc-add{display:flex; gap:9px; margin-bottom:14px}
  .svc-add .inp{flex:1; min-width:0}
  .svc-list{border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; background:var(--surface)}
  .svc-row{display:flex; align-items:center; gap:10px; padding:9px 10px 9px 12px; border-bottom:1px solid var(--border); background:var(--surface); cursor:grab}
  .svc-row:last-child{border-bottom:none}
  .svc-row:hover{background:var(--surface-2)}
  .svc-row:active{cursor:grabbing}
  .svc-row.dragging{opacity:.4}
  .svc-row.drop-target{box-shadow:inset 0 2px 0 var(--brand)}
  .svc-grip{color:var(--border-strong); display:grid; place-items:center; flex:none}
  .svc-grip svg{width:16px; height:16px; stroke-width:2.4}
  .svc-name{flex:1; min-width:0; font-weight:500; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .svc-use{font-size:12px; color:var(--muted); white-space:nowrap}
  .svc-empty{padding:22px 16px; text-align:center; color:var(--muted); font-size:13px; border:1px dashed var(--border-strong); border-radius:var(--radius-sm)}
  .svc-note{margin-top:12px; font-size:12px; color:var(--muted)}
  /* E-postutkast på E-postmaler-siden */
  .drafts-block{margin-bottom:26px}
  .drafts-head{display:flex; align-items:baseline; gap:8px; margin:0 2px 10px}
  .drafts-block-head{margin:0 2px 10px}
  .drafts-block-head h3{font-family:var(--display); font-size:14px; font-weight:700; margin:0}
  .drafts-head h3{font-family:var(--display); font-size:14px; font-weight:700; margin:0}
  .draft-row{cursor:pointer}
  .draft-row:hover{background:var(--surface-2)}
  .draft-row:last-child{border-bottom:none}
  .draft-row:focus-visible{outline:2px solid var(--brand); outline-offset:-2px}
  .draft-ic{background:var(--brand-soft); color:var(--brand-ink)}
  .draft-ic svg{width:18px; height:18px; stroke-width:1.8}
  .draft-meta{font-size:12px; color:var(--muted); white-space:nowrap}
  /* Bekreftelse ved lukking av endret e-post */
  .confirm-layer{position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:20px; background:rgba(35,27,43,.38); animation:fade .12s}
  .confirm-box{background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-lg); width:100%; max-width:420px; padding:22px 24px 20px; animation:pop .16s cubic-bezier(.2,.9,.3,1.2)}
  .confirm-box h3{font-family:var(--display); font-size:17px; font-weight:700; letter-spacing:-.3px; margin:0 0 6px}
  .confirm-box p{margin:0 0 18px; font-size:13px; color:var(--muted)}
  .confirm-actions{display:flex; flex-wrap:wrap; gap:9px; justify-content:flex-end}

  /* Mal-velger: piller i stedet for nedtrekk */
  .tpl-pills{display:flex; flex-wrap:wrap; gap:7px}
  .tpl-pill, .chip{font:inherit; font-size:13px; font-weight:500; padding:7px 14px; border-radius:var(--pill); border:1px solid var(--border-strong); background:var(--surface); color:var(--ink-soft); cursor:pointer; transition:.12s; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .tpl-pill:hover, .chip:hover{background:var(--surface-2); color:var(--ink)}
  .tpl-pill.on, .chip.on{background:var(--brand-soft); border-color:var(--brand); color:var(--brand-ink); font-weight:600}
  .tpl-pill.legacy{border-style:dashed}
  .tpl-pill.svc-add-pill{display:inline-flex; align-items:center; padding:7px 11px; color:var(--muted)}
  .tpl-pill.svc-add-pill svg{width:14px; height:14px; stroke-width:2.2}
  .confirm-box .inp{margin:-4px 0 18px}
  .tpl-pill:disabled{opacity:.45; cursor:not-allowed}
  .tpl-pill.revive-pill{display:inline-flex; align-items:center}   /* fargeprikk (.chip-dot) foran teksten */
  .tpl-pill:focus-visible, .chip:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
  .rcpt-panel{position:fixed; top:0; right:0; bottom:0; width:min(420px,100%); z-index:3; background:var(--canvas); box-shadow:var(--shadow-lg); display:flex; flex-direction:column; animation:rcptIn .2s ease-out}
  @keyframes rcptIn{from{transform:translateX(28px); opacity:0}to{transform:none; opacity:1}}
  .rcpt-panel-head{display:flex; align-items:center; padding:20px 22px 14px}
  .rcpt-panel-head h3{font-family:var(--display); font-size:19px; margin:0; font-weight:700; letter-spacing:-.4px}
  .rcpt-search{padding:0 22px 14px}
  .rcpt-searchbox{position:relative}
  .rcpt-searchbox .inp{padding-right:40px}
  .rcpt-q-clear{position:absolute; right:7px; top:50%; transform:translateY(-50%); width:26px; height:26px; border:none; border-radius:50%; background:var(--surface-2); color:var(--muted); display:block; padding:0; cursor:pointer}
  .rcpt-q-clear[hidden]{display:none}
  .rcpt-q-clear:hover{background:var(--border); color:var(--ink)}
  /* X-ikonet sentreres med absolutt posisjon (inset:0 + margin:auto) – uavhengig av hvordan nettleseren legger ut innholdet i en knapp */
  .rcpt-q-clear svg{position:absolute; inset:0; margin:auto; width:12px; height:12px; stroke-width:2.4}
  .rcpt-viewbar{display:flex; align-items:center; gap:10px; padding:0 22px 10px}
  .rcpt-viewbar[hidden]{display:none}
  .rcpt-viewbar .btn svg{width:14px; height:14px}
  .flip-x{transform:scaleX(-1)}
  .rcpt-viewlabel{font-size:12.5px; font-weight:600; color:var(--muted)}
  .rcpt-count{font:inherit; font-size:12.5px; font-weight:600; color:var(--link); background:transparent; border:none; padding:6px 10px; margin:0 auto 0 -10px; border-radius:var(--pill); cursor:pointer}
  .rcpt-count:hover{background:var(--surface-2)}
  .rcpt-count.on{background:var(--brand-soft); color:var(--brand-ink)}
  .rcpt-count:disabled{color:var(--muted); cursor:default; background:transparent}
  .rcpt-free-av{background:var(--surface-2); color:var(--muted); border:1px dashed var(--border-strong)}
  .rcpt-free-av svg{width:18px; height:18px; stroke-width:1.8}
  #rp_add:not(:empty){margin-top:10px}
  .rcpt-add{width:100%; justify-content:center; background:var(--brand-soft); border-color:transparent; color:var(--brand-ink); font-weight:600}
  .rcpt-add:hover{background:#F8DCE7}
  .rcpt-add span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
  .rcpt-msg.err{font-size:12.5px; color:var(--danger); line-height:1.4}
  .rcpt-note{font-size:12.5px; color:var(--muted); line-height:1.4}
  .rcpt-list{flex:1; min-height:0; overflow:auto; margin:0 22px}
  .rcpt-list .row{cursor:pointer}
  .rcpt-list .row:last-child{border-bottom:none}
  .rcpt-list .row.row-disabled{cursor:default; opacity:.55}
  .rcpt-section{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); padding:12px 18px 6px}
  .rcpt-none{padding:22px 18px; font-size:13px; color:var(--muted); text-align:center}
  .rcpt-panel-foot{display:flex; align-items:center; gap:9px; padding:14px 22px 20px}

  /* Feiring ved ny aktiv kunde */
  #celebrate-confetti{position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none}
  .celebrate-modal{max-width:360px; text-align:center; position:relative}
  .celebrate-body{padding:36px 28px 8px}
  .celebrate-icon{width:42px; height:42px; margin:0 auto 14px; color:var(--brand)}
  .celebrate-icon svg{width:100%; height:100%; stroke-width:1.6}
  .celebrate-text{font-family:var(--display); font-size:19px; font-weight:700; color:var(--ink); margin:0}
  .celebrate-foot{justify-content:center; padding:20px 28px 28px}
  .form-row{margin-bottom:13px}
  .form-row.two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
  label.fl{display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:5px}
  .inp{width:100%; padding:10px 13px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink)}
  .inp:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
  textarea.inp{resize:vertical; min-height:74px; line-height:1.5}

  /* Toast */
  .toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; padding:11px 18px; border-radius:11px; font-weight:500; font-size:13.5px; box-shadow:var(--shadow-lg); opacity:0; transition:.25s; z-index:200; display:flex; gap:9px; align-items:center}
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
  .toast svg{width:16px; height:16px; color:#7EE0B0; stroke-width:2.4}


  .mobile-menu{display:none}
  @media(max-width:860px){
    .app{grid-template-columns:1fr}
    .sidebar{position:fixed; left:0; top:0; z-index:60; width:236px; transform:translateX(-100%); transition:.22s; box-shadow:var(--shadow-lg)}
    .sidebar.open{transform:none}
    .mobile-menu{display:inline-grid; place-items:center; width:38px; height:38px; border-radius:var(--pill); border:1px solid var(--border-strong); background:var(--surface)}
    .mobile-menu svg{width:19px; height:19px}
    .scrim{position:fixed; inset:0; background:rgba(35,27,43,.38); z-index:55}
    .detail{grid-template-columns:1fr}
    .topbar,.content{padding-left:18px; padding-right:18px}
  }
  @media(max-width:1000px){ .fin-row{grid-template-columns:1fr} }
  @media(max-width:860px){ .top-row{grid-template-columns:1fr; gap:14px} .kpis{flex-direction:row; gap:6px 24px; flex-wrap:wrap} }
  @media(max-width:760px){ .dn-row{grid-template-columns:1fr} .econ-grid{grid-template-columns:1fr; gap:14px} .econ-t, .econ-t:first-child, .econ-t:last-child{padding:0} .econ-t + .econ-t{border-left:none; border-top:1px solid rgba(255,255,255,.13); padding-top:14px} .fin-card, .dn-card{padding:18px 18px} }
  @media(max-width:520px){ .form-row.two{grid-template-columns:1fr} .task-assignee{width:78px} .task-assignee .assignee-names{display:none} .due-slot{width:96px} .row-lead{width:74px} }

  /* Innlogging (Supabase Auth) */
  .auth-screen{min-height:100vh; display:grid; place-items:center; background:var(--canvas); padding:20px}
  .auth-card{width:100%; max-width:360px; text-align:center; padding:38px 32px}
  .auth-mark{width:44px; height:44px; font-size:20px; margin:0 auto 16px}
  .auth-title{font-family:var(--display); font-size:20px; font-weight:700; color:var(--ink)}
  .auth-sub{font-size:13px; color:var(--muted); margin:4px 0 24px}
  .auth-card .form-row{text-align:left}
  .auth-error{background:var(--s-tapt-bg); color:var(--s-tapt-fg); font-size:12.5px; font-weight:500; padding:9px 12px; border-radius:9px; margin-bottom:14px; text-align:left}
  .auth-loading{color:var(--muted); font-size:13px}
  .modal.narrow{max-width:440px}
  .modal.narrow .modal-foot{flex-wrap:wrap}
  .pv-title{font-family:var(--display); font-weight:700; font-size:17px; min-width:0; overflow-wrap:anywhere}
  /* Ansvarlige-felt: ren visning (avatar + navn) med blyant for å redigere */
  .assignee-field-head{display:flex; align-items:center; gap:6px; margin-bottom:6px}
  .assignee-field-head label.fl{margin:0}
  .assignee-field-head .fl{margin-bottom:0}   /* ellers løfter .field .fl sin margin teksten litt over blyantens midtlinje */
  .assignee-edit{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; border:none; border-radius:7px; background:none; color:var(--muted); cursor:pointer; transition:.12s}
  .assignee-edit:hover, .assignee-edit.active{background:var(--brand-soft); color:var(--brand-strong)}
  .assignee-edit svg{width:14px; height:14px; stroke-width:2}
  .assignee-view{display:flex; flex-direction:column; gap:7px}
  .assignee-view-row{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink)}
  .assignee-view-row .mini-avatar{box-shadow:none}
  /* Avatar-bokstav (se avL() i app.js): SVG-tekst som følger boksens
     pikselsnapping, midtstilt på cap-høyde. Alle ikoner med forbokstav bruker
     dette – nye bruk arver riktig sentrering automatisk så lenge bokstaven
     bygges med avL(). */
  .avatar, .mini-avatar, .logo-preview{position:relative}
  .av-l{position:absolute; left:0; top:0; width:100%; height:100%; display:block; pointer-events:none}
  /* Forskyvningen settes av centerAvatarLetter() (app.js) ut fra den målte
     blekk-boksen. Frem til den er målt brukes en grov cap-høyde-antakelse. */
  .av-t{fill:currentColor}
  .av-g{fill:currentColor}
  .av-t:not([data-c]){transform:translateY(.36em)}
  .brand-mark .av-t{letter-spacing:0}
  /* Ansvarlige på avtaler: kun ikoner i kompakt liste (fast kolonne), full
     visning med blyant i det fulle kortet. */
  .ag-card-assignees{flex:none; width:42px; display:flex; align-items:center}
  .ag-card-assignees .mini-avatar.more{margin-left:-3px}
  .ag-card-head:hover .mini-avatar{box-shadow:0 0 0 2px var(--surface-2)}
  .ag-assignees .fl{margin-bottom:0}
  .ag-assignees .assignee-field-head{margin-bottom:8px}
  .ag-assignees .assignee-view-row{min-height:22px}

/* ---------- Hvilende bedrifter / Bedrifter-siden ---------- */
.nav-sep{height:1px; background:rgba(255,255,255,.12); margin:16px 10px 10px}        /* skiller register (Bedrifter, Sydeteamet) fra daglig arbeidsflyt */
.dormant-mark{--moon-fill:#F9D96E; --moon-line:var(--ink); display:inline-flex; align-items:center; line-height:1}        /* halvmåne: gul fyll, mørk outline (samme overalt) */
.dormant-mark svg{width:21px; height:21px; fill:var(--moon-fill); stroke:var(--moon-line); stroke-width:1.3}
.dormant-mark.big svg{width:30px; height:30px; stroke-width:1.2}
.b-dormant{color:var(--ink-soft); background:#ECE6F2}
.b-dormant::before{display:none}                                  /* ikonet er tegnet – ingen status-prikk */
.bd-legend{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--muted); margin:0 0 12px}
.bd-legend b{color:var(--ink); font-weight:600}
.bd-check-slot{width:19px; height:19px; flex:none}
.bd-row .bd-dormant{margin-left:auto; flex:none; display:inline-flex}
.bd-row .bd-dormant .dormant-mark svg{width:24px; height:24px}
.dormant-box{display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:#F5F1F8}
.dormant-sub{font-size:12.5px; color:var(--muted); margin-top:1px}
.dormant-pick-note{font-size:12.5px; color:var(--muted); margin-top:8px}
.detail-foot-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}

/* ---------- Kontrakt (PDF) på avtaler ---------- */
.ag-contract{display:flex; align-items:center; flex-wrap:wrap; gap:8px}
.ag-contract-file{display:inline-flex; align-items:center; gap:8px; min-width:0; max-width:100%; padding:7px 12px; border:1px solid var(--border-strong); border-radius:999px; background:var(--surface); color:var(--ink); font:inherit; font-size:13px; cursor:pointer; transition:.12s}
.ag-contract-file:hover:not(.static){border-color:var(--brand); color:var(--brand)}
.ag-contract-file.static{cursor:default}
.ag-contract-file svg{width:16px; height:16px; flex:none; stroke-width:1.8}
.ag-contract-file .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600}
.ag-contract-file .sub{flex:none; font-size:11.5px; color:var(--muted)}
.ag-contract-hint{font-size:12.5px; color:var(--muted)}

/* ---------- Kundedokumenter ---------- */
.doc-entry{margin:-2px 0 10px}
.doc-entry .btn{margin-left:-8px; color:var(--muted)}
.doc-entry .btn:hover{color:var(--ink)}
.doc-entry svg{width:15px; height:15px}
.doc-modal{max-width:640px}
.doc-top{display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-bottom:14px}
.doc-list{max-height:52vh; overflow:auto}
.doc-ic{width:36px; height:36px; flex:none; border-radius:10px; display:grid; place-items:center; background:#F1ECF5; color:var(--ink-soft)}
.doc-ic svg{width:18px; height:18px; stroke-width:1.8}
.doc-row .row-title{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.doc-row .tag{margin-right:4px}
.doc-act{flex:none; font-size:12px; font-weight:600; color:var(--muted)}
.doc-tabs{margin:0 0 14px}
.doc-row .al-go:hover{background:var(--surface-2)}
.offer-list .chev{width:16px; height:16px; color:var(--muted); flex:none}
.offer-list .chev.go{transform:rotate(-90deg)}

/* Gjentakende oppgaver (ikon på oppgaver, chip i «Ny oppgave», info i oppgavekortet, liste i Innstillinger) */
.rec-ic{display:inline-flex; vertical-align:-2px; margin-left:7px; color:var(--muted)}
.rec-ic svg{width:13px; height:13px; stroke-width:2}
.rec-chip{display:inline-flex; align-items:center; gap:8px; padding:6px 6px 6px 12px; border-radius:var(--pill); background:var(--surface-2); font-size:13px; font-weight:600; color:var(--ink-soft)}
.rec-chip > svg{width:14px; height:14px; stroke-width:2; color:var(--brand)}
.rec-chip button{border:none; background:none; font:inherit; font-size:12.5px; font-weight:600; color:var(--link); cursor:pointer; padding:2px 6px; border-radius:var(--pill)}
.rec-chip button:last-child{display:inline-grid; place-items:center; width:22px; height:22px; padding:0; color:var(--muted)}
.rec-chip button:last-child svg{width:12px; height:12px}
.rec-chip button:hover{background:var(--surface)}
.rec-info{display:flex; align-items:center; gap:12px; margin-top:14px; padding:11px 14px; border-radius:var(--radius-sm); background:var(--surface-2)}
.rec-info > svg{width:18px; height:18px; flex:none; stroke-width:2; color:var(--brand)}
.rec-info-t{flex:1; min-width:0; display:flex; flex-direction:column; font-size:13px}
.rec-info-t span{color:var(--muted); font-size:12.5px}
.rc-body .chips{margin-bottom:6px}
.rc-sub{margin-top:12px}
.rc-sub[hidden]{display:none}
.rc-body .svc-note{margin-top:12px}
.rec-row-ic{color:var(--brand); display:inline-flex}
.rec-row-ic svg{width:16px; height:16px; stroke-width:2}
.rec-row-sub{display:block; font-size:12px; color:var(--muted); font-weight:400}

/* Oppgavemaler: «Bruk mal»-lista */
.tt-list{display:flex; flex-direction:column; gap:6px; margin:4px 0 16px; max-height:min(50vh,340px); overflow:auto}
.tt-opt{display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; width:100%; padding:10px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); font:inherit; cursor:pointer; transition:.12s}
.tt-opt:hover{border-color:var(--brand); background:var(--brand-soft)}
.tt-name{font-weight:600; font-size:14px}
.tt-sub{font-size:12.5px; color:var(--muted)}
.tt-empty{font-size:13.5px; color:var(--muted); margin:0 0 16px}
.fl-line{display:flex; align-items:center; justify-content:space-between; gap:10px}
.fl-line .fl{margin-bottom:0}
.tt-use{display:inline-flex; align-items:center; gap:5px; border:none; background:none; padding:2px 8px; margin:-2px -8px 4px 0; border-radius:var(--pill); font:inherit; font-size:12px; font-weight:600; color:var(--muted); cursor:pointer; transition:.12s}
.tt-use svg{width:12px; height:12px; stroke-width:2}
.tt-use:hover{background:var(--surface-2); color:var(--brand)}

/* Globalt søk: knapp i sidemenyen + søkepalett */
.side-search{display:flex; align-items:center; gap:10px; width:100%; margin:0 0 10px; padding:9px 12px; border:none; border-radius:var(--pill); background:rgba(255,255,255,.07); color:var(--side-muted); font:inherit; font-size:13.5px; cursor:pointer; transition:.12s}
.side-search:hover{background:rgba(255,255,255,.12); color:var(--side-ink)}
.side-search svg{width:16px; height:16px; stroke-width:2; flex:none}
.gs{width:100%; max-width:640px; max-height:72vh; display:flex; flex-direction:column; background:var(--surface); border-radius:22px; box-shadow:var(--shadow-lg); overflow:hidden; animation:pop .18s cubic-bezier(.2,.9,.3,1.2)}
.gs-head{display:flex; align-items:center; gap:10px; padding:14px 16px 14px 20px; border-bottom:1px solid var(--border)}
.gs-search-ic{width:19px; height:19px; flex:none; stroke-width:2; color:var(--muted)}
.gs-input{flex:1; min-width:0; border:none; outline:none; background:none; font:inherit; font-size:16px; color:var(--ink)}
.gs-input::placeholder{color:var(--muted)}
.gs-list{overflow:auto; padding:6px 10px 12px}
.gs-h{display:flex; align-items:center; gap:8px; padding:12px 10px 6px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--muted)}
.gs-h span{font-weight:600; letter-spacing:0; background:var(--surface-2); border-radius:var(--pill); padding:0 7px; color:var(--ink-soft)}
.gs-item{display:flex; align-items:center; gap:12px; width:100%; text-align:left; border:none; background:none; font:inherit; padding:8px 10px; border-radius:var(--radius-sm); cursor:pointer}
.gs-item.hi{background:var(--surface-2)}
.gs-ic{width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:9px; background:var(--surface-2); color:var(--ink-soft)}
.gs-ic svg{width:15px; height:15px; stroke-width:2}
.gs-t{display:flex; flex-direction:column; min-width:0}
.gs-name{font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gs-sub{font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gs-hint,.gs-more{padding:16px 10px; font-size:13px; color:var(--muted)}
.gs-more{padding:6px 10px 0; font-size:12px}
.gs-clear{flex:none; width:24px; height:24px; display:grid; place-items:center; border:none; border-radius:50%; background:var(--surface-2); color:var(--muted); cursor:pointer}
.gs-clear:hover{background:var(--border); color:var(--ink)}
.gs-clear svg{width:12px; height:12px; stroke-width:2.4}
.gs-clear[hidden]{display:none}

/* Masseregistrering av kontakter (Excel) */
.modal.bulk{max-width:1120px}
.bk-lead{margin:0 0 14px; color:var(--ink-soft); font-size:14px}
.bk-fmt{border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; margin:6px 0 10px; font-size:13px}
.bk-fmt-r{display:grid; grid-template-columns:repeat(4,1fr)}
.bk-fmt-r span{padding:8px 12px; border-right:1px solid var(--border); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bk-fmt-r span:last-child{border-right:none}
.bk-fmt-h{background:var(--surface-2); font-weight:600; border-bottom:1px solid var(--border)}
.bk-fmt-h b{color:var(--brand); margin-right:4px}
.bk-fmt-r:not(.bk-fmt-h){color:var(--muted)}
.bk-err{background:#fdecef; color:#8a1f3a; border:1px solid #f4c3cd; border-radius:var(--radius-sm); padding:10px 14px; font-size:13.5px; line-height:1.5; margin:10px 0}
.bk-drop{display:flex; align-items:center; justify-content:center; gap:10px; border:2px dashed var(--border-strong, var(--border)); border-radius:var(--radius); padding:26px 16px; color:var(--ink-soft); cursor:pointer; transition:.12s; margin-top:12px; font-size:14px}
.bk-drop:hover,.bk-drop.over,.bk-drop:focus-visible{border-color:var(--brand); background:var(--surface-2); outline:none}
.bk-drop.busy{opacity:.6; pointer-events:none}
.bk-drop svg{width:18px; height:18px; stroke-width:2; flex:none}
.bk-sum{font-size:13.5px; color:var(--ink-soft); margin-bottom:12px; line-height:1.5}
.bk-sum b{color:var(--ink)}
.bk-wrap{overflow:auto; max-height:56vh; border:1px solid var(--border); border-radius:var(--radius-sm)}
.bk-grid{min-width:900px}
.bk-row{display:grid; grid-template-columns:32px 38px minmax(120px,1.1fr) minmax(150px,1.4fr) minmax(100px,.8fr) minmax(100px,.9fr) minmax(160px,1.3fr); gap:8px; align-items:center; padding:7px 10px; border-bottom:1px solid var(--border)}
.bk-row:last-child{border-bottom:none}
.bk-hd{position:sticky; top:0; z-index:1; background:var(--surface-2); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--muted)}
.bk-chk{display:grid; place-items:center}
.bk-chk input{width:16px; height:16px; accent-color:var(--brand); cursor:pointer}
.bk-no{font-size:12px; color:var(--muted); text-align:right}
.bk-inp{padding:7px 10px; font-size:13px; min-width:0; width:100%}
.bk-row.off .bk-inp,.bk-row.off .bk-no{opacity:.45}
.bk-note{grid-column:3 / -1; display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; margin-top:-2px}
.bk-n.err{color:#b3261e; font-weight:600}
.bk-n.warn{color:#9a6a00}
.bk-n.info{color:var(--muted)}

/* Bekreftelse ved sletting av flere kontakter */
.cf-strong{margin:0 0 8px; font-weight:600; color:var(--ink)}
.cf-list{margin:0 0 16px; padding-left:18px; font-size:13.5px; line-height:1.5; color:var(--ink-soft); text-align:left}
.cf-list li{margin-bottom:4px}

/* Tilgangsnivå på team-kortene (vises bare for full tilgang) */
.team-access{display:inline-block; margin-top:5px; padding:1px 9px; border-radius:var(--pill); font-size:11px; font-weight:600; background:var(--surface-2); color:var(--ink-soft)}
.team-access.full{background:var(--brand-soft, #fbe3ec); color:var(--brand)}

/* Forhåndsvisning som begrenset tilgang: banner øverst */
.preview-banner{position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px 14px; padding:8px 16px; background:#fff4d6; color:#6b4a00; border-bottom:1px solid #f0d58a; font-size:13px}
.preview-banner[hidden]{display:none}
.pv-exit{border:1px solid #d9b650; background:#fff; color:#6b4a00; font:inherit; font-size:12.5px; font-weight:600; padding:3px 12px; border-radius:var(--pill); cursor:pointer}
.pv-exit:hover{background:#fff9e6}
.topbar{top:var(--pv-h,0px)}

/* Ansvarlig-ikoner på avtalekort (kundekortet): mer luft mot statusboblen, og plass til «+N» uten å skyve inn i den */
.ag-card-assignees{width:54px; margin-right:8px; justify-content:flex-start}
.ag-card-assignees .assignee-stack{max-width:none}
.mini-avatar[data-hint]{cursor:default}
/* Avtaler-lista: faste kolonner (ansvarlige · status · fornyelse/inntekt) som alltid er med, tomme eller ikke, så radene flukter */
.av-assignees{width:118px}
.av-meta{width:190px; display:flex; flex-direction:column; align-items:flex-end; justify-content:center; min-height:19px}

/* Bevegelse i avtaler siste 90 dager (under Avtaler-smultringen) */
.dn-move{display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-top:16px; padding-top:14px; border-top:1px solid var(--border); font-size:13px; color:var(--ink-soft)}
.dn-move-cap{font-size:12px; color:var(--muted); margin-right:2px}
.dn-mv{display:inline-flex; align-items:center; gap:5px; padding:3px 10px 3px 7px; border-radius:var(--pill); font-weight:500; cursor:default; white-space:nowrap}
.dn-mv b{font-weight:700; font-size:14px}
.dn-mv svg{width:15px; height:15px; flex:none}
.dn-mv.up{background:#e4f4ea; color:#2c7a4b}
.dn-mv.down{background:#fbe6e3; color:#b3382a}
.dn-mv.zero{background:var(--surface-2); color:var(--muted)}

/* Mine / Alle på overskriftslinja til Kommende oppgaver (liten, så kolonnen beholder samme topplinje som Siste aktivitet) */
.dash-seg{display:inline-flex; align-items:center; gap:2px; padding:2px; background:var(--surface-2); border-radius:var(--pill); margin-left:2px}
.dash-seg button{border:none; background:none; font:inherit; font-size:12px; font-weight:600; color:var(--muted); padding:2px 9px; border-radius:var(--pill); cursor:pointer; line-height:1.5}
.dash-cols .section-head{flex-wrap:nowrap; gap:8px}
.dash-cols .section-head h2, .dash-cols .section-head a{white-space:nowrap}
.dash-seg button:hover{color:var(--ink)}
.dash-seg button.on{background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(35,27,43,.12)}

/* Type-filter på Siste aktivitet: ikon-knapper i samme pille-stil som Mine/Alle, med type-fargene fra aktivitetsloggen */
.act-seg button{display:inline-flex; align-items:center; justify-content:center; min-width:26px}
.act-seg button svg{width:14px; height:14px; stroke-width:2.2}
.act-seg button[data-act-type]:not(.on){opacity:.6}
.act-seg button[data-act-type]:not(.on):hover{opacity:1}
.act-seg button[data-act-type=""]{padding:2px 9px}
.act-seg button.t-samtale{color:var(--s-kontaktet-fg)}
.act-seg button.t-epost{color:var(--brand)}
.act-seg button.t-mote{color:var(--s-dialog-fg)}
.act-seg button.t-melding{color:var(--green)}

/* «Last inn på nytt» nederst i sidemenyen – diskret */
.side-refresh{display:flex; align-items:center; justify-content:center; gap:7px; width:100%; margin:0 0 6px; padding:5px 10px; border:none; background:none; border-radius:var(--pill); color:var(--side-muted); font:inherit; font-size:12px; cursor:pointer; transition:.12s}
.side-refresh:hover{background:rgba(255,255,255,.08); color:var(--side-ink)}
.side-refresh svg{width:13px; height:13px; flex:none}
.side-refresh.busy svg{animation:sideSpin .8s linear infinite}
.side-refresh:disabled{cursor:default; opacity:.7}
@keyframes sideSpin{to{transform:rotate(360deg)}}