/* فونت وزیرمتن — rastikerdar/vazirmatn — مجوز SIL OFL 1.1 (fonts/OFL.txt) */
@font-face { font-family:"VazirFD"; src:url("fonts/Vazirmatn-FD-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"VazirFD"; src:url("fonts/Vazirmatn-FD-Medium.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"VazirFD"; src:url("fonts/Vazirmatn-FD-SemiBold.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"VazirFD"; src:url("fonts/Vazirmatn-FD-Bold.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"VazirLat"; src:url("fonts/Vazirmatn-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"VazirLat"; src:url("fonts/Vazirmatn-Medium.woff2") format("woff2"); font-weight:500 700; font-display:swap; }

:root {
  --bg:#f3f5f9; --surface:#ffffff; --line:#e6e9ef; --line2:#eef1f5;
  --ink:#101828; --ink2:#344054; --muted:#667085; --faint:#98a2b3;
  --pri:#4361ee; --pri-600:#3651d4; --pri-50:#eef1fe; --pri-100:#dfe5fd;
  --green:#12805c; --green-50:#e8f6f0; --red:#d0343a; --red-50:#fdecec;
  --blue:#1f6fd1; --blue-50:#e9f2fd; --amber:#b25e09; --amber-50:#fff4e2; --gray-50:#f1f3f6;
  --side:#0e1a33; --side-ink:#a9b6d3;
  --r:14px; --r-sm:10px;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --shadow-lg:0 10px 30px -12px rgba(16,24,40,.18);
  --fa:"VazirFD", Tahoma, sans-serif; --lat:"VazirLat", "Segoe UI", sans-serif;
  --mono:"Cascadia Mono", Consolas, "SF Mono", monospace;
}
* { box-sizing:border-box; }
html, body { margin:0; }
body { font-family:var(--fa); font-size:14px; line-height:1.7; background:var(--bg); color:var(--ink);
       -webkit-font-smoothing:antialiased; }
a { color:var(--pri); text-decoration:none; }
svg.i { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }

/* ---------- layout ---------- */
.shell { display:grid; grid-template-columns:248px 1fr; min-height:100vh; }
aside { background:var(--side); color:var(--side-ink); padding:22px 14px; position:sticky; top:0; height:100vh;
        display:flex; flex-direction:column; gap:6px; }
.brand { display:flex; align-items:center; gap:12px; padding:4px 10px 22px; color:#fff; }
.logo { width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
        background:linear-gradient(135deg,#5b7cfa,#7b5cf0); box-shadow:0 6px 18px -6px rgba(91,124,250,.7); }
.logo svg { stroke:#fff; width:20px; height:20px; }
.brand b { display:block; font-size:15px; font-weight:700; }
.brand small { display:block; font-size:11.5px; color:var(--side-ink); margin-top:-2px; }
.nav a { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; color:var(--side-ink);
         font-weight:500; transition:.15s; }
.nav a:hover { background:rgba(255,255,255,.06); color:#fff; }
.nav a.on { background:rgba(91,124,250,.18); color:#fff; box-shadow:inset -3px 0 0 #7d96ff; }
.side-foot { margin-top:auto; padding:12px; border-radius:12px; background:rgba(255,255,255,.05); font-size:12.5px; }
.side-foot .dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-left:6px; }
.dot.sim { background:#f5b83d; box-shadow:0 0 0 4px rgba(245,184,61,.15); }
.dot.real { background:#33c08a; box-shadow:0 0 0 4px rgba(51,192,138,.15); }
.side-foot a { color:#c9d4f1; display:block; margin-top:4px; font-size:12px; }

main { padding:28px 36px 48px; max-width:1240px; width:100%; min-width:0; }
.page-head { display:flex; align-items:center; gap:12px; margin-bottom:22px; flex-wrap:wrap; }
.page-head h1 { font-size:22px; font-weight:700; margin:0; letter-spacing:-.2px; }
.page-head .sub { color:var(--muted); font-size:13px; margin-top:2px; }
.page-head .actions { margin-right:auto; display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- surfaces ---------- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px; margin-bottom:18px;
        box-shadow:var(--shadow); }
.card.flush { padding:0; overflow:hidden; }
.card-title { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:600; margin:0 0 16px; }
.card-title .badge-ico { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--pri-50); color:var(--pri); }
.card-title .badge-ico svg { width:16px; height:16px; }

.stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-bottom:20px; }
.stat { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; box-shadow:var(--shadow); }
.stat .k { color:var(--muted); font-size:13px; display:flex; align-items:center; gap:8px; }
.stat .v { font-size:24px; font-weight:700; margin-top:6px; letter-spacing:-.3px; }
.stat .v small { font-size:12px; color:var(--muted); font-weight:500; margin-right:4px; }
.stat .ico { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; }
.stat .ico svg { width:15px; height:15px; }
.ico.g { background:var(--green-50); color:var(--green); } .ico.r { background:var(--red-50); color:var(--red); }
.ico.b { background:var(--blue-50); color:var(--blue); } .ico.p { background:var(--pri-50); color:var(--pri); }

/* ---------- tables ---------- */
table { width:100%; border-collapse:collapse; }
th, td { padding:13px 16px; text-align:right; vertical-align:middle; }
th { color:var(--muted); font-weight:500; font-size:12.5px; background:#fafbfd; border-bottom:1px solid var(--line); white-space:nowrap; }
td { border-bottom:1px solid var(--line2); }
tr:last-child td { border-bottom:0; }
tbody tr.link { cursor:pointer; transition:background .12s; }
tbody tr.link:hover { background:#f7f9ff; }
.num { direction:ltr; text-align:left !important; font-variant-numeric:tabular-nums; font-family:var(--fa); }
.ltr { direction:ltr; unicode-bidi:isolate; }
.code { font-family:var(--mono); font-size:12.5px; color:var(--ink2); direction:ltr; unicode-bidi:isolate; letter-spacing:.2px; }
.dt { direction:ltr; unicode-bidi:isolate; display:inline-block; }
.strong { font-weight:600; }

/* ---------- pills ---------- */
.pill { display:inline-flex; align-items:center; gap:6px; padding:3px 11px 3px 10px; border-radius:999px; font-size:12px; font-weight:500; white-space:nowrap; }
.pill::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.pill.green { background:var(--green-50); color:var(--green); } .pill.red { background:var(--red-50); color:var(--red); }
.pill.blue { background:var(--blue-50); color:var(--blue); } .pill.orange { background:var(--amber-50); color:var(--amber); }
.pill.gray { background:var(--gray-50); color:var(--muted); }
.tag { display:inline-block; padding:1px 8px; border-radius:6px; background:var(--gray-50); color:var(--ink2); font-size:12px; }

/* ---------- forms ---------- */
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:16px 18px; }
.field label, label.lbl { display:block; color:var(--ink2); font-size:13px; font-weight:500; margin-bottom:6px; }
input, select { width:100%; height:42px; padding:0 12px; border:1px solid #d6dbe4; border-radius:var(--r-sm); font:inherit;
                background:#fff; color:var(--ink); transition:border-color .15s, box-shadow .15s; }
input[type=file] { padding:8px; height:auto; background:#fafbfd; border-style:dashed; cursor:pointer; }
input[type=radio], input[type=checkbox] { width:auto; height:auto; accent-color:var(--pri); }
input:focus, select:focus { outline:none; border-color:var(--pri); box-shadow:0 0 0 4px var(--pri-100); }
input.ltr, input.code { direction:ltr; text-align:left; font-family:var(--lat); }
select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
         background-repeat:no-repeat; background-position:left 12px center; padding-left:32px; }
.help { color:var(--muted); font-size:12.5px; margin:10px 0 0; }

.choice { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.choice label { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border:1.5px solid var(--line); border-radius:12px;
                cursor:pointer; transition:.15s; background:#fff; }
.choice label:hover { border-color:#c5cdf8; }
.choice label:has(input:checked) { border-color:var(--pri); background:var(--pri-50); }
.choice input { margin-top:5px; }
.choice b { display:block; font-weight:600; } .choice span { color:var(--muted); font-size:12.5px; }

label.file { display:flex; align-items:center; gap:10px; height:42px; padding:0 4px 0 12px; border:1.5px dashed #d0d6e2;
              border-radius:var(--r-sm); background:#fafbfd; cursor:pointer; transition:.15s; }
label.file:hover { border-color:var(--pri); background:var(--pri-50); }
label.file input { display:none; }
label.file .btn { pointer-events:none; height:32px; }
label.file .fname { color:var(--muted); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- patterns & items ---------- */
.patterns { display:grid; grid-template-columns:repeat(auto-fill, minmax(185px, 1fr)); gap:10px; }
.pat { display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:right; padding:12px 14px; border-radius:12px;
       border:1.5px solid var(--line); background:#fff; font:inherit; color:var(--ink); cursor:pointer; transition:.15s; }
.pat:hover { border-color:#c5cdf8; box-shadow:var(--shadow); }
.pat.on { border-color:var(--pri); background:var(--pri-50); box-shadow:0 0 0 3px var(--pri-100); }
.pat .pi { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--pri-50); color:var(--pri); margin-bottom:6px; }
.pat.on .pi { background:var(--pri); color:#fff; }
.pat .pi svg { width:16px; height:16px; }
.pat b { font-weight:600; font-size:13.5px; } .pat small { color:var(--muted); font-size:11.5px; line-height:1.6; }
.pat.off { opacity:.55; cursor:not-allowed; background:#fafbfd; } .pat.off:hover { border-color:var(--line); box-shadow:none; }
.choice label.disabled { opacity:.45; pointer-events:none; }
.req { color:var(--red); }
.table-scroll { overflow-x:auto; margin:0 -4px; padding:0 4px; }
.item-table { min-width:900px; }
.item-table input { min-width:88px; padding:0 8px; }
td.picker { position:relative; }
.picker .q { background:#f7f9ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat right 10px center; padding-right:34px; border-color:#cfd8fb; }
.results { display:none; position:absolute; top:46px; right:6px; width:520px; max-width:80vw; max-height:360px; overflow:auto; background:#fff;
           border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg); z-index:20; }
.results.open { display:block; }
.res { padding:10px 14px; border-bottom:1px solid var(--line2); cursor:pointer; }
.res:hover { background:var(--pri-50); }
.res .d { font-size:13px; line-height:1.7; } .res .m { display:flex; gap:8px; align-items:center; margin-top:4px; font-size:11.5px; color:var(--muted); }
.res.exp { opacity:.6; }
.results .none { padding:16px; color:var(--muted); font-size:13px; }
.sgrow { display:grid; grid-template-columns:200px 1fr 40px; gap:8px; margin-top:8px; }
.progress { height:10px; border-radius:6px; background:var(--gray-50); overflow:hidden; }
.progress div { height:100%; background:linear-gradient(90deg,#5b7cfa,#7b5cf0); width:0; transition:width .4s; }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 18px; border-radius:var(--r-sm);
       border:1px solid var(--pri); background:var(--pri); color:#fff; font:inherit; font-weight:500; cursor:pointer;
       transition:.15s; white-space:nowrap; box-shadow:0 1px 2px rgba(67,97,238,.25); }
.btn:hover { background:var(--pri-600); border-color:var(--pri-600); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn.ghost { background:#fff; color:var(--ink2); border-color:#d6dbe4; box-shadow:var(--shadow); }
.btn.ghost:hover { background:#f7f8fb; }
.btn.danger { background:#fff; color:var(--red); border-color:#f2c2c4; box-shadow:none; }
.btn.danger:hover { background:var(--red-50); }
.btn.sm { height:34px; padding:0 12px; font-size:13px; }
.btn.icon { width:34px; padding:0; }
.btn svg.i { width:17px; height:17px; }

/* ---------- alerts ---------- */
.alert { display:flex; gap:12px; padding:13px 16px; border-radius:12px; margin-bottom:18px; font-size:13.5px; border:1px solid transparent; }
.alert svg.i { margin-top:3px; }
.alert.ok { background:var(--green-50); color:#0c5c41; border-color:#c7ebda; }
.alert.err { background:var(--red-50); color:#8f1f23; border-color:#f6cfd1; }
.alert.info { background:var(--amber-50); color:#7a4306; border-color:#f6dfb8; }
.alert ul { margin:6px 0 0; padding-right:18px; } .alert li { margin:3px 0; }
.alert b { font-weight:600; }

/* ---------- invoice ---------- */
.kv { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:18px 24px; }
.kv .k { color:var(--muted); font-size:12.5px; margin-bottom:2px; }
.kv .v { font-weight:500; word-break:break-all; }
.summary { margin-top:18px; margin-right:auto; width:340px; max-width:100%; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.summary div { display:flex; justify-content:space-between; padding:9px 16px; border-bottom:1px solid var(--line2); font-size:13.5px; }
.summary div span:first-child { color:var(--muted); }
.summary .total { background:var(--pri-50); border:0; font-weight:700; font-size:15px; color:var(--ink); }
.summary .total span:first-child { color:var(--ink); }
.item-table td { padding:8px 6px; } .item-table th { padding:10px 6px; }
.item-table input, .item-table select { height:38px; }
.totalbar { display:flex; align-items:center; gap:12px; margin-top:14px; padding-top:14px; border-top:1px dashed var(--line); }
.totalbar .amt { margin-right:auto; font-size:13px; color:var(--muted); }
.totalbar .amt b { font-size:18px; color:var(--ink); margin:0 6px; }
details.card summary { cursor:pointer; font-weight:600; color:var(--ink2); list-style:none; display:flex; align-items:center; gap:8px; }
details.card summary::-webkit-details-marker { display:none; }
details.card[open] summary { margin-bottom:12px; }
pre { background:#0f172a; color:#cbd5e1; padding:16px; border-radius:12px; overflow:auto; font-size:12px; direction:ltr; text-align:left;
      font-family:var(--mono); line-height:1.6; margin:0; }

.empty { text-align:center; padding:56px 20px; color:var(--muted); }
.empty .ico { width:56px; height:56px; border-radius:16px; background:var(--pri-50); color:var(--pri); display:grid; place-items:center; margin:0 auto 14px; }
.empty .ico svg { width:26px; height:26px; }
.empty b { display:block; color:var(--ink); font-size:15px; margin-bottom:4px; }

.steps td { padding:14px 16px; }
.step-ico { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; }
.step-ico.ok { background:var(--green-50); color:var(--green); } .step-ico.err { background:var(--red-50); color:var(--red); }
.step-ico svg { width:16px; height:16px; }

@media (max-width: 960px) {
  .shell { grid-template-columns:1fr; } aside { position:static; height:auto; flex-direction:row; flex-wrap:wrap; }
  .side-foot { display:none; } .stats { grid-template-columns:repeat(2,1fr); } main { padding:20px 16px; }
  .choice { grid-template-columns:1fr; }
}
.lat { font-family:var(--lat); }

.side-foot .who { margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.08); }
.side-foot .who b { display:block; color:#fff; font-size:13px; } .side-foot .who span { font-size:12px; }
.side-foot .exp { font-size:11.5px; margin-top:6px; color:#c9d4f1; }
.linkbtn { background:none; border:0; padding:0; color:#c9d4f1; font:inherit; font-size:12px; cursor:pointer; }
.linkbtn:hover { color:#fff; }
.dlg { border:0; border-radius:16px; padding:24px; width:380px; max-width:92vw; box-shadow:var(--shadow-lg); }
.dlg::backdrop { background:rgba(14,26,51,.45); }
.secret { background:#0e1a33; color:#fff; border-radius:12px; padding:14px 18px; margin-bottom:18px; display:flex; gap:24px; flex-wrap:wrap; align-items:center; }
.secret span { color:#a9b6d3; font-size:12px; margin-left:6px; } .secret b { font-family:var(--mono); font-size:15px; letter-spacing:.5px; }
/* login */
.auth { min-height:100vh; display:grid; place-items:center; background:radial-gradient(1200px 600px at 80% -10%, #1b2d57 0, #0e1a33 55%, #0a1326 100%); padding:24px; }
.auth-card { width:400px; max-width:100%; background:#fff; border-radius:20px; padding:34px 32px 28px; box-shadow:0 30px 80px -20px rgba(0,0,0,.5); }
.wordmark { text-align:center; margin-bottom:6px; }
.wordmark b { font-family:var(--lat); font-weight:700; font-size:30px; letter-spacing:6px; color:#0e1a33; }
.wordmark b i { font-style:normal; color:#c9a227; }
.wordmark small { display:block; color:#9a7d1c; font-size:12.5px; margin-top:2px; letter-spacing:1px; }
.auth-card h1 { text-align:center; font-size:16px; font-weight:600; color:var(--ink2); margin:18px 0 22px; }
.auth-card .field { margin-bottom:14px; }
.auth-card .btn { width:100%; height:46px; background:#0e1a33; border-color:#0e1a33; margin-top:6px; }
.auth-card .btn:hover { background:#1b2d57; }
.auth-foot { text-align:center; color:#8a96b3; font-size:12px; margin-top:18px; }