:root{
  --bg:#0B0F17;
  --card:#151B26;
  --card-2:#1A2130;
  --primary:#3B82F6;
  --primary-dim:rgba(59,130,246,.14);
  --success:#22C55E;
  --success-dim:rgba(34,197,94,.14);
  --danger:#EF4444;
  --danger-dim:rgba(239,68,68,.14);
  --amber:#F59E0B;
  --text:#E7EAF0;
  --text-muted:#7C8798;
  --border:rgba(255,255,255,.07);
  --border-strong:rgba(255,255,255,.12);
}
*{box-sizing:border-box}
body{
  margin:0;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(59,130,246,.10), transparent),
    var(--bg);
  color:var(--text);
  font-family:'Vazirmatn', -apple-system, sans-serif;
  font-size:14px;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

.layout{display:flex; min-height:100vh}

/* --- Sidebar --- */
.sidebar{
  width:250px; flex-shrink:0;
  background:var(--card);
  border-left:1px solid var(--border);
  display:flex; flex-direction:column;
  padding:22px 16px;
}
.brand{display:flex; align-items:center; gap:10px; padding:0 6px 22px; margin-bottom:6px; border-bottom:1px solid var(--border)}
.brand-icon{
  width:38px; height:38px; border-radius:11px;
  background:linear-gradient(135deg,#3B82F6,#2563EB);
  display:flex; align-items:center; justify-content:center;
  font-size:19px; color:#fff; flex-shrink:0;
}
.brand-name{font-size:15px; font-weight:700}
.brand-tag{font-size:11px; color:var(--text-muted)}

.nav{display:flex; flex-direction:column; gap:2px; margin-top:16px; flex:1}
.nav a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px;
  color:var(--text-muted); font-size:13.5px; font-weight:500;
  transition:background .15s, color .15s;
}
.nav a i{font-size:18px; width:20px; text-align:center}
.nav a:hover{background:var(--card-2); color:var(--text)}
.nav a.active{background:var(--primary-dim); color:var(--primary)}

.sidebar-footer{
  margin-top:16px; padding:14px; border-radius:12px;
  background:linear-gradient(135deg, rgba(59,130,246,.12), rgba(59,130,246,.02));
  border:1px solid var(--border);
  display:flex; align-items:center; gap:10px;
}
.sidebar-footer i{color:var(--amber); font-size:20px}
.sidebar-footer .t1{font-size:12.5px; font-weight:600}
.sidebar-footer .t2{font-size:11px; color:var(--text-muted)}

/* --- Main --- */
.main{flex:1; min-width:0; padding:20px 28px 40px; display:flex; flex-direction:column; gap:20px}

.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px}
.search{
  flex:1; max-width:380px; display:flex; align-items:center; gap:8px;
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  padding:9px 14px; color:var(--text-muted); font-size:13px;
}
.search i{font-size:16px}
.search kbd{margin-right:auto; font-size:11px; border:1px solid var(--border-strong); border-radius:5px; padding:1px 6px; color:var(--text-muted)}

.topbar-right{display:flex; align-items:center; gap:14px}
.bell{position:relative; width:38px; height:38px; border-radius:10px; background:var(--card); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer}
.bell i{font-size:18px}
.bell .dot{position:absolute; top:8px; left:9px; width:7px; height:7px; border-radius:50%; background:var(--danger); box-shadow:0 0 0 2px var(--card)}

.admin{display:flex; align-items:center; gap:10px; padding:6px 8px 6px 12px; border-radius:12px; background:var(--card); border:1px solid var(--border); cursor:pointer}
.admin-avatar{width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,#3B82F6,#8B5CF6); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px}
.admin-name{font-size:13px; font-weight:600; line-height:1.3}
.admin-role{font-size:11px; color:var(--text-muted)}

.hero{display:flex; align-items:center; justify-content:space-between; gap:16px}
.hero h1{font-size:22px; font-weight:700; margin:0 0 6px}
.hero p{margin:0; color:var(--text-muted); font-size:13.5px}
.hero-badge{
  display:flex; align-items:center; gap:8px;
  background:var(--primary); color:#fff; font-weight:600; font-size:13px;
  padding:11px 20px; border-radius:11px; box-shadow:0 8px 20px -8px rgba(59,130,246,.6);
  flex-shrink:0;
}

/* --- Cards base --- */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:20px;
  transition:transform .18s ease, border-color .18s ease;
}
.card:hover{border-color:var(--border-strong)}

