/* ─────────────────────────────────────────────────────────────────
 * Dashboard-specific styles — animations, transitions, screen-only
 * components (KPI ring, rules table,  settings, etc.)
 * ──────────────────────────────────────────────────────────────── */

/* ── Screen switching + entrance animation ──────────────────── */
/* IMPORTANT: keep resting opacity 1 on .screen.active and only animate
 * transform so that if the animation timeline doesn't tick (transformed
 * parents, hidden tabs, iframes), content is still visible. */
.screen { display: none; opacity: 1; }
.screen.active { display: block; animation: screenEnter 360ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes screenEnter {
  0%   { transform: translateY(8px); }
  100% { transform: translateY(0);   }
}
/* Stagger child cards as they enter — transform-only too */
.screen.active > * { opacity: 1; animation: cardEnter 460ms cubic-bezier(0.16, 1, 0.3, 1); }
.screen.active > *:nth-child(1) { animation-delay: 0ms; }
.screen.active > *:nth-child(2) { animation-delay: 50ms; }
.screen.active > *:nth-child(3) { animation-delay: 100ms; }
.screen.active > *:nth-child(4) { animation-delay: 150ms; }
.screen.active > *:nth-child(5) { animation-delay: 200ms; }
.screen.active > *:nth-child(6) { animation-delay: 250ms; }
@keyframes cardEnter {
  0%   { transform: translateY(10px); }
  100% { transform: translateY(0); }
}

/* ── Card hover lift (subtle) ───────────────────────────────── */
.dash-card, .kpi {
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.dash-card:hover, .kpi:hover {
  border-color: var(--d-line-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025), 0 24px 64px rgba(2,6,16,0.32);
}

/* ── Buttons ripple/pressed ─────────────────────────────────── */
.time-tabs button, .pager .pg button, .nav-item, .head-actions .ic, .bell {
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 100ms ease;
}
.time-tabs button:active, .pager .pg button:active, .head-actions .ic:active, .bell:active { transform: scale(0.96); }

/* Spark line draw-on animation */
.kpi .spark polyline { stroke-dasharray: 200; stroke-dashoffset: 200; animation: drawSpark 1.2s ease-out 0.2s forwards; }
@keyframes drawSpark { to { stroke-dashoffset: 0; } }

/* Donut grow-in */
.donut .donut-ring { animation: donutSpin 700ms ease-out; }
@keyframes donutSpin {
  from { transform: rotate(-90deg) scale(0.85); opacity: 0; }
  to   { transform: rotate(0) scale(1); opacity: 1; }
}

/* Threat list bar grow */
.threat-list .bar span,
.u .bar span,
.ep-bar span {
  transform-origin: left;
  animation: barGrow 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Table row entry */
.sess-table tbody tr { animation: rowEnter 500ms ease-out both; }
.sess-table tbody tr:nth-child(1) { animation-delay: 80ms; }
.sess-table tbody tr:nth-child(2) { animation-delay: 130ms; }
.sess-table tbody tr:nth-child(3) { animation-delay: 180ms; }
.sess-table tbody tr:nth-child(4) { animation-delay: 230ms; }
.sess-table tbody tr:nth-child(5) { animation-delay: 280ms; }
.sess-table tbody tr:nth-child(6) { animation-delay: 330ms; }
.sess-table tbody tr:nth-child(7) { animation-delay: 380ms; }
.sess-table tbody tr:nth-child(8) { animation-delay: 430ms; }
@keyframes rowEnter { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }

/* Nav active indicator pulse on switch */
.nav-item.active { position: relative; }
.nav-item.active::before {
  content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 2px;
  background: var(--d-accent);
  border-radius: 2px;
  animation: navPulse 700ms ease-out;
}
@keyframes navPulse {
  0%   { opacity: 0; transform: scaleY(0.4); }
  60%  { opacity: 1; transform: scaleY(1.05); }
  100% { opacity: 1; transform: scaleY(1); }
}

/* ── Live event pulse on overview KPIs ──────────────────────── */
.live-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--d-success);
  animation: livePulse 1.6s ease-in-out infinite;
  margin-right: 6px;
}
@keyframes livePulse { 0%,100%{ opacity: 1; box-shadow: 0 0 0 0 rgba(83,234,136,0.55); } 50%{ opacity: 0.5; box-shadow: 0 0 0 6px rgba(83,234,136,0); } }

/* ── Headers / shared blocks across screens ─────────────────── */
.screen-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 6px; }
.screen-head h3 { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.045em; color: var(--d-ink); }
.screen-head p { margin: 4px 0 0; color: var(--d-muted); font-size: 0.8rem; line-height: 1.45; max-width: 680px; }
.btn-pill {
  height: 36px; padding: 0 16px;
  border-radius: 8px;
  border: 1px solid var(--d-line-active);
  background: var(--d-accent-soft);
  color: var(--d-ink);
  font-family: inherit; font-size: 0.8rem; font-weight: 700;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 160ms ease, transform 100ms ease;
}
.btn-pill:hover { background: rgba(47,125,211,0.26); }
.btn-pill:active { transform: scale(0.97); }
.btn-pill.ghost { background: rgba(255,255,255,0.03); border-color: var(--d-line); color: var(--d-muted); }
.btn-pill.ghost:hover { color: var(--d-ink); border-color: var(--d-line-2); }
.btn-pill.danger { background: var(--d-danger-soft); border-color: rgba(220,63,79,0.42); color: var(--d-danger); }

