/* v2 ström B1 «Företaget» (2026-10-14): /login + /registrera, /kom-igang, /foretaget, Avancerade inställningar,
 * ansökningar i Admin. Bara CSS-variabler (kontoret.css / smartcore-tokens.css) – inga hårdkodade färger, så att
 * mörkt och ljust tema följer toppradens val. Tonade ytor görs med color-mix() av variablerna. Allt har prefixet fx-. */

.fx-sida, .fx-gast, .fx-checklista, .fx-brod, .fx-ans, .fx-epost, .fx-filer, .fx-skanning {
  --fx-accent-text: var(--accent-text, var(--accent));
  --fx-teal-text: var(--teal-text, var(--teal));
  --fx-ok-text: var(--ok-text, var(--ok));
  --fx-danger-text: var(--danger-text, var(--danger));
  --fx-blue-text: var(--blue-text, var(--blue));
  --fx-tona-accent: color-mix(in srgb, var(--accent) 14%, transparent);
  --fx-tona-teal: color-mix(in srgb, var(--teal) 14%, transparent);
  --fx-tona-ok: color-mix(in srgb, var(--ok) 15%, transparent);
  --fx-tona-fel: color-mix(in srgb, var(--danger) 14%, transparent);
  --fx-tona-bla: color-mix(in srgb, var(--blue) 13%, transparent);
  --fx-lila: color-mix(in srgb, var(--blue) 55%, var(--danger));
  --fx-lila-text: color-mix(in srgb, var(--blue-text, var(--blue)) 55%, var(--danger-text, var(--danger)));
}
[x-cloak] { display: none !important; }
.fx-dim { color: var(--dim); }
.fx-flash { margin: 0; }
.fx-hint { margin: 0; }
.fx-lank { background: none; border: 0; padding: 0; color: var(--fx-teal-text); font-weight: 600; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fx-lank:hover { color: var(--fg); }
.fx-farlig { color: var(--fx-danger-text); }
.btn.fx-farlig { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.fx-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--muted); background: var(--panel2); transition: border-color .15s, color .15s, background .15s; }
.fx-chip:hover { border-color: var(--accent); color: var(--fg); }
.fx-chip[aria-pressed="true"] { border-color: var(--accent); color: var(--fg); background: var(--fx-tona-accent); }
.fx-chip-n { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.fx-chip-liten { padding: 2px 9px; font-size: 12px; font-family: var(--mono); font-weight: 500; }
.fx-valfri { display: inline-block; font-family: var(--body); font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; vertical-align: middle; margin-left: 6px; }
.fx-snurr { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; display: inline-block; flex: none; animation: fx-snurr .8s linear infinite; }
.fx-letar { align-items: center; gap: 8px; }
@keyframes fx-snurr { to { transform: rotate(360deg); } }
@keyframes fx-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes fx-puls { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--teal) 55%, transparent); } 100% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--teal) 0%, transparent); } }
@keyframes fx-flod { to { background-position: -200% 0; } }
@keyframes fx-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes fx-rita { to { stroke-dashoffset: 0; } }

