/* ===== ZenFinder — Ultra Minimal Dark Theme ===== */

:root {
  --bg: #08090c;
  --bg-card: #0f1014;
  --bg-card-hover: #141519;
  --bg-input: #0c0d11;
  --bg-log: #060709;
  --border: rgba(255,255,255,0.06);
  --border-focus: rgba(255,255,255,0.14);
  --text: #e4e5ea;
  --text-dim: #6b6e7a;
  --text-faint: #44464f;
  --accent: #00d4aa;
  --accent-dim: rgba(0,212,170,0.12);
  --accent-glow: rgba(0,212,170,0.08);
  --good: #00d4aa;
  --good-bg: rgba(0,212,170,0.08);
  --risky: #f0b429;
  --risky-bg: rgba(240,180,41,0.08);
  --bad: #ef4444;
  --bad-bg: rgba(239,68,68,0.08);
  --mono: "SF Mono","JetBrains Mono","Fira Code","Cascadia Code",monospace;
  --sans: "Inter","SF Pro Display","Helvetica Neue","Segoe UI",sans-serif;
  --radius: 12px;
  --radius-sm: 8px;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  min-height:100vh;
  font-family:var(--sans);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

/* Layout */
.app{
  max-width:860px;
  margin:0 auto;
  padding:40px 24px 80px;
}

/* Header */
.header{
  margin-bottom:48px;
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
}
.logo-icon{
  width:28px;height:28px;
  border-radius:7px;
  background:linear-gradient(135deg,var(--accent),#00a888);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;
}
.logo-text{
  font-size:20px;
  font-weight:700;
  letter-spacing:-0.03em;
  color:var(--text);
}
.logo-text span{color:var(--accent)}
.header-sub{
  font-size:13px;
  color:var(--text-dim);
  margin-top:4px;
}

/* Nav tabs */
.nav{
  display:flex;
  gap:2px;
  margin-bottom:32px;
  background:var(--bg-card);
  border-radius:var(--radius-sm);
  padding:3px;
  border:1px solid var(--border);
}
.nav-btn{
  flex:1;
  background:transparent;
  border:none;
  color:var(--text-dim);
  font-family:var(--sans);
  font-size:13px;
  font-weight:500;
  padding:9px 16px;
  border-radius:6px;
  cursor:pointer;
  transition:all 150ms;
}
.nav-btn:hover{color:var(--text);background:rgba(255,255,255,0.03)}
.nav-btn.active{
  color:var(--accent);
  background:rgba(0,212,170,0.08);
}

/* Cards */
.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  margin-bottom:16px;
  animation:fade-in 300ms ease both;
}
.card:nth-child(2){animation-delay:40ms}
.card:nth-child(3){animation-delay:80ms}
.card h2{
  font-size:15px;
  font-weight:600;
  margin-bottom:20px;
  color:var(--text);
  letter-spacing:-0.01em;
}

/* Forms */
.form-grid{
  display:grid;
  gap:16px;
  grid-template-columns:1fr 1fr;
}
.field{display:grid;gap:5px}
.field-label{
  font-size:12px;
  font-weight:500;
  color:var(--text-dim);
  letter-spacing:0.02em;
}
.field-full{grid-column:1/-1}

input[type="text"],
input[type="number"],
input[type="file"],
select{
  width:100%;
  background:var(--bg-input);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  font:14px var(--sans);
  color:var(--text);
  transition:border-color 150ms;
}
input:focus,select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow);
}
input::placeholder{color:var(--text-faint)}
input[type="file"]{
  padding:8px 12px;
  cursor:pointer;
}
input[type="file"]::file-selector-button{
  background:rgba(255,255,255,0.06);
  border:1px solid var(--border);
  border-radius:6px;
  padding:4px 12px;
  color:var(--text-dim);
  font-size:12px;
  cursor:pointer;
  margin-right:10px;
}

/* Toggle */
.toggle{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--text-dim);
}
.toggle input[type="checkbox"]{
  width:16px;height:16px;
  accent-color:var(--accent);
}

/* SMTP options */
.smtp-options{
  grid-column:1/-1;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  overflow:hidden;
}
.smtp-options summary{
  padding:10px 14px;
  font-size:13px;
  font-weight:500;
  color:var(--text-dim);
  cursor:pointer;
  list-style:none;
  background:rgba(255,255,255,0.02);
}
.smtp-options summary::-webkit-details-marker{display:none}
.smtp-options summary::before{
  content:"\25B6";display:inline-block;margin-right:8px;font-size:10px;
  transition:transform 200ms;
}
.smtp-options[open] summary::before{transform:rotate(90deg)}
.smtp-options .fields-inner{
  padding:12px 14px;
  display:grid;gap:10px;grid-template-columns:1fr 1fr;
}

