:root{--bg-1: #eef6ff;--bg-2: #c8dcf4;--bg-3: #eef2f7;--card-bg: rgba(255, 255, 255, .93);--card-border: rgba(17, 46, 94, .18);--title: #123b76;--text: #182536;--muted: #4f6179;--input-border: #b5cae4;--button: #0f3973;--button-hover: #0a2b56;--accent: #d7a340;--accent-soft: #f2ddaf;--chip-bg: #edf5ff;--chip-text: #1d4a8c;--success-bg: #d5f2df;--success-text: #1d6c38;--info-bg: #e2efff;--info-text: #154683;--error-bg: #ffe1dc;--error-text: #912b1d}*{box-sizing:border-box}body{margin:0;font-family:Manrope,sans-serif;color:var(--text);background:radial-gradient(circle at 7% 14%,var(--bg-2) 0%,var(--bg-1) 42%,var(--bg-3) 100%);background-size:180% 180%;animation:bgShift 18s ease-in-out infinite}.page{min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:20px 24px;position:relative;overflow:hidden}.page:before,.page:after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;pointer-events:none;z-index:1;filter:blur(2px)}.page:before{top:-80px;left:-90px;background:radial-gradient(circle at 40% 35%,#123c7a33,#123c7a00 68%);animation:floatOrbA 9s ease-in-out infinite}.page:after{right:-110px;bottom:-90px;background:radial-gradient(circle at 50% 55%,#c79a3a3d,#c79a3a00 70%);animation:floatOrbB 11s ease-in-out infinite}.grain{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background-image:radial-gradient(circle at 2px 2px,rgba(10,25,30,.05) 1px,transparent 0);background-size:12px 12px;opacity:.24}.card{width:min(740px,100%);background:var(--card-bg);border:1px solid var(--card-border);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);border-radius:28px;padding:30px 20px;text-align:center;position:relative;overflow:hidden;z-index:2;box-shadow:0 18px 36px #0a265426;animation:rise .55s ease,glowPulse 5.5s ease-in-out infinite}.card:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:min(92%,680px);height:4px;border-radius:0 0 999px 999px;background:linear-gradient(90deg,#123c7ad1,#2c66b0b8 60%,#c79a3a7a)}.reset-icon-btn{position:absolute;top:14px;right:14px;width:42px;height:42px;border-radius:50%;border:1px solid #c7d4e8;background:#ffffffd9;color:var(--button);display:grid;place-items:center;cursor:pointer;transition:transform .18s ease,background-color .18s ease}.reset-icon-btn:hover:enabled{transform:rotate(-25deg);background:#edf4ff}.reset-icon-btn:disabled{opacity:.5;cursor:not-allowed}.reset-icon-btn svg{width:20px;height:20px;fill:currentColor}.brand-wrap{margin:8px auto 14px;display:flex;justify-content:center}.brand-logo{width:min(240px,72vw);max-height:76px;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(18,60,122,.12));animation:logoEnter .5s ease}.scan-toast{position:fixed;top:14px;left:50%;transform:translate(-50%);z-index:20;padding:8px 14px;border-radius:999px;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:#1a4f91;background:linear-gradient(90deg,#e4efff,#eef5ff);border:1px solid #c9dcf4;box-shadow:0 8px 18px #10366a2e;animation:toastDropIn .25s ease}.catalog-toast{position:fixed;top:14px;left:50%;transform:translate(-50%);z-index:20;width:fit-content;padding:8px 14px;border-radius:999px;background:var(--chip-bg);color:var(--chip-text);font-weight:700;font-size:.82rem;letter-spacing:.03em;box-shadow:0 8px 18px #10366a2e;animation:toastDropIn .25s ease}h1{margin:0 0 20px;font-family:Sora,sans-serif;color:var(--title);letter-spacing:.03em;position:relative}h1:after{content:"";display:block;width:86px;height:3px;margin:10px auto 0;border-radius:999px;background:linear-gradient(90deg,var(--accent),#e0bc73)}.qr-wrap{margin-bottom:14px;display:inline-grid;padding:12px;border-radius:20px;background:linear-gradient(180deg,#fff,#f2f7ff);box-shadow:0 12px 26px #0d29561f;transition:transform .25s ease,box-shadow .25s ease}.qr-wrap:hover{transform:translateY(-2px);box-shadow:0 16px 30px #0d295629}.found-code{color:#1a56a4;font-size:1.1rem;margin:0}.found-code span{font-weight:800}.helper-text{color:var(--muted);margin:8px 0}.product-card{margin:10px auto 6px;width:min(480px,100%);padding:12px 14px;border:1px solid #d6e3f4;border-radius:14px;background:linear-gradient(180deg,#fff,#f6f9ff)}.product-name{margin:0;font-family:Sora,sans-serif;color:#143f7e;font-weight:700;font-size:.96rem}.product-meta{font-weight:600;margin:4px 0}.validate-form{margin:20px auto 0;width:min(420px,100%);display:grid;gap:10px;text-align:left;border:1px solid #d7e4f4;border-radius:14px;padding:14px;background:#ffffffb8}.validate-form label{font-weight:700}.form-hint{margin:-4px 0 2px;color:#5b6d86;font-size:.83rem}.validate-form input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--input-border);font-size:1rem;outline:none;transition:border-color .2s ease,box-shadow .2s ease,transform .15s ease}.validate-form input:focus{border-color:#3a77c6;box-shadow:0 0 0 3px #3877c633;transform:translateY(-1px)}.validate-form button{border:0;background:var(--button);color:#fff;border-radius:12px;padding:12px;font-size:1rem;font-weight:700;cursor:pointer;transition:transform .18s ease,background-color .18s ease;position:relative;overflow:hidden}.validate-form button:before{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;transform:skew(-20deg);background:linear-gradient(90deg,#fff0,#ffffff47,#fff0);transition:left .35s ease}.validate-form .secondary-btn{background:#eef3fb;color:#17407f;border:1px solid #b4c7e7}.validate-form .secondary-btn:hover:enabled{background:#dbe7fa}.validate-form button:hover:enabled{background:var(--button-hover);transform:translateY(-1px)}.validate-form button:hover:enabled:before{left:125%}.validate-form button:disabled{opacity:.6;cursor:not-allowed}.status{margin-top:18px;padding:16px;border-radius:16px;font-weight:700;line-height:1.45;animation:popIn .33s ease;border-left:5px solid transparent}.status p{margin:4px 0}.status.success{background:var(--success-bg);color:var(--success-text);border-left-color:#37a360}.status.info{background:var(--info-bg);color:var(--info-text);border-left-color:#2f72cb}.status.error{background:var(--error-bg);color:var(--error-text);border-left-color:#cd5340}.demo-grid{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}.demo-item{border:1px solid #d2deee;border-radius:16px;background:linear-gradient(180deg,#fffffff7,#f4f8fff5);padding:12px;text-align:center;display:grid;justify-items:center;gap:8px;opacity:0;transform:translateY(10px);animation:cardReveal .42s ease forwards;animation-delay:var(--delay, 0ms);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.demo-qr-frame{padding:8px;border-radius:14px;background:linear-gradient(180deg,#fff,#f1f7ff);box-shadow:inset 0 0 0 1px #d5e3f6}.demo-item:hover{transform:translateY(-4px);box-shadow:0 12px 24px #123c7a24;border-color:#b9cce8}.demo-title{margin:6px 0 0;font-weight:700;color:var(--title)}.demo-serial{margin:2px 0 0;font-family:Sora,sans-serif;letter-spacing:.02em;color:#173f7a;font-weight:700;font-size:.9rem}.demo-serial span{color:#6c5418;font-family:Manrope,sans-serif;font-weight:800}.demo-meta{margin:0;font-size:.9rem;color:#334259}.demo-link{margin-top:4px;text-decoration:none;font-weight:700;color:var(--button)}.demo-link:hover{color:#0c2a58}@keyframes cardReveal{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes popIn{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}@keyframes toastDropIn{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes logoEnter{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@keyframes glowPulse{0%,to{box-shadow:0 18px 36px #0a265426}50%{box-shadow:0 22px 42px #0a265433}}@keyframes bgShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes floatOrbA{0%,to{transform:translate(0)}50%{transform:translate(10px,12px)}}@keyframes floatOrbB{0%,to{transform:translate(0)}50%{transform:translate(-12px,-10px)}}@keyframes rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 640px){.page{padding:12px 10px}.card{border-radius:20px;padding:26px 14px 22px}h1{font-size:1.5rem}.found-code{font-size:1rem}.page:before,.page:after{width:210px;height:210px}.reset-icon-btn{top:12px;right:12px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}}