/* ── SCREEN LAYOUT ── */
#app{
  max-width:420px;
  margin:0 auto;
  position:relative;
}
.screen{
  min-height:100vh;
  overflow-y:auto;
  padding-bottom:80px;
  scrollbar-width:none;
}
.screen::-webkit-scrollbar{display:none}

/* ── BOTTOM NAV ── */
.bnav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:420px;height:66px;
  background:rgba(10,10,10,.96);border-top:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:space-around;
  z-index:30;padding-bottom:8px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.bnav.hidden{display:none}
.bi{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 20px;border-radius:0;cursor:pointer;position:relative}
.bi.on{background:transparent}
.bi.on::after{content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);width:20px;height:2.5px;border-radius:2px;background:var(--p);box-shadow:0 0 6px rgba(167,139,250,.6)}
.bi svg{opacity:.22;transition:opacity .15s}
.bi.on svg{opacity:1}
.bi-lbl{font-size:10px;font-weight:500;color:var(--t4);transition:color .15s}
.bi.on .bi-lbl{color:var(--w);font-weight:600}

/* ── SCREEN HEADER ── */
.sh{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 12px}
.sh-title{font-size:18px;font-weight:700;color:var(--w);letter-spacing:-.02em}
.sh-sub{font-size:11px;color:var(--t3);margin-bottom:1px}
.sh-av{width:32px;height:32px;border-radius:50%;border:1px solid var(--b2);background:var(--s3);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--t2)}

.sp{height:24px}