/* ==========================================================================
   THEME & GLOBAL TOKENS
   ========================================================================== */

:root{
  /* Theme */
  --bg:#0b1220;
  --card:#0f172a;
  --accent:#06b6d4;
  --muted:#94a3b8;
  --glass:rgba(255,255,255,.04);

  /* Scrollbars */
  --scroll-track: rgba(255,255,255,.08);
  --scroll-thumb: rgba(148,163,184,.55);
  --scroll-thumb-hover: rgba(148,163,184,.85);
  --scroll-size: 10px;
  --scroll-radius: 10px;

  /* Loader palette (flat/matte look) */
  --loader-scrim: rgba(9,13,22,.88);
  --loader-surface: #1b2436;
  --loader-border: rgba(255,255,255,.08);
  --loader-spine: rgba(148,163,184,.25);

  /* App chrome (managed by JS for full‑context loader) */
  --app-header-h: 0px;
  --app-footer-h: 0px;

  /* Full‑context loader ring size */
  --loader-ring-size: 88px;

  /* Smooth anchor jumps, with sticky header offset handled in layout */
  scroll-behavior: smooth;
}

/* ==========================================================================
   BASE & LAYOUT
   ========================================================================== */

* { box-sizing: border-box; }

body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial;
  background: linear-gradient(180deg, #151c2b 0%, #151c2b 100%);
  color:#e6eef6;
}

#progress{
  position:fixed; left:0; top:0; height:4px; width:0;
  background:linear-gradient(90deg,var(--accent),#0ea5a1);
  transition:width .5s ease;
  z-index:var(--z-toast);
}

.container{ max-width:1200px; margin:28px auto; padding:20px; }

.header{
  display:flex; align-items:center; gap:16px; margin-bottom:18px;
}
.title{ font-size:22px; font-weight:800; letter-spacing:.2px; }
.subtitle{ font-size:13px; color:var(--muted); margin-top:7px; }

/* Grid layout: left form + optional right facts panel */
.layout{
  display:grid; gap:18px;
  grid-template-columns: 1fr;
  transition: opacity .22s ease, transform .22s ease, filter .22s ease;
}
.layout.has-right{ grid-template-columns: minmax(0,1fr) 440px; }

/* Right panel: hidden until results exist, sticky on wide screens */
#rightPanel{ display:none; }
.layout.has-right #rightPanel{ display:block; }
@media (min-width:961px){
  #rightPanel{ position:sticky; top:84px; align-self:start; }
}

/* Compact on small screens */
@media (max-width:960px){
  .layout{ grid-template-columns: 1fr; }
}

/* Anchor offset for sticky header */
.section-anchor{ position:relative; scroll-margin-top:84px; }

/* ==========================================================================
   CARDS, OVERLAYS & LOADING
   ========================================================================== */

.card{
  position: relative; min-width:0;
  background:#1c2538; padding:16px; border-radius:14px;
  box-shadow:0 6px 22px rgba(2,6,23,.55);
  border:1px solid rgba(255,255,255,.04);
}

/* Base overlay container (used by both sides) */
.loading-overlay{
  position:absolute; inset:0; display:none; place-items:center;
  border-radius:14px; z-index:3;
}

/* Flat matte overlay look (replaces older “glassy” styles) */
.card .loading-overlay{
  display:none; inset:0;
  align-items:center; justify-content:center; flex-direction:column; gap:8px;
  background: var(--loader-scrim) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--loader-border);
  text-align:center;
  z-index:5;
}

/* Show overlay + blur underlying content while loading */
.card.is-loading .loading-overlay{ display:flex; }
.card.is-loading > *:not(.loading-overlay){
  filter: blur(2px) saturate(.9);
  transform: translateZ(0);
  pointer-events: none;
}

.loading-message{ margin-top:10px; color:#cfe8ff; text-align:center; }
.loading-message.small{ color:var(--muted); }

/* Performance nudge while loading */
.card.is-loading{
  contain: paint;
  will-change: filter, opacity;
}

/* ==========================================================================
   INPUTS, TEXTAREA & FORM ACTIONS
   ========================================================================== */

textarea{
  width:100%; height:400px; resize:vertical;
  border-radius:10px; padding:12px;
  border:1px solid rgb(62 71 90);
  background:rgb(21, 28, 43); color:#e6eef6;
}

.input-row{
  display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;
}
.input-row input{
  flex:1 1 360px; padding:10px; border-radius:10px;
  border:1px solid rgb(62 71 90);
  background:rgb(21, 28, 43); color:#e6eef6;
}

input[type=number],
input[type=text]{
  border:1px solid rgb(62 71 90);
  background:rgb(21, 28, 43);
  color:#e6eef6; padding:8px; border-radius:8px;
  transition:border-color .2s ease, box-shadow .2s ease;
}

input[type=number]:focus,
input[type=text]:focus,
textarea:focus{
  outline:none;
  border-color:rgba(255,255,255,.22);
  box-shadow:0 0 0 3px rgba(6,182,212,.15);
}

/* Compact actions row */
.form-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 25px; }

