:root{
  --bg1:#eef6ff; --bg2:#f6f0ff; --card:#ffffff;
  --accent:#4aa3e0; --accent-2:#6b5dfd; --muted:#6b7280;
  --good:#16a34a; --warn:#e67e22; --miss:#ef4444;
  --shadow: 0 12px 30px rgba(18,38,63,0.08);
}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial;}
body{display:flex;flex-direction:column;background:linear-gradient(135deg,var(--bg1),var(--bg2));color:#17213a;}
main{flex:1;display:flex;align-items:center;justify-content:center;padding:36px 18px;}
.page{width:100%;max-width:980px;}
.card{background:var(--card);border-radius:14px;padding:32px;box-shadow:var(--shadow);transition:transform .15s;}
.card:hover{transform:translateY(-6px);}
h1{margin:0;font-size:26px;}
.lead{color:var(--muted);margin-top:8px;font-size:14px;}

/* upload */
.upload-wrap{margin-top:18px;}
.upload-zone{border-radius:12px;padding:18px;border:2px dashed rgba(75,140,210,0.18);background:rgba(255,255,255,0.9);text-align:center;transition:all .15s;}
.upload-zone.dragover{background:#f0fbff;border-color:rgba(75,140,210,0.36);}
.upload-instruction{color:var(--muted);margin-bottom:12px;}
.controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.btn{border:0;padding:10px 16px;border-radius:10px;font-weight:700;cursor:pointer;box-shadow:0 8px 20px rgba(14,28,48,0.06);}
.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;}
.btn-green{background:#12b886;color:#fff;}
input[type=file]{display:none;}

/* status */
.status{margin-top:12px;font-size:13px;display:flex;justify-content:center;gap:12px;align-items:center;color:var(--muted);}

/* results */
.results{margin-top:18px;display:grid;grid-template-columns:1fr 360px;gap:16px;align-items:start;}
.panel{background:#fff;border-radius:10px;padding:14px;border:1px solid #f3f7fb;box-shadow:0 8px 18px rgba(12,22,36,0.03);}
.summary{text-align:center;}
.score{font-size:38px;font-weight:800;color:#0b3d5a;margin-top:6px;}
.rating{color:var(--muted);margin-top:8px;font-weight:600;}
.section-list{list-style:none;padding:0;margin:12px 0 0 0;display:flex;flex-direction:column;gap:10px;}
.section-item{display:flex;justify-content:space-between;align-items:center;padding:10px;border-radius:8px;background:#fbfdff;border:1px solid #f0f6fb;}
.pill{padding:6px 10px;border-radius:999px;font-weight:700;font-size:13px;}
.pill.good{background:rgba(22,163,74,0.12);color:var(--good);}
.pill.warn{background:rgba(230,126,34,0.08);color:var(--warn);}
.pill.miss{background:rgba(239,68,68,0.06);color:var(--miss);}

/* suggestions */
.suggestions{margin-top:12px;}
.rewrites{margin-top:12px;}

/* footer sticky */
footer{background:transparent;padding:18px 12px;text-align:center;margin-top:auto;color:#0b2b47;}
footer .links{color:#234e88;margin-top:6px;font-weight:700;}
footer a{color:inherit;text-decoration:none;margin:0 6px;}

/* toast */
.toast{position:fixed;right:20px;bottom:22px;background:#0b3d5a;color:#fff;padding:12px 16px;border-radius:10px;box-shadow:0 8px 30px rgba(11,61,90,0.18);font-weight:700;z-index:1200;opacity:0;transform:translateY(8px);transition:all .32s;}
.toast.show{opacity:1;transform:translateY(0);}
@media (max-width:900px){
  .results{grid-template-columns:1fr; }
  .card{padding:20px;}
}