/* ══════════════════════════════════════════════
   SHELL — sidebar (desktop) + panel + bottom nav (mobile)
   ══════════════════════════════════════════════ */
.shell{display:flex;min-height:100dvh}
.panel{flex:1;min-width:0;display:flex;flex-direction:column;max-width:600px;margin:0 auto;width:100%;padding-bottom:76px}

/* ── SIDEBAR (desktop ≥768px) ── */
.sidebar{display:none}
@media (min-width:768px){
  .shell{max-width:1180px;margin:0 auto}
  .sidebar{
    display:flex;flex-direction:column;
    width:236px;flex-shrink:0;
    padding:var(--sp-6) var(--sp-5);
    border-right:1px solid var(--bd);
    position:sticky;top:0;height:100dvh;
    gap:var(--sp-6);
  }
  .panel{max-width:720px;padding:0 var(--sp-7) var(--sp-6);margin:0}
  .bot-nav{display:none}
  .content{padding-top:var(--sp-6)}
}
@media (min-width:1024px){
  .sidebar{width:260px}
  .panel{max-width:760px;padding:0 64px var(--sp-7)}
}

.side-brand{display:flex;align-items:center;gap:var(--sp-3)}
.side-id{min-width:0}
.side-name{font-size:14px;font-weight:600;color:var(--tp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-role{font-size:11px;color:var(--tm);margin-top:1px}

.side-nav{display:flex;flex-direction:column;gap:2px}
.side-btn{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:10px var(--sp-2);border-radius:var(--r-sm);
  font-size:13px;font-weight:450;color:var(--tm);
  cursor:pointer;position:relative;
  transition:color var(--dur-fast) var(--ease-out);
}
.side-btn iconify-icon{font-size:17px;flex-shrink:0;color:var(--tm);opacity:0.75;transition:all var(--dur-fast) var(--ease-out)}
.side-btn:hover{color:var(--tp)}
.side-btn:hover iconify-icon{color:var(--tp);opacity:1}
.side-btn.on{color:var(--tp);font-weight:600}
.side-btn.on iconify-icon{color:var(--gold);opacity:1}
.side-btn .badge{
  margin-left:auto;min-width:16px;height:16px;
  background:var(--tp);color:var(--bg);border-radius:8px;
  font-size:9px;font-weight:700;
  display:flex;align-items:center;justify-content:center;padding:0 4px;
}

.side-xp{margin-top:auto;padding-top:var(--sp-4);border-top:1px solid var(--bd)}
.side-xp-row{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;color:var(--tm);margin-bottom:6px}
.side-xp-row:last-child{margin-top:6px;margin-bottom:0}
.side-xp-row .js-lv{font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--tp)}

/* ── HEADER (top bar) ── */
.hdr{
  background:rgba(250,249,247,0.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--bd);
  padding:var(--sp-3) var(--sp-4);
  display:flex;align-items:center;gap:11px;
  position:sticky;top:0;z-index:10;
}
@media (min-width:768px){.hdr{display:none}}

.av{
  width:38px;height:38px;border-radius:var(--r-sm);flex-shrink:0;
  background:var(--tp);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-size:14px;font-weight:600;color:#F6EFE0;
}
.side-brand .av{width:36px;height:36px}
.char-info{flex:1;min-width:0}
.cn{font-size:13px;font-weight:600;color:var(--tp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc{font-size:10px;color:var(--tm);margin-top:1px}
.xp-wrap{display:flex;align-items:center;gap:6px;flex-shrink:0}
.xp-bar-outer{width:64px;height:3px;background:var(--s2);border-radius:2px;overflow:hidden}
.xp-bar-fill{
  height:100%;border-radius:2px;background:var(--gold-bar);
  transition:width .5s var(--ease-out);
}
.xp-text{font-size:10px;color:var(--tm);font-weight:500;font-variant-numeric:tabular-nums}
.lv-pill{
  font-family:var(--font-display);
  color:var(--gold);
  border:1px solid rgba(138,90,6,0.35);
  border-radius:var(--r-sm);
  padding:4px 10px;font-size:12px;font-weight:600;
  flex-shrink:0;
}

/* ── BOTTOM NAV (mobile) ── */
.bot-nav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:600px;
  background:rgba(250,249,247,0.96);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--bd);
  display:flex;z-index:20;
  padding-bottom:env(safe-area-inset-bottom);
}
.bnav-btn{
  flex:1;padding:10px 4px 14px;
  color:var(--tm);
  font-size:9px;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;
  cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  position:relative;
  min-height:48px;
  transition:color var(--dur-fast) var(--ease-out);
}
.bnav-btn iconify-icon{font-size:19px;color:inherit;opacity:0.8}
.bnav-btn.on{color:var(--tp)}
.bnav-btn.on iconify-icon{color:var(--gold);opacity:1}
.bnav-btn.on::before{
  content:'';
  position:absolute;top:0;left:32%;right:32%;height:2px;
  background:var(--gold-bar);
}
.bnav-btn .badge{
  position:absolute;top:6px;right:calc(50% - 20px);
  min-width:15px;height:15px;
  background:var(--tp);color:var(--bg);border-radius:8px;
  font-size:8px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  padding:0 3px;
}

/* ── CONTENT ── */
.content{padding:var(--sp-4)}
.screen{display:none}.screen.on{display:block}