*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg: #0f172a;--color-surface: #1e293b;--color-primary: #6366f1;--color-primary-hover: #818cf8;--color-text: #f1f5f9;--color-text-muted: #94a3b8;--color-error-bg: #450a0a;--color-error-text: #fca5a5;--radius: 16px}html{font-size:18px}body{font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--color-bg);color:var(--color-text);min-height:100vh;display:flex;justify-content:center;align-items:center}#root{width:100%;max-width:480px;padding:1.5rem}.app{display:flex;flex-direction:column;align-items:center;gap:2rem}.app-header{text-align:center}.app-header h1{font-size:2.2rem;font-weight:700;background:linear-gradient(135deg,var(--color-primary),#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.app-subtitle{color:var(--color-text-muted);margin-top:.35rem;font-size:.9rem}.app-main{width:100%}.app-footer{text-align:center;font-size:.75rem;color:var(--color-text-muted)}.counter-card{background:var(--color-surface);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:2.5rem 2rem;display:flex;flex-direction:column;align-items:center;gap:1.5rem;box-shadow:0 4px 24px #0000004d}.value-display{display:flex;flex-direction:column;align-items:center;gap:.25rem}.value-label{font-size:.85rem;text-transform:uppercase;letter-spacing:.15em;color:var(--color-text-muted)}.value-number{font-size:5rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:var(--color-text)}.button-row{display:flex;gap:.75rem}.btn{border:none;border-radius:12px;padding:.85rem 2.5rem;font-size:1.1rem;font-weight:600;cursor:pointer;transition:background .15s,transform .1s,opacity .15s}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-add{background:var(--color-primary);color:#fff}.btn-add:hover:not(:disabled){background:var(--color-primary-hover)}.btn-retry{background:#ffffff1a;color:var(--color-text)}.btn-retry:hover{background:#ffffff2e}.status-text{font-size:.8rem;color:var(--color-text-muted)}.error-card{border-color:#dc26264d}.error-icon{font-size:2.5rem}.error-card h3{font-size:1.1rem;color:var(--color-error-text)}.error-message{font-size:.8rem;color:var(--color-error-text);text-align:center;word-break:break-word;background:var(--color-error-bg);padding:.75rem 1rem;border-radius:8px;max-width:100%;overflow-wrap:break-word}.spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--color-primary);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:400px){.value-number{font-size:3.5rem}.counter-card{padding:1.5rem 1rem}}