:root {
  --bg: #0a0a0c;
  --fg: #e4e4e0;
  --dim: #6a6a68;
  --accent: #d28a2a;
  --accent-soft: #4a3010;
  --rule: #1f1f24;
  --K: #c44747;
  --B: #c4a047;
  --H: #47c4a0;
  --P: #4774c4;
  --M: #a047c4;
  --A: #47a0c4;
  --V: #c44788;
  --F: #c4c447;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--fg); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5; }
header { border-bottom: 1px solid var(--rule); padding: 1rem 1.5rem; max-width: 1400px; margin: 0 auto; }
header h1 { font-size: 1.1rem; letter-spacing: 0.05em; font-weight: 600; }
header .sub { color: var(--dim); margin-top: 0.25rem; }

.version-switcher { margin-top: 0.6rem; display: flex; gap: 0.2rem; flex-wrap: wrap; font-size: 0.75rem; }
.version-switcher a { padding: 0.25rem 0.5rem; border-radius: 2px; text-decoration: none; }
.ver-other { color: var(--dim); background: var(--rule); }
.ver-other:hover { color: var(--accent); }
.ver-current { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.now { color: var(--dim); font-weight: 400; margin-left: 0.3rem; }

.tabs { display: flex; gap: 0.2rem; margin-top: 0.8rem; border-bottom: 1px solid var(--rule); }
.tab { background: transparent; border: none; color: var(--dim); padding: 0.5rem 1rem; cursor: pointer; font-family: inherit; font-size: 0.85rem; border-bottom: 2px solid transparent; }
.tab:hover { color: var(--fg); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }

main { max-width: 1400px; margin: 0 auto; padding: 1.5rem; }
.tab-content { display: none; }
.tab-content.active { display: block; }

.controls { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.controls select { background: var(--bg); color: var(--fg); border: 1px solid var(--rule); padding: 0.35rem 0.7rem; font-family: inherit; font-size: 0.85rem; border-radius: 3px; }
.status { color: var(--dim); font-size: 0.85rem; }

#pantry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.4rem; }
.role-header { grid-column: 1 / -1; margin: 0.6rem 0 0.2rem; padding-bottom: 0.2rem; border-bottom: 1px dashed var(--rule); color: var(--dim); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
.role-header::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.4rem; vertical-align: middle; }
.role-header.layer-K::before { background: var(--K); }
.role-header.layer-B::before { background: var(--B); }
.role-header.layer-H::before { background: var(--H); }
.role-header.layer-P::before { background: var(--P); }
.role-header.layer-M::before { background: var(--M); }
.role-header.layer-A::before { background: var(--A); }
.role-header.layer-V::before { background: var(--V); }
.role-header.layer-F::before { background: var(--F); }
.role-header .role-name { color: var(--fg); font-weight: 600; margin-right: 0.4rem; }

.ing { background: var(--rule); padding: 0.45rem 0.6rem; border-radius: 3px; font-size: 0.75rem; }
.ing .meta { color: var(--dim); margin-bottom: 0.25rem; font-size: 0.7rem; }
.ing .id { font-family: inherit; word-break: break-all; }
.ing audio { display: block; width: 100%; margin-top: 0.3rem; height: 28px; }

#tracks-list { display: flex; flex-direction: column; gap: 0.5rem; }
.track-card { background: var(--rule); padding: 0.8rem 1rem; border-radius: 3px; }
.track-card .name { color: var(--accent); font-weight: 600; }
.track-card .template { color: var(--dim); font-size: 0.75rem; margin-top: 0.15rem; }
.track-card .meta { color: var(--dim); font-size: 0.7rem; margin-top: 0.25rem; }
.track-card .ingredients { margin-top: 0.4rem; font-size: 0.7rem; color: var(--dim); display: flex; flex-wrap: wrap; gap: 0.3rem; }
.track-card .ing-chip { background: var(--bg); padding: 0.1rem 0.4rem; border-radius: 2px; border: 1px solid var(--rule); }
.track-card .ing-chip .role { color: var(--accent); font-weight: 600; }
.track-card audio { display: block; width: 100%; margin-top: 0.5rem; height: 30px; }

.about-text { max-width: 740px; line-height: 1.7; }
.about-text p { margin-bottom: 1rem; }
.about-text a { color: var(--accent); }
.about-text code { background: var(--rule); padding: 0.05rem 0.25rem; border-radius: 2px; font-size: 0.85em; }
#meta-line { color: var(--dim); font-size: 0.75rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); }