/* Music pages (/music/*): white cards on the dark site, darker blue headings. */
.m-wrap { max-width: 760px; }
.m-card { background: var(--white); color: var(--ink); border: 1px solid var(--sand-line); border-radius: var(--radius); padding: 1rem 1.1rem; margin: 0 0 0.9rem; box-shadow: var(--shadow); }
.m-card h2, .m-card h3 { color: var(--sky-deep); }
.m-card h2 { font-size: 1.35rem; }
.m-card a { color: var(--sky-deep); }
.m-card p:last-child { margin-bottom: 0; }
.m-muted { color: #4a5563; font-size: 0.92rem; }
.m-dark-muted { color: var(--muted-light); font-size: 0.92rem; }
.m-row { display: flex; gap: 0.75rem; align-items: center; }
.m-row--top { align-items: flex-start; }
.m-grow { flex: 1; min-width: 0; }
.m-cover { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--sand); flex: none; }
.m-cover--ph { display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--sky-deep); }
.m-title { font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.m-artist { color: #4a5563; font-size: 0.93rem; overflow-wrap: anywhere; }
.m-chip { display: inline-block; font-size: 0.78rem; font-weight: 700; padding: 0.15em 0.6em; border-radius: 999px; background: #e0f2fe; color: #075985; margin: 0.2em 0.3em 0 0; }
.m-chip--queued { background: #fef3c7; color: #92400e; }
.m-chip--played { background: #dcfce7; color: #166534; }
.m-chip--not_this_time { background: #f3f4f6; color: #374151; }
.m-chip--warn { background: var(--pink-soft); color: #8a1c3c; }
.m-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 1rem; border-radius: 999px; border: 2px solid var(--sky-deep); background: var(--white); color: var(--sky-deep); font-weight: 700; font-size: 0.95rem; cursor: pointer; text-decoration: none; }
.m-btn--solid { background: var(--sky-deep); color: var(--white); }
.m-btn:disabled { opacity: 0.55; cursor: default; }
.m-btn--sm { min-height: 36px; padding: 0 0.8rem; font-size: 0.86rem; }
.m-play { flex: none; }
.m-stars { display: flex; gap: 2px; margin-top: 0.45rem; }
.m-star { width: 44px; height: 44px; border: 0; background: none; font-size: 2rem; line-height: 1; color: #c7cdd4; cursor: pointer; padding: 0; }
.m-star.is-on { color: #f59e0b; }
.m-star:focus-visible { outline: 3px solid var(--sky-deep); border-radius: 8px; }
.m-avg { font-size: 0.88rem; color: #374151; margin-top: 0.2rem; }
.m-saved { color: #166534; font-weight: 700; font-size: 0.85rem; margin-left: 0.4rem; }
.m-input { width: 100%; min-height: 46px; padding: 0.55rem 0.8rem; font-size: 1rem; border: 2px solid #9aa5b1; border-radius: 10px; color: var(--ink); background: var(--white); }
.m-input:focus { outline: none; border-color: var(--sky-deep); }
.m-select { min-height: 40px; border-radius: 10px; border: 2px solid #9aa5b1; padding: 0 0.5rem; font-size: 0.95rem; background: var(--white); color: var(--ink); }
.m-label { font-weight: 700; display: block; margin-bottom: 0.3rem; }
.m-bar { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.m-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.m-tab { min-height: 38px; padding: 0 0.9rem; border-radius: 999px; border: 2px solid var(--sky); color: var(--sky); background: transparent; font-weight: 700; cursor: pointer; }
.m-tab[aria-pressed="true"] { background: var(--sky); color: var(--bg-dark); }
.m-progress { position: sticky; top: 0; z-index: 5; background: var(--bg-dark); padding: 0.5rem 0; margin-bottom: 0.6rem; }
.m-progress__bar { height: 8px; border-radius: 999px; background: #263241; overflow: hidden; }
.m-progress__fill { height: 100%; background: var(--sky); width: 0; transition: width 0.25s; }
.m-toast { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); background: var(--white); color: var(--ink); border-left: 6px solid var(--sky-deep); padding: 0.7rem 1rem; border-radius: 10px; box-shadow: var(--shadow); z-index: 50; max-width: 92vw; font-weight: 600; }
.m-toast--error { border-left-color: var(--pink); }
.m-big-actions { display: grid; gap: 0.8rem; grid-template-columns: 1fr; margin: 1.2rem 0; }
@media (min-width: 640px) { .m-big-actions { grid-template-columns: 1fr 1fr 1fr; } }
.m-big { display: block; text-decoration: none; background: var(--white); color: var(--ink); border-radius: var(--radius); padding: 1.1rem 1.2rem; border: 1px solid var(--sand-line); }
.m-big strong { display: block; color: var(--sky-deep); font-family: var(--font-display); font-size: 1.3rem; }
.m-big:hover { outline: 3px solid var(--sky); }
.m-list { list-style: none; margin: 0; padding: 0; }
.m-list > li + li { border-top: 1px solid #e5e7eb; margin-top: 0.7rem; padding-top: 0.7rem; }
.m-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.m-table th, .m-table td { text-align: left; padding: 0.4rem; border-bottom: 1px solid #e5e7eb; vertical-align: top; }
.m-g { background: #dcfce7; } .m-y { background: #fef9c3; } .m-r { background: #fee2e2; }
.m-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.m-hidden { display: none !important; }
details.m-card > summary { cursor: pointer; font-weight: 700; color: var(--sky-deep); min-height: 32px; }