@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap";
*{font-family:Outfit,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif!important}.dine-scanner-page{color:#09090b;min-height:100dvh;font-family:var(--font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;background:#fff;flex-direction:column;justify-content:center;align-items:center;padding:1.5rem;display:flex;position:relative;overflow:hidden}.dine-scanner-page:before{content:"";pointer-events:none;background-image:linear-gradient(#ef444405 1px,#0000 1px),linear-gradient(90deg,#ef444405 1px,#0000 1px);background-size:20px 20px;position:absolute;inset:0}.scanner-back-btn{color:#27272a;text-transform:uppercase;letter-spacing:.1em;cursor:pointer;z-index:50;-webkit-backdrop-filter:blur(12px);background:#ffffffd9;border:1px solid #00000014;border-radius:8px;align-items:center;gap:.5rem;padding:8px 16px;font-size:.7rem;font-weight:800;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;top:1.5rem;left:1.5rem;box-shadow:0 4px 12px #00000008}.scanner-back-btn:hover{color:#ef4444;border-color:#ef4444;transform:translate(-2px)}.scanner-glow-bg{pointer-events:none;z-index:1;background:radial-gradient(circle,#ef44440a 0%,#fff0 70%);width:500px;height:500px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.dine-scanner-container{z-index:10;flex-direction:column;gap:2rem;width:100%;max-width:400px;display:flex}.scanner-brand-header{text-align:center}.scanner-eyebrow{letter-spacing:.25em;text-transform:uppercase;color:#ef4444;margin-bottom:.5rem;font-size:.7rem;font-weight:800}.scanner-brand-title{font-family:var(--font-heading);letter-spacing:-.04em;text-transform:uppercase;background:linear-gradient(135deg,#09090b 30%,#ef4444 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:2.25rem;font-weight:900}.scanner-brand-subtitle{color:#71717a;text-transform:uppercase;letter-spacing:.08em;margin-top:.25rem;font-size:.8rem;font-weight:600}.scanner-mode-selector{background:#f4f4f5;border:1px solid #0000000f;border-radius:12px;padding:.25rem;display:flex}.scanner-tab-btn{color:#71717a;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;background:0 0;border:none;border-radius:8px;flex:1;justify-content:center;align-items:center;gap:.5rem;padding:10px;font-size:.75rem;font-weight:800;transition:all .25s;display:flex}.scanner-tab-btn.active{color:#09090b;background:#fff;box-shadow:0 4px 12px #0000000d}.scanner-tab-btn.active svg{color:#ef4444}.scanner-view-box{aspect-ratio:1;-webkit-backdrop-filter:blur(12px);background:#ffffffb3;border:1px solid #0000000f;border-radius:20px;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden;box-shadow:0 20px 40px #00000008}.camera-view-wrapper{flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:1.5rem;display:flex}.qr-viewport{background:#000;border:1px solid #0000000f;border-radius:16px;width:240px;height:240px;position:relative;overflow:hidden}.qr-viewport video{object-fit:cover!important}.qr-corner{pointer-events:none;z-index:10;border:3px solid #ef4444;width:16px;height:16px;position:absolute}.corner-tl{border-bottom:none;border-right:none;border-top-left-radius:4px;top:12px;left:12px}.corner-tr{border-bottom:none;border-left:none;border-top-right-radius:4px;top:12px;right:12px}.corner-bl{border-top:none;border-right:none;border-bottom-left-radius:4px;bottom:12px;left:12px}.corner-br{border-top:none;border-left:none;border-bottom-right-radius:4px;bottom:12px;right:12px}.qr-laser-line{z-index:5;background:linear-gradient(90deg,#ef444400 0%,#ef4444 50%,#ef444400 100%);height:2px;animation:2.2s ease-in-out infinite laser-bounce;position:absolute;left:20px;right:20px;box-shadow:0 0 10px #ef4444}@keyframes laser-bounce{0%,to{top:20px}50%{top:220px}}.scanner-hint{color:#71717a;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;font-weight:800}.scanner-pulse-dot{background:#ef4444;border-radius:50%;width:6px;height:6px;animation:1.5s infinite pulse-ring;display:inline-block;box-shadow:0 0 8px #ef4444}@keyframes pulse-ring{0%{opacity:1;transform:scale(.9)}50%{opacity:.4;transform:scale(1.3)}to{opacity:1;transform:scale(.9)}}.scanner-success-overlay{background:#fffffffa;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:2rem;display:flex}.success-title{text-transform:uppercase;letter-spacing:.15em;color:#09090b;margin-top:1.5rem;font-size:1.1rem;font-weight:900}.success-desc{color:#ef4444;text-transform:uppercase;letter-spacing:.05em;margin-top:.5rem;font-size:.78rem;font-weight:700}.success-checkmark-wrapper{width:72px;height:72px}.checkmark-svg{stroke-width:3px;stroke:#fff;stroke-miterlimit:10;border-radius:50%;width:100%;height:100%;animation:.4s ease-in-out .4s forwards fill-red,.3s ease-in-out .9s forwards scale-bounce;display:block;box-shadow:inset 0 0 #ef4444}.checkmark-circle{stroke-dasharray:166;stroke-dashoffset:166px;stroke-width:3px;stroke-miterlimit:10;stroke:#ef4444;fill:none;animation:.6s cubic-bezier(.65,0,.45,1) forwards stroke-draw}.checkmark-check{transform-origin:50%;stroke-dasharray:48;stroke-dashoffset:48px;stroke-width:4px;stroke:#fff;animation:.3s cubic-bezier(.65,0,.45,1) .8s forwards stroke-draw}@keyframes stroke-draw{to{stroke-dashoffset:0}}@keyframes fill-red{to{box-shadow:inset 0 0 0 40px #ef4444}}@keyframes scale-bounce{0%,to{transform:none}50%{transform:scale(1.1)}}.manual-view-wrapper{width:100%;padding:2rem}.manual-table-form{flex-direction:column;gap:1.5rem;width:100%;display:flex}.manual-field-group{flex-direction:column;gap:.5rem;display:flex}.manual-field-label{text-transform:uppercase;letter-spacing:.1em;color:#71717a;font-size:.72rem;font-weight:800}.manual-select-input{color:#09090b;cursor:pointer;appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2371717a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center no-repeat;border:1px solid #00000014;border-radius:8px;outline:none;padding:12px 14px;font-size:.85rem;font-weight:700;transition:all .2s}.manual-select-input:hover{border-color:#00000026}.manual-select-input:focus{border-color:#ef4444;box-shadow:0 0 0 2px #ef44441a}.manual-select-input option{color:#09090b;background:#fff}.manual-submit-btn{color:#fff;text-transform:uppercase;letter-spacing:.1em;cursor:pointer;background:#ef4444;border:none;border-radius:8px;padding:12px;font-size:.8rem;font-weight:900;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #ef444426}.manual-submit-btn:hover{background:#dc2626;transform:translateY(-1px);box-shadow:0 4px 20px #ef444440}.manual-submit-btn:active{transform:translateY(1px)}.manual-submit-btn:disabled{color:#a1a1aa;cursor:not-allowed;box-shadow:none;background:#f4f4f5;border:1px solid #0000000f}@media (max-width:480px){.dine-scanner-page{justify-content:flex-start;padding:5.5rem 1rem 1rem}.scanner-back-btn{background:#ffffffe6;border:1px solid #0000000d;border-radius:12px;justify-content:center;padding:10px;display:flex;position:fixed;top:1rem;left:1rem;right:1rem;box-shadow:0 4px 20px #00000008}.dine-scanner-container{gap:1.25rem}.scanner-brand-title{font-size:1.8rem}.scanner-view-box{border-radius:16px}.qr-viewport{width:200px;height:200px}@keyframes laser-bounce{0%,to{top:20px}50%{top:180px}}}.dine-menu-grid{pointer-events:none;z-index:0;background-image:linear-gradient(#ef444404 1px,#0000 1px),linear-gradient(90deg,#ef444404 1px,#0000 1px);background-size:24px 24px;position:absolute;inset:0}.menu-loader{--s:20px;--g:4px;height:calc(1.353*var(--s) + var(--g));aspect-ratio:3;--_m:linear-gradient(90deg,#0000,#000 15px calc(100% - 15px),#0000);-webkit-mask:var(--_m);-webkit-mask:var(--_m);mask:var(--_m);justify-items:end;display:grid;overflow:hidden}.menu-loader:before{content:"";background:conic-gradient(from -90deg at var(--s) calc(.353*var(--s)), #ef4444 135deg,#09090b 0 270deg,#e4e4e7 0);--_m:linear-gradient(to bottom right, #0000 calc(.25*var(--s)),#000 0 calc(100% - calc(.25*var(--s)) - 1.414*var(--g)),#0000 0), conic-gradient(from -90deg at right var(--g) bottom var(--g),#000 90deg,#0000 0);width:133.333%;-webkit-mask:var(--_m);-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-in;background-size:25% 100%;animation:1.2s linear infinite l8;-webkit-mask-size:25% 100%;mask-size:25% 100%;-webkit-mask-composite:source-in;mask-composite:intersect}@keyframes l8{to{transform:translate(25%)}}