/* ===== App Header (light DOM) ===== */

/* layout/topbar */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(140%) blur(6px);
  transition: box-shadow .2s ease;
}
.topbar--shadow{ box-shadow: 0 4px 16px rgba(0,0,0,.25) }

/* local container helpers (match global scales) */
.container{ max-width:1100px; margin:auto; padding:16px; width:100% }
.row{ display:flex; gap:12px; align-items:center }
.grow{ flex:1 }

/* brand + back */
.brand{
  font-weight:800;
  text-decoration:none;
  color:var(--text);
  display:inline-flex;
  align-items:center;
}
.brand--nolink{ cursor:default }
.btn-ghost{ background:transparent; border:1px dashed transparent }
.btn-ghost:hover{ border-color:var(--line) }

/* theme toggle (icon-only button) */
.btn.btn-icon{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0;
  line-height:1;
  font-size:20px;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  appearance:none;
}
.btn.btn-icon:hover,
.btn.btn-icon:focus,
.btn.btn-icon:active{
  background:transparent !important;
  border:none !important;
}

/* balance + avatar + menu */
.hdr-right{ display:flex; align-items:center; gap:10px }
.balance-wrap{ min-width:auto }
.balance{
  font-weight:700;
  margin:0 10px;
  font-variant-numeric: tabular-nums;
  white-space:nowrap;
  color:var(--text);
}
.avatar{ padding:0 8px }
.avatar .circle{
  width:28px; height:28px;
  border-radius:999px;
  display:grid; place-items:center;
  font-weight:700;
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--text);
}
:root.light .avatar .circle{ color:#111827 }

/* menu popover */
.menu{ position:relative }
.menu-popover{
  display:none;
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  min-width:200px;
  padding:8px;
  border-radius:12px;
  background:var(--bg);
  border:1px solid var(--line);
  box-shadow:0 12px 32px rgba(0,0,0,.35);
  opacity:0;
  transform:translateY(-4px);
  pointer-events:none;
  transition:opacity .12s ease, transform .12s ease;
}
.menu-popover.open{
  display:block;
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.menu-header{
  padding:6px 10px;
  color:var(--muted);
  font-size:12px;
}
.menu-popover .menu-item{
  display:block;
  width:100%;
  margin:0;
  padding:10px 12px;
  border-radius:10px;
  background:transparent !important;
  border:none !important;
  color:var(--text);
  text-decoration:none;
  text-align:left;
  font:inherit;
  line-height:1.3;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  transition: background .12s ease;
}
.menu-popover a.menu-item:hover,
.menu-popover a.menu-item:focus-visible,
.menu-popover button.menu-item:hover,
.menu-popover button.menu-item:focus-visible{
  background:var(--panel) !important;
  outline:none;
}

/* responsive spacing for header */
@media (max-width: 768px){
  .container{ max-width:720px; padding:12px }
  .row{ gap:10px }
}

/* a11y: visible focus inside header */
.topbar a:focus-visible,
.topbar button:focus-visible{
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}