/* Gradem AI brand — matches the landing page (dark neutral + lime accent), so the
   whole product feels like one app from the marketing site through to login,
   upload, results, and the admin backend. */
:root{
  --bg:#18191B;
  --surface:#232426;
  --surface-2:#2A2B2D;
  --border:#3A3B3D;
  --border-soft:#2C2D2F;
  --text:#F3F5EE;
  --text-muted:#9DA295;
  --text-faint:#6B7064;
  --accent:#C6FF3D;
  --accent-dim:#8FCC00;
  --accent-deep:#151B0C;
  --accent-soft:rgba(198,255,61,0.16);
  --cream:#F3F5EE;
  --cream-soft:rgba(243,245,238,0.08);
  --warn:#F5A623;
  --warn-soft:rgba(245,166,35,0.12);
  --danger:#FF6B4A;
  --danger-soft:rgba(255,107,74,0.12);
  --ok:#C6FF3D;
  --ok-soft:rgba(198,255,61,0.16);
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --sans:'Inter', system-ui, sans-serif;
  --radius:12px;
}
*{box-sizing:border-box;}
/* min-height, not height — a fixed-height ancestor is exactly what makes an embedded
   Stripe Checkout iframe give up on expanding the page and scroll internally instead
   (Stripe's own troubleshooting docs call this out directly). min-height still keeps
   the dark background filling short pages without capping how tall the page can grow. */
html,body{min-height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);}

.topbar{
  display:flex;align-items:center;gap:10px;
  padding:14px 20px;border-bottom:1px solid var(--border);
  background:var(--surface);
}
.brand-logo{height:28px;width:28px;object-fit:contain;border-radius:6px;}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);}
.brand-word b{letter-spacing:0.04em;font-size:13px;}
.brand-word span{display:block;font-size:10px;color:var(--text-muted);letter-spacing:0.08em;}
.topbar-right{margin-left:auto;display:flex;gap:10px;align-items:center;}

.wrap{max-width:760px;margin:0 auto;padding:32px 20px 80px;}
.wrap-wide{max-width:1080px;margin:0 auto;padding:32px 20px 80px;}

h1{font-size:22px;margin:0 0 6px;}
h2{font-size:16px;margin:0 0 10px;}
.sub{color:var(--text-muted);margin:0 0 24px;font-size:13px;}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  margin-bottom:16px;
}
.card-title{font-size:12px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);margin-bottom:10px;}

label{display:block;font-size:12px;color:var(--text-muted);margin-bottom:6px;margin-top:14px;}
label:first-child{margin-top:0;}
input[type="text"],input[type="email"],input[type="password"],input[type="file"],input[type="date"]{
  width:100%;padding:10px 12px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:6px;color:var(--text);font-family:var(--sans);font-size:14px;
}
input[type="date"]{color-scheme:dark;}
input:focus{outline:none;border-color:var(--accent);}

.btn{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  padding:10px 16px;border-radius:6px;font-size:13px;cursor:pointer;font-family:var(--sans);
}
.btn:hover{border-color:var(--text-faint);}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-deep);font-weight:700;}
.btn-primary:hover{background:var(--accent-dim);border-color:var(--accent-dim);}
.btn-block{width:100%;justify-content:center;margin-top:18px;}
.btn:disabled{opacity:0.5;cursor:not-allowed;}

.banner{
  background:var(--surface-2);border:1px solid var(--border);border-radius:6px;
  padding:10px 14px;font-size:13px;color:var(--text-muted);margin-bottom:16px;
}
.banner.error{background:var(--danger-soft);border-color:var(--danger);color:var(--danger);}
.banner.ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok);}

.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;letter-spacing:0.03em;text-transform:uppercase;}
.badge-pass{background:var(--ok-soft);color:var(--ok);}
.badge-fail{background:var(--danger-soft);color:var(--danger);}
.badge-pending{background:var(--warn-soft);color:var(--warn);}

.score-big{font-family:var(--mono);font-size:44px;font-weight:700;}
.score-big.pass{color:var(--ok);}
.score-big.fail{color:var(--danger);}

.subscore-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;}
.subscore-tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 10px;text-align:center;}
.subscore-num{font-family:var(--mono);font-size:22px;font-weight:700;}
.subscore-label{font-size:11px;color:var(--text-muted);margin-top:4px;}

.progress-bar-track{width:100%;height:10px;background:var(--surface-2);border:1px solid var(--border);border-radius:20px;overflow:hidden;margin-top:14px;}
.progress-bar-fill{height:100%;background:var(--accent);width:0%;transition:width .15s ease;}
.progress-bar-label{font-family:var(--mono);font-size:13px;color:var(--text-muted);margin-top:8px;text-align:center;}

.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th{text-align:left;color:var(--text-muted);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:0.04em;padding:8px 10px;border-bottom:1px solid var(--border);}
td{padding:10px;border-bottom:1px solid var(--border-soft);vertical-align:top;}
tr:hover td{background:var(--surface-2);}

ul.clean{margin:8px 0 0;padding-left:18px;}
ul.clean li{margin-bottom:6px;}

.section-gap{margin-top:24px;}
.hint{color:var(--text-faint);font-size:12px;}
.center{text-align:center;}
.flex-between{display:flex;align-items:center;justify-content:space-between;gap:12px;}

.progress-dot{width:8px;height:8px;border-radius:50%;background:var(--warn);display:inline-block;animation:pulse 1.2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.3;}}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:640px){.grid-2{grid-template-columns:1fr;}}