/* ── VARIABLES ───────────────────────────────────────────────────────────── */
:root {
  --blue:        #2563EB;
  --blue-dark:   #1D4ED8;
  --blue-light:  #EFF6FF;
  --green:       #16A34A;
  --green-light: #F0FDF4;
  --red:         #DC2626;
  --red-light:   #FEF2F2;
  --amber:       #D97706;
  --amber-light: #FFFBEB;
  --sb-width:    224px;
  --topbar-h:    60px;
  --gray-50:     #F8FAFC;
  --gray-100:    #F1F5F9;
  --gray-200:    #E2E8F0;
  --gray-400:    #94A3B8;
  --gray-500:    #64748B;
  --gray-600:    #475569;
  --gray-700:    #374151;
  --gray-900:    #0F172A;
  --shadow-sm:   0 1px 3px rgba(15,23,42,.07);
  --shadow-md:   0 2px 8px rgba(15,23,42,.09);
  --r:           12px;
}

/* ── RESET ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
img { display:block; max-width:100%; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
a { text-decoration:none; color:inherit; }

body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:#F1F5F9;
  color:var(--gray-900);
  min-height:100vh;
  font-size:14px;
}

/* ── APP SHELL ───────────────────────────────────────────────────────────── */
.app {
  display:grid;
  grid-template-columns:var(--sb-width) 1fr;
  min-height:100vh;
  transition:grid-template-columns .25s ease;
}
.app.sb-collapsed { grid-template-columns:0 1fr; }

/* ── SIDEBAR ─────────────────────────────────────────────────────────────── */
.sidebar {
  background:#fff;
  border-right:1px solid var(--gray-200);
  display:flex;
  flex-direction:column;
  height:100vh;
  position:sticky;
  top:0;
  overflow:hidden;
  transition:width .25s ease;
  width:var(--sb-width);
  z-index:50;
}
.app.sb-collapsed .sidebar { width:0; border-right:none; }

.sb-brand {
  padding:18px 20px 14px;
  border-bottom:1px solid var(--gray-100);
  flex-shrink:0;
}
.sb-logo-img {
  height:30px;
  width:auto;
  object-fit:contain;
}

