:root{--color-bg:#f8f9fa;--color-primary:#5b7c99;--color-secondary:#7c9885;--color-accent:#c4a77d;--color-success:#4a9b8e;--color-text:#1f2937;--color-text-light:#6b7280;--color-card-bg:#fff;--color-danger:#dc2626;--color-lailah:#8b7ab8;--color-lailah-light:#e5deff;--color-lailah-gradient:linear-gradient(135deg, #8b7ab8, #6b5b95);--color-akiva:#5b8ba8;--color-akiva-light:#d5e5f2;--color-akiva-gradient:linear-gradient(135deg, #5b8ba8, #4a7089);--color-kindness:#d4738d;--color-manners:#9b88c4;--color-bravery:#d4915a;--color-responsibility:#6aaa8e;--color-patience:#7a9dc4;--tap-target-min:48px;--tap-target-preferred:64px;--icon-size-sm:48px;--icon-size-md:80px;--icon-size-lg:120px;--font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-size-keyword:1.1rem;--font-size-heading:1.75rem;--font-size-subheading:1.25rem;--font-weight-normal:400;--font-weight-medium:500;--font-weight-bold:600;--font-weight-extra-bold:700;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--border-radius:12px;--border-radius-lg:16px;--border-radius-full:9999px;--shadow-sm:0 2px 8px #00000014;--shadow-md:0 4px 16px #0000001f;--shadow-lg:0 8px 32px #00000029;--shadow-glow:0 0 20px #ff6b354d}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;font-size:16px}body{font-family:var(--font-family);background:var(--color-bg);color:var(--color-text);-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;min-height:100dvh;overflow-x:hidden}button,a{touch-action:manipulation;cursor:pointer;font-family:inherit}button{font-size:inherit;min-height:var(--tap-target-min);min-width:var(--tap-target-min);background:0 0;border:none}img{max-width:100%;display:block}#app{max-width:500px;padding:var(--space-md);padding-bottom:calc(var(--space-2xl) + env(safe-area-inset-bottom,0px));min-height:100dvh;margin:0 auto}@media (width>=768px){#app{max-width:700px;padding:var(--space-xl)}}.card{background:var(--color-card-bg);border-radius:var(--border-radius);box-shadow:var(--shadow-sm);padding:var(--space-lg);transition:transform .2s,box-shadow .2s}.card:active{transform:scale(.97)}.behavior-grid{gap:var(--space-md);grid-template-columns:repeat(auto-fill,minmax(140px,1fr));display:grid}@media (width>=768px){.behavior-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}}.header{padding:var(--space-md) 0;margin-bottom:var(--space-md);justify-content:space-between;align-items:center;display:flex}.header h1{font-size:var(--font-size-heading);font-weight:var(--font-weight-extra-bold)}.back-btn{align-items:center;gap:var(--space-xs);font-size:1rem;font-weight:var(--font-weight-bold);color:var(--color-text-light);padding:var(--space-sm) var(--space-md);border-radius:var(--border-radius-full);background:var(--color-card-bg);box-shadow:var(--shadow-sm);display:flex}.progress-bar{border-radius:var(--border-radius-full);width:100%;height:12px;margin:var(--space-sm) 0;background:#e5e7eb;overflow:hidden}.progress-bar-fill{border-radius:var(--border-radius-full);background:linear-gradient(90deg, var(--color-success), var(--color-secondary));height:100%;transition:width .6s cubic-bezier(.4,0,.2,1)}.category-pill{padding:var(--space-xs) var(--space-md);border-radius:var(--border-radius-full);font-size:.85rem;font-weight:var(--font-weight-bold);color:#fff;text-transform:capitalize;display:inline-block}.section-title{font-size:var(--font-size-subheading);font-weight:var(--font-weight-extra-bold);margin:var(--space-lg) 0 var(--space-md);align-items:center;gap:var(--space-sm);display:flex}@keyframes pop-in{0%{opacity:0;transform:scale(0)}70%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@keyframes bounce-in{0%{opacity:0;transform:scale(0)rotate(-10deg)}50%{transform:scale(1.2)rotate(5deg)}70%{transform:scale(.9)rotate(-2deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes celebrate{0%{transform:scale(1)}25%{transform:scale(1.3)rotate(5deg)}50%{transform:scale(1.1)rotate(-3deg)}75%{transform:scale(1.2)rotate(2deg)}to{transform:scale(1)}}@keyframes fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes confetti-fall{0%{opacity:1;transform:translateY(-100vh)rotate(0)}to{opacity:0;transform:translateY(100vh)rotate(720deg)}}@keyframes star-burst{0%{opacity:1;transform:scale(0)rotate(0)}50%{opacity:1}to{opacity:0;transform:scale(3)rotate(180deg)}}.animate-pop-in{animation:.4s cubic-bezier(.34,1.56,.64,1) forwards pop-in}.animate-bounce-in{animation:.6s cubic-bezier(.34,1.56,.64,1) forwards bounce-in}.animate-fade-in{animation:.4s forwards fade-in}.animate-float{animation:3s ease-in-out infinite float}.stagger-children>*{opacity:0;animation:.4s cubic-bezier(.34,1.56,.64,1) forwards pop-in}.stagger-children>:first-child{animation-delay:50ms}.stagger-children>:nth-child(2){animation-delay:.1s}.stagger-children>:nth-child(3){animation-delay:.15s}.stagger-children>:nth-child(4){animation-delay:.2s}.stagger-children>:nth-child(5){animation-delay:.25s}.stagger-children>:nth-child(6){animation-delay:.3s}.stagger-children>:nth-child(7){animation-delay:.35s}.stagger-children>:nth-child(8){animation-delay:.4s}.stagger-children>:nth-child(9){animation-delay:.45s}.stagger-children>:nth-child(10){animation-delay:.5s}#celebration-overlay{pointer-events:none;z-index:1000;width:100%;height:100%;position:fixed;top:0;left:0}#celebration-overlay.active{pointer-events:auto}.confetti-piece{border-radius:2px;width:12px;height:12px;animation:2s linear forwards confetti-fall;position:fixed}.star-burst{font-size:2rem;animation:.8s ease-out forwards star-burst;position:fixed}.collected-badge{background:var(--color-success);color:#fff;width:28px;height:28px;box-shadow:var(--shadow-sm);border-radius:50%;justify-content:center;align-items:center;font-size:.9rem;animation:.3s cubic-bezier(.34,1.56,.64,1) forwards pop-in;display:flex;position:absolute;top:-4px;right:-4px}.theme-selector{gap:var(--space-sm);margin:var(--space-md) 0;flex-wrap:wrap;display:flex}.theme-btn{padding:var(--space-sm) var(--space-md);border-radius:var(--border-radius-full);font-size:.9rem;font-weight:var(--font-weight-bold);background:var(--color-card-bg);border:2px solid #e5e7eb;transition:all .2s}.theme-btn.active{border-color:var(--color-primary);color:var(--color-primary);background:#fff0eb}.empty-state{text-align:center;padding:var(--space-2xl) var(--space-lg);color:var(--color-text-light)}.empty-state .emoji{margin-bottom:var(--space-md);font-size:4rem;animation:3s ease-in-out infinite float}.action-row{gap:var(--space-sm);margin:var(--space-md) 0;flex-wrap:wrap;display:flex}.action-btn{min-width:120px;padding:var(--space-md);border-radius:var(--border-radius);font-size:1rem;font-weight:var(--font-weight-bold);color:#fff;justify-content:center;align-items:center;gap:var(--space-sm);box-shadow:var(--shadow-sm);flex:1;transition:transform .2s;display:flex}.action-btn:active{transform:scale(.95)}.action-btn.primary{background:var(--color-primary)}.action-btn.secondary{background:var(--color-secondary)}.action-btn.success{background:var(--color-success)}.action-btn.danger{background:var(--color-danger);font-size:.85rem}.modal-backdrop{z-index:500;padding:var(--space-lg);background:#00000080;justify-content:center;align-items:center;animation:.2s fade-in;display:flex;position:fixed;inset:0}.modal-content{background:var(--color-card-bg);border-radius:var(--border-radius-lg);padding:var(--space-xl);text-align:center;width:100%;max-width:360px;animation:.3s cubic-bezier(.34,1.56,.64,1) pop-in}.modal-content h2{margin-bottom:var(--space-md);font-size:var(--font-size-heading)}.modal-content p{margin-bottom:var(--space-lg);color:var(--color-text-light)}.modal-actions{gap:var(--space-md);justify-content:center;display:flex}.nav-tabs{gap:var(--space-xs);background:var(--color-card-bg);border-radius:var(--border-radius);padding:var(--space-xs);box-shadow:var(--shadow-sm);margin-bottom:var(--space-lg);display:flex}.nav-tab{padding:var(--space-sm) var(--space-md);border-radius:calc(var(--border-radius) - 4px);font-size:.9rem;font-weight:var(--font-weight-bold);color:var(--color-text-light);text-align:center;flex:1;transition:all .2s}.nav-tab.active{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-sm)}.sticker-page{background:var(--color-card-bg);border-radius:var(--border-radius-lg);padding:var(--space-lg);min-height:300px;box-shadow:var(--shadow-md);gap:var(--space-md);border:3px dashed #e5e7eb;grid-template-columns:repeat(3,1fr);align-content:start;display:grid}.sticker-item{align-items:center;gap:var(--space-xs);flex-direction:column;animation:.5s cubic-bezier(.34,1.56,.64,1) forwards bounce-in;display:flex}.sticker-item .sticker-emoji{filter:drop-shadow(2px 2px 4px #0000001a);font-size:2.5rem}.sticker-item .sticker-label{font-size:.7rem;font-weight:var(--font-weight-bold);color:var(--color-text-light);text-align:center}.garden-scene{border-radius:var(--border-radius-lg);padding:var(--space-lg);min-height:300px;box-shadow:var(--shadow-md);justify-content:center;align-items:flex-end;gap:var(--space-sm);background:linear-gradient(#e0f7fa 0%,#a5d6a7 60%,#795548 100%);flex-wrap:wrap;display:flex;position:relative;overflow:hidden}.garden-plant{flex-direction:column;align-items:center;animation:.6s cubic-bezier(.34,1.56,.64,1) forwards bounce-in;display:flex}.garden-plant .plant-emoji{font-size:2.5rem}.garden-plant .plant-label{font-size:.65rem;font-weight:var(--font-weight-bold);color:#2e7d32;background:#fffc;border-radius:4px;padding:2px 6px}.treasure-chest{border-radius:var(--border-radius-lg);padding:var(--space-lg);min-height:300px;box-shadow:var(--shadow-md);justify-content:center;gap:var(--space-md);background:linear-gradient(#1a1a2e 0%,#16213e 50%,#0f3460 100%);flex-wrap:wrap;align-content:start;display:flex}.treasure-item{align-items:center;gap:var(--space-xs);flex-direction:column;animation:.5s cubic-bezier(.34,1.56,.64,1) forwards bounce-in;display:flex}.treasure-item .treasure-emoji{filter:drop-shadow(0 0 8px #ffd70080);font-size:2.5rem}.treasure-item .treasure-label{font-size:.65rem;font-weight:var(--font-weight-bold);color:gold}.spotlight-card{background:var(--color-card-bg);border-radius:var(--border-radius-lg);padding:var(--space-xl) var(--space-lg);text-align:center;box-shadow:var(--shadow-lg);margin:var(--space-lg) 0}.spotlight-card .spotlight-emoji{margin-bottom:var(--space-md);font-size:5rem;animation:3s ease-in-out infinite float}.spotlight-card .spotlight-keyword{font-size:1.5rem;font-weight:var(--font-weight-extra-bold);margin-bottom:var(--space-sm)}.spotlight-card .spotlight-description{color:var(--color-text-light);margin-bottom:var(--space-lg);font-size:1rem}.upcoming-list{gap:var(--space-sm);flex-direction:column;display:flex}.upcoming-item{align-items:center;gap:var(--space-md);background:var(--color-card-bg);padding:var(--space-md);border-radius:var(--border-radius);box-shadow:var(--shadow-sm);transition:transform .2s;display:flex}.upcoming-item:active{transform:scale(.98)}.upcoming-item .upcoming-emoji{flex-shrink:0;font-size:2rem}.upcoming-item .upcoming-text{flex:1}.upcoming-item .upcoming-keyword{font-weight:var(--font-weight-bold);font-size:1rem}.upcoming-item .upcoming-desc{color:var(--color-text-light);font-size:.8rem}