:root{
  --bg:#0f172a; --panel:#1e293b; --panel2:#273449; --muted:#94a3b8;
  --text:#e2e8f0; --primary:#3b82f6; --primary2:#2563eb; --green:#22c55e;
  --red:#ef4444; --amber:#f59e0b; --border:#334155; --radius:12px;
}
/* ------------------------------- Fonts ------------------------------- */
/* Persian UI text — self-hosted variable font (one file = every weight). */
@font-face{
  font-family:'Vazirmatn';
  src:url('fonts/Vazirmatn.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
/* Persian headings / key figures. */
@font-face{ font-family:'Estedad'; src:url('fonts/Estedad-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face{ font-family:'Estedad'; src:url('fonts/Estedad-800.woff2') format('woff2'); font-weight:800; font-display:swap; }
@font-face{ font-family:'Estedad'; src:url('fonts/Estedad-900.woff2') format('woff2'); font-weight:900; font-display:swap; }
/* English/Latin text — native system UI font, restricted to Latin glyphs with
   unicode-range so Persian keeps rendering in Vazirmatn. Uses the OS font (no
   download); if none exist, Latin simply falls back to Vazirmatn. */
@font-face{
  font-family:'LatinUI';
  src:local('Segoe UI'), local('Helvetica Neue'), local('Roboto'), local('Arial');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

*{box-sizing:border-box}
body{
  margin:0; font-family:'LatinUI','Vazirmatn','Segoe UI',Tahoma,sans-serif;
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(1000px 500px at -10% 110%, rgba(34,197,94,.12), transparent 55%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text); direction:rtl; line-height:1.7; font-size:14px;
}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px; margin:0 auto; padding:20px}

/* Persian display font for headings & key figures (Estedad carries its own
   Latin glyphs, so numbers/Latin inside a heading stay consistent). */
h1,h2,h3,.page-title,.brand,.auth-card h1,.auth-form h1,.auth-hero h2,.card h3,.stat .value,.plan-price{
  font-family:'Estedad','Vazirmatn',sans-serif;
}
.brand small{font-family:'Vazirmatn',sans-serif; font-weight:normal}

/* Auth */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px}
.auth-card{background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:32px; width:100%; max-width:400px}
.auth-card h1{margin:0 0 6px; font-size:22px}
.auth-card p.sub{color:var(--muted); margin:0 0 24px; font-size:13px}

/* Layout with sidebar */
.shell{display:flex; min-height:100vh}
.sidebar{width:240px; background:var(--panel); border-left:1px solid var(--border); padding:18px 0; flex-shrink:0}
.brand{padding:0 20px 18px; font-size:18px; font-weight:bold; border-bottom:1px solid var(--border); margin-bottom:12px}
.brand small{display:block; color:var(--muted); font-size:11px; font-weight:normal; margin-top:4px}
.nav a{display:flex; align-items:center; gap:10px; padding:11px 20px; color:var(--text); border-radius:0}
.nav a:hover{background:var(--panel2); text-decoration:none}
.nav a.active{background:var(--primary2); color:#fff}
.nav .sep{padding:14px 20px 6px; font-size:11px; color:var(--muted); text-transform:uppercase}
.main{flex:1; min-width:0; display:flex; flex-direction:column}
.topbar{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; background:var(--panel); border-bottom:1px solid var(--border)}
.topbar .bal{background:var(--panel2); padding:7px 14px; border-radius:20px; font-weight:bold}
.topbar .bal.neg{color:var(--red)}
.content{padding:24px; flex:1}
.page-title{font-size:20px; margin:0 0 20px}

/* Cards */
.grid{display:grid; gap:16px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:18px}
.card h3{margin:0 0 14px; font-size:15px}
.stat{display:flex; flex-direction:column; gap:6px}
.stat .label{color:var(--muted); font-size:12px}
.stat .value{font-size:24px; font-weight:bold}
.stat .value.green{color:var(--green)} .stat .value.amber{color:var(--amber)} .stat .value.red{color:var(--red)}

/* Tables */
table{width:100%; border-collapse:collapse; font-size:13px}
th,td{padding:10px 12px; text-align:right; border-bottom:1px solid var(--border)}
th{color:var(--muted); font-weight:normal; font-size:12px}
tr:hover td{background:var(--panel2)}
.table-card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden}
.table-card table th{background:var(--panel2)}

/* Forms */
.form-row{margin-bottom:16px}
label{display:block; margin-bottom:6px; font-size:13px; color:var(--muted)}
input,select,textarea{
  width:100%; padding:10px 12px; background:var(--bg); border:1px solid var(--border);
  border-radius:8px; color:var(--text); font-family:inherit; font-size:14px
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--primary)}
textarea{min-height:120px; resize:vertical}
.help{font-size:11px; color:var(--muted); margin-top:5px}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:6px; padding:10px 18px; border:none; border-radius:8px;
  background:var(--primary2); color:#fff; cursor:pointer; font-family:inherit; font-size:14px; font-weight:bold}
.btn:hover{background:var(--primary); text-decoration:none}
.btn.block{width:100%; justify-content:center}
.btn.sm{padding:6px 12px; font-size:12px; font-weight:normal}
.btn.green{background:var(--green)} .btn.red{background:var(--red)} .btn.amber{background:var(--amber); color:#000}
.btn.ghost{background:transparent; border:1px solid var(--border); color:var(--text)}
.btn-group{display:flex; gap:8px; flex-wrap:wrap}

/* Badges */
.badge{display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px}
.badge.green{background:rgba(34,197,94,.15); color:var(--green)}
.badge.red{background:rgba(239,68,68,.15); color:var(--red)}
.badge.amber{background:rgba(245,158,11,.15); color:var(--amber)}
.badge.blue{background:rgba(59,130,246,.15); color:var(--primary)}
.badge.gray{background:var(--panel2); color:var(--muted)}

/* Alerts */
.alert{padding:12px 16px; border-radius:8px; margin-bottom:16px; font-size:13px}
.alert.success{background:rgba(34,197,94,.12); border:1px solid var(--green); color:var(--green)}
.alert.error{background:rgba(239,68,68,.12); border:1px solid var(--red); color:#fca5a5}
.alert.info{background:rgba(59,130,246,.12); border:1px solid var(--primary); color:#93c5fd}
.alert.warning{background:rgba(245,158,11,.12); border:1px solid var(--amber); color:#fcd34d}

/* Sidebar unread-count badge */
.nav a .nav-badge{margin-inline-start:auto; background:var(--red); color:#fff; border-radius:20px; min-width:18px; height:18px; padding:0 6px; font-size:11px; font-weight:bold; display:inline-flex; align-items:center; justify-content:center; line-height:1}

/* Chat / tickets */
.msg{padding:14px 16px; border-radius:10px; margin-bottom:12px; border:1px solid var(--border)}
.msg.staff{background:var(--panel2); border-color:var(--primary)}
.msg.user{background:var(--panel)}
.msg .meta{font-size:11px; color:var(--muted); margin-bottom:6px}

.flex{display:flex; gap:12px; align-items:center}
.between{justify-content:space-between}
.right{text-align:left}
.mt{margin-top:18px} .mb{margin-bottom:18px}
.muted{color:var(--muted)}
hr{border:none; border-top:1px solid var(--border); margin:18px 0}

@media(max-width:880px){
  .grid.c4{grid-template-columns:repeat(2,1fr)}
  .grid.c3,.grid.c2{grid-template-columns:1fr}
  .sidebar{position:fixed; right:-240px; top:0; bottom:0; z-index:50; transition:right .2s}
  .sidebar.open{right:0}
  .menu-toggle{display:inline-block!important}
}
.menu-toggle{display:none; background:none; border:none; color:var(--text); font-size:22px; cursor:pointer}

/* ============================ Visual polish v2 ============================ */
.card{transition:transform .15s ease, box-shadow .15s ease, border-color .15s}
.card:hover{box-shadow:0 8px 28px rgba(0,0,0,.28)}
.stat{position:relative; overflow:hidden}
.stat::before{content:""; position:absolute; top:0; right:0; width:4px; height:100%;
  background:linear-gradient(180deg,var(--primary),var(--green)); border-radius:4px}

.btn{
  background:linear-gradient(180deg,var(--primary),var(--primary2));
  box-shadow:0 4px 14px rgba(37,99,235,.35); transition:transform .12s, box-shadow .12s, filter .12s;
}
.btn:hover{filter:brightness(1.08); transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.green{background:linear-gradient(180deg,#34d399,#22c55e); box-shadow:0 4px 14px rgba(34,197,94,.35)}
.btn.red{background:linear-gradient(180deg,#f87171,#ef4444); box-shadow:0 4px 14px rgba(239,68,68,.35)}
.btn.amber{background:linear-gradient(180deg,#fbbf24,#f59e0b); color:#1f2937; box-shadow:0 4px 14px rgba(245,158,11,.35)}
.btn.ghost{background:transparent; box-shadow:none}

.sidebar{box-shadow:-2px 0 18px rgba(0,0,0,.18)}
.nav a{position:relative; transition:background .15s, color .15s}
.nav a.active{background:linear-gradient(90deg,var(--primary2),rgba(37,99,235,.35))}
.nav a.active::before{content:""; position:absolute; right:0; top:8px; bottom:8px; width:3px; background:#fff; border-radius:3px}
.brand{background:linear-gradient(135deg,rgba(59,130,246,.18),transparent); }

/* Plan picker cards (server create) */
.plan-card{display:block; cursor:pointer; background:var(--panel); border:2px solid var(--border);
  border-radius:14px; padding:18px; transition:border-color .15s, transform .15s, box-shadow .15s}
.plan-card:hover{transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,0,0,.3)}
.plan-card:has(input:checked){border-color:var(--primary); box-shadow:0 0 0 3px rgba(59,130,246,.25)}
.spec-list{list-style:none; padding:0; margin:10px 0; font-size:13px; color:var(--muted)}
.spec-list li{padding:4px 0; border-bottom:1px dashed var(--border)}
.plan-price{margin-top:6px; font-size:20px; color:var(--text)}
.plan-price b{color:var(--green)}

/* ============================ Auth (login/register) ============================ */
.auth-wrap{
  background:
    radial-gradient(900px 500px at 80% 10%, rgba(59,130,246,.25), transparent 60%),
    radial-gradient(700px 500px at 10% 90%, rgba(34,197,94,.18), transparent 55%),
    var(--bg);
}
.auth-shell{display:flex; width:100%; max-width:880px; background:var(--panel);
  border:1px solid var(--border); border-radius:20px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.45)}
.auth-hero{flex:1; padding:40px 34px; color:#fff;
  background:linear-gradient(150deg,#2563eb 0%, #1e3a8a 50%, #0f766e 100%); position:relative; overflow:hidden}
.auth-hero::after{content:""; position:absolute; inset:0;
  background:radial-gradient(400px 300px at 120% 0%, rgba(255,255,255,.18), transparent 60%)}
.auth-hero h2{font-size:26px; margin:0 0 14px; position:relative}
.auth-hero p{color:rgba(255,255,255,.85); position:relative; line-height:2}
.auth-hero .feat{display:flex; align-items:center; gap:10px; margin:14px 0; position:relative; font-size:14px}
.auth-hero .feat .ic{width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0}
.auth-form{width:380px; max-width:100%; padding:40px 34px}
.auth-form h1{margin:0 0 4px; font-size:24px}
.auth-form p.sub{color:var(--muted); margin:0 0 26px; font-size:13px}
.auth-logo{width:54px; height:54px; border-radius:14px; margin-bottom:18px;
  background:linear-gradient(135deg,var(--primary),var(--green)); display:flex; align-items:center;
  justify-content:center; font-size:26px; box-shadow:0 8px 20px rgba(37,99,235,.4)}
@media(max-width:760px){
  .auth-hero{display:none}
  .auth-form{width:100%}
}

/* ============================ Tabs ============================ */
.tabs{display:flex; gap:6px; border-bottom:1px solid var(--border); margin-bottom:20px;
  overflow-x:auto; -webkit-overflow-scrolling:touch}
.tab{background:transparent; border:none; color:var(--muted); padding:12px 18px; cursor:pointer;
  font-family:inherit; font-size:14px; border-bottom:3px solid transparent; white-space:nowrap; border-radius:0}
.tab:hover{color:var(--text)}
.tab.active{color:var(--primary); border-bottom-color:var(--primary); font-weight:bold}
.tabpane{display:none}
.tabpane.active{display:block; animation:fadein .2s ease}
@keyframes fadein{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:none}}
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch}
.danger-zone{border:1px solid var(--red)}
.wrap-sm{flex-wrap:wrap}

/* ============================ Mobile optimization ============================ */
@media(max-width:600px){
  .content{padding:14px}
  .page-title{font-size:18px}
  .grid{gap:12px}
  .grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}
  .card{padding:14px}
  .stat .value{font-size:20px}
  .topbar{padding:12px 14px}
  .topbar .bal{font-size:12px; padding:6px 10px}
  .btn{padding:11px 16px}                 /* larger touch targets */
  .btn.sm{padding:9px 14px; font-size:13px}
  .btn-group{gap:8px}
  .btn-group form,.btn-group .btn{flex:1 1 auto}
  .btn-group .btn{width:100%; justify-content:center}
  table{font-size:12px}
  th,td{padding:8px 8px}
  .auth-form{padding:28px 22px}
  .tab{padding:10px 14px; font-size:13px}
  h1.page-title{margin-bottom:14px}
}
/* Tables never overflow the viewport on small screens */
@media(max-width:760px){
  .table-card{overflow-x:auto}
}

/* ============================ Plan slider (server create) ============================ */
/* Cards mode now uses a .selected class (clickable card, no radio). */
.plan-card.selected{border-color:var(--primary); box-shadow:0 0 0 3px rgba(59,130,246,.25)}

.slider-widget{max-width:680px}
.slider-row{margin:18px 0}
.slider-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; font-size:14px}
.slider-head .slider-val{font-family:'Estedad','Vazirmatn',sans-serif; font-weight:700; color:var(--primary)}
/* Bars run left→right (min→max) regardless of RTL. */
input.bar{-webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:6px; padding:0;
  background:linear-gradient(90deg,var(--primary),var(--green)); direction:ltr; cursor:pointer; outline:none}
input.bar::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%;
  background:#fff; border:3px solid var(--primary2); box-shadow:0 2px 8px rgba(0,0,0,.4); cursor:grab}
input.bar::-webkit-slider-thumb:active{cursor:grabbing; transform:scale(1.08)}
input.bar::-moz-range-thumb{width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid var(--primary2);
  box-shadow:0 2px 8px rgba(0,0,0,.4); cursor:grab}
.slider-stops{display:flex; justify-content:space-between; direction:ltr; margin-top:8px; gap:4px; flex-wrap:wrap}
.slider-stops .stop{font-size:11px; color:var(--muted); background:var(--panel2); border:1px solid var(--border);
  border-radius:6px; padding:2px 8px; min-width:26px; text-align:center}
.slider-stops .stop.on{color:#fff; background:var(--primary2); border-color:var(--primary)}
.slider-stops .stop.off{opacity:.35; text-decoration:line-through}

.plan-summary{margin-top:22px; padding:16px; border-radius:12px; background:var(--panel2); border:1px solid var(--border)}
.plan-summary .ps-name{font-family:'Estedad','Vazirmatn',sans-serif; font-weight:800; font-size:16px; margin-bottom:6px}
.plan-summary .ps-specs{color:var(--muted); font-size:13px; margin-bottom:10px}
.plan-summary .ps-price{display:flex; gap:8px; flex-wrap:wrap; align-items:center; font-size:14px}
.plan-summary .ps-price b{color:var(--green); font-size:18px; font-family:'Estedad','Vazirmatn',sans-serif}

/* ============================ Rebuild loading ============================ */
.spinner{
  display:inline-block; width:48px; height:48px; border-radius:50%;
  border:4px solid var(--border); border-top-color:var(--primary);
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.rebuild-wait{padding:36px 24px}
@media(prefers-reduced-motion:reduce){ .spinner{animation:none} }