/* Near-black dark theme, mobile-first, ≥56px touch targets (PLAN.md §7). */
:root {
  --bg: #0a0a0c;
  --surface: #16161a;
  --surface-2: #1e1e24;
  --text: #e8e8ec;
  --text-dim: #9a9aa4;
  --accent: #4ade80;
  --accent-dim: #166534;
  --danger: #f87171;
  --warn: #fbbf24;
  --touch: 56px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}
#app { max-width: 640px; margin: 0 auto; min-height: 100%; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.loading { padding: 40vh 1rem 0; text-align: center; color: var(--text-dim); }

/* Login */
.login-screen { display: flex; flex-direction: column; justify-content: center; min-height: 90vh; padding: 1.5rem; gap: 1rem; }
.login-screen h1 { font-size: 1.6rem; text-align: center; margin-bottom: 1rem; }
.login-screen input {
  height: var(--touch); font-size: 1.1rem; padding: 0 1rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--surface-2); border-radius: 12px; width: 100%;
}
.login-screen input:focus { outline: 2px solid var(--accent-dim); }
.login-error { color: var(--danger); text-align: center; min-height: 1.4em; }

button.primary {
  height: var(--touch); font-size: 1.1rem; font-weight: 600;
  background: var(--accent); color: #052e16;
  border: none; border-radius: 12px; width: 100%; cursor: pointer;
}
button.primary:active { filter: brightness(0.85); }

.screen { padding: 1rem; }
.screen.with-nav { padding-bottom: calc(var(--touch) + 1.5rem); }
.screen h1 { font-size: 1.4rem; margin: 0.5rem 0 1rem; }
.card {
  background: var(--surface); border-radius: 14px; padding: 1rem;
  margin-bottom: 0.75rem;
}
.muted { color: var(--text-dim); }
.small { font-size: 0.85rem; }
a { color: var(--accent); text-decoration: none; }

/* Bottom nav */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; background: var(--surface);
  border-top: 1px solid var(--surface-2);
  padding-bottom: env(safe-area-inset-bottom);
  max-width: 640px; margin: 0 auto;
}
.bottom-nav a {
  flex: 1; text-align: center; padding: 0.9rem 0;
  color: var(--text-dim); font-size: 0.95rem;
}
.bottom-nav a.active { color: var(--accent); font-weight: 600; }

