:root{
  --bg:#f4f6f9;
  --card:#ffffff;
  --muted:#6b7280;
  --text:#0f1724;
  --primary:#0b5fff;
  --radius:12px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{
  max-width:980px;
  margin:48px auto;
  padding:20px;
}

.site-header h1{margin:0 0 6px 0;font-weight:600}
.lead{margin:0;color:var(--muted)}

.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:18px;
  margin-bottom:16px;
  box-shadow:0 8px 24px rgba(15,23,42,0.06);
}

.upload-card .label{display:block;margin-bottom:8px;color:var(--muted);font-size:14px}
.controls{display:flex;gap:12px;align-items:center}
input[type=file]{
  padding:8px 12px;
  border-radius:8px;
  border:1px solid rgba(15,23,42,0.06);
  background:linear-gradient(180deg, #fff, #fbfbfd);
}

.btn{padding:8px 14px;border-radius:8px;border:0;cursor:pointer;font-weight:600}
.btn.primary{background:var(--primary);color:#fff;box-shadow:0 6px 14px rgba(11,95,255,0.12)}
.btn.primary:hover{filter:brightness(.95)}

.uploads-list{list-style:none;padding:0;margin:0}
.uploads-list li{display:flex;justify-content:space-between;align-items:center;padding:10px;border-radius:8px;margin-bottom:8px;background:linear-gradient(180deg,#fff,#fcfdff);box-shadow:0 3px 10px rgba(15,23,42,0.03)}
.uploads-list li small{color:var(--muted)}

.report-pre{background:#fbfdff;padding:14px;border-radius:10px;white-space:pre-wrap;margin-top:8px;border:1px solid rgba(15,23,42,0.03)}
.report-card .viz{margin-top:12px}
.viz{min-height:84px}

.muted{color:var(--muted)}
.small{font-size:13px}

.site-footer{margin-top:8px;text-align:center;color:var(--muted)}

@media (max-width:560px){
  .controls{flex-direction:column;align-items:stretch}
  .container{margin:20px;padding:14px}
}

/* Spinner */
.hidden{display:none!important}
.spinner{
  position:fixed;
  left:0;right:0;top:0;bottom:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(15,23,42,0.18);
  z-index:1200;
}
.spinner-inner{display:flex;align-items:center;gap:12px;background:var(--card);padding:12px 16px;border-radius:10px;box-shadow:0 10px 30px rgba(2,6,23,0.2)}
.spinner-icon{width:36px;height:36px;animation:spin 1s linear infinite}
.spinner-icon circle{stroke:#0b5fff;stroke-linecap:round;stroke-dasharray:90;stroke-dashoffset:60}
.spinner-text{font-weight:600;color:var(--text)}

@keyframes spin{to{transform:rotate(360deg)}}