/* Mini stat card */
.mini-card {
  padding: 14px 16px;
  border: 1px solid var(--d-line);
  border-radius: 10px;
  background: var(--d-panel-bg);
  display: grid; gap: 6px;
}
.mini-card .l { font-size: 0.72rem; font-weight: 700; color: var(--d-muted); letter-spacing: 0.1em; text-transform: uppercase; }
.mini-card .v { font-size: 1.05rem; font-weight: 800; color: var(--d-ink); letter-spacing: -0.025em; }
.mini-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }

/* Section title inside cards */
.sec-title {
  font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--d-muted);
  margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--d-line);
}

/* ── Rules screen ───────────────────────────────────────────── */
.rules-table { width: 100%; }
.rules-row {
  display: grid;
  grid-template-columns: minmax(190px, 2fr) minmax(76px, 0.7fr) minmax(76px, 0.7fr) 80px 90px 58px;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--d-line);
  align-items: center;
  transition: background 160ms ease;
}
.rules-row:hover { background: rgba(255,255,255,0.018); }
.rules-row.head { font-size: 0.7rem; font-weight: 700; color: var(--d-dim); letter-spacing: 0.08em; text-transform: uppercase; }
.rules-row .nm { font-size: 0.86rem; font-weight: 600; color: var(--d-ink); margin-bottom: 3px; }
.rules-row .trig { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.68rem; color: var(--d-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rules-row .pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.7rem; font-weight: 800;
  text-transform: capitalize;
}
.rules-row .pill.block      { background: var(--d-danger-soft);  color: var(--d-danger); }
.rules-row .pill.challenge  { background: var(--d-warning-soft); color: var(--d-warning); }
.rules-row .pill.rate_limit { background: var(--d-accent-soft);  color: var(--d-accent); }
.rules-row .pill.monitor    { background: rgba(128,151,183,0.12);color: var(--d-muted); }
.rules-row .hits {
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.82rem; font-weight: 800;
  color: var(--d-ink);
}
.rules-row .last { font-size: 0.72rem; color: var(--d-muted); }
.toggle {
  width: 36px; height: 20px;
  border-radius: 999px;
  background: rgba(83,105,138,0.32);
  border: none; padding: 0;
  cursor: pointer;
  position: relative;
  transition: background 220ms ease;
}
.toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  transition: left 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.toggle.on { background: var(--d-accent); }
.toggle.on::after { left: 18px; }

/* ── Sessions screen ─────────────────────────────────────────── */
.sessions-screen { display: grid; grid-template-columns: 340px 1fr; gap: 14px; min-height: 0; height: calc(100vh - 130px); }
.sess-list { background: var(--d-panel-bg); border: 1px solid var(--d-line); border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; }
.sess-list-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--d-line); }
.sess-list-head h4 { margin: 0 0 10px; font-size: 1.05rem; font-weight: 700; color: var(--d-ink); letter-spacing: -0.03em; }
.sess-list-head input {
  width: 100%; height: 32px; padding: 0 11px;
  border: 1px solid var(--d-line); border-radius: 8px;
  background: rgba(255,255,255,0.03);
  color: var(--d-ink); font-family: inherit; font-size: 0.78rem;
  outline: none;
  transition: border-color 160ms ease;
  box-sizing: border-box;
}
.sess-list-head input:focus { border-color: var(--d-accent); }
.sess-filters { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px; }
.sess-filters button {
  height: 24px; padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--d-line);
  background: transparent;
  color: var(--d-muted);
  font-family: inherit; font-size: 0.7rem; font-weight: 600;
  cursor: pointer;
  transition: all 160ms ease;
}
.sess-filters button.active { background: var(--d-accent-soft); color: var(--d-accent); border-color: var(--d-line-active); }
.sess-list-body { flex: 1; overflow-y: auto; }
.sess-list-item {
  padding: 12px 14px;
  border-bottom: 1px solid var(--d-line);
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background 130ms ease, border-color 130ms ease;
}
.sess-list-item:hover { background: rgba(255,255,255,0.03); }
.sess-list-item.active { background: rgba(47,125,211,0.10); border-left-color: var(--d-accent); }
.sess-list-item .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.sess-list-item .id { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.76rem; font-weight: 600; color: var(--d-ink); }
.sess-list-item .verdict {
  font-size: 0.62rem; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  text-transform: capitalize;
}
.sess-list-item .verdict.allow     { background: var(--d-success-soft); color: var(--d-success); }
.sess-list-item .verdict.block     { background: var(--d-danger-soft); color: var(--d-danger); }
.sess-list-item .verdict.challenge { background: var(--d-warning-soft); color: var(--d-warning); }
.sess-list-item .verdict.monitor   { background: var(--d-accent-soft); color: var(--d-accent); }
.sess-list-item .mid { display: flex; justify-content: space-between; align-items: center; font-size: 0.7rem; color: var(--d-muted); }
.sess-list-item .mid .right { display: flex; gap: 6px; align-items: center; }
.sess-list-item .mid .score { font-weight: 700; }
.sess-list-item .type { font-size: 0.66rem; color: var(--d-dim); margin-top: 3px; }

