.inactivity-warning-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:10000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.inactivity-warning-modal{background:#fff;border-radius:12px;padding:40px;max-width:400px;box-shadow:0 10px 40px #0000004d;text-align:center;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.warning-icon{width:60px;height:60px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;background-color:#fff3cd;border-radius:50%;color:#ff9800}.warning-icon svg{width:32px;height:32px}.warning-title{font-size:24px;font-weight:600;color:#333;margin:0 0 16px}.warning-message{font-size:14px;color:#666;margin:0 0 20px;line-height:1.5}.warning-timer{margin:24px 0;padding:20px;background-color:#f5f5f5;border-radius:8px;border-left:4px solid #ff9800}.timer-value{font-size:36px;font-weight:700;color:#ff9800;font-family:Courier New,monospace;letter-spacing:2px}.warning-description{font-size:13px;color:#777;margin:16px 0 24px;line-height:1.6}.warning-button{width:100%;padding:12px 24px;font-size:16px;font-weight:600;border:none;border-radius:6px;background-color:#007bff;color:#fff;cursor:pointer;transition:all .2s ease}.warning-button:hover{background-color:#0056b3;transform:translateY(-2px);box-shadow:0 4px 12px #007bff4d}.warning-button:active{transform:translateY(0)}.warning-button:disabled{background-color:#ccc;cursor:not-allowed;transform:none}.crsid-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.crsid-modal-overlay.is-submitting{background-color:#0b25408c;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);cursor:wait}.crsid-modal{background:#fff;border-radius:8px;box-shadow:0 4px 6px #0000001a;max-width:400px;width:90%;animation:slideUp .3s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.crsid-modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #e5e7eb}.crsid-modal-header h2{margin:0;font-size:1.25rem;font-weight:600;color:#1f2937}.crsid-modal-close{background:none;border:none;font-size:1.5rem;color:#6b7280;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s}.crsid-modal-close:hover{background-color:#f3f4f6;color:#1f2937}.crsid-modal-close:disabled{opacity:.45;cursor:not-allowed}.crsid-modal-body{padding:20px}.crsid-modal-description{margin:0 0 20px;color:#6b7280;font-size:.875rem;line-height:1.5}.crsid-input-group{position:relative;margin-bottom:20px}.crsid-input-group label{display:block;margin-bottom:8px;font-weight:500;color:#1f2937;font-size:.875rem}.crsid-input-group input{width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:.875rem;font-family:inherit;transition:border-color .2s,box-shadow .2s;box-sizing:border-box}.crsid-input-group input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.crsid-input-group input:disabled{background-color:#f3f4f6;color:#6b7280;cursor:wait}.crsid-input-group input.input-error{border-color:#ef4444}.crsid-input-group input.input-error:focus{box-shadow:0 0 0 3px #ef44441a}.crsid-char-count{position:absolute;right:12px;bottom:10px;font-size:.75rem;color:#9ca3af}.crsid-error-message{display:flex;align-items:flex-start;gap:8px;padding:12px;background-color:#fee2e2;border:1px solid #fecaca;border-radius:6px;color:#991b1b;font-size:.875rem;margin-bottom:20px}.crsid-error-message .error-icon{width:20px;height:20px;flex-shrink:0;color:#ef4444}.crsid-modal-footer{display:flex;gap:12px;justify-content:flex-end;padding:16px 20px;border-top:1px solid #e5e7eb;background-color:#f9fafb;border-radius:0 0 8px 8px}.crsid-modal-footer .btn{padding:8px 16px;font-size:.875rem;font-weight:500;border:none;border-radius:6px;cursor:pointer;transition:all .2s}.crsid-modal-footer .btn-secondary{background-color:#e5e7eb;color:#1f2937}.crsid-modal-footer .btn-secondary:hover{background-color:#d1d5db}.crsid-modal-footer .btn-primary{background-color:#3b82f6;color:#fff}.crsid-modal-footer .btn-primary:hover{background-color:#2563eb}.crsid-modal-footer .btn-primary:active{background-color:#1d4ed8}.crsid-modal-footer .btn:disabled{opacity:.65;cursor:wait}.crsid-button-spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:crsid-spin .8s linear infinite}@keyframes crsid-spin{to{transform:rotate(360deg)}}.page{display:flex;flex-direction:column;gap:var(--space-lg)}.page header{margin-bottom:var(--space-lg)}.page h2{font-family:var(--font-family-heading);font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-sm);color:var(--color-text-primary)}.page .muted{color:var(--color-text-secondary);font-size:var(--font-size-md)}.page-body{flex:1}.panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-sm)}.manage-users-panel{border-top:4px solid var(--color-accent)}.empty-state{max-width:560px}.empty-state h3{font-family:var(--font-family-heading);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-sm);color:var(--color-text-primary)}.empty-state p{color:var(--color-text-secondary)}.users-form{display:flex;flex-direction:column;gap:var(--space-lg);max-width:500px}.form-group{display:flex;flex-direction:column;gap:var(--space-sm)}.form-group label{font-weight:var(--font-weight-medium);color:var(--color-text-primary);font-size:var(--font-size-sm)}.form-group input,.form-group select,.form-group textarea{padding:var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-md);font-family:inherit;font-size:var(--font-size-md);color:var(--color-text-primary);background:var(--color-surface);transition:all var(--transition-fast)}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-glow)}.form-group input:disabled,.form-group select:disabled,.form-group textarea:disabled{background:var(--color-bg-tertiary);color:var(--color-text-disabled);cursor:not-allowed}.radio-group{display:flex;flex-direction:column;gap:var(--space-md)}.radio-group label{display:flex;align-items:center;gap:var(--space-md);font-weight:var(--font-weight-normal);cursor:pointer;-webkit-user-select:none;user-select:none}.radio-group input[type=radio]{width:20px;height:20px;cursor:pointer;accent-color:var(--color-primary)}.radio-group input[type=radio]:disabled{cursor:not-allowed;opacity:.5}.form-error{padding:var(--space-md);background:var(--color-danger-bg);border:1px solid rgba(214,69,69,.3);border-radius:var(--radius-md);color:var(--color-danger);font-size:var(--font-size-sm);display:flex;align-items:center;gap:var(--space-sm)}.form-error:before{content:"⚠";font-size:var(--font-size-lg);flex-shrink:0}.form-success{padding:var(--space-md);background:var(--color-success-bg);border:1px solid rgba(15,157,88,.3);border-radius:var(--radius-md);color:var(--color-success);font-size:var(--font-size-sm);display:flex;align-items:center;gap:var(--space-sm)}.form-success:before{content:"✓";font-size:var(--font-size-lg);flex-shrink:0}.users-form button[type=submit]{padding:var(--space-md) var(--space-lg);background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-sm);align-self:flex-start;min-width:160px}.users-form button[type=submit]:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-md);background:var(--color-primary-hover)}.users-form button[type=submit]:active:not(:disabled){transform:translateY(0)}.users-form button[type=submit]:disabled{opacity:.6;cursor:not-allowed}@media (max-width: 768px){.users-form{max-width:100%}.panel{padding:var(--space-md)}.page h2{font-size:var(--font-size-xl)}}.complete-registration-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--space-lg);background:var(--color-bg-secondary)}.registration-card{width:min(100%,560px);background:var(--color-surface);border:1px solid var(--color-border);border-top:4px solid var(--color-accent);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:var(--space-xl)}.registration-header{margin-bottom:var(--space-lg)}.registration-header h1{font-family:var(--font-family-heading);font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin-bottom:var(--space-sm)}.registration-header p,.registration-expiry{color:var(--color-text-secondary);font-size:var(--font-size-sm)}.registration-loading{display:flex;align-items:center;gap:var(--space-md);color:var(--color-text-secondary)}.registration-form{display:flex;flex-direction:column;gap:var(--space-md)}.registration-field{display:flex;flex-direction:column;gap:var(--space-sm)}.registration-field label,.password-requirements p{color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.registration-field input{width:100%;padding:10px 12px;border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);background:var(--color-surface);font-family:var(--font-family);font-size:var(--font-size-md);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.registration-field input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-glow)}.registration-field input[readonly]{background:var(--color-bg-tertiary);color:var(--color-text-secondary)}.password-requirements{padding:var(--space-md);background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md)}.password-requirements ul{list-style:none;display:grid;gap:var(--space-xs);margin-top:var(--space-sm)}.password-requirements li{color:var(--color-text-secondary);font-size:var(--font-size-sm)}.password-requirements li:before{content:"○";display:inline-block;width:20px;color:var(--color-text-tertiary)}.password-requirements li.met{color:var(--color-success)}.password-requirements li.met:before{content:"✓";color:var(--color-success)}.registration-alert{padding:var(--space-md);border-radius:var(--radius-md);font-size:var(--font-size-sm);margin-bottom:var(--space-md)}.registration-error{color:var(--color-danger);background:var(--color-danger-bg);border:1px solid rgba(214,69,69,.3)}.registration-success{color:var(--color-success);background:var(--color-success-bg);border:1px solid rgba(15,157,88,.3)}.registration-success p{margin-bottom:var(--space-sm)}.registration-login-link{display:inline-flex;align-items:center;color:var(--color-primary);font-weight:var(--font-weight-semibold)}.registration-login-link:hover{color:var(--color-primary-hover)}.registration-submit{width:100%;margin-top:var(--space-sm)}@media (max-width: 600px){.complete-registration-page{align-items:flex-start;padding:var(--space-md)}.registration-card{padding:var(--space-lg)}}:root{--color-bg-primary: #ffffff;--color-bg-secondary: #f7f9fc;--color-bg-tertiary: #f4f6f9;--color-bg-elevated: #ffffff;--color-surface: #ffffff;--color-surface-hover: #f2f6fb;--color-surface-active: #e9eef6;--color-border: rgba(11, 37, 64, .06);--color-border-hover: rgba(11, 37, 64, .12);--color-text-primary: #0b2540;--color-text-secondary: rgba(11, 37, 64, .75);--color-text-tertiary: rgba(11, 37, 64, .5);--color-text-disabled: rgba(11, 37, 64, .35);--color-primary: #002147;--color-primary-hover: #0b3d91;--color-primary-active: #001730;--color-primary-glow: rgba(0, 33, 71, .12);--color-accent: #A41034;--color-accent-hover: #b21a3e;--color-accent-glow: rgba(164, 16, 52, .12);--color-success: #0f9d58;--color-success-bg: rgba(15, 157, 88, .08);--color-warning: #f59e0b;--color-warning-bg: rgba(245, 158, 11, .08);--color-danger: #d64545;--color-danger-bg: rgba(214, 69, 69, .08);--color-danger-hover: #b23a3a;--color-recording: #d64545;--color-recording-glow: rgba(214, 69, 69, .18);--gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);--gradient-glow: radial-gradient(ellipse at center, var(--color-primary-glow) 0%, transparent 70%);--gradient-surface: linear-gradient(180deg, rgba(11,37,64,.02) 0%, rgba(11,37,64,.01) 100%);--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--space-3xl: 64px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--shadow-sm: 0 6px 18px rgba(11, 37, 64, .06);--shadow-md: 0 10px 30px rgba(11, 37, 64, .08);--shadow-lg: 0 18px 50px rgba(11, 37, 64, .1);--shadow-glow: 0 0 24px var(--color-primary-glow);--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-family-heading: "Open Sans","ui-sans-serif","system-ui","sans-serif","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" --font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-md: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 2rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.2;--line-height-normal: 1.5;--line-height-relaxed: 1.75;--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .4s ease;--z-dropdown: 100;--z-modal: 200;--z-toast: 300}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-family);font-size:var(--font-size-md);line-height:var(--line-height-normal);color:var(--color-text-primary);background:var(--color-bg-primary);min-height:100vh;overflow-x:hidden}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:-1}#root{min-height:100vh;display:flex;flex-direction:column}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary-hover)}button{font-family:inherit;cursor:pointer;border:none;background:none}img,video{max-width:100%;height:auto;display:block}.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:var(--space-lg);color:var(--color-text-secondary)}.loading-spinner{width:40px;height:40px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);border-radius:var(--radius-md);transition:all var(--transition-fast);white-space:nowrap}.btn-icon{width:18px;height:18px;flex-shrink:0}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-sm{padding:var(--space-sm) var(--space-md);font-size:var(--font-size-sm)}.btn-sm .btn-icon{width:14px;height:14px}.btn-lg{padding:var(--space-lg) var(--space-xl);font-size:var(--font-size-lg)}.btn-lg .btn-icon{width:22px;height:22px}.btn-primary{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-sm)}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-secondary{background:var(--color-surface);color:var(--color-text-primary);border:1px solid var(--color-border)}.btn-secondary:hover:not(:disabled){background:var(--color-surface-hover);border-color:var(--color-border-hover)}.btn-ghost{background:transparent;color:var(--color-text-secondary)}.btn-ghost:hover:not(:disabled){background:var(--color-surface-hover);color:var(--color-text-primary)}.btn-danger{color:var(--color-danger)}.btn-danger:hover:not(:disabled){background:var(--color-danger-bg)}.btn-record{flex-direction:column;padding:var(--space-xl);background:linear-gradient(180deg,var(--color-surface) 0%,var(--color-surface-hover) 100%);border:2px solid var(--color-border);border-radius:var(--radius-xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);gap:var(--space-md)}.btn-record:hover:not(:disabled){border-color:var(--color-recording);box-shadow:0 0 40px var(--color-recording-glow)}.btn-record-inner{width:80px;height:80px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(135deg,var(--color-danger) 0%,#f97316 100%);box-shadow:0 4px 20px var(--color-recording-glow);transition:transform var(--transition-fast)}.btn-record:hover:not(:disabled) .btn-record-inner{transform:scale(1.05)}.btn-record-inner .btn-icon{width:32px;height:32px}.btn-control{padding:var(--space-lg) var(--space-xl);border-radius:var(--radius-lg);font-size:var(--font-size-lg)}.btn-pause{background:var(--color-warning-bg);color:var(--color-warning);border:1px solid rgba(245,158,11,.3)}.btn-pause:hover:not(:disabled){background:#f59e0b40}.btn-resume{background:var(--color-success-bg);color:var(--color-success);border:1px solid rgba(16,185,129,.3)}.btn-resume:hover:not(:disabled){background:#10b98140}.btn-stop{background:var(--color-danger-bg);color:var(--color-danger);border:1px solid rgba(239,68,68,.3);padding:var(--space-lg) var(--space-xl);border-radius:var(--radius-lg);font-size:var(--font-size-lg)}.btn-stop:hover:not(:disabled){background:#ef444440}.btn-spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}.header{position:sticky;top:0;z-index:var(--z-dropdown);background:var(--color-primary);color:#fff;border-bottom:1px solid rgba(255,255,255,.06)}.header-top{background:var(--color-bg-primary);color:var(--color-text-primary);border-bottom:1px solid var(--color-border);padding-top:6px;padding-bottom:6px}.header-menu{background:#08323d;color:#fff;border-bottom:1px solid rgba(255,255,255,.04);padding-top:6px;padding-bottom:6px}.header-menu .main-menu{margin-left:calc((var(--space-xs) + 6px) * -1)}.main-menu ul{list-style:none;margin:0;padding:0;display:flex;gap:var(--space-sm);align-items:center}.main-menu li{position:relative}.main-menu a,.submenu-trigger{color:#ffffffe6;text-decoration:none;margin:calc(var(--space-xs)) calc(var(--space-xs) + 6px);display:inline-block;font-weight:var(--font-weight-medium);font-size:var(--font-size-md);line-height:var(--line-height-normal)}.main-menu a.active,.submenu-trigger.active{border-bottom:2px solid rgba(255,255,255,.9);margin-bottom:calc(var(--space-xs))}.submenu-trigger{padding:0}.submenu-trigger:after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg)}.main-menu .submenu{position:absolute;top:100%;left:0;z-index:var(--z-dropdown);min-width:190px;display:none;flex-direction:column;align-items:stretch;gap:0;padding:6px 0;background:#fff;border:1px solid rgba(11,37,64,.1);border-radius:0 0 var(--radius-sm) var(--radius-sm);box-shadow:var(--shadow-md)}.main-menu .has-submenu:hover .submenu,.main-menu .has-submenu:focus-within .submenu{display:flex}.main-menu .submenu a{display:block;margin:0;padding:10px 16px;color:var(--color-text-primary);font-size:var(--font-size-sm);border-bottom:0}.main-menu .submenu a:hover,.main-menu .submenu a.active{color:var(--color-primary);background:var(--color-surface-hover);border-bottom:0;margin:0}.header-content{margin:0;padding:calc(var(--space-xs) + 2px) var(--space-sm);display:flex;align-items:center;justify-content:space-between}.brand-row{display:flex;align-items:center;gap:var(--space-sm)}.header-logo-img{width:160px;height:auto;display:block}.brand-divider{width:1px;height:40px;background:#55555540;margin-left:6px;margin-right:6px}.site-heading{font-family:var(--font-family-heading);font-size:1rem;font-weight:var(--font-weight-semibold);color:#0f2125;margin-left:6px}.header-brand{display:flex;align-items:center;gap:var(--space-md)}.header-logo svg{width:100%;height:100%}.header-user{display:flex;align-items:center;gap:var(--space-lg)}.user-info{display:flex;align-items:center;gap:var(--space-sm)}.user-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--color-border)}.user-avatar-placeholder{display:flex;align-items:center;justify-content:center;background:var(--gradient-primary);color:#fff;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm)}.user-name{color:#261e49e6;font-size:var(--font-size-sm)}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--space-lg);position:relative;overflow:hidden}.login-container{position:relative;z-index:1}.login-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-2xl);max-width:460px;width:100%;box-shadow:var(--shadow-md)}.login-subtitle{color:var(--color-text-secondary);margin-top:4px}.login-features .feature{background:transparent;border:1px solid rgba(11,37,64,.03)}.login-header{text-align:center;margin-bottom:var(--space-xl)}.login-logo{width:72px;height:72px;margin:0 auto var(--space-lg)}.login-logo svg{width:100%;height:100%}.login-title{font-family:var(--font-family-heading);font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-sm)}.login-subtitle{color:var(--color-text-secondary);font-size:var(--font-size-md)}.login-body{display:flex;flex-direction:column;gap:var(--space-lg)}.login-features{display:flex;flex-direction:column;gap:var(--space-md)}.feature{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);background:var(--color-surface);border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:var(--font-size-sm)}.feature-icon{width:20px;height:20px;color:var(--color-primary);flex-shrink:0}.login-error{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md);background:var(--color-danger-bg);border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-md);color:var(--color-danger);font-size:var(--font-size-sm)}.error-icon{width:18px;height:18px;flex-shrink:0}.login-btn{width:100%;background:var(--color-primary);color:#fff;border-radius:var(--radius-md);padding:calc(var(--space-md) + 4px) var(--space-lg)}.login-note{text-align:center;font-size:var(--font-size-xs);color:var(--color-text-tertiary)}.login-decoration{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.decoration-circle{position:absolute;border-radius:50%;filter:blur(60px);opacity:.4}.decoration-circle-1{width:300px;height:300px;background:var(--color-primary);top:-100px;left:-100px;animation:float 8s ease-in-out infinite}.decoration-circle-2{width:200px;height:200px;background:var(--color-accent);bottom:-50px;right:-50px;animation:float 10s ease-in-out infinite reverse}.decoration-circle-3{width:150px;height:150px;background:var(--color-primary);top:50%;right:-75px;animation:float 12s ease-in-out infinite 2s}@keyframes float{0%,to{transform:translate(0)}50%{transform:translate(20px,-20px)}}.app{min-height:100vh;display:flex;flex-direction:column}.main-content{flex:1;width:100%;padding:var(--space-xl) var(--space-lg)}.main-inner{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl)}@media (max-width: 1024px){.main-content{grid-template-columns:1fr}}.footer{padding:var(--space-lg);text-align:center;color:var(--color-text-tertiary);font-size:var(--font-size-sm);border-top:1px solid var(--color-border)}.recorder-section{display:flex;flex-direction:column}.recorder-container{background:var(--gradient-surface);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-lg)}.video-preview{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-bg-tertiary)}.video-container{position:relative;aspect-ratio:16 / 9;background:linear-gradient(135deg,var(--color-bg-secondary) 0%,var(--color-bg-tertiary) 100%)}.preview-video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.video-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-md);color:var(--color-text-secondary)}.placeholder-icon{width:64px;height:64px;opacity:.5}.placeholder-hint{font-size:var(--font-size-sm)}.video-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,transparent 60%,rgba(255,255,255,.6) 100%);pointer-events:none}.recording-indicator{position:absolute;top:var(--space-md);left:var(--space-md);display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--radius-full);z-index:10}.recording-dot{width:10px;height:10px;background:var(--color-recording);border-radius:50%;animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.9)}}.recording-text{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-recording);text-transform:uppercase;letter-spacing:.05em}.video-preview.recording .video-container{box-shadow:0 0 0 2px var(--color-recording),0 0 30px var(--color-recording-glow);animation:recording-pulse 2s ease-in-out infinite}@keyframes recording-pulse{0%,to{box-shadow:0 0 0 2px var(--color-recording),0 0 30px var(--color-recording-glow)}50%{box-shadow:0 0 0 3px var(--color-recording),0 0 50px var(--color-recording-glow)}}.paused-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);padding:var(--space-lg);background:#ffffffeb;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--radius-lg);z-index:10}.paused-icon{width:48px;height:48px;color:var(--color-warning)}.paused-text{color:var(--color-warning);font-weight:var(--font-weight-semibold)}.video-preview.paused .video-container{filter:none}.recording-controls{display:flex;flex-direction:column;align-items:center;gap:var(--space-lg);padding:var(--space-md)}.timer-display{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs)}.timer-value{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);font-variant-numeric:tabular-nums;color:var(--color-text-primary)}.timer-display.active .timer-value{color:var(--color-recording)}.timer-display.paused .timer-value{color:var(--color-warning)}.timer-label{font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-tertiary)}.timer-display.active .timer-label{color:var(--color-recording)}.timer-display.paused .timer-label{color:var(--color-warning)}.controls-error{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md);background:var(--color-danger-bg);border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-md);color:var(--color-danger);font-size:var(--font-size-sm);max-width:100%}.controls-buttons{display:flex;gap:var(--space-md);flex-wrap:wrap;justify-content:center}.controls-tip{text-align:center;color:var(--color-text-tertiary);font-size:var(--font-size-sm);max-width:300px}.recordings-section{display:flex;flex-direction:column}.recordings-list{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-lg);min-height:400px}.recordings-list.loading,.recordings-list.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-md);color:var(--color-text-tertiary)}.empty-icon{width:64px;height:64px;opacity:.5}.recordings-list.empty h3{color:var(--color-text-secondary);font-size:var(--font-size-lg)}.recordings-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-lg)}.recordings-title{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold)}.title-icon{width:24px;height:24px;color:var(--color-primary)}.recordings-count{background:var(--color-surface);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-full);font-size:var(--font-size-sm);color:var(--color-text-secondary)}.recordings-grid{display:grid;gap:var(--space-md)}.recording-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--transition-fast);cursor:pointer}.recording-card:hover{border-color:var(--color-border-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}.recording-card.selected{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary),var(--shadow-sm)}.recording-preview{position:relative;aspect-ratio:16 / 9;background:var(--color-bg-tertiary)}.recording-video{width:100%;height:100%;object-fit:cover}.play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--color-primary);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:50%;color:#fff;transition:all var(--transition-fast)}.play-button:hover{background:var(--color-primary);transform:translate(-50%,-50%) scale(1.1)}.play-button svg{width:20px;height:20px}.recording-duration{position:absolute;bottom:var(--space-sm);right:var(--space-sm);padding:var(--space-xs) var(--space-sm);background:#0b2540e6;color:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:var(--radius-sm);font-size:var(--font-size-xs);font-variant-numeric:tabular-nums}.recording-info{padding:var(--space-md);display:flex;flex-direction:column;gap:var(--space-sm)}.recording-meta{display:flex;justify-content:space-between;font-size:var(--font-size-sm);color:var(--color-text-secondary)}.status-badge{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium)}.status-icon{width:14px;height:14px}.status-pending{background:var(--color-surface);color:var(--color-text-secondary)}.status-uploading{background:var(--color-primary-glow);color:var(--color-primary)}.upload-progress-ring svg{width:16px;height:16px}.status-completed{background:var(--color-success-bg);color:var(--color-success)}.status-failed{background:var(--color-danger-bg);color:var(--color-danger)}.recording-actions{display:flex;gap:var(--space-sm);margin-top:var(--space-xs)}.recordings-panel{background:var(--gradient-surface);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-lg);min-height:400px;display:flex;flex-direction:column}.recordings-panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-lg);padding-bottom:var(--space-md);border-bottom:1px solid var(--color-border)}.recordings-panel-header h2{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.recordings-badge{background:var(--color-accent);color:#fff;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);min-width:24px;text-align:center}.recordings-loading,.recordings-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-md);color:var(--color-text-tertiary);text-align:center}.recordings-empty .empty-icon{width:48px;height:48px;opacity:.5}.recordings-empty p{color:var(--color-text-secondary);font-weight:var(--font-weight-medium)}.recordings-empty span{font-size:var(--font-size-sm)}.recordings-list-view{list-style:none;display:flex;flex-direction:column;gap:var(--space-sm);overflow-y:auto;flex:1}.recording-item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:all var(--transition-fast);cursor:pointer}.recording-item:hover{border-color:var(--color-border-hover);background:var(--color-surface-hover)}.recording-item-main{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md)}.hidden-video{display:none}.play-btn{width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--color-primary);border:1px solid rgba(255,255,255,.06);border-radius:50%;color:#fff;transition:all var(--transition-fast)}.play-btn:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.play-btn.playing{background:var(--color-primary);border-color:var(--color-primary);color:#fff;animation:pulse-play 1.5s ease-in-out infinite}@keyframes pulse-play{0%,to{box-shadow:0 0 0 0 var(--color-primary-glow)}50%{box-shadow:0 0 0 8px transparent}}.play-btn svg{width:16px;height:16px}.recording-item-info{flex:1;min-width:0}.recording-item-title{display:flex;align-items:center;gap:var(--space-md);font-size:var(--font-size-sm);color:var(--color-text-primary)}.recording-time{color:var(--color-text-primary);font-weight:var(--font-weight-medium)}.recording-item-title .recording-duration{position:static;background:var(--color-surface-hover);padding:2px var(--space-sm);border-radius:var(--radius-sm);font-size:var(--font-size-xs);color:var(--color-text-secondary);font-variant-numeric:tabular-nums}.recording-item-title .recording-size{color:var(--color-text-tertiary);font-size:var(--font-size-xs)}.recording-status{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);white-space:nowrap}.recording-status .status-icon{width:14px;height:14px}.recording-status .status-spinner{width:16px;height:16px}.recording-status .status-spinner svg{width:100%;height:100%;animation:spin 1s linear infinite}.recording-status.status-pending{background:var(--color-surface-hover);color:var(--color-text-tertiary)}.recording-status.status-uploading{background:#6366f126;color:var(--color-primary)}.recording-status.status-completed{background:var(--color-success-bg);color:var(--color-success)}.recording-status.status-failed{background:var(--color-danger-bg);color:var(--color-danger)}.status-text{line-height:1}.recording-item .recording-actions{display:flex;align-items:center;gap:var(--space-xs);margin:0}.btn-action{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);transition:all var(--transition-fast);white-space:nowrap}.btn-action svg{width:14px;height:14px}.btn-retry{background:var(--color-warning-bg);color:var(--color-warning);border:1px solid rgba(245,158,11,.3)}.btn-retry:hover{background:#f59e0b40}.btn-upload{background:var(--color-primary-glow);color:var(--color-primary);border:1px solid rgba(99,102,241,.3)}.btn-upload:hover{background:#6366f140}.btn-details{background:transparent;color:var(--color-text-tertiary);padding:var(--space-xs)}.btn-details:hover{color:var(--color-text-primary);background:var(--color-surface-hover)}.btn-details svg{transition:transform var(--transition-fast)}.btn-delete{background:transparent;color:var(--color-text-tertiary);padding:var(--space-xs)}.btn-delete:hover{color:var(--color-danger);background:var(--color-danger-bg)}.recording-error-details{display:flex;align-items:flex-start;gap:var(--space-sm);padding:var(--space-md);padding-top:0;font-size:var(--font-size-xs);color:var(--color-danger);background:var(--color-danger-bg);margin:0 var(--space-md) var(--space-md);border-radius:var(--radius-sm)}.recording-error-details .error-icon{width:14px;height:14px;flex-shrink:0;margin-top:2px}.recording-video-container{display:none;background:#000;border-bottom:1px solid var(--color-border);aspect-ratio:16 / 9;border-radius:var(--radius-md) var(--radius-md) 0 0;overflow:hidden}.recording-video-container.visible{display:block}.list-video{width:100%;height:100%;object-fit:contain}.recording-video-container.visible+.recording-item-main{border-top:1px solid var(--color-border)}.recordings-management{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;margin-top:var(--space-md)}.recordings-table{width:100%;border-collapse:collapse;text-align:left}.recordings-table th{background:var(--color-bg-tertiary);padding:var(--space-md);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--color-border)}.recordings-table td{padding:var(--space-md);border-bottom:1px solid var(--color-border);font-size:var(--font-size-sm);color:var(--color-text-secondary);vertical-align:middle}.recordings-table tr:last-child td{border-bottom:none}.recordings-table tr:hover td{background:var(--color-bg-secondary)}.recordings-table input{background:var(--color-bg-primary);border:1px solid var(--color-primary);border-radius:var(--radius-sm);padding:var(--space-xs) var(--space-sm);color:var(--color-text-primary);font-family:inherit;font-size:var(--font-size-sm);width:100%;max-width:250px}.recordings-table input:focus{outline:none;box-shadow:0 0 0 2px var(--color-primary-glow)}.recordings-page .management-panel{margin-bottom:var(--space-2xl)}.muted{color:var(--color-text-tertiary);font-size:var(--font-size-sm)}.play-cell{width:60px;text-align:center}.play-btn-compact{background:transparent;border:none;cursor:pointer;padding:var(--space-xs);display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-sm);transition:all .2s ease;color:var(--color-primary)}.play-btn-compact:hover:not(:disabled){background:var(--color-primary-glow);transform:scale(1.1)}.play-btn-compact:disabled{opacity:.5;cursor:not-allowed}.play-btn-compact svg{width:20px;height:20px}.play-btn-compact.playing{color:var(--color-success, #10b981)}.status-badge{display:inline-block;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.03em}.status-badge.status-completed,.status-badge.status-uploaded{background:#10b98126;color:var(--color-success, #10b981)}.status-badge.status-pending{background:#fbbf2426;color:var(--color-warning, #f59e0b)}.status-badge.status-uploading{background:#3b82f626;color:var(--color-info, #3b82f6)}.status-badge.status-failed{background:#ef444426;color:var(--color-danger, #ef4444)}.action-buttons{display:flex;gap:var(--space-xs);flex-wrap:wrap}.action-buttons .btn{white-space:nowrap}.pagination{display:flex;align-items:center;justify-content:center;gap:var(--space-md);margin-top:var(--space-lg);padding-top:var(--space-lg);border-top:1px solid var(--color-border)}.pagination .page-info{font-size:var(--font-size-sm);color:var(--color-text-secondary);min-width:120px;text-align:center}.pagination button:disabled{opacity:.5;cursor:not-allowed}.video-player-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000bf;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--space-md)}.video-player-content{background:var(--color-bg-primary);border-radius:var(--radius-lg);max-width:90vw;width:100%;position:relative;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.video-player-content .close-btn{position:absolute;top:var(--space-md);right:var(--space-md);background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-sm);width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-2xl);cursor:pointer;color:var(--color-text-primary);transition:all .2s ease;z-index:1001}.video-player-content .close-btn:hover{background:var(--color-danger, #ef4444);color:#fff}.video-wrapper{padding:var(--space-lg);display:flex;justify-content:center}.video-wrapper video{border-radius:var(--radius-md)}.recordings-empty{text-align:center;padding:var(--space-2xl) var(--space-lg);color:var(--color-text-tertiary)}.recordings-empty p{font-size:var(--font-size-md);margin-bottom:var(--space-sm)}@media (max-width: 768px){.main-content{padding:var(--space-md);gap:var(--space-lg)}.header-content{padding:var(--space-sm) var(--space-md)}.header-title{font-size:var(--font-size-lg)}.header-logo-img{width:auto;max-height:36px;height:auto;display:block;padding:var(--space-sm)}.user-name{display:none}.login-card,.btn-record{padding:var(--space-lg)}.btn-record-inner{width:64px;height:64px}.timer-value{font-size:var(--font-size-2xl)}.controls-buttons{width:100%}.btn-control,.btn-stop{flex:1;min-width:0}}.main-menu .menu-toggle{display:none;background:transparent;border:none;color:inherit;width:40px;height:40px;align-items:center;justify-content:center}.main-menu .hamburger{display:block;width:22px;height:2px;background:currentColor;position:relative}.main-menu .hamburger:before,.main-menu .hamburger:after{content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor}.main-menu .hamburger:before{top:-7px}.main-menu .hamburger:after{top:7px}@media (max-width: 992px){.header-logo-img{width:120px}}@media (max-width: 768px){.main-menu ul{display:none;flex-direction:column;align-items:flex-start;gap:var(--space-sm);background:#08323d;position:absolute;left:var(--space-md);top:calc(100% + 8px);min-width:220px;padding:var(--space-sm) 0;border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);z-index:50}.main-menu.open ul{display:flex}.main-menu.open .submenu{position:static;display:flex;min-width:100%;padding:0 0 0 var(--space-md);background:#ffffff0f;border:0;box-shadow:none}.main-menu .has-submenu{width:100%}.main-menu .submenu a{color:#ffffffe6}.main-menu .submenu a:hover,.main-menu .submenu a.active{color:#fff;background:#ffffff1a}.main-menu .menu-toggle{display:inline-flex}.header-menu .header-content{padding-left:var(--space-md);padding-right:var(--space-md)}}@media (min-width: 1024px){.header-content{margin-left:20px;margin-right:20px}}@media (min-width: 1280px){.header-content{margin-left:32px;margin-right:32px}}