:root{
  --bg:#0c0e10;
  --bg-panel:#14171a;
  --bg-raised:#1b1f23;
  --line:#262b30;
  --line-soft:#1e2226;
  --text:#e9edf0;
  --text-dim:#8a9199;
  --text-faint:#565e66;
  --accent:#5ee6c4;
  --accent-dim:#2e5f52;
  --danger:#e6685e;
  --warn:#e6b85e;
  --radius:10px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Space Grotesk',sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent);color:#0c0e10;}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input{font-family:inherit;}

/* ---------- layout scaffolding ---------- */
#app{min-height:100vh;display:flex;flex-direction:column;}
.screen{display:none;flex:1;flex-direction:column;}
.screen.active{display:flex;}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 20px;}

/* ---------- auth screen ---------- */
#screen-auth{align-items:center;justify-content:center;padding:32px 20px;position:relative;overflow:hidden;}
#screen-auth::before{
  content:"";
  position:absolute;
  top:-40%;left:50%;
  width:900px;height:900px;
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(94,230,196,0.07) 0%,rgba(94,230,196,0) 65%);
  pointer-events:none;
}
.auth-card{
  position:relative;
  width:100%;max-width:380px;
  z-index:1;
}
.auth-brand{margin-bottom:36px;text-align:left;}
.auth-brand .mark{
  display:inline-flex;align-items:center;gap:10px;
  font-size:15px;color:var(--text-dim);letter-spacing:0.02em;margin-bottom:18px;
}
.auth-brand .mark .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);}
.auth-brand h1{
  font-size:34px;font-weight:700;letter-spacing:-0.02em;line-height:1.15;
  background:linear-gradient(180deg,#fff 0%,#b9c2c8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.auth-brand p{color:var(--text-dim);font-size:14.5px;margin-top:10px;line-height:1.5;max-width:320px;}

.auth-tabs{display:flex;gap:4px;background:var(--bg-panel);padding:4px;border-radius:10px;margin-bottom:22px;border:1px solid var(--line);}
.auth-tab{flex:1;text-align:center;padding:9px 0;border-radius:7px;font-size:13.5px;color:var(--text-dim);font-weight:500;transition:.15s;}
.auth-tab.active{background:var(--bg-raised);color:var(--text);}

.field{margin-bottom:14px;}
.field label{display:block;font-size:12.5px;color:var(--text-dim);margin-bottom:7px;}
.field input{
  width:100%;padding:12px 14px;background:var(--bg-panel);
  border:1px solid var(--line);border-radius:8px;color:var(--text);font-size:14.5px;
  transition:.15s;
}
.field input:focus{outline:none;border-color:var(--accent-dim);background:var(--bg-raised);}
.field input::placeholder{color:var(--text-faint);}

.btn-primary{
  width:100%;padding:12.5px 0;background:var(--accent);color:#08110e;
  border-radius:8px;font-weight:600;font-size:14.5px;letter-spacing:0.01em;
  margin-top:6px;transition:.15s;
}
.btn-primary:hover{background:#7bf0d3;}
.btn-primary:disabled{opacity:.5;cursor:default;}

.auth-msg{font-size:13px;padding:10px 12px;border-radius:7px;margin-bottom:14px;display:none;}
.auth-msg.show{display:block;}
.auth-msg.err{background:rgba(230,104,94,0.1);color:var(--danger);border:1px solid rgba(230,104,94,0.25);}
.auth-msg.ok{background:rgba(94,230,196,0.08);color:var(--accent);border:1px solid rgba(94,230,196,0.2);}

/* ---------- top nav (buyer + admin) ---------- */
.topnav{
  border-bottom:1px solid var(--line);
  background:rgba(12,14,16,0.85);backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:20;
}
.topnav .wrap{height:60px;display:flex;align-items:center;justify-content:space-between;}
.tn-brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:15px;}
.tn-brand .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);}
.tn-right{display:flex;align-items:center;gap:14px;}
.tn-balance{
  display:flex;align-items:center;gap:8px;background:var(--bg-panel);
  border:1px solid var(--line);padding:7px 13px;border-radius:8px;font-size:13px;
}
.tn-balance .lbl{color:var(--text-faint);}
.tn-balance .val{font-weight:600;color:var(--accent);}
.tn-logout{
  width:34px;height:34px;border-radius:8px;background:var(--bg-panel);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  color:var(--text-dim);transition:.15s;
}
.tn-logout:hover{color:var(--danger);border-color:rgba(230,104,94,0.3);}

