/* ═══════════════════════════════════════════════════════════════════
   CaspinTech VPN  —  Light Glassmorphism Design System v2
   Palette: White · Sky Blue · Soft Purple · Lavender
   Font: Vazirmatn | RTL + LTR support
═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --bg:             #f0f4ff;
  --bg2:            #e6edff;
  --bg3:            #dce6fe;
  --surface:        rgba(255,255,255,0.70);
  --surface2:       rgba(255,255,255,0.88);
  --surface3:       rgba(255,255,255,0.50);
  --blue:           #3b82f6;
  --blue2:          #2563eb;
  --blue-light:     #eff6ff;
  --blue-glow:      rgba(59,130,246,.22);
  --blue-dim:       rgba(59,130,246,.10);
  --blue-border:    rgba(59,130,246,.30);
  --purple:         #8b5cf6;
  --purple2:        #7c3aed;
  --purple-light:   #f5f3ff;
  --purple-glow:    rgba(139,92,246,.22);
  --purple-dim:     rgba(139,92,246,.10);
  --purple-border:  rgba(139,92,246,.28);
  --indigo:         #6366f1;
  --indigo-light:   #eef2ff;
  --text1:          #1e1b4b;
  --text2:          #4338ca;
  --text3:          #6366f1;
  --text-muted:     #94a3b8;
  --text-body:      #374151;
  --green:          #10b981;
  --green-light:    #ecfdf5;
  --green-border:   rgba(16,185,129,.3);
  --yellow:         #f59e0b;
  --yellow-light:   #fffbeb;
  --yellow-border:  rgba(245,158,11,.3);
  --red:            #ef4444;
  --red-light:      #fef2f2;
  --red-border:     rgba(239,68,68,.3);
  --cyan:           #06b6d4;
  --cyan-light:     #ecfeff;
  --border:         rgba(99,102,241,.18);
  --border2:        rgba(139,92,246,.22);
  --border3:        rgba(255,255,255,.65);
  --divider:        rgba(99,102,241,.10);
  --radius-xs:      6px;
  --radius-sm:      10px;
  --radius:         16px;
  --radius-lg:      22px;
  --radius-xl:      32px;
  --sidebar-w:      265px;
  --header-h:       64px;
  --font:           'Vazirmatn', system-ui, sans-serif;
  --shadow-xs:      0 1px 4px rgba(99,102,241,.08);
  --shadow-sm:      0 2px 12px rgba(99,102,241,.12);
  --shadow:         0 8px 32px rgba(99,102,241,.14);
  --shadow-lg:      0 20px 60px rgba(99,102,241,.18);
  --shadow-blue:    0 8px 24px rgba(59,130,246,.22);
  --shadow-purple:  0 8px 24px rgba(139,92,246,.22);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;scroll-behavior:smooth}
body{
  font-family:var(--font);background:var(--bg);color:var(--text-body);
  min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;direction:rtl;
}
body.ltr{direction:ltr}
body::before{
  content:'';position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(ellipse 80% 60% at 10% 0%,rgba(139,92,246,.10) 0%,transparent 55%),
    radial-gradient(ellipse 60% 50% at 90% 100%,rgba(59,130,246,.10) 0%,transparent 55%),
    linear-gradient(160deg,#f0f4ff 0%,#e8effe 50%,#eef2ff 100%);
}
body::after{
  content:'';position:fixed;inset:0;z-index:-1;
  background-image:radial-gradient(circle,rgba(99,102,241,.055) 1px,transparent 1px);
  background-size:28px 28px;pointer-events:none;
}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--purple-dim);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--purple-border)}

h1{font-size:1.7rem;font-weight:800;color:var(--text1)}
h2{font-size:1.3rem;font-weight:700;color:var(--text1)}
h3{font-size:1.05rem;font-weight:600;color:var(--text1)}
a{color:var(--blue2);text-decoration:none;transition:color .2s}
a:hover{color:var(--purple2)}

/* ── Glass ── */
.glass{
  background:var(--surface);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid var(--border3);border-radius:var(--radius-lg);box-shadow:var(--shadow);
  transition:box-shadow .3s,border-color .3s,transform .2s;
}
.glass:hover{box-shadow:var(--shadow-lg);border-color:rgba(139,92,246,.25)}
.glass-strong{
  background:var(--surface2);backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);
  border:1px solid var(--border2);border-radius:var(--radius-lg);box-shadow:var(--shadow-purple);
}

/* ── Sidebar ── */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(30,27,75,.25);backdrop-filter:blur(4px);z-index:199}
.sidebar-overlay.show{display:block}
.sidebar{
  position:fixed;top:0;right:0;width:var(--sidebar-w);height:100vh;
  background:var(--surface2);backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);
  border-left:1px solid var(--border3);box-shadow:-4px 0 32px rgba(99,102,241,.12);
  display:flex;flex-direction:column;z-index:200;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
