/* PingStarVPN management panel styles.
   provenance: origin:starping author:kooshaKZ sig:3d98bb9343252189 */
:root{
  --bg:#0f1220; --panel:#171a2b; --panel2:#1e2236; --line:#2a2f49;
  --text:#e8eaf2; --muted:#9aa0bd; --brand:#6c7bff; --ok:#36d399; --warn:#fbbd23; --bad:#f87272;
}
*{box-sizing:border-box}
body{margin:0;font-family:Vazirmatn,Tahoma,sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
.layout{display:flex;min-height:100vh}
.sidebar{width:240px;background:var(--panel);border-left:1px solid var(--line);
  display:flex;flex-direction:column;padding:18px 12px;position:sticky;top:0;height:100vh}
.brand{font-size:20px;font-weight:700;margin-bottom:18px;text-align:center}
.sidebar nav{display:flex;flex-direction:column;gap:4px;flex:1}
.sidebar nav a{padding:10px 14px;border-radius:10px;color:var(--muted)}
.sidebar nav a:hover{background:var(--panel2);color:var(--text)}
.logout{padding:10px 14px;border-radius:10px;color:var(--bad);text-align:center}
.content{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:center;
  padding:16px 24px;border-bottom:1px solid var(--line);background:var(--panel)}
.topbar h1{font-size:18px;margin:0}
.who{color:var(--muted);font-size:13px}
.page{padding:24px;min-width:0}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-bottom:24px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px}
.card .num{font-size:24px;font-weight:700;margin-top:6px}
.card .lbl{color:var(--muted);font-size:13px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}
.box{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:18px}
.box h2{margin:0 0 14px;font-size:15px}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:right}
th{color:var(--muted);font-weight:600}
.badge{padding:2px 10px;border-radius:999px;font-size:12px}
.b-ok{background:rgba(54,211,153,.15);color:var(--ok)}
.b-warn{background:rgba(251,189,35,.15);color:var(--warn)}
.b-bad{background:rgba(248,114,114,.15);color:var(--bad)}
input,select,textarea{width:100%;padding:9px 11px;background:var(--panel2);border:1px solid var(--line);
  border-radius:9px;color:var(--text);font-family:inherit;margin-bottom:10px}
