:root{
  --bg0:#0b1020;
  --bg1:#121b36;
  --surface:#0f1730;
  --card:#ffffff;
  --card2:#f5f7fb;
  --text:#0b1020;
  --muted:#5b657a;
  --line:#dbe3f2;
  --accent:#d81b60;
  --accent2:#6d28d9;
  --good:#0f766e;
  --shadow:0 18px 42px rgba(3, 7, 18, .18);
  --radius:18px;
  --radius-sm:12px;
  --container:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  background:
    radial-gradient(1100px 600px at 15% 0%, rgba(216,27,96,.28), transparent 60%),
    radial-gradient(900px 520px at 80% 15%, rgba(109,40,217,.25), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  color:var(--text);
  line-height:1.65;
}

a{color:inherit; text-decoration:none}

.wrap{
  width:min(calc(100% - 32px), var(--container));
  margin:0 auto;
}

/* Top navigation */
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(12, 17, 38, .78);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(219,227,242,.12);
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}
.brand{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.brand strong{
  color:#fff;
  font-size:1.05rem;
  letter-spacing:.2px;
}
.brand span{
  color:rgba(255,255,255,.72);
  font-size:.86rem;
}
.nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.nav a{
  color:rgba(255,255,255,.78);
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(219,227,242,.14);
  transition:.18s ease;
}
.nav a:hover{
  border-color: rgba(216,27,96,.45);
  color:#fff;
  background: rgba(216,27,96,.12);
}
.nav a.active{
  border-color: rgba(216,27,96,.65);
  color:#fff;
  background: rgba(216,27,96,.18);
}

/* Common blocks */
.page{
  padding:34px 0 56px;
}

.hero{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,247,251,.92));
  border:1px solid rgba(219,227,242,.45);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:26px;
  margin-bottom:22px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:.86rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--muted);
}
.eyebrow:before{
  content:"";
  width:10px;
  height:10px;
  border-radius:3px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 0 6px rgba(216,27,96,.12);
}

h1{
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height:1.12;
  margin:14px 0 12px;
}

.lead{
  color: var(--muted);
  margin:0;
  max-width:64ch;
}

.criteria{
  margin:18px 0 0;
  padding-left:20px;
  color:#1b2437;
}
.criteria li{margin:9px 0}

.section-title{
  margin:26px 0 14px;
  color:#fff;
}

.top5-grid{
  display:grid;
  gap:14px;
  margin-top:18px;
}

.rank-card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(3,7,18,.08);
  padding:18px;
  position:relative;
  overflow:hidden;
}

.rank-card:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:7px;
  background: linear-gradient(180deg, rgba(216,27,96,.85), rgba(109,40,217,.75));
}
.rank-card.rank-1:before{
  background: linear-gradient(180deg, rgba(15,118,110,.95), rgba(109,40,217,.55));
}

.rank-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:10px;
}

.rank-left{
  display:flex;
  align-items:center;
  gap:14px;
}
.rank-badge{
  width:44px;
  height:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:#fff;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 10px 22px rgba(216,27,96,.24);
}
.rank-card.rank-1 .rank-badge{
  background: linear-gradient(135deg, rgba(15,118,110,.95), rgba(216,27,96,.35));
}
.rank-meta h2,
.rank-meta h3{
  margin:0;
  font-size:1.12rem;
}
.rank-sub{
  margin:6px 0 0;
  color: var(--muted);
  font-weight:700;
}
.rank-score{
  font-weight:900;
  color: var(--muted);
}

.rank-card p{
  margin:0 0 12px;
  color:#1f2a3e;
}

/* Expandable comments */
.rank-details details{
  border:1px dashed rgba(216,27,96,.25);
  border-radius: var(--radius-sm);
  padding:10px 12px;
  background: linear-gradient(180deg, rgba(216,27,96,.05), rgba(109,40,217,.03));
}
.rank-details + .rank-details{margin-top:10px}
.rank-details summary{
  cursor:pointer;
  font-weight:800;
  color:#2d3547;
}
.rank-details .detail-body{
  margin-top:8px;
  color: var(--muted);
}

/* Generic cards */
.two-cols{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
.card{
  background: rgba(255,255,255,.92);
  border:1px solid rgba(219,227,242,.55);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(3,7,18,.08);
  padding:18px;
}
.card h2{
  margin:0 0 10px;
  font-size:1.35rem;
}

.link-list{
  margin:10px 0 0;
  padding-left:20px;
}
.link-list li{margin:8px 0}
.link-list a{
  color: var(--accent);
  font-weight:800;
}

/* Footer */
.footer{
  padding:24px 0 10px;
  color: rgba(255,255,255,.82);
}
.footer-inner{
  border-top:1px solid rgba(219,227,242,.12);
  padding-top:18px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:16px;
  align-items:center;
}
.footer-inner a{
  color: rgba(255,255,255,.78);
  border:1px solid rgba(219,227,242,.14);
  padding:8px 12px;
  border-radius:999px;
}
.footer-inner a:hover{
  border-color: rgba(216,27,96,.45);
  color:#fff;
}

/* Page-specific grids */
.subject-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
.subject-card{
  border:1px solid rgba(219,227,242,.55);
  background: rgba(255,255,255,.92);
  border-radius: var(--radius);
  padding:16px;
  box-shadow: 0 12px 30px rgba(3,7,18,.08);
  transition:.18s ease;
}
.subject-card:hover{
  transform: translateY(-3px);
  border-color: rgba(216,27,96,.35);
}
.subject-card strong{
  display:block;
  font-size:1.1rem;
  margin-bottom:6px;
}
.subject-card span{
  color: var(--muted);
}

.table-wrap{
  overflow:auto;
  border-radius: var(--radius);
  border:1px solid rgba(219,227,242,.55);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 30px rgba(3,7,18,.08);
}
table{
  width:100%;
  min-width:820px;
  border-collapse:collapse;
}
th, td{
  padding:14px 14px;
  border-bottom:1px solid rgba(219,227,242,.55);
  text-align:left;
}
th{
  background: rgba(245,247,251,.96);
  color: var(--muted);
  font-weight:900;
}
td{
  color:#1f2a3e;
}

.faq-list details{
  background: rgba(255,255,255,.92);
  border:1px solid rgba(219,227,242,.55);
  border-radius: var(--radius);
  padding:12px 16px;
  box-shadow: 0 12px 30px rgba(3,7,18,.08);
}
.faq-list details + details{margin-top:12px}
.faq-list summary{
  cursor:pointer;
  font-weight:900;
  color:#1f2a3e;
}
.faq-list .answer{
  margin-top:10px;
  color: var(--muted);
}

.related{
  margin-top:22px;
}
.related h2{
  color:#fff;
  margin:0 0 10px;
  font-size:1.35rem;
}
.related .card{
  background: rgba(255,255,255,.92);
}

@media (max-width: 900px){
  .subject-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
  .two-cols{grid-template-columns: 1fr;}
}
@media (max-width: 560px){
  .subject-grid{grid-template-columns: 1fr;}
}