/* ============================== APP SHELL =============================== */
.system{ display:flex; min-height:100vh }

.sidebar{
  width:var(--sidebar-w); flex:0 0 auto; background:var(--bg-2); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:18px 14px; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.side-brand{ display:flex; align-items:center; gap:10px; padding:6px 10px 18px }
.side-brand img{ width:30px; height:30px }
.side-brand strong{ font-family:var(--font-display); letter-spacing:.04em; font-size:15px }

nav .nav-group{ margin-bottom:6px }
nav .nav-label{ font:700 10px var(--font-body); letter-spacing:.09em; color:var(--muted-2); padding:14px 10px 6px }
.nav-item{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--radius-sm);
  color:var(--muted); font-size:13px; border:none; background:none; width:100%; text-align:left;
}
.nav-item .ico{ width:18px; text-align:center; font-size:15px }
.nav-item:hover{ background:var(--panel-2); color:var(--text) }
.nav-item.active{ background:linear-gradient(90deg, rgba(37,99,235,.18), transparent); color:var(--blue-3); font-weight:600 }
.nav-item .count{ margin-left:auto; font-size:10px; background:var(--panel-3); color:var(--muted); padding:1px 6px; border-radius:99px }

.side-footer{ margin-top:auto; display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted-2); padding:14px 10px 4px; border-top:1px solid var(--line) }
.status-dot{ width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px rgba(34,197,94,.18) }

.app-shell{ flex:1; min-width:0; display:flex; flex-direction:column }

.topbar{
  height:var(--topbar-h); flex:0 0 auto; display:flex; align-items:center; gap:14px;
  padding:0 20px; border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:20;
}
.icon-btn{
  width:36px; height:36px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--panel);
  display:grid; place-items:center; font-size:15px; color:var(--muted); position:relative; flex:0 0 auto;
}
.icon-btn:hover{ color:var(--text); border-color:var(--blue-dim) }
.menu-only{ display:none }
.has-badge i{
  position:absolute; top:-5px; right:-5px; background:var(--danger); color:#fff; font-style:normal;
  font-size:9px; min-width:16px; height:16px; border-radius:99px; display:grid; place-items:center; padding:0 3px;
}
.global-search{ position:relative; flex:1; max-width:420px; display:flex; align-items:center; gap:8px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); padding:0 12px; height:38px }
.global-search span{ color:var(--muted-2) }
.global-search input{ flex:1; background:none; border:none; outline:none; color:var(--text); font-size:13px }
.search-results{
  position:absolute; top:44px; left:0; right:0; background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--radius-sm); box-shadow:var(--shadow); overflow:hidden; z-index:40;
}
.search-hit{ padding:10px 14px; font-size:13px; border-bottom:1px solid var(--line-soft) }
.search-hit:last-child{ border:none }
.search-hit:hover{ background:var(--panel-3); cursor:pointer }

.top-actions{ margin-left:auto; display:flex; align-items:center; gap:10px }
.coin-pill{ display:flex; align-items:center; gap:6px; background:var(--panel); border:1px solid var(--line);
  padding:7px 12px; border-radius:99px; font-size:12px }
.profile-mini{ display:flex; align-items:center; gap:9px; background:none; border:none; padding:2px 6px 2px 2px; border-radius:99px }
.profile-mini:hover{ background:var(--panel-2) }
.mini-avatar{ width:30px; height:30px; border-radius:50%; background:var(--panel-3); display:grid; place-items:center; font-size:15px }
.profile-mini div{ text-align:left; line-height:1.25 }
.profile-mini small{ display:block; color:var(--muted); font-size:10.5px }

.content{ flex:1; padding:24px 28px 60px; max-width:1320px; width:100%; margin:0 auto }

.drawer{
  position:fixed; top:0; right:0; height:100vh; width:340px; background:var(--panel-2); border-left:1px solid var(--line);
  z-index:60; box-shadow:var(--shadow); overflow-y:auto;
}
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--line); font-weight:600 }
.drawer-item{ display:flex; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line-soft) }
.drawer-item .ico{ width:34px; height:34px; border-radius:var(--radius-sm); background:var(--panel-3); display:grid; place-items:center; flex:0 0 auto }
.drawer-item p{ margin:2px 0 0; color:var(--muted); font-size:12px }

.modal{ position:fixed; inset:0; background:rgba(3,7,14,.7); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; z-index:80; padding:20px }
.modal-card{ background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius-lg); width:100%; max-width:560px; max-height:86vh; overflow-y:auto; box-shadow:var(--shadow) }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line); font-weight:600; position:sticky; top:0; background:var(--panel-2) }
.modal-body{ padding:20px }

.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--panel-3); border:1px solid var(--line);
  padding:12px 20px; border-radius:99px; font-size:13px; box-shadow:var(--shadow); z-index:90;
}

@media (max-width:980px){
  .sidebar{ position:fixed; left:0; top:0; transform:translateX(-100%); transition:transform .2s; z-index:70; box-shadow:var(--shadow) }
  .sidebar.open{ transform:translateX(0) }
  .menu-only{ display:grid }
  .content{ padding:16px 14px 60px }
  .global-search{ max-width:none }
  .profile-mini div{ display:none }
}