/* CSS Muutujad - Algselt Tume Teema */
:root {
    /* Tumedad Taustad */
    --color-main-bg-dark: #121212;
    --color-secondary-bg-dark: #1e1e1e;
    --color-tertiary-bg-dark: #2a2a2a;
    --color-hover-bg-dark: #363636;
    --color-header-bg-dark: #1e1e1e;
    --color-footer-bg-dark: #1e1e1e;
    --color-plyr-controls-bg-dark: rgba(18, 18, 18, 0.85);
    --color-modal-overlay-bg-dark: rgba(0, 0, 0, 0.7);
    --color-modal-bg-dark: var(--color-secondary-bg-dark);
    --color-modal-understand-btn-bg-dark: var(--color-accent);
    --color-modal-understand-btn-hover-bg-dark: var(--color-accent-darker);
    --color-modal-understand-btn-text-dark: var(--color-text-inverted-dark);

    /* Heledad Tekstid (Tumedal teemal) */
    --color-text-primary-dark: #e8e8e8;
    --color-text-secondary-dark: #b0b0b0;
    --color-text-inverted-dark: #121212;
    --color-logo-text-dark: #ffffff;

    /* Piirjooned (Tumedal teemal) */
    --color-border-dark: #3a3a3a;
    --color-border-light-dark: #555555;

    /* Heledad Taustad */
    --color-main-bg-light: #f4f6f9;
    --color-secondary-bg-light: #ffffff;
    --color-tertiary-bg-light: #ffffff;
    --color-hover-bg-light: #f1f3f5;
    --color-header-bg-light: #ffffff;
    --color-footer-bg-light: #ffffff;
    --color-plyr-controls-bg-light: rgba(255, 255, 255, 0.9);
    --color-modal-overlay-bg-light: rgba(0, 0, 0, 0.5);
    --color-modal-bg-light: var(--color-secondary-bg-light);
    --color-modal-understand-btn-bg-light: var(--color-accent);
    --color-modal-understand-btn-hover-bg-light: var(--color-accent-darker);
    --color-modal-understand-btn-text-light: #ffffff;

    /* Tumedad Tekstid (Heledal teemal) */
    --color-text-primary-light: #212529;
    --color-text-secondary-light: #6c757d;
    --color-text-inverted-light: #ffffff;
    --color-logo-text-light: #3a5896;

    /* Piirjooned (Heledal teemal) */
    --color-border-light: #dee2e6;
    --color-border-light-light: #ced4da;

    /* Ühised Värvid */
    --color-accent: #08d9d6; /* HSL: hsl(179, 93%, 47%) */
    --color-accent-darker: #07c4c1;
    --color-accent-hover-bg: rgba(8, 217, 214, 0.1);
    --color-accent-active-bg: rgba(8, 217, 214, 0.18);
    --color-album-glow: rgba(8, 217, 214, 0.3);
    --color-favorite: #ff6b6b;
    --color-favorite-hover-bg: rgba(255, 107, 107, 0.1);
    --color-visualizer-bar: var(--color-accent);
    --color-top-bar: #000000;
    --color-pattern-bar: #1e1e1e;
    --color-pattern-dot: rgba(255, 255, 255, 0.05);
    --color-link: var(--color-accent);
    --color-link-hover: var(--color-accent-darker);

    /* Muud */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --plyr-color-main: var(--color-accent);
    --border-radius-base: 6px;
    --border-radius-large: 10px;
    --transition-base: all 0.25s ease-in-out;

    /* Standardiseeritud varjud - Tume teema */
    --shadow-sm-dark: 0 2px 4px rgba(0,0,0,0.18);
    --shadow-sm-hover-dark: 0 3px 6px rgba(0,0,0,0.22);
    --shadow-md-dark: 0 4px 12px rgba(0,0,0,0.25);
    --shadow-md-hover-dark: 0 6px 16px rgba(0,0,0,0.3);
    --shadow-lg-dark: 0 8px 24px rgba(0,0,0,0.3);
    --shadow-lg-hover-dark: 0 12px 30px rgba(0,0,0,0.35);

    /* Aktsentvärviga varjud/helendused - Tume teema */
    --shadow-accent-glow-dark: 0 0 8px -2px var(--color-accent);
    --shadow-accent-drop-md-dark: 0 5px 15px hsla(179, 93%, 47%, 0.25);

    /* Pleieri spetsiifilised stiilid - Tume teema */
    --player-background-dark: #242424;
    --player-border-color-dark: #333333;

    /* Plyr.js kontrollide värvid - Tume teema */
    --plyr-track-background-dark: var(--main-bg-dark);
    --plyr-buffer-color-dark: var(--border-dark);

    /* Vaikimisi teema muutujad */
    --main-bg: var(--color-main-bg-dark);
    --secondary-bg: var(--color-secondary-bg-dark);
    --tertiary-bg: var(--color-tertiary-bg-dark);
    --player-background: var(--player-background-dark);
    --player-border-color: var(--player-border-color-dark);
    --plyr-track-background: var(--plyr-track-background-dark);
    --plyr-buffer-color: var(--plyr-buffer-color-dark);
    --hover-bg: var(--color-hover-bg-dark);
    --header-bg: var(--color-header-bg-dark);
    --footer-bg: var(--color-footer-bg-dark);
    --plyr-controls-bg: var(--color-plyr-controls-bg-dark);
    --modal-overlay-bg: var(--color-modal-overlay-bg-dark);
    --modal-bg: var(--color-modal-bg-dark);
    --modal-understand-btn-bg: var(--color-modal-understand-btn-bg-dark);
    --modal-understand-btn-hover-bg: var(--color-modal-understand-btn-hover-bg-dark);
    --modal-understand-btn-text: var(--color-modal-understand-btn-text-dark);
    --text-primary: var(--color-text-primary-dark);
    --text-secondary: var(--color-text-secondary-dark);
    --text-inverted: var(--color-text-inverted-dark);
    --logo-text: var(--color-logo-text-dark);
    --border: var(--color-border-dark);
    --border-light: var(--color-border-light-dark);
    --shadow-sm: var(--shadow-sm-dark);
    --shadow-sm-hover: var(--shadow-sm-hover-dark);
    --shadow-md: var(--shadow-md-dark);
    --shadow-md-hover: var(--shadow-md-hover-dark);
    --shadow-lg: var(--shadow-lg-dark);
    --shadow-lg-hover: var(--shadow-lg-hover-dark);
    --shadow-accent-glow: var(--shadow-accent-glow-dark);
    --shadow-accent-drop-md: var(--shadow-accent-drop-md-dark);
}