/* Library */
input[type="search"] {
  width: 100%; height: var(--touch); font-size: 1rem; padding: 0 1rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--surface-2); border-radius: 12px;
  margin-bottom: 0.6rem;
}
.filters summary { padding: 0.5rem 0; color: var(--text-dim); cursor: pointer; }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.3rem 0 0.6rem; }
.chip {
  padding: 0.45rem 0.8rem; border-radius: 999px; font-size: 0.85rem;
  background: var(--surface); color: var(--text-dim);
  border: 1px solid var(--surface-2); cursor: pointer;
}
.chip.on { background: var(--accent-dim); color: var(--text); border-color: var(--accent); }
.ex-row {
  display: flex; align-items: center; gap: 0.75rem;
  background: var(--surface); border-radius: 12px;
  padding: 0.5rem 0.75rem; margin-bottom: 0.5rem; min-height: var(--touch);
  color: var(--text);
}
.ex-name { font-weight: 600; }
.ex-info { flex: 1; min-width: 0; }
.thumb {
  width: 48px; height: 48px; border-radius: 8px; flex-shrink: 0;
  background: var(--surface-2) center/cover no-repeat;
}
.thumb.ph { display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.si {
  min-width: 1.6rem; text-align: center; border-radius: 6px;
  font-size: 0.8rem; font-weight: 700; padding: 0.2rem 0.4rem;
}
.si-0 { background: #14532d; color: #86efac; }
.si-1 { background: #713f12; color: #fde047; }
.si-2 { background: #7c2d12; color: #fdba74; }
.si-3 { background: #7f1d1d; color: #fca5a5; }

/* Detail */
.detail-media {
  width: 100%; aspect-ratio: 4/3; border-radius: 14px;
  background: var(--surface-2) center/contain no-repeat;
  margin-bottom: 0.75rem;
}
.detail-media.ph {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); font-size: 0.9rem; aspect-ratio: 3/1;
}
.badge-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
.badge {
  padding: 0.25rem 0.6rem; border-radius: 999px; font-size: 0.8rem;
  background: var(--surface-2); color: var(--text-dim);
}
.badge.accent { color: var(--accent); }
.si-note { border-left: 3px solid var(--warn); }
.pinned { color: var(--warn); white-space: pre-wrap; margin: 0.4rem 0; }
button.secondary, a.secondary {
  display: block; width: 100%; height: var(--touch);
  line-height: var(--touch); text-align: center;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--surface-2); border-radius: 12px;
  font-size: 1rem; cursor: pointer; margin-bottom: 0.6rem;
}
.small-btn { height: 40px !important; line-height: 40px !important; font-size: 0.9rem !important; }
.video-btn { color: var(--accent); }

/* Plan / routine preview */
.section-h { font-size: 1.05rem; margin: 1.2rem 0 0.5rem; color: var(--text-dim); }
.letter {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); font-weight: 700; color: var(--accent);
}
.slot-card { padding: 0.75rem 1rem; }
.slot-card.ss-grouped { border-left: 3px solid var(--accent-dim); }
.slot-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.25rem; }
.slot-head .pos {
  min-width: 1.5rem; height: 1.5rem; border-radius: 50%; text-align: center;
  background: var(--surface-2); color: var(--text-dim); font-size: 0.85rem; line-height: 1.5rem;
}
.slot-head .ex-name { flex: 1; }
.inter-line { margin-top: 0.4rem; font-size: 0.9rem; color: var(--text-dim); }
.inter-line a { color: var(--accent); }
.inter-line.with-thumb { display: flex; align-items: center; gap: 0.6rem; }
.cue { color: var(--warn); margin-top: 0.3rem; }
.ramp summary { cursor: pointer; font-weight: 600; }
.ramp-item {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0;
  color: var(--text); border-bottom: 1px solid var(--surface-2);
}
.ramp-item .ramp-name { flex: 1; min-width: 0; }
.slot-flex { display: flex; align-items: flex-start; gap: 0.75rem; }
.slot-main { flex: 1; min-width: 0; }
.slot-thumb {
  width: 80px; height: 80px; border-radius: 10px; flex-shrink: 0;
  background: var(--surface-2) center/cover no-repeat;
}
.ramp-thumb {
  width: 56px; height: 56px; border-radius: 8px; flex-shrink: 0;
  background: var(--surface-2) center/cover no-repeat;
}
.slot-thumb.ph, .ramp-thumb.ph, .p-thumb.ph {
  display: flex; align-items: center; justify-content: center; color: var(--text-dim);
}

/* Player: self-sufficient cards */
.p-thumb {
  width: 96px; height: 96px; border-radius: 10px; flex-shrink: 0;
  background: var(--surface-2) center/cover no-repeat;
}
.inter-card {
  border-left: 3px solid var(--accent-dim);
  background: var(--surface);
  opacity: 0.92;
  padding: 0.6rem 1rem;
}
.howto { margin-top: 0.5rem; }
.howto summary { cursor: pointer; color: var(--text-dim); font-size: 0.9rem; }
.howto .small { margin-top: 0.4rem; line-height: 1.45; }
.howto-tips { margin-top: 0.4rem; color: var(--text-dim); }

/* Player */
button.primary.big { height: auto; padding: 0.9rem 0; line-height: 1.4; }
.start-sub { font-weight: 400; font-size: 0.9rem; opacity: 0.85; }
.resume-banner { display: block; border-left: 3px solid var(--accent); color: var(--text); }
.next-day { border-left: 3px solid var(--accent-dim); }
.set-head, .set-row {
  display: grid; grid-template-columns: 2rem 4.5rem 1fr 1fr 3.4rem;
  gap: 0.4rem; align-items: center; padding: 0.25rem 0;
}
.set-row { min-height: var(--touch); }
.set-row input {
  height: 44px; font-size: 1.05rem; text-align: center;
  background: var(--surface-2); color: var(--text);
  border: 1px solid transparent; border-radius: 10px; width: 100%;
}
.set-row.done input { color: var(--accent); }
.set-no { text-align: center; color: var(--text-dim); font-weight: 600; }
.set-prev { text-align: center; overflow: hidden; text-overflow: ellipsis; }
.set-check {
  height: 44px; border-radius: 10px; border: 1px solid var(--surface-2);
  background: var(--surface-2); color: var(--text-dim); font-size: 1.1rem; cursor: pointer;
}
.set-check.on { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }
.slot-card.all-done { opacity: 0.55; border-left: 3px solid var(--accent); }
.rest-bar {
  position: fixed; bottom: calc(var(--touch) + env(safe-area-inset-bottom));
  left: 0; right: 0; max-width: 640px; margin: 0 auto;
  background: var(--surface-2); border-top: 2px solid var(--accent);
  display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.8rem;
  z-index: 10; flex-wrap: wrap;
}
.rest-time { font-size: 1.5rem; font-weight: 700; color: var(--accent); min-width: 3.5rem; }
.rest-inter { flex: 1; font-size: 0.9rem; }
.rest-ctl { display: flex; gap: 0.3rem; }
.spark { width: 100%; height: 60px; margin-top: 0.4rem; }
button.danger { color: var(--danger); border-color: var(--danger); }
.set-extra {
  display: grid; grid-template-columns: 5rem 1fr; gap: 0.4rem;
  padding: 0.2rem 0 0.4rem 2.4rem;
}
.set-extra input {
  height: 40px; font-size: 0.95rem; padding: 0 0.6rem;
  background: var(--surface-2); color: var(--text);
  border: 1px solid transparent; border-radius: 8px;
}

/* Generate */
.gen-text {
  width: 100%; font-size: 1rem; padding: 0.7rem 1rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--surface-2); border-radius: 12px;
  resize: vertical; margin-bottom: 0.6rem; font-family: inherit;
}
.set-field { display: block; margin-bottom: 0.7rem; }
.set-field span { display: block; font-size: 0.85rem; color: var(--text-dim); margin-bottom: 0.25rem; }
.set-field input {
  width: 100%; height: 44px; font-size: 1rem; padding: 0 0.8rem;
  background: var(--surface-2); color: var(--text);
  border: 1px solid transparent; border-radius: 10px;
}
.si-input {
  width: 6rem; height: 44px; font-size: 1rem; text-align: center;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--surface-2); border-radius: 10px;
  margin-bottom: 0.6rem;
}