/* nav */
.sb-nav {
  flex:1;
  overflow-y:auto;
  padding:12px 12px 0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.sb-group { display:flex; flex-direction:column; gap:2px; margin-bottom:8px; }
.sb-group-label {
  font-size:10.5px;
  font-weight:700;
  color:var(--gray-400);
  text-transform:uppercase;
  letter-spacing:.07em;
  padding:6px 8px 4px;
}
.sb-item {
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius:9px;
  font-size:13.5px;
  font-weight:500;
  color:var(--gray-700);
  transition:all .15s;
  text-align:left;
  width:100%;
}
.sb-item:hover { background:var(--gray-50); color:var(--gray-900); }
.sb-item.active {
  background:var(--blue-light);
  color:var(--blue);
  font-weight:600;
}
.sb-item svg { flex-shrink:0; opacity:.75; }
.sb-item.active svg { opacity:1; }

/* footer */
.sb-footer {
  padding:14px 16px;
  border-top:1px solid var(--gray-100);
  flex-shrink:0;
}
.sb-mini-stat { display:flex; flex-direction:column; gap:6px; }
.sb-ms-row {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
}
.sb-ms-dot {
  width:8px; height:8px;
  border-radius:50%;
  flex-shrink:0;
}
.sb-ms-dot.green  { background:#34D399; }
.sb-ms-dot.red    { background:#FCA5A5; }
.sb-ms-dot.amber  { background:#FCD34D; }
.sb-ms-label { color:var(--gray-500); flex:1; }
.sb-ms-val   { font-weight:700; color:var(--gray-900); }

/* ── MAIN WRAP ───────────────────────────────────────────────────────────── */
.main-wrap {
  display:flex;
  flex-direction:column;
  min-height:100vh;
  min-width:0;
}

/* ── TOPBAR ──────────────────────────────────────────────────────────────── */
.topbar {
  background:#fff;
  border-bottom:1px solid var(--gray-200);
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  padding:0 24px;
  gap:14px;
  position:sticky;
  top:0;
  z-index:40;
  flex-shrink:0;
}
.sb-toggle {
  color:var(--gray-500);
  padding:6px;
  border-radius:7px;
  transition:all .15s;
  flex-shrink:0;
}
.sb-toggle:hover { background:var(--gray-100); color:var(--gray-900); }
.topbar-titles { flex:1; min-width:0; }
.topbar-title {
  font-size:16px;
  font-weight:700;
  color:var(--gray-900);
  white-space:nowrap;
}
.topbar-sub {
  font-size:12px;
  color:var(--gray-500);
}
.topbar-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.btn-top-validate {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 16px;
  background:var(--blue);
  color:#fff;
  border-radius:9px;
  font-size:13.5px;
  font-weight:600;
  box-shadow:0 2px 8px rgba(37,99,235,.35);
  transition:all .15s;
}
.btn-top-validate:hover:not(:disabled) {
  background:var(--blue-dark);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(37,99,235,.4);
}
.btn-top-validate:disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* ── CONTENT ─────────────────────────────────────────────────────────────── */
.content {
  padding:22px 24px 40px;
  flex:1;
  overflow-y:auto;
}

/* ── STAT ROW ────────────────────────────────────────────────────────────── */
.stat-row {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-bottom:20px;
}
.sc {
  background:#fff;
  border-radius:var(--r);
  padding:18px 20px;
  box-shadow:var(--shadow-sm);
  border:1px solid rgba(226,232,240,.6);
  transition:box-shadow .2s;
}
.sc:hover { box-shadow:var(--shadow-md); }
.sc-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.sc-label {
  font-size:12px;
  font-weight:600;
  color:var(--gray-500);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.sc-icon-wrap {
  width:32px; height:32px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.blue-iw  { background:#DBEAFE; color:var(--blue); }
.green-iw { background:#DCFCE7; color:var(--green); }
.red-iw   { background:#FEE2E2; color:var(--red); }
.amber-iw { background:#FEF3C7; color:var(--amber); }

.sc-val {
  font-size:30px;
  font-weight:800;
  color:var(--gray-900);
  line-height:1;
  margin-bottom:6px;
}
.green-val { color:var(--green); }
.red-val   { color:var(--red); }
.amber-val { color:var(--amber); }

.sc-sub { font-size:11.5px; color:var(--gray-400); font-weight:500; }

/* ── CONTENT GRID ────────────────────────────────────────────────────────── */
.content-grid {
  display:grid;
  grid-template-columns:1fr 280px;
  gap:18px;
  align-items:start;
}
.content-main { display:flex; flex-direction:column; gap:18px; }
.right-panel  { display:flex; flex-direction:column; gap:14px; position:sticky; top:calc(var(--topbar-h) + 22px); }

/* ── CARDS ───────────────────────────────────────────────────────────────── */
.card {
  background:#fff;
  border-radius:var(--r);
  box-shadow:var(--shadow-sm);
  border:1px solid rgba(226,232,240,.6);
  overflow:hidden;
}
.card-header {
  padding:16px 20px;
  border-bottom:1px solid var(--gray-100);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.card-title-group { display:flex; flex-direction:column; gap:2px; }
.card-title { font-size:14.5px; font-weight:700; }
.card-sub   { font-size:12px; color:var(--gray-500); }
.card-body  { padding:20px; }

/* ── TABS ────────────────────────────────────────────────────────────────── */
.tabs {
  display:flex;
  gap:3px;
  background:var(--gray-100);
  border-radius:8px;
  padding:3px;
  flex-shrink:0;
}
.tab {
  padding:5px 13px;
  border-radius:6px;
  font-size:12.5px;
  font-weight:500;
  color:var(--gray-500);
  transition:all .15s;
  white-space:nowrap;
}
.tab.active { background:#fff; color:var(--gray-900); box-shadow:0 1px 3px rgba(0,0,0,.1); }

/* ── DROP ZONE ───────────────────────────────────────────────────────────── */
.drop-zone {
  border:2px dashed #C7D2FE;
  border-radius:10px;
  padding:36px 20px;
  text-align:center;
  cursor:pointer;
  background:linear-gradient(135deg,#F5F7FF,#F0F4FF);
  transition:all .2s;
  user-select:none;
}
.drop-zone:hover, .drop-zone.dragover {
  border-color:var(--blue);
  background:var(--blue-light);
  box-shadow:0 0 0 4px rgba(37,99,235,.07);
}
.dz-icon {
  width:48px; height:48px;
  background:linear-gradient(135deg,#EEF2FF,#E0E7FF);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 12px;
  color:var(--blue);
}
.dz-title { font-size:14px; color:var(--gray-700); margin-bottom:5px; }
.dz-title strong { color:var(--blue); }
.dz-hint  { font-size:12px; color:var(--gray-400); }

/* ── FILE CHIPS ──────────────────────────────────────────────────────────── */
.file-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.file-chip {
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#F0FDF4;
  border:1px solid #BBF7D0;
  border-radius:7px;
  padding:5px 10px;
  font-size:12px;
  color:#166534;
  font-weight:500;
  animation:chipIn .2s ease;
}
@keyframes chipIn { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} }
.chip-size { opacity:.6; }
.chip-remove { color:#4B7A5E; font-size:13px; margin-left:3px; opacity:.7; transition:opacity .15s; }
.chip-remove:hover { opacity:1; }

/* ── PASTE ───────────────────────────────────────────────────────────────── */
.paste-area {
  width:100%; height:160px;
  border:1px solid var(--gray-200);
  border-radius:10px;
  padding:13px 15px;
  font-size:13px;
  font-family:inherit;
  resize:vertical;
  color:var(--gray-900);
  background:var(--gray-50);
  line-height:1.65;
  transition:border-color .2s, background .2s;
}
.paste-area:focus { outline:none; border-color:var(--blue); background:#fff; }
.paste-area::placeholder { color:var(--gray-400); }
.paste-meta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:7px;
  font-size:11.5px;
  color:var(--gray-400);
}

/* ── BUTTONS ─────────────────────────────────────────────────────────────── */
.btn-validate {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px;
  background:linear-gradient(135deg,#2563EB,#1D4ED8);
  color:#fff;
  border-radius:10px;
  font-size:14.5px;
  font-weight:700;
  margin-top:18px;
  box-shadow:0 3px 10px rgba(37,99,235,.4);
  transition:all .15s;
}
.btn-validate:hover:not(:disabled) {
  background:linear-gradient(135deg,#1D4ED8,#1E40AF);
  transform:translateY(-1px);
  box-shadow:0 5px 16px rgba(37,99,235,.45);
}
.btn-validate:disabled { background:#93C5FD; box-shadow:none; cursor:not-allowed; transform:none; }

.btn-ghost-sm {
  padding:5px 11px;
  border:1px solid var(--gray-200);
  border-radius:7px;
  font-size:12px;
  font-weight:500;
  color:var(--gray-600);
  background:#fff;
  transition:all .15s;
}
.btn-ghost-sm:hover { background:var(--gray-100); }

/* ── PROGRESS ────────────────────────────────────────────────────────────── */
.progress-wrap { display:none; margin-top:20px; }

.step-track { display:flex; align-items:center; margin-bottom:18px; }
.pstep { display:flex; flex-direction:column; align-items:center; gap:5px; flex-shrink:0; }
.pstep-circle {
  width:27px; height:27px;
  border-radius:50%;
  background:var(--gray-100);
  border:2px solid var(--gray-200);
  display:flex; align-items:center; justify-content:center;
  transition:all .3s;
}
.pstep-n   { font-size:11px; font-weight:700; color:var(--gray-400); transition:color .3s; }
.pstep-lbl { font-size:10px; font-weight:600; color:var(--gray-400); white-space:nowrap; transition:color .3s; }
.pstep.active .pstep-circle { background:#EFF6FF; border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.pstep.active .pstep-n, .pstep.active .pstep-lbl { color:var(--blue); }
.pstep.done .pstep-circle { background:#F0FDF4; border-color:var(--green); }
.pstep.done .pstep-n, .pstep.done .pstep-lbl { color:var(--green); }

.pstep-line { flex:1; height:2px; background:var(--gray-200); margin:0 5px 22px; border-radius:99px; transition:background .4s; }
.pstep-line.done { background:var(--green); }

.pg-bar-row { display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.progress-track { flex:1; background:var(--gray-100); border-radius:99px; height:7px; overflow:hidden; }
.progress-fill {
  background:linear-gradient(90deg,#2563EB,#818CF8,#7C3AED);
  background-size:200% 100%;
  animation:shimmer 1.8s linear infinite;
  height:100%; border-radius:99px;
  transition:width .35s ease;
  width:0%;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.pg-pct { font-size:12.5px; font-weight:700; color:var(--blue); min-width:34px; text-align:right; }
.pg-status { font-size:12.5px; color:var(--gray-500); font-weight:500; margin-bottom:8px; }

.live-check {
  display:none;
  align-items:center;
  gap:8px;
  font-size:11.5px;
  color:var(--gray-500);
  font-family:'SF Mono','Fira Code',monospace;
  background:var(--gray-50);
  border:1px solid var(--gray-200);
  border-radius:7px;
  padding:6px 11px;
  margin-bottom:9px;
}
.live-pulse {
  width:6px; height:6px; border-radius:50%;
  background:var(--blue); flex-shrink:0;
  animation:livepulse 1s ease-in-out infinite;
}
@keyframes livepulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

.mini-counts { display:none; gap:14px; flex-wrap:wrap; }
.mc-item { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--gray-700); }
.mc-dot   { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.gray-dot  { background:#94A3B8; }
.green-dot { background:#34D399; }
.red-dot   { background:#FCA5A5; }

/* ── ALERT ───────────────────────────────────────────────────────────────── */
.alert {
  display:none; padding:11px 14px; border-radius:9px;
  font-size:13px; margin-top:14px; align-items:flex-start; gap:9px;
}
.alert-warn { background:#FFFBEB; color:#92400E; border:1px solid #FDE68A; }

/* ── TABLE ───────────────────────────────────────────────────────────────── */
.table-controls {
  display:flex; align-items:center; gap:10px;
  padding:12px 20px; border-bottom:1px solid var(--gray-100); flex-wrap:wrap;
}
.search-wrap { position:relative; flex:1; min-width:160px; }
.search-wrap svg { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--gray-400); pointer-events:none; }
.search-input {
  width:100%; padding:7px 10px 7px 32px;
  border:1px solid var(--gray-200); border-radius:8px;
  font-size:13px; color:var(--gray-900); background:var(--gray-50);
  font-family:inherit; transition:border-color .2s;
}
.search-input:focus { outline:none; border-color:var(--blue); background:#fff; }
.result-count { font-size:12px; color:var(--gray-500); font-weight:500; white-space:nowrap; }

.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
thead tr { background:var(--gray-50); }
th { padding:10px 16px; text-align:left; font-size:11px; font-weight:700; color:var(--gray-500); text-transform:uppercase; letter-spacing:.07em; white-space:nowrap; }
td { padding:11px 16px; border-top:1px solid #F8FAFC; vertical-align:middle; }
tr:hover td { background:#FAFBFF; }

.email-cell { display:flex; align-items:center; gap:6px; font-family:'SF Mono','Fira Code',monospace; font-size:12px; }
.copy-btn { color:#CBD5E1; padding:3px; border-radius:4px; display:flex; align-items:center; transition:color .15s; flex-shrink:0; }
.copy-btn:hover { color:var(--blue); }
.domain-cell { font-size:12px; color:var(--gray-500); }

.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:99px; font-size:11.5px; font-weight:600; }
.badge-dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.badge-valid   { color:#16A34A; background:#F0FDF4; }
.badge-valid   .badge-dot { background:#16A34A; }
.badge-invalid { color:#DC2626; background:#FEF2F2; }
.badge-invalid .badge-dot { background:#DC2626; }
.badge-pending { color:#D97706; background:#FFFBEB; }
.badge-pending .badge-dot { background:#D97706; }

.chk { color:#16A34A; font-weight:700; font-size:14px; }
.crs { color:#DC2626; font-weight:700; font-size:14px; }
.dsh { color:#CBD5E1; }
.reason-cell { font-size:11.5px; color:var(--gray-400); white-space:nowrap; }
.reason-valid   { color:#16A34A; }
.reason-invalid { color:#DC2626; }
.reason-pending { color:#D97706; }

/* ── PAGINATION ──────────────────────────────────────────────────────────── */
.pagination { display:flex; align-items:center; justify-content:space-between; padding:11px 20px; border-top:1px solid var(--gray-100); font-size:12px; color:var(--gray-500); }
.page-btns { display:flex; gap:3px; }
.page-btn { width:30px; height:30px; border-radius:7px; border:1px solid var(--gray-200); background:#fff; font-size:12.5px; color:var(--gray-700); display:flex; align-items:center; justify-content:center; transition:all .15s; }
.page-btn:hover:not(:disabled):not(.active) { background:var(--gray-100); }
.page-btn.active { background:var(--blue); color:#fff; border-color:var(--blue); }
.page-btn:disabled { opacity:.3; cursor:not-allowed; }

/* ── EMPTY STATE ─────────────────────────────────────────────────────────── */
.empty-state { text-align:center; padding:44px 20px; color:var(--gray-400); }
.empty-state p { font-size:14px; font-weight:500; color:var(--gray-500); margin-bottom:4px; }

/* ── DONUT ───────────────────────────────────────────────────────────────── */
.donut-section { display:flex; flex-direction:column; align-items:center; }
.donut-empty { text-align:center; padding:24px 10px; font-size:12.5px; color:var(--gray-400); line-height:1.6; }
.donut-wrap { position:relative; width:130px; height:130px; margin-bottom:4px; }
.donut-svg { transform:rotate(-90deg); }
.donut-svg circle { transition:stroke-dasharray .6s ease, stroke-dashoffset .6s ease; }
.donut-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; pointer-events:none; }
.donut-pct { font-size:22px; font-weight:800; color:var(--gray-900); }
.donut-sub { font-size:10.5px; color:var(--gray-400); margin-top:1px; }
.legend { width:100%; margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.legend-row { display:flex; align-items:center; justify-content:space-between; font-size:12.5px; }
.legend-key { display:flex; align-items:center; gap:8px; color:var(--gray-600); }
.legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.legend-row strong { font-weight:700; color:var(--gray-900); }

/* ── DOWNLOAD ────────────────────────────────────────────────────────────── */
.dl-btn {
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 13px; border:1px solid var(--gray-200); border-radius:9px;
  background:#fff; font-size:13px; font-weight:600; color:var(--gray-700);
  margin-bottom:8px; width:100%; transition:all .15s; text-align:left;
}
.dl-btn:last-of-type { margin-bottom:0; }
.dl-btn:hover:not(:disabled) { border-color:var(--blue); color:var(--blue); background:var(--blue-light); transform:translateY(-1px); }
.dl-btn:disabled { opacity:.38; cursor:not-allowed; }
.dl-left { display:flex; align-items:center; gap:9px; }
.ext { color:var(--gray-400); font-weight:400; }
.dl-note { font-size:11px; color:var(--gray-400); text-align:center; margin-top:9px; }

/* ── HISTORY ─────────────────────────────────────────────────────────────── */
.history-item {
  display:flex; align-items:center; gap:14px;
  padding:13px 0; border-bottom:1px solid var(--gray-100);
  animation:fadeIn .25s ease;
}
.history-item:last-child { border-bottom:none; }
@keyframes fadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
.hi-icon { width:36px; height:36px; border-radius:9px; background:var(--blue-light); display:flex; align-items:center; justify-content:center; color:var(--blue); flex-shrink:0; }
.hi-body { flex:1; min-width:0; }
.hi-title { font-size:13px; font-weight:600; color:var(--gray-900); }
.hi-meta  { font-size:11.5px; color:var(--gray-500); margin-top:2px; }
.hi-badges { display:flex; gap:6px; margin-top:5px; flex-wrap:wrap; }
.hi-b { font-size:11px; font-weight:600; padding:2px 7px; border-radius:99px; }
.hi-b.hb-green  { background:#F0FDF4; color:#16A34A; }
.hi-b.hb-red    { background:#FEF2F2; color:#DC2626; }
.hi-b.hb-amber  { background:#FFFBEB; color:#D97706; }
.hi-time { font-size:11px; color:var(--gray-400); white-space:nowrap; flex-shrink:0; }

/* ── TOAST ───────────────────────────────────────────────────────────────── */
.toast {
  position:fixed; bottom:24px; right:24px; z-index:9999;
  background:#1E293B; color:#fff;
  padding:10px 18px; border-radius:10px;
  font-size:13px; font-weight:500;
  box-shadow:0 8px 24px rgba(15,23,42,.25);
  opacity:0; transform:translateY(8px);
  transition:opacity .2s, transform .2s;
  pointer-events:none;
}
.toast.show { opacity:1; transform:translateY(0); }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width:1100px) {
  .content-grid { grid-template-columns:1fr 260px; }
}
@media (max-width:960px) {
  .app { grid-template-columns:0 1fr; }
  .sidebar { position:fixed; left:0; top:0; bottom:0; transform:translateX(-100%); transition:transform .25s ease; box-shadow:4px 0 20px rgba(0,0,0,.1); }
  .app.sb-open .sidebar { transform:translateX(0); }
  .content-grid { grid-template-columns:1fr; }
  .right-panel { position:static; display:grid; grid-template-columns:1fr 1fr; }
}
@media (max-width:680px) {
  .topbar { padding:0 16px; }
  .content { padding:16px 16px 32px; }
  .stat-row { grid-template-columns:1fr 1fr; }
  .right-panel { grid-template-columns:1fr; }
  .card-header { flex-direction:column; }
}