*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-body);
  color: var(--c-text); background: var(--c-bg); touch-action: manipulation;
  -webkit-text-size-adjust: 100%; overflow-x: hidden; font-variant-numeric: tabular-nums;
}
h1, h2, h3 { font-family: var(--font-head); font-weight: 600; line-height: var(--lh-head); margin: 0; }
h1 { font-size: var(--fs-xl); } h2 { font-size: var(--fs-lg); } h3 { font-size: var(--fs-md); }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--c-primary); }
.muted { color: var(--c-muted); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.head { font-family: var(--font-head); }
.bold { font-weight: 600; }
.right { text-align: right; }
.center { text-align: center; }
.row { display: flex; align-items: center; gap: var(--space-2); }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: var(--space-2); }
.grow { flex: 1; min-width: 0; }
.wrap-anywhere { overflow-wrap: anywhere; }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.success { color: var(--c-success); }
.danger { color: var(--c-danger); }
.stack > * + * { margin-top: var(--space-3); }

/* โครงหน้า */
#app { min-height: 100%; display: flex; flex-direction: column; }
.shell { display: flex; flex: 1; min-height: 100vh; min-height: 100dvh; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding-bottom: calc(var(--nav-h) + var(--safe-bottom)); }
.rail { display: none; }
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: calc(var(--nav-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom); display: flex; background: var(--c-surface); border-top: 1px solid var(--c-line);
}
.bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--touch-min);
  text-decoration: none; color: var(--c-muted); font-size: var(--fs-xs); position: relative; }
.bottom-nav a[aria-current="page"] { color: var(--c-primary); font-weight: 600; }
.bottom-nav a[aria-current="page"] svg { color: var(--c-accent); }
.page { padding: var(--space-4); max-width: 960px; width: 100%; margin: 0 auto; }
.page-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); min-height: var(--touch-min); }
.page-head h1 { flex: 1; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 10; background: var(--c-bg); padding: var(--space-3) var(--space-4) var(--space-2); }

@media (min-width: 768px) {
  .rail { display: flex; flex-direction: column; width: var(--rail-w); flex: none; background: var(--c-surface); border-right: 1px solid var(--c-line);
    position: sticky; top: 0; height: 100vh; height: 100dvh; padding: var(--space-3) var(--space-2); gap: var(--space-1); overflow-y: auto; }
  .rail a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; border-radius: var(--radius-card);
    text-decoration: none; color: var(--c-muted); font-size: var(--fs-xs); position: relative; }
  .rail a[aria-current="page"] { background: var(--c-accent-soft); color: var(--c-primary); font-weight: 600; }
  .bottom-nav { display: none; }
  .main { padding-bottom: 0; }
}