body.ltr .sidebar{right:auto;left:0;border-left:none;border-right:1px solid var(--border3)}
.sidebar-logo{display:flex;align-items:center;gap:.9rem;padding:1.4rem 1.5rem;border-bottom:1px solid var(--divider)}
.logo-icon{
  width:42px;height:42px;
  background:linear-gradient(135deg,var(--purple),var(--blue));
  border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;box-shadow:var(--shadow-purple);flex-shrink:0;
}
.logo-name{font-size:.95rem;font-weight:800;color:var(--text1)}
.logo-sub{font-size:.72rem;color:var(--text-muted);margin-top:1px}
.sidebar-nav{flex:1;padding:1rem .75rem;overflow-y:auto}
.nav-section{font-size:.68rem;font-weight:700;letter-spacing:.08em;color:var(--text-muted);text-transform:uppercase;padding:.75rem .75rem .4rem}
.nav-link{
  display:flex;align-items:center;gap:.8rem;padding:.65rem .9rem;margin-bottom:.2rem;
  border-radius:var(--radius-sm);font-size:.875rem;font-weight:500;color:var(--text-body);
  text-decoration:none;transition:all .2s;position:relative;
}
.nav-link:hover{background:var(--purple-dim);color:var(--purple2)}
.nav-link.active{
  background:linear-gradient(135deg,var(--purple-dim),var(--blue-dim));
  color:var(--purple2);font-weight:600;
  box-shadow:var(--shadow-xs);border:1px solid var(--purple-border);
}
.nav-link.active::before{
  content:'';position:absolute;right:0;top:20%;bottom:20%;
  width:3px;background:var(--purple2);border-radius:99px;
}
body.ltr .nav-link.active::before{right:auto;left:0}
.nav-icon{
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-xs);flex-shrink:0;
  background:rgba(255,255,255,.5);transition:all .2s;color:var(--text-muted);
}
.nav-icon svg{width:16px;height:16px;transition:all .2s}
.nav-link.active .nav-icon{background:linear-gradient(135deg,var(--purple),var(--blue));color:white;box-shadow:var(--shadow-purple)}
.nav-link.active .nav-icon svg{stroke:white}
.nav-link:hover .nav-icon{background:var(--purple-dim);color:var(--purple2)}
.nav-link:hover .nav-icon svg{stroke:var(--purple2)}
.nav-admin-badge{
  font-size:.62rem;padding:1px 6px;margin-right:auto;
  background:linear-gradient(135deg,var(--purple-dim),var(--blue-dim));
  color:var(--purple2);border-radius:99px;border:1px solid var(--purple-border);font-weight:600;
}
body.ltr .nav-admin-badge{margin-right:0;margin-left:auto}
.sidebar-footer{padding:1rem 1.25rem;border-top:1px solid var(--divider);display:flex;align-items:center;gap:.75rem}
.avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--purple),var(--blue));
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;font-weight:700;color:white;flex-shrink:0;box-shadow:var(--shadow-purple);
}
.user-meta{flex:1;min-width:0}
.user-name-sm{font-size:.82rem;font-weight:600;color:var(--text1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-phone-sm{font-size:.72rem;color:var(--text-muted)}
.btn-logout{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-xs);border:1px solid var(--red-border);
  background:var(--red-light);color:var(--red);font-size:.85rem;cursor:pointer;transition:all .2s;
}
.btn-logout:hover{background:var(--red);color:white}
.main-wrap{margin-right:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column;transition:margin .3s}
body.ltr .main-wrap{margin-right:0;margin-left:var(--sidebar-w)}
.topbar{
  height:var(--header-h);background:var(--surface2);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--divider);display:flex;align-items:center;justify-content:space-between;
  padding:0 1.75rem;position:sticky;top:0;z-index:100;box-shadow:var(--shadow-xs);
}
.topbar-title{font-size:1rem;font-weight:700;color:var(--text1)}
.topbar-right{display:flex;align-items:center;gap:.75rem}
.btn-menu{
  display:none;width:38px;height:38px;align-items:center;justify-content:center;
  background:var(--purple-dim);border:1px solid var(--purple-border);
  border-radius:var(--radius-sm);cursor:pointer;font-size:1.1rem;color:var(--purple2);transition:all .2s;
}
.btn-menu:hover{background:var(--purple);color:white}
.page-content{
  flex:1;
  padding:1.75rem;
  max-width:1280px;
  width:100%;
  margin-inline:auto;
  overflow-x:clip;
}

