/* ═══════════════════════════════════════════
   WebAudit Pro — Design System
   Dark / Light theme via [data-theme]
═══════════════════════════════════════════ */

/* ── Tokens ── */
:root[data-theme="dark"] {
  --bg: #0d0d18;
  --bg2: #13131f;
  --surface: rgba(255,255,255,0.04);
  --surface-hover: rgba(255,255,255,0.07);
  --border: rgba(255,255,255,0.08);
  --border-hover: rgba(255,255,255,0.18);
  --text: #f1f5f9;
  --text2: #94a3b8;
  --text3: #64748b;
  --accent: #7c3aed;
  --accent2: #a78bfa;
  --glow: rgba(124,58,237,0.25);
  --shadow: 0 4px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 48px rgba(0,0,0,.6);
  --radius: 14px;
  --radius-sm: 8px;
  --c-critical: #ef4444;
  --c-warning: #f59e0b;
  --c-info: #3b82f6;
  --c-pass: #22c55e;
  --c-critical-bg: rgba(239,68,68,.12);
  --c-warning-bg: rgba(245,158,11,.12);
  --c-info-bg: rgba(59,130,246,.12);
  --c-pass-bg: rgba(34,197,94,.12);
}
:root[data-theme="light"] {
  --bg: #f1f5f9;
  --bg2: #ffffff;
  --surface: #ffffff;
  --surface-hover: #f8fafc;
  --border: #e2e8f0;
  --border-hover: #cbd5e1;
  --text: #0f172a;
  --text2: #475569;
  --text3: #94a3b8;
  --accent: #6d28d9;
  --accent2: #7c3aed;
  --glow: rgba(109,40,217,.12);
  --shadow: 0 4px 24px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 48px rgba(0,0,0,.14);
  --radius: 14px;
  --radius-sm: 8px;
  --c-critical: #dc2626;
  --c-warning: #d97706;
  --c-info: #2563eb;
  --c-pass: #16a34a;
  --c-critical-bg: rgba(220,38,38,.08);
  --c-warning-bg: rgba(217,119,6,.08);
  --c-info-bg: rgba(37,99,235,.08);
  --c-pass-bg: rgba(22,163,74,.08);
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  min-height:100vh;
  transition:background .3s,color .3s;
}
img,svg{display:block}
button{cursor:pointer;font-family:inherit}
a{color:var(--accent2);text-decoration:none}
a:hover{text-decoration:underline}

