/* Shared Paysave identity. Loaded by every page; page layouts remain independent. */
:root:root {
  --bg: #e4e9ec;
  --surface: #ffffff;
  --ink: #051a2b;
  --muted: #4e5d69;
  --line: #c6d1d7;
  --accent: #117b55;
  --accent-dark: #096142;
  --accent-ink: #ffffff;
  --brand-green: #2bd98c;
  --brand-petrol: #0a2a43;
  --brand-soft: #eaf5ef;
  --brand-hover: #f0f7f4;
  --brand-logo-surface: #0a2a43;
  --brand-strip-ink: #ffffff;
  --attention-bg: #fbe6e6;
  --attention-ink: #a3212c;
  --attention-line: #d85b65;
  --brand-shadow: 0 12px 32px rgb(5 26 43 / .06);
  --glass: rgb(255 255 255 / .94);
  --f-display: "Familjen Grotesk", "Segoe UI", sans-serif;
  --f-body: "Hanken Grotesk", "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", monospace;
  color-scheme: light;
}
html body { font-family: var(--f-body); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
body :is(h1,h2,h3,.panel legend) { font-family: var(--f-display); letter-spacing: 0; }
body :is(.brand,.back,.nav__brand,.price__num,.price__unit,.app__big strong,.lead__pick strong,.stat b,.cost__pkg) { letter-spacing: 0; }
body .paysave-logo { display: block; width: 152px; height: 40px; object-fit: contain; padding: 0; background: transparent; border-radius: 0; flex: none; }
body :is(.brand,.back,.nav__brand) { gap: 14px; text-decoration: none; }
body .brand-partner { color: var(--muted); font: 500 15px/1.3 var(--f-body); white-space: nowrap; }
body .brand-caption { color: var(--muted); font: 500 12px/1 var(--f-mono); }
body .nav { background: var(--brand-logo-surface); border-bottom: 1px solid var(--line); }
body :is(.head,.top) { background: var(--brand-logo-surface); padding: 18px 24px; }
body :is(.head__tag,.top .brand-partner,.top .ghost) { color: var(--brand-strip-ink); }
body .top .ghost { background: transparent; }
body .login__card > .brand { background: var(--brand-logo-surface); margin: -32px -28px 0; padding: 22px 28px; border-radius: 8px 8px 0 0; }
body .login__card .brand-partner { color: var(--brand-strip-ink); }
body .backdrop__glow, body .backdrop__halo { display: none; }
body .app { --app-blue: var(--accent); --app-soft: var(--brand-hover); }
body .app__cta { box-shadow: none; }
body .hero__cta { box-shadow: none; }
body .tap-hint__ring { border-color: var(--accent); background: color-mix(in srgb,var(--brand-green) 22%,transparent); }
body .partner img { filter: none; }

/* Portals: paper-like workspaces, restrained borders and green selection. */
body .login__card { border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--brand-shadow); gap: 20px; }
body .login__card h1 { font-size: 32px; line-height: 1.15; }
body :is(.btn,.ghost,.f input,.status select,.status textarea,.step__btn,.onboarding__button) { border-radius: 6px; }
body :is(.btn,.onboarding__button) { background: var(--accent); color: var(--accent-ink); }
body :is(input,select,textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body .side { background: var(--surface); color: var(--ink); border-right: 1px solid var(--line); }
body .side .brand { padding: 20px 14px; gap: 8px; margin: -22px -14px 0; background: var(--brand-logo-surface); }
body .side .brand-caption { color: var(--brand-strip-ink); }
body .side .paysave-logo { width: 146px; }
body .side .tabs button { color: var(--muted); border-radius: 6px; }
body .side .tabs button b { background: var(--bg); color: var(--muted); }
body .side .tabs button:hover { background: var(--brand-hover); color: var(--ink); }
body .side .tabs button[aria-pressed="true"] { background: var(--brand-soft); color: var(--accent); }
body .side .tabs button[aria-pressed="true"] b { background: var(--surface); color: var(--accent); }
body .side .tabs hr { border-color: var(--line); }
body .side__foot .ghost { color: var(--muted); border-color: var(--line); }
body .stat--all { background: var(--brand-soft); color: var(--ink); }
body .stat--all span { color: var(--muted); }
body :is(.stat,.lead,.drafts,.tablewrap,.detail,.panel__step,.col,.kcard) { border-radius: 6px; }
body .col { background: var(--bg); border: 1px solid var(--line); }
body .kcard { border: 1px solid var(--line); box-shadow: none; padding: 13px 14px; }
body .kcard[aria-selected="true"] { border-color: var(--accent); }
body .lead__pkg { background: var(--brand-soft); }
body .top { border-bottom: 1px solid var(--line); }
body .title { font-size: 36px; line-height: 1.15; margin: 30px 0 22px; }
body .filters { gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
body .filters button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; padding: 12px 16px; color: var(--muted); }
body .filters button[aria-selected="true"] { border-color: var(--accent); background: transparent; color: var(--accent); }
body .tablewrap { border: 1px solid var(--line); }
body .table th { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0; background: var(--bg); padding-top: 15px; padding-bottom: 15px; }
body .table td { padding-top: 16px; padding-bottom: 16px; }
body .table tr[data-row]:hover, body .table tr[aria-selected="true"] { background: var(--brand-hover); }
body .pill { border-radius: 4px; font-weight: 600; }
body .detail { border: 1px solid var(--line); padding: 24px; }
body .detail h3 { letter-spacing: 0; font-family: var(--f-mono); padding-top: 14px; border-top: 1px solid var(--line); }
body .status { background: transparent; border-radius: 0; padding: 12px 0; }
body .status__actions { flex-wrap: wrap; }
body :is(.kcard--attention,.table tr.attention,.table tr.attention[aria-selected="true"],.gp-status--komplettering,.detail.attention) { background: var(--attention-bg); border-color: var(--attention-line); }
body .kcard--attention { border-left: 4px solid var(--attention-line); }
body :is(.attention-label,.pill--komplettering) { color: var(--attention-ink); background: var(--attention-bg); font-weight: 700; }
body .attention-label { display: block; font-size: 12px; }
body .pill--egen_fakturering { background: var(--brand-soft); color: var(--accent); white-space: normal; }

/* Existing customer form and guides retain their content and structure. */
body .card { border-color: var(--line); border-radius: 8px; box-shadow: var(--brand-shadow); }
body :is(.choice__body,.bank,.field input,.phone,.button,.same) { border-radius: 6px; }
body .choice.is-selected .choice__body { background: var(--brand-soft); box-shadow: none; }
body .choice__icon { background: var(--brand-soft); }
body .progress span { background: var(--accent); }
body .button { background: var(--accent); }
body .button--secondary { background: var(--surface); }
body .eyebrow { font-family: var(--f-mono); letter-spacing: 0; }
#paysave-chat-root { --primary: 159 76% 27%; --secondary: 159 76% 27%; --ring: 159 76% 27%; }
@media(max-width:600px) {
  body .paysave-logo { width: 128px; height: 34px; }
  body .brand-partner { font-size: 13px; }
  body .top { align-items: flex-start; flex-wrap: wrap; }
  body .side .brand { margin: -14px -14px 0; }
  body .top__actions { margin-left: auto; }
  body .filters button { padding: 11px 9px; font-size: 13px; }
  body .detail dl div { grid-template-columns: 100px minmax(0,1fr); }
}