/* Heleda teema ülekirjutused */
html[data-theme='light'] {
    --main-bg: var(--color-main-bg-light);
    --secondary-bg: var(--color-secondary-bg-light);
    --tertiary-bg: var(--color-tertiary-bg-light);

    /* Standardiseeritud varjud - Hele teema */
    --shadow-sm-light: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-sm-hover-light: 0 3px 6px rgba(0,0,0,0.07);
    --shadow-md-light: 0 4px 10px rgba(0,0,0,0.07);
    --shadow-md-hover-light: 0 6px 14px rgba(0,0,0,0.09);
    --shadow-lg-light: 0 8px 20px rgba(0,0,0,0.1);
    --shadow-lg-hover-light: 0 10px 25px rgba(0,0,0,0.12);

    /* Aktsentvärviga varjud/helendused - Hele teema */
    --shadow-accent-glow-light: 0 0 8px -2px var(--color-accent);
    --shadow-accent-drop-md-light: 0 5px 15px hsla(179, 93%, 47%, 0.20);

    /* Pleieri spetsiifilised stiilid - Hele teema */
    --player-background-light: #fdfdfd;
    --player-border-color-light: #ececec;

    /* Plyr.js kontrollide värvid - Hele teema */
    --plyr-track-background-light: var(--main-bg-light);
    --plyr-buffer-color-light: var(--border-light);

    --player-background: var(--player-background-light);
    --player-border-color: var(--player-border-color-light);
    --plyr-track-background: var(--plyr-track-background-light);
    --plyr-buffer-color: var(--plyr-buffer-color-light);
    --hover-bg: var(--color-hover-bg-light);
    --header-bg: var(--color-header-bg-light);
    --footer-bg: var(--color-footer-bg-light);
    --plyr-controls-bg: var(--color-plyr-controls-bg-light);
    --modal-overlay-bg: var(--color-modal-overlay-bg-light);
    --modal-bg: var(--color-modal-bg-light);
    --modal-understand-btn-bg: var(--color-modal-understand-btn-bg-light);
    --modal-understand-btn-hover-bg: var(--color-modal-understand-btn-hover-bg-light);
    --modal-understand-btn-text: var(--color-modal-understand-btn-text-light);
    --text-primary: var(--color-text-primary-light);
    --text-secondary: var(--color-text-secondary-light);
    --text-inverted: var(--color-text-inverted-light);
    --logo-text: var(--color-logo-text-light);
    --border: var(--color-border-light);
    --border-light: var(--color-border-light-light);
    --shadow-sm: var(--shadow-sm-light);
    --shadow-sm-hover: var(--shadow-sm-hover-light);
    --shadow-md: var(--shadow-md-light);
    --shadow-md-hover: var(--shadow-md-hover-light);
    --shadow-lg: var(--shadow-lg-light);
    --shadow-lg-hover: var(--shadow-lg-hover-light);
    --shadow-accent-glow: var(--shadow-accent-glow-light);
    --shadow-accent-drop-md: var(--shadow-accent-drop-md-light);

    --color-pattern-bar: #e9ecef;
    --color-pattern-dot: rgba(0, 0, 0, 0.05);
}
html[data-theme='light'] ::-webkit-scrollbar-track { background: #e9ecef; }
html[data-theme='light'] ::-webkit-scrollbar-thumb { background-color: #adb5bd; border-color: #e9ecef; }
html[data-theme='light'] ::-webkit-scrollbar-thumb:hover { background-color: #868e96; }
html[data-theme='light'] .plyr__progress input[type=range]::-webkit-slider-runnable-track,
html[data-theme='light'] .plyr__progress input[type=range]::-moz-range-track,
html[data-theme='light'] .plyr__progress input[type=range]::-ms-track,
html[data-theme='light'] .plyr--audio .plyr__volume input[type=range]::-webkit-slider-runnable-track,
html[data-theme='light'] .plyr--audio .plyr__volume input[type=range]::-moz-range-track,
html[data-theme='light'] .plyr--audio .plyr__volume input[type=range]::-ms-track { background: var(--plyr-track-background); }
html[data-theme='light'] .plyr__progress__buffer { color: var(--plyr-buffer-color); }
html[data-theme='light'] .plyr__progress__thumb { background: var(--text-primary); }
html[data-theme='light'] .loader { border-color: #e9ecef; border-top-color: var(--color-accent); }
html[data-theme='light'] .playlist li.playlist-message.error { color: #dc3545; }
html[data-theme='light'] .visualizer-container { background-color: var(--hover-bg); }

/* Põhiline lähtestus ja kerimisriba stiilid */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-primary); background-color: var(--main-bg); color: var(--text-primary); line-height: 1.6; display: flex; flex-direction: column; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 0.3s ease, color 0.3s ease; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--secondary-bg); border-radius: 5px; }
::-webkit-scrollbar-thumb { background-color: #555; border-radius: 5px; border: 2px solid var(--secondary-bg); }
::-webkit-scrollbar-thumb:hover { background-color: #777; }

.container { width: 90%; max-width: 1100px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; }
.top-bar { background-color: var(--color-top-bar); padding: 3px 0; flex-shrink: 0; }
.top-bar-container { height: 1px; }

.site-header { background-color: var(--header-bg); padding: 15px 0; box-shadow: none; flex-shrink: 0; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; transition: background-color 0.3s ease, border-color 0.3s ease; }
.header-container { display: flex; justify-content: space-between; align-items: center; position: relative; }
.logo-link { display: inline-flex; align-items: center; text-decoration: none; gap: 12px; transition: opacity 0.2s ease; }
.logo-link:hover { opacity: 0.85; }
.logo-img { height: 40px; width: auto; display: block; }
.logo-text { font-size: 1.5em; font-weight: 600; color: var(--logo-text); }
.user-actions { display: flex; align-items: center; gap: 15px; }
.welcome-user { color: var(--text-secondary); font-size: 0.9em; white-space: nowrap; }
.auth-link { color: var(--text-secondary); text-decoration: none; font-size: 0.9em; padding: 6px 12px; border-radius: var(--border-radius-base); transition: background-color 0.2s ease, color 0.2s ease; border: 1px solid transparent; white-space: nowrap; }
.auth-link:hover { color: var(--text-primary); background-color: var(--hover-bg); border-color: var(--border-light); }
.theme-toggle-btn { background: none; border: 1px solid var(--border-light); color: var(--text-secondary); border-radius: 50%; width: 38px; height: 38px; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: var(--transition-base); overflow: hidden; flex-shrink: 0; }
.theme-toggle-btn:hover { background-color: var(--hover-bg); color: var(--text-primary); border-color: var(--border-light); transform: scale(1.05) rotate(15deg); }
.theme-toggle-btn i { font-size: 1.2em; position: absolute; transition: opacity 0.3s ease, transform 0.3s ease; }
html[data-theme='dark'] .theme-toggle-btn .fa-sun { opacity: 1; transform: scale(1); }
html[data-theme='dark'] .theme-toggle-btn .fa-moon { opacity: 0; transform: scale(0.5); }
html[data-theme='light'] .theme-toggle-btn .fa-sun { opacity: 0; transform: scale(0.5); }
html[data-theme='light'] .theme-toggle-btn .fa-moon { opacity: 1; transform: scale(1); }

.main-content { padding-top: 70px; padding-bottom: 80px; position: relative; text-align: center; flex-grow: 1; }
.main-content::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 50px; background-color: var(--color-pattern-bar); background-image: radial-gradient(circle, var(--color-pattern-dot) 1px, transparent 1px); background-size: 6px 6px; transition: background-color 0.3s ease; }
.content-container { position: relative; z-index: 1; }

.music-player { background-color: var(--player-background); padding: 30px; border-radius: var(--border-radius-large); box-shadow: var(--shadow-md); max-width: 550px; margin: 0 auto 60px auto; text-align: left; border: 1px solid var(--player-border-color); transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; overflow: hidden; }
.music-player:hover { box-shadow: var(--shadow-md-hover); border-color: var(--border-light);  }
.music-player h2 { text-align: center; color: var(--text-primary); margin-top: 0; margin-bottom: 35px; font-weight: 700; font-size: 1.4em; }
.current-track { display: flex; align-items: center; gap: 20px; margin-bottom: 25px; }
#album-art { width: 85px; height: 85px; object-fit: cover; border-radius: var(--border-radius-base); background-color: var(--secondary-bg); flex-shrink: 0; border: 1px solid var(--border); transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 0 15px -5px var(--color-album-glow); }
#album-art:hover { transform: scale(1.05); box-shadow: 0 0 25px -3px var(--color-album-glow); }
.track-info { display: flex; flex-direction: column; min-width: 0; flex-grow: 1; }
#track-title, #track-artist, #track-album, #track-genre { margin-bottom: 2px; }
#track-title { font-size: 1.3em; font-weight: 600; color: var(--text-primary); }
#track-artist { font-size: 1em; color: var(--text-secondary); margin-bottom: 4px; }
#track-album { font-size: 0.9em; color: var(--text-secondary); opacity: 0.8; font-style: italic; }
#track-genre { font-size: 0.9em; color: var(--text-secondary); opacity: 0.7; }

.visualizer-container { width: 100%; height: 60px; margin-bottom: 25px; background-color: var(--hover-bg); border-radius: var(--border-radius-base); overflow: hidden; border: 1px solid var(--border); transition: border-color 0.3s ease, background-color 0.3s ease; }
#visualizer-canvas { display: block; width: 100%; height: 100%; }

.plyr--audio .plyr__controls { background: var(--plyr-controls-bg); border-radius: var(--border-radius-base); padding: 10px; border-top: 1px solid var(--border); color: var(--text-secondary); transition: background-color 0.3s ease, border-color 0.3s ease; }
.plyr--audio .plyr__control { transition: var(--transition-base); color: var(--text-secondary); background: transparent; border-radius: var(--border-radius-base); }
.plyr--audio .plyr__control svg { fill: currentColor; }
.plyr--audio .plyr__control.plyr__tab-focus, .plyr--audio .plyr__control:hover, .plyr--audio .plyr__control[aria-expanded=true] { background: var(--color-accent); color: var(--text-inverted); }
.plyr__control--overlaid { background: rgba(0, 0, 0, 0.6); color: #fff; box-shadow: var(--shadow-md); border-radius: 50%; }
.plyr__control--overlaid:hover { background: var(--color-accent); color: var(--text-inverted); }
.plyr__progress input[type=range] { height: 8px; color: var(--color-accent); }
.plyr__progress input[type=range]::-webkit-slider-runnable-track,
.plyr__progress input[type=range]::-moz-range-track,
.plyr__progress input[type=range]::-ms-track,
.plyr--audio .plyr__volume input[type=range]::-webkit-slider-runnable-track,
.plyr--audio .plyr__volume input[type=range]::-moz-range-track,
.plyr--audio .plyr__volume input[type=range]::-ms-track { background: var(--plyr-track-background); height: 8px; border-radius: 4px; }
.plyr__progress__buffer { color: var(--plyr-buffer-color); }
.plyr__progress__thumb { background: var(--text-primary); border-radius: 50%; width: 14px; height: 14px; margin-top: -3px; box-shadow: var(--shadow-sm); }
.plyr__progress input:active + .plyr__progress__thumb { box-shadow: 0 0 0 5px var(--color-accent-hover-bg); }
.plyr__time { color: var(--text-secondary); font-size: 0.9em; }
.plyr__volume .plyr__control--pressed.plyr__control--pressed, .plyr__volume .plyr__control:hover { background: var(--color-accent); color: var(--text-inverted); }
.plyr__menu__container { background: var(--secondary-bg); border: 1px solid var(--border-light); border-radius: var(--border-radius-base); box-shadow: var(--shadow-md); color: var(--text-primary); transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.plyr__menu__button { transition: var(--transition-base); }
.plyr__menu__button:hover { background: var(--hover-bg); }
.plyr__menu__button > span { color: var(--text-secondary); }
.plyr__menu__button[role=menuitemradio][aria-checked=true]::before { background: var(--color-accent); }

.playlist-controls { margin-top: 30px; margin-bottom: 15px; padding: 0 5px; }
.playlist-header { display: flex; justify-content: space-between; align-items: center; gap: 15px; flex-wrap: wrap; margin-bottom: 15px; }
.playlist-header h3 { margin: 0; color: var(--text-primary); font-weight: 600; font-size: 1.15em; }
.playlist-actions { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; padding: 10px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); transition: border-color 0.3s ease; margin-bottom: 15px; }
.sort-buttons, .filter-buttons { display: flex; align-items: center; gap: 8px; }
.sort-buttons span { font-size: 0.9em; color: var(--text-secondary); margin-right: 5px; }
.sort-btn, .filter-btn { background-color: var(--secondary-bg); color: var(--text-secondary); border: 1px solid var(--border-light); padding: 6px 12px; border-radius: var(--border-radius-base); font-size: 0.85em; cursor: pointer; transition: var(--transition-base); display: inline-flex; align-items: center; gap: 5px; }
.sort-btn i, .filter-btn i { font-size: 1em; }
.sort-btn:hover, .filter-btn:hover { background-color: var(--hover-bg); color: var(--text-primary); border-color: var(--border-light); }
.sort-btn.active, .filter-btn.active { background-color: var(--color-accent-active-bg); color: var(--color-accent); border-color: var(--color-accent); }
.filter-btn#filter-favorites-btn.active { color: var(--color-favorite); border-color: var(--color-favorite); background-color: var(--color-favorite-hover-bg); }
.filter-btn#filter-favorites-btn.active i { color: var(--color-favorite); }
.sort-btn:disabled { opacity: 0.5; cursor: not-allowed; background-color: var(--secondary-bg) !important; color: var(--text-secondary) !important; border-color: var(--border-light) !important; }
.sort-btn:disabled:hover { background-color: var(--secondary-bg) !important; }

.search-container { position: relative; display: flex; align-items: center; flex-grow: 1; max-width: 250px; }
.search-icon { position: absolute; left: 14px; color: var(--text-secondary); font-size: 0.9em; pointer-events: none; }
#search-input { padding: 10px 18px 10px 38px; border: 1px solid var(--border-light); border-radius: 25px; font-size: 0.9em; width: 100%; transition: var(--transition-base); background-color: var(--secondary-bg); color: var(--text-primary); }
#search-input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-hover-bg); outline: none; background-color: var(--hover-bg); }
#search-input::placeholder { color: var(--text-secondary); transition: opacity 0.2s ease; }
#search-input:focus::placeholder { opacity: 0.6; }
.player-addons { display: flex; gap: 12px; }
.addon-btn { background: none; border: 1px solid var(--border-light); border-radius: 50%; padding: 0; font-size: 1em; cursor: pointer; color: var(--text-secondary); transition: var(--transition-base); line-height: 1; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.addon-btn i.fas { font-size: 1.2em; line-height: 1; transition: transform 0.2s ease; }
.addon-btn:hover { color: var(--text-primary); background-color: var(--hover-bg); border-color: var(--border-light); transform: scale(1.08) rotate(5deg); }
.addon-btn:active { transform: scale(0.92); }
.addon-btn.active { color: var(--color-accent); border-color: var(--color-accent); background-color: var(--color-accent-active-bg); box-shadow: var(--shadow-accent-glow); }
.addon-btn.active:hover { background-color: var(--color-accent-hover-bg); transform: scale(1.08) rotate(5deg); color: var(--color-accent-darker); border-color: var(--color-accent-darker); }
.help-btn-player { margin-left: 5px; }
.help-btn-player i.fas { font-size: 1.3em; }

.playlist-loader { display: block; text-align: center; padding: 30px 0; }
.loader { border: 4px solid #4a4a4a; border-top: 4px solid var(--color-accent); border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; margin: 0 auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.playlist { list-style: none; padding: 8px 5px; margin: 0; max-height: 250px; overflow-y: auto; border: 1px solid var(--border-light); border-radius: var(--border-radius-base); background-color: var(--secondary-bg); transition: background-color 0.3s ease, border-color 0.3s ease; }
.playlist li { padding: 10px 15px 10px 20px; cursor: pointer; border-bottom: 1px solid var(--border); font-size: 0.98em; text-overflow: ellipsis; color: var(--text-primary); transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease, border-left-color 0.15s ease, border-bottom-color 0.3s ease; position: relative; border-left: 5px solid transparent; margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; --queue-position: ''; }
.playlist li:last-child { border-bottom: none; }
.playlist-item-info { flex-grow: 1; overflow: hidden; white-space: nowrap; }
.playlist-item-info span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.playlist li:hover { background-color: var(--hover-bg); padding-left: 25px; color: var(--color-accent); border-left-color: var(--border-light); }
.playlist li.active { background-color: var(--color-accent-active-bg); color: var(--color-accent); font-weight: 600; padding-left: 20px; border-left-color: var(--color-accent); }
.playlist li.active:hover { background-color: var(--color-accent-hover-bg); color: var(--color-accent-darker); }
.playlist li.playlist-message { padding: 15px 20px; color: var(--text-secondary); cursor: default; text-align: center; font-style: italic; border-left-color: transparent; display: block; }
.playlist li.playlist-message:hover { background-color: transparent; padding-left: 20px; color: var(--text-secondary); }
.playlist li.playlist-message.error { color: #ff7b7b; font-weight: 500; }

.content-section { padding: 60px 0; max-width: 100%; margin: 0; text-align: center; color: var(--text-primary); background-color: transparent; border: none; border-top: 1px solid var(--border); box-shadow: none; transition: border-color 0.3s ease; }
.music-player + .content-section { border-top: 1px solid var(--border); }
.content-section:last-of-type { margin-bottom: 40px; }
.content-section:hover {}
.content-section h2 { margin-top: 0; margin-bottom: 35px; color: var(--text-primary); font-weight: 700; font-size: 1.7em; }
.section-inner-container { width: 90%; max-width: 700px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; text-align: center; }

#contact p { margin-bottom: 15px; line-height: 1.8; color: var(--text-secondary); }
#contact strong { color: var(--text-primary); font-weight: 600; }
#contact a { color: var(--color-link); text-decoration: none; font-weight: 500; transition: color 0.2s ease; }
#contact a:hover { text-decoration: underline; color: var(--color-link-hover); }

/* UUS SEKTSIOON: Edetabeli tabeli stiilid */
.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    background-color: var(--secondary-bg);
    border-radius: var(--border-radius-base);
    overflow: hidden; /* Hoiab border-radius't */
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm); /* Lisatud kerge vari tabelile */
}
.leaderboard-table th, 
.leaderboard-table td {
    padding: 12px 15px; /* Suurendatud polsterdust */
    border-bottom: 1px solid var(--border);
    text-align: left;
    color: var(--text-secondary);
}
.leaderboard-table th {
    background-color: var(--hover-bg); /* Päise taust veidi erinev */
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9em; /* Väiksem fondisuurus päises */
    text-transform: uppercase; /* Suurtähed päises */
    letter-spacing: 0.5px; /* Väike tähevahe */
}
.leaderboard-table tr:last-child td {
    border-bottom: none;
}
.leaderboard-table tr:hover td { /* Kogu rea hover efekt */
    background-color: var(--hover-bg);
    color: var(--text-primary); /* Teksti värv muutub ka hoveril */
}
.leaderboard-table td.rank {
    font-weight: 700; /* Paksem rank */
    text-align: center;
    width: 60px; /* Laiem veerg */
    color: var(--color-accent);
    font-size: 1.1em; /* Suurem number */
}
.leaderboard-table td.username {
    font-weight: 500;
    color: var(--text-primary);
}
.leaderboard-table td.time {
    font-style: normal; /* Eemaldatud kursiivist */
    font-size: 0.95em;
}
.leaderboard-loading {
    padding: 25px; /* Suurem polsterdus */
    font-style: italic;
    color: var(--text-secondary);
    background-color: var(--secondary-bg); /* Taust laadimistekstile */
    border-radius: var(--border-radius-base);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
/* --- EDETABELI STIILID LÕPP --- */

.social-links { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 25px; }
.social-links a { color: var(--color-link); text-decoration: none; font-weight: 500; padding: 8px 0px; border: none; border-radius: 0; transition: var(--transition-base); display: inline-flex; align-items: center; gap: 8px; background-color: transparent; cursor: pointer; }
.social-links a:hover { color: var(--color-link-hover); text-decoration: underline; background-color: transparent; border-color: transparent; transform: translateY(-2px); box-shadow: none; }

.site-footer { background-color: var(--footer-bg); color: var(--text-secondary); text-align: center; padding: 25px 0; font-size: 0.9em; flex-shrink: 0; border-top: 1px solid var(--border); margin-top: auto; transition: background-color 0.3s ease, border-color 0.3s ease; }
.site-footer p { margin: 5px 0; }
.site-footer a { color: var(--color-link); text-decoration: none; font-weight: 600; transition: color 0.2s ease; }
.site-footer a:hover { text-decoration: underline; color: var(--color-link-hover); }
.footer-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 20px; }
.visitor-counter, .visitor-listening-time, .user-total-listening-time { color: var(--text-secondary); font-size: 0.85em; margin: 0; }
.user-total-listening-time a { font-weight: 500; }
#visitor-count-display, #session-listening-time-display, #overall-listening-time-display { font-weight: bold; color: var(--text-primary); min-width: 15px; display: inline-block; text-align: right; padding: 0 3px; }

.modal-overlay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: var(--modal-overlay-bg); display: none; justify-content: center; align-items: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.modal-overlay.visible { display: flex; opacity: 1; visibility: visible; }
.modal-content { background-color: var(--modal-bg); padding: 30px 40px; border-radius: var(--border-radius-large); border: 1px solid var(--border); box-shadow: var(--shadow-lg); max-width: 600px; width: 90%; max-height: 85vh; overflow-y: auto; position: relative; color: var(--text-primary); transform: scale(0.95); transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.modal-overlay.visible .modal-content { transform: scale(1); }
.modal-content h2 { color: var(--text-primary); margin-top: 0; margin-bottom: 20px; text-align: center; font-weight: 700; }
.modal-content p { color: var(--text-secondary); line-height: 1.7; margin-bottom: 15px; }
.modal-content ul { list-style: none; padding-left: 0; margin-bottom: 25px; }
.modal-content li { color: var(--text-primary); margin-bottom: 12px; padding-left: 20px; position: relative; }
.modal-content li::before { content: '•'; color: var(--color-accent); font-weight: bold; display: inline-block; width: 1em; margin-left: -1.5em; position: absolute; left: 10px; }
.modal-content ul ul { margin-top: 8px; margin-bottom: 8px; padding-left: 15px; }
.modal-content ul ul li { font-size: 0.95em; margin-bottom: 6px; color: var(--text-secondary); }
.modal-content ul ul li::before { content: '-'; color: var(--text-secondary); left: 5px; font-weight: normal; }
.modal-content strong { color: var(--text-primary); font-weight: 600; }
.modal-content i.fas, .modal-content i.far { color: var(--color-accent); margin: 0 2px; }
.modal-content li i.fa-heart { color: var(--color-favorite); }
.modal-content li i.fa-arrow-right-to-bracket { font-size: 0.9em; vertical-align: middle; }
.modal-content li .in-queue-example { display: inline-flex; align-items: center; justify-content: center; font-size: 0.7em; font-weight: bold; color: var(--text-inverted); background-color: var(--color-accent); border-radius: 3px; padding: 0px 4px; line-height: 1.2; min-width: 14px; text-align: center; margin: 0 2px; vertical-align: middle; }
.modal-close-btn { position: absolute; top: 10px; right: 15px; background: none; border: none; font-size: 2em; color: var(--text-secondary); cursor: pointer; line-height: 1; padding: 0; transition: color 0.2s ease, transform 0.2s ease; }
.modal-close-btn:hover { color: var(--text-primary); transform: scale(1.1); }
.modal-understand-btn { display: block; margin: 20px auto 0 auto; padding: 10px 25px; background-color: var(--modal-understand-btn-bg); color: var(--modal-understand-btn-text); border: none; border-radius: var(--border-radius-base); font-size: 1em; font-weight: 600; cursor: pointer; transition: var(--transition-base); }
.modal-understand-btn:hover { background-color: var(--modal-understand-btn-hover-bg); transform: translateY(-2px); box-shadow: var(--shadow-accent-drop-md); }

.playlist-item-buttons { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.addon-btn-small { background: none; border: 1px solid transparent; border-radius: 50%; padding: 0; font-size: 0.9em; cursor: pointer; color: var(--text-secondary); transition: var(--transition-base); line-height: 1; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.8); visibility: hidden; }
.playlist li:hover .addon-btn-small { opacity: 0.7; transform: scale(1); visibility: visible; }
.playlist li .addon-btn-small:hover { opacity: 1; color: var(--text-primary); background-color: var(--hover-bg); transform: scale(1.1); border-color: var(--border-light); }
.play-next-btn:hover { color: var(--color-accent) !important; }
.play-next-btn.in-queue-btn { color: var(--color-accent); opacity: 1; visibility: visible; transform: scale(1); border-color: var(--color-accent-hover-bg); }
.play-next-btn.in-queue-btn:hover { color: var(--color-accent-darker) !important; background-color: var(--color-accent-hover-bg); transform: scale(1.1); border-color: var(--color-accent); }
.favorite-btn.addon-btn-small:hover { color: var(--color-favorite) !important; }
.favorite-btn.addon-btn-small.favorited { color: var(--color-favorite); opacity: 1; visibility: visible; transform: scale(1); }
.favorite-btn.addon-btn-small.favorited:hover { color: #ff8f8f !important; background-color: var(--color-favorite-hover-bg); border-color: rgba(255, 107, 107, 0.3); }
.playlist li.in-queue { border-left-color: var(--color-accent); }
.playlist li.active.in-queue { border-left-color: var(--color-accent-darker); }
.playlist li.in-queue::before { content: var(--queue-position); position: absolute; left: 6px; top: 50%; transform: translateY(-50%); font-size: 0.7em; font-weight: bold; color: var(--text-inverted); background-color: var(--color-accent); border-radius: 3px; padding: 1px 4px; line-height: 1.2; z-index: 1; min-width: 16px; text-align: center; box-shadow: var(--shadow-sm); }

.temporary-message { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px); background-color: var(--secondary-bg); color: var(--text-primary); padding: 10px 20px; border-radius: var(--border-radius-base); border: 1px solid var(--border-light); box-shadow: var(--shadow-md); font-size: 0.9em; z-index: 1001; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; pointer-events: none; white-space: nowrap; }
.temporary-message:hover { box-shadow: var(--shadow-md-hover); }

@media (max-width: 768px) {
    .header-container {}
    .user-actions { order: 1; margin-left: 10px; margin-right: auto; padding-right: 0; flex-grow: 1; justify-content: flex-start; }
    .theme-toggle-btn { order: 2; }
    .logo-link { order: 0; }
    .logo-img { height: 35px; } .logo-text { font-size: 1.3em; }
    .main-content { padding-top: 50px; padding-bottom: 60px; } .main-content::before { height: 40px; background-size: 5px 5px; }
    .music-player { padding: 25px; max-width: 90%; margin-bottom: 40px; }
    #album-art { width: 70px; height: 70px; } #track-title { font-size: 1.2em; }
    .playlist-header { justify-content: center; }
    .search-container { max-width: none; width: 100%; order: -1; margin-bottom: 15px;}
    .player-addons { order: 1; }
    .playlist-actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .sort-buttons, .filter-buttons { justify-content: center; }
    .content-section { padding: 40px 0; }
    .content-section:last-of-type { margin-bottom: 30px; }
    .content-section h2 { font-size: 1.5em; margin-bottom: 25px; }
    .section-inner-container { max-width: 90%; }
    .social-links a { padding: 6px 0px; }
    .plyr--audio .plyr__controls { padding: 8px; }
    .visualizer-container { height: 50px; margin-bottom: 20px;}
    .modal-content { padding: 25px 20px; } .modal-content h2 { font-size: 1.3em; } .modal-close-btn { top: 8px; right: 10px; font-size: 1.8em; }
    .playlist { max-height: 220px; }
    .footer-container { justify-content: center; text-align: center; }
}
@media (max-width: 480px) {
    .user-actions { font-size: 0.8em; gap: 8px; flex-direction: column; align-items: flex-start; margin-left: 10px; }
    .auth-link { padding: 4px 8px; }
    .theme-toggle-btn { width: 34px; height: 34px; }
    .logo-link { gap: 10px; } .logo-img { height: 30px; } .logo-text { font-size: 1.1em; }
    .main-content { padding-top: 40px; padding-bottom: 50px; } .main-content::before { height: 30px; background-size: 5px 5px; }
    .music-player { padding: 20px; margin-bottom: 30px; border-radius: var(--border-radius-base); }
    .current-track { flex-direction: column; text-align: center; gap: 15px;}
    #album-art { width: 90px; height: 90px; } #track-title { font-size: 1.15em; } #track-artist { font-size: 0.95em; } #track-album { font-size: 0.85em; }
    .playlist { max-height: 200px; padding: 5px 2px; }
    .playlist li { padding: 10px 10px 10px 15px; margin: 0; border-left-width: 4px; gap: 5px; }
    .playlist li:hover { padding-left: 18px; }
    .addon-btn { width: 38px; height: 38px; }
    .addon-btn i.fas { font-size: 1.1em; }
    .player-addons { gap: 8px; }
    .sort-btn, .filter-btn { padding: 5px 10px; font-size: 0.8em; }
    .content-section { padding: 30px 0; }
    .content-section:last-of-type { margin-bottom: 25px; }
    .content-section h2 { font-size: 1.3em; margin-bottom: 20px; }
    .social-links { gap: 20px; }
    .social-links a { font-size: 0.95em; }
    .site-footer { padding: 20px 0; }
    .plyr--audio .plyr__controls { flex-wrap: wrap; justify-content: center; }
    .plyr__progress__container { order: -1; width: 100%; margin-bottom: 8px; }
    .plyr__time { font-size: 0.85em; }
    .visualizer-container { height: 40px; margin-bottom: 15px;}
    .modal-content { padding: 20px 15px; width: 95%; } .modal-content h2 { font-size: 1.2em; } .modal-content li { padding-left: 15px; } .modal-content li::before { left: 5px; } .modal-content ul ul { padding-left: 10px; } .modal-content ul ul li::before { left: 2px; } .modal-understand-btn { font-size: 0.95em; padding: 8px 20px; }
    .playlist-item-buttons { gap: 5px; }
    .addon-btn-small { width: 26px; height: 26px; font-size: 0.8em;}
    .footer-container { gap: 5px 15px; }
}

.marquee-container { display: block; width: 100%; overflow: hidden; white-space: nowrap; vertical-align: top; }
.marquee-text { display: inline-block; padding-right: 3em; animation: marquee 15s linear infinite; animation-play-state: paused; will-change: transform; white-space: nowrap; }
.marquee-active .marquee-text { animation-play-state: running; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

/* ------ UUED STIILID AKTIIVSUSKONTROLLI MODAALAKNALE ------ */
#activity-check-modal .modal-content p {
    text-align: center; /* Veendu, et tekstid on keskel */
}

#activity-check-modal #activity-timer-message {
    font-size: 1.1em; /* Muudame taimeri teate natuke suuremaks */
    color: var(--text-primary); /* Kasutame esmast tekstivärvi */
    margin-bottom: 10px; /* Väiksem vahe järgmise tekstiga */
}

#activity-check-modal #activity-countdown {
    font-weight: bold;
    color: var(--color-accent); /* Aktsentvärviga sekundid */
}

#activity-check-modal #activity-confirm-btn {
    margin-top: 25px; /* Suurem vahe nupul */
}
/* ------ UUED STIILID LÕPPEVAD ------ */