*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#1a2416;color:#e9f1e9;overflow-x:hidden}.app{min-height:100vh;padding:1rem 1rem 3rem}.app.loading,.app.error{display:flex;align-items:center;justify-content:center;height:100vh;font-size:1.5rem;color:#a8c8a8}.header{display:flex;justify-content:space-between;align-items:center;padding:1rem 0 1.5rem}.header h1{font-size:2rem;color:#c8e0c8;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.header h1 span{color:#6b8e6b}.camera-grid{display:grid;grid-template-columns:repeat(2,minmax(0,720px));gap:1.5rem;max-width:1500px;margin:0 auto;justify-content:center}.camera-panel{background:#232f20;border-radius:12px;overflow:hidden;border:2px solid #3d5c3d;box-shadow:0 4px 12px #0000004d}.camera-header{background:linear-gradient(135deg,#3d5c3d,#4a6b4a);padding:.75rem 1rem;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #3d5c3d}.grid-modal{background:#1c2718;border:1px solid #3d5c3d;border-radius:12px;width:90vw;max-height:90vh;box-shadow:0 8px 32px #00000080;display:flex;flex-direction:column;overflow:hidden}.grid-modal-header{background:linear-gradient(135deg,#3d5c3d,#4a6b4a);padding:.75rem 1.25rem;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:1.1rem;color:#d8ecd8;border-bottom:2px solid #3d5c3d}.grid-modal-content{flex:1;overflow-y:auto;padding:1.25rem;background:#151d12}.thumbnail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:.5rem}.grid-day-section{margin-bottom:2rem}.grid-day-header{display:flex;align-items:baseline;gap:1rem;border-bottom:1px solid #3d5c3d;margin-bottom:.75rem;padding-bottom:.25rem}.grid-day-title{color:#7aa87a;font-size:1rem}.day-nav-btn{background:none;border:none;color:#5a7d5a;cursor:pointer;padding:0;display:flex;align-items:center;line-height:1;margin-left:auto}.day-nav-btn:hover{color:#7aa87a}.grid-item{position:relative;cursor:pointer;border-radius:4px;overflow:hidden;border:1px solid #3d5c3d;transition:all .2s;background:#1c2718}.grid-item:hover{border-color:#7aa87a;transform:scale(1.02);z-index:2;box-shadow:0 4px 12px #0006}.grid-item img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}.grid-item-time-overlay{position:absolute;bottom:0;left:0;right:0;padding:.25rem .5rem;background:linear-gradient(transparent,#000000b3);color:#fff;font-size:.75rem;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.8)}.grid-loading{text-align:center;padding:3rem;color:#5a7a5a;font-style:italic}.grid-show-more{display:flex;justify-content:center;padding:1.5rem 0 2rem}.show-more-btn{background:#2a3d26;color:#a8c8a8;border:1px solid #3a5a36;border-radius:6px;padding:.6rem 2rem;font-size:.9rem;cursor:pointer;transition:background .15s,color .15s}.show-more-btn:hover:not(:disabled){background:#3a5a36;color:#c8e0c8}.show-more-btn:disabled{opacity:.5;cursor:default}.camera-selector-panel{background:#1a2416;border-bottom:1px solid #3d5c3d;padding:.6rem 1rem;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}.show-all-inline{margin-left:auto;padding:.3rem 1rem;font-size:.8rem}.camera-selector-item{background:#232f20;color:#8ab08a;border:1px solid #3d5c3d;border-radius:5px;padding:.3rem .65rem;font-size:.8rem;cursor:pointer;transition:all .15s;text-transform:capitalize}.camera-selector-item:hover{border-color:#5a7a5a;color:#a8c8a8}.camera-selector-item.selected{background:#3d5c3d;border-color:#7aa87a;color:#d8ecd8}.multi-cam-header{display:grid;gap:.5rem;padding:.5rem 0 .4rem;position:sticky;top:0;background:#151d12;z-index:2;border-bottom:1px solid #3d5c3d;margin-bottom:.5rem}.multi-cam-header-name{font-size:.75rem;font-weight:600;color:#7aa87a;text-transform:uppercase;letter-spacing:.04em;text-align:center;padding:.2rem 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.multi-cam-row{display:grid;gap:.5rem;margin-bottom:.4rem;align-items:start}.multi-cam-time{font-size:.7rem;color:#5a7a5a;padding-top:.3rem;text-align:right;white-space:nowrap}.multi-cam-empty{aspect-ratio:16/9;background:#1c2718;border-radius:4px;border:1px solid #2a3d27}.camera-header-right{display:flex;align-items:center;gap:.5rem}.capture-cam-btn{background:none;border:none;color:#c8e0c8;cursor:pointer;padding:.15rem;display:flex;align-items:center;opacity:.85;transition:opacity .3s,color .2s;flex-shrink:0}.capture-cam-btn:hover:not(:disabled){opacity:1;color:#fff}.capture-cam-btn:disabled{cursor:default}.capture-cam-btn.capturing{opacity:.25;color:#7aa87a}.camera-name{font-weight:600;font-size:1.1rem;text-transform:uppercase;letter-spacing:.05em;color:#d8ecd8}.timestamp{font-size:.9rem;color:#d8ecd8;opacity:.9}.timestamp-short{display:none}.main-image-container{position:relative;display:flex;align-items:center;justify-content:center;background:#151d12;aspect-ratio:16/9;max-height:50vh}.nav-button{position:absolute;top:0;bottom:0;width:3rem;background:transparent;border:none;cursor:pointer;opacity:0;transition:opacity .2s,background .2s;z-index:5;display:flex;align-items:center;justify-content:center}.main-image-container:hover .nav-button:not(:disabled){opacity:1}.nav-button:hover:not(:disabled){background:#ffffff1a}.nav-button:disabled{cursor:default}.nav-left{left:0}.nav-right{right:0}.nav-chevron{display:block;width:12px;height:12px;border-top:3px solid rgba(255,255,255,.8);border-right:3px solid rgba(255,255,255,.8);transition:border-color .2s}.nav-left .nav-chevron{transform:rotate(-135deg);margin-left:4px}.nav-right .nav-chevron{transform:rotate(45deg);margin-right:4px}.nav-button:hover:not(:disabled) .nav-chevron{border-color:#fff}.nav-button:disabled .nav-chevron{border-color:#fff3}.main-image{max-width:100%;max-height:100%;object-fit:contain}.main-image.clickable{cursor:pointer;transition:opacity .2s}.main-image.clickable:hover{opacity:.9}.no-image{color:#5a7a5a;font-size:1.2rem}.timeline-container{background:#1c2718;border-top:1px solid #3d5c3d;padding:.75rem;overflow-x:auto}.timeline{display:flex;gap:.5rem;min-width:min-content}.thumbnail-button{flex-shrink:0;background:none;border:2px solid transparent;border-radius:6px;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;transition:border-color .2s,transform .2s}.thumbnail-button:hover{border-color:#4a6b4a}.thumbnail-button.selected{border-color:#7aa87a;transform:scale(1.05);box-shadow:0 2px 8px #7aa87a66}.thumbnail{width:100px;height:56px;object-fit:cover;border-radius:4px}.thumbnail-time{font-size:.65rem;color:#7a9a7a;margin-top:.25rem}.thumbnail-button.selected .thumbnail-time{color:#7aa87a}.status-bar{background:#232f20;padding:.5rem 1rem;text-align:center;font-size:.8rem;color:#5a7a5a;border-top:1px solid #3d5c3d}.timeline-container::-webkit-scrollbar{height:8px}.timeline-container::-webkit-scrollbar-track{background:#151d12;border-radius:4px}.timeline-container::-webkit-scrollbar-thumb{background:#3d5c3d;border-radius:4px}.timeline-container::-webkit-scrollbar-thumb:hover{background:#4a6b4a}.header-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.header-capture-btn{background:none;border:1px solid #3d5c3d;border-radius:6px;padding:.45rem .75rem;cursor:pointer;color:#a8c8a8;display:flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:500;min-width:11rem;transition:border-color .2s,background .2s,color .2s}.header-capture-btn:hover:not(:disabled){border-color:#5a7a5a;background:#2d3d28;color:#d8ecd8}.header-capture-btn:disabled{cursor:default}.header-capture-btn.capturing{opacity:.4}.menu-container{position:relative}.hamburger-btn{background:none;border:1px solid #3d5c3d;border-radius:6px;padding:.45rem .55rem;cursor:pointer;display:flex;flex-direction:column;gap:4px;align-items:center;transition:border-color .2s,background .2s}.hamburger-btn span{display:block;width:18px;height:2px;background:#a8c8a8;border-radius:2px;transition:background .2s}.hamburger-btn:hover{border-color:#5a7a5a;background:#2d3d28}.hamburger-btn:hover span{background:#d8ecd8}.dropdown-menu{position:absolute;top:calc(100% + .5rem);right:0;background:#232f20;border:1px solid #3d5c3d;border-radius:8px;box-shadow:0 4px 16px #00000080;min-width:160px;overflow:hidden;z-index:200}.dropdown-menu button{display:block;width:100%;background:none;border:none;border-bottom:1px solid #2a3d26;color:#a8c8a8;padding:.7rem 1rem;font-size:.85rem;cursor:pointer;text-align:left;transition:background .15s,color .15s}.dropdown-menu button:last-child{border-bottom:none}.dropdown-menu button:hover:not(:disabled){background:#2d3d28;color:#d8ecd8}.dropdown-menu button:disabled{opacity:.6;cursor:not-allowed}.dropdown-menu button.active{color:#d8ecd8;background:#3d5c3d}.lightbox{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:1000;cursor:pointer;padding:2rem}.lightbox-content{max-width:95vw;max-height:95vh;display:flex;flex-direction:column;align-items:center;cursor:default}.lightbox-image-container{position:relative;display:flex;align-items:center;justify-content:center}.lightbox-nav{position:absolute;top:0;bottom:0;width:3rem;background:transparent;border:none;cursor:pointer;opacity:.4;transition:opacity .2s,background .2s;z-index:5;display:flex;align-items:center;justify-content:center}.lightbox-image-container:hover .lightbox-nav:not(:disabled){opacity:1}.lightbox-nav:hover:not(:disabled){background:#ffffff1a}.lightbox-nav:disabled{cursor:default}.lightbox-prev{left:0}.lightbox-prev .nav-chevron{transform:rotate(-135deg);margin-left:4px}.lightbox-next{right:0}.lightbox-next .nav-chevron{transform:rotate(45deg);margin-right:4px}.lightbox-content img{max-width:100%;max-height:calc(95vh - 9rem);object-fit:contain;border-radius:8px;box-shadow:0 8px 32px #00000080}.lightbox-info{display:flex;gap:2rem;margin-top:1rem;color:#a8c8a8;font-size:.9rem}.ltl-wrapper{width:100%;max-width:95vw;padding:.5rem .75rem 1.25rem;cursor:default}.ltl-label-row{display:flex;justify-content:space-between;font-size:.7rem;color:#5a7a5a;margin-bottom:.5rem}.ltl-date{color:#4a6a4a}.ltl-track{position:relative;height:4px;background:#2d402a;border-radius:2px;margin:0 4px;overflow:visible}.ltl-indicator{position:absolute;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none}.ltl-indicator-dot{width:12px;height:12px;border-radius:50%;background:#7aa87a;border:2px solid #c8e0c8;flex-shrink:0}.ltl-indicator-time{position:absolute;top:calc(100% + 6px);font-size:.68rem;color:#a8c8a8;white-space:nowrap}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;display:flex;align-items:center;justify-content:center;z-index:1000}.battery-modal{background:#232f20;border:1px solid #3d5c3d;border-radius:12px;width:min(480px,90vw);box-shadow:0 8px 32px #00000080;overflow:hidden}.battery-modal-header{background:linear-gradient(135deg,#3d5c3d,#4a6b4a);padding:.75rem 1rem;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:1rem;color:#d8ecd8}.modal-close{background:none;border:none;color:#d8ecd8;cursor:pointer;font-size:1rem;opacity:.7;line-height:1;padding:.1rem .25rem}.modal-close:hover{opacity:1}.battery-list{padding:1rem;display:flex;flex-direction:column;gap:.75rem}.battery-loading,.battery-error{text-align:center;color:#5a7a5a;padding:1rem 0;font-size:.9rem}.battery-error{color:#c87070}.battery-row{display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:.75rem}.battery-cam-name{font-size:.85rem;color:#c8e0c8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize}.battery-bar-wrap{height:8px;background:#1a2416;border-radius:4px;overflow:hidden;border:1px solid #3d5c3d}.battery-bar-fill{height:100%;border-radius:4px;transition:width .4s ease}.battery-pct{font-size:.8rem;font-weight:600;min-width:3.5rem;text-align:right;white-space:nowrap}.charging-icon{font-size:.75rem}.settings-modal{background:#232f20;border:1px solid #3d5c3d;border-radius:12px;width:min(520px,92vw);max-height:80vh;display:flex;flex-direction:column;box-shadow:0 8px 32px #00000080;overflow:hidden}.settings-section-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#5a7a5a;padding:.75rem 1rem .25rem}.settings-cam-table{flex:1;overflow-y:auto;padding:0 1rem .5rem}.settings-cam-header{display:grid;grid-template-columns:1fr 5rem 5rem;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#5a7a5a;padding:.3rem 0 .4rem;border-bottom:1px solid #2a3d26;text-align:center}.settings-cam-header span:first-child{text-align:left}.settings-cam-row{display:grid;grid-template-columns:1fr 5rem 5rem;align-items:center;padding:.45rem 0;border-bottom:1px solid #1e2e1a;text-align:center}.settings-cam-row:last-child{border-bottom:none}.settings-cam-row .battery-cam-name{text-align:left}.settings-cam-row input[type=checkbox]{width:1rem;height:1rem;accent-color:#7aa87a;cursor:pointer}.settings-footer{display:flex;justify-content:flex-end;align-items:center;gap:.75rem;padding:.75rem 1rem;border-top:1px solid #2a3d26}.settings-saved{font-size:.8rem;color:#7aa87a}.settings-save-btn{background:#3d5c3d;color:#d8ecd8;border:1px solid #5a7a5a;border-radius:6px;padding:.45rem 1.25rem;font-size:.85rem;cursor:pointer;transition:background .15s}.settings-save-btn:hover:not(:disabled){background:#4a6b4a}.settings-save-btn:disabled{opacity:.5;cursor:default}.camera-panel.reorder-mode{border:2px dashed #7aa87a;cursor:grab}.camera-panel.reorder-mode:active{cursor:grabbing}.camera-panel.dragging{opacity:.35}.drag-handle{font-size:1.1rem;color:#7aa87a;margin-right:.5rem;cursor:grab;-webkit-user-select:none;user-select:none;flex-shrink:0}@media (max-width: 900px){.camera-grid{grid-template-columns:1fr}.header h1{font-size:1.5rem}.thumbnail{width:80px;height:45px}.timestamp-long{display:none}.timestamp-short{display:inline}}@media (max-width: 480px){.header h1{font-size:1.2rem}.header-capture-btn{font-size:.8rem;padding:.45rem .65rem}}