:root{--bg-gradient:radial-gradient(circle at 50% 0%, #11131e 0%, #08090d 100%);--panel-bg:#0e101ab3;--card-bg:#16192999;--card-bg-hover:#1c2035cc;--card-bg-sec:#1c203580;--border-color:#ffffff14;--border-focus:#6366f166;--primary:#6366f1;--primary-hover:#4f46e5;--primary-glow:#6366f140;--success:#10b981;--success-hover:#059669;--success-glow:#10b98133;--danger:#ef4444;--danger-hover:#dc2626;--danger-glow:#ef444433;--text-main:#f3f4f6;--text-muted:#9ca3af;--text-dark:#6b7280;--font-display:"Outfit", sans-serif;--font-sans:"Inter", sans-serif;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:12px;--spacing-lg:16px;--spacing-xl:24px;--spacing-xxl:36px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--shadow-sm:0 2px 8px #0003;--shadow-md:0 8px 24px #0000004d;--shadow-lg:0 16px 40px #0006;--shadow-glow:0 0 20px #6366f126}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background:var(--bg-gradient);color:var(--text-main);background-color:#08090d;min-height:100vh;overflow-x:hidden}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#08090d80}::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff26}#root{flex-direction:column;min-height:100vh;display:flex}.app-container{flex-direction:column;min-height:100vh;display:flex;position:relative}.app-header{padding:var(--spacing-lg) var(--spacing-xl);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-color);z-index:100;background:#08090d99;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.logo-section{align-items:center;gap:var(--spacing-sm);display:flex}.logo-icon{filter:drop-shadow(0 0 10px var(--primary-glow));font-size:26px}.app-title{font-family:var(--font-display);background:linear-gradient(135deg,#fff 0%,#818cf8 100%);-webkit-text-fill-color:transparent;letter-spacing:-.5px;-webkit-background-clip:text;font-size:22px;font-weight:800}.app-badge{color:#818cf8;text-transform:uppercase;margin-left:var(--spacing-sm);letter-spacing:.5px;background:#6366f11a;border:1px solid #6366f133;border-radius:5px;padding:3px 8px;font-size:11px;font-weight:700}.header-meta{align-items:center;gap:var(--spacing-md);display:flex}.app-grid{gap:var(--spacing-xl);padding:var(--spacing-xl);flex:1;grid-template-columns:1.4fr 1fr;width:100%;max-width:1600px;margin:0 auto;display:grid}@media (width<=1024px){.app-grid{grid-template-columns:1fr}}.video-panel,.controls-panel{gap:var(--spacing-lg);flex-direction:column;display:flex}.glass-card{background:var(--panel-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-xl);box-shadow:var(--shadow-md);transition:transform .3s,box-shadow .3s}.glass-card:hover{box-shadow:var(--shadow-lg)}.card-title-row{margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;display:flex}.card-title{font-family:var(--font-display);color:var(--text-main);align-items:center;gap:var(--spacing-sm);font-size:18px;font-weight:700;display:flex}.camera-select-row{gap:var(--spacing-sm);margin-bottom:var(--spacing-md);align-items:center;display:flex}.select-container{flex:1;position:relative}.select-input{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-md);width:100%;color:var(--text-main);padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;appearance:none;outline:none;font-size:13px;transition:all .2s}.select-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-glow)}.refresh-btn{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-main);padding:var(--spacing-sm);cursor:pointer;justify-content:center;align-items:center;transition:all .2s;display:flex}.refresh-btn:hover:not(:disabled){background:var(--card-bg-hover);border-color:var(--primary-hover)}.refresh-btn:disabled{opacity:.5;cursor:not-allowed}.viewport-container{border-radius:var(--radius-lg);border:1px solid var(--border-color);aspect-ratio:16/9;background:#040508;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 40px #000c}.live-feed{object-fit:cover;width:100%;height:100%}.live-feed.recording{filter:brightness(.85)contrast(1.05)}.rec-badge{top:var(--spacing-lg);left:var(--spacing-lg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);align-items:center;gap:var(--spacing-sm);color:#f87171;letter-spacing:.5px;background:#ef444426;border:1px solid #ef44444d;border-radius:9999px;padding:6px 14px;font-size:12px;font-weight:800;animation:1.5s infinite alternate pulse-glow;display:flex;position:absolute}.rec-dot{background-color:var(--danger);width:8px;height:8px;box-shadow:0 0 8px var(--danger);border-radius:50%;animation:1s infinite alternate pulse-blink}@keyframes pulse-glow{0%{box-shadow:0 0 5px #ef44441a}to{box-shadow:0 0 15px #ef44444d}}@keyframes pulse-blink{0%{opacity:.4}to{opacity:1}}.camera-placeholder{text-align:center;color:var(--text-dark);align-items:center;gap:var(--spacing-sm);flex-direction:column;display:flex}.camera-placeholder-icon{font-size:48px}.session-setup-grid{gap:var(--spacing-md);margin-bottom:var(--spacing-lg);grid-template-columns:1fr 1fr;display:grid}.input-container{flex-direction:column;gap:4px;display:flex}.input-container label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px;font-size:11px;font-weight:700}.number-input,.text-input{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-main);outline:none;padding:10px;font-size:14px;transition:all .2s}.number-input:focus,.text-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-glow)}.status-tracker-card{border-left:5px solid var(--primary);background:var(--panel-bg)}.status-tracker-card.recording{border-left-color:var(--danger);box-shadow:0 0 20px #ef44441a}.status-tracker-card.completed{border-left-color:var(--success);box-shadow:0 0 20px #10b9811a}.session-progress-row{margin-bottom:var(--spacing-md);justify-content:space-between;align-items:center;display:flex}.session-index-text{font-family:var(--font-display);font-size:18px;font-weight:800}.timer-text{color:var(--danger);letter-spacing:.5px;font-family:monospace;font-size:26px;font-weight:700}.timer-text.inactive{color:var(--text-dark)}.progress-bar-container{width:100%;height:6px;margin-bottom:var(--spacing-md);background:#ffffff0d;border-radius:99px;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg, var(--primary) 0%, #818cf8 100%);border-radius:99px;height:100%;transition:width .3s cubic-bezier(.4,0,.2,1)}.progress-bar-fill.recording{background:linear-gradient(90deg, var(--danger) 0%, #f87171 100%)}.progress-bar-fill.completed{background:linear-gradient(90deg, var(--success) 0%, #34d399 100%)}.session-status-badge{border-radius:6px;align-items:center;gap:6px;padding:4px 10px;font-size:12px;font-weight:700;display:inline-flex}.session-status-badge.idle{color:var(--text-muted);background:#ffffff0d}.session-status-badge.recording{color:#f87171;background:#ef44441a}.session-status-badge.completed{color:#34d399;background:#10b9811a}.button-group-row{gap:var(--spacing-md);margin-top:var(--spacing-lg);display:flex}.btn-primary{background:var(--primary);color:#fff;border-radius:var(--radius-md);padding:var(--spacing-md) var(--spacing-lg);font-family:var(--font-display);cursor:pointer;justify-content:center;align-items:center;gap:var(--spacing-sm);border:none;flex:1;font-size:15px;font-weight:700;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 4px 12px #6366f133}.btn-primary:hover:not(:disabled){background:var(--primary-hover);transform:translateY(-1px);box-shadow:0 6px 16px #6366f14d}.btn-primary:active:not(:disabled){transform:translateY(1px)}.btn-danger{background:var(--danger);color:#fff;border-radius:var(--radius-md);padding:var(--spacing-md) var(--spacing-lg);font-family:var(--font-display);cursor:pointer;justify-content:center;align-items:center;gap:var(--spacing-sm);border:none;flex:1;font-size:15px;font-weight:700;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 4px 12px #ef444433}.btn-danger:hover:not(:disabled){background:var(--danger-hover);transform:translateY(-1px);box-shadow:0 6px 16px #ef44444d}.btn-danger:active:not(:disabled){transform:translateY(1px)}.btn-primary:disabled,.btn-danger:disabled{color:var(--text-dark);box-shadow:none;cursor:not-allowed;background:#ffffff0d}.videos-sidebar{gap:var(--spacing-md);flex-direction:column;display:flex}.video-list{gap:var(--spacing-sm);flex-direction:column;max-height:380px;padding-right:4px;display:flex;overflow-y:auto}.video-item{background:var(--card-bg-sec);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);justify-content:space-between;align-items:center;gap:var(--spacing-md);animation:.3s ease-out slide-in;display:flex}@keyframes slide-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.video-item-info{flex:1;min-width:0}.video-item-title{color:var(--text-main);white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:600;overflow:hidden}.video-item-meta{gap:var(--spacing-sm);color:var(--text-muted);margin-top:2px;font-size:11px;display:flex}.video-item-actions{gap:var(--spacing-xs);display:flex}.btn-icon-action{border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-main);cursor:pointer;background:#ffffff0d;justify-content:center;align-items:center;padding:6px;transition:all .2s;display:flex}.btn-icon-action:hover{border-color:var(--primary);color:#818cf8;background:#6366f126}.btn-icon-action.delete:hover{border-color:var(--danger);color:#f87171;background:#ef444426}.scanned-info-container{border-radius:var(--radius-md);padding:var(--spacing-md);margin-top:var(--spacing-md);gap:var(--spacing-xs);background:#6366f10d;border:1px dashed #6366f14d;flex-direction:column;display:flex}.scanned-info-row{justify-content:space-between;font-size:12px;display:flex}.scanned-info-label{color:var(--text-muted)}.scanned-info-value{font-family:monospace;font-weight:700}.scanned-info-value.courier{color:#818cf8;text-transform:uppercase}.simulator-form{gap:var(--spacing-sm);display:flex}.simulator-input{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-main);padding:var(--spacing-sm) var(--spacing-md);outline:none;flex:1;font-size:13px}.simulator-input:focus{border-color:var(--primary)}.simulator-btn{background:var(--card-bg-sec);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--primary);padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;font-size:13px;font-weight:700;transition:all .2s}.simulator-btn:hover{background:var(--border-color);color:#818cf8}.logs-container{gap:var(--spacing-sm);flex-direction:column;max-height:200px;display:flex;overflow-y:auto}.log-row{color:var(--text-muted);border-bottom:1px solid #ffffff08;justify-content:space-between;padding-bottom:4px;font-size:11px;display:flex}.log-code-text{color:var(--text-main);font-family:monospace}.scan-focus-status{justify-content:center;align-items:center;gap:var(--spacing-sm);padding:8px var(--spacing-md);border-radius:var(--radius-md);color:#a7f3d0;margin-bottom:var(--spacing-md);background:#10b9810a;border:1px solid #10b98126;font-size:12px;display:flex}.focus-dot{background:var(--success);width:6px;height:6px;box-shadow:0 0 6px var(--success);border-radius:50%;animation:1s infinite alternate pulse-blink}.preview-modal-overlay{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000;background:#000000d9;justify-content:center;align-items:center;animation:.2s ease-out fade-in;display:flex;position:fixed;inset:0}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.preview-modal{border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-lg);gap:var(--spacing-md);width:90%;max-width:800px;box-shadow:var(--shadow-lg);background:#0f111a;flex-direction:column;display:flex}.preview-modal-header{justify-content:space-between;align-items:center;display:flex}.preview-modal-title{font-family:var(--font-display);font-size:16px;font-weight:700}.preview-modal-close{color:var(--text-muted);cursor:pointer;background:0 0;border:none;font-size:24px}.preview-modal-close:hover{color:#fff}.preview-video{aspect-ratio:16/9;border-radius:var(--radius-md);background:#000;outline:none;width:100%}.stats-grid-3{gap:var(--spacing-lg);margin-bottom:var(--spacing-xl);grid-template-columns:repeat(3,1fr);display:grid}.stats-grid-4{gap:var(--spacing-lg);margin-bottom:var(--spacing-xl);grid-template-columns:repeat(4,1fr);display:grid}.client-dashboard-grid{gap:var(--spacing-xl);grid-template-columns:1.5fr 1fr;display:grid}.admin-dashboard-grid{gap:var(--spacing-xl);margin-top:var(--spacing-xl);grid-template-columns:1.6fr 1fr;display:grid}.header-tabs{border-radius:var(--radius-md);border:1px solid var(--border-color);background-color:#ffffff05;gap:8px;padding:4px;display:flex}.header-tab-btn{border-radius:var(--radius-sm);color:#fff;cursor:pointer;background:0 0;border:none;padding:8px 16px;font-size:13px;font-weight:700;transition:all .2s}.header-tab-btn.active{background:var(--primary);box-shadow:0 2px 8px var(--primary-glow)}.header-tab-btn:hover:not(.active){background:#ffffff0d}.search-container{width:280px;position:relative}.table-container{flex:1;max-height:450px;overflow:auto}.metadata-row{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.metadata-row:last-child{margin-bottom:0}@media (width<=1024px){.stats-grid-4{grid-template-columns:repeat(2,1fr)}}@media (width<=900px){.client-dashboard-grid,.admin-dashboard-grid{grid-template-columns:1fr}}@media (width<=768px){.stats-grid-3,.stats-grid-4{grid-template-columns:1fr}.app-header{align-items:stretch;gap:var(--spacing-md);padding:var(--spacing-md);flex-direction:column}.logo-section{justify-content:center}.header-tabs{justify-content:center;width:100%}.header-tab-btn{text-align:center;flex:1;padding:8px 10px;font-size:12px}.header-meta{justify-content:space-between;align-items:center;width:100%}.header-meta>div{align-items:flex-start!important}.card-title-row{align-items:stretch;gap:var(--spacing-sm);flex-direction:column}.search-container{width:100%}.client-dashboard-grid table{width:100%;min-width:600px}.app-grid{padding:var(--spacing-md)!important;gap:var(--spacing-lg)!important;grid-template-columns:1fr!important}}@media (width<=480px){.metadata-row{flex-direction:column;align-items:flex-start;gap:4px}.timer-text{font-size:20px}}