/* ── Toasts ── */
.toast-container{
  position:fixed;top:1.25rem;left:50%;transform:translateX(-50%);
  z-index:9999;display:flex;flex-direction:column;gap:.5rem;
  pointer-events:none;width:360px;max-width:calc(100vw - 2rem);
}
.toast{
  background:var(--surface2);backdrop-filter:blur(24px);border-radius:var(--radius);
  padding:.875rem 1.25rem;display:flex;align-items:center;gap:.75rem;
  box-shadow:var(--shadow-lg);border:1px solid var(--border3);pointer-events:all;
  animation:toastIn .35s cubic-bezier(.34,1.56,.64,1) forwards;
}
.toast.hide{animation:toastOut .3s ease forwards}
.toast-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0}
.toast-success .toast-icon{background:var(--green-light);color:var(--green)}
.toast-error   .toast-icon{background:var(--red-light);color:var(--red)}
.toast-info    .toast-icon{background:var(--blue-light);color:var(--blue2)}
.toast-warning .toast-icon{background:var(--yellow-light);color:var(--yellow)}
.toast-success{border-color:var(--green-border)}
.toast-error  {border-color:var(--red-border)}
.toast-info   {border-color:var(--blue-border)}
.toast-warning{border-color:var(--yellow-border)}
.toast-body   {flex:1;font-size:.875rem;font-weight:500;color:var(--text1)}
.toast-close  {cursor:pointer;color:var(--text-muted);font-size:1rem;line-height:1}
@keyframes toastIn  {from{opacity:0;transform:translateY(-12px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes toastOut {from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}}

/* ── Alerts ── */
.alert{
  display:flex;align-items:center;gap:.75rem;padding:.875rem 1.25rem;
  border-radius:var(--radius);margin-bottom:.75rem;font-size:.875rem;font-weight:500;
  border:1px solid transparent;animation:fadeIn .3s ease;
}
.alert-success{background:var(--green-light);color:#065f46;border-color:var(--green-border)}
.alert-danger {background:var(--red-light);color:#991b1b;border-color:var(--red-border)}
.alert-warning{background:var(--yellow-light);color:#92400e;border-color:var(--yellow-border)}
.alert-info   {background:var(--blue-light);color:#1e40af;border-color:var(--blue-border)}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.625rem 1.375rem;border:none;border-radius:var(--radius-sm);
  font-family:var(--font);font-size:.875rem;font-weight:600;
  cursor:pointer;transition:all .22s;text-decoration:none;white-space:nowrap;
}
.btn-primary{background:linear-gradient(135deg,var(--purple),var(--blue));color:white;box-shadow:var(--shadow-purple)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(139,92,246,.3);color:white}
.btn-blue{background:linear-gradient(135deg,var(--blue),var(--indigo));color:white;box-shadow:var(--shadow-blue)}
.btn-blue:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(59,130,246,.3);color:white}
.btn-outline{background:var(--purple-dim);color:var(--purple2);border:1px solid var(--purple-border)}
.btn-outline:hover{background:var(--purple);color:white;transform:translateY(-1px)}
.btn-outline-blue{background:var(--blue-dim);color:var(--blue2);border:1px solid var(--blue-border)}
.btn-outline-blue:hover{background:var(--blue);color:white;transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.5);color:var(--text-body);border:1px solid var(--border)}
.btn-ghost:hover{background:var(--surface2);color:var(--text1)}
.btn-danger{background:var(--red-light);color:var(--red);border:1px solid var(--red-border)}
.btn-danger:hover{background:var(--red);color:white}
.btn-success{background:var(--green-light);color:var(--green);border:1px solid var(--green-border)}
.btn-success:hover{background:var(--green);color:white}
.btn-neon{
  background:linear-gradient(135deg,var(--purple),var(--indigo),var(--blue));
  background-size:200% 200%;color:white;box-shadow:var(--shadow-purple);
  animation:gradientShift 4s ease infinite;
}
.btn-neon:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(139,92,246,.35);color:white}
@keyframes gradientShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.btn-xs{padding:.3rem .7rem;font-size:.75rem;border-radius:var(--radius-xs)}
.btn-sm{padding:.45rem .9rem;font-size:.8rem}
.btn-lg{padding:.875rem 2rem;font-size:1rem;border-radius:var(--radius)}
.w-full{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}

/* ── Badges ── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:99px;font-size:.72rem;font-weight:600}
.badge-green {color:#065f46;background:var(--green-light);border:1px solid var(--green-border)}
.badge-yellow{color:#92400e;background:var(--yellow-light);border:1px solid var(--yellow-border)}
.badge-red   {color:#991b1b;background:var(--red-light);border:1px solid var(--red-border)}
.badge-blue  {color:#1e40af;background:var(--blue-light);border:1px solid var(--blue-border)}
.badge-purple{color:#4c1d95;background:var(--purple-light);border:1px solid var(--purple-border)}
.badge-gray  {color:#475569;background:rgba(100,116,139,.1);border:1px solid rgba(100,116,139,.2)}
.badge-cyan  {color:#155e75;background:var(--cyan-light);border:1px solid rgba(6,182,212,.25)}

/* ── Forms ── */
.form-group{display:flex;flex-direction:column;gap:.45rem;margin-bottom:.25rem}
.form-label{font-size:.82rem;font-weight:600;color:var(--text1)}
.form-hint{font-size:.75rem;color:var(--text-muted)}
.form-error{font-size:.75rem;color:var(--red)}
.form-input{
  width:100%;background:rgba(255,255,255,.8);border:1.5px solid var(--border);
  border-radius:var(--radius-sm);padding:.72rem 1rem;color:var(--text1);
  font-family:var(--font);font-size:.9rem;outline:none;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.form-input:focus{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-dim);background:white}
.form-input::placeholder{color:#94a3b8}
.form-input[dir="ltr"]{text-align:left;direction:ltr}
.form-input.error{border-color:var(--red);box-shadow:0 0 0 3px rgba(239,68,68,.1)}
select.form-input{cursor:pointer}
textarea.form-input{resize:vertical;min-height:100px}
.input-icon-wrap{position:relative}
.input-icon-wrap .form-input{padding-right:2.75rem}
body.ltr .input-icon-wrap .form-input{padding-right:1rem;padding-left:2.75rem}
.input-icon{position:absolute;right:.9rem;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;font-size:1rem}
body.ltr .input-icon{right:auto;left:.9rem}

/* ── Stat cards ── */
.stat-card{
  background:var(--surface);backdrop-filter:blur(20px);border:1px solid var(--border3);
  border-radius:var(--radius-lg);padding:1.4rem;box-shadow:var(--shadow);
  display:flex;align-items:flex-start;gap:1rem;transition:all .25s;position:relative;overflow:hidden;
}
.stat-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--purple),var(--blue));opacity:0;transition:opacity .3s;
}
.stat-card:hover::before{opacity:1}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.stat-icon{width:46px;height:46px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0}
.stat-icon-blue  {background:var(--blue-light);color:var(--blue2)}
.stat-icon-purple{background:var(--purple-light);color:var(--purple2)}
.stat-icon-green {background:var(--green-light);color:var(--green)}
.stat-icon-yellow{background:var(--yellow-light);color:var(--yellow)}
.stat-value{font-size:1.5rem;font-weight:800;color:var(--text1);line-height:1.2}
.stat-label{font-size:.8rem;color:var(--text-muted);font-weight:500;margin-top:.2rem}
.stat-change{font-size:.75rem;font-weight:600;margin-top:.4rem}
.stat-change.up{color:var(--green)}
.stat-change.down{color:var(--red)}

