*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; min-height: 100dvh;
  font-family: var(--f-body); font-size: var(--fs-base); line-height: 1.6; color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}
/* soft wintry backdrop that the frosted cards blur */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 40% at 10% 0%, var(--bg-a) 0%, transparent 70%),
    radial-gradient(50% 35% at 100% 20%, var(--bg-b) 0%, transparent 70%),
    radial-gradient(70% 50% at 50% 100%, var(--bg-a) 0%, transparent 70%),
    var(--bg);
}
body.noscroll { overflow: hidden; }
h1, h2, h3, h4 { font-family: var(--f-ui); font-weight: 600; line-height: 1.3; margin: 0; letter-spacing: -0.005em; }
h1 { font-size: var(--fs-xl); } h2 { font-size: var(--fs-lg); } h3 { font-size: var(--fs-md); } h4 { font-size: var(--fs-base); }
p { margin: 0; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
.serif { font-family: var(--f-serif); font-weight: 600; letter-spacing: 0.002em; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hidden { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 10px; }

/* ---------- App shell ---------- */
#app { max-width: 640px; margin: 0 auto; min-height: 100dvh; padding-bottom: calc(var(--tab-h) + var(--safe-b) + 24px); }
.appbar {
  position: sticky; top: 0; z-index: 20;
  padding: calc(var(--safe-t) + 14px) 18px 12px;
  display: flex; align-items: center; gap: 12px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-bottom: 1px solid transparent;
  transition: padding .2s var(--ease), border-color .2s;
}
.appbar h1 { flex: 1; font-size: var(--fs-xl); transition: font-size .2s var(--ease); }
.appbar .sub { display: block; font-family: var(--f-body); font-weight: 400; font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; transition: opacity .15s; }
.appbar.compact { padding-top: calc(var(--safe-t) + 8px); padding-bottom: 8px; border-color: var(--line); }
.appbar.compact h1 { font-size: var(--fs-md); }
.appbar.compact .sub { opacity: 0; height: 0; margin: 0; overflow: hidden; }
.profile-pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px 0 6px;
  border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  font-family: var(--f-ui); font-weight: 500;
}
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-ui); font-weight: 600; color: #fff; font-size: var(--fs-sm); flex: none; }
.avatar[data-p='pui'] { background: linear-gradient(135deg, #3F7CAC, #2A6F6B); }
.avatar[data-p='bam'] { background: linear-gradient(135deg, #E9967A, #B85F7A); }

main.view { padding: 4px 16px 0; animation: fade .22s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 6px max(8px, calc(50vw - 320px)) calc(6px + var(--safe-b));
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--tab-bg); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-top: 1px solid var(--line);
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 56px; border: 0; background: none; cursor: pointer; color: var(--muted);
  font-family: var(--f-ui); font-size: 0.75rem; font-weight: 500; border-radius: 14px; position: relative;
}
.tab[aria-selected='true'] { color: var(--accent); }
.tab[aria-selected='true']::before { content: ''; position: absolute; top: 4px; width: 44px; height: 30px; border-radius: 15px; background: var(--accent-soft); z-index: -1; }
.tab:active { transform: scale(.96); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
@media (min-width: 760px) {
  main.view { padding: 8px 24px 0; }
}