:root{--primary: #4f46e5;--primary-hover: #4338ca;--secondary: #4b5563;--card-bg: white;--text: #111827;--light-bg: #f3f4f6;--border: #e5e7eb;--info-bg: #eff6ff;--info-border: #dbeafe;--info-text: #1e40af;--success-bg: #f0fdf4;--success-border: #dcfce7;--success-text: #166534}*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,sans-serif}body{background-color:var(--light-bg);color:var(--text);line-height:1.5}.container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem}.calculator{width:100%;max-width:28rem}.title{font-size:1.5rem;font-weight:700;text-align:center;margin-bottom:2rem;color:var(--secondary)}.calculator-content{display:flex;flex-direction:column;gap:1.5rem}.card{background-color:var(--card-bg);border-radius:.5rem;padding:1.25rem;box-shadow:0 1px 3px #0000001a;border:1px solid var(--border)}.card-title{font-size:1.125rem;font-weight:600;margin-bottom:1rem;color:var(--secondary)}.input-group{margin-bottom:1rem}.input-group:last-child{margin-bottom:0}.label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.5rem;color:var(--secondary)}input{width:100%;padding:.625rem;border:1px solid var(--border);border-radius:.375rem;font-size:.875rem;outline:none;transition:border-color .15s ease-in-out}input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #4f46e51a}.input-with-prefix{display:flex;align-items:center;position:relative}.prefix{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--secondary);font-weight:500}.input-with-prefix input{padding-left:1.75rem}.button{width:100%;padding:.625rem 1.25rem;background-color:var(--primary);color:#fff;border:none;border-radius:.375rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:background-color .15s ease-in-out}.button:hover{background-color:var(--primary-hover)}.info-card{background-color:var(--info-bg);border-color:var(--info-border)}.info-text{font-size:.875rem;color:var(--info-text)}.result-card{background-color:var(--success-bg);border-color:var(--success-border)}.result-text{font-size:.875rem;color:var(--success-text);margin-bottom:.25rem}.result-text:last-child{margin-bottom:0}.highlight{font-weight:600}@media (max-width: 640px){.calculator{max-width:100%}.title{font-size:1.25rem}.card-title{font-size:1rem}}