/* ── Progress ── */
.progress-wrap{width:100%;height:8px;background:rgba(99,102,241,.1);border-radius:99px;overflow:hidden}
.progress-fill{
  height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--purple),var(--blue));
  transition:width 1s cubic-bezier(.4,0,.2,1);position:relative;
}
.progress-fill.danger {background:linear-gradient(90deg,var(--red),#f97316)}
.progress-fill.warning{background:linear-gradient(90deg,var(--yellow),#f97316)}
.progress-fill.safe   {background:linear-gradient(90deg,var(--green),var(--cyan))}

/* ── Tables ── */
.table-wrap{overflow-x:auto;border-radius:var(--radius-lg)}
table{width:100%;border-collapse:collapse}
thead tr{background:linear-gradient(135deg,var(--purple-dim),var(--blue-dim));border-bottom:1px solid var(--border2)}
thead th{padding:.875rem 1.1rem;text-align:right;font-size:.78rem;font-weight:700;color:var(--text2);white-space:nowrap}
body.ltr thead th{text-align:left}
tbody tr{border-bottom:1px solid var(--divider);transition:background .15s}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:rgba(139,92,246,.03)}
tbody td{padding:.875rem 1.1rem;font-size:.875rem;color:var(--text-body);vertical-align:middle}

/* ── Sub card ── */
.sub-card{
  background:var(--surface);backdrop-filter:blur(24px);border:1px solid var(--border3);
  border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--shadow);
  transition:all .3s;position:relative;overflow:hidden;
}
.sub-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--purple-border)}
.sub-card-top-bar{position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--purple),var(--blue),var(--indigo))}
.sub-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.25rem;padding-top:.5rem}
.sub-config-name{font-size:1rem;font-weight:700;color:var(--text1)}
.sub-status{display:flex;align-items:center;gap:.4rem;margin-top:.3rem}
.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.dot-green{background:var(--green);box-shadow:0 0 6px rgba(16,185,129,.5);animation:pulseGreen 2s ease infinite}
.dot-gray{background:#94a3b8}
@keyframes pulseGreen{0%,100%{opacity:1}50%{opacity:.5}}
.online-text{font-size:.75rem;color:var(--text-muted);font-weight:500}
.sub-traffic{margin-bottom:1rem}
.sub-traffic-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.sub-traffic-label{font-size:.78rem;font-weight:600;color:var(--text-muted)}
.sub-traffic-value{font-size:.82rem;font-weight:700;color:var(--text1)}
.sub-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin:1rem 0}
.sub-stat{
  background:linear-gradient(135deg,var(--purple-dim),var(--blue-dim));
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:.625rem .75rem;text-align:center;
}
.sub-stat-label{font-size:.68rem;color:var(--text-muted);font-weight:600;display:block}
.sub-stat-value{font-size:.82rem;color:var(--text1);font-weight:700;display:block;margin-top:.2rem}
.expire-warning{color:var(--red)!important}
.sub-url-box{
  display:flex;gap:.5rem;align-items:center;
  background:rgba(255,255,255,.6);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:.5rem .75rem;margin-bottom:.75rem;
}
.url-input{flex:1;background:transparent;border:none;outline:none;font-size:.75rem;color:var(--text-body);font-family:monospace;direction:ltr;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn-copy{
  display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .7rem;border-radius:var(--radius-xs);
  background:var(--purple-dim);color:var(--purple2);border:1px solid var(--purple-border);
  font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap;font-family:var(--font);
}
.btn-copy:hover{background:var(--purple);color:white}
.sub-card-actions{display:flex;gap:.6rem;flex-wrap:wrap}

/* QR Popup */
.qr-popup-overlay{display:none;position:fixed;inset:0;background:rgba(30,27,75,.3);backdrop-filter:blur(6px);z-index:999;align-items:center;justify-content:center}
.qr-popup-overlay.show{display:flex}
.qr-popup{background:var(--surface2);backdrop-filter:blur(32px);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:2rem;text-align:center;box-shadow:var(--shadow-lg);animation:popIn .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes popIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}

/* ── Plan cards ── */
.plan-card{
  background:var(--surface);backdrop-filter:blur(24px);border:1.5px solid var(--border3);
  border-radius:var(--radius-lg);padding:1.75rem 1.5rem;box-shadow:var(--shadow);
  transition:all .3s;position:relative;overflow:hidden;display:flex;flex-direction:column;
}
.plan-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--purple-border)}
.plan-card.featured{border-color:var(--purple-border);background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(245,243,255,.8));box-shadow:var(--shadow-purple),var(--shadow)}
.plan-featured-badge{
  position:absolute;top:1rem;left:1rem;
  background:linear-gradient(135deg,var(--purple),var(--blue));
  color:white;font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:99px;box-shadow:var(--shadow-purple);
}
body.ltr .plan-featured-badge{left:auto;right:1rem}
.plan-title{font-size:1.1rem;font-weight:700;color:var(--text1);margin-bottom:.5rem}
.plan-price{font-size:1.9rem;font-weight:900;color:var(--purple2);margin-bottom:1.25rem;line-height:1}
.plan-price span{font-size:.85rem;font-weight:500;color:var(--text-muted)}
.plan-features{list-style:none;margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.plan-features li{font-size:.875rem;color:var(--text-body);display:flex;align-items:center;gap:.6rem}
.plan-features li::before{
  content:'✓';display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;
  background:var(--green-light);color:var(--green);font-size:.7rem;font-weight:800;flex-shrink:0;
}

/* ── Ticket ── */
.message-bubble{max-width:75%;padding:.75rem 1rem;border-radius:var(--radius);font-size:.875rem;line-height:1.6}
.user-msg{background:linear-gradient(135deg,var(--purple-dim),var(--blue-dim));border:1px solid var(--purple-border);align-self:flex-end;border-bottom-left-radius:4px;color:var(--text1)}
body.ltr .user-msg{border-bottom-left-radius:var(--radius);border-bottom-right-radius:4px}
.admin-msg{background:rgba(255,255,255,.8);border:1px solid var(--border);align-self:flex-start;border-bottom-right-radius:4px;color:var(--text-body)}
body.ltr .admin-msg{border-bottom-right-radius:var(--radius);border-bottom-left-radius:4px}
.msg-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:.35rem;gap:1rem}