/* --- Stat cards --- */
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.stat-card .row-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.icon-badge{width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px}
.stat-value{font-size:26px; font-weight:700}
.stat-label{font-size:12.5px; color:var(--text-muted); margin-bottom:6px}
.stat-growth{font-size:11.5px; color:var(--success); background:var(--success-dim); padding:3px 8px; border-radius:7px; display:inline-flex; align-items:center; gap:3px}

.server-card .flag{width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; background:var(--card-2)}
.server-name{font-size:13.5px; font-weight:600}
.status-pill{display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--success)}
.status-pill.offline{color:var(--danger)}
.status-pill.unknown{color:var(--amber)}
.status-pill .d{width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 6px currentColor}
.server-ip{font-size:11.5px; color:var(--text-muted); margin:8px 0 10px}
.metric-row{display:flex; align-items:center; gap:8px; margin-bottom:7px}
.metric-label{font-size:11px; color:var(--text-muted); width:34px}
.bar{flex:1; height:5px; border-radius:3px; background:var(--card-2); overflow:hidden}
.bar > span{display:block; height:100%; border-radius:3px}
.metric-val{font-size:11px; color:var(--text-muted); width:34px; text-align:left}

.traffic-card .stat-value{margin-bottom:6px}

/* --- Tunnel + chart row --- */
.mid-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:16px; align-items:stretch}

.card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px}
.card-title{font-size:14.5px; font-weight:700}
.card-sub{font-size:11.5px; color:var(--text-muted); margin-top:2px}

.tunnel-visual{display:flex; align-items:center; justify-content:space-between; padding:10px 6px 22px}
.tunnel-node{display:flex; flex-direction:column; align-items:center; gap:8px; width:110px}
.tunnel-flag{width:56px; height:56px; border-radius:50%; background:var(--card-2); border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; font-size:26px}
.tunnel-node .n{font-size:13px; font-weight:600}
.tunnel-node .s{font-size:11px; color:var(--text-muted)}

.tunnel-mid{flex:1; display:flex; flex-direction:column; align-items:center; gap:10px; position:relative}
.tunnel-line{width:100%; height:2px; position:relative; background:repeating-linear-gradient(90deg, var(--primary) 0 8px, transparent 8px 16px); border-radius:2px}
.tunnel-shield{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%;
  background:var(--success-dim); border:1px solid rgba(34,197,94,.35);
  display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--success);
}
.tunnel-label{font-size:12.5px; font-weight:600; margin-top:20px}
.tunnel-status{font-size:11px; color:var(--success); display:flex; align-items:center; gap:5px}
.tunnel-status .d{width:6px; height:6px; border-radius:50%; background:var(--success)}

.tunnel-meta{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-muted); padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--border)}
.tunnel-meta .d{width:6px; height:6px; border-radius:50%; background:var(--success)}