/* ---------- buyer tabs ---------- */
.b-tabs{display:flex;gap:6px;padding:18px 0 0;overflow-x:auto;}
.b-tab{
  padding:9px 16px;border-radius:8px;font-size:13.5px;color:var(--text-dim);
  white-space:nowrap;font-weight:500;transition:.15s;
}
.b-tab.active{background:var(--bg-panel);color:var(--text);border:1px solid var(--line);}

.b-body{padding:22px 0 60px;flex:1;}
.section-title{font-size:19px;font-weight:600;margin-bottom:4px;letter-spacing:-0.01em;}
.section-sub{font-size:13.5px;color:var(--text-dim);margin-bottom:20px;}

/* product grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;}
.pcard{
  background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;display:flex;flex-direction:column;gap:10px;
}
.pcard .ptop{display:flex;align-items:center;justify-content:space-between;}
.pcard .server-tag{
  font-size:11px;padding:4px 9px;border-radius:20px;background:var(--bg-raised);
  color:var(--accent);border:1px solid var(--accent-dim);font-weight:600;letter-spacing:0.02em;
}
.pcard h3{font-size:15px;font-weight:600;}
.pcard .pdesc{font-size:12.5px;color:var(--text-dim);line-height:1.5;min-height:18px;}
.pcard .price{font-size:17px;font-weight:700;color:var(--text);margin-top:2px;}
.pcard .price span{font-size:12px;color:var(--text-faint);font-weight:500;}
.pcard .buy-btn{
  margin-top:4px;padding:9px 0;border-radius:7px;background:var(--bg-raised);
  border:1px solid var(--line);font-size:13px;font-weight:600;transition:.15s;
}
.pcard .buy-btn:hover{border-color:var(--accent-dim);color:var(--accent);}
.pcard .buy-btn:disabled{opacity:.4;cursor:default;}
.empty{color:var(--text-faint);font-size:13.5px;padding:30px 0;text-align:center;}

/* topup */
.topup-box{max-width:480px;}
.topup-opts{display:flex;gap:12px;margin-bottom:20px;}
.topup-opt{
  flex:1;padding:18px 14px;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--bg-panel);text-align:center;transition:.15s;
}
.topup-opt:hover{border-color:var(--accent-dim);background:var(--bg-raised);}
.topup-opt .ic{font-size:22px;margin-bottom:8px;}
.topup-opt .lbl{font-size:13.5px;font-weight:600;}
.topup-opt .sub{font-size:11.5px;color:var(--text-faint);margin-top:2px;}
.topup-note{
  font-size:12.5px;color:var(--text-dim);line-height:1.6;background:var(--bg-panel);
  border:1px solid var(--line);border-radius:8px;padding:14px;margin-top:6px;
}

/* my purchases */
.order-card{
  background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;margin-bottom:12px;
}
.order-card .otop{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.order-card .oname{font-weight:600;font-size:14.5px;}
.order-card .otag{font-size:11px;color:var(--accent);background:var(--bg-raised);padding:3px 9px;border-radius:20px;border:1px solid var(--accent-dim);}
.cred-row{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--bg-raised);border-radius:6px;margin-top:6px;}
.cred-row .k{font-size:11.5px;color:var(--text-faint);}
.cred-row .v{font-size:13px;font-family:'IBM Plex Mono',monospace;color:var(--text);}
.copy-btn{font-size:11px;color:var(--accent);padding:3px 8px;border:1px solid var(--accent-dim);border-radius:5px;}

