@font-face{font-family:"Vazirmatn";font-weight:400;font-display:swap;src:local("Vazirmatn"),local("Vazirmatn Regular"),url("/fonts/Vazirmatn-Regular.ttf")}
@font-face{font-family:"Vazirmatn";font-weight:500;font-display:swap;src:local("Vazirmatn Medium"),url("/fonts/Vazirmatn-Medium.ttf")}
@font-face{font-family:"Vazirmatn";font-weight:700;font-display:swap;src:local("Vazirmatn Bold"),url("/fonts/Vazirmatn-Bold.ttf")}

:root{
  --ink:#0d0a16; --surface:#15112a; --raised:#1d1838; --line:#2c2550; --line-2:#3a3266;
  --text:#ece8fa; --muted:#9a92c0; --accent:#8b6cff; --accent-soft:#2a2255; --accent-text:#c9bcff;
  --ok:#4ade80; --warn:#fbbf24; --danger:#fb7185; --radius:10px;
  --font:"Vazirmatn","Segoe UI",Tahoma,system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ink);color:var(--text);font:400 14px/1.75 var(--font)}
h1,h2,h3{margin:0;font-weight:700}
h1{font-size:22px} h2{font-size:17px} h3{font-size:15px}
a{color:var(--accent-text)}
code{font-family:ui-monospace,Consolas,monospace;font-size:12px;background:var(--raised);padding:1px 6px;border-radius:5px}
.muted{color:var(--muted)} .hint{color:var(--muted);font-size:12px;font-weight:400}
.ltr{direction:ltr;unicode-bidi:plaintext}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── controls ── */
input,select,textarea{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px 10px;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none}
textarea{min-height:76px;resize:vertical}
input[type=checkbox]{width:auto;accent-color:var(--accent)}
label{display:block;font-weight:500}
label>input,label>select,label>textarea{margin-top:4px;font-weight:400}
.btn{font:inherit;font-weight:500;color:var(--text);background:var(--raised);border:1px solid var(--line-2);border-radius:8px;padding:6px 14px;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:#7a58f5}
.btn.danger{color:var(--danger);border-color:#5a2a3a;background:transparent}
.btn.danger:hover{background:#3a1626}
.btn.ghost{background:transparent}
.btn.sm{padding:2px 10px;font-size:12.5px}
.btn.wide{width:100%;margin-top:12px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:9px;overflow:hidden}
.seg button{font:inherit;background:transparent;color:var(--muted);border:0;padding:5px 16px;cursor:pointer}
.seg button.on{background:var(--accent);color:#fff}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:1px 9px;border-radius:99px;background:var(--raised);border:1px solid var(--line);color:var(--muted)}
.chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text)}
.chip.ok{color:var(--ok);border-color:#1f5a3a}
.chip.warn{color:var(--warn);border-color:#5f4a12}
.chip.bad{color:var(--danger);border-color:#5a2a3a}
button.chip{font:inherit;font-size:12px;cursor:pointer}

/* ── auth ── */
body.auth{display:grid;place-items:center;min-height:100vh;padding:20px}
.auth-card{width:min(400px,100%);background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px}
.auth-card .mark{display:block;margin:0 auto 10px}
.auth-card h1,.auth-card>p{text-align:center}
.auth-card form{display:grid;gap:12px;margin-top:14px}
.alert{border-radius:8px;padding:8px 12px;margin-top:12px;font-size:13px}
.alert.err{background:#3a1626;color:#ffb4c1;border:1px solid #5a2a3a}
.alert.warn{background:#3a2f10;color:#ffe08a;border:1px solid #5f4a12}
.alert.info{background:var(--accent-soft);color:var(--accent-text);border:1px solid var(--line-2)}

/* ── shell ── */
#app{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.boot{padding:40px;color:var(--muted)}
.side{background:var(--surface);border-inline-end:1px solid var(--line);padding:18px 12px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 16px}
.brand img{width:38px;height:38px}
.brand b{display:block;font-size:16px;line-height:1.2}
.brand span{font-size:12px;color:var(--muted)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:8px;color:var(--muted);text-decoration:none;cursor:pointer}
.nav a:hover{background:var(--raised);color:var(--text)}
.nav a.on{background:var(--accent-soft);color:var(--accent-text);font-weight:700}
.nav small{background:var(--raised);border-radius:99px;padding:0 8px;font-size:11px}
.side .me{margin-top:auto;padding:10px 8px 0;border-top:1px solid var(--line);font-size:13px}
.side .me b{display:block}
.main{padding:24px 28px 60px;min-width:0}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.page-head p{margin:2px 0 0;color:var(--muted)}
.tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.tools .grow{flex:1;min-width:160px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px}
.panel+.panel{margin-top:14px}
.panel>h2{margin-bottom:10px}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.stat div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.stat b{display:block;font-size:24px;line-height:1.3}
.stat span{color:var(--muted);font-size:12.5px}
.empty{padding:30px;text-align:center;color:var(--muted);border:1px dashed var(--line-2);border-radius:12px}
.topbar{display:none}

/* ── weapon grid: the memorable part ── */
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:12px}
.wcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column}
.wcard:hover{border-color:var(--accent)}
.wcard .ph{aspect-ratio:4/3;background:var(--raised);display:grid;place-items:center;color:var(--muted);font-size:12px;overflow:hidden}
.wcard .ph img{width:100%;height:100%;object-fit:contain;background:#fff1}
.wcard .meta{padding:8px 10px;display:grid;gap:4px}
.wcard .meta b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;text-align:right}
.wcard .row{display:flex;gap:4px;flex-wrap:wrap}
.wcard.drop::after,.dz.drop{outline:2px dashed var(--accent);outline-offset:-6px}
.wcard.drop::after{content:"رها کنید تا آپلود شود";position:absolute;inset:0;background:#8b6cffcc;color:#fff;display:grid;place-items:center;font-weight:700;border-radius:12px}
.wcard.off{opacity:.55}

/* ── drawer / modal ── */
.overlay{position:fixed;inset:0;background:#05030bb3;z-index:40;display:flex}
.drawer{background:var(--surface);border-inline-end:1px solid var(--line-2);width:min(520px,100%);height:100%;overflow:auto;padding:18px;animation:slidein .18s ease-out;margin-inline-end:auto}
@keyframes slidein{from{transform:translateX(-24px);opacity:0}to{transform:none;opacity:1}}
.modal{margin:auto;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:18px;width:min(520px,94vw);max-height:92vh;overflow:auto}
.drawer .hd,.modal .hd{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.stack{display:grid;gap:12px}
.rowf{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rowf>.grow{flex:1;min-width:120px}
.sect{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.imgs{display:grid;gap:10px}
.img-row{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:center;background:var(--raised);border-radius:10px;padding:8px}
.img-row img{width:96px;height:72px;object-fit:contain;background:#fff1;border-radius:6px}
.img-row .fn{direction:ltr;text-align:right;font-size:12.5px;word-break:break-all}
.dz{border:1.5px dashed var(--line-2);border-radius:10px;padding:14px;text-align:center;color:var(--muted);cursor:pointer}
.dz:hover{border-color:var(--accent);color:var(--text)}
.pv{max-width:100%;max-height:220px;display:block;margin:0 auto;border-radius:8px;background:#fff1}

/* ── tables/lists ── */
.list{display:grid;gap:8px}
.li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:var(--raised);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.li.dis{opacity:.55}
.li .ctl{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.li .fields{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.li .fields input,.li .fields select{width:auto;min-width:110px}
.arrows{display:flex;flex-direction:column;gap:2px}
.arrows button{font-size:11px;line-height:1;padding:3px 7px}
.tbl{width:100%;border-collapse:collapse}
.tbl th,.tbl td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}
.tbl th{color:var(--muted);font-weight:500;font-size:12.5px}
.tx{display:grid;grid-template-columns:150px 1fr 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.tx .k{font-size:12px;direction:ltr;text-align:right;color:var(--muted);word-break:break-all}
.tx textarea{min-height:56px}
.tx.mod .k{color:var(--accent-text)}

/* telegram-like preview */
.tg{background:#0f1622;border:1px solid #1e2a3d;border-radius:14px;padding:12px;max-width:340px}
.tg .bubble{background:#182233;border-radius:12px;padding:8px 12px;margin-bottom:8px;font-size:13px}
.tg .kb{display:grid;gap:4px}
.tg .kr{display:flex;gap:4px}
.tg .kb span{flex:1;text-align:center;background:#2b3b55;border-radius:7px;padding:5px 6px;font-size:12.5px;color:#dbe6f7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tg .kb span.primary{background:#3b5bdb}.tg .kb span.success{background:#2f9e5a}.tg .kb span.danger{background:#c92a4a}
.tg .kb span.off{opacity:.4;text-decoration:line-through}

.toast{position:fixed;bottom:20px;inset-inline-start:20px;background:var(--raised);border:1px solid var(--line-2);border-radius:10px;padding:9px 16px;z-index:80;max-width:min(440px,90vw)}
.toast.err{border-color:#7a2a44;background:#3a1626;color:#ffb4c1}
.toast.ok{border-color:#1f5a3a}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.lib{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.lib img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff1;display:block}
.lib .m{padding:6px 8px;display:grid;gap:4px;font-size:12px}
.lib .m b{direction:ltr;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (max-width:820px){
  #app{grid-template-columns:1fr}
  .side{position:fixed;inset-block:0;inset-inline-start:0;width:250px;z-index:30;transform:translateX(105%);transition:transform .18s}
  .side.open{transform:none}
  .topbar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
  .main{padding:16px 14px 60px}
  .tx{grid-template-columns:1fr}
}