html,body,#root{margin:0;padding:0;width:100%}.app-container{background-color:#f4f4f4;min-height:100vh;display:flex;flex-direction:column;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:#333}.app-header{background-color:#5e5e5e;padding:1rem 2rem;display:flex;align-items:center;color:#fff;box-shadow:0 2px 5px #0003}.app-brand{display:flex;align-items:center;gap:1.5rem;background:none;border:none;padding:0;margin:0;cursor:pointer;color:inherit;transition:opacity .15s ease}.app-brand:hover{opacity:.85}.app-logo{height:60px;border-radius:6px;background-color:#fff;padding:4px}.app-title{font-size:1.8rem;color:#fff;margin:0}.app-content{flex:1;padding:2rem}.footer{text-align:center;padding:6px 16px;font-size:12px;line-height:1.2;background-color:#4a4a4a;color:#e8e8e8}.footer p{margin:0}.footer a{color:#f57c00;text-decoration:underline;font-weight:600}.footer a:hover{color:#ff9a2e}.app-view{max-width:760px;margin:0 auto}.container{max-width:760px;margin:1.5rem auto;background-color:#fff;padding:32px;border-radius:16px;box-shadow:0 6px 20px #00000014}.card-head{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:8px}.card-head-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background-color:#fff3e6;color:#f57c00}.card-head-icon svg{width:22px;height:22px}.header{font-size:22px;font-weight:700;color:#f57c00;text-align:center;margin:0}.card-sub{text-align:center;font-size:15px;line-height:1.5;color:#6b6b6b;margin:0 0 28px}.card-sub em{font-style:normal;font-weight:600;color:#f57c00}.input-container{display:grid;grid-template-columns:1fr;gap:24px}.field{display:flex;flex-direction:column}.label-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:22px;margin-bottom:8px}.label{font-size:14px;font-weight:600;color:#5e5e5e;margin-bottom:8px}.label-row .label{margin-bottom:0}.field-row{position:relative;display:flex;align-items:center}.field-row .input-field{width:100%;padding-right:40px}.field-unit{position:absolute;right:14px;font-size:15px;font-weight:600;color:#9a9a9a;pointer-events:none}.input-field{padding:13px 14px;font-size:16px;border:1px solid #d8d8d8;border-radius:10px;background-color:#f7f7f7;color:#333;outline:none;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}.input-field:focus{border-color:#f57c00;background-color:#fff;box-shadow:0 0 0 3px #f57c002e}.input-field.disabled{background-color:#eaeaea;color:#a0a0a0}.mode-container{margin-bottom:24px}.mode-label{font-size:14px;color:#5e5e5e;margin-bottom:12px}.mode-buttons label{display:inline-flex;align-items:center;margin-right:24px;font-size:16px;color:#333}.mode-buttons input{margin-right:8px}.mode-buttons input:checked{accent-color:#f57c00}@media (min-width: 600px){.input-container{grid-template-columns:1fr 1fr}}@keyframes fieldHighlight{0%{background-color:#ffe5c2;border-color:#f57c00}60%{background-color:#fff0db;border-color:#f57c00}to{background-color:#f7f7f7;border-color:#d8d8d8}}.input-field.highlight{animation:fieldHighlight 1.2s ease-in-out}.calc-badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:#2e7d32;background-color:#e7f5e8;padding:3px 9px;border-radius:999px;animation:badgePop .3s ease}.calc-badge-icon{width:13px;height:13px}@keyframes badgePop{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.stepper{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px auto 4px;flex-wrap:wrap}.step{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;border:1px solid #e0e0e0;background-color:#fff;color:#6b6b6b;font-size:15px;font-weight:600;cursor:pointer;transition:all .18s ease}.step:hover{border-color:#f57c00}.step-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background-color:#ececec;color:#6b6b6b;font-size:14px;font-weight:700;flex-shrink:0}.step-check{width:16px;height:16px}.step.active{background-color:#f57c00;border-color:#f57c00;color:#fff;box-shadow:0 4px 12px #f57c004d}.step.active .step-num{background-color:#ffffff40;color:#fff}.step.done:not(.active) .step-num{background-color:#e7f5e8;color:#2e7d32}.step-sep{width:28px;height:2px;background-color:#e0e0e0;border-radius:2px}.card-actions{display:flex;justify-content:flex-end;margin-top:28px}.primary-btn{background:linear-gradient(135deg,#f57c00,#ff9a2e);color:#fff;border:none;padding:13px 26px;font-size:16px;font-weight:700;border-radius:10px;cursor:pointer;box-shadow:0 6px 16px #f57c004d;transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease}.primary-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 22px #f57c0066}.primary-btn:disabled{background:#d4d4d4;color:#fff;box-shadow:none;cursor:not-allowed}.link-btn{background:none;border:none;padding:0;font-size:14px;font-weight:700;color:#f57c00;text-decoration:underline;cursor:pointer}.link-btn:hover{color:#e26e00}.notice{text-align:center;background-color:#fff7ef;border:1px dashed #f5b97a;border-radius:12px;padding:28px 24px}.notice-text{font-size:15px;color:#8a5a1f;margin:0 0 18px}.ref-recap{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;background-color:#f3f6f3;border:1px solid #d9e6da;border-radius:12px;padding:12px 16px;margin-bottom:24px}.ref-recap-badge{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:#2e7d32}.ref-recap-check{width:15px;height:15px}.ref-recap-values{font-size:14px;color:#5e5e5e}.ref-recap-values strong{color:#333}.ref-recap .link-btn{margin-left:auto}.landing{max-width:860px;margin:0 auto;padding:0 16px 48px}.hero{text-align:center;padding:56px 24px 64px;margin:0 auto 40px;background:linear-gradient(135deg,#fff7ef,#ffe9d2);border-radius:20px;box-shadow:0 10px 30px #f57c001f}.hero-badge{display:inline-flex;align-items:center;gap:8px;background-color:#f57c001f;color:#c85a00;font-size:14px;font-weight:600;letter-spacing:.5px;padding:6px 16px;border-radius:999px;margin-bottom:20px}.hero-badge-icon{width:16px;height:16px}.hero-title{font-size:clamp(28px,5vw,44px);font-weight:800;line-height:1.15;color:#2b2b2b;margin:0 0 12px}.hero-subtitle{font-size:clamp(18px,3vw,22px);font-weight:600;color:#f57c00;margin:0 0 24px}.hero-lead{font-size:17px;line-height:1.6;color:#5e5e5e;max-width:580px;margin:0 auto 32px}.cta-button{background:linear-gradient(135deg,#f57c00,#ff9a2e);color:#fff;border:none;padding:16px 36px;font-size:18px;font-weight:700;border-radius:12px;cursor:pointer;box-shadow:0 8px 20px #f57c0059;transition:transform .15s ease,box-shadow .15s ease}.cta-button:hover{transform:translateY(-2px);box-shadow:0 12px 26px #f57c0073}.cta-button:active{transform:translateY(0)}.cta-note{font-size:14px;color:#7a7a7a;margin-top:16px;font-weight:500}.features{margin-bottom:48px}.features-heading{text-align:center;font-size:22px;font-weight:700;color:#2b2b2b;margin-bottom:28px}.feature-grid{display:grid;grid-template-columns:1fr;gap:24px}.feature-card{background-color:#fff;border-radius:16px;padding:28px 26px;border:1px solid #f0e3d6;box-shadow:0 4px 14px #0000000f;transition:transform .18s ease,box-shadow .18s ease}.feature-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px #f57c0026}.feature-icon{width:60px;height:60px;display:flex;align-items:center;justify-content:center;background-color:#fff3e6;border-radius:14px;margin-bottom:18px;color:#f57c00}.feature-icon svg{width:30px;height:30px}.feature-card-title{font-size:19px;font-weight:700;color:#f57c00;margin:0 0 10px}.feature-card-text{font-size:15.5px;line-height:1.55;color:#555;margin:0}.benefits{text-align:center;background-color:#5e5e5e;color:#fff;border-radius:20px;padding:44px 28px}.benefits-title{font-size:clamp(20px,3.5vw,26px);font-weight:700;margin:0 0 28px}.benefits-list{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 32px;margin-bottom:32px}.benefit{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:500}.benefit-icon{width:22px;height:22px;flex-shrink:0;color:#ffb74d}.cta-button-secondary{background:#fff;color:#f57c00;box-shadow:0 8px 20px #00000040}.cta-button-secondary:hover{box-shadow:0 12px 26px #00000052}@media (min-width: 640px){.feature-grid{grid-template-columns:1fr 1fr}}