:root{--color-primary: #EC4899;--color-primary-light: #F472B6;--color-primary-dark: #BE3075;--color-background: #FDF2F8;--color-surface: #FFFFFF;--color-foreground: #3A1A2E;--color-muted-foreground: #A96E8C;--color-border: #FCE9F2;--color-border-strong: #F5D6E8;--color-success: #86EFAC;--color-warning: #FDE68A;--font-display: "Fredoka", sans-serif;--font-body: "Nunito", sans-serif;--radius: 20px;--radius-sm: 14px;--radius-xs: 10px;--shadow-outer: 4px 4px 12px rgba(236, 72, 153, .15);--shadow-inner: inset 2px 2px 8px rgba(236, 72, 153, .08);--shadow-card: 6px 6px 18px rgba(236, 72, 153, .12), -2px -2px 8px rgba(255, 255, 255, .7);--shadow-btn: 3px 3px 10px rgba(236, 72, 153, .2), -1px -1px 6px rgba(255, 255, 255, .5)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{font-family:var(--font-body);font-size:16px;line-height:1.6;color:var(--color-foreground);background:var(--color-background);min-height:100dvh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100dvh;display:flex;flex-direction:column;align-items:center}.app{width:100%;max-width:480px;min-height:100dvh;display:flex;flex-direction:column;padding:20px 20px 0;margin:0 auto;position:relative}.btn-primary{display:inline-flex;align-items:center;justify-content:center;padding:14px 28px;font-family:var(--font-display);font-size:16px;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light));border:none;border-radius:var(--radius);box-shadow:var(--shadow-btn);cursor:pointer;transition:all .12s ease-out;user-select:none;-webkit-user-select:none}.btn-primary:hover{transform:translateY(-1px);box-shadow:4px 4px 14px #ec489940,-1px -1px 6px #ffffff80}.btn-primary:active{transform:scale(.96);box-shadow:var(--shadow-inner)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:var(--shadow-btn)}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--color-primary);background:var(--color-surface);border:2px solid var(--color-border-strong);border-radius:var(--radius);box-shadow:3px 3px 10px #ec489914;cursor:pointer;transition:all .12s ease-out;user-select:none;-webkit-user-select:none}.btn-secondary:hover{border-color:var(--color-primary-light);background:#fff5fa}.btn-secondary:active{transform:scale(.97);box-shadow:var(--shadow-inner)}.progress-bar{display:flex;align-items:center;gap:10px;margin-bottom:20px;width:100%}.progress-track{flex:1;height:10px;background:var(--color-border);border-radius:99px;overflow:hidden;box-shadow:inset 1px 1px 4px #0000000f}.progress-fill{height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-primary-light));border-radius:99px;transition:width .3s cubic-bezier(.34,1.56,.64,1)}.progress-text{font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--color-muted-foreground);white-space:nowrap;min-width:48px;text-align:right}.card{background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:20px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.fade-in-up{animation:fadeInUp .4s ease-out both}
