:root{--primary:#1565c0;--primary-dark:#0056cc;--primary-light:rgba(21,101,192,.1);--secondary:#5ac8fa;--accent:#ff9500;--dark:#1c1c1e;--text-primary:#000;--text-secondary:#6d6d70;--surface:#fff;--background:#f2f2f7;--card-background:#fff;--border:#e5e5ea;--success:#34c759;--danger:#ff3b30;--warning:#ff9500;--light-gray:#f2f2f7;--gray:#8e8e93;--light:#f8f9fa;--radius-small:8px;--radius-medium:12px;--radius-large:16px;--shadow-small:0 1px 3px 0 rgba(0,0,0,.1);--shadow-medium:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);--shadow-large:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)}body{background-color:var(--background);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Roboto,Segoe UI,sans-serif;margin:0;padding-top:60px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.header{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background-color:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow-small);height:60px;justify-content:space-between;left:0;padding:0 16px;position:fixed;right:0;top:0;z-index:1000}.header,.header-logo{align-items:center;display:flex}.header-logo{color:var(--text-primary);font-size:18px;font-weight:600}.header-logo i{color:var(--primary);margin-right:8px}.menu-btn{background:none;border:none;color:var(--text-primary);cursor:pointer;font-size:24px;height:48px;width:48px}.mobile-nav{background-color:var(--surface);box-shadow:var(--shadow-medium);left:0;position:fixed;right:0;top:60px;transform:translateY(-150%);transition:transform .3s ease-in-out;z-index:999}.mobile-nav.active{transform:translateY(0)}.nav-link{border-bottom:1px solid var(--border);color:var(--text-primary);display:block;padding:16px;text-decoration:none}.nav-link i{margin-right:12px}.nav-link.active{color:var(--primary);font-weight:600}.card,.main-container{padding:16px}.card{background-color:var(--card-background);border:1px solid var(--border);border-radius:var(--radius-small);box-shadow:var(--shadow-small);margin-bottom:16px}.card-title{align-items:center;color:var(--text-primary);display:flex;font-size:16px;font-weight:600;margin:0 0 16px}.card-title i{color:var(--primary);margin-right:8px}.quick-start-button{align-items:center;background-color:var(--primary);border-radius:var(--radius-small);box-shadow:var(--shadow-medium);color:#fff;display:flex;font-size:16px;font-weight:500;justify-content:center;min-height:48px;padding:16px;text-align:center;text-decoration:none;transition:background-color .2s}.quick-start-button i{margin-right:12px}.quick-start-button:hover{background-color:var(--primary-dark)}.accordion .accordion-header{align-items:center;cursor:pointer;display:flex;justify-content:space-between}.accordion .card-title{margin-bottom:0}.accordion .accordion-icon{transition:transform .3s}.accordion.active .accordion-icon{transform:rotate(180deg)}.accordion .accordion-content{max-height:0;overflow:hidden;padding-top:0;transition:max-height .3s ease-out}.accordion.active .accordion-content{max-height:1000px;padding-top:16px}.form-group{margin-bottom:16px}.form-group label{display:block;font-size:14px;font-weight:500;margin-bottom:8px}.form-group input[type=text]{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-small);box-sizing:border-box;color:var(--text-primary);font-size:14px;padding:12px;width:100%}.form-group input[type=text]:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);outline:none}.btn-primary{background-color:var(--success);box-shadow:var(--shadow-medium);font-size:16px;font-weight:600;padding:14px}.btn-primary,.btn-secondary{border:none;border-radius:var(--radius-small);color:#fff;cursor:pointer;display:block;min-height:48px;width:100%}.btn-secondary{background-color:var(--gray);box-shadow:var(--shadow-small);font-size:14px;padding:12px}.search-container{display:flex;margin-bottom:16px}.search-container input{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-small) 0 0 var(--radius-small);color:var(--text-primary);flex-grow:1;font-size:14px;padding:12px;transition:border-color .2s ease,box-shadow .2s ease}.search-container input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(21,101,192,.1);outline:none}.search-container input::placeholder{color:var(--text-secondary);opacity:.7}.search-container button{align-items:center;background-color:var(--primary);border:1px solid var(--primary);border-radius:0 var(--radius-small) var(--radius-small) 0;color:#fff;cursor:pointer;display:flex;justify-content:center;min-width:48px;padding:0 16px;transition:background-color .2s ease,transform .1s ease}.search-container button:hover{background-color:rgba(21,101,192,.9)}.search-container button:active{transform:scale(.95)}.event-list p{color:var(--text-secondary);padding:20px 0;text-align:center}.event-item{align-items:center;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;padding:12px 0}.event-item:last-child{border-bottom:none}.event-item-info{display:flex;flex-direction:column;gap:4px}.event-item-info strong{color:var(--text-primary);font-weight:500}.event-item-info small{color:var(--text-secondary);font-size:12px}.btn-details{background:none;border:none;color:var(--primary);cursor:pointer;font-size:18px;min-height:48px;min-width:48px;padding:12px}.camera-status-card .status-indicator{align-items:center;background-color:var(--light);border:1px solid var(--border);border-radius:var(--radius-small);display:flex;margin-bottom:12px;padding:12px}.status-indicator i{color:var(--primary);margin-right:8px}.quick-actions-grid{display:flex;flex-direction:column;gap:12px}.quick-action{align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-medium);box-shadow:var(--shadow-small);cursor:pointer;display:flex;padding:16px;transition:all .2s ease}.quick-action:active{background:var(--light);transform:scale(.98)}.action-icon{align-items:center;background:var(--primary);border-radius:var(--radius-medium);box-shadow:var(--shadow-small);color:#fff;display:flex;font-size:20px;height:48px;justify-content:center;margin-right:16px;width:48px}.action-text{flex:1}.action-title{color:var(--text-primary);font-size:16px;font-weight:600;margin-bottom:4px}.action-desc{color:var(--text-secondary);font-size:14px}.action-arrow{color:var(--gray);font-size:16px}.footer{color:var(--text-secondary);font-size:12px;padding:20px 16px;text-align:center}