.achievements-modal{padding:var(--space-4)}.achievements-summary{display:flex;justify-content:space-around;padding:var(--space-4);background:var(--surface-secondary);border-radius:var(--radius-lg);margin-bottom:var(--space-4)}.summary-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.summary-emoji{font-size:1.5rem}.summary-value{font-size:1.25rem;font-weight:700;color:var(--text-primary)}.summary-label{font-size:.75rem;color:var(--text-secondary)}.category-tabs{display:flex;gap:var(--space-2);padding:var(--space-2) 0;margin-bottom:var(--space-4);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.category-tabs::-webkit-scrollbar{display:none}.category-tab{flex-shrink:0;padding:var(--space-2) var(--space-3);border:2px solid var(--border-color);border-radius:var(--radius-full);background:var(--surface-primary);font-size:.875rem;cursor:pointer;transition:all .2s ease;white-space:nowrap}.category-tab:hover{border-color:var(--primary);background:var(--primary-light)}.category-tab.active{background:var(--primary);border-color:var(--primary);color:#fff}.badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-3);max-height:50vh;overflow-y:auto;padding:var(--space-2)}.badge-card{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);background:var(--surface-primary);border:2px solid var(--border-color);border-radius:var(--radius-lg);transition:all .2s ease}.badge-card.earned{border-color:var(--success);background:linear-gradient(135deg,var(--surface-primary),rgba(var(--success-rgb),.1))}.badge-card.earned .badge-emoji{animation:badge-shine 2s infinite}@keyframes badge-shine{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.badge-card.locked{opacity:.7}.badge-card.locked .badge-emoji{filter:grayscale(1)}.badge-card.small{padding:var(--space-2)}.badge-card.small .badge-emoji{font-size:1.5rem}.badge-card.small .badge-name{font-size:.875rem}.badge-card.small .badge-description{font-size:.75rem}.badge-emoji{font-size:2.5rem;flex-shrink:0}.badge-info{flex:1;min-width:0}.badge-name{margin:0;font-size:1rem;font-weight:600;color:var(--text-primary)}.badge-description{margin:var(--space-1) 0 0;font-size:.875rem;color:var(--text-secondary)}.badge-progress{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2)}.progress-bar{flex:1;height:8px;background:var(--surface-secondary);border-radius:var(--radius-full);overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-dark));border-radius:var(--radius-full);transition:width .3s ease}.progress-text{font-size:.75rem;font-weight:600;color:var(--text-secondary);min-width:35px;text-align:right}.badge-reward{display:inline-flex;align-items:center;gap:var(--space-1);margin-top:var(--space-2);padding:var(--space-1) var(--space-2);background:var(--warning-bg);color:var(--warning);border-radius:var(--radius-sm);font-size:.75rem;font-weight:600}.no-badges{text-align:center;padding:var(--space-8);color:var(--text-secondary)}.no-badges-emoji{font-size:3rem;display:block;margin-bottom:var(--space-2)}.achievement-notification{position:fixed;top:20px;left:50%;transform:translate(-50%);z-index:9999;animation:slide-in .5s ease,fade-out .5s ease 3.5s forwards;cursor:pointer}@keyframes slide-in{0%{transform:translate(-50%) translateY(-100%);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}@keyframes fade-out{to{opacity:0;transform:translate(-50%) translateY(-20px)}}.notification-content{background:linear-gradient(135deg,var(--primary),var(--primary-dark));padding:var(--space-4);border-radius:var(--radius-lg);box-shadow:0 10px 40px #0000004d;min-width:280px;max-width:90vw}.notification-header{text-align:center;margin-bottom:var(--space-3)}.notification-title{color:#fff;font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:1px}.notification-badge{display:flex;align-items:center;gap:var(--space-3);background:#fff3;padding:var(--space-3);border-radius:var(--radius-md)}.badge-emoji-large{font-size:3rem;animation:bounce .5s ease infinite alternate}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-5px)}}.badge-details h3{margin:0;color:#fff;font-size:1.125rem}.badge-details p{margin:var(--space-1) 0 0;color:#fffc;font-size:.875rem}.stars-earned{display:inline-block;margin-top:var(--space-2);padding:var(--space-1) var(--space-2);background:#ffd7004d;color:gold;border-radius:var(--radius-sm);font-size:.875rem;font-weight:700}.badge-preview{padding:var(--space-3)}.badge-preview.empty{text-align:center;color:var(--text-secondary)}.badge-preview.empty small{display:block;margin-top:var(--space-1);font-size:.75rem}.preview-badges{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center}.preview-badge{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--surface-secondary);border-radius:var(--radius-full);font-size:1.25rem;box-shadow:0 2px 4px #0000001a}.preview-more{padding:var(--space-2) var(--space-3);background:var(--primary);color:#fff;border:none;border-radius:var(--radius-full);font-size:.75rem;cursor:pointer;transition:background .2s ease}.preview-more:hover{background:var(--primary-dark)}.next-badges{padding:var(--space-3)}.next-badges h3{margin:0 0 var(--space-3);font-size:1rem;color:var(--text-primary)}.next-badges-list{display:flex;flex-direction:column;gap:var(--space-2)}@media (max-width: 640px){.badges-grid{grid-template-columns:1fr}.achievements-summary{flex-wrap:wrap;gap:var(--space-3)}.summary-item{flex:1 1 40%}.category-tabs{padding-bottom:var(--space-3)}.notification-content{min-width:260px}}.achievement-popup{position:fixed;top:20px;right:20px;z-index:10001;animation:slideInRight .4s ease}@keyframes slideInRight{0%{opacity:0;transform:translate(100px)}to{opacity:1;transform:translate(0)}}.achievement-popup-content{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,gold,orange);padding:16px 20px;border-radius:16px;box-shadow:0 8px 32px #ffa50066;color:#333;min-width:280px;position:relative;overflow:hidden}.achievement-popup-icon{font-size:40px;animation:popIn .5s ease}@keyframes popIn{0%{transform:scale(0) rotate(-180deg)}50%{transform:scale(1.3) rotate(10deg)}to{transform:scale(1) rotate(0)}}.achievement-popup-info{display:flex;flex-direction:column;gap:2px;flex:1}.achievement-popup-label{font-size:12px;font-weight:600;text-transform:uppercase;opacity:.8}.achievement-popup-title{font-size:16px;font-weight:700}.achievement-popup-points{font-size:14px;font-weight:600;color:#333}.achievement-popup-close{position:absolute;top:8px;right:8px;width:24px;height:24px;border:none;background:#0000001a;border-radius:50%;color:#333;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}.achievement-popup-close:hover{background:#0003}.achievement-popup-progress{position:absolute;bottom:0;left:0;height:4px;background:#0003;animation:progressShrink 5s linear forwards;width:100%}@keyframes progressShrink{0%{width:100%}to{width:0%}}.achievement-list-container{padding:16px}.achievement-progress{background:linear-gradient(135deg,#f8f9fa 0%,var(--surface, #fff) 100%);border:1px solid var(--surface-border, #EAEEF5);border-radius:var(--radius-xl, 16px);padding:16px;margin-bottom:20px}.progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.progress-label{font-size:14px;font-weight:600;color:var(--color-text-primary, #1F2937)}.progress-value{font-size:14px;font-weight:700;color:var(--vapor-primary, #002868)}.progress-bar-container{height:8px;background:var(--surface-muted, #F7F9FC);border-radius:4px;overflow:hidden;margin-bottom:10px}.progress-bar-fill{height:100%;background:linear-gradient(90deg,gold,orange);border-radius:4px;transition:width .5s ease}.progress-points{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:#ff8c00}.points-icon{font-size:16px}.achievement-categories{display:flex;gap:8px;overflow-x:auto;padding-bottom:12px;margin-bottom:16px;-webkit-overflow-scrolling:touch}.category-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;border:2px solid var(--surface-border, #EAEEF5);border-radius:20px;background:var(--surface, #fff);font-size:13px;font-weight:500;color:var(--color-text-secondary, #6B7280);cursor:pointer;transition:all .2s;white-space:nowrap}.category-btn:hover{border-color:gold;color:var(--color-text-primary, #1F2937)}.category-btn.active{background:linear-gradient(135deg,gold,orange);border-color:transparent;color:#333}.achievement-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.achievement-card{display:flex;align-items:center;gap:14px;padding:16px;background:var(--surface, #fff);border:2px solid var(--surface-border, #EAEEF5);border-radius:var(--radius-xl, 16px);transition:all .3s ease;position:relative}.achievement-card.unlocked{border-color:gold;background:linear-gradient(135deg,#fff9e6,#fff)}.achievement-card.locked{opacity:.7}.achievement-card.unlocked:hover{transform:translateY(-4px);box-shadow:0 8px 24px #ffd7004d}.achievement-card .achievement-icon{font-size:40px;flex-shrink:0}.achievement-card .achievement-info{flex:1;min-width:0}.achievement-card .achievement-title{font-size:15px;font-weight:700;color:var(--color-text-primary, #1F2937);margin:0 0 4px}.achievement-card .achievement-description{font-size:13px;color:var(--color-text-secondary, #6B7280);margin:0;line-height:1.4}.achievement-card .achievement-points{position:absolute;top:12px;right:12px;background:linear-gradient(135deg,gold,orange);padding:4px 10px;border-radius:12px;font-size:12px;font-weight:700;color:#333}.achievement-empty{text-align:center;padding:48px 16px;color:var(--color-text-muted, #9CA3AF)}.achievement-empty .empty-icon{font-size:64px;display:block;margin-bottom:16px}.achievement-empty p{margin:0 0 8px;font-size:15px}@media (max-width: 480px){.achievement-popup{top:auto;bottom:20px;right:10px;left:10px}.achievement-popup-content{min-width:auto}.achievement-grid{grid-template-columns:1fr}}@media (prefers-reduced-motion: reduce){.achievement-popup,.achievement-popup-icon,.achievement-popup-progress{animation:none}.achievement-popup-progress{display:none}}.mascot-sprite{position:relative;display:inline-block;width:100%;height:100%;will-change:transform}.mascot-sprite__layer{position:absolute;top:0;right:0;bottom:0;left:0;background-repeat:no-repeat;background-position-y:center;background-image:url(/icons/mascot-sprite.png);background-image:image-set(url(/icons/mascot-sprite.webp) type("image/webp"),url(/icons/mascot-sprite.png) type("image/png"));background-image:-webkit-image-set(url(/icons/mascot-sprite.webp) 1x);filter:drop-shadow(0 12px 18px rgba(0,40,104,.28));transition:opacity .35s ease;pointer-events:none}.mascot-motion-float{animation:mascotFloat 3s ease-in-out infinite}.mascot-motion-bounce{animation:mascotBounce .6s ease-in-out infinite}.mascot-motion-jump{animation:mascotJump 1.1s ease-in-out infinite}.mascot-motion-wiggle{animation:mascotWiggle 1s ease-in-out infinite}.mascot-motion-none{animation:none}@keyframes mascotFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-6%)}}@keyframes mascotBounce{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}@keyframes mascotJump{0%,to{transform:translateY(0) scaleY(1)}30%{transform:translateY(-12%) scaleY(1.04)}55%{transform:translateY(0) scaleY(.97)}70%{transform:translateY(-4%)}}@keyframes mascotWiggle{0%,to{transform:rotate(-3.5deg)}50%{transform:rotate(3.5deg)}}@media (prefers-reduced-motion: reduce){.mascot-sprite{animation:none!important}.mascot-sprite__layer{transition:none}}.welcome-slides{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;z-index:9999;transition:background .5s ease;overflow:hidden}.btn-skip{position:absolute;top:max(20px,env(safe-area-inset-top,20px));right:20px;padding:10px 20px;background:#fff3;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);border-radius:25px;color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s;z-index:10}.btn-skip:hover{background:#ffffff4d;transform:scale(1.05)}.slide-content{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px 16px;max-width:500px;transition:opacity .3s,transform .3s}.slide-content.animating{opacity:.5;transform:scale(.95)}.slide-character-stage{position:relative;width:200px;height:200px;display:flex;align-items:center;justify-content:center;margin-bottom:32px;isolation:isolate}.slide-character{width:100%;height:100%;object-fit:contain;border-radius:50%;background:#ffffff2e;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 24px 60px #00000047,inset 0 2px 10px #ffffff59;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}.character-glow{position:absolute;top:-10%;right:-10%;bottom:-10%;left:-10%;background:radial-gradient(circle,rgba(255,255,255,.35) 0%,transparent 65%);border-radius:50%;z-index:-1;animation:characterPulse 3.4s ease-in-out infinite}.character-accessory{position:absolute;top:-8px;right:-10px;width:64px;height:64px;display:flex;align-items:center;justify-content:center;font-size:36px;background:#fff;border-radius:50%;box-shadow:0 12px 28px #00000047;animation:accessoryPop .5s cubic-bezier(.22,1,.36,1) both,accessoryWiggle 2.6s ease-in-out .5s infinite;filter:drop-shadow(0 1px 1px rgba(0,0,0,.15))}@keyframes characterPulse{0%,to{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}@keyframes accessoryPop{0%{opacity:0;transform:scale(.4) rotate(-30deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes accessoryWiggle{0%,to{transform:rotate(0) translateY(0)}25%{transform:rotate(8deg) translateY(-3px)}75%{transform:rotate(-6deg) translateY(2px)}}.slide-character-stage.bounce{animation:stageBounce 2.4s ease-in-out infinite}.slide-character-stage.pulse{animation:stagePulse 2.4s ease-in-out infinite}.slide-character-stage.shake{animation:stageShake 2.4s ease-in-out infinite}.slide-character-stage.spin{animation:stageSpin 3.2s ease-in-out infinite}.slide-character-stage.rocket{animation:stageRocket 2.4s ease-in-out infinite}.slide-character-stage.wave{animation:stageWave 3s ease-in-out infinite}@keyframes stageBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-16px)}}@keyframes stagePulse{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}@keyframes stageShake{0%,to{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}@keyframes stageSpin{0%{transform:rotate(0)}25%{transform:rotate(6deg)}75%{transform:rotate(-6deg)}to{transform:rotate(0)}}@keyframes stageRocket{0%,to{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-22px) rotate(-6deg)}}@keyframes stageWave{0%,to{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(3deg) translateY(-6px)}}.slide-speech-bubble{position:relative;margin-top:6px;background:#fffffff7;border-radius:20px;padding:16px 22px;max-width:460px;box-shadow:0 18px 44px #00000038;animation:bubbleIn .4s cubic-bezier(.22,1,.36,1) both}.slide-speech-bubble:before{content:"";position:absolute;top:-10px;left:50%;transform:translate(-50%) rotate(45deg);width:18px;height:18px;background:#fffffff7;border-radius:4px}.slide-speech-bubble .slide-description{color:#1f2937;text-shadow:none;font-weight:500;margin:0}@keyframes bubbleIn{0%{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.slide-title{font-size:32px;font-weight:800;color:#fff;margin:0 0 16px;text-shadow:0 4px 20px rgba(0,0,0,.3);line-height:1.3}.slide-title-logo{display:flex;flex-direction:column;align-items:center;margin:0 0 16px;text-align:center}.slide-logo-text{height:120px;width:auto;margin-bottom:8px;object-fit:contain;filter:drop-shadow(0 4px 20px rgba(0,0,0,.3))}.slide-title-small{font-size:14px;font-weight:600;color:#ffffffe6;text-shadow:0 2px 10px rgba(0,0,0,.3);letter-spacing:-.3px}.slide-subtitle{display:block;font-size:20px;font-weight:500;opacity:.9;margin-top:8px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.3)}.slide-description{font-size:18px;color:#ffffffe6;line-height:1.6;margin:0;white-space:pre-line;text-shadow:0 2px 10px rgba(0,0,0,.2)}.slide-navigation{position:relative;width:100%;flex:none;display:flex;flex-direction:column;align-items:center;gap:18px;padding:8px 20px max(28px,calc(env(safe-area-inset-bottom,0px) + 24px))}.slide-indicators{display:flex;gap:10px}.indicator{width:12px;height:12px;border-radius:50%;background:#ffffff4d;border:2px solid rgba(255,255,255,.5);cursor:pointer;transition:all .3s;padding:0}.indicator:hover{background:#ffffff80;transform:scale(1.2)}.indicator.active{background:#fff;border-color:#fff;transform:scale(1.2)}.slide-buttons{display:flex;gap:16px}.btn-nav{padding:16px 32px;border:none;border-radius:30px;font-size:18px;font-weight:700;cursor:pointer;transition:all .3s}.btn-prev{background:#fff3;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;padding:16px 24px}.btn-prev:hover{background:#ffffff4d;transform:translate(-3px)}.btn-next{background:#fff;color:#333;display:flex;align-items:center;gap:8px;box-shadow:0 10px 30px #0003}.btn-next:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 15px 40px #0000004d}.btn-next .arrow{font-size:20px;transition:transform .3s}.btn-next:hover .arrow{transform:translate(5px)}.slide-decorations{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.decoration{position:absolute;border-radius:50%;background:#ffffff1a}.decoration-1{width:300px;height:300px;top:-100px;left:-100px;animation:float1 8s ease-in-out infinite}.decoration-2{width:200px;height:200px;bottom:20%;right:-50px;animation:float2 10s ease-in-out infinite}.decoration-3{width:150px;height:150px;bottom:-50px;left:20%;animation:float3 12s ease-in-out infinite}@keyframes float1{0%,to{transform:translate(0) scale(1)}50%{transform:translate(30px,30px) scale(1.1)}}@keyframes float2{0%,to{transform:translate(0) scale(1)}50%{transform:translate(-20px,-20px) scale(.9)}}@keyframes float3{0%,to{transform:translate(0) scale(1)}50%{transform:translate(40px,-10px) scale(1.05)}}@media (max-width: 768px){.slide-character-stage{width:168px;height:168px;margin-bottom:26px}.character-accessory{width:54px;height:54px;font-size:30px;top:-4px;right:-6px}.slide-logo-text{height:100px}.slide-title-small{font-size:14px}.slide-title{font-size:26px}.slide-subtitle{font-size:18px}.slide-description{font-size:16px}.slide-navigation{gap:20px}.btn-nav{padding:14px 28px;font-size:16px}}@media (max-width: 480px){.btn-skip{top:max(16px,env(safe-area-inset-top,16px));right:16px;padding:8px 16px;font-size:13px}.slide-content{padding:30px 16px}.slide-character-stage{width:140px;height:140px;margin-bottom:22px}.character-accessory{width:46px;height:46px;font-size:26px}.slide-logo-text{height:80px}.slide-title-small{font-size:12px}.slide-title{font-size:22px}.slide-subtitle{font-size:16px}.slide-description{font-size:15px}.slide-navigation{gap:14px;padding-bottom:max(20px,calc(env(safe-area-inset-bottom,0px) + 16px))}.indicator{width:10px;height:10px}.btn-nav{padding:12px 24px;font-size:15px}.btn-prev{padding:12px 20px}}@media (max-height: 640px) and (orientation: portrait){.slide-content{padding-top:20px}.slide-character-stage{width:120px;height:120px;margin-bottom:14px}.character-accessory{width:40px;height:40px;font-size:22px}.slide-logo-text{height:60px}.slide-title{font-size:20px;margin-bottom:10px}.slide-title-logo{margin-bottom:10px}.slide-speech-bubble{padding:12px 18px}.slide-navigation{gap:12px;padding-bottom:max(16px,env(safe-area-inset-bottom,0px))}}@media (max-height: 500px) and (orientation: landscape){.slide-content{flex-direction:row;gap:30px;padding:20px}.slide-character-stage{width:110px;height:110px;margin-bottom:0;flex-shrink:0}.character-accessory{width:38px;height:38px;font-size:22px}.slide-title{font-size:20px;text-align:left}.slide-subtitle{font-size:14px}.slide-description{font-size:14px;text-align:left}.slide-navigation{flex-direction:row;justify-content:space-between;padding:8px 30px max(12px,env(safe-area-inset-bottom,0px))}.slide-buttons{gap:12px}.btn-nav{padding:10px 20px;font-size:14px}}@media (prefers-reduced-motion: reduce){.slide-character-stage,.slide-character-stage.bounce,.slide-character-stage.pulse,.slide-character-stage.shake,.slide-character-stage.spin,.slide-character-stage.rocket,.slide-character-stage.wave,.character-glow,.character-accessory{animation:none}.decoration,.slide-content,.slide-speech-bubble{animation:none;transition:none}.btn-skip:hover,.btn-nav:hover,.indicator:hover{transform:none}}@media (prefers-color-scheme: dark){.slide-character{background:#ffffff1f}.btn-skip{background:#0000004d;border-color:#fff3}.btn-prev{background:#0000004d}.btn-next{background:#fffffff2}.decoration{background:#ffffff0d}}.pin-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--modal-backdrop, rgba(15, 23, 42, .55));display:flex;align-items:flex-start;justify-content:center;z-index:9999;padding:20px;overflow-y:auto;animation:fadeIn .2s ease}.pin-modal{background:var(--surface, #fff);border:var(--card-border, 1px solid #EAEEF5);border-radius:var(--modal-radius, 20px);padding:32px;max-width:380px;width:100%;margin:auto;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow-y:auto;position:relative;text-align:center;box-shadow:var(--modal-shadow, var(--shadow-xl));animation:slideUp var(--duration-slow, .3s) var(--ease-out)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.pin-modal.shake{animation:shake .5s ease}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-8px)}20%,40%,60%,80%{transform:translate(8px)}}.pin-modal-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border:none;background:#f0f0f0;border-radius:50%;cursor:pointer;font-size:20px;color:var(--color-text-secondary, #6B7280);display:flex;align-items:center;justify-content:center;transition:all .2s}.pin-modal-close:before{content:"";position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;border-radius:inherit}.pin-modal-close:hover{background:#e0e0e0;color:var(--color-text-primary, #1F2937)}.pin-modal-close:focus-visible{outline:2px solid var(--focus-ring-color, #002868);outline-offset:2px}.pin-modal-icon{font-size:48px;margin-bottom:16px}.pin-modal-title{font-size:20px;font-weight:700;color:var(--color-text-primary, #1F2937);margin:0 0 8px}.pin-modal-description{font-size:14px;color:var(--color-text-secondary, #6B7280);margin:0 0 24px;line-height:1.5}.pin-input-container{display:flex;gap:12px;justify-content:center;margin-bottom:20px}.pin-input{width:56px;height:64px;border:2px solid var(--vapor-border, #CBD5E1);border-radius:12px;font-size:24px;font-weight:700;text-align:center;background:#fafafa;color:var(--color-text-primary, #1F2937);transition:all .2s;-webkit-text-security:disc}.pin-input:focus{border-color:var(--vapor-primary, #002868);background:var(--surface, #fff);outline:none;box-shadow:0 0 0 3px #00286833}.pin-input.filled{border-color:var(--vapor-primary, #002868);background:var(--surface, #fff)}.pin-input:disabled{background:#f0f0f0;cursor:not-allowed}.pin-error{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;background:var(--surface-muted, #F7F9FC);color:var(--color-danger, #DC2626);border-radius:8px;font-size:14px;margin-bottom:20px}.pin-error span{width:18px;height:18px;background:var(--color-danger, #DC2626);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}.pin-lockout{display:flex;flex-direction:column;align-items:center;gap:12px;padding:32px 16px}.lockout-icon{font-size:48px}.lockout-text{font-size:16px;color:var(--color-text-secondary, #6B7280);font-weight:500}.pin-modal-actions{display:flex;gap:12px;justify-content:center}.pin-btn-back,.pin-btn-submit{padding:14px 28px;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;border:none}.pin-btn-back{background:#f0f0f0;color:var(--color-text-secondary, #6B7280)}.pin-btn-back:hover{background:#e0e0e0}.pin-btn-submit{background:linear-gradient(135deg,var(--vapor-primary, #002868) 0%,var(--accent-500, #1E40AF) 100%);color:#fff;min-width:120px}.pin-btn-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #00286866}.pin-btn-submit:disabled{background:#ccc;cursor:not-allowed;transform:none}.pin-btn-back:focus-visible,.pin-btn-submit:focus-visible{outline:2px solid var(--focus-ring-color, #002868);outline-offset:2px}.pin-loading{width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.pin-help-text{font-size:12px;color:var(--color-text-muted, #9CA3AF);margin-top:20px}.pin-progress{display:flex;gap:8px;justify-content:center;margin-top:20px}.progress-dot{width:8px;height:8px;border-radius:50%;background:#e0e0e0;transition:all .3s}.progress-dot.active{background:var(--vapor-primary, #002868);transform:scale(1.2)}.progress-dot.completed{background:var(--color-success, #16A34A)}@media (prefers-color-scheme: dark){.pin-modal{background:#1e1e1e}.pin-modal-title{color:#f0f0f0}.pin-modal-description{color:#aaa}.pin-modal-close{background:#333;color:#aaa}.pin-modal-close:hover{background:#444;color:#fff}.pin-input{background:#2a2a2a;border-color:#444;color:#f0f0f0}.pin-input:focus{background:#333;border-color:var(--vapor-primary, #002868)}.pin-input.filled{background:#333}.pin-btn-back{background:#333;color:#aaa}.pin-btn-back:hover{background:#444}}@media (prefers-contrast: high){.pin-modal{border:2px solid currentColor}.pin-input{border-width:3px}}@media (prefers-reduced-motion: reduce){.pin-modal,.pin-modal-overlay,.pin-modal.shake{animation:none}.pin-loading{animation:none;border-top-color:currentColor}}@media (max-width: 400px){.pin-modal{padding:24px 16px;margin:10px}.pin-input-container{gap:8px}.pin-input{width:48px;height:56px;font-size:20px}.pin-btn-back,.pin-btn-submit{padding:12px 20px;font-size:14px}}:root{--bottom-nav-h: 64px}.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:900;display:flex;align-items:stretch;height:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:#fffffff7;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-top:1px solid rgba(0,40,104,.1);box-shadow:0 -4px 20px #00286814}.bottom-nav-tab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:none;background:none;padding:5px 2px;cursor:pointer;color:#64748b;-webkit-tap-highlight-color:transparent;transition:color .15s ease,transform .1s ease}.bottom-nav-tab:active{transform:scale(.9)}.bottom-nav-icon-wrap{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:13px;transition:background .15s ease,transform .15s ease}.bottom-nav-icon{width:28px;height:28px;filter:grayscale(.25) opacity(.82);transition:filter var(--duration-base) var(--ease-out)}.bottom-nav-label{font-size:11px;font-weight:700;line-height:1;white-space:nowrap}.bottom-nav-tab.active{color:var(--brand-500, #002868)}.bottom-nav-tab.active .bottom-nav-label{font-weight:800}.bottom-nav-tab.active .bottom-nav-icon-wrap{background:#00286824;transform:translateY(-2px) scale(1.06);box-shadow:0 4px 12px #0028682e}.bottom-nav-tab.active .bottom-nav-icon{filter:none}@media (max-width: 767px){body.app-locked.has-bottom-nav main{padding-bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom,0px) + 10px)!important}}@media (min-width: 768px){.bottom-nav{display:none}}[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;will-change:opacity,transform}[data-reveal].is-visible{opacity:1;transform:translateY(0)}[data-reveal=left]{transform:translate(-24px)}[data-reveal=left].is-visible{transform:translate(0)}[data-reveal=right]{transform:translate(24px)}[data-reveal=right].is-visible{transform:translate(0)}[data-reveal-delay="1"]{transition-delay:.08s}[data-reveal-delay="2"]{transition-delay:.16s}[data-reveal-delay="3"]{transition-delay:.24s}[data-reveal-delay="4"]{transition-delay:.32s}[data-reveal-delay="5"]{transition-delay:.4s}@media (prefers-reduced-motion: reduce){[data-reveal],[data-reveal=left],[data-reveal=right]{opacity:1;transform:none;transition:none}}.landing-hero{isolation:isolate;background-color:#f8faff}.landing-hero:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#f8fafffa,#f8faffe6 42%,#f8faff59 72%,#f8faff1f)}.landing-hero-bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;overflow:hidden}.landing-hero-bg picture,.landing-hero-bg img{display:block;width:100%;height:100%}.landing-hero-bg img{object-fit:cover;object-position:center right}.landing-final-cta{background-color:#001a4d;background-image:linear-gradient(90deg,#001a4deb,#002868b8,#001a4de6),url(/images/brand/rogers-cta-mural.webp);background-size:cover;background-position:center;background-repeat:no-repeat}@media (max-width: 767px){.landing-hero:after{background:linear-gradient(180deg,#f8fafffa,#f8faffed 56%,#f8faffc2)}.landing-hero-bg img{object-position:64% center;opacity:.58}.landing-final-cta{background-image:linear-gradient(180deg,#001a4df0,#002868d1),url(/images/brand/rogers-cta-mural.webp)}}.sticky-cta{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;gap:8px;padding:10px 12px;background:#fffffff5;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:16px;box-shadow:0 12px 32px #0000002e;transform:translateY(160%);transition:transform .35s cubic-bezier(.22,1,.36,1)}.sticky-cta.is-visible{transform:translateY(0)}.sticky-cta .label{flex:1;font-weight:600;color:#1f2937;align-self:center;font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width: 768px){.sticky-cta{display:none}}body.has-sticky-cta{padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}@media (min-width: 768px){body.has-sticky-cta{padding-bottom:0}}.marquee{overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}.marquee__track{display:flex;gap:48px;width:max-content;animation:marquee 28s linear infinite}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}@media (prefers-reduced-motion: reduce){.marquee__track{animation:none}}.category-marquee{padding:8px 0}.category-marquee__track{gap:14px;animation-duration:32s}.category-marquee:hover .category-marquee__track{animation-play-state:paused}@media (max-width: 767px){.category-marquee__track{gap:10px;animation-duration:26s}}.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font-size:13px;font-weight:600;border-radius:999px;background:#eef2ff;color:#1e40af}:root{--brand-navy: #002868;--brand-blue: #1E40AF;--brand-sky: #3B82F6;--accent-coral: #F43F5E;--accent-amber: #F59E0B;--accent-mint: #10B981;--ink-900: #0F172A;--ink-700: #334155;--ink-500: #64748B;--ink-200: #E2E8F0;--paper: #F8FAFC}.gradient-text{background:linear-gradient(120deg,#002868,#1e40af,#3b82f6 70%,#f43f5e);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:gradient-shift 8s ease-in-out infinite}@keyframes gradient-shift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@media (prefers-reduced-motion: reduce){.gradient-text{animation:none}}.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-blue)}.eyebrow:before{content:"";display:inline-block;width:28px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--brand-navy),var(--accent-coral))}.lift-card{background:#fff;border-radius:24px;border:1px solid rgba(15,23,42,.06);box-shadow:0 1px 2px #0f172a0a,0 6px 16px -8px #0f172a14;transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s cubic-bezier(.22,1,.36,1),border-color .25s;position:relative;overflow:hidden}.lift-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,#3b82f60d,#f43f5e0a);opacity:0;transition:opacity .3s;pointer-events:none}.lift-card:hover{transform:translateY(-6px);border-color:#1e40af2e;box-shadow:0 1px 2px #0f172a0f,0 20px 40px -16px #0f172a2e}.lift-card:hover:before{opacity:1}@media (hover: none){.lift-card:hover{transform:none}.lift-card:hover:before{opacity:0}}.icon-halo{position:relative;display:inline-flex;align-items:center;justify-content:center;width:80px;height:80px;border-radius:22px;background:linear-gradient(135deg,#eff6ff,#fce7f3);margin-bottom:16px}.icon-halo:after{content:"";position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px;border-radius:28px;background:radial-gradient(circle at 30% 30%,rgba(59,130,246,.18),transparent 65%);filter:blur(10px);opacity:.7;z-index:-1}.section-divider{height:1px;background:linear-gradient(90deg,transparent 0%,rgba(15,23,42,.08) 20%,rgba(15,23,42,.08) 80%,transparent 100%);margin:0 auto;max-width:1100px}.popular-badge{background:linear-gradient(120deg,var(--brand-navy),var(--accent-coral));color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 14px;border-radius:999px;box-shadow:0 8px 20px -6px #f43f5e73;white-space:nowrap}.dot-grid{position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);background-size:22px 22px;mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000 30%,transparent 75%);pointer-events:none}.cta-shadow{box-shadow:0 1px #fff3 inset,0 12px 24px -10px #00286880;transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s cubic-bezier(.22,1,.36,1)}.cta-shadow:hover{transform:translateY(-2px);box-shadow:0 1px #ffffff40 inset,0 18px 32px -10px #0028688c}@media (hover: none){.cta-shadow:hover{transform:none}}:root{--color-primary: #002868;--color-primary-light: #1E40AF;--color-primary-dark: #001a4d;--color-secondary: #BF0A30;--color-secondary-light: #EF4444;--color-success: #16A34A;--color-warning: #D97706;--color-danger: #DC2626;--color-info: #0284C7;--color-text-primary: #1F2937;--color-text-secondary: #6B7280;--color-text-muted: #9CA3AF;--color-text-inverse: #FFFFFF;--color-bg-primary: #FFFFFF;--color-bg-secondary: #F3F4F6;--color-bg-tertiary: #E5E7EB;--color-border: #D1D5DB;--color-border-focus: #002868;--focus-ring-color: #002868;--focus-ring-width: 3px;--focus-ring-offset: 2px;--min-touch-target: 44px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 20px;--radius-full: 9999px;--text-xs: 12px;--text-sm: 14px;--text-base: 16px;--text-lg: 18px;--text-xl: 20px;--text-2xl: 24px;--vapor-primary: #002868;--vapor-secondary: #BF0A30;--vapor-border: #CBD5E1;--vapor-light: #F0F4F8;--vapor-danger: #DC2626;--brand-500: #002868;--brand-600: #001F50;--accent-500: #1E40AF;--color-danger-strong: #B91C1C;--bp-tablet-min: 768px;--bp-desktop-min: 1024px;--bp-touch-tablet-max: 1366px;--bp-wide-min: 1440px;--container-mobile: 100%;--container-tablet: 720px;--container-touch-tablet: 980px;--container-desktop: 1100px;--container-wide: 1400px;--gutter-mobile: 12px;--gutter-tablet: 20px;--gutter-desktop: 24px;--header-height-mobile: 56px;--header-height-tablet: 64px;--header-height-desktop: 72px;--font-display: "Fredoka", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;--app-bg: #F6F8FC;--app-bg-gradient: linear-gradient(180deg, #F7F9FC 0%, #EEF3FB 100%);--surface: #FFFFFF;--surface-muted: #F7F9FC;--surface-border: #EAEEF5;--surface-border-strong: #DCE3EF;--shadow-xs: 0 1px 2px rgba(20, 40, 80, .04);--shadow-sm: 0 2px 8px rgba(20, 40, 80, .06);--shadow-md: 0 4px 20px rgba(20, 40, 80, .08);--shadow-lg: 0 12px 32px rgba(20, 40, 80, .12);--shadow-xl: 0 20px 48px rgba(20, 40, 80, .16);--shadow-brand: 0 8px 22px rgba(0, 40, 104, .22);--shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, .65);--shadow-focus: 0 0 0 4px rgba(30, 64, 175, .28);--text-3xl: 30px;--text-4xl: 36px;--leading-tight: 1.15;--leading-snug: 1.3;--leading-normal: 1.5;--leading-relaxed: 1.65;--weight-normal: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--weight-extra: 800;--tracking-tight: -.02em;--tracking-snug: -.01em;--tracking-normal: 0;--tracking-wide: .02em;--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-in-out: cubic-bezier(.4, 0, .2, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--duration-fast: .12s;--duration-base: .2s;--duration-slow: .35s;--gradient-brand: linear-gradient(135deg, #002868 0%, #1E40AF 100%);--gradient-hero: linear-gradient(135deg, #BF0A30 0%, #002868 100%);--gradient-danger: linear-gradient(135deg, #BF0A30 0%, #EF4444 100%);--gradient-primary: var(--gradient-brand);--gradient-secondary: var(--gradient-danger);--accent-purple: #7C3AED;--accent-teal: #14B8A6;--accent-gold: #F5A623;--accent-pink: #EC4899;--card-bg: var(--surface, #FFFFFF);--card-border: 1px solid var(--surface-border, #EAEEF5);--card-radius: 18px;--card-radius-sm: 14px;--card-shadow: var(--shadow-sm);--card-shadow-hover: var(--shadow-md);--modal-backdrop: rgba(15, 23, 42, .55);--modal-radius: 20px;--modal-shadow: var(--shadow-xl);--modal-max-width: 440px}.container{width:100%;margin-left:auto;margin-right:auto;padding-left:var(--gutter-mobile);padding-right:var(--gutter-mobile);max-width:var(--container-mobile)}@media (min-width: 768px){.container{max-width:var(--container-tablet);padding-left:var(--gutter-tablet);padding-right:var(--gutter-tablet)}}@media (min-width: 1024px){.container{max-width:var(--container-desktop);padding-left:var(--gutter-desktop);padding-right:var(--gutter-desktop)}}@media (min-width: 1440px){.container{max-width:var(--container-wide)}}.responsive-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--grid-min, 140px),1fr));gap:var(--gutter-mobile)}@media (min-width: 768px){.responsive-grid{gap:var(--gutter-tablet)}}@media (min-width: 1024px){.responsive-grid{gap:var(--gutter-desktop)}}.hide-mobile{display:revert}.show-mobile-only{display:none}.hide-tablet{display:revert}.show-tablet-only{display:none}.hide-desktop{display:revert}.show-desktop-only{display:none}@media (max-width: 767px){.hide-mobile{display:none!important}.show-mobile-only{display:revert}}@media (min-width: 768px) and (max-width: 1023px){.hide-tablet{display:none!important}.show-tablet-only{display:revert}}@media (min-width: 1024px){.hide-desktop{display:none!important}.show-desktop-only{display:revert}}@media (min-width: 1024px) and (max-width: 1366px) and (hover: none) and (pointer: coarse){.hide-tablet{display:none!important}.show-tablet-only,.hide-desktop{display:revert}.show-desktop-only{display:none!important}}@media (hover: hover) and (pointer: fine){.hover-lift:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0000001f}.hover-scale:hover{transform:scale(1.03)}}@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait){.tablet-portrait-stack{flex-direction:column!important}}.wide-center{margin-left:auto;margin-right:auto}@media (min-width: 1440px){.wide-center{max-width:var(--container-wide)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-to-main{position:absolute;top:-100%;left:50%;transform:translate(-50%);background:var(--color-primary);color:var(--color-text-inverse);padding:var(--space-3) var(--space-6);border-radius:var(--radius-md);font-weight:600;z-index:10001;transition:top .2s ease}.skip-to-main:focus{top:var(--space-4)}.focus-visible-only{opacity:0;pointer-events:none}.focus-visible-only:focus{opacity:1;pointer-events:auto}.touch-target{min-width:var(--min-touch-target);min-height:var(--min-touch-target)}@media (hover: none) and (pointer: coarse){button:not(.no-touch-target),[role=button]:not(.no-touch-target),input[type=button]:not(.no-touch-target),input[type=submit]:not(.no-touch-target),input[type=reset]:not(.no-touch-target){min-height:var(--min-touch-target);min-width:var(--min-touch-target)}.icon-btn,.btn-icon,:where(button[aria-label]:not(.no-touch-target)){position:relative}.icon-btn:before,.btn-icon:before,button[aria-label]:not(.no-touch-target):before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:var(--min-touch-target);min-height:var(--min-touch-target);width:100%;height:100%}input[type=checkbox],input[type=radio]{min-width:20px;min-height:20px}input[type=checkbox]+label,input[type=radio]+label{min-height:var(--min-touch-target);display:inline-flex;align-items:center;padding-top:10px;padding-bottom:10px}.toggle,.switch,[role=switch]{min-height:var(--min-touch-target)}.close-btn,.btn-close,button[aria-label*=닫기],button[aria-label*=close]{min-width:var(--min-touch-target);min-height:var(--min-touch-target)}nav a,.nav-link,.tab-btn{min-height:var(--min-touch-target);display:inline-flex;align-items:center}.dropdown-item,.menu-item,[role=menuitem],[role=option]{min-height:var(--min-touch-target);padding-top:10px;padding-bottom:10px}li[onclick],li[role=button],.clickable-list-item{min-height:var(--min-touch-target)}}.touch-target-warning{outline:2px dashed orange!important}.icon-btn{display:inline-flex;align-items:center;justify-content:center;min-width:var(--min-touch-target);min-height:var(--min-touch-target);padding:var(--space-2);border:none;background:transparent;cursor:pointer;border-radius:var(--radius-md);transition:background-color .2s ease,transform .1s ease}.icon-btn:hover{background-color:#0000000d}.icon-btn:active{transform:scale(.95)}.icon-btn:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}[aria-hidden=true]{pointer-events:none}.live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes gradientMove{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}html{min-height:100%}body{width:100%;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--app-bg, #F6F8FC);color:var(--color-text-primary, #1F2937);line-height:var(--leading-normal, 1.5);font-weight:var(--weight-normal, 400)}h1,h2,h3,h4,h5,h6,.btn,button{font-family:var(--font-display);letter-spacing:var(--tracking-snug, -.01em)}h1,h2,h3,h4,h5,h6{line-height:var(--leading-tight, 1.15);font-weight:var(--weight-bold, 700)}.card{background:var(--card-bg);border:var(--card-border);border-radius:var(--card-radius);box-shadow:var(--card-shadow)}.card--interactive{transition:transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out)}@media (hover: hover) and (pointer: fine){.card--interactive:hover{transform:translateY(-3px);box-shadow:var(--card-shadow-hover)}}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:var(--space-4, 16px);background:var(--modal-backdrop);animation:fadeIn var(--duration-base) var(--ease-out)}.modal-panel{width:100%;max-width:var(--modal-max-width);max-height:90vh;overflow-y:auto;background:var(--surface, #fff);border:var(--card-border, 1px solid #EAEEF5);border-radius:var(--modal-radius);box-shadow:var(--modal-shadow);animation:fadeInScale var(--duration-slow) var(--ease-out)}#root{width:100%;min-height:100vh;display:flex;flex-direction:column}body.app-locked{height:100%;height:-webkit-fill-available;min-height:-webkit-fill-available;background:var(--app-bg-gradient, linear-gradient(180deg, #F7F9FC 0%, #EEF3FB 100%));background-attachment:fixed;overflow:hidden;position:fixed;top:0;left:0;right:0;bottom:0}body.app-locked #root{height:100%;overflow:hidden;box-sizing:border-box;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}body.app-locked #main-content{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}html:has(body.app-locked){height:100%;height:-webkit-fill-available}html{overflow-x:clip}h1,h2,h3,h4,h5,h6,p,span,li,label,button{word-break:keep-all;word-wrap:break-word;overflow-wrap:break-word}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#888;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.btn{padding:var(--space-3, 12px) var(--space-6, 24px);border:none;border-radius:var(--radius-lg, 12px);font-size:var(--text-base, 16px);font-weight:var(--weight-semibold, 600);cursor:pointer;transition:transform var(--duration-fast) var(--ease-out),box-shadow var(--duration-base) var(--ease-out),background-color var(--duration-base) var(--ease-out);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2, 8px);text-decoration:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;box-sizing:border-box}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--gradient-primary, linear-gradient(135deg, #002868 0%, #1E40AF 100%));color:#fff}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-brand, 0 8px 22px rgba(0, 40, 104, .22))}.btn-secondary{background:#fff;color:var(--vapor-primary, #002868);border:2px solid var(--vapor-primary, #002868)}.btn-secondary:hover:not(:disabled){background:var(--vapor-light, #F0F4F8)}.btn-danger{background:var(--gradient-secondary, linear-gradient(135deg, #BF0A30 0%, #EF4444 100%));color:#fff}.btn-danger:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #bf0a3066}.btn-small{padding:var(--space-2, 8px) var(--space-4, 16px);font-size:var(--text-md, 14px);min-height:var(--btn-height-sm, 36px);border-radius:var(--radius-md, 8px)}.btn-block{width:100%}.btn-voice{background:var(--gradient-hero, linear-gradient(135deg, #BF0A30 0%, #002868 100%));color:#fff;padding:var(--space-4, 16px) var(--space-8, 32px);font-size:var(--text-lg, 18px);min-height:var(--btn-height-lg, 56px);border-radius:var(--radius-full, 50px);width:100%;margin:var(--space-4, 16px) 0}.btn-voice:hover:not(:disabled){transform:scale(1.02);box-shadow:0 6px 16px #bf0a3066}.btn-voice.btn-listening{animation:pulse 1.5s infinite}@keyframes pulse{0%,to{box-shadow:0 0 #bf0a3099}50%{box-shadow:0 0 0 8px #bf0a3000}}.spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.3);border-top:3px solid white;border-radius:50%;animation:spin .8s linear infinite}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4, 16px);padding:var(--space-10, 40px);color:#fff}.error-message{background:var(--vapor-danger, #DC2626);color:#fff;padding:var(--space-3, 12px) var(--space-4, 16px);border-radius:var(--radius-md, 8px);margin:var(--space-4, 16px) 0;font-size:var(--text-md, 14px);font-weight:500}input,textarea,select{font-size:16px}body.app-locked input,body.app-locked textarea,body.app-locked select{width:100%;padding:var(--space-3, 12px);border:2px solid var(--vapor-border, #CBD5E1);border-radius:var(--radius-md, 8px);font-size:var(--text-base, 16px);transition:border-color .2s ease,box-shadow .2s ease}body.app-locked input:focus,body.app-locked textarea:focus,body.app-locked select:focus{outline:none;border-color:var(--vapor-primary, #002868);box-shadow:0 0 0 3px #0028681a}body.app-locked input:disabled,body.app-locked textarea:disabled,body.app-locked select:disabled{background:var(--vapor-light, #F0F4F8);cursor:not-allowed;opacity:.7}@media (max-width: 768px){.btn-voice{padding:var(--space-4, 16px) var(--space-6, 24px);font-size:var(--text-lg, 18px);height:52px}}@media (max-width: 480px){.btn-voice{padding:var(--space-3, 12px) var(--space-6, 24px);font-size:var(--text-base, 16px);height:48px}input,textarea,select{font-size:16px}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.animate-fadeIn{animation:fadeIn .3s ease}.animate-fadeInUp{animation:fadeInUp .4s ease}.animate-fadeInScale{animation:fadeInScale .3s ease}.animate-bounce{animation:bounce .6s ease infinite}.touch-feedback{-webkit-tap-highlight-color:transparent;touch-action:manipulation}.touch-feedback:active{transform:scale(.97);transition:transform .1s ease}.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px}.skeleton-text{height:16px;margin-bottom:8px;width:80%}.skeleton-text.short{width:40%}.skeleton-text.medium{width:60%}.skeleton-image{width:100%;aspect-ratio:1;border-radius:12px}.skeleton-button{height:44px;width:120px;border-radius:22px}:focus-visible{outline:3px solid var(--vapor-primary, #002868);outline-offset:2px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--vapor-primary, #002868);outline-offset:2px}.skip-link{position:absolute;top:-100px;left:0;background:var(--vapor-primary, #002868);color:#fff;padding:12px 24px;z-index:10000;text-decoration:none;font-weight:600}.skip-link:focus{top:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (prefers-contrast: high){:root{--color-primary: #000080;--color-secondary: #8B0000;--color-text-primary: #000000;--color-text-secondary: #000000;--color-bg-primary: #FFFFFF;--color-bg-secondary: #FFFFFF;--color-border: #000000;--color-border-focus: #0000FF;--focus-ring-color: #0000FF;--focus-ring-width: 4px;--vapor-border: #000}.btn{border:3px solid currentColor;background:#fff;color:#000}.btn-primary{background:navy;color:#fff;border-color:navy}.btn-secondary{background:#fff;color:#000;border-color:#000}.btn-danger{background:#8b0000;color:#fff;border-color:#8b0000}:focus-visible{outline:4px solid #0000FF!important;outline-offset:2px!important}a{color:#00e;text-decoration:underline}a:visited{color:#551a8b}input,textarea,select{border:2px solid #000000;background:#fff;color:#000}.error-message{background:#8b0000;color:#fff;border:2px solid #000000}.toast{border:2px solid #000000}.card-shadow{border:2px solid #000000;box-shadow:none}[data-color]{border:2px solid #000000}}@media (forced-colors: active){.btn{border:2px solid ButtonText}.btn:focus-visible{outline:3px solid Highlight}:focus-visible{outline:3px solid Highlight;outline-offset:2px}.icon-btn{forced-color-adjust:none}}.colorblind-pattern-success{background-image:repeating-linear-gradient(45deg,transparent,transparent 2px,currentColor 2px,currentColor 4px)}.colorblind-pattern-warning{background-image:repeating-linear-gradient(-45deg,transparent,transparent 2px,currentColor 2px,currentColor 4px)}.colorblind-pattern-danger{background-image:repeating-linear-gradient(90deg,transparent,transparent 2px,currentColor 2px,currentColor 4px)}html{scroll-behavior:smooth}@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}.toast-container{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%);z-index:10000;display:flex;flex-direction:column;gap:8px;pointer-events:none}.toast{display:flex;align-items:center;gap:10px;background:#000000e6;color:#fff;padding:14px 20px;border-radius:12px;font-size:14px;font-weight:500;animation:fadeInUp .3s ease;box-shadow:0 4px 20px #0000004d;pointer-events:auto;max-width:320px}.toast-icon{font-size:16px;font-weight:700;flex-shrink:0}.toast-message{flex:1;word-break:keep-all}.toast.success{background:linear-gradient(135deg,#16a34a,#22c55e)}.toast.success .toast-icon{color:#dcfce7}.toast.error{background:linear-gradient(135deg,#dc2626,#ef4444)}.toast.error .toast-icon{color:#fee2e2}.toast.info{background:linear-gradient(135deg,#002868,#1e40af)}.toast.info .toast-icon{color:#dbeafe}.toast.warning{background:linear-gradient(135deg,#d97706,#f59e0b)}.toast.warning .toast-icon{color:#fef3c7}@media (max-width: 480px){.toast-container{width:calc(100% - 32px)}.toast{max-width:100%}}.card-shadow{box-shadow:0 2px 8px #00000014,0 4px 16px #0000000f;transition:box-shadow .3s ease,transform .3s ease}.card-shadow:hover{box-shadow:0 4px 12px #0000001f,0 8px 24px #0000001a;transform:translateY(-2px)}.safe-area-bottom{padding-bottom:env(safe-area-inset-bottom,16px)}.safe-area-top{padding-top:env(safe-area-inset-top,16px)}.error-boundary{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#002868,#1e40af,#002868);padding:24px}.error-boundary-content{background:#fff;border-radius:24px;padding:40px 32px;max-width:400px;width:100%;text-align:center;box-shadow:0 20px 60px #0000004d;animation:fadeInScale .4s ease}.error-mascot{width:160px;height:160px;object-fit:contain;margin:0 auto 12px;display:block;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.error-boundary h1{font-size:24px;color:#333;margin-bottom:12px}.error-boundary p{font-size:16px;color:#666;margin-bottom:24px;line-height:1.5}.error-actions{display:flex;flex-direction:column;gap:12px}.error-actions .btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;font-size:16px;font-weight:600;border-radius:12px}.error-details{margin-top:24px;text-align:left;background:#f5f5f5;border-radius:8px;padding:12px}.error-details summary{cursor:pointer;font-weight:600;color:#666;margin-bottom:8px}.error-details pre{font-size:12px;color:#dc2626;overflow-x:auto;white-space:pre-wrap;word-break:break-all}.notification-prompt{position:fixed;bottom:24px;left:50%;transform:translate(-50%);z-index:9999;width:calc(100% - 32px);max-width:400px;animation:fadeInUp .3s ease}.notification-prompt-content{background:#fff;border-radius:16px;padding:20px;box-shadow:0 8px 32px #0003;display:flex;flex-direction:column;gap:16px}.notification-prompt-icon{font-size:40px;text-align:center}.notification-prompt-text{text-align:center}.notification-prompt-text h3{font-size:18px;font-weight:700;color:#333;margin-bottom:8px}.notification-prompt-text p{font-size:14px;color:#666;line-height:1.5}.notification-prompt-actions{display:flex;gap:12px}.notification-prompt-actions .btn{flex:1}html.dark .notification-prompt-content{background:var(--dark-surface)}html.dark .notification-prompt-text h3{color:var(--dark-text)}html.dark .notification-prompt-text p{color:var(--dark-text-secondary)}.notification-settings{display:flex;align-items:center;justify-content:space-between;padding:12px 0}.notification-settings-label{display:flex;align-items:center;gap:12px;font-weight:500}.notification-icon{font-size:20px}.notification-status{font-size:12px;color:#999}.notification-status.blocked{color:#dc2626}.notification-status.disabled{color:#999}.toggle-switch{position:relative;width:50px;height:28px;background:#e0e0e0;border:none;border-radius:14px;cursor:pointer;transition:background .3s ease}.toggle-switch.active{background:var(--vapor-primary, #002868)}.toggle-slider{position:absolute;top:2px;left:2px;width:24px;height:24px;background:#fff;border-radius:50%;transition:transform .3s ease;box-shadow:0 2px 4px #0003}.toggle-switch.active .toggle-slider{transform:translate(22px)}.offline-indicator{position:fixed;bottom:0;left:0;right:0;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:500;z-index:9998;animation:slideInUp .3s ease}@keyframes slideInUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.offline-indicator-icon{font-size:18px}.offline-indicator.online{background:linear-gradient(135deg,#10b981,#059669);animation:fadeOut 2s ease forwards;animation-delay:2s}.offline-indicator.offline{background:linear-gradient(135deg,#f59e0b,#d97706)}.offline-indicator.syncing{background:linear-gradient(135deg,#3b82f6,#2563eb)}.offline-indicator.syncing .offline-indicator-icon{animation:spin 1s linear infinite}.offline-indicator.synced{background:linear-gradient(135deg,#10b981,#059669);animation:fadeOut 2s ease forwards;animation-delay:2s}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fadeOut{to{opacity:0;visibility:hidden}}body.rtl{direction:rtl;text-align:right}body.rtl .app-header__content,body.rtl .app-header__right,body.rtl .artwork-actions,body.rtl .btn,body.rtl .modal-actions{flex-direction:row-reverse}body.rtl .btn-icon{margin-left:8px;margin-right:0}body.rtl .artwork-info{text-align:right}body.rtl .completed-badge{right:auto;left:12px}body.rtl .shared-badge{left:auto;right:12px}body.rtl .artwork-card:hover{transform:translateY(-4px)}body.rtl .modal-close{right:auto;left:16px}body.rtl input,body.rtl textarea,body.rtl select{text-align:right}body.rtl input::placeholder,body.rtl textarea::placeholder{text-align:right}body.rtl .voice-input-text{direction:rtl;text-align:right}body.rtl .gallery-grid{direction:rtl}body.rtl .back-button{transform:scaleX(-1)}body.rtl .comment-item{text-align:right}body.rtl .comment-author{flex-direction:row-reverse}body.rtl .progress-bar{transform-origin:right center}body.rtl .tool-picker{flex-direction:row-reverse}body.rtl .color-palette{direction:rtl}body.rtl ::-webkit-scrollbar{left:0;right:auto}.language-selector{display:flex;flex-direction:column;gap:8px}.language-selector-label{font-size:14px;font-weight:600;color:#333}.language-selector .select,.language-selector .language-select{min-width:180px;padding:10px 36px 10px 16px;font-size:14px;border-radius:10px;border:2px solid var(--vapor-border, #CBD5E1);background:#fff;color:#333;cursor:pointer;transition:all .2s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}.language-selector .select:hover,.language-selector .language-select:hover{border-color:var(--vapor-primary, #002868)}.language-selector .select:focus,.language-selector .language-select:focus{outline:none;border-color:var(--vapor-primary, #002868);box-shadow:0 0 0 3px #0028681a}.language-selector-compact{display:flex;flex-direction:column;gap:8px}.language-selector-compact label{font-size:14px;font-weight:600;color:#333}.language-selector-compact .select,.language-selector-compact .language-select{width:100%;padding:12px 44px 12px 16px;font-size:15px;border-radius:12px;border:2px solid var(--vapor-border, #CBD5E1);background:#fff;color:#333;cursor:pointer;transition:all .2s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}.language-selector-compact .select:hover,.language-selector-compact .language-select:hover{border-color:var(--vapor-primary, #002868)}.language-selector-compact .select:focus,.language-selector-compact .language-select:focus{outline:none;border-color:var(--vapor-primary, #002868);box-shadow:0 0 0 3px #0028681a}.language-dropdown{min-width:160px;padding:8px 32px 8px 14px;font-size:14px;border-radius:8px;border:1px solid rgba(255,255,255,.3);background:#ffffff26;color:#fff;cursor:pointer;transition:all .2s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}.language-dropdown:hover{background:#ffffff40}.language-dropdown:focus{outline:none;background:#ffffff40;box-shadow:0 0 0 2px #ffffff4d}.language-dropdown option{background:#fff;color:#333;padding:8px}body.rtl .language-selector .select,body.rtl .language-selector .language-select,body.rtl .language-selector-compact .select,body.rtl .language-selector-compact .language-select,body.rtl .language-dropdown{background-position:left 12px center;padding-right:16px;padding-left:36px;text-align:right}@media (max-width: 479px){body.app-locked{--space-1: 3px;--space-2: 5px;--space-3: 6px;--space-4: 10px;--space-5: 13px;--space-6: 14px;--space-8: 19px;--space-10: 26px;--gutter-mobile: 10px;--gutter-tablet: 10px;--gutter-desktop: 10px;--min-touch-target: 36px}}@media (max-width: 479px){body.app-locked{--text-xs: 11px;--text-sm: 13px;--text-base: 14px;--text-lg: 16px;--text-xl: 18px;--text-2xl: 20px;--text-3xl: 25px;--text-4xl: 30px;font-size:var(--text-base)}}.route-loading-fallback{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#ffffffb3;z-index:9000;animation:fadeIn .2s ease .15s both}.route-loading-spinner{width:40px;height:40px;border:4px solid rgba(0,40,104,.12);border-top-color:#002868;border-radius:50%;animation:spin .8s linear infinite}@media (prefers-reduced-motion: reduce){.route-loading-fallback,.route-loading-spinner{animation:none}}@media (max-width: 480px){:is(body.app-locked,body) :is(.btn,.btn-primary,.btn-secondary,.btn-danger,.btn-warning,.btn-small,.btn-large,.btn-md,.btn-voice,.btn-action,.btn-back,.btn-banner-dismiss,.btn-banner-enable,.btn-cancel,.btn-clear,.btn-community,.btn-complete,.btn-continue,.btn-copy,.btn-create,.btn-delete,.btn-edit,.btn-enable-notifications,.btn-got-it,.btn-home,.btn-home-secondary,.btn-like,.btn-like-large,.btn-load-more,.btn-lock,.btn-logout,.btn-nav,.btn-next,.btn-ok,.btn-parent-info,.btn-parent-settings,.btn-pin-change,.btn-pin-remove,.btn-pin-setup,.btn-prev,.btn-purchase,.btn-refresh,.btn-reset,.btn-reset-data,.btn-reset-tutorial,.btn-retry,.btn-select-package,.btn-series-create,.btn-share,.btn-share-large,.btn-share-settings,.btn-skip,.btn-submit,.btn-submit-comment,.btn-switch-mode,.btn-take-break,.btn-test-notification,.btn-theme-browse,.btn-try-app,.btn-use-large,.btn-use-template,.btn-video,.btn-video-confirm,.btn-view,.action-btn,.admin-btn,.cancel-login-btn,.category-btn,.color-mixer-btn,.comment-delete-btn,.custom-color-btn,.daily-claim-btn,.daily-retry-btn,.export-btn,.google-login-btn,.google-login-button,.input-action-btn,.input-action-button,.language-btn,.magic-option-btn,.preview-retry-btn,.print-action-btn,.rating-btn,.rating-button,.retry-button,.save-btn,.sort-btn,.sync-now-btn,.tab-btn,.theme-back-btn,.together-create-btn,.tutorial-btn,.use-btn,.variation-btn,.view-all-btn){padding:4px 13px!important}}