/* shell */
/* ================= shell ================= */
#app{height:100dvh;display:flex;flex-direction:column}
#frame{flex:1;min-height:0;display:flex;flex-direction:column}
#topbar{
  height:var(--appbar-h);display:flex;align-items:center;gap:4px;padding:0 4px;flex:0 0 auto;
  background:var(--md-surface);
}
#topbar h1{font-size:22px;line-height:28px;font-weight:700;margin:0 4px;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#content{width:100%}
/* ================= content tabs (ChipsRow -> TonalToggleButton) ================= */
#tabs{display:flex;gap:8px;padding:4px 12px 8px;overflow-x:auto;scrollbar-width:none}
#tabs::-webkit-scrollbar{display:none}
.tab{
  min-height:48px;padding:0 24px;border-radius:16px;white-space:nowrap;
  font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1px;
  background:var(--md-surface-container);color:var(--md-on-surface);
  transition:border-radius var(--dur-sheet) var(--ease-sheet),background var(--dur-sheet) var(--ease-standard);
}
.tab:active{border-radius:26px}
.tab.on{background:var(--md-primary);color:var(--md-on-primary)}