/* ── Header ── */
.app-header{
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100;
  backdrop-filter:blur(12px);
}
.header-inner{
  max-width:1200px;margin:0 auto;
  padding:1rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.brand{display:flex;align-items:center;gap:.75rem}
.brand-icon svg{width:36px;height:36px;flex-shrink:0}
.brand-name{display:block;font-size:1.1rem;font-weight:700;letter-spacing:-.02em;color:var(--text)}
.brand-tagline{display:block;font-size:.72rem;color:var(--text3);font-weight:400;text-transform:uppercase;letter-spacing:.08em}
.header-actions{display:flex;align-items:center;gap:.75rem}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.55rem 1.1rem;
  border-radius:var(--radius-sm);
  font-size:.85rem;font-weight:600;
  border:1.5px solid transparent;
  transition:all .2s ease;
  white-space:nowrap;
}
.btn svg{width:15px;height:15px;flex-shrink:0}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{filter:brightness(1.15);box-shadow:0 0 16px var(--glow)}
.btn-outline{
  background:transparent;
  color:var(--text2);
  border-color:var(--border-hover);
}
.btn-outline:hover:not(:disabled){background:var(--surface-hover);color:var(--text);border-color:var(--accent2)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-sm{padding:.35rem .75rem;font-size:.78rem}
.btn-agent{
  width:100%;justify-content:center;
  background:var(--surface);
  color:var(--text);
  border-color:var(--border-hover);
  margin-top:auto;
  padding:.65rem 1rem;
}
.btn-agent:hover:not(:disabled){
  background:var(--accent);color:#fff;border-color:var(--accent);
  box-shadow:0 0 18px var(--glow);
}
.btn-agent.running{
  background:var(--surface);
  border-color:var(--accent);
  color:var(--accent2);
  cursor:wait;
}
.btn-agent.done{border-color:var(--c-pass);color:var(--c-pass)}

.icon-btn{
  background:transparent;border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  padding:.5rem;
  color:var(--text2);
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}
.icon-btn:hover{background:var(--surface-hover);border-color:var(--border-hover);color:var(--text)}
.icon-btn svg{width:18px;height:18px}
[data-theme="dark"] .icon-sun{display:block}
[data-theme="dark"] .icon-moon{display:none}
[data-theme="light"] .icon-sun{display:none}
[data-theme="light"] .icon-moon{display:block}

/* ── Main ── */
.app-main{max-width:1200px;margin:0 auto;padding:2rem 1.5rem 4rem}

/* ── URL Section ── */
.url-section{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:2rem;
  margin-bottom:2rem;
  box-shadow:var(--shadow);
}
.url-section-inner{max-width:720px;margin:0 auto;text-align:center}
.url-section-title{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;margin-bottom:.4rem}
.url-section-sub{color:var(--text2);font-size:.9rem;margin-bottom:1.5rem}
.url-form{display:flex;flex-direction:column;gap:.5rem}
.url-input-wrap{
  display:flex;align-items:center;gap:0;
  background:var(--bg);
  border:2px solid var(--border);
  border-radius:var(--radius-sm);
  overflow:hidden;
  transition:border-color .2s, box-shadow .2s;
}
.url-input-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--glow)}
.url-icon{width:18px;height:18px;flex-shrink:0;margin:0 .75rem;color:var(--text3)}
.url-input{
  flex:1;background:transparent;border:none;outline:none;
  padding:.75rem .5rem;
  font-size:1rem;font-family:inherit;color:var(--text);
}
.url-input::placeholder{color:var(--text3)}
.url-clear{
  background:transparent;border:none;padding:.5rem .75rem;
  color:var(--text3);display:flex;align-items:center;
  transition:color .2s;
}
.url-clear svg{width:16px;height:16px}
.url-clear:hover{color:var(--text)}
.url-status{font-size:.82rem;min-height:1.2rem;text-align:left;padding:.1rem .3rem}
.url-status.ok{color:var(--c-pass)}
.url-status.err{color:var(--c-critical)}
.url-status.loading{color:var(--accent2)}

/* ── Agent Cards ── */
.agents-section{margin-bottom:2rem}
.agents-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:1.25rem;
}
.agent-card{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.5rem;
  display:flex;flex-direction:column;gap:1rem;
  box-shadow:var(--shadow);
  transition:border-color .25s, box-shadow .25s, transform .2s;
}
.agent-card:hover{
  border-color:var(--border-hover);
  box-shadow:var(--shadow-lg);
  transform:translateY(-2px);
}
.agent-card.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent), var(--shadow-lg)}
.agent-card-header{display:flex;align-items:flex-start;gap:1rem}
.agent-icon{
  width:44px;height:44px;flex-shrink:0;
  border-radius:10px;
  background:color-mix(in srgb, var(--agent-color) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--agent-color) 30%, transparent);
  display:flex;align-items:center;justify-content:center;
  color:var(--agent-color);
}
.agent-icon svg{width:22px;height:22px}
.agent-meta{flex:1;min-width:0}
.agent-name{font-size:.95rem;font-weight:700;margin-bottom:.25rem}
.agent-desc{font-size:.78rem;color:var(--text2);line-height:1.4}
.agent-badge{
  flex-shrink:0;font-size:.78rem;font-weight:700;
  padding:.2rem .5rem;border-radius:99px;
  display:none;
}
.agent-badge.show{display:block}
.agent-badge.score-high{background:var(--c-pass-bg);color:var(--c-pass)}
.agent-badge.score-mid{background:var(--c-warning-bg);color:var(--c-warning)}
.agent-badge.score-low{background:var(--c-critical-bg);color:var(--c-critical)}

