*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #0d1117;--surface: #161b22;--border: #30363d;--text: #e6edf3;--text-muted: #8b949e;--accent: #58a6ff;--accent-hover: #79c0ff;--success: #3fb950;--error: #f85149}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-hover)}.layout{display:flex;flex-direction:column;min-height:100vh}.header{background:var(--surface);border-bottom:1px solid var(--border);padding:0 1.5rem}.header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:56px}.logo{font-size:1.25rem;font-weight:700;color:var(--text)!important;letter-spacing:-.02em}.burger{display:none;background:none;border:none;cursor:pointer;padding:.25rem;flex-direction:column;gap:5px;z-index:101}.burger-line{display:block;width:22px;height:2px;background:var(--text);border-radius:1px;transition:transform .2s,opacity .2s}.burger-line.open:nth-child(1){transform:translateY(7px) rotate(45deg)}.burger-line.open:nth-child(2){opacity:0}.burger-line.open:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.nav{display:flex;gap:1.5rem;align-items:center}.nav a{color:var(--text-muted);font-size:.875rem}.nav a:hover{color:var(--text)}.nav-user-mobile{display:none}@media(max-width:768px){.burger{display:flex}.nav{display:none;position:fixed;right:0;bottom:0;left:0;top:56px;background:var(--surface);flex-direction:column;padding:1.5rem;gap:1.25rem;z-index:100;border-top:1px solid var(--border)}.nav-open{display:flex}.nav a{font-size:1rem}.nav-user-mobile{display:flex;flex-direction:column;gap:.75rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}.user-area{display:none}}.main{flex:1;max-width:1200px;margin:0 auto;padding:2rem 1.5rem;width:100%}.footer{background:var(--surface);border-top:1px solid var(--border);text-align:center;padding:1rem;color:var(--text-muted);font-size:.75rem;display:flex;flex-direction:column;gap:.375rem}.footer-links{display:flex;justify-content:center;gap:1rem}.footer-links a{color:var(--text-muted);font-size:.75rem}.footer-links a:hover{color:var(--text)}.hero{text-align:center;padding:3rem 0 2rem}.hero h1{font-size:2.5rem;font-weight:800;letter-spacing:-.03em;margin-bottom:.5rem}.tagline{color:var(--text-muted);font-size:1.125rem;max-width:500px;margin:0 auto}.status-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:1.25rem;display:flex;align-items:center;justify-content:space-between;max-width:400px;margin:2rem auto}.status-card h2{font-size:.875rem;font-weight:600;color:var(--text-muted)}.status-badge{font-size:.875rem;font-weight:600;padding:.25rem .75rem;border-radius:12px}.status-badge.ok{background:#3fb95026;color:var(--success)}.status-badge.err{background:#f8514926;color:var(--error)}.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;margin-top:2rem}.feature{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:1.5rem}.feature h3{font-size:1rem;margin-bottom:.5rem}.feature p{color:var(--text-muted);font-size:.875rem;line-height:1.5}.drive-list{list-style:none;margin-top:.75rem;display:flex;flex-direction:column;gap:.375rem}.drive-item{display:flex;align-items:center;gap:.5rem;font-size:.8125rem}.drive-status{font-size:.6875rem;font-weight:700;width:2rem;text-align:center}.drive-status.supported{color:var(--success)}.drive-status.planned{color:var(--text-muted)}.user-area{display:flex;align-items:center}.user-menu{display:flex;align-items:center;gap:.5rem}.user-avatar{width:28px;height:28px;border-radius:50%}.user-name{font-size:.8125rem;color:var(--text-muted)}.logout-btn{background:none;border:1px solid var(--border);color:var(--text-muted);border-radius:6px;padding:.25rem .5rem;font-size:.75rem;cursor:pointer}.logout-btn:hover{color:var(--text);border-color:var(--text-muted)}.nav-login{color:var(--accent);font-size:.875rem}.nav-btn{background:var(--accent);color:var(--bg)!important;padding:.25rem .75rem;border-radius:6px;font-size:.8125rem;font-weight:600}.nav-btn:hover{background:var(--accent-hover);color:var(--bg)!important}.login-page{display:flex;justify-content:center;align-items:center;min-height:60vh}.login-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:2.5rem;text-align:center;max-width:360px;width:100%}.login-card h1{font-size:1.5rem;margin-bottom:.5rem}.login-card p{color:var(--text-muted);margin-bottom:1.5rem;font-size:.875rem}.google-btn{background:#4285f4;color:#fff;border:none;border-radius:6px;padding:.75rem 1.5rem;font-size:.9375rem;font-weight:600;cursor:pointer;width:100%}.google-btn:hover{background:#3367d6}.login-hint{color:var(--text-muted);font-size:.75rem;margin-top:1rem}.login-error{color:var(--error);font-size:.875rem;margin-bottom:1rem}.protected-loading{text-align:center;padding:4rem 0;color:var(--text-muted)}.session-page{display:flex;flex-direction:column;gap:1.5rem}.session-page h1{font-size:1.5rem}.camera-viewport{position:relative;background:#000;border-radius:8px;overflow:hidden;aspect-ratio:16/9;max-height:600px;cursor:pointer;-webkit-user-select:none;user-select:none}.camera-viewport video{width:100%;height:100%;object-fit:contain}.camera-preview{background:#000;border-radius:8px;overflow:hidden;aspect-ratio:16/9;max-height:500px}.camera-preview video{width:100%;height:100%;object-fit:contain}.video-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(to bottom,rgba(0,0,0,.6) 0%,transparent 30%,transparent 70%,rgba(0,0,0,.6) 100%);padding:1rem;animation:overlayFadeIn .2s ease-out;z-index:10}@keyframes overlayFadeIn{0%{opacity:0}to{opacity:1}}.overlay-top{display:flex;justify-content:space-between;align-items:center;gap:1rem}.overlay-top-left{display:flex;align-items:center;gap:.5rem}.overlay-top-right{display:flex;align-items:center;gap:.75rem;font-size:.75rem}.rec-dot{width:10px;height:10px;border-radius:50%;background:var(--error);animation:recPulse 1s infinite}@keyframes recPulse{0%,to{opacity:1}50%{opacity:.3}}.rec-label{color:var(--error);font-weight:700;font-size:.8125rem}.rec-elapsed{color:#fff;font-size:.875rem;font-variant-numeric:tabular-nums}.playback-duration{color:#fff;font-size:.875rem;font-weight:600}.playback-size{color:var(--text-muted);font-size:.75rem}.storage-info{color:var(--text-muted)}.storage-info.storage-warn{color:#d29922;font-weight:600}.camera-info{color:var(--text-muted)}.overlay-center{display:flex;justify-content:center;align-items:center}.btn-overlay-stop{background:transparent;color:#fff;border:3px solid var(--error);border-radius:50%;width:72px;height:72px;font-size:.875rem;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:.05em;animation:stopPulse 2s infinite}@keyframes stopPulse{0%,to{border-color:var(--error)}50%{border-color:#f8514966}}.btn-overlay-stop:hover{background:var(--error)}.btn-overlay-play{background:#ffffff1a;color:#fff;border:2px solid rgba(255,255,255,.4);border-radius:50%;width:64px;height:64px;font-size:1.5rem;cursor:pointer}.btn-overlay-play:hover{background:#fff3;border-color:#fff}.overlay-bottom{display:flex;flex-direction:column;gap:.5rem}.transport-row{display:flex;align-items:center;justify-content:center;gap:.75rem}.transport-btn{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:4px;padding:.375rem .625rem;font-size:.8125rem;cursor:pointer}.transport-btn:hover{background:#fff3}.transport-spacer{width:2rem}.scrub-bar{display:flex;flex-direction:column;gap:.25rem;cursor:pointer}.scrub-track{position:relative;height:6px;background:#fff3;border-radius:3px}.scrub-fill{height:100%;background:var(--accent);border-radius:3px;transition:width .1s linear}.scrub-thumb{position:absolute;top:50%;width:14px;height:14px;background:#fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 1px 4px #0006}.scrub-times{display:flex;justify-content:space-between;font-size:.6875rem;color:#ffffffb3;font-variant-numeric:tabular-nums}.speed-row{display:flex;gap:.375rem;justify-content:center}.speed-btn{background:#ffffff1a;color:#fff9;border:1px solid rgba(255,255,255,.15);border-radius:4px;padding:.25rem .5rem;font-size:.6875rem;cursor:pointer}.speed-btn:hover{color:#fff;background:#fff3}.speed-btn.active{color:#fff;background:var(--accent);border-color:var(--accent)}.camera-selector{display:flex;flex-direction:column;gap:.5rem;max-width:300px}.camera-selector label{font-size:.875rem;color:var(--text-muted)}.camera-selector select{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:.5rem;font-size:.875rem}.session-info{display:flex;align-items:center}.session-meta{display:flex;gap:1rem;align-items:center;font-size:.875rem;color:var(--text-muted)}.session-controls{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}.session-error{color:var(--error);font-size:.875rem}.session-error-row{display:flex;align-items:center;gap:.75rem}.offline-banner{background:#d2992226;color:#d29922;border:1px solid rgba(210,153,34,.3);border-radius:6px;padding:.5rem .75rem;font-size:.8125rem}.rec-window{color:var(--text-muted);font-size:.6875rem;background:#ffffff1a;padding:.125rem .375rem;border-radius:3px}.btn-primary{background:var(--accent);color:var(--bg);border:none;border-radius:6px;padding:.625rem 1.25rem;font-size:.875rem;font-weight:600;cursor:pointer}.btn-primary:hover{background:var(--accent-hover)}.btn-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:.625rem 1.25rem;font-size:.875rem;cursor:pointer}.btn-secondary:hover{border-color:var(--text-muted)}.btn-stop{background:var(--error);color:#fff;border:none;border-radius:6px;padding:.625rem 1.25rem;font-size:.875rem;font-weight:600;cursor:pointer}.btn-link{color:var(--accent);font-size:.8125rem}.status-badge.live{background:#58a6ff26;color:var(--accent)}.status-badge.ended{background:#d2992226;color:#d29922}.status-badge.uploaded{background:#3fb95026;color:var(--success)}.upload-progress{display:flex;align-items:center;gap:.75rem;min-width:200px}.upload-bar{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden}.upload-fill{height:100%;background:var(--accent);border-radius:3px;transition:width .2s}.upload-pct{font-size:.8125rem;color:var(--text-muted);min-width:3ch}.upload-complete{display:flex;align-items:center;gap:.75rem}.reels-page{display:flex;flex-direction:column;gap:1.5rem}.reels-page h1{font-size:1.5rem}.reels-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}.empty-state{color:var(--text-muted);text-align:center;padding:3rem 0}.loading-text{color:var(--text-muted);text-align:center}.load-more{align-self:center}.session-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:1.25rem;display:flex;flex-direction:column;gap:.75rem}.session-card__header{display:flex;align-items:center;justify-content:space-between}.session-card__camera{font-size:.8125rem;color:var(--text-muted)}.session-card__meta{display:flex;gap:1rem;font-size:.8125rem;color:var(--text-muted)}.session-card__actions{display:flex;gap:1rem;padding-top:.25rem;border-top:1px solid var(--border)}.legal-page{max-width:700px;line-height:1.7}.legal-page h1{font-size:1.5rem;margin-bottom:.25rem}.legal-updated{color:var(--text-muted);font-size:.8125rem;margin-bottom:2rem}.legal-page section{margin-bottom:1.5rem}.legal-page h2{font-size:1rem;margin-bottom:.5rem}.legal-page p,.legal-page li{color:var(--text-muted);font-size:.875rem}.legal-page ul{padding-left:1.25rem;margin-top:.25rem}.legal-page li{margin-bottom:.25rem}.legal-page code{background:var(--border);padding:.125rem .375rem;border-radius:3px;font-size:.8125rem}.help-page{max-width:700px;line-height:1.7}.help-page h1{font-size:1.5rem;margin-bottom:1.5rem}.help-section{margin-bottom:2rem}.help-section h2{font-size:1.0625rem;margin-bottom:.5rem}.help-section p,.help-section li{color:var(--text-muted);font-size:.875rem;margin-bottom:.5rem}.help-section ul{padding-left:1.25rem}.help-section li{margin-bottom:.25rem}.not-found{text-align:center;padding:4rem 0}.not-found h1{font-size:2rem;margin-bottom:.5rem}.not-found p{color:var(--text-muted);margin-bottom:1rem}:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
