#app{min-height:100vh}

/* ---------- Sidebar ---------- */
.sidebar{
  position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);background:var(--ink);color:#e9f3ee;
  display:flex;flex-direction:column;padding:18px 14px;z-index:40;transition:width .2s ease,transform .25s ease;
}
.sidebar__brand{display:flex;align-items:center;gap:10px;padding:6px 8px 22px;font-family:var(--font-d);font-weight:700;font-size:15px;color:#fff;white-space:nowrap;overflow:hidden}
.brand-mark{display:flex;align-items:flex-end;gap:3px;height:18px;flex:0 0 auto}
.brand-mark--lg{height:28px;gap:4px}
.brand-mark i{display:block;width:4px;border-radius:3px;background:linear-gradient(180deg,#6be9ac,#149a55)}
.brand-mark i:nth-child(1){height:7px}.brand-mark i:nth-child(2){height:13px}.brand-mark i:nth-child(3){height:18px}
.brand-mark--lg i:nth-child(1){height:11px;width:6px}.brand-mark--lg i:nth-child(2){height:20px;width:6px}.brand-mark--lg i:nth-child(3){height:28px;width:6px}

.sidebar__nav{display:flex;flex-direction:column;gap:2px;flex:1}
.sidebar__link{display:flex;align-items:center;gap:12px;padding:10px 10px;border-radius:11px;color:#b9c9c0;font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden}
.sidebar__link:hover{background:rgba(255,255,255,.06);color:#fff}
.sidebar__link.active{background:var(--green-deep);color:#fff}
.nav-icon{width:19px;height:19px;flex:0 0 auto}

.sidebar__collapse{display:none;align-self:flex-end;background:rgba(255,255,255,.08);border:0;color:#cfe3d9;width:30px;height:30px;border-radius:9px;align-items:center;justify-content:center}
@media (min-width:900px){ .sidebar__collapse{display:flex} }

body.sidebar-collapsed .sidebar{width:var(--sidebar-w-collapsed)}
body.sidebar-collapsed .sidebar__link span:not(.nav-icon),
body.sidebar-collapsed .sidebar__brand span:last-child{display:none}
body.sidebar-collapsed .sidebar__collapse svg{transform:rotate(180deg)}
body.sidebar-collapsed .app-shell{margin-left:var(--sidebar-w-collapsed)}

.app-shell{margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column;transition:margin-left .2s ease}
.sidebar-scrim{display:none;position:fixed;inset:0;background:rgba(10,26,18,.45);z-index:35}

/* ---------- Topbar ---------- */
.topbar{height:var(--topbar-h);display:flex;align-items:center;gap:14px;padding:0 24px;background:rgba(247,248,246,.9);backdrop-filter:blur(10px);position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line)}
.topbar__title{font-size:19px}
.topbar__spacer{flex:1}
.topbar__burger{display:none;background:none;border:0;color:var(--ink);width:34px;height:34px;align-items:center;justify-content:center;border-radius:9px}
.topbar__burger:hover{background:var(--pale)}
.topbar__username{font-weight:700;font-size:13.5px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.topbar__user{position:relative;display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--green-deep);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;flex:0 0 auto}
.user-menu{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-md);min-width:170px;padding:6px;display:none;flex-direction:column}
.topbar__user.is-open .user-menu{display:flex}
.user-menu__item{display:block;width:100%;text-align:left;padding:9px 10px;border-radius:8px;background:none;border:0;font-size:13.5px;font-weight:600;color:var(--ink-soft)}
.user-menu__item:hover{background:var(--pale)}
.user-menu__item--danger{color:var(--danger)}

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

@media (max-width:899px){
  .sidebar{transform:translateX(-100%)}
  body.sidebar-open-mobile .sidebar{transform:translateX(0);box-shadow:var(--shadow-lg)}
  body.sidebar-open-mobile .sidebar-scrim{display:block}
  .app-shell{margin-left:0}
  .topbar__burger{display:flex}
  .topbar__username{display:none}
  .content{padding:16px 14px 40px}
}