.app-shell{color:#111827;background:#f3f4f6;min-height:100vh}.topbar{color:#fff;background:#0b3d91;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:18px 24px;display:flex}.brand{align-items:center;gap:12px;display:flex}.brand-mark{color:#111827;letter-spacing:.5px;background:#d4af37;border-radius:12px;justify-content:center;align-items:center;width:44px;height:44px;font-weight:800;display:flex}.brand-name{font-size:18px;font-weight:700}.brand-subtitle{opacity:.85;font-size:13px}.topbar-note{opacity:.9;font-size:14px}.hero{color:#fff;background:linear-gradient(#0b3d91 0%,#143d8f 100%);padding:36px 24px 12px}.hero-copy{max-width:1100px;margin:0 auto}.hero-badge{color:#f5d97a;background:#ffffff2e;border:1px solid #f5d97a40;border-radius:999px;margin-bottom:14px;padding:8px 12px;font-size:13px;font-weight:700;display:inline-block}.hero h1{margin:0 0 10px;font-size:clamp(30px,4vw,52px);line-height:1.1}.subtitle{color:#ffffffeb;max-width:720px;margin:0;font-size:17px;line-height:1.6}.content{padding:24px}.order-layout{grid-template-columns:minmax(0,1.7fr) minmax(320px,.9fr);align-items:start;gap:24px;max-width:1200px;margin:0 auto;display:grid}.card{background:#fff;border-radius:18px;box-shadow:0 10px 28px #00000014}.order-form,.summary{padding:22px}.field{margin-bottom:16px;display:block}.field>span{margin-bottom:8px;font-weight:700;display:block}.field input,.field select{box-sizing:border-box;background:#fff;border:1px solid #d1d5db;border-radius:12px;width:100%;padding:12px 14px;font-size:16px}.field input:focus,.field select:focus{border-color:#0b3d91;outline:none;box-shadow:0 0 0 3px #0b3d911a}.section-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin:28px 0 14px;display:flex}.section-header h2,.order-form h2,.summary h2{margin:0}.inline-btn{width:auto}.secondary-btn,.primary-btn,.remove-btn,.drawer-close,.staff-primary-btn,.scan-primary-btn,.scan-secondary-btn{cursor:pointer;border:none;border-radius:12px;font-weight:700;transition:transform 80ms,background .15s,opacity .15s}.secondary-btn{color:#111827;background:#e5e7eb;padding:10px 14px}.primary-btn{color:#fff;background:#0b3d91;padding:14px 18px}.remove-btn{color:#991b1b;background:#fee2e2;padding:10px 12px}.drawer-close{color:#111827;background:#e5e7eb;padding:10px 12px}.secondary-btn:hover,.primary-btn:hover,.remove-btn:hover,.drawer-close:hover,.staff-primary-btn:hover,.scan-primary-btn:hover,.scan-secondary-btn:hover{transform:translateY(-1px)}.combo-card{background:#fafafa;border:1px solid #e5e7eb;border-radius:16px;margin-bottom:16px;padding:16px}.combo-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px;display:flex}.combo-header p{color:#6b7280;margin:6px 0 0;font-size:14px}.combo-actions{align-items:center;gap:10px;display:flex}.combo-price{color:#0b3d91;font-size:18px;font-weight:800}.choice-row{flex-wrap:wrap;gap:10px;display:flex}.choice-pill{cursor:pointer;background:#fff;border:1px solid #d1d5db;border-radius:999px;align-items:center;gap:8px;padding:10px 12px;font-size:14px;display:inline-flex}.choice-pill input{margin:0}.item-grid{grid-template-columns:1fr;gap:10px;display:grid}.item-row{background:#fafafa;border:1px solid #e5e7eb;border-radius:14px;justify-content:space-between;align-items:center;gap:14px;padding:12px 14px;display:flex}.item-row p{color:#6b7280;margin:4px 0 0;font-size:13px}.qty-price{align-items:center;gap:10px;display:flex}.qty-price input{text-align:center;border:1px solid #d1d5db;border-radius:10px;width:72px;padding:10px}.summary{position:sticky;top:20px}.combo-summary{margin-bottom:18px}.combo-summary h3{margin:0 0 10px}.combo-summary p{color:#374151;margin:8px 0;font-size:14px;line-height:1.5}.summary-list{gap:10px;margin:18px 0;display:grid}.summary-item,.totals>div{justify-content:space-between;gap:12px;display:flex}.summary-item{font-size:14px}.totals{border-top:1px solid #e5e7eb;gap:10px;padding-top:14px;display:grid}.totals>div span{color:#6b7280}.grand-total{color:#0b3d91;margin-top:4px;font-size:18px;font-weight:800}.order-btn{width:100%;margin-top:18px}.mobile-summary-toggle,.mobile-drawer{display:none}.small-note{color:#6b7280;margin-top:-6px;margin-bottom:16px;font-size:13px}.empty-state{color:#6b7280;font-style:italic}.success-box,.error-box{border-radius:12px;margin-top:18px;padding:14px;font-weight:600}.success-box{color:#166534;background:#dcfce7}.error-box{color:#991b1b;background:#fee2e2}.button-grid{gap:10px;margin-top:10px;display:grid}.date-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.time-grid{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}.rect-btn{color:#111827;cursor:pointer;text-align:center;background:#fff;border:1px solid #d1d5db;border-radius:12px;padding:14px 12px;font-size:15px;transition:all .2s}.rect-btn:hover{background:#f3f4f6}.rect-btn.selected{color:#fff;background:#0b3d91;border-color:#0b3d91}.rect-btn:active{transform:scale(.98)}.summary-meta{background:#f9fafb;border:1px solid #e5e7eb;border-radius:14px;gap:10px;margin:14px 0 18px;padding:14px;display:grid}.summary-meta div{justify-content:space-between;gap:12px;display:flex}.summary-meta span{color:#6b7280;font-size:14px}.summary-meta strong{font-size:14px}.page-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px;display:flex}.page-header-left{flex:1}.page-title{color:#111827;margin:0 0 8px;font-size:clamp(28px,4vw,42px);line-height:1.1}.page-header-right{color:#0b3d91;background:#0b3d9114;border-radius:12px;padding:10px 14px;font-weight:700}.page-badge{color:#0b3d91;background:#0b3d911a;border-radius:999px;margin-bottom:12px;padding:8px 12px;font-size:13px;font-weight:700;display:inline-block}.page-subtitle{color:#6b7280;margin:0}.staff-page,.scan-page,.redeem-page{background:linear-gradient(#0b3d91 0%,#143d8f 100%);justify-content:center;align-items:center;min-height:100vh;padding:24px;font-family:Arial,sans-serif;display:flex}.staff-card,.redeem-card{background:#fff;border-radius:18px;width:100%;max-width:720px;padding:24px;box-shadow:0 12px 32px #0000002e}.staff-card{max-width:420px}.staff-input,.camera-select{box-sizing:border-box;border:1px solid #d1d5db;border-radius:10px;width:100%;margin-bottom:12px;padding:12px;font-size:16px}.staff-input:focus,.camera-select:focus{border-color:#0b3d91;outline:none;box-shadow:0 0 0 3px #0b3d911a}.staff-primary-btn,.scan-primary-btn,.scan-secondary-btn{cursor:pointer;border:none;border-radius:10px;width:100%;padding:12px;font-size:16px;font-weight:700}.staff-primary-btn,.scan-primary-btn{color:#fff;background:#0b3d91}.scan-secondary-btn{color:#fff;background:#374151}.staff-error,.scan-error{color:#991b1b;background:#fee2e2;border-radius:12px;margin-top:12px;padding:14px}.qr-reader{background:#fff;border:1px solid #ddd;border-radius:12px;width:100%;max-width:500px;margin-bottom:20px;overflow:hidden}.camera-panel{background:#fafafa;border:1px solid #ddd;border-radius:12px;margin-bottom:16px;padding:16px}.camera-label{margin-bottom:8px;font-weight:600;display:block}.camera-help{color:#555;margin-top:8px;margin-bottom:0;font-size:14px}.scan-success{color:#fff;background:#0b3d91;border-radius:14px;margin-bottom:20px;padding:18px;animation:.8s ease-in-out successPulse;box-shadow:0 10px 24px #0b3d9133}.scan-success-bg{background:linear-gradient(#dcfce7 0%,#bbf7d0 100%)!important}@keyframes successPulse{0%{opacity:.85;transform:scale(.98)}50%{opacity:1;transform:scale(1.02)}to{opacity:1;transform:scale(1)}}.scan-success-details{margin-top:10px}.scan-items{margin-top:6px}.scan-actions{flex-wrap:wrap;gap:12px;display:flex}.scan-actions .scan-primary-btn,.scan-actions .scan-secondary-btn{width:auto;min-width:140px}.redeem-meta{background:#f9fafb;border:1px solid #e5e7eb;border-radius:14px;gap:10px;margin:18px 0;padding:14px;display:grid}.redeem-meta div{justify-content:space-between;gap:12px;display:flex}.redeem-meta span{color:#6b7280;font-size:14px}.redeem-meta strong{font-size:14px}.redeem-section{margin-top:20px}.redeem-section h2{color:#111827;margin:0 0 12px}.redeem-list{gap:12px;display:grid}.redeem-item{background:#fafafa;border:1px solid #e5e7eb;border-radius:14px;padding:14px}.redeem-item strong{color:#0b3d91;margin-bottom:8px;display:block}.redeem-item div{color:#374151;margin:4px 0}.redeem-empty{color:#6b7280;font-style:italic}.redeem-token{word-break:break-all;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:12px;padding:12px;font-family:monospace;font-size:13px}.redeem-success{color:#166534;background:#dcfce7;border-radius:12px;margin-top:20px;padding:14px;font-weight:700}.manual-redeem-form{margin-top:4px}.redeem-page .staff-input{margin-bottom:0}.extra-group{margin-top:18px}.extra-group-header{cursor:pointer;text-align:left;background:#fff;border:1px solid #d1d5db;border-radius:14px;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:12px 14px;display:flex}.extra-group-header h3{color:#0b3d91;margin:0;font-size:18px}.extra-group-toggle{color:#0b3d91;font-size:22px;font-weight:700;line-height:1}.fixed-choice{color:#111827;background:#f9fafb;border:1px solid #d1d5db;border-radius:12px;width:100%;padding:12px 14px;font-weight:600}@media (width<=980px){.order-layout{grid-template-columns:1fr}.summary{position:static}.desktop-summary{display:none}.mobile-summary-toggle{color:#fff;cursor:pointer;background:#0b3d91;border:none;border-radius:14px;justify-content:center;align-items:center;gap:10px;width:100%;margin-top:18px;padding:14px 16px;font-weight:700;display:flex}.quantity-badge{color:#111827;background:#d4af37;border-radius:999px;justify-content:center;align-items:center;min-width:28px;height:28px;padding:0 8px;font-weight:800;display:inline-flex}.mobile-drawer{pointer-events:none;opacity:0;z-index:40;transition:opacity .2s;display:block;position:fixed;inset:0}.mobile-drawer.open{pointer-events:auto;opacity:1}.mobile-drawer-backdrop{background:#00000073;position:absolute;inset:0}.mobile-drawer-panel{background:#fff;border-radius:22px 22px 0 0;flex-direction:column;max-height:88vh;display:flex;position:absolute;bottom:0;left:0;right:0;overflow:hidden;box-shadow:0 -10px 30px #0000002e}.drawer-handle-wrap{justify-content:center;padding:10px 0 6px;display:flex}.drawer-handle{background:#d1d5db;border-radius:999px;width:54px;height:5px}.mobile-drawer-header{border-bottom:1px solid #e5e7eb;justify-content:space-between;align-items:center;gap:12px;padding:0 18px 14px;display:flex}.drawer-subtitle{color:#6b7280;margin:6px 0 0;font-size:13px}.mobile-drawer-body{flex:1;padding:18px;overflow:auto}.drawer-footer{border-top:1px solid #e5e7eb;padding:14px 18px 18px}.drawer-order-btn{width:100%}.scan-actions{flex-direction:column}.scan-actions .scan-primary-btn,.scan-actions .scan-secondary-btn{width:100%}}@media (width<=640px){.content{padding:16px}.topbar,.hero{padding-left:16px;padding-right:16px}.order-form,.summary{padding:16px}.date-grid{grid-template-columns:1fr}.time-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.rect-btn{padding:12px 10px;font-size:14px}.item-row{flex-direction:column;align-items:flex-start}.qty-price{justify-content:space-between;width:100%}.summary-meta div,.redeem-meta div{flex-direction:column;gap:4px}.extra-group-header{padding:11px 12px}}@media (width<=420px){.time-grid{grid-template-columns:1fr}}