:root{--primary:#0ea5e9;--primary-dark:#0369a1;--primary-navy:#0c4a6e;--primary-light:#e0f2fe;--secondary:#38bdf8;--secondary-light:#f0f9ff;--accent:#22d3ee;--accent-eco:#34d399;--accent-eco-soft:#d1fae5;--gradient-cta:linear-gradient(115deg, #0c4a6e 0%, #0284c7 40%, #0ea5e9 70%, #38bdf8 100%);--bg-app:#f0f9ff;--bg-card:#fff;--text-primary:#0c4a6e;--text-secondary:#475569;--text-muted:#94a3b8;--border:#bae6fd;--shadow-sm:0 1px 2px 0 #0369a10f;--shadow-md:0 4px 6px -1px #0369a11a, 0 2px 4px -2px #0369a114;--shadow-lg:0 10px 15px -3px #0369a11f, 0 4px 6px -4px #0369a114;--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--transition-fast:all .15s cubic-bezier(.4, 0, .2, 1);--transition-normal:all .25s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{background-color:var(--bg-app);color:var(--text-primary);width:100%;height:100dvh;margin:0;padding:0;font-family:Segoe UI,Sarabun,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;overflow:hidden}#root{width:100%;max-width:480px;height:100%;box-shadow:var(--shadow-lg);margin:0 auto;position:relative}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#7dd3fc;border-radius:3px}.app-container{background-color:var(--bg-app);flex-direction:column;width:100%;height:100dvh;display:flex;position:relative;overflow:hidden}.scroll-area{flex:1;padding-bottom:88px;overflow:hidden auto}.card{background-color:var(--bg-card);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);margin-bottom:16px;padding:16px}.btn{background-color:var(--primary);color:#fff;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-fast);border:none;justify-content:center;align-items:center;gap:8px;width:100%;padding:12px 24px;font-size:16px;font-weight:600;display:inline-flex}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-outline{border:1px solid var(--primary);color:var(--primary);background-color:#0000}.btn-gradient{background:var(--gradient-cta);color:#fff;border:none}.btn-google{color:#3c4043;box-shadow:var(--shadow-sm);background:#fff;border:1px solid #dadce0;border-radius:50px;padding:14px 24px;font-size:16px}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:.4s ease-out forwards fadeIn}.bottom-nav{background-color:var(--bg-card);border-top:1px solid var(--border);z-index:50;padding:8px 0 10px;padding-bottom:calc(10px + env(safe-area-inset-bottom));justify-content:space-around;align-items:flex-end;display:flex;position:absolute;bottom:0;left:0;right:0}.nav-item{color:var(--text-muted);transition:var(--transition-fast);flex-direction:column;flex:1;align-items:center;gap:2px;min-width:0;font-size:11px;text-decoration:none;display:flex}.nav-item.active{color:var(--primary)}.nav-item svg{font-size:22px}.nav-camera .camera-fab{background:var(--gradient-cta);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:52px;height:52px;margin-top:-22px;display:flex;box-shadow:0 6px 16px #0ea5e966}.nav-camera .camera-fab svg{color:#fff;font-size:24px}.nav-camera.active .camera-fab{outline:2px solid var(--primary-light)}.login-screen{text-align:center;background:linear-gradient(160deg,#e0f2fe 0%,#f0f9ff 40%,#fff 70%,#ecfeff 100%);flex-direction:column;justify-content:center;align-items:center;height:100%;padding:24px;display:flex}.login-logo{margin-bottom:16px}.login-event-title{color:var(--text-primary);text-align:center;margin:0 0 6px;font-size:20px;font-weight:700;line-height:1.3}.login-subtitle{color:var(--text-secondary);text-align:center;margin:0 0 40px;font-size:15px;line-height:1.4}.login-actions{width:100%;max-width:320px}.app-version{color:var(--text-muted,#94a3b8);letter-spacing:.02em;text-align:center;-webkit-user-select:all;user-select:all;margin-top:20px;font-size:11px}.app-header{background-color:var(--bg-card);z-index:40;border-bottom:1px solid var(--border);padding:20px 20px 14px;position:sticky;top:0}.header-title{color:var(--text-primary);font-size:20px;font-weight:700}.home-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.home-header .home-brand{align-items:center;gap:12px;min-width:0;display:flex}.howto-btn{border:1px solid var(--border);background:var(--bg-card);color:var(--primary);cursor:pointer;box-shadow:var(--shadow-sm);transition:var(--transition-fast);border-radius:999px;flex-shrink:0;align-items:center;gap:6px;padding:8px 12px;font-size:12px;font-weight:700;display:inline-flex}.howto-btn:active{transform:scale(.97)}.welcome-howto-solo{margin-top:4px}.home-logo{object-fit:contain;width:44px;height:44px}.home-greeting{color:var(--text-secondary);font-size:13px}.points-card{color:#fff;border-radius:var(--radius-lg);background:linear-gradient(135deg,#0c4a6e 0%,#0284c7 40%,#0ea5e9 70%,#22d3ee 100%);margin:20px;padding:24px;box-shadow:0 10px 24px #0ea5e959}.points-label{opacity:.9;font-size:14px}.points-value{align-items:center;margin:8px 0 16px;font-size:28px;font-weight:700;display:flex}.points-progress .progress-label{opacity:.95;margin-bottom:8px;font-size:13px}.progress-bar{background:#ffffff4d;border-radius:99px;height:8px;overflow:hidden}.progress-fill{background:#fff;border-radius:99px;height:100%;transition:width .3s}.section-title{color:var(--text-primary);margin:8px 20px 12px;font-size:18px;font-weight:700}.section-title-row{justify-content:flex-start;align-items:baseline;gap:8px;margin:8px 20px 10px;display:flex}.section-title-row .section-title{margin:0}.section-title-meta{color:var(--primary);flex-shrink:0;font-size:13px;font-weight:700}.banner-section{margin-bottom:8px}.banner-section .section-title-row{margin-bottom:10px}.banner-carousel{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:12px;margin-left:24px;padding:0 20px 14px;display:flex;overflow-x:auto}.banner-carousel::-webkit-scrollbar{display:none}.banner-slide{border-radius:var(--radius-md);scroll-snap-align:start;cursor:pointer;box-shadow:var(--shadow-sm);text-align:left;color:#fff;background:#0c4a6e;border:none;flex:none;margin:0;padding:0;transition:transform .15s;position:relative;overflow:hidden}.banner-slide:active{transform:scale(.985)}.banner-slide-static{cursor:default}.banner-slide-static:active{transform:none}.banner-slide-img{object-fit:cover;width:100%;height:100%;display:block}.banner-slide-overlay{pointer-events:none;background:linear-gradient(#0f172a00 35%,#0f172a8c 70%,#0f172ad1 100%);flex-direction:column;justify-content:flex-end;padding:14px 16px;display:flex;position:absolute;inset:0}.banner-eyebrow{letter-spacing:.02em;opacity:.9;margin-bottom:2px;font-size:11px;font-weight:600}.banner-slide-title{font-size:18px;font-weight:800;line-height:1.2}.banner-slide-sub{opacity:.9;margin-top:2px;font-size:12px}.banner-points{align-items:center;gap:4px;display:inline-flex}.banner-lg .banner-slide{width:min(86vw,340px);height:180px}.banner-lg .banner-slide-title{font-size:22px}.banner-md .banner-slide{width:min(72vw,280px);height:132px}.banner-md .banner-slide-title{font-size:16px}.banner-md .banner-slide-overlay{padding:12px 14px}.banner-sm .banner-slide{width:min(58vw,220px);height:100px}.banner-sm .banner-slide-title{font-size:14px}.banner-sm .banner-eyebrow{font-size:10px}.banner-sm .banner-slide-sub{font-size:11px}.banner-sm .banner-slide-overlay{padding:10px 12px}.banner-sm{margin-bottom:20px}.activity-list{padding:0 20px}.activity-card{align-items:center;gap:16px;padding:12px;display:flex}.activity-card.mission-done{opacity:.75}.activity-icon{border-radius:var(--radius-md);background-color:var(--primary-light);width:48px;height:48px;color:var(--primary);flex-shrink:0;justify-content:center;align-items:center;font-size:22px;display:flex}.activity-info{flex:1;min-width:0}.activity-title{color:var(--text-primary);margin-bottom:4px;font-weight:600}.activity-pts{color:var(--primary);white-space:nowrap;align-items:center;font-weight:700;display:flex}.check-done{color:var(--accent-eco);font-size:20px}.map-hint{color:var(--text-secondary);padding:12px 20px 0;font-size:13px}.static-map-wrap{border-radius:var(--radius-md);border:1px solid var(--border);box-shadow:var(--shadow-sm);background:#fff;margin:16px 20px;position:relative;overflow:hidden}.static-map-img{width:100%;height:auto;display:block}.map-pin{background:var(--gradient-cta);color:#fff;cursor:pointer;z-index:2;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;margin-top:-14px;margin-left:-14px;padding:0;font-family:inherit;font-size:13px;font-weight:700;line-height:1;display:flex;position:absolute;box-shadow:0 2px 8px #00000040}.map-pin.map-pin-logo{z-index:3;background:#0a0a0a;border:2px solid #fff;width:40px;height:40px;margin-top:-20px;margin-left:-20px;overflow:hidden}.map-pin-logo-img{object-fit:cover;pointer-events:none;width:100%;height:100%;display:block}.map-pin.done{background:#0284c7}.map-pin.map-pin-logo.done{background:#0a0a0a;box-shadow:0 0 0 3px #0284c7,0 2px 8px #00000040}.legend-row{border-bottom:1px solid var(--border);align-items:center;gap:12px;width:100%;padding:10px 0;display:flex}.legend-row:last-child{border-bottom:none}.legend-num{background:var(--gradient-cta);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:13px;font-weight:700;display:flex}.legend-num.legend-num-logo{background:#0a0a0a;padding:0;overflow:hidden}.legend-num.legend-num-logo img{object-fit:cover;width:100%;height:100%;display:block}.legend-num.done{background:#0284c7}.legend-num.legend-num-logo.done{background:#0a0a0a;box-shadow:0 0 0 2px #0284c7}.legend-points{color:var(--primary);white-space:nowrap;flex-shrink:0;align-items:center;gap:4px;font-size:13px;font-weight:700;display:inline-flex}.camera-page .camera-header{flex-shrink:0}.camera-body{flex-direction:column;flex:1;min-height:0;padding-bottom:88px;display:flex;position:relative}.scanner-view-page{background:#000;flex:1;min-height:280px;position:relative;overflow:hidden}.scanner-frame{z-index:5;pointer-events:none;border:2px solid #fff;border-radius:16px;width:min(250px,70vw);height:min(250px,70vw);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 4000px #00000073}.scan-help{text-align:center;color:var(--text-secondary);padding:12px 16px;font-size:13px}.debug-skip-panel{border:1px dashed var(--primary);border-radius:var(--radius-md);background:var(--primary-light);margin:0 16px 16px;padding:12px}.debug-skip-title{color:var(--primary-dark);margin-bottom:4px;font-size:13px;font-weight:700}.debug-skip-hint{color:var(--text-secondary);margin-bottom:8px;font-size:12px}.debug-skip-btn{margin-top:8px;padding:10px 12px;font-size:13px}.scan-toast{z-index:20;text-align:center;border-radius:12px;padding:12px 16px;font-size:14px;font-weight:600;position:absolute;bottom:100px;left:16px;right:16px}.scan-toast.error{color:#b91c1c;background:#fef2f2;border:1px solid #fecaca}.scan-success{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:8px;padding:32px 24px;display:flex}.scan-success-badge{background:var(--primary);color:#fff;border-radius:99px;margin-bottom:12px;padding:8px 20px;font-weight:700}.scan-points{color:var(--primary);align-items:center;margin:16px 0 24px;font-size:28px;font-weight:700;display:flex}.scan-entry-page .camera-body{padding-bottom:24px}.scan-entry-panel{justify-content:flex-start;width:100%;max-width:360px;margin:0 auto;padding-top:40px}.scan-entry-hint{color:var(--text-muted,#64748b);margin:0 0 8px;font-size:13px;line-height:1.4}.scan-entry-actions{flex-direction:column;gap:12px;width:100%;margin-top:8px;display:flex}.scan-entry-actions .btn{width:100%}.modal-overlay{z-index:100;background-color:#00000080;flex-direction:column;justify-content:flex-end;display:flex;position:absolute;inset:0}.welcome-overlay{justify-content:center;padding:24px}.modal-content{background-color:var(--bg-card);border-radius:var(--radius-lg) var(--radius-lg) 0 0;max-height:90vh;padding:24px;position:relative;overflow-y:auto}.welcome-modal{border-radius:var(--radius-lg);text-align:center;width:100%;max-width:360px;margin:0 auto}.welcome-icon{background:var(--gradient-cta);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:72px;height:72px;margin:0 auto 16px;display:flex}.welcome-modal h2{margin-bottom:12px}.welcome-modal p{color:var(--text-secondary);margin-bottom:16px;font-size:15px;line-height:1.5}.welcome-howto{text-align:left;border:1px solid var(--border);border-radius:var(--radius-md);background:#f0f9ff;margin-bottom:20px;padding:14px 14px 10px}.welcome-howto-title{color:var(--primary-dark);letter-spacing:.02em;margin-bottom:10px;font-size:13px;font-weight:800}.welcome-steps{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.welcome-step{align-items:flex-start;gap:10px;display:flex}.welcome-step-num{background:var(--primary);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;margin-top:1px;font-size:12px;font-weight:700;display:flex}.welcome-step-icon{width:32px;height:32px;color:var(--primary);background:#fff;border:1px solid #bae6fd;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.welcome-step-text{min-width:0;padding-top:1px}.welcome-step-title{color:var(--text-primary);font-size:13px;font-weight:700;line-height:1.3}.welcome-step-desc{color:var(--text-secondary);margin-top:2px;font-size:12px;line-height:1.35}.welcome-checkbox{color:var(--text-secondary);cursor:pointer;justify-content:center;align-items:center;gap:8px;margin-top:16px;font-size:13px;display:flex}.modal-close{border:1px solid var(--border);cursor:pointer;width:36px;height:36px;color:var(--text-secondary);z-index:2;background:#ffffffeb;border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:22px;line-height:1;display:flex;position:absolute;top:12px;right:12px;box-shadow:0 1px 4px #0000001f}.modal-img{object-fit:cover;border-radius:var(--radius-md);width:100%;height:200px;margin-bottom:16px}.register-modal h2{margin-bottom:8px}.register-lead{color:var(--text-secondary);margin-bottom:16px;font-size:14px;line-height:1.45}.register-form{flex-direction:column;gap:12px;display:flex}.register-form label{color:var(--text-secondary);flex-direction:column;gap:6px;font-size:13px;font-weight:600;display:flex}.register-form input{border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);padding:12px 14px;font-size:16px}.register-form input:focus{outline:2px solid var(--secondary);border-color:#0000}.consent-box{border:1px solid var(--border);border-radius:var(--radius-md);background:#f0f9ff;padding:12px}.consent-check{color:var(--text-secondary);cursor:pointer;align-items:flex-start;line-height:1.45;flex-direction:row!important;gap:10px!important;font-size:12px!important;font-weight:500!important;display:flex!important}.consent-check input{width:18px;height:18px;accent-color:var(--primary);flex-shrink:0;margin-top:2px}.consent-check strong{color:var(--text-primary);font-weight:700}.form-error{color:#b91c1c;font-size:13px}.reward-card{background:var(--bg-card);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);border:1px solid var(--border);margin-bottom:16px;display:flex;overflow:hidden}.reward-card-btn{text-align:left;cursor:pointer;width:100%;font:inherit;color:inherit;padding:0}.reward-img{object-fit:cover;background:var(--primary-light);width:100px;min-height:100px}.reward-body{flex-direction:column;flex:1;justify-content:space-between;padding:12px;display:flex}.place-card-done{opacity:.78}.place-status{color:var(--accent-eco);align-items:center;gap:4px;margin-top:4px;font-size:12px;font-weight:600;display:inline-flex}.place-status-check{width:22px;height:22px;color:var(--accent-eco,#16a34a);background:#16a34a1f;border-radius:50%;flex-shrink:0;justify-content:center;margin-top:6px;font-size:12px}.legend-row-btn{cursor:pointer;width:100%;font:inherit;color:inherit;text-align:left;background:0 0;border:none}.legend-row-btn:active{opacity:.85}.redeem-swipe{background:linear-gradient(90deg, var(--primary-light), #e0f2fe);border:1px solid var(--border);-webkit-user-select:none;user-select:none;touch-action:none;border-radius:999px;width:100%;height:56px;position:relative;overflow:hidden}.redeem-swipe.disabled{opacity:.6}.redeem-swipe.complete{background:linear-gradient(90deg, var(--accent-eco-soft), #a7f3d0)}.redeem-swipe-label{color:var(--text-secondary);pointer-events:none;justify-content:center;align-items:center;padding-left:40px;font-size:14px;font-weight:600;display:flex;position:absolute;inset:0}.redeem-swipe-thumb{background:var(--primary);color:#fff;cursor:grab;width:48px;height:48px;box-shadow:var(--shadow-md);z-index:1;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:18px;font-weight:700;display:flex;position:absolute;top:4px;left:4px}.redeem-swipe-thumb:active{cursor:grabbing}.redeem-swipe-thumb:disabled{cursor:default}.profile-header{background:var(--primary-light);align-items:center;gap:16px;margin-bottom:16px;padding:24px;display:flex}.avatar{background:var(--primary);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:64px;height:64px;font-size:24px;font-weight:700;display:flex;overflow:hidden}.history-item{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:12px 0;display:flex}.history-item:last-child{border-bottom:none}