/* ------------------------------------------------------------------ gästsidor: /login, /registrera, /valkommen, /inbjudan */
body.gast { background: var(--bg); }
.fx-gast {
  flex: 1 0 auto; display: flex; align-items: center; justify-content: center; padding: 48px 24px; position: relative;
  background:
    radial-gradient(900px 520px at 6% -12%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 70%),
    radial-gradient(760px 520px at 106% 112%, color-mix(in srgb, var(--teal) 16%, transparent), transparent 66%),
    radial-gradient(520px 340px at 62% -6%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    var(--bg);
}
.fx-gast-in { width: 100%; max-width: 1100px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 6vw, 80px); align-items: center; position: relative; z-index: 1; }
.fx-gast-in.fx-gast-smal { max-width: 470px; grid-template-columns: minmax(0, 1fr); }
.fx-pitch { display: flex; flex-direction: column; gap: 20px; }
.fx-pitch h1 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -.02em; }
.fx-pitch h1 span { display: block; color: var(--fx-accent-text); }
.fx-pitch .fx-lead { font-size: 18px; max-width: 32em; }
.fx-lead { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.5; }
.fx-punkter { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.fx-punkter li { display: flex; gap: 14px; align-items: center; }
.fx-punkter b { display: block; font-weight: 600; }
.fx-punkter span { color: var(--muted); font-size: 14px; }
.fx-ik { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none; color: var(--fx-teal-text); background: var(--fx-tona-teal); border: 1px solid color-mix(in srgb, var(--teal) 32%, transparent); }
.fx-ik svg { width: 21px; height: 21px; }
.fx-trygg { display: flex; gap: 8px; align-items: center; color: var(--dim); font-size: 13px; margin: 0; }
.fx-trygg svg { width: 18px; height: 18px; color: var(--fx-ok-text); flex: none; }

.fx-gastkort { background: var(--card, var(--panel)); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); padding: 26px; display: flex; flex-direction: column; gap: 20px; backdrop-filter: blur(10px); min-width: 0; }
.fx-flikar { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--panel2); border: 1px solid var(--line2); }
.fx-flikar button { padding: 10px 12px; border-radius: 10px; font-weight: 600; font-size: 14px; color: var(--muted); transition: background .2s, color .2s, box-shadow .2s; }
.fx-flikar button:hover { color: var(--fg); }
.fx-flikar button[aria-selected="true"] { background: var(--panel); color: var(--fg); box-shadow: 0 0 0 1px var(--line), 0 6px 16px color-mix(in srgb, var(--bg) 45%, transparent); }
.fx-gastpanel, .fx-gastform { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fx-gastpanel h2, .fx-gastform h2 { font-size: 24px; }
.fx-gastpanel .muted, .fx-gastform .muted { margin: 6px 0 0; font-size: 14px; line-height: 1.5; }
.btn.fx-stor { padding: 14px 18px; font-size: 16px; border-radius: 12px; }
.fx-byt { margin: 0; font-size: 14px; color: var(--muted); text-align: center; }
.fx-byt a { color: var(--fx-teal-text); font-weight: 600; }
.fx-glomt { margin: -4px 0 0; text-align: right; }
/* 2026-11-04: ögat i lösenordsfältet och «Kom ihåg mig» bredvid «Glömt lösenord?» */
.fx-losen { position: relative; display: block; }
.fx-losen .inp { padding-right: 48px; }
.fx-oga { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 8px; padding: 0; color: var(--fg); opacity: .6; cursor: pointer; }
.fx-oga:hover { opacity: 1; }
.fx-oga:focus-visible { opacity: 1; outline: 2px solid var(--fx-teal-text); outline-offset: 1px; }
.fx-in-rad { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: -4px 0 0; }
.fx-in-rad .fx-glomt { margin: 0; }
.fx-kom-ihag { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.fx-kom-ihag input { width: 18px; height: 18px; margin: 0; accent-color: var(--fx-teal-text); cursor: pointer; }   /* «Glömt lösenord?» under lösenordet (2026-10-23) */
label.f span i { color: var(--fx-accent-text); font-style: normal; }
label.f span em, .fx-falt label em { font-style: normal; font-weight: 400; color: var(--dim); font-size: 12px; margin-left: 4px; }
.fx-tva { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.fx-nasta { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fx-nasta li { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--line2); font-size: 12px; color: var(--muted); line-height: 1.35; text-align: left; }
.fx-nasta li b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: var(--fx-tona-accent); color: var(--fx-accent-text); flex: none; }
.fx-nasta li.klar b { background: var(--fx-tona-ok); color: var(--fx-ok-text); }
.fx-nasta.fx-nasta-lodratt { grid-template-columns: minmax(0, 1fr); }
.fx-nasta-lodratt li { flex-direction: row; align-items: flex-start; gap: 12px; font-size: 14px; padding: 12px; }
.fx-nasta-lodratt li strong { color: var(--fg); }
.fx-forslag { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -6px; }
.fx-forslag .fx-chip { padding: 4px 10px; font-size: 12px; }
.fx-honung { position: absolute; left: -5000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.fx-tack { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; padding: 6px 0; }
.fx-tack .muted { margin: 0; }
.fx-bock { width: 76px; height: 76px; }
.fx-bock circle { fill: var(--fx-tona-ok); stroke: var(--ok); stroke-width: 2; }
.fx-bock path { fill: none; stroke: var(--ok); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: fx-rita .6s .25s ease forwards; }
.fx-tack-text { margin: 0; font-family: var(--display); font-size: 20px; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.fx-tack .fx-nasta { width: 100%; }

/* ------------------------------------------------------------------ inloggade sidor: gemensamt */
.fx { width: 100%; max-width: 860px; margin: 2px auto 40px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.fx.fx-hub { max-width: 1180px; }
.fx-hjalte {
  position: relative; padding: 28px 28px 24px; border-radius: 24px; border: 1px solid var(--line2); overflow: hidden; display: flex; flex-direction: column; gap: 8px;
  background:
    radial-gradient(120% 150% at 0% 0%, color-mix(in srgb, var(--accent) 13%, transparent) 0%, transparent 45%),
    radial-gradient(110% 150% at 100% 100%, color-mix(in srgb, var(--teal) 13%, transparent) 0%, transparent 50%),
    var(--panel2);
}
.fx-hjalte h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.05; letter-spacing: -.015em; overflow-wrap: anywhere; }
.fx-hjalte-rad { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fx-steg3 { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fx-steg3 a { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px 5px 5px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 600; transition: border-color .15s, color .15s; }
.fx-steg3 a:hover { border-color: var(--accent); color: var(--fg); }
.fx-steg3-nr { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--panel2); border: 1px solid var(--line); font-size: 12px; color: var(--fg); }
.fx-steg3 li.klar a { color: var(--fg); }
.fx-steg3 li.klar .fx-steg3-nr { background: var(--fx-tona-ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); color: var(--fx-ok-text); }
.fx svg, .fx-checklista svg, .fx-brod svg, .fx-ans svg { stroke-linecap: round; stroke-linejoin: round; }
.fx-steg3 svg, .fx-tag svg, .fx-agent-status svg, .fx-bock-liten svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; }

.fx-kort { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 16px; min-width: 0; scroll-margin-top: calc(var(--skal-topp, 0px) + 16px); }
.fx-kort-huvud { display: flex; align-items: flex-start; gap: 14px; }
.fx-nr { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--fx-accent-text); background: var(--fx-tona-accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.fx-nr.klar { color: var(--fx-ok-text); background: var(--fx-tona-ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.fx-kort-ikon { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--fx-teal-text); background: var(--fx-tona-teal); border: 1px solid color-mix(in srgb, var(--teal) 35%, transparent); }
.fx-kort-ikon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.fx-kort-titel { flex: 1; min-width: 0; }
.fx-kort-titel h2 { font-size: 20px; line-height: 1.25; }
.fx-kort-titel p { margin: 4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.fx-kort-status { flex: none; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 4px 10px; background: var(--fx-tona-ok); color: var(--fx-ok-text); white-space: nowrap; }
.fx-falt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fx-falt > label { font-size: 13px; font-weight: 600; color: var(--muted); }
.inp.fx-inp-stor { font-size: 17px; padding: 13px 14px; }
.inp.fx-liten { width: auto; padding: 8px 10px; font-size: 14px; }
.fx-rad { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fx-rad .inp { flex: 1; min-width: 0; }
.fx-sparat { font-size: 12px; color: var(--fx-ok-text); font-weight: 600; }

/* ------------------------------------------------------------------ e-postkonton */
.fx-epost { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fx-konton { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fx-konto { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 14px; align-items: start; padding: 14px; border-radius: 16px; background: var(--panel2); border: 1px solid var(--line2); animation: fx-in .3s ease both; }
.fx-konto.fel { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.fx-lev { --c: var(--muted); --ct: var(--muted); width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--ct); background: color-mix(in srgb, var(--c) 15%, transparent); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); flex: none; }
.fx-lev.fx-lev-liten { width: 24px; height: 24px; border-radius: 7px; font-size: 12px; }
.fx-lev[data-lev="gmail"] { --c: var(--danger); --ct: var(--fx-danger-text); }
.fx-lev[data-lev="microsoft"] { --c: var(--blue); --ct: var(--fx-blue-text); }
.fx-lev[data-lev="websupport"] { --c: var(--teal); --ct: var(--fx-teal-text); }
.fx-lev[data-lev="onecom"] { --c: var(--ok); --ct: var(--fx-ok-text); }
.fx-lev[data-lev="loopia"] { --c: var(--accent); --ct: var(--fx-accent-text); }
.fx-lev[data-lev="strato"] { --c: var(--fx-lila); --ct: var(--fx-lila-text); }
.fx-konto-mitt { min-width: 0; }
.fx-konto-namn { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.fx-konto-namn b { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.fx-konto-namn .fx-dim { font-size: 13px; }
.fx-taggar { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 7px; font-size: 13px; }
.fx-tag { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); white-space: nowrap; }
.fx-tag.ok { background: var(--fx-tona-ok); color: var(--fx-ok-text); }
.fx-tag.fel { background: var(--fx-tona-fel); color: var(--fx-danger-text); }
.fx-tag.varn { background: var(--fx-tona-accent); color: var(--fx-accent-text); }
.fx-konto-not { margin-top: 6px; font-size: 12px; color: var(--muted); }
.fx-omfang { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.fx-omfang svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--teal); stroke-width: 2; }
.fx-omfang-form, .fx-omfang-val { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin-top: 10px; font-size: 14px; }
.fx-omfang-val { margin-top: 0; }
.fx-omfang-rubrik { font-size: 13px; font-weight: 600; color: var(--muted); }
.fx-check { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; background: var(--panel); cursor: pointer; font-size: 14px; }
.fx-check:has(input:checked) { border-color: var(--accent); }
.fx-check input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.fx-konto-knappar { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.fx-konto-redigera { grid-column: 1 / -1; }
.fx-lagg-till { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px; border-radius: 16px; border: 1.5px dashed var(--line); color: var(--fx-accent-text); font-weight: 600; transition: border-color .15s, background .15s; }
.fx-lagg-till:hover { border-color: var(--accent); background: var(--fx-tona-accent); }
.fx-lagg-till span { font-size: 22px; line-height: 1; font-weight: 400; }
.fx-epostform { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel2); animation: fx-in .25s ease both; }
.fx-konto-redigera .fx-epostform { background: var(--panel); }
.fx-levrad { display: flex; align-items: center; font-size: 13px; }
.fx-levrad:not(:has(.fx-levval)) .fx-letar { margin-top: 2px; }
.fx-levval { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fx-hjalp { margin: 0; display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--muted); padding: 10px 12px; border-radius: 10px; background: var(--fx-tona-bla); }
.fx-hjalp.varn { background: var(--fx-tona-accent); color: var(--fg); }
.fx-hjalp svg { width: 16px; height: 16px; flex: none; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2; }
.fx-server { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 12px; border: 1px dashed var(--line); animation: fx-in .2s ease both; }
.fx-serverrad { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) 92px 132px; gap: 8px; min-width: 0; }
.fx-serverrad legend { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; padding: 0; }
.fx-aldrig { border-top: 1px solid var(--line2); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.fx-aldrig-rad { display: flex; align-items: center; gap: 10px; font-size: 14px; flex-wrap: wrap; }
.fx-aldrig-rad > svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--danger); stroke-width: 2; }
.fx-aldrig-text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--muted); }

/* ------------------------------------------------------------------ filer */
.fx-filer { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fx-drop { position: relative; display: flex; align-items: center; gap: 16px; padding: 22px; border-radius: 16px; border: 2px dashed var(--line); background: var(--panel2); cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.fx-drop:hover, .fx-drop.over { border-color: var(--accent); background: var(--fx-tona-accent); }
.fx-drop.over { transform: scale(1.01); }
.fx-drop:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.fx-drop-ikon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--fx-tona-accent); color: var(--fx-accent-text); flex: none; }
.fx-drop-ikon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; }
.fx-drop-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fx-drop-text b { font-size: 16px; font-weight: 600; }
.fx-drop-text b u { color: var(--fx-accent-text); text-underline-offset: 3px; }
.fx-drop-text > span { font-size: 13px; color: var(--dim); }
.fx-bara-liten { display: none; }
.fx-dold { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.fx-koe { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fx-koe-rad { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 8px 12px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line2); animation: fx-in .2s ease both; }
.fx-koe-namn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-koe-stapel { width: 120px; height: 6px; border-radius: 3px; background: var(--line2); overflow: hidden; flex: none; }
.fx-koe-stapel i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--teal)); transition: width .2s; }
.fx-koe-status { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.fx-koe-rad.klar { color: var(--fx-ok-text); }
.fx-koe-rad.klar .fx-koe-status { color: var(--fx-ok-text); }
.fx-koe-rad.fel { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.fx-koe-fel { color: var(--fx-danger-text); font-size: 12px; flex: 1 1 100%; order: 3; }
.fx-koe-rad.fel { flex-wrap: wrap; }
.fx-filrubrik { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; font-weight: 600; }
.fx-filrubrik .fx-dim { font-weight: 400; }
.fx-fillista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fx-fil { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px; border-radius: 14px; background: var(--panel2); border: 1px solid var(--line2); animation: fx-in .25s ease both; }
.fx-filikon { --c: var(--muted); --ct: var(--muted); position: relative; width: 40px; height: 48px; border-radius: 8px; display: grid; place-items: end center; padding-bottom: 7px; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .04em; color: var(--ct); background: color-mix(in srgb, var(--c) 13%, transparent); border: 1px solid color-mix(in srgb, var(--c) 36%, transparent); }
.fx-filikon::before { content: ""; position: absolute; top: 9px; left: 9px; right: 9px; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 5px 0 color-mix(in srgb, var(--c) 30%, transparent), 0 10px 0 color-mix(in srgb, var(--c) 20%, transparent); }
.fx-filikon[data-ext="pdf"] { --c: var(--danger); --ct: var(--fx-danger-text); }
.fx-filikon[data-ext="docx"] { --c: var(--blue); --ct: var(--fx-blue-text); }
.fx-filikon[data-ext="xlsx"], .fx-filikon[data-ext="csv"] { --c: var(--ok); --ct: var(--fx-ok-text); }
.fx-filikon[data-ext="bild"] { --c: var(--fx-lila); --ct: var(--fx-lila-text); }
.fx-fil-mitt { min-width: 0; }
.fx-fil-namn a { color: var(--fg); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.fx-fil-namn a:hover { color: var(--fx-accent-text); }
.fx-fil-meta { font-size: 12px; margin-top: 2px; }
.fx-typer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fx-typ { border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--panel); transition: border-color .15s, color .15s, background .15s; }
.fx-typ:hover { border-color: var(--accent); color: var(--fg); }
.fx-typ[aria-checked="true"] { background: var(--fx-tona-accent); border-color: var(--accent); color: var(--fx-accent-text); }
.fx-x { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--dim); font-size: 20px; line-height: 1; flex: none; }
.fx-x:hover { color: var(--fx-danger-text); background: var(--fx-tona-fel); }

/* ------------------------------------------------------------------ skanna: start */
.fx-skanning { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fx-start { display: flex; flex-direction: column; gap: 14px; }
.fx-start-info { display: flex; flex-direction: column; gap: 8px; }
.fx-start-rad { display: flex; gap: 8px; flex-wrap: wrap; }
.fx-start-tal { font-size: 13px; color: var(--muted); padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel2); }
.fx-start-tal b { color: var(--fg); font-family: var(--mono); }
/* ström skanperiod (2026-10-22): perioden väljs vid skanningen */
.fx-period { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13.5px; color: var(--muted); }
.fx-period .inp.fx-liten { max-width: 100%; }
.fx-start-kostnad { font-size: 14px; color: var(--muted); line-height: 1.5; }
.fx-start-kostnad b { color: var(--fg); }
.btn.fx-skanna { align-self: stretch; justify-content: flex-start; gap: 16px; padding: 18px 22px; border-radius: 18px; text-align: left; box-shadow: 0 12px 32px color-mix(in srgb, var(--accent) 28%, transparent); transition: transform .15s, box-shadow .2s, opacity .2s; }
.btn.fx-skanna:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 40px color-mix(in srgb, var(--accent) 38%, transparent); }
.btn.fx-skanna:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; transform: none; }
.fx-skanna-ikon { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: color-mix(in srgb, currentColor 12%, transparent); flex: none; }
.fx-skanna-ikon svg { width: 26px; height: 26px; fill: currentColor; }
.btn.fx-skanna:not(:disabled) .fx-skanna-ikon svg { animation: fx-glimt 2.8s ease-in-out infinite; }
@keyframes fx-glimt { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.12) rotate(12deg); } }
.fx-skanna-text { display: flex; flex-direction: column; gap: 2px; }
.fx-skanna-text b { font-family: var(--display); font-size: 22px; letter-spacing: .01em; line-height: 1.15; }
.fx-skanna-text small { font-size: 13px; font-weight: 500; opacity: .8; }
.fx-start-krav { margin: 0; font-size: 13px; color: var(--fx-accent-text); }
.fx-lamnar { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--line2); font-size: 13px; color: var(--muted); line-height: 1.5; }
.fx-lamnar p { margin: 0; }
.fx-lamnar b { color: var(--fg); }
.fx-lamnar svg { width: 18px; height: 18px; flex: none; margin-top: 1px; fill: none; stroke: var(--teal); stroke-width: 2; }

