:root{--bg-dark: #090d16;--bg-card: rgba(17, 24, 39, .75);--bg-card-hover: rgba(31, 41, 55, .85);--border-color: rgba(255, 255, 255, .12);--border-glow: rgba(0, 240, 255, .4);--accent-cyan: #00f0ff;--accent-purple: #a855f7;--accent-pink: #ec4899;--accent-emerald: #10b981;--text-primary: #f8fafc;--text-secondary: #94a3b8;--text-muted: #64748b;--font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--radius-sm: 8px;--radius-md: 14px;--radius-lg: 20px;--radius-xl: 28px;--shadow-glow: 0 0 25px rgba(0, 240, 255, .25);--glass-backdrop: blur(16px) saturate(180%)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-dark);background-image:radial-gradient(at 10% 10%,rgba(0,240,255,.08) 0px,transparent 50%),radial-gradient(at 90% 90%,rgba(168,85,247,.08) 0px,transparent 50%);color:var(--text-primary);min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}#bg3dCanvas{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:-1;pointer-events:none}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#0f172a80}::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent-cyan)}.navbar{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;background:#0b0f19cc;-webkit-backdrop-filter:var(--glass-backdrop);backdrop-filter:var(--glass-backdrop);border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:100}.brand{display:flex;align-items:center;gap:14px}.brand-logo{width:42px;height:42px;background:linear-gradient(135deg,var(--accent-cyan),var(--accent-purple));border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-glow)}.brand-logo svg{width:24px;height:24px;fill:#fff}.brand-title{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;background:linear-gradient(135deg,#fff,#cbd5e1);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.brand-subtitle{font-size:.75rem;color:var(--accent-cyan);font-weight:600;letter-spacing:.05em;text-transform:uppercase}.nav-actions{display:flex;align-items:center;gap:12px}.mode-tabs{display:flex;background:#ffffff0f;padding:4px;border-radius:var(--radius-lg);border:1px solid var(--border-color)}.mode-tab{padding:8px 18px;border-radius:var(--radius-md);border:none;background:transparent;color:var(--text-secondary);font-size:.875rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .25s ease}.mode-tab.active{background:linear-gradient(135deg,#00f0ff33,#a855f733);color:#fff;border:1px solid rgba(0,240,255,.5);box-shadow:0 0 15px #00f0ff33}.mode-tab:hover:not(.active){color:#fff;background:#ffffff14}.app-container{display:flex;flex-direction:column;align-items:center;gap:24px;padding:24px;flex:1;max-width:900px;margin:0 auto;width:100%}.panel-card{background:var(--bg-card);-webkit-backdrop-filter:var(--glass-backdrop);backdrop-filter:var(--glass-backdrop);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:20px;display:flex;flex-direction:column;gap:16px}.panel-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--border-color)}.panel-title{font-size:1rem;font-weight:700;display:flex;align-items:center;gap:10px}.panel-title svg{width:20px;height:20px;color:var(--accent-cyan)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:var(--radius-md);font-size:.875rem;font-weight:600;cursor:pointer;border:none;transition:all .25s cubic-bezier(.4,0,.2,1);outline:none}.btn-primary{background:linear-gradient(135deg,#00f0ff,#0080ff);color:#040914;box-shadow:0 4px 15px #00f0ff4d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00f0ff80;background:linear-gradient(135deg,#33f3ff,#1a8cff)}.btn-secondary{background:#ffffff14;color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background:#ffffff26;border-color:#ffffff40}.btn-autofit{background:linear-gradient(135deg,#10b981,#059669);color:#fff;padding:14px 20px;font-size:1rem;border-radius:var(--radius-md);box-shadow:0 4px 20px #10b98159;width:100%}.btn-autofit:hover{transform:translateY(-2px);box-shadow:0 6px 25px #10b98180}.btn-danger{background:#ef444426;color:#f87171;border:1px solid rgba(239,68,68,.3)}.btn-danger:hover{background:#ef444440}.btn-sm{padding:6px 12px;font-size:.75rem}.twibbon-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-height:480px;overflow-y:auto;padding-right:4px}.twibbon-item{position:relative;aspect-ratio:1;border-radius:var(--radius-md);border:2px solid var(--border-color);background:#0f172a99;cursor:pointer;overflow:hidden;transition:all .25s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px}.twibbon-item:hover{border-color:var(--accent-cyan);transform:scale(1.03)}.twibbon-item.active{border-color:var(--accent-cyan);box-shadow:0 0 20px #00f0ff66;background:#00f0ff0d}.twibbon-item img{width:100%;height:100%;object-fit:contain}.twibbon-label{position:absolute;bottom:0;left:0;right:0;background:#090d16d9;padding:4px 6px;font-size:.7rem;text-align:center;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.twibbon-delete-btn{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:#ef4444e6;color:#fff;border:none;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease}.twibbon-item:hover .twibbon-delete-btn{opacity:1}.viewport-container{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;min-height:520px;gap:16px}.canvas-wrapper{position:relative;width:100%;max-width:580px;aspect-ratio:1;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 10px 40px #0009;border:1px solid var(--border-color);background:#040914;display:flex;align-items:center;justify-content:center}canvas#mainCanvas{width:100%;height:100%;display:block;cursor:grab}canvas#mainCanvas:active{cursor:grabbing}.video-container{position:absolute;top:0;right:0;bottom:0;left:0;display:none;background:#000}.video-container.active{display:block}video#webcamVideo{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.live-twibbon-overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:5}.camera-hud-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:24px}.hud-scanner-line{position:absolute;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#00f0ff,transparent);box-shadow:0 0 15px #00f0ff;animation:scanLine 2.5s infinite ease-in-out}@keyframes scanLine{0%{top:10%;opacity:.2}50%{top:85%;opacity:1}to{top:10%;opacity:.2}}.hud-status-badge{align-self:flex-start;background:#00f0ff26;border:1px solid #00f0ff;color:#00f0ff;padding:6px 14px;border-radius:var(--radius-sm);font-size:.75rem;font-weight:700;letter-spacing:.08em;display:flex;align-items:center;gap:8px}.hud-status-dot{width:8px;height:8px;background:#00f0ff;border-radius:50%;box-shadow:0 0 8px #00f0ff;animation:pulse 1.2s infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.3)}}.camera-controls-bar{display:flex;gap:12px;justify-content:center;width:100%}.control-group{display:flex;flex-direction:column;gap:8px}.control-label{display:flex;justify-content:space-between;font-size:.8rem;font-weight:600;color:var(--text-secondary)}.control-val{color:var(--accent-cyan)}input[type=range]{-webkit-appearance:none;width:100%;height:6px;background:#ffffff1a;border-radius:3px;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent-cyan);box-shadow:0 0 10px var(--accent-cyan);cursor:pointer;transition:transform .15s ease}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.filter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.filter-btn{padding:8px 4px;background:#ffffff0d;border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:.75rem;font-weight:600;cursor:pointer;text-align:center;transition:all .2s ease}.filter-btn.active,.filter-btn:hover{background:#00f0ff26;border-color:var(--accent-cyan);color:#fff}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#040914d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:none;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal-overlay.active{display:flex}.modal-content{background:#0f172a;border:1px solid var(--border-color);border-radius:var(--radius-xl);padding:28px;width:100%;max-width:480px;box-shadow:0 20px 50px #000000b3;display:flex;flex-direction:column;gap:20px}.modal-header{display:flex;justify-content:space-between;align-items:center}.modal-title{font-size:1.15rem;font-weight:700}.modal-close{background:transparent;border:none;color:var(--text-secondary);font-size:1.5rem;cursor:pointer}.dropzone{border:2px dashed rgba(0,240,255,.4);border-radius:var(--radius-md);padding:32px 16px;text-align:center;background:#00f0ff05;cursor:pointer;transition:all .25s ease}.dropzone:hover{border-color:var(--accent-cyan);background:#00f0ff14}.dropzone-preview{max-width:140px;max-height:140px;margin:0 auto;display:none}.text-input{width:100%;padding:12px 16px;background:#ffffff0d;border:1px solid var(--border-color);border-radius:var(--radius-md);color:#fff;font-size:.9rem;outline:none}.text-input:focus{border-color:var(--accent-cyan);box-shadow:0 0 10px #00f0ff33}.toast-container{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:10px;z-index:2000}.toast{background:#0f172af2;border:1px solid var(--accent-cyan);color:#fff;padding:12px 20px;border-radius:var(--radius-md);font-size:.875rem;font-weight:600;box-shadow:0 8px 25px #00000080;animation:slideIn .3s cubic-bezier(.4,0,.2,1)}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.user-profile-badge{display:flex;align-items:center;gap:10px;background:#ffffff14;border:1px solid rgba(0,240,255,.3);padding:6px 14px 6px 8px;border-radius:var(--radius-xl);-webkit-backdrop-filter:var(--glass-backdrop);backdrop-filter:var(--glass-backdrop)}.user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent-cyan),var(--accent-purple));color:#fff;font-weight:700;font-size:.9rem;display:flex;align-items:center;justify-content:center;box-shadow:0 0 10px #00f0ff66}.user-info-text{display:flex;flex-direction:column}.user-name{font-size:.825rem;font-weight:700;color:var(--text-primary);line-height:1.2;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-role{font-size:.7rem;color:var(--accent-cyan);font-weight:500;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.modal-auth{max-width:520px}.auth-tabs{display:flex;gap:8px;margin-bottom:20px;background:#ffffff0d;padding:6px;border-radius:var(--radius-md);border:1px solid var(--border-color)}.auth-tab{flex:1;padding:10px 16px;border-radius:var(--radius-sm);border:none;background:transparent;color:var(--text-secondary);font-size:.9rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s ease}.auth-tab.active{background:linear-gradient(135deg,#00f0ff40,#a855f740);color:#fff;border:1px solid rgba(0,240,255,.5);box-shadow:0 0 15px #00f0ff33}.auth-panel{display:none}.auth-panel.active{display:block}.autocomplete-wrapper{position:relative;width:100%}.autocomplete-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#0f172afa;-webkit-backdrop-filter:var(--glass-backdrop);backdrop-filter:var(--glass-backdrop);border:1px solid var(--accent-cyan);border-radius:var(--radius-md);max-height:240px;overflow-y:auto;z-index:1000;display:none;box-shadow:0 10px 30px #0009}.autocomplete-dropdown.active{display:block}.autocomplete-item{padding:10px 14px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.06);transition:background .15s ease}.autocomplete-item:last-child{border-bottom:none}.autocomplete-item:hover,.autocomplete-item.selected{background:#00f0ff26}.ac-nama{font-size:.9rem;font-weight:700;color:#fff}.ac-sub{font-size:.75rem;color:var(--text-secondary);display:flex;gap:8px;margin-top:2px}.pegawai-detail-card{margin-top:16px;padding:16px;background:#0f172acc;border:1px solid var(--accent-cyan);border-radius:var(--radius-md);position:relative;box-shadow:inset 0 0 20px #00f0ff14}.detail-badge{font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--accent-cyan);margin-bottom:10px;display:flex;align-items:center;gap:6px}.detail-badge:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-cyan);box-shadow:0 0 8px var(--accent-cyan)}.detail-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.1);font-size:.85rem}.detail-row:last-child{border-bottom:none}.detail-label{color:var(--text-secondary);font-weight:500}.detail-value{color:#fff;font-weight:600;text-align:right;max-width:65%}.highlight-cyan{color:var(--accent-cyan);font-size:.95rem}.highlight-purple{color:var(--accent-purple)}.camera-lock-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;background:#080e1ce6;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;transition:opacity .3s ease,visibility .3s ease}.lock-card{background:#0f172ad9;border:1px solid rgba(0,240,255,.4);box-shadow:0 0 35px #00f0ff33,inset 0 0 20px #00f0ff14;border-radius:var(--radius-lg);padding:32px 28px;max-width:380px;width:100%;display:flex;flex-direction:column;align-items:center;gap:14px;animation:fadeIn .4s ease-out}.lock-icon{font-size:3rem;line-height:1;margin-bottom:2px;filter:drop-shadow(0 0 12px rgba(0,240,255,.7))}.lock-title{font-size:1.2rem;font-weight:800;color:#fff;letter-spacing:.5px;background:linear-gradient(135deg,#fff,var(--accent-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.lock-desc{font-size:.875rem;color:var(--text-secondary);line-height:1.5;margin-bottom:6px}.btn-logout{display:inline-flex;align-items:center;gap:6px;background:#ef444426;border:1px solid rgba(239,68,68,.4);color:#fca5a5;font-size:.75rem;font-weight:600;padding:5px 12px;border-radius:var(--radius-sm);cursor:pointer;margin-left:8px;transition:all .2s ease}.btn-logout:hover{background:#ef444459;border-color:#ef4444;color:#fff;box-shadow:0 0 12px #ef444466}.btn-emerald{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:1px solid rgba(16,185,129,.4);box-shadow:0 4px 14px #10b9814d}.btn-emerald:hover{background:linear-gradient(135deg,#34d399,#10b981);box-shadow:0 0 20px #10b98180;transform:translateY(-1px)}.btn-amber{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border:1px solid rgba(245,158,11,.4);box-shadow:0 4px 14px #f59e0b4d}.btn-amber:hover{background:linear-gradient(135deg,#fbbf24,#f59e0b);box-shadow:0 0 20px #f59e0b80;transform:translateY(-1px)}.btn-danger-outline{background:transparent;color:#f87171;border:1px solid rgba(239,68,68,.4)}.btn-danger-outline:hover{background:#ef444433;color:#fff;border-color:#ef4444}.attendance-mode-bar{display:flex;align-items:center;justify-content:space-between;background:#0f172ab3;border:1px solid var(--border-color);padding:8px 14px;border-radius:var(--radius-md);margin-top:10px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.mode-bar-label{font-size:.8rem;font-weight:600;color:var(--text-secondary)}.attendance-pills{display:flex;gap:8px}.attendance-pill{padding:6px 14px;border-radius:20px;border:1px solid rgba(255,255,255,.1);background:#ffffff0d;color:var(--text-secondary);font-size:.8rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s ease}.attendance-pill.active[data-type=masuk]{background:#10b98133;border-color:#10b981;color:#34d399;box-shadow:0 0 12px #10b9814d}.attendance-pill.active[data-type=pulang]{background:#f59e0b33;border-color:#f59e0b;color:#fbbf24;box-shadow:0 0 12px #f59e0b4d}.pill-dot{width:8px;height:8px;border-radius:50%}.pill-dot.emerald{background:#10b981}.pill-dot.amber{background:#f59e0b}.modal-content.modal-attendance{width:95%;max-width:960px;max-height:90vh;display:flex;flex-direction:column}.att-view-tabs{display:flex;gap:10px;margin-top:14px;margin-bottom:14px;border-bottom:1px solid var(--border-color);padding-bottom:8px}.att-view-tab{padding:8px 16px;border-radius:var(--radius-sm);border:none;background:transparent;color:var(--text-secondary);font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s ease}.att-view-tab.active{background:#00f0ff26;color:var(--accent-cyan);border-bottom:2px solid var(--accent-cyan)}.att-filter-bar{display:flex;gap:10px;margin-bottom:14px;align-items:center;flex-wrap:wrap}.table-wrapper{overflow-x:auto;overflow-y:auto;max-height:420px;border:1px solid var(--border-color);border-radius:var(--radius-md);background:#0b0f1999}.att-table{width:100%;border-collapse:collapse;font-size:.85rem;text-align:left}.att-table th{background:#111827f2;color:var(--accent-cyan);font-weight:700;padding:12px 14px;border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:10}.att-table td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.05);color:var(--text-primary);vertical-align:middle}.att-table tbody tr:hover{background:#ffffff08}.badge-masuk{display:inline-block;padding:3px 10px;border-radius:12px;background:#10b98126;border:1px solid rgba(16,185,129,.4);color:#34d399;font-weight:600;font-size:.75rem}.badge-pulang{display:inline-block;padding:3px 10px;border-radius:12px;background:#f59e0b26;border:1px solid rgba(245,158,11,.4);color:#fbbf24;font-weight:600;font-size:.75rem}.badge-empty{color:var(--text-muted);font-style:italic}.badge-pegawai{color:var(--accent-purple);font-weight:600}.badge-tamu{color:var(--accent-pink);font-weight:600}.modal-content.modal-success{max-width:480px;width:92%;max-height:92vh;overflow-y:auto;box-sizing:border-box;padding:24px 20px;background:#0d1321f2;border:1px solid rgba(0,240,255,.35);border-radius:var(--radius-xl);box-shadow:0 0 40px #00f0ff40,inset 0 0 25px #00f0ff0d;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;flex-direction:column;align-items:center;text-align:center;animation:popIn .35s cubic-bezier(.175,.885,.32,1.275)}@keyframes popIn{0%{opacity:0;transform:scale(.85) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-content.modal-success.is-pulang{border-color:#f59e0b73;box-shadow:0 0 40px #f59e0b40,inset 0 0 25px #f59e0b0d}.success-header{display:flex;flex-direction:column;align-items:center;width:100%;margin-bottom:18px}.success-icon-wrapper{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#10b98133,#00f0ff26);border:2px solid #10b981;display:flex;align-items:center;justify-content:center;margin-bottom:12px;box-shadow:0 0 20px #10b98166;animation:pulseGlow 2s infinite alternate}.modal-content.modal-success.is-pulang .success-icon-wrapper{background:linear-gradient(135deg,#f59e0b33,#ec489926);border-color:#f59e0b;box-shadow:0 0 20px #f59e0b66}@keyframes pulseGlow{0%{transform:scale(1);box-shadow:0 0 15px #10b9814d}to{transform:scale(1.05);box-shadow:0 0 25px #10b98199}}.success-icon-svg{width:36px;height:36px;stroke:#10b981}.modal-content.modal-success.is-pulang .success-icon-svg{stroke:#f59e0b}.success-type-badge{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;border-radius:12px;background:#10b98126;color:#34d399;border:1px solid rgba(16,185,129,.4);margin-bottom:8px}.modal-content.modal-success.is-pulang .success-type-badge{background:#f59e0b26;color:#fbbf24;border-color:#f59e0b66}.success-main-title{font-size:1.3rem;font-weight:700;color:#fff;margin-bottom:4px}.success-subtitle{font-size:.8rem;color:var(--text-secondary)}.success-body{width:100%;display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:20px}.success-photo-box{width:175px;height:175px;border-radius:14px;overflow:hidden;border:2px solid var(--accent-cyan);box-shadow:0 8px 24px #00f0ff59;background:#040914;display:flex;align-items:center;justify-content:center;position:relative}.modal-content.modal-success.is-pulang .success-photo-box{border-color:#f59e0b;box-shadow:0 8px 24px #f59e0b59}.success-photo-img{width:100%;height:100%;object-fit:contain;border-radius:12px}.success-photo-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent-cyan),var(--accent-purple));color:#fff;font-size:2.5rem;font-weight:800}.success-info-card{width:100%;background:#0f172ab3;border:1px solid var(--border-color);border-radius:var(--radius-md);padding:14px 16px;display:flex;flex-direction:column;gap:8px}.info-row{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;padding:4px 0;border-bottom:1px dashed rgba(255,255,255,.07)}.info-row:last-child{border-bottom:none}.info-label{color:var(--text-secondary);font-weight:500}.info-value{color:#fff;font-weight:600;text-align:right}.highlight-gold{color:#f59e0b;font-weight:700}.user-type-badge{padding:2px 8px;border-radius:8px;font-size:.7rem;font-weight:700;letter-spacing:.04em;background:#a855f733;color:#c084fc;border:1px solid rgba(168,85,247,.4)}.user-type-badge.is-tamu{background:#ec489933;color:#f472b6;border-color:#ec489966}.status-pill{padding:3px 10px;border-radius:12px;font-size:.75rem;font-weight:700;background:#10b98133;color:#34d399;border:1px solid rgba(16,185,129,.4)}.status-pill.status-late{background:#ef444433;color:#f87171;border-color:#ef444466}.status-pill.status-early{background:#f59e0b33;color:#fbbf24;border-color:#f59e0b66}.success-footer{width:100%;display:flex;gap:10px;justify-content:center}.success-footer button{flex:1;justify-content:center;padding:12px}@media (max-width: 576px){.modal-content.modal-success{width:96%;padding:18px 14px;max-height:94vh}.success-photo-box{width:145px;height:145px}.success-main-title{font-size:1.15rem}.success-subtitle{font-size:.75rem}.success-info-card{padding:10px 12px;gap:6px}.info-row{font-size:.78rem;padding:3px 0;gap:6px}.info-label{min-width:85px;font-size:.75rem}.info-value{font-size:.78rem}}@media (max-height: 700px){.modal-content.modal-success{padding:16px 14px;max-height:96vh}.success-header{margin-bottom:8px}.success-icon-wrapper{width:44px;height:44px;margin-bottom:6px}.success-icon-svg{width:24px;height:24px}.success-photo-box{width:125px;height:125px}.success-body{gap:10px;margin-bottom:12px}}@media (max-width: 1024px){.app-container{display:flex;flex-direction:column;gap:20px;padding:16px}.viewport-container{order:1;min-height:auto;width:100%}.canvas-wrapper{max-width:100%;width:100%;max-height:70vh}aside.panel-card:nth-of-type(2){order:2}aside.panel-card:nth-of-type(1){order:3}.twibbon-list{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));max-height:280px}}@media (max-width: 768px){.navbar{flex-direction:column;align-items:stretch;gap:12px;padding:12px 16px}.brand{justify-content:center;width:100%}.brand-subtitle{display:none}.mode-tabs{width:100%;justify-content:center}.mode-tab{flex:1;justify-content:center;padding:8px 12px;font-size:.8rem}.nav-actions{width:100%;justify-content:center;flex-wrap:wrap}.user-profile-badge{width:100%;justify-content:space-between}.user-info-text{max-width:180px}.camera-controls-bar{flex-direction:column;width:100%;gap:10px}.camera-controls-bar button{width:100%;justify-content:center;padding:12px}.attendance-mode-bar{flex-direction:column;align-items:stretch;gap:8px;width:100%}.attendance-pills{width:100%}.attendance-pill{flex:1;justify-content:center}.filter-grid{grid-template-columns:repeat(3,1fr)}.modal-content{padding:16px;margin:10px;width:95%;max-height:92vh}.att-filter-bar{flex-direction:column;align-items:stretch}.att-filter-bar input,.att-filter-bar button{width:100%!important}.modal-footer{flex-direction:column;gap:12px;align-items:stretch!important;text-align:center}.modal-footer>div{width:100%;display:flex;gap:8px}.modal-footer button{flex:1}}@media (max-width: 480px){.brand-title{font-size:1.1rem}.brand-logo{width:36px;height:36px}.brand-logo svg{width:20px;height:20px}.twibbon-list{grid-template-columns:repeat(3,1fr);max-height:220px}.filter-grid{grid-template-columns:repeat(2,1fr)}.att-table th,.att-table td{padding:8px;font-size:.75rem}.hud-status-badge{font-size:.65rem;padding:4px 8px}}.modal-admin-pin{max-width:440px;width:90%;padding:24px;background:#0d1321f5;border:1px solid rgba(245,158,11,.5);box-shadow:0 0 35px #f59e0b40,inset 0 0 20px #f59e0b0d}.admin-lock-icon{font-size:2.2rem;line-height:1;background:#f59e0b26;padding:8px 12px;border-radius:var(--radius-md);border:1px solid rgba(245,158,11,.4)}.admin-pin-body{display:flex;flex-direction:column;gap:16px;margin-top:14px}.pin-field-wrapper{position:relative;display:flex;align-items:center}.pin-input{letter-spacing:.4em;font-size:1.4rem;font-weight:700;text-align:center;padding-right:45px!important;color:#fbbf24;border-color:#f59e0b80!important;background:#0f172ae6!important}.pin-input:focus{border-color:#f59e0b!important;box-shadow:0 0 15px #f59e0b66!important}.btn-toggle-pin{position:absolute;right:10px;background:transparent;border:none;font-size:1.1rem;cursor:pointer;opacity:.7;transition:opacity .2s}.btn-toggle-pin:hover{opacity:1}.pin-error-msg{color:#f87171;background:#ef444426;border:1px solid rgba(239,68,68,.4);padding:8px 12px;border-radius:var(--radius-sm);font-size:.8rem;font-weight:600;margin-top:8px;animation:shake .4s cubic-bezier(.36,.07,.19,.97) both}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}.pin-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}.keypad-btn{padding:12px;font-size:1.25rem;font-weight:700;color:#fff;background:#ffffff0f;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-md);cursor:pointer;transition:all .15s ease;-webkit-user-select:none;user-select:none}.keypad-btn:hover{background:#f59e0b33;border-color:#f59e0b;color:#fbbf24;transform:translateY(-1px)}.keypad-btn:active{transform:scale(.96);background:#f59e0b66}.keypad-action{background:#ef444426;color:#fca5a5;border-color:#ef44444d}.keypad-action:hover{background:#ef44444d;color:#fff;border-color:#ef4444}.admin-badge-unlocked{font-size:.7rem;font-weight:700;padding:3px 8px;border-radius:10px;background:#10b98133;color:#34d399;border:1px solid rgba(16,185,129,.4)}.btn-warning-outline{background:transparent;color:#fbbf24;border:1px solid rgba(245,158,11,.4)}.btn-warning-outline:hover{background:#f59e0b33;border-color:#f59e0b;color:#fff}.admin-main-tabs{display:flex;gap:8px;margin-top:10px;border-bottom:2px solid var(--border-color);padding-bottom:8px}.admin-main-tab{padding:8px 18px;border-radius:var(--radius-sm);border:1px solid transparent;background:#ffffff0d;color:var(--text-secondary);font-size:.875rem;font-weight:700;cursor:pointer;transition:all .2s ease}.admin-main-tab:hover{color:#fff;background:#ffffff1a}.admin-main-tab.active{background:linear-gradient(135deg,#00f0ff33,#a855f733);color:var(--accent-cyan);border-color:#00f0ff66;box-shadow:0 0 15px #00f0ff33}.admin-twibbon-card{background:#0f172ad9;border:1px solid var(--border-color);border-radius:var(--radius-md);padding:12px;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;transition:all .2s ease}.admin-twibbon-card:hover{border-color:var(--accent-cyan);box-shadow:0 0 15px #00f0ff33}.admin-twibbon-card.is-active-global{border-color:#10b981;background:#10b9811a;box-shadow:0 0 20px #10b9814d}.admin-twibbon-img{width:100px;height:100px;object-fit:contain;border-radius:var(--radius-sm);background:#0f172a}.admin-twibbon-name{font-size:.8rem;font-weight:700;color:#fff;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.btn-set-global-active{width:100%;font-size:.75rem;padding:6px 8px;justify-content:center}.admin-only-control,.twibbon-delete-btn{display:none!important}body.is-admin .admin-only-control,body.is-admin .twibbon-delete-btn{display:flex!important}