*,:after,:before{box-sizing:border-box;margin:0;padding:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body{background:#f5f7fb;color:#111827}.page-root{min-height:100vh;display:flex;justify-content:center;padding:24px 16px}.page-container{width:100%;max-width:960px}.page-header{margin-bottom:24px}.page-title{font-size:1.9rem;font-weight:700;color:#111827;margin-bottom:4px}.page-subtitle{font-size:.95rem;color:#6b7280}.card{background:#fff;border-radius:16px;padding:20px 18px;box-shadow:0 18px 45px rgba(15,23,42,.08);border:1px solid rgba(148,163,184,.25)}.card+.card{margin-top:16px}.grid{display:grid;gap:16px}@media (min-width:768px){.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.label{font-size:.85rem;color:#4b5563;font-weight:500}.input,.select{border-radius:10px;border:1px solid #d1d5db;padding:9px 11px;font-size:.95rem;outline:none;background:#f9fafb;transition:border-color .15s,box-shadow .15s,background .15s}.input:focus,.select:focus{border-color:#2563eb;box-shadow:0 0 0 1px rgba(37,99,235,.18);background:#fff}.btn{border:none;border-radius:999px;padding:9px 18px;font-size:.95rem;font-weight:600;cursor:pointer;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease;box-shadow:0 12px 24px rgba(37,99,235,.35)}.btn:hover{transform:translateY(-1px);box-shadow:0 18px 35px rgba(37,99,235,.35);opacity:.95}.btn-outline{background:transparent;color:#2563eb;box-shadow:none;border:1px solid rgba(148,163,184,.8)}.btn-outline:hover{background:#eff6ff;box-shadow:none}.result-box{background:#f9fafb;border-radius:12px;padding:12px 14px;border:1px dashed #cbd5f5}.result-title{font-size:.85rem;text-transform:uppercase;color:#6b7280;letter-spacing:.06em;margin-bottom:4px}.result-value{font-size:1.2rem;font-weight:700;color:#111827}.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;border:1px solid rgba(148,163,184,.7);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:#6b7280;background:#f9fafb}.nav-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.nav-pill{font-size:.85rem;padding:7px 12px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;color:#374151;text-decoration:none;transition:background .15s,border-color .15s,box-shadow .15s}.nav-pill:hover{background:#eff6ff;border-color:#bfdbfe;box-shadow:0 6px 18px rgba(37,99,235,.18)}.calc-display{background:#020617;color:#f9fafb;border-radius:14px;padding:14px;margin-bottom:10px;font-size:1.2rem;text-align:right;min-height:46px;display:flex;align-items:flex-end;justify-content:flex-end}.calc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.calc-btn{border-radius:999px;border:none;padding:11px 0;font-size:1rem;font-weight:500;cursor:pointer;background:#e5e7eb;color:#111827;transition:background .12s,transform .1s,box-shadow .12s}.calc-btn.operator{background:#dbeafe;color:#1d4ed8}.calc-btn.equal{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;box-shadow:0 12px 24px rgba(37,99,235,.35)}.calc-btn.equal,.calc-btn.wide{grid-column:span 2}.calc-btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(15,23,42,.16)}.helper-text{font-size:.8rem;color:#9ca3af;margin-top:4px}