/* ------------------------------------------------------------------ skanna: agenterna arbetar */
.fx-team { display: flex; flex-direction: column; gap: 14px; }
.fx-team-topp { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fx-team-titel { display: flex; align-items: center; gap: 12px; }
.fx-team-titel b { font-family: var(--display); font-size: 18px; font-weight: 600; display: block; }
.fx-team-titel .fx-dim { font-size: 13px; }
.fx-live { width: 12px; height: 12px; border-radius: 50%; background: var(--teal); flex: none; animation: fx-puls 1.6s ease-out infinite; }
.fx-team.koad .fx-live { background: var(--accent); }
.fx-stapel { height: 10px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line2); overflow: hidden; }
.fx-stapel i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--blue), var(--accent), var(--teal)); background-size: 200% 100%; animation: fx-flod 2.4s linear infinite; transition: width .9s cubic-bezier(.2, .7, .2, 1); }
.fx-team-siffror { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fx-team-siffror b { color: var(--fg); font-family: var(--mono); }
.fx-kostnad { display: inline-flex; align-items: center; gap: 8px; }
.fx-mini { display: inline-block; width: 64px; height: 5px; border-radius: 3px; background: var(--line2); overflow: hidden; vertical-align: middle; }
.fx-mini i { display: block; height: 100%; background: var(--accent); transition: width .6s ease; }
.fx-agenter { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fx-agent { --c: var(--muted); --ct: var(--muted); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 14px; align-items: start; padding: 12px 14px; border-radius: 14px; background: var(--panel2); border: 1px solid var(--line2); transition: border-color .4s, background .4s, opacity .4s, box-shadow .4s; }
.fx-agent[data-agent="hamta"] { --c: var(--teal); --ct: var(--fx-teal-text); }
.fx-agent[data-agent="sortera"] { --c: var(--blue); --ct: var(--fx-blue-text); }
.fx-agent[data-agent="lasa"] { --c: var(--accent); --ct: var(--fx-accent-text); }
.fx-agent[data-agent="ogon"] { --c: var(--fx-lila); --ct: var(--fx-lila-text); }
.fx-agent[data-agent="analys"] { --c: color-mix(in srgb, var(--teal) 45%, var(--blue)); --ct: color-mix(in srgb, var(--fx-teal-text) 45%, var(--fx-blue-text)); }
.fx-agent[data-agent="granska"] { --c: var(--ok); --ct: var(--fx-ok-text); }
.fx-agent.vantar { opacity: .6; }
.fx-agent.hoppad { opacity: .5; }
.fx-agent.pagar { border-color: color-mix(in srgb, var(--c) 55%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 10%, var(--panel2)), var(--panel2) 65%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent), 0 10px 28px color-mix(in srgb, var(--c) 12%, transparent); }
.fx-agent.fel { border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
.fx-agent-ikon { position: relative; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--ct); background: color-mix(in srgb, var(--c) 16%, var(--panel)); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.fx-agent-ikon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.fx-agent.pagar .fx-agent-ikon::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--c); border-right-color: color-mix(in srgb, var(--c) 35%, transparent); animation: fx-snurr 1.1s linear infinite; }
.fx-agent.klar .fx-agent-ikon { background: color-mix(in srgb, var(--c) 24%, var(--panel)); }
.fx-agent-namn { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.fx-agent-namn b { font-weight: 600; }
.fx-agent-namn .fx-dim { font-size: 13px; }
.fx-modell { font-family: var(--mono); font-size: 11px; color: var(--dim); border: 1px solid var(--line2); border-radius: 6px; padding: 0 6px; }
.fx-agent-text { margin-top: 4px; font-size: 13px; color: var(--fg); overflow-wrap: anywhere; }
.fx-mini.fx-agent-stapel { display: block; width: 100%; margin-top: 8px; }
.fx-agent-stapel i { background: var(--c); }
.fx-rader { list-style: none; margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--bg) 50%, transparent); border: 1px solid var(--line2); font-family: var(--mono); font-size: 11.5px; line-height: 1.6; color: var(--muted); display: flex; flex-direction: column; min-width: 0; }
.fx-rader li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; animation: fx-in .4s ease both; }
.fx-rader li:last-child { color: var(--fg); }
.fx-rader li::before { content: "› "; color: var(--ct); }
.fx-agent-hoger { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.fx-agent-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--dim); white-space: nowrap; }
.fx-agent.pagar .fx-agent-status { color: var(--ct); }
.fx-agent.klar .fx-agent-status { color: var(--fx-ok-text); }
.fx-agent.fel .fx-agent-status { color: var(--fx-danger-text); }
.fx-raknare { font-family: var(--mono); font-size: 15px; font-weight: 500; color: var(--fg); font-variant-numeric: tabular-nums; }
.fx-raknare span { color: var(--dim); font-size: 12px; }
.fx-prickar { display: inline-flex; gap: 3px; }
.fx-prickar i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: fx-blink 1.2s infinite; }
.fx-prickar i:nth-child(2) { animation-delay: .2s; }
.fx-prickar i:nth-child(3) { animation-delay: .4s; }

