:root{--bg-main:#0b0f19;--bg-card:#111827;--bg-card-subtle:#1a2234;--border-color:#243046;--border-focus:#3b82f6;--text-main:#f9fafb;--text-muted:#94a3b8;--primary:#2563eb;--primary-hover:#1d4ed8;--primary-glow:#2563eb59;--success:#10b981;--success-bg:#10b9811f;--success-border:#059669;--warning:#f59e0b;--warning-bg:#f59e0b1f;--warning-border:#d97706;--danger:#ef4444;--danger-bg:#ef44441f;--danger-border:#dc2626;--radius-lg:18px;--radius-md:12px;--radius-sm:8px;--shadow-card:0 10px 30px -10px #00000080;--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-main);color:var(--text-main);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.5}.app-container{flex-direction:column;gap:24px;max-width:1000px;margin:0 auto;padding:16px 20px 48px;display:flex}.app-header{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;display:flex}.header-brand{align-items:center;gap:14px;display:flex}.brand-logo{width:44px;height:44px;box-shadow:0 4px 14px var(--primary-glow);background:linear-gradient(135deg,#2563eb,#3b82f6);border-radius:12px;justify-content:center;align-items:center;display:flex}.brand-title{letter-spacing:-.02em;color:#fff;font-size:1.15rem;font-weight:700}.brand-subtitle{color:var(--text-muted);font-size:.82rem}.header-status-badge{color:#34d399;background:#10b9811a;border:1px solid #10b98140;border-radius:20px;align-items:center;gap:8px;padding:6px 12px;font-size:.8rem;font-weight:500;display:inline-flex}.status-dot-live{background-color:#10b981;border-radius:50%;width:8px;height:8px;animation:1.8s infinite pulse-dot;box-shadow:0 0 10px #10b981}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}.hero-action-section{border:1px solid var(--border-color);border-radius:var(--radius-lg);text-align:center;box-shadow:var(--shadow-card);background:linear-gradient(165deg,#131b2e 0%,#0f172a 100%);padding:36px 24px;position:relative;overflow:hidden}.hero-glow-bg{filter:blur(40px);pointer-events:none;background:radial-gradient(circle,#3b82f640 0%,#3b82f600 70%);width:320px;height:180px;position:absolute;top:-40px;left:50%;transform:translate(-50%)}.hero-content{z-index:1;flex-direction:column;align-items:center;gap:16px;max-width:650px;margin:0 auto;display:flex;position:relative}.stats-pills-row{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.stat-pill{background:var(--bg-card-subtle);border:1px solid var(--border-color);color:var(--text-muted);border-radius:20px;align-items:center;gap:6px;padding:4px 12px;font-size:.8rem;display:inline-flex}.stat-pill strong{color:#60a5fa}.hero-heading{color:#fff;letter-spacing:-.02em;font-size:1.7rem;font-weight:800}.hero-desc{color:var(--text-muted);font-size:.95rem;line-height:1.6}.action-buttons-group{flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;width:100%;margin-top:10px;display:flex}.btn-hero-primary{color:#fff;cursor:pointer;background:linear-gradient(135deg,#2563eb,#1d4ed8);border:1px solid #3b82f6;border-radius:14px;align-items:center;gap:14px;padding:14px 28px;transition:all .25s;display:flex;position:relative;overflow:hidden;box-shadow:0 8px 24px #2563eb66}.btn-hero-primary:hover{background:linear-gradient(135deg,#3b82f6,#2563eb);transform:translateY(-2px);box-shadow:0 12px 30px #2563eb99}.btn-hero-primary:active{transform:translateY(0)}.btn-hero-icon{background:#ffffff26;border-radius:10px;justify-content:center;align-items:center;padding:8px;display:flex}.btn-hero-text{text-align:left}.btn-hero-main-label{letter-spacing:.02em;font-size:1.05rem;font-weight:700;display:block}.btn-hero-sub-label{opacity:.85;font-size:.75rem;display:block}.btn-hero-secondary{background:var(--bg-card-subtle);border:1px solid var(--border-color);color:var(--text-main);cursor:pointer;border-radius:14px;align-items:center;gap:8px;padding:18px 20px;font-size:.92rem;font-weight:600;transition:all .2s;display:flex}.btn-hero-secondary:hover{background:#222d44;border-color:#3b82f6}.result-section{animation:.3s cubic-bezier(.16,1,.3,1) slide-up}@keyframes slide-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.result-card-container{border-radius:var(--radius-lg);box-shadow:var(--shadow-card);flex-direction:column;gap:20px;padding:24px;transition:all .3s;display:flex}.result-success{border:2px solid var(--success-border);background:linear-gradient(170deg,#063726 0%,#09261c 100%);box-shadow:0 10px 30px #10b98133}.result-warning{border:2px solid var(--warning-border);background:linear-gradient(170deg,#382405 0%,#291a03 100%);box-shadow:0 10px 30px #f59e0b33}.result-header{align-items:flex-start;gap:16px;display:flex}.result-icon-wrapper{flex-shrink:0;padding-top:4px}.result-status-text{flex-direction:column;gap:8px;display:flex}.status-pill{letter-spacing:.05em;border-radius:6px;align-self:flex-start;padding:4px 10px;font-size:.75rem;font-weight:800;display:inline-block}.pill-success{color:#a7f3d0;background:#047857}.pill-warning{color:#fde68a;background:#b45309}.result-main-message{color:#fff;letter-spacing:-.01em;font-size:1.45rem;font-weight:800;line-height:1.35}.result-warning .result-main-message{color:#fef08a}.result-details-grid{border-radius:var(--radius-md);background:#00000040;border:1px solid #ffffff12;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;padding:18px;display:grid}.detail-item{flex-direction:column;gap:4px;display:flex}.detail-item.full-width{grid-column:1/-1}.detail-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;align-items:center;gap:6px;font-size:.78rem;display:flex}.detail-value{color:#fff;word-break:break-all;font-size:1.05rem;font-weight:500}.detail-value.highlight-cccd{color:#60a5fa;letter-spacing:.04em;font-family:monospace;font-size:1.25rem;font-weight:700}.detail-value.text-time{color:#fbbf24;font-size:1.15rem;font-weight:700}.warning-banner-sm{border-radius:var(--radius-sm);color:#fef3c7;background:#f59e0b26;border-left:4px solid #f59e0b;margin-top:6px;padding:10px 14px;font-size:.88rem}.result-actions{flex-wrap:wrap;gap:12px;display:flex}.modal-backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:999;background:#030712d9;justify-content:center;align-items:center;padding:16px;animation:.2s ease-out fade-in;display:flex;position:fixed;inset:0}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.scanner-modal-card,.manual-modal-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);flex-direction:column;width:100%;max-width:480px;display:flex;overflow:hidden;box-shadow:0 25px 50px -12px #000000b3}.scanner-modal-header{border-bottom:1px solid var(--border-color);background:#141c2e;justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.scanner-title-wrap{align-items:center;gap:12px;display:flex}.icon-pulse-badge{background:#2563eb33;border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.modal-title{color:#fff;font-size:1.05rem;font-weight:700}.modal-subtitle{color:var(--text-muted);font-size:.78rem}.btn-close{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:4px;transition:all .2s;display:flex}.btn-close:hover{color:#fff;background:#ffffff1a}.camera-viewfinder-container{background:#000;justify-content:center;align-items:center;width:100%;height:420px;min-height:380px;display:flex;position:relative;overflow:hidden}.camera-video-elem{width:100%!important;height:100%!important}.camera-video-elem video{object-fit:cover!important;width:100%!important;height:100%!important}.scanner-overlay-guide{pointer-events:none;z-index:10;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.quick-zoom-badge{color:#38bdf8;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:auto;cursor:pointer;background:#000000b3;border:1px solid #38bdf866;border-radius:20px;padding:4px 12px;font-size:.78rem;font-weight:600;position:absolute;top:14px}.scanner-target-box{border-radius:12px;width:270px;height:270px;position:relative}.corner-bracket{border-style:solid;border-color:#38bdf8;width:28px;height:28px;position:absolute}.corner-bracket.top-left{border-width:4px 0 0 4px;border-top-left-radius:10px;top:0;left:0}.corner-bracket.top-right{border-width:4px 4px 0 0;border-top-right-radius:10px;top:0;right:0}.corner-bracket.bottom-left{border-width:0 0 4px 4px;border-bottom-left-radius:10px;bottom:0;left:0}.corner-bracket.bottom-right{border-width:0 4px 4px 0;border-bottom-right-radius:10px;bottom:0;right:0}.scan-laser-line{background:linear-gradient(90deg,#38bdf800 0%,#38bdf8 50%,#38bdf800 100%);height:3px;animation:2.2s ease-in-out infinite laser-scan;position:absolute;left:0;right:0;box-shadow:0 0 12px #38bdf8}@keyframes laser-scan{0%{opacity:.3;top:8%}50%{opacity:1;top:92%}to{opacity:.3;top:8%}}.scanner-tip-bubble{color:#f1f5f9;text-shadow:0 1px 3px #000c;background:#0f172abf;border:1px solid #ffffff1a;border-radius:20px;align-items:center;gap:6px;margin-top:16px;padding:6px 14px;font-size:.78rem;display:flex}.scanner-loading-overlay{color:var(--text-muted);z-index:20;background:#0b0f19e6;flex-direction:column;justify-content:center;align-items:center;gap:12px;font-size:.9rem;display:flex;position:absolute;inset:0}.scanner-error-card{text-align:center;z-index:25;background:#111827;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:24px;display:flex;position:absolute;inset:0}.error-text{color:#fca5a5;font-size:.88rem;line-height:1.5}.error-icon-box{background:#ef444426;border-radius:50%;justify-content:center;align-items:center;padding:12px;display:flex}.permission-actions-box{flex-direction:column;gap:10px;width:100%;display:flex}.sub-actions-row{justify-content:center;gap:8px;display:flex}.permission-guide-hint{color:var(--text-muted);border-radius:var(--radius-sm);border:1px dashed var(--border-color);text-align:left;background:#ffffff0d;padding:8px 12px;font-size:.75rem;line-height:1.4}.scanner-footer-controls{border-top:1px solid var(--border-color);background:#141c2e;justify-content:space-around;align-items:center;padding:14px 16px;display:flex}.ctrl-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:8px;flex-direction:column;align-items:center;gap:4px;padding:6px 12px;font-size:.75rem;transition:all .2s;display:flex}.ctrl-btn:hover,.ctrl-btn.active{color:#fff;background:#ffffff14}.ctrl-btn.active{color:#38bdf8}.btn-danger-text{color:#f87171!important}.manual-body{flex-direction:column;gap:12px;padding:20px;display:flex}.manual-label{color:var(--text-muted);font-size:.85rem;font-weight:500}.manual-textarea{border:1px solid var(--border-color);border-radius:var(--radius-sm);color:#fff;resize:vertical;background:#090d16;outline:none;width:100%;padding:12px;font-size:.9rem;transition:border-color .2s}.manual-textarea:focus{border-color:var(--border-focus)}.sample-section{border-top:1px dashed var(--border-color);margin-top:14px;padding-top:14px}.sample-title{color:var(--text-muted);align-items:center;gap:6px;margin-bottom:10px;font-size:.82rem;display:flex}.sample-list{flex-direction:column;gap:8px;display:flex}.sample-item-btn{border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-main);cursor:pointer;text-align:left;background:#162032;justify-content:space-between;align-items:center;padding:10px 12px;font-size:.85rem;transition:all .2s;display:flex}.sample-item-btn:hover{background:#1e2c45;border-color:#3b82f6}.sample-item-name{font-weight:600}.sample-item-code{color:#60a5fa;background:#60a5fa1a;border-radius:4px;padding:2px 6px;font-family:monospace;font-size:.8rem}.table-section{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:20px}.ticket-list-wrapper{flex-direction:column;gap:16px;display:flex}.list-header-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.list-header-left{align-items:center;gap:12px;display:flex}.list-icon-badge{color:#34d399;background:#10b98126;border-radius:10px;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.list-title{color:#fff;font-size:1.1rem;font-weight:700}.list-subtitle{color:var(--text-muted);font-size:.82rem}.list-header-right{flex-wrap:wrap;gap:8px;display:flex}.search-bar-wrap{width:100%;position:relative}.search-icon{color:var(--text-muted);position:absolute;top:50%;left:12px;transform:translateY(-50%)}.search-input{border:1px solid var(--border-color);border-radius:var(--radius-sm);color:#fff;background:#0b0f19;outline:none;width:100%;padding:10px 36px 10px 38px;font-size:.9rem;transition:border-color .2s}.search-input:focus{border-color:var(--border-focus)}.clear-search-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;font-size:1.2rem;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.table-responsive{overflow-x:auto}.tickets-table{border-collapse:collapse;text-align:left;width:100%;font-size:.88rem}.tickets-table th{color:var(--text-muted);border-bottom:1px solid var(--border-color);white-space:nowrap;background:#141c2e;padding:12px 14px;font-weight:600}.tickets-table td{color:var(--text-main);vertical-align:middle;border-bottom:1px solid #ffffff0d;padding:14px}.tickets-table tr:hover td{background:#ffffff05}.cccd-badge{color:#60a5fa;background:#60a5fa1a;border:1px solid #60a5fa33;border-radius:6px;padding:4px 8px;font-family:monospace;font-weight:700}.time-badge{color:#fde047;background:#fde0471a;border-radius:6px;padding:4px 8px;font-weight:600}.count-pill{color:var(--text-muted);background:#ffffff14;border-radius:12px;padding:3px 8px;font-size:.78rem}.count-pill.count-warn{color:#fbbf24;background:#f59e0b33;font-weight:600}.btn-icon-danger{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:6px;transition:all .2s}.btn-icon-danger:hover{color:#ef4444;background:#ef44441a}.empty-ticket-box{text-align:center;flex-direction:column;align-items:center;gap:10px;padding:40px 20px;display:flex}.empty-title{color:#fff;font-size:1.05rem;font-weight:600}.empty-desc{color:var(--text-muted);max-width:400px;font-size:.88rem}.btn{border-radius:var(--radius-sm);cursor:pointer;border:1px solid #0000;justify-content:center;align-items:center;gap:8px;padding:8px 14px;font-size:.88rem;font-weight:600;transition:all .2s;display:inline-flex}.btn-sm{padding:6px 10px;font-size:.8rem}.btn-lg{padding:12px 20px;font-size:.98rem}.btn-block{width:100%}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-hover)}.btn-secondary{color:var(--text-main);border:1px solid var(--border-color);background:#1f293d}.btn-secondary:hover{background:#27344d}.btn-outline{border-color:var(--border-color);color:var(--text-main);background:0 0}.btn-outline:hover{background:#ffffff0d}.btn-danger-outline{color:#f87171;background:0 0;border-color:#ef44444d}.btn-danger-outline:hover{background:#ef444426}.spinner{border:3px solid #ffffff26;border-top-color:#38bdf8;border-radius:50%;width:32px;height:32px;animation:.8s linear infinite spin}.spinning{animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.text-center{text-align:center}.text-muted{color:var(--text-muted)}.text-primary{color:#38bdf8}.text-emerald{color:#34d399}.text-amber{color:#fbbf24}.font-medium{font-weight:500}.font-semibold{font-weight:600}.mt-3{margin-top:12px}.app-footer{text-align:center;color:var(--text-muted);border-top:1px solid var(--border-color);padding:20px 0;font-size:.8rem}@media (max-width:640px){.app-container{gap:18px;padding:12px 14px 40px}.app-header{flex-direction:column;align-items:flex-start}.hero-heading{font-size:1.35rem}.btn-hero-primary,.btn-hero-secondary{justify-content:center;width:100%}.result-main-message{font-size:1.2rem}.scanner-target-box{width:210px;height:210px}}