@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";:root{--bg-main: #ffffff;--bg-secondary: #f0fdf4;--primary: #0033a0;--primary-glow: rgba(0, 51, 160, .25);--accent: #00b140;--accent-glow: rgba(0, 177, 64, .3);--danger: #e3002f;--danger-glow: rgba(227, 0, 47, .3);--text-main: #0f172a;--text-muted: #64748b;--surface: #ffffff;--surface-border: #e2e8f0;--font-family: "Inter", system-ui, -apple-system, sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-secondary);background-image:linear-gradient(#ffffffe0,#fffffff2),url(/album-bg.png);background-size:cover;background-position:center;background-attachment:fixed;color:var(--text-main);font-family:var(--font-family);min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}#root{display:flex;flex-direction:column;min-height:100vh;width:100%;max-width:480px;margin:0 auto;position:relative;overflow-x:hidden;box-shadow:0 0 40px #00000026;background:transparent}.screen{flex:1;display:flex;flex-direction:column;padding:16px;animation:fadeIn .4s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.header{text-align:center;margin-bottom:32px;position:relative}.title{font-size:1.75rem;font-weight:800;background:linear-gradient(to right,var(--primary),var(--danger));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px}.home-header{position:relative;width:100%;padding:12px 64px 12px 16px;margin-bottom:16px;border-radius:20px;overflow:hidden;background:#ffffff73;border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 16px 40px #0033a00a;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left}.home-header:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:url(/topbg.png);background-size:cover;background-position:center;opacity:.18;z-index:0;pointer-events:none}.home-header .title{position:relative;z-index:1;font-size:1.12rem;font-weight:800;line-height:1.32;background:linear-gradient(to right,var(--primary),var(--danger));-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 1px rgba(255,255,255,.9));margin:0}.subtitle{color:var(--text-muted);font-size:.9rem;font-weight:500}.stats-card{background:#ffffffbf;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.5);border-radius:20px;padding:16px;margin-bottom:16px;box-shadow:0 12px 32px #0033a00f;display:flex;flex-direction:column;gap:12px}.stat-row{display:flex;justify-content:space-between;align-items:center}.stat-label{color:var(--text-muted);font-weight:500;font-size:.9rem}.stat-value{font-size:1.5rem;font-weight:700}.stat-value.highlight{color:var(--accent);text-shadow:0 2px 8px var(--accent-glow)}.progress-container{width:100%;height:12px;background:#f1f5f9;border-radius:6px;overflow:hidden;position:relative;box-shadow:inset 0 2px 4px #0000000d}.progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),#34d399);border-radius:6px;transition:width 1s cubic-bezier(.4,0,.2,1);position:relative}.progress-bar:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.actions{display:flex;flex-direction:column;gap:10px;margin-top:0;margin-bottom:16px}.btn{border:none;border-radius:9999px;padding:11px 20px;font-size:.96rem;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);text-decoration:none;border:1px solid rgba(255,255,255,.2)}.btn:hover{transform:translateY(-4px)}.btn:active{transform:translateY(2px)}.btn-primary{background:linear-gradient(135deg,var(--primary),#2563eb);box-shadow:0 8px 24px var(--primary-glow)}.btn-primary:hover{box-shadow:0 12px 32px var(--primary-glow)}.btn-secondary{background:linear-gradient(135deg,var(--accent),#10b981);box-shadow:0 8px 24px var(--accent-glow)}.btn-secondary:hover{box-shadow:0 12px 32px var(--accent-glow)}.btn-tertiary{background:linear-gradient(135deg,var(--danger),#f43f5e);box-shadow:0 8px 24px var(--danger-glow)}.btn-tertiary:hover{box-shadow:0 12px 32px var(--danger-glow)}.search-input{width:100%;padding:18px 24px;font-size:1.25rem;font-family:var(--font-family);font-weight:600;border:2px solid var(--surface-border);border-radius:16px;background:var(--surface);color:var(--text-main);outline:none;transition:all .2s;text-transform:uppercase}.search-input:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-glow)}.camera-screen{padding:0;position:relative;background:#000;flex:1;display:flex;flex-direction:column}.camera-header{position:absolute;top:0;left:0;right:0;padding:24px;display:flex;justify-content:space-between;align-items:center;z-index:10;background:linear-gradient(to bottom,rgba(0,0,0,.8),transparent)}.back-btn{background:#ffffff1a;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer}.camera-view{flex:1;width:100%;object-fit:cover;pointer-events:none}.camera-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;z-index:5}.scan-frame{width:70%;aspect-ratio:3/4;border:2px solid rgba(255,255,255,.3);border-radius:16px;position:relative;box-shadow:0 0 0 9999px #00000080}.scan-frame:before,.scan-frame:after{content:"";position:absolute;width:20px;height:20px;border:3px solid #3b82f6}.scan-frame:before{top:-2px;left:-2px;border-right:none;border-bottom:none;border-radius:12px 0 0}.scan-frame:after{bottom:-2px;right:-2px;border-left:none;border-top:none;border-radius:0 0 12px}.code-target{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60%;height:25%;border:2px dashed rgba(16,185,129,.8);border-radius:8px;background:#10b98126;animation:pulse-border 2s infinite}.code-target:after{content:"Align Code Here";position:absolute;top:-24px;left:50%;transform:translate(-50%);font-size:.75rem;color:#10b981;font-weight:600;white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.8)}@keyframes pulse-border{0%,to{border-color:#10b98166;background:#10b9810d}50%{border-color:#10b981;background:#10b98133}}.scan-instruction{position:absolute;bottom:15%;background:#0009;padding:10px 20px;border-radius:20px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);font-weight:500;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:.8}50%{opacity:1}}.result-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:20;animation:fadeIn .2s ease-out}.result-success{background:#10b981d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.result-error{background:#ef4444d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.result-warning{background:#f59e0bd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.result-icon{font-size:4rem;margin-bottom:16px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.2))}.result-text{font-size:1.5rem;font-weight:700;text-align:center;margin-bottom:8px}.result-subtext{font-size:1rem;opacity:.9}.gear-btn:hover .gear-icon{transform:rotate(90deg)}.gear-icon{transition:transform .4s cubic-bezier(.4,0,.2,1)}.modal-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background:#0f172aad;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:24px;z-index:999;animation:modalFadeIn .3s cubic-bezier(.4,0,.2,1)}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:#ffffffe0;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.5);box-shadow:0 24px 60px #0033a02e;border-radius:28px;width:100%;max-width:400px;padding:28px;animation:modalSlideUp .38s cubic-bezier(.34,1.56,.64,1)}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(35px)}to{opacity:1;transform:translateY(0)}}.modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--surface-border);padding-bottom:16px;color:var(--text-main)}.close-btn{background:transparent;border:none;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:8px;border-radius:50%;transition:all .2s}.close-btn:hover{background:#0000000d;color:var(--text-main)}.settings-option-btn{transition:all .2s cubic-bezier(.4,0,.2,1)}.settings-option-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #e3002f26;background:#e3002f14!important}.settings-option-btn:active{transform:translateY(1px)}.scan-laser-line{animation:laserScanAnimation 2.2s cubic-bezier(.4,0,.2,1) infinite}@keyframes laserScanAnimation{0%{top:15%;opacity:0}10%{opacity:1}90%{opacity:1}to{top:75%;opacity:0}}.animate-pulse{animation:pulseHUDText 1.8s infinite}@keyframes pulseHUDText{0%,to{opacity:.65;transform:scale(.98)}50%{opacity:1;transform:scale(1)}}.pulsing-grid-icon{animation:floatOrb 2.5s ease-in-out infinite}@keyframes floatOrb{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.sticker-grid-slot{transition:all .2s cubic-bezier(.175,.885,.32,1.275)}.sticker-grid-slot:hover{transform:scale(1.06);z-index:10}.sticker-grid-slot:active{transform:scale(.95)}.floating-toast{position:absolute;top:90px;left:50%;transform:translate(-50%);background:#0f172ae0;border:1px solid rgba(255,255,255,.22);color:#fff;padding:12px 24px;border-radius:50px;font-size:.85rem;font-weight:700;letter-spacing:.5px;box-shadow:0 10px 25px #00000059;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:1000;animation:toastSlideDown .35s cubic-bezier(.175,.885,.32,1.275);white-space:nowrap}@keyframes toastSlideDown{0%{opacity:0;transform:translate(-50%,-15px)}to{opacity:1;transform:translate(-50%)}}.footer-nav-btn:disabled{pointer-events:none}.album-book-container{display:flex;flex-direction:column;width:100%;gap:16px;padding-bottom:20px}.album-page-half{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);gap:6px}.album-spine{height:2px;width:100%;background:linear-gradient(to right,transparent,rgba(255,255,255,.3),transparent);margin:8px 0}@keyframes laser-scan{0%{top:0%;opacity:0}10%{opacity:1}90%{opacity:1}to{top:100%;opacity:0}}@keyframes slide-up{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.exchange-list::-webkit-scrollbar{width:4px}.exchange-list::-webkit-scrollbar-track{background:#0000000d;border-radius:4px}.exchange-list::-webkit-scrollbar-thumb{background:var(--accent);border-radius:4px}.adsense-container{margin-top:auto;width:100%;display:flex;justify-content:center;align-items:center;padding:16px;background:#fff9;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:2px dashed rgba(0,51,160,.15);border-radius:20px;box-shadow:inset 0 2px 8px #00000005;min-height:90px;text-align:center;position:relative;overflow:hidden;transition:all .3s ease}.adsense-container:hover{border-color:var(--primary);background:#ffffffd9}.adsense-label{font-size:.72rem;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.5px;opacity:.75}