/* ------------------------------------------------------------------ skanna: resultat */
.fx-resultat { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--teal) 35%, var(--line)); background: radial-gradient(120% 120% at 0% 0%, var(--fx-tona-teal), transparent 55%), var(--panel2); animation: fx-in .35s ease both; }
.fx-resultat.fel, .fx-resultat.avbruten { border-color: var(--line); background: var(--panel2); }
.fx-resultat.delvis { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.fx-resultat-topp { display: flex; align-items: center; gap: 14px; }
.fx-resultat-topp h3 { font-size: 21px; margin-top: 4px; }
.fx-glans { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: var(--fx-teal-text); background: var(--fx-tona-teal); border: 1px solid color-mix(in srgb, var(--teal) 40%, transparent); flex: none; }
.fx-glans svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }
.fx-sammanfattning { margin: 0; font-size: 16px; line-height: 1.6; }
.fx-siffror { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.fx-siffra { padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line2); display: flex; flex-direction: column; gap: 2px; }
.fx-siffra b { font-family: var(--display); font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fx-siffra span { font-size: 12px; color: var(--muted); }
.fx-siffra.varn b { color: var(--fx-accent-text); }
.fx-fakta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fx-fakta li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 10px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line2); font-size: 14px; line-height: 1.45; }
.fx-fakta li b { font-weight: 600; min-width: 130px; color: var(--muted); font-size: 13px; }
.fx-fakta li span:not(.src) { flex: 1 1 220px; min-width: 0; }
.fx-resultat-fot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.fx-resultat-fot .fx-dim { font-size: 13px; }
.fx-tackning { margin: 0; font-size: 12px; color: var(--dim); font-family: var(--mono); line-height: 1.6; }