/* tutorial */
.tut-box{max-width:480px;background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px;}
.tut-box p{font-size:13.5px;color:var(--text-dim);line-height:1.7;margin-bottom:18px;}
.tut-steps{list-style:none;margin-bottom:20px;}
.tut-steps li{
  font-size:13.5px;color:var(--text-dim);padding-left:26px;position:relative;margin-bottom:10px;line-height:1.5;
}
.tut-steps li::before{
  content:attr(data-n);position:absolute;left:0;top:0;
  width:18px;height:18px;border-radius:5px;background:var(--bg-raised);border:1px solid var(--line);
  font-size:10.5px;color:var(--accent);display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;
}
.tut-cta{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#08110e;padding:11px 18px;border-radius:8px;font-weight:600;font-size:13.5px;}

/* modal */
.modal-bg{
  position:fixed;inset:0;background:rgba(6,7,8,0.7);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;z-index:100;padding:20px;
}
.modal-bg.show{display:flex;}
.modal{
  background:var(--bg-panel);border:1px solid var(--line);border-radius:12px;
  width:100%;max-width:380px;padding:24px;
}
.modal h3{font-size:16px;font-weight:600;margin-bottom:8px;}
.modal p{font-size:13.5px;color:var(--text-dim);line-height:1.55;margin-bottom:20px;}
.modal-actions{display:flex;gap:10px;}
.modal-actions button{flex:1;padding:10px 0;border-radius:8px;font-size:13.5px;font-weight:600;}
.modal-btn-no{background:var(--bg-raised);border:1px solid var(--line);color:var(--text);}
.modal-btn-yes{background:var(--danger);color:#fff;}
.modal-btn-yes.accent{background:var(--accent);color:#08110e;}

/* purchase result modal */
.result-box{background:var(--bg-raised);border:1px solid var(--line);border-radius:8px;padding:14px;margin-bottom:10px;}
.result-box .rk{font-size:11.5px;color:var(--text-faint);margin-bottom:3px;}
.result-box .rv{font-size:14px;font-family:'IBM Plex Mono',monospace;color:var(--accent);word-break:break-all;}

/* ---------- admin ---------- */
.a-tabs{display:flex;gap:6px;padding:18px 0 0;overflow-x:auto;}
.a-tab{padding:9px 16px;border-radius:8px;font-size:13.5px;color:var(--text-dim);white-space:nowrap;font-weight:500;}
.a-tab.active{background:var(--bg-panel);color:var(--text);border:1px solid var(--line);}
.admin-panel-badge{
  font-size:11px;background:rgba(230,184,94,0.1);color:var(--warn);
  border:1px solid rgba(230,184,94,0.25);padding:4px 10px;border-radius:20px;font-weight:600;
}

.card{background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:16px;}
.card h3{font-size:14.5px;font-weight:600;margin-bottom:16px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
.form-row.full{grid-template-columns:1fr;}
@media(max-width:560px){.form-row{grid-template-columns:1fr;}}

.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th{text-align:left;color:var(--text-faint);font-weight:500;font-size:11.5px;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;}
td{padding:10px;border-bottom:1px solid var(--line-soft);color:var(--text-dim);white-space:nowrap;}
td.strong{color:var(--text);font-weight:500;}
.badge{font-size:10.5px;padding:3px 8px;border-radius:20px;background:var(--bg-raised);border:1px solid var(--line);}
.badge.admin{color:var(--warn);border-color:rgba(230,184,94,0.3);}
.row-del{color:var(--danger);font-size:12px;}
.row-btn{color:var(--accent);font-size:12px;}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px;}
.stat-box{background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;}
.stat-box .sv{font-size:26px;font-weight:700;color:var(--accent);}
.stat-box .sl{font-size:12px;color:var(--text-dim);margin-top:4px;}

.toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--bg-raised);border:1px solid var(--line);color:var(--text);
  padding:11px 18px;border-radius:8px;font-size:13px;z-index:200;opacity:0;
  transition:.2s;pointer-events:none;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

.loading-gate{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:999;}
.loading-gate .spin{width:26px;height:26px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:sp .7s linear infinite;}
@keyframes sp{to{transform:rotate(360deg);}}

.small-note{font-size:12px;color:var(--text-faint);margin-top:6px;}
.select-wrap select{
  width:100%;padding:12px 14px;background:var(--bg-panel);border:1px solid var(--line);
  border-radius:8px;color:var(--text);font-size:14.5px;
}