:root{
  --compare-bg:#05070c;
  --compare-bg-2:#0a1018;
  --compare-panel:rgba(10,16,26,.92);
  --compare-line:rgba(120,148,191,.18);
  --compare-line-strong:rgba(120,148,191,.3);
  --compare-text:#edf4ff;
  --compare-muted:#91a3c6;
  --compare-accent:#52d5ff;
  --compare-accent-soft:rgba(82,213,255,.16);
  --compare-radius:24px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  min-height:100vh;
  font-family:"Space Grotesk","Avenir Next","Neue Haas Grotesk Text Pro",sans-serif;
  color:var(--compare-text);
  background:
    radial-gradient(circle at 12% 10%, rgba(82,213,255,.11), transparent 18rem),
    radial-gradient(circle at 86% 12%, rgba(114,124,255,.12), transparent 18rem),
    linear-gradient(180deg, #030509 0%, var(--compare-bg) 48%, var(--compare-bg-2) 100%);
}

.compare-page{
  min-height:100vh;
  display:grid;
  grid-template-rows:auto auto auto;
  gap:16px;
  padding:18px;
}

.compare-hero,
.compare-toolbar,
.compare-picker{
  border:1px solid var(--compare-line-strong);
  border-radius:var(--compare-radius);
  background:var(--compare-panel);
  box-shadow:0 18px 38px rgba(0,0,0,.28);
  backdrop-filter:blur(16px);
}

.compare-hero,
.compare-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px;
}

.compare-kicker{
  margin:0 0 8px;
  color:var(--compare-accent);
  font-size:.86rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.compare-hero h1{
  margin:0;
  font-size:clamp(1.5rem, 2vw, 2.3rem);
  line-height:1.05;
}

.compare-copy{
  margin:10px 0 0;
  max-width:720px;
  color:var(--compare-muted);
}

.compare-back,
.compare-reset,
.compare-start,
.layout-btn,
.compare-exit{
  border:1px solid var(--compare-line-strong);
  background:rgba(9,15,24,.92);
  color:var(--compare-text);
  border-radius:999px;
  text-decoration:none;
  font:inherit;
}

.compare-back,
.compare-reset,
.compare-start{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 18px;
  white-space:nowrap;
}

.compare-toolbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.compare-start{
  background:var(--compare-accent-soft);
  border-color:rgba(82,213,255,.46);
  color:#d9fbff;
  font-weight:700;
}

.compare-layout-switch{
  display:inline-flex;
  padding:4px;
  gap:4px;
  border-radius:999px;
  background:rgba(7,12,20,.92);
  border:1px solid var(--compare-line);
}

.layout-btn{
  min-width:58px;
  min-height:42px;
  padding:0 18px;
  cursor:pointer;
}

.layout-btn.is-active{
  border-color:rgba(82,213,255,.46);
  background:var(--compare-accent-soft);
  color:#c9f7ff;
}

.compare-picker-grid{
  display:grid;
  gap:14px;
}

.compare-picker-grid-2{grid-template-columns:repeat(2, minmax(0,1fr))}
.compare-picker-grid-4{grid-template-columns:repeat(2, minmax(0,1fr))}
.compare-picker-grid-8{grid-template-columns:repeat(4, minmax(0,1fr))}

.compare-picker{
  padding:16px;
}

.compare-picker-label{
  display:block;
  margin:0 0 8px;
  color:var(--compare-muted);
  font-size:.86rem;
  font-weight:700;
}

.compare-picker select{
  width:100%;
  min-height:46px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid var(--compare-line-strong);
  background:#0a1220;
  color:var(--compare-text);
  font:inherit;
}

.compare-stage{
  position:fixed;
  inset:0;
  z-index:5000;
  display:grid;
  gap:2px;
  background:#020407;
}

.compare-stage-2{grid-template-columns:repeat(2, minmax(0,1fr))}
.compare-stage-4{grid-template-columns:repeat(2, minmax(0,1fr));grid-template-rows:repeat(2, minmax(0,1fr))}
.compare-stage-8{grid-template-columns:repeat(4, minmax(0,1fr));grid-template-rows:repeat(2, minmax(0,1fr))}

.compare-frame{
  width:100%;
  height:100%;
  border:0;
  background:#04070d;
}

.compare-exit{
  position:fixed;
  top:10px;
  right:10px;
  z-index:5010;
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:1.2rem;
  line-height:1;
  background:rgba(6,11,18,.82);
}

.compare-mobile-nav{
  position:fixed;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  z-index:5010;
  display:none;
  align-items:center;
  gap:12px;
  padding:8px 12px;
  border:1px solid var(--compare-line-strong);
  border-radius:999px;
  background:rgba(6,11,18,.84);
  backdrop-filter:blur(14px);
}

.compare-mobile-btn{
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--compare-line-strong);
  border-radius:999px;
  background:rgba(9,15,24,.92);
  color:var(--compare-text);
  font:inherit;
  font-size:1.2rem;
  line-height:1;
}

.compare-mobile-btn:disabled{
  opacity:.35;
}

.compare-mobile-dots{
  display:flex;
  align-items:center;
  gap:8px;
}

.compare-mobile-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:rgba(145,163,198,.45);
}

.compare-mobile-dot.is-active{
  background:var(--compare-accent);
  box-shadow:0 0 0 4px rgba(82,213,255,.16);
}

body.compare-viewing{
  overflow:hidden;
}

body.compare-viewing .compare-hero,
body.compare-viewing .compare-toolbar,
body.compare-viewing .compare-picker-grid{
  display:none;
}

@media (max-width: 920px){
  .compare-page{padding:12px}
  .compare-hero,
  .compare-toolbar{
    flex-direction:column;
    align-items:flex-start;
  }
  .compare-picker-grid-2,
  .compare-picker-grid-4,
  .compare-picker-grid-8{
    grid-template-columns:1fr;
  }
  .compare-stage-2,
  .compare-stage-4,
  .compare-stage-8{
    grid-template-columns:1fr;
    grid-template-rows:none;
  }
  body.compare-viewing .compare-mobile-nav{
    display:flex;
  }
}