/* ------------------------------------------------------------------ mer + slut (Kom igång) */
.fx-mer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fx-merkort { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); text-decoration: none; transition: border-color .15s, transform .15s; min-width: 0; }
a.fx-merkort:hover { border-color: var(--accent); transform: translateY(-1px); }
.fx-merkort.snart { border-style: dashed; background: transparent; }
.fx-merkort.snart .fx-merkort-ikon, .fx-merkort.snart .fx-merkort-text { opacity: .7; }
.fx-merkort-ikon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--panel2); border: 1px solid var(--line2); color: var(--muted); flex: none; }
.fx-merkort-ikon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.fx-merkort-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fx-merkort-text b { font-weight: 600; }
.fx-merkort-text span { font-size: 13px; color: var(--muted); line-height: 1.4; }
.fx-pil { color: var(--dim); font-size: 18px; flex: none; }
.fx-snart { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; white-space: nowrap; flex: none; }
.fx-slut { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 4px 0 8px; }
.fx-slut .hint { flex: 1 1 220px; }

/* ------------------------------------------------------------------ Företaget-hubben */
.fx-hub-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.fx-hub-huvud, .fx-hub-sida { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.fx-kort.fx-liten-kort { padding: 18px; gap: 12px; }
.fx-litenrubrik { font-size: 16px; }
.fx-ass { display: flex; gap: 14px; align-items: flex-start; }
.fx-ansikte { position: relative; width: 88px; height: 88px; border-radius: 22px; overflow: hidden; flex: none; border: 1px solid var(--line); background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--blue) 30%, transparent), transparent 62%), var(--panel2); }
.fx-ansikte-yta { position: absolute; inset: 0; }
.fx-ansikte-yta > * { width: 100%; height: 100%; }
.fx-ansikte-ersatt { position: absolute; inset: 0; display: grid; place-items: center; }
.fx-ansikte-ersatt span { font-family: var(--display); font-size: 36px; font-weight: 700; color: var(--fx-accent-text); }
.fx-ass-falt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.fx-matare-tal { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fx-matare-tal b { font-family: var(--display); font-size: 26px; font-variant-numeric: tabular-nums; }
.fx-matare-tal span { color: var(--muted); font-size: 13px; }
.fx-matare { display: flex; height: 10px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line2); overflow: hidden; }
.fx-matare i { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--ok)); }
.fx-matare i.res { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent) 55%, transparent) 0 6px, color-mix(in srgb, var(--accent) 22%, transparent) 6px 12px); }
.fx-matare.varn i:first-child { background: linear-gradient(90deg, var(--accent), var(--danger)); }
.fx-avancerat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fx-avancerat a { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line2); color: var(--fg); text-decoration: none; font-size: 14px; }
.fx-avancerat li:last-child a { border-bottom: 0; }
.fx-avancerat a:hover { color: var(--fx-accent-text); }
.fx-avancerat a span:nth-child(2) { flex: 1; }
.fx-avancerat-nr { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--panel2); border: 1px solid var(--line); color: var(--muted); flex: none; }
.fx-avancerat-nr.klar { background: var(--fx-tona-ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); color: var(--fx-ok-text); }
.fx-avancerat-nr.paborjad { border-color: var(--blue); color: var(--fx-blue-text); }

