/* ============================================================
   LAYOUT — sidebar, header, drawers, modal, toasts
   ============================================================ */
.app{ min-height:100vh; }

/* ---------- sidebar ---------- */
.rail{
  position:fixed; inset-block:0; left:0; width:var(--rail-w); z-index:60;
  background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; transition:width var(--t);
}
body.rail-collapsed .rail{ width:var(--rail-w-collapsed); }

.rail-head{
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  border-bottom:1px solid var(--border-soft); min-height:var(--top-h); flex-shrink:0;
}
.rail-head img{ width:34px; height:34px; object-fit:contain; flex:0 0 34px; }
.rail-brand{ overflow:hidden; white-space:nowrap; }
.rail-brand b{ display:block; font-family:var(--font-display); font-size:.9rem; }
.rail-brand span{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-ink); font-weight:600; }

.rail-nav{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:8px; }
.rail-nav::-webkit-scrollbar{ width:4px; }
.rail-nav::-webkit-scrollbar-thumb{ background:var(--border); border-radius:2px; }

.rail-item{
  position:relative; display:flex; align-items:center; gap:11px; width:100%;
  padding:9px 11px; border-radius:var(--r-sm); color:var(--text-2);
  font-size:.86rem; font-weight:500; text-align:left; margin-bottom:2px;
  transition:background var(--t-fast), color var(--t-fast);
}
.rail-item:hover{ background:var(--surface-2); color:var(--text); }
.rail-item.active{ background:var(--primary-tint); color:var(--primary); font-weight:600; }
.rail-item.active::before{
  content:""; position:absolute; left:-8px; top:50%; translate:0 -50%;
  width:3px; height:20px; background:var(--primary); border-radius:0 3px 3px 0;
}
.rail-ico{ width:20px; flex:0 0 20px; display:grid; place-items:center; font-size:1rem; }
.rail-txt{ overflow:hidden; white-space:nowrap; }

.rail-tip{
  position:absolute; left:calc(100% + 10px); top:50%; translate:0 -50%;
  background:var(--text); color:#fff; padding:5px 10px; border-radius:6px;
  font-size:.75rem; white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity var(--t-fast); z-index:5;
}
body.rail-collapsed .rail-item:hover .rail-tip,
body.rail-collapsed .rail-item:focus-visible .rail-tip{ opacity:1; }
body.rail-collapsed .rail-txt,
body.rail-collapsed .rail-brand{ display:none; }
body.rail-collapsed .rail-item{ justify-content:center; }
body.rail-collapsed .rail-head{ justify-content:center; padding-inline:8px; }
body.rail-collapsed .rail-collapse .rail-ico{ transform:rotate(180deg); }

.rail-foot{ padding:8px; border-top:1px solid var(--border-soft); flex-shrink:0; }
.rail-me{ display:flex; align-items:center; gap:10px; padding:8px 11px; }
.rail-me .rail-txt b{ display:block; font-size:.82rem; }
.rail-me .rail-txt small{ font-size:.7rem; color:var(--muted-text); }
.avatar{
  width:30px; height:30px; border-radius:50%; background:var(--primary); color:#fff;
  display:grid; place-items:center; font-size:.72rem; font-weight:700; flex-shrink:0;
}

/* ---------- header ---------- */
.main{ margin-left:var(--rail-w); transition:margin-left var(--t); min-width:0; }
body.rail-collapsed .main{ margin-left:var(--rail-w-collapsed); }