/* ── Animations ── */
.fade-in{animation:fadeIn .4s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.stagger>*{animation:fadeIn .4s ease both}
.stagger>*:nth-child(1){animation-delay:.05s}
.stagger>*:nth-child(2){animation-delay:.10s}
.stagger>*:nth-child(3){animation-delay:.15s}
.stagger>*:nth-child(4){animation-delay:.20s}
.stagger>*:nth-child(5){animation-delay:.25s}
.stagger>*:nth-child(6){animation-delay:.30s}

/* ── Auth ── */
.auth-page{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1.5rem}
.auth-container{width:100%;max-width:420px}
.auth-card{
  background:var(--surface2);backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);
  border:1px solid var(--border3);border-radius:var(--radius-xl);
  padding:2.5rem 2.25rem;box-shadow:var(--shadow-lg),var(--shadow-purple);animation:fadeIn .5s ease;
}
.auth-logo{text-align:center;margin-bottom:2rem}
.auth-logo-icon{
  width:62px;height:62px;margin:0 auto .875rem;
  background:linear-gradient(135deg,var(--purple),var(--blue));
  border-radius:var(--radius);display:flex;align-items:center;justify-content:center;
  font-size:1.75rem;box-shadow:var(--shadow-purple);
}
.auth-title{font-size:1.4rem;font-weight:800;color:var(--text1);margin-bottom:.3rem}
.auth-subtitle{font-size:.875rem;color:var(--text-muted)}
.auth-divider{height:1px;background:var(--divider);margin:1.75rem 0}
.auth-footer{text-align:center;margin-top:1.5rem;font-size:.85rem;color:var(--text-muted)}
.auth-footer a{color:var(--purple2);font-weight:600}
.form-stack{display:flex;flex-direction:column;gap:1rem}