/* ==========================================================================
   BUTTONS & TEXT UTILS
   ========================================================================== */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  max-width:100%; cursor:pointer; text-decoration:none;
  transition: background .2s ease, border-color .2s ease, transform .12s ease, filter .2s ease, box-shadow .2s ease;
  padding:.75rem 1.4rem; border-radius:.6rem; font-weight:700; font-size:13px;
  pointer-events:initial; background-color:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1); color:#e6eef6;
  line-height:1.2;
}
.btn:hover{ border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.07); }
.btn i { line-height:1; flex-shrink:0; }
.btn.secondary{
  background:rgba(255,255,255,.04); color:var(--muted);
  border:1px solid rgba(255,255,255,.1);
}
.btn.secondary:hover{ color:#e6eef6; border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.07); }
.btn.ghost{
  background:transparent; color:#94a3b8;
  border:1px solid rgba(255,255,255,.08);
}
.btn.ghost:hover{ color:#cfe8ff; border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.03); }
.btn.primary{
  background:linear-gradient(135deg, #06b6d4 0%, #0891b2 50%, #0ea5a1 100%);
  color:#fff; border-color:transparent;
  box-shadow: 0 2px 8px rgba(6,182,212,.25);
  font-weight:800;
}
.btn.primary:hover{
  transform:translateY(-1px); filter:brightness(1.08);
  box-shadow: 0 4px 16px rgba(6,182,212,.35);
}
.btn:disabled{ opacity:.45; cursor:not-allowed; pointer-events:none; transition:opacity .12s ease; }
.btn:active{ transform:translateY(1px); }
.btn--sm{ padding:.5rem .9rem; font-size:12px; border-radius:8px; font-weight:700; }
.btn--danger { background:rgba(239,68,68,.12); color:#ef4444; border-color:rgba(239,68,68,.2); }
.btn--danger:hover { background:rgba(239,68,68,.2); border-color:rgba(239,68,68,.35); }

/* Show spinner only when button is busy */
.btn .spinner { display: none; margin-right: 8px; vertical-align: middle; }
.btn.is-busy .spinner { display: inline-block; }

.small{ font-size:13px; color:var(--muted); }
.hint{ font-size:12px; color:var(--muted); margin-top:8px; }

/* ==========================================================================
   BADGES, KV, METRICS & BARS
   ========================================================================== */

.result-block{ display:flex; flex-direction:column; gap:10px; }

.kv{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px; border-radius:10px; cursor:pointer;
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent);
  border:1px solid rgba(255,255,255,.06);
  transition:border-color .2s ease, transform .12s ease;
}
.kv:hover{ border-color:rgba(255,255,255,.18); transform:translateY(-1px); }

/* Generic badge + “icon-left” helper */
.badge{
  text-transform:capitalize;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px 8px 30px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow:0 2px 10px rgba(0,0,0,.25);
  letter-spacing:.2px;
}
.badge--icon{ position: relative; padding-left: 34px; }
.badge--icon::before,
.badge[class*="dec-"]::before,
.badge.badge-info::before,
.badge.risk-badge::before{
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  font: var(--fa-font-solid, normal 900 1em/1 "Font Awesome 6 Pro");
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: currentColor; speak: never; content:"";
}

/* Decision badge variants + glyphs */
.badge[class*="dec-"]{ position: relative; padding-left:34px; }

/* Colors:
   - Auto-decline: green + thumbs-down
   - Queue: #0cabb3 + clock
   - Fast-track: #f59e0b + bolt
   - Urgent: #c61010 + triangle-exclamation
*/
.badge.dec-auto   { background:#22c55e; color:#051b2a; border-color:#5eef93; }
.badge.dec-queue  { background:#0cabb3; color:#051b2a; border-color:#0a8e95; }
.badge.dec-fast   { background:#e09c28; color:#051b2a; border-color:#efcc91; }
.badge.dec-urgent { background:#952626; color:#ffe5e5; border-color:#cb5555; }

.badge.dec-auto::before   { content: "\f165"; } /* thumbs-down */
.badge.dec-queue::before  { content: "\f017"; } /* clock */
.badge.dec-fast::before   { content: "\f0e7"; } /* bolt */
.badge.dec-urgent::before { content: "\f071"; } /* triangle-exclamation */

/* Info badge */
.badge.badge-info::before { content: "\f05a"; }

/* Risk badge icons by severity */
.badge.risk-badge::before       { content: "\f06a"; } /* circle-exclamation */
.badge.risk-badge.low::before   { content: "\f058"; } /* circle-check */
.badge.risk-badge.medium::before{ content: "\f06a"; } /* circle-exclamation */
.badge.risk-badge.high::before  { content: "\f071"; } /* triangle-exclamation */

/* Left callout strip color (by decision) */
#rowDecision[data-decision="auto-decline"]{ --callout: rgba(34,197,94,1); }
#rowDecision[data-decision="queue"]       { --callout: rgba(12,171,179,1); }
#rowDecision[data-decision="fast-track"]  { --callout: rgba(224,156,40,1); }
#rowDecision[data-decision="urgent"]      { --callout: rgba(149,38,38,1); }

/* Decision callout row */
.kv--callout{
  position:relative; padding:14px 16px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.kv--callout::before{
  content:""; position:absolute; inset:-1px auto -1px -1px; width:6px;
  border-radius:10px 0 0 10px; background:var(--callout, rgba(148,163,184,.4));
}
.callout-left{ display:flex; flex-direction:column; gap:2px; }
.callout-title{ font-weight:800; letter-spacing:.2px; }
.callout-sub{ color:#9fbbe6; }

/* Metric row */
.kv--metric{ align-items:center; }
.metric-left{ display:flex; flex-direction:column; }
.metric-title{ font-weight:800; }
.metric-right{ display:flex; align-items:center; gap:12px; }

/* Circular gauge */
.gauge{
  --risk: 0%;
  --gauge-color:#22c55e;
  width:82px; aspect-ratio:1/1; border-radius:50%;
  background: conic-gradient(var(--gauge-color) var(--risk), rgba(255,255,255,.10) 0);
  mask: radial-gradient(farthest-side, transparent 60%, #000 62%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 6px 18px rgba(0,0,0,.35);
  display:grid; place-items:center;
}
.gauge__label{ font-weight:900; font-size:18px; letter-spacing:.2px; }
.gauge.risk-low { --gauge-color:#22c55e; }
.gauge.risk-med { --gauge-color:#f59e0b; }
.gauge.risk-high{ --gauge-color:#ef4444; }

/* Contribution bars */
.bar{ height:8px; background:rgba(255,255,255,.08); border-radius:8px; overflow:hidden; }
.bar>span{ display:block; height:100%; background:linear-gradient(90deg,var(--accent),#0ea5a1); width:0%; }

/* Compact KV table */
.kv-table{
  width:100%; border-collapse:separate; border-spacing:0 8px;
}
.kv-table td{
  padding:8px 10px; background:#1e2a41; border:1px solid rgba(255,255,255,.08);
}
.kv-table td:first-child{
  color:#94a3b8; border-right:none; border-radius:10px 0 0 10px; min-width:220px;
}
.kv-table td:last-child{
  font-weight:800; border-left:none; border-radius:0 10px 10px 0;
}
.kv-compact .kv-table td{ padding:6px 8px; font-size:12px; }
.kv-compact .kv-table td:first-child{ min-width:160px; }
.kv-compact .kv-table td:last-child{ font-weight:700; }

/* Reasons list */
.reason-list{ list-style:none; padding:0; margin:.4rem 0 0; }
.reason-list li{
  display:flex; align-items:flex-start; gap:8px;
  padding:8px 10px; background:#1e2a41; border:1px solid rgba(255,255,255,.08);
  border-radius:10px; margin:.35rem 0;
}
.reason-list li::before{
  content:"✓"; flex:0 0 auto; line-height:1; font-weight:900;
  color:#aee3ff; background:#0f254a; border:1px solid rgba(255,255,255,.12);
  width:18px; height:18px; display:grid; place-items:center; border-radius:999px;
}

/* ==========================================================================
   CHIPS & STATS
   ========================================================================== */

.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:999px; min-width:0; margin-bottom:4px;
  background-color: rgb(28, 37, 56);
  border:.1rem solid rgb(62, 71, 90);
  color: rgb(184, 190, 201);
  font-size:12px;
}
.chip button{ background:transparent; border:none; color:#9ecbff; cursor:pointer; }
.chip button:hover{ color:#d1e7ff; }

.stat-pills{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px; font-size:12px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  transition:transform .12s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.pill:hover{ transform:translateY(-1px); border-color:rgba(255,255,255,.25); box-shadow:0 6px 18px rgba(0,0,0,.35); }
.pill__icon{ width:14px; height:14px; opacity:.9; }
.pill__count{ font-weight:700; }
.pill--zero{ opacity:.6; border-style:dashed; }
.pill--active{ background:linear-gradient(180deg,rgba(6,182,212,.20),rgba(14,165,233,.12)); }
.pill--url .pill__icon{    filter:drop-shadow(0 0 2px rgba(6,182,212,.6)); }
.pill--email .pill__icon{  filter:drop-shadow(0 0 2px rgba(99,102,241,.6)); }
.pill--ip .pill__icon{     filter:drop-shadow(0 0 2px rgba(34,197,94,.6)); }
.pill--domain .pill__icon{ filter:drop-shadow(0 0 2px rgba(250,204,21,.7)); }
.pill--custom .pill__icon{ filter:drop-shadow(0 0 2px rgba(244,114,182,.7)); }

.statline{
  display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px;
}
.statline .small{ color:var(--muted); }
.stat-empty{
  padding:6px 10px; border:1px dashed rgba(255,255,255,.14); border-radius:8px;
  color:var(--muted); font-size:12px;
}
.stat-pills--compact .pill{ padding:4px 8px; font-size:11px; border-radius:999px; }
.stat-pills--compact .pill__icon{ width:12px; height:12px; }

.input-add{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.input-add input{
  flex:1; min-width:0; color:rgb(184,190,201); border-radius:.5rem;
  background-color:rgb(21,28,43);
  outline:none; border:.1rem solid rgb(62,71,90);
}

/* ==========================================================================
   GRID HELPERS
   ========================================================================== */

.flex{ display:flex; gap:8px; align-items:center; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
/* Make core grids wrap on smaller widths (works in wizard iframe too) */
@media (max-width: 960px){
  .grid-2{ grid-template-columns:1fr; }
}
@media (max-width: 1200px){
  .grid-3{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 720px){
  .grid-3{ grid-template-columns:1fr; }
}
.grid-2 > *, .grid-3 > *{ min-width:0; }
.grid-4{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:12px; }
.grid-5{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
@media (max-width:900px){ .grid-5{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grid-5{ grid-template-columns:1fr; } }

/* ==========================================================================
   MODALS
   ========================================================================== */

.modal{
  position:fixed; inset:0; display:none; place-items:center;
  background:rgba(2,6,23,.6); backdrop-filter:saturate(1.2) blur(6px);
  z-index:var(--z-overlay);
}
.modal.show{ display:grid; animation:fadeIn .15s ease; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

.modal-card{
  width:min(980px,92vw); max-height:86vh; display:flex; flex-direction:column; overflow:hidden;
  background:#1c2538; border:1px solid rgba(255,255,255,.08); border-radius:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.45);
}
.modal-card--lg.has-tabs{ height:86vh; }
.modal-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.06);
  flex-shrink:0;
}
.modal-body{ padding:14px; overflow-y:auto; overflow-x:hidden; flex:1; min-height:0; }

/* Modal tabs */
.modal-tabs{ display:flex; gap:0; padding:0 14px; border-bottom:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.15); flex-shrink:0; }
.modal-tabs:empty{ display:none; }
.modal-tab{ padding:11px 18px; font-size:13px; font-weight:600; color:#64748b; background:transparent; border:none; border-bottom:2px solid transparent; cursor:pointer; transition:all .15s ease; display:flex; align-items:center; gap:7px; white-space:nowrap; position:relative; }
.modal-tab:hover{ color:#cbd5e1; background:rgba(255,255,255,.03); }
.modal-tab.is-active{ color:#06b6d4; border-bottom-color:#06b6d4; border-bottom-width:3px; background:rgba(6,182,212,.04); }
.modal-tab i{ font-size:11px; }
.modal-tab .tab-count{ font-size:10px; font-weight:700; background:rgba(255,255,255,.08); padding:2px 7px; border-radius:10px; margin-left:2px; }
.modal-tab.is-active .tab-count{ background:rgba(6,182,212,.15); color:#06b6d4; }
.modal-tab-pane{ display:none; animation:mdlFadeIn .18s ease; }
.modal-tab-pane.is-active{ display:block; }
@keyframes mdlFadeIn{ from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }

/* Detail modal header */
.detail-header{ margin-bottom:0; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.06); }
.detail-header__top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.detail-header__actions{ margin-left:auto; display:flex; gap:6px; }
.detail-title{ font-size:17px; font-weight:800; color:var(--text); margin:0 0 8px; line-height:1.35; }
.detail-meta{ display:flex; gap:14px; font-size:12px; color:var(--muted); flex-wrap:wrap; align-items:center; }
.detail-meta span{ display:flex; align-items:center; gap:5px; }
.detail-meta i{ opacity:.5; font-size:11px; }

/* Detail metric cards */
.detail-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px; }
.detail-metric{ background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:10px; padding:16px 14px; text-align:center; position:relative; overflow:hidden; }




.detail-metric__value{ font-size:28px; font-weight:900; color:var(--text); line-height:1; }
.detail-metric__label{ font-size:10px; font-weight:700; color:var(--muted); margin-top:6px; text-transform:uppercase; letter-spacing:.5px; }

/* Detail info grid */
.detail-info-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:18px; }
.detail-info-item{ display:flex; align-items:center; gap:8px; padding:10px 12px; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.04); border-radius:8px; font-size:12px; }
.detail-info-item i{ color:#06b6d4; opacity:.6; font-size:11px; width:14px; text-align:center; }
.detail-info-item__label{ color:var(--muted); }
.detail-info-item__value{ color:var(--text); font-weight:600; margin-left:auto; }

/* Detail tags */
.detail-tags{ display:flex; gap:6px; margin-bottom:18px; flex-wrap:wrap; }
.detail-tags .chip{ padding:5px 11px; font-size:11px; font-weight:600; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); border-radius:999px; color:var(--text); }

/* Confidence card */
.detail-confidence{ margin-bottom:20px; padding:16px; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,.02); }
.detail-confidence__header{ display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; }
.detail-confidence__header strong{ display:block; font-size:14px; }
.detail-confidence__header .small{ display:block; margin-top:3px; line-height:1.5; }
.detail-confidence__bar{ height:8px; background:rgba(255,255,255,.06); border-radius:4px; overflow:hidden; }
.detail-confidence__fill{ height:100%; border-radius:4px; transition:width .4s ease; }
.detail-confidence__rationale{ margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.05); line-height:1.6; }
.detail-confidence__decision{ margin-top:10px; padding:10px 12px; background:rgba(6,182,212,.06); border:1px solid rgba(6,182,212,.12); border-radius:8px; font-size:12px; display:flex; align-items:center; gap:8px; }
.detail-confidence__decision i{ color:#06b6d4; }

/* Factor cards */
.detail-factors{ display:flex; flex-direction:column; gap:6px; }
.detail-factor{ display:flex; align-items:flex-start; gap:10px; padding:10px 14px; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.04); border-radius:8px; font-size:13px; color:var(--text); line-height:1.5; }
.detail-factor i{ margin-top:2px; font-size:12px; flex-shrink:0; }
.detail-factor--warn i{ color:#f59e0b; }
.detail-factor--danger i{ color:#ef4444; }
.detail-factor--info i{ color:#06b6d4; }

/* AI Summary */
.detail-summary{ font-size:13px; color:var(--text); line-height:1.75; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.05); border-radius:10px; padding:16px; }

/* AI Provider badge */
.detail-ai-provider{ display:flex; align-items:center; gap:8px; padding:10px 14px; background:rgba(255,255,255,.02); border:1px solid var(--border); border-radius:8px; margin-bottom:18px; }
.detail-ai-provider img{ height:18px; opacity:.85; }
.detail-ai-provider__text{ font-size:12px; color:var(--muted); }
.detail-ai-provider__text strong{ color:var(--text); }

/* Report body */
.detail-body{ font-size:12px; color:var(--muted); line-height:1.7; background:rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.04); border-radius:10px; padding:16px; max-height:none; overflow-y:auto; white-space:pre-wrap; word-break:break-word; font-family:'Courier New',monospace; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.1) transparent; }
.detail-body::-webkit-scrollbar{ width:5px; }
.detail-body::-webkit-scrollbar-track{ background:transparent; }
.detail-body::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.1); border-radius:3px; }
.detail-hl-legend{ display:flex; gap:14px; margin-top:10px; font-size:11px; color:var(--muted); font-weight:600; }
.detail-hl-legend span{ display:flex; align-items:center; gap:5px; }

/* Email timeline */
.detail-emails{ display:flex; flex-direction:column; gap:6px; }
.detail-email-row{ display:flex; align-items:center; gap:10px; padding:10px 14px; font-size:12px; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.04); border-radius:8px; }
.detail-email-row:last-child{ margin-bottom:0; }

/* Detail section headers */
.detail-section{ margin-bottom:20px; }
.detail-section h4{ font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.7px; margin:0 0 10px; display:flex; align-items:center; gap:6px; }
.detail-section h4::before{ content:''; width:3px; height:11px; background:#06b6d4; border-radius:2px; }

/* ─── Overview Tab Layout ─────────────────────────────────── */
/* Empty state for panes */

/* Overview tab layout */
.overview-grid{ display:grid; grid-template-columns:1fr 280px; gap:16px; }
@media(max-width:700px){ .overview-grid{ grid-template-columns:1fr; } }

/* Score panel */
.score-panel{ background:rgba(255,255,255,.02); border:1px solid var(--border); border-radius:12px; padding:18px; }
.score-panel__scores{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }
.score-card{ text-align:center; padding:14px 8px; border-radius:10px; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.04); position:relative; }
.score-card__value{ font-size:32px; font-weight:900; line-height:1; }
.score-card__label{ font-size:10px; font-weight:700; color:var(--muted); margin-top:6px; text-transform:uppercase; letter-spacing:.5px; }
.score-card__icon{ position:absolute; top:8px; right:10px; font-size:10px; opacity:.3; }

/* Confidence preview in overview */
.conf-preview{ display:flex; align-items:center; gap:12px; padding:12px 14px; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.05); border-radius:10px; margin-top:16px; cursor:pointer; transition:background .15s; }
.conf-preview:hover{ background:rgba(255,255,255,.04); }
.conf-preview__icon{ font-size:18px; flex-shrink:0; }
.conf-preview__text{ flex:1; }
.conf-preview__text strong{ display:block; font-size:13px; }
.conf-preview__text span{ font-size:11px; color:var(--muted); }
.conf-preview__bar{ width:60px; height:6px; background:rgba(255,255,255,.06); border-radius:3px; overflow:hidden; flex-shrink:0; }
.conf-preview__fill{ height:100%; border-radius:3px; }
.conf-preview__arrow{ color:var(--muted); font-size:11px; flex-shrink:0; }

/* Sidebar info */
.detail-sidebar{ display:flex; flex-direction:column; gap:8px; }
.sidebar-card{ background:rgba(255,255,255,.02); border:1px solid var(--border); border-radius:10px; padding:14px; }
.sidebar-card__title{ font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.sidebar-card__title i{ color:#06b6d4; opacity:.5; font-size:10px; }
.sidebar-rows{ display:flex; flex-direction:column; gap:6px; }
.sidebar-row{ display:flex; justify-content:space-between; align-items:center; font-size:12px; }
.sidebar-row__label{ color:var(--muted); display:flex; align-items:center; gap:6px; }
.sidebar-row__label i{ font-size:10px; opacity:.4; width:12px; text-align:center; }
.sidebar-row__value{ color:var(--text); font-weight:600; text-align:right; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Tags improved */
.tag-strip{ display:flex; gap:6px; flex-wrap:wrap; margin-top:16px; }
.tag-pill{ padding:5px 12px; font-size:11px; font-weight:600; border-radius:999px; display:flex; align-items:center; gap:5px; }
.tag-pill i{ font-size:9px; opacity:.6; }
.tag-pill--auth{ background:rgba(139,92,246,.1); border:1px solid rgba(139,92,246,.2); color:#c4b5fd; }
.tag-pill--exploit{ background:rgba(249,115,22,.1); border:1px solid rgba(249,115,22,.2); color:#fdba74; }
.tag-pill--scope{ background:rgba(6,182,212,.1); border:1px solid rgba(6,182,212,.2); color:#67e8f9; }
.tag-pill--cwe{ background:rgba(244,114,182,.1); border:1px solid rgba(244,114,182,.2); color:#f9a8d4; }

/* AI provider in sidebar */
.sidebar-provider{ display:flex; align-items:center; gap:8px; padding:10px 0 0; border-top:1px solid rgba(255,255,255,.04); margin-top:4px; }
.sidebar-provider img{ height:16px; opacity:.8; }
.sidebar-provider span{ font-size:11px; color:var(--muted); }
.sidebar-provider strong{ color:var(--text); }
.detail-empty{ text-align:center; padding:40px 20px; color:var(--muted); }
.detail-empty i{ font-size:28px; opacity:.3; display:block; margin-bottom:10px; }

/* Bulk selection bar */
.bulk-bar{ display:flex; align-items:center; justify-content:space-between; padding:8px 14px; background:rgba(6,182,212,.08); border:1px solid rgba(6,182,212,.2); border-radius:10px; margin-bottom:8px; animation:fadeIn .15s ease; }
.bulk-bar__left{ display:flex; align-items:center; gap:10px; }
.bulk-bar__count{ font-size:13px; font-weight:600; color:#06b6d4; }
.bulk-bar__right{ display:flex; gap:8px; }
.bulk-check{ width:16px; height:16px; accent-color:#06b6d4; cursor:pointer; }
.data-table__row.is-selected{ background:rgba(6,182,212,.06); }
.data-table__row.is-selected td:first-child{ border-left:2px solid #06b6d4; }
.btn.danger{ background:rgba(239,68,68,.15); color:#f87171; border:1px solid rgba(239,68,68,.25); }
.btn.danger:hover{ background:rgba(239,68,68,.25); }

/* Delete confirmation modal */
.confirm-body{ text-align:center; padding:24px 20px; }
.confirm-body i{ font-size:36px; color:rgba(239,68,68,.5); display:block; margin-bottom:14px; }
.confirm-body p{ margin:8px 0; color:#94a3b8; font-size:14px; }
.confirm-actions{ display:flex; gap:8px; justify-content:center; margin-top:18px; }

.section{
  background:#212c42; border:1px solid rgba(255,255,255,.06);
  border-radius:10px; padding:10px; min-width:0;
}
pre{ margin:0; white-space:pre-wrap; word-wrap:break-word; }
.copy{
  font-size:12px; padding:6px 8px; border-radius:8px; cursor:pointer;
  border:1px solid rgba(255,255,255,.1); background:#0f254a; color:#cfe8ff;
  transition:transform .12s ease;
}
.copy:active{ transform:translateY(1px); }
.toolbar{ display:flex; gap:8px; flex-wrap:wrap; }

/* Responsive modal grid */
.modal .grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
@media (max-width:1200px){ .modal .grid-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:720px){  .modal .grid-3{ grid-template-columns:1fr; } }
.modal .grid-3 > *{ min-width:0; }

/* ==========================================================================
   ACCESSIBILITY & MOTION
   ========================================================================== */

:focus-visible{
  outline:2px solid rgba(6,182,212,.5); outline-offset:2px; border-radius:8px;
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ==========================================================================
   HEADER & NAV
   ========================================================================== */

.app-header{
  position:sticky; top:0; z-index:var(--z-modal);
  backdrop-filter:saturate(1.2) blur(8px);
  background:rgba(15,23,42,.7);
  border-bottom:1px solid rgba(255,255,255,.06);
  overflow-x:clip;
}
.app-header__inner{
  max-width:1200px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; gap:12px;
}
.app-logo{ font-weight:900; letter-spacing:.3px; font-size:18px; color:#e6eef6; }
.app-logo img{ width:64px; margin-bottom:-6px; }
.app-tag{ color:var(--muted); }
.app-header__brand{ display:flex; align-items:baseline; gap:10px; cursor:pointer; }

.app-header__burger{
  width:40px; height:40px; border-radius:10px; display:none;
  border:1px solid rgba(255,255,255,.12);
  background:#0f254a; color:#cfe8ff;
  align-items:center; justify-content:center;
  transition:transform .15s ease, background .2s ease, border-color .2s ease;
}
.app-header__burger:focus-visible{ outline:2px solid rgba(6,182,212,.5); }
.app-header__burger span{
  display:block; width:18px; height:2px; background:#cfe8ff;
  margin:3px 0; border-radius:2px; transition:transform .2s ease, opacity .2s ease;
}
.app-header__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.app-header__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.app-header__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

.app-header__nav{ margin-left:auto; }
.nav-list{
  display:flex; gap:8px; list-style:none; padding:0; margin:0; align-items:center;
}
.nav-item{ position:relative; }
.nav-link{
  padding:10px 12px; border-radius:10px; font-weight:700; cursor:pointer;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03); color:#e6eef6;
  transition:transform .12s ease, border-color .18s ease, background .18s ease;
}
.nav-link:hover, .nav-link:focus{ border-color:rgba(255,255,255,.25); transform:translateY(-1px); }
.nav-has-menu .nav-link[aria-expanded="true"]{
  background:rgba(6,182,212,.20); border-color:rgba(6,182,212,.35);
}

/* Dropdown menu */
.nav-menu{
  position:absolute; top:calc(100% + 10px); right:0; left:auto;
  display:none; width:max-content; min-width:520px; max-width:min(92vw,520px);
  padding:12px; opacity:0; transform:translateY(6px) scale(.98); pointer-events:none;
  background:#1c2538; border:1px solid rgba(255,255,255,.10);
  border-radius:14px; box-shadow:0 18px 40px rgba(0,0,0,.45);
  transition:opacity .16s ease, transform .16s ease;
}
.nav-item.nav-open .nav-menu{ display:block; opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

.menu-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.menu-card{
  text-align:left; padding:12px; border-radius:12px; cursor:pointer;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  color:#e6eef6;
  transition:transform .12s ease, border-color .18s ease, background .18s ease;
}
.menu-card:hover, .menu-card:focus{ transform:translateY(-1px); border-color:rgba(255,255,255,.25); }
.menu-title{ font-weight:800; margin-bottom:4px; }
.menu-desc{ font-size:12px; color:var(--muted); }

/* Mobile nav */
@media (max-width:900px){
  .app-header__burger{ display:inline-flex; }
  .app-header__nav{
    position:fixed; inset:56px 10px auto 10px; display:none;
    background:#1c2538; border:1px solid rgba(255,255,255,.10); border-radius:14px; padding:10px;
  }
  .app-header__nav.nav-open{ display:block; }
  .nav-list{ flex-direction:column; align-items:stretch; gap:6px; }
  .nav-item .nav-menu{ position:static; min-width:0; margin-top:8px; box-shadow:none; }
  .menu-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   OFF‑CANVAS PANELS
   ========================================================================== */

#rightPanel,#rightPanel *{ visibility:visible !important; }

.offcanvas-backdrop{
  position:fixed; inset:0; z-index:var(--z-modal);
  background:rgba(2,6,23,.55); backdrop-filter:saturate(1.2) blur(6px);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.offcanvas-backdrop.show{ opacity:1; pointer-events:auto; }

.offcanvas{
  position: fixed; top:0; right:0; bottom:0; width:min(720px, 92vw);
  background:#1c2538; border-left:1px solid rgba(255,255,255,.08);
  box-shadow:-20px 0 50px rgba(0,0,0,.45);
  z-index:var(--z-modal-inner); display:flex; flex-direction:column; overflow:hidden;
  opacity:0; pointer-events:none; transform:translateX(100%);
  transition: transform .25s cubic-bezier(.2,.9,.2,1), opacity .2s ease;
  will-change: transform;
}
.offcanvas.open{ opacity:1; pointer-events:auto; transform:translateX(0); }
.offcanvas__head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08);
}
.offcanvas__body{ padding:14px; overflow:auto; -webkit-overflow-scrolling:touch; }
.offcanvas .btn.close{
  border:1px solid rgba(255,255,255,.12); background:#0f254a; color:#cfe8ff;
  padding:8px 10px; border-radius:10px; cursor:pointer;
}
.offcanvas-source{ display:none !important; }
.offcanvas *{ min-width:0; }
.offcanvas .flex label.small{ min-width:0 !important; }
.offcanvas .toolbar, .offcanvas .input-add{ flex-wrap:wrap; }
.offcanvas .input-add input{ min-width:0; width:100%; }
.offcanvas .chips{ flex-wrap:wrap; }
.offcanvas textarea,
.offcanvas input[type="text"],
.offcanvas input[type="number"]{ width:100%; }

/* Simplified responsive layout inside offcanvas */
.offcanvas .settings,
.offcanvas .grid-2,
.offcanvas .grid-3,
.offcanvas .grid-4,
.offcanvas .grid-5{
  display:grid; grid-template-columns:1fr; gap:10px;
}
@media (min-width:540px){
  .offcanvas .settings{ grid-template-columns:repeat(2,1fr); }
  .offcanvas .grid-3,
  .offcanvas .grid-4,
  .offcanvas .grid-5{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:820px){
  .offcanvas .grid-4,
  .offcanvas .grid-5{ grid-template-columns:repeat(3,1fr); }
}
.offcanvas{ overflow-x:hidden; }

/* ==========================================================================
   SETTINGS / BUCKETS
   ========================================================================== */

.settings{
  display:grid; grid-template-columns:repeat(5,1fr); gap:8px; align-items:start;
}
label.inline{
  display:flex; flex-direction:column; gap:6px;
  font-size:12px; color:var(--muted);
}
.bucket{
  background:#212c42; border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:10px;
}
.bucket h4{
  margin:.1rem 0 .4rem; font-size:13px; color:#d9e8ff;
  display:flex; align-items:center; gap:8px;
}

/* Info tooltip */
.info{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:999px; margin-left:6px;
  font-size:11px; color:#cfe8ff; cursor:help; position:relative; user-select:none;
  border:1px solid rgba(255,255,255,.18); background:#0f254a;
  transition:transform .15s ease, background .2s ease, border-color .2s ease;
  z-index:999;
}
.info:hover,.info:focus{ transform:translateY(-1px); border-color:rgba(255,255,255,.35); outline:none; }
.info::after{
  content:attr(data-tip);
  position:absolute; left:50%; bottom:130%;
  transform:translateX(-50%) translateY(6px) scale(.98);
  opacity:0; pointer-events:none;
  background:#0f254a; color:#cfe8ff;
  padding:8px 10px; min-width:200px; max-width:320px; white-space:normal; line-height:1.35;
  border:1px solid rgba(255,255,255,.12); border-radius:8px; z-index:50;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  transition:opacity .16s ease, transform .16s ease;
}
.info:hover::after,.info:focus::after{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); }

/* ==========================================================================
   SUMMARY (LEFT PANE)
   ========================================================================== */

.summary-view .summary-head{ display:flex; flex-direction:column; gap:4px; margin-bottom:6px; margin-bottom: 21px; text-align: center;}
.summary-view .summary-title{ font-weight:800; letter-spacing:.2px; }
.summary-view .summary-sub{ color:#9fbbe6; }
.summary-view .summary-box{ margin-top:6px; }

.summary-intro{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px;
}
.summary-metrics{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; min-width:220px;
}
@media (max-width:800px){
  .summary-view .summary-metrics{ width:100%; }
}

.stat{
  text-align:center; padding:10px; border-radius:10px;
  background:#1e2a41; border:1px solid rgba(255,255,255,.08);
}
.stat__label{ font-size:12px; color:#94a3b8; }
.stat__value{ font-weight:900; letter-spacing:.2px; font-size:18px; }

.summary-title-2{ font-weight:800; letter-spacing:.2px; margin:10px 0 6px; }
.summary-text{ color:#cfe8ff; line-height:1.45; margin:4px 0 10px; }

.summary-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.summary-tags .chip{ background:#1e2a41; padding:4px 8px; font-size:11px; }

/* ==========================================================================
   REPORT TEXT HIGHLIGHTER (SANITISATION PREVIEW)
   ========================================================================== */

.report-wrap{
  position: relative; overflow: hidden; border-radius: 10px;
}

/* Make native textarea text transparent while overlay paints highlights */
.js-hl-ready .report-wrap textarea{
  background: transparent !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  caret-color: #e6eef6;
}
.js-hl-ready .report-wrap textarea::selection{
  background: rgba(99,102,241,.25);
  color: transparent; -webkit-text-fill-color: transparent;
}
.js-hl-ready .report-wrap textarea::-moz-selection{
  background: rgba(99,102,241,.25); color: transparent;
}

/* Overlay layer sits on top but mirrors metrics/scroll */
.report-wrap .hl-layer{
  position:absolute; /* positioned by JS to match textarea border box */
  white-space: pre-wrap; overflow-wrap: normal; word-break: normal;
  overflow: visible; pointer-events: none; background: transparent;
  z-index:0;
}

/* Keep metrics aligned between textarea and overlay */
textarea, .report-wrap .hl-layer{
  font-family: inherit; font-size: 14px; line-height: 1.45;
}

/* Inline highlight pill; uses ::before for slab background */
.report-wrap .hl{
  display:inline; white-space:inherit; line-height:inherit; letter-spacing:inherit;
  word-break: keep-all; overflow-wrap: normal; hyphens: none; font-weight:inherit;
  --hl-bg: rgba(255,255,255,.10);
  --hl-border: rgba(255,255,255,.22);
  --hl-fg: #e6eef6;
  color: var(--hl-fg);
  position: relative; border:0; padding:0; border-radius:.32em;
}
.report-wrap mark.hl{
  position: relative; z-index:0;
  background: transparent !important; box-shadow:none; color: var(--hl-fg) !important;
  -webkit-text-fill-color: var(--hl-fg);
}
.report-wrap mark.hl::before{
  content:""; position:absolute; left:-.32em; right:-.32em; top:50%;
  height:1.4em; transform:translateY(-50%); border-radius:.40em;
  background: var(--hl-bg); box-shadow:0 0 0 1px var(--hl-border) inset;
  pointer-events:none;
}

/* Per‑type palettes */
.report-wrap .hl-url   { --hl-bg: rgba(6,182,212,.22);  --hl-border: rgba(6,182,212,.45);  --hl-fg:#d5f8ff; }
.report-wrap .hl-email { --hl-bg: rgba(99,102,241,.22); --hl-border: rgba(99,102,241,.45); --hl-fg:#e3e6ff; }
.report-wrap .hl-ipv4,
.report-wrap .hl-ipv6  { --hl-bg: rgba(34,197,94,.22);  --hl-border: rgba(34,197,94,.45);  --hl-fg:#d9ffe6; }
.report-wrap .hl-domain{ --hl-bg: rgba(250,204,21,.22); --hl-border: rgba(250,204,21,.50); --hl-fg:#fff6d6; }
.report-wrap .hl-cust  { --hl-bg: rgba(244,114,182,.22);--hl-border: rgba(244,114,182,.45); --hl-fg:#ffe0f0; }

/* Tiny summary bubble in the bottom-right of the textarea */
.san-inline{
  position:absolute; right:10px; bottom:10px; z-index:5;
  display:flex; align-items:center; gap:8px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(15,23,42,.78); backdrop-filter:saturate(1.2) blur(6px);
  border-radius:10px; padding:6px 8px;
}
.san-inline .stat-pills{ gap:6px; }
.san-inline .pill{ padding:4px 8px; font-size:11px; }


/* ==========================================================================
   STEPPER & PRICING TABLE (Setup Wizard)
   ========================================================================== */
.stepper{ display:flex; align-items:center; gap:12px; margin:6px 0 16px; }
.stepper__item{ display:flex; align-items:center; gap:8px; }
.stepper__dot{
  width:28px; height:28px; display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); font-weight:700;
}
.stepper__item.is-active .stepper__dot{ background:var(--accent); color:#0b1220; border-color:var(--accent); }
.stepper__label{ font-size:13px; color:var(--muted); }
.stepper__item.is-active .stepper__label{ color:#e2e8f0; }
.stepper__line{ flex:1 1 auto; height:2px; background:rgba(255,255,255,.08); border-radius:2px; transition:background .3s; }
.stepper__line.is-done{ background:var(--accent, #06b6d4); }
.stepper__item.is-done .stepper__dot{ background:var(--accent, #06b6d4); color:#0b1220; border-color:var(--accent, #06b6d4); }
.stepper__item.is-done .stepper__dot::after{ content:'\f00c'; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:10px; }
.stepper__item.is-done .stepper__label{ color:var(--accent, #06b6d4); }
.stepper__item:not(.is-active):not(.is-done){ opacity:.4; }
.stepper__item:not(.is-active):not(.is-done) .stepper__dot{ background:transparent; border-color:rgba(255,255,255,.15); color:rgba(255,255,255,.3); }

.pricing{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:8px; }
.pricing .tier{ background:#121a2a; border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:14px; box-shadow:0 8px 22px rgba(0,0,0,.35);}
.tier__head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.tier__name{ font-weight:700; letter-spacing:.3px; }
.tier__price{ font-size:22px; font-weight:800; }
.tier__price sub{ font-size: 10px;top: -9px;position: relative;font-weight: normal;width: fit-content;display: inline-block;line-height: 1.2;left: -3px;}
.tier__feat{ display:flex; align-items:flex-start; gap:8px; font-size:14px; margin:14px 0; }
.tier__feat::before{
  content:''; flex:0 0 16px; width:16px; height:16px; border-radius:50%;
  border: 2px solid rgb(6 181 211);; box-shadow:inset 0 0 0 4px rgba(34,197,94,.25);
}
.tier input[type="radio"]{ display:none; }
.tier.is-selected{ outline:2px solid var(--accent); box-shadow:0 0 0 4px rgba(6,182,212,.15), 0 12px 28px rgba(0,0,0,.45); }
.tier .btn{ margin-top:8px; width:100%; }

@media (max-width: 900px){
  .pricing{ grid-template-columns:1fr; }
}


/* ==========================================================================
   CHIPS (Step 3 custom keywords)
   ========================================================================== */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid rgba(255,255,255,.12); background:#121a2a;
  border-radius:999px; padding:4px 9px; font-size:12px;
}
.chip__x{
  border:0; background:transparent; cursor:pointer; font-weight:700;
  line-height:1; padding:0 2px; color:#9fb3c8;
}
.chip__x:hover{ color:#e2e8f0; }


/* ==========================================================================
   SPINNERS & ANIMATIONS (shared)
   ========================================================================== */

@keyframes spin{ to { transform: rotate(360deg);} }

.spinner{
  width:22px; height:22px; border-radius:50%;
  border:3px solid rgba(255,255,255,.25); border-top-color:var(--accent);
  animation:spin .8s linear infinite;
}
.spinner--sm{ width:16px; height:16px; border-width:2px; }

.san-inline .spinner{ display:none; }
.san-inline.busy .spinner{ display:inline-block; }

/* ==========================================================================
   LOADER PANELS (right card & full‑context)
   ========================================================================== */

.loader-panel{
  display:flex; align-items:center; gap:12px;
  width:100%; max-width:560px; padding:14px; border-radius:12px;
  background: var(--loader-surface) !important;
  border: 1px solid var(--loader-border) !important;
  box-shadow: none !important;
}
.loader-body{ flex:1; min-width:0; }
.loader-title{ color:#cfe8ff; font-weight:800; margin-bottom:8px; }

/* Ring (conic fill + masked center) */
.loader-ring{
  --pct: 8%;
  --ring-bg: rgba(148,163,184,.15);
  width:56px; aspect-ratio:1/1; border-radius:50%;
  background:
    conic-gradient(var(--accent) var(--pct), var(--ring-bg) 0),
    radial-gradient(farthest-side, transparent calc(60% - 1px), #000 60%);
  -webkit-mask: radial-gradient(farthest-side, transparent 60%, #000 61%);
  mask: radial-gradient(farthest-side, transparent 60%, #000 61%);
  animation: spin 1.1s linear infinite;
  box-shadow: inset 0 0 0 1px var(--loader-border);
}

/* Stage timeline */
.stage-list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:8px;
}
.stage-list li{
  position:relative; min-height:22px; padding-left:28px;
  color:#bcd1e7; font-size:12px; letter-spacing:.1px;
}
.stage-list li::before{
  content:""; position:absolute; left:10px; top:-10px; bottom:-10px; width:2px;
  background: linear-gradient(180deg, var(--loader-spine), transparent);
  border-radius:2px;
}
.stage-list li:first-child::before{ top:12px; }
.stage-list li:last-child::before{ bottom:12px; }

.stage-dot{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:20px; height:20px; display:grid; place-items:center;
  border-radius:999px; border:1px solid var(--loader-border);
  background:#162033;
}
.stage-dot i{ font: var(--fa-font-solid, normal 900 12px/1 "Font Awesome 6 Pro"); }
.stage-text{ display:block; }

/* states */
.stage-list li.done .stage-dot{ background:#183524; border-color:#296b3d; color:#dbffe8; }
.stage-list li.done .stage-text{ color:#9fe3bf; }

.stage-list li.current .stage-dot{
  background:#0f2d34; border-color:#0ea5a1; box-shadow:none;
}
.stage-list li.current .stage-text{ color:#e6eef6; font-weight:700; }
.stage-list li.todo{ opacity:.85; }

/* Current step pulsing blip */
.stage-dot .pulse{
  width:8px; height:8px; border-radius:999px; background:var(--accent);
  box-shadow:0 0 0 0 rgba(6,182,212,.6);
  animation:pulse 1.6s ease-out infinite;
}
@keyframes pulse{
  50% { box-shadow:0 0 0 10px rgba(6,182,212,.0); }
  100%{ box-shadow:0 0 0 0 rgba(6,182,212,.0); }
}

/* Skeleton placeholders under loader (card mode) */
.skeleton-stack{
  margin-top:12px; display:grid; gap:8px; width:100%; max-width:560px;
}
.skeleton{
  position:relative; overflow:hidden; border-radius:10px;
  background:#172133; border:1px solid var(--loader-border);
  height:38px;
}
.skeleton.kv { height:56px; }
.skeleton.badgeish { height:30px; width:60%; }
.skeleton::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(148,163,184,.16), transparent);
  transform:translateX(-100%); animation: shimmer 1.25s ease-in-out infinite;
  will-change: transform;
}
@keyframes shimmer{ 100% { transform:translateX(100%); } }

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  .loader-ring{ animation: none; }
  .skeleton::after{ animation: none; }
  .stage-dot .pulse{ animation: none; }
}

/* ==========================================================================
   FULL‑CONTEXT LOADER (covers app body, keeps header/footer visible)
   ========================================================================== */

.layout.context-loading{
  opacity: 0; transform: scale(.99); filter: blur(2px) saturate(.9);
  pointer-events: none;
}

.context-overlay{
  position: fixed;
  inset: var(--app-header-h) 0 calc(var(--app-footer-h) + env(safe-area-inset-bottom, 0px) + 1px) 0;
  display:none; align-items:center; justify-content:center;
  padding:18px; background:transparent; z-index:var(--z-tooltip);
  transform: translateZ(0); will-change: transform; pointer-events: auto;
}
.context-overlay.show{ display:flex; }
.context-overlay .loader-panel{ max-width: 640px; padding: 18px 20px; }
.context-overlay .loader-ring{ width: var(--loader-ring-size); }
.context-overlay .skeleton-stack{ display:none; } /* hide fillers in full-context mode */

/* While context loader is on, hide per-card overlays & extra blur */
body.context-mode .card .loading-overlay{ display:none !important; }
body.context-mode .card.is-loading > *:not(.loading-overlay){ filter:none !important; }

/* Hide most app chrome except header/footer */
body.context-mode .container > .header,
body.context-mode .layout,
body.context-mode #statusBar,
body.context-mode .offcanvas,
body.context-mode #ocBackdrop { display:none !important; }

/* Collapse page body padding, but NOT the footer's inner .container */
body.context-mode .container:not(.footer-inner){
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Ensure the footer keeps its normal padding while the loader is active */
body.context-mode .site-footer .footer-inner{
  padding: 12px 20px !important; /* same values you use normally */
}

/* Keep footer visible & anchored */
body.context-mode .site-footer{
  position: fixed; left:0; right:0; bottom:0; z-index:var(--z-tooltip);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer{
  margin-top:28px;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(15,23,42,.6);
  backdrop-filter:saturate(1.2) blur(6px);
}
.site-footer .footer-inner{
  max-width:1200px; margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.site-footer a{
  color:#cfe8ff; text-decoration:none; margin-right:14px;
  border-bottom:1px dashed transparent; transition:border-color .15s ease;
}
.site-footer a:hover{ border-color:rgba(207,232,255,.6); }
.site-footer .footer-right{ color:var(--muted); font-size:13px; }

/* Ensure anchor inside grid doesn't break columns */
.layout > .section-anchor{ grid-column:1 / -1; height:0; }

/* ==========================================================================
   SCROLLBARS (textarea-only)
   ========================================================================== */

/* Firefox */
textarea{
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

/* Chromium/WebKit */
textarea::-webkit-scrollbar{
  width: var(--scroll-size);
  height: var(--scroll-size);
}
textarea::-webkit-scrollbar-track{
  background: var(--scroll-track);
  border-radius: var(--scroll-radius);
}
textarea::-webkit-scrollbar-thumb{
  background: var(--scroll-thumb);
  border-radius: var(--scroll-radius);
  border: 3px solid transparent;
  background-clip: content-box;
}
textarea::-webkit-scrollbar-thumb:hover{
  background: var(--scroll-thumb-hover);
}
textarea::-webkit-scrollbar-corner{ background: transparent; }

/* ==========================================================================
   DRAG & DROP OVERLAY FOR REPORT TEXTAREA
   ========================================================================== */

.report-wrap{ transition: box-shadow .18s ease, background .18s ease, outline-color .18s ease; }
.report-wrap.show-drop{ outline:2px dashed rgba(6,182,212,.55); background:rgba(6,182,212,.06); }

.drop-overlay{
  position:absolute; inset:6px; display:none; place-items:center; z-index:4;
  border-radius:10px; border:2px dashed rgba(6,182,212,.45);
  background:rgba(15,23,42,.78); backdrop-filter:saturate(1.2) blur(6px);
  opacity:0; transform:scale(.98);
  transition:opacity .16s ease, transform .16s ease;
  pointer-events:none;
}
.drop-overlay.show{ display:grid; opacity:1; transform:scale(1); }

.drop-inner{ text-align:center; }
.drop-title{ font-weight:800; letter-spacing:.2px; margin-top:6px; }
.drop-sub{ color:var(--muted); margin-top:2px; }

.drop-overlay .spinner{ display:none; margin-bottom:6px; }
.drop-overlay.busy .spinner{ display:inline-block; }

.report-wrap.importing{ outline:2px dashed rgba(148,163,184,.35); }

/* Flash ring when new text arrives */
@keyframes inputPulse{
  0%{ box-shadow:0 0 0 0 rgba(6,182,212,0); }
  40%{ box-shadow:0 0 0 3px rgba(6,182,212,.35); }
  100%{ box-shadow:0 0 0 0 rgba(6,182,212,0); }
}
.report-wrap.flash{ animation:inputPulse 1.1s ease; }

/* ===== Sticky footer layout ===== */
html, body { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main.container { flex: 1 0 auto; }
.site-footer { margin-top: auto; }

/* ===== Mailbox status dot ===== */
.status-dot {
  display:inline-block; width:10px; height:10px; border-radius:999px; margin-right:8px;
  background:#9aa1ae; box-shadow:0 0 0 0 rgba(34,197,94,.0);
}
.status-dot.dot-ok  {
  background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.6);
  animation: statusPulse 2s ease-out infinite;
}
.status-dot.dot-off { background:#64748b; }
@keyframes statusPulse {
  50% { box-shadow:0 0 0 8px rgba(34,197,94,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
}

/* Make embedded iframes inside modals fill nicely */
.modal-body iframe { display:block; width:100%; border:0; }


.container { max-width: 1200px; } /* wider page */

.mailbox-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 900px) {
  .mailbox-grid { grid-template-columns: 1fr; } /* single wide row cards */
}
.mailbox-card {
  display: grid;
  grid-template-columns: 60px 1fr 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
}
.mailbox-card .col.actions { display: flex; gap: 6px; justify-content: flex-end; }
.mailbox-card .signed-in { font-weight: 600; }
.mailbox-card .monitored { font-size: 12px; margin-top: 2px; }
.mailbox-card .monitored.muted { opacity: .65; }
.mailbox-card .provider { font-size: 20px; margin-left: 6px; }

.btn.icon { padding: 8px 10px; }
.btn.icon i { pointer-events: none; }

.dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #53c21d;
  display: inline-block;
  margin-right: 6px;
}
.dot.live { box-shadow: 0 0 0 0 rgba(83, 194, 29, 0.6); animation: pulse 1.6s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(83,194,29,0.6); }
  70%{ box-shadow: 0 0 0 10px rgba(83,194,29,0); }
  100%{ box-shadow: 0 0 0 0 rgba(83,194,29,0); }
}

.tabs { display:flex; gap:8px; border-bottom:1px solid var(--border); }
.tab { padding:8px 12px; border:1px solid transparent; border-bottom:none; border-radius:8px 8px 0 0; background:transparent; }
.tab.is-active { border-color: var(--border); background: var(--card); }

.tab-panels { padding: 12px; }
.tab-panel { display:none; }
.tab-panel.is-active { display:block; }

.embed-host { width:100%; min-height: 480px; border:0; }
.loading-message { padding: 20px; font-size: 14px; opacity: .8; }
/* Sticky domain suffix inside the input */
.alias-field {
  position: relative;
}

.alias-field > .input {
  width: 100%;
  /* This padding will be set precisely by JS; fall back to a safe default. */
  padding-right: var(--alias-suffix-w, 140px);
}

.alias-field > .alias-suffix {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    pointer-events: none;
    user-select: none;
    color: #FFF; 
    font-family: inherit;
    line-height: 1;
    padding-left: 6px;
    font-size: 13px;
    white-space: nowrap;
}

/* Optional: slightly darker suffix on focus for visual harmony */
.alias-field > .input:focus + .alias-suffix {
  color: #FFF;
}
/* Info tooltips on metric cards */
.detail-tooltip{ font-size:11px; color:var(--muted); opacity:.4; cursor:help; margin-left:3px; position:relative; vertical-align:middle; transition:opacity .15s; }
.detail-tooltip:hover{ opacity:.8; }
.detail-metric__label{ position:relative; }
.detail-metric__label .detail-tooltip{ position:relative; display:inline-block; }
.detail-tooltip::after{ content:attr(data-tip); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:#1a2236; color:#e2e8f0; border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:8px 12px; font-size:11px; font-weight:400; line-height:1.5; white-space:normal; width:220px; text-transform:none; letter-spacing:0; pointer-events:none; opacity:0; transition:opacity .15s; z-index:100; box-shadow:0 8px 24px rgba(0,0,0,.4); text-align:left; }
.detail-tooltip::before{ content:''; position:absolute; bottom:calc(100% + 2px); left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:#1a2236; pointer-events:none; opacity:0; transition:opacity .15s; z-index:101; }
.detail-tooltip:hover::after,.detail-tooltip:hover::before{ opacity:1; }


/* Email flow component */
.email-flow{ display:flex; align-items:center; gap:0; margin-bottom:18px; background:rgba(255,255,255,.02); border:1px solid var(--border); border-radius:10px; padding:14px 16px; }
.email-flow__node{ flex:1; min-width:0; }
.email-flow__label{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin-bottom:4px; }
.email-flow__addr{ font-size:13px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.email-flow__addr i{ color:#06b6d4; opacity:.5; font-size:12px; flex-shrink:0; }
.email-flow__arrow{ flex-shrink:0; width:40px; text-align:center; color:var(--muted); opacity:.3; font-size:14px; }
@media(max-width:500px){ .email-flow{ flex-direction:column; gap:8px; } .email-flow__arrow{ transform:rotate(90deg); width:auto; } }


/* Timezone timestamp with hover tooltip */
.tz-time{ position:relative; display:inline-block; cursor:help; }
.tz-tip{ display:none; position:fixed; background:#151d2e; border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:8px 12px; z-index:200; box-shadow:0 8px 24px rgba(0,0,0,.5); white-space:nowrap; min-width:180px; pointer-events:none; transition:opacity .12s ease; }
.tz-tip__row{ display:flex; align-items:center; gap:6px; padding:3px 0; font-size:12px; color:var(--text); }
.tz-tip__row strong{ font-weight:700; }
.tz-tip__utc{ color:var(--muted); border-top:1px solid rgba(255,255,255,.06); margin-top:2px; padding-top:5px; }
.tz-tip__flag{ display:inline-block; width:16px; height:12px; border-radius:2px; box-shadow:0 0 0 1px rgba(255,255,255,.1); vertical-align:middle; flex-shrink:0; }
.tz-tip__abbr{ font-size:10px; font-weight:700; color:var(--muted); opacity:.7; }

/* TZ badge in sidebar */
.tz-badge{ display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--muted); padding:3px 8px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:6px; margin-top:4px; }
.tz-badge .fi{ display:inline-block; width:14px; height:10px; border-radius:2px; box-shadow:0 0 0 1px rgba(255,255,255,.1); }

/* Timezone select dropdown */
.tz-select-wrap{ position:relative; }
.tz-select{ position:relative; }
.tz-select__display{ display:flex; align-items:center; gap:8px; padding:9px 12px; background:var(--card); border:1px solid var(--border); border-radius:8px; cursor:pointer; transition:border-color .15s; }
.tz-select__display:hover{ border-color:rgba(255,255,255,.15); }
.tz-select.is-open .tz-select__display{ border-color:#06b6d4; box-shadow:0 0 0 2px rgba(6,182,212,.15); }
.tz-select__flag .fi{ display:inline-block; width:20px; height:14px; border-radius:2px; box-shadow:0 0 0 1px rgba(255,255,255,.1); }
.tz-select__text{ flex:1; font-size:13px; color:var(--text); font-weight:500; }
.tz-select__chevron{ color:var(--muted); font-size:11px; transition:transform .15s; }
.tz-select.is-open .tz-select__chevron{ transform:rotate(180deg); }
.tz-select__dropdown{ display:none; position:absolute; top:calc(100% + 4px); left:0; right:0; background:#151d2e; border:1px solid rgba(255,255,255,.1); border-radius:10px; box-shadow:0 12px 36px rgba(0,0,0,.5); z-index:300; max-height:320px; overflow:hidden; flex-direction:column; }
.tz-select.is-open .tz-select__dropdown{ display:flex; animation:mdlFadeIn .12s ease; }
.tz-select__search-wrap{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.06); }
.tz-select__search-wrap i{ color:var(--muted); font-size:12px; opacity:.5; }
.tz-select__search{ flex:1; background:none; border:none; color:var(--text); font-size:13px; font-family:inherit; outline:none; }
.tz-select__search::placeholder{ color:var(--muted); opacity:.6; }
.tz-select__options{ overflow-y:auto; max-height:260px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.1) transparent; }
.tz-select__group{ padding:6px 12px 4px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); opacity:.6; position:sticky; top:0; background:#151d2e; }
.tz-select__option{ display:flex; align-items:center; gap:8px; padding:8px 12px; font-size:13px; color:var(--text); cursor:pointer; transition:background .1s; }
.tz-select__option:hover{ background:rgba(6,182,212,.06); }
.tz-select__option.is-selected{ background:rgba(6,182,212,.1); color:#06b6d4; }
.tz-select__option .fi{ display:inline-block; width:18px; height:13px; border-radius:2px; box-shadow:0 0 0 1px rgba(255,255,255,.08); flex-shrink:0; }
.tz-select__option-name{ flex:1; }
.tz-select__option-offset{ font-size:11px; color:var(--muted); font-weight:600; font-family:monospace; }
.tz-select__auto{ border-bottom:1px solid rgba(255,255,255,.06); }
.tz-select__auto .tz-select__option{ color:#06b6d4; }

/* Decision dropdown override */
.dec-dropdown{ position:relative; display:inline-block; }
.dec-dropdown__trigger{ cursor:pointer; display:inline-flex; align-items:center; gap:4px; }
.dec-dropdown__trigger .badge{
  text-transform:capitalize; cursor:pointer; }
.dec-dropdown__caret{ font-size:9px; color:var(--muted); opacity:.5; transition:transform .15s; }
.dec-dropdown.is-open .dec-dropdown__caret{ transform:rotate(180deg); opacity:1; }
.dec-dropdown__menu{ display:none; position:absolute; top:calc(100% + 4px); left:0; background:#151d2e; border:1px solid rgba(255,255,255,.12); border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,.5); z-index:250; min-width:180px; padding:4px; overflow:hidden; }
.dec-dropdown.is-open .dec-dropdown__menu{ display:block; animation:mdlFadeIn .12s ease; }
.dec-dropdown__label{ padding:6px 10px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); opacity:.5; }
.dec-dropdown__item{ display:flex; align-items:center; gap:8px; padding:8px 12px; font-size:13px; font-weight:600; color:var(--text); border-radius:6px; cursor:pointer; transition:background .1s; }
.dec-dropdown__item:hover{ background:rgba(255,255,255,.06); }
.dec-dropdown__item.is-current{ opacity:.5; pointer-events:none; }
.dec-dropdown__dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.dec-dropdown__item .fa-check{ font-size:10px; margin-left:auto; color:#06b6d4; }
.dec-dropdown__item--auto .dec-dropdown__dot{ background:#22c55e; }
.dec-dropdown__item--queue .dec-dropdown__dot{ background:#0cabb3; }
.dec-dropdown__item--fast .dec-dropdown__dot{ background:#e09c28; }
.dec-dropdown__item--urgent .dec-dropdown__dot{ background:#952626; }

/* Override indicator in detail modal */
.detail-override{ background:rgba(245,158,11,.06); border:1px solid rgba(245,158,11,.12); border-radius:8px; padding:10px 14px; margin-bottom:12px; display:flex; align-items:center; gap:8px; font-size:12px; }
.detail-override i{ color:#f59e0b; }
.detail-override span{ color:var(--muted); }
.detail-override strong{ color:var(--text); }

/* Improved table row layout */
.data-table__row--msg{ cursor:pointer; }
.data-table__row--msg td{ transition:background .1s; }
.data-table__row--msg:hover td{ background:rgba(6,182,212,.03); }
.msg-subject{ font-weight:600; font-size:13px; color:var(--text); max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.3; }
.msg-ref{ font-size:10px; font-weight:700; color:var(--muted); opacity:.5; letter-spacing:.3px; margin-bottom:2px; line-height:1; }
.msg-from{ font-size:12px; color:var(--muted); max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Period buttons + Flatpickr calendar */
.msg-period-bar{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.msg-period{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); color:var(--muted); font-size:12px; font-weight:600; padding:6px 12px; border-radius:6px; cursor:pointer; transition:all .15s; font-family:inherit; }
.msg-period:hover{ background:rgba(255,255,255,.08); color:var(--text); }
.msg-period.is-active{ background:rgba(6,182,212,.1); border-color:rgba(6,182,212,.25); color:#06b6d4; }
.msg-period i{ font-size:11px; margin-right:2px; }
.date-picker-wrap{ position:relative; display:inline-flex; align-items:center; gap:4px; }
.date-picker-hidden{ position:absolute; opacity:0; width:0; height:0; overflow:hidden; pointer-events:none; }
.date-picker-clear{ padding:4px 6px!important; font-size:10px; color:var(--muted); opacity:.6; border:1px solid rgba(255,255,255,.06); border-radius:6px; }
.date-picker-clear:hover{ opacity:1; color:#ef4444; }
/* Flatpickr dark theme overrides to match Bugtri */
.flatpickr-calendar{ background:#151d2e!important; border:1px solid rgba(255,255,255,.12)!important; border-radius:12px!important; box-shadow:0 12px 36px rgba(0,0,0,.5)!important; font-family:Inter,sans-serif!important; }
.flatpickr-months .flatpickr-month{ background:#151d2e!important; }
.flatpickr-current-month .flatpickr-monthDropdown-months{ background:#151d2e!important; }
.flatpickr-day{ border-radius:6px!important; }
.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange{ background:#06b6d4!important; border-color:#06b6d4!important; }
.flatpickr-day.inRange{ background:rgba(6,182,212,.15)!important; border-color:rgba(6,182,212,.15)!important; box-shadow:-5px 0 0 rgba(6,182,212,.15),5px 0 0 rgba(6,182,212,.15)!important; }
.flatpickr-day:hover{ background:rgba(6,182,212,.2)!important; border-color:rgba(6,182,212,.3)!important; }
.flatpickr-day.today:not(.selected){ border-color:#06b6d4!important; }
span.flatpickr-weekday{ color:#64748b!important; font-weight:600!important; }
.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{ fill:#94a3b8!important; }
.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{ fill:#06b6d4!important; }

/* OTP boxes for MFA setup (account page) */
.otp-box-acct{width:40px;height:48px;text-align:center;font-size:20px;font-weight:700;font-family:monospace;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.1);border-radius:8px;color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s}
.otp-box-acct:focus{border-color:#06b6d4;box-shadow:0 0 0 3px rgba(6,182,212,.15)}

/* Message tags */
.msg-tags{display:flex;gap:4px;margin-top:3px;flex-wrap:wrap}
.msg-tag{font-size:10px;font-weight:600;padding:1px 7px;border-radius:999px;border:1px solid;line-height:1.5}

/* ═══ Mobile Responsive Improvements ═══ */

/* Messages table on small screens */
@media (max-width: 768px) {
  .messages-bar { flex-direction:column; gap:8px; }
  .messages-bar .search-wrap { width:100%; }
  .messages-bar .input { max-width:100%!important; width:100%; }
  .messages-bar .date-picker-wrap { width:100%; }
  .messages-bar .date-picker-wrap .msg-period { width:100%; justify-content:center; }
  .msg-period-bar { width:100%; justify-content:center; }
  .bulk-bar { flex-direction:column; gap:8px; text-align:center; }
  .bulk-bar__right { justify-content:center; }
  .data-table { font-size:12px; }
  .data-table thead th { font-size:9px; padding:8px 6px; }
  .data-table__cell { padding:8px 6px; }
  .msg-subject { max-width:160px; font-size:12px; }
  .msg-from { max-width:100px; font-size:11px; }
  .dec-dropdown__menu { min-width:150px; right:0; left:auto; }
}

/* Modal on small screens */
@media (max-width: 640px) {
  .modal-card { width:96vw!important; max-height:92vh; border-radius:10px; }
  .modal-card--lg { width:96vw!important; }
  .modal-tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .modal-tab { padding:9px 12px; font-size:12px; }
  .detail-header__top { flex-direction:column; align-items:flex-start; gap:8px; }
  .detail-header__actions { margin-left:0; }
  .detail-metrics { grid-template-columns:1fr!important; }
  .detail-info-grid { grid-template-columns:1fr; }
  .email-flow { flex-direction:column; }
  .email-flow__arrow { transform:rotate(90deg); }
  .detail-meta { flex-direction:column; gap:6px; }
  .detail-title { font-size:15px; }
}

/* Analytics on small screens */
@media (max-width: 768px) {
  .analytics-kpis { grid-template-columns:repeat(2,1fr); }
  .analytics-grid { grid-template-columns:1fr; }
}
@media (max-width: 480px) {
  .analytics-kpis { grid-template-columns:1fr; }
  .a-kpi__value { font-size:22px; }
}

/* Team page on small screens */
@media (max-width: 640px) {
  .tm-card { flex-direction:column; align-items:flex-start; gap:8px; }
  .tm-actions { width:100%; justify-content:flex-end; }
  .inv-card { flex-direction:column; align-items:flex-start; gap:6px; }
}

/* Notification panel on small screens */
@media (max-width: 480px) {
  .notif-panel { width:calc(100vw - 20px)!important; right:10px!important; left:10px!important; }
}

/* Audit log on small screens */
@media (max-width: 640px) {
  .audit-detail { max-width:160px; }
  .audit-ip { display:none; }
}

/* Flatpickr on small screens */
@media (max-width: 640px) {
  .flatpickr-calendar { width:calc(100vw - 20px)!important; }
  .flatpickr-calendar.hasTime .flatpickr-time { max-width:100%; }
  .flatpickr-months { flex-wrap:wrap; }
}

/* Sidebar overlay and topbar */
@media (max-width: 768px) {
  .topbar__quota { display:none; }
  .tz-badge { display:none; }
}

/* Confirm modal on small screens */
@media (max-width: 480px) {
  .confirm-body { padding:16px 12px; }
  .confirm-actions { flex-direction:column; }
  .confirm-actions .btn { width:100%; }
}

/* Account page grid */
@media (max-width: 768px) {
  .acct-grid { grid-template-columns:1fr!important; }
}

/* Scoring page responsive */
@media (max-width: 640px) {
  .score-zones { flex-direction:column; }
}

/* General form responsive */
@media (max-width: 480px) {
  .form-actions { flex-direction:column; }
  .form-actions .btn { width:100%; }
  .card { padding:12px; }
}

/* Hide table columns on very small screens */
@media (max-width: 520px) {
  .data-table__cell:nth-child(3),
  .data-table thead th:nth-child(3) { display:none; }
  .data-table__cell:nth-child(6),
  .data-table thead th:nth-child(6) { display:none; }
  .msg-subject { max-width:120px; }
}

/* Timestamp tooltip on mobile - position at bottom */
@media (max-width: 640px) {
  .tz-tip { max-width:calc(100vw - 40px); }
}

/* ═══ Standardised Empty & Error States ═══ */
.state-empty,.state-error{text-align:center;padding:40px 20px;color:var(--muted)}
.state-empty i,.state-error i{font-size:32px;opacity:.3;display:block;margin-bottom:12px}
.state-empty h4,.state-error h4{color:var(--text);margin:0 0 6px;font-size:15px}
.state-empty p,.state-error p{margin:0;font-size:13px;line-height:1.5;max-width:360px;margin:0 auto}
.state-error i{color:rgba(239,68,68,.4);opacity:1}
.state-error h4{color:#ef4444}
.state-empty .btn,.state-error .btn{margin-top:16px}

/* ═══ Skeleton Loading ═══ */
@keyframes skeletonPulse{ 0%,100%{opacity:.4} 50%{opacity:.8} }
.skeleton{background:rgba(255,255,255,.06);border-radius:6px;animation:skeletonPulse 1.2s ease infinite}
.skeleton-text{display:inline-block;height:1em;background:rgba(255,255,255,.06);border-radius:4px;animation:skeletonPulse 1.2s ease infinite}

/* ═══ Filter bar improvements ═══ */
.messages-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.messages-bar .input{font-size:13px}

/* ═══ Bulk bar transition ═══ */
.bulk-bar{animation:bulkSlideIn .2s ease}
@keyframes bulkSlideIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* ═══ Badge notification improvements ═══ */
.notif-bell__badge{min-width:18px;text-align:center}

/* ═══ Focus visible for accessibility ═══ */
.btn:focus-visible,.input:focus-visible,select:focus-visible{outline:2px solid #06b6d4;outline-offset:2px}

/* ═══ Admin Console Polish ═══ */

/* Unified status badges (reusable across all admin pages) */
.adm-status{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:6px;font-size:11px;font-weight:700;white-space:nowrap}
.adm-status--active{background:rgba(34,197,94,.1);color:#22c55e;border:1px solid rgba(34,197,94,.15)}
.adm-status--suspended{background:rgba(245,158,11,.1);color:#f59e0b;border:1px solid rgba(245,158,11,.15)}
.adm-status--cancelled{background:rgba(239,68,68,.1);color:#ef4444;border:1px solid rgba(239,68,68,.15)}
.adm-status--pending{background:rgba(224,156,40,.1);color:#e09c28;border:1px solid rgba(224,156,40,.15)}
.adm-status--sent{background:rgba(34,197,94,.1);color:#22c55e;border:1px solid rgba(34,197,94,.15)}
.adm-status--failed{background:rgba(239,68,68,.1);color:#ef4444;border:1px solid rgba(239,68,68,.15)}
.adm-status--connected{background:rgba(34,197,94,.1);color:#22c55e;border:1px solid rgba(34,197,94,.15)}
.adm-status--error{background:rgba(239,68,68,.1);color:#ef4444;border:1px solid rgba(239,68,68,.15)}
.adm-status--invited{background:rgba(139,92,246,.1);color:#8b5cf6;border:1px solid rgba(139,92,246,.15)}
.adm-status--disabled{background:rgba(148,163,184,.1);color:#94a3b8;border:1px solid rgba(148,163,184,.15)}
.adm-status i{font-size:9px}

/* Admin empty states */
.adm-empty{text-align:center;padding:48px 24px}
.adm-empty i{font-size:36px;color:var(--muted);opacity:.3;display:block;margin-bottom:14px}
.adm-empty h4{color:var(--text);margin:0 0 6px;font-size:15px;font-weight:700}
.adm-empty p{color:var(--muted);margin:0 0 16px;font-size:13px;line-height:1.5;max-width:360px;margin-left:auto;margin-right:auto}

/* Breadcrumb */
.adm-breadcrumb{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-bottom:16px}
.adm-breadcrumb a{color:var(--muted);text-decoration:none;transition:color .15s}
.adm-breadcrumb a:hover{color:#06b6d4}
.adm-breadcrumb__sep{opacity:.3}

/* Unified date format helper class */
.adm-date{font-size:12px;color:var(--muted)}
.adm-date--primary{color:var(--text);font-weight:600}

/* Table improvements */
.data-table th{user-select:none}
.data-table .num{text-align:right;font-variant-numeric:tabular-nums}
.data-table td[title]{cursor:help}

/* Mobile sidebar close indicator */
.adm-side__overlay-hint{display:none;text-align:center;padding:8px;font-size:11px;color:var(--muted);opacity:.5}
@media(max-width:768px){.adm-side__overlay-hint{display:block}}

/* Horizontal scroll indicator for tables */
.table-scroll-wrap{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll-wrap::after{content:'';position:sticky;right:0;top:0;bottom:0;width:24px;background:linear-gradient(to right,transparent,rgba(11,18,32,.6));pointer-events:none;display:block;margin-top:-100%;float:right}
.table-scroll-wrap:not(.has-overflow)::after{display:none}

/* Admin card consistency */
.adm-card{background:var(--card,#1c2538);border:1px solid var(--border);border-radius:12px;padding:20px}
.adm-card__title{font-size:13px;font-weight:700;color:var(--text);margin:0 0 14px;display:flex;align-items:center;gap:6px}
.adm-card__title i{color:#06b6d4;font-size:12px}

/* Admin responsive grids */
@media(max-width:768px){
  .ad-stats{grid-template-columns:repeat(2,1fr)!important}
  .ad-grid{grid-template-columns:1fr!important}
  .eq-stats{grid-template-columns:repeat(2,1fr)!important}
  .eq-grid{grid-template-columns:1fr!important}
}
@media(max-width:480px){
  .ad-stats{grid-template-columns:1fr!important}
  .eq-stats{grid-template-columns:1fr!important}
}

/* Admin section label separator improvement */
.adm-side__label{border-top:1px solid rgba(255,255,255,.03);margin-top:4px;padding-top:16px!important}
.adm-side__label:first-child{border-top:none;margin-top:0;padding-top:0!important}

/* Focus visible for admin */
.adm-side__link:focus-visible{outline:2px solid #06b6d4;outline-offset:2px}
.btn:focus-visible{outline:2px solid #06b6d4;outline-offset:2px}

/* Unified confirm modal improvements */
.adm-confirm-consequences{margin:12px 0;padding:10px 14px;background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.1);border-radius:8px;font-size:12px;color:#f87171;line-height:1.5}

/* ═══ Attachment UI ═══ */
.att-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:12px}
.att-card{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:10px;overflow:hidden;transition:border-color .15s;cursor:pointer}
.att-card:hover{border-color:rgba(6,182,212,.25)}
.att-card__preview{height:120px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.15);position:relative;overflow:hidden}
.att-card__preview img{max-width:100%;max-height:100%;object-fit:contain}
.att-card__preview-icon{font-size:32px;color:var(--muted);opacity:.3}
.att-card__info{padding:10px 12px}
.att-card__name{font-size:12px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-card__meta{font-size:11px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:8px}
.att-card__scan{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;padding:1px 6px;border-radius:4px}
.att-card__scan--clean{background:rgba(34,197,94,.1);color:#22c55e}
.att-card__scan--pending{background:rgba(224,156,40,.1);color:#e09c28}
.att-card__scan--infected{background:rgba(239,68,68,.1);color:#ef4444}
.att-card__scan--skipped{background:rgba(148,163,184,.1);color:#94a3b8}
.att-card__actions{display:flex;gap:4px;padding:0 10px 10px}
.att-card__actions .btn{font-size:11px;padding:4px 10px}

/* Attachment preview modal */
.att-preview-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:9800;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}
.att-preview-card{background:#151d2e;border:1px solid rgba(255,255,255,.1);border-radius:14px;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.att-preview-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}
.att-preview-header strong{font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;margin-right:12px}
.att-preview-body{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;min-height:300px;background:rgba(0,0,0,.2)}
.att-preview-body img{max-width:100%;max-height:80vh;object-fit:contain}
.att-preview-body iframe{width:100%;height:100%;min-height:70vh;border:none}
.att-preview-footer{display:flex;align-items:center;gap:10px;padding:10px 18px;border-top:1px solid rgba(255,255,255,.06);font-size:12px;color:var(--muted)}

/* Attachment count badge on tab */
.att-count-badge{font-size:10px;font-weight:700;background:rgba(139,92,246,.12);color:#8b5cf6;padding:1px 6px;border-radius:8px;margin-left:4px}

/* My Account + Organisation responsive */
@media(max-width:768px){
  .acct-2col{grid-template-columns:1fr!important}
}

/* AI provider selector buttons */
.ai-prov-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid rgba(255,255,255,.06);border-radius:8px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .15s;background:rgba(255,255,255,.02);font-family:inherit}
.ai-prov-btn:hover{border-color:rgba(255,255,255,.15);color:var(--text)}
.ai-prov-btn--active{border-color:rgba(6,182,212,.4);background:rgba(6,182,212,.06);color:#06b6d4}

/* Injection flag */
.inj-flag{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:rgba(239,68,68,.1);color:#ef4444;font-size:9px;cursor:help;vertical-align:middle;margin-left:2px}
.inj-info-icon{color:var(--muted);opacity:.4;cursor:help;font-size:13px;flex-shrink:0;transition:opacity .15s}
.inj-info-icon:hover{opacity:.8}