@font-face {
  font-family: "VazirLocal";
  src: url("../fonts/Vazir-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VazirLocal";
  src: url("../fonts/Vazir-Bold.ttf") format("truetype");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --bg0: #111418;
  --bg1: #111418;
  --accent: #25c77a;
  --accent2: #b7f3d0;
  --text: #e7fff2;
  --muted: #707981;
  --danger: #ff6b6b;
  --ok: #25c77a;
  --glass: rgba(17, 20, 24, 0.82);
  --glass-border: rgba(183, 243, 208, 0.14);
  --shadow: 0 22px 70px rgba(0, 0, 0, 0.48);
  --radius: 18px;
  --font: "VazirLocal", Tahoma, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font);
  color: var(--text);
  background: radial-gradient(circle at 72% 0%, rgba(37, 199, 122, .17), transparent 34%), linear-gradient(145deg, var(--bg0), var(--bg1) 60%, #111418);
  overflow-x: hidden;
}

.bg-orb {
  position: fixed; border-radius: 50%; filter: blur(60px); opacity: .45; z-index: 0; pointer-events: none;
  animation: float 12s ease-in-out infinite;
}
.bg-orb-a { width: 500px; height: 500px; background: #25c77a; top: -180px; right: 18%; opacity: .16; }
.bg-orb-b { width: 420px; height: 420px; background: #b7f3d0; bottom: -160px; left: -80px; opacity: .08; animation-delay: -4s; }
@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(24px) scale(1.05); }
}

.app-shell { position: relative; z-index: 1; max-width: 1540px; margin: 0 auto; padding: 18px 24px 60px; }
.app-shell.is-authenticated { padding-right: 270px; }
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
}

