.track-detail-dialog,.track-media-dialog { color:var(--vault-text); background:var(--vault-panel); border:1px solid var(--vault-line-strong); border-radius:18px; padding:26px; margin:auto; width:min(800px,calc(100% - 28px)); max-height:calc(100dvh - 40px); overflow:auto; overscroll-behavior:contain; box-shadow:var(--vault-shadow); }
.track-detail-dialog::backdrop,.track-media-dialog::backdrop { background:#000b; backdrop-filter:blur(12px); }
.track-detail-dialog { position:fixed; inset:0; }
.track-detail-close { display:block; margin-left:auto; min-height:36px; padding:6px 12px; border:1px solid var(--vault-line); border-radius:8px; background:transparent; color:var(--vault-text); cursor:pointer; }
.track-detail-dialog>.track-detail-close { position:absolute; top:14px; right:14px; font-size:24px; border:0; }
.track-details { width:100%; min-width:0; text-align:left; color:var(--vault-text); }
.track-detail-heading { display:flex; align-items:center; gap:16px; padding:0 32px 20px 0; }
.track-detail-heading h2 { font-size:23px; line-height:1.2; margin:0 0 6px; overflow-wrap:anywhere; }
.track-detail-cover { width:64px; height:64px; border-radius:10px; object-fit:cover; }
.track-detail-muted { color:var(--vault-muted); font-size:12px; line-height:1.5; }
.track-detail-tabs { display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--vault-line); padding-bottom:10px; margin-bottom:22px; }
.track-detail-tab { border:0; border-radius:8px; padding:10px 12px; background:transparent; color:var(--vault-muted); font:inherit; font-size:13px; cursor:pointer; }
.track-detail-tab[aria-selected="true"] { background:rgba(var(--vault-gold-rgb),.12); color:var(--vault-gold); }
.track-detail-tab:hover,.track-detail-period:hover { color:var(--vault-gold); }
.track-detail-fields { display:grid; grid-template-columns:minmax(110px,1fr) minmax(0,2fr); gap:14px 24px; margin:0; }
.track-detail-fields dt { color:var(--vault-muted); font-size:12px; }
.track-detail-fields dd { margin:0; font-size:14px; overflow-wrap:anywhere; white-space:pre-wrap; }
.track-detail-clips { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr)); gap:16px; }
.track-detail-clip { display:flex; flex-direction:column; align-items:stretch; gap:8px; text-align:left; min-width:0; background:transparent; border:0; color:inherit; font:inherit; padding:0 0 6px; cursor:pointer; }
.track-detail-clip-poster { position:relative; aspect-ratio:16/10; display:grid; place-items:center; overflow:hidden; background:var(--vault-bg-deep); border-radius:10px; }
.track-detail-clip-poster img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.7; }
.track-detail-clip-play { z-index:1; display:grid; place-items:center; height:42px; width:42px; background:var(--vault-gold); color:var(--vault-bg-deep); border-radius:50%; font-size:16px; padding-left:2px; }
.track-detail-clip-duration { position:absolute; right:8px; bottom:8px; padding:2px 5px; border-radius:4px; background:#000b; color:#fff; font-size:11px; }
.track-detail-clip-title { font-size:13px; overflow-wrap:anywhere; }
.track-detail-empty { margin:18px 0; color:var(--vault-muted); font-size:13px; }
.track-detail-stats-top { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:2px 0 18px; }
.track-detail-stat-controls { position:relative; display:flex; gap:2px; padding:3px; border-radius:9px; background:var(--vault-bg-deep); flex:0 0 auto; isolation:isolate; }
.track-detail-stat-controls[hidden] { display:none; }
.track-detail-period-indicator { position:absolute; left:0; top:3px; bottom:3px; z-index:-1; background:var(--vault-panel-raised); border-radius:6px; box-shadow:0 1px 3px #0003; pointer-events:none; }
.track-detail-stat-controls[data-ready="true"] .track-detail-period-indicator { transition:transform 320ms cubic-bezier(.22,1,.36,1),width 320ms cubic-bezier(.22,1,.36,1); }
.track-detail-period { position:relative; border:0; background:transparent; color:var(--vault-muted); border-radius:6px; padding:7px 12px; cursor:pointer; font:inherit; font-size:12px; transition:color 180ms ease; }
.track-detail-period[aria-pressed="true"] { background:transparent; color:var(--vault-text); }
.track-detail-stat-summary { display:flex; flex-direction:column; gap:5px; }
.track-detail-stat-summary strong { font-size:34px; line-height:1.1; font-weight:600; letter-spacing:-.04em; }
.track-detail-plot { position:relative; padding-top:12px; }
.track-detail-stats-status { min-height:18px; margin-bottom:4px; font-size:11px; color:var(--vault-muted); }
.track-detail-chart { display:block; width:100%; margin:0 0 14px; overflow:visible; touch-action:pan-y; }
.track-detail-chart text { fill:var(--vault-dim); font-size:10px; font-family:inherit; }
.track-chart-grid { stroke:var(--vault-line); stroke-width:1; opacity:.6; stroke-dasharray:3 6; }
.track-chart-line { fill:none; stroke:var(--vault-gold); stroke-width:2; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.track-chart-partial { stroke-dasharray:4 5; opacity:.65; }
.track-chart-point { fill:var(--vault-gold); stroke:var(--vault-panel); stroke-width:2; }
.track-chart-halo { fill:var(--vault-gold); opacity:.12; }
.track-chart-guide { stroke:var(--vault-gold); opacity:.3; stroke-width:1; stroke-dasharray:3 4; }
.track-chart-tooltip { position:absolute; left:0; top:0; pointer-events:none; padding:10px 13px; min-width:120px; display:flex; flex-direction:column; gap:3px; background:var(--vault-panel-raised); border:1px solid var(--vault-line-strong); box-shadow:0 8px 24px #0004; border-radius:10px; z-index:2; will-change:transform; }
.track-chart-tooltip[hidden] { display:none; }
.track-chart-tip-date,.track-chart-tip-note { font-size:11px; color:var(--vault-muted); }
.track-chart-tooltip strong { font-size:20px; font-weight:600; }
.track-detail-stat-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding-top:12px; border-top:1px solid var(--vault-line); }
.track-detail-chart-note { color:var(--vault-dim); font-size:11px; margin-top:8px; }
.track-chart-data { color:var(--vault-muted); font-size:11px; margin:0 0 12px; }
.track-chart-data summary { cursor:pointer; }
.track-chart-data dl { display:grid; grid-template-columns:1fr auto; gap:5px; margin-top:10px; }
.track-chart-data dd { margin:0; }
.track-detail-total { margin-top:14px; color:var(--vault-muted); font-size:13px; }
.track-detail-retry { border:0; background:none; color:var(--vault-gold); font:inherit; font-size:12px; cursor:pointer; text-decoration:underline; }
.track-detail-status:empty { display:none; }
.track-detail-status { margin-bottom:16px; }
#lyricsPanel #lyricsInfoFull:has(>.track-details) { justify-content:flex-start; align-items:stretch; padding:22px 8px 32px; }
#lyricsInfoFull .track-detail-heading { padding-bottom:12px; }
#lyricsInfoFull .track-detail-heading h2 { font-size:20px; }
#lyricsInfoFull .track-detail-fields { grid-template-columns:minmax(100px,1fr) minmax(0,2fr); }
.track-media-dialog { width:min(1000px,calc(100% - 28px)); }
.track-media-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:18px; }
.track-media-heading h2 { font-size:18px; overflow-wrap:anywhere; }
.track-media-heading .track-detail-close { flex:0 0 auto; font-size:12px; }
.track-media-player { display:block; width:100%; max-height:70dvh; background:#000; border-radius:10px; }
audio.track-media-player { height:54px; }
.track-media-source { display:inline-block; margin-top:12px; color:var(--vault-muted); font-size:12px; }
.track-media-dialog[data-context="fullscreen"] { width:100%; height:100dvh; max-height:100dvh; max-width:none; border:0; border-radius:0; padding:clamp(16px,4vw,56px); background:rgba(8,8,9,.98); }
.track-media-dialog[data-context="fullscreen"] .track-media-player { max-height:calc(100dvh - 180px); }
.track-media-dialog[data-context="fullscreen"] .track-media-heading { max-width:1200px; margin:0 auto 24px; }
.track-media-dialog[data-context="fullscreen"] .track-media-player,.track-media-dialog[data-context="fullscreen"]>.track-detail-muted,.track-media-dialog[data-context="fullscreen"] .track-media-source { max-width:1200px; margin-left:auto; margin-right:auto; }
@media(max-width:600px) { .track-detail-dialog,.track-media-dialog { padding:20px 16px; width:calc(100% - 16px); max-height:calc(100dvh - 24px); border-radius:14px; } .track-detail-fields,#lyricsInfoFull .track-detail-fields { grid-template-columns:minmax(0,1fr); gap:4px; } .track-detail-fields dd { margin-bottom:14px; } .track-detail-tab { font-size:12px; padding:9px 8px; } .track-detail-heading h2 { font-size:20px; } .track-detail-clips { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .track-media-heading { gap:8px; } .track-media-heading h2 { font-size:15px; } }
@media(pointer:coarse) { .track-detail-tab,.track-detail-close,.track-detail-period { min-height:44px; } }
@media(max-width:600px) { .track-detail-stats-top { flex-wrap:wrap; gap:12px; } .track-detail-stat-controls { margin-left:auto; } }
@media(prefers-reduced-motion:reduce) { .track-details *,.track-media-dialog { scroll-behavior:auto; } .track-detail-stat-controls[data-ready="true"] .track-detail-period-indicator,.track-detail-period { transition:none; } }
.track-detail-grail-status{margin:0 0 14px;font-size:12px;line-height:1.6;color:var(--vault-muted)}
.track-detail-grail-actions{display:flex;align-items:center;gap:10px;margin:0 0 22px}
.track-detail-grail-actions>[data-grail-vote]{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:82px;height:40px;padding:0 10px;font-size:14px;font-variant-numeric:tabular-nums;box-sizing:border-box}
.track-detail-remaster{min-height:40px;padding:8px 14px;border:1px solid var(--vault-line);border-radius:10px;background:transparent;color:var(--vault-muted);font:inherit;font-size:12px;cursor:pointer}
.track-detail-remaster:hover{color:var(--vault-gold);border-color:var(--vault-gold)}
.track-detail-playback-actions{display:flex;margin:0 0 20px}
.track-detail-open-player{min-height:44px;padding:10px 16px;border:1px solid rgba(var(--vault-gold-rgb),.35);border-radius:10px;background:rgba(var(--vault-gold-rgb),.12);color:var(--vault-gold);font:inherit;font-size:13px;cursor:pointer}
.track-detail-open-player:hover{background:rgba(var(--vault-gold-rgb),.2)}
.track-detail-open-player:focus-visible{outline:2px solid var(--vault-gold);outline-offset:3px}