*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
body {
  margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.5; color: var(--text);
  background: linear-gradient(180deg, var(--bg-top) 0, var(--bg) 320px);
  background-attachment: scroll; min-height: 100dvh; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 var(--space-3); }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }
p { margin: 0 0 var(--space-3); }
a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration: none; }
small, .muted { color: var(--text-muted); }
.muted { font-size: 0.9rem; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-5) 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---- layout ---- */
.app { display: flex; flex-direction: column; min-height: 100dvh; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg-top) 78%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: calc(env(safe-area-inset-top) + 12px) var(--space-4) 10px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.topbar .brand { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; font-size: 1.25rem; color: var(--text); text-decoration: none; }
.topbar .status { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); background: var(--surface); padding: 6px 12px; border-radius: 999px; box-shadow: var(--shadow); white-space: nowrap; }
main.content { flex: 1; width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--space-3) var(--space-4) calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--space-6)); }
main.content.narrow { max-width: 480px; }
.page-title { margin-bottom: var(--space-4); }

.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(4, 1fr);
  height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-l) var(--radius-l) 0 0; box-shadow: 0 -8px 30px rgb(60 30 40 / 0.08);
}
.bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--tap); font-size: 0.68rem; font-weight: 600; color: var(--text-muted); text-decoration: none; }
.bottom-nav a svg { width: 24px; height: 24px; }
.bottom-nav a.active { color: var(--accent-text); }
.bottom-nav a.active svg { color: var(--accent); }

@media (min-width: 900px) {
  .app { flex-direction: row; }
  .topbar { position: static; background: transparent; backdrop-filter: none; }
  .side { width: 232px; flex: none; position: sticky; top: 0; height: 100dvh; padding: var(--space-5) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
  .bottom-nav { position: static; display: flex; flex-direction: column; height: auto; background: transparent; box-shadow: none; border-radius: 0; padding: 0; }
  .bottom-nav a { flex-direction: row; justify-content: flex-start; gap: var(--space-3); font-size: 0.95rem; padding: 0 var(--space-3); border-radius: var(--radius-s); }
  .bottom-nav a.active { background: var(--surface); box-shadow: var(--shadow); }
  .main-col { flex: 1; min-width: 0; }
  main.content { padding-bottom: var(--space-6); padding-top: var(--space-5); }
}