:root{--background: #FFF9F0;--foreground: #4A3F35;--card: #FFF9F0;--card-foreground: #4A3F35;--primary: #FFE5D9;--primary-foreground: #8B5E3C;--secondary: #C9E4DE;--secondary-foreground: #4A7C74;--muted: #F0EDE5;--muted-foreground: #9C9388;--accent: #FDEAA8;--accent-foreground: #8B7A3C;--sage: #D4E2D4;--sage-foreground: #5A7A5A;--whisper: #F0EDE5;--whisper-foreground: #B0A89C;--border: #E8E0D0;--ring: #FDEAA8;--pastel-1: #FFE5D9;--pastel-2: #C9E4DE;--pastel-3: #FDEAA8;--pastel-4: #D4E2D4;--pastel-5: #E8D5F0;--pastel-6: #FFD6E0;--font-display: "Fredoka One", Georgia, serif;--font-body: "Baloo 2", system-ui, sans-serif;--font-mono: "Courier New", monospace;--radius: 1.5rem;--radius-sm: 1rem;--radius-lg: 2rem;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font-body);color:var(--foreground);background-color:var(--background);background-image:radial-gradient(circle at 20% 20%,rgba(255,213,224,.15) 1.5px,transparent 1.5px),radial-gradient(circle at 80% 80%,rgba(201,228,222,.15) 1.5px,transparent 1.5px),radial-gradient(circle at 50% 50%,rgba(253,234,168,.1) 1px,transparent 1px);background-size:40px 40px,40px 40px,30px 30px;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100vh}.app{max-width:1200px;margin:0 auto;padding:var(--space-6) var(--space-4);padding-bottom:100px}.header{text-align:center;padding:var(--space-8) var(--space-4) var(--space-6)}.header h1{font-family:var(--font-display);font-size:clamp(1.8rem,5vw,3rem);color:var(--primary-foreground);letter-spacing:.02em;line-height:1.3;text-shadow:2px 2px 0px rgba(255,255,255,.8)}.header .subtitle{font-family:var(--font-body);font-size:clamp(.9rem,2.5vw,1.1rem);color:var(--muted-foreground);margin-top:var(--space-3);font-weight:500}.toggle-bar{display:flex;justify-content:center;gap:var(--space-2);margin-bottom:var(--space-8)}.toggle-btn{font-family:var(--font-body);font-weight:700;font-size:.95rem;padding:var(--space-3) var(--space-5);border-radius:999px;border:3px solid transparent;background:var(--whisper);color:var(--muted-foreground);cursor:pointer;transition:all .25s ease}.toggle-btn.active{background:var(--accent);color:var(--accent-foreground);border-color:var(--primary);box-shadow:0 4px 12px #fdeaa880}.toggle-btn:hover:not(.active){background:var(--muted);color:var(--foreground)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-8)}.task-card{position:relative;border-radius:var(--radius);padding:var(--space-6);border:3px solid rgba(255,255,255,.6);box-shadow:0 8px 24px #0000000f,0 2px 8px #0000000a;cursor:pointer;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease;overflow:hidden;display:flex;flex-direction:column;gap:var(--space-3)}.task-card:hover{animation:bounce-hover .6s ease;box-shadow:0 12px 32px #0000001a,0 4px 12px #0000000f}@keyframes bounce-hover{0%{transform:translateY(0) scale(1)}30%{transform:translateY(-8px) scale(1.02)}60%{transform:translateY(-4px) scale(1.01)}to{transform:translateY(-6px) scale(1.02)}}.task-card.up-next{border-color:var(--accent);box-shadow:0 0 0 4px #fdeaa866,0 0 24px #fdeaa84d,0 8px 24px #0000000f;animation:gentle-glow 2s ease-in-out infinite}@keyframes gentle-glow{0%,to{box-shadow:0 0 0 4px #fdeaa866,0 0 20px #fdeaa840,0 8px 24px #0000000f}50%{box-shadow:0 0 0 4px #fdeaa899,0 0 32px #fdeaa873,0 8px 24px #0000000f}}.task-card.done{opacity:.75}.task-card.done .task-emoji{filter:grayscale(.3)}.card-top-row{display:flex;align-items:flex-start;justify-content:space-between}.task-emoji{font-size:2.5rem;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.status-badge{font-family:var(--font-body);font-weight:700;font-size:.75rem;padding:4px 12px;border-radius:999px;white-space:nowrap;letter-spacing:.03em;text-transform:uppercase}.status-up-next{background:var(--accent);color:var(--accent-foreground)}.status-done{background:var(--sage);color:var(--sage-foreground)}.status-not-yet{background:var(--whisper);color:var(--whisper-foreground)}.task-label{font-family:var(--font-display);font-size:1.5rem;letter-spacing:.02em;color:var(--foreground);line-height:1.2}.task-meaning{font-family:var(--font-body);font-size:.85rem;color:var(--muted-foreground);font-weight:500;margin-top:-4px}.task-time{font-family:var(--font-body);font-weight:700;font-size:1rem;color:var(--primary-foreground);display:flex;align-items:center;gap:6px}.task-time:before{content:"🕐";font-size:.9rem}.done-btn{font-family:var(--font-body);font-weight:700;font-size:.9rem;padding:var(--space-3) var(--space-4);border-radius:999px;border:none;cursor:pointer;transition:all .25s ease;width:100%;margin-top:var(--space-2)}.done-btn.ready{background:var(--sage);color:var(--sage-foreground)}.done-btn.ready:hover{background:#c0d8c0;transform:scale(1.03)}.done-btn.celebrate{background:var(--accent);color:var(--accent-foreground);pointer-events:none}.done-btn.undo{background:var(--whisper);color:var(--whisper-foreground)}.done-btn.undo:hover{background:var(--muted)}.confetti-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden;border-radius:var(--radius)}.confetti-piece{position:absolute;width:10px;height:10px;border-radius:2px;animation:confetti-fall 1.2s ease-out forwards}@keyframes confetti-fall{0%{transform:translateY(-10px) rotate(0) scale(1);opacity:1}to{transform:translateY(300px) rotate(360deg) scale(.5);opacity:0}}.footer{text-align:center;padding:var(--space-8) var(--space-4);font-family:var(--font-body);font-size:.9rem;color:var(--muted-foreground);font-weight:500}.empty-state{text-align:center;padding:var(--space-8) var(--space-4);font-family:var(--font-body);color:var(--muted-foreground)}.empty-state .empty-emoji{font-size:3rem;margin-bottom:var(--space-4)}.empty-state .empty-text{font-size:1.1rem;font-weight:600}@media(max-width:640px){.card-grid{grid-template-columns:1fr;gap:var(--space-5)}.task-card{padding:var(--space-5)}.task-emoji{font-size:2rem}.task-label{font-size:1.3rem}}.sound-indicator{position:absolute;top:12px;right:12px;font-size:1.2rem;animation:wiggle .5s ease-in-out infinite;z-index:5}@keyframes wiggle{0%,to{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}