/* ============================================================
   FileHub — Stylesheet (clean rewrite)
   ============================================================ */

:root{
 --font:Vazirmatn,Tahoma,'Segoe UI',system-ui,sans-serif;
 --ac:#0e7c86;
 --bg:#f2f5f7;
 --sf:#fff;
 --tx:#17212b;
 --mu:#667583;
 --bd:#dde4ea;
 --ok:#188a4b;
 --er:#c93a3a;
 --wn:#b7791f;
 --r:10px;
}

[data-theme=dark]{
 --bg:#10161c;
 --sf:#18212a;
 --tx:#e6edf3;
 --mu:#8b9aa8;
 --bd:#2a3642;
}

*{box-sizing:border-box}

html{font-family:var(--font)}

body{
 margin:0;
 font:15px/1.7 var(--font);
 background:var(--bg);
 color:var(--tx);
}

a{color:var(--ac);text-decoration:none}
h1{font-size:1.4rem;margin:0 0 1rem}
h2{font-size:1.05rem;margin:0 0 .8rem}

button,input,select,textarea{font:inherit;color:inherit}

input,select,textarea{
 width:100%;
 padding:.5rem .7rem;
 border:1px solid var(--bd);
 border-radius:8px;
 background:var(--sf);
}

input:focus,select:focus,textarea:focus,button:focus-visible{
 outline:2px solid var(--ac);
 outline-offset:1px;
}

/* ---------- Checkbox ---------- */
/* ظاهر پیش‌فرض مرورگر در تم تیره یک جعبه سفید است؛ اینجا یکدست می‌شود */
input[type=checkbox]{
 appearance:none;
 -webkit-appearance:none;
 width:18px;
 height:18px;
 flex:0 0 auto;
 padding:0;
 border:1.5px solid var(--bd);
 border-radius:5px;
 background-color:var(--bg);
 cursor:pointer;
 transition:background-color .15s,border-color .15s;
}
input[type=checkbox]:hover{border-color:var(--ac)}
input[type=checkbox]:checked{
 border-color:var(--ac);
 background-color:var(--ac);
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
 background-position:center;
 background-size:70%;
 background-repeat:no-repeat;
}
input[type=checkbox]:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

label{
 display:block;
 font-size:.85rem;
 color:var(--mu);
 margin:.7rem 0 .2rem;
}

