@font-face{font-family:"Bricolage Grotesque";src:url("fonts/BricolageGrotesque.ttf") format("truetype");font-weight:200 800;font-display:swap}
/* BlixtDesk – designsystem
   Färg: kall ljusgrå arbetsyta, bläckblå text, indigo för handling, saffransgul för ärendenummer. */
:root {
  --bg: #F6F3FA;          /* 4.46.0: Blixtflows Ljus-ton */
  --surface: #FFFFFF;
  --surface-2: #FAF8FC;
  --hover: #F1EBF8;
  --active: #E9E0F3;
  --line: #E7DFF0;
  --line-strong: #D6CAE6;
  --ink: #1B2130;
  --ink-2: #3A4254;
  --muted: #5E5470;   /* 4.46.0: brandton, 4,5:1 mot Ljus */
  --faint: #7F7690;   /* 4.46.0 */
  --accent: #7E45C9;        /* 4.45.0: Blixtflows Primär (mörkare ton: 5,6:1 mot vitt) */
  --accent-ink: #FFFFFF;
  --accent-soft: #F3ECFB;
  --accent-line: #D9C4F5;
  --saffron: #B9820A;
  --saffron-soft: #FDF4DC;
  --green: #1C8C68;
  --green-soft: #E3F5EE;
  --red: #C83E5E;
  --red-soft: #FCE9EE;
  --blue: #2F6FD6;
  --note: #FFF8E1;
  --note-line: #F1DB9B;
  --unread-bg: #F4F3FF;
  --unread-bar: #5A55F2;
  --shadow: 0 1px 2px rgba(20, 24, 40, .06), 0 4px 14px rgba(20, 24, 40, .05);
  --shadow-pop: 0 10px 38px rgba(20, 24, 40, .16), 0 2px 6px rgba(20, 24, 40, .08);
  --r-sm: 6px; --r: 9px; --r-lg: 14px;
  --font: "Inter", ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1219; --surface: #171B24; --surface-2: #1C212C; --hover: #232835; --active: #2A3040;
    --line: #262C39; --line-strong: #333A4A; --ink: #E8EAF0; --ink-2: #C5CAD6; --muted: #949BAA; --faint: #6E7687;
    --accent: #B893F2; --accent-soft: #2E1F45; --accent-line: #4E3770; --saffron: #E6B642; --saffron-soft: #3A2F12;
    --green: #4CC59A; --green-soft: #16342A; --red: #F0708E; --red-soft: #3D1C26; --note: #2E2914; --note-line: #574B1E; --unread-bg: #1F2140; --unread-bar: #8B86FF;
    --shadow: 0 1px 2px rgba(0,0,0,.4); --shadow-pop: 0 12px 40px rgba(0,0,0,.5); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #150A22; --surface: #1E1130; --surface-2: #231538; --hover: #2C1B44; --active: #35224F;   /* 4.46.0: Natt-toner */
  --line: #33224A; --line-strong: #44305E; --ink: #E8EAF0; --ink-2: #C5CAD6; --muted: #949BAA; --faint: #6E7687;
  --accent: #7D78FF; --accent-soft: #25244A; --accent-line: #3E3C7A; --saffron: #E6B642; --saffron-soft: #3A2F12;
  --green: #4CC59A; --green-soft: #16342A; --red: #F0708E; --red-soft: #3D1C26; --note: #2E2914; --note-line: #574B1E; --unread-bg: #1F2140; --unread-bar: #8B86FF;
  --shadow: 0 1px 2px rgba(0,0,0,.4); --shadow-pop: 0 12px 40px rgba(0,0,0,.5); color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 13.5px/1.5 var(--font); -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
.i { flex: none; display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
/* Skärmläsarfält. !important behövs: .composer textarea sätter width:100% och min-height,
   vilket gjorde att det dolda fältet blev 1280 px brett och sköt ut sidan åt höger. */
.sr { position: absolute !important; width: 1px !important; height: 1px !important;
  min-height: 0 !important; max-height: none !important; padding: 0 !important; margin: -1px !important;
  border: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.grow { flex: 1; min-width: 0; }
.row { display: flex; align-items: center; gap: 8px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.hidden { display: none !important; }

/* ─── Skal ─────────────────────────────────────────── */
.shell { display: flex; height: 100vh; height: 100dvh; padding: 8px 8px 8px 0; gap: 0; }
.rail { width: 56px; flex: none; display: flex; flex-direction: column; align-items: center; padding: 6px 0; gap: 4px; }
.rail a, .rail button { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r); color: var(--muted); border: 0; background: none; cursor: pointer; position: relative; }
.rail a:hover, .rail button:hover { background: var(--hover); color: var(--ink); }
.rail a.on { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }
.rail .sep { width: 22px; height: 1px; background: var(--line-strong); margin: 6px 0; }
.rail .spacer { flex: 1; }
.rail .ws-dot { width: 28px; height: 28px; border-radius: 8px; color: #fff; font-weight: 650; font-size: 12px; display: grid; place-items: center; }
.rail .tip { position: absolute; left: 44px; background: var(--ink); color: var(--surface); font-size: 12px; padding: 3px 8px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateX(-4px); transition: .12s; z-index: 50; }
.rail a:hover .tip { opacity: 1; transform: none; }
.frame { flex: 1; min-width: 0; display: flex; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--line); }

.avatar { width: var(--s, 28px); height: var(--s, 28px); border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-weight: 650; font-size: calc(var(--s, 28px) * .38); flex: none; letter-spacing: .01em; }
.avatar.sq { border-radius: 8px; }

/* ─── Sidopanel (mappar) ───────────────────────────── */
.side { width: 236px; flex: none; background: var(--surface-2); border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; }
.side-head { height: 54px; padding: 0 10px 0 16px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid transparent; }
.side-head h1 { font-size: 15px; font-weight: 650; margin: 0; flex: 1; letter-spacing: -.01em; }
.side-scroll { flex: 1; overflow-y: auto; padding: 4px 8px 16px; }
.side-label { font-size: 11.5px; color: var(--faint); font-weight: 550; padding: 14px 8px 4px; display: flex; align-items: center; justify-content: space-between; }
.nav-item { display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 8px; border-radius: var(--r-sm); color: var(--ink-2); font-size: 13.5px; }
.nav-item:hover { background: var(--hover); }
.nav-item.on { background: var(--active); color: var(--ink); font-weight: 560; }
.nav-item .i { color: var(--muted); }
.nav-item .count { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.nav-item.unread .label { font-weight: 620; color: var(--ink); }
.nav-item .dot-err { width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-left: auto; }
.side-foot { padding: 10px; border-top: 1px solid var(--line); }

/* ─── Knappar och fält ────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-weight: 530; font-size: 13px; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s; }
.btn:hover { background: var(--hover); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--hover); }
.btn.danger { color: var(--red); }
.btn.danger:hover { background: var(--red-soft); border-color: var(--red-soft); }
.btn.sm { height: 26px; padding: 0 8px; font-size: 12.5px; }
.btn.icon { width: 32px; padding: 0; }
.btn.sm.icon { width: 26px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-split { display: inline-flex; }
.btn-split .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-split .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid rgba(255,255,255,.25); padding: 0 6px; }

label.field { display: flex; flex-direction: column; gap: 5px; }
.field > span { font-size: 12.5px; font-weight: 560; color: var(--ink-2); }
.field small, .help { font-size: 12px; color: var(--muted); }
.input, select.input, textarea.input { width: 100%; height: 36px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); outline: none; transition: border-color .12s, box-shadow .12s; }
textarea.input { height: auto; min-height: 96px; padding: 9px 11px; resize: vertical; line-height: 1.55; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input.sm { height: 30px; font-size: 13px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 720px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

.switch { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.switch input { appearance: none; width: 34px; height: 20px; border-radius: 20px; background: var(--line-strong); position: relative; flex: none; cursor: pointer; transition: background .15s; margin: 1px 0 0; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(14px); }
.switch b { display: block; font-weight: 560; }
.switch em { display: block; font-style: normal; color: var(--muted); font-size: 12.5px; }
.check { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.check input { accent-color: var(--accent); width: 15px; height: 15px; }

.badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 5px; font-size: 11.5px; font-weight: 560; background: var(--hover); color: var(--ink-2); white-space: nowrap; }
.badge.green { background: var(--green-soft); color: var(--green); }
.badge.red { background: var(--red-soft); color: var(--red); }
.badge.accent { background: var(--accent-soft); color: var(--accent); }
.badge.saffron { background: var(--saffron-soft); color: var(--saffron); }
.ticket { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px 0 5px; border-radius: 5px; font-size: 11.5px; font-weight: 620; letter-spacing: .01em; background: var(--saffron-soft); color: var(--saffron); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ticket .i { width: 12px; height: 12px; }
.tagpill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 20px; font-size: 12px; background: var(--hover); color: var(--ink-2); }
.tagpill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--muted)); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); display: inline-block; flex: none; }
.dot.ok { background: var(--green); } .dot.err { background: var(--red); } .dot.warn { background: var(--saffron); }

.flash { margin: 0 0 14px; padding: 10px 12px; border-radius: var(--r); font-size: 13px; display: flex; gap: 8px; align-items: flex-start; }
.flash.success { background: var(--green-soft); color: var(--green); }
.flash.error { background: var(--red-soft); color: var(--red); }
.toast-wrap { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: var(--ink); color: var(--surface); padding: 9px 14px; border-radius: 10px; box-shadow: var(--shadow-pop); font-size: 13px; animation: toastIn .2s ease-out; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

/* ─── Konversationslista ───────────────────────────── */
.list { width: 340px; flex: none; border-right: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; }
.list-head { height: 54px; padding: 0 10px 0 16px; display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); }
.list-head h2 { font-size: 15px; font-weight: 650; margin: 0; flex: 1; letter-spacing: -.01em; }
.list-search { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.list-search .input { height: 32px; background: var(--surface-2); }
.list-scroll { flex: 1; overflow-y: auto; padding: 6px; }
.conv { display: block; padding: 10px 10px 10px 14px; border-radius: var(--r); border: 1px solid transparent; position: relative; margin-bottom: 2px; }
.conv:hover { background: var(--surface-2); }
.conv .top { display: flex; align-items: center; gap: 7px; }
.conv .who { font-weight: 480; color: var(--ink-2); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv time { font-size: 11.5px; color: var(--faint); flex: none; font-variant-numeric: tabular-nums; }
.conv .subj { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.conv .prev { font-size: 12.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.conv .meta { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
/* Oläst: tonad bakgrund, färgad kant, fet text och prick */
.conv.unread { background: var(--unread-bg); }
.conv.unread:hover { background: var(--unread-bg); filter: brightness(.985); }
.conv.unread::after { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--unread-bar); }
.conv.unread .who { font-weight: 700; color: var(--ink); }
.conv.unread .subj { color: var(--ink); font-weight: 600; }
.conv.unread .prev { color: var(--ink-2); }
.conv.unread time { color: var(--accent); font-weight: 600; }
.conv.on, .conv.on.unread { background: var(--accent-soft); border-color: var(--accent-line); }
.conv.flash-new { animation: newPulse 1.6s ease-out; }
@keyframes newPulse { 0% { box-shadow: 0 0 0 0 var(--accent-line); } 30% { box-shadow: 0 0 0 4px var(--accent-line); } 100% { box-shadow: 0 0 0 0 transparent; } }
.unread-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 650; display: inline-grid; place-items: center; }
.chan-ico { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; background: var(--hover); color: var(--muted); flex: none; }
.chan-ico .i { width: 11px; height: 11px; }
.prio-urgent { color: var(--red); } .prio-high { color: var(--saffron); }
.empty { padding: 48px 24px; text-align: center; color: var(--muted); }
.empty .i { margin: 0 auto 12px; color: var(--faint); }
.empty h3 { color: var(--ink); font-size: 15px; margin: 0 0 4px; font-weight: 620; }

/* ─── Konversation ─────────────────────────────────── */
.thread { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.thread-head { min-height: 54px; padding: 8px 12px 8px 20px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.thread-head h2 { font-size: 15px; font-weight: 650; margin: 0; letter-spacing: -.01em; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.thread-head .grow { min-width: 120px; }
.thread-scroll { flex: 1; overflow-y: auto; padding: 18px 24px 24px; background: var(--surface); }
.msg { display: flex; gap: 12px; margin-bottom: 18px; max-width: 880px; }
.msg .body { flex: 1; min-width: 0; }
.msg .head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.msg .head b { font-weight: 620; }
.msg .head .addr { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg .head time { margin-left: auto; color: var(--faint); font-size: 12px; white-space: nowrap; }
.bubble { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; background: var(--surface); white-space: pre-wrap; word-wrap: break-word; line-height: 1.6; }
.msg.out .bubble { background: var(--surface-2); }
.msg.note .bubble { background: var(--note); border-color: var(--note-line); }
.msg.system { justify-content: center; }
.msg.system .sys { font-size: 12px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 20px; padding: 3px 12px; }
.bubble iframe { width: 100%; border: 0; min-height: 80px; display: block; background: #fff; border-radius: 6px; }
.bubble.html { padding: 6px; white-space: normal; }
.delivery { font-size: 11.5px; color: var(--muted); margin-top: 4px; display: flex; gap: 5px; align-items: center; }
.delivery.failed { color: var(--red); }
.atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* 4.95.1: bilder, video och ljud från Instagram, Messenger och WhatsApp visas direkt i tråden */
.att-media { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.msg.out .att-media { justify-content: flex-end; }
.att-photo { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2, var(--surface)); line-height: 0; }
.att-photo img { display: block; max-width: min(280px, 70vw); max-height: 320px; width: auto; height: auto; object-fit: cover; }
.att-photo:hover { border-color: var(--faint); }
.att-video { display: block; max-width: min(320px, 75vw); max-height: 360px; border-radius: 10px; background: #000; }
.att-audio { display: block; width: min(300px, 75vw); height: 36px; }
.att { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-size: 12.5px; max-width: 260px; }
.att:hover { border-color: var(--line-strong); background: var(--surface-2); }
.att span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att small { color: var(--faint); }

.composer { border-top: 1px solid var(--line); padding: 12px 20px 14px; background: var(--surface); }
.composer-box { border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); transition: border-color .12s, box-shadow .12s; }
.composer-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.composer.note-mode .composer-box { background: var(--note); border-color: var(--note-line); }
.composer-tabs { display: flex; gap: 2px; padding: 6px 6px 0; }
.composer-tabs button { border: 0; background: none; padding: 5px 10px; border-radius: 6px; font-size: 12.5px; color: var(--muted); cursor: pointer; font-weight: 540; }
.composer-tabs button.on { background: var(--hover); color: var(--ink); }
.composer textarea { width: 100%; border: 0; outline: 0; background: transparent; resize: none; min-height: 84px; max-height: 320px; padding: 8px 12px; line-height: 1.55; }
.composer-bar { display: flex; align-items: center; gap: 4px; padding: 4px 6px 6px 8px; }
.composer-files { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 10px; }

/* ─── Detaljpanel ─────────────────────────────────── */
.details { width: 300px; flex: none; border-left: 1px solid var(--line); background: var(--surface-2); overflow-y: auto; }
.details section { padding: 16px; border-bottom: 1px solid var(--line); }
.details h4 { margin: 0 0 10px; font-size: 12px; color: var(--faint); font-weight: 560; }
.kv { display: grid; grid-template-columns: 92px 1fr; gap: 8px 10px; font-size: 13px; align-items: center; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.contact-card { display: flex; gap: 12px; align-items: center; }
.contact-card b { display: block; font-size: 14px; }
.hist a { display: block; padding: 7px 8px; border-radius: 6px; margin: 0 -8px; }
.hist a:hover { background: var(--hover); }

/* ─── Sidor (inställningar m.m.) ──────────────────── */
.page { flex: 1; overflow-y: auto; }
.page-inner { max-width: 1040px; margin: 0 auto; padding: 28px 32px 64px; }
.page-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 22px; }
.page-head h1 { font-size: 22px; letter-spacing: -.02em; margin: 0; font-weight: 680; }
.page-head p { margin: 4px 0 0; color: var(--muted); max-width: 64ch; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; }
.crumb { font-size: 12.5px; color: var(--muted); display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.crumb a:hover { color: var(--ink); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.card + .card { margin-top: 16px; }
.card-head { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.card-head h3 { margin: 0; font-size: 14.5px; font-weight: 640; }
.card-head p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.card-body { padding: 20px; }
.card-foot { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; }
.tabs a { padding: 9px 12px; font-weight: 540; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--ink); border-color: var(--accent); }

.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; font-weight: 560; color: var(--muted); font-size: 12px; padding: 9px 20px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.table td { padding: 11px 20px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table-wrap { overflow-x: auto; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; display: flex; flex-direction: column; gap: 10px; transition: border-color .12s, box-shadow .12s; }
a.tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.tile-top { display: flex; gap: 12px; align-items: flex-start; }
.tile-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.tile h3 { margin: 0; font-size: 14.5px; font-weight: 640; }
.tile p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.tile-foot { display: flex; gap: 8px; align-items: center; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }

.type-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.type-opt { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); align-items: flex-start; }
.type-opt:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.type-opt b { display: block; font-weight: 600; }
.type-opt small { color: var(--muted); display: block; line-height: 1.45; margin-top: 2px; }

.code { font-family: var(--mono); font-size: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; overflow-x: auto; white-space: pre; display: block; }
.copyline { display: flex; gap: 6px; align-items: center; }
.copyline .code { flex: 1; padding: 7px 10px; white-space: nowrap; }

.check-list { display: flex; flex-direction: column; }
.check-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: center; }
.check-row:last-child { border-bottom: 0; }
.check-mark { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.check-mark.ok { background: var(--green-soft); color: var(--green); }
.check-mark.bad { background: var(--red-soft); color: var(--red); }
.check-mark.warn { background: var(--saffron-soft); color: var(--saffron); }
.check-row b { font-weight: 560; }
.check-row small { margin-left: auto; color: var(--muted); text-align: right; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.stat span { font-size: 12px; color: var(--muted); }
.stat b { display: block; font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

.meter { height: 6px; background: var(--hover); border-radius: 6px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--accent); border-radius: 6px; }

/* Popover-meny */
.pop { position: relative; }
.pop-menu { position: absolute; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-pop); padding: 5px; min-width: 210px; z-index: 60; display: none; max-height: 360px; overflow-y: auto; }
.pop.open .pop-menu { display: block; }
.pop-menu button, .pop-menu a, .pop-menu label { display: flex; width: 100%; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 6px; border: 0; background: none; text-align: left; cursor: pointer; font-size: 13px; }
.pop-menu button:hover, .pop-menu a:hover, .pop-menu label:hover { background: var(--hover); }
.pop-menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }

/* Modal */
dialog.modal { border: 0; padding: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-pop); background: var(--surface); color: var(--ink); width: min(560px, calc(100vw - 24px)); }
dialog.modal::backdrop { background: rgba(15, 18, 28, .38); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal-head { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; }
.modal-head h3 { margin: 0; font-size: 15px; flex: 1; }
.modal-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.modal-foot { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; background: var(--surface-2); }

/* ─── Chatbot-designer ────────────────────────────── */
.designer { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; }
.stage { position: sticky; top: 0; background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 10px, var(--bg) 10px, var(--bg) 20px); border: 1px solid var(--line); border-radius: var(--r-lg); height: 640px; overflow: hidden; }
.stage-bar { height: 34px; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 6px; padding: 0 12px; }
.stage-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.stage-bar span { margin-left: 10px; font-size: 12px; color: var(--faint); background: var(--surface-2); padding: 2px 10px; border-radius: 6px; }
.wprev { position: absolute; bottom: 20px; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.wprev.left { align-items: flex-start; }
.wpanel { width: 340px; height: 500px; background: #fff; color: #1b2130; border-radius: var(--wr, 18px); box-shadow: 0 16px 48px rgba(20,24,40,.22); overflow: hidden; display: flex; flex-direction: column; }
.wpanel.dark { background: #171b24; color: #e8eaf0; }
.whead { padding: 18px 18px 16px; background: var(--wc); color: var(--wt); }
.whead .wrow { display: flex; gap: 10px; align-items: center; }
.whead .wav { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; font-weight: 700; }
.whead b { display: block; font-size: 15px; }
.whead small { opacity: .85; font-size: 12px; }
.wbody { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; font-size: 13.5px; }
.wmsg { max-width: 82%; padding: 8px 12px; border-radius: 14px; line-height: 1.45; }
.wmsg.bot { background: #f1f2f6; align-self: flex-start; border-bottom-left-radius: 4px; }
.wpanel.dark .wmsg.bot { background: #232835; }
.wmsg.me { background: var(--wc); color: var(--wt); align-self: flex-end; border-bottom-right-radius: 4px; }
.wsugg { display: flex; flex-wrap: wrap; gap: 6px; }
.wsugg span { border: 1px solid var(--wc); color: var(--wc); border-radius: 20px; padding: 4px 10px; font-size: 12px; }
.winput { border-top: 1px solid #eceef3; padding: 10px 12px; display: flex; gap: 8px; align-items: center; color: #9aa1af; font-size: 13px; }
.wpanel.dark .winput { border-color: #262c39; }
.winput .wsend { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; background: var(--wc); color: var(--wt); display: grid; place-items: center; }
.wbrand { text-align: center; font-size: 10.5px; color: #9aa1af; padding: 0 0 8px; }
.wlauncher { height: 52px; padding: 0 18px 0 14px; border-radius: 26px; background: var(--wc); color: var(--wt); display: flex; align-items: center; gap: 8px; font-weight: 600; box-shadow: 0 8px 24px rgba(20,24,40,.22); }
.color-in { display: flex; gap: 8px; align-items: center; }
.color-in input[type=color] { width: 36px; height: 36px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 2px; background: var(--surface); cursor: pointer; }
.swatches { display: flex; gap: 6px; }
.swatches button { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line-strong); cursor: pointer; }

/* ─── Auth och installation ───────────────────────── */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.auth-side { background: #14172B; color: #E8E9F5; padding: 44px 52px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.auth-side .brand { display: flex; align-items: center; gap: 10px; font-weight: 680; font-size: 16px; }
.brand-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--accent); display: grid; place-items: center; color: #fff; }
.auth-side h2 { font-size: 34px; line-height: 1.12; letter-spacing: -.025em; font-weight: 650; margin: auto 0 18px; max-width: 14ch; }
.auth-side p { color: #A6A9C6; max-width: 42ch; margin: 0 0 32px; font-size: 14.5px; }
.auth-side .ticket-demo { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; max-width: 360px; }
.auth-side .tdemo { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 10px 12px; display: flex; gap: 10px; align-items: center; font-size: 13px; }
.auth-side .tdemo .ticket { background: rgba(230,182,66,.14); color: #E6B642; }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 32px; background: var(--surface); }
.auth-card { width: 100%; max-width: 380px; }
.auth-card h1 { font-size: 24px; letter-spacing: -.02em; margin: 0 0 6px; font-weight: 680; }
.auth-card > p { color: var(--muted); margin: 0 0 24px; }
.auth-card form { display: flex; flex-direction: column; gap: 14px; }
.auth-card .btn.primary { height: 40px; font-size: 14px; }
.auth-links { display: flex; justify-content: space-between; font-size: 13px; margin-top: 4px; }
.auth-links a { color: var(--accent); }
@media (max-width: 860px) { .auth { grid-template-columns: 1fr; } .auth-side { display: none; } }

.install { min-height: 100vh; display: flex; justify-content: center; padding: 48px 20px; }
.install-wrap { width: 100%; max-width: 720px; }
.steps { display: flex; gap: 0; margin: 24px 0 20px; counter-reset: s; }
.steps li { list-style: none; flex: 1; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--faint); }
.steps li::before { content: ""; height: 3px; border-radius: 3px; background: var(--line); margin-right: 6px; }
.steps li.done::before, .steps li.on::before { background: var(--accent); }
.steps li.on { color: var(--ink); font-weight: 600; }
.steps li.done { color: var(--muted); }

/* ─── Mobil ───────────────────────────────────────── */
.mob-only { display: none !important; }
.mob-bar { display: none; }
@media (max-width: 1280px) { .details { display: none; } .details.force { display: block; position: fixed; right: 8px; top: 8px; bottom: 8px; z-index: 70; border-radius: var(--r-lg); box-shadow: var(--shadow-pop); } }
@media (max-width: 1060px) { .side { position: fixed; left: 56px; top: 8px; bottom: 8px; z-index: 65; border-radius: var(--r-lg); box-shadow: var(--shadow-pop); transform: translateX(-120%); transition: transform .18s; border: 1px solid var(--line); } .side.open { transform: none; } .designer { grid-template-columns: 1fr; } .stage { position: relative; } }
@media (max-width: 760px) {
  .shell { padding: 0 0 58px; }
  .frame { border-radius: 0; border: 0; }
  .rail { position: fixed; bottom: 0; left: 0; right: 0; height: 58px; width: auto; flex-direction: row; justify-content: space-around; background: var(--surface); border-top: 1px solid var(--line); z-index: 80; padding: 0 6px; }
  .rail .sep, .rail .spacer, .rail .hide-m { display: none; }
  .rail .tip { display: none; }
  .side { left: 0; top: 0; bottom: 58px; border-radius: 0; width: 84vw; }
  .list { width: 100%; border-right: 0; }
  .has-active .list { display: none; }
  .thread { display: none; }
  .has-active .thread { display: flex; }
  .thread-scroll { padding: 14px; }
  .composer { padding: 8px 10px 10px; }
  .page-inner { padding: 18px 16px 48px; }
  .page-head { flex-wrap: wrap; }
  .page-head .actions { margin-left: 0; }
  .mob-only { display: inline-flex !important; }
  .hide-m { display: none !important; }
  .msg .avatar { display: none; }
  .table th, .table td { padding: 9px 12px; }
}

/* ─── 1.0.1: meny, tema, import, worker ───────────── */
.menu-label { font-size: 11.5px; color: var(--faint); font-weight: 550; padding: 6px 9px 4px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--hover); border-radius: 8px; padding: 3px; margin: 0 4px 4px; }
.pop-menu .seg button { justify-content: center; flex-direction: column; gap: 3px; padding: 7px 4px; border-radius: 6px; font-size: 11.5px; color: var(--muted); }
.pop-menu .seg button:hover { background: var(--surface-2); color: var(--ink); }
.pop-menu .seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); font-weight: 580; }
.pop-menu .menu-toggle { cursor: pointer; }
.menu-toggle .switch input { margin: 0; }
.radio-opt { display: flex; gap: 11px; align-items: flex-start; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; transition: border-color .12s, background .12s; }
.radio-opt:hover { border-color: var(--line-strong); }
.radio-opt:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); }
.radio-opt input { accent-color: var(--accent); width: 16px; height: 16px; margin: 2px 0 0; flex: none; }
.radio-opt b { display: block; font-weight: 580; }
.radio-opt em { display: block; font-style: normal; color: var(--muted); font-size: 12.5px; }
.worker-warn { display: flex; gap: 8px; padding: 9px 12px; background: var(--red-soft); color: var(--red); font-size: 12.5px; line-height: 1.45; border-bottom: 1px solid var(--line); }
.worker-warn a { text-decoration: underline; }
.worker-warn .i { margin-top: 2px; }

/* ─── 1.0.4: ljudbibliotek och uppdateringsknapp ──── */
.sound-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.sound-tile { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); cursor: pointer; text-align: left; font-weight: 520; transition: border-color .12s, background .12s; }
.sound-tile:hover { border-color: var(--line-strong); background: var(--surface-2); }
.sound-tile.on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--ink); }
.sound-play { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--hover); color: var(--ink-2); flex: none; transition: background .12s, transform .12s; }
.sound-tile.on .sound-play { background: var(--accent); color: var(--accent-ink); }
.sound-tile.playing .sound-play { transform: scale(1.12); }
.sound-check { color: var(--accent); opacity: 0; }
.sound-tile.on .sound-check { opacity: 1; }
.btn .i.spin, .spin { animation: bdspin .8s linear infinite; }
@keyframes bdspin { to { transform: rotate(360deg); } }

input[type=range] { accent-color: var(--accent); }

/* ─── 1.0.5: varumärke ─────────────────────────────── */
.brand-logo { display: block; width: auto; max-width: 160px; object-fit: contain; }
.rail .brand-logo { max-width: 32px; border-radius: 8px; }
.brand-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.brand-preview-wrap { position: sticky; top: 0; }
@media (max-width: 1060px) { .brand-layout { grid-template-columns: 1fr; } .brand-preview-wrap { position: static; } }
.brand-file { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.brand-file:last-child { border-bottom: 0; padding-bottom: 0; }
.brand-thumb { width: 64px; height: 64px; border-radius: 10px; border: 1px solid var(--line); background: repeating-conic-gradient(var(--hover) 0 25%, var(--surface) 0 50%) 0 0 / 14px 14px; display: grid; place-items: center; overflow: hidden; flex: none; color: var(--faint); }
.brand-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-preview { display: grid; grid-template-columns: 1fr 1fr; height: 230px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); }
.bp-side { background-color: var(--bp-bg); background-size: cover; background-position: center; color: #fff; padding: 14px; display: flex; flex-direction: column; }
.bp-brand { display: flex; align-items: center; gap: 6px; font-weight: 650; font-size: 11px; }
.bp-brand .brand-mark { background: var(--bp-color) !important; border-radius: 5px; }
.bp-brand .brand-logo { height: 18px !important; }
.bp-title { margin-top: auto; font-size: 15px; font-weight: 650; line-height: 1.15; letter-spacing: -.02em; }
.bp-text { font-size: 9.5px; opacity: .7; margin-top: 6px; line-height: 1.35; }
.bp-main { background: #fff; padding: 22px 16px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.bp-h { font-weight: 700; font-size: 13px; color: #1b2130; }
.bp-input { height: 20px; border: 1px solid #dfe2e8; border-radius: 5px; }
.bp-btn { height: 24px; border-radius: 5px; background: var(--bp-color); color: #fff; font-size: 10px; font-weight: 600; display: grid; place-items: center; }
.bp-tab { margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px 10px 4px 4px; font-size: 12.5px; }
.bp-fav { width: 16px; height: 16px; display: grid; place-items: center; }
.bp-fav img { width: 16px; height: 16px; object-fit: contain; }
.bp-fav span { width: 14px; height: 14px; border-radius: 4px; display: block; }

/* ─── 1.0.5: markera flera ─────────────────────────── */
.list { position: relative; }
.conv-check { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--line-strong); background: var(--surface); display: none; place-items: center; color: transparent; flex: none; cursor: pointer; margin-right: -2px; }
.conv-check .i { width: 11px; height: 11px; stroke-width: 3; }
.conv:hover .conv-check, .list.selecting .conv-check { display: grid; }
.conv:hover .chan-ico, .list.selecting .chan-ico { display: none; }
.conv.selected { background: var(--accent-soft); border-color: var(--accent-line); }
.conv.selected .conv-check { background: var(--accent); border-color: var(--accent); color: #fff; }
.bulk-bar { position: absolute; top: 0; left: 0; right: 0; height: 54px; z-index: 5; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 4px; padding: 0 8px 0 14px; box-shadow: 0 2px 8px rgba(20,24,40,.05); }
.bulk-bar b { font-size: 15px; margin-left: 8px; }
.bulk-all input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; cursor: pointer; }
@media (hover: none) { .conv-check { display: grid; } .conv .chan-ico { display: none; } }

/* ─── 1.0.5: snabbsökning ──────────────────────────── */
dialog.palette { border: 0; padding: 0; margin: 12vh auto auto; width: min(640px, calc(100vw - 24px)); border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop); overflow: hidden; }
dialog.palette::backdrop { background: rgba(15, 18, 28, .42); backdrop-filter: blur(3px); }
.palette-input { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--line); color: var(--muted); }
.palette-input input { flex: 1; border: 0; outline: 0; background: transparent; height: 56px; font-size: 16px; color: var(--ink); }
kbd { font: 11px/1 var(--font); padding: 3px 6px; border-radius: 5px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--muted); box-shadow: 0 1px 0 var(--line-strong); }
.palette-results { max-height: min(60vh, 460px); overflow-y: auto; padding: 6px; }
.palette-group { font-size: 11.5px; font-weight: 600; color: var(--faint); padding: 10px 10px 4px; }
.palette-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; }
.palette-item.on { background: var(--accent-soft); }
.palette-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--hover); color: var(--muted); flex: none; }
.palette-item.on .palette-ico { background: var(--accent); color: #fff; }
.palette-title { display: block; font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-sub { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-item mark { background: color-mix(in srgb, var(--saffron) 28%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.palette-empty { padding: 36px; text-align: center; color: var(--muted); }
.palette-foot { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); background: var(--surface-2); }
.palette-foot kbd { margin-right: 3px; }
.rail .tip kbd { margin-left: 6px; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: inherit; box-shadow: none; }
.rail-badge { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; line-height: 1; }

/* ─── 1.0.5: teamchatt ─────────────────────────────── */
.tc-group-ico { width: 22px; height: 22px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.tc-group-ico.lg { width: 34px; height: 34px; border-radius: 10px; }
.tc-item.unread .label { font-weight: 680; color: var(--ink); }
.tc-scroll { padding: 18px 20px 12px; }
.tc-msg { display: flex; gap: 12px; padding: 3px 8px; margin: 0 -8px; border-radius: 8px; }
.tc-msg:not(.compact) { margin-top: 12px; }
.tc-msg:hover { background: var(--surface-2); }
.tc-msg.mentioned { background: color-mix(in srgb, var(--saffron) 9%, transparent); box-shadow: inset 3px 0 0 var(--saffron); }
.tc-av { width: 34px; flex: none; }
.tc-av time { display: block; font-size: 10.5px; color: var(--faint); text-align: right; padding-top: 3px; opacity: 0; }
.tc-msg.compact:hover .tc-av time { opacity: 1; }
.tc-body { min-width: 0; flex: 1; }
.tc-head { display: flex; align-items: baseline; gap: 8px; }
.tc-head b { font-weight: 640; }
.tc-head time { font-size: 11.5px; color: var(--faint); }
.tc-text { line-height: 1.55; word-wrap: break-word; overflow-wrap: anywhere; }
.tc-text a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.tc-text .mention { background: var(--accent-soft); color: var(--accent); border-radius: 4px; padding: 0 3px; font-weight: 580; }
.tc-text .mention.me { background: color-mix(in srgb, var(--saffron) 22%, transparent); color: var(--saffron); }
.tc-text a.ticket-ref { display: inline-flex; align-items: center; gap: 3px; text-decoration: none; background: var(--saffron-soft); color: var(--saffron); border-radius: 5px; padding: 0 6px 0 4px; font-weight: 620; font-size: 12.5px; vertical-align: 1px; }
.tc-text a.ticket-ref:hover { filter: brightness(.95); }
.tc-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.tc-img img { max-width: 280px; max-height: 220px; border-radius: 10px; border: 1px solid var(--line); display: block; object-fit: cover; }
.tc-system { text-align: center; margin: 14px 0 6px; }
.tc-system span { font-size: 12px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 20px; padding: 3px 12px; }
.tc-composer form { position: relative; }
.tc-composer textarea { min-height: 52px; }
.tc-suggest { position: absolute; left: 0; bottom: calc(100% + 6px); width: min(420px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-pop); padding: 5px; z-index: 30; }
.tc-sug { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 9px; border: 0; background: none; border-radius: 7px; text-align: left; cursor: pointer; }
.tc-sug small { color: var(--muted); margin-left: auto; font-size: 12px; }
.tc-sug.on { background: var(--accent-soft); }
.tc-people { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; margin: 0 -6px; }
.tc-person { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.tc-person:hover { background: var(--hover); }
.tc-person:has(input:checked) { background: var(--accent-soft); }
.tc-person input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.tc-person b { display: block; font-weight: 560; }
.tc-person small { color: var(--muted); font-size: 12px; }

/* ─── 1.0.5: besökare i webbchatt ──────────────────── */
.visitor-status { font-size: 11.5px; font-weight: 560; color: var(--faint); display: inline-flex; align-items: center; gap: 5px; }
.visitor-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.visitor-status.on { color: var(--green); }
.visitor-status.on::before { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.visitor .kv dd a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.visitor-pages { margin-top: 10px; font-size: 12.5px; }
.visitor-pages summary { cursor: pointer; color: var(--muted); font-weight: 560; }
.visitor-pages ol { margin: 6px 0 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 4px; }
.visitor-pages li { color: var(--faint); }
.visitor-pages li a { color: var(--ink-2); display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.visitor-pages time { float: right; font-variant-numeric: tabular-nums; }

.prechat-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.seg-inline { display: inline-flex; background: var(--hover); border-radius: 8px; padding: 3px; gap: 2px; }
.seg-inline label { cursor: pointer; }
.seg-inline input { position: absolute; opacity: 0; pointer-events: none; }
.seg-inline span { display: block; padding: 5px 10px; border-radius: 6px; font-size: 12.5px; color: var(--muted); font-weight: 540; }
.seg-inline input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.seg-inline input:focus-visible + span { outline: 2px solid var(--accent); }
.auth-side .brand-logo { background: rgba(255,255,255,.94); padding: 7px 12px; border-radius: 10px; box-sizing: content-box; max-width: 180px; }
.bp-side .brand-logo { background: rgba(255,255,255,.94); padding: 3px 6px; border-radius: 5px; box-sizing: content-box; }

/* ─── 1.0.6: chattknapp och mobilförhandsvisning ───── */
.icon-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.icon-pick { cursor: pointer; }
.icon-pick input { position: absolute; opacity: 0; pointer-events: none; }
.icon-pick span { height: 44px; border: 1px solid var(--line); border-radius: 10px; display: grid; place-items: center; color: var(--ink-2); background: var(--surface); transition: border-color .12s, background .12s; }
.icon-pick:hover span { border-color: var(--line-strong); }
.icon-pick input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.icon-pick input:focus-visible + span { outline: 2px solid var(--accent); }
.wlauncher .wl-ico { display: grid; place-items: center; }
.wlauncher .wl-ico:empty { display: none; }
.wlauncher.icon-only { width: 60px; height: 60px; padding: 0; border-radius: 50%; justify-content: center; }
.wlauncher.icon-only .wl-ico svg { width: 26px; height: 26px; }
.wlauncher.text-only { padding: 0 22px; }
.stage-bar .seg-inline span { padding: 3px 8px; font-size: 12px; display: flex; gap: 4px; align-items: center; }
.stage { transition: none; }
.stage.mobile { width: 360px; max-width: 100%; height: 640px; margin: 0 auto; border-radius: 34px; border: 10px solid var(--ink); }
.stage.mobile .stage-bar { border-radius: 24px 24px 0 0; }
.stage.mobile .wpanel { display: none; }
.stage.mobile .wprev { right: 16px !important; left: auto !important; bottom: 18px !important; }
.stage.mobile .wprev.left { left: 16px !important; right: auto !important; }
.stage.mobile::before { content: ""; position: absolute; left: 20px; right: 20px; top: 70px; height: 150px; border-radius: 12px; background: linear-gradient(var(--line) 0 18px, transparent 18px 34px, var(--line) 34px 46px, transparent 46px 60px, var(--line) 60px 72px, transparent 72px); opacity: .7; }
.stage.hide-mobile .wprev { display: none; }
.stage.hide-mobile::after { content: "Chatten visas inte på mobil"; position: absolute; inset: 34px 0 0; display: grid; place-items: center; color: var(--muted); font-size: 13px; }

/* ─── 1.0.7: chattstilar, formulär och AI-assistent i designern ─── */
.style-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.style-pick { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; }
.style-pick input { position: absolute; opacity: 0; pointer-events: none; }
.style-pick b { font-weight: 560; color: var(--muted); }
.style-pick input:checked ~ b { color: var(--ink); }
.sp { width: 100%; aspect-ratio: 3 / 4; border-radius: 10px; border: 1px solid var(--line); background: #fff; position: relative; overflow: hidden; display: block; transition: box-shadow .12s, border-color .12s; }
.style-pick input:checked + .sp { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.style-pick input:focus-visible + .sp { outline: 2px solid var(--accent); outline-offset: 2px; }
.sp i { position: absolute; display: block; }
.sp-h { left: 0; right: 0; top: 0; height: 30%; background: var(--wc, #5A55F2); }
.sp-b1 { left: 10%; top: 42%; width: 55%; height: 12%; background: #eef0f4; border-radius: 6px; }
.sp-b2 { right: 10%; top: 60%; width: 45%; height: 12%; background: var(--wc, #5A55F2); border-radius: 6px; }
.sp-minimal { border-radius: 6px; } .sp-minimal .sp-h { background: #fff; border-bottom: 1px solid #e4e6ec; } .sp-minimal .sp-b1, .sp-minimal .sp-b2 { border-radius: 3px; }
.sp-soft { border-radius: 16px; background: #f5f4ff; } .sp-soft .sp-h { background: linear-gradient(135deg, #5A55F2, #a9a6f8); border-radius: 0 0 14px 14px; } .sp-soft .sp-b1 { background: #fff; border-radius: 10px; } .sp-soft .sp-b2 { border-radius: 10px; }
.sp-bold { border-radius: 4px; } .sp-bold .sp-h { background: #0f1117; border-bottom: 3px solid #5A55F2; } .sp-bold .sp-b1, .sp-bold .sp-b2 { border-radius: 2px; }
.sp-glass { border-radius: 14px; background: linear-gradient(160deg, #e9e8ff, #fdf2ff); } .sp-glass .sp-h { background: linear-gradient(135deg, rgba(90,85,242,.9), rgba(90,85,242,.6)); } .sp-glass .sp-b1 { background: rgba(255,255,255,.75); }
@media (max-width: 720px) { .style-grid { grid-template-columns: repeat(3, 1fr); } }

.wpanel { transition: border-radius .15s; }
.wtabs { display: flex; border-bottom: 1px solid #eceef3; font-size: 12px; font-weight: 600; }
.wtabs span { flex: 1; text-align: center; padding: 8px 4px; color: #6a7283; }
.wtabs span.on { color: var(--wc); box-shadow: inset 0 -2px 0 var(--wc); }
.wnotice { display: flex; gap: 7px; align-items: flex-start; font-size: 11.5px; line-height: 1.4; color: #6a7283; background: color-mix(in srgb, var(--wc) 7%, transparent); border: 1px solid color-mix(in srgb, var(--wc) 18%, transparent); border-radius: 10px; padding: 7px 9px; }
.wnotice .i { color: var(--wc); flex: none; margin-top: 1px; }
.wnotice b { color: #1b2130; }
.wwho { font-size: 11px; color: #6a7283; margin: 2px 0 -4px 2px; }
.wwho i { font-style: normal; font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 4px; background: color-mix(in srgb, var(--wc) 12%, transparent); color: var(--wc); }
.wform { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 7px; font-size: 12px; }
.wform b { font-size: 14px; color: #1b2130; } .wform small { color: #6a7283; margin-bottom: 4px; }
.wform i { font-style: normal; color: #9aa1af; border: 1px solid #e4e6ec; border-radius: 8px; padding: 8px 10px; }
.wform i.big { height: 70px; }
.wform em { font-style: normal; text-align: center; background: var(--wc); color: var(--wt); border-radius: 8px; padding: 9px; font-weight: 600; margin-top: 4px; }
.wpanel.dark .wnotice b, .wpanel.dark .wform b { color: #e8eaf0; }
.wpanel.style-minimal { border-radius: 12px !important; border: 1px solid #e4e6ec; box-shadow: 0 12px 40px rgba(20,24,40,.14); }
.wpanel.style-minimal .whead { background: #fff; color: #1b2130; border-bottom: 1px solid #eceef3; }
.wpanel.style-minimal .whead .wav { background: var(--wc); color: var(--wt); border-radius: 10px; }
.wpanel.style-minimal .wmsg { border-radius: 10px; }
.wpanel.style-soft { border-radius: 26px !important; box-shadow: 0 26px 70px color-mix(in srgb, var(--wc) 22%, transparent); }
.wpanel.style-soft .whead { background: linear-gradient(135deg, var(--wc), color-mix(in srgb, var(--wc) 62%, #fff)); }
.wpanel.style-soft .wbody { background: color-mix(in srgb, var(--wc) 4.5%, #fff); }
.wpanel.style-soft .wmsg { border-radius: 20px; } .wpanel.style-soft .wmsg.bot { background: #fff; box-shadow: 0 1px 2px rgba(20,24,40,.06); }
.wpanel.style-bold { border-radius: 10px !important; box-shadow: 0 22px 50px rgba(0,0,0,.35); }
.wpanel.style-bold .whead { background: #0f1117; color: #fff; box-shadow: inset 0 -3px 0 var(--wc); }
.wpanel.style-bold .whead .wav { background: var(--wc); color: var(--wt); border-radius: 10px; }
.wpanel.style-bold .wmsg { border-radius: 6px; }
.wpanel.style-glass { border-radius: 22px !important; background: rgba(255,255,255,.72); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.5); }
.wpanel.style-glass .whead { background: linear-gradient(135deg, color-mix(in srgb, var(--wc) 95%, transparent), color-mix(in srgb, var(--wc) 70%, transparent)); }
.wpanel.style-glass .wmsg { border-radius: 18px; }
.wav svg { width: 18px; height: 18px; }

/* ─── 1.0.10: teamchatt på mobil ───────────────────── */
@media (max-width: 760px) {
  input, textarea, select { font-size: 16px; } /* ingen inzoomning på iPhone */
  .side.tc-side { position: static; transform: none; width: 100%; border-radius: 0; box-shadow: none; border: 0; background: var(--surface); }
  .has-active .side.tc-side { display: none; }
  .frame:not(.has-active) .thread.tc-empty { display: none; }
  .tc-side .side-head { height: 58px; }
  .tc-side .nav-item { height: 52px; font-size: 15px; gap: 12px; }
  .tc-side .nav-item .avatar, .tc-side .tc-group-ico { --s: 34px; width: 34px; height: 34px; }
  .tc-thread .thread-head { padding: 8px 10px; gap: 8px; min-height: 58px; }
  .tc-thread .thread-head h2 { font-size: 15.5px; -webkit-line-clamp: 1; }
  .tc-scroll { padding: 10px 12px; }
  .tc-msg { gap: 9px; }
  .tc-av { width: 30px; }
  .tc-av .avatar { --s: 30px; }
  .tc-img img { max-width: 100%; }
  .tc-composer { padding: 8px 10px 10px; }
  .tc-composer textarea { min-height: 44px; }
  .tc-suggest { width: 100%; }
  .unread-badge { min-width: 22px; height: 22px; border-radius: 11px; font-size: 12px; }
  dialog.modal { width: calc(100vw - 20px); max-height: calc(100dvh - 40px); }
  .tc-people { max-height: 50vh; }
}
/* Pekskärm: ingen blå blinkning vid tryck, istället en diskret tryckeffekt */
a, button, label, .btn, .nav-item, .conv, .tc-person, .sound-tile, .radio-opt { -webkit-tap-highlight-color: transparent; }
@media (pointer: coarse) { .btn:active, .tc-person:active, .nav-item:active { transform: scale(.98); } .tc-person:has(input:checked) { background: var(--accent-soft); } }

/* ─── 1.0.11: testa chatbot ─────────────────────────── */
.bot-test-out { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.bot-test-out.err { border-color: color-mix(in srgb, var(--red) 40%, transparent); background: var(--red-soft); color: var(--red); }
.bt-reply { background: var(--surface); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 10px 13px; line-height: 1.55; }
/* 4.134.0: svaret visas som chattbubblor (hälsning, svar, länk) – lika breda som texten, som i chatten */
.bot-test-out .bt-reply { align-self: flex-start; max-width: min(560px, 88%); overflow-wrap: anywhere; }
.bot-test-out .bt-reply + .bt-reply { margin-top: -4px; }
.bt-note { font-size: 12.5px; color: var(--accent); } .bt-note.warn { color: var(--saffron); }
.bt-src { font-size: 12.5px; color: var(--muted); } .bt-src i { font-style: normal; color: var(--faint); }
.bt-meta { font-size: 12px; color: var(--faint); }

/* ─── 1.0.11: mobil – kontomeny, sidomeny och bottenmeny ─── */
.side-backdrop { display: none; }
@media (max-width: 760px) {
  /* Bottenmenyn: större ikoner och tryckytor */
  .rail { height: 64px; padding: 0 4px calc(env(safe-area-inset-bottom, 0px)); }
  .shell { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .rail > a, .rail > button, .rail > .pop > button { width: 48px; height: 48px; border-radius: 14px; }
  .rail .i { width: 24px; height: 24px; }
  .rail .avatar { --s: 34px; }
  .rail-badge { top: 4px; right: 4px; }
  /* Menyer från bottenmenyn öppnas som ett ark nedifrån, alltid inom skärmen */
  .rail .pop-menu { position: fixed !important; left: 10px !important; right: 10px !important; top: auto !important; bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; min-width: 0 !important; width: auto; max-height: calc(100dvh - 110px); overflow-y: auto; border-radius: 16px; padding: 8px; box-shadow: 0 -8px 40px rgba(0,0,0,.28); }
  .rail .pop-menu button, .rail .pop-menu a, .rail .pop-menu label { padding: 11px 10px; font-size: 15px; }
  .rail .tip { display: none; }
  /* Sidomenyn: smalare och stängs vid tryck utanför */
  .side:not(.tc-side) { width: min(280px, 82vw); bottom: calc(64px + env(safe-area-inset-bottom, 0px)); box-shadow: 8px 0 40px rgba(0,0,0,.3); }
  .side-backdrop { position: fixed; inset: 0 0 calc(64px + env(safe-area-inset-bottom, 0px)) 0; background: rgba(10, 12, 20, .45); z-index: 64; opacity: 0; pointer-events: none; transition: opacity .18s; display: block; }
  .side.open ~ .side-backdrop, .side-backdrop.on { opacity: 1; pointer-events: auto; }
  .side:not(.tc-side) .nav-item { height: 44px; font-size: 15px; }
}

/* ─── 1.0.11: status ───────────────────────────────── */
.pdot { width: 9px; height: 9px; border-radius: 50%; background: var(--pc, #9AA1AF); display: inline-block; flex: none; }
.pdot-inactive { background: transparent; box-shadow: inset 0 0 0 2px var(--pc); }
.pdot-busy, .pdot-meeting { background: radial-gradient(circle, #fff 0 22%, var(--pc) 24%); }
.av-wrap { position: relative; display: inline-flex; flex: none; }
.pdot.on-avatar { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border: 2px solid var(--surface); box-sizing: content-box; }
.pdot-inactive.on-avatar { background: var(--surface); box-shadow: inset 0 0 0 2px var(--pc); }
.rail .pdot.on-avatar { border-color: var(--bg); }
.status-picker { padding: 0 4px 6px; }
.pop-menu .status-current { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.status-panel { margin-top: 6px; display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.pop-menu .status-grid button { padding: 7px 8px; border-radius: 8px; font-size: 12.5px; gap: 7px; border: 1px solid transparent; }
.pop-menu .status-grid button.on { background: var(--surface); border-color: var(--accent-line); color: var(--ink); font-weight: 580; }
.status-panel .input.sm { height: 34px; }

.pop-backdrop { display: none; }
@media (max-width: 760px) {
  .pop-backdrop { display: block; position: fixed; inset: 0; background: rgba(10, 12, 20, .42); z-index: 55; opacity: 0; pointer-events: none; transition: opacity .16s; }
  .pop-backdrop.on { opacity: 1; pointer-events: auto; }
  .rail { z-index: 80; }
  .rail .pop-menu { z-index: 90; }
}

/* ─── 1.1.0: mejl som original + bubblor som i en chatt ─── */
.bubble.html { padding: 4px; background: var(--surface); }
.bubble .quoted { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.bubble .quoted summary { cursor: pointer; color: var(--muted); font-size: 12.5px; list-style: none; display: inline-flex; align-items: center; gap: 5px; }
.bubble .quoted summary::before { content: "⋯"; font-weight: 700; letter-spacing: 1px; background: var(--hover); border-radius: 6px; padding: 0 6px; }
.bubble .quoted[open] summary { margin-bottom: 6px; }
.bubble .quoted { color: var(--muted); font-size: 13px; }
/* Utgående till höger, inkommande till vänster */
.msg.out { flex-direction: row-reverse; margin-left: auto; }
.msg.out .head { flex-direction: row-reverse; }
.msg.out .head time { margin-left: 0; margin-right: auto; }
.msg.out .bubble { background: var(--accent-soft); border-color: var(--accent-line); border-bottom-right-radius: 3px; }
.msg.out .delivery, .msg.out .atts { justify-content: flex-end; }
.msg.in .bubble { border-bottom-left-radius: 3px; }
.msg.note { margin-left: 26px; }
.msg.note .bubble { border-bottom-left-radius: 3px; }
.tc-msg.mine { flex-direction: row-reverse; }
.tc-msg.mine .tc-head { flex-direction: row-reverse; }
.tc-msg.mine .tc-body { display: flex; flex-direction: column; align-items: flex-end; }
.tc-msg.mine .tc-text { background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 12px 12px 3px 12px; padding: 8px 12px; }
.tc-msg.mine .tc-files { justify-content: flex-end; }
.tc-msg.mine.compact .tc-av time { text-align: left; }

.faq-item { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface); }
.faq-item + .faq-item { margin-top: 8px; }
.faq-item summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 560; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "›"; font-size: 18px; color: var(--muted); transition: transform .15s; }
.faq-item[open] summary::before { transform: rotate(90deg); }
.faq-item summary small { font-weight: 400; font-size: 12px; }
.msg.out .body { display: flex; flex-direction: column; align-items: flex-end; }
.msg.out .bubble { max-width: min(78%, 640px); }
.msg.out .head { width: 100%; }
@media (max-width: 760px) { .msg.out .bubble { max-width: 88%; } }

/* ─── 1.2.0: PWA och notiser ──────────────────────────────── */
.pwa-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 300; display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px 10px 16px; box-shadow: var(--shadow-lg); max-width: min(520px, calc(100vw - 24px)); }
.pwa-bar span { display: flex; flex-direction: column; font-size: 13.5px; }
.pwa-bar em { font-style: normal; color: var(--muted); font-size: 12.5px; }
.pwa-x { border: 0; background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; padding: 4px 6px; }
@media (max-width: 760px) { .pwa-bar { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); left: 10px; right: 10px; transform: none; max-width: none; } }
.push-state { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface-2); }
[data-push-card].on .push-state { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 35%, transparent); }
.push-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--hover); color: var(--muted); flex: none; }
[data-push-card].on .push-ico { background: var(--surface); color: var(--green); }
.device-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.device-row:last-child { border-bottom: 0; }
.device-row small { display: block; font-size: 12px; }
.pref-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px 16px; }
[hidden] { display: none !important; }
.push-state .row { flex-wrap: wrap; }
.push-state .grow { min-width: 180px; }
@media (max-width: 760px) {
  .push-state .row { flex-direction: column; align-items: stretch; }
  .push-state .row > .btn { width: 100%; justify-content: center; }
  .push-ico { margin-bottom: 2px; }
}

/* ─── 1.3.0: projekt, sidor och uppgifter ─────────────────── */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.proj-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.proj-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--pc); }
.proj-card:hover { border-color: var(--accent-line); transform: translateY(-1px); }
.proj-ico { font-size: 26px; line-height: 1; }
.proj-card b { font-size: 15.5px; }
.proj-card small { color: var(--muted); font-size: 13px; min-height: 18px; }
.proj-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }

.proj-wrap { display: flex; height: 100%; min-height: 0; }
.proj-side { width: 268px; flex: none; border-right: 1px solid var(--line); background: var(--surface-2); display: flex; flex-direction: column; min-height: 0; }
.ps-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px; border-bottom: 1px solid var(--line); }
.ps-ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--pc) 16%, transparent); font-size: 15px; flex: none; }
.ps-head b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-nav { padding: 8px; display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--line); }
.ps-nav .nav-item { height: 36px; font-size: 13.5px; }
.ps-label { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 6px; font-size: 11.5px; font-weight: 640; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.pg-tree { overflow-y: auto; padding: 0 6px 16px; flex: 1; }
.pg-item { display: flex; align-items: center; gap: 6px; height: 32px; border-radius: 8px; font-size: 13.5px; color: var(--ink); padding-right: 8px; }
.pg-item:hover { background: var(--hover); }
.pg-item.on { background: var(--accent-soft); color: var(--accent); font-weight: 560; }
.pg-toggle { border: 0; background: transparent; color: var(--faint); padding: 0; width: 16px; display: grid; place-items: center; transition: transform .15s; }
.pg-node.closed > .pg-item .pg-toggle { transform: rotate(-90deg); }
.pg-node.closed > .pg-kids { display: none; }
.pg-dot { width: 16px; display: inline-block; }
.pg-ico { font-size: 14px; }
.pg-item .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.proj-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; }
.proj-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); z-index: 5; }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); overflow: hidden; }
.crumbs a { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.crumbs a:last-child { color: var(--ink); font-weight: 560; }
.crumbs .sep { color: var(--faint); }

.doc { padding: 26px 0 120px; }
.doc-inner { max-width: 780px; margin: 0 auto; padding: 0 22px; }
.doc-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.doc-ico { border: 0; background: transparent; font-size: 40px; line-height: 1; cursor: pointer; border-radius: 10px; padding: 2px 6px; }
.doc-ico:hover { background: var(--hover); }
.doc-title { font-size: 34px; font-weight: 700; letter-spacing: -.02em; margin: 0; outline: 0; flex: 1; }
.doc-title:empty::before, .bk-text:empty::before { content: attr(data-placeholder); color: var(--faint); }
.doc-add { margin-top: 10px; border: 0; background: transparent; color: var(--faint); font-size: 14px; padding: 6px 2px; cursor: pointer; }
.doc-add:hover { color: var(--muted); }

.bk { position: relative; display: flex; gap: 6px; padding: 2px 0; border-radius: 6px; }
.bk-in { flex: 1; min-width: 0; display: flex; gap: 8px; align-items: flex-start; }
.bk-text { outline: 0; flex: 1; line-height: 1.65; font-size: 15.5px; padding: 3px 2px; word-break: break-word; }
.bkt-h1 .bk-text { font-size: 27px; font-weight: 700; letter-spacing: -.02em; margin-top: 18px; }
.bkt-h2 .bk-text { font-size: 21px; font-weight: 660; margin-top: 14px; }
.bkt-h3 .bk-text { font-size: 17px; font-weight: 640; margin-top: 10px; }
.bkt-quote .bk-text { border-left: 3px solid var(--accent); padding-left: 12px; color: var(--muted); }
.bkt-callout .bk-in { background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 10px; padding: 10px 12px; }
.bkt-code .bk-text { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; white-space: pre-wrap; }
.bk-mark { color: var(--muted); padding-top: 4px; min-width: 18px; }
.bk-check { margin-top: 7px; }
.bk-text.done { text-decoration: line-through; color: var(--faint); }
.bkt-divider hr { border: 0; border-top: 1px solid var(--line); width: 100%; margin: 14px 0; }
.bkt-image img { max-width: 100%; border-radius: 12px; }
.bk-handles { position: absolute; left: -42px; top: 2px; display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.bk:hover .bk-handles { opacity: 1; }
.bk-h { border: 0; background: transparent; color: var(--faint); width: 20px; height: 24px; border-radius: 5px; cursor: grab; font-size: 14px; }
.bk-h:hover { background: var(--hover); color: var(--muted); }
.bk.dragging { opacity: .4; }
.bk.over { box-shadow: 0 -2px 0 var(--accent) inset; }
.bk-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.bk-table th, .bk-table td { border: 1px solid var(--line); padding: 7px 10px; text-align: left; outline: 0; }
.bk-table th { background: var(--surface-2); font-weight: 600; }
.bk-table.inv td.c { text-align: center; width: 110px; }
.inv-in { border: 0; background: transparent; color: var(--ink); font: inherit; width: 100%; outline: 0; }
.inv-in.num { text-align: right; }
.inv-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.inv-sum { font-size: 12.5px; color: var(--muted); margin-right: auto; }
.bk-mini-row { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.bk-mini { border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 7px; padding: 3px 9px; font-size: 12px; cursor: pointer; }
.bk-empty { border: 1px dashed var(--line); background: transparent; color: var(--faint); border-radius: 10px; padding: 16px; width: 100%; cursor: pointer; }
.slash { position: absolute; z-index: 400; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 320px; max-height: 260px; overflow-y: auto; }
.slash button { border: 0; background: transparent; color: var(--ink); text-align: left; padding: 8px 10px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.slash button:hover { background: var(--hover); }

.board { display: flex; gap: 12px; padding: 16px 18px 30px; overflow-x: auto; align-items: flex-start; }
.board-col { width: 272px; flex: none; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; max-height: calc(100dvh - 190px); }
.board-col > header { display: flex; align-items: center; gap: 7px; padding: 11px 12px; font-size: 13px; }
.board-col .sdot { width: 8px; height: 8px; border-radius: 50%; background: var(--sc); }
.board-col .count { margin-left: auto; color: var(--faint); font-size: 12px; }
.col-body { padding: 0 8px 8px; display: flex; flex-direction: column; gap: 7px; overflow-y: auto; min-height: 28px; }
.col-body.over { background: var(--accent-soft); border-radius: 10px; }
.col-add { border: 0; background: transparent; color: var(--faint); text-align: left; padding: 8px 12px 11px; font-size: 13px; cursor: pointer; }
.col-add:hover { color: var(--accent); }
.task { background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 10px 11px; cursor: pointer; box-shadow: var(--shadow); }
.task:hover { border-color: var(--accent-line); }
.task.dragging { opacity: .45; }
.task b { font-size: 13.5px; font-weight: 570; display: block; line-height: 1.4; }
.task p { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.task-foot { display: flex; align-items: center; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.pill.prio-high { color: var(--saffron); } .pill.prio-urgent { color: var(--red); }
.task-list { padding: 16px 18px 40px; }
td.overdue { color: var(--red); }
.tpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tpl input { position: absolute; opacity: 0; }
.tpl span { display: block; border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px; cursor: pointer; }
.tpl input:checked + span { border-color: var(--accent); background: var(--accent-soft); }
.tpl b { display: block; font-size: 13.5px; } .tpl em { font-style: normal; font-size: 12px; color: var(--muted); }
.member-row { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.member-row.add { border-bottom: 0; padding-top: 14px; }
.scope summary { cursor: pointer; font-size: 12.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; list-style: none; }
.scope.on summary { border-color: var(--accent-line); color: var(--accent); }
.scope-body { padding: 10px; border: 1px solid var(--line); border-radius: 10px; margin-top: 6px; display: flex; flex-direction: column; gap: 6px; background: var(--surface-2); }
.scope-pages { max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding-left: 8px; }
.vlist { display: flex; flex-direction: column; }
.vrow { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
@media (max-width: 900px) {
  .proj-side { position: fixed; left: 0; top: 0; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); z-index: 70; width: min(280px, 82vw); transform: translateX(-102%); transition: transform .2s; }
  .proj-side.open { transform: none; box-shadow: 8px 0 40px rgba(0,0,0,.3); }
  .doc-inner { padding: 0 16px; } .doc-title { font-size: 27px; }
  .bk-handles { left: -30px; } .board { padding: 12px; } .board-col { width: 254px; }
}
@media (min-width: 901px) { .hide-d { display: none !important; } }

/* ─── 1.4.0: Notion-inspirerad stil för projekt ──────────────── */
.proj-wrap { --doc-ink: var(--ink); }
.proj-side { background: color-mix(in srgb, var(--surface-2) 70%, var(--bg)); }
.ps-head { padding: 14px 12px 12px; border-bottom: 0; }
.ps-head b { font-weight: 640; letter-spacing: -.01em; }
.ps-nav { border-bottom: 0; padding: 2px 8px 6px; }
.ps-nav .nav-item { border-radius: 6px; color: var(--muted); font-weight: 500; }
.ps-nav .nav-item.on { background: var(--hover); color: var(--ink); font-weight: 560; }
.ps-label { font-size: 11px; letter-spacing: .02em; text-transform: none; font-weight: 600; color: var(--faint); padding: 14px 12px 4px; }
.pg-item { height: 29px; font-size: 13.5px; font-weight: 450; border-radius: 6px; color: var(--muted); }
.pg-item:hover { background: var(--hover); color: var(--ink); }
.pg-item.on { background: var(--hover); color: var(--ink); font-weight: 560; }
.pg-kids { position: relative; }
.pg-kids::before { content: ""; position: absolute; left: 22px; top: 0; bottom: 0; width: 1px; background: var(--line); }

.proj-top { padding: 9px 16px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); backdrop-filter: saturate(140%) blur(6px); background: color-mix(in srgb, var(--bg) 88%, transparent); }
.crumbs a { font-weight: 500; }
.doc { padding: 40px 0 160px; }
.doc-inner { max-width: 760px; padding: 0 28px; }
.doc-title { font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.doc-ico { font-size: 52px; }
.doc-title-row { align-items: flex-end; gap: 12px; margin-bottom: 20px; }
.bk-text { font-size: 16px; line-height: 1.7; color: var(--doc-ink); }
.bkt-h1 .bk-text { font-size: 30px; letter-spacing: -.02em; margin-top: 26px; }
.bkt-h2 .bk-text { font-size: 23px; margin-top: 20px; }
.bkt-h3 .bk-text { font-size: 18px; margin-top: 14px; }
.bk:hover { background: color-mix(in srgb, var(--hover) 45%, transparent); }
.bk-table th { background: color-mix(in srgb, var(--surface-2) 80%, transparent); font-weight: 560; font-size: 13px; color: var(--muted); }
.bk-table th, .bk-table td { border-color: color-mix(in srgb, var(--line) 80%, transparent); }

/* Databasvy (som Notion-tabeller) */
.db-wrap { padding: 6px 18px 60px; overflow-x: auto; }
.db { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.db thead th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12.5px; padding: 7px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.db thead th .i { vertical-align: -2px; margin-right: 5px; opacity: .7; }
.db td { padding: 8px 10px; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); vertical-align: middle; }
.db tbody tr { cursor: pointer; }
.db tbody tr:hover { background: var(--hover); }
.db .c-name { min-width: 260px; }
.db .c-name b { font-weight: 520; }
.db .db-open { color: var(--faint); margin-right: 8px; vertical-align: -2px; }
.db-person { display: inline-flex; align-items: center; gap: 7px; }
.db-new { border: 0; background: transparent; color: var(--faint); padding: 10px; font-size: 13.5px; cursor: pointer; width: 100%; text-align: left; }
.db-new:hover { color: var(--accent); background: var(--hover); }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 6px; font-size: 12px; font-weight: 500;
  color: color-mix(in srgb, var(--c) 78%, var(--ink)); background: color-mix(in srgb, var(--c) 16%, transparent); }
.chip.link { color: var(--accent); background: var(--accent-soft); }

/* Kalender */
.cal-wrap { padding: 10px 18px 60px; }
.cal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cal-head b { font-size: 15px; min-width: 150px; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.cal-dow { padding: 6px 8px; font-size: 11.5px; color: var(--muted); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.cal-day { min-height: 104px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 5px 5px 8px; display: flex; flex-direction: column; gap: 3px; }
.cal-day.empty { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.cal-n { font-size: 12px; color: var(--muted); padding: 1px 4px; }
.cal-day.today .cal-n { background: var(--accent); color: #fff; border-radius: 6px; align-self: flex-start; font-weight: 600; }
.cal-task { border: 0; text-align: left; border-radius: 6px; padding: 4px 7px; font-size: 12px; cursor: pointer; line-height: 1.3;
  color: color-mix(in srgb, var(--c) 80%, var(--ink)); background: color-mix(in srgb, var(--c) 15%, transparent); }
.cal-task:hover { background: color-mix(in srgb, var(--c) 26%, transparent); }

/* Kommentarer */
.comments { margin-top: 44px; border-top: 1px solid var(--line); padding-top: 18px; }
.comments h3 { font-size: 13.5px; color: var(--muted); font-weight: 560; display: flex; align-items: center; gap: 7px; margin: 0 0 12px; }
.cm-list { display: flex; flex-direction: column; gap: 14px; max-height: 320px; overflow-y: auto; }
.cm b { font-size: 13.5px; font-weight: 570; }
.cm time { font-size: 11.5px; color: var(--faint); margin-left: 8px; }
.cm p { margin: 3px 0 0; font-size: 14px; line-height: 1.6; }
.cm .mention { color: var(--accent); background: var(--accent-soft); border-radius: 4px; padding: 0 3px; }
.cm-new { display: flex; gap: 9px; align-items: flex-start; margin-top: 16px; }
.cm-new textarea { flex: 1; min-height: 40px; }

/* Utskrift / spara som PDF */
@media print {
  .rail, .proj-side, .proj-top, .doc-add, .bk-handles, .comments, .pwa-bar, .side, .toast, .modal { display: none !important; }
  .proj-main, .doc { overflow: visible !important; padding: 0 !important; }
  .doc-inner { max-width: none; padding: 0; }
  body { background: #fff !important; color: #111 !important; }
  .bk-table th { background: #f3f4f6 !important; }
  a { text-decoration: none; color: #111 !important; }
  .chip { border: 1px solid #ddd; }
}

/* ─── 1.5.0: AI-telefoni ──────────────────────────────────── */
.voice .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--shadow); }
.kpi-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 8px;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.kpi-label { font-size: 12.5px; color: var(--muted); }
.kpi b { font-size: 26px; font-weight: 680; letter-spacing: -.02em; line-height: 1.2; }
.kpi small { font-size: 12px; color: var(--faint); }
.tabs-row { margin-bottom: 14px; flex-wrap: wrap; }
.spark { display: flex; align-items: flex-end; gap: 4px; height: 120px; }
.spark span { flex: 1; min-width: 5px; background: var(--accent-soft); border-radius: 4px 4px 0 0; position: relative; display: flex; align-items: flex-end; }
.spark i { display: block; width: 100%; background: var(--accent); border-radius: 4px 4px 0 0; }
.calls { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.calls thead th { text-align: left; font-weight: 500; font-size: 12.5px; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); }
.call-row td { padding: 11px 14px; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); cursor: pointer; }
.call-row:hover td { background: var(--hover); }
.call-row.open td { background: var(--accent-soft); }
.call-row .c-title { display: flex; align-items: center; gap: 8px; }
.call-row .c-title b { font-weight: 550; }
.call-row .caret { color: var(--faint); transition: transform .15s; display: inline-flex; }
.call-row.open .caret { transform: rotate(90deg); }
.call-detail td { padding: 0 14px 16px; background: color-mix(in srgb, var(--surface-2) 60%, transparent); border-bottom: 1px solid var(--line); }
.cd { display: grid; grid-template-columns: 1fr 380px; gap: 18px; padding-top: 14px; }
.cd-sum { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.cd-sum b { font-size: 12.5px; color: var(--muted); display: block; margin-bottom: 4px; }
.cd-sum p { margin: 0; font-size: 14px; line-height: 1.6; }
.cd-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; }
.cd-facts span { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 13px; display: flex; flex-direction: column; }
.cd-facts i { font-style: normal; font-size: 11.5px; color: var(--faint); }
.cd-side { display: flex; flex-direction: column; gap: 10px; }
.cd-side audio { width: 100%; height: 36px; }
.cd-chat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.cdm { max-width: 86%; padding: 8px 11px; border-radius: 12px; font-size: 13px; line-height: 1.5; }
.cdm.ai { background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.cdm.them { background: var(--accent-soft); border: 1px solid var(--accent-line); align-self: flex-end; border-bottom-right-radius: 4px; }
.pill.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.num-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--hover); color: var(--muted); flex: none; }
.voice-pick { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: var(--surface-2); }
.vp-current { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 550; }
.vp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; margin-top: 10px; max-height: 260px; overflow-y: auto; }
.vp { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 8px 10px; cursor: pointer; text-align: left; font-size: 13px; }
.vp.on { border-color: var(--accent); background: var(--accent-soft); }
.vp .play { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--hover); color: var(--muted); flex: none; }
.vp small { display: block; color: var(--faint); font-size: 11.5px; }
.lang-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 2px 10px; }
.hours { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px; }
.hrow { display: flex; align-items: center; gap: 6px; }
.hrow b { width: 34px; font-size: 12.5px; color: var(--muted); }
.notice { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; font-size: 13.5px; }
.notice.warn { background: var(--saffron-soft, color-mix(in srgb, #F59E0B 12%, transparent)); color: var(--ink); border: 1px solid color-mix(in srgb, #F59E0B 35%, transparent); }
.notice.err { background: var(--red-soft); color: var(--red); border: 1px solid color-mix(in srgb, var(--red) 30%, transparent); }
@media (max-width: 900px) { .cd { grid-template-columns: 1fr; } .calls .hide-m { display: none; } }
.voice .tabs-row { display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); padding: 4px; border-radius: 12px; width: fit-content; max-width: 100%; overflow-x: auto; }
.voice .tabs-row a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 9px; font-size: 13.5px; font-weight: 520; color: var(--muted); white-space: nowrap; }
.voice .tabs-row a:hover { color: var(--ink); }
.voice .tabs-row a.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.voice .page-head { align-items: flex-start; }
.voice .pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--muted); font-size: 12.5px; font-weight: 520; line-height: 1; white-space: nowrap; }
.voice .pill:hover { color: var(--ink); border-color: var(--accent-line); }
.voice .pill.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.voice .pill .i { flex: none; }
.bk-text a, .bk-table a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.bk-text code, .bk-table code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; font-size: .92em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.bk-text s { opacity: .65; }

/* ─── 1.7.0: mörk sidomeny och lugnare yta ──────────────── */
:root { --nav-bg: #14161C; --nav-ink: #E9EAEE; --nav-muted: #8D93A1; --nav-line: rgba(255,255,255,.08); --nav-active: rgba(255,255,255,.10); }
.shell { background: var(--bg); }
.rail {
  width: 244px; flex: none; flex-direction: column; align-items: stretch; gap: 2px;
  background: var(--nav-bg); color: var(--nav-ink); border-right: 0; padding: 12px 10px 12px;
}
.rail > a, .rail > button, .rail > .pop > button {
  display: flex; align-items: center; gap: 11px; width: 100%; height: 38px; padding: 0 10px; border-radius: 9px;
  color: var(--nav-muted); background: transparent; border: 0; font-size: 14px; font-weight: 500; text-align: left;
}
.rail > a:hover, .rail > button:hover, .rail > .pop > button:hover { background: rgba(255,255,255,.06); color: var(--nav-ink); }
.rail > a.on { background: var(--nav-active); color: #fff; font-weight: 580; }
.rail > a.on .i { color: #fff; }
.rail .i { width: 20px; height: 20px; flex: none; opacity: .92; }
.rail .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail .tip { display: none; }
.rail .spacer { flex: 1; }
.nav-label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.35); padding: 14px 10px 5px; font-weight: 600; }
.nav-num { background: rgba(255,255,255,.14); color: #fff; border-radius: 99px; min-width: 22px; height: 20px; display: grid; place-items: center; font-size: 11.5px; padding: 0 6px; font-weight: 600; }
.rail > a.on .nav-num { background: var(--accent); }
.nav-search { justify-content: flex-start !important; border: 1px solid var(--nav-line) !important; background: rgba(255,255,255,.04) !important; margin-bottom: 4px; }
.nav-search kbd { margin-left: auto; font-size: 10.5px; color: var(--nav-muted); background: rgba(255,255,255,.07); border-radius: 5px; padding: 2px 5px; }
.ws-switch { width: 100%; margin-bottom: 8px; }
.ws-btn { height: 48px !important; gap: 10px !important; }
.ws-dot { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; flex: none; }
.ws-name { flex: 1; display: flex; flex-direction: column; line-height: 1.25; overflow: hidden; }
.ws-name b { color: #fff; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-name small { color: var(--nav-muted); font-size: 11px; }
.ws-menu { left: 8px !important; right: 8px !important; top: 52px !important; }
.acct-btn { height: 50px !important; gap: 10px !important; border-top: 1px solid var(--nav-line); border-radius: 0 !important; margin-top: 4px; padding-top: 8px !important; }
.acct-name { display: flex; flex-direction: column; line-height: 1.25; overflow: hidden; }
.acct-name b { color: #fff; font-size: 13px; font-weight: 570; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-name small { color: var(--nav-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail .pop-menu { color: var(--ink); }
.show-m { display: none; }

/* Samlingssidan */
.hub-group { margin-bottom: 26px; }
.hub-head h2 { font-size: 15px; margin: 0 0 2px; font-weight: 620; }
.hub-head p { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.hub-card { position: relative; display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 15px 16px; box-shadow: var(--shadow); }
.hub-card:hover { border-color: var(--accent-line); transform: translateY(-1px); }
.hub-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); margin-bottom: 10px; }
.hub-card b { display: block; font-size: 14.5px; font-weight: 580; }
.hub-card small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; line-height: 1.45; }
.hub-meta { display: inline-block; margin-top: 9px; font-size: 11.5px; color: var(--faint); background: var(--surface-2); border-radius: 99px; padding: 2px 9px; }
.hub-arrow { position: absolute; top: 16px; right: 14px; color: var(--faint); }
.hub-card:hover .hub-arrow { color: var(--accent); }

@media (max-width: 760px) {
  .rail { width: auto; flex-direction: row; align-items: center; justify-content: space-around; padding: 0 4px calc(env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); }
  .rail > a, .rail > button, .rail > .pop > button { flex-direction: column; gap: 3px; height: 54px; width: 60px; padding: 0; color: var(--muted); font-size: 10.5px; font-weight: 550; justify-content: center; }
  .rail > a.on { background: transparent; color: var(--accent); }
  .rail > a.on .i { color: var(--accent); }
  .rail .lbl { flex: none; font-size: 10.5px; }
  .rail .nav-label, .rail .nav-search, .rail .spacer, .ws-switch, .acct-name { display: none; }
  .show-m { display: flex; }
  .acct-btn { height: 54px !important; border-top: 0; margin: 0; padding-top: 0 !important; }
  .nav-num { position: absolute; transform: translate(14px, -12px); background: var(--red); font-size: 10px; min-width: 18px; height: 18px; }
}
.show-m { display: none !important; }
@media (max-width: 760px) { .show-m { display: flex !important; } .hide-m { display: none !important; } }

/* Inloggning i samma mörka, lugna stil */
.auth-side { background: var(--nav-bg) !important; color: #E9EAEE; position: relative; overflow: hidden; }
.auth-side::after { content: ""; position: absolute; inset: auto -20% -40% -20%; height: 70%;
  background: radial-gradient(60% 60% at 50% 100%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%); pointer-events: none; }
.auth-side .brand { color: #fff; font-weight: 640; letter-spacing: -.01em; }
.auth-side h2 { color: #fff; font-size: 34px; letter-spacing: -.025em; line-height: 1.15; }
.auth-side p { color: rgba(233,234,238,.72); font-size: 15px; line-height: 1.6; }
.auth-side .tdemo { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: #E9EAEE; backdrop-filter: blur(8px); }
.auth-side .tdemo .ticket { background: rgba(255,255,255,.14); color: #fff; border-color: transparent; }
.auth-side .tdemo .muted { color: rgba(233,234,238,.6) !important; }
.auth-main { background: var(--bg); }
.auth-card { max-width: 380px; }
.auth-card h1 { font-size: 27px; letter-spacing: -.025em; margin-bottom: 4px; }
.auth-card > p, .auth-card form > p { color: var(--muted); margin-bottom: 20px; }
.auth-card .field span { font-size: 12.5px; font-weight: 550; color: var(--muted); }
.auth-card .input { height: 46px; border-radius: 11px; font-size: 15px; }
.auth-card .btn.primary { width: 100%; height: 46px; border-radius: 11px; font-size: 15px; justify-content: center; margin-top: 4px; }
.auth-links { margin-top: 14px; font-size: 13.5px; }

/* ─── 1.8.0: mer plats åt innehållet ─────────────────────── */
/* Sidomenyn är ihopfälld som standard och öppnas med knappen */
@media (min-width: 761px) {
  .rail { width: 62px; padding: 12px 8px; transition: width .16s ease; }
  .rail .lbl, .rail .nav-label, .rail .ws-name, .rail .acct-name, .rail .nav-search span, .rail .nav-search kbd { display: none; }
  .rail > a, .rail > button, .rail > .pop > button { justify-content: center; padding: 0; gap: 0; }
  .rail .nav-num { position: absolute; transform: translate(12px, -11px); min-width: 17px; height: 17px; font-size: 10px; padding: 0 4px; }
  .rail .tip { display: block; position: absolute; left: 58px; top: 50%; transform: translateY(-50%); background: #14161C; color: #fff;
    padding: 5px 9px; border-radius: 8px; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; box-shadow: var(--shadow-lg); z-index: 90; }
  .rail > a:hover .tip, .rail > button:hover .tip { opacity: 1; }
  .ws-btn { height: 42px !important; } .ws-menu { left: 56px !important; right: auto !important; min-width: 230px; top: 8px !important; }
  .acct-btn { height: 46px !important; }
  html.nav-open .rail { width: 244px; padding: 12px 10px; }
  html.nav-open .rail .lbl, html.nav-open .rail .nav-label, html.nav-open .rail .ws-name,
  html.nav-open .rail .acct-name, html.nav-open .rail .nav-search span, html.nav-open .rail .nav-search kbd { display: block; }
  html.nav-open .rail .ws-name, html.nav-open .rail .acct-name { display: flex; }
  html.nav-open .rail > a, html.nav-open .rail > button, html.nav-open .rail > .pop > button { justify-content: flex-start; padding: 0 10px; gap: 11px; }
  html.nav-open .rail .nav-num { position: static; transform: none; min-width: 22px; height: 20px; font-size: 11.5px; padding: 0 6px; }
  html.nav-open .rail .tip { display: none; }
  .nav-toggle { position: fixed; left: 8px; bottom: 8px; z-index: 95; width: 46px; height: 30px; border-radius: 8px; border: 0;
    background: rgba(255,255,255,.08); color: #9aa1af; display: grid; place-items: center; cursor: pointer; }
  html.nav-open .nav-toggle { left: 190px; }
  .nav-toggle:hover { background: rgba(255,255,255,.16); color: #fff; }
}
@media (max-width: 760px) { .nav-toggle { display: none; } }

/* Smalare kolumner – innehållet får plats */
.side { width: 208px; }
.list { width: 296px; }
.details { width: 258px; }
.details section { padding: 13px 14px; }
.thread-scroll { padding: 16px 20px 18px; }
@media (min-width: 1500px) { .list { width: 320px; } .details { width: 290px; } }

/* Lägre svarsruta med lägesväxling som ikoner */
.composer { padding: 8px 16px 10px; }
.composer textarea { min-height: 54px; padding: 10px 12px 6px; font-size: 14.5px; }
.composer-bar { padding: 4px 6px 6px; gap: 4px; }
.mode-switch { display: inline-flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 2px; }
.mode-switch button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--muted);
  border-radius: 7px; padding: 4px 9px; font-size: 12.5px; font-weight: 540; cursor: pointer; }
.mode-switch button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.composer.note-mode .mode-switch button.on { background: var(--note); color: var(--saffron); }
.composer-sep { width: 1px; height: 20px; background: var(--line); margin: 0 3px; }
@media (max-width: 760px) {
  .composer { padding: 6px 10px 8px; }
  .composer textarea { min-height: 46px; font-size: 16px; }
  .mode-switch button span { display: none; }
  .mode-switch button { padding: 5px 8px; }
}
.diag { display: flex; flex-direction: column; gap: 8px; }
.diag-sum { font-size: 13.5px; font-weight: 560; margin-bottom: 2px; }
.diag-row { border: 1px solid var(--line); border-left-width: 3px; border-radius: 10px; padding: 10px 12px; font-size: 13px; background: var(--surface); }
.diag-row b { display: block; font-size: 13.5px; margin-bottom: 2px; }
.diag-row span { color: var(--muted); line-height: 1.5; }
.diag-row.ok { border-left-color: var(--green); }
.diag-row.warn { border-left-color: var(--saffron); }
.diag-row.err { border-left-color: var(--red); }

/* ─── 1.9.0: hjälpcenter i admin ─────────────────────────── */
.cat { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: var(--surface-2); }
.cat + .cat, .cat + form { margin-top: 12px; }
.cat-head { display: flex; align-items: center; gap: 10px; padding: 2px 4px 10px; }
.cat-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); font-size: 16px; }
.cat-head b { font-size: 14.5px; font-weight: 580; display: block; }
.cat-head small { color: var(--muted); font-size: 12.5px; }
.pill.sm { font-size: 11.5px; padding: 2px 8px; }
.subcat { margin: 10px 0 0 14px; padding-left: 12px; border-left: 2px solid var(--line); }
.subcat > header { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); padding: 4px 0 6px; }
.subcat > header b { color: var(--ink); font-weight: 560; }
.cat .faq-item { background: var(--surface); }

/* ─── 1.9.0: putsad sidomeny ─────────────────────────────── */
@media (min-width: 761px) {
  .rail .ws-btn .i { display: none; }                    /* pilen bara när menyn är öppen */
  html.nav-open .rail .ws-btn .i { display: block; opacity: .5; margin-left: auto; }
  .rail .ws-btn { padding: 0 !important; justify-content: center !important; }
  html.nav-open .rail .ws-btn { padding: 0 8px !important; justify-content: flex-start !important; }
  .rail .ws-dot { border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
  .rail .nav-search { height: 38px !important; border-radius: 10px !important; }
  .rail .nav-search .i { opacity: .8; }
  .rail .acct-btn .i { display: none; }
  .rail > .sep, .rail .sep { height: 1px; background: var(--nav-line); margin: 8px 4px; }
}
html.nav-open .rail .nav-search { background: rgba(255,255,255,.05) !important; }
.rail .nav-label { padding-top: 12px; }
.nav-toggle { transition: left .16s ease, background .12s; }

/* ─── 2.0.0: Front-inspirerad yta ─────────────────────────── */
.chan-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
  color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px 1px 5px; flex: none; }
.conv.unread .chan-chip { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.thread-chan { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; margin-right: 10px; }

/* Lugnare listor och rubriker, som i Front */
.list-head h2, .thread-head h2 { font-weight: 620; letter-spacing: -.015em; }
.conv { border-radius: 8px; padding: 9px 10px; border: 1px solid transparent; }
.conv:hover { background: var(--hover); }
.conv.on { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); }
.conv .top b { font-weight: 570; font-size: 13.5px; }
.conv .snippet { font-size: 12.5px; color: var(--muted); }
.msg .bubble { border-radius: 12px; font-size: 14.5px; line-height: 1.6; }
.thread-head { background: var(--surface); }
.details { background: var(--surface); }
.details h4 { text-transform: none; font-size: 11.5px; letter-spacing: .02em; }
.btn.primary { font-weight: 570; }
.wiz-dots { display: flex; gap: 6px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.wiz-dots span { font-size: 12px; color: var(--faint); background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; padding: 3px 11px; }
.wiz-dots span.on { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); font-weight: 600; }
.wiz-dots span.done { color: var(--green); border-color: color-mix(in srgb, var(--green) 35%, transparent); }

/* ══════════════════════════════════════════════════════════════
   2.1.0 – Front-inspirerat utseende: ljust, tunt och lugnt
   ══════════════════════════════════════════════════════════════ */
:root {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #FAFAFA;
  --hover: #F4F4F5;
  --active: #EDEDEF;
  --line: #E8E8EB;
  --line-strong: #DCDCE0;
  --ink: #18181B;
  --ink-2: #3F3F46;
  --muted: #71717A;
  --faint: #A1A1AA;
  --accent-soft: color-mix(in srgb, var(--accent) 8%, #fff);
  --accent-line: color-mix(in srgb, var(--accent) 26%, #fff);
  --unread-bg: transparent;
  --shadow: 0 1px 2px rgba(24, 24, 27, .04);
  --shadow-lg: 0 4px 16px rgba(24, 24, 27, .08);
  --shadow-pop: 0 8px 28px rgba(24, 24, 27, .12);
  --r-sm: 5px; --r: 7px; --r-lg: 10px;
  --nav-bg: #FBFBFC; --nav-ink: #18181B; --nav-muted: #71717A;
  --nav-line: #EAEAEC; --nav-active: #EFEFF1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E0E11; --surface: #141417; --surface-2: #17171B; --hover: #1D1D22; --active: #232329;
    --line: #26262C; --line-strong: #32323A; --ink: #F4F4F5; --ink-2: #D4D4D8; --muted: #A1A1AA; --faint: #71717A;
    --nav-bg: #101013; --nav-ink: #F4F4F5; --nav-muted: #8A8A93; --nav-line: #232329; --nav-active: #1E1E24;
  }
}
[data-theme="dark"] {
  --bg: #0E0E11; --surface: #141417; --surface-2: #17171B; --hover: #1D1D22; --active: #232329;
  --line: #26262C; --line-strong: #32323A; --ink: #F4F4F5; --ink-2: #D4D4D8; --muted: #A1A1AA; --faint: #71717A;
  --nav-bg: #101013; --nav-ink: #F4F4F5; --nav-muted: #8A8A93; --nav-line: #232329; --nav-active: #1E1E24;
}

body { font-size: 13.5px; letter-spacing: -.005em; }

/* Sidomenyn: ljus, tunn, små ikoner */
.rail { background: var(--nav-bg); border-right: 1px solid var(--nav-line); }
.rail > a, .rail > button, .rail > .pop > button { color: var(--nav-muted); font-size: 13px; height: 34px; border-radius: 6px; }
.rail > a:hover, .rail > button:hover, .rail > .pop > button:hover { background: var(--hover); color: var(--ink); }
.rail > a.on { background: var(--nav-active); color: var(--ink); font-weight: 560; }
.rail > a.on .i { color: var(--accent); }
.rail .i { width: 17px; height: 17px; stroke-width: 1.7; }
.rail .nav-label { color: var(--faint); font-size: 10.5px; }
.rail .nav-num { background: var(--hover); color: var(--muted); font-weight: 600; }
.rail > a.on .nav-num { background: var(--accent); color: #fff; }
.nav-search { border-color: var(--line) !important; background: var(--surface) !important; color: var(--muted); }
.nav-search kbd { background: var(--hover); color: var(--faint); }
.ws-name b, .acct-name b { color: var(--ink); }
.rail .tip { background: #27272A; }
.nav-toggle { background: var(--hover); color: var(--muted); border: 1px solid var(--line); }
.nav-toggle:hover { background: var(--active); color: var(--ink); }
.rail .pdot.on-avatar { border-color: var(--nav-bg); }

/* Mindre ikoner överallt */
.i { stroke-width: 1.7; }
.btn .i { width: 15px; height: 15px; }
.btn { height: 30px; border-radius: 7px; font-size: 13px; font-weight: 520; padding: 0 11px; box-shadow: none; }
.btn.sm { height: 26px; font-size: 12.5px; padding: 0 9px; }
.btn.icon { width: 30px; padding: 0; }
.btn:not(.primary):not(.danger) { background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); }
.btn:not(.primary):not(.danger):hover { background: var(--hover); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--hover); }
.btn.primary { box-shadow: none; }
.input, .seg label span { font-size: 13px; }
.input { height: 34px; border-radius: 7px; border-color: var(--line-strong); }
.card { border-radius: 10px; box-shadow: none; border-color: var(--line); }
.card-head h3 { font-size: 14px; font-weight: 600; }
.card-head p, .help, small { font-size: 12.5px; }

/* Inkorgens tre kolumner i Front-anda */
.side, .list { background: var(--surface); border-color: var(--line); }
.side-head, .list-head, .thread-head { height: 48px; min-height: 48px; border-color: var(--line); }
.side-head h2, .list-head h2 { font-size: 14px; font-weight: 600; }
.nav-item { height: 30px; font-size: 13px; border-radius: 6px; }
.nav-item .i { width: 16px; height: 16px; }
.side-label { font-size: 10.5px; letter-spacing: .04em; }
.conv { border-radius: 6px; padding: 8px 9px; border-bottom: 1px solid var(--line); border-radius: 0; border-left: 0; border-right: 0; border-top: 0; }
.conv:hover { background: var(--surface-2); }
.conv.on { background: var(--accent-soft); border-color: var(--line); box-shadow: none; }
.conv .top b { font-size: 13px; font-weight: 580; }
.conv .snippet { font-size: 12.5px; line-height: 1.45; }
.conv.unread .top b { font-weight: 680; }
.chan-chip { border-radius: 4px; font-size: 10px; padding: 1px 5px; background: transparent; }
.thread-chan { background: transparent; border: 0; padding: 0; color: var(--faint); font-weight: 500; }
.thread-head h2 { font-size: 14.5px; }
.bubble { border-radius: 8px !important; border-color: var(--line); font-size: 13.5px; }
.msg.out .bubble { background: var(--accent-soft); }
.details { background: var(--surface); }
.details h4 { font-size: 11px; color: var(--faint); font-weight: 600; letter-spacing: .03em; }
.composer-box { border-radius: 8px; border-color: var(--line-strong); }
.composer textarea { font-size: 13.5px; }
.badge, .pill { border-radius: 5px; font-size: 11px; }
.table th { font-size: 11.5px; font-weight: 550; color: var(--muted); }
.table td { font-size: 13px; }
.kpi, .hub-card, .proj-card, .task { border-radius: 10px; box-shadow: none; }
.kpi b { font-size: 23px; }
.hub-ico, .kpi-ico { border-radius: 8px; }
.pop-menu { border-radius: 9px; box-shadow: var(--shadow-pop); font-size: 13px; }
.pop-menu button, .pop-menu a { border-radius: 6px; font-size: 13px; }
.modal { border-radius: 12px; }
.avatar { font-weight: 600; }
/* Inloggningens vänstra panel förblir mörk oavsett menyfärg */
.auth-side { background: #18181B !important; color: #FAFAFA; }
.auth-side h2, .auth-side .brand { color: #FFFFFF; }
.auth-side p { color: rgba(250,250,250,.7); }
.auth-side .tdemo { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); color: #FAFAFA; }
.auth-side .tdemo .muted { color: rgba(250,250,250,.55) !important; }
/* Neutralare ärendemärkning och lugnare oläst-markering */
.conv .ticket, .badge.ticket, .ticket-badge { background: var(--surface-2) !important; color: var(--muted) !important; border: 1px solid var(--line) !important; font-weight: 600; }
.conv { border-left: 0 !important; position: relative; padding-left: 20px; }
.conv.unread::before { content: ""; position: absolute; left: 8px; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.conv .top time { font-size: 11.5px; color: var(--faint); }
.conv.unread .top time { color: var(--accent); font-weight: 600; }
.chan-chip { color: var(--faint); border-color: transparent; padding-left: 0; }
.conv.unread .chan-chip { background: transparent; border-color: transparent; color: var(--accent); }
.badge.green, .badge.accent, .badge.saffron { font-weight: 550; }
.list-scroll { padding: 0; }
.msg .bubble { background: var(--surface-2); }
.msg.out .bubble { background: color-mix(in srgb, var(--accent) 7%, #fff); border-color: color-mix(in srgb, var(--accent) 18%, #fff); }
[data-theme="dark"] .msg.out .bubble, :root:not([data-theme="light"]) .msg.out .bubble { background: color-mix(in srgb, var(--accent) 22%, #141417); border-color: color-mix(in srgb, var(--accent) 34%, #141417); }
.conv.unread::after { display: none; }
.ticket { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); font-weight: 600; }
.auth-side .tdemo .ticket { background: rgba(255,255,255,.12); color: #FAFAFA; border-color: transparent; }
.pick { display: block; position: relative; }
.pick input { position: absolute; opacity: 0; }
.pick span { display: block; border: 1px solid var(--line); border-radius: 9px; padding: 11px 13px; cursor: pointer; }
.pick input:checked + span { border-color: var(--accent); background: var(--accent-soft); }
.pick b { display: block; font-size: 13.5px; font-weight: 570; }
.pick em { font-style: normal; font-size: 12.5px; color: var(--muted); }

/* ─── 2.3.0: topbar, aviseringsbubblor och ordning i menyn ─── */
.shell { align-items: stretch; }
.main-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.main-wrap > main, .main-wrap > .proj-wrap { flex: 1; min-height: 0; }
.topbar { height: 46px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--surface); }
.topsearch { flex: 1; max-width: 620px; display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); color: var(--faint); font-size: 12.5px; cursor: pointer; }
.topsearch:hover { background: var(--hover); border-color: var(--line-strong); color: var(--muted); }
.topsearch span { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topsearch kbd { font-size: 10.5px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; color: var(--faint); }
.topbar > .btn.icon:not(.top-ic) { display: none; }   /* den gamla sökknappen för mobil – menyradens egna ikoner (top-ic) ska synas */
@media (max-width: 1100px) { .topsearch span, .topsearch kbd { display: none; } .topsearch { max-width: 40px; justify-content: center; } }

/* Aviseringsbubblor: vit siffra på rött, snyggt ovanför ikonen */
.rail .nav-num, .rail .rail-badge {
  position: absolute; top: 2px; left: 50%; transform: translateX(3px);
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px;
  background: #CC2F36 !important; color: #fff !important; font-size: 10px; font-weight: 700; line-height: 16px;   /* 4.37.0: 5:1 i stället för 3,9:1 */
  display: grid; place-items: center; box-shadow: 0 0 0 2px var(--nav-bg); }
.rail > a { position: relative; }
html.nav-open .rail .nav-num, html.nav-open .rail .rail-badge {
  position: static; transform: none; margin-left: auto; box-shadow: none; }

/* Menyknappen ovanför profilbilden */
.nav-toggle { position: static !important; width: 100% !important; height: 32px !important; margin: 6px 0 2px !important;
  border-radius: 7px !important; border: 0 !important; background: transparent !important; color: var(--nav-muted) !important;
  display: flex !important; align-items: center; justify-content: center; gap: 9px; font-size: 12.5px; }
.nav-toggle:hover { background: var(--hover) !important; color: var(--ink) !important; }
html.nav-open .nav-toggle { justify-content: flex-start; padding: 0 10px !important; }
.acct-btn { order: 99; }

/* Kontomenyn ska rymmas utan att man scrollar */
.rail .pop-menu { max-height: min(86vh, 640px); overflow-y: auto; }
.rail .pop:last-of-type .pop-menu { bottom: 8px !important; top: auto !important; }
@media (min-width: 761px) { .rail .pop:last-of-type .pop-menu { left: 58px !important; right: auto !important; min-width: 270px; } }
.update-toast { position: fixed; right: 16px; bottom: 16px; z-index: 320; display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px 11px 14px; box-shadow: var(--shadow-pop); max-width: min(420px, calc(100vw - 24px)); }
.update-toast .ut-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 15px; flex: none; }
.update-toast .ut-text { display: flex; flex-direction: column; }
.update-toast b { font-size: 13.5px; }
.update-toast em { font-style: normal; font-size: 12.5px; color: var(--muted); }
@media (max-width: 760px) { .update-toast { left: 10px; right: 10px; bottom: calc(74px + env(safe-area-inset-bottom, 0px)); max-width: none; } }
.bubble.html { background: var(--surface-2); }
:root:not([data-theme="light"]) .bubble.html, [data-theme="dark"] .bubble.html { background: #141417; border-color: var(--line); }

/* ─── 2.4.0: formaterad svarsruta ────────────────────────── */
.rich-tools { display: flex; align-items: center; gap: 1px; flex-wrap: wrap; padding: 5px 6px 0; }
.rich-tools button { min-width: 26px; height: 26px; padding: 0 6px; border: 0; background: transparent; color: var(--muted);
  border-radius: 6px; cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.rich-tools button:hover { background: var(--hover); color: var(--ink); }
.rich-tools button.on { background: var(--accent-soft); color: var(--accent); }
.rt-sep { width: 1px; height: 16px; background: var(--line); margin: 0 4px; }
.rich-input { min-height: 54px; max-height: 320px; overflow-y: auto; padding: 8px 12px 6px; font-size: 13.5px; line-height: 1.6; outline: 0; }
.rich-input:empty::before { content: attr(data-placeholder); color: var(--faint); }
.rich-input b, .rich-input strong { font-weight: 650; }
.rich-input ul, .rich-input ol { margin: 4px 0; padding-left: 22px; }
.rich-input a { color: var(--accent); text-decoration: underline; }
.emoji-pop { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 60; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow-pop); padding: 8px; display: grid; grid-template-columns: repeat(8, 30px); gap: 2px; }
.emoji-pop button { height: 30px; border: 0; background: transparent; border-radius: 6px; font-size: 17px; cursor: pointer; }
.emoji-pop button:hover { background: var(--hover); }
@media (max-width: 760px) { .rich-input { font-size: 16px; } .rich-tools { padding: 4px 4px 0; } }

/* ─── 2.6.0: mejltråd som en riktig e-postklient ─────────── */
.msg { display: block; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin-bottom: 8px; overflow: hidden; }
.msg > .body { padding: 0 14px 12px; }
.msg.folded > .body { display: none; }
.msg.open .msg-fold { border-bottom: 1px solid var(--line); }
.msg-fold { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 12px; background: transparent; border: 0; cursor: pointer; text-align: left; color: var(--ink); }
.msg-fold:hover { background: var(--hover); }
.msg-fold b { font-size: 13px; font-weight: 600; white-space: nowrap; }
.msg-fold .fold-prev { flex: 1; min-width: 0; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg.open .fold-prev { visibility: hidden; }
.msg-fold .fold-att { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--faint); }
.msg-fold time { font-size: 11.5px; color: var(--faint); white-space: nowrap; }
.msg.in { border-left: 3px solid var(--line-strong); }
.msg.out { border-left: 3px solid var(--accent); }
.msg.note { border-left: 3px solid var(--saffron); background: var(--note); }
.msg .head { padding-top: 10px; }
.msg .bubble { background: transparent !important; border: 0 !important; padding: 4px 0 0 !important; border-radius: 0 !important; max-width: none !important; }
.msg.out .bubble, .msg.in .bubble { background: transparent !important; }

/* Mejlet ska smälta in – ingen ram, ingen sidoscroll */
.bubble.html { background: transparent !important; border: 0 !important; padding: 0 !important; }
.bubble.html iframe { width: 100%; border: 0; display: block; background: transparent; }
/* Allt i kortet läses vänsterifrån, som i en e-postklient */
.msg, .msg .body, .msg .bubble, .msg .head, .msg .atts, .msg .delivery { text-align: left !important; align-items: flex-start; }
.msg.out .body, .msg.out .bubble { margin-left: 0 !important; margin-right: 0 !important; }
.msg .head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); padding: 10px 0 2px; }
.msg .head b { font-size: 12.5px; font-weight: 550; color: var(--ink-2); }
.msg .head .addr { color: var(--faint); }
.msg .head time { margin-left: auto; color: var(--faint); }
.msg .bubble { font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; }
.msg .atts { margin-top: 8px; }
.msg .delivery { margin-top: 6px; font-size: 11.5px; }
.msg-fold .avatar { flex: none; }
/* Upphäv den gamla chattliknande spegelvändningen av utgående meddelanden */
.msg.out { flex-direction: column !important; margin-left: 0 !important; }
.msg.out .head { flex-direction: row !important; }
.msg.out .head time { margin-left: auto !important; margin-right: 0 !important; }
.msg.out .body { display: block !important; align-items: stretch !important; }
.msg.out .bubble { max-width: none !important; border-radius: 0 !important; }
.msg.out .delivery, .msg.out .atts { justify-content: flex-start !important; }
/* Namn och tid visas bara en gång – i kortets rubrik */
.msg .head { padding: 9px 0 0; font-size: 11.5px; }
.msg .head .addr { color: var(--faint); }
.msg-fold .badge { flex: none; }
/* Hopfällningen måste vinna över alla andra regler */
.msg.folded > .body { display: none !important; }
.msg.open > .body { display: block !important; }
.msg.open .fold-prev { display: none; }
.sig-preview { border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: #fff; color: #111827; overflow-x: auto; }
.sig-preview * { max-width: 100%; }

/* ─── 2.8.0: kompaktare svarsruta ────────────────────────── */
.rich-tools { border-top: 1px solid var(--line); margin-top: 2px; padding: 4px 6px 0; }
.rich-tools button { min-width: 24px; height: 24px; font-size: 12.5px; }
.composer-bar { padding: 2px 6px 5px; gap: 3px; }
.composer-bar .btn.sm, .mode-switch button { height: 24px; font-size: 12px; padding: 0 8px; }
.composer-bar .btn.ghost.icon.sm { width: 24px; }
.mode-switch { padding: 1px; border-radius: 7px; }
.composer-sep { height: 16px; }
.composer textarea, .rich-input { min-height: 48px; }

/* Skicka-knappen och pilen som en tydlig enhet */
.btn-split { display: inline-flex; align-items: stretch; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(24,24,27,.10); }
.btn-split > .btn.primary { border-radius: 0; height: 28px; padding: 0 14px; font-weight: 600; }
.btn-split > .btn.primary:first-child { border-right: 1px solid rgba(255,255,255,.22); }
.btn-split > .btn.primary + .btn { border-radius: 0; width: 26px; padding: 0; display: grid; place-items: center; }
.btn-split .i { width: 14px; height: 14px; }

/* Inklistrade bilder */
.composer-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 4px; }
.cfile { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 7px; padding: 3px 7px; font-size: 12px; color: var(--muted); }
.cfile img { width: 22px; height: 22px; object-fit: cover; border-radius: 4px; }
.cfile button { border: 0; background: transparent; color: var(--faint); cursor: pointer; font-size: 13px; line-height: 1; }
.cfile button:hover { color: var(--red); }
/* Teamchattens skrivruta med samma verktyg */
.tc-composer .rich-input { min-height: 42px; }
.tc-composer .rich-tools { border-top: 1px solid var(--line); }
.tc-text b, .tc-text strong { font-weight: 650; }
.tc-text ul, .tc-text ol { margin: 4px 0; padding-left: 20px; }
.tc-text a { color: var(--accent); }

/* ─── 3.0.0: lightbox, chattbubbla och putsad Skicka-knapp ── */
/* Skicka-knappen: en tydlig enhet med rundade ytterkanter */
.btn-split { border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(24,24,27,.12); background: var(--accent); }
.btn-split > .btn.primary { border-radius: 0 !important; height: 30px; padding: 0 16px; font-weight: 600; box-shadow: none !important; border: 0 !important; }
.btn-split > .btn.primary:first-child { border-right: 1px solid rgba(255,255,255,.28) !important; }
.btn-split > .btn.primary:last-child, .btn-split > .btn:last-child { width: 30px; padding: 0 !important; display: grid; place-items: center; }
.btn-split > .btn:hover { filter: brightness(1.06); }

/* Lightbox för bilagor */
.lb { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 32px;
  background: rgba(10,10,12,.62); backdrop-filter: blur(10px) saturate(120%); animation: lbin .14s ease; }
@keyframes lbin { from { opacity: 0 } to { opacity: 1 } }
.lb-inner { max-width: min(1100px, 94vw); max-height: 88vh; display: flex; flex-direction: column; gap: 10px; }
.lb-bar { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 13px; }
.lb-bar b { font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-bar .lb-act { margin-left: auto; display: flex; gap: 6px; }
.lb-bar button, .lb-bar a { background: rgba(255,255,255,.12); border: 0; color: #fff; border-radius: 8px;
  height: 30px; padding: 0 12px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-decoration: none; }
.lb-bar button:hover, .lb-bar a:hover { background: rgba(255,255,255,.22); }
.lb-body { background: #fff; border-radius: 12px; overflow: hidden; display: flex; min-height: 0; }
.lb-body img { max-width: 100%; max-height: 82vh; display: block; object-fit: contain; }
.lb-body iframe { width: min(1000px, 92vw); height: 82vh; border: 0; background: #fff; }
.msg .att, .tc-att { cursor: pointer; }

/* Chattbubbla */
.chat-bubble { position: fixed; right: 18px; bottom: 18px; z-index: 300; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.cb-launch { position: relative; width: 50px; height: 50px; border-radius: 50%; border: 0; background: var(--accent); color: #fff;
  box-shadow: 0 8px 24px rgba(24,24,27,.28); cursor: pointer; display: grid; place-items: center; }
.cb-launch:hover { filter: brightness(1.07); transform: translateY(-1px); }
.cb-badge { position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; border-radius: 10px; background: #E5484D;
  color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 5px; box-shadow: 0 0 0 2px var(--bg); }
.cb-panel { width: min(370px, calc(100vw - 28px)); height: min(520px, 72vh); background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-pop); display: flex; flex-direction: column; overflow: hidden; }
.cb-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.cb-head .cb-x, .cb-head .cb-back, .cb-head .cb-full { background: transparent; border: 0; color: var(--muted); cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.cb-head .cb-x:hover, .cb-head .cb-back:hover, .cb-head .cb-full:hover { background: var(--hover); color: var(--ink); }
.cb-list, .cb-thread { flex: 1; overflow-y: auto; }
.cb-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; background: transparent; cursor: pointer; text-align: left; border-bottom: 1px solid var(--line); }
.cb-row:hover { background: var(--hover); }
.cb-av { position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.cb-av .dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--surface); }
.dot.online { background: #22C55E } .dot.busy { background: #E5484D } .dot.away, .dot.inactive { background: #F59E0B } .dot.offline { background: #9AA1AF }
.cb-meta { flex: 1; min-width: 0; }
.cb-meta b { display: block; font-size: 13px; font-weight: 570; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-meta small { display: block; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-time { font-size: 11px; color: var(--faint); white-space: nowrap; }
.cb-unread { min-width: 18px; height: 18px; border-radius: 9px; background: #E5484D; color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; padding: 0 5px; }
.cb-thread { padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.cb-msg { max-width: 82%; padding: 7px 10px; border-radius: 12px; font-size: 13px; line-height: 1.5; background: var(--surface-2); border: 1px solid var(--line); }
.cb-msg.me { align-self: flex-end; background: var(--accent-soft); border-color: var(--accent-line); }
.cb-msg .who { display: block; font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.cb-msg img { max-width: 100%; border-radius: 8px; margin-top: 4px; cursor: pointer; }
.cb-msg a.file { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; margin-top: 4px; }
.cb-form { border-top: 1px solid var(--line); padding: 8px; }
.cb-input-row { display: flex; align-items: flex-end; gap: 6px; }
.cb-input { flex: 1; min-height: 34px; max-height: 120px; overflow-y: auto; border: 1px solid var(--line-strong); border-radius: 9px; padding: 7px 10px; font-size: 13.5px; outline: 0; }
.cb-input:empty::before { content: attr(data-placeholder); color: var(--faint); }
.cb-att { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--muted); cursor: pointer; }
.cb-att:hover { background: var(--hover); color: var(--ink); }
.cb-send { width: 32px; height: 32px; border-radius: 9px; border: 0; background: var(--accent); color: #fff; cursor: pointer; display: grid; place-items: center; }
.cb-files { display: flex; flex-wrap: wrap; gap: 5px; padding-bottom: 6px; }
.cb-pop { position: fixed; right: 18px; bottom: 82px; z-index: 305; width: min(330px, calc(100vw - 28px)); background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); padding: 10px 12px; display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.cb-pop b { font-size: 13px; display: block; }
.cb-pop small { color: var(--muted); font-size: 12.5px; display: block; margin-top: 1px; }
@media (max-width: 760px) { .chat-bubble { right: 10px; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); } .cb-pop { bottom: calc(132px + env(safe-area-inset-bottom, 0px)); right: 10px; } }
.lang-pick > button { min-width: 30px; height: 24px; border: 0; background: transparent; color: var(--muted);
  border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; cursor: pointer; }
.lang-pick > button:hover { background: var(--hover); color: var(--ink); }
.pop-menu button.on { background: var(--accent-soft); color: var(--accent); }
.rich-input[dir="rtl"], .cb-input[dir="rtl"] { text-align: right; }

/* ── 3.2.0 ─────────────────────────────────────────────────────────────── */

/* Detaljpanelen: smalare och tätare så att mejlet får mer yta */
.details { width: 228px; }
.details section { padding: 11px 12px; }
.details h4 { margin: 0 0 7px; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; }
.details .kv { grid-template-columns: 66px 1fr; gap: 5px 8px; font-size: 12.5px; }
.details .kv dd { font-size: 12.5px; }
.details .input.sm { height: 25px; font-size: 12.5px; padding: 0 22px 0 7px; }
.details .contact-card { gap: 9px; }
.details .contact-card b { font-size: 13px; }
.details .contact-card .avatar { --s: 30px !important; }
.details .tagpill { font-size: 11px; padding: 1px 7px; }
.details .hist a { padding: 6px 0; font-size: 12.5px; }
.details .visitor-pages summary { font-size: 12px; }
@media (min-width: 1500px) { .details { width: 248px; } }

/* Delad Skicka-knapp: menyn låg tidigare bakom overflow:hidden och syntes aldrig */
.btn-split { overflow: visible; }
.btn-split > .btn.primary:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.btn-split > .btn:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.pop-menu .menu-pick { position: relative; justify-content: flex-start; }
.pop-menu .menu-pick input[type="datetime-local"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }

/* Blockerade fjärrbilder i inkommande mejl */
.img-guard { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px;
  padding: 7px 10px; border: 1px solid var(--saffron-line, var(--line)); border-radius: var(--r-sm);
  background: var(--saffron-soft, var(--surface-2)); font-size: 12.5px; color: var(--ink); }
.img-guard .i { flex: none; color: var(--muted); }
.img-guard .btn.sm { height: 24px; font-size: 12px; background: var(--surface); border: 1px solid var(--line); }
.img-guard.quiet { background: transparent; border-style: dashed; color: var(--muted); }

/* Schemalagt utskick */
.delivery.scheduled { color: var(--accent); }
.linkish { background: none; border: 0; padding: 0 0 0 8px; color: var(--accent); cursor: pointer; font: inherit; text-decoration: underline; }
.btn.danger { background: var(--red, #E5484D); color: #fff; border-color: transparent; }
.btn.danger:hover { filter: brightness(1.06); }

/* ── Chattbubblan, omgjord ─────────────────────────────────────────────── */

/* Knappen ligger nu under panelen, inte ovanför den */
.chat-bubble { flex-direction: column-reverse; gap: 12px; }
.cb-launch { width: 46px; height: 46px; box-shadow: 0 6px 18px rgba(24,24,27,.22); transition: transform .12s ease, filter .12s ease; }
.cb-panel { width: min(384px, calc(100vw - 28px)); height: min(560px, 76vh); border-radius: 16px; }

/* Rubrik: namn på en rad, status med färgad prick under */
.cb-head { padding: 9px 12px; gap: 9px; align-items: center; }
.cb-head-av { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 700; flex: none; }
.cb-head-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.cb-head-text b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-status { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.cb-status .cb-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: #9AA1AF; }
.cb-status span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Listan: luftigare rader utan hårda linjer */
.cb-row { padding: 10px 12px; border-bottom: 0; border-radius: 10px; margin: 2px 6px; width: calc(100% - 12px); }
.cb-list { padding: 4px 0; }
.cb-av { width: 34px; height: 34px; }

/* Tråden: samma bubbelstil som i ärendena, men tätare */
.cb-thread { padding: 12px 12px 6px; gap: 2px; background: var(--surface-2); }
.cb-thread .tc-msg { display: flex; gap: 8px; padding: 2px 0; }
.cb-thread .tc-msg.compact { margin-top: -2px; }
.cb-thread .tc-av { flex: none; width: 28px; text-align: center; }
.cb-thread .tc-av .avatar { --s: 28px !important; }
.cb-thread .tc-av time { font-size: 10px; color: var(--faint); }
.cb-thread .tc-body { min-width: 0; flex: 1; }
.cb-thread .tc-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 1px; }
.cb-thread .tc-head b { font-size: 12.5px; font-weight: 600; }
.cb-thread .tc-head time { font-size: 10.5px; color: var(--faint); }
.cb-thread .tc-text { font-size: 13px; line-height: 1.5; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 6px 9px; display: inline-block; max-width: 100%; word-break: break-word; }
.cb-thread .tc-msg.mine .tc-text { background: var(--accent-soft); border-color: var(--accent-line); }
.cb-thread .tc-msg.mentioned .tc-text { border-color: var(--saffron); }
.cb-thread .tc-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cb-thread .tc-img img { max-width: 190px; max-height: 190px; border-radius: 9px; display: block; cursor: zoom-in; }
.cb-thread .att { max-width: 100%; font-size: 12px; cursor: pointer; }
.cb-thread .tc-system { text-align: center; font-size: 11.5px; color: var(--faint); padding: 4px 0; }

/* Skrivfält och släppyta */
.cb-form { padding: 8px 10px 10px; background: var(--surface); }
.cb-input { border-radius: 11px; }
.cb-send { width: 34px; height: 34px; border-radius: 11px; }
.cb-panel { position: relative; }
.cb-drop { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center;
  background: color-mix(in srgb, var(--surface) 88%, transparent); border: 2px dashed var(--accent);
  border-radius: 16px; color: var(--accent); font-size: 13px; font-weight: 600; }
.cb-drop span { display: flex; align-items: center; gap: 8px; }

/* ── 3.3.0: rubriken i ärendet ─────────────────────────────────────────── */
/* Höjden var låst till 48 px medan innehållet var tre rader, så raderna la sig över varandra */
.thread-head { height: auto; min-height: 56px; align-items: flex-start; padding-top: 9px; padding-bottom: 9px; }
.thread-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.thread-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.thread-title-row { flex-wrap: nowrap; }
.thread-title-row h2 { font-size: 15px; line-height: 1.25; margin: 0; flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.thread-title-row .ticket, .thread-title-row .badge { flex: none; }
.thread-title-row h2[data-subject-edit] { cursor: text; border-radius: 5px; padding: 1px 4px; margin-left: -4px; }
.thread-title-row h2[data-subject-edit]:hover { background: var(--hover); box-shadow: inset 0 0 0 1px var(--line); }
.thread-meta { display: flex; align-items: center; gap: 7px; min-width: 0; flex-wrap: wrap; }
.thread-meta .thread-chan { font-size: 11.5px; }
.thread-meta .ticket, .thread-meta .badge { flex: none; }
.thread-head { gap: 6px; }
.thread-head > .btn.icon, .thread-head .pop > .btn.icon { width: 28px; }
.subject-edit { display: flex; gap: 6px; align-items: center; margin-top: 2px; }
.subject-edit .input.sm { height: 28px; min-width: 260px; flex: 1; max-width: 520px; }
.thread-head .btn, .thread-head .pop, .thread-head form:not(.subject-edit) { align-self: center; }

/* Snabbsvar och omnämnanden: gemensam meny ovanför skrivfältet */
.mini-menu { position: absolute; z-index: 90; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow-pop); padding: 4px; min-width: 260px; max-width: 380px;
  max-height: 260px; overflow-y: auto; }
.mini-menu button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%;
  padding: 6px 9px; border: 0; background: none; border-radius: 6px; text-align: left; cursor: pointer; font-size: 13px; }
.mini-menu button b { font-weight: 580; }
.mini-menu button small { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.mini-menu button.on, .mini-menu button:hover { background: var(--accent-soft); color: var(--accent); }
.mini-menu button.on small, .mini-menu button:hover small { color: var(--accent); }
.mini-menu .mini-empty { padding: 10px; font-size: 12.5px; color: var(--muted); }
.mini-menu .mini-hint { padding: 5px 9px 6px; font-size: 11px; color: var(--faint); border-top: 1px solid var(--line); margin-top: 2px; }
.rich-input .mention { background: var(--accent-soft); color: var(--accent); border-radius: 4px; padding: 0 3px; font-weight: 560; }

/* Egen stavningskontroll: röd våglinje ritas över texten utan att DOM ändras */
::highlight(bd-spell) { text-decoration: underline wavy #E5484D; text-decoration-skip-ink: none; text-underline-offset: 2px; }
.spell-menu { min-width: 190px; max-width: 260px; }
.spell-menu .mini-hint { padding: 0; margin: 3px 0; border-top: 1px solid var(--line); }
.spell-menu [data-learn] small { color: var(--muted); }

/* ══ 3.4.0: kortbaserad layout i Front-anda ═════════════════════════════
   Varje yta är ett eget kort med egna rundade hörn i stället för ett enda
   stort fält med skiljelinjer.

   VIKTIGT: hela blocket ligger i min-width 761px. Mobilen har en egen layout
   längre ner i filen (bottenmeny, en yta i taget). Ligger reglerna utanför
   mediefrågan vinner de över mobilreglerna, eftersom de står senare i filen –
   det var precis det som slog sönder mobilvyn i 3.4.0. */
:root { --card-r: 14px; --card-gap: 8px; --card-shadow: 0 1px 2px rgba(24,24,27,.05), 0 0 0 1px var(--line); }
:root[data-theme="dark"], :root:not([data-theme="light"]) { --card-shadow: 0 1px 2px rgba(0,0,0,.28), 0 0 0 1px var(--line); }

@media (min-width: 761px) {
  .shell { padding: var(--card-gap); gap: var(--card-gap); background: var(--bg); }

  /* Huvudmenyn som eget kort. OBS: .rail får INTE ha overflow:hidden –
     det klipper av kontomenyn som fälls ut från avataren längst ner. */
  .rail { position: relative; background: var(--surface); border-radius: var(--card-r);
    box-shadow: var(--card-shadow); padding: 8px 0; width: 58px; }
  .rail a.on { background: var(--accent-soft); color: var(--accent); box-shadow: none; }
  .rail a.on::before { content: ""; position: absolute; left: -9px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 16px; border-radius: 0 3px 3px 0; background: var(--accent); }
  .rail .sep { background: var(--line); }

  .main-wrap { display: flex; flex-direction: column; gap: var(--card-gap); min-width: 0; flex: 1; }

  /* Sökraden som eget kort */
  .topbar { height: 44px; border-bottom: 0; border-radius: var(--card-r); box-shadow: var(--card-shadow); padding: 0 10px; flex: none; }

  /* Ramen bär inget eget utseende längre – korten inuti gör jobbet */
  .frame { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; gap: var(--card-gap); }

  /* De fyra ytorna: mappar, lista, meddelanden och detaljer */
  .frame > .side, .frame > .list, .frame > .thread, .frame > .details, .frame > .page, .frame > .tc-side {
    background: var(--surface); border-radius: var(--card-r); box-shadow: var(--card-shadow); border: 0; overflow: hidden; }
  .frame > .side { background: var(--surface); border-right: 0; }
  .frame > .list { border-right: 0; }
  .frame > .details { border-left: 0; background: var(--surface); }
  .frame > .page { flex: 1; min-width: 0; }
  .side-head, .list-head, .thread-head { border-bottom: 1px solid var(--line); }
  .side-head { border-bottom-color: transparent; }

  /* Listraden blir ett eget litet kort i stället för en rad med skiljelinje */
  .list-scroll { padding: 6px; }
  .conv { border-radius: 10px; }
  .conv + .conv { border-top: 0; }
  .conv.on { background: var(--accent-soft); }
}

@media (min-width: 761px) and (max-width: 1060px) {
  .frame > .side { position: fixed; left: 66px; top: 8px; bottom: 8px; }
}

/* ══ 3.4.0: tråden – tydligare skillnad på mejl, svar och interna anteckningar ══ */
.thread-scroll { padding: 16px 20px 22px; background: var(--surface-2); }
.thread-scroll > .msg, .thread-scroll > .day-sep { max-width: 940px; margin-left: auto; margin-right: auto; }

/* Datumavdelare */
.day-sep { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; }
.day-sep::before, .day-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.day-sep span { font-size: 11px; font-weight: 600; color: var(--faint); letter-spacing: .03em;
  text-transform: uppercase; background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 10px; }

/* Meddelandekortet */
.msg { border-radius: 12px; margin-bottom: 7px; position: relative; box-shadow: 0 1px 1px rgba(24,24,27,.03); transition: box-shadow .12s, border-color .12s; }
.msg::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: 12px 0 0 12px; background: var(--line-strong); }
.msg.out::before { background: var(--accent); }
.msg.note::before { background: var(--saffron); }
.msg.folded:hover { border-color: var(--line-strong); }
.msg.open { box-shadow: 0 1px 3px rgba(24,24,27,.07); }
.msg-fold { padding: 10px 13px 10px 15px; gap: 10px; }
.msg-fold b { font-size: 13px; font-weight: 600; }
.msg-fold time { font-size: 11.5px; }
.msg > .body { padding: 2px 15px 13px 16px; }

/* Interna anteckningar: dämpad ton och en tydlig etikett, inte ett helt gult fält */
.msg.note { background: var(--note); border-color: var(--note-line); margin-left: 22px; }
.msg.note .msg-fold:hover { background: color-mix(in srgb, var(--saffron) 10%, transparent); }
.msg.note .badge.saffron { background: var(--saffron); color: #fff; border-color: transparent; font-weight: 600; }

/* Utgående svar: svag accenttonad rubrik så att teamets egna rader syns direkt */
.msg.out .msg-fold { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.msg.out.open .msg-fold { background: color-mix(in srgb, var(--accent) 6%, transparent); }

/* Autosvar och systemrader tonas ned */
.msg .badge { font-size: 10.5px; padding: 1px 7px; }
.msg.system { margin: 10px auto; }

/* Avsändarraden inne i kortet */
.msg .head { padding: 8px 0 2px; font-size: 11.5px; }
.msg .bubble { font-size: 13.8px; line-height: 1.65; }
.msg .atts { display: flex; flex-wrap: wrap; gap: 6px; }

[data-theme="dark"] .msg, :root:not([data-theme="light"]) .msg { box-shadow: none; }
@media (max-width: 760px) { .msg.note { margin-left: 10px; } .thread-scroll { padding: 12px 10px 16px; } }

/* Anteckningen ska kännas intern utan att skrika – tunn ton och dämpad etikett */
.msg.note { background: color-mix(in srgb, var(--saffron) 5%, var(--surface)); border-color: color-mix(in srgb, var(--saffron) 24%, var(--line)); }
.msg.note.open { background: var(--surface); }
.msg.note.open .msg-fold { background: color-mix(in srgb, var(--saffron) 6%, transparent); border-bottom-color: color-mix(in srgb, var(--saffron) 20%, var(--line)); }
.msg.note .badge.saffron { background: color-mix(in srgb, var(--saffron) 13%, var(--surface)); color: var(--saffron);
  border: 1px solid color-mix(in srgb, var(--saffron) 30%, transparent); font-weight: 600; }
.msg.note .msg-fold b { color: var(--ink); }
[data-theme="dark"] .msg.note, :root:not([data-theme="light"]) .msg.note { background: color-mix(in srgb, var(--saffron) 12%, var(--surface)); }
[data-theme="dark"] .msg.note.open, :root:not([data-theme="light"]) .msg.note.open { background: var(--surface); }

/* ══ 3.4.0: inloggningssidan ════════════════════════════════════════════ */
.auth-side { padding: 40px 48px; justify-content: space-between; gap: 26px; }
.auth-side::after { content: ""; position: absolute; right: -140px; top: -120px; width: 420px; height: 420px;
  border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 38%, transparent), transparent 68%); pointer-events: none; }
.auth-side h2 { margin: 26px 0 12px; max-width: 16ch; font-size: 32px; }
.auth-side p { margin: 0 0 22px; }
.auth-side > * { position: relative; z-index: 1; }

.auth-chans { display: flex; flex-wrap: wrap; gap: 6px; margin: -8px 0 26px; }
.auth-chan { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #C9CBE4;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); border-radius: 999px; padding: 4px 10px; }

.auth-feats { display: flex; flex-direction: column; gap: 14px; max-width: 420px; }
.auth-feat { display: flex; gap: 12px; align-items: flex-start; }
.auth-feat-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); color: #fff; }
.auth-feat b { display: block; font-size: 13.5px; font-weight: 600; color: #F1F2FA; margin-bottom: 2px; }
.auth-feat small { display: block; font-size: 12.5px; line-height: 1.5; color: #A6A9C6; }

.auth-foot { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; font-size: 11.5px; color: rgba(255,255,255,.5); }
.auth-foot span { display: inline-flex; align-items: center; gap: 5px; }

.auth-card { max-width: 400px; }
.auth-card .input { height: 42px; }
.auth-secure { display: inline-flex; align-items: center; gap: 5px; color: var(--faint); font-size: 12px; }
@media (max-width: 860px) { .auth-side { display: none; } }
.auth-side-mid { flex: 1; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; }
.auth-side-mid h2 { margin: 0 0 12px; }
.auth-foot { margin-top: 0; }

/* Skrivrutan i "Nytt meddelande" – samma verktyg som i tråden */
.compose-modal { border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); overflow: visible; }
.compose-modal .composer-box { border: 0; box-shadow: none; background: transparent; }
.compose-modal .rich-input { min-height: 140px; max-height: 320px; }
.compose-modal .rich-tools { border-top: 1px solid var(--line); }
.compose-modal .composer-bar { border-top: 1px solid var(--line); padding: 6px 8px; }
.modal-body .field > span { display: block; margin-bottom: 5px; }

/* ══ 3.5.0: mobilen genomgången ════════════════════════════════════════
   Ligger sist i filen med flit: allt som rör mobilen ska vinna över
   skrivbordsreglerna ovanför, oavsett i vilken ordning de skrivits. */
@media (max-width: 760px) {

  /* ── Bottenmenyn ──────────────────────────────────────────────────── */
  .rail {
    position: fixed; inset: auto 0 0 0; width: auto; height: auto;
    flex-direction: row; align-items: stretch; justify-content: space-around;
    padding: 4px 2px calc(4px + env(safe-area-inset-bottom, 0px));
    background: var(--surface); border-top: 1px solid var(--line);
    border-radius: 0; box-shadow: 0 -2px 16px rgba(16,18,28,.06); z-index: 80; gap: 0;
  }
  .rail .ws-switch, .rail .nav-label, .rail .spacer, .rail .sep,
  .rail .nav-toggle, .rail .acct-name, .rail .tip { display: none !important; }
  .rail a.on::before { display: none; }
  .rail > a, .rail > button, .rail > .pop { flex: 1 1 0; min-width: 0; display: flex; }
  .rail > a, .rail > button, .rail > .pop > button {
    flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    width: 100%; height: 54px; border-radius: 12px; padding: 0 2px;
  }
  .rail .lbl { display: block; flex: none; font-size: 10px; line-height: 1.1;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail .i { width: 21px; height: 21px; }
  .rail .avatar { --s: 26px; width: 26px; height: 26px; }
  .rail .nav-num, .rail-badge { position: absolute; top: 3px; right: 22%; }
  .rail .acct-btn .av-wrap { position: relative; }
  .shell { padding: 0 0 calc(62px + env(safe-area-inset-bottom, 0px)); }

  /* Menyer från bottenmenyn fälls upp som ett ark och håller sig inom skärmen */
  .rail .pop-menu {
    position: fixed !important; left: 8px !important; right: 8px !important;
    top: auto !important; bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important; min-width: 0 !important; max-width: none !important;
    max-height: calc(100dvh - 120px); overflow-y: auto; border-radius: 16px; padding: 8px;
  }

  /* Den flytande chattbubblan tas bort – Teamchatt finns i bottenmenyn
     och bubblan la sig annars ovanpå Skicka-knappen. */
  .chat-bubble { display: none !important; }

  /* ── Rubrikraden i ärendet: titel på egen rad, knappar som svepbar rad ─ */
  /* Rad 1: tillbaka + rubrik. Rad 2: knapparna, som får radbrytas.
     (Grid med ett gemensamt område la knapparna ovanpå varandra – därför flex.) */
  .thread-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    padding: 8px 10px; height: auto; min-height: 0; }
  .thread-head > .mob-only { order: 1; flex: none; }
  .thread-head > .thread-title { order: 2; flex: 1 1 auto; min-width: 0; }
  .thread-head > :not(.mob-only):not(.thread-title) { order: 3; flex: none; }
  .thread-head > .btn.icon, .thread-head .pop > .btn.icon { width: 34px; height: 34px; }
  .thread-title-row h2 { font-size: 15px; }
  .thread-meta { font-size: 11px; gap: 6px; }

  /* ── Skrivrutan ───────────────────────────────────────────────────── */
  .composer { padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .composer-bar { flex-wrap: wrap; gap: 5px; }
  .composer-bar .grow { flex-basis: 100%; height: 0; }
  .rich-tools { flex-wrap: wrap; row-gap: 2px; }
  .btn-split { margin-left: auto; }

  /* ── Tabeller och flikar ska svepas, inte spränga sidan ───────────── */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table { min-width: 100%; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { flex: none; white-space: nowrap; }
  .page-inner { padding: 16px 12px 40px; }
  .card-body, .card-head, .card-foot { padding-left: 14px; padding-right: 14px; }

  /* ── Dialoger ─────────────────────────────────────────────────────── */
  dialog.modal { width: calc(100vw - 16px); max-height: calc(100dvh - 24px); border-radius: 16px; }
  .modal-body { max-height: calc(100dvh - 190px); overflow-y: auto; }
  .compose-modal .rich-input { min-height: 110px; }

  /* ── Detaljpanelen som överlägg ───────────────────────────────────── */
  .details.force { position: fixed; inset: 0 0 calc(62px + env(safe-area-inset-bottom, 0px)) 0;
    width: auto; border-radius: 0; z-index: 70; }
}

/* Konto- och adminsidorna saknar arbetsyta: bottenmenyn ska ändå se normal ut */
@media (max-width: 760px) {
  .rail-home { flex: 0 1 auto !important; min-width: 96px; }
  /* Gällde tidigare alla sidor (saknade .rail:has) och tog 72 px från de andra ikonerna */
  .rail:has(.rail-home) > .pop:last-of-type { flex: 0 1 auto !important; min-width: 72px; }
  .rail:has(.rail-home) { justify-content: center; gap: 12px; }
}

/* ══ 3.6.0: Front-uppdelningen ═════════════════════════════════════════
   Grått är navigering, vitt är innehåll.

   Huvudmenyn och mapplistan ligger direkt på den grå bakgrunden utan eget
   kort. Listan med konversationer och själva meddelandena är vita kort.
   Detaljpanelen längst till höger är grå igen, så att blicken dras till
   det vita i mitten. */
@media (min-width: 761px) {
  :root { --rail-w: 54px; }

  /* Något mörkare grått än --bg, annars syns inte skillnaden mot de vita korten */
  .shell { padding: 0; gap: 0; background: #ECEEF3; }
  [data-theme="dark"] .shell { background: var(--bg); }
  /* 4.31.0: Auto följer systemet – förut gällde regeln även Auto i ljust läge, så Ljust och Auto såg olika ut */
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .shell { background: var(--bg); } }

  /* Navigeringen (4.29.2): en egen kolumn från topp till botten, en ton mörkare än mapplistan och med en
     hårfin linje – tre nivåer: ikonmenyn (global) → mapplistan (sektionen) → vita kort (arbetet).
     Tidigare låg den genomskinlig på samma grå som mapplistan och de två såg ut som en enda yta. */
  :root { --rail-bg: #E3E6EC; --rail-line: #D3D7E0; --rail-ink: #5F6472; --rail-hover: rgba(20,24,40,.06); --rail-on: #FFFFFF; --rail-on-shadow: 0 1px 2px rgba(20,24,40,.10), 0 0 0 1px rgba(20,24,40,.04); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --rail-bg: color-mix(in srgb, var(--bg) 40%, #000); --rail-line: rgba(255,255,255,.09); --rail-ink: #9A9FAD; --rail-hover: rgba(255,255,255,.06); --rail-on: rgba(255,255,255,.09); --rail-on-shadow: none; } }
  [data-theme="dark"] { --rail-bg: color-mix(in srgb, var(--bg) 40%, #000); --rail-line: rgba(255,255,255,.09); --rail-ink: #9A9FAD; --rail-hover: rgba(255,255,255,.06); --rail-on: rgba(255,255,255,.09); --rail-on-shadow: none; }
  .rail { background: var(--rail-bg); box-shadow: none; border-radius: 0; border-right: 1px solid var(--rail-line); width: var(--rail-w); padding: 10px 0 8px; }
  .rail > a, .rail > button, .rail > .pop > button { color: var(--rail-ink); }
  .rail a.on { background: var(--rail-on); color: var(--ink); box-shadow: var(--rail-on-shadow); }
  .rail a.on::before { display: none; }
  .rail a:hover, .rail > button:hover, .rail .pop > button:hover { background: var(--rail-hover); color: var(--ink); }
  .rail a.on:hover { background: var(--rail-on); }
  .rail .pdot.on-avatar { border-color: var(--rail-bg); }

  .main-wrap { gap: 0; }
  .topbar { background: transparent; box-shadow: none; border-radius: 0; height: 46px; padding: 0 10px 0 2px; }

  .frame { gap: 0; padding: 0 8px 8px 0; }

  /* Mapplistan: grå som bakgrunden, bara en tunn linje mot det vita */
  .frame > .side {
    background: transparent; box-shadow: none; border-radius: 0; padding-right: 8px;
  }
  .frame > .side .side-head { background: transparent; }
  .side .nav-item.on { background: var(--active); color: var(--ink); }

  /* Innehållet: ett vitt kort för listan och ett för meddelandena */
  .frame > .list, .frame > .thread, .frame > .page, .frame > .tc-side {
    background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(20,24,40,.04);
    border-radius: var(--card-r); overflow: hidden;
  }
  .frame > .list { margin-right: 8px; }
  .frame > .tc-side { margin-right: 8px; }

  /* Detaljpanelen tillbaka på grått */
  .frame > .details {
    background: transparent; border: 0; box-shadow: none; border-radius: 0;
    padding-left: 10px; width: 238px;
  }
  .details section { border-bottom: 1px solid var(--line); }
  .details section:last-child { border-bottom: 0; }

  /* Tråden får en svagt grå läsyta innanför det vita kortet */
  .thread-scroll { background: var(--surface-2); }
  .list-scroll { background: var(--surface); }
}

/* Mörkt läge: samma uppdelning, men det \"grå\" är den mörka bakgrunden */
@media (min-width: 761px) {
  [data-theme="dark"] .frame > .list, [data-theme="dark"] .frame > .thread,
  [data-theme="dark"] .frame > .page, [data-theme="dark"] .frame > .tc-side,
  :root:not([data-theme="light"]) .frame > .list, :root:not([data-theme="light"]) .frame > .thread,
  :root:not([data-theme="light"]) .frame > .page, :root:not([data-theme="light"]) .frame > .tc-side {
    box-shadow: none; border-color: var(--line);
  }
}

/* ══ 3.7.0 ══════════════════════════════════════════════════════════════ */

@media (min-width: 761px) {
  /* Listan och meddelandena är ETT vitt kort med en skiljelinje i mitten,
     inte två kort bredvid varandra. */
  .frame > .list {
    margin-right: 0; border-radius: var(--card-r) 0 0 var(--card-r);
    border-right: 0; box-shadow: none;
  }
  .frame > .thread {
    border-radius: 0 var(--card-r) var(--card-r) 0; border-left: 1px solid var(--line);
    box-shadow: none;
  }
  /* Utan öppet ärende är listan ensam och får hela kortet */
  .frame:not(:has(> .thread)) > .list { border-radius: var(--card-r); }

  /* Mapplistan får inte klippa plusmenyn (.side har overflow:hidden som bas) */
  .frame > .side { overflow: visible; }
  .side-head { overflow: visible; }

  /* Detaljpanelen börjar högre upp */
  .frame > .details { padding-top: 0; }
  .details > section:first-child { padding-top: 2px; }
  .details .contact-card { align-items: flex-start; }
}

/* ── Hopfälld skrivruta ─────────────────────────────────────────────────
   Tråden får mer plats. Ett klick fäller ut hela rutan; är den tom och
   utan bilagor fälls den ihop igen när du klickar någon annanstans. */
.composer-open {
  display: none; width: 100%; align-items: center; gap: 9px;
  padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 10px;
  background: var(--surface); color: var(--muted); font: inherit; font-size: 13.5px;
  text-align: left; cursor: text;
}
.composer-open:hover { border-color: var(--accent-line); background: var(--surface-2); }
.composer-open .i { color: var(--accent); flex: none; }
.composer.collapsed > .composer-open { display: flex; }
.composer.collapsed > form { display: none; }
.composer.collapsed { padding-top: 8px; padding-bottom: 10px; }

/* ══ 3.8.0: mobilen, två rättningar ════════════════════════════════════ */
@media (max-width: 760px) {
  /* Konversationslistan fick bara 296 px: basregeln .list { width: 296px } står
     längre ned i filen än mobilregeln och vann. Samma felmönster som bottenmenyn i 3.5.0. */
  .frame > .list { width: 100%; flex: 1 1 auto; max-width: none; border-radius: 0; border-left: 0; border-right: 0; }

  /* Inställningarna: två kort per rad, mindre och tätare */
  .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hub-card { padding: 12px 12px 11px; border-radius: 12px; box-shadow: none; }
  .hub-card:hover { transform: none; }
  .hub-ico { width: 30px; height: 30px; border-radius: 8px; margin-bottom: 8px; }
  .hub-ico .i { width: 16px; height: 16px; }
  .hub-card b { font-size: 13.5px; line-height: 1.25; }
  .hub-card small { font-size: 11.5px; line-height: 1.4; margin-top: 3px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .hub-meta { margin-top: 7px; font-size: 10.5px; padding: 1px 7px; }
  .hub-card > .i:last-child, .hub-card .hub-arrow { display: none; }
  .hub-group { margin-bottom: 20px; }
  .hub-head h2 { font-size: 14px; }
  .hub-head p { font-size: 12px; margin-bottom: 10px; }
}
/* Riktigt smala skärmar: fortfarande två kolumner, bara ännu tätare */
@media (max-width: 360px) {
  .hub-grid { gap: 8px; }
  .hub-card { padding: 10px; }
  .hub-card small { -webkit-line-clamp: 3; }
}

/* ══ 3.9.0 ══════════════════════════════════════════════════════════════
   Rättning: sidor gick inte att rulla. Kortreglerna från 3.4.0 satte
   overflow:hidden på alla ytor i ramen – även .page och .details, som
   själva ska rulla. .frame > .page vinner på specificitet över .page. */
@media (min-width: 761px) {
  .frame > .page { overflow-x: hidden; overflow-y: auto; }
  .frame > .details { overflow-x: hidden; overflow-y: auto; }
}

/* Ljudval: två rullistor sida vid sida */
.sound-pickers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sound-select { display: flex; gap: 6px; }
.sound-select .input { flex: 1; min-width: 0; }
.sound-select .btn.icon { flex: none; width: 38px; height: 38px; }
.sound-select .btn.icon.playing { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
@media (max-width: 560px) { .sound-pickers { grid-template-columns: 1fr; } }

/* ══ Kalender ═══════════════════════════════════════════════════════════ */
.cal-page { display: flex; flex-direction: column; min-height: 0; overflow: hidden !important; }
.cal-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.cal-nav { display: flex; align-items: center; gap: 4px; min-width: 0; }
.cal-title { font-size: 17px; font-weight: 640; margin: 0 0 0 8px; letter-spacing: -.01em; white-space: nowrap; }
.cal-title::first-letter { text-transform: uppercase; }
.cal-title small { font-size: 12px; font-weight: 500; color: var(--faint); margin-left: 6px; }
.cal-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.cal-tools .seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 2px; }
.cal-tools .seg button { border: 0; background: none; padding: 5px 11px; border-radius: 7px; font: inherit; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.cal-tools .seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(20,24,40,.08); font-weight: 560; }
.cal-mine { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.cal-hint { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 16px; font-size: 12.5px; color: var(--muted);
  border-bottom: 1px solid var(--line); background: var(--surface-2); }
.cal-hint.err { color: var(--red); background: var(--red-soft); }
.cal-body { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.cal-body.loading { opacity: .6; }

/* Tidsrutnät */
.cal-grid { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cal-dayhead, .cal-allday, .cal-times { display: grid; grid-template-columns: 52px repeat(var(--days), minmax(0, 1fr)); }
.cal-dayhead { border-bottom: 1px solid var(--line); }
.cal-dh { border: 0; background: none; padding: 6px 4px 7px; display: flex; flex-direction: column; align-items: center; gap: 1px;
  cursor: pointer; color: var(--muted); font: inherit; border-left: 1px solid var(--line); }
.cal-dh span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.cal-dh b { font-size: 18px; font-weight: 600; color: var(--ink); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; }
.cal-dh.today b { background: var(--accent); color: #fff; }
.cal-dh:hover b { background: var(--hover); }
.cal-dh.today:hover b { background: var(--accent); }
.cal-allday { border-bottom: 1px solid var(--line); }
.cal-allday .cal-gutter small { font-size: 10.5px; color: var(--faint); padding: 6px 6px 0 0; display: block; text-align: right; }
.cal-adcell { border-left: 1px solid var(--line); padding: 3px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-scroll { flex: 1; overflow-y: auto; min-height: 0; }
.cal-times { position: relative; }
.cal-gutter { position: relative; }
.cal-times .cal-gutter span { position: absolute; right: 7px; transform: translateY(-50%); font-size: 10.5px; color: var(--faint); }
.cal-col { position: relative; border-left: 1px solid var(--line); cursor: pointer; }
.cal-col.today { background: color-mix(in srgb, var(--accent) 3%, transparent); }
.cal-slot { position: absolute; left: 0; right: 0; height: 48px; border-top: 1px solid var(--line); }
.cal-slot::after { content: ""; position: absolute; left: 0; right: 0; top: 24px; border-top: 1px dashed color-mix(in srgb, var(--line) 70%, transparent); }
.cal-col:hover .cal-slot { background: transparent; }
.cal-now { position: absolute; left: -1px; right: 0; height: 2px; background: var(--red); z-index: 3; pointer-events: none; }
.cal-now::before { content: ""; position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }

/* Mötesbrickor */
.cal-ev { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 0; min-width: 0; overflow: hidden;
  border: 0; border-left: 3px solid var(--c); border-radius: 6px; padding: 3px 6px; cursor: pointer; font: inherit;
  background: color-mix(in srgb, var(--c) 14%, var(--surface)); color: var(--ink); width: 100%; }
.cal-ev:hover { background: color-mix(in srgb, var(--c) 22%, var(--surface)); }
.cal-ev b { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; line-height: 1.3; }
.cal-ev small { font-size: 11px; color: var(--muted); line-height: 1.25; }
.cal-ev i { font-style: normal; font-size: 10px; color: var(--muted); }
.cal-ev .cal-tk { background: var(--surface); border-radius: 4px; padding: 0 4px; margin-top: 2px; font-weight: 600; }
.cal-ev.ro { border-left-style: dashed; background: var(--surface-2); color: var(--muted); }
.cal-col > .cal-ev { position: absolute; z-index: 2; box-shadow: 0 1px 2px rgba(20,24,40,.08); }

/* Månadsvy */
.cal-month { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(104px, 1fr); }
.cal-mh { position: sticky; top: 0; z-index: 2; background: var(--surface); padding: 7px 8px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--line); height: 30px; }
.cal-mc { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px 4px 6px; display: flex; flex-direction: column; gap: 2px;
  min-width: 0; cursor: pointer; }
.cal-mc:nth-child(7n) { border-right: 0; }
.cal-mc.out { background: var(--surface-2); }
.cal-mc.out .cal-mn { color: var(--faint); }
.cal-mn { align-self: flex-start; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 580; width: 26px; height: 26px;
  border-radius: 50%; cursor: pointer; color: var(--ink); }
.cal-mn:hover { background: var(--hover); }
.cal-mc.today .cal-mn { background: var(--accent); color: #fff; }
.cal-mc .cal-ev { flex-direction: row; gap: 5px; padding: 1px 5px; align-items: baseline; }
.cal-mc .cal-ev small { order: -1; flex: none; }
.cal-mc .cal-ev i { display: none; }
.cal-more { border: 0; background: none; font: inherit; font-size: 11px; color: var(--muted); text-align: left; padding: 1px 5px; cursor: pointer; }
.cal-more:hover { color: var(--accent); }

/* Formuläret */
.cal-modal { width: min(560px, calc(100vw - 16px)); }
.cal-when { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; }
.cal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.cal-people, .cal-guests { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-guests:empty { display: none; }
.cal-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px;
  font-size: 12.5px; cursor: pointer; background: var(--surface); }
.cal-chip input { margin: 0; }
.cal-chip:has(input:checked), .cal-chip.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.cal-chip small { color: var(--green); font-size: 10.5px; }
.cal-chip button { border: 0; background: none; font-size: 15px; line-height: 1; cursor: pointer; color: inherit; padding: 0 0 0 2px; }
.cal-guest-add { display: flex; gap: 6px; margin-top: 6px; }
.cal-guest-add .input { flex: 1; }
.cal-colors { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 4px; }
.cal-colors label { cursor: pointer; }
.cal-colors input { position: absolute; opacity: 0; pointer-events: none; }
.cal-colors span { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px var(--surface); border: 2px solid transparent; }
.cal-colors input:checked + span { border-color: var(--c); }
.cal-link { font-size: 12.5px; padding: 7px 10px; background: var(--surface-2); border-radius: 8px; }
.danger-text { color: var(--red); }

@media (min-width: 761px) { .frame > .page.cal-page { overflow: hidden; } }
@media (max-width: 760px) {
  .cal-head { padding: 10px 12px; gap: 8px; }
  .cal-title { font-size: 15px; margin-left: 4px; }
  .cal-tools { width: 100%; margin-left: 0; justify-content: space-between; }
  .cal-tools .seg button { padding: 5px 9px; }
  .cal-dayhead, .cal-allday, .cal-times { grid-template-columns: 40px repeat(var(--days), minmax(0, 1fr)); }
  .cal-month { grid-auto-rows: minmax(76px, 1fr); }
  .cal-mc .cal-ev small { display: none; }
  .cal-when { grid-template-columns: 1fr 1fr; }
  .cal-when .field:first-child { grid-column: 1 / -1; }
  .cal-row { grid-template-columns: 1fr; }
  .cal-hint .input.sm { width: 100% !important; }
}
.cal-tools .seg { margin: 0; }
.cal-ev { justify-content: flex-start; }
.cal-ev:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Rubriken krymptes till 0 px: flexbarn med overflow:hidden har min-height 0 och
   gav efter först när mötet var för kort. Nu ger tiden och ikonerna efter i stället. */
.cal-ev > b { flex: none; }
.cal-ev > small, .cal-ev > i { flex: 0 1 auto; min-height: 0; overflow: hidden; }
/* Korta möten (under ~40 min): rubrik och tid på samma rad */
.cal-ev.short { flex-direction: row; gap: 4px; align-items: baseline; }
.cal-ev.short > b { flex: 1 1 auto; min-width: 0; }
.cal-ev.short > small { flex: none; }
.cal-ev.short > i { display: none; }
/* Smala korta möten: rubriken får företräde, tiden ger efter först */
.cal-ev.short > b { flex: 0 1 auto; min-width: 14px; }
.cal-ev.short > small { flex: 0 100 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
.cal-col > .cal-ev { container-type: inline-size; }
@container (max-width: 80px) { .cal-ev.short > small { display: none; } }

/* Sju platser i bottenmenyn: kontot tar bara avatarens bredd och de långa
   etiketterna får en kortare form på mobil (Teamchatt → Chatt, Inställningar → Mer). */
@media (max-width: 760px) {
  .rail:not(:has(.rail-home)) > .pop:last-of-type { flex: 0 0 44px; min-width: 0; }
  .rail .lbl[data-short] { font-size: 0; }
  .rail .lbl[data-short]::after { content: attr(data-short); font-size: 10px; }
}
/* Veckodagarna är första raden i samma rutnät – utan egen höjd ärvde de dagarnas
   minsta höjd och lämnade ett tomt band ovanför första veckan. */
.cal-month { grid-template-rows: 30px; }
.cal-mh { height: auto; }

/* ══ Integrationer ═════════════════════════════════════════════════════ */
.integ-card .card-head { align-items: flex-start; }
.integ-title { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.integ-logo { flex: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); display: grid; place-items: center; background: #fff; }
.integ-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.integ-status > div { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; min-width: 0; }
.integ-status small { display: block; font-size: 11px; color: var(--muted); }
.integ-status b { font-size: 13.5px; font-weight: 580; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.integ-connect { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.btn-google { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 12px; border-radius: 8px;
  background: #fff; border: 1px solid #DADCE0; color: #3C4043; font: 500 14px/1 Roboto, -apple-system, "Segoe UI", Arial, sans-serif; text-decoration: none; }
.btn-google:hover { background: #F8FAFF; border-color: #C6D5F8; box-shadow: 0 1px 2px rgba(60,64,67,.15); }
.integ-more { display: flex; align-items: center; gap: 8px; padding: 12px 16px; margin: 0 0 16px; border: 1px dashed var(--line-strong);
  border-radius: 12px; color: var(--muted); font-size: 13px; }
.integ-app > summary { cursor: pointer; list-style: none; }
.integ-app > summary::-webkit-details-marker { display: none; }
.integ-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.55; }
.integ-copy { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.integ-copy code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font-size: 12px; word-break: break-all; }
.badge.green { background: var(--green-soft); color: var(--green); border-color: transparent; display: inline-flex; align-items: center; gap: 4px; }

/* Dra och släpp i kalendern */
.cal-ev { touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.cal-ev:not(.ro) { cursor: grab; }
.cal-ev.dragging { cursor: grabbing; z-index: 20 !important; opacity: .92; box-shadow: 0 8px 22px rgba(20,24,40,.22) !important; outline: 2px solid var(--c); }
.cal-ev.dragging::after { content: attr(data-tip); position: absolute; left: 4px; bottom: calc(100% + 4px); white-space: nowrap;
  background: var(--ink); color: var(--surface); font-size: 11px; font-weight: 600; padding: 3px 7px; border-radius: 6px; pointer-events: none; }
.cal-mc .cal-ev.dragging::after, .cal-adcell .cal-ev.dragging::after { bottom: auto; top: calc(100% + 4px); }
body.cal-dragging, body.cal-dragging * { cursor: grabbing !important; }
.drop-target { background: color-mix(in srgb, var(--accent) 7%, transparent) !important; }
.cal-mc.drop-target { box-shadow: inset 0 0 0 2px var(--accent-line); }
.cal-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; }
.cal-resize::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 16px; height: 2px; margin-left: -8px; border-radius: 2px;
  background: color-mix(in srgb, var(--c) 60%, transparent); opacity: 0; transition: opacity .12s; }
.cal-ev:hover .cal-resize::after { opacity: 1; }
.cal-ev.dragging .cal-resize { display: none; }
.cal-adcell { position: relative; }
.cal-mc { position: relative; }
.integ-more { margin: 14px 0 16px; }

/* ══ Integrationer som kort ════════════════════════════════════════════ */
.integ-section { margin-bottom: 26px; }
.integ-h { font-size: 12px; font-weight: 620; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 10px; }
.integ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.integ-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
  padding: 16px 16px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font: inherit; color: var(--ink);
  min-height: 176px; box-shadow: 0 1px 2px rgba(20,24,40,.04); transition: border-color .15s, box-shadow .15s, transform .15s; }
button.integ-tile { cursor: pointer; }
button.integ-tile:hover { border-color: var(--accent-line); box-shadow: 0 6px 20px rgba(20,24,40,.08); transform: translateY(-1px); }
button.integ-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.integ-tile-top { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; margin-bottom: 8px; }
.integ-tile b { font-size: 14.5px; font-weight: 620; }
.integ-tile small { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.integ-cat { margin-top: auto; padding-top: 8px; font-size: 11px; color: var(--faint); }

.integ-logo { width: var(--s, 44px); height: var(--s, 44px); border-radius: calc(var(--s, 44px) * .26); flex: none; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line); overflow: hidden; }
.integ-logo img { width: 72%; height: 72%; object-fit: contain; }
.integ-logo.mono { background: color-mix(in srgb, var(--c) 12%, var(--surface)); border-color: color-mix(in srgb, var(--c) 22%, transparent);
  color: var(--c); font-weight: 700; font-size: calc(var(--s, 44px) * .36); letter-spacing: -.02em; }

.integ-state { font-size: 11.5px; font-weight: 580; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 3px 9px;
  display: inline-flex; align-items: center; gap: 5px; }
.integ-state.on { color: var(--green); background: var(--green-soft); }
.integ-state.on i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.integ-state.soon { color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); }

/* Kommande: dämpade och inte klickbara */
.integ-tile.soon { background: var(--surface-2); box-shadow: none; cursor: default; }
.integ-tile.soon .integ-logo { filter: grayscale(1); opacity: .55; }
.integ-tile.soon b, .integ-tile.soon small, .integ-tile.soon .integ-cat { opacity: .6; }
.integ-foot { margin-top: 12px; }

/* Rutan för en integration */
.integ-modal { width: min(560px, calc(100vw - 16px)); }
.integ-modal-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.integ-modal-title h3 { margin: 0; }
.integ-modal-title small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 1px; }
.integ-lead { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.55; }
.integ-cta { height: 40px; padding: 0 16px; }
.integ-perms { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--muted); }
.integ-perms li { display: flex; align-items: center; gap: 8px; }
.integ-perms .i { color: var(--green); flex: none; }
.integ-adv { border-top: 1px solid var(--line); padding-top: 12px; }
.integ-adv > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 580; color: var(--ink-2); list-style: none; }
.integ-adv > summary::-webkit-details-marker { display: none; }
.integ-adv > summary::after { content: "›"; margin-left: auto; font-size: 18px; color: var(--faint); transition: transform .15s; }
.integ-adv[open] > summary::after { transform: rotate(90deg); }
.integ-adv .badge { font-size: 10.5px; }
dialog.integ-modal::backdrop { backdrop-filter: blur(4px); background: rgba(15,18,28,.42); }

@media (max-width: 560px) {
  .integ-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .integ-tile { min-height: 150px; padding: 12px; }
  .integ-tile small { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 11.5px; }
  .integ-logo { --s: 36px !important; }
}
.integ-modal .modal-head { justify-content: space-between; } .integ-modal-title { flex: 1; }
.integ-modal .integ-status { grid-template-columns: 1fr 1fr; }

/* Radera ska synas – röd ikon, röd platta vid hovring */
.btn.btn-delete { color: var(--red); }
.btn.btn-delete:hover { background: var(--red-soft); color: var(--red); border-color: color-mix(in srgb, var(--red) 30%, transparent); }
.thread-head .btn.btn-delete { border-color: color-mix(in srgb, var(--red) 28%, var(--line)); }
/* Under markering visar kortet att ett klick markerar */
.list.selecting .conv { cursor: pointer; }
.list.selecting .conv:not(.selected):hover { box-shadow: inset 0 0 0 1px var(--accent-line); }
/* Starkare väljare – .bulk-bar .btn och .btn.ghost vann annars och gjorde ikonen grå */
.btn.ghost.btn-delete, .bulk-bar .btn.btn-delete, .thread-head .btn.ghost.btn-delete { color: var(--red); }
.btn.ghost.btn-delete:hover, .bulk-bar .btn.btn-delete:hover { background: var(--red-soft); color: var(--red); }

/* ══ Hjälpcenter ═══════════════════════════════════════════════════════ */
.hc-top { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.hc-title { min-width: 0; flex: 1; }
.hc-switch > .btn { font-size: 20px; height: auto; padding: 4px 8px 4px 6px; margin-left: -6px; gap: 8px; }
.hc-switch > .btn b { font-weight: 680; letter-spacing: -.015em; }
.hc-switch .pop-menu a.on { background: var(--active); }
.hc-sub { margin: 4px 0 0; font-size: 12.5px; }
.hc-actions { display: flex; gap: 8px; align-items: center; }
.hc-search { display: flex; align-items: center; gap: 8px; max-width: 360px; margin-bottom: 12px; position: relative; }
.hc-search > .i { position: absolute; left: 11px; color: var(--faint); }
.hc-search .input { padding-left: 34px; height: 36px; background: var(--surface-2); }

.hc-table { border-top: 1px solid var(--line); }
.hc-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 190px 150px 56px; align-items: center; gap: 12px;
  padding: 9px 10px 9px calc(10px + var(--d, 0) * 30px); border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 13px; }
.hc-headrow { font-size: 11.5px; font-weight: 600; color: var(--muted); padding-top: 10px; padding-bottom: 10px; }
.hc-headrow > span:last-child, .hc-views { text-align: right; color: var(--muted); }
a.hc-row:hover, summary.hc-row:hover { background: var(--surface-2); }
.hc-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hc-name b { font-weight: 580; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-name small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.hc-name > span:last-child { min-width: 0; }
.hc-doc { width: 26px; height: 26px; flex: none; border: 1px solid var(--line); border-radius: 7px; display: grid; place-items: center; color: var(--muted); background: var(--surface); }
.hc-icon { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; font-size: 16px; }
.hc-icon.sm { width: 28px; height: 28px; font-size: 13px; }
.hc-chev { width: 16px; flex: none; color: var(--muted); display: grid; place-items: center; transition: transform .15s; }
.hc-cat[open] > summary .hc-chev { transform: rotate(90deg); }
.hc-cat > summary { list-style: none; cursor: pointer; grid-template-columns: minmax(0, 1fr) auto; }
.hc-cat > summary::-webkit-details-marker { display: none; }
.hc-cat-tools { display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.hc-cat > summary:hover .hc-cat-tools, .hc-cat > summary:focus-within .hc-cat-tools { opacity: 1; }
.hc-ai { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); flex: none; }
.hc-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.hc-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.hc-status.published i { background: var(--green); }
.hc-status.pill { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); vertical-align: middle; margin-left: 8px; }
.hc-status.pill.published { background: var(--green-soft); color: var(--green); }
.hc-editor { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--ink-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hc-editor .avatar { font-size: 9px; flex: none; }
.hc-date { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.hc-empty { padding: 40px 10px; text-align: center; color: var(--muted); }
.hc-none { grid-template-columns: 1fr; }
.hc-emojis { display: flex; flex-wrap: wrap; gap: 4px; margin-top: -4px; }
.hc-emojis button { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; width: 34px; height: 34px; font-size: 16px; cursor: pointer; }
.hc-emojis button:hover { background: var(--hover); }

/* Redigeraren */
.hc-ed-top { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.hc-ed-title { flex: 1; min-width: 0; }
.hc-crumbs { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; flex-wrap: wrap; }
.hc-crumbs a { color: var(--muted); text-decoration: none; }
.hc-crumbs a:hover { color: var(--accent); }
.hc-crumbs span { color: var(--ink-2); }
.hc-ed-title h1 { margin: 0; font-size: 20px; letter-spacing: -.015em; }
.hc-ed-actions { display: flex; gap: 8px; align-items: center; }
.hc-ed-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
.hc-ed-card { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); display: flex; flex-direction: column; min-height: 520px; box-shadow: 0 1px 2px rgba(20,24,40,.04); }
.hc-ed-h { border: 0; outline: 0; background: transparent; font: inherit; font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25;
  padding: 24px 26px 6px; color: var(--ink); width: 100%; }
.hc-ed-h::placeholder { color: var(--faint); }
.hc-ed-body { flex: 1; padding: 6px 26px 20px; }
.hc-rich { border: 0 !important; box-shadow: none !important; padding: 0 !important; min-height: 320px; font-size: 14.5px; line-height: 1.7; background: transparent; }
.hc-rich:empty::before { content: attr(data-placeholder); color: var(--faint); }
.hc-rich h2 { font-size: 19px; margin: 18px 0 6px; } .hc-rich h3 { font-size: 16px; margin: 14px 0 4px; }
.hc-rich blockquote { border-left: 3px solid var(--line-strong); margin: 10px 0; padding: 2px 12px; color: var(--ink-2); }
.hc-rich a { color: var(--accent); }
.hc-ed-tools { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 8px 12px; border-top: 1px solid var(--line); position: sticky; bottom: 0; background: var(--surface); border-radius: 0 0 14px 14px; }
.hc-ed-tools button { border: 0; background: none; min-width: 30px; height: 30px; border-radius: 7px; cursor: pointer; color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; }
.hc-ed-tools button:hover { background: var(--hover); }
.hc-ed-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 10px; }
.hc-kw { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.hc-kw .input { flex: 1; min-width: 140px; }
.hc-kw-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 3px 4px 3px 10px; font-size: 12px; font-weight: 560; }
.hc-kw-chip button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; width: 18px; height: 18px; border-radius: 50%; }
.hc-kw-chip button:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.hc-meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: 12.5px; padding-top: 12px; border-top: 1px solid var(--line); }
.hc-meta dt { color: var(--muted); } .hc-meta dd { margin: 0; }

@media (max-width: 900px) {
  .hc-row { grid-template-columns: minmax(0, 1fr) 96px; }
  .hc-row > .hc-editor, .hc-row > .hc-date, .hc-row > .hc-views, .hc-headrow > span:nth-child(n+3) { display: none; }
  .hc-ed-grid { grid-template-columns: 1fr; }
  .hc-ed-side { position: static; }
  .hc-ed-h { font-size: 21px; padding: 18px 16px 4px; } .hc-ed-body { padding: 4px 16px 16px; }
  .hc-cat-tools { opacity: 1; }
}

/* Brödsmulor i inställningarna */
.page-crumbs { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin: -6px 0 12px; }
.page-crumbs a { color: var(--muted); text-decoration: none; padding: 2px 4px; margin: 0 -4px; border-radius: 5px; }
.page-crumbs a:hover { color: var(--accent); background: var(--accent-soft); }
.page-crumbs span[aria-current] { color: var(--ink-2); font-weight: 560; }
.page-crumbs .i { color: var(--faint); flex: none; }
.hc-page .page-crumbs { margin-bottom: 8px; }
/* Hjälpcentrets rubrikrad på mobil: rubriken överst, knapparna under i full bredd.
   Utan detta pressades rubriken till ~140 px och växlaren låg över AI-knappen. */
@media (max-width: 760px) {
  .hc-top { flex-direction: column; align-items: stretch; gap: 10px; }
  .hc-title { flex: none; }
  .hc-switch > .btn { font-size: 18px; max-width: 100%; }
  .hc-switch > .btn b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hc-actions { width: 100%; }
  .hc-actions > .btn { flex: 1; justify-content: center; }
  .hc-actions > .btn-split { flex: 1; }
  .hc-actions > .btn-split > .btn:first-child { flex: 1; justify-content: center; }
  .hc-search { max-width: none; }
  .hc-ed-top { flex-direction: column; align-items: stretch; }
  .hc-ed-actions { justify-content: flex-end; flex-wrap: wrap; }
}

/* Högerklicksmeny på konversationer */
.ctx-menu { position: fixed; z-index: 400; min-width: 230px; padding: 5px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(15,18,28,.18), 0 2px 6px rgba(15,18,28,.08); }
.ctx-menu button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; font: inherit; font-size: 13px;
  color: var(--ink); padding: 7px 10px; border-radius: 7px; cursor: pointer; text-align: left; }
.ctx-menu button .i { color: var(--muted); flex: none; }
.ctx-menu button:hover, .ctx-menu button:focus-visible { background: var(--hover); outline: 0; }
.ctx-menu button.danger { color: var(--red); }
.ctx-menu button.danger .i { color: var(--red); }
.ctx-menu button.danger:hover, .ctx-menu button.danger:focus-visible { background: var(--red-soft); }
.ctx-menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 2px; }
.ctx-head { font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 5px 10px 4px; }
.conv.ctx-on { box-shadow: inset 0 0 0 2px var(--accent-line); }

/* ══ Ikonbiblioteket ═══════════════════════════════════════════════════ */
.lib-ico { flex: none; display: inline-block; vertical-align: middle; }
.lib-ico.emoji { font-size: 1.05em; line-height: 1; }
.hc-icon { color: var(--ink-2); }
.icon-field { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 8px 0 10px; border: 1px solid var(--line-strong);
  border-radius: 9px; background: var(--surface); cursor: pointer; color: var(--ink); }
.icon-field:hover { border-color: var(--accent-line); background: var(--surface-2); }
.icon-field .if-prev { display: grid; place-items: center; min-width: 22px; font-size: 18px; }
.icon-field > .i { color: var(--muted); }
.icon-picker { position: fixed; z-index: 500; width: 332px; max-width: calc(100vw - 16px); background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 16px 40px rgba(15,18,28,.18), 0 2px 6px rgba(15,18,28,.06); display: flex; flex-direction: column; overflow: hidden; }
.ip-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px 6px; font-size: 13px; }
.ip-none { border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.ip-none:hover { background: var(--hover); color: var(--ink); }
.ip-search { padding: 0 12px 8px; border-bottom: 1px solid var(--line); }
.ip-search input { width: 100%; height: 34px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 13px; background: var(--surface-2); color: var(--ink); }
.ip-body { max-height: 340px; overflow-y: auto; padding: 6px 10px 12px; overscroll-behavior: contain; }
.ip-label { font-size: 11.5px; font-weight: 620; color: var(--muted); padding: 10px 4px 6px; }
.ip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 2px; }
.ip-cell { height: 38px; border: 0; background: none; border-radius: 8px; display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.ip-cell:hover { background: var(--hover); }
.ip-cell.on { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-line); }
.ip-loading { padding: 30px 10px; text-align: center; color: var(--muted); font-size: 13px; }

/* ══ Mejl i full bredd ═════════════════════════════════════════════════
   Ingen ram runt mejlet och ingen egen rullning – mejlet får hela bredden och
   hela sin höjd, som i ett e-postprogram. */
.bubble.html.mail-full { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
  max-width: none !important; width: 100%; border-radius: 10px; overflow: hidden; }
.bubble.html.mail-full iframe { display: block; width: 100%; border: 0; min-height: 60px; background: #fff; border-radius: 10px;
  box-shadow: 0 0 0 1px var(--line); }
:root:not([data-theme="light"]) .bubble.html.mail-full iframe, [data-theme="dark"] .bubble.html.mail-full iframe { box-shadow: 0 0 0 1px #2A2A31; }
.msg .head { display: flex; align-items: center; gap: 8px; }
.mail-look { margin-left: auto; display: inline-flex; align-items: center; gap: 0; padding: 2px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-2); cursor: pointer; color: var(--muted); }
.mail-look .i { width: 22px; height: 18px; padding: 2px 4px; border-radius: 999px; }
.mail-look:not(.is-dark) .i:first-child, .mail-look.is-dark .i:last-child { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
/* Mejlet ska få ta plats – smalare indrag i trådens kort när det är HTML */
@media (max-width: 760px) { .bubble.html.mail-full iframe { border-radius: 8px; } }

/* Inkommande HTML-mejl utan eget kort runt – mejlet självt är ytan, som i Outlook.
   Rubrikraden (avsändare, tid) står kvar ovanför. */
.msg.in.open:has(.mail-full) { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.msg.in.open:has(.mail-full)::before { display: none !important; }
.msg.in.open:has(.mail-full) > .msg-fold { border-bottom: 0 !important; background: transparent !important; padding-left: 4px; }
.msg.in.open:has(.mail-full) > .body { padding: 0 0 6px !important; }
.msg.in.open:has(.mail-full) .head { padding: 0 4px 8px; }
.msg.in.open:has(.mail-full) { border-left: 0 !important; }

/* Avsändarens logotyp i avatarens plats */
.avatar.has-logo { position: relative; overflow: hidden; }
.avatar .sender-logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 12%; border-radius: inherit; opacity: 0; transition: opacity .15s; }
.avatar.logo-ok .sender-logo { opacity: 1; }
.avatar.logo-ok { box-shadow: inset 0 0 0 1px var(--line); }
.avatar .sender-logo.small { padding: 22%; image-rendering: auto; }

/* ══ Mitt konto: två kolumner ══════════════════════════════════════════ */
.acct-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.acct-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.acct-col > .card { margin: 0; }
.acct-photo { display: flex; align-items: center; gap: 16px; }
.acct-photo-img .avatar { font-size: 24px; }
.acct-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.req { color: var(--red); font-weight: 600; }
.avatar.has-photo { overflow: hidden; padding: 0; }
.avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 980px) { .acct-grid { grid-template-columns: 1fr; } .acct-two { grid-template-columns: 1fr; } }

/* Gul rad överst medan gamla mejl hämtas */
.import-bar { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 350; display: flex; align-items: center; gap: 10px;
  margin-top: 8px; padding: 8px 14px; max-width: min(760px, calc(100vw - 24px)); background: #FEF3C7; color: #713F12; border: 1px solid #F5D98B;
  border-radius: 12px; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.import-bar.done { background: #DCFCE7; color: #14532D; border-color: #A7E3BD; }
.import-bar .ib-text { min-width: 0; }
.import-bar .ib-track { width: 120px; height: 6px; border-radius: 99px; background: rgba(113,63,18,.15); overflow: hidden; flex: none; }
.import-bar .ib-fill { display: block; height: 100%; background: #D97706; border-radius: 99px; transition: width .6s ease; }
.import-bar.done .ib-fill { background: #16A34A; }
.import-bar .ib-pct { font-variant-numeric: tabular-nums; font-weight: 600; flex: none; }
.import-bar .ib-spin { width: 14px; height: 14px; border: 2px solid rgba(113,63,18,.25); border-top-color: #B45309; border-radius: 50%; animation: ibspin .8s linear infinite; flex: none; }
.import-bar.done .ib-spin { animation: none; border-color: #16A34A; }
@keyframes ibspin { to { transform: rotate(360deg); } }
@media (max-width: 760px) { .import-bar { top: auto; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); margin: 0; flex-wrap: wrap; } .import-bar .ib-track { flex: 1; } }
.search-head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); padding: 8px 12px 6px; }
form.list-search.searching .input { background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 12%, transparent), transparent); background-size: 200% 100%; animation: srch 1s linear infinite; }
@keyframes srch { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ══ Tråden som i ett e-postprogram ════════════════════════════════════
   Alla meddelanden under varandra i full bredd – inga pratbubblor till höger
   och vänster, inga kort i kort. Inkommande, egna svar och anteckningar skiljs
   bara åt av ett tunt märke i kanten och etiketten. */
.thread-scroll.is-mail .msg, .thread-scroll.is-mail .msg.in, .thread-scroll.is-mail .msg.out, .thread-scroll.is-mail .msg.note {
  flex-direction: column !important; margin: 0 !important; max-width: none !important; width: 100% !important;
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  border-bottom: 1px solid var(--line) !important; padding: 0 !important; position: relative; }
.thread-scroll.is-mail .msg::before { display: none !important; }
.thread-scroll.is-mail .msg.note { box-shadow: inset 3px 0 0 var(--saffron) !important; }
.thread-scroll.is-mail .msg.out { box-shadow: inset 3px 0 0 var(--accent) !important; }
.thread-scroll.is-mail .msg > .msg-fold { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 12px 14px !important; width: 100%; }
.thread-scroll.is-mail .msg > .msg-fold:hover { background: var(--hover) !important; }
.thread-scroll.is-mail .msg.open > .msg-fold { padding-bottom: 6px !important; }
.thread-scroll.is-mail .msg > .body { padding: 0 14px 16px 52px !important; align-items: stretch !important; }
/* Bara det öppna meddelandet visar sin text. (3.14 satte display:block på alla – då var varje svar i tråden utfällt.) */
.thread-scroll.is-mail .msg.open > .body { display: block !important; }
.thread-scroll.is-mail .msg.folded > .body { display: none !important; }
.thread-scroll.is-mail .msg.out .head, .thread-scroll.is-mail .msg .head { flex-direction: row !important; }
.thread-scroll.is-mail .msg.out .delivery, .thread-scroll.is-mail .msg.out .atts { justify-content: flex-start !important; }
/* Text utan bubbla: läses som ett mejl */
.thread-scroll.is-mail .msg .bubble:not(.mail-full) { background: transparent !important; border: 0 !important; border-radius: 0 !important;
  padding: 0 !important; max-width: none !important; box-shadow: none !important; font-size: 14px; line-height: 1.65; }
.thread-scroll.is-mail .msg .bubble.mail-full iframe { border-radius: 8px; }
.thread-scroll.is-mail .msg.in.open:has(.mail-full) > .body { padding: 0 14px 16px 52px !important; }
.thread-scroll.is-mail .day-sep { margin: 14px 0 4px; }
/* Mörkt läge: mejlet ska aldrig lysa vitt medan det laddar */
:root:not([data-theme="light"]) .bubble.html.mail-full iframe, [data-theme="dark"] .bubble.html.mail-full iframe { background: #141414; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .bubble.html.mail-full iframe { background: #fff; } }
@media (max-width: 760px) { .thread-scroll.is-mail .msg > .body, .thread-scroll.is-mail .msg.in.open:has(.mail-full) > .body { padding: 0 10px 14px 10px !important; } }
/* Ingen ram alls runt mejlet – det är en del av tråden */
.thread-scroll.is-mail .bubble.html.mail-full, .thread-scroll.is-mail .bubble.html.mail-full iframe { box-shadow: none !important; border: 0 !important; border-radius: 0 !important; }
:root:not([data-theme="light"]) .thread-scroll.is-mail .bubble.html.mail-full iframe, [data-theme="dark"] .thread-scroll.is-mail .bubble.html.mail-full iframe { background: transparent; }
.thread-scroll.is-mail [data-show-html] { background: none !important; border: 0 !important; padding: 2px 0 !important; height: auto !important; font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; margin-top: 6px !important; }
.thread-scroll.is-mail [data-show-html]:hover { color: var(--accent); }
.vis-warn { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; line-height: 1.45; color: #92400E; background: #FEF3C7; border: 1px solid #F5D98B; border-radius: 8px; padding: 6px 9px; margin: 8px 0 0; }
.vis-warn .i { flex: none; margin-top: 1px; }
:root:not([data-theme="light"]) .vis-warn, [data-theme="dark"] .vis-warn { color: #FCD34D; background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.35); }

/* ══ Tråden – 3.14.2 ══════════════════════════════════════════════════════
   Hopfällda meddelanden är tonade rader. Det öppna meddelandet har ingen egen
   bakgrund och mejlet tar hela bredden. Riktningen syns som en liten etikett. */
.thread-scroll.is-mail .msg, .thread-scroll.is-mail .msg.in, .thread-scroll.is-mail .msg.out { box-shadow: none !important; }
.thread-scroll.is-mail .msg.note { box-shadow: inset 3px 0 0 var(--saffron) !important; }
.thread-scroll.is-mail .msg.folded { background: color-mix(in srgb, var(--ink) 4.5%, transparent) !important; border: 0 !important;
  border-radius: 10px !important; margin: 6px 0 !important; }
.thread-scroll.is-mail .msg.folded:hover { background: color-mix(in srgb, var(--ink) 7.5%, transparent) !important; }
.thread-scroll.is-mail .msg.folded > .msg-fold:hover { background: transparent !important; }
.thread-scroll.is-mail .msg.open { border-bottom: 0 !important; margin-top: 8px !important; }
.thread-scroll.is-mail .msg > .body, .thread-scroll.is-mail .msg.in.open:has(.mail-full) > .body { padding: 0 14px 18px 14px !important; }
.thread-scroll.is-mail .msg .head { padding: 0 0 6px !important; }
.thread-scroll.is-mail .bubble.html.mail-full iframe, .thread-scroll.is-mail .bubble.html.mail-full { background: transparent !important; }
.dir-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
  padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); flex: none; }
.dir-chip.out { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.dir-chip .i { width: 11px; height: 11px; }
.mail-look { display: none !important; }

/* ══ Aviseringar (toasts) ══════════════════════════════════════════════
   Datorn: nere till höger. Mobil: nere i full bredd, ovanför bottenmenyn. */
.bd-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 600; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; }
.bd-toast { pointer-events: auto; position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start;
  width: 360px; max-width: calc(100vw - 32px); padding: 12px 12px 14px 14px; border-radius: 14px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(15,18,28,.16), 0 2px 6px rgba(15,18,28,.06); animation: btIn .22s cubic-bezier(.2,.9,.3,1.2); }
.bd-toast.out { animation: btOut .2s ease-in forwards; }
.bd-toast .bt-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.bd-toast.success .bt-ico { background: var(--green-soft); color: var(--green); }
.bd-toast.error .bt-ico { background: var(--red-soft); color: var(--red); }
.bd-toast.warning .bt-ico { background: #FEF3C7; color: #B45309; }
.bd-toast.info .bt-ico { background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue); }
.bd-toast .bt-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
.bd-toast .bt-body b { font-size: 13px; font-weight: 640; }
.bd-toast .bt-msg { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bd-toast .bt-x { border: 0; background: none; color: var(--faint); font-size: 18px; line-height: 1; width: 24px; height: 24px; border-radius: 6px; cursor: pointer; margin: -2px -2px 0 0; }
.bd-toast .bt-x:hover { background: var(--hover); color: var(--ink); }
.bd-toast .bt-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left; animation: btBar linear forwards; opacity: .55; }
.bd-toast.success .bt-bar { background: var(--green); } .bd-toast.error .bt-bar { background: var(--red); }
.bd-toast.warning .bt-bar { background: #D97706; } .bd-toast.info .bt-bar { background: var(--blue); }
:root:not([data-theme="light"]) .bd-toast.warning .bt-ico, [data-theme="dark"] .bd-toast.warning .bt-ico { background: rgba(245,158,11,.15); color: #FBBF24; }
@keyframes btIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes btOut { to { opacity: 0; transform: translateX(24px); } }
@keyframes btBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.toast-wrap { display: none !important; }   /* den gamla varianten */
@media (max-width: 760px) {
  .bd-toasts { left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); align-items: stretch; }
  .bd-toast { width: auto; max-width: none; }
  @keyframes btOut { to { opacity: 0; transform: translateY(12px); } }
}


/* ══ 3.15: det öppna mejlet i ett kort ════════════════════════════════════
   E-postkanaler: det senaste (öppna) meddelandet ligger i ett kort med rundade
   hörn – vitt i ljust läge, mörkt i mörkt. Mejlets bakgrund matchas mot kortet
   av app.js, så att ingen ram syns inne i kortet. */
.thread-scroll.is-mail .msg.open { background: var(--surface) !important; border: 1px solid var(--line) !important;
  border-radius: 14px !important; box-shadow: 0 1px 3px rgba(20,24,40,.05) !important; margin: 10px 0 6px !important; padding-top: 2px !important; overflow: hidden; }
.thread-scroll.is-mail .msg.open.note { box-shadow: inset 3px 0 0 var(--saffron), 0 1px 3px rgba(20,24,40,.05) !important; }
/* Mörkt kort – bara i mörkt läge (utan media-villkoret gällde regeln även i ljust läge) och helt ogenomskinligt */
[data-theme="dark"] .thread-scroll.is-mail .msg.open { background: color-mix(in srgb, var(--surface), #fff 4%) !important; border-color: var(--line-strong) !important; box-shadow: none !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .thread-scroll.is-mail .msg.open { background: color-mix(in srgb, var(--surface), #fff 4%) !important; border-color: var(--line-strong) !important; box-shadow: none !important; } }
.thread-scroll.is-mail .msg.open > .msg-fold { padding: 14px 18px 6px !important; }
.thread-scroll.is-mail .msg.open > .body { padding: 0 18px 18px 18px !important; }

/* ══ 3.15: chattkanaler som chatt ═════════════════════════════════════════
   SMS, webbchatt, WhatsApp, Messenger och Instagram visas som bubblor – kunden
   till vänster, ni till höger – precis som i en chattapp. Alla meddelanden syns. */
/* En äldre regel gav meddelandena display:block – då centrerades inkommande och utgående hamnade till vänster */
.thread-scroll.is-chat .msg { display: flex !important; flex-direction: column !important; width: fit-content !important; max-width: 78% !important;
  margin: 0 auto 10px 0 !important; align-items: flex-start; }
.thread-scroll.is-chat .msg.out { margin: 0 0 10px auto !important; align-items: flex-end; }
.thread-scroll.is-chat .msg.note { margin: 0 auto 10px !important; align-items: center; }
.thread-scroll.is-chat .msg > .body { padding: 0 !important; align-items: inherit !important; }
.thread-scroll.is-chat .msg > .msg-fold { display: none; }
.thread-scroll.is-chat .msg > .body { display: flex !important; flex-direction: column; }
.thread-scroll.is-chat .msg .chat-meta { display: flex; gap: 6px; align-items: baseline; font-size: 11px; color: var(--muted); margin: 0 4px 3px; }
.thread-scroll.is-chat .msg .chat-meta b { color: var(--ink-2); font-weight: 600; }
.thread-scroll.is-chat .msg.out .chat-meta { justify-content: flex-end; }
.thread-scroll.is-chat .msg .bubble { border-radius: 16px; padding: 9px 13px; line-height: 1.5; font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.thread-scroll.is-chat .msg.in .bubble { background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.thread-scroll.is-chat .msg.out .bubble { background: var(--accent); color: #fff; border: 0; border-bottom-right-radius: 5px; }
.thread-scroll.is-chat .msg.out .bubble a { color: #fff; }
.thread-scroll.is-chat .msg.note .bubble { background: var(--note); border: 1px solid var(--note-line); color: var(--ink); border-bottom-left-radius: 5px; }
.thread-scroll.is-chat .msg.note { margin-left: auto; margin-right: auto; max-width: 70%; }
.thread-scroll.is-chat .msg { margin-bottom: 10px; }
.thread-scroll.is-chat .msg + .msg.in, .thread-scroll.is-chat .msg + .msg.out { margin-top: 2px; }
:root:not([data-theme="light"]) .thread-scroll.is-chat .msg.note .bubble, [data-theme="dark"] .thread-scroll.is-chat .msg.note .bubble { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.3); color: var(--ink); }
@media (max-width: 760px) { .thread-scroll.is-chat .msg { max-width: 88%; } }
/* Chatt: inget kort runt bubblan – bara bubblan själv */
.thread-scroll.is-chat .msg { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; }
.thread-scroll.is-chat .msg::before { display: none !important; }
.thread-scroll.is-chat .msg .bubble { padding: 9px 13px !important; border-radius: 16px !important; max-width: 100% !important; box-shadow: none !important; }
.thread-scroll.is-chat .msg.in .bubble { background: var(--surface) !important; border: 1px solid var(--line) !important; border-bottom-left-radius: 5px !important; color: var(--ink) !important; }
.thread-scroll.is-chat .msg.out .bubble { background: var(--accent) !important; border: 0 !important; border-bottom-right-radius: 5px !important; color: #fff !important; }
.thread-scroll.is-chat .msg.note .bubble { background: var(--note) !important; border: 1px solid var(--note-line) !important; border-radius: 12px !important; }
.thread-scroll.is-chat .msg .delivery { font-size: 11px; margin: 3px 4px 0; }
.thread-scroll.is-chat .msg.out .delivery { color: var(--muted); }

/* Supportläge: systemadministratören i ett företags arbetsyta */
.support-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 360; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 5px 12px; background: #B91C1C; color: #fff; font-size: 12.5px; }
.support-bar a { color: #fff; text-decoration: underline; margin-left: 6px; }
.support-bar ~ .rail, .support-bar ~ .frame { margin-top: 28px; }

/* ══ Systemområdet (/system) ═══════════════════════════════════════════ */
.page-inner.sys-shell { max-width: 1320px; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 28px; align-items: start; }
.sys-nav { position: sticky; top: 8px; display: flex; flex-direction: column; gap: 2px; }
.sys-brand { display: flex; align-items: center; gap: 7px; padding: 6px 10px 14px; font-size: 14px; }
.sys-brand span { margin-left: auto; font-size: 11px; color: var(--muted); }
.sys-nav a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-size: 13.5px; }
.sys-nav a:hover { background: var(--hover); }
.sys-nav a.on { background: var(--active); color: var(--ink); font-weight: 600; }
.sys-nav .sys-back { margin-top: 14px; color: var(--muted); font-size: 12.5px; border-top: 1px solid var(--line); border-radius: 0; padding-top: 14px; }
.sys-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.sys-main > .card, .sys-main .card { margin: 0; }
.sys-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.sys-stat { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; }
a.sys-stat:hover { border-color: var(--accent-line); }
.sys-stat small { font-size: 12px; color: var(--muted); }
.sys-stat b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sys-stat span { font-size: 12px; color: var(--muted); }
.sys-stat.small b { font-size: 20px; }
.sys-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sys-bars { display: flex; align-items: flex-end; gap: 3px; height: 140px; }
.sys-bars span { flex: 1; background: var(--accent); opacity: .75; border-radius: 3px 3px 0 0; min-height: 2px; }
.sys-bars span:hover { opacity: 1; }
.sys-bars-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 6px; }
.sys-health { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.sys-health i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--green); }
.sys-health.bad i { background: var(--red); } .sys-health.warn i { background: #D97706; }
.sys-health a { margin-left: auto; font-size: 12px; }
.sys-list { display: flex; flex-direction: column; }
.sys-list > a, .sys-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.sys-list > a:hover { background: var(--hover); }
.sys-list b { font-size: 13.5px; font-weight: 580; } .sys-list small { display: block; font-size: 12px; color: var(--muted); }
.sys-row time { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.sys-av { width: 30px; height: 30px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: none; }
.sys-filter { display: flex; gap: 8px; } .sys-filter .input:first-child { flex: 1; max-width: 420px; } .sys-filter select { width: auto; }
.sys-table-wrap { overflow-x: auto; padding: 0 !important; }
.sys-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sys-table th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.sys-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sys-table tbody tr:last-child td { border-bottom: 0; }
.sys-table tbody tr[onclick] { cursor: pointer; } .sys-table tbody tr:hover { background: var(--hover); }
.sys-table td small { display: block; font-size: 12px; color: var(--muted); }
.sys-table .num { text-align: right; font-variant-numeric: tabular-nums; } .sys-table .nowrap { white-space: nowrap; }
.sys-table .wrap { max-width: 320px; } .sys-table .actions form { display: flex; gap: 4px; justify-content: flex-end; }
.sys-pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); vertical-align: middle; }
.sys-pill.ok { background: var(--green-soft); color: var(--green); border-color: transparent; }
.sys-pill.bad { background: var(--red-soft); color: var(--red); border-color: transparent; }
.sys-pill.warn { background: #FEF3C7; color: #B45309; border-color: transparent; }
.sys-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.sys-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.sys-tabs a { padding: 6px 12px; border-radius: 999px; font-size: 12.5px; color: var(--ink-2); text-decoration: none; border: 1px solid var(--line); }
.sys-tabs a.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.sys-danger summary { cursor: pointer; color: var(--red); font-size: 13px; font-weight: 580; }
@media (max-width: 980px) {
  .page-inner.sys-shell { grid-template-columns: 1fr; gap: 14px; }
  .sys-nav { position: static; flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
  .sys-brand, .sys-nav .sys-back { display: none; }
  .sys-nav a { white-space: nowrap; flex: none; }
  .sys-grid2 { grid-template-columns: 1fr; }
}
.sys-main .card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }

/* ══ Abonnemang ══════════════════════════════════════════════════════════ */
.plan-bar { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 355; display: flex; align-items: center; gap: 8px; margin-top: 8px;
  padding: 6px 14px; border-radius: 999px; background: #FEF3C7; color: #713F12; border: 1px solid #F5D98B; font-size: 12.5px; box-shadow: 0 4px 14px rgba(0,0,0,.08); max-width: calc(100vw - 24px); }
.plan-bar.locked { background: #FEE2E2; color: #7F1D1D; border-color: #FCA5A5; }
.plan-bar a { color: inherit; font-weight: 700; text-decoration: underline; white-space: nowrap; }
.bill-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; margin-bottom: 8px; }
.bill-plan { font-size: 20px; display: flex; align-items: center; gap: 10px; }
.bill-use > div { display: flex; justify-content: space-between; font-size: 13px; gap: 10px; }
.bill-use small { color: var(--muted); font-weight: 400; }
.bill-use i { display: block; height: 6px; border-radius: 99px; background: var(--surface-2); margin-top: 5px; overflow: hidden; }
.bill-use em { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.bill-use em.near { background: #D97706; } .bill-use em.full { background: var(--red); }
.bill-h { font-size: 16px; margin: 18px 0 10px; }
.bill-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.bill-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.bill-card.pop { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.bill-tag { position: absolute; top: -10px; left: 18px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.bill-name { font-size: 16px; }
.bill-price { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.bill-price small { font-size: 12.5px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.bill-card p { margin: 0; font-size: 13px; color: var(--ink-2); }
.bill-card ul { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; flex: 1; }
.bill-card li { display: flex; gap: 7px; align-items: flex-start; } .bill-card li .i { color: var(--green); margin-top: 3px; flex: none; }
@media (max-width: 760px) { .bill-grid { grid-template-columns: 1fr; } .plan-bar { top: auto; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); border-radius: 12px; } }
.plan-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.bill-grid > .card { margin: 0 !important; }
.auth-legal { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; font-size: 12px; opacity: .8; }
.auth-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ══ Systemets egen layout ════════════════════════════════════════════ */
body.sys-body { background: var(--bg, #ECEEF3); min-height: 100vh; }
.sys-top { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 6px; height: 56px; padding: 0 16px;
  background: var(--surface); border-bottom: 1px solid var(--line); }
.sys-top-brand { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-size: 15px; }
.sys-top-brand img { height: 24px; width: auto; }
.sys-top-brand span { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: #B91C1C; padding: 2px 7px; border-radius: 6px; }
.sys-top-btn { position: relative; }
.sys-dot { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.sys-top-user { border: 0; background: none; padding: 2px; border-radius: 50%; cursor: pointer; }
.sys-frame { padding: 22px 18px 40px; }
.sys-frame > .page { background: transparent; }
.pop-label { padding: 8px 12px 6px; font-size: 12px; color: var(--muted); }
.pop-menu form button { width: 100%; }
.sys-av.sm { width: 22px; height: 22px; font-size: 9px; border-radius: 6px; }
@media (max-width: 760px) { .sys-frame { padding: 14px 10px 30px; } .sys-top { padding: 0 10px; } }

/* ══ Menyraden och supportärenden ══════════════════════════════════════ */
.topbar .top-ic { color: var(--ink-2); }
.topbar .top-ic:hover { color: var(--ink); }
.topbar .top-sys { color: #B91C1C; border: 1px solid color-mix(in srgb, #B91C1C 35%, transparent); margin-left: 4px; }
.sup-shot { display: flex; flex-direction: column; gap: 8px; }
.sup-preview { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.sup-preview img { max-width: 100%; max-height: 180px; border-radius: 8px; border: 1px solid var(--line); }
.sup-thread { display: flex; flex-direction: column; gap: 12px; }
.sup-msg { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 14px 16px; }
.sup-msg.staff { border-color: var(--accent-line); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.sup-head { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 8px; }
.sup-head time { margin-left: auto; font-size: 12px; color: var(--muted); }
.sup-body { font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.sup-img img { display: block; max-width: 100%; max-height: 420px; margin-top: 10px; border-radius: 10px; border: 1px solid var(--line); }
.sup-file { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; }
.sup-file:hover { color: var(--accent); }
#support-ny .modal-head h3 { display: flex; align-items: center; gap: 8px; }
.bill-kv { display: flex; flex-direction: column; gap: 1px; padding: 10px 0 0; border-top: 1px solid var(--line); }
.bill-kv span { font-size: 12px; color: var(--muted); } .bill-kv b { font-size: 17px; } .bill-kv small { font-size: 12px; color: var(--muted); }
.bill-kv.next b { font-size: 22px; color: var(--accent); }
.bill-card.current { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.bill-tag.cur { background: var(--green); }
.site-rowset { display: grid; grid-template-columns: 130px 1fr 2fr; gap: 8px; align-items: start; }
.site-rowset.two { grid-template-columns: 1fr 2fr; }
@media (max-width: 760px) { .site-rowset, .site-rowset.two { grid-template-columns: 1fr; } }
.rich-bar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border: 1px solid var(--line); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--surface-2); }
.rich-bar button { border: 0; background: none; padding: 5px 9px; border-radius: 6px; font: inherit; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.rich-bar button:hover { background: var(--hover); color: var(--ink); }
.rich-bar span { width: 1px; background: var(--line); margin: 2px 4px; }
.rich-area { min-height: 420px; max-height: 70vh; overflow: auto; padding: 16px 20px; border: 1px solid var(--line); border-radius: 0 0 10px 10px; background: var(--surface); font-size: 14.5px; line-height: 1.7; }
.rich-area:focus { outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.rich-area h2 { font-size: 19px; margin: 22px 0 6px; } .rich-area h3 { font-size: 16px; margin: 16px 0 4px; }
.rich-area table { border-collapse: collapse; width: 100%; font-size: 13px; } .rich-area td, .rich-area th { border: 1px solid var(--line); padding: 6px 8px; text-align: left; }

/* ══ Koppla Meta med ett klick ═════════════════════════════════════════ */
.meta-connect { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 18px; margin-bottom: 18px;
  border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(120deg, color-mix(in srgb, #1877F2 6%, var(--surface)), color-mix(in srgb, #25D366 6%, var(--surface))); }
.meta-connect b { display: block; font-size: 14.5px; } .meta-connect span { font-size: 13px; color: var(--muted); }
.btn.meta-fb { background: #1877F2; color: #fff; border-color: #1877F2; } .btn.meta-fb:hover { background: #166FE0; }
.btn.meta-wa { background: #25D366; color: #06371a; border-color: #25D366; } .btn.meta-wa:hover { background: #20bd5a; }
.meta-list { display: flex; flex-direction: column; }
.meta-item { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); cursor: pointer; }
.meta-item:last-child { border-bottom: 0; } .meta-item:hover { background: var(--hover); } .meta-item.off { opacity: .55; cursor: not-allowed; }
.meta-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex: none; }
.meta-ic.facebook { background: #1877F2; } .meta-ic.instagram { background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF); } .meta-ic.whatsapp_meta { background: #25D366; }
.meta-txt { display: flex; flex-direction: column; min-width: 0; } .meta-txt small { color: var(--muted); font-size: 12.5px; }
.g-video { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.55; }

/* ══ Inlägg ══════════════════════════════════════════════════════════════ */
.sc-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 20px; align-items: start; }
.sc-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.sc-accounts { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-acc input { position: absolute; opacity: 0; pointer-events: none; }
.sc-acc span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 13px; cursor: pointer; transition: all .15s; }
.sc-acc input:checked + span { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent); }
.sc-acc input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.sc-status { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-ai .card-body { align-items: center; } .sc-ai .input { flex: 1; }
.sc-ai-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(135deg, var(--accent), #DB2777); }
.sc-text { min-height: 170px; font-size: 14.5px; line-height: 1.6; resize: vertical; }
[data-count].over { color: var(--red); font-weight: 700; }
.sc-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px; border: 1.5px dashed var(--line-strong); border-radius: 12px; color: var(--muted); cursor: pointer; text-align: center; transition: all .15s; }
.sc-drop b { color: var(--ink); font-size: 13.5px; } .sc-drop small { font-size: 12px; }
.sc-drop:hover, .sc-drop.over { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.sc-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sc-thumb { position: relative; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); }
.sc-thumb img, .sc-thumb video { width: 100%; height: 100%; object-fit: cover; }
.sc-thumb button { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; cursor: pointer; line-height: 1; }
.sc-thumb.loading { background: linear-gradient(90deg, var(--surface-2), var(--hover), var(--surface-2)); background-size: 200% 100%; animation: srch 1s linear infinite; }
.sc-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sc-preview { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 10px; }
.sc-empty { font-size: 13px; }
.pv-label { font-size: 11.5px; color: var(--muted); display: block; margin-top: 4px; }
.pv { border: 1px solid var(--line); border-radius: 14px; background: #fff; color: #111; overflow: hidden; font-size: 13.5px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.pv-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.pv-head small { display: flex; align-items: center; gap: 3px; color: #65676b; font-size: 12px; }
.pv-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; }
.pv-av.fb { background: #1877F2; } .pv-av.ig { width: 32px; height: 32px; background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF); }
.pv-text { padding: 0 14px 10px; line-height: 1.45; word-break: break-word; } .pv-tag { color: #1a5bd6; }
.pv-media img, .pv-media video { display: block; width: 100%; max-height: 420px; object-fit: cover; }
.pv-grid { display: grid; gap: 2px; } .pv-grid.n2, .pv-grid.n4 { grid-template-columns: 1fr 1fr; } .pv-grid.n3 { grid-template-columns: 1fr 1fr; } .pv-grid.n3 span:first-child { grid-column: 1 / -1; }
.pv-grid span { position: relative; aspect-ratio: 1; overflow: hidden; } .pv-grid img { width: 100%; height: 100%; object-fit: cover; max-height: none; }
.pv-grid b { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.45); color: #fff; font-size: 26px; }
.pv-fb-actions { display: flex; justify-content: space-around; padding: 8px; border-top: 1px solid #e4e6eb; margin-top: 4px; color: #65676b; font-size: 13px; }
.pv-fb-actions span { display: flex; align-items: center; gap: 5px; }
.pv-ig-media { position: relative; aspect-ratio: 1; background: #f0f0f0; }
.pv-ig-media img, .pv-ig-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-noimg { position: absolute; inset: 0; display: grid; place-items: center; color: #b3261e; font-size: 13px; text-align: center; padding: 20px; background: #fdecea; }
.pv-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 4px; }
.pv-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.6); } .pv-dots i.on { background: #0095f6; }
.pv-ig-actions { display: flex; gap: 14px; padding: 10px 14px 4px; }
.pv-ig-cap { padding: 2px 14px 14px; line-height: 1.45; word-break: break-word; }
/* Listan och kalendern */
.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.seg a { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 8px; font-size: 13px; color: var(--ink-2); text-decoration: none; }
.seg a.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.so-list { padding: 0 !important; }
.so-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.so-row:last-child { border-bottom: 0; } .so-row:hover { background: var(--hover); }
.so-thumb { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; flex: none; background: var(--surface-2); }
.so-thumb.none { display: grid; place-items: center; color: var(--muted); }
.so-main { flex: 1; min-width: 0; color: var(--ink); text-decoration: none; display: flex; flex-direction: column; gap: 5px; }
.so-text { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.so-tgt { display: inline-flex; align-items: center; gap: 1px; padding: 2px 6px; border-radius: 999px; background: var(--surface-2); }
.so-tgt.ok { color: var(--green); background: var(--green-soft); } .so-tgt.bad { color: var(--red); background: var(--red-soft); }
.so-act { display: flex; gap: 4px; align-items: center; } .so-act form { margin: 0; }
.so-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 20px; color: var(--muted); }
.so-empty b { color: var(--ink); }
.so-cal { padding: 0 !important; overflow: hidden; }
.so-cal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.so-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.so-dow { padding: 8px; font-size: 11.5px; font-weight: 600; color: var(--muted); text-align: center; border-bottom: 1px solid var(--line); }
.so-day { min-height: 104px; padding: 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.so-day:nth-child(7n) { border-right: 0; } .so-day.out { background: var(--surface-2); }
.so-num { font-size: 12px; color: var(--muted); } .so-day.today .so-num { color: #fff; background: var(--accent); border-radius: 999px; width: 22px; height: 22px; display: grid; place-items: center; font-weight: 700; }
.so-chip { display: block; font-size: 11px; padding: 3px 6px; border-radius: 6px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--accent-soft); color: var(--accent); }
.so-chip.published { background: var(--green-soft); color: var(--green); } .so-chip.failed, .so-chip.partial { background: var(--red-soft); color: var(--red); }
@media (max-width: 980px) { .sc-grid { grid-template-columns: 1fr; } .sc-preview { position: static; } }
@media (max-width: 760px) { .so-day { min-height: 64px; } .so-chip { font-size: 0; height: 6px; padding: 0; } .so-row { flex-wrap: wrap; } }

/* ══ Mobil: skärmens kanter och teamchattens skrivruta (4.3.1) ═════════════
   Appen på hemskärmen ritar under statusfältet (black-translucent + viewport-fit=cover).
   Utan skydd hamnade inkorgens rubrikrad (menyn och uppdatera) bakom klockan. */
.tc-aa { display: none; }
@media (max-width: 760px) {
  :root { --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); }
  html, body { overscroll-behavior: none; }
  .shell { padding-top: var(--sat) !important; padding-bottom: calc(56px + max(4px, var(--sab) - 16px)) !important; }
  /* Ikonerna närmare kanten, som i appar – hemindikatorn får ändå sin plats */
  .rail { padding-bottom: max(4px, calc(var(--sab) - 16px)) !important; }
  .rail > a, .rail > button, .rail > .pop > button { height: 50px !important; }

  /* Teamchattens skrivruta: en rad – bifoga, Aa, texten och en rund skicka-knapp */
  .tc-composer { padding: 8px 10px !important; }
  .tc-composer .composer-box { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: end; gap: 4px; padding: 5px; border-radius: 24px; }
  .tc-composer .composer-bar { display: contents; }
  .tc-composer [data-tc-insert], .tc-composer .composer-bar .grow { display: none !important; }
  .tc-composer .tc-attach { grid-column: 1; grid-row: 1; }
  .tc-composer .tc-aa { display: inline-flex; grid-column: 2; grid-row: 1; }
  .tc-composer .rich-input { grid-column: 3; grid-row: 1; min-height: 38px; max-height: 132px; overflow-y: auto; padding: 8px 12px; font-size: 16px; line-height: 1.4; border-radius: 19px; background: var(--surface-2); }
  .tc-composer .rich-input:empty::before { content: attr(data-placeholder-short); }
  .tc-composer .tc-send { grid-column: 4; grid-row: 1; width: 38px; height: 38px; min-width: 38px; padding: 0; border-radius: 50%; justify-content: center; }
  .tc-composer .tc-send span { display: none; }
  .tc-composer .tc-send .i { width: 17px; height: 17px; }
  .tc-composer .tc-attach, .tc-composer .tc-aa { width: 38px; height: 38px; border-radius: 50%; }
  .tc-composer .rich-tools { grid-column: 1 / -1; grid-row: 2; display: none !important; flex-wrap: nowrap; overflow-x: auto; gap: 2px; padding: 2px 4px 0; }
  .tc-composer.tools-open .rich-tools { display: flex !important; }
  .tc-composer.tools-open .tc-aa { background: var(--accent-soft); color: var(--accent); }
  .tc-composer .composer-files { grid-column: 1 / -1; grid-row: 3; }
  .tc-composer .composer-files:empty { display: none; }
}

/* ══ Systemöversikten (4.3.1) ═══════════════════════════════════════════ */
.ov-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ov-kpi { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; overflow: hidden; }
a.ov-kpi:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.ov-kpi::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c, #6366F1) 12%, transparent), transparent 70%); pointer-events: none; }
.ov-kpi small { font-size: 12px; color: var(--muted); margin-top: 10px; }
.ov-kpi b { font-size: 26px; letter-spacing: -.02em; line-height: 1.2; display: flex; align-items: baseline; gap: 8px; }
.ov-kpi > span:last-child { font-size: 12px; color: var(--muted); }
.ov-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); }
.ov-d { font-size: 12px; font-weight: 650; padding: 2px 7px; border-radius: 999px; }
.ov-d.up { color: var(--green); background: var(--green-soft); } .ov-d.down { color: var(--red); background: var(--red-soft); }
.ov-bars { display: block; width: 100%; height: 180px; }
.ov-bars rect { transition: opacity .15s; } .ov-bars g:hover rect, .ov-bars rect:hover { opacity: .75; }
.ov-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 6px; }
.ov-legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.ov-legend span, .ov-list li { display: inline-flex; align-items: center; gap: 6px; }
.ov-legend i, .ov-list i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex: none; }
.ov-donut-wrap { display: flex; align-items: center; gap: 22px; }
.ov-donut { width: 150px; height: 150px; flex: none; }
.ov-dn { font-size: 20px; font-weight: 750; fill: var(--ink); } .ov-ds { font-size: 10px; fill: var(--muted); }
.ov-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; flex: 1; min-width: 0; font-size: 13px; }
.ov-list li b { margin-left: auto; font-variant-numeric: tabular-nums; }
.ov-hbar { display: grid; grid-template-columns: minmax(0, 1.1fr) 2fr auto; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 13px; }
.ov-hbar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-hbar i { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.ov-hbar em { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #6366F1, #8B5CF6); }
.ov-hbar b { font-variant-numeric: tabular-nums; font-size: 12.5px; }
.ov-hbar:hover span { color: var(--accent); }
@media (max-width: 1100px) { .ov-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ov-donut-wrap { flex-direction: column; align-items: stretch; } .ov-donut { margin: 0 auto; } .ov-kpi b { font-size: 22px; } }

/* Kontomenyn: valet Auto / Ljust / Mörkt fyller menyns bredd, tre lika delar (4.3.3) */
.pop-menu .seg { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; gap: 3px; padding: 3px; box-sizing: border-box; }
.pop-menu .seg button { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 6px; border-radius: 8px; font-size: 12.5px; white-space: nowrap; min-width: 0; }
.pop-menu .seg button .i { flex: none; }

/* ══ Mjuka sidbyten (4.3.4) ════════════════════════════════════════════════
   Webbläsaren byter sida utan att blinka: menyn, sidopanelen, listan och sökfältet står
   still och bara ärendet tonar över. (Chrome, Edge och Safari 18.2+; andra byter som förut.) */
@view-transition { navigation: auto; }
.rail { view-transition-name: bd-rail; }
.main-wrap > .topbar { view-transition-name: bd-top; }
.frame > .side { view-transition-name: bd-side; }
section.list[data-inbox] { view-transition-name: bd-list; }
section.thread { view-transition-name: bd-thread; }
::view-transition-group(*) { animation-duration: .14s; }
::view-transition-old(bd-rail), ::view-transition-new(bd-rail),
::view-transition-old(bd-top), ::view-transition-new(bd-top),
::view-transition-old(bd-side), ::view-transition-new(bd-side),
::view-transition-old(bd-list), ::view-transition-new(bd-list) { animation: none; mix-blend-mode: normal; }
::view-transition-old(bd-list) { display: none; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
.del-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.del-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.del-opt.danger:has(input:checked) { border-color: var(--red); background: var(--red-soft); }
.del-opt span { display: flex; flex-direction: column; gap: 2px; } .del-opt small { color: var(--muted); font-size: 12.5px; }
.del-opt input { margin-top: 3px; }

/* ══ E-postens huvud (4.3.6): namn, Från och Till vid bilden – riktning och datum till höger ══ */
.msg-fold.mh { align-items: flex-start; gap: 12px; padding: 14px 16px; }
.msg-fold.mh .avatar { margin-top: 1px; }
.mh-main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.mh-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mh-top b { font-size: 14.5px; font-weight: 650; color: var(--ink); letter-spacing: -.005em; }
.mh-line { font-size: 12.5px; color: var(--muted); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.45; }
.mh-line i { font-style: normal; display: inline-block; min-width: 42px; color: var(--faint); font-size: 11.5px; }
.mh-side { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex: none; margin-left: auto; padding-top: 1px; }
.mh-side time { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.msg.open .mh-folded { display: none; }
.msg.folded .mh-open { display: none; }
/* Hopfällt: en rad, som förut */
.msg.folded .msg-fold.mh { align-items: center; padding: 9px 14px; }
.msg.folded .msg-fold.mh .avatar { --s: 30px !important; width: 30px; height: 30px; }
.msg.folded .mh-side { flex-direction: row-reverse; align-items: center; gap: 10px; }
.msg.folded .mh-top b { font-size: 13px; font-weight: 600; }
.msg.folded .mh-top .fold-prev { flex: 1; min-width: 0; }
@media (max-width: 760px) { .msg-fold.mh { padding: 12px; gap: 10px; } .mh-line i { min-width: 36px; } }
/* På mobilen döljs bilderna i chattbubblorna – men i e-postens huvud ska logotypen/bilden synas */
@media (max-width: 760px) { .msg .msg-fold.mh .avatar { display: inline-flex; --s: 36px; width: 36px; height: 36px; } .msg.folded .msg-fold.mh .avatar { width: 28px; height: 28px; } }

/* ══ Webbchatt: guiden och byggblocken (4.4.0) ══════════════════════════ */
.wz { display: flex; flex-direction: column; gap: 14px; }
.wz-steps { display: flex; gap: 6px; list-style: none; margin: 0 0 4px; padding: 0; flex-wrap: wrap; }
.wz-steps li { display: flex; align-items: center; gap: 7px; padding: 6px 11px 6px 6px; border-radius: 999px; font-size: 12.5px; color: var(--muted); background: var(--surface-2); cursor: pointer; }
.wz-steps li span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--surface); border: 1px solid var(--line); }
.wz-steps li.on { color: var(--ink); background: var(--accent-soft); } .wz-steps li.on span { background: var(--accent); color: #fff; border-color: var(--accent); }
.wz-steps li.done span { background: var(--green-soft); color: var(--green); border-color: transparent; }
.wz-h { margin: 0; font-size: 16px; }
.wz-foot { display: flex; align-items: center; gap: 8px; }
.wz-designs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.wz-design { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; font-size: 12.5px; }
.wz-design input { position: absolute; opacity: 0; pointer-events: none; }
.wz-mock { width: 100%; aspect-ratio: 3 / 4; border-radius: var(--r); background: #fff; border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; box-shadow: 0 6px 18px rgba(20,24,40,.08); transition: transform .15s, box-shadow .15s; }
.wz-mock .h { height: 30%; background: var(--c); } .wz-mock .b1, .wz-mock .b2 { height: 12px; border-radius: 8px; margin: 0 10px; background: #eef0f4; width: 60%; } .wz-mock .b2 { align-self: flex-end; width: 45%; background: var(--c); opacity: .85; }
.wz-mock .f { margin: auto 10px 0; height: 14px; border-radius: 7px; border: 1px solid #e5e7eb; }
.wz-mock.minimal .h { background: #fff; border-bottom: 1px solid #e5e7eb; } .wz-mock.bold .h { background: #0f1117; border-bottom: 3px solid var(--c); }
.wz-mock.soft .h, .wz-mock.glass .h { background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #fff)); } .wz-mock.split .h { background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 60%, #000)); }
.wz-mock.dark { background: #0b0f1d; border-color: #1f2437; } .wz-mock.dark .b1 { background: #1f2437; } .wz-mock.midnight .h { background: linear-gradient(160deg, #0b0f1d, color-mix(in srgb, var(--c) 60%, #0b0f1d)); }
.wz-mock.outline { border: 2px solid var(--c); } .wz-mock.outline .h { background: #fff; border-bottom: 2px solid var(--c); }
.wz-mock.pill { border-radius: 22px; } .wz-mock.pill .b1, .wz-mock.pill .b2 { border-radius: 999px; }
.wz-mock.paper { background: #fbf8f2; border-color: #e5dac6; } .wz-mock.paper .h { background: #f4ede1; border-bottom: 1px solid #e5dac6; }
.wz-design input:checked + .wz-mock { transform: translateY(-2px); box-shadow: 0 0 0 3px var(--accent), 0 10px 24px rgba(20,24,40,.14); }
.wz-design input:checked ~ b { color: var(--accent); }
.wz-color { width: 64px; height: 38px; padding: 2px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.wz-sum { display: grid; grid-template-columns: 140px 1fr; gap: 8px 14px; margin: 0; font-size: 13.5px; } .wz-sum dt { color: var(--muted); } .wz-sum dd { margin: 0; font-weight: 550; }
.scb-row, .pcb-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin-bottom: 8px; }
.scb-row.first { border-color: var(--accent); background: var(--accent-soft); } .scb-row.first b::after { content: " · visas först"; font-weight: 400; color: var(--muted); font-size: 12px; }
.pcb-type { font-size: 11.5px; color: var(--muted); background: var(--surface-2); padding: 3px 8px; border-radius: 999px; white-space: nowrap; min-width: 118px; text-align: center; }
.pcb-row .input { flex: 1; min-width: 0; height: 34px; } .pcb-req { white-space: nowrap; font-size: 12.5px; }
.pcb-add select { width: auto; }
@media (max-width: 760px) { .wz-designs { grid-template-columns: repeat(2, 1fr); } .pcb-row { flex-wrap: wrap; } .pcb-type { min-width: 0; } .wz-sum { grid-template-columns: 1fr; } }
.wz-ai { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), color-mix(in srgb, #EC4899 6%, var(--surface))); border: 1px solid var(--line); }
.wz-ai .help { flex: 1; min-width: 200px; margin: 0; }
.wz-ai-ok { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); } .wz-ai-ok i { width: 14px; height: 14px; border-radius: 4px; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.1); }
/* Chatbotens kunskap */
.kn-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.kn-tabs label { cursor: pointer; } .kn-tabs input { position: absolute; opacity: 0; pointer-events: none; }
.kn-tabs span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.kn-tabs input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.kn-form { display: flex; flex-direction: column; gap: 10px; }
.kn-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.kn-list > div { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 13px; } .kn-list > div + div { border-top: 1px solid var(--line); }
.kn-list b { flex: 1; min-width: 0; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-t { font-size: 11px; color: var(--muted); background: var(--surface-2); padding: 2px 8px; border-radius: 999px; min-width: 64px; text-align: center; }
.conv.purging { opacity: .35; pointer-events: none; transition: opacity .15s; }
.del-note { margin: 4px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--amber-soft, #fff7e6); color: var(--ink); font-size: 12.5px; line-height: 1.5; }

/* ══ Kanalens märke och taggar på korten (4.5.4) ═══════════════════════════ */
.conv .chan-chip.ch-email     { color: #15803d; background: color-mix(in srgb, #16a34a 11%, transparent); }
.conv .chan-chip.ch-web       { color: #6d28d9; background: color-mix(in srgb, #7c3aed 11%, transparent); }
.conv .chan-chip.ch-sms       { color: #c2410c; background: color-mix(in srgb, #ea580c 11%, transparent); }
.conv .chan-chip.ch-whatsapp  { color: #128c4a; background: color-mix(in srgb, #25d366 14%, transparent); }
.conv .chan-chip.ch-facebook  { color: #1877f2; background: color-mix(in srgb, #1877f2 11%, transparent); }
.conv .chan-chip.ch-instagram { color: #d6246e; background: linear-gradient(90deg, color-mix(in srgb, #f58529 12%, transparent), color-mix(in srgb, #dd2a7b 12%, transparent), color-mix(in srgb, #8134af 12%, transparent)); }
.conv .chan-chip.ch-phone     { color: #0e7490; background: color-mix(in srgb, #0891b2 11%, transparent); }
.conv .chan-chip[class*="ch-"] { border-radius: 6px; padding: 1px 6px 1px 5px; font-weight: 600; border-color: transparent; }
.chan-chip .i { flex: none; }
:root[data-theme="dark"] .conv .chan-chip.ch-email { color: #4ade80; } :root[data-theme="dark"] .conv .chan-chip.ch-web { color: #a78bfa; }
:root[data-theme="dark"] .conv .chan-chip.ch-sms { color: #fb923c; } :root[data-theme="dark"] .conv .chan-chip.ch-whatsapp { color: #4ade80; }
:root[data-theme="dark"] .conv .chan-chip.ch-facebook { color: #60a5fa; } :root[data-theme="dark"] .conv .chan-chip.ch-instagram { color: #f472b6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .conv .chan-chip.ch-email { color: #4ade80; } :root:not([data-theme="light"]) .conv .chan-chip.ch-web { color: #a78bfa; } :root:not([data-theme="light"]) .conv .chan-chip.ch-sms { color: #fb923c; } :root:not([data-theme="light"]) .conv .chan-chip.ch-facebook { color: #60a5fa; } :root:not([data-theme="light"]) .conv .chan-chip.ch-instagram { color: #f472b6; } }
.conv-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.tag-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 550; line-height: 1; padding: 3px 7px 3px 6px; border-radius: 999px; color: var(--ink); background: color-mix(in srgb, var(--tc) 14%, transparent); }
.tag-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tc); }
.tag-more { font-size: 11px; color: var(--muted); padding: 3px 4px; }
.side-sub { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); padding: 10px 10px 4px; }
.tag-nav .tag-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; margin: 0 3px; }
/* Avregistrera (mejlhuvudet) */
.unsub-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 550; color: var(--muted); padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; text-decoration: none; white-space: nowrap; }
.unsub-btn:hover { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, var(--line)); background: color-mix(in srgb, var(--red) 6%, var(--surface)); }
.unsub-btn.busy { opacity: .6; pointer-events: none; }
.unsub-done { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 550; color: var(--green); padding: 3px 8px; border-radius: 999px; background: var(--green-soft); white-space: nowrap; }

/* ══ Telefoni: alternativen i en sidopanel till vänster (4.7.0) ═══════════ */
.voice-side .side-scroll { display: flex; flex-direction: column; gap: 12px; padding: 4px 10px 14px; overflow: auto; }
.voice-status { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.voice-status b { display: block; font-size: 13px; } .voice-status small { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.vs-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 4px; flex: none; background: var(--amber, #d97706); box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber, #d97706) 18%, transparent); }
.voice-status.ok .vs-dot { background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 20%, transparent); animation: vs-pulse 2.4s ease-in-out infinite; }
@keyframes vs-pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--green) 6%, transparent); } }
@media (prefers-reduced-motion: reduce) { .voice-status.ok .vs-dot { animation: none; } }
.voice-nav { display: flex; flex-direction: column; gap: 2px; }
.voice-nav .nav-item { align-items: flex-start; padding: 9px 10px; border-radius: 10px; }
.voice-nav .nav-item > .i { margin-top: 1px; }
.voice-nav .nav-item .label { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.voice-nav .nav-item .label small { font-size: 11px; color: var(--muted); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 132px; }
.voice-nav .nav-item.on { background: var(--surface); box-shadow: 0 1px 2px rgba(20,24,40,.06), inset 0 0 0 1px var(--line); }
.voice-nav .nav-item.on > .i { color: var(--accent); }
.voice-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.voice-mini > div { padding: 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); text-align: center; }
.voice-mini b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; } .voice-mini small { color: var(--muted); font-size: 11px; }
.voice-tabs-m { display: none !important; }
@media (max-width: 760px) { .voice-tabs-m { display: flex !important; } }
@media (max-width: 760px) { .frame > .voice-side { display: none !important; } }
/* Två rader per alternativ (namn + beskrivning): höjden följer innehållet */
.voice-nav .nav-item { height: auto; min-height: 46px; }
@media (max-width: 760px) { .voice-nav .nav-item { height: auto; } }

/* ══ Telefoni: klassning och insikter (4.8.0) ══════════════════════════════ */
.call-tags { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; }
.lead-chip, .sent-chip { font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.lead-chip.lead-het { color: #b91c1c; background: color-mix(in srgb, #ef4444 13%, transparent); }
.lead-chip.lead-ljummen { color: #b45309; background: color-mix(in srgb, #f59e0b 15%, transparent); }
.lead-chip.lead-kall { color: #1d4ed8; background: color-mix(in srgb, #3b82f6 12%, transparent); }
.sent-chip.sent-positiv { color: #15803d; background: color-mix(in srgb, #22c55e 13%, transparent); }
.sent-chip.sent-neutral { color: var(--muted); background: var(--surface-2); }
.sent-chip.sent-negativ { color: #9f1239; background: color-mix(in srgb, #f43f5e 12%, transparent); }
.call-kw { display: block; font-size: 11.5px; color: var(--muted); margin: 3px 0 0 38px; }
.pill-sep { width: 1px; align-self: stretch; background: var(--line); margin: 2px 4px; }
.lead-pill.on.lead-het { background: color-mix(in srgb, #ef4444 14%, transparent); color: #b91c1c; }
.voice-ins .card-head { display: flex; align-items: flex-start; gap: 12px; } .voice-ins .card-head > div { flex: 1; }
.ins-grid { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 22px; }
.ins-grid h4 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ins-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; gap: 2px; background: var(--surface-2); }
.ins-bar i.empty { flex: 1; }
.ins-bar i.lead-het, .ins-legend i.lead-het { background: #ef4444; } .ins-bar i.lead-ljummen, .ins-legend i.lead-ljummen { background: #f59e0b; } .ins-bar i.lead-kall, .ins-legend i.lead-kall { background: #3b82f6; }
.ins-bar i.sent-positiv, .ins-legend i.sent-positiv { background: #22c55e; } .ins-bar i.sent-neutral, .ins-legend i.sent-neutral { background: #94a3b8; } .ins-bar i.sent-negativ, .ins-legend i.sent-negativ { background: #f43f5e; }
.ins-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12.5px; }
.ins-legend > * { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); text-decoration: none; } .ins-legend i { width: 8px; height: 8px; border-radius: 50%; }
.ins-kw { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; } .ins-kw h4 { width: 100%; }
.ins-kw .kw { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 9px; border-radius: 999px; background: var(--surface-2); }
.ins-kw .kw b { font-size: 10.5px; color: var(--muted); }
@media (max-width: 900px) { .ins-grid { grid-template-columns: 1fr; } }
.call-row .c-title { flex-wrap: wrap; row-gap: 2px; } .call-row .c-title .call-kw { flex-basis: 100%; margin: 0 0 0 36px; }

/* ══ Telefoniminuter (4.9.0) ══════════════════════════════════════════════ */
.vb-meter i, .voice-meter i { display: block; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.vb-meter em, .voice-meter em { display: block; height: 100%; border-radius: 999px; background: var(--green); transition: width .4s; }
.vb-meter em.near, .voice-meter em.near { background: #f59e0b; } .vb-meter em.over, .voice-meter em.over { background: #ef4444; }
.vb-nums { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; } .vb-nums b { font-size: 22px; font-variant-numeric: tabular-nums; } .vb-nums span { color: var(--muted); font-size: 13px; }
.vb-extra { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 12px; background: color-mix(in srgb, #ef4444 8%, var(--surface)); border: 1px solid color-mix(in srgb, #ef4444 25%, var(--line)); }
.vb-extra > .i { color: #dc2626; margin-top: 2px; } .vb-extra b { display: block; font-size: 13.5px; } .vb-extra span { font-size: 12.5px; color: var(--muted); }
.voice-meter { display: flex; flex-direction: column; gap: 7px; padding: 11px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.voice-meter > div { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--muted); }
.voice-meter b { font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; } .voice-meter b small { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.vm-extra { font-size: 11.5px; color: #dc2626; font-weight: 600; }
.cal-hint.ok { background: var(--green-soft); } .cal-hint .btn { margin-left: auto; }
.support-bar { display: flex; align-items: center; gap: 8px; } .support-bar form { margin-left: auto; } .support-bar .btn { background: #fff; color: #b91c1c; border-color: transparent; }
/* Stjärnmärkt ärende: gul stjärna på kortet och vid rubriken */
.conv-star { display: inline-flex; color: #f59e0b; flex: none; }
.conv-star svg { fill: currentColor; }
.conv-star.big { margin-right: -2px; }
/* Oändlig lista */
.list-more, .list-end { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 10px 22px; font-size: 12.5px; color: var(--muted); }
.list-more .spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: bd-spin .8s linear infinite; }
@keyframes bd-spin { to { transform: rotate(360deg); } }
/* Skriv med AI */
dialog.ai-write { width: min(560px, calc(100vw - 32px)); }
dialog.ai-write textarea { resize: vertical; min-height: 96px; }
/* Ärendesystemets automatiska svar: ett systemmejl, tonat som en intern notering för teamet */
.thread-scroll article.msg.sysmail, .thread-scroll.is-mail .msg.sysmail.open { background: color-mix(in srgb, #7c3aed 5%, var(--surface)) !important; border-color: color-mix(in srgb, #7c3aed 26%, var(--line)) !important; }
[data-theme="dark"] .thread-scroll.is-mail .msg.sysmail.open, [data-theme="dark"] .thread-scroll article.msg.sysmail { background: color-mix(in srgb, #7c3aed 12%, var(--surface)) !important; border-color: color-mix(in srgb, #7c3aed 40%, var(--line-strong)) !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .thread-scroll.is-mail .msg.sysmail.open, :root:not([data-theme="light"]) .thread-scroll article.msg.sysmail { background: color-mix(in srgb, #7c3aed 12%, var(--surface)) !important; border-color: color-mix(in srgb, #7c3aed 40%, var(--line-strong)) !important; } }
.thread-scroll article.msg.sysmail > .body, .thread-scroll article.msg.sysmail .msg-fold { background: transparent; }
.thread-scroll article.msg.sysmail.open .msg-fold { border-bottom-color: color-mix(in srgb, #7c3aed 14%, var(--line)); }
.sysmail-badge { display: inline-flex; align-items: center; gap: 4px; color: #6d28d9; background: color-mix(in srgb, #7c3aed 12%, transparent); font-weight: 600; }
[data-theme="dark"] .sysmail-badge { color: #c4b5fd; background: color-mix(in srgb, #8b5cf6 22%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sysmail-badge { color: #c4b5fd; background: color-mix(in srgb, #8b5cf6 22%, transparent); } }

/* ══ AI Receptionist (4.11.0) ══════════════════════════════════════════════ */
.vr { --vr-a: var(--accent); --vr-b: #8b5cf6; }
@keyframes vr-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes vr-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.vr .page-inner > * { animation: vr-up .45s cubic-bezier(.2, .7, .2, 1) both; }
.vr .page-inner > *:nth-child(2) { animation-delay: 60ms; } .vr .page-inner > *:nth-child(3) { animation-delay: 110ms; }
.vr .page-inner > *:nth-child(n+4) { animation-delay: 160ms; }
@media (prefers-reduced-motion: reduce) { .vr .page-inner > *, .vr-kpi, .vr-bars i, .vr-bars em, .vr-hours i, .vr-spark span { animation: none !important; transition: none !important; } }

/* Huvudet med numret */
.vr-hero { position: relative; display: flex; gap: 20px; align-items: stretch; justify-content: space-between; flex-wrap: wrap; padding: 22px 24px; border-radius: 18px; margin-bottom: 14px; overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--vr-a) 16%, transparent), transparent 55%), radial-gradient(120% 140% at 100% 100%, color-mix(in srgb, var(--vr-b) 14%, transparent), transparent 60%), var(--surface);
  border: 1px solid color-mix(in srgb, var(--vr-a) 18%, var(--line)); }
.vr-hero-text { min-width: 240px; flex: 1; }
.vr-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vr-a); }
.vr-hero h1 { margin: 6px 0 4px; font-size: 26px; letter-spacing: -.02em; }
.vr-hero p { margin: 0; color: var(--muted); max-width: 520px; }
.vr-number { display: flex; flex-direction: column; gap: 6px; min-width: 250px; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--surface) 85%, transparent); border: 1px solid var(--line); box-shadow: 0 8px 24px -16px color-mix(in srgb, var(--vr-a) 60%, transparent); backdrop-filter: blur(6px); }
.vr-number-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.vr-number-row { display: flex; align-items: center; gap: 10px; }
.vr-number-row b { font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: .01em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.vr-number small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.vr-number-empty { font-size: 16px; }
.vr-copy { margin-left: auto; }

/* Minuterna: stapel som fylls och blir röd när de tar slut */
.vr-minutes, .vr-sms { padding: 14px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); margin-bottom: 16px; }   /* samma kort för SMS (4.20.0) */
.vr-minutes-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.vr-minutes-top > span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; }
.vr-minutes-top b { font-size: 20px; font-variant-numeric: tabular-nums; } .vr-minutes-top b small { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.vr-bar { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.vr-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #22c55e, #16a34a); transition: width 1.1s cubic-bezier(.2, .8, .2, 1); position: relative; overflow: hidden; }
.vr-bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: translateX(-100%); animation: vr-shine 2.6s ease-in-out 1.2s infinite; }
@keyframes vr-shine { 60%, 100% { transform: translateX(100%); } }
.vr-minutes.lvl-near .vr-bar i { background: linear-gradient(90deg, #f59e0b, #ea580c); }
.vr-minutes.lvl-over .vr-bar i { background: linear-gradient(90deg, #ef4444, #dc2626); }
.vr-minutes.lvl-over { border-color: color-mix(in srgb, #ef4444 35%, var(--line)); background: color-mix(in srgb, #ef4444 4%, var(--surface)); }
.vr-minutes-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 12.5px; }
.vr-extra { color: #dc2626; font-weight: 600; }

/* Nyckeltal */
.vr-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.vr-kpi { --k: var(--vr-a); position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; animation: vr-up .5s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms) both; transition: transform .2s, box-shadow .2s; }
.vr-kpi:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--k) 70%, transparent); }
.vr-kpi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--k), color-mix(in srgb, var(--k) 30%, transparent)); }
.vr-kpi-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--k); background: color-mix(in srgb, var(--k) 12%, transparent); margin-bottom: 6px; }
.vr-kpi-label { font-size: 12.5px; color: var(--muted); }
.vr-kpi b { font-size: 24px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.vr-kpi small { font-size: 11.5px; color: var(--muted); }
.vr-kpi.c-violet { --k: #7c3aed; } .vr-kpi.c-green { --k: #16a34a; } .vr-kpi.c-blue { --k: #4f46e5; } .vr-kpi.c-amber { --k: #d97706; }
.vr-kpi.c-sky { --k: #0284c7; } .vr-kpi.c-slate { --k: #475569; } .vr-kpi.c-red { --k: #dc2626; }
.vr-card { border-radius: 16px; }
.vr-spark span { transform-origin: bottom; animation: vr-grow .6s cubic-bezier(.2, .7, .2, 1) both; height: var(--h); }
.vr-empty { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 6px 0; }
.vr-empty.big { flex-direction: column; text-align: center; padding: 38px 20px; gap: 6px; }
.vr-empty.big h3 { margin: 6px 0 0; color: var(--ink); } .vr-empty.big p { margin: 0; max-width: 380px; }
.vr-empty-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: var(--vr-a); background: color-mix(in srgb, var(--vr-a) 12%, transparent); }

/* Filter och samtalslistan */
.vr-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); margin-bottom: 14px; }
.vr-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.vr-filters select { min-width: 130px; }
.vr-table td { vertical-align: middle; }
.vr-id { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vr-time { display: block; font-variant-numeric: tabular-nums; } .vr-table td small { display: block; font-size: 11.5px; }
.vr-caller { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.vr-caller b { display: block; }
.vr-av { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font-size: 12px; font-weight: 700; font-style: normal; color: #fff; background: linear-gradient(135deg, var(--vr-a), var(--vr-b)); }
.vr-av.sm { width: 20px; height: 20px; font-size: 9.5px; }
.call-row { cursor: pointer; transition: background .15s; }

/* Samtalet som chatt, som i exemplet */
.vr-cd { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 16px; padding: 6px 4px 12px; }
@media (max-width: 900px) { .vr-cd { grid-template-columns: 1fr; } }
.vr-convo { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.vr-convo-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.vr-convo-head b { display: block; } .vr-convo-head small { font-size: 12px; }
.vr-convo-tabs button { display: inline-flex; align-items: center; gap: 5px; }
.vr-convo-body { max-height: 420px; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--surface-2); }
.vr-msg { max-width: 78%; display: flex; flex-direction: column; gap: 4px; animation: vr-up .3s ease both; }
.vr-msg.them { align-self: flex-end; align-items: flex-end; }
.vr-msg-who { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.vr-msg p { margin: 0; padding: 10px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }
.vr-msg.ai p { background: color-mix(in srgb, var(--vr-a) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--vr-a) 18%, transparent); border-top-left-radius: 4px; }
.vr-msg.them p { background: var(--surface); border: 1px solid var(--line); border-top-right-radius: 4px; }
.vr-audio { display: flex; align-items: center; gap: 12px; }
.vr-audio b, .vr-audio small { display: block; }
.vr-audio-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--vr-a); background: color-mix(in srgb, var(--vr-a) 12%, transparent); }
.vr-convo-body audio { width: 100%; margin-top: 12px; }
.vr-cd-side { display: flex; flex-direction: column; gap: 12px; }
.vr-sum { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--vr-a) 35%, var(--line)); background: color-mix(in srgb, var(--vr-a) 4%, var(--surface)); }
.vr-sum-head b { display: inline-flex; align-items: center; gap: 6px; }
.vr-sum-text { margin: 0; font-size: 13.5px; line-height: 1.55; }
.vr-facts { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }

/* Rapporter */
.vr-seg { margin-bottom: 14px; }
.vr-report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .vr-report-grid { grid-template-columns: 1fr; } }
.vr-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 4px 0 8px; } .vr-dot.violet { background: #8b5cf6; } .vr-dot.blue { background: #4f46e5; }
.vr-bars, .vr-hours { display: flex; align-items: flex-end; gap: 3px; height: 170px; }
.vr-bars span { flex: 1; height: 100%; position: relative; display: flex; align-items: flex-end; justify-content: center; }
.vr-bars i, .vr-bars em { position: absolute; bottom: 0; width: 70%; height: var(--h); border-radius: 5px 5px 2px 2px; transform-origin: bottom; animation: vr-grow .7s cubic-bezier(.2, .7, .2, 1) both; }
.vr-bars i { background: color-mix(in srgb, #8b5cf6 30%, transparent); } .vr-bars em { width: 40%; background: #4f46e5; animation-delay: .15s; }
.vr-hours span { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.vr-hours i { width: 100%; height: var(--h); max-height: calc(100% - 18px); border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--vr-b), var(--vr-a)); transform-origin: bottom; animation: vr-grow .7s cubic-bezier(.2, .7, .2, 1) both; }
.vr-hours small { font-size: 10px; color: var(--muted); height: 12px; }
.vr-types { display: flex; flex-direction: column; gap: 12px; }
.vr-types > div { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; font-size: 13px; }
.vr-types i { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.vr-types em { display: block; height: 100%; width: var(--w); border-radius: 999px; transform-origin: left; animation: vr-bar-in .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes vr-bar-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.voice-nav .nav-item.sys { opacity: .75; }
/* Nyckeltalen i jämna rader: 6 i en rad (översikt), 5 × 2 (rapporter) */
.vr-kpis.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.vr-kpis.ten { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1300px) { .vr-kpis.six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .vr-kpis.six, .vr-kpis.ten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Dagar utan samtal: en tunn grå markering */
.vr-spark { align-items: flex-end; gap: 3px; }
.vr-spark span.zero { background: var(--surface-2); }
.vr-report-grid > .card { margin-top: 0; }
.seg button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 8px; font-size: 12.5px; color: var(--ink-2); background: transparent; border: 0; cursor: pointer; font-family: inherit; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.vr-facts b.plain { font-weight: inherit; }

/* ══ AI Receptionist 4.12: två kolumner, guiden och en finare sidopanel ══════ */
.vr .page-inner.vr-wrap { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; padding-left: 28px; padding-right: 28px; }
.vr-main { min-width: 0; }
.vr-rail { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; }
.vr-panel { margin: 0 !important; border-radius: 16px; }
.vr-rail .vr-number { min-width: 0; }
.vr-rail .vr-number-row { flex-wrap: wrap; } .vr-rail .vr-number-row b { font-size: 20px; }
.vr-state { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); }
.vr-state b { display: block; font-size: 13.5px; } .vr-state small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.vr-state.ok { border-color: color-mix(in srgb, var(--green) 30%, var(--line)); background: color-mix(in srgb, var(--green) 5%, var(--surface)); }
.vr-state.ok .vs-dot { background: var(--green); animation: vs-pulse 2.4s ease-in-out infinite; }
.vr-hero { padding: 18px 22px; }
@media (max-width: 1100px) { .vr .page-inner.vr-wrap { grid-template-columns: 1fr; } .vr-rail { position: static; order: -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }

/* Sidopanelen: tydligare, varmare */
.voice-side .side-head h1 { font-size: 15px; letter-spacing: -.01em; background: linear-gradient(90deg, var(--ink), color-mix(in srgb, var(--accent) 70%, var(--ink))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.voice-nav { gap: 4px; }
.voice-nav .nav-item { position: relative; border: 1px solid transparent; transition: background .15s, border-color .15s, transform .15s; }
.voice-nav .nav-item:hover { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); transform: translateX(2px); }
.voice-nav .nav-item > .i { width: 30px; height: 30px; padding: 7px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line); flex: none; box-sizing: border-box; margin-top: 0; }
.voice-nav .nav-item.on { background: var(--surface); border-color: color-mix(in srgb, var(--accent) 25%, var(--line)); box-shadow: 0 6px 18px -12px color-mix(in srgb, var(--accent) 70%, transparent); }
.voice-nav .nav-item.on > .i { color: #fff; background: linear-gradient(135deg, var(--accent), #8b5cf6); border-color: transparent; }
.voice-nav .nav-item.on::before { content: ""; position: absolute; left: -10px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--accent); }

/* Guiden */
.vr-wizard { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; }
.vr-steps { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 22px; padding-bottom: 14px; }
.vr-step { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; color: var(--muted); font: inherit; font-size: 12px; position: relative; z-index: 1; }
.vr-step i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; background: var(--surface-2); border: 2px solid var(--line); transition: all .25s; }
.vr-step.on { color: var(--ink); font-weight: 600; } .vr-step.on i { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 16%, transparent); }
.vr-step.done i { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); }
.vr-steps-bar { position: absolute; left: 7%; right: 7%; top: 14px; height: 2px; background: var(--line); }
.vr-steps-bar em { display: block; height: 100%; width: 0; background: var(--accent); transition: width .4s cubic-bezier(.2, .8, .2, 1); }
.vr-pane { display: none; animation: vr-up .35s ease both; }
.vr-pane.on { display: block; }
.vr-pane h2 { margin: 0 0 6px; font-size: 20px; letter-spacing: -.01em; } .vr-pane > p.muted { margin: 0 0 16px; max-width: 640px; }
.vr-url { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); margin-bottom: 12px; }
.vr-url .input { border: 0; background: transparent; flex: 1; box-shadow: none; }
.vr-analyzing { display: flex; align-items: center; gap: 10px; color: var(--muted); margin: 8px 0 14px; }
.vr-analyzing .spin, .list-more .spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: bd-spin .8s linear infinite; }
.vr-profile { padding: 16px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 4%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); margin-bottom: 10px; animation: vr-up .35s ease both; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } @media (max-width: 800px) { .grid3 { grid-template-columns: 1fr; } }
.vr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vr-chips button { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 5px 12px; cursor: pointer; font: inherit; font-size: 12.5px; }
.vr-chips button:hover { border-color: var(--accent); color: var(--accent); }
.vr-langs { display: flex; flex-wrap: wrap; gap: 8px; }
.vr-langs label { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 13px; }
.vr-langs label:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.vr-voices { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.vr-voice { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.vr-goals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } @media (max-width: 800px) { .vr-goals { grid-template-columns: 1fr; } }
.vr-goal { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 16px; border: 2px solid var(--line); cursor: pointer; transition: all .2s; }
.vr-goal input { position: absolute; opacity: 0; }
.vr-goal:hover { transform: translateY(-2px); }
.vr-goal:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); box-shadow: 0 10px 26px -18px color-mix(in srgb, var(--accent) 80%, transparent); }
.vr-goal-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); margin-bottom: 4px; }
.vr-goal small { color: var(--muted); line-height: 1.45; }
.vr-hours-edit { display: flex; flex-direction: column; gap: 6px; }
.vr-hours-edit > div { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); }
.vr-hours-edit b { width: 90px; font-weight: 600; } .vr-hours-edit .input { width: 110px; }
.vr-hours-edit > div:has(input[type=checkbox]:not(:checked)) .input, .vr-hours-edit > div:has(input[type=checkbox]:not(:checked)) > span { display: none; }
.vr-toggle { position: relative; display: inline-flex; flex: none; }
.vr-toggle input { position: absolute; opacity: 0; }
.vr-toggle i { width: 36px; height: 20px; border-radius: 999px; background: var(--line-strong, #cbd5e1); position: relative; transition: background .2s; cursor: pointer; }
.vr-toggle i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.vr-toggle input:checked + i { background: var(--accent); } .vr-toggle input:checked + i::after { transform: translateX(16px); }
.vr-rule { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; }
.vr-rule [data-when] { flex: 2; min-width: 200px; } .vr-rule [data-number], .vr-rule [data-angry-number] { flex: 1; min-width: 140px; } .vr-rule input[type=time] { width: 110px; }
.vr-rule.angry { margin-top: 14px; background: color-mix(in srgb, #f59e0b 5%, var(--surface)); }
.vr-rule.angry > div { flex: 2; min-width: 200px; } .vr-rule.angry b, .vr-rule.angry small { display: block; }
.vr-opts { display: flex; flex-direction: column; gap: 10px; }
.vr-opt { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; }
.vr-opt b, .vr-opt small { display: block; } .vr-opt small { color: var(--muted); margin-top: 2px; }
.vr-opt-ico { width: 36px; height: 20px; display: grid; place-items: center; color: var(--accent); flex: none; }
.vr-summary { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.vr-sum-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); animation: vr-up .3s ease both; }
.vr-sum-row > span { font-size: 18px; line-height: 1.2; } .vr-sum-row small { display: block; color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; } .vr-sum-row b { font-weight: 500; font-size: 13.5px; line-height: 1.5; }
.vr-wiz-foot { display: flex; align-items: center; gap: 8px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.vr-create { padding: 10px 18px; font-size: 14px; background: linear-gradient(135deg, var(--accent), #8b5cf6); border: 0; box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--accent) 80%, transparent); }
.vr-lock { text-align: center; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.vr-lock h2 { margin: 6px 0 0; }
.vr-lock-ico { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.vr-plans { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 6px 0 10px; }
.vr-plans > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; min-width: 150px; }
.vr-plans small { color: var(--muted); }
@media (max-width: 700px) { .vr-steps span { display: none; } }
.vr-sub { margin: 10px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .vr-rules-card { margin-bottom: 16px; }
/* Planen räcker inte: bara ett lugnt besked i mitten */
.vr-locked { display: grid; place-items: center; min-height: calc(100vh - 120px); padding: 40px 20px; }
.vr-locked-box { max-width: 460px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; animation: vr-up .5s cubic-bezier(.2, .7, .2, 1) both; }
.vr-locked-art { position: relative; width: 112px; height: 112px; border-radius: 34px; display: grid; place-items: center; margin-bottom: 10px; color: var(--accent);
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, #8b5cf6 12%, transparent)); box-shadow: 0 20px 40px -24px color-mix(in srgb, var(--accent) 80%, transparent); }
.vr-locked-art i { position: absolute; right: -6px; bottom: -6px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--muted); border: 1px solid var(--line); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.vr-locked h1 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.vr-locked p { margin: 0; color: var(--muted); line-height: 1.6; }
.vr-locked-btn { margin-top: 10px; padding: 11px 20px; font-size: 14px; background: linear-gradient(135deg, var(--accent), #8b5cf6); border: 0; box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--accent) 90%, transparent); }
.vr-nav-group { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 12px 10px 4px; }
.vr-kind { margin-bottom: 4px; }
.vr-brain-head .card-body { display: flex; align-items: center; gap: 14px; }
.vr-brain-head .card-body > div { flex: 1; } .vr-brain-head b, .vr-brain-head small { display: block; }
.vr-brain-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--accent), #8b5cf6); flex: none; }
.vr-brain-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; } @media (max-width: 1000px) { .vr-brain-grid { grid-template-columns: minmax(0, 1fr); } }   /* minmax: en lång adress får inte göra kortet bredare än skärmen */
.vr-brain-grid > .card { margin: 0; }
.vr-source { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-top: 1px solid var(--line); }
.vr-source:first-child { border-top: 0; } .vr-source > div { flex: 1; min-width: 0; } .vr-source b, .vr-source small { display: block; } .vr-source b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vr-source-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); flex: none; }

/* ══ Flöden (som Shopify Flow) ═══════════════════════════════════════════ */
.vr-flow-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background .15s; }
.vr-flow-row:first-child { border-top: 0; } .vr-flow-row:hover { background: var(--surface-2); }
.vr-flow-row > div { flex: 1; min-width: 0; } .vr-flow-row b, .vr-flow-row small { display: block; }
.vr-flow-ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent); flex: none; }
.vr-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 8px; }
.vr-template { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px dashed color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 14px; color: var(--ink); text-decoration: none; background: var(--surface); transition: transform .15s, box-shadow .15s; }
.vr-template:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -16px color-mix(in srgb, var(--accent) 70%, transparent); }
.vr-flow-editor { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); overflow: hidden; }
.vr-flow-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.vr-flow-name { max-width: 360px; font-weight: 600; }
.vr-flow-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; min-height: 520px; }
@media (max-width: 1000px) { .vr-flow-body { grid-template-columns: 1fr; } }
.vr-canvas { position: relative; overflow: auto; background-color: var(--surface-2); background-image: radial-gradient(circle, color-mix(in srgb, var(--ink) 14%, transparent) 1px, transparent 1.2px); background-size: 18px 18px; }
.vr-nodes { position: relative; min-height: 100%; }
.vr-wires { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.vr-wires path { fill: none; stroke: var(--accent); stroke-width: 2; }
.vr-node { position: absolute; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 2px 8px rgba(20,24,40,.06); cursor: pointer; transition: box-shadow .15s, border-color .15s; animation: vr-up .3s ease both; }
.vr-node:hover { box-shadow: 0 8px 20px -10px rgba(20,24,40,.25); }
.vr-node.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.vr-node-head { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px 4px; font-size: 12px; color: var(--muted); }
.vr-node-head i { font-style: normal; color: var(--accent); }
.vr-node-body { margin: 4px 10px; padding: 9px 10px; border-radius: 8px; background: var(--surface-2); font-size: 13px; line-height: 1.4; min-height: 20px; }
.vr-node-body b { font-size: 13.5px; } .vr-node-body small { display: block; color: var(--muted); margin-top: 3px; }
.vr-node-ports { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding: 6px 12px 10px; font-size: 12px; color: var(--ink-2); }
.vr-node-ports span { display: inline-flex; align-items: center; gap: 8px; }
.vr-node-ports em, .vr-node-in { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); display: inline-block; }
.vr-node-ports em { margin-right: -18px; }
.vr-node-in { position: absolute; left: -6px; top: 32px; }
.vr-node.trigger .vr-node-in { display: none; }
.vr-node.condition .vr-node-head i { color: #d97706; } .vr-node.action .vr-node-head i { color: #16a34a; }
.vr-node.plus { display: flex; gap: 6px; padding: 8px; border-style: dashed; background: color-mix(in srgb, var(--surface) 70%, transparent); cursor: default; }
.vr-node.plus button { flex: 1; padding: 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font: inherit; font-size: 12.5px; }
.vr-node.plus button:hover { border-color: var(--accent); color: var(--accent); }
.vr-inspector { border-left: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); }
.vr-inspector h4 { margin: 0 0 4px; }
@media (max-width: 1000px) { .vr-inspector { border-left: 0; border-top: 1px solid var(--line); } }
.vr .page-inner.vr-wrap.vr-wide { grid-template-columns: minmax(0, 1fr); } .vr-wide .vr-flow-body { min-height: 600px; }

/* ══ Snabbsvar som ett hjälpcenter ═══════════════════════════════════════ */
.cn-head { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.cn-search { flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--muted); }
.cn-search .input { border: 0; box-shadow: none; background: transparent; padding-left: 0; }
.cn-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.cn-cat { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; text-align: left; font: inherit; color: var(--ink); transition: transform .15s, box-shadow .15s, border-color .15s; }
.cn-cat:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -16px rgba(20,24,40,.35); }
.cn-cat.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.cn-cat.add { border-style: dashed; }
.cn-cat small { color: var(--muted); font-size: 12px; }
.cn-cat-edit { position: absolute; top: 10px; right: 10px; opacity: 0; color: var(--muted); transition: opacity .15s; }
.cn-cat:hover .cn-cat-edit { opacity: 1; }
.cn-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); margin-bottom: 4px; flex: none; }
.cn-ico.sm { width: 34px; height: 34px; border-radius: 10px; margin: 0; }
.cn-catform { margin-bottom: 14px; animation: vr-up .3s ease both; }
.cn-iconpick { display: flex; flex-wrap: wrap; gap: 6px; }
.cn-iconpick input { position: absolute; opacity: 0; }
.cn-iconpick span { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--line); cursor: pointer; color: var(--ink-2); }
.cn-iconpick input:checked + span { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.cn-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1000px) { .cn-body { grid-template-columns: 1fr; } }
.cn-list { display: flex; flex-direction: column; gap: 8px; }
.cn-item { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.cn-item > div:nth-child(2) { flex: 1; min-width: 0; } .cn-item b { display: block; } .cn-item p { margin: 3px 0 6px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.cn-chip { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.cn-actions { display: flex; gap: 4px; }
.cn-editor { position: sticky; top: 16px; margin: 0; }
.cn-editor textarea { resize: vertical; }
.cn-menu-head { --c: var(--muted); display: flex; align-items: center; gap: 6px; padding: 8px 9px 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--c); }
.vr-prof-sec { padding: 12px 0 4px; border-top: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line)); }
.vr-prof-sec:first-child { border-top: 0; padding-top: 0; }
.vr-prof-sec h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.vr-social { display: flex; flex-wrap: wrap; gap: 6px; }
.vr-soc { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); text-decoration: none; }

/* ══ Systemadministrationen: grå sidopanel, sökfält överst, innehållet i en rundad panel ══ */
.sys2 { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; background: var(--bg, #f3f4f6); }
.sys2-side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 16px 12px; gap: 12px; }
.sys2-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 10px; color: var(--ink); text-decoration: none; }
.sys2-logo { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--ink); color: var(--surface); overflow: hidden; flex: none; }
.sys2-logo img { width: 100%; height: 100%; object-fit: cover; }
.sys2-brand b, .sys2-brand small { display: block; } .sys2-brand b { font-size: 14px; letter-spacing: -.01em; } .sys2-brand small { font-size: 11.5px; color: var(--muted); }
.sys2-nav { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.sys2-group { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint, var(--muted)); padding: 14px 10px 6px; }
.sys2-group:first-child { padding-top: 4px; }
.sys2-nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-size: 13.5px; transition: background .15s, color .15s; }
.sys2-nav a span { flex: 1; }
.sys2-nav a em { font-style: normal; font-size: 11px; font-weight: 700; min-width: 20px; text-align: center; padding: 1px 6px; border-radius: 999px; background: #ef4444; color: #fff; }
.sys2-nav a:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
.sys2-nav a.on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 0 0 1px var(--line); }
.sys2-foot { position: relative; }
.sys2-me { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font: inherit; color: var(--ink); text-align: left; }
.sys2-me > span:not(.avatar) { flex: 1; min-width: 0; } .sys2-me b, .sys2-me small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sys2-me small { font-size: 11.5px; color: var(--muted); }
.sys2-right { display: flex; flex-direction: column; min-width: 0; padding: 10px 12px 12px 0; }
.sys2-top { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 4px 8px; }
.sys2-search { display: flex; align-items: center; gap: 8px; width: min(520px, 100%); height: 38px; padding: 0 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.sys2-search input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--ink); }
.sys2-btn { height: 38px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); position: relative; }
.sys2-panel { flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: auto; box-shadow: 0 1px 3px rgba(16,24,40,.04); }
.sys2-panel > .page { background: transparent; }
.sys2-panel .page-inner { max-width: 1280px; padding: 26px 30px 40px; }
/* Sidornas egen kopia av menyn behövs inte längre */
.sys2 .sys-shell { display: block; }
.sys2 .sys-shell > .sys-nav { display: none; }
.sys2 .sys-main { max-width: none; }
.sys2 .page-head h1 { font-size: 24px; letter-spacing: -.02em; }
.sys2 .card { border-radius: 16px; }
@media (max-width: 900px) {
  .sys2 { grid-template-columns: 1fr; }
  .sys2-side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .sys2-nav { flex-direction: row; overflow-x: auto; flex-basis: 100%; order: 3; }
  .sys2-group, .sys2-foot { display: none; }
  .sys2-right { padding: 0 8px 8px; }
  .sys2-panel .page-inner { padding: 18px 16px 30px; }
}
/* System → AI Receptionist */
.sx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
@media (max-width: 1000px) { .sx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sx-stats > div { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.sx-stats small { color: var(--muted); font-size: 12.5px; } .sx-stats b { font-size: 26px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sx-stats em { font-style: normal; font-size: 12px; color: #b45309; }
.sx-stats .warn { border-color: color-mix(in srgb, #f59e0b 40%, var(--line)); background: color-mix(in srgb, #f59e0b 5%, var(--surface)); }
.sx-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); margin-bottom: 6px; }
.sx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; align-items: stretch; }
@media (max-width: 900px) { .sx-grid { grid-template-columns: 1fr; } }
.sx-grid > .card, .sx-add { margin: 0 0 14px; } .sx-grid > .card { margin: 0; }
.sx-list > div { display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-top: 1px solid var(--line); }
.sx-list > div:first-child { border-top: 0; } .sx-list b { flex: 1; font-weight: 500; } .sx-list small { color: var(--muted); }
.sx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong, #cbd5e1); flex: none; }
.sx-dot.ok { background: #16a34a; box-shadow: 0 0 0 3px color-mix(in srgb, #16a34a 18%, transparent); } .sx-dot.bad { background: #ef4444; }
/* 4.17.0: kopplingen Telnyx → ElevenLabs i System – SIP-fält på en rad och kontrollen per företag */
.sx-sip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 12px; align-items: end; }
.sx-diag { border-top: 1px solid var(--line); }
.sx-diag-ws { padding: 14px 18px; border-top: 1px solid var(--line); } .sx-diag-ws:first-child { border-top: 0; }
.sx-diag-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.sx-diag-step { font-size: 12.5px; padding: 6px 10px; border-radius: 7px; margin-bottom: 6px; background: var(--surface-2); }
.sx-diag-step.bad { background: var(--red-soft); color: var(--red); }
.sx-diag-table td { vertical-align: top; padding-top: 9px; padding-bottom: 9px; }
.sx-diag-table td small.muted { display: block; font-size: 11px; }
.sx-diag-table .sx-diag-mark { width: 22px; padding-right: 0; } .sx-diag-mark .sx-dot { margin-top: 5px; }
.sx-diag-table tr.bad b { color: var(--red); }
.sx-fix { display: block; margin-top: 3px; color: var(--ink); font-size: 12px; }
@media (max-width: 900px) { .sx-sip { grid-template-columns: 1fr; } }
.sx-add-row { display: flex; gap: 10px; align-items: flex-start; } .sx-add-row textarea { flex: 1; resize: vertical; }
.sys2-me > span.avatar { flex: none; }
.sys2 .card-head { justify-content: space-between; }
.sys2 .card-head > div:first-child { min-width: 0; }

/* ══ AI Receptionist 4.14: lugn, nästan enfärgad stil (som Claude och ElevenLabs) ══════════
   Svart för det viktigaste, grått för resten och färg bara där den betyder något (minuter, status). */
.vr, .voice-side { --vr-a: var(--ink); --vr-b: var(--ink); }
.vr .btn.primary, .voice-side .btn.primary { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.vr .btn.primary:hover { opacity: .88; }
.vr-hero { background: transparent; border: 0; padding: 4px 2px 6px; }
.vr-hero h1 { font-size: 28px; font-weight: 650; letter-spacing: -.025em; }
.vr-eyebrow { color: var(--muted); font-weight: 600; letter-spacing: .08em; }
.vr-card, .vr-kpi, .vr-panel, .vr-minutes, .vr-number, .vr-wizard, .vr-filters { border-radius: 16px; box-shadow: none; }
.vr-kpi::before { display: none; }
.vr-kpi { --k: var(--ink-2); }
.vr-kpi-ico { width: 32px; height: 32px; border-radius: 10px; color: var(--ink-2); background: var(--surface-2); }
.vr-kpi b { font-size: 28px; font-weight: 650; letter-spacing: -.03em; }
.vr-kpi:hover { box-shadow: 0 8px 24px -18px rgba(16,24,40,.35); }
.vr-number { background: var(--surface); backdrop-filter: none; }
.vr-empty-ico, .vr-goal-ico, .vr-source-ico, .vr-flow-ico, .vr-audio-ico { color: var(--ink-2); background: var(--surface-2); }
.vr-brain-ico { background: var(--ink); }
.vr-av { background: var(--surface-2); color: var(--ink-2); }
.vr-msg.ai p { background: var(--surface); border-color: var(--line); }
.vr-msg.them p { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.vr-sum { border-style: solid; border-color: var(--line); background: var(--surface-2); }
.vr-profile { background: var(--surface-2); border-color: var(--line); }
.vr-prof-sec h4 { color: var(--ink-2); }
.vr-step.on i { background: var(--ink); border-color: var(--ink); color: var(--surface); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ink) 8%, transparent); }
.vr-step.done i { background: var(--surface-2); border-color: var(--ink-2); color: var(--ink); }
.vr-steps-bar em { background: var(--ink); }
.vr-goal:has(input:checked) { border-color: var(--ink); background: var(--surface); box-shadow: 0 10px 26px -20px rgba(16,24,40,.5); }
.vr-toggle input:checked + i { background: var(--ink); }
.vr-langs label:has(input:checked) { border-color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--ink); }
.vr-create, .vr-locked-btn { background: var(--ink); box-shadow: 0 10px 24px -14px rgba(16,24,40,.6); }
.vr-locked-art { background: var(--surface-2); color: var(--ink); box-shadow: none; }
.vr-wires path { stroke: var(--ink-2); stroke-width: 1.6; }
.vr-node-ports em, .vr-node-in { background: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 12%, transparent); }
.vr-node.on { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 10%, transparent); }
.cn-cat.on { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 8%, transparent); }
/* Sidopanelen */
.voice-side .side-head h1 { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--ink); }
.voice-nav .nav-item > .i { background: transparent; border-color: transparent; color: var(--ink-2); }
.voice-nav .nav-item:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); transform: none; }
.voice-nav .nav-item.on { background: var(--surface); border-color: var(--line); box-shadow: 0 1px 2px rgba(16,24,40,.06); }
.voice-nav .nav-item.on > .i { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.voice-nav .nav-item.on::before { background: var(--ink); }
/* Receptionistens kort på översikten */
.vr-agent { display: flex; align-items: center; gap: 20px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); margin-bottom: 16px; animation: vr-up .45s cubic-bezier(.2, .7, .2, 1) both; }
.vr-agent-av { position: relative; flex: none; }
.vr-agent-av .vr-avatar { display: block; border-radius: 22px; }
.vr-agent-av i { position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; border-radius: 50%; background: #9ca3af; border: 3px solid var(--surface); }
.vr-agent-av i.on { background: #22c55e; }
.vr-agent-info { flex: 1; min-width: 0; }
.vr-agent-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vr-agent-name h1 { margin: 0; font-size: 26px; font-weight: 650; letter-spacing: -.025em; }
.vr-agent-info p { margin: 4px 0 0; font-size: 13.5px; }
.vr-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--muted); }
.vr-status i { width: 7px; height: 7px; border-radius: 50%; background: #9ca3af; }
.vr-status.on { background: color-mix(in srgb, #22c55e 12%, var(--surface)); color: #15803d; }
.vr-status.on i { background: #22c55e; animation: vs-pulse 2.4s ease-in-out infinite; }
.vr-agent-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 700px) { .vr-agent { flex-wrap: wrap; } }
.vs-av { position: relative; flex: none; }
.vs-av .vr-avatar { display: block; border-radius: 11px; }
.vs-av .vs-dot { position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border: 2px solid var(--surface); margin: 0; }
.voice-status { align-items: center; }
.vr .card-head { justify-content: space-between; }
/* Systeminställningar: grupperad meny till vänster */
.set2 { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: start; }
.set2-nav { position: sticky; top: 8px; display: flex; flex-direction: column; gap: 2px; }
.set2-group { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 12px 10px 5px; }
.set2-group:first-child { padding-top: 0; }
.set2-nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-size: 13.5px; }
.set2-nav a span { flex: 1; } .set2-nav a em { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: #ef4444; color: #fff; }
.set2-nav a:hover { background: var(--surface-2); color: var(--ink); }
.set2-nav a.on { background: var(--surface-2); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); }
.set2-body { min-width: 0; }
.set2-body > .card:first-child, .set2-body > .stat-row:first-child { margin-top: 0; }
@media (max-width: 900px) { .set2 { grid-template-columns: 1fr; } .set2-nav { position: static; flex-direction: row; overflow-x: auto; } .set2-group { display: none; } }
/* Mobil: menyn rullar i sidled inom sig själv i stället för att göra sidan bredare */
@media (max-width: 900px) {
  .sys2 { grid-template-columns: minmax(0, 1fr); }
  .sys2-side, .sys2-right, .sys2-nav, .sys2-panel { min-width: 0; max-width: 100%; }
  .sys2-nav a { flex: none; }
  .sys2-top { flex-wrap: wrap; height: auto; gap: 6px; }
  .sys2-search { width: 100%; order: 3; }
}
.dl-now { display: flex; align-items: center; gap: 12px; } .dl-now > div { flex: 1; } .dl-now b, .dl-now small { display: block; }
.dl-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink); flex: none; }
.menu-dl { font-weight: 600; }

/* ══ Systemadministrationen 4.15: som i förlagan – ljus sidopanel, en stor vit panel med rubrikrad ══ */
.sys2 { grid-template-columns: 236px minmax(0, 1fr); background: #eceef1; padding: 0; }
[data-theme="dark"] .sys2 { background: var(--bg); }
.sys2-side { padding: 18px 14px 14px; gap: 6px; }
.sys2-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 14px; }
.sys2-brand { padding: 0; gap: 10px; }
.sys2-brand b { font-size: 15px; }
.sys2-logo { width: 32px; height: 32px; border-radius: 10px; background: var(--ink); color: var(--surface); }
.sys2-collapse { width: 30px; height: 30px; border-radius: 8px; border: 0; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.sys2-collapse:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.sys2-gap { height: 10px; } .sys2-gap:first-child { height: 0; }
.sys2-nav a { padding: 9px 12px; font-size: 14px; color: var(--ink-2); border-radius: 12px; }
.sys2-nav a .i { color: var(--muted); }
.sys2-nav a.on { background: var(--surface); box-shadow: 0 1px 2px rgba(16,24,40,.05); font-weight: 500; }
.sys2-nav a.on .i { color: var(--ink); }
.sys2-bottom { flex: none; border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); padding-top: 10px; margin-top: 6px; }
.sys2-me { border: 0; background: transparent; padding: 8px 10px; gap: 10px; }
.sys2-me:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.sys2-panel { margin: 12px 12px 12px 0; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent); box-shadow: 0 1px 3px rgba(16,24,40,.04); display: flex; flex-direction: column; overflow: hidden; height: calc(100vh - 24px); }
.sys2-bar { display: flex; align-items: center; gap: 8px; padding: 16px 26px; border-bottom: 1px solid var(--line); flex: none; }
.sys2-title { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.sys2-search { width: min(300px, 40vw); height: 40px; border-radius: 999px; background: var(--surface); padding: 0 14px; }
.sys2-icon { position: relative; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; color: var(--ink-2); cursor: pointer; text-decoration: none; }
.sys2-icon:hover { color: var(--ink); background: var(--surface-2); }
.sys2-content { flex: 1; overflow: auto; }
.sys2-content > .page { background: transparent; }
.sys2-content .page-inner { max-width: 1320px; padding: 24px 26px 40px; }
/* Sidornas egen rubrik blir avsnittets rubrik ("Översikt" i förlagan) – titeln står redan i rubrikraden */
.sys2 .page-head { margin-bottom: 18px; }
.sys2 .page-head h1 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.sys2 .page-head p { font-size: 13px; }
.sys2 .card { border-radius: 18px; border-color: color-mix(in srgb, var(--ink) 7%, transparent); box-shadow: none; }
.sys2 .card-head h3 { font-size: 15px; font-weight: 600; }
/* Hopfälld meny: bara ikoner */
.sys2-min { grid-template-columns: 76px minmax(0, 1fr); }
.sys2-min .sys2-brand b, .sys2-min .sys2-nav a span, .sys2-min .sys2-nav a em, .sys2-min .sys2-me > span:not(.avatar) { display: none; }
.sys2-min .sys2-head { flex-direction: column; gap: 10px; }
.sys2-min .sys2-nav a { justify-content: center; padding: 10px; }
.sys2-min .sys2-me { justify-content: center; }
@media (max-width: 900px) {
  .sys2-panel { margin: 0 8px 8px; height: auto; min-height: 70vh; }
  .sys2-bar { padding: 12px 16px; flex-wrap: wrap; } .sys2-search { width: 100%; order: 5; }
  .sys2-head { padding-bottom: 4px; } .sys2-collapse, .sys2-bottom .pop { display: none; }
  .sys2-bottom { border-top: 0; flex-direction: row; overflow-x: auto; }
  .sys2-content .page-inner { padding: 16px; }
}
/* Översiktens kort med små stapeldiagram */
.ovm-title { margin: 4px 0 14px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.ovm { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; padding: 10px; border-radius: 22px; background: var(--surface-2); }
@media (max-width: 1100px) { .ovm { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ovm { grid-template-columns: 1fr; } }
.ovm-card { display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 16px; border-radius: 18px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); text-decoration: none; transition: transform .2s, box-shadow .2s; animation: vr-up .45s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms) both; }
a.ovm-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -20px rgba(16,24,40,.4); }
.ovm-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.ovm-head svg { color: var(--ink-2); }
.ovm-bars { display: flex; align-items: flex-end; gap: 6%; height: 86px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.ovm-bars i { flex: 1; border-radius: 99px; background: color-mix(in srgb, var(--c) 22%, transparent); transform-origin: bottom; animation: vr-grow .7s cubic-bezier(.2, .7, .2, 1) both; }
.ovm-bars i.hi { box-shadow: 0 6px 14px -6px var(--c); }
.ovm-foot { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ovm-foot b { font-size: 26px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ovm-foot small { font-size: 12.5px; color: var(--muted); }
.ovm-foot .ov-d { font-weight: 600; }
.sys2 .btn.primary { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.sys2 .btn.primary:hover { opacity: .88; }
.sys2 .page-head:has(h1.sr) { margin-top: -4px; }
.vr-goals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .vr-goals { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .vr-goals { grid-template-columns: 1fr; } }
.vr-goal::after { content: ""; position: absolute; top: 14px; right: 14px; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--line-strong, #cbd5e1); background: var(--surface); }
.vr-goal:has(input:checked)::after { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat; border-color: var(--ink); }
/* Språk och röster */
.lv-rows { display: flex; flex-direction: column; gap: 8px; }
.lv-row { display: grid; grid-template-columns: 38px minmax(150px, 220px) minmax(0, 1fr) 34px; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.lv-flag { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 12px; font-weight: 700; letter-spacing: .04em; background: var(--surface-2); color: var(--ink); }
.lv-pick { position: relative; min-width: 0; display: flex; align-items: center; gap: 8px; }
.lv-pick > .lv-btn { flex: 1; min-width: 0; }
.lv-btn { width: 100%; height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; font: inherit; color: var(--ink); text-align: left; }
.lv-btn:hover { border-color: var(--ink-2); }
.lv-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-menu { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; max-height: 320px; overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 18px 40px -18px rgba(16,24,40,.35); }
.lv-loading { padding: 12px; color: var(--muted); font-size: 13px; }
.lv-opt { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; cursor: pointer; }
.lv-opt:hover { background: var(--surface-2); } .lv-opt.on { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--ink); }
.lv-name { min-width: 0; } .lv-name b, .lv-name small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lv-name b { font-weight: 500; } .lv-name small { color: var(--muted); font-size: 11.5px; }
.lv-play { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; flex: none; }
.lv-play:hover, .lv-play.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
/* 4.16.1: hämtar ljudet – pulserande kant tills det spelar; knappen bredvid vald röst; rubrik i listan */
.lv-play.wait { border-color: var(--ink); animation: lvPulse 1s ease-in-out infinite; }
.lv-play:disabled { opacity: .35; cursor: default; }
.lv-cur { width: 38px; height: 38px; flex: none; }
.lv-cur ~ .lv-menu { left: 46px; }   /* listan börjar under fältet, inte under ▶ (38 px + 8 px mellanrum) */
@keyframes lvPulse { 50% { opacity: .45; } }
.lv-menu-head { padding: 6px 8px 8px; font-size: 11.5px; color: var(--muted); }
/* 4.17.1: val med förklaring (t.ex. när ett ärende skapas) */
.vr-radio { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; margin-top: 6px; cursor: pointer; }
.vr-radio:has(input:checked) { border-color: var(--ink); }
.vr-radio input { margin-top: 3px; accent-color: var(--ink); }
.vr-radio b { display: block; font-weight: 600; font-size: 13px; } .vr-radio small { color: var(--muted); font-size: 12px; }
.lv-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.lv-foot small { color: var(--muted); }
@media (max-width: 700px) { .lv-row { grid-template-columns: 38px minmax(0, 1fr) 34px; } .lv-pick { grid-column: 1 / -1; grid-row: 2; } }
/* Receptionisten */
.ra-id { display: flex; align-items: center; gap: 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); margin-bottom: 14px; }
.ra-av .vr-avatar { display: block; border-radius: 20px; }
.ra-id-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ra-label { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ra-name { border: 0; outline: 0; background: transparent; font: inherit; font-size: 26px; font-weight: 650; letter-spacing: -.025em; color: var(--ink); padding: 2px 0; border-bottom: 1px dashed transparent; }
.ra-name:hover, .ra-name:focus { border-bottom-color: var(--line); }
.ra-active { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; }
.ra-active b, .ra-active small { display: block; } .ra-active small { color: var(--muted); font-size: 12px; }
.ra-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ra-grid > .card { margin: 0; } .ra-wide { grid-column: 1 / -1; }
@media (max-width: 1000px) { .ra-grid { grid-template-columns: 1fr; } }
.ra-grid .card-head h3 { display: flex; align-items: center; gap: 8px; }
.ra-tones { display: flex; flex-wrap: wrap; gap: 6px; }
.ra-tones input { position: absolute; opacity: 0; }
.ra-tones span { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); cursor: pointer; font-size: 13px; }
.ra-tones input:checked + span { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.ra-save { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); z-index: 5; }

/* ══ Systemadministrationen 4.16: mörk sidopanel, vitt innehåll ══════════════════════════ */
.sys2 { --side-bg: #111317; --side-ink: #f3f4f6; --side-ink-2: #c4c7cc; --side-muted: #8b9098; --side-hover: rgba(255,255,255,.06); --side-on: rgba(255,255,255,.1); background: var(--side-bg); }
.sys2-side { color: var(--side-ink); }
.sys2-brand, .sys2-brand b { color: var(--side-ink); }
.sys2-logo { background: #fff; color: #111317; }
.sys2-collapse { color: var(--side-muted); } .sys2-collapse:hover { background: var(--side-hover); color: var(--side-ink); }
.sys2-nav a { color: var(--side-ink-2); }
.sys2-nav a .i { color: var(--side-muted); }
.sys2-nav a:hover { background: var(--side-hover); color: var(--side-ink); }
.sys2-nav a.on { background: var(--side-on); color: #fff; box-shadow: none; font-weight: 500; }
.sys2-nav a.on .i { color: #fff; }
.sys2-nav a em { background: #ef4444; }
.sys2-bottom { border-top-color: rgba(255,255,255,.08); }
.sys2-me { color: var(--side-ink); } .sys2-me:hover { background: var(--side-hover); } .sys2-me small { color: var(--side-muted); }
.sys2-panel { background: #fff; border: 0; margin: 10px 10px 10px 0; box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 10px 30px -20px rgba(0,0,0,.6); }
.sys2-bar { background: #fff; }
[data-theme="dark"] .sys2-panel, [data-theme="dark"] .sys2-bar { background: var(--surface); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sys2-panel, :root:not([data-theme="light"]) .sys2-bar { background: var(--surface); } }
.sys2 .ovm { background: #f6f7f9; }
[data-theme="dark"] .sys2 .ovm { background: var(--surface-2); }
@media (max-width: 900px) { .sys2-panel { margin: 0 6px 6px; } }
/* body.sys-body har högre precision än .sys2 – därför samma form här */
body.sys-body.sys2 { background: var(--side-bg); }
.sys2-side { background: var(--side-bg); }

/* 4.18.0: farozon – ta bort receptionisten */
.vr-danger { border-color: color-mix(in srgb, var(--red) 30%, var(--line)); margin-top: 16px; }
.vr-danger .card-body { display: flex; align-items: center; gap: 16px; justify-content: space-between; flex-wrap: wrap; }
.vr-danger b { display: block; font-size: 13.5px; } .vr-danger small { color: var(--muted); font-size: 12.5px; }
.btn.danger-outline { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, var(--line)); background: transparent; }
.btn.danger-outline:hover { background: var(--red-soft); }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; } .btn.danger:disabled { opacity: .45; cursor: not-allowed; }
.vr-danger-note { display: flex; gap: 10px; padding: 12px 14px; border-radius: 8px; background: var(--red-soft); color: var(--red); }
.vr-danger-note b { display: block; } .vr-danger-note small { color: var(--ink); opacity: .8; }
.vr-danger-list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.8; }

/* 4.18.0: Hjärnan – levande källor */
.vr-live-when { display: flex; gap: 8px; margin-top: 8px; } .vr-live-when select { flex: 1; } .vr-live-when input { width: 110px; }
.vr-live-info { display: inline-flex; align-items: center; gap: 4px; color: var(--green); font-size: 11.5px; margin-top: 2px; }
.vr-source-act { display: flex; gap: 2px; }

/* 4.18.0: bredare ruta (Instruktioner och ton) */
dialog.modal.vr-modal-wide { width: min(720px, calc(100vw - 32px)); }
.vr-modal-wide .modal-head > [data-close] { margin-left: auto; }

/* 4.18.0: pågående samtal under "Svarar just nu" */
.vr-live-calls { margin-top: 12px; }
.vr-live-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 12.5px; }
.vr-live-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.vr-live-calls.has-calls .vr-live-count { background: var(--green-soft); color: var(--green); }
.vr-live-list { display: flex; flex-direction: column; gap: 6px; }
.vr-live-call { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); animation: vrLiveIn .3s ease-out; transition: opacity .4s ease, transform .4s ease, max-height .4s ease, padding .4s ease, margin .4s ease; max-height: 80px; overflow: hidden; }
.vr-live-call.ending { opacity: 0; transform: translateX(8px); max-height: 0; padding-top: 0; padding-bottom: 0; border-width: 0; }
@keyframes vrLiveIn { from { opacity: 0; transform: translateY(-4px); } }
.vr-live-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--green); flex: none; box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); animation: vrPulse 1.6s infinite; }
@keyframes vrPulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.vr-live-who { flex: 1; min-width: 0; } .vr-live-who b { display: block; font-size: 13px; font-variant-numeric: tabular-nums; } .vr-live-who small { color: var(--muted); font-size: 11.5px; }
.vr-live-timer { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; }
.vr-live-empty { display: flex; gap: 10px; align-items: center; padding: 10px 2px 2px; } .vr-live-empty[hidden] { display: none; }
.vr-live-empty-ico { width: 30px; height: 30px; border-radius: 8px; background: var(--surface-2); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.vr-live-empty b { display: block; font-size: 12.5px; font-weight: 600; } .vr-live-empty small { color: var(--muted); font-size: 11.5px; }

/* 4.18.2: välj receptionistens figur */
.ra-id { position: relative; }
.ra-av-btn { position: relative; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 18px; }
.ra-av-btn em { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); font-style: normal; }
.ra-av-btn:hover em, .ra-av-btn:focus-visible em { border-color: var(--ink); }
.ra-av-pop { position: absolute; z-index: 30; top: 92px; left: 16px; width: min(420px, calc(100vw - 48px)); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-pop); padding: 14px; }
.ra-av-head { margin-bottom: 10px; } .ra-av-head b { display: block; font-size: 13.5px; } .ra-av-head small { color: var(--muted); font-size: 12px; }
.ra-av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.ra-av-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); cursor: pointer; }
.ra-av-opt:hover { border-color: var(--line-strong, #cbd5e1); } .ra-av-opt.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }
.ra-av-opt small { font-size: 11px; color: var(--muted); }

/* ── 4.18.3: System (superadmin) på mobil ──
   Ligger sist och med body.sys-body framför: regeln ".sys2 { grid-template-columns: 236px … }" längre upp
   stod utanför media-frågan och tog över de tidigare mobilreglerna – menyn tog halva skärmen. */
@media (max-width: 900px) {
  body.sys-body.sys2 { grid-template-columns: minmax(0, 1fr); }   /* .sys2 sitter på body – därför utan mellanslag */
  body.sys-body .sys2-side { position: sticky; top: 0; z-index: 30; height: auto; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 4px;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px; overflow-x: auto; scrollbar-width: none; background: inherit; }
  body.sys-body .sys2-side::-webkit-scrollbar { display: none; }
  body.sys-body .sys2-head { padding: 0 4px 0 0; flex: none; }
  body.sys-body .sys2-brand b, body.sys-body .sys2-collapse, body.sys-body .sys2-gap { display: none; }
  body.sys-body .sys2-nav { display: flex; flex-direction: row; flex: none; gap: 2px; margin: 0; }
  body.sys-body .sys2-nav a { white-space: nowrap; padding: 8px 11px; font-size: 13px; }
  body.sys-body .sys2-bottom { border-top: 0; margin: 0 0 0 4px; padding: 0 0 0 6px; border-left: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
  body.sys-body .sys2-me > span { display: none; }
  body.sys-body .sys2-panel { margin: 0; border-radius: 16px 16px 0 0; min-width: 0; }
  body.sys-body .sys2-bar { flex-wrap: wrap; padding: 12px 14px; row-gap: 10px; }
  body.sys-body .sys2-title { font-size: 18px; flex: 1; min-width: 0; }
  body.sys-body .sys2-search { order: 3; width: 100%; flex: 1 1 100%; }
  body.sys-body .sys2-search input { min-width: 0; width: 100%; }
  body.sys-body .sys2-content .page-inner { padding: 16px 14px 32px; }
  body.sys-body .sys2-content .page-head { flex-wrap: wrap; gap: 10px; }
  body.sys-body .sys2-content .grid2, body.sys-body .sys2-content .grid3, body.sys-body .sys2-content .grid4 { grid-template-columns: minmax(0, 1fr); }
  /* Tabeller skrollar i sidled inom sitt eget kort i stället för att klippas */
  body.sys-body .sys2-content table.sys-table { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
  body.sys-body .sys2-content .card, body.sys-body .sys2-content form, body.sys-body .sys2-content .input { max-width: 100%; min-width: 0; }
}

/* ── 4.18.3: samtalslistan på mobil – varje samtal blir ett kort (tabellen var 496 px bred och klipptes) ── */
@media (max-width: 700px) {
  .calls thead { display: none; }
  .calls, .calls tbody { display: block; width: 100%; }
  .calls tr.call-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who time" "tags id"; gap: 6px 10px; padding: 12px 12px; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
  .calls tr.call-row td { display: block; padding: 0; border: 0; background: none; min-width: 0; }
  .calls tr.call-row.open { background: var(--accent-soft); }
  .calls tr.call-row td:nth-child(1) { grid-area: id; text-align: right; font-size: 12px; color: var(--muted); }
  .calls tr.call-row td:nth-child(2) { grid-area: time; text-align: right; }
  .calls tr.call-row td:nth-child(3) { grid-area: who; }
  .calls tr.call-row td:nth-child(4), .calls tr.call-row td:nth-child(5) { grid-area: tags; display: inline-flex; }
  .calls tr.call-row td:nth-child(5) { margin-left: 74px; }
  .calls tr.call-row .vr-caller b, .calls tr.call-row .vr-caller small { overflow-wrap: anywhere; }
  .calls tr.call-detail { display: block; } .calls tr.call-detail.hidden { display: none; }
  .calls tr.call-detail td { display: block; width: 100%; padding: 0 10px 14px; }
  .calls tr.call-detail .cd { grid-template-columns: minmax(0, 1fr); }
  .calls tr.call-detail * { max-width: 100%; }
  .calls tr.call-detail .bubble, .calls tr.call-detail [class*="msg"] { overflow-wrap: anywhere; }
}

/* 4.18.3: öppettider och källor på mobil */
@media (max-width: 520px) {
  .vr-hours-edit > div { gap: 8px; padding: 8px 10px; }
  .vr-hours-edit b { width: 64px; flex: none; font-size: 13px; }
  .vr-hours-edit .input { width: auto; flex: 1 1 0; min-width: 0; }
  .vr-source > div, .vr-source b, .vr-source small { min-width: 0; overflow-wrap: anywhere; }
}

/* 4.19.0: System → Domäner */
.dm-list { border-top: 1px solid var(--line); }
.dm-domain { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.dm-domain form { margin: 0; }
.dm-host { flex: 1; min-width: 200px; } .dm-host b { display: block; font-size: 14px; } .dm-host small { color: var(--muted); font-size: 12px; }
.dm-add { display: flex; gap: 10px; } .dm-add .input { flex: 1; min-width: 0; }
.dm-steps section { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.dm-steps h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 14px; }
.dm-steps h4 span { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--surface); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.dm-steps p { margin: 8px 0 4px; font-size: 12.5px; }
.dm-row { display: grid; grid-template-columns: minmax(160px, 240px) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px dashed var(--line); }
.dm-l b { display: block; font-size: 12.5px; font-weight: 600; } .dm-l small { color: var(--muted); font-size: 11.5px; }
.dm-row code { font-size: 12.5px; background: var(--surface-2); padding: 6px 9px; border-radius: 7px; overflow-wrap: anywhere; }
.dm-auto { margin: 4px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.8; }
@media (max-width: 700px) { .dm-row { grid-template-columns: minmax(0, 1fr) auto; } .dm-row .dm-l { grid-column: 1 / -1; } .dm-add { flex-direction: column; } }

/* 4.20.0: System → SMS */
.sms-plans { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.sms-plans div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 6px 0; border-top: 1px dashed var(--line); }
.sms-plans span { color: var(--muted); }

.sms-sender { display: flex; gap: 4px; align-items: center; margin: 0; } .sms-sender .input { width: 140px; }

/* 4.20.2: varning när workern inte körs (automatiska uppdateringar väntar) */
.vr-live-warn { display: flex; gap: 6px; align-items: center; margin-top: 8px; color: var(--amber, #b45309); font-size: 12px; }

/* 4.20.2: kalendern glider in åt det håll man svepte */
[data-cal-body] { touch-action: pan-y; }
.cal-swipe-l { animation: calInL .28s ease-out; } .cal-swipe-r { animation: calInR .28s ease-out; }
.cal-swipe-u { animation: calInU .28s ease-out; } .cal-swipe-d { animation: calInD .28s ease-out; }
@keyframes calInL { from { opacity: .3; transform: translateX(36px); } } @keyframes calInR { from { opacity: .3; transform: translateX(-36px); } }
@keyframes calInU { from { opacity: .3; transform: translateY(36px); } } @keyframes calInD { from { opacity: .3; transform: translateY(-36px); } }
@media (prefers-reduced-motion: reduce) { .cal-swipe-l, .cal-swipe-r, .cal-swipe-u, .cal-swipe-d { animation: none; } }

/* ══ 4.21.1: projektsidor med Notions utseende ═══════════════════════════════════════════
   Notions typsnitt, färger (#37352F), radavstånd och avstånd mellan block; undersidor som rader med ikon;
   databaser som Notions tabeller med etiketter. Sist i filen och med article.doc framför, så att inget
   tidigare tar över. */
article.doc {
  --n-text: #37352F; --n-muted: rgba(55, 53, 47, .65); --n-faint: rgba(55, 53, 47, .45); --n-line: rgba(55, 53, 47, .16);
  --n-hover: rgba(55, 53, 47, .06); --n-under: rgba(55, 53, 47, .25);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif;
  color: var(--n-text); -webkit-font-smoothing: antialiased;
}
html[data-theme="dark"] article.doc { --n-text: rgba(255, 255, 255, .88); --n-muted: rgba(255, 255, 255, .55); --n-faint: rgba(255, 255, 255, .4); --n-line: rgba(255, 255, 255, .13); --n-hover: rgba(255, 255, 255, .06); --n-under: rgba(255, 255, 255, .25); }
article.doc .doc-inner { max-width: 708px; margin: 0 auto; padding: 72px 24px 30vh; }
article.doc .doc-title-row { display: block; margin-bottom: 14px; }
article.doc .doc-ico { font-size: 70px; line-height: 1; width: auto; height: auto; padding: 4px; margin: 0 0 6px -4px; border: 0; background: none; border-radius: 6px; color: var(--n-faint); }
article.doc .doc-ico svg { width: 64px; height: 64px; }
article.doc .doc-ico:hover:not(:disabled) { background: var(--n-hover); }
article.doc h1.doc-title { font-size: 40px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; margin: 0; color: var(--n-text); }
article.doc .blocks { font-size: 16px; line-height: 1.5; }
article.doc .bk { margin: 1px 0; }
article.doc .bk-in { padding: 3px 2px; }
article.doc .bkt-h1 .bk-text { font-size: 1.875em; font-weight: 600; line-height: 1.3; margin-top: 1.4em; }
article.doc .bkt-h2 .bk-text { font-size: 1.5em; font-weight: 600; line-height: 1.3; margin-top: 1.1em; }
article.doc .bkt-h3 .bk-text { font-size: 1.25em; font-weight: 600; line-height: 1.3; margin-top: 1em; }
article.doc .bk-text a { color: inherit; text-decoration: none; border-bottom: .05em solid var(--n-under); opacity: .9; }
article.doc .bk-text a:hover { border-bottom-color: currentColor; }
article.doc .bkt-divider hr { border: 0; border-top: 1px solid var(--n-line); margin: 12px 0; }
article.doc .bkt-quote .bk-text { border-left: 3px solid currentColor; padding-left: 14px; font-size: 1.1em; }
article.doc .bkt-callout .bk-in { background: rgba(241, 241, 239, 1); border-radius: 4px; padding: 16px 16px 16px 12px; }
html[data-theme="dark"] article.doc .bkt-callout .bk-in { background: rgba(255, 255, 255, .055); }
article.doc .bkt-code .bk-text { font-family: "SFMono-Regular", Menlo, Consolas, monospace; font-size: 85%; background: rgba(135, 131, 120, .15); border-radius: 4px; padding: 32px 18px; }
/* Undersida: ikon + namn med tunn understrykning, som i Notion */
article.doc .bk-page { display: flex; align-items: center; gap: 6px; padding: 3px 4px; margin: 0 -4px; border-radius: 4px; color: var(--n-text); text-decoration: none; font-weight: 500; line-height: 1.3; }
article.doc .bk-page:hover { background: var(--n-hover); }
article.doc .bk-page-ico { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--n-faint); flex: none; }
article.doc .bk-page-emoji { font-size: 17px; line-height: 1; }
article.doc .bk-page-title { border-bottom: 1px solid var(--n-under); line-height: 1.3; padding-bottom: 1px; overflow-wrap: anywhere; }
/* Databas som i Notion */
article.doc .db-wrap { overflow-x: auto; margin: 4px 0; -webkit-overflow-scrolling: touch; }
article.doc .db-table { border-collapse: collapse; min-width: 100%; font-size: 14px; }
article.doc .db-table th { font-weight: 400; color: var(--n-muted); text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--n-line); border-right: 1px solid var(--n-line); white-space: nowrap; }
article.doc .db-table td { padding: 7px 8px; border-bottom: 1px solid var(--n-line); border-right: 1px solid var(--n-line); vertical-align: top; min-width: 120px; }
article.doc .db-table th:last-child, article.doc .db-table td:last-child { border-right: 0; }
article.doc .db-th-ico { display: inline-block; width: 18px; margin-right: 4px; font-size: 12px; color: var(--n-faint); }
article.doc .db-title-cell { position: relative; min-width: 220px; font-weight: 500; }
article.doc .db-doc { display: inline-flex; vertical-align: -3px; margin-right: 6px; color: var(--n-faint); }
article.doc .db-doc svg { width: 16px; height: 16px; }
article.doc .db-open { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--n-muted); background: var(--surface); border: 1px solid var(--n-line); border-radius: 4px; padding: 2px 6px; text-decoration: none; opacity: 0; transition: opacity .12s; box-shadow: 0 1px 2px rgba(15, 15, 15, .08); }
article.doc tr:hover .db-open, article.doc .db-open:focus { opacity: 1; }
@media (hover: none) { article.doc .db-open { opacity: 1; position: static; transform: none; margin-left: 8px; } }
article.doc .db-tag { display: inline-block; padding: 0 6px; border-radius: 3px; font-size: 14px; line-height: 1.45; white-space: nowrap; }
article.doc .db-tag.c0 { background: rgb(227, 226, 224); } article.doc .db-tag.c1 { background: rgb(238, 224, 218); } article.doc .db-tag.c2 { background: rgb(250, 222, 201); }
article.doc .db-tag.c3 { background: rgb(253, 236, 200); } article.doc .db-tag.c4 { background: rgb(219, 237, 219); } article.doc .db-tag.c5 { background: rgb(211, 229, 239); }
article.doc .db-tag.c6 { background: rgb(232, 222, 238); } article.doc .db-tag.c7 { background: rgb(245, 224, 233); } article.doc .db-tag.c8 { background: rgb(255, 226, 221); }
html[data-theme="dark"] article.doc .db-tag { color: #fff; filter: brightness(.45) saturate(1.4); }
@media (max-width: 700px) {
  article.doc .doc-inner { padding: 28px 20px 30vh; }
  article.doc .doc-ico { font-size: 56px; } article.doc .doc-ico svg { width: 52px; height: 52px; }
  article.doc h1.doc-title { font-size: 32px; }
  article.doc .blocks { font-size: 16px; }
}
/* Mobil som i Notion: sidan får hela bredden, överst bara nuvarande sida och ikonknappar,
   inga handtag (+ ⠿) på pekskärm, tätare listor */
@media (max-width: 700px) {
  .proj-wrap { width: 100%; max-width: 100vw; overflow-x: hidden; }
  .proj-main, article.doc { min-width: 0; max-width: 100%; }
  .proj-top { padding: 8px 10px; gap: 4px; }
  .proj-top > .row:first-child { flex: 1; min-width: 0; }
  .proj-top .crumbs { flex: 1; min-width: 0; display: flex; overflow: hidden; white-space: nowrap; }
  .proj-top .crumbs > a:not(:last-child), .proj-top .crumbs > .sep { display: none; }
  .proj-top .crumbs > a:last-child { overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
  .proj-top [data-save-state] { display: none; }
}
@media (hover: none) { article.doc .bk-handles { display: none; } }
article.doc .bkt-bullet .bk-in, article.doc .bkt-number .bk-in, article.doc .bkt-todo .bk-in { gap: 2px; }
article.doc .bk-mark { width: 24px; min-width: 24px; text-align: center; flex: none; }
article.doc .bkt-bullet, article.doc .bkt-number, article.doc .bkt-todo { margin: 0; }
article.doc .bkt-bullet .bk-in, article.doc .bkt-number .bk-in { padding-top: 2px; padding-bottom: 2px; }
/* Notions radavstånd och luft: 1.5 i löptext, titeln nära toppen, ingen ikon när sidan saknar en */
article.doc .bk-text { line-height: 1.5; }
article.doc .doc-inner { padding-top: 56px; }
article.doc .doc-ico.is-empty { font-size: 14px; height: 26px; padding: 2px 8px; margin: 0 0 4px -8px; color: var(--n-faint); opacity: 0; transition: opacity .15s; }
article.doc .doc-title-row:hover .doc-ico.is-empty:not(:disabled), article.doc .doc-ico.is-empty:focus-visible { opacity: 1; }
article.doc .doc-ico.is-empty:disabled { display: none; }
article.doc .doc-ico-add { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; }
@media (max-width: 700px) {
  article.doc .doc-inner { padding-top: 22px; }
  article.doc .doc-ico.is-empty { display: none; }
}
/* Databasen tar hela bredden (knapparna under tabellen, inte bredvid) och titelcellen bryts inte */
article.doc .bkt-table .bk-in { display: block; }
article.doc .bkt-table:hover, article.doc .bkt-table:focus-within { background: none; }
article.doc .db-title-cell { white-space: nowrap; }
article.doc .db-title { white-space: normal; }
article.doc .bkt-table .bk-mini-row { margin-top: 6px; }
@media (hover: none) { article.doc .bk:hover { background: none; } }
@media (max-width: 700px) { article.doc { padding-top: 0; } article.doc .doc-inner { padding-top: 18px; } }
/* Projektsidan fyller hela bredden bredvid menyn (krympte förut till innehållets bredd) */
.proj-wrap { flex: 1 1 auto; min-width: 0; width: 100%; }
/* 4.21.1: projektlistan – enfärgade ikoner i projektets färg, lugnare kort, två per rad på mobil */
.proj-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.proj-card { position: relative; gap: 4px; padding: 16px 16px 14px; border-radius: 12px; box-shadow: none; transition: border-color .15s, background .15s; }
.proj-card::before { display: none; }
.proj-card:hover { transform: none; background: color-mix(in srgb, var(--pc, var(--accent)) 3%, var(--surface)); border-color: color-mix(in srgb, var(--pc, var(--accent)) 35%, var(--line)); }
.proj-card .proj-ico { width: 38px; height: 38px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px;
  color: var(--pc, var(--accent)); background: color-mix(in srgb, var(--pc, var(--accent)) 11%, transparent); font-size: 0; }
.proj-card .proj-ico svg { width: 19px; height: 19px; }
.proj-card b { font-size: 15px; font-weight: 600; line-height: 1.3; }
.proj-card small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.proj-card .proj-foot { margin-top: 10px; }
@media (max-width: 700px) {
  .proj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .proj-card { padding: 13px 12px 12px; }
  .proj-card .proj-ico { width: 34px; height: 34px; margin-bottom: 6px; }
  .proj-card b { font-size: 14px; } .proj-card small { font-size: 12px; }
  .proj-card .proj-foot .pill { font-size: 11px; }
}
@media (max-width: 700px) { .proj-actions { flex-wrap: wrap; width: 100%; } .proj-actions .btn.primary { margin-left: auto; } }

/* 4.21.2: vem ser projektet */
.pj-vis { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.pj-vis-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }
.pj-vis-opt:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }
.pj-vis-opt input { margin-top: 3px; } .pj-vis-opt b { display: block; font-size: 13.5px; } .pj-vis-opt small { color: var(--muted); font-size: 12px; }

/* ══ 4.21.2: projektets sidomeny som i Notion ══ */
.proj-side { background: #F7F7F5; border-right: 1px solid rgba(55, 53, 47, .09); }
html[data-theme="dark"] .proj-side { background: #202020; border-right-color: rgba(255, 255, 255, .06); }
.proj-side .ps-label { font-size: 12px; font-weight: 500; color: rgba(55, 53, 47, .5); padding: 14px 12px 4px; letter-spacing: 0; text-transform: none; }
.pg-tree .pg-item { display: flex; align-items: center; gap: 4px; min-height: 28px; padding-top: 2px; padding-bottom: 2px; padding-right: 8px; border-radius: 5px; margin: 0 6px;
  font-size: 14px; color: rgba(55, 53, 47, .82); text-decoration: none; line-height: 1.25; }
html[data-theme="dark"] .pg-tree .pg-item { color: rgba(255, 255, 255, .8); }
.pg-tree .pg-item:hover { background: rgba(55, 53, 47, .06); }
.pg-tree .pg-item.on { background: rgba(55, 53, 47, .08); color: #37352F; font-weight: 500; }
html[data-theme="dark"] .pg-tree .pg-item.on { background: rgba(255, 255, 255, .08); color: #fff; }
.pg-tree .pg-item .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-tree .pg-ico { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; flex: none; color: rgba(55, 53, 47, .45); font-size: 15px; }
.pg-tree .pg-toggle { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; flex: none; border: 0; background: none; border-radius: 4px; color: rgba(55, 53, 47, .4); padding: 0; cursor: pointer; }
.pg-tree .pg-toggle:hover { background: rgba(55, 53, 47, .08); }
.pg-tree .pg-toggle svg { transition: transform .15s; }
.pg-tree .pg-node:not(.closed) > .pg-item .pg-toggle svg { transform: rotate(90deg); }
.pg-tree .pg-node.closed > .pg-kids { display: none; }
.pg-tree .pg-dot { width: 20px; flex: none; }
.pg-tree .pg-kids { border-left: 0; }
/* Dra och släpp */
.pg-tree .pg-node.dragging > .pg-item { opacity: .4; }
.pg-tree .pg-item.drop-in { background: rgba(35, 131, 226, .14); box-shadow: 0 0 0 1px rgba(35, 131, 226, .5) inset; }
.pg-tree .pg-item.drop-before { box-shadow: 0 2px 0 0 #2383E2 inset; }
.pg-tree .pg-item.drop-after { box-shadow: 0 -2px 0 0 #2383E2 inset; }
/* Menyn – bottenark på mobil som Notions "Åtgärder", liten meny vid pekaren på dator */
.pg-menu { position: fixed; z-index: 400; }
.pg-menu-in { min-width: 230px; background: var(--surface); border-radius: 10px; padding: 6px; box-shadow: 0 0 0 1px rgba(15, 15, 15, .05), 0 3px 6px rgba(15, 15, 15, .1), 0 9px 24px rgba(15, 15, 15, .2); }
.pg-menu-title { font-size: 12px; color: rgba(55, 53, 47, .55); padding: 6px 10px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; }
.pg-menu button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 7px 10px; border-radius: 6px; font-size: 14px; color: var(--ink); text-align: left; cursor: pointer; }
.pg-menu button:hover { background: rgba(55, 53, 47, .06); }
.pg-menu button svg { color: rgba(55, 53, 47, .6); flex: none; }
.pg-menu button.danger, .pg-menu button.danger svg { color: #EB5757; }
.pg-menu hr { border: 0; border-top: 1px solid rgba(55, 53, 47, .09); margin: 4px 0; }
.pg-menu.sheet { inset: 0; background: rgba(15, 15, 15, .25); display: flex; align-items: flex-end; animation: pgFade .15s ease-out; }
.pg-menu.sheet .pg-menu-in { width: 100%; border-radius: 14px 14px 0 0; padding: 10px 10px calc(14px + env(safe-area-inset-bottom, 0px)); background: #F7F7F5; animation: pgUp .2s ease-out; }
html[data-theme="dark"] .pg-menu.sheet .pg-menu-in { background: #252525; }
.pg-menu.sheet .pg-menu-title { text-align: center; font-size: 15px; font-weight: 600; color: var(--ink); padding: 6px 10px 12px; max-width: none; }
.pg-menu.sheet button { background: var(--surface); border-radius: 0; padding: 14px 16px; font-size: 16px; border-bottom: 1px solid rgba(55, 53, 47, .07); }
.pg-menu.sheet button:first-of-type { border-radius: 12px 12px 0 0; } .pg-menu.sheet button:last-of-type { border-radius: 0 0 12px 12px; border-bottom: 0; }
.pg-menu.sheet hr { margin: 8px 0; border: 0; }
.pg-menu.sheet hr + button { border-radius: 12px; }
@keyframes pgFade { from { opacity: 0; } } @keyframes pgUp { from { transform: translateY(40px); } }
/* Notion: rubriker i sidan i Notions färg och vikt (inte svartare än texten) */
article.doc .bkt-h1 .bk-text, article.doc .bkt-h2 .bk-text, article.doc .bkt-h3 .bk-text { color: var(--n-text); }
@media (max-width: 700px) {
  article.doc .bkt-h1 .bk-text { font-size: 1.6em; } article.doc .bkt-h2 .bk-text { font-size: 1.35em; } article.doc .bkt-h3 .bk-text { font-size: 1.15em; }
  article.doc h1.doc-title { font-size: 30px; }
  .pg-tree .pg-item { min-height: 34px; font-size: 15px; }
}
.pg-menu.sheet button:has(+ hr) { border-radius: 0 0 12px 12px; border-bottom: 0; }

/* ══ 4.21.3: Snabbsvar på mobil ══
   Kategorierna blir en rad som skrollar i sidled, knapparna blir små ikoner och formuläret öppnas som
   ett ark först när man trycker på Nytt snabbsvar eller Ändra (det låg alltid öppet under listan). */
.cn-close { display: none; }
@media (max-width: 700px) {
  .cn-head { display: flex; gap: 8px; }
  .cn-head .cn-search { flex: 1; min-width: 0; }
  .cn-head [data-cn-new] { flex: none; padding-left: 12px; padding-right: 12px; }
  .cn-cats { display: flex; overflow-x: auto; gap: 8px; margin: 0 -16px 12px; padding: 2px 16px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .cn-cats::-webkit-scrollbar { display: none; }
  .cn-cat { flex: none; flex-direction: row; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 999px; min-width: 0; }
  .cn-cat .cn-ico { width: 26px; height: 26px; border-radius: 50%; }
  .cn-cat .cn-ico svg { width: 14px; height: 14px; }
  .cn-cat b { font-size: 13.5px; white-space: nowrap; }
  .cn-cat small { font-size: 12px; white-space: nowrap; }
  .cn-cat small::before { content: "· "; }
  .cn-cat.add small { display: none; }
  .cn-cat-edit { position: static; margin-left: 2px; }
  .cn-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 12px; }
  .cn-item p { overflow-wrap: anywhere; }
  .cn-actions { flex-direction: column; gap: 2px; }
  .cn-actions .btn { font-size: 0; width: 34px; height: 34px; padding: 0; justify-content: center; }
  .cn-actions .btn svg { width: 15px; height: 15px; }
  [data-cn] .cn-editor { display: none; }
  [data-cn].cn-editing .cn-editor { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 300; margin: 0; max-height: 88vh; overflow-y: auto;
    border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgba(15, 15, 15, .18); padding-bottom: env(safe-area-inset-bottom, 0px); animation: pgUp .2s ease-out; }
  [data-cn].cn-editing::after { content: ""; position: fixed; inset: 0; z-index: 299; background: rgba(15, 15, 15, .25); }
  [data-cn].cn-editing .cn-close { display: inline-flex; margin-left: auto; }
  .cn-editor .card-head { position: sticky; top: 0; background: var(--surface); z-index: 1; }
}
@media (max-width: 700px) { .cn-actions .btn { min-width: 0; gap: 0; } .cn-actions form { margin: 0; } }
@media (max-width: 700px) {
  [data-cn].cn-editing .cn-editor { z-index: 1001; height: auto; top: auto; min-height: 0; }
  [data-cn].cn-editing::after { z-index: 1000; }
}
/* 4.22.0: GDPR i kontaktpanelen */
.gdpr-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* 4.23.0: Lagring och radering */
.ret-note { display: flex; gap: 10px; padding: 12px 14px; border-radius: 9px; background: var(--surface-2); }
.ret-note b { display: block; font-size: 13.5px; } .ret-note small { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.ret-row { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.ret-text b { display: block; font-size: 14px; } .ret-text small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.ret-rec { color: var(--accent); font-weight: 500; }
@media (max-width: 600px) { .ret-row { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

/* 4.24.0: personuppgiftsbiträdesavtalet */
.dpa-text { max-height: 55vh; overflow-y: auto; font-size: 14px; line-height: 1.6; }
.dpa-foot { flex-wrap: wrap; gap: 12px; }
.dpa-agree { display: flex; gap: 8px; align-items: flex-start; flex: 1; min-width: 240px; font-size: 13.5px; }
.dpa-agree input { margin-top: 3px; }

/* 4.25.0: språk för chatboten */
.lang-checks { display: flex; gap: 16px; flex-wrap: wrap; padding: 6px 0; }
.lang-checks .chk { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; }
/* 4.25.0: stilen Samtal – vit topp, svaret som text utan bubbla, grå bubbla för besökaren, rundad inmatning */
.sp-samtal { border-radius: 12px; background: #fff; }
.sp-samtal .sp-h { height: 22%; background: #fff; border-bottom: 1px solid #e4e6ec; }
.sp-samtal .sp-b1 { left: 10%; top: 34%; width: 70%; height: 6%; background: #d9dce3; border-radius: 3px; box-shadow: 0 9px 0 #d9dce3, 0 18px 0 #e6e8ee; }
.sp-samtal .sp-b2 { right: 10%; top: 66%; width: 40%; height: 11%; background: #eef0f4; border-radius: 8px; }
.sp-samtal::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 7%; height: 12%; border: 1px solid #e0e3ea; border-radius: 99px; background: #fff; }

/* ── 4.25.0: kampanjer ───────────────────────────────────────────── */
.cp-st { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 99px; background: var(--bg-soft, #f1f2f6); color: var(--muted); }
.cp-st-active { background: rgba(34,197,94,.12); color: #15803d; }
.cp-st-paused { background: rgba(245,158,11,.14); color: #b45309; }
.cp-list { overflow: hidden; }
.cp-row { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.cp-row:last-child { border-bottom: 0; }
.cp-row-main { flex: 1; min-width: 0; color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 3px; }
.cp-row-main b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-row-main small { color: var(--muted); font-size: 12.5px; }
.cp-stats { display: flex; gap: 18px; }
.cp-stats span { display: flex; flex-direction: column; align-items: flex-end; }
.cp-stats b { font-size: 14px; font-variant-numeric: tabular-nums; }
.cp-stats small { font-size: 11.5px; color: var(--muted); }
.cp-h2 { font-size: 16px; margin: 28px 0 2px; }
.cp-h2-sub { margin: 0 0 14px; font-size: 13px; }
.cp-bot-pick { max-width: 280px; margin-bottom: 12px; }
.cp-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.cp-tpl { border: 1px solid var(--line); border-radius: 10px; background: var(--bg, #fff); padding: 0; cursor: pointer; text-align: left; overflow: hidden; display: flex; flex-direction: column; color: inherit; font: inherit; transition: border-color .15s, box-shadow .15s; }
.cp-tpl:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(20,24,40,.08); }
.cp-tpl-stage { display: block; height: 210px; background: radial-gradient(circle at 1px 1px, rgba(20,24,40,.08) 1px, transparent 0) 0 0/14px 14px, #f6f7f9; overflow: hidden; }
.cp-tpl-txt { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); }
.cp-tpl-txt b { font-size: 13.5px; }
.cp-tpl-txt small { font-size: 12px; color: var(--muted); line-height: 1.4; }
/* Redigeraren */
.cp-edit-inner { max-width: 1180px; }
.cp-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.cp-crumbs { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 15px; min-width: 0; }
.cp-name { border: 1px solid transparent; background: transparent; font: inherit; font-weight: 600; color: inherit; padding: 4px 6px; border-radius: 7px; min-width: 120px; max-width: 360px; }
.cp-name:hover, .cp-name:focus { border-color: var(--line); outline: none; background: var(--bg, #fff); }
.cp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.cp-tabs button { border: 0; background: transparent; padding: 10px 12px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.cp-tabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
.cp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; }
.cp-panes .card + .card { margin-top: 12px; }
.cp-blocks { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.cp-blk { display: flex; border: 1px solid var(--line); border-radius: 10px; background: var(--bg, #fff); }
.cp-blk.dragging { opacity: .45; }
.cp-blk-side { width: 32px; flex: none; border-right: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); cursor: grab; }
.cp-blk-main { flex: 1; min-width: 0; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.cp-blk-head { display: flex; align-items: center; gap: 2px; }
.cp-blk-head b { font-size: 13px; }
.cp-empty { padding: 18px; text-align: center; border: 1px dashed var(--line); border-radius: 10px; }
.cp-sw { display: flex; flex-wrap: wrap; gap: 7px; }
.cp-sw .sw { width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(20,24,40,.14); cursor: pointer; padding: 0; position: relative; }
.cp-sw .sw.on { box-shadow: 0 0 0 2px var(--bg, #fff), 0 0 0 4px var(--accent); }
.cp-sw .sw-custom { background: conic-gradient(#ef4444, #f59e0b, #22c55e, #3b82f6, #8b5cf6, #ef4444); overflow: hidden; }
.cp-sw .sw-custom input { opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.cp-color { width: 100%; height: 38px; border: 1px solid var(--line); border-radius: 8px; padding: 3px; background: var(--bg, #fff); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: transparent; padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--accent); color: #fff; }
.cp-cond-h { font-size: 13.5px; font-weight: 500; margin: 4px 0 0; }
.cp-rules { display: flex; flex-direction: column; gap: 8px; }
.cp-rule { display: grid; grid-template-columns: 1.3fr 1fr 1fr auto; gap: 8px; align-items: center; }
.cp-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: #b45309; background: rgba(245,158,11,.1); border-radius: 8px; padding: 9px 11px; margin: 4px 0 0; }
.cp-consent code { font-size: 12px; }
.cp-preview-col { position: sticky; top: 16px; }
.cp-preview-head { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.cp-preview { display: block; min-height: 460px; border: 1px solid var(--line); border-radius: 10px; padding: 24px 16px; background: radial-gradient(circle at 1px 1px, rgba(20,24,40,.08) 1px, transparent 0) 0 0/14px 14px, #f6f7f9; overflow: hidden; }
.cp-mini-stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.cp-mini-stats b { color: var(--text, inherit); }
.cp-danger { display: flex; gap: 8px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
@media (max-width: 900px) {
  .cp-grid { grid-template-columns: 1fr; }
  .cp-preview-col { position: static; order: -1; }
  .cp-preview { min-height: 0; padding: 18px 10px; }
  .cp-row { flex-wrap: wrap; gap: 10px; }
  .cp-row-main { flex-basis: 100%; }
  .cp-stats { gap: 14px; flex: 1; }
  .cp-rule { grid-template-columns: 1fr 1fr; }
  .cp-rule [data-r=f] { grid-column: 1 / -1; }
  .cp-top .btn { flex: 1; }
}

/* 4.25.0: sparaknapp för chatbotens hjärna – ligger kvar i nederkant medan man scrollar */
.bot-savebar { position: sticky; bottom: 0; display: flex; justify-content: flex-end; padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, var(--bg, #fff) 35%); z-index: 5; }
@media (max-width: 700px) { .bot-savebar .btn { flex: 1; } }

/* ── 4.26.0: Integrationscenter ─────────────────────────────────────── */
.ig-page { max-width: 1080px; }
.ig-bar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.ig-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; background: var(--bg, #fff); color: var(--muted); max-width: 420px; }
.ig-search input { border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; padding: 10px 0; flex: 1; min-width: 0; color: var(--text, inherit); }
.ig-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ig-chip { border: 1px solid var(--line); border-radius: 99px; padding: 5px 12px; font-size: 12.5px; color: var(--text, inherit); text-decoration: none; background: var(--bg, #fff); }
.ig-chip small { color: var(--muted); margin-left: 3px; }
.ig-chip:hover { border-color: var(--accent); }
.ig-mine { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px; background: var(--bg-soft, #f4f5f7); font-size: 13.5px; margin-bottom: 8px; color: var(--muted); }
.ig-mine.ok { background: rgba(34,197,94,.08); color: #15803d; }
.ig-mine b { color: var(--text, inherit); }
.ig-cat { margin-top: 26px; scroll-margin-top: 16px; }
.ig-cat-head { display: flex; align-items: baseline; gap: 10px; }
.ig-cat-head h2 { font-size: 16px; margin: 0; }
.ig-count { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ig-cat-desc { margin: 3px 0 12px; font-size: 13px; color: var(--muted); }
.ig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.ig-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg, #fff); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; position: relative; }
.ig-card:hover { border-color: rgba(47,111,214,.45); box-shadow: 0 3px 12px rgba(20,24,40,.06); }
.ig-logo { flex: none; display: grid; place-items: center; border-radius: 9px; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.ig-logo img { width: 78%; height: 78%; object-fit: contain; }
.ig-mono { color: #fff; font-weight: 700; letter-spacing: -.02em; border: 0; }
.ig-card-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-right: 4px; }
.ig-card-txt b { font-size: 14px; }
.ig-card-txt small { font-size: 12.5px; color: var(--muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ig-badge { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 99px; white-space: nowrap; background: var(--bg-soft, #f1f2f6); color: var(--muted); }
.ig-on { background: rgba(34,197,94,.12); color: #15803d; }
.ig-live { background: rgba(47,111,214,.1); color: #2f6fd6; }
.ig-want { background: rgba(139,92,246,.12); color: #7c3aed; }
.ig-partner { background: rgba(245,158,11,.12); color: #b45309; }
.ig-empty { margin-top: 24px; }
/* Detaljsidan */
.ig-detail { max-width: 820px; }
.ig-hero { display: flex; align-items: center; gap: 14px; margin: 6px 0 16px; }
.ig-hero-txt { flex: 1; min-width: 0; }
.ig-hero h1 { font-size: 22px; margin: 0 0 3px; }
.ig-hero p { margin: 0; color: var(--muted); font-size: 13.5px; }
.ig-detail .card + .card, .ig-detail .card + details, .ig-detail details + .card { margin-top: 12px; }
.ig-does { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; }
.ig-does li { display: flex; gap: 8px; align-items: flex-start; }
.ig-does svg { color: #16a34a; flex: none; margin-top: 2px; }
.ig-private { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--muted); background: var(--bg-soft, #f4f5f7); padding: 9px 11px; border-radius: 8px; }
.ig-private svg { flex: none; margin-top: 2px; }
.ig-warn { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: #b45309; background: rgba(245,158,11,.1); padding: 9px 11px; border-radius: 8px; margin: 0; }
.ig-warn svg { flex: none; margin-top: 2px; }
.ig-conn { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ig-conn > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ig-conn small { color: var(--muted); font-size: 12.5px; }
.ig-test-out { font-size: 13px; padding: 9px 11px; border-radius: 8px; background: var(--bg-soft, #f4f5f7); }
.ig-test-out.ok { background: rgba(34,197,94,.1); color: #15803d; }
.ig-test-out.bad { background: rgba(239,68,68,.08); color: #b91c1c; }
.ig-pick { display: flex; gap: 8px; align-items: flex-end; }
.ig-pick .field { flex: 1; margin: 0; }
.ig-stats { display: flex; gap: 22px; padding-top: 4px; }
.ig-stats span { display: flex; flex-direction: column; }
.ig-stats b { font-size: 16px; font-variant-numeric: tabular-nums; }
.ig-stats small { font-size: 12px; color: var(--muted); }
.ig-stats .bad b { color: #dc2626; }
.ig-note { margin: 0; font-size: 12.5px; }
.ig-perm summary { cursor: pointer; padding: 12px 16px; font-size: 13.5px; font-weight: 600; display: flex; gap: 8px; align-items: center; list-style: none; }
.ig-perm summary::-webkit-details-marker { display: none; }
.ig-perm ul { margin: 0 0 8px; padding-left: 18px; font-size: 13px; }
.ig-perm li { margin: 3px 0; }
.ig-steps { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.6; }
.ig-steps li { margin: 4px 0; }
.ig-steps code, .ig-perm code { font-size: 12px; background: var(--bg-soft, #f1f2f6); padding: 1px 5px; border-radius: 5px; word-break: break-all; }
.ig-copy { user-select: all; }
@media (max-width: 700px) {
  .ig-grid { grid-template-columns: 1fr; }
  .ig-search { max-width: none; }
  .ig-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .ig-chip { white-space: nowrap; }
  .ig-hero { align-items: flex-start; flex-wrap: wrap; }
  .ig-conn .grow { display: none; }
  .ig-conn > div { flex-basis: 100%; }
  .ig-pick { flex-direction: column; align-items: stretch; }
}

/* 4.26.0: märket bredvid namnet – beskrivningen får hela kortets bredd */
.ig-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ig-card-txt small { -webkit-line-clamp: 3; }
/* 4.26.1: integration som inte är påslagen ännu – vänligt för kunden, länk bara för plattformens ägare */
/* Eget namn – .ig-soon är märket "Kommer snart"; samma namn gav märket en stor grå ruta (fel i 4.26.1) */
.ig-soon-note { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--muted); background: var(--bg-soft, #f4f5f7); padding: 10px 12px; border-radius: 8px; margin: 0; }
.ig-soon-note svg { flex: none; margin-top: 2px; }
.ig-admin-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); text-decoration: none; }
.ig-admin-link:hover { color: var(--accent); }

/* 4.26.1: påminnelsen om provperioden täckte innehåll på mobilen (t.ex. en Spara-knapp) */
.plan-bar-x { border: 0; background: transparent; color: inherit; opacity: .6; cursor: pointer; padding: 4px; margin-left: 2px; display: grid; place-items: center; border-radius: 6px; }
.plan-bar-x:hover { opacity: 1; background: rgba(0,0,0,.06); }
@media (max-width: 760px) { body:has(.plan-bar) .page-inner { padding-bottom: 96px; } }
/* 4.27.0: System → Integrationer */
.ig-bad { background: rgba(239,68,68,.1); color: #b91c1c; }
.sys-ig-last { font-size: 11.5px !important; color: var(--muted); -webkit-line-clamp: 1 !important; }
.sys-ig-settings { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.sys-ig-settings .card { margin: 0; }
/* 4.27.2: ärenden med ett påbörjat utkast */
.conv-draft { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: #dc2626; background: rgba(220,38,38,.08); padding: 1px 6px; border-radius: 99px; white-space: nowrap; }

/* ── 4.27.2: olästa och stjärnmärkta syns tydligt i listan ─────────────────────────────
   Förut tog två senare regler (.conv.unread { background: transparent }) bort olästas bakgrund helt. */
:root { --unread-bg: #EDEEFF; --unread-bar: #5A55F2; --star-bg: #FFF6DC; --star-bar: #F59E0B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --unread-bg: #22254D; --unread-bar: #8B86FF; --star-bg: #2C2613; --star-bar: #E6B642; } }
:root[data-theme="dark"] { --unread-bg: #22254D; --unread-bar: #8B86FF; --star-bg: #2C2613; --star-bar: #E6B642; }
section.list .conv.unread { background: var(--unread-bg); }
section.list .conv.unread:hover { background: var(--unread-bg); filter: brightness(.97); }
section.list .conv.unread::after { content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 4px; border-radius: 0 4px 4px 0; background: var(--unread-bar); }
section.list .conv.unread .who { font-weight: 700; color: var(--ink); }
section.list .conv.unread .subj { font-weight: 650; color: var(--ink); }
section.list .conv.unread time { color: var(--unread-bar); font-weight: 700; }
section.list .conv[data-starred="1"] { background: var(--star-bg); }
section.list .conv[data-starred="1"]:hover { background: var(--star-bg); filter: brightness(.97); }
section.list .conv[data-starred="1"]:not(.unread)::after { content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 4px; border-radius: 0 4px 4px 0; background: var(--star-bar); }
section.list .conv.unread[data-starred="1"] { background: linear-gradient(90deg, var(--unread-bg) 70%, var(--star-bg)); }
section.list .conv-star { color: var(--star-bar); }
section.list .conv-star svg { width: 15px; height: 15px; fill: currentColor; }
/* Det öppna ärendet markeras alltid tydligast */
section.list .conv.on, section.list .conv.on.unread, section.list .conv.on[data-starred="1"] { background: var(--accent-soft); filter: none; }

/* 4.28.1: samtalskortet på mobilen – inget sidledsscroll (Text/Ljud och långa nyckelord sköt ut kortet) */
.vr-convo-head { flex-wrap: wrap; }
.vr-convo-head > div:first-child { flex: 1 1 180px; min-width: 0; }
.cd-facts > span { min-width: 0; overflow-wrap: anywhere; }
.vr-cd, .vr-convo, .call-detail td { min-width: 0; max-width: 100%; }
.vr-dl { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
@media (max-width: 700px) {
  .vr-convo-head .vr-convo-tabs { flex: 1 1 100%; display: flex; }
  .vr-convo-head .vr-convo-tabs button { flex: 1; justify-content: center; }
  .call-detail td { white-space: normal; }
  .vr-dl { width: 100%; justify-content: center; }
}

/* 4.28.1: kanalerna två i bredd på mobilen – kompakta kort */
@media (max-width: 700px) {
  .ch-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ch-tiles .tile { padding: 12px; gap: 8px; min-width: 0; }
  .ch-tiles .tile-top { flex-wrap: wrap; gap: 8px; position: relative; }
  .ch-tiles .tile-top .grow { flex: 1 1 100%; min-width: 0; }
  .ch-tiles .tile-top .dot { position: absolute; top: 2px; right: 0; }
  .ch-tiles .tile h3 { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ch-tiles .tile p { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ch-tiles .tile .badge { font-size: 10.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ch-tiles .tile-foot { flex-wrap: wrap; gap: 2px 8px; font-size: 11.5px; }
  .ch-tiles .tile-foot .grow { display: none; }
  .ch-tiles .vis-warn { font-size: 11.5px; }
}
/* 4.28.1: mobilen – rubrikraden och knapparna */
@media (max-width: 760px) {
  /* Rubriken fyller alltid första raden (bredvid Tillbaka) – knapparna hamnar på raden under, oavsett rubrikens längd.
     Förut fick en kort rubrik knapparna bredvid sig, en lång under. */
  .thread-head > .thread-title { flex: 1 1 calc(100% - 50px); }
  .thread-head > .mob-only + .thread-title { flex-basis: calc(100% - 50px); }
}
/* Appen på hemskärmen: iOS suddar ut en remsa under statusfältet – innehållet börjar lite längre ner så att
   rubrikerna inte hamnar i den (webbläsaren sköter det själv) */
@media (max-width: 760px) and (display-mode: standalone) {
  .shell { padding-top: calc(var(--sat) + 14px) !important; }
}

/* 4.28.2: verktyg i samtalsutskriften som en liten rad i stället för en tom bubbla */
.vr-tool { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); margin: 2px 0 8px 4px; }

/* 4.28.3: platser och kontakt för AI Receptionist */
.vp-list { display: flex; flex-direction: column; gap: 10px; }
.vp-row { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2, var(--bg)); }
.vp-row-head { display: flex; gap: 6px; align-items: center; }
.vp-row-head .vp-name { flex: 1; font-weight: 600; }

/* ── 4.29.0: Förhandsvisningen är den riktiga chatten i en ram, och mallarna visas som levande miniatyrer ── */
.stage .wframe { position: absolute; top: 34px; left: 0; width: 100%; height: calc(100% - 34px); border: 0; background: transparent; }
.stage.mobile .wframe { border-radius: 0 0 24px 24px; }
.stage.hide-mobile .wframe { visibility: hidden; }
.tpl-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tpl-pick { position: relative; display: flex; flex-direction: column; gap: 5px; cursor: pointer; font-size: 12px; min-width: 0; }
.tpl-pick input { position: absolute; opacity: 0; pointer-events: none; }
.tpl-pick b { font-weight: 560; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-pick small { display: none; }
.tpl-pick input:checked ~ b { color: var(--ink); font-weight: 600; }
.tpl-thumb { position: relative; display: block; aspect-ratio: 390 / 640; border-radius: var(--r); border: 1px solid var(--line); overflow: hidden; background: var(--surface-2); transition: box-shadow .15s, border-color .15s; }
.tpl-thumb iframe { position: absolute; left: 0; top: 0; width: 390px; height: 640px; border: 0; transform-origin: 0 0; transform: scale(var(--s, .22)); pointer-events: none; }
.tpl-pick:hover .tpl-thumb { border-color: var(--line-strong); }
.tpl-pick input:checked + .tpl-thumb { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.tpl-pick input:focus-visible + .tpl-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
.tpl-desc { margin: 0; font-size: 12.5px; color: var(--muted); }
.tpl-desc b { color: var(--ink); font-weight: 600; }
@media (max-width: 720px) { .tpl-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .tpl-thumb { transition: none; } }
.wz-gallery { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 720px) { .wz-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── 4.29.1: Dolda radioknappar och kryssrutor ska ligga i sin egen etikett. Utan position på etiketten räknades
   de från själva dokumentet (inte från .page) och gjorde det högre än fönstret – sidan gick att rulla vidare
   ner i en vit yta. .pick, .vr-goal och .vr-toggle hade det redan rätt. ── */
.seg-inline label, .icon-pick, .style-pick, .tpl, .cal-colors label, .sc-acc, .wz-design, .kn-tabs label, .cn-iconpick label, .ra-tones label { position: relative; }

/* ── 4.30.0: mallarna i familjer som fälls ut (bara den öppna familjens miniatyrer laddas) ── */
.tpl-families { display: flex; flex-direction: column; gap: 8px; }
.tpl-fam { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.tpl-fam > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 14px; cursor: pointer; font-weight: 600; color: var(--ink); }
.tpl-fam > summary::-webkit-details-marker { display: none; }
.tpl-fam > summary::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); margin-left: auto; transition: transform .15s; }
.tpl-fam[open] > summary::after { transform: rotate(-135deg); }
.tpl-fam > summary small { color: var(--muted); font-weight: 500; }
.tpl-fam > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-lg); }
.tpl-fam > .tpl-gallery { padding: 4px 12px 14px; }
@media (prefers-reduced-motion: reduce) { .tpl-fam > summary::after { transition: none; } }

/* ══ 4.30.1: Kom igång-guiden – mjukare form och lugna övergångar ══════════════════════════════
   Kortet ligger i inkorgens sidomeny ovanför företagsraden (och överst på Inställningar i mobilen).
   Dialogen glider in och tonar fram, och stängs med en kort omvänd rörelse (klassen is-closing sätts i app.js). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sg-entry-side { padding: 0 10px 10px; }
.sg-entry-hub { display: none; margin: 0 0 20px; }
.sg-card { width: 100%; display: flex; flex-direction: column; gap: 6px; padding: 11px 12px 11px 11px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; font: inherit; box-shadow: 0 1px 2px rgba(20, 24, 40, .04); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.sg-card:hover { border-color: var(--line-strong); box-shadow: 0 6px 18px rgba(20, 24, 40, .08); transform: translateY(-1px); }
.sg-card:active { transform: translateY(0); }
.sg-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sg-card-row { display: flex; align-items: center; gap: 10px; }
.sg-mini { position: relative; width: 30px; height: 30px; flex: none; display: grid; place-items: center; color: var(--green); }
.sg-mini svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.sg-mini circle { fill: none; stroke-width: 3.5; }
.sg-mini-bg { stroke: var(--active); }
.sg-mini-fg { stroke: var(--green); stroke-linecap: round; }
.sg-card-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sg-card-txt b { font-size: 13.5px; font-weight: 620; }
.sg-card-txt small { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sg-card-chev { color: var(--faint); transition: transform .2s ease, color .2s ease; }
.sg-card:hover .sg-card-chev { transform: translateX(2px); color: var(--muted); }
.sg-card-next { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 40px; }
.sg-progress { display: block; height: 4px; border-radius: 2px; background: var(--active); overflow: hidden; }
.sg-progress i { display: block; height: 100%; border-radius: inherit; background: var(--green); }

dialog.sg-modal { width: min(940px, calc(100vw - 32px)); max-width: none; height: min(640px, calc(100vh - 48px)); max-height: none; overflow: hidden; border-radius: 20px; border: 1px solid var(--line); box-shadow: 0 30px 90px rgba(15, 20, 30, .22), 0 2px 8px rgba(15, 20, 30, .06); }
dialog.sg-modal::backdrop { background: rgba(15, 18, 28, .32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sg-wrap { display: grid; grid-template-columns: 256px minmax(0, 1fr); height: 100%; }
.sg-aside { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 32px 26px 24px; background: var(--surface-2); border-right: 1px solid var(--line); }
.sg-eyebrow { margin: 0; font-size: 11.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sg-ring { position: relative; width: 120px; height: 120px; flex: none; }
.sg-ring svg { transform: rotate(-90deg); display: block; }
.sg-ring circle { fill: none; stroke-width: 7; }
.sg-ring-bg { stroke: var(--active); }
.sg-ring-fg { stroke: var(--green); stroke-linecap: round; }
.sg-ring > span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.sg-ring b { font-size: 28px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sg-ring small { font-size: 12px; color: var(--muted); margin-top: 2px; }
.sg-aside-text { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.sg-aside-text b { color: var(--ink); font-weight: 600; }
.sg-hide { margin-top: auto; }
.sg-hide .btn { min-height: 40px; color: var(--muted); }
.sg-hide .btn:hover { color: var(--ink); }
.sg-main { display: flex; flex-direction: column; gap: 20px; padding: 32px 34px 30px; overflow-y: auto; min-width: 0; scroll-behavior: smooth; }
.sg-main > * { flex: none; }   /* rullytan får aldrig trycka ihop förloppet eller stegen */
.sg-head { display: flex; align-items: flex-start; gap: 16px; }
.sg-head > div { flex: 1; min-width: 0; }
.sg-head h2 { margin: 0; font-size: 21px; font-weight: 650; letter-spacing: -.02em; line-height: 1.3; }
.sg-head p { margin: 6px 0 0; font-size: 14px; color: var(--muted); line-height: 1.55; }
.sg-x.btn.icon { width: 40px; height: 40px; flex: none; margin: -8px -10px 0 0; border-radius: 12px; }
.sg-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sg-step { display: grid; grid-template-columns: 26px 38px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 74px; padding: 14px 16px 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); text-decoration: none; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.sg-step:hover { border-color: var(--line-strong); box-shadow: 0 6px 18px rgba(20, 24, 40, .07); transform: translateY(-1px); }
.sg-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sg-step.is-next { border-color: var(--accent-line); box-shadow: 0 0 0 4px var(--accent-soft); }
.sg-step.is-next:hover { box-shadow: 0 0 0 4px var(--accent-soft), 0 6px 18px rgba(20, 24, 40, .07); }
.sg-step.is-done { background: transparent; box-shadow: none; }
.sg-step.is-done:hover { transform: none; background: var(--hover); }
.sg-state { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; font-size: 12px; font-weight: 650; color: var(--muted); font-variant-numeric: tabular-nums; }
.sg-step.is-next .sg-state { border-color: var(--accent); color: var(--ink); }
.sg-step.is-done .sg-state { border-color: transparent; background: var(--green); color: #fff; }
.sg-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); }
.sg-step.is-next .sg-ico { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.sg-step.is-done .sg-ico { background: transparent; color: var(--faint); }
.sg-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sg-body b { font-size: 14.5px; font-weight: 620; line-height: 1.35; }
.sg-body small { font-size: 13px; color: var(--muted); line-height: 1.45; }
.sg-step.is-next .sg-body small { color: var(--ink-2); }
.sg-step.is-done .sg-body b { color: var(--ink-2); font-weight: 560; }
.sg-end { display: inline-flex; align-items: center; gap: 10px; color: var(--faint); white-space: nowrap; }
.sg-end .i { transition: transform .2s ease; }
.sg-step:hover .sg-end .i { transform: translateX(2px); }
.sg-done { font-size: 12.5px; font-weight: 650; color: color-mix(in srgb, var(--green) 72%, var(--ink)); }
.sg-go { font-size: 12.5px; font-weight: 650; color: var(--surface); background: var(--ink); border-radius: 999px; padding: 6px 13px; }
.sg-restore { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--surface-2); font-size: 13px; color: var(--muted); }
.sg-restore span { flex: 1; }
.sg-restore .i { color: var(--accent); }

/* Rörelse: in och ut, ringen och förloppet fylls, stegen kommer fram ett i taget */
@media (prefers-reduced-motion: no-preference) {
  dialog.sg-modal[open] { animation: sgIn .3s cubic-bezier(.2, .8, .2, 1) both; }
  dialog.sg-modal[open]::backdrop { animation: sgFade .3s ease both; }
  dialog.sg-modal.is-closing { animation: sgOut .18s cubic-bezier(.4, 0, 1, 1) both; }
  dialog.sg-modal.is-closing::backdrop { animation: sgFade .18s ease reverse both; }
  dialog.sg-modal[open] .sg-ring-fg { animation: sgRing .9s .12s cubic-bezier(.2, .8, .2, 1) both; }
  dialog.sg-modal[open] .sg-progress i { animation: sgGrow .8s .12s cubic-bezier(.2, .8, .2, 1) both; }
  dialog.sg-modal[open] .sg-steps li { animation: sgUp .38s calc(80ms + var(--i, 0) * 40ms) cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes sgIn { from { opacity: 0; transform: translateY(14px) scale(.985); } }
  @keyframes sgOut { to { opacity: 0; transform: translateY(8px) scale(.99); } }
  @keyframes sgFade { from { opacity: 0; } }
  @keyframes sgRing { from { stroke-dashoffset: 326.7; } }
  @keyframes sgGrow { from { width: 0; } }
  @keyframes sgUp { from { opacity: 0; transform: translateY(8px); } }
}
@media (prefers-reduced-motion: reduce) { .sg-card, .sg-card-chev, .sg-step, .sg-end .i { transition: none; } .sg-card:hover, .sg-step:hover { transform: none; } }

@media (max-width: 760px) {
  .sg-entry-hub { display: block; }
  dialog.sg-modal { width: 100vw; height: 100vh; height: 100dvh; max-height: none; margin: 0; border-radius: 0; border: 0; }
  .sg-wrap { display: flex; flex-direction: column; overflow-y: auto; }
  .sg-aside { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: calc(18px + env(safe-area-inset-top, 0px)) 20px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sg-eyebrow { width: 100%; padding-right: 48px; }
  .sg-ring { width: 64px; height: 64px; }
  .sg-ring svg { width: 64px; height: 64px; }
  .sg-ring b { font-size: 15px; }
  .sg-ring small { display: none; }
  .sg-aside-text { flex: 1; min-width: 0; font-size: 13px; }
  .sg-hide { margin: 0; width: 100%; }
  .sg-main { overflow: visible; padding: 20px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .sg-x.btn.icon { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); right: 10px; margin: 0; }
  .sg-head h2 { font-size: 18px; }
  .sg-step { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; padding: 14px; }
  .sg-step:hover { transform: none; }
  .sg-ico { display: none; }
  .sg-go { display: none; }
  @media (prefers-reduced-motion: no-preference) {
    dialog.sg-modal[open] { animation: sgSheet .34s cubic-bezier(.2, .8, .2, 1) both; }
    dialog.sg-modal.is-closing { animation: sgSheetOut .22s cubic-bezier(.4, 0, 1, 1) both; }
    @keyframes sgSheet { from { transform: translateY(28px); opacity: 0; } }
    @keyframes sgSheetOut { to { transform: translateY(28px); opacity: 0; } }
  }
}


/* ══ 4.31.0: Projekten som i Notion ══════════════════════════════════════════════════════════
   En vit sida (förut låg den genomskinlig på den grå bakgrunden), Notions färger i ljust och mörkt,
   "/"-menyn med grupper och beskrivningar, och block för bild, video, ljud, PDF och filer. */
.proj-wrap { --n-bg: #FFFFFF; --n-side: #F7F7F5; --n-text: #37352F; --n-muted: rgba(55, 53, 47, .65); --n-faint: rgba(55, 53, 47, .45);
  --n-line: rgba(55, 53, 47, .16); --n-soft-line: rgba(55, 53, 47, .09); --n-hover: rgba(55, 53, 47, .06); --n-tile: #FFFFFF; --n-blue: #2383E2;
  --n-shadow: 0 0 0 1px rgba(15, 15, 15, .05), 0 3px 6px rgba(15, 15, 15, .1), 0 9px 24px rgba(15, 15, 15, .2); background: var(--n-bg); }
[data-theme="dark"] .proj-wrap { --n-bg: #191919; --n-side: #202020; --n-text: rgba(255, 255, 255, .81); --n-muted: rgba(255, 255, 255, .5); --n-faint: rgba(255, 255, 255, .38);
  --n-line: rgba(255, 255, 255, .13); --n-soft-line: rgba(255, 255, 255, .07); --n-hover: rgba(255, 255, 255, .055); --n-tile: #252525;
  --n-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 3px 6px rgba(0, 0, 0, .3), 0 9px 24px rgba(0, 0, 0, .45); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .proj-wrap { --n-bg: #191919; --n-side: #202020; --n-text: rgba(255, 255, 255, .81); --n-muted: rgba(255, 255, 255, .5);
  --n-faint: rgba(255, 255, 255, .38); --n-line: rgba(255, 255, 255, .13); --n-soft-line: rgba(255, 255, 255, .07); --n-hover: rgba(255, 255, 255, .055); --n-tile: #252525;
  --n-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 3px 6px rgba(0, 0, 0, .3), 0 9px 24px rgba(0, 0, 0, .45); }
  :root:not([data-theme="light"]) article.doc { --n-text: rgba(255, 255, 255, .81); --n-muted: rgba(255, 255, 255, .5); --n-faint: rgba(255, 255, 255, .38); --n-line: rgba(255, 255, 255, .13); --n-hover: rgba(255, 255, 255, .055); --n-under: rgba(255, 255, 255, .25); } }
@media (min-width: 761px) {
  .main-wrap > .proj-wrap { margin: 0 8px 8px 0; border: 1px solid var(--line); border-radius: var(--card-r, 12px); overflow: hidden; box-shadow: 0 1px 2px rgba(20, 24, 40, .04); }
}
.proj-wrap .proj-side { background: var(--n-side); border-right: 1px solid var(--n-soft-line); }
.proj-wrap .proj-main { background: var(--n-bg); color: var(--n-text); }
.proj-wrap .proj-top { background: color-mix(in srgb, var(--n-bg) 92%, transparent); border-bottom: 1px solid transparent; min-height: 45px; padding: 6px 12px 6px 14px; }
.proj-wrap .proj-top .crumbs a { color: var(--n-text); font-size: 14px; border-radius: 4px; padding: 2px 6px; }
.proj-wrap .proj-top .crumbs a:hover { background: var(--n-hover); }
.proj-wrap .proj-top .crumbs .sep { color: var(--n-faint); }
.proj-wrap .ps-head b, .proj-wrap .ps-nav .nav-item { color: var(--n-text); }
.proj-wrap .ps-nav .nav-item:hover { background: var(--n-hover); }
article.doc .bk-text { color: var(--n-text); }
article.doc .doc-add { color: var(--n-faint); }

/* "/"-menyn */
.slash { position: absolute; z-index: 400; width: 324px; max-height: min(380px, 60vh); overflow-y: auto; overscroll-behavior: contain; padding: 6px 0; display: block;
  background: var(--surface); border: 0; border-radius: 10px; box-shadow: 0 0 0 1px rgba(15, 15, 15, .05), 0 3px 6px rgba(15, 15, 15, .1), 0 9px 24px rgba(15, 15, 15, .2); }
[data-theme="dark"] .slash { background: #252525; box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 3px 6px rgba(0, 0, 0, .3), 0 9px 24px rgba(0, 0, 0, .45); }
.slash-g { padding: 8px 14px 6px; font-size: 12px; font-weight: 500; color: rgba(55, 53, 47, .65); }
[data-theme="dark"] .slash-g { color: rgba(255, 255, 255, .5); }
.slash button { display: flex; align-items: center; gap: 10px; width: calc(100% - 8px); margin: 0 4px; padding: 5px 10px 5px 6px; border: 0; border-radius: 6px; background: transparent; text-align: left; cursor: pointer; color: var(--ink); min-height: 46px; }
.slash button.on { background: rgba(55, 53, 47, .08); }
[data-theme="dark"] .slash button.on { background: rgba(255, 255, 255, .06); }
.slash-ico { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 4px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(15, 15, 15, .1); color: rgba(55, 53, 47, .75); }
[data-theme="dark"] .slash-ico { background: #2F2F2F; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .75); }
.slash-glyph { font-size: 17px; font-weight: 600; line-height: 1; }
.slash-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.slash-txt b { font-size: 14px; font-weight: 500; line-height: 1.3; }
.slash-txt small { font-size: 12px; color: rgba(55, 53, 47, .65); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-theme="dark"] .slash-txt small { color: rgba(255, 255, 255, .5); }
.slash-none { padding: 10px 14px; font-size: 14px; color: rgba(55, 53, 47, .65); }

/* Media */
article.doc .bk-media { position: relative; margin: 4px 0; }
article.doc .bk-media img, article.doc .bk-media video { display: block; max-width: 100%; height: auto; border-radius: 4px; }
article.doc .bk-media video { width: 100%; background: #000; }
article.doc .bk-cap { margin-top: 7px; font-size: 14px; color: var(--n-muted); line-height: 1.4; outline: 0; min-height: 1.4em; }
article.doc .bk-cap:empty::before { content: attr(data-placeholder); color: var(--n-faint); }
article.doc .bk-media:not(:hover) .bk-cap:empty:not(:focus) { visibility: hidden; height: 0; min-height: 0; margin: 0; }
article.doc .bk-fmeta { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 14px; color: var(--n-text); }
article.doc .bk-f-ico { color: var(--n-muted); display: grid; place-items: center; flex: none; }
article.doc .bk-fname { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
article.doc .bk-fsize { color: var(--n-faint); font-size: 12.5px; white-space: nowrap; }
article.doc .bk-audio { padding: 10px 14px 12px; border: 1px solid var(--n-soft-line); border-radius: 6px; }
article.doc .bk-audio audio { width: 100%; margin-top: 6px; }
article.doc .bk-pdf { border: 1px solid var(--n-soft-line); border-radius: 6px; overflow: hidden; }
article.doc .bk-pdf .bk-fmeta { padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--n-soft-line); }
article.doc .bk-pdf iframe { display: block; width: 100%; height: min(720px, 75vh); border: 0; background: #F7F7F5; }
article.doc .bk-open { margin-left: auto; font-size: 13px; color: var(--n-text); border-radius: 4px; padding: 4px 8px; text-decoration: none; }
article.doc .bk-open:hover { background: var(--n-hover); }
article.doc .bk-file { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 10px; border-radius: 6px; color: var(--n-text); text-decoration: none; font-size: 14px; }
article.doc .bk-file:hover { background: var(--n-hover); }
article.doc .bk-dl { margin-left: auto; font-size: 13px; color: var(--n-muted); }
article.doc .bk-tools { position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; gap: 2px; padding: 2px; border-radius: 6px; background: var(--surface); box-shadow: 0 0 0 1px rgba(15, 15, 15, .08), 0 2px 6px rgba(15, 15, 15, .12); opacity: 0; transition: opacity .15s; }
article.doc .bk-media:hover .bk-tools, article.doc .bk-tools:focus-within { opacity: 1; }
article.doc .bk-tools button, article.doc .bk-tools a { border: 0; background: none; font-size: 12.5px; color: var(--n-text); padding: 4px 8px; border-radius: 4px; cursor: pointer; text-decoration: none; min-height: 28px; display: inline-flex; align-items: center; }
article.doc .bk-tools button:hover, article.doc .bk-tools a:hover { background: var(--n-hover); }
article.doc .bk-audio .bk-tools, article.doc .bk-pdf .bk-tools { top: 5px; right: 70px; }
@media (hover: none) { article.doc .bk-tools { opacity: 1; } }
/* Uppladdning */
article.doc .bk-upload { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; min-height: 64px; padding: 12px 14px; border-radius: 6px; background: rgba(55, 53, 47, .045); color: var(--n-muted); font-size: 14px; }
[data-theme="dark"] article.doc .bk-upload { background: rgba(255, 255, 255, .045); }
article.doc .bk-up-ico { display: grid; place-items: center; color: var(--n-faint); }
article.doc .bk-up-txt { flex: 1; min-width: 140px; }
article.doc .bk-up-acts { display: flex; gap: 6px; }
article.doc .bk-up-btn { border: 1px solid var(--n-line); background: var(--n-bg); color: var(--n-text); font-size: 13px; padding: 0 12px; min-height: 32px; border-radius: 5px; cursor: pointer; }
article.doc .bk-up-btn:hover { background: var(--n-hover); }
article.doc .bk-up-btn.ghost { border-color: transparent; background: transparent; }
article.doc .bk-up-bar { flex-basis: 100%; height: 4px; border-radius: 2px; background: var(--n-soft-line); overflow: hidden; }
article.doc .bk-up-bar i { display: block; height: 100%; background: var(--n-blue); transition: width .2s; }
article.doc.drop-files .doc-inner { box-shadow: 0 0 0 2px var(--n-blue) inset; border-radius: 8px; background: rgba(35, 131, 226, .04); }
article.doc .bk.over { box-shadow: 0 -2px 0 0 var(--n-blue); }
@media (prefers-reduced-motion: reduce) { article.doc .bk-tools, article.doc .bk-up-bar i { transition: none; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .slash { background: #252525; box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 3px 6px rgba(0, 0, 0, .3), 0 9px 24px rgba(0, 0, 0, .45); }
  :root:not([data-theme="light"]) .slash-g, :root:not([data-theme="light"]) .slash-txt small { color: rgba(255, 255, 255, .5); }
  :root:not([data-theme="light"]) .slash button.on { background: rgba(255, 255, 255, .06); }
  :root:not([data-theme="light"]) .slash-ico { background: #2F2F2F; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .75); }
  :root:not([data-theme="light"]) article.doc .bk-upload { background: rgba(255, 255, 255, .045); }
}
/* Mediablocken fyller hela raden (blockets insida är en flex-rad, så de krympte till sitt innehåll) */
article.doc .bk-in:has(> .bk-media), article.doc .bk-in:has(> .bk-upload) { display: block; }
article.doc .bk-media, article.doc .bk-upload { flex: 1 1 auto; width: 100%; min-width: 0; }

/* ══ 4.32.0: markera flera block, dra för att flytta, PDF i en ruta och sidans uppgifter ══ */
article.doc .blocks { position: relative; }
article.doc .bk.sel { background: rgba(35, 131, 226, .14); border-radius: 4px; }
article.doc .bk.sel .bk-text::selection { background: transparent; }
article.doc .bk.dragging { opacity: .35; }
.bk-dropline { position: absolute; left: 0; right: 0; height: 3px; border-radius: 2px; background: rgba(35, 131, 226, .75); pointer-events: none; z-index: 5; }
.bk-lasso { position: fixed; z-index: 450; background: rgba(35, 131, 226, .1); border: 1px solid rgba(35, 131, 226, .45); border-radius: 2px; pointer-events: none; }
body.bk-grabbing, body.bk-grabbing * { cursor: grabbing !important; user-select: none; }
article.doc .bk-h[data-grip] { touch-action: none; }
.bk-selbar { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 460; display: flex; align-items: center; gap: 4px;
  padding: 6px 6px 6px 16px; border-radius: 10px; background: #2F2F2F; color: #fff; font-size: 13.5px; box-shadow: 0 8px 28px rgba(15, 15, 15, .3); }
.bk-selbar[hidden] { display: none; }
.bk-selbar span { margin-right: 8px; white-space: nowrap; }
.bk-selbar button { border: 0; background: transparent; color: #fff; font: inherit; min-height: 34px; padding: 0 12px; border-radius: 6px; cursor: pointer; }
.bk-selbar button:hover { background: rgba(255, 255, 255, .12); }
.bk-selbar [data-seldel] { color: #FF8A8A; }
@media (max-width: 700px) { .bk-selbar { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }
/* PDF som kort */
article.doc .bk-pdf { border: 0; overflow: visible; }
article.doc .bk-pdfcard { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 10px 14px 10px 10px; border: 1px solid var(--n-soft-line, rgba(55, 53, 47, .09)); border-radius: 8px;
  background: transparent; color: var(--n-text); text-align: left; cursor: pointer; font: inherit; transition: background .15s, border-color .15s; }
article.doc .bk-pdfcard:hover { background: var(--n-hover); border-color: var(--n-line); }
article.doc .bk-pdfcard:focus-visible { outline: 2px solid var(--n-blue, #2383E2); outline-offset: 2px; }
article.doc .bk-pdf-ico { position: relative; width: 42px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 6px; background: #FDECEC; color: #C4302B; }
article.doc .bk-pdf-ico i { position: absolute; bottom: 4px; font-style: normal; font-size: 8.5px; font-weight: 800; letter-spacing: .04em; }
article.doc .bk-pdf-ico svg { margin-top: -8px; }
[data-theme="dark"] article.doc .bk-pdf-ico { background: rgba(229, 83, 75, .18); color: #FF8A80; }
article.doc .bk-pdf-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
article.doc .bk-pdf-txt .bk-fname { font-size: 14.5px; }
article.doc .bk-pdf-go { font-size: 13px; color: var(--n-muted); padding: 5px 12px; border-radius: 6px; border: 1px solid var(--n-line); }
article.doc .bk-pdf .bk-tools { top: 14px; right: 80px; }
dialog.pdf-modal { width: min(1000px, calc(100vw - 32px)); max-width: none; height: min(90vh, 1100px); max-height: none; padding: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; }
dialog.pdf-modal:not([open]) { display: none; }
.pdf-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.pdf-head b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pdf-head small { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.pdf-head .pdf-ico { color: #C4302B; display: grid; }
dialog.pdf-modal iframe { flex: 1; width: 100%; border: 0; background: #525659; }
@media (prefers-reduced-motion: no-preference) {
  dialog.pdf-modal[open] { animation: sgIn .26s cubic-bezier(.2, .8, .2, 1) both; }
  dialog.pdf-modal[open]::backdrop { animation: sgFade .26s ease both; }
  dialog.pdf-modal.is-closing { animation: sgOut .17s cubic-bezier(.4, 0, 1, 1) both; }
}
@media (max-width: 700px) {
  dialog.pdf-modal { width: 100vw; height: 100dvh; border-radius: 0; margin: 0; }
  .pdf-head { padding-top: calc(10px + env(safe-area-inset-top, 0px)); flex-wrap: wrap; }
  .pdf-head .btn.ghost.sm:not(.icon) { font-size: 12.5px; }
}
/* Sidans uppgifter */
article.doc .pg-tasks { margin: 0 0 18px; padding: 8px 6px 6px; border: 1px solid var(--n-soft-line, rgba(55, 53, 47, .09)); border-radius: 8px; }
article.doc .pg-tasks-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 8px 6px; font-size: 12.5px; color: var(--n-muted); }
article.doc .pg-tasks-head span { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
article.doc .pg-tasks-head a { color: var(--n-muted); text-decoration: none; border-radius: 4px; padding: 2px 6px; }
article.doc .pg-tasks-head a:hover { background: var(--n-hover); color: var(--n-text); }
article.doc .pg-task { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 4px 8px; border-radius: 5px; color: var(--n-text); text-decoration: none; font-size: 14px; }
article.doc .pg-task:hover { background: var(--n-hover); }
article.doc .pg-task .sdot { width: 8px; height: 8px; border-radius: 50%; background: var(--sc); flex: none; }
article.doc .pg-task .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
article.doc .pg-task small { color: var(--n-muted); font-size: 12.5px; white-space: nowrap; }
article.doc .pg-task small.late { color: #D44C47; }
.tk-scope { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--ink); font-size: 13px; font-weight: 500; }
.tk-scope a { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--muted); }
.tk-scope a:hover { background: var(--hover); color: var(--ink); }
.task .tk-page { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-tasks-btn .pill { margin-left: 2px; }

/* ══ 4.33.0: e-handel – ordrar i ärendets högerpanel och butikerna på integrationssidan ══ */
.details .orders h4 { margin-bottom: 8px; }
.od { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin-bottom: 8px; overflow: hidden; }
.od > summary { list-style: none; cursor: pointer; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.od > summary::-webkit-details-marker { display: none; }
.od > summary:hover { background: var(--hover); }
.od > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 10px; }
.od-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.od-top b { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.od-sub { font-size: 12.5px; color: var(--muted); }
.od-st { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--active); color: var(--ink-2); }
.od-st.t-ok { background: color-mix(in srgb, var(--green) 14%, transparent); color: color-mix(in srgb, var(--green) 75%, var(--ink)); }
.od-st.t-info { background: color-mix(in srgb, #2F6FED 13%, transparent); color: color-mix(in srgb, #2F6FED 75%, var(--ink)); }
.od-st.t-wait { background: color-mix(in srgb, #D99A0B 16%, transparent); color: color-mix(in srgb, #B07A00 80%, var(--ink)); }
.od-st.t-bad { background: color-mix(in srgb, var(--red) 13%, transparent); color: color-mix(in srgb, var(--red) 75%, var(--ink)); }
.od-body { padding: 4px 12px 12px; border-top: 1px solid var(--line); }
.od-items { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.od-items li { display: flex; gap: 10px; align-items: center; }
.od-items img, .od-noimg { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; flex: none; background: var(--surface-2); border: 1px solid var(--line); }
.od-in { display: flex; flex-direction: column; min-width: 0; font-size: 13px; line-height: 1.35; }
.od-in span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.od-in small { color: var(--muted); font-size: 12px; }
.od-body .kv { margin: 6px 0 10px; }
.od-body .kv a { color: var(--accent); }
.od-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.od-empty { margin: 0; font-size: 13px; color: var(--muted); }
.od-empty small { display: block; margin-top: 4px; font-size: 12px; }
.od-err { margin: 0 0 8px; font-size: 12.5px; color: var(--red); }
/* 4.164.0: förklaring när butiken har fler ordrar än den visar (Shopify utan read_all_orders) */
.od-hint { margin: 0 0 8px; padding: 8px 10px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); }
.od-skel { height: 56px; border-radius: 10px; background: linear-gradient(90deg, var(--surface-2), var(--hover), var(--surface-2)); background-size: 200% 100%; margin-bottom: 8px; animation: odShim 1.2s linear infinite; }
@keyframes odShim { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .od-skel { animation: none; } }
/* Integrationssidan */
.cm-stores { gap: 0; }
.cm-store { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.cm-store:first-child { border-top: 0; padding-top: 0; }
.cm-store b { display: block; font-size: 14px; }
.cm-store small { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.cm-store form { margin: 0; }
.cm-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--green); }
.cm-dot.bad { background: var(--red); }
.cm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.cm-steps { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; font-size: 13.5px; line-height: 1.55; }
.cm-steps ol { margin: 8px 0 10px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.cm-steps code { font-size: 12px; padding: 1px 5px; border-radius: 4px; background: var(--active); }
.cm-steps .muted { font-size: 12.5px; margin: 0 0 10px; }
.cm-privacy { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 12.5px; color: var(--muted); }
.cm-privacy .i { flex: none; margin-top: 2px; color: var(--green); }
.cm-alt summary { cursor: pointer; font-size: 13px; color: var(--muted); }
@media (max-width: 760px) { .cm-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } .cm-store { flex-wrap: wrap; } }
.od-top { flex-wrap: wrap; row-gap: 4px; }
.od-st { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ══ 4.34.0: projektmenyn – högerklick eller ⋯, byt namn, dela, ta bort för alltid ══ */
.proj-cell { position: relative; min-width: 0; transition: opacity .2s, transform .2s; }
.proj-cell .proj-card { height: 100%; }
.proj-cell.pj-gone { opacity: 0; transform: scale(.97); }
.proj-more { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .15s, background .15s; }
.proj-cell:hover .proj-more, .proj-more:focus-visible, .proj-more[aria-expanded="true"] { opacity: 1; }
.proj-more:hover { background: var(--hover); color: var(--ink); }
.proj-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (hover: none) { .proj-more { opacity: 1; } }
.pj-menu { position: fixed; z-index: 500; min-width: 230px; padding: 6px; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px rgba(15, 15, 15, .06), 0 4px 10px rgba(15, 15, 15, .08), 0 14px 32px rgba(15, 15, 15, .16); animation: pjIn .12s ease-out; }
.pj-menu-t { padding: 6px 10px 6px; font-size: 12px; color: var(--muted); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.pj-menu button:hover, .pj-menu button:focus-visible { background: var(--hover); outline: 0; }
.pj-menu button svg { color: var(--muted); flex: none; }
.pj-menu button.danger, .pj-menu button.danger svg { color: var(--red); }
.pj-menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
@keyframes pjIn { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .pj-menu { animation: none; } .proj-cell { transition: none; } }
.pj-ico-btn { width: 44px; height: 40px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.pj-ico-btn:hover { background: var(--hover); }
.btn.danger.danger-solid { background: var(--red); border-color: var(--red); color: #fff; }
.btn.danger.danger-solid:hover:not(:disabled) { filter: brightness(.92); background: var(--red); border-color: var(--red); }
.btn.danger.danger-solid:disabled { opacity: .45; cursor: not-allowed; }
.pj-warn { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 9px; background: var(--red-soft); color: var(--ink); font-size: 13.5px; line-height: 1.5; }
.pj-warn .i { color: var(--red); flex: none; margin-top: 2px; }
dialog.pj-share { width: min(560px, calc(100vw - 32px)); }
.pj-invite { display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.pj-levels { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pj-level { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }
.pj-level:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: var(--accent-soft); }
.pj-level input { margin-top: 3px; }
.pj-level b { display: block; font-size: 13.5px; } .pj-level small { color: var(--muted); font-size: 12.5px; }
.pj-msg { margin: 0; font-size: 13px; padding: 10px 12px; border-radius: 8px; }
.pj-msg.ok { background: var(--green-soft); } .pj-msg.bad { background: var(--red-soft); }
.pj-msg input { margin-top: 8px; width: 100%; }
.pj-sub { margin: 0 0 8px; font-size: 13px; color: var(--muted); font-weight: 600; }
.pj-members { display: flex; flex-direction: column; }
.pj-m { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.pj-m:first-child { border-top: 0; }
.pj-m b { display: block; font-size: 13.5px; } .pj-m small { display: block; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.pj-m .grow { min-width: 0; }
.pj-m select { width: auto; max-width: 210px; }
.pj-m.pending b { font-weight: 500; }
.pj-av { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--active); color: var(--ink-2); font-size: 12.5px; font-weight: 700; }
@media (max-width: 560px) { .pj-m { flex-wrap: wrap; } .pj-m select { max-width: none; width: 100%; } }

/* ══ 4.35.0: signaturen i skrivrutan och Ångra skicka ══ */
.cmp-sig { margin: 4px 14px 8px; padding: 10px 0 0; border-top: 1px dashed var(--line); opacity: .62; pointer-events: none; user-select: none; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.cmp-sig .sig-label { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cmp-sig .sig-body { max-height: 140px; overflow: hidden; }
.cmp-sig .sig-body img { max-height: 48px; width: auto; }
.cmp-sig .sig-body a { color: inherit; }
.composer.note-mode .cmp-sig, .composer.collapsed .cmp-sig { display: none; }
.undo-send { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 1200; display: flex; align-items: center; gap: 12px;
  min-width: 280px; padding: 10px 10px 10px 16px; border-radius: 12px; background: #1F2027; color: #fff; font-size: 14px; box-shadow: 0 10px 30px rgba(10, 12, 20, .32); overflow: hidden; animation: usIn .22s cubic-bezier(.2, .8, .2, 1); transition: opacity .3s, transform .3s; }
.undo-send .us-ico { display: grid; color: #9CA3FF; }
.undo-send .us-txt { flex: 1; font-variant-numeric: tabular-nums; }
.undo-send .us-undo { border: 0; background: rgba(255, 255, 255, .14); color: #fff; font: inherit; font-weight: 700; min-height: 36px; padding: 0 16px; border-radius: 8px; cursor: pointer; }
.undo-send .us-undo:hover { background: rgba(255, 255, 255, .24); }
.undo-send .us-undo:focus-visible { outline: 2px solid #9CA3FF; outline-offset: 2px; }
.undo-send .us-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .12); }
.undo-send .us-bar i { display: block; height: 100%; background: #9CA3FF; transform-origin: left; animation: usBar linear forwards; }
.undo-send.done .us-ico { color: #4ADE80; } .undo-send.done .us-bar { display: none; }
.undo-send.err .us-ico { color: #FF8A8A; }
.undo-send.out { opacity: 0; transform: translate(-50%, 12px); }
@keyframes usIn { from { opacity: 0; transform: translate(-50%, 14px); } }
@keyframes usBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 700px) { .undo-send { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); min-width: 0; width: calc(100vw - 24px); } }
@media (prefers-reduced-motion: reduce) { .undo-send { animation: none; transition: none; } .undo-send .us-bar i { animation: none; } }

/* ══ 4.36.0: de tre senaste ordrarna, "Visa alla ordrar" och orderkortet i svaret ══ */
.od { padding: 12px; }
.od-head { display: flex; flex-direction: column; gap: 3px; }
.od .od-acts { margin-top: 10px; }
.od .od-acts .btn { min-height: 30px; }
.od .od-body { margin: 10px -12px -12px; padding: 4px 12px 12px; }
.od-all { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 40px; border: 1px dashed var(--line-strong); border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.od-all:hover { background: var(--hover); border-style: solid; }
.od-all span { font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: var(--active); color: var(--muted); }
dialog.od-modal { width: min(640px, calc(100vw - 32px)); max-height: min(86vh, 900px); display: flex; flex-direction: column; }
dialog.od-modal:not([open]) { display: none; }
.od-modal .od-list { overflow-y: auto; gap: 10px; }
.od-modal .od { margin: 0; }
@media (max-width: 700px) { dialog.od-modal { width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; } }
/* Orderkortet i skrivrutan (förhandsvisning – det riktiga ritas av servern) */
.bd-ocard { position: relative; display: flex; flex-direction: column; gap: 3px; max-width: 420px; margin: 8px 0; padding: 12px 36px 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 1px 2px rgba(20, 24, 40, .05); user-select: none; cursor: default; }
.bd-ocard .oc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bd-ocard .oc-store { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.bd-ocard b { font-size: 15px; color: var(--ink); }
.bd-ocard .oc-meta { font-size: 12.5px; color: var(--muted); }
.bd-ocard .oc-items { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin-top: 4px; }
.bd-ocard .oc-note { font-size: 11px; color: var(--faint); margin-top: 6px; }
.bd-ocard .oc-x { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
.bd-ocard .oc-x:hover { background: var(--hover); color: var(--ink); }

/* ══ 4.37.0: mörkt läge – läsbar text överallt (mätt: minst 4,5:1 för text, 3:1 för stor text) ══ */
/* Obs: mörka färger sätts med :root[data-theme="dark"] (0,2,0) – en regel med bara :root[data-theme="dark"] vinner inte */
:root[data-theme="dark"] { --faint: #9199AA; --muted: #A3AAB8; --nav-muted: #A3AAB8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --faint: #9199AA; --muted: #A3AAB8; --nav-muted: #A3AAB8; } }
/* Knappar med fylld accentfärg: lite djupare yta så att den vita texten syns */
:root[data-theme="dark"] .btn.primary { background: color-mix(in srgb, var(--accent) 74%, #000); border-color: color-mix(in srgb, var(--accent) 74%, #000); color: #fff; }
:root[data-theme="dark"] .btn.primary:hover { background: color-mix(in srgb, var(--accent) 66%, #000); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn.primary { background: color-mix(in srgb, var(--accent) 74%, #000); border-color: color-mix(in srgb, var(--accent) 74%, #000); color: #fff; }
  :root:not([data-theme="light"]) .btn.primary:hover { background: color-mix(in srgb, var(--accent) 66%, #000); }
}
/* Etiketter i databaser (från Notion): Notions mörka färger med ljus text – förut dämpade ett filter även texten */
:root[data-theme="dark"] article.doc .db-tag { filter: none; color: rgba(255, 255, 255, .9); }
:root[data-theme="dark"] article.doc .db-tag.c0 { background: rgb(80, 80, 80); } :root[data-theme="dark"] article.doc .db-tag.c1 { background: rgb(96, 59, 44); }
:root[data-theme="dark"] article.doc .db-tag.c2 { background: rgb(133, 76, 29); } :root[data-theme="dark"] article.doc .db-tag.c3 { background: rgb(118, 86, 36); }
:root[data-theme="dark"] article.doc .db-tag.c4 { background: rgb(43, 89, 63); } :root[data-theme="dark"] article.doc .db-tag.c5 { background: rgb(40, 69, 108); }
:root[data-theme="dark"] article.doc .db-tag.c6 { background: rgb(73, 47, 100); } :root[data-theme="dark"] article.doc .db-tag.c7 { background: rgb(105, 49, 76); }
:root[data-theme="dark"] article.doc .db-tag.c8 { background: rgb(110, 54, 48); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) article.doc .db-tag { filter: none; color: rgba(255, 255, 255, .9); }
  :root:not([data-theme="light"]) article.doc .db-tag.c0 { background: rgb(80, 80, 80); } :root:not([data-theme="light"]) article.doc .db-tag.c1 { background: rgb(96, 59, 44); }
  :root:not([data-theme="light"]) article.doc .db-tag.c2 { background: rgb(133, 76, 29); } :root:not([data-theme="light"]) article.doc .db-tag.c3 { background: rgb(118, 86, 36); }
  :root:not([data-theme="light"]) article.doc .db-tag.c4 { background: rgb(43, 89, 63); } :root:not([data-theme="light"]) article.doc .db-tag.c5 { background: rgb(40, 69, 108); }
  :root:not([data-theme="light"]) article.doc .db-tag.c6 { background: rgb(73, 47, 100); } :root:not([data-theme="light"]) article.doc .db-tag.c7 { background: rgb(105, 49, 76); }
  :root:not([data-theme="light"]) article.doc .db-tag.c8 { background: rgb(110, 54, 48); }
}
/* Projektets sidomeny och sidans rubrik­ikoner */
:root[data-theme="dark"] .proj-side .ps-label, :root[data-theme="dark"] .pg-tree .pg-ico, :root[data-theme="dark"] .pg-tree .pg-toggle { color: rgba(255, 255, 255, .55); }
:root[data-theme="dark"] article.doc .db-th-ico { color: rgba(255, 255, 255, .55); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .proj-side .ps-label, :root:not([data-theme="light"]) .pg-tree .pg-ico, :root:not([data-theme="light"]) .pg-tree .pg-toggle { color: rgba(255, 255, 255, .55); }
  :root:not([data-theme="light"]) article.doc .db-th-ico { color: rgba(255, 255, 255, .55); }
}
/* Integrationskortens märken */
:root[data-theme="dark"] .ig-badge.ig-soon, :root[data-theme="dark"] .ig-badge.ig-partner { background: var(--active); color: var(--ink-2); }
:root[data-theme="dark"] .ig-badge.ig-on { background: color-mix(in srgb, var(--green) 20%, transparent); color: #7EE2B0; }
:root[data-theme="dark"] .ig-badge.ig-live { background: color-mix(in srgb, var(--accent) 22%, transparent); color: #C4C1FF; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ig-badge.ig-soon, :root:not([data-theme="light"]) .ig-badge.ig-partner { background: var(--active); color: var(--ink-2); }
  :root:not([data-theme="light"]) .ig-badge.ig-on { background: color-mix(in srgb, var(--green) 20%, transparent); color: #7EE2B0; }
  :root:not([data-theme="light"]) .ig-badge.ig-live { background: color-mix(in srgb, var(--accent) 22%, transparent); color: #C4C1FF; }
}
/* Signaturen i skrivrutan: i mörkt läge tas signaturens egna ljusa bakgrunder och mörka textfärger bort, så att den
   ser ut som i ljust läge – dämpad text på rutans egen bakgrund (bilder som logotyper behålls) */
.cmp-sig { opacity: 1; color: var(--muted); }
.cmp-sig .sig-body { opacity: .8; }
:root[data-theme="dark"] .cmp-sig .sig-body *:not(img) { background: transparent !important; background-color: transparent !important; color: inherit !important; border-color: var(--line) !important; }
:root[data-theme="dark"] .cmp-sig .sig-body { color: var(--ink-2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cmp-sig .sig-body *:not(img) { background: transparent !important; background-color: transparent !important; color: inherit !important; border-color: var(--line) !important; }
  :root:not([data-theme="light"]) .cmp-sig .sig-body { color: var(--ink-2); }
}
:root[data-theme="dark"] .dir-chip.out { color: #B3B0FF; }
:root[data-theme="dark"] .ig-mine { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
:root[data-theme="dark"] .ig-mine b { color: var(--ink); }
:root[data-theme="dark"] .btn.danger:not(.danger-solid) { background: transparent; color: #FF9AAE; }
:root[data-theme="dark"] .btn.danger:not(.danger-solid):hover { background: var(--red-soft); }
:root[data-theme="dark"] .cal-dh.today b, :root[data-theme="dark"] .cal-dh.today:hover b { background: color-mix(in srgb, var(--accent) 74%, #000); }
:root[data-theme="dark"] article.doc .doc-add { color: rgba(255, 255, 255, .58); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dir-chip.out { color: #B3B0FF; }
  :root:not([data-theme="light"]) .ig-mine { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
  :root:not([data-theme="light"]) .ig-mine b { color: var(--ink); }
  :root:not([data-theme="light"]) .btn.danger:not(.danger-solid) { background: transparent; color: #FF9AAE; }
  :root:not([data-theme="light"]) .btn.danger:not(.danger-solid):hover { background: var(--red-soft); }
  :root:not([data-theme="light"]) .cal-dh.today b, :root:not([data-theme="light"]) .cal-dh.today:hover b { background: color-mix(in srgb, var(--accent) 74%, #000); }
  :root:not([data-theme="light"]) article.doc .doc-add { color: rgba(255, 255, 255, .58); }
}
/* 4.37.0: de dolda kryssrutorna i taggarna (.sr, position:absolute) hade ingen positionerad förälder och sträckte ut
   hela sidan nedåt – ju längre högerpanelen var (t.ex. med ordrar), desto mer vitt syntes under appen */
.details, .tagpill { position: relative; }
.sr { clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
/* Breda sidor med tabeller och databaser */
article.doc.is-wide .doc-inner { max-width: min(1200px, 100%); padding-left: 48px; padding-right: 48px; }
@media (max-width: 700px) { article.doc.is-wide .doc-inner { padding-left: 16px; padding-right: 16px; } }
/* Alla ordrar: två i bredd, klickbara, och en order i rutan */
dialog.od-modal { width: min(760px, calc(100vw - 32px)); }
.od-modal .modal-head { gap: 6px; }
.od-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; overflow-y: auto; align-content: start; }
.od-grid .od-err, .od-grid .od-empty, .od-grid .od-skel { grid-column: 1 / -1; }
.od-tile { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-height: 118px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); text-align: left; font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.od-tile:hover { border-color: var(--line-strong); box-shadow: 0 6px 18px rgba(20, 24, 40, .08); transform: translateY(-1px); }
.od-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.od-tile-items { font-size: 12.5px; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: 4px; }
.od-tile-sum { margin-top: auto; padding-top: 6px; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.od-detail { overflow-y: auto; }
.od-dhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.od-dhead > div { display: flex; flex-direction: column; gap: 2px; }
.od-dhead .oc-store { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.od-dacts { padding-top: 12px; border-top: 1px solid var(--line); }
@media (max-width: 560px) { .od-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .od-tile { transition: none; } .od-tile:hover { transform: none; } }
.od-grid[hidden], .od-detail[hidden] { display: none !important; }

/* ══ 4.37.0: "+" – en ruta mitt på skärmen med ett kort per val ══ */
dialog.nh-modal { width: min(720px, calc(100vw - 32px)); padding: 26px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 30px 90px rgba(10, 12, 20, .28); }
dialog.nh-modal::backdrop { background: rgba(12, 14, 22, .42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.nh-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.nh-head > div { flex: 1; }
.nh-head h2 { margin: 0; font-size: 21px; font-weight: 650; letter-spacing: -.02em; }
.nh-head p { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.nh-head .btn.icon { width: 40px; height: 40px; margin: -6px -8px 0 0; }
.nh-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.nh-card { --tone: var(--accent); position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 156px; padding: 20px 20px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); text-align: left; font: inherit; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.nh-c1 { --tone: #5A55F2; } .nh-c2 { --tone: #15803D; } .nh-c3 { --tone: #B7791F; } .nh-c4 { --tone: #BE185D; }
.nh-card:hover { border-color: color-mix(in srgb, var(--tone) 45%, var(--line)); box-shadow: 0 10px 28px rgba(20, 24, 40, .10); transform: translateY(-2px); }
.nh-card:focus-visible { outline: 2px solid var(--tone); outline-offset: 2px; }
.nh-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 8px; background: color-mix(in srgb, var(--tone) 12%, transparent); color: var(--tone); }
.nh-t { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.nh-d { font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 88%; }
.nh-go { position: absolute; right: 16px; top: 18px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--tone); background: color-mix(in srgb, var(--tone) 10%, transparent); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.nh-card:hover .nh-go, .nh-card:focus-visible .nh-go { opacity: 1; transform: none; }
.nh-art { position: absolute; right: -22px; bottom: -30px; z-index: -1; color: var(--tone); opacity: .08; transform: rotate(-8deg); transition: transform .35s, opacity .35s; pointer-events: none; }
.nh-art .i { width: 132px; height: 132px; stroke-width: 1.4; }
.nh-card:hover .nh-art { opacity: .13; transform: rotate(-4deg) scale(1.05); }
:root[data-theme="dark"] .nh-art { opacity: .14; }
:root[data-theme="dark"] .nh-c1 { --tone: #9C98FF; } :root[data-theme="dark"] .nh-c2 { --tone: #5FD39A; } :root[data-theme="dark"] .nh-c3 { --tone: #E9B949; } :root[data-theme="dark"] .nh-c4 { --tone: #F27DB0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nh-art { opacity: .14; }
  :root:not([data-theme="light"]) .nh-c1 { --tone: #9C98FF; } :root:not([data-theme="light"]) .nh-c2 { --tone: #5FD39A; } :root:not([data-theme="light"]) .nh-c3 { --tone: #E9B949; } :root:not([data-theme="light"]) .nh-c4 { --tone: #F27DB0; } }
.nh-back { margin: -4px 4px -4px -8px; }
/* Stegen: in från höger, tillbaka från vänster */
@media (prefers-reduced-motion: no-preference) {
  dialog.nh-modal[open] { animation: sgIn .28s cubic-bezier(.2, .8, .2, 1) both; }
  dialog.nh-modal[open]::backdrop { animation: sgFade .28s ease both; }
  dialog.nh-from-right { animation: nhRight .3s cubic-bezier(.2, .8, .2, 1) both !important; }
  dialog.nh-from-left { animation: nhLeft .3s cubic-bezier(.2, .8, .2, 1) both !important; }
  @keyframes nhRight { from { opacity: 0; transform: translateX(36px); } }
  @keyframes nhLeft { from { opacity: 0; transform: translateX(-36px); } }
}
@media (prefers-reduced-motion: reduce) { .nh-card, .nh-go, .nh-art { transition: none; } .nh-card:hover { transform: none; } }
@media (max-width: 600px) {
  dialog.nh-modal { padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px)); margin: auto 0 0; width: 100vw; max-width: none; border-radius: 20px 20px 0 0; }
  .nh-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .nh-card { min-height: 0; padding: 16px; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; }
  .nh-ico { margin: 0; } .nh-d { flex-basis: 100%; max-width: none; }
  .nh-go { opacity: 1; transform: none; top: 16px; }
}

.nh-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nh-grid.three .nh-d { max-width: none; }
@media (max-width: 760px) { .nh-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .nh-grid.three { grid-template-columns: minmax(0, 1fr); } }
:root[data-theme="dark"] .conv-draft { color: #FF9AAE; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .conv-draft { color: #FF9AAE; } }

/* ══ 4.38.0: designsidan – inställningarna till vänster, förhandsvisningen till höger i full höjd ══ */
.designer { grid-template-columns: minmax(0, 1fr) minmax(380px, 460px); }
.designer > .stage { order: 2; position: sticky; top: 12px; height: calc(100vh - 120px); height: calc(100dvh - 120px); min-height: 660px; }
.designer > .stack { order: 1; min-width: 0; }
@media (max-width: 1100px) { .designer { grid-template-columns: minmax(0, 1fr); } .designer > .stage { order: 0; position: relative; top: 0; height: 640px; min-height: 0; } }
/* Sex mallar direkt */
.tpl-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tpl-qpick { display: flex; flex-direction: column; gap: 8px; padding: 6px 6px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; text-align: center; transition: border-color .15s, box-shadow .15s, transform .15s; }
.tpl-qpick:hover { border-color: var(--line-strong); box-shadow: 0 6px 16px rgba(20, 24, 40, .08); transform: translateY(-1px); }
.tpl-qpick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tpl-qpick.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, 0 0 0 4px var(--accent-soft); }
.tpl-qpick b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-qpick .tpl-thumb { border-radius: 10px; }
.tpl-all-btn { width: 100%; justify-content: center; min-height: 42px; }
.tpl-all-btn .pill { margin-left: 4px; }
/* Rutan med alla mallar */
dialog.tpl-modal { width: min(1080px, calc(100vw - 32px)); height: min(88vh, 960px); max-width: none; display: flex; flex-direction: column; }
dialog.tpl-modal:not([open]) { display: none; }
.tpl-filter { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.tpl-filter button { min-height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; }
.tpl-filter button:hover { background: var(--hover); }
.tpl-filter button.on { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.tpl-modal-grid { flex: 1; overflow-y: auto; display: grid !important; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; align-content: start; }
.tpl-modal-grid .tpl-pick[hidden] { display: none; }
@media (max-width: 700px) { dialog.tpl-modal { width: 100vw; height: 100dvh; margin: 0; border-radius: 0; } .tpl-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tpl-modal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .tpl-qpick { transition: none; } .tpl-qpick:hover { transform: none; } }

/* ══ 4.38.0: aviseringarna – en färg per slag, ikonen i en tonad ruta och en stor svag bild i bakgrunden ══ */
.bd-toast { --tone: var(--green); isolation: isolate; width: 380px; padding: 14px 12px 16px 14px; gap: 12px; align-items: center;
  background: linear-gradient(100deg, var(--surface) 58%, color-mix(in srgb, var(--tone) 7%, var(--surface))); }
.bd-toast.error { --tone: #D6364A; } .bd-toast.warning { --tone: #C27803; } .bd-toast.info { --tone: #2F6FED; }
.bd-toast.k-message { --tone: #5A55F2; } .bd-toast.k-mail { --tone: #1D4ED8; } .bd-toast.k-phone { --tone: #BE185D; }
.bd-toast.k-sync { --tone: #0E7490; } .bd-toast.k-save { --tone: #15803D; } .bd-toast.k-trash { --tone: #C2410C; }
.bd-toast .bt-ico, .bd-toast.success .bt-ico, .bd-toast.error .bt-ico, .bd-toast.warning .bt-ico, .bd-toast.info .bt-ico { width: 38px; height: 38px; border-radius: 11px; background: color-mix(in srgb, var(--tone) 13%, transparent); color: var(--tone); }
.bd-toast .bt-body { gap: 3px; padding-top: 0; position: relative; z-index: 1; }
.bd-toast .bt-body b { font-size: 13.5px; }
.bd-toast .bt-x { position: relative; z-index: 1; align-self: start; }
.bd-toast .bt-art { position: absolute; right: -14px; bottom: -24px; z-index: -1; color: var(--tone); opacity: .09; transform: rotate(-10deg); pointer-events: none; }
.bd-toast .bt-bar, .bd-toast.success .bt-bar, .bd-toast.error .bt-bar, .bd-toast.warning .bt-bar, .bd-toast.info .bt-bar { background: var(--tone); opacity: .7; }
/* Mörkt läge: ljusare toner så att ikonen och bilden syns mot den mörka ytan (och den gamla varningsregeln gällde även Auto i ljust läge) */
:root[data-theme="dark"] .bd-toast { --tone: #5FD39A; }
:root[data-theme="dark"] .bd-toast.error { --tone: #FF8A9A; } :root[data-theme="dark"] .bd-toast.warning { --tone: #F5C04E; } :root[data-theme="dark"] .bd-toast.info { --tone: #7FA8FF; }
:root[data-theme="dark"] .bd-toast.k-message { --tone: #A5A2FF; } :root[data-theme="dark"] .bd-toast.k-mail { --tone: #8AB4FF; } :root[data-theme="dark"] .bd-toast.k-phone { --tone: #F48FBF; }
:root[data-theme="dark"] .bd-toast.k-sync { --tone: #5CCFE0; } :root[data-theme="dark"] .bd-toast.k-save { --tone: #5FD39A; } :root[data-theme="dark"] .bd-toast.k-trash { --tone: #FFA071; }
:root[data-theme="dark"] .bd-toast .bt-art { opacity: .14; }
:root[data-theme="light"] .bd-toast.warning .bt-ico { background: color-mix(in srgb, var(--tone) 13%, transparent); color: var(--tone); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .bd-toast.warning .bt-ico { background: color-mix(in srgb, var(--tone) 13%, transparent); color: var(--tone); } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bd-toast { --tone: #5FD39A; }
  :root:not([data-theme="light"]) .bd-toast.error { --tone: #FF8A9A; } :root:not([data-theme="light"]) .bd-toast.warning { --tone: #F5C04E; } :root:not([data-theme="light"]) .bd-toast.info { --tone: #7FA8FF; }
  :root:not([data-theme="light"]) .bd-toast.k-message { --tone: #A5A2FF; } :root:not([data-theme="light"]) .bd-toast.k-mail { --tone: #8AB4FF; } :root:not([data-theme="light"]) .bd-toast.k-phone { --tone: #F48FBF; }
  :root:not([data-theme="light"]) .bd-toast.k-sync { --tone: #5CCFE0; } :root:not([data-theme="light"]) .bd-toast.k-save { --tone: #5FD39A; } :root:not([data-theme="light"]) .bd-toast.k-trash { --tone: #FFA071; }
  :root:not([data-theme="light"]) .bd-toast .bt-art { opacity: .14; }
}
@media (max-width: 600px) { .bd-toasts { left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); align-items: stretch; } .bd-toast { width: auto; } }
/* Designsidan får mer bredd, så att förhandsvisningen och mallarna får plats bredvid varandra */
.page-inner:has(.designer) { max-width: 1320px; }
.tpl-quick { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tpl-qpick { padding: 5px 5px 8px; gap: 6px; border-radius: 12px; }
.tpl-qpick b { font-size: 12px; }
@media (max-width: 1280px) { .tpl-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .tpl-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ══ 4.39.0: databaser som i Notion ══════════════════════════════════════════════════════════════ */
.dbx { --dbx-line: rgba(55, 53, 47, .09); --dbx-hover: rgba(55, 53, 47, .04); --dbx-sel: rgba(35, 131, 226, .10); --dbx-selb: rgba(35, 131, 226, .6); --dbx-mut: rgba(55, 53, 47, .6); margin: 6px 0 4px; }
:root[data-theme="dark"] .dbx { --dbx-line: rgba(255, 255, 255, .09); --dbx-hover: rgba(255, 255, 255, .035); --dbx-sel: rgba(35, 131, 226, .18); --dbx-mut: rgba(255, 255, 255, .6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dbx { --dbx-line: rgba(255, 255, 255, .09); --dbx-hover: rgba(255, 255, 255, .035); --dbx-sel: rgba(35, 131, 226, .18); --dbx-mut: rgba(255, 255, 255, .6); } }
.dbx-bar { display: flex; align-items: center; gap: 8px; padding: 0 0 8px; border-bottom: 1px solid var(--dbx-line); }
.dbx-view { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 8px; border-radius: 999px; background: var(--dbx-hover); font-size: 14px; font-weight: 600; color: var(--n-text, var(--ink)); }
.dbx-view svg { width: 16px; height: 16px; }
.dbx-count { font-size: 12.5px; color: var(--dbx-mut); }
.dbx-search { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; border-radius: 6px; color: var(--dbx-mut); }
.dbx-search:focus-within { background: var(--dbx-hover); box-shadow: 0 0 0 1px var(--dbx-line) inset; }
.dbx-search input { width: 130px; border: 0; background: transparent; outline: 0; font: inherit; font-size: 13.5px; color: var(--n-text, var(--ink)); }
.dbx-newbtn { height: 30px; padding: 0 14px; border: 0; border-radius: 6px; background: #2383E2; color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.dbx-newbtn:hover { background: #0077D4; }
.dbx-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dbx-t { border-collapse: collapse; table-layout: fixed; min-width: 100%; font-size: 14px; }
.dbx-t th, .dbx-t td { border-bottom: 1px solid var(--dbx-line); border-right: 1px solid var(--dbx-line); text-align: left; vertical-align: middle; }
.dbx-t th:last-child, .dbx-t td:last-child { border-right: 0; }
.dbx-t th { position: relative; height: 34px; padding: 0; font-weight: 400; }
.dbx-th { display: flex; align-items: center; gap: 6px; width: 100%; height: 34px; padding: 0 8px; border: 0; background: transparent; color: var(--dbx-mut); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.dbx-th:hover:not(:disabled) { background: var(--dbx-hover); }
.dbx-th:disabled { cursor: default; }
.dbx-tn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbx-ti { display: grid; place-items: center; flex: none; width: 16px; }
.dbx-aa { font-size: 12.5px; font-weight: 600; }
.dbx-resize { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 2; }
.dbx-resize:hover { background: rgba(35, 131, 226, .5); }
.dbx-addcol { width: 44px; } .dbx-addcol button, .dbx-rowact button { width: 32px; height: 30px; border: 0; background: transparent; color: var(--dbx-mut); font-size: 17px; border-radius: 5px; cursor: pointer; }
.dbx-addcol button:hover, .dbx-rowact button:hover { background: var(--dbx-hover); color: var(--n-text, var(--ink)); }
.dbx-rowact { width: 44px; } .dbx-rowact button { opacity: 0; }
.dbx-t tr:hover .dbx-rowact button, .dbx-rowact button:focus-visible { opacity: 1; }
@media (hover: none) { .dbx-rowact button { opacity: .7; } }
.dbx-c { height: 37px; padding: 0 8px; cursor: default; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--n-text, var(--ink)); }
.dbx-t tbody tr:hover .dbx-c { background: var(--dbx-hover); }
.dbx-c.sel { background: var(--dbx-sel) !important; box-shadow: 0 0 0 1px var(--dbx-selb) inset; }
.dbx-c.editing { white-space: normal; box-shadow: 0 0 0 2px #2383E2 inset; background: var(--n-bg, var(--surface)) !important; }
.dbx-title { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; }
.dbx-doc { flex: none; display: grid; color: var(--dbx-mut); } .dbx-doc svg { width: 17px; height: 17px; }
.dbx-tt, .dbx-txt { outline: 0; min-width: 20px; overflow: hidden; text-overflow: ellipsis; }
.dbx-tt[contenteditable="true"], .dbx-txt[contenteditable="true"] { white-space: pre-wrap; overflow: visible; }
.dbx-open { margin-left: auto; flex: none; font-size: 12px; font-weight: 500; color: var(--dbx-mut); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--dbx-line); text-decoration: none; opacity: 0; }
.dbx-t tr:hover .dbx-open { opacity: 1; }
.dbx-c.t-number { text-align: right; font-variant-numeric: tabular-nums; }
.dbx-in { width: 100%; height: 30px; border: 0; outline: 0; background: transparent; font: inherit; color: inherit; }
.dbx-check { width: 16px; height: 16px; accent-color: #2383E2; cursor: pointer; }
.dbx-new { display: flex; align-items: center; gap: 6px; width: 100%; height: 34px; padding: 0 8px; border: 0; border-bottom: 1px solid var(--dbx-line); background: transparent; color: var(--dbx-mut); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.dbx-new:hover { background: var(--dbx-hover); color: var(--n-text, var(--ink)); }
/* Val: Notions tio färger, ljust och mörkt */
.dbx-tag { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 0 7px; border-radius: 4px; font-size: 13.5px; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbx-tag button { border: 0; background: none; padding: 0; margin-right: -2px; font-size: 14px; line-height: 1; color: inherit; opacity: .6; cursor: pointer; }
.dbx-tag button:hover { opacity: 1; }
.c-default { background: rgba(227, 226, 224, .6); color: #32302C; } .c-gray { background: #E3E2E0; color: #32302C; } .c-brown { background: #EEE0DA; color: #442A1E; }
.c-orange { background: #FADEC9; color: #49290E; } .c-yellow { background: #FDECC8; color: #402C1B; } .c-green { background: #DBEDDB; color: #1C3829; }
.c-blue { background: #D3E5EF; color: #183347; } .c-purple { background: #E8DEEE; color: #412454; } .c-pink { background: #F5E0E9; color: #4C2337; } .c-red { background: #FFE2DD; color: #5D1715; }
:root[data-theme="dark"] .c-default { background: #373737; color: rgba(255, 255, 255, .88); } :root[data-theme="dark"] .c-gray { background: #5A5A5A; color: #fff; } :root[data-theme="dark"] .c-brown { background: #603B2C; color: #fff; }
:root[data-theme="dark"] .c-orange { background: #854C1D; color: #fff; } :root[data-theme="dark"] .c-yellow { background: #89632A; color: #fff; } :root[data-theme="dark"] .c-green { background: #2B593F; color: #fff; }
:root[data-theme="dark"] .c-blue { background: #28456C; color: #fff; } :root[data-theme="dark"] .c-purple { background: #492F64; color: #fff; } :root[data-theme="dark"] .c-pink { background: #69314C; color: #fff; } :root[data-theme="dark"] .c-red { background: #6E3630; color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-default { background: #373737; color: rgba(255, 255, 255, .88); } :root:not([data-theme="light"]) .c-gray { background: #5A5A5A; color: #fff; } :root:not([data-theme="light"]) .c-brown { background: #603B2C; color: #fff; }
  :root:not([data-theme="light"]) .c-orange { background: #854C1D; color: #fff; } :root:not([data-theme="light"]) .c-yellow { background: #89632A; color: #fff; } :root:not([data-theme="light"]) .c-green { background: #2B593F; color: #fff; }
  :root:not([data-theme="light"]) .c-blue { background: #28456C; color: #fff; } :root:not([data-theme="light"]) .c-purple { background: #492F64; color: #fff; } :root:not([data-theme="light"]) .c-pink { background: #69314C; color: #fff; } :root:not([data-theme="light"]) .c-red { background: #6E3630; color: #fff; }
}
/* Ärende i en cell */
.dbx-ticket { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 0 8px 0 6px; height: 24px; border-radius: 6px; border: 1px solid var(--dbx-line); color: var(--n-text, var(--ink)); text-decoration: none; font-size: 13px; }
.dbx-ticket:hover { background: var(--dbx-hover); }
.dbx-ticket b { font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }
.dbx-ticket .tk-sub { color: var(--dbx-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dbx-ticket.nolink { cursor: default; }
.tk-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #9AA1AF; }
.tk-dot.s-open { background: #2383E2; } .tk-dot.s-pending { background: #D9730D; } .tk-dot.s-snoozed { background: #9065B0; } .tk-dot.s-closed { background: #448361; }
/* Fönstren: val, kolumn, rad och ärende */
.dbx-pop { position: absolute; z-index: 520; min-width: 260px; max-width: 320px; padding: 6px; border-radius: 10px; background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px rgba(15, 15, 15, .06), 0 4px 10px rgba(15, 15, 15, .08), 0 14px 32px rgba(15, 15, 15, .16); animation: pjIn .12s ease-out; }
:root[data-theme="dark"] .dbx-pop { background: #252525; box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 12px 32px rgba(0, 0, 0, .5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dbx-pop { background: #252525; box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 12px 32px rgba(0, 0, 0, .5); } }
.dbx-selpop { width: 300px; padding: 0 0 6px; }
.sp-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 42px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface-2) 70%, transparent); border-radius: 10px 10px 0 0; }
.sp-top input, .dbx-pop > input { flex: 1; min-width: 90px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--ink); }
.dbx-pop > input { width: 100%; height: 34px; padding: 0 8px; margin-bottom: 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); }
.dbx-pop > input:focus { box-shadow: 0 0 0 2px rgba(35, 131, 226, .45); border-color: #2383E2; }
.sp-hint, .op-h { padding: 8px 12px 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.sp-list { max-height: 260px; overflow-y: auto; padding: 0 6px; }
.sp-row { display: flex; align-items: center; border-radius: 6px; }
.sp-row:hover, .sp-row.on { background: var(--hover); }
.sp-opt { flex: 1; min-width: 0; display: flex; align-items: center; min-height: 32px; padding: 0 6px; border: 0; background: none; cursor: pointer; text-align: left; }
.sp-more { width: 30px; height: 30px; border: 0; background: none; color: var(--muted); border-radius: 5px; cursor: pointer; opacity: .6; }
.sp-row:hover .sp-more, .sp-more:focus-visible { opacity: 1; } .sp-more:hover { background: var(--active); }
.sp-create { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 0 6px; margin-top: 2px; border: 0; background: none; border-radius: 6px; font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.sp-create:hover { background: var(--hover); }
.sp-empty { margin: 6px 8px; font-size: 13px; color: var(--muted); }
.sp-tk { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 0 8px; border: 0; background: none; border-radius: 6px; font: inherit; font-size: 13.5px; color: var(--ink); text-align: left; cursor: pointer; }
.sp-tk:hover { background: var(--hover); } .sp-tk span:last-child { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbx-optpop { position: absolute; width: 230px; }
.op-del, .op-color, .cm-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 32px; padding: 0 8px; border: 0; background: none; border-radius: 6px; font: inherit; font-size: 14px; color: var(--ink); text-align: left; cursor: pointer; }
.op-del:hover, .op-color:hover, .cm-item:hover, .cm-item:focus-visible { background: var(--hover); outline: 0; }
.op-sw { width: 18px; height: 18px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(15, 15, 15, .1) inset; flex: none; }
.op-check { margin-left: auto; color: var(--ink); }
.cm-ic { display: grid; place-items: center; width: 18px; flex: none; color: var(--muted); }
.cm-item.danger, .cm-item.danger .cm-ic, .op-del { color: #D44C47; }
.dbx-pop hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.dbx-pop.sheet { position: fixed; left: 0; right: 0; bottom: 0; top: auto; max-width: none; width: auto; max-height: 75vh; overflow-y: auto; border-radius: 14px 14px 0 0; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); animation: pgUp .2s ease-out; }
.dbx-pop.sheet .dbx-optpop { position: static; width: auto; box-shadow: none; margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0; }
@media (max-width: 700px) { .dbx-search input { width: 90px; } .dbx-count { display: none; } .dbx-c { height: 40px; } }
@media (prefers-reduced-motion: reduce) { .dbx-pop { animation: none; } }
/* Läsbarhet (mätt): dämpad text i tabellen och Ny-knappen */
.dbx { --dbx-mut: rgba(55, 53, 47, .74); }
:root[data-theme="dark"] .dbx { --dbx-mut: rgba(255, 255, 255, .64); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dbx { --dbx-mut: rgba(255, 255, 255, .64); } }
.dbx-newbtn { background: #0B6BCB; } .dbx-newbtn:hover { background: #0A5CAF; }
article.doc .doc-add { color: rgba(55, 53, 47, .76); }
:root[data-theme="dark"] article.doc .doc-add { color: rgba(255, 255, 255, .58); }

/* ══ 4.40.0: databasens egenskaper som i Notion ══ */
.dbx-colpop { width: 280px; }
.cm-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.cm-head input { flex: 1; min-width: 0; height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); font: inherit; font-size: 14px; color: var(--ink); outline: 0; }
.cm-head input:focus { border-color: #2383E2; box-shadow: 0 0 0 2px rgba(35, 131, 226, .4); }
.cm-typeic { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); flex: none; }
.cm-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-cur { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.cm-chev { color: var(--muted); font-size: 17px; line-height: 1; margin-left: 2px; }
.cm-item.open { background: var(--hover); }
.cm-scroll { max-height: min(380px, 60vh); overflow-y: auto; }
.cm-meta { margin: 6px 8px 2px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.cm-add input { width: 100%; height: 32px; margin-top: 4px; padding: 0 8px; border: 0; border-top: 1px solid var(--line); background: transparent; font: inherit; font-size: 13.5px; color: var(--ink); outline: 0; }
.cm-upload { cursor: pointer; }
.dbx-sub { position: absolute; width: 240px; }
.dbx-typepop { width: 250px; } .dbx-editpop { width: 260px; }
.dbx-pop.sheet .dbx-sub { position: static; width: auto; margin-top: 6px; box-shadow: none; border-top: 1px solid var(--line); border-radius: 0; }
.sp-group { padding: 8px 8px 2px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.dbx-sdot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .75; flex: none; }
.dbx-tags, .dbx-people, .dbx-files { display: inline-flex; gap: 4px; align-items: center; max-width: 100%; overflow: hidden; }
.dbx-c.wrap .dbx-tags, .dbx-c.wrap .dbx-people, .dbx-c.wrap .dbx-files { flex-wrap: wrap; padding: 6px 0; }
.dbx-c.wrap { white-space: normal; height: auto; }
.dbx-person { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13.5px; }
.dbx-av { --s: 20px; width: var(--s); height: var(--s); border-radius: 50%; display: inline-grid; place-items: center; overflow: hidden; flex: none; color: #fff; font-size: calc(var(--s) * .42); font-weight: 600; }
.dbx-av img { width: 100%; height: 100%; object-fit: cover; }
.dbx-file { display: inline-flex; align-items: center; gap: 5px; max-width: 180px; height: 24px; padding: 0 7px 0 4px; border-radius: 5px; background: var(--dbx-hover, var(--hover)); color: inherit; text-decoration: none; font-size: 12.5px; }
.dbx-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbx-file img { width: 18px; height: 18px; border-radius: 3px; object-fit: cover; }
.dbx-link { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 2px; }
.dbx-stamp { font-size: 13px; color: var(--dbx-mut); }
.dbx-c.t-created, .dbx-c.t-edited, .dbx-c.t-id { cursor: default; }
.pp-n { flex: 1; }
.sp-tk.on { background: var(--hover); }
.dbx-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--dbx-line); }
.dbx-chip { display: inline-flex; align-items: center; height: 26px; border-radius: 999px; border: 1px solid color-mix(in srgb, #2383E2 45%, transparent); background: color-mix(in srgb, #2383E2 8%, transparent); color: #0B6BCB; font-size: 12.5px; overflow: hidden; }
:root[data-theme="dark"] .dbx-chip { color: #7DB8F5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dbx-chip { color: #7DB8F5; } }
.dbx-chip > span, .dbx-chip > button:not(.x) { padding: 0 10px; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.dbx-chip.h { padding: 0 10px; border-color: var(--dbx-line); background: transparent; color: var(--dbx-mut); cursor: pointer; }
.dbx-chip .x { width: 24px; height: 26px; border: 0; background: none; color: inherit; font-size: 15px; cursor: pointer; border-left: 1px solid color-mix(in srgb, #2383E2 30%, transparent); }
.dbx-chip .x:hover, .dbx-chip > button:not(.x):hover { background: color-mix(in srgb, #2383E2 12%, transparent); }
.dbx-t tfoot td { height: 34px; padding: 0; border-bottom: 0; border-right: 0; }
.dbx-calc button { width: 100%; height: 34px; padding: 0 8px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--dbx-mut); text-align: right; cursor: pointer; opacity: 0; }
.dbx-t:hover .dbx-calc button, .dbx-calc.on button, .dbx-calc button:focus-visible { opacity: 1; }
.dbx-calc.on button { color: var(--n-text, var(--ink)); font-variant-numeric: tabular-nums; }
.dbx-calc small { font-size: 11.5px; color: var(--dbx-mut); margin-right: 4px; text-transform: uppercase; letter-spacing: .03em; }
.dbx-calc button:hover:not(:disabled) { background: var(--dbx-hover); }
@media (hover: none) { .dbx-calc button { opacity: 1; } }
/* Läsbarhet i menyerna (mätt) */
.cm-item.danger, .cm-item.danger .cm-ic, .op-del { color: #C4372F; }
:root[data-theme="dark"] .cm-item.danger, :root[data-theme="dark"] .cm-item.danger .cm-ic, :root[data-theme="dark"] .op-del { color: #FF8A80; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cm-item.danger, :root:not([data-theme="light"]) .cm-item.danger .cm-ic, :root:not([data-theme="light"]) .op-del { color: #FF8A80; } }
.sp-more { opacity: 1; color: var(--ink-2); }
.cm-chev { color: var(--ink-2); }
/* 4.41.1: rutan om driftproblem – mörkare röd text i ljust läge (4,2:1 → över 5:1) */
.worker-warn { color: #A91E2C; }
:root[data-theme="dark"] .worker-warn { color: var(--red); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .worker-warn { color: var(--red); } }

/* ══ 4.42.0: driftbandet – tunn rad, fast etikett, text som rullar från höger till vänster ══ */
.st-bar { --st-bg: #FDECEC; --st-ink: #8F1D1D; --st-line: #F3C4C4; --st-tag: #C62828; position: relative; display: flex; align-items: center; height: 32px; background: var(--st-bg); color: var(--st-ink); border-bottom: 1px solid var(--st-line); font-size: 13px; overflow: hidden; z-index: 6; }
.st-bar.st-warn { --st-bg: #FFF5D6; --st-ink: #6B4500; --st-line: #EED68F; --st-tag: #A15C00; }
.st-bar.st-info { --st-bg: #E8F0FE; --st-ink: #1E3A8A; --st-line: #C7D7F7; --st-tag: #2156C9; }
:root[data-theme="dark"] .st-bar { --st-bg: #3A1618; --st-ink: #FFC9C9; --st-line: #5C2427; --st-tag: #E5484D; }
:root[data-theme="dark"] .st-bar.st-warn { --st-bg: #3A2C0E; --st-ink: #FFE3A3; --st-line: #5A4516; --st-tag: #B7791F; }
:root[data-theme="dark"] .st-bar.st-info { --st-bg: #172440; --st-ink: #CFE0FF; --st-line: #253A63; --st-tag: #3B6FD8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .st-bar { --st-bg: #3A1618; --st-ink: #FFC9C9; --st-line: #5C2427; --st-tag: #E5484D; }
  :root:not([data-theme="light"]) .st-bar.st-warn { --st-bg: #3A2C0E; --st-ink: #FFE3A3; --st-line: #5A4516; --st-tag: #B7791F; }
  :root:not([data-theme="light"]) .st-bar.st-info { --st-bg: #172440; --st-ink: #CFE0FF; --st-line: #253A63; --st-tag: #3B6FD8; }
}
.st-label { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 12px 0 10px; background: var(--st-tag); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.st-label::after { content: ""; position: absolute; left: 100%; }
.st-track { position: relative; flex: 1; min-width: 0; height: 100%; overflow: hidden; display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.st-move { display: inline-flex; white-space: nowrap; animation: stRoll var(--st-dur, 24s) linear infinite; will-change: transform; }
.st-move > span { padding: 0 64px 0 0; font-weight: 500; }
.st-move > span:first-child { padding-left: 24px; }
.st-bar:hover .st-move, .st-bar:focus-within .st-move { animation-play-state: paused; }
@keyframes stRoll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.st-tech { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 24px; margin-left: 6px; padding: 0 10px; border-radius: 6px; color: var(--st-ink); font-weight: 600; font-size: 12.5px; text-decoration: none; border: 1px solid var(--st-line); background: color-mix(in srgb, var(--st-bg) 60%, #fff); }
:root[data-theme="dark"] .st-tech { background: color-mix(in srgb, var(--st-bg) 70%, #000); }
.st-tech:hover { text-decoration: underline; }
.st-x { flex: none; width: 32px; height: 32px; border: 0; background: transparent; color: var(--st-ink); font-size: 17px; line-height: 1; cursor: pointer; opacity: .75; }
.st-x:hover, .st-x:focus-visible { opacity: 1; background: color-mix(in srgb, var(--st-ink) 10%, transparent); }
.st-bar.st-gone { display: none; }
/* Placering: överst i ärendeytan; på mobilen ovanför listan */
.thread.has-st { position: relative; }
.st-bar.st-in-thread { position: absolute; top: 0; left: 0; right: 0; }
.thread.has-st:not(.st-hidden) > .thread-head, .thread.has-st:not(.st-hidden) > :nth-child(2) { margin-top: 32px; }
.st-bar.st-in-list { display: none; }
@media (max-width: 900px) { .st-bar.st-in-list { display: flex; } .st-bar.st-in-thread { display: none; } .thread.has-st > .thread-head, .thread.has-st > :nth-child(2) { margin-top: 0; } }
@media (prefers-reduced-motion: reduce) {
  .st-move { animation: none; } .st-move > span + span { display: none; } .st-move > span { overflow: hidden; text-overflow: ellipsis; }
  .st-track { -webkit-mask-image: none; mask-image: none; } .st-move { max-width: 100%; }
}
/* Etiketten i mörkt läge: djupare toner så att den vita texten håller minst 4,5:1 */
:root[data-theme="dark"] .st-bar { --st-tag: #B42323; } :root[data-theme="dark"] .st-bar.st-warn { --st-tag: #8A5A00; } :root[data-theme="dark"] .st-bar.st-info { --st-tag: #2A5BC4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .st-bar { --st-tag: #B42323; } :root:not([data-theme="light"]) .st-bar.st-warn { --st-tag: #8A5A00; } :root:not([data-theme="light"]) .st-bar.st-info { --st-tag: #2A5BC4; } }
.st-x { opacity: 1; }

/* ── 4.45.0 ─────────────────────────────────────────────────────────────── */
/* Kanaler i sidomenyn: egen färg, meny */
.ch-nav{position:relative}
.ch-nav .ch-ic{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:color-mix(in srgb,var(--ch) 16%,transparent);color:var(--ch);flex:none}
.ch-nav .ch-ic svg{width:14px;height:14px}
.ch-nav.on .ch-ic{background:var(--ch);color:#fff}
/* 4.90.0: ikonen ärver rutans färg – annars vann .nav-item .i (grå) och den valda inkorgens ikon försvann i den fyllda rutan */
.ch-nav .ch-ic .i{color:inherit;opacity:1}
.ch-more{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:7px;border:0;background:transparent;color:var(--muted);display:grid;place-items:center;opacity:0;cursor:pointer}
.ch-nav:hover .ch-more,.ch-nav:focus-within .ch-more{opacity:1}
.ch-nav:hover .count{opacity:0}
.ch-pop{position:fixed;z-index:60;width:280px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.18);padding:12px;display:grid;gap:10px}
.ch-pop .swatches{display:flex;flex-wrap:wrap;gap:6px}
.ch-pop .swatches button{width:24px;height:24px;border-radius:8px;border:2px solid transparent;cursor:pointer}
.ch-pop .swatches button.on{border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--surface)}
.ch-pop .actions{display:flex;justify-content:flex-end;gap:6px}
/* Tom inkorg med Blixten */
.empty-blixten svg{display:block;margin:0 auto 6px;height:200px;width:auto}
/* GDPR hopfällt sist i detaljpanelen */
.gdpr-fold{border-top:1px solid var(--line);margin-top:8px;padding-top:6px}
.gdpr-fold summary{list-style:none;display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:8px 0}
.gdpr-fold summary::-webkit-details-marker{display:none}
.gdpr-fold summary h4{margin:0}
.gdpr-fold[open] summary span{display:none}
/* Uppgifter: premiumkort och sidopanel */
.tk-card{border-radius:14px;box-shadow:0 1px 2px rgba(27,33,48,.06),0 6px 18px rgba(27,33,48,.05);transition:transform .15s,box-shadow .15s}
.tk-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(27,33,48,.12)}
.tk-card.dragging{opacity:.5;transform:rotate(2deg)}
.tk-prog{height:5px;border-radius:3px;background:var(--line);overflow:hidden;margin:8px 0 6px}
.tk-prog i{display:block;height:100%;background:var(--accent);border-radius:3px}
.tk-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-top:6px}
.tk-meta .grow{flex:1}
.tk-pill{font-size:11px;font-weight:650;padding:2px 7px;border-radius:6px;background:var(--fill)}
.tk-pill.p-high{background:#FDE8E8;color:#B42318}.tk-pill.p-urgent{background:#B42318;color:#fff}.tk-pill.p-low{background:#E1F4EC;color:#1F7A4D}
.tk-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}.tk-tags span{font-size:11px;padding:2px 7px;border-radius:6px;background:var(--accent-soft);color:var(--accent);font-weight:600}
.tk-vis{font-size:11px;color:var(--muted);display:inline-flex;align-items:center;gap:4px}
dialog.modal.drawer{margin:0 0 0 auto;height:100dvh;max-height:100dvh;width:min(560px,100%);border-radius:0;border-left:1px solid var(--line)}
dialog.modal.drawer[open]{display:grid;grid-template-rows:auto 1fr auto;animation:drawer-in .22s ease-out}
@keyframes drawer-in{from{transform:translateX(24px);opacity:0}}
dialog.modal.drawer .modal-body{overflow:auto}
.tk-drawer-top{display:flex;align-items:center;gap:8px;padding:12px 18px;border-bottom:1px solid var(--line)}
.tk-title-input{font-size:22px;font-weight:700;border:0;background:transparent;width:100%;padding:8px 0;letter-spacing:-.01em}
.tk-props{display:grid;grid-template-columns:120px 1fr;gap:8px 12px;align-items:center;font-size:14px}
.tk-props>span{color:var(--muted);display:flex;align-items:center;gap:6px}
.tk-props .input{height:34px;padding:0 10px;font-size:14px}
.tk-sub{display:grid;gap:4px}
.tk-sub label{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;background:var(--fill)}
.tk-sub label.done span{text-decoration:line-through;color:var(--muted)}
.tk-sub .add{display:flex;gap:6px}
.tk-files{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.tk-file{border:1px solid var(--line);border-radius:10px;padding:8px;font-size:12px;display:grid;gap:4px;position:relative;background:var(--surface)}
.tk-file img{width:100%;height:70px;object-fit:cover;border-radius:6px}
.tk-file .kind{height:70px;border-radius:6px;background:var(--fill);display:grid;place-items:center;font-weight:700;color:var(--accent)}
.tk-file b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-file .rm{position:absolute;right:4px;top:4px;width:20px;height:20px;border-radius:6px;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:12px;cursor:pointer}
.tk-drop{border:1.5px dashed var(--line);border-radius:10px;padding:14px;text-align:center;color:var(--muted);font-size:13px;cursor:pointer}
.tk-drop.over{border-color:var(--accent);background:var(--accent-soft)}
.tk-section{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:650;margin:14px 0 6px}
.tk-section small{color:var(--muted);font-weight:500}

/* ── 4.46.0: uppgiftstavlan ─────────────────────────────────────────────── */
.board{gap:14px;padding:18px 22px 34px;background:var(--bg)}
.board-col{width:288px;background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:6px}
.board-col>header{padding:10px 10px 8px;font-size:13.5px;font-weight:650;letter-spacing:.01em}
.board-col .sdot{width:9px;height:9px;box-shadow:0 0 0 3px color-mix(in srgb,var(--sc) 22%,transparent)}
.board-col .count{margin-left:6px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:1px 8px;font-size:11.5px;color:var(--muted);font-weight:650}
.board-col .drop{gap:10px;padding:4px}
.task{border-radius:14px;padding:12px 12px 10px;border:1px solid var(--line);background:var(--surface);box-shadow:0 1px 2px rgba(27,33,48,.05);cursor:grab}
.task:hover{box-shadow:0 10px 26px rgba(27,33,48,.12);transform:translateY(-2px);border-color:var(--accent-line)}
.task .tk-top{display:flex;align-items:center;gap:6px;margin-bottom:6px;font-size:11.5px;color:var(--muted)}
.task .tk-top .pill{margin:0}
.task b{font-size:14px;font-weight:650;line-height:1.35}
.task p{font-size:12.5px;line-height:1.45;color:var(--muted);margin:4px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.task .task-foot{margin-top:10px;padding-top:8px;border-top:1px solid var(--line);gap:8px}
.task .task-foot .avatar{margin-left:auto}
.tk-vis{gap:3px}
.board-col .add-task,.board-col [data-add-task]{border-radius:10px;padding:8px 10px;font-size:13px;color:var(--muted);transition:background .15s}
.board-col .add-task:hover,.board-col [data-add-task]:hover{background:var(--surface)}
.pill.prio-high{background:#FDE8E8;color:#B42318}.pill.prio-urgent{background:#B42318;color:#fff}.pill.prio-low{background:#E1F4EC;color:#1F7A4D}

/* ── 4.47.0: tavlan i Blixtflow-stil (nr 10) ────────────────────────────── */
.board{gap:14px;padding:16px 22px 34px;background:var(--bg);scroll-snap-type:x proximity}
.board-col{width:300px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:0;overflow:hidden;box-shadow:0 1px 2px rgba(27,33,48,.04);scroll-snap-align:start}
.board-col>header{background:#2C0E3D;color:#fff;padding:11px 12px;font-size:13.5px;font-weight:650;border-radius:0}
.board-col>header .sdot{background:#F2FAA3;box-shadow:0 0 0 3px rgba(242,250,163,.18)}
.board-col>header .count{margin-left:auto;background:#F2FAA3;color:#2C0E3D;border:0;font-weight:800;padding:1px 9px}
.board-col .col-body{padding:8px;display:grid;gap:8px;min-height:60px;transition:background .15s}
.board-col .col-body.over{background:var(--accent-soft)}
.board-col .col-add{margin:0 8px 10px;border-radius:10px;padding:8px 10px;color:var(--muted);font-size:13px;text-align:left;background:transparent;border:1px dashed var(--line)}
.board-col .col-add:hover{background:var(--hover);border-color:var(--accent-line);color:var(--accent)}
[data-theme="dark"] .board-col>header,.dark .board-col>header{background:#3A1650}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .board-col>header{background:#3A1650}}
.task{position:relative;border-radius:12px;padding:10px 11px 9px;border:1px solid var(--line);background:var(--surface);box-shadow:none;cursor:grab}
.task:hover{border-color:var(--accent-line);box-shadow:0 8px 22px rgba(44,14,61,.10);transform:none}
.task.dragging{opacity:.35}
.task .tk-img{display:block;width:calc(100% + 22px);margin:-10px -11px 9px;height:110px;object-fit:cover;border-radius:12px 12px 0 0}
.task .tk-top{margin-bottom:5px}
.task.is-done b{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--accent-line)}
.task.is-done{background:color-mix(in srgb,var(--surface) 92%,#0E8A6E)}
.tk-done{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;color:#0E8A6E;background:#E1F4EC;padding:2px 7px;border-radius:6px}
[data-theme="dark"] .tk-done{background:#16342A;color:#5FD39A}
.tk-below{position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--muted);display:grid;place-items:center;opacity:0;z-index:2;cursor:pointer;box-shadow:0 2px 6px rgba(27,33,48,.12)}
.task:hover .tk-below{opacity:1}.tk-below:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.tk-ph{height:0;border:2px dashed var(--accent);border-radius:8px;transition:height .12s;box-sizing:border-box}
.tk-ph.on{height:44px}
@media (max-width: 900px){.board{padding:10px 12px 28px;gap:10px;scroll-snap-type:x mandatory}.board-col{width:84vw;flex:none}.tk-below{opacity:1;width:20px;height:20px;bottom:-10px}.task{cursor:default}.task .tk-img{height:120px}}

/* ── 4.48.0: tavlans bakgrund och projektets sidomeny i varumärkets ton ─── */
.board{background:linear-gradient(180deg,#F6F3FA 0,#EFE8F7 100%);min-height:calc(100vh - 150px)}
.board-col{border-color:#E4DAF0;box-shadow:0 8px 24px rgba(44,14,61,.06)}
.proj-side{background:#FBF9FD;border-right-color:#E7DFF0}
.proj-side .ps-label,.proj-side .side-label{color:#6B6280;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;font-weight:700}
.proj-side .nav-item,.proj-side .pg-item{border-radius:10px}
.proj-side .nav-item.on,.proj-side .pg-item.on{background:var(--accent-soft);color:var(--accent);font-weight:650;box-shadow:inset 3px 0 0 var(--accent)}
.proj-side .nav-item:hover,.proj-side .pg-item:hover{background:#F1EBF8}
.proj-side .pill.sm{background:var(--accent-soft);color:var(--accent);font-weight:700}
[data-theme="dark"] .board{background:linear-gradient(180deg,#150A22,#1A0E2B)}
[data-theme="dark"] .board-col{border-color:#33224A;box-shadow:0 8px 24px rgba(0,0,0,.35)}
[data-theme="dark"] .proj-side{background:#1A0E2B;border-right-color:#33224A}
[data-theme="dark"] .proj-side .nav-item:hover,[data-theme="dark"] .proj-side .pg-item:hover{background:#2C1B44}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .board{background:linear-gradient(180deg,#150A22,#1A0E2B)}:root:not([data-theme="light"]) .proj-side{background:#1A0E2B;border-right-color:#33224A}:root:not([data-theme="light"]) .board-col{border-color:#33224A}}

/* ── 4.49.0: Projekt i stilen ”Notion-ren” – bara projektdelen ──────────── */
.proj-wrap{--pn-bg:#FFFFFF;--pn-side:#F7F7F5;--pn-line:#ECECEA;--pn-ink:#1F1D24;--pn-muted:#5F5B68;--pn-faint:#8A8792;--pn-sel:#ECECEA;--pn-hover:#F1F1EF;--pn-dark:#1F1D24;background:var(--pn-bg);color:var(--pn-ink)}
[data-theme="dark"] .proj-wrap{--pn-bg:#191720;--pn-side:#1F1D26;--pn-line:#2E2B36;--pn-ink:#ECEAF0;--pn-muted:#A19DAB;--pn-faint:#6F6B79;--pn-sel:#2E2B36;--pn-hover:#282530;--pn-dark:#ECEAF0}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .proj-wrap{--pn-bg:#191720;--pn-side:#1F1D26;--pn-line:#2E2B36;--pn-ink:#ECEAF0;--pn-muted:#A19DAB;--pn-faint:#6F6B79;--pn-sel:#2E2B36;--pn-hover:#282530;--pn-dark:#ECEAF0}}
/* sidomeny */
.proj-wrap .proj-side{background:var(--pn-side);border-right:1px solid var(--pn-line)}
.proj-wrap .proj-side .nav-item,.proj-wrap .pg-item{border-radius:6px;color:var(--pn-ink);font-weight:500;height:30px}
.proj-wrap .proj-side .nav-item:hover,.proj-wrap .pg-item:hover{background:var(--pn-hover)}
.proj-wrap .proj-side .nav-item.on,.proj-wrap .pg-item.on{background:var(--pn-sel);color:var(--pn-ink);font-weight:600;box-shadow:none}
.proj-wrap .proj-side .pill.sm{background:var(--pn-sel);color:var(--pn-muted);font-weight:600}
.proj-wrap .ps-label,.proj-wrap .proj-side .side-label{color:var(--pn-muted);font-size:11px;letter-spacing:.02em;text-transform:none;font-weight:600}
.proj-wrap .pg-item svg,.proj-wrap .proj-side .nav-item svg{color:var(--pn-muted)}
/* topp, brödsmulor, tabbar */
.proj-wrap .proj-top{border-bottom:1px solid var(--pn-line);background:var(--pn-bg)}
.proj-wrap .crumbs a{color:var(--pn-muted)}.proj-wrap .crumbs a:hover{color:var(--pn-ink)}.proj-wrap .crumbs .sep{color:var(--pn-faint)}
.proj-wrap .seg-inline{background:transparent;border-radius:0;padding:0;gap:14px;border-bottom:0}
.proj-wrap .seg-inline span{border-radius:0;padding:8px 2px;color:var(--pn-muted);border-bottom:2px solid transparent;font-weight:600}
.proj-wrap .seg-inline input:checked + span{background:transparent;color:var(--pn-ink);box-shadow:none;border-bottom-color:var(--pn-dark)}
.proj-wrap .btn.primary{background:var(--pn-dark);border-color:var(--pn-dark);color:var(--pn-bg);border-radius:6px}
.proj-wrap .btn.ghost,.proj-wrap .btn.line{border-radius:6px}
/* sidan */
.proj-wrap .doc{background:var(--pn-bg)}
.proj-wrap .doc-title{font-size:34px;letter-spacing:-.025em;font-weight:800}
.proj-wrap .doc-title:empty::before,.proj-wrap .bk-text:empty::before{color:var(--pn-faint)}
.proj-wrap .bk{border-radius:4px}
.proj-wrap .bk-file,.proj-wrap .bk-media,.proj-wrap .bk-callout{border:1px solid var(--pn-line);border-radius:6px;background:var(--pn-bg)}
.proj-wrap .bk-tools button{border-radius:4px}
/* tavlan */
.proj-wrap .board{background:var(--pn-bg);border-top:1px solid var(--pn-line);gap:12px;padding:16px 22px 34px;min-height:0}
.proj-wrap .board-col{background:var(--pn-bg);border:1px solid var(--pn-line);border-radius:8px;box-shadow:none;width:288px}
.proj-wrap .board-col>header{background:var(--pn-side);color:var(--pn-ink);padding:9px 12px;font-size:13px;font-weight:600;border-bottom:1px solid var(--pn-line)}
.proj-wrap .board-col>header .sdot{background:var(--sc);box-shadow:none;width:8px;height:8px}
.proj-wrap .board-col>header .count{background:var(--pn-sel);color:var(--pn-muted);font-weight:600;padding:1px 8px}
.proj-wrap .board-col .col-body.over{background:var(--pn-hover)}
.proj-wrap .board-col .col-add{border:0;color:var(--pn-muted);margin:0 6px 8px;border-radius:6px}
.proj-wrap .board-col .col-add:hover{background:var(--pn-hover);color:var(--pn-ink)}
.proj-wrap .task{border:1px solid var(--pn-line);border-radius:6px;background:var(--pn-bg);padding:9px 10px 8px}
.proj-wrap .task:hover{border-color:var(--pn-muted);box-shadow:0 4px 14px rgba(0,0,0,.06)}
.proj-wrap .task b{font-size:13.5px;font-weight:600;color:var(--pn-ink)}
.proj-wrap .task p{color:var(--pn-muted)}
.proj-wrap .task .task-foot{border-top:1px solid var(--pn-line)}
.proj-wrap .task .tk-img{border-radius:6px 6px 0 0;height:100px}
.proj-wrap .tk-prog{background:var(--pn-sel)}.proj-wrap .tk-prog i{background:var(--pn-dark)}
.proj-wrap .tk-tags span{background:var(--pn-sel);color:var(--pn-muted)}
.proj-wrap .tk-ph{border-color:var(--pn-dark)}
.proj-wrap .tk-below{border-radius:4px;background:var(--pn-bg);border-color:var(--pn-line)}.proj-wrap .tk-below:hover{background:var(--pn-dark);border-color:var(--pn-dark);color:var(--pn-bg)}
.proj-wrap .task.is-done{background:var(--pn-side)}
.proj-wrap .pill{border-radius:4px}
/* uppgiftspanelen */
dialog.modal.drawer{border-left:1px solid #ECECEA}
dialog.modal.drawer .tk-title-input{font-size:24px;letter-spacing:-.02em}
dialog.modal.drawer .tk-props .input{border-radius:6px}
dialog.modal.drawer .tk-sub label{border-radius:6px;background:#F7F7F5}
dialog.modal.drawer .tk-file,dialog.modal.drawer .tk-drop{border-radius:6px}
dialog.modal.drawer .tk-section{color:#6F6C78}
dialog.modal.drawer .btn.primary{background:#1F1D24;border-color:#1F1D24;border-radius:6px}
[data-theme="dark"] dialog.modal.drawer{border-left-color:#2E2B36}[data-theme="dark"] dialog.modal.drawer .tk-sub label{background:#282530}[data-theme="dark"] dialog.modal.drawer .btn.primary{background:#ECEAF0;border-color:#ECEAF0;color:#191720}
@media (max-width:900px){.proj-wrap .board{padding:10px 12px 28px}.proj-wrap .board-col{width:84vw}}

/* ── 4.50.0: uppgiften som en centrerad ruta i två spalter ──────────────── */
dialog.modal.task-modal{width:min(980px,calc(100vw - 32px));max-height:min(88vh,860px);border-radius:14px;border:1px solid var(--pn-line,#ECECEA);padding:0;display:none;grid-template-rows:auto 1fr auto;background:var(--surface);color:var(--ink);box-shadow:0 30px 80px rgba(20,10,30,.28)}
dialog.modal.task-modal[open]{display:grid;animation:tkpop .18s ease-out}
@keyframes tkpop{from{opacity:0;transform:translateY(10px) scale(.985)}}
dialog.modal.task-modal::backdrop{background:rgba(20,10,30,.45);backdrop-filter:blur(2px)}
.tk-head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--pn-line,#ECECEA)}
.tk-kicker{font-size:12.5px;font-weight:650;color:var(--muted)}
.tk-body{display:grid;grid-template-columns:1fr 300px;min-height:0;overflow:hidden}
.tk-main{padding:18px 24px 22px;overflow:auto;display:grid;align-content:start;gap:10px;border-right:1px solid var(--pn-line,#ECECEA)}
.tk-aside{padding:18px 18px 22px;overflow:auto;background:var(--pn-side,#F7F7F5)}
.tk-aside-title{font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.02em;margin-bottom:10px}
.tk-aside .tk-props{grid-template-columns:1fr;gap:10px}
.tk-aside .tk-props>span{font-size:12px;margin-bottom:-4px}
.tk-aside .tk-props .input{height:34px;border-radius:6px;background:var(--surface)}
.task-modal .tk-title-input{font-size:26px;font-weight:800;letter-spacing:-.025em;padding:4px 0 6px}
.task-modal .field>span{font-size:12px;font-weight:650;color:var(--muted)}
.task-modal .tk-section{margin:12px 0 4px}
.task-modal .comments{margin-top:12px;padding-top:12px;border-top:1px solid var(--pn-line,#ECECEA)}
.task-modal .comments h3{font-size:13px;margin:0 0 8px}
.task-modal .modal-foot{border-top:1px solid var(--pn-line,#ECECEA);padding:12px 16px}
.task-modal .btn.primary{background:#1F1D24;border-color:#1F1D24;border-radius:6px}
[data-theme="dark"] dialog.modal.task-modal{border-color:#2E2B36}[data-theme="dark"] .tk-aside{background:#1F1D26}[data-theme="dark"] .tk-main,[data-theme="dark"] .tk-head,[data-theme="dark"] .task-modal .modal-foot,[data-theme="dark"] .task-modal .comments{border-color:#2E2B36}[data-theme="dark"] .task-modal .btn.primary{background:#ECEAF0;border-color:#ECEAF0;color:#191720}
@media (max-width:820px){dialog.modal.task-modal{width:100vw;max-height:100dvh;height:100dvh;border-radius:0;margin:0}.tk-body{grid-template-columns:1fr;overflow:auto}.tk-main{border-right:0;overflow:visible;padding:14px 16px}.tk-aside{padding:14px 16px 24px}}

/* ── 4.51.0: inloggning och registrering – band, kort och Blixten ───────── */
.auth2-body{margin:0;background:#F6F3FA;color:#2C0E3D;font-family:Inter,ui-sans-serif,system-ui,sans-serif}
[data-theme="dark"] .auth2-body{background:#150A22;color:#ECEAF0}
.auth2{min-height:100vh;display:flex;flex-direction:column}
.auth2-band{position:relative;overflow:hidden;background:linear-gradient(120deg,#2C0E3D 0%,#4A2266 55%,var(--accent) 100%);height:240px;color:#fff}
.auth2-pattern{position:absolute;inset:0;width:100%;height:100%}
.auth2-bandin{position:relative;max-width:1080px;margin:0 auto;padding:22px 24px;display:flex;align-items:center;gap:14px}
.auth2-logo svg,.auth2-logo img{display:block;height:32px}
.auth2-tag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:#F2FAA3;background:rgba(255,255,255,.12);padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14)}
.auth2-switch{color:#C8A8F2;font-size:13.5px}.auth2-switch b{color:#fff;font-weight:700;margin-left:4px}.auth2-switch:hover b{text-decoration:underline}
.auth2-main{flex:1;max-width:1080px;width:100%;margin:-120px auto 0;padding:0 24px 40px;display:flex;align-items:flex-start;justify-content:center;gap:24px;position:relative}
.auth2-card{width:100%;max-width:440px;background:var(--surface,#fff);border-radius:20px;padding:30px 32px 26px;box-shadow:0 30px 80px rgba(44,14,61,.22),0 2px 6px rgba(44,14,61,.06);border:1px solid rgba(255,255,255,.6)}
[data-theme="dark"] .auth2-card{background:#1E1130;border-color:#33224A}
.auth2-card h1{font-size:26px;letter-spacing:-.025em;font-weight:800;margin:0 0 6px;line-height:1.15}
.auth2-card>p,.auth2-card form>p{color:var(--muted);margin:0 0 18px;font-size:14px}
.auth2-card .field{margin-bottom:12px}.auth2-card .field>span{font-size:12.5px;font-weight:650;color:var(--muted)}
.auth2-card .input{height:42px;border-radius:10px;border:1.5px solid var(--line-strong,#D6CAE6);font-size:15px}
.auth2-card .input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.auth2-card .btn.primary{width:100%;height:44px;border-radius:12px;font-size:15px;font-weight:700;margin-top:6px;box-shadow:0 10px 24px rgba(126,69,201,.28)}
.auth2-card .check{font-size:12.5px;color:var(--muted);margin:6px 0 4px;line-height:1.45}
.auth2-card .auth-links{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:14px;font-size:13px}.auth2-card .auth-links a{color:var(--accent);font-weight:650}
.auth-steps{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.auth-steps span{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650;color:var(--muted);background:var(--hover);padding:5px 10px 5px 5px;border-radius:999px}
.auth-steps span i{width:18px;height:18px;border-radius:50%;background:var(--surface);color:var(--muted);display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:800}
.auth-steps span.on{background:#2C0E3D;color:#F2FAA3}.auth-steps span.on i{background:#F2FAA3;color:#2C0E3D}
.auth2-mascot{align-self:flex-end;margin-top:60px;filter:drop-shadow(0 18px 30px rgba(44,14,61,.25))}
.auth2-mascot svg{display:block}
.auth2-foot{max-width:1080px;width:100%;margin:0 auto;padding:14px 24px 26px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:12.5px;color:var(--muted)}
.auth2-foot span{display:inline-flex;align-items:center;gap:5px}.auth2-foot a{color:var(--muted)}.auth2-foot a:hover{color:var(--accent)}
@media (max-width:1000px){.auth2-mascot{display:none}}
@media (max-width:640px){.auth2-band{height:200px}.auth2-bandin{padding:16px;gap:10px}.auth2-tag{display:none}.auth2-switch{font-size:12.5px}.auth2-main{margin-top:-96px;padding:0 12px 24px}.auth2-card{padding:22px 18px;border-radius:16px}.auth2-card h1{font-size:22px}}
[data-theme="dark"] .auth2-mascot path[fill="#2C0E3D"]{fill:#F2FAA3}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .auth2-mascot path[fill="#2C0E3D"]{fill:#F2FAA3}}
@media (max-width:640px){.auth2-switch .hide-m{display:none}}

/* ── 4.52.0: välkomstsidan ──────────────────────────────────────────────── */
.wel{min-height:100%;background:var(--bg)}
.wel-band{position:relative;overflow:hidden;height:200px;background:linear-gradient(120deg,#2C0E3D 0%,#4A2266 55%,var(--accent) 100%)}
.wel-band .auth2-pattern{position:absolute;inset:0;width:100%;height:100%}
.wel-main{max-width:920px;margin:-120px auto 0;padding:0 24px 40px;position:relative}
.wel-card{background:var(--surface);border-radius:20px;padding:30px 32px 26px;box-shadow:0 30px 80px rgba(44,14,61,.22);border:1px solid var(--line)}
.wel-head{display:flex;gap:20px;align-items:flex-start}
.wel-kicker{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#2C0E3D;background:#F2FAA3;padding:5px 10px;border-radius:999px}
.wel-card h1{font-size:30px;letter-spacing:-.025em;font-weight:800;margin:12px 0 6px}
.wel-card h1+p{color:var(--muted);font-size:15px;max-width:560px;margin:0}
.wel-mascot{margin:-40px -10px -20px auto;flex:none}.wel-mascot svg{height:170px;width:auto;display:block;filter:drop-shadow(0 12px 22px rgba(44,14,61,.22))}
[data-theme="dark"] .wel-mascot path[fill="#2C0E3D"]{fill:#F2FAA3}
.wel-prog{display:flex;align-items:center;gap:12px;margin:22px 0 14px;font-size:13px;font-weight:650;color:var(--muted)}
.wel-prog .bar{flex:1;height:8px;border-radius:4px;background:var(--hover);overflow:hidden}.wel-prog .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#9B5DE5);border-radius:4px;transition:width .4s}
.wel-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.wel-step{position:relative;display:flex;flex-direction:column;gap:8px;padding:18px 16px 16px;border:1.5px solid var(--line);border-radius:16px;background:var(--surface-2);color:var(--ink);transition:transform .15s,box-shadow .15s,border-color .15s}
.wel-step:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(44,14,61,.12);border-color:var(--accent-line)}
.wel-step .num{position:absolute;right:12px;top:12px;width:24px;height:24px;border-radius:50%;background:#2C0E3D;color:#F2FAA3;display:grid;place-items:center;font-size:12px;font-weight:800}
.wel-step .ic{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.wel-step b{font-size:15px;font-weight:700}.wel-step small{color:var(--muted);font-size:13px;line-height:1.45;flex:1}
.wel-step .go{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;color:var(--accent);margin-top:4px}
.wel-step.done{border-color:#BFE3D0;background:#EEF8F2}.wel-step.done .num{background:#0E8A6E;color:#fff}.wel-step.done .go{color:#0E8A6E}.wel-step.done .ic{background:#DDF2E6;color:#0E8A6E}
[data-theme="dark"] .wel-step.done{background:#16342A;border-color:#245C44}[data-theme="dark"] .wel-step.done .ic{background:#1E4A38}
.wel-foot{display:flex;align-items:center;gap:14px;margin-top:22px;flex-wrap:wrap;font-size:13px}
@media (max-width:760px){.wel-band{height:150px}.wel-main{margin-top:-90px;padding:0 12px 24px}.wel-card{padding:22px 18px}.wel-steps{grid-template-columns:1fr}.wel-mascot{display:none}.wel-card h1{font-size:24px}}

/* ── 4.54.0: AI Receptionist – Natt-band överst, tydliga nyckeltal, lugna paneler ── */
.vr-recs{display:grid;gap:4px;padding:2px 6px 10px}
.vr-rec{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:12px;border:1px solid var(--line);color:var(--ink);background:var(--surface)}
.vr-rec:hover{background:var(--hover)}.vr-rec.on{border-color:transparent;background:#2C0E3D;color:#fff}.vr-rec.on .vr-rec-t small{color:#C8A8F2}
.vr-rec-av{width:32px;height:32px;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center;overflow:hidden;flex:none;font-weight:800;color:var(--accent);font-size:16px}
.vr-rec.on .vr-rec-av{background:rgba(255,255,255,.12)}.vr-rec-av svg{width:32px;height:32px;display:block}
.vr-rec-t{min-width:0;flex:1}.vr-rec-t b{display:block;font-size:13px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vr-rec-t small{display:block;font-size:11.5px;color:var(--muted)}
.vr-rec-dot{width:8px;height:8px;border-radius:50%;background:var(--faint)}.vr-rec-dot.on{background:#22C55E;box-shadow:0 0 0 3px rgba(34,197,94,.22)}
.vr-rec.add{border-style:dashed;background:transparent}.vr-rec.add .vr-rec-t b{color:var(--accent)}.vr-rec.add.off .vr-rec-t b{color:var(--muted)}.vr-rec.add.off .vr-rec-av{color:var(--muted)}
.vr-nav-group .muted{font-weight:500;margin-left:6px}
/* Bandet överst – på översikten (receptionisten) och på alla flikar */
.vr .vr-agent,.vr .vr-hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#2C0E3D 0%,#4A2266 60%,#6B3AA8 100%);color:#fff;border:0;border-radius:20px;box-shadow:0 18px 44px rgba(44,14,61,.22)}
.vr .vr-agent::after,.vr .vr-hero::after{content:"";position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(242,250,163,.18),transparent 62%);pointer-events:none}
.vr .vr-agent{display:flex;align-items:center;gap:20px;padding:20px 24px;flex-wrap:wrap}
.vr .vr-agent-av{width:104px;height:104px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;overflow:hidden;flex:none;box-shadow:inset 0 0 0 3px rgba(242,250,163,.35)}
.vr .vr-agent-av svg{width:112px;height:112px;margin-top:10px}
.vr .vr-agent-av i{position:absolute}
.vr .vr-agent-info{min-width:0;flex:1 1 260px}
.vr .vr-agent-name{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vr .vr-agent-name h1{font-family:"Bricolage Grotesque",Inter,ui-sans-serif,system-ui,sans-serif;font-size:32px;letter-spacing:-.03em;font-weight:800;color:#fff;margin:0}
.vr .vr-status{background:rgba(255,255,255,.12);color:#C8A8F2;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:650}.vr .vr-status.on{color:#F2FAA3}.vr .vr-status i{background:currentColor}
.vr .vr-agent-info p{font-size:14px;color:#E5D8F7;margin:4px 0 0;overflow-wrap:anywhere}.vr .vr-agent-info p.muted{color:#C8A8F2}
.vr .vr-agent-actions{display:flex;gap:8px;flex-wrap:wrap}
.vr .vr-agent-actions .btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff;border-radius:12px}
.vr .vr-agent-actions .btn.primary{background:#F2FAA3;border-color:#F2FAA3;color:#2C0E3D;box-shadow:0 8px 20px rgba(242,250,163,.25)}
.vr .vr-hero{padding:18px 22px;align-items:center;gap:16px}
.vr .vr-hero-av{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;overflow:hidden;flex:none;position:relative;box-shadow:inset 0 0 0 2px rgba(242,250,163,.35)}
.vr .vr-hero-av svg{width:60px;height:60px;margin-top:6px}.vr .vr-hero-av i{position:absolute;right:2px;bottom:2px;width:10px;height:10px;border-radius:50%;background:#94A3B8;border:2px solid #2C0E3D}.vr .vr-hero-av i.on{background:#22C55E}
.vr .vr-eyebrow{color:#F2FAA3;background:rgba(255,255,255,.1);border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:700}
.vr .vr-hero h1{font-family:"Bricolage Grotesque",Inter,ui-sans-serif,system-ui,sans-serif;color:#fff;font-size:26px;letter-spacing:-.025em;font-weight:800}
.vr .vr-hero p{color:#C8A8F2}
/* Nyckeltal: rena vita rutor, stor siffra, ikon i lila */
.vr .vr-kpis.six{grid-template-columns:repeat(6,1fr);gap:10px;margin:14px 0 6px}
.vr .vr-kpi{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 14px 12px;box-shadow:none;gap:2px}
.vr .vr-kpi::before{display:none}
.vr .vr-kpi:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(44,14,61,.10);border-color:var(--accent-line)}
.vr .vr-kpi-ico{width:30px;height:30px;border-radius:9px;background:var(--accent-soft);color:var(--accent);margin-bottom:6px}
.vr .vr-kpi-label{font-size:12px;font-weight:600;color:var(--muted)}
.vr .vr-kpi b{font-family:"Bricolage Grotesque",Inter,ui-sans-serif,system-ui,sans-serif;font-size:28px;line-height:1.05;letter-spacing:-.03em;font-weight:800;color:var(--ink)}
.vr .vr-kpi b small{font-size:14px;color:var(--muted);letter-spacing:0;margin-left:2px}
.vr .vr-kpi>small{font-size:11.5px;color:var(--faint)}
/* Paneler och kort: mjuka, en ton, tunn linje */
.vr .vr-panel,.vr .vr-card,.vr .vr-minutes,.vr .vr-number,.vr .vr-wizard,.vr .vr-filters{border-radius:16px;border:1px solid var(--line);box-shadow:none;background:var(--surface)}
.vr .vr-panel h3,.vr .vr-card h3{font-size:14px;letter-spacing:-.01em;font-weight:700}
.vr .vr-card h3 svg,.vr .vr-panel h3 svg{color:var(--accent)}
.vr .vr-table th{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:700}
.vr .vr-table tr:hover td{background:var(--hover)}
.vr .btn.primary{border-radius:10px}
.vr .vr-number b{font-family:"Bricolage Grotesque",Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.01em}
/* Inställningsflikarna: sektionsrubriker med lila ikon, luftigare fält */
.vr .vr-panel .field>span,.vr .vr-card .field>span{font-size:12.5px;font-weight:650;color:var(--muted)}
.vr .vr-panel .input,.vr .vr-card .input{border-radius:10px}
.vr .seg,.vr .seg-inline{border-radius:10px}
[data-theme="dark"] .vr .vr-kpi{background:#1E1130;border-color:#33224A}
[data-theme="dark"] .vr .vr-kpi,[data-theme="dark"] .vr .vr-kpi[class*="c-"]{background:#1E1130!important}
[data-theme="dark"] .vr .vr-panel,[data-theme="dark"] .vr .vr-card{background:#1E1130;border-color:#33224A}
[data-theme="dark"] .vr-rec{background:#1E1130;border-color:#33224A}
@media (max-width:1100px){.vr .vr-kpis.six{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.vr .vr-kpis.six{grid-template-columns:repeat(2,1fr)}.vr .vr-agent{padding:16px;gap:12px}.vr .vr-agent-av{width:80px;height:80px}.vr .vr-agent-av svg{width:86px;height:86px}.vr .vr-agent-name h1{font-size:24px}.vr .vr-agent-actions{width:100%}.vr .vr-kpi b{font-size:24px}}


/* ── 4.55.0: telefonidelen – förfinat band, tydligt ansikte, ikoner i rutor, låst knapp ── */
.voice-nav .nav-item{align-items:center;gap:10px;padding:7px 8px;border-radius:12px}
.voice-nav .nav-item>.i{width:30px;height:30px;padding:7px;border-radius:9px;background:var(--hover);color:var(--muted);flex:none;box-sizing:border-box}
.voice-nav .nav-item.on{background:var(--accent-soft)}.voice-nav .nav-item.on>.i{background:var(--accent);color:#fff}
.voice-nav .nav-item .label{font-weight:600}.voice-nav .nav-item .label small{font-weight:400;color:var(--muted)}
.vr-nav-group{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:700;margin:14px 8px 4px}
.vr-rec.locked{cursor:not-allowed;opacity:.85}.vr-rec.locked .vr-rec-av{color:var(--faint);background:var(--hover)}.vr-rec.locked .vr-rec-t b{color:var(--muted)}.vr-rec.locked .vr-rec-t small a{color:var(--accent);font-weight:650}
.vr .vr-agent,.vr .vr-hero{background:#2C0E3D;box-shadow:0 1px 2px rgba(44,14,61,.2),0 10px 24px -14px rgba(44,14,61,.5);border:1px solid #3A1650;border-radius:18px}
.vr .vr-agent::after,.vr .vr-hero::after{width:520px;height:520px;right:-140px;top:-260px;background:radial-gradient(circle,rgba(155,93,229,.35),transparent 60%)}
.vr .vr-agent::before,.vr .vr-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 220px at 18% 120%,rgba(242,250,163,.10),transparent 70%);pointer-events:none}
.vr .vr-agent-av{width:112px;height:112px;background:#F7F3FA;box-shadow:0 0 0 4px #2C0E3D,0 0 0 7px #9B5DE5;overflow:visible;position:relative}
.vr .vr-agent-av svg{width:96px;height:96px;margin:0}
.vr .vr-agent-av i{position:absolute;right:2px;bottom:4px;width:16px;height:16px;border-radius:50%;background:#94A3B8;border:3px solid #2C0E3D}.vr .vr-agent-av i.on{background:#22C55E}
.vr .vr-hero-av{width:60px;height:60px;background:#F7F3FA;box-shadow:0 0 0 3px #2C0E3D,0 0 0 5px #9B5DE5;overflow:visible}
.vr .vr-hero-av svg{width:50px;height:50px;margin:0}.vr .vr-hero-av i{border-color:#2C0E3D}
.vr .vr-agent-name h1{font-size:30px}
.vr .vr-agent-actions .btn{backdrop-filter:blur(6px)}.vr .vr-agent-actions .btn.primary{box-shadow:none}
.vr .vr-kpi:hover{box-shadow:0 10px 24px -12px rgba(44,14,61,.35)}
.vr-rec-av svg{width:26px;height:26px}
/* ── 4.56.0: E-postmallar ─────────────────────────────────────────────── */
.mt-wrap{display:grid;grid-template-columns:280px 1fr;gap:16px;align-items:start}
.mt-list{display:grid;gap:3px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px}
.mt-grp{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:700;margin:10px 8px 4px}
.mt-item{display:block;padding:8px 10px;border-radius:10px;color:var(--ink);position:relative}.mt-item b{display:block;font-size:13.5px;font-weight:650}.mt-item small{display:block;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:16px}.mt-item i{position:absolute;right:10px;top:10px;color:var(--accent);font-style:normal;font-size:10px}
.mt-item:hover{background:var(--hover)}.mt-item.on{background:var(--accent-soft);color:var(--accent)}.mt-item.on b{color:var(--accent)}
.mt-edit{display:grid;gap:14px}
.mt-preview{padding:0;overflow:hidden}.mt-pv-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}.mt-preview iframe{width:100%;height:820px;border:0;background:#F6F3FA}
@media (max-width:900px){.mt-wrap{grid-template-columns:1fr}}

/* ── 4.58.0: projektlistan – dra och släpp, rutnät/lista ─────────────────── */
.proj-grid{transition:gap .2s}
.proj-cell{transition:transform .25s cubic-bezier(.2,.8,.2,1),opacity .2s}
.proj-cell.dragging{opacity:.35;transform:scale(.97)}
.proj-cell.over-before{box-shadow:-4px 0 0 var(--accent)}.proj-cell.over-after{box-shadow:4px 0 0 var(--accent)}
.proj-card{transition:transform .2s,box-shadow .2s,border-color .2s}
.proj-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(44,14,61,.12);border-color:var(--accent-line)}
.proj-cell[draggable="true"] .proj-card{cursor:grab}
.proj-grid.is-list{display:flex;flex-direction:column;gap:6px}
.proj-grid.is-list .proj-card{flex-direction:row;align-items:center;gap:14px;padding:10px 14px;border-radius:12px}
.proj-grid.is-list .proj-ico{width:34px;height:34px;flex:none}
.proj-grid.is-list .proj-card b{flex:0 0 240px;font-size:14px}
.proj-grid.is-list .proj-card small{flex:1;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-grid.is-list .proj-foot{margin:0;flex:none}
.proj-grid.is-list .proj-card:hover{transform:none}
.proj-grid.is-list .proj-cell.over-before{box-shadow:0 -3px 0 var(--accent)}.proj-grid.is-list .proj-cell.over-after{box-shadow:0 3px 0 var(--accent)}
.proj-view label span{padding:6px 9px;display:grid;place-items:center}
@keyframes projin{from{opacity:0;transform:translateY(8px)}}
.proj-cell{animation:projin .35s ease-out both}
.proj-cell:nth-child(2){animation-delay:.03s}.proj-cell:nth-child(3){animation-delay:.06s}.proj-cell:nth-child(4){animation-delay:.09s}.proj-cell:nth-child(5){animation-delay:.12s}.proj-cell:nth-child(6){animation-delay:.15s}.proj-cell:nth-child(n+7){animation-delay:.18s}
@media (max-width:640px){.proj-grid.is-list .proj-card b{flex:1}.proj-grid.is-list .proj-card small{display:none}}

/* ── 4.59.0: fakturor på Abonnemang ─────────────────────────────────────── */
.inv-list{display:grid}
.inv{border-top:1px solid var(--line)}.inv:first-child{border-top:0}
.inv summary{list-style:none;display:flex;align-items:center;gap:14px;padding:12px 18px;cursor:pointer}.inv summary::-webkit-details-marker{display:none}
.inv summary:hover{background:var(--hover)}.inv[open] summary svg:last-child{transform:rotate(180deg)}
.inv-date{width:92px;color:var(--muted);font-size:13px;flex:none}
.inv-main{flex:1;min-width:0}.inv-main b{display:block;font-size:14px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inv-main small{color:var(--muted);font-size:12.5px}
.inv-amount{font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.inv-body{padding:4px 18px 16px 124px;display:grid;gap:10px}
.inv-lines{width:100%;border-collapse:collapse;font-size:13.5px}.inv-lines td{padding:6px 0;border-bottom:1px solid var(--line)}.inv-lines td small{display:block;color:var(--muted);font-size:12px}.inv-lines tr.tot td{border-bottom:0;font-weight:800;padding-top:8px}.inv-lines td.num{text-align:right;white-space:nowrap}
.inv-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}.inv-meta span{display:inline-flex;align-items:center;gap:4px}
@media (max-width:640px){.inv summary{flex-wrap:wrap;gap:8px}.inv-date{width:auto}.inv-body{padding-left:18px}}

/* ── 4.60.0: Social – kalender, redigerare, automationer, konton ─────────── */
.so-wrap{display:flex;min-height:100%;background:var(--bg)}
.so-side{width:232px;flex:none;background:#2C0E3D;color:#fff;padding:14px 10px;display:flex;flex-direction:column;gap:2px;border-right:1px solid #3A1650}
.so-side-title{display:flex;align-items:center;gap:8px;font-family:"Bricolage Grotesque",Inter,ui-sans-serif,system-ui,sans-serif;font-weight:800;font-size:17px;letter-spacing:-.02em;padding:4px 8px 14px;color:#fff}
.so-nav{display:grid;gap:2px}.so-nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;color:#C8A8F2;font-weight:600;font-size:13.5px}.so-nav a .ic{width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#E5D8F7}
.so-nav a:hover{background:rgba(255,255,255,.06);color:#fff}.so-nav a.on{background:rgba(255,255,255,.12);color:#fff}.so-nav a.on .ic{background:#F2FAA3;color:#2C0E3D}.so-nav a em{margin-left:auto;font-style:normal;font-size:11px;background:#F2FAA3;color:#2C0E3D;border-radius:999px;padding:1px 7px;font-weight:800}
.so-accts{margin-top:auto}.so-lbl{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#8A7A99;font-weight:700;margin:14px 10px 6px}
.so-acct{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;color:#E5D8F7;font-size:12.5px}.so-acct span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.so-acct i.on{width:7px;height:7px;border-radius:50%;background:#22C55E}.so-acct:hover{background:rgba(255,255,255,.06)}.so-acct.add{color:#C8A8F2;border:1px dashed rgba(255,255,255,.2)}
.so-main{flex:1;min-width:0;padding:18px 22px 40px}
.so-head{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.so-title b{display:block;font-family:"Bricolage Grotesque",Inter,ui-sans-serif,system-ui,sans-serif;font-size:24px;letter-spacing:-.025em;font-weight:800;line-height:1.1}.so-title small{color:var(--muted);font-size:13px}
.so-seg a{padding:6px 12px;border-radius:8px;font-weight:600;color:var(--muted)}.so-seg a.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.so-pf{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:5px;color:#fff;font-style:normal}.so-pf.instagram{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)}.so-pf.facebook{background:#1877F2}.so-pf.linkedin{background:#0A66C2}.so-pf.tiktok{background:#111}
/* vecka */
.so-week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.so-day{background:var(--surface);border:1px solid var(--line);border-radius:14px;min-height:460px;padding:8px;display:flex;flex-direction:column;gap:8px;transition:background .15s,border-color .15s}
.so-day.today{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.so-day.today .so-dh b{background:var(--accent);color:#fff}.so-day.past{opacity:.75}.so-day.over{background:var(--accent-soft);border-color:var(--accent)}
.so-dh{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 6px;font-size:12px;color:var(--muted);font-weight:600}.so-dh b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;color:var(--ink)}
.so-post{display:block;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;padding:7px 8px;background:var(--bg);color:var(--ink);font-size:12px;transition:transform .15s,box-shadow .15s}.so-post:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(44,14,61,.12)}
.so-post.pub{border-left-color:#0E8A6E}.so-post.draft{border-left-color:#B7791F;opacity:.85}.so-post.fail{border-left-color:#B42318}.so-post.dragging{opacity:.4}
.so-post b{display:block;font-weight:600;line-height:1.3;margin:3px 0 2px}.so-post small{color:var(--muted)}.so-pt{display:flex;align-items:center;gap:3px}.so-pt time{color:var(--muted);font-weight:600}
.so-cover{display:block;width:100%;height:56px;object-fit:cover;border-radius:7px;margin-bottom:5px;background:var(--hover)}.so-cover.video{display:grid;place-items:center;color:var(--muted)}
.so-post.story .so-cover{border:2px solid #DD2A7B;border-radius:9px}.so-story-tag{font-size:10px;font-weight:800;color:#DD2A7B;background:#FDECF3;padding:1px 6px;border-radius:5px;margin-left:4px}
.so-add{margin-top:auto;display:grid;place-items:center;height:30px;border-radius:8px;color:var(--faint);border:1px dashed var(--line)}.so-add:hover{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}
/* månad */
.so-month{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.so-mdn{font-size:11px;color:var(--muted);font-weight:700;padding:0 6px 4px;text-transform:uppercase;letter-spacing:.05em}
.so-mcell{background:var(--surface);border:1px solid var(--line);border-radius:12px;min-height:96px;padding:6px}.so-mcell.empty{background:transparent;border:0}.so-mcell b{display:block;font-size:12px;margin-bottom:4px}.so-mcell.today b{color:var(--accent)}
.so-mpost{display:block;font-size:11px;padding:3px 6px;border-radius:6px;background:var(--accent-soft);color:var(--ink);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:3px solid var(--accent)}.so-mpost.pub{border-left-color:#0E8A6E}.so-mpost.draft{border-left-color:#B7791F}.so-mpost.fail{border-left-color:#B42318}.so-mpost.story{border-left-color:#DD2A7B}.so-mpost time{color:var(--muted);font-weight:600}
/* lista */
.so-tabs{display:flex;gap:14px;border-bottom:1px solid var(--line);margin-bottom:12px}.so-tabs a{padding:8px 2px;color:var(--muted);font-weight:600;border-bottom:2px solid transparent}.so-tabs a.on{color:var(--ink);border-bottom-color:var(--ink)}.so-tabs em{font-style:normal;font-size:11px;background:var(--hover);border-radius:999px;padding:1px 7px;margin-left:4px}
.so-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}.so-list .so-post{background:var(--surface)}
.so-empty{display:flex;align-items:center;gap:24px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:30px}.so-empty svg{width:140px;height:auto}.so-empty h2{margin:0 0 6px;font-family:"Bricolage Grotesque",Inter,ui-sans-serif,system-ui,sans-serif;font-size:22px}.so-empty p{color:var(--muted);margin:0 0 14px}
/* redigeraren */
.so-kind label{cursor:pointer}.so-kind input{display:none}.so-kind span{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:8px;font-weight:650;color:var(--muted)}.so-kind input:checked+span{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.so-story-note{font-size:12.5px;display:inline-flex;align-items:center;gap:4px}.sc-acc-off{opacity:.35;pointer-events:none}.sc-story-mode textarea[name=body]{min-height:60px}
.so-wrap .sc-acc{border-radius:999px}.so-wrap .sc-acc input:checked+span{background:#2C0E3D;color:#F2FAA3}
.so-wrap .card{border-radius:16px}.so-wrap .sc-preview .pv{border-radius:14px;box-shadow:0 10px 24px rgba(44,14,61,.08)}
/* automationer */
.so-tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}.so-tpl{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;color:var(--ink);transition:transform .15s,box-shadow .15s}.so-tpl:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(44,14,61,.12)}.so-tpl-ic{font-size:26px}.so-tpl b{font-size:15px}.so-tpl small{color:var(--muted);flex:1}.so-tpl-go{color:var(--accent);font-weight:700;font-size:13px}.so-tpl.blank{border-style:dashed;background:transparent}
.so-flows{display:grid;gap:8px}.so-flow{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 16px;color:var(--ink);transition:transform .15s,box-shadow .15s}.so-flow:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(44,14,61,.1)}.so-flow.off{opacity:.7}
.so-flow-st{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--muted);width:70px}.so-flow-st i{width:8px;height:8px;border-radius:50%;background:var(--faint)}.so-flow-st i.on{background:#22C55E;box-shadow:0 0 0 3px rgba(34,197,94,.2)}
.so-flow-main{flex:1;min-width:0}.so-flow-main b{display:block;font-size:14.5px}.so-flow-main small{color:var(--muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.so-flow-main em{font-style:normal;background:#F2FAA3;color:#2C0E3D;padding:0 5px;border-radius:4px;font-weight:700}
.so-flow-ch{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:4px}.so-flow-n{text-align:center;min-width:64px}.so-flow-n b{display:block;font-size:18px;font-family:"Bricolage Grotesque",Inter,ui-sans-serif,system-ui,sans-serif;font-weight:800}.so-flow-n small{color:var(--muted);font-size:11px}
.so-tpl-row{display:flex;align-items:center;gap:6px;margin-top:12px;flex-wrap:wrap}
/* byggaren (Kanvas) */
.so-name{font-family:"Bricolage Grotesque",Inter,ui-sans-serif,system-ui,sans-serif;font-size:22px;font-weight:800;letter-spacing:-.02em;border:0;background:transparent;color:var(--ink);width:min(520px,60vw);padding:0}.so-name:focus{outline:0;border-bottom:2px solid var(--accent)}
.so-switch{display:inline-flex;align-items:center;gap:8px;font-weight:650;cursor:pointer}.so-switch input{display:none}.so-switch span{width:36px;height:20px;border-radius:999px;background:var(--faint);position:relative;transition:background .2s}.so-switch span::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .2s}.so-switch input:checked+span{background:#22C55E}.so-switch input:checked+span::after{left:18px}
.so-canvas{position:relative;border-radius:18px;background:linear-gradient(135deg,#F6F3FA,#EDE4F8);background-image:radial-gradient(#C8A8F2 1.2px,transparent 1.2px),linear-gradient(135deg,#F6F3FA,#EDE4F8);background-size:18px 18px,100% 100%;padding:22px;min-height:520px}
[data-theme="dark"] .so-canvas{background:#1E1130;background-image:radial-gradient(#3A2A55 1.2px,transparent 1.2px);background-size:18px 18px}
.so-lane{display:flex;align-items:stretch;gap:0;margin-bottom:18px}
.so-node{width:320px;background:var(--surface);border-radius:16px;padding:14px;box-shadow:0 10px 24px rgba(44,14,61,.12);display:grid;gap:8px}.so-node.trig{background:linear-gradient(135deg,var(--surface),#FFF0F6)}.so-node.cond{background:linear-gradient(135deg,var(--surface),#FFF7E0)}
[data-theme="dark"] .so-node.trig,[data-theme="dark"] .so-node.cond{background:#241538}
.so-nh{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--accent)}
.so-wire{width:60px;align-self:center;height:0;border-top:2.5px dashed #9B5DE5}
.so-branches{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.so-branch{background:rgba(255,255,255,.55);border-radius:16px;padding:12px;min-height:200px;display:flex;flex-direction:column;gap:10px}[data-theme="dark"] .so-branch{background:rgba(255,255,255,.04)}
.so-branch.disabled{opacity:.45;pointer-events:none}.so-branch.disabled::after{content:"Sätt ett villkor i OM för att använda Nej-grenen";font-size:12px;color:var(--muted)}
.so-bh{font-weight:800;font-size:12px;letter-spacing:.05em}.so-bh.yes{color:#0E8A6E}.so-bh.no{color:#B42318}
.so-steps{display:grid;gap:10px}
.so-step{background:var(--surface);border-radius:14px;padding:12px;box-shadow:0 8px 20px rgba(44,14,61,.1);display:grid;gap:8px;cursor:grab}.so-step.dragging{opacity:.4}.so-step.over{outline:2px dashed var(--accent)}
.so-step-h{display:flex;align-items:center;gap:8px}.so-step-ic{font-size:16px}.so-step-t{font-size:13.5px}
.so-step-btns{display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:6px;align-items:center;font-size:12px}.so-step-btns .input{height:32px;font-size:12.5px}
.so-addstep{display:flex;align-items:center;justify-content:center;gap:6px;border:1px dashed var(--accent-line);border-radius:12px;padding:10px;color:var(--accent);font-weight:650;cursor:pointer}.so-addstep:hover{background:var(--accent-soft)}
.so-palette{position:absolute;z-index:5;background:var(--surface);border-radius:14px;box-shadow:0 14px 34px rgba(44,14,61,.2);padding:10px;display:grid;gap:3px;min-width:220px}.so-palette b{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}.so-palette button{text-align:left;border:0;background:transparent;padding:7px 8px;border-radius:8px;font:inherit;color:var(--ink);cursor:pointer}.so-palette button:hover{background:var(--accent-soft)}
.so-hint{display:flex;align-items:center;gap:12px;margin-top:18px;background:rgba(255,255,255,.6);border-radius:14px;padding:10px 14px}[data-theme="dark"] .so-hint{background:rgba(255,255,255,.05)}.so-hint svg{width:56px;height:auto;flex:none}.so-hint b{display:block;font-size:13px}.so-hint small{color:var(--muted);line-height:1.45}
/* konton */
.so-acc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}.so-acc-card{padding:16px;display:grid;gap:10px;align-content:start}.so-acc-top{display:flex;gap:12px;align-items:flex-start}.so-acc-top b{display:block;font-size:15px}.so-acc-top small{color:var(--muted);line-height:1.4}
.so-acc-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;flex:none}.so-acc-ic.instagram{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)}.so-acc-ic.facebook{background:#1877F2}.so-acc-ic.linkedin{background:#0A66C2}.so-acc-ic.tiktok{background:#111}
.so-acc-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;font-size:13px}.so-acc-row i.on{width:8px;height:8px;border-radius:50%;background:#22C55E}
@media (max-width:1000px){.so-week{grid-template-columns:repeat(2,1fr)}.so-day{min-height:140px}.so-branches{grid-template-columns:1fr}.so-lane{flex-direction:column}.so-wire{width:0;height:26px;border-top:0;border-left:2.5px dashed #9B5DE5;margin-left:24px}.so-node{width:100%}}
@media (max-width:760px){.so-wrap{flex-direction:column}.so-side{width:100%;flex-direction:row;flex-wrap:wrap;align-items:center;padding:10px}.so-side-title{padding:0 8px;font-size:15px}.so-nav{display:flex;flex-wrap:wrap;gap:4px}.so-nav a{padding:6px 10px;font-size:12.5px}.so-nav a .ic{display:none}.so-accts{display:none}.so-main{padding:12px}.so-week{grid-template-columns:1fr}.so-month{gap:3px}.so-mcell{min-height:60px;padding:3px}.so-mpost{font-size:10px}}

/* ── 4.61.0: kundblock – godkännande och fråga ─────────────────────────── */
.bk-kund{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:14px 16px;display:grid;gap:10px;margin:4px 0}
.bk-kund.approval{border-left:4px solid var(--accent)}.bk-kund.question{border-left:4px solid #B7791F}
.bk-kh{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--accent)}.bk-kund.question .bk-kh{color:#B7791F}
.bk-ktext{font-size:15px;line-height:1.55;min-height:24px}
.bk-kimg{margin:0;position:relative}.bk-kimg img{display:block;max-width:100%;max-height:420px;border-radius:10px;border:1px solid var(--line)}
.bk-kaddimg .bk-up-btn{display:inline-flex;align-items:center;gap:6px}
.bk-kform{display:grid;gap:8px;padding-top:6px;border-top:1px dashed var(--line)}
.bk-kbtns{display:flex;gap:6px;flex-wrap:wrap}.bk-kbtn{border:1.5px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 14px;font:inherit;font-weight:650;cursor:pointer;color:var(--ink)}
.bk-kbtn.ok.on,.bk-kbtn.ok:hover{background:#E1F4EC;border-color:#0E8A6E;color:#0E8A6E}.bk-kbtn.warn.on,.bk-kbtn.warn:hover{background:#FFF4D6;border-color:#B7791F;color:#8A5A0B}.bk-kbtn.bad.on,.bk-kbtn.bad:hover{background:#FDE8E8;border-color:#B42318;color:#B42318}
.bk-kact{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bk-kres{border-radius:10px;padding:10px 12px;display:grid;gap:6px;background:var(--bg)}.bk-kres.ok{background:#EEF8F2}.bk-kres.warn{background:#FFF8E6}.bk-kres.bad{background:#FDF0F0}.bk-kres.ans{background:var(--bg)}
[data-theme="dark"] .bk-kres.ok{background:#16342A}[data-theme="dark"] .bk-kres.warn{background:#3A2C10}[data-theme="dark"] .bk-kres.bad{background:#3D1C2A}
.bk-kres-d{font-weight:800;font-size:14px}.bk-kres.ok .bk-kres-d{color:#0E8A6E}.bk-kres.warn .bk-kres-d{color:#8A5A0B}.bk-kres.bad .bk-kres-d{color:#B42318}
.bk-kres-c{font-size:14px;line-height:1.5;white-space:pre-wrap}
.bk-stamp{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);padding-top:6px;border-top:1px solid rgba(0,0,0,.06)}.bk-stamp-av{width:22px;height:22px;border-radius:50%;background:#2C0E3D;color:#F2FAA3;font-size:10px;font-weight:800;display:grid;place-items:center}.bk-stamp b{color:var(--ink)}
.bk-reopen{margin-left:auto;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:4px 9px;font:inherit;font-size:12px;font-weight:650;cursor:pointer;color:var(--accent)}.bk-reopen:hover{background:var(--accent-soft)}.bk-lock{margin-left:auto}

/* ── 4.62.0: delat projekt (gäst) + anslut numret igen ───────────────────── */
.proj-guest-bar{display:flex;align-items:center;gap:10px;flex:0 0 auto!important;height:auto;max-height:none;min-height:44px;padding:6px 16px;background:#2C0E3D;color:#E5D8F7;font-size:13px;flex-wrap:wrap}.proj-guest-bar b{color:#fff}.proj-guest-bar .btn{margin-left:auto;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff}
.proj-shell{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;height:100%}.proj-shell>.proj-wrap{flex:1;min-height:0;height:auto}
@media (max-width:640px){.proj-guest-bar{font-size:12.5px;padding:8px 12px}.proj-guest-bar .btn{margin-left:0;width:100%;justify-content:center}}
.vr-reconnect{display:grid;gap:6px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}.vr-reconnect .vr-err{color:#B42318;display:flex;gap:4px;align-items:flex-start;line-height:1.4}

/* ── 4.63.0: projekt delade från andra företag ───────────────────────────── */
.proj-shared{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.proj-shared-head{display:flex;align-items:center;gap:8px;margin-bottom:12px;color:var(--accent)}.proj-shared-head b{color:var(--ink);font-size:15px}.proj-shared-head small{color:var(--muted)}
.proj-grid-shared .proj-card{border-style:dashed}
.proj-shared-by{display:inline-flex;align-items:center;gap:4px;color:var(--accent);font-weight:650}

/* 4.67.0 */
.mail-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
/* ── 4.68.0 / 4.69.0: Bakgrundsarbete och Säkerhetskopior ─────────────────── */
.wk-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.wk-stat{padding:14px 16px;display:grid;gap:2px}.wk-stat small{color:var(--muted);font-size:12px;font-weight:600}.wk-stat b{font-size:22px;font-weight:800;letter-spacing:-.02em}.wk-stat b.ok{color:#0E8A6E}.wk-stat b.bad{color:#B42318}.wk-stat .muted{font-size:12px}
.wk-lanes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.wk-lane{border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;gap:10px}
.wk-lane-h{display:flex;gap:10px;align-items:flex-start}.wk-lane-h b{display:block}.wk-lane-h small{color:var(--muted);font-size:12px;line-height:1.4}.wk-ic{width:32px;height:32px;border-radius:9px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none}
.wk-q{display:flex;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}.wk-q b{color:var(--ink)}.wk-q .warn b{color:#B7791F}
.wk-dots{display:flex;gap:5px;flex-wrap:wrap}.wk-dot{width:24px;height:24px;border-radius:7px;background:var(--hover);color:var(--muted);font-size:11px;font-weight:700;display:grid;place-items:center}.wk-dot.on{background:#E1F4EC;color:#0E8A6E}
[data-theme="dark"] .wk-dot.on{background:#16342A;color:#5FD39A}
.bk-hero{display:flex;align-items:center;gap:14px;padding:16px 18px;flex-wrap:wrap}.bk-hero b{display:block;font-size:15px}.bk-hero small{color:var(--muted)}.bk-hero-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--hover);color:var(--muted)}
.bk-hero.ok .bk-hero-ic{background:#E1F4EC;color:#0E8A6E}.bk-hero.bad .bk-hero-ic{background:#FDE8E8;color:#B42318}.bk-hero-act{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.grid4{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 14px}.bk-key.warn{border-color:#E9C46A;background:#FFFBEB}[data-theme="dark"] .bk-key.warn{background:#2A2210}
.bk-keyrow{display:flex;gap:6px;flex-wrap:wrap}.bk-keyrow .input{flex:1;min-width:220px;font-family:ui-monospace,Menlo,monospace}
.bk-pre{background:var(--hover);border-radius:10px;padding:12px 14px;font-size:12px;overflow-x:auto;white-space:pre}.bk-key-cell{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;word-break:break-all}.bk-key-cell .bad{font-family:inherit;color:#B42318}
@media (max-width:900px){.wk-stats{grid-template-columns:repeat(2,1fr)}.wk-lanes,.grid4{grid-template-columns:1fr}}

/* ── 4.70.0: hur företaget tar emot kunder ───────────────────────────────── */
.vr-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.vr-mode{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px;border:1.5px solid var(--line);border-radius:16px;background:var(--surface);cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.vr-mode:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(44,14,61,.08)}
.vr-mode input{position:absolute;opacity:0;pointer-events:none}
.vr-mode-ico{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.vr-mode b{font-size:15px}.vr-mode small{color:var(--muted);font-size:13px;line-height:1.45;flex:1}
.vr-mode em{font-style:normal;font-size:12px;color:var(--ink);background:var(--hover);border-radius:8px;padding:6px 8px;line-height:1.4;display:flex;gap:5px;align-items:flex-start}
.vr-mode-check{position:absolute;right:12px;top:12px;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;color:transparent;font-style:normal}
.vr-mode:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.vr-mode:has(input:checked) .vr-mode-check{background:var(--accent);border-color:var(--accent);color:#fff}
.vr-mode:has(input:checked) .vr-mode-ico{background:var(--accent);color:#fff}
.vr-addons{display:flex;gap:8px;flex-wrap:wrap}.vr-addon{position:relative}.vr-addon input{position:absolute;opacity:0}.vr-addon span{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1.5px solid var(--line);border-radius:999px;cursor:pointer;font-weight:600;font-size:13px;color:var(--ink)!important;background:var(--surface)}.vr-addon span svg{color:var(--muted)}.vr-addon:has(input:checked) span svg{color:var(--accent)}
.vr-addon:has(input:checked) span{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)!important}
@media (max-width:820px){.vr-modes{grid-template-columns:1fr}}

/* 4.71.0: ärenden från AI Receptionist */
.chan-chip.ch-voice,.conv .chan-chip.ch-voice,.conv.unread .chan-chip.ch-voice{background:#2C0E3D!important;color:#F2FAA3!important;border-color:#2C0E3D!important}.chan-chip.ch-voice svg{color:#F2FAA3}
.thread-chan.voice{color:var(--accent);font-weight:650}

/* ── 4.73.0: Nästa betalning ─────────────────────────────────────────────── */
.nb-card{margin-bottom:16px;overflow:hidden;padding:0}
.nb-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-end;padding:20px 22px;background:linear-gradient(120deg,#2C0E3D,#5B2A86);color:#fff}
.nb-kicker{display:block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#C8A8F2;font-weight:700}
.nb-total{display:block;font-family:"Bricolage Grotesque",Inter,ui-sans-serif,system-ui,sans-serif;font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-top:4px;color:#F2FAA3}
.nb-head small{color:#E5D8F7;font-size:12.5px}
.nb-dates{display:grid;gap:6px;font-size:12.5px;color:#E5D8F7}.nb-dates span{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);border-radius:999px;padding:5px 11px}.nb-dates b{color:#fff}
.nb-rows{padding:8px 22px 4px}
.nb-row{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.nb-ic{width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none}
.nb-what{flex:1;min-width:0;display:grid;gap:5px}.nb-what b{font-size:14px}.nb-what small{color:var(--muted);font-size:12.5px}
.nb-calc{font-weight:600;color:var(--ink)!important}
.nb-amt{font-weight:800;font-size:15px;white-space:nowrap;padding-top:6px}.nb-amt.extra{color:#B7791F}
.nb-meter{display:grid;gap:4px;max-width:420px}.nb-meter i{display:block;height:6px;border-radius:999px;background:var(--hover);overflow:hidden}.nb-meter em{display:block;height:100%;background:var(--accent);border-radius:999px}.nb-meter em.near{background:#E9A23B}.nb-meter em.over{background:#E9A23B}
.nb-meter small b{color:#B7791F}
.nb-sum{display:flex;justify-content:space-between;padding:8px 0;font-size:13.5px;color:var(--muted)}.nb-sum b{color:var(--ink)}
.nb-sum.total{border-top:2px solid var(--ink);margin-top:4px;padding-top:12px;font-size:15px;color:var(--ink);font-weight:700}.nb-sum.total b{font-size:18px}
.nb-note{margin:0;padding:12px 22px 16px;font-size:12.5px;color:var(--muted);display:flex;gap:6px;align-items:flex-start}
@media (max-width:640px){.nb-total{font-size:28px}.nb-head{padding:16px}.nb-rows{padding:4px 16px}.nb-note{padding:10px 16px 14px}}
.nb-note.nb-settled{padding-bottom:0;color:var(--ink-2)}.nb-note.nb-settled a{font-weight:600}

/* 4.73.0: ärendekortet från AI Receptionist i full bredd, svaren under som en prydlig chatt */
.thread-scroll .msg.bf-card-msg,.thread-scroll.is-chat .msg.bf-card-msg,.msg.bf-card-msg{max-width:100%!important;width:100%!important;align-self:stretch!important;margin-left:0!important;margin-right:0!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
.thread-scroll .msg.bf-card-msg .body,.thread-scroll .msg.bf-card-msg .bubble,.thread-scroll .msg.bf-card-msg .bubble.html,.msg.bf-card-msg .body,.msg.bf-card-msg .bubble{max-width:none!important;width:100%!important;flex:1 1 auto!important;background:transparent!important;border:0!important;padding:0!important}
.msg.bf-card-msg .avatar,.msg.bf-card-msg .msg-avatar{display:none}
.thread-scroll .msg.bf-card-msg iframe,.msg.bf-card-msg iframe{width:100%!important;max-width:none!important}
.msg.bf-card-msg + .msg, .msg.bf-card-msg ~ .msg{margin-top:4px}
.msg.bf-card-msg .mail-actions{display:none!important}

/* ─── 4.74.0: en sökning på dator ─────────────────────────────────────
   Toppfältet söker i hela arbetsytan. Listans eget sökfält visas bara i mobilen,
   där toppfältet saknas. Träfflistan får en tydlig ”Rensa”. */
.search-head .search-clear { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); text-decoration: none; padding: 2px 6px; border-radius: var(--r-sm); }
.search-head .search-clear:hover { background: var(--hover); color: var(--ink); }
.palette-item.palette-all .palette-title { font-weight: 600; }

/* ─── 4.74.0: prisförslag i högerpanelen (bara för teamet) ─────────────
   Ett lugnt kort under kundens namn. Huvudsiffran är det viktiga – den får accentens
   mjuka yta; resten är tunna rader i panelens egen stil. */
.details .price-advice h4 { align-items: center; }
.price-advice .pa-private { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 1px 6px; letter-spacing: 0; }
.price-advice .pa-main { background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r-lg); padding: 10px 12px; margin-bottom: 8px; }
.price-advice .pa-big { font-size: 21px; font-weight: 650; color: var(--ink); line-height: 1.15; letter-spacing: -.01em; }
.price-advice .pa-what { font-size: 12px; color: var(--muted); margin-top: 2px; }
.price-advice .pa-kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0 0 8px; font-size: 12.5px; }
.price-advice .pa-kv dt { color: var(--muted); }
.price-advice .pa-kv dd { margin: 0; text-align: right; color: var(--ink-2); }
.price-advice .pa-lines { list-style: none; margin: 0 0 8px; padding: 0; border-top: 1px solid var(--line); }
.price-advice .pa-lines li { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.price-advice .pa-lines li b { font-weight: 600; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.price-advice .pa-lines li small { display: block; color: var(--faint); font-size: 11.5px; margin-top: 2px; line-height: 1.4; overflow-wrap: anywhere; }
.price-advice .pa-note { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--faint); }
/* Bekräftelsen till kunden efter ett samtal – samma kort som systemmejl, men med telefonen som märke */
.thread-scroll article.msg.confirm-msg .sysmail-badge svg { width: 11px; height: 11px; }

/* ─── 4.75.0: Leads under AI Receptionist ──────────────────────────────
   Front-anda: vita kort, tunna linjer, en färgprick per status – aldrig färgade ytor.
   Tavlan får hela bredden; en öppen lead visas i en panel till höger. */
.vr-leads .vr-hero { margin-bottom: 14px; }
.ld, .ld-drawer { --ld-ny: var(--accent); --ld-kontaktas: var(--saffron); --ld-offert: var(--blue); --ld-bokad: var(--green); --ld-ej_nadd: var(--faint); --ld-ej_intresserad: var(--red); }
.ld-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ld-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ld-filters select.input { width: auto; max-width: 220px; }
.ld-search { position: relative; display: inline-flex; align-items: center; }
.ld-search svg { position: absolute; left: 9px; color: var(--faint); pointer-events: none; }
.ld-search .input { padding-left: 29px; width: 230px; }
.ld-views.seg a { padding: 5px 10px; }
.ld-views.seg a.on { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.ld-hint { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; font-size: 12.5px; }
.ld-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); }
.ld-pill.on { color: var(--ink-2); border-color: var(--accent-line); background: var(--accent-soft); }
.ld-pill.on svg { color: var(--accent); }
/* Tavlan */
.ld-board { display: grid; grid-template-columns: repeat(6, minmax(165px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 6px; align-items: start; }
.ld-col { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); min-width: 0; display: flex; flex-direction: column; max-height: calc(100vh - 290px); }
.ld-col > header { display: flex; align-items: center; gap: 6px; padding: 9px 10px 7px; font-size: 12.5px; }
.ld-col > header b { font-weight: 600; color: var(--ink); }
.ld-col-ico { width: 20px; height: 20px; border-radius: 6px; display: inline-grid; place-items: center; background: var(--surface); border: 1px solid var(--line); }
.ld-col.st-ny .ld-col-ico { color: var(--ld-ny); } .ld-col.st-kontaktas .ld-col-ico { color: var(--ld-kontaktas); } .ld-col.st-offert .ld-col-ico { color: var(--ld-offert); }
.ld-col.st-bokad .ld-col-ico { color: var(--ld-bokad); } .ld-col.st-ej_nadd .ld-col-ico { color: var(--ld-ej_nadd); } .ld-col.st-ej_intresserad .ld-col-ico { color: var(--ld-ej_intresserad); }
.ld-count { margin-left: auto; font-size: 11.5px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; line-height: 18px; font-variant-numeric: tabular-nums; }
.ld-cards { display: flex; flex-direction: column; gap: 7px; padding: 2px 8px 10px; overflow-y: auto; min-height: 70px; border-radius: 0 0 var(--r-lg) var(--r-lg); transition: background .12s; }
.ld-cards.over { background: var(--accent-soft); }
.ld-col-empty { font-size: 12px; color: var(--faint); text-align: center; padding: 16px 0; border: 1px dashed var(--line-strong); border-radius: var(--r); }
.ld-card { display: flex; flex-direction: column; gap: 5px; padding: 10px 11px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); color: inherit; text-decoration: none; cursor: grab; }
.ld-card:hover { border-color: var(--line-strong); }
.ld-card.on { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line); }
.ld-card.dragging { opacity: .5; }
.ld-card-top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ld-card-top b { font-weight: 600; font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-av { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10.5px; font-weight: 600; color: var(--ink-2); background: var(--hover); border: 1px solid var(--line); }
.ld-av.lg { width: 40px; height: 40px; font-size: 14px; }
.ld-service { font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.ld-meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ld-src, .ld-list, .ld-att { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 5px; line-height: 17px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-src.src-chatt { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.ld-next, .ld-last { font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; line-height: 1.35; }
.ld-last { display: block; color: var(--faint); overflow-wrap: anywhere; }
.ld-next.live { color: var(--green); font-weight: 600; }
.ld-next.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: ldPulse 1.4s ease-in-out infinite; }
@keyframes ldPulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ld-next.live i { animation: none; } }
/* Listan */
.ld-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.ld-table { width: 100%; margin: 0; }
.ld-table th { font-size: 11.5px; font-weight: 600; color: var(--faint); white-space: nowrap; }
.ld-table td { vertical-align: middle; font-size: 13px; }
.ld-table tr.on td { background: var(--accent-soft); }
.ld-ck { width: 34px; } .ld-act { width: 1%; white-space: nowrap; text-align: right; }
.ld-person { display: flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; min-width: 0; }
.ld-person b { display: block; font-weight: 600; color: var(--ink); } .ld-person small { display: block; color: var(--muted); font-size: 12px; }
.ld-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.ld-badge svg, .ld-step svg { color: var(--ld-c, var(--muted)); }
.st-ny { --ld-c: var(--ld-ny); } .st-kontaktas { --ld-c: var(--ld-kontaktas); } .st-offert { --ld-c: var(--ld-offert); } .st-bokad { --ld-c: var(--ld-bokad); } .st-ej_nadd { --ld-c: var(--ld-ej_nadd); } .st-ej_intresserad { --ld-c: var(--ld-ej_intresserad); }
.ld-nextcell { max-width: 280px; }
.ld-selbar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 8px; border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: var(--r-lg); font-size: 13px; }
.ld-selbar[hidden] { display: none; }
/* Tomt läge */
.ld-empty { text-align: center; padding: 48px 20px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--surface); }
.ld-empty-ico { width: 52px; height: 52px; border-radius: 14px; display: inline-grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 10px; }
.ld-empty h3 { margin: 0 0 6px; font-size: 15px; }
.ld-empty p { max-width: 520px; margin: 0 auto 16px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
/* Panelen för en öppen lead */
.ld-drawer { position: fixed; top: 8px; right: 8px; bottom: 8px; width: min(440px, calc(100vw - 16px)); z-index: 60; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; }
.ld-dr-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px 16px; border-bottom: 1px solid var(--line); }
.ld-dr-title { min-width: 0; flex: 1; } .ld-dr-title h2 { margin: 0; font-size: 15px; font-weight: 600; } .ld-dr-title small { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.ld-dr-body { overflow-y: auto; padding: 14px 16px 22px; }
.ld-dr-body h4 { margin: 18px 0 8px; font-size: 11.5px; color: var(--faint); font-weight: 600; letter-spacing: .02em; }
.ld-steps { display: flex; flex-wrap: wrap; gap: 5px; }
.ld-step { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 12px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.ld-step:hover { background: var(--hover); }
.ld-step.on { border-color: var(--ld-c); box-shadow: inset 0 0 0 1px var(--ld-c); color: var(--ink); font-weight: 600; }
.ld-dr-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 4px; }
.ld-dr-actions form { display: contents; }
.ld-note { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); margin: 6px 0 0; }
.ld-kv, .ld-facts { display: grid; grid-template-columns: 112px 1fr; gap: 5px 12px; margin: 14px 0 0; font-size: 13px; }
.ld-kv dt, .ld-facts dt { color: var(--muted); } .ld-kv dd, .ld-facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.ld-kv dd a { color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.ld-facts { margin: 0; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); }
.ld-price { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: var(--r-lg); display: grid; gap: 2px; }
.ld-price > span { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); font-weight: 600; } .ld-price > span small { font-weight: 500; }
.ld-price b { font-size: 19px; font-weight: 650; color: var(--ink); } .ld-price > small { font-size: 12px; color: var(--muted); }
.ld-calls { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ld-calls li { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); font-size: 12.5px; }
.ld-calls a { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); text-decoration: none; } .ld-calls p { margin: 4px 0 0; color: var(--muted); line-height: 1.45; }
.ld-timeline { list-style: none; margin: 0; padding: 0; }
.ld-timeline li { display: flex; gap: 9px; padding: 0 0 11px; position: relative; }
.ld-timeline li:not(:last-child)::before { content: ''; position: absolute; left: 10px; top: 22px; bottom: 0; width: 1px; background: var(--line); }
.ld-ev-ico { flex: none; width: 21px; height: 21px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); }
.ld-timeline .ev-resultat .ld-ev-ico, .ld-timeline .ev-samtal .ld-ev-ico { color: var(--accent); }
.ld-timeline .ev-fel .ld-ev-ico { color: var(--red); }
.ld-timeline p { margin: 1px 0 1px; font-size: 13px; color: var(--ink-2); line-height: 1.45; overflow-wrap: anywhere; } .ld-timeline small { color: var(--faint); font-size: 11.5px; }
.ld-noteform { display: flex; gap: 6px; align-items: flex-end; margin-top: 4px; } .ld-noteform textarea { flex: 1; min-height: 38px; resize: vertical; }
.ld-edit { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; } .ld-edit summary { cursor: pointer; color: var(--muted); font-size: 12.5px; display: inline-flex; align-items: center; gap: 5px; }
.ld-edit form { margin-top: 10px; }
.ld-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; cursor: pointer; } .ld-check input { margin-top: 3px; }
.ld-check b, .ld-check small { display: block; } .ld-check small { color: var(--muted); font-size: 12px; margin-top: 2px; line-height: 1.45; }
.ld-rows { font-family: var(--mono); font-size: 12.5px; }
@media (max-width: 760px) {
  .ld-search .input { width: 100%; } .ld-search { flex: 1 1 100%; } .ld-filters { width: 100%; }
  .ld-bar .btn, .ld-dr-actions .btn, .ld-step { min-height: 40px; } .ld-bar .btn.icon { min-width: 40px; }
  .ld-board { grid-template-columns: repeat(6, 78vw); scroll-snap-type: x mandatory; } .ld-col { scroll-snap-align: start; max-height: none; }
  .ld-drawer { top: 0; right: 0; bottom: 58px; width: 100vw; border-radius: 0; }
  .ld-kv, .ld-facts { grid-template-columns: 96px 1fr; }
}

/* 4.75.1: ett svar utan ord i utskriften (hördes som tystnad i samtalet) */
.vr-msg .vr-msg-silent { display: flex; gap: 6px; align-items: flex-start; color: var(--muted); font-style: italic; font-size: 12.5px; }
.vr-msg .vr-msg-silent svg { flex: none; margin-top: 2px; color: var(--saffron); }

/* ─── 4.76.0: Social – samma lugna stil som resten av appen ──────────────
   Ljus sidomeny som inkorgen (förut mörklila med gula ikoner), hela bredden
   (förut krympte sidan till innehållet: .so-wrap saknade flex: 1 i .frame),
   och i mobilen flikar överst i stället för menyn. */
.so-wrap { flex: 1; width: 100%; min-width: 0; background: var(--surface); }
.so-side2.side { background: var(--surface-2); border-right: 1px solid var(--line); color: var(--ink); }
.so-side2 .so-nav2 { display: grid; gap: 1px; padding: 0 8px; }
.so-side2 .so-nav2 .nav-item .i { color: var(--muted); }
.so-side2 .so-nav2 .nav-item.on .i { color: var(--ink); }
.so-side-sec { margin: 18px 16px 6px; font-size: 11.5px; font-weight: 600; color: var(--faint); }
.so-acct2 { margin: 0 8px; }
.so-acct2 .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-acct2 .so-ok { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex: none; }
.so-acct2.add { color: var(--muted); }
.so-tabs { display: none; }
.so-main { flex: 1; min-width: 0; padding: 22px 28px 48px; background: var(--surface); }
.so-head2 { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 18px; }
.so-head2 h1 { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -.01em; color: var(--ink); }
.so-head2 p { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; max-width: 640px; }
/* Märken: officiell fil eller neutral förkortning */
.brand-logo { object-fit: contain; flex: none; vertical-align: middle; }
.brand-mono { --s: 16px; display: inline-grid; place-items: center; flex: none; width: var(--s); height: var(--s); border-radius: calc(var(--s) * .28); background: var(--hover); color: var(--ink-2); border: 1px solid var(--line); font-size: max(7px, calc(var(--s) * .42)); font-weight: 650; letter-spacing: .02em; line-height: 1; vertical-align: middle; }
/* Konton */
.so-notice { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r-lg); margin-bottom: 16px; }
.so-notice-ic { flex: none; width: 30px; height: 30px; border-radius: var(--r); display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.so-notice b { font-size: 13.5px; color: var(--ink); } .so-notice p { margin: 3px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; max-width: 760px; }
.so-notice > div { flex: 1; min-width: 0; } .so-notice .btn { flex: none; }
.soa-list { display: grid; gap: 10px; }
.soa { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.soa-main { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.soa-logo { flex: none; width: 44px; height: 44px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); }
.soa-text { flex: 1; min-width: 0; } .soa-text h2 { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--ink); } .soa-text p { margin: 3px 0 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.soa-act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.soa-accts { list-style: none; margin: 0; padding: 4px 16px 10px 74px; border-top: 1px solid var(--line); }
.soa-accts li { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 13px; border-bottom: 1px solid var(--line); }
.soa-accts li:last-child { border-bottom: 0; }
.soa-accts .muted { font-size: 12.5px; }
.so-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; } .so-dot.on { background: var(--green); }
.so-state { font-size: 12px; color: var(--muted); }
.so-guide { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0 16px; background: var(--surface); }
.so-guide summary { cursor: pointer; padding: 13px 0; font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 8px; color: var(--ink); }
.so-guide summary .i { color: var(--muted); }
.so-guide ol { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 8px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; max-width: 820px; }
.so-soon { margin-top: 22px; } .so-soon h3 { margin: 0 0 8px; font-size: 11.5px; font-weight: 600; color: var(--faint); }
.so-soon > div { display: flex; gap: 8px; flex-wrap: wrap; }
.so-soon-item { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); font-size: 13px; color: var(--muted); }
.so-soon-item small { color: var(--faint); }
/* Flödesredigeraren */
.so-flowpage .so-main.sof { padding: 0; display: flex; flex-direction: column; height: calc(100vh - 54px); min-height: 520px; }
.sof-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.sof-title { min-width: 0; display: grid; } .sof-name { border: 0; background: transparent; font: inherit; font-size: 16px; font-weight: 650; color: var(--ink); padding: 2px 4px; border-radius: var(--r-sm); width: min(420px, 50vw); }
.sof-name:hover, .sof-name:focus { background: var(--hover); outline: none; } .sof-title small { color: var(--muted); font-size: 12px; padding-left: 4px; } .sof-dirty { color: var(--saffron); }
.sof-switch { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.sof-switch input { position: absolute; opacity: 0; } .sof-switch i { width: 30px; height: 18px; border-radius: 999px; background: var(--line-strong); position: relative; transition: background .15s; }
.sof-switch i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s; }
.sof-switch input:checked + i { background: var(--green); } .sof-switch input:checked + i::after { transform: translateX(12px); }
.sof-switch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.sof-head form { display: contents; }
.sof-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 340px; }
.sof-canvas { position: relative; overflow: hidden; background-color: var(--surface-2); background-image: radial-gradient(var(--line-strong) 1px, transparent 1px); background-size: 20px 20px; cursor: grab; touch-action: none; user-select: none; }
.sof-canvas.grabbing, .sof-canvas.grabbing * { cursor: grabbing; }
.sof-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.sof-edges { position: absolute; overflow: visible; pointer-events: none; }
.sof-edges path { fill: none; stroke: var(--line-strong); stroke-width: 1.6; } .sof-edges path.off { stroke-dasharray: 4 5; opacity: .6; }
.sof-edges text { font-size: 11px; font-weight: 600; fill: var(--muted); font-family: inherit; }
.sof-node { position: absolute; left: 0; top: 0; width: 264px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 1px 2px rgba(0, 0, 0, .04); cursor: pointer; }
.sof-node:hover { border-color: var(--line-strong); }
.sof-node.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.sof-nh { display: flex; align-items: center; gap: 8px; padding: 9px 12px 7px; cursor: grab; }
.sof-nh b { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.sof-ic { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); flex: none; }
.sof-node.trig .sof-ic { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.sof-nb { padding: 0 12px 11px; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.sof-nb p { margin: 0 0 4px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sof-strong { font-weight: 600; color: var(--ink); } .sof-muted { color: var(--faint); font-size: 12.5px; }
.sof-chips, .sof-btns { display: flex !important; flex-wrap: wrap; gap: 4px; -webkit-line-clamp: unset !important; }
.sof-chips span, .sof-btns span { font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); }
.sof-btns span { border-radius: var(--r-sm); }
.sof-n { display: block; font-size: 11px; color: var(--faint); margin-top: 4px; }
.sof-port { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--line-strong); top: 26px; }
.sof-port.in { left: -5px; } .sof-port.out { right: -5px; }
.sof-node.two .sof-port.out { display: none; } .sof-node.trig .sof-port.in { display: none; }
.sof-add { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 14px 0 10px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--surface); color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; }
.sof-add span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 17px; line-height: 1; }
.sof-add:hover { border-color: var(--accent-line); color: var(--ink); }
.sof-add.off span { background: var(--line-strong); } .sof-add.off { opacity: .75; }
.sof-tools { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 2px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); font-size: 12px; color: var(--muted); }
.sof-tools span { min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.sof-pal { position: absolute; z-index: 5; width: 230px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); display: grid; gap: 1px; }
.sof-pal b { font-size: 11.5px; color: var(--faint); font-weight: 600; padding: 4px 8px 6px; }
.sof-pal button { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border: 0; background: none; border-radius: var(--r-sm); font: inherit; font-size: 13px; color: var(--ink); text-align: left; cursor: pointer; }
.sof-pal button:hover { background: var(--hover); } .sof-pal button .i { color: var(--muted); }
.sof-panel { position: relative; border-left: 1px solid var(--line); background: var(--surface); overflow-y: auto; padding: 16px; display: grid; align-content: start; gap: 12px; }
.sof-ph { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.sof-ph b { display: block; font-size: 14px; color: var(--ink); } .sof-ph small { color: var(--muted); font-size: 12.5px; }
.sof-panel .field { margin: 0; } .sof-panel textarea { resize: vertical; min-height: 110px; }
.sof-btnin { display: grid; gap: 6px; }
.sof-pact { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 4px; }
.sof-tip { margin: 6px 0 0; font-size: 12px; color: var(--faint); line-height: 1.5; }
.sof-close { display: none; position: absolute; right: 10px; top: 10px; font-size: 18px; }
@media (max-width: 1100px) { .sof-body { grid-template-columns: 1fr 300px; } }
@media (max-width: 760px) {
  .so-wrap { flex-direction: column; }
  .so-side2.side { display: none; }
  .so-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--surface); scrollbar-width: none; }
  .so-tabs a { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: var(--r); font-size: 13.5px; color: var(--ink-2); }
  .so-tabs a.on { background: var(--active); color: var(--ink); font-weight: 560; }
  .so-main { padding: 16px 14px 90px; }
  .soa-main { flex-wrap: wrap; } .soa-act { width: 100%; justify-content: stretch; } .soa-act .btn { flex: 1; min-height: 40px; justify-content: center; }
  .soa-accts { padding-left: 16px; }
  .so-notice { flex-wrap: wrap; } .so-notice .btn { width: 100%; min-height: 40px; justify-content: center; }
  .so-flowpage .so-main.sof { height: calc(100vh - 120px); }
  .sof-head { flex-wrap: wrap; } .sof-name { width: 60vw; }
  .sof-body { grid-template-columns: 1fr; }
  .sof-panel { position: fixed; left: 0; right: 0; bottom: 0; max-height: 72vh; z-index: 70; border: 0; border-top: 1px solid var(--line); border-radius: 14px 14px 0 0; box-shadow: var(--shadow-pop); transform: translateY(105%); transition: transform .2s; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .sof-panel.open { transform: none; }
  .sof-close { display: block; }
  .sof-tools .btn { min-height: 36px; }
}
.so-dot.err { background: var(--saffron); }
/* 4.76.0: plattformsmärken i kalendern utan egna färger (förut färgverlopp per plattform) */
.so-pf, .so-pf.instagram, .so-pf.facebook, .so-pf.linkedin, .so-pf.tiktok { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.sof-w { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 500; color: var(--saffron); white-space: nowrap; }
.sof-add small { white-space: nowrap; }
.soa-logo .brand-mono { border: 0; background: transparent; font-size: 13px; }
@media (max-width: 760px) { .sof-panel { bottom: calc(58px + env(safe-area-inset-bottom, 0px)); padding-bottom: 16px; max-height: calc(72vh - 58px); } }

/* ─── 4.77.0: telefonens sidomeny – bredare, aldrig vågrätt scroll ───────
   Förut 208 px: underrubrikerna sköt ut texten och gav rullningslister åt båda hållen. */
.frame > .voice-side, .voice-side.side { width: 264px; }
.voice-side .side-scroll { overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; }
.voice-side .voice-nav a, .voice-side .voice-nav .nav-item { min-width: 0; }
.voice-side .voice-nav a > span, .voice-side .voice-nav a > div { min-width: 0; overflow: hidden; }
.voice-side .voice-nav small, .voice-side .voice-nav .sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voice-side .vr-rec, .voice-side .vr-rec-t { min-width: 0; }
.voice-side .vr-rec-t b, .voice-side .vr-rec-t small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voice-side .voice-nav .nav-item .label { flex: 1; min-width: 0; overflow: hidden; }
.voice-side .voice-nav .nav-item .label small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 4.77.0: systemadministratörens fält i ett företags inställningar */
.ai-admin-box { border: 1px dashed var(--line-strong); border-radius: var(--r-lg); padding: 12px 14px; background: var(--surface-2); }
.ai-admin-head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 13px; } .ai-admin-head .i { color: var(--muted); }

/* ─── 4.77.0: telefonens flöden över hela skärmen (som Shopify Flow) ──────
   Samma yta som Social-automationerna: rutor som dras fritt, linjer som följer med,
   ”+” på varje gren och en panel med inställningar till höger. */
html.vff-open, html.vff-open body { overflow: hidden; }
.vff { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; background: var(--surface); }
.vff-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); border-bottom: 1px solid var(--line); background: var(--surface); }
.vff-crumb { font-size: 13px; color: var(--muted); }
.vff-crumb::after { content: '/'; margin-left: 10px; color: var(--faint); }
.vff-name { border: 0; background: transparent; font: inherit; font-size: 15.5px; font-weight: 650; color: var(--ink); padding: 4px 6px; border-radius: var(--r-sm); width: min(420px, 40vw); }
.vff-name:hover, .vff-name:focus { background: var(--hover); outline: none; }
.vff-dirty { font-size: 12px; color: var(--saffron); } .vff-stat { font-size: 12.5px; color: var(--muted); }
.vff-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 360px; }
.vff-kind { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.vff-node .sof-nb .sof-strong { font-size: 13.5px; }
.vff-node.trig .sof-ic { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.vff-node.cond .sof-nb { padding-bottom: 46px; }
.vff-node.cond .sof-ic { color: var(--saffron); }
.vff-out { position: absolute; right: 12px; font-size: 11.5px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.vff-out::after { content: ''; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--surface); margin-right: -17px; }
.vff-out.yes { bottom: 27px; } .vff-out.no { bottom: 7px; }
.vff-node.cond .sof-port.out { display: none; }
.vff-node:not(.cond) .sof-port.out, .vff-node .sof-port.out { display: block; }
.vff-node.cond .sof-port.out { display: none; }
.vff-node.trig .sof-port.in { display: none; }
.vff-node:not(.cond)::after { content: ''; position: absolute; right: -5px; top: 26px; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--surface); }
.vff-pal { max-height: 420px; overflow-y: auto; width: 250px; }
.vff-pal b { margin-top: 4px; }
@media (max-width: 760px) {
  .vff-crumb, .vff-stat { display: none; }
  .vff-head { flex-wrap: wrap; } .vff-name { width: 52vw; }
  .vff-body { grid-template-columns: 1fr; }
  .vff .sof-panel { bottom: 0; max-height: 72vh; }
}

/* ─── 4.77.0: API och webhooks ─────────────────────────────────────────── */
.ap-page { max-width: 1040px; }
.ap-card { margin-bottom: 16px; } .ap-card h3 { display: flex; align-items: center; gap: 8px; } .ap-card h3 .i { color: var(--muted); }
.ap-card code { font-family: var(--mono); font-size: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 1px 5px; overflow-wrap: anywhere; }
.ap-once { padding: 12px 14px; border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: var(--r-lg); display: grid; gap: 8px; font-size: 13px; }
.ap-copy { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .ap-copy code { font-size: 13px; padding: 6px 9px; flex: 1; min-width: 0; }
.ap-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
.ap-table { margin: 0; width: 100%; } .ap-table td { vertical-align: middle; font-size: 13px; } .ap-table td small { display: block; }
.ap-act { text-align: right; width: 1%; white-space: nowrap; } .ap-act form { display: inline; }
.ap-inline { display: flex; gap: 8px; flex-wrap: wrap; } .ap-inline .input { width: auto; flex: 1; min-width: 180px; } .ap-inline select.input { flex: 0 0 auto; }
.ap-doc summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--ink-2); padding: 4px 0; }
.ap-endpoints td { font-size: 13px; vertical-align: top; } .ap-endpoints td:first-child { white-space: nowrap; width: 1%; }
.ap-hook { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); }
.ap-hook-main { flex: 1; min-width: 0; display: grid; gap: 3px; font-size: 13px; } .ap-hook-main code { justify-self: start; }
.ap-hook-act { display: flex; gap: 4px; flex-wrap: wrap; } .ap-hook-act form { display: inline; }
.ap-newhook { padding: 14px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); display: grid; gap: 12px; }
.ap-events { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.ap-ev { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; font-size: 13px; }
.ap-ev span { display: grid; gap: 2px; } .ap-ev code { justify-self: start; font-size: 11px; }
.ap-st { font-size: 12px; color: var(--muted); } .ap-st.ok { color: var(--green); } .ap-st.err { color: var(--red); }
@media (max-width: 760px) { .ap-hook { flex-wrap: wrap; } .ap-hook-act { width: 100%; } .ap-hook-act .btn { min-height: 40px; } }
.ig-api { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin: 0 0 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: inherit; text-decoration: none; }
.ig-api:hover { border-color: var(--line-strong); }
.ig-api-ic { flex: none; width: 40px; height: 40px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); }
.ig-api > span:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 2px; } .ig-api b { font-size: 14px; color: var(--ink); } .ig-api small { color: var(--muted); font-size: 13px; line-height: 1.45; } .ig-api > .i { color: var(--faint); }

/* ─── 4.77.0: Teamchatt – lugnare och mer användbar ─────────────────────
   Sök i listan, hela teamet med närvaro, en informationspanel till höger
   (medlemmar, länkade ärenden, delade filer) och en välkomstsida med teamet. */
.tc-find { position: relative; margin: 0 12px 8px; display: flex; align-items: center; }
.tc-find .i { position: absolute; left: 9px; color: var(--faint); pointer-events: none; }
.tc-find input { width: 100%; height: 32px; padding: 0 10px 0 29px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font: inherit; font-size: 13px; color: var(--ink); }
.tc-find input:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.tc-side .side-label { display: flex; align-items: center; justify-content: space-between; }
.tc-side .side-label small { font-size: 11px; font-weight: 500; }
.tc-mate { margin: 0; }
.tc-mate .nav-item { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.tc-mate .label { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-mate .label small { display: block; font-size: 11.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; }
/* Tråden: lite mer luft och tydligare avsändare */
.tc-thread .thread-head h2 { font-size: 15px; }
.tc-scroll { padding: 18px 24px 8px; }
.tc-msg { padding: 5px 10px; gap: 12px; }
.tc-msg:hover { background: var(--hover); }
.tc-msg.mentioned { background: color-mix(in srgb, var(--saffron) 9%, transparent); box-shadow: inset 2px 0 0 var(--saffron); }
.tc-head b { font-weight: 620; color: var(--ink); }
.tc-head time { font-size: 11.5px; color: var(--faint); }
.tc-text { font-size: 14px; color: var(--ink-2); }
.tc-system span { background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: 12px; color: var(--muted); }
/* Informationspanelen */
.tc-info { display: none; width: 300px; flex: none; border-left: 1px solid var(--line); background: var(--surface); overflow-y: auto; padding: 0 16px 24px; }
.tc-info.open { display: block; }
.tc-info-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 14px 0 10px; background: var(--surface); border-bottom: 1px solid var(--line); font-size: 13.5px; }
.tc-info-hero { text-align: center; padding: 20px 0 14px; display: grid; justify-items: center; gap: 6px; }
.tc-info-hero h3 { margin: 4px 0 0; font-size: 16px; font-weight: 650; color: var(--ink); overflow-wrap: anywhere; }
.tc-group-ico.xl { width: 56px; height: 56px; border-radius: 16px; }
.tc-info-note { display: flex; align-items: center; gap: 7px; padding: 8px 10px; margin-bottom: 6px; border-radius: var(--r); background: color-mix(in srgb, var(--saffron) 12%, transparent); color: var(--ink-2); font-size: 12.5px; }
.tc-info section { padding: 14px 0 10px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.tc-info h4 { margin: 0 0 4px; font-size: 11.5px; font-weight: 600; color: var(--faint); display: flex; gap: 6px; }
.tc-info h4 small { font-weight: 500; }
.tc-info section > .btn { justify-self: start; }
.tc-info-person { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.tc-info-person > span:last-child { min-width: 0; display: grid; } .tc-info-person b { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-info-person small { color: var(--faint); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-info-link { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin: 0 -8px; border-radius: var(--r); color: var(--ink-2); text-decoration: none; font-size: 13px; }
.tc-info-link:hover { background: var(--hover); }
.tc-info-link span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-info-link small { color: var(--faint); font-size: 11.5px; flex: none; } .tc-info-link .i { color: var(--muted); flex: none; }
.tc-info-link code { font-family: var(--mono); font-size: 11.5px; padding: 1px 5px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); flex: none; }
.tc-st { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--faint); } .tc-st.st-open { background: var(--green); } .tc-st.st-pending { background: var(--saffron); }
.tc-info-btn[aria-pressed="true"] { background: var(--active); }
/* Välkomstsidan */
.tc-empty { display: flex; align-items: center; justify-content: center; overflow-y: auto; }
.tc-welcome { width: min(720px, 100%); padding: 40px 24px; text-align: center; display: grid; justify-items: center; gap: 10px; }
.tc-welcome-ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); }
.tc-welcome h2 { margin: 6px 0 0; font-size: 22px; font-weight: 650; letter-spacing: -.01em; color: var(--ink); }
.tc-welcome p { margin: 0; max-width: 520px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.tc-welcome-act { margin: 8px 0 14px; }
.tc-team { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tc-team-card { margin: 0; }
.tc-team-card button { width: 100%; display: grid; justify-items: center; gap: 4px; padding: 16px 10px 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); font: inherit; cursor: pointer; color: inherit; }
.tc-team-card button:hover { border-color: var(--line-strong); }
.tc-team-card b { font-size: 13.5px; color: var(--ink); margin-top: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-team-card small { font-size: 12px; color: var(--faint); }
.tc-team-go { margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--accent); }
@media (max-width: 1280px) { .tc-info.open { position: fixed; right: 8px; top: 8px; bottom: 8px; z-index: 66; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); } }
@media (max-width: 760px) {
  .tc-info.open { right: 0; top: 0; bottom: 58px; width: 100vw; border-radius: 0; }
  .tc-scroll { padding: 12px 12px 8px; }
  .tc-team { grid-template-columns: repeat(2, 1fr); }
  .tc-welcome { padding: 24px 16px 90px; }
}
.tc-mate .nav-item { height: auto; min-height: 40px; padding-top: 5px; padding-bottom: 5px; align-items: center; line-height: 1.3; }
.tc-mate .label small { margin-top: 1px; }

/* ─── 4.78.0: Automatisering – regler, omdömen och rapporter ─────────────
   Reglerna läses som en mening: NÄR → OM → GÖR, med lugna chip. */
.am-page { max-width: 1080px; }
.am-tabs { margin-bottom: 18px; }
.am-tabs a { display: inline-flex; align-items: center; gap: 6px; } .am-tabs a small { font-size: 11px; color: var(--faint); }
.am-list { display: grid; gap: 8px; margin-bottom: 14px; }
.am-rule { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.am-rule.off { opacity: .7; } .am-rule:hover { border-color: var(--line-strong); }
.am-rule form { display: contents; }
.am-rule-main { flex: 1; min-width: 0; display: grid; gap: 6px; color: inherit; text-decoration: none; }
.am-rule-main b { font-size: 14px; color: var(--ink); }
.am-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.am-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-chip.when { border-color: var(--accent-line); background: var(--accent-soft); color: var(--ink); } .am-chip.when .i { color: var(--accent); }
.am-arrow { color: var(--faint); font-size: 12px; }
.am-err { color: var(--red); }
.am-new { margin: 6px 0 22px; }
.am-h { font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 0 10px; }
.am-recipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.am-recipe { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: inherit; text-decoration: none; }
.am-recipe:hover { border-color: var(--accent-line); }
.am-recipe-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); margin-bottom: 4px; }
.am-recipe b { font-size: 13.5px; color: var(--ink); } .am-recipe small { font-size: 12px; color: var(--muted); }
/* Redigeraren */
.am-editor { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.am-ed-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.am-name { border: 0; background: transparent; font: inherit; font-size: 15.5px; font-weight: 650; color: var(--ink); padding: 4px 6px; border-radius: var(--r-sm); min-width: 0; flex: 1; max-width: 460px; }
.am-name:hover, .am-name:focus { background: var(--hover); outline: none; }
.am-steps { padding: 18px 18px 6px; display: grid; gap: 0; }
.am-step { display: flex; gap: 14px; position: relative; padding-bottom: 18px; }
.am-step:not(:last-child)::before { content: ''; position: absolute; left: 15px; top: 34px; bottom: 0; width: 2px; background: var(--line); }
.am-step-ic { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); }
.am-step-ic.when { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.am-step-body { flex: 1; min-width: 0; display: grid; gap: 8px; align-content: start; }
.am-step-body > .btn { justify-self: start; }
.am-step-t { font-size: 13.5px; color: var(--ink); } .am-step-t small { font-weight: 400; color: var(--faint); margin-left: 6px; }
.am-step-body > select.input { max-width: 380px; }
.am-rows { display: grid; gap: 6px; }
.am-row { display: grid; grid-template-columns: minmax(180px, 240px) 1fr auto; gap: 6px; align-items: start; }
.am-none { font-size: 12.5px; color: var(--faint); align-self: center; }
/* Omdömen och rapporter */
.am-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 14px; }
.am-stats > div { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); display: grid; gap: 2px; }
.am-stats small { font-size: 12px; color: var(--muted); } .am-stats b { font-size: 20px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.am-stats.in { margin: 0; }
.am-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; align-items: start; }
.am-card { margin: 0; }
.am-policy { display: flex; gap: 8px; margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; padding: 10px 12px; background: var(--surface-2); border-radius: var(--r); } .am-policy .i { flex: none; margin-top: 2px; }
.am-how { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 6px; font-size: 13.5px; color: var(--ink-2); }
.am-h4 { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--faint); }
.am-rev { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.am-rev > span:last-child { display: grid; gap: 1px; min-width: 0; } .am-rev em { color: var(--ink-2); font-size: 12.5px; overflow-wrap: anywhere; }
.am-score { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-weight: 650; background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.am-score.low { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }
.am-value { display: grid; grid-template-columns: 1.1fr 2fr; gap: 10px; margin-bottom: 14px; }
.am-value-main { padding: 16px 18px; border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: var(--r-lg); display: grid; gap: 4px; }
.am-value-main small { font-size: 12px; color: var(--muted); } .am-value-main b { font-size: 28px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; } .am-value-main span { font-size: 12.5px; color: var(--ink-2); }
.am-kv { display: grid; grid-template-columns: 110px 1fr; gap: 6px 10px; margin: 0; font-size: 13px; } .am-kv dt { color: var(--muted); } .am-kv dd { margin: 0; color: var(--ink-2); }
@media (max-width: 860px) { .am-grid, .am-value { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .am-row { grid-template-columns: 1fr auto; } .am-row > .am-val { grid-column: 1 / -1; grid-row: 2; }
  .am-rule { flex-wrap: wrap; } .am-ed-head { flex-wrap: wrap; }
  .am-tabs { overflow-x: auto; white-space: nowrap; }
}
/* 4.78.0: listan över automationer och mallgalleriet */
.am-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.am-list-head > div { display: grid; } .am-list-head b { font-size: 14px; color: var(--ink); } .am-list-head small { font-size: 12.5px; }
.am-empty { text-align: center; padding: 48px 20px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--surface); display: grid; justify-items: center; gap: 8px; }
.am-empty-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); }
.am-empty h3 { margin: 4px 0 0; font-size: 16px; } .am-empty p { max-width: 520px; margin: 0 0 8px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.am-gal-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.am-gal-head h2 { margin: 0; font-size: 17px; font-weight: 650; color: var(--ink); } .am-gal-head p { margin: 3px 0 0; font-size: 13px; max-width: 560px; }
.am-search { position: relative; display: flex; align-items: center; }
.am-search .i { position: absolute; left: 10px; color: var(--faint); pointer-events: none; }
.am-search input { height: 34px; width: 260px; padding: 0 10px 0 30px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font: inherit; font-size: 13px; color: var(--ink); }
.am-search input:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.am-gal { margin-bottom: 20px; }
.am-recipe { align-content: start; }
.am-recipe-flow { margin-top: 6px; font-size: 11.5px; color: var(--faint); }
.am-blank { border-style: dashed; } .am-blank .am-recipe-ic { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.am-hint { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: 13px; color: var(--ink-2); }
.am-hint .i { color: var(--saffron); flex: none; }
@media (max-width: 760px) { .am-search, .am-search input { width: 100%; } .am-list-head .btn { min-height: 40px; } }
@media (max-width: 760px) { .am-rule-main { flex: 1 1 100%; } .am-chip { white-space: normal; overflow-wrap: anywhere; } .am-list-head { flex-wrap: wrap; } }

/* ─── 4.79.0: sökfältet i listan (direktsökning) och träffarnas överblick ───── */
.list-search { position: relative; }
.list-search .ls-ico { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--faint, #9a9aa3); display: flex; pointer-events: none; }
.list-search .input { padding-left: 31px; padding-right: 30px; }
.list-search .input::-webkit-search-cancel-button { cursor: pointer; }
.list-search .ls-kbd { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font: 600 10.5px/1 var(--mono, ui-monospace, monospace); color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 2px 5px; background: var(--surface); pointer-events: none; }
.list-search .input:focus ~ .ls-kbd, .list-search .input:not(:placeholder-shown) ~ .ls-kbd { display: none; }
@media (max-width: 760px) { .list-search .ls-kbd { display: none; } }
.search-head { flex-direction: column; align-items: stretch; gap: 6px; border-bottom: 1px solid var(--line); padding: 8px 12px; }
.search-head .sh-row { display: flex; align-items: center; gap: 6px; }
.search-head .sh-row b { color: var(--ink); }
.search-head .sh-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-head .sh-chips .sh-btn { margin-left: auto; }
.search-head .sh-btn { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 12px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border: 0; border-radius: var(--r-sm); padding: 3px 8px; cursor: pointer; white-space: nowrap; }
.search-head .sh-btn:hover { filter: brightness(.96); }
.search-head .sh-btn[disabled] { opacity: .6; cursor: progress; }
.sh-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.sh-chips .sh-lbl { font-size: 11.5px; color: var(--muted); margin-right: 1px; }
.sh-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; font-size: 12px; color: var(--ink-2); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; background: var(--surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-chip .num { color: var(--muted); font-size: 11px; }
.sh-chip:hover { background: var(--hover); color: var(--ink); }
.sh-chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.sh-chip.on .num { color: inherit; }
.conv mark.hl { background: color-mix(in srgb, var(--saffron, #f5b800) 32%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }
.list-scroll.is-searching { opacity: .55; transition: opacity .15s; }

/* ─── 4.79.0: Kom igång-kortet syns tills allt är klart ──────────────────────
   Guiden öppnas av sig själv bara en gång. Därefter är kortet vägen tillbaka – därför
   egen färg (Blixtflows lila) i stället för ett vitt kort som smälter in i menyn. */
.sg-card.is-todo { position: relative; background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 72%, #2C0E3D) 100%); border-color: transparent; color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 28%, transparent); }
.sg-card.is-todo:hover { border-color: transparent; box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 36%, transparent); }
.sg-card.is-todo .sg-card-txt small, .sg-card.is-todo .sg-card-next { color: rgba(255, 255, 255, .82); }
.sg-card.is-todo .sg-card-chev, .sg-card.is-todo:hover .sg-card-chev { color: #fff; }
.sg-card.is-todo .sg-mini-bg { stroke: rgba(255, 255, 255, .28); }
.sg-card.is-todo .sg-mini-fg { stroke: #FDE68A; }
.sg-card.is-todo .sg-card-next b, .sg-card.is-todo .sg-card-next { font-weight: 500; }
.sg-card.is-todo::after { content: ""; position: absolute; top: 9px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: #FDE68A; box-shadow: 0 0 0 0 rgba(253, 230, 138, .7); animation: sgPing 2.4s ease-out infinite; }
@keyframes sgPing { 0% { box-shadow: 0 0 0 0 rgba(253, 230, 138, .7); } 70%, 100% { box-shadow: 0 0 0 7px rgba(253, 230, 138, 0); } }
@media (prefers-reduced-motion: reduce) { .sg-card.is-todo::after { animation: none; } }

/* 4.79.0: E-postmallar – långa namn bryts inte ut ur listan */
.mt-list, .mt-item, .mt-edit { min-width: 0; }
.mt-item b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 14px; }

/* ─── 4.80.0: Drift och felsökning ─────────────────────────────────────── */
.ops-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.ops-head > div:first-child { flex: 1; min-width: 260px; }
.ops-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.ops-status { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); margin-bottom: 12px; }
.ops-status b { font-size: 15px; } .ops-status small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.ops-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.ops-warn .ops-dot { background: #D97706; box-shadow: 0 0 0 4px #FEF3C7; } .ops-bad .ops-dot { background: var(--red); box-shadow: 0 0 0 4px var(--red-soft); animation: opsPulse 1.6s ease-in-out infinite; }
.ops-bad { border-color: color-mix(in srgb, var(--red) 35%, var(--line)); }
@keyframes opsPulse { 50% { box-shadow: 0 0 0 7px var(--red-soft); } }
.ops-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.ops-kpi { padding: 12px 14px; display: grid; gap: 2px; min-width: 0; }
.ops-kpi small { font-size: 12px; color: var(--muted); font-weight: 600; } .ops-kpi b { font-size: 19px; font-weight: 750; letter-spacing: -.01em; }
.ops-kpi b.ok { color: var(--green); } .ops-kpi b.bad { color: var(--red); } .ops-kpi b.warn { color: #B45309; }
.ops-kpi span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-sec { margin-bottom: 18px; } .ops-sec h2 { font-size: 14px; font-weight: 650; margin: 0 0 8px; color: var(--ink-2); }
.ops-empty { display: flex; gap: 12px; align-items: center; padding: 14px 16px; color: var(--green); } .ops-empty b { color: var(--ink); display: block; } .ops-empty small { color: var(--muted); }
.ops-f { display: flex; gap: 14px; align-items: flex-start; padding: 13px 16px; margin-bottom: 8px; border-left: 3px solid var(--line-strong); }
.ops-f-error { border-left-color: var(--red); } .ops-f-warn { border-left-color: #D97706; } .ops-f-info { border-left-color: var(--accent); }
.ops-f-main { flex: 1; min-width: 0; } .ops-f-main b { font-size: 13.5px; } .ops-f-main p { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }
.ops-manual { display: flex; gap: 6px; align-items: flex-start; color: var(--muted) !important; font-size: 12.5px !important; } .ops-manual span { font-family: var(--mono); font-size: 12px; word-break: break-word; }
.ops-f-act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 46%; }
.ops-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.ops-tbl { overflow: hidden; margin-bottom: 14px; } .ops-grid .ops-tbl { margin-bottom: 0; }
.ops-tbl .card-head { display: flex; align-items: center; gap: 10px; }
.ops-tbl .table td { vertical-align: top; font-size: 13px; } .ops-tbl .table td code { font-size: 12px; }
.ops-sub { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; } .ops-err { color: var(--red) !important; }
.ops-cut { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.ops-row-act { text-align: right; width: 1%; }
.ops-events { max-height: 420px; overflow: auto; }
.ops-ev { display: flex; gap: 10px; padding: 9px 16px; border-top: 1px solid var(--line); } .ops-ev i { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--accent); }
.ops-ev-warn i { background: #D97706; } .ops-ev-error i { background: var(--red); }
.ops-ev b { font-size: 13px; font-weight: 560; display: block; } .ops-ev small { display: block; font-size: 11.5px; color: var(--muted); } .ops-detail { white-space: pre-line; margin-top: 3px; }
.ops-filter { width: 180px; margin-left: auto; }
.ops-log { max-height: 420px; overflow: auto; font-family: var(--mono); font-size: 11.5px; }
.ops-ll { display: grid; grid-template-columns: 92px 46px 1fr; gap: 8px; padding: 5px 16px; border-top: 1px solid var(--line); }
.ops-ll time { color: var(--muted); } .ops-src { color: var(--faint); } .ops-txt { word-break: break-word; } .ops-ll-error .ops-txt { color: var(--red); }
.ops-ai { padding: 0; margin-bottom: 14px; border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.ops-ai-head { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-bottom: 1px solid var(--line); background: var(--accent-soft); }
.ops-ai-ic { color: var(--accent); display: flex; }
.ops-ai-body { padding: 12px 16px 16px; font-size: 13.5px; } .ops-ai-body p { margin: 0 0 8px; } .ops-ai-sum { font-size: 14px; font-weight: 560; }
.ops-ai-lbl { font-size: 11.5px !important; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; margin-top: 12px !important; }
.ops-ai-acts { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 6px; } .ops-ai-acts li span { margin-left: 8px; color: var(--ink-2); font-size: 13px; }
.ops-ai-man { margin: 0; padding-left: 18px; color: var(--ink-2); }
.ops-toast { position: fixed; right: 20px; bottom: 20px; z-index: 90; max-width: min(520px, calc(100vw - 32px)); padding: 12px 16px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 13px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.ops-toast.bad { background: var(--red); }
@media (max-width: 1000px) { .ops-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ops-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .ops-f { flex-direction: column; } .ops-f-act { max-width: none; justify-content: flex-start; } .ops-tools .btn { flex: 1; } .ops-filter { width: 120px; } .ops-ll { grid-template-columns: 1fr; gap: 0; } }
.ops-kpis > .card, .ops-grid > .card { margin: 0; }

/* ─── 4.81.0: Abonnemang i två kolumner, planerna på egen sida ─────────────── */
.ab-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.ab-head h1 { margin: 0; font-size: 24px; letter-spacing: -.01em; } .ab-head p { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }
.ab-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); gap: 18px; align-items: start; }
.ab-main, .ab-side { display: grid; gap: 16px; min-width: 0; }
.ab-main > .card, .ab-side > .card { margin: 0 !important; }
.ab-side { position: sticky; top: 12px; }
.ab-plan { padding: 18px; display: grid; gap: 14px; }
.ab-plan-top { display: flex; align-items: center; gap: 12px; }
.ab-plan-top > div { flex: 1; min-width: 0; } .ab-plan-top small { display: block; font-size: 12px; color: var(--muted); font-weight: 600; } .ab-plan-top b { font-size: 20px; letter-spacing: -.01em; }
.ab-plan-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.ab-kv { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.ab-kv > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ab-kv dt { font-size: 13px; color: var(--muted); } .ab-kv dd { margin: 0; text-align: right; font-weight: 650; font-size: 14px; }
.ab-kv dd small { display: block; font-weight: 400; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.ab-kv dd.ab-accent { color: var(--accent); font-size: 16px; }
.ab-plan-act { display: grid; gap: 8px; } .ab-plan-act .btn, .ab-plan-act form .btn { width: 100%; justify-content: center; }
.ab-cancel { text-align: center; margin-top: -4px; }
.ab-cancel .linkish { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ab-cancel .linkish:hover { color: var(--red); }
.ab-hint { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-2); display: flex; gap: 6px; align-items: center; }
.ab-foot { margin: 0; font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: flex-start; line-height: 1.5; }
@media (max-width: 980px) { .ab-grid { grid-template-columns: 1fr; } .ab-side { position: static; order: -1; } }
.bpl-back { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); text-decoration: none; margin-bottom: 10px; } .bpl-back:hover { color: var(--ink); }
.bpl-head { text-align: center; margin: 4px auto 22px; max-width: 640px; }
.bpl-head h1 { margin: 0; font-size: 26px; letter-spacing: -.015em; } .bpl-head p { margin: 6px 0 14px; color: var(--muted); font-size: 14px; }
.bpl-toggle { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); gap: 2px; }
.bpl-toggle button { border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.bpl-toggle button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.bpl-toggle em { font-style: normal; font-size: 11px; color: var(--green); margin-left: 4px; }
.bpl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; align-items: stretch; }
.bpl-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 18px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.bpl-card.pop { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .bpl-card.current { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.bpl-name { font-size: 16px; } .bpl-desc { margin: 0; font-size: 13px; color: var(--ink-2); min-height: 38px; }
.bpl-price { font-size: 28px; font-weight: 750; letter-spacing: -.02em; margin-top: 4px; } .bpl-price small { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.bpl-sub { display: block; font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-top: 2px; }
.bpl-grid[data-interval="month"] .bpl-price[data-show="year"], .bpl-grid[data-interval="year"] .bpl-price[data-show="month"] { display: none; }
.bpl-vat { font-size: 11.5px; color: var(--muted); margin-top: -4px; }
.bpl-card .btn { width: 100%; justify-content: center; margin: 4px 0 6px; }
.bpl-card ul { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 7px; font-size: 13px; }
.bpl-card li { display: flex; gap: 7px; align-items: flex-start; } .bpl-card li .i { color: var(--green); margin-top: 3px; flex: none; }
.bpl-faq { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 24px 0 14px; }
.bpl-faq b { font-size: 13.5px; } .bpl-faq p { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }
@media (max-width: 760px) { .bpl-faq { grid-template-columns: 1fr; } }

/* 4.82.0: Delat med – kollegor som fått just det här ärendet */
.shared-with { display: flex; flex-wrap: wrap; gap: 4px; }
.sw-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 4px 1px 2px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; }
.sw-x { display: inline; margin: 0; } .sw-x button { border: 0; background: none; padding: 0 1px; color: var(--muted); cursor: pointer; display: inline-flex; } .sw-x button:hover { color: var(--red); }

/* 4.82.0: formgivna mejl i mörkt läge – originalet på ett ljust papper i stället för en inverterad kopia */
iframe.bd-paper { background: #fff; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.06); }

/* ── 4.83.0: Webbplats – adminpanelen för den publika webbplatsen ─────────────────────────────────── */
.wb-page { max-width: 1240px; }
.wb-tabs { margin: 4px 0 18px; }
.wb-tabs a { display: inline-flex; align-items: center; gap: 6px; }
.wb-gate .card-body { padding: 28px; }
.wb-gate h2 { font-size: 16px; font-weight: 600; margin: 12px 0 6px; }
.wb-gate-ic { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.wb-gate-ic.bad { background: var(--red-soft); color: var(--red); }
.wb-hero { display: flex; gap: 24px; align-items: center; padding: 22px 24px; margin-bottom: 16px; }
.wb-hero-main { flex: 1; min-width: 0; }
.wb-hero h2 { font-size: 17px; font-weight: 600; margin: 8px 0 4px; letter-spacing: -.01em; }
.wb-hero p { margin: 0; }
.wb-hero-act { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.wb-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); padding: 3px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.wb-state.ok { color: var(--green); background: var(--green-soft); border-color: transparent; }
.wb-big { height: 40px; padding: 0 18px; font-size: 14px; border-radius: 10px; gap: 8px; }
.wb-big em, [data-wb-publish] em { font-style: normal; font-size: 11.5px; font-weight: 700; min-width: 20px; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent-ink) 22%, transparent); }
.wb-run, .wb-fail { margin: 10px 0 0 !important; font-size: 12.5px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.wb-fail { color: var(--red); }
.wb-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--accent-line); border-top-color: var(--accent); animation: wbspin .8s linear infinite; }
@keyframes wbspin { to { transform: rotate(360deg); } }
.wb-warn { margin-bottom: 14px; border-color: color-mix(in srgb, var(--saffron) 40%, var(--line)); background: var(--saffron-soft); }
.wb-warn .card-body { display: flex; gap: 10px; padding: 14px 18px; align-items: flex-start; color: var(--ink); }
.wb-warn .card-body > svg { color: var(--saffron); flex: none; margin-top: 2px; }
.wb-warn p { margin: 2px 0 0; color: var(--ink-2); font-size: 12.5px; }
.wb-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.wb-kpi { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wb-kpi small { color: var(--muted); font-size: 12px; font-weight: 550; }
.wb-kpi span { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.wb-num { font-size: 30px; font-weight: 650; letter-spacing: -.03em; line-height: 1.1; color: var(--ink); }
.wb-num i { font-style: normal; font-size: 14px; color: var(--faint); font-weight: 500; margin-left: 2px; }
.wb-num.ok, .wb-ring.ok, .wb-cnt.ok, .wb-side-score.ok { color: var(--green); }
.wb-num.warn, .wb-ring.warn, .wb-cnt.warn, .wb-side-score.warn { color: var(--saffron); }
.wb-num.bad, .wb-ring.bad, .wb-cnt.bad, .wb-side-score.bad { color: var(--red); }
.wb-spark { color: var(--accent); margin: 2px 0; }
.wb-grid2 { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.wb-todo { list-style: none; margin: 0; padding: 6px 0; }
.wb-todo li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; padding: 9px 18px; align-items: center; }
.wb-todo li + li { border-top: 1px solid var(--line); }
.wb-todo li a { color: var(--ink); text-decoration: none; min-width: 0; }
.wb-todo li a:hover b { text-decoration: underline; }
.wb-todo li small { grid-column: 2; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.wb-todo .wb-empty { display: flex; gap: 8px; color: var(--muted); }
.wb-dot { display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 6px; border-radius: 999px; font-size: 11.5px; font-weight: 650; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); grid-row: span 2; }
.wb-dot.ok { background: var(--green-soft); color: var(--green); border-color: transparent; }
.wb-dot.warn { background: var(--saffron-soft); color: var(--saffron); border-color: transparent; }
.wb-dot.bad { background: var(--red-soft); color: var(--red); border-color: transparent; }
.wb-dot.sm { min-width: 0; width: 8px; height: 8px; padding: 0; border: 0; background: var(--line-strong); }
.wb-dot.sm.ok { background: var(--green); } .wb-dot.sm.warn { background: var(--saffron); } .wb-dot.sm.bad { background: var(--red); }
.wb-lang { font-size: 10.5px; font-weight: 700; color: var(--muted); letter-spacing: .04em; border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.wb-kv { grid-template-columns: 90px minmax(0, 1fr); }
.wb-kv dd { white-space: normal; overflow-wrap: anywhere; }
.wb-code { font-family: var(--mono); font-size: 11.5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; color: var(--ink-2); overflow-wrap: anywhere; }
.wb-more { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.wb-more > summary { cursor: pointer; font-size: 13px; font-weight: 550; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.wb-legal-link { display: flex; gap: 6px; margin: 14px 0 0; font-size: 12px; color: var(--muted); }
.wb-legal-link svg { flex: none; margin-top: 2px; }
.wb-h3, .wb-law h3 { font-size: 13.5px; font-weight: 600; margin: 0 0 4px; display: flex; gap: 6px; align-items: center; }
.wb-law ul { margin: 8px 0 10px; padding-left: 18px; font-size: 12.5px; color: var(--ink-2); display: grid; gap: 6px; }
.wb-law b { color: var(--ink); font-weight: 600; }
.wb-trackers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.wb-tr { padding: 14px 20px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--line); min-width: 0; }
.wb-tr:nth-child(odd) { border-right: 1px solid var(--line); }
.wb-tr-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 13px; }
.wb-tr small { font-size: 12px; }
.wb-tr .input { font-family: var(--mono); font-size: 12.5px; }
.input.is-bad { border-color: var(--red); }
.wb-tr-err { color: var(--red); }
.wb-custom { margin: 0; padding: 14px 20px; border-top: 0; }
.wb-custom-body { display: grid; gap: 12px; margin-top: 12px; }
.wb-custom textarea { font-family: var(--mono); font-size: 12px; }
.wb-danger { display: flex; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 7px; background: var(--red-soft); color: var(--red); font-size: 12.5px; }
.wb-danger svg { flex: none; margin-top: 2px; }
/* Publicera */
.wb-pub .card-head form { margin: 0; }
.wb-progress { padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.wb-steps { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; flex-wrap: wrap; }
.wb-steps li { font-size: 12px; font-weight: 550; color: var(--faint); padding: 4px 10px 4px 22px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); position: relative; }
.wb-steps li::before { content: ''; position: absolute; left: 8px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--line-strong); }
.wb-steps li.done { color: var(--green); } .wb-steps li.done::before { background: var(--green); }
.wb-steps li.now { color: var(--ink); border-color: var(--accent-line); } .wb-steps li.now::before { background: var(--accent); animation: wbpulse 1s ease-in-out infinite; }
.wb-steps li.bad { color: var(--red); border-color: var(--red); } .wb-steps li.bad::before { background: var(--red); }
@keyframes wbpulse { 50% { opacity: .3; } }
.wb-step-line { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-2); min-height: 18px; }
.wb-form-foot { display: flex; gap: 12px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--line); }
.wb-diff { padding: 4px 0; }
.wb-diff-file { border-top: 1px solid var(--line); }
.wb-diff-file:first-child { border-top: 0; }
.wb-diff-file > summary { cursor: pointer; padding: 11px 20px; display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.wb-diff-file > summary em { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--muted); }
.wb-diff-file > summary .muted { font-size: 11.5px; font-family: var(--mono); }
.wb-diff-t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.wb-diff-t th { width: 34%; text-align: left; font-weight: 500; color: var(--muted); font-family: var(--mono); font-size: 11.5px; padding: 7px 10px 7px 20px; vertical-align: top; overflow-wrap: anywhere; border-top: 1px solid var(--line); }
.wb-diff-t td { padding: 7px 20px 7px 10px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.wb-diff-t del, .wb-diff-t ins { display: block; text-decoration: none; padding: 2px 6px; border-radius: 4px; }
.wb-diff-t del { background: var(--red-soft); color: var(--red); margin-bottom: 3px; }
.wb-diff-t ins { background: var(--green-soft); color: var(--green); }
.wb-builds tr.is-live td { background: color-mix(in srgb, var(--green-soft) 50%, transparent); }
.wb-builds tr.is-focus td { box-shadow: inset 0 0 0 9999px var(--accent-soft); }
.wb-row-act { display: flex; gap: 6px; justify-content: flex-end; }
.wb-row-act form { margin: 0; }
.wb-cut { max-width: 340px; overflow-wrap: anywhere; color: var(--ink-2); }

/* Redigeraren: sidträd | fält | förhandsvisning/SEO */
@keyframes wbin { from { opacity: 0; transform: translateY(3px); } }
.wb-grp, .wb-card { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin-bottom: 8px; }
.wb-grp > summary, .wb-card > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 13.5px; font-weight: 560; border-radius: 10px; }
.wb-grp > summary::-webkit-details-marker, .wb-card > summary::-webkit-details-marker { display: none; }
.wb-grp > summary::before, .wb-card > summary::before { content: ''; width: 6px; height: 6px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; flex: none; margin-right: 2px; }
.wb-grp[open] > summary::before, .wb-card[open] > summary::before { transform: rotate(45deg); }
.wb-grp > summary:hover, .wb-card > summary:hover { background: var(--hover); }
.wb-grp-n { font-size: 11.5px; font-weight: 500; color: var(--faint); }
.wb-dirty-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--saffron); display: none; }
.wb-grp.has-dirty > summary .wb-dirty-dot { display: inline-block; }
.wb-grp-b, .wb-card-b { padding: 2px 14px 12px; }
.wb-grp .wb-grp { margin-left: 0; background: var(--surface-2); }
.wb-grp-b > .wb-row:first-child, .wb-sec-b > .wb-row:first-child, .wb-card-b > .wb-row:first-child { border-top: 0; }
.wb-f { position: relative; min-width: 0; }
.wb-f::before { content: attr(data-lang); position: absolute; top: 9px; right: 8px; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); pointer-events: none; z-index: 1; }
.wb-f .input { width: 100%; padding-right: 30px; }
.wb-f textarea.input, .wb-ta { resize: vertical; min-height: 34px; line-height: 1.45; padding-top: 7px; padding-bottom: 7px; overflow: hidden; }
.wb-f-meta { display: flex; justify-content: space-between; gap: 8px; min-height: 0; font-size: 11px; color: var(--faint); }
.wb-count { margin-left: auto; opacity: 0; transition: opacity .15s; }
.wb-f:focus-within .wb-count { opacity: 1; }
.wb-need { color: var(--red); display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: center; padding-top: 3px; }
.wb-need.soft { color: var(--saffron); }
.wb-f.is-miss .input { border-color: color-mix(in srgb, var(--saffron) 60%, var(--line-strong)); background: color-mix(in srgb, var(--saffron-soft) 60%, var(--surface)); }
.wb-f.is-bad .input { border-color: var(--red); }
.wb-f.is-flash .input { animation: wbflash 1.4s ease-out; }
@keyframes wbflash { 0%, 40% { box-shadow: 0 0 0 4px var(--accent-line); border-color: var(--accent); } }
.wb-ce { height: auto; min-height: 34px; padding-top: 7px; padding-bottom: 7px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; }
.wb-ce:focus { outline: none; }
.wb-chip { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; padding: 0 6px; margin: 0 1px; border-radius: 5px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); user-select: all; white-space: nowrap; vertical-align: baseline; }
button.wb-chip { cursor: pointer; }
.wb-tech { margin: 8px 0 2px; font-size: 12px; color: var(--muted); }
.wb-tech > summary { cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.wb-tech p { margin: 6px 0; }
.wb-tech dl { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 3px 10px; margin: 0; }
.wb-tech dd { margin: 0; overflow-wrap: anywhere; }
.wb-arr { display: flex; flex-direction: column; gap: 6px; padding: 6px 0; }
.wb-li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 4px 0; border-radius: 7px; }
.wb-grip { color: var(--faint); cursor: grab; display: inline-flex; padding-top: 9px; }
.wb-card > summary .wb-grip { padding-top: 0; }
.wb-tools { display: inline-flex; gap: 0; margin-left: auto; padding-top: 2px; }
.wb-card > summary .wb-tools { padding-top: 0; opacity: .55; }
.wb-card > summary:hover .wb-tools, .wb-card > summary:focus-within .wb-tools { opacity: 1; }
.wb-card-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 520; }
.wb-del:hover { color: var(--red); }
.is-drag { opacity: .45; }
.is-over { box-shadow: 0 -2px 0 var(--accent); }
.wb-add { align-self: flex-start; }
.wb-tuple { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-top: 1px dashed var(--line); flex-wrap: wrap; }
.wb-tuple:first-of-type { border-top: 0; }
.wb-tuple-n { font-size: 11px; color: var(--faint); width: 18px; padding-top: 9px; flex: none; }
.wb-tpair { flex: 1 1 260px; min-width: 0; }
.wb-tcell { font-family: var(--mono); font-size: 11px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; margin-top: 7px; }
.wb-tuple-note, .wb-locked-line { font-size: 12px; margin: 0 0 4px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* Högerspalten */
.wb-side-score { font-size: 11.5px; font-weight: 700; }
.wb-seg button { border: 0; background: transparent; font: inherit; font-size: 12px; font-weight: 540; color: var(--muted); padding: 3px 8px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; }
.wb-seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
/* SEO-fliken */
.wb-score { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; }
.wb-ring { position: relative; width: 64px; height: 64px; flex: none; color: var(--faint); }
.wb-ring svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.wb-ring circle { fill: none; stroke-width: 4; }
.wb-ring .bg { stroke: var(--line); }
.wb-ring .fg { stroke: currentColor; stroke-linecap: round; transition: stroke-dashoffset .6s cubic-bezier(.2,.7,.2,1), stroke .3s; }
.wb-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 18px; font-weight: 650; color: var(--ink); letter-spacing: -.02em; }
.wb-score-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wb-score-t b { font-size: 14px; font-weight: 600; }
.wb-tips { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 2px; }
.wb-tips li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; font-size: 12.5px; padding: 5px 8px; border-radius: 7px; color: var(--ink-2); }
.wb-tips li i { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; background: var(--faint); }
.wb-tips li.lv-error i { background: var(--red); } .wb-tips li.lv-warn i { background: var(--saffron); } .wb-tips li.lv-ok i { background: var(--green); }
.wb-tips li.lv-error { background: color-mix(in srgb, var(--red-soft) 60%, transparent); }
.wb-tips li.lv-info { color: var(--muted); }
.wb-tips li.lv-done { color: var(--green); text-decoration: line-through; animation: wbout 2.4s ease-in forwards; }
.wb-tips li.is-new { animation: wbin .3s ease-out; }
@keyframes wbout { 70% { opacity: 1; } 100% { opacity: 0; } }
.wb-seo-f { display: grid; gap: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.wb-sf { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.wb-sf-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 560; color: var(--ink-2); }
.wb-sf-h label { flex: none; }
.wb-cnt { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--faint); }
.wb-why { border: 0; background: transparent; font: inherit; font-size: 11.5px; color: var(--accent); cursor: pointer; padding: 0; }
.wb-sf-h .wb-cnt + .wb-why { margin-left: 4px; }
.wb-sf-h label + .wb-why { margin-left: auto; }
.wb-why-t { margin: 0; font-size: 12px; }
.wb-small { font-size: 11.5px; margin: 0; }
.wb-canon { display: block; }
.wb-tags { display: flex; flex-wrap: wrap; gap: 4px; height: auto; min-height: 34px; padding: 4px 6px; align-items: center; }
.wb-tags input { flex: 1; min-width: 120px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; color: var(--ink); height: 24px; }
.wb-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 1px 4px 1px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.wb-tag button { border: 0; background: transparent; cursor: pointer; color: var(--muted); font-size: 14px; line-height: 1; padding: 0 3px; }
.wb-switch { display: flex; gap: 8px; align-items: center; font-size: 13px; cursor: pointer; }
.wb-prev-h { margin: 18px 0 8px; justify-content: space-between; }
.wb-google { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; background: #fff; color: #202124; font-family: Arial, sans-serif; max-width: 600px; }
.wb-g-site { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.wb-g-fav { width: 26px; height: 26px; border-radius: 50%; background: #F1F3F4 url('/brand-default/favicon.svg') center / 16px no-repeat; flex: none; }
.wb-g-site b { display: block; font-size: 14px; font-weight: 400; color: #202124; }
.wb-g-site small { display: block; font-size: 12px; color: #4D5156; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 460px; }
.wb-g-title { font-size: 20px; line-height: 1.3; color: #1A0DAB; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 560px; }
.wb-g-desc { font-size: 14px; line-height: 1.58; color: #4D5156; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wb-google.is-m { max-width: 380px; border-radius: 14px; }
.wb-google.is-m .wb-g-title { white-space: normal; font-size: 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #1558D6; }
.wb-google.is-m .wb-g-desc { -webkit-line-clamp: 3; }
.wb-share { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; max-width: 520px; background: var(--surface-2); }
.wb-share-img { aspect-ratio: 1200 / 630; background: var(--line) center / cover no-repeat; }
.wb-share-t { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; min-width: 0; }
.wb-share-t small { font-size: 11px; color: var(--muted); letter-spacing: .02em; }
.wb-share-t b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-share-t span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1280px) {
}
@media (max-width: 1080px) {
  .wb-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wb-grid2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .wb-hero { flex-direction: column; align-items: stretch; padding: 18px; }
  .wb-hero-act { align-items: stretch; text-align: left; }
  .wb-kpis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .wb-num { font-size: 24px; }
  .wb-trackers { grid-template-columns: minmax(0, 1fr); }
  .wb-tr:nth-child(odd) { border-right: 0; }
  .wb-li { grid-template-columns: minmax(0, 1fr) auto; }
  .wb-li .wb-grip { display: none; }
  .wb-diff-t th { width: auto; display: block; padding-bottom: 0; border-top: 1px solid var(--line); }
  .wb-diff-t td { display: block; border-top: 0; padding-left: 20px; }
  .wb-diff-t tr { display: block; }
  .wb-tabs { overflow-x: auto; }
}
/* 4.83.0: kort i rutnät ska inte få den vanliga marginalen mellan kort */
.wb-kpis > .card, .wb-grid2 > .card, .wb-grid2 > .stack > .card, .wb-grid2 > * + .card { margin-top: 0; }
.wb-page > .card + .card, .wb-page > section + section { margin-top: 16px; }
.wb-builds .sys-pill, .wb-tr .sys-pill { display: inline-flex; align-items: center; gap: 4px; }
/* 4.83.0: redigeraren anpassar sig efter sin egen bredd (inte fönstrets) – etiketten över fälten när spalten är smal */
.wb-f-meta:not(:has(.wb-need)) { display: none; }
.wb-count { position: absolute; top: 9px; right: 8px; font-size: 10px; font-weight: 600; color: var(--muted); background: var(--surface); padding-left: 4px; pointer-events: none; z-index: 2; margin: 0; }
.wb-f:focus-within::before { opacity: 0; }
.wb-fail { display: block; line-height: 1.5; }
.wb-fail svg { vertical-align: -2px; margin-right: 4px; }
.wb-builds td:nth-child(3), .wb-builds td:nth-child(4) { white-space: nowrap; }
/* 4.84.0: vad inläsningen av en webbplats gav */
.kb-info { color: var(--muted); }
.kb-info.warn { color: var(--saffron); }

/* ── 4.85.0: Webbplats → Sidor i WordPress-stil: en lista, och en egen redigerare per sida ─────────── */
/* Listan */
.wbl { overflow: hidden; }
.wbl-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.wbl-filter { display: flex; gap: 2px; flex-wrap: wrap; }
.wbl-filter button { border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--muted); padding: 5px 9px; border-radius: 7px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.wbl-filter button span { font-size: 11.5px; color: var(--faint); font-weight: 600; }
.wbl-filter button:hover { background: var(--hover); color: var(--ink); }
.wbl-filter button.on { background: var(--active); color: var(--ink); font-weight: 560; }
.wbl-search { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); color: var(--muted); width: 220px; }
.wbl-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; color: var(--ink); }
.wbl-t { width: 100%; }
.wbl-t th, .wbl-t td { vertical-align: top; }
.wbl-t thead th { font-size: 11.5px; }
.wbl-gh th { background: var(--surface-2); font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 7px 14px !important; }
.wbl-gh th span { font-weight: 500; letter-spacing: 0; color: var(--faint); margin-left: 4px; }
.wbl-gh th small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--faint); margin-left: 8px; font-size: 11.5px; }
.wbl-row { cursor: pointer; }
.wbl-row:hover td { background: var(--hover); }
.wbl-row[hidden], [data-wbl-g][hidden], [data-wbl-none][hidden] { display: none; }
.wbl-name { font-weight: 600; color: var(--ink); text-decoration: none; font-size: 13.5px; }
.wbl-name:hover { color: var(--accent); }
.wbl-miss { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; font-size: 11px; font-weight: 650; color: var(--saffron); background: var(--saffron-soft); border-radius: 999px; padding: 0 6px; vertical-align: 1px; }
.wbl-act { display: flex; gap: 10px; margin-top: 3px; font-size: 12px; opacity: 0; transition: opacity .12s; }
.wbl-act a { color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 3px; }
.wbl-act a:hover { text-decoration: underline; }
.wbl-row:hover .wbl-act, .wbl-row:focus-within .wbl-act { opacity: 1; }
.wbl-c-seo, .wbl-c-st { width: 1%; white-space: nowrap; }
.wbl-c-when { width: 150px; }
.wbl-c-when small { display: block; color: var(--faint); font-size: 11.5px; }
.wbl-seo { display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 6px; border-radius: 999px; font-size: 11.5px; font-weight: 650; }
.wbl-seo.ok { background: var(--green-soft); color: var(--green); }
.wbl-seo.warn { background: var(--saffron-soft); color: var(--saffron); }
.wbl-seo.bad { background: var(--red-soft); color: var(--red); }
.wbl-seo.none { color: var(--faint); }
.wbl-none { text-align: center; padding: 28px !important; }

/* Språkväljaren (listan och redigeraren) */
.wbe-langs { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line); }
.wbe-langs a { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 7px; font-size: 12.5px; font-weight: 540; color: var(--muted); text-decoration: none; white-space: nowrap; }
.wbe-langs a:hover { color: var(--ink); }
.wbe-langs a.on { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.wbe-langs small { font-size: 10.5px; color: var(--faint); font-weight: 500; }
.wbe-langs em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--saffron); background: var(--saffron-soft); border-radius: 999px; padding: 0 5px; min-width: 16px; text-align: center; }
.wbe-langs em[hidden] { display: none; }
.wbe-flag { display: inline-grid; place-items: center; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 3px; line-height: 14px; background: var(--surface); }
.wbe-langs a.on .wbe-flag { color: var(--accent); border-color: var(--accent-line); }

/* Redigeraren: list överst, innehållet till vänster, rutorna till höger */
.wbe { min-height: 100%; background: var(--surface-2); }
.wbe-top { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 10px; padding: 9px 18px; background: var(--surface); border-bottom: 1px solid var(--line); }
.wbe-back { gap: 6px; padding: 0 10px 0 8px; }
.wbe-top-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.wbe-top-t small { font-size: 11.5px; color: var(--muted); }
.wbe-top-t b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbe-saved { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; min-width: 0; }
.wbe-saved.is-dirty { color: var(--saffron); font-weight: 560; }
.wbe-saved.is-ok { color: var(--green); font-weight: 560; animation: wbin .25s ease-out; }
.wbe-top .btn { gap: 6px; }
.wbe-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; max-width: 1280px; margin: 0 auto; padding: 22px 24px 60px; align-items: start; }
.wbe-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.wbe-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 72px; max-height: calc(100vh - 90px); overflow-y: auto; min-width: 0; padding-bottom: 4px; }
.wbe-errors { border: 1px solid var(--red); background: var(--red-soft); color: var(--red); border-radius: 10px; padding: 10px 14px; font-size: 12.5px; }
.wbe-errors ul { margin: 4px 0 0; padding-left: 18px; }
.wbe-errors[hidden], .wbe-hint[hidden], .wbe-titlebox[hidden] { display: none; }
.wbe-titlebox { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px 12px; }
.wbe-title-lbl { display: flex; align-items: baseline; gap: 8px; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.wbe-title-lbl span { font-weight: 500; color: var(--faint); }
.wbe-big .wbe-title-in, .wbe-title-in.input { height: auto; font-size: 22px; font-weight: 650; letter-spacing: -.015em; line-height: 1.3; padding: 8px 10px; border-color: transparent; background: transparent; margin-left: -10px; width: calc(100% + 10px); }
.wbe-big textarea.wbe-title-in.input { resize: none; overflow: hidden; display: block; min-height: 0; padding-top: 6px; padding-bottom: 6px; }
.wbe-title-in.input:hover { border-color: var(--line); }
.wbe-title-in.input:focus { border-color: var(--accent); background: var(--surface); }
.wbe-big.is-miss .wbe-title-in { border-color: color-mix(in srgb, var(--saffron) 60%, var(--line-strong)); background: color-mix(in srgb, var(--saffron-soft) 60%, var(--surface)); }
.wbe-perma { margin: 6px 0 0; font-size: 12px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.wbe-perma a { color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 3px; overflow-wrap: anywhere; }
.wbe-perma a:hover { text-decoration: underline; }
.wbe-hint { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--accent-line); font-size: 12.5px; color: var(--ink-2); }
.wbe-hint b { color: var(--ink); font-weight: 600; }
.wbe-hint-miss { color: var(--ink-2); }
.wbe-boxes { display: flex; flex-direction: column; gap: 12px; }
.wbe-loading { display: flex; gap: 10px; align-items: center; padding: 26px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; color: var(--muted); }
.wbe-loading.is-bad { flex-direction: column; align-items: flex-start; gap: 4px; color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, var(--line)); }
.wbe-loading.is-bad p { margin: 0; color: var(--ink-2); font-size: 12.5px; }
/* Rutorna (som "meta boxes" i WordPress) */
.wbe-box { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.wbe-box-h { width: 100%; display: flex; align-items: center; gap: 8px; padding: 12px 16px; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; color: var(--ink); border-radius: 10px; }
.wbe-box-h:hover { background: var(--hover); }
.wbe-box.is-open > .wbe-box-h { border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; }
.wbe-box-h.static { cursor: default; margin: 0; font-size: 13px; font-weight: 600; padding: 11px 16px; }
.wbe-box-h.static:hover { background: transparent; }
.wbe-box-t { font-size: 13.5px; font-weight: 600; }
.wbe-box-h small { font-size: 11.5px; color: var(--faint); font-weight: 500; }
.wbe-chev { margin-left: auto; color: var(--muted); display: inline-flex; transition: transform .15s; }
.wbe-box.is-open .wbe-chev { transform: rotate(180deg); }
.wbe-box.has-dirty .wb-dirty-dot { display: inline-block; }
.wbe-box > .wbe-box-b { display: none; padding: 6px 16px 14px; }
.wbe-box.is-open > .wbe-box-b { display: block; }
.wbe-side .wbe-box-b { padding: 12px 16px 14px; }
.wbe-empty .wbe-box-b { padding: 18px; }
.wbe-empty p { margin: 6px 0 0; font-size: 12.5px; }
/* Fälten: etikett ovanför, ett språk i taget */
.wbe-row { padding: 9px 0; border-top: 1px solid var(--line); min-width: 0; }
.wbe-box-b > .wbe-row:first-child, .wb-grp-b > .wbe-row:first-child, .wb-card-b > .wbe-row:first-child { border-top: 0; }
.wbe-lbl { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.wbe-lbl label { font-size: 12.5px; font-weight: 560; color: var(--ink-2); }
.wbe-count { margin-left: auto; font-size: 11px; color: var(--faint); opacity: 0; transition: opacity .15s; }
.wbe-row:focus-within .wbe-count { opacity: 1; }
.wbe-in::before { display: none; }
.wbe-in .input { padding-right: 10px; }
.wbe-ref { display: flex; gap: 6px; align-items: baseline; margin-top: 5px; font-size: 12px; color: var(--muted); line-height: 1.45; min-width: 0; }
.wbe-ref > span:last-child { overflow-wrap: anywhere; white-space: pre-wrap; }
.wbe-ref .wbe-flag { flex: none; }
.wbe-link { border: 0; background: transparent; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.wbe-li-f { min-width: 0; }
.wbe-box .wb-grp { margin: 8px 0; }
.wbe-box .wb-grp-b, .wbe-box .wb-card-b { padding: 2px 14px 10px; }
/* Högerspalten */
.wbe-dl { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 7px 10px; margin: 0; font-size: 12.5px; }
.wbe-dl dt { color: var(--muted); }
.wbe-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.wbe-dl a { color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 3px; }
.wbe-small { font-size: 12px; margin: 10px 0 0; line-height: 1.5; }
.wbe-small svg { vertical-align: -2px; margin-right: 3px; }
.wbe-bad { color: var(--red); }
.wbe-pending { display: flex; gap: 6px; align-items: flex-start; color: var(--accent); text-decoration: none; }
.wbe-pending svg { flex: none; margin: 2px 0 0; }
.wbe-big + .wbe-big { margin-top: 2px; }
.wbe-title-lbl[hidden] { display: none; }
.wbe-pending[hidden] { display: none; }
.wbe-pending:hover { text-decoration: underline; }
.wbe-side .wb-score { margin-bottom: 10px; }
.wbe-side .wb-seo-f { gap: 12px; }
.wbe-seo-more { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.wbe-seo-more > summary { cursor: pointer; font-size: 12.5px; font-weight: 560; color: var(--ink-2); }
.wbe-seo-more .wb-google { max-width: 100%; padding: 12px; }
.wbe-seo-more .wb-g-title { font-size: 17px; max-width: 100%; }
.wbe-seo-more .wb-g-site small { max-width: 220px; }
.wbe-seo-more .wb-sf { margin-top: 12px; }
.wbe-side .wb-tips { margin-bottom: 12px; }
[data-wbe-seobox] .wbe-flag { font-weight: 700; }
.wbe-side .wb-side-score { margin-left: auto; font-size: 12px; }

@media (max-width: 1180px) {
  .wbe-cols { grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; padding: 18px 16px 48px; }
  .wbe-top .btn span { display: none; }
  .wbe-top .btn { width: 32px; padding: 0; justify-content: center; }
  .wbe-top .wbe-back span { display: none; }
}
@media (max-width: 900px) {
  .wbe-cols { grid-template-columns: minmax(0, 1fr); }
  .wbe-side { position: static; max-height: none; overflow: visible; }
  .wbl-c-url, .wbl-c-when { display: none; }
}
@media (max-width: 640px) {
  .wbe-top { flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
  .wbe-top .btn { width: 40px; height: 40px; }
  .wbe-top-t { flex: 1 1 0; }
  .wbe-top > .grow { display: none; }
  .wbe-langs[data-wbe-langs] { order: 9; flex: 1 1 100%; }
  .wbe-langs[data-wbe-langs] a { flex: 1; justify-content: center; height: 32px; }
  .wbe-saved { order: 10; flex: 1 1 100%; justify-content: flex-end; }
  .wbe-saved:empty { display: none; }
  .wbe-cols { padding: 12px 10px 40px; gap: 12px; }
  .wbe-titlebox { padding: 12px 14px 10px; }
  .wbe-big .wbe-title-in, .wbe-title-in.input { font-size: 19px; }
  .wbe-box-h { padding: 12px 14px; }
  .wbe-box > .wbe-box-b { padding: 4px 14px 12px; }
  .wbl-bar { padding: 10px; }
  .wbl-search { width: 100%; order: 5; }
  .wbl-bar > .grow { display: none; }
  .wbl-act { opacity: 1; }
  .wbl-t thead { display: none; }
  .wbl-c-st { text-align: right; }
}

/* ── 4.86.0: Webbplats → Blogg – listan med SEO/AEO/GEO, redigeraren med block, och kategorierna ─────── */
/* Nyckeltal överst i listan */
.wbb-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.wbb-kpi { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.wbb-kpi small { font-size: 11.5px; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.wbb-kpi b { font-size: 24px; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); }
.wbb-kpi b.ok { color: var(--green); } .wbb-kpi b.warn { color: var(--saffron); } .wbb-kpi b.bad { color: var(--red); }
.wbb-kpi span { font-size: 12px; color: var(--faint); }
.wbb-kpi[data-kpi]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: calc(var(--p, 0) * 1%); background: currentColor; color: var(--line-strong); transition: width .8s cubic-bezier(.2,.7,.2,1); }
.wbb-kpi.is-live:has(b.ok)::after { color: var(--green); } .wbb-kpi.is-live:has(b.warn)::after { color: var(--saffron); } .wbb-kpi.is-live:has(b.bad)::after { color: var(--red); }
.wbb-kpi-err { grid-column: 1 / -1; margin: 0; font-size: 12.5px; }
.wbb-new { display: inline; margin: 0; }
.wbb-cat select { height: 30px; font-size: 13px; padding-top: 0; padding-bottom: 0; width: auto; min-width: 150px; }
.wbb-t .wbb-c-sc { width: 1%; text-align: center; white-space: nowrap; }
.wbb-t th.wbb-c-sc { cursor: help; }
.wbb-c-cat { width: 140px; font-size: 12.5px; color: var(--ink-2); }
.wbb-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.wbb-tags span { font-size: 11px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; line-height: 17px; }
.wbb-star { display: inline-flex; color: var(--saffron); vertical-align: -1px; margin-left: 4px; }
.wbl-act form { display: inline; margin: 0; }
.wbl-act .wbe-link { font-size: 12px; text-decoration: none; }
.wbl-act .wbe-link:hover { text-decoration: underline; }
.wbe-link.wbb-del, .btn.wbb-del { color: var(--red); }
.wbl-row[data-weak="1"] .wbl-name::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--saffron); margin-left: 7px; vertical-align: 2px; }

/* Redigeraren */
.wbb-head .wbe-title-in { font-size: 26px; }
.wbb-perma { margin-top: 4px; }
.wbb-url { font-family: var(--mono); font-size: 12px; color: var(--muted); background: transparent; padding: 0; overflow-wrap: anywhere; }
.wbb-url b { color: var(--ink); font-weight: 600; }
.wbb-slug-in.input { height: 28px; width: auto; flex: 1 1 200px; max-width: 360px; font-family: var(--mono); font-size: 12px; }
.wbb-perma-note { flex: 1 1 100%; }
.wbb-intro .wbe-box-b { padding-top: 4px; }
.wbb-answer textarea { background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); border-color: var(--accent-line); }
.wbb-answer textarea:focus { background: var(--surface); }
.wbe-lbl .wb-cnt { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--faint); white-space: nowrap; }
.wbe-lbl small.muted { font-size: 11.5px; line-height: 1.4; }
.wbe-lbl { flex-wrap: wrap; }
.wbb-help { margin: 2px 0 10px; font-size: 12px; line-height: 1.5; }
.wbb-content > .wbe-box-h small { margin-left: auto; }
.wbb-noblocks { padding: 18px; text-align: center; font-size: 13px; border: 1px dashed var(--line-strong); border-radius: 9px; margin: 8px 0; }
.wbb-blocks { display: flex; flex-direction: column; padding-top: 6px; }
.wbb-block { border: 1px solid var(--line); border-radius: 9px; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.wbb-block:focus-within { border-color: var(--accent-line); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 70%, transparent); }
.wbb-block.is-new, .wbb-block.is-moved { animation: wbin .3s ease-out; }
.wbb-block.t-h2 { border-left: 3px solid var(--accent); }
.wbb-block.t-h3 { border-left: 3px solid var(--accent-line); }
.wbb-bh { display: flex; align-items: center; gap: 6px; padding: 5px 6px 0 9px; min-height: 30px; }
.wbb-bi { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--surface-2); color: var(--muted); flex: none; }
.wbe-box-h .wbb-bi { width: 24px; height: 24px; }
.wbb-type { border: 0; background: transparent; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); padding: 2px 18px 2px 4px; border-radius: 6px; cursor: pointer; appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 7px center, right 3px center; background-size: 4px 4px; background-repeat: no-repeat; }
.wbb-type:hover { background-color: var(--hover); color: var(--ink); }
.wbb-secw { font-size: 11.5px; color: var(--faint); font-weight: 500; }
.wbb-secw.is-thin { color: var(--saffron); font-weight: 600; }
.wbb-bt { display: inline-flex; gap: 0; opacity: .45; transition: opacity .12s; }
.wbb-block:hover .wbb-bt, .wbb-block:focus-within .wbb-bt, .wbb-card:hover .wbb-bt, .wbb-faq:hover .wbb-bt, .wbb-bt:focus-within { opacity: 1; }
.wbb-bt button, .wbb-iconbtn { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 0; background: transparent; border-radius: 6px; color: var(--muted); cursor: pointer; }
.wbb-bt button:hover:not(:disabled), .wbb-iconbtn:hover { background: var(--hover); color: var(--ink); }
.wbb-bt button:disabled { opacity: .3; cursor: default; }
.wbb-bt .wbb-x:hover:not(:disabled), .wbb-iconbtn.wbb-x:hover { color: var(--red); background: var(--red-soft); }
.wbb-bt.is-col { flex-direction: column; align-self: start; }
.wbb-bb { padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wbb-bb .input, .wbb-faq .input, .wbb-src .input, .wbe-box .wbb-fmt .input { width: 100%; }
.wbb-bb textarea.input, .wbb-faq textarea.input, .wbb-intro textarea.input, .wbb-meta textarea.input { resize: none; overflow: hidden; line-height: 1.55; min-height: 0; }
.wbb-h2.input { font-size: 17px; font-weight: 650; letter-spacing: -.01em; height: 38px; }
.wbb-h3.input { font-size: 15px; font-weight: 620; }
.wbb-p.input { font-size: 14px; }
.wbb-callout.input { background: color-mix(in srgb, var(--accent-soft) 50%, var(--surface)); border-color: var(--accent-line); }
.wbb-quote textarea.input { font-style: italic; border-left: 3px solid var(--line-strong); }
.wbb-sub { display: flex; gap: 8px; align-items: center; }
.wbb-sub .wb-seg { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); }
.wbb-fmt { display: flex; flex-direction: column; gap: 0; min-width: 0; position: relative; }
.wbb-fmtbar { display: flex; gap: 2px; align-items: center; opacity: 0; pointer-events: none; transition: opacity .12s; position: absolute; right: 5px; bottom: 5px; z-index: 2; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 0 2px; height: 26px; }
.wbb-fmt:focus-within > textarea.input { padding-bottom: 36px; }
.wbb-fmt:focus-within .wbb-fmtbar { opacity: 1; pointer-events: auto; }
.wbb-fmtbar > button { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 6px; border: 0; background: transparent; border-radius: 5px; font: inherit; font-size: 11.5px; font-weight: 560; color: var(--muted); cursor: pointer; }
.wbb-fmtbar > button:hover { background: var(--hover); color: var(--ink); }
.wbb-linkpop { position: absolute; right: 0; top: 30px; width: 300px; max-width: calc(100vw - 40px); display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: var(--shadow-pop); z-index: 20; }
.wbb-linkpop[hidden] { display: none; }
.wbb-linkpop b { font-size: 12.5px; }
.wbb-linkpop .input { height: 32px; font-size: 13px; }
.wbb-linkmsg { color: var(--red); font-size: 11.5px; }
.wbb-linkmsg:empty { display: none; }
.wbb-linkpop-a { display: flex; gap: 6px; justify-content: flex-end; }
.wbb-help.muted { display: block; }
small.wbb-help { margin: 0; font-size: 11.5px; }

/* Infoga block mellan blocken – syns vid hovring, alltid längst ned */
.wbb-ins { position: relative; height: 12px; display: flex; align-items: center; justify-content: center; }
.wbb-ins::before { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; height: 1px; background: var(--accent); opacity: 0; transition: opacity .12s; }
.wbb-ins-btn { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--accent-line); background: var(--surface); color: var(--accent); cursor: pointer; opacity: 0; transform: scale(.85); transition: opacity .12s, transform .12s; }
.wbb-ins:hover::before, .wbb-ins:focus-within::before { opacity: .5; }
.wbb-ins:hover .wbb-ins-btn, .wbb-ins-btn:focus-visible, .wbb-ins-btn[aria-expanded="true"] { opacity: 1; transform: none; }
.wbb-ins.is-last { height: auto; justify-content: flex-start; margin-top: 10px; }
.wbb-ins.is-last::before { display: none; }
.wbb-add.btn { width: 100%; justify-content: center; border-style: dashed; color: var(--muted); background: transparent; }
.wbb-add.btn:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.wbb-menu { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); z-index: 30; width: 340px; max-width: calc(100vw - 32px); max-height: 380px; overflow: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 6px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 11px; box-shadow: var(--shadow-pop); }
.wbb-ins.is-last .wbb-menu { left: 0; transform: none; }
.wbb-menu[hidden] { display: none; }
.wbb-menu button { display: flex; gap: 8px; align-items: flex-start; text-align: left; border: 0; background: transparent; border-radius: 8px; padding: 7px 8px; cursor: pointer; font: inherit; color: var(--ink); }
.wbb-menu button:hover, .wbb-menu button:focus-visible { background: var(--hover); outline: 0; }
.wbb-menu-i { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 7px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.wbb-menu b { display: block; font-size: 12.5px; font-weight: 600; }
.wbb-menu small { display: block; font-size: 11px; color: var(--muted); line-height: 1.35; margin-top: 1px; }

/* Kort, frågor, källor, jämförelse, tabell */
.wbb-cards { display: flex; flex-direction: column; gap: 6px; }
.wbb-card, .wbb-faq { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 8px 4px 8px 0; border-top: 1px solid var(--line); }
.wbb-faq:first-of-type { border-top: 0; }
.wbb-card-n { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-top: 6px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 700; }
.wbb-card-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.wbb-card-f > .wb-cnt { align-self: flex-end; font-size: 11.5px; font-weight: 600; color: var(--faint); }
.wbb-faq-q.input { font-weight: 600; }
.wbb-more.wbe-link { align-self: flex-start; font-size: 12.5px; text-decoration: none; margin-top: 2px; }
.wbb-more.wbe-link:hover { text-decoration: underline; }
.wbb-src { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 28px; gap: 6px; align-items: center; margin-bottom: 6px; }
.wbb-src .input.is-bad { border-color: var(--red); }
.wbb-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wbb-cmp-c { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 8px; border: 1px solid var(--line); }
.wbb-cmp-c.is-good { background: color-mix(in srgb, var(--green-soft) 40%, var(--surface)); }
.wbb-cmp-c.is-bad { background: color-mix(in srgb, var(--red-soft) 35%, var(--surface)); }
.wbb-cmp-t.input { font-weight: 600; }
.wbb-table { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wbb-grid-wrap { overflow-x: auto; }
.wbb-grid { border-collapse: separate; border-spacing: 4px; margin: 0 -4px; min-width: 100%; }
.wbb-grid th, .wbb-grid td { padding: 0; min-width: 110px; vertical-align: top; }
.wbb-grid th .input { font-weight: 650; background: var(--surface-2); }
.wbb-grid .input { height: 32px; font-size: 13px; }
.wbb-grid .wbb-grid-a { min-width: 28px; width: 28px; }
.wbb-grid-a button { display: inline-grid; place-items: center; width: 28px; height: 32px; border: 0; background: transparent; color: var(--muted); border-radius: 6px; cursor: pointer; }
.wbb-grid-a button:hover:not(:disabled) { background: var(--hover); color: var(--ink); }
.wbb-grid-a .wbb-x:hover { color: var(--red); background: var(--red-soft); }
.wbb-grid-del td { text-align: center; }
.wbb-grid-del .wbe-link { font-size: 11px; text-decoration: none; opacity: .6; }
.wbb-grid-del .wbe-link:hover { opacity: 1; text-decoration: underline; }
.wbb-droplang { margin: 0; text-align: right; font-size: 12.5px; }

/* Inlägget saknas på språket */
.wbb-nolang .wbe-box-b { padding: 34px 28px !important; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wbb-nolang h2 { margin: 4px 0 0; font-size: 18px; letter-spacing: -.01em; }
.wbb-nolang p { margin: 0; max-width: 460px; font-size: 13px; line-height: 1.55; }
.wbb-nolang-a { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }

/* Högerspalten */
.wbb-status { display: flex; padding: 2px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 12px; }
.wbb-status button { flex: 1; justify-content: center; height: 28px; font-size: 12.5px; }
.wbb-status button.on[data-v="published"] { color: var(--green); }
.wbb-date.input { height: 28px; font-size: 12.5px; padding: 0 6px; width: 100%; max-width: 160px; }
.wbb-upd { display: flex; gap: 8px; align-items: center; }
.wbb-upd .wbe-link { font-size: 12px; white-space: nowrap; }
.wbb-feat { margin: 12px 0 4px; font-size: 12.5px; }
.wbb-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.wbb-actions form { margin: 0; }
.wbb-actions .btn[hidden] { display: none; }
.wbb-rings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.wbb-r { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 6px; border: 1px solid transparent; border-radius: 10px; background: transparent; cursor: pointer; font: inherit; color: var(--muted); }
.wbb-r:hover { background: var(--hover); }
.wbb-r.on { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
.wbb-r .wb-ring { width: 54px; height: 54px; }
.wbb-r .wb-ring svg { width: 54px; height: 54px; }
.wbb-r .wb-ring b { font-size: 16px; }
.wbb-r-n { font-size: 11.5px; font-weight: 650; letter-spacing: .04em; }
.wbb-area-h { margin: 0 0 8px; font-size: 12px; line-height: 1.45; }
.wbb-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.wbb-stats > div { background: var(--surface); padding: 6px 4px; text-align: center; display: flex; flex-direction: column; gap: 0; }
.wbb-stats b { font-size: 14px; font-weight: 650; color: var(--ink); }
.wbb-stats small { font-size: 10.5px; color: var(--muted); line-height: 1.2; }
.wbb-stats .is-warn b { color: var(--saffron); }
.wbb-meta .wbe-row:first-child { padding-top: 0; }
.wbb-meta select.input { width: 100%; }
.wbb-catlink { display: inline-block; margin-top: 5px; color: var(--accent); text-decoration: none; }
.wbb-catlink:hover { text-decoration: underline; }
.wbb-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wbb-gwrap { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.wbb-gwrap small { font-size: 11.5px; }
.wbb-g { margin: 0; }
.wbb-g .wb-g-site small { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
[data-wbb-seo] .wb-sf { margin-bottom: 10px; }
[data-wbb-seo] .wb-sf-h .wb-cnt { margin-left: auto; }
[data-wbb-seo] .wb-sf-h .wb-cnt + .wb-why { margin-left: 8px; }

/* Kategorierna */
.wbc { display: flex; flex-direction: column; gap: 12px; }
.wbc-list { display: flex; flex-direction: column; gap: 12px; }
.wbc-cat { padding: 0; overflow: visible; }
.wbc-cat.is-new { animation: wbin .3s ease-out; }
.wbc-h { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.wbc-icon select { height: 30px; font-size: 12.5px; width: auto; }
.wbc-name { font-size: 14px; }
.wbc-h .wbe-link:disabled { color: var(--faint); cursor: not-allowed; text-decoration: none; }
.wbc-langs { display: grid; grid-template-columns: 1fr 1fr; }
.wbc-lang { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; min-width: 0; }
.wbc-lang + .wbc-lang { border-left: 1px solid var(--line); }
.wbc-lh { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.wbc-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 560; color: var(--ink-2); }
.wbc-f small { font-weight: 500; }
.wbc-f textarea.input { resize: vertical; }
.wbc-slug { display: flex; align-items: center; gap: 4px; min-width: 0; }
.wbc-slug code { font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.wbc-slug .input { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12.5px; }
.wbc-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: sticky; bottom: 0; padding: 10px 0; background: linear-gradient(transparent, var(--bg) 30%); }

@media (max-width: 1180px) {
  .wbb-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .wbb-c-cat { display: none; }
}
@media (max-width: 640px) {
  .wbb-kpis { gap: 8px; }
  .wbb-kpi { padding: 10px 12px; }
  .wbb-kpi b { font-size: 20px; }
  .wbb-cat, .wbb-cat select { width: 100%; }
  .wbb-t .wbl-c-when { display: none; }
  .wbb-t, .wbb-t tbody { display: block; width: 100%; }
  .wbb-t tbody[hidden] { display: none; }
  .wbb-t tr.wbl-row { display: grid; grid-template-columns: repeat(3, auto) 1fr; align-items: center; column-gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .wbb-t tr.wbl-row[hidden] { display: none; }
  .wbb-t tr.wbl-row > td { padding: 0 !important; border: 0 !important; background: transparent !important; width: auto !important; }
  .wbb-t tr.wbl-row > td.wbl-c-name { grid-column: 1 / -1; padding-bottom: 8px !important; }
  .wbb-t tr.wbl-row > td.wbl-c-st { justify-self: end; }
  .wbb-t tr.wbl-row > td.wbb-c-sc::before { content: attr(data-sc); text-transform: uppercase; font-size: 10px; font-weight: 650; color: var(--faint); margin-right: 3px; letter-spacing: .04em; }
  .wbb-head .wbe-title-in { font-size: 21px; }
  .wbb-cmp, .wbc-langs { grid-template-columns: 1fr; }
  .wbc-lang + .wbc-lang { border-left: 0; border-top: 1px solid var(--line); }
  .wbb-src { grid-template-columns: minmax(0, 1fr) 28px; }
  .wbb-src > :nth-child(2) { grid-column: 1; }
  .wbb-src > .wbb-iconbtn { grid-row: 1 / span 2; grid-column: 2; }
  .wbb-bt { opacity: 1; }
  .wbb-ins { height: 8px; }
  .wbb-menu { grid-template-columns: 1fr; position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; transform: none; width: auto; max-height: 70vh; }
  .wbb-ins.is-last .wbb-menu { left: 12px; }
  .wbb-fmtbar { opacity: 1; pointer-events: auto; }
  .wbb-linkpop { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; }
}

/* ── 4.87.0: Kalendern – egen meny (Kalender, Möten, Kunder), minikalender, personer, mötesbrickor och kortet ── */
.cal-page.cx { flex-direction: row !important; }
.cx-side { width: 252px; flex: none; display: flex; flex-direction: column; gap: 18px; padding: 16px 14px 18px; border-right: 1px solid var(--line);
  background: var(--surface-2); overflow-y: auto; min-height: 0; }
.cx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.cx-nav { display: flex; flex-direction: column; gap: 2px; }
.cx-nav a { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 9px; color: var(--ink-2); font-weight: 500;
  text-decoration: none; font-size: 13.5px; }
.cx-nav a svg { color: var(--muted); flex: none; }
.cx-nav a:hover { background: var(--hover); color: var(--ink); }
.cx-nav a.on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(20,24,40,.04); }
.cx-nav a.on svg { color: var(--accent); }
.cx-nav em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 650; color: var(--muted); background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 0 7px; line-height: 18px; font-variant-numeric: tabular-nums; }
.cx-newbtn.btn { width: 100%; justify-content: center; height: 36px; }
/* Minikalendern */
.cx-mini-h { display: flex; align-items: center; gap: 2px; margin-bottom: 6px; }
.cx-mini-h b { flex: 1; font-size: 13px; font-weight: 600; }
.cx-mini-h b::first-letter { text-transform: uppercase; }
.cx-ib { width: 26px; height: 26px; border: 0; background: transparent; border-radius: 7px; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.cx-ib:hover { background: var(--hover); color: var(--ink); }
.cx-mini-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; }
.cx-mini-wd { font-size: 10.5px; font-weight: 600; color: var(--faint); text-align: center; padding-bottom: 4px; }
.cx-md { position: relative; height: 30px; border: 0; background: transparent; font: inherit; font-size: 12px; color: var(--ink-2); border-radius: 8px;
  cursor: pointer; font-variant-numeric: tabular-nums; padding: 0; }
.cx-md:hover { background: var(--hover); }
.cx-md.out { color: var(--faint); }
.cx-md.inr { background: var(--accent-soft); border-radius: 0; color: var(--ink); }
.cx-md.inr.first { border-radius: 8px 0 0 8px; } .cx-md.inr.last { border-radius: 0 8px 8px 0; } .cx-md.inr.first.last { border-radius: 8px; }
.cx-md.busy::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 2px; background: var(--accent); }
.cx-md.cur:not(.today) { box-shadow: inset 0 0 0 1.5px var(--accent-line); font-weight: 600; }
.cx-md.today { color: #fff; background: var(--accent); font-weight: 650; border-radius: 8px; }
.cx-md.today.busy::after { background: #fff; }
/* Personerna */
.cx-h { display: flex; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); margin: 0 0 6px 2px; }
.cx-h span { flex: 1; }
.cx-link { border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 560; cursor: pointer; padding: 0; }
.cx-plist { display: flex; flex-direction: column; gap: 1px; }
.cx-person { position: relative; display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--ink); min-height: 34px; }
.cx-person:hover { background: var(--hover); }
.cx-person input { position: absolute; opacity: 0; pointer-events: none; }
.cx-person:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.cx-av { width: 24px; height: 24px; border-radius: 12px; flex: none; display: grid; place-items: center; font-size: 9.5px; font-weight: 700; color: #fff;
  background: var(--pc); letter-spacing: .02em; transition: background .12s, color .12s, box-shadow .12s; }
.cx-av.sm { width: 20px; height: 20px; font-size: 8.5px; }
.cx-person.off .cx-av { background: transparent; color: var(--pc); box-shadow: inset 0 0 0 1.5px var(--pc); }
.cx-person.off .cx-pn { color: var(--muted); }
.cx-pn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-pn small { color: var(--faint); font-size: 11px; margin-left: 3px; }
.cx-person em { font-style: normal; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cx-only { display: none; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; font: inherit; font-size: 11px; padding: 1px 7px; color: var(--ink-2); cursor: pointer; }
.cx-only:hover { color: var(--accent); border-color: var(--accent-line); }
.cx-person:hover .cx-only, .cx-person:focus-within .cx-only { display: inline-block; }
.cx-person:hover em, .cx-person:focus-within em { display: none; }
.cx-set { margin-top: auto; font-size: 12.5px; }
.cx-set summary { cursor: pointer; color: var(--muted); display: flex; gap: 6px; align-items: center; list-style: none; padding: 4px 2px; }
.cx-set summary::-webkit-details-marker { display: none; }
.cx-set summary:hover { color: var(--ink); }
.cx-set form { display: flex; flex-direction: column; gap: 7px; padding: 8px 2px 0; }
.cx-set .help { margin: 2px 0 4px; font-size: 11.5px; }
.cx-set .btn { align-self: flex-start; }
/* Huvudet */
.cx-showing { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.cx-filterbtn { display: none !important; }
.cx-checks { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.cx-checks .check svg { vertical-align: -2px; color: var(--muted); }
/* Mötesbrickorna: personens färg som ton, ingen kantlinje */
.cal-ev.cx-ev { border: 0; border-radius: 7px; padding: 4px 8px; background: color-mix(in srgb, var(--c) 14%, var(--surface));
  color: color-mix(in srgb, var(--c) 52%, var(--ink)); transition: background .12s, box-shadow .12s; }
.cal-ev.cx-ev:hover { background: color-mix(in srgb, var(--c) 22%, var(--surface)); }
.cal-col > .cal-ev.cx-ev { box-shadow: 0 0 0 1px var(--surface); }
.cal-col > .cal-ev.cx-ev:hover { box-shadow: 0 0 0 1px var(--surface), 0 4px 14px rgba(20,24,40,.12); z-index: 4; }
.cx-ev > b { display: flex; align-items: center; gap: 4px; color: inherit; font-weight: 620; }
.cx-ev > b > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.cx-ev > small { color: color-mix(in srgb, var(--c) 36%, var(--muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cx-ai { display: inline-grid; place-items: center; flex: none; color: var(--c); }
.cx-ev-av { position: absolute; top: 4px; right: 4px; width: 17px; height: 17px; border-radius: 9px; font-size: 7.5px; font-weight: 700; color: #fff; background: var(--pc);
  display: grid; place-items: center; letter-spacing: .02em; box-shadow: 0 0 0 1.5px var(--surface); }
.cal-ev.cx-ev:has(.cx-ev-av) { padding-right: 25px; }
.cal-ev.cx-ev.short .cx-ev-av { top: 50%; margin-top: -8.5px; }
.cal-ev.cx-ev.masked { background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, var(--hover) 6px 12px); color: var(--muted); box-shadow: 0 0 0 1px var(--line); }
.cal-ev.cx-ev.masked > b svg { flex: none; }
.cal-ev.cx-ev.ext { background: var(--surface-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.cal-ev.cx-ev.ro { cursor: default; }
/* Månaden: en rad per möte, punkt i personens färg */
.cal-mc .cal-ev.cx-ev { flex-direction: row; align-items: center; gap: 6px; padding: 2px 6px; background: transparent; color: var(--ink); border-radius: 6px; }
.cal-mc .cal-ev.cx-ev:hover { background: color-mix(in srgb, var(--c) 12%, transparent); }
.cal-mc .cal-ev.cx-ev.masked { background: transparent; box-shadow: none; color: var(--muted); }
.cal-mc .cx-ev > small { order: 0; color: var(--muted); flex: none; font-variant-numeric: tabular-nums; }
.cal-mc .cx-ev > b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; display: block; }
.cx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; font-style: normal; }
.cal-mc.out { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.cal-mc { border-color: color-mix(in srgb, var(--line) 75%, transparent); }
/* Kortet med mötets uppgifter */
.cx-pop { position: fixed; z-index: 90; width: 320px; max-width: calc(100vw - 16px); box-sizing: border-box; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 14px; box-shadow: var(--shadow-pop); padding: 14px 16px 12px; opacity: 0; transform: translateY(4px) scale(.985); transform-origin: top left;
  transition: opacity .12s ease, transform .12s ease; font-size: 13px; color: var(--ink); }
.cx-pop.on { opacity: 1; transform: none; }
.cx-pop[hidden] { display: none; }
.cx-pop-top { display: flex; align-items: center; gap: 8px; }
.cx-pop-kind { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 2px 8px 2px 7px; border-radius: 999px;
  color: color-mix(in srgb, var(--c) 66%, var(--ink)); background: color-mix(in srgb, var(--c) 12%, var(--surface)); }
.cx-pop-x { margin-left: auto; width: 26px; height: 26px; border: 0; background: transparent; border-radius: 7px; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.cx-pop-x:hover { background: var(--hover); color: var(--ink); }
.cx-pop h3 { margin: 9px 0 6px; font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; overflow-wrap: anywhere; }
.cx-pop-when { display: flex; align-items: center; gap: 7px; color: var(--ink-2); font-size: 12.5px; }
.cx-pop-when svg { color: var(--muted); flex: none; }
.cx-pop-when span::first-letter { text-transform: uppercase; }
.cx-pop-when em { margin-left: auto; font-style: normal; color: var(--muted); font-size: 11.5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; white-space: nowrap; }
.cx-pop-rows { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.cx-pop-rows > div { display: flex; gap: 9px; align-items: center; min-width: 0; }
.cx-pop-rows svg { color: var(--muted); flex: none; }
.cx-pop-rows a, .cx-pop-rows span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-pop-rows a { color: var(--accent); text-decoration: none; }
.cx-pop-rows a:hover { text-decoration: underline; }
.cx-pop-people { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); }
.cx-pop-people > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.cx-pop-people small { color: var(--faint); font-size: 11px; }
.cx-pop-people b { font-weight: 560; font-size: 13px; }
.cx-pop-desc { margin: 10px 0 0; color: var(--ink-2); font-size: 12.5px; line-height: 1.5; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cx-pop-foot { margin-top: 12px; font-size: 11.5px; color: var(--faint); }
.cx-pop-foot a { color: var(--accent); text-decoration: none; font-weight: 560; }

@media (max-width: 760px) {
  .cal-page.cx { flex-direction: column !important; }
  .cx-side { width: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 8px 10px; gap: 10px; overflow: visible; background: var(--surface); flex: none; }
  .cx-nav { flex-direction: row; gap: 4px; }
  .cx-nav a { flex: 1; justify-content: center; height: 36px; padding: 0 6px; font-size: 13px; }
  .cx-nav a.on { background: var(--accent-soft); box-shadow: none; color: var(--accent); }
  .cx-nav em { display: none; }
  .cx-newbtn, .cx-mini, .cx-people, .cx-set { display: none; }
  .cx.side-open .cx-mini, .cx.side-open .cx-people { display: block; }
  .cx.side-open .cx-plist { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 2px; }
  .cx.side-open .cx-person { flex: none; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px 4px 4px; min-height: 36px; }
  .cx.side-open .cx-person em, .cx.side-open .cx-only { display: none !important; }
  .cx-md { height: 36px; font-size: 13px; }
  .cx-filterbtn { display: inline-flex !important; }
  .cx-showing { display: none; }
  .cx-pop { left: 8px !important; right: 8px; width: auto; top: auto !important; bottom: 8px; transform-origin: bottom center; }
}

/* ── 4.87.0: Kalender → Möten och Kunder (listorna) ── */
.cx-listpage .cal-title { margin-left: 4px; }
.cx-lhead { gap: 14px; min-height: 58px; box-sizing: border-box; }
.cx-seg { display: inline-flex; grid-template-columns: none; margin: 0; gap: 2px; background: var(--hover); border-radius: 9px; padding: 3px; }
.cx-seg a { padding: 5px 12px; border-radius: 7px; font-size: 12.5px; color: var(--muted); text-decoration: none; font-weight: 500; white-space: nowrap; }
.cx-seg a:hover { color: var(--ink); }
.cx-seg a.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(20,24,40,.08); font-weight: 580; }
.cx-search { margin-left: auto; display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); width: min(300px, 100%); box-sizing: border-box; color: var(--muted); transition: border-color .12s, box-shadow .12s; }
.cx-search:focus-within { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.cx-search svg { flex: none; }
.cx-search input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; color: var(--ink); flex: 1; min-width: 0; height: 100%; }
.cx-filterline { display: flex; align-items: center; gap: 12px; padding: 9px 20px; border-bottom: 1px solid var(--line); background: var(--accent-soft); font-size: 13px; color: var(--ink-2); }
.cx-filterline .cx-link { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.cx-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 20px 28px; }
a.cx-person { text-decoration: none; }
.cx-person.sel { background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(20,24,40,.04); font-weight: 580; }
.cx-person.sel .cx-av { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--pc); }
.cx-plist .cx-av svg { width: 12px; height: 12px; }
.cx-person[style*="--ink-2"] .cx-av { background: var(--hover); color: var(--ink-2); }
/* Tomt läge */
.cx-empty { max-width: 380px; margin: 64px auto; text-align: center; color: var(--muted); }
.cx-empty-ic { width: 52px; height: 52px; border-radius: 15px; display: inline-grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 12px; }
.cx-empty h3 { margin: 0 0 6px; font-size: 15px; color: var(--ink); font-weight: 620; }
.cx-empty p { margin: 0 0 16px; font-size: 13px; line-height: 1.5; }
/* Möten: dag för dag */
.cx-day { margin-top: 16px; }
.cx-dayh { position: sticky; top: -6px; z-index: 2; margin: 0 0 6px; padding: 8px 2px 6px; font-size: 11.5px; font-weight: 640; letter-spacing: .04em; text-transform: uppercase;
  color: var(--faint); background: var(--surface); }
.cx-dayh::first-letter { text-transform: uppercase; }
.cx-dayh.today { color: var(--accent); }
.cx-row { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); border: 1px solid var(--line);
  background: var(--surface); margin-bottom: 6px; transition: border-color .12s, box-shadow .12s, transform .12s; }
.cx-row:hover { border-color: color-mix(in srgb, var(--c) 40%, var(--line)); box-shadow: 0 3px 12px rgba(20,24,40,.06); }
.cx-time { width: 62px; flex: none; display: flex; flex-direction: column; line-height: 1.25; font-variant-numeric: tabular-nums; }
.cx-time b { font-size: 14px; font-weight: 640; }
.cx-time small { font-size: 11.5px; color: var(--faint); }
.cx-bar { width: 4px; align-self: stretch; border-radius: 2px; background: var(--c); flex: none; }
.cx-what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cx-what b { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13.5px; min-width: 0; }
.cx-what b > svg { flex: none; color: var(--muted); }
.cx-what small { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.cx-tag { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 11px; font-weight: 580; padding: 1px 7px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; flex: none; }
.cx-tag.ai { background: color-mix(in srgb, var(--c) 10%, var(--surface)); color: color-mix(in srgb, var(--c) 70%, var(--ink)); border-color: color-mix(in srgb, var(--c) 22%, var(--surface)); }
.cx-tk { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px;
  padding: 2px 8px; white-space: nowrap; flex: none; font-variant-numeric: tabular-nums; }
.cx-tk svg { color: var(--muted); }
.cx-owner { display: flex; align-items: center; gap: 7px; width: 150px; flex: none; font-size: 12.5px; color: var(--ink-2); min-width: 0; }
.cx-owner > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-row.masked { background: repeating-linear-gradient(135deg, var(--surface) 0 8px, var(--surface-2) 8px 16px); }
.cx-row.masked .cx-what b { color: var(--muted); }
.cx-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Kunder: tabell */
.cx-ctable { margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.cx-crow { display: grid; grid-template-columns: minmax(220px, 2.2fr) minmax(150px, 1.4fr) minmax(130px, 1.2fr) 82px 72px 92px 168px; align-items: center; gap: 12px;
  padding: 10px 16px; border-top: 1px solid var(--line); font-size: 13px; }
.cx-crow:first-child { border-top: 0; }
.cx-crow:not(.cx-chead):hover { background: var(--surface-2); }
.cx-chead { font-size: 11px; font-weight: 620; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); background: var(--surface-2); padding-top: 9px; padding-bottom: 9px; }
.cx-crow .num { text-align: right; font-variant-numeric: tabular-nums; }
.cx-cust { display: flex; align-items: center; gap: 11px; min-width: 0; }
.cx-cav { width: 34px; height: 34px; border-radius: 17px; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 680; letter-spacing: .02em;
  background: hsl(var(--h) 62% 93%); color: hsl(var(--h) 48% 32%); }
.cx-cname { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cx-cname b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-cname small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-cname small a { color: inherit; text-decoration: none; font-variant-numeric: tabular-nums; }
.cx-cname small a:hover { color: var(--accent); }
.cx-cnext, .cx-clast { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cx-cnext small, .cx-clast small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-clast > span:first-child { color: var(--ink-2); }
.cx-pill { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.cx-cowners { display: flex; align-items: center; }
.cx-cowners .cx-av + .cx-av { margin-left: -5px; }
.cx-cowners .cx-av { box-shadow: 0 0 0 2px var(--surface); }
.cx-cact { display: flex; gap: 4px; justify-content: flex-end; }
.cx-cact .btn { gap: 5px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cx-cav { background: hsl(var(--h) 30% 22%); color: hsl(var(--h) 60% 80%); } }
:root[data-theme="dark"] .cx-cav { background: hsl(var(--h) 30% 22%); color: hsl(var(--h) 60% 80%); }
@media (max-width: 1180px) {
  .cx-crow { grid-template-columns: minmax(200px, 2fr) minmax(140px, 1.4fr) 70px 70px 150px; }
  .cx-crow > .cx-clast, .cx-crow > .cx-cowners { display: none; }
  .cx-owner { width: auto; } .cx-owner > span:last-child { display: none; }
}
@media (max-width: 760px) {
  .cx-listpage .cx-people { display: block; }
  .cx-listpage .cx-people .cx-h { display: none; }
  .cx-listpage .cx-plist { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 2px; scrollbar-width: none; }
  .cx-listpage .cx-person { flex: none; border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px 3px 3px; min-height: 34px; }
  .cx-listpage .cx-person.sel { border-color: var(--accent-line); background: var(--accent-soft); box-shadow: none; }
  .cx-listpage .cx-lhead { padding: 10px 12px; gap: 8px; }
  .cx-listpage .cx-search { order: 3; width: 100%; margin-left: 0; height: 38px; }
  .cx-listpage .cx-seg { margin-left: auto; }
  .cx-scroll { padding: 4px 12px 24px; }
  .cx-row { gap: 10px; padding: 10px; flex-wrap: wrap; }
  .cx-time { width: 50px; }
  .cx-what { flex-basis: calc(100% - 90px); }
  .cx-tk, .cx-owner { margin-left: 74px; }
  .cx-tk + .cx-owner { margin-left: 0; }
  .cx-owner > span:last-child { display: inline; color: var(--muted); font-size: 12px; }
  .cx-what b { flex-wrap: wrap; row-gap: 3px; }
  .cx-ctable { border: 0; background: transparent; border-radius: 0; overflow: visible; }
  .cx-chead { display: none !important; }
  .cx-crow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; background: var(--surface); }
  .cx-crow:first-child { border-top: 1px solid var(--line); }
  .cx-crow > .cx-cust { grid-column: 1 / -1; }
  .cx-crow > .cx-clast { display: flex; }
  .cx-crow > .num { display: none; }
  .cx-crow > .cx-cowners { display: none; }
  .cx-crow > [data-l]:not(.num):not(.cx-cowners)::before { content: attr(data-l); font-size: 10.5px; font-weight: 620; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
  .cx-crow > .cx-cact { grid-column: 1 / -1; justify-content: flex-start; border-top: 1px solid var(--line); padding-top: 8px; }
  .cx-crow > .cx-cact:empty { display: none; }
}

/* ── 4.88.0: Systemadministrationen – fyra avsnitt, varje avsnitts sidor i en egen meny i panelen ── */
.sys2-body { flex: 1; min-height: 0; display: flex; }
.sys2-body > .sys2-content { flex: 1; min-width: 0; }
.sys2-sub { width: 232px; flex: none; display: flex; flex-direction: column; gap: 2px; padding: 16px 12px; border-right: 1px solid var(--line); background: var(--surface-2); overflow-y: auto; }
.sys2-sub-h { display: flex; align-items: center; gap: 8px; padding: 2px 10px 10px; font-size: 11px; font-weight: 640; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.sys2-sub-h svg { color: var(--muted); }
.sys2-sub a { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--ink-2); text-decoration: none; }
.sys2-sub a > svg { flex: none; margin-top: 2px; color: var(--muted); }
.sys2-sub a > span { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.sys2-sub a b { font-weight: 540; font-size: 13.5px; }
.sys2-sub a small { font-size: 11.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sys2-sub a:hover { background: var(--hover); color: var(--ink); }
.sys2-sub a.on { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(20,24,40,.04); }
.sys2-sub a.on b { font-weight: 620; }
.sys2-sub a.on > svg { color: var(--accent); }
.sys2-sub em { font-style: normal; font-size: 11px; font-weight: 650; color: #fff; background: #ef4444; border-radius: 999px; padding: 0 7px; line-height: 18px; align-self: center; }
@media (max-width: 1100px) { .sys2-sub { width: 196px; } .sys2-sub a small { display: none; } }
@media (max-width: 900px) {
  .sys2-body { flex-direction: column; }
  .sys2-sub { width: auto; flex-direction: row; gap: 6px; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; background: var(--surface); }
  .sys2-sub::-webkit-scrollbar { display: none; }
  .sys2-sub-h { display: none; }
  .sys2-sub a { flex: none; align-items: center; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; }
  .sys2-sub a > svg { margin-top: 0; }
  .sys2-sub a small { display: none; }
  .sys2-sub a.on { background: var(--accent-soft); border-color: var(--accent-line); box-shadow: none; }
  body.sys-body .sys2-panel { display: flex; flex-direction: column; }
}
/* 4.88.0: receptionistens fördelningsregler och namn per språk */
.vr-rules { display: flex; flex-direction: column; gap: 8px; }
.vr-rule { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(160px, 1fr); gap: 8px; }
.vr-rule-h { font-size: 11.5px; font-weight: 600; color: var(--muted); }
@media (max-width: 640px) { .vr-rule { grid-template-columns: minmax(0, 1fr); } .vr-rule-h { display: none; } }
.lv-alias { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding-left: 48px; font-size: 12.5px; color: var(--muted); }
@media (max-width: 700px) { .lv-alias { padding-left: 0; grid-row: 3; } }
.lv-alias .input { max-width: 240px; }
/* 4.88.0: "Ej tilldelade" i kalendern och knappen "Ta bokningen" */
.cx-person.cx-un .cx-av { background: color-mix(in srgb, var(--pc) 14%, var(--surface)); color: var(--pc); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pc) 40%, transparent); }
.cx-person.cx-un.off .cx-av { background: transparent; }
.cx-pop-people .cx-take { margin-left: auto; flex: none; }
.cx-pop-people .cx-av svg { width: 12px; height: 12px; }
/* 4.88.0: Social → Konton – fler tjänster och vad de tillåter */
.soa-h2 { margin: 26px 0 10px; font-size: 13px; font-weight: 620; color: var(--ink-2); }
.soa-caps { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.soa-cap { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 560; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: var(--surface-2); cursor: help; }
.soa-cap.yes { color: var(--green, #1C8C68); border-color: color-mix(in srgb, var(--green, #1C8C68) 28%, var(--line)); background: color-mix(in srgb, var(--green, #1C8C68) 8%, var(--surface)); }
.soa-cap.no { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent); }
.soa-off { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); }
.soa-note { display: flex; gap: 7px; align-items: flex-start; margin: 0; padding: 0 16px 12px 74px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.soa-note svg { flex: none; margin-top: 2px; }
.soa-accts li form { display: inline; margin: 0; }
.soa-accts li.soa-err { color: var(--red, #C83E5E); font-size: 12px; border-bottom: 0; padding-top: 0; }
@media (max-width: 640px) { .soa-note, .soa-accts { padding-left: 16px; } }
/* System → Integrationer → sociala medier */
.sm-caps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sm-caps li { display: flex; gap: 10px; align-items: flex-start; }
.sm-caps li div { display: flex; flex-direction: column; gap: 2px; }
.sm-caps small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.sm-cap-ic { width: 22px; height: 22px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.sm-caps li.yes .sm-cap-ic { background: color-mix(in srgb, var(--green, #1C8C68) 14%, var(--surface)); color: var(--green, #1C8C68); }
.sm-caps li.no .sm-cap-ic { background: var(--surface-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.sm-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.5; }
.meta-ic.tiktok, .meta-ic.x { background: #111; color: #fff; } .meta-ic.linkedin { background: #0A66C2; color: #fff; } .meta-ic.pinterest { background: #E60023; color: #fff; }
/* 4.90.0: leveransrapport (studs) – en rad i tråden, rapporten fälls ut vid behov */
.msg.system.dsn { justify-content: center; }
.msg.system.dsn .dsn-box { max-width: min(680px, 92%); }
.msg.system.dsn summary.sys { display: flex; align-items: flex-start; gap: 7px; list-style: none; cursor: pointer; border-radius: 10px; padding: 6px 12px; line-height: 1.45; text-align: left; }
.msg.system.dsn summary.sys::-webkit-details-marker { display: none; }
.msg.system.dsn summary .i { flex: none; margin-top: 2px; }
.msg.system.dsn .dsn-more { flex: none; margin-left: 8px; color: var(--accent); font-weight: 560; white-space: nowrap; }
.msg.system.dsn details[open] .dsn-more { visibility: hidden; }
.msg.system.dsn.bad summary.sys { color: var(--red, #C83E5E); background: color-mix(in srgb, var(--red, #C83E5E) 7%, var(--surface)); border-color: color-mix(in srgb, var(--red, #C83E5E) 28%, var(--line)); }
.msg.system.dsn .dsn-raw { margin-top: 6px; max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.msg.system.dsn .dsn-raw pre { margin: 0; padding: 10px 12px; font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-all; color: var(--ink-2); }

/* ── 4.90.0: mörk ram i varumärkets färg ──────────────────────────────────────────────────────────────
   Ägarens önskan: huvudmenyn och sökraden i en mörk lila ton (Blixtflows färg, mörkad), och allt innehåll i en
   ljus ruta med rundade hörn innanför ramen – som en egen arbetsyta. Bara på datorn (761 px och bredare); mobilen
   har sin bottenmeny. Väljarna börjar med :root för att gå före de äldre lagren för menyn (4.29.2 m.fl.). */
:root { --frame-bg: color-mix(in srgb, #7E45C9 30%, #0B0714); --frame-ink: #FFFFFF; --frame-muted: rgba(255,255,255,.66);
  --frame-faint: rgba(255,255,255,.42); --frame-hover: rgba(255,255,255,.09); --frame-on: rgba(255,255,255,.15); --frame-line: rgba(255,255,255,.12);
  --panel-bg: #ECEEF3; --panel-r: 12px; }
:root[data-theme="dark"] { --frame-bg: #150C22; --panel-bg: var(--bg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --frame-bg: #150C22; --panel-bg: var(--bg); } }
@media (min-width: 761px) {
  :root .shell, :root:not([data-theme="light"]) .shell { background: var(--frame-bg); }   /* går före 4.31.0-regeln för Auto i mörkt läge */
  :root .rail { background: transparent; border-right: 0; box-shadow: none; }
  :root .rail > a, :root .rail > button, :root .rail > .pop > button { color: var(--frame-muted); }
  :root .rail > a .i, :root .rail > button .i, :root .rail > .pop > button .i { color: inherit; }
  :root .rail > a:hover, :root .rail > button:hover, :root .rail > .pop > button:hover { background: var(--frame-hover); color: var(--frame-ink); }
  :root .rail > a.on, :root .rail > a.on:hover { background: var(--frame-on); color: var(--frame-ink); box-shadow: none; }
  :root .rail > a.on .i { color: var(--frame-ink); }
  :root .rail .nav-label { color: var(--frame-faint); }
  :root .rail .nav-num { background: var(--frame-on); color: var(--frame-ink); }
  :root .rail > a.on .nav-num { background: #FFFFFF; color: var(--frame-bg); }
  :root .rail .ws-name b, :root .rail .acct-name b { color: var(--frame-ink); }
  :root .rail .ws-name small, :root .rail .acct-name small { color: var(--frame-muted); }
  :root .rail .pdot.on-avatar { border-color: var(--frame-bg); }
  :root .nav-toggle { color: var(--frame-muted); background: transparent; }
  :root .nav-toggle:hover { background: var(--frame-hover); color: var(--frame-ink); }

  /* Sökraden ligger på den mörka ramen */
  :root .topbar { background: transparent; border: 0; box-shadow: none; }
  :root .topsearch { background: rgba(255,255,255,.08); border-color: var(--frame-line); color: var(--frame-muted); }
  :root .topsearch:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.2); color: var(--frame-ink); }
  :root .topsearch kbd { background: transparent; border-color: rgba(255,255,255,.22); color: var(--frame-muted); }
  :root .topbar .btn.top-ic { color: var(--frame-muted); background: transparent; border-color: transparent; box-shadow: none; }
  :root .topbar .btn.top-ic:hover { color: var(--frame-ink); background: var(--frame-hover); }
  :root .topbar .btn.top-sys { color: #FECACA; border-color: rgba(254,202,202,.4); background: transparent; box-shadow: none; }
  :root .topbar .btn.top-sys:hover { background: rgba(254,202,202,.12); }

  /* Den ljusa rutan: allt innehåll, med rundade hörn mot ramen */
  :root main.frame { background: var(--panel-bg); border-radius: var(--panel-r); margin: 0 8px 8px 0; padding-top: 8px; overflow: hidden; }
}
/* 4.90.0: dra och släpp filer i Nytt meddelande */
#compose.drop-on > form { position: relative; }
#compose.drop-on > form::after { content: "Släpp filerna här – de bifogas"; position: absolute; inset: 8px; z-index: 5; pointer-events: none;
  display: grid; place-items: center; border: 2px dashed var(--accent); border-radius: 10px; font-weight: 600; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
/* 4.90.1: Ångra skicka fortsätter på nästa sida – ingen ny inglidning, samma ruta som står kvar */
.undo-send.cont { animation: none; }
/* 4.90.2: avisering i BlixtDesk – någon nämnde mig eller gav mig ett ärende */
.bd-notices { position: fixed; right: 18px; bottom: 84px; z-index: 1150; display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 32px)); }
.bd-notice { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 12px 14px; border-radius: 10px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-left: 3px solid var(--accent); box-shadow: 0 10px 28px rgba(16, 18, 30, .16); text-decoration: none; animation: usIn .22s cubic-bezier(.2, .8, .2, 1); }
.bd-notice b { font-size: 13.5px; font-weight: 600; grid-column: 1; }
.bd-notice span { grid-column: 1; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-notice i { grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--accent); }
.bd-notice:hover { border-color: var(--accent-line, var(--line-strong)); }
@media (max-width: 760px) { .bd-notices { right: 12px; left: 12px; width: auto; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }
/* 4.90.3: @-listan – kollegor med bild eller initialer, status, roll och matchade bokstäver */
.mini-menu.mm-people { min-width: 300px; max-height: 380px; z-index: 1300; }
.mini-menu .mm-head { padding: 6px 9px 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.mini-menu button.mm-row { flex-direction: row; align-items: center; gap: 10px; padding: 6px 8px; }
.mini-menu .mm-av { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 11.5px; font-weight: 650; }
.mini-menu .mm-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.mini-menu .mm-av i { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--surface); }
.mini-menu .mm-txt { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.mini-menu .mm-txt b { color: var(--ink); font-weight: 560; }
.mini-menu .mm-txt b u { text-decoration: none; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); border-radius: 3px; }
.mini-menu .mm-txt small em { font-style: normal; color: var(--accent); }
.mini-menu button.mm-row.on .mm-txt b, .mini-menu button.mm-row:hover .mm-txt b { color: var(--accent); }
/* 4.91.0: Ny chatt – två val (direkt eller grupp), gruppnamn, sök och plus vid rubrikerna i teamchatten */
dialog.modal:focus-visible { outline: none; }
.nc-kind { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nc-kind label { position: relative; cursor: pointer; }
.nc-kind input { position: absolute; opacity: 0; pointer-events: none; }
.nc-kind span { display: grid; grid-template-columns: auto 1fr; column-gap: 9px; row-gap: 1px; align-items: center; height: 100%; box-sizing: border-box;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); transition: border-color .12s, background .12s; }
.nc-kind span .i { grid-row: 1 / 3; color: var(--muted); }
.nc-kind b { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.nc-kind small { grid-column: 2; font-size: 12px; color: var(--muted); line-height: 1.35; }
.nc-kind label:hover span { background: var(--hover); }
.nc-kind input:checked + span { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.nc-kind input:checked + span .i { color: var(--accent); }
.nc-kind input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.nc-name[hidden] { display: none; }
.nc-pick-head { display: flex; align-items: baseline; justify-content: space-between; font-size: 12.5px; font-weight: 560; color: var(--ink-2); margin-bottom: -6px; }
.nc-pick-head small { font-weight: 500; }
.nc-search { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); }
.nc-search:focus-within { border-color: var(--accent); }
.nc-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13.5px; }
.nc-people { max-height: 280px; }
.nc-people .tc-person[hidden], .nc-none[hidden] { display: none; }
.nc-none { padding: 8px; }
.tc-side .side-add { margin-left: auto; width: 20px; height: 20px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--faint); cursor: pointer; padding: 0; }
.tc-side .side-add:hover { background: var(--hover); color: var(--ink); }
.tc-welcome-act { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 520px) { .nc-kind { grid-template-columns: 1fr; } }
/* 4.92.0: AI-gräns – val på planen och per företag (System), förbrukning och nollställning */
.ai-limit-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.ai-limit-opt { position: relative; cursor: pointer; display: block; }
.ai-limit-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ai-limit-opt > span { display: flex; flex-direction: column; gap: 1px; height: 100%; box-sizing: border-box; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); min-width: 150px; }
.ai-limit-opt > span b { font-size: 13px; font-weight: 600; color: var(--ink); }
.ai-limit-opt > span small { font-size: 11.5px; color: var(--muted); }
.ai-limit-opt:hover > span { background: var(--hover); }
.ai-limit-opt input:checked + span { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.ai-limit-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.ai-limit-num { display: inline-flex; align-items: center; gap: 8px; }
.ai-limit-num[hidden] { display: none; }
.ai-limit-num .input { width: 160px; }
.ai-limit-num small { color: var(--muted); }
fieldset.ai-limit-pick { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.ai-limit-pick > span { margin-bottom: 4px; }
.ai-co-big { font-size: 22px; font-weight: 650; letter-spacing: -.01em; }
.ai-co-kv { grid-template-columns: 140px 1fr; }
.ai-co-actions { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.ai-co-limit, .ai-co-reset { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.ai-co-limit .ai-limit-opt { width: 100%; }
.ai-co-limit .ai-limit-opt > span { flex-direction: row; align-items: baseline; gap: 8px; }
.ai-co-reset .btn { margin-top: auto; }
@media (max-width: 860px) { .ai-co-actions { grid-template-columns: 1fr; } }
.ai-co .card-head h3 { display: flex; align-items: center; gap: 7px; }
/* 4.93.0: livesamarbete på projektsidor – kollegor i sidhuvudet, och en ram + namnetikett under blocket de skriver i */
.pg-peers { display: inline-flex; align-items: center; gap: 0; margin-right: 4px; }
.pg-peers[hidden] { display: none; }
.pg-peer { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; color: #fff; font-size: 10px; font-weight: 650;
  background: var(--peer, var(--muted)); box-shadow: 0 0 0 2px var(--surface); margin-left: -5px; }
.pg-peer:first-child { margin-left: 0; }
.pg-peer img { width: 100%; height: 100%; object-fit: cover; }
.pg-peer.more { background: var(--hover); color: var(--ink-2); }
.pg-peers-txt { margin-left: 7px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.bk.peer-on { box-shadow: -3px 0 0 0 var(--peer); background: color-mix(in srgb, var(--peer) 6%, transparent); margin-bottom: 22px; }   /* plats för etiketten – den täcker aldrig nästa block */ 
article.doc .bk.peer-on { margin-bottom: 22px; }   /* går före "article.doc .bk { margin: 1px 0 }" */
.bk-peer-tag { position: absolute; left: 0; top: calc(100% - 2px); z-index: 4; display: flex; gap: 4px; pointer-events: none; user-select: none; }
.bk-peer { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px 0 3px; border-radius: 5px; background: var(--peer); color: #fff;
  font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.bk-peer i { width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: rgba(255, 255, 255, .25); font-style: normal; font-size: 8.5px; }
.bk-peer i img { width: 100%; height: 100%; object-fit: cover; }
.bk-peer em { font-style: normal; font-weight: 500; opacity: .85; animation: bk-peer-pulse 1.2s ease-in-out infinite; }
@keyframes bk-peer-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .bk-peer em { animation: none; } }
@media print { .pg-peers, .bk-peer-tag { display: none !important; } .bk.peer-on { box-shadow: none; background: none; } }
/* 4.93.0: Skicka med pil – en enda knapp med två delar, samma färg, samma höjd och rundade hörn i båda temana.
   Rotorsaken till det trasiga utseendet: pilen ligger i en .pop, så reglerna för ".btn-split > .btn:last-child"
   träffade den aldrig, medan ".btn-split .btn:first-child" gjorde den rund till VÄNSTER. Den blev 24 px hög mot
   Skickas 30 px, och behållarens ljusare accentfärg lyste igenom runt den i mörkt läge. */
:root { --send-bg: var(--accent); --send-bg-hover: color-mix(in srgb, var(--accent) 88%, #000); --send-ink: var(--accent-ink, #fff); --send-sep: color-mix(in srgb, #fff 30%, transparent); }
:root[data-theme="dark"] { --send-bg: color-mix(in srgb, var(--accent) 78%, #000); --send-bg-hover: color-mix(in srgb, var(--accent) 70%, #000); --send-ink: #fff; --send-sep: color-mix(in srgb, #fff 18%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --send-bg: color-mix(in srgb, var(--accent) 78%, #000); --send-bg-hover: color-mix(in srgb, var(--accent) 70%, #000); --send-ink: #fff; --send-sep: color-mix(in srgb, #fff 18%, transparent); } }
:root .btn-split { display: inline-flex; align-items: stretch; background: transparent !important; box-shadow: none !important; border-radius: 9px; overflow: visible; }
:root .btn-split > .pop { display: flex; }
:root .btn-split > .btn.primary:first-child,
:root .btn-split > .pop > .btn.primary { height: 32px; background: var(--send-bg) !important; border: 0 !important; color: var(--send-ink) !important; box-shadow: none !important; filter: none; transition: background-color .12s; }
:root .btn-split > .btn.primary:first-child { padding: 0 16px !important; border-radius: 9px 0 0 9px !important; font-weight: 600; font-size: 13.5px; letter-spacing: .01em; }
:root .btn-split > .pop > .btn.primary { width: 32px; padding: 0 !important; display: grid; place-items: center; border-radius: 0 9px 9px 0 !important; border-left: 1px solid var(--send-sep) !important; }
:root .btn-split > .btn.primary:first-child:hover, :root .btn-split > .pop > .btn.primary:hover, :root .btn-split > .pop.open > .btn.primary { background: var(--send-bg-hover) !important; filter: none; }
:root .btn-split > .btn.primary:focus-visible, :root .btn-split > .pop > .btn.primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; position: relative; z-index: 1; }
:root .btn-split > .btn.primary:disabled { opacity: .6; }
:root .btn-split > .pop > .btn.primary .i { width: 14px; height: 14px; transition: transform .15s; }
:root .btn-split > .pop.open > .btn.primary .i { transform: rotate(180deg); }
/* Utan pilen (bara Skicka, t.ex. när det inte går att svara med "och…") blir knappen rund runt om */
:root .btn-split > .btn.primary:only-child { border-radius: 9px !important; }
/* 4.94.0: klipp ut / kopiera / klistra in block och dra till en undersida */
.bk-pastebar { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 459; display: flex; align-items: center; gap: 4px;
  padding: 6px 6px 6px 16px; border-radius: 10px; background: #2F2F2F; color: #fff; font-size: 13.5px; box-shadow: 0 8px 28px rgba(15, 15, 15, .3); max-width: calc(100vw - 24px); }
.bk-pastebar[hidden] { display: none; }
.bk-pastebar span { margin-right: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bk-pastebar button { border: 0; background: transparent; color: #fff; font: inherit; min-height: 34px; padding: 0 12px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.bk-pastebar button:hover { background: rgba(255, 255, 255, .12); }
.bk-pastebar [data-pb-go] { background: rgba(255, 255, 255, .14); font-weight: 600; }
.bk-pastebar [data-pb-x] { font-size: 17px; padding: 0 10px; color: rgba(255, 255, 255, .7); }
@media (max-width: 700px) { .bk-pastebar { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }
.bk.bk-cut { opacity: .45; }
.bk.bk-cut::after { content: ''; position: absolute; inset: 0; border: 1px dashed var(--line-strong, rgba(0, 0, 0, .2)); border-radius: 6px; pointer-events: none; }
article.doc .bk.drop-into, .bk.drop-into { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: 0 0 0 2px var(--accent) inset; border-radius: 6px; }
.pg-tree .pg-item.drop-into { background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: 0 0 0 2px var(--accent) inset; }
article.doc .bk.drop-into::after, .pg-tree .pg-item.drop-into::after { content: attr(data-drop-label); position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding: 2px 8px; border-radius: 5px;
  background: var(--accent); color: var(--accent-ink, #fff); font-size: 11.5px; font-weight: 600; white-space: nowrap; pointer-events: none; border: 0; bottom: auto; left: auto; }
.pg-tree .pg-item.drop-into { position: relative; }
.pg-tree .pg-item.drop-into::after { font-size: 10.5px; padding: 1px 6px; }
/* 4.95.0: Ladda ner allt till datorn (System → Säkerhetskopior) */
.dl-backup { padding: 18px 20px; margin-bottom: 14px; }
.dl-backup-head { display: flex; gap: 12px; align-items: flex-start; }
.dl-backup-head h3 { margin: 0 0 2px; font-size: 15px; }
.dl-backup-head p { margin: 0; font-size: 13px; }
.dl-backup-ic { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.dl-parts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.dl-part { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--surface); }
.dl-part.on { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.dl-part input { margin-top: 2px; accent-color: var(--accent); }
.dl-part b { display: block; font-size: 13.5px; font-weight: 600; }
.dl-part small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.dl-backup-foot { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.dl-backup-foot .dl-pw { flex: 1; min-width: 220px; margin: 0; }
.dl-warn { display: flex; gap: 6px; align-items: flex-start; margin: 10px 0 0; }
@media (max-width: 760px) { .dl-parts { grid-template-columns: 1fr; } }

/* ── 4.96.0: automationer i tre steg – namn & konton, flöde, granska & aktivera ── */
.sof [data-stage][hidden] { display: none !important; }
.sof-steps { display: flex; align-items: center; gap: 6px; }
.sof-steps button { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; border: 0; border-radius: var(--r); background: transparent; font: inherit; font-size: 12.5px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.sof-steps button i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 650; background: var(--hover); color: var(--muted); }
.sof-steps button:hover { background: var(--hover); color: var(--ink); }
.sof-steps button.act { color: var(--ink); font-weight: 600; } .sof-steps button.act i { background: var(--accent); color: var(--accent-ink); }
.sof-steps button.done i { background: var(--green); color: #fff; }
.sof-sbar { width: 18px; height: 1.5px; background: var(--line-strong); border-radius: 1px; }
.sof-stage { flex: 1; min-height: 0; overflow-y: auto; background: var(--surface-2); padding: 32px 20px 48px; }
.sof-card { max-width: 680px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 28px; }
.sof-card.wide { max-width: 820px; }
.sof-card h2 { margin: 0 0 4px; font-size: 16px; font-weight: 650; color: var(--ink); }
.sof-card > p.muted { margin: 0 0 12px; font-size: 13px; line-height: 1.5; }
.sof-bigname { height: 44px; font-size: 16px; font-weight: 600; }
.sof-accs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.sof-acc { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 36px 11px 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); font: inherit; text-align: left; cursor: pointer; color: var(--ink); }
.sof-acc:hover { border-color: var(--line-strong); }
.sof-acc b { display: block; font-size: 13.5px; font-weight: 600; } .sof-acc small { display: block; font-size: 12px; color: var(--muted); }
.sof-acc-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); flex: none; font-size: 16px; color: var(--accent); }
.sof-acc > i { position: absolute; right: 12px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.sof-acc.on { border-color: var(--accent-line); background: var(--accent-soft); }
.sof-acc.on > i { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--surface); }
.sof-acc:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sof-empty { font-size: 13px; color: var(--muted); }
.sof-cardfoot { display: flex; align-items: center; gap: 8px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.sof-accline { margin: 0 0 6px; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.sof-vars { display: grid; gap: 6px; margin-bottom: 6px; }
.sof-var { display: flex; gap: 6px; align-items: flex-start; }
.sof-var textarea { min-height: 0 !important; flex: 1; }
.sof-vn { width: 20px; height: 20px; margin-top: 7px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 650; color: var(--muted); background: var(--hover); flex: none; }
.sof-rv { display: grid; grid-template-columns: 110px 1fr; gap: 10px 16px; margin: 16px 0; font-size: 13.5px; color: var(--ink-2); align-items: start; }
.sof-rv-k { font-size: 12px; font-weight: 600; color: var(--muted); padding-top: 2px; }
.sof-rv .sof-chips { display: inline-flex !important; }
.sof-rv-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.sof-rv-steps li { display: flex; gap: 10px; align-items: flex-start; }
.sof-rv-steps b { display: block; font-size: 13px; color: var(--ink); } .sof-rv-steps small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.sof-rv-steps em { font-style: normal; color: var(--accent); font-weight: 600; }
.sof-rv-warn { background: var(--red-soft); border: 1px solid color-mix(in srgb, var(--red) 30%, transparent); border-radius: var(--r); padding: 10px 14px; font-size: 13px; color: var(--ink); }
.sof-rv-warn ul { margin: 4px 0 0; padding-left: 18px; }
.sof-rv-ok { background: var(--green-soft); border-radius: var(--r); padding: 10px 14px; font-size: 13px; color: var(--green); font-weight: 600; }
.sof-rv-check { margin-top: 12px; font-size: 12.5px; }
.sof-ck { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); }
.sof-ck b { font-size: 13px; } .sof-ck ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; }
.sof-ck li.ok { color: var(--green); } .sof-ck li.bad { color: var(--red); } .sof-ck em { font-style: normal; color: var(--ink-2); display: block; }
@media (max-width: 1100px) { .sof-steps button { padding: 0 6px; font-size: 0; gap: 0; } .sof-steps button i { font-size: 11px; } .sof-sbar { width: 10px; } }
@media (max-width: 760px) { .sof-card { padding: 18px; } .sof-rv { grid-template-columns: 1fr; gap: 4px; } .sof-rv-k { padding-top: 8px; } }
/* 4.96.0: automationslistan – mallar och kontrollen av Meta-kopplingen */
.flw-acc { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); margin-left: 4px; white-space: nowrap; }
.so-flow-ch { flex-wrap: wrap; justify-content: flex-end; max-width: 300px; row-gap: 4px; }
.flw-tpl-head { margin: 26px 0 10px; } .flw-tpl-head b { display: block; font-size: 14px; color: var(--ink); } .flw-tpl-head small { color: var(--muted); font-size: 12.5px; }
.flw-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.flw-tpl { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); text-decoration: none; min-height: 132px; }
.flw-tpl:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.flw-tpl b { font-size: 13.5px; font-weight: 600; margin-top: 6px; } .flw-tpl small { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.flw-tpl-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); }
.flw-tpl-tr { margin-top: auto; padding-top: 6px; font-size: 11px; font-weight: 600; color: var(--faint); }
.flw-tpl.blank { border-style: dashed; } .flw-tpl.blank .flw-tpl-ic { background: var(--surface-2); color: var(--muted); border-color: var(--line); }
.flw-check { margin: 0 0 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.flw-check p { margin: 0; }
.flw-ck-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .flw-ck-head b { flex: 1; font-size: 14px; }
.flw-ck { padding: 10px 0; border-top: 1px solid var(--line); } .flw-ck > b { font-size: 13.5px; } .flw-ck > b small { color: var(--muted); font-weight: 500; }
.flw-ck ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-2); }
.flw-ck li span { font-weight: 600; } .flw-ck li.ok span { color: var(--green); } .flw-ck li.bad span { color: var(--red); }
.flw-ck li em { display: block; font-style: normal; color: var(--muted); margin-top: 1px; }
.flw-err { color: var(--red); }
/* ── 4.96.0: Kanaler – grupperad lista och galleriet "Lägg till kanal" ── */
.chl { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.chl-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px) 70px 100px; align-items: center; gap: 14px; padding: 11px 16px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
a.chl-row:hover { background: var(--hover); }
.chl-head { border-top: 0; background: var(--surface-2); padding-top: 9px; padding-bottom: 9px; font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--faint); }
.chl-group { padding: 14px 16px 6px; border-top: 1px solid var(--line); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.chl-head + .chl-group { border-top: 0; }
.chl-group span { margin-left: 4px; color: var(--muted); }
.chl-group + .chl-row { border-top: 0; }
.chl-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.chl-ic { width: 34px; height: 34px; border-radius: var(--r); display: grid; place-items: center; flex: none; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); }
.chl-ic .brand-mono { border: 0; background: transparent; font-size: 11px; }
.chl-txt { min-width: 0; } .chl-txt b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chl-txt small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chl-feat { display: flex; flex-wrap: wrap; gap: 5px; }
.chl-chip { display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 7px; border-radius: var(--r-sm); font-size: 11.5px; font-weight: 500; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); white-space: nowrap; }
.chl-chip.on { color: var(--green); background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 25%, transparent); }
.chl-chip.warn { color: var(--saffron); background: var(--saffron-soft); border-color: color-mix(in srgb, var(--saffron) 30%, transparent); }
.chl .num { text-align: right; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chl-act { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; color: var(--muted) !important; }
.chl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; } .chl-dot.err { background: var(--red); } .chl-dot.warn { background: var(--saffron); }
@media (max-width: 760px) {
  .chl-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
  .chl-head { display: none; } .chl-feat { grid-column: 1 / -1; padding-left: 46px; } .chl-row > .num:not(.chl-act) { grid-row: 1; grid-column: 2; } .chl-act { display: none !important; }
}
dialog.chadd { width: min(860px, calc(100vw - 24px)); max-height: min(640px, calc(100dvh - 32px)); overflow: hidden; }
dialog.chadd::backdrop { background: rgba(15, 18, 28, .30); backdrop-filter: blur(8px) saturate(.9); -webkit-backdrop-filter: blur(8px) saturate(.9); }
.chadd-in { display: flex; min-height: 520px; max-height: inherit; }
.chadd-cats { width: 200px; flex: none; display: flex; flex-direction: column; gap: 2px; padding: 18px 10px; background: var(--surface-2); border-right: 1px solid var(--line); }
.chadd-cats b { font-size: 15px; font-weight: 650; padding: 0 10px 12px; }
.chadd-cats button { text-align: left; padding: 8px 10px; border: 0; border-radius: var(--r); background: transparent; font: inherit; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.chadd-cats button:hover { background: var(--hover); }
.chadd-cats button.act { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.chadd-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 14px 18px 16px; overflow-y: auto; }
.chadd-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .chadd-top b { font-size: 14px; }
.chadd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.chadd-opt { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); text-decoration: none; }
.chadd-opt[hidden] { display: none; }
.chadd-opt:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.chadd-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chadd-ic { min-width: 40px; height: 40px; padding: 0 6px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; gap: 3px; flex: none; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); box-sizing: border-box; }
.chadd-ic .brand-mono { border: 0; background: transparent; }
.chadd-tx b { display: block; font-size: 13.5px; font-weight: 600; } .chadd-tx small { display: block; font-size: 12px; line-height: 1.45; color: var(--muted); margin-top: 2px; }
.chadd-tx em { display: inline-block; margin-top: 6px; font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: var(--r-sm); background: var(--green-soft); color: var(--green); }
.chadd-foot { margin: auto 0 0; padding-top: 14px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
@media (max-width: 760px) {
  .chadd-in { flex-direction: column; min-height: 0; } .chadd-cats { width: auto; flex-direction: row; overflow-x: auto; padding: 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .chadd-cats b { display: none; } .chadd-cats button { white-space: nowrap; } .chadd-grid { grid-template-columns: 1fr; }
}
.meta-wait { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(15, 18, 28, .30); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.meta-wait[hidden] { display: none; }
.meta-wait-card { width: min(420px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); padding: 26px 24px 20px; text-align: center; }
.meta-wait-ic { display: inline-flex; gap: 4px; align-items: center; justify-content: center; min-width: 52px; height: 52px; padding: 0 8px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 12px; box-sizing: border-box; }
.meta-wait-card h3 { margin: 0 0 6px; font-size: 16px; } .meta-wait-card p { margin: 0 0 16px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.meta-wait-row { display: flex; gap: 8px; justify-content: center; }
/* 4.96.0: kanalens chattbot i trådens huvud */
.thread-bot { display: inline-flex; margin-left: 6px; }
.thread-bot button { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: var(--r-sm); border: 1px solid color-mix(in srgb, var(--green) 25%, transparent); background: var(--green-soft); color: var(--green); font: 500 11px/1 inherit; font-family: inherit; cursor: pointer; }
.thread-bot.paused button { background: var(--surface-2); border-color: var(--line); color: var(--muted); }
/* ── 4.96.0: välkomstsidan – vit, centrerad och lugn ── */
.wel2 { min-height: 100%; background: var(--surface); display: flex; justify-content: center; padding: clamp(36px, 9vh, 96px) 20px 56px; box-sizing: border-box; }
.wel2-in { width: 100%; max-width: 640px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.wel2-mark { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); margin-bottom: 18px; }
.wel2-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); padding: 4px 11px; border-radius: 999px; }
.wel2 h1 { margin: 16px 0 8px; font-size: clamp(28px, 4vw, 38px); line-height: 1.12; letter-spacing: -.025em; font-weight: 750; color: var(--ink); }
.wel2-lead { margin: 0; max-width: 500px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.wel2-prog { width: 100%; max-width: 420px; display: flex; align-items: center; gap: 12px; margin: 28px 0 22px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.wel2-prog .bar { flex: 1; height: 6px; border-radius: 999px; background: var(--hover); overflow: hidden; }
.wel2-prog .bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.wel2-steps { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 10px; text-align: left; }
.wel2-step { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .15s, background .15s; }
.wel2-step:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.wel2-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wel2-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--surface-2); border: 1px solid var(--line); color: var(--accent); }
.wel2-step.done .wel2-ic { background: var(--green-soft); color: var(--green); border-color: transparent; }
.wel2-tx { flex: 1; min-width: 0; display: grid; gap: 1px; }
.wel2-tx small { font-size: 11px; font-weight: 600; color: var(--faint); letter-spacing: .03em; text-transform: uppercase; }
.wel2-tx b { font-size: 15px; font-weight: 600; } .wel2-tx > span { font-size: 13px; color: var(--muted); line-height: 1.45; }
.wel2-step.done .wel2-tx b { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.wel2-go { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.wel2-step.done .wel2-go { color: var(--green); }
.wel2-foot { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
@media (max-width: 560px) { .wel2-step { padding: 14px; gap: 12px; } .wel2-go { display: none; } }
/* 4.96.0: kontona på automationsraden får inte trycka ut siffrorna; välkomstsidan tar hela bredden */
.so-flow-ch { flex: 0 1 auto; min-width: 0; max-width: 240px; }
.so-flow-n { flex: none; }
.so-flow-main { flex: 1 1 0; }
.flw-acc { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.wel2 { flex: 1 1 auto; width: 100%; align-self: stretch; }

/* 4.96.1: inloggningen i systemets mörka läge. Reglerna ovan gällde bara när mörkt läge valts i appen
   ([data-theme="dark"]); med "Auto" och mörk dator blev kortet mörkt men texten stod kvar i mörklila
   (rubrik och ifyllda fält syntes inte). Samma färger som det valda mörka läget. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .auth2-body { background: #150A22; color: #ECEAF0; }
  :root:not([data-theme="light"]) .auth2-card { background: #1E1130; border-color: #33224A; }
}
/* Rubrik, fält och kryssrutans text får alltid färg från temat – inte från sidans mörklila grundfärg */
.auth2-card h1 { color: #2C0E3D; }
.auth2-card .input { color: var(--ink); background: var(--surface, #fff); }
.auth2-card label.row b { color: #2C0E3D; }
[data-theme="dark"] .auth2-card h1, [data-theme="dark"] .auth2-card .input, [data-theme="dark"] .auth2-card label.row b { color: #ECEAF0; }
[data-theme="dark"] .auth2-card .input { background: #170C25; border-color: #3B2A55; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .auth2-card h1, :root:not([data-theme="light"]) .auth2-card .input, :root:not([data-theme="light"]) .auth2-card label.row b { color: #ECEAF0; }
  :root:not([data-theme="light"]) .auth2-card .input { background: #170C25; border-color: #3B2A55; }
}

/* ─── 4.97.0: Social – sidan rullar, ny skrivruta, kontona och kalendern ─────────────────────────────
   .frame har overflow: hidden, och Social saknade en egen rullningsyta – allt under skärmkanten (knapparna
   Publicera nu/Schemalägg) gick inte att nå. Nu rullar huvudytan och sidomenyn var för sig, som i inkorgen.
   (Klassen .so-main används också av en rad i listan – därför ".so-wrap > .so-main".) */
.so-wrap { min-height: 0; overflow: hidden; }
.so-wrap > .so-main { display: block; height: 100%; overflow-y: auto; overscroll-behavior: contain; gap: 0; }
.so-wrap > .so-side2 { overflow-y: auto; }

/* Skrivrutan */
.sx-page { padding: 22px 28px 0; }
.sx-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.sx-head h1 { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -.01em; color: var(--ink); }
.sx-head p { margin: 3px 0 0; color: var(--muted); font-size: 13.5px; }
.sx-head > div:first-child { flex: 1; min-width: 240px; }
.sx-kind { display: inline-flex; padding: 3px; gap: 2px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line); }
.sx-kind label { position: relative; }
.sx-kind input { position: absolute; opacity: 0; pointer-events: none; }
.sx-kind span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 7px; font-size: 13px; color: var(--muted); cursor: pointer; }
.sx-kind input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06); font-weight: 600; }
.sx-kind input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.sx-story-note { display: flex; align-items: center; gap: 6px; margin: -6px 0 14px; font-size: 12.5px; color: var(--muted); }
.sx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 20px; align-items: start; max-width: 1180px; }
.sx-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sx-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.sx-card-h { display: flex; align-items: center; gap: 10px; }
.sx-card-h h2 { margin: 0; font-size: 14px; font-weight: 650; color: var(--ink); }
.sx-step { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); flex: none; }
.sx-muted { color: var(--muted); font-size: 12.5px; }
.sx-link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.sx-link:hover { text-decoration: underline; }
.sx-empty { align-items: flex-start; max-width: 520px; } .sx-empty p { margin: 0; color: var(--muted); }

/* Konton att publicera på: en ruta per konto med märke, namn, typ och bock */
.sx-accs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.sx-acc { position: relative; display: block; cursor: pointer; border-radius: 9px; }
.so-wrap .sx-acc.sc-acc { border-radius: 9px; }
.sx-acc input { position: absolute; opacity: 0; pointer-events: none; }
.sx-acc-in { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); transition: border-color .12s, background .12s; }
.sx-acc:hover .sx-acc-in { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)); }
.sx-acc input:checked + .sx-acc-in { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); box-shadow: inset 0 0 0 1px var(--accent); }
.sx-acc input:focus-visible + .sx-acc-in { outline: 2px solid var(--accent); outline-offset: 2px; }
.sx-acc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sx-acc-t strong { font-size: 13.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-acc-t small { font-size: 11.5px; color: var(--muted); }
.sx-tick { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; color: transparent; flex: none; font-style: normal; }
.sx-acc input:checked + .sx-acc-in .sx-tick { background: var(--accent); border-color: var(--accent); color: #fff; }
.sx-acc.sc-acc-off { opacity: .4; pointer-events: none; }
/* Märken i plattformens färg (bokstäver, inga logotyper) */
.sx-badge { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; font-style: normal; font-size: 11.5px; font-weight: 750; letter-spacing: .02em; color: #fff; background: #6B7280; }
.sx-badge.facebook { background: #1877F2; }
.sx-badge.instagram { background: linear-gradient(135deg, #F58529 0%, #DD2A7B 55%, #8134AF 100%); }
.sx-badge.linkedin { background: #0A66C2; }
.sx-badge.x, .sx-badge.tiktok { background: #111; }
.sx-badge.pinterest { background: #E60023; }
.sx-badge.whatsapp_meta, .sx-badge.whatsapp { background: #25D366; }
.sx-badge.lg { width: 40px; height: 40px; border-radius: 10px; font-size: 14px; }
.sx-status { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-alert { border: 1px solid color-mix(in srgb, var(--red) 35%, transparent); background: var(--red-soft); color: var(--ink); border-radius: 10px; padding: 12px 14px; font-size: 13px; }
.sx-alert > b { display: flex; align-items: center; gap: 6px; color: var(--red); }
.sx-alert ul { margin: 8px 0 6px; padding-left: 18px; } .sx-alert li { margin: 3px 0; }
.sx-alert small { color: var(--muted); }

/* Innehåll */
.sx-ai { display: flex; gap: 8px; align-items: center; }
.sx-ai .input { flex: 1; min-width: 0; }
.sx-ai-ic { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.sx-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sx-lbl { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; font-weight: 600; color: var(--ink-2, var(--ink)); }
.sx-text { min-height: 150px; resize: vertical; line-height: 1.5; font-size: 14px; }
.sx-lbl .over { color: var(--red); font-weight: 700; }
.sx-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px; border: 1.5px dashed var(--line-strong); border-radius: 9px; color: var(--muted); cursor: pointer; text-align: center; transition: border-color .12s, background .12s; }
.sx-drop b { color: var(--ink); font-size: 13.5px; font-weight: 600; } .sx-drop small { font-size: 12px; }
.sx-drop:hover, .sx-drop.over, .sx-drop:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); outline: none; }
.sx-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-thumbs:empty { display: none; }
.sx-thumbs .sc-thumb { width: 84px; height: 84px; border-radius: 8px; overflow: hidden; position: relative; background: var(--surface-2); border: 1px solid var(--line); }
.sx-thumbs .sc-thumb img, .sx-thumbs .sc-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-thumbs .sc-thumb button { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; line-height: 1; font-size: 14px; }

/* När? */
.sx-when { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sx-opt { position: relative; cursor: pointer; }
.sx-opt input { position: absolute; opacity: 0; pointer-events: none; }
.sx-opt > div { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: 9px; color: var(--muted); }
.sx-opt > div .i { grid-row: span 2; }
.sx-opt strong { font-size: 13.5px; color: var(--ink); font-weight: 600; }
.sx-opt small { font-size: 12px; color: var(--muted); }
.sx-opt input:checked + div { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); color: var(--accent); }
.sx-opt input:focus-visible + div { outline: 2px solid var(--accent); outline-offset: 2px; }
.sx-sched { display: grid; grid-template-columns: 1fr 200px; gap: 10px; }
.sx-sched[hidden] { display: none; }

/* Förhandsvisning: följer med när sidan rullar */
.sx-prev { position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 140px); overflow-y: auto; padding-bottom: 8px; }
.sx-prev-h { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.sx-prev-list { display: flex; flex-direction: column; gap: 8px; }
.sx-prev-list .pv-label { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.sx-prev .pv { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: none; overflow: hidden; }
.sx-prev .pv-media img, .sx-prev .pv-ig-media img, .sx-prev .pv-grid img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; }
.sx-prev .pv-ig-media { aspect-ratio: 1 / 1; background: var(--surface-2); overflow: hidden; position: relative; }
.sx-prev .pv-ig-media img { height: 100%; max-height: none; }
.sx-prev-empty { margin: 0; padding: 18px; border: 1px dashed var(--line-strong); border-radius: 10px; text-align: center; }
.sx-prev-empty[hidden] { display: none; }

/* Knappraden: alltid synlig längst ned */
.sx-bar { grid-column: 1 / -1; position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 12px 64px 16px 0; margin-top: 4px; background: linear-gradient(to bottom, transparent, var(--surface) 30%); }
.sx-bar-sum { flex: 1; text-align: right; font-size: 12.5px; color: var(--muted); }
.sx-bar .btn[hidden] { display: none; }
@media (max-width: 1100px) { .sx-grid { grid-template-columns: 1fr; } .sx-prev { position: static; max-height: none; } }
@media (max-width: 640px) { .sx-page { padding: 14px 12px 0; } .sx-when, .sx-sched { grid-template-columns: 1fr; } .sx-bar-sum { display: none; } .sx-bar { padding-right: 0; } .sx-bar .btn.primary { flex: 1; justify-content: center; } }

/* Kalendern (4.97.0): dra till en annan dag i vecka och månad, välj klockslag i en liten ruta */
.so-post[draggable=true], .so-mpost[draggable=true] { cursor: grab; }
.so-post[draggable=true]:active, .so-mpost[draggable=true]:active { cursor: grabbing; }
.so-mpost.dragging { opacity: .4; }
.so-mcell { transition: background .12s, border-color .12s; }
.so-mcell.past { opacity: .7; }
.so-mcell.over { background: var(--accent-soft); border-color: var(--accent); }
.so-move { position: fixed; z-index: 60; width: 240px; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.16); }
.so-move[hidden] { display: none; }
.so-move > b { font-size: 13.5px; color: var(--ink); }
.so-move-act { display: flex; justify-content: flex-end; gap: 6px; }
.so-week .so-cover, .so-list .so-cover { background: var(--surface-2); }

/* Konton (4.97.0): ett kort för Facebook och Instagram, ett för WhatsApp, rutor för fler tjänster */
.ka-page { max-width: 1180px; }
.ka-page > * { max-width: 1120px; }
.ka-notice { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); font-size: 13px; }
.ka-notice > .i { color: var(--accent); margin-top: 2px; flex: none; } .ka-notice > div { flex: 1; } .ka-notice p { margin: 2px 0 0; color: var(--muted); }
.ka-card { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin-bottom: 12px; overflow: hidden; }
.ka-card-h { display: flex; align-items: center; gap: 14px; padding: 16px 18px; flex-wrap: wrap; }
.ka-logos { display: flex; gap: 6px; flex: none; }
.ka-card-t { flex: 1; min-width: 220px; }
.ka-card-t h2, .ka-card-t h3 { margin: 0; font-size: 15px; font-weight: 650; color: var(--ink); }
.ka-card-t h3 { font-size: 14px; }
.ka-card-t p { margin: 3px 0 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.ka-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ka-row { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--line); }
.ka-row:last-child { border-bottom: 0; }
.ka-row .sx-badge { width: 28px; height: 28px; font-size: 10.5px; border-radius: 7px; }
.ka-row-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ka-row-t strong { font-size: 13.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ka-row-t small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ka-row form { margin: 0; }
.ka-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.ka-state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ka-state.ok { color: var(--green); background: var(--green-soft); }
.ka-state.bad { color: var(--red); background: var(--red-soft); }
.ka-err { display: flex; align-items: center; gap: 6px; padding: 0 18px 10px 58px; font-size: 12px; color: var(--red); border-bottom: 1px solid var(--line); }
.ka-none { margin: 0; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.ka-h2 { margin: 26px 0 10px; font-size: 13px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ka-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.ka-tile { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); display: flex; flex-direction: column; overflow: hidden; }
.ka-tile-h { display: flex; gap: 12px; padding: 14px 16px 8px; }
.ka-caps { display: flex; gap: 6px; padding: 0 16px; }
.ka-cap { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.ka-cap.yes { color: var(--green); background: var(--green-soft); }
.ka-cap.no { color: var(--muted); background: var(--surface-2); }
.ka-note { margin: 8px 16px 0; font-size: 12px; color: var(--muted); line-height: 1.4; }
.ka-tile .ka-rows { margin-top: 12px; }
.ka-tile .ka-row { padding: 9px 16px; }
.ka-tile-f { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 12px 16px; }
.ka-off { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); }
.ka-adv { margin: 22px 0 30px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.ka-adv summary { display: flex; align-items: center; gap: 8px; padding: 12px 16px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--ink); list-style: none; }
.ka-adv summary::-webkit-details-marker { display: none; }
.ka-adv-b { padding: 0 16px 14px; font-size: 13px; color: var(--muted); }
.ka-adv-b p { margin: 0 0 10px; }
.ka-adv-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ka-adv-btns .sx-badge { width: 18px; height: 18px; font-size: 8px; border-radius: 5px; }
.ka-adv-b ol { margin: 0; padding-left: 18px; line-height: 1.6; } .ka-adv-b li b { color: var(--ink); }
@media (max-width: 640px) { .ka-notice { flex-wrap: wrap; } .ka-notice > .btn { margin-left: 28px; } .ka-card-t { min-width: 0; flex: 1 1 180px; } .ka-card-h > .btn { width: 100%; justify-content: center; } .ka-row { padding: 10px 14px; flex-wrap: wrap; } .ka-row-t { min-width: 60%; } .ka-err { padding-left: 14px; } .ka-grid { grid-template-columns: 1fr; } }
.sx-badge.sm { width: 18px; height: 18px; border-radius: 5px; font-size: 8px; letter-spacing: 0; }

/* 4.97.1: Social på breda skärmar. 4.97.0 begränsade själva rullningsytan (.ka-page max-width 1180px) –
   rullningslisten hamnade mitt på skärmen och halva ytan stod tom. Nu fyller sidorna bredden:
   Konton i två kolumner från 1400 px, skrivrutan med en fast bred förhandsvisning till höger. */
.ka-page { max-width: none; }
.ka-page > * { max-width: none; }
.ka-cols { display: grid; grid-template-columns: 1fr; gap: 0 20px; align-items: start; }
.ka-right > .ka-h2:first-child { margin-top: 26px; }
@media (min-width: 1400px) {
  .ka-cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .ka-right > .ka-h2:first-child { margin-top: 0; margin-bottom: 10px; }
  .ka-right .ka-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .ka-right .ka-adv { margin-top: 12px; }
}
.sx-grid { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(360px, 480px); }
.sx-prev { position: static; max-height: none; overflow: visible; }
.sx-prev-list .pv { max-width: 480px; }
@media (min-width: 1700px) { .sx-grid { grid-template-columns: minmax(0, 1fr) 520px; } .sx-prev-list .pv { max-width: 520px; } }
@media (max-width: 1100px) { .sx-grid { grid-template-columns: 1fr; } .sx-prev-list .pv { max-width: 560px; } }
.sx-head { max-width: none; }

/* Systemmenyn: menyn under namnet klipptes av (raden ärvde overflow: auto från .sys2-nav) */
.sys2-bottom { overflow: visible; }
/* Förhandsvisningen: en bild visas i sin egen form (förut en fyrkant med tom yta under bilden), flera bilder i rutnät */
.sx-prev .pv-grid.n1 span { aspect-ratio: auto; }
.sx-prev .pv-grid.n1 img { height: auto; max-height: 560px; }
.sx-prev .pv-grid:not(.n1) img { height: 100%; max-height: none; }
/* Menyn ärvde den mörka sidomenyns ljusa textfärg (.sys2-nav a) – nästan osynlig text på vit botten */
.sys2-bottom .pop-menu { min-width: 250px !important; padding: 6px; }
.sys2-bottom .pop-menu a, .sys2-bottom .pop-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 7px; color: var(--ink); background: none; font-size: 13.5px; font-weight: 450; box-shadow: none; white-space: nowrap; }
.sys2-bottom .pop-menu a:hover, .sys2-bottom .pop-menu button:hover { background: var(--hover); color: var(--ink); }
.sys2-bottom .pop-menu a .i, .sys2-bottom .pop-menu button .i { color: var(--muted); }
.sys2-bottom .pop-menu .pop-label { color: var(--muted); }
@media (max-width: 640px) { .ka-card-t { flex: 1 1 100%; } .ka-notice > div { flex: 1 1 calc(100% - 30px); } }

/* Webbplats → SEO och Google (4.98.0) */
.seo2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 14px; }
.seo2 .card { padding-bottom: 6px; }
.seo2 .card-head h3 { display: flex; align-items: center; gap: 8px; }
.seo2-map { grid-column: 1 / -1; }
.seo2-url { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 18px 14px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface-2); }
.seo2-url code { flex: 1; min-width: 220px; font-size: 14px; font-weight: 600; color: var(--ink); word-break: break-all; }
.seo2-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0 18px 12px; }
.seo2-stats div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; display: flex; flex-direction: column; }
.seo2-stats b { font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.seo2-stats small { font-size: 12px; color: var(--muted); }
.seo2-checks { list-style: none; margin: 0 18px 12px; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.seo2-checks li { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.seo2-checks li.ok .i { color: var(--green); } .seo2-checks li.bad { color: var(--red); }
.seo2-warn { display: flex; align-items: center; gap: 8px; margin: 0 18px 12px; padding: 10px 12px; border-radius: 9px; background: var(--red-soft); color: var(--red); font-size: 13px; }
.seo2-live { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 18px 12px; font-size: 12.5px; }
.seo2-result { margin: 0 0 6px; }
.seo2-steps { margin: 0 18px 12px 34px; padding: 0; display: grid; gap: 10px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2, var(--ink)); }
.seo2-steps code, .seo2-note code { font-size: 12.5px; padding: 1px 6px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--line); }
.seo2-note { display: flex; gap: 8px; align-items: flex-start; margin: 0 18px 12px; font-size: 12.5px; line-height: 1.5; }
.seo2-note .i { flex: none; margin-top: 2px; }
.seo2-form { display: grid; gap: 12px; padding: 4px 18px 12px; }
.seo2-form .field > span { display: flex; align-items: center; gap: 6px; }
.seo2-form .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.seo2 .card-foot { display: flex; align-items: center; gap: 10px; padding: 10px 18px 8px; border-top: 1px solid var(--line); font-size: 12.5px; }
.seo2-done { list-style: none; margin: 0 18px 12px; padding: 0; display: grid; gap: 8px; font-size: 13px; line-height: 1.45; }
.seo2-done li { display: flex; gap: 8px; align-items: flex-start; } .seo2-done .i { flex: none; margin-top: 2px; color: var(--green); }
.seo2-done li.info { color: var(--muted); } .seo2-done li.info .i { color: var(--muted); }
@media (max-width: 1000px) { .seo2 { grid-template-columns: minmax(0, 1fr); } .seo2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── 4.99.0: kalendrarna i kalenderns meny och kalenderns inställningar ───────────────────────────────── */
.cx-src .cx-pn { display: flex; flex-direction: column; line-height: 1.25; }
.cx-src .cx-pn b { font-weight: 560; overflow: hidden; text-overflow: ellipsis; }
.cx-src .cx-pn small { margin-left: 0; overflow: hidden; text-overflow: ellipsis; }
.cx-src .cx-av { font-size: 10px; }
.cx-src .cx-av svg { width: 12px; height: 12px; }
.cx-src-all .cx-av { background: var(--hover); color: var(--ink); }
.cx-person.cx-src-all.off .cx-av { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--line-strong, var(--line)); }
.cx-src-list { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 0 19px; padding-left: 6px; border-left: 1px solid var(--line); }
.cx-addcal { display: inline-flex; align-items: center; gap: 5px; margin: 8px 0 0 8px; font-size: 12.5px; }
.cs-body { gap: 18px; max-height: min(72vh, 680px); overflow-y: auto; }
.cs-sec h4 { margin: 0 0 4px; font-size: 13.5px; font-weight: 600; }
.cs-sec > .help { margin: 0 0 10px; }
.cs-acc { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: var(--surface); }
.cs-acc-top { display: flex; align-items: center; gap: 10px; }
.cs-acc-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.cs-acc-name small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-mono { width: 26px; height: 26px; border-radius: 7px; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--pc); }
.cs-mono.sm { width: 20px; height: 20px; font-size: 10px; border-radius: 5px; }
.cs-acc:not(.on) .cs-mono { background: transparent; color: var(--pc); box-shadow: inset 0 0 0 1.5px var(--pc); }
.cs-share { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.cs-q { font-size: 12.5px; font-weight: 560; color: var(--ink-2); }
.cs-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-opts.col { flex-direction: column; align-items: flex-start; }
.cs-opt { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 7px; padding: 5px 10px; font-size: 13px; cursor: pointer; background: var(--surface); }
.cs-opt:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); color: var(--ink); }
.cs-opt input { margin: 0; accent-color: var(--accent); }
.cs-users { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-detail { display: flex; flex-direction: column; gap: 6px; }
.cs-actions { display: flex; align-items: center; gap: 12px; }
.cs-shared { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.cs-shared li { display: flex; align-items: center; gap: 8px; }
.cs-body .hidden { display: none !important; }
@media (max-width: 760px) {
  .cx.side-open .cx-sources .cx-src-list { display: contents; }
  .cx.side-open .cx-sources .cx-src .cx-pn small { display: none; }
  .cx-addcal { display: none; }
}
.cs-modal .modal-head h3 { display: flex; align-items: center; gap: 8px; }
.cs-modal .modal-head h3 svg { color: var(--muted); }
.cs-share.cs-plain { margin-top: 0; padding-top: 0; border-top: 0; }
.cs-flash { margin: 0; }
/* Inställningsknappen tar plats i verktygsraden – på en smal telefon visas filterknappen bara som ikon */
@media (max-width: 480px) { .cal-tools { gap: 6px; } .cx-filterbtn span { display: none; } }

/* ── 4.100.0: Kalender → Bokningssidor ─────────────────────────────────────────────────────────────── */
.bp-main { overflow-y: auto; justify-content: flex-start !important; }   /* en äldre regel centrerade innehållet lodrätt och klippte toppen */
.bp-main .cx-lhead { justify-content: space-between; }
.bp-body { padding: 16px 20px 28px; display: flex; flex-direction: column; gap: 14px; max-width: 980px; }
.bp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.bp-card { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bp-card.sel { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line); }
.bp-card.off .bp-card-name b { color: var(--muted); }
.bp-card-top { display: flex; align-items: flex-start; gap: 10px; }
.bp-card-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.bp-card-name b { font-size: 14px; font-weight: 600; }
.bp-card-name small { color: var(--muted); font-size: 12.5px; }
.bp-status { flex: none; font-size: 11.5px; font-weight: 560; padding: 2px 8px; border-radius: 999px; background: var(--hover); color: var(--muted); }
.bp-status.on { background: color-mix(in srgb, var(--green, #1C8C68) 13%, var(--surface)); color: var(--green, #1C8C68); }
.bp-link { display: flex; gap: 6px; align-items: center; }
.bp-link .input { flex: 1; min-width: 0; height: 32px; font-size: 12.5px; color: var(--ink-2); }
.bp-embed summary { cursor: pointer; font-size: 12.5px; color: var(--accent); list-style: none; }
.bp-embed summary::-webkit-details-marker { display: none; }
.bp-embed[open] { display: flex; flex-direction: column; gap: 6px; }
.bp-embed textarea { font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; resize: none; }
.bp-embed .btn { align-self: flex-start; }
.bp-card-foot { display: flex; align-items: center; gap: 8px; font-size: 12.5px; border-top: 1px solid var(--line); padding-top: 8px; }
.bp-edit .card-head { display: flex; align-items: flex-start; gap: 12px; }
.bp-edit .card-head > div { flex: 1; }
.bp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 12px; }
.bp-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bp-hours { display: flex; flex-direction: column; gap: 4px; }
.bp-day { display: grid; grid-template-columns: 130px 132px 14px 132px; align-items: center; gap: 8px; }
.bp-day .input { height: 32px; }
.bp-day.closed .input { opacity: .45; }
.bp-help { margin: -4px 0 0; }
.bp-checks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.bp-foot { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); }
.bp-empty { border: 1px dashed var(--line-strong, var(--line)); border-radius: 10px; padding: 28px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 560px; }
.bp-empty h3 { margin: 4px 0 0; font-size: 15px; }
.bp-empty p { margin: 0 0 6px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.bp-empty-ic { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
@media (max-width: 760px) {
  .bp-body { padding: 12px; }
  .bp-list { grid-template-columns: minmax(0, 1fr); }
  .bp-grid, .bp-grid.three { grid-template-columns: minmax(0, 1fr); }
  .bp-day { grid-template-columns: 92px minmax(0, 1fr) 10px minmax(0, 1fr); gap: 6px; }
  .bp-day .input { padding: 0 6px; }
}

/* ── 4.100.1: Webbplats → Kontaktformulär och skräpfiltret ───────────────────────────────────────────── */
.kf { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; margin-top: 14px; }
.kf-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kf-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.kf-seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 2px; }
.kf-seg a { padding: 5px 12px; border-radius: 7px; font-size: 13px; color: var(--muted); text-decoration: none; }
.kf-seg a.on { background: var(--surface); color: var(--ink); font-weight: 560; box-shadow: 0 1px 2px rgba(20,24,40,.08); }
.kf-seg em { font-style: normal; font-size: 11.5px; color: var(--muted); margin-left: 3px; }
.kf-note { font-size: 12.5px; flex: 1; }
.kf-empty { display: flex; align-items: center; gap: 10px; padding: 22px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); }
.kf-empty p { margin: 0; }
.kf-row { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.kf-row[open] { box-shadow: 0 0 0 1px var(--line); }
.kf-row.done summary { opacity: .6; }
.kf-row summary { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 14px; cursor: pointer; list-style: none; }
.kf-row summary::-webkit-details-marker { display: none; }
.kf-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.kf-who b { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kf-who small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kf-snip { color: var(--ink-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kf-row time { color: var(--muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kf-score { min-width: 26px; text-align: center; font-size: 11.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--hover); color: var(--muted); }
.kf-score.mid { background: color-mix(in srgb, #B9820A 14%, var(--surface)); color: #9A6B06; }
.kf-score.bad { background: color-mix(in srgb, #C83E5E 13%, var(--surface)); color: #B0344F; }
.kf-body { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.kf-why { display: flex; gap: 6px; margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.kf-why svg { flex: none; margin-top: 2px; }
.kf-meta { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; font-size: 12.5px; }
.kf-meta div { display: flex; gap: 6px; } .kf-meta dt { color: var(--muted); } .kf-meta dd { margin: 0; }
.kf-msg { font-size: 13.5px; line-height: 1.55; white-space: normal; overflow-wrap: anywhere; background: var(--surface-2); border-radius: 8px; padding: 10px 12px; }
.kf-actions { display: flex; gap: 6px; align-items: center; }
.kf-set .card-head p { margin: 2px 0 0; }
.kf-levels { display: flex; gap: 6px; }
.kf-level { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 7px; padding: 5px 10px; font-size: 13px; cursor: pointer; }
.kf-level:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); }
.kf-level input { margin: 0; accent-color: var(--accent); }
.kf-how summary { cursor: pointer; font-size: 12.5px; color: var(--accent); }
.kf-how ul { margin: 8px 0 4px; padding-left: 18px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.kf-set .btn.primary { align-self: flex-start; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kf-score.mid { color: #E3B341; } :root:not([data-theme="light"]) .kf-score.bad { color: #F0849B; } }
:root[data-theme="dark"] .kf-score.mid { color: #E3B341; } :root[data-theme="dark"] .kf-score.bad { color: #F0849B; }
@media (max-width: 1000px) { .kf { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .kf-row summary { grid-template-columns: minmax(0, 1fr) auto; } .kf-snip, .kf-row time { display: none; } }
.kf-set .card-head h3 { display: flex; align-items: center; gap: 7px; }
.kf-set .card-head h3 svg { color: var(--muted); }
.kf-set .check { align-items: flex-start; }
.kf-set .check small { display: block; margin-top: 1px; }
@media (max-width: 640px) { .kf-head .kf-note { flex: 1 1 100%; order: 3; } }

/* 4.101.0: språkval på inloggningen, provperiodens tak, rabattkod och kampanj under Planer */
.auth2-lang{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--ink-3)}
.auth2-lang a{color:var(--ink-3);text-decoration:none;font-size:12.5px}
.auth2-lang a[aria-current]{color:var(--ink);font-weight:600}
.auth2-lang a:hover{color:var(--ink)}
.ab-trial .bill-use span{display:inline-flex;align-items:center;gap:6px}
.ab-hint.warn{color:var(--rose,#b42318)}
.bpl-campaign{display:flex;align-items:center;gap:10px;margin:0 auto 16px;max-width:720px;padding:11px 14px;border-radius:9px;background:var(--saffron-soft,#fff7e6);color:var(--ink);font-size:13.5px}
.bpl-campaign b{font-weight:620;margin-right:4px}
.bpl-code{max-width:420px;margin:0 auto 18px;display:flex;flex-direction:column;gap:6px}
.bpl-code label{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2)}
.bpl-code-row{display:flex;gap:8px}
.bpl-code-row .input{flex:1;text-transform:uppercase;letter-spacing:.02em}
.bpl-code small{font-size:12.5px;min-height:16px}
.bpl-code small.ok{color:var(--ok,#067647)}
.bpl-code small.bad{color:var(--rose,#b42318)}
.bpl-price s{color:var(--ink-3);font-weight:450;font-size:.62em;margin-right:4px}
.disc-form .plan-form{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}

/* 4.102.0: Webbplats → Språk och domäner */
.wb-langhosts { gap: 12px; }
.wb-lh-row { display: grid; grid-template-columns: 30px 76px minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; }
.wb-lh-row .input { height: 34px; min-width: 0; }
.wb-lh-now { grid-column: 3 / -1; font-size: 12px; overflow-wrap: anywhere; }
.wb-lh-row > .muted:not(.wb-lh-now) { grid-column: 3 / -1; font-size: 12.5px; }
.wb-lh-res { grid-column: 3 / -1; font-size: 12.5px; color: var(--muted); }
.wb-lh-res:empty { display: none; }
.wb-lh-res.ok { color: var(--green, #15803D); }
.wb-lh-res.bad { color: var(--red, #B91C1C); }
@media (max-width: 520px) { .wb-lh-row { grid-template-columns: 30px minmax(0, 1fr); } .wb-lh-row .input, .wb-lh-now, .wb-lh-row .btn, .wb-lh-res, .wb-lh-row > .muted { grid-column: 1 / -1; } }

/* 4.103.0: Ditt nummer – registreringen av ett eget nummer utanför Sverige (tre steg och statusen) */
.pr-card { padding: 22px 24px; border-radius: 10px; }
.pr-card h2 { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.pr-card h3 { font-size: 14px; font-weight: 600; margin: 18px 0 10px; }
.pr-card h3 small { font-weight: 400; }
.pr-step > h3:first-child { margin-top: 0; }
.pr-intro { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.pr-intro p { margin: 0; max-width: 62ch; }
.pr-flag { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; font-size: 12.5px; letter-spacing: .04em; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); }
.vr-steps.pr-steps { grid-template-columns: repeat(3, 1fr); max-width: 460px; }
.pr-lead { margin: -4px 0 12px; }
.pr-step .grid2, .pr-step .grid3 { margin-bottom: 2px; }
.pr-docs { display: grid; gap: 10px; }
.pr-doc { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 10px; cursor: pointer; background: var(--surface); transition: border-color .15s, background .15s; }
.pr-doc:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--surface-2); }
.pr-doc input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.pr-doc-ico { flex: none; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.pr-doc-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pr-doc-t b { font-weight: 600; }
.pr-doc-t small { color: var(--muted); font-size: 12.5px; }
.pr-doc-t em { font-style: normal; font-size: 12.5px; color: var(--accent); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-doc.has { border-style: solid; border-color: color-mix(in srgb, var(--green) 40%, var(--line)); }
.pr-doc.has .pr-doc-ico { background: var(--green-soft); color: var(--green); }
.pr-doc.has .pr-doc-t em { color: var(--green); }
.pr-safe { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 6px; padding: 10px 12px; border-radius: 7px; background: var(--surface-2); color: var(--muted); font-size: 12.5px; }
.pr-safe svg { flex: none; margin-top: 1px; }
.pr-numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pr-num { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px 11px 38px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; position: relative; background: var(--surface); }
.pr-num input { position: absolute; left: 14px; top: 14px; accent-color: var(--accent); }
.pr-num b { font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.pr-num small { color: var(--muted); font-size: 12px; }
.pr-num:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.pr-loading { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 18px; color: var(--muted); border: 1px dashed var(--line); border-radius: 10px; justify-content: center; }
.pr-loading.bad { color: var(--red); }
.pr-spin { width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: bdspin .8s linear infinite; display: inline-block; flex: none; }
.btn .pr-spin { border-color: color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; }
.pr-extras { margin-top: 6px; }
.pr-confirm { margin-top: 16px; }
.pr-notice ul.pr-reasons { margin: 6px 0 0; padding-left: 18px; }
.pr-tech { display: block; margin-top: 6px; word-break: break-word; }
.pr-big { font-size: 22px; font-weight: 600; letter-spacing: .01em; margin: 4px 0 6px; font-variant-numeric: tabular-nums; }
.pr-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--saffron); font-weight: 600; }
.pr-status-head p.muted { max-width: 62ch; margin: 0; }
.pr-timeline { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 0; }
.pr-timeline li { display: flex; gap: 12px; position: relative; padding-bottom: 16px; }
.pr-timeline li:not(:last-child)::before { content: ""; position: absolute; left: 10px; top: 24px; bottom: 2px; width: 2px; background: var(--line); }
.pr-timeline li > i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line); background: var(--surface); color: var(--surface); }
.pr-timeline li.done > i { background: var(--green); border-color: var(--green); }
.pr-timeline li.now > i { border-color: var(--saffron); box-shadow: 0 0 0 4px color-mix(in srgb, var(--saffron) 15%, transparent); }
.pr-timeline li.now > i::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--saffron); }
.pr-timeline li div { display: flex; flex-direction: column; gap: 2px; }
.pr-timeline li b { font-weight: 600; }
.pr-timeline li small { color: var(--muted); font-size: 12.5px; }
.pr-foot { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-top: 14px; border-top: 1px solid var(--line); }
.pr-done { display: flex; gap: 16px; align-items: flex-start; }
.pr-done-ico { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--green-soft); color: var(--green); }
@media (max-width: 640px) { .pr-card { padding: 16px; } .pr-numbers { grid-template-columns: 1fr; } .pr-intro { flex-direction: column; gap: 10px; } }
.pr-doc.bad { border-style: solid; border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }
.pr-doc.bad .pr-doc-ico { background: var(--red-soft); color: var(--red); }
.pr-doc.bad .pr-doc-t em { color: var(--red); }

/* 4.103.1: fel under rätt fält (views/partials/form_errors.php) – fältet blir rött och texten under säger vad som ska rättas */
.field.invalid > span, .field.invalid > span small { color: var(--red); }
.field.invalid .input, .input[aria-invalid="true"] { border-color: var(--red) !important; box-shadow: 0 0 0 3px var(--red-soft) !important; }
.field .field-error, .field-error { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.4; color: var(--red); font-weight: 500; }
.field-error a { color: inherit; font-weight: 600; text-decoration: underline; }
.check.invalid { color: var(--red); }
.check.invalid input[type=checkbox] { outline: 2px solid var(--red); outline-offset: 1px; }
.check + .field-error { margin: -4px 0 10px; }
.form-error { margin-bottom: 14px; }
.pr-doc.invalid { border-style: solid; border-color: var(--red); }
.pr-doc + .field-error { margin: -4px 0 4px; }
.pr-numbers.invalid, .pr-confirm.invalid { color: var(--red); }

/* 4.104.0: anslutning i eget fönster – appen bakom blir suddig medan inloggningen hos Google/Microsoft pågår */
.oauth-veil { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 16px; background: rgba(15, 18, 28, .32); backdrop-filter: blur(8px) saturate(.9); -webkit-backdrop-filter: blur(8px) saturate(.9); opacity: 0; transition: opacity .2s ease; }
.oauth-veil.in { opacity: 1; }
.oauth-card { width: min(380px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 24px 22px 18px; text-align: center; box-shadow: 0 18px 50px rgba(15, 18, 28, .18); transform: translateY(6px); transition: transform .2s ease; }
.oauth-veil.in .oauth-card { transform: none; }
.oauth-card h3 { font-size: 15px; font-weight: 600; margin: 12px 0 6px; }
.oauth-card p { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0 0 14px; }
.oauth-logo { width: 44px; height: 44px; border-radius: 10px; object-fit: contain; display: inline-grid; place-items: center; }
.oauth-mono { background: var(--surface-2); border: 1px solid var(--line); font-weight: 700; font-size: 18px; color: var(--ink); }
.oauth-wait { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); padding: 8px 12px; border-radius: 7px; background: var(--surface-2); }
.oauth-okmark { color: var(--green); font-weight: 700; }
.oauth-btns { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.oauth-done-body { background: var(--bg, var(--surface-2)); min-height: 100vh; display: grid; place-items: center; margin: 0; padding: 16px; }
.oauth-done { width: min(380px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 28px 22px 22px; text-align: center; }
.oauth-done h1 { font-size: 16px; font-weight: 600; margin: 12px 0 6px; }
.oauth-done p { color: var(--muted); margin: 0 0 12px; font-size: 13.5px; }
.oauth-done-ico { width: 52px; height: 52px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--green-soft); color: var(--green); }
.oauth-done.bad .oauth-done-ico { background: var(--red-soft); color: var(--red); }
.oauth-done.cancel .oauth-done-ico { background: var(--surface-2); color: var(--muted); }
.oauth-done-btns { display: flex; gap: 8px; justify-content: center; margin-top: 6px; }

/* 4.104.0: håll in för att koppla bort – en röd fyllning växer under knappen medan den hålls in */
.btn.hold-btn:not(.primary):not(.danger) { position: relative; overflow: hidden; isolation: isolate; color: var(--red); border-color: color-mix(in srgb, var(--red) 35%, var(--line)); background: var(--surface); user-select: none; -webkit-user-select: none; touch-action: none; -webkit-touch-callout: none; transition: border-color .15s, transform .1s; }
.btn.hold-btn:not(.primary):not(.danger):hover { border-color: var(--red); background: var(--surface); }
.hold-btn .hold-fill { position: absolute; inset: 0; z-index: -1; background: var(--red-soft); transform: scaleX(0); transform-origin: left; }
.btn.hold-btn.holding { border-color: var(--red); transform: scale(.98); }
.hold-btn.holding .hold-fill { transform: scaleX(1); transition: transform var(--hold, 5s) linear; }
.hold-btn .hold-label { position: relative; font-variant-numeric: tabular-nums; }
.hold-btn.hold-hint { animation: holdnudge .35s ease; }
@keyframes holdnudge { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .hold-btn.hold-hint { animation: none; } }
dialog.hold-confirm { width: min(380px, calc(100vw - 32px)); text-align: center; }
dialog.hold-confirm .modal-body { padding: 24px 22px 14px; display: flex; flex-direction: column; align-items: center; gap: 0; }
dialog.hold-confirm h3 { font-size: 15px; font-weight: 600; margin: 12px 0 6px; }
dialog.hold-confirm p { color: var(--muted); margin: 0; font-size: 13.5px; }
.hold-confirm-ico { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--red-soft); color: var(--red); font-weight: 700; font-size: 20px; }
dialog.hold-confirm .modal-foot { justify-content: center; }

/* ══ 4.105.0: Fortnox – kundens fakturor i ärendets högerpanel, dialogerna och integrationssidan ══ */
.details .fx h4 { margin-bottom: 8px; }
.fx-h { display: inline-flex; align-items: center; gap: 6px; }
.fx-mark { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: #1B7F4B; color: #fff; font-size: 8.5px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.fx-cust { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.fx-cust-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fx-cust-txt b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-cust-txt small { font-size: 12px; color: var(--muted); }
.fx-cust-txt small span { white-space: nowrap; }
.fx-sum { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.fx-sum > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 9px; background: color-mix(in srgb, #D99A0B 10%, var(--surface)); border: 1px solid color-mix(in srgb, #D99A0B 22%, var(--line)); }
.fx-sum > div.bad { background: color-mix(in srgb, var(--red) 8%, var(--surface)); border-color: color-mix(in srgb, var(--red) 24%, var(--line)); }
.fx-sum span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.fx-sum b { font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-sum .bad b { color: color-mix(in srgb, var(--red) 80%, var(--ink)); }
.fx-ok { margin: 0 0 8px; font-size: 12.5px; color: color-mix(in srgb, var(--green) 75%, var(--ink)); }
.fx-list { display: flex; flex-direction: column; }
.fx-inv { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin-bottom: 6px; overflow: hidden; }
.fx-inv-head { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 9px 12px; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.fx-inv-head:hover { background: var(--hover); }
.fx-inv-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 10px; }
.fx-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; row-gap: 4px; }
.fx-top b { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fx-sub { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 8px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fx-sub span { white-space: nowrap; }
.fx-late { color: var(--red); font-weight: 600; }
.fx-inv-body { padding: 4px 12px 12px; border-top: 1px solid var(--line); }
.fx-kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 8px 0 10px; font-size: 12.5px; }
.fx-kv dt { color: var(--muted); }
.fx-kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.fx-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fx-created { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.fx .od-all { margin-top: 2px; }
.fx .od-err a { color: inherit; text-decoration: underline; }
/* Dialogerna */
dialog.modal.fx-inv-d { width: min(680px, calc(100vw - 24px)); }
.fx-modal .modal-head .btn.icon { font-size: 18px; line-height: 1; }
.fx-rows { display: flex; flex-direction: column; gap: 8px; }
.fx-row { display: grid; grid-template-columns: minmax(0, 1fr) 72px 110px 30px; gap: 8px; align-items: start; }
.fx-rows.with-art .fx-row { grid-template-columns: minmax(0, 1fr) 100px 72px 110px 30px; }
.fx-row .field { margin: 0; min-width: 0; }
.fx-row + .fx-row .field > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.fx-c-qty input, .fx-c-price input { text-align: right; font-variant-numeric: tabular-nums; }
.fx-rm { margin-top: 9px; color: var(--muted); font-size: 17px; }
.fx-row + .fx-row .fx-rm { margin-top: 4px; }
.fx-row-acts { gap: 12px; flex-wrap: wrap; }
.fx-arts { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.fx-total { font-size: 13px; color: var(--muted); }
.fx-total b { color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; margin-left: 4px; }
.fx-note { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; padding: 10px 12px; border-radius: 9px; background: var(--surface-2); }
.fx-results { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.fx-res { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.fx-res:hover { background: var(--hover); border-color: var(--line-strong); }
.fx-res b { font-size: 13.5px; font-weight: 600; }
.fx-res small { font-size: 12px; color: var(--muted); }
.fx-res:disabled { opacity: .6; cursor: progress; }
.fx-results .muted { margin: 0; font-size: 13px; }
/* Integrationssidan */
.fx-org { font-weight: 400; font-size: 12.5px; }
.fx-req { margin: 0; font-size: 12.5px; }
.fx-hint { display: flex; align-items: flex-start; gap: 7px; margin: 0; font-size: 12.5px; line-height: 1.5; }
.fx-hint svg { flex: none; margin-top: 3px; }
.fx-set { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.fx-set .check { display: flex; gap: 10px; align-items: flex-start; }
.fx-set .check > span { display: flex; flex-direction: column; gap: 2px; }
.fx-set .check small { font-size: 12.5px; }
@media (max-width: 560px) {
  .fx-row, .fx-rows.with-art .fx-row { grid-template-columns: minmax(0, 1fr) 64px 92px 28px; }
  .fx-rows.with-art .fx-c-art { grid-column: 1 / -1; order: -1; }
  .fx-row + .fx-row .field > span { position: static; width: auto; height: auto; clip: auto; }
  .fx-row + .fx-row .fx-rm { margin-top: 9px; }
}

/* ══ 4.106.0: System → Statistik – besöksstatistik för webbplatsen ══ */
.wa { --wa-c: #2a78d6; --wa-prev: color-mix(in srgb, var(--muted) 70%, transparent); display: flex; flex-direction: column; gap: 14px; }
.wa.is-loading .wa-kpis, .wa.is-loading .wa-card { opacity: .55; transition: opacity .15s; pointer-events: none; }
.wa-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wa-title p { margin: 0; font-size: 12.5px; color: var(--muted); }
.wa-off { color: var(--red); }
.wa-live { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.wa-live b { color: var(--ink); font-variant-numeric: tabular-nums; }
.wa-live i, .wa-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); display: inline-block; }
.wa-live.on i, .wa-dot { background: #16a34a; box-shadow: 0 0 0 0 rgba(22,163,74,.5); animation: waPulse 2s infinite; }
@keyframes waPulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.45); } 70% { box-shadow: 0 0 0 7px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }
@media (prefers-reduced-motion: reduce) { .wa-live.on i, .wa-dot { animation: none; } }
.wa-range { display: inline-flex; align-items: center; padding: 3px; gap: 2px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line); }
.wa-range > button, .wa-range .pop > button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 550; padding: 5px 10px; border-radius: 7px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.wa-range > button:hover, .wa-range .pop > button:hover { color: var(--ink); }
.wa-range button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(16,24,40,.08); }
.wa-custom { padding: 12px; flex-direction: column; gap: 8px; min-width: 210px; }
.pop.open .wa-custom { display: flex; }
.wa-cmp { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.wa-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wa-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--ink); font-size: 12.5px; max-width: 100%; }
.wa-chip small { color: var(--muted); }
.wa-chip b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 360px; }
.wa-chip button { width: 20px; height: 20px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; }
.wa-chip button:hover { background: var(--surface); color: var(--ink); }
/* Nyckeltalen */
.wa-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.wa-kpi { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 13px 14px 12px; min-height: 108px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.wa-kpi[data-static] { cursor: default; }
.wa-kpi:not([data-static]):hover { border-color: var(--line-strong); }
.wa-kpi.on { border-color: var(--wa-c); box-shadow: inset 0 0 0 1px var(--wa-c); }
.wa-kpi-l { font-size: 12px; color: var(--muted); font-weight: 550; }
.wa-kpi-v { font-size: 24px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.wa-kpi-d { display: flex; flex-direction: column; gap: 2px; font-size: 12px; position: relative; z-index: 1; }
.wa-kpi-d small { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.wa-delta { font-weight: 600; font-size: 12px; font-variant-numeric: tabular-nums; }
.wa-delta.up { color: color-mix(in srgb, var(--green) 85%, var(--ink)); }
.wa-delta.down { color: color-mix(in srgb, var(--red) 85%, var(--ink)); }
.wa-delta.flat { color: var(--muted); }
.wa-spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 30px; opacity: .9; }
.wa-spark .l { fill: none; stroke: var(--wa-c); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: .55; }
.wa-spark .a { fill: var(--wa-c); opacity: .07; }
.wa-kpi.on .wa-spark .l { opacity: 1; }
/* Kort */
.wa-card { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 14px 16px 16px; min-width: 0; display: flex; flex-direction: column; }
.wa-card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.wa-card-h h3 { margin: 0; font-size: 14px; display: inline-flex; align-items: center; gap: 7px; }
.wa-card-h small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.wa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.wa-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wa-grid.wa-focusmode { grid-template-columns: minmax(0, 1fr); }
.wa-tabs { display: inline-flex; gap: 2px; }
.wa-tabs button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; padding: 4px 8px; border-radius: 6px; cursor: pointer; font-weight: 550; }
.wa-tabs button:hover { color: var(--ink); background: var(--hover); }
.wa-tabs button.on { color: var(--ink); background: var(--active); }
.wa-skel { border-radius: 8px; background: linear-gradient(90deg, var(--surface-2), var(--hover), var(--surface-2)); background-size: 200% 100%; animation: odShim 1.2s linear infinite; }
/* Huvudkurvan */
.wa-legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.wa-legend span, .wa-tip span { display: inline-flex; align-items: center; gap: 6px; }
.wa-legend i, .wa-tip i { width: 14px; height: 0; border-top: 2px solid var(--wa-c); display: inline-block; }
.wa-legend i.prev, .wa-tip i.prev { border-top: 2px dashed var(--wa-prev); }
.wa-chart { position: relative; min-height: 220px; }
.wa-chart svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.wa-chart .gl { stroke: var(--line); stroke-width: 1; }
.wa-chart .yl { fill: var(--muted); font-size: 11px; text-anchor: end; font-variant-numeric: tabular-nums; }
.wa-chart .xl { fill: var(--muted); font-size: 11px; }
.wa-chart .cl.part { stroke-dasharray: 3 4; }
.wa-chart .cl { fill: none; stroke: var(--wa-c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.wa-chart .pl { fill: none; stroke: var(--wa-prev); stroke-width: 1.5; stroke-dasharray: 4 4; }
.wa-chart .g0 { stop-color: var(--wa-c); stop-opacity: .22; }
.wa-chart .g1 { stop-color: var(--wa-c); stop-opacity: 0; }
.wa-chart .xh { stroke: var(--line-strong); stroke-width: 1; }
.wa-chart .hd, .wa-chart .dot { fill: var(--wa-c); stroke: var(--surface); stroke-width: 2; }
.wa-chart .hp { fill: var(--surface); stroke: var(--wa-prev); stroke-width: 2; }
.wa-chart .hit { cursor: crosshair; }
.wa-tip { position: absolute; z-index: 3; pointer-events: none; display: flex; flex-direction: column; gap: 4px; min-width: 170px; padding: 9px 11px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(16,24,40,.12); font-size: 12.5px; }
.wa-tip b { font-size: 12px; color: var(--muted); font-weight: 600; }
.wa-tip em { font-style: normal; font-weight: 650; margin-left: auto; padding-left: 10px; font-variant-numeric: tabular-nums; }
.wa-tip span { width: 100%; }
.wa-empty-chart { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13px; pointer-events: none; }
/* Rader med staplar bakom */
.wa-rows { display: flex; flex-direction: column; gap: 3px; }
.wa-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--cols, 4), auto); grid-auto-flow: column; grid-auto-columns: minmax(56px, auto); align-items: center; column-gap: 10px; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font: inherit; font-size: 13px; text-align: left; isolation: isolate; width: 100%; }
.wa-rows .wa-row { grid-template-columns: minmax(0, 1fr); grid-auto-columns: 66px; }
button.wa-row { cursor: pointer; }
button.wa-row:hover { background: var(--hover); }
button.wa-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.wa-bar { position: absolute; left: 0; top: 2px; bottom: 2px; border-radius: 5px; background: color-mix(in srgb, var(--wa-c) 11%, transparent); z-index: -1; transition: width .3s; }
.wa-r-l { display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; }
.wa-r-l b { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wa-r-l small { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.wa-r-c { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12.5px; white-space: nowrap; min-width: 56px; }
.wa-r-c.wa-r-main { color: var(--ink); font-weight: 600; }
.wa-rh { padding-top: 0; padding-bottom: 4px; }
.wa-rh .wa-r-c { overflow: hidden; text-overflow: ellipsis; }
.wa-rh span { font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: .04em; color: var(--faint) !important; }
.wa-more { display: none !important; }
.wa-rows.all .wa-more { display: grid !important; }
.wa-showall { margin-top: 6px; align-self: flex-start; border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 8px; }
.wa-none { margin: 6px 0; font-size: 13px; color: var(--muted); }
.wa-ic { width: 20px; height: 20px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); display: inline-grid; place-items: center; font-size: 11px; color: var(--muted); flex: none; }
.wa-av { width: 18px; height: 18px; border-radius: 5px; background: var(--active); display: inline-grid; place-items: center; font-size: 10.5px; font-weight: 700; color: var(--muted); flex: none; }
.wa-flag { font-size: 16px; line-height: 1; flex: none; }
.wa-code { font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 5px; background: var(--active); color: var(--muted); flex: none; letter-spacing: .03em; }
/* Vägen */
.wa-flows { display: flex; flex-direction: column; gap: 6px; }
.wa-flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(70px, 120px) minmax(0, 1fr); align-items: center; gap: 8px; }
.wa-flow button { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 7px; padding: 6px 9px; font: inherit; font-size: 12.5px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; min-width: 0; }
.wa-flow button:hover { border-color: var(--wa-c); }
.wa-arrow { position: relative; display: flex; align-items: center; justify-content: center; height: 22px; }
.wa-arrow i { position: absolute; left: 0; width: var(--w); height: 2px; background: color-mix(in srgb, var(--wa-c) 60%, transparent); border-radius: 2px; left: 50%; transform: translateX(-50%); }
.wa-arrow i::after { content: ""; position: absolute; right: -4px; top: -4px; border: 5px solid transparent; border-left-color: color-mix(in srgb, var(--wa-c) 60%, transparent); border-right: 0; }
.wa-arrow em { position: relative; font-style: normal; font-size: 11.5px; font-weight: 650; background: var(--surface); padding: 0 6px; color: var(--ink); font-variant-numeric: tabular-nums; }
.wa-focus { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, .9fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.wa-fsvg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.wa-fsvg path { fill: none; stroke: color-mix(in srgb, var(--wa-c) 30%, transparent); stroke-linecap: round; }
.wa-fsvg path.o { stroke: color-mix(in srgb, var(--wa-c) 45%, transparent); }
.wa-fmid { position: relative; z-index: 1; }
.wa-fc { display: flex; flex-direction: column; gap: 5px; position: relative; z-index: 1; }
.wa-fn { position: relative; display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 6px 9px; border-radius: 7px; border: 1px solid var(--line); background: linear-gradient(90deg, color-mix(in srgb, var(--wa-c) 12%, var(--surface)) var(--p), var(--surface) var(--p)); color: var(--ink); font: inherit; font-size: 12.5px; text-align: left; min-width: 0; }
button.wa-fn { cursor: pointer; }
button.wa-fn:hover { border-color: var(--wa-c); }
.wa-fn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wa-fn em { font-style: normal; color: var(--muted); }
.wa-fn b { font-variant-numeric: tabular-nums; font-size: 12px; }
.wa-fpage { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--wa-c); background: var(--surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--wa-c) 10%, transparent); display: flex; flex-direction: column; gap: 2px; }
.wa-fpage small { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.wa-fpage b { font-size: 13.5px; }
.wa-fpage > span { font-size: 11.5px; color: var(--muted); word-break: break-all; }
.wa-fpage ul { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.wa-fpage li { display: flex; justify-content: space-between; gap: 8px; }
/* Tratten */
.wa-funnel { display: flex; flex-direction: column; gap: 12px; }
.wa-fs { display: grid; grid-template-columns: 150px minmax(0, 1fr) 110px; gap: 12px; align-items: center; }
.wa-fs-l b { display: block; font-size: 13px; }
.wa-fs-l small { color: var(--muted); font-size: 11.5px; line-height: 1.3; display: block; }
.wa-fs-bar { height: 26px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.wa-fs-bar span { display: block; height: 100%; border-radius: 6px; transition: width .4s; }
.wa-fs0 .wa-fs-bar span { background: #86b6ef; } .wa-fs1 .wa-fs-bar span { background: #5598e7; } .wa-fs2 .wa-fs-bar span { background: #2a78d6; } .wa-fs3 .wa-fs-bar span { background: #1c5cab; }
.wa-fs-v { text-align: right; }
.wa-fs-v b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.wa-fs-v small { font-size: 11.5px; color: var(--muted); }
.wa-fs-total { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
/* Enheter */
.wa-segbar { display: flex; gap: 2px; height: 10px; border-radius: 6px; overflow: hidden; margin: 2px 0 12px; }
.wa-seg.s1, .wa-key.s1 { background: #2a78d6; } .wa-seg.s2, .wa-key.s2 { background: #eb6834; } .wa-seg.s3, .wa-key.s3 { background: #1baf7a; }
.wa-key { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
/* Värmekartan */
.wa-heat { display: grid; grid-template-columns: 34px repeat(24, minmax(0, 1fr)); gap: 3px; align-items: center; }
.wa-hh { font-size: 10px; color: var(--muted); text-align: left; }
.wa-hd { font-size: 11px; color: var(--muted); }
.wa-hc { aspect-ratio: 1; border-radius: 3px; background: var(--surface-2); min-height: 10px; }
.wa-hc.l1 { background: #cde2fb; } .wa-hc.l2 { background: #9ec5f4; } .wa-hc.l3 { background: #6da7ec; } .wa-hc.l4 { background: #3987e5; } .wa-hc.l5 { background: #256abf; } .wa-hc.l6 { background: #184f95; }
.wa-heat-key { display: flex; align-items: center; gap: 3px; margin-top: 10px; font-size: 11px; color: var(--muted); flex-wrap: wrap; }
.wa-heat-key i { width: 12px; height: 12px; display: inline-block; aspect-ratio: auto; min-height: 0; }
.wa-heat-key span { margin: 0 4px; }
.wa-heat-key em { font-style: normal; margin-left: auto; color: var(--ink); font-weight: 550; }
/* Tid och läsdjup */
.wa-hist { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; height: 170px; align-items: end; padding-top: 18px; }
.wa-hb { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; height: 100%; }
.wa-hb span { width: 100%; max-width: 54px; border-radius: 5px 5px 2px 2px; background: var(--wa-c); opacity: .85; }
.wa-hb em { font-style: normal; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wa-hb small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.wa-hist-n { font-size: 12px; margin: 10px 0 0; }
.wa-depth { display: flex; flex-direction: column; gap: 10px; }
.wa-depth p { font-size: 12px; margin: 4px 0 0; }
.wa-dp { display: grid; grid-template-columns: 90px minmax(0, 1fr) 54px; gap: 10px; align-items: center; font-size: 12.5px; }
.wa-dp-l { color: var(--muted); }
.wa-dp-bar { height: 10px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.wa-dp-bar i { display: block; height: 100%; border-radius: 6px; background: var(--wa-c); }
.wa-dp b { text-align: right; font-variant-numeric: tabular-nums; }
/* Just nu */
.wa-now { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.wa-now b { font-size: 30px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.wa-now span { color: var(--muted); font-size: 12.5px; }
.wa-nowpages { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.wa-nowpages span { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wa-feed li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.wa-feed li:first-child { border-top: 0; }
.wa-feed .wa-flag { grid-row: span 2; align-self: center; }
.wa-feed-p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.wa-feed small { grid-column: 2; color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-feed time { grid-column: 3; grid-row: 1 / span 2; align-self: center; color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.wa-foot { font-size: 12px; margin: 0; }
.wa-ignore { padding: 12px; border-radius: 9px; background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.wa-ignore p { margin: 0; font-size: 12.5px; }
/* Mörkt läge: sekventiella blå steg för mörk yta */
:root[data-theme="dark"] .wa-hc.l1 { background: #104281; } :root[data-theme="dark"] .wa-hc.l2 { background: #184f95; } :root[data-theme="dark"] .wa-hc.l3 { background: #256abf; }
:root[data-theme="dark"] .wa-hc.l4 { background: #3987e5; } :root[data-theme="dark"] .wa-hc.l5 { background: #6da7ec; } :root[data-theme="dark"] .wa-hc.l6 { background: #9ec5f4; }
:root[data-theme="dark"] .wa-seg.s1, :root[data-theme="dark"] .wa-key.s1 { background: #3987e5; } :root[data-theme="dark"] .wa-seg.s2, :root[data-theme="dark"] .wa-key.s2 { background: #d95926; } :root[data-theme="dark"] .wa-seg.s3, :root[data-theme="dark"] .wa-key.s3 { background: #199e70; }
:root[data-theme="dark"] .wa-fs0 .wa-fs-bar span { background: #184f95; } :root[data-theme="dark"] .wa-fs1 .wa-fs-bar span { background: #256abf; } :root[data-theme="dark"] .wa-fs2 .wa-fs-bar span { background: #3987e5; } :root[data-theme="dark"] .wa-fs3 .wa-fs-bar span { background: #6da7ec; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wa-hc.l1 { background: #104281; } :root:not([data-theme="light"]) .wa-hc.l2 { background: #184f95; } :root:not([data-theme="light"]) .wa-hc.l3 { background: #256abf; }
  :root:not([data-theme="light"]) .wa-hc.l4 { background: #3987e5; } :root:not([data-theme="light"]) .wa-hc.l5 { background: #6da7ec; } :root:not([data-theme="light"]) .wa-hc.l6 { background: #9ec5f4; }
  :root:not([data-theme="light"]) .wa-seg.s1, :root:not([data-theme="light"]) .wa-key.s1 { background: #3987e5; } :root:not([data-theme="light"]) .wa-seg.s2, :root:not([data-theme="light"]) .wa-key.s2 { background: #d95926; } :root:not([data-theme="light"]) .wa-seg.s3, :root:not([data-theme="light"]) .wa-key.s3 { background: #199e70; }
  :root:not([data-theme="light"]) .wa-fs0 .wa-fs-bar span { background: #184f95; } :root:not([data-theme="light"]) .wa-fs1 .wa-fs-bar span { background: #256abf; } :root:not([data-theme="light"]) .wa-fs2 .wa-fs-bar span { background: #3987e5; } :root:not([data-theme="light"]) .wa-fs3 .wa-fs-bar span { background: #6da7ec; }
}
@media (max-width: 1180px) { .wa-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wa-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .wa-grid, .wa-grid3 { grid-template-columns: minmax(0, 1fr); }
  .wa-focus { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .wa-fsvg { display: none; }
  .wa-fs { grid-template-columns: 110px minmax(0, 1fr) 84px; }
}
@media (max-width: 560px) {
  .wa-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wa-kpi-v { font-size: 20px; }
  .wa-range { overflow-x: auto; max-width: 100%; }
  .wa-r-c:nth-child(n+5) { display: none; }
  .wa-rows .wa-row { grid-auto-columns: 58px; column-gap: 6px; }
  .wa-rh span { font-size: 10px !important; letter-spacing: 0; }
  .wa-r-l small { display: none; }
  .wa-heat { grid-template-columns: 28px repeat(24, minmax(0, 1fr)); gap: 1.5px; }
  .wa-hc { min-height: 6px; border-radius: 2px; }
}

/* Datafärgen i mörkt läge: samma blå, ett steg ljusare för den mörka ytan */
:root[data-theme="dark"] .wa { --wa-c: #3987e5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wa { --wa-c: #3987e5; } }

/* ══ 4.107.1: "+" på mobilen och "Markera 50" först när något är markerat ═══════════════════════
   Mapplistan med "+" är en utdragbar meny under 1060 px – därför har listans rubrikrad ett eget "+" där.
   Mapplistan ritades under statusfältet i appen på hemskärmen (viewport-fit=cover), så "Inkorg" och "+"
   hamnade bakom klockan: den får nu samma marginal överst som resten av appen. */
.list-head .btn.lh-new { display: none; }
@media (max-width: 1060px) { .list-head .btn.lh-new { display: inline-flex; } }
@media (max-width: 760px) { .side:not(.tc-side) { padding-top: var(--sat, 0px); } }
/* Sökträffarnas "Markera 50 av …" syns först när minst ett ärende är markerat (som markeringsradens ruta) */
.list:not(.selecting) .sh-btn[data-select-visible] { display: none; }

/* ══ 4.109.0: System → Cookies och samtycken (prefix ck-, bygger på wa-) ═════════════════════════════════ */
.ck { display: flex; flex-direction: column; gap: 14px; }
.wa-range > a { color: var(--muted); font-size: 12.5px; font-weight: 550; padding: 5px 10px; border-radius: 7px; text-decoration: none; white-space: nowrap; }
.wa-range > a:hover { color: var(--ink); }
.wa-range > a.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(16,24,40,.08); }
.ck-kpis .wa-kpi { min-height: 92px; }
.ck-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; }
.ck { --ck-a: #2a78d6; --ck-c: #8fbcef; --ck-r: #b9bec8; }
:root[data-theme="dark"] .ck { --ck-a: #3987e5; --ck-c: #2f5d93; --ck-r: #5b616d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ck { --ck-a: #3987e5; --ck-c: #2f5d93; --ck-r: #5b616d; } }
.ck-legend { display: flex; gap: 12px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.ck-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ck-legend i { width: 9px; height: 9px; border-radius: 2px; }
.ck-a { background: var(--ck-a); } .ck-c { background: var(--ck-c); } .ck-r { background: var(--ck-r); }
.ck-bars { display: flex; align-items: flex-end; gap: 2px; height: 170px; padding-top: 6px; border-bottom: 1px solid var(--line); }
.ck-bar { flex: 1 1 0; min-width: 2px; height: 100%; display: flex; flex-direction: column-reverse; gap: 1px; }
.ck-bar i { display: block; width: 100%; border-radius: 2px 2px 0 0; min-height: 0; }
.ck-bar:hover i { filter: brightness(.92); }
.ck-axis { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.ck-empty { margin: 8px 0 4px; font-size: 13px; }
.ck-cats { margin: 0; display: grid; gap: 10px; }
.ck-cats > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; font-size: 13px; }
.ck-cats dt { font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ck-cats dd { margin: 0; color: var(--ink-2, var(--ink)); }
.ck-cats code, .ck-table code { font-size: 12px; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }
.ck-sub { margin: 16px 0 8px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.ck-rows { display: grid; gap: 7px; }
.ck-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 12.5px; }
.ck-track { height: 7px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.ck-track i { display: block; height: 100%; background: var(--ck-a); border-radius: 4px; }
.ck-search { display: flex; gap: 6px; align-items: center; }
.ck-search .input { width: 260px; max-width: 100%; height: 32px; }
.ck-table-wrap { overflow-x: auto; margin: 0 -16px; }
.ck-table { width: 100%; font-size: 12.5px; }
.ck-table th { white-space: nowrap; }
.ck-table td { white-space: nowrap; }
.ck-path { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.ck-choice { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--surface-2); color: var(--muted); }
.ck-choice--all { background: color-mix(in srgb, var(--ck-a) 14%, transparent); color: var(--ck-a); }
.ck-choice--custom { background: color-mix(in srgb, var(--ck-c) 22%, transparent); color: color-mix(in srgb, var(--ck-a) 80%, var(--ink)); }
.ck-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; font-size: 12.5px; }
@media (max-width: 1100px) { .ck-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .ck-cats > div { grid-template-columns: 1fr; gap: 2px; } .ck-search .input { width: 100%; } }

/* 4.110.0: Chatbotar – huvudhjärnan och knapparna Gör till huvudhjärna / Slå ihop */
.bb-note { margin: 0 0 14px; }
.bb-tile .tile-top { color: inherit; text-decoration: none; }
.bb-tile.is-primary { border-color: var(--accent); }
.bb-tile .tile-foot { flex-wrap: wrap; }
.bb-tile .tile-foot form { margin: 0; }
/* 4.110.0: AI Receptionist → Hjärnan: välj hjärna */
.vr-brain-pick { display: flex; gap: 6px; align-items: center; margin: 0; }
.vr-brain-pick .input { width: 230px; max-width: 100%; }
.vr-empty .vr-brain-pick { justify-content: center; margin-top: 10px; }
@media (max-width: 720px) { .vr-brain-head .card-body { flex-wrap: wrap; } .vr-brain-pick { width: 100%; } .vr-brain-pick .input { flex: 1; width: auto; } }
.bb-tile .help { display: flex; gap: 6px; align-items: flex-start; margin: 0; }
.bb-tile .help svg { flex: none; margin-top: 2px; }

/* ─── 4.111.0: AI Receptionist i stil C – ljust, luftigt och lugnt ───────────────────────────────
   Gäller bara telefonens sidor (.vx / .vx-side). Kort 12 px, knappar som piller och större siffror – ägaren
   valde den här stilen för AI Receptionist uttryckligen. Allt tar färg från temats variabler (ljust och mörkt). */
.vx-side { background: var(--surface); }
.vx-side .side-head h1 { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--ink); font-size: 16px; font-weight: 650; letter-spacing: -.015em; }
.vx-side .side-scroll { gap: 10px; }
.vx-nav { gap: 2px !important; }
.vx-nav .nav-item { min-height: 40px !important; height: 40px; align-items: center !important; padding: 0 12px !important; border-radius: 10px !important; border: 0 !important; box-shadow: none !important; font-weight: 500; color: var(--ink-2); transform: none !important; }
.vx-nav .nav-item > .i { width: 16px !important; height: 16px !important; padding: 0 !important; margin-top: 0 !important; border: 0 !important; background: none !important; color: var(--muted) !important; }
.vx-nav .nav-item .label { flex-direction: row !important; font-size: 13.5px; }
.vx-nav .nav-item:hover { background: var(--hover); color: var(--ink); }
.vx-nav .nav-item.on { background: var(--accent-soft) !important; color: var(--accent) !important; }
.vx-nav .nav-item.on > .i { color: var(--accent) !important; background: none !important; }
.vx-side .vr-rec.on { background: var(--accent-soft); color: var(--ink); border-color: transparent; }
.vx-side .vr-rec.on .vr-rec-t small { color: var(--muted); }
.vx-side .vr-rec.on .vr-rec-av { background: var(--surface); }
.vx-nav .nav-item .count { margin-left: auto; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 9px; background: var(--hover); color: var(--muted); }
.vx-nav .nav-item .count.hot { background: var(--accent); color: var(--accent-ink); }
.vx-side-status { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.vx-side-status b { display: block; font-size: 13px; }
.vx-side-status small { display: block; font-size: 11.5px; color: var(--muted); }
.vx-side-status .vs-av { position: relative; display: inline-flex; }
.vx-side-status .vs-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--saffron); box-shadow: 0 0 0 2px var(--surface); }
.vx-side-status.ok .vs-dot { background: var(--green); }
.vx-side-status .vs-av .vs-dot { position: absolute; right: -1px; bottom: -1px; }

.vr.vx .page-inner.vr-wrap.vx-wrap:not(.has-rail) { grid-template-columns: minmax(0, 1fr); max-width: 1240px; margin: 0 auto; padding: 28px 32px 48px; }
.vr.vx .page-inner.vr-wrap.vx-wrap.vr-wide { max-width: none; }
.vr.vx .vr-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.vx-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.vx-crumb { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--accent); font-weight: 500; width: max-content; }
.vx-crumb:hover { text-decoration: underline; }
.vx-head-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.vx-head-text { flex: 1; min-width: 240px; }
.vx-head h1 { margin: 0; font-size: 26px; font-weight: 650; letter-spacing: -.02em; color: var(--ink); }
.vx-head p { margin: 4px 0 0; color: var(--muted); max-width: 720px; }

.vx-card, .vr.vx .vr-card, .vr.vx .card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: none; }
.vx-card { padding: 22px 24px; min-width: 0; }
.vr.vx .vr-card .card-head h3, .vr.vx .card .card-head h3 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.vr.vx .card-foot { border-top: 1px solid var(--line); }
.vx-card-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.vx-card-head > div { flex: 1; min-width: 0; }
.vx-card-head h2 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.015em; }
.vx-card-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }
.vx-link { font-size: 12.5px; font-weight: 500; color: var(--accent); white-space: nowrap; }
.vx-link:hover { text-decoration: underline; }
.vx-eb { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.vx-pill.btn { border-radius: 999px; height: 38px; padding: 0 16px; }
.vx-pill.btn.sm { height: 32px; padding: 0 13px; }
.vx-wide { width: 100%; justify-content: center; }
.vx-row { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.vx-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.vx-grow { flex: 999 1 520px; }
.vx-side-col { flex: 1 1 320px; }
.vx-row > .vx-card.vx-grow, .vx-row > .vx-card.vx-side-col { align-self: stretch; }
.vx-p { margin: 10px 0 0; font-size: 13px; }

/* Översikten */
.vx-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 36px; padding: 34px 40px; }
.vx-orb { position: relative; flex: 0 0 176px; width: 176px; height: 176px; display: flex; align-items: center; justify-content: center; }
.vx-orb > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vx-orb > svg circle { fill: none; stroke: var(--accent); }
.vx-orb > svg circle:nth-child(1) { stroke-opacity: .08; } .vx-orb > svg circle:nth-child(2) { stroke-opacity: .14; } .vx-orb > svg circle:nth-child(3) { stroke-opacity: .26; fill: var(--accent-soft); fill-opacity: .6; }
.vx-orb.on > svg circle:nth-child(1) { animation: vx-ring 3.2s ease-in-out infinite; transform-origin: 110px 110px; }
.vx-orb.on > svg circle:nth-child(2) { animation: vx-ring 3.2s .4s ease-in-out infinite; transform-origin: 110px 110px; }
.vx-notready { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.vx-notready .vr-panel { margin: 0; border-radius: 12px; }
@keyframes vx-ring { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.vx-orb-av { position: relative; display: inline-flex; border-radius: 50%; }
.vx-hero-main { flex: 999 1 340px; min-width: 0; }
.vx-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--saffron); }
.vx-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.vx-eyebrow.ok { color: var(--green); }
.vx-hero h1 { margin: 10px 0 8px; font-size: 34px; line-height: 1.12; font-weight: 650; letter-spacing: -.025em; color: var(--ink); }
.vx-hero p { margin: 0 0 20px; color: var(--muted); font-size: 14px; }
.vx-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.vx-hero-stat { flex: 1 1 150px; text-align: right; }
.vx-hero-stat b { display: block; font-size: 64px; line-height: 1; font-weight: 550; letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.vx-hero-stat span { display: block; margin-top: 8px; color: var(--muted); }
.vx-hero-stat small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.vx-hero-stat small.ok { color: var(--green); }
.vx-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.vx-kpi { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; }
.vx-kpi b { font-size: 30px; line-height: 1.05; font-weight: 600; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.vx-kpi b small { font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.vx-kpi > small { font-size: 12.5px; color: var(--muted); }
.vx-kpi > small a { color: var(--accent); }
.vx-spark { width: 100%; height: 30px; display: block; }
.vx-bar { height: 5px; border-radius: 3px; background: var(--hover); overflow: hidden; }
.vx-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.vx-kpi-bar.lvl-near .vx-bar i { background: var(--saffron); }
.vx-kpi-bar.lvl-over .vx-bar i { background: var(--red); }
.vx-key { display: inline-block; width: 10px; height: 3px; border-radius: 2px; vertical-align: middle; margin: 0 3px 0 6px; background: var(--accent); }
.vx-key.g { background: var(--green); } .vx-key.b { background: var(--blue); }
.vx-key:first-child { margin-left: 0; }
.vx-chart { display: block; width: 100%; height: auto; overflow: visible; }
.vx-chart .vx-grid { stroke: var(--line); stroke-width: 1; }
.vx-chart .vx-axis { font-size: 10.5px; fill: var(--faint); font-family: var(--font); }
.vx-chart .vx-hit { fill: transparent; }
.vx-chart .vx-hit:hover { fill: var(--accent); fill-opacity: .06; }
.vx-timeline { list-style: none; margin: 0; padding: 0; }
.vx-timeline li + li { border-top: 1px solid var(--line); }
.vx-timeline a { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-radius: 8px; }
.vx-timeline a:hover { background: var(--surface-2); }
.vx-timeline time { flex: 0 0 42px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vx-av { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--hover); color: var(--ink-2); font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.vx-tl-main { flex: 1; min-width: 0; }
.vx-tl-main b { display: block; font-weight: 550; }
.vx-tl-main small { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 12px; font-size: 12px; font-weight: 500; white-space: nowrap; background: color-mix(in srgb, var(--c, var(--accent)) 13%, transparent); color: color-mix(in srgb, var(--c, var(--accent)) 82%, var(--ink)); }
.vx-tag.ok { background: var(--green-soft); color: var(--green); }
.vx-tag.off, .vx-tag.none { background: var(--hover); color: var(--muted); }
.vx-tag.warn { background: var(--saffron-soft); color: var(--saffron); }
.vx-tag.hot { background: var(--red-soft); color: var(--red); }
.vx-ins { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.vx-ins h3 { margin: 0 0 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.vx-ins-kw .kw { display: inline-flex; align-items: center; gap: 6px; margin: 0 6px 6px 0; padding: 4px 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12.5px; }
.vx-ins-kw .kw b { color: var(--muted); font-weight: 600; }
.vx-ins-kw p { margin: 0; }
.vx-needs { list-style: none; margin: 0; padding: 0; }
.vx-needs li + li { border-top: 1px solid var(--line); }
.vx-needs a { display: flex; align-items: center; gap: 12px; padding: 12px 2px; }
.vx-needs a > span:nth-child(2) { flex: 1; min-width: 0; }
.vx-needs b { display: block; font-weight: 550; }
.vx-needs small { display: block; font-size: 12px; color: var(--muted); }
.vx-needs a > .i { color: var(--faint); }
.vx-needs a:hover b { color: var(--accent); }
.vx-need-ico { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--hover); color: var(--ink-2); }
.vx-need-ico.accent { background: var(--accent-soft); color: var(--accent); }
.vx-need-ico.warn { background: var(--saffron-soft); color: var(--saffron); }
.vx-need-ico.ok { background: var(--green-soft); color: var(--green); }
.vx-allgood { display: flex; align-items: center; gap: 12px; }
.vx-allgood b { display: block; } .vx-allgood small { color: var(--muted); font-size: 12.5px; }
.vx-places { list-style: none; margin: 0; padding: 0; }
.vx-places li { display: flex; align-items: center; gap: 12px; padding: 11px 0; }
.vx-places li + li { border-top: 1px solid var(--line); }
.vx-places li > span:first-child { flex: 1; min-width: 0; }
.vx-places b { display: block; font-weight: 550; }
.vx-places small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Inställningar som rutor */
.vx-hub { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.vx-id { flex: 1 1 260px; max-width: 320px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 26px 24px; }
.vx-id-av { display: inline-flex; border-radius: 50%; box-shadow: 0 0 0 6px var(--accent-soft); margin-bottom: 8px; }
.vx-id h2 { margin: 6px 0 0; font-size: 24px; font-weight: 650; letter-spacing: -.02em; }
.vx-id p { margin: 0 0 6px; color: var(--muted); }
.vx-id hr { width: 100%; border: 0; border-top: 1px solid var(--line); margin: 12px 0 6px; }
.vx-id-num { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.vx-id-num b { font-size: 18px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.vx-id .vx-pill { margin-top: 10px; }
.vx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.vx-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.vx-hub-main { flex: 999 1 520px; min-width: 0; }
.vx-group { display: block; margin: 4px 0 10px; }
.vx-group:not(:first-child) { margin-top: 22px; }
.vx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.vx-tile { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; min-height: 138px; transition: border-color .15s, background .15s; }
.vx-tile:hover { border-color: var(--accent-line); background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface)); }
.vx-tile-top { display: flex; align-items: center; gap: 10px; }
.vx-tile-top b { flex: 1; min-width: 0; font-weight: 550; font-size: 13.5px; }
.vx-tile-ico { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.vx-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.vx-dot.on { background: var(--green); } .vx-dot.warn { background: var(--saffron); }
.vx-tile-val { font-size: 16px; line-height: 1.35; font-weight: 600; letter-spacing: -.01em; color: var(--ink); overflow-wrap: anywhere; }
.vx-tile > small { margin-top: auto; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }

/* Frågor utan svar */
.vx-seg.seg { display: inline-flex; width: max-content; max-width: 100%; overflow-x: auto; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.vx-seg.seg a { border-radius: 999px; padding: 6px 14px; white-space: nowrap; }
.vx-seg.seg a.on { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.vx-seg.seg a b { font-weight: 600; opacity: .75; margin-left: 2px; }
.vx-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 44px 24px; }
.vx-empty h2 { margin: 6px 0 0; font-size: 18px; font-weight: 650; }
.vx-empty p { margin: 0 0 8px; color: var(--muted); max-width: 460px; }
.vx-empty-ico { width: 52px; height: 52px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.vx-q-head { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.vx-q-text { flex: 1; min-width: 220px; }
.vx-q-text h2 { margin: 0; font-size: 18px; line-height: 1.35; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.vx-q-text p { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.vx-q-text p a { color: var(--accent); }
.vx-q-form textarea { width: 100%; margin-top: 14px; min-height: 64px; border-radius: 10px; resize: vertical; }
.vx-q-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.vx-kb { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 14px; }
.vx-kb > div { flex: 1; min-width: 0; }
.vx-kb b { display: block; font-weight: 550; overflow-wrap: anywhere; } .vx-kb small { color: var(--muted); font-size: 12px; }
.vx-note { display: flex; gap: 12px; align-items: flex-start; }
.vx-note p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.55; }

/* Mallar */
.vx-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.vx-filter a { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; font-weight: 500; color: var(--ink-2); }
.vx-filter a:hover { border-color: var(--accent-line); }
.vx-filter a.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.vx-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.vx-tpl { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.vx-tpl:hover { border-color: var(--accent-line); }
.vx-tpl.on { border: 1.5px solid var(--accent); background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); padding: 13.5px 15.5px; }
.vx-mono { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-weight: 650; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.vx-tpl-t { flex: 1; min-width: 0; }
.vx-tpl-t b { display: block; font-weight: 550; font-size: 13.5px; }
.vx-tpl-t small { display: block; font-size: 12px; color: var(--muted); }
.vx-tpl-preview { display: flex; flex-direction: column; gap: 10px; }
/* 4.115.0: medan en ny mall hämtas utan omladdning */
[data-vx-tpl].is-loading .vx-tpl-preview { opacity: .55; transition: opacity .15s ease; }
.vx-tpl-preview h2 { margin: 0 0 4px; font-size: 21px; font-weight: 650; letter-spacing: -.02em; }
.vx-tpl-preview .vx-eb { margin-top: 8px; }
.vx-bubble { background: var(--accent-soft); color: var(--ink); border-radius: 12px 12px 12px 4px; padding: 12px 14px; line-height: 1.5; }
.vx-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vx-checks li { display: flex; gap: 8px; align-items: flex-start; }
.vx-checks li .i { color: var(--green); margin-top: 3px; }
.vx-details summary { cursor: pointer; font-size: 13px; font-weight: 500; color: var(--accent); }
.vx-details ul { margin: 8px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.vx-note-s { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }

/* Rapporter */
.vx-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vx-kpis-8 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.vx-kpis-8 .vx-kpi b { font-size: 26px; }
.vx-delta { font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 10px; letter-spacing: 0; background: var(--hover); color: var(--muted); }
.vx-delta.up { background: var(--green-soft); color: var(--green); }
.vx-delta.down { background: var(--red-soft); color: var(--red); }
.vx-delta.new { background: var(--accent-soft); color: var(--accent); }
.vx-heat-wrap { overflow-x: auto; padding-bottom: 4px; }
.vx-heat { display: grid; grid-template-columns: 34px repeat(24, minmax(16px, 1fr)); gap: 3px; min-width: 560px; align-items: center; }
.vx-heat i { display: block; height: 22px; border-radius: 4px; background: color-mix(in srgb, var(--accent) calc(var(--a) * 100%), var(--hover)); }
.vx-heat-h { font-size: 10px; color: var(--faint); text-align: left; }
.vx-heat-d { font-size: 11px; color: var(--muted); }
.vx-heat-scale { display: flex; align-items: center; gap: 4px; justify-content: flex-end; margin-top: 10px; }
.vx-heat-scale i { width: 16px; height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--accent) calc(var(--a) * 100%), var(--hover)); }
.vx-heat-scale small { font-size: 11px; color: var(--faint); margin: 0 4px; }
.vx-donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.vx-donut { width: 150px; height: 150px; flex: 0 0 150px; }
.vx-donut-bg { stroke: var(--hover); }
.vx-donut-c { font-size: 20px; font-weight: 650; fill: var(--ink); font-family: var(--font); }
.vx-donut-s { font-size: 9.5px; fill: var(--muted); font-family: var(--font); }
.vx-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 8px; }
.vx-legend li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.vx-legend li span { flex: 1; } .vx-legend li i { width: 10px; height: 10px; border-radius: 3px; }
.vx-legend li small { width: 40px; text-align: right; color: var(--muted); }
.vx-funnel { display: flex; flex-direction: column; gap: 12px; }
.vx-funnel-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 48px 44px; align-items: center; gap: 12px; font-size: 13px; }
.vx-funnel-row b { text-align: right; font-variant-numeric: tabular-nums; } .vx-funnel-row small { text-align: right; color: var(--muted); }
.vx-funnel-bar { height: 26px; border-radius: 7px; background: var(--surface-2); overflow: hidden; }
.vx-funnel-bar i { display: block; height: 100%; border-radius: 7px; background: var(--accent); opacity: var(--o); }
.vx-bars { display: flex; flex-direction: column; gap: 12px; }
.vx-bars > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; font-size: 13px; }
.vx-bars > div i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--hover); overflow: hidden; }
.vx-bars > div em { display: block; height: 100%; border-radius: 3px; }
.vx-mini-split { display: flex; gap: 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.vx-mini-split i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.vx-mini-split b { color: var(--ink); margin-left: 4px; }
.vx-kw { display: flex; flex-direction: column; gap: 8px; }
.vx-kw span { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 7px 12px; border-radius: 8px; overflow: hidden; font-size: 13px; }
.vx-kw span::before { content: ""; position: absolute; inset: 0; width: var(--w); background: var(--accent-soft); border-radius: 8px; }
.vx-kw span em, .vx-kw span b { position: relative; font-style: normal; }
.vx-kw span b { color: var(--muted); font-weight: 600; }
.vx-qlist { list-style: none; margin: 0; padding: 0; }
.vx-qlist li { display: flex; gap: 10px; justify-content: space-between; padding: 10px 0; font-size: 13px; }
.vx-qlist li + li { border-top: 1px solid var(--line); }
.vx-qlist li b { color: var(--accent); font-weight: 600; white-space: nowrap; }
.vx-table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }

/* Lär receptionisten vid samtalet */
.vx-teach { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--saffron-soft); border: 1px solid color-mix(in srgb, var(--saffron) 30%, transparent); }
.vx-teach > b { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.vx-teach p { margin: 6px 0 8px; font-size: 13px; overflow-wrap: anywhere; }
.vx-teach textarea { width: 100%; border-radius: 8px; margin-bottom: 8px; resize: vertical; }

/* De befintliga sidorna (receptionisten, tider, regler, flöden, leads, samtal) i samma stil */
.vr.vx .vr-mode { border-radius: 12px; }
.vr.vx .vr-opt { border-radius: 10px; }
.vr.vx .input { border-radius: 8px; }
.vr.vx .ra-save { border-radius: 12px; }
.vr.vx .vr-sub { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.vr.vx .vr-sub[id], .vr.vx section[id] { scroll-margin-top: 16px; }

@media (max-width: 1100px) { .vx-side-col, .vx-grow { flex-basis: 100%; } .vx-id { max-width: none; } }
@media (max-width: 760px) {
  .vr.vx .page-inner.vr-wrap.vx-wrap:not(.has-rail) { padding: 16px 16px 40px; }
  .vx-hero { padding: 24px 20px; gap: 20px; }
  .vx-orb { flex-basis: 120px; width: 120px; height: 120px; }
  .vx-hero h1 { font-size: 26px; }
  .vx-hero-stat { text-align: left; } .vx-hero-stat b { font-size: 48px; }
  .vx-card { padding: 18px 16px; }
  .vx-tiles, .vx-tpl-grid { grid-template-columns: 1fr; }
  .vx-funnel-row { grid-template-columns: 84px minmax(0, 1fr) 36px 38px; gap: 8px; }
  .vx-head h1 { font-size: 22px; }
}
.vx-mini-split i.sent-positiv { background: var(--green); } .vx-mini-split i.sent-negativ { background: var(--red); }
.vx-form { display: flex; flex-direction: column; gap: 18px; }
.vx-sub { display: block; margin: 20px 0 10px; }
.vx-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; }
.vx-opts .vr-opt { margin: 0; }
.vx-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.vx-grid2 .field { margin: 0; }
.vx-savebar { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px 12px 20px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(8px); }
.vx-savebar .muted { flex: 1; min-width: 180px; font-size: 12.5px; }
@media (max-width: 760px) { .vx-savebar { border-radius: 14px; } }

/* 4.111.0: flaggor vid språken – SVG i CSS (inga bilder att ladda, inga emoji som saknas i Windows).
   Arabiska visas med Palestinas flagga – ägarens val. */
.flag { display: inline-block; width: 18px; height: 18px; border-radius: 50%; flex: none; vertical-align: -4px; background: var(--surface-2) center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.lv-flag[data-flag] { font-size: 0; color: transparent; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2) center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); align-self: center; }
.flag[data-flag="sv"], .lv-flag[data-flag="sv"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Crect width='16' height='10' fill='%23006AA7'/%3E%3Crect x='5' width='2' height='10' fill='%23FECC00'/%3E%3Crect y='4' width='16' height='2' fill='%23FECC00'/%3E%3C/svg%3E"); }
.flag[data-flag="da"], .lv-flag[data-flag="da"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Crect width='16' height='10' fill='%23C8102E'/%3E%3Crect x='5' width='2' height='10' fill='%23fff'/%3E%3Crect y='4' width='16' height='2' fill='%23fff'/%3E%3C/svg%3E"); }
.flag[data-flag="no"], .lv-flag[data-flag="no"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Crect width='22' height='16' fill='%23BA0C2F'/%3E%3Crect x='6' width='4' height='16' fill='%23fff'/%3E%3Crect y='6' width='22' height='4' fill='%23fff'/%3E%3Crect x='7' width='2' height='16' fill='%2300205B'/%3E%3Crect y='7' width='22' height='2' fill='%2300205B'/%3E%3C/svg%3E"); }
.flag[data-flag="fi"], .lv-flag[data-flag="fi"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 11'%3E%3Crect width='18' height='11' fill='%23fff'/%3E%3Crect x='5' width='3' height='11' fill='%23002F6C'/%3E%3Crect y='4' width='18' height='3' fill='%23002F6C'/%3E%3C/svg%3E"); }
.flag[data-flag="de"], .lv-flag[data-flag="de"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Crect width='5' height='1' fill='%23000'/%3E%3Crect y='1' width='5' height='1' fill='%23DD0000'/%3E%3Crect y='2' width='5' height='1' fill='%23FFCE00'/%3E%3C/svg%3E"); }
.flag[data-flag="fr"], .lv-flag[data-flag="fr"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='1' height='2' fill='%230055A4'/%3E%3Crect x='1' width='1' height='2' fill='%23fff'/%3E%3Crect x='2' width='1' height='2' fill='%23EF4135'/%3E%3C/svg%3E"); }
.flag[data-flag="es"], .lv-flag[data-flag="es"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23AA151B'/%3E%3Crect y='.5' width='3' height='1' fill='%23F1BF00'/%3E%3C/svg%3E"); }
.flag[data-flag="en"], .lv-flag[data-flag="en"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0 0L60 30M60 0L0 30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0 0L60 30M60 0L0 30' stroke='%23C8102E' stroke-width='2'/%3E%3Cpath d='M30 0V30M0 15H60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30 0V30M0 15H60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E"); }
.flag[data-flag="ar"], .lv-flag[data-flag="ar"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 3'%3E%3Crect width='6' height='1' fill='%23000'/%3E%3Crect y='1' width='6' height='1' fill='%23fff'/%3E%3Crect y='2' width='6' height='1' fill='%23007A3D'/%3E%3Cpath d='M0 0L2 1.5L0 3Z' fill='%23CE1126'/%3E%3C/svg%3E"); }

/* 4.111.0: vidarekopplingens rader – egen klass (.vr-rule delas med bokningsreglerna, som har två kolumner) */
/* 4.128.0: + Vem. Tidskolumnen har fast bredd – med auto blev rubrikens kolumn smal och rubrikerna hamnade fel */
.vx-xfer-h, .vx-xfer { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(110px, .8fr) minmax(140px, 1fr) 252px; gap: 10px; align-items: center; }
.vx-xfer-h { padding: 0 14px 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.vx-xfer { padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; background: var(--surface); }
.vx-xfer-t { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.vx-xfer-t .input { width: 118px; }
.vx-xfer.angry { margin-top: 14px; background: color-mix(in srgb, #f59e0b 6%, var(--surface)); border-color: color-mix(in srgb, #f59e0b 25%, var(--line)); }
.vx-xfer-l { display: flex; align-items: center; gap: 12px; cursor: pointer; min-width: 0; }
.vx-xfer-l b { display: block; font-weight: 600; } .vx-xfer-l small { display: block; color: var(--muted); font-size: 12px; }
.vx-langs { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; vertical-align: middle; }
.vx-langs > span { display: inline-flex; align-items: center; gap: 6px; }
.vx-chip .flag { width: 16px; height: 16px; vertical-align: -3px; margin-right: 2px; }
@media (max-width: 720px) {
  .vx-xfer-h { display: none; }
  .vx-xfer { grid-template-columns: minmax(0, 1fr); }
  .vx-xfer-t .input { flex: 1 1 0; width: auto; min-width: 0; }
  .vx-xfer-t { display: flex; }
}

/* 4.111.0: Flöden som kedjor – Starta när → Om … → Gör det här */
.vx-flows { display: flex; flex-direction: column; gap: 14px; }
.vx-flows-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vx-flow-stats { display: flex; gap: 22px; flex: 1; color: var(--muted); font-size: 13px; flex-wrap: wrap; }
.vx-flow-stats b { font-size: 22px; font-weight: 600; color: var(--ink); margin-right: 4px; letter-spacing: -.01em; }
.vx-flow { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; text-decoration: none; color: inherit; transition: border-color .15s; }
.vx-flow:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.vx-flow.off { opacity: .72; }
.vx-flow-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vx-flow-head > b { font-size: 15px; font-weight: 600; }
.vx-flow-meta { flex: 1; color: var(--muted); font-size: 12.5px; min-width: 200px; }
.vx-flow-err { color: var(--danger, #dc2626); }
.vx-chain { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vx-arrow { color: var(--faint, var(--muted)); font-size: 13px; }
.vx-step { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 15px; font-size: 12.5px; font-weight: 500; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.vx-step.trig { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 22%, var(--line)); color: color-mix(in srgb, var(--accent) 80%, var(--ink)); }
.vx-step.cond { background: color-mix(in srgb, #f59e0b 9%, var(--surface)); border-color: color-mix(in srgb, #f59e0b 25%, var(--line)); }
.vx-step.sm { height: 24px; padding: 0 9px; font-size: 11.5px; }
.vx-flow-empty { text-align: center; padding: 36px 24px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.vx-flow-empty h2 { margin: 6px 0 0; font-size: 17px; } .vx-flow-empty p { margin: 0; color: var(--muted); max-width: 520px; }
.vx-flow-empty-ico, .vx-flow-tpl-ico { width: 44px; height: 44px; border-radius: 12px; display: inline-grid; place-items: center; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent); }
.vx-flow-tpl-ico { width: 36px; height: 36px; border-radius: 10px; }
.vx-flows-tpl-h { margin-top: 10px; }
.vx-flow-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.vx-flow-tpl { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; text-decoration: none; color: inherit; }
.vx-flow-tpl:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.vx-flow-tpl > b { font-size: 14px; font-weight: 600; line-height: 1.35; } .vx-flow-tpl > small { color: var(--muted); font-size: 12.5px; }
.vx-flow-tpl-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.vx-flow-tpl-go { margin-top: auto; padding-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--accent); }
.ld-kpis { margin-bottom: 14px; }
.flag[data-flag="ar"], .lv-flag[data-flag="ar"] { background-position: left center; }   /* triangeln sitter vid stången – visa den vänstra delen */

/* 4.111.0: en del av Receptionisten i taget – de andra ligger kvar i formuläret men syns inte */
.vx-off { display: none !important; }
.ra.ra-only .ra-grid { grid-template-columns: minmax(0, 1fr) !important; max-width: 860px; }

/* 4.111.0: Platser – listan till vänster, vald plats till höger */
.vp2 { display: flex; flex-direction: column; gap: 16px; }
.vp2-company { padding-bottom: 18px; }
.vp2-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.vp2-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 22px; }
.vp2-span { grid-column: 1 / -1; }
.vp2-msg { display: block; padding: 6px 22px 0; }
.vp2-layout { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.vp2-side { flex: 1 1 260px; max-width: 320px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.vp2-eds { flex: 999 1 520px; min-width: 0; }
.vp2-list { display: flex; flex-direction: column; gap: 10px; }
.vp2-item { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: inherit; font: inherit; cursor: pointer; }
.vp2-item:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.vp2-item.on { border: 1.5px solid var(--accent); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); padding: 13.5px 15.5px; }
.vp2-item-top { display: flex; align-items: center; gap: 8px; }
.vp2-item-top b { flex: 1; font-size: 15px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp2-item small { color: var(--muted); font-size: 12.5px; }
.vp2-item .vp2-item-h { margin-top: 4px; }
.vp2-add { align-self: flex-start; }
.vp2-hint { margin: 2px 4px 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.vp2-xfer { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); color: inherit; text-decoration: none; }
.vp2-xfer > span { flex: 1; } .vp2-xfer b { display: block; font-weight: 600; font-size: 13px; } .vp2-xfer small { color: var(--muted); font-size: 12px; }
.vp2-ed { padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.vp2-ed[hidden] { display: none; }
.vp2-ed-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.vp2-name { flex: 1; min-width: 0; font-family: inherit; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--ink); border: 1px solid transparent; border-radius: 8px; padding: 4px 8px; margin-left: -8px; background: transparent; }
.vp2-name:hover { border-color: var(--line); } .vp2-name:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.vp2-del { color: var(--danger, #dc2626); }
.vp2-eb { margin: 14px 0 2px; }
.vp2-own { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.vp2-own b { display: block; font-weight: 600; } .vp2-own small { display: block; color: var(--muted); font-size: 12px; }
.vp2-keep { margin: 0; font-size: 12.5px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.vp2-days { display: flex; flex-direction: column; }
.vp2-ed:has([data-vp2-own]:not(:checked)) .vp2-days { display: none; }
.vp2-day { display: grid; grid-template-columns: 110px 120px minmax(0, 1fr); align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.vp2-day:first-child { border-top: 0; }
.vp2-day > b { font-weight: 500; }
.vp2-on { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.vp2-off-l { display: none; }
.vp2-day:has([data-vp2-day]:not(:checked)) .vp2-on-l { display: none; }
.vp2-day:has([data-vp2-day]:not(:checked)) .vp2-off-l { display: inline; }
.vp2-day:has([data-vp2-day]:not(:checked)) .vp2-times { visibility: hidden; }
.vp2-times { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.vp2-times .input { width: 118px; }
.vp2-copy { align-self: flex-start; margin-top: 8px; font-size: 12.5px; }
.vp2-info { min-height: 64px; resize: vertical; }
@media (max-width: 720px) {
  .vp2-grid, .vp2-grid.three { grid-template-columns: minmax(0, 1fr); }
  .vp2-side { max-width: none; }
  .vp2-day { grid-template-columns: 76px minmax(0, 1fr); }
  .vp2-times { grid-column: 1 / -1; }
  .vp2-times .input { flex: 1 1 0; width: auto; min-width: 0; }
  .vp2-day:has([data-vp2-day]:not(:checked)) .vp2-times { display: none; }
}

/* 4.111.0: Samtal – listan till vänster, det valda samtalet till höger */
.vx-csearch .input { min-width: 220px; }
.vx-calls { display: flex; gap: 18px; align-items: flex-start; margin-top: 14px; }
.vx-clist { flex: 0 0 320px; min-width: 0; padding: 8px 0; max-height: calc(100vh - 230px); overflow-y: auto; position: sticky; top: 12px; }
.vx-clist-head { display: flex; align-items: baseline; gap: 8px; padding: 10px 18px 6px; }
.vx-clist-head b { font-weight: 600; } .vx-clist-head small { color: var(--muted); font-size: 12px; }
.vx-clist-day { padding: 12px 18px 4px; }
.vx-ci { display: flex; flex-direction: column; gap: 4px; padding: 12px 18px; color: inherit; text-decoration: none; border-top: 1px solid var(--line); }
.vx-ci:hover { background: var(--surface-2); }
.vx-ci.on { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); box-shadow: inset 3px 0 0 var(--accent); }
.vx-ci-top { display: flex; align-items: center; gap: 6px; }
.vx-ci-top b { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-ci-top small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.vx-ci-sum { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-ci-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.vx-ci-tags .vx-tag { height: 22px; font-size: 11.5px; padding: 0 8px; }
.vx-ci-tags small { color: var(--muted); font-size: 12px; margin-left: auto; }
.vx-hot { color: #ea580c; display: inline-flex; }
.vx-cdetail { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.vx-cback { display: none; font-size: 12.5px; text-decoration: none; }
.vx-cd-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vx-av.lg { width: 46px; height: 46px; font-size: 15px; }
.vx-cd-title { flex: 1; min-width: 200px; }
.vx-cd-title h2 { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -.01em; display: flex; align-items: center; gap: 6px; }
.vx-cd-title p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.vx-player { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.vx-player audio { flex: 1; min-width: 0; height: 40px; }
.vx-player b { display: block; font-weight: 600; } .vx-player small { color: var(--muted); font-size: 12.5px; }
.vx-player-ico { width: 44px; height: 44px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.vx-player-ico.on { background: var(--accent); color: #fff; }
.vx-cd-grid { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.vx-transcript { flex: 999 1 380px; min-width: 0; padding: 18px 22px; }
.vx-transcript > .vx-eb { margin-bottom: 4px; }
.vx-tl-line, .vx-tl-tool { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 10px 0; }
.vx-tl-line time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; padding-top: 2px; }
.vx-tl-line b { font-weight: 600; font-size: 13px; }
.vx-tl-line.ai b { color: var(--accent); }
.vx-tl-line p { margin: 2px 0 0; line-height: 1.55; }
.vx-tl-tool { padding: 2px 0; font-size: 12px; color: var(--muted); }
.vx-cd-side { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.vx-sumcard, .vx-facts, .vx-cd-side .vx-teach { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.vx-sumcard p { margin: 0; line-height: 1.6; }
.vx-facts ul { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 8px; }
.vx-facts li { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.vx-facts li i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--line-strong, #cbd5e1)); flex: none; }
.vx-facts li span { color: var(--muted); flex: 1; } .vx-facts li b { font-weight: 500; text-align: right; }
.vx-kwds { display: flex; flex-wrap: wrap; gap: 6px; }
.vx-kwds span { font-size: 12px; padding: 3px 9px; border-radius: 10px; background: var(--surface-2); color: var(--ink); }
.vx-tab-samtal .vr-filters select { min-width: 110px; }
.vx-tab-samtal .vx-csearch .input { min-width: 200px; }
.vx-calls-empty { text-align: center; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 14px; }
.vx-calls-empty h2 { margin: 6px 0 0; font-size: 17px; } .vx-calls-empty p { margin: 0; color: var(--muted); }
@media (max-width: 900px) {
  .vx-calls { flex-direction: column; }
  .vx-clist { flex: none; width: 100%; max-height: none; position: static; }
  .vx-calls.has-open .vx-clist { display: none; }
  .vx-calls.has-open .vx-cback { display: inline-flex; align-items: center; gap: 4px; }
  .vx-calls:not(.has-open) .vx-cdetail { display: none; }
  .vx-csearch .input { min-width: 0; }
}
.ra.ra-only .ra-grid > section > .card-head { display: none; }   /* sidans rubrik säger redan vad det är */
.ra.ra-only .vx-savebar, .ra.ra-only .ra-save { max-width: 860px; }

/* ─── 4.112.0: översikten som kontrollrum (stil D1, vald av ägaren) ─────────────────────────────────
   Rutor i ett rutnät med 12 kolumner. Numret först i en mörk ruta med receptionisten som levande figur.
   Den mörka rutan blandas fram ur accentfärgen, så den följer arbetsytans färg i både ljust och mörkt läge.
   Telefonens sidor får samma mjuka rutor (16–18 px, nästan ingen skugga) – ägaren valde stilen uttryckligen. */
.page.vx { background: color-mix(in srgb, var(--accent) 3%, var(--surface-2)); }
.vb { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.vb-t { position: relative; min-width: 0; padding: 22px 24px; border-radius: 18px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 3%, transparent), 0 12px 30px -22px color-mix(in srgb, var(--accent) 45%, transparent); overflow: hidden; }
.vb-wide { grid-column: 1 / -1; }
.vb-8 { grid-column: span 8; } .vb-4 { grid-column: span 4; }
.vb .vx-eb.ok { color: var(--green); }

/* Den mörka rutan med numret */
.vb-hero { grid-column: span 8; display: flex; align-items: center; gap: 30px; padding: 30px 32px; border: 0;
  --hx: color-mix(in srgb, var(--accent) 26%, #0D0716); --hx-ink: #F6F2FC; --hx-mut: color-mix(in srgb, var(--accent) 22%, #CFC6DC);
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 34%, var(--hx)) 0%, var(--hx) 60%); color: var(--hx-ink); }
.vb-orb { position: relative; flex: 0 0 188px; width: 188px; height: 188px; display: flex; align-items: center; justify-content: center; }
.vb-ring { position: absolute; inset: 6px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--accent) 70%, #fff); opacity: .22; }
.vb-ring:nth-child(2) { inset: 22px; opacity: .3; } .vb-ring:nth-child(3) { inset: 38px; opacity: .4; }
.vb-hero.on .vb-ring { inset: 38px; opacity: 0; animation: vb-ring 2.8s ease-out infinite; }
.vb-hero.on .vb-ring:nth-child(2) { animation-delay: .93s; } .vb-hero.on .vb-ring:nth-child(3) { animation-delay: 1.86s; }
@keyframes vb-ring { 0% { transform: scale(.82); opacity: .6; } 100% { transform: scale(1.32); opacity: 0; } }
.vb-core { position: relative; z-index: 1; width: 112px; height: 112px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 30%, var(--hx)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent), 0 0 56px color-mix(in srgb, var(--accent) 55%, transparent); }
.vb-core svg { border-radius: 50%; }
.vb-wave { position: absolute; z-index: 2; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 3px; height: 34px; }
.vb-wave i, .vb-callwave i { display: block; width: 4px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 55%, #fff); transform-origin: center; transform: scaleY(.35); }
.vb-hero:not(.on) .vb-wave { opacity: .35; }
.vb-hero.on .vb-wave i, .vb-call.has-calls .vb-callwave i { animation: vb-bar 1.1s ease-in-out infinite; }
@keyframes vb-bar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.vb-hero-main { flex: 1; min-width: 0; }
.vb-live { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--saffron) 60%, #fff); }
.vb-live.ok { color: color-mix(in srgb, var(--green) 55%, #fff); }
.vb-live i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.vb-live.ok i { animation: vb-blink 1.6s ease-in-out infinite; }
@keyframes vb-blink { 50% { opacity: .35; } }
.vb-num { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 12px 0 8px; }
.vb-num-t { font-size: clamp(28px, 2.7vw, 38px); line-height: 1.08; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vb-num-none { font-size: 26px; font-weight: 600; color: var(--hx-mut); }
.vb-copy { flex: none; width: 34px; height: 34px; border-radius: 10px; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--hx-ink); background: rgba(255, 255, 255, .1); }
.vb-copy:hover { background: rgba(255, 255, 255, .18); }
.vb-hero-p { margin: 0 0 14px; color: var(--hx-mut); line-height: 1.55; }
.vb-flags { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: -3px; }
.vb-flags .flag { width: 17px; height: 17px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .25); }
.vb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.vb-chips a { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 15px; font-size: 12.5px; color: var(--hx-ink); background: rgba(255, 255, 255, .08); }
.vb-chips a:hover { background: rgba(255, 255, 255, .15); }
.vb-chips a svg { opacity: .75; }
.vb-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.vb-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: 19px; border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 13px; white-space: nowrap; }
.vb-btn.light { background: var(--hx-ink); color: color-mix(in srgb, var(--accent) 60%, #000); }
.vb-btn.light:hover { background: #fff; }
.vb-btn.ghost { background: transparent; color: var(--hx-ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.vb-btn.ghost:hover { background: rgba(255, 255, 255, .08); }

/* Dagens siffror */
.vb-stack { grid-column: span 4; display: grid; grid-template-rows: 1fr 1fr; gap: 16px; min-width: 0; }
.vb-today { padding-bottom: 60px; }
.vb-big { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; }
.vb-big b { font-size: 54px; line-height: 1; font-weight: 650; letter-spacing: -.035em; color: var(--ink); font-variant-numeric: tabular-nums; }
.vb-delta { margin-bottom: 7px; font-size: 13px; font-weight: 500; color: var(--muted); }
.vb-delta.up { color: var(--green); font-weight: 600; }
.vb-spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 52px; display: block; }
.vb-spark .a { fill: var(--accent); fill-opacity: .1; } .vb-spark .l { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.vb-gauge { display: flex; align-items: center; gap: 18px; }
.vb-gauge svg { flex: none; }
.vb-gauge .bg { fill: none; stroke: var(--hover); stroke-width: 4; }
.vb-gauge .fg { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.vb-gauge text { font-size: 8.5px; font-weight: 700; fill: var(--ink); font-family: var(--font); }
.vb-gauge p { margin: 6px 0 0; color: var(--ink-2); line-height: 1.5; }

/* Pågående eller senaste samtalet */
.vb-call { grid-column: span 4; display: flex; flex-direction: column; gap: 12px; }
.vb-call-live, .vb-callwave { display: none; }
.vb-call.has-calls .vb-call-live { display: flex; align-items: center; gap: 8px; }
.vb-call.has-calls .vb-callwave { display: flex; align-items: center; gap: 3px; height: 40px; }
.vb-callwave i { background: var(--accent); }
.vb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: vb-blink 1.6s ease-in-out infinite; }
.vb-count { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted); }
.vb-live-list { display: flex; flex-direction: column; gap: 8px; }
.vb-live-list:empty { display: none; }
.vb-last { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.vb-last[hidden] { display: none; }
.vb-who { display: flex; align-items: center; gap: 12px; color: inherit; }
.vb-av { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; background: var(--accent-soft); color: var(--accent); }
.vb-who-t { flex: 1; min-width: 0; }
.vb-who-t b { display: block; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-who-t small { display: block; font-size: 12.5px; color: var(--muted); }
.vb-quote { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); color: var(--ink-2); line-height: 1.5; }
.vb-more { margin-top: auto; }
.vb-empty { display: flex; align-items: center; gap: 10px; color: var(--muted); line-height: 1.5; flex: 1; }
.vb-empty svg { flex: none; }

/* När kunderna ringer */
.vb-heat { grid-column: span 4; display: flex; flex-direction: column; }
.vb-grid { display: grid; grid-template-columns: 30px repeat(var(--cols), minmax(0, 1fr)); gap: 3px; margin-top: 14px; }
.vb-grid i { display: block; height: 15px; border-radius: 4px; background: var(--hover); }
.vb-grid i[style] { background: color-mix(in srgb, var(--accent) calc(var(--a) * 100%), var(--hover)); }
.vb-dl { font-size: 10.5px; color: var(--muted); align-self: center; }
.vb-hours { display: grid; grid-template-columns: 30px repeat(var(--cols), minmax(0, 1fr)); gap: 3px; margin-top: 6px; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vb-heat-p { margin: 14px 0 0; color: var(--ink-2); line-height: 1.5; }
.vb-heat-p b { color: var(--ink); font-weight: 600; }

/* Receptionisten behöver dig */
.vb-needs { grid-column: span 4; display: flex; flex-direction: column; }
.vb-needs ul { list-style: none; margin: 8px 0 0; padding: 0; }
.vb-needs li a { display: flex; align-items: center; gap: 12px; padding: 12px 0; color: inherit; }
.vb-needs li + li a { border-top: 1px solid var(--line); }
.vb-needs li a > svg { color: var(--faint); flex: none; }
.vb-needs li a:hover b { color: var(--accent); }
.vb-need-t { flex: 1; min-width: 0; }
.vb-need-t b { display: block; font-weight: 600; }
.vb-need-t small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.vb-allgood { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 18px 0; }
.vb-allgood .vx-need-ico { width: 44px; height: 44px; flex-basis: 44px; border-radius: 50%; margin-bottom: 4px; }
.vb-allgood small { color: var(--muted); }

/* Siffrorna för månaden och korten under */
.vb-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.vb-kpi { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; }
.vb-kpi b { font-size: 30px; line-height: 1.05; font-weight: 650; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.vb-kpi b small { font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.vb-kpi > small { font-size: 12.5px; color: var(--muted); }
.vb-kpi > small a { color: var(--accent); }
.vb-ins { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.vb .vx-notready { margin: 0; }

/* Övriga sidor i telefonen: samma mjuka kort */
.vr.vx .vx-card, .vr.vx .vr-card, .vr.vx .card, .vr.vx .vr-filters { border-radius: 16px; border-color: color-mix(in srgb, var(--line) 80%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 3%, transparent), 0 12px 30px -24px color-mix(in srgb, var(--accent) 45%, transparent); }

@media (max-width: 1180px) {
  .vb-hero, .vb-stack { grid-column: 1 / -1; }
  .vb-stack { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .vb { grid-auto-flow: row dense; }   /* senaste samtalet och "behöver dig" sida vid sida, värmekartan under */
  .vb-call, .vb-needs { grid-column: span 6; }
  .vb-heat, .vb-8, .vb-4 { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .vb-hero.on .vb-ring, .vb-hero.on .vb-wave i, .vb-call.has-calls .vb-callwave i, .vb-live.ok i, .vb-dot { animation: none; }
  .vb-hero.on .vb-ring { inset: 22px; opacity: .3; }
}

/* Mobilen: sidorna som en rad att svepa i stället för ett rutnät på tre rader */
@media (max-width: 760px) {
  .vr.vx .page-inner.vr-wrap.vx-wrap:not(.has-rail) { padding: 14px 14px 110px; }
  .vr.vx .vr-main { gap: 14px; }
  .voice-tabs-m.seg { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; gap: 6px; padding: 2px 14px 4px !important; margin: 0 -14px !important;
    background: none !important; border: 0 !important; box-shadow: none !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .voice-tabs-m.seg::-webkit-scrollbar { display: none; }
  .voice-tabs-m.seg a { flex: none; display: inline-flex !important; align-items: center; gap: 6px; height: 36px !important; padding: 0 14px !important; border-radius: 18px !important; white-space: nowrap;
    background: var(--surface) !important; border: 1px solid var(--line) !important; color: var(--ink-2) !important; box-shadow: none !important; scroll-snap-align: start; font-size: 13px; }
  .voice-tabs-m.seg a.on { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--surface) !important; }
  .vx-head h1 { font-size: 22px; }
  .vb { gap: 12px; }
  .vb > *, .vb-call, .vb-needs, .vb-heat, .vb-8, .vb-4 { grid-column: 1 / -1; }
  .vb-t { padding: 18px; border-radius: 16px; }
  .vb-hero { flex-direction: column; align-items: flex-start; gap: 4px; padding: 22px 20px; }
  .vb-orb { flex-basis: auto; width: 116px; height: 116px; margin: -4px 0 0 -6px; }
  .vb-core { width: 76px; height: 76px; }
  .vb-core svg { width: 52px; height: 52px; }
  .vb-wave { bottom: 4px; height: 24px; } .vb-wave i { width: 3px; }
  .vb-num-t { font-size: 30px; }
  .vb-acts .vb-btn { flex: 1 1 auto; justify-content: center; }
  .vb-stack { grid-template-columns: 1fr; gap: 12px; }
  .vb-big b { font-size: 46px; }
  .vb-kpis { grid-template-columns: 1fr 1fr; gap: 12px; }
  .vb-kpi { padding: 16px; }
  .vb-kpi b { font-size: 24px; }
  .vb-kpis > .vb-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .vr.vx .vr-filters { display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
  .vr.vx .vr-filters .vx-csearch { grid-column: 1 / -1; }
  .vr.vx .vr-filters .vx-csearch .input, .vr.vx .vr-filters select.input { width: 100%; }
  .vr.vx .vr-filters .grow { display: none; }
  .vr.vx .vr-filters > .btn { justify-content: center; }
  .plan-bar { left: 12px; right: 12px; transform: none; width: auto; max-width: none; align-items: flex-start; }
  .plan-bar > span { flex: 1; min-width: 0; }
}
.vb-earlier { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.vb-earlier a { display: flex; align-items: center; gap: 10px; padding: 9px 0; color: inherit; font-size: 13px; }
.vb-earlier li + li a { border-top: 1px solid var(--line); }
.vb-earlier time { flex: 0 0 auto; min-width: 82px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.vb-earlier b { flex: 1; min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-earlier i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--faint)); }
.vb-earlier a:hover b { color: var(--accent); }
:root[data-theme="dark"] .vb-hero { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 18px 40px -24px rgba(0, 0, 0, .7); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vb-hero { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 18px 40px -24px rgba(0, 0, 0, .7); } }
/* 4.112.0: samtalens filter på en rad på datorn – sökfältet tar resten av bredden */
@media (min-width: 761px) {
  .vr.vx .vr-filters { flex-wrap: nowrap; }
  .vr.vx .vr-filters > label { flex: 0 0 auto; }
  .vr.vx .vr-filters > label.vx-csearch { flex: 1 1 160px; min-width: 0; }
  .vr.vx .vr-filters .vx-csearch .input { width: 100%; }
  .vr.vx .vr-filters select.input { width: 112px; }
  .vr.vx .vr-filters .grow { display: none; }
  .vr.vx .vr-filters > .btn { flex: none; }
}
@media (min-width: 761px) and (max-width: 1180px) { .vr.vx .vr-filters { flex-wrap: wrap; } }
/* 4.112.0: öppettiderna på mobilen – dagen på en rad, tiderna på raden under i full bredd (förut kapades 08:00 till "08:0") */
@media (max-width: 760px) {
  .vr.vx .vr-hours-edit > div { flex-wrap: wrap; row-gap: 8px; }
  .vr.vx .vr-hours-edit b { flex: 1 1 calc(100% - 60px); width: auto; }
  .vr.vx .vr-hours-edit .input { flex: 1 1 0; min-width: 0; }
}
/* 4.112.0: mobilen – siffrorna två och två, leads verktygsrad i tydliga rader, rapportens värmekarta utan sidledsrullning */
@media (max-width: 760px) {
  .vr.vx .vx-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .vr.vx .vx-kpis > .vx-kpi { padding: 14px 15px; gap: 6px; min-width: 0; }
  .vr.vx .vx-kpis > .vx-kpi b { font-size: 23px; }
  .vr.vx .vx-kpis > .vx-kpi .vx-eb { font-size: 10.5px; letter-spacing: .07em; }
  .vr.vx .vx-kpis > .vx-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .vr.vx .ld-bar { gap: 8px; }
  .vr.vx .ld-bar .grow { display: none; }
  .vr.vx .ld-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .vr.vx .ld-filters .ld-search { grid-column: 1 / -1; }
  .vr.vx .ld-filters select.input { width: 100%; max-width: none; }
  .vr.vx .ld-filters select.input:only-of-type { grid-column: 1 / -1; }
  .vr.vx .ld-views { flex: 1 1 auto; }
  .vr.vx .ld-bar > .btn:not(.icon) { flex: 1 1 40%; justify-content: center; order: 3; }
  .vr.vx .vx-heat { min-width: 0; grid-template-columns: 26px repeat(24, minmax(0, 1fr)); gap: 2px; }
  .vr.vx .vx-heat-h { font-size: 9.5px; overflow: visible; white-space: nowrap; }
  .vr.vx .vx-seg { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .vr.vx .vx-seg::-webkit-scrollbar { display: none; }
  .vr.vx .vx-seg a { flex: none; }
}
@media (max-width: 760px) { .plan-bar { flex-wrap: wrap; row-gap: 4px; } .plan-bar > span { flex: 1 1 calc(100% - 60px); } }

/* 4.113.1: Abonnemang för administratörer – vem som sköter betalningen */
.ab-owner .card-body { gap: 14px; }
.ab-owner-row { display: flex; gap: 12px; align-items: flex-start; }
.ab-owner-row b { display: block; font-size: 14px; font-weight: 600; }
.ab-owner-row small { display: block; color: var(--muted); font-size: 13px; line-height: 1.5; margin-top: 2px; }
.ab-owner-ic { flex: 0 0 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-soft, var(--hover)); color: var(--text); }
.plan-bar-who { font-weight: 600; white-space: nowrap; opacity: .85; }

/* 4.113.1: Mitt konto → Dina företag */
.acc-ws { display: grid; gap: 0; padding-top: 4px !important; padding-bottom: 4px !important; }
.acc-ws-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); min-width: 0; }
.acc-ws-row:first-child { border-top: 0; }
.acc-ws-dot { flex: 0 0 10px; height: 10px; border-radius: 50%; }
.acc-ws-main { flex: 1; min-width: 0; }
.acc-ws-main a { color: var(--text); text-decoration: none; }
.acc-ws-main b { font-weight: 600; font-size: 14px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-ws-main small { display: block; color: var(--muted); font-size: 12.5px; }
.acc-ws-note { white-space: nowrap; }

/* 4.114.0: webbchatt med besökarens e-post – raden ovanför verktygen visar vart svaret mejlas och från vilken adress */
.cmp-mailvia { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 2px 12px 8px; padding: 6px 9px; border-radius: 7px; background: var(--surface-2); font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.cmp-mailvia.hidden { display: none !important; }
.cmp-mailvia b { font-weight: 600; color: var(--ink-2); }
.cmp-mailvia-ico { display: inline-flex; vertical-align: -2px; margin-right: 3px; color: var(--muted); }
.cmp-mailvia-txt { min-width: 0; overflow-wrap: anywhere; }
.cmp-mailvia-from { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; min-width: 0; }
.cmp-mailvia-from .input.sm { height: 26px; font-size: 12.5px; padding: 0 24px 0 8px; max-width: 280px; min-width: 0; }
.cmp-mailvia-none { margin-left: 0; }
.cmp-mailvia.is-missing { background: var(--red-soft); color: var(--red); }
.cmp-mailvia.is-missing .input.sm { border-color: var(--red); }
@media (max-width: 640px) { .cmp-mailvia-from { margin-left: 0; width: 100%; } .cmp-mailvia-from .input.sm { flex: 1; max-width: none; } }

/* 4.114.0: Varumärke – formuläret till vänster, exempelmejlet till höger (under varandra på smal skärm) */
.wsb-grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 16px; align-items: start; }
.wsb-form .card-body { gap: 18px; }
.wsb-logo-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wsb-logo-box { --band: #3B2A4E; width: 220px; max-width: 100%; height: 64px; border-radius: 10px; background: var(--band); display: flex; align-items: center; padding: 0 18px; overflow: hidden; flex: none; }
.wsb-logo-box img { max-height: 34px; max-width: 100%; width: auto; display: block; }
.wsb-logo-box img[hidden] { display: none; }
.wsb-logo-box span { font-size: 16px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsb-logo-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.wsb-remove { font-size: 12.5px; color: var(--muted); }
.wsb-color-row { display: flex; align-items: center; gap: 12px; }
.wsb-swatch { width: 64px; height: 34px; padding: 2px; flex: none; cursor: pointer; }
.wsb-swatch:disabled { opacity: .45; cursor: default; }
.wsb-colors .field { min-width: 0; }
.wsb-credit { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.wsb-credit.is-locked .switch { cursor: default; }
.wsb-credit.is-locked .switch input { opacity: .55; cursor: default; }
.wsb-upgrade { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 8px 10px; border-radius: 7px; background: var(--surface-2); font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.wsb-upgrade > svg { color: var(--muted); flex: none; }
.wsb-upgrade > span { flex: 1 1 180px; min-width: 0; }
.wsb-upgrade.sm { margin-top: 2px; }
.wsb-preview { padding: 0; overflow: hidden; position: sticky; top: 12px; }
.wsb-pv-head { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.wsb-preview iframe { display: block; width: 100%; height: 740px; border: 0; background: #F6F6F8; }
@media (max-width: 960px) { .wsb-grid { grid-template-columns: minmax(0, 1fr); } .wsb-preview { position: static; } .wsb-preview iframe { height: 680px; } }
@media (max-width: 520px) { .wsb-colors { grid-template-columns: minmax(0, 1fr); } .wsb-logo-box { width: 100%; } }
.card.wsb-preview { display: flex; flex-direction: column; }
.card.wsb-preview > iframe[data-wsb-frame] { display: block; width: 100%; height: 740px; min-height: 740px; flex: none; }
@media (max-width: 960px) { .card.wsb-preview > iframe[data-wsb-frame] { height: 680px; min-height: 680px; } }
.wsb-grid > .card { margin: 0; }
/* 4.115.0: hämta från webbplatsen */
.wsb-logo-box { box-shadow: inset 0 0 0 1px var(--line); }   /* syns även när bandet är vitt som kortet */
.wsb-site { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); border-radius: 10px 10px 0 0; }
.wsb-site-t { display: flex; gap: 10px; align-items: flex-start; }
.wsb-site-t > svg { color: var(--accent); flex: none; margin-top: 2px; }
.wsb-site-t b { display: block; font-size: 13.5px; font-weight: 600; }
.wsb-site-t small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.wsb-site-row { display: flex; gap: 8px; }
.wsb-site-row .input { flex: 1 1 auto; min-width: 0; }
.wsb-site-row .btn { flex: none; }
.wsb-site-msg { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); padding: 8px 10px; border-radius: 7px; background: var(--surface); border: 1px solid var(--line); }
.wsb-site-msg.bad { color: var(--red); border-color: color-mix(in srgb, var(--red) 30%, var(--line)); }
.wsb-site-msg ul { margin: 4px 0 0; padding-left: 18px; }
.wsb-swatch:disabled { opacity: .75; }

/* 4.116.0: System → Mediabibliotek */
.mlib-up { padding: 0; overflow: hidden; }
.mlib-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 16px; margin: 14px; border: 1.5px dashed var(--line-strong); border-radius: 10px; cursor: pointer; text-align: center; background: var(--surface-2); }
.mlib-drop.on, .mlib-drop:hover { border-color: var(--accent); background: var(--accent-soft); }
.mlib-drop-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--accent); }
.mlib-drop b { font-size: 13.5px; font-weight: 600; word-break: break-word; }
.mlib-drop small { font-size: 12.5px; color: var(--muted); }
.mlib-up-foot { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.mlib-up-foot small { display: inline-flex; align-items: center; gap: 6px; }
.mlib-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 34px 16px; color: var(--muted); text-align: center; }
.mlib-empty b { color: var(--ink); font-size: 14px; }
.mlib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-top: 16px; }
.mlib-grid > .card { margin: 0; }   /* inte stapelns avstånd mellan kort – rutnätet sköter det */
.mlib-item { margin: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.mlib-thumb { display: grid; place-items: center; height: 150px; padding: 14px; border-bottom: 1px solid var(--line);
  background-color: var(--surface-2); background-image: linear-gradient(45deg, var(--line) 25%, transparent 25%), linear-gradient(-45deg, var(--line) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--line) 75%), linear-gradient(-45deg, transparent 75%, var(--line) 75%);
  background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.mlib-thumb img { max-width: 100%; max-height: 122px; object-fit: contain; display: block; }
.mlib-body { display: flex; flex-direction: column; gap: 8px; padding: 12px; min-width: 0; }
.mlib-name, .mlib-link { display: flex; gap: 6px; min-width: 0; }
.mlib-name .input, .mlib-link .input { flex: 1 1 auto; min-width: 0; }
.mlib-name .input { font-weight: 600; }
.mlib-link .input { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.mlib-body > form:last-child { align-self: flex-start; }

/* 4.117.0: Tider – bokningar på samma tid */
.vx-cap { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.vx-cap .field { max-width: 280px; margin: 0; }
.vx-cap .help { max-width: 640px; }

/* 4.118.0: obetald faktura – under planstapeln om båda syns (båda är fasta överst) */
.plan-bar + .hold-bar { top: 46px; }
.hold-bar a + a { margin-left: 4px; }

/* 4.119.0: visningen av ett möte – bred ruta med två kolumner (tid, kund, plats, ärende | ansvarig, kollegor,
   beskrivning). Ändra och Ta bort är egna knappar i foten. En kolumn på smala skärmar. */
dialog.modal.cal-view { width: min(780px, calc(100vw - 24px)); max-height: min(86vh, 720px); display: none; flex-direction: column; overflow: hidden; }
dialog.modal.cal-view[open] { display: flex; }
.cal-view .cv-head { align-items: flex-start; gap: 12px; }
.cal-view .cv-head-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.cal-view .cv-head h3 { margin: 0; font-size: 16px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.cal-view .cv-body { padding: 0; overflow-y: auto; flex: 1; min-height: 0; }
.cv-grid { display: grid; grid-template-columns: 1fr 1fr; }
.cv-col { padding: 16px 20px 18px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cv-col + .cv-col { border-left: 1px solid var(--line); }
.cv-sec h4 { margin: 0 0 7px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.cv-row { display: flex; gap: 9px; align-items: center; min-width: 0; font-size: 13.5px; line-height: 1.4; }
.cv-row + .cv-row { margin-top: 7px; }
.cv-row > svg { color: var(--muted); flex: none; }
.cv-row > span { min-width: 0; overflow-wrap: anywhere; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cv-row a { color: var(--accent); text-decoration: none; }
.cv-row a:hover { text-decoration: underline; }
.cv-when { font-weight: 560; }
.cv-when::first-letter { text-transform: uppercase; }
.cv-dur { font-style: normal; color: var(--muted); font-size: 11.5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; white-space: nowrap; }
.cv-person { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.cv-person b { font-weight: 560; flex: 1; min-width: 0; }
.cv-person .cx-av svg { width: 12px; height: 12px; }
.cv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 3px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; background: var(--surface); }
.cv-desc { margin: 0; white-space: pre-line; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); overflow-wrap: anywhere; }
.cv-muted { color: var(--faint); font-size: 12.5px; margin: 0; }
.cal-view .modal-foot { align-items: center; }
.cal-view .cv-note { font-size: 12px; color: var(--faint); min-width: 0; }
@media (max-width: 640px) {
  dialog.modal.cal-view { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .cv-grid { grid-template-columns: 1fr; }
  .cv-col + .cv-col { border-left: 0; border-top: 1px solid var(--line); }
  .cal-view .modal-foot { flex-wrap: wrap; }
  .cal-view .cv-note { flex-basis: 100%; order: -1; }
}
@media (max-width: 640px) { .cal-view .cv-note:empty { display: none; } }
dialog.cal-view .btn[data-view-delete] { color: var(--red); }   /* vinner över .btn:not(.primary):not(.danger) */

/* 4.119.0: bilder på projektsidor går att klicka upp i ljuslådan (mörk, suddig bakgrund – klick utanför stänger) */
.bk-kimg > img, .bk-media > img { cursor: zoom-in; }
.lb .lb-body img { margin: auto; }
@media (max-width: 640px) { .lb { padding: 12px; } .lb-inner { max-width: 100%; } .lb-body img { max-height: 78vh; } }

/* 4.120.0: Personer och åtkomst – vad personen ser (hela projektet eller bara sidan), externa och administratörer */
.pj-scope { border: 0; margin: 0; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; }
.pj-scope .check { font-size: 13px; }
.pj-tag { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 5px; font-size: 11px; font-weight: 600; line-height: 17px; vertical-align: 1px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); }
.pj-admins { margin: 8px 0 0; font-size: 12px; }
.pg-more { min-width: 230px; }
@media (max-width: 640px) { .pj-m { flex-wrap: wrap; } .pj-m select { flex-basis: 100%; } }

/* 4.121.0: System → Planer – planen som en tabell (ingår, pris per extra, max extra) och funktioner med av/på */
.pm-body { gap: 22px; }
.pm-sec { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pm-h { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.pm-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg, 10px); }
.pm-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.pm-table th, .pm-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.pm-table thead th { font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--surface-2); white-space: nowrap; }
.pm-table tbody tr:last-child > * { border-bottom: 0; }
.pm-table tbody th { font-weight: 560; color: var(--ink); white-space: nowrap; }
.pm-table .input.num { width: 112px; text-align: right; font-variant-numeric: tabular-nums; }
.pm-money { display: flex; align-items: center; gap: 8px; }
.pm-money small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.pm-na { color: var(--faint, var(--muted)); }
.pm-ai { border: 0; padding: 0; margin: 0; }
.pm-feat tbody th { white-space: normal; }
.pm-feat tbody th small { display: block; color: var(--muted); font-weight: 400; font-size: 12px; margin-top: 2px; }
.pm-feat { min-width: 0; }   /* två kolumner – ryms på telefonen, så att reglaget alltid syns */
.pm-feat td { width: 150px; }
@media (max-width: 640px) { .pm-feat td { width: auto; white-space: nowrap; } .pm-switch span { display: none; } }
.pm-switch { align-items: center; gap: 10px; }
.pm-switch span { font-size: 12.5px; color: var(--muted); }
.pm-switch span::after { content: attr(data-off); }
.pm-switch input:checked + span { color: var(--ink); }
.pm-switch input:checked + span::after { content: attr(data-on); }
.pm-help { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.pm-help code { font-size: 11.5px; margin-right: 6px; }
.pm-move { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg, 10px); }
.pm-move b { font-weight: 600; font-size: 13.5px; }
.pm-move small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; max-width: 560px; }
.pm-flags { gap: 18px; flex-wrap: wrap; }

/* 4.121.0: Abonnemang → Tillägg (köp till per styck) */
.ab-addon { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ab-addons .card-body > .ab-addon:last-of-type { border-bottom: 0; }
.ab-addon-what { min-width: 0; }
.ab-addon-what b { display: block; font-size: 13.5px; font-weight: 600; }
.ab-addon-what small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.ab-step { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.ab-step .btn.icon { width: 30px; height: 30px; padding: 0; justify-content: center; font-size: 15px; }
.ab-step output { min-width: 22px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Planerna: funktioner som inte ingår */
.bpl-card li.no { color: var(--muted); }
.bpl-card li.no svg { opacity: .45; }
.bpl-extra { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }

/* 4.123.0: eget nummer i den egna staden (svenska företag) – litet val under numret i Inställningar, och bytet
   när numret är godkänt. Samma tunna linjer och accent som resten av receptionisten. */
.vx-own-num { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; margin: 2px 0 8px; border: 1px dashed var(--line-strong); border-radius: 7px; color: var(--ink-2); text-decoration: none; }
.vx-own-num > svg:first-child { flex: none; color: var(--accent); }
.vx-own-num > svg:last-child { flex: none; margin-left: auto; color: var(--faint); }
.vx-own-num span { display: flex; flex-direction: column; min-width: 0; }
.vx-own-num b { font-size: 13px; font-weight: 600; color: var(--ink); }
.vx-own-num small { font-size: 12px; color: var(--muted); }
.vx-own-num:hover { border-style: solid; border-color: var(--accent-line); background: var(--accent-soft); }
.vx-own-num.hi { border-style: solid; border-color: var(--accent-line); }
.pr-swap { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 12px; }
.pr-swap-sent { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 12px 0 0; }
.pr-cancel { display: inline-block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
/* 4.123.0: "Kolla din e-post" efter registreringen – kontot öppnas med länken i mejlet */
.auth-steps span.done { color: var(--ink-2); }
.auth-steps span.done i { background: var(--green-soft); color: var(--green); }
.verify-ico { width: 52px; height: 52px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin: 4px 0 14px; }
.verify-hint { font-size: 13px; }
.verify-resend { margin: 6px 0 14px; }
/* 4.125.0: logotypen till signaturen – en ruta att trycka på (öppnar filväljaren eller kamerarullen på mobilen) */
.sig-logo-pick { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: 7px; cursor: pointer; color: var(--ink-2); }
.sig-logo-pick:hover, .sig-logo.has .sig-logo-pick { border-style: solid; border-color: var(--accent-line); }
.sig-logo-pick input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sig-logo-pick:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.sig-logo-thumb { flex: none; width: 44px; height: 44px; border-radius: 7px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); overflow: hidden; }
.sig-logo-thumb img { max-width: 40px; max-height: 40px; object-fit: contain; }
.sig-logo-t { display: flex; flex-direction: column; min-width: 0; }
.sig-logo-t b { font-size: 13px; font-weight: 600; color: var(--ink); }
.sig-logo-t small { font-size: 12px; color: var(--muted); }
.sig-logo.busy .sig-logo-pick { opacity: .6; pointer-events: none; }
.sig-logo-msg.err { color: var(--red, #E5484D); }
/* 4.126.0: röstmodellen (två val med förklaring) och vidarekopplingens tider och direkta överkoppling */
.ra-models { display: grid; gap: 8px; }
.ra-model { position: relative; display: flex; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; }
.ra-model input { position: absolute; opacity: 0; pointer-events: none; }
.ra-model > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ra-model b { font-size: 13px; font-weight: 600; color: var(--ink); }
.ra-model b .badge { margin-left: 6px; font-style: normal; }
.ra-model small { font-size: 12px; color: var(--muted); }
.ra-model:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ra-model:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.vx-xfer-note + .vx-xfer-note { margin-top: 6px; }
.vx-xfer-note { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }
.vx-xfer-note svg { flex: none; margin-top: 2px; }
/* 4.126.0: samtalets tid – med AI-receptionisten och vidarekopplingen */
.vx-ctime { display: grid; gap: 10px; padding: 12px 14px; margin-bottom: 12px; }
.vx-ctime-row { display: flex; gap: 10px; align-items: flex-start; }
.vx-ctime-row b { display: block; font-size: 13px; font-weight: 600; }
.vx-ctime-row small { display: block; font-size: 12px; color: var(--muted); }
.vx-ctime-ico { flex: none; width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.vx-ctime-ico.xfer { background: var(--surface-2); color: var(--ink-2); }

/* 4.128.0: närvaro i ärendet – vem som läser och vem som skriver ett svar just nu */
.thread-presence { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.thread-presence[hidden] { display: none; }
.thread-presence .tp { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px 0 2px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); font-size: 11.5px; white-space: nowrap; max-width: 220px; }
.thread-presence .tp > span { overflow: hidden; text-overflow: ellipsis; }
.thread-presence .tp img, .thread-presence .tp i { width: 16px; height: 16px; border-radius: 50%; flex: none; object-fit: cover; }
.thread-presence .tp i { display: inline-grid; place-items: center; color: #fff; font-style: normal; font-size: 8px; font-weight: 600; }
.thread-presence .tp.typing { background: var(--saffron-soft); border-color: color-mix(in srgb, var(--saffron) 35%, var(--line)); color: var(--ink); }
.thread-presence .tp.typing::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--saffron); animation: tp-pulse 1.2s ease-in-out infinite; }
@keyframes tp-pulse { 50% { opacity: .25; } }
.composer .cmp-warn { margin: 0 12px 8px; padding: 6px 10px; border-radius: 7px; background: var(--saffron-soft); color: var(--ink); font-size: 12.5px; }

/* 4.128.0: vidarekopplingens meningar (före kopplingen och när ingen kan svara) */
.vx-say { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.vx-say h3 { margin: 0 0 4px; font-size: 13.5px; font-weight: 600; }
.vx-say .field { margin: 0; }
.vx-say .help { margin: 0 0 8px; color: var(--muted); font-size: 12px; }
.vx-say textarea.input { min-height: 64px; height: auto; resize: vertical; }
.vx-say code { font-family: var(--mono); font-size: 11.5px; padding: 1px 4px; border-radius: 4px; background: var(--surface-2); }

/* 4.128.0: månadens minuter – AI (räknas i planen), extra och kopplade (dras inte) */
.vx-mins .vx-card-head { margin-bottom: 14px; }
.vx-mins-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vx-min { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.vx-min-ico { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--surface-2); color: var(--muted); }
.vx-min.ai .vx-min-ico { background: var(--accent-soft); color: var(--accent); }
.vx-min.extra.on .vx-min-ico { background: var(--red-soft); color: var(--red); }
.vx-min.xfer .vx-min-ico { background: var(--green-soft); color: var(--green); }
.vx-min-l { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.vx-min > b { font-size: 24px; line-height: 1.1; font-weight: 650; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.vx-min > b small { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.vx-min > small { font-size: 12px; line-height: 1.45; color: var(--muted); }
.vx-min .vx-free { font-weight: 600; color: var(--green); }
.vx-min.lvl-near .vx-bar i { background: var(--saffron); }
.vx-min.lvl-over .vx-bar i { background: var(--red); }
@media (max-width: 760px) { .vx-mins-grid { grid-template-columns: 1fr; gap: 10px; } }

/* ══ 4.129.0 / 4.130.0: ny mobilvy (html.m2) ══════════════════════════════════════
   4.130.0 – design 6 (Svep): en platt menyrad i full bredd längst ned (Inkorg · Chatt · Telefon · Social ·
   Inställningar), överst "Välj" · rubriken · "+", ett grått sökfält, rader utan bild med en prick för oläst och
   en svag bakgrund i varumärkets färg för nya ärenden, och svep på raderna (skriptet i inbox.php). Kalender,
   Projekt och kontot finns under Inställningar. Klassisk vy (users.mobile_ui = 'classic') saknar klassen.
   Sist i filen och med !important där äldre mobilregler annars vinner. */
.conv-av, .hub-me, .m2-pick, .m2-sub, .m2-chev, .m2-ch { display: none; }
@media (max-width: 760px) {
  html.m2 { --m2-h: 58px; --m2-b: var(--sab, 0px); }
  html.m2 .shell { padding-bottom: calc(var(--m2-h) + var(--m2-b)) !important; }

  /* Menyraden: platt, i full bredd, med en tunn linje överst */
  html.m2 .rail {
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    height: calc(var(--m2-h) + var(--m2-b)) !important; padding: 0 4px var(--m2-b) !important; gap: 0 !important; align-items: center !important;
    border-radius: 0 !important; border: 0 !important; border-top: 1px solid var(--line) !important;
    background: var(--surface) !important; box-shadow: none !important;
  }
  html.m2 .rail > a { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; padding: 0 2px !important; height: var(--m2-h) !important; border-radius: 0 !important; gap: 3px !important;
    color: var(--muted) !important; background: transparent !important; box-shadow: none !important; }
  html.m2 .rail > a.on, html.m2 .rail > a.on .i { color: var(--accent) !important; background: transparent !important; }
  html.m2 .rail > a::before, html.m2 .rail > a.on::before { display: none !important; }
  html.m2 .rail .i { width: 22px !important; height: 22px !important; }
  html.m2 .rail .lbl { font-size: 10.5px !important; font-weight: 560; }
  html.m2 .rail .lbl[data-short] { font-size: 0 !important; overflow: visible; }
  html.m2 .rail .lbl[data-short]::after { font-size: 10.5px; }
  html.m2 .rail .lbl[data-m2]::after { content: attr(data-m2); }
  html.m2 .rail > a.on .lbl { font-weight: 650; }
  html.m2 .rail .nav-num, html.m2 .rail-badge { top: 5px !important; right: calc(50% - 20px) !important; left: auto !important; transform: none !important; }
  html.m2 .rail > [data-m="cal"], html.m2 .rail > [data-m="proj"] { display: none !important; }
  /* Sök finns i listans sökfält – ingen egen knapp i menyraden */
  html.m2 .rail > button[data-palette-open] { display: none !important; }
  /* Kontot: knappen göms (den finns överst i Inställningar), menyn öppnas därifrån som ett ark */
  html.m2 .rail > .pop:last-of-type { position: fixed !important; width: 0 !important; height: 0 !important; flex: 0 0 0 !important; min-width: 0 !important; overflow: visible; }
  html.m2 .rail > .pop:last-of-type > button { display: none !important; }
  html.m2 .rail .pop-menu { bottom: calc(var(--m2-h) + var(--m2-b) + 8px) !important; }

  /* Inkorgens huvud: Välj · rubrik med "Uppdaterad nyss" · + */
  html.m2 .list-head { display: grid !important; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; padding: 8px 10px 6px !important; min-height: 56px; gap: 0 !important; }
  html.m2 .list-head > * { display: none !important; }
  html.m2 .list-head > .m2-pick { display: block !important; justify-self: start; border: 0; background: none; padding: 8px 6px; font: inherit; font-size: 16px; color: var(--accent); cursor: pointer; }
  html.m2 .list-head > h2 { display: flex !important; flex-direction: column; align-items: center; margin: 0; font-size: 17px !important; font-weight: 650 !important; letter-spacing: -.01em; line-height: 1.2; cursor: pointer; text-align: center; min-width: 0; }
  html.m2 .list-head > h2 .m2-sub { display: block; font-size: 12px; font-weight: 400; color: var(--muted); letter-spacing: 0; margin-top: 1px; }
  html.m2 .list-head > .lh-new { display: inline-flex !important; justify-self: end; width: 40px; height: 40px; border: 0 !important; border-radius: 50%; background: transparent !important; color: var(--accent) !important; box-shadow: none !important; }
  html.m2 .list-head > .lh-new .i { width: 22px; height: 22px; }
  html.m2 .list-search { margin: 2px 14px 10px !important; padding: 0 !important; border: 0 !important; }
  html.m2 .list-search .input { height: 38px; border-radius: 10px; font-size: 15.5px; border: 0 !important; background: var(--surface-2) !important; box-shadow: none !important; padding-left: 36px; }
  html.m2 .list-search .ls-kbd { display: none !important; }

  /* Raderna: prick för oläst, namn och tid överst, sedan ämne och kanal · förhandsvisning */
  html.m2 a.conv { display: grid !important; grid-template-columns: 14px minmax(0, 1fr); column-gap: 10px; row-gap: 0 !important; align-items: start; min-height: 0 !important;
    padding: 12px 14px 12px 12px !important; border: 0 !important; border-radius: 0 !important; position: relative; background: var(--surface) !important; box-shadow: none !important; }
  html.m2 .conv-av { display: block; grid-column: 1; grid-row: 1; align-self: start; width: 10px; height: 10px; margin: 6px 0 0 2px; border-radius: 50%; background: transparent; font-size: 0; color: transparent; }
  /* 4.130.0: nya (olästa) ärenden får en svag bakgrund i varumärkets färg och en prick – syns direkt bland de öppna */
  html.m2 a.conv.unread { background: var(--unread-bg) !important; }
  html.m2 .conv.unread .conv-av { background: var(--accent); }
  html.m2 .conv .meta, html.m2 .conv-check { display: none !important; }
  html.m2 a.conv > :not(.conv-av) { grid-column: 2; min-width: 0; }
  html.m2 a.conv::before { display: none !important; }
  html.m2 a.conv::after { content: "" !important; display: block !important; position: absolute !important; left: 36px !important; right: 0 !important; top: auto !important; bottom: 0 !important;
    width: auto !important; height: 1px !important; border-radius: 0 !important; background: var(--line) !important; }
  html.m2 a.conv.on { background: var(--accent-soft) !important; }
  html.m2 .conv .top { gap: 6px; align-items: center; }
  html.m2 .conv .top .chan-chip { display: none !important; }
  html.m2 .conv .who { font-size: 16px !important; font-weight: 600; }
  html.m2 .conv.unread .who { font-weight: 700; color: var(--ink); }
  html.m2 .conv .top time { font-size: 13.5px !important; margin-left: auto; color: var(--muted); font-weight: 400; }
  html.m2 .conv.unread .top time { color: var(--muted) !important; font-weight: 400 !important; }
  html.m2 .m2-chev { display: inline-flex; color: var(--muted); margin-right: -2px; }
  html.m2 .conv .subj { font-size: 15px !important; margin-top: 2px; color: var(--ink); }
  html.m2 .conv.unread .subj { font-weight: 500; }
  html.m2 .conv .prev { font-size: 14px !important; margin-top: 3px; color: var(--muted); }
  html.m2 .m2-ch { display: inline; white-space: nowrap; }
  html.m2 .m2-ch .i, html.m2 .m2-ch svg { display: inline-block !important; width: 12px !important; height: 12px !important; vertical-align: -1px; margin: 0 3px 0 0 !important; color: var(--accent); }

  /* Välj: tryck på en rad markerar den i stället för att öppna den; cirkeln till vänster visar valet */
  html.m2 section.list.m2-picking a.conv { grid-template-columns: 24px minmax(0, 1fr); }
  html.m2 section.list.m2-picking .conv-av { width: 20px; height: 20px; margin: 1px 0 0; border: 1.5px solid var(--line-2, var(--muted)); background: transparent; box-sizing: border-box; }
  html.m2 section.list.m2-picking .conv.selected .conv-av { border-color: var(--accent); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
  html.m2 section.list.m2-picking a.conv::after { left: 46px !important; }
  html.m2 a.conv.selected { background: var(--accent-soft) !important; }

  /* Svep: knapparna under raden */
  html.m2 .sw { position: relative; overflow: hidden; background: var(--surface-2); }
  html.m2 .sw > a.conv { will-change: transform; z-index: 1; }
  html.m2 .sw-l, html.m2 .sw-r { position: absolute; top: 0; bottom: 0; display: flex; }
  html.m2 .sw-l { left: 0; } html.m2 .sw-r { right: 0; }
  html.m2 .sw.to-l .sw-l, html.m2 .sw.to-r .sw-r { visibility: hidden; }
  html.m2 .sw-btn { width: 72px; border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    color: #FFFFFF; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
  html.m2 .sw-btn .i { width: 20px; height: 20px; }
  html.m2 .sw-btn.amb { background: #B45309; } html.m2 .sw-btn.blu { background: #1D4ED8; } html.m2 .sw-btn.grn { background: #15803D; }
  html.m2 .sw-btn.acc { background: var(--accent); width: 80px; }
  html.m2 .sw.full.to-l .sw-r .sw-btn:last-child { width: 100vw; transition: width .15s; }
  html.m2 .sw.full.to-r .sw-l .sw-btn { width: 100vw; transition: width .15s; }
  html.m2 .sw.sw-gone { height: 0 !important; transition: height .28s ease .08s; }

  /* Inställningar: kontot överst */
  html.m2 .hub-me { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px;
    background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
  html.m2 .hub-me-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  html.m2 .hub-me-t b { font-size: 16px; font-weight: 650; }
  html.m2 .hub-me-t small { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.m2 .hub-me > .i { color: var(--muted); flex: none; }
}
@media (max-width: 760px) { .rail .pop-menu .mui-pick.show-m { display: block !important; } .mui-pick .seg { margin: 0 4px 6px; } }

/* ── 4.130.0: kundprofilen (Kalender → Kunder → kund) ───────────────────────────────────────── */
.cx-plink { color: inherit; text-decoration: none; min-width: 0; display: block; }
.cx-plink:hover b { color: var(--accent); }
.cxp-head { justify-content: flex-start; }
.cxp-hero { display: flex; align-items: center; gap: 14px; padding: 16px 2px 18px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.cxp-av { width: 48px; height: 48px; border-radius: 24px; font-size: 16px; }
.cxp-id { min-width: 0; flex: 1; }
.cxp-id h1 { margin: 0; font-size: 18px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cxp-id p { margin: 3px 0 0; font-size: 13px; }
.cxp-id p a { color: inherit; text-decoration: none; font-variant-numeric: tabular-nums; }
.cxp-stats { display: flex; gap: 6px; flex: none; }
.cxp-stats span { display: flex; flex-direction: column; align-items: center; min-width: 74px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.cxp-stats b { font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
.cxp-stats small { font-size: 11.5px; color: var(--muted); }
.cxp-grid { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 16px; align-items: start; }
.cxp-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.cxp-card { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 14px 16px; min-width: 0; }
.cxp-card h2 { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.cxp-card h2 small { margin-left: auto; color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.cxp-form .field { margin: 0 0 10px; }
.cxp-form .help { margin: -2px 0 12px; }
.cxp-pnr-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cxp-pnr-row code { font-size: 13px; padding: 4px 8px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.cxp-rm { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); margin-left: auto; }
.cxp-pnr .help { margin: 4px 0 0; }
.cxp-actions { display: flex; align-items: center; gap: 8px; justify-content: space-between; margin-top: 4px; }
.cxp-foot { margin: 10px 0 0; }
.cxp-none { margin: 2px 0 4px; font-size: 13px; }
.cxp-item { display: flex; align-items: center; gap: 10px; padding: 8px 6px; margin: 0 -6px; border-radius: 7px; color: inherit; text-decoration: none; }
.cxp-item:hover { background: var(--hover); }
.cxp-item + .cxp-item { border-top: 1px solid var(--line); border-radius: 0; }
.cxp-item + .cxp-item:hover { border-radius: 7px; }
.cxp-dot { width: 8px; height: 8px; border-radius: 4px; background: var(--c, var(--accent)); flex: none; }
.cxp-ic { color: var(--muted); display: inline-flex; flex: none; }
.cxp-it { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.cxp-it b { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cxp-it small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cxp-who { flex: none; width: 22px; height: 22px; border-radius: 11px; display: grid; place-items: center; font-size: 10px; font-weight: 650; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
@media (max-width: 1180px) { .cxp-side { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  .cxp-grid { grid-template-columns: minmax(0, 1fr); }
  .cxp-hero { flex-wrap: wrap; }
  .cxp-stats { width: 100%; }
  .cxp-stats span { flex: 1; min-width: 0; }
}

/* 4.130.1: den tidigare mobilvyn är tillbaka för alla – utan Projekt i menyraden (Projekt finns under Mer) */
@media (max-width: 760px) { html:not(.m2) .rail > [data-m="proj"] { display: none !important; } }

/* 4.131.0: ett verktyg som inte lyckades (t.ex. ingen bokning att flytta) syns som det i samtalsutskriften */
.vx-tl-tool.fail { color: var(--red); }
/* Ikonen och texten på samma rad (ikonen hamnade förut på en egen rad ovanför) */
.vx-tl-tool > span { display: inline-flex; align-items: center; gap: 5px; }
.vx-tl-tool > span svg { flex: none; }


/* 4.132.1: riktiga logotyper (BrandIcons – fil eller mediabiblioteket). Utseendet är som förut: samma rutor, brickor
   och kort. Har märket en logotyp fyller den sin ruta på vit botten; utan logotyp visas förkortningen som tidigare.
   E-post, webbchatt och sms har inget märke och behåller sina vanliga ikoner. */
.bi-img { object-fit: contain; background: #fff; border-radius: 5px; flex: none; }
img.sx-badge { padding: 0; background: #fff; border: 1px solid var(--line); object-fit: contain; box-sizing: border-box; }
.chl-ic:has(> .bi-img), .meta-ic:has(> .bi-img), .pv-av:has(> .bi-img), .soa-logo:has(> .bi-img) { background: #fff; overflow: hidden; padding: 0; }
.meta-ic:has(> .bi-img) { border: 1px solid var(--line); box-sizing: border-box; }
.chl-ic > .bi-img, .meta-ic > .bi-img, .pv-av > .bi-img, .soa-logo > .bi-img { width: 100% !important; height: 100% !important; max-width: none; border-radius: 0; }
.ig-logo img.bi-img { width: 100%; height: 100%; border-radius: 0; }
.chadd-ic .bi-img, .meta-wait-ic .bi-img { border-radius: 6px; border: 1px solid var(--line); box-sizing: border-box; }
.chadd-ic > .bi-img { width: 28px !important; height: 28px !important; }
.meta-wait-ic > .bi-img { width: 36px !important; height: 36px !important; }

/* 4.133.0: fel inne i appen (403/404) – i appens ram, lugnt och med en väg vidare */
.err-app { max-width: 460px; margin: 12vh auto 0; padding: 32px 30px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.err-app-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 4px; }
.err-app h1 { margin: 0; font-size: 17px; font-weight: 650; }
.err-app p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.err-app-act { display: flex; gap: 8px; margin: 10px 0 4px; flex-wrap: wrap; justify-content: center; }
.err-app small { font-size: 11.5px; }

/* 4.133.0: bilagor på ärendekortet – lugn, grå, som stjärnan och utkastet */
.conv-att { display: inline-flex; align-items: center; gap: 3px; flex: none; margin-left: auto; color: var(--muted); font-size: 11.5px; font-weight: 560; }
.conv-att + time { margin-left: 0; }
.conv-att .i { flex: none; }
.conv.unread .conv-att { color: var(--ink-2); }

/* 4.133.0: teamchatten – kollegornas meddelanden i bubblor också (vänster, ljus yta), som de egna (höger, accent).
   Bubblor i följd från samma person sitter ihop med mindre hörn, som i en vanlig chatt. */
.tc-thread .tc-msg:hover { background: transparent; }
.tc-thread .tc-msg .tc-body { display: flex; flex-direction: column; align-items: flex-start; }
.tc-thread .tc-msg.mine .tc-body { align-items: flex-end; }
.tc-thread .tc-msg .tc-text { display: inline-block; max-width: min(640px, 100%); padding: 8px 12px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px 12px 12px 3px; box-shadow: 0 1px 1px rgba(20, 24, 40, .03); }
.tc-thread .tc-msg.mine .tc-text { background: var(--accent-soft); border-color: var(--accent-line); border-radius: 12px 12px 3px 12px; }
.tc-thread .tc-msg.compact { margin-top: -2px; padding-top: 1px; padding-bottom: 1px; }
.tc-thread .tc-msg.compact:not(.mine) .tc-text { border-top-left-radius: 5px; }
.tc-thread .tc-msg.compact.mine .tc-text { border-top-right-radius: 5px; }
.tc-thread .tc-msg.mentioned { background: transparent; box-shadow: none; }
.tc-thread .tc-msg.mentioned .tc-text { border-color: var(--saffron); box-shadow: inset 3px 0 0 var(--saffron); }
.tc-thread .tc-msg .tc-head { margin-bottom: 3px; }
.tc-thread .tc-msg .tc-files { margin-top: 5px; }

/* 4.133.0: förhandsvisningen av bilagor – mörk suddig bakgrund, namn och storlek, bläddring, mjuk in- och utgång */
html.lb-open, html.lb-open body { overflow: hidden; }
.lb { background: rgba(10, 10, 14, .72); -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); }
.lb.out { animation: lbout .14s ease forwards; }
@keyframes lbout { to { opacity: 0; } }
.lb-inner { animation: lbpop .18s cubic-bezier(.2, .8, .2, 1); }
@keyframes lbpop { from { transform: scale(.97); opacity: .6; } }
.lb-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.lb-name b { min-width: 0; }
.lb-name small, .lb-count { flex: none; color: rgba(255, 255, 255, .62); font-size: 12px; }
.lb-count { padding: 1px 8px; border-radius: 99px; background: rgba(255, 255, 255, .1); }
.lb-body { box-shadow: 0 24px 70px rgba(0, 0, 0, .45); }
.lb-body.is-pdf { background: #525659; }
.lb-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .14); color: #fff; font-size: 28px; line-height: 1; display: grid; place-items: center; padding-bottom: 3px; transition: background .12s; }
.lb-nav:hover { background: rgba(255, 255, 255, .26); }
.lb-nav.prev { left: 18px; } .lb-nav.next { right: 18px; }
@media (max-width: 640px) { .lb-nav { top: auto; bottom: 18px; transform: none; } .lb-nav.prev { left: calc(50% - 54px); } .lb-nav.next { right: calc(50% - 54px); } }
@media (prefers-reduced-motion: reduce) { .lb, .lb-inner, .lb.out { animation: none; } }

/* ── 4.135.0: publikt hjälpcenter – länkraden, inställningarna och redigerarens bilder, tips och steg ── */
.hc-public { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; background: var(--surface); }
.hc-public.on { background: var(--surface-2); }
.hc-public-ic { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); flex: none; }
.hc-public.on .hc-public-ic { background: var(--accent-soft); color: var(--accent); }
.hc-public-txt { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 1px; }
.hc-public-txt b { font-weight: 600; font-size: 13.5px; }
.hc-public-txt .hc-status.pill { margin-left: 6px; }
.hc-public-txt small { font-size: 12.5px; }
.hc-public-link { color: var(--accent); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-pub-set { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.input-prefix { display: flex; align-items: stretch; border: 1px solid var(--line-strong, var(--line)); border-radius: 7px; overflow: hidden; background: var(--surface); }
.input-prefix > span { display: flex; align-items: center; padding: 0 2px 0 10px; color: var(--muted); font-size: 12.5px; white-space: nowrap; background: var(--surface-2); border-right: 1px solid var(--line); padding-right: 8px; max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
.input-prefix > .input { border: 0 !important; border-radius: 0; box-shadow: none !important; min-width: 0; flex: 1; }
.input-prefix:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.hc-rich { max-height: none !important; overflow: visible; }
.hc-ed-tools button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 7px; }
.hc-ed-tools button span { font-size: 12.5px; font-weight: 550; }
.hc-up-state { font-size: 12px; margin-left: 6px; }
.hc-rich img { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); display: block; margin: 12px 0; }
.hc-rich figure { margin: 14px 0; }
.hc-rich figure img { margin: 0; }
.hc-rich figcaption { color: var(--muted); font-size: 12.5px; text-align: center; margin-top: 6px; }
.hc-rich .hc-callout { border-radius: 8px; padding: 10px 14px; margin: 12px 0; border-left: 3px solid var(--accent); background: var(--accent-soft); }
.hc-rich .hc-callout.note { border-left-color: var(--saffron); background: var(--saffron-soft); }
.hc-rich .hc-callout.warn { border-left-color: var(--red, #E5484D); background: color-mix(in srgb, var(--red, #E5484D) 10%, var(--surface)); }
.hc-rich .hc-callout > :first-child { margin-top: 0; } .hc-rich .hc-callout > :last-child { margin-bottom: 0; }
.hc-rich ol.hc-steps { list-style: none; padding-left: 0; counter-reset: st; }
.hc-rich ol.hc-steps > li { counter-increment: st; position: relative; padding-left: 36px; margin: 0 0 10px; min-height: 24px; }
.hc-rich ol.hc-steps > li::before { content: counter(st); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 12px; display: grid; place-items: center; }
.hc-rich table { border-collapse: collapse; margin: 12px 0; font-size: 13.5px; }
.hc-rich th, .hc-rich td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top; }
.hc-rich th { background: var(--surface-2); }
@media (max-width: 640px) { .hc-ed-tools button span { display: none; } .hc-public .btn { flex: none; } }
/* 4.135.0: hjälpcentret överst i ?-rutan */
.sup-help { display: flex; flex-direction: column; gap: 8px; }
.sup-help-art { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--ink); text-decoration: none; }
.sup-help-art:hover { border-color: var(--accent-line, var(--accent)); }
.sup-help-art > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sup-help-art small { font-size: 11.5px; color: var(--muted); }
.sup-help-art b { font-weight: 600; font-size: 13.5px; }
.sup-help-art > .i { color: var(--muted); }
.sup-help-ic { width: 32px; height: 32px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.sup-help-q { display: flex; align-items: center; gap: 8px; position: relative; }
.sup-help-q > .i { position: absolute; left: 11px; color: var(--faint); pointer-events: none; }
.sup-help-q .input { flex: 1; padding-left: 32px; }
.sup-help-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; margin: 4px 0 -2px; }
.sup-help-or::before, .sup-help-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.hc-pub-open, .hc-meta .hc-vote { display: inline-flex; align-items: center; gap: 5px; }
.hc-meta .hc-vote + .hc-vote { margin-left: 12px; }
.hc-pub-open { color: var(--accent); }

/* 4.136.0: Inställningar → Tillägg. Läget syns i kortets kant och prick: grönt aktivt, lila ingår i planen,
   blått kan läggas till, gult avslutas. Inga skuggor utöver den gröna ringen runt aktiva kort. */
.tl { --tl-blue: var(--blue); --tl-blue-soft: color-mix(in srgb, var(--blue) 10%, var(--surface)); }
.tl .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: var(--faint); }
.tl .dot.active { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent); }
.tl .dot.included { background: var(--accent); }
.tl .dot.available { background: var(--tl-blue); }
.tl .dot.canceling { background: var(--saffron); }
.tl .dot.done { background: var(--green); }
.tl-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin: 0 0 18px; }
.tl-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.tl-count { color: var(--ink-2); font-weight: 600; }
.tl-cat { margin: 0 0 22px; scroll-margin-top: 70px; }
.tl-cat > h2 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; margin: 0 0 10px; color: var(--ink); }
.tl-cat > h2 .lib-ico { color: var(--muted); }
.tl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.tl-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; min-width: 0; scroll-margin-top: 80px; transition: border-color .15s, box-shadow .15s; }
.tl-card h3 { margin: 2px 0 0; font-size: 14px; font-weight: 600; }
.tl-card > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; flex: 1; }
.tl-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tl-ic { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); flex: none; }
.tl-ic.sm { width: 26px; height: 26px; border-radius: 7px; }
.tl-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.tl-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); flex-wrap: wrap; min-height: 40px; }
.tl-price { font-size: 13px; color: var(--muted); }
.tl-price b { color: var(--ink); font-size: 14px; font-weight: 600; }
a.tl-price { color: var(--accent); }
.tl-who { font-size: 12px; color: var(--faint); }
/* Aktivt: grön kant och en mjuk grön ring – "lyser" utan att bli en skugga */
.tl-card.is-active { border-color: color-mix(in srgb, var(--green) 55%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 12%, transparent); }
.tl-card.is-active .tl-ic { background: var(--green-soft); color: var(--green); border-color: transparent; }
.tl-card.is-active .tl-state { color: var(--green); }
.tl-card.is-done .tl-state { color: var(--green); }
.tl-card.is-included { border-color: var(--accent-line); }
.tl-card.is-included .tl-ic { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.tl-card.is-included .tl-state, .tl-price.inc { color: var(--accent); }
.tl-price.inc { font-weight: 600; font-size: 12.5px; }
.tl-card.is-available .tl-ic { background: var(--tl-blue-soft); color: var(--tl-blue); border-color: transparent; }
.tl-card.is-available .tl-state { color: var(--tl-blue); }
.tl-card.is-canceling { border-color: color-mix(in srgb, var(--saffron) 45%, var(--line)); }
.tl-card.is-canceling .tl-ic { background: var(--saffron-soft); color: var(--saffron); border-color: transparent; }
.tl-card.is-canceling .tl-state { color: var(--saffron); }
.tl-card.is-unavailable { background: var(--surface-2); }
.tl-card.is-unavailable h3, .tl-card.is-unavailable .tl-ic { opacity: .7; }
.tl-card:target:not(.is-active):not(.is-canceling) { border-color: var(--line-strong); }
.tl-set { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 8px; }
.tl-set > summary { cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); list-style: none; }
.tl-set > summary::-webkit-details-marker { display: none; }
.tl-set[open] > summary { margin-bottom: 10px; }
.tl-set .field > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.tl-set textarea { resize: vertical; min-height: 64px; }
.tl-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.tl-switch input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
.tl-how { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 6px; }
.tl-how h2 { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; margin: 0 0 6px; }
.tl-how ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.6; }
#kapacitet .card { margin: 0; }
/* Bekräftelserutan */
.tl-sum { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.tl-sum > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; font-size: 13.5px; }
.tl-sum > div + div { border-top: 1px solid var(--line); }
.tl-sum > div span { color: var(--muted); }
.tl-sum > div.now { background: var(--surface-2); }
.tl-sum > div.now b { font-size: 15px; }
/* Introduktionen: en liten bild av appen med platsen markerad */
.tl-guide .tl-steps { padding: 18px 20px 6px; }
.tl-stepc h4 { margin: 14px 0 4px; font-size: 15px; font-weight: 600; }
.tl-stepc p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; min-height: 40px; }
.tl-dots { display: inline-flex; gap: 6px; align-items: center; }
.tl-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.tl-dots i.on { background: var(--accent); width: 16px; border-radius: 3px; }
.tl-shot { display: flex; height: 150px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg); }
.tl-shot-nav { width: 34px; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0; }
.tl-shot-nav i { width: 14px; height: 14px; border-radius: 4px; background: var(--line); }
.tl-shot-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.tl-shot-top { height: 18px; background: var(--surface); border-bottom: 1px solid var(--line); }
.tl-shot i, .tl-shot b { display: block; font-style: normal; }
.tl-shot .hl { background: var(--accent) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); animation: tl-pulse 1.8s ease-in-out infinite; }
@keyframes tl-pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 10%, transparent); } }
@media (prefers-reduced-motion: reduce) { .tl-shot .hl { animation: none; } }
.tl-shot-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px; }
.tl-shot-tiles i { height: 42px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); }
.tl-shot-msg { flex: 1; display: flex; flex-direction: column; gap: 7px; padding: 12px 14px; }
.tl-shot-msg i { height: 16px; width: 60%; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); }
.tl-shot-msg i.out { align-self: flex-end; width: 50%; background: var(--accent-soft); border-color: var(--accent-line); }
.tl-shot-msg i.short { width: 35%; }
.tl-shot-compose { display: flex; align-items: center; gap: 8px; margin: 0 12px 10px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; }
.tl-shot-compose span { flex: 1; height: 8px; border-radius: 4px; background: var(--line); }
.tl-shot-compose b { font-size: 9px; font-weight: 700; color: var(--accent-ink); padding: 2px 6px; border-radius: 4px; }
.tl-shot-form, .tl-shot-mail { margin: 12px 14px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; display: flex; flex-direction: column; gap: 8px; }
.tl-shot-form i, .tl-shot-mail i { height: 10px; border-radius: 4px; background: var(--line); }
.tl-shot-form i.short, .tl-shot-mail i.short { width: 45%; }
.tl-shot-mail i.band { height: 16px; background: var(--accent-soft); }
.tl-shot-sms { margin: 14px auto; width: 150px; padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; gap: 6px; }
.tl-shot-sms i { height: 26px; border-radius: 10px 10px 10px 3px; background: var(--line); }
.tl-shot-sms i.short { height: 12px; width: 60%; }
.tl-shot-done { flex: 1; display: flex; align-items: center; justify-content: center; }
.tl-shot-done .lib-ico { width: 54px; height: 54px; padding: 12px; border-radius: 50%; background: var(--green-soft); color: var(--green); }
.tl-shot.w-nav .tl-shot-main::after { content: ""; display: block; margin: 12px 14px; height: 70px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }
@media (max-width: 640px) {
  .tl-grid { grid-template-columns: 1fr; }
  .tl-legend { gap: 10px; }
  .tl-legend .grow { display: none; }
  .tl-count { width: 100%; }
  .tl-shot { height: 130px; }
}

/* 4.137.0: Offert. Statusen som en prick + text i samma färger som tilläggscentret: grå utkast, blå skickad/öppnad,
   grön godkänd, röd avböjd, gul utgången. Redigeraren: raderna i ett rutnät, summan till höger. */
.qt .qt-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; vertical-align: middle; }
.qt .qt-st i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.qt .qt-st.st-sent i, .qt .qt-st.st-viewed i { background: var(--blue); } .qt .qt-st.st-sent, .qt .qt-st.st-viewed { color: var(--blue); }
.qt .qt-st.st-accepted i { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent); } .qt .qt-st.st-accepted { color: var(--green); }
.qt .qt-st.st-declined i { background: var(--red); } .qt .qt-st.st-declined { color: var(--red); }
.qt .qt-st.st-expired i { background: var(--saffron); } .qt .qt-st.st-expired { color: var(--saffron); }
.qt h1 .qt-st { font-size: 12.5px; margin-left: 8px; }
.qt-stats .stat small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.qt-bar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.qt-bar .tabs { margin: 0; flex: 1; min-width: 0; }
.qt-bar .tabs small { color: var(--faint); font-weight: 500; }
.qt-search .input { width: 240px; }
.qt-list { padding: 0; overflow: hidden; }
.qt-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 170px 120px 110px; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); color: var(--ink); }
.qt-row:last-child { border-bottom: 0; }
.qt-row:hover { background: var(--hover); }
.qt-num { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.qt-what { min-width: 0; } .qt-what b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qt-what small { display: block; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qt-when { color: var(--muted); font-size: 12.5px; }
.qt-amt { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.qt-back { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; margin-bottom: 4px; }
.qt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.qt-main, .qt-side { display: grid; gap: 12px; min-width: 0; }
.qt-fs { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 12px; }
.qt-card { margin: 0 !important; padding: 16px; display: grid; gap: 12px; }
.qt-card h3 { margin: 0; font-size: 14px; font-weight: 600; }
.qt-card .field > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.qt-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.qt-head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qt-items { display: grid; gap: 6px; }
.qt-ih, .qt-item { display: grid; grid-template-columns: minmax(0, 1fr) 70px 82px 120px 76px 44px 32px; gap: 6px; align-items: start; }
.qt-ih span { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.qt-item .input { padding-left: 8px; padding-right: 8px; min-width: 0; }
.qt-desc { display: grid; gap: 4px; min-width: 0; }
.qt-item textarea.qt-details { font-size: 12.5px; min-height: 32px; height: 32px; padding-top: 6px; padding-bottom: 6px; resize: vertical; color: var(--ink-2); }
.qt-item textarea.qt-details:focus, .qt-item textarea.qt-details.has-text { height: 64px; }
.qt-labor { display: flex; align-items: center; justify-content: center; height: 34px; cursor: pointer; }
.qt-labor input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
.qt-items-foot { display: flex; gap: 8px; }
.qt-sumrow { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; border-top: 1px solid var(--line); padding-top: 12px; align-items: start; }
.qt-ded { display: grid; gap: 8px; } .qt-ded .help { margin: 0; font-size: 12px; }
.qt-sum { display: grid; gap: 4px; font-size: 13.5px; }
.qt-sum > div { display: flex; justify-content: space-between; gap: 12px; }
.qt-sum > div span { color: var(--muted); }
.qt-sum b { font-variant-numeric: tabular-nums; }
.qt-sum .ded b, .qt-sum .ded span { color: var(--green); }
.qt-sum .pay { border-top: 1px solid var(--line-strong); padding-top: 6px; margin-top: 2px; font-size: 15px; }
.qt-sum .pay span { color: var(--ink); font-weight: 600; }
.qt-actions { display: flex; justify-content: flex-end; gap: 8px; position: sticky; bottom: 0; padding: 10px 0; background: linear-gradient(transparent, var(--bg) 40%); }
.qt-link { display: flex; align-items: center; gap: 6px; } .qt-link code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.qt-facts { margin: 0; display: grid; gap: 6px; font-size: 13px; }
.qt-facts > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; }
.qt-facts dt { color: var(--muted); } .qt-facts dd { margin: 0; overflow-wrap: anywhere; }
.qt-hash { font-family: var(--mono); font-size: 12px; }
.qt-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 320px; overflow: auto; }
.qt-events li { position: relative; padding-left: 16px; font-size: 13px; }
.qt-events li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.qt-events li.ev-accepted::before, .qt-events li.ev-fortnox::before { background: var(--green); }
.qt-events li.ev-declined::before, .qt-events li.ev-fortnox_error::before { background: var(--red); }
.qt-events li.ev-viewed::before, .qt-events li.ev-sent::before { background: var(--blue); }
.qt-events b { font-weight: 600; } .qt-events small { display: block; color: var(--muted); font-size: 12px; }
.qt-more { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 960px) {
  .qt-grid { grid-template-columns: 1fr; }
  .qt-sumrow { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .qt-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .qt-num { display: none; } .qt-when { grid-column: 1; } .qt-amt { grid-row: 1; grid-column: 2; } .qt-st { grid-column: 2; justify-self: end; }
  .qt-search, .qt-search .input { width: 100%; }
  .qt-two { grid-template-columns: 1fr; }
  .qt-ih { display: none; }
  .qt-item { grid-template-columns: 1fr 1fr 1fr; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .qt-item .qt-desc { grid-column: 1 / -1; }
  .qt-labor { justify-content: flex-start; }
}

/* 4.138.0: offertmallar, förhandsvisning och tidslinje */
.qt-tplrow { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.qt-card textarea.qt-small { font-size: 12px; min-height: 60px; color: var(--ink-2); }
dialog.modal.qt-pv { width: min(980px, calc(100vw - 24px)); height: min(88vh, 1000px); display: none; flex-direction: column; overflow: hidden; }
dialog.modal.qt-pv[open] { display: flex; }
.qt-pv iframe { flex: 1; width: 100%; border: 0; background: #F5F5F7; }
/* Mallens förhandsvisning: sidan ritas i 900 px bredd och skalas ned, så att den ser ut som på en dator */
.qtt-pv-box { position: relative; flex: 1; overflow: hidden; background: #F5F5F7; }
.qtt-pv-box iframe { position: absolute; left: 0; top: 0; width: 166.67%; height: 166.67%; border: 0; transform: scale(.6); transform-origin: 0 0; background: #F5F5F7; }
.qt-pv .modal-head .help { font-size: 12px; }
.qtt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.qtt-card { display: grid; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }
.qtt-card:hover { border-color: var(--line-strong); }
.qtt-meta b { font-weight: 600; } .qtt-meta small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
/* Miniatyren av en layout: band/kant, rubrik och några textrader */
.qtt-thumb { --c: var(--accent); position: relative; display: block; height: 118px; border-radius: 7px; background: #FFFFFF; border: 1px solid var(--line); overflow: hidden; }
.qtt-thumb i { position: absolute; left: 0; top: 0; right: 0; height: 26px; background: var(--c); }
.qtt-thumb b { position: absolute; left: 14px; top: 38px; width: 46%; height: 9px; border-radius: 3px; background: #2B2B33; }
.qtt-thumb em { display: block; position: absolute; left: 14px; right: 14px; height: 6px; border-radius: 3px; background: #E3E2E8; top: 58px; }
.qtt-thumb em + em { top: 72px; right: 40px; }
.qtt-thumb em.s { top: 98px; height: 4px; right: 20px; background: #EFEFF3; }
.qtt-thumb.lay-minimal i { top: 30px; height: 2px; left: 14px; right: 14px; }
.qtt-thumb.lay-minimal b { top: 12px; width: 30%; height: 8px; }
.qtt-thumb.lay-modern i { width: 6px; height: auto; bottom: 0; right: auto; }
.qtt-thumb.lay-modern b { top: 14px; width: 52%; height: 13px; background: var(--c); }
.qtt-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.qtt-layouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.qtt-layout { position: relative; display: grid; gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.qtt-layout input { position: absolute; opacity: 0; pointer-events: none; }
.qtt-layout:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.qtt-layout input:focus-visible + .qtt-thumb { outline: 2px solid var(--accent); }
.qtt-layout b { font-size: 13px; font-weight: 600; } .qtt-layout small { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.qtt-layout .qtt-thumb { height: 86px; } .qtt-layout .qtt-thumb em.s { top: 74px; } .qtt-layout .qtt-thumb em + em { top: 62px; } .qtt-layout .qtt-thumb em { top: 50px; }
.qtt-color { width: 44px; height: 34px; padding: 2px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; }
.qtt-preview { position: sticky; top: 12px; display: flex; flex-direction: column; height: calc(100vh - 140px); min-height: 520px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.qtt-pv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.qtt-pv-head small { color: var(--muted); font-size: 12px; }
@media (max-width: 960px) {
  .qtt-edit { grid-template-columns: 1fr; }
  .qtt-preview { position: static; height: 560px; }
}
@media (max-width: 640px) { .qtt-layouts { grid-template-columns: 1fr 1fr 1fr; } .qtt-layout small { display: none; } }

/* 4.139.0: egen röst – lista, guide i tre steg, inspelning med nivåmätare och ljudkontroll */
.cv-list { display: grid; gap: 10px; margin-bottom: 18px; }
.cv-voice { padding: 0; overflow: hidden; }
.cv-voice-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.cv-avatar, .cv-strip-i { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); flex: none; }
.cv-voice-meta { min-width: 0; flex: 1 1 220px; } .cv-voice-head > .grow { flex: 0 0 0; } .cv-voice-meta b { font-weight: 600; font-size: 14px; }
.cv-voice-meta small { display: block; color: var(--muted); font-size: 12px; margin-top: 1px; }
.cv-voice-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; padding: 12px 14px; align-items: end; }
.cv-try-row { display: flex; gap: 8px; } .cv-try-row .input { flex: 1; min-width: 0; }
.cv-try audio { width: 100%; height: 36px; margin-top: 8px; }
.cv-voice-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cv-use { display: flex; gap: 8px; } .cv-use select { width: auto; min-width: 120px; }
.cv-err { display: block; color: var(--red); font-size: 12px; margin-top: 6px; }
.cv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.cv-h2 { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
.cv-wizard { display: grid; gap: 12px; }
.cv-step { padding: 0; }
.cv-step-head { display: flex; gap: 12px; padding: 14px 16px 0; }
.cv-step-head h3 { margin: 2px 0 0; font-size: 14.5px; font-weight: 600; } .cv-step-head p { margin: 3px 0 0; color: var(--muted); font-size: 12.5px; }
.cv-num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--hover); color: var(--ink-2); font-weight: 600; font-size: 12.5px; flex: none; }
.cv-step-body { padding: 14px 16px 16px 52px; }
.cv-ferr { display: block; color: var(--red); font-size: 12px; min-height: 0; }
.cv-ferr:empty { display: none; }
.cv-consent { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); font-size: 13px; line-height: 1.5; cursor: pointer; }
.cv-consent input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.cv-consent:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); }
.cv-tabs { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--hover); justify-self: start; }
.cv-tabs button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; }
.cv-tabs button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.cv-script { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.cv-script-head { padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.cv-script-head b { font-size: 12.5px; font-weight: 600; } .cv-script-head small { display: block; color: var(--muted); font-size: 12px; }
.cv-script-text { padding: 10px 14px; max-height: 210px; overflow-y: auto; font-size: 15px; line-height: 1.65; color: var(--ink); }
.cv-script-text p { margin: 0 0 6px; } .cv-script-text p.muted { color: var(--muted); font-size: 13.5px; }
.cv-recorder { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.cv-rec { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 560; cursor: pointer; flex: none; }
.cv-rec i { width: 14px; height: 14px; border-radius: 50%; background: var(--red); }
.cv-rec.on { border-color: var(--red); color: var(--red); }
.cv-rec.on i { border-radius: 3px; animation: cv-pulse 1.2s ease-in-out infinite; }
@keyframes cv-pulse { 50% { opacity: .35; } }
.cv-meter { flex: 1; min-width: 0; display: grid; gap: 5px; }
.cv-meter small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.cv-meter-bar { position: relative; height: 8px; border-radius: 5px; background: var(--hover); overflow: hidden; }
/* Det gröna fältet: talnivå mellan cirka −33 och −6 dBFS (45–90 % av mätaren) */
.cv-meter-bar em { position: absolute; left: 45%; width: 45%; top: 0; bottom: 0; background: color-mix(in srgb, var(--green) 16%, transparent); }
.cv-meter-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--muted); border-radius: 5px; transition: width .06s linear; z-index: 1; }
.cv-meter-bar i.ok { background: var(--green); } .cv-meter-bar i.hot { background: var(--red); }
.cv-drop { display: grid; justify-items: center; gap: 4px; padding: 22px 14px; border: 1px dashed var(--line-strong); border-radius: 10px; color: var(--muted); text-align: center; cursor: pointer; }
.cv-drop:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.cv-drop b { color: var(--ink); font-weight: 600; } .cv-drop small { font-size: 12px; }
.cv-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cv-takes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cv-takes:empty { display: none; }
.cv-take { border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; display: grid; gap: 7px; }
.cv-take.bad { border-color: color-mix(in srgb, var(--red) 40%, var(--line)); }
.cv-take-head { display: flex; align-items: center; gap: 8px; } .cv-take-head b { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-take-head small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; flex: 1; }
.cv-take audio { width: 100%; height: 32px; }
.cv-flags { display: flex; gap: 5px; flex-wrap: wrap; }
.cv-total { display: grid; gap: 5px; }
.cv-total small { color: var(--muted); font-size: 12px; } .cv-total b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.cv-total-bar { position: relative; height: 6px; border-radius: 5px; background: var(--hover); overflow: hidden; }
.cv-total-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--muted); border-radius: 5px; transition: width .2s; }
.cv-total-bar i.ok { background: var(--green); }
.cv-total-bar em { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--line-strong); z-index: 1; }
.cv-submit { display: flex; align-items: flex-end; gap: 14px; justify-content: space-between; flex-wrap: wrap; }
.cv-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted); }
.cv-checks li { display: inline-flex; align-items: center; gap: 6px; }
.cv-checks li::before { content: ''; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--line-strong); box-sizing: border-box; }
.cv-checks li.ok { color: var(--ink-2); }
.cv-checks li.ok::before { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 2px var(--surface); }
.cv-busy { color: var(--muted); font-size: 12.5px; }
.cv-alert { padding: 10px 12px; border-radius: 10px; background: var(--red-soft); color: var(--red); font-size: 13px; }
.cv-aside { display: grid; gap: 12px; position: sticky; top: 12px; }
.cv-aside .card { padding: 14px; }
.cv-aside h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 13.5px; font-weight: 600; }
.cv-aside ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.cv-tips li b { display: block; color: var(--ink); font-weight: 600; } .cv-tips li span { color: var(--muted); }
.cv-privacy li { padding-left: 16px; position: relative; } .cv-privacy li::before { content: ''; position: absolute; left: 2px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.cv-strip { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); }
.cv-strip:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.cv-strip > span:nth-child(2) { flex: 1; min-width: 0; } .cv-strip b { font-weight: 600; } .cv-strip small { display: block; color: var(--muted); font-size: 12px; }
@media (max-width: 900px) {
  .cv-grid { grid-template-columns: 1fr; } .cv-aside { position: static; }
  .cv-voice-body { grid-template-columns: 1fr; }
  .cv-step-body { padding-left: 16px; }
}
@media (max-width: 520px) {
  .cv-recorder { flex-direction: column; align-items: stretch; } .cv-rec { justify-content: center; }
  .cv-use { flex: 1; } .cv-use select { flex: 1; min-width: 0; }
  .cv-submit .btn { width: 100%; justify-content: center; }
}
.cv-voice-body .input, .cv-voice-body .btn { height: 34px; }

/* 4.140.0: röstbrevlådan – ett kort per meddelande; akut och nytt syns i kanten, resten är lugnt */
.vm-mode { display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--ink-2); font-size: 13px; }
.vm-mode svg { flex: none; margin-top: 2px; color: var(--accent); }
.vm-mode.warn { border-color: color-mix(in srgb, var(--saffron) 45%, var(--line)); background: var(--saffron-soft); }
.vm-mode.warn b { color: var(--ink); font-weight: 560; }
.vm-stats .stat.is-akut b { color: var(--red); }
.vm-list { display: grid; gap: 10px; }
.vm-item { padding: 0; overflow: hidden; position: relative; scroll-margin-top: 80px; }
.vm-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.vm-item.urg-akut::before { background: var(--red); }
.vm-item.urg-viktigt::before { background: var(--saffron); }
.vm-item.is-done { opacity: .72; }
.vm-item.flash { box-shadow: 0 0 0 2px var(--accent-line); }
.vm-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 0 16px; flex-wrap: wrap; }
.vm-dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; flex: none; }
.vm-item.is-new .vm-dot { background: var(--accent); }
.vm-who { min-width: 0; flex: 1 1 200px; }
.vm-who b { font-weight: 600; font-size: 14px; }
.vm-item.is-new .vm-who b { font-weight: 650; }
.vm-who small { display: block; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.vm-head > .grow { flex: 0 0 0; }
.vm-for.me { background: var(--accent-soft); color: var(--accent); }
.vm-st { font-size: 11.5px; color: var(--muted); padding-left: 4px; }
.vm-st.st-new { color: var(--accent); font-weight: 560; }
.vm-st.st-done { color: var(--green); }
.vm-body { padding: 8px 16px 0 32px; display: grid; gap: 8px; }
.vm-sum { margin: 0; font-size: 13.5px; color: var(--ink); line-height: 1.5; }
.vm-said { margin: 0; padding: 8px 12px; border-left: 2px solid var(--line-strong); background: var(--surface-2); border-radius: 0 7px 7px 0; color: var(--ink-2); font-size: 13px; line-height: 1.55; max-height: 7.8em; overflow: hidden; cursor: pointer; }
.vm-said.open { max-height: none; }
.vm-body audio { width: 100%; max-width: 520px; height: 34px; }
.vm-actions { display: flex; align-items: center; gap: 6px; padding: 10px 14px 12px 32px; flex-wrap: wrap; }
.vm-actions form { margin: 0; }
.vm-panel { padding: 0 14px 14px 32px; display: grid; gap: 8px; }
.vm-panel[hidden] { display: none !important; }
.vm-ai { font-style: normal; color: var(--accent); font-weight: 500; }
.vm-modes { display: grid; gap: 6px; }
.vm-modeopt { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 13px; }
.vm-modeopt input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.vm-modeopt:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); }
@media (max-width: 640px) {
  .vm-body, .vm-actions, .vm-panel { padding-left: 16px; }
  .vm-actions .btn.primary { flex: 1; }
}
.vm-stats .stat small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }

/* 4.141.0: utskick – listan, redigeraren med förhandsvisning (telefon eller mejl), rapporten och mottagarna */
.ou-stats .stat small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.ou-stats .stat.is-akut b { color: var(--red); }
.ou-start { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 14px; flex-wrap: wrap; }
.ou-start > div { flex: 1; min-width: 240px; } .ou-start b { font-weight: 600; } .ou-start p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.ou-list { padding: 0; overflow: hidden; }
.ou-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--line); color: var(--ink); }
.ou-row:first-child { border-top: 0; }
.ou-row:hover { background: var(--hover); }
.ou-ch { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--hover); color: var(--ink-2); flex: none; }
.ou-what { flex: 1; min-width: 0; } .ou-what b { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ou-what small { color: var(--muted); font-size: 12px; }
.ou-nums { display: flex; gap: 10px; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.ou-nums span { display: inline-flex; align-items: center; gap: 3px; }
.ou-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.ou-st i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.ou-st.st-sent i { background: var(--green); } .ou-st.st-sending i, .ou-st.st-scheduled i { background: var(--accent); }
.ou-st.st-paused i { background: var(--saffron); } .ou-st.st-canceled i { background: var(--red); }
.ou-edit { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.ou-main { display: grid; gap: 12px; }
.ou-card { padding: 14px 16px; display: grid; gap: 12px; }
.ou-ai { display: flex; gap: 8px; } .ou-ai .input { flex: 1; min-width: 0; }
.ou-body { font-size: 14px; line-height: 1.55; }
.ou-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ou-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 7px; font-size: 12.5px; cursor: pointer; }
.ou-tag input { margin: 0; accent-color: var(--accent); }
.ou-tag small { color: var(--faint); }
.ou-tag:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); }
.ou-reach { margin: 4px 0 0; font-size: 13px; color: var(--muted); } .ou-reach b { color: var(--ink); font-variant-numeric: tabular-nums; }
.ou-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ou-saved { font-size: 12px; color: var(--muted); }
.ou-preview { position: sticky; top: 12px; display: grid; gap: 10px; }
.ou-pv-head b { font-weight: 600; font-size: 13.5px; } .ou-pv-head small { display: block; color: var(--muted); font-size: 12px; }
.ou-phone { border: 1px solid var(--line); border-radius: 18px; padding: 12px; background: var(--surface-2); min-height: 220px; }
.ou-phone-top { text-align: center; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.ou-phone-top b { display: block; font-weight: 600; font-size: 13px; } .ou-phone-top small { color: var(--muted); font-size: 11px; }
.ou-bubble { max-width: 88%; background: var(--surface); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 9px 12px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.ou-meter { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .ou-meter b { color: var(--ink); }
.ou-mail { position: relative; height: 520px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #F5F5F7; }
.ou-mail iframe { position: absolute; left: 0; top: 0; width: 158%; height: 158%; border: 0; transform: scale(.633); transform-origin: 0 0; background: #F5F5F7; }
.ou-cost { padding: 12px 14px; display: grid; gap: 6px; font-size: 13px; }
.ou-cost > div { display: flex; justify-content: space-between; gap: 10px; } .ou-cost span { color: var(--muted); } .ou-cost b { font-variant-numeric: tabular-nums; font-weight: 600; }
.ou-cost .help { margin: 4px 0 0; color: var(--saffron); }
.ou-sum { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 13.5px; }
.ou-sum > div { display: flex; justify-content: space-between; } .ou-sum span { color: var(--muted); } .ou-sum b { font-variant-numeric: tabular-nums; }
.ou-ok { color: var(--green); font-size: 13px; margin: 0; }
.ou-report { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.ou-side { display: grid; gap: 12px; }
.ou-h3 { margin: 0; font-size: 14px; font-weight: 600; }
.ou-sends { display: grid; }
.ou-send { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.ou-send b { font-weight: 560; } .ou-send small { display: block; color: var(--muted); font-size: 12px; }
.ou-sst { font-size: 12px; color: var(--muted); text-align: right; } .ou-sst.st-sent { color: var(--green); } .ou-sst.st-failed { color: var(--red); }
.ou-link { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 6px 0; border-top: 1px solid var(--line); }
.ou-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); } .ou-link b { font-variant-numeric: tabular-nums; }
.ou-subj { margin: 0; font-size: 13.5px; }
.ou-body-ro { font-size: 13px; line-height: 1.55; color: var(--ink-2); white-space: normal; max-height: 360px; overflow: auto; }
.ou-subs { padding: 0; overflow: hidden; }
.ou-sub { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.ou-sub:first-child { border-top: 0; }
.ou-sub-who { flex: 1 1 220px; min-width: 0; } .ou-sub-who b { font-weight: 600; } .ou-sub-who small { display: block; color: var(--muted); font-size: 12px; }
.ou-sub-meta { display: flex; gap: 5px; flex-wrap: wrap; }
.ou-sub-act { display: flex; gap: 4px; } .ou-sub-act form { margin: 0; }
.ou-tagb { background: var(--accent-soft); color: var(--accent); }
@media (max-width: 960px) {
  .ou-edit, .ou-report { grid-template-columns: 1fr; } .ou-preview { position: static; }
  .ou-mail { height: 440px; }
}
@media (max-width: 560px) { .ou-nums { display: none; } .ou-actions .btn.primary { flex: 1; } }
.ou-from { margin: 0; font-size: 12.5px; color: var(--muted); } .ou-from b { color: var(--ink-2); font-weight: 560; }

/* 4.142.0: WhatsApp-utskick – mallväljaren med variabler, förhandsvisningen som en WhatsApp-bubbla och mallsidan */
.ou-waparams { display: grid; gap: 8px; }
.ou-waparams:empty { display: none; }
.ou-warow { display: grid; grid-template-columns: 52px minmax(0, 200px) minmax(0, 1fr); gap: 8px; align-items: center; }
.ou-warow > span { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; color: var(--muted); }
.ou-warow input[hidden] { display: none; }
.ou-wabub { display: grid; gap: 6px; justify-items: start; }
.ou-wabub .ou-bubble { display: grid; gap: 6px; white-space: pre-wrap; }
.ou-wah { font-weight: 600; }
.ou-waf { color: var(--muted); font-size: 12px; }
.ou-wabtn { max-width: 88%; width: 100%; text-align: center; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--accent); font-size: 13px; font-weight: 560; }
.ou-watpls { gap: 0; padding: 0; overflow: hidden; margin-bottom: 14px; }
.ou-wach-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ou-wach-head b { font-weight: 600; } .ou-wach-head small { color: var(--muted); font-size: 12px; }
.ou-watpls > .cv-alert, .ou-watpls > .help { margin: 10px 16px; }
.ou-watpl { padding: 12px 16px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.ou-wach-head + .ou-watpl { border-top: 0; }
.ou-watpl-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ou-watpl-top b { font-weight: 600; margin-right: 4px; overflow-wrap: anywhere; }
.ou-watpl-top .ou-ok { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; margin-left: auto; }
.ou-watpl-body { display: grid; gap: 5px; max-width: 560px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.ou-watpl-body small { color: var(--muted); font-size: 12px; }
.ou-watpl-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.ou-watpl-btns span { padding: 3px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--accent); font-size: 12px; }
.ou-why { margin: 0; color: var(--saffron); }
[data-ou-wurl][hidden], [data-ou-fb][hidden] { display: none; }
@media (max-width: 560px) { .ou-warow { grid-template-columns: 44px minmax(0, 1fr); } .ou-warow input { grid-column: 1 / -1; } }
.ou-cost .ou-note { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }   /* 4.142.0: upplysning, inte en varning */

/* 4.143.0: larm för arg kund – märket i listan och i ärendets huvud (röd ton från temat, ingen egen hexfärg) */
.conv-mood { display: inline-flex; align-items: center; gap: 3px; height: 17px; padding: 0 6px; border-radius: var(--r-sm); background: var(--red-soft); color: var(--red); font-size: 10.5px; font-weight: 600; white-space: nowrap; flex: none; }
.thread-mood { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: var(--r-sm); background: var(--red-soft); color: var(--red); font-size: 11px; font-weight: 600; margin-left: 6px; max-width: 100%; overflow: hidden; }
.thread-mood small { font-weight: 500; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-calm { display: inline-flex; margin-left: 4px; }
.thread-calm button { height: 20px; padding: 0 7px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: 500 11px/1 inherit; font-family: inherit; cursor: pointer; }
.thread-calm button:hover { background: var(--hover); }

/* 4.143.0: sidorna för larm, moderering och leadformulär – samma lugna kort och rader som utskicken */
.sg-card { padding: 14px 16px; display: grid; gap: 12px; margin-bottom: 14px; }
.sg-h3 { margin: 0; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.sg-list { display: grid; padding: 0; overflow: hidden; }
.card.sg-list { margin-bottom: 14px; }
.sg-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); color: var(--ink); min-width: 0; }
.sg-row:first-child { border-top: 0; }
a.sg-row:hover, .sg-row.on { background: var(--hover); }
.sg-card .sg-row { padding: 9px 0; }
.sg-card a.sg-row:hover, .sg-card .sg-row.on { background: transparent; }
.sg-card .sg-row.on .sg-who b { color: var(--accent); }
.sg-who { flex: 1; min-width: 0; } .sg-who b { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-who small { display: block; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-meta { display: flex; align-items: center; gap: 6px; flex: none; font-size: 12px; color: var(--muted); }
.mod-row { padding: 12px 16px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.mod-row:first-child { border-top: 0; }
.mod-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.mod-top b { font-weight: 600; }
.mod-top time { margin-left: auto; color: var(--muted); font-size: 12px; }
.mod-ch { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; }
.mod-src { color: var(--faint); font-size: 11px; }
.mod-text { margin: 0; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.mod-why { margin: 0; }
.mod-act { display: flex; gap: 6px; align-items: center; } .mod-act form { margin: 0; }
.lf-grid { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 16px; align-items: start; }
.lf-side { display: grid; gap: 0; }
.lf-fields { display: grid; gap: 4px; border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px; }
.lf-field { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 0; border-top: 1px solid var(--line); font-size: 13px; }
.lf-field:first-child { border-top: 0; }
.lf-req { color: var(--muted); font-size: 12px; }
.copyline .lf-code { white-space: pre-wrap; word-break: break-all; max-height: 90px; overflow: auto; }
.lf-contact { margin: -4px 0 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.lf-scorebox { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 13px; }
.lf-scorebox form { margin: 0; }
.lf-next { margin: 0; }
.lf-score { font-variant-numeric: tabular-nums; }
.tabs.sm { margin: 0; border-bottom: 0; } .tabs.sm a { padding: 4px 8px; font-size: 12.5px; }
@media (max-width: 960px) { .lf-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .sg-row { flex-wrap: wrap; } .sg-meta { width: 100%; } .mod-top time { margin-left: 0; } }
/* 4.143.0: lead-scoring i Telefoni → Leads */
.ld-score { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--r-sm); font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--hover); color: var(--ink-2); white-space: nowrap; vertical-align: middle; }
.ld-score.sc-het { background: var(--red-soft); color: var(--red); } .ld-score.sc-ljummen { background: var(--saffron-soft); color: var(--saffron); }
.ld-scorebox { display: grid; gap: 4px; margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 13px; }
.ld-scorebox p { margin: 0; } .ld-scorebox form { margin: 4px 0 0; }

/* ── 4.144.0: Google-omdömen, recensionswidget, hjälpcenter på egen domän och varumärken ───────────────────── */
.hc-domain { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 2px; }
.hc-domain-h { font-size: 13.5px; font-weight: 600; }
.hc-domain .field { margin: 0; }
.hc-domain-st { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.hc-domain-st svg { flex: none; margin-top: 1px; }
.hc-domain-st.ok { color: var(--ink); }
.hc-domain-st.ok svg { color: var(--green); }
.hc-domain-st.wait svg { color: var(--saffron); }
.hc-domain code { font-size: 12px; padding: 1px 5px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--line); }

.br-dot { width: 14px; height: 14px; border-radius: 5px; background: var(--c); flex: none; border: 1px solid var(--line); }
.br-list .sg-row { align-items: center; gap: 12px; }
.br-use { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.br-use-g { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px 10px; margin: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.br-use-g legend { font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 4px; }
.br-use-g .check span { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.br-use-g .check small { font-size: 11.5px; }

.gr-list { display: flex; flex-direction: column; gap: 10px; }
.gr-row { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; margin: 0; }
.gr-row.on { border-color: var(--accent-line); }
.gr-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gr-top b { font-weight: 600; }
.gr-top time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gr-stars { display: inline-flex; gap: 1px; font-size: 14px; line-height: 1; letter-spacing: 0; }
.gr-stars i { font-style: normal; color: var(--line-strong); }
.gr-stars i.on { color: var(--saffron); }
.gr-text { margin: 0; white-space: normal; overflow-wrap: anywhere; }
.gr-reply { border-left: 2px solid var(--accent); padding: 2px 0 2px 10px; color: var(--ink-2); font-size: 13px; overflow-wrap: anywhere; }
.gr-reply > span { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.gr-edit > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); width: max-content; list-style: none; }
.gr-edit > summary::-webkit-details-marker { display: none; }
.gr-edit[open] > summary { margin-bottom: 8px; }
.gr-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gr-msg { margin: 0; }
.gr-wid { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.gr-wid small { font-size: 12px; }
.gr-loc { align-items: flex-start; }
.gr-loc span { display: flex; flex-direction: column; line-height: 1.35; }
.gr-connect .gr-note { display: block; max-width: 520px; margin: 10px auto 0; }
.rw-pv iframe { display: block; width: 100%; min-height: 240px; border: 0; border-radius: 7px; background: var(--surface-2); }
@media (max-width: 600px) { .gr-actions .grow { display: none; } .gr-actions .btn.primary { width: 100%; justify-content: center; } }

/* ── 4.145.0: betalningar, kvalitetsgranskning och avancerad säkerhet ───────────────────────────────────── */
.input-suffix { display: flex; align-items: stretch; border: 1px solid var(--line-strong, var(--line)); border-radius: 7px; overflow: hidden; background: var(--surface); }
.input-suffix > .input { border: 0 !important; border-radius: 0; box-shadow: none !important; min-width: 0; flex: 1; }
.input-suffix > span { display: flex; align-items: center; padding: 0 10px; color: var(--muted); font-size: 12.5px; background: var(--surface-2); border-left: 1px solid var(--line); }
.input-suffix:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.bp-deposit { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 12px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
@media (max-width: 700px) { .bp-deposit { grid-template-columns: 1fr; } }
.pay-acct { gap: 10px; }
.pay-acct-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pay-acct-row > div { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.pay-acct-row small { overflow-wrap: anywhere; }
.pay-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--saffron); flex: none; }
.pay-dot.on { background: var(--green); }
.pay-uses { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.pay-uses li { display: flex; align-items: center; gap: 6px; color: var(--muted); flex-wrap: wrap; }
.pay-uses li.on { color: var(--ink); }
.pay-uses li.on svg { color: var(--green); }
.pay-list .sg-meta form { margin: 0; }
.ql-dims { display: grid; gap: 6px; margin: 0 0 14px; }
.ql-dim { display: grid; grid-template-columns: 130px minmax(0, 1fr) 34px; align-items: center; gap: 10px; font-size: 13px; }
.ql-dim b { font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }
.ql-bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.ql-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.ql-low .sg-who small, .ql-people .sg-who small { white-space: normal; }
.ql-informed { align-items: flex-start; }
.ql-informed span { line-height: 1.4; }
.sec-also { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.sec-also svg { color: var(--green); flex: none; }
.sec-also a { color: var(--accent); font-weight: 600; }
.sec-ips { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.sec-row .sg-who small { overflow-wrap: anywhere; white-space: normal; }
@media (max-width: 600px) { .ql-dim { grid-template-columns: 96px minmax(0, 1fr) 30px; } }

/* ── 4.147.0: Inlämningar ─────────────────────────────────────────────────────────────────────
   Byggt för disken: stora tryckytor på mobilen, en knapp för nästa steg som alltid syns, och
   stegens egna färger bara som små prickar (accentfärgen används som förut). */
.do .do-head { align-items: flex-start; }
.do-h1 { font-size: 20px; font-weight: 650; margin: 2px 0 14px; letter-spacing: -.01em; }
.do-scanbar { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 6px 6px 6px 12px; margin-bottom: 14px; color: var(--muted); }
.do-scanbar .input { border: 0; background: transparent; box-shadow: none; flex: 1; min-width: 0; padding-left: 4px; }
.do-scanbar .input:focus { outline: none; }
.do-scanbar:focus-within { border-color: var(--accent-line); }
.do-stats a.stat { color: inherit; } .do-stats a.stat:hover { border-color: var(--line-strong); }
.do-stats .stat.is-ready b { color: var(--green); } .do-stats .stat.is-late b { color: var(--red); }
.do-stagefilter { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 12px; }
.do-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink-2); font-size: 12.5px; font-weight: 520; }
.do-chip i { width: 8px; height: 8px; border-radius: 50%; }
.do-chip small { color: var(--faint); }
.do-chip.on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--ink); }
.do-list { padding: 0; overflow: hidden; }
.do-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) 190px 170px; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); color: var(--ink); }
.do-row:last-child { border-bottom: 0; } .do-row:hover { background: var(--hover); }
.do-num { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; font-family: var(--mono); }
.do-what { min-width: 0; } .do-what b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.do-what small { display: block; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.do-due { color: var(--muted); font-size: 12.5px; } .do-due.late { color: var(--red); font-weight: 600; }
.do-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.do-st i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.do-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 4px 0 14px; flex-wrap: wrap; }
.do-top-meta { display: flex; align-items: center; gap: 10px; }
.do-top h1 { font-size: 22px; font-weight: 650; margin: 4px 0 2px; letter-spacing: -.01em; overflow-wrap: anywhere; }
.do-top p { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.do-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.do-next { margin: 0; }
.btn.do-big { height: 40px; padding: 0 16px; font-size: 14px; }
.do-steps { list-style: none; display: flex; gap: 0; margin: 0 0 16px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow-x: auto; }
.do-steps li { display: flex; align-items: center; gap: 7px; color: var(--faint); font-size: 12.5px; white-space: nowrap; flex: 1 0 auto; }
.do-steps li + li::before { content: ""; height: 2px; flex: 1 1 18px; min-width: 14px; background: var(--line); margin: 0 8px; border-radius: 2px; }
.do-steps li i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); display: grid; place-items: center; flex: none; color: #fff; }
.do-steps li.past { color: var(--ink-2); } .do-steps li.past i { background: var(--c); border-color: var(--c); }
.do-steps li.past + li::before, .do-steps li.now::before { background: var(--line-strong); }
.do-steps li.now { color: var(--ink); font-weight: 650; } .do-steps li.now i { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.do-verified { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r); background: var(--green-soft); color: var(--green); margin-bottom: 14px; }
.do-verified div { flex: 1; } .do-verified b { display: block; } .do-verified small { color: var(--ink-2); }
.do-verified form { margin: 0; }
.do-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 0; }
.do-dl > div.wide { grid-column: 1 / -1; }
.do-dl dt { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.do-dl dd { margin: 0; overflow-wrap: anywhere; } .do-dl dd small { color: var(--muted); }
.do-dl .pre, .do-tl .pre { white-space: pre-line; }
.do-code { font-family: var(--mono); font-weight: 650; letter-spacing: .12em; }
.do-links { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--line); padding-top: 12px; }
.do-links .help { margin: 0 0 0 4px; font-size: 12px; }
.do-links .btn.ok { border-color: var(--green); color: var(--green); }
.do-edit > summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 7px; list-style: none; }
.do-edit > summary::-webkit-details-marker { display: none; }
.do-edit[open] > summary { margin-bottom: 4px; }
.do-move { gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }
.do-move .input { width: auto; flex: 1 1 160px; min-width: 0; }
.do-tl-list { list-style: none; margin: 0; padding: 0; }
.do-tl-list li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; padding-bottom: 14px; position: relative; }
.do-tl-list li > i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); margin-top: 5px; box-shadow: 0 0 0 3px var(--surface); position: relative; z-index: 1; }
.do-tl-list li::before { content: ""; position: absolute; left: 4px; top: 12px; bottom: 0; width: 2px; background: var(--line); }
.do-tl-list li:last-child::before { display: none; }
.do-tl-list li.t-note > i, .do-tl-list li.t-notified > i, .do-tl-list li.t-edited > i { background: var(--faint); width: 8px; height: 8px; margin-left: 1px; }
.do-tl-list li.t-picked_up > i { background: var(--green); }
.do-tl-list b { font-weight: 600; display: block; }
.do-tl-list small { display: block; color: var(--muted); font-size: 12px; } .do-tl-list small.bad { color: var(--red); }
.do-tl-list p { margin: 3px 0; font-size: 13px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; }
.do-note { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 12px; } .do-note .btn { justify-self: end; }
.do-proofs { gap: 10px; }
.do-proof { display: flex; align-items: center; gap: 12px; }
.do-proof img { width: 92px; height: 62px; object-fit: cover; border-radius: 7px; border: 1px solid var(--line); display: block; }
.do-proof > div { flex: 1; min-width: 0; } .do-proof b { display: block; } .do-proof small { display: block; color: var(--muted); font-size: 12px; }
.do-bid-ico { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: #193E4F; color: #fff; font: 700 11px var(--font); flex: none; }
.do-pickup .modal-body { gap: 14px; }
.flash.warn { background: var(--saffron-soft); color: var(--saffron); }
.do-pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.do-pick { display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center; padding: 16px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; margin: 0; }
button.do-pick:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.do-pick b { font-weight: 600; } .do-pick small { color: var(--muted); font-size: 12px; }
.do-code-in { text-align: center; font-family: var(--mono); font-size: 18px; letter-spacing: .2em; max-width: 160px; }
.do-fallback > summary { cursor: pointer; color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.do-fallback[open] { display: grid; gap: 12px; }
.do-photo-pick { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px dashed var(--line-strong); border-radius: var(--r); padding: 18px; cursor: pointer; color: var(--ink-2); font-weight: 600; position: relative; }
.do-photo-pick:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.do-photo-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.do-photo img[data-photo-preview] { max-width: 100%; max-height: 220px; border-radius: 7px; border: 1px solid var(--line); justify-self: start; }
.do-bid { display: grid; gap: 12px; justify-items: center; text-align: center; }
.do-bid-qr { width: 230px; max-width: 80%; min-height: 0; }
.do-bid-qr:empty { display: none; }
.do-bid-qr svg { width: 100%; height: auto; display: block; border-radius: 8px; }
.do-bid-wait { padding: 30px 10px; color: var(--muted); }
.do-bid-msg { margin: 0; min-height: 1.4em; font-weight: 550; }
.do-bid-msg:empty { display: none; }
.do-scan .modal-body { gap: 12px; }
.do-cam { position: relative; background: #0B0B10; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; }
.do-cam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.do-cam-frame { position: absolute; inset: 18% 16%; border: 2px solid rgba(255, 255, 255, .85); border-radius: 12px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .25); pointer-events: none; }
.do-cam-msg { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 8px 12px; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .65)); font-size: 13px; text-align: center; }
.do-toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 100; box-shadow: var(--shadow-pop); }
.do-form { display: grid; gap: 12px; }
.do-sec { margin: 0 !important; padding: 16px; display: grid; gap: 12px; }
.do-sec h3 { margin: 0; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.do-sec .field > span, .do .qt-card .field > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.do-types { display: flex; gap: 6px; flex-wrap: wrap; }
.do-type { position: relative; }
.do-type input { position: absolute; opacity: 0; inset: 0; }
.do-type span { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); font-size: 13px; cursor: pointer; }
.do-type input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.do-type input:focus-visible + span { outline: 2px solid var(--accent-line); outline-offset: 1px; }
.do-savebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); position: sticky; bottom: 12px; z-index: 5; }
.do-save-opts { display: grid; gap: 6px; }
.do-presets { gap: 12px; }
.do-preset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.do-preset-grid form { margin: 0; }
.do-preset { width: 100%; height: 100%; text-align: left; display: grid; gap: 4px; align-content: start; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.do-preset:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.do-preset b { font-weight: 600; } .do-preset small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.do-stage-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.do-stage-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.do-stage-row.fixed { background: var(--surface-2); }
.do-stage-row input[type=color] { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 6px; padding: 2px; background: var(--surface); flex: none; cursor: pointer; }
.do-stage-row .input { flex: 1; min-width: 0; }
.do-stage-row .tl-switch { white-space: nowrap; font-size: 12.5px; }
.do-stage-btns { display: flex; gap: 2px; }
.do-msg-grid { display: grid; gap: 10px; }
.do-msg { display: grid; gap: 6px; }
.do-msg .qt-head-row select { width: auto; }
.do-modes { display: grid; gap: 8px; }
.do-mode em { display: block; font-style: normal; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.do-mode.off { opacity: .6; cursor: not-allowed; }
.do-usage { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); }
.do-usage b { display: block; font-weight: 600; } .do-usage small { color: var(--muted); font-size: 12px; }
@media (max-width: 900px) {
  .do-row { grid-template-columns: 62px minmax(0, 1fr) 150px; }
  .do-row .do-due { display: none; }
}
@media (max-width: 760px) {
  .do .do-head { flex-direction: row; align-items: center; }
  .do .do-head h1 { font-size: 20px; }
  .do-head-btns .btn { height: 36px; }
  .do-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .do-stats .stat { padding: 9px 10px; } .do-stats .stat b { font-size: 18px; }
  .do-stagefilter { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
  .do-chip { flex: none; }
  .do-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "what st" "num due"; gap: 2px 10px; padding: 12px 14px; }
  .do-row .do-what { grid-area: what; } .do-row .do-st { grid-area: st; justify-self: end; }
  .do-row .do-num { grid-area: num; font-size: 12px; } .do-row .do-due { grid-area: due; display: block; justify-self: end; font-size: 12px; }
  .do-top { align-items: stretch; }
  .do-actions { position: fixed; left: 0; right: 0; bottom: var(--do-rail, calc(58px + env(safe-area-inset-bottom, 0px))); z-index: 40; padding: 10px 12px; background: var(--surface); border-top: 1px solid var(--line); flex-wrap: nowrap; }
  .do-actions .do-next { flex: 1; } .do-actions .do-next .btn { width: 100%; justify-content: center; }
  .do-actions > .btn.do-big { flex: 1; justify-content: center; }
  .do-show { padding-bottom: 70px; }
  .do-dl { grid-template-columns: 1fr; }
  .do-pick-grid { grid-template-columns: 1fr; }
  .do-preset-grid { grid-template-columns: 1fr; }
  .do-savebar { bottom: calc(var(--do-rail, calc(58px + env(safe-area-inset-bottom, 0px))) + 8px); }
  .do-savebar .btn { width: 100%; justify-content: center; }
  .do-sec .qt-two { grid-template-columns: 1fr; }
  .do-stage-row { flex-wrap: wrap; } .do-stage-row .input { flex-basis: calc(100% - 40px); }
}

/* ── 4.148.0: Bokningar ───────────────────────────────────────────────────────────────────────
   Samma yta som kalendern (menyn till vänster), lugna kort med tunna linjer och en enda accentfärg. Tjänsternas
   egna färger används bara som en liten markering (prick eller kant) – aldrig som stora färgfält. */
.cx-navh { margin: 14px 10px 4px; font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.cx-nav .lib-ico { color: var(--muted); flex: none; }
.cx-nav a.on .lib-ico { color: var(--accent); }
.cx-nav em.bks-navpend { color: var(--saffron); background: var(--saffron-soft); border-color: transparent; }
.bk .cx-main { background: var(--bg); }
.bks-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 16px 24px 12px; min-height: 62px; }
.bks-head h1 { margin: 0; font-size: 19px; font-weight: 640; letter-spacing: -.01em; display: flex; align-items: baseline; gap: 8px; }
.bks-head h1 small { font-size: 13px; color: var(--faint); font-weight: 500; }
.bks-head .grow { flex: 1; }
.bks-sub { color: var(--muted); font-size: 12.5px; margin: -2px 0 0; width: 100%; }
.bks-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 24px 40px; }
.bks-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--line); margin: 0 24px; padding: 0; overflow-x: auto; scrollbar-width: none; }
.bks-tabs a { padding: 9px 0 10px; color: var(--muted); font-weight: 540; font-size: 13.5px; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.bks-tabs a:hover { color: var(--ink); }
.bks-tabs a.on { color: var(--ink); border-bottom-color: var(--accent); }
.bks-tabs + .bks-body { padding-top: 18px; }
.bks-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.bks-card > header { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.bks-card > header h2, .bks-card > header h3 { margin: 0; font-size: 14.5px; font-weight: 620; }
.bks-card > header .grow { flex: 1; }
.bks-card > .bks-cb { padding: 16px 18px; }
.bks-card + .bks-card { margin-top: 14px; }
/* Kort bredvid varandra i ett rutnät ska inte få avståndet som staplade kort har – annars hamnar högerkolumnen lägre. */
.bks-grid > .bks-card { margin-top: 0; }
/* Ett kort direkt efter ett formulär (t.ex. Swish-kortet under betalningsreglerna) får luft från formulärets Spara-knapp. */
.bks-body > form + .bks-card, .bks-body > form + form { margin-top: 22px; }
.bks-grid { display: grid; gap: 14px; }
.bks-grid.cols-ov { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.bks-pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 580; white-space: nowrap; background: var(--hover); color: var(--ink-2); }
.bks-pill.ok { background: var(--green-soft); color: var(--green); }
.bks-pill.wait { background: var(--saffron-soft); color: var(--saffron); }
.bks-pill.bad { background: var(--red-soft); color: var(--red); }
.bks-pill.muted { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.bks-pill.acc { background: var(--accent-soft); color: var(--accent); }
.bks-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--c, var(--accent)); display: inline-block; }
.bks-av { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font-size: 11.5px; font-weight: 650;
  color: var(--c, var(--accent)); background: color-mix(in srgb, var(--c, var(--accent)) 14%, var(--surface)); }
.bks-av.lg { width: 44px; height: 44px; font-size: 15px; }
.bks-avs { display: inline-flex; } .bks-avs .bks-av { width: 24px; height: 24px; font-size: 10px; box-shadow: 0 0 0 2px var(--surface); }
.bks-avs .bks-av + .bks-av { margin-left: -6px; }
.bks-muted { color: var(--muted); } .bks-faint { color: var(--faint); }
.bks-num { font-variant-numeric: tabular-nums; }
/* Kom igång */
.bks-setup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.bks-setup a { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.bks-setup a:hover { border-color: var(--accent-line); }
.bks-setup .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent); font-weight: 650; font-size: 12.5px; }
.bks-setup a.done .n { background: var(--green-soft); color: var(--green); }
.bks-setup b { display: block; font-weight: 600; font-size: 13.5px; } .bks-setup span { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
/* Översikten */
.bks-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bks-filters .input, .bks-toolbar .input, select.input.bks-sel, input.input.bks-sel { height: 32px; font-size: 13px; width: auto; min-width: 0; padding: 0 30px 0 11px; border-radius: 8px; }
.bks-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.bks-kpi { padding: 16px 18px; } .bks-kpi + .bks-kpi { border-left: 1px solid var(--line); }
.bks-kpi b { font-size: 22px; font-weight: 640; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bks-kpi i { font-style: normal; font-size: 12px; font-weight: 620; margin-left: 6px; color: var(--muted); }
.bks-kpi i.up { color: var(--green); } .bks-kpi i.down { color: var(--red); }
.bks-kpi span { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.bks-chart { padding: 14px 18px 10px; }
.bks-chart svg { display: block; width: 100%; height: 190px; overflow: visible; }
.bks-chart .grid line { stroke: var(--line); stroke-dasharray: 2 4; }
.bks-chart .area { fill: url(#bkfill); } .bks-chart .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* Datumen ligger utanför SVG:n: den sträcks i bredd (preserveAspectRatio=none) och skulle annars förvränga texten. */
.bks-chart-x { position: relative; height: 16px; margin-top: 4px; }
.bks-chart-x span { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bks-chart .pt { fill: var(--surface); stroke: var(--accent); stroke-width: 2; opacity: 0; }
.bks-chart .hit:hover + .pt, .bks-chart .pt.on { opacity: 1; }
.bks-tip { position: absolute; pointer-events: none; background: var(--ink); color: var(--surface); border-radius: 8px; padding: 6px 9px; font-size: 11.5px; line-height: 1.3; transform: translate(-50%, -110%); white-space: nowrap; }
.bks-tip b { display: block; font-size: 15px; }
.bks-up { list-style: none; margin: 0; padding: 0; }
.bks-up li { display: flex; gap: 12px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); cursor: pointer; }
.bks-up li:first-child { border-top: 0; } .bks-up li:hover { background: var(--surface-2); }
.bks-up .when { font-size: 11.5px; color: var(--red); font-weight: 560; }
.bks-up b { display: block; font-weight: 600; font-size: 13.5px; line-height: 1.3; }
.bks-up small { color: var(--muted); font-size: 12px; }
.bks-up .bks-dot { margin-left: auto; }
.bks-callout { display: flex; gap: 10px; align-items: center; padding: 11px 14px; border-radius: 10px; background: var(--saffron-soft); color: var(--ink-2); margin-bottom: 14px; font-size: 13px; }
.bks-callout a { margin-left: auto; font-weight: 600; color: var(--ink); }
/* Dagens schema (översikt) och schemavyn */
.bks-tl { position: relative; overflow-x: auto; }
.bks-tl-in { min-width: 760px; }
.bks-tl-hours { display: grid; margin-left: 150px; height: 26px; border-bottom: 1px solid var(--line); }
.bks-tl-hours span { font-size: 10.5px; color: var(--faint); padding-top: 6px; border-left: 1px solid var(--line); padding-left: 4px; }
.bks-tl-row { display: flex; align-items: stretch; min-height: 52px; border-bottom: 1px solid var(--line); }
.bks-tl-row:last-child { border-bottom: 0; }
.bks-tl-who { width: 150px; flex: none; display: flex; align-items: center; gap: 9px; padding: 0 12px; font-size: 13px; font-weight: 560; }
.bks-tl-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bks-tl-lane { position: relative; flex: 1; }
.bks-off { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(-45deg, transparent 0 5px, color-mix(in srgb, var(--line) 70%, transparent) 5px 6px); }
.bks-blk { position: absolute; top: 7px; bottom: 7px; border-radius: 7px; background: color-mix(in srgb, var(--c) 13%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 35%, var(--surface));
  border-left: 3px solid var(--c); padding: 3px 7px; font-size: 11.5px; line-height: 1.25; overflow: hidden; cursor: pointer; color: var(--ink); text-align: start; font: inherit; }
.bks-blk b { display: block; font-size: 11.5px; font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bks-blk small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.bks-blk.wait { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--c) 10%, var(--surface)) 0 6px, var(--surface) 6px 12px); }
.bks-blk.done { opacity: .62; }
.bks-blk:hover { box-shadow: 0 2px 10px rgba(20,24,40,.10); z-index: 2; }
.bks-avail { position: absolute; top: 14px; bottom: 14px; border-radius: 6px; background: var(--green-soft); border: 1px dashed color-mix(in srgb, var(--green) 45%, transparent); }
.bks-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red); z-index: 3; pointer-events: none; }
.bks-now::before { content: ""; position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
/* Schemavyn */
.bks-sch-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 24px 10px; }
.bks-sch-head h1 { margin: 0 8px 0 0; font-size: 19px; font-weight: 640; min-width: 0; }
.bks-sch-head h1::first-letter { text-transform: uppercase; }
.bks-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--hover); border-radius: 9px; }
.bks-seg button, .bks-seg a { border: 0; background: transparent; padding: 5px 12px; border-radius: 7px; font-size: 12.5px; font-weight: 540; color: var(--muted); cursor: pointer; white-space: nowrap; }
.bks-seg button.on, .bks-seg a.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(20,24,40,.08); }
.bks-strip { display: grid; grid-template-columns: 28px repeat(14, minmax(0, 1fr)) 28px; gap: 4px; align-items: stretch; margin: 0 24px 12px; }
.bks-strip > button { border: 0; background: transparent; color: var(--muted); border-radius: 8px; cursor: pointer; }
.bks-strip > button:hover { background: var(--hover); }
.bks-sd { border: 1px solid var(--line); background: var(--surface); border-radius: 9px; padding: 6px 6px 7px; text-align: start; cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bks-sd small { font-size: 10px; color: var(--faint); text-transform: uppercase; font-weight: 600; }
.bks-sd b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bks-sd i { display: block; height: 4px; border-radius: 3px; background: var(--hover); overflow: hidden; margin-top: 3px; }
.bks-sd i::after { content: ""; display: block; height: 100%; width: var(--free, 0%); background: var(--green); border-radius: 3px; }
.bks-sd.off { background: repeating-linear-gradient(-45deg, var(--surface) 0 5px, var(--surface-2) 5px 10px); }
.bks-sd.off b { color: var(--faint); }
.bks-sd.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.bks-sd.today small { color: var(--red); }
.bks-cal { margin: 0 24px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: auto; position: relative; }
.bks-cols { display: grid; min-width: 100%; }
.bks-colh { position: sticky; top: 0; z-index: 4; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; font-size: 13px; font-weight: 580; padding: 0 8px; }
.bks-colh span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bks-colh.today { color: var(--accent); }
.bks-gutter { position: sticky; left: 0; z-index: 3; background: var(--surface); border-right: 1px solid var(--line); }
.bks-gutter span { position: absolute; right: 8px; font-size: 10.5px; color: var(--faint); transform: translateY(-50%); }
.bks-col { position: relative; border-left: 1px solid var(--line); background-image: linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: 100% var(--hh, 56px); }
.bks-col .bks-blk { left: 4px; right: 4px; top: auto; bottom: auto; }
.bks-col .bks-blk.half { right: 50%; } .bks-col .bks-blk.half2 { left: 50%; }
.bks-slot { position: absolute; left: 0; right: 0; cursor: copy; }
.bks-slot:hover { background: var(--accent-soft); }
.bks-staffs { display: flex; gap: 18px; margin: 0 24px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.bks-staffs button { border: 0; background: transparent; padding: 8px 0 10px; font-size: 13.5px; font-weight: 540; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 7px; }
.bks-staffs button.on { color: var(--ink); border-bottom-color: var(--accent); }
.bks-staffs + .bks-cal { margin-top: 12px; }
.bks-month { display: grid; font-size: 12px; }
.bks-month .mh { position: sticky; top: 0; z-index: 3; background: var(--surface); border-bottom: 1px solid var(--line); height: 42px; display: flex; align-items: center; justify-content: center; gap: 7px; font-weight: 580; font-size: 12.5px; padding: 0 6px; }
.bks-month .md { border-bottom: 1px solid var(--line); padding: 0 8px; display: flex; align-items: center; gap: 8px; color: var(--muted); font-variant-numeric: tabular-nums; height: 36px; position: sticky; left: 0; background: var(--surface); z-index: 2; border-right: 1px solid var(--line); }
.bks-month .md b { color: var(--ink); width: 18px; text-align: end; } .bks-month .md.today b { color: var(--red); }
.bks-month .mc { border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); position: relative; height: 36px; }
.bks-month .mc.off { background: repeating-linear-gradient(-45deg, transparent 0 5px, color-mix(in srgb, var(--line) 70%, transparent) 5px 6px); }
.bks-month .mp { position: absolute; top: 9px; height: 18px; border-radius: 6px; background: var(--c); opacity: .9; cursor: pointer; min-width: 6px; border: 0; padding: 0; }
.bks-month .mp:hover { opacity: 1; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--c); }
.bks-month .md.we { color: var(--faint); }
.bks-list { margin: 0 24px 24px; display: flex; flex-direction: column; gap: 14px; }
.bks-lday { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.bks-lrow { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--line); cursor: pointer; position: relative; }
.bks-lrow:first-child { border-top: 0; } .bks-lrow:hover { background: var(--surface-2); }
.bks-lrow::after { content: ""; position: absolute; right: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--c); }
.bks-ldate { text-align: center; line-height: 1.05; } .bks-ldate b { display: block; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; } .bks-ldate small { font-size: 11.5px; color: var(--muted); }
.bks-lrow h4 { margin: 0; font-size: 13.5px; font-weight: 600; }
.bks-lrow p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.bks-lrow p .t { color: var(--accent); font-weight: 560; } .bks-lrow p .rel { color: var(--red); }
/* Bokningslistan */
.bks-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.bks-table th { text-align: start; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); font-weight: 650; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface); position: sticky; top: 0; z-index: 1; }
.bks-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.bks-table tbody tr { cursor: pointer; } .bks-table tbody tr:hover td { background: var(--surface-2); }
.bks-table tbody tr:last-child td { border-bottom: 0; }
.bks-table td.num, .bks-table th.num { text-align: end; font-variant-numeric: tabular-nums; }
.bks-table .srv { display: flex; align-items: center; gap: 8px; font-weight: 560; }
.bks-table .who { display: flex; align-items: center; gap: 8px; } .bks-table .who .bks-av { width: 24px; height: 24px; font-size: 10px; }
.bks-table .id { color: var(--faint); font-variant-numeric: tabular-nums; width: 1%; }
.bks-tleft { display: inline-flex; height: 22px; align-items: center; padding: 0 7px; border: 1px solid var(--line); border-radius: 6px; font-size: 11.5px; font-weight: 560; white-space: nowrap; }
.bks-tleft.soon { background: var(--saffron-soft); border-color: transparent; color: var(--saffron); }
.bks-tleft.past { color: var(--faint); border-style: dashed; }
.bks-tablewrap { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: auto; }
.bks-pager { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 12px 2px 0; color: var(--muted); font-size: 12.5px; }
.bks-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
/* Panelen för en bokning */
.bks-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-pop);
  z-index: 302; display: flex; flex-direction: column; transform: translateX(105%); transition: transform .18s ease; }
.bks-drawer.open { transform: none; }
.bks-drawer > header { display: flex; align-items: flex-start; gap: 10px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.bks-drawer > header h3 { margin: 0; font-size: 16px; font-weight: 640; line-height: 1.3; }
.bks-drawer > header p { margin: 3px 0 0; color: var(--muted); font-size: 12.5px; }
.bks-drawer .bks-dbody { flex: 1; overflow-y: auto; padding: 16px 20px 24px; }
/* Lådan och skuggan ligger över chattbubblan (z-index 300) så att knapparna längst ner inte döljs. */
.bks-drawer .bks-dfoot { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; gap: 8px; flex-wrap: wrap; }
.bks-dl { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 9px 12px; margin: 0 0 16px; font-size: 13px; }
.bks-dl dt { color: var(--muted); } .bks-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.bks-dsec { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.bks-dsec h4 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); font-weight: 650; }
.bks-hist { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.bks-hist li { display: flex; gap: 10px; padding: 5px 0; color: var(--ink-2); } .bks-hist li time { color: var(--faint); flex: none; width: 96px; font-variant-numeric: tabular-nums; }
.bks-scrim { position: fixed; inset: 0; background: rgba(15,18,28,.22); z-index: 301; opacity: 0; pointer-events: none; transition: opacity .18s; }
.bks-scrim.open { opacity: 1; pointer-events: auto; }
.bks-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bks-chip { border: 1px solid var(--line-strong); background: var(--surface); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; font-weight: 560; cursor: pointer; font-variant-numeric: tabular-nums; }
.bks-chip:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.bks-chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.bks-chips-empty { color: var(--muted); font-size: 12.5px; padding: 6px 0; }
/* Kort: tjänster, personal, platser */
.bks-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.bks-sc { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.bks-sc::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c, transparent); }
.bks-sc .top { padding: 14px 16px 12px; display: flex; gap: 10px; align-items: flex-start; }
.bks-sc .top h3 { margin: 0; font-size: 14px; font-weight: 620; line-height: 1.3; }
.bks-sc .top p { margin: 3px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bks-sc dl { margin: 0; padding: 10px 16px 12px; border-top: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; font-size: 12.5px; }
.bks-sc dt { color: var(--muted); } .bks-sc dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; }
.bks-sc .foot { margin-top: auto; padding: 0 12px 12px; display: flex; gap: 6px; }
.bks-sc .foot .btn { flex: 1; justify-content: center; background: var(--surface-2); border-color: var(--line); }
.bks-sc .foot .btn.icon { flex: 0 0 34px; padding: 0; }
.bks-sc.off { opacity: .66; }
.bks-new { border: 1px dashed var(--line-strong); border-radius: 10px; display: grid; place-items: center; text-align: center; min-height: 190px; color: var(--ink-2); font-weight: 560; gap: 8px; padding: 20px; background: transparent; }
.bks-new:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.bks-new .ic { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin: 0 auto 6px; }
.bks-grouph { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; font-size: 11px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.bks-grouph:first-child { margin-top: 0; }
.bks-grouph::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.bks-week { display: grid; grid-template-columns: repeat(7, 1fr); padding: 10px 16px; border-top: 1px solid var(--line); text-align: center; font-size: 10.5px; color: var(--faint); }
.bks-week span::before { content: ""; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); margin: 0 auto 4px; }
.bks-week span.on { color: var(--ink-2); } .bks-week span.on::before { background: var(--green); }
.bks-today { display: flex; border-top: 1px solid var(--line); }
.bks-today > div { flex: 1; padding: 10px 16px; font-size: 12.5px; } .bks-today > div + div { border-left: 1px solid var(--line); text-align: end; flex: none; width: 110px; }
.bks-today b { display: block; font-size: 13px; font-weight: 600; } .bks-today small { color: var(--muted); font-size: 11.5px; }
/* Formulär med sektioner och meny till höger */
.bks-form { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 18px; align-items: start; max-width: 1080px; }
.bks-form > .main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.bks-form .aside { position: sticky; top: 8px; display: flex; flex-direction: column; gap: 10px; }
.bks-form .aside nav { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; }
.bks-form .aside nav a { padding: 6px 10px; border-radius: 7px; color: var(--muted); font-size: 13px; }
.bks-form .aside nav a:hover { background: var(--hover); color: var(--ink); }
.bks-form .aside .btn.primary { width: 100%; justify-content: center; height: 36px; }
.bks-fs { display: grid; gap: 12px; }
.bks-fs.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bks-fs.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bks-fs.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bks-note { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.bks-colors { display: flex; gap: 6px; flex-wrap: wrap; }
.bks-colors label { position: relative; cursor: pointer; }
.bks-colors input { position: absolute; opacity: 0; pointer-events: none; }
.bks-colors span { display: block; width: 24px; height: 24px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.bks-colors input:checked + span { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c); }
.bks-colors input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.bks-pick { display: flex; flex-direction: column; gap: 6px; }
.bks-pick label { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; background: var(--surface); }
.bks-pick label:hover { border-color: var(--line-strong); }
.bks-pick label:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); }
.bks-pick input { accent-color: var(--accent); }
.bks-pick label small { margin-left: auto; color: var(--muted); font-size: 12px; }
.bks-pick.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.bks-hours { display: flex; flex-direction: column; }
.bks-hr { display: grid; grid-template-columns: 34px 92px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.bks-hr:first-child { border-top: 0; }
.bks-hr .d { font-weight: 560; } .bks-hr .t { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bks-hr .t .input { width: 92px; height: 32px; padding: 0 8px; font-variant-numeric: tabular-nums; }
.bks-hr .t .sep { color: var(--faint); }
.bks-hr .t .second { display: contents; }
.bks-hr:not(.open) .t { opacity: .35; pointer-events: none; }
.bks-hr .closed { color: var(--faint); font-size: 12.5px; text-decoration: line-through; }
.bks-hr.open .closed { display: none; }
.bks-sw { position: relative; width: 34px; height: 20px; flex: none; display: inline-block; }
.bks-sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.bks-sw span { position: absolute; inset: 0; border-radius: 999px; background: var(--line-strong); transition: background .15s; }
.bks-sw span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.bks-sw input:checked + span { background: var(--accent); } .bks-sw input:checked + span::after { transform: translateX(14px); }
.bks-sw input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.bks-tog { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; } .bks-tog b { display: block; font-weight: 560; font-size: 13.5px; } .bks-tog small { color: var(--muted); font-size: 12px; display: block; line-height: 1.45; }
.bks-days { display: flex; flex-wrap: wrap; gap: 10px; }
.bks-day { width: 104px; border: 1px solid var(--line); border-radius: 10px; text-align: center; padding: 10px 6px 8px; position: relative; background: var(--surface); }
.bks-day b { display: block; font-size: 24px; font-weight: 600; line-height: 1; color: var(--red); font-variant-numeric: tabular-nums; }
.bks-day.open b { color: var(--green); }
.bks-day span { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; } .bks-day small { display: block; font-size: 11px; color: var(--faint); margin-top: 2px; min-height: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bks-day form { position: absolute; top: 2px; right: 2px; } .bks-day form button { border: 0; background: transparent; color: var(--faint); cursor: pointer; padding: 3px; border-radius: 6px; line-height: 0; }
.bks-day form button:hover { color: var(--red); background: var(--red-soft); }
.bks-yearh { width: 100%; margin: 6px 0 0; }
.bks-adddays { display: grid; grid-template-columns: repeat(5, minmax(0, auto)) 1fr; gap: 8px; align-items: end; margin-top: 14px; }
.bks-adddays .field { margin: 0; }
.bks-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); }
.bks-row:first-child { border-top: 0; }
.bks-row .grow { flex: 1; min-width: 0; }
.bks-row b { font-weight: 580; } .bks-row small { color: var(--muted); font-size: 12px; display: block; }
.bks-grip { color: var(--faint); cursor: grab; line-height: 0; padding: 4px; border-radius: 6px; } .bks-grip:hover { background: var(--hover); color: var(--ink); }
.bks-row.dragging { opacity: .5; background: var(--accent-soft); }
.bks-provider { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--line); }
.bks-provider:first-child { border-top: 0; }
.bks-provider .logo { width: 44px; height: 30px; border-radius: 7px; display: grid; place-items: center; font-weight: 750; font-size: 11.5px; letter-spacing: -.01em; border: 1px solid var(--line); flex: none; background: var(--surface-2); color: var(--ink-2); }
.bks-provider .grow { flex: 1; min-width: 0; } .bks-provider b { display: block; font-weight: 600; } .bks-provider small { color: var(--muted); font-size: 12px; }
.bks-provider details { width: 100%; }
.bks-copy { display: flex; gap: 6px; align-items: center; }
.bks-copy input { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px; }
.bks-steps { display: flex; flex-direction: column; gap: 6px; }
.bks-step { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 6px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.bks-step .n { width: 22px; height: 22px; border-radius: 50%; background: var(--hover); color: var(--muted); display: grid; place-items: center; font-size: 11px; font-weight: 650; flex: none; }
.bks-step.on .n { background: var(--accent-soft); color: var(--accent); }
.bks-step .grow { flex: 1; font-weight: 560; } .bks-step small { color: var(--faint); font-size: 11.5px; }
.bks-step.fixed { background: var(--surface-2); }
.bks-step.fixed .bks-grip { visibility: hidden; }
.bks-step:not(.on) .grow { color: var(--faint); }
.bks-flowed { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 18px; align-items: start; }
.bks-preview { position: sticky; top: 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.bks-preview .bar { display: flex; align-items: center; gap: 8px; }
.bks-preview iframe { width: 100%; height: 720px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin: 0 auto; display: block; transition: width .2s; }
.bks-preview.mob iframe { width: 390px; max-width: 100%; height: 760px; }
.bks-fc { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.bks-fc h3 { margin: 0; font-size: 14.5px; font-weight: 620; display: flex; align-items: center; gap: 8px; }
.bks-fc .meta { display: flex; gap: 6px; flex-wrap: wrap; }
.bks-fc .actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.bks-locmap { height: 92px; border-bottom: 1px solid var(--line); background:
  linear-gradient(90deg, transparent 0 48%, color-mix(in srgb, var(--line-strong) 70%, transparent) 48% 52%, transparent 52%),
  linear-gradient(0deg, transparent 0 40%, color-mix(in srgb, var(--line-strong) 60%, transparent) 40% 44%, transparent 44%),
  linear-gradient(135deg, var(--accent-soft), var(--surface-2)); display: grid; place-items: center; color: var(--accent); }
dialog.bks-dlg { width: min(640px, calc(100vw - 24px)); }
dialog.bks-dlg .modal-body { max-height: min(72vh, 720px); overflow-y: auto; }
.bks-newtimes { min-height: 40px; }
@media (max-width: 1100px) {
  .bks-grid.cols-ov { grid-template-columns: 1fr; }
  .bks-flowed { grid-template-columns: 1fr; } .bks-preview { position: static; }
}
@media (max-width: 900px) {
  .bks-form { grid-template-columns: 1fr; } .bks-form .aside { position: static; order: -1; } .bks-form .aside nav { display: none; }
  .bks-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bks-kpi:nth-child(3) { border-left: 0; } .bks-kpi:nth-child(n+3) { border-top: 1px solid var(--line); }
  .bks-setup { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .bk .cx-nav { overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
  .bk .cx-nav a { flex: none; padding: 0 11px; }
  .bk .cx-navh { display: none; }
  .bks-head, .bks-sch-head { padding: 12px 16px 8px; }
  .bks-body { padding: 4px 16px 90px; }
  .bks-tabs { margin: 0 16px; }
  .bks-strip { margin: 0 16px 10px; grid-template-columns: 24px repeat(7, minmax(0, 1fr)) 24px; }
  .bks-strip .bks-sd:nth-child(n+9):not(:last-child) { display: none; }
  .bks-cal, .bks-list { margin: 0 16px 90px; } .bks-staffs { margin: 0 16px; }
  .bks-fs.two, .bks-fs.three, .bks-fs.four { grid-template-columns: 1fr; }
  .bks-adddays { grid-template-columns: 1fr 1fr; }
  .bks-table .hide-m { display: none; }
  .bks-lrow { grid-template-columns: 54px minmax(0, 1fr); } .bks-lrow > :last-child { display: none; }
  .bks-tl-who { width: 110px; } .bks-tl-hours { margin-left: 110px; }
}

/* ── 4.149.0: Bokningar – väntelista, incheckning, min dag, rapporter, formulär och prisregler ───────── */
.bks-callout.warn { background: var(--red-soft); }
.bks-callout > span { flex: 1; min-width: 0; }
.bks-callout > a { white-space: nowrap; font-weight: 600; }
.bks-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.bks-checks .cb { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.bks-row.on { background: var(--active); }
/* Formulärmallens frågor */
.bks-qlist { display: grid; gap: 8px; }
.bks-q { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto auto; gap: 6px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 7px; }
.bks-q textarea { grid-column: 1 / -1; }
.bks-q .cb { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; white-space: nowrap; }
/* Pris efter dag och tid */
.bks-rules { display: grid; gap: 8px; }
.bks-rule { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bks-rule .input[type=time] { width: 104px; }
.bks-rule .sep { color: var(--faint); }
.bks-wdays { display: inline-flex; gap: 3px; margin-right: 6px; }
.bks-wdays label { position: relative; cursor: pointer; }
.bks-wdays input { position: absolute; opacity: 0; pointer-events: none; }
.bks-wdays span { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--muted); }
.bks-wdays input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.bks-wdays input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Rapporter */
.bks-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.bks-kpis.six { grid-template-columns: repeat(6, minmax(0, 1fr)); border-bottom: 0; }
.bks-kpis.six .bks-kpi b { font-size: 19px; }
.bks-bar { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; padding: 5px 0; }
.bks-bar .l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.bks-bar .b { height: 8px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.bks-bar .b i { display: block; height: 100%; border-radius: 5px; background: var(--accent); min-width: 2px; }
.bks-bar .v { font-variant-numeric: tabular-nums; font-weight: 600; text-align: end; white-space: nowrap; }
.bks-bar .v small { color: var(--muted); font-weight: 500; }
.bks-heat { display: grid; grid-template-columns: 34px repeat(var(--cols), minmax(18px, 1fr)); gap: 3px; font-size: 11px; overflow-x: auto; }
.bks-heat .hh { text-align: center; color: var(--faint); font-variant-numeric: tabular-nums; }
.bks-heat .dd { color: var(--muted); font-weight: 600; align-self: center; }
.bks-heat i { font-style: normal; display: grid; place-items: center; height: 24px; border-radius: 5px; font-weight: 600; color: var(--ink);
  background: color-mix(in srgb, var(--accent) calc(var(--a) * 85%), var(--surface-2)); }
/* Incheckning */
.bks-checked { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 10px; background: var(--green-soft); margin-bottom: 18px; }
.bks-checked .ic { color: var(--green); display: flex; }
.bks-checked > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bks-checked b { font-size: 15px; } .bks-checked span { color: var(--ink-2); font-size: 13px; }
/* Min dag */
.bks-dayhead h1 small { font-weight: 500; }
.bks-myday { max-width: 720px; }
.bks-daysum { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.bks-daysum > div { display: flex; flex-direction: column; } .bks-daysum small { color: var(--muted); font-size: 12.5px; }
.bks-dayl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bks-dayi { display: flex; align-items: stretch; gap: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 10px 12px; border-left: 3px solid var(--c); }
.bks-dayi.past { opacity: .62; }
.bks-dayi.now { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.bks-dayi .t { display: flex; flex-direction: column; width: 46px; flex: none; font-variant-numeric: tabular-nums; }
.bks-dayi .t b { font-size: 15px; } .bks-dayi .t span { color: var(--faint); font-size: 12px; }
.bks-dayi .c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: start; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
.bks-dayi .c > span { color: var(--muted); font-size: 13px; }
.bks-dayi .c .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.bks-dayi .c em { font-style: normal; font-size: 12.5px; color: var(--ink-2); background: var(--surface-2); border-radius: 6px; padding: 4px 8px; margin-top: 4px; }
.bks-dayi > .btn { align-self: center; }
/* Kundkortet */
.cxp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 2px 0 8px; }
.cxp-stats span { display: flex; flex-direction: column; font-size: 11.5px; color: var(--muted); background: var(--surface-2); border-radius: 7px; padding: 7px 9px; }
.cxp-stats b { font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.cxp-stats .bad b { color: var(--red); }
@media (max-width: 760px) {
  .bks-grid.cols-2 { grid-template-columns: 1fr; }
  .bks-kpis.six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bks-kpis.six .bks-kpi:nth-child(odd) { border-left: 0; }
  .bks-kpis.six .bks-kpi:nth-child(n+3) { border-top: 1px solid var(--line); }
  .bks-q { grid-template-columns: minmax(0, 1fr) auto; }
  .bks-q select { grid-column: 1; } .bks-q .cb { grid-column: 1; }
  .bks-bar { grid-template-columns: minmax(0, 96px) minmax(0, 1fr) auto; }
  .cxp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 4.150.0: Studio – schemat, dagremsan och bokningspanelen ─────────────────────────────────────
   Samma Front-yta som inkorgen: tunna linjer, en accentfärg där den betyder något (vald dag, vald bokning,
   primärknapp), statusen som en liten prick. Allt bygger på temats variabler så mörkt läge följer med. */
.bks-strip { gap: 6px; }
.bks-sd { border-radius: 7px; padding: 7px 9px 8px; gap: 3px; background: var(--surface); border-color: var(--line); }
.bks-sd small { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 4px; height: 15px; overflow: hidden; text-transform: none; font-size: 11px; font-weight: 550; color: var(--muted); }
.bks-sd small em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--faint); white-space: nowrap; }
.bks-sd b { font-size: 15px; }
.bks-sd i { height: 4px; border-radius: 4px; background: var(--hover); margin-top: 2px; }
.bks-sd i::after { width: var(--used, 0%); background: var(--accent); border-radius: 4px; }
.bks-sd.full i::after { background: var(--red); }
.bks-sd.full small em { color: var(--red); }
.bks-sd.on { background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.bks-sd.today small span { color: var(--red); font-weight: 650; }
.bks-sd.today small { color: inherit; }

.bks-colh.studio { justify-content: flex-start; gap: 9px; padding: 0 12px; height: 52px; }
.bks-colh-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.bks-colh-t b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bks-colh-t small { font-size: 11.5px; font-weight: 450; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bks-blk { border: 0; border-radius: 7px; padding: 6px 9px; background: color-mix(in srgb, var(--c) 11%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 20%, var(--surface)); text-align: start; overflow: hidden; color: var(--ink); }
.bks-blk b { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; min-width: 0; }
.bks-blk b small { font-weight: 450; margin-left: 2px; overflow: hidden; text-overflow: ellipsis; }
.bks-blk small { display: block; margin-top: 2px; color: var(--ink-2); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.bks-blk.tiny { padding-top: 3px; padding-bottom: 3px; }
.bks-blk.tiny b { font-size: 12px; }
.bks-st { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--green); font-style: normal; }
.bks-blk.st-wait .bks-st { background: var(--saffron); }
.bks-blk.st-in .bks-st { background: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.bks-blk.st-done .bks-st { background: var(--faint); }
.bks-blk.st-no .bks-st { background: var(--red); }
.bks-blk.wait { background: color-mix(in srgb, var(--saffron) 10%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--saffron) 26%, var(--surface)); }
.bks-blk.done { opacity: .6; }
.bks-blk:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, var(--surface)); }
.bks-blk.sel, .bks-blk.sel:hover { background: var(--surface); box-shadow: 0 0 0 1.5px var(--accent); opacity: 1; z-index: 3; }
.bks-tl-lane .bks-blk { padding: 5px 8px; }
[data-bk-open].sel:not(.bks-blk) { background: var(--accent-soft); }

/* Bokningspanelen: status och nummer överst, kunden, priset rad för rad och knapparna längst ner */
.bks-drawer { width: min(400px, 100vw); }
.bks-drawer > header { display: block; padding: 16px 20px 14px; }
.bks-dtop { display: flex; align-items: center; gap: 8px; margin: -4px -8px 8px 0; }
.bks-dtop .grow { flex: 1; }
.bks-did { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bks-drawer > header h3 { font-size: 16px; font-weight: 600; }
.bks-drawer > header p { font-size: 13px; color: var(--ink-2); margin-top: 3px; }
.bks-drawer .bks-dbody { padding: 0 20px 20px; }
.bks-dsec.first { border-top: 0; margin-top: 0; }
.bks-dbody > .bks-dsec { padding-top: 14px; margin-top: 0; }
.bks-dbody > .bks-dsec + .bks-dsec { margin-top: 14px; }
.bks-cust { display: flex; align-items: center; gap: 10px; }
.bks-cust > .bks-av { width: 36px; height: 36px; font-size: 12px; }
.bks-cust-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.bks-cust-t b { font-size: 13.5px; font-weight: 600; }
.bks-cust-t small { font-size: 12px; color: var(--muted); }
.bks-cust-c { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 3px; font-size: 12px; }
.bks-cust-c a { color: var(--ink-2); text-decoration: none; overflow-wrap: anywhere; }
.bks-cust-c a:hover { color: var(--accent); }
.bks-dnote { margin-top: 12px; background: var(--hover); border-radius: 7px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; }
.bks-dwarn { margin-top: 10px; background: var(--red-soft); color: var(--red); border-radius: 7px; padding: 8px 12px; font-size: 12.5px; font-weight: 550; }
.bks-price > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 3px 0; }
.bks-price > div span:first-child { color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.bks-price > div span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bks-price > .tot { font-weight: 600; margin-top: 6px; padding-top: 9px; border-top: 1px dashed var(--line-strong); }
.bks-price > .tot span:first-child { color: var(--ink); }
.bks-pay { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.bks-pay.ok { color: var(--green); } .bks-pay.wait { color: var(--saffron); }
.bks-dbody .bks-dl { margin: 0; grid-template-columns: 96px minmax(0, 1fr); gap: 7px 12px; }
.bks-drawer .bks-dfoot { flex-direction: column; align-items: stretch; gap: 8px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); }
.bks-drawer .bks-dfoot > .btn.primary { height: 36px; justify-content: center; }
.bks-dpair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bks-dpair.one { grid-template-columns: 1fr; }
.bks-dpair .btn { height: 34px; justify-content: center; }
.bks-dmore { display: flex; flex-wrap: wrap; gap: 2px 4px; justify-content: center; }
.bks-drawer.nofoot .bks-dfoot { display: none; }

/* Breda skärmar: panelen dockas bredvid schemat utan mörk bakgrund, så man kan klicka vidare */
@media (min-width: 1280px) {
  body.bks-docked .bks-scrim { opacity: 0 !important; pointer-events: none !important; }
  body.bks-docked .bks-drawer { box-shadow: none; top: var(--dk-t, 0); right: var(--dk-r, 0); bottom: var(--dk-b, 0); border-radius: 0 12px 12px 0; }
  body.bks-docked .bks-strip { grid-template-columns: 28px repeat(7, minmax(0, 1fr)) 28px; }
  body.bks-docked .bks-strip .bks-sd:nth-child(n+9):not(:last-child) { display: none; }
  body.bks-docked .page.bk { padding-right: 400px; transition: padding .18s ease; }
}
.bks-dpair .btn.danger-text { color: var(--red); } .bks-dpair .btn.danger-text:hover { background: var(--red-soft); }

/* ── 4.151.0: en meny för kalendern och bokningarna, flikar för sidor som hör ihop ─────────────────
   Översikt, Kalender, Schema, Bokningar (Möten som flik), Min dag, Väntelista, Kunder och Inställningar längst ner. */
.cx-nav2 a { border-radius: 7px; }
.cx-nav2 a.on { box-shadow: 0 0 0 1px var(--line); }
.cx-navsep { display: block; height: 1px; background: var(--line); margin: 8px 10px; }
.cx-tabs { display: flex; align-items: stretch; gap: 20px; height: 44px; padding: 0 24px; border-bottom: 1px solid var(--line); flex: none; overflow-x: auto; scrollbar-width: none; }
.cx-tabs::-webkit-scrollbar { display: none; }
.cx-tabs a { position: relative; display: flex; align-items: center; font-size: 13px; font-weight: 500; color: var(--muted); text-decoration: none; white-space: nowrap; }
.cx-tabs a:hover { color: var(--ink); }
.cx-tabs a.on { color: var(--ink); font-weight: 600; }
.cx-tabs a.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }
/* Kalenderns möten i samma Studio-stil som bokningarna: tonad yta med en tunn ram i mötets färg */
.cal-col > .cal-ev.cx-ev { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, var(--surface)), 0 0 0 1px var(--surface); }
.cal-col > .cal-ev.cx-ev:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, var(--surface)), 0 0 0 1px var(--surface); }
@media (max-width: 760px) {
  .cx-nav2 { overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
  .cx-nav2::-webkit-scrollbar { display: none; }
  .cx-nav2 a { flex: none; padding: 0 11px; }
  .cx-nav2 .cx-navsep { display: none; }
  .cx-tabs { padding: 0 16px; gap: 16px; }
}
/* Tjänstekorten: tjänstens färg som en prick vid namnet i stället för en kant längs sidan */
.bks-sc::before { display: none; }
.bks-sc .top h3 { display: flex; align-items: center; gap: 8px; }
.bks-sc .top h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--faint)); flex: none; }
.bks-sc:hover { border-color: var(--line-strong); }
.bks-dayi { border-left-width: 1px; }

/* ── 4.152.0: botens mål ─────────────────────────────────────────────────────────────────────────
   Två tydliga val som kort, områdena som rader, ett exempel på samtalet och hur ärendet ser ut i inkorgen. */
.goal-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.goal-opt { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.goal-opt:hover { border-color: var(--line-strong); }
.goal-opt input { position: absolute; opacity: 0; pointer-events: none; }
.goal-opt:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-soft); }
.goal-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.goal-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; font-size: 18px; flex: none; }
.goal-opt:has(input:checked) .goal-ic { background: var(--surface); }
.goal-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.goal-t b { font-size: 14px; font-weight: 600; }
.goal-t em { font-style: normal; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.goal-lead { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.goal-lead[hidden] { display: none; }
.goal-areas { display: flex; flex-direction: column; gap: 6px; }
.goal-area { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr) 32px; gap: 6px; align-items: center; }
.goal-area .input { min-width: 0; }
.goal-area > input:first-child { text-align: center; }
.goal-area-h span { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.goal-chat { display: flex; flex-direction: column; gap: 6px; padding: 14px; background: var(--surface-2); border-radius: 10px; max-height: 430px; overflow-y: auto; }
.gb { max-width: 82%; padding: 8px 12px; border-radius: 14px; font-size: 13px; line-height: 1.45; }
.gb.ai { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.gb.me { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.gb i { color: var(--muted); }
.goal-ticket { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ink-2); }
.goal-ticket b { font-size: 13.5px; color: var(--ink); font-weight: 600; }
.goal-ticket-h { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.goal-tag { align-self: flex-start; margin-top: 4px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 5px; color: var(--green); background: var(--green-soft); }
.goal-badge { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; margin: 2px 0 4px; font-size: 12px; font-weight: 550; padding: 3px 8px; border-radius: 5px; background: var(--hover); color: var(--ink-2); text-decoration: none; }
.goal-badge.lead { background: var(--green-soft); color: var(--green); }
@media (max-width: 900px) {
  .goal-opts, .goal-lead { grid-template-columns: 1fr; }
  .goal-area { grid-template-columns: 52px minmax(0, 1fr) 32px; }
  .goal-area > :nth-child(3), .goal-area > :nth-child(4) { grid-column: 1 / span 2; }
  .goal-area-h { display: none; }
}
@media (max-width: 900px) { .goal-area > :last-child { grid-column: 3; grid-row: 1; } }
/* 4.153.0: tre mål, regler som gäller alla mål, och delar som bara visas för ett av målen */
.goal-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.goal-rules { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.goal-rules-h { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.goal-form[data-goal="lead"] [data-only="call"], .goal-form[data-goal="call"] [data-only="lead"], .goal-form[data-goal="answer"] [data-only] { display: none !important; }
@media (max-width: 1100px) { .goal-opts { grid-template-columns: 1fr; } }

/* 4.154.0: Områden i ett eget kort för alla mål – knappen och hjälptexten under listan, inte på samma rad */
div.field.goal-areas-f { display: flex; flex-direction: column; gap: 8px; }
.goal-form textarea[name=style] { min-height: 120px; resize: vertical; line-height: 1.5; unicode-bidi: plaintext; }

/* 4.155.0: chattbotens sida – inställningarna till vänster, en riktig testchatt till höger (klistrad vid rullning) */
.bot-split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.bot-main { min-width: 0; }
.bot-main .goal-opts { grid-template-columns: 1fr; }
.bot-try { position: sticky; top: 12px; min-width: 0; }
.bt2-card { display: flex; flex-direction: column; height: calc(100vh - 330px); min-height: 440px; max-height: 700px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; }
.bt2-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border-bottom: 1px solid var(--line); }
.bt2-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.bt2-ttl { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.bt2-ttl b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt2-ttl span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.bt2-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }
.bt2-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 6px; background: var(--surface-2); scroll-behavior: smooth; }
.bt2-msg { max-width: 86%; padding: 8px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.bt2-msg.ai { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.bt2-msg.me { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 5px; margin-top: 6px; }
.bt2-msg.err { align-self: stretch; background: var(--red-soft); color: var(--red); border-radius: 10px; font-size: 12.5px; }
.bt2-meta { align-self: flex-start; margin: 0 0 4px 4px; font-size: 11px; line-height: 1.4; color: var(--muted); }
.bt2-note { align-self: center; padding: 4px 10px; border-radius: 7px; background: var(--hover); font-size: 12px; color: var(--ink-2); }
.bt2-note.warn { background: var(--saffron-soft); }
.bt2-ticket { align-self: stretch; display: flex; flex-direction: column; gap: 2px; margin: 4px 0; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: 10px; background: var(--surface); font-size: 12px; color: var(--muted); }
.bt2-ticket b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.bt2-ticket em { font-style: normal; font-size: 11.5px; }
.bt2-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 11px 12px; border-radius: 14px; border-bottom-left-radius: 5px; background: var(--surface); border: 1px solid var(--line); }
.bt2-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: bt2dot 1.1s infinite ease-in-out; }
.bt2-typing i:nth-child(2) { animation-delay: .15s; } .bt2-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bt2dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .bt2-typing i { animation: none; } }
.bt2-empty { margin: auto; max-width: 300px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.bt2-empty-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--accent); margin-bottom: 4px; }
.bt2-empty b { font-size: 14px; font-weight: 600; }
.bt2-empty p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.bt2-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.bt2-chip { padding: 5px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); font: inherit; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.bt2-chip:hover { border-color: var(--accent-line); color: var(--accent); }
.bt2-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); background: var(--surface); }
.bt2-input .input { flex: 1; min-width: 0; }
.bot-rules { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.bot-rules > svg { flex: none; margin-top: 2px; color: var(--muted); }
.bot-rules b { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.goal-next { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); font-size: 12.5px; color: var(--ink-2); }
.goal-next > svg { flex: none; margin-top: 1px; color: var(--accent); }
.goal-next a { color: var(--accent); font-weight: 600; }
@media (max-width: 1100px) {
  .bot-split { grid-template-columns: 1fr; }
  .bot-try { position: static; }
  .bt2-card { height: 560px; }
}

/* 4.155.3: ångra en avregistrering – liten och neutral bredvid den gröna markeringen */
.unsub-undo { display: inline-flex; align-items: center; font: inherit; font-size: 11.5px; font-weight: 550; color: var(--muted); padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; white-space: nowrap; }
.unsub-undo:hover { color: var(--ink); border-color: var(--line-strong); }

/* 4.155.4: påminnelsen när kunden slutar svara – brytaren och tiden på samma rad */
.bot-remind { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }
.bot-remind .switch { flex: 1 1 320px; }
.bot-remind-after { width: 160px; }
.goal-form:has(input[name=remind]:not(:checked)) .bot-remind-after { opacity: .5; }

/* ══ 4.157.0: appraden i ärendets högerpanel (som i Front) ═════════════════════════════════════
   Panelen delas i rutor (Detaljer, Möten, varje kopplad app) och en smal rad med ikoner längst till höger.
   Raden läggs till på bredden – innehållet i rutorna behåller sin gamla bredd. Funktionella regler
   (dold ruta, rullning) har !important så att äldre lager inte kan slå ut dem. */
.details.has-rail { display: flex !important; flex-direction: row; align-items: stretch; overflow: hidden !important; width: 272px; }
@media (min-width: 1500px) { .details.has-rail { width: 292px; } }
@media (min-width: 761px) { .frame > .details.has-rail { width: 282px; } }
@media (min-width: 1500px) { .frame > .details.has-rail { width: 292px; } }
.details.has-rail .dpanes { flex: 1; min-width: 0; overflow-x: hidden; overflow-y: auto; }
.details.has-rail .dpane[hidden] { display: none !important; }
.drail { flex: none; width: 42px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0;
  border-left: 1px solid var(--line); background: var(--surface); }
.drail-btn { position: relative; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--muted); cursor: pointer; transition: background .12s, color .12s; }
.drail-btn:hover { background: var(--hover); color: var(--ink); }
.drail-btn.on { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); }
.drail-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.drail-btn .ig-logo { border-radius: 5px; overflow: hidden; display: grid; place-items: center; }
.drail-btn .ig-logo img { width: 100%; height: 100%; object-fit: contain; }
.drail-btn .ig-mono { font-weight: 700; letter-spacing: -.02em; }
.drail-btn:not(.on) .ig-logo { filter: saturate(.92); }
/* Våra egna (Detaljer, Möten) först, de kopplade apparna under en tunn linje */
.drail-btn[data-rail="moten"] { margin-bottom: 7px; }
.drail-btn[data-rail="moten"]:not(:last-child)::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -6px; height: 1px; background: var(--line); }
.drail-dot { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }
.dpane > section:first-child h4 { margin-top: 0; }
@media (max-width: 760px) { .details.has-rail.force { width: auto !important; } }
/* Integritet (GDPR) i linje med rubrikerna ovanför (stod tidigare kant i kant, "Visa" klipptes mot appraden) */
.details.has-rail .gdpr-fold { padding-left: 12px; padding-right: 12px; }
/* Utan uppladdad logotyp: förkortningen läsbar i 20 px-rutan */
.drail-btn .ig-mono { font-size: 9.5px !important; line-height: 1; }

/* ══ 4.158.0: appraden syns alltid ═══════════════════════════════════════════════════════════
   Bred skärm: panelen kan fällas ihop till bara raden (klick på den öppna appen). 761–1280 px: bara raden står kvar
   i layouten och appen öppnas som en ruta till vänster om den – tråden hoppar inte. Mobil: som förut. */
.details.has-rail .dpanes[hidden] { display: none !important; }
@media (min-width: 1281px) {
  .details.has-rail.collapsed, .frame > .details.has-rail.collapsed { width: 42px !important; padding-left: 0 !important; }
}
.details.has-rail.collapsed .drail-btn.on { background: transparent; color: var(--muted); box-shadow: none; }
.details.has-rail.collapsed .drail-btn.on:hover { background: var(--hover); color: var(--ink); }
@media (min-width: 761px) and (max-width: 1280px) {
  .details.has-rail, .frame > .details.has-rail { display: flex !important; width: 42px !important; padding-left: 0 !important; position: relative; overflow: visible !important; }
  .details.has-rail.force, .frame > .details.has-rail.force { position: relative !important; inset: auto !important; width: 42px !important; border-radius: 0; box-shadow: none; z-index: 70; }
  .details.has-rail.force .dpanes { position: absolute; top: 0; bottom: 0; right: 42px; width: 268px; background: var(--surface);
    border: 1px solid var(--line); border-radius: 10px 0 0 10px; box-shadow: var(--shadow-pop, 0 10px 30px rgba(20,24,40,.16)); z-index: 2; }
  .details.has-rail.force .drail-btn.on { background: var(--accent-soft); color: var(--accent); }
}
@media (max-width: 760px) { .details.rail-empty { display: none !important; } }
/* Rutan utan öppet ärende */
.drail-empty p { font-size: 12.5px; line-height: 1.5; margin: 0 0 10px; }
@media (max-width: 760px) { .details.has-rail:not(.force) { display: none !important; } }

/* 4.159.0: planens pris i fyra valutor – två kolumner (månad, år), en rad per valuta */
.pm-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pm-pcol { border: 1px solid var(--line); border-radius: var(--r-lg, 10px); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pm-pcol h5 { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--ink); display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pm-pcol h5 small { font-weight: 400; font-size: 12px; color: var(--muted); }
.pm-pr { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; }
.pm-cur { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.pm-cur b { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pm-cur small { font-size: 11.5px; color: var(--muted); }
.pm-pr .input.num { width: 130px; text-align: right; font-variant-numeric: tabular-nums; }
.pm-pr .input.num::placeholder { color: var(--muted); opacity: .75; }
@media (max-width: 640px) { .pm-prices { grid-template-columns: 1fr; } }

/* 4.160.0: "Gör en uppgift av ärendet" – egna uppgifter överst och projektens ikoner */
.pop-menu .tp-item { gap: 10px; min-width: 240px; }
.pop-menu .tp-ico { width: 26px; height: 26px; flex: none; border-radius: 7px; background: var(--hover); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.pop-menu .tp-ico .lib-ico.emoji { font-size: 14px; }
.pop-menu .tp-item[data-p="mina"] .tp-ico { background: var(--accent-soft); color: var(--accent); }
.pop-menu .tp-txt { display: flex; flex-direction: column; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-menu .tp-txt small { color: var(--muted); font-size: 11.5px; }

/* ── 4.160.0: Fortnox-panelen i ärendet – mörkgrön rubrik i Fortnox färg, en ruta per faktura ── */
.fx2 { display: flex; flex-direction: column; gap: 10px; }
.fx2 [data-fx-body] { display: flex; flex-direction: column; gap: 10px; }
.fx2-head { background: #0B3B2A; color: #FFFFFF; border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.fx2-head.fx2-skel .od-skel { background: rgba(255, 255, 255, .12); }
.fx2-brand { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #A7D7BF; font-weight: 600; letter-spacing: .02em; margin-bottom: 6px; }
.fx2-brand .ig-logo { border-radius: 6px; overflow: hidden; flex: none; }
.fx2-brand .ig-logo img { width: 100%; height: 100%; object-fit: contain; }
.fx2-brand > span { flex: 1; }
.fx2-icon { width: 28px; height: 28px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, .18); background: transparent; color: #CFE9DC; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.fx2-icon:hover { background: rgba(255, 255, 255, .08); color: #FFFFFF; }
.fx2-sub { font-size: 12px; color: #A7D7BF; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fx2-link { border: 0; background: none; padding: 0; color: #FFFFFF; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.fx2-name { font-size: 15px; font-weight: 600; color: #FFFFFF; overflow: hidden; text-overflow: ellipsis; }
.fx2-msg { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; color: #CFE9DC; }
.fx2-msg a { color: #FFFFFF; }
.fx2-total { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 6px 8px; margin-top: 8px; }
.fx2-total span { font-size: 12px; color: #A7D7BF; }
.fx2-total b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: #FFFFFF; line-height: 1.2; white-space: nowrap; }
.fx2-chip { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.fx2-chip.bad { background: #FF6B6B; color: #2A0B0B; }
.fx2-chip.wait { background: #FFD27A; color: #3A2A00; }
.fx2-chip.ok { background: #2BD47F; color: #0B3B2A; }
.fx2-list { display: flex; flex-direction: column; gap: 10px; }
.fx2-inv { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.fx2-inv-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 11px 12px; }
.fx2-inv-top .fx2-ico { grid-row: span 2; }
.fx2-inv.t-bad { border-color: color-mix(in srgb, #D14343 30%, var(--line)); }
.fx2-inv.t-bad .fx2-inv-top { background: color-mix(in srgb, #D14343 6%, var(--surface)); }
.fx2-inv.t-ok { border-color: color-mix(in srgb, #1F9D55 25%, var(--line)); }
.fx2-inv.t-ok .fx2-inv-top { background: color-mix(in srgb, #1F9D55 5%, var(--surface)); }
.fx2-inv.t-wait .fx2-inv-top { background: color-mix(in srgb, #D99A16 6%, var(--surface)); }
.fx2-ico { width: 30px; height: 30px; border-radius: 8px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--hover); color: var(--muted); }
.t-bad .fx2-ico { background: color-mix(in srgb, #D14343 14%, var(--surface)); color: #C23434; }
.t-ok .fx2-ico { background: color-mix(in srgb, #1F9D55 14%, var(--surface)); color: #167A41; }
.t-wait .fx2-ico { background: color-mix(in srgb, #D99A16 16%, var(--surface)); color: #9A6A00; }
.fx2-inv-t { display: contents; }
.fx2-inv-t b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; grid-column: 2; grid-row: 1; }
.fx2-inv-t span { font-size: 12px; color: var(--muted); font-weight: 500; grid-column: 2 / 4; grid-row: 2; }
.t-bad .fx2-inv-t span { color: #C23434; }
.t-ok .fx2-inv-t span { color: #167A41; }
.fx2-amt { font-size: 13.5px; white-space: nowrap; grid-column: 3; grid-row: 1; }
.fx2-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 12px; padding: 11px 12px; border-top: 1px solid var(--line); font-size: 12px; }
.fx2-kv span { display: block; color: var(--muted); }
.fx2-kv b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.fx2-kv b.bad { color: #C23434; }
.fx2-kv b.num { letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.fx2-acts { display: flex; gap: 6px; padding: 0 12px 12px; }
.fx2-btn { flex: 1; height: 30px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 7px; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
.fx2-btn:hover { background: var(--hover); }
.fx2-btn.go { border-color: #0E7A4B; background: color-mix(in srgb, #0E7A4B 9%, var(--surface)); color: #0B5A37; font-weight: 600; }
.fx2-btn.is-busy { opacity: .6; cursor: progress; }
.fx2-all { border: 0; background: none; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; padding: 4px 0; text-align: left; }
.fx2-all span { background: var(--hover); border-radius: 20px; padding: 1px 7px; margin-left: 4px; }
.fx2-empty, .fx2-created { margin: 0; font-size: 12.5px; color: var(--muted); }
.fx2-foot { display: flex; gap: 8px; }
.fx2-main { flex: 1; height: 36px; border: 0; border-radius: 8px; background: #0B3B2A; color: #FFFFFF; font: inherit; font-weight: 600; cursor: pointer; }
.fx2-main:hover { background: #0E4A35; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fx2-btn.go { color: #6EE0A4; } }
:root[data-theme="dark"] .fx2-btn.go, :root[data-theme="night"] .fx2-btn.go { color: #6EE0A4; }
/* PDF:en i en ruta */
dialog.fx-pdf-d { width: min(880px, calc(100vw - 24px)); }
.fx-pdf-wrap { height: min(78vh, 900px); background: var(--bg); position: relative; }
.fx-pdf-wrap iframe { width: 100%; height: 100%; border: 0; display: block; background: #FFFFFF; }
.fx-pdf-load { padding: 40px 24px; text-align: center; color: var(--muted); font-size: 13px; }
/* Kortet i svaret medan man skriver – kan inte redigeras, bara tas bort */
[data-rich] .bd-fx-card { cursor: default; user-select: none; }
/* Smal högerpanel: ikonen får ge plats åt fakturanumret och beloppet (färgen visar redan statusen) */
.fx2-list { container-type: inline-size; }
@container (max-width: 270px) {
  .fx2-inv-top { grid-template-columns: minmax(0, 1fr) auto; }
  .fx2-inv-top .fx2-ico { display: none; }
  .fx2-inv-t b { grid-column: 1; }
  .fx2-inv-t span { grid-column: 1 / 3; }
  .fx2-amt { grid-column: 2; }
}

/* ── 4.160.0: integrationssidan – banner i integrationens färg, uppgifter i en rad, två rutor ── */
.ig-page2 { padding: 0 !important; }
.ig-banner { background: color-mix(in srgb, var(--ig, #3B3F4A) 42%, #07110D); color: #FFFFFF; padding: 26px 24px 72px; }
.ig-banner-in { max-width: 960px; margin: 0 auto; }
.ig-crumbs { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgba(255, 255, 255, .7); flex-wrap: wrap; }
.ig-crumbs a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.ig-crumbs a:hover { color: #FFFFFF; text-decoration: underline; }
.ig-crumbs svg { opacity: .6; }
.ig-banner-row { display: flex; align-items: center; gap: 20px; margin-top: 18px; }
.ig-banner-logo { width: 76px; height: 76px; flex: none; border-radius: 18px; background: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 0 rgba(0, 0, 0, .08); overflow: hidden; }
.ig-banner-logo .ig-logo { border-radius: 14px; }
.ig-banner-logo .ig-logo img { width: 100%; height: 100%; object-fit: contain; }
.ig-banner-txt { flex: 1; min-width: 0; }
.ig-banner-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ig-banner-title h1 { margin: 0; font-size: 26px; letter-spacing: -.02em; color: #FFFFFF; }
.ig-banner-txt p { margin: 6px 0 0; color: rgba(255, 255, 255, .82); line-height: 1.5; max-width: 600px; }
.ig-pill { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.ig-pill.on { background: #2BD47F; color: #0B3B2A; }
.ig-pill.bad { background: #FF6B6B; color: #2A0B0B; }
.ig-body { max-width: 1008px !important; margin: -48px auto 40px !important; padding: 0 24px !important; position: relative; }
.ig-body > .card:first-child, .ig-body > .ig-facts:first-child { margin-top: 0; }
.ig-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 !important; overflow: hidden; }
.ig-facts > div { padding: 16px 18px; border-right: 1px solid var(--line); min-width: 0; }
.ig-facts > div:last-child { border-right: 0; }
.ig-facts span { display: block; font-size: 12px; color: var(--muted); }
.ig-facts b { display: block; margin-top: 4px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-facts small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-tools { display: flex; gap: 8px; justify-content: flex-end; margin: 12px 0; }
.ig-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 12px; align-items: stretch; }
.ig-box { padding: 20px !important; display: flex; flex-direction: column; gap: 10px; }
.ig-detail .ig-grid2 .card + .card { margin-top: 0; }
.ig-box h2 { margin: 0; font-size: 15px; }
.ig-box > p.muted { margin: -4px 0 4px; font-size: 12.5px; line-height: 1.5; }
.ig-radios { display: flex; flex-direction: column; gap: 8px; }
.ig-radio { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; cursor: pointer; }
.ig-radio span { flex: 1; font-weight: 500; }
.ig-radio small { color: var(--muted); font-size: 12px; }
.ig-radio:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.ig-radio:has(input:checked) span { font-weight: 600; }
.ig-check small { display: block; }
.ig-last { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 12.5px; color: var(--muted); }
.btn.ig-dark { background: #0B3B2A; color: #FFFFFF; border-color: #0B3B2A; }
.btn.ig-dark:hover { background: #0E4A35; }
.ig-note-box { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 13px; color: var(--ink-2, var(--ink)); }
.ig-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.ig-foot .ig-perm { flex: 1; min-width: 260px; margin: 0 !important; }
.ig-access { margin-top: 12px; }
@media (max-width: 760px) {
  .ig-banner { padding: 18px 16px 64px; }
  .ig-banner-row { gap: 14px; }
  .ig-banner-logo { width: 56px; height: 56px; border-radius: 14px; }
  .ig-banner-title h1 { font-size: 21px; }
  .ig-body { padding: 0 16px !important; }
  .ig-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ig-facts > div:nth-child(2) { border-right: 0; }
  .ig-facts > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .ig-grid2 { grid-template-columns: minmax(0, 1fr); }
}

/* 4.160.0: System → Företag – antal i flikarna, demo-tidslinjen och kontaktuppgifter */
.sys-tabs { margin: 4px 0 12px; }
.sys-tabs a span { margin-left: 6px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sys-tabs a.on span { color: inherit; opacity: .75; }
.sys-tl { list-style: none; margin: 0; padding: 0 0 0 18px; position: relative; display: flex; flex-direction: column; gap: 14px; }
.sys-tl::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.sys-tl li { position: relative; display: grid; grid-template-columns: 118px minmax(0, 1fr); column-gap: 12px; font-size: 13px; }
.sys-tl-dot { position: absolute; left: -18px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong, var(--line)); box-sizing: border-box; }
.sys-tl li.ok .sys-tl-dot { background: #1F9D55; border-color: #1F9D55; }
.sys-tl li.bad .sys-tl-dot { background: #D14343; border-color: #D14343; }
.sys-tl time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; grid-row: span 2; padding-top: 1px; }
.sys-tl small { color: var(--muted); font-size: 12px; grid-column: 2; overflow-wrap: anywhere; }
.sys-dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px 12px; margin: 0; font-size: 13px; }
.sys-dl dt { color: var(--muted); }
.sys-dl dd { margin: 0; overflow-wrap: anywhere; }
.sys-row-link { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.sys-row-link:last-child { border-bottom: 0; }
.sys-row-link small { color: var(--muted); }
@media (max-width: 760px) { .sys-tl li { grid-template-columns: minmax(0, 1fr); } .sys-tl time { grid-row: auto; } .sys-tl small { grid-column: 1; } }

/* ── 4.160.1: loggorna utan vit ruta (de nya bilderna är genomskinliga) och appraden som i Front ── */
.ig-logo:has(img) { background: transparent; border: 0; border-radius: 0; }
.ig-logo:has(img) img { width: 100%; height: 100%; object-fit: contain; }
.ig-mono { border: 0 !important; }
.drail { width: 48px; gap: 6px; padding: 12px 0; }
.drail-btn { width: 36px; height: 36px; border-radius: 9px; color: var(--muted); }
.drail-btn.on { background: var(--accent-soft); color: var(--accent); box-shadow: none; }
.drail-btn.on::before { content: ""; position: absolute; left: -6px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.drail-btn .ig-logo { border-radius: 6px; }
.drail-btn:not(.on) .ig-logo { filter: none; }
.drail-btn .ig-mono { font-size: 10px !important; border-radius: 6px; }
.drail-btn[data-rail="moten"] { margin-bottom: 9px; }
.drail-btn[data-rail="moten"]:not(:last-child)::after { left: 7px; right: 7px; bottom: -8px; }
.details.has-rail.collapsed .drail-btn.on::before { display: none; }
/* Bannern: ingen vit ruta – en mjuk, genomskinlig platta; en färgad bokstavslogga fyller hela plattan */
.ig-banner-logo { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); box-shadow: none; padding: 10px; box-sizing: border-box; }
.ig-banner-logo:has(.ig-mono) { background: transparent; border: 0; padding: 0; }
.ig-banner-logo .ig-logo { width: 100% !important; height: 100% !important; }
.ig-banner-logo .ig-mono { border-radius: 18px; font-size: 24px !important; }

/* ── 4.161.0: kundprofilen (öppnas från kontakten i högerpanelen) ── */
button.contact-card.cp-open { border: 1px solid transparent; background: none; padding: 6px; margin: -6px; border-radius: 10px; text-align: left; cursor: pointer; font: inherit; color: inherit; width: calc(100% + 12px); }
button.contact-card.cp-open:hover { background: var(--hover); border-color: var(--line); }
.cp-open .cp-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.cp-open .cp-txt b, .cp-open .cp-txt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-open .cp-chev { color: var(--muted); opacity: 0; transition: opacity .15s; }
.cp-open:hover .cp-chev, .cp-open:focus-visible .cp-chev { opacity: 1; }
dialog.cp-modal { width: min(720px, calc(100vw - 24px)); max-height: min(86vh, 820px); display: flex; flex-direction: column; overflow: hidden; }
dialog.cp-modal:not([open]) { display: none; }
.cp-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.cp-av { width: 52px; height: 52px; flex: none; border-radius: 14px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; }
.cp-who { flex: 1; min-width: 0; }
.cp-who h3 { margin: 0; font-size: 17px; }
.cp-who span { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.cp-body { padding: 0 20px 20px; overflow-y: auto; }
.cp-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--line); margin: 0 -20px 16px; padding: 0 20px; position: sticky; top: 0; background: var(--surface); z-index: 1; }
.cp-tabs button { border: 0; background: none; padding: 12px 0; font: inherit; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.cp-tabs button[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.cp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.cp-stats > div { border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.cp-stats span { display: block; font-size: 12px; color: var(--muted); }
.cp-stats b { display: block; margin-top: 4px; font-size: 16px; }
.cp-h { margin: 18px 0 8px; font-size: 13px; }
.cp-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.cp-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.cp-row:last-child { border-bottom: 0; }
a.cp-row:hover { background: var(--hover); }
.cp-row.cur { background: var(--accent-soft); }
.cp-row em { font-style: normal; font-size: 11.5px; color: var(--accent); white-space: nowrap; }
.cp-row-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cp-row-t b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-row-t small { color: var(--muted); font-size: 12px; }
.cp-amt { white-space: nowrap; }
.cp-st { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; white-space: nowrap; background: var(--hover); color: var(--muted); min-width: 52px; text-align: center; }
.cp-st.s-open { background: color-mix(in srgb, #7E45C9 12%, var(--surface)); color: var(--accent); }
.cp-st.s-pending { background: color-mix(in srgb, #D99A16 16%, var(--surface)); color: #8A5E00; }
.cp-st.s-closed { background: color-mix(in srgb, #1F9D55 14%, var(--surface)); color: #167A41; }
.cp-st.s-bad { background: color-mix(in srgb, #D14343 14%, var(--surface)); color: #B42318; }
.cp-empty { margin: 8px 0; color: var(--muted); font-size: 13px; }
.cp-fx { display: flex; flex-direction: column; gap: 12px; }
.cp-fx-head { display: flex; align-items: center; gap: 12px; background: #0B3B2A; color: #FFFFFF; border-radius: 10px; padding: 14px 16px; }
.cp-fx-head > div { flex: 1; min-width: 0; }
.cp-fx-head span { display: block; font-size: 12px; color: #A7D7BF; }
.cp-fx-head b { display: block; font-size: 20px; letter-spacing: -.02em; }
.cp-fx-head small { color: #CFE9DC; font-size: 12px; }
.btn.cp-fx-new { background: #FFFFFF; color: #0B3B2A; border-color: #FFFFFF; font-weight: 600; }
.fx-ai { color: var(--accent); }

/* ── 4.161.0: integrationslistan – mörk banner med sökningen och stora rutor per system ── */
.ig-banner-list { padding-bottom: 84px; }
.ig-list-title { margin: 14px 0 0; font-size: 28px; letter-spacing: -.02em; color: #FFFFFF; }
.ig-list-lead { margin: 8px 0 0; color: rgba(255, 255, 255, .8); max-width: 600px; line-height: 1.5; }
.ig-list-search { display: flex; align-items: center; gap: 14px; margin-top: 20px; flex-wrap: wrap; }
.ig-search2 { flex: 1; max-width: 440px; min-width: 220px; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 10px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .75); }
.ig-search2:focus-within { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .45); }
.ig-search2 input { flex: 1; min-width: 0; border: 0; background: none; color: #FFFFFF; font: inherit; outline: none; }
.ig-search2 input::placeholder { color: rgba(255, 255, 255, .6); }
.ig-list-count { font-size: 12.5px; color: rgba(255, 255, 255, .78); }
.ig-list-body { margin-top: -54px !important; }
.ig-tabs2 { display: flex; gap: 4px; padding: 6px !important; overflow-x: auto; margin-bottom: 18px; scrollbar-width: none; }
.ig-tabs2 a { flex: none; padding: 8px 14px; border-radius: 8px; text-decoration: none; color: var(--ink); font-weight: 500; white-space: nowrap; }
.ig-tabs2 a small { color: var(--muted); margin-left: 4px; font-weight: 400; }
.ig-tabs2 a:hover { background: var(--hover); }
.ig-tabs2 a.on { background: #26163D; color: #FFFFFF; }
.ig-tabs2 a.on small { color: rgba(255, 255, 255, .7); }
.ig-list2 .ig-cat { margin-top: 26px; }
.ig-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ig-tile { display: flex !important; flex-direction: column; align-items: stretch !important; gap: 0 !important; padding: 0 !important; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.ig-tile:hover { border-color: color-mix(in srgb, var(--ig) 45%, var(--line)); transform: translateY(-1px); }
.ig-tile-top { height: 116px; position: relative; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ig) 10%, var(--surface)); }
.ig-tile-top .ig-logo { border-radius: 14px; }
.ig-tile-top .ig-mono { border-radius: 14px; font-size: 18px !important; }
.ig-tile-pill { position: absolute; top: 10px; right: 10px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; background: var(--surface); color: var(--muted); }
.ig-tile-pill.ig-on { background: #2BD47F; color: #0B3B2A; }
.ig-tile-pill.ig-live { background: var(--accent); color: #FFFFFF; }
.ig-tile-pill.ig-want { background: var(--accent-soft); color: var(--accent); }
.ig-tile-txt { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.ig-tile-txt b { font-size: 14px; }
.ig-tile-txt small { font-size: 12px; color: var(--muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1100px) { .ig-grid4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ig-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .ig-tile-top { height: 92px; } .ig-list-title { font-size: 23px; } }
/* 4.161.0: ingen kund i Fortnox – knapparna under varandra i full bredd */
.fx2-foot.fx2-stack { flex-direction: column; gap: 8px; }
.fx2-foot.fx2-stack .fx2-main, .fx2-foot.fx2-stack .fx2-btn { flex: none; width: 100%; height: 36px; font-size: 13px; }
/* 4.162.0: Shopify som i Front – steg för steg, behörigheterna att kopiera, butikens rutor och synk */
.shp-store + .shp-store { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.shp-store .ig-tools { flex-wrap: wrap; }
.shp-store .ig-tools form { margin: 0; }
.ig-facts b.shp-ok { color: var(--green); }
.ig-facts b.shp-bad { color: var(--red); }
.shp-scopes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.shp-scopes li { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.shp-scopes li code { font-size: 12px; padding: 1px 6px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); }
.shp-scopes li small { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.shp-scopes li.ok svg { color: var(--green); }
.shp-scopes li.bad svg { color: var(--red); }
.shp-scopes li.bad code { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }
.shp-scopes li.opt svg { color: var(--muted); }
.shp-last { display: flex; gap: 6px; align-items: center; margin: 2px 0 0; font-size: 12.5px; }
.shp-disc { display: flex; justify-content: flex-end; margin-top: 10px; }
.shp-disc form { margin: 0; }
.shp-more { margin-top: 22px; }
.shp-more > summary { cursor: pointer; padding: 14px 18px; font-weight: 600; display: flex; align-items: center; gap: 8px; list-style: none; }
.shp-more > summary::-webkit-details-marker { display: none; }
.shp-more[open] > summary { border-bottom: 1px solid var(--line); }
.card.flat { border: 0; box-shadow: none; background: transparent; margin: 0; }
.card.flat + .card.flat { margin-top: 8px; border-top: 1px solid var(--line); border-radius: 0; }
.ig-body > .card + .card, .ig-body > .card + .shp-guide { margin-top: 16px; }
.shp-steps { list-style: none; counter-reset: shp; margin: 0; padding: 4px 20px 18px; display: flex; flex-direction: column; gap: 0; }
.shp-steps > li { counter-increment: shp; position: relative; padding: 12px 0 12px 42px; border-top: 1px solid var(--line); }
.shp-steps > li:first-child { border-top: 0; }
.shp-steps > li::before { content: counter(shp); position: absolute; left: 0; top: 11px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 600; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); }
.shp-steps > li > b { display: block; font-size: 14px; margin-top: 3px; }
.shp-steps p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.shp-steps p.muted { font-size: 12.5px; color: var(--muted); }
.shp-steps code { font-size: 12px; padding: 1px 5px; border-radius: 4px; background: var(--active); }
.shp-copy { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 6px 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.shp-copy code { flex: 1; min-width: 0; background: none !important; padding: 0 !important; font-size: 12.5px; overflow-wrap: anywhere; color: var(--ink); }
.shp-form { max-width: 520px; }
@media (max-width: 760px) {
  .ig-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ig-facts > div:nth-child(2n) { border-right: 0; }
  .ig-facts > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .shp-steps { padding: 4px 14px 14px; }
  .shp-store .ig-tools { justify-content: flex-start; }
}
.ig-facts.ig-facts2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 4.164.0: produkterna från Shopify – tio på sidan och alla i en ruta. Samma rad på båda ställena. */
.shp-prods { margin-top: 14px; }
.shp-guide .card-head > div { flex: 1; min-width: 0; }
.shp-prods-head { display: flex; align-items: flex-start; gap: 12px; }
.shp-prods-head > div { flex: 1; min-width: 0; }
.shp-prods-head h2 { margin: 0; }
.shp-prods-head p { margin: 3px 0 0; }
.shp-count { font-size: 11.5px; font-weight: 600; padding: 0 6px; border-radius: 9px; background: var(--active); color: var(--ink-2); line-height: 18px; }
.shp-plist { list-style: none; margin: 10px 0 0; padding: 0; }
.shp-plist li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.shp-plist li:first-child { border-top: 0; }
.shp-plist img, .shp-noimg { width: 34px; height: 34px; border-radius: var(--r-sm); object-fit: cover; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); }
.shp-pname { min-width: 0; display: flex; flex-direction: column; }
.shp-pname a, .shp-pname { color: var(--ink); }
.shp-pname a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shp-pname a:hover { text-decoration: underline; }
.shp-pname small { font-size: 12px; color: var(--muted); }
.shp-price { font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.shp-stock { font-size: 12px; font-weight: 550; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.shp-stock.in { color: var(--green); background: var(--green-soft); }
.shp-stock.out { color: var(--red); background: var(--red-soft); }
.shp-pempty { display: flex; align-items: center; gap: 7px; margin: 10px 0 0; color: var(--muted); font-size: 13px; }
dialog.modal.shp-modal { width: min(720px, calc(100vw - 24px)); }
.shp-modal-tools { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.shp-search { flex: 1; position: relative; display: flex; align-items: center; }
.shp-search svg { position: absolute; left: 10px; color: var(--muted); pointer-events: none; }
.shp-search .input { padding-left: 32px; }
.shp-modal-tools small { white-space: nowrap; }
.shp-modal-body { padding: 4px 20px 16px; max-height: min(62vh, 560px); overflow-y: auto; }
.shp-more-row { display: flex; justify-content: center; padding-top: 8px; }
.shp-more-row .btn[hidden] { display: none; }
@media (max-width: 760px) {
  .shp-prods-head { flex-direction: column; }
  /* Smalt: pris och lager staplas till höger i stället för att trycka ihop namnet */
  .shp-plist li { grid-template-columns: 34px minmax(0, 1fr) auto; row-gap: 3px; }
  .shp-plist li > img, .shp-plist li > .shp-noimg, .shp-plist li > .shp-pname { grid-row: span 2; }
  .shp-plist .shp-price, .shp-plist .shp-stock { grid-column: 3; justify-self: end; }
  .shp-plist .shp-price { font-size: 12.5px; }
  .shp-modal-tools { flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 14px; }
  .shp-modal-body { padding: 4px 14px 14px; max-height: calc(100dvh - 200px); }
}
/* 4.163.0: Spiris-panelen – samma panel som Fortnox, i mörkblått */
.sp2 .fx2-head, .sp2 .fx2-main { background: #16263D; }
/* 4.167.0: bara etiketten "Obetalt" – förut fick även statusetiketten (också en span) den ljusblå färgen och gick inte att läsa */
.sp2 .fx2-brand, .sp2 .fx2-sub, .sp2 .fx2-total > div > span { color: #B9CBE3; }
.sp2 .fx2-chip.ok { color: #16263D; }
.fx-inv-d .fx-rows.with-art .fx-c-art select { min-width: 0; width: 100%; }
.fx-rows.with-art.sp-rows .fx-row { grid-template-columns: minmax(0, 1fr) 160px 64px 100px 30px; }
@media (max-width: 760px) { .fx-rows.with-art.sp-rows .fx-row { grid-template-columns: minmax(0, 1fr) 64px 92px 28px; } }

/* ── 4.166.0: Shopify-panelen – spårningskort för den pågående ordern, orderkort och ordern i en ruta ──
   Ägaren valde förslag 1 + 5: kortet överst är mörkt så att "var är paketet?" syns direkt, korten under är ljusa som i Shopify. */
.od-pills { display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.od .od-top b { margin-right: auto; font-size: 14px; }
.od .od-sub { display: block; margin-top: 4px; }
.od-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.od-th { position: relative; width: 38px; height: 38px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; flex: none; display: grid; place-items: center; }
.od-th img { width: 100%; height: 100%; object-fit: cover; }
.od-th i { position: absolute; right: 2px; bottom: 2px; font-style: normal; font-size: 10px; font-weight: 650; line-height: 1; padding: 2px 4px; border-radius: 5px; background: var(--surface); color: var(--ink-2); box-shadow: 0 0 0 1px var(--line); }
.od-th:not(:has(img)) i { position: static; background: none; box-shadow: none; font-size: 11px; color: var(--muted); }
.od-th.more { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.od-th.lg { width: 44px; height: 44px; }
.od .od-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px; margin-top: 12px; }
.od .od-acts .btn { justify-content: center; min-height: 34px; }
.od .od-acts .od-pri { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.od .od-acts .od-pri:hover { background: color-mix(in srgb, var(--ink) 88%, var(--surface)); }
.od-lbl { margin: 4px 2px 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.od-track { background: var(--ink); color: var(--surface); border-radius: 12px; padding: 14px; margin-bottom: 8px; --tk-mute: color-mix(in srgb, var(--surface) 62%, var(--ink)); --tk-soft: color-mix(in srgb, var(--surface) 9%, var(--ink)); }
.odt-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 12px; color: var(--tk-mute); }
.odt-top > span:first-child { margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-track .od-st.t-info, .od-track .od-st.t-ok, .od-track .od-st.t-wait, .od-track .od-st.t-bad, .od-track .od-st { background: var(--surface); color: var(--ink); }
.odt-title { display: block; margin-top: 10px; font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.odt-sub { margin: 4px 0 0; font-size: 13px; color: var(--tk-mute); }
.od-num { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 10px 9px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.od-num > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.od-num small { font-size: 11.5px; color: var(--muted); }
.od-num b { font-family: var(--mono); font-size: 13px; letter-spacing: .02em; overflow-wrap: anywhere; }
.od-copy { flex: none; width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border-radius: 7px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.od-copy:hover { background: var(--hover); }
.od-track .od-num { background: var(--tk-soft); border-color: transparent; }
.od-track .od-num small { color: var(--tk-mute); }
.od-track .od-copy { background: color-mix(in srgb, var(--surface) 16%, var(--ink)); border-color: transparent; color: var(--surface); }
.od-track .od-copy:hover { background: color-mix(in srgb, var(--surface) 24%, var(--ink)); }
.od-ev { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.od-ev li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 9px; font-size: 13px; line-height: 1.35; }
.od-ev li b { font-weight: 500; }
.od-ev li.now b { font-weight: 650; }
.od-ev small { display: block; font-size: 12px; color: var(--muted); }
.od-dot { width: 9px; height: 9px; margin-top: 4px; border-radius: 50%; background: var(--line-strong); }
.od-ev li.now .od-dot { background: var(--blue, #2F6FED); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue, #2F6FED) 22%, transparent); }
.od-track .od-ev small { color: var(--tk-mute); }
.od-track .od-dot { background: var(--tk-mute); opacity: .55; }
.od-track .od-ev li.now .od-dot { background: #91D0FF; opacity: 1; box-shadow: 0 0 0 3px rgba(145, 208, 255, .25); }
.odt-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.odt-btn { flex: 1 1 120px; white-space: nowrap; min-height: 34px; padding: 0 10px; border-radius: 8px; border: 0; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; }
.odt-btn:hover { background: color-mix(in srgb, var(--surface) 88%, var(--ink)); }
.odt-btn.line { background: transparent; color: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--surface) 35%, var(--ink)); }
.odt-btn.line:hover { background: var(--tk-soft); }
.od-wide { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 38px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.od-wide:hover { background: var(--hover); }
.od-all { border-style: solid; background: var(--surface); border-color: var(--line); }
/* Mörkt läge: kortet blir en upphöjd yta i stället för inverterat (vit platta i mörk vy bländar) */
[data-theme="dark"] .od-track { background: var(--active); color: var(--ink); --tk-mute: var(--muted); --tk-soft: var(--hover); }
[data-theme="dark"] .od-track .od-st, [data-theme="dark"] .odt-btn { background: var(--ink); color: var(--bg); }
[data-theme="dark"] .odt-btn.line, [data-theme="dark"] .od-track .od-copy { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
[data-theme="dark"] .od .od-acts .od-pri { background: var(--ink); color: var(--bg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .od-track { background: var(--active); color: var(--ink); --tk-mute: var(--muted); --tk-soft: var(--hover); }
  :root:not([data-theme="light"]) .od-track .od-st, :root:not([data-theme="light"]) .odt-btn { background: var(--ink); color: var(--bg); }
  :root:not([data-theme="light"]) .odt-btn.line, :root:not([data-theme="light"]) .od-track .od-copy { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
}
/* Ordern i en ruta mitt på skärmen */
dialog.od-order { width: min(860px, calc(100vw - 32px)); max-height: min(88vh, 900px); padding: 0; display: flex; flex-direction: column; background: var(--bg); overflow: hidden; }
dialog.od-order:not([open]) { display: none; }
.odo-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; background: var(--surface); border-bottom: 1px solid var(--line); }
.odo-head > div { flex: 1; min-width: 0; }
.odo-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.odo-title h3 { margin: 0 4px 0 0; font-size: 19px; font-weight: 700; }
.odo-head p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.odo-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; padding: 14px; overflow-y: auto; }
.odo-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.odo-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px; font-size: 13.5px; }
.odo-card > b, .odo-h b { font-size: 14px; font-weight: 650; }
.odo-card > p { margin: 8px 0 0; line-height: 1.55; overflow-wrap: anywhere; }
.odo-h { display: flex; align-items: baseline; gap: 8px; }
.odo-h b { margin-right: auto; }
.odo-h span { font-size: 12.5px; color: var(--muted); text-align: right; }
.odo-state { margin: 8px 0 0; font-weight: 600; }
.odo-muted { color: var(--muted); }
.odo-card > .odo-muted { margin: 8px 0 0; font-size: 13px; }
.odo-items { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.odo-items li { display: flex; align-items: center; gap: 12px; }
.odo-in { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.odo-in b { font-weight: 550; overflow-wrap: anywhere; }
.odo-in small { color: var(--muted); font-size: 12.5px; }
.odo-sum { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.odo-tot { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.odo-tot dt { color: var(--muted); }
.odo-tot dd { margin: 0; text-align: right; }
.odo-tot .odo-big { color: var(--ink); font-weight: 700; }
.odo-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 18px; background: var(--surface); border-top: 1px solid var(--line); }
@media (max-width: 700px) {
  dialog.od-order { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .odo-body { grid-template-columns: minmax(0, 1fr); }
  .odo-foot .btn { flex: 1 1 auto; justify-content: center; }
}
.odo-foot .btn, .od-num .btn { height: 32px; padding: 0 12px; }

/* ── 4.166.0: System → Driftstatus ── */
.stx-now .card-head { align-items: flex-start; }
.stx-auto { flex: none; }
.stx-grid { list-style: none; margin: 0; padding: 4px 16px 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 16px; }
.stx-grid li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.stx-grid b { display: block; font-weight: 550; }
.stx-grid small { color: var(--muted); font-size: 12.5px; }
.stx-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--green); }
.stx-dot.s-degraded, .stx-dot.s-maintenance { background: var(--saffron); }
.stx-dot.s-partial, .stx-dot.s-major { background: var(--red); }
.stx-checks-run { margin: 0 16px 10px; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); font-size: 13px; }
.stx-checks-run ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.stx-checks-run li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stx-note { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.stx-help { margin: 0; padding: 4px 16px 14px; font-size: 12.5px; line-height: 1.5; }
.stx-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 16px; }
.stx-h { margin: 22px 0 10px; font-size: 15px; font-weight: 600; }
.stx-h small { font-weight: 400; font-size: 12.5px; }
.stx-inc { margin-bottom: 12px; }
.stx-inc.is-open { border-color: var(--line-strong); }
.stx-inc .card-head { align-items: flex-start; }
.stx-inc h3 { overflow-wrap: anywhere; }
.stx-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.stx-tl { list-style: none; margin: 0; padding: 0 16px 6px; }
.stx-tl li { padding: 8px 0 8px 14px; border-left: 2px solid var(--line); }
.stx-tl li p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.stx-upd { display: grid; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.stx-upd select.input { width: auto; }

/* ── 4.167.0: Spiris-panelen enligt ägarens förslag 1 – stramare Fortnox-stil i mörkblått ── */
.sp2 .fx2-name { font-size: 15px; line-height: 1.3; white-space: normal; }
.sp2 .fx2-link { color: #FFFFFF; }
.sp3-total { margin-top: 8px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-direction: column; }
.sp3-total > span { font-size: 12px; color: #B9CBE3; }
.sp3-total > b { font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; color: #FFFFFF; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sp3-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sp2 .fx2-chip.bad { background: #FF9C9C; color: #3A0B0B; }
.sp2 .fx2-chip.wait { background: #FFD98A; color: #3A2A00; }
.sp3-inv { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.sp3-inv.t-bad { border-color: color-mix(in srgb, #D64545 32%, var(--line)); }
.sp3-inv.t-ok { border-color: color-mix(in srgb, #1F9D6B 28%, var(--line)); }
.sp3-inv.t-wait { border-color: color-mix(in srgb, #D99A16 26%, var(--line)); }
.sp3-inv-h { width: 100%; border: 0; padding: 10px 12px; text-align: left; font: inherit; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; gap: 3px; background: var(--surface); }
.t-bad .sp3-inv-h { background: color-mix(in srgb, #D64545 6%, var(--surface)); }
.t-wait .sp3-inv-h { background: color-mix(in srgb, #D99A16 6%, var(--surface)); }
.t-ok .sp3-inv-h { background: color-mix(in srgb, #1F9D6B 5%, var(--surface)); }
.sp3-inv-h:hover { filter: brightness(.98); }
.sp3-inv-h:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 10px; }
.sp3-inv-r { display: flex; align-items: center; gap: 6px; width: 100%; }
.sp3-inv-r b { font-size: 13px; font-weight: 650; margin-right: auto; min-width: 0; overflow-wrap: anywhere; }
.sp3-pill { flex: none; font-size: 11px; font-weight: 650; padding: 2px 8px; border-radius: 20px; background: var(--hover); color: var(--ink-2); }
.t-bad .sp3-pill { background: color-mix(in srgb, #D64545 16%, var(--surface)); color: #9E2323; }
.t-wait .sp3-pill { background: color-mix(in srgb, #D99A16 20%, var(--surface)); color: #6E4A00; }
.t-ok .sp3-pill { background: color-mix(in srgb, #1F9D6B 16%, var(--surface)); color: #0B6440; }
.sp3-amt { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sp3-sub { font-size: 12px; color: var(--muted); }
.t-bad .sp3-sub { color: #B42323; }
.t-ok .sp3-sub { color: #167A41; }
.sp3-kv { margin: 0; padding: 10px 12px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; font-size: 12px; }
.sp3-kv dt { color: var(--muted); }
.sp3-kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.sp3-kv dd.bad { color: #B42323; }
.sp3-kv dd.num { letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.sp3-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0 12px 12px; }
.sp3-btn { height: 34px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.sp3-btn:hover { background: var(--hover); }
.sp3-btn.go { border-color: #2C5A9A; background: color-mix(in srgb, #2C5A9A 9%, var(--surface)); color: #16386E; font-weight: 650; }
:root[data-theme="dark"] .sp3-btn.go, :root[data-theme="night"] .sp3-btn.go { color: #A9C6F2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sp3-btn.go { color: #A9C6F2; } }
.sp2 .fx2-main { height: 38px; }
/* Mörkt läge: etiketter och rader med ljusare text – mörkröd text på mörk yta gick inte att läsa */
:root[data-theme="dark"] .t-bad .sp3-pill, :root[data-theme="night"] .t-bad .sp3-pill { color: #FFB4B4; }
:root[data-theme="dark"] .t-wait .sp3-pill, :root[data-theme="night"] .t-wait .sp3-pill { color: #F5CF6B; }
:root[data-theme="dark"] .t-ok .sp3-pill, :root[data-theme="night"] .t-ok .sp3-pill { color: #8EE0B5; }
:root[data-theme="dark"] .t-bad .sp3-sub, :root[data-theme="dark"] .sp3-kv dd.bad, :root[data-theme="night"] .t-bad .sp3-sub, :root[data-theme="night"] .sp3-kv dd.bad { color: #FF9C9C; }
:root[data-theme="dark"] .t-ok .sp3-sub, :root[data-theme="night"] .t-ok .sp3-sub { color: #8EE0B5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .t-bad .sp3-pill { color: #FFB4B4; }
  :root:not([data-theme="light"]) .t-wait .sp3-pill { color: #F5CF6B; }
  :root:not([data-theme="light"]) .t-ok .sp3-pill, :root:not([data-theme="light"]) .t-ok .sp3-sub { color: #8EE0B5; }
  :root:not([data-theme="light"]) .t-bad .sp3-sub, :root:not([data-theme="light"]) .sp3-kv dd.bad { color: #FF9C9C; }
}

/* 4.167.0: hjärnväljaren som rutnät (webbchatt, kanaler, telefon). Kort i stället för rullista så att man ser
   kunskapen, webbplatserna och var hjärnan redan används innan man väljer. */
.brp { display: flex; flex-direction: column; gap: 8px; }
.brp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 8px; padding: 8px 0; }
.brp-card { position: relative; display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); cursor: pointer; text-align: left; font: inherit; }
.brp-card:hover { border-color: var(--accent-line, var(--line)); }
.brp-card input { position: absolute; opacity: 0; pointer-events: none; }
.brp-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.brp-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.brp-ico { flex: none; width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.brp-card:has(input:checked) .brp-ico { background: var(--accent); color: #fff; }
.brp-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.brp-txt b { font-size: 13.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.brp-txt small { font-size: 12px; color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
.brp-txt .brp-used { color: var(--ink-2, var(--muted)); }
.brp-tag { position: absolute; top: -8px; right: 8px; font-size: 10.5px; font-weight: 650; padding: 1px 7px; border-radius: 20px; background: var(--surface); border: 1px solid var(--accent); color: var(--accent); }
.brp-tag.warn { top: auto; bottom: -8px; border-color: var(--saffron); color: var(--saffron); }
.brp-tag + .brp-tag.warn { bottom: -8px; }
.brp-new { border-style: dashed; background: transparent; }
.brp-new .brp-ico { background: transparent; border: 1px dashed var(--line); }
.brp-warn { display: flex; gap: 7px; align-items: flex-start; margin: 0; padding: 9px 11px; border-radius: 8px; background: var(--saffron-soft); color: var(--ink); font-size: 12.5px; line-height: 1.5; }
.brp-warn svg { flex: none; margin-top: 2px; color: var(--saffron); }
.brp-err { margin: 0; color: var(--red); font-size: 12.5px; }
@media (max-width: 560px) { .brp-grid { grid-template-columns: 1fr; } }
.vr-brain-pick.stack { flex-direction: column; align-items: stretch; gap: 10px; }
.vr-brain-choose { width: 100%; max-width: 720px; margin: 12px auto 0; text-align: left; }
#byt-hjarna { width: min(720px, calc(100vw - 32px)); max-width: none; }

/* 4.167.0: rollerna i Team med egna behörigheter (Anpassa → på/av per behörighet) */
.rl-list { display: flex; flex-direction: column; }
.rl-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--line); }
.rl-row:first-child { border-top: 0; }
.rl-name { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .rl-name b { font-weight: 600; color: var(--ink); }
.rl-hint { font-size: 13px; line-height: 1.45; } .rl-count { display: block; font-size: 12px; color: var(--ink-2, var(--muted)); margin-top: 2px; }
.rl-fixed { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); padding: 0 6px; }
dialog.modal.rl-modal { width: min(640px, calc(100vw - 24px)); }
.rl-sub { margin: 2px 0 0; font-size: 12.5px; }
.rl-modal .modal-head > div { flex: 1; min-width: 0; }
.rl-body { display: flex; flex-direction: column; gap: 16px; max-height: min(64vh, 640px); overflow-y: auto; }
.rl-grp h4 { margin: 0 0 4px; font-size: 11.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.rl-item { display: flex; align-items: flex-start; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.rl-grp .rl-item:last-child { border-bottom: 0; }
.rl-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rl-txt b { font-size: 13.5px; font-weight: 570; color: var(--ink); } .rl-txt small { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.rl-def { font-size: 11.5px !important; } .rl-def.changed { color: var(--saffron) !important; font-weight: 600; }
.rl-sens { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; font-size: 10.5px; font-weight: 650; padding: 1px 6px; border-radius: 20px; background: var(--saffron-soft); color: var(--saffron); vertical-align: 1px; }
.rl-item .tgl input { appearance: none; width: 34px; height: 20px; border-radius: 20px; background: var(--line-strong); position: relative; flex: none; cursor: pointer; transition: background .15s; margin: 2px 0 0; }
.rl-item .tgl input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.rl-item .tgl input:checked { background: var(--accent); } .rl-item .tgl input:checked::after { transform: translateX(14px); }
.rl-item .tgl input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rl-note { margin: 0; display: flex; gap: 6px; align-items: center; }
@media (max-width: 640px) { .rl-row { grid-template-columns: 1fr auto; } .rl-hint { grid-column: 1 / -1; grid-row: 2; } }
/* 4.167.1: personens egna undantag i Team-listan (+ extra, − borttagna) */
.rl-chip { display: inline-grid; place-items: center; min-width: 18px; height: 17px; padding: 0 5px; margin-left: 5px; border-radius: 20px; font-size: 10.5px; font-weight: 700; }
.rl-chip.plus { background: var(--green-soft); color: var(--green); } .rl-chip.minus { background: var(--red-soft); color: var(--red); }
.rl-chip + .rl-chip { margin-left: 3px; }
.rl-pbtn { padding-left: 8px; padding-right: 8px; gap: 0; }

/* 4.168.0: butikens AI-agenter (Integrationer → Shopify) */
.ig-agents { border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px 12px; margin: 4px 0; display: flex; flex-direction: column; gap: 6px; }
.ig-agents legend { padding: 0 4px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.ig-agents-list { display: flex; flex-direction: column; gap: 6px; padding-left: 26px; }

/* 4.168.0: Kom igång längst ned i huvudmenyn – en ring med procenten (hopfälld meny) eller ring + text (utfälld).
   Ersätter dialogen som öppnades av sig själv för nya konton. */
.rail > .rail-sg { width: 100%; height: 44px; display: flex; align-items: center; gap: 10px; border-radius: 10px; margin-bottom: 6px; color: var(--frame-ink, var(--ink)); }
.rail > .rail-sg:hover { background: var(--frame-hover, var(--hover)); }
.rail-sg-ring { position: relative; width: 26px; height: 26px; flex: none; display: grid; place-items: center; }
.rail-sg-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.rail-sg-ring circle { fill: none; stroke-width: 3.5; }
/* Menyn ligger på den mörka ramen – ringens spår och siffra följer ramens färger, inte innehållets */
.rail-sg .sg-mini-bg { stroke: var(--frame-line, var(--active)); }
.rail-sg-ring i { font-style: normal; font-size: 9.5px; font-weight: 700; color: var(--frame-ink, var(--ink)); letter-spacing: -.02em; }
/* Texten bara i utfälld meny – annars sticker den ut under innehållet (".rail .lbl" döljs i hopfälld meny) */
.rail > .rail-sg .lbl { display: none; flex-direction: column; text-align: left; line-height: 1.25; }
.rail-sg .lbl b { font-size: 13px; font-weight: 600; } .rail-sg .lbl small { font-size: 11.5px; color: var(--frame-muted, var(--muted)); }
html.nav-open .rail > .rail-sg .lbl { display: flex; }

/* 4.168.0: AI-agentens Översikt (förslag C) – hälsning och steg, företagets uppgifter (gula = hittade, gröna =
   bekräftade), målet och Kunskapskollen. Färger från variablerna så att mörkt läge följer med. */
.ag-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 22px; padding: 22px 24px; margin-bottom: 18px;
  background: linear-gradient(120deg, var(--surface) 0%, var(--accent-soft) 100%); }
.ag-eyebrow { font-size: 11.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.ag-hero h2 { margin: 6px 0 6px; font-size: 21px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.ag-sub { margin: 0 0 16px; color: var(--muted); font-size: 13.5px; line-height: 1.5; max-width: 560px; }
.ag-meter { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
.ag-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 6px; }
.ag-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); transition: width .4s ease; }
.ag-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ag-step { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0 10px; align-items: center; padding: 8px 11px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.ag-step:hover { border-color: var(--line-strong); }
.ag-step i { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; }
.ag-step.ok i { background: var(--green-soft); color: var(--green); } .ag-step.todo i { background: var(--saffron-soft); color: var(--saffron); }
.ag-step b { font-size: 13px; font-weight: 600; } .ag-step span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-sec { margin: 22px 0 6px; scroll-margin-top: 16px; }
.ag-sec-h { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.ag-sec-h > div:first-child { flex: 1; min-width: 0; }
.ag-sec-h h3 { margin: 0; font-size: 15px; font-weight: 650; } .ag-sec-h p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.ag-sec-act { display: flex; gap: 6px; flex-wrap: wrap; }
.ag-branches { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.ag-branches button { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2, var(--muted)); border-radius: 20px; padding: 4px 12px; font: inherit; font-size: 12.5px; cursor: pointer; }
.ag-branches button.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.ag-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ag-fact { display: flex; flex-direction: column; gap: 8px; padding: 13px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.ag-fact.new { border-color: color-mix(in srgb, var(--saffron) 45%, var(--line)); background: color-mix(in srgb, var(--saffron-soft) 60%, var(--surface)); }
.ag-fact-t { display: flex; align-items: center; gap: 7px; color: var(--ink-2, var(--muted)); }
.ag-fact-t b { font-size: 13px; font-weight: 600; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-tag { margin-left: auto; flex: none; font-size: 10.5px; font-weight: 650; padding: 2px 8px; border-radius: 20px; background: var(--green-soft); color: var(--green); }
.ag-fact.new .ag-tag { background: var(--saffron-soft); color: var(--saffron); }
.ag-fact-v { font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.ag-fact-act { display: flex; gap: 6px; align-items: center; } .ag-fact-act form { margin: 0; }
.ag-fact-act .ag-yes { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.ag-fact-foot { display: flex; align-items: center; gap: 2px; margin-top: auto; font-size: 11.5px; color: var(--muted); }
.ag-fact-foot span { flex: 1; } .ag-fact-foot form { margin: 0; }
.ag-empty { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px dashed var(--line-strong); border-radius: 10px; color: var(--muted); }
.ag-empty b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; } .ag-empty span { font-size: 12.5px; line-height: 1.5; }
.ag-goals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--line); }
.ag-goal { position: relative; cursor: pointer; border-radius: 8px; padding: 10px 12px; }
.ag-goal input { position: absolute; opacity: 0; pointer-events: none; }
.ag-goal b { display: block; font-size: 13px; font-weight: 600; } .ag-goal small { display: block; font-size: 12px; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.ag-goal:has(input:checked) { background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .08), inset 0 0 0 1px var(--accent); }
.ag-goal:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.ag-free { margin-top: 10px; }
.ag-goal-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 12.5px; }
.ag-check { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.ag-q { display: flex; gap: 9px; align-items: flex-start; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); min-width: 0; }
.ag-q > i { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700; background: var(--green-soft); color: var(--green); }
.ag-q.no { border-color: color-mix(in srgb, var(--red) 30%, var(--line)); }
.ag-q.no > i { background: var(--red-soft); color: var(--red); }
.ag-q b { display: block; font-size: 13px; font-weight: 600; } .ag-q span { display: block; font-size: 12px; color: var(--muted); line-height: 1.45; margin-top: 2px; overflow-wrap: anywhere; }
.ag-q .linkish { padding: 0; font-size: 12px; }
.agent-goal-now { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 9px; background: var(--surface-2); font-size: 13px; }
@media (max-width: 900px) { .ag-hero { grid-template-columns: 1fr; } .ag-goals { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ag-sec-h { flex-direction: column; align-items: stretch; } }
/* 4.168.0: åtgärdsknapparna i agentens källista är också en div – ".vr-source > div" gav dem flex:1 och sköt in
   status och knappar mot mitten av raden */
.vr-source > .vr-source-act { flex: none; }

/* 4.168.1: en kanal som någon annan lagt till – syns (man arbetar i den i inkorgen) men öppnas inte här.
   Raden är en div, inte en länk, och anteckningen säger vem man kontaktar. */
.chl-row.chl-locked { cursor: default; }
.chl-row.chl-locked .chl-ic { opacity: .7; }
.chl-locked .chl-txt b > svg { display: inline-block; vertical-align: -1px; margin-right: 4px; color: var(--muted); }
.chl-lock-note { display: flex; align-items: flex-start; gap: 5px; margin-top: 3px; font-style: normal; font-size: 12px; line-height: 1.4; color: var(--muted); white-space: normal; }
.chl-lock-note svg { flex: none; margin-top: 2px; }

/* ══ 4.169.0: fakturarutan (Fortnox och Spiris) – moms och rabatt per rad, ROT/RUT och summorna ══
   Raderna får två smala kolumner till; arbetsraden (ROT/RUT) ligger under raden i hela bredden. */
dialog.modal.fx-inv-d:has(.fx-x) { width: min(900px, calc(100vw - 24px)); }
.fx-rows.fx-x .fx-row { grid-template-columns: minmax(0, 1fr) 64px 100px 84px 72px 30px; }
.fx-rows.fx-x.with-art .fx-row { grid-template-columns: minmax(0, 1fr) 110px 64px 100px 84px 72px 30px; }
.fx-rows.fx-x.sp-rows .fx-row { grid-template-columns: minmax(0, 1fr) 160px 64px 96px 64px 72px 30px; }
.fx-c-disc input { text-align: right; font-variant-numeric: tabular-nums; }
.fx-c-vat select { padding-right: 22px; }
.fx-vat-ro { display: flex; align-items: center; justify-content: flex-end; height: 34px; padding: 0 8px; border-radius: 7px; background: var(--surface-2); color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-work { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 7px 10px; margin-top: -2px; border-radius: 8px; background: var(--surface-2); }
.fx-work[hidden] { display: none !important; }
.fx-work .check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 560; }
.fx-work .field { margin: 0; }
.fx-work .fx-c-wtype select { min-width: 210px; }
.fx-work .fx-c-hours input { width: 92px; text-align: right; }
.fx-work select:disabled, .fx-work input:disabled { opacity: .55; }
.fx-rows.with-work .fx-row { padding-bottom: 2px; }
.fx-red { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fx-red-l { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-right: 4px; }
.fx-red-o { position: relative; }
.fx-red-o input { position: absolute; opacity: 0; pointer-events: none; }
.fx-red-o span { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border: 1px solid var(--line); border-radius: 7px; font-size: 13px; color: var(--ink-2); cursor: pointer; background: var(--surface); }
.fx-red-o input:checked + span { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); font-weight: 600; }
.fx-red-o input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.fx-red-note { flex-basis: 100%; margin: 2px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.fx-tot { margin: 0; margin-left: auto; width: min(360px, 100%); display: grid; gap: 4px; font-size: 13px; }
.fx-tot > div { display: flex; justify-content: space-between; gap: 12px; }
.fx-tot > div[hidden] { display: none; }
.fx-tot dt { color: var(--muted); } .fx-tot dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--ink); }
.fx-tot .fx-tot-tot { padding-top: 6px; margin-top: 2px; border-top: 1px solid var(--line); font-weight: 600; }
.fx-tot .fx-tot-tot dt { color: var(--ink); }
.fx-tot .fx-tot-pay { font-weight: 650; } .fx-tot .fx-tot-pay dd { color: var(--accent); }
@media (max-width: 760px) {
  /* Mobil: beskrivningen och × på första raden, artikeln på egen rad, sedan antal · pris · moms · rabatt i fyra lika kolumner */
  .fx-rows.fx-x .fx-row, .fx-rows.fx-x.with-art .fx-row, .fx-rows.fx-x.sp-rows .fx-row { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  .fx-rows.fx-x .fx-c-text { grid-row: 1; grid-column: 1 / 4; }
  .fx-rows.fx-x .fx-c-rm { grid-row: 1; grid-column: 4; justify-self: end; }
  .fx-rows.fx-x .fx-c-art { grid-row: 2; grid-column: 1 / -1; order: 0; }
  .fx-rows.fx-x .fx-row + .fx-row .field > span { position: static; width: auto; height: auto; clip: auto; }
  .fx-rows.fx-x .fx-row .field > span { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fx-tot { width: 100%; }
  .fx-work .fx-c-wtype { flex: 1 1 160px; } .fx-work .fx-c-wtype select { min-width: 0; width: 100%; }
}
.fx-tot dd { white-space: nowrap; }
div.field.fx-c-vat { display: flex; flex-direction: column; gap: 5px; }   /* samma uppställning som label.field – annars hamnade momsen 5 px för högt */