.agent-checks{display:flex;flex-wrap:wrap;gap:.35rem}
.check-tag{
  font-size:.7rem;font-weight:500;
  padding:.15rem .5rem;
  border-radius:99px;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text2);
}

/* Agent progress bar */
.agent-progress{
  height:3px;border-radius:99px;
  background:var(--border);
  overflow:hidden;
  display:none;
}
.agent-progress.show{display:block}
.agent-progress::after{
  content:'';display:block;height:100%;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  animation:progress-slide 1.6s ease-in-out infinite;
  width:40%;
}
@keyframes progress-slide{
  0%{transform:translateX(-150%)}
  100%{transform:translateX(400%)}
}

/* ── GDPR credentials ── */
.gdpr-credentials{}
.gdpr-creds-toggle{
  background:none;border:1px dashed var(--border);
  border-radius:var(--radius-sm);
  color:var(--text3);font-size:.78rem;font-weight:500;
  padding:.4rem .75rem;
  display:flex;align-items:center;gap:.4rem;
  width:100%;justify-content:center;
  transition:all .2s;
}
.gdpr-creds-toggle svg{width:14px;height:14px}
.gdpr-creds-toggle:hover{border-color:var(--accent);color:var(--accent2)}
.gdpr-creds-panel{margin-top:.75rem;display:flex;flex-direction:column;gap:.6rem}
.gdpr-creds-note{
  font-size:.75rem;color:var(--c-warning);
  background:var(--c-warning-bg);
  border:1px solid rgba(245,158,11,.2);
  border-radius:var(--radius-sm);
  padding:.6rem .75rem;line-height:1.5;
}
.creds-fields{display:flex;flex-direction:column;gap:.5rem}
.creds-input{
  background:var(--bg);
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  padding:.5rem .75rem;
  font-size:.85rem;font-family:inherit;color:var(--text);
  outline:none;transition:border-color .2s;
}
.creds-input:focus{border-color:var(--accent)}
.creds-input::placeholder{color:var(--text3)}

/* ── Report Section ── */
.report-section{margin-top:2rem}
.report-header{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:1rem;
  margin-bottom:1.5rem;
}
.report-header-left{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.report-title{
  display:flex;align-items:center;gap:.5rem;
  font-size:1.3rem;font-weight:800;letter-spacing:-.02em;
}
.report-title svg{width:22px;height:22px;color:var(--accent2)}
.report-url-tag{
  font-size:.75rem;
  font-family:'JetBrains Mono',monospace;
  background:var(--surface);
  border:1px solid var(--border);
  padding:.2rem .6rem;border-radius:99px;
  color:var(--text2);
}
.report-header-right{display:flex;align-items:center;gap:1rem}
.overall-score-wrap{text-align:center}
.overall-score-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text3)}
.overall-score{font-size:2rem;font-weight:900;letter-spacing:-.04em;line-height:1}

.report-body{display:flex;flex-direction:column;gap:1.5rem}

/* ── Report Card ── */
.report-card{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  animation:slide-in .3s ease;
}
@keyframes slide-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.report-card-header{
  display:flex;align-items:center;gap:1rem;
  padding:1.25rem 1.5rem;
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
.report-card-title{
  flex:1;display:flex;align-items:center;gap:.6rem;
  font-size:1rem;font-weight:700;
}
.report-card-title svg{width:18px;height:18px;color:var(--accent2)}
.report-card-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto}

.score-ring{
  display:flex;align-items:center;gap:.5rem;
}
.score-pill{
  font-size:.9rem;font-weight:800;
  padding:.25rem .75rem;border-radius:99px;
}
.score-pill.high{background:var(--c-pass-bg);color:var(--c-pass)}
.score-pill.mid{background:var(--c-warning-bg);color:var(--c-warning)}
.score-pill.low{background:var(--c-critical-bg);color:var(--c-critical)}

