:root{--bg: #f4f6f9;--bg-light: #ffffff;--bg-card: #ffffff;--border: #d8dee8;--border-light: #c8d0dd;--accent: #2f6bea;--accent-light: #5f9dff;--text: #1a202c;--text-light: #4a5568;--text-muted: #6b7a99;--text-dim: #8895a7;--success: #28a745;--success-bg: #e6f9ec;--warning: #d69e2e;--danger: #e53e3e;--sidebar: #ffffff;--header: #ffffff;--gradient-1: linear-gradient(135deg, #2f6bea, #1e4fbf);--gradient-2: linear-gradient(160deg, #f8fafc 0%, #f4f6f9 55%, #f0f2f7 100%)}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-family:IBM Plex Sans,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}input,select,textarea,button{font-family:inherit}input::placeholder,textarea::placeholder{color:#a0aab5}select option{background:#fff;color:#1a202c}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:#c8d0dd;border-radius:6px;border:2px solid var(--bg)}::-webkit-scrollbar-thumb:hover{background:#b0b8c8}@keyframes fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.app{min-height:100vh}.login-page{min-height:100vh;display:flex}.login-left{flex:0 0 44%;position:relative;overflow:hidden;background:linear-gradient(135deg,#e8eef7,#f4f6f9);border-right:1px solid #e0e5ed;display:flex;flex-direction:column;justify-content:space-between;padding:56px 52px}.login-left:before{content:"";position:absolute;top:-140px;right:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(47,107,234,.1),transparent 68%)}.login-left:after{content:"";position:absolute;bottom:-160px;left:-100px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(255,138,92,.08),transparent 68%)}.login-left-content{position:relative;z-index:1}.login-left-content h1{color:#1a202c}.login-left-content p{color:#4a5568}.login-right{flex:1;display:flex;align-items:center;justify-content:center;padding:40px;background:var(--bg)}.login-card{width:100%;max-width:460px;animation:fade-in .5s ease}.login-card .brand{font-family:IBM Plex Mono,monospace;font-size:11px;letter-spacing:3px;color:#e07a3c;margin-bottom:20px}.login-card h1{font-family:Space Grotesk,sans-serif;font-weight:700;font-size:38px;line-height:1.14;letter-spacing:-.5px;margin-bottom:18px;color:#1a202c}.login-card p{color:#4a5568;font-size:15px;line-height:1.65}.login-card .welcome-text{font-family:IBM Plex Mono,monospace;font-size:11px;letter-spacing:3px;color:#8895a7;margin-bottom:8px}.login-card h2{font-family:Space Grotesk,sans-serif;font-weight:700;font-size:26px;margin-top:8px;color:#1a202c}.login-card .subtitle{color:#4a5568;font-size:13px;margin-top:4px}.role-section{margin-top:26px;font-family:IBM Plex Mono,monospace;font-size:11px;letter-spacing:2px;color:#6b7a99;margin-bottom:12px}.role-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}.role-card{background:#fff;border:1px solid #d8dee8;border-radius:10px;padding:14px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:space-between}.role-card:hover{border-color:#a0aad5;background:#f0f4fb}.role-card.active{border-color:var(--accent);background:#e8eef7}.role-card-icon{width:36px;height:36px;border-radius:8px;background:#f0f4fb;display:flex;align-items:center;justify-content:center;font-size:18px}.role-card-text{flex:1}.role-card-text h3{font-family:Space Grotesk,sans-serif;font-weight:600;font-size:15px;color:#1a202c}.role-card-text p{font-family:IBM Plex Mono,monospace;font-size:9.5px;letter-spacing:1.5px;color:#6b7a99;margin-top:2px}.login-input{margin-top:24px}.login-input label{font-family:IBM Plex Mono,monospace;font-size:11px;letter-spacing:1.5px;color:#4a5568;display:block;margin-bottom:7px}.input-wrapper{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d8dee8;border-radius:10px;padding:0 14px}.input-wrapper input{flex:1;background:transparent;border:none;outline:none;color:#1a202c;font-size:15px;padding:13px 0}.input-wrapper input::placeholder{color:#a0aab5}.login-btn{margin-top:24px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--gradient-1);border:none;color:#fff;padding:14px 20px;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 4px 16px #2f6bea4d;transition:all .2s}.login-btn:hover{box-shadow:0 6px 24px #2f6bea66}.login-btn:disabled{opacity:.7;cursor:not-allowed}.login-hint{margin-top:14px;text-align:center;font-family:IBM Plex Mono,monospace;font-size:11px;color:#6b7a99}.app-layout{min-height:100vh;display:flex}.sidebar{flex:0 0 264px;background:var(--sidebar);border-right:1px solid var(--border);min-height:100vh;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.sidebar-brand{padding:22px 22px 18px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border)}.sidebar-brand-text h3{font-family:Space Grotesk,sans-serif;font-weight:700;font-size:17px;letter-spacing:.5px;color:#1a202c}.sidebar-brand-text p{font-family:IBM Plex Mono,monospace;font-size:9px;letter-spacing:2.5px;color:var(--text-dim)}.sidebar-nav{padding:16px 14px;flex:1;display:flex;flex-direction:column;gap:4px}.sidebar-nav-label{font-family:IBM Plex Mono,monospace;font-size:9.5px;letter-spacing:2px;color:var(--text-muted);padding:6px 10px 8px}.sidebar-nav-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;border:none;background:transparent;color:var(--text-light);font-size:14px;font-weight:500;cursor:pointer;transition:all .15s;width:100%;text-align:left}.sidebar-nav-item:hover{background:#f0f4fb;color:var(--text)}.sidebar-nav-item.active{background:#e8eef7;color:var(--accent);position:relative}.sidebar-nav-item.active:before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;background:var(--accent);border-radius:0 2px 2px 0}.sidebar-nav-item .nav-label{font-size:14px;font-weight:500;display:block;color:var(--text)}.sidebar-nav-item .nav-en{font-family:IBM Plex Mono,monospace;font-size:8.5px;letter-spacing:1.5px;color:var(--text-dim);display:block;margin-top:2px}.sidebar-user{padding:16px 18px;border-top:1px solid var(--border)}.sidebar-user-card{display:flex;align-items:center;gap:11px}.sidebar-user-avatar{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#2f6bea,#1e4fbf);display:flex;align-items:center;justify-content:center;font-family:Space Grotesk,sans-serif;font-weight:600;font-size:14px;color:#fff}.sidebar-user-info{flex:1;min-width:0}.sidebar-user-info h4{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#1a202c}.sidebar-user-info p{font-family:IBM Plex Mono,monospace;font-size:9px;letter-spacing:1px;color:var(--text-dim)}.sidebar-logout{margin-top:14px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:transparent;border:1px solid var(--border-light);color:var(--text-light);padding:9px;border-radius:9px;font-size:12.5px;cursor:pointer;transition:all .15s}.sidebar-logout:hover{background:#f0f4fb;border-color:#a0aad5;color:var(--accent)}.main-area{flex:1;min-width:0;display:flex;flex-direction:column}.main-header{height:68px;background:var(--header);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 30px;position:sticky;top:0;z-index:20}.main-header h1{font-family:Space Grotesk,sans-serif;font-weight:600;font-size:19px;color:#1a202c}.main-header .page-en{font-family:IBM Plex Mono,monospace;font-size:9.5px;letter-spacing:2px;color:var(--text-dim);margin-top:2px}.main-header-right{display:flex;align-items:center;gap:18px}.main-header-time{text-align:right}.main-header-time .time{font-family:IBM Plex Mono,monospace;font-size:13px;color:#1a202c}.main-header-time .date{font-size:11px;color:var(--text-dim)}.main-header-divider{width:1px;height:30px;background:var(--border)}.role-badge{background:#e8eef7;border:1px solid #c8d5e8;color:var(--accent);font-family:IBM Plex Mono,monospace;font-size:10px;letter-spacing:1px;padding:4px 10px;border-radius:20px;font-weight:600}.main-content{flex:1;padding:30px;background:var(--bg)}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:18px 18px 16px;position:relative;overflow:hidden}.stat-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--card-color, var(--accent))}.stat-card-content{display:flex;align-items:flex-start;justify-content:space-between}.stat-label{font-size:12.5px;color:var(--text-light);font-weight:500}.stat-label-en{font-family:IBM Plex Mono,monospace;font-size:9px;letter-spacing:1.5px;color:var(--text-dim);margin-top:2px}.stat-icon{font-size:24px}.stat-value{font-family:Space Grotesk,sans-serif;font-weight:700;font-size:34px;margin-top:14px;color:#1a202c}.quick-actions{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:20px;margin-top:18px}.quick-actions-header{display:flex;align-items:center;gap:9px;font-family:Space Grotesk,sans-serif;font-weight:600;font-size:15px;color:#1a202c}.quick-actions-list{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}.quick-action-btn{display:flex;align-items:center;gap:9px;background:var(--gradient-1);border:none;color:#fff;padding:12px 18px;border-radius:10px;font-size:13.5px;font-weight:600;cursor:pointer;box-shadow:0 4px 16px #2f6bea4d;transition:all .2s}.quick-action-btn:hover{box-shadow:0 6px 24px #2f6bea66}.quick-action-btn.secondary{background:#f0f4fb;border:1px solid var(--border-light);color:var(--text-light)}.quick-action-btn.secondary:hover{border-color:#a0aad5;background:#e8eef7}.table-section{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:18px}.table-section-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.table-section-title{display:flex;align-items:center;gap:9px;font-weight:600;font-size:14px;color:#1a202c}.table-search{display:flex;align-items:center;gap:9px;background:#f0f4fb;border:1px solid var(--border-light);border-radius:10px;padding:0 14px}.table-search input{background:transparent;border:none;outline:none;color:var(--text);font-size:13px;padding:10px 0;min-width:200px}.table-row{display:grid;grid-template-columns:2fr 1.6fr 1.4fr 1fr .9fr;gap:12px;padding:14px 20px;border-bottom:1px solid var(--border);align-items:center;transition:background .15s}.table-row:hover{background:#f0f4fb}.table-row-header{display:grid;grid-template-columns:2fr 1.6fr 1.4fr 1fr .9fr;gap:12px;padding:13px 20px;border-bottom:1px solid var(--border);font-family:IBM Plex Mono,monospace;font-size:10px;letter-spacing:1.5px;color:var(--text-dim);text-transform:uppercase}.table-row-user{display:flex;align-items:center;gap:12px}.table-avatar{width:40px;height:40px;border-radius:10px;background:#f0f4fb;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;color:var(--accent);flex-shrink:0}.table-row-user-info{min-width:0}.table-row-user-info h4{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#1a202c}.table-row-user-info p{font-family:IBM Plex Mono,monospace;font-size:10px;color:var(--text-dim)}.table-row-company{min-width:0}.table-row-company h4{font-size:12.5px;color:#1a202c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.table-row-company p{font-size:11.5px;color:var(--text-light)}.table-row-purpose{font-size:12px;color:var(--text-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.table-row-time{font-family:IBM Plex Mono,monospace;font-size:11.5px;color:var(--text-light)}.table-status{text-align:right}.status-badge{display:inline-block;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:500;font-family:IBM Plex Mono,monospace;letter-spacing:.5px}.status-badge.active{background:var(--success-bg);border:1px solid #a0d8b0;color:#1a7a3a}.status-badge.pending{background:#fef9e7;border:1px solid #f0d878;color:#b8860b}.status-badge.completed{background:#e8eef7;border:1px solid #c8d5e8;color:#4a5568}.table-empty{padding:50px;text-align:center;color:var(--text-muted)}.form-section{display:grid;grid-template-columns:1fr 340px;gap:20px;max-width:1240px;align-items:start}.form-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;overflow:hidden}.form-card-header{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;color:#1a202c}.form-card-body{padding:22px}.form-section-title{display:flex;align-items:center;gap:8px;font-family:IBM Plex Mono,monospace;font-size:11px;letter-spacing:2px;color:#c07a3c;margin:26px 0 16px}.form-section-title:first-child{margin-top:0}.form-label{font-size:12.5px;color:var(--text-light);font-weight:500;display:block;margin-bottom:6px}.form-label .required{color:var(--danger)}.form-input,.form-select,.form-textarea{background:#fff;border:1px solid var(--border-light);border-radius:10px;padding:10px 14px;color:var(--text);font-size:13px;width:100%}.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #2f6bea1f}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-textarea{min-height:60px;resize:vertical}.form-btn{display:flex;align-items:center;gap:10px;color:var(--text-light);background:#fff;border:1px solid var(--border-light);border-radius:10px;padding:10px 14px;cursor:pointer;transition:all .2s}.form-btn:hover{border-color:#a0aad5;background:#f0f4fb}.form-submit{display:flex;gap:12px;margin-top:20px}.form-submit-btn{display:flex;align-items:center;gap:8px;background:var(--gradient-1);border:none;color:#fff;padding:14px 20px;border-radius:10px;font-size:13.5px;font-weight:600;cursor:pointer}.form-cancel-btn{flex:0 0 auto;background:transparent;border:1px solid var(--border-light);color:var(--text-light);padding:14px 20px;border-radius:10px;font-size:13.5px;cursor:pointer}.info-sidebar{position:sticky;top:98px;display:flex;flex-direction:column;gap:16px}.info-card{background:#f0f4fb;border:1px solid #c8d5e8;border-radius:14px;padding:18px}.info-card-green{background:var(--success-bg);border-color:#a0d8b0}.info-card-orange{background:#fef9e7;border-color:#f0d878}.info-card-title{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px}.info-card-content{font-size:12.5px;line-height:1.6;margin-top:10px;color:var(--text-light)}.consent-box{display:flex;gap:12px;margin-top:22px;padding:14px;background:#fff;border:1px solid var(--border-light);border-radius:10px;cursor:pointer}.consent-box input[type=checkbox]{margin-top:3px;width:16px;height:16px;accent-color:var(--accent);flex:0 0 auto}.consent-box label{font-size:12px;color:var(--text-light);line-height:1.55}.form-element{margin-top:16px}.form-element label{font-family:IBM Plex Mono,monospace;font-size:11px;letter-spacing:1.5px;color:#4a5568;display:block;margin-bottom:7px}.form-element .input-wrapper{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border-light);border-radius:10px;padding:0 14px}.form-element .input-wrapper input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-size:15px;padding:13px 0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;border:1px solid transparent}.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}.btn-primary:hover{background:#2559cc}.btn-primary.btn-lg{padding:12px 24px;font-size:14px}.btn-primary.btn-sm{padding:6px 12px;font-size:12px}.btn-success{background:#28a745;color:#fff;border-color:#28a745}.btn-success:hover{background:#219a38}.btn-danger{background:#fff;color:#e53e3e;border-color:#e53e3e}.btn-danger:hover{background:#fff5f5}.btn-secondary{background:#f0f4fb;color:var(--text-light);border-color:var(--border-light)}.btn-secondary:hover{background:#e8eef7}.btn-outline{background:#fff;color:var(--text-light);border:1px solid var(--border-light)}.btn-outline:hover{background:#f0f4fb;color:var(--accent);border-color:var(--accent)}.btn-sm{padding:5px 10px;font-size:11.5px}.btn-lg{padding:12px 24px;font-size:14px}.btn-full{width:100%}.dual-camera{display:grid;grid-template-columns:1fr 1fr;gap:16px}.camera-wrapper{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;overflow:hidden}.camera-container{position:relative;width:100%;aspect-ratio:16/9;background:#e8eef7}.camera-stream{width:100%;height:100%;object-fit:cover}.camera-label{position:absolute;top:8px;left:8px;background:#2f6bead9;color:#fff;font-family:IBM Plex Mono,monospace;font-size:10px;letter-spacing:1px;padding:4px 10px;border-radius:6px}.camera-controls{padding:12px}@media (max-width: 1024px){.stats-grid{grid-template-columns:repeat(2,1fr)}.form-section,.dual-camera{grid-template-columns:1fr}}@media (max-width: 768px){.sidebar{display:none}.login-page{flex-direction:column}.login-left{display:none}.stats-grid{grid-template-columns:1fr}.table-row,.table-row-header{grid-template-columns:1.5fr 1.2fr .8fr}}.text-center{text-align:center}.text-muted{color:var(--text-muted)}.text-dim{color:var(--text-dim)}.mt-16{margin-top:16px}.mb-24{margin-bottom:24px}.flex{display:flex}.flex-center{display:flex;align-items:center;justify-content:center}.gap-8{gap:8px}.gap-16{gap:16px}