@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; }
.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); }
.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; }