:root{
  --green:#059669;
  --green2:#10b981;
  --soft:#f0fdf4;
  --border:#d9e1ea;
  --text:#111827;
  --muted:#6b7280;
}

body{
  background:
    radial-gradient(circle at top left, rgba(16,185,129,.16), transparent 32%),
    radial-gradient(circle at bottom right, rgba(59,130,246,.10), transparent 34%),
    #f7f9fb;
}

.card{
  border:1px solid rgba(217,225,234,.9);
  box-shadow:
    0 24px 70px rgba(15,23,42,.12),
    0 0 0 1px rgba(255,255,255,.55) inset;
}

.logo{
  background:linear-gradient(135deg,#111827,#064e3b);
  box-shadow:0 8px 22px rgba(5,150,105,.22);
}

.brand{
  color:var(--green);
}

.help{
  background:linear-gradient(135deg,#f0f9ff,#ecfdf5);
  border-color:#bfdbfe;
}

.device,
.btn,
.step,
.copybox,
.info,
.tab,
.subinfo-cell,
.device-meter{
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.device:hover,
.btn:hover,
.step:hover{
  transform:translateY(-1px);
}

.blue,
.green,
.activate,
.download{
  background:linear-gradient(135deg,#10b981,#059669)!important;
  box-shadow:0 14px 34px rgba(5,150,105,.22);
}

.blue:hover,
.green:hover,
.activate:hover,
.download:hover{
  filter:brightness(1.02);
}

.step{
  background:linear-gradient(135deg,#ffffff,#f8fafc);
  border:1px solid #e5e7eb;
}

.info{
  background:#ffffff;
  border-color:#e5e7eb;
}

.tab.active{
  background:linear-gradient(135deg,#bbf7d0,#86efac);
}

.subinfo-premium{
  box-shadow:
    0 18px 45px rgba(5,150,105,.12),
    0 0 0 1px rgba(255,255,255,.7) inset;
}

.subinfo-footer{
  color:#047857!important;
}

@media(max-width:520px){
  .card{
    box-shadow:0 16px 42px rgba(15,23,42,.12);
  }
}