/* ==========================================================================
   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:9999;
}

.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; }
.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{
  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:9000;
}
.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-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.06);
}
.modal-body{ padding:14px; overflow-y:auto; overflow-x:hidden; }
.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:10000;
  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:10999;
  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:11000; 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:linear-gradient(90deg, var(--glass), rgba(255,255,255,.18)); border-radius:2px; }

.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:11500;
  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:11600;
}

/* ==========================================================================
   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;
}