:root{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.5;font-weight:400;--mobile-padding: .5rem;--tablet-padding: 1rem;--desktop-padding: 1.5rem;color-scheme:light;color:#000;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}html{height:100%;overflow-x:hidden}body{margin:0;padding:0;min-height:100vh;height:100%;width:100%;overflow-x:hidden;position:relative}#root{min-height:100vh;height:100%;width:100%;display:flex;flex-direction:column}@supports (height: 100dvh){body,#root{min-height:100dvh;height:100dvh}}a{font-weight:500;color:#2563eb;text-decoration:inherit}a:hover{color:#1d4ed8}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}@media (hover: none) and (pointer: coarse){button,input,select,textarea{min-height:44px}}.qr-scanner{margin-top:2rem;padding:2rem;background:#f8fafc;border-radius:12px;border:2px dashed #cbd5e1}.qr-scanner h2{text-align:center;color:#1e293b;margin-bottom:1rem;font-size:1.5rem}.description{text-align:center;color:#64748b;margin-bottom:2rem;font-size:.9rem;line-height:1.6}.qr-scanner-container{position:relative;max-width:400px;margin:0 auto 16px;border:2px solid #007bff;border-radius:8px;overflow:hidden;background:#000}.qr-scanner-container video{width:100%;height:auto;display:block}.scanner-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.scanner-frame{width:200px;height:200px;border:2px solid #00ff00;border-radius:8px;position:relative;animation:pulse 2s infinite}@keyframes pulse{0%{box-shadow:0 0 #00ff00b3}70%{box-shadow:0 0 0 20px #0f00}to{box-shadow:0 0 #0f00}}.scanner-text{position:absolute;top:-30px;left:50%;transform:translate(-50%);color:#0f0;font-size:14px;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.8)}.mode-toggle-btn{padding:10px 20px;font-size:16px;font-weight:700;border:none;border-radius:6px;cursor:pointer;transition:all .3s ease;margin-bottom:16px}.mode-toggle-btn:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0003}.search-form{margin-bottom:2rem}.search-group{display:flex;gap:.5rem;max-width:400px;margin:0 auto}.search-input{flex:1;padding:.75rem;border:2px solid #e2e8f0;border-radius:8px;font-size:1rem;color:#000;background-color:#fff;text-transform:uppercase;font-family:Courier New,monospace;transition:all .3s ease}.search-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.search-btn{padding:.75rem 1.5rem;background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;white-space:nowrap}.search-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #3b82f666}.search-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.user-result{animation:slideUp .5s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.user-result h3{text-align:center;color:#059669;margin-bottom:1.5rem;font-size:1.25rem}.data-card{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 4px 6px -1px #0000001a;margin-bottom:1.5rem}.data-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid #f1f5f9}.data-row:last-child{border-bottom:none}.data-label{font-weight:600;color:#374151;font-size:.9rem}.data-value{color:#000;font-weight:500;text-align:right;word-break:break-word}.data-row:first-child .data-value{font-family:Courier New,monospace;color:#3b82f6;font-weight:700}.clear-btn{width:100%;padding:.875rem;background:linear-gradient(135deg,#6b7280,#4b5563);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease}.clear-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #6b728066}@media (max-width: 640px){.qr-scanner{padding:1.5rem;margin-top:1.5rem}.search-group{flex-direction:column;max-width:none}.search-btn{width:100%}.data-row{flex-direction:column;align-items:flex-start;gap:.25rem}.data-value{text-align:left}.data-card{padding:1rem}}.login-modal-overlay{position:fixed;inset:0;background:#00000073;z-index:1000;display:flex;align-items:center;justify-content:center}.login-modal{background:#fff;border-radius:10px;padding:2rem 2.5rem;box-shadow:0 4px 32px #0000002e;min-width:320px;max-width:90vw}.login-modal h2{margin-bottom:1.2rem;font-size:1.3rem;color:#222}.login-modal .form-group{margin-bottom:1rem}.login-modal label{display:block;margin-bottom:.3rem;font-weight:500}.login-modal input{width:100%;padding:.5rem;border:1px solid #bbb;border-radius:5px;font-size:1rem}.login-modal .error{color:#c00;margin-bottom:.7rem;font-size:.98rem}.login-modal .modal-actions{display:flex;gap:.7rem;justify-content:flex-end}.login-modal .submit-btn{background:#1e90ff;color:#fff;border:none;padding:.5rem 1.2rem;border-radius:5px;font-size:1rem;cursor:pointer}.login-modal .submit-btn:disabled{background:#8ec6ff;cursor:not-allowed}.login-modal .cancel-btn{background:#eee;color:#333;border:none;padding:.5rem 1.2rem;border-radius:5px;font-size:1rem;cursor:pointer}*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color: #2563eb;--primary-hover: #1d4ed8;--success-color: #059669;--error-color: #dc2626;--text-color: #000000;--text-muted: #4b5563;--background-color: #f9fafb;--card-background: rgba(255, 255, 255, .95);--border-color: #d1d5db;--border-radius: 8px;--shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);--shadow-lg: 0 20px 40px rgba(0, 0, 0, .15), 0 10px 20px rgba(0, 0, 0, .1);--container-padding: clamp(1rem, 4vw, 2rem);--container-max-width: min(500px, 90vw);--logo-size: clamp(120px, 20vw, 200px);--font-size-h1: clamp(1.25rem, 3vw, 1.75rem);--font-size-h2: clamp(1.125rem, 2.5vw, 1.5rem);--input-padding: clamp(.625rem, 1.5vw, .75rem);--button-padding: clamp(.75rem, 2vw, .875rem)}html,body{height:100%;width:100%;margin:0;padding:0;overflow-x:hidden;background:#f9fafb}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:var(--text-color)}#root{width:100%;height:100%;min-height:100vh;margin:0;padding:0}.app{min-height:100vh;min-height:100dvh;width:100vw;height:100vh;height:100dvh;display:flex;align-items:center;justify-content:center;padding:var(--container-padding);background:url(/kza-background.png) center center / cover no-repeat;background-attachment:scroll;position:fixed;inset:0;background-size:cover;background-repeat:no-repeat;background-position:center center;margin:0;overflow:auto}.app:before{content:"";position:absolute;inset:0;width:100%;height:100%;background:linear-gradient(135deg,#87ceeb33,#ffdfba33,#ffb6c133);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);z-index:0;pointer-events:none}.container{background:var(--card-background);border-radius:16px;padding:var(--container-padding);box-shadow:var(--shadow-lg);width:100%;max-width:var(--container-max-width);animation:slideIn .5s ease-out;position:relative;z-index:1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);margin:auto;box-sizing:border-box}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.logo-container{text-align:center;margin-bottom:clamp(1rem,3vw,2rem);padding:clamp(.5rem,2vw,1rem) 0}.kza-logo{max-width:var(--logo-size);width:100%;height:auto;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2));transition:all .3s ease;animation:logoEntrance 1s ease-out}.kza-logo:hover{transform:scale(1.05);filter:drop-shadow(0 6px 12px rgba(0,0,0,.3))}@keyframes logoEntrance{0%{opacity:0;transform:scale(.8) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}h1{text-align:center;margin-bottom:clamp(1.5rem,3vw,2rem);color:#1a365d;font-size:var(--font-size-h1);font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.1);line-height:1.2}h2{text-align:center;margin-bottom:clamp(1rem,2.5vw,1.5rem);color:var(--success-color);font-size:var(--font-size-h2);font-weight:600;line-height:1.3}.form{display:flex;flex-direction:column;gap:clamp(1rem,2.5vw,1.5rem)}.form-group{display:flex;flex-direction:column;gap:clamp(.375rem,1vw,.5rem)}label{font-weight:600;color:#000;font-size:clamp(.75rem,1.5vw,.875rem);text-transform:uppercase;letter-spacing:.5px}input{padding:var(--input-padding);border:2px solid var(--border-color);border-radius:var(--border-radius);font-size:clamp(.875rem,2vw,1rem);color:#000;background-color:#fff;transition:all .3s ease;min-height:44px;width:100%}input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #2563eb1a;transform:translateY(-1px)}input:hover{border-color:var(--primary-hover)}input::placeholder{color:var(--text-muted);font-size:clamp(.75rem,1.5vw,.875rem)}.submit-btn,.reset-btn{padding:var(--button-padding) clamp(1rem,3vw,1.5rem);border:none;border-radius:var(--border-radius);font-size:clamp(.875rem,2vw,1rem);font-weight:600;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px;min-height:44px;width:100%}.submit-btn{background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-hover) 100%);color:#fff;margin-top:1rem}.submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #2563eb66}.submit-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.reset-btn{background:linear-gradient(135deg,var(--text-muted) 0%,#4b5563 100%);color:#fff;margin-top:1.5rem}.reset-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #4b556366}.error{background-color:#fee2e2;color:var(--error-color);padding:.75rem;border-radius:var(--border-radius);border-left:4px solid var(--error-color);font-weight:500;animation:shake .5s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.result{text-align:center;animation:fadeIn .6s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.user-info{background:linear-gradient(135deg,#f0f9ffe6,#dbeafee6);border:1px solid rgba(14,165,233,.3);border-radius:var(--border-radius);padding:clamp(1rem,2.5vw,1.5rem);margin-bottom:clamp(1.5rem,3vw,2rem);text-align:left;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 6px #0000001a}.user-info p{margin-bottom:clamp(.375rem,1vw,.5rem);font-size:clamp(.875rem,2vw,1rem);color:#000}.user-info strong{color:var(--primary-color);font-weight:600}.qr-container{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:clamp(1rem,3vw,2rem);padding:clamp(1rem,2.5vw,1.5rem);background:#ffffffe6;border-radius:16px;box-shadow:var(--shadow);border:2px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.qr-code{max-width:100%;width:clamp(200px,40vw,256px);height:auto;border-radius:var(--border-radius);animation:zoomIn .5s ease-out}@keyframes zoomIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.qr-info{margin-top:clamp(.75rem,2vw,1rem);font-size:clamp(.75rem,1.5vw,.875rem);color:var(--text-muted);text-align:center;line-height:1.4}.qr-info strong{color:var(--primary-color);font-family:Courier New,monospace;word-break:break-all}@media (max-width: 640px){.app{padding:.5rem;position:fixed;inset:0}.container{padding:1rem;margin:0;border-radius:12px;max-width:calc(100vw - 1rem);max-height:calc(100vh - 1rem);overflow-y:auto}.form{gap:1rem}.user-info{padding:1rem;margin-bottom:1rem}.user-info p{font-size:clamp(.75rem,2vw,.875rem);margin-bottom:.375rem}.qr-container{padding:1rem}}@media (max-width: 480px){.app{padding:.25rem;min-height:100vh;min-height:100dvh;height:100vh;height:100dvh;position:fixed}.container{padding:.75rem;border-radius:8px;max-width:calc(100vw - .5rem);max-height:calc(100vh - .5rem);overflow-y:auto}input{font-size:16px}.backend-info{padding:.5rem;margin-top:1rem}.backend-info p{font-size:clamp(.7rem,1.5vw,.75rem)}}@media (max-width: 360px){.app{padding:.125rem}.container{padding:.5rem;margin:0;max-width:calc(100vw - .25rem)}.logo-container{margin-bottom:1rem}.form{gap:.75rem}}@media (min-width: 1024px){.container{max-width:600px;padding:3rem}.qr-code{max-width:300px}}@media (max-width: 768px) and (orientation: landscape){.app{padding:.25rem;align-items:flex-start;position:fixed;inset:0}.container{margin:.25rem auto;max-height:calc(100vh - .5rem);overflow-y:auto;width:100%;max-width:500px}.logo-container{margin-bottom:.5rem}.kza-logo{max-width:120px}}.submit-btn:disabled{position:relative;overflow:hidden}.submit-btn:disabled:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:loading 1.5s infinite}@keyframes loading{0%{left:-100%}to{left:100%}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}input:focus-visible,button:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}.backend-info{margin-top:clamp(1rem,2.5vw,2rem);padding:clamp(.75rem,2vw,1rem);background:linear-gradient(135deg,#e6f3ff,#f0f8ff);border:1px solid #bde4ff;border-radius:var(--border-radius);text-align:center;box-shadow:0 2px 4px #0000001a}.backend-info p{margin:0;color:#1e3a8a;font-size:clamp(.75rem,1.5vw,.875rem);font-weight:600}.backend-info code{background-color:#f8f9fa;padding:.2rem .4rem;border-radius:4px;font-family:Courier New,monospace;color:#e83e8c}.qr-info{margin-top:1rem;font-size:.875rem;color:var(--text-muted);text-align:center}.qr-info strong{color:var(--primary-color);font-family:Courier New,monospace}.navigation{display:flex;gap:.5rem;margin-bottom:2rem;padding:.5rem;background:#f1f5f9cc;border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}.nav-btn{flex:1;padding:.875rem 1rem;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;background-color:transparent;color:#64748b;font-size:.9rem}.nav-btn:hover{background-color:#e2e8f0;color:#374151}.nav-btn.active{background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-hover) 100%);color:#fff;box-shadow:0 2px 8px #2563eb4d}.nav-btn.active:hover{transform:translateY(-1px);box-shadow:0 4px 12px #2563eb66}@media (max-width: 480px){.navigation{flex-direction:column;gap:.25rem}.nav-btn{padding:.75rem;font-size:.85rem}}