label{font-size:13px;color:var(--muted);display:block;margin-bottom:4px}
.btn{display:inline-block;padding:8px 16px;border-radius:9px;border:none;cursor:pointer;
  background:var(--brand);color:#fff;font-family:inherit;font-size:13px}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn.ok{background:var(--ok);color:#08210f}
.btn.bad{background:var(--bad);color:#2a0a0a}
.btn.sm{padding:5px 10px;font-size:12px}
form.inline{display:inline}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.login-wrap{display:flex;align-items:center;justify-content:center;height:100vh}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:32px;width:340px}
.login-card h1{text-align:center;font-size:20px;margin:0 0 22px}
.err{background:rgba(248,114,114,.15);color:var(--bad);padding:9px;border-radius:9px;
  font-size:13px;margin-bottom:12px;text-align:center}
.muted{color:var(--muted)}
.login-foot{color:var(--muted);font-size:10px;text-align:center;margin:16px 0 0;direction:ltr}
.app-foot{color:var(--muted);font-size:10px;text-align:center;padding:10px 0 18px;direction:ltr}

/* ── Scrollable data tables: horizontal + vertical scroll, sticky header,
      wide tables never clip or overflow the page. All list views wrap their
      table in .table-wrap. ──────────────────────────────────────────────── */
.table-wrap{overflow:auto;max-height:75vh;border-radius:inherit}
.table-wrap table{min-width:720px;width:100%}
.table-wrap th{position:sticky;top:0;background:var(--panel);z-index:1}
.table-wrap td .row{flex-wrap:nowrap}
.ops{white-space:nowrap}
.ops form{margin:0}

/* ── Responsive: narrow screens stack the sidebar above the content so the
      table scroll area keeps its full width. ────────────────────────────── */
@media(max-width:900px){
  .layout{flex-direction:column}
  .sidebar{position:static;width:100%;height:auto;flex-direction:row;flex-wrap:wrap;
    align-items:center;gap:6px}
  .brand{margin-bottom:0;text-align:right}
  .sidebar nav{flex-direction:row;flex-wrap:wrap}
  .logout{margin-inline-start:auto}
  .page{padding:14px}
  .topbar{flex-direction:column;align-items:flex-start;gap:4px}
}

/* ── 2026 admin redesign ─────────────────────────────────────────────── */
:root{
  --bg:#070b12;--panel:#0d1420;--panel2:#121c2a;--line:#223044;
  --text:#eef4fb;--muted:#8ea0b7;--brand:#2dd4bf;--ok:#34d399;
  --warn:#fbbf24;--bad:#fb7185;
}
body{background:radial-gradient(circle at 72% -18%,rgba(45,212,191,.09),transparent 34%),var(--bg)}
.sidebar{width:270px;padding:22px 16px 16px;background:rgba(10,16,26,.96);border-left:1px solid rgba(148,163,184,.12);backdrop-filter:blur(18px)}
.brand{display:flex;align-items:center;gap:12px;margin:0;padding:0 8px 22px;text-align:right}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:14px;color:#04110f;font-size:20px;font-weight:900;background:linear-gradient(145deg,#5eead4,#14b8a6);box-shadow:0 10px 30px rgba(20,184,166,.24)}
.admin-brand{min-height:78px;gap:10px}.brand-lockup{display:block;width:178px;max-width:100%;height:70px;object-fit:contain;object-position:center}.brand-copy{display:none}.topbar-brand-icon{display:none;width:38px;height:38px;border-radius:12px;filter:drop-shadow(0 8px 16px rgba(124,92,255,.28))}
.brand>span:last-child{display:flex;flex-direction:column}.brand strong{font-size:17px}.brand small{color:var(--muted);font-size:9px;letter-spacing:1.2px;direction:ltr}
.sidebar-nav{gap:3px}.nav-label{margin:16px 13px 6px;color:#60738b;font-size:10px;font-weight:700}
.sidebar-nav a{position:relative;min-height:41px;padding:9px 12px;border:1px solid transparent;border-radius:12px;color:#99abc0;font-size:13px;transition:.18s ease}
.sidebar-nav a:hover{color:var(--text);background:rgba(255,255,255,.035)}
.sidebar-nav a.active{color:#dffff9;border-color:rgba(45,212,191,.18);background:linear-gradient(90deg,rgba(45,212,191,.14),rgba(45,212,191,.035))}
.sidebar-nav a.active:before{content:"";position:absolute;right:-17px;width:3px;height:22px;border-radius:3px 0 0 3px;background:var(--brand);box-shadow:0 0 16px var(--brand)}
.sidebar-foot{padding-top:16px;border-top:1px solid rgba(148,163,184,.12)}
.system-state{display:flex;align-items:center;gap:8px;padding:8px 10px;color:var(--muted);font-size:11px}.system-state i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok)}
.logout{display:flex;justify-content:space-between;padding:9px 11px;color:#fda4af;font-size:12px}.logout:hover{background:rgba(251,113,133,.08)}
.topbar{position:sticky;top:0;z-index:20;min-height:76px;padding:12px 28px;background:rgba(7,11,18,.84);border-bottom:1px solid rgba(148,163,184,.12);backdrop-filter:blur(16px)}
.topbar-title{display:flex;align-items:center;gap:12px}.eyebrow{display:block;color:var(--brand);font-size:9px;font-weight:800;letter-spacing:1px;direction:ltr}.topbar h1{font-size:19px}
.menu-toggle{display:none;width:38px;height:38px;border:1px solid var(--line);border-radius:11px;color:var(--text);background:var(--panel);cursor:pointer}
.who{display:flex;align-items:center;gap:10px;color:var(--text)}.who .avatar{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(96,165,250,.22);border-radius:12px;color:#bfdbfe;font-weight:800;background:rgba(96,165,250,.1)}
.who>span:last-child{display:flex;flex-direction:column}.who strong{font-size:12px}.who small{color:var(--muted);font-size:10px;direction:ltr;text-align:right}
.page{width:100%;max-width:1680px;margin:0 auto;padding:28px}.sidebar-scrim{display:none}
.flash{display:flex;align-items:center;gap:10px;margin-bottom:18px;padding:12px 15px;border:1px solid;border-radius:13px;font-size:13px}.flash b{display:grid;place-items:center;width:23px;height:23px;border-radius:50%}.flash.success{color:#a7f3d0;border-color:rgba(52,211,153,.25);background:rgba(52,211,153,.08)}.flash.danger{color:#fecdd3;border-color:rgba(251,113,133,.25);background:rgba(251,113,133,.08)}
.cards{grid-template-columns:repeat(4,minmax(170px,1fr));gap:14px}.card,.box,.table-card{background:linear-gradient(145deg,rgba(18,28,42,.92),rgba(13,20,32,.96));border:1px solid rgba(148,163,184,.12);border-radius:18px;box-shadow:0 10px 35px rgba(0,0,0,.11)}
.card{position:relative;min-height:116px;padding:18px;overflow:hidden}.card:after{content:"";position:absolute;left:-25px;bottom:-35px;width:90px;height:90px;border-radius:50%;background:var(--accent,var(--brand));opacity:.07}.card .lbl{display:flex;align-items:center;justify-content:space-between}.card .lbl i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:var(--accent,var(--brand));background:rgba(255,255,255,.04);font-style:normal}.card .num{margin-top:12px;font-size:25px;font-weight:800}
.card.blue{--accent:#60a5fa}.card.violet{--accent:#a78bfa}.card.green{--accent:#34d399}.card.amber{--accent:#fbbf24}.card.teal{--accent:#2dd4bf}.card.cyan{--accent:#22d3ee}.card.indigo{--accent:#818cf8}.card.rose{--accent:#fb7185}
.box{padding:18px}th,td{padding:12px 10px;border-bottom-color:rgba(148,163,184,.11)}th{color:#7f91a9;font-size:10px}tbody tr:hover{background:rgba(255,255,255,.018)}
input,select,textarea{min-height:42px;background:var(--panel2);border-color:var(--line);border-radius:11px;outline:none}input:focus,select:focus,textarea:focus{border-color:rgba(45,212,191,.6);box-shadow:0 0 0 3px rgba(45,212,191,.08)}
.btn,.act-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:7px 14px;border-radius:10px;background:var(--brand);font-size:11px;font-weight:700;transition:.16s ease}.btn:hover,.act-btn:hover{transform:translateY(-1px);filter:brightness(1.07)}
.login-wrap{min-height:100vh;height:auto;padding:24px;background:radial-gradient(circle at 50% 20%,rgba(45,212,191,.12),transparent 35%)}.login-card{width:min(400px,100%);padding:30px;border-radius:22px;background:rgba(13,20,32,.95);box-shadow:0 24px 70px rgba(0,0,0,.35)}
.login-brand{display:flex;flex-direction:column;align-items:center;margin-bottom:26px;text-align:center}.login-brand .brand-mark{margin-bottom:12px}.login-brand h1{margin:0}.login-brand p{margin:5px 0 0;color:var(--muted);font-size:11px}
.login-brand-logo{display:block;width:210px;max-width:88%;height:86px;object-fit:contain;margin-bottom:10px;filter:drop-shadow(0 12px 26px rgba(124,92,255,.3))}
@media(max-width:1200px){.cards{grid-template-columns:repeat(2,minmax(170px,1fr))}}
@media(max-width:900px){.layout{flex-direction:row}.sidebar{position:fixed;right:0;top:0;width:270px;height:100vh;transform:translateX(105%);transition:transform .22s ease}.nav-open .sidebar{transform:translateX(0)}.nav-open .sidebar-scrim{display:block;position:fixed;inset:0;z-index:25;border:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px)}.menu-toggle{display:block}.topbar{padding:10px 16px}.page{padding:18px 14px}}
@media(max-width:900px){.topbar-brand-icon{display:block}.admin-brand .brand-lockup{width:164px}}
@media(max-width:560px){.cards{grid-template-columns:1fr}.who>span:last-child{display:none}.topbar h1{font-size:16px}}

/* ── Mobile-first hardening ─────────────────────────────────────────── */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden}
img,svg,video,canvas{max-width:100%;height:auto}

/* Compact admin controls shared by Plans, Servers, Orders and Subscriptions. */
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:2px 0 14px}.section-head h3{margin:0 0 4px;font-size:14px}.section-head p{margin:0;font-size:12px;line-height:1.8}.selection-count{flex:0 0 auto;padding:5px 10px;border:1px solid rgba(45,212,191,.25);border-radius:999px;color:#99f6e4;background:rgba(45,212,191,.07);font-size:11px}
.endpoint-groups{display:grid;gap:12px}.endpoint-group{padding:12px;border:1px solid rgba(148,163,184,.13);border-radius:14px;background:rgba(5,10,18,.32)}.endpoint-group>header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.endpoint-group>header div{display:flex;flex-direction:column}.endpoint-group>header strong{font-size:13px}.endpoint-group>header small{color:var(--muted);font-size:10px}
.protocol-group+.protocol-group{margin-top:10px}.protocol-heading{display:block;margin:0 2px 6px;color:#7dd3fc;font-size:9px;font-weight:800;letter-spacing:.7px;direction:ltr;text-align:right}
.endpoint-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}.endpoint-card{position:relative;display:flex;align-items:flex-start;gap:10px;min-width:0;margin:0;padding:10px;border:1px solid rgba(148,163,184,.13);border-radius:11px;background:#0d1623;color:var(--text);cursor:pointer;transition:.15s ease}.endpoint-card:hover{border-color:rgba(45,212,191,.28);background:#101b2a}.endpoint-card:has(.endpoint-check:checked){border-color:rgba(45,212,191,.58);background:rgba(20,184,166,.08)}.endpoint-check{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.endpoint-checkmark{display:grid;place-items:center;width:17px;height:17px;flex:0 0 17px;margin-top:1px;border:1px solid #52647a;border-radius:5px;background:#09111c}.endpoint-check:checked+.endpoint-checkmark{border-color:var(--brand);background:var(--brand)}.endpoint-check:checked+.endpoint-checkmark:after{content:'✓';color:#032b27;font-size:11px;font-weight:900}.endpoint-card>span:last-child{min-width:0}.endpoint-card b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.endpoint-card small{display:block;margin-top:5px;color:var(--muted);font-size:10px;line-height:1.6}.endpoint-address{direction:ltr;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.protocol-pill{display:inline-flex;padding:1px 6px;border-radius:999px;color:#a7f3d0;background:rgba(52,211,153,.1);font-size:9px;font-weight:800}
.endpoint-editor{margin-top:16px;padding:14px;border:1px solid rgba(148,163,184,.13);border-radius:15px;background:rgba(5,10,18,.28)}.protocol-editor{margin:7px 0;border:1px solid rgba(148,163,184,.13);border-radius:11px;background:#0d1623}.protocol-editor>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;cursor:pointer;list-style:none}.protocol-editor>summary::-webkit-details-marker{display:none}.protocol-editor>summary label{display:flex;align-items:center;gap:9px;margin:0;color:var(--text);cursor:pointer}.protocol-editor>summary small{color:var(--muted);font-size:10px}.protocol-editor>.grid2{padding:2px 12px 10px}
.table-card,.table-wrap{border:1px solid rgba(148,163,184,.12);border-radius:14px;background:rgba(9,15,24,.36)}.modern-table th,.table-wrap th{background:#0a121e!important;color:#8193aa!important;text-transform:none;letter-spacing:0}.modern-table td{font-size:12px!important}.badge{display:inline-flex;align-items:center;gap:4px;min-height:22px;padding:3px 8px!important;border:1px solid transparent;font-weight:600!important}.badge-active,.b-ok{border-color:rgba(52,211,153,.2)}.badge-warning,.b-warn{border-color:rgba(251,191,36,.2)}.badge-disabled,.b-bad{border-color:rgba(251,113,133,.2)}.act-group{gap:5px!important}.act-btn,.btn.sm{min-height:30px!important;padding:5px 9px!important;border-radius:8px!important;font-size:10px!important}.issue-box{border-radius:9px!important;padding:7px 9px!important}.receipt-thumb{border-radius:9px!important}
.box,.table-card,.plans-table-card,.form-card{max-width:100%}

@media(max-width:900px){
  body.nav-open{overflow:hidden}
  .sidebar{z-index:40;max-width:min(86vw,310px);padding-bottom:max(16px,env(safe-area-inset-bottom))}
  .sidebar-nav{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:12px}
  .sidebar-foot{flex:0 0 auto;background:inherit}
  .nav-open .sidebar-scrim{z-index:35}
  .content{width:100%;max-width:100vw}
  .topbar{min-height:64px;flex-direction:row;align-items:center;gap:10px;padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  .topbar-title{min-width:0}.topbar-title>div{min-width:0}.topbar h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .who{flex:0 0 auto}.who .avatar{width:34px;height:34px}
  .page{width:100%;padding:14px 12px 24px}
  .grid2{grid-template-columns:minmax(0,1fr)}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card{min-width:0;min-height:104px;padding:14px}.card .num{font-size:21px;overflow-wrap:anywhere}
  .box,.table-card,.plans-table-card{padding:14px;border-radius:15px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table-wrap{max-width:100%;max-height:none;overflow:auto;-webkit-overflow-scrolling:touch}
  table,.p-table{min-width:680px}
  th,td{white-space:nowrap;padding:10px 8px}
  .row{width:100%;align-items:stretch}.row>*{min-width:0}
  .row>input,.row>select,.row>textarea,.row>.form-group{flex:1 1 180px}
  input,select,textarea{font-size:16px;min-height:46px}
  .btn,.act-btn,button[type="submit"]{min-height:42px;touch-action:manipulation}
  .flash{align-items:flex-start;line-height:1.7}
}

@media(max-width:560px){
  .cards{grid-template-columns:1fr}
  .brand{padding-bottom:14px}
  .page{padding-inline:10px}
  .box,.table-card,.plans-table-card{padding:12px}
  form:not(.inline) .btn,form:not(.inline) button[type="submit"]{width:100%}
  .ops{display:flex;gap:6px}.ops form,.ops a{flex:0 0 auto}
  .login-wrap{padding:14px}.login-card{padding:22px 16px}
}
@media(max-width:680px){.section-head,.endpoint-group>header{align-items:stretch;flex-direction:column}.selection-count{align-self:flex-start}.endpoint-grid{grid-template-columns:1fr}.endpoint-editor{padding:10px}.protocol-editor>summary small{display:none}}

/* Real phone layout: table rows become labeled cards instead of a cropped
   desktop table. Labels are populated from the table header in base.html. */
@media(max-width:760px){
  .sidebar{
    display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;
    width:min(88vw,320px)!important;height:100dvh!important;overflow:hidden;
    color:var(--text);box-shadow:-24px 0 70px rgba(0,0,0,.48)
  }
  .sidebar .brand{flex:0 0 auto;width:100%;visibility:visible;opacity:1}
  .sidebar-nav{display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;width:100%}
  .sidebar-nav a,.sidebar-nav .nav-label{display:block!important;width:100%;visibility:visible;opacity:1;text-align:right}
  .sidebar-nav a{color:#b8c7d9!important;font-size:14px;line-height:1.5;padding:11px 13px}
  .sidebar-nav a.active{color:#e7fffb!important}

  .table-wrap,.table-card,.plans-table-card,.box:has(> table){overflow:visible!important;max-height:none!important}
  table.mobile-card-table,.p-table.mobile-card-table{display:block;min-width:0!important;width:100%!important;background:transparent}
  table.mobile-card-table thead{display:none}
  table.mobile-card-table tbody{display:grid;width:100%;gap:12px}
  table.mobile-card-table tbody tr{display:block;width:100%;margin:0;padding:5px 12px;background:#111b29;border:1px solid #29384d;border-radius:15px;box-shadow:0 8px 24px rgba(0,0,0,.14)}
  table.mobile-card-table tbody tr:hover{background:#111b29}
  table.mobile-card-table tbody td{display:grid;grid-template-columns:minmax(92px,34%) minmax(0,1fr);align-items:start;gap:10px;width:100%;min-height:42px;padding:10px 0!important;border-bottom:1px solid rgba(148,163,184,.11)!important;white-space:normal!important;overflow-wrap:anywhere;text-align:right!important}
  table.mobile-card-table tbody td:last-child{border-bottom:0!important}
  table.mobile-card-table tbody td::before{content:attr(data-label);display:block;color:#7f91a9;font-size:11px;font-weight:700;line-height:1.6}
  table.mobile-card-table tbody td[colspan]{display:block;text-align:center!important;padding:28px 10px!important}
  table.mobile-card-table tbody td[colspan]::before{display:none}
  table.mobile-card-table tbody td>div,table.mobile-card-table tbody td>a{min-width:0;max-width:100%}
  table.mobile-card-table .ops,table.mobile-card-table td>div[style*="inline-flex"]{display:flex!important;flex-wrap:wrap!important;justify-content:flex-start;gap:7px!important}
  table.mobile-card-table form{max-width:100%}
  table.mobile-card-table button,.btn-act{min-height:40px;padding:8px 11px}

  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin-bottom:14px!important}
  .stat-card{min-width:0;padding:13px!important}.stat-val{font-size:19px!important;overflow-wrap:anywhere}.stat-title{font-size:11px!important}
  .header-actions{display:grid!important;grid-template-columns:minmax(0,1fr);gap:10px!important;margin-bottom:14px!important}
  .filter-tabs,.server-filters{display:flex!important;width:100%;max-width:100%;overflow-x:auto;flex-wrap:nowrap!important;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .filter-tabs::-webkit-scrollbar,.server-filters::-webkit-scrollbar{display:none}
  .filter-tab,.server-filter{flex:0 0 auto;white-space:nowrap}
  .search-input{width:100%!important;max-width:none!important}
}

@media(max-width:390px){
  .stats-grid{grid-template-columns:1fr!important}
  table.mobile-card-table tbody td{grid-template-columns:82px minmax(0,1fr)}
}

/* ── Desktop and laptop layout ─────────────────────────────────────── */
@media(min-width:901px){
  .layout{align-items:stretch}
  .sidebar{flex:0 0 270px;z-index:30;overflow:hidden}
  .sidebar-nav{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-left:3px;scrollbar-width:thin;scrollbar-color:#314158 transparent}
  .sidebar-nav::-webkit-scrollbar{width:5px}.sidebar-nav::-webkit-scrollbar-thumb{background:#314158;border-radius:10px}
  .sidebar-foot{flex:0 0 auto;background:rgba(10,16,26,.98)}
  .content{width:calc(100% - 270px);min-height:100vh}
  .topbar{padding-inline:clamp(20px,2.2vw,36px)}
  .page{width:100%;max-width:1540px;padding:clamp(20px,2vw,32px)}
  .cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .grid2{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .box,.table-card,.plans-table-card,.plan-form-card{border-radius:18px}
  .box{padding:20px}
  .table-wrap,.table-card>div[style*="overflow-x"]{overflow:auto;scrollbar-width:thin;scrollbar-color:#34445b transparent}
  .table-wrap table,.table-card table,.plans-table-card table{min-width:880px}
  table{line-height:1.55}
  th{height:45px;letter-spacing:.1px}
  td{height:52px}
  tbody tr{transition:background .15s ease}
  .row{column-gap:12px;row-gap:8px}
  .row>.form-group{flex:1 1 210px;min-width:180px}
  .header-actions{align-items:center}
  .filter-tabs,.server-filters{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .filter-tabs::-webkit-scrollbar,.server-filters::-webkit-scrollbar{display:none}
  .search-input{max-width:min(360px,100%)}
  .stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important}
  .stat-card{min-width:0}
  .ops,.service-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
}

@media(min-width:901px) and (max-width:1180px){
  .sidebar{flex-basis:235px;width:235px;padding-inline:12px}
  .content{width:calc(100% - 235px)}
  .page{padding:20px 18px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .topbar{padding-inline:20px}
}

/* ── PingStar Nebula 2026 — premium visual system ─────────────────── */
:root{
  --bg:#050713;--panel:#0c1024;--panel2:#121833;--line:rgba(151,164,255,.16);
  --text:#f7f8ff;--muted:#9ba6c8;--brand:#7c5cff;--brand2:#24d4ff;
  --ok:#38e6a5;--warn:#ffca57;--bad:#ff6685;
}
body{
  background:
    radial-gradient(circle at 82% 0,rgba(124,92,255,.18),transparent 30%),
    radial-gradient(circle at 12% 92%,rgba(36,212,255,.10),transparent 32%),
    linear-gradient(145deg,#050713 0%,#080c1d 55%,#050713 100%);
  background-attachment:fixed;
}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(to bottom,black,transparent 80%)}
.sidebar{background:linear-gradient(180deg,rgba(12,16,36,.96),rgba(7,10,24,.98));border-left-color:rgba(151,164,255,.14);box-shadow:-18px 0 60px rgba(0,0,0,.20)}
.brand-mark{color:#fff;background:linear-gradient(145deg,#9b7bff,#6650ff 48%,#24d4ff);box-shadow:0 12px 34px rgba(124,92,255,.38),inset 0 1px rgba(255,255,255,.28)}
.brand strong{background:linear-gradient(90deg,#fff,#b9c6ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.sidebar-nav a{border-radius:13px;color:#a6b0d0}.sidebar-nav a:hover{color:#fff;background:rgba(124,92,255,.09);border-color:rgba(151,164,255,.12)}
.sidebar-nav a.active{color:#fff;border-color:rgba(124,92,255,.3);background:linear-gradient(90deg,rgba(124,92,255,.22),rgba(36,212,255,.06));box-shadow:inset 0 1px rgba(255,255,255,.04),0 8px 22px rgba(0,0,0,.13)}
.sidebar-nav a.active:before{background:linear-gradient(#9b7bff,#24d4ff);box-shadow:0 0 18px #7c5cff}
.topbar{background:rgba(5,7,19,.76);border-bottom-color:rgba(151,164,255,.13);box-shadow:0 8px 30px rgba(0,0,0,.12)}
.eyebrow{color:#8eeaff}.who .avatar{color:#fff;border-color:rgba(124,92,255,.34);background:linear-gradient(145deg,rgba(124,92,255,.28),rgba(36,212,255,.12));box-shadow:0 8px 22px rgba(60,45,160,.18)}
.card,.box,.table-card,.plans-table-card,.form-card,.plan-form-card{background:linear-gradient(145deg,rgba(18,24,51,.90),rgba(9,13,31,.94));border-color:rgba(151,164,255,.14);box-shadow:0 18px 55px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.035)}
.card{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.card:hover{transform:translateY(-3px);border-color:rgba(124,92,255,.32);box-shadow:0 22px 60px rgba(0,0,0,.22),0 0 34px rgba(124,92,255,.06)}
.card:after{filter:saturate(1.35);opacity:.11}.card .num{letter-spacing:-.4px}.card .lbl i{background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.055)}
input,select,textarea{background:rgba(17,23,48,.86);border-color:rgba(151,164,255,.18)}input:focus,select:focus,textarea:focus{border-color:#7c5cff;box-shadow:0 0 0 4px rgba(124,92,255,.12),0 8px 25px rgba(0,0,0,.12)}
.btn,.act-btn{color:#fff;background:linear-gradient(135deg,#7c5cff,#6448ee);box-shadow:0 8px 22px rgba(92,66,225,.22);border:1px solid rgba(255,255,255,.08)}
.btn:hover,.act-btn:hover{filter:brightness(1.12);box-shadow:0 12px 28px rgba(92,66,225,.32)}
.btn.ok{color:#032118;background:linear-gradient(135deg,#50f0b6,#28ca91);box-shadow:0 8px 22px rgba(56,230,165,.18)}
.btn.bad{color:#fff;background:linear-gradient(135deg,#ff6685,#e94468);box-shadow:0 8px 22px rgba(255,102,133,.18)}
.btn.ghost{color:#cbd2ee;background:rgba(151,164,255,.055);border-color:rgba(151,164,255,.18);box-shadow:none}
.badge{border:1px solid currentColor;font-weight:700}.b-ok{background:rgba(56,230,165,.10)}.b-warn{background:rgba(255,202,87,.10)}.b-bad{background:rgba(255,102,133,.10)}
th{color:#95a1c7;background:rgba(8,12,29,.94)!important}tbody tr{transition:.16s ease}tbody tr:hover{background:rgba(124,92,255,.045)}
.login-wrap{background:radial-gradient(circle at 50% 15%,rgba(124,92,255,.25),transparent 34%),radial-gradient(circle at 15% 85%,rgba(36,212,255,.12),transparent 28%),#050713}.login-card{border-color:rgba(151,164,255,.22);background:linear-gradient(145deg,rgba(17,23,49,.96),rgba(8,12,28,.98));box-shadow:0 30px 90px rgba(0,0,0,.46),0 0 70px rgba(124,92,255,.08)}
.flash.success{color:#b8ffdf;border-color:rgba(56,230,165,.25);background:linear-gradient(90deg,rgba(56,230,165,.12),rgba(56,230,165,.04))}.flash.danger{color:#ffd2dc;border-color:rgba(255,102,133,.25);background:linear-gradient(90deg,rgba(255,102,133,.12),rgba(255,102,133,.04))}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:rgba(5,7,19,.3)}::-webkit-scrollbar-thumb{background:linear-gradient(#514293,#276e88);border-radius:10px;border:2px solid transparent;background-clip:padding-box}
@media(max-width:760px){table.mobile-card-table tbody tr{background:linear-gradient(145deg,#111735,#0b1027);border-color:rgba(151,164,255,.17);box-shadow:0 12px 34px rgba(0,0,0,.22)}table.mobile-card-table tbody tr:hover{background:linear-gradient(145deg,#111735,#0b1027)}.sidebar{background:linear-gradient(180deg,#0d1230,#070a18)}}

@media(min-width:1500px){
  .card{min-height:124px;padding:20px}
  .card .num{font-size:28px}
  .box{padding:22px}
}
@media (max-width:1100px) and (min-width:901px){
.layout{flex-direction:row}.sidebar{position:fixed;right:0;top:0;width:270px;height:100vh;transform:translateX(105%);transition:transform .22s ease;z-index:40}.nav-open .sidebar{transform:translateX(0)}.nav-open .sidebar-scrim{display:block;position:fixed;inset:0;z-index:35;border:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px)}.menu-toggle{display:block}.topbar{padding:10px 16px}.page{width:100%;max-width:none;padding:18px 20px}.content{width:100%;max-width:100vw}}
@media (max-width:1100px) and (min-width:901px){.menu-toggle{display:block!important}}
@media(min-width:901px){body.nav-collapsed .sidebar{flex-basis:78px;width:78px}body.nav-collapsed .content{width:calc(100% - 78px)}}
@media(min-width:901px){body.nav-collapsed .sidebar{position:fixed;right:0;top:0;height:100vh;z-index:40}body.nav-collapsed .content{width:100%;margin:0}}
@media(min-width:901px){body.nav-collapsed .content{flex:1 1 auto!important;width:calc(100% - 78px)!important;max-width:none!important;min-width:0!important}body.nav-collapsed .page{width:100%!important;max-width:none!important}}
@media(min-width:901px){body.nav-collapsed .admin-shell{grid-template-columns:78px minmax(0,1fr)!important}body.nav-collapsed .content{grid-column:2;min-width:0!important;width:auto!important}}