:root{--primary:#10b981;--primary-light:#dcfce7;--bg-color:#f8faf9;--card-bg:#fff;--text-main:#0f172a;--text-muted:#64748b;--border-color:#e2e8f0;--danger:#ef4444;--success:#10b981}body.dark-mode{--bg-color:#0f172a;--card-bg:#1e293b;--text-main:#f8fafc;--text-muted:#94a3b8;--border-color:#334155;color:#f8fafc;background-color:#0f172a}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-main);-webkit-font-smoothing:antialiased;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5}#root{background-color:var(--bg-color);flex-direction:column;max-width:480px;min-height:100vh;margin:0 auto;padding-bottom:0;display:flex;position:relative}.card{background:var(--card-bg);border:1px solid #e2e8f099;border-radius:20px;padding:16px;box-shadow:0 4px 20px #00000008}body.dark-mode #root{background-color:#0f172a}body.dark-mode .card{color:#f8fafc;background:#1e293b;border-color:#334155}body.dark-mode .bottom-nav{background:#1e293b;border-color:#334155}body.dark-mode .icon-button{color:#f8fafc;background:#1e293b;border-color:#334155}body.dark-mode input,body.dark-mode select,body.dark-mode textarea{color:#f8fafc!important;background:#0f172a!important;border-color:#334155!important}body.dark-mode .num-btn{color:#f8fafc;background:#334155}body.dark-mode .input-display{background:#0f172a;border-color:#334155}.btn{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:14px;justify-content:center;align-items:center;padding:12px 20px;font-size:15px;font-weight:600;transition:all .2s;display:inline-flex}.btn:active{transform:scale(.98)}.btn-primary{background:var(--primary);color:#fff}.bottom-nav{z-index:100;background:#fff;border:1px solid #e2e8f0cc;border-radius:24px;justify-content:space-around;align-items:center;width:calc(100% - 32px);max-width:448px;padding:8px 12px;display:flex;position:fixed;bottom:16px;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #00000014}.nav-tab{color:#94a3b8;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:8px 16px;font-size:11px;font-weight:600;text-decoration:none;transition:all .2s;display:flex}.nav-tab.active{color:#15803d;background:#dcfce7}body.dark-mode .nav-tab.active{color:#34d399;background:#064e3b}.nav-tab svg{fill:currentColor;width:22px;height:22px}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.animate-fade{animation:.3s forwards fadeIn}.badge-demo{color:#16a34a;letter-spacing:.5px;background:#dcfce7;border-radius:20px;padding:4px 10px;font-size:11px;font-weight:700}.icon-button{cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:14px;justify-content:center;align-items:center;width:44px;height:44px;display:flex;box-shadow:0 2px 8px #00000005}.numpad{grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px;display:grid}.num-btn{color:var(--text-main);background:#f1f5f9;border:none;border-radius:14px;padding:14px;font-size:22px;font-weight:600}.num-btn:active{background:#e2e8f0}.input-display{text-align:center;letter-spacing:2px;background:#f8faf9;border:2px solid #e2e8f0;border-radius:14px;min-height:70px;padding:16px;font-size:28px;font-weight:700}