/* ── Utility ── */
.d-flex{display:flex}
.align-center{align-items:center}
.justify-between{justify-content:space-between}
.flex-wrap{flex-wrap:wrap}
.p-2{padding:1rem}
.gap-1{gap:.5rem}.gap-2{gap:1rem}.gap-3{gap:1.5rem}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}
.text-center{text-align:center}
.text-muted{color:var(--text-muted);font-size:.85rem}
.text-sm{font-size:.85rem}.text-xs{font-size:.75rem}
.font-bold{font-weight:700}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.75rem;flex-wrap:wrap;gap:.75rem}
.page-header-title{font-size:1.25rem;font-weight:800;color:var(--text1)}
.page-header-sub{font-size:.82rem;color:var(--text-muted);margin-top:.25rem}
.section-title{font-size:.72rem;font-weight:700;letter-spacing:.08em;color:var(--text-muted);text-transform:uppercase;margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid var(--divider)}
.empty-state{text-align:center;padding:3.5rem 2rem}
.empty-icon{font-size:3rem;margin-bottom:1rem;opacity:.6}
.empty-title{font-size:1.1rem;font-weight:700;color:var(--text1);margin-bottom:.5rem}
.empty-desc{font-size:.875rem;color:var(--text-muted);margin-bottom:1.5rem;max-width:320px;margin-inline:auto}
.announcement{background:linear-gradient(135deg,var(--yellow-light),rgba(255,255,255,.7));border:1px solid var(--yellow-border);border-radius:var(--radius);padding:1rem 1.25rem;animation:fadeIn .4s ease}
.lang-btn{display:flex;align-items:center;gap:.4rem;padding:.35rem .75rem;background:var(--blue-dim);color:var(--blue2);border:1px solid var(--blue-border);border-radius:99px;font-size:.78rem;font-weight:600;cursor:pointer;transition:all .2s;text-decoration:none}
.lang-btn:hover{background:var(--blue);color:white}
.file-input-label{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;cursor:pointer;background:rgba(255,255,255,.7);border:1.5px dashed var(--purple-border);border-radius:var(--radius-sm);font-size:.875rem;color:var(--text-muted);transition:all .2s}
.file-input-label:hover{border-color:var(--purple);background:var(--purple-dim);color:var(--purple2)}
.file-input-label input[type=file]{display:none}

/* ── Grids ── */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.grid-auto{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:1.25rem;
  align-items:stretch;
}
.checkout-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:1.5rem}

/* ── Responsive ── */
@media(max-width:900px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .sidebar{transform:translateX(100%);box-shadow:none}
  body.ltr .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0);box-shadow:-8px 0 40px rgba(99,102,241,.2)}
  .main-wrap{margin-right:0!important;margin-left:0!important}
  .btn-menu{display:flex}
  .page-content{padding:1rem;max-width:100%}
  .topbar{padding:0 1rem}
  .sub-stats-grid{grid-template-columns:repeat(3,1fr)}
  .auth-card{padding:2rem 1.5rem}
  .page-header{flex-direction:column;align-items:flex-start}
  .plan-card{padding:1.5rem 1.25rem}
}
@media(max-width:600px){
  .grid-2,.grid-3,.grid-4,.checkout-grid,.grid-auto{grid-template-columns:1fr}
  .plan-card{padding:1.5rem 1.25rem}
  .sub-card{padding:1.25rem}
  .sub-stats-grid{grid-template-columns:repeat(3,1fr);gap:.5rem}
  .topbar-title{font-size:.92rem;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ── Mobile improvements ── */
@media(max-width:480px){
  .sub-stats-grid{grid-template-columns:repeat(3,1fr);gap:.5rem}
  .sub-card-actions{gap:.4rem;flex-wrap:wrap}
  .sub-card-actions .btn{font-size:.75rem;padding:.4rem .7rem}
  .page-content{padding:.875rem}
  .auth-card{padding:1.75rem 1.25rem;border-radius:var(--radius-lg)}
  .plan-price{font-size:1.5rem}
  h1{font-size:1.35rem}
  h2{font-size:1.05rem}
  .topbar-title{font-size:.875rem}
  .tutorial-grid{grid-template-columns:1fr}
  .platform-tabs{gap:.4rem;flex-wrap:wrap}
  .platform-tab{padding:.4rem .85rem;font-size:.78rem}
  .auth-page{padding:1rem}
  .auth-card{padding:1.5rem 1.1rem}
  .auth-title{font-size:1.2rem}
  .sidebar-logo{padding:1rem 1.25rem}
  .logo-name{font-size:.88rem}
}

/* ── Touch improvements ── */
@media(hover:none){
  .btn:hover,.nav-link:hover,.plan-card:hover,.sub-card:hover{transform:none}
  .btn:active{transform:scale(.97)}
  .nav-link:active{background:var(--purple-dim)}
}

/* ── iOS safe area ── */
@supports(padding-bottom:env(safe-area-inset-bottom)){
  .sidebar-footer{padding-bottom:max(1rem,env(safe-area-inset-bottom))}
  .topbar{padding-top:max(0px,env(safe-area-inset-top))}
}

/* ── Sub card on small screens ── */
@media(max-width:400px){
  .sub-url-box{flex-direction:column;align-items:stretch}
  .btn-copy{width:100%;justify-content:center}
  .sub-card-actions{flex-direction:column}
  .sub-card-actions .btn,.sub-card-actions form,.sub-card-actions button{width:100%}
  .page-content{padding:.75rem}
  h1{font-size:1.2rem}
  .plan-price{font-size:1.4rem}
}

/* ── Notification dot for support ── */
.nav-link .notif-dot{
  width:7px;height:7px;background:var(--red);border-radius:50%;
  box-shadow:0 0 6px rgba(239,68,68,.5);animation:pulseRed 2s ease infinite;
  margin-right:auto;flex-shrink:0;
}
body.ltr .nav-link .notif-dot{margin-right:0;margin-left:auto}
@keyframes pulseRed{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.8)}}

