@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap";
.sidebar{z-index:1000;background:#fff;border-right:1px solid #e5e7eb;flex-direction:column;height:100vh;font-family:Inter,sans-serif;transition:width .3s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;left:0;box-shadow:1px 0 2px #0000000d}.sidebar-mask{-webkit-backdrop-filter:blur(4px);z-index:999;cursor:pointer;background-color:#ffffff1a;animation:.3s sidebarFadeIn;position:fixed;inset:0}@keyframes sidebarFadeIn{0%{opacity:0}to{opacity:1}}.sidebar.expanded{-webkit-backdrop-filter:blur(20px);background:#ffffffa6;border-right:1px solid #ffffff4d;border-radius:0 24px 24px 0;width:280px;box-shadow:10px 0 50px #0000001a}.sidebar.collapsed{width:80px}.sidebar-header{align-items:center;height:64px;margin-bottom:8px;padding:16px;display:flex}.sidebar-header.expanded{justify-content:space-between;height:80px;padding:8px 16px}.sidebar-header.collapsed{justify-content:center}.sidebar-title{color:#111827;letter-spacing:-.025em;white-space:nowrap;margin:0 0 0 8px;font-size:20px;font-weight:700}.sidebar-logo-container{align-items:center;max-width:200px;height:100%;display:flex}.sidebar-logo-img{object-fit:contain;width:auto;height:52px}.sidebar-toggle-btn{color:#4b5563;cursor:pointer;background:0 0;border:none;border-radius:12px;justify-content:center;align-items:center;padding:8px;transition:background-color .2s;display:flex}.sidebar-toggle-btn:hover{background-color:#f3f4f6}.sidebar-content{flex:1;padding:0 12px;overflow:hidden auto}.custom-scrollbar::-webkit-scrollbar{width:4px}.custom-scrollbar::-webkit-scrollbar-track{background:0 0}.custom-scrollbar::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:10px}.sidebar-section{border-top:1px solid #f3f4f6;margin-top:16px;padding-top:16px}.sidebar-section:first-child{border-top:none;margin-top:0;padding-top:0}.sidebar-section-title{color:#8c8c8c;text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;padding:0 16px;font-size:11px;font-weight:500}.sidebar.collapsed .sidebar-section-title{display:none}.sidebar.collapsed .sidebar-section{border-top:1px solid #f3f4f6;margin-top:12px;padding-top:12px}.sidebar-item{cursor:pointer;width:100%;color:inherit;background:0 0;border:none;border-radius:16px;align-items:center;margin-bottom:4px;font-family:inherit;text-decoration:none;transition:all .2s;display:flex;position:relative}.sidebar.expanded .sidebar-item{padding:12px 16px}.sidebar.collapsed .sidebar-item{justify-content:center;padding:12px}.sidebar-tooltip{color:#fff;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;z-index:1050;background:#1f2937;border-radius:6px;margin-left:10px;padding:4px 10px;font-size:12px;transition:opacity .2s;position:absolute;top:50%;left:100%;transform:translateY(-50%);box-shadow:0 2px 5px #0003}.sidebar.collapsed .sidebar-item:hover .sidebar-tooltip{opacity:1;visibility:visible}.sidebar-item.default{color:#4b5563;margin-bottom:2px}.sidebar-item.default:hover{color:#111827;background-color:#0000000a}.sidebar-item.default.active{color:#000;background-color:#00000014;font-weight:600}.sidebar-item.accent{color:#2563eb;background-color:#2563eb14;border-radius:12px;margin-bottom:6px}.sidebar-item.accent:hover{background-color:#2563eb26}.sidebar-item.accent .sidebar-icon{color:#2563eb}.sidebar-item.accent .sidebar-label{color:#2563eb;font-weight:400}.sidebar-item.danger{color:#4b5563}.sidebar-item.danger:hover{color:#dc2626;background-color:#fef2f2}.sidebar-icon{flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;display:flex}.sidebar-label{white-space:nowrap;text-overflow:ellipsis;margin-left:16px;font-size:14px;font-weight:500;overflow:hidden}.sidebar-footer{border-top:1px solid #f3f4f6;padding:12px}.sidebar-language-btn{cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:16px;align-items:center;margin-bottom:8px;padding:12px;transition:background-color .2s;display:flex;position:relative}.sidebar-language-btn:hover{background-color:#f3f4f6}.sidebar-language-btn.collapsed{justify-content:center}.language-flag-container{flex-shrink:0;justify-content:center;align-items:center;width:28px;height:16px;display:flex}.rounded-flag{border-radius:6px;justify-content:center;align-items:center;width:28px;height:18px;display:flex;overflow:hidden;box-shadow:0 1px 2px #0000001a}.rounded-flag svg{width:100%;height:100%}.lang-flag{border-radius:4px;justify-content:center;align-items:center;width:28px;height:18px;display:flex;overflow:hidden}.lang-flag svg{width:100%;height:100%}.language-name{color:#374151;margin-left:16px;font-size:14px;font-weight:500}.language-chevron{color:#9ca3af;margin-left:auto}.language-popup{z-index:1060;background:#fff;border:1px solid #e5e7eb;border-radius:12px;min-width:180px;margin-bottom:8px;padding:6px;position:absolute;bottom:100%;left:0;right:0;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.sidebar.collapsed .language-popup{min-width:150px;margin-left:10px;bottom:0;left:100%}.language-option{cursor:pointer;color:#374151;background:0 0;border:none;border-radius:8px;align-items:center;gap:10px;width:100%;padding:8px 12px;font-size:14px;transition:background-color .2s;display:flex}.language-option:hover{background-color:#f3f4f6}.language-option.active{color:#2563eb;background-color:#eff6ff;font-weight:500}.lang-flag{font-size:16px}@media (max-width:768px){.sidebar{display:none}.mobile-header{-webkit-backdrop-filter:blur(12px);z-index:1000;background:#ffffffd9;border-bottom:1px solid #0000000d;justify-content:space-between;align-items:center;height:64px;padding:0 20px;display:flex;position:fixed;top:0;left:0;right:0}.mobile-header-logo{align-items:center;height:100%;display:flex}.mobile-header-logo .sidebar-logo-img{object-fit:contain;width:auto;height:44px}.mobile-header-actions{align-items:center;gap:16px;display:flex}.mobile-language-trigger{cursor:pointer;position:relative}.mobile-user-avatar{object-fit:cover;border:2px solid #2563eb1a;border-radius:50%;width:36px;height:36px;transition:transform .2s,border-color .2s}.mobile-user-avatar:hover{border-color:#2563eb4d;transform:scale(1.05)}.mobile-bottom-nav{-webkit-backdrop-filter:blur(16px);height:72px;padding-bottom:env(safe-area-inset-bottom);z-index:1000;background:#ffffffe6;border-top:1px solid #0000000d;justify-content:space-around;align-items:center;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -4px 20px #0000000a}.mobile-nav-item{color:#9ca3af;cursor:pointer;background:0 0;border:none;flex-direction:column;flex:1;align-items:center;gap:8px;min-width:0;padding:6px 2px;transition:all .2s;display:flex}.mobile-nav-item.active{color:#2563eb}.mobile-nav-label{text-transform:uppercase;letter-spacing:.01em;white-space:nowrap;text-overflow:ellipsis;text-align:center;width:100%;font-size:9px;font-weight:700;overflow:hidden}.mobile-menu-overlay{z-index:2000;background:#fff;flex-direction:column;padding:24px;animation:.3s ease-out mobileMenuSlideUp;display:flex;position:fixed;inset:0}@keyframes mobileMenuSlideUp{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.mobile-menu-header{justify-content:space-between;align-items:center;margin-bottom:32px;display:flex}.mobile-menu-title{font-size:24px;font-weight:800}.mobile-menu-close{cursor:pointer;background:#f3f4f6;border:none;border-radius:50%;padding:10px}.mobile-menu-content{flex-direction:column;flex:1;display:flex;overflow-y:auto}.mobile-menu-section{margin-bottom:32px}.mobile-section-title{color:#9ca3af;text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px;padding-left:4px;font-size:11px;font-weight:700}.mobile-menu-btn{cursor:pointer;border:none;border-radius:16px;justify-content:space-between;align-items:center;width:100%;margin-bottom:12px;padding:16px;transition:all .2s;display:flex}.mobile-menu-btn:active{transform:scale(.97)}.mobile-menu-btn.default{color:#111827;background:#f8f9fa}.mobile-menu-btn.accent{color:#2563eb;background:#eff6ff}.mobile-menu-btn.danger{color:#dc2626;background:#fef2f2}.mobile-menu-btn-content{align-items:center;gap:16px;display:flex}.mobile-menu-btn-label{font-size:17px;font-weight:600}.mobile-menu-btn-chevron{opacity:.3}.mobile-menu-footer{margin-top:auto;padding-top:24px}.mobile-menu-lang{color:#111827;background:#f8f9fa;border-radius:16px;margin-bottom:24px;padding:16px}.mobile-menu-lang .language-name{flex:1;margin-left:16px;font-size:17px;font-weight:600}.mobile-menu-lang .language-chevron{opacity:.3}}
*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f5f5f7;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.app{width:100vw;height:100vh;overflow:hidden}.app.app-auth{height:auto;min-height:100vh;overflow-y:auto}.loading-screen{color:#1d1d1f;background:#f5f5f7;justify-content:center;align-items:center;width:100vw;height:100vh;font-size:1.2rem;font-weight:500;display:flex}.location-link{cursor:pointer;text-decoration:none;transition:color .2s}.location-link:hover{color:#000;text-decoration:underline}.thumbnail-overlay{opacity:0;z-index:2;background:#0003;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.mosaic-card:hover .thumbnail-overlay,.favorite-card:hover .thumbnail-overlay,.suggestion-card:hover .thumbnail-overlay,.popup-thumbnail:hover .thumbnail-overlay{opacity:1}.play-icon-circle{-webkit-backdrop-filter:blur(4px);color:#fff;background:#fff3;border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;display:flex}.play-icon-circle svg,.play-icon-circle span{margin-left:3px}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.spinner .path{stroke:#007aff!important}
.content-container{scrollbar-width:thin;scrollbar-color:#333 transparent;scroll-behavior:smooth;transition:all .3s;position:fixed;inset:0 0 0 80px;overflow:auto}.content-container::-webkit-scrollbar{width:6px}.content-container::-webkit-scrollbar-track{background:0 0}.content-container::-webkit-scrollbar-thumb{background-color:#333;border-radius:10px}.content-container::-webkit-scrollbar-thumb:hover{background-color:#444}.sidebar-overlay{z-index:999;cursor:pointer;background-color:#0006;transition:opacity .3s;position:fixed;inset:0}@media (max-width:768px){.content-container{top:64px;bottom:72px;left:0}}