#app{position:relative; display:flex; min-height:100vh; min-height:100dvh}

#sidebar{
  width:250px; flex:0 0 250px; background:var(--navy); color:var(--on-primary);
  display:flex; flex-direction:column; position:sticky; top:0;
  height:100vh;
  height:100dvh;
  box-shadow:var(--shadow-m); z-index:40;
}
html[data-theme="dark"] #sidebar{background:var(--surface-dark)}
.brand{padding:var(--sp5) var(--sp4) var(--sp4); text-align:center; border-bottom:1px solid rgba(255,255,255,.10)}
.brand svg{width:104px;height:auto;display:block;margin:0 auto}
.logo-img{height:auto; display:block; margin:0 auto; max-width:100%}
/* The artwork is never recoloured, so on the navy sidebar it sits on a light
   plate instead of being tinted. */
.logo-img.on-navy{background:var(--logo-plate); border-radius:var(--r-md); padding:9px 11px; box-sizing:border-box}
.brand .tag.fa{letter-spacing:0 !important; text-transform:none !important; font-family:var(--fa) !important; font-size:.8rem !important}
.brand .tag{
  margin-top:10px; font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(242,233,224,.55); font-family:var(--serif); font-weight:500;
}
#navList{flex:1; overflow-y:auto; padding:var(--sp3) var(--sp2); display:flex; flex-direction:column; gap:2px}
#navList::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16); border-color:transparent}
.nav-btn{
  display:flex; align-items:center; gap:11px; width:100%; padding:11px 13px;
  border-radius:var(--r-md); color:rgba(242,233,224,.80); font-size:.92rem; font-weight:500;
  text-align:right; transition:background .16s, color .16s; position:relative; min-height:var(--tap);
}
.nav-btn .ic{width:19px;height:19px;flex:0 0 19px;opacity:.85}
.nav-btn:hover{background:rgba(255,255,255,.07); color:#fff}
.nav-btn.active{background:var(--rose); color:var(--on-accent-ink); font-weight:600}
.nav-btn.active .ic{opacity:1}
.nav-badge{
  margin-inline-start:auto; background:rgba(255,255,255,.16); color:#fff;
  border-radius:99px; padding:1px 8px; font-size:.72rem; font-weight:700; min-width:22px; text-align:center;
}
.nav-btn.active .nav-badge{background:rgba(0,0,0,.20); color:var(--on-accent-ink)}
.nav-badge.alert{background:var(--rose-light); color:var(--on-accent-soft)}
.nav-sep{height:1px;background:rgba(255,255,255,.09);margin:var(--sp3) 12px}
#sideFoot{
  padding:var(--sp3);
  border-top:1px solid rgba(255,255,255,.10);
  display:flex; flex-direction:column; gap:10px;
}

#main{flex:1; min-width:0; display:flex; flex-direction:column}
#topbar{
  display:none; align-items:center; gap:var(--sp3); padding:10px var(--sp4);
  background:var(--navy); color:var(--on-primary); position:sticky; top:0; z-index:35;
  padding-top:calc(10px + env(safe-area-inset-top));
}
html[data-theme="dark"] #topbar{background:var(--surface-dark)}
#topbar .tb-title{font-weight:600; font-size:1rem; flex:1}
#topbar svg.tb-logo{height:26px;width:auto}
.icon-btn{
  width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r-sm);
  color:inherit; transition:background .16s;
}
.icon-btn:hover{background:rgba(255,255,255,.12)}
/* نوار نسخهٔ آزمایشی — فقط وقتی سرور demo باشد ساخته می‌شود */
#demoBar{
  display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px;
  padding:7px var(--sp4); background:var(--rose-mist); color:var(--ink-2);
  border-bottom:1px solid var(--line); font-size:.76rem; line-height:1.7; text-align:center;
}
#demoBar b{color:var(--rose-deep)}
#demoBar a{color:var(--navy);font-weight:700;text-decoration:none}
#demoBar span + span::before{content:'·'; margin-inline-end:14px; color:var(--muted)}
#demoBar i{font-style:normal}
@media (max-width:640px){ #demoBar span:has(.db-reset){display:none} }

#view{flex:1; padding:var(--sp5) var(--sp5) var(--sp7); max-width:1320px; width:100%; margin:0 auto}

.page-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp4);
  margin-bottom:var(--sp5); flex-wrap:wrap;
}
.page-head h1{
  margin:0; font-size:1.6rem; font-weight:700; letter-spacing:-.01em; line-height:1.3;
}
.page-head h1 .kicker{
  display:block; font-family:var(--serif); font-size:.72rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--rose-deep); font-weight:600; margin-bottom:3px;
}
.page-head .sub{color:var(--muted); font-size:.88rem; margin-top:2px}
.head-actions{display:flex; gap:var(--sp2); flex-wrap:wrap}

/* ---------- پای منو: کاربر واردشده و خروج ---------- */
/* ---------- کیستی کاربر ---------- */
/* دکمه است، نه فقط برچسب: پروفایل را باز می‌کند */
.side-user{
  display:flex; align-items:center; gap:9px; min-width:0; width:100%;
  padding:5px 6px; border-radius:var(--r-md);
  background:transparent; border:0; cursor:pointer; text-align:start;
  transition:background .16s;
}
.side-user:hover{background:rgba(255,255,255,.08)}
.side-user-edit{margin-inline-start:auto; opacity:0; color:rgba(255,255,255,.7); transition:opacity .16s}
.side-user:hover .side-user-edit{opacity:1}
.side-avatar{font-size:.86rem}
.side-who{display:flex; flex-direction:column; min-width:0; line-height:1.28}
.side-user-name{
  font-weight:600; font-size:.8rem; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.side-user-role{font-size:.68rem; color:rgba(255,255,255,.55)}

/* ---------- دکمه‌های پای منو ----------
   هر سه یک قد و یک عرض‌اند: آیکون بالا، برچسب پایین. برچسب کوتاه
   نگه داشته شده تا در منوی ۲۷۰ پیکسلی گوشی هم دو خط نشود. */
.foot-actions{display:flex; gap:6px}
.foot-btn{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  padding:9px 4px; min-height:56px;
  border:1px solid transparent; border-radius:var(--r-md);
  background:rgba(255,255,255,.07);
  color:rgba(242,233,224,.88);
  font:600 .7rem var(--fa);
  cursor:pointer;
  transition:background .16s, color .16s;
}
.foot-btn span{max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.foot-btn .ic{opacity:.8; transition:opacity .16s}
.foot-btn:hover{background:rgba(255,255,255,.15); color:#fff}
.foot-btn:hover .ic{opacity:1}
.foot-btn:active{transform:translateY(1px)}
.foot-btn-out:hover{background:rgba(214,92,80,.24)}