:root{--bg-primary: #1C1F23;--bg-secondary: #262A2F;--bg-secondary-light: rgb(77, 81, 86);--bg-secondary-dark: #12151b;--led-cyan: #2ED3E6;--led-cyan-dim: rgba(46, 211, 230, .5);--led-cyan-glow: rgba(77, 217, 255, .55);--led-cyan-light: #7CE7F2;--led-orange: #F3A23A;--text-primary: #E6E6E6;--text-secondary: #9CA3AF;--text-heading: #c7e6f7;--text-engraved: #2a2a28;--text-engraved-soft: #4a4a48;--text-on-display: #cfe9f2;--text-on-metal: #1a1a18;--text-label: #3a3a38;--font-size-app-title: 1.5rem;--font-size-section-title: 1.125rem;--font-size-track-title: 1rem;--font-size-metadata: .8125rem;--font-size-ui-label: .75rem;--shadow-glow: 0 0 8px rgba(46, 211, 230, .5);--shadow-glow-inset: inset 0 0 3px 4px var(--led-cyan);--shadow-outline: 0 0 0 .25rem rgba(46, 211, 230, .8);--header-height-lg: 80px;--player-height-lg: 80px;--font-display: "Inter", sans-serif;--font-headings: "Orbitron", sans-serif;--font-mono: "JetBrains Mono", monospace;--r-panel: 6px;--r-button: 4px;--r-knob: 50%;--r-recess: 3px}*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:var(--font-display);color:var(--text-primary);scrollbar-width:thin;scrollbar-color:var(--led-orange) var(--bg-secondary)}h1,h2,h3,h4,h5,h6{font-family:var(--font-headings);color:var(--text-heading);margin:0 0 .5em;padding:0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--led-orange);border-radius:4px}::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:4px}input{background:var(--bg-secondary-light);border:1px solid var(--bg-secondary-light);color:var(--text-primary)}input::placeholder{color:var(--text-secondary)}input:focus{outline:2px solid var(--led-cyan);outline-offset:2px}a{color:var(--led-cyan);text-decoration:none}a:hover{color:var(--led-cyan-light)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:.8rem;font-family:var(--font-mono);letter-spacing:.15em;text-transform:uppercase;padding:8px 16px;border-radius:var(--r-button);border:none;cursor:pointer;-webkit-user-select:none;user-select:none}.btn[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none}.btn-metal{background:linear-gradient(180deg,#d8d8d4,#a8a8a4,#8a8a86);color:var(--text-on-metal);box-shadow:inset 0 1px #ffffffb3,inset 0 -1px #0000004d,0 2px 3px #00000080,0 0 0 1px var(--text-engraved);text-shadow:0 1px 0 rgba(255,255,255,.4)}.btn-metal:hover{color:var(--text-on-metal);background:linear-gradient(180deg,#e8e8e4,#b8b8b4,#9a9a96)}.btn-metal:active,.btn-metal.pressed{color:var(--text-on-metal);background:linear-gradient(180deg,#6a6a66,#8a8a86,#b8b8b4);box-shadow:inset 0 1px 3px #00000080,inset 0 -1px #ffffff4d,0 0 0 1px var(--text-engraved)}.btn-amber{background:linear-gradient(180deg,#ffd47a,#ffb347,#d68a20);color:#3a1d05;box-shadow:inset 0 1px #fff9,inset 0 -1px #0000004d,0 2px 3px #00000080,0 0 0 1px #4a2a08,0 0 12px #ffb34759;text-shadow:0 1px 0 rgba(255,255,255,.3);font-weight:700}.btn-amber:hover{color:#3a1d05;background:linear-gradient(180deg,#ffe49a,#ffc36a,#e69a30);box-shadow:inset 0 1px #ffffffb3,inset 0 -1px #0000004d,0 2px 3px #00000080,0 0 0 1px #4a2a08,0 0 18px #ffb3478c}.btn-amber:active,.btn-amber.pressed{background:linear-gradient(180deg,#b07020,#d68a20,#ffb347);color:#2a1404;box-shadow:inset 0 2px 4px #0000008c,inset 0 -1px #ffffff40,0 0 0 1px #4a2a08,0 0 8px #ffb34740}.btn-dark{background:linear-gradient(180deg,#4a4d52,#2e3136,#1a1c1f);color:#d8d8d4;box-shadow:inset 0 1px #ffffff2e,inset 0 -1px #00000080,0 2px 3px #00000080,0 0 0 1px #0a0c0e}.btn-dark:hover{background:linear-gradient(180deg,#5a5d62,#3e4146,#25272a);color:#f0f0ec}.btn-dark:active{background:linear-gradient(180deg,#15171a,#2a2d31,#3a3d42);box-shadow:inset 0 2px 4px #000000b3,0 0 0 1px #0a0c0e}.btn-dark.pressed{background:linear-gradient(180deg,#15171a,#2a2d31,#3a3d42);color:var(--led-cyan);text-shadow:0 0 8px var(--led-cyan-glow);box-shadow:inset 0 2px 4px #000000b3,inset 0 0 0 1px #4dd9ff4d,0 0 0 1px #0a0c0e}.badge{cursor:default;font-size:.75rem;color:var(--text-secondary);background:var(--bg-secondary);padding:.15rem .5rem;border-radius:1rem;box-shadow:1px 1px 1px var(--bg-secondary-dark)}.badge.badge-rosa{color:var(--led-cyan)}.badge.badge-dort{color:var(--led-orange)}#root{display:flex;flex-direction:column;height:100vh}.main{position:relative;flex:1;overflow-y:auto;background-color:var(--bg-primary)}.main .content{max-width:1200px;margin:0 auto;padding:1rem}.main .content .track-item{margin-bottom:10px}.button-play{cursor:pointer;color:var(--text-primary);display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#2b3138,#1b2026);border:2px solid var(--led-cyan);box-shadow:0 0 8px var(--led-cyan-dim);transition:all .2s ease}.button-play:hover{transform:scale(1.08);box-shadow:0 0 8px var(--led-cyan),0 0 10px var(--led-cyan-dim)}.button-play:focus{outline:none;box-shadow:var(--shadow-outline)}.button-play:active{outline:none;transform:scale(.95);box-shadow:0 0 6px var(--led-cyan-dim)}.track-item{display:flex;gap:.75rem;padding:.6rem .7rem;border:1px solid var(--bg-secondary);border-radius:.6rem;background:var(--bg-secondary-dark);align-items:center}.track-item .coverart{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:.5rem;overflow:hidden;background:var(--bg-secondary-light)}.track-item .coverart>img{display:block;width:100%;height:100%;object-fit:cover}.track-item .coverart .image-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-weight:700;font-size:1.4rem;color:var( --text-secondary)}.track-item .meta{flex:1;min-width:0}.track-item .title{font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-item .artist-album{margin-top:.15rem;color:var(--text-secondary);font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-item .artist-album>*{white-space:nowrap}.track-item .badges{margin-top:.35rem;display:flex;gap:.35rem;flex-wrap:wrap}.track-item .actions{margin-left:auto}.filters{padding:1rem}.filters .filters-container{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.filters .filters-container label{display:block;width:calc(50% - .25rem)}@media not (min-width:992px){.filters .filters-container label{width:100%}}.filters .filters-container .label-inline{display:inline-flex;align-items:center}.filters .filters-container .label-inline span{margin-right:.5em}.filters .filters-container .label-full{width:100%}.filters .filters-container .label-full>*{width:50%}.filters .filters-container label span{text-overflow:ellipsis;display:block;overflow:hidden;white-space:nowrap}.filters .filters-container input{margin:.5em 0 0;accent-color:var(--led-orange)}.filters .filters-container .slider{width:100%}.filters .filters-container select{background-color:var(--bg-secondary-light);color:var(--led-orange);border:1px solid var(--led-orange);border-radius:6px;padding:.3em}.filters .filters-container input[type=checkbox]{width:1rem;height:1rem}.loading-spinner{display:flex;align-items:center;justify-content:center;position:absolute;inset:0}.loading-spinner .spinner{width:48px;height:48px;border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation 1s linear infinite}.loading-spinner.dark{background-color:#0000004d}.loading-spinner.light{background-color:#ffffff4d}.loading-spinner.dark .spinner{border:5px solid #fff;border-bottom-color:transparent}.loading-spinner.light .spinner{border:5px solid #333;border-bottom-color:transparent}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.player{position:relative;background:linear-gradient(180deg,#b8b3a8,#8a847a 55%,#5a564e);flex:0 0 var(--player-height-lg)}.player.empty{flex:0 0 0}.player .heading{font-weight:700;margin-bottom:.5em}.player .overlay{display:flex;position:absolute;left:0;right:0;bottom:100%;background:linear-gradient(180deg,#4a4d52,#2e3136,#1a1c1f);transition:height .4s cubic-bezier(.4,0,.2,1);overflow:hidden}.player .overlay.maximized{height:calc(100vh - var(--header-height-lg) - var(--player-height-lg))}.player .overlay.minimized{height:0}.player .player-filters,.player .player-recommendations{flex:1;overflow:auto}.player .player-iframe{display:flex;flex-direction:column;flex:1.5;margin-top:1rem}.player .player-iframe iframe{width:100%;margin-bottom:1rem}.player .player-iframe .stats{display:flex;flex-wrap:wrap;gap:.5rem}.player .player-iframe .stats-box{width:calc((100% / 3) - (1rem / 3));border:1px solid var(--bg-secondary);border-radius:.3rem;background:var(--bg-secondary-dark);padding:.6rem}@media not (min-width:992px){.player .player-iframe .stats-box{width:calc(50% - .25rem)}}.player .player-iframe .stats-box-heading{font-size:var(--font-size-metadata);margin:0 0 .6rem}.player .player-iframe .stats-box-counter{font-size:var(--font-size-section-title);font-weight:600;margin:0}.player .player-recommendations{position:relative;overflow:hidden}.player .player-recommendations .recommendations-content{overflow:auto;height:100%;padding:1rem}.player .player-recommendations .track-item{margin-bottom:.5rem}.player .footer-bar{padding:10px;display:flex;gap:1rem;justify-content:space-between;align-items:center;border-style:solid;border-width:1px 0 0;border-top-color:var(--text-engraved-soft)}.player .footer-bar .coverart{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:.5rem;overflow:hidden;background:var(--bg-secondary-light)}.player .footer-bar .coverart>img{display:block;width:100%;height:100%;object-fit:cover}.player .footer-bar .coverart .image-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-weight:600;font-size:1.6rem;color:var( --text-secondary)}.player .footer-bar .meta{flex:1 1;overflow:hidden}.player .footer-bar .controls{flex-shrink:0}.player .footer-bar .meta .title{font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player .footer-bar .meta .artist-album{margin-top:.15rem;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player .footer-bar .meta .artist-album>*{white-space:nowrap}.player .footer-bar .controls button{font-size:1.4rem}.player .footer-bar .controls button+button{margin-left:.5rem}.header{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,#c9c9c4,#a8a8a4,#6e6e6a);flex:0 0 var(--header-height-lg);gap:1em;padding:.5em 2em;border-style:solid;border-width:0 0 1px;border-bottom-color:var(--text-engraved-soft)}.header>*{min-width:12%}.header .logo{display:inline-block;color:var(--text-engraved);font-family:var(--font-headings);font-size:var(--font-size-app-title);font-weight:700;letter-spacing:.05em;text-shadow:0 1px 0 rgba(255,255,255,.4);text-decoration:none}.header .logo .logo-line{display:inline}.header .logo .logo-mender{color:#006289}.header .search-box{flex:0 1 600px;display:flex;height:2.6rem;background:var(--bg-secondary);border:1px solid var(--bg-secondary-light);border-radius:var(--r-panel)}.header .search-box input{color:var(--led-cyan);width:100%;flex:1;height:100%;padding:.5em 1em;border:none;border-radius:var(--r-panel);font-family:var(--font-mono);font-size:1rem;background-color:transparent;transition:border-color .2s,box-shadow .2s}.header .search-box input::placeholder{color:var(--led-cyan-dim)}.header .search-box input:placeholder-shown{text-overflow:ellipsis}.header .search-box input:focus{outline:none;box-shadow:var(--shadow-glow-inset)}.header .search-box .btn-search{margin:3px;font-size:1rem;box-shadow:none}.header .links{text-align:right}.header .links a{font-weight:700}.header .links a+a{margin-left:1em}@media not (min-width:992px){.header .search-box{flex:1 1 auto}}@media not (min-width:768px){.header{gap:.5em;padding:.5em 1em}.header>*{min-width:initial}.header .logo{line-height:1;font-size:calc(var(--font-size-app-title) * .75)}.header .logo .logo-line{display:block}}