/* ---------- Buttons ---------- */
.btn{
 display:inline-flex;
 align-items:center;
 gap:.3rem;
 border:1px solid var(--bd);
 background:var(--sf);
 padding:.4rem .9rem;
 border-radius:8px;
 cursor:pointer;
 transition:background .15s;
 text-decoration:none;
}
.btn:hover{background:var(--bg)}
.btn.p{background:var(--ac);border-color:var(--ac);color:#fff}
.btn.p:hover{filter:brightness(1.1)}
.btn.d{color:var(--er)}
.btn.s{padding:.15rem .55rem;font-size:.82rem}
.btn:disabled{opacity:.5;cursor:wait}

/* ---------- Auth ---------- */
.auth{
 max-width:400px;
 margin:8vh auto;
 padding:2rem;
 background:var(--sf);
 border:1px solid var(--bd);
 border-radius:14px;
}
.auth h1{font-size:1.7rem;font-weight:800}

/* ---------- Shell ---------- */
.shell{
 display:grid;
 grid-template-columns:230px 1fr;
 min-height:100vh;
}
.side{
 background:var(--sf);
 border-inline-end:1px solid var(--bd);
 padding:1.2rem .8rem;
 position:sticky;
 top:0;
 height:100vh;
}
.brand{
 font-weight:800;
 font-size:1.25rem;
 padding:0 .6rem 1rem;
 color:var(--ac);
}
.side a{
 display:block;
 padding:.5rem .8rem;
 border-radius:8px;
 color:var(--tx);
 margin-bottom:2px;
}
.side a.on{background:var(--ac);color:#fff}
.side a:not(.on):hover{background:var(--bg)}

.top{
 display:flex;
 gap:.6rem;
 align-items:center;
 justify-content:space-between;
 padding:.7rem 1.5rem;
 border-bottom:1px solid var(--bd);
 background:var(--sf);
}
/* min-width:0 لازم است، وگرنه جدول‌های عریض ستون گرید را باز می‌کنند و کل صفحه افقی اسکرول می‌شود */
.shell>*{min-width:0}
.main{padding:1.5rem;max-width:1200px;min-width:0}

/* ---------- Cards ---------- */
.card{
 background:var(--sf);
 border:1px solid var(--bd);
 border-radius:var(--r);
 padding:1.1rem;
 margin-bottom:1rem;
}

.stats{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
 gap:.8rem;
 margin-bottom:1rem;
}
.stat{
 background:var(--sf);
 border:1px solid var(--bd);
 border-radius:var(--r);
 padding:.8rem 1rem;
}
.stat b{display:block;font-size:1.6rem;font-weight:800}
.stat span{color:var(--mu);font-size:.85rem}

.grid2{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:1rem;
}

/* ---------- Tables ---------- */
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{
 padding:.55rem .6rem;
 text-align:start;
 border-bottom:1px solid var(--bd);
 white-space:nowrap;
}
th{color:var(--mu);font-weight:600}
td.w{white-space:normal;min-width:180px}

/* ---------- Badges ---------- */
.b{
 padding:.1rem .6rem;
 border-radius:99px;
 font-size:.78rem;
 background:var(--bg);
 border:1px solid var(--bd);
 display:inline-block;
}
.b.approved{color:var(--ok);border-color:var(--ok)}
.b.rejected{color:var(--er);border-color:var(--er)}
.b.review{color:var(--wn);border-color:var(--wn)}
.b.new{color:var(--ac);border-color:var(--ac)}

/* ---------- Bar / pager ---------- */
.bar{
 display:flex;
 gap:.5rem;
 flex-wrap:wrap;
 margin-bottom:1rem;
}
.bar>*{width:auto;flex:1 1 130px}

.pager{
 display:flex;
 gap:.5rem;
 align-items:center;
 justify-content:center;
 margin-top:1rem;
}
.empty,.err{text-align:center;color:var(--mu);padding:2rem}
.err{color:var(--er)}

/* ---------- Drop zone ---------- */
.drop{
 border:2px dashed var(--bd);
 border-radius:14px;
 padding:2.2rem;
 text-align:center;
 color:var(--mu);
 cursor:pointer;
 transition:.15s;
}
.drop.over{border-color:var(--ac);background:var(--bg)}

/* ---------- Upload card ---------- */
.up{
 border:1px solid var(--bd);
 border-radius:var(--r);
 padding:.8rem;
 margin-top:.7rem;
}
.prog{
 height:6px;
 background:var(--bg);
 border-radius:9px;
 overflow:hidden;
 margin-top:.5rem;
}
.prog i{
 display:block;
 height:100%;
 width:0;
 background:var(--ac);
 transition:width .1s;
}

/* ---------- Modal ---------- */
.ov{
 position:fixed;
 inset:0;
 background:#0008;
 display:grid;
 place-items:center;
 z-index:50;
 padding:1rem;
 animation:f .15s;
}
.box{
 background:var(--sf);
 border-radius:14px;
 padding:1.3rem;
 width:min(480px,100%);
 max-height:90vh;
 overflow:auto;
 animation:u .18s;
}
@keyframes f{from{opacity:0}}
@keyframes u{from{transform:translateY(10px)}}
.row{
 display:flex;
 gap:.5rem;
 justify-content:flex-end;
 margin-top:1rem;
}

/* ---------- Toasts ---------- */
#toasts{
 position:fixed;
 bottom:1rem;
 inset-inline-start:1rem;
 display:grid;
 gap:.5rem;
 z-index:99;
}
.toast{
 background:var(--tx);
 color:var(--bg);
 padding:.6rem 1rem;
 border-radius:8px;
 animation:u .2s;
}
.toast.err{background:var(--er);color:#fff}

/* ---------- Preview / dl ---------- */
.pv{
 width:100%;
 height:60vh;
 border:1px solid var(--bd);
 border-radius:8px;
 background:#fff;
}
img.pv{object-fit:contain;height:auto;max-height:60vh}
.dl{
 display:grid;
 grid-template-columns:120px 1fr;
 gap:.3rem .8rem;
}
.dl dt{color:var(--mu)}
.dl dd{margin:0;word-break:break-word}

/* ---------- Mobile ---------- */
.menu{display:none}
@media(max-width:800px){
 .shell{grid-template-columns:1fr}
 .side{
  position:fixed;
  inset-block:0;
  inset-inline-start:0;
  width:230px;
  z-index:40;
  transform:translateX(100%);
  transition:transform .2s;
 }
 [dir=rtl] .side{transform:translateX(100%)}
 .side.open{transform:none!important}
 .menu{display:inline-flex}
 .grid2{grid-template-columns:1fr}
 .main{padding:1rem}
}

@media(prefers-reduced-motion:reduce){
 *{animation:none!important;transition:none!important}
}

[hidden]{display:none!important}

/* ---------- Chart ---------- */
.chh{
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:.5rem;
 flex-wrap:wrap;
 margin-bottom:.4rem;
}
.chh h2{margin:0}

.seg{
 display:inline-flex;
 border:1px solid var(--bd);
 border-radius:8px;
 overflow:hidden;
}
.seg button{
 border:0;
 background:transparent;
 padding:.2rem .8rem;
 cursor:pointer;
 font-size:.85rem;
}
.seg button.on{background:var(--ac);color:#fff}

.chw{position:relative}
.svg{
 width:100%;
 height:auto;
 display:block;
 direction:ltr;
 touch-action:pan-y;
}
.svg text{
 fill:var(--mu);
 font-size:11px;
 font-family:inherit;
}
.svg .gl{stroke:var(--bd);stroke-width:1}
.svg .gl.hv{stroke:var(--ac);stroke-dasharray:3 3}
.svg .ln{
 fill:none;
 stroke:var(--ac);
 stroke-width:2.5;
 stroke-linejoin:round;
}
.svg .dt{fill:var(--sf);stroke:var(--ac);stroke-width:1.6}
.svg .hc{fill:var(--ac);stroke:var(--sf);stroke-width:2}

.tip{
 position:absolute;
 transform:translate(-50%,-100%);
 background:var(--tx);
 color:var(--bg);
 padding:.3rem .7rem;
 border-radius:8px;
 font-size:.8rem;
 pointer-events:none;
 white-space:nowrap;
 text-align:center;
}

/* ============================================================
   Share modal
   ============================================================ */
.share-list{
 max-height:300px;
 overflow:auto;
 border:1px solid var(--bd);
 border-radius:10px;
 padding:.3rem;
 background:var(--bg);
}
.share-row{
 display:flex;
 align-items:center;
 gap:.7rem;
 padding:.55rem .7rem;
 border-radius:8px;
 cursor:pointer;
 transition:.12s;
 margin:0;
}
.share-row:hover{background:var(--sf)}
.share-row input[type=checkbox]{
 width:18px;
 height:18px;
 accent-color:var(--ac);
 cursor:pointer;
 flex:0 0 auto;
}
.share-u{
 flex:1;
 min-width:0;
 display:flex;
 flex-direction:column;
 line-height:1.35;
}
.share-u b{font-size:.92rem}
.share-u small{
 color:var(--mu);
 font-size:.8rem;
 overflow:hidden;
 text-overflow:ellipsis;
}
.share-tag{
 font-size:.72rem;
 color:var(--ok);
 border:1px solid var(--ok);
 border-radius:99px;
 padding:.05rem .55rem;
 flex:0 0 auto;
 display:inline-block;
}
.share-current{
 display:flex;
 flex-wrap:wrap;
 gap:.4rem;
 margin-top:.4rem;
}
.chip{
 display:inline-flex;
 align-items:center;
 gap:.4rem;
 background:var(--bg);
 border:1px solid var(--bd);
 border-radius:99px;
 padding:.2rem .7rem;
 font-size:.85rem;
 cursor:pointer;
 transition:.12s;
}
.chip:hover{border-color:var(--er);color:var(--er)}
.chip b{font-weight:800;font-size:.75rem;opacity:.7}

/* ============================================================
   Dashboard — Modern
   ============================================================ */
.dash-head{
 display:flex;
 align-items:baseline;
 justify-content:space-between;
 gap:1rem;
 margin-bottom:1.2rem;
 flex-wrap:wrap;
}
.dash-head h1{margin:0}

.stat-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
 gap:.9rem;
 margin-bottom:1.2rem;
 align-items:stretch;
}
.stat-card{
 position:relative;
 background:var(--sf);
 border:1px solid var(--bd);
 border-radius:14px;
 padding:1rem 1.1rem;
 display:flex;
 align-items:center;
 gap:.9rem;
 overflow:hidden;
 min-height:82px;
 transition:transform .18s,box-shadow .18s,border-color .18s;
}
.stat-card:hover{
 transform:translateY(-2px);
 border-color:color-mix(in oklab,var(--stat-color) 45%,var(--bd));
}
.stat-icon{
 flex:0 0 44px;
 width:44px;height:44px;
 border-radius:12px;
 display:grid;place-items:center;
 background:var(--bg);
 color:var(--stat-color);
 border:1px solid var(--bd);
}
.stat-body{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.stat-label{font-size:.82rem;color:var(--mu)}
.stat-value{font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.stat-sub{font-size:.72rem;color:var(--mu)}

.dash-grid{
 display:grid;
 grid-template-columns:2fr 1fr;
 gap:1rem;
 margin-bottom:1rem;
}
.dash-grid2{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:1rem;
}
@media(max-width:900px){
 .dash-grid,.dash-grid2{grid-template-columns:1fr}
}

.card-head{
 display:flex;
 align-items:flex-start;
 justify-content:space-between;
 gap:.6rem;
 flex-wrap:wrap;
 margin-bottom:.8rem;
}
.card-head h2{margin:0;font-size:1rem}
.card-head .mu{font-size:.8rem;display:block;margin-top:.15rem}

.donut-card .donut-wrap{
 display:flex;
 align-items:center;
 gap:1.2rem;
 flex-wrap:wrap;
 justify-content:center;
}
.donut{position:relative;width:170px;height:170px;flex:0 0 auto}
.donut-svg{width:100%;height:100%;display:block}
.donut-center{
 position:absolute;
 inset:0;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 pointer-events:none;
}
.donut-center b{font-size:1.6rem;font-weight:800;line-height:1}
.donut-center span{font-size:.8rem}

.donut-legend{
 display:grid;
 gap:.4rem;
 flex:1;
 min-width:140px;
}
.legend-row{
 display:grid;
 grid-template-columns:12px 1fr auto auto;
 gap:.5rem;
 align-items:center;
 font-size:.85rem;
 padding:.25rem .2rem;
 border-radius:6px;
}
.legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.legend-label{color:var(--tx)}
.legend-val{font-weight:700;font-size:.85rem}

.list{display:flex;flex-direction:column;gap:.15rem}
.list-item{
 display:flex;
 align-items:center;
 gap:.7rem;
 padding:.55rem .55rem;
 border-radius:10px;
 color:var(--tx);
 transition:background .15s;
 text-decoration:none;
 border:1px solid transparent;
}
.list-item:hover{background:var(--bg);border-color:var(--bd)}
.li-icon{
 flex:0 0 38px;
 width:38px;height:38px;
 border-radius:10px;
 display:grid;place-items:center;
 background:var(--bg);
 color:var(--ac);
 font-size:.68rem;
 font-weight:800;
 letter-spacing:.3px;
 border:1px solid var(--bd);
}
.li-icon.act{
 font-size:.95rem;
}
.li-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.li-body b{font-size:.9rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li-body small{font-size:.78rem;color:var(--mu);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li-end{flex:0 0 auto}

.cta-card{
 display:flex;
 flex-direction:column;
 align-items:center;
 text-align:center;
 gap:.6rem;
 padding:2rem 1.2rem;
}
.cta-card .cta-icon{
 width:60px;height:60px;
 display:grid;place-items:center;
 border-radius:16px;
 background:var(--bg);
 color:var(--ac);
 border:1px solid var(--bd);
 margin-bottom:.3rem;
}
.cta-card h2{margin:0}
.cta-card p{margin:0;font-size:.9rem;max-width:280px}
.cta-card .btn{margin-top:.4rem}

.chart-card .chw{margin-top:.4rem}
.chart-card .seg{font-size:.82rem}

@media(max-width:600px){
 .stat-grid{grid-template-columns:repeat(2,1fr)}
 .stat-value{font-size:1.25rem}
 .stat-icon{width:38px;height:38px;flex-basis:38px}
 .stat-icon svg{width:18px;height:18px}
 .donut{width:150px;height:150px}
}

/* ============================================================
   Files view — Professional Cards
   ============================================================ */
.page-head{
 display:flex;
 align-items:flex-start;
 justify-content:space-between;
 gap:1rem;
 margin-bottom:1.2rem;
 flex-wrap:wrap;
}
.page-head h1{margin:0}
.page-sub{margin:.2rem 0 0;font-size:.88rem}
.page-actions{display:flex;gap:.5rem;align-items:center}

.tabs{
 display:flex;
 gap:.25rem;
 border-bottom:1px solid var(--bd);
 margin-bottom:1rem;
 overflow-x:auto;
 scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
 background:transparent;
 border:0;
 border-bottom:2px solid transparent;
 padding:.55rem .9rem;
 color:var(--mu);
 cursor:pointer;
 font-size:.9rem;
 white-space:nowrap;
 transition:color .15s,border-color .15s;
 border-radius:6px 6px 0 0;
 font:inherit;
}
.tab:hover{color:var(--tx)}
.tab.on{color:var(--ac);border-bottom-color:var(--ac);font-weight:600}

.filters{
 display:flex;
 gap:.5rem;
 flex-wrap:wrap;
 align-items:center;
 margin-bottom:.6rem;
}
.filter-search{
 position:relative;
 flex:1 1 260px;
 min-width:200px;
}
.filter-search svg{
 position:absolute;
 inset-inline-start:.7rem;
 top:50%;
 transform:translateY(-50%);
 color:var(--mu);
 pointer-events:none;
}
.filter-search input{
 padding-inline-start:2.2rem !important;
}
.filters select{flex:0 0 auto;width:auto;min-width:130px;max-width:180px}
.filters .btn{flex:0 0 auto}

.adv-filters{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
 gap:.5rem;
 margin-bottom:1rem;
 padding:.8rem;
 background:var(--sf);
 border:1px solid var(--bd);
 border-radius:10px;
}
.adv-filters input{width:100%}

.bulk-bar{
 position:sticky;
 top:0;
 z-index:5;
 display:flex;
 align-items:center;
 gap:.5rem;
 background:var(--sf);
 border:1px solid var(--ac);
 border-radius:10px;
 padding:.55rem .8rem;
 margin-bottom:.8rem;
 font-size:.88rem;
}

.file-grid{
 display:grid;
 grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
 gap:.9rem;
 margin-bottom:1rem;
}
.file-card{
 position:relative;
 background:var(--sf);
 border:1px solid var(--bd);
 border-radius:14px;
 padding:1rem;
 display:flex;
 flex-direction:column;
 gap:.7rem;
 transition:transform .15s,border-color .15s,box-shadow .15s;
}
.file-card:hover{
 transform:translateY(-2px);
 border-color:var(--ac);
}
.fc-head{
 display:flex;
 align-items:center;
 gap:.7rem;
 min-width:0;
}
.fc-check{display:flex;align-items:center;margin:0;flex:0 0 auto}
.fc-check input{
 width:18px;height:18px;accent-color:var(--ac);cursor:pointer;
}
.fc-icon{
 flex:0 0 44px;
 width:44px;height:44px;
 border-radius:11px;
 display:grid;place-items:center;
 font-size:.68rem;
 font-weight:800;
 letter-spacing:.3px;
 background:var(--bg);
 color:var(--ac);
 border:1px solid var(--bd);
}
.fc-icon.pdf{background:#ef444418;color:#ef4444;border-color:#ef444440}
.fc-icon.png,.fc-icon.jpg,.fc-icon.jpeg,.fc-icon.gif,.fc-icon.webp{background:#a855f718;color:#a855f7;border-color:#a855f740}
.fc-icon.zip{background:#f59e0b18;color:#f59e0b;border-color:#f59e0b40}
.fc-icon.docx,.fc-icon.xlsx{background:#0ea5e918;color:#0ea5e9;border-color:#0ea5e940}
.fc-icon.txt,.fc-icon.csv{background:#10b98118;color:#10b981;border-color:#10b98140}

.fc-title{
 flex:1;
 min-width:0;
 display:flex;
 flex-direction:column;
 gap:1px;
}
.fc-title b{
 font-size:.95rem;
 font-weight:600;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
}
.fc-title small{
 font-size:.76rem;
 color:var(--mu);
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
}
.fc-status{flex:0 0 auto}

.fc-meta{
 display:flex;
 gap:.6rem;
 flex-wrap:wrap;
 font-size:.78rem;
 color:var(--mu);
 padding:.4rem .1rem;
 border-top:1px dashed var(--bd);
 border-bottom:1px dashed var(--bd);
}
.fc-meta span{display:inline-flex;align-items:center;gap:.25rem}

.fc-actions{
 display:flex;
 gap:.3rem;
 flex-wrap:wrap;
}
.fc-actions .btn.s{padding:.25rem .6rem;font-size:.78rem}

.sk-grid{
 display:grid;
 grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
 gap:.9rem;
}
.sk-card{
 background:var(--sf);
 border:1px solid var(--bd);
 border-radius:14px;
 padding:1rem;
 display:flex;
 flex-direction:column;
 gap:.6rem;
}
.sk-line{
 height:14px;
 background:linear-gradient(90deg,var(--bd) 25%,#0000 50%,var(--bd) 75%);
 background-size:200% 100%;
 animation:sk 1.4s infinite;
 border-radius:6px;
}
.sk-line.sm{width:60%}
.sk-line.xs{width:40%;height:12px}
@keyframes sk{
 0%{background-position:200% 0}
 100%{background-position:-200% 0}
}

.empty-big{
 text-align:center;
 padding:3rem 1rem;
 color:var(--mu);
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:.6rem;
}
.empty-big svg{opacity:.4}
.empty-big h3{margin:0;color:var(--tx);font-size:1.05rem}
.empty-big p{margin:0;font-size:.88rem;max-width:320px}
.empty-big .btn{margin-top:.4rem}

@media(max-width:600px){
 .file-grid{grid-template-columns:1fr}
 .filters select{max-width:100%;flex:1 1 100%}
}

/* ============================================================
   Upload page — Professional
   ============================================================ */
.up-layout{
 display:grid;
 grid-template-columns:1fr 280px;
 gap:1rem;
 align-items:start;
}
@media(max-width:900px){
 .up-layout{grid-template-columns:1fr}
 .up-side{order:-1}
}

.up-main{
 display:flex;
 flex-direction:column;
 gap:.9rem;
}

.up-drop-hero{
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 gap:.5rem;
 padding:2rem 1.2rem;
 border:2px dashed var(--bd);
 border-radius:16px;
 background:radial-gradient(900px 160px at 50% -20%,color-mix(in oklab,var(--ac) 10%,transparent),transparent 70%);
 color:var(--mu);
 cursor:pointer;
 transition:.2s;
 text-align:center;
}
.up-drop-hero:hover,
.up-drop-hero.over{
 border-color:var(--ac);
 color:var(--ac);
 background:color-mix(in oklab,var(--ac) 6%,var(--sf));
 transform:translateY(-1px);
}
.up-drop-hero b{
 font-size:1.05rem;
 color:var(--tx);
 font-weight:700;
}
.up-drop-icon{
 width:64px;height:64px;
 display:grid;place-items:center;
 border-radius:16px;
 background:color-mix(in oklab,var(--ac) 12%,transparent);
 color:var(--ac);
 border:1px solid color-mix(in oklab,var(--ac) 28%,transparent);
 margin-bottom:.3rem;
 transition:transform .2s;
}
.up-drop-hero:hover .up-drop-icon,
.up-drop-hero.over .up-drop-icon{
 transform:scale(1.06) translateY(-2px);
}

.up-toolbar{
 display:flex;
 align-items:center;
 gap:.5rem;
 flex-wrap:wrap;
 padding:.7rem .9rem;
 background:var(--sf);
 border:1px solid var(--bd);
 border-radius:12px;
}
.up-toolbar .btn{gap:.35rem}
.up-toolbar #cnt{
 font-size:.85rem;
 padding:.15rem .5rem;
 border-radius:99px;
 background:var(--bg);
 border:1px solid var(--bd);
}

.up-side{
 display:flex;
 flex-direction:column;
 gap:.7rem;
 position:sticky;
 top:1rem;
}
.up-info{
 background:var(--sf);
 border:1px solid var(--bd);
 border-radius:12px;
 padding:1rem;
}
.up-info-head{
 display:flex;
 align-items:center;
 gap:.4rem;
 font-weight:700;
 font-size:.9rem;
 color:var(--ac);
 margin-bottom:.6rem;
 padding-bottom:.5rem;
 border-bottom:1px dashed var(--bd);
}
.up-tips{
 list-style:none;
 padding:0;
 margin:0;
 display:flex;
 flex-direction:column;
 gap:.5rem;
 font-size:.83rem;
 color:var(--mu);
}
.up-tips li{
 position:relative;
 padding-inline-start:1.1rem;
 line-height:1.5;
}
.up-tips li::before{
 content:'';
 position:absolute;
 inset-inline-start:0;
 top:.55rem;
 width:6px;height:6px;
 border-radius:50%;
 background:var(--ac);
 opacity:.6;
}
.up-tips b{color:var(--tx);font-weight:600}

.upq{display:grid;gap:.7rem}

.up-card{
 background:var(--sf);
 border:1px solid var(--bd);
 border-radius:12px;
 padding:.9rem 1rem;
 transition:border-color .2s,box-shadow .2s;
 animation:upCardIn .25s ease-out;
}
@keyframes upCardIn{
 from{opacity:0;transform:translateY(-6px)}
 to{opacity:1;transform:none}
}
.up-card.uploading{
 border-color:var(--ac);
 box-shadow:0 0 0 3px color-mix(in oklab,var(--ac) 12%,transparent);
}
.up-card.done{
 border-color:var(--ok);
 background:color-mix(in oklab,var(--ok) 5%,var(--sf));
}

.up-head{
 display:flex;
 align-items:center;
 gap:.7rem;
 margin-bottom:.7rem;
}
.up-icon{
 width:40px;height:40px;
 flex:0 0 40px;
 border-radius:10px;
 display:grid;
 place-items:center;
 background:color-mix(in oklab,var(--ac) 12%,transparent);
 color:var(--ac);
 font-weight:800;
 font-size:.68rem;
 letter-spacing:.3px;
 border:1px solid color-mix(in oklab,var(--ac) 25%,transparent);
}
.up-card.done .up-icon{
 background:color-mix(in oklab,var(--ok) 15%,transparent);
 color:var(--ok);
 border-color:color-mix(in oklab,var(--ok) 30%,transparent);
}
.up-meta{
 flex:1;
 min-width:0;
 display:flex;
 flex-direction:column;
 gap:2px;
}
.up-meta b{
 font-size:.92rem;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
}
.up-meta small{color:var(--mu);font-size:.78rem}
.err-t{color:var(--er)}

.up-fields{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:.7rem;
 margin-bottom:.5rem;
}
.up-fields label{margin:0 0 .2rem;font-size:.78rem}
.up-fields textarea{resize:vertical;min-height:38px}
@media(max-width:700px){
 .up-fields{grid-template-columns:1fr}
}

.up-card .prog{
 height:5px;
 background:var(--bg);
 border-radius:9px;
 overflow:hidden;
 margin:.2rem 0 .5rem;
}
.up-card .prog i{
 display:block;
 height:100%;
 width:0;
 background:var(--ac);
 transition:width .15s;
}
.up-card.done .prog i{background:var(--ok)}

.up-foot{
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:.5rem;
}
.up-foot .m{font-size:.82rem;color:var(--mu)}
.up-card.done .up-foot .go{display:none}

/* ============================================================
   Profile page — Professional
   ============================================================ */
.profile-hero{
 display:flex;
 align-items:center;
 gap:1rem;
 margin-bottom:1.2rem;
 padding:1.3rem 1.4rem;
 background:var(--sf);
 border:1px solid var(--bd);
 border-radius:16px;
 position:relative;
 overflow:hidden;
}
.profile-hero::after{
 content:'';
 position:absolute;
 inset-inline-end:-40px;
 top:-40px;
 width:180px;height:180px;
 border-radius:50%;
 background:radial-gradient(circle,color-mix(in oklab,var(--ac) 20%,transparent),transparent 70%);
 pointer-events:none;
}
.profile-avatar{
 width:64px;height:64px;
 flex:0 0 64px;
 border-radius:18px;
 display:grid;place-items:center;
 font-weight:800;
 font-size:1.7rem;
 color:#fff;
 background:linear-gradient(135deg,var(--ac),color-mix(in oklab,var(--ac) 60%,#000));
 box-shadow:0 8px 20px -10px color-mix(in oklab,var(--ac) 60%,transparent);
}
.profile-meta{flex:1;min-width:0;position:relative;z-index:1}
.profile-meta h1{margin:0 0 .3rem;font-size:1.35rem}
.profile-tags{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;font-size:.88rem}
.tag{
 display:inline-block;
 padding:.15rem .65rem;
 border-radius:99px;
 font-size:.78rem;
 font-weight:600;
 border:1px solid;
}
.tag.admin{color:#8b5cf6;border-color:#8b5cf6;background:#8b5cf610}
.tag.user{color:var(--ac);border-color:var(--ac);background:color-mix(in oklab,var(--ac) 10%,transparent)}

.profile-stats{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
 gap:.7rem;
 margin-bottom:1.2rem;
}
.pstat{
 display:flex;
 align-items:center;
 gap:.7rem;
 padding:.85rem 1rem;
 background:var(--sf);
 border:1px solid var(--bd);
 border-radius:12px;
}
.pstat-icon{
 width:40px;height:40px;
 flex:0 0 40px;
 border-radius:11px;
 display:grid;place-items:center;
 background:color-mix(in oklab,var(--c) 15%,transparent);
 color:var(--c);
 border:1px solid color-mix(in oklab,var(--c) 30%,transparent);
}
.pstat b{display:block;font-size:1.15rem;font-weight:800;line-height:1.2}
.pstat span{font-size:.8rem;color:var(--mu)}

.profile-grid{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:1rem;
 margin-bottom:1rem;
}
@media(max-width:800px){
 .profile-grid{grid-template-columns:1fr}
}

.profile-card{padding:1.2rem}
.profile-card .card-head{margin-bottom:.9rem}
.profile-card label{margin-top:.7rem}
.profile-card .row{margin-top:1rem}

.input-lock{position:relative}
.input-lock input{padding-inline-end:2.2rem;background:var(--bg)}
.lock-icon{
 position:absolute;
 inset-inline-end:.7rem;
 top:50%;
 transform:translateY(-50%);
 color:var(--mu);
 pointer-events:none;
}

.input-eye{position:relative}
.input-eye input{padding-inline-end:2.5rem}
.eye-btn{
 position:absolute;
 inset-inline-end:.4rem;
 top:50%;
 transform:translateY(-50%);
 background:transparent;
 border:0;
 padding:.35rem;
 cursor:pointer;
 color:var(--mu);
 border-radius:6px;
 display:grid;
 place-items:center;
}
.eye-btn:hover{background:var(--bg);color:var(--tx)}

.pw-meter{margin-top:.5rem}
.pw-bar{
 height:5px;
 background:var(--bg);
 border-radius:99px;
 overflow:hidden;
 border:1px solid var(--bd);
}
.pw-bar i{
 display:block;
 height:100%;
 width:0;
 background:var(--er);
 border-radius:99px;
 transition:width .2s,background .2s;
}
.pw-label{display:block;margin-top:.35rem;font-size:.78rem}

.security-card .sec-list{
 display:flex;
 flex-direction:column;
 gap:.7rem;
}
.sec-item{
 display:flex;
 align-items:center;
 gap:.7rem;
 padding:.55rem .7rem;
 border:1px solid var(--bd);
 border-radius:10px;
 background:var(--bg);
}
.sec-item b{display:block;font-size:.88rem;font-weight:600}
.sec-item small{font-size:.78rem;color:var(--mu)}
.sec-item > div{flex:1;min-width:0}
.sec-item .btn.s{flex:0 0 auto}
.sec-dot{
 width:9px;height:9px;
 border-radius:50%;
 flex:0 0 9px;
}
.sec-dot.ok{background:var(--ok);box-shadow:0 0 0 3px color-mix(in oklab,var(--ok) 20%,transparent)}
.sec-dot.warn{background:var(--wn);box-shadow:0 0 0 3px color-mix(in oklab,var(--wn) 20%,transparent)}
.sec-dot.err{background:var(--er);box-shadow:0 0 0 3px color-mix(in oklab,var(--er) 20%,transparent)}

/* ============================================================
   Header — Professional
   ============================================================ */
.top{
 display:flex;
 align-items:center;
 gap:.4rem;
 padding:.55rem 1rem;
 border-bottom:1px solid var(--bd);
 background:var(--sf);
 position:sticky;
 top:0;
 z-index:20;
 backdrop-filter:saturate(1.5) blur(8px);
}
.top-title h2{margin:0;font-size:.95rem;font-weight:600;color:var(--tx)}

.icon-btn{
 width:36px;height:36px;
 display:grid;place-items:center;
 border:1px solid transparent;
 background:transparent;
 color:var(--tx);
 border-radius:9px;
 cursor:pointer;
 transition:background .15s,border-color .15s;
 flex:0 0 auto;
}
.icon-btn:hover{background:var(--bg);border-color:var(--bd)}
.icon-btn:focus-visible{outline:2px solid var(--ac);outline-offset:1px}

.menu-btn{display:none}

.notif-wrap,.user-wrap{position:relative}

.notif-badge{
 position:absolute;
 top:4px;
 inset-inline-end:4px;
 min-width:16px;
 height:16px;
 padding:0 4px;
 border-radius:99px;
 background:var(--er);
 color:#fff;
 font-size:.65rem;
 font-weight:700;
 display:grid;
 place-items:center;
 border:2px solid var(--sf);
 line-height:1;
}

.user-btn{
 display:flex;
 align-items:center;
 gap:.5rem;
 padding:.25rem .5rem .25rem .35rem;
 border:1px solid var(--bd);
 background:var(--sf);
 border-radius:99px;
 cursor:pointer;
 color:var(--tx);
 transition:background .15s,border-color .15s;
 max-width:200px;
}
.user-btn:hover{background:var(--bg);border-color:var(--ac)}
.user-name{
 font-size:.85rem;
 font-weight:600;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
}
.avatar-mini{
 width:26px;height:26px;
 border-radius:50%;
 display:grid;place-items:center;
 background:linear-gradient(135deg,var(--ac),color-mix(in oklab,var(--ac) 55%,#000));
 color:#fff;
 font-weight:800;
 font-size:.8rem;
 flex:0 0 26px;
}

/* برند در ساید */
.brand{
 display:flex;
 align-items:center;
 gap:.5rem;
 font-weight:800;
 font-size:1.15rem;
 padding:0 .6rem 1rem;
 color:var(--ac);
}
.brand-dot{
 width:9px;height:9px;
 border-radius:50%;
 background:var(--ac);
 box-shadow:0 0 0 3px color-mix(in oklab,var(--ac) 22%,transparent);
 flex:0 0 auto;
}
.side-nav{display:flex;flex-direction:column;gap:2px}

/* Popover */
.popover-backdrop{
 position:fixed;
 inset:0;
 background:transparent;
 z-index:60;
}
.popover{
 position:fixed;
 z-index:70;
 background:var(--sf);
 border:1px solid var(--bd);
 border-radius:14px;
 box-shadow:0 12px 40px -12px #0004,0 4px 12px -4px #0002;
 min-width:240px;
 max-width:360px;
 padding:.4rem;
 animation:popIn .15s ease-out;
}
[data-theme=dark] .popover{
 box-shadow:0 12px 40px -12px #000a,0 4px 12px -4px #0006;
}
@keyframes popIn{
 from{opacity:0;transform:translateY(-4px) scale(.98)}
 to{opacity:1;transform:none}
}
.popover.pop-notif{min-width:320px;max-width:380px;max-height:70vh;display:flex;flex-direction:column}
.popover.pop-user{min-width:220px}

.pop-head{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:.5rem;
 padding:.55rem .75rem;
 border-bottom:1px solid var(--bd);
}
.pop-head b{font-size:.92rem}
.pop-head .mu{font-size:.78rem}
.pop-body{overflow:auto;max-height:60vh}
.pop-foot{
 padding:.55rem .75rem;
 border-top:1px solid var(--bd);
 text-align:center;
}
.pop-foot a{font-size:.82rem;color:var(--ac)}

.pop-list{display:flex;flex-direction:column;padding:.25rem}
.pop-item{
 display:flex;
 gap:.6rem;
 padding:.6rem .7rem;
 border-radius:8px;
 cursor:pointer;
 transition:background .12s;
 text-decoration:none;
 color:var(--tx);
 border:0;
 background:transparent;
 width:100%;
 text-align:start;
 font:inherit;
}
.pop-item:hover{background:var(--bg)}
.pop-item .pop-icon{
 flex:0 0 32px;
 width:32px;height:32px;
 display:grid;place-items:center;
 border-radius:9px;
 background:var(--bg);
 color:var(--ac);
 border:1px solid var(--bd);
}
.pop-item .pop-icon.danger{color:var(--er)}
.pop-item-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pop-item-body b{font-size:.88rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop-item-body small{font-size:.76rem;color:var(--mu);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* اعلان‌های داخل پنل */
.notif-item{
 display:flex;
 gap:.6rem;
 padding:.55rem .7rem;
 border-radius:8px;
 cursor:default;
 transition:background .12s;
}
.notif-item.unread{background:color-mix(in oklab,var(--ac) 6%,transparent)}
.notif-item .notif-dot{
 flex:0 0 8px;
 width:8px;height:8px;
 border-radius:50%;
 background:var(--ac);
 margin-top:.5rem;
}
.notif-item.read .notif-dot{background:var(--bd)}
.notif-body{flex:1;min-width:0}
.notif-body p{margin:0;font-size:.85rem;line-height:1.5;color:var(--tx)}
.notif-body small{font-size:.74rem;color:var(--mu);display:block;margin-top:.15rem}

.notif-empty{
 padding:2rem 1rem;
 text-align:center;
 color:var(--mu);
 font-size:.85rem;
}

/* موبایل */
@media(max-width:800px){
 .menu-btn{display:grid}
 .user-name{display:none}
 .top-title h2{font-size:.88rem}
}

/* پروفایل هدر */
.pop-user-head{
 display:flex;
 align-items:center;
 gap:.7rem;
 padding:.8rem .8rem .7rem;
}
.pop-user-avatar{
 width:42px;height:42px;
 border-radius:50%;
 display:grid;place-items:center;
 background:linear-gradient(135deg,var(--ac),color-mix(in oklab,var(--ac) 55%,#000));
 color:#fff;
 font-weight:800;
 font-size:1.1rem;
 flex:0 0 auto;
}
.pop-user-info{min-width:0;flex:1}
.pop-user-info b{display:block;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop-user-info small{font-size:.78rem;color:var(--mu);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}

/* === Nav badge (اشتراکی با من) === */
.nav-badge{
 display:inline-grid;
 place-items:center;
 min-width:20px;
 height:20px;
 padding:0 6px;
 border-radius:99px;
 background:var(--er);
 color:#fff;
 font-size:.7rem;
 font-weight:700;
 line-height:1;
 margin-inline-start:auto;
 box-shadow:0 0 0 2px var(--sf);
 animation:navBadgePop .3s ease-out;
}
@keyframes navBadgePop{
 from{transform:scale(.4);opacity:0}
 to{transform:scale(1);opacity:1}
}
.side a{
 display:flex !important;
 align-items:center;
 gap:.5rem;
}
.side a .nav-label{
 flex:1;
}

/* === Delete confirm dialog === */
.del-box{
 text-align:center;
 max-width:420px;
}
.del-icon{
 width:64px;height:64px;
 display:grid;place-items:center;
 margin:0 auto .8rem;
 border-radius:50%;
 background:color-mix(in oklab,var(--er) 12%,transparent);
 color:var(--er);
 border:1px solid color-mix(in oklab,var(--er) 30%,transparent);
}
.del-box h2{
 margin:0 0 .4rem;
 font-size:1.1rem;
}
.del-msg{
 margin:0 0 1.2rem;
 color:var(--mu);
 font-size:.9rem;
 line-height:1.6;
}
.del-actions{
 display:flex;
 gap:.5rem;
 justify-content:center;
}
.del-actions .btn{padding:.5rem 1.1rem}

/* === Users / Roles UI === */
.user-cell{
 display:flex;
 align-items:center;
 gap:.6rem;
}
.user-avatar-mini{
 width:34px;height:34px;
 border-radius:50%;
 display:grid;place-items:center;
 background:linear-gradient(135deg,var(--ac),color-mix(in oklab,var(--ac) 55%,#000));
 color:#fff;
 font-weight:800;
 font-size:.85rem;
 flex:0 0 34px;
}
.user-cell b{display:block;font-size:.88rem}
.user-cell small{font-size:.76rem}

.role-badge{
 display:inline-block;
 padding:.15rem .7rem;
 border-radius:99px;
 font-size:.78rem;
 font-weight:600;
 border:1px solid;
}
.role-badge.admin{color:#ef4444;border-color:#ef4444;background:#ef444410}
.role-badge.user{color:var(--ac);border-color:var(--ac);background:color-mix(in oklab,var(--ac) 8%,transparent)}

.status-dot{
 display:inline-block;
 width:8px;height:8px;
 border-radius:50%;
 margin-inline-end:.35rem;
 vertical-align:middle;
}
.status-dot.ok{background:var(--ok);box-shadow:0 0 0 3px color-mix(in oklab,var(--ok) 18%,transparent)}
.status-dot.off{background:var(--mu)}

.row-actions{display:flex;gap:.3rem;flex-wrap:wrap}
.row-actions .btn.s{padding:.25rem .6rem;font-size:.78rem;gap:.25rem}

/* Roles picker (user roles) */
.roles-picker{
 display:grid;
 gap:.5rem;
 max-height:340px;
 overflow:auto;
 padding:.3rem;
}
.role-option{
 display:flex;
 align-items:flex-start;
 gap:.7rem;
 padding:.75rem .9rem;
 border:1px solid var(--bd);
 border-radius:10px;
 cursor:pointer;
 transition:.15s;
 margin:0;
 background:var(--sf);
 position:relative;
}
.role-option::before{
 content:'';
 position:absolute;
 inset-inline-start:0;
 top:0;
 bottom:0;
 width:3px;
 background:var(--role-color);
 border-radius:10px 0 0 10px;
}
.role-option:hover{border-color:color-mix(in oklab,var(--role-color) 60%,var(--bd))}
.role-option input[type=checkbox]{
 width:18px;height:18px;
 accent-color:var(--role-color);
 cursor:pointer;
 margin-top:.15rem;
 flex:0 0 auto;
}
.role-option-body{flex:1;min-width:0}
.role-option-body b{display:block;font-size:.92rem;color:var(--tx);margin-bottom:.15rem}
.role-option-body small{font-size:.78rem;display:block;margin-bottom:.3rem}
.role-perms-count{
 display:inline-block;
 font-size:.72rem;
 padding:.1rem .5rem;
 border-radius:99px;
 background:var(--bg);
 color:var(--mu);
 border:1px solid var(--bd);
}

/* Roles manager */
.roles-manager{
 display:flex;
 flex-direction:column;
 gap:.8rem;
 max-height:60vh;
 overflow:auto;
 padding:.2rem;
}
.role-card{
 background:var(--sf);
 border:1px solid var(--bd);
 border-radius:12px;
 padding:1rem;
 position:relative;
}
.role-card::before{
 content:'';
 position:absolute;
 inset-inline-start:0;
 top:12px;
 bottom:12px;
 width:3px;
 background:var(--role-color);
 border-radius:0 3px 3px 0;
}
.role-card-head{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:.6rem;
 margin-bottom:.7rem;
 flex-wrap:wrap;
 padding-inline-start:.5rem;
}
.role-card-title{
 display:flex;
 align-items:center;
 gap:.5rem;
 flex-wrap:wrap;
 font-size:.9rem;
}
.role-card-title b{font-size:1rem}
.role-dot{width:10px;height:10px;border-radius:50%;flex:0 0 10px}
.role-sys{
 font-size:.68rem;
 padding:.1rem .5rem;
 border-radius:99px;
 background:var(--bg);
 color:var(--mu);
 border:1px solid var(--bd);
}
.role-card-actions{display:flex;gap:.3rem}
.role-card-body{padding-inline-start:.5rem}

.perm-groups{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
 gap:.7rem;
}
.perm-group{
 background:var(--bg);
 border:1px solid var(--bd);
 border-radius:9px;
 padding:.6rem .7rem;
}
.perm-group-title{
 font-size:.78rem;
 font-weight:700;
 color:var(--mu);
 margin-bottom:.4rem;
 padding-bottom:.3rem;
 border-bottom:1px dashed var(--bd);
}
.perm-list{display:flex;flex-direction:column;gap:.15rem}
.perm-item{
 display:flex;
 align-items:center;
 gap:.5rem;
 padding:.28rem .4rem;
 border-radius:6px;
 font-size:.83rem;
 cursor:pointer;
 transition:background .12s;
 margin:0;
 color:var(--mu);
}
.perm-item:hover{background:var(--sf)}
.perm-item.on{color:var(--tx);font-weight:600}
.perm-item input[type=checkbox]{
 width:14px;height:14px;
 accent-color:var(--role-color,var(--ac));
 cursor:pointer;
 flex:0 0 auto;
}

@media(max-width:700px){
 .perm-groups{grid-template-columns:1fr}
 .role-card-head{flex-direction:column;align-items:flex-start}
}

/* Online status */
.user-avatar-mini{position:relative;overflow:visible}
.user-avatar-mini>span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%}
.online-dot{position:absolute;bottom:-1px;inset-inline-end:-1px;width:11px;height:11px;border-radius:50%;border:2px solid var(--sf);display:block}
.online-dot.on{background:var(--ok);box-shadow:0 0 0 1px color-mix(in oklab,var(--ok) 40%,transparent)}
.online-dot.off{background:var(--mu);opacity:.5}
.online-badge{display:inline-flex;align-items:center;gap:.35rem;padding:.15rem .6rem;border-radius:99px;background:color-mix(in oklab,var(--ok) 12%,transparent);color:var(--ok);border:1px solid color-mix(in oklab,var(--ok) 30%,var(--bd));font-size:.75rem;font-weight:600}
.online-badge i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok);animation:op 1.6s infinite}
.online-badge.off{background:var(--bg);color:var(--mu);border-color:var(--bd)}
@keyframes op{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.3)}}

/* ============================================================
   Roles page — Professional
   ============================================================ */
.roles-toolbar{
 display:flex;
 gap:.6rem;
 align-items:center;
 flex-wrap:wrap;
 margin-bottom:1rem;
 padding:.7rem .9rem;
 background:var(--sf);
 border:1px solid var(--bd);
 border-radius:12px;
}
.roles-stats{ font-size:.85rem; }

.roles-page{
 display:flex;
 flex-direction:column;
 gap:1rem;
}
.role-card{
 background:var(--sf);
 border:1px solid var(--bd);
 border-radius:14px;
 padding:1.1rem 1.2rem;
 position:relative;
 transition:border-color .15s, box-shadow .15s;
}
.role-card::before{
 content:'';
 position:absolute;
 inset-inline-start:0;
 top:14px;
 bottom:14px;
 width:4px;
 background:var(--role-color);
 border-radius:0 4px 4px 0;
}
.role-card:hover{
 border-color:color-mix(in oklab, var(--role-color) 45%, var(--bd));
}
.role-card.sys{
 background:linear-gradient(135deg, color-mix(in oklab, var(--role-color) 4%, var(--sf)), var(--sf) 60%);
}

.role-card-head{
 display:flex;
 align-items:flex-start;
 justify-content:space-between;
 gap:.8rem;
 margin-bottom:.9rem;
 padding-inline-start:.6rem;
 flex-wrap:wrap;
}
.role-card-title{
 display:flex;
 align-items:center;
 gap:.7rem;
 min-width:0;
 flex:1;
}
.role-icon{
 flex:0 0 42px;
 width:42px; height:42px;
 border-radius:12px;
 display:grid;
 place-items:center;
 font-size:1.2rem;
 color:#fff;
 font-weight:700;
 box-shadow:0 2px 8px -2px color-mix(in oklab, var(--role-color) 50%, transparent);
}
.role-title-line{
 display:flex;
 align-items:center;
 gap:.5rem;
 flex-wrap:wrap;
}
.role-title-line b{
 font-size:1.05rem;
 font-weight:700;
}
.role-desc{
 font-size:.82rem;
 display:block;
 margin-top:.15rem;
}
.role-sys{
 font-size:.68rem;
 padding:.1rem .55rem;
 border-radius:99px;
 background:var(--bg);
 color:var(--mu);
 border:1px solid var(--bd);
 font-weight:600;
}
.role-card-actions{
 display:flex;
 align-items:center;
 gap:.4rem;
 flex-wrap:wrap;
}
.role-counter{
 font-size:.78rem;
 color:var(--mu);
 padding:.2rem .6rem;
 background:var(--bg);
 border:1px solid var(--bd);
 border-radius:99px;
}

.role-card-body{ padding-inline-start:.6rem; }

.perm-groups{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
 gap:.7rem;
}
.perm-group{
 background:var(--bg);
 border:1px solid var(--bd);
 border-radius:10px;
 padding:.65rem .75rem;
}
.perm-group-title{
 font-size:.78rem;
 font-weight:700;
 color:var(--mu);
 margin-bottom:.5rem;
 padding-bottom:.35rem;
 border-bottom:1px dashed var(--bd);
 display:flex;
 align-items:center;
 gap:.35rem;
}
.perm-list{
 display:flex;
 flex-direction:column;
 gap:.15rem;
}
.perm-item{
 display:flex;
 align-items:center;
 gap:.5rem;
 padding:.35rem .45rem;
 border-radius:8px;
 font-size:.84rem;
 cursor:pointer;
 transition:background .12s, color .12s;
 margin:0;
 color:var(--mu);
 user-select:none;
}
.perm-item:hover{ background:var(--sf); }
.perm-item.on{
 color:var(--tx);
 font-weight:600;
}
.perm-item input[type=checkbox]{
 position:absolute;
 opacity:0;
 pointer-events:none;
}
.perm-check{
 flex:0 0 16px;
 width:16px; height:16px;
 border-radius:5px;
 border:1.5px solid var(--bd);
 background:var(--sf);
 display:grid;
 place-items:center;
 transition:background .12s, border-color .12s;
}
.perm-check::after{
 content:'';
 width:9px; height:9px;
 border-radius:2px;
 background:var(--ac);
 transform:scale(0);
 transition:transform .12s;
}
.perm-item.on .perm-check{
 border-color:var(--ac);
}
.perm-item.on .perm-check::after{
 transform:scale(1);
}
.perm-label{ flex:1; }

@media(max-width:700px){
 .perm-groups{ grid-template-columns:1fr; }
 .role-card-head{ flex-direction:column; align-items:stretch; }
 .role-card-actions{ justify-content:space-between; }
}

/* ============================================================
   Settings page — Professional
   ============================================================ */
.settings-grid{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:1rem;
 margin-bottom:1rem;
}
@media(max-width:800px){
 .settings-grid{ grid-template-columns:1fr; }
}
.settings-card{ padding:1.2rem; }
.settings-card .card-head{ margin-bottom:.9rem; }

.color-row{
 display:flex;
 gap:.5rem;
 align-items:stretch;
}
.color-row input[type=color]{
 width:60px;
 height:44px;
 padding:.2rem;
 cursor:pointer;
 flex:0 0 60px;
}
.color-row input[type=text]{
 flex:1;
 direction:ltr;
 font-family:monospace;
}
.color-preview{
 display:flex;
 align-items:center;
 gap:.6rem;
 margin-top:.6rem;
 font-size:.85rem;
}
.color-swatch{
 width:32px; height:32px;
 border-radius:8px;
 border:1px solid var(--bd);
 display:inline-block;
}

.hint-row{
 margin-top:.8rem;
}
.hint-chips{
 display:flex;
 flex-wrap:wrap;
 gap:.3rem;
 margin-top:.4rem;
}
.chip.small{
 font-size:.75rem;
 padding:.15rem .55rem;
 background:var(--bg);
 border:1px solid var(--bd);
 border-radius:99px;
 cursor:pointer;
 color:var(--tx);
 transition:border-color .12s, background .12s;
}
.chip.small:hover{
 border-color:var(--ac);
 background:color-mix(in oklab, var(--ac) 8%, var(--sf));
}

.settings-actions{
 display:flex;
 justify-content:flex-end;
 padding-top:.6rem;
}

/* ============================================================
   Audit page — Professional
   ============================================================ */
.audit-toolbar{
 display:flex;
 gap:.5rem;
 align-items:center;
 flex-wrap:wrap;
 margin-bottom:1rem;
 padding:.7rem .9rem;
 background:var(--sf);
 border:1px solid var(--bd);
 border-radius:12px;
}
.audit-toolbar select{ width:auto; min-width:160px; }

.audit-table td{ vertical-align:middle; }
.audit-user{
 display:inline-flex;
 align-items:center;
 gap:.5rem;
}
.audit-avatar{
 width:28px; height:28px;
 border-radius:50%;
 display:grid;
 place-items:center;
 background:linear-gradient(135deg, var(--ac), color-mix(in oklab, var(--ac) 55%, #000));
 color:#fff;
 font-weight:800;
 font-size:.75rem;
 flex:0 0 auto;
}
.audit-action{
 display:inline-flex;
 align-items:center;
 gap:.4rem;
 padding:.15rem .55rem;
 border-radius:99px;
 /* بدون حاشیه و سایه دکمه‌ای، تا مثل یک برچسب خوانده شود نه دکمه */
 background:color-mix(in oklab, var(--c) 14%, transparent);
 color:var(--c);
 font-size:.8rem;
 font-weight:600;
}
.audit-icon{
 display:inline-block;
 font-size:.95rem;
 line-height:1;
}