:root{--font-body:"DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:"DM Mono", "Fira Mono", monospace;--radius-sm:10px;--radius-md:16px;--radius-lg:22px;--transition:.18s ease}[data-theme=midnight]{--bg:#f3efe6;--bg2:#ebe6d8;--bg3:#e1dbcd;--surface:#d6cfbf;--border:#c6bfae;--text:#2c2820;--text-muted:#8a8068;--accent:#8a7450;--accent2:#a88a5e;--live:#4a9a4a;--danger:#c43020;--btn-play:#e0d5c2;--btn-active:#ccbfa8;--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E")}[data-theme=matcha]{--bg:#eeeeef;--bg2:#e5e5e6;--bg3:#dadadc;--surface:#cdcdcf;--border:#bbbbbf;--text:#1e2230;--text-muted:#6a7088;--accent:#5070a0;--accent2:#6888b8;--live:#4a9a5a;--danger:#c43020;--btn-play:#d4d8e0;--btn-active:#bec4d0;--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E")}[data-theme=sunset]{--bg:#f0ece9;--bg2:#e8e4e0;--bg3:#dedad6;--surface:#d2cecb;--border:#c2bbb8;--text:#30201c;--text-muted:#9a7068;--accent:#b85a48;--accent2:#d07060;--live:#4a9a5a;--danger:#c43020;--btn-play:#e2d0c8;--btn-active:#d0bab0;--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E")}[data-theme=paper]{--bg:#ecedea;--bg2:#e2e4df;--bg3:#d8dad5;--surface:#cbcec8;--border:#b9bcb5;--text:#1c2818;--text-muted:#587850;--accent:#3e7a3a;--accent2:#5a9a4e;--live:#3e7a3a;--danger:#c43020;--btn-play:#d0dcc8;--btn-active:#b8caae;--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E")}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}#root{flex-direction:column;display:flex}html{font-size:16px}body{background-color:var(--bg);background-image:var(--grain);color:var(--text);font-family:var(--font-body);transition:background-color var(--transition), color var(--transition);flex-direction:column;min-height:100dvh;display:flex}.theme-switcher{flex-shrink:0;align-items:center;gap:6px;display:flex}.theme-dot{cursor:pointer;border:2px solid #0000;border-radius:50%;flex-shrink:0;width:18px;height:18px;transition:transform .15s,border-color .15s}.theme-dot:hover{transform:scale(1.2)}.theme-dot.active{border-color:var(--text);transform:scale(1.15)}.theme-dot[data-t=midnight]{background:#c8b080}.theme-dot[data-t=matcha]{background:#8098b8}.theme-dot[data-t=sunset]{background:#c89080}.theme-dot[data-t=paper]{background:#80b870}header{background:var(--bg2);border-bottom:1px solid var(--border);padding:10px 14px;padding-top:max(10px, env(safe-area-inset-top));padding-left:max(14px, env(safe-area-inset-left));padding-right:max(14px, env(safe-area-inset-right));flex-shrink:0;justify-content:space-between;align-items:center;gap:10px;display:flex}header h1{flex:1;font-size:1rem;font-weight:600}.header-left{flex-shrink:0;align-items:center;gap:6px;display:flex}.header-title{white-space:nowrap;font-size:.85rem;font-weight:600}.header-right{flex-shrink:1;align-items:center;gap:2px;display:flex;overflow-x:auto}.sticky-header{z-index:5;gap:12px;padding:14px 16px;position:sticky;top:0}.live-pill{font-family:var(--font-mono);letter-spacing:.08em;background:color-mix(in srgb, var(--live) 15%, transparent);color:var(--live);border:1px solid color-mix(in srgb, var(--live) 30%, transparent);border-radius:99px;padding:2px 7px;font-size:.65rem}.live-pill.offline{background:color-mix(in srgb, var(--danger) 15%, transparent);color:var(--danger);border-color:color-mix(in srgb, var(--danger) 30%, transparent)}.icon-btn{color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);transition:color var(--transition), background var(--transition);background:0 0;border:none;padding:8px;font-size:1.1rem;line-height:1}.icon-btn:hover{color:var(--text);background:var(--bg3)}@media (width<=480px){header .theme-switcher{display:none}.icon-btn{padding:6px;font-size:1rem}}.back-btn{color:var(--accent);padding:4px;font-size:1.2rem;text-decoration:none}#video-wrap{cursor:pointer;aspect-ratio:16/9;background:#000;flex:none;width:100%;max-height:50vh;position:relative;overflow:hidden}#video-wrap.fullscreen{z-index:50;flex:none;position:fixed;inset:0}#video-wrap.fullscreen #feed{object-fit:contain}#feed{object-fit:cover;width:100%;height:100%;transition:filter .3s;display:block}#feed.nightvision{filter:brightness(1.8)contrast(1.3)saturate(0)}.video-overlay{pointer-events:none;background:0 0;position:absolute;inset:0}.reconnect-overlay{z-index:8;opacity:0;pointer-events:none;background:#000000a6;flex-direction:column;justify-content:center;align-items:center;gap:8px;transition:opacity .3s;display:flex;position:absolute;inset:0}.reconnect-overlay.show{opacity:1}.reconnect-overlay .reconnect-text{font-family:var(--font-mono);color:var(--danger);letter-spacing:.05em;font-size:.8rem}.reconnect-overlay .reconnect-sub{font-family:var(--font-mono);color:var(--text-muted);font-size:.68rem}.motion-alert{background:color-mix(in srgb, var(--danger) 20%, var(--bg2));border:1px solid color-mix(in srgb, var(--danger) 40%, transparent);color:var(--danger);font-family:var(--font-mono);border-radius:var(--radius-md);z-index:10;opacity:0;pointer-events:none;padding:6px 14px;font-size:.75rem;transition:opacity .3s,transform .3s;position:absolute;top:12px;left:50%;transform:translate(-50%)translateY(-8px)}.motion-alert.show{opacity:1;transform:translate(-50%)translateY(0)}.talk-bubble{background:var(--bg2);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-md);white-space:nowrap;pointer-events:none;opacity:0;z-index:10;padding:10px 18px;font-size:.9rem;font-weight:500;transition:opacity .25s,transform .25s;position:absolute;bottom:16px;left:50%;transform:translate(-50%)translateY(8px);box-shadow:0 4px 20px #0006}.talk-bubble.show{opacity:1;transform:translate(-50%)translateY(0)}.talk-bubble:after{content:"";background:var(--bg2);border-right:1px solid var(--border);border-bottom:1px solid var(--border);width:12px;height:12px;position:absolute;bottom:-7px;left:50%;transform:translate(-50%)rotate(45deg)}#clips-section{background:var(--bg);padding:14px max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.clips-label{font-family:var(--font-mono);color:var(--text-muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;padding-left:2px;font-size:.68rem}#clips-grid{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.clip-btn{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;text-align:center;transition:background var(--transition), border-color var(--transition), transform .1s;-webkit-tap-highlight-color:transparent;font-size:.88rem;font-weight:500;line-height:1.3;font-family:var(--font-body);padding:14px 10px}.clip-btn:active{transform:scale(.95)}.clip-btn.dragging{opacity:.4}.clip-btn.drag-over{border-color:var(--accent);background:var(--bg3)}.clip-btn:hover{background:var(--bg3);border-color:var(--accent)}.clip-btn.playing{background:var(--btn-play);border-color:var(--accent);color:var(--accent2)}.clip-btn.empty{color:var(--text-muted);cursor:default;background:0 0;border-style:dashed;font-size:.8rem}#birdie-timeline{-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain}.birdie-entry{align-items:flex-start;gap:10px;padding:8px 0;font-size:.82rem;display:flex;position:relative}.birdie-entry+.birdie-entry{border-top:1px solid var(--border)}.birdie-dot{background:#a855f7;border-radius:50%;flex-shrink:0;width:8px;height:8px;margin-top:5px}.birdie-time{font-family:var(--font-mono);color:var(--text-muted);white-space:nowrap;min-width:52px;margin-top:1px;font-size:.7rem}.birdie-desc{color:var(--text);flex:1;line-height:1.4}.btn{border-radius:var(--radius-sm);cursor:pointer;font-size:.88rem;font-weight:500;font-family:var(--font-body);transition:opacity var(--transition), transform var(--transition);border:none;padding:10px 16px}.btn:active{opacity:.8;transform:scale(.97)}.btn-primary{background:var(--accent);color:var(--bg)}.btn-danger{background:color-mix(in srgb, var(--danger) 18%, var(--bg3));color:var(--danger);border:1px solid color-mix(in srgb, var(--danger) 30%, transparent)}.btn-record{background:color-mix(in srgb, var(--accent2) 18%, var(--bg3));color:var(--accent2);border:1px solid color-mix(in srgb, var(--accent2) 30%, transparent)}.btn-record.recording{background:color-mix(in srgb, var(--danger) 18%, var(--bg3));color:var(--danger);border-color:color-mix(in srgb, var(--danger) 30%, transparent)}label{color:var(--text-muted);margin-bottom:5px;font-size:.82rem;display:block}input[type=password],input[type=text],input[type=file]{background:var(--bg3);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);width:100%;font-size:.9rem;font-family:var(--font-body);transition:border-color var(--transition);outline:none;padding:10px 12px}input[type=password]{font-size:1rem;font-family:var(--font-mono);padding:13px 14px}input[type=text]:focus,input[type=password]:focus{border-color:var(--accent)}input[type=password]::placeholder{color:var(--text-muted)}input[type=file]{cursor:pointer;padding:8px 12px}.section{border-bottom:1px solid var(--border);padding:20px 16px}.section-title{letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);font-size:.75rem;font-weight:600;font-family:var(--font-mono);margin-bottom:14px}.stack{flex-direction:column;gap:10px;display:flex}.row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.record-status{color:var(--text-muted);font-size:.8rem;font-family:var(--font-mono);min-height:1.2em;margin-top:10px}.clip-row{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-md);flex-wrap:wrap;align-items:center;gap:10px;padding:12px 14px;display:flex}.clip-row input{flex:1;min-width:130px}.theme-grid{grid-template-columns:repeat(2,1fr);gap:10px;display:grid}.theme-card{background:var(--bg3);border:2px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:border-color var(--transition), transform var(--transition);align-items:center;gap:10px;padding:14px 12px;display:flex}.theme-card:active{transform:scale(.97)}.theme-card.active{border-color:var(--accent)}.theme-swatch{border-radius:50%;flex-shrink:0;width:28px;height:28px}.theme-name{font-size:.88rem;font-weight:500}.theme-sub{color:var(--text-muted);font-size:.72rem;font-family:var(--font-mono)}.toast{border-radius:var(--radius-md);pointer-events:none;opacity:0;white-space:nowrap;z-index:99;padding:10px 20px;font-size:.88rem;font-weight:500;transition:opacity .2s,transform .2s;position:fixed;bottom:24px;left:50%;transform:translate(-50%)translateY(8px)}.toast.show{opacity:1;transform:translate(-50%)translateY(0)}.toast.ok{background:color-mix(in srgb, var(--live) 18%, var(--bg2));color:var(--live);border:1px solid color-mix(in srgb, var(--live) 30%, transparent)}.toast.err{background:color-mix(in srgb, var(--danger) 18%, var(--bg2));color:var(--danger);border:1px solid color-mix(in srgb, var(--danger) 30%, transparent)}.login-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);flex-direction:column;gap:16px;width:min(320px,90vw);padding:36px 28px;display:flex;box-shadow:0 8px 32px #0000004d}.login-title{text-align:center;font-size:1.3rem;font-weight:600}.login-sub{text-align:center;color:var(--text-muted);font-size:.8rem;font-family:var(--font-mono);letter-spacing:.05em}.login-btn{background:var(--accent);color:var(--bg);border-radius:var(--radius-sm);cursor:pointer;font-size:.95rem;font-weight:600;font-family:var(--font-body);transition:opacity var(--transition), transform var(--transition);border:none;padding:13px}.login-btn:active{opacity:.85;transform:scale(.98)}.err{color:var(--danger);text-align:center;background:color-mix(in srgb, var(--danger) 12%, transparent);border-radius:var(--radius-sm);padding:8px;font-size:.82rem}.log-list{flex-direction:column;gap:6px;padding:12px 16px;display:flex}.log-entry{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);align-items:baseline;gap:10px;padding:8px 12px;font-size:.85rem;display:flex}.log-time{font-family:var(--font-mono);color:var(--text-muted);white-space:nowrap;font-size:.72rem}.log-action{font-family:var(--font-mono);white-space:nowrap;background:color-mix(in srgb, var(--accent) 15%, transparent);color:var(--accent);border-radius:4px;padding:2px 6px;font-size:.72rem;font-weight:600}.log-action.login{background:color-mix(in srgb, var(--live) 15%, transparent);color:var(--live)}.log-action.login_failed,.log-action.delete{background:color-mix(in srgb, var(--danger) 15%, transparent);color:var(--danger)}.log-action.birdie{color:#a855f7;background:#a855f726}.log-detail{color:var(--text);flex:1}.empty-log{text-align:center;color:var(--text-muted);padding:40px 16px;font-size:.9rem}.summary-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);margin:16px;padding:20px;font-size:.9rem;line-height:1.6}.summary-card.empty{text-align:center;color:var(--text-muted)}.summary-label{font-family:var(--font-mono);color:#a855f7;text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;font-size:.72rem;font-weight:600}.date-nav{justify-content:center;align-items:center;gap:12px;padding:12px 16px;display:flex}.date-nav a{color:var(--accent);font-size:.85rem;text-decoration:none}.date-nav .current{font-family:var(--font-mono);color:var(--text-muted);font-size:.8rem}.section-label{font-family:var(--font-mono);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin:16px 16px 8px;font-size:.72rem;font-weight:600}.timeline{flex-direction:column;gap:6px;margin:0 16px 16px;display:flex}.timeline-entry{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);align-items:baseline;gap:10px;padding:8px 12px;font-size:.82rem;display:flex}.timeline-time{font-family:var(--font-mono);color:var(--text-muted);white-space:nowrap;font-size:.72rem}.timeline-detail{color:var(--text);flex:1}.stat-row{gap:12px;margin:0 16px;display:flex}.stat{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);text-align:center;flex:1;padding:12px}.stat-val{color:#a855f7;font-size:1.4rem;font-weight:600}.stat-label{color:var(--text-muted);font-size:.7rem;font-family:var(--font-mono);margin-top:4px}@keyframes spin{to{transform:rotate(360deg)}}