@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap";.login-page{justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.login-card{-webkit-backdrop-filter:blur(24px);background:#111827b3;border:1px solid #ffffff14;border-radius:24px;width:100%;max-width:440px;padding:48px 40px;animation:.4s cubic-bezier(.4,0,.2,1) fadeInScale;box-shadow:0 8px 32px #00000080,0 0 40px #6366f126}.login-header{text-align:center;margin-bottom:40px}.login-logo-img{object-fit:contain;border-radius:10px;width:70%;height:auto;margin:0 auto 20px;display:block}.login-title{color:#f1f5f9;letter-spacing:-.03em;margin-bottom:8px;font-size:1.75rem;font-weight:800}.login-desc{color:#94a3b8;font-size:.9rem;line-height:1.5}.login-hint{text-align:center;color:#64748b;margin-top:24px;font-size:.8rem}.error-alert{color:#ef4444;background:#ef44441a;border:1px solid #ef44444d;border-radius:12px;align-items:center;gap:10px;margin-bottom:20px;padding:14px 20px;font-size:.85rem;animation:.3s ease-out shakeX;display:flex}@keyframes glow{0%,to{box-shadow:0 0 20px #6366f133}50%{box-shadow:0 0 40px #6366f166}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes shakeX{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}@media (width<=640px){.login-card{border-radius:16px;padding:36px 24px}.login-title{font-size:1.4rem}.login-logo-img{border-radius:10px;width:70%;height:auto}}.navbar{-webkit-backdrop-filter:blur(20px);z-index:100;background:#0a0e1ad9;border-bottom:1px solid #ffffff14;padding:16px 0;animation:.4s ease-out slideDown;position:sticky;top:0}.navbar-inner{justify-content:space-between;align-items:center;max-width:600px;margin:0 auto;padding:0 20px;display:flex}.navbar-brand{align-items:center;gap:12px;display:flex}.navbar-logo-img{object-fit:contain;width:auto;height:40px}.navbar-title{background:linear-gradient(135deg,#6366f1,#8b5cf6,#a78bfa);-webkit-text-fill-color:transparent;letter-spacing:-.02em;-webkit-background-clip:text;background-clip:text;font-size:1.1rem;font-weight:700}.navbar-subtitle{color:#64748b;letter-spacing:.05em;text-transform:uppercase;font-size:.7rem;font-weight:400}.navbar-user{align-items:center;gap:12px;display:flex}.navbar-user-info{text-align:right}.navbar-user-name{color:#f1f5f9;font-size:.85rem;font-weight:600}.navbar-user-role{color:#64748b;text-transform:uppercase;letter-spacing:.05em;font-size:.7rem}.btn-logout{color:#ef4444;cursor:pointer;background:#ef44441a;border:1px solid #ef44444d;border-radius:8px;padding:8px 16px;font-family:Inter,sans-serif;font-size:.8rem;font-weight:600;transition:all .15s}.btn-logout:hover{color:#fff;background:#ef4444;transform:translateY(-1px);box-shadow:0 4px 12px #ef44444d}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@media (width<=640px){.navbar-user-info{display:none}}.scanner-wrapper{-webkit-backdrop-filter:blur(16px);background:#111827b3;border:1px solid #ffffff14;border-radius:24px;animation:.4s ease-out fadeIn;overflow:hidden;box-shadow:0 8px 32px #00000080}.scanner-header{text-align:center;padding:24px 24px 16px}.scanner-title{color:#f1f5f9;margin-bottom:4px;font-size:1.2rem;font-weight:700}.scanner-desc{color:#94a3b8;font-size:.85rem}#qr-reader{background:#000;width:100%;border:none!important}#qr-reader video{border-radius:0!important}#qr-reader__scan_region{min-height:280px!important}#qr-reader__dashboard{padding:16px!important}#qr-reader__dashboard_section{padding:8px 0!important}#qr-reader__dashboard_section_csr button,#qr-reader__dashboard_section_fsr button{color:#fff!important;cursor:pointer!important;background:linear-gradient(135deg,#6366f1,#8b5cf6,#a78bfa)!important;border:none!important;border-radius:8px!important;padding:10px 20px!important;font-family:Inter,sans-serif!important;font-weight:600!important;transition:all .15s!important}#qr-reader__dashboard_section_csr button:hover,#qr-reader__dashboard_section_fsr button:hover{transform:translateY(-1px)!important;box-shadow:0 4px 12px #6366f14d!important}#qr-reader__dashboard_section_csr select{color:#f1f5f9!important;background:#ffffff0d!important;border:1px solid #ffffff14!important;border-radius:8px!important;padding:8px 12px!important;font-family:Inter,sans-serif!important}#qr-reader__status_span{color:#94a3b8!important;font-family:Inter,sans-serif!important;font-size:.85rem!important}#qr-reader__header_message{color:#94a3b8!important;border:none!important;font-family:Inter,sans-serif!important}#qr-reader img[alt=Info\ icon]{display:none!important}.scanner-manual{padding:0 24px 24px}.scanner-manual-title{color:#64748b;text-transform:uppercase;letter-spacing:.06em;text-align:center;margin-bottom:12px;font-size:.8rem;font-weight:600}.scanner-manual-input{gap:8px;display:flex}.scanner-manual-input .form-input{letter-spacing:.05em;flex:1;font-family:JetBrains Mono,monospace;font-size:.85rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.ticket-result{animation:.4s cubic-bezier(.4,0,.2,1) slideUp}.ticket-card{-webkit-backdrop-filter:blur(16px);background:#111827b3;border:1px solid #ffffff14;border-radius:24px;overflow:hidden;box-shadow:0 8px 32px #00000080}.ticket-status-bar{align-items:center;gap:12px;padding:16px 24px;font-size:.9rem;font-weight:700;display:flex}.ticket-status-bar.status-valid{color:#10b981;background:#10b9811a;border-bottom:1px solid #10b9814d}.ticket-status-bar.status-processed{color:#f59e0b;background:#f59e0b1a;border-bottom:1px solid #f59e0b4d}.ticket-status-icon{border-radius:9999px;justify-content:center;align-items:center;width:32px;height:32px;font-size:16px;display:flex}.status-valid .ticket-status-icon{background:#10b98133}.status-processed .ticket-status-icon{background:#f59e0b33}.ticket-body{padding:24px}.ticket-header{border-bottom:1px dashed #ffffff14;justify-content:space-between;align-items:flex-start;margin-bottom:24px;padding-bottom:20px;display:flex}.ticket-location{color:#f1f5f9;margin-bottom:4px;font-size:1.1rem;font-weight:700}.ticket-number{color:#94a3b8;font-family:JetBrains Mono,monospace;font-size:.85rem}.ticket-vehicle-badge{color:#fff;letter-spacing:.05em;background:linear-gradient(135deg,#6366f1,#8b5cf6,#a78bfa);border-radius:9999px;flex-shrink:0;padding:6px 16px;font-size:.75rem;font-weight:700}.ticket-details{grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px;display:grid}.ticket-detail-item{background:#ffffff0d;border:1px solid #ffffff14;border-radius:12px;padding:14px}.ticket-detail-item.full-width{grid-column:1/-1}.ticket-detail-label{color:#64748b;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;font-size:.7rem;font-weight:600}.ticket-detail-value{color:#f1f5f9;font-size:.95rem;font-weight:600}.ticket-detail-value.mono{font-family:JetBrains Mono,monospace;font-size:.85rem}.ticket-detail-value.highlight{color:#6366f1;font-size:1.2rem;font-weight:800}.ticket-detail-voucher{color:#f59e0b;background:#f59e0b26;border:1px solid #f59e0b4d;border-radius:8px;margin-top:8px;padding:4px 10px;font-size:.75rem;font-weight:600;display:inline-block}.ticket-qr-code{color:#64748b;word-break:break-all;text-align:center;background:#ffffff0d;border:1px solid #ffffff14;border-radius:8px;margin-bottom:24px;padding:12px;font-family:JetBrains Mono,monospace;font-size:.75rem}.notes-section{margin-bottom:16px}.notes-textarea{color:#f1f5f9;resize:vertical;background:#ffffff0d;border:1px solid #ffffff14;border-radius:12px;outline:none;width:100%;min-height:80px;padding:12px 16px;font-family:Inter,sans-serif;font-size:.9rem;transition:all .15s}.notes-textarea::placeholder{color:#64748b}.notes-textarea:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.ticket-actions{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;display:grid}.ticket-actions .btn{padding:16px;font-size:1rem}.btn-scan-again{width:100%}.status-result{text-align:center;padding:40px 24px;animation:.4s ease-out fadeInScale}.status-result-icon{border-radius:9999px;justify-content:center;align-items:center;width:80px;height:80px;margin:0 auto 20px;font-size:40px;display:flex}.status-result-icon.success{background:#10b9811a;border:2px solid #10b9814d;animation:.6s ease-out successPulse}.status-result-icon.error{background:#ef44441a;border:2px solid #ef44444d}.status-result-title{color:#f1f5f9;margin-bottom:8px;font-size:1.3rem;font-weight:700}.status-result-message{color:#94a3b8;white-space:pre-line;margin-bottom:24px;font-size:.9rem;line-height:1.6}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes successPulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@media (width<=640px){.ticket-details,.ticket-actions{grid-template-columns:1fr}}.history-view{animation:.25s ease-out fadeIn}.history-filters{flex-wrap:wrap;gap:8px;margin-bottom:16px;display:flex}.filter-chip{color:#64748b;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff14;border-radius:9999px;padding:8px 16px;font-family:Inter,sans-serif;font-size:.8rem;font-weight:600;transition:all .15s}.filter-chip:hover{color:#94a3b8;border-color:#6366f180}.filter-chip.active{color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6,#a78bfa);border-color:#0000}.history-controls{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:24px;display:flex}.date-filters{background:#ffffff08;border:1px solid #ffffff14;border-radius:12px;align-items:center;gap:8px;padding:4px 8px;display:flex}.date-input{width:140px;color:#f1f5f9!important;background:0 0!important;border:none!important;padding:8px!important;font-family:JetBrains Mono,monospace!important;font-size:.85rem!important}.date-input::-webkit-calendar-picker-indicator{filter:invert();opacity:.5;cursor:pointer}.date-separator{color:#64748b;font-weight:700}.btn-export{padding:10px 16px;font-size:.85rem}.history-list{flex-direction:column;gap:12px;display:flex}.history-item{-webkit-backdrop-filter:blur(8px);cursor:default;background:#111827b3;border:1px solid #ffffff14;border-radius:16px;align-items:center;gap:16px;padding:16px 20px;transition:all .15s;animation:.25s ease-out backwards fadeIn;display:flex}.history-item:hover{background:#ffffff14;border-color:#6366f180}.history-item-icon{border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:20px;display:flex}.history-item-icon.mobil{background:#6366f126}.history-item-icon.motor{background:#8b5cf626}.history-item-icon.box{background:#f59e0b26}.history-item-info{flex:1;min-width:0}.history-item-title{color:#f1f5f9;margin-bottom:2px;font-size:.9rem;font-weight:600}.history-item-subtitle{color:#64748b;white-space:nowrap;text-overflow:ellipsis;font-size:.8rem;overflow:hidden}.history-item-voucher{color:#f59e0b;background:#f59e0b1a;border:1px solid #f59e0b33;border-radius:6px;margin-top:4px;padding:2px 8px;font-size:.7rem;font-weight:600;display:inline-block}.history-item-status{text-align:right;flex-shrink:0}.status-badge{text-transform:uppercase;letter-spacing:.05em;border-radius:9999px;padding:4px 12px;font-size:.7rem;font-weight:700;display:inline-block}.status-badge.masuk{color:#3b82f6;background:#3b82f61a;border:1px solid #3b82f64d}.status-badge.approve{color:#10b981;background:#10b9811a;border:1px solid #10b9814d}.status-badge.reject{color:#ef4444;background:#ef44441a;border:1px solid #ef44444d}.history-item-tarif{color:#f1f5f9;margin-top:4px;font-family:JetBrains Mono,monospace;font-size:.85rem;font-weight:700}.history-empty{text-align:center;color:#64748b;padding:48px 20px}.history-empty-icon{opacity:.5;margin-bottom:16px;font-size:48px}.history-empty-text{font-size:.95rem}@media (width<=640px){.history-item{padding:12px 16px}}.loading-overlay{-webkit-backdrop-filter:blur(8px);z-index:9998;background:#0a0e1acc;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;animation:.15s ease-out fadeIn;display:flex;position:fixed;top:0;left:0}.loading-spinner{border:3px solid #ffffff14;border-top-color:#6366f1;border-radius:50%;width:48px;height:48px;margin-bottom:16px;animation:.8s linear infinite spin}.loading-text{color:#94a3b8;font-size:.9rem;font-weight:500}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.main-content{flex:1;padding:24px 0}.container{width:100%;max-width:600px;margin:0 auto;padding:0 20px}.nav-tabs{background:#ffffff0d;border:1px solid #ffffff14;border-radius:16px;gap:4px;margin-bottom:24px;padding:4px;display:flex}.nav-tab{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:12px;flex:1;justify-content:center;align-items:center;gap:8px;padding:12px 16px;font-family:Inter,sans-serif;font-size:.85rem;font-weight:600;transition:all .15s;display:flex}.nav-tab:hover{color:#94a3b8;background:#ffffff0d}.nav-tab.active{color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6,#a78bfa);box-shadow:0 1px 2px #0000004d}.view-content{animation:.25s ease-out viewFadeIn}@keyframes viewFadeIn{0%{opacity:0}to{opacity:1}}@media (width<=640px){.container{padding:0 16px}}.toast-container{z-index:9999;flex-direction:column;gap:8px;display:flex;position:fixed;top:80px;right:20px}.toast{-webkit-backdrop-filter:blur(16px);background:#111827f2;border:1px solid #ffffff14;border-radius:12px;align-items:center;gap:12px;min-width:300px;max-width:420px;padding:14px 20px;animation:.25s cubic-bezier(.4,0,.2,1) toastSlideIn;display:flex;box-shadow:0 8px 32px #00000080}.toast.success{border-left:3px solid #10b981}.toast.error{border-left:3px solid #ef4444}.toast.info{border-left:3px solid #3b82f6}.toast-icon{flex-shrink:0;font-size:20px}.toast-message{color:#f1f5f9;flex:1;font-size:.85rem}.toast-close{color:#64748b;cursor:pointer;background:0 0;border:none;padding:4px;font-size:18px;transition:color .15s}.toast-close:hover{color:#f1f5f9}@keyframes toastSlideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@media (width<=640px){.toast-container{padding:0 16px;left:0;right:0}.toast{min-width:unset;max-width:none}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{color:#f1f5f9;background:#0a0e1a;min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(80% 60% at 20% 10%,#6366f11f,#0000),radial-gradient(60% 80% at 80% 90%,#8b5cf614,#0000),radial-gradient(50% 50%,#6366f108,#0000);width:100%;height:100%;position:fixed;top:0;left:0}.app-container{z-index:1;flex-direction:column;min-height:100vh;display:flex;position:relative}.form-group{margin-bottom:20px}.form-label{color:#94a3b8;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;font-size:.8rem;font-weight:600;display:block}.form-input{color:#f1f5f9;background:#ffffff0d;border:1px solid #ffffff14;border-radius:12px;outline:none;width:100%;padding:14px 16px;font-family:Inter,sans-serif;font-size:.95rem;transition:all .15s}.form-input::placeholder{color:#64748b}.form-input:focus{background:#6366f10d;border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.form-input-icon{position:relative}.form-input-icon .form-input{padding-left:44px}.form-input-icon .icon{opacity:.5;font-size:18px;position:absolute;top:50%;left:14px;transform:translateY(-50%)}.btn{cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:14px 28px;font-family:Inter,sans-serif;font-size:.95rem;font-weight:600;line-height:1;text-decoration:none;transition:all .15s;display:inline-flex;position:relative;overflow:hidden}.btn:active{transform:scale(.97)}.btn-primary{color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6,#a78bfa);box-shadow:0 4px 16px #6366f14d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px #6366f166}.btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}.btn-success{color:#fff;background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 4px 16px #10b9814d}.btn-success:hover{transform:translateY(-2px);box-shadow:0 8px 24px #10b98166}.btn-danger{color:#fff;background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 4px 16px #ef44444d}.btn-danger:hover{transform:translateY(-2px);box-shadow:0 8px 24px #ef444466}.btn-ghost{color:#94a3b8;background:#ffffff0d;border:1px solid #ffffff14}.btn-ghost:hover{color:#f1f5f9;background:#ffffff14;border-color:#6366f180}.btn-full{width:100%}.btn-lg{padding:16px 32px;font-size:1rem}.spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:18px;height:18px;animation:.6s linear infinite spinAnim}@keyframes spinAnim{0%{transform:rotate(0)}to{transform:rotate(360deg)}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#64748b}