:root{
  --bg:#070a13;
  --bg-alt:#0a0f1c;
  --surface:#0f1526;
  --surface-2:#141b30;
  --border:#212a45;
  --text:#e8ebf5;
  --text-dim:#8b93ab;
  --text-faint:#565f7c;
  --blue:#0143eb;
  --blue-soft:#5f86ff;
  --blue-deep:#0a165e;
  --blue-dim:rgba(1,67,235,0.14);
  --teal:#2bbfa0;
  --amber:#e8a33d;
  --red:#e2555b;
  --radius:10px;
  --font-fa:'Vazirmatn', Tahoma, sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg); color:var(--text); font-family:var(--font-fa); line-height:1.8; font-size:15.5px; min-height:100vh;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button, input, select, textarea{font-family:var(--font-fa);}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.01ms !important; animation-iteration-count:1 !important;} }

/* ===== پس‌زمینه‌ی متحرک (نه استاتیک) ===== */
.nk-bg{position:fixed; inset:0; z-index:-1; overflow:hidden; background:var(--bg);}
.nk-bg span{
  position:absolute; border-radius:50%; filter:blur(90px); opacity:.35;
  animation:nkFloat 26s ease-in-out infinite;
}
.nk-bg span:nth-child(1){width:520px; height:520px; background:var(--blue); top:-160px; right:-120px; animation-duration:24s;}
.nk-bg span:nth-child(2){width:420px; height:420px; background:var(--blue-deep); bottom:-140px; left:-100px; animation-duration:30s; animation-delay:-6s;}
.nk-bg span:nth-child(3){width:300px; height:300px; background:var(--teal); top:40%; left:55%; animation-duration:22s; animation-delay:-12s; opacity:.18;}
.nk-bg::after{
  content:""; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='96' viewBox='0 0 84 96'%3E%3Cpath d='M42 0 L84 24 L84 72 L42 96 L0 72 L0 24 Z' fill='none' stroke='%235f86ff' stroke-opacity='0.06' stroke-width='1'/%3E%3C/svg%3E");
  background-size:84px 96px;
}
@keyframes nkFloat{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(30px,-40px) scale(1.08);}
  66%{transform:translate(-25px,25px) scale(0.95);}
}

