:root{--primary-color: #6ac7cc;--primary-hover: #62c49e;--accent-color: #6ac7cc;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 24px;--spacing-2xl: 32px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-full: 999px;--bg-body: #f0f3f9;--bg-primary: #ffffff;--bg-secondary: rgba(108, 199, 204, .04);--bg-card: rgba(108, 199, 204, .12);--bg-content: rgba(255, 255, 255, .5);--bg-player: #e8ecf5;--text-primary: #2c3e50;--text-secondary: #687490;--text-muted: #687490;--text-inverse: #ffffff;--border-color: rgba(108, 199, 204, .1);--border-hover: rgba(108, 199, 204, .2);--artwork-shadow: 0px 5px 10px 0px rgba(0, 0, 0, .25);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .04);--shadow-md: 0 4px 16px rgba(0, 0, 0, .06);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .1);--shadow-hover: 0 4px 16px rgba(0, 0, 0, .08);--stat-bg: rgba(108, 199, 204, .08);--stat-border: rgba(108, 199, 204, .15);--song-count-bg: rgba(108, 199, 204, .1);--btn-disabled-bg: #e2e8f0;--btn-disabled-text: #a0aec0}body.dark-mode{--md-primary: rgb(205 221 255);--md-surface-tint: rgb(170 199 255);--md-on-primary: rgb(0 37 81);--md-primary-container: rgb(118 156 223);--md-on-primary-container: rgb(0 12 34);--md-secondary: rgb(207 221 252);--md-on-secondary: rgb(24 38 61);--md-secondary-container: rgb(131 145 173);--md-on-secondary-container: rgb(0 0 0);--md-tertiary: rgb(255 204 255);--md-on-tertiary: rgb(65 13 73);--md-tertiary-container: rgb(196 134 200);--md-on-tertiary-container: rgb(29 0 35);--md-error: rgb(255 210 204);--md-on-error: rgb(84 0 3);--md-error-container: rgb(255 84 73);--md-on-error-container: rgb(0 0 0);--md-background: rgb(18 19 23);--md-on-background: rgb(226 226 232);--md-surface: rgb(18 19 23);--md-on-surface: rgb(255 255 255);--md-surface-variant: rgb(67 71 80);--md-on-surface-variant: rgb(217 220 232);--md-outline: rgb(174 178 189);--md-outline-variant: rgb(141 144 155);--md-shadow: rgb(0 0 0);--md-scrim: rgb(0 0 0);--md-inverse-surface: rgb(226 226 232);--md-inverse-on-surface: rgb(40 42 46);--md-inverse-primary: rgb(26 71 133);--md-primary-fixed: rgb(214 227 255);--md-on-primary-fixed: rgb(0 17 43);--md-primary-fixed-dim: rgb(170 199 255);--md-on-primary-fixed-variant: rgb(0 53 111);--md-secondary-fixed: rgb(214 227 255);--md-on-secondary-fixed: rgb(3 17 39);--md-secondary-fixed-dim: rgb(185 199 229);--md-on-secondary-fixed-variant: rgb(41 54 79);--md-tertiary-fixed: rgb(255 214 254);--md-on-tertiary-fixed: rgb(37 0 44);--md-tertiary-fixed-dim: rgb(242 176 245);--md-on-tertiary-fixed-variant: rgb(84 32 91);--md-surface-dim: rgb(18 19 23);--md-surface-bright: rgb(67 68 73);--md-surface-container-lowest: rgb(6 7 11);--md-surface-container-low: rgb(28 30 34);--md-surface-container: rgb(38 40 44);--md-surface-container-high: rgb(49 50 55);--md-surface-container-highest: rgb(60 61 66);--bg-body: #181818;--bg-primary: #1a202c;--bg-secondary: rgba(108, 199, 204, .06);--bg-card: rgba(108, 199, 204, .06);--bg-content: rgba(255, 255, 255, .05);--bg-player: #1f1f1f;--text-primary: #f8fafc;--text-secondary: #cbd5e1;--text-muted: #cbd5e1;--text-inverse: #ffffff;--border-color: rgba(108, 199, 204, .15);--border-hover: rgba(108, 199, 204, .25);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .2);--shadow-md: 0 4px 16px rgba(0, 0, 0, .2);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .3);--shadow-hover: 0 4px 16px rgba(0, 0, 0, .3);--stat-bg: rgba(108, 199, 204, .12);--stat-border: rgba(108, 199, 204, .2);--song-count-bg: rgba(108, 199, 204, .15);--btn-disabled-bg: #4a5568;--btn-disabled-text: #718096}body.light-mode{--md-primary: rgb(0 53 111);--md-surface-tint: rgb(54 94 157);--md-on-primary: rgb(255 255 255);--md-primary-container: rgb(70 109 173);--md-on-primary-container: rgb(255 255 255);--md-secondary: rgb(41 54 79);--md-on-secondary: rgb(255 255 255);--md-secondary-container: rgb(96 109 136);--md-on-secondary-container: rgb(255 255 255);--md-tertiary: rgb(84 32 91);--md-on-tertiary: rgb(255 255 255);--md-tertiary-container: rgb(145 88 150);--md-on-tertiary-container: rgb(255 255 255);--md-error: rgb(116 0 6);--md-on-error: rgb(255 255 255);--md-error-container: rgb(207 44 39);--md-on-error-container: rgb(255 255 255);--md-background: rgb(249 249 255);--md-on-background: rgb(26 28 32);--md-surface: rgb(249 249 255);--md-on-surface: rgb(15 17 21);--md-surface-variant: rgb(223 226 238);--md-on-surface-variant: rgb(50 54 63);--md-outline: rgb(79 82 92);--md-outline-variant: rgb(105 109 119);--md-shadow: rgb(0 0 0);--md-scrim: rgb(0 0 0);--md-inverse-surface: rgb(47 48 53);--md-inverse-on-surface: rgb(241 240 246);--md-inverse-primary: rgb(170 199 255);--md-primary-fixed: rgb(70 109 173);--md-on-primary-fixed: rgb(255 255 255);--md-primary-fixed-dim: rgb(43 84 147);--md-on-primary-fixed-variant: rgb(255 255 255);--md-secondary-fixed: rgb(96 109 136);--md-on-secondary-fixed: rgb(255 255 255);--md-secondary-fixed-dim: rgb(72 85 111);--md-on-secondary-fixed-variant: rgb(255 255 255);--md-tertiary-fixed: rgb(145 88 150);--md-on-tertiary-fixed: rgb(255 255 255);--md-tertiary-fixed-dim: rgb(118 64 124);--md-on-tertiary-fixed-variant: rgb(255 255 255);--md-surface-dim: rgb(198 198 204);--md-surface-bright: rgb(249 249 255);--md-surface-container-lowest: rgb(255 255 255);--md-surface-container-low: rgb(243 243 249);--md-surface-container: rgb(232 231 237);--md-surface-container-high: rgb(220 220 226);--md-surface-container-highest: rgb(209 209 215);--bg-body: #f0f3f9;--bg-primary: #ffffff;--bg-secondary: rgba(108, 199, 204, .04);--bg-card: rgba(108, 199, 204, .12);--bg-content: rgba(255, 255, 255, .5);--bg-player: #e8ecf5;--text-primary: #2c3e50;--text-secondary: #687490;--text-muted: #687490;--text-inverse: #ffffff;--border-color: rgba(108, 199, 204, .1);--border-hover: rgba(108, 199, 204, .2);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .04);--shadow-md: 0 4px 16px rgba(0, 0, 0, .06);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .1);--shadow-hover: 0 4px 16px rgba(0, 0, 0, .08);--stat-bg: rgba(108, 199, 204, .08);--stat-border: rgba(108, 199, 204, .15);--song-count-bg: rgba(108, 199, 204, .1);--btn-disabled-bg: #e2e8f0;--btn-disabled-text: #a0aec0}html{scroll-behavior:smooth}:root{--text-xs: clamp(10px, 2.5vw, 12px);--text-sm: clamp(12px, 3vw, 14px);--text-md: clamp(14px, 3.5vw, 16px);--text-lg: clamp(16px, 4vw, 18px);--text-xl: clamp(18px, 4.5vw, 20px);--text-2xl: clamp(20px, 5vw, 24px);--text-3xl: clamp(24px, 6vw, 32px);--ellipsis-small: 120px;--ellipsis-medium: 200px;--ellipsis-large: 300px}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.ellipsis-multiline{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.4}.text-container{container-type:inline-size;min-width:0}.responsive-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all .2s ease}@container (max-width: 150px){.responsive-text{font-size:var(--text-xs);max-width:100%}}@container (min-width: 151px) and (max-width: 250px){.responsive-text{font-size:var(--text-sm);max-width:100%}}@container (min-width: 251px) and (max-width: 400px){.responsive-text{font-size:var(--text-md);max-width:100%}}@container (min-width: 401px){.responsive-text{font-size:var(--text-lg);max-width:none;white-space:normal;overflow:visible;text-overflow:unset}}.flex-ellipsis{display:flex;align-items:center;min-width:0}.flex-ellipsis>*{min-width:0;flex:1}.flex-ellipsis .fixed{flex-shrink:0}body{background-color:var(--bg-body);font-family:Montserrat,sans-serif;position:relative;margin:0;border:0;padding:0;width:100%;height:100%;color:var(--text-primary)}.t-bg-accent-color{background-color:var(--accent-color)}body .player-bar{background-color:var(--bg-player);color:var(--text-primary)}body.dark-mode .svg{filter:invert(1)}body.dark-mode .t-color{color:var(--text-inverse)}body.light-mode .t-color{color:var(--text-primary)}body.dark-mode .t-bg-color{background-color:var(--text-inverse)}body.light-mode .t-bg-color{background-color:var(--text-primary)}body.dark-mode a,body.dark-mode p,body.dark-mode h1,body.dark-mode h3{color:var(--text-primary)!important}body.light-mode{background-color:var(--bg-body);color:var(--text-primary)}body:not(.dark-mode-preloading){transition:all .3s linear}.title{font-size:15px;color:var(--text-secondary);letter-spacing:5px}::-webkit-scrollbar{width:5px;background:transparent}::-webkit-scrollbar-thumb{background-color:var(--primary-color);border-radius:10px}.suggestions,.albums-list,.global50,.artists-list,.recent{display:grid;gap:15px;box-sizing:border-box}.suggestions,.global50,.artists-list,.recent{justify-content:space-around}.section-header{width:100%;display:flex;justify-content:space-between;margin-top:15px}.section-header h4{font-size:15px;color:var(--text-secondary);letter-spacing:3px}.section-header h3{color:var(--text-secondary);font-size:17px;letter-spacing:3px}.section-header .view-more img{width:25px;height:25px}.section-header .view-more{background:none;border:none;margin:20px 15px;cursor:pointer}@media screen and (min-width:1200px){.suggestions,.albums-list,.global50,.artists-list,.recent{grid-template-columns:repeat(4,auto)}}@media screen and (min-width:900px)and (max-width:1200px){.suggestions,.albums-list,.global50,.artists-list,.recent{grid-template-columns:repeat(3,auto)}}@media screen and (min-width:768px)and (max-width:900px){.suggestions,.albums-list,.global50,.artists-list,.recent{grid-template-columns:repeat(2,auto)}}@media screen and (max-width:768px){::-webkit-scrollbar{width:0;background:transparent}.suggestions,.albums-list,.global50,.artists-list,.recent{grid-template-columns:repeat(3,auto)}}@media screen and (max-width:759px){.suggestions,.albums-list,.global50,.artists-list,.recent{grid-template-columns:repeat(2,auto)}}.ellipsis-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.song-container{container-type:inline-size}.responsive-text-container{display:flex;align-items:center;min-width:0}.responsive-text-content{flex:1;min-width:0;overflow:hidden}.responsive-text-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;max-width:clamp(120px,40vw,300px)}.responsive-text-subtitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;max-width:clamp(100px,35vw,250px)}@media screen and (max-width:768px){.responsive-text-title{max-width:clamp(80px,50vw,200px)}.responsive-text-subtitle{max-width:clamp(70px,45vw,180px)}}