.sess-detail {
  background: var(--d-panel-bg);
  border: 1px solid var(--d-line);
  border-radius: 10px;
  padding: 20px 22px;
  overflow-y: auto;
}
.sess-detail .h-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sess-detail .id-big { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 1.05rem; font-weight: 700; color: var(--d-ink); }
.sess-detail .meta-row { margin-top: 4px; font-size: 0.78rem; color: var(--d-muted); }
.sess-detail .sect { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--d-line); border-radius: 10px; background: rgba(255,255,255,0.018); }
.signal-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--d-line); background: rgba(255,255,255,0.018); margin-bottom: 6px; font-size: 0.84rem; color: var(--d-ink); }
.signal-row .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--d-accent); box-shadow: 0 0 0 4px rgba(47,125,211,0.14); }
.kv-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--d-line); align-items: center; }
.kv-row:last-child { border-bottom: none; }
.kv-row .k { font-size: 0.74rem; color: var(--d-muted); }
.kv-row .v { font-size: 0.74rem; color: var(--d-ink); font-family: 'JetBrains Mono', ui-monospace, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score-bar {
  display: flex; align-items: center; gap: 10px;
}
.score-bar .track { flex: 1; height: 6px; background: rgba(83,105,138,0.18); border-radius: 999px; overflow: hidden; }
.score-bar .fill { height: 100%; border-radius: 999px; }
.score-bar .num { font-size: 0.84rem; font-weight: 700; min-width: 28px; text-align: right; }

/* ── Defensive Actions screen ───────────────────────────────── */
.feed-list { list-style: none; padding: 0; margin: 0; }
.feed-list li {
  display: grid;
  grid-template-columns: 6px 1fr auto;
  gap: 14px; padding: 14px 18px;
  border-bottom: 1px solid var(--d-line);
  align-items: center;
  transition: background 160ms ease;
}
.feed-list li:hover { background: rgba(255,255,255,0.018); }
.feed-list li:last-child { border-bottom: none; }
.feed-list .stripe { width: 4px; height: 36px; border-radius: 2px; }
.feed-list .stripe.block { background: var(--d-danger); }
.feed-list .stripe.allow { background: var(--d-success); }
.feed-list .stripe.challenge { background: var(--d-warning); }
.feed-list .body { min-width: 0; }
.feed-list .title { font-size: 0.86rem; font-weight: 700; color: var(--d-ink); }
.feed-list .title .kind { font-weight: 800; }
.feed-list .meta { font-size: 0.72rem; color: var(--d-muted); margin-top: 2px; font-family: 'JetBrains Mono', ui-monospace, monospace; }
.feed-list .ts { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.7rem; color: var(--d-dim); white-space: nowrap; }

/* ── Team screen ────────────────────────────────────────────── */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.team-card { padding: 16px 18px; }
.team-card .top { display: flex; align-items: center; gap: 12px; }
.team-card .ava {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800;
  color: #fff;
  font-size: 0.86rem;
}
.team-card .ava.a { background: linear-gradient(135deg, #274f9f, #17376f); }
.team-card .ava.b { background: linear-gradient(135deg, #c75d18, #7b3805); }
.team-card .ava.c { background: linear-gradient(135deg, #16a36b, #095932); }
.team-card .ava.d { background: linear-gradient(135deg, #6d5fd3, #3c3382); }
.team-card .ava.e { background: linear-gradient(135deg, #d99019, #875100); }
.team-card .nm { font-size: 0.92rem; font-weight: 700; color: var(--d-ink); }
.team-card .role { font-size: 0.72rem; color: var(--d-muted); }
.team-card .stats { display: flex; gap: 18px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--d-line); }
.team-card .stats .s { display: grid; gap: 2px; }
.team-card .stats .s .l { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-dim); font-weight: 700; }
.team-card .stats .s .v { font-size: 0.82rem; font-weight: 700; color: var(--d-ink); }
.role-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--d-line);
  background: rgba(255,255,255,0.02);
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--d-muted);
}
.role-pill.admin { color: var(--d-accent); border-color: rgba(47,125,211,0.32); background: var(--d-accent-soft); }
.role-pill.owner { color: var(--d-warning); border-color: rgba(217,144,25,0.32); background: var(--d-warning-soft); }

/* ── Billing screen ─────────────────────────────────────────── */
.billing-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; align-items: start; }
.invoice-list { list-style: none; padding: 0; margin: 0; }
.invoice-row { display: grid; grid-template-columns: 120px 1fr auto auto auto; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--d-line); align-items: center; transition: background 160ms; }
.invoice-row:hover { background: rgba(255,255,255,0.018); }
.invoice-row:last-child { border-bottom: none; }
.invoice-row .date { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.78rem; color: var(--d-muted); }
.invoice-row .desc { font-size: 0.86rem; font-weight: 600; color: var(--d-ink); }
.invoice-row .amt { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.86rem; font-weight: 800; color: var(--d-ink); }
.invoice-row .stat {
  padding: 3px 9px; border-radius: 999px;
  font-size: 0.66rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.invoice-row .stat.paid { background: var(--d-success-soft); color: var(--d-success); }
.invoice-row .stat.due  { background: var(--d-warning-soft); color: var(--d-warning); }
.invoice-row .stat.draft{ background: rgba(128,151,183,0.12); color: var(--d-muted); }
.invoice-row .dl { background: transparent; border: 1px solid var(--d-line); width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; color: var(--d-muted); cursor: pointer; transition: color 160ms, border-color 160ms; }
.invoice-row .dl:hover { color: var(--d-ink); border-color: var(--d-line-2); }
.invoice-row .dl svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.payment-method {
  padding: 16px 18px;
  border: 1px solid var(--d-line);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(47,125,211,0.10), rgba(47,125,211,0.02));
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px;
}
.payment-method .brand { width: 38px; height: 26px; background: linear-gradient(135deg, #f9a825, #e65100); border-radius: 4px; display: grid; place-items: center; color: #fff; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.02em; }
.payment-method .info { flex: 1; }
.payment-method .num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.86rem; color: var(--d-ink); }
.payment-method .exp { font-size: 0.72rem; color: var(--d-muted); margin-top: 2px; }

/* ── Settings screen ────────────────────────────────────────── */
.settings-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; align-items: start; }
.field { display: grid; gap: 8px; margin-bottom: 16px; }
.field label { font-size: 0.74rem; font-weight: 700; color: var(--d-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.field input,
.field select,
.field textarea {
  padding: 10px 14px;
  border: 1px solid var(--d-line); border-radius: 8px;
  background: rgba(255,255,255,0.03);
  color: var(--d-ink);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.82rem;
  outline: none;
  width: 100%; box-sizing: border-box;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(47,125,211,0.16); }
.field .hint { font-size: 0.7rem; color: var(--d-muted); }
.saved-flash { color: var(--d-success); font-size: 0.76rem; font-weight: 700; opacity: 0; transition: opacity 200ms; }
.saved-flash.on { opacity: 1; }

/* ── Docs/Support screens ───────────────────────────────────── */
.docs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.doc-card {
  padding: 18px 20px;
  text-align: left;
  cursor: pointer;
  transition: transform 220ms ease, border-color 220ms ease;
  background: var(--d-panel-bg);
  border: 1px solid var(--d-line);
  border-radius: 10px;
}
.doc-card:hover { transform: translateY(-2px); border-color: var(--d-line-active); }
.doc-card .ico { width: 32px; height: 32px; border-radius: 8px; background: var(--d-accent-soft); color: var(--d-accent); display: grid; place-items: center; margin-bottom: 12px; }
.doc-card .ico svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.doc-card .t { font-size: 0.92rem; font-weight: 700; color: var(--d-ink); margin-bottom: 4px; }
.doc-card .d { font-size: 0.76rem; color: var(--d-muted); line-height: 1.45; }
.faq-item-d {
  border-bottom: 1px solid var(--d-line);
}
.faq-item-d > summary {
  padding: 14px 0;
  cursor: pointer;
  font-size: 0.92rem; font-weight: 700; color: var(--d-ink);
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
}
.faq-item-d > summary::-webkit-details-marker { display: none; }
.faq-item-d > summary::after {
  content: "+"; color: var(--d-muted); font-weight: 400; font-size: 1.2rem;
  transition: transform 200ms ease;
}
.faq-item-d[open] > summary::after { transform: rotate(45deg); }
.faq-item-d > .body { padding: 0 0 14px; font-size: 0.84rem; color: var(--d-muted); line-height: 1.6; }

/* ── Notification toast ─────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 22px; right: 22px;
  z-index: 1000;
  min-width: 260px; max-width: 380px;
  padding: 11px 14px 11px 12px;
  border: 1px solid var(--d-line);
  background:
    linear-gradient(180deg, rgba(15,22,38,0.94) 0%, rgba(8,12,22,0.94) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  border-radius: 11px;
  color: var(--d-ink);
  font-size: 0.825rem; font-weight: 500; line-height: 1.4;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 24px 56px rgba(0,0,0,0.55),
    0 6px 16px rgba(0,0,0,0.4);
  transform: translateY(14px) scale(0.98);
  opacity: 0;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), opacity 180ms ease;
  display: flex; align-items: center; gap: 11px;
  pointer-events: auto;
}
.toast::before {
  content: "";
  position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, var(--d-accent), transparent);
  border-radius: 2px;
}
.toast.show { transform: translateY(0) scale(1); opacity: 1; }
.toast .ico {
  width: 22px; height: 22px; border-radius: 6px;
  background: rgba(118,174,232,0.14);
  color: var(--d-accent-2, var(--d-accent));
  border: 1px solid rgba(118,174,232,0.28);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}
.toast .msg { color: var(--d-ink); letter-spacing: -0.005em; }

/* ── Dropdown menu (notification bell, etc.) ────────────────── */
.dropdown {
  position: absolute;
  top: calc(100% + 6px); right: 0;
  width: 320px;
  background: linear-gradient(180deg, rgba(8,18,35,0.96), rgba(5,12,24,0.96));
  backdrop-filter: blur(14px);
  border: 1px solid var(--d-line-2);
  border-radius: 10px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.55);
  z-index: 100;
  overflow: hidden;
  display: none;
  animation: dropIn 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.dropdown.open { display: block; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.dropdown .dropdown-head { padding: 12px 16px; border-bottom: 1px solid var(--d-line); display: flex; justify-content: space-between; align-items: center; }
.dropdown .dropdown-head h5 { margin: 0; font-size: 0.86rem; font-weight: 700; color: var(--d-ink); }
.dropdown .dropdown-head .clear { background: transparent; border: none; color: var(--d-accent); font-family: inherit; font-size: 0.72rem; font-weight: 700; cursor: pointer; }
.notif-list { max-height: 360px; overflow-y: auto; }
.notif-row {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--d-line);
  cursor: pointer;
  transition: background 130ms;
}
.notif-row:hover { background: rgba(255,255,255,0.018); }
.notif-row:last-child { border-bottom: none; }
.notif-row .pip { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; background: var(--d-accent); flex-shrink: 0; }
.notif-row .pip.r { background: var(--d-danger); }
.notif-row .pip.w { background: var(--d-warning); }
.notif-row .nm { font-size: 0.8rem; font-weight: 600; color: var(--d-ink); }
.notif-row .meta { font-size: 0.7rem; color: var(--d-muted); margin-top: 2px; }
.notif-row .time { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.66rem; color: var(--d-dim); white-space: nowrap; }
.bell { position: relative; }

/* User menu dropdown */
.user-menu {
  position: fixed;
  bottom: 76px; left: 14px;
  width: 184px;
  background: linear-gradient(180deg, rgba(8,18,35,0.96), rgba(5,12,24,0.96));
  backdrop-filter: blur(14px);
  border: 1px solid var(--d-line-2);
  border-radius: 10px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.55);
  z-index: 100;
  overflow: hidden;
  display: none;
  animation: dropIn 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.user-menu.open { display: block; }
.user-menu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 14px;
  background: transparent; border: none;
  color: var(--d-ink);
  font-family: inherit; font-size: 0.82rem; font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 130ms;
}
.user-menu button:hover { background: rgba(255,255,255,0.04); }
.user-menu button.danger { color: var(--d-danger); border-top: 1px solid var(--d-line); }
.user-menu button svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }