:root {
--bg: #0d1117;
--bg-light: #161b22;
--bg-hover: #1c2128;
--border: #30363d;
--text: #e6edf3;
--muted: #8b949e;
--accent: #58a6ff;
--accent-hover: #79c0ff;
--green: #3fb950;
}

{
box-sizing: border-box;
}

html {
background: var(--bg);
}

body {
margin: 0;
padding-bottom: 130px;
background: var(--bg);
color: var(--text);
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Helvetica,
Arial,
sans-serif;
}

/* Header */

.topbar {
position: sticky;
top: 0;
z-index: 50;

display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;

padding: 18px 28px;

background: rgba(13, 17, 23, 0.94);
backdrop-filter: blur(12px);

border-bottom: 1px solid var(--border);


}

.brand {
display: flex;
align-items: center;
gap: 13px;
min-width: 220px;
}

.brand-icon {
width: 46px;
height: 46px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 12px;

background: linear-gradient(135deg, #238636, #58a6ff);

color: white;
font-size: 25px;
font-weight: bold;

box-shadow: 0 5px 20px rgba(88, 166, 255, 0.15);


}

.brand h1 {
margin: 0;
font-size: 20px;
line-height: 1.2;
}

.brand span {
display: block;
margin-top: 3px;

color: var(--muted);
font-size: 12px;


}

.search-wrap {
position: relative;
width: min(500px, 50vw);
}

#search {
width: 100%;

padding: 12px 42px 12px 16px;

border: 1px solid var(--border);
border-radius: 9px;

background: var(--bg-light);
color: var(--text);

outline: none;
font-size: 15px;

transition: border-color 0.15s, box-shadow 0.15s;


}

#search:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.12);
}

#search::placeholder {
color: var(--muted);
}

.clear-search {
position: absolute;
right: 9px;
top: 50%;

transform: translateY(-50%);

border: 0;
background: transparent;

color: var(--muted);
font-size: 23px;

cursor: pointer;

display: none;


}

.clear-search:hover {
color: var(--text);
}

/* Main */

main {
width: min(1200px, calc(100% - 32px));
margin: 0 auto;
}

.toolbar {
display: flex;
align-items: center;
justify-content: space-between;

padding: 22px 3px 12px;

color: var(--muted);
font-size: 13px;


}

#sortSelect {
padding: 8px 30px 8px 10px;

border: 1px solid var(--border);
border-radius: 7px;

background: var(--bg-light);
color: var(--text);

cursor: pointer;


}

/* Song list */

.library {
display: flex;
flex-direction: column;
gap: 3px;
}

.song {
display: grid;
grid-template-columns: 46px minmax(0, 1fr) auto;
align-items: center;
gap: 14px;

padding: 10px 12px;

border: 1px solid transparent;
border-radius: 9px;

cursor: pointer;

transition:
    background 0.12s,
    border-color 0.12s;


}

.song:hover {
background: var(--bg-hover);
border-color: var(--border);
}

.song.playing {
background: rgba(88, 166, 255, 0.08);
border-color: rgba(88, 166, 255, 0.25);
}

.song-number {
width: 40px;
height: 40px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 8px;

background: var(--bg-light);

color: var(--muted);
font-size: 14px;


}

.song.playing .song-number {
background: rgba(88, 166, 255, 0.15);
color: var(--accent);
}

.song-details {
min-width: 0;
}

.song-artist {
color: var(--muted);
font-size: 12px;
margin-bottom: 3px;

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;


}

.song-title {
color: var(--text);
font-size: 15px;
font-weight: 500;

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;


}

.song-actions {
display: flex;
align-items: center;
gap: 5px;
}

.song-actions button,
.song-actions a {
width: 38px;
height: 38px;

display: flex;
align-items: center;
justify-content: center;

border: 0;
border-radius: 8px;

background: transparent;
color: var(--muted);

text-decoration: none;
font-size: 17px;

cursor: pointer;


}

.song-actions button:hover,
.song-actions a:hover {
background: var(--bg-light);
color: var(--text);
}

/* Empty */

.empty {
text-align: center;
padding: 80px 20px;
color: var(--muted);
}

.empty-icon {
font-size: 50px;
margin-bottom: 10px;
}

.empty h2 {
color: var(--text);
margin: 0 0 5px;
}

.empty p {
margin: 0;
}

.hidden {
display: none !important;
}

/* Player */

.player {
position: fixed;
z-index: 100;

left: 0;
right: 0;
bottom: 0;

min-height: 92px;

display: grid;
grid-template-columns: minmax(220px, 1fr) minmax(300px, 1.6fr) minmax(180px, 1fr);
align-items: center;
gap: 25px;

padding: 13px 25px;

background: rgba(22, 27, 34, 0.97);
backdrop-filter: blur(15px);

border-top: 1px solid var(--border);

box-shadow: 0 -10px 35px rgba(0, 0, 0, 0.2);


}

.player-info {
display: flex;
align-items: center;
gap: 12px;

min-width: 0;


}

.player-cover {
width: 52px;
height: 52px;

flex: 0 0 auto;

display: flex;
align-items: center;
justify-content: center;

border-radius: 9px;

background: linear-gradient(135deg, #21262d, #30363d);

color: var(--accent);
font-size: 24px;


}

.now-playing {
min-width: 0;
}

#nowArtist,
#nowTitle {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

#nowArtist {
color: var(--muted);
font-size: 12px;
margin-bottom: 3px;
}

#nowTitle {
color: var(--text);
font-size: 14px;
}

.player-center {
min-width: 0;
}

.progress-row {
display: flex;
align-items: center;
gap: 8px;

color: var(--muted);
font-size: 10px;


}

#progress {
flex: 1;
}

.controls {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;

margin-top: 4px;


}

.controls button {
width: 35px;
height: 35px;

border: 0;
border-radius: 50%;

background: transparent;
color: var(--text);

cursor: pointer;
font-size: 15px;


}

.controls button:hover {
background: var(--bg-hover);
}

.controls .play-button {
width: 43px;
height: 43px;

background: var(--text);
color: var(--bg);

font-size: 17px;


}

.controls .play-button:hover {
background: white;
transform: scale(1.04);
}

.player-right {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
}

.volume-icon {
font-size: 14px;
}

#volume {
width: 90px;
}

.download {
width: 38px;
height: 38px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 8px;

color: var(--muted);
text-decoration: none;

font-size: 18px;


}

.download:hover {
background: var(--bg-hover);
color: var(--text);
}

/* Range controls */

input[type="range"] {
appearance: none;
height: 4px;

border-radius: 4px;

background: #30363d;

cursor: pointer;


}

input[type="range"]::-webkit-slider-thumb {
appearance: none;

width: 12px;
height: 12px;

border-radius: 50%;

background: var(--accent);


}

input[type="range"]::-moz-range-thumb {
width: 12px;
height: 12px;

border: 0;
border-radius: 50%;

background: var(--accent);


}

/* Mobile */

@media (max-width: 800px) {

body {
    padding-bottom: 180px;
}

.topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;

    padding: 14px 16px;
}

.brand {
    min-width: 0;
}

.search-wrap {
    width: 100%;
}

main {
    width: calc(100% - 18px);
}

.player {
    grid-template-columns: 1fr;
    gap: 8px;

    padding: 9px 14px;
}

.player-info {
    display: none;
}

.player-right {
    justify-content: center;
}

.player-center {
    order: -1;
}

.song {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 10px;

    padding: 8px 6px;
}

.song-number {
    width: 36px;
    height: 36px;
}

.song-title {
    font-size: 14px;
}

.song-actions a {
    display: none;
}


}