.room-music-card { grid-column:1 / -1; overflow:hidden; }
.room-music-card > .card-heading small { max-width:360px; overflow:hidden; color:var(--muted); font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.room-music-player { min-width:0; display:grid; grid-template-columns:96px minmax(0,1fr); gap:18px; align-items:center; padding:18px 20px; border-bottom:1px solid var(--line); background:linear-gradient(125deg,rgba(212,173,107,.07),transparent 50%,rgba(105,174,181,.06)); }
.room-music-player.is-player { grid-template-columns:66px minmax(0,1fr); gap:12px; padding:10px 14px; border:1px solid var(--line); background:#0c141e; }
.room-music-cover,.campaign-music-card-cover,.room-music-track-select>span { position:relative; display:grid; place-items:center; overflow:hidden; background:linear-gradient(145deg,#6a4930,#151d2a); color:#fff0ca; isolation:isolate; }
.room-music-cover { width:96px; aspect-ratio:1; border:1px solid rgba(255,255,255,.16); box-shadow:0 13px 30px rgba(0,0,0,.32); }
.room-music-player.is-player .room-music-cover { width:66px; }
.room-music-cover::before,.campaign-music-card-cover::before,.room-music-track-select>span::before { position:absolute; inset:-35%; z-index:-1; background:conic-gradient(from 40deg,transparent,rgba(255,255,255,.22),transparent 35%,rgba(105,174,181,.3),transparent 70%); content:""; transform:rotate(14deg); }
[data-music-cover-tone="1"],[data-cover-tone="1"] { background:linear-gradient(145deg,#354b6c,#171426); }
[data-music-cover-tone="2"],[data-cover-tone="2"] { background:linear-gradient(145deg,#6b3049,#1d1723); }
[data-music-cover-tone="3"],[data-cover-tone="3"] { background:linear-gradient(145deg,#315e58,#101d20); }
[data-music-cover-tone="4"],[data-cover-tone="4"] { background:linear-gradient(145deg,#665b2e,#1c1910); }
[data-music-cover-tone="5"],[data-cover-tone="5"] { background:linear-gradient(145deg,#4c376d,#171220); }
[data-music-cover-tone="6"],[data-cover-tone="6"] { background:linear-gradient(145deg,#6b3c31,#1c1311); }
.room-music-cover span { font:700 34px/1 var(--serif); text-shadow:0 2px 12px rgba(0,0,0,.45); }
.room-music-cover i,.campaign-music-card-cover i { position:absolute; right:9px; bottom:9px; width:18px; height:18px; border:5px solid rgba(255,255,255,.74); border-radius:50%; }
.room-music-now { min-width:0; display:grid; gap:10px; }
.room-music-now>header { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:start; }
.room-music-now>header>div { min-width:0; }
.room-music-now>header span { display:block; color:var(--gold); font-size:7px; letter-spacing:.15em; }
.room-music-now>header strong { display:block; overflow:hidden; margin-top:4px; color:var(--paper-strong); font:650 18px/1.35 var(--serif); text-overflow:ellipsis; white-space:nowrap; }
.room-music-now>header small { display:block; margin-top:3px; color:var(--muted); font-size:8px; }
.room-music-loop { min-height:32px; padding:0 9px; border:1px solid var(--line); background:transparent; color:var(--muted); font-size:8px; cursor:pointer; }
.room-music-loop.is-active { border-color:var(--gold); background:rgba(212,173,107,.12); color:var(--gold-soft); }
.room-music-controls { display:flex; gap:6px; align-items:center; }
.room-music-controls button { width:38px; min-width:38px; height:38px; border:1px solid var(--line-strong); background:#0a111a; color:var(--paper-strong); font-size:15px; cursor:pointer; }
.room-music-controls .room-music-primary { width:46px; min-width:46px; border-color:var(--gold); background:var(--gold); color:#17120b; }
.room-music-controls button:disabled,.room-music-loop:disabled { cursor:not-allowed; opacity:.4; }
.room-music-timeline { min-width:0; display:grid; grid-template-columns:36px minmax(0,1fr) 36px; gap:8px; align-items:center; color:var(--muted); font-size:8px; font-variant-numeric:tabular-nums; }
.room-music-timeline span:last-child { text-align:right; }
.room-music-timeline input,.room-music-volume input,.campaign-music-card input { min-width:0; height:18px; accent-color:var(--gold); }
.room-music-volume { display:grid; grid-template-columns:auto minmax(80px,180px) 34px; gap:8px; align-items:center; width:min(300px,100%); color:var(--muted); font-size:8px; }
.room-music-volume b { color:var(--muted-strong); font-size:8px; font-variant-numeric:tabular-nums; text-align:right; }
.room-music-status { min-height:15px; margin:0; color:#9ec7ca; font-size:8px; line-height:1.55; }
.room-music-status.is-error { color:#efa9ad; }
.room-music-library { display:grid; gap:13px; padding:17px 20px 20px; }
.room-music-library>header { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; align-items:center; }
.room-music-library>header span,.room-music-presets>span { display:block; color:var(--gold); font-size:7px; letter-spacing:.14em; }
.room-music-library>header strong { display:block; margin-top:3px; color:var(--paper-strong); font:600 14px/1.3 var(--serif); }
.room-music-import { min-height:38px; display:inline-flex; align-items:center; padding:0 12px; border:1px solid var(--gold); background:rgba(212,173,107,.08); color:var(--gold-soft); cursor:pointer; }
.room-music-import span { color:inherit!important; font-size:9px!important; font-weight:700; letter-spacing:0!important; }
.room-music-upload-hint { margin:0; color:var(--muted); font-size:8px; line-height:1.65; }
.room-music-track-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.room-music-track { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; padding:8px; border:1px solid var(--line); background:#0a111a; }
.room-music-track.is-selected { border-color:rgba(212,173,107,.64); background:rgba(212,173,107,.065); }
.room-music-track-select { min-width:0; display:grid; grid-template-columns:44px minmax(0,1fr); gap:9px; align-items:center; padding:0; border:0; background:transparent; text-align:left; cursor:pointer; }
.room-music-track-select>span { width:44px; height:44px; border:1px solid rgba(255,255,255,.12); font:650 17px/1 var(--serif); }
.room-music-track-select>div { min-width:0; }
.room-music-track-select strong,.room-music-track-select small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.room-music-track-select strong { color:var(--paper-strong); font:600 10px/1.45 var(--serif); }
.room-music-track-select small { margin-top:3px; color:var(--muted); font-size:7px; }
.room-music-track>div { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px; max-width:170px; }
.room-music-track>div button,.room-music-scene-form button { min-height:30px; padding:0 7px; border:1px solid var(--line-strong); background:transparent; color:var(--muted-strong); font-size:7px; cursor:pointer; }
.room-music-track>div button:hover,.room-music-scene-form button:hover { border-color:var(--gold); color:var(--paper-strong); }
.room-music-track>div button.danger { border-color:rgba(220,98,105,.38); color:#eaa2a6; }
.room-music-empty { grid-column:1 / -1; margin:0; padding:20px; border:1px dashed var(--line); color:var(--muted); font-size:8px; text-align:center; }
.room-music-scene-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:end; }
.room-music-scene-form label { min-width:0; display:grid; gap:5px; }
.room-music-scene-form label span { color:var(--gold); font-size:7px; }
.room-music-scene-form input { width:100%; min-height:38px; padding:0 10px; border:1px solid var(--line); outline:0; background:#070d14; color:var(--paper-strong); font-size:9px; }
.room-music-scene-form input:focus { border-color:var(--gold); }
.room-music-scene-form button { min-height:38px; }
.room-music-presets { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.room-music-presets>span { width:100%; }
.room-music-presets button { min-width:130px; display:grid; justify-items:start; gap:3px; padding:8px 9px; border:1px solid var(--line); background:#0a111a; color:var(--paper-strong); text-align:left; cursor:pointer; }
.room-music-presets button:hover { border-color:var(--gold); }
.room-music-presets strong { font-size:8px; }
.room-music-presets small { overflow:hidden; max-width:180px; color:var(--muted); font-size:7px; text-overflow:ellipsis; white-space:nowrap; }

.player-room-sidebar-music { min-width:0; }
.player-room-sidebar-music .room-music-player.is-player { grid-template-columns:44px minmax(0,1fr); gap:10px; align-items:start; padding:11px 12px 12px; border:0; background:rgba(8,14,22,.82); }
.player-room-sidebar-music .room-music-cover { width:44px; margin-top:1px; box-shadow:0 8px 18px rgba(0,0,0,.28); }
.player-room-sidebar-music .room-music-cover span { font-size:18px; }
.player-room-sidebar-music .room-music-cover i { right:5px; bottom:5px; width:10px; height:10px; border-width:3px; }
.player-room-sidebar-music .room-music-now { grid-template-columns:auto minmax(0,1fr); gap:7px 9px; }
.player-room-sidebar-music .room-music-now>header { grid-column:1 / -1; grid-template-columns:minmax(0,1fr); gap:0; }
.player-room-sidebar-music .room-music-now>header strong { margin-top:2px; font-size:12px; }
.player-room-sidebar-music .room-music-now>header small { margin-top:1px; font-size:7px; }
.player-room-sidebar-music .room-music-loop { display:none; }
.player-room-sidebar-music .room-music-controls { grid-column:1; }
.player-room-sidebar-music .room-music-controls button:not(.room-music-primary) { display:none; }
.player-room-sidebar-music .room-music-primary { width:34px; min-width:34px; height:32px; }
.player-room-sidebar-music .room-music-timeline { grid-column:2; grid-template-columns:28px minmax(0,1fr) 28px; gap:5px; font-size:7px; }
.player-room-sidebar-music .room-music-volume { grid-column:1 / -1; grid-template-columns:auto minmax(0,1fr) 30px; width:100%; font-size:7px; }
.player-room-sidebar-music .room-music-status { grid-column:1 / -1; min-height:0; font-size:7px; }

.campaign-music-card { min-width:0; display:grid; grid-template-columns:78px minmax(0,1fr); gap:11px; margin-top:3px; padding:10px; border:1px solid rgba(212,173,107,.35); background:linear-gradient(125deg,rgba(212,173,107,.08),rgba(9,16,24,.86)); }
.campaign-music-card-cover { width:78px; aspect-ratio:1; border:1px solid rgba(255,255,255,.14); }
.campaign-music-card-cover span { font:700 26px/1 var(--serif); text-shadow:0 2px 10px rgba(0,0,0,.5); }
.campaign-music-card-cover i { width:14px; height:14px; border-width:4px; }
.campaign-music-card-body { min-width:0; display:grid; gap:7px; }
.campaign-music-card-body header { min-width:0; display:grid!important; grid-template-columns:minmax(0,1fr) auto; gap:2px 8px!important; }
.campaign-music-card-body header span { grid-column:1 / -1; color:var(--gold); font-size:6px; letter-spacing:.14em; }
.campaign-music-card-body header strong { overflow:hidden; color:var(--paper-strong)!important; font:600 11px/1.4 var(--serif)!important; text-overflow:ellipsis; white-space:nowrap; }
.campaign-music-card-body header small { color:var(--muted); font-size:7px; }
.campaign-music-card-controls { min-width:0; display:grid; grid-template-columns:30px 30px minmax(50px,1fr) 32px; gap:6px; align-items:center; color:var(--muted); font-size:7px; font-variant-numeric:tabular-nums; }
.campaign-music-card-controls button { width:30px; min-width:30px; height:30px; border:1px solid var(--gold); background:var(--gold); color:#16120c; cursor:pointer; }
.campaign-music-card-body>label { display:grid; grid-template-columns:auto minmax(70px,140px); gap:7px; align-items:center; color:var(--muted); font-size:7px; }
.campaign-music-card-body>p { min-height:12px; margin:0!important; color:#efa9ad!important; font-size:7px!important; }

@media(max-width:900px) {
  .room-music-track-list { grid-template-columns:1fr; }
}
@media(max-width:620px) {
  .room-music-player,.room-music-player.is-player { grid-template-columns:54px minmax(0,1fr); gap:9px; padding:10px; }
  .room-music-cover,.room-music-player.is-player .room-music-cover { width:54px; }
  .room-music-cover span { font-size:22px; }
  .room-music-now>header strong { font-size:13px; }
  .room-music-library { padding:13px; }
  .room-music-track { grid-template-columns:1fr; }
  .room-music-track>div { justify-content:flex-start; max-width:none; padding-left:53px; }
  .room-music-scene-form { grid-template-columns:1fr; }
  .campaign-music-card { grid-template-columns:52px minmax(0,1fr); gap:8px; padding:8px; }
  .campaign-music-card-cover { width:52px; }
  .campaign-music-card-cover span { font-size:19px; }
  .campaign-music-card-controls { grid-template-columns:28px 27px minmax(40px,1fr) 29px; gap:4px; }
}