:root{
  --bg: #0A0E16;
  --bg-soft: #0D121C;
  --surface: #131926;
  --surface-2: #1A2233;
  --border: #232C3D;
  --border-soft: #1B2331;
  --text: #EDF1F7;
  --text-soft: #9AA5B8;
  --text-faint: #5D6B82;
  --accent: #9B6CFF;
  --accent-soft: rgba(155,108,255,0.12);
  --meter: #FFB454;
  --status: #4ADE9C;
  --danger: #FF7A7A;
  --radius: 14px;
  --radius-lg: 20px;
  --maxw: 1180px;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Manrope', sans-serif; -webkit-font-smoothing:antialiased; line-height:1.5;
}
h1,h2,h3,.mono{font-family:'JetBrains Mono', monospace;}
a{color:inherit; text-decoration:none;}
::selection{background:var(--accent); color:#0A0E16;}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}

/* ---------- Top nav ---------- */
header.topnav{
  position:sticky; top:0; z-index:50;
  background:rgba(10,14,22,0.85); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-soft);
}
nav{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:var(--maxw); margin:0 auto;}
.logo{display:flex; align-items:center; gap:10px; font-family:'JetBrains Mono', monospace; font-weight:700; font-size:16px;}
.logo .dot{width:9px; height:9px; border-radius:50%; background:var(--status); box-shadow:0 0 10px var(--status);}
.logo span.dim{color:var(--text-soft); font-weight:400;}
.tabs{display:flex; gap:6px; flex-wrap:wrap;}
.tabs a{
  padding:9px 14px; border-radius:9px; font-size:14px; color:var(--text-soft); font-weight:600;
}
.tabs a:hover{color:var(--text); background:var(--surface);}
.tabs a.active{color:var(--text); background:var(--accent-soft); box-shadow:inset 0 0 0 1px rgba(155,108,255,0.3);}
.nav-right{display:flex; align-items:center; gap:16px;}
.balance-pill{
  display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--text-soft);
  background:var(--surface); border:1px solid var(--border); padding:8px 14px; border-radius:100px;
}
.balance-pill b{color:var(--meter); font-family:'JetBrains Mono', monospace;}
.balance-pill:hover{border-color:var(--accent); color:var(--text);}
.logout-link{font-size:13.5px; color:var(--text-faint);}
.logout-link:hover{color:var(--text-soft);}

@media (max-width:900px){
  .tabs{display:none;}
}

/* ---------- Layout ---------- */
main.page{padding:44px 0 80px;}
.page-head{margin-bottom:32px;}
.kicker{
  font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--meter);
  text-transform:uppercase; letter-spacing:0.08em; display:block; margin-bottom:8px;
}
h1.page-title{font-size:28px; font-weight:800; margin:0 0 6px; letter-spacing:-0.01em;}
.page-sub{color:var(--text-soft); font-size:15px; margin:0;}

/* ---------- Cards / grid ---------- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media (max-width:860px){ .grid-2, .grid-3{grid-template-columns:1fr;} }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:10px; font-size:14.5px; font-weight:600; cursor:pointer;
  border:1px solid transparent; transition:transform .15s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--accent); color:#0A0E16;}
.btn-primary:hover{transform:translateY(-1px); background:#B18FFF;}
.btn-primary:disabled{opacity:0.5; cursor:not-allowed; transform:none;}
.btn-ghost{color:var(--text-soft); border-color:var(--border); background:transparent;}
.btn-ghost:hover{color:var(--text); border-color:var(--text-faint);}
.btn-danger{background:transparent; color:var(--danger); border-color:rgba(255,122,122,0.35);}
.btn-danger:hover{background:rgba(255,122,122,0.08);}
.btn-block{width:100%;}
.btn-sm{padding:8px 14px; font-size:13px;}

/* ---------- Forms ---------- */
label{display:block; font-size:13px; color:var(--text-soft); margin-bottom:6px; font-weight:600;}
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea{
  width:100%; background:var(--bg-soft); border:1px solid var(--border); color:var(--text);
  padding:12px 14px; border-radius:10px; font-family:'Manrope', sans-serif; font-size:14.5px;
}
input:focus, select:focus, textarea:focus{border-color:var(--accent);}
.field{margin-bottom:18px;}
.field-hint{font-size:12px; color:var(--text-faint); margin-top:6px;}
.field-error{font-size:12.5px; color:var(--danger); margin-top:6px;}