.report-summary{
  padding:1rem 1.5rem;
  font-size:.85rem;color:var(--text2);
  border-bottom:1px solid var(--border);
}
.report-summary strong{color:var(--text)}

.report-stats{
  display:flex;gap:1rem;flex-wrap:wrap;
  padding:.75rem 1.5rem;
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.stat-item{display:flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:600}
.stat-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.stat-dot.critical{background:var(--c-critical)}
.stat-dot.warning{background:var(--c-warning)}
.stat-dot.info{background:var(--c-info)}
.stat-dot.pass{background:var(--c-pass)}

/* Findings list */
.findings-list{padding:1rem 1.5rem;display:flex;flex-direction:column;gap:.6rem}

.finding{
  display:flex;gap:.75rem;
  padding:.75rem 1rem;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  transition:background .15s;
}
.finding:hover{background:var(--surface-hover)}
.finding.critical{border-color:rgba(239,68,68,.2);background:var(--c-critical-bg)}
.finding.warning{border-color:rgba(245,158,11,.2);background:var(--c-warning-bg)}
.finding.info{border-color:rgba(59,130,246,.2);background:var(--c-info-bg)}
.finding.pass{border-color:rgba(34,197,94,.15);background:var(--c-pass-bg)}

.finding-icon{flex-shrink:0;margin-top:.1rem;font-size:.85rem;line-height:1}
.finding-body{flex:1;min-width:0}
.finding-title{font-size:.85rem;font-weight:600;margin-bottom:.2rem}
.finding.critical .finding-title{color:var(--c-critical)}
.finding.warning .finding-title{color:var(--c-warning)}
.finding.info .finding-title{color:var(--c-info)}
.finding.pass .finding-title{color:var(--c-pass)}
.finding-desc{font-size:.78rem;color:var(--text2);line-height:1.45;margin-bottom:.3rem}
.finding-rec{font-size:.76rem;color:var(--text2);line-height:1.4}
.finding-rec strong{color:var(--text);font-weight:600}
.finding-category{
  display:inline-block;font-size:.65rem;font-weight:600;
  padding:.05rem .4rem;border-radius:99px;
  background:var(--surface);border:1px solid var(--border);
  color:var(--text3);margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.06em;
}
.finding-elements{margin-top:.4rem}
.finding-elements code{
  display:block;font-family:'JetBrains Mono',monospace;
  font-size:.7rem;color:var(--text2);
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:4px;
  padding:.2rem .5rem;
  margin-top:.2rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ── Empty state ── */
.empty-state{
  text-align:center;padding:4rem 2rem;color:var(--text3);
}
.empty-state-icon svg{width:72px;height:72px;margin:0 auto 1.5rem;opacity:.3}
.empty-state-text{font-size:.95rem}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-hover);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--text3)}

/* ── Print styles ── */
@media print {
  body{background:#fff!important;color:#000!important}
  .app-header,.url-section,.agents-section,
  .report-header-right,.report-card-actions,
  .empty-state,.btn{display:none!important}
  .report-section{display:block!important}
  .report-card{break-inside:avoid;box-shadow:none;border:1px solid #ccc}
  .finding{break-inside:avoid}
  .print-only-header{display:flex!important;justify-content:space-between;
    padding:.5rem 0;border-bottom:2px solid #333;margin-bottom:1rem;font-size:.8rem}
}
.print-only-header{display:none}

/* individual card print */
.print-card-only .report-card:not(.printing){display:none}

/* ── Responsive ── */
@media(max-width:640px){
  .header-inner{padding:.75rem 1rem}
  .brand-tagline{display:none}
  .app-main{padding:1rem 1rem 3rem}
  .agents-grid{grid-template-columns:1fr}
  .url-section{padding:1.25rem}
  .report-card-header{flex-wrap:wrap}
}