:root{color-scheme:light dark;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{margin:0;background:#14161a;color:#f2f4f7}.app{max-width:640px;margin:0 auto;padding:1.5rem 1rem}.app-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}.app-header h1{font-size:1.4rem;margin:0}.app-header-right{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:.6rem}.user-name{font-size:.85rem;color:#c7cdd6}.btn-logout{border:none;border-radius:8px;padding:.3rem .7rem;font-size:.8rem;font-weight:600;cursor:pointer;background:#2b3038;color:#f2f4f7}.btn-logout:hover{filter:brightness(1.1)}.login-panel{text-align:left}.login-title{margin:0 0 1rem;font-size:1.15rem;text-align:center}.login-form{display:flex;flex-direction:column;gap:.9rem}.login-field{display:flex;flex-direction:column;gap:.35rem;font-size:.85rem;color:#c7cdd6}.login-field input{padding:.6rem .7rem;border-radius:8px;border:1px solid #333a44;background:#14161a;color:#f2f4f7;font-size:.95rem}.login-field input:focus{outline:none;border-color:#4c8bf5}.btn:disabled,.btn-logout:disabled{opacity:.6;cursor:not-allowed;filter:none}.connection-badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;padding:.25rem .6rem;border-radius:999px;background:#232830}.connection-badge .dot{width:.55rem;height:.55rem;border-radius:50%;background:#8a929e}.status-connected .dot{background:#34c759}.status-connecting .dot,.status-reconnecting .dot{background:#fc0}.status-disconnected .dot{background:#ff3b30}.volume-slider{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem}.volume-slider input[type=range]{width:120px}.volume-value{min-width:3.5ch;text-align:right}.volume-saving{color:#8a929e;font-size:.75rem}.panel{background:#1c2027;border-radius:12px;padding:1.25rem;margin-bottom:1rem;text-align:center}.rings{display:flex;flex-direction:column;gap:1rem}.ring-card{background:#1c2027;border-radius:12px;overflow:hidden;display:flex;flex-direction:column}.ring-snapshot{width:100%;aspect-ratio:4 / 3;object-fit:cover;background:#000}.ring-meta{display:flex;align-items:baseline;justify-content:space-between;padding:.75rem 1rem 0}.ring-title{font-weight:600}.ring-time{font-size:.85rem;color:#8a929e}.ring-actions,.call-actions{display:flex;gap:.75rem;padding:1rem}.btn{flex:1;padding:.7rem 1rem;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;background:#2b3038;color:#f2f4f7}.btn:hover{filter:brightness(1.1)}.btn-accept{background:#34c759;color:#04210d}.btn-decline{background:#ff3b30;color:#2a0503}.call-view{background:#000;border-radius:12px;overflow:hidden}.call-video{width:100%;aspect-ratio:4 / 3;object-fit:contain;background:#000;display:block}.status-text{margin:0 0 1rem}.status-text.muted{color:#8a929e}.status-text.error{color:#ff6b60}.nav-bar{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.25rem;border-bottom:1px solid #2b3038;padding-bottom:.5rem}.nav-item{position:relative;border:none;background:transparent;color:#c7cdd6;font-size:.9rem;font-weight:600;padding:.45rem .75rem;border-radius:8px;cursor:pointer}.nav-item:hover{background:#232830}.nav-item-active{background:#2b3038;color:#f2f4f7}.nav-badge{margin-left:.4rem;background:#ff3b30;color:#fff;border-radius:999px;font-size:.7rem;padding:.05rem .4rem}.page{display:flex;flex-direction:column;gap:1rem}.page-title{margin:0;font-size:1.15rem}.filter-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.6rem;background:#1c2027;border-radius:12px;padding:.85rem}.filter-field{display:flex;flex-direction:column;gap:.25rem;font-size:.75rem;color:#8a929e}.filter-field input,.filter-field select{padding:.4rem .5rem;border-radius:8px;border:1px solid #333a44;background:#14161a;color:#f2f4f7;font-size:.85rem}.filter-field input:focus,.filter-field select:focus{outline:none;border-color:#4c8bf5}.filter-actions{display:flex;gap:.4rem}.btn-sm{flex:0 0 auto;padding:.45rem .8rem;font-size:.8rem}.btn-ghost{background:transparent;border:1px solid #333a44}.btn-page{flex:0 0 auto;padding:.4rem .9rem;font-size:.85rem}.table-wrap{overflow-x:auto;border-radius:12px;background:#1c2027}.data-table{width:100%;border-collapse:collapse;font-size:.85rem}.data-table th,.data-table td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid #232830;vertical-align:middle}.data-table th{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:#8a929e}.data-table tr:last-child td{border-bottom:none}.table-msg{text-align:center;color:#8a929e;padding:1.2rem}.cell-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78rem;color:#c7cdd6}.detail-row td{background:#14161a}.exception-detail{margin:0;padding:.6rem;max-height:18rem;overflow:auto;white-space:pre-wrap;word-break:break-word;font-size:.75rem;color:#ffb4ad}.thumb{width:64px;height:48px;object-fit:cover;border-radius:6px;background:#000;display:block}.thumb-loading{background:#232830}.thumb-empty{display:flex;align-items:center;justify-content:center;color:#6a727d;font-size:.7rem;background:#232830}.badge{display:inline-block;padding:.1rem .5rem;border-radius:999px;font-size:.72rem;font-weight:600;background:#2b3038;color:#c7cdd6}.badge-accepted,.badge-completed{background:#16341f;color:#4ade80}.badge-rang{background:#33301a;color:#fc0}.badge-missed,.badge-cancelled,.badge-error,.badge-critical{background:#3a1614;color:#ff6b60}.badge-warning{background:#33301a;color:#fc0}.badge-system{margin-left:.5rem;background:#232830;color:#8a929e}.pagination{display:flex;align-items:center;justify-content:center;gap:.9rem;font-size:.85rem;color:#c7cdd6}.subpanel{background:#1c2027;border-radius:12px;padding:1rem;display:flex;flex-direction:column;gap:.8rem}.subpanel-head{display:flex;align-items:center;justify-content:space-between}.subpanel-title{margin:0;font-size:1rem}.row-actions{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}.row-actions input{padding:.35rem .5rem;border-radius:8px;border:1px solid #333a44;background:#14161a;color:#f2f4f7;font-size:.8rem}.role-editor{border:1px solid #2b3038;border-radius:10px;padding:.8rem;display:flex;flex-direction:column;gap:.7rem}.role-list{display:flex;flex-direction:column;gap:.6rem}.role-card{border:1px solid #2b3038;border-radius:10px;padding:.8rem;display:flex;flex-direction:column;gap:.6rem}.role-card-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.role-name{font-weight:600}.role-perms{font-size:.8rem;color:#8a929e}.perm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.5rem}.perm-item{display:flex;gap:.5rem;align-items:flex-start;font-size:.8rem;cursor:pointer}.perm-item span{display:flex;flex-direction:column}.perm-key{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#f2f4f7}.perm-desc{color:#8a929e;font-size:.72rem}.app{max-width:900px}.live-view-bar{display:flex;align-items:center;gap:.9rem;padding:.9rem 1rem;background:#1c2027;border-radius:12px;margin-bottom:1rem}.live-view-bar .btn{flex:0 0 auto}.call-view{position:relative}.recording-indicator{position:absolute;top:.6rem;left:.6rem;display:flex;align-items:center;gap:.4rem;padding:.25rem .6rem;border-radius:999px;background:#0009;color:#ff6b60;font-size:.78rem;font-weight:600;font-variant-numeric:tabular-nums}.recording-dot{width:.6rem;height:.6rem;border-radius:50%;background:#ff3b30;animation:recording-pulse 1.2s ease-in-out infinite}@keyframes recording-pulse{0%,to{opacity:1}50%{opacity:.3}}.link-button{background:none;border:none;padding:0;color:#6aa3ff;font:inherit;cursor:pointer;text-align:left}.link-button:hover{text-decoration:underline}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;padding:1rem;z-index:50}.modal{background:#1c2027;border-radius:12px;max-width:720px;width:100%;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.9rem 1rem;border-bottom:1px solid #232830}.modal-header h3{margin:0;font-size:.95rem}.modal-body{padding:1rem;overflow:auto}.page-header-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}.telemetry-controls{display:flex;align-items:center;gap:.75rem}.telemetry-controls .toggle{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;cursor:pointer;-webkit-user-select:none;user-select:none}.telemetry-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem;margin:1rem 0}.telemetry-stat{display:flex;flex-direction:column;gap:.15rem;padding:.6rem .7rem;background:#1a1d23;border:1px solid #232830;border-radius:8px}.telemetry-stat-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:#98a2b3}.telemetry-stat-value{font-size:1rem;font-weight:600}.telemetry-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}.telemetry-chart{margin:0;padding:.6rem .7rem .4rem;background:#1a1d23;border:1px solid #232830;border-radius:8px}.telemetry-chart-title{display:flex;align-items:baseline;gap:.4rem;font-size:.8rem;font-weight:600;margin-bottom:.3rem}.telemetry-chart-latest{margin-left:auto;font-variant-numeric:tabular-nums}.telemetry-chart-svg{width:100%;height:auto;display:block}.telemetry-grid{stroke:#2a2f38;stroke-width:1}.telemetry-axis-label{fill:#98a2b3;font-size:9px;font-variant-numeric:tabular-nums}.recording-video{width:100%;border-radius:8px;background:#000}.badge-source-motion{background:#1a2c3a;color:#6aa3ff}.badge-source-upload,.badge-source-pir,.badge-source-camera{background:#232830;color:#c7cdd6}.badge-status-ready{background:#16341f;color:#4ade80}.badge-status-pending{background:#33301a;color:#fc0}.badge-status-failed{background:#3a1614;color:#ff6b60}.settings-form{display:flex;flex-direction:column;gap:.9rem;max-width:420px;background:#1c2027;border-radius:12px;padding:1rem}.settings-form .filter-field span{color:#c7cdd6}.checkbox-field{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:#c7cdd6}.checkbox-field input{width:1rem;height:1rem}.motion-toast-stack{position:fixed;right:1rem;bottom:1rem;display:flex;flex-direction:column;gap:.6rem;z-index:60;max-width:22rem}.motion-toast{display:flex;gap:.7rem;padding:.7rem;background:#1c2027;border:1px solid #2b3038;border-radius:12px;box-shadow:0 8px 24px #0006}.motion-toast-thumb{width:72px;height:54px;object-fit:cover;border-radius:6px;background:#000;flex:0 0 auto}.motion-toast-body{display:flex;flex-direction:column;gap:.3rem;min-width:0}.motion-toast-title{font-weight:600;font-size:.9rem}.motion-toast-meta{font-size:.75rem;color:#8a929e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.motion-toast-actions{display:flex;gap:.4rem;margin-top:.2rem}