@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");:root{--color-dark:#32373c;--color-dark-hover:#1a1d20;--color-accent:#c00;--color-text:#32373c;--color-text-secondary:#5a5a5a;--color-text-muted:#8a8a8a;--color-bg:#f7f7f7;--color-white:#fff;--color-border:#e0e0e0;--shadow-sm:0 1px 3px rgba(0,0,0,.06);--shadow-md:0 4px 12px rgba(0,0,0,.08);--shadow-lg:0 8px 24px rgba(0,0,0,.12);--transition:all 0.2s ease}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.mode-container{position:absolute;inset:0;display:none;flex-direction:column}.mode-container.active{display:flex}.kiosk-container{width:100%;height:100%;display:flex;flex-direction:column;background:var(--color-bg)}.kiosk-header{display:flex;align-items:center;gap:24px;padding:20px 48px;background:var(--color-white);border-bottom:3px solid var(--color-accent);flex-shrink:0}.kiosk-logo{height:48px;width:auto;flex-shrink:0}.kiosk-header-info{display:flex;flex-direction:column;gap:2px}.kiosk-header-info h2{font-size:1.125rem;font-weight:700;color:var(--color-dark);letter-spacing:-.01em;margin:0}.kiosk-subtitle{color:var(--color-text-secondary);font-size:.8125rem;font-weight:400;margin:0}.video-grid{flex:1 1;display:grid;grid-template-columns:repeat(2,1fr);grid-gap:32px;gap:32px;padding:48px;overflow-y:auto;align-content:start;max-width:1100px;margin:0 auto;width:100%}.video-grid::-webkit-scrollbar{width:6px}.video-grid::-webkit-scrollbar-track{background:transparent}.video-grid::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}.video-thumbnail-kiosk{aspect-ratio:16/9;overflow:hidden;cursor:pointer;transition:var(--transition);box-shadow:var(--shadow-sm);position:relative;background:var(--color-dark);border:1px solid var(--color-border)}.video-thumbnail-kiosk:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:var(--color-accent)}.thumbnail-video{width:100%;height:100%;object-fit:cover;display:block}.thumbnail-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;background:rgba(0,0,0,.15);transition:var(--transition)}.video-thumbnail-kiosk:hover .thumbnail-overlay{background:rgba(0,0,0,.35)}.video-play-icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--color-white);background:var(--color-dark);border:2px solid var(--color-white);opacity:0;transition:var(--transition)}.video-thumbnail-kiosk:hover .video-play-icon{opacity:1}.thumbnail-label{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.75));color:var(--color-white);padding:32px 16px 14px}.thumbnail-title{font-size:.875rem;font-weight:600}.thumbnail-subtitle,.thumbnail-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.thumbnail-subtitle{font-size:.75rem;opacity:.8;margin-top:2px}.video-player{position:fixed;inset:0;background:rgba(0,0,0,.95);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100}.video-player.hidden{display:none}.video-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:24px}.video-element{width:100%;height:100%;max-width:1400px;max-height:85vh}.video-info{position:absolute;bottom:24px;left:24px;color:var(--color-white)}.video-info h2{font-size:1.25rem;font-weight:600;margin:0}.video-info p{font-size:.875rem;opacity:.7;margin:4px 0 0}.close-btn{position:absolute;top:24px;right:24px;width:48px;height:48px;background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.2);color:var(--color-white);font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition);z-index:101}.close-btn:hover{background:var(--color-accent);border-color:var(--color-accent)}.close-icon{display:block;line-height:1}.hidden{display:none!important}@media (max-width:768px){.kiosk-header{flex-direction:column;gap:12px;padding:16px 24px;text-align:center}.kiosk-header-info{align-items:center}.kiosk-logo{height:40px}.kiosk-header-info h2{font-size:1rem}.video-grid{grid-template-columns:1fr;gap:20px;padding:24px}.close-btn{width:40px;height:40px;top:16px;right:16px;font-size:1.25rem}}@media (max-width:480px){.kiosk-header{padding:12px 16px}.video-grid{gap:16px;padding:16px}}@media print{body{display:none}}