/* Hint */
.hint{
  grid-column:1/-1;
  font-size:12px;
  color:var(--text-faint);
  line-height:1.6;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;justify-content:center;
  gap:6px;
  border:none;
  border-radius:var(--radius-sm);
  padding:10px 20px;
  font:14px/1 var(--sans);
  font-weight:600;
  cursor:pointer;
  transition:all 150ms;
  text-decoration:none;
}
.btn-primary{
  background:var(--accent);
  color:#08090c;
  grid-column:1/-1;
  width:fit-content;
}
.btn-primary:hover{
  background:#00e4b8;
  box-shadow:0 0 20px var(--accent-glow);
}
.btn-primary:disabled{opacity:0.4;cursor:not-allowed}

.btn-ghost{
  background:rgba(255,255,255,0.04);
  color:var(--text-dim);
  border:1px solid var(--border);
  font-size:13px;
  padding:8px 14px;
}
.btn-ghost:hover{
  background:rgba(255,255,255,0.06);
  color:var(--text);
  border-color:var(--border-focus);
}

/* Progress bar */
.progress-wrap{
  background:rgba(255,255,255,0.03);
  border-radius:6px;
  height:6px;
  overflow:hidden;
  margin-bottom:20px;
}
.progress-fill{
  height:100%;
  border-radius:6px;
  background:var(--accent);
  transition:width 400ms cubic-bezier(0.22,0.68,0,1.02);
  box-shadow:0 0 12px var(--accent-glow);
}
.progress-fill.done{background:var(--good)}
.progress-fill.fail{background:var(--bad)}

/* Status line */
.status-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
  font-size:13px;
}
.status-label{
  color:var(--text-dim);
}
.status-label strong{color:var(--text)}
.status-pct{
  font-family:var(--mono);
  font-size:14px;
  font-weight:600;
  color:var(--accent);
}

/* Counters grid */
.counters{
  display:grid;
  gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
  margin-bottom:20px;
}
.counter{
  text-align:center;
  padding:12px 8px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.015);
}
.counter-val{
  font-family:var(--mono);
  font-size:20px;
  font-weight:700;
  letter-spacing:-0.02em;
}
.counter-val.good{color:var(--good)}
.counter-val.risky{color:var(--risky)}
.counter-val.bad{color:var(--bad)}
.counter-lbl{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--text-faint);
  margin-top:4px;
}

/* Log panel */
.log-panel{
  background:var(--bg-log);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:0;
  overflow:hidden;
}
.log-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 14px;
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,0.02);
}
.log-header-title{
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--text-faint);
}
.log-dot{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--accent);
  animation:pulse 2s ease infinite;
}
.log-dot.off{background:var(--text-faint);animation:none}
.log-body{
  height:200px;
  overflow-y:auto;
  padding:10px 14px;
  font-family:var(--mono);
  font-size:12px;
  line-height:1.7;
  color:var(--text-dim);
}
.log-body::-webkit-scrollbar{width:4px}
.log-body::-webkit-scrollbar-track{background:transparent}
.log-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.log-line{white-space:pre-wrap;word-break:break-all}
.log-line .time{color:var(--text-faint)}
.log-line .ok{color:var(--good)}
.log-line .warn{color:var(--risky)}
.log-line .err{color:var(--bad)}
.log-line .info{color:var(--accent)}

/* Summary stats */
.stats-grid{
  display:grid;
  gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  margin-bottom:20px;
}
.stat{
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:14px;
  background:rgba(255,255,255,0.015);
}
.stat-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--text-faint);
}
.stat-value{
  font-family:var(--mono);
  font-size:18px;
  font-weight:700;
  margin-top:6px;
  letter-spacing:-0.02em;
}
.stat-value.good{color:var(--good)}
.stat-value.risky{color:var(--risky)}
.stat-value.bad{color:var(--bad)}

/* Downloads */
.downloads{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  grid-column:1/-1;
}

/* History table */
.history-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.history-table th{
  text-align:left;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--text-faint);
  padding:8px 12px;
  border-bottom:1px solid var(--border);
  font-weight:500;
}
.history-table td{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  color:var(--text-dim);
}
.history-table tr:hover td{
  background:rgba(255,255,255,0.02);
}
.history-table a{
  color:var(--accent);
  text-decoration:none;
  font-weight:500;
}
.history-table a:hover{text-decoration:underline}

.badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:4px;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.badge-valid{background:var(--good-bg);color:var(--good)}
.badge-gen{background:rgba(96,165,250,0.1);color:#60a5fa}

/* Spinner */
.spinner{
  display:inline-block;
  width:14px;height:14px;
  border:2px solid var(--border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin 600ms linear infinite;
  vertical-align:middle;
}

/* Hidden */
.hidden{display:none!important}

/* Animations */
@keyframes fade-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:0.4}50%{opacity:1}}

/* Mobile */
@media(max-width:640px){
  .app{padding:24px 16px 60px}
  .form-grid{grid-template-columns:1fr}
  .smtp-options .fields-inner{grid-template-columns:1fr}
  .counters{grid-template-columns:repeat(3,1fr)}
  .downloads{flex-direction:column}
  .btn{width:100%}
}