/* Northon VPN — personal cabinet. Matches the play2go-style marketing site. */
:root {
  --bg-0:#08090d; --bg-1:#0c0e13; --bg-2:#11141b; --bg-3:#161a23;
  --border:#1e2430; --border-soft:#171c26;
  --text:#e9ecf3; --text-dim:#9aa3b4; --text-mute:#626c7e;
  --accent:#ff2e74; --pink:#ff6187; --magenta:#ff005c; --purple:#c084fc;
  --violet:#a78bfa; --blue:#61b3ff; --green:#23ff95;
  --grad:linear-gradient(92deg,#ff005c 0%,#ff6187 45%,#c084fc 100%);
  --glow:0 0 60px -12px rgba(255,46,116,.45);
  --card-shadow:0 1px 0 0 rgba(255,255,255,.03) inset,0 20px 50px -30px rgba(0,0,0,.8);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--text);background:var(--bg-0);
  font-family:Onest,system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  min-height:100vh;
  background-image:
    radial-gradient(1100px 520px at 78% -8%,rgba(255,0,92,.12),transparent 60%),
    radial-gradient(900px 520px at 10% 4%,rgba(192,132,252,.08),transparent 55%);
  background-attachment:fixed;
}
h1,h2,h3{font-family:Unbounded,system-ui,sans-serif;letter-spacing:-.02em;margin:0}
a{color:inherit}
.container{max-width:1180px;margin:0 auto;padding:0 20px}
.muted{color:var(--text-dim)}
.mute{color:var(--text-mute)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.22em;color:var(--pink)}
.hidden{display:none!important}

/* header */
header.top{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);
  background:rgba(8,9,13,.72);border-bottom:1px solid var(--border-soft)}
.top .row{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-family:Unbounded;font-weight:700;font-size:18px;text-decoration:none}
.brand .dot{width:30px;height:30px;border-radius:9px;background:var(--grad);box-shadow:var(--glow)}
.brand .v{color:var(--pink)}
.top .actions{display:flex;align-items:center;gap:10px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;
  border-radius:999px;padding:12px 20px;font-size:14px;font-weight:600;font-family:Onest;
  transition:all .2s;text-decoration:none;white-space:nowrap}
.btn-primary{background:var(--grad);color:#fff;box-shadow:var(--glow)}
.btn-primary:hover{filter:brightness(1.1);transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--border);background:rgba(17,20,27,.6);color:var(--text)}
.btn-ghost:hover{border-color:rgba(255,46,116,.5);color:#fff}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;filter:none}
.btn-sm{padding:9px 16px;font-size:13px}

/* cards */
.card{border:1px solid var(--border);background:rgba(12,14,19,.7);border-radius:20px;
  box-shadow:var(--card-shadow);backdrop-filter:blur(6px)}
.pad{padding:24px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);
  background:rgba(17,20,27,.7);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:500;color:var(--text-dim)}
.chip.ok{color:var(--green);border-color:rgba(35,255,149,.3)}
.chip.warn{color:#ffd166;border-color:rgba(255,209,102,.3)}
.chip.bad{color:var(--pink);border-color:rgba(255,97,135,.3)}

/* layout */
.grid{display:grid;gap:18px}
@media(min-width:880px){.grid-2{grid-template-columns:1.3fr .9fr}}
.section-title{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--text-mute);margin-bottom:12px}

/* login */
.center-wrap{min-height:calc(100vh - 64px);display:flex;align-items:center;justify-content:center;padding:32px 0}
.login-card{max-width:460px;width:100%;text-align:center}
.qr-box{background:#fff;border-radius:16px;padding:14px;display:inline-flex;margin:8px auto}
.qr-box canvas,.qr-box img{display:block;width:200px;height:200px}
.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;
  display:inline-block;animation:spin .8s linear infinite;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}

/* dashboard */
.hero-status{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.avatar{width:56px;height:56px;border-radius:50%;background:var(--grad);display:flex;align-items:center;
  justify-content:center;font-family:Unbounded;font-weight:700;font-size:22px;color:#fff;flex:0 0 auto;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.big-date{font-family:Unbounded;font-weight:700;font-size:30px;line-height:1.1}
.stat{display:flex;flex-direction:column;gap:2px}
.stat .k{font-size:12px;color:var(--text-mute);text-transform:uppercase;letter-spacing:.1em}
.stat .v{font-family:Unbounded;font-weight:600;font-size:22px}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

/* sub link */
.sublink{display:flex;gap:8px;align-items:stretch}
.sublink input{flex:1;background:var(--bg-2);border:1px solid var(--border);border-radius:12px;color:var(--text);
  padding:11px 13px;font-size:13px;font-family:ui-monospace,monospace;overflow:hidden;text-overflow:ellipsis}

/* plans */
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:560px){.plans{grid-template-columns:repeat(4,1fr)}}
.plan{position:relative;border:1px solid var(--border);background:var(--bg-2);border-radius:16px;padding:16px;
  cursor:pointer;transition:all .18s;text-align:left}
.plan:hover{border-color:rgba(255,46,116,.5);transform:translateY(-2px)}
.plan.active{border-color:transparent;background:linear-gradient(var(--bg-2),var(--bg-2)) padding-box,var(--grad) border-box;
  border:1px solid transparent;box-shadow:var(--glow)}
.plan .term{font-size:13px;color:var(--text-dim)}
.plan .price{font-family:Unbounded;font-weight:700;font-size:24px;margin-top:4px}
.plan .per{font-size:12px;color:var(--text-mute)}
.plan .badge{position:absolute;top:-9px;right:10px;background:var(--grad);color:#fff;font-size:10px;font-weight:700;
  padding:3px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.06em}

/* pay methods */
.pays{display:grid;gap:10px;margin-top:14px}
.pay{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--border);
  background:var(--bg-2);border-radius:14px;padding:13px 16px;cursor:pointer;transition:all .18s;font-weight:600;font-size:14px}
.pay:hover{border-color:rgba(255,46,116,.5);transform:translateY(-1px)}
.pay .ic{width:26px;text-align:center}

/* history */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--border-soft)}
th{font-size:12px;color:var(--text-mute);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
td.r,th.r{text-align:right}

/* steps */
.steps{display:grid;gap:10px}
.step{display:flex;gap:12px;align-items:flex-start}
.step .n{flex:0 0 auto;width:26px;height:26px;border-radius:8px;background:var(--bg-3);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:var(--pink)}

/* toast */
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);opacity:0;
  background:var(--bg-3);border:1px solid var(--border);border-radius:12px;padding:12px 18px;font-size:14px;
  box-shadow:var(--card-shadow);transition:all .25s;z-index:100;max-width:90vw}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.ok{border-color:rgba(35,255,149,.4)}
#toast.err{border-color:rgba(255,97,135,.5)}

footer.bot{border-top:1px solid var(--border-soft);margin-top:48px;padding:24px 0;color:var(--text-mute);font-size:13px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.flex{display:flex}.gap{gap:10px}.wrap{flex-wrap:wrap}.center{align-items:center}
.mt{margin-top:14px}.mt2{margin-top:24px}.mb{margin-bottom:14px}