/* ------------------------------------------------------------------ checklistan (Företaget, Hem) */
.fx-checklista { padding: 18px 20px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: radial-gradient(100% 160% at 100% 0%, var(--fx-tona-accent), transparent 55%), var(--panel); display: flex; flex-direction: column; gap: 14px; }
.fx-checklista-topp { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fx-checklista-topp h3 { font-size: 20px; margin-top: 4px; }
.fx-checklista-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fx-checklista-lista li { min-width: 0; }
.fx-checklista-lista a { position: relative; display: flex; align-items: flex-start; gap: 10px; height: 100%; padding: 12px; border-radius: 14px; border: 1px solid var(--line2); background: var(--panel2); color: var(--fg); text-decoration: none; transition: border-color .15s; }
.fx-checklista-lista a:hover { border-color: var(--accent); }
.fx-checklista-lista li.klar a { opacity: .72; }
.fx-bock-liten { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--panel); border: 1px solid var(--line); flex: none; }
.fx-checklista-lista li.klar .fx-bock-liten { background: var(--fx-tona-ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); color: var(--fx-ok-text); }
.fx-checklista-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fx-checklista-text b { font-size: 14px; font-weight: 600; }
.fx-checklista-text small { font-size: 12px; color: var(--muted); line-height: 1.4; }
.fx-checklista-lista .fx-valfri { position: absolute; top: 8px; right: 8px; margin: 0; padding: 1px 6px; font-size: 10px; }

/* ------------------------------------------------------------------ brödsmulor i /kontoret/* (Avancerade inställningar) */
.fx-brod { width: 100%; max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; padding-top: 2px; }
.fx-brod ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; color: var(--dim); }
.fx-brod li + li::before { content: "›"; margin-right: 6px; color: var(--dim); }
.fx-brod a { color: var(--muted); text-decoration: none; }
.fx-brod a:hover { color: var(--fg); }
.fx-brod [aria-current] { color: var(--fg); font-weight: 600; }
.fx-brod a.fx-tillbaka { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px 5px 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); font-weight: 600; }
.fx-brod a.fx-tillbaka:hover { border-color: var(--accent); }
.fx-tillbaka svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; }

