:root{
  --bg:#0b1516;--bg2:#0f1c1e;--card:#101f21;--line:#243c3e;--line2:#1a2e30;
  --tx:#e8f2f0;--mut:#8ea6a5;--acc:#51c5b8;--acc-d:#062524;
  --ok:#5fd08a;--warn:#f2b652;--bad:#ff7b7b;--info:#7fb4ff;
  --r:10px;--fs:13px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{font-size:var(--fs)}
body{margin:0;background:var(--bg);color:var(--tx);font-family:Vazirmatn,Vazir,Tahoma,Arial,sans-serif;line-height:1.7;display:flex;min-height:100vh}
a{color:inherit;text-decoration:none}
::selection{background:#51c5b855}

/* ─── sidebar ─── */
.side{width:188px;flex:none;background:var(--bg2);border-left:1px solid var(--line2);padding:16px 10px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:9px;padding:4px 8px 18px;font-size:14px}
.brand .mark{width:9px;height:22px;background:var(--acc);border-radius:3px}
.side nav{display:flex;flex-direction:column;gap:2px;flex:1}
.side nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--mut);transition:background .12s,color .12s}
.side nav a svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.side nav a:hover{background:#15282a;color:var(--tx)}
.side nav a.on{background:#173436;color:var(--acc)}
.out{margin:0;padding:8px 10px;border-top:1px solid var(--line2)}
.link{background:none;border:0;color:var(--mut);cursor:pointer;font:inherit;padding:0}
.link:hover{color:var(--bad)}

/* ─── main ─── */
.main{flex:1;min-width:0;padding:20px 26px 48px;max-width:1180px}
.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.top h1{margin:0;font-size:17px;font-weight:700}
.flash{padding:9px 13px;border-radius:8px;margin-bottom:14px;border:1px solid;font-size:12.5px}
.flash.ok{background:#12291f;border-color:#235a3c;color:#a6ecc1}
.flash.err{background:#301818;border-color:#6b2b2b;color:#ffb4b4}

/* ─── stats ─── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px}
.stats.sub{grid-template-columns:repeat(4,1fr);margin-bottom:16px}
@media(max-width:760px){.stats,.stats.sub{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:11px 14px}
.stat small{color:var(--mut);display:block;font-size:11.5px}
.stat b{font-size:20px;font-weight:700;display:block;margin-top:1px}
.stat.acc b{color:var(--acc)}.stat.warn b{color:var(--warn)}.stat.bad b{color:var(--bad)}
.stat b.z{color:var(--mut)!important}
.stat b{line-height:1.5;min-height:30px}

/* ─── card / grid ─── */
.card{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:14px 16px;margin-bottom:14px}
.card h2{margin:0 0 10px;font-size:13px;font-weight:700;color:var(--mut)}
.grid2{display:grid;grid-template-columns:1.6fr 1fr;gap:14px}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}

/* ─── table ─── */
.tw{overflow-x:auto;border:1px solid var(--line2);border-radius:var(--r);background:var(--card)}
table{width:100%;border-collapse:collapse}
th,td{padding:8px 12px;text-align:right;white-space:nowrap}
th:last-child,td:last-child{width:1%}
th{font-weight:600;color:var(--mut);font-size:11.5px;background:#0d1a1c;border-bottom:1px solid var(--line2)}
td{border-bottom:1px solid var(--line2)}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#122325}
td.ltr,.ltr{direction:ltr;text-align:left;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
td.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;direction:ltr;text-align:right}
.mut{color:var(--mut)}
.trunc{max-width:190px;overflow:hidden;text-overflow:ellipsis}
.empty{padding:26px;text-align:center;color:var(--mut)}

/* ─── badge ─── */
.b{display:inline-block;padding:1px 9px;border-radius:99px;font-size:11.5px;border:1px solid;line-height:1.6}
.b.active,.b.permanent{color:var(--ok);border-color:#235a3c;background:#12291f}
.b.permanent{color:var(--info);border-color:#274a7a;background:#101f36}
.b.expiring{color:var(--warn);border-color:#6b5320;background:#2b2210}
.b.expired{color:var(--mut);border-color:#33484a;background:#152426}
.b.revoked{color:var(--bad);border-color:#6b2b2b;background:#301818}

/* ─── form ─── */
label{display:block;font-size:12px;color:var(--mut);margin:0 0 4px}
input,select,textarea{width:100%;background:#0b1718;border:1px solid var(--line);border-radius:8px;color:var(--tx);padding:8px 10px;font:inherit}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 3px #51c5b826}
textarea{resize:vertical;min-height:64px}
input[type=checkbox]{width:auto;accent-color:var(--acc)}
.f{margin-bottom:12px}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hint{font-size:11.5px;color:var(--mut);margin-top:3px}

/* ─── buttons ─── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;border:1px solid transparent;background:var(--acc);color:var(--acc-d);font:inherit;font-weight:700;cursor:pointer;transition:filter .12s}
.btn:hover{filter:brightness(1.08)}
.btn.sec{background:#1b3032;color:var(--tx);border-color:var(--line)}
.btn.bad{background:#3a1c1c;color:#ffb4b4;border-color:#6b2b2b}
.btn.sm{padding:3px 10px;font-size:12px;font-weight:600}
.btn[disabled]{opacity:.45;cursor:not-allowed}
td.acts{white-space:nowrap}
td.acts>*{display:inline-block;vertical-align:middle;margin-inline-start:4px}
.acts{display:flex;gap:6px}
td.acts{display:table-cell}

/* ─── toolbar / pager ─── */
.bar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;align-items:center}
.bar input,.bar select{width:auto;min-width:150px}
.bar .grow{flex:1;min-width:200px}
.pager{display:flex;gap:4px;margin-top:12px;justify-content:center}
.pager a,.pager span{padding:3px 10px;border-radius:7px;border:1px solid var(--line2);background:var(--card)}
.pager .cur{background:#173436;color:var(--acc);border-color:#245a5a}

/* ─── code box ─── */
.code{direction:ltr;text-align:left;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;word-break:break-all;background:#0b1718;border:1px dashed var(--line);border-radius:8px;padding:10px 12px;user-select:all}

/* ─── bars (chart) ─── */
.chart{display:flex;align-items:flex-end;gap:8px;height:120px;padding-top:6px}
.chart div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}
.chart i{display:block;width:100%;max-width:26px;background:var(--acc);border-radius:4px 4px 0 0;min-height:2px;opacity:.85}
.chart small{color:var(--mut);font-size:10.5px}
.chart em{font-style:normal;font-size:11px}

/* ─── login ─── */
.login{margin:auto;width:min(340px,92vw)}
.login .card{padding:22px}
.login h1{font-size:16px;margin:0 0 4px}
.login p{margin:0 0 16px;color:var(--mut)}

dl.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}
dl.kv dt{color:var(--mut)}dl.kv dd{margin:0}

@media(max-width:760px){
  body{flex-direction:column}
  .side{width:auto;height:auto;position:static;flex-direction:row;align-items:center;overflow-x:auto;padding:8px;border-left:0;border-bottom:1px solid var(--line2);gap:4px}
  .brand{padding:0 6px}.brand b{display:none}
  .side nav{flex-direction:row;flex:none}.side nav a span{display:none}.side nav a{padding:8px}
  .out{border:0;padding:0 6px;margin-inline-start:auto}
  .main{padding:14px 12px 40px}
}
@media print{.side,.bar,.acts,.pager,.btn{display:none!important}.main{max-width:none;padding:0}body{background:#fff;color:#000}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ─── موبایل: ردیف جدول → کارت ─── */
@media(max-width:760px){
  .tw{border:0;background:none;overflow:visible}
  .tw table,.tw tbody,.tw tr,.tw td{display:block;width:100%}
  .tw thead{display:none}
  .tw tr{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);margin-bottom:10px;padding:6px 12px}
  .tw td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:5px 0;border:0;white-space:normal;text-align:right}
  .tw td::before{content:attr(data-l);color:var(--mut);font-size:11.5px;flex:none}
  .tw td[data-l=""]::before{display:none}
  .tw td.ltr,.tw td.mono{direction:ltr;justify-content:flex-end}
  .tw td.ltr::before,.tw td.mono::before{margin-inline-end:auto;direction:rtl}
  .tw td .v{min-width:0;text-align:left}
  .tw td:not(.ltr):not(.mono) .v{text-align:left}
  .tw td.trunc{max-width:none;word-break:break-all;white-space:normal}
  .tw td.acts{justify-content:flex-start;padding-top:8px;border-top:1px solid var(--line2);margin-top:4px}
  .tw td.empty{display:block;text-align:center}
  .tw td.empty::before{display:none}
  .tw tbody tr:hover td{background:none}
}