*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--primary: #4A7C6F;--primary-light: #e8f2f0;--primary-dark: #3a6359;--accent: #D4A855;--accent-light: #fdf6e3;--bg: #FAF7F2;--bg-card: #FFFFFF;--text: #2C3E35;--text-muted: #7A8F86;--border: #E8E4DC;--danger: #C0392B;--success: #27AE60;--radius: 16px;--radius-sm: 10px;--shadow: 0 2px 12px rgba(44,62,53,.08);--shadow-lg: 0 8px 32px rgba(44,62,53,.12);--font-display: "Playfair Display", serif;--font-body: "DM Sans", sans-serif;--nav-height: 72px;--nav-bg: rgba(250,247,242,.95)}.dark{--primary: #5A9E8F;--primary-light: #1a2e2a;--primary-dark: #4a8070;--accent: #D4A855;--accent-light: #2a2210;--bg: #111714;--bg-card: #1C2420;--text: #E8F0EC;--text-muted: #7A9A8E;--border: #2A3830;--danger: #e05c4a;--success: #4AC87A;--shadow: 0 2px 12px rgba(0,0,0,.3);--shadow-lg: 0 8px 32px rgba(0,0,0,.4);--nav-bg: rgba(17,23,20,.95)}html{font-size:16px;-webkit-text-size-adjust:100%}body{font-family:var(--font-body);background:var(--bg);color:var(--text);min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased}#root{max-width:480px;margin:0 auto;min-height:100vh;position:relative;background:var(--bg)}a{color:inherit;text-decoration:none}button{font-family:var(--font-body);cursor:pointer;border:none;background:none}input,textarea{font-family:var(--font-body)}.page{padding:0 20px;padding-bottom:calc(var(--nav-height) + 20px);min-height:100vh}.page-header{padding:52px 0 20px;border-bottom:1px solid var(--border);margin-bottom:24px}.page-title{font-family:var(--font-display);font-size:26px;font-weight:500;color:var(--text);letter-spacing:-.3px}.page-subtitle{font-size:14px;color:var(--text-muted);margin-top:4px}.card{background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border);padding:16px 20px;box-shadow:var(--shadow)}.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--primary);color:#fff;border-radius:var(--radius-sm);padding:14px 24px;font-size:15px;font-weight:500;width:100%;transition:background .15s,transform .1s;position:relative;overflow:hidden}.btn-primary:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#ffffff2e;border-radius:inherit;transform:scale(0);opacity:0;transition:transform .4s ease,opacity .4s ease}.btn-primary:active:after{transform:scale(1);opacity:1;transition:0s}.btn-primary:hover{background:var(--primary-dark)}.btn-primary:active{transform:scale(.98)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--primary-light);color:var(--primary);border-radius:var(--radius-sm);padding:12px 20px;font-size:14px;font-weight:500;transition:background .15s}.btn-secondary:hover{background:#d4e8e3}.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;color:var(--text-muted);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 20px;font-size:14px;font-weight:400;transition:all .15s}.btn-outline:hover{border-color:var(--primary);color:var(--primary)}.section-label{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:12px}.badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:500;padding:4px 10px;border-radius:20px}.badge-green{background:var(--primary-light);color:var(--primary)}.badge-gold{background:var(--accent-light);color:#7a5c00}.badge-gray{background:#f0ede8;color:var(--text-muted)}.divider{height:1px;background:var(--border);margin:20px 0}.text-center{text-align:center}.text-muted{color:var(--text-muted)}.text-small{font-size:13px}.font-display{font-family:var(--font-display)}.spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.fade-in{animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}@keyframes bounce-in{0%{transform:scale(.8);opacity:0}60%{transform:scale(1.1)}80%{transform:scale(.95)}to{transform:scale(1);opacity:1}}.bounce-in{animation:bounce-in .45s cubic-bezier(.34,1.56,.64,1) both}@keyframes badge-pop{0%{transform:scale(1)}40%{transform:scale(1.25) rotate(-5deg)}70%{transform:scale(.95) rotate(3deg)}to{transform:scale(1) rotate(0)}}.badge-pop{animation:badge-pop .5s ease both}@keyframes pulse-glow{0%,to{box-shadow:0 0 #e85c0d00}50%{box-shadow:0 0 0 10px #e85c0d00}}.pulse-streak{animation:pulse-glow 1.5s ease infinite}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.shake{animation:shake .4s ease}@keyframes slide-up{0%{transform:translateY(20px) translate(-50%);opacity:0}to{transform:translateY(0) translate(-50%);opacity:1}}.slide-up{animation:slide-up .35s cubic-bezier(.34,1.56,.64,1) both}@keyframes xp-flash{0%{transform:scale(1);color:var(--primary)}30%{transform:scale(1.4);color:#d4a855}to{transform:scale(1);color:var(--primary)}}.xp-flash{animation:xp-flash .6s ease both}.btn-ripple{position:relative;overflow:hidden}.btn-ripple:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#ffffff40;border-radius:inherit;transform:scale(0);opacity:0;transition:transform .4s ease,opacity .4s ease}.btn-ripple:active:after{transform:scale(1);opacity:1;transition:0s}@keyframes confetti-fall{0%{transform:translateY(-20px) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}.confetti-piece{position:fixed;width:10px;height:10px;border-radius:2px;animation:confetti-fall linear forwards;pointer-events:none;z-index:9999}@keyframes count-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.count-up{animation:count-up .3s ease both}