/* ================= LAYOUT / APP SHELL ================= */
.app{
  max-width:var(--app-w);
  margin:0 auto;
  min-height:100vh;
  min-height:100dvh;
  background:var(--bg);
  position:relative;
  box-shadow:0 0 80px -20px rgba(0,0,0,.15);
}
@media(min-width:560px){ .app{border-left:1px solid var(--border);border-right:1px solid var(--border)} }

/* Ambient gradient glow behind app on desktop */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background:radial-gradient(1200px 600px at 50% -10%,var(--primary-soft),transparent 60%);
  opacity:.7;pointer-events:none;
}

/* Top bar */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px 12px;
  background:linear-gradient(var(--bg),rgba(0,0,0,0) );
  backdrop-filter:blur(6px);
}
.topbar .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em}
.topbar .brand img{width:34px;height:34px;border-radius:10px;box-shadow:var(--shadow-sm)}
.icon-btn{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);
  transition:transform .18s var(--ease),background .2s;position:relative;
}
.icon-btn:active{transform:scale(.9)}
.icon-btn .dot{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--danger);border:2px solid var(--surface)}

/* Main scroll area */
.main{
  padding:6px 18px calc(var(--nav-h) + 28px + var(--safe-b));
  min-height:60vh;
}

/* View transition */
.view-enter{animation:viewIn .38s var(--ease)}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ================= BOTTOM NAV ================= */
.bottomnav{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(14px + var(--safe-b));
  width:min(var(--app-w) - 28px,92vw);
  height:var(--nav-h);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:26px;
  box-shadow:var(--shadow-lg);
  display:flex;align-items:center;justify-content:space-around;
  z-index:50;padding:0 8px;
}
.nav-item{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  color:var(--text-muted);font-size:.66rem;font-weight:600;
  padding:8px 6px;flex:1;transition:color .25s var(--ease);
}
.nav-item i{font-size:1.18rem;transition:transform .3s var(--ease)}
.nav-item.active{color:var(--primary)}
.nav-item.active i{transform:translateY(-2px)}
.nav-item:active i{transform:scale(.85)}
/* animated indicator */
.nav-indicator{
  position:absolute;top:8px;height:4px;width:26px;border-radius:4px;
  background:var(--grad);transition:left .38s var(--ease),width .38s var(--ease);
  box-shadow:0 4px 12px -2px var(--primary);
}
/* Earn — elevated FAB */
.nav-earn{transform:translateY(-16px)}
.nav-earn .earn-orb{
  width:60px;height:60px;border-radius:20px;display:grid;place-items:center;
  background:var(--grad);color:#fff;font-size:1.5rem;
  box-shadow:0 14px 30px -8px var(--primary);
  transition:transform .3s var(--ease);
}
.nav-earn.active .earn-orb,.nav-earn:active .earn-orb{transform:scale(.92) rotate(-6deg)}
.nav-earn span{margin-top:2px}

/* ================= SIDEBAR (RIGHT) ================= */
.sidebar-backdrop{position:fixed;inset:0;background:rgba(6,8,20,.5);backdrop-filter:blur(3px);z-index:60;opacity:0;pointer-events:none;transition:opacity .3s}
.sidebar-backdrop.open{opacity:1;pointer-events:auto}
.sidebar{
  position:fixed;top:0;right:0;height:100%;width:min(84vw,340px);
  background:var(--surface);z-index:70;
  transform:translateX(105%);transition:transform .42s var(--ease);
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;
  padding:24px 20px calc(24px + var(--safe-b));
}
.sidebar.open{transform:none}
.sidebar-user{display:flex;align-items:center;gap:14px;padding:12px;border-radius:var(--radius-sm);background:var(--grad-soft)}
.sidebar-user .avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;background:var(--grad)}
.side-links{margin-top:22px;display:flex;flex-direction:column;gap:4px;overflow-y:auto}
.side-link{display:flex;align-items:center;gap:14px;padding:14px 12px;border-radius:14px;font-weight:600;color:var(--text);transition:background .2s,transform .15s}
.side-link i{width:22px;text-align:center;color:var(--primary);font-size:1.05rem}
.side-link:active{transform:scale(.97);background:var(--surface-2)}
.side-link.danger{color:var(--danger)}.side-link.danger i{color:var(--danger)}

/* ================= APP LOADER ================= */
.app-loader{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:var(--bg);transition:opacity .5s var(--ease),visibility .5s;
}
.app-loader.hide{opacity:0;visibility:hidden}
.app-loader .logo-wrap{display:flex;flex-direction:column;align-items:center;gap:18px}
.app-loader img{width:84px;height:84px;border-radius:24px;box-shadow:0 20px 50px -12px var(--primary);animation:pulseLogo 1.6s var(--ease) infinite}
.app-loader .ring{width:44px;height:44px;border-radius:50%;border:3px solid var(--primary-soft);border-top-color:var(--primary);animation:spin .8s linear infinite}
.app-loader .name{font-weight:800;letter-spacing:.02em}
@keyframes pulseLogo{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.04)}}

/* Super-admin user impersonation indicator. Rendered only for an authenticated admin session. */
.admin-user-view-bar{position:sticky;top:0;z-index:120;min-height:44px;padding:8px 14px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.admin-user-view-bar>div:first-child{display:flex;align-items:center;gap:8px;min-width:0;color:var(--text);font-size:.78rem}.admin-user-view-bar>div:first-child i{color:var(--primary)}.admin-user-view-bar>div:first-child span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-user-view-actions{display:flex;align-items:center;gap:7px;flex:none}.admin-user-view-actions a,.admin-user-view-actions button{min-height:31px;padding:0 10px;border-radius:9px;font-size:.72rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center}.admin-user-view-actions a{background:var(--primary-soft);color:var(--primary)}.admin-user-view-actions button{border:0;background:var(--surface-2);color:var(--text)}
@media(max-width:560px){.admin-user-view-bar{align-items:stretch;flex-direction:column;padding:8px 10px}.admin-user-view-actions{width:100%}.admin-user-view-actions a,.admin-user-view-actions button{flex:1}}

/* Top-bar notification unread count */
.icon-btn .notification-badge{
  position:absolute;top:-5px;right:-6px;min-width:21px;height:21px;padding:0 5px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;background:var(--danger);color:#fff;border:2px solid var(--bg);
  font-size:.64rem;font-weight:800;line-height:1;box-shadow:0 5px 12px rgba(240,68,56,.28);
  opacity:0;transform:scale(.65);pointer-events:none;transition:opacity .2s var(--ease),transform .22s var(--ease);
}
.icon-btn .notification-badge.show{opacity:1;transform:scale(1)}