*,:before,:after{box-sizing:border-box}:root{--primary:#10b981;--primary-dark:#059669;--primary-light:#34d399;--accent:#3b82f6;--accent-dark:#2563eb;--accent-light:#60a5fa;--background:#f9fafb;--surface:#fff;--text-primary:#111827;--text-secondary:#6b7280;--border:#e5e7eb;--shadow:#0000001a}body{-webkit-font-smoothing:antialiased;background-color:var(--background);color:var(--text-primary);margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.screen{min-height:100vh}.header{background-color:var(--primary);color:#fff;box-shadow:0 2px 4px var(--shadow);padding:1rem 1.5rem}.header h1{margin:0;font-size:1.5rem;font-weight:600}.calculator{max-width:500px;margin:0 auto;padding:2rem 1.5rem}.calculator-card{background-color:var(--surface);box-shadow:0 4px 6px var(--shadow);border-radius:1rem;padding:2rem}.form-group{margin-bottom:2rem}.form-group:last-of-type{margin-bottom:0}.label{color:var(--text-primary);text-transform:uppercase;letter-spacing:.025em;margin-bottom:.5rem;font-size:.875rem;font-weight:600;display:block}.input-wrapper{align-items:center;display:flex;position:relative}.currency-symbol{color:var(--text-secondary);pointer-events:none;font-size:1.125rem;font-weight:500;position:absolute;left:1rem}.input-large{border:2px solid var(--border);background-color:var(--surface);width:100%;color:var(--text-primary);border-radius:.5rem;padding:1rem 1rem 1rem 2rem;font-size:1.5rem;font-weight:600;transition:border-color .2s,box-shadow .2s}.input-large:hover{border-color:var(--primary-light)}.input-large:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px #10b9811a}.slider-group{align-items:center;gap:1rem;display:flex}.slider-wrapper{flex:1;position:relative}.slider{background:linear-gradient(to right, var(--primary-light), var(--primary));appearance:none;border-radius:4px;outline:none;width:100%;height:8px}.slider::-webkit-slider-thumb{appearance:none;background:var(--primary);cursor:pointer;width:24px;height:24px;box-shadow:0 2px 4px var(--shadow);border:3px solid #fff;border-radius:50%;transition:transform .2s,box-shadow .2s}.slider::-webkit-slider-thumb:hover{box-shadow:0 4px 8px var(--shadow);transform:scale(1.1)}.slider::-moz-range-thumb{background:var(--primary);cursor:pointer;width:24px;height:24px;box-shadow:0 2px 4px var(--shadow);border:3px solid #fff;border-radius:50%;transition:transform .2s,box-shadow .2s}.slider::-moz-range-thumb:hover{box-shadow:0 4px 8px var(--shadow);transform:scale(1.1)}.slider-value{text-align:center;min-width:4rem;color:var(--primary);background-color:var(--background);border:2px solid var(--primary);border-radius:.5rem;padding:.75rem 1rem;font-size:1.25rem;font-weight:700}.number-selector{align-items:center;gap:1rem;display:flex}.number-button{color:#fff;background-color:var(--accent);cursor:pointer;border:none;border-radius:.5rem;justify-content:center;align-items:center;width:3rem;height:3rem;font-size:1.5rem;font-weight:600;transition:background-color .2s,transform .1s;display:flex}.number-button:hover{background-color:var(--accent-dark)}.number-button:active{transform:scale(.95)}.number-button:disabled{background-color:var(--border);cursor:not-allowed;opacity:.5}.number-display{text-align:center;color:var(--text-primary);background-color:var(--background);border:2px solid var(--border);border-radius:.5rem;flex:1;padding:1rem;font-size:2rem;font-weight:700}.results{border-top:2px solid var(--border);margin-top:2rem;padding-top:2rem}.result-row{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.result-row:last-child{margin-bottom:0}.result-label{color:var(--text-secondary);font-size:1rem;font-weight:500}.result-value{color:var(--text-primary);font-size:1.25rem;font-weight:600}.result-highlight{background:linear-gradient(135deg, var(--primary), var(--primary-dark));border-radius:.75rem;margin-top:1rem;padding:1.5rem;box-shadow:0 4px 12px #10b98133}.result-highlight .result-label{color:#ffffffe6;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;font-size:.875rem;font-weight:600}.result-highlight .result-value{color:#fff;font-size:2.5rem;font-weight:700}.reset-button{width:100%;color:var(--text-secondary);border:2px solid var(--border);cursor:pointer;background-color:#0000;border-radius:.5rem;margin-top:1.5rem;padding:1rem;font-size:1rem;font-weight:600;transition:all .2s}.reset-button:hover{color:var(--text-primary);border-color:var(--text-secondary);background-color:var(--background)}.reset-button:active{transform:scale(.98)}@media (width<=640px){.calculator{padding:1.5rem 1rem}.calculator-card{padding:1.5rem}.result-highlight .result-value{font-size:2rem}.input-large{font-size:1.25rem}.number-display{font-size:1.5rem}}