/* ---------- Status / badges ---------- */
.badge{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; padding:5px 11px; border-radius:100px; border:1px solid var(--border); color:var(--text-soft);}
.badge-dot{width:7px; height:7px; border-radius:50%;}
.badge.online .badge-dot{background:var(--status); box-shadow:0 0 8px var(--status);}
.badge.online{color:var(--status); border-color:rgba(74,222,156,0.3);}
.badge.offline .badge-dot{background:var(--danger);}
.badge.offline{color:var(--danger); border-color:rgba(255,122,122,0.3);}
.badge.pending .badge-dot{background:var(--meter);}
.badge.pending{color:var(--meter); border-color:rgba(255,180,84,0.3);}

/* ---------- Alerts / flash ---------- */
.alert{padding:14px 18px; border-radius:12px; font-size:14px; margin-bottom:18px; border:1px solid transparent;}
.alert-success{background:rgba(74,222,156,0.08); border-color:rgba(74,222,156,0.25); color:var(--status);}
.alert-error{background:rgba(255,122,122,0.08); border-color:rgba(255,122,122,0.25); color:var(--danger);}
.alert-warn{background:rgba(255,180,84,0.08); border-color:rgba(255,180,84,0.25); color:var(--meter);}
.alert-info{background:var(--accent-soft); border-color:rgba(155,108,255,0.25); color:var(--accent);}

/* ---------- Tables ---------- */
table{width:100%; border-collapse:collapse; font-size:14px;}
th{text-align:left; color:var(--text-faint); font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:0.04em; padding:10px 12px; border-bottom:1px solid var(--border);}
td{padding:13px 12px; border-bottom:1px solid var(--border-soft); color:var(--text-soft);}
tr:last-child td{border-bottom:none;}
td b, td strong{color:var(--text);}

/* ---------- Auth pages ---------- */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.auth-card{width:100%; max-width:420px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:36px;}
.auth-card h1{font-size:22px; margin:0 0 6px;}
.auth-card p.sub{color:var(--text-soft); font-size:14px; margin:0 0 26px;}
.auth-links{display:flex; justify-content:space-between; font-size:13px; color:var(--text-faint); margin-top:16px;}
.auth-links a:hover{color:var(--text-soft);}

/* ---------- Dashboard specific ---------- */
.vm-card{position:relative; overflow:hidden;}
.vm-card::before{content:""; position:absolute; top:0; right:0; width:220px; height:220px; background:radial-gradient(circle, rgba(155,108,255,0.12), transparent 70%);}
.vm-empty{text-align:center; padding:50px 20px;}
.vm-empty .icon{width:52px; height:52px; border-radius:14px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; margin:0 auto 18px;}
.connect-row{display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--border-soft); font-size:14px;}
.connect-row:last-child{border-bottom:none;}
.connect-row .k{color:var(--text-faint);}
.connect-row .v{font-family:'JetBrains Mono', monospace; color:var(--text);}
.copy-btn{background:var(--surface-2); border:1px solid var(--border); color:var(--text-soft); padding:5px 10px; border-radius:7px; font-size:12px; cursor:pointer;}
.copy-btn:hover{color:var(--text); border-color:var(--text-faint);}

.timer-box{display:flex; align-items:center; gap:10px; margin-bottom:22px;}
.timer-box .value{font-family:'JetBrains Mono', monospace; font-size:26px; font-weight:700; color:var(--meter);}
.timer-box .label{font-size:12.5px; color:var(--text-faint);}

.progress{height:6px; background:var(--surface-2); border-radius:100px; overflow:hidden; margin:6px 0 20px;}
.progress .bar{height:100%; background:linear-gradient(90deg, var(--accent), var(--meter));}

