:root{--primary-color: #003399;--primary-dark: #002266;--primary-light: #4a7bc8;--secondary-color: #FFD700;--accent-color: #C8102E;--success-color: #008000;--warning-color: #FF8C00;--error-color: #C8102E;--background-color: #f8f9fa;--lumo-base-color: var(--background-color);--card-bg: #ffffff;--text-primary: #1a1a1a;--text-secondary: #666666;--text-light: #ffffff;--border-radius: 12px;--box-shadow: 0 4px 6px rgba(0,0,0,0.1);--box-shadow-hover: 0 8px 12px rgba(0,0,0,0.15);--transition: all 0.3s cubic-bezier(0.4,0.0,0.2,1)}html[theme="dark"]{--background-color: #1a1a1a;--lumo-base-color: var(--background-color);--card-bg: #2d2d2d;--text-primary: #f0f0f0;--text-secondary: #b0b0b0;--text-light: #ffffff;--box-shadow: 0 4px 6px rgba(0,0,0,0.3);--box-shadow-hover: 0 8px 12px rgba(0,0,0,0.4)}body{background-color: var(--background-color);color: var(--text-primary);font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;margin: 0;padding: 0;line-height: 1.6}.header{background-color: var(--card-bg)}.vaadin-horizontal-layout{gap: 0.5rem}h1.logo-title{font-size: 1.8rem;font-weight: 700;color: var(--primary-color);margin: 0;letter-spacing: -0.5px}html[theme="dark"] h1.logo-title{color: var(--primary-light)}.vaadin-button{border-radius: var(--border-radius);font-weight: 500;transition: var(--transition);border: 1px solid transparent}.vaadin-button:focus{box-shadow: 0 0 0 3px rgba(0,51,153,0.2)}.vaadin-button.lumo-primary{background-color: var(--primary-color);color: white}.vaadin-button.lumo-primary:hover{background-color: var(--primary-dark);transform: translateY(-1px);box-shadow: var(--box-shadow-hover)}.vaadin-button.lumo-tertiary{color: var(--primary-color);background-color: transparent;border-color: transparent}.vaadin-button.lumo-tertiary:hover{background-color: rgba(0,51,153,0.05);color: var(--primary-dark)}html[theme="dark"] .vaadin-button.lumo-tertiary{color: var(--primary-light)}html[theme="dark"] .vaadin-button.lumo-tertiary:hover{background-color: rgba(255,215,0,0.1);color: var(--secondary-color)}.search-bar{background-color: rgba(255,255,255,0.8);backdrop-filter: blur(10px);border-radius: var(--border-radius);padding: 0.5rem;border: 1px solid rgba(0,0,0,0.1)}html[theme="dark"] .search-bar{background-color: rgba(45,45,45,0.8);border-color: rgba(255,255,255,0.1)}.vaadin-text-field{border-radius: 6px;border: 1px solid #ccc;transition: var(--transition)}.vaadin-text-field:focus-within{border-color: var(--primary-color);box-shadow: 0 0 0 3px rgba(0,51,153,0.1)}html[theme="dark"] .vaadin-text-field{border-color: #666;background-color: #3a3a3a;color: var(--text-primary)}html[theme="dark"] .vaadin-text-field:focus-within{border-color: var(--primary-light);box-shadow: 0 0 0 3px rgba(74,123,199,0.2)}.spotlight-hero{background-size: cover;background-position: center;color: white;position: relative;overflow: hidden;border-radius: var(--border-radius);margin: 1.5rem 0;min-height: 450px;display: flex;padding: 2rem}.spotlight-hero>*{position: relative;z-index: 2}.spotlight-badge{background-color: var(--primary-color);color: white;padding: 0.3rem 0.8rem;border-radius: 6px;font-size: 0.7rem;font-weight: 600;text-transform: uppercase;letter-spacing: 0.5px}.spotlight-title{color: white;font-size: 3rem;font-weight: 800;margin: 0.5rem 0 1rem 0;line-height: 1.2}.spotlight-description{font-size: 1.1rem;line-height: 1.6;max-width: 500px;opacity: 0.95}.spotlight-button{margin-top: 1.5rem}h2.section-title{font-size: 1.8rem;font-weight: 700;color: var(--text-primary);margin: 1rem 0 0 0;padding-bottom: 0.5rem;border-bottom: 2px solid var(--primary-color);display: inline-block}html[theme="dark"] h2.section-title{border-bottom-color: var(--primary-light)}.media-card{width: 200px;min-width: 180px;height: 390px;background-color: var(--card-bg);border-radius: var(--border-radius);overflow: visible;box-shadow: var(--box-shadow);transition: var(--transition);cursor: pointer;display: flex;flex-direction: column;position: relative}.media-card:hover{transform: translateY(-5px);box-shadow: var(--box-shadow-hover);z-index: 10}.media-card-poster{width: 100%;height: 300px;object-fit: cover;border-radius: var(--border-radius) var(--border-radius) 0 0}.media-card-info{padding: 0.25rem 1rem 1rem 1rem;flex: 1;display: flex;flex-direction: column;justify-content: space-between}.media-card-title{font-size: 0.9rem;font-weight: 600;color: var(--text-primary);margin: 0 0 0.5rem 0;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;height: auto}.media-card-meta{display: flex;align-items: center;justify-content: space-between;font-size: 0.8rem;color: var(--text-secondary);width: 100%;margin-top: 0.5rem}.media-card-flags{display: flex;align-items: center;gap: 0.5rem}.media-card-year{margin-left: auto}.scrollable-section{position: relative;padding: 0.3rem 0}.scrollable-wrapper{overflow-x: auto;scroll-behavior: smooth;padding: 1rem 0;scrollbar-width: thin;scrollbar-color: var(--primary-color) var(--background-color)}.scrollable-wrapper::-webkit-scrollbar{height: 8px}.scrollable-wrapper::-webkit-scrollbar-track{background: var(--background-color);border-radius: 10px}.scrollable-wrapper::-webkit-scrollbar-thumb{background-color: var(--primary-color);border-radius: 10px}.scroll-nav-button{position: absolute;top: 50%;transform: translateY(-50%);width: 40px;height: 40px;border-radius: 50%;background-color: rgba(0,0,0,0.5);color: white;border: none;cursor: pointer;z-index: 10;display: flex;align-items: center;justify-content: center;transition: var(--transition)}.scroll-nav-button:hover{background-color: var(--primary-color);transform: translateY(-50%) scale(1.1)}.scroll-nav-button.left{left: 0}.scroll-nav-button.right{right: 0}.footer{background-color: var(--card-bg);border-top: 1px solid #eee;padding: 2rem 0;margin-top: 3rem}html[theme="dark"] .footer{border-top-color: #444}.footer-content{display: flex;justify-content: space-between;align-items: center;max-width: 1400px;margin: 0 auto;padding: 0 2rem}.footer-copyright{font-size: 0.9rem;color: var(--text-secondary)}.footer-links{display: flex;gap: 1rem}.footer-links .vaadin-button{font-size: 0.9rem}.production-badge{top: 8px;right: 8px;font-size: 0.7rem;padding: 0.3rem 0.6rem;border-radius: 6px;font-weight: 600;display: inline-flex;align-items: center;gap: 0.3rem;cursor: default;transition: var(--transition);z-index: 10;box-shadow: 0 2px 4px rgba(0,0,0,0.2)}.production-badge:hover{transform: scale(1.1);z-index: 20}.production-badge .badge-text{max-width: 0;margin-left: 0;overflow: hidden;transition: max-width 0.3s ease-in-out,margin 0.3s;white-space: nowrap}@media (hover: hover){.production-badge:hover .badge-text{max-width: 120px;margin-left: 4px}}.production-badge.expanded .badge-text{max-width: 120px;margin-left: 4px}html[theme="dark"] .production-badge{box-shadow: 0 2px 4px rgba(0,0,0,0.4)}html[theme="dark"] .media-card{background-color: var(--card-bg)}html[theme="dark"] .media-card-title{color: var(--text-primary)}html[theme="dark"] .media-card-meta{color: var(--text-secondary)}.desktop-header .nav-button{font-weight: 500;transition: all 0.2s ease;border-radius: 6px;padding: 0 1.2rem}.desktop-header .nav-button:hover{background-color: var(--lumo-primary-color-10pct);color: var(--lumo-primary-text-color);transform: translateY(-1px)}.mobile-header{display: none;flex-direction: row;align-items: center;justify-content: space-between}.mobile-menu{display: none;background-color: var(--card-bg);padding: 1rem;border-top: 1px solid rgba(0,0,0,0.1);box-shadow: var(--box-shadow)}html[theme="dark"] .mobile-menu{border-top-color: rgba(255,255,255,0.1)}.mobile-sidebar{position: fixed;top: 0;left: 0;width: 80%;max-width: 300px;height: 100vh;background-color: var(--lumo-base-color);z-index: 1001;transform: translateX(-100%);transition: transform 0.3s ease-in-out;box-shadow: var(--lumo-box-shadow-xl);display: flex;flex-direction: column}.mobile-sidebar.open{transform: translateX(0)}.mobile-sidebar vaadin-side-nav{width: 100%;flex-grow: 1;overflow-y: auto}.mobile-sidebar vaadin-side-nav-item{padding: 4px 12px;margin: 4px 8px;border-radius: 8px;transition: background-color 0.2s ease}.mobile-sidebar vaadin-side-nav-item::part(link){font-weight: 500;font-size: var(--lumo-font-size-m);color: var(--lumo-body-text-color)}.mobile-sidebar vaadin-side-nav-item:hover,.mobile-sidebar vaadin-side-nav-item[active]{background-color: var(--lumo-primary-color-10pct)}.mobile-sidebar vaadin-side-nav-item[active]::part(link){color: var(--lumo-primary-text-color)}.mobile-sidebar vaadin-side-nav-item vaadin-icon{color: var(--lumo-primary-color);margin-right: 12px}.sidebar-backdrop{position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background: rgba(0,0,0,0.6);z-index: 1000;opacity: 0;visibility: hidden;transition: opacity 0.3s ease,visibility 0.3s}.sidebar-backdrop.visible{opacity: 1;visibility: visible}.mobile-sidebar .nav-container{flex-grow: 1;overflow-y: auto}.sidebar-footer{padding: var(--lumo-space-m);border-top: 1px solid var(--lumo-contrast-10pct);background-color: var(--lumo-contrast-5pct)}@media (max-width: 800px){.desktop-header{display: none !important}.mobile-header{display: flex !important}.spotlight-title{font-size: 2rem}.footer-content{flex-direction: column;gap: 1rem;text-align: center}.media-card{width: 160px;height: 320px}.media-card-poster{height: 240px}}@media (max-width: 800px){.desktop-sidebar{display: none !important}.mobile-filter-btn{display: flex !important}.sort-select{width: 100%}}@media (min-width: 801px){.mobile-filter-btn{display: none !important}}.discovery-grid{display: grid;justify-content: center;justify-items: center;width: 100%;margin: 0 auto}.discovery-grid>*{width: 100%;max-width: 100%}@media (max-width: 600px){.discovery-grid{gap: var(--lumo-space-s) !important;padding: var(--lumo-space-s)}}@media (min-width: 1920px){.discovery-container{max-width: 80% !important}}@media (max-width: 480px){.spotlight-title{font-size: 1.8rem}.spotlight-description{font-size: 1rem}.media-card{width: 140px;height: 280px}.media-card-poster{height: 210px}}