/* ── Mobile improvements ── */
@media(max-width:480px){
  .sub-stats-grid{grid-template-columns:repeat(3,1fr)}
  .page-content{padding:.875rem}
  .platform-tabs{gap:.35rem}
  .platform-tab{padding:.4rem .8rem;font-size:.78rem}
  h1{font-size:1.4rem}
  .auth-card{padding:1.75rem 1.25rem;border-radius:var(--radius-lg)}
  .sub-card-actions{gap:.4rem}
  .sub-card-actions .btn{font-size:.75rem;padding:.4rem .7rem}
}

/* ── Skeleton loader ── */
.skeleton{
  background:linear-gradient(90deg,rgba(99,102,241,.07) 25%,rgba(139,92,246,.12) 50%,rgba(99,102,241,.07) 75%);
  background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-sm);
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton-card{height:240px;border-radius:var(--radius-lg);margin-bottom:1rem}
.skeleton-line{height:14px;margin-bottom:.5rem}
.skeleton-line.w-75{width:75%}
.skeleton-line.w-50{width:50%}

/* ── Notification bell ── */
.notif-btn{position:relative;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:rgba(255,255,255,.6);border:1px solid var(--border);color:var(--text-muted);cursor:pointer;transition:all .2s;text-decoration:none}
.notif-btn:hover{background:var(--purple-dim);border-color:var(--purple-border);color:var(--purple2)}
.notif-btn svg{stroke:currentColor}
.notif-dot{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--red);border:1.5px solid white;animation:pulseRed 2s ease infinite}
@keyframes pulseRed{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}

/* ── Topbar improvements ── */
.topbar-right{display:flex;align-items:center;gap:.6rem}

/* ── Page transitions ── */
.page-content{animation:pageIn .35s ease both}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── Better focus styles ── */
*:focus-visible{outline:2px solid var(--purple);outline-offset:2px;border-radius:4px}
button:focus-visible,a:focus-visible{outline:2px solid var(--purple)}

/* ==========================================================================
   Neon Theme Override (Frontend + User Panel)
   ========================================================================== */
:root {
  --bg: #070a2b;
  --bg2: #10134a;
  --bg3: #250f60;
  --surface: rgba(54, 31, 128, 0.62);
  --surface2: rgba(72, 45, 164, 0.52);
  --surface3: rgba(255, 255, 255, 0.08);
  --blue: #33b9ff;
  --blue2: #508dff;
  --blue-light: rgba(69, 136, 255, 0.18);
  --blue-glow: rgba(51, 185, 255, 0.3);
  --blue-dim: rgba(57, 138, 255, 0.23);
  --blue-border: rgba(90, 150, 255, 0.42);
  --purple: #8a60ff;
  --purple2: #6b44ff;
  --purple-light: rgba(138, 96, 255, 0.2);
  --purple-glow: rgba(138, 96, 255, 0.32);
  --purple-dim: rgba(130, 95, 255, 0.22);
  --purple-border: rgba(164, 136, 255, 0.36);
  --indigo: #5b6dff;
  --indigo-light: rgba(91, 109, 255, 0.15);
  --text1: #f5f3ff;
  --text2: #ddd7ff;
  --text3: #c4bdff;
  --text-muted: #b8b1df;
  --text-body: #ece8ff;
  --green: #32e9b3;
  --green-light: rgba(50, 233, 179, 0.15);
  --green-border: rgba(92, 255, 196, 0.35);
  --yellow: #ffbe4f;
  --yellow-light: rgba(255, 190, 79, 0.16);
  --yellow-border: rgba(255, 207, 132, 0.35);
  --red: #ff5b8c;
  --red-light: rgba(255, 91, 140, 0.16);
  --red-border: rgba(255, 143, 180, 0.34);
  --cyan: #22d5ff;
  --cyan-light: rgba(34, 213, 255, 0.15);
  --border: rgba(255, 255, 255, 0.2);
  --border2: rgba(184, 161, 255, 0.3);
  --border3: rgba(255, 255, 255, 0.24);
  --divider: rgba(255, 255, 255, 0.12);
  --shadow-xs: 0 2px 8px rgba(7, 8, 34, 0.32);
  --shadow-sm: 0 8px 18px rgba(7, 8, 34, 0.34);
  --shadow: 0 18px 36px rgba(7, 8, 34, 0.42);
  --shadow-lg: 0 24px 54px rgba(7, 8, 34, 0.5);
  --shadow-blue: 0 12px 30px rgba(41, 138, 255, 0.35);
  --shadow-purple: 0 12px 30px rgba(138, 96, 255, 0.32);
}

