:root { color-scheme: dark; font: 15px system-ui, sans-serif; background: #10131a; color: #e7ebf2; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 50% 0, #202b40, #10131a 52%); }
.app-shell { width: min(1100px, calc(100% - 32px)); margin: 24px auto; }
.toolbar, .project-bar, .panel-heading, .toolbar-actions, .dialog-actions { display: flex; align-items: center; gap: 10px; }
.toolbar { justify-content: space-between; margin-bottom: 16px; }
.quick-start { margin-bottom: 14px; border: 1px solid #2b374c; border-radius: 10px; background: #171d28e8; overflow: hidden; }
.quick-start summary { padding: 10px 14px; color: #b9d8ff; cursor: pointer; font-weight: 650; }
.quick-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 14px 14px; }
.quick-steps div { display: grid; gap: 4px; padding: 10px; border-radius: 7px; background: #202a3b; }
.quick-steps span { color: #98a3b5; font-size: 13px; line-height: 1.35; }
h1, h2, p { margin: 0; } h1 { font-size: 24px; } h2 { font-size: 18px; }
.subtitle, .hint, small, .panel-heading span { color: #98a3b5; }
.toolbar-actions { flex-wrap: wrap; justify-content: flex-end; }
button, .button { border: 1px solid #3b4b65; border-radius: 7px; padding: 8px 12px; background: #202a3b; color: inherit; cursor: pointer; font: inherit; }
button:hover, .button:hover { background: #2b3d59; } .primary { background: #2477d2; border-color: #4b9af1; }
.file-menu { position: relative; }
.file-menu summary { list-style: none; border: 1px solid #3b4b65; border-radius: 7px; padding: 8px 12px; background: #202a3b; cursor: pointer; }
.file-menu summary::-webkit-details-marker { display: none; }
.file-menu[open] summary, .file-menu summary:hover { background: #2b3d59; }
.file-menu-popover { position: absolute; z-index: 3; right: 0; top: calc(100% + 6px); min-width: 190px; display: grid; gap: 6px; padding: 8px; border: 1px solid #3b4b65; border-radius: 8px; background: #171d28; box-shadow: 0 8px 24px #0008; }
.file-menu-popover button, .file-menu-popover .button { text-align: left; white-space: nowrap; }
.recommended { color: #8bc2ff; font-size: 12px; }
.artwork-menu { position: relative; }
.artwork-menu summary { list-style: none; border: 1px solid #3b4b65; border-radius: 7px; padding: 8px 12px; background: #202a3b; cursor: pointer; }
.artwork-menu summary::-webkit-details-marker { display: none; }
.artwork-menu[open] summary, .artwork-menu summary:hover { background: #2b3d59; }
.artwork-menu-popover { position: absolute; z-index: 3; left: 0; top: calc(100% + 6px); min-width: 180px; display: grid; gap: 6px; padding: 8px; border: 1px solid #3b4b65; border-radius: 8px; background: #171d28; box-shadow: 0 8px 24px #0008; }
.artwork-menu-popover button, .artwork-menu-popover .button { text-align: left; white-space: nowrap; }
.metadata-menu { position: relative; }
.metadata-menu summary { list-style: none; border: 1px solid #3b4b65; border-radius: 7px; padding: 8px 12px; background: #202a3b; cursor: pointer; }
.metadata-menu summary::-webkit-details-marker { display: none; }
.metadata-menu[open] summary, .metadata-menu summary:hover { background: #2b3d59; }
.metadata-popover { position: absolute; z-index: 3; right: 0; top: calc(100% + 6px); width: min(360px, calc(100vw - 32px)); display: grid; gap: 10px; padding: 12px; border: 1px solid #3b4b65; border-radius: 8px; background: #171d28; box-shadow: 0 8px 24px #0008; }
.metadata-popover textarea { resize: vertical; min-height: 64px; border: 1px solid #3b4b65; border-radius: 6px; padding: 8px; background: #10151f; color: inherit; font: inherit; }
.package-icon-field { display: grid; gap: 5px; padding: 10px; border: 1px solid #3b4b65; border-radius: 7px; background: #202a3b; }
.package-icon-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.package-icon-preview { width: 48px; height: 48px; object-fit: cover; border: 1px solid #4b9af1; border-radius: 5px; }
.panel { background: #171d28e8; border: 1px solid #2b374c; border-radius: 10px; padding: 14px; }
.project-bar { margin-bottom: 14px; flex-wrap: wrap; }
.artwork-preview { width: 44px; height: 44px; object-fit: cover; border: 1px solid #3b4b65; border-radius: 5px; }
label { display: grid; gap: 5px; color: #aeb9ca; } input, select { min-width: 150px; border: 1px solid #3b4b65; border-radius: 6px; padding: 8px; background: #10151f; color: inherit; font: inherit; }
.check { display: flex; align-items: center; margin-left: auto; } .check input { min-width: auto; }
.drop-zone { min-height: 170px; display: grid; place-content: center; justify-items: center; gap: 8px; border-style: dashed; margin-bottom: 14px; }
.game-drop { min-height: 92px; display: grid; place-content: center; justify-items: center; gap: 5px; margin-bottom: 14px; padding: 14px; text-align: center; color: #b9d8ff; border: 2px dashed #4b77a8; background: #172438; }
.game-drop span { color: #c1cada; }
.game-drop.over { border-color: #59a9ff; background: #1b3552; color: #e7ebf2; }
.drop-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.drop-zone.over { border-color: #59a9ff; background: #1b3552; }
.tracks-panel { min-height: 220px; } .panel-heading { justify-content: space-between; margin-bottom: 10px; }
.empty-state { padding: 48px 0; text-align: center; color: #8290a5; }
.playlist-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 -2px 10px; }
.playlist-tabs button.active { background: #2477d2; border-color: #4b9af1; }
.track { display: grid; grid-template-columns: 42px minmax(120px, 1fr) minmax(140px, 1.2fr) minmax(120px, 1fr) auto auto auto auto auto; gap: 8px; align-items: center; padding: 10px 4px; border-top: 1px solid #2b374c; }
.track-artwork { width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border: 1px solid #3b4b65; border-radius: 5px; background: #202a3b; color: #8b9ab2; font-size: 22px; }
.track-artwork img { width: 100%; height: 100%; object-fit: cover; display: block; }
.track input { min-width: 0; width: 100%; padding: 6px 7px; }
.track-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .track-meta { color: #8794a9; font-size: 12px; grid-column: 1 / span 3; }
.track-actions { display: contents; }
  .status { min-height: 24px; padding: 10px 2px; color: #aeb9ca; } .status.error { color: #ff8d8d; } progress { width: 100%; height: 8px; accent-color: #4b9af1; }
.tracks { min-height: 0; overflow-y: auto; scrollbar-color: #4b6284 #10151f; scrollbar-width: thin; }
dialog { border: 1px solid #3b4b65; border-radius: 10px; background: #171d28; color: inherit; padding: 20px; min-width: min(440px, calc(100% - 32px)); } dialog::backdrop { background: #0009; }
.dialog-actions { justify-content: flex-end; margin-top: 18px; } code { color: #8bc2ff; }
@media (min-width: 701px) {
  html, body { height: 100%; overflow: hidden; }
  .app-shell { height: calc(100vh - 32px); margin: 16px auto; display: flex; flex-direction: column; }
  .tracks-panel { flex: 1 1 auto; min-height: 120px; display: flex; flex-direction: column; }
  .tracks { flex: 1 1 auto; }
}
@media (max-width: 900px) { .track { grid-template-columns: 42px 1fr 1fr auto auto auto; } .track-meta { grid-column: 2 / span 2; } .track .track-playlist { grid-column: 2 / span 2; } }
@media (max-width: 700px) { .toolbar { align-items: flex-start; flex-direction: column; } .toolbar-actions { justify-content: flex-start; } .quick-steps { grid-template-columns: 1fr; } .track { grid-template-columns: 42px 1fr auto; } .track-meta { grid-column: 2; } .track .track-playlist { grid-column: 2; } }