/* ═══════════════ TechByChan VPN — Premium Dark Theme ═══════════════ */
:root{
  --bg:#070b14; --bg2:#0c1220;
  --card:rgba(20,28,48,.72); --card2:#111a2e;
  --line:rgba(120,150,220,.14); --line2:rgba(120,150,220,.25);
  --txt:#eaeefb; --mut:#8a97b5;
  --pri:#5b8cff; --pri2:#38d0ff; --grad:linear-gradient(135deg,#5b8cff,#38d0ff);
  --ok:#34d399; --warn:#fbbf24; --err:#f87171;
  --rad:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1000px 600px at 85% -10%, rgba(91,140,255,.18), transparent 60%),
    radial-gradient(800px 500px at -10% 110%, rgba(56,208,255,.10), transparent 60%),
    var(--bg);
  color:var(--txt);
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  min-height:100vh; display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
}

/* ── nav / topbar ── */
nav,.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:15px 22px; border-bottom:1px solid var(--line);
  background:rgba(10,15,28,.6); backdrop-filter:blur(12px);
  position:sticky; top:0; z-index:50;
}
.logo{font-weight:800; font-size:17px; letter-spacing:.3px}
.logo span{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
nav a{color:var(--mut); text-decoration:none; font-size:13.5px; margin-left:14px; transition:color .2s}
nav a:hover{color:var(--txt)}

main{flex:1; width:100%; max-width:540px; margin:0 auto; padding:24px 18px}
footer{text-align:center; color:var(--mut); font-size:11.5px; padding:22px; border-top:1px solid var(--line)}
footer a{color:var(--mut)}

/* ── landing hero ── */
.hero{text-align:center; padding-top:26px}
.badge{
  display:inline-block; background:linear-gradient(90deg,rgba(91,140,255,.15),rgba(56,208,255,.12));
  border:1px solid rgba(91,140,255,.35); padding:7px 16px; border-radius:24px;
  font-size:11px; letter-spacing:1.5px; color:#8fb4ff; font-weight:600;
}
h1{font-size:36px; line-height:1.15; margin:20px 0; font-weight:800}
.grad{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.sub{color:var(--mut); font-size:14px; line-height:1.8}
.features{display:flex; gap:10px; margin:28px 0}
.feat{
  flex:1; background:var(--card); border:1px solid var(--line); border-radius:var(--rad);
  padding:16px 8px; font-size:12px; transition:border-color .2s, transform .2s;
}
.feat:hover{border-color:var(--line2); transform:translateY(-2px)}
.feat span{font-size:24px; display:block; margin-bottom:8px}
.feat b{display:block; font-size:12.5px; margin-bottom:3px}
.feat small{color:var(--mut); font-size:10.5px}

.fb-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:#1877f2; color:#fff; text-decoration:none; font-weight:700;
  padding:15px; border-radius:14px; font-size:15px; margin:12px 0 8px;
  box-shadow:0 6px 24px rgba(24,119,242,.35); transition:transform .15s, box-shadow .15s;
}
.fb-btn:hover{transform:translateY(-1px); box-shadow:0 10px 30px rgba(24,119,242,.45)}
.tiny{color:var(--mut); font-size:11px; line-height:1.7; margin-top:8px}

.pricing{margin-top:30px}
.price-card{
  background:linear-gradient(165deg, rgba(91,140,255,.10), var(--card) 55%);
  border:1px solid rgba(91,140,255,.3); border-radius:20px; padding:24px; text-align:left;
}
.plan{color:var(--pri2); font-weight:700; letter-spacing:2px; font-size:11.5px; text-transform:uppercase}
.amount{font-size:38px; font-weight:800; margin:8px 0 14px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.price-card ul{list-style:none; font-size:13.5px; line-height:2.1; color:#ccd6ea}
.price-card ul li b{color:#fff}

/* ── cards ── */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:22px; margin-bottom:16px; backdrop-filter:blur(8px);
}
.card h3{margin-bottom:14px; font-size:15.5px}
.warn-card{border-color:rgba(251,191,36,.4); background:linear-gradient(160deg,rgba(251,191,36,.06),var(--card))}

.dash{max-width:560px; margin:0 auto}
.welcome{display:flex; align-items:center; gap:13px; margin-bottom:18px;
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px}
.avatar{width:46px; height:46px; border-radius:50%; border:2px solid var(--pri)}
.logout{margin-left:auto; color:var(--mut); font-size:13px; text-decoration:none}

.btn{
  display:inline-block; background:rgba(120,150,220,.08); border:1px solid var(--line2);
  color:var(--txt); padding:11px 18px; border-radius:11px; text-decoration:none;
  font-size:14px; cursor:pointer; margin-top:8px; transition:all .18s; font-family:inherit;
}
.btn:hover{border-color:var(--pri); transform:translateY(-1px)}
.btn.primary{background:var(--grad); border:none; font-weight:700; color:#fff;
  box-shadow:0 4px 18px rgba(91,140,255,.35)}
.btn.primary:hover{box-shadow:0 6px 24px rgba(91,140,255,.5)}
.btn.big{width:100%; padding:14px; font-size:15px}
.btn.sm{padding:6px 13px; font-size:12px; margin:0; border-radius:9px}
.btn.danger{background:rgba(248,113,113,.12); border-color:rgba(248,113,113,.4); color:#ffb4b4}
.btn.danger:hover{background:rgba(248,113,113,.22)}

.steps{margin:14px 0 14px 18px; font-size:13px; line-height:2; color:#c6cede}
.subbox{
  background:#080c16; border:1px dashed rgba(120,150,220,.3); border-radius:10px;
  padding:11px; font-size:10.5px; word-break:break-all; color:#93a8d4; margin:10px 0;
  user-select:all;
}
.usage-bar{height:9px; background:#080c16; border-radius:6px; overflow:hidden; margin:12px 0 6px}
.fill{height:100%; border-radius:6px; background:var(--grad);
  transition:width .4s ease; box-shadow:0 0 12px rgba(56,208,255,.5)}

.kpay-box{background:#080c16; border:1px solid var(--line); border-radius:14px; padding:16px; margin:14px 0}
.kp-row{display:flex; justify-content:space-between; padding:7px 0; font-size:14px; border-bottom:1px dashed rgba(120,150,220,.12)}
.kp-row:last-child{border-bottom:none}
.kp-row span{color:var(--mut)} .mono{font-family:'JetBrains Mono',monospace; font-size:.92em; color:#a9c0ee; letter-spacing:.5px}
.kp-copy{display:flex; gap:8px; align-items:center; color:inherit}
.copy-btn:active{transform:scale(.96)}
.ok{color:var(--ok)} .err{color:var(--err)}
.filein{width:100%; margin:14px 0; padding:12px; background:#080c16;
  border:1px dashed rgba(120,150,220,.3); border-radius:10px; color:var(--mut)}

.legal{font-size:13px; line-height:1.9; color:#c6cede}
.legal h2{margin-bottom:12px} .legal li{margin-left:18px; margin-bottom:7px}

/* ═══════════ ADMIN ═══════════ */
.alayout{display:flex;min-height:100vh}
.aside{
  width:220px; flex-shrink:0; display:flex; flex-direction:column;
  background:rgba(10,15,28,.7); border-right:1px solid var(--line);
  padding:20px 14px; position:sticky; top:0; height:100vh; backdrop-filter:blur(12px);
}
.alogo{font-weight:800; font-size:15px; line-height:1.4; margin-bottom:26px}
.alogo span{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  font-size:11.5px; font-weight:600; letter-spacing:1.5px}
.anav{display:flex; flex-direction:column; gap:4px}
.anav a{
  display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:11px;
  color:var(--mut); text-decoration:none; font-size:13.5px; font-weight:600; transition:all .15s;
}
.anav a:hover{color:var(--txt); background:rgba(120,150,220,.08)}
.anav a.on{background:linear-gradient(90deg,rgba(91,140,255,.18),rgba(56,208,255,.08));
  color:#fff; border-left:3px solid var(--pri)}
.aspacer{flex:1}
.aout{color:var(--mut); text-decoration:none; font-size:13px; padding:10px 13px; border-radius:10px}
.aout:hover{color:var(--err); background:rgba(248,113,113,.08)}
.amain{flex:1; padding:24px 26px; max-width:1100px}
.pagehead{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px}
.pagehead h2{font-size:19px}

.filters{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:12px; margin-bottom:14px;
}
.filters select,.filters input[type=date],.filters input[type=text]{
  background:#080c16; border:1px solid var(--line); color:var(--txt);
  border-radius:8px; padding:8px 10px; font-size:12.5px; font-family:inherit;
}
.filters .tiny{margin:0}
.pgn{display:flex; gap:6px; margin-top:14px; align-items:center; flex-wrap:wrap}
.pg{padding:6px 11px; border-radius:8px; border:1px solid var(--line); color:var(--mut);
  text-decoration:none; font-size:12.5px}
.pg:hover{border-color:var(--pri); color:var(--txt)}
.pg.on{background:var(--grad); color:#fff; border:none; font-weight:700}

@media(max-width:860px){
  .alayout{flex-direction:column}
  .aside{width:100%; height:auto; position:static; flex-direction:row; align-items:center;
    overflow-x:auto; padding:10px 12px; gap:8px}
  .alogo{margin:0 10px 0 0; font-size:13px; white-space:nowrap}
  .anav{flex-direction:row} .anav a span{display:none}
  .anav a{padding:9px 12px} .aspacer,.aout{display:none}
  .amain{padding:16px 12px}
}

/* ═══════════ ADMIN (legacy single-page bits) ═══════════ */
.wrap{max-width:1020px; margin:0 auto; padding:22px 16px}
.topbar .logo{font-size:16px}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:12px; margin-bottom:22px}
.stat{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg, rgba(120,150,220,.07), rgba(20,28,48,.6));
  border:1px solid var(--line); border-radius:var(--rad); padding:16px 16px 14px;
}
.stat::before{content:''; position:absolute; inset:0 0 auto 0; height:2.5px;
  background:var(--grad); opacity:.7}
.stat .v{font-size:23px; font-weight:800; letter-spacing:-.5px}
.stat .l{font-size:10.5px; color:var(--mut); margin-top:5px; text-transform:uppercase; letter-spacing:1px}
.stat.gold .v{color:#ffd166} .stat.green .v{color:var(--ok)}
.stat.red .v{color:var(--err)} .stat.blue .v{color:var(--pri2)}
h3.sec{margin:26px 0 12px; font-size:14.5px; color:#a9c0ee; letter-spacing:.3px}

table.t{width:100%; border-collapse:collapse; font-size:12.5px;
  background:rgba(20,28,48,.5); border-radius:14px; overflow:hidden; border:1px solid var(--line)}
table.t th{background:rgba(8,12,22,.85); color:var(--mut); text-align:left;
  padding:11px 12px; font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:1px}
table.t td{padding:11px 12px; border-top:1px solid var(--line); vertical-align:middle}
table.t tr:hover td{background:rgba(120,150,220,.04)}

.bar{height:6px; background:#080c16; border-radius:4px; overflow:hidden; min-width:80px}
.bar i{display:block; height:100%; background:var(--grad); border-radius:4px}
.pend{
  background:linear-gradient(160deg, rgba(251,191,36,.05), var(--card));
  border:1px solid rgba(251,191,36,.35); border-radius:14px; padding:14px;
  margin-bottom:10px; display:flex; flex-wrap:wrap; gap:10px;
  align-items:center; justify-content:space-between;
}
.bdg{display:inline-block; padding:3px 10px; border-radius:20px; font-size:10.5px; font-weight:700; letter-spacing:.4px}
.bdg.ok{background:rgba(52,211,153,.12); color:var(--ok); border:1px solid rgba(52,211,153,.3)}
.bdg.err{background:rgba(248,113,113,.1); color:var(--err); border:1px solid rgba(248,113,113,.3)}
.bdg.mut{background:rgba(138,151,181,.1); color:var(--mut); border:1px solid var(--line)}
.pos{color:var(--ok)} .neg{color:var(--err)}
@media(max-width:640px){
  h1{font-size:29px} .features{flex-direction:column}
  .stats{grid-template-columns:repeat(2,1fr)}
  .hide-sm{display:none}
  main{padding:18px 14px}
}