body {
  background:
    radial-gradient(circle at 12% 8%, #3e4dff 0%, transparent 32%),
    radial-gradient(circle at 87% 8%, #ff4dc1 0%, transparent 30%),
    radial-gradient(circle at 89% 90%, #1dded0 0%, transparent 25%),
    linear-gradient(140deg, #060a2a, #10134a 38%, #250f60 74%, #091036);
  color: var(--text-body);
}

body::before {
  background:
    linear-gradient(160deg, transparent 41%, rgba(255, 255, 255, 0.05) 41%, transparent 42%),
    linear-gradient(170deg, transparent 63%, rgba(255, 255, 255, 0.04) 63%, transparent 64%);
}

body::after {
  background-image: none;
}

.glass,
.glass-strong,
.sub-card,
.plan-card,
.auth-card,
.stat-card,
.ticket-card,
.table-wrap,
.checkout-card,
.order-card,
.profile-card,
.page-card,
.announcement,
.empty-state {
  background: linear-gradient(155deg, rgba(56, 31, 132, 0.72), rgba(160, 72, 204, 0.28) 74%, rgba(57, 116, 255, 0.18));
  border: 1px solid var(--border3);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: var(--shadow);
}

.sidebar {
  background: linear-gradient(170deg, rgba(50, 33, 120, 0.78), rgba(26, 25, 94, 0.7));
  border-left: 1px solid var(--border3);
}

.sidebar-logo,
.sidebar-footer {
  border-color: var(--divider);
}

.nav-link {
  color: var(--text2);
}

.nav-link:hover,
.nav-link.active {
  background: linear-gradient(100deg, rgba(105, 79, 255, 0.6), rgba(35, 192, 255, 0.35));
  color: #fff;
  border: 1px solid rgba(170, 154, 255, 0.42);
}

.nav-icon {
  background: rgba(255, 255, 255, 0.12);
  color: #ddd6ff;
}

.topbar {
  background: linear-gradient(150deg, rgba(52, 36, 125, 0.75), rgba(111, 53, 176, 0.46));
  border-bottom: 1px solid var(--divider);
}

.topbar-title,
.page-header-title,
h1,
h2,
h3,
.auth-title,
.sub-config-name,
.plan-title,
.user-name-sm {
  color: var(--text1);
}

.page-header-sub,
.auth-subtitle,
.text-muted,
.user-phone-sm,
.form-label {
  color: var(--text-muted);
}

.form-input,
select.form-input,
textarea.form-input,
.url-input {
  background: rgba(10, 16, 58, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #f5f2ff;
}

.form-input:focus,
select.form-input:focus,
textarea.form-input:focus,
.url-input:focus {
  border-color: #7f69ff;
  box-shadow: 0 0 0 3px rgba(127, 105, 255, 0.28);
}

.progress-wrap {
  background: rgba(255, 255, 255, 0.12);
}

.progress-fill.safe {
  background: linear-gradient(90deg, #35e7b2, #2ac8ff);
}

.progress-fill.warning {
  background: linear-gradient(90deg, #ffcb56, #ff8c54);
}

.progress-fill.danger {
  background: linear-gradient(90deg, #ff6a9c, #ff5466);
}

.btn-primary,
.btn-blue,
.btn-neon {
  background: linear-gradient(115deg, #6d49ff, #31a6ff) !important;
  color: #fff !important;
  border: 0;
  box-shadow: 0 10px 24px rgba(53, 119, 255, 0.36);
}

.btn-outline,
.btn-outline-blue,
.btn-ghost {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.24);
  color: #f0ecff;
}

.badge,
.nav-admin-badge {
  background: rgba(255, 255, 255, 0.14);
  color: #efe9ff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.alert-success,
.alert-danger,
.alert-warning,
.alert-info {
  color: #fff;
}

.alert-success {
  background: rgba(53, 232, 175, 0.2);
  border-color: rgba(53, 232, 175, 0.42);
}

.alert-danger {
  background: rgba(255, 97, 144, 0.2);
  border-color: rgba(255, 97, 144, 0.42);
}

.alert-warning {
  background: rgba(255, 196, 84, 0.2);
  border-color: rgba(255, 196, 84, 0.42);
}

.alert-info {
  background: rgba(69, 167, 255, 0.2);
  border-color: rgba(69, 167, 255, 0.42);
}

.auth-page {
  background:
    radial-gradient(circle at 15% 10%, #3f52ff 0%, transparent 34%),
    radial-gradient(circle at 85% 10%, #ff4dc3 0%, transparent 32%),
    linear-gradient(140deg, #060a2a, #11144a 36%, #251060 72%, #090f33);
}

@media (max-width: 1024px) {
  .main-wrap,
  body.ltr .main-wrap {
    margin-right: 0;
    margin-left: 0;
  }

  .sidebar {
    transform: translateX(100%);
  }

  body.ltr .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .btn-menu {
    display: inline-flex;
  }
}

@media (max-width: 640px) {
  .page-content {
    padding: 14px;
  }

  .glass,
  .sub-card,
  .plan-card,
  .auth-card,
  .announcement {
    border-radius: 14px;
  }
}