/* ===== Auth (login/register) ===== */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:32px;}
.auth-card{width:100%; max-width:420px; background:rgba(15,21,38,.85); backdrop-filter:blur(14px); border:1px solid var(--border); border-radius:14px; padding:38px 34px; box-shadow:0 30px 80px -30px rgba(0,0,0,.7);}
.auth-logo{display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:22px; font-weight:700; font-size:18px;}
.auth-card h1{font-size:21px; text-align:center; margin-bottom:6px; font-weight:700;}
.auth-card p.sub{text-align:center; color:var(--text-dim); font-size:13.5px; margin-bottom:28px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:13px; color:var(--text-dim); margin-bottom:7px;}
.field input, .field select{width:100%; background:var(--bg-alt); border:1px solid var(--border); border-radius:8px; padding:11px 13px; color:var(--text); font-size:14px; outline:none; transition:border-color .15s ease;}
.field input:focus, .field select:focus{border-color:var(--blue-soft);}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 20px; border-radius:8px; font-weight:600; font-size:14px; cursor:pointer; border:1px solid transparent; width:100%; transition:background .15s ease, box-shadow .15s ease;}
.btn-primary{background:var(--blue); color:#f2f5ff;}
.btn-primary:hover{background:#2a5cf0; box-shadow:0 6px 20px -6px rgba(1,67,235,.6);}
.btn-ghost{background:transparent; border-color:var(--border); color:var(--text);}
.btn-ghost:hover{border-color:var(--blue-soft); color:var(--blue-soft);}
.btn-sm{width:auto; padding:8px 16px; font-size:13px;}
.auth-switch{text-align:center; margin-top:20px; font-size:13.5px; color:var(--text-dim);}
.auth-switch a{color:var(--blue-soft); font-weight:600;}
.auth-error{background:rgba(226,85,91,.1); border:1px solid rgba(226,85,91,.35); color:var(--red); padding:11px 14px; border-radius:8px; font-size:13.5px; margin-bottom:18px;}
.auth-ok{background:rgba(43,191,160,.1); border:1px solid rgba(43,191,160,.35); color:var(--teal); padding:11px 14px; border-radius:8px; font-size:13.5px; margin-bottom:18px;}

/* ===== Shell (dashboard layout) ===== */
.shell{display:flex; min-height:100vh;}
.sidebar{width:250px; flex-shrink:0; background:rgba(15,21,38,.7); backdrop-filter:blur(10px); border-left:1px solid var(--border); padding:22px 16px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;}
.sidebar .logo{display:flex; align-items:center; gap:9px; font-weight:700; font-size:16px; padding:0 6px 20px; margin-bottom:16px; border-bottom:1px solid var(--border);}
.sidebar nav ul{display:flex; flex-direction:column; gap:3px;}
.sidebar nav a{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; font-size:13.8px; color:var(--text-dim);}
.sidebar nav a:hover{background:var(--surface-2); color:var(--text);}
.sidebar nav a.active{background:var(--blue-dim); color:var(--blue-soft); font-weight:600;}
.sidebar nav a .lock{margin-inline-start:auto; font-size:11px; color:var(--text-faint);}
.sidebar .plan-chip{margin:14px 6px; padding:10px 12px; border-radius:8px; background:var(--surface-2); border:1px solid var(--border); font-size:12.5px;}
.sidebar .user-box{margin-top:auto; padding:12px 6px 0; border-top:1px solid var(--border); font-size:12.5px; color:var(--text-dim);}
.sidebar .user-box a{color:var(--red);}

.main{flex:1; min-width:0;}
.topbar{position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; padding:16px 28px; background:rgba(7,10,19,.7); backdrop-filter:blur(8px); border-bottom:1px solid var(--border);}
.topbar h1{font-size:18px; font-weight:700;}
.content{padding:28px;}

@media(max-width:920px){
  .shell{flex-direction:column;}
  .sidebar{width:100%; height:auto; position:relative; border-left:none; border-bottom:1px solid var(--border);}
}

/* badges */
.badge{display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px; font-size:12px; font-weight:600;}
.badge-free{background:rgba(139,147,171,.15); color:var(--text-dim);}
.badge-firooze{background:rgba(43,191,160,.15); color:var(--teal);}
.badge-yaghoot{background:rgba(226,85,91,.15); color:var(--red);}
.badge-almas{background:rgba(1,67,235,.18); color:var(--blue-soft);}
.badge-open{background:rgba(232,163,61,.15); color:var(--amber);}
.badge-in_progress{background:rgba(1,67,235,.18); color:var(--blue-soft);}
.badge-resolved{background:rgba(43,191,160,.15); color:var(--teal);}
.badge-pending{background:rgba(232,163,61,.15); color:var(--amber);}
.badge-paid{background:rgba(43,191,160,.15); color:var(--teal);}
.badge-failed, .badge-canceled{background:rgba(226,85,91,.15); color:var(--red);}

/* cards / tables shared with dashboard content */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media(max-width:900px){.grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:1fr 1fr;} .grid-2{grid-template-columns:1fr;}}
@media(max-width:560px){.grid-4{grid-template-columns:1fr;}}

.stat-card .num{font-size:24px; font-weight:700; color:var(--blue-soft);}
.stat-card .lbl{color:var(--text-dim); font-size:13px; margin-top:4px;}

table.nk-table{width:100%; border-collapse:collapse; font-size:13.5px;}
table.nk-table th{text-align:right; color:var(--text-dim); font-weight:600; font-size:12.5px; padding:10px 12px; border-bottom:1px solid var(--border);}
table.nk-table td{padding:11px 12px; border-bottom:1px solid #182035; vertical-align:middle;}
table.nk-table tr:hover td{background:rgba(255,255,255,.02);}
.ip-mono{direction:ltr; unicode-bidi:embed; color:var(--blue-soft); display:inline-block;}

.form-note{color:var(--text-faint); font-size:12.5px; margin-top:8px;}
.section-title{font-size:16px; font-weight:700; margin-bottom:16px;}
.locked-box{text-align:center; padding:60px 20px; color:var(--text-dim);}
.locked-box .icon{font-size:34px; margin-bottom:14px; color:var(--blue-soft);}