/* ═══════════════════════════════════════
   BASE — Reset + Layout primitives
═══════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0; padding: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }
input[type=number] { -moz-appearance: textfield; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--t1);
  font-family: var(--f);
  overflow: hidden;
}

/* ── Screens ── */
.screen {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.screen.on { opacity: 1; pointer-events: all; }

/* Slide-in screens (settings, strategy) */
.screen-slide {
  opacity: 1 !important;
  transform: translateX(100%);
  transition: transform .25s ease;
  background: var(--bg);
  z-index: 150;
}
.screen-slide.on { pointer-events: all; transform: translateX(0); }

/* ── Scrollable content ── */
.screen-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

/* ── Section ── */
.sec { padding: .75rem 1rem; border-bottom: 1px solid var(--b1); }
.sec-hd {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--t3);
  font-weight: 700;
  margin-bottom: .75rem;
}

/* ── Divider ── */
.divider { height: 1px; background: var(--b1); margin: .75rem 0; }

/* ── Empty state ── */
.empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--t3);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
.empty i { font-size: 32px; opacity: .3; }

/* ── Status bar ── */
.statusbar {
  background: var(--s1);
  border-top: 1px solid var(--b1);
  padding: .3rem 1rem;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--t3);
  flex-shrink: 0;
}