:root{
  --bg:#0f172a;--card:#111827;--muted:#94a3b8;--fg:#e5e7eb;--accent:#22d3ee;--btn:#2563eb
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#0b1220,#0f172a);color:var(--fg)}
.container{max-width:1100px;margin:40px auto;padding:0 16px}
h1{font-size:28px;margin:0 0 8px}
.subtitle{color:var(--muted);margin:0 0 24px}
.brand{display:flex;gap:16px;align-items:center;margin-bottom:18px}
.brand-logo{height:260px;width:auto;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.brand-text h1{margin:0 0 4px}
.brand-text .subtitle{margin:0}
.tagline{margin-top:6px;color:#8ed0ff;font-weight:600;letter-spacing:.2px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{background:rgba(17,24,39,0.7);border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:16px;backdrop-filter:blur(8px)}
.card h2{margin:0 0 12px;font-size:16px}
input[type=file]{width:100%;margin:8px 0 12px}
button{background:var(--btn);color:white;border:0;border-radius:10px;padding:10px 14px;font-weight:600;cursor:pointer;box-shadow:0 6px 20px rgba(37,99,235,.25)}
button:hover{opacity:.9}
.full{grid-column:1/-1}
.output{min-height:160px;background:#0b1020;border-radius:10px;padding:12px;overflow:auto;border:1px solid rgba(255,255,255,0.06)}

/* New UI */
.preview{display:block;max-width:100%;max-height:180px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);margin:8px 0;opacity:.0;transition:opacity .2s}
.preview.visible{opacity:1}
.report-section.hidden{display:none}
.label{color:var(--muted);font-weight:600;margin-right:6px}
.mono-list{list-style:none;padding:8px 10px;background:#0b1020;border-radius:8px;border:1px solid rgba(255,255,255,0.06);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:6px}
.score{margin:10px 0}
.score-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.score-label{color:var(--muted)}
.score-value{font-weight:700}
.progress{height:10px;background:#0b1020;border:1px solid rgba(255,255,255,0.06);border-radius:999px;overflow:hidden}
.progress-bar{height:100%;width:0%;background:linear-gradient(90deg,#ef4444,#f59e0b,#10b981);transition:width .25s ease}
.progress-bar.ok{background:#10b981}
.progress-bar.warn{background:#f59e0b}
.progress-bar.bad{background:#ef4444}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;border:1px solid rgba(255,255,255,0.06);font-weight:700}
.badge.ok{background:#0f2b1f;color:#10b981;border-color:#10b98122}
.badge.bad{background:#2b0f11;color:#ef4444;border-color:#ef444422}
.muted{color:var(--muted);font-size:12px;margin-top:6px}

/* Unified analyze layout */
.hero{background:linear-gradient(135deg, rgba(37,99,235,.18), rgba(34,211,238,.08)) , rgba(17,24,39,0.7)}
.uploader{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:center}
.uploader-left .file-label{display:block;color:var(--muted);font-weight:600;margin-bottom:6px}
.btn-primary{background:linear-gradient(90deg,#2563eb,#22d3ee);border:0}
.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.summary-item{padding:10px;border:1px solid rgba(255,255,255,0.06);border-radius:12px;background:rgba(10,14,26,0.5)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.img-card{border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:10px;background:rgba(10,14,26,0.5)}
.ai-summary{font-size:14px;line-height:1.5;margin:10px 0}
.recs{list-style:disc;padding-left:22px;margin:8px 0}

@media (max-width: 800px){
  .uploader{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .brand{align-items:flex-start}
  .brand-logo{height:64px}
}

/* Footer badge */
.footer-badge{margin:30px 0 0;padding:16px 0;background:transparent}
.footer-inner{max-width:1100px;margin:0 auto;padding:0 16px;display:flex;gap:10px;align-items:center;opacity:.85}
.footer-logo{height:28px;width:auto;object-fit:contain}
.footer-tagline{color:var(--muted)}