/* ─── Reset & Base ─── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: #081220; }
html, body { width: 100%; min-height: 100%; background: transparent; }
body { font-family: 'Poppins', 'Inter', sans-serif; color: #fff; overflow-x: hidden; height: 100vh; width: 100vw; background: transparent; }

/* ─── UNIVERSE BACKGROUND ─── */
.universe { position: fixed; inset: 0; z-index: -10; overflow: hidden; background: radial-gradient(ellipse 80% 70% at 50% 40%, #2b7be0 0%, #1a5cb5 25%, #0d3a7a 55%, #061f4a 85%, #020d24 100%); pointer-events: none; }
.nebula { position: absolute; inset: -30%; pointer-events: none; background: radial-gradient(ellipse 45% 35% at 20% 25%, rgba(80,180,255,.55) 0%, rgba(40,130,240,.25) 55%, transparent 80%), radial-gradient(ellipse 50% 40% at 80% 70%, rgba(60,170,255,.50) 0%, rgba(30,100,230,.22) 55%, transparent 80%); filter: blur(60px); animation: nebulaDrift 24s ease-in-out infinite alternate; }
@keyframes nebulaDrift { 0% { transform: scale(1) translate3d(-1.5%, -1%, 0); } 50% { transform: scale(1.05) translate3d(1.5%, .5%, 0); } 100% { transform: scale(1.02) translate3d(-.5%, 1.5%, 0); } }
.core-glow { position: absolute; width: 65vw; height: 65vw; max-width: 950px; max-height: 950px; left: 50%; top: 47%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(35,110,240,.10) 0%, rgba(18,70,165,.045) 35%, transparent 70%); filter: blur(35px); pointer-events: none; animation: corePulse 11s ease-in-out infinite alternate; }
@keyframes corePulse { 0% { transform: translate(-50%, -50%) scale(.94); opacity: .65; } 100% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; } }
#space { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: block; }
.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 70% 20%, rgba(0,0,0,0.20) 0%, rgba(8,18,32,0.85) 90%); z-index: 1; }

/* ─── Transparent container overrides ─── */
#homepageContainer, .pro-studio-root, .studio-main, .studio-views, .studio-sidebar { background: transparent !important; }

/* ─── Auth container ─── */
#authContainer { display: none !important; position: fixed; top: 0; left: 0; width: 100%; height: 100%; justify-content: center; align-items: center; z-index: 1000; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; }
#authContainer.visible { display: flex !important; }
body.pb-auth-open #homepageMainContent, body.pb-auth-open #homepageGlobeWrap { visibility: hidden !important; }

/* ─── Semi-transparent overlays with blur ─── */
.studio-sidebar { background: rgba(8,18,32,0.80) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; }
.view-header { backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; }
.dashboard-card, .module-card, .pricing-card-pro, .community-card, .settings-card, .help-card, .tracker-row-pro, .tracker-png-display-pro, .intro-video-section>div, .feature-block, .info-page, .blog-card, .blog-card-compact, .auth-card, .signup-modal, .signup-popup, .cookie-consent, .faq-item, .contact-grid, .billing-item, .pricing-trust-pro .trust-item { background: rgba(8,18,32,0.75) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; }
.dashboard-card { background: rgba(10,20,35,0.70) !important; }
.module-card { background: rgba(10,20,35,0.70) !important; }
.pricing-card-pro { background: rgba(10,20,35,0.70) !important; }
.pricing-card-pro.popular { background: rgba(15,35,55,0.80) !important; }
.community-card { background: rgba(10,20,35,0.70) !important; }
.settings-card { background: rgba(10,20,35,0.70) !important; }
.help-card { background: rgba(10,20,35,0.70) !important; }
.tracker-row-pro { background: rgba(10,26,55,0.85) !important; }
.tracker-png-display-pro { background: rgba(15,40,75,0.50) !important; }
.feature-block { background: rgba(10,20,35,0.60) !important; }
.info-page { background: rgba(10,20,35,0.70) !important; }
.blog-card, .blog-card-compact { background: rgba(10,20,35,0.70) !important; }
.auth-card { background: rgba(10,20,35,0.85) !important; }
.signup-modal { background: linear-gradient(160deg, rgba(14,26,43,0.95) 0%, rgba(10,22,40,0.95) 100%) !important; }
.signup-popup { background: rgba(10,20,35,0.95) !important; }
.cookie-consent { background: rgba(10,20,35,0.95) !important; }
.faq-item { background: rgba(10,20,35,0.70) !important; }
.contact-grid { background: rgba(10,20,35,0.50) !important; }
.billing-item { background: rgba(255,255,255,0.04) !important; }

