@font-face{font-family: 'Alexandria';font-style: normal;font-weight: 100;font-display: swap;src: url('../fonts/alexandria-100.ttf') format('truetype')}@font-face{font-family: 'Alexandria';font-style: normal;font-weight: 200;font-display: swap;src: url('../fonts/alexandria-200.ttf') format('truetype')}@font-face{font-family: 'Alexandria';font-style: normal;font-weight: 300;font-display: swap;src: url('../fonts/alexandria-300.ttf') format('truetype')}@font-face{font-family: 'Alexandria';font-style: normal;font-weight: 400;font-display: swap;src: url('../fonts/alexandria-400.ttf') format('truetype')}@font-face{font-family: 'Alexandria';font-style: normal;font-weight: 500;font-display: swap;src: url('../fonts/alexandria-500.ttf') format('truetype')}@font-face{font-family: 'Alexandria';font-style: normal;font-weight: 600;font-display: swap;src: url('../fonts/alexandria-600.ttf') format('truetype')}@font-face{font-family: 'Alexandria';font-style: normal;font-weight: 700;font-display: swap;src: url('../fonts/alexandria-700.ttf') format('truetype')}@font-face{font-family: 'Alexandria';font-style: normal;font-weight: 800;font-display: swap;src: url('../fonts/alexandria-800.ttf') format('truetype')}@font-face{font-family: 'Alexandria';font-style: normal;font-weight: 900;font-display: swap;src: url('../fonts/alexandria-900.ttf') format('truetype')}:root{--blue: #2950aa;--blue-light: #3a6fd8;--blue-dark: #1e3d7a;--blue-glow: rgba(41,80,170,0.25);--blue-muted: rgba(41,80,170,0.08);--black: #000000;--white: #ffffff;--bg-primary: #ffffff;--bg-secondary: #f4f6fa;--bg: var(--bg-secondary);--bg-card: rgba(255,255,255,0.95);--bg-glass: rgba(255,255,255,0.7);--text-primary: #1a1a2e;--text-secondary: #122044;--text-muted: #122044;--border-color: rgba(0,0,0,0.08);--border-glow: rgba(41,80,170,0.3);--shadow-sm: 0 2px 8px rgba(0,0,0,0.06);--shadow-md: 0 8px 32px rgba(0,0,0,0.08);--shadow-lg: 0 16px 48px rgba(0,0,0,0.1);--shadow-glow: 0 0 30px rgba(41,80,170,0.12);--radius-sm: 50px;--radius-md: 50px;--radius-lg: 20px;--radius-xl: 20px;--radius-full: 50px;--transition-fast: 0.12s cubic-bezier(0.4,0,0.2,1);--transition-smooth: 0.2s cubic-bezier(0.4,0,0.2,1);--transition-spring: 0.25s cubic-bezier(0.34,1.56,0.64,1);--font: 'Alexandria',sans-serif;--header-height: 72px;--container-max: 1600px;--sidebar-bg: #ffffff;--sidebar-border: rgba(0,0,0,0.06);--topbar-bg: rgba(255,255,255,0.92)}[data-theme="dark"]{--bg-primary: #0f1014;--bg-secondary: #16171b;--bg: var(--bg-secondary);--bg-card: #1e1f24;--bg-glass: rgba(15,16,20,0.75);--text-primary: #f8fafc;--text-secondary: #ffffff;--text-muted: #ffffff;--border-color: rgba(255,255,255,0.08);--blue-glow: rgba(59,130,246,0.3);--blue-muted: rgba(59,130,246,0.1);--shadow-sm: 0 2px 8px rgba(0,0,0,0.4);--shadow-md: 0 8px 32px rgba(0,0,0,0.5);--shadow-lg: 0 16px 48px rgba(0,0,0,0.7);--border-glow: rgba(59,130,246,0.4);--sidebar-bg: #121317;--sidebar-border: rgba(255,255,255,0.06);--topbar-bg: rgba(15,16,20,0.85);color-scheme: dark}[data-theme="dark"] .sidebar{background: var(--sidebar-bg);border-color: var(--sidebar-border)}[data-theme="dark"] .content-topbar{background: var(--topbar-bg);border-color: var(--sidebar-border)}[data-theme="dark"] .mobile-topbar{background: var(--topbar-bg);border-color: var(--sidebar-border)}[data-theme="dark"] .sidebar-tile{background: #1a1b21;border-color: rgba(255,255,255,0.05)}[data-theme="dark"] .topbar-search-input{background: #1a1b21;border-color: rgba(255,255,255,0.1)}[data-theme="dark"] .search-dropdown{background: #1a1b21;border-color: rgba(255,255,255,0.1)}[data-theme="dark"] .station-card{background: #1a1b21;border-color: rgba(255,255,255,0.04)}[data-theme="dark"] .floating-player{background: rgba(22,23,27,0.95);border-color: rgba(255,255,255,0.08)}[data-theme="dark"] .hero-overlay{background: linear-gradient(180deg,rgba(15,16,20,0.3) 0%,rgba(15,16,20,0.95) 100%)}[data-theme="dark"] .legal-nav-card{background: #1a1b21;border-color: rgba(255,255,255,0.08)}[data-theme="dark"] .legal-nav-item:hover{background: #121317}[data-theme="dark"] .legal-updated{background: #121317}[data-theme="dark"] .info-card-icon{background: var(--blue-muted)}[data-theme="dark"] .notif-dropdown{background: #1a1b21;border-color: rgba(255,255,255,0.1)}[data-theme="dark"] .notif-item{border-color: rgba(255,255,255,0.05)}[data-theme="dark"] .notif-item:hover{background: rgba(255,255,255,0.03)}[data-theme="dark"] .notif-detail-modal{background: #1a1b21;border-color: rgba(255,255,255,0.1)}[data-theme="dark"] .notif-detail-hero{background: linear-gradient(135deg,#1e1f24 0%,#16171b 100%);border-bottom-color: rgba(255,255,255,0.08)}[data-theme="dark"] .notif-detail-short{border-bottom-color: rgba(255,255,255,0.08)}[data-theme="dark"] .notif-item-logo img,[data-theme="dark"] .notif-item-icon-only{border-color: rgba(255,255,255,0.1)}[data-theme="dark"] .notif-item-flag-badge,[data-theme="dark"] .notif-detail-flag-badge,[data-theme="dark"] .notif-detail-icon-badge{border-color: #1a1b21;background: #2a2b31}[data-theme="dark"] .legal-info-table{background: #1a1b21}[data-theme="dark"] .info-row{border-color: rgba(255,255,255,0.05)}[data-theme="dark"] .legal-audio-disclaimer{background: #1a1b21;border-left-color: var(--blue-light)}[data-theme="dark"] .legal-feature-item{background: #1a1b21;border-color: rgba(255,255,255,0.06)}[data-theme="dark"] .feature-icon{background: #121317}[data-theme="dark"] .legal-header-minimal{background: var(--bg-primary)}[data-theme="dark"] .section-legal-main{background: var(--bg-primary)}[data-theme="dark"] .topbar-search-input:focus{background: #1f2027;border-color: var(--blue-light);box-shadow: 0 0 0 4px rgba(58,111,216,0.15)}[data-theme="dark"] .topbar-search-input:focus ~ .topbar-search-icon,[data-theme="dark"] .topbar-search:focus-within .topbar-search-icon{color: var(--blue-light)}body{transition: background-color 0.15s ease,color 0.15s ease}.sidebar,.content-topbar,.station-card,.floating-player,.auth-modal,.sidebar-tile,.notif-dropdown,.notif-detail-modal{transition: background-color 0.15s ease,border-color 0.15s ease,box-shadow 0.15s ease}*,*::before,*::after{margin: 0;padding: 0;box-sizing: border-box}html{scroll-behavior: smooth;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-size: 16px;-webkit-text-size-adjust: 100%;text-size-adjust: 100%}body{font-family: var(--font);background: var(--bg-secondary);color: var(--text-primary);line-height: 1.6;overflow-x: hidden;min-height: 100vh}a{text-decoration: none;color: inherit;transition: color var(--transition-fast)}ul{list-style: none}img{max-width: 100%;display: block;height: auto}button{cursor: pointer;border: none;background: none;font-family: var(--font);color: inherit}input,textarea{font-family: var(--font);border: none;outline: none}.container{max-width: var(--container-max);margin: 0 auto;padding: 0 24px}.text-gradient{background: linear-gradient(135deg,var(--blue-light),var(--blue),#6c63ff);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text}.glass-card{background: var(--bg-glass);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);border: 1px solid var(--border-color);border-radius: var(--radius-lg)}.fade-in{transform: translateY(16px);transition: transform 0.35s ease-out;will-change: transform}.fade-in.visible{transform: translateY(0)}@keyframes pulse{0%,100%{transform: scale(1);opacity: 0.5}50%{transform: scale(1.08);opacity: 0.8}}.pjax-loader{position: fixed;top: 0;left: 0;height: 3px;background: linear-gradient(to right,var(--blue-light),#6c63ff);z-index: 9999;transition: width 0.3s ease-out,opacity 0.15s ease;box-shadow: 0 0 10px var(--blue-glow);pointer-events: none;width: 0;opacity: 0}.pjax-loader.loading{opacity: 1;width: 80%}.pjax-loader.complete{width: 100%;opacity: 0}#pjax-container{transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);transform: translateY(0)}#pjax-container.pjax-fading{transform: translateY(15px)}@keyframes float{0%,100%{transform: translateY(0)}50%{transform: translateY(-8px)}}@keyframes shimmer{0%{background-position: -200% 0}100%{background-position: 200% 0}}@keyframes barAnim{0%,100%{height: 8px}50%{height: var(--bar-height,40px)}}.logo{display: flex;align-items: center;gap: 10px;font-size: 1.4rem;font-weight: 700;text-decoration: none}.logo-icon{font-size: 32px;color: var(--blue);filter: drop-shadow(0 0 8px var(--blue-glow))}.logo-text{color: var(--text-primary)}.logo-highlight{color: var(--blue)}.hero{position: relative;min-height: 70vh;display: flex;align-items: center;justify-content: center;padding: 20px 24px 40px;overflow: hidden}.hero-bg{position: absolute;inset: 0;background: radial-gradient(ellipse at 20% 50%,rgba(41,80,170,0.08) 0%,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(108,99,255,0.05) 0%,transparent 50%),radial-gradient(ellipse at 50% 80%,rgba(41,80,170,0.04) 0%,transparent 50%);animation: float 8s ease-in-out infinite}.hero-overlay{position: absolute;inset: 0;background: linear-gradient(180deg,rgba(255,255,255,0.3) 0%,rgba(255,255,255,0.85) 100%)}.hero-container{position: relative;z-index: 2;display: grid;grid-template-columns: 1fr 1fr;gap: 30px;align-items: center;width: 100%;max-width: 1400px}.hero-content{text-align: left}.hero-badge{display: inline-flex;align-items: center;gap: 8px;padding: 8px 20px;border-radius: var(--radius-full);background: var(--blue-muted);border: 1px solid var(--border-glow);color: var(--blue-light);font-size: 0.85rem;font-weight: 600;margin-bottom: 28px;animation: pulse 2.5s ease-in-out infinite}.hero-badge .material-icons{font-size: 16px}.hero-title{font-size: clamp(2.4rem,6vw,4rem);font-weight: 800;line-height: 1.15;margin-bottom: 20px;letter-spacing: -0.02em}.hero-subtitle{font-size: 1.1rem;color: var(--text-secondary);max-width: 520px;margin: 0 0 36px 0;line-height: 1.7}.hero-actions{display: flex;align-items: center;justify-content: flex-start;gap: 16px;flex-wrap: wrap;margin-bottom: 56px}.hero-stats{display: flex;justify-content: flex-start;gap: 48px}.stat-item{text-align: center}.stat-number{display: block;font-size: 2rem;font-weight: 800;color: var(--blue-light)}.stat-label{font-size: 0.85rem;color: var(--text-muted);text-transform: uppercase;letter-spacing: 0.05em}.hero-visual{position: relative;display: flex;justify-content: center;align-items: center}.hero-image-wrapper{position: relative;width: 100%;max-width: 480px;aspect-ratio: 4/5;border-radius: var(--radius-xl);padding: 12px}.hero-main-image{width: 100%;height: 100%;object-fit: cover;border-radius: calc(var(--radius-xl) - 8px);box-shadow: var(--shadow-md)}.hero-floating-element{position: absolute;display: flex;align-items: center;gap: 12px;padding: 12px 20px;border-radius: var(--radius-lg);animation: float 6s ease-in-out infinite;z-index: 3;background: var(--bg-card);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);border: 1px solid var(--border-color)}.card-1{top: 40px;left: -30px;animation-delay: 0.1s;box-shadow: var(--shadow-md)}.card-2{bottom: 60px;right: -30px;animation-delay: 0.3s;box-shadow: var(--shadow-md)}.floating-icon{width: 40px;height: 40px;border-radius: 50%;background: var(--blue-light);color: var(--white);display: flex;align-items: center;justify-content: center}.floating-icon .material-icons{font-size: 20px}.floating-text{display: flex;flex-direction: column}.floating-text strong{font-size: 0.9rem;font-weight: 700;color: var(--text-primary)}.floating-text span{font-size: 0.75rem;color: var(--text-secondary)}@media (max-width: 992px){.hero-container{grid-template-columns: 1fr;text-align: center;gap: 60px}.hero-content{text-align: center}.hero-subtitle{margin: 0 auto 36px auto}.hero-actions{justify-content: center}.hero-stats{display: grid !important;grid-template-columns: repeat(3,1fr) !important;justify-content: center !important;gap: 15px;width: 100%;max-width: 500px;margin: 0 auto}.stat-number{font-size: 1.5rem}.stat-label{font-size: 0.75rem}.card-1{left: 10px;top: 20px;padding: 8px 14px}.card-2{right: 10px;bottom: 40px;padding: 8px 14px}.hero-floating-element{gap: 8px}.floating-icon{width: 32px;height: 32px}.floating-icon .material-icons{font-size: 16px}.floating-text strong{font-size: 0.75rem}.floating-text span{font-size: 0.65rem}}@media (max-width: 600px){.hero{padding: 24px 16px 30px}.hero-title{font-size: clamp(1.48rem,6.5vw,1.88rem);line-height: 1.22;margin-bottom: 14px}.hero-title-main{white-space: nowrap;display: inline-block}.hero-subtitle{font-size: 0.92rem;line-height: 1.55;margin: 0 auto 24px auto;max-width: 94%}.section-title{font-size: 1.45rem;line-height: 1.25}.section-subtitle{font-size: 0.88rem;line-height: 1.5}.hero-actions{justify-content: center;gap: 12px;margin-bottom: 40px}.btn{padding: 12px 20px;font-size: 0.85rem}.hero-stats{display: flex !important;flex-direction: row !important;gap: 15px;justify-content: center !important;flex-wrap: nowrap}.stat-number{font-size: 1.25rem}.hero-image-wrapper{max-width: 320px}}.hero-visualizer{position: absolute;bottom: 0;left: 0;right: 0;display: flex;align-items: flex-end;justify-content: center;gap: 6px;height: 80px;padding-bottom: 20px;z-index: 1;opacity: 0.25}.visualizer-bar{width: 4px;height: 8px;background: var(--blue-light);border-radius: 8px;animation: barAnim 1.2s ease-in-out infinite}.visualizer-bar:nth-child(1){--bar-height: 24px;animation-delay: 0s}.visualizer-bar:nth-child(2){--bar-height: 40px;animation-delay: 0.1s}.visualizer-bar:nth-child(3){--bar-height: 30px;animation-delay: 0.2s}.visualizer-bar:nth-child(4){--bar-height: 52px;animation-delay: 0.3s}.visualizer-bar:nth-child(5){--bar-height: 36px;animation-delay: 0.4s}.visualizer-bar:nth-child(6){--bar-height: 60px;animation-delay: 0.15s}.visualizer-bar:nth-child(7){--bar-height: 44px;animation-delay: 0.25s}.visualizer-bar:nth-child(8){--bar-height: 28px;animation-delay: 0.35s}.visualizer-bar:nth-child(9){--bar-height: 48px;animation-delay: 0.05s}.visualizer-bar:nth-child(10){--bar-height: 32px;animation-delay: 0.45s}.visualizer-bar:nth-child(11){--bar-height: 20px;animation-delay: 0.5s}.visualizer-bar:nth-child(12){--bar-height: 38px;animation-delay: 0.55s}.btn{display: inline-flex;align-items: center;gap: 8px;padding: 14px 28px;border-radius: var(--radius-full);font-size: 0.95rem;font-weight: 600;transition: all var(--transition-smooth);cursor: pointer;border: none;white-space: nowrap}.btn .material-icons{font-size: 20px}.btn-primary{background: var(--blue);color: var(--white)}.btn-primary:hover{transform: translateY(-2px);background: var(--blue-light)}.btn-glow{position: relative;overflow: hidden}.btn-glow::after{display: none}.btn-outline{background: transparent;color: var(--text-primary);border: 1px solid var(--border-color)}.btn-outline:hover{background: var(--blue-muted);border-color: var(--border-glow);transform: translateY(-2px)}.btn-full{width: 100%;justify-content: center}.section{padding: 80px 0;position: relative}.section-dark{background: var(--bg-secondary)}.section-header{text-align: left;margin-bottom: 48px;display: flex;flex-direction: column;gap: 8px;align-items: flex-start}.section-tag{display: inline-flex;align-items: center;gap: 6px;padding: 6px 16px;border-radius: var(--radius-full);background: var(--blue-muted);color: var(--blue-light);font-size: 0.8rem;font-weight: 600;text-transform: uppercase;letter-spacing: 0.06em;margin-bottom: 16px}.section-tag .material-icons{font-size: 16px}.section-title{font-size: clamp(1.8rem,4vw,2.6rem);font-weight: 800;margin-bottom: 0px;letter-spacing: -0.02em}.section-subtitle{font-size: 1.05rem;color: var(--text-secondary);max-width: 520px;margin: 0}.section-footer{text-align: center;margin-top: 48px}.stations-grid{display: grid;grid-template-columns: repeat(auto-fill,minmax(260px,1fr));gap: 24px}.stations-grid-full{grid-template-columns: repeat(auto-fill,minmax(240px,1fr))}.station-card{background: var(--bg-primary);border: 1px solid rgba(0,0,0,0.04);border-radius: 20px;padding: 12px;transition: all var(--transition-smooth);position: relative;box-shadow: 0 4px 20px rgba(0,0,0,0.03);display: flex;flex-direction: column;min-width: 0;contain: layout style}.station-card:hover{transform: translateY(-6px);border-color: rgba(0,0,0,0.08);box-shadow: 0 16px 32px rgba(0,0,0,0.06)}.station-card-image{width: 100%;aspect-ratio: 1;position: relative;overflow: hidden;border-radius: 16px;background: var(--bg-secondary)}.station-card-image img{width: 100%;height: 100%;object-fit: cover;transition: transform var(--transition-smooth);display: block}.station-card:hover .station-card-image img{transform: scale(1.08)}.station-card-overlay{position: absolute;inset: 0;background: rgba(0,0,0,0.2);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);display: flex;align-items: center;justify-content: center;opacity: 0;transition: all var(--transition-fast)}.station-card:hover .station-card-overlay{opacity: 1}.station-play-btn{width: 56px;height: 56px;border-radius: 50%;background: var(--blue);color: var(--white);display: flex;align-items: center;justify-content: center;box-shadow: 0 8px 24px rgba(41,80,170,0.4);transition: all var(--transition-spring);transform: scale(0.8);border: none;cursor: pointer}.station-play-btn .material-icons{font-size: 32px}.station-card:hover .station-play-btn{transform: scale(1)}.station-play-btn:hover{background: var(--blue-light);transform: scale(1.1) !important}.station-card-body{padding: 12px 4px 4px 4px;min-width: 0}.station-card-name{font-size: 1.1rem;font-weight: 700;color: var(--text-primary);margin-bottom: 2px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100%;cursor: default;user-select: text}.station-card-desc{font-size: 0.95rem;color: var(--text-muted);margin-bottom: 8px;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;line-height: 1.4}.station-card-category{font-size: 0.95rem;color: var(--text-secondary);display: flex;align-items: center;gap: 4px;font-weight: 500}.station-card-category .material-icons{font-size: 16px;color: var(--text-muted)}.station-card.playing{border-color: var(--blue-glow);box-shadow: 0 10px 30px var(--blue-glow)}.station-card.playing .station-card-overlay{opacity: 1;background: rgba(0,0,0,0.4)}.station-card.playing .station-play-btn{background: var(--blue);animation: pulse 2s ease-in-out infinite;transform: scale(1)}.station-card-flag-badge{position: absolute;top: 8px;right: 8px;z-index: 2;display: flex;align-items: center;justify-content: center;width: 24px;height: 24px;border-radius: 50%;background: rgba(255,255,255,0.95);box-shadow: 0 2px 6px rgba(0,0,0,0.18);overflow: hidden;border: 2px solid rgba(255,255,255,0.8);transition: transform var(--transition-fast),box-shadow var(--transition-fast)}.station-card:hover .station-card-flag-badge{transform: scale(1.1);box-shadow: 0 4px 12px rgba(0,0,0,0.22)}.station-card-flag-img{width: 100%;height: 100%;object-fit: cover;display: block;border-radius: 50%}.station-card-flag-emoji{font-size: 1.1rem;line-height: 1}.station-play-count-badge{display: none !important;position: absolute;bottom: 8px;left: 8px;z-index: 2;display: inline-flex;align-items: center;gap: 3px;padding: 3px 8px;border-radius: 20px;background: linear-gradient(135deg,rgba(230,81,0,0.9),rgba(255,152,0,0.85));color: #fff;font-size: 0.72rem;font-weight: 700;letter-spacing: 0.02em;backdrop-filter: blur(4px);box-shadow: 0 2px 8px rgba(230,81,0,0.4);pointer-events: none;transition: opacity var(--transition-fast)}.station-card-desc{font-size: 0.8rem;color: var(--text-secondary);margin-bottom: 10px;line-height: 1.4;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;cursor: default;user-select: text}.station-card-meta{display: flex;align-items: center;justify-content: space-between;margin-top: auto;gap: 8px}.station-card-category{font-size: 0.78rem;color: var(--text-secondary);display: inline-flex;align-items: center;cursor: default;gap: 4px;font-weight: 500;padding: 4px 8px;background: var(--bg-secondary);border-radius: 10px;white-space: nowrap}.station-card-category .material-icons{font-size: 14px;color: var(--text-muted)}.station-card-country-name{font-size: 0.75rem;color: var(--text-muted);font-weight: 500;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 80px}.categories-grid{display: grid;grid-template-columns: repeat(auto-fill,minmax(200px,1fr));gap: 20px}.categories-grid-full{grid-template-columns: repeat(auto-fill,minmax(260px,1fr))}.category-card{position: relative;border-radius: var(--radius-lg);overflow: hidden;min-height: 180px;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;padding: 32px 20px;cursor: pointer;transition: all var(--transition-smooth);border: 1px solid var(--border-color)}.category-card::before{content: '';position: absolute;inset: 0;background: var(--cat-gradient,linear-gradient(135deg,var(--blue-dark),var(--bg-secondary)));opacity: 0.9;transition: opacity var(--transition-smooth)}.category-card:hover{transform: translateY(-6px);box-shadow: var(--shadow-lg);border-color: rgba(255,255,255,0.1)}.category-card:hover::before{opacity: 1}.category-card-icon{position: relative;z-index: 1;width: 56px;height: 56px;border-radius: var(--radius-md);background: rgba(255,255,255,0.12);display: flex;align-items: center;justify-content: center;margin-bottom: 14px;transition: transform var(--transition-spring)}.category-card:hover .category-card-icon{transform: scale(1.1)}.category-card-icon .material-icons{font-size: 28px;color: var(--white)}.category-card-name{position: relative;z-index: 1;font-size: 1.05rem;font-weight: 700;color: var(--white);margin-bottom: 4px}.category-card-count{position: relative;z-index: 1;font-size: 0.82rem;color: rgba(255,255,255,0.65)}.page-header{position: relative;padding: 60px 0 50px;text-align: center;overflow: hidden}.page-header-bg{position: absolute;inset: 0;background: radial-gradient(ellipse at 50% 0%,rgba(41,80,170,0.1) 0%,transparent 60%),var(--bg-primary)}.page-header-content{position: relative;z-index: 1}.page-title{font-size: clamp(2rem,5vw,3rem);font-weight: 800;margin-bottom: 12px;letter-spacing: -0.02em}.page-subtitle{font-size: 1.05rem;color: var(--text-secondary);max-width: 520px;margin: 0 auto}.filter-bar{padding: 20px 24px;display: flex;flex-direction: column;gap: 16px}.search-box{display: flex;align-items: center;gap: 12px;padding: 12px 20px;border-radius: var(--radius-full);background: rgba(0,0,0,0.03);border: 1px solid var(--border-color);transition: border-color var(--transition-fast)}.search-box:focus-within{border-color: var(--blue);box-shadow: 0 0 0 3px var(--blue-muted)}.search-box .material-icons{color: var(--text-muted);font-size: 20px}.search-input{flex: 1;background: transparent;color: var(--text-primary);font-size: 0.95rem}.search-input::placeholder{color: var(--text-muted)}.filter-chips{display: flex;gap: 8px;flex-wrap: wrap}.chip{padding: 8px 18px;border-radius: 8px;font-size: 0.85rem;font-weight: 500;color: var(--text-secondary);background: rgba(0,0,0,0.03);border: 1px solid var(--border-color);transition: all var(--transition-fast);cursor: pointer;display: flex;align-items: center;gap: 6px}.chip .material-icons{font-size: 16px}.chip:hover{color: var(--text-primary);background: var(--blue-muted);border-color: var(--border-glow)}.chip-active{color: var(--white);background: var(--blue);border-color: var(--blue);box-shadow: 0 0 12px var(--blue-glow)}.chip-active:hover{background: var(--blue-light)}.stations-count{display: flex;align-items: center;gap: 8px;margin-bottom: 24px;color: var(--text-muted);font-size: 0.9rem}.stations-count .material-icons{font-size: 18px;color: var(--blue-light)}.no-results{text-align: center;padding: 80px 20px}.no-results-icon{font-size: 64px;color: var(--text-muted);margin-bottom: 16px}.no-results h3{font-size: 1.3rem;margin-bottom: 8px}.no-results p{color: var(--text-secondary)}.contact-layout{display: grid;grid-template-columns: 1fr 1.4fr;gap: 32px;align-items: start}.contact-info{display: grid;gap: 16px}.info-card{padding: 24px;border-radius: var(--radius-md);display: flex;align-items: center;gap: 16px;transition: all var(--transition-smooth)}.info-card:hover{border-color: var(--border-glow);transform: translateX(4px)}.info-card-icon{width: 48px;height: 48px;border-radius: var(--radius-sm);background: var(--blue-muted);display: flex;align-items: center;justify-content: center;flex-shrink: 0}.info-card-icon .material-icons{font-size: 22px;color: var(--blue-light)}.info-card h3{font-size: 0.95rem;font-weight: 600;margin-bottom: 2px}.info-card p{font-size: 0.85rem;color: var(--text-secondary)}.contact-form-wrapper{padding: 36px}.form-title{font-size: 1.5rem;font-weight: 700;margin-bottom: 8px}.form-subtitle{color: var(--text-secondary);font-size: 0.92rem;margin-bottom: 32px}.contact-form{display: flex;flex-direction: column;gap: 24px}.form-group{position: relative}.form-label{display: flex;align-items: center;gap: 6px;font-size: 0.88rem;font-weight: 500;color: var(--text-secondary);margin-bottom: 8px}.form-label .material-icons{font-size: 18px;color: var(--blue-light)}.form-input{width: 100%;padding: 14px 18px;border-radius: var(--radius-md);background: rgba(0,0,0,0.03);border: 1px solid var(--border-color);color: var(--text-primary);font-size: 0.95rem;transition: all var(--transition-fast)}.form-input::placeholder{color: var(--text-muted)}.form-input:focus{border-color: var(--blue);box-shadow: 0 0 0 3px var(--blue-muted);background: var(--bg-primary)}.form-textarea{resize: vertical;min-height: 120px}.form-error{display: none;font-size: 0.8rem;color: #ef4444;margin-top: 6px;padding-left: 4px}.form-group.error .form-input{border-color: #ef4444;box-shadow: 0 0 0 3px rgba(239,68,68,0.15)}.form-group.error .form-error{display: block}.form-success{text-align: center;padding: 40px 20px}.success-icon{font-size: 64px;color: #22c55e;margin-bottom: 16px}.form-success h3{font-size: 1.3rem;margin-bottom: 8px}.form-success p{color: var(--text-secondary)}.faq-section{padding: 20px 0 80px 0}.faq-header{text-align: center;max-width: 760px;margin: 0 auto 48px auto}.faq-main-title{font-size: clamp(1.8rem,3.8vw,2.4rem);font-weight: 800;color: var(--text-primary);margin: 8px 0 16px 0;letter-spacing: -0.02em}.faq-intro{font-size: 1.05rem;color: var(--text-secondary);line-height: 1.65;margin: 0}.faq-accordion-list{max-width: 920px;margin: 0 auto;display: flex;flex-direction: column;gap: 16px}.faq-item{background: var(--bg-card);border: 1px solid var(--border-color);border-radius: var(--radius-lg);overflow: hidden;transition: border-color var(--transition-smooth),box-shadow var(--transition-smooth),transform var(--transition-fast)}.faq-item:hover{border-color: var(--border-glow);box-shadow: var(--shadow-sm)}.faq-item.active{border-color: var(--blue);box-shadow: var(--shadow-md)}.faq-question{width: 100%;padding: 22px 24px;background: transparent;border: none;display: flex;align-items: center;justify-content: space-between;gap: 16px;text-align: left;cursor: pointer;font-family: inherit;color: var(--text-primary);transition: color var(--transition-fast)}.faq-question:hover{color: var(--blue)}.faq-question:focus-visible{outline: 2px solid var(--blue);outline-offset: -2px}.faq-question-text{display: flex;align-items: center;gap: 14px;font-size: 1.06rem;font-weight: 600;line-height: 1.4}.faq-question-number{display: inline-flex;align-items: center;justify-content: center;width: 34px;height: 34px;border-radius: 10px;background: var(--blue-muted);color: var(--blue-light);font-size: 0.88rem;font-weight: 700;flex-shrink: 0;transition: background var(--transition-smooth),color var(--transition-smooth)}.faq-item.active .faq-question-number{background: var(--blue);color: var(--white)}.faq-toggle-icon{display: flex;align-items: center;justify-content: center;width: 38px;height: 38px;border-radius: 50%;background: var(--blue-muted);color: var(--blue);flex-shrink: 0;transition: transform 0.35s cubic-bezier(0.4,0,0.2,1),background var(--transition-smooth),color var(--transition-smooth)}.faq-toggle-icon .material-icons{font-size: 22px;transition: transform 0.35s cubic-bezier(0.4,0,0.2,1)}.faq-item.active .faq-toggle-icon{background: var(--blue);color: var(--white);transform: rotate(180deg)}.faq-answer-wrapper{display: grid;grid-template-rows: 0fr;transition: grid-template-rows 0.35s cubic-bezier(0.4,0,0.2,1)}.faq-item.active .faq-answer-wrapper{grid-template-rows: 1fr}.faq-answer{overflow: hidden}.faq-answer-content{padding: 0 24px 24px 72px;color: var(--text-secondary);font-size: 0.96rem;line-height: 1.75;opacity: 0;transform: translateY(-8px);transition: opacity 0.3s ease,transform 0.3s ease}.faq-item.active .faq-answer-content{opacity: 1;transform: translateY(0)}.faq-answer-content p{margin: 0 0 12px 0}.faq-answer-content p:last-child{margin-bottom: 0}.faq-answer-content ul,.faq-answer-content ol{margin: 8px 0 12px 20px;padding: 0}.faq-answer-content li{margin-bottom: 6px}@media (max-width: 600px){.faq-question{padding: 18px 16px}.faq-question-text{font-size: 0.98rem;gap: 10px}.faq-question-number{width: 28px;height: 28px;font-size: 0.8rem}.faq-answer-content{padding: 0 16px 20px 16px;font-size: 0.92rem}}.main-footer{background: var(--bg-secondary);border-top: 1px solid var(--border-color);padding: 60px 0 0}.footer-grid{display: grid;grid-template-columns: 1.5fr 1fr 1fr 1fr;gap: 40px;padding-bottom: 40px}.footer-brand .logo{margin-bottom: 16px}.footer-desc{font-size: 0.9rem;color: var(--text-secondary);line-height: 1.7;max-width: 300px}.footer-links-group h4{font-size: 0.95rem;font-weight: 600;margin-bottom: 16px;color: var(--text-primary)}.footer-links-group ul{display: flex;flex-direction: column;gap: 10px}.footer-links-group a{font-size: 0.88rem;color: var(--text-secondary);transition: color var(--transition-fast)}.footer-links-group a:hover{color: var(--blue-light)}.footer-bottom{border-top: 1px solid var(--border-color);padding: 20px 0;text-align: center;font-size: 0.85rem;color: var(--text-muted)}@media (max-width: 1024px){.footer-grid{grid-template-columns: 1fr 1fr;gap: 32px}.contact-layout{grid-template-columns: 1fr}.contact-info{grid-template-columns: 1fr 1fr}}@media (max-width: 768px){.hero-title{font-size: 2.2rem}.hero-stats{gap: 24px}.stat-number{font-size: 1.5rem}.stations-grid{grid-template-columns: repeat(auto-fill,minmax(160px,1fr));gap: 16px}.categories-grid{grid-template-columns: repeat(auto-fill,minmax(150px,1fr));gap: 12px}.category-card{min-height: 140px;padding: 24px 16px}.footer-grid{grid-template-columns: 1fr;gap: 28px}.contact-info{grid-template-columns: 1fr}.contact-form-wrapper{padding: 24px}.filter-bar{padding: 16px}}@media (max-width: 480px){.hero-actions{flex-direction: column}.btn{width: 100%;justify-content: center}.btn .material-icons{font-size: 27px}.hero-stats{display: grid !important;grid-template-columns: repeat(3,1fr) !important;gap: 12px}.stat-number{font-size: 1.15rem}.stat-label{font-size: 0.65rem}.container{padding: 0 12px}.stations-grid,.stations-grid-full{grid-template-columns: repeat(2,1fr) !important;gap: 12px}.categories-grid{grid-template-columns: repeat(2,1fr) !important;gap: 10px}.category-card{min-height: 120px;padding: 16px 12px}.category-card-icon{width: 48px;height: 48px;margin-bottom: 8px}.category-card-icon .material-icons{font-size: 26px}.category-card-name{font-size: 0.9rem}.category-card-count{font-size: 0.75rem}.station-card{padding: 8px;height: 100%}.station-card-body{padding: 8px 6px 4px 6px}.station-card-name{font-size: 0.9rem;margin-bottom: 4px}.station-card-desc{display: none}.station-card-category{font-size: 0.72rem;padding: 3px 6px}.station-card-category .material-icons{font-size: 18px}.station-card-flag-badge{width: 28px;height: 28px}.station-card-flag-emoji{font-size: 1.25rem}.station-play-btn{width: 60px;height: 60px}.station-play-btn .material-icons{font-size: 36px}.section-header{text-align: center !important;align-items: center !important}.section-subtitle{text-align: center !important;margin: 0 auto !important}}@media (max-width: 360px){.stations-grid{gap: 8px}.hero-title{font-size: 1.42rem}}.legal-header-minimal{padding: 100px 0 60px;background: var(--bg-primary)}.legal-hero-modern{display: flex;flex-direction: column;align-items: center;text-align: center}.legal-hero-badge{background: var(--blue-muted);color: var(--blue-light);padding: 6px 16px;border-radius: var(--radius-full);font-size: 0.8rem;font-weight: 700;text-transform: uppercase;letter-spacing: 0.1em;margin-bottom: 20px}.legal-updated{margin-top: 16px;font-size: 0.85rem;color: var(--text-muted);display: flex;align-items: center;gap: 8px;padding: 8px 16px;background: var(--bg-secondary);border-radius: var(--radius-sm)}.section-legal-main{padding: 0 0 100px;background: var(--bg-primary)}.legal-layout{display: grid;grid-template-columns: 320px 1fr;gap: 60px;align-items: start}.legal-sidebar{position: sticky;top: 100px;display: flex;flex-direction: column;gap: 24px}.legal-nav-card{background: var(--bg-primary);border: 1px solid var(--border-color);border-radius: var(--radius-lg);padding: 24px;box-shadow: var(--shadow-sm)}.legal-nav-title{font-size: 0.95rem;font-weight: 700;color: var(--text-primary);margin-bottom: 20px;text-transform: uppercase;letter-spacing: 0.05em}.legal-nav{display: flex;flex-direction: column;gap: 4px}.legal-nav-item{display: flex;align-items: center;gap: 12px;padding: 12px 16px;border-radius: var(--radius-sm);color: var(--text-secondary);font-size: 0.92rem;font-weight: 500;transition: all var(--transition-fast)}.legal-nav-item span.material-icons{font-size: 20px;opacity: 0.7}.legal-nav-item:hover{background: var(--bg-secondary);color: var(--blue)}.legal-nav-item.active{background: var(--blue-muted);color: var(--blue);font-weight: 600}.legal-nav-item.active span.material-icons{opacity: 1}.legal-support-card{background: linear-gradient(135deg,var(--blue),var(--blue-dark));border-radius: var(--radius-lg);padding: 32px 24px;color: var(--white);text-align: center;box-shadow: var(--shadow-md)}.support-icon{width: 60px;height: 60px;border-radius: 50%;background: rgba(255,255,255,0.15);display: flex;align-items: center;justify-content: center;margin: 0 auto 20px}.support-icon .material-icons{font-size: 32px;color: var(--white)}.legal-support-card h4{font-size: 1.1rem;margin-bottom: 8px}.legal-support-card p{font-size: 0.85rem;opacity: 0.85;margin-bottom: 24px;line-height: 1.5}.legal-content-area{display: flex;flex-direction: column;gap: 80px}.legal-section{scroll-margin-top: 120px}.legal-section-header{display: flex;align-items: center;gap: 16px;margin-bottom: 28px}.section-icon{width: 48px;height: 48px;border-radius: var(--radius-sm);background: color-mix(in srgb,var(--icon-color,#2950aa) 12%,transparent);display: flex;align-items: center;justify-content: center;flex-shrink: 0}.section-icon .material-icons{font-size: 24px;color: var(--icon-color,#2950aa)}.legal-section-title{font-size: 1.75rem;font-weight: 800;color: var(--text-primary);letter-spacing: -0.02em}.legal-section-body{display: flex;flex-direction: column;gap: 20px}.legal-text{font-size: 1.05rem;color: var(--text-secondary);line-height: 1.8}.legal-text a{color: var(--blue);font-weight: 600;text-decoration: underline;text-underline-offset: 4px}.legal-text a:hover{color: var(--blue-light)}.legal-info-table{background: var(--bg-secondary);border-radius: var(--radius-lg);padding: 8px;margin-top: 12px}.info-row{display: grid;grid-template-columns: 240px 1fr;padding: 16px 20px;border-bottom: 1px solid rgba(0,0,0,0.04)}.info-row:last-child{border-bottom: none}.info-label{font-size: 0.85rem;font-weight: 700;color: var(--text-muted);text-transform: uppercase;letter-spacing: 0.05em}.info-value{font-size: 1rem;color: var(--text-primary);font-weight: 500}.legal-glass-notice{display: flex;align-items: flex-start;gap: 16px;padding: 24px;background: var(--blue-muted);border-radius: var(--radius-lg);border: 1px solid var(--border-glow)}.legal-glass-notice .material-icons{color: var(--blue);font-size: 28px;margin-top: 2px}.legal-glass-notice p{font-size: 0.95rem;color: var(--text-secondary);line-height: 1.7;margin: 0}.legal-audio-disclaimer{background: #fafafc;border-left: 4px solid var(--blue);padding: 24px;border-radius: 0 var(--radius-lg) var(--radius-lg) 0}.disclaimer-header{display: flex;align-items: center;gap: 10px;font-weight: 700;color: var(--text-primary);margin-bottom: 10px}.disclaimer-header .material-icons{color: var(--blue)}.legal-audio-disclaimer p{font-size: 0.95rem;color: var(--text-secondary);margin: 0}.legal-feature-grid{display: grid;grid-template-columns: repeat(3,1fr);gap: 20px;margin: 16px 0}.legal-feature-item{padding: 24px;background: var(--bg-primary);border: 1px solid var(--border-color);border-radius: var(--radius-lg);transition: transform var(--transition-smooth)}.legal-feature-item:hover{transform: translateY(-4px);border-color: var(--border-glow)}.feature-icon{width: 44px;height: 44px;border-radius: 12px;background: var(--bg-secondary);display: flex;align-items: center;justify-content: center;margin-bottom: 16px}.feature-icon .material-icons{color: var(--blue);font-size: 22px}.feature-text h4{font-size: 0.95rem;font-weight: 700;margin-bottom: 6px}.feature-text p{font-size: 0.85rem;color: var(--text-secondary);margin: 0;line-height: 1.5}.legal-bullet-list{display: flex;flex-direction: column;gap: 12px;padding-left: 4px}.legal-bullet-list li{position: relative;padding-left: 28px;font-size: 1rem;color: var(--text-secondary)}.legal-bullet-list li::before{content: '\e5ca';font-family: 'Material Icons';position: absolute;left: 0;color: var(--blue);font-size: 18px}@media (max-width: 1100px){.legal-layout{grid-template-columns: 1fr}.legal-sidebar{position: static;order: 2}.legal-nav-card{display: none}.legal-content-area{gap: 60px}}@media (max-width: 768px){.legal-section-title{font-size: 1.5rem}.info-row{grid-template-columns: 1fr;gap: 8px}.legal-feature-grid{grid-template-columns: 1fr}}.station-fav-btn{position: absolute;top: 8px;left: 8px;width: 32px;height: 32px;border-radius: 50%;border: none;background: var(--bg-secondary);backdrop-filter: blur(4px);color: var(--text-primary);display: flex;align-items: center;justify-content: center;cursor: pointer;opacity: 0;transform: scale(0.8);transition: opacity 0.2s ease,transform 0.2s ease,color 0.2s ease,background 0.2s ease;z-index: 5;box-shadow: 0 2px 8px rgba(0,0,0,0.12);padding: 0}.station-fav-btn .material-icons{font-size: 20px;line-height: 1;color: var(--text-primary)}.station-card:hover .station-fav-btn{opacity: 1;transform: scale(1);color: var(--text-primary);font-size: 25px}.station-fav-btn.active{opacity: 1;transform: scale(1);color: var(--text-primary);background: var(--bg-secondary)}.station-fav-btn:hover{color: var(--text-primary);background: var(--bg-secondary);transform: scale(1.12) !important}@keyframes favPop{0%{transform: scale(1)}40%{transform: scale(1.4)}70%{transform: scale(0.9)}100%{transform: scale(1)}}.station-fav-btn.pop{animation: favPop 0.35s cubic-bezier(0.36,0.07,0.19,0.97)}.floating-fav-btn{color: var(--text-muted,#94a3b8);transition: color 0.2s ease,transform 0.2s ease !important}.floating-fav-btn:hover{color: #e53935 !important}.floating-fav-btn.active{color: #e53935 !important}.floating-fav-btn.active .material-icons,.floating-fav-btn:hover .material-icons{color: #e53935}.sidebar-fav-badge{margin-left: auto;min-width: 18px;height: 18px;border-radius: 99px;background: #e53935;color: #fff;font-size: 0.68rem;font-weight: 800;display: inline-flex;align-items: center;justify-content: center;padding: 0 5px;line-height: 1;flex-shrink: 0}.fav-toast{position: fixed;bottom: 110px;left: 50%;transform: translateX(-50%) translateY(16px);background: #1e293b;color: #fff;padding: 10px 18px;border-radius: 99px;font-size: 0.83rem;font-weight: 600;z-index: 3000;opacity: 0;pointer-events: none;display: flex;align-items: center;gap: 7px;transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);box-shadow: 0 6px 20px rgba(0,0,0,0.18);white-space: nowrap}.fav-toast .material-icons{font-size: 16px}.fav-toast.show{opacity: 1;transform: translateX(-50%) translateY(0)}.fav-toast--add{background: #1e293b}.fav-toast--add .material-icons{color: #e53935}.fav-toast--remove{background: #374151}.section-header{display: flex;align-items: flex-start;justify-content: flex-start;gap: 16px;margin-bottom: 28px;flex-wrap: wrap}.section-header-left{flex: 1}.section-title{display: flex;align-items: center;gap: 10px;font-size: 1.6rem;font-weight: 800;color: var(--text-primary);margin-bottom: 4px}.section-title-icon{font-size: 1.6rem;color: #e53935}.section-subtitle{font-size: 0.88rem;color: var(--text-muted)}.btn-sm{padding: 8px 14px;font-size: 0.82rem;gap: 6px}.fav-empty{text-align: center;padding: 80px 20px;max-width: 380px;margin: 0 auto}.fav-empty-icon{width: 80px;height: 80px;border-radius: 50%;background: linear-gradient(135deg,#fce7f3,#fef2f2);border: 2px solid #fecdd3;display: flex;align-items: center;justify-content: center;margin: 0 auto 20px}.fav-empty-icon .material-icons{font-size: 38px;color: #f87171}.fav-empty-title{font-size: 1.3rem;font-weight: 800;color: var(--text-primary);margin-bottom: 10px}.fav-empty-desc{font-size: 0.88rem;color: var(--text-muted);line-height: 1.7;margin-bottom: 24px}html[data-theme="dark"] .logo-light{display: none !important}html[data-theme="dark"] .logo-dark{display: block !important}html[data-theme="dark"] .sidebar-logo .logo-dark{display: block !important}html[data-theme="dark"] .mobile-topbar .logo-dark{display: block !important}.station-card-name-link{text-decoration: none;color: inherit}.station-card-name-link:hover .station-card-name{color: var(--blue)}body.page-stations,body.page-categories,body.page-populaires,body.page-nouveautes{background: var(--bg-secondary)}.cookie-banner{position: fixed;bottom: 24px;left: 24px;right: auto;width: 450px;max-width: calc(100vw - 48px);background: var(--bg-card);border: 1px solid var(--border-color);border-radius: var(--radius-lg);padding: 24px;box-shadow: var(--shadow-lg);z-index: 99999;display: flex;flex-direction: column;gap: 16px;backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px)}.cookie-content{display: flex;gap: 16px}.cookie-icon{width: 48px;height: 48px;background: var(--blue-muted);color: var(--blue);border-radius: 50%;display: flex;align-items: center;justify-content: center;flex-shrink: 0}.cookie-icon .material-icons{font-size: 24px}.cookie-text .cookie-title{font-size: 1.1rem;font-weight: 700;margin-bottom: 8px;color: var(--text-primary)}.cookie-text p{font-size: 0.9rem;color: var(--text-secondary);line-height: 1.5;margin: 0}.cookie-text a{color: var(--blue);font-weight: 600}.cookie-actions{display: flex;justify-content: flex-end;gap: 12px}@media (max-width: 600px){.cookie-banner{bottom: 80px;left: 12px;right: 12px;width: auto;max-width: none}}.ad-banner-container{display: block;width: 728px;max-width: 100%;height: 90px;overflow: hidden;position: relative;background: transparent;margin: 0 auto;contain: layout size}.ad-banner-container iframe{display: block;border: none}@media (max-width: 768px){.ad-banner-container{width: 320px;height: 250px}}.ad-section{padding: 20px 0;background: var(--bg);min-height: calc(90px + 48px);overflow: hidden}@media (max-width: 768px){.ad-section{min-height: calc(250px + 48px)}}.ad-section--loaded{min-height: 0}.ad-label{font-size: 0.7rem;color: var(--text-muted);margin-top: 8px;text-transform: uppercase;letter-spacing: 1px}.stations-grid--skeleton:empty{min-height: 380px;background: linear-gradient( 90deg,var(--bg-secondary) 0%,var(--border-color) 50%,var(--bg-secondary) 100% );background-size: 200% 100%;animation: shimmer 1.4s infinite;border-radius: 20px}@media (max-width: 768px){.stations-grid--skeleton:empty{min-height: 260px}}.stations-grid--skeleton:not(:empty){background: none;animation: none;min-height: 0}:root{--sidebar-width: 260px;--mobile-topbar-height: 60px}.main-content{margin-left: var(--sidebar-width);min-height: 100vh;padding-bottom: 120px;transition: margin-left var(--transition-smooth)}@media (max-width: 900px){.main-content{margin-left: 0;padding-top: var(--mobile-topbar-height)}}.sidebar{position: fixed;top: 0;left: 0;bottom: 0;width: var(--sidebar-width);background: var(--sidebar-bg);border-right: 1px solid var(--sidebar-border);display: flex;flex-direction: column;z-index: 1000;overflow: hidden;transition: transform var(--transition-smooth)}.sidebar-scrollable{flex: 1;overflow-y: auto;overflow-x: hidden;display: flex;flex-direction: column}.sidebar-scrollable::-webkit-scrollbar{width: 4px}.sidebar-scrollable::-webkit-scrollbar-track{background: transparent}.sidebar-scrollable::-webkit-scrollbar-thumb{background: rgba(0,0,0,0.1);border-radius: 20px}.sidebar-scrollable::-webkit-scrollbar-thumb:hover{background: rgba(0,0,0,0.2)}.sidebar-logo{padding: 24px 20px 20px;border-bottom: 1px solid var(--sidebar-border);flex-shrink: 0}.sidebar-logo .logo{display: flex;align-items: center;gap: 10px;font-size: 1.3rem;font-weight: 700}.sidebar-logo .logo-icon{font-size: 28px;color: var(--blue);filter: drop-shadow(0 0 6px var(--blue-glow))}.sidebar-logo .logo-text{color: var(--text-primary)}.sidebar-logo .logo-highlight{color: var(--blue)}.sidebar-section{padding: 16px 12px 8px;flex-shrink: 0}.sidebar-label{font-size: 0.7rem;font-weight: 700;text-transform: uppercase;letter-spacing: 0.1em;color: var(--text-muted);padding: 0 12px;margin-bottom: 8px}.sidebar-nav{display: flex;flex-direction: column;gap: 2px}.sidebar-link{display: flex;align-items: center;gap: 12px;padding: 10px 14px;border-radius: var(--radius-md);font-size: 0.9rem;font-weight: 500;color: var(--text-secondary);transition: all var(--transition-fast);text-decoration: none;position: relative}.sidebar-link .material-icons{font-size: 20px;flex-shrink: 0;transition: color var(--transition-fast)}.sidebar-link:hover{background: var(--blue-muted);color: var(--text-primary)}.sidebar-link:hover .material-icons{color: var(--blue)}.sidebar-link.active{background: var(--blue);color: #ffffff;font-weight: 600}.sidebar-link.active .material-icons{color: #ffffff}button.sidebar-link{background: transparent;border: none;width: 100%;text-align: left;cursor: pointer;font-family: inherit;outline: none}@media (min-width: 901px){.mobile-only-item{display: none !important}}.sidebar-grid{display: grid;grid-template-columns: 1fr 1fr;gap: 8px;padding: 0 4px}.sidebar-tile{display: flex;align-items: center;gap: 6px;padding: 8px 8px;border-radius: 20px;border: 1px solid var(--border-color);font-size: 12px;font-weight: 500;color: var(--text-secondary);text-decoration: none;transition: all var(--transition-fast);background: var(--bg-primary);overflow: hidden;min-width: 0}.sidebar-tile>span:last-child{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;min-width: 0}.sidebar-tile:hover{border-color: var(--tile-color,var(--blue));background: rgba(0,0,0,0.015);color: var(--text-primary);transform: translateY(-1px);box-shadow: 0 2px 8px rgba(0,0,0,0.06)}.sidebar-tile-icon{width: 26px;height: 26px;border-radius: 8px;display: flex;align-items: center;justify-content: center;flex-shrink: 0;background: color-mix(in srgb,var(--tile-color,#2950aa) 12%,transparent);transition: all var(--transition-fast)}.sidebar-tile-icon .material-icons{font-size: 15px;color: var(--tile-color,#2950aa)}.sidebar-tile:hover .sidebar-tile-icon{background: color-mix(in srgb,var(--tile-color,#2950aa) 18%,transparent);transform: scale(1.05)}.sidebar-tile-flag-img{width: 26px;height: 26px;border-radius: 20px;object-fit: cover;flex-shrink: 0;border: 1px solid rgba(0,0,0,0.08);box-shadow: 0 1px 3px rgba(0,0,0,0.08)}.sidebar-tile-country{--tile-color: #5a5a7a}.sidebar-tile--hidden{display: none}.sidebar-show-more{display: flex;align-items: center;gap: 6px;width: 100%;padding: 8px 12px;margin-top: 6px;border-radius: 20px;border: 1px dashed var(--border-color);background: transparent;color: var(--text-muted);font-size: 0.75rem;font-weight: 600;font-family: inherit;cursor: pointer;transition: all var(--transition-fast);justify-content: center}.sidebar-show-more:hover{background: var(--blue-muted);border-color: var(--blue);color: var(--blue)}.sidebar-show-more .material-icons{font-size: 16px;transition: transform 0.3s ease}.sidebar-show-more[aria-expanded="true"] .material-icons{transform: rotate(180deg)}.sidebar-show-more em{font-style: normal;opacity: 0.7;font-size: 0.7rem}.content-topbar{position: sticky;top: 0;z-index: 300;background: var(--topbar-bg);backdrop-filter: blur(16px);-webkit-backdrop-filter: blur(16px);border-bottom: 1px solid rgba(0,0,0,0.04);padding: 0 32px;overflow: visible}.topbar-inner{display: flex;align-items: center;justify-content: flex-end;position: relative;gap: 20px;height: 81px;max-width: 1400px;margin: 0 auto}.topbar-left{flex-shrink: 0}.topbar-greeting{font-size: 1.15rem;font-weight: 700;color: var(--text-primary);white-space: nowrap}.topbar-center{position: absolute;left: 40%;transform: translateX(-50%);width: 100%;max-width: 520px;display: flex;justify-content: center;z-index: 10}.topbar-search{position: relative;width: 100%;max-width: 520px}.topbar-search-icon{position: absolute;left: 14px;top: 50%;transform: translateY(-50%);font-size: 21px;color: var(--text-muted);pointer-events: none;transition: color var(--transition-fast)}.topbar-search-input{width: 100%;padding: 10px 23px 14px 44px;border-radius: 30px;border: 1px solid rgba(0,0,0,0.08);background: var(--bg-secondary);color: var(--text-primary);font-size: 0.88rem;font-family: inherit;outline: none;transition: all var(--transition-fast)}.topbar-search-input::placeholder{color: var(--text-muted)}.topbar-search-input:focus{border-color: var(--blue);background: #ffffff;box-shadow: 0 0 0 4px rgba(41,80,170,0.12)}.topbar-search-input:focus~.topbar-search-icon,.topbar-search:focus-within .topbar-search-icon{color: var(--blue)}.topbar-search-clear{position: absolute;right: 12px;top: 50%;transform: translateY(-50%);width: 24px;height: 24px;border-radius: 50%;background: rgba(0,0,0,0.08);border: none;display: flex;align-items: center;justify-content: center;cursor: pointer;color: var(--text-muted);transition: all var(--transition-fast);flex-shrink: 0;padding: 0}.topbar-search-clear:hover{background: rgba(0,0,0,0.14);color: var(--text-primary)}.topbar-search-clear .material-icons{font-size: 15px}.search-dropdown{position: absolute;top: calc(100% + 8px);left: 0;right: 0;background: var(--bg-card);border: 1px solid var(--border-color);border-radius: 20px;box-shadow: var(--shadow-lg);z-index: 500;overflow: hidden;display: none;animation: dropdownIn 0.18s cubic-bezier(0.34,1.56,0.64,1)}.search-dropdown.open{display: block}@keyframes dropdownIn{from{opacity: 0;transform: translateY(-6px) scale(0.98)}to{opacity: 1;transform: translateY(0) scale(1)}}.search-dropdown-inner{max-height: 460px;overflow-y: auto;overscroll-behavior: contain;padding: 6px}.search-dropdown-inner::-webkit-scrollbar{width: 4px}.search-dropdown-inner::-webkit-scrollbar-track{background: transparent}.search-dropdown-inner::-webkit-scrollbar-thumb{background: rgba(0,0,0,0.1);border-radius: 8px}.search-dropdown-header{padding: 8px 12px 4px;font-size: 0.7rem;font-weight: 700;text-transform: uppercase;letter-spacing: 0.08em;color: var(--text-muted)}.search-result-item{display: flex;align-items: center;gap: 12px;padding: 9px 10px;border-radius: 16px;cursor: pointer;transition: background var(--transition-fast);text-decoration: none;color: inherit;position: relative}.search-result-item:hover,.search-result-item.focused{background: var(--bg-secondary)}.search-result-logo-wrap{position: relative;flex-shrink: 0}.search-result-logo{width: 44px;height: 44px;border-radius: 16px;object-fit: cover;display: block;background: var(--bg-secondary)}.search-result-flag{position: absolute;bottom: -3px;right: -3px;width: 18px;height: 18px;border-radius: 50%;overflow: hidden;border: 2px solid #ffffff;box-shadow: 0 1px 4px rgba(0,0,0,0.15);background: #fff}.search-result-flag img{width: 100%;height: 100%;object-fit: cover;display: block;border-radius: 50%}.search-result-info{flex: 1;min-width: 0}.search-result-name{font-size: 0.88rem;font-weight: 700;color: var(--text-primary);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-bottom: 3px}.search-result-name mark{background: transparent;color: var(--blue);font-weight: 800}.search-result-meta{display: flex;align-items: center;gap: 6px;font-size: 0.74rem;color: var(--text-muted)}.search-result-category{display: flex;align-items: center;gap: 3px}.search-result-category .material-icons{font-size: 12px}.search-result-sep{width: 3px;height: 3px;border-radius: 50%;background: var(--text-muted);opacity: 0.5;flex-shrink: 0}.search-result-country{font-size: 0.72rem}.search-result-play{width: 34px;height: 34px;border-radius: 50%;background: var(--blue);color: #fff;display: flex;align-items: center;justify-content: center;flex-shrink: 0;opacity: 0;transform: scale(0.8);transition: all var(--transition-fast);border: none;cursor: pointer}.search-result-item:hover .search-result-play,.search-result-item.focused .search-result-play{opacity: 1;transform: scale(1)}.search-result-play .material-icons{font-size: 18px}.search-empty{padding: 32px 16px;text-align: center;color: var(--text-muted)}.search-empty .material-icons{font-size: 36px;margin-bottom: 8px;color: var(--text-muted);opacity: 0.5}.search-empty p{font-size: 0.85rem}.search-dropdown-footer{border-top: 1px solid rgba(0,0,0,0.05);padding: 6px;margin-top: 2px}.search-see-all{display: flex;align-items: center;justify-content: center;gap: 6px;padding: 9px;border-radius: 8px;font-size: 0.8rem;font-weight: 600;color: var(--blue);text-decoration: none;transition: background var(--transition-fast)}.search-see-all:hover{background: var(--blue-muted)}.search-see-all .material-icons{font-size: 16px}.topbar-right{display: flex;align-items: center;gap: 8px;flex-shrink: 0}.topbar-btn{width: 38px;height: 38px;border-radius: 8px;display: flex;align-items: center;justify-content: center;border: none;background: transparent;color: var(--text-secondary);cursor: pointer;transition: all var(--transition-fast)}.topbar-btn:hover{background: var(--blue-muted);color: var(--blue)}.topbar-btn .material-icons{font-size: 22px}.topbar-avatar{width: 36px;height: 36px;border-radius: 50%;background: linear-gradient(135deg,var(--blue),var(--blue-light));display: flex;align-items: center;justify-content: center;cursor: pointer;transition: transform var(--transition-fast),box-shadow var(--transition-fast)}.topbar-avatar:hover{transform: scale(1.08);box-shadow: 0 2px 12px var(--blue-glow)}.topbar-avatar .material-icons{font-size: 20px;color: #ffffff}.topbar-avatar-letter{font-size: 0.95rem;font-weight: 700;color: #ffffff;line-height: 1;text-transform: uppercase;font-family: inherit;pointer-events: none;user-select: none}.sidebar-footer{margin-top: auto;flex-shrink: 0;padding: 12px 12px 16px}.sidebar-footer-brand{display: flex;align-items: center;gap: 10px;padding: 12px 14px;border-radius: 30px;background: linear-gradient(135deg,#1e3d7a 0%,#2950aa 60%,#3a6fd8 100%);margin-bottom: 8px;position: relative;overflow: hidden;text-decoration: none;cursor: pointer;transition: transform 0.25s cubic-bezier(0.4,0,0.2,1),box-shadow 0.25s cubic-bezier(0.4,0,0.2,1)}.sidebar-footer-brand:hover{transform: translateY(-2px);box-shadow: 0 6px 18px rgba(41,80,170,0.45)}.sidebar-footer-brand:active{transform: translateY(0)}.sidebar-footer-brand::before{content: '';position: absolute;inset: 0;background: linear-gradient(135deg,rgba(255,255,255,0.05) 0%,transparent 60%);pointer-events: none}.sidebar-footer-logo{width: 34px;height: 34px;border-radius: 8px;background: rgba(255,255,255,0.15);display: flex;align-items: center;justify-content: center;flex-shrink: 0;backdrop-filter: blur(4px);border: 1px solid rgba(255,255,255,0.15)}.sidebar-footer-logo .material-icons{font-size: 18px;color: #ffffff}.sidebar-footer-brand-info{display: flex;flex-direction: column;gap: 1px;flex: 1;min-width: 0}.sidebar-footer-name{font-size: 0.88rem;color: rgba(255,255,255,0.9);letter-spacing: 0.01em;line-height: 1.2}.sidebar-footer-name strong{color: #ffffff;font-weight: 800}.sidebar-footer-slogan{font-size: 0.66rem;color: rgba(255,255,255,0.55);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;letter-spacing: 0.01em}.sidebar-footer-bars{display: flex;align-items: flex-end;gap: 2px;height: 18px;flex-shrink: 0}.sidebar-footer-bars span{display: block;width: 3px;border-radius: 2px;background: rgba(255,255,255,0.5);animation: footerBar 1.4s ease-in-out infinite}.sidebar-footer-bars span:nth-child(1){height: 6px;animation-delay: 0s}.sidebar-footer-bars span:nth-child(2){height: 14px;animation-delay: 0.2s}.sidebar-footer-bars span:nth-child(3){height: 10px;animation-delay: 0.1s}.sidebar-footer-bars span:nth-child(4){height: 16px;animation-delay: 0.35s}.sidebar-footer-bars span:nth-child(5){height: 8px;animation-delay: 0.25s}@keyframes footerBar{0%,100%{transform: scaleY(0.4);opacity: 0.5}50%{transform: scaleY(1);opacity: 1}}.sidebar-footer-links{display: flex;flex-wrap: wrap;justify-content: center;gap: 4px 6px;margin-bottom: 6px;padding: 0 2px}.sidebar-footer-links a{flex: 0 0 auto;display: flex;align-items: center;justify-content: center;gap: 5px;padding: 6px 6px;border-radius: 7px;font-size: 0.72rem;font-weight: 600;color: var(--text-muted);transition: all var(--transition-fast);text-decoration: none;border: 1px solid transparent;white-space: nowrap}.sidebar-footer-links a .material-icons{font-size: 16px;flex-shrink: 0;transition: color var(--transition-fast)}.sidebar-footer-links a:hover{background: var(--blue-muted);color: var(--blue);border-color: rgba(41,80,170,0.15)}.sidebar-footer-links a:hover .material-icons{color: var(--blue)}.sidebar-footer-social{display: flex;align-items: center;justify-content: center;gap: 12px;margin-bottom: 8px;padding: 0 4px}.sidebar-footer-social a{display: flex;align-items: center;justify-content: center;width: 34px;height: 34px;border-radius: 12px;background: rgba(0,0,0,0.04);color: var(--text-muted);transition: all var(--transition-fast)}.sidebar-footer-social a:hover{background: var(--blue-muted);color: var(--blue);transform: translateY(-2px)}.sidebar-footer-social a svg{width: 16px;height: 16px}.sidebar-footer-social a[aria-label="Facebook"]:hover{background: #1877f2;color: #fff}.sidebar-footer-social a[aria-label="Telegram"]:hover{background: #229ed9;color: #fff}.sidebar-footer-social a[aria-label="TikTok"]:hover{background: #111;color: #fff}.sidebar-footer-social a[aria-label="YouTube"]:hover{background: #ff0000;color: #fff}.sidebar-footer-social a[aria-label="Instagram"]:hover{background: linear-gradient(45deg,#f9a03f,#e1306c,#833ab4);color: #fff}[data-theme="dark"] .sidebar-footer-social a{background: rgba(255,255,255,0.05)}[data-theme="dark"] .sidebar-footer-social a:hover{background: rgba(255,255,255,0.12);color: #ffffff}.sidebar-copyright{font-size: 0.64rem;color: var(--text-muted);text-align: center;line-height: 1.4;padding: 4px 4px 0;border-top: 1px solid var(--sidebar-border)}.mobile-topbar{display: none;position: fixed;top: 0;left: 0;right: 0;height: var(--mobile-topbar-height);background: rgba(255,255,255,0.95);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);border-bottom: 1px solid var(--sidebar-border);padding: 0 16px;align-items: center;justify-content: space-between;z-index: 999}.mobile-topbar .logo{display: flex;align-items: center;gap: 8px;font-size: 1.2rem;font-weight: 700}.mobile-topbar .logo-icon{font-size: 24px;color: var(--blue)}.mobile-logo{height: 34px;width: auto;object-fit: contain;display: block;aspect-ratio: auto 120 / 34}.mobile-topbar-right{display: flex;align-items: center;gap: 10px}.mobile-topbar-btn{width: 38px;height: 38px;display: flex;align-items: center;justify-content: center;border-radius: 10px;background: transparent;color: var(--text-secondary);border: none;cursor: pointer;transition: all var(--transition-fast)}.mobile-topbar-btn:hover{background: var(--blue-muted);color: var(--blue)}.mobile-topbar-btn .material-icons{font-size: 22px}.menu-toggle{width: 38px;height: 38px;display: flex;align-items: center;justify-content: center;border-radius: 10px;background: var(--blue-muted);border: none;cursor: pointer;transition: all var(--transition-fast);margin-left: 2px}.sidebar-overlay{display: none;position: fixed;inset: 0;background: rgba(0,0,0,0.3);z-index: 998;opacity: 0;transition: opacity var(--transition-smooth)}.sidebar-overlay.active{opacity: 1}.topbar-user-menu{position: relative}.user-dropdown{position: absolute;top: 54px;right: 0;width: 240px;background: var(--bg-card,#ffffff);border: 1px solid var(--border-color,rgba(0,0,0,0.08));border-radius: var(--radius-lg,12px);box-shadow: 0 10px 40px rgba(0,0,0,0.12);z-index: 1001;overflow: hidden;opacity: 0;transform: translateY(-10px);pointer-events: none;transition: all 0.2s ease}.user-dropdown-open{opacity: 1;transform: translateY(0);pointer-events: auto}.user-dropdown-header{padding: 16px;display: flex;flex-direction: column}.user-dropdown-name{font-weight: 700;font-size: 0.95rem;color: var(--text-primary,#111)}.user-dropdown-email{font-size: 0.8rem;color: var(--text-muted,#777);white-space: nowrap;overflow: hidden;text-overflow: ellipsis}.user-dropdown-divider{height: 1px;background: var(--border-color,rgba(0,0,0,0.08));margin: 4px 0}.user-dropdown-item{display: flex;align-items: center;gap: 12px;width: 100%;padding: 10px 16px;font-size: 0.9rem;color: var(--text-secondary,#444);text-decoration: none;background: none;border: none;cursor: pointer;transition: background 0.2s;text-align: left;font-family: inherit}.user-dropdown-item:hover{background: var(--blue-muted,#f0f4ff);color: var(--blue,#2950aa)}.user-dropdown-item .material-icons{font-size: 20px}.user-logout-btn{color: #ef4444 !important}.user-logout-btn:hover{background: rgba(239,68,68,0.05) !important}@media (max-width: 900px){:root{--sidebar-width: 300px}.sidebar{transform: translateX(-100%);box-shadow: none;width: var(--sidebar-width)}.sidebar.open{transform: translateX(0);box-shadow: 8px 0 32px rgba(0,0,0,0.1)}.menu-toggle .material-icons{font-size: 28px}.sidebar-link .material-icons{font-size: 24px}.sidebar-tile-icon .material-icons{font-size: 20px}.sidebar-overlay{display: block;pointer-events: none}.sidebar-overlay.active{pointer-events: auto}.mobile-topbar{display: flex}.content-topbar{display: none;padding: 0 16px;top: var(--mobile-topbar-height);z-index: 100;background: var(--topbar-bg);border-bottom: 1px solid var(--sidebar-border)}.content-topbar.active{display: block;animation: topbarSlide 0.3s cubic-bezier(0.4,0,0.2,1)}@keyframes topbarSlide{from{transform: translateY(-10px);opacity: 0}to{transform: translateY(0);opacity: 1}}.topbar-greeting{display: none}.topbar-search{max-width: 100%;margin-left: 0}.topbar-inner{height: 60px;gap: 0}.topbar-center{position: static;transform: none;width: 100%;max-width: 100%;justify-content: center}.topbar-search-input{padding: 10px 40px 10px 44px;font-size: 0.9rem}.content-topbar .topbar-right{display: none}}@media (max-width: 900px){body.user-menu-open .content-topbar{display: block !important;height: 0;padding: 0;overflow: visible;border: none;background: transparent}body.user-menu-open .content-topbar .topbar-center,body.user-menu-open .content-topbar .topbar-greeting{display: none !important}body.user-menu-open .content-topbar .topbar-right{display: block !important;position: static}body.user-menu-open .content-topbar .topbar-right > *:not(.topbar-user-menu){display: none !important}body.user-menu-open .topbar-avatar{display: none !important}.user-dropdown{position: fixed !important;top: calc(var(--mobile-topbar-height) + 12px) !important;right: 12px !important;left: 12px !important;width: auto !important;margin-top: -53px !important;z-index: 1501 !important;opacity: 0;visibility: hidden;transform: translateY(-10px);transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1)}.user-dropdown-open{opacity: 1 !important;visibility: visible !important;transform: translateY(0) !important;display: block !important}}.topbar-notif-wrapper{position: relative}.topbar-btn.active{background: var(--blue-muted);color: var(--blue)}.notif-badge{position: absolute;top: -1px;right: -1px;min-width: 20px;height: 20px;padding: 0 5px;border-radius: 10px;background: #FF3B30;color: #fff;font-size: 0.7rem;font-weight: 700;display: flex;align-items: center;justify-content: center;line-height: 1;pointer-events: none;box-sizing: border-box;box-shadow: 0 0 0 2.5px #ffffff,0 4px 8px rgba(0,0,0,0.15);animation: badgePop 0.3s cubic-bezier(0.34,1.56,0.64,1);z-index: 5}@keyframes badgePop{from{transform: scale(0);opacity: 0}to{transform: scale(1);opacity: 1}}.notif-dropdown{position: fixed;top: 80px;right: 24px;width: 380px;max-width: calc(100vw - 32px);background: #ffffff;border: 1px solid rgba(0,0,0,0.07);border-radius: 16px;box-shadow: 0 20px 60px rgba(0,0,0,0.13),0 4px 16px rgba(0,0,0,0.06);z-index: 1500;overflow: hidden;opacity: 0;transform: translateY(-8px) scale(0.97);pointer-events: none;transform-origin: top right;transition: opacity 0.2s ease,transform 0.22s cubic-bezier(0.34,1.56,0.64,1)}@media (max-width: 660px){.notif-dropdown{top: calc(var(--mobile-topbar-height) + 12px) !important;right: 12px !important;left: 12px !important;width: auto !important;max-width: 100vw !important;transform-origin: top center}.notif-list{max-height: calc(100vh - 180px) !important}.notif-dropdown-header{padding: 14px 14px 10px !important}.notif-dropdown-title{font-size: 0.9rem !important}.notif-mark-all{font-size: 0.72rem !important}}.notif-dropdown--open{opacity: 1;transform: translateY(0) scale(1);pointer-events: auto}.notif-dropdown-header{display: flex;align-items: center;justify-content: space-between;padding: 16px 18px 12px;border-bottom: 1px solid rgba(0,0,0,0.05)}.notif-dropdown-title{font-size: 0.95rem;font-weight: 800;color: var(--text-primary);display: flex;align-items: center;gap: 8px}.notif-dropdown-title .material-icons{font-size: 18px;color: var(--blue)}.notif-mark-all{font-size: 0.75rem;font-weight: 600;color: var(--blue);background: none;border: none;cursor: pointer;padding: 4px 8px;border-radius: 6px;transition: background var(--transition-fast)}.notif-mark-all:hover{background: var(--blue-muted)}.notif-list{max-height: 420px;overflow-y: auto;overscroll-behavior: contain;padding: 6px}.notif-list::-webkit-scrollbar{width: 4px}.notif-list::-webkit-scrollbar-track{background: transparent}.notif-list::-webkit-scrollbar-thumb{background: rgba(0,0,0,0.1);border-radius: 8px}.notif-item{display: flex;align-items: flex-start;gap: 12px;padding: 10px 10px;margin-bottom: 12px;border-radius: 10px;cursor: pointer;transition: background var(--transition-fast);position: relative}.notif-item:last-child{margin-bottom: 0}.notif-item:hover{background: var(--bg-secondary)}.notif-item--unread{background: rgba(41,80,170,0.03)}.notif-item--unread:hover{background: rgba(41,80,170,0.07)}.notif-item-logo{position: relative;flex-shrink: 0}.notif-item-logo img{width: 46px;height: 46px;border-radius: 10px;object-fit: cover;border: 1px solid rgba(0,0,0,0.06);display: block}.notif-item-icon-only{width: 46px;height: 46px;border-radius: 10px;display: flex;align-items: center;justify-content: center;border: 1px solid rgba(0,0,0,0.06)}.notif-item-icon-only .material-icons{font-size: 24px}.notif-dot{position: absolute;top: -3px;right: -3px;width: 10px;height: 10px;border-radius: 50%;background: var(--blue);border: 2px solid var(--bg-primary);box-shadow: 0 1px 3px rgba(41,80,170,0.4)}.notif-item-flag-badge{position: absolute;bottom: -5px;right: -5px;width: 22px;height: 22px;border-radius: 50%;overflow: hidden;border: 2.5px solid var(--bg-primary);box-shadow: 0 2px 8px rgba(0,0,0,0.22),0 0 0 1px rgba(0,0,0,0.05);background: var(--bg-secondary);display: flex;align-items: center;justify-content: center;z-index: 2;flex-shrink: 0}.notif-item-flag{width: 100%;height: 100%;object-fit: cover;display: block;border-radius: 50%}.notif-item-flag-emoji{font-size: 12px;line-height: 1;display: flex;align-items: center;justify-content: center}.notif-item-country{display: inline-flex;align-items: center;gap: 4px;font-size: 0.68rem;font-weight: 600;color: var(--text-muted);background: var(--bg-secondary);border: 1px solid rgba(0,0,0,0.07);padding: 1px 7px 1px 2px;border-radius: 99px;margin-top: 4px;white-space: nowrap;overflow: hidden;max-width: 100%;text-overflow: ellipsis}.notif-item-country-flag{width: 16px;height: 16px;border-radius: 50%;object-fit: cover;display: block;flex-shrink: 0;border: 1px solid rgba(0,0,0,0.08)}.notif-item-country-emoji{font-size: 13px;line-height: 1}.notif-item-content{flex: 1;min-width: 0}.notif-item-header{display: flex;align-items: center;gap: 6px;margin-bottom: 4px}.notif-item-tag{font-size: 0.65rem;font-weight: 700;text-transform: uppercase;letter-spacing: 0.07em;padding: 2px 7px;border-radius: 99px;background: color-mix(in srgb,var(--tag-color,#2950aa) 12%,transparent);color: var(--tag-color,#2950aa)}.notif-item-date{font-size: 0.7rem;color: var(--text-muted);margin-left: auto;white-space: nowrap}.notif-item-title{font-size: 0.83rem;font-weight: 700;color: var(--text-primary);margin-bottom: 3px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}.notif-item-desc{font-size: 0.76rem;color: var(--text-secondary);line-height: 1.4;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden}.notif-item-arrow{font-size: 18px;color: var(--text-muted);flex-shrink: 0;align-self: center;transition: transform var(--transition-fast),color var(--transition-fast)}.notif-item:hover .notif-item-arrow{transform: translateX(3px);color: var(--blue)}.notif-empty{padding: 40px 20px;text-align: center;color: var(--text-muted)}.notif-empty .material-icons{font-size: 40px;margin-bottom: 10px;opacity: 0.35;display: block}.notif-empty p{font-size: 0.85rem}.notif-detail-overlay{position: fixed;inset: 0;background: rgba(15,20,40,0.5);backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px);z-index: 2000;display: flex;align-items: center;justify-content: center;padding: 24px;opacity: 0;pointer-events: none;transition: opacity 0.25s ease}.notif-detail-overlay[hidden]{display: none !important}.notif-detail-overlay.notif-detail-open{opacity: 1;pointer-events: auto}.notif-detail-overlay.notif-detail-open .notif-detail-modal{transform: translateY(0) scale(1);opacity: 1}.notif-detail-modal{background: var(--bg-card);border-radius: 20px;width: 100%;max-width: 480px;box-shadow: 0 32px 80px rgba(0,0,0,0.18),0 8px 24px rgba(0,0,0,0.08);overflow: hidden;transform: translateY(20px) scale(0.97);opacity: 0;transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);position: relative}.notif-detail-hero{position: relative;padding: 32px 24px 20px;background: var(--bg-secondary);display: flex;align-items: flex-start;gap: 16px;border-bottom: 1px solid rgba(0,0,0,0.05)}.notif-detail-logo-wrap{flex-shrink: 0;position: relative}.notif-detail-logo{width: 68px;height: 68px;border-radius: 14px;object-fit: cover;border: 2px solid rgba(255,255,255,0.8);box-shadow: 0 8px 24px rgba(0,0,0,0.12);display: block}.notif-detail-icon-badge{position: absolute;bottom: -6px;right: -6px;width: 26px;height: 26px;border-radius: 8px;display: flex;align-items: center;justify-content: center;border: 2px solid #fff;box-shadow: 0 2px 8px rgba(0,0,0,0.12)}.notif-detail-icon-badge .material-icons{font-size: 14px}.notif-detail-flag-badge{position: absolute;top: -6px;left: -6px;width: 28px;height: 28px;border-radius: 50%;overflow: hidden;border: 2.5px solid #fff;box-shadow: 0 2px 8px rgba(0,0,0,0.18);background: #f0f0f0;display: flex;align-items: center;justify-content: center;z-index: 2}.notif-detail-country-row{margin-bottom: 8px}.notif-detail-country{display: inline-flex;align-items: center;gap: 5px;font-size: 0.72rem;font-weight: 600;color: var(--text-secondary);background: rgba(0,0,0,0.04);border: 1px solid rgba(0,0,0,0.07);padding: 3px 9px;border-radius: 99px}.notif-detail-hero-info{flex: 1;min-width: 0;padding-top: 4px}.notif-detail-hero-tags{display: flex;align-items: center;gap: 8px;margin-bottom: 8px;flex-wrap: wrap}.notif-detail-tag{font-size: 0.7rem;font-weight: 700;text-transform: uppercase;letter-spacing: 0.07em;padding: 3px 10px;border-radius: 99px;background: color-mix(in srgb,var(--tag-color,#2950aa) 13%,transparent);color: var(--tag-color,#2950aa)}.notif-detail-date{font-size: 0.72rem;color: var(--text-muted);display: flex;align-items: center;gap: 4px}.notif-detail-date .material-icons{font-size: 14px}.notif-detail-hero-title{font-size: 1.05rem;font-weight: 800;color: var(--text-primary);line-height: 1.3}.notif-detail-close{position: absolute;top: 14px;right: 14px;width: 32px;height: 32px;border-radius: 8px;background: rgba(0,0,0,0.06);border: none;display: flex;align-items: center;justify-content: center;cursor: pointer;color: var(--text-secondary);transition: all var(--transition-fast)}.notif-detail-close:hover{background: rgba(0,0,0,0.12);color: var(--text-primary)}.notif-detail-close .material-icons{font-size: 18px}.notif-detail-body{padding: 22px 24px 28px}.notif-detail-short{font-size: 0.9rem;font-weight: 600;color: var(--text-primary);margin-bottom: 14px;padding-bottom: 14px;border-bottom: 1px solid rgba(0,0,0,0.06);line-height: 1.5}.notif-detail-full{font-size: 0.88rem;color: var(--text-secondary);line-height: 1.75;margin-bottom: 22px}.notif-detail-actions{display: flex;gap: 10px}.notif-detail-actions .btn{flex: 1;justify-content: center}@media (max-width: 500px){.notif-detail-modal{max-width: calc(100vw - 32px) !important}.notif-detail-hero{padding: 30px 18px 18px !important;gap: 12px !important}.notif-detail-logo{width: 60px !important;height: 60px !important}.notif-detail-hero-title{font-size: 1rem !important}.notif-detail-body{padding: 18px 20px 24px !important}.notif-detail-actions{flex-direction: column-reverse !important;gap: 12px !important}.notif-detail-actions .btn{width: 100% !important;padding: 12px !important}}:root{--blue: #2950aa;--blue-light: #3a6fd8;--blue-muted: rgba(41,80,170,0.08);--bg-primary: #ffffff;--bg-secondary: #f4f6fa;--bg: var(--bg-secondary);--text-primary: #1a1a2e;--text-secondary: #122044;--text-muted: #122044;--border-color: rgba(0,0,0,0.08);--shadow-md: 0 8px 32px rgba(0,0,0,0.08);--radius-md: 20px;--transition-smooth: 0.2s cubic-bezier(0.4,0,0.2,1);--transition-fast: 0.12s cubic-bezier(0.4,0,0.2,1);--font: 'Alexandria',sans-serif;--container-max: 1600px;--sidebar-bg: #ffffff;--sidebar-border: rgba(0,0,0,0.06);--topbar-bg: rgba(255,255,255,0.92);--sidebar-width: 260px;--mobile-topbar-height: 60px}[data-theme="dark"]{--bg-primary: #0f1014;--bg-secondary: #16171b;--bg: var(--bg-secondary);--text-primary: #f8fafc;--text-secondary: #ffffff;--text-muted: #ffffff;--border-color: rgba(255,255,255,0.08);--sidebar-bg: #121317;--sidebar-border: rgba(255,255,255,0.06);--topbar-bg: rgba(15,16,20,0.85);color-scheme: dark}*,*::before,*::after{margin: 0;padding: 0;box-sizing: border-box}html{-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-size: 16px;-webkit-text-size-adjust: 100%;text-size-adjust: 100%}body{font-family: var(--font);background: var(--bg-secondary);color: var(--text-primary);line-height: 1.6;overflow-x: hidden;min-height: 100vh}img{max-width: 100%;display: block;height: auto}a{text-decoration: none;color: inherit}ul{list-style: none}button{cursor: pointer;border: none;background: none;font-family: var(--font);color: inherit}input,textarea{font-family: var(--font);border: none;outline: none}.main-content{margin-left: var(--sidebar-width);min-height: 100vh;padding-bottom: 120px}.sidebar{position: fixed;top: 0;left: 0;bottom: 0;width: var(--sidebar-width);background: var(--sidebar-bg);z-index: 1000;overflow: hidden}@media (max-width: 900px){.main-content{margin-left: 0;padding-top: var(--mobile-topbar-height)}.sidebar{transform: translateX(-100%)}}.mobile-topbar{display: none;position: fixed;top: 0;left: 0;right: 0;height: var(--mobile-topbar-height);background: var(--topbar-bg);z-index: 999;align-items: center;justify-content: space-between;padding: 0 16px}@media (max-width: 900px){.mobile-topbar{display: flex}}.mobile-logo{width: 120px;height: 38px;object-fit: contain;display: block}.fade-in{transform: translateY(16px);transition: transform 0.35s ease-out;will-change: transform}.fade-in.visible{transform: translateY(0)}.container{max-width: var(--container-max);margin: 0 auto;padding: 0 24px}.ad-section{padding: 20px 0;background: var(--bg);min-height: calc(90px + 48px);overflow: hidden}@media (max-width: 768px){.ad-section{min-height: calc(250px + 48px)}}.ad-section--loaded{min-height: 0}.ad-label{font-size: 0.7rem;color: var(--text-muted);margin-top: 8px;text-transform: uppercase;letter-spacing: 1px}.stations-grid--skeleton:empty{min-height: 380px;background: linear-gradient(90deg,var(--bg-secondary) 0%,var(--border-color) 50%,var(--bg-secondary) 100%);background-size: 200% 100%;animation: shimmer 1.4s infinite;border-radius: 20px}@media (max-width: 768px){.stations-grid--skeleton:empty{min-height: 260px}}.stations-grid--skeleton:not(:empty){background: none;animation: none;min-height: 0}.main-player{display: flex;align-items: center;gap: 40px;padding: 32px;max-width: 700px;margin: 0 auto}.player-artwork{position: relative;flex-shrink: 0}.player-image{width: 180px;height: 180px;border-radius: var(--radius-lg);object-fit: cover;box-shadow: var(--shadow-md)}.player-pulse{position: absolute;inset: -8px;border-radius: calc(var(--radius-lg) + 8px);border: 2px solid var(--blue-light);opacity: 0;transition: opacity var(--transition-smooth)}.main-player.playing .player-pulse{opacity: 1;animation: pulse 2s ease-in-out infinite}.player-info{flex: 1;min-width: 0}.player-station-name{font-size: 1.5rem;font-weight: 700;margin-bottom: 4px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}.player-station-category{font-size: 0.9rem;color: var(--text-secondary);margin-bottom: 24px}.player-controls{display: flex;align-items: center;gap: 16px;margin-bottom: 20px}.player-btn{width: 44px;height: 44px;border-radius: 12px;display: flex;align-items: center;justify-content: center;background: rgba(0,0,0,0.04);border: 1px solid var(--border-color);color: var(--text-primary);transition: all var(--transition-fast)}.player-btn:hover{background: var(--blue-muted);border-color: var(--border-glow)}.player-btn .material-icons{font-size: 22px}.player-btn-main{width: 56px;height: 56px;background: var(--blue);border: none}.player-btn-main:hover{transform: scale(1.08);background: var(--blue-light)}.player-btn-main .material-icons{font-size: 28px}.volume-control{display: flex;align-items: center;gap: 12px}.volume-icon{font-size: 20px;color: var(--text-secondary);cursor: pointer;transition: color var(--transition-fast)}.volume-icon:hover{color: var(--blue-light)}.volume-slider{-webkit-appearance: none;appearance: none;width: 140px;height: 4px;border-radius: 8px;background: rgba(0,0,0,0.1);outline: none;cursor: pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance: none;appearance: none;width: 16px;height: 16px;border-radius: 8px;background: var(--blue-light);box-shadow: 0 0 8px var(--blue-glow);cursor: pointer;transition: transform var(--transition-fast)}.volume-slider::-webkit-slider-thumb:hover{transform: scale(1.3)}.volume-slider::-moz-range-thumb{width: 16px;height: 16px;border-radius: 8px;background: var(--blue-light);box-shadow: 0 0 8px var(--blue-glow);border: none;cursor: pointer}.volume-slider-sm{width: 80px}.volume-value{font-size: 0.8rem;color: var(--text-muted);min-width: 32px}.floating-player{position: fixed;bottom: 24px;left: calc(var(--sidebar-width,260px) + 24px);right: 24px;margin: 0 auto;max-width: var(--container-max);z-index: 900;background: rgba(255,255,255,0.95);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);border: 1px solid var(--border-color);border-radius: 60px;box-shadow: 0 8px 32px rgba(0,0,0,0.12);transform: translateY(calc(100% + 48px));transition: transform var(--transition-smooth)}.floating-player.active{transform: translateY(0)}.floating-player-inner{width: 100%;padding: 16px 32px;display: flex;align-items: center;justify-content: space-between;gap: 24px;position: relative}.floating-player-info{display: flex;align-items: center;gap: 12px;min-width: 0;flex: 1}.floating-player-img{width: 84px;height: 84px;border-radius: var(--radius-sm);object-fit: cover;flex-shrink: 0}.floating-player-logo-wrap{position: relative;flex-shrink: 0;width: 84px;height: 84px}.floating-player-logo-wrap .floating-player-img{width: 100%;height: 100%;border-radius: 50%;border: 2px solid #2950aa;transition: opacity 0.4s ease}.floating-nowplaying-logo{position: absolute;inset: 0;border-radius: 50%;background: linear-gradient(135deg,#1a237e,#2950aa);display: flex;align-items: center;justify-content: center;border: 2px solid #2950aa;opacity: 0;transition: opacity 0.4s ease;pointer-events: none}.floating-nowplaying-logo.visible{opacity: 1;display: flex !important}.floating-nowplaying-logo .material-icons{font-size: 28px;color: #fff;animation: npPulse 1.8s ease-in-out infinite}@keyframes npPulse{0%,100%{transform: scale(1);opacity: 1}50%{transform: scale(1.12);opacity: 0.75}}.floating-nowplaying-row{display: flex;flex-direction: column;align-items: flex-start;justify-content: center;gap: 2px;overflow: hidden;max-width: 100%;opacity: 0;transition: opacity 0.4s ease}.floating-nowplaying-row.visible{opacity: 1;display: flex !important}.floating-nowplaying-title{font-size: 1.1rem;font-weight: 700;color: var(--text-primary);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 220px;line-height: 1.2;transition: opacity 0.4s ease}.floating-nowplaying-artist{display: block;font-size: 0.72rem;font-weight: 400;color: var(--text-secondary,#888);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 220px;margin-top: 1px}.floating-nowplaying-title.scrolling{animation: npScroll 10s linear infinite;max-width: none;display: inline-block;padding-right: 40px}@keyframes npScroll{0%{transform: translateX(0)}100%{transform: translateX(-60%)}}.floating-player-name-row{transition: opacity 0.4s ease}.floating-player-name-row.hidden{opacity: 0;pointer-events: none}.floating-player-flag-inline{display: inline-flex;align-items: center;justify-content: center;width: 22px;height: 22px;border-radius: 50%;overflow: hidden;border: 2px solid rgba(41,80,170,0.35);box-shadow: 0 1px 4px rgba(0,0,0,0.18);background: #fff;flex-shrink: 0}.floating-player-flag-inline img{width: 100%;height: 100%;object-fit: cover;display: block;border-radius: 50%}.floating-player-cat-icon{display: inline-flex;align-items: center;justify-content: center;width: 22px;height: 22px;border-radius: 50%;background: rgba(41,80,170,0.1);border: 2px solid rgba(41,80,170,0.2);flex-shrink: 0;color: var(--blue,#2950aa)}.floating-player-cat-icon .material-icons{font-size: 12px;line-height: 1;font-family: 'Material Icons',sans-serif;font-style: normal;font-weight: normal;text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased}.floating-player-name{font-size: 1.1rem;font-weight: 700;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-bottom: 4px}.floating-player-cat{font-size: 0.9rem;color: var(--text-muted)}.floating-player-controls{position: absolute;left: 50%;transform: translateX(-50%);display: flex;align-items: center;gap: 12px}.floating-btn{width: 48px;height: 48px;border-radius: 30px;display: flex;align-items: center;justify-content: center;color: var(--text-primary);transition: all var(--transition-fast)}.floating-btn:hover{background: var(--blue-muted)}.floating-btn .material-icons{font-size: 26px}.floating-btn-main{width: 56px;height: 56px;background: var(--blue);box-shadow: 0 4px 16px var(--blue-glow);color: #ffffff}.floating-btn-main:hover{background: var(--blue-light)}.floating-btn-main .material-icons{color: #ffffff}.floating-player-volume{display: flex;align-items: center;justify-content: flex-end;gap: 8px;flex-shrink: 0;flex: 1}.floating-player-volume .material-icons{font-size: 20px;color: var(--text-secondary);cursor: pointer}@media (max-width: 900px){.floating-player{left: 24px}}@media (max-width: 768px){.main-player{flex-direction: column;text-align: center;padding: 24px;gap: 24px}.player-image{width: 140px;height: 140px}.player-controls{justify-content: center}.volume-control{justify-content: center}.floating-player-volume{display: none}.floating-player{bottom: 16px;left: 16px;right: 16px}.floating-player-inner{padding: 12px 20px;gap: 16px;justify-content: space-between}.floating-player-controls{position: static;transform: none}}@media (max-width: 480px){.player-image{width: 120px;height: 120px}.floating-player{bottom: 12px;left: 10px;right: 10px;border-radius: 40px}.floating-player-inner{padding: 10px 14px;gap: 10px}.floating-player-logo-wrap{width: 48px;height: 48px;flex-shrink: 0}.floating-player-flag{width: 16px;height: 16px;bottom: -5px;right: 14px}.floating-player-text{flex: 1;min-width: 0;gap: 3px}.floating-player-name{font-size: 0.9rem;font-weight: 700;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin: 0}.floating-player-cat-row{display: flex;align-items: center;gap: 5px;flex-wrap: nowrap}.floating-live-badge{font-size: 0.55rem;padding: 2px 6px;white-space: nowrap;flex-shrink: 0}.floating-player-cat-icon{width: 24px;height: 24px;flex-shrink: 0}.floating-player-cat-icon .material-icons{font-size: 14px}.floating-inline-fav{width: 32px;height: 32px;flex-shrink: 0}.floating-inline-fav .material-icons{font-size: 22px}.floating-btn-main{width: 48px;height: 48px;flex-shrink: 0}.floating-btn-main .material-icons{font-size: 26px}}.floating-player-text{display: flex;flex-direction: column;gap: 4px;min-width: 0}.floating-player-name-row{display: flex;align-items: center;gap: 6px;min-width: 0}.floating-player-name-row .floating-player-name{margin: 0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}.floating-inline-fav{flex-shrink: 0;width: 26px;height: 26px;border-radius: 50%;border: none;background: transparent;color: var(--text-primary);cursor: pointer;display: flex;align-items: center;justify-content: center;padding: 0;transition: color 0.2s ease,transform 0.2s ease,background 0.2s ease}.floating-inline-fav .material-icons{font-size: 18px;line-height: 1}.floating-inline-fav:hover{color: var(--blue);background: var(--bg-secondary);transform: scale(1.15)}.floating-inline-fav.active{color: var(--blue)}.floating-inline-fav.active .material-icons{color: var(--blue)}.floating-player-cat-row{display: flex;align-items: center;gap: 8px}.floating-live-badge{display: inline-flex;align-items: center;gap: 5px;padding: 2px 8px;border-radius: 99px;background: rgba(229,57,53,0.12);border: 1px solid rgba(229,57,53,0.25);font-size: 0.62rem;font-weight: 800;letter-spacing: 0.06em;color: #e53935;white-space: nowrap;flex-shrink: 0;text-transform: uppercase}.floating-live-dot{width: 6px;height: 6px;border-radius: 50%;background: #e53935;flex-shrink: 0;animation: livePulse 1.4s ease-in-out infinite}@keyframes livePulse{0%,100%{opacity: 1;transform: scale(1);box-shadow: 0 0 0 0 rgba(229,57,53,0.5)}50%{opacity: 0.7;transform: scale(1.2);box-shadow: 0 0 0 4px rgba(229,57,53,0)}}.floating-live-badge.offline{background: rgba(158,158,158,0.12);border: 1px solid rgba(158,158,158,0.25);color: #757575}.floating-live-badge.offline .floating-live-dot{background: #757575;animation: none;box-shadow: none}[data-theme="dark"] .floating-live-badge.offline{background: rgba(255,255,255,0.1);border-color: rgba(255,255,255,0.2);color: var(--text-secondary)}[data-theme="dark"] .floating-live-badge.offline .floating-live-dot{background: var(--text-secondary)}[data-theme="dark"] .floating-live-badge{background: rgba(255,68,68,0.15)}.auth-overlay{position: fixed;inset: 0;z-index: 2000;background: rgba(10,20,50,0.55);backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px);display: flex;align-items: center;justify-content: center;padding: 20px;opacity: 0;transition: opacity 0.25s ease}.auth-overlay[hidden]{display: none !important}.auth-overlay.visible{opacity: 1}.auth-modal{background: #ffffff;border-radius: 20px;box-shadow: 0 32px 80px rgba(0,0,0,0.22),0 8px 24px rgba(41,80,170,0.12);width: 100%;max-width: 850px;display: flex;flex-direction: row;position: relative;transform: translateY(20px) scale(0.97);transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1),opacity 0.25s ease;opacity: 0;overflow: hidden}.auth-overlay.visible .auth-modal{transform: translateY(0) scale(1);opacity: 1}[data-theme="dark"] .auth-modal{background: #1a1b21;border: 1px solid rgba(255,255,255,0.08)}.auth-modal-left{flex: 1;background: linear-gradient(135deg,#050b14,#0f1c3a);padding: 40px;display: flex;flex-direction: column;justify-content: space-between;position: relative;color: #fff;min-height: 480px}.auth-modal-left::before{content: '';position: absolute;top: 0;right: 0;bottom: 0;left: 0;background: radial-gradient(circle at top right,rgba(255,255,255,0.1),transparent 50%),radial-gradient(circle at bottom left,rgba(255,255,255,0.05),transparent 50%);pointer-events: none}.auth-left-top{position: relative;z-index: 2;width: 100%;display: flex;justify-content: center;margin-bottom: 30px}.auth-left-brand{position: relative;z-index: 2;margin-top: auto;width: 100%}.auth-left-logo{max-height: 70px;object-fit: contain;border-radius: 8px;border: none;box-shadow: 0 4px 16px rgba(0,0,0,0.2)}.auth-left-icon{width: 64px;height: 64px;border-radius: 16px;background: rgba(255,255,255,0.15);backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);display: flex;align-items: center;justify-content: center;margin-bottom: 24px;box-shadow: 0 8px 32px rgba(0,0,0,0.1);border: 1px solid rgba(255,255,255,0.2)}.auth-left-icon .material-icons{font-size: 32px;color: #fff}.auth-left-title{font-size: 1.8rem;font-weight: 800;line-height: 1.25;margin-bottom: 16px;color: #ffffff}.auth-left-desc{font-size: 0.95rem;line-height: 1.6;color: rgba(255,255,255,0.85)}.auth-modal-right{flex: 1.1;padding: 32px 32px 28px;background: #ffffff;position: relative;display: flex;flex-direction: column}[data-theme="dark"] .auth-modal-right{background: #1a1b21}.auth-close{position: absolute;top: 14px;right: 14px;width: 34px;height: 34px;border-radius: 50%;border: none;background: rgba(0,0,0,0.055);color: var(--text-muted,#94a3b8);cursor: pointer;display: flex;align-items: center;justify-content: center;transition: all 0.18s ease;flex-shrink: 0}.auth-close:hover{background: rgba(0,0,0,0.1);color: var(--text-primary,#1e293b);transform: rotate(90deg)}[data-theme="dark"] .auth-close{background: rgba(255,255,255,0.08)}[data-theme="dark"] .auth-close:hover{background: rgba(255,255,255,0.15);color: #fff}.auth-close .material-icons{font-size: 18px}.auth-brand{display: flex;flex-direction: column;align-items: center;text-align: center;gap: 12px;margin-bottom: 24px}.auth-brand-icon{width: 46px;height: 46px;border-radius: 12px;background: linear-gradient(135deg,#1e3d7a,#3a6fd8);display: flex;align-items: center;justify-content: center;box-shadow: 0 6px 18px rgba(41,80,170,0.3);flex-shrink: 0}.auth-brand-icon .material-icons{font-size: 24px;color: #fff}.auth-brand-name{font-size: 1.1rem;font-weight: 700;color: var(--text-primary,#1e293b);line-height: 1.2}.auth-brand-name strong{color: #2950aa}.auth-brand-sub{font-size: 0.75rem;color: var(--text-muted,#94a3b8);margin-top: 1px}.auth-tabs{display: flex;gap: 4px;background: #f1f5f9;border-radius: 10px;padding: 4px;margin-bottom: 24px}[data-theme="dark"] .auth-tabs{background: #121316}.auth-tab{flex: 1;display: flex;align-items: center;justify-content: center;gap: 6px;padding: 9px 12px;border-radius: 8px;border: none;background: transparent;font-size: 0.83rem;font-weight: 600;color: var(--text-muted,#94a3b8);cursor: pointer;transition: all 0.2s ease;font-family: inherit}.auth-tab .material-icons{font-size: 16px}.auth-tab.active{background: #ffffff;color: #2950aa;box-shadow: 0 2px 8px rgba(0,0,0,0.1)}[data-theme="dark"] .auth-tab.active{background: #1a1b21;color: var(--blue-light);box-shadow: 0 2px 12px rgba(0,0,0,0.3)}.auth-panel{display: none}.auth-panel.active{display: block}.auth-form{display: flex;flex-direction: column;gap: 12px}.auth-field{position: relative;display: flex;align-items: center}.auth-field-icon{position: absolute;left: 13px;font-size: 19px;color: var(--text-muted,#94a3b8);pointer-events: none;transition: color 0.18s}.auth-input{width: 100%;padding: 12px 42px 12px 44px;border-radius: 10px;border: 1.5px solid #e2e8f0;background: #f8fafc;font-size: 0.88rem;font-family: inherit;color: var(--text-primary,#1e293b);transition: all 0.18s ease;outline: none}.auth-input::placeholder{color: #b0bec5}.auth-input:focus{border-color: #2950aa;background: #ffffff;box-shadow: 0 0 0 3px rgba(41,80,170,0.1)}[data-theme="dark"] .auth-input{background: #121316;border-color: rgba(255,255,255,0.08);color: #f8fafc}[data-theme="dark"] .auth-input::placeholder{color: #4b5563}[data-theme="dark"] .auth-input:focus{background: #1a1b21;border-color: #3b82f6;box-shadow: 0 0 0 3px rgba(59,130,246,0.15)}.auth-field:focus-within .auth-field-icon{color: #2950aa}[data-theme="dark"] .auth-field:focus-within .auth-field-icon{color: #3b82f6}.auth-eye{position: absolute;right: 12px;background: none;border: none;cursor: pointer;color: var(--text-muted,#94a3b8);display: flex;align-items: center;padding: 0;transition: color 0.18s}.auth-eye:hover{color: #2950aa}[data-theme="dark"] .auth-eye:hover{color: #3b82f6}.auth-eye .material-icons{font-size: 19px}.auth-row{display: flex;align-items: center;justify-content: space-between;gap: 8px;margin: -2px 0}.auth-checkbox{display: flex;align-items: center;gap: 7px;font-size: 0.8rem;color: var(--text-secondary,#64748b);cursor: pointer;user-select: none}.auth-checkbox input[type="checkbox"]{width: 16px;height: 16px;accent-color: #2950aa;cursor: pointer;flex-shrink: 0}[data-theme="dark"] .auth-checkbox input[type="checkbox"]{accent-color: var(--blue-light,#3b82f6)}.auth-tos{margin: -2px 0;line-height: 1.5}.auth-link{font-size: 0.8rem;color: #2950aa;text-decoration: none;font-weight: 500;white-space: nowrap}.auth-link:hover{text-decoration: underline}[data-theme="dark"] .auth-link{color: var(--blue-light,#3b82f6)}[data-theme="dark"] .auth-link:hover{color: #93c5fd}.auth-btn-primary{display: flex;align-items: center;justify-content: center;gap: 8px;padding: 13px;border-radius: 10px;border: none;background: var(--blue);color: #ffffff;font-size: 0.9rem;font-weight: 700;font-family: inherit;cursor: pointer;margin-top: 4px;transition: all 0.2s ease}.auth-btn-primary:hover{transform: translateY(-2px);background: var(--blue-light)}.auth-btn-primary:active{transform: translateY(0)}.auth-btn-primary .material-icons{font-size: 19px}.auth-btn-primary.loading{pointer-events: none;opacity: 0.75}.auth-btn-primary.loading::after{content: '';width: 16px;height: 16px;border: 2px solid rgba(255,255,255,0.4);border-top-color: #fff;border-radius: 50%;animation: authSpin 0.7s linear infinite;margin-left: 6px}@keyframes authSpin{to{transform: rotate(360deg)}}.auth-divider{display: flex;align-items: center;gap: 12px;font-size: 0.75rem;color: #b0bec5;margin: 4px 0}.auth-divider::before,.auth-divider::after{content: '';flex: 1;height: 1px;background: #e2e8f0}[data-theme="dark"] .auth-divider::before,[data-theme="dark"] .auth-divider::after{background: rgba(255,255,255,0.08)}.auth-social{display: flex;gap: 8px}.auth-social-btn{flex: 1;display: flex;align-items: center;justify-content: center;gap: 8px;padding: 10px 14px;border-radius: 10px;border: 1.5px solid #e2e8f0;background: #ffffff;font-size: 0.82rem;font-weight: 600;font-family: inherit;color: var(--text-primary,#1e293b);cursor: pointer;transition: all 0.18s ease}.auth-social-btn:hover{border-color: #c7d2fe;background: #f0f4ff;transform: translateY(-1px);box-shadow: 0 3px 10px rgba(0,0,0,0.07)}[data-theme="dark"] .auth-social-btn{background: #1a1b21;border-color: rgba(255,255,255,0.08);color: #f8fafc}[data-theme="dark"] .auth-social-btn:hover{background: #25262e;border-color: rgba(255,255,255,0.15)}.auth-strength{display: flex;align-items: center;gap: 10px;margin: -4px 0 0}.auth-strength-track{flex: 1;height: 4px;border-radius: 99px;background: #e2e8f0;overflow: hidden}[data-theme="dark"] .auth-strength-track{background: #121316}.auth-strength-fill{height: 100%;border-radius: 99px;width: 0%;transition: width 0.3s ease,background 0.3s ease}.auth-strength-label{font-size: 0.72rem;font-weight: 600;min-width: 60px;text-align: right}.auth-toast{position: fixed;bottom: 100px;left: 50%;transform: translateX(-50%) translateY(20px);background: #1e293b;color: #fff;padding: 12px 20px;border-radius: 10px;font-size: 0.85rem;font-weight: 500;z-index: 3000;opacity: 0;transition: all 0.3s ease;pointer-events: none;white-space: nowrap;box-shadow: 0 8px 24px rgba(0,0,0,0.2)}.auth-toast.show{opacity: 1;transform: translateX(-50%) translateY(0)}.auth-toast.success{background: #166534}.auth-toast.error{background: #991b1b}@media (max-width: 768px){.auth-modal{flex-direction: column;max-width: 420px;overflow: visible}.auth-modal-left{display: none}.auth-modal-right{padding: 32px 24px 28px;border-radius: 20px}[data-theme="dark"] .auth-modal-right{border-radius: 20px}}@media (max-width: 480px){.auth-modal-right{padding: 24px 20px 22px;border-radius: 16px}.auth-social{flex-direction: column}}.auth-field-msg{font-size: 0.73rem;font-weight: 500;padding: 3px 4px 0;min-height: 16px;line-height: 1.4;transition: color 0.18s}.auth-field-msg--error{color: #dc2626;display: flex;align-items: center;gap: 4px}.auth-field-msg--error::before{font-family: 'Material Icons';font-size: 13px;content: 'error_outline';flex-shrink: 0}.auth-field-msg--valid{color: #16a34a}@keyframes authShake{0%,100%{transform: translateX(0)}15%{transform: translateX(-6px)}35%{transform: translateX(6px)}55%{transform: translateX(-4px)}75%{transform: translateX(4px)}90%{transform: translateX(-2px)}}.auth-field.shake{animation: authShake 0.45s cubic-bezier(0.36,0.07,0.19,0.97)}.auth-tos.tos-error{color: #dc2626 !important;animation: authShake 0.45s cubic-bezier(0.36,0.07,0.19,0.97)}.auth-tos.tos-error a{color: #dc2626 !important}.auth-tos.tos-error input[type="checkbox"]{outline: 2px solid #dc2626;outline-offset: 1px;border-radius: 3px}.auth-forgot-btn{background: none;border: none;padding: 0;cursor: pointer;font-family: inherit}.auth-match{font-size: 0.75rem;font-weight: 600;display: flex;align-items: center;gap: 5px;min-height: 18px;margin: -6px 0 -2px;padding: 0 2px;transition: all 0.2s ease}.auth-match.match{color: #16a34a}.auth-match.mismatch{color: #dc2626}.auth-match::before{font-family: 'Material Icons';font-size: 14px}.auth-match.match::before{content: 'check_circle'}.auth-match.mismatch::before{content: 'cancel'}.auth-input.input-valid{border-color: #16a34a;box-shadow: 0 0 0 3px rgba(22,163,74,0.08)}.auth-input.input-error{border-color: #dc2626;box-shadow: 0 0 0 3px rgba(220,38,38,0.08)}[data-theme="dark"] .auth-input.input-error{background: rgba(220,38,38,0.05)}.auth-back-row{margin-bottom: 20px}.auth-back-btn{display: inline-flex;align-items: center;gap: 6px;background: none;border: none;font-family: inherit;font-size: 0.82rem;font-weight: 600;color: var(--text-muted,#94a3b8);cursor: pointer;padding: 6px 8px;border-radius: 8px;margin: -6px 0 0 -8px;transition: all 0.18s ease}.auth-back-btn:hover{background: #f1f5f9;color: #2950aa}.auth-back-btn .material-icons{font-size: 18px}.auth-forgot-header{text-align: center;margin-bottom: 22px}.auth-forgot-icon{width: 60px;height: 60px;border-radius: 16px;background: linear-gradient(135deg,rgba(41,80,170,0.1),rgba(58,111,216,0.06));border: 1.5px solid rgba(41,80,170,0.12);display: flex;align-items: center;justify-content: center;margin: 0 auto 14px}.auth-forgot-icon .material-icons{font-size: 30px;color: #2950aa}.auth-forgot-title{font-size: 1.15rem;font-weight: 800;color: var(--text-primary,#1e293b);margin-bottom: 8px;letter-spacing: -0.01em}.auth-forgot-desc{font-size: 0.83rem;color: var(--text-muted,#94a3b8);line-height: 1.6;max-width: 300px;margin: 0 auto}.auth-forgot-success{text-align: center;padding: 8px 0;animation: fadeInUp 0.4s ease}@keyframes fadeInUp{from{opacity: 0;transform: translateY(10px)}to{opacity: 1;transform: translateY(0)}}.auth-forgot-success-icon{width: 68px;height: 68px;border-radius: 50%;background: linear-gradient(135deg,#bbf7d0,#dcfce7);border: 2px solid #4ade80;display: flex;align-items: center;justify-content: center;margin: 0 auto 16px}.auth-forgot-success-icon .material-icons{font-size: 34px;color: #16a34a}.auth-forgot-success-title{font-size: 1.1rem;font-weight: 800;color: #166534;margin-bottom: 8px}.auth-forgot-success-desc{font-size: 0.83rem;color: var(--text-muted,#94a3b8);line-height: 1.6;margin-bottom: 20px}.auth-btn-outline{display: flex;align-items: center;justify-content: center;gap: 8px;width: 100%;padding: 12px;border-radius: 10px;border: 1.5px solid #2950aa;background: transparent;color: #2950aa;font-size: 0.88rem;font-weight: 700;font-family: inherit;cursor: pointer;transition: all 0.2s ease}.auth-btn-outline:hover{background: rgba(41,80,170,0.06);border-color: #1e3d7a;color: #1e3d7a}.auth-btn-outline .material-icons{font-size: 18px}:root{--pop-like-color : #f43f5e;--pop-fire-color : #f97316;--pop-active-color : #22c55e;--pop-score-color : #6366f1;--pop-plays-color : #38bdf8;--pop-badge-radius : 20px;--pop-stat-gap : 6px}.pop-stats{display : flex;align-items : center;flex-wrap : wrap;gap : 6px 10px;margin-top : 8px;padding-top : 8px;border-top : 1px solid rgba(255,255,255,0.06)}.pop-stat{display : flex;align-items : center;gap : 3px;font-size : 11px;color : rgba(255,255,255,0.45);letter-spacing : 0.3px;transition : color 0.3s}.pop-stat .material-icons{font-size : 13px}.pop-stat--live{color : var(--pop-active-color)}.pop-stat--live .material-icons{animation : pulse-dot 1.5s ease-in-out infinite}@keyframes pulse-dot{0%,100%{opacity: 1}50%{opacity: 0.4}}.like-btn{display : inline-flex;align-items : center;gap : 4px;padding : 5px 10px;border : 1px solid rgba(244,63,94,0.3);border-radius : var(--pop-badge-radius);background : transparent;color : rgba(255,255,255,0.5);font-size : 12px;cursor : pointer;transition : all 0.25s cubic-bezier(0.34,1.56,0.64,1);user-select : none;white-space : nowrap}.like-btn .material-icons{font-size : 15px;color : rgba(244,63,94,0.5);transition : transform 0.3s,color 0.25s}.like-btn:hover{border-color : var(--pop-like-color);color : var(--pop-like-color);background : rgba(244,63,94,0.08)}.like-btn:hover .material-icons{color : var(--pop-like-color);transform : scale(1.2)}.like-btn.liked{border-color : var(--pop-like-color);background : rgba(244,63,94,0.12);color : var(--pop-like-color)}.like-btn.liked .material-icons{color : var(--pop-like-color)}.like-btn.like-pulse .material-icons{animation : like-pop 0.45s cubic-bezier(0.34,1.56,0.64,1)}@keyframes like-pop{0%{transform: scale(1)}40%{transform: scale(1.6)}70%{transform: scale(0.9)}100%{transform: scale(1)}}.badge-trending{display : inline-flex;align-items : center;gap : 3px;padding : 3px 8px;border-radius : var(--pop-badge-radius);background : linear-gradient(135deg,#f97316,#ef4444);color : #fff;font-size : 10px;font-weight : 700;letter-spacing : 0.5px;text-transform : uppercase;box-shadow : 0 2px 8px rgba(249,115,22,0.4)}.badge-trending .material-icons{font-size : 13px}.trending-section{background : linear-gradient(135deg,rgba(249,115,22,0.06) 0%,rgba(239,68,68,0.04) 100%);border : 1px solid rgba(249,115,22,0.15);border-radius : 16px;padding : 20px 24px;margin-bottom : 28px}.trending-section-header{display : flex;align-items : center;gap : 8px;margin-bottom : 14px;color : var(--pop-fire-color);font-size : 14px;font-weight : 700;text-transform : uppercase;letter-spacing : 1px}.trending-section-header .material-icons{font-size : 20px}#trendingList{display : flex;flex-wrap : wrap;gap : 8px}.trending-item{display : flex;align-items : center;gap : 6px;padding : 6px 12px;background : var(--bg-card);border : 1px solid rgba(249,115,22,0.2);border-radius : 30px;cursor : pointer;transition : all 0.2s;font-size : 13px;color : var(--text-primary)}.trending-item:hover{background : rgba(249,115,22,0.1);border-color : rgba(249,115,22,0.4);transform : translateY(-1px)}.trending-rank{font-size : 11px;font-weight : 700;color : var(--pop-fire-color);min-width : 20px}.trending-fire{font-size : 15px !important;color : var(--pop-fire-color) !important;animation : fire-flicker 1.2s ease-in-out infinite alternate}@keyframes fire-flicker{from{opacity: 0.7;transform: scale(1)}to{opacity: 1;transform: scale(1.15)}}.trending-name{font-weight : 600;max-width : 120px;overflow : hidden;text-overflow: ellipsis;white-space : nowrap}.trending-logo{width : 28px;height : 28px;border-radius : 50%;object-fit : cover;flex-shrink : 0;border : 1px solid rgba(249,115,22,0.3);background : rgba(255,255,255,0.05)}.trending-logo-fallback{display : flex;align-items : center;justify-content: center;width : 28px;height : 28px;border-radius : 50%;background : rgba(249,115,22,0.12);border : 1px solid rgba(249,115,22,0.3);flex-shrink : 0}.floating-popularity{display : flex;align-items : center;gap : 12px;padding : 8px 14px;background : rgba(255,255,255,0.04);border-top : 1px solid rgba(255,255,255,0.06);font-size : 12px;color : rgba(255,255,255,0.5)}.floating-popularity-stat{display : flex;align-items : center;gap : 4px}.floating-popularity-stat .material-icons{font-size : 14px}.floating-popularity-stat.stat-live{color : var(--pop-active-color)}#floatingActiveUsers{font-weight : 700;font-variant-numeric: tabular-nums}.station-card .rank-badge{position : absolute;top : 10px;left : 10px;width : 26px;height : 26px;border-radius : 50%;background : linear-gradient(135deg,#6366f1,#8b5cf6);color : #fff;font-size : 12px;font-weight : 900;display : flex;align-items : center;justify-content: center;box-shadow : 0 2px 8px rgba(99,102,241,0.5);z-index : 2}.station-card:nth-child(1) .rank-badge{background: linear-gradient(135deg,#f59e0b,#fbbf24);box-shadow: 0 2px 10px rgba(245,158,11,0.6)}.station-card:nth-child(2) .rank-badge{background: linear-gradient(135deg,#9ca3af,#d1d5db);box-shadow: 0 2px 8px rgba(156,163,175,0.4)}.station-card:nth-child(3) .rank-badge{background: linear-gradient(135deg,#dc9c5a,#e6ad72);box-shadow: 0 2px 8px rgba(220,156,90,0.4)}@media (max-width: 640px){.trending-section{padding : 14px 16px}.trending-item{font-size : 12px;padding : 5px 10px}.pop-stats{gap : 4px 8px}.like-btn{padding : 4px 8px;font-size : 11px}}