.app{width:100%;max-width:420px;margin:0 auto}.card{background:var(--color-card);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 24px}.title{font-size:1.5rem;font-weight:700;margin-bottom:24px;text-align:center;color:var(--color-text)}.field{margin-bottom:20px}.label{display:block;font-size:.875rem;font-weight:600;margin-bottom:8px;color:var(--color-text)}.input-wrapper{position:relative;display:flex;align-items:center}.prefix{position:absolute;left:14px;font-size:1rem;font-weight:600;color:var(--color-text-muted);pointer-events:none}.input{width:100%;padding:12px 14px;font-size:1rem;font-weight:600;color:var(--color-text);background:#f8fafc;border:2px solid var(--color-border);border-radius:8px;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.input-wrapper.currency .input{padding-left:32px}.input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}.input::placeholder{color:var(--color-text-muted);font-weight:400}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.tip-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.preset-button{padding:12px;font-size:1rem;font-weight:700;color:var(--color-text);background:var(--color-secondary);border:2px solid transparent;border-radius:8px;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}.preset-button:hover{background:var(--color-secondary-hover)}.preset-button.selected{color:#fff;background:var(--color-primary)}.preset-button:focus-visible{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}.result{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px;margin:24px 0;background:#f8fafc;border:2px dashed var(--color-border);border-radius:var(--radius)}.result-label{font-size:.875rem;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.result-value{font-size:2.5rem;font-weight:800;color:var(--color-primary);line-height:1.2}.reset-button{width:100%;padding:14px;font-size:1rem;font-weight:700;color:var(--color-text);background:var(--color-secondary);border:none;border-radius:8px;cursor:pointer;transition:background .15s ease}.reset-button:hover{background:var(--color-secondary-hover)}.reset-button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--color-primary-light)}.footer{margin-top:16px;text-align:center;font-size:.75rem;color:var(--color-text-muted)}@media (min-width: 480px){.card{padding:36px 32px}.title{font-size:1.75rem}.result-value{font-size:3rem}}*{box-sizing:border-box;margin:0;padding:0}:root{--color-bg: #f4f7fb;--color-card: #ffffff;--color-text: #18304d;--color-text-muted: #6b7b8f;--color-border: #d2dce8;--color-primary: #1c6ef7;--color-primary-hover: #145bd1;--color-primary-light: #e6f0ff;--color-secondary: #e7edf3;--color-secondary-hover: #dbe4ed;--radius: 12px;--shadow: 0 8px 24px rgba(24, 48, 77, .08)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--color-bg);color:var(--color-text);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}