.topbar {
  display: flex; align-items: center; gap: 18px; padding: 12px 16px; margin-bottom: 18px;
  animation: rise .6s ease both; position: relative; z-index: 200;
}
.side-rail {
  position: fixed; z-index: 30; top: 18px; bottom: 18px; right: max(18px, calc((100vw - 1540px) / 2));
  width: 226px; padding: 16px 12px; display: flex; flex-direction: column;
}
.brand {
  display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; font-size: 1.3rem; font-weight: 700; color: #fff; text-decoration: none;
}
.brand-mark { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(145deg, #25c77a, #b7f3d0); color:#111418; box-shadow: 0 8px 25px rgba(37,199,122,.28); }
.nav { display: flex; gap: 6px; flex: 1; }
.nav-rail { flex-direction: column; overflow-y: auto; padding: 8px 0; }
.nav a { display: flex; align-items: center; gap: 11px; color: var(--muted); text-decoration: none; font-weight: 500; transition: .2s ease; padding: 10px 11px; border-radius: 11px; }
.nav a:hover { color: #fff; background: rgba(255,255,255,.055); }
.nav a.active { color: #e7fff2; background: linear-gradient(90deg, rgba(37,199,122,.25), rgba(37,199,122,.06)); box-shadow: inset 3px 0 0 var(--accent); }
.nav-icon { width: 25px; height: 25px; border-radius: 8px; display: grid; place-items: center; background: rgba(255,255,255,.05); font-size: 1rem; }
.rail-footer { display: flex; align-items: center; gap: 8px; padding: 12px 9px 2px; font-size: .75rem; color: var(--muted); border-top: 1px solid rgba(255,255,255,.07); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #25c77a; box-shadow: 0 0 12px #25c77a; }
.page-heading { display: grid; margin-left: auto; }
.page-heading strong { font-size: 1rem; }
.eyebrow { color: var(--muted); font-size: .7rem; }
.quick-access { display: flex; align-items: center; gap: 7px; padding: 0 12px; border-inline: 1px solid rgba(255,255,255,.08); }
.quick-label { font-size: .72rem; color: var(--muted); }
.quick-btn { min-width: 38px; height: 36px; padding:0 10px; display: flex; align-items:center; justify-content:center; gap:6px; border: 1px solid var(--glass-border); border-radius: 10px; text-decoration: none; color: var(--text); background: rgba(255,255,255,.035); transition: .2s; }
.quick-btn b { font-size:1rem; }
.quick-text { font-size:.72rem; font-weight:600; }
.quick-btn:hover { transform: translateY(-2px); border-color: rgba(37,199,122,.6); background: rgba(37,199,122,.14); }
.quick-primary { background: var(--accent); border-color: var(--accent); }
.userchip { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .9rem; }
.mobile-dock { display: none; }
.action-hub { padding:18px; margin-bottom:16px; border-color:rgba(37,199,122,.32); }
.action-hub-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.action-hub-head h2 { margin:4px 0 0; }
.action-hub-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.action-tile { min-height:120px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:5px; padding:14px; border:1px solid var(--glass-border); border-radius:15px; color:var(--text); text-decoration:none; background:rgba(255,255,255,.025); transition:.18s ease; }
.action-tile:hover { transform:translateY(-2px); border-color:rgba(37,199,122,.65); background:rgba(37,199,122,.1); }
.action-tile > span { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:var(--accent2); background:rgba(37,199,122,.13); font-size:1.1rem; }
.action-tile small { color:var(--muted); line-height:1.6; }
.action-tile-primary { color:#111418; border-color:transparent; background:linear-gradient(145deg,#25c77a,#b7f3d0); }
.action-tile-primary > span { color:#111418; background:rgba(17,20,24,.12); }
.action-tile-primary small { color:rgba(17,20,24,.7); }
@media (max-width:1200px) { .action-hub-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }

.main { position: relative; z-index: 1; animation: rise .7s ease both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.hero-auth {
  min-height: 82vh; display: grid; place-items: center;
}
.auth-card {
  width: min(440px, 100%); padding: 32px 28px; text-align: center;
}
.auth-card h1 {
  margin: 0 0 8px; font-size: 2rem; font-weight: 700; color: #fff;
}
.auth-card .tagline { color: var(--muted); margin: 0 0 22px; }

.form { display: grid; gap: 12px; text-align: right; }
label { font-size: .85rem; color: var(--muted); }
input, select, textarea {
  width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--glass-border);
  background: rgba(0,0,0,.22); color: var(--text); font-family: inherit; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,199,122,.18); }
select { color-scheme: dark; background-color: #111418; }
select option { color: #e7fff2; background: #111418; }
select option:checked { color: #111418; background: #25c77a; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px; border-radius: 14px; border: 0; cursor: pointer; font-family: inherit; font-weight: 600;
  text-decoration: none; transition: transform .15s ease, box-shadow .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg, #25c77a, #b7f3d0); color: #111418; box-shadow: 0 8px 22px rgba(37,199,122,.23); }
.btn-google { background: rgba(255,255,255,.92); color: #222; width: 100%; }
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--glass-border); }
.btn-danger { background: rgba(255,107,107,.2); color: #ffd6d6; border: 1px solid rgba(255,107,107,.35); }
.btn-block { width: 100%; }

.grid { display: grid; gap: 16px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 800px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .app-shell, .app-shell.is-authenticated { padding: 10px 10px 92px; }
  .side-rail { display: none; }
  .topbar { flex-wrap: wrap; align-items: center; }
  .topbar { gap: 10px; padding: 12px; margin-bottom: 14px; }
  .page-heading { order: 1; }
  .quick-access { order: 2; border: 0; padding: 0; }
  .quick-label { display: none; }
  .quick-text { display:none; }
  .quick-btn { width:34px; min-width:34px; height:34px; padding:0; }
  .userchip { order: 3; width: 100%; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.07); padding-top: 9px; }
  .mobile-dock { position: fixed; display: flex; z-index: 50; bottom: 10px; left: 10px; right: 10px; justify-content: space-around; padding: 8px 5px; }
  .mobile-dock a { min-width: 54px; display: grid; justify-items: center; gap: 2px; color: var(--muted); text-decoration: none; padding: 5px; border-radius: 10px; }
  .mobile-dock a.active { color: #e7fff2; background: rgba(37,199,122,.18); }
  .mobile-dock a span { font-size: 1.05rem; }
  .mobile-dock small { font-size: .62rem; white-space: nowrap; }
  .card { padding: 14px; border-radius: 16px; }
  .row-actions { align-items: stretch; }
  .row-actions > .btn, .row-actions > form, .row-actions > form > .btn { width: 100%; }
  input, select, textarea { font-size: 16px; }
  .table-wrap { margin-inline: -14px; padding-inline: 14px; }
  .server-summary { grid-template-columns: 1fr; gap: 10px; padding: 14px; }
  .server-summary-meta { justify-content: flex-start; gap: 7px 12px; }
  .server-detail { padding: 14px; }
  .server-facts { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .action-hub { padding:14px; }
  .action-hub-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .action-tile { min-height:105px; padding:12px; }
}

@media (max-width: 480px) {
  :root { --radius: 16px; }
  .brand { font-size: 1.3rem; }
  .auth-card { padding: 24px 16px; }
  .card h2 { font-size: 1.25rem; }
  .card h3 { font-size: 1.05rem; }
  .pill { margin-block: 3px; }
  .server-facts { grid-template-columns: 1fr; }
}

.card { padding: 18px; }
.card { transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.card:hover { border-color: rgba(37,199,122,.3); box-shadow: 0 24px 65px rgba(0,0,0,.4); }
.card h2, .card h3 { margin: 0 0 10px; }
.stat { font-size: 1.7rem; font-weight: 700; color: var(--accent2); }
.muted { color: var(--muted); }
.table-wrap { overflow: auto; }
table { min-width: 720px; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { padding: 10px 8px; border-bottom: 1px solid rgba(255,255,255,.08); text-align: right; }
th { color: var(--muted); font-weight: 500; }
.table-sort { display:inline-flex; align-items:center; gap:5px; color:var(--muted); text-decoration:none; padding:6px 9px; border-radius:9px; transition:.18s ease; }
.table-sort span { color:#707981; font-size:.76rem; }
.table-sort:hover { color:var(--text); background:rgba(183,243,208,.08); }
.table-sort.active { color:#b7f3d0; background:rgba(37,199,122,.12); box-shadow:inset 0 0 0 1px rgba(37,199,122,.22); }
.simple-pagination { margin-top:12px; }
.simple-pagination nav > div { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.simple-pagination a, .simple-pagination span { max-width:100%; }
.generated-credentials { position:relative; z-index:60; display:grid; gap:12px; border-color:rgba(37,199,122,.5); background:rgba(17,20,24,.98); }
.generated-credentials p { margin:5px 0 0; color:var(--muted); }
.credential-list { display:grid; gap:6px; max-height:230px; overflow:auto; padding:10px; border-radius:12px; background:rgba(0,0,0,.22); }
.credential-list code { color:#e7fff2; overflow-wrap:anywhere; }
.credential-result-overlay { position:fixed; inset:0; z-index:10000; display:grid; place-items:center; padding:16px; background:rgba(5,8,7,.76); backdrop-filter:blur(8px); }
.credential-result-card { width:min(620px,100%); max-height:min(82vh,720px); overflow:auto; margin:0; padding:20px; box-shadow:0 24px 80px rgba(0,0,0,.55); }
.credential-result-card > div:first-child strong { display:block; color:var(--accent2); font-size:1.05rem; }
.credential-result-card .credential-list code { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; padding:10px 12px; border:1px solid rgba(183,243,208,.12); border-radius:10px; background:rgba(255,255,255,.03); }
.credential-result-card .credential-list code b { color:var(--accent2); }
.credential-result-card .credential-list code span { color:#fff; user-select:all; }
@media (max-width:640px) {
  .credential-result-overlay { align-items:end; padding:10px; }
  .credential-result-card { max-height:84vh; padding:16px; border-radius:18px; }
  .credential-result-card .credential-list code { grid-template-columns:1fr; gap:4px; }
  .credential-result-card .row-actions { position:sticky; bottom:0; padding-top:10px; background:rgba(17,20,24,.96); }
}
.notification-selectbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; padding:12px 16px; }
.notification-check { display:inline-flex; align-items:center; gap:8px; cursor:pointer; color:var(--muted); }
.notification-check input { width:18px; height:18px; margin:0; accent-color:var(--accent); }
.notification-content { display:grid; gap:5px; }
.btn:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.multi-server-row { display:grid; gap:7px; padding:10px; border:1px solid var(--glass-border); border-radius:12px; background:rgba(0,0,0,.12); }
.multi-server-row:has(input[type="checkbox"]:checked) { border-color:rgba(37,199,122,.7); background:rgba(37,199,122,.1); }
.multi-server-row select { padding:9px 11px; }
.multi-server-form { max-height:560px; overflow:auto; padding-inline-end:3px; }
.server-group-guide { display:grid; gap:5px; padding:11px; border-radius:12px; color:#111418; background:linear-gradient(135deg,#25c77a,#b7f3d0); }
.server-group-guide span { font-size:.72rem; font-weight:600; }
.server-group-select { display:grid; gap:5px; color:var(--accent2); font-weight:600; }
.server-group-submit { position:sticky; bottom:0; z-index:5; display:grid; gap:5px; padding:10px; border:1px solid rgba(37,199,122,.45); border-radius:13px; background:rgba(17,20,24,.98); box-shadow:0 -10px 25px rgba(17,20,24,.75); }
.server-group-submit small { text-align:center; color:var(--muted); }
.account-renew-box { margin-top:12px; padding:12px; border:1px solid rgba(37,199,122,.3); border-radius:12px; background:rgba(37,199,122,.06); }
.compact-account-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:7px; padding:8px; border:1px solid var(--glass-border); border-radius:12px; background:rgba(255,255,255,.025); }
.compact-account-state { min-width:0; display:grid; gap:2px; }
.compact-account-state span { color:var(--muted); font-size:.7rem; overflow-wrap:anywhere; }
.compact-account-state strong { color:var(--accent2); font-size:.82rem; }
.compact-renew-btn { min-height:36px; padding:8px 11px; white-space:nowrap; }
.compact-server-editor { margin-top:7px; border:1px solid var(--glass-border); border-radius:12px; background:rgba(0,0,0,.1); }
.compact-server-editor > summary { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 11px; cursor:pointer; list-style:none; color:var(--muted); font-size:.78rem; }
.compact-server-editor > summary::-webkit-details-marker { display:none; }
.compact-server-editor > summary b { color:var(--accent); }
.compact-server-editor[open] > summary { color:var(--text); border-bottom:1px solid var(--glass-border); }
.compact-server-editor .multi-server-form { padding:9px; margin-top:0 !important; }
.account-editor[open] { padding:12px; border:1px solid rgba(37,199,122,.35); border-radius:14px; background:rgba(17,20,24,.96); }
.account-editor[open] > summary { margin-bottom:12px; }
.account-server-group-form { margin-top:12px; padding:14px; border:2px solid rgba(37,199,122,.45); border-radius:14px; background:rgba(37,199,122,.08); }
.current-account-state { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.current-account-state span { padding:9px; border-radius:10px; background:rgba(0,0,0,.22); color:var(--muted); font-size:.76rem; }
.current-account-state b { display:block; margin-top:3px; color:var(--text); overflow-wrap:anywhere; }
.apply-server-group { min-height:48px; font-size:.95rem; }
@media (max-width:600px) { .notification-selectbar { align-items:stretch; flex-direction:column; } }

.alert { padding: 12px 14px; margin-bottom: 16px; }
.alert.success { border-color: rgba(87,204,153,.4); color: #d8ffe9; }
.alert.danger { border-color: rgba(255,107,107,.4); color: #ffe0e0; }
.alert ul { margin: 0; padding-inline-start: 18px; }

.divider { display: flex; align-items: center; gap: 10px; color: var(--muted); margin: 14px 0; font-size: .85rem; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--glass-border); }

.pill {
  display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .78rem;
  background: rgba(37,199,122,.14); color: #b7f3d0; border: 1px solid rgba(37,199,122,.3);
}

/* Smooth navigation: internal pages swap without a full browser refresh. */
.turbo-progress-bar { height: 3px; background: linear-gradient(90deg, #25c77a, #b7f3d0); box-shadow: 0 0 16px #25c77a; }
html.turbo-loading .main { opacity: .55; transform: translateY(3px); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
.pill.offline { background: rgba(255,255,255,.06); color: var(--muted); border-color: var(--glass-border); }
.pill.danger { background: rgba(255,107,107,.15); color: #ffb4b4; border-color: rgba(255,107,107,.35); }

.stack-sm { display: grid; gap: 8px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.user-list-head { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:14px; }
.user-list-head h2, .user-list-head p { margin:0 0 5px; }
.quick-user-search { display:flex; gap:8px; width:min(620px,100%); }
.quick-user-search input { min-width:240px; }
.owner-category-list { display:flex; gap:8px; overflow-x:auto; padding:12px 0 2px; scrollbar-width:thin; }
.owner-category { flex:0 0 auto; display:grid; gap:3px; min-width:150px; padding:10px 12px; border:1px solid var(--glass-border); border-radius:12px; color:var(--text); text-decoration:none; background:rgba(0,0,0,.13); }
.owner-category span { color:var(--muted); font-size:.74rem; }
.owner-category.active { border-color:var(--accent); background:rgba(37,199,122,.16); }
.user-count-link { color:var(--accent2); text-decoration:none; border-bottom:1px dashed currentColor; }
.user-count-link.online { color:var(--ok); }
.user-count-link:hover { color:#fff; }

@media (max-width: 700px) {
  .user-list-head, .quick-user-search { display:grid; grid-template-columns:1fr; align-items:stretch; width:100%; }
  .quick-user-search input { min-width:0; }
  .responsive-user-table { min-width:0; display:block; }
  .responsive-user-table thead { display:none; }
  .responsive-user-table tbody { display:grid; gap:12px; }
  .responsive-user-table tr { display:block; padding:12px; border:1px solid var(--glass-border); border-radius:14px; background:rgba(0,0,0,.14); }
  .responsive-user-table td { display:grid; grid-template-columns:minmax(78px, 30%) minmax(0, 1fr); gap:10px; padding:9px 0; white-space:normal; overflow-wrap:anywhere; }
  .responsive-user-table td::before { content:attr(data-label); color:var(--muted); font-size:.76rem; font-weight:600; }
  .responsive-user-table td > form, .responsive-user-table td > details, .responsive-user-table td > .row-actions, .responsive-user-table td > a { min-width:0 !important; width:100%; }
  .responsive-user-table td input, .responsive-user-table td select, .responsive-user-table td .btn { width:100%; max-width:100%; }
  .table-wrap:has(.responsive-user-table) { overflow:visible; margin-inline:0; padding-inline:0; }
  .responsive-credit-table { min-width:0; display:block; }
  .responsive-credit-table thead { display:none; }
  .responsive-credit-table tbody { display:grid; gap:10px; }
  .responsive-credit-table tr { display:block; padding:11px; border:1px solid var(--glass-border); border-radius:13px; background:rgba(0,0,0,.14); }
  .responsive-credit-table td { display:grid; grid-template-columns:minmax(92px,32%) minmax(0,1fr); gap:9px; padding:8px 0; white-space:normal; overflow-wrap:anywhere; }
  .responsive-credit-table td::before { content:attr(data-label); color:var(--muted); font-size:.75rem; font-weight:600; }
  .responsive-credit-table td[data-label="تغییر اعتبار"] { display:block; }
  .responsive-credit-table td[data-label="تغییر اعتبار"]::before { display:block; margin-bottom:8px; }
  .responsive-credit-table td form, .responsive-credit-table td input, .responsive-credit-table td select, .responsive-credit-table td .btn { width:100%; max-width:100% !important; min-width:0 !important; }
  .table-wrap:has(.responsive-credit-table) { overflow:visible; margin-inline:0; padding-inline:0; }
  .simple-pagination nav > div { flex-wrap:wrap; }
}

.server-example h3, .server-management-head h2 { margin: 0 0 8px; }
.example-box { display: grid; gap: 7px; padding: 14px; border-radius: 14px; background: rgba(0,0,0,.16); border: 1px solid rgba(255,255,255,.1); }
.example-box strong { color: var(--accent2); }
.example-box code { direction: ltr; text-align: left; white-space: normal; overflow-wrap: anywhere; color: var(--text); }
.example-note { margin: 12px 0 0; }
.server-management-head { margin: 22px 2px 12px; }
.server-management-head p { margin: 0; }
.server-list { display: grid; gap: 14px; }
.server-card { padding: 0; overflow: hidden; }
.server-summary { display: grid; grid-template-columns: minmax(190px, .75fr) 1.5fr; gap: 18px; align-items: center; padding: 18px; cursor: pointer; list-style: none; }
.server-summary::-webkit-details-marker { display: none; }
.server-summary:hover { background: rgba(255,255,255,.035); }
.server-identity { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.server-identity > strong { font-size: 1.08rem; }
.server-summary-meta { display: flex; justify-content: flex-end; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: .84rem; }
.server-open-label { color: var(--accent); font-weight: 600; }
.server-card[open] .server-open-label { color: var(--accent2); }
.server-detail { padding: 18px; border-top: 1px solid rgba(255,255,255,.09); }
.server-facts { display: flex; flex-wrap: wrap; gap: 16px; }
.server-facts > span { display: grid; gap: 4px; }
.server-facts small { color: var(--muted); }
.server-facts code { direction: ltr; text-align: left; overflow-wrap: anywhere; }
.ssh-box { margin-top: 14px; padding: 14px; border: 1px solid rgba(37,199,122,.25); border-radius: 14px; background: rgba(37,199,122,.055); }
.ssh-box p { margin: 7px 0 12px; }

/* —— Async skeleton shimmer (white physical L→R, even on RTL pages) —— */
.skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  isolation: isolate;
  direction: ltr;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate3d(-100%, 0, 0);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 35%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.08) 65%,
    transparent 100%
  );
  animation: skeleton-shimmer 1.35s ease-in-out infinite;
  pointer-events: none;
  will-change: transform;
}
@keyframes skeleton-shimmer {
  100% { transform: translate3d(100%, 0, 0); }
}
.skeleton-line { height: 13px; width: 100%; margin-bottom: 10px; }
.skeleton-line.w-80 { width: 80%; }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-40 { width: 40%; }
.skeleton-stat { height: 1.85rem; width: 48%; margin: 6px 0 10px; border-radius: 12px; }
.skeleton-block { height: 72px; width: 100%; border-radius: 14px; }
.skeleton-row { height: 42px; width: 100%; margin-bottom: 8px; border-radius: 10px; }
.skeleton-stack { display: grid; gap: 8px; padding: 4px 0; }

/* Notification bell */
.notif-bell { position: relative; z-index: 220; }
.bell-btn {
  position: relative; background: rgba(0,0,0,.2); border: 1px solid var(--glass-border);
  border-radius: 12px; width: 40px; height: 40px; cursor: pointer; color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
}
.bell-icon { display: block; }
.bell-badge {
  position: absolute; top: -4px; left: -4px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: var(--danger); color: #fff; font-size: .68rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.bell-panel {
  position: absolute; top: calc(100% + 8px); left: 0; width: min(360px, 88vw); z-index: 10000;
  padding: 6px 0; max-height: min(420px, 70vh); overflow: auto;
  background: rgba(17, 20, 24, .98); border-color: rgba(37,199,122,.35);
  box-shadow: 0 28px 80px rgba(0,0,0,.78), 0 0 0 1px rgba(37,199,122,.12);
}
.bell-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: .9rem;
}
.bell-head a { color: var(--accent); text-decoration: none; font-size: .8rem; }
.bell-item {
  display: grid; gap: 2px; padding: 10px 14px; text-decoration: none; color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.bell-item:hover { background: rgba(255,255,255,.05); }
.bell-item.unread strong { color: var(--accent2); }
.bell-item .muted { font-size: .75rem; }
[x-cloak] { display: none !important; }

@media (max-width: 800px) {
  .bell-panel {
    position: fixed; top: 112px; right: 10px; left: 10px; width: auto;
    max-height: calc(100dvh - 205px);
  }
}

/* Usage and connection reports */
.connection-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.connection-head h2, .connection-head p { margin: 3px 0; }
.report-totals .card { display: grid; gap: 5px; }
.report-totals .stat { color: #fff; font-size: 1.35rem; }
.account-usage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.usage-card { padding: 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.16); }
.account-modal-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(3,7,18,.78); display: flex; align-items: center; justify-content: center; padding: 18px; overflow: auto; }
.user-detail-link { padding: 2px 0; border: 0; border-bottom: 1px dashed rgba(37,199,122,.55); background: transparent; color: #b7f3d0; font: inherit; cursor: pointer; }
.user-detail-link:hover { color: #fff; border-bottom-color: #fff; }
.usage-title, .usage-server { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.usage-title > strong { font-size: 1.1rem; }
.usage-server { color: var(--muted); font-size: .78rem; margin: 8px 0 12px; }
.usage-server b { color: var(--text); }
.usage-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.usage-values span { display: grid; gap: 4px; padding: 9px; border-radius: 10px; background: rgba(255,255,255,.035); }
.usage-values small, .table-sub { color: var(--muted); font-size: .7rem; }
.usage-values b { font-size: .84rem; }
.accent-text { color: #b7f3d0; }
.report-title { justify-content: space-between; align-items: center; margin-bottom: 8px; }
.report-title h3 { margin: 0; }
.table-sub { display: block; margin-top: 3px; }
@media (max-width: 900px) { .account-usage-grid { grid-template-columns: 1fr; } .usage-values { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .connection-head { align-items: flex-start; flex-direction: column; }
  .usage-values { grid-template-columns: 1fr 1fr; }
  .account-modal-backdrop { padding: 10px; align-items: center; }
  .account-modal-backdrop > .card { padding: 14px; max-height: calc(100dvh - 20px) !important; }
  .row-actions > input, .row-actions > select { min-width: 100%; }
  th, td { white-space: nowrap; }
}

@media (max-width: 700px) {
  body { overflow-x:hidden; }
  .main, .card, .glass, details, form { min-width:0 !important; max-width:100%; }
  .row-actions { width:100%; }
  .row-actions > * { min-width:0 !important; max-width:100%; }
  .responsive-user-table td[data-label="عملیات"] { display:block; }
  .responsive-user-table td[data-label="عملیات"]::before { display:block; margin-bottom:8px; }
  .account-editor[open] { width:100%; padding:10px; }
  .multi-server-form { max-height:none; overflow:visible; padding:0; }
  .responsive-user-table td[data-label="IBSng"] { display:block; }
  .responsive-user-table td[data-label="IBSng"]::before { display:block; margin-bottom:8px; }
  .compact-account-bar { align-items:stretch; }
  .compact-account-bar form { flex:0 0 auto; }
  .compact-renew-btn { width:auto !important; }
  .multi-server-row { padding:12px; }
  .server-group-submit { bottom:76px; }
  .current-account-state { grid-template-columns:1fr; }
  .table-wrap { max-width:100%; -webkit-overflow-scrolling:touch; }
  .ibsng-users-table { min-width:0; display:block; }
  .ibsng-users-table thead { display:none; }
  .ibsng-users-table tbody { display:grid; gap:12px; }
  .ibsng-users-table tr { display:block; padding:12px; border:1px solid var(--glass-border); border-radius:14px; background:rgba(0,0,0,.14); }
  .ibsng-users-table td { display:grid; grid-template-columns:112px minmax(0,1fr); gap:10px; align-items:start; padding:8px 0; white-space:normal; overflow-wrap:anywhere; }
  .ibsng-users-table td::before { color:var(--muted); font-size:.74rem; font-weight:600; }
  .ibsng-users-table td:nth-child(1)::before { content:'انتخاب'; }
  .ibsng-users-table td:nth-child(2)::before { content:'سرور'; }
  .ibsng-users-table td:nth-child(3)::before { content:'ID'; }
  .ibsng-users-table td:nth-child(4)::before { content:'یوزرنیم'; }
  .ibsng-users-table td:nth-child(5)::before { content:'رمز'; }
  .ibsng-users-table td:nth-child(6)::before { content:'گروه'; }
  .ibsng-users-table td:nth-child(7)::before { content:'مالک'; }
  .ibsng-users-table td:nth-child(8)::before { content:'وضعیت'; }
  .ibsng-users-table td:nth-child(9)::before { content:'زمان باقی‌مانده'; }
  .ibsng-users-table td:nth-child(10)::before { content:'ترافیک'; }
  .ibsng-users-table td:nth-child(11)::before { content:'کردیت'; }
  .ibsng-users-table td:nth-child(12)::before { content:'آنلاین'; }
  .ibsng-users-table td:nth-child(13)::before { content:'عملیات'; }
  .ibsng-users-table td > form, .ibsng-users-table td > a, .ibsng-users-table td .btn,
  .ibsng-users-table td input, .ibsng-users-table td select { width:100%; max-width:100%; }
  .ibsng-users-table td:last-child { grid-template-columns:1fr; }
  .ibsng-users-table td:last-child::before { margin-bottom:4px; }
}