*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--base-size, 15px);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: 430px;
  margin: 0 auto;
  position: relative;
}

#scroll-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 20px 16px calc(var(--nav-h) + 16px);
  scroll-behavior: smooth;
}

.view { display: none; animation: fadeIn 0.2s ease; }
.view.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.page-title { font-size: 1.467rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 4px; }
.page-sub   { font-size: 0.867rem; color: var(--text2); margin-bottom: 20px; }
.section-label {
  font-family: var(--mono);
  font-size: 0.667rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 10px;
}

#toast {
  position: fixed; bottom: calc(var(--nav-h) + 80px);
  left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 100px; padding: 10px 20px; font-size: 0.867rem;
  font-weight: 500; color: var(--text); z-index: 999;
  opacity: 0; transition: all 0.3s cubic-bezier(0.32,0.72,0,1);
  white-space: nowrap; pointer-events: none;
}
[data-theme="light"] #toast { background: var(--bg2); }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.spinner {
  width: 18px; height: 18px; border: 2px solid var(--border2);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-row { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 32px; color: var(--text3); font-size: 0.933rem; }

.empty-state { text-align: center; padding: 40px 20px; color: var(--text3); }
.empty-icon  { font-size: 2.4rem; margin-bottom: 12px; opacity: 0.5; }
.empty-text  { font-size: 0.933rem; }