:root{
  --pl-bg: #03080f;
  --pl-surface: rgba(7, 18, 30, 0.82);
  --pl-surface-soft: rgba(8, 21, 35, 0.66);
  --pl-border: rgba(141, 240, 195, 0.22);
  --pl-border-soft: rgba(176, 226, 255, 0.14);
  --pl-title: #e8f6ee;
  --pl-text: rgba(213, 236, 224, 0.9);
  --pl-muted: rgba(186, 214, 202, 0.72);
  --pl-ok: #8ef5be;
}

.plans-page{
  min-height:calc(100vh - 4.5rem);
  padding:1rem 0 2rem;
}

.plans-page .container{ width:min(1080px, calc(100% - 1.8rem)); }

.panel-shell{
  border:1px solid var(--pl-border);
  border-radius:32px;
  padding:1.2rem;
  background:
    radial-gradient(760px 360px at 50% 0%, rgba(98, 254, 184, 0.1), transparent 62%),
    linear-gradient(180deg, rgba(7, 20, 33, 0.88), rgba(3, 11, 22, 0.9));
  box-shadow:
    0 0 0 1px rgba(217, 255, 236, 0.08) inset,
    0 16px 40px rgba(0, 0, 0, 0.38),
    0 0 30px rgba(67, 232, 159, 0.12);
}

.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.8rem;
  border-bottom:1px solid rgba(139, 240, 194, 0.26);
  padding-bottom:0.9rem;
  margin-bottom:1rem;
}

.panel-brand{
  margin:0;
  font-size:clamp(1.38rem, 2.3vw, 1.95rem);
  color:var(--pl-title);
  letter-spacing:0.02em;
  text-shadow:0 0 16px rgba(82, 246, 174, 0.22);
}

.panel-head-actions{ display:flex; align-items:center; gap:0.5rem; }

.page-header{
  border:1px solid var(--pl-border-soft);
  border-radius:24px;
  padding:1rem;
  background:var(--pl-surface-soft);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  margin-bottom:0.95rem;
}

.eyebrow{
  margin:0;
  color:var(--ui-accent);
  text-transform:uppercase;
  letter-spacing:0.12em;
  font-size:0.82rem;
  font-weight:800;
}

.page-title{
  margin:0.35rem 0 0;
  color:var(--pl-title);
  font-family:"Sora","Manrope",sans-serif;
  font-size:clamp(1.55rem, 3vw, 2.2rem);
  line-height:1.12;
}

.section-lead{
  margin:0.46rem 0 0;
  color:var(--pl-muted);
  max-width:68ch;
  font-size:1rem;
  line-height:1.42;
}

.beta-banner,
.card{
  border:1px solid var(--pl-border-soft);
  border-radius:18px;
  background:var(--pl-surface);
  padding:1rem;
  margin-bottom:0.9rem;
}

.beta-banner h2,
.card h2,
.plan h3{
  margin:0 0 0.35rem;
  color:var(--pl-title);
  font-family:"Sora","Manrope",sans-serif;
}

.beta-banner p,
.card p,
.plan-note,
.plan-status{ color:var(--pl-muted); }

.plan-actions{ display:flex; gap:0.65rem; flex-wrap:wrap; margin-top:0.68rem; }

.plan-status{ margin:0.66rem 0 0; font-size:0.92rem; }

.plan-current{
  display:inline-flex;
  gap:0.35rem;
  align-items:center;
  padding:0.22rem 0.58rem;
  border-radius:999px;
  background:rgba(57, 217, 149, 0.16);
  color:var(--pl-ok);
  border:1px solid rgba(122, 247, 188, 0.3);
  font-weight:700;
  font-size:0.76rem;
}

.btn[disabled]{ opacity:0.6; cursor:not-allowed; }

.billing-card .ui-field{ max-width:420px; }
.billing-card .ui-field:last-child{ max-width:360px; }
.billing-card .ui-input{
  min-height:44px;
  border-radius:12px;
  border:1px solid var(--pl-border-soft);
  background:rgba(2, 12, 22, 0.74);
  color:var(--pl-title);
}

.plans-grid{
  display:grid;
  gap:0.8rem;
  grid-template-columns:1fr;
  margin-bottom:0.9rem;
}

.plan{
  border-radius:20px;
  padding:1rem;
}

.plan-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:0.7rem;
  margin-bottom:0.72rem;
}

.price{
  color:var(--pl-title);
  font-family:"Sora","Manrope",sans-serif;
  font-size:1.18rem;
  font-weight:800;
}

.plan-features{
  margin:0;
  padding-left:1.05rem;
  color:var(--pl-text);
  display:grid;
  gap:0.36rem;
}

.plan.recommended{
  border-color:rgba(109, 248, 199, 0.42);
  box-shadow:0 0 24px rgba(77, 248, 174, 0.14);
}

.compare{ margin-top:1rem; }
.compare h2{ margin:0 0 0.58rem; }

.compare-wrap{
  overflow:auto;
  border-radius:14px;
  border:1px solid var(--pl-border-soft);
}

.compare table{ width:100%; min-width:640px; border-collapse:separate; border-spacing:0; }
.compare th,.compare td{ padding:0.75rem 0.7rem; border-top:1px solid rgba(255,255,255,0.08); vertical-align:top; }
.compare th{ text-align:left; color:var(--pl-title); font-weight:900; }
.compare td{ color:var(--pl-muted); }
.compare .yes{ color:var(--pl-ok); font-weight:900; }
.compare .no{ color:rgba(255,255,255,0.6); font-weight:800; }

@media (min-width: 980px){
  .plans-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px){
  .plans-page .container{ width:min(1080px, calc(100% - 1.05rem)); }
  .panel-shell{ padding:0.85rem; border-radius:24px; }
  .panel-head{ flex-direction:column; align-items:flex-start; }
  .panel-head-actions{ width:100%; }
  .panel-head-actions .btn{ flex:1; }
  .page-header{ padding:0.85rem; border-radius:16px; }
  .card,.beta-banner{ border-radius:14px; padding:0.82rem; }
  .billing-card .ui-field,
  .billing-card .ui-field:last-child{ max-width:none; }
}