/* ------------------------------------------------------------------ ansökningar (Admin) */
.panel.fx-ans { gap: 14px; }
.fx-ans-topp { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.fx-ny { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 9px; border-radius: 999px; font-family: var(--body); font-size: 12px; font-weight: 700; background: var(--fx-tona-accent); color: var(--fx-accent-text); vertical-align: middle; }
.fx-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.fx-lankruta { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--line)); background: var(--fx-tona-ok); }
.fx-kopiera { display: flex; gap: 8px; align-items: center; }
.fx-kopiera .inp { flex: 1; min-width: 0; }
.fx-ans-lista { display: flex; flex-direction: column; gap: 10px; }
.fx-ansokan { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line2); background: var(--panel2); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fx-ansokan.ny { border-left: 3px solid var(--blue); }
.fx-ansokan-topp { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.fx-ansokan-namn { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fx-ansokan-namn b { font-size: 15px; }
.fx-ansokan-kontakt { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.fx-citat { margin: 0; padding: 8px 12px; border-left: 3px solid var(--line); color: var(--fg); font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }
.fx-ansokan-info { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13px; color: var(--muted); }
.fx-ansokan-form { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.fx-tomt { color: var(--dim); font-style: italic; margin: 0; }

/* ------------------------------------------------------------------ bredd */
@media (max-width: 1000px) {
  .fx-hub-grid { grid-template-columns: minmax(0, 1fr); }
  .fx-checklista-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .fx-gast { align-items: flex-start; padding: 22px 16px 36px; }
  .fx-gast-in { grid-template-columns: minmax(0, 1fr); max-width: 520px; gap: 22px; }
  .fx-pitch { gap: 12px; }
  .fx-pitch h1 { font-size: 30px; }
  .fx-pitch .fx-lead { font-size: 15px; }
  .fx-punkter, .fx-trygg { display: none; }
}
@media (max-width: 700px) {
  .fx-mer { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .fx-gastkort { padding: 18px 16px; border-radius: 20px; gap: 16px; }
  .fx-tva { grid-template-columns: minmax(0, 1fr); }
  .fx-nasta { grid-template-columns: minmax(0, 1fr); }
  .fx-nasta li { flex-direction: row; align-items: center; gap: 10px; }
  .fx-hjalte { padding: 20px 18px 18px; border-radius: 20px; }
  .fx-hjalte .fx-lead { font-size: 15px; }
  .fx-kort { padding: 16px; border-radius: 18px; gap: 14px; }
  .fx-kort-huvud { gap: 12px; }
  .fx-kort-titel h2 { font-size: 18px; }
  .fx-kort-status { display: none; }
  .fx-konto { grid-template-columns: auto minmax(0, 1fr); padding: 12px; }
  .fx-konto-knappar { grid-column: 1 / -1; justify-content: flex-start; }
  .fx-epostform { padding: 14px; }
  .fx-serverrad { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fx-serverrad > .inp:first-of-type { grid-column: 1 / -1; }
  .fx-drop { padding: 16px; gap: 14px; }
  .fx-drop-ikon { width: 44px; height: 44px; border-radius: 13px; }
  .fx-bara-stor { display: none; }
  .fx-bara-liten { display: inline; }
  .fx-fil { padding: 10px; gap: 10px; }
  .btn.fx-skanna { padding: 16px; }
  .fx-skanna-text b { font-size: 20px; }
  .fx-agent { grid-template-columns: auto minmax(0, 1fr); padding: 12px; }
  .fx-agent-hoger { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }
  .fx-resultat { padding: 16px; }
  .fx-slut .btn { width: 100%; }
  .fx-checklista { padding: 16px; }
  .fx-checklista-lista { grid-template-columns: minmax(0, 1fr); }
  .fx-brod ol { display: none; }
  .fx-ass { flex-direction: row; }
  .fx-ansikte { width: 72px; height: 72px; border-radius: 18px; }
  .fx-kopiera { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-bock path { stroke-dashoffset: 0; }
}

/* ------------------------------------------------------------------ tillägg efter första ögonkontrollen */
.btn.fx-skanna:disabled { opacity: 1; background: var(--panel2); color: var(--muted); border: 1px dashed var(--line); }
.btn.fx-skanna:disabled .fx-skanna-ikon { background: var(--panel); }
/* Admin: fälten i «Bjud in» och «Ny organisation» (kontoret.css «.val label» är menat för radioknappar) */
.val > label.valf { display: flex; flex-direction: column; align-items: stretch; gap: 4px; border: 0; border-radius: 0; padding: 0; background: none; box-shadow: none; cursor: default; font-size: 13px; color: var(--muted); }
/* Kom igång: teamet som en stjärnbild i hjälteytan */
.fx-konstellation { position: absolute; right: 34px; top: 70px; width: 250px; height: auto; pointer-events: none; }
.fx-konstellation .fx-k-linjer { fill: none; stroke: color-mix(in srgb, var(--fg) 22%, transparent); stroke-width: 1.2; stroke-dasharray: 3 6; animation: fx-flyt 9s linear infinite; }
.fx-konstellation circle { --c: var(--teal); fill: color-mix(in srgb, var(--c) 28%, var(--panel2)); stroke: var(--c); stroke-width: 1.6; transform-box: fill-box; transform-origin: center; animation: fx-nod 4.2s ease-in-out infinite; }
.fx-konstellation .k2 { --c: var(--blue); animation-delay: -.7s; }
.fx-konstellation .k3 { --c: var(--accent); animation-delay: -1.4s; }
.fx-konstellation .k4 { --c: var(--fx-lila); animation-delay: -2.1s; }
.fx-konstellation .k5 { --c: color-mix(in srgb, var(--teal) 45%, var(--blue)); animation-delay: -2.8s; }
.fx-konstellation .k6 { --c: var(--ok); animation-delay: -3.5s; }
.fx-konstellation .fx-k-glod { fill: color-mix(in srgb, var(--accent) 22%, transparent); stroke: none; animation: fx-glod 4.2s ease-in-out infinite; }
@keyframes fx-flyt { to { stroke-dashoffset: -90; } }
@keyframes fx-nod { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }
@keyframes fx-glod { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: .8; transform: scale(1.25); } }
.fx-kom .fx-hjalte { min-height: 214px; }
.fx-kom .fx-hjalte > h1, .fx-kom .fx-hjalte > .fx-lead { max-width: calc(100% - 270px); }
@media (max-width: 760px) {
  .fx-konstellation { display: none; }
  .fx-kom .fx-hjalte { min-height: 0; }
  .fx-kom .fx-hjalte > h1, .fx-kom .fx-hjalte > .fx-lead { max-width: none; }
}
@media (max-width: 600px) {
  .fx-epostform .knappar .btn.primary { flex: 1 1 100%; }
}
/* Kom igång: del 1 och 2 fälls ihop när en skanning finns, så att agenterna syns direkt */
.fx-del.fx-ihop { display: none; }
.fx-vaxla { flex: none; align-self: center; }
.fx-kort:has(> .fx-del.fx-ihop) { padding-bottom: 18px; }
/* filtyp: valknappar på bred skärm, rullgardin på telefon */
.fx-typval { display: none; }
@media (max-width: 600px) {
  .fx-typer { display: none; }
  .fx-typval { display: block; margin-top: 8px; max-width: 100%; }
  .fx-kort-huvud { flex-wrap: wrap; }
  .fx-vaxla { margin-left: auto; }
}
/* efter en skanning: «Skanna igen» är en sekundär knapp bredvid uppskattningen – «Se och rätta» är huvudvalet */
.fx-start.igen { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-top: 14px; border-top: 1px solid var(--line2); }
.fx-start.igen .fx-start-info { flex: 1 1 320px; }
.fx-start.igen > :not(.fx-start-info):not(.fx-skanna-igen) { flex-basis: 100%; }
.btn.fx-skanna-igen { flex: none; gap: 8px; }
.btn.fx-skanna-igen svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.btn.fx-skanna-igen:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.fx-start.igen .fx-lamnar { padding: 10px 12px; font-size: 12px; }
@media (max-width: 600px) { .btn.fx-skanna-igen { width: 100%; } }
/* kontoret.css gör alla «.val input» 18 px stora (radioknappar) – textfälten i Admin ska vara fulla fält */
.val > label.valf .inp { width: 100%; height: auto; margin: 0; }
/* skalets topprad är fast (sticky): ankarlänkar landar under den, inte bakom den */
.panel.fx-ans, .fx-checklista { scroll-margin-top: calc(var(--skal-topp, 0px) + 16px); }

/* «Godkänn allt med källa» på resultatkortet (2026-10-23) */
.fx-godkann-allt { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--teal) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--teal) 45%, var(--line)); }
.fx-godkann-allt span { flex: 1 1 280px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.fx-godkann-allt b { color: var(--fg); }
.fx-godkann-allt .btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }

/* Bransch (2026-10-23): automatiskt eller högst tre */
.fx-bransch { display: grid; gap: 10px; }
.fx-bransch-auto { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; line-height: 1.45; }
.fx-bransch-auto input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.fx-bransch-auto .fx-dim { display: block; }
.fx-bransch-val { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-bransch-val .chip[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* 2026-10-23 (Tommy via Serguei): prislistan först, «Rekommenderas», övriga mappar, privat post, eget intervall */
.fx-rek { display: inline-block; font-family: var(--body); font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #3A2400; background: var(--accent); border-radius: 999px; padding: 2px 9px; vertical-align: middle; margin-left: 6px; }
.fx-viktigast { margin: 6px 0 0; padding: 8px 12px; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; background: var(--fx-tona-accent); color: var(--fg); font-size: 14px; line-height: 1.45; }
.fx-viktigast + p { margin-top: 6px; }
.fx-prislista-saknas { display: flex; gap: 9px; align-items: flex-start; margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: var(--fx-tona-accent); color: var(--fg); font-size: 14px; line-height: 1.45; }
.fx-prislista-saknas b { color: var(--accent-text); }
.fx-omfang-hjalp { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.fx-privat { border-radius: 12px; align-items: flex-start; margin-top: 10px; line-height: 1.45; }
.fx-privat input { margin-top: 2px; flex: none; }
.fx-omfang-form .fx-privat { margin-top: 0; }
.fx-intervall { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.fx-intervall label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }

/* Företaget → Snabbfrågor (2026-10-28) */
.fx-snabb-lista { margin: 0 0 10px; padding-left: 22px; display: grid; gap: 8px; }
.fx-snabb-lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; }
.fx-snabb-visa { margin: 0 0 8px; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
/* 2026-10-29: flera webbplatser – «×» i chipen */
.fx-chip-x { background: none; border: 0; padding: 0 0 0 2px; margin: 0 -2px 0 2px; color: var(--dim); font-size: 15px; line-height: 1; cursor: pointer; }
.fx-chip-x:hover { color: var(--danger); }
.fx-webb .fx-aldrig-rad { align-items: flex-start; }
.fx-webb .fx-aldrig-rad > svg { margin-top: 3px; }
.fx-sociala .fx-aldrig-rad > svg { stroke: var(--accent); }
.fx-sociala .fx-chip { max-width: 100%; min-width: 0; }
.fx-sociala .fx-chip a { min-width: 0; overflow-wrap: anywhere; color: inherit; text-decoration: none; }
.fx-sociala .fx-chip a:hover { text-decoration: underline; }
.fx-sociala .fx-chip-x { flex: none; }
.fx-webb .fx-aldrig-rad > .fx-lank { margin-left: auto; white-space: nowrap; margin-top: 2px; }
@media (max-width: 640px) { .fx-webb .fx-aldrig-rad > .fx-lank { flex-basis: 100%; margin-left: 28px; text-align: left; } }
/* 2026-10-29: fler filtyper */
.fx-filikon[data-ext="odt"], .fx-filikon[data-ext="rtf"] { --c: var(--blue); --ct: var(--fx-blue-text); }
.fx-filikon[data-ext="ods"], .fx-filikon[data-ext="sie"], .fx-filikon[data-ext="se"], .fx-filikon[data-ext="json"] { --c: var(--ok); --ct: var(--fx-ok-text); }
.fx-filikon[data-ext="dxf"], .fx-filikon[data-ext="svg"] { --c: var(--fx-lila); --ct: var(--fx-lila-text); }
.fx-filikon[data-ext="xml"] { --c: var(--ok); --ct: var(--fx-ok-text); }

/* 2026-10-29: «Analysera det nya» */
.fx-nytt { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--fx-tona-accent); }
.fx-nytt-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fg); }
.fx-skanna-nytt { align-self: flex-start; }

/* 2026-11-06 (Serguei: «varför visas hela fillistan?»): fillistan hopfälld – antal per typ i rubriken, listan på begäran */
.fx-fil-detaljer > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; cursor: pointer; padding: 10px 0; }
.fx-fil-detaljer > summary::-webkit-details-marker { display: none; }
.fx-fil-typer { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.fx-fil-typtal { font-size: 12.5px; padding: 3px 9px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.fx-fil-typtal b { color: var(--fg); }
.fx-fil-typtal.varn { color: var(--accent-text); border-color: rgba(245, 165, 36, .45); }
.fx-fil-visa { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--accent-text); white-space: nowrap; }
.fx-fil-detaljer[open] > summary .fx-visa-stangd, .fx-fil-detaljer:not([open]) > summary .fx-visa-oppen { display: none; }
.fx-fil-hint { margin: 0 0 8px; }
/* Kom igång: mappen på datorn kopplas på sidan (2026-11-11) – korten från Mina sidor under raden med de två korten */
.fx-mappdel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fx-mappdel > p { margin: 0; }
.fx-mappdel .kort > .btn { align-self: flex-start; }