.top{
  position:sticky; top:0; z-index:50; height:var(--top-h);
  display:flex; align-items:center; gap:12px; padding:0 clamp(14px,2vw,26px);
  background:rgba(255,253,248,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.top h1{ font-size:1.02rem; font-family:var(--font-display); }
#menuBtn{ display:none; }
.top-right{ margin-left:auto; display:flex; align-items:center; gap:6px; }

.badge-dot{
  position:absolute; top:3px; right:3px; min-width:16px; height:16px; padding:0 4px;
  background:var(--bad); color:#fff; font-size:.6rem; font-weight:700;
  border-radius:var(--r-pill); display:grid; place-items:center;
}

/* notifications */
.notif-wrap{ position:relative; }
.notif-panel{
  position:absolute; right:0; top:calc(100% + 8px); width:min(340px,88vw);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--sh-2); overflow:hidden; opacity:0; visibility:hidden;
  transform:translateY(-6px); transition:all var(--t); z-index:60;
}
body.notif-open .notif-panel{ opacity:1; visibility:visible; transform:none; }
.notif-panel h3{ padding:12px 14px; font-size:.82rem; border-bottom:1px solid var(--border-soft); }
.notif-list{ max-height:340px; overflow-y:auto; }
.notif{ display:flex; gap:11px; padding:11px 14px; border-bottom:1px solid var(--border-soft); }
.notif.unread{ background:var(--primary-tint); }
.notif i{ color:var(--primary); font-size:.95rem; margin-top:2px; }
.notif b{ display:block; font-size:.82rem; }
.notif span{ display:block; font-size:.78rem; color:var(--muted-text); }
.notif small{ font-size:.7rem; color:var(--muted-text); }
.notif-empty{ padding:22px 16px; font-size:.82rem; color:var(--muted-text); text-align:center; }

/* profile menu */
.prof-wrap{ position:relative; }
.prof-btn{ display:flex; align-items:center; gap:9px; padding:5px 9px; border-radius:var(--r-sm); }
.prof-btn:hover{ background:var(--surface-2); }
.prof-btn b{ display:block; font-size:.82rem; }
.prof-btn small{ display:block; font-size:.7rem; color:var(--muted-text); }
.prof-menu{
  position:absolute; right:0; top:calc(100% + 8px); width:190px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--sh-2); padding:6px; opacity:0; visibility:hidden;
  transform:translateY(-6px); transition:all var(--t); z-index:60;
}
body.profile-open .prof-menu{ opacity:1; visibility:visible; transform:none; }
.prof-menu a,.prof-menu button{
  display:flex; align-items:center; gap:9px; width:100%; padding:9px 11px;
  border-radius:var(--r-sm); font-size:.85rem; text-align:left;
}
.prof-menu a:hover,.prof-menu button:hover{ background:var(--surface-2); }
@media(max-width:640px){ .prof-btn .prof-text{ display:none; } }

/* ---------- content ---------- */
.view{ padding:clamp(14px,2vw,24px); }

.demo-bar{
  display:flex; align-items:center; gap:10px; padding:9px clamp(14px,2vw,26px);
  background:var(--warn-tint); color:var(--warn); font-size:.8rem;
  border-bottom:1px solid #EBD9B4;
}
.demo-bar b{ font-weight:700; }

/* ---------- mobile ---------- */
.scrim{
  position:fixed; inset:0; background:rgba(37,33,29,.42); z-index:59;
  opacity:0; visibility:hidden; transition:all var(--t);
}
@media(max-width:1023px){
  .rail{ transform:translateX(-100%); width:var(--rail-w); transition:transform var(--t); }
  body.drawer-open .rail{ transform:none; box-shadow:var(--sh-3); }
  body.drawer-open .scrim{ opacity:1; visibility:visible; }
  .main{ margin-left:0 !important; }
  #menuBtn{ display:inline-grid; }
  body.rail-collapsed .rail-txt,
  body.rail-collapsed .rail-brand{ display:block; }
  body.rail-collapsed .rail-item{ justify-content:flex-start; }
  .rail-collapse{ display:none; }
}

/* ---------- modal ---------- */
.modal-wrap{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:16px; }
.modal-scrim{ position:absolute; inset:0; background:rgba(37,33,29,.5); opacity:0; transition:opacity var(--t); }
.modal-wrap.open .modal-scrim{ opacity:1; }
.modal-card{
  position:relative; width:min(560px,100%); max-height:88vh; display:flex; flex-direction:column;
  background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-3);
  opacity:0; transform:translateY(12px) scale(.98); transition:all var(--t);
}
.modal-card.wide{ width:min(820px,100%); }
.modal-wrap.open .modal-card{ opacity:1; transform:none; }
.modal-head{
  display:flex; align-items:center; gap:12px; padding:15px 18px;
  border-bottom:1px solid var(--border-soft); flex-shrink:0;
}
.modal-head h2{ font-size:1rem; font-family:var(--font-display); }
.modal-head .icon-btn{ margin-left:auto; }
.modal-body{ padding:18px; overflow-y:auto; }
.modal-foot{
  display:flex; gap:8px; justify-content:flex-end; padding:13px 18px;
  border-top:1px solid var(--border-soft); flex-shrink:0; flex-wrap:wrap;
}

/* ---------- toasts ---------- */
.toasts{
  position:fixed; bottom:20px; left:50%; translate:-50% 0; z-index:120;
  display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none;
}
.toast{
  display:flex; align-items:center; gap:9px; padding:11px 18px; border-radius:var(--r-pill);
  background:var(--text); color:#fff; font-size:.84rem; box-shadow:var(--sh-3);
  animation:tIn .3s var(--e);
}
.toast.bad{ background:var(--bad); }
.toast.out{ animation:tOut .28s var(--e) forwards; }
@keyframes tIn{ from{ opacity:0; transform:translateY(14px) } }
@keyframes tOut{ to{ opacity:0; transform:translateY(8px) } }