/* ═══ OIT.One UI Kit v21.1 — Kundenportal. Lädt NACH customer.css. ═══ */
:root{--font:"Inter","Segoe UI Variable","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;--mono:"JetBrains Mono","Cascadia Code","SF Mono",Consolas,monospace;
  --bg:#f5f6f8;--card:#fff;--card-2:#fafbfc;--line:#e6e8ec;--line-2:#eef0f3;--line-strong:#d0d5dc;--ink:#0f172a;--ink-2:#334155;--ink-3:#64748b;--ink-4:#94a3b8;
  --accent:#2563eb;--accent-h:#1d4ed8;--accent-bg:#eff4ff;--accent-line:#c7d7fe;--good:#16a34a;--good-bg:#f0fdf4;--good-line:#bbf7d0;--warn:#d97706;--warn-bg:#fffbeb;--warn-line:#fde68a;--bad:#dc2626;--bad-bg:#fef2f2;--bad-line:#fecaca;
  --r:12px;--r-sm:8px;--sh-1:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.06);--sh-2:0 4px 12px -2px rgba(15,23,42,.08);--sh-3:0 20px 50px -12px rgba(15,23,42,.25)}
html{-webkit-font-smoothing:antialiased}
body{font-family:var(--font)!important;background:var(--bg)!important;color:var(--ink)!important;font-size:13.5px;letter-spacing:-.005em}
.dim{color:var(--ink-4)!important}.ico{display:inline-block;vertical-align:-3px;flex:none}
.page-title,h1.title,.content h1{font-family:var(--font)!important;font-weight:650!important;letter-spacing:-.025em!important;font-size:22px!important;color:var(--ink)!important}
.page-sub,.content h1+p{color:var(--ink-3)!important;font-size:13.5px!important}
.topbar{background:rgba(11,15,25,.88)!important;backdrop-filter:blur(12px) saturate(160%);border-bottom:1px solid rgba(255,255,255,.06)!important}
.portal-sidebar,.sidebar{background:#fff!important;border-right:1px solid var(--line)!important}
.portal-sidebar a,.sidebar a,.nav-link{font-family:var(--font)!important;font-weight:500!important;border-radius:var(--r-sm)!important;color:var(--ink-2)!important}
.portal-sidebar a.active,.sidebar a.active,.nav-link.active{background:var(--accent-bg)!important;color:var(--accent)!important;box-shadow:none!important}
.sidebar-section,.nav-section{font-family:var(--font)!important;font-size:11px!important;font-weight:600!important;letter-spacing:.04em!important;color:var(--ink-4)!important}

/* Hero */
.hero{display:flex;align-items:center;justify-content:space-between;gap:24px;background:linear-gradient(135deg,#0b0f19 0%,#111827 60%,#1e293b 100%);color:#fff;border-radius:var(--r);padding:18px 22px;margin-bottom:14px;box-shadow:var(--sh-2);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(closest-side,rgba(37,99,235,.35),transparent)}
.hero-l{display:flex;align-items:center;gap:14px;position:relative}
.hero-shield{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(22,163,74,.15);color:#4ade80;border:1px solid rgba(74,222,128,.25)}
.hero-t{font-weight:650;font-size:15.5px;letter-spacing:-.02em}
.hero-s{font-size:12.5px;color:rgba(255,255,255,.6);margin-top:3px}
.hero-r{display:flex;align-items:center;gap:20px;position:relative;padding-right:6px}
.donut{width:84px;height:84px;border-radius:50%;position:relative;flex:none;background:conic-gradient(var(--good) 0 calc(var(--ok)*1%),var(--warn) 0 calc((var(--ok) + var(--hd))*1%),var(--bad) 0 100%);box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.donut::before{content:"";position:absolute;inset:8px;border-radius:50%;background:#111827}
.donut b,.donut small{position:absolute;left:0;right:0;text-align:center;line-height:1}
.donut b{top:calc(50% - 11px);font-size:17px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.donut small{top:calc(50% + 8px);font-size:9px;color:rgba(255,255,255,.5);letter-spacing:.02em;text-transform:uppercase}
.hero-legend{display:flex;flex-direction:column;gap:5px;font-size:12px;color:rgba(255,255,255,.7)}
.hero-legend span{display:flex;align-items:center;gap:7px}.hero-legend b{color:#fff;font-weight:600;margin-left:auto;font-variant-numeric:tabular-nums;padding-left:12px}
.hero-legend i{width:8px;height:8px;border-radius:2px;display:inline-block}.hero-legend .ok{background:var(--good)}.hero-legend .hd{background:var(--warn)}.hero-legend .de{background:var(--bad)}

/* Sparkline / Stats */
.spark-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px 10px;margin-bottom:14px;box-shadow:var(--sh-1)}
.spark-head{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:6px;text-transform:none;letter-spacing:0}
.spark-legend{display:flex;gap:12px;font-weight:500;font-size:12px;color:var(--ink-3)}
.spark-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.l-dl{background:var(--accent)}.l-hd{background:var(--warn)}.l-de{background:var(--bad)}
#spark{width:100%;height:72px;display:block}
.stats-row{gap:14px!important}
.stat-card{background:var(--card)!important;border:1px solid var(--line)!important;border-radius:var(--r)!important;box-shadow:var(--sh-1)!important;padding:16px 18px!important;border-left-width:1px!important;border-left-color:var(--line)!important}
.stat-card .stat-icon{width:32px!important;height:32px!important;border-radius:9px!important;font-size:0!important;background:var(--card-2)!important;border:1px solid var(--line-2)!important}
.stat-card .stat-value{font-family:var(--font)!important;font-size:26px!important;font-weight:650!important;letter-spacing:-.03em!important;color:var(--ink)!important;font-variant-numeric:tabular-nums}
.stat-card .stat-label{font-family:var(--font)!important;font-size:12px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;color:var(--ink-3)!important}
.stat-hold .stat-value{color:var(--warn)!important}.stat-del .stat-value{color:var(--bad)!important}

/* Search / Filter-Chips */
.cmd-search{background:#fff!important;border:1px solid var(--line-strong)!important;border-radius:var(--r-sm)!important;box-shadow:var(--sh-1)!important}
.cmd-search:focus-within{border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-bg)!important}
.cmd-search input{font-family:var(--font)!important;font-size:13px!important}
.filter-chip,.fchip,.chip-btn{font-family:var(--font)!important;font-weight:500!important;border-radius:999px!important;border:1px solid var(--line-strong)!important;background:#fff!important;color:var(--ink-2)!important;padding:6px 12px!important;font-size:12.5px!important;box-shadow:var(--sh-1)!important}
.filter-chip.active,.fchip.active,.chip-btn.active{background:var(--ink)!important;color:#fff!important;border-color:var(--ink)!important}

/* Liste */
.mlist{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-1)}
.mhead,.mrow{display:grid;grid-template-columns:34px 40px minmax(0,1fr) 60px 140px 70px 176px;align-items:center;gap:8px;padding:0 12px}
.mhead{height:38px;background:var(--card-2);border-bottom:1px solid var(--line);font-size:11.5px;font-weight:550;color:var(--ink-3)}
.mrow{min-height:60px;padding-top:8px;padding-bottom:8px;border-bottom:1px solid var(--line-2);cursor:pointer;transition:background .1s;outline:none}
.mrow:last-child{border-bottom:none}
.mrow:hover{background:#f8fafc}
.mrow.selected{background:var(--accent-bg);box-shadow:inset 3px 0 0 var(--accent)}
.mrow.kb-focus{background:#f1f5f9;box-shadow:inset 3px 0 0 var(--ink)}
.mrow.pv-active{background:var(--accent-bg)}
.mrow.is-del{opacity:.75}.mrow.is-del .mc-subj{color:var(--ink-3);font-weight:500}
.mrow.is-restored .mc-subj{color:var(--ink-3);font-weight:500}
.mrow.is-pending{opacity:.6}
.mrow.flash{animation:flash .9s ease-out}@keyframes flash{0%{background:var(--accent-bg)}}
#mrows.loading{opacity:.5;pointer-events:none}
.mempty{padding:56px;text-align:center;color:var(--ink-4);font-size:13.5px}
.mfoot{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;font-size:12.5px;color:var(--ink-3);border-top:1px solid var(--line);background:var(--card-2)}
.mfoot b{color:var(--ink);font-weight:600}
.mc-subj{font-size:13.5px;font-weight:550;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.mc-meta{font-size:12px;color:var(--ink-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;gap:10px;margin-top:2px}
.mc-rcpt{display:inline-flex;align-items:center;gap:2px;color:var(--ink-4)}
.mc-date time{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.mc-act{display:flex;justify-content:flex-end}

/* Avatar / Ring / Pill / Checkbox / Actions (identisch zum Admin-Kit) */
.avatar{display:inline-grid;place-items:center;border-radius:50%;font-weight:650;color:hsl(var(--h) 45% 32%);background:hsl(var(--h) 70% 92%);border:1px solid hsl(var(--h) 50% 84%);flex:none}
.rring{position:relative;display:inline-grid;place-items:center;flex:none}
.rring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.rring .rr-bg{fill:none;stroke:var(--line-2);stroke-width:3}.rring .rr-fg{fill:none;stroke-width:3;stroke-linecap:round}
.rring b{font-size:11px;font-weight:650;font-variant-numeric:tabular-nums;position:relative}
.rring.good .rr-fg{stroke:var(--good)}.rring.good b{color:#15803d}.rring.warn .rr-fg{stroke:var(--warn)}.rring.warn b{color:#b45309}.rring.bad .rr-fg{stroke:var(--bad)}.rring.bad b{color:#b91c1c}
.rpill{display:inline-flex;align-items:center;gap:8px}.rpill i{display:block;width:60px;height:5px;background:var(--line-2);border-radius:3px;position:relative;overflow:hidden}.rpill i::after{content:"";position:absolute;inset:0;background:currentColor;width:inherit}.rpill b{font-weight:650;font-variant-numeric:tabular-nums}
.rpill.low{color:var(--good)}.rpill.mid{color:var(--warn)}.rpill.high{color:var(--bad)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:550;padding:3px 9px 3px 7px;border-radius:999px;border:1px solid var(--line);background:var(--card-2);color:var(--ink-2);white-space:nowrap}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--ink-4)}
.pill.good{background:var(--good-bg);border-color:var(--good-line);color:#15803d}.pill.good i{background:var(--good)}
.pill.warn{background:var(--warn-bg);border-color:var(--warn-line);color:#b45309}.pill.warn i{background:var(--warn)}
.pill.bad{background:var(--bad-bg);border-color:var(--bad-line);color:#b91c1c}.pill.bad i{background:var(--bad)}
.pill.pending{background:var(--warn-bg);border-color:var(--warn-line);color:#b45309}.pill.pending .ico{animation:spin 2.4s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.chk{position:relative;display:inline-block;width:18px;height:18px;cursor:pointer;vertical-align:middle}
.chk input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;width:100%;height:100%}
.chk span{position:absolute;inset:0;border:1.5px solid var(--line-strong);border-radius:5px;background:#fff;transition:all .12s;pointer-events:none}
.chk input:checked+span,.chk input:indeterminate+span{background:var(--accent);border-color:var(--accent)}
.chk input:checked+span::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.chk input:indeterminate+span::after{content:"";position:absolute;left:4px;right:4px;top:7px;height:2px;background:#fff}
.acts{display:inline-flex;gap:2px;padding:2px;border-radius:9px;background:var(--card-2);border:1px solid var(--line-2);opacity:0;transform:translateX(4px);transition:all .12s}
.mrow:hover .acts,.mrow.kb-focus .acts,.mrow.selected .acts{opacity:1;transform:none}
.act{position:relative;width:30px;height:28px;display:inline-grid;place-items:center;border-radius:7px;border:none;background:transparent;color:var(--ink-3);cursor:pointer;padding:0;text-decoration:none}
.act:hover{background:#fff;color:var(--ink);box-shadow:var(--sh-1)}.act.ok:hover{color:var(--good)}.act.bad:hover{color:var(--bad)}
.act[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:11px;font-weight:500;padding:4px 8px;border-radius:6px;white-space:nowrap;pointer-events:none;z-index:5}

/* Bulk-Bar / Undo / Pager */
.bulk-bar{display:none;position:fixed;bottom:22px!important;left:50%!important;right:auto!important;top:auto!important;width:auto!important;transform:translateX(-50%)!important;z-index:900;align-items:center;gap:14px;background:rgba(15,23,42,.92);backdrop-filter:blur(12px) saturate(160%);color:#fff;border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:8px 8px 8px 16px;box-shadow:var(--sh-3);font-size:13px;animation:rise .18s cubic-bezier(.2,.8,.2,1)}
.bulk-bar.visible{display:flex}@keyframes rise{from{transform:translate(-50%,10px);opacity:0}}
.bulk-bar-count{font-weight:600}.bulk-bar-actions{display:flex;gap:6px}
.bb-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:9px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);color:#fff;font-size:12.5px;font-weight:550;cursor:pointer;text-decoration:none;font-family:var(--font);transition:background .12s}
.bb-btn:hover{background:rgba(255,255,255,.16)}.bb-btn.icon{padding:8px 9px}
.bb-btn.primary{background:var(--accent);border-color:var(--accent)}.bb-btn.primary:hover{background:var(--accent-h)}
.bb-btn.good{background:rgba(22,163,74,.9);border-color:transparent}.bb-btn.bad{background:rgba(220,38,38,.9);border-color:transparent}
.pv-actions .bb-btn.ghost{background:#fff;color:var(--ink-2);border-color:var(--line-strong);box-shadow:var(--sh-1)}.pv-actions .bb-btn.ghost:hover{background:var(--card-2);color:var(--ink)}
.undo-bar{position:fixed;bottom:22px;right:22px;z-index:1250;display:flex;align-items:center;gap:14px;background:rgba(15,23,42,.94);backdrop-filter:blur(12px);color:#fff;border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:10px 12px 10px 16px;box-shadow:var(--sh-3);font-size:13px;transform:translateY(12px);opacity:0;transition:all .2s}
.undo-bar.show{transform:none;opacity:1}body.has-selection .undo-bar{bottom:84px}
.undo-btn{background:#fff;color:var(--ink);border:none;border-radius:9px;padding:7px 11px;font-weight:600;font-size:12.5px;cursor:pointer;font-family:var(--font)}
.undo-ring{width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,.15);position:relative;overflow:hidden}
.undo-ring i{position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--accent);border-right-color:transparent;border-bottom-color:transparent;animation:ring 15s linear forwards}@keyframes ring{to{transform:rotate(360deg);opacity:.15}}
.pager{display:inline-flex;gap:2px}.pager .pg{min-width:28px;height:28px;padding:0 8px;border:1px solid transparent;background:transparent;border-radius:7px;font-size:12.5px;cursor:pointer;color:var(--ink-3);font-family:var(--font)}
.pager .pg:hover:not(:disabled){background:var(--line-2)}.pager .pg.cur{background:var(--ink);color:#fff;font-weight:600}.pager .pg:disabled{opacity:.3}

/* Drawer */
.pv-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.35);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .18s;z-index:980}
.pv-backdrop.open{opacity:1;pointer-events:auto}
.pv-drawer{position:fixed;top:10px;right:10px;bottom:10px;width:min(660px,94vw);background:#fff;border-radius:16px;box-shadow:var(--sh-3);transform:translateX(calc(100% + 20px));transition:transform .24s cubic-bezier(.2,.8,.2,1);z-index:990;display:flex;flex-direction:column;overflow:hidden}
.pv-drawer.open{transform:none}
.pv-inner{display:flex;flex-direction:column;height:100%;overflow:hidden}
.pv-loading{padding:48px;text-align:center;color:var(--ink-4)}
.pv-head{padding:20px 22px 14px;border-bottom:1px solid var(--line);background:var(--card-2);position:relative}
.pv-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border:1px solid var(--line);background:#fff;border-radius:9px;cursor:pointer;font-size:14px;color:var(--ink-3);box-shadow:var(--sh-1)}
.pv-close:hover{color:var(--ink);border-color:var(--line-strong)}
.pv-subj{font-size:16px;font-weight:650;letter-spacing:-.02em;padding-right:44px;margin-bottom:10px;word-break:break-word;color:var(--ink)}
.pv-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:12.5px;color:var(--ink-3)}
.pv-from{font-weight:600;color:var(--ink)}
.pv-reasons{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.pv-reasons span{font-size:11.5px;font-weight:500;background:var(--warn-bg);color:#b45309;border:1px solid var(--warn-line);border-radius:999px;padding:2px 9px}
.pv-score{margin-top:10px;font-size:12px;color:var(--ink-3)}.pv-score b{color:var(--ink);font-weight:600}.pv-score code{font-family:var(--mono);font-size:10.5px;background:var(--card-2);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.pv-actions{display:flex;gap:6px;padding:12px 22px;border-bottom:1px solid var(--line);align-items:center;flex-wrap:wrap}
.pv-spacer{flex:1}
.pv-att{padding:10px 22px;font-size:12.5px;border-bottom:1px solid var(--line);display:flex;gap:6px;flex-wrap:wrap;align-items:center;color:var(--ink-3)}
.pv-att span{background:var(--card-2);border:1px solid var(--line);border-radius:7px;padding:3px 9px;color:var(--ink-2);font-weight:500}
.pv-body{flex:1;overflow:auto;margin:0;padding:20px 22px;font:13.5px/1.6 var(--font);white-space:pre-wrap;word-break:break-word;color:var(--ink-2)}
.pv-link{color:var(--bad);text-decoration:line-through;cursor:not-allowed;background:var(--bad-bg);border-radius:4px;padding:0 3px}

/* Toasts / Hilfe */
#toast-container{position:fixed;top:16px;right:16px;z-index:1300;display:flex;flex-direction:column;gap:8px}
.toast{background:rgba(15,23,42,.94);color:#fff;padding:10px 14px;border-radius:10px;font-size:13px;box-shadow:var(--sh-3);opacity:0;transform:translateY(-6px);transition:all .2s}
.toast.show{opacity:1;transform:none}.toast.good{background:var(--good)}.toast.bad{background:var(--bad)}
.kb-help{position:fixed;inset:0;background:rgba(15,23,42,.4);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:1300}
.kb-help.open{display:flex}
.kb-card{background:#fff;border-radius:14px;padding:20px 24px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px 22px;font-size:13px;min-width:380px;box-shadow:var(--sh-3)}
.kb-card b{grid-column:1/-1;margin-bottom:4px;font-weight:650}
.kb-card kbd{display:inline-block;background:var(--card-2);border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:5px;padding:0 6px;font-size:11px;margin-right:4px;font-family:var(--mono)}

@media (max-width:760px){
  .mhead{display:none}
  .mrow{grid-template-columns:28px 34px minmax(0,1fr) 40px;grid-template-areas:"c av main risk" "c av status date" "c av act act";gap:4px 8px}
  .mc-check{grid-area:c}.mc-av{grid-area:av;align-self:start;padding-top:2px}.mc-main{grid-area:main}.mc-risk{grid-area:risk;justify-self:end}.mc-status{grid-area:status}.mc-date{grid-area:date;justify-self:end}.mc-act{grid-area:act;justify-content:flex-start}
  .acts{opacity:1;transform:none}
  .hero{flex-direction:column;align-items:flex-start;gap:14px}.hero-r{width:100%;justify-content:space-between}
  .stats-row{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:8px!important}.stat-card{min-width:0!important;overflow:hidden}
  .spark-head{flex-wrap:wrap;gap:4px}
  .bulk-bar{left:8px!important;right:8px!important;transform:none!important;flex-wrap:wrap;justify-content:center}
  .pv-drawer{inset:0;width:100vw;border-radius:0}
}
.stat-card{border-left-width:1px!important;border-left-color:var(--line)!important;position:relative}
.stat-card .stat-icon{display:none!important}
.stat-card::after{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--ink-4)}
.stat-hold::after{background:var(--warn)}.stat-del::after{background:var(--bad)}.stat-card:first-child::after{background:var(--accent)}.stat-card:last-child::after{background:var(--good)}

/* ── Breite begrenzen: auf Ultrawide bleibt alles kompakt und homogen ── */
.main>*{max-width:1320px;margin-left:auto;margin-right:auto}
.main{padding:24px 32px 80px!important}
.spark-card{padding:14px 18px 8px}
#spark-wrap{width:100%}#spark{display:block;width:100%;height:96px}
.spark-legend{gap:14px}.spark-legend i{margin-right:6px}
/* Stat-Karten: kleiner, dichter, Icon links */
@media (min-width:821px){.stats-row{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important}}
.stat-card{padding:14px 16px!important;display:flex!important;align-items:center;gap:14px}
.stat-card .stat-value{font-size:24px!important}
.stat-card::after{top:12px;bottom:12px}
/* Filter-Pills */
.filter-pill{font-family:var(--font)!important;font-weight:500!important;border-radius:999px!important;border:1px solid var(--line-strong)!important;background:#fff!important;color:var(--ink-2)!important;padding:6px 12px!important;font-size:12.5px!important;box-shadow:var(--sh-1)!important;display:inline-flex;align-items:center;gap:6px;text-decoration:none!important}
.filter-pill.active{background:var(--ink)!important;color:#fff!important;border-color:var(--ink)!important}
.filter-pill.hold.active{background:var(--warn)!important;border-color:var(--warn)!important}
.filter-pill.del.active{background:var(--bad)!important;border-color:var(--bad)!important}
/* Hero-Feinschliff */
.hero-shield{position:relative}
.hero-shield::after{content:"";position:absolute;inset:-6px;border-radius:16px;border:1.5px solid rgba(74,222,128,.45);animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{transform:scale(.85);opacity:.9}70%{transform:scale(1.15);opacity:0}100%{opacity:0}}
.hero-s #hero-last{color:#fff;font-weight:500}

.pv-note{margin-top:10px;font-size:12px;color:var(--ink-3);background:var(--card-2);border:1px dashed var(--line-strong);border-radius:8px;padding:8px 10px}

/* ═══ v21.2 — Mehrwert-Blöcke ═══ */
.hero-value{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px;color:rgba(255,255,255,.8);margin:6px 0 4px}
.hero-value b{color:#fff;font-weight:650;font-variant-numeric:tabular-nums}.hero-value i{color:rgba(255,255,255,.3);font-style:normal}
.hero-value:empty{display:none}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:4px 0 10px;flex-wrap:wrap}
.sec-head h2{font-size:15px;font-weight:650;letter-spacing:-.02em;margin:0;color:var(--ink)}.sec-head h2 .dim{font-weight:500;font-size:12.5px;margin-left:6px}
.sec-note{font-size:12.5px;color:var(--ink-3)}.sec-note b{color:var(--ink);font-weight:600}
section.threats,section.attackers{margin-bottom:16px}

/* Bedrohungs-Karten */
.threat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.tcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh-1);position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px}
.tcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ink-4)}
.tcard.sev3::before{background:var(--bad)}.tcard.sev2::before{background:var(--warn)}.tcard.sev1::before{background:var(--ink-4)}
.tcard-top{display:flex;align-items:center;justify-content:space-between}
.tcard-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--card-2);border:1px solid var(--line-2);color:var(--ink-3)}
.tcard.sev3 .tcard-ico{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad)}.tcard.sev2 .tcard-ico{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.tcard-n{font-size:26px;font-weight:650;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tcard-l{font-size:13px;font-weight:600;color:var(--ink)}
.tcard-ex{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-3);text-decoration:none;padding:6px 8px;margin:0 -8px;border-radius:7px;min-width:0}
.tcard-ex:hover{background:var(--card-2);color:var(--ink)}
.tcard-ex span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rr{display:inline-grid;place-items:center;min-width:26px;height:20px;padding:0 5px;border-radius:6px;font-size:11px;font-weight:650;font-variant-numeric:tabular-nums;flex:none}
.rr.bad{background:var(--bad-bg);color:#b91c1c}.rr.warn{background:var(--warn-bg);color:#b45309}.rr.good{background:var(--good-bg);color:#15803d}

/* Angreifer */
.atk-list{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);overflow:hidden}
.atk-head,.atk-row{display:grid;grid-template-columns:minmax(0,1fr) 64px 76px 100px 168px;gap:10px;align-items:center;padding:10px 16px}
.atk-head{background:var(--card-2);border-bottom:1px solid var(--line);font-size:11.5px;font-weight:550;color:var(--ink-3)}
.atk-row{border-bottom:1px solid var(--line-2);font-size:13px}.atk-row:last-child{border-bottom:none}
.atk-row.is-blocked{opacity:.6}
.atk-dom{display:flex;align-items:center;gap:10px;min-width:0}.atk-dom>div{min-width:0}
.atk-dom b{font-weight:600;display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
.atk-dom small{display:block;font-size:11.5px;color:var(--ink-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.atk-flag{font-size:18px;line-height:1;width:26px;text-align:center;flex:none}
.atk-new{display:inline-flex;align-items:center;gap:3px;margin-left:8px;font-size:10.5px;font-weight:650;color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:999px;padding:1px 7px;vertical-align:1px}
.atk-n{font-weight:600;font-variant-numeric:tabular-nums}.atk-since{color:var(--ink-3);font-size:12.5px}
.atk-act{text-align:right}
.bb-btn.ghost.sm{background:#fff;color:var(--ink-2);border-color:var(--line-strong);padding:6px 10px;font-size:12px;box-shadow:var(--sh-1);white-space:nowrap}.bb-btn.ghost.sm:hover{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-line)}

/* Trend-Chips an Stat-Karten */
.delta{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:650;padding:1px 6px;border-radius:999px;margin-left:6px;vertical-align:1px}
.delta.good{background:var(--good-bg);color:#15803d}.delta.bad{background:var(--bad-bg);color:#b91c1c}.delta.flat{background:var(--card-2);color:var(--ink-4);border:1px solid var(--line)}
.delta-vs{display:block;font-size:11px;color:var(--ink-4);margin-top:2px;font-weight:400}.delta-vs b{color:var(--ink-2)}

/* Vertrauens-Indikator in der Zeile */
.mc-av{position:relative}
.trust{position:absolute;right:-3px;bottom:-3px;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;border:2px solid #fff;color:#fff}
.trust.known{background:var(--good)}.trust.new{background:var(--warn)}.trust.unknown{background:var(--ink-4)}.trust.suspicious{background:var(--bad)}
.mc-trust{font-size:11px;font-weight:550;padding:0 6px;border-radius:999px;white-space:nowrap}
.mc-trust.known{color:#15803d;background:var(--good-bg)}.mc-trust.new{color:#b45309;background:var(--warn-bg)}.mc-trust.unknown{color:var(--ink-4);background:var(--card-2)}.mc-trust.suspicious{color:#b91c1c;background:var(--bad-bg)}

/* Drawer: Klartext-Gründe */
.pv-threat{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:8px;background:var(--card-2);border:1px solid var(--line);color:var(--ink-2)}
.pv-threat.sev3{background:var(--bad-bg);border-color:var(--bad-line);color:#b91c1c}.pv-threat.sev2{background:var(--warn-bg);border-color:var(--warn-line);color:#b45309}
.pv-why{margin-top:12px}.pv-why-t{font-size:11.5px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.pv-why ol{margin:0;padding:0 0 0 22px;display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--ink)}
.pv-why li::marker{color:var(--ink-4);font-weight:600;font-size:12px}
.pv-why li small{display:block;font-size:11px;color:var(--ink-4);font-family:var(--mono)}
.pv-reasons{display:none}
@media (max-width:760px){
  .atk-head{display:none}.atk-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"dom n" "dom risk" "act act";gap:4px 10px}
  .atk-dom{grid-area:dom}.atk-n{grid-area:n;text-align:right}.atk-row>div:nth-child(3){grid-area:risk;text-align:right}.atk-since{display:none}.atk-act{grid-area:act;text-align:left;margin-top:6px}
  .threat-grid{grid-template-columns:1fr 1fr}
}
.mempty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:48px 24px;color:var(--ink-3);font-size:13px;text-align:center}
.mempty .ico{color:var(--good)}.mempty b{color:var(--ink);font-size:14px}
.pv-actions{gap:5px;padding:10px 18px}
.pv-actions .bb-btn{padding:7px 10px;font-size:12px}
.pv-actions .bb-btn.ghost{padding:7px 9px}

/* ═══ v21.3 — Insights-Layout ═══ */
.ins-bar{display:flex;align-items:center;gap:22px;background:linear-gradient(135deg,#0b0f19,#111827 55%,#16233d);color:#fff;border-radius:var(--r);padding:16px 22px;margin-bottom:14px;box-shadow:var(--sh-2);flex-wrap:wrap}
.ins-prot{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--good);border-radius:10px;padding:10px 16px;min-width:104px;flex:none}
.ins-prot b{font-size:19px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.ins-prot span{font-size:10.5px;opacity:.9;margin-top:3px;text-transform:uppercase;letter-spacing:.05em}
.ins-main{flex:1;min-width:180px}
.ins-n{font-size:22px;font-weight:650;letter-spacing:-.025em}.ins-n b{font-size:28px;font-variant-numeric:tabular-nums}
.ins-sub{font-size:12.5px;color:rgba(255,255,255,.55);margin-top:2px}.ins-sub span{color:rgba(255,255,255,.85);font-weight:600}
.ins-kpis{display:flex;gap:10px;flex-wrap:wrap}
.ins-kpi{display:flex;flex-direction:column;align-items:center;gap:2px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-radius:10px;padding:8px 14px;min-width:82px}
.ins-kpi .ico{color:rgba(255,255,255,.5)}
.ins-kpi b{font-size:15px;font-weight:650;font-variant-numeric:tabular-nums}
.ins-kpi small{font-size:10.5px;color:rgba(255,255,255,.5)}

.ins-grid{display:grid;grid-template-columns:250px minmax(0,1fr) 296px;gap:14px;margin-bottom:14px;align-items:start}
.ins-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.ins-grid .card,.ins-grid2 .card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.ins-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line-2);font-size:11.5px;font-weight:650;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;flex-wrap:wrap}
.ins-note{font-weight:500;text-transform:none;letter-spacing:0;font-size:11.5px;color:var(--ink-4)}
.ins-legend{display:flex;gap:10px;flex-wrap:wrap;font-weight:500;text-transform:none;letter-spacing:0;font-size:11px;color:var(--ink-3)}
.ins-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.ins-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 16px;color:var(--ink-4);font-size:12.5px;text-align:center}
.ins-empty .ico{color:var(--good)}

/* Risikolage */
.lvl-body{padding:16px;text-align:center}
.lvl-gauge{position:relative;width:104px;height:104px;margin:0 auto 10px}
.lvl-gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.lvl-gauge .g-bg{fill:none;stroke:var(--line-2);stroke-width:9}
.lvl-gauge .g-fg{fill:none;stroke:var(--good);stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1)}
.lvl-num{position:absolute;inset:0;display:grid;place-content:center;line-height:1}
.lvl-num b{font-size:30px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.lvl-num small{font-size:12px;color:var(--ink-4)}
.lvl-txt{font-size:12.5px;color:var(--ink-3);line-height:1.45}
.lvl-split{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-2);margin-top:auto}
.lvl-box{padding:12px;text-align:center;border-right:1px solid var(--line-2)}
.lvl-box:last-child{border-right:none}
.lvl-box b{display:block;font-size:20px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lvl-box span{font-size:11px;color:var(--ink-4)}
.lvl-box.bad b{color:var(--bad)}.lvl-box.warn b{color:var(--warn)}

/* Zeitverlauf */
.ins-chart #tl-wrap{padding:10px 12px 6px}
#tl{display:block;width:100%}

/* Angriffstypen-Liste */
.ty-list{padding:8px 0}
.ty-row{display:grid;grid-template-columns:8px minmax(0,1fr) 34px;gap:10px;align-items:center;padding:7px 16px}
.ty-dot{width:8px;height:8px;border-radius:50%}
.ty-main b{display:block;font-size:12.5px;font-weight:550;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ty-bar{display:block;height:4px;background:var(--line-2);border-radius:2px;margin-top:5px;overflow:hidden}
.ty-bar i{display:block;height:100%;border-radius:2px}
.ty-n{text-align:right;font-weight:650;font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink)}

/* Marken */
.brand-list{padding:6px 0}
.brand-row{display:flex;align-items:center;gap:10px;padding:8px 16px;font-size:13px}
.brand-ini{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:var(--bad-bg);color:var(--bad);font-weight:700;font-size:12px;flex:none}
.brand-row b{flex:1;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-n{font-weight:650;font-variant-numeric:tabular-nums;color:var(--ink-3)}

/* Angreifer-Domains (kompakt in der Karte) */
.atk-list{padding:6px 0}
.atk-row{display:grid;grid-template-columns:20px minmax(0,1fr) 32px 34px 62px;gap:8px;align-items:center;padding:8px 14px;border:none;font-size:13px}
.atk-flag{font-size:15px;line-height:1;text-align:center}
.atk-dom{min-width:0}
.atk-dom b{font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-width:100%;vertical-align:bottom}
.atk-dom small{display:block;font-size:10.5px;color:var(--ink-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.atk-new{margin-left:6px;font-size:9.5px;font-weight:700;color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:999px;padding:0 6px;vertical-align:1px}
.atk-n{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink-3);font-size:12px}
.atk-act{text-align:right}
.atk-btn{width:28px;height:26px;display:inline-grid;place-items:center;border:1px solid var(--line-strong);background:#fff;border-radius:7px;color:var(--ink-3);cursor:pointer;padding:0}
.atk-btn:hover{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad)}
.atk-blocked{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:650;color:var(--bad);white-space:nowrap}
.atk-row.is-blocked{opacity:.55}
.atk-head{display:none}

@media (max-width:1180px){ .ins-grid{grid-template-columns:1fr 1fr}.ins-types{grid-column:1/-1} }
@media (max-width:760px){ .ins-grid,.ins-grid2{grid-template-columns:1fr}.ins-bar{gap:14px}.ins-kpis{width:100%}.ins-kpi{flex:1} }

.atk-blocked{font-size:10px}
.brand-list{padding:8px 0 12px}
.lvl-txt{padding:0 6px}

/* ═══ v21.3.1 — Mobile & Zugänglichkeit ═══ */
.ins-toggle{display:none}
.ins-detail{display:contents}

@media (max-width:820px){
  .main{padding:14px 12px 88px!important}
  .main>*{max-width:none}
  .page-title,.content h1{font-size:19px!important}
  .page-desc{font-size:12.5px}

  /* Status-Leiste: Badge + Zahl nebeneinander, Kennzahlen als 2×2-Raster */
  .ins-bar{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 14px;padding:14px;border-radius:14px}
  .ins-prot{min-width:0;padding:8px 12px}
  .ins-prot b{font-size:16px}.ins-prot span{font-size:9px}
  .ins-n{font-size:16px}.ins-n b{font-size:23px}
  .ins-sub{font-size:11.5px}
  .ins-kpis{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  .ins-kpi{min-width:0;padding:8px 4px;border-radius:9px}
  .ins-kpi b{font-size:13.5px}.ins-kpi small{font-size:9.5px;text-align:center;line-height:1.2}

  /* Einklappbare Sicherheitsübersicht */
  .ins-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;gap:10px;margin-bottom:12px;
    background:var(--card);border:1px solid var(--line);border-radius:10px;padding:13px 14px;font:600 13.5px var(--font);color:var(--ink);cursor:pointer;box-shadow:var(--sh-1)}
  .ins-toggle span{display:flex;align-items:center;gap:8px}
  .ins-toggle .ico:last-child{transition:transform .2s;color:var(--ink-4)}
  .ins-toggle[aria-expanded="true"] .ico:last-child{transform:rotate(90deg)}
  .ins-detail{display:none}
  .ins-detail.open{display:block}
  .ins-grid,.ins-grid2{grid-template-columns:1fr;gap:10px;margin-bottom:10px}

  /* Risikolage kompakt: Gauge links, Text rechts */
  .lvl-body{display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;align-items:center;text-align:left;padding:14px}
  .lvl-gauge{width:88px;height:88px;margin:0}
  .lvl-num b{font-size:26px}
  .lvl-txt{padding:0;font-size:13px}

  /* Angreifer-Domains: Domain über volle Breite, Meta darunter */
  .atk-row{grid-template-columns:24px minmax(0,1fr) auto;grid-template-areas:"flag dom act" "flag meta act";gap:2px 10px;padding:11px 14px;border-bottom:1px solid var(--line-2)}
  .atk-row:last-child{border-bottom:none}
  .atk-flag{grid-area:flag;align-self:center;font-size:17px}
  .atk-dom{grid-area:dom}
  .atk-dom small{display:none}
  .atk-row .rr{grid-area:meta;justify-self:start;margin-top:3px}
  .atk-n{grid-area:meta;justify-self:start;margin-left:44px;margin-top:5px;text-align:left}
  .atk-act{grid-area:act;align-self:center}
  .atk-btn{width:40px;height:36px}

  /* Marken & Typen: größere Trefferflächen */
  .brand-row,.ty-row{padding:11px 14px}
  .ins-h{padding:11px 14px;font-size:11px}

  /* Beispiel-Karten einspaltig, Beispiele bleiben tippbar */
  .threat-grid{grid-template-columns:1fr;gap:10px}
  .tcard-ex{padding:10px 8px}
  .sec-head h2{font-size:14px}

  /* Mailliste: Touch-Ziele ≥ 40 px */
  .mrow{min-height:66px;padding:10px 12px}
  .act{width:40px;height:36px}
  .acts{gap:0}
  .chk{width:22px;height:22px}
  .chk input:checked+span::after{left:7px;top:3px;width:6px;height:11px}
  .mc-subj{font-size:14px}
  .filter-pill{padding:9px 14px!important;font-size:13px!important}
  .cmd-search input{height:44px}

  /* Bulk-Bar über der Tab-Leiste, große Buttons */
  .bulk-bar{left:8px!important;right:8px!important;bottom:10px!important;transform:none!important;padding:8px;gap:8px;border-radius:14px}
  .bulk-bar-count{font-size:12.5px;padding-left:6px}
  .bulk-bar-actions{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .bb-btn{justify-content:center;padding:11px 8px;font-size:12.5px}
  .bb-btn.icon{grid-column:1/-1;order:9}
  .undo-bar{left:8px;right:8px;bottom:10px;justify-content:space-between}
  body.has-selection .undo-bar{bottom:118px}
  .pv-drawer{inset:0;width:100vw;border-radius:0}
  .pv-actions{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);z-index:2}
  .pv-actions .bb-btn{flex:1;justify-content:center;padding:11px 8px}
  .pv-body{padding:16px 16px 24px}
}

@media (max-width:420px){
  .ins-kpis{grid-template-columns:repeat(2,1fr)}
  .ins-legend{gap:6px;font-size:10px}
  .threat-grid{grid-template-columns:1fr}
  .ins-bar{grid-template-columns:1fr}
  .ins-prot{flex-direction:row;gap:8px;align-items:baseline;justify-content:flex-start}
  .ins-prot span{margin-top:0}
}

/* Bewegung reduzieren */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* Tastatur-Fokus sichtbar */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.act:focus-visible,.atk-btn:focus-visible,.bb-btn:focus-visible{outline-offset:1px}
.ins-range{display:inline-flex;gap:2px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:2px;margin:6px 0 4px}
.ins-range button{border:none;background:transparent;color:rgba(255,255,255,.6);font:550 11.5px var(--font);padding:4px 10px;border-radius:6px;cursor:pointer}
.ins-range button:hover{color:#fff}
.ins-range button.on{background:rgba(255,255,255,.16);color:#fff}
@media (max-width:820px){ .mc-trust{display:none} .ins-range{margin:4px 0 2px} }
@media (max-width:820px){
  /* Aktionsleiste flacher, Chevron weg (Tippen auf die Zeile öffnet die Vorschau) */
  .mrow .acts{background:transparent;border:none;padding:0;gap:2px;justify-content:flex-start}
  .mrow .act{width:38px;height:34px}
  .mrow .mc-act a.act[href*="mail_detail"]{display:none}
  .mrow{min-height:0;padding:10px 12px 8px}
  .mc-check{align-self:start;padding-top:4px}
  .mc-av{align-self:start}
  .mc-status,.mc-date{align-self:center}
  .mfoot{padding:12px 14px}
}
@media (max-width:820px){
  /* Angreifer-Zeile mobil: Zähler neben Risiko, Sperren-Button rechts */
  .atk-row{grid-template-columns:22px minmax(0,1fr) auto;grid-template-areas:"flag dom act" "flag meta act";gap:3px 10px}
  .atk-row .rr{margin-top:2px}
  .atk-n{margin-left:40px;margin-top:4px;font-size:11.5px}
  /* Sparkline-Labels luftiger */
  #spark text{font-size:9px}
}

/* ═══ v21.4 — Toggle auf allen Geräten + visueller Feinschliff ═══ */
.ins-toggle{display:flex;align-items:center;gap:14px;width:100%;margin-bottom:14px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:12px 16px;font:var(--font);color:var(--ink);cursor:pointer;box-shadow:var(--sh-1);transition:border-color .12s,box-shadow .12s}
.ins-toggle:hover{border-color:var(--line-strong);box-shadow:var(--sh-2)}
.it-l{display:flex;align-items:center;gap:9px;flex:none}
.it-l .ico{color:var(--accent)}
.it-l b{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.it-sum{display:flex;align-items:center;gap:6px;flex:1;flex-wrap:wrap;min-width:0}
.it-sum:empty{flex:1}
.it-r{display:flex;align-items:center;gap:6px;flex:none;color:var(--ink-4);font-size:12.5px;font-weight:500}
.it-r .ico{transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.ins-toggle[aria-expanded="true"] .it-r .ico{transform:rotate(90deg)}
.sm{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;color:var(--ink-3);background:var(--card-2);border:1px solid var(--line-2);border-radius:999px;padding:3px 10px;white-space:nowrap}
.sm b{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums}
.sm.bad{background:var(--bad-bg);border-color:var(--bad-line);color:#b91c1c}.sm.bad b{color:#b91c1c}
.sm.lv4,.sm.lv5{background:var(--bad-bg);border-color:var(--bad-line);color:#b91c1c}.sm.lv4 b,.sm.lv5 b{color:#b91c1c}
.sm.lv3{background:var(--warn-bg);border-color:var(--warn-line);color:#b45309}.sm.lv3 b{color:#b45309}
.ins-detail{display:none}
.ins-detail.open{display:block;animation:insIn .22s cubic-bezier(.2,.8,.2,1)}
@keyframes insIn{from{opacity:0;transform:translateY(-6px)}}

/* Statusleiste: ruhiger, mit feinem Raster und Ring um die Schutzquote */
.ins-bar{position:relative;overflow:hidden;background:linear-gradient(135deg,#0b0f19 0%,#101a2e 55%,#16233d 100%);border:1px solid rgba(255,255,255,.06)}
.ins-bar::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:22px 22px;opacity:.5;pointer-events:none}
.ins-bar>*{position:relative}
.ins-prot{background:linear-gradient(160deg,#16a34a,#15803d);box-shadow:0 6px 18px -6px rgba(22,163,74,.7),inset 0 1px 0 rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.14)}
.ins-n b{background:linear-gradient(180deg,#fff,#cbd5e1);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ins-kpi{transition:background .12s,border-color .12s}
.ins-kpi:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16)}

/* Karten: Kopfzeile abgesetzt, Hover-Tiefe */
.ins-grid .card,.ins-grid2 .card{transition:box-shadow .15s,border-color .15s}
.ins-grid .card:hover,.ins-grid2 .card:hover{box-shadow:var(--sh-2)}
.ins-h{background:linear-gradient(180deg,#fcfcfd,#f8f9fb)}

/* Gauge: Farbverlauf + weicher Schatten */
.lvl-gauge .g-fg{filter:drop-shadow(0 2px 6px rgba(15,23,42,.14))}
.lvl-gauge::after{content:"";position:absolute;inset:14px;border-radius:50%;background:radial-gradient(closest-side,rgba(15,23,42,.05),transparent);pointer-events:none}
.lvl-box{transition:background .12s}.lvl-box:hover{background:var(--card-2)}

/* Typen-Liste: Zeilen-Hover, Balken mit Verlauf */
.ty-row{border-radius:8px;margin:0 8px;padding:7px 8px;transition:background .1s}
.ty-row:hover{background:var(--card-2)}
.ty-bar i{background-image:linear-gradient(90deg,currentColor,currentColor)}
.ty-n{font-size:13.5px}

/* Marken: Initialen farbig nach Hash */
.brand-row{border-radius:8px;margin:0 8px;padding:8px;transition:background .1s}
.brand-row:hover{background:var(--card-2)}
.brand-ini{background:linear-gradient(160deg,var(--bad-bg),#fff);border:1px solid var(--bad-line)}

/* Angreifer: Hover + Button erst bei Bedarf betont */
.atk-row{border-radius:8px;margin:0 8px;padding:8px 8px;transition:background .1s}
.atk-row:hover{background:var(--card-2)}
.atk-btn{opacity:.55;transition:opacity .12s,background .12s,color .12s}
.atk-row:hover .atk-btn,.atk-btn:focus-visible{opacity:1}

/* Beispiel-Karten: Farbkante kräftiger, Hover hebt an */
.tcard{transition:transform .14s,box-shadow .14s}
.tcard:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}
.tcard::before{width:4px}

@media (max-width:820px){
  .ins-toggle{padding:13px 14px;gap:10px;margin-bottom:12px}
  .it-sum{display:none}
  .it-r .it-word{display:none}
  .ins-detail.open{animation:none}
}
/* Angreifer-Karte: Domain mehr Platz, Beispielbetreff nur bei genug Breite */
.atk-row{grid-template-columns:20px minmax(0,1fr) 30px 34px 34px;gap:8px}
.atk-dom b{font-size:12.5px}
@media (max-width:1500px){ .atk-dom small{display:none} .atk-dom{line-height:1.35} }
.ins-grid2{grid-template-columns:minmax(0,0.86fr) minmax(0,1.14fr)}
/* Beispielkarten: Beispiele optisch als Liste, gleiche Höhe */
.threat-grid{align-items:stretch}
.tcard{min-height:150px}
.tcard-ex{border-top:1px solid var(--line-2);border-radius:0;margin:0;padding:7px 0}
.tcard-ex:hover{background:transparent;color:var(--accent)}
.tcard-l{margin-bottom:2px}

/* ═══ v21.4.1 — Statistik-Seite ═══ */
.stats-chart-wrap{height:auto!important;min-height:260px}
#mailChartWrap{width:100%}
#mailChart{display:block;width:100%;height:260px}
.chart-empty{padding:56px 24px;text-align:center;color:var(--ink-4);font-size:13px}
.stats-card,.stats-chart-card,.stats-top{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1)}
.stats-head,.stats-card-head{padding:12px 16px;border-bottom:1px solid var(--line-2);background:linear-gradient(180deg,#fcfcfd,#f8f9fb);font-size:11.5px;font-weight:650;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;justify-content:space-between;gap:10px}
.stats-head .dim,.stats-card-head .dim{font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink-4)}
.sender-row,.top-row{display:grid;grid-template-columns:26px minmax(0,1fr) 42px 120px;gap:10px;align-items:center;padding:9px 16px;border-bottom:1px solid var(--line-2);font-size:13px}
.sender-row:last-child,.top-row:last-child{border-bottom:none}
.sender-row:hover,.top-row:hover{background:var(--card-2)}
.sender-rank{color:var(--ink-4);font-size:11.5px;font-variant-numeric:tabular-nums;text-align:center}
.sender-name{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font)!important;font-size:13px}
.sender-cnt{text-align:right;font-weight:650;font-variant-numeric:tabular-nums;color:var(--ink)}
.sender-bar{height:5px;background:var(--line-2);border-radius:3px;overflow:hidden}
.sender-bar i,.sender-bar>div{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#f59e0b,#dc2626)}
@media (max-width:820px){
  #mailChart{height:210px}
  .sender-row,.top-row{grid-template-columns:22px minmax(0,1fr) 38px;grid-template-areas:"r name cnt" ". bar bar";gap:4px 8px}
  .sender-rank{grid-area:r}.sender-name{grid-area:name}.sender-cnt{grid-area:cnt}.sender-bar{grid-area:bar;margin-top:4px}
}
.top-senders-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);overflow:hidden}
.top-senders-hdr{padding:12px 16px;border-bottom:1px solid var(--line-2);background:linear-gradient(180deg,#fcfcfd,#f8f9fb);display:flex;align-items:center;justify-content:space-between}
.top-senders-title{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:650;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.top-senders-title .ico{color:var(--bad)}
.top-sender-row{display:grid;grid-template-columns:26px minmax(0,1fr) 42px 130px;align-items:center;gap:10px;align-items:center;padding:9px 16px;border-bottom:1px solid var(--line-2);font-size:13px}
.top-sender-row:last-child{border-bottom:none}.top-sender-row:hover{background:var(--card-2)}
.top-sender-rank{color:var(--ink-4);font-size:11.5px;text-align:center;font-variant-numeric:tabular-nums}
.top-sender-addr{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font)!important;font-size:12.5px;color:var(--ink)}
.top-sender-cnt{text-align:right;font-weight:650;font-variant-numeric:tabular-nums;color:var(--bad)}
.top-sender-bar{height:5px;background:var(--line-2);border-radius:3px;overflow:hidden}
.top-sender-bar>div,.top-sender-bar i{height:100%;border-radius:3px;background:linear-gradient(90deg,#f59e0b,#dc2626)}
.report-btn{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:9px 14px;font:550 13px var(--font);color:var(--ink-2);cursor:pointer;box-shadow:var(--sh-1)}
.report-btn:hover{background:var(--card-2);color:var(--ink)}
.stats-cards .stat-card,.stats-summary .stat-card{padding:16px 18px!important}
@media (max-width:820px){
  .top-sender-row{grid-template-columns:22px minmax(0,1fr) 38px;grid-template-areas:"r a c" ". b b";gap:4px 8px}
  .top-sender-rank{grid-area:r}.top-sender-addr{grid-area:a}.top-sender-cnt{grid-area:c}.top-sender-bar{grid-area:b;margin-top:4px}
}

/* Statistik-Seite: Kennzahlen & Diagramm mobil */
.stats-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.stats-kpis .stat-card{display:block!important;padding:14px 16px!important;min-width:0}
.stats-kpis .stat-value{font-size:24px!important;line-height:1.1}
.stats-kpis .stat-label{font-size:12px!important;white-space:normal}
.stats-chart-card{padding:0!important;overflow:hidden}
.stats-chart-card>*{padding-left:16px;padding-right:16px}
.stats-chart-wrap{padding:6px 8px 10px!important}
.stats-period-pills{display:flex;gap:6px}
@media (max-width:820px){
  .stats-kpis{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
  .stats-kpis .stat-card{padding:12px 14px!important}
  .stats-kpis .stat-value{font-size:21px!important}
  .stats-kpis .stat-label{font-size:11.5px!important}
  .stats-chart-wrap{min-height:0;padding:4px 2px 8px!important}
  #mailChart{height:210px}
  .stats-chart-card>*{padding-left:12px;padding-right:12px}
  .report-btn-row{display:flex;justify-content:stretch;margin:12px 0}
  .report-btn{width:100%;justify-content:center;padding:12px}
  .top-sender-row{grid-template-columns:20px minmax(0,1fr) 40px;grid-template-areas:"r a c" ". b b";gap:3px 8px;padding:10px 14px}
  .top-sender-bar-wrap{grid-area:b;margin-top:5px}
  .top-senders-hdr{padding:11px 14px}
}
@media (max-width:420px){ .stats-kpis .stat-value{font-size:19px!important} }

.top-sender-bar-wrap{height:5px;background:var(--line-2);border-radius:3px;overflow:hidden}
.top-sender-bar{height:100%;border-radius:3px;background:linear-gradient(90deg,#f59e0b,#dc2626)}

@media (max-width:820px){.stats-row{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:8px!important}}
/* Statistik: „Top Spam-Quellen" nicht in Großbuchstaben, Emoji-Fallback entfernt */
.top-senders-title{text-transform:none!important;font-size:13px!important;color:var(--ink)!important;letter-spacing:-.01em!important}
.top-senders-hdr>div:last-child{font-size:12px!important;color:var(--ink-4)!important}

/* ═══ v21.5 — Guide & kontextbezogene Hilfe ═══ */
.page-head{position:relative}
.guide-btn{position:absolute;top:2px;right:0;display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line-strong);
  border-radius:999px;padding:7px 14px;font:550 12.5px var(--font);color:var(--ink-2);cursor:pointer;box-shadow:var(--sh-1);transition:all .12s}
.guide-btn:hover{background:var(--accent-bg);border-color:var(--accent-line);color:var(--accent)}
.guide-btn .ico{color:var(--accent)}

.help-dot{display:inline-grid;place-items:center;width:16px;height:16px;margin-left:7px;border-radius:50%;border:1px solid var(--line-strong);
  background:#fff;color:var(--ink-4);font:700 10px var(--font);cursor:pointer;padding:0;vertical-align:1px;flex:none;transition:all .12s}
.help-dot:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.ins-prot .help-dot{position:absolute;top:-6px;right:-6px;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.2);color:#fff}
.ins-prot{position:relative;overflow:visible}
.help-pop{position:absolute;z-index:1400;width:300px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-3);
  padding:14px 16px;opacity:0;transform:translateY(-4px);transition:all .15s cubic-bezier(.2,.8,.2,1)}
.help-pop.show{opacity:1;transform:none}
.help-pop b{display:block;font-size:13px;font-weight:650;margin-bottom:5px;color:var(--ink)}
.help-pop p{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-2)}

/* Rundgang */
body.tour-on{overflow:hidden}
.tour-spot{position:fixed;z-index:1500;border-radius:12px;box-shadow:0 0 0 9999px rgba(15,23,42,.6),0 0 0 2px var(--accent);
  pointer-events:none;transition:all .28s cubic-bezier(.2,.8,.2,1)}
.tour-tip{position:fixed;z-index:1510;width:min(360px,calc(100vw - 24px));background:#fff;border-radius:14px;box-shadow:var(--sh-3);padding:16px 18px 14px;
  animation:tipIn .2s cubic-bezier(.2,.8,.2,1)}
@keyframes tipIn{from{opacity:0;transform:translateY(6px)}}
.tour-tip b{display:block;font-size:14.5px;font-weight:650;letter-spacing:-.015em;margin-bottom:6px;color:var(--ink)}
.tour-tip p{margin:0 0 14px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.tt-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.tt-n{font-size:11px;font-weight:650;color:var(--accent);background:var(--accent-bg);border-radius:999px;padding:2px 9px;font-variant-numeric:tabular-nums}
.tt-x{width:26px;height:26px;display:grid;place-items:center;border:none;background:transparent;border-radius:7px;color:var(--ink-4);cursor:pointer}
.tt-x:hover{background:var(--line-2);color:var(--ink)}
.tt-f{display:flex;align-items:center;gap:8px}
.tt-sp{flex:1}
.tt-f button{border-radius:8px;font:550 12.5px var(--font);cursor:pointer;padding:8px 12px;border:1px solid var(--line-strong);background:#fff;color:var(--ink-2)}
.tt-f button:hover{background:var(--card-2)}
.tt-skip{border-color:transparent!important;color:var(--ink-4)!important;padding-left:2px!important}
.tt-skip:hover{background:transparent!important;color:var(--ink-2)!important}
.tt-next{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;display:inline-flex;align-items:center;gap:5px}
.tt-next:hover{background:var(--accent-h)!important}

@media (max-width:760px){
  .guide-btn{position:static;margin-top:10px;width:100%;justify-content:center;padding:10px}
  .help-pop{width:calc(100vw - 24px);left:12px!important}
  .tour-tip.sheet{top:auto!important;bottom:0!important;left:0!important;width:100vw;border-radius:16px 16px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom))}
  .tour-tip.sheet .tt-f button{padding:11px 14px}
  .tour-tip.sheet .tt-next{flex:1;justify-content:center}
}

.ins-h[data-help]{position:relative;padding-right:40px}
.ins-h .help-dot{position:absolute;right:14px;top:50%;transform:translateY(-50%);margin:0}
.ins-chart .ins-h{align-items:flex-start;flex-direction:column;gap:6px}
.spark-head [data-help]{display:inline-flex;align-items:center}

/* ═══ v21.5 — Hilfeseite ═══ */
.hp-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(135deg,#0b0f19,#111827 55%,#16233d);color:#fff;border-radius:var(--r);padding:18px 22px;margin-bottom:14px;box-shadow:var(--sh-2);flex-wrap:wrap}
.hp-hero b{display:block;font-size:15px;font-weight:650;letter-spacing:-.02em}
.hp-hero span{font-size:13px;color:rgba(255,255,255,.6)}
.hp-cta{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff!important;text-decoration:none;border-radius:10px;padding:10px 16px;font:600 13px var(--font);flex:none}
.hp-cta:hover{background:var(--accent-h)}
.hp-toc{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.hp-toc a{font:550 12.5px var(--font);color:var(--ink-2);text-decoration:none;background:#fff;border:1px solid var(--line-strong);border-radius:999px;padding:6px 13px;box-shadow:var(--sh-1)}
.hp-toc a:hover{background:var(--accent-bg);border-color:var(--accent-line);color:var(--accent)}
.hp-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);padding:20px 22px;margin-bottom:14px;scroll-margin-top:80px}
.hp-card h2{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-size:15.5px;font-weight:650;letter-spacing:-.02em;color:var(--ink)}
.hp-card h2 .ico{color:var(--accent)}
.hp-lead{margin:0 0 12px;font-size:13.5px;color:var(--ink-2);line-height:1.55}
.hp-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.hp-steps>div{background:var(--card-2);border:1px solid var(--line-2);border-radius:10px;padding:14px}
.hp-steps span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;font:700 12px var(--font);margin-bottom:8px}
.hp-steps b{display:block;font-size:13.5px;font-weight:600;margin-bottom:4px}
.hp-steps p{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.hp-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;margin-top:4px}
.hp-table th{text-align:left;font-size:11.5px;font-weight:600;color:var(--ink-3);padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.hp-table td{padding:11px 10px;border-bottom:1px solid var(--line-2);color:var(--ink-2);vertical-align:top}
.hp-table tr:last-child td{border-bottom:none}
.hp-table td:first-child{width:86px}
.hp-note{display:flex;align-items:flex-start;gap:9px;margin-top:14px;background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:10px;padding:11px 13px;font-size:12.5px;line-height:1.5;color:#7c4a02}
.hp-note .ico{flex:none;margin-top:1px}
.hp-note.ok{background:var(--good-bg);border-color:var(--good-line);color:#14612f}
.hp-acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.hp-acts>div{border:1px solid var(--line-2);border-radius:10px;padding:14px;background:var(--card-2)}
.hp-ico{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#fff;border:1px solid var(--line);color:var(--ink-3);margin-bottom:8px}
.hp-ico.good{background:var(--good-bg);border-color:var(--good-line);color:var(--good)}
.hp-ico.bad{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad)}
.hp-acts b{display:block;font-size:13.5px;font-weight:600;margin-bottom:4px}
.hp-acts p{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.hp-dl{margin:0;display:grid;grid-template-columns:1fr;gap:2px}
.hp-dl.two{grid-template-columns:1fr 1fr;gap:2px 28px}
.hp-dl dt{font-size:13px;font-weight:650;color:var(--ink);margin-top:12px}
.hp-dl dd{margin:3px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.hp-faq details{border-bottom:1px solid var(--line-2);padding:2px 0}
.hp-faq details:last-child{border-bottom:none}
.hp-faq summary{cursor:pointer;padding:11px 2px;font-size:13.5px;font-weight:550;color:var(--ink);list-style:none;display:flex;align-items:center;gap:8px}
.hp-faq summary::-webkit-details-marker{display:none}
.hp-faq summary::before{content:"›";color:var(--ink-4);font-size:17px;transition:transform .16s;display:inline-block}
.hp-faq details[open] summary::before{transform:rotate(90deg)}
.hp-faq p{margin:0 0 12px 18px;font-size:12.5px;line-height:1.6;color:var(--ink-3)}
.hp-keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px 20px}
.hp-keys>div{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-3);padding:4px 0}
.hp-keys kbd{font-family:var(--mono);font-size:10.5px;background:var(--card-2);border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:5px;padding:2px 7px;color:var(--ink-2)}
.hp-contact{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.hp-contact b{font-size:14.5px;font-weight:650}
.hp-contact p{margin:3px 0 0;font-size:13px;color:var(--ink-3)}
@media (max-width:820px){
  .hp-card{padding:16px 14px}
  .hp-dl.two{grid-template-columns:1fr}
  .hp-hero{flex-direction:column;align-items:flex-start}.hp-cta{width:100%;justify-content:center}
  .hp-toc{gap:5px}.hp-toc a{font-size:12px;padding:6px 11px}
  .hp-table td:first-child{width:72px}
  .hp-contact{flex-direction:column;align-items:flex-start}
}

/* ═══ v21.6 — Domain-Umschalter & Hinweis für externe Admins ═══ */
.dom-switch{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.ds-l{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;margin-right:4px}
.ds-l .ico{color:var(--ink-4)}
.ds-b{display:inline-flex;align-items:center;gap:6px;font:550 12.5px var(--font);color:var(--ink-2);text-decoration:none;
  background:#fff;border:1px solid var(--line-strong);border-radius:999px;padding:6px 13px;box-shadow:var(--sh-1)}
.ds-b:hover{background:var(--accent-bg);border-color:var(--accent-line);color:var(--accent)}
.ds-b.on{background:var(--ink);border-color:var(--ink);color:#fff}
.ds-b small{font-size:11px;opacity:.7;font-variant-numeric:tabular-nums}
.ext-note{display:flex;align-items:flex-start;gap:9px;background:var(--warn-bg);border:1px solid var(--warn-line);
  border-radius:10px;padding:10px 13px;font-size:12.5px;line-height:1.5;color:#7c4a02;margin-bottom:12px}
.ext-note .ico{flex:none;margin-top:1px}
@media (max-width:820px){ .dom-switch{gap:5px}.ds-l{width:100%;margin-bottom:2px}.ds-b{padding:7px 12px} }