.btn-row{display:flex; gap:10px; flex-wrap:wrap}
.btn{
  flex:1; min-width:110px; padding:10px 14px; border-radius:10px; border:1px solid var(--border-strong);
  background:var(--card-2); color:var(--text); font-size:12.5px; font-weight:600; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px;
  transition:background .15s, transform .1s;
}
.btn:hover{background:#232b3d}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--primary); border-color:var(--primary); color:#fff}
.btn-primary:hover{background:#2f6fe0}

.select{font-size:12px; color:var(--text-muted); background:var(--card-2); border:1px solid var(--border); border-radius:8px; padding:6px 10px; display:flex; align-items:center; gap:6px; cursor:pointer}

.chart-wrap{height:150px}
.mini-stats{display:flex; gap:10px; margin-top:16px}
.mini-stat{flex:1; background:var(--card-2); border-radius:10px; padding:10px 12px; display:flex; align-items:center; gap:8px}
.mini-stat i{font-size:16px}
.mini-stat .v{font-size:13px; font-weight:700}
.mini-stat .l{font-size:10.5px; color:var(--text-muted)}

/* --- Bottom grid --- */
.bottom-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:16px; align-items:start}

table{width:100%; border-collapse:collapse}
th,td{text-align:right; padding:11px 8px; font-size:12.5px; border-bottom:1px solid var(--border)}
th{color:var(--text-muted); font-weight:600; font-size:11.5px}
tr:last-child td{border-bottom:none}
.user-cell{display:flex; align-items:center; gap:8px}
.user-avatar{width:28px; height:28px; border-radius:8px; background:var(--card-2); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--primary)}
.mail{color:var(--text-muted); font-size:11.5px}
.badge{font-size:10.5px; padding:3px 9px; border-radius:7px; font-weight:600}
.badge-active{background:var(--success-dim); color:var(--success)}
.badge-disabled, .badge-blocked{background:var(--danger-dim); color:var(--danger)}
.badge-expired{background:rgba(245,158,11,.14); color:var(--amber)}
.badge-standby{background:var(--primary-dim); color:var(--primary)}
.plan-badge{font-size:11px; color:var(--text-muted)}
.row-actions{display:flex; gap:6px; justify-content:flex-end}
.row-actions i{width:26px; height:26px; border-radius:7px; background:var(--card-2); display:flex; align-items:center; justify-content:center; font-size:13px; cursor:pointer; color:var(--text-muted)}
.row-actions i:hover{color:var(--text)}

.link-btn{font-size:12px; color:var(--primary); font-weight:600; cursor:pointer}

.activity-list{display:flex; flex-direction:column}
.activity-item{display:flex; gap:10px; padding:11px 0; border-bottom:1px solid var(--border)}
.activity-item:last-child{border-bottom:none; padding-bottom:0}
.act-dot{width:30px; height:30px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:14px}
.act-text{font-size:12.5px; font-weight:500}
.act-time{font-size:11px; color:var(--text-muted); margin-top:2px}

/* --- Forms (login + user creation) --- */
.login-body{display:flex; align-items:center; justify-content:center; height:100vh; background:var(--bg)}
.login-card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:32px; width:340px; display:flex; flex-direction:column; gap:12px}
.login-card h1{font-size:18px; text-align:center; margin:0 0 8px}
.login-card input, .form input, .form select{
  padding:10px 12px; background:var(--card-2); border:1px solid var(--border); border-radius:9px; color:var(--text); font-family:inherit; font-size:13px;
}
.login-card button{padding:10px; background:var(--primary); color:#fff; border:none; border-radius:9px; cursor:pointer; font-weight:600}
.error{color:var(--danger); font-size:12.5px; text-align:center}

.form{display:flex; flex-direction:column; gap:10px; max-width:420px; margin-bottom:24px; background:var(--card); border:1px solid var(--border); border-radius:16px; padding:20px}
.form label{font-size:12px; color:var(--text-muted)}
.form .field{display:flex; flex-direction:column; gap:4px}
.form button{align-self:flex-start; padding:9px 18px; background:var(--primary); color:#fff; border:none; border-radius:9px; cursor:pointer; font-weight:600; font-size:12.5px}

.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--card); border:1px solid var(--border-strong); padding:12px 22px; border-radius:11px; font-size:12.5px; opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; display:flex; align-items:center; gap:8px; box-shadow:0 10px 30px rgba(0,0,0,.4); z-index:50}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-6px)}
.toast i{color:var(--success)}

@media (max-width:1100px){
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .mid-grid, .bottom-grid{grid-template-columns:1fr}
}