/* ===========================================================
   WG Panel — Admin Console skin
   دارک نِیوی/فیروزه‌ای · RTL · Vazirmatn
   =========================================================== */

:root{
  --bg:            #070b14;
  --bg-soft:       #0b1120;
  --surface:       #0f1626;
  --surface-2:     #131c30;
  --surface-3:     #17203a;
  --surface-hover: #1a2440;
  --border:        #1f2b46;
  --border-soft:   #182238;
  --text:          #e8edf9;
  --text-dim:      #93a1c2;
  --text-mute:     #5f6d90;
  --primary:       #2dd4bf;
  --primary-dark:  #0ea5a4;
  --primary-soft:  rgba(45,212,191,.12);
  --primary-line:  rgba(45,212,191,.28);
  --primary-ink:   #04211c;
  --danger:        #f0506e;
  --danger-soft:   rgba(240,80,110,.12);
  --warning:       #f5b942;
  --warning-soft:  rgba(245,185,66,.12);
  --success:       #34d399;
  --success-soft:  rgba(52,211,153,.12);
  --info:          #5b8def;
  --info-soft:     rgba(91,141,239,.12);
  --violet:        #a78bfa;
  --violet-soft:   rgba(167,139,250,.12);

  --radius-lg:     18px;
  --radius:        14px;
  --radius-sm:     10px;
  --shadow:        0 12px 32px -14px rgba(0,0,0,.7);
  --shadow-lg:     0 26px 60px -24px rgba(0,0,0,.85);
  --glow:          0 10px 26px -10px rgba(45,212,191,.45);

  --sidebar-w:     266px;
  --header-h:      70px;
  --topbar-bg:     rgba(8,12,22,.72);
  --card-sheen:    linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,0) 46%);
  --ring:          0 0 0 3px var(--primary-soft);
}

*{ box-sizing: border-box; }

/* ---------- تم روشن ---------- */
html[data-theme="light"]{
  --bg:            #f2f5fa;
  --bg-soft:       #eaeff7;
  --surface:       #ffffff;
  --surface-2:     #f7f9fd;
  --surface-3:     #eef3fa;
  --surface-hover: #eaf0f9;
  --border:        #dde4ef;
  --border-soft:   #e8edf5;
  --text:          #16202f;
  --text-dim:      #566076;
  --text-mute:     #8892a8;
  --primary:       #0d9488;
  --primary-dark:  #0f766e;
  --primary-soft:  rgba(13,148,136,.12);
  --primary-line:  rgba(13,148,136,.30);
  --primary-ink:   #ffffff;
  --danger:        #e11d48;
  --danger-soft:   rgba(225,29,72,.10);
  --warning:       #c2740a;
  --warning-soft:  rgba(217,119,6,.12);
  --success:       #059669;
  --success-soft:  rgba(5,150,105,.12);
  --info:          #2563eb;
  --info-soft:     rgba(37,99,235,.10);
  --violet:        #7c3aed;
  --violet-soft:   rgba(124,58,237,.10);
  --shadow:        0 10px 26px -12px rgba(30,41,59,.22);
  --shadow-lg:     0 22px 50px -22px rgba(30,41,59,.28);
  --glow:          0 10px 24px -12px rgba(13,148,136,.45);
  --topbar-bg:     rgba(255,255,255,.78);
  --card-sheen:    linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 40%);
}
html[data-theme="light"] body{
  background: radial-gradient(1100px 720px at 88% -12%, #e6f2f2 0%, var(--bg) 46%) fixed;
}
html[data-theme="light"] .sidebar{ background: linear-gradient(180deg, #ffffff 0%, #f6f9fd 100%); }
html[data-theme="light"] #installLog{ background:#0a0f1a; color:#9be9c8; }
html[data-theme="light"] .login-brand-side{
  background: radial-gradient(900px 520px at 72% 18%, rgba(13,148,136,.12), transparent 62%), #f5f8fc;
}
html[data-theme="light"] .qr-box img{ border-color:#f3f5fa; }

html, body{
  background: radial-gradient(1100px 760px at 88% -12%, #0e2038 0%, var(--bg) 48%) fixed;
  color: var(--text);
  font-family: 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.75;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  max-width: 100vw;
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }
hr{ border: none; border-top: 1px solid var(--border-soft); }
::selection{ background: var(--primary-soft); color: var(--text); }

:focus-visible{
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 6px;
}

::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover{ background: var(--surface-hover); background-clip: padding-box; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ---------- utility helpers ---------- */
.small{ font-size: .82rem; }
.fw-semibold{ font-weight: 600; }
.num{ font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.mono{ font-family: 'JetBrains Mono', 'Courier New', monospace; direction: ltr; unicode-bidi: plaintext; display:inline-block; }
.code-scroll{ display:block; overflow-x:auto; white-space:nowrap; direction:ltr; text-align:left; padding:2px 0; max-width:100%; }
.text-dim{ color: var(--text-dim); }
.text-mute{ color: var(--text-mute); }
.text-danger{ color: var(--danger); }
.text-success{ color: var(--success); }
.text-primary{ color: var(--primary); }
.d-flex{ display:flex; }
.align-items-center{ align-items:center; }
.justify-content-between{ justify-content:space-between; }
.flex-wrap{ flex-wrap:wrap; }
.flex-fill{ flex:1 1 auto; }
.gap-1{ gap:.25rem; } .gap-2{ gap:.5rem; } .gap-3{ gap:1rem; }
.mt-1{margin-top:.25rem;} .mt-2{margin-top:.5rem;} .mt-3{margin-top:1rem;} .mt-4{margin-top:1.5rem;}
.mb-1{margin-bottom:.25rem;} .mb-2{margin-bottom:.5rem;} .mb-3{margin-bottom:1rem;} .mb-4{margin-bottom:1.5rem;}
.mb-section{ margin-bottom: 1.25rem; }
.w-100{ width:100%; }
.d-none{ display:none !important; }
.mt-auto{ margin-top:auto; }
.text-center{ text-align:center; }

/* ---------- چیدمان: ساید‌بار + هدر + محتوا ---------- */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: linear-gradient(180deg, #0b111f 0%, #080d18 100%);
  border-inline-start: 1px solid var(--border-soft);
  padding: 20px 14px 18px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 40;
  display: flex;
  flex-direction: column;
}
.sidebar-brand{
  display:flex; align-items:center; gap:11px;
  padding: 6px 8px 20px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 14px;
}
.sidebar-brand .brand-icon{
  width:40px; height:40px; border-radius: 13px;
  background: linear-gradient(140deg, var(--primary) 0%, #0891b2 100%);
  display:flex; align-items:center; justify-content:center;
  color: var(--primary-ink); font-size:18px; box-shadow: var(--glow);
  flex: 0 0 auto;
}
.sidebar-brand .brand-text{ display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.sidebar-brand .brand-title{ font-weight:800; font-size:15px; letter-spacing:.2px; }
.sidebar-brand .brand-sub{ font-size:11px; color:var(--text-mute); }

.sidebar nav{ display:flex; flex-direction:column; }
.nav-group-label{
  font-size: 11px; color: var(--text-mute); font-weight:700;
  letter-spacing:.02em; margin: 16px 12px 7px;
}
.nav-link{
  position: relative;
  display:flex; align-items:center; gap:11px;
  padding: 10px 12px; border-radius: 11px;
  color: var(--text-dim); font-size: 14px; font-weight:500;
  margin-bottom: 3px;
  transition: background .16s ease, color .16s ease;
}
.nav-link i{
  font-size:15px; width:28px; height:28px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px; background: var(--surface); color: var(--text-mute);
  border:1px solid var(--border-soft);
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.nav-link:hover{ background: var(--surface); color: var(--text); }
.nav-link:hover i{ color: var(--primary); border-color: var(--primary-line); }
.nav-link.active{
  background: linear-gradient(90deg, var(--primary-soft) 0%, rgba(45,212,191,0) 92%);
  color: var(--primary); font-weight:700;
}
.nav-link.active i{ background: var(--primary-soft); color: var(--primary); border-color: var(--primary-line); }
.nav-link.active::after{
  content:''; position:absolute; inset-inline-end:-14px; top:50%; transform: translateY(-50%);
  width:3px; height:22px; border-radius:3px 0 0 3px; background: var(--primary);
  box-shadow: -2px 0 14px rgba(45,212,191,.7);
}
.nav-children{ margin: 2px 0 8px; padding-inline-start: 14px; border-inline-start: 1px dashed var(--border); }
.nav-children .nav-link{ font-size:13.5px; padding: 8px 12px; }

/* کارت پایین ساید‌بار */
.sidebar-foot{ margin-top: auto; padding-top: 16px; }
.side-status{
  border:1px solid var(--border-soft); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface) 0%, rgba(15,22,38,.4) 100%);
  padding: 13px 14px; margin-bottom: 10px;
}
.side-status-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12.5px; }
.side-status-head .label{ display:flex; align-items:center; gap:7px; color: var(--text-dim); font-weight:600; }
.side-status-head .value{ color: var(--success); font-weight:700; font-size:12px; }
.side-status-bar{ height:4px; border-radius:4px; background: var(--bg-soft); margin:10px 0 8px; overflow:hidden; }
.side-status-bar span{ display:block; height:100%; border-radius:4px; background: linear-gradient(90deg, var(--primary-dark), var(--primary)); }
.side-status-meta{ font-size:11px; color: var(--text-mute); }
.sidebar-user{
  display:flex; align-items:center; gap:10px; padding: 9px 10px; border-radius: var(--radius-sm);
  border:1px solid var(--border-soft); background: var(--surface);
}
.sidebar-user .avatar{
  width:34px; height:34px; border-radius:11px; background: var(--primary-soft);
  display:flex; align-items:center; justify-content:center; color:var(--primary); font-size:15px;
  flex:0 0 auto;
}
.sidebar-user .u-name{ font-size:13px; font-weight:700; }
.sidebar-user .u-role{ font-size:11px; color:var(--text-mute); }
.sidebar-user .logout-ico{
  margin-inline-start:auto; width:30px; height:30px; border-radius:9px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; color:var(--text-mute);
  border:1px solid transparent; transition: all .15s;
}
.sidebar-user .logout-ico:hover{ color:var(--danger); background:var(--danger-soft); }
.btn-logout-link{
  display:flex; align-items:center; gap:9px; margin-top:8px; padding: 9px 12px;
  border-radius: var(--radius-sm); color: var(--danger); font-size:13.5px; font-weight:600;
  background: var(--danger-soft);
}
.btn-logout-link:hover{ filter: brightness(1.15); }

.main-col{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }

/* ---------- هدر بالا ---------- */
.topbar{
  height: var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 26px; gap: 16px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--topbar-bg);
  backdrop-filter: blur(14px);
  position: sticky; top:0; z-index: 30;
}
.topbar-left{ display:flex; align-items:center; gap:14px; min-width:0; }
.sidebar-toggle{
  display:none; width:38px; height:38px; border-radius:11px; border:1px solid var(--border);
  background: var(--surface); color: var(--text-dim); align-items:center; justify-content:center; font-size:17px;
  flex:0 0 auto; cursor:pointer;
}
.breadcrumb-ui{
  display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-mute);
  min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.breadcrumb-ui a{ color:var(--text-dim); }
.breadcrumb-ui a:hover{ color:var(--primary); }
.breadcrumb-ui .current{ color: var(--text); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.breadcrumb-ui .sep{ opacity:.4; }
.topbar-right{ display:flex; align-items:center; gap:10px; }
.topbar-chip{
  display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-dim);
  background: var(--surface); border:1px solid var(--border-soft); padding:7px 13px; border-radius:999px;
}
.topbar-chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--success); box-shadow:0 0 0 3px var(--success-soft); }
.topbar-user-trigger{
  display:flex; align-items:center; gap:9px; background: var(--surface); border:1px solid var(--border-soft);
  cursor:pointer; padding:5px 11px 5px 7px; border-radius:999px; color: var(--text);
  transition: border-color .15s, background .15s;
}
.topbar-user-trigger:hover{ background: var(--surface-hover); border-color: var(--border); }
.topbar-user-trigger .u-name{ font-size:13px; font-weight:600; }
.topbar-user-trigger .avatar{
  width:30px; height:30px; border-radius:50%; background: var(--primary-soft); color: var(--primary);
  display:flex; align-items:center; justify-content:center; font-size:14px; flex:0 0 auto;
}
.brand-logo-img{ width:40px; height:40px; border-radius:13px; object-fit:cover; background:var(--surface); }

.content-area{ padding: 26px 26px 44px; flex:1 1 auto; }

.app-footer{
  padding: 18px 26px; border-top:1px solid var(--border-soft);
  color: var(--text-mute); font-size:12.5px; text-align:center;
}

/* ---------- سرصفحه‌ی صفحات ---------- */
.page-actions-row{
  display:flex; justify-content:space-between; align-items:flex-end; gap:16px;
  flex-wrap:wrap; margin-bottom: 24px;
}
.page-eyebrow{
  font-size:12px; font-weight:700; color: var(--primary);
  display:flex; align-items:center; gap:8px; margin-bottom:6px;
}
.page-eyebrow::after{ content:''; flex:0 0 26px; height:1px; background: var(--primary-line); }
.page-lead-title{ font-size: 25px; font-weight:800; display:flex; align-items:center; gap:10px; line-height:1.5; }
.page-lead-title i{ color: var(--primary); font-size:22px; }
.page-lead-sub{ color: var(--text-dim); font-size: 13.5px; margin-top:4px; max-width: 62ch; }

/* ---------- سطوح: کارت / پنل ---------- */
.card, .panel{
  position: relative;
  background: var(--surface);
  background-image: var(--card-sheen);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow);
}
.card.p-3{ padding: 16px; }
.card.p-4{ padding: 24px; }
.card-eyebrow{
  font-size:11.5px; font-weight:700; color: var(--primary); letter-spacing:.04em;
  margin-bottom:6px;
}

.section-divider{
  display:flex; align-items:center; gap:10px; margin: 0 0 16px;
  color: var(--text); font-weight:700; font-size:14px;
}
.section-divider::after{ content:''; flex:1; height:1px; background: var(--border-soft); }
.section-divider i{ color: var(--primary); }

/* ---------- تب‌ها ---------- */
.tab-bar{ display:flex; gap:2px; border-bottom:1px solid var(--border-soft); flex-wrap:wrap; }
.tab-btn{
  display:flex; align-items:center; gap:8px; padding:12px 18px; background:none; border:none;
  color:var(--text-dim); font-size:13.5px; font-weight:600; border-bottom:2px solid transparent;
  margin-bottom:-1px; cursor:pointer; border-radius:10px 10px 0 0;
  font-family: inherit; transition: color .15s, background .15s;
}
.tab-btn:hover{ color:var(--text); background: var(--surface); }
.tab-btn.active{ color:var(--primary); border-bottom-color: var(--primary); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; animation: tabFadeIn .16s ease; }
@keyframes tabFadeIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

/* ---------- گریدها و فرم‌ها ---------- */
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.grid-4{ display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; }
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.form-grid.cols-2{ grid-template-columns: 1fr 1fr; }
.form-grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
.form-grid.cols-4{ grid-template-columns: repeat(4, 1fr); }
.col-span-2{ grid-column: span 2; }
.col-span-3{ grid-column: span 3; }
@media (max-width: 860px){
  .grid-2, .grid-3{ grid-template-columns: 1fr; }
  .grid-4{ grid-template-columns: 1fr 1fr; }
  .form-grid, .form-grid.cols-2{ grid-template-columns: 1fr 1fr; }
  .form-grid.cols-3, .form-grid.cols-4{ grid-template-columns: 1fr 1fr; }
  .col-span-2, .col-span-3{ grid-column: span 2; }
}

.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:12.5px; color: var(--text-dim); font-weight:600; }
.field-hint{ font-size:11.5px; color:var(--text-mute); }

.ui-input, .ui-select, textarea.ui-input, select.ui-input{
  width:100%; background: var(--bg-soft); border:1px solid var(--border);
  color: var(--text); border-radius: 11px; padding: 11px 14px; font-size:13.5px;
  font-family: inherit; transition: border-color .15s, box-shadow .15s, background .15s;
}
.ui-input::placeholder{ color: var(--text-mute); }
.ui-input:hover:not(:disabled), .ui-select:hover:not(:disabled){ border-color: var(--border); background: var(--surface); }
.ui-input:focus, .ui-select:focus{
  outline:none; border-color: var(--primary); box-shadow: var(--ring); background: var(--bg-soft);
}
.ui-input:disabled{ opacity:.55; cursor:not-allowed; }
select.ui-input{ cursor:pointer; }

/* ورودی رمز عبور + دکمه‌ی نمایش/مخفی‌سازی */
.input-pass{ position: relative; display:block; }
.input-pass > .ui-input{ padding-inline-end: 44px; }
.pass-toggle{
  position:absolute; inset-inline-end:6px; top:50%; transform: translateY(-50%);
  width:32px; height:32px; border-radius:9px; border:none; background:transparent;
  color: var(--text-mute); cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:15px; transition: color .15s, background .15s;
}
.pass-toggle:hover{ color: var(--primary); background: var(--primary-soft); }
.pass-toggle.is-visible{ color: var(--primary); }

/* چک‌باکس کاشی‌ای */
.check-tile-list{ display:flex; flex-wrap:wrap; gap:9px; border:1px solid var(--border); border-radius: 13px; padding:12px; background: var(--bg-soft); max-width:100%; }
.check-tile{
  display:flex; align-items:center; gap:9px; padding:10px 13px; border-radius:11px;
  border:1px solid var(--border); background: var(--surface); font-size:13px;
  max-width:100%; flex-wrap:wrap; width:100%; transition: border-color .15s, background .15s;
}
.check-tile input{ accent-color: var(--primary); flex:0 0 auto; }
.check-tile.is-checked{ border-color: var(--primary-line); background: var(--primary-soft); }
.check-tile .badge-offline{ font-size:10.5px; color:var(--danger); background:var(--danger-soft); padding:2px 7px; border-radius:6px; }
.check-tile-main{ display:flex; align-items:center; gap:9px; cursor:pointer; flex:0 0 auto; }
.tunnel-picker-group{ display:flex; flex-direction:column; gap:4px; width:100%; margin-top:6px; padding-top:6px; border-top:1px dashed var(--border-soft); }
.tunnel-check-item{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-dim); cursor:pointer; }
.tunnel-check-item input{ accent-color: var(--primary); }

/* کلید تغییر وضعیت */
.ui-switch{ position:relative; display:inline-block; width:42px; height:23px; }
.ui-switch input{ opacity:0; width:0; height:0; }
.ui-switch .track{ position:absolute; inset:0; background: var(--border); border-radius:999px; transition:.18s; cursor:pointer; }
.ui-switch .track::before{
  content:''; position:absolute; width:17px; height:17px; left:3px; top:3px; background:#fff;
  border-radius:50%; transition:.18s; box-shadow: 0 2px 5px rgba(0,0,0,.3);
}
.ui-switch input:checked + .track{ background: var(--primary); }
.ui-switch input:checked + .track::before{ transform: translateX(-19px); }
[dir="rtl"] .ui-switch input:checked + .track::before{ transform: translateX(19px); }

/* ---------- دکمه‌ها ---------- */
.btn-ui{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius: 11px; padding: 11px 18px; font-size: 13.5px; font-weight:700;
  border:1px solid transparent; cursor:pointer; font-family: inherit;
  transition: transform .1s ease, filter .15s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn-ui:active{ transform: scale(.98); }
.btn-ui:disabled, .btn-ui.disabled{ opacity:.5; cursor:not-allowed; pointer-events:none; }
.btn-ui-sm{ padding:7px 12px; font-size:12.5px; border-radius:9px; }
.btn-ui-primary{
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--primary-ink); box-shadow: var(--glow);
}
.btn-ui-primary:hover{ filter: brightness(1.07); }
.btn-ui-ghost{ background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-ui-ghost:hover{ background: var(--surface-hover); border-color: var(--primary-line); }
.btn-ui-outline{ background: transparent; border-color: var(--border); color: var(--text-dim); }
.btn-ui-outline:hover{ border-color: var(--primary); color: var(--primary); }
.btn-ui-danger{ background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.btn-ui-danger:hover{ filter: brightness(1.12); }
.btn-ui-warning{ background: var(--warning-soft); color: var(--warning); }

.icon-btn{
  width:34px; height:34px; border-radius:10px; border:1px solid var(--border-soft);
  background: var(--surface); color: var(--text-dim); display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition: all .15s; font-size:14px;
}
.icon-btn:hover{ background: var(--surface-hover); color: var(--text); border-color: var(--primary-line); }
.icon-btn:disabled{ opacity:.4; cursor:not-allowed; pointer-events:none; }
.icon-btn-danger:hover{ color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
.row-actions{ display:flex; align-items:center; gap:6px; }

/* منوی کشویی عملیات */
.action-menu-wrap{ position:relative; display:inline-flex; }
.action-menu{
  display:none; position:absolute; inset-inline-end:0; top:calc(100% + 8px);
  min-width:210px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:14px; box-shadow: var(--shadow-lg); z-index:60; padding:6px;
}
.action-menu.is-open{ display:block; animation: tabFadeIn .14s ease; }
/* وقتی منو برای جای‌گذاری درست به body منتقل می‌شود */
/* منو با position:fixed جابه‌جا می‌شود؛ باید بالاتر از کارت‌ها بنشیند */
.action-menu.is-open{ z-index: 400; }
.action-menu-item{
  display:flex; align-items:center; gap:10px; width:100%; text-align:start;
  background:none; border:none; color:var(--text); padding:9px 11px; border-radius:9px;
  font-size:13px; cursor:pointer; text-decoration:none; font-family: inherit;
}
.action-menu-item:hover{ background:var(--surface-hover); }
.action-menu-item.danger{ color:var(--danger); }
.action-menu-item i{ width:16px; text-align:center; color:var(--text-dim); font-size:14px; }
.action-menu-item.danger i{ color:var(--danger); }
.action-menu-sep{ height:1px; background:var(--border-soft); margin:5px 3px; }

/* ---------- جدول‌ها ---------- */
.table-responsive{ overflow-x:auto; border-radius: var(--radius-lg); border:1px solid var(--border-soft); background: var(--surface); }
.ui-table{ width:100%; border-collapse: collapse; background: transparent; font-size:13.5px; }
.ui-table thead th{
  text-align: start; padding: 13px 16px; color: var(--text-mute); font-weight:700;
  font-size:12px; letter-spacing:.02em;
  background: var(--surface-2); border-bottom:1px solid var(--border-soft);
  position: sticky; top: 0; z-index: 2;
}
.ui-table tbody td{ padding: 14px 16px; border-bottom:1px solid var(--border-soft); vertical-align: middle; }
.ui-table tbody tr:last-child td{ border-bottom:none; }
.ui-table tbody tr{ transition: background .14s ease; }
.ui-table tbody tr:hover{ background: var(--surface-hover); }
.ui-table tbody td:first-child{ position: relative; }
.ui-table tbody tr:hover td:first-child::before{
  content:''; position:absolute; inset-block:9px; inset-inline-start:0;
  width:3px; border-radius:0 3px 3px 0; background: var(--primary);
}
.empty-cell{ text-align:center; color: var(--text-mute); padding: 38px !important; }
.card > .ui-table, .panel > .ui-table{ margin: 0 -4px; }

.chip{ display:inline-flex; align-items:center; gap:7px; background: var(--surface-2); border:1px solid var(--border-soft); padding:5px 12px; border-radius:999px; font-size:12.5px; }
.badge-count{ display:inline-flex; min-width:24px; height:24px; padding:0 8px; align-items:center; justify-content:center; background: var(--primary-soft); color: var(--primary); border-radius:999px; font-weight:700; font-size:12px; }
.badge-soft{ display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px; font-size:11.5px; font-weight:700; }
.badge-soft.success{ background:var(--success-soft); color:var(--success); }
.badge-soft.danger{ background:var(--danger-soft); color:var(--danger); }
.badge-soft.warning{ background:var(--warning-soft); color:var(--warning); }
.badge-soft.info{ background:var(--info-soft); color:var(--info); }

/* نقطه‌ی وضعیت */
.status-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-inline-end:6px; }
.status-online{ background: var(--success); box-shadow:0 0 0 3px var(--success-soft); }
.status-offline{ background: var(--danger); box-shadow:0 0 0 3px var(--danger-soft); }
.status-pending, .status-installing{ background: var(--warning); box-shadow:0 0 0 3px var(--warning-soft); }
.status-error{ background: var(--danger); box-shadow:0 0 0 3px var(--danger-soft); }

/* ---------- هشدارها ---------- */
.ui-alert{ display:flex; align-items:flex-start; gap:11px; padding: 14px 16px; border-radius: 13px; font-size:13.5px; border:1px solid transparent; }
.ui-alert i{ margin-top:2px; }
.ui-alert-info{ background: var(--info-soft); color:#bcd3ff; border-color: rgba(91,141,239,.25); }
.ui-alert-success{ background: var(--success-soft); color:#a9f4d8; border-color: rgba(52,211,153,.25); }
.ui-alert-danger{ background: var(--danger-soft); color:#ffc3d0; border-color: rgba(240,80,110,.25); }
.ui-alert-warning{ background: var(--warning-soft); color:#ffe1ab; border-color: rgba(245,185,66,.25); }
html[data-theme="light"] .ui-alert-info{ color: var(--info); }
html[data-theme="light"] .ui-alert-success{ color: var(--success); }
html[data-theme="light"] .ui-alert-danger{ color: var(--danger); }
html[data-theme="light"] .ui-alert-warning{ color: var(--warning); }
.ui-alert .btn-close-alert{ margin-inline-start:auto; cursor:pointer; opacity:.6; background:none; border:none; color:inherit; font-size:16px; }
.ui-alert .btn-close-alert:hover{ opacity:1; }

/* ---------- کارت‌های آماری ---------- */
.stat-card{
  position: relative;
  background: var(--surface);
  background-image: var(--card-sheen);
  border:1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding:20px;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.stat-card::after{
  content:''; position:absolute; inset-inline-end:-40px; top:-60px; width:150px; height:150px;
  background: radial-gradient(circle, var(--primary-soft) 0%, transparent 68%); pointer-events:none;
}
.stat-card:hover{ border-color: var(--primary-line); box-shadow: var(--shadow-lg); }
.stat-card-icon{
  position:absolute; top:18px; inset-inline-end:18px;
  width:42px; height:42px; border-radius:13px; background: var(--primary-soft); color: var(--primary);
  display:flex; align-items:center; justify-content:center; font-size:18px; flex:0 0 auto; z-index:1;
}
.stat-card-icon.amber{ background: var(--warning-soft); color: var(--warning); }
.stat-card-icon.blue{ background: var(--info-soft); color: var(--info); }
.stat-card-icon.red{ background: var(--danger-soft); color: var(--danger); }
.stat-card-icon.green{ background: var(--success-soft); color: var(--success); }
.stat-card-icon.violet{ background: var(--violet-soft); color: var(--violet); }
.stat-card-label{ font-size:12.5px; color: var(--text-dim); padding-inline-end:52px; position:relative; z-index:1; }
.stat-card-value{
  font-size:29px; font-weight:800; line-height:1.5; margin-top:8px;
  font-variant-numeric: tabular-nums; position:relative; z-index:1;
}
.stat-card-foot{ margin-top:10px; display:flex; align-items:center; gap:8px; font-size:11.5px; color: var(--text-mute); position:relative; z-index:1; }
.live-pill{
  display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px;
  background: var(--success-soft); color: var(--success); font-size:11px; font-weight:700;
}
.live-pill .dot{ width:6px; height:6px; border-radius:50%; background: currentColor; }

/* ---------- کارت‌های اطلاعاتی ---------- */
.info-card-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
.info-card{ display:flex; flex-direction:column; transition: border-color .16s, box-shadow .16s; }
.info-card:hover{ border-color: var(--primary-line); box-shadow: var(--shadow-lg); }
.info-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.info-card hr{ margin:14px 0; }
.info-card-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:12.5px; padding:4px 0; }
.info-card-row .mono{ max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.info-card-foot{ margin-top:auto; padding-top:14px; display:flex; gap:8px; flex-wrap:wrap; }

/* ---------- لیست فایل‌ها ---------- */
.file-list{ display:flex; flex-direction:column; gap:8px; }
.file-row{
  display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
  padding:11px 13px; border:1px solid var(--border-soft); border-radius:12px; background: var(--surface-2);
}
.file-row .file-name{ min-width:0; overflow-wrap:anywhere; }

/* ---------- تاریخچه و دستگاه‌ها ---------- */
.history-item{ display:flex; gap:11px; padding:11px 0; border-bottom:1px solid var(--border-soft); }
.history-item:last-child{ border-bottom:none; }
.history-item-icon{ width:30px; height:30px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; font-size:14px; }
.history-item-icon.success{ background:var(--success-soft); color:var(--success); }
.history-item-icon.danger{ background:var(--danger-soft); color:var(--danger); }
.history-item-icon.warning{ background:var(--warning-soft); color:var(--warning); }
.history-item-icon.info{ background:var(--info-soft); color:var(--info); }
.device-row{ display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--border-soft); font-size:12.5px; }
.device-row:last-child{ border-bottom:none; }

/* ---------- اعلان شناور ---------- */
.toast-stack{
  position:fixed; top:20px; left:50%; transform:translateX(-50%); z-index:300;
  display:flex; flex-direction:column; gap:10px; width:min(420px, 92vw); pointer-events:none;
}
.toast-item{
  display:flex; align-items:flex-start; gap:10px; padding:13px 16px; border-radius:14px;
  background:var(--surface-2); border:1px solid var(--border); box-shadow: var(--shadow-lg);
  font-size:13.5px; pointer-events:auto; animation: toastIn .25s ease;
}
.toast-item i{ font-size:17px; margin-top:1px; flex:0 0 auto; }
.toast-item.success{ border-color:rgba(52,211,153,.35); }
.toast-item.success i{ color:var(--success); }
.toast-item.danger{ border-color:rgba(240,80,110,.35); }
.toast-item.danger i{ color:var(--danger); }
.toast-item.warning{ border-color:rgba(245,185,66,.35); }
.toast-item.warning i{ color:var(--warning); }
.toast-item.info{ border-color:rgba(91,141,239,.35); }
.toast-item.info i{ color:var(--info); }
.toast-item .toast-body{ flex:1 1 auto; white-space:pre-line; line-height:1.7; }
.toast-item .toast-close{ background:none; border:none; color:var(--text-mute); cursor:pointer; font-size:13px; flex:0 0 auto; }
.toast-item.leaving{ animation: toastOut .2s ease forwards; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(-10px) scale(.97); } to{ opacity:1; transform:none; } }
@keyframes toastOut{ from{ opacity:1; } to{ opacity:0; transform:translateY(-8px); } }

/* ---------- تایید ---------- */
.confirm-modal-icon{ width:48px; height:48px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:12px; }
.confirm-modal-icon.danger{ background:var(--danger-soft); color:var(--danger); }
.confirm-modal-icon.warning{ background:var(--warning-soft); color:var(--warning); }
.confirm-modal-icon.info{ background:var(--info-soft); color:var(--info); }
.confirm-modal-msg{ font-size:13.5px; color:var(--text-dim); white-space:pre-line; line-height:1.9; }

/* ---------- کارت سرور ---------- */
.node-card{ display:flex; flex-direction:column; height:100%; transition: border-color .16s, box-shadow .16s; }
.node-card:hover{ border-color: var(--primary-line); box-shadow: var(--shadow-lg); }
.node-card-title{ font-size:15.5px; font-weight:700; }
.node-card-meta{ color: var(--text-mute); font-size:12.5px; margin-top:3px; }
.node-card hr{ margin: 14px 0; }
.node-card .meta-row{ display:flex; justify-content:space-between; color: var(--text-dim); font-size:12.5px; margin-bottom:14px; }
.node-usage-row{ margin-top:-8px; }
.node-sys-stats{ margin-bottom:12px; display:flex; flex-direction:column; gap:7px; }
.sys-bar-row{ display:flex; align-items:center; gap:8px; font-size:11px; color:var(--text-mute); }
.sys-bar-label{ width:34px; flex:0 0 auto; }
.sys-bar{
  display:block; flex:1 1 auto; min-width:60px; height:8px;
  border-radius:5px; overflow:hidden; position:relative;
  background: var(--surface-hover);
  border:1px solid var(--border);
}
html[data-theme="light"] .sys-bar{ background:#e3e9f2; }
.sys-bar-fill{
  display:block; height:100%; width:0%; min-width:6px; border-radius:4px;
  background:linear-gradient(90deg, var(--primary-dark) 0%, var(--primary) 100%);
  box-shadow:0 0 8px -2px var(--primary);
  transition:width .35s ease;
}
.sys-bar-fill.warn{ box-shadow:0 0 8px -2px var(--warning); }
.sys-bar-fill.danger{ box-shadow:0 0 8px -2px var(--danger); }
.sys-bar-row{ min-height:18px; }
.sys-bar-fill.warn{ background:linear-gradient(90deg, #b45309, var(--warning)); }
.sys-bar-fill.danger{ background:linear-gradient(90deg, #9f1239, var(--danger)); }
.sys-bar-val{ width:38px; flex:0 0 auto; text-align:end; font-variant-numeric: tabular-nums; }

/* ---------- مودال ---------- */
.ui-modal{ position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:20px; }
.ui-modal.is-open{ display:flex; }
.ui-modal::before{ content:''; position:absolute; inset:0; background: rgba(3,6,13,.72); backdrop-filter: blur(4px); }
.ui-modal-dialog{ position:relative; width:100%; max-width:640px; max-height:88vh; display:flex; animation: modalIn .18s ease; }
@keyframes modalIn{ from{ opacity:0; transform: translateY(10px) scale(.985); } to{ opacity:1; transform:none; } }
.ui-modal-content{
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); width:100%; display:flex; flex-direction:column; overflow:hidden;
}
.ui-modal-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--border-soft); }
.ui-modal-head h5{ margin:0; font-size:15.5px; display:flex; align-items:center; gap:8px; }
.ui-modal-close{ background:none; border:none; color:var(--text-mute); cursor:pointer; font-size:16px; width:32px; height:32px; border-radius:9px; }
.ui-modal-close:hover{ background: var(--surface-hover); color: var(--text); }
.ui-modal-body{ padding: 22px; overflow-y:auto; }
.ui-modal-foot{ display:flex; justify-content:flex-end; gap:10px; padding:16px 22px; border-top:1px solid var(--border-soft); }
.qr-box img{ max-width:230px; border:10px solid #fff; border-radius:14px; box-shadow: var(--shadow); }

/* ---------- لاگ نصب ---------- */
#installLog{
  background: #05080f; color:#9be9c8; font-family:'JetBrains Mono','Courier New',monospace;
  font-size:13px; padding:18px; border-radius:14px; height:420px; overflow-y:auto;
  white-space:pre-wrap; word-break:break-all; border:1px solid var(--border-soft);
  direction: ltr; text-align: left;
}

/* ---------- صفحه‌ی ورود ---------- */
.login-shell{ min-height:100vh; display:flex; }
.login-form-side{ flex:0 0 min(520px, 46%); display:flex; align-items:center; justify-content:center; padding: 34px; }
.login-card{
  width:100%; max-width:410px; background: var(--surface); background-image: var(--card-sheen);
  border:1px solid var(--border-soft); border-radius: 22px; padding: 36px 32px; box-shadow: var(--shadow-lg);
}
.login-brand-badge{
  display:inline-flex; align-items:center; gap:7px; font-size:12px; color: var(--primary);
  background: var(--primary-soft); padding:6px 14px; border-radius:999px; margin-bottom:20px; font-weight:600;
}
.login-title{ font-size:24px; font-weight:800; margin-bottom:6px; }
.login-sub{ color: var(--text-dim); font-size:13.5px; margin-bottom:26px; }
.login-foot{ margin-top:22px; padding-top:16px; border-top:1px solid var(--border-soft); font-size:11.5px; color: var(--text-mute); display:flex; align-items:center; gap:7px; }
.login-brand-side{
  flex:1 1 auto; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center;
  padding: 60px; background: radial-gradient(900px 520px at 72% 18%, rgba(45,212,191,.15), transparent 62%), #060a12;
  border-inline-start: 1px solid var(--border-soft);
}
.login-brand-side .eyebrow{ color: var(--text-dim); font-size:13px; display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.login-brand-side .eyebrow::before{ content:''; width:26px; height:1px; background: var(--primary); }
.login-headline{ font-size:42px; font-weight:800; line-height:1.4; max-width:620px; }
.login-desc{ color: var(--text-dim); font-size:14.5px; max-width:52ch; margin-top:18px; line-height:2; }
.live-widget{
  margin-top:44px; max-width:480px; background: var(--surface); border:1px solid var(--border-soft);
  border-radius: var(--radius-lg); padding:20px; box-shadow: var(--shadow);
}
.live-widget-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.live-badge{ font-size:10.5px; font-weight:800; letter-spacing:.06em; color: var(--primary-ink); background: var(--primary); padding:3px 9px; border-radius:7px; }
.live-widget-title{ font-size:13px; font-weight:700; display:flex; align-items:center; gap:6px; }
.bars-row{ display:flex; align-items:flex-end; gap:6px; height:56px; margin-bottom:16px; }
.bars-row span{ flex:1; background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%); border-radius:5px; opacity:.85; }
.live-stats{ display:flex; justify-content:space-between; text-align:center; }
.live-stats div div:first-child{ font-size:15px; font-weight:800; }
.live-stats div div:last-child{ font-size:11px; color: var(--text-mute); margin-top:2px; }
@media (max-width: 980px){
  .login-brand-side{ display:none; }
  .login-form-side{ flex: 1 1 auto; }
}

/* ---------- موبایل ---------- */
@media (max-width: 980px){
  .sidebar{
    position: fixed !important;
    right: 0 !important; left: auto !important; top: 0 !important;
    width: 80vw !important; max-width: 310px !important; flex: 0 0 auto !important;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
    z-index: 200;
    box-shadow: -14px 0 44px rgba(0,0,0,.5);
  }
  .sidebar.is-open{ transform: translateX(0) !important; visibility: visible; transition: transform .25s ease, visibility 0s linear 0s; }
  .sidebar-toggle{ display:inline-flex; }
  .content-area{ padding: 18px 16px 34px; }
  .topbar{ padding: 0 16px; }
  .grid-3{ grid-template-columns: 1fr 1fr; }
  .d-none-mobile{ display:none !important; }
  .page-lead-title{ font-size:21px; }
}
@media (max-width: 560px){
  .table-responsive:has(.responsive-table){ overflow-x: visible; border:none; background:transparent; }
  .responsive-table{ background:transparent; }
  .responsive-table thead{ display:none; }
  .responsive-table tbody{ display:block; }
  .responsive-table tr{
    display:block; width:100%; background:var(--surface); border:1px solid var(--border-soft);
    border-radius:14px; margin-bottom:10px; padding:6px 13px;
  }
  .responsive-table tr:hover td:first-child::before{ display:none; }
  .responsive-table tr.group-detail-row{ background:transparent; border:none; padding:0; margin-bottom:14px; }
  .responsive-table tr.group-detail-row > td{ display:block; padding:0; }
  .responsive-table td{
    display:flex; justify-content:space-between; align-items:center; gap:10px;
    padding:9px 0; border-bottom:1px dashed var(--border-soft); text-align:left;
  }
  .responsive-table td:last-child{ border-bottom:none; }
  .responsive-table td.empty-cell{ display:block; text-align:center; }
  .responsive-table td::before{
    content: attr(data-label); font-weight:700; color:var(--text-mute); font-size:11px;
    flex:0 0 auto; text-align:right;
  }
  .responsive-table td .action-menu-wrap{ margin-inline-start:auto; }
  .responsive-table td .action-menu{ inset-inline-end:0; }
  .page-actions-row{ flex-direction:column; align-items:stretch; }
  .page-actions-row > *{ width:100%; }
  .page-actions-row .field{ width:100%; }
  .ui-table{ font-size:12.5px; }
  .ui-table thead th, .ui-table tbody td{ padding:11px 10px; }
  .check-tile{ width:100%; justify-content:space-between; }
  .ui-modal-dialog{ max-width:100% !important; }

  .login-card{ padding:28px 22px; }
  .action-menu{ min-width:180px; }
  .stat-card-value{ font-size:25px; }
}

/* پرده‌ی پشت ساید‌بار در موبایل */
.sidebar-backdrop{ position:fixed; inset:0; background: rgba(0,0,0,.55); z-index:190; display:none; }
.sidebar-backdrop.is-open{ display:block; }

/* ===========================================================
   اجزای جدید: فهرست اشتراک‌ها، صفحه‌ی اشتراک، پایش سیستم، تنظیمات
   =========================================================== */

.min-w0{ min-width:0; }

/* ---------- نوار جستجو و فیلتر ---------- */
.filter-bar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background: var(--surface); background-image: var(--card-sheen);
  border:1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding: 14px 16px; box-shadow: var(--shadow);
}
.search-field{ position:relative; flex:1 1 280px; min-width:220px; }
.search-field > i{
  position:absolute; inset-inline-start:14px; top:50%; transform:translateY(-50%);
  color: var(--text-mute); font-size:15px; pointer-events:none;
}
.search-field .ui-input{ padding-inline-start:40px; padding-inline-end:38px; }
.search-clear{
  position:absolute; inset-inline-end:8px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:8px; border:none; background:transparent;
  color:var(--text-mute); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:12px;
}
.search-clear:hover{ color: var(--danger); background: var(--danger-soft); }

.filter-pills{ display:flex; gap:7px; flex-wrap:wrap; }
.filter-pill{
  display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px;
  border:1px solid var(--border-soft); background: var(--surface-2); color: var(--text-dim);
  font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; transition: all .15s;
}
.filter-pill:hover{ color: var(--text); border-color: var(--border); }
.filter-pill.is-active{ background: var(--primary-soft); border-color: var(--primary-line); color: var(--primary); }
.pill-count{
  display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:20px; padding:0 6px;
  border-radius:999px; background: var(--bg-soft); font-size:11px; color: inherit;
}
.filter-pill.is-active .pill-count{ background: rgba(45,212,191,.18); }

/* ---------- ردیف اشتراک ---------- */
#subsTable tbody tr[data-sub-row]{ cursor:pointer; }
.sub-cell{ display:flex; align-items:center; gap:11px; min-width:0; }
.sub-avatar{
  width:38px; height:38px; border-radius:12px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px;
  background: linear-gradient(140deg, rgba(45,212,191,.22), rgba(91,141,239,.18));
  color: var(--primary); border:1px solid var(--border-soft);
}
.sub-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.id-badge{
  display:inline-flex; align-items:center; padding:4px 10px; border-radius:8px;
  background: var(--surface-2); border:1px solid var(--border-soft);
  font-size:12px; color: var(--text-dim); font-variant-numeric: tabular-nums; direction:ltr;
}

/* ---------- سربرگ صفحه‌ی اشتراک ---------- */
.sub-hero{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border:1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 22px;
  background:
    radial-gradient(680px 220px at 100% 0%, rgba(45,212,191,.14), transparent 70%),
    var(--surface);
  box-shadow: var(--shadow); margin-bottom: 22px; overflow:hidden;
}
.sub-hero::after{
  content:''; position:absolute; inset-inline-end:0; top:14px; bottom:14px; width:3px;
  border-radius:3px; background: var(--primary);
}
.sub-hero-main{ display:flex; align-items:center; gap:16px; min-width:0; }
.sub-hero-avatar{
  width:64px; height:64px; border-radius:20px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:800;
  background: linear-gradient(140deg, var(--primary) 0%, #0891b2 100%); color: var(--primary-ink);
  box-shadow: var(--glow);
}
.sub-hero-id{ font-size:12px; color: var(--text-mute); direction:ltr; text-align:start; }
.sub-hero-name{ font-size:26px; font-weight:800; line-height:1.4; overflow-wrap:anywhere; }
.sub-hero-meta{ font-size:12.5px; color: var(--text-dim); }
.sub-hero-badges{ display:flex; gap:8px; flex-wrap:wrap; }

.sub-tab-panel{ display:none; }
.sub-tab-panel.active{ display:block; animation: tabFadeIn .16s ease; }

.sub-grid{ display:grid; grid-template-columns: 330px 1fr; gap:18px; align-items:start; }
@media (max-width: 1020px){ .sub-grid{ grid-template-columns: 1fr; } }

/* ---------- عملیات سریع ---------- */
.quick-actions{ display:grid; grid-template-columns: 1fr 1fr; gap:9px; margin-top:10px; }
.quick-action{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  padding:16px 10px; border-radius:13px; border:1px solid var(--border-soft);
  background: var(--surface-2); color: var(--text); font-family:inherit; font-size:12.5px; font-weight:600;
  cursor:pointer; text-align:center; transition: border-color .15s, background .15s, transform .1s;
}
.quick-action i{ font-size:17px; color: var(--primary); }
.quick-action:hover{ border-color: var(--primary-line); background: var(--surface-hover); }
.quick-action:active{ transform: scale(.985); }
.quick-action.danger{ flex-direction:row; color: var(--danger); background: var(--danger-soft); border-color: transparent; padding:13px; }
.quick-action.danger i{ color: var(--danger); }

.kv-row{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:9px 0; border-bottom:1px dashed var(--border-soft); font-size:13px; color: var(--text-dim);
}
.kv-row:last-of-type{ border-bottom:none; }

/* ---------- کارت سرویس فعلی ---------- */
.service-card{
  background:
    radial-gradient(520px 180px at 100% 0%, rgba(45,212,191,.10), transparent 70%),
    var(--surface);
}
.service-title{ font-size:19px; font-weight:800; }
.service-stats{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:1px;
  background: var(--border-soft); border:1px solid var(--border-soft); border-radius: var(--radius); overflow:hidden;
}
@media (max-width: 900px){ .service-stats{ grid-template-columns: 1fr 1fr; } }
.service-stat{ background: var(--surface-2); padding:16px; }
.service-stat .label{ font-size:12px; color: var(--text-mute); }
.service-stat .value{ font-size:24px; font-weight:800; margin-top:6px; font-variant-numeric: tabular-nums; }
.service-stat .value .unit{ font-size:13px; font-weight:600; color: var(--text-dim); }
.service-stat .sub-note{ font-size:11.5px; color: var(--text-mute); margin-top:6px; }
.usage-bar{ height:5px; border-radius:4px; background: var(--bg-soft); overflow:hidden; margin-top:9px; }
.usage-bar span{ display:block; height:100%; background: linear-gradient(90deg, var(--primary-dark), var(--primary)); }

.date-row{ display:flex; align-items:center; gap:14px; margin-top:16px; flex-wrap:wrap; }
.date-chip{
  flex:1 1 220px; display:flex; align-items:center; gap:12px;
  border:1px solid var(--border-soft); border-radius: var(--radius); padding:14px; background: var(--surface-2);
}
.date-chip .tag{
  font-size:11px; font-weight:700; color: var(--primary); background: var(--primary-soft);
  padding:3px 9px; border-radius:7px; flex:0 0 auto;
}
.date-chip .label{ font-size:11.5px; color: var(--text-mute); }
.date-chip .value{ font-size:14px; font-weight:700; margin-top:2px; }
.date-line{ flex:0 0 36px; height:1px; background: var(--border); }

.access-mini{ background: var(--surface-2) !important; }

/* ---------- کارت دسترسی (peer) ---------- */
.access-card{ display:flex; flex-direction:column; }
.access-head{ display:flex; align-items:center; gap:11px; }
.wg-tag{
  width:42px; height:42px; border-radius:12px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px;
  background: var(--primary-soft); color: var(--primary);
}
.access-stats{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top:14px;
}
@media (max-width: 620px){ .access-stats{ grid-template-columns: 1fr; } }
.access-stats .label{ font-size:11.5px; color: var(--text-mute); }
.access-stats .value{ font-size:13.5px; font-weight:700; margin-top:3px; overflow-wrap:anywhere; }
.session-box{
  margin-top:14px; border:1px solid var(--border-soft); border-radius: var(--radius); padding:12px; background: var(--bg-soft);
}
.session-head{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; margin-bottom:8px; }
.session-row{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:7px 0; border-bottom:1px dashed var(--border-soft); font-size:12.5px;
}
.session-row:last-child{ border-bottom:none; }

/* ---------- نمودار ستونی ---------- */
.seg-group{ display:inline-flex; padding:4px; border-radius:12px; background: var(--surface-2); border:1px solid var(--border-soft); gap:2px; }
.seg-btn{
  padding:7px 14px; border-radius:9px; border:none; background:transparent; color: var(--text-dim);
  font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer; transition: all .15s;
}
.seg-btn:hover{ color: var(--text); }
.seg-btn.is-active{ background: var(--primary-soft); color: var(--primary); }

.chart-legend{ display:flex; gap:8px; flex-wrap:wrap; }
.legend-item{
  display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px;
  border:1px solid var(--border-soft); background: var(--surface-2); color: var(--text-dim);
  font-family:inherit; font-size:12px; cursor:pointer;
}
.legend-item.is-off{ opacity:.45; }
.legend-dot{ width:9px; height:9px; border-radius:3px; }

.chart-box{
  position:relative; display:flex; gap:10px; align-items:stretch;
  min-height:240px; border:1px solid var(--border-soft); border-radius: var(--radius);
  background: var(--bg-soft); padding:16px;
}
.chart-y{
  display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end;
  font-size:11px; color: var(--text-mute); padding-bottom:22px; flex:0 0 auto; min-width:56px;
}
.chart-bars{ flex:1 1 auto; display:flex; align-items:flex-end; gap:3px; }
.chart-col{ display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; min-width:0; }
.chart-bar{
  width:72%; min-height:2px; border-radius:5px 5px 2px 2px;
  background: linear-gradient(180deg, var(--primary) 0%, rgba(14,165,164,.45) 100%);
  transition: height .3s ease;
}
.chart-col:hover .chart-bar{ filter: brightness(1.2); }
.chart-x{ font-size:9.5px; color: var(--text-mute); margin-top:7px; height:14px; white-space:nowrap; direction:ltr; }
.chart-empty{ flex:1; display:flex; align-items:center; justify-content:center; color: var(--text-mute); font-size:13px; }

/* ---------- پیام‌ها/یادداشت‌ها ---------- */
.note-item{
  display:flex; align-items:flex-start; gap:12px;
  border:1px solid var(--border-soft); border-radius: var(--radius); padding:14px;
  background: var(--surface-2); margin-bottom:10px;
}

/* ---------- پایش سیستم ---------- */
.live-banner{
  background:
    radial-gradient(600px 200px at 0% 0%, rgba(45,212,191,.12), transparent 70%),
    var(--surface);
}
.live-orb{
  width:56px; height:56px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background: var(--primary-soft); border:1px solid var(--primary-line);
}
.live-orb span{ width:14px; height:14px; border-radius:50%; background: var(--primary); box-shadow: 0 0 18px var(--primary); }
.kv-tile{
  border:1px solid var(--border-soft); border-radius: var(--radius); padding:14px; background: var(--surface-2);
}
.kv-tile .label{ font-size:11.5px; color: var(--text-mute); }
.kv-tile .value{ font-size:15px; font-weight:700; margin-top:5px; overflow-wrap:anywhere; }

/* ---------- تنظیمات ---------- */
.settings-nav{ display:grid; grid-template-columns: repeat(5, 1fr); gap:10px; }
@media (max-width: 1100px){ .settings-nav{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px){ .settings-nav{ grid-template-columns: 1fr; } }
.settings-nav-item{
  display:flex; align-items:center; gap:11px; padding:14px;
  border:1px solid var(--border-soft); border-radius: var(--radius); background: var(--surface);
  transition: border-color .15s, background .15s;
}
.settings-nav-item:hover{ border-color: var(--primary-line); background: var(--surface-hover); }
.settings-nav-item.is-active{ border-color: var(--primary-line); background: var(--primary-soft); }
.settings-nav-icon{
  width:38px; height:38px; border-radius:11px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background: var(--surface-2); color: var(--primary); font-size:16px; border:1px solid var(--border-soft);
}
.settings-nav-item.is-active .settings-nav-icon{ background: rgba(45,212,191,.16); }
.settings-nav-title{ display:block; font-size:13.5px; font-weight:700; }
.settings-nav-desc{ display:block; font-size:11.5px; color: var(--text-mute); }

.settings-grid{ display:grid; grid-template-columns: 320px 1fr; gap:18px; align-items:start; }
@media (max-width: 1020px){ .settings-grid{ grid-template-columns: 1fr; } }

.access-level-card{
  display:flex; align-items:center; gap:12px; padding:12px 16px;
  border:1px solid var(--border-soft); border-radius: var(--radius); background: var(--surface);
}
.access-level-badge{
  width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:17px; background: var(--primary-soft); color: var(--primary);
}
.account-avatar{
  width:84px; height:84px; border-radius:26px; margin-inline:auto;
  display:flex; align-items:center; justify-content:center; font-size:34px;
  background: linear-gradient(140deg, var(--primary) 0%, #0891b2 100%); color: var(--primary-ink);
  box-shadow: var(--glow);
}

/* ---------- انتخاب‌گر کشویی سرور/تانل ---------- */
.picker-details{
  border:1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft); overflow:hidden;
}
.picker-details > summary{
  display:flex; align-items:center; gap:10px; cursor:pointer; padding:13px 15px; font-size:13.5px; font-weight:600;
  list-style:none; user-select:none;
}
.picker-details > summary::-webkit-details-marker{ display:none; }
.picker-details > summary:hover{ background: var(--surface); }
.picker-summary-note{ margin-inline-start:auto; font-size:11.5px; color: var(--text-mute); font-weight:500; }
.picker-caret{ transition: transform .18s ease; color: var(--text-mute); }
.picker-details[open] .picker-caret{ transform: rotate(180deg); }
.picker-body{ padding: 0 13px 13px; }
.check-tile-list.is-locked{ opacity:.7; pointer-events:none; }

/* ---------- کلیدهای فعال/مخفی ---------- */
.flag-row{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; padding-top:12px;
  border-top:1px dashed var(--border-soft);
}
.flag-item{
  display:inline-flex; align-items:center; gap:8px; font-size:12px; color: var(--text-dim);
  background: var(--surface-2); border:1px solid var(--border-soft); border-radius:999px; padding:5px 12px;
}
.flag-item i{ color: var(--warning); font-size:13px; }

/* ---------- رزرو و لینک اشتراک ---------- */
.reserve-chip{
  display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius: var(--radius);
  background: var(--info-soft); border:1px solid rgba(91,141,239,.25);
}
.reserve-chip > i{ color: var(--info); font-size:18px; }
#reserveCard.is-flash{ border-color: var(--primary); box-shadow: var(--glow); }
.share-link{
  direction:ltr; text-align:left; font-size:11.5px; word-break:break-all;
  background: var(--bg-soft); border:1px solid var(--border-soft); border-radius:10px; padding:10px;
}

/* ---------- صفحه‌ی عمومی مشترک ---------- */
.pub-shell{ max-width: 1000px; margin-inline:auto; padding: 22px 16px 40px; }
.pub-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid var(--border-soft);
}
.pub-head .brand-title{ font-size:16px; font-weight:800; }
.pub-notices{ margin-bottom:16px; }

/* ---------- انتخاب سیاست سقف دستگاه ---------- */
.policy-choice{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
@media (max-width: 800px){ .policy-choice{ grid-template-columns: 1fr; } }
.policy-option{
  display:flex; align-items:flex-start; gap:11px; padding:14px; cursor:pointer;
  border:1px solid var(--border-soft); border-radius: var(--radius); background: var(--surface-2);
  transition: border-color .15s, background .15s;
}
.policy-option:hover{ border-color: var(--primary-line); }
.policy-option.is-active{ border-color: var(--primary-line); background: var(--primary-soft); }
.policy-option input{ accent-color: var(--primary); margin-top:3px; flex:0 0 auto; }

/* ===========================================================
   موبایل: کارت‌ها سه‌ستونی و فشرده
   (هر چیزی که در سه ستون جا نمی‌شود، کوچک‌تر یا مخفی می‌شود)
   =========================================================== */
@media (max-width: 620px){
  .grid-2, .grid-3, .grid-4,
  .info-card-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .card, .panel{ padding: 13px; border-radius: 14px; }
  .card.p-3, .card.p-4{ padding: 13px; }
  .card-eyebrow{ font-size: 10.5px; margin-bottom: 4px; }
  .section-divider{ font-size: 12.5px; margin-bottom: 11px; }

  /* کارت‌های آماری */
  .stat-card{ padding: 13px; border-radius: 14px; }
  .stat-card-icon{
    position: static; width: 30px; height: 30px; border-radius: 10px;
    font-size: 13px; margin-bottom: 7px;
  }
  .stat-card-label{ font-size: 11.5px; padding-inline-end: 0; line-height: 1.6; }
  .stat-card-value{ font-size: 19px !important; margin-top: 4px; line-height: 1.4; }
  .stat-card-foot{ font-size: 10.5px; margin-top: 6px; gap: 6px; flex-wrap: wrap; }
  .live-pill{ font-size: 9px; padding: 2px 6px; }
  .stat-card::after{ display: none; }

  /* کارت سرور/تانل/دسترسی */
  .node-card-title, .info-card-head .fw-semibold{ font-size: 13.5px; overflow-wrap: anywhere; }
  .node-card-meta{ font-size: 11px; }
  .info-card-row{ font-size: 11.5px; padding: 3px 0; gap: 6px; }
  .info-card-row .mono{ max-width: 100%; font-size: 10px; }
  .info-card-foot{ padding-top: 9px; }
  .info-card-head{ flex-direction: column; align-items: flex-start; gap: 5px; }
  .card hr, .node-card hr, .info-card hr{ margin: 9px 0; }
  .sys-bar-row{ font-size: 10px; gap: 6px; }
  .sys-bar-label{ width: 30px; }
  .sys-bar-val{ width: 34px; }
  .sys-bar{ height: 8px; min-width: 40px; }
  .chip{ font-size: 10.5px; padding: 3px 9px; }
  .badge-soft{ font-size: 10.5px; padding: 3px 8px; }
  .badge-count{ min-width: 18px; height: 18px; font-size: 10px; }
  .status-dot{ width: 7px; height: 7px; }

  /* دکمه‌ها در ستون‌های باریک */
  .btn-ui{ padding: 9px 12px; font-size: 12.5px; border-radius: 10px; }
  .btn-ui-sm{ padding: 7px 10px; font-size: 11.5px; }
  .icon-btn{ width: 28px; height: 28px; font-size: 12px; }
  .info-card-foot .btn-ui, .node-card .btn-ui{ width: 100%; }

  /* سرصفحه‌ی صفحه */
  .content-area{ padding: 14px 11px 30px; }
  .page-lead-title{ font-size: 18px; }
  .page-lead-sub{ font-size: 11.5px; }
  .page-eyebrow{ font-size: 10.5px; }
  .page-actions-row{ margin-bottom: 16px; gap: 10px; }
}

/* ---------- فهرست اشتراک‌ها در موبایل: ردیف‌های فشرده ---------- */
@media (max-width: 620px){
  .filter-bar{ padding: 10px; gap: 9px; }
  .filter-pill{ padding: 6px 10px; font-size: 11.5px; }
  .pill-count{ min-width: 18px; height: 17px; font-size: 10px; }

  .responsive-table tr{ padding: 4px 10px; border-radius: 12px; margin-bottom: 7px; }
  .responsive-table td{ padding: 6px 0; font-size: 11.5px; }
  .responsive-table td::before{ font-size: 10px; }
  .sub-avatar{ width: 28px; height: 28px; border-radius: 9px; font-size: 12px; }
  .sub-cell{ gap: 8px; }
  .sub-name{ font-size: 12.5px; }
  .id-badge{ font-size: 10.5px; padding: 2px 7px; }

  /* فهرست اشتراک‌ها روی موبایل جمع‌وجورتر: ستون شناسه داخل نام نمایش داده می‌شود */
  #subsTable td[data-label="شناسه"]{ padding-top: 0; border-bottom: none; }
  #subsBody tr{ position: relative; }
}

/* ---------- صفحه‌ی جزئیات اشتراک در موبایل ---------- */
@media (max-width: 620px){
  .sub-hero{ padding: 13px; margin-bottom: 14px; border-radius: 14px; }
  .sub-hero-avatar{ width: 42px; height: 42px; border-radius: 14px; font-size: 18px; }
  .sub-hero-name{ font-size: 17px; }
  .sub-hero-id, .sub-hero-meta{ font-size: 10.5px; }
  .sub-hero-main{ gap: 10px; }

  .tab-bar{ gap: 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .tab-bar::-webkit-scrollbar{ display: none; }
  .tab-btn{ padding: 9px 11px; font-size: 12px; white-space: nowrap; }

  .service-stats{ grid-template-columns: 1fr 1fr; }
  .service-stat{ padding: 9px; }
  .service-stat .label{ font-size: 10.5px; }
  .service-stat .value{ font-size: 17px; margin-top: 4px; }
  .service-stat .value .unit{ font-size: 10px; }
  .service-stat .sub-note{ font-size: 9px; margin-top: 4px; }
  .service-title{ font-size: 14px; }

  .date-row{ gap: 8px; margin-top: 11px; }
  .date-chip{ flex: 1 1 100%; padding: 9px; gap: 8px; }
  .date-chip .label{ font-size: 9.5px; }
  .date-chip .value{ font-size: 11.5px; }
  .date-line{ display: none; }

  .quick-actions{ grid-template-columns: 1fr 1fr; gap: 8px; }
  .quick-action{ padding: 12px 8px; font-size: 11.5px; gap: 6px; border-radius: 12px; }
  .quick-action i{ font-size: 16px; }
  .quick-action.danger{ font-size: 11px; padding: 10px; }
  .kv-row{ font-size: 11.5px; padding: 6px 0; }
  .kv-tile{ padding: 9px; }
  .kv-tile .label{ font-size: 9.5px; }
  .kv-tile .value{ font-size: 11.5px; }

  .access-card .access-head{ flex-direction: row; align-items: center; gap: 8px; }
  .wg-tag{ width: 28px; height: 28px; border-radius: 9px; font-size: 10px; }
  .access-stats{ grid-template-columns: 1fr; gap: 5px; margin-top: 9px; }
  .access-stats .label{ font-size: 9.5px; }
  .access-stats .value{ font-size: 11px; }
  .session-box{ padding: 9px; margin-top: 9px; }
  .session-row{ font-size: 10.5px; padding: 5px 0; flex-wrap: wrap; gap: 4px; }
  .note-item{ padding: 10px; }
  .reserve-chip{ padding: 9px; }
  .share-link{ font-size: 10px; padding: 8px; }

  .chart-box{ min-height: 170px; padding: 10px; gap: 6px; }
  .chart-y{ min-width: 40px; font-size: 9px; }
  .chart-x{ font-size: 8px; }
  .chart-legend .legend-item{ font-size: 10.5px; padding: 4px 9px; }
  .seg-btn{ padding: 5px 9px; font-size: 11px; }
}

/* ---------- صفحه‌ی عمومی مشترک در موبایل ---------- */
@media (max-width: 620px){
  .pub-shell{ padding: 14px 11px 28px; }
  .pub-head{ padding-bottom: 11px; margin-bottom: 13px; }
  .pub-head .brand-title{ font-size: 13.5px; }
  .pub-head .brand-icon{ width: 34px; height: 34px; border-radius: 11px; font-size: 15px; }
  .ui-alert{ padding: 10px 11px; font-size: 11.5px; gap: 8px; border-radius: 11px; }
}

/* ---------- کلیدهای فعال/مخفی داخل منوی عملیات ---------- */
.menu-flag-group{ padding: 4px 2px; }
.menu-flag{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:7px 11px; border-radius:9px; font-size:13px; cursor:pointer; color: var(--text);
}
.menu-flag:hover{ background: var(--surface-hover); }
.menu-flag > span:first-child{ display:flex; align-items:center; gap:9px; }
.menu-flag i{ width:16px; text-align:center; color: var(--text-dim); font-size:14px; }
.menu-flag .ui-switch{ flex:0 0 auto; }

/* ---------- ساید‌بار موبایل: اسکرول درست ---------- */
@media (max-width: 980px){
  .sidebar{
    height: 100dvh !important;
    max-height: 100dvh;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .sidebar nav{ flex: 0 0 auto; }          /* نگذارد nav فشرده شود و آیتم‌ها پنهان بمانند */
  .sidebar-foot{ flex: 0 0 auto; margin-top: 18px; }
  .sidebar .nav-link{ padding: 9px 12px; }
  .nav-group-label{ margin: 11px 12px 5px; }
}

/* ---------- نوار بخش‌های تنظیمات در موبایل ---------- */
@media (max-width: 620px){
  .settings-nav{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px; }
  .settings-nav-item{ flex-direction: column; align-items: flex-start; gap: 7px; padding: 10px; }
  .settings-nav-icon{ width: 28px; height: 28px; border-radius: 9px; font-size: 13px; }
  .settings-nav-title{ font-size: 12px; }
  .settings-nav-desc{ display: none; }
  .settings-grid{ gap: 12px; }
  .access-level-card{ padding: 9px 12px; }
  .access-level-badge{ width: 34px; height: 34px; font-size: 14px; border-radius: 11px; }
  .account-avatar{ width: 60px; height: 60px; border-radius: 20px; font-size: 24px; }
}

/* ===========================================================
   موبایل — اصلاح کشیدگی محتوای کارت‌های سه‌ستونی
   در ستون باریک، هر ردیفِ «برچسب کنارِ مقدار» به چند خط می‌شکست و کارت
   بی‌دلیل بلند می‌شد. اینجا این ردیف‌ها عمودی می‌شوند، مقدارهای بلند با «…»
   کوتاه می‌شوند و دکمه‌ها به‌جای ستون تک‌تایی، شبکه‌ای می‌چینند.
   =========================================================== */
@media (max-width: 620px){

  /* گریدهای دوتایی که محتوای متنی سنگین دارند (تاریخچه، بکاپ، داشبورد)
     در موبایل تک‌ستونی می‌مانند؛ فقط کارت‌های فشرده سه/دو ستونی می‌شوند. */
  /* گریدهای دوتایی متن‌محور (تاریخچه، بکاپ، داشبورد) تک‌ستونی می‌مانند */
  .grid-2{ grid-template-columns: 1fr !important; }
  .grid-2:has(.access-card){ grid-template-columns: 1fr 1fr !important; }

  /* --- ردیف برچسب/مقدار --- */
  .info-card-row{
    flex-direction: column; align-items: flex-start; gap: 1px; padding: 4px 0;
    border-bottom: 1px dashed var(--border-soft);
  }
  .info-card-row:last-child{ border-bottom: none; }
  .info-card-row > span:first-child{ font-size: 10.5px; color: var(--text-mute); }
  .info-card-row > span:last-child,
  .info-card-row .mono{
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 11.5px; text-align: start;
  }
  /* ردیف‌هایی که کلید یا بج دارند باید افقی بمانند */
  .info-card-row:has(.ui-switch),
  .info-card-row:has(.badge-count){
    flex-direction: row; align-items: center; justify-content: space-between; gap: 8px;
  }
  .info-card-row:has(.ui-switch) > span:first-child,
  .info-card-row:has(.badge-count) > span:first-child{ font-size: 10.5px; }

  /* --- کارت سرور در «زیرساخت» --- */
  .node-card .node-card-meta{
    direction: ltr; text-align: start; font-size: 9.5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
  }
  .node-card > .d-flex.justify-content-between{
    flex-direction: column; align-items: flex-start !important; gap: 6px;
  }
  .node-card .node-live-chip{ font-size: 9.5px; padding: 2px 8px; }
  .node-card .meta-row{
    flex-direction: column; align-items: flex-start; gap: 3px; font-size: 10px; margin-bottom: 9px;
  }
  .node-card .meta-row > span{
    display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .node-card > .d-flex.gap-2.mt-auto{ gap: 5px; align-items: center; }
  .node-card > .d-flex.gap-2.mt-auto .btn-ui{ width: auto; flex: 1 1 auto; }

  /* --- کارت تانل --- */
  .info-card .info-card-head{ gap: 4px; }
  .info-card .chip{ max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* --- کارت دسترسی در صفحه‌ی اشتراک --- */
  /* هدر افقی می‌ماند تا نشان پروتکل کنار نام سرور بنشیند */
  .access-card .access-head{ flex-direction: row; align-items: center; gap: 7px; }
  .access-card .access-head .badge-soft{ align-self: center; }
  .access-card .access-stats .value{
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; text-align: start;
  }
  /* دکمه‌های عملیات: دو ستونی به‌جای پشت‌سرهم عمودی */
  .access-card > .d-flex.gap-2.mt-3{
    display: grid; grid-template-columns: 1fr 1fr; gap: 5px;
  }
  .access-card > .d-flex.gap-2.mt-3 > *{ width: 100%; margin: 0; }
  .access-card .btn-ui-sm{ padding: 7px 6px; font-size: 11px; }

  /* --- کارت‌های کوچک «کانفیگ و QR هر سرور» --- */
  .access-mini .d-flex.justify-content-between{ gap: 5px; }
  .access-mini .chip{ font-size: 9px; padding: 2px 6px; }
  .access-mini > .small{
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: start;
  }
  .access-mini .d-flex.gap-2.mt-3{ display: grid; grid-template-columns: 1fr; gap: 5px; }

  /* --- ردیف فایل‌های بکاپ --- */
  .file-row{ flex-direction: column; align-items: stretch; gap: 6px; padding: 9px 10px; }
  .file-row .file-name{ font-size: 10px; word-break: break-all; direction: ltr; text-align: start; }
  .file-row .d-flex{ justify-content: flex-start; }

  /* --- تاریخچه و نشست‌ها --- */
  .history-item{ gap: 8px; padding: 8px 0; }
  .history-item-icon{ width: 24px; height: 24px; border-radius: 8px; font-size: 11px; }
  .history-item .small{ font-size: 10.5px; }
  .device-row{ font-size: 10.5px; }

  /* --- کارت پلن --- */
  .info-card .fw-semibold{ font-size: 12.5px; }
  .info-card-foot{ display: flex; gap: 5px; flex-wrap: wrap; }
  .info-card-foot .chip{ font-size: 9px; }
}

@media (max-width: 620px){
  /* آمار داخل کارت سرویس چهار موردی است؛ دو ستونی (۲×۲) متوازن‌تر از سه ستونی است */
  .service-stats{ grid-template-columns: 1fr 1fr; }
  .service-stat .value{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .service-stat .sub-note{ overflow-wrap: anywhere; }
}

@media (max-width: 620px){
  /* منوی «مدیریت سرور/پلن» در ستون باریک نباید از کارت بیرون بزند */
  .action-menu{ min-width: 172px; max-width: 78vw; }
  .action-menu-item{ font-size: 12px; padding: 8px 10px; }
  .menu-flag{ font-size: 12px; padding: 6px 10px; }
  .node-card .action-menu-wrap.flex-fill{ width: 100%; }
}

/* ---------- فرم‌ها و انتخاب‌گر سرور در موبایل ---------- */
@media (max-width: 620px){
  .form-grid{ gap: 10px; }
  .field label{ font-size: 11px; }
  .field-hint{ font-size: 10px; }
  .ui-input, .ui-select, textarea.ui-input, select.ui-input{ padding: 9px 11px; font-size: 12.5px; border-radius: 10px; }
  .ui-modal-body{ padding: 14px; }
  .ui-modal-head{ padding: 13px 14px; }
  .ui-modal-head h5{ font-size: 13.5px; }
  .ui-modal-foot{ padding: 12px 14px; }
}

/* ---------- انتخاب‌گر سرور/تانل: فشرده و مرتب ---------- */
.check-tile-list{ padding: 8px; gap: 6px; flex-direction: column; }
.check-tile{
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 8px; padding: 9px 11px; width: 100%;
}
.check-tile-main{ display: contents; }
.check-tile-main input{ grid-column: 1; }
.check-tile-main span{ grid-column: 2; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.check-tile .badge-offline{ grid-column: 3; }
.tunnel-picker-group{
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--border-soft);
}
/* هر تانل یک تراشه‌ی کوچک به‌جای یک ردیف کامل */
.tunnel-check-item{
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  padding: 4px 9px; border-radius: 999px; font-size: 11.5px;
  background: var(--surface-2); border: 1px solid var(--border-soft);
}
.tunnel-check-item span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
.tunnel-check-item:has(input:checked){ border-color: var(--primary-line); background: var(--primary-soft); color: var(--primary); }
.picker-details{ max-height: 320px; display: block; }
.picker-details[open] .picker-body{ max-height: 260px; overflow-y: auto; }

/* ---------- نمودار: وقتی ستون‌ها زیاد است برچسب‌ها یکی‌درمیان ---------- */
.chart-bars{ min-width: 0; }
.chart-col{ min-width: 0; overflow: hidden; }
.chart-bars.dense .chart-x{ display: none; }
.chart-bars.dense .chart-col:nth-child(3n + 1) .chart-x{ display: block; }
@media (max-width: 620px){
  .chart-bars.dense .chart-x{ display: none; }
  .chart-bars.dense .chart-col:nth-child(4n + 1) .chart-x{ display: block; }
  .chart-bar{ width: 80%; }
  .chart-x{ font-size: 8px; }
}

/* عکس نمایه‌ی مدیر در ساید‌بار/هدر */
.sidebar-user img.avatar, .topbar-user-trigger img.avatar{ object-fit: cover; }
img.account-avatar{ display:block; }

/* ---------- Remote Setup ---------- */
.remote-hero{
  background:
    radial-gradient(600px 200px at 100% 0%, rgba(45,212,191,.12), transparent 70%),
    var(--surface);
}
.remote-hero-icon{
  width:52px; height:52px; border-radius:16px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; font-size:20px;
  background: var(--primary-soft); color: var(--primary); border:1px solid var(--primary-line);
}
.remote-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; align-items:start; }
@media (max-width: 1020px){ .remote-grid{ grid-template-columns: 1fr; } }

.terminal-card{ padding:0 !important; overflow:hidden; display:flex; flex-direction:column; }
.terminal-head{
  display:flex; align-items:center; gap:12px; padding:11px 14px;
  border-bottom:1px solid var(--border-soft); background: var(--surface-2);
}
.terminal-dots{ display:flex; gap:6px; }
.terminal-dots i{ width:11px; height:11px; border-radius:50%; background:var(--danger); display:block; }
.terminal-dots i:nth-child(2){ background:var(--warning); }
.terminal-dots i:nth-child(3){ background:var(--success); }
.terminal-body{
  background:#05080f; color:#9be9c8; font-family:'JetBrains Mono','Courier New',monospace;
  font-size:12.5px; line-height:1.9; padding:16px; min-height:420px; max-height:60vh; overflow-y:auto;
  white-space:pre-wrap; word-break:break-word; direction:ltr; text-align:left; flex:1 1 auto;
}
html[data-theme="light"] .terminal-body{ background:#0a0f1a; }
.terminal-foot{
  display:flex; justify-content:space-between; padding:9px 14px;
  border-top:1px solid var(--border-soft); background: var(--surface-2);
}
.rs-toggle-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:1px solid var(--border-soft); border-radius: var(--radius); padding:12px 14px; background: var(--surface-2);
}
@media (max-width: 620px){
  .terminal-body{ min-height:240px; font-size:11px; padding:12px; }
  .remote-hero-icon{ width:42px; height:42px; font-size:17px; border-radius:13px; }
}

/* بج پروتکل روی کارت سرور */
.badge-soft.violet{ background: var(--violet-soft); color: var(--violet); }

/* سرگروه سرور در فهرست تانل‌ها */
.tunnel-group-head{
  display:flex; align-items:center; gap:8px; margin: 0 0 10px;
  font-size:13px; font-weight:700; color: var(--text-dim);
}
.tunnel-group-head i{ color: var(--primary); }

/* ===========================================================
   لینک‌های کانفیگ ویتوری (کانفیگ تکی + لینک ساب)
   =========================================================== */
.link-row{
  margin-top: 10px; padding: 9px 11px; border-radius: 12px;
  border: 1px solid var(--border-soft); background: var(--surface);
  min-width: 0; overflow: hidden;
}
.link-row.is-sub{ border-color: var(--primary-line); }
.link-row-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap; margin-bottom: 6px;
}
.link-row-tag{ font-size: 12px; font-weight: 700; color: var(--text-dim); }
.link-row-actions{ display: flex; gap: 6px; flex-wrap: wrap; }
.link-row-value{
  font-size: 11.5px; color: var(--text-mute); direction: ltr; text-align: start;
  background: var(--surface-hover); border-radius: 9px; padding: 6px 8px;
  word-break: break-all; overflow-wrap: anywhere; max-height: 66px; overflow: auto;
}

/* ردیف دکمه‌های کارت دسترسی — پایه‌ی مشترک دسکتاپ */
.access-actions{
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; min-width: 0;
}
.access-actions > *{ min-width: 0; }

/* ===========================================================
   صفحه‌ی لینک ساب در موبایل — کانفیگ‌ها دو ستونی
   کارت‌ها کنار هم می‌نشینند، نشان پروتکل (WG / OVPN / V2) روی همه‌ی
   کارت‌ها دیده می‌شود ولی ریز، و دکمه‌ها جوری می‌چینند که هیچ‌وقت از
   کادر بیرون نزنند.
   =========================================================== */
@media (max-width: 620px){
  .grid-2:has(.access-card){
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
  }
  .access-card{ padding: 12px; min-width: 0; overflow: hidden; }

  /* نشان پروتکل: کوچک، همیشه دیده می‌شود */
  .access-card .wg-tag{
    display: flex !important;
    width: 30px; height: 30px; border-radius: 9px; padding: 0 2px;
    font-size: 10px; font-weight: 800; letter-spacing: -0.3px;
    line-height: 1;                     /* اندازه طوری است که «OVPN» هم جا شود */
  }
  .access-card .access-head{ gap: 6px; }
  .access-card .access-head .fw-semibold{
    font-size: 13.5px; line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .access-card .access-head .small{
    font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* نشان «متصل/قطع» در ستون باریک فقط نقطه‌ی رنگی می‌شود */
  .access-card .access-head > .badge-soft{
    padding: 3px 5px; font-size: 0; gap: 0; flex: 0 0 auto;
  }
  .access-card .access-head > .badge-soft .status-dot{ margin: 0; }

  .access-card .access-stats{ gap: 6px; margin-top: 10px; }
  .access-card .access-stats .label{ font-size: 11px; }
  .access-card .access-stats .value{ font-size: 13px; font-weight: 700; }

  /* دکمه‌ها: دو تا در هر ردیف؛ اگر تعدادشان فرد بود، آخری تمام‌عرض */
  .access-card > .d-flex.gap-2.mt-3,
  .access-card .access-actions{
    display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 10px; width: 100%;
  }
  .access-card > .d-flex.gap-2.mt-3 > *,
  .access-card .access-actions > *{
    width: 100%; margin: 0; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .access-card .access-actions > *:last-child:nth-child(odd){ grid-column: 1 / -1; }
  .access-card .btn-ui-sm{ padding: 8px 5px; font-size: 11px; gap: 4px; }
  .access-card .btn-ui-sm i{ font-size: 12px; }

  /* لینک‌های ویتوری داخل ستون باریک */
  .access-card .link-row{ padding: 7px 8px; margin-top: 8px; }
  .access-card .link-row-tag{ font-size: 11px; }
  .access-card .link-row-actions{ grid-template-columns: 1fr 1fr; gap: 5px; }
  .access-card .link-row-value{ font-size: 10.5px; max-height: 58px; padding: 6px 7px; }

  /* جعبه‌ی نشست‌ها هم باید در ستون باریک جا شود */
  .access-card .session-box{ padding: 9px; margin-top: 10px; }
  .access-card .session-box .small{ font-size: 10px; }
}

/* گوشی‌های خیلی باریک: برگرد به یک ستون تا چیزی له نشود */
@media (max-width: 360px){
  .grid-2:has(.access-card){ grid-template-columns: 1fr !important; }
  .access-card .access-head > .badge-soft{ font-size: 10.5px; padding: 3px 7px; gap: 5px; }
}

/* ===========================================================
   آموزش اتصال (کشویی) در صفحه‌ی لینک ساب
   =========================================================== */
.guide-card{ padding: 0; overflow: hidden; }
.guide > summary,
.guide-sub > summary{
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 9px;
}
.guide > summary::-webkit-details-marker,
.guide-sub > summary::-webkit-details-marker{ display: none; }

.guide > summary{
  padding: 15px 16px; font-weight: 700; font-size: 14.5px;
}
.guide > summary > span:first-child{ flex: 1 1 auto; }
.guide-arrow{ flex: 0 0 auto; transition: transform .18s ease; color: var(--text-mute); font-size: 13px; }
.guide[open] > summary .guide-arrow,
.guide-sub[open] > summary .guide-arrow{ transform: rotate(180deg); }
.guide > summary:hover{ background: var(--surface-hover); }

.guide-body{ padding: 0 12px 12px; }

.guide-sub{ border: 1px solid var(--border-soft); border-radius: 12px; margin-top: 8px; background: var(--bg-soft); }
.guide-sub > summary{ padding: 11px 12px; font-weight: 600; font-size: 13.5px; }
.guide-sub > summary > .guide-arrow{ margin-inline-start: auto; }
.guide-sub[open] > summary{ border-bottom: 1px solid var(--border-soft); }
.guide-sub-body{ padding: 12px; }

.guide-tag{
  width: 34px; height: 22px; border-radius: 7px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 800; line-height: 1;
  background: var(--primary-soft); color: var(--primary);
}
.guide-tag-q{ width: 22px; font-size: 12px; }

.guide-lead{ margin: 0 0 10px; font-size: 13px; color: var(--text-dim); line-height: 1.85; }
.guide-os{
  margin: 12px 0 6px; font-size: 12.5px; color: var(--text-dim);
  padding-bottom: 5px; border-bottom: 1px dashed var(--border-soft);
}
.guide-os:first-child{ margin-top: 0; }
.guide-sub-body ol,
.guide-sub-body ul{ margin: 0; padding-inline-start: 20px; }
.guide-sub-body li{ font-size: 13px; line-height: 2; color: var(--text-dim); }
.guide-note{
  margin: 10px 0 0; padding: 9px 11px; border-radius: 10px;
  background: var(--surface-hover); font-size: 12px; color: var(--text-mute); line-height: 1.9;
}

@media (max-width: 620px){
  .guide > summary{ padding: 13px 13px; font-size: 13.5px; }
  .guide-body{ padding: 0 9px 9px; }
  .guide-sub > summary{ padding: 10px; font-size: 12.5px; }
  .guide-sub-body{ padding: 10px; }
  .guide-sub-body li{ font-size: 12.5px; line-height: 1.95; }
  .guide-lead{ font-size: 12.5px; }
}