/* ---------- Tariff pick cards (order page) ---------- */
.tariff-pick{border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px; cursor:pointer; background:var(--surface); transition:border-color .15s ease;}
.tariff-pick.selected{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent);}
.tariff-pick h3{margin:0 0 4px; font-size:17px;}
.tariff-pick .price{font-family:'JetBrains Mono', monospace; color:var(--meter); font-size:20px; font-weight:800; margin:10px 0;}
.tariff-pick ul{list-style:none; margin:0; padding:0; font-size:13px; color:var(--text-soft);}
.tariff-pick ul li{padding:3px 0;}

.location-pick{border:1px solid var(--border); border-radius:12px; padding:14px 16px; cursor:pointer; background:var(--surface-2); transition:border-color .15s ease; display:block;}
.location-pick.selected{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent);}

.summary-row{display:flex; justify-content:space-between; padding:8px 0; font-size:14px; color:var(--text-soft);}
.summary-row.total{border-top:1px solid var(--border); margin-top:8px; padding-top:14px; font-size:16px; color:var(--text); font-weight:700;}
.summary-row.total b{color:var(--meter);}

footer.panel-footer{border-top:1px solid var(--border-soft); padding:28px 0; text-align:center; color:var(--text-faint); font-size:12.5px;}

/* ---------- Admin ---------- */
.subnav{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:28px; padding-bottom:16px; border-bottom:1px solid var(--border-soft);}
.subnav a{padding:8px 13px; border-radius:8px; font-size:13.5px; color:var(--text-soft); font-weight:600;}
.subnav a:hover{color:var(--text); background:var(--surface);}
.subnav a.active{color:var(--text); background:var(--accent-soft); box-shadow:inset 0 0 0 1px rgba(155,108,255,0.3);}

.stat-card .kicker{margin-bottom:10px;}
.stat-card .num{font-size:28px; font-weight:800; font-family:'JetBrains Mono', monospace;}

.row-actions{display:flex; gap:8px; flex-wrap:wrap;}
.inline-form{display:inline;}

.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:760px){ .form-grid{grid-template-columns:1fr;} }

.mini-table td, .mini-table th{padding:9px 10px; font-size:13px;}
.text-danger{color:var(--danger);}
.text-status{color:var(--status);}
.text-meter{color:var(--meter);}
.divider{border-top:1px solid var(--border-soft); margin:22px 0;}
.section-title{font-size:15px; font-weight:700; margin:0 0 14px;}
.filter-bar{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:20px;}
.filter-bar .field{margin:0;}
.pagination{display:flex; gap:8px; margin-top:18px;}
.pagination a{padding:7px 12px; border-radius:8px; border:1px solid var(--border); font-size:13px; color:var(--text-soft);}
.pagination a.active{color:var(--text); border-color:var(--accent);}

/* ---------- Confirm-delete modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(5,7,12,0.72); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; z-index:200; padding:20px;
}
.modal-overlay.open{display:flex;}
.modal-box{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:28px; max-width:420px; width:100%; box-shadow:0 30px 80px -20px rgba(0,0,0,0.65);
  animation:modalIn .18s ease;
}
@keyframes modalIn{from{opacity:0; transform:translateY(8px) scale(0.98);} to{opacity:1; transform:none;}}
.modal-box h3{margin:0 0 10px; font-size:18px; display:flex; align-items:center; gap:10px;}
.modal-box h3 .warn-icon{color:var(--danger);}
.modal-message{color:var(--text-soft); font-size:14px; margin:0 0 20px; line-height:1.55;}
.modal-code-box{
  display:flex; align-items:center; justify-content:space-between; background:var(--bg-soft);
  border:1px dashed var(--border); border-radius:10px; padding:12px 16px; margin-bottom:14px;
}
.modal-code-label{font-size:12.5px; color:var(--text-faint);}
.modal-code{font-family:'JetBrains Mono', monospace; font-size:20px; font-weight:800; color:var(--danger); letter-spacing:0.15em; user-select:none;}
.modal-code-input{
  width:100%; text-align:center; font-family:'JetBrains Mono', monospace; font-size:22px;
  letter-spacing:0.4em; margin-bottom:18px; padding:12px;
}
.modal-actions{display:flex; gap:10px; justify-content:flex-end;}
@media (prefers-reduced-motion: reduce){ .modal-box{animation:none;} }