.cover-image-section::before { background: radial-gradient(circle at 70% 20%, rgba(0,0,0,0.20) 0%, rgba(8,18,32,0.75) 90%) !important; }
.hero-overlay-content { backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; }
#homepageContainer { background: transparent !important; }
.pro-studio-root { background: transparent !important; }
#view-worldmap .worldmap-container { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.course-player-container, .course-video-section, .lesson-sidebar, .course-content-area { background: rgba(8,18,32,0.85) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; }
.course-video-wrapper { background: rgba(10,26,47,0.60) !important; }
.lesson-sidebar { background: rgba(0,0,0,0.70) !important; }
.global-audio-player { background: rgba(6,12,23,0.92) !important; backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important; }
.producer-info-panel-pro { background: rgba(8,18,32,0.94) !important; backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important; }
.viewer-container { background-color: rgba(10,26,47,0.40) !important; }
#loginLoadingOverlay { background: rgba(3,12,26,0.92) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; }
#mobile-block-overlay { background: rgba(10,20,35,0.96) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; }
.homepage-footer { background: #081220 !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; }
.homepage-header { background: rgba(10,20,35,0.80) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; }
.nav-menu-mobile { background: rgba(10,20,35,0.96) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; }
.stripe-redirect-overlay { background: rgba(0,0,0,0.75) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; }
.academy-upgrade-popup { background: rgba(0,0,0,0.75) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; }
.academy-upgrade-popup .popup-content { background: rgba(10,20,35,0.95) !important; }
.stripe-success-toast { background: rgba(10,20,35,0.95) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; }
.tracker-header-bar .search-wrapper .tracker-suggestions { background: rgba(10,20,35,0.97) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; }
.user-dropdown { background: rgba(10,20,35,0.95) !important; backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important; }
.tracker-header-bar { background: rgba(8,18,32,0.90) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; }
.tracker-header-bar .search-wrapper input { background: rgba(255,255,255,0.08) !important; }
.tracker-header-bar .search-wrapper input:focus { background: rgba(255,255,255,0.12) !important; }
.course-nav-buttons .nav-btn { background: rgba(255,255,255,0.05) !important; }
.course-nav-buttons .nav-btn.primary-nav { background: linear-gradient(135deg, #7ac7f0, #2c7cb6) !important; }
.accordion-section { background: rgba(10,20,35,0.60) !important; }
.module-lock-overlay { background: rgba(0,0,0,0.55) !important; backdrop-filter: blur(2px) !important; -webkit-backdrop-filter: blur(2px) !important; }
.hero-title { text-shadow: 0 2px 20px rgba(0,0,0,0.50) !important; }
#space { z-index: -1; }
.universe { z-index: -10; }

/* ─── View content (CONSOLIDATED — single source of truth) ─── */
.view-content {
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease;
  pointer-events: none;
  display: none;
  flex-direction: column;
  position: relative;
  z-index: 1;
}
.view-content.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  display: flex;
}
.view-content:not(.active) { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.view-content.scrollable { overflow-y: auto !important; }
.studio-views { position: relative; flex: 1; min-height: 0; overflow: hidden; z-index: 1; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.fade-enter { animation: fadeIn 0.35s ease-out forwards; }

.hero-title, .feature-text h3, .pricing-header h2, .academy-header h2, .module-title, .sidebar-logo, .logo, .auth-logo, .pricing-card .plan, .homepage-header .logo, .nav-menu a, .header-btn, .dashboard-card h3, .dashboard-welcome h2 { font-family: 'Tomorrow', 'Clash Display', sans-serif; font-weight: 700; }

/* ─── AUTH ─── */
#authContainer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none !important; justify-content: center; align-items: center; z-index: 1000; }
#authContainer.visible { display: flex !important; }
body.pb-auth-open #homepageMainContent, body.pb-auth-open #homepageGlobeWrap { visibility: hidden !important; }
.auth-card { border-radius: 32px; padding: 2.5rem; width: 380px; text-align: center; border: 1px solid rgba(122,199,240,0.5); box-shadow: 0 20px 35px -12px black; position: relative; }
.auth-logo { font-size: 1.8rem; background: linear-gradient(135deg, #fff, #7ac7f0, #4aa0e0); -webkit-background-clip: text; background-clip: text; color: transparent; cursor: pointer; margin-bottom: 1.5rem; }
.auth-card input { width: 100%; padding: 0.8rem 1rem; margin: 0.5rem 0; background: rgba(255,255,255,0.1); border: 1px solid rgba(122,199,240,0.5); border-radius: 40px; color: white; font-family: inherit; }
.auth-card button { width: 100%; padding: 0.8rem; margin-top: 0.5rem; background: linear-gradient(135deg, #7ac7f0, #4aa0e0); border: none; border-radius: 40px; font-weight: bold; cursor: pointer; color: #0a2647; }
.auth-card .secondary { background: transparent; border: 1px solid #7ac7f0; color: white; }
.auth-card .auth-link { color: #7ac7f0; cursor: pointer; font-weight: 500; background: none; border: none; padding: 0; font-size: inherit; text-decoration: underline; transition: color 0.2s; }
.auth-card .auth-link:hover { color: #fff; }
.auth-card .back-link { display: block; margin-top: 0.8rem; color: #8aa6c9; font-size: 0.85rem; cursor: pointer; background: none; border: none; padding: 0; }
.auth-card .back-link:hover { color: #fff; }
.auth-state { display: none; }
.auth-state.active { display: block; }

@media (max-width: 1023px) { .auth-desktop-only { display: none !important; } .auth-mobile-message { display: block !important; } }
@media (min-width: 1024px) { .auth-mobile-message { display: none !important; } .auth-desktop-only { display: block !important; } }

/* ─── SIGNUP MODAL ─── */
.signup-modal-overlay { position: fixed; top: 0; right: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 20000; display: flex; justify-content: flex-end; align-items: stretch; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
.signup-modal-overlay.active { opacity: 1; pointer-events: auto; }
.signup-modal { width: 440px; max-width: 92%; height: 100vh; max-height: 100vh; overflow-y: auto; padding: 2.5rem 2.2rem; border-left: 2px solid rgba(122,199,240,0.25); box-shadow: -10px 0 60px rgba(0,0,0,0.7); transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.22,1,0.36,1); display: flex; flex-direction: column; justify-content: center; }
.signup-modal-overlay.active .signup-modal { transform: translateX(0); }
.signup-modal .close-signup { position: absolute; top: 1.5rem; right: 1.5rem; background: rgba(255,255,255,0.08); border: none; color: #aaa; font-size: 1.4rem; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; backdrop-filter: blur(4px); }
.signup-modal .close-signup:hover { background: rgba(255,255,255,0.16); color: #fff; transform: rotate(90deg); }
.signup-modal h2 { font-family: 'Tomorrow', sans-serif; font-size: 2rem; margin-bottom: 0.4rem; background: linear-gradient(135deg, #fff, #7ac7f0); -webkit-background-clip: text; background-clip: text; color: transparent; text-align: left; }
.signup-modal .subtitle { color: #8aa6c9; font-size: 0.9rem; margin-bottom: 2rem; text-align: left; }
.signup-modal .input-group { position: relative; margin-bottom: 1rem; }
.signup-modal .input-group .input-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #5a7a9a; font-size: 0.9rem; pointer-events: none; }
.signup-modal input { width: 100%; padding: 0.9rem 1rem 0.9rem 2.8rem; margin: 0; background: rgba(255,255,255,0.06); border: 1.5px solid rgba(122,199,240,0.2); border-radius: 14px; color: white; font-family: 'Poppins', sans-serif; font-size: 0.95rem; transition: all 0.3s ease; outline: none; }
.signup-modal input:focus { border-color: #7ac7f0; background: rgba(255,255,255,0.09); box-shadow: 0 0 0 4px rgba(122,199,240,0.08); }
.signup-modal input::placeholder { color: #5a7a9a; font-weight: 300; }
.criteria-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.2rem 0; color: #cce0ff; font-size: 0.8rem; transition: color 0.2s; }
.criteria-item i { width: 18px; text-align: center; transition: color 0.2s; }
.criteria-item.valid i { color: #4caf50 !important; }
.criteria-item.valid span { color: #a5d6a7; }
.criteria-item.invalid i { color: #ff6b6b !important; }
.criteria-item.invalid span { color: #ff8a8a; }
.signup-modal .terms { display: flex; align-items: flex-start; gap: 0.6rem; margin: 1.2rem 0 1.5rem 0; font-size: 0.82rem; color: #8aa6c9; }
.signup-modal .terms input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; accent-color: #7ac7f0; margin-top: 1px; background: rgba(255,255,255,0.1); border-radius: 4px; cursor: pointer; }
.signup-modal .terms label { line-height: 1.5; cursor: pointer; }
.signup-modal .terms a { color: #7ac7f0; text-decoration: none; font-weight: 500; }
.signup-modal .terms a:hover { text-decoration: underline; }
.signup-modal button[type="submit"] { width: 100%; padding: 0.9rem; background: linear-gradient(135deg, #7ac7f0, #3a8fc8); border: none; border-radius: 14px; font-weight: 600; font-size: 1rem; cursor: pointer; color: #0a2647; transition: all 0.3s ease; font-family: 'Poppins', sans-serif; letter-spacing: 0.3px; }
.signup-modal button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(122,199,240,0.3); }
.signup-modal .divider { display: flex; align-items: center; gap: 1rem; margin: 1.2rem 0; color: #4a6a8a; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; }
.signup-modal .divider::before, .signup-modal .divider::after { content: ""; flex: 1; height: 1px; background: rgba(122,199,240,0.15); }
.signup-modal .signup-footer { text-align: center; margin-top: 1.5rem; color: #8aa6c9; font-size: 0.85rem; }
.signup-modal .signup-footer a { color: #7ac7f0; text-decoration: none; font-weight: 500; }
.signup-modal .signup-footer a:hover { text-decoration: underline; }
.error-msg { color: #ff6b6b; font-size: 0.78rem; margin-top: -0.3rem; margin-bottom: 0.6rem; padding-left: 0.5rem; }

/* ─── STUDIO LAYOUT ─── */
.pro-studio-root { width: 100%; min-height: 100vh; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.studio-layout { display: flex; flex: 1; min-height: 0; height: 100vh; overflow: hidden; }
.studio-sidebar { width: 280px; display: flex; flex-direction: column; padding: 0; transition: width 0.2s ease; overflow-x: hidden; border-right: 1px solid rgba(122,199,240,0.15); flex-shrink: 0; height: 100vh; }
.studio-sidebar.collapsed { width: 80px; }
.sidebar-logo { padding: 0.8rem 1.5rem; border-bottom: 1px solid rgba(122,199,240,0.15); cursor: pointer; display: flex; align-items: center; justify-content: center; min-height: 78.75px; transition: all 0.2s ease; flex-shrink: 0; }
.sidebar-logo .sidebar-logo-img { width: 120px; display: block; }
.sidebar-logo .sidebar-logo-icon { display: none; width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(122,199,240,0.3); }
.collapsed .sidebar-logo { padding: 0.8rem 0; border-bottom: 1px solid rgba(122,199,240,0.15); }
.collapsed .sidebar-logo .sidebar-logo-img { display: none; }
.collapsed .sidebar-logo .sidebar-logo-icon { display: block; margin: 0 auto; width: 44px; height: 44px; border: 2px solid rgba(122,199,240,0.5); }
.sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0rem; overflow-y: auto; }
.sidebar-item { display: flex; align-items: center; gap: 1rem; padding: 0.8rem 1.5rem; color: #cce0ff; cursor: pointer; transition: all 0.2s; border-left: 3px solid transparent; white-space: nowrap; }
.collapsed .sidebar-item span { display: none; }
.collapsed .sidebar-item i { margin: 0 auto; }
.collapsed .sidebar-item { justify-content: center; padding: 0.8rem 0; }
.sidebar-item:hover { background: rgba(122,199,240,0.1); color: white; }
.sidebar-item.active { background: rgba(122,199,240,0.15); border-left-color: #7ac7f0; color: #7ac7f0; }
.studio-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; min-width: 0; height: 100vh; }
.studio-views { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; overflow: hidden; padding-bottom: 80px; }
#view-help-center.active .studio-views { padding-bottom: 0 !important; min-height: auto !important; }
.view-content { flex: 1; overflow: hidden; display: none; flex-direction: column; padding-bottom: 0; }
.view-content.active { display: flex; }
.view-content.scrollable { overflow-y: auto; }
.view-content.scrollable .view-header { flex-shrink: 0; }
.view-header { position: relative; padding: 0.94rem 2rem; border-bottom: 1px solid rgba(122,199,240,0.15); flex-shrink: 0; min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: rgba(8,18,32,0.80) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.view-header h2 { font-family: 'Tomorrow', sans-serif; font-size: 1.6rem; background: linear-gradient(135deg, #fff, #7ac7f0); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; margin: 0; letter-spacing: 0.5px; }
.view-header p { color: #8aa6c9; font-size: 0.85rem; margin: 0.1rem 0 0 0; }

/* ─── USER MENU ─── */
.user-menu { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); z-index: 9999 !important; display: flex; align-items: center; gap: 0.5rem; }
.user-avatar { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 8px; background: rgba(255,255,255,0.06); border-radius: 40px; border: 1px solid rgba(122,199,240,0.2); backdrop-filter: blur(6px); transition: all 0.25s ease; cursor: pointer; }
.user-avatar:hover { background: rgba(255,255,255,0.12); border-color: rgba(122,199,240,0.5); }
.user-avatar i.fa-user-circle { font-size: 1.8rem; color: #7ac7f0; }
.user-avatar .user-name { font-size: 0.9rem; color: #fff; font-weight: 500; max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-avatar .dropdown-arrow { font-size: 0.6rem; color: #8aa6c9; transition: transform 0.25s ease; }
.user-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 240px; border-radius: 20px; border: 1px solid rgba(122,199,240,0.2); box-shadow: 0 20px 60px rgba(0,0,0,0.6); padding: 0.5rem 0; display: none; opacity: 0; transform: translateY(-8px); transition: opacity 0.25s ease, transform 0.25s ease; z-index: 99999 !important; }
.user-dropdown.open { display: block; opacity: 1; transform: translateY(0); }
.dropdown-header { display: flex; align-items: center; gap: 10px; padding: 0.6rem 1.2rem; }
.dropdown-avatar i { font-size: 2.4rem; color: #7ac7f0; }
.dropdown-user-info { display: flex; flex-direction: column; }
.dropdown-name { font-weight: 600; color: #fff; font-size: 0.95rem; }
.dropdown-email { font-size: 0.7rem; color: #8aa6c9; }
.dropdown-divider { height: 1px; background: rgba(122,199,240,0.15); margin: 0.3rem 0.8rem; }
.dropdown-item { display: flex; align-items: center; gap: 10px; padding: 0.6rem 1.2rem; color: #cce0ff; text-decoration: none; font-size: 0.85rem; transition: all 0.2s ease; border-radius: 10px; margin: 0 0.4rem; }
.dropdown-item:hover { background: rgba(122,199,240,0.12); color: #fff; }
.dropdown-item i { width: 18px; color: #7ac7f0; }
#settingsBtn i { color: #a78bfa; }
#helpCenterBtn i { color: #60a5fa; }

/* ─── HELP CENTER ─── */
#view-help-center.active { display: flex; flex-direction: column; overflow-y: auto !important; }
.help-center-container { max-width: 900px; margin: 0 auto; padding: 1.5rem 2rem 2rem 2rem; flex: 1; display: flex; flex-direction: column; width: 100%; overflow-y: visible; }
.help-card { border-radius: 24px; border: 1px solid rgba(122,199,240,0.15); padding: 1.8rem 2rem; margin-bottom: 1.5rem; transition: border-color 0.3s ease; width: 100%; }
.help-card:hover { border-color: rgba(122,199,240,0.3); }
.help-card h3 { font-family: 'Tomorrow', sans-serif; font-size: 1.3rem; color: #fff; margin-bottom: 0.8rem; display: flex; align-items: center; gap: 0.8rem; }
.help-card h3 i { color: #7ac7f0; }
.help-card p { color: #cce0ff; line-height: 1.8; font-size: 0.95rem; margin-bottom: 0.5rem; }
.help-card ul { list-style: none; padding: 0; }
.help-card ul li { color: #cce0ff; padding: 0.4rem 0; padding-left: 1.5rem; position: relative; line-height: 1.6; font-size: 0.92rem; }
.help-card ul li::before { content: "▸"; color: #7ac7f0; position: absolute; left: 0; font-weight: bold; }
.help-card .help-tip { background: rgba(122,199,240,0.06); border-left: 3px solid #7ac7f0; padding: 0.8rem 1.2rem; border-radius: 8px; margin-top: 0.8rem; color: #b0c9ff; font-size: 0.9rem; }

@media (max-width: 768px) { .help-center-container { padding: 1rem 1rem 1.5rem 1rem; } .help-card { padding: 1.2rem 1.2rem; } }

/* ─── DASHBOARD ─── */
#view-dashboard.active { display: flex; flex-direction: column; overflow: hidden; }
.dashboard-container { max-width: 1400px; margin: 0 auto; padding: 1.5rem 2rem 2rem 2rem; width: 100%; flex: 1; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }

/* ─── PRODUCER OF THE DAY ─── */
.producer-of-day { width: min(900px, 100%); margin: 0 auto 1.15rem; min-height: 290px; max-height: 330px; border: 1px solid rgba(122,199,240,0.20); border-radius: 30px; background: radial-gradient(circle at 50% 35%, rgba(42,105,180,0.22), rgba(8,18,32,0.68) 58%, rgba(8,18,32,0.78)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); position: relative; overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 18px 60px rgba(0,0,0,0.28); transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .35s ease, box-shadow .35s ease; }
.producer-of-day:hover { transform: translateY(-4px); border-color: rgba(122,199,240,0.45); box-shadow: 0 24px 80px rgba(0,0,0,0.42); }
.producer-of-day::before { content: ''; position:absolute; width:320px; height:320px; border-radius:50%; background: radial-gradient(circle, rgba(122,199,240,.16), transparent 68%); left:50%; top:42%; transform:translate(-50%,-50%); pointer-events:none; }
.producer-of-day-copy { position:absolute; left:1.5rem; top:1.2rem; z-index:4; pointer-events:none; }
.producer-of-day-kicker { color:#7ac7f0; font-size:.68rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.producer-of-day-name { font-family:'Tomorrow',sans-serif; font-size:1.35rem; font-weight:700; color:#fff; margin-top:.18rem; }
.producer-of-day-meta { color:#8aa6c9; font-size:.74rem; margin-top:.12rem; }
.producer-of-day-hint { position:absolute; right:1.4rem; bottom:1.2rem; z-index:4; color:#8aa6c9; font-size:.7rem; display:flex; align-items:center; gap:.4rem; pointer-events:none; }
.producer-of-day model-viewer { width:100%; height:100%; min-height:290px; background:transparent; pointer-events:none; }
.producer-of-day-loading { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2; color:#7ac7f0; font-size:.8rem; }

.dashboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1050px; margin: 0 auto; width: 100%; }
.dashboard-card { border-radius: 28px; border: 1px solid rgba(122,199,240,0.15); padding: 2rem 1.8rem 1.8rem; display: flex; flex-direction: column; align-items: center; text-align: center; transition: all 0.35s cubic-bezier(0.22,1,0.36,1); overflow: hidden; cursor: pointer; min-height: 240px; }
.dashboard-card:hover { transform: translateY(-6px); border-color: rgba(122,199,240,0.4); box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.dashboard-card .card-icon-wrapper { display: inline-block; background: rgba(122,199,240,0.12); width: 64px; height: 64px; border-radius: 50%; line-height: 64px; text-align: center; margin-bottom: 0.8rem; transition: all 0.3s ease; flex-shrink: 0; }
.dashboard-card:hover .card-icon-wrapper { background: rgba(122,199,240,0.2); box-shadow: 0 0 30px rgba(122,199,240,0.1); }
.dashboard-card .card-icon-wrapper .card-icon { font-size: 1.8rem; color: #7ac7f0; }
.dashboard-card .card-body h3 { font-family: 'Tomorrow', sans-serif; font-size: 1.2rem; color: #fff; margin-bottom: 0.3rem; }
.dashboard-card .card-body p { color: #cce0ff; font-size: 0.9rem; line-height: 1.5; margin-bottom: 1rem; flex: 1; }
.dashboard-card .card-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.6rem 1.5rem; border-radius: 40px; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.3s ease; border: none; font-family: 'Poppins', sans-serif; width: 100%; background: linear-gradient(135deg, #7ac7f0, #2c7cb6); color: #0a2647; margin-top: auto; }
.dashboard-card .card-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(122,199,240,0.3); }

/* ─── INTRO VIDEO / TUTORIAL ─── */
.intro-video-section>div:hover .video-meta .arrow { transform: translateX(4px); }

/* ─── BRAND TRACKER ─── */
#view-brand-tracker.active { display: flex; flex-direction: column; overflow: hidden; }
.brand-tracker-container { padding: 0.5rem 2rem 0.5rem 2rem; max-width: 1400px; margin: 0 auto; width: 100%; flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; min-height: 0; }
.tracker-row-pro { display: flex; flex-direction: column; gap: 0; border-radius: 8px; border: 1px solid rgba(122,199,240,0.2); padding: 0; box-shadow: 0 8px 50px rgba(0,0,0,0.5); position: relative; overflow: hidden; width: 100%; max-width: 1200px; margin: 0 auto; max-height: calc(100vh - 140px); }
.tracker-header-bar .header-cell.spacer { flex: 1; min-width: 100px; color: rgba(122,199,240,0.12); font-size: 0.55rem; letter-spacing: 1px; }
.tracker-header-bar .header-cell { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.8px; color: #7ac7f0; padding: 0 0.5rem; font-weight: 600; white-space: nowrap; }
.tracker-header-bar .header-cell.number { width: 60px; min-width: 60px; text-align: center; }
.tracker-header-bar .header-cell.producer { width: 25%; min-width: 120px; }
.tracker-header-bar .header-cell.style { width: 30%; min-width: 140px; }
.tracker-header-bar .header-cell.country { width: 15%; min-width: 80px; text-align: center; }

.tracker-png-display-pro { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-width: 260px; max-width: 380px; border-radius: 12px; padding: 0.8rem; margin: 0.5rem 1rem 0.5rem 0.5rem; border: 1px solid rgba(122,199,240,0.15); gap: 0.5rem; }
.tracker-png-display-pro .search-wrapper { width: 100%; position: relative; }
.tracker-png-display-pro .search-wrapper input { width: 100%; padding: 0.4rem 0.8rem 0.4rem 2rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(122,199,240,0.2); border-radius: 20px; color: #fff; font-size: 0.75rem; font-family: 'Poppins', sans-serif; outline: none; transition: all 0.3s ease; }
.tracker-png-display-pro .search-wrapper input::placeholder { color: #5a7a9a; }
.tracker-png-display-pro .search-wrapper input:focus { border-color: #7ac7f0; background: rgba(255,255,255,0.1); box-shadow: 0 0 0 3px rgba(122,199,240,0.1); }
.tracker-png-display-pro .search-wrapper .search-icon { position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); color: #5a7a9a; font-size: 0.7rem; }
.tracker-png-display-pro .search-wrapper .clear-btn { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: #5a7a9a; cursor: pointer; font-size: 0.6rem; display: none; }
.tracker-png-display-pro .search-wrapper .clear-btn.visible { display: block; }
.tracker-png-display-pro .search-wrapper .clear-btn:hover { color: #fff; }
.tracker-png-display-pro img { width: 100%; height: auto; max-height: 380px; object-fit: cover; border-radius: 12px; border: 2px solid rgba(122,199,240,0.15); box-shadow: 0 8px 30px rgba(0,0,0,0.3); background: rgba(0,0,0,0.1); }
.tracker-png-display-pro .search-results-count { font-size: 0.6rem; color: #5a7a9a; text-align: center; width: 100%; margin-top: -0.2rem; }
.tracker-png-display-pro .search-results-count span { color: #7ac7f0; font-weight: 600; }

.producer-table-pro { width: 100%; border-collapse: collapse; font-size: 0.95rem; display: flex; flex-direction: column; table-layout: fixed; }
.producer-table-pro thead { display: none; }
.producer-table-pro tbody { display: block; overflow-y: auto; flex: 1; max-height: calc(100vh - 200px); }
.producer-table-pro tbody tr { display: table; width: 100%; table-layout: fixed; border-bottom: 1px solid rgba(122,199,240,0.08); cursor: pointer; transition: all 0.2s ease; }
.producer-table-pro tbody tr:hover td, .producer-table-pro tbody tr.hover-row td { background: rgba(122,199,240,0.08); box-shadow: inset 0 1px 0 rgba(122,199,240,0.10), inset 0 -1px 0 rgba(122,199,240,0.10); }
.producer-table-pro tbody tr.hover-row td:first-child { box-shadow: inset 2px 0 0 rgba(122,199,240,0.75), inset 0 1px 0 rgba(122,199,240,0.10), inset 0 -1px 0 rgba(122,199,240,0.10); }
.producer-table-pro tbody tr.hover-row .producer-avatar-img-pro { transform: scale(1.045); box-shadow: 0 0 18px rgba(122,199,240,0.20); }
.producer-table-pro tbody tr.active-row td { background: rgba(122,199,240,0.12); }
.producer-table-pro tbody tr.locked-row td { opacity: 0.5; cursor: not-allowed; }
.producer-table-pro tbody tr.locked-row:hover td { background: transparent; }
.producer-table-pro tbody td { padding: 0.7rem 0.5rem; color: #e8f0ff; vertical-align: middle; font-size: 0.95rem; }
.producer-table-pro tbody td:nth-child(1) { width: 60px; text-align: center; }
.producer-table-pro tbody td:nth-child(2) { width: 25%; }
.producer-table-pro tbody td:nth-child(3) { width: 30%; }
.producer-table-pro tbody td:nth-child(4) { width: 15%; text-align: center; }
.producer-table-pro tbody td:nth-child(5) { display: none; }
.producer-avatar-img-pro { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2.5px solid #7ac7f0; display: block; transition: transform 0.3s ease; }
.producer-table-pro tbody tr:not(.locked-row):hover .producer-avatar-img-pro { transform: scale(1.06); border-color: #5ab8e8; }
.producer-table-pro tbody td .producer-style-tag { display: inline-block; background: rgba(122,199,240,0.12); padding: 0.2rem 0.8rem; border-radius: 20px; font-size: 0.8rem; color: #d4e8ff; border: 1px solid rgba(122,199,240,0.1); }
.producer-table-pro tbody td .fa-lock { color: #f0b27a; margin-left: 6px; }
.producer-table-pro tbody td img[src*="flagcdn"] { width: 28px; height: 20px; border-radius: 4px; object-fit: cover; border: 1px solid rgba(255,255,255,0.1); }

@media (max-width: 1024px) { .tracker-png-display-pro { min-width: 200px; max-width: 280px; } .tracker-header-bar .header-cell.spacer { font-size: 0.5rem; min-width: 60px; padding: 0 0.5rem; } .tracker-header-bar .header-cell.style { font-size: 0.55rem; min-width: 80px; } }
@media (max-width: 900px) { .tracker-body { flex-direction: column; } .tracker-container-pro { max-height: 400px; min-height: 250px; } .tracker-png-display-pro { min-width: auto; max-width: 100%; padding: 0.8rem; margin: 0.3rem 0.5rem; } .tracker-png-display-pro img { max-height: 280px; max-width: 300px; } .tracker-header-bar .header-cell.spacer { display: none; } .producer-table-pro tbody td:nth-child(5) { display: none; } }
@media (max-width: 600px) { .tracker-header-bar .header-cell.style { display: none; } .tracker-header-bar .header-cell.country { width: 12%; min-width: 40px; font-size: 0.5rem; } .tracker-header-bar .header-cell.producer { min-width: 80px; font-size: 0.55rem; } .tracker-header-bar .header-cell.number { width: 40px; min-width: 40px; font-size: 0.5rem; } .producer-table-pro tbody td:nth-child(3) { display: none; } .producer-table-pro tbody td:nth-child(4) { width: 12%; min-width: 40px; text-align: center; } .producer-table-pro tbody td:nth-child(2) { width: 40%; font-size: 0.8rem; } .brand-tracker-container { padding: 0.3rem 0.5rem; } }

/* ─── WORLD MAP ─── */
#view-worldmap.active { display: flex; flex-direction: column; overflow: hidden; }
.worldmap-container { width: 100%; flex: 1; position: relative; min-height: 0; height: 100%; }
.worldmap-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; min-height: 500px; }

/* ─── ACADEMY ─── */
#view-academy.active { display: flex; flex-direction: column; overflow: hidden; }

/* ─── COMMUNITY ─── */
#view-community.active { display: flex; flex-direction: column; overflow: hidden; }
.community-page-container { max-width: 600px; margin: 0 auto; padding: 1.5rem 2rem 2rem 2rem; flex: 1; display: flex; align-items: center; }
.community-card { border-radius: 40px; border: 1px solid rgba(122,199,240,0.2); padding: 3rem 2.5rem; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.5); transition: all 0.3s ease; width: 100%; }
.community-card:hover { border-color: rgba(122,199,240,0.4); }
.community-icon-wrapper { position: relative; display: inline-block; margin-bottom: 1.5rem; }
.discord-icon { font-size: 5.5rem; color: #5865F2; display: block; position: relative; z-index: 2; filter: drop-shadow(0 0 20px rgba(88,101,242,0.4)); }
.discord-glow-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(88,101,242,0.3) 0%, transparent 70%); z-index: 1; }
.pro-badge { display: inline-block; background: linear-gradient(135deg, #f0b27a, #e67e22); color: #0a2647; font-weight: 700; font-size: 0.7rem; letter-spacing: 1.5px; padding: 0.3rem 1.2rem; border-radius: 40px; margin-bottom: 1.2rem; text-transform: uppercase; box-shadow: 0 4px 15px rgba(230,126,34,0.3); }
.community-card h2 { font-family: 'Tomorrow', sans-serif; font-size: 2.2rem; color: #ffffff; margin-bottom: 0.5rem; }
.community-features-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-bottom: 2rem; text-align: left; }
.feature-item { display: flex; align-items: center; gap: 0.6rem; background: rgba(255,255,255,0.04); padding: 0.6rem 1rem; border-radius: 12px; border: 1px solid rgba(122,199,240,0.08); transition: all 0.2s ease; color: #cce0ff; font-size: 0.85rem; }
.feature-item:hover { background: rgba(255,255,255,0.08); border-color: rgba(122,199,240,0.2); }
.feature-item i { color: #5865F2; font-size: 1rem; width: 20px; text-align: center; }
.community-upgrade-btn { background: linear-gradient(135deg, #7ac7f0, #2c7cb6); border: none; padding: 0.8rem 2.5rem; border-radius: 60px; color: #0a2647; font-weight: 700; font-size: 1rem; cursor: pointer; transition: all 0.3s ease; width: 100%; font-family: 'Poppins', sans-serif; display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem; }
.community-upgrade-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 40px rgba(122,199,240,0.3); }
.community-join-btn { background: #5865F2; border: none; padding: 0.8rem 2.5rem; border-radius: 60px; color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer; transition: all 0.3s ease; width: 100%; font-family: 'Poppins', sans-serif; display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem; margin-top: 0.5rem; }
.community-join-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 40px rgba(88,101,242,0.4); background: #4752c4; }
@media (max-width: 600px) { .community-card { padding: 2rem 1.5rem; border-radius: 28px; } .community-card h2 { font-size: 1.6rem; } .discord-icon { font-size: 4rem; } .discord-glow-ring { width: 90px; height: 90px; } .community-features-list { grid-template-columns: 1fr; gap: 0.6rem; } .community-page-container { padding: 1rem 1rem 1.5rem 1rem; } }

/* ─── SETTINGS ─── */
#view-settings.active { display: flex; flex-direction: column; overflow: hidden; }
.settings-container { max-width: 720px; margin: 0 auto; padding: 1rem 2rem 2rem 2rem; flex: 1; display: flex; align-items: center; }
.settings-card { border-radius: 24px; border: 1px solid rgba(122,199,240,0.15); padding: 1.8rem 2rem; transition: border-color 0.3s ease; width: 100%; }
.settings-card:hover { border-color: rgba(122,199,240,0.3); }
.settings-section { margin-bottom: 1.5rem; }
.settings-section:last-child { margin-bottom: 0; }
.settings-section h3 { font-family: 'Tomorrow', sans-serif; font-size: 1rem; color: #fff; margin-bottom: 0.8rem; border-bottom: 1px solid rgba(122,199,240,0.08); padding-bottom: 0.4rem; }
.settings-divider { border: none; border-top: 1px solid rgba(122,199,240,0.06); margin: 1.2rem 0; }
.profile-avatar-section { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.profile-avatar-wrapper { position: relative; width: 72px; height: 72px; flex-shrink: 0; }
.profile-avatar-wrapper img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #7ac7f0; box-shadow: 0 0 20px rgba(122,199,240,0.15); }
.avatar-upload-btn { position: absolute; bottom: -2px; right: -2px; background: #7ac7f0; color: #0a2647; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; border: 2px solid rgba(10,20,35,0.8); font-size: 0.7rem; }
.avatar-upload-btn:hover { transform: scale(1.1); background: #6ab8e0; }
.avatar-hint { font-size: 0.7rem; color: #5a7a9a; margin: 0; }
.settings-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.2rem; }
.form-group.full-width { grid-column: 1 / -1; }
.form-group label { font-size: 0.8rem; color: #c0e0ff; font-weight: 500; }
.form-group input { padding: 0.5rem 0.8rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(122,199,240,0.15); border-radius: 10px; color: #fff; font-family: inherit; font-size: 0.9rem; transition: 0.3s; outline: none; }
.form-group input:focus { border-color: #7ac7f0; background: rgba(255,255,255,0.08); box-shadow: 0 0 0 3px rgba(122,199,240,0.08); }
.form-group input:disabled { opacity: 0.5; cursor: not-allowed; }
.field-hint { font-size: 0.65rem; color: #5a7a9a; }
.billing-info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; }
.billing-item { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.5rem 0.6rem; border-radius: 10px; border: 1px solid rgba(122,199,240,0.06); }
.billing-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.3px; color: #5a7a9a; }
.billing-value { font-weight: 600; color: #fff; font-size: 0.9rem; }
.billing-actions { display: flex; gap: 0.6rem; margin-top: 0.6rem; flex-wrap: wrap; }
.settings-btn { padding: 0.4rem 1.2rem; border-radius: 30px; font-weight: 600; font-size: 0.8rem; cursor: pointer; transition: all 0.3s ease; border: none; font-family: 'Poppins', sans-serif; }
.settings-btn.primary { background: linear-gradient(135deg, #7ac7f0, #2c7cb6); color: #0a2647; }
.settings-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(122,199,240,0.3); }
.settings-btn.secondary { background: rgba(255,255,255,0.06); border: 1px solid rgba(122,199,240,0.2); color: #cce0ff; }
.settings-btn.secondary:hover { background: rgba(255,255,255,0.12); }
.settings-btn.danger { background: rgba(255,70,70,0.12); border: 1px solid rgba(255,70,70,0.2); color: #ff6b6b; }
.settings-btn.danger:hover { background: rgba(255,70,70,0.2); }
.settings-actions { display: flex; justify-content: flex-end; margin-top: 0.5rem; }
@media (max-width: 768px) { .settings-container { padding: 1rem 1rem 1.5rem 1rem; } .settings-card { padding: 1.2rem 1.2rem; border-radius: 18px; } .settings-form-grid { grid-template-columns: 1fr; gap: 0.6rem; } .billing-info-grid { grid-template-columns: 1fr 1fr; gap: 0.4rem; } .billing-actions { flex-direction: column; } .settings-actions { justify-content: center; } .settings-btn { width: 100%; text-align: center; padding: 0.4rem 0.8rem; font-size: 0.75rem; } .profile-avatar-wrapper { width: 60px; height: 60px; } }

/* ─── PRICING ─── */
#view-pricing.active { display: flex; flex-direction: column; overflow: hidden; }
.pricing-page-pro { max-width: 1200px; margin: 0 auto; padding: 1rem 2rem 2rem 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; width: 100%; gap: 0.5rem; overflow: hidden; }
.pricing-upgrade-text { font-family: 'Tomorrow', sans-serif; font-size: 2rem; background: linear-gradient(135deg, #fff, #7ac7f0); -webkit-background-clip: text; background-clip: text; color: transparent; text-align: center; margin-bottom: 0.5rem; }
.pricing-upgrade-text span { color: #f0b27a; background: none; -webkit-background-clip: unset; background-clip: unset; }
.pricing-grid-pro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; width: 100%; max-width: 1050px; }
.pricing-card-pro { position: relative; border-radius: 28px; border: 1px solid rgba(122,199,240,0.15); padding: 1.8rem 1.5rem 1.5rem; display: flex; flex-direction: column; transition: all 0.35s cubic-bezier(0.22,1,0.36,1); overflow: hidden; }
.pricing-card-pro:hover { transform: translateY(-6px); border-color: rgba(122,199,240,0.4); box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.pricing-card-pro.popular { border-color: rgba(122,199,240,0.5); box-shadow: 0 0 40px rgba(122,199,240,0.08), 0 10px 40px rgba(0,0,0,0.3); transform: scale(1.03); }
.pricing-card-pro.popular:hover { transform: scale(1.03) translateY(-6px); }
.popular-tag { position: absolute; top: 18px; right: -44px; background: linear-gradient(135deg, #f0b27a, #e67e22); color: #0a2647; font-weight: 700; font-size: 0.68rem; letter-spacing: 1px; padding: 0.3rem 2.8rem 0.3rem 3.2rem; text-transform: uppercase; box-shadow: 0 4px 25px rgba(230,126,34,0.3); transform: rotate(45deg); z-index: 10; white-space: nowrap; }
.card-header { text-align: center; margin-bottom: 0.5rem; }
.plan-icon { display: inline-block; font-size: 1.6rem; background: rgba(122,199,240,0.12); width: 48px; height: 48px; border-radius: 50%; line-height: 48px; text-align: center; color: #7ac7f0; margin-bottom: 0.3rem; }
.card-header h3 { font-family: 'Tomorrow', sans-serif; font-size: 1.2rem; color: #fff; }
.card-price { text-align: center; padding: 0.4rem 0 0.6rem; border-bottom: 1px solid rgba(122,199,240,0.08); margin-bottom: 0.8rem; }
.card-price .currency { font-size: 1rem; color: #7ac7f0; vertical-align: top; line-height: 1.6; }
.card-price .amount { font-size: 2.5rem; font-weight: 700; color: #fff; font-family: 'Tomorrow', sans-serif; }
.card-price .period { font-size: 0.7rem; color: #8aa6c9; margin-left: 0.2rem; }
.card-features { list-style: none; padding: 0; margin: 0 0 0.8rem 0; flex: 1; }
.card-features li { display: flex; align-items: center; gap: 0.6rem; padding: 0.2rem 0; font-size: 0.8rem; color: #cce0ff; }
.card-features li i { font-size: 0.8rem; width: 18px; text-align: center; flex-shrink: 0; }
.card-features li i.fa-check-circle { color: #7ac7f0; }
.card-features li i.fa-times-circle { color: #5a7a9a; opacity: 0.5; }
.card-features li.disabled { opacity: 0.4; }
.pricing-btn-pro { display: flex; align-items: center; justify-content: center; padding: 0.6rem 1.5rem; border-radius: 40px; font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: all 0.3s ease; border: none; font-family: 'Poppins', sans-serif; width: 100%; margin-top: auto; }
.pricing-btn-pro.primary { background: linear-gradient(135deg, #7ac7f0, #2c7cb6); color: #0a2647; }
.pricing-btn-pro.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(122,199,240,0.3); }
.pricing-btn-pro.secondary { background: rgba(255,255,255,0.06); border: 1px solid rgba(122,199,240,0.2); color: #cce0ff; }
.pricing-btn-pro.secondary:hover { background: rgba(255,255,255,0.12); }
.pricing-trust-pro { display: flex; justify-content: center; gap: 2rem; padding: 0.4rem 0 0.2rem; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 0.5rem; color: #8aa6c9; font-size: 0.75rem; }
.trust-item i { color: #7ac7f0; font-size: 0.9rem; }
.payment-icons { display: flex; justify-content: center; gap: 1rem; font-size: 1.8rem; color: #cce0ff; margin-top: 0.3rem; flex-wrap: wrap; }
.payment-icons i { opacity: 0.8; transition: opacity 0.2s; }
.payment-icons i:hover { opacity: 1; }

@media (max-width: 1024px) { .pricing-grid-pro { grid-template-columns: repeat(2, 1fr); max-width: 700px; } .pricing-card-pro.popular { transform: none; order: -1; grid-column: 1 / -1; max-width: 400px; margin: 0 auto; } .pricing-card-pro.popular:hover { transform: translateY(-6px); } }
@media (max-width: 600px) { .pricing-grid-pro { grid-template-columns: 1fr; max-width: 400px; } .pricing-card-pro.popular { max-width: 100%; } .pricing-page-pro { padding: 1rem 1rem 1.5rem; } .card-price .amount { font-size: 2rem; } .pricing-trust-pro { gap: 1rem; } .pricing-upgrade-text { font-size: 1.4rem; } }

/* ─── PRODUCER DETAIL ─── */
.producer-detail-page-pro { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.92); backdrop-filter: blur(12px); z-index: 10000; display: none; flex-direction: row; }
.producer-detail-page-pro.active { display: flex; }
.producer-3d-section-pro { flex: 1; position: relative; overflow: hidden; }
.viewer-container { width: 100%; height: 100%; background-size: cover; background-position: center; transition: background-image 0.6s ease; position: relative; }
model-viewer { width: 100%; height: 100%; --poster-color: transparent; background: transparent; }
.model-loading-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.7); padding: 12px 20px; border-radius: 40px; z-index: 15; display: none; color: #fff; font-size: 0.9rem; font-family: 'Poppins', sans-serif; }
.model-error-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.8); padding: 16px 24px; border-radius: 16px; z-index: 15; display: none; flex-direction: column; align-items: center; gap: 0.5rem; border: 1px solid rgba(255,107,107,0.3); }
.model-error-overlay i { color: #ff6b6b; font-size: 2rem; }
.model-error-overlay button { background: #7ac7f0; border: none; padding: 0.3rem 1.2rem; border-radius: 30px; color: #0a2647; font-weight: 600; cursor: pointer; font-family: 'Poppins', sans-serif; }
.producer-info-panel-pro { width: 42%; height: 100%; border-left: 2px solid rgba(122,199,240,0.4); padding: 2rem 1.8rem 1.5rem; overflow-y: auto; display: flex; flex-direction: column; }
.producer-detail-name-row { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.1rem; flex-wrap: wrap; }
.producer-detail-name { font-family: 'Tomorrow', sans-serif; font-size: 2.6rem; font-weight: 700; color: #fff; line-height: 1.1; background: linear-gradient(135deg, #fff, #7ac7f0); -webkit-background-clip: text; background-clip: text; color: transparent; flex: 1; min-width: 160px; }
#detailFavoriteBtn { background: transparent; border: none; color: #5a7a9a; font-size: 1.8rem; cursor: pointer; transition: 0.2s; padding: 0; line-height: 1; flex-shrink: 0; }
#detailFavoriteBtn:hover { transform: scale(1.1); }
.producer-detail-description { color: #b0c9ff; font-size: 1rem; line-height: 1.5; margin-bottom: 1.2rem; padding-bottom: 0.8rem; border-bottom: 1px solid rgba(122,199,240,0.12); }
.info-tabs-pro { display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid rgba(122,199,240,0.3); margin-bottom: 1rem; flex-shrink: 0; flex-wrap: wrap; }
.info-tab-pro { padding: 0.4rem 1rem; border-radius: 40px; cursor: pointer; color: #b0c9ff; font-weight: 500; font-size: 0.9rem; transition: 0.2s; }
.info-tab-pro.active { background: rgba(122,199,240,0.2); color: white; border: 1px solid #7ac7f0; }
.info-tab-pro:hover { color: #fff; }
.info-content-pro { flex: 1; overflow-y: auto; padding-right: 0.2rem; }
.info-content-pro::-webkit-scrollbar { width: 4px; }
.info-content-pro::-webkit-scrollbar-thumb { background: rgba(122,199,240,0.3); border-radius: 4px; }
.info-section-pro { display: none; }
.info-section-pro.active { display: block; }
.story-text-pro { font-size: 1.2rem; line-height: 1.7; color: #d0e0ff; margin: 0.2rem 0 1rem; }
.detail-audio-player { border-radius: 16px; padding: 0.6rem 1rem; border: 1px solid rgba(122,199,240,0.12); margin-top: 0.3rem; display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; background: rgba(10,20,35,0.50) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; }
.detail-audio-player .audio-btn { width: 36px; height: 36px; border-radius: 50%; background: #7ac7f0; border: none; color: #0a2647; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; transition: 0.2s; flex-shrink: 0; }
.detail-audio-player .audio-btn:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(122,199,240,0.3); }
.detail-audio-player .audio-btn.playing { background: #f0b27a; }
.detail-audio-player .audio-progress-wrap { flex: 1; min-width: 80px; display: flex; align-items: center; gap: 0.6rem; }
.detail-audio-player .audio-progress-track { flex: 1; height: 4px; background: rgba(255,255,255,0.15); border-radius: 4px; cursor: pointer; position: relative; min-width: 40px; }
.detail-audio-player .audio-progress-fill { height: 100%; background: #7ac7f0; border-radius: 4px; width: 0%; transition: width 0.1s linear; }
.detail-audio-player .audio-time { font-size: 0.7rem; color: #8aa6c9; font-family: monospace; white-space: nowrap; min-width: 70px; }
.detail-audio-player .audio-volume-wrap { display: flex; align-items: center; gap: 0.4rem; }
.detail-audio-player .audio-volume-wrap input[type="range"] { width: 50px; height: 3px; -webkit-appearance: none; background: rgba(255,255,255,0.15); border-radius: 4px; outline: none; }
.detail-audio-player .audio-volume-wrap input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; border-radius: 50%; background: #7ac7f0; cursor: pointer; }

@media (max-width: 1024px) { .producer-info-panel-pro { width: 48%; padding: 1.5rem 1.2rem; } .producer-detail-name { font-size: 2rem; } }
@media (max-width: 768px) { .producer-detail-page-pro { flex-direction: column; } .producer-3d-section-pro { height: 45vh; } .producer-info-panel-pro { width: 100%; height: 55vh; border-left: none; border-top: 2px solid rgba(122,199,240,0.4); padding: 1rem 1.2rem; } .producer-detail-name { font-size: 1.6rem; } .detail-audio-player { padding: 0.5rem 0.8rem; gap: 0.6rem; } .detail-audio-player .audio-volume-wrap input[type="range"] { width: 30px; } }

#simpleCloseBtnPro { position: fixed; top: 24px; right: 28px; width: 48px; height: 48px; background: rgba(0,0,0,0.65); border-radius: 50%; border: 1px solid white; color: white; font-size: 24px; cursor: pointer; z-index: 10002; display: none; align-items: center; justify-content: center; transition: 0.2s; }
#simpleCloseBtnPro:hover { background: rgba(255,255,255,0.15); transform: scale(1.05); }

/* ─── GLOBAL PLAYER ─── */
.global-audio-player { position: fixed; bottom: 0; left: 0; right: 0; border-top: 1px solid rgba(122,199,240,0.3); padding: 0.6rem 1.5rem; z-index: 10002; display: none !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.global-audio-player.visible { display: flex !important; }
#studioRoot:not(:has(#view-brand-tracker.active)) #globalPlayer.visible { display: none !important; }
.player-producer-info { display: flex; align-items: center; gap: 10px; min-width: 160px; }
.player-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #7ac7f0; }
.player-producer-details h4 { font-size: 0.85rem; font-weight: 600; margin: 0; }
.player-producer-details p { font-size: 0.65rem; color: #b0c9ff; margin: 0; }
.music-player-section-global { display: flex; align-items: center; gap: 14px; flex: 2; justify-content: center; }
.player-controls-pro { display: flex; gap: 6px; }
.player-btn-pro { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; transition: 0.2s; }
.player-btn-pro:hover { background: rgba(255,255,255,0.15); }
.play-pause-pro { background: #7ac7f0; border: none; color: #0a2647; }
.play-pause-pro:hover { background: #6ab8e0; }
.progress-container-pro { display: flex; align-items: center; gap: 6px; min-width: 160px; flex: 1; }
.progress-bar-pro { flex: 1; height: 4px; background: rgba(255,255,255,0.2); border-radius: 4px; cursor: pointer; }
.progress-fill-pro { width: 0%; height: 100%; background: #7ac7f0; border-radius: 4px; }
.time-text { font-size: 0.7rem; font-family: monospace; color: #8aa6c9; }
#volumeSliderPro { width: 60px; height: 3px; -webkit-appearance: none; background: rgba(255,255,255,0.2); border-radius: 4px; outline: none; }
#volumeSliderPro::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; border-radius: 50%; background: #7ac7f0; cursor: pointer; }

@media (max-width: 768px) { .global-audio-player { padding: 0.4rem 0.8rem; gap: 0.5rem; flex-wrap: wrap; } .player-producer-info { min-width: 120px; } .player-avatar { width: 32px; height: 32px; } .music-player-section-global { flex: 1; min-width: 200px; gap: 8px; } .player-btn-pro { width: 28px; height: 28px; font-size: 0.7rem; } .progress-container-pro { min-width: 100px; } #volumeSliderPro { width: 40px; } }

/* ─── OVERLAYS ─── */
.stripe-redirect-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; justify-content: center; align-items: center; z-index: 30000; flex-direction: column; gap: 1.5rem; }
.stripe-redirect-overlay.active { display: flex; }
.stripe-redirect-overlay .spinner-box { width: 60px; height: 60px; border: 4px solid rgba(122,199,240,0.15); border-top-color: #7ac7f0; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.stripe-redirect-overlay p { color: #cce0ff; font-size: 1.1rem; font-weight: 500; }
.stripe-success-toast { position: fixed; bottom: 120px; left: 50%; transform: translateX(-50%); border: 1px solid rgba(76,175,80,0.4); border-radius: 20px; padding: 1rem 2rem; color: #fff; font-weight: 500; z-index: 30001; display: none; align-items: center; gap: 1rem; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.stripe-success-toast.active { display: flex; }
.stripe-success-toast i { color: #4caf50; font-size: 1.6rem; }
.stripe-success-toast .dismiss-toast { background: rgba(255,255,255,0.08); border: none; color: #8aa6c9; padding: 0.2rem 0.8rem; border-radius: 30px; cursor: pointer; font-size: 0.8rem; transition: 0.2s; }
.stripe-success-toast .dismiss-toast:hover { background: rgba(255,255,255,0.15); color: #fff; }
.academy-upgrade-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; justify-content: center; align-items: center; z-index: 30002; }
.academy-upgrade-popup.active { display: flex; }
.academy-upgrade-popup .popup-content { border-radius: 32px; padding: 2.5rem 2.8rem; max-width: 480px; width: 92%; border: 1px solid rgba(122,199,240,0.3); box-shadow: 0 20px 60px rgba(0,0,0,0.6); text-align: center; }
.academy-upgrade-popup .popup-content .popup-icon { font-size: 4rem; color: #f0b27a; margin-bottom: 1rem; display: block; }
.academy-upgrade-popup .popup-content h2 { font-family: 'Tomorrow', sans-serif; font-size: 1.8rem; color: #fff; margin-bottom: 0.5rem; }
.academy-upgrade-popup .popup-content p { color: #cce0ff; font-size: 1rem; line-height: 1.6; margin-bottom: 1.8rem; }
.academy-upgrade-popup .popup-content .popup-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.academy-upgrade-popup .popup-content .popup-buttons button { padding: 0.6rem 2rem; border-radius: 40px; font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: all 0.3s ease; border: none; font-family: 'Poppins', sans-serif; }
.academy-upgrade-popup .popup-content .popup-buttons .btn-upgrade { background: linear-gradient(135deg, #7ac7f0, #2c7cb6); color: #0a2647; }
.academy-upgrade-popup .popup-content .popup-buttons .btn-upgrade:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(122,199,240,0.3); }
.academy-upgrade-popup .popup-content .popup-buttons .btn-close { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: #cce0ff; }
.academy-upgrade-popup .popup-content .popup-buttons .btn-close:hover { background: rgba(255,255,255,0.15); }

/* ─── HOMEPAGE ─── */
.homepage { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; overflow-y: auto; transition: padding-top 0.25s ease-out; background: transparent !important; }
.homepage-header { position: fixed; top: 0; left: 0; width: 100%; height: 80px; padding: 0 2rem; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; z-index: 100; transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); transform: translateY(0); }
.homepage-header.header-hidden { transform: translateY(-100%); }
.logo { font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; }
.logo-image { height: 25px; width: auto; display: block; }
.hamburger-btn { display: none; background: transparent; border: none; color: #fff; font-size: 1.8rem; cursor: pointer; padding: 0.3rem 0.5rem; transition: color 0.2s; z-index: 110; line-height: 1; }
.hamburger-btn:hover { color: #7ac7f0; }
.nav-menu-mobile { display: none; position: fixed; top: 80px; left: 0; width: 100%; height: calc(100vh - 80px); flex-direction: column; align-items: center; justify-content: flex-start; padding: 2.5rem 2rem; gap: 1.5rem; z-index: 99; overflow-y: auto; }
.nav-menu-mobile.open { display: flex; }
.nav-menu-mobile a { color: #ffffff; text-decoration: none; cursor: pointer; font-size: 1.3rem; font-weight: 500; padding: 0.6rem 0; width: 100%; text-align: center; transition: color 0.2s, background 0.2s; border-radius: 12px; font-family: 'Tomorrow','Clash Display',sans-serif; font-weight: 600; }
.nav-menu-mobile a:hover { color: #7ac7f0; background: rgba(122,199,240,0.08); }
.nav-menu-mobile .mobile-header-buttons { display: flex; flex-direction: column; gap: 0.8rem; width: 100%; max-width: 300px; margin-top: 1rem; padding-top: 1.5rem; border-top: 1px solid rgba(122,199,240,0.15); }
.nav-menu-mobile .mobile-header-buttons .header-btn { width: 100%; text-align: center; padding: 0.7rem 1.5rem; font-size: 1rem; }
.nav-menu-mobile .mobile-header-buttons .header-btn:first-child { background: rgba(122,199,240,0.15); border: 1.5px solid rgba(122,199,240,0.7); color: #fff; }
.nav-menu-mobile .mobile-header-buttons .header-btn:first-child:hover { background: #7ac7f0; color: #0a2647; }
.nav-menu-mobile .mobile-header-buttons .header-btn:last-child { background: linear-gradient(135deg, #7ac7f0, #2c7cb6); border: none; color: #0a2647; }
.nav-menu-mobile .mobile-header-buttons .header-btn:last-child:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(122,199,240,0.3); }
@media (max-width: 900px) { .homepage-header { justify-content: center !important; align-items: center !important; padding: 0 1rem; height: 56px; gap: 0; } .homepage-header .logo { flex: 0 0 auto !important; margin: 0 !important; } .homepage-header .logo .logo-image { height: 22px; width: auto; } .hamburger-btn { display: block !important; position: absolute !important; right: 1rem; top: 50%; transform: translateY(-50%); padding: 0.3rem 0.5rem; font-size: 1.5rem; line-height: 1; } .nav-menu, .header-buttons { display: none !important; } .nav-menu-mobile { top: 56px !important; height: calc(100vh - 56px) !important; } }
@media (min-width: 901px) { .nav-menu-mobile { display: none !important; } .hamburger-btn { display: none !important; } }
.nav-menu { display: flex; gap: 2rem; justify-self: center; }
.nav-menu a { color: #ffffff; text-decoration: none; cursor: pointer; font-size: 1rem; transition: color 0.2s; }
.nav-menu a:hover { color: #7ac7f0; }
.nav-menu a.active { color: #7ac7f0; border-bottom: 2px solid #7ac7f0; padding-bottom: 4px; }
.header-buttons { display: flex; gap: 1rem; justify-self: end; }
.header-btn { background: linear-gradient(135deg, #4da6ff, #0066cc); border: 2px solid #80bfff; padding: 0.6rem 1.8rem; border-radius: 4px; color: #ffffff; cursor: pointer; font-weight: 800; font-size: 1rem; letter-spacing: 0.5px; transition: all 0.2s; box-shadow: 0 0 30px rgba(77,166,255,0.4), 0 4px 15px rgba(0,102,204,0.3); text-shadow: 0 2px 4px rgba(0,0,0,0.3); text-transform: uppercase; }
.header-btn:hover { background: #7ac7f0; color: #0a2647; transform: translateY(-2px); }
.cover-image-section { width: 100%; min-height: 85vh; display: flex; align-items: center; justify-content: center; background: transparent !important; position: relative; }
.cover-image-section::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; pointer-events: none; }
.hero-overlay-content { position: relative; z-index: 2; max-width: 1000px; text-align: center; padding: 2.5rem; border-radius: 32px; }
.hero-title { font-size: 4rem; color: #ffffff; margin-bottom: 0.5rem; text-shadow: 0 2px 10px rgba(0,0,0,0.3); line-height: 1.15; letter-spacing: -0.02em; word-break: break-word; }
.hero-title span { color: #7ac7f0; }
.hero-subtitle { font-size: 1.2rem; color: #c0e0ff; margin-bottom: 2rem; }
.hero-login-btn { background: linear-gradient(135deg, #7ac7f0, #2c7cb6); border: none; padding: 0.9rem 2.2rem; border-radius: 60px; color: #0a2647; cursor: pointer; font-weight: 600; transition: all 0.2s; }
.hero-login-btn:hover { transform: scale(1.02); box-shadow: 0 8px 20px rgba(0,0,0,0.3); }
.homepage-sections { max-width: 1450px; width: 100%; margin: 3rem auto; padding: 0 clamp(2rem, 6vw, 7rem); }
.feature-block { display: grid; height: 400px; grid-template-columns: 1fr 1fr; border-radius: 40px; border: 1px solid rgba(122,199,240,0.3); margin-bottom: 4rem; overflow: hidden; }
.feature-block.reverse { direction: rtl; }
.feature-block.reverse .feature-text { direction: ltr; }
.feature-image { width: 100%; height: 100%; overflow: hidden; }
.feature-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.feature-block:hover .feature-image img { transform: scale(1.05); }
.feature-text { padding: 2.5rem; display: flex; flex-direction: column; justify-content: center; }
.feature-text h3 { font-size: 2rem; background: linear-gradient(135deg, #fff, #7ac7f0); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 0.75rem; }
.feature-text p { color: #d0e4ff; margin: 0.5rem 0 1.2rem; line-height: 1.6; }
.read-more { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.3rem 1rem; background: linear-gradient(135deg, #7ac7f0, #2c7cb6); color: #0a2647 !important; border: none; border-radius: 30px; font-weight: 600; font-size: 0.7rem; cursor: pointer; text-decoration: none; transition: all 0.3s cubic-bezier(0.22,1,0.36,1); box-shadow: 0 3px 15px rgba(122,199,240,0.12); font-family: 'Poppins', sans-serif; letter-spacing: 0.2px; width: auto !important; max-width: fit-content; white-space: nowrap; flex-shrink: 0; }
.read-more:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(122,199,240,0.25); background: linear-gradient(135deg, #8ad4ff, #3a8fc8); }
.read-more i { font-size: 0.6rem; transition: transform 0.3s ease; }
.read-more:hover i { transform: translateX(3px); }
@media (max-width: 900px) { .feature-block { grid-template-columns: 1fr; direction: ltr !important; } .feature-block.reverse { direction: ltr; } .feature-image { height: 250px; } .feature-text { padding: 1.8rem; text-align: center; } .hero-title { font-size: 2.4rem !important; } }
.info-page { display: none; max-width: 1200px; margin: 2rem auto; padding: 2rem; border-radius: 32px; width: 95%; }
.info-page.active { display: block; }
.info-content-wrapper { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; margin-top: 1rem; }
.info-text { flex: 1; min-width: 250px; }
.info-text h2 { font-size: 2.2rem; margin-bottom: 0.5rem; background: linear-gradient(135deg, #fff, #7ac7f0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.info-text p { color: #cce0ff; line-height: 1.6; margin-bottom: 1rem; }
.info-image { flex: 1; min-width: 200px; text-align: center; }
.info-image img { max-width: 100%; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.tracker-section { display: flex; align-items: center; gap: 3rem; padding: 2rem 0; border-bottom: 1px solid rgba(122,199,240,0.1); }
.tracker-section:last-child { border-bottom: none; }
.tracker-section .tracker-text { flex: 1; min-width: 280px; }
.tracker-section .tracker-text .section-number { font-family: 'Tomorrow', sans-serif; font-size: 0.75rem; letter-spacing: 2px; color: #7ac7f0; opacity: 0.6; display: block; margin-bottom: 0.3rem; }
.tracker-section .tracker-text h2 { font-family: 'Tomorrow', sans-serif; font-size: 2rem; color: #ffffff; margin-bottom: 0.8rem; }
.tracker-section .tracker-text p { color: #cce0ff; line-height: 1.7; margin-bottom: 0.8rem; }
.tracker-section .tracker-image { flex: 1; min-width: 280px; border-radius: 20px; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,0.4); }
.tracker-section .tracker-image img { width: 100%; height: 280px; object-fit: cover; display: block; transition: transform 0.4s ease; }
.tracker-section:hover .tracker-image img { transform: scale(1.02); }
.tracker-section.text-image { flex-direction: row; }
.tracker-section.image-text { flex-direction: row-reverse; }
@media (max-width: 768px) { .tracker-section { flex-direction: column !important; gap: 1.5rem; padding: 1.8rem 0; } .tracker-section .tracker-image img { height: 200px; } .tracker-section .tracker-text h2 { font-size: 1.6rem; } }
.faq-item { border: 1px solid rgba(122,199,240,0.25); border-radius: 16px; margin-bottom: 1rem; overflow: hidden; transition: border-color 0.2s; }
.faq-item:hover { border-color: rgba(122,199,240,0.6); }
.faq-question { width: 100%; background: transparent; border: none; padding: 1.2rem 1.5rem; display: flex; justify-content: space-between; align-items: center; color: #ffffff; font-family: 'Poppins', sans-serif; font-size: 1.05rem; font-weight: 500; cursor: pointer; text-align: left; }
.faq-question i { color: #7ac7f0; transition: transform 0.3s ease; flex-shrink: 0; margin-left: 1rem; }
.faq-item.active .faq-question i { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease; padding: 0 1.5rem; color: #cce0ff; line-height: 1.6; }
.faq-item.active .faq-answer { max-height: 300px; padding: 0 1.5rem 1.5rem; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.blog-card { border-radius: 24px; border: 1px solid rgba(122,199,240,0.2); overflow: hidden; transition: all 0.3s ease; cursor: pointer; }
.blog-card:hover { transform: translateY(-6px); border-color: #7ac7f0; box-shadow: 0 20px 35px -12px rgba(0,0,0,0.5); }
.blog-card img { width: 100%; height: 180px; object-fit: cover; display: block; }
.blog-tag { font-size: 0.7rem; color: #7ac7f0; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.5rem; }
.blog-title { font-size: 1.2rem; color: #fff; font-family: 'Tomorrow', sans-serif; margin-bottom: 0.5rem; }
.blog-desc { color: #bbd4ff; font-size: 0.9rem; line-height: 1.5; }
.blog-link { color: #7ac7f0; text-decoration: none; font-weight: 500; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.8rem; }
.blog-link:hover { text-decoration: underline; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-cards-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; max-width: 1200px; margin: 0 auto; }
.blog-card-compact { border-radius: 24px; border: 1px solid rgba(122,199,240,0.2); overflow: hidden; transition: all 0.3s ease; cursor: pointer; }
.blog-card-compact:hover { transform: translateY(-6px); border-color: #7ac7f0; box-shadow: 0 20px 40px rgba(0,0,0,0.4); }
.blog-card-compact img { width: 100%; height: 180px; object-fit: cover; display: block; }
.blog-card-compact .blog-body { padding: 1.2rem 1.5rem 1.5rem; }
.blog-card-compact .blog-title { font-family: 'Tomorrow', sans-serif; font-size: 1.1rem; color: #fff; margin: 0.3rem 0 0.4rem; line-height: 1.3; }
.blog-card-compact .blog-excerpt { color: #b0c9ff; font-size: 0.85rem; line-height: 1.5; margin-bottom: 0.8rem; }
.blog-card-compact .blog-readmore { color: #7ac7f0; font-weight: 500; font-size: 0.85rem; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; transition: gap 0.2s; }
.blog-card-compact .blog-readmore:hover { gap: 0.8rem; }
@media (max-width: 900px) { .blog-cards-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-cards-row { grid-template-columns: 1fr; } }

.category-filter-header { text-align: center; margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(122,199,240,0.15); }
.category-filter-header h2 { font-size: 2.5rem; background: linear-gradient(135deg, #fff, #7ac7f0); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; }
.category-filter-header p { color: #c0e0ff; margin-top: 0.5rem; }
.footer-category-link { cursor: pointer; transition: color 0.2s; }
.footer-category-link:hover { color: #7ac7f0 !important; }
.category-loading { text-align: center; padding: 2rem; color: #8aa6c9; }
.category-loading i { color: #7ac7f0; font-size: 2rem; display: block; margin-bottom: 1rem; }
.homepage-footer { width: 100%; border-top: 1px solid rgba(122,199,240,0.3); margin-top: 3rem; padding: 3rem 2rem 2rem; }
.footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; }
.footer-col h4 { color: #7ac7f0; margin-bottom: 1rem; font-family: 'Tomorrow', sans-serif; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.5rem; }
.footer-col a { color: #cce0ff; text-decoration: none; font-size: 0.85rem; transition: color 0.2s; cursor: pointer; }
.footer-col a:hover { color: #7ac7f0; }
.copyright { text-align: center; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(122,199,240,0.2); font-size: 0.75rem; color: #8aa6c9; }
.footer-social { display: flex; justify-content: center; gap: 1.2rem; margin-top: 2rem; }
.footer-social a { color: #cce0ff; background: rgba(255,255,255,0.05); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: 0.2s; text-decoration: none !important; }
.footer-social a:hover { background: #7ac7f0; color: #0a2647; transform: scale(1.1); }

@media (max-width: 1024px) { .studio-sidebar { width: 80px; } .dashboard-grid { grid-template-columns: repeat(2, 1fr); max-width: 700px; } .intro-video-section, .academy-modules-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .dashboard-grid { grid-template-columns: 1fr; max-width: 400px; } .dashboard-container { padding: 0.5rem 1rem 1rem 1rem; } .brand-tracker-container { padding: 0.5rem 0.8rem 1rem 0.8rem; } .view-header { padding: 0.8rem 1rem 0.3rem 1rem; min-height: 56px; } .view-header h2 { font-size: 1.4rem; } .community-card { padding: 2rem 1.5rem; } .pricing-grid-pro { grid-template-columns: 1fr; max-width: 400px; } .worldmap-container { height: 100%; flex: 1; } .user-menu { right: 12px; gap: 0.3rem; } .user-avatar { padding: 3px 8px 3px 6px; } .user-avatar .user-name { font-size: 0.75rem; max-width: 80px; } .footer-grid { grid-template-columns: repeat(2, 1fr); } .academy-modules-grid { grid-template-columns: 1fr; gap: 1rem; padding: 1rem; } .module-card { min-height: 160px; } .module-image { height: 100px; } }
@media (max-width: 480px) { .view-header h2 { font-size: 1.2rem; } .view-header p { font-size: 0.8rem; } .dashboard-card { padding: 1.2rem 1rem; min-height: 200px; } .dashboard-card .card-icon-wrapper { width: 48px; height: 48px; line-height: 48px; } .dashboard-card .card-icon-wrapper .card-icon { font-size: 1.4rem; } .dashboard-card .card-body h3 { font-size: 1rem; } .tracker-container-pro { max-height: 300px; min-height: 150px; } .producer-table-pro { font-size: 0.75rem; } .producer-table-pro thead th { font-size: 0.6rem; padding: 0.4rem 0.3rem; } .producer-table-pro tbody td { padding: 0.4rem 0.3rem; font-size: 0.75rem; } .producer-avatar-img-pro { width: 30px; height: 30px; } .tracker-png-display-pro img { max-height: 160px; max-width: 120px; } .module-card { width: 100%; max-width: 300px; } .module-image { height: 100px; } .worldmap-container { height: 100%; } .user-avatar .user-name { display: none; } .user-avatar { padding: 4px 8px; } .footer-grid { grid-template-columns: 1fr; } }

#mobile-block-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: none; flex-direction: column; align-items: center; justify-content: center; z-index: 999999; text-align: center; padding: 2rem; box-sizing: border-box; }
#mobile-block-overlay .mobile-icon { font-size: 4.5rem; color: #7ac7f0; margin-bottom: 1.5rem; }
#mobile-block-overlay h2 { font-family: 'Tomorrow', sans-serif; font-size: 2.2rem; color: #fff; margin-bottom: 0.5rem; background: linear-gradient(135deg, #fff, #7ac7f0); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; }
#mobile-block-overlay p { color: #b0c9ff; font-size: 1.15rem; max-width: 500px; line-height: 1.6; margin-bottom: 1.8rem; }
#mobile-block-overlay .btn-home { background: linear-gradient(135deg, #7ac7f0, #2c7cb6); border: none; padding: 0.8rem 2.5rem; border-radius: 40px; color: #0a2647; font-weight: 600; font-size: 1rem; cursor: pointer; transition: 0.25s ease; font-family: 'Poppins', sans-serif; box-shadow: 0 4px 20px rgba(122,199,240,0.2); }
#mobile-block-overlay .btn-home:hover { transform: scale(1.04); box-shadow: 0 8px 30px rgba(122,199,240,0.3); }

#view-dashboard .view-header { border-bottom: 1px solid rgba(122,199,240,0.15); }
#view-dashboard .view-header h2 { font-family: 'Tomorrow', sans-serif; font-size: 1.6rem; background: linear-gradient(135deg, #fff, #7ac7f0); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; margin: 0; }
#view-dashboard .view-header p { color: #8aa6c9; font-size: 0.85rem; margin: 0.1rem 0 0 0; }

#view-dashboard .dashboard-container { justify-content: flex-start; padding-top: 1.15rem; padding-bottom: 1rem; }
#view-dashboard .dashboard-grid { gap: 1rem; }
#view-dashboard .dashboard-card { min-height: 185px; padding: 1.25rem 1.2rem 1.15rem; border-radius: 24px; }
#view-dashboard .dashboard-card .card-icon-wrapper { width:50px; height:50px; line-height:50px; margin-bottom:.55rem; }
#view-dashboard .dashboard-card .card-icon-wrapper .card-icon { font-size:1.4rem; }
#view-dashboard .dashboard-card .card-body h3 { font-size:1.05rem; }
#view-dashboard .dashboard-card .card-body p { font-size:.78rem; margin-bottom:.65rem; line-height:1.35; }
#view-dashboard .dashboard-card .card-btn { padding:.48rem 1rem; font-size:.78rem; }
#view-dashboard .intro-video-section>div { padding:.85rem 1.2rem; border-radius:22px; }
@media (max-height: 820px) and (min-width: 769px) { #view-dashboard .producer-of-day { min-height:235px; max-height:255px; margin-bottom:.8rem; } #view-dashboard .producer-of-day model-viewer { min-height:235px; } #view-dashboard .producer-of-day-name { font-size:1.15rem; } #view-dashboard .dashboard-card { min-height:155px; } }
@media (max-width: 768px) { #view-dashboard .producer-of-day { min-height:260px; max-height:280px; } #view-dashboard .producer-of-day model-viewer { min-height:260px; } }

.signup-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 380px; max-width: 92%; border-radius: 24px; border: 1px solid rgba(122,199,240,0.3); box-shadow: 0 20px 60px rgba(0,0,0,0.6); padding: 1.8rem 1.8rem 1.5rem; z-index: 9999; display: none; transition: box-shadow 0.3s ease; text-align: center; }
.signup-popup:hover { box-shadow: 0 25px 70px rgba(0,0,0,0.7); }
.signup-popup .popup-image { width: 100%; height: 160px; border-radius: 16px; overflow: hidden; margin-bottom: 1rem; border: 1px solid rgba(122,199,240,0.15); }
.signup-popup .popup-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.signup-popup .popup-icon { font-size: 2.5rem; color: #7ac7f0; display: block; margin-bottom: 0.3rem; }
.signup-popup h3 { font-family: 'Tomorrow', sans-serif; font-size: 1.3rem; color: #fff; margin-bottom: 0.3rem; }
.signup-popup p { color: #b0c9ff; font-size: 0.9rem; line-height: 1.5; margin-bottom: 1.2rem; }
.signup-popup .popup-btn { background: linear-gradient(135deg, #7ac7f0, #2c7cb6); border: none; padding: 0.6rem 1.5rem; border-radius: 40px; color: #0a2647; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.3s ease; width: 100%; font-family: 'Poppins', sans-serif; }
.signup-popup .popup-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(122,199,240,0.3); }
.signup-popup .popup-close { position: absolute; top: 12px; right: 16px; background: none; border: none; color: #5a7a9a; font-size: 1.2rem; cursor: pointer; transition: color 0.2s; padding: 0; }
.signup-popup .popup-close:hover { color: #fff; }
.popup-bookmark { position: fixed; bottom: 30px; right: 30px; background: rgba(122,199,240,0.15); border: 1px solid rgba(122,199,240,0.3); border-radius: 50%; width: 56px; height: 56px; display: none; align-items: center; justify-content: center; cursor: pointer; z-index: 9998; transition: all 0.3s ease; color: #7ac7f0; font-size: 1.3rem; backdrop-filter: blur(8px); box-shadow: 0 8px 30px rgba(0,0,0,0.3); }
.popup-bookmark:hover { transform: scale(1.08); background: rgba(122,199,240,0.25); border-color: rgba(122,199,240,0.5); }
@media (max-width: 600px) { .signup-popup { width: 300px; padding: 1.5rem; } .signup-popup .popup-image { height: 120px; } .popup-bookmark { width: 48px; height: 48px; right: 15px; bottom: 15px; font-size: 1.1rem; } }

.cookie-consent { position: fixed; bottom: 0; left: 0; right: 0; border-top: 1px solid rgba(122,199,240,0.3); padding: 1.2rem 2rem; z-index: 9997; display: none; width: 100%; box-shadow: 0 -10px 60px rgba(0,0,0,0.5); align-items: center; gap: 1.2rem; flex-wrap: wrap; justify-content: center; transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), opacity 0.4s ease; transform: translateY(100%); opacity: 0; }
.cookie-consent.visible { display: flex; transform: translateY(0); opacity: 1; }
.cookie-consent .cookie-icon { font-size: 1.8rem; color: #f0b27a; flex-shrink: 0; }
.cookie-consent .cookie-text { flex: 1; min-width: 200px; color: #cce0ff; font-size: 0.85rem; line-height: 1.5; text-align: left; }
.cookie-consent .cookie-text a { color: #7ac7f0; text-decoration: none; font-weight: 500; }
.cookie-consent .cookie-text a:hover { text-decoration: underline; }
.cookie-consent .cookie-buttons { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.cookie-consent .cookie-btn { padding: 0.4rem 1.4rem; border-radius: 40px; font-weight: 600; font-size: 0.8rem; cursor: pointer; transition: all 0.3s ease; border: none; font-family: 'Poppins', sans-serif; }
.cookie-consent .cookie-btn.accept { background: linear-gradient(135deg, #7ac7f0, #2c7cb6); color: #0a2647; }
.cookie-consent .cookie-btn.accept:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(122,199,240,0.3); }
.cookie-consent .cookie-btn.decline { background: transparent; border: 1px solid rgba(255,255,255,0.1); color: #8aa6c9; }
.cookie-consent .cookie-btn.decline:hover { background: rgba(255,255,255,0.06); color: #fff; }
@media (max-width: 600px) { .cookie-consent { padding: 1rem 1.2rem; flex-direction: column; text-align: center; } .cookie-consent .cookie-text { text-align: center; font-size: 0.8rem; } .cookie-consent .cookie-buttons { justify-content: center; width: 100%; } .cookie-consent .cookie-btn { flex: 1; min-width: 80px; text-align: center; padding: 0.4rem 0.8rem; font-size: 0.75rem; } .cookie-consent .cookie-icon { display: none; } }

#loginLoadingOverlay { transition: opacity 0.6s ease; }
#loginLoadingOverlay.fade-out { opacity: 0; pointer-events: none; }
@keyframes pulseGlow { 0%,100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.2); opacity: 1; } }
@keyframes spinLoader { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes dotPulse { 0%,80%,100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1.2); opacity: 1; } }

.loading-toast { position: fixed; bottom: 100px; left: 20px; background: #000000aa; padding: 6px 12px; border-radius: 20px; font-size: 12px; z-index: 10003; display: none; }
.video-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.92); backdrop-filter: blur(20px); z-index: 500; display: none; justify-content: center; align-items: center; flex-direction: column; padding: 1.5rem; }
.video-modal.active { display: flex; }
.video-container { border-radius: 28px; overflow: hidden; width: 92%; max-width: 860px; border: 1px solid rgba(122,199,240,0.25); box-shadow: 0 0 80px rgba(122,199,240,0.08), 0 20px 60px rgba(0,0,0,0.5); position: relative; }
.video-container iframe { width: 100%; aspect-ratio: 16 / 9; border: none; display: block; background: #0a1a2f; }
.video-return-btn { margin-top: 1.2rem; background: linear-gradient(135deg, #7ac7f0, #2c7cb6); border: none; padding: 0.7rem 2rem; border-radius: 40px; font-weight: 600; font-size: 1rem; color: #0a2647; cursor: pointer; transition: all 0.3s ease; font-family: 'Poppins', sans-serif; display: inline-flex; align-items: center; gap: 0.6rem; box-shadow: 0 4px 20px rgba(122,199,240,0.2); }
.video-return-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(122,199,240,0.4); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; text-align: left; border-radius: 20px; padding: 1.8rem 2rem; border: 1px solid rgba(122,199,240,0.2); width: 100%; box-sizing: border-box; }
.contact-item { display: flex; align-items: center; gap: 0.8rem; }
.contact-icon { background: rgba(122,199,240,0.15); border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-icon i { color: #7ac7f0; font-size: 1.1rem; }
.contact-label { font-size: 0.7rem; color: #8aa6c9; text-transform: uppercase; letter-spacing: 0.5px; }
.contact-value { color: #fff; font-weight: 500; text-decoration: none; font-size: 0.95rem; }
@media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr !important; padding: 1.2rem !important; } }
.user-dropdown { z-index: 99999 !important; }
.user-menu { z-index: 9999 !important; }
.view-header { z-index: 10 !important; }
.worldmap-container { width: 100%; flex: 1; position: relative; min-height: 400px; height: 100%; }
.worldmap-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; min-height: 500px; }
#view-worldmap.active { margin-bottom: -80px; }
#view-worldmap.worldmap-loading-active .view-header, #view-worldmap.worldmap-loading-active .worldmap-container { opacity: 0 !important; visibility: hidden !important; }
#view-worldmap.worldmap-ready .view-header, #view-worldmap.worldmap-ready .worldmap-container { opacity: 1 !important; visibility: visible !important; transition: opacity .35s ease; }
#worldMapLoadingOverlay { background: rgba(3,12,26,.97) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: opacity .32s ease !important; }

#view-help-center.active { margin-bottom: -80px !important; height: calc(100% + 80px) !important; padding-bottom: 0 !important; }
#view-help-center.active .help-center-container { padding-bottom: 0px !important; box-sizing: border-box !important; }
#view-help-center.active .help-center-container::after { content: ""; display: block; height: 80px; width: 100vw; margin-left: calc(50% - 50vw); flex: 0 0 80px; background: rgba(8,18,32,0.6); }

.tracker-header-bar .search-wrapper { display: flex; align-items: center; position: relative; min-width: 160px; max-width: 220px; z-index: 1000; }
.tracker-header-bar .search-wrapper input { width: 100%; padding: 0.3rem 0.5rem 0.3rem 1.8rem; background: rgba(255,255,255,0.08); border: 1px solid rgba(122,199,240,0.2); border-radius: 20px; color: #fff; font-size: 0.75rem; font-family: 'Poppins', sans-serif; outline: none; transition: all 0.3s ease; position: relative; z-index: 1001; }
.tracker-header-bar .search-wrapper input:focus { border-color: #7ac7f0; background: rgba(255,255,255,0.12); box-shadow: 0 0 0 2px rgba(122,199,240,0.15); }
.tracker-header-bar .search-wrapper input::placeholder { color: #5a7a9a; font-size: 0.65rem; }
.tracker-header-bar .search-wrapper .search-icon { color: #5a7a9a; font-size: 0.7rem; position: absolute; left: 0.7rem; z-index: 1001; pointer-events: none; }
.tracker-header-bar .search-wrapper .clear-btn { position: absolute; right: 0.4rem; background: transparent; border: none; color: #5a7a9a; cursor: pointer; font-size: 0.7rem; display: none; padding: 0.1rem 0.3rem; border-radius: 50%; z-index: 1001; }
.tracker-header-bar .search-wrapper .clear-btn.visible { display: block; }
.tracker-header-bar .search-wrapper .clear-btn:hover { color: #fff; }
.tracker-header-bar .search-wrapper .tracker-suggestions { position: absolute; top: calc(100% + 6px); left: 0; right: 0; border-radius: 12px; border: 1px solid rgba(122,199,240,0.25); box-shadow: 0 16px 60px rgba(0,0,0,0.7); max-height: 280px; overflow-y: auto; z-index: 99999; display: none !important; min-width: 280px; }
.tracker-header-bar .search-wrapper .tracker-suggestions.visible { display: block !important; }
.tracker-header-bar .search-wrapper .tracker-suggestions .suggestion-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.9rem; cursor: pointer; transition: all 0.2s ease; border-bottom: 1px solid rgba(122,199,240,0.06); }
.tracker-header-bar .search-wrapper .tracker-suggestions .suggestion-item:last-child { border-bottom: none; }
.tracker-header-bar .search-wrapper .tracker-suggestions .suggestion-item:hover, .tracker-header-bar .search-wrapper .tracker-suggestions .suggestion-item.active { background: rgba(122,199,240,0.12); }
.tracker-header-bar .search-wrapper .tracker-suggestions .suggestion-item img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(122,199,240,0.25); flex-shrink: 0; }
.tracker-header-bar .search-wrapper .tracker-suggestions .suggestion-item .suggestion-info { flex: 1; display: flex; flex-direction: column; }
.tracker-header-bar .search-wrapper .tracker-suggestions .suggestion-item .suggestion-name { color: #fff; font-weight: 500; font-size: 0.85rem; }
.tracker-header-bar .search-wrapper .tracker-suggestions .suggestion-item .suggestion-detail { color: #8aa6c9; font-size: 0.7rem; }
.tracker-header-bar .search-wrapper .tracker-suggestions .suggestion-item .suggestion-match { color: #7ac7f0; font-size: 0.6rem; background: rgba(122,199,240,0.1); padding: 0.05rem 0.6rem; border-radius: 10px; white-space: nowrap; }
.tracker-header-bar .search-wrapper .tracker-suggestions .suggestion-empty { padding: 1.2rem; text-align: center; color: #8aa6c9; font-size: 0.85rem; }
.tracker-header-bar .search-wrapper .tracker-suggestions::-webkit-scrollbar { width: 4px; }
.tracker-header-bar .search-wrapper .tracker-suggestions::-webkit-scrollbar-thumb { background: rgba(122,199,240,0.3); border-radius: 4px; }

@keyframes pageFadeIn { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } }
.fade-enter { animation: pageFadeIn 0.35s ease-out forwards; }
.signup-popup { transition: opacity 0.4s ease, visibility 0.4s ease; opacity: 0; visibility: hidden; display: flex; flex-direction: column; }
.signup-popup.visible { opacity: 1; visibility: visible; }

.homepage-hero-globe-section { min-height: calc(100vh - 78px); height: calc(100vh - 78px); padding: 80px 0 0 0; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; isolation: isolate; }
.homepage-hero-globe-section::before { position: absolute; inset: 0; background: radial-gradient(circle at 72% 50%, rgba(45,128,255,.12), transparent 34%), linear-gradient(90deg, rgba(1,7,17,.78) 0%, rgba(1,7,17,.36) 48%, rgba(1,7,17,.04) 100%); z-index: -1; pointer-events: none; }
.homepage-hero-grid { width: 100%; max-width: 1450px; height: 100%; display: grid; grid-template-columns: minmax(420px, .9fr) minmax(520px, 1.1fr); align-items: center; gap: clamp(.25rem, 2vw, 2rem); padding: 0 clamp(2rem, 6vw, 7rem); margin: 0 auto; }
.homepage-hero-copy { max-width: 720px; padding: 0; text-align: left; justify-self: start; z-index: 5; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; animation: homepageHeroCopyIn .9s cubic-bezier(.22,1,.36,1) both; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: .8rem; color: #7ac7f0; font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.hero-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; box-shadow: 0 0 12px rgba(122,199,240,.7); }
.homepage-hero-copy .hero-title { max-width: 760px; font-size: clamp(2.55rem, 3.75vw, 4.15rem); line-height: .98; letter-spacing: -.045em; margin-bottom: 1rem; }
.homepage-hero-copy .hero-subtitle { max-width: 610px; margin-bottom: 2rem; font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.7; color: #b9d4f2; }
.hero-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.hero-login-btn, .hero-secondary-btn { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 50px; padding: .85rem 1.45rem; border-radius: 999px; font-family: 'Poppins', sans-serif; font-weight: 700; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease; }
.hero-login-btn { background: linear-gradient(135deg, #b9e9ff 0%, #7ac7f0 42%, #2c7cb6 100%); color: #06162b; }
.hero-login-btn:hover, .hero-secondary-btn:hover { transform: translateY(-3px); }
.hero-login-btn:hover { box-shadow: 0 12px 35px rgba(74,160,224,.28); }
.hero-secondary-btn { background: rgba(255,255,255,.045); border: 1px solid rgba(122,199,240,.24); color: #dcecff; backdrop-filter: blur(12px); }
.hero-secondary-btn:hover { background: rgba(122,199,240,.10); border-color: rgba(122,199,240,.5); }
.hero-proof-row { display: flex; align-items: center; gap: 1.6rem; margin-top: 2.4rem; padding-top: 1.25rem; border-top: 1px solid rgba(122,199,240,.12); }
.hero-proof-row>div { display: flex; flex-direction: column; gap: .1rem; }
.hero-proof-row strong { color: #fff; font-family: 'Tomorrow', sans-serif; font-size: 1.15rem; }
.hero-proof-row span { color: #718eaf; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; }

.homepage-globe-wrap { position: relative; width: min(45vw, 680px); height: min(45vw, 680px); min-width: 420px; min-height: 420px; justify-self: end; opacity: 0; transform: translate3d(45px, 8px, 0) scale(.94); animation: homepageGlobeIn 1.35s cubic-bezier(.16,1,.3,1) .2s forwards; filter: none; }
#homepage-globe-map { position: absolute; inset: 0; z-index: 3; border-radius: 50%; overflow: hidden; background: transparent; box-shadow: none; }
#homepage-globe-map .mapboxgl-canvas { border-radius: 50%; clip-path: none; }
#homepage-globe-map .mapboxgl-ctrl-group { display: none; }
@keyframes homepageHeroCopyIn { from { opacity: 0; transform: translate3d(-28px,18px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes homepageGlobeIn { 0% { opacity: 0; transform: translate3d(70px,12px,0) scale(.91); filter: blur(10px) drop-shadow(0 25px 80px rgba(0,0,0,.48)); } 65% { opacity: 1; filter: blur(0) drop-shadow(0 25px 80px rgba(0,0,0,.48)); } 100% { opacity: 1; transform: translate3d(0,0,0) scale(1); } }
@keyframes globeAuraPulse { 0%,100% { opacity: .58; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes globeRingSpin { from { transform: rotate(18deg) scaleX(.72); } to { transform: rotate(378deg) scaleX(.72); } }
@keyframes globeRingSpinReverse { from { transform: rotate(-28deg) scaleX(.82); } to { transform: rotate(-388deg) scaleX(.82); } }
@keyframes globeStatusPulse { 0%,100% { opacity: .45; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }

.homepage-hero-globe-section { padding-top: 0 !important; padding-bottom: 0 !important; }
.homepage-hero-grid { margin-top: 0 !important; margin-bottom: 0 !important; }
.homepage-hero-copy, .homepage-globe-wrap { margin-top: 0 !important; margin-bottom: 0 !important; }
.homepage-globe-wrap { align-self: center; }
@media (max-width: 1100px) { .homepage-hero-globe-section { padding: 2rem 4vw; } .homepage-hero-grid { grid-template-columns: minmax(360px, .9fr) minmax(430px, 1.1fr); gap: 0; } .homepage-globe-wrap { width: min(48vw, 560px); height: min(48vw, 560px); min-width: 390px; min-height: 390px; } .homepage-hero-copy .hero-title { font-size: clamp(2.45rem, 3.6vw, 3.8rem); } }
@media (max-width: 900px) {
    .homepage { display: flex !important; visibility: visible !important; opacity: 1 !important; overflow-y: auto !important; }
    .homepage-header { display: grid !important; visibility: visible !important; opacity: 1 !important; justify-content: center !important; align-items: center !important; padding: 0 1rem; height: 56px; gap: 0; transform: translateY(0) !important; }
    .homepage-header .logo { flex: 0 0 auto !important; margin: 0 !important; }
    .homepage-header .logo .logo-image { height: 22px; width: auto; }
    .hamburger-btn { display: block !important; position: absolute !important; right: 1rem; top: 50%; transform: translateY(-50%); padding: 0.3rem 0.5rem; font-size: 1.5rem; line-height: 1; }
    .nav-menu, .header-buttons { display: none !important; }
    .nav-menu-mobile { top: 56px !important; height: calc(100vh - 56px) !important; }
    .homepage-hero-globe-section { display: flex !important; visibility: visible !important; opacity: 1 !important; min-height: auto; height: auto; padding: 3.5rem 1.25rem 2rem; }
    .homepage-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
    .homepage-hero-copy { max-width: 700px; text-align: left; }
    .homepage-globe-wrap { display: block !important; visibility: visible !important; width: min(82vw, 560px); height: min(82vw, 560px); min-width: 0; min-height: 0; justify-self: center; order: 2; }
}
@media (prefers-reduced-motion: reduce) { .homepage-hero-copy, .homepage-globe-wrap { animation: none !important; } }
@media (min-width: 901px) { .homepage-hero-copy, .homepage-globe-wrap { position: relative; top: -75px; } }
.homepage-hero-globe-section { margin-bottom: 0 !important; }
.homepage-sections { margin-top: -120px !important; }
@media (min-width: 901px) { .homepage-hero-copy { position: relative; left: 50px; } }
.hero-secondary-btn { display: none !important; }
.hero-login-btn { min-height: 60px !important; padding: 0.9rem 2.8rem !important; border-radius: 999px !important; font-family: 'Poppins', sans-serif !important; font-weight: 700 !important; font-size: 1.2rem !important; color: #0a2647 !important; background: linear-gradient(135deg, #f7971e, #ffd200, #f9ca24) !important; box-shadow: 0 8px 35px rgba(247,151,30,0.4), 0 0 60px rgba(255,210,0,0.15) !important; transition: all 0.3s cubic-bezier(0.22,1,0.36,1) !important; letter-spacing: 0.5px !important; text-shadow: 0 1px 2px rgba(255,255,255,0.2) !important; border: none !important; width: auto !important; }
.hero-login-btn:hover { transform: translateY(-4px) scale(1.02) !important; box-shadow: 0 12px 45px rgba(247,151,30,0.6), 0 0 80px rgba(255,210,0,0.25) !important; }
.hero-login-btn i { font-size: 1.1rem !important; transition: transform 0.3s ease !important; }
.hero-login-btn:hover i { transform: translateX(4px) !important; }
.hero-login-btn { font-size: 0 !important; }
.hero-login-btn::before { content: "Get started for free"; font-size: 1.2rem; font-weight: 700; }
.hero-login-btn i { font-size: 1.1rem !important; }
.hero-proof-row strong { font-size: clamp(2.8rem, 4vw, 4.5rem) !important; display: block !important; line-height: 1.1 !important; font-weight: 700 !important; }
.hero-proof-row span { font-size: clamp(0.45rem, 1vw, 3.7rem) !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; font-weight: 500 !important; }
.hero-proof-row { gap: 2.5rem !important; flex-wrap: wrap !important; margin-top: 2.5rem !important; padding-top: 1.8rem !important; }
.hero-proof-row>div { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; }

.story-header { font-family: 'Tomorrow', sans-serif; font-size: 1.6rem; color: #ffffff; margin: 0 0 0.4rem 0; font-weight: 600; letter-spacing: 0.5px; border-bottom: 2px solid rgba(122,199,240,0.15); padding-bottom: 0.4rem; display: flex; align-items: center; gap: 0.8rem; }
.story-header i { color: #7ac7f0; font-size: 1.4rem; }
.story-text-pro { font-size: 1.2rem !important; line-height: 1.7; color: #d0e0ff; margin: 0.2rem 0 1.5rem; text-align: justify; text-justify: inter-word; hyphens: auto; }

#blog-info { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; box-shadow: none !important; }
#blog-info #blogListing .blog-card, #blog-info #blogListing .blog-card-compact { background: rgba(0,0,0,0.35) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; border: 1px solid rgba(122,199,240,0.15) !important; }
#blog-info #blogListing .blog-card:hover, #blog-info #blogListing .blog-card-compact:hover { background: rgba(0,0,0,0.50) !important; }
#blog-info #blogArticle, #blog-info #blogArticle .blog-card, #blog-info #blogArticleContent>div { background: rgba(8,18,32,0.85) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-radius: 24px !important; padding: 2rem !important; border: 1px solid rgba(122,199,240,0.15) !important; }

.hero-proof-row strong { display: inline-block; transition: none; }
.hero-proof-row strong.counter-animated { }
.hero-proof-row strong.fade-ready { opacity: 0; transition: opacity 1.2s cubic-bezier(0.22,1,0.36,1); }
.hero-proof-row strong.fade-in { opacity: 1; }
.homepage-globe-wrap { pointer-events: none; cursor: default; user-select: none; -webkit-user-select: none; }
#homepage-globe-map { pointer-events: none !important; cursor: default !important; touch-action: none !important; }
#homepage-globe-map .mapboxgl-canvas { cursor: default !important; touch-action: none !important; }

/* ─── Brand Tracker + Multi-Track Player ─── */
.tracker-header-bar { display: flex !important; align-items: center !important; gap: 0.35rem !important; padding: 0.55rem 0.7rem !important; min-height: 54px; }
.tracker-header-bar .header-cell { display: flex; align-items: center; min-height: 32px; }
.tracker-header-bar .header-cell.spacer { display: none !important; }
.tracker-header-bar .header-cell.search-wrapper { flex: 0 0 230px !important; width: 230px !important; min-width: 230px !important; max-width: 230px !important; margin-left: 0.45rem !important; }
.tracker-header-bar .search-wrapper input { height: 34px !important; padding: 0.35rem 2rem 0.35rem 2rem !important; font-size: 0.74rem !important; }
.tracker-header-bar .search-wrapper .search-icon { left: 0.75rem !important; font-size: 0.7rem !important; }
.tracker-header-bar .search-wrapper .clear-btn { right: 0.35rem !important; }
.tracker-header-bar .header-cell.number { width: 60px !important; min-width: 60px !important; }
.tracker-header-bar .header-cell.producer { width: 25% !important; min-width: 120px !important; }
.tracker-header-bar .header-cell.style { width: 30% !important; min-width: 140px !important; justify-content: flex-start; }
.tracker-header-bar .header-cell.country { width: 15% !important; min-width: 80px !important; }
.producer-table-pro tbody td img[src*="flagcdn"] { width: 38px !important; height: 26px !important; border-radius: 5px !important; }
.producer-table-pro tbody td:nth-child(5) { display: none !important; }
.producer-table-pro tbody td:nth-child(1) { width: 60px !important; }
.producer-table-pro tbody td:nth-child(2) { width: 25% !important; }
.producer-table-pro tbody td:nth-child(3) { width: 30% !important; }
.producer-table-pro tbody td:nth-child(4) { width: 15% !important; }

.producer-detail-nav-pro { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin: 0.8rem 0 1rem; padding: 0.55rem 0; }
.producer-detail-nav-btn-pro { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-width: 130px; padding: 0.58rem 0.85rem; border-radius: 12px; border: 1px solid rgba(122,199,240,0.18); background: rgba(255,255,255,0.045); color: #cce0ff; font-family: 'Poppins', sans-serif; font-size: 0.76rem; cursor: pointer; transition: all 0.22s ease; }
.producer-detail-nav-btn-pro:hover:not(:disabled) { background: rgba(122,199,240,0.12); border-color: rgba(122,199,240,0.42); color: #fff; transform: translateY(-1px); }
.producer-detail-nav-btn-pro:disabled { opacity: 0.3; cursor: not-allowed; }
.producer-detail-nav-btn-pro i { color: #7ac7f0; }
.producer-detail-nav-label-pro { color: #5a7a9a; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1px; text-align: center; }

.global-player-track-area { position: relative; min-width: 180px; }
.global-player-track-toggle { display: inline-flex; align-items: center; gap: 0.45rem; max-width: 230px; padding: 0.42rem 0.7rem; border-radius: 10px; border: 1px solid rgba(122,199,240,0.18); background: rgba(255,255,255,0.045); color: #dcecff; cursor: pointer; font-family: 'Poppins', sans-serif; font-size: 0.72rem; white-space: nowrap; transition: all 0.2s ease; }
.global-player-track-toggle:hover { background: rgba(122,199,240,0.1); border-color: rgba(122,199,240,0.38); }
.global-player-track-toggle .track-toggle-title { overflow: hidden; text-overflow: ellipsis; }
.global-player-track-toggle .track-count { color: #7ac7f0; font-size: 0.62rem; margin-left: auto; }
.global-player-track-toggle .track-chevron { color: #8aa6c9; transition: transform 0.2s ease; }
.global-player-track-area.open .track-chevron { transform: rotate(180deg); }
.global-player-track-menu { position: absolute; left: 0; bottom: calc(100% + 10px); width: 330px; max-width: min(330px, 70vw); max-height: 310px; overflow-y: auto; padding: 0.45rem; border-radius: 16px; border: 1px solid rgba(122,199,240,0.22); background: rgba(8,18,32,0.98); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: 0 18px 60px rgba(0,0,0,0.62); z-index: 10050; display: none; }
.global-player-track-area.open .global-player-track-menu { display: block; }
.global-player-track-item { width: 100%; display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem; border: 0; border-radius: 11px; background: transparent; color: #dcecff; text-align: left; cursor: pointer; font-family: 'Poppins', sans-serif; transition: background 0.18s ease; }
.global-player-track-item:hover, .global-player-track-item.active { background: rgba(122,199,240,0.1); }
.global-player-track-cover { width: 38px; height: 38px; border-radius: 7px; object-fit: cover; flex: 0 0 38px; border: 1px solid rgba(255,255,255,0.1); }
.global-player-track-meta { min-width: 0; flex: 1; }
.global-player-track-title { font-size: 0.73rem; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.global-player-track-subtitle { margin-top: 2px; color: #6f8baa; font-size: 0.6rem; }
.global-player-track-check { color: #7ac7f0; font-size: 0.7rem; opacity: 0; }
.global-player-track-item.active .global-player-track-check { opacity: 1; }
.global-audio-player { gap: 0.8rem !important; }

@media (max-width: 900px) { .tracker-header-bar .header-cell.search-wrapper { flex: 0 0 190px !important; width: 190px !important; min-width: 190px !important; max-width: 190px !important; } }
@media (max-width: 600px) { .tracker-header-bar { flex-wrap: wrap; } .tracker-header-bar .header-cell.search-wrapper { order: 10; flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0.15rem 0 0 !important; } .producer-table-pro tbody td img[src*="flagcdn"] { width: 34px !important; height: 23px !important; } .producer-detail-nav-btn-pro { min-width: 0; flex: 1; } .producer-detail-nav-label-pro { display: none; } .global-player-track-menu { width: 290px; max-width: 80vw; } }

.dashboard-main,.dashboard-content,.dashboard-grid,.dashboard-hero,.producer-of-day,.producer-of-day-section{width:min(100%,1180px);max-width:1180px;margin-left:auto;margin-right:auto;box-sizing:border-box}
.dashboard-cards,.dashboard-card-grid{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.producer-of-day,.producer-of-day-section{margin-bottom:1rem}
.dashboard-intro-tutorial,.intro-tutorial-section,.watch-intro-section{display:none!important}
.dashboard-tutorial-launcher{position:fixed;left:96px;bottom:22px;z-index:30;width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.82);background:rgba(8,18,32,.72);border:1px solid rgba(122,199,240,.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(0,0,0,.22);cursor:pointer;transition:.2s ease}
.dashboard-tutorial-launcher:hover{transform:translateY(-2px);background:rgba(20,42,68,.88);border-color:rgba(122,199,240,.42);color:#fff}
.dashboard-tutorial-launcher i{font-size:16px}
.dashboard-tutorial-launcher .tutorial-tooltip{position:absolute;left:calc(100% + 10px);bottom:0;white-space:nowrap;padding:8px 11px;border-radius:9px;background:rgba(8,18,32,.94);border:1px solid rgba(122,199,240,.16);color:#dbeaff;font-size:11px;opacity:0;pointer-events:none;transform:translateX(-4px);transition:.18s ease}
.dashboard-tutorial-launcher:hover .tutorial-tooltip{opacity:1;transform:translateX(0)}
.tracker-header-bar{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(240px,320px);align-items:end;column-gap:18px}
.tracker-header-bar .search-wrapper{width:100%!important;max-width:320px;margin-left:0!important;margin-right:0!important;justify-self:end}
@media(max-width:900px){.dashboard-cards,.dashboard-card-grid{grid-template-columns:1fr}.dashboard-tutorial-launcher{left:18px;bottom:18px}.tracker-header-bar{grid-template-columns:1fr;row-gap:12px}.tracker-header-bar .search-wrapper{max-width:none;justify-self:stretch}}

/* ─── ACADEMY LMS STYLES ─── */
#view-academy { background: transparent !important; }
#pbAcademyLmsRoot {
    --pb-bg: rgba(4,12,24,.96);
    --pb-surface: rgba(8,22,40,.82);
    --pb-surface2: rgba(12,31,53,.78);
    --pb-line: rgba(122,199,240,.14);
    --pb-line-strong: rgba(122,199,240,.32);
    --pb-text: #f4f8ff;
    --pb-muted: #8fa9c7;
    --pb-accent: #7ac7f0;
    --pb-accent2: #cceaff;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: auto;
    color: var(--pb-text);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#pbAcademyLmsRoot *,#pbAcademyLmsRoot *::before,#pbAcademyLmsRoot *::after { box-sizing: border-box; }
#pbAcademyLmsRoot button { font: inherit; }
.pb-academy-page { display: none; min-height: 100%; }
.pb-academy-page.is-active { display: block; }
.pb-academy-container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.pb-academy-topbar { display: none !important; }
.pb-academy-brand { font-weight: 800; letter-spacing: -.04em; font-size: 18px; display: flex; align-items: center; gap: 9px; }
.pb-academy-brand-mark { color: var(--pb-accent); text-shadow: 0 0 16px rgba(122,199,240,.55); }
.pb-academy-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: .16em; color: var(--pb-muted); font-weight: 800; }
.pb-academy-hero { padding: 72px 0 36px; }
.pb-academy-hero h1,.pb-academy-course-head h1,.pb-academy-lesson-title h1 { font-family: "Clash Display", Inter, system-ui, sans-serif; letter-spacing: -.045em; }
.pb-academy-hero h1 { font-size: clamp(42px, 6vw, 72px); line-height: .95; margin: 12px 0 0; }
.pb-academy-hero p,.pb-academy-course-head p { color: var(--pb-muted); margin-top: 18px; font-size: 16px; }
.pb-academy-course-grid { display: grid; grid-template-columns: 1fr; gap: 28px; padding: 20px 0 80px; justify-items: center; }
.pb-academy-course-card { cursor: pointer; transition: transform .3s ease, filter .3s ease; max-width: 760px; width: 100%; }
.pb-academy-course-card:hover { transform: translateY(-5px); filter: brightness(1.04); }
.pb-academy-cover { aspect-ratio: 16/10; border-radius: 16px; overflow: hidden; position: relative; background: linear-gradient(135deg, #081a2d, #0b3150 55%, #06101c); border: 1px solid var(--pb-line-strong); box-shadow: 0 22px 70px rgba(0,0,0,.28); }
.pb-academy-cover img { width: 100%; height: 100%; object-fit: cover; opacity: .24; display: block; }
.pb-academy-cover-shade { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(2,12,24,.88), rgba(5,29,52,.62), rgba(2,9,18,.92)); }
.pb-academy-cover-shade::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 68% 26%, rgba(122,199,240,.34), transparent 20%), radial-gradient(circle at 20% 82%, rgba(67,135,200,.22), transparent 25%); }
.pb-academy-cover-stars { position: absolute; inset: 0; opacity: .48; background-image: radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 1.5px); background-size: 62px 62px; background-position: 12px 18px; }
.pb-academy-cover-content { position: absolute; inset: 0; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; }
.pb-academy-cover-number { font-size: 11px; letter-spacing: .18em; color: rgba(255,255,255,.68); }
.pb-academy-cover-title { font-family: "Clash Display", Inter, sans-serif; font-size: clamp(28px, 4vw, 42px); line-height: .96; font-weight: 800; max-width: 420px; text-shadow: 0 8px 30px rgba(0,0,0,.35); }
.pb-academy-course-info { padding: 18px 2px; }
.pb-academy-course-info h2 { font-size: 21px; margin: 0; }
.pb-academy-course-info p { font-size: 13px; color: var(--pb-muted); margin: 6px 0 0; }
.pb-academy-progress { height: 4px; background: rgba(255,255,255,.08); border-radius: 99px; margin-top: 14px; overflow: hidden; }
.pb-academy-progress i { display: block; height: 100%; background: linear-gradient(90deg, #5daee0, #a7ddfa); width: 0%; transition: width .45s ease; box-shadow: 0 0 14px rgba(122,199,240,.35); }
.pb-academy-meta { display: flex; justify-content: space-between; margin-top: 9px; color: var(--pb-muted); font-size: 12px; gap: 14px; }

.pb-academy-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--pb-line); margin-bottom: 20px; padding-top: 12px; }
.pb-academy-tabs button { border: 0; background: transparent; color: var(--pb-muted); cursor: pointer; padding: 13px 15px; border-bottom: 2px solid transparent; transition: .2s ease; font-size: 0.9rem; font-weight: 500; }
.pb-academy-tabs button:hover { color: #fff; }
.pb-academy-tabs button.is-active { color: #fff; border-bottom-color: var(--pb-accent); }

#pbAcademyStatsSection { padding: 20px 0 60px; }
.pb-academy-stats-dashboard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 30px; }
.pb-academy-stat-card { border: 1px solid var(--pb-line); background: rgba(7,20,34,.52); border-radius: 16px; padding: 24px 20px; text-align: center; }
.pb-academy-stat-card .stat-number { font-size: 2.6rem; font-weight: 700; color: #fff; font-family: 'Tomorrow', sans-serif; display: block; }
.pb-academy-stat-card .stat-label { font-size: 0.75rem; color: var(--pb-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }
.pb-academy-stat-card .stat-sub { font-size: 0.7rem; color: var(--pb-muted); margin-top: 2px; }
.pb-academy-module-breakdown { border: 1px solid var(--pb-line); border-radius: 16px; background: rgba(7,20,34,.52); padding: 24px; }
.pb-academy-module-breakdown h3 { font-family: 'Tomorrow', sans-serif; font-size: 1.1rem; color: #fff; margin: 0 0 16px 0; }
.pb-academy-module-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(122,199,240,.06); }
.pb-academy-module-row:last-child { border-bottom: none; }
.pb-academy-module-row .mod-name { color: #cce0ff; font-size: 0.9rem; }
.pb-academy-module-row .mod-progress { display: flex; align-items: center; gap: 12px; }
.pb-academy-module-row .mod-bar { width: 120px; height: 4px; background: rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; }
.pb-academy-module-row .mod-bar i { display: block; height: 100%; background: linear-gradient(90deg, #5daee0, #a7ddfa); border-radius: 4px; transition: width .45s ease; }
.pb-academy-module-row .mod-pct { color: var(--pb-muted); font-size: 0.75rem; min-width: 40px; text-align: right; }
.pb-academy-module-row .mod-check { color: #4caf50; font-size: 0.9rem; }

.pb-academy-learning-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pb-academy-learning-card { position: relative; min-height: 280px; border: 1px solid var(--pb-line); border-radius: 16px; background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(122,199,240,.012)); cursor: pointer; overflow: hidden; transition: .3s ease; display: flex; flex-direction: column; }
.pb-academy-learning-card:hover { border-color: var(--pb-line-strong); transform: translateY(-3px); box-shadow: 0 16px 45px rgba(0,0,0,.18); }
.pb-academy-card-image { height: 145px; position: relative; overflow: hidden; background: linear-gradient(135deg, #0c2035, #07111e); }
.pb-academy-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .56; transition: transform .4s ease, opacity .4s ease; }
.pb-academy-learning-card:hover .pb-academy-card-image img { transform: scale(1.04); opacity: .68; }
.pb-academy-card-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(2,9,18,.72)); }
.pb-academy-utility-icon { position: absolute; inset: 0; display: grid; place-items: center; font-size: 42px; color: var(--pb-accent); font-weight: 800; }
.pb-academy-card-body { padding: 18px 20px 24px; }
.pb-academy-card-no { color: var(--pb-accent); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.pb-academy-card-body h2 { font-family: "Clash Display", Inter, sans-serif; font-size: 22px; margin: 9px 0 6px; letter-spacing: -.035em; }
.pb-academy-card-body p { color: var(--pb-muted); font-size: 13px; line-height: 1.55; margin: 0; }
.pb-academy-utility-badge { display: inline-flex; margin-top: 13px; padding: 5px 9px; border-radius: 999px; border: 1px solid rgba(122,199,240,.16); color: #cceaff; font-size: 10px; }
.pb-academy-card-arrow { position: absolute; right: 18px; bottom: 16px; color: var(--pb-muted); font-size: 22px; transition: .2s; }
.pb-academy-learning-card:hover .pb-academy-card-arrow { color: #fff; transform: translateX(4px); }

.pb-academy-panel { border: 1px solid var(--pb-line); border-radius: 16px; padding: 24px; background: rgba(7,18,31,.72); margin: 12px 0 70px; }
.pb-academy-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.pb-academy-panel-heading h2 { font-size: 28px; margin: 8px 0 5px; }
.pb-academy-panel-heading p { color: var(--pb-muted); margin: 0; font-size: 13px; }
.pb-academy-quiz-score { color: var(--pb-accent); font-weight: 800; font-size: 18px; }
.pb-academy-quiz-card { border: 1px solid var(--pb-line); border-radius: 14px; padding: 22px; background: rgba(255,255,255,.025); }
.pb-quiz-question-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, .75fr); gap: 24px; align-items: stretch; }
.pb-quiz-question-copy { min-width: 0; display: flex; flex-direction: column; }
.pb-quiz-question-visual { min-height: 300px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(122,199,240,.14); background: #07111e; position: relative; box-shadow: inset 0 0 45px rgba(0,0,0,.2); }
.pb-quiz-question-visual img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; display: block; opacity: .78; }
.pb-quiz-question-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,12,22,.08), rgba(4,12,22,.48)); pointer-events: none; }
.pb-quiz-visual-label { position: absolute; left: 14px; bottom: 12px; z-index: 2; padding: 6px 9px; border-radius: 999px; background: rgba(4,12,22,.72); border: 1px solid rgba(122,199,240,.18); color: #dcecff; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(8px); }
@media (max-width: 850px) {
    .pb-quiz-question-layout { grid-template-columns: 1fr; }
    .pb-quiz-question-visual { min-height: 220px; max-height: 300px; }
    .pb-quiz-question-visual img { min-height: 220px; }
}

.pb-quiz-intro { text-align:center; max-width:620px; margin:10px auto 4px; padding:28px 10px 18px; }
.pb-quiz-intro .pb-academy-kicker { margin-bottom:10px; }
.pb-quiz-intro h2 { font-family:"Clash Display",Inter,sans-serif; font-size:34px; margin:0 0 8px; letter-spacing:-.035em; }
.pb-quiz-intro p { color:var(--pb-muted); font-size:14px; margin:0 auto 18px; }
.pb-quiz-intro-meta { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.pb-quiz-intro-meta span { padding:7px 11px; border:1px solid var(--pb-line); border-radius:999px; color:#cfe3fa; font-size:11px; background:rgba(255,255,255,.025); }
.pb-quiz-question-layout.minimal { grid-template-columns:minmax(0,1fr) minmax(300px,.72fr); }
.pb-quiz-question-copy.minimal { padding:8px 4px; justify-content:center; }
.pb-quiz-question-copy.minimal .pb-academy-question { font-size:28px; margin-top:10px; }
.pb-quiz-question-copy.minimal .pb-academy-quiz-options { margin-top:4px; }
.pb-quiz-question-copy.minimal .pb-academy-quiz-footer { margin-top:20px; }
.pb-quiz-question-visual.minimal { min-height:360px; }
.pb-quiz-question-visual.minimal img { min-height:360px; }
.pb-quiz-minimal-progress { display:flex; justify-content:space-between; align-items:center; margin:0 0 14px; color:var(--pb-muted); font-size:11px; }
.pb-quiz-minimal-progress strong { color:#dceaff; font-weight:700; }
@media(max-width:850px){ .pb-quiz-question-layout.minimal{grid-template-columns:1fr;} .pb-quiz-question-visual.minimal,.pb-quiz-question-visual.minimal img{min-height:220px;} }
.pb-academy-question-number { color: var(--pb-accent); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.pb-academy-question { font-family: "Clash Display", Inter, sans-serif; font-size: 24px; line-height: 1.15; margin: 10px 0 18px; }
.pb-academy-quiz-options { display: grid; gap: 9px; }
.pb-academy-quiz-option { width: 100%; text-align: left; border: 1px solid var(--pb-line); background: rgba(255,255,255,.025); color: #dceaff; border-radius: 11px; padding: 13px 14px; cursor: pointer; transition: .2s; }
.pb-academy-quiz-option:hover { border-color: var(--pb-line-strong); background: rgba(122,199,240,.06); }
.pb-academy-quiz-option.selected { border-color: rgba(122,199,240,.58); background: rgba(122,199,240,.12); color: #fff; }
.pb-academy-quiz-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.pb-academy-quiz-feedback { color: var(--pb-muted); font-size: 12px; }
.pb-academy-assignment-list { display: grid; gap: 12px; }
.pb-academy-assignment { display: grid; grid-template-columns: 48px 1fr auto; gap: 16px; align-items: start; border: 1px solid var(--pb-line); border-radius: 14px; padding: 18px; background: rgba(255,255,255,.025); }
.pb-academy-assignment-number { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(122,199,240,.1); color: var(--pb-accent); font-weight: 800; }
.pb-academy-assignment h3 { margin: 0 0 5px; font-size: 17px; }
.pb-academy-assignment p { margin: 0; color: var(--pb-muted); font-size: 13px; line-height: 1.5; }
.pb-academy-assignment-status { margin-top: 8px; color: var(--pb-muted); font-size: 11px; }
.pb-academy-assignment.done { border-color: rgba(100,210,170,.3); }
.pb-academy-btn { border: 1px solid var(--pb-line-strong); background: rgba(255,255,255,.025); color: #e8f4ff; border-radius: 11px; padding: 11px 15px; cursor: pointer; transition: .2s; }
.pb-academy-btn:hover { transform: translateY(-1px); border-color: rgba(122,199,240,.6); }
.pb-academy-btn-primary { border-color: transparent; color: #06111c; font-weight: 800; background: linear-gradient(135deg, #78c8f2, #b7e5fb); box-shadow: 0 8px 28px rgba(64,145,200,.22); }
.pb-academy-btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }

.pb-academy-player-top { padding: 28px 0 20px; display: flex; justify-content: space-between; align-items: center; }
.pb-academy-player-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; padding-bottom: 70px; }
.pb-academy-video { aspect-ratio: 16/9; border-radius: 14px; border: 1px solid var(--pb-line); background: #000; display: grid; place-items: center; overflow: hidden; position: relative; }
.pb-academy-video video { width: 100%; height: 100%; display: block; object-fit: cover; background: #000; }
.pb-academy-video .pb-video-preplay { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; background: #000; cursor: pointer; transition: opacity .25s ease; }
.pb-academy-video .pb-video-preplay.hidden { opacity: 0; pointer-events: none; }
.pb-academy-video .pb-video-play-btn { width: 72px; height: 72px; border-radius: 50%; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.10); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 23px; padding-left: 4px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 12px 40px rgba(0,0,0,.45); transition: transform .2s ease,background .2s ease,border-color .2s ease; }
.pb-academy-video .pb-video-preplay:hover .pb-video-play-btn { transform: scale(1.07); background: rgba(255,255,255,.16); border-color: rgba(122,199,240,.55); }
.pb-academy-video .pb-video-error { position: absolute; inset: 0; z-index: 9; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.7); color: #ff6b6b; font-size: 1rem; flex-direction: column; gap: 0.5rem; }
.pb-academy-video .pb-video-error.show { display: flex; }
.pb-academy-video .pb-video-error i { font-size: 2rem; }

.pb-academy-lesson-title { padding: 22px 0; }
.pb-academy-lesson-title h1 { font-size: clamp(34px, 4vw, 52px); margin: 9px 0 8px; }
.pb-academy-lesson-title p { color: var(--pb-muted); font-size: 13px; }
.pb-academy-video-description { max-width: 780px; line-height: 1.65; margin-top: 14px !important; }
.pb-academy-lesson-actions { display: flex; justify-content: space-between; gap: 12px; }
.pb-academy-lesson-list { border: 1px solid var(--pb-line); border-radius: 14px; background: rgba(7,18,31,.72); overflow: hidden; align-self: start; }
.pb-academy-list-head { padding: 18px; border-bottom: 1px solid var(--pb-line); }
.pb-academy-list-head h2 { margin: 0; font-size: 18px; }
.pb-academy-list-head p { margin: 5px 0 0; color: var(--pb-muted); font-size: 12px; }
.pb-academy-lesson { display: grid; grid-template-columns: 34px 1fr 24px; gap: 8px; align-items: center; padding: 12px 14px; border-bottom: 1px solid rgba(122,199,240,.06); cursor: pointer; transition: .2s; }
.pb-academy-lesson:hover { background: rgba(122,199,240,.06); }
.pb-academy-lesson.active { background: rgba(122,199,240,.11); box-shadow: inset 2px 0 0 var(--pb-accent); }
.pb-academy-lesson-num { color: var(--pb-accent); font-size: 11px; font-weight: 800; }
.pb-academy-lesson-name { font-size: 12px; line-height: 1.3; color: #d9e8f7; }
.pb-academy-lesson-status { color: var(--pb-muted); font-size: 12px; text-align: center; }
.pb-academy-lesson.done .pb-academy-lesson-status { color: #70d7ad; }
.pb-academy-toast { position: fixed; right: 26px; bottom: 26px; z-index: 9999; padding: 11px 15px; border-radius: 12px; border: 1px solid rgba(122,199,240,.24); background: rgba(6,19,32,.94); color: #e9f7ff; box-shadow: 0 15px 45px rgba(0,0,0,.35); transform: translateY(16px); opacity: 0; pointer-events: none; transition: .3s ease; font-size: 13px; }
.pb-academy-toast.show { transform: translateY(0); opacity: 1; }

#academyBackBtn { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: #8aa6c9; font-size: 0.95rem; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: color 0.2s; z-index: 5; font-family: 'Poppins', sans-serif; padding: 4px 8px; border-radius: 6px; }
#academyBackBtn:hover { color: #fff; }
#academyBackBtn i { font-size: 0.8rem; }
#view-academy .view-header .pb-academy-page.is-active #academyBackBtn { display: none !important; }
#pbAcademyCoursesPage.is-active #academyBackBtn { display: none !important; }
#pbAcademyModulesPage.is-active #academyBackBtn { display: flex !important; }
#pbAcademyPlayerPage.is-active #academyBackBtn { display: flex !important; }

@media (max-width: 900px) { .pb-academy-learning-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .pb-academy-player-layout { grid-template-columns: 1fr; } .pb-academy-stats-dashboard { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 650px) { .pb-academy-container { width: min(100% - 28px, 1180px); } .pb-academy-learning-grid { grid-template-columns: 1fr; } .pb-academy-stats-dashboard { grid-template-columns: 1fr 1fr; } .pb-academy-tabs { overflow: auto; } .pb-academy-tabs button { white-space: nowrap; } .pb-academy-assignment { grid-template-columns: 42px 1fr; } .pb-academy-assignment>.pb-academy-btn { grid-column: 2; justify-self: start; } }
@media (prefers-reduced-motion: reduce) { #pbAcademyLmsRoot *,#pbAcademyLmsRoot *::before,#pbAcademyLmsRoot *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; } }

/* Academy centering */
#view-academy.active { display: flex !important; flex-direction: column !important; height: 100% !important; }
#view-academy.active #pbAcademyLmsRoot { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; height: 100% !important; min-height: 0 !important; }
#view-academy.active #pbAcademyCoursesPage.is-active { flex: 1 1 auto !important; display: flex !important; justify-content: center !important; align-items: center !important; height: 100% !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; }
#view-academy.active #pbAcademyCoursesPage.is-active .pb-academy-container { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: 1200px; flex: 0 1 auto !important; padding: 0 !important; margin: 0 !important; }
#view-academy.active #pbAcademyCoursesPage.is-active .pb-academy-course-grid { display: grid !important; grid-template-columns: 1fr !important; justify-items: center !important; align-items: center !important; width: 100% !important; max-width: 760px !important; padding: 0 !important; gap: 0 !important; min-height: 0 !important; }
#view-academy.active #pbAcademyCoursesPage.is-active .pb-academy-course-card { width: 100% !important; max-width: 760px !important; margin: 0 !important; }

/* Brand Tracker Pro CTA */
.pb-brand-pro-cta { position:relative; width:min(1120px, calc(100% - 40px)); min-height:280px; margin:52px auto 90px; border:1px solid rgba(255,255,255,.10); border-radius:28px; overflow:hidden; isolation:isolate; background: radial-gradient(circle at 78% 38%, rgba(122,199,240,.13), transparent 34%), linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.018)); box-shadow:0 24px 70px rgba(0,0,0,.28); display:grid; grid-template-columns:1.05fr .95fr; align-items:stretch; }
.pb-brand-pro-cta::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(9,12,18,.98) 0%, rgba(9,12,18,.90) 48%, rgba(9,12,18,.35) 100%); z-index:-1; }
.pb-brand-pro-cta-media { position:absolute; inset:0 0 0 45%; overflow:hidden; }
.pb-brand-pro-cta-glow { position:absolute; width:420px;height:420px; right:-110px;top:-120px; border-radius:50%; background:rgba(122,199,240,.14); filter:blur(50px); }
.pb-brand-pro-cta-collage { position:absolute; inset:0; opacity:.72; transform:translateX(5%); }
.pb-brand-pro-avatar { position:absolute; width:185px;height:235px; border-radius:22px; background: radial-gradient(circle at 50% 27%, rgba(255,255,255,.20) 0 14%, transparent 15%), linear-gradient(145deg, rgba(122,199,240,.28), rgba(255,255,255,.05)); border:1px solid rgba(255,255,255,.10); box-shadow:0 20px 45px rgba(0,0,0,.32); transform:rotate(-8deg); }
.pb-brand-pro-avatar::after { content:""; position:absolute; inset:16% 18% 12%; border-radius:50% 50% 38% 38%; background:linear-gradient(150deg, rgba(255,255,255,.18), rgba(0,0,0,.12)); }
.pb-brand-pro-avatar.avatar-a { right:240px; top:28px; transform:rotate(-10deg) scale(.88); }
.pb-brand-pro-avatar.avatar-b { right:95px; top:54px; transform:rotate(6deg) scale(.96); }
.pb-brand-pro-avatar.avatar-c { right:-35px; top:15px; transform:rotate(12deg) scale(.80); }
.pb-brand-pro-avatar.avatar-d { right:175px; bottom:-75px; transform:rotate(3deg) scale(.82); }
.pb-brand-pro-avatar.avatar-e { right:-80px; bottom:-58px; transform:rotate(-7deg) scale(.90); }
.pb-brand-pro-cta-content { position:relative; z-index:2; padding:46px 40px 42px; max-width:650px; }
.pb-brand-pro-eyebrow { font-size:11px; font-weight:800; letter-spacing:.16em; color:#7ac7f0; margin-bottom:13px; }
.pb-brand-pro-cta h2 { margin:0 0 12px; color:#fff; font-size:clamp(27px,3vw,42px); line-height:1.04; letter-spacing:-.035em; }
.pb-brand-pro-cta p { margin:0; max-width:560px; color:#aab3c0; font-size:15px; line-height:1.7; }
.pb-brand-pro-cta-actions { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:25px; }
.pb-brand-pro-primary { border:0; border-radius:12px; padding:13px 19px; font:700 14px/1 inherit; color:#071018; background:#fff; cursor:pointer; box-shadow:0 10px 28px rgba(0,0,0,.22); transition:transform .18s ease, box-shadow .18s ease; }
.pb-brand-pro-primary:hover { transform:translateY(-2px); box-shadow:0 15px 34px rgba(0,0,0,.30); }
.pb-brand-pro-primary span { margin-left:8px; }
.pb-brand-pro-note { color:#78818e; font-size:12px; }
@media(max-width:760px) { .pb-brand-pro-cta { width:calc(100% - 24px); min-height:390px; grid-template-columns:1fr; margin-top:38px; } .pb-brand-pro-cta-media { inset:42% 0 0; opacity:.48; } .pb-brand-pro-cta-content { padding:32px 25px; } .pb-brand-pro-cta h2 { font-size:30px; } }
#pbBrandProCta { display: none; }
#view-brand-tracker.active #pbBrandProCta.pb-brand-pro-visible { display: grid; }

/* ─── Final visual polish ─── */
#view-dashboard .dashboard-container { display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; width:100%; height:100%; min-height:0; padding:clamp(12px,2vh,24px) clamp(18px,3vw,44px)!important; overflow:hidden!important; }
#view-dashboard .producer-of-day { width:min(1120px,100%)!important; height:clamp(270px,42vh,430px)!important; min-height:270px!important; max-height:430px!important; margin:0 auto clamp(18px,2.4vh,30px)!important; flex:0 1 auto!important; flex-shrink:1!important; }
#view-dashboard .producer-of-day model-viewer { width:100%!important; height:100%!important; }
#view-dashboard .dashboard-grid { width:min(1120px,100%)!important; max-width:1120px!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:clamp(12px,1.5vw,20px)!important; margin:0 auto!important; flex:0 0 auto!important; }
#view-dashboard .dashboard-card { min-height:clamp(145px,18vh,190px)!important; padding:clamp(14px,1.5vw,22px)!important; }
#view-dashboard .dashboard-tutorial-launcher { position:fixed!important; left:auto!important; right:clamp(16px,2.2vw,32px)!important; bottom:clamp(16px,2.2vh,28px)!important; z-index:100!important; width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.86); background:rgba(8,18,32,.78); border:1px solid rgba(122,199,240,.2); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 10px 30px rgba(0,0,0,.24); cursor:pointer; transition:.2s ease; }
#view-dashboard .dashboard-tutorial-launcher:hover { transform:translateY(-2px); background:rgba(20,42,68,.9); border-color:rgba(122,199,240,.45); color:#fff; }
#view-dashboard .dashboard-tutorial-launcher .tutorial-tooltip { position:absolute; right:calc(100% + 10px); bottom:0; white-space:nowrap; padding:8px 11px; border-radius:9px; background:rgba(8,18,32,.96); border:1px solid rgba(122,199,240,.16); color:#dbeaff; font-size:11px; opacity:0; pointer-events:none; transform:translateX(4px); transition:.18s ease; }
#view-dashboard .dashboard-tutorial-launcher:hover .tutorial-tooltip { opacity:1; transform:translateX(0); }
@media (min-width:1024px) and (max-height:760px) { #view-dashboard .producer-of-day { height:clamp(235px,37vh,350px)!important; min-height:235px!important; margin-bottom:14px!important; } #view-dashboard .dashboard-card { min-height:135px!important; padding:14px!important; } }
@media (min-width:1500px) and (min-height:850px) { #view-dashboard .producer-of-day,#view-dashboard .dashboard-grid { max-width:1240px!important; } .producer-of-day { height:min(45vh,460px)!important; } }
@media (max-width:1100px) and (min-width:769px) { #view-dashboard .producer-of-day,#view-dashboard .dashboard-grid { width:calc(100% - 20px)!important; } #view-dashboard .dashboard-card { min-height:140px!important; } }
@media (max-width:768px) { #view-dashboard .dashboard-container { overflow-y:auto!important; justify-content:flex-start!important; padding:16px!important; } #view-dashboard .producer-of-day { height:300px!important; min-height:300px!important; margin-bottom:16px!important; } #view-dashboard .dashboard-grid { grid-template-columns:1fr!important; } .dashboard-tutorial-launcher { right:16px!important; bottom:16px!important; } }

#view-pricing .pricing-page-pro { width:min(100%,1240px); max-width:1240px; padding:clamp(14px,2vh,26px) clamp(18px,3vw,44px)!important; gap:clamp(10px,1.5vh,18px)!important; }
#view-pricing .pricing-upgrade-text { font-size:clamp(1.55rem,2.4vw,2.25rem); line-height:1.15; letter-spacing:-.02em; margin-bottom:2px; }
#view-pricing .pricing-image { position:relative; width:100%; height:150px; margin:-2px 0 14px; border-radius:18px; overflow:hidden; border:1px solid rgba(122,199,240,.12); background:rgba(4,12,22,.72); box-shadow:inset 0 0 40px rgba(0,0,0,.22); }
#view-pricing .pricing-image img { display:block; width:100%; height:100%; object-fit:cover; }
#view-pricing .pricing-card-pro.popular .pricing-image { height:164px; border-color:rgba(122,199,240,.24); }
#view-pricing .pricing-card-pro .card-header { margin-bottom:.55rem; }
#view-pricing .pricing-card-pro .plan-icon { display:none !important; }
@media(max-width:600px){ #view-pricing .pricing-image,#view-pricing .pricing-card-pro.popular .pricing-image { height:135px; } }
#view-pricing .pricing-grid-pro { width:100%; max-width:900px; gap:clamp(14px,1.7vw,22px); align-items:stretch; }
#view-pricing .pricing-card-pro { min-width:0; border-radius:24px; padding:clamp(20px,2vw,28px) clamp(18px,1.8vw,25px) 20px; box-shadow:0 12px 45px rgba(0,0,0,.22); border-color:rgba(122,199,240,.16); }
#view-pricing .pricing-card-pro.popular { transform:translateY(-4px) scale(1.025); border-color:rgba(122,199,240,.42); box-shadow:0 18px 55px rgba(0,0,0,.34),0 0 35px rgba(122,199,240,.07); }
#view-pricing .pricing-card-pro.popular:hover { transform:translateY(-8px) scale(1.025); }
#view-pricing .card-header { margin-bottom:.8rem; }
#view-pricing .plan-icon { width:52px; height:52px; line-height:52px; margin-bottom:.55rem; background:rgba(122,199,240,.10); box-shadow:inset 0 0 0 1px rgba(122,199,240,.08); }
#view-pricing .card-header h3 { font-size:1.25rem; letter-spacing:.01em; }
#view-pricing .card-price { padding:.5rem 0 .85rem; margin-bottom:.8rem; }
#view-pricing .card-price .amount { font-size:clamp(2.25rem,3vw,3rem); letter-spacing:-.04em; }
#view-pricing .card-features li { font-size:.82rem; padding:.28rem 0; color:#d4e3f7; }
#view-pricing .pricing-btn-pro { min-height:44px; font-size:.86rem; }
#view-pricing .pricing-trust-pro { margin-top:2px; }
@media(max-width:1024px) and (min-width:601px) { #view-pricing .pricing-grid-pro { max-width:760px; } #view-pricing .pricing-card-pro { padding:20px 18px 18px; } }

#view-academy .pb-academy-video .pb-video-error { background: rgba(0,0,0,0.85); color: #ff6b6b; font-size: 1.1rem; }
#view-academy .pb-academy-video .pb-video-error i { font-size: 2.5rem; margin-bottom: 0.5rem; }

/* ─── AUTH TRANSITION / SHARED COSMIC BACKGROUND ─── */
#authContainer { display: flex !important; opacity: 0; visibility: hidden; pointer-events: none; background: transparent !important; transition: opacity 800ms cubic-bezier(.22,1,.36,1), visibility 0s linear 800ms; backdrop-filter: blur(5px) !important; -webkit-backdrop-filter: blur(5px) !important; }
#authContainer.visible { display: flex !important; opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 800ms cubic-bezier(.22,1,.36,1), visibility 0s linear 0s; }
#authContainer .auth-card { opacity: 0; transform: translateY(18px) scale(.985); transition: opacity 500ms cubic-bezier(.22,1,.36,1), transform 500ms cubic-bezier(.22,1,.36,1); will-change: opacity, transform; }
#authContainer.visible .auth-card { opacity: 1; transform: translateY(0) scale(1); }
body.pb-auth-open #homepageContainer { visibility: hidden !important; pointer-events: none !important; }

#authContainer #loginEmail, #authContainer #loginPassword { font-size: 1rem !important; min-height: 46px; }
@media (prefers-reduced-motion: reduce) { #authContainer,#authContainer .auth-card { transition: none !important; transform: none !important; } }

/* ─── FULL-SCREEN LOGIN LAYOUT ─── */
#authContainer { align-items: stretch !important; justify-content: stretch !important; padding: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
#authContainer .auth-card { width: 100vw !important; height: 100vh !important; max-width: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; display: grid !important; grid-template-columns: minmax(350px, 27.2%) minmax(0, 72.8%); overflow: hidden !important; text-align: left !important; }
#authContainer .auth-panel { position: relative; z-index: 2; height: 100%; min-width: 0; padding: clamp(3rem, 7vh, 5.5rem) clamp(2.2rem, 3.25vw, 4rem) 2.5rem; display: flex; flex-direction: column; justify-content: center; background: #071225; border-right: 1px solid rgba(122,199,240,.12); overflow-y: auto; box-sizing: border-box; }
#authContainer .auth-logo { position: absolute; top: clamp(2.5rem, 6vh, 4.5rem); left: clamp(2.2rem, 3.25vw, 4rem); margin: 0 !important; font-size: 0; }
#authContainer .auth-logo img { height: 30px !important; width: auto !important; max-width: 180px; }
#authContainer .auth-desktop-only { width: 100%; max-width: 360px; margin: 0 auto; }
#authContainer .auth-state { text-align: left; }
#authContainer .auth-state h2 { font-size: clamp(2rem, 2.7vw, 2.55rem) !important; line-height: 1.08; letter-spacing: -.035em; margin-bottom: .45rem !important; }
#authContainer .auth-state > p { font-size: 1rem !important; line-height: 1.5; }
#authContainer .auth-state label { font-size: .9rem !important; }
#authContainer .auth-card input { width: 100%; min-height: 48px; padding: .82rem 1rem; margin: .38rem 0; border-radius: 10px; background: rgba(18,36,61,.72); border: 1px solid rgba(122,199,240,.38); font-size: 1rem !important; box-sizing: border-box; }
#authContainer .auth-card input:focus { border-color: rgba(122,199,240,.8); outline: none; box-shadow: 0 0 0 3px rgba(122,199,240,.08); }
#authContainer #loginBtn, #authContainer #sendResetLinkBtn { min-height: 48px; margin-top: 1rem; border-radius: 999px; font-size: .9rem; }
#authContainer .auth-visual { position: relative; min-width: 0; height: 100%; overflow: hidden; background: #0b1829; }
#authContainer .auth-visual-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.25s cubic-bezier(.22,1,.36,1); z-index: 1; }
#authContainer .auth-visual-slide.is-active { opacity: 1; }
#authContainer .auth-visual-slide img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transform: scale(1.015); }
#authContainer .auth-visual-overlay { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg, rgba(7,18,37,.30) 0%, rgba(7,18,37,.06) 22%, rgba(0,0,0,.10) 100%), linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.18)); }
@media (max-width: 1023px) {
    #authContainer .auth-card { display: block !important; overflow-y: auto !important; }
    #authContainer .auth-panel { min-height: 100vh; justify-content: center; }
    #authContainer .auth-visual { display: none; }
}

/* ─── Hardening ─── */
#view-worldmap .view-header, #view-worldmap .user-menu, #view-worldmap .user-dropdown, #view-worldmap .user-avatar { pointer-events:auto!important; }
#view-worldmap .user-dropdown { position:absolute!important; }
#worldMapLoadingOverlay { pointer-events:none!important; }
.tracker-header-bar .search-wrapper { flex:1 1 auto!important; max-width:none!important; min-width:0!important; width:100%!important; }
.tracker-header-bar .search-wrapper input { width:100%!important; }
.producer-detail-nav-pro { margin-top:auto!important; }

/* ─── UI fixes ─── */
.tracker-header-bar { display:flex!important; align-items:center!important; width:100%!important; gap:.3rem!important; }
.tracker-header-bar .header-cell.search-wrapper { flex:1 1 440px!important; width:auto!important; min-width:280px!important; max-width:380px!important; margin-left:auto!important; position:relative!important; }
.tracker-header-bar .search-wrapper input { width:100%!important; padding:.4rem 2.2rem .4rem 2rem!important; font-size:.76rem!important; }
.tracker-header-bar .header-cell.country { display:flex!important; align-items:center!important; text-align:center!important; width:11.75%!important; min-width:80px!important; }
.producer-table-pro { table-layout:fixed!important; width:100%!important; }
.producer-table-pro tbody td:nth-child(4) { width:15%!important; min-width:80px!important; text-align:center!important; padding-left:.5rem!important; padding-right:.5rem!important; }
.producer-table-pro tbody td:nth-child(4) img[src*="flagcdn"] { display:block!important; margin-left:auto!important; margin-right:auto!important; }

.producer-info-panel-pro { display:flex!important; flex-direction:column!important; overflow-y:auto!important; }
.producer-info-panel-pro .info-content-pro { flex:0 0 auto!important; overflow:visible!important; }
.producer-info-panel-pro .producer-detail-nav-pro { order:20!important; margin:1rem 0 .25rem!important; padding:.8rem 0 0!important; border-top:1px solid rgba(122,199,240,.12)!important; flex-shrink:0!important; }
.producer-detail-nav-btn-pro { min-width:130px!important; }

#view-worldmap { position:relative!important; isolation:isolate!important; z-index:50!important; }
#view-worldmap .view-header { position:relative!important; z-index:1000!important; isolation:isolate!important; }
#view-worldmap .user-menu { z-index:10000!important; }
#view-worldmap .user-avatar { position:relative!important; z-index:10001!important; pointer-events:auto!important; }
#view-worldmap .user-dropdown { z-index:10002!important; pointer-events:auto!important; }
#view-worldmap .worldmap-container,#view-worldmap #producer-map { position:relative!important; z-index:1!important; }
#view-worldmap #worldMapLoadingOverlay { z-index:10!important; pointer-events:none!important; }
#view-worldmap .mapboxgl-map,#view-worldmap .mapboxgl-canvas-container,#view-worldmap .mapboxgl-canvas { z-index:1!important; }

#view-settings { background:transparent!important; }
#view-settings .settings-container { max-width:980px!important; width:100%!important; margin:0 auto!important; padding:1.6rem 2rem 3rem!important; display:block!important; overflow-y:auto!important; flex:1 1 auto!important; }
#view-settings .settings-card { width:100%!important; max-width:900px!important; margin:0 auto!important; padding:0!important; border-radius:28px!important; border:1px solid rgba(122,199,240,.14)!important; background:linear-gradient(145deg,rgba(14,28,48,.92),rgba(8,18,32,.82))!important; box-shadow:0 24px 80px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.035)!important; overflow:hidden!important; }
#view-settings .settings-section { padding:1.7rem 2rem!important; margin:0!important; }
#view-settings .settings-section h3 { border:0!important; padding:0!important; margin:0 0 1.1rem!important; font-size:.78rem!important; text-transform:uppercase!important; letter-spacing:.12em!important; color:#8fa9c7!important; }
#view-settings .settings-divider { margin:0!important; border-top:1px solid rgba(122,199,240,.09)!important; }
#view-settings .profile-avatar-section { display:flex!important; align-items:center!important; gap:1.2rem!important; padding:1rem 1.15rem!important; border-radius:18px!important; border:1px solid rgba(122,199,240,.10)!important; background:rgba(255,255,255,.025)!important; }
#view-settings .profile-avatar-wrapper { width:72px!important; height:72px!important; flex:0 0 72px!important; }
#view-settings .profile-avatar-wrapper img,#view-settings #settingsAvatarImg { width:72px!important; height:72px!important; border-radius:20px!important; object-fit:cover!important; }
#view-settings .avatar-upload-btn { width:28px!important; height:28px!important; right:-4px!important; bottom:-4px!important; border:2px solid #0b1a2d!important; box-shadow:0 6px 18px rgba(0,0,0,.35)!important; }
#view-settings .avatar-hint { margin:0!important; color:#91a9c5!important; font-size:.82rem!important; line-height:1.5!important; }
#view-settings .settings-form-grid { gap:1rem!important; }
#view-settings .form-group label { color:#a8bdd6!important; font-size:.76rem!important; font-weight:500!important; margin-bottom:.45rem!important; }
#view-settings .form-group input { min-height:46px!important; padding:.75rem 1rem!important; border-radius:13px!important; border:1px solid rgba(122,199,240,.12)!important; background:rgba(255,255,255,.045)!important; color:#fff!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.02)!important; }
#view-settings .form-group input:focus { border-color:rgba(122,199,240,.55)!important; background:rgba(255,255,255,.065)!important; box-shadow:0 0 0 4px rgba(122,199,240,.08)!important; }
#view-settings .billing-info-grid { gap:.8rem!important; }
#view-settings .billing-item { min-height:74px!important; padding:1rem 1.1rem!important; border-radius:15px!important; border:1px solid rgba(122,199,240,.08)!important; background:rgba(255,255,255,.028)!important; }
#view-settings .billing-label { color:#7f98b4!important; font-size:.68rem!important; text-transform:uppercase!important; letter-spacing:.08em!important; }
#view-settings .billing-value { color:#f4f8ff!important; font-size:.9rem!important; margin-top:.3rem!important; }
#view-settings .billing-actions { display:flex!important; gap:.7rem!important; margin-top:1rem!important; }
#view-settings .settings-btn { min-height:42px!important; padding:.65rem 1.15rem!important; border-radius:12px!important; font-family:'Poppins',sans-serif!important; font-weight:600!important; border:1px solid rgba(122,199,240,.14)!important; }
#view-settings .settings-btn.primary { background:linear-gradient(135deg,#7ac7f0,#3a8fc8)!important; color:#071a2e!important; border:0!important; box-shadow:0 8px 28px rgba(58,143,200,.18)!important; }
#view-settings .settings-btn.secondary { background:rgba(255,255,255,.045)!important; color:#dceaff!important; }
#view-settings .settings-btn.danger { background:rgba(255,107,107,.06)!important; color:#ff9696!important; border-color:rgba(255,107,107,.14)!important; }
#view-settings .settings-footer { padding:1.2rem 2rem!important; background:rgba(0,0,0,.10)!important; border-top:1px solid rgba(122,199,240,.07)!important; }
@media(max-width:700px){ .tracker-header-bar .header-cell.search-wrapper { min-width:180px!important; max-width:none!important; } #view-settings .settings-container { padding:1rem 1rem 2rem!important; } #view-settings .settings-section { padding:1.35rem 1.2rem!important; } #view-settings .settings-form-grid,#view-settings .billing-info-grid { grid-template-columns:1fr!important; } #view-settings .settings-footer { padding:1rem 1.2rem!important; } }

/* ─── Performance / containment ─── */
.homepage-sections>.feature-block,
.homepage-sections>.info-page,
.homepage-sections>.blog-card,
.homepage-sections>.blog-card-compact,
.studio-views>.view-content:not(.active) {
    contain: layout paint style;
}
.homepage-sections>.feature-block,
.homepage-sections>.info-page,
.homepage-sections>.blog-card,
.homepage-sections>.blog-card-compact {
    content-visibility: auto;
    contain-intrinsic-size: 420px;
}
html.performance-paused .nebula,
html.performance-paused .core-glow {
    animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .nebula,.core-glow { animation: none !important; }
}
img[loading="lazy"] { content-visibility: auto; }
iframe[loading="lazy"] { content-visibility: auto; }

/* ─── DASHBOARD LAYOUT POLISH ─── */
#view-dashboard .dashboard-container { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; height: 100% !important; min-height: 0 !important; padding: 0.8rem 2rem 0.8rem 2rem !important; flex: 1 1 auto !important; overflow: hidden !important; }
#view-dashboard .producer-of-day { width: min(900px, 100%) !important; min-height: 190px !important; max-height: 280px !important; margin: 0 auto 0.8rem auto !important; flex-shrink: 0 !important; flex-grow: 0 !important; }
#view-dashboard .dashboard-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 1rem !important; max-width: 1050px !important; width: 100% !important; margin: 0.5rem auto 0 auto !important; flex: 0 0 auto !important; }
#view-dashboard .dashboard-card { min-height: 160px !important; padding: 1.2rem !important; }
.view-content.active { height: 100% !important; min-height: 0 !important; overflow: hidden !important; }
.view-content.scrollable { overflow-y: auto !important; height: 100% !important; }
.tracker-row-pro { max-height: calc(100vh - 140px) !important; min-height: 300px !important; }
.producer-table-pro tbody { max-height: calc(100vh - 200px) !important; }
#view-academy .academy-modules-grid { padding: 0.5rem 1.5rem !important; gap: 1rem !important; align-content: center !important; flex: 1 1 auto !important; height: 100% !important; }
.pricing-page-pro { padding: 0.5rem 1.5rem !important; justify-content: center !important; gap: 0.5rem !important; height: 100% !important; }
.community-page-container, .settings-container, .help-center-container { padding: 1rem 2rem !important; justify-content: center !important; align-items: center !important; height: 100% !important; }
@media (max-width: 1366px) { #view-dashboard .dashboard-container { padding: 0.5rem 1.5rem !important; } #view-dashboard .producer-of-day { min-height: 170px !important; max-height: 240px !important; } #view-dashboard .dashboard-card { min-height: 140px !important; padding: 1rem !important; } .tracker-row-pro { max-height: calc(100vh - 120px) !important; } }
@media (max-width: 1100px) { #view-dashboard .dashboard-grid { grid-template-columns: repeat(2, 1fr) !important; max-width: 700px !important; } #view-dashboard .producer-of-day { max-width: 700px !important; min-height: 200px !important; } .academy-modules-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 1024px) { .tracker-png-display-pro { display: none !important; } .tracker-container-pro { flex: 1 1 auto !important; max-height: calc(100vh - 150px) !important; } }
@media (min-width: 1920px) { #view-dashboard .dashboard-container { padding: 2rem 4rem !important; } #view-dashboard .producer-of-day { max-height: 380px !important; min-height: 280px !important; } #view-dashboard .dashboard-grid { max-width: 1200px !important; gap: 1.8rem !important; } .tracker-row-pro { max-width: 1400px !important; } }
#view-academy.active #pbAcademyLmsRoot { display: flex !important; flex-direction: column !important; height: 100% !important; min-height: 0 !important; }
#pbAcademyModulesPage.is-active .pb-academy-container { display: flex !important; flex-direction: column !important; justify-content: center !important; flex: 1 1 auto !important; height: 100% !important; }
#pbAcademyModulesPage.is-active .pb-academy-learning-grid { align-content: center !important; flex: 0 1 auto !important; }

/* ─── MASTER FIX PASS ─── */
#view-dashboard .dashboard-container { width:min(100%,1180px); max-width:1180px; margin:0 auto; justify-content:center !important; align-items:center !important; padding:clamp(12px,2vh,28px) clamp(18px,3vw,48px) !important; }
#view-dashboard .producer-of-day,
#view-dashboard .dashboard-grid { width:100% !important; max-width:1180px !important; }
#view-dashboard .producer-of-day { height:clamp(260px,43vh,430px) !important; min-height:240px !important; margin:0 auto clamp(18px,2.5vh,30px) !important; }
#view-dashboard .dashboard-grid { gap:clamp(12px,1.5vw,20px) !important; }
#view-dashboard .dashboard-card { min-height:clamp(150px,18vh,195px) !important; }
#view-dashboard .producer-of-day model-viewer { pointer-events:none !important; }
#view-dashboard .dashboard-tutorial-launcher { right:clamp(16px,2.2vw,32px) !important; left:auto !important; bottom:clamp(16px,2.2vh,28px) !important; }

#view-brand-tracker .producer-table-pro tbody tr:not(.locked-row) { cursor:pointer; }
#view-brand-tracker .producer-table-pro tbody tr:hover td { background:rgba(122,199,240,.08); }
#view-brand-tracker .tracker-png-display-pro { transition:transform .25s ease, border-color .25s ease; }
#view-brand-tracker .brand-tracker-container { padding-top:10rem !important; }
#view-brand-tracker .tracker-header-bar { align-items:end !important; }
#view-brand-tracker .tracker-header-bar .header-cell.country { align-self:end !important; }

#globalPlayer .play-pause-pro i { transition:transform .15s ease; }
#producerDetailPagePro .detail-audio-player .audio-btn { pointer-events:auto; }
#producerDetailPagePro .detail-audio-player .audio-btn.playing { background:#f0b27a; }
#producerDetailPagePro #mainViewer { pointer-events:none !important; touch-action:none !important; }

#view-academy .pb-academy-lock-overlay { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:rgba(3,10,18,.60); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); color:#fff; pointer-events:none; }
#view-academy .pb-academy-lock-overlay span { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:rgba(122,199,240,.14); border:1px solid rgba(122,199,240,.28); color:#f0b27a; font-size:18px; }
#view-academy .pb-academy-lock-overlay strong { font-size:10px; letter-spacing:.16em; color:#f0b27a; }
#view-academy .pb-academy-lock-overlay small { color:#b8c8da; font-size:11px; }
#view-academy .pb-academy-learning-card.is-locked:hover { transform:none; border-color:var(--pb-line); }
#view-academy #pbAcademyModulesSection,
#view-academy #pbAcademyQuizzesSection,
#view-academy #pbAcademyAssignmentsSection,
#view-academy #pbAcademyStatsSection { min-height:calc(100% - 74px); }

#view-pricing .pricing-grid-pro { grid-template-columns:repeat(2,minmax(0,1fr)) !important; align-items:stretch; }
#view-pricing .pricing-card-pro { min-height:390px; display:flex; }
#view-pricing .card-features { margin-top:4px; }

#view-worldmap.worldmap-loading-active > *:not(.view-header):not(.worldmap-container) { visibility:hidden !important; }
#view-worldmap.worldmap-loading-active .view-header,
#view-worldmap.worldmap-loading-active .worldmap-container { opacity:0 !important; visibility:hidden !important; }

@media (min-width:1600px) { #view-dashboard .producer-of-day, #view-dashboard .dashboard-grid { max-width:1240px !important; } #view-academy .pb-academy-container { width:min(1240px,calc(100% - 56px)); } }
@media (max-width:1100px) and (min-width:769px) { #view-dashboard .producer-of-day, #view-dashboard .dashboard-grid { max-width:900px !important; } #view-academy .pb-academy-learning-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
@media (max-width:768px) { #view-dashboard .dashboard-container { overflow-y:auto !important; justify-content:flex-start !important; } #view-dashboard .producer-of-day { height:300px !important; } #view-dashboard .dashboard-grid { grid-template-columns:1fr !important; } #view-academy .pb-academy-learning-grid { grid-template-columns:1fr !important; } #view-academy .pb-academy-tabs { overflow-x:auto; } #view-academy .pb-academy-tabs button { min-width:120px; flex:0 0 auto; } #view-pricing .pricing-grid-pro { grid-template-columns:1fr !important; } }

@media (max-width:1100px) and (min-width:769px) {
    #view-academy .pb-academy-tabs { display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important; overflow-y:hidden !important; white-space:nowrap !important; scrollbar-width:thin; }
    #view-academy .pb-academy-tabs button { flex:0 0 auto !important; white-space:nowrap !important; }
}
#view-pricing .pricing-grid-pro { align-items:stretch !important; }
#view-pricing .pricing-card-pro { height:100% !important; display:flex !important; flex-direction:column !important; }
#view-pricing .pricing-card-pro .card-features { flex:1 1 auto !important; }
#view-brand-tracker.active { padding-bottom:clamp(22px,3vh,42px) !important; }
#view-help-center.active .help-center-container { padding-top:clamp(44px,5vh,72px) !important; }
#producerOfDayLoading { transition:opacity .2s ease; }

#producerDetailPagePro .audio-progress-fill.is-buffering { opacity:.55; animation:pbAudioBufferPulse 1s ease-in-out infinite; }
@keyframes pbAudioBufferPulse { 0%,100%{opacity:.45} 50%{opacity:.9} }

.studio-main, .studio-views { position:relative; }
.view-content.active .view-header { position:relative; z-index:200000 !important; }
.view-content.active .user-menu { z-index:200001 !important; pointer-events:auto !important; }
.user-dropdown { pointer-events:auto !important; }
body > .user-dropdown { position:fixed !important; z-index:2147483000 !important; pointer-events:auto !important; }
.pb-academy-lesson-actions { display:none !important; }
@media (max-width:1100px) and (min-width:769px) { #view-academy .pb-academy-tabs { flex-wrap:nowrap !important; overflow-x:auto !important; white-space:nowrap !important; } }

/* ─── ProducerBrand balanced visual refresh ─── */
:root {
    --pb-bg-deep:#06152c;
    --pb-bg-mid:#0c2850;
    --pb-surface:rgba(15,34,58,.76);
    --pb-surface-strong:rgba(18,42,70,.84);
    --pb-border:rgba(122,199,240,.20);
    --pb-border-strong:rgba(122,199,240,.32);
}
.universe { background:radial-gradient(ellipse 80% 70% at 50% 40%, #2b7be0 0%, #1a5cb5 27%, #103f82 55%, #082858 82%, #06152c 100%) !important; }
.nebula { opacity:.82; }
.studio-sidebar { background:linear-gradient(180deg,rgba(8,27,52,.91),rgba(5,20,40,.94)) !important; border-right-color:rgba(122,199,240,.18) !important; }
.view-header { background:linear-gradient(180deg,rgba(12,32,57,.58),rgba(10,27,48,.30)) !important; border-bottom-color:rgba(122,199,240,.12) !important; }
.dashboard-card, .module-card, .pricing-card-pro, .community-card, .settings-card, .help-card, .tracker-row-pro, .feature-block, .info-page, .blog-card, .auth-card, .signup-modal, .faq-item { background:linear-gradient(145deg,rgba(20,45,74,.76),rgba(11,29,51,.78)) !important; border-color:var(--pb-border) !important; box-shadow:0 14px 38px rgba(0,8,20,.22) !important; }
.pricing-card-pro.popular { background:linear-gradient(145deg,rgba(24,55,88,.84),rgba(13,34,59,.84)) !important; border-color:var(--pb-border-strong) !important; }
.tracker-png-display-pro { background:rgba(17,43,75,.54) !important; }
.course-player-container, .course-video-section, .course-content-area { background:rgba(10,26,46,.84) !important; }
.lesson-sidebar { background:rgba(4,17,34,.84) !important; }
.btn-primary, .cta-button, .header-btn.primary, .pricing-btn, .signup-btn { box-shadow:0 8px 24px rgba(34,130,210,.20) !important; }
input, textarea, select { background:rgba(8,25,45,.72) !important; border-color:rgba(122,199,240,.20) !important; }
.view-content.active .view-header h2, .view-header h2 { background:linear-gradient(135deg,#ffffff,#7ac7f0) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; color:transparent !important; }
.view-content.active .view-header p { color:#8aa6c9 !important; }
.dashboard-card h3, .module-card h3, .pricing-card-pro h3, .community-card h3, .settings-card h3, .help-card h3 { color:#eef7ff !important; }
@media (max-width:900px) { .dashboard-card, .module-card, .pricing-card-pro, .community-card, .settings-card, .help-card { background:linear-gradient(145deg,rgba(20,45,74,.80),rgba(11,29,51,.82)) !important; } }

@media (max-width:900px) {
    .homepage-hero-globe-section { min-height: auto !important; height: auto !important; overflow: visible !important; padding: 2.5rem 1rem 2rem !important; }
    .homepage-hero-grid { height: auto !important; min-height: 0 !important; grid-template-columns: 1fr !important; gap: 2rem !important; padding: 0 !important; }
    .homepage-hero-copy { width: 100% !important; max-width: 700px !important; margin: 0 auto !important; text-align: left !important; }
    .homepage-hero-copy .hero-title { max-width: 100% !important; font-size: clamp(2rem, 8.2vw, 3rem) !important; line-height: 1.02 !important; overflow-wrap: anywhere; }
    .homepage-globe-wrap { width: min(88vw, 560px) !important; height: min(88vw, 560px) !important; min-width: 0 !important; min-height: 0 !important; aspect-ratio: 1 / 1 !important; justify-self: center !important; margin: 0 auto !important; opacity: 1 !important; transform: none !important; animation: none !important; }
    #homepage-globe-map { width: 100% !important; height: 100% !important; }
    .homepage-sections { margin-top: 0 !important; }
    #homepageContainer { display:flex !important; visibility:visible !important; opacity:1 !important; }
    #homepageHeader { display:grid !important; visibility:visible !important; opacity:1 !important; transform:translateY(0) !important; }
    #homepageContainer .homepage-hero-globe-section { display:flex !important; visibility:visible !important; opacity:1 !important; }
    #homepageGlobeWrap { display:block !important; visibility:visible !important; }
    body:not(.pb-auth-open) #mobile-block-overlay { display:none !important; }
}

.studio-views > .view-content:not(.active) { visibility:hidden !important; opacity:0 !important; pointer-events:none !important; }
body.pb-navigating .studio-views > .view-content:not(.active) { display:none !important; }
body.pb-navigating #globalPlayer,
body.pb-navigating #producerDetailPagePro,
body.pb-navigating .user-dropdown.open,
body.pb-navigating #academyUpgradePopup,
body.pb-navigating #stripeRedirectOverlay,
body.pb-navigating #stripeSuccessToast { visibility:hidden !important; opacity:0 !important; pointer-events:none !important; }
.studio-views > .view-content.active { z-index:2 !important; }

.view-content.fade-enter { animation: pbViewEnter .18s ease-out both; }
@keyframes pbViewEnter { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:translateY(0); } }

.homepage-globe-marker { opacity: 0 !important; visibility: hidden; transition: opacity 1.2s ease-in, visibility 0s linear 1.2s; }
.homepage-globe-marker.visible { opacity: 1 !important; visibility: visible; transition: opacity 1.2s ease-in, visibility 0s linear 0s; }

body{margin:0;background:#06152c;color:#fff;font-family:Arial,sans-serif;display:grid;place-items:center;min-height:100vh}
.certificate{width:min(900px,90vw);padding:70px;text-align:center;border:2px solid #7ac7f0;background:#0d284d}
h1{font-size:48px;margin:15px 0}.name{font-size:34px;color:#7ac7f0;margin:25px}.small{color:#a9bfd8}

/* ─── MOBILE HOMEPAGE POLISH ─── */
@media (max-width: 900px) {
    #homepageContainer { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; overflow-y: auto !important; background: transparent !important; }
    #homepageHeader { width: 100% !important; flex: 0 0 60px !important; height: 60px !important; min-height: 60px !important; padding: 0 18px !important; border-bottom: 1px solid rgba(122,199,240,.10) !important; }
    #homepageHeader .logo .logo-image { height: 25px !important; }
    #homepageHeader .hamburger-btn { right: 14px !important; font-size: 1.65rem !important; }
    #homepageContainer .homepage-hero-globe-section { width: 100% !important; min-height: 0 !important; height: auto !important; padding: 18px 18px 34px !important; overflow: visible !important; }
    #homepageContainer .homepage-hero-grid { width: 100% !important; max-width: 560px !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; gap: 24px !important; align-items: stretch !important; }
    #homepageContainer .homepage-globe-wrap { order: 1 !important; width: min(88vw, 430px) !important; height: min(88vw, 430px) !important; aspect-ratio: 1 / 1 !important; min-width: 0 !important; min-height: 0 !important; max-width: 430px !important; max-height: 430px !important; margin: 0 auto !important; align-self: center !important; position: relative !important; top: auto !important; left: auto !important; transform: none !important; }
    #homepageContainer #homepage-globe-map, #homepageContainer #homepage-globe-map .mapboxgl-canvas-container, #homepageContainer #homepage-globe-map .mapboxgl-canvas { width: 100% !important; height: 100% !important; }
    #homepageContainer .homepage-hero-copy { order: 2 !important; width: 100% !important; max-width: 560px !important; margin: 0 auto !important; padding: 0 2px !important; text-align: center !important; position: relative !important; top: auto !important; left: auto !important; }
    #homepageContainer .homepage-hero-copy .hero-title { max-width: 100% !important; margin: 0 auto !important; font-size: clamp(2rem, 9.5vw, 3.15rem) !important; line-height: .98 !important; letter-spacing: -.045em !important; overflow-wrap: normal !important; word-break: normal !important; }
    #homepageContainer .homepage-hero-copy .hero-subtitle { max-width: 340px !important; margin: 16px auto 0 !important; font-size: .92rem !important; line-height: 1.5 !important; }
    #homepageContainer .hero-actions { display: flex !important; justify-content: center !important; width: 100% !important; margin-top: 22px !important; }
    #homepageContainer .hero-login-btn { width: min(100%, 310px) !important; min-height: 54px !important; font-size: 0 !important; padding: .8rem 1.6rem !important; }
    #homepageContainer .hero-login-btn::before { font-size: 1rem !important; }
    #homepageContainer .hero-proof-row { width: 100% !important; max-width: 420px !important; margin: 22px auto 0 !important; display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
    #homepageContainer .hero-proof-row > div { min-width: 0 !important; padding: 10px 4px !important; }
    #homepageContainer .hero-proof-row strong { font-size: 1.15rem !important; }
    #homepageContainer .hero-proof-row span { display: block !important; font-size: .62rem !important; line-height: 1.25 !important; white-space: normal !important; }
    #homepageMainContent { width: 100% !important; display: block !important; visibility: visible !important; }
    #homepageMainContent .homepage-sections { width: 100% !important; max-width: 620px !important; margin: 0 auto !important; padding: 8px 18px 42px !important; }
    #homepageMainContent .feature-block, #homepageMainContent .feature-block.reverse { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; direction: ltr !important; margin: 0 0 18px !important; border-radius: 22px !important; overflow: hidden !important; background: linear-gradient(145deg, rgba(16,35,58,.88), rgba(8,21,38,.94)) !important; border: 1px solid rgba(122,199,240,.13) !important; box-shadow: 0 18px 45px rgba(0,0,0,.20) !important; }
    #homepageMainContent .feature-image { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9 !important; flex: 0 0 auto !important; overflow: hidden !important; background: #0b1b2d !important; }
    #homepageMainContent .feature-image img { width: 100% !important; height: 100% !important; display: block !important; object-fit: cover !important; object-position: center !important; }
    #homepageMainContent .feature-text, #homepageMainContent .feature-block.reverse .feature-text { width: 100% !important; min-width: 0 !important; padding: 22px 20px 24px !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; direction: ltr !important; text-align: left !important; }
    #homepageMainContent .feature-text h3 { margin: 0 0 9px !important; font-size: 1.35rem !important; line-height: 1.14 !important; letter-spacing: -.025em !important; }
    #homepageMainContent .feature-text p { display: block !important; visibility: visible !important; opacity: 1 !important; margin: 0 0 15px !important; color: #b9cce1 !important; font-size: .88rem !important; line-height: 1.62 !important; }
    #homepageMainContent .feature-text .read-more { display: inline-flex !important; align-items: center !important; gap: 7px !important; width: fit-content !important; color: #7ac7f0 !important; font-size: .78rem !important; font-weight: 600 !important; }
    #homepageMainContent .feature-block { content-visibility: visible !important; contain: none !important; }
    #infoPagesContainer { width: 100% !important; overflow: hidden !important; }
    #infoPagesContainer .info-page { width: 100% !important; max-width: 100% !important; padding: 26px 18px !important; }
    #infoPagesContainer .tracker-section { width: 100% !important; display: flex !important; flex-direction: column !important; gap: 20px !important; }
    #infoPagesContainer .tracker-text, #infoPagesContainer .tracker-image { width: 100% !important; max-width: 100% !important; }
    #infoPagesContainer .tracker-image img { width: 100% !important; max-width: 100% !important; height: auto !important; border-radius: 18px !important; }
}
@media (max-width: 480px) {
    #homepageContainer .homepage-hero-globe-section { padding-left: 14px !important; padding-right: 14px !important; }
    #homepageContainer .homepage-globe-wrap { width: min(92vw, 390px) !important; height: min(92vw, 390px) !important; }
    #homepageMainContent .homepage-sections { padding-left: 14px !important; padding-right: 14px !important; }
    #homepageMainContent .feature-text { padding: 20px 18px 22px !important; }
}

/* ─── PRODUCER DETAIL POLISH ─── */
#producerDetailPagePro { background: radial-gradient(circle at 22% 35%, rgba(40,105,155,.10), transparent 34%), radial-gradient(circle at 78% 72%, rgba(25,75,125,.10), transparent 38%), linear-gradient(135deg, #040b14 0%, #071522 48%, #050d17 100%); font-family: 'Inter', sans-serif !important; }
#producerDetailPagePro, #producerDetailPagePro * { box-sizing: border-box; }
#producerDetailPagePro .producer-3d-section-pro { background: radial-gradient(circle at 50% 48%, rgba(122,199,240,.065), transparent 42%), linear-gradient(180deg, rgba(5,14,24,.98), rgba(3,9,16,.98)); }
#producerDetailPagePro .viewer-container { position: relative; isolation: isolate; }
#producerDetailPagePro .viewer-container::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: radial-gradient(circle at 50% 48%, transparent 48%, rgba(0,0,0,.20) 100%); }
#producerDetailPagePro model-viewer { filter: drop-shadow(0 28px 48px rgba(0,0,0,.34)); }
#producerDetailPagePro .producer-info-panel-pro { width: min(43vw, 650px) !important; min-width: 420px !important; max-width: 650px !important; height: 100% !important; min-height: 0 !important; display: grid !important; grid-template-rows: auto auto auto minmax(0, 1fr) auto !important; overflow: hidden !important; background: linear-gradient(155deg, rgba(13,29,49,.97) 0%, rgba(7,18,32,.98) 100%) !important; border-left: 1px solid rgba(122,199,240,.14) !important; box-shadow: -22px 0 70px rgba(0,0,0,.28), inset 1px 0 0 rgba(255,255,255,.025) !important; font-family: 'Inter', sans-serif !important; }
#producerDetailPagePro .producer-detail-name-row { min-height: 0 !important; padding: 2rem 2.15rem .35rem !important; }
#producerDetailPagePro .producer-detail-name { font-family: 'Clash Display', 'Inter', sans-serif !important; font-size: clamp(1.65rem, 2.8vw, 2.55rem) !important; line-height: 1.04 !important; letter-spacing: -.035em !important; font-weight: 600 !important; color: #fff !important; background: linear-gradient(135deg, #fff 15%, #bfe9ff 60%, #7ac7f0 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
#producerDetailPagePro .producer-detail-description { margin: 0 !important; padding: .7rem 2.15rem 1.25rem !important; max-width: 64ch !important; color: #9eb5cf !important; font-family: 'Inter', sans-serif !important; font-size: .91rem !important; line-height: 1.68 !important; letter-spacing: -.005em !important; border-bottom: 1px solid rgba(122,199,240,.09) !important; }
#producerDetailPagePro .info-tabs-pro { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) auto !important; align-items: stretch !important; gap: .38rem !important; margin: 1rem 2.15rem .8rem !important; padding: .28rem !important; min-height: 47px !important; border: 1px solid rgba(122,199,240,.10) !important; border-radius: 14px !important; background: rgba(255,255,255,.025) !important; }
#producerDetailPagePro .info-tab-pro { display: flex !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; border-radius: 10px !important; font-family: 'Inter', sans-serif !important; font-size: .72rem !important; font-weight: 600 !important; letter-spacing: .045em !important; text-transform: uppercase !important; color: #7590ad !important; transition: .22s ease !important; }
#producerDetailPagePro .info-tab-pro.active { color: #eaf8ff !important; background: linear-gradient(135deg, rgba(122,199,240,.16), rgba(72,137,183,.10)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 5px 18px rgba(0,0,0,.16) !important; }
#producerDetailPagePro #detailFavoriteBtn { width: 42px !important; height: 42px !important; border-radius: 11px !important; border: 1px solid rgba(122,199,240,.16) !important; background: rgba(255,255,255,.035) !important; color: #8ba6c2 !important; transition: transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease !important; }
#producerDetailPagePro #detailFavoriteBtn:hover { transform: translateY(-1px) !important; color: #fff !important; border-color: rgba(122,199,240,.42) !important; background: rgba(122,199,240,.09) !important; }
#producerDetailPagePro .info-content-pro { min-height: 0 !important; height: auto !important; overflow-y: auto !important; overflow-x: hidden !important; padding: .2rem 2.15rem 1.1rem !important; scrollbar-width: thin !important; scrollbar-color: rgba(122,199,240,.25) transparent !important; }
#producerDetailPagePro .info-content-pro::-webkit-scrollbar { width: 5px; }
#producerDetailPagePro .info-content-pro::-webkit-scrollbar-track { background: transparent; }
#producerDetailPagePro .info-content-pro::-webkit-scrollbar-thumb { background: rgba(122,199,240,.22); border-radius: 99px; }
#producerDetailPagePro .info-section-pro { max-width: 66ch !important; margin: 0 auto !important; padding: .55rem 0 1.1rem !important; }
#producerDetailPagePro .story-header { margin: .45rem 0 1rem !important; font-family: 'Clash Display', 'Inter', sans-serif !important; font-size: 1rem !important; line-height: 1.3 !important; font-weight: 600 !important; letter-spacing: -.01em !important; color: #dff4ff !important; }
#producerDetailPagePro .story-header i { margin-right: .55rem !important; color: #7ac7f0 !important; font-size: .88em !important; }
#producerDetailPagePro .story-text-pro { max-width: 64ch !important; margin: 0 !important; color: #b3c5d8 !important; font-family: 'Inter', sans-serif !important; font-size: .94rem !important; line-height: 1.86 !important; letter-spacing: -.006em !important; text-wrap: pretty !important; }
#producerDetailPagePro .detail-audio-player { margin-top: 1.35rem !important; padding: .72rem .85rem !important; border: 1px solid rgba(122,199,240,.11) !important; border-radius: 16px !important; background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.018)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 12px 30px rgba(0,0,0,.16) !important; }
#producerDetailPagePro .audio-btn { box-shadow: 0 7px 20px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.12) !important; }
#producerDetailPagePro .producer-detail-nav-pro { position: relative !important; z-index: 20 !important; width: 100% !important; min-height: 76px !important; height: 76px !important; flex: 0 0 76px !important; margin: 0 !important; padding: .8rem 2.15rem 1rem !important; display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important; gap: 1rem !important; border-top: 1px solid rgba(122,199,240,.11) !important; background: linear-gradient(180deg, rgba(7,18,31,.72), rgba(5,14,25,.98)) !important; box-shadow: 0 -14px 35px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.025) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; }
#producerDetailPagePro .producer-detail-nav-label-pro { min-width: 90px !important; text-align: center !important; font-family: 'Inter', sans-serif !important; font-size: .64rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .14em !important; color: #58728e !important; white-space: nowrap !important; }
#producerDetailPagePro .producer-detail-nav-btn-pro { position: relative !important; isolation: isolate !important; overflow: hidden !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: .58rem !important; width: 100% !important; max-width: 156px !important; min-width: 138px !important; height: 44px !important; padding: 0 1rem !important; border: 1px solid rgba(122,199,240,.18) !important; border-radius: 13px !important; color: #cfe9f8 !important; background: linear-gradient(145deg, rgba(122,199,240,.10), rgba(255,255,255,.035)) !important; box-shadow: 0 9px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.10) !important; font-family: 'Inter', sans-serif !important; font-size: .72rem !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease !important; }
#producerDetailPagePro .producer-detail-nav-btn-pro::before { content: ''; position: absolute; top: -40%; left: -75%; width: 48%; height: 180%; z-index: -1; transform: skewX(-22deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); transition: left .55s ease; }
#producerDetailPagePro .producer-detail-nav-btn-pro:hover:not(:disabled) { transform: translateY(-2px) !important; color: #fff !important; border-color: rgba(122,199,240,.46) !important; background: linear-gradient(145deg, rgba(122,199,240,.18), rgba(255,255,255,.055)) !important; box-shadow: 0 13px 30px rgba(0,0,0,.30), 0 0 22px rgba(122,199,240,.08), inset 0 1px 0 rgba(255,255,255,.15) !important; }
#producerDetailPagePro .producer-detail-nav-btn-pro:hover:not(:disabled)::before { left: 135%; }
#producerDetailPagePro .producer-detail-nav-btn-pro:active:not(:disabled) { transform: translateY(0) scale(.985) !important; }
#producerDetailPagePro .producer-detail-nav-btn-pro i { color: #7ac7f0 !important; transition: transform .2s ease !important; }
#producerDetailPagePro #detailPrevProducerBtn:hover:not(:disabled) i { transform: translateX(-3px); }
#producerDetailPagePro #detailNextProducerBtn:hover:not(:disabled) i { transform: translateX(3px); }
#producerDetailPagePro .producer-detail-nav-btn-pro:disabled { opacity: .30 !important; cursor: not-allowed !important; transform: none !important; }
#producerDetailPagePro #simpleCloseBtnPro { position: fixed !important; top: 18px !important; right: 18px !important; z-index: 100 !important; width: 42px !important; height: 42px !important; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 12px !important; background: rgba(5,13,23,.72) !important; color: #a8bed2 !important; box-shadow: 0 10px 28px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.07) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; transition: .2s ease !important; }
#producerDetailPagePro #simpleCloseBtnPro:hover { color: #fff !important; border-color: rgba(122,199,240,.42) !important; background: rgba(12,29,47,.88) !important; transform: translateY(-1px) !important; }
@media (max-width: 1100px) { #producerDetailPagePro .producer-info-panel-pro { width: 46vw !important; min-width: 390px !important; } #producerDetailPagePro .producer-detail-name-row, #producerDetailPagePro .producer-detail-description, #producerDetailPagePro .info-content-pro { padding-left: 1.6rem !important; padding-right: 1.6rem !important; } #producerDetailPagePro .info-tabs-pro { margin-left: 1.6rem !important; margin-right: 1.6rem !important; } #producerDetailPagePro .producer-detail-nav-pro { padding-left: 1.6rem !important; padding-right: 1.6rem !important; } }
@media (max-width: 768px) { #producerDetailPagePro { flex-direction: column !important; } #producerDetailPagePro .producer-3d-section-pro { flex: 0 0 44vh !important; min-height: 300px !important; } #producerDetailPagePro .producer-info-panel-pro { width: 100% !important; min-width: 0 !important; max-width: none !important; flex: 1 1 56vh !important; min-height: 0 !important; border-left: 0 !important; border-top: 1px solid rgba(122,199,240,.12) !important; } #producerDetailPagePro .producer-detail-name-row { padding: 1.35rem 1.15rem .25rem !important; } #producerDetailPagePro .producer-detail-name { font-size: 1.65rem !important; } #producerDetailPagePro .producer-detail-description { padding: .6rem 1.15rem 1rem !important; font-size: .86rem !important; } #producerDetailPagePro .info-tabs-pro { margin: .75rem 1.15rem .6rem !important; } #producerDetailPagePro .info-content-pro { padding-left: 1.15rem !important; padding-right: 1.15rem !important; } #producerDetailPagePro .story-text-pro { font-size: .9rem !important; line-height: 1.78 !important; } #producerDetailPagePro .producer-detail-nav-pro { min-height: 70px !important; height: 70px !important; flex-basis: 70px !important; padding: .65rem 1.15rem .75rem !important; } #producerDetailPagePro .producer-detail-nav-btn-pro { min-width: 0 !important; max-width: none !important; height: 40px !important; font-size: .65rem !important; } #producerDetailPagePro .producer-detail-nav-label-pro { display: none !important; } #producerDetailPagePro .producer-detail-nav-pro { grid-template-columns: 1fr 1fr !important; } }
@media (prefers-reduced-motion: reduce) { #producerDetailPagePro * { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* ─── PRODUCER DETAIL — NAV + MP3 FINAL POSITION FIX ─── */
#producerDetailPagePro .producer-info-panel-pro { position: relative !important; display: grid !important; grid-template-rows: auto auto auto minmax(0, 1fr) !important; min-height: 0 !important; overflow: hidden !important; padding-bottom: 0 !important; }
#producerDetailPagePro .info-content-pro { position: relative !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; padding-bottom: 126px !important; scroll-padding-bottom: 126px !important; }
#producerDetailPagePro .detail-audio-player { position: sticky !important; bottom: 0 !important; z-index: 24 !important; margin-top: 1.1rem !important; margin-bottom: 0 !important; box-shadow: 0 -10px 28px rgba(0,0,0,.22), 0 10px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.045) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; }
#producerDetailPagePro .producer-detail-nav-pro { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 76px !important; width: 100% !important; height: 64px !important; min-height: 64px !important; flex: none !important; z-index: 40 !important; margin: 0 !important; padding: .55rem 2.15rem .55rem !important; display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important; gap: 1rem !important; border-top: 1px solid rgba(122,199,240,.12) !important; border-bottom: 1px solid rgba(122,199,240,.08) !important; background: linear-gradient(180deg, rgba(7,18,31,.94), rgba(5,14,25,.98)) !important; box-shadow: 0 -10px 26px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.025) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; }
#producerDetailPagePro .producer-detail-nav-btn-pro { height: 40px !important; min-height: 40px !important; max-width: 148px !important; min-width: 128px !important; border-radius: 12px !important; }
#producerDetailPagePro .info-content-pro::after { content: '' !important; display: block !important; height: 6px !important; }
@media (max-width: 768px) { #producerDetailPagePro .info-content-pro { padding-bottom: 112px !important; scroll-padding-bottom: 112px !important; } #producerDetailPagePro .producer-detail-nav-pro { bottom: 66px !important; height: 58px !important; min-height: 58px !important; padding: .45rem 1.15rem !important; } #producerDetailPagePro .producer-detail-nav-btn-pro { height: 38px !important; min-height: 38px !important; } #producerDetailPagePro .detail-audio-player { margin-top: .9rem !important; } }
@media (max-width: 430px) { #producerDetailPagePro .info-content-pro { padding-bottom: 104px !important; scroll-padding-bottom: 104px !important; } #producerDetailPagePro .producer-detail-nav-pro { bottom: 62px !important; height: 54px !important; min-height: 54px !important; padding: .4rem .85rem !important; gap: .6rem !important; } #producerDetailPagePro .producer-detail-nav-btn-pro { height: 36px !important; min-height: 36px !important; font-size: .62rem !important; } }

/* ─── PRODUCER OF THE DAY — taller, borderless, square corners ─── */
#view-dashboard .producer-of-day { width: min(1180px, 100%) !important; height: clamp(360px, 52vh, 520px) !important; min-height: 360px !important; max-height: 520px !important; margin: 0 auto clamp(20px, 2.6vh, 34px) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; display: flex !important; align-items: center !important; justify-content: center !important; }
#view-dashboard .producer-of-day:hover { transform: none !important; border-color: transparent !important; box-shadow: none !important; }
#view-dashboard .producer-of-day model-viewer { width: 100% !important; height: 100% !important; min-height: 100% !important; display: block !important; }
#view-dashboard .producer-of-day-copy, #view-dashboard .producer-of-day-hint { z-index: 4 !important; }
#view-dashboard .dashboard-container { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; height: 100% !important; min-height: 0 !important; padding: clamp(12px, 2vh, 28px) clamp(18px, 3vw, 48px) !important; overflow: hidden !important; }
#view-dashboard .producer-of-day, #view-dashboard .dashboard-grid { flex: 0 0 auto !important; }

/* ═══════════════════════════════════════════════════════════════════
   AUTH / EMAIL VERIFICATION FIXES
   ═══════════════════════════════════════════════════════════════════ */

#verifyCodeBtn:disabled {
  opacity: 0.65;
  cursor: wait !important;
  transform: none !important;
  box-shadow: none !important;
}

#verificationSection .code-input {
  width: 56px;
  height: 64px;
  border: 1px solid rgba(122,199,240,0.22);
  border-radius: 14px;
  background: rgba(5,20,42,0.72);
  color: #fff;
  font-family: 'Tomorrow', sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

#verificationSection .code-input:focus {
  border-color: #7ac7f0;
  box-shadow: 0 0 0 3px rgba(122,199,240,0.10), 0 8px 24px rgba(0,0,0,0.20);
  transform: translateY(-1px);
}

#verificationLoginLink:hover,
#backToSignupLink:hover {
  color: #fff !important;
  text-decoration: underline !important;
}

#resendCodeBtn {
  transition: opacity .2s ease, color .2s ease;
}

@media (max-width: 520px) {
  #verificationSection .code-input {
    width: 50px;
    height: 58px;
  }
}

/* ─── SIGNUP SUBMIT BUTTON ("Get Started") ─── */
.signup-modal #submitSignupBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 52px;
  margin-top: 0.8rem;
  padding: 0.95rem 1.5rem;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #0a2647;
  background: linear-gradient(135deg, #7ac7f0 0%, #4aa0e0 50%, #2c7cb6 100%);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 6px 22px rgba(74, 160, 224, 0.28),
              0 1px 0 rgba(255, 255, 255, 0.3) inset;
}

.signup-modal #submitSignupBtn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  pointer-events: none;
}

.signup-modal #submitSignupBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(74, 160, 224, 0.42),
              0 1px 0 rgba(255, 255, 255, 0.4) inset;
}

.signup-modal #submitSignupBtn:hover::before {
  left: 125%;
}

.signup-modal #submitSignupBtn:active {
  transform: translateY(0);
  box-shadow: 0 4px 14px rgba(74, 160, 224, 0.25),
              0 1px 0 rgba(255, 255, 255, 0.2) inset;
}

.signup-modal #submitSignupBtn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(122, 199, 240, 0.25),
              0 6px 22px rgba(74, 160, 224, 0.28);
}

.signup-modal #submitSignupBtn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 4px 15px rgba(74, 160, 224, 0.15);
}

.signup-modal #submitSignupBtn:disabled::before {
  display: none;
}

.signup-modal #submitSignupBtn::after {
  content: '→';
  font-size: 1.15rem;
  font-weight: 600;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  line-height: 1;
}

.signup-modal #submitSignupBtn:hover::after {
  transform: translateX(4px);
}

/* ─── SIGNUP SUBMIT BUTTON ("Get Started") ─── */
.signup-modal #submitSignupBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 52px;
  margin-top: 0.8rem;
  padding: 0.95rem 1.5rem;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #0a2647;
  background: linear-gradient(135deg, #7ac7f0 0%, #4aa0e0 50%, #2c7cb6 100%);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 6px 22px rgba(74, 160, 224, 0.28),
              0 1px 0 rgba(255, 255, 255, 0.3) inset;
}

.signup-modal #submitSignupBtn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  pointer-events: none;
}

.signup-modal #submitSignupBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(74, 160, 224, 0.42),
              0 1px 0 rgba(255, 255, 255, 0.4) inset;
}

.signup-modal #submitSignupBtn:hover::before {
  left: 125%;
}

.signup-modal #submitSignupBtn:active {
  transform: translateY(0);
  box-shadow: 0 4px 14px rgba(74, 160, 224, 0.25),
              0 1px 0 rgba(255, 255, 255, 0.2) inset;
}

.signup-modal #submitSignupBtn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(122, 199, 240, 0.25),
              0 6px 22px rgba(74, 160, 224, 0.28);
}

.signup-modal #submitSignupBtn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 4px 15px rgba(74, 160, 224, 0.15);
}

.signup-modal #submitSignupBtn:disabled::before {
  display: none;
}

.signup-modal #submitSignupBtn::after {
  content: '→';
  font-size: 1.15rem;
  font-weight: 600;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  line-height: 1;
}

.signup-modal #